<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 向左走、向右走?表單元素設計大揭密

    2014-3-3    藍藍設計的小編

    轉載藍藍設計(   m.skdbbs.com  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網站建設 、平面設計服務

    來源:http://www.uisdc.com/100-things-you-should-know-about-design

    如果您想訂閱本博客內容,每天自動發到您的郵箱中,   請點這里 

    表單的界面設計是由許多細小的元素所組合而成的集合體,標題和輸入框的排列方式有著重要的地位,標題要放在輸入框的左側還是上面?要靠左還是靠右?要怎么排列才能提高表單的完成率呢?藍藍設計表單元素ui設計大揭密!

    標題和輸入框常見的排列方式

    1. 放在輸入框左邊,而且靠左對齊

     

    2. 放在輸入框左邊,但是靠右對齊


     

    3. 放在輸入框上面


     

    4. 放在輸入框里面


     

    排列方式的比較

    到底這四種排列方式有什么不一樣呢?其實這些排列組合最大的影響都在于用戶視線的移動,在第一種排列方式中,用戶的視線先看到標題,由于靠左對齊的緣 故,我們可以看到表單的左側有著很整齊的虛擬標線,用戶的視線會跟隨著這條虛擬路徑前進,他們會舒服的看完所有的標題,大概的這張表單要求用戶輸入什么數據。

     

    但是由于標題靠左的關系,標題和輸入框之間的關系就不是這么明顯,距離也不固定,使用者要來回在標題-輸入框之間呈現Z型的瀏覽路徑,所以對用戶而言輸入上會稍微產生一點障礙,當然也就增加了完成表單的時間。


     

    第二種排列方式可以減少上面所提到的困擾,因為標題靠右對齊,標題和輸入框之間的關系既清楚又明顯,Z型路徑變短了,輸入數據就會比較輕松。但是由于左側的虛擬標線也變得崎嶇,用戶對于整個表單的概念就會稍微減低,但還不致于造成障礙。


     

    第三種排列方式是直接把標題放在輸入框上面,這個方式完全消除了讓人感到煩躁的Z型路徑,從頭到尾可以較為流暢的閱讀與完成表單,左側的虛擬標線也很整齊,所以使用者的輸入時間也比較短。唯一的缺點是表單看起來變長了,讓使用者心理上感覺好像會花最多時間。


     

    最后一種方式最常出現在注冊或登入的表單上面,把標題直接和輸入框結合,當使用者開始輸入的時候,在輸入框里的標題便慢慢淡出。視覺動線流暢、垂直高度 短、也很容易快速瀏覽表單要求的項目。這個方式最大的缺點大概就是當用戶開始輸入數據的時候,標題就消失了,偶爾會讓使用者產生混淆。


     

    這四種排列組合的方式有著不同的優點與缺點,適合用在不同的地方。設計師可以考慮各種狀況采用不同的排列組合。如果你的網站對于垂直空間很要求,那么第三種排列方式就不能采用了;如果你需要用戶快速的完成表單,第一種排列方式可能不是很好的選項。

    表單除了要當溫柔的店員,也是充滿了學問呢!

    作者:Taco Chen

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.skdbbs.com

    存檔

    主站蜘蛛池模板: 桃花岛精品亚洲国产成人| 精品无码人妻一区二区三区不卡| 国产高清在线精品一区小说| 人人妻人人澡人人爽人人精品97| 久久国产成人亚洲精品影院| 欧美精品亚洲精品日韩| 久久99精品久久只有精品| 西瓜精品国产自在现线| 国产精品毛片一区二区| 国产精品视频网站| 久久精品国产亚洲AV香蕉| 亚洲精品国产日韩无码AV永久免费网 | 国产精品1024香蕉在线观看| 国产精品v片在线观看不卡| 亚洲精品乱码久久久久66| 免费人成在线观看欧美精品| 国产精品成人观看视频| 久久91精品国产91久久麻豆| 2022国产精品福利在线观看| 精品黑人一区二区三区| 日韩国产成人精品视频| 亚洲2022国产成人精品无码区 | 91精品国产品国语在线不卡| 国产成人精品无码免费看| 久久精品欧美日韩精品| 无码人妻精品一区二区三区99仓本 | 欧美精品hdvideosex4k| 亚洲日韩精品一区二区三区无码| 日韩一区二区三区精品| 日韩精品成人a在线观看| 四虎精品亚洲一区二区三区| 色偷偷88欧美精品久久久| 亚洲AV无码成人精品区狼人影院| 日韩一区二区精品观看| 亚洲精品亚洲人成在线观看| 亚洲国产精品福利片在线观看| 亚洲国产精品乱码一区二区| 精品无码人妻一区二区免费蜜桃| 国产精品禁18久久久夂久| 精品无码AV一区二区三区不卡| 精品亚洲成a人片在线观看 |