关闭顶部展开顶部

UI设计范式之二:造句填空Fill In The Blanks_网页设计教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:我们为什么改版?
这次UCDChina书友会主要围绕着改版展开讨论,虽然后期扯得比较远了(设计师们的发散思维还是很恐怖的),但收获颇多,总结起来还是在前期功能未做足所导致。

问题综述
需要用户填写内容但又表示不清填为何故。

举例

适用范围
当你发现即使为某个输入框增加一个标题依然无法说清该输入框的具体用处的时候
当你不得不用很长的一段描述来解释你的输入框用途的时候
当你发现这个输入框所填的内容正好可以成为某个句子的一部分的时候
当这个是必填项的时候。因为把他放在句子中能更引起用户的注重。
不要在句子中加入太多的输入框。因为太多的填空题会让用户怒
对于非必填项尽量少用

解决方案
整理好你的必填项(文本输入框 text field、单选框 radio button、多选框 checkbox、下拉框combo-box)并把他们造句(回忆一下小学老师是怎么教我们的)。这样用户就能边读你的句子边把填空给填了。

假如该输入框不位于句首或句末的话你得注重这些输入框可能会破坏句子的连贯性(译者:因为HTML里面某些输入框格式会占去很多页面空间,或把句子强制换行等),尽量不要用高度超过句子高度的输入框类型。简单的文本输入框或下拉选择框是最好的选择。

该范式经常被用于复杂的筛选功能里。比如Apple iTune在定制高级播放列表(Smart Playlist)的歌曲筛选界面中使用了该范式。


Apple iTune的高级播放列表定制界面

该范式的最大缺点在于面对多语言网站的时候句子会有不同的翻译,那么由于语法的不同,输入框的位置就会发生改变。这样该范式就会阻碍网站向其他语言版本的翻译工作。(译者:尤其对于使用内容治理系统CMS的网站来说这就面临着要重新设计一个表单的模板)

更多例子

Google高级搜索


basecamphq.com

原理总结

通过把一个输入框放到句子中,可以借助句子的上下文来帮助用户更好的理解。有时候你也会碰到很难为输入框造句的时候。怎么不让用户面对冷冰冰的计算机术语呢?看一下这个例子:

Ruby On Rails wiki

例子中的递交按钮“Save”和输入框之作者名字连同取消按钮“Cancel”一起放入了一个句子里面。用传统的方法这个三个操作需要分别用三行单独的描述。但这里巧妙的运用来本范式,不但把三行变成了一行使这三个操作的作用表达清楚得一清二楚。而且还用到了“Input Prompt”范式来鼓励用户填写自己的名字。

本范式让用户界面变得自己会说话了。我想人类的语言能力和表达天性会让我们很乐意去把句子填写完整的。

分享:信息架构的流程引入
对内对外讨论甚至争论了无数次,分享几条不成熟看法:交互能解决一个个功能,但用户的需求是一串串功能,这是我理解为什么交互算过得去,但网站还是那么烂的原

来源:yeeyan.com//所属分类:网页设计教程/更新时间:2007-12-18
相关网页设计教程
闁汇埄鍨遍悺鏇綖閸℃稒鈷掓い鏇楀亾妞わ綇鎷�
婵炲濮崑鎾斥槈閺傝法澧涙俊鑼€濋柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶嬪殧鐎瑰嫭澹嗙换涔侀柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶婄闁诡垎鍕槬闁诲酣娼уΛ娑㈡偉閿燂拷
闂佺ǹ绻愰幊搴ㄥ焵椤掑倸甯堕幖瀛樼矒瀹曟繈鏁撻敓锟�
闂佺ǹ绻愰幊搴ㄥ焵椤掆偓閸氬绮婇敂鍓х煓閻庯絺鏅濋惌娆戠磽娓氬﹥瀚�
闂佽 鍋撴い鏍ㄧ☉閻︻噣鏌涘┑鎰胺缂併劍妞藉銊╊敍濞嗘垵绗¢梺鍝勫€婚幊鎾舵閿燂拷
闂佸搫鍟版慨椋庣礊婢舵劖鐓i悹杞拌濞层倕霉閿濆棙绀€闁告ɑ鐗犲畷鎰版晸閿燂拷
濠碘槅鍨崜婵嗩熆濡吋瀚绘い鎾寸箖鐎氾拷
婵犵鈧啿鈧绱炲鍥ㄥ妞ゆ挻绻冪€氳櫕淇婇妤€澧叉繝顫嫹
濠碘槅鍨崜婵嗩熆濮椻偓瀹曨剟顢欓崗鐓庘偓鐢告煛閸繄孝濠殿噯鎷�
濠碘槅鍨崜婵嗩熆濮椻偓閺屽懘鍩€椤掆偓閳诲酣骞戦幇闈涙闂佸搫瀚搁幏锟�
濠碘槅鍨崜婵嗩熆濮椻偓瀹曪綁骞嬪┑鍫紝
婵犵鈧啿鈧绱炲澶婄煑闁瑰瓨绻勯瀛樹繆椤栨澧叉繝顫嫹
闁诲骸鍘滈崜婵嬫偋閹惰棄鐭楀┑鐘插暙閼靛綊鏌ら懞銉ュ闁绘牭缍佸畷娆撴晸閿燂拷
UB闂佸湱绮崝妤呯嵁閸モ晜瀚氶悗娑櫳戦~锟�
闂佽壈椴稿濠氭焾鐎电硶鍋撻獮鍨仾婵犫偓閿燂拷
闁诲骸绠嶉崹鍝勶耿閸㈢嚜
闂佸憡姊绘慨椋庣礊婢跺瞼鍗氭繛鍡楀閸炲绻涚紙鐘哄厡闁稿骏鎷�
缂傚倷鐒﹂悷锕傚垂濠婂嫮顩锋い鎺嶇缁插湱鈧偣鍊濈紓姘额敊閿燂拷
©2017 www.mb5u.com濠碘槅鍨崜婵嗩熆濮椻偓瀵噣鎮╅幓鎺撳瘶
闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷