建站常識
UI設(shè)計范式之二:造句填空Fill In The Blanks
2007-12-18 12:35:00
問題綜述
需要用戶填寫內(nèi)容但又表示不清填為何故。
舉例
適用范圍
當(dāng)你發(fā)現(xiàn)即使為某個輸入框增加一個標(biāo)題依然無法說清該輸入框的詳細(xì)用處的時候
當(dāng)你不得不用很長的一段描述來解釋你的輸入框用途的時候
當(dāng)你發(fā)現(xiàn)這個輸入框所填的內(nèi)容正好可以成為某個句子的一部分的時候
當(dāng)這個是必填項的時候。因為把他放在句子中能更引起用戶的注意。
不要在句子中加入太多的輸入框。因為太多的填空題會讓用戶怒
對于非必填項盡量少用
解決方案
整理好你的必填項(文本輸入框 text field、單選框 radio button、多選框 checkbox、下拉框combo-box)并把他們造句(回憶一下小學(xué)老師是怎么教我們的)。這樣用戶就能邊讀你的句子邊把填空給填了。
如果該輸入框不位于句首或句末的話你得注意這些輸入框可能會破壞句子的連貫性(譯者:因為HTML里面某些輸入框格式會占去很多頁面空間,或把句子強制換行等),盡量不要用高度超過句子高度的輸入框類型。簡單的文本輸入框或下拉選擇框是最好的選擇。
該范式經(jīng)常被用于復(fù)雜的篩選功能里。比如Apple iTune在定制高級播放列表(Smart Playlist)的歌曲篩選界面中使用了該范式。
Apple iTune的高級播放列表定制界面
該范式的最大缺點在于面對多語言網(wǎng)站的時候句子會有不同的翻譯,那么由于語法的不同,輸入框的位置就會發(fā)生改變。這樣該范式就會阻礙網(wǎng)站向其他語言版本的翻譯工作。(譯者:尤其對于使用內(nèi)容管理系統(tǒng)CMS的網(wǎng)站來說這就面臨著要重新設(shè)計一個表單的模板)
更多例子
Google高級搜索
原理總結(jié)
通過把一個輸入框放到句子中,可以借助句子的上下文來幫助用戶更好的理解。有時候你也會遇到很難為輸入框造句的時候。怎么不讓用戶面對冷冰冰的計算機術(shù)語呢?看一下這個例子:
Ruby On Rails wiki
例子中的遞交按鈕“Save”和輸入框之作者名字連同取消按鈕“Cancel”一起放入了一個句子里面。用傳統(tǒng)的方法這個三個操作需要分別用三行單獨的描述。但這里巧妙的運用來本范式,不但把三行變成了一行使這三個操作的作用表達(dá)清楚得一清二楚。而且還用到了“Input Prompt”范式來鼓勵用戶填寫自己的名字。
本范式讓用戶界面變得自己會說話了。我想人類的語言能力和表達(dá)天性會讓我們很樂意去把句子填寫完整的。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2007-07-30 12:01:00] "以用戶為中心"的UI設(shè)計方法
- [2007-12-20 11:06:00] UI設(shè)計范式之三:實時預(yù)覽
- [2010-08-11 08:30:00] 產(chǎn)品UI設(shè)計流程
- [2007-11-21 09:38:00] 從"..."看中國的UI設(shè)計界的粗糙
- [2009-06-18 07:49:00] 分離需求與GUI設(shè)計—保持項目節(jié)奏實踐之七
- [2006-11-05 17:28:00] 網(wǎng)頁UI設(shè)計95%是排版
- [2007-12-17 13:39:00] UI設(shè)計范式之一:輸入口語化數(shù)據(jù)格式
- [2010-08-22 09:51:00] 常見UI設(shè)計模式
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
插畫 集團(tuán)公司網(wǎng)站建設(shè) 響應(yīng)式設(shè)計 css html和css 青島網(wǎng)站建設(shè)基礎(chǔ)知識 青島網(wǎng)絡(luò)公司 企業(yè)建站 H5 網(wǎng)站SEO 官網(wǎng)網(wǎng)站建設(shè) 蘋果系統(tǒng) 營銷型網(wǎng)站建設(shè) 青島高端網(wǎng)站設(shè)計公司哪家好 色彩心理學(xué) HTML5 網(wǎng)站改版 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) H5定制設(shè)計 平面設(shè)計 網(wǎng)站優(yōu)化 微信營銷的優(yōu)勢 頁面設(shè)計 如何做網(wǎng)站優(yōu)化 青島flash網(wǎng)站 SEO 青島抖音小程序開發(fā) 英文網(wǎng)站建設(shè) 青島網(wǎng)站設(shè)計哪家好 交互設(shè)計