填寫是一件麻煩事,我們或多或少感受糟糕體驗。設(she)計(ji)開發者也(ye)很無奈,感覺身體被掏(tao)空。怎(zen)么(me)辦(ban)?
讓我(wo)們(men)從優化輸(shu)入框(kuang)開始(shi)吧!看著(zhu)簡單的(de)框(kuang),對用戶(hu)體驗的(de)影響很(hen)大。特別(bie)是在非常有限的(de)手機屏幕(mu)中(zhong),怎么(me)幫(bang)助用戶(hu)順利的(de)填寫完呢?值(zhi)得(de)我(wo)們(men)好好研究。
舒適(shi)的(de)填寫區域(yu)
常用的數值(zhi)是:拇指的滑動觸發區域(yu)在(zai)(zai)寬高(gao)45px左右(you),圖標的操作區域(yu)是48dp,輸入框行高(gao)在(zai)(zai)80dp左右(you),行間(jian)距在(zai)(zai)8dp。
左圖行(xing)距過于擁(yong)擠,而(er)且文字大小不(bu)統(tong)一,給用戶一種填(tian)寫內容很多的感覺
簡潔的描述
填寫標(biao)簽(qian)要(yao)簡(jian)潔, 過(guo)長的標(biao)簽(qian)有兩個(ge)問題:
使填寫的內容壓(ya)縮。
影響整(zheng)頁對齊(qi)。
平(ping)行(xing)(xing)排布(bu)優點是:符合視線規律(lv)。閱讀更快。如果(guo)要填寫的標簽實在過長,檢(jian)查(cha)一下是否說不清楚的可以用(yong)占位符描(miao)述(shu)?或者采取(qu)垂直排布(bu)的方式(shi)。平(ping)行(xing)(xing)排布(bu)優點是:對(dui)標簽字數限(xian)制不嚴格。
恰當的(de)顏色
輸入的(de)結(jie)果我們常常用顏色(se)來反饋,比(bi)如(ru)藍色(se)代(dai)表(biao)(biao)鏈接,灰色(se)代(dai)表(biao)(biao)失效,綠色(se)代(dai)表(biao)(biao)正確(que),黃(huang)色(se)代(dai)表(biao)(biao)提(ti)示,紅(hong)色(se)代(dai)表(biao)(biao)錯誤。紅(hong)色(se)的(de)使用要(yao)慎重,因為(wei)(wei)紅(hong)色(se)默認為(wei)(wei)最高等級警告,如(ru)果紅(hong)色(se)的(de)提(ti)示出現過多會對用戶造成緊張感,想(xiang)到試卷上滿(man)篇的(de)厚叉(cha)了么(me)?所以把(ba)提(ti)示分級吧(ba)。
對于大家公認的(de)色彩暗示,如果隨意交換容易造成誤解,特別紅色和灰色。這有點像(xiang)我(wo)們默認為穿(chuan)裙子(zi)的(de)形象是女,穿(chuan)褲(ku)子(zi)是男,如果有天(tian)你看(kan)到(dao)穿(chuan)裙子(zi)標(biao)識的(de)男廁所,會困惑嗎?
對于約定俗(su)成的事(shi),走尋常(chang)路才更易用
明確的指示
當用(yong)(yong)戶(hu)選(xuan)中(zhong)準(zhun)備輸入的時候,應(ying)當提(ti)供清晰的視覺(jue)提(ti)示,這樣讓用(yong)(yong)戶(hu)明確知道自己的位置,而(er)不(bu)是迷失在茫(mang)茫(mang)表(biao)格中(zhong),這種(zhong)細微的反(fan)饋會讓用(yong)(yong)戶(hu)更有掌控(kong)力。