您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁(yè)交互設(shè)計(jì)細(xì)節(jié)的幾大“凡是”

2013/1/8 10:08:33來(lái)源：Danis2011

交互設(shè)計(jì)從用戶角度來(lái)說(shuō)，是一種如何讓產(chǎn)品易用，有效而讓人愉悅的 技術(shù)，它的初衷就是致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)。

但是在做細(xì)節(jié)交互設(shè)計(jì)的時(shí)候，有時(shí)候明明知道卻老偏偏漏掉一些特殊狀況，

其中又以邊緣狀況的細(xì)節(jié)設(shè)計(jì)遺漏為多數(shù)，所以干脆總結(jié)了幾個(gè)“凡是”，以提醒自己記得別忘記。
在這里一一列舉，希望對(duì)大家也有些許幫助。
 
一。凡是輸入，必有限制。
當(dāng)我們?cè)谠O(shè)計(jì)中使用到輸入控件特別是文本輸入框的時(shí)候，這個(gè)問(wèn)題就來(lái)了。
 
第一個(gè)需要面對(duì)的是字符數(shù)的限制，
字符數(shù)的限制有的來(lái)自于產(chǎn)品本身的業(yè)務(wù)限制，
比如微博的140個(gè)字，注冊(cè)時(shí)賬號(hào)和密碼的長(zhǎng)度等。

 
 
有些產(chǎn)品看上去并不限制字符數(shù)，或者說(shuō)并不給用戶交代“限制”的概念。
但其實(shí)也需要限制，這種限制來(lái)自于技術(shù)方面的考慮。
比如寫郵件的時(shí)候填入的收件人個(gè)數(shù)，搜索框接受的關(guān)鍵字字?jǐn)?shù)，留言板的內(nèi)容等。
雖然業(yè)務(wù)不要求，但錄入的內(nèi)容，可能會(huì)造成提交的困難，數(shù)據(jù)庫(kù)的臃腫，被攻擊的漏洞等，
所以我們也不得不考慮“隱形的限制”，雖然邊界看不到，一旦用戶越界，還是需要有相應(yīng)的解決方案。

 
圖 - 其實(shí)郵件主題還是不能寫太長(zhǎng)的，雖然一般不會(huì)寫這么長(zhǎng)
 

 
圖 - 百度原來(lái)也有字?jǐn)?shù)限制
 
輸入并不全是文本，所以我們還需要面對(duì)其他格式的輸入限制問(wèn)題。
 
比如上傳文件的個(gè)數(shù)，

 
圖 - 人人網(wǎng)上傳照片的數(shù)量限制
 
比如上傳文件的大小，

圖 - qq郵箱附件的大小上限
 
比如上傳文件的格式，
上傳照片的的時(shí)候如果用戶選了非圖片格式的文件怎么辦？一開(kāi)始就讓ta只能看圖片文件還是選中后提醒？

圖 - qq郵箱對(duì)于exe附件的限制
 
 
這些限制也都從業(yè)務(wù)和技術(shù)兩方面考慮，
比如相冊(cè)一次只能傳20張照片，升級(jí)為會(huì)員就能傳50張，這是業(yè)務(wù)限制。
用瀏覽器相冊(cè)一次只能傳20張照片，安裝插件或客戶端，能傳50張，這是技術(shù)限制，考慮瀏覽器負(fù)荷。
 
 
面對(duì)以上輸入限制問(wèn)題的時(shí)候，具體的解決方式當(dāng)然是多種多樣的，這里列舉一些規(guī)則：
a.如果是字符輸入，中英文字符數(shù)的計(jì)算規(guī)則。規(guī)則不一樣，設(shè)計(jì)也不一樣。
 

 
圖 - 新浪微博是限制140個(gè)中文280個(gè)英文（當(dāng)然還有各種其他字符空格的情況）
 
b.如何暗示限制？
 

 
 
c.違反規(guī)則的時(shí)候作何反饋？
這個(gè)問(wèn)題文章下面會(huì)繼續(xù)提及。
 
d.輸入控件根據(jù)容納內(nèi)容的變化？
是直接用滾動(dòng)條解決呢？還是伸長(zhǎng)輸入框呢？還是兩者結(jié)合呢？等等。

圖 - 出現(xiàn)滾動(dòng)條
 
 
圖 - 延長(zhǎng)高度
 
 
e.別忘了以上內(nèi)容。畫一個(gè)輸入框時(shí)想想這不是一個(gè)無(wú)底洞。
 
 
二.凡是輸入，必考慮輸出。
界面上的動(dòng)態(tài)內(nèi)容，可能來(lái)自于后臺(tái)編輯的錄入，也可能來(lái)自于前臺(tái)用戶的發(fā)表，
總之，界面上的動(dòng)態(tài)內(nèi)容，都是先有人輸入的。
輸入的人（特別是用戶）可能不會(huì)去考慮以后展現(xiàn)的效果，
但作為設(shè)計(jì)師的我們，就要為用戶考慮了。
 
要考慮超量?jī)?nèi)容的顯示。
這涉及到兩個(gè)方面的考慮，
先考慮輸入時(shí)候的限制，我們要知道究竟某個(gè)顯示空間究竟最多可能出現(xiàn)多少內(nèi)容
（當(dāng)然，有時(shí)候是輸入輸出一起考慮，最終雙方平衡）。
再考慮這些內(nèi)容在顯示空間里如果顯示不完，那怎么辦？
解決方案可以是索引頁(yè)顯示局部，到詳情頁(yè)再顯示完全（總得要有個(gè)地方顯示完全的信息），


 
 
也可以是顯示部分內(nèi)容，留待更多展開(kāi)顯示。
 
或者滾動(dòng)條來(lái)拯救等等等等。
 
 
既然有超量?jī)?nèi)容，也可能有空白內(nèi)容。
當(dāng)搜索結(jié)果為0的時(shí)候，怎么顯示？
當(dāng)用戶還沒(méi)收到任何消息的時(shí)候，怎么呈現(xiàn)？
當(dāng)某個(gè)分類下的商品為空的時(shí)候，怎么辦？
這些問(wèn)題也不要忘記考慮進(jìn)我們的設(shè)計(jì)方案里面。
 

 
圖 - 有個(gè)說(shuō)明總好過(guò)讓人家以為未加載出來(lái)
 

 
圖 - 不能總是指望用戶每次都能搜出結(jié)果
 
 
另外，還有分辨率的事。
無(wú)論是移動(dòng)終端（特別是android）還是電腦，我們?cè)O(shè)計(jì)的界面會(huì)出現(xiàn)在各種尺寸的顯示器上。
這就決定了我們不得不考慮屏幕的適配問(wèn)題。
比如一個(gè)pc上的彈出層，確定按鈕的位置要保證在第一屏的話，那得考慮主流（里最?。┢聊桓叨取?/div>
比如一個(gè)默認(rèn)的全屏應(yīng)用壁紙，多大合適？用平鋪合適還是居中合適？還是自適應(yīng)？
比如480x800的屏幕能顯示6行列表項(xiàng)，在480x854的屏幕就能多顯示一行。
 
 
三。凡是成功，必考慮失敗。
別想著用戶永遠(yuǎn)都能正確操作，人非圣賢。
這是個(gè)大話題，涉及到怎么防止錯(cuò)誤，錯(cuò)誤后怎么提醒，怎么給予幫助，也許以后再專門做文章吧。
在這里想說(shuō)的是，有時(shí)候做設(shè)計(jì)做昏頭了，再加上進(jìn)度緊張，
往往只是把正常的流程做出來(lái)了，卻忘記了，既然用戶操作了，就可能失敗。
比如注冊(cè)時(shí)表單項(xiàng)某些沒(méi)填，
登錄時(shí)密碼賬號(hào)不符，
拖動(dòng)文件失敗，
粘貼圖片失敗，等等等等。
 

 
圖 - 加載失敗的時(shí)候
 
 
 
交互設(shè)計(jì)細(xì)節(jié)的邊緣狀況并不是我們?cè)O(shè)計(jì)的主要內(nèi)容，但卻又是不得不設(shè)計(jì)，
它體現(xiàn)著產(chǎn)品的貼心，考驗(yàn)著我們的細(xì)心，
魔鬼都在細(xì)節(jié)里，別忘了它們 :) 。
[教程作者：admin]
關(guān)鍵詞：交互設(shè)計(jì) 網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié) 交互教程
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://pkvc.cn/tutorial/id1305.html
資訊類產(chǎn)品閱讀列表的交互設(shè)計(jì)思考
確認(rèn)按鈕在左邊，取消按鈕在右邊？
×