偶然的翻到一篇博客,出自百度UED部門的一位移動端交互設計師,博客主題即是“移動應用表單設計秘籍”,想想自己所體驗過的一些移動應用,經常能夠碰到錯誤的表單設計、信息排版混亂、視覺焦點跳躍嚴重、各種應有的反饋不及時….等等,各種坑人,就文中的幾個點,說說自己的一些想法,她分了八個維度來闡述其秘籍,清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校驗的小秘密:
一、清晰的視覺縱線
作為用戶看東西的時候,最舒服的看法,應該是按照當時場景下物體的排列順序,從上至下、從左到右….,web端,有一個不知道怎么來的F型理論,就說用戶在看PC端網頁時,視覺熱力圖構成了一個F狀的圖(如下圖),到了移動端,又會是什么理論呢?據博客中所提到的“L”型視線(導航和操作往往在下邊),一下子感覺自己成了井底之蛙了,聞所未聞啊,L型視線,其實說白了,到了移動端,屏幕更小了,設計的東西,更多的是考慮用戶視線從上到下,這么一個比較舒服的習慣。
還有一些例子,不能它們的設計有多不好,各家考慮的東西偏重點不同,新浪微博,說實話,作為老用戶,打開這個界面的頻率,除非是你換手機、或者刷機了,重新安裝了微博之后,由此可以想象其注冊按鈕放的位置反而更加的優於登錄按鈕,更加符合從上至下,也更加的符合新用戶的胃口吧。
二、信息的分組
表單項里邊,信息種類繁多,如果一項一項的按順序羅列在那里,難以避免給人一種雜亂的感覺,此時,自然而然的讓人聯想到按信息的類別,對表單項進行分組,例如個人注冊時,通常可分為基本信息、教育信息、公司信息….將信息這樣按照組別(每組2-3項)分開后,填寫起來就不會感覺到那么大壓力了。
三、極致的減法
看到這個標題后,深感這個話題可大了,一直根植於我意識中的“簡約”理念,可以說幾乎影響了我所有的原型設計作品,“化繁為簡”、“少即是多”,好比是我一直在修煉的內功心法。iphone、ipad的成功可謂是簡約到極致的代表作,喬布斯對簡約的瘋狂苛求,造就了iphone、ipad,也掀起了移動互聯網的熱潮,簡約的理念在現如今的各種成功的APP當中更是體現得淋漓盡致。該有的文字、標簽、按鈕、提示….等,可有可無的東西,別多想,直接干掉吧,干擾用戶的東西,更加如此了。附上之前的作品,敬請拍磚:
四、利用選擇代替輸入
想必大家都有這樣的感受,移動應用的輸入成本是很高的,尤其是觸摸屏,畢竟大多數用戶習慣了之前的按鈕式鍵盤,因此在這一塊的輸入效率和准確率還是有較大的提升空間,因此了,要盡量減少用戶輸入的內容,利用選擇代替輸入,常見的,例如:性別、城市、日期、一些標簽之類的…等。
五、標簽及提示文字的排布方式
移動應用界面空間有限寸土寸金,一些表單項往往需要通過標簽告知表單類型,通過提示文字告知表單格式,那么到底該如何來展現這些標簽及提示文字呢?
下面是幾個比較:
有了對比,效果非常明顯,孰優孰劣?
六、依靠明文顯示密碼
說到這密碼,估計大多數人會聯想到,注冊時,為了確認密碼,老是要人輸入兩次密碼,防止密碼錯誤之后的登錄失敗,但是真的需要輸入兩次密碼來防止這個問題嗎?
其實除了輸入兩次密碼之外,還有幾種辦法:1、最后一位明文顯示;2、全部明文顯示;3、默認暗文,可選明文;4、默認明文,可選暗文(如下圖);
通過小部分的用戶研究之后,發現“默認明文,可選暗文”這種形式,用戶接受程度最高。
七、合理的鍵盤利用
1、鍵盤的類型與調用
不同的文本框類型,可以調用不同的鍵盤類型。例如,網址輸入框,調用網址輸入鍵盤,可方便快捷的輸入.com;純數字的輸入框,可以調用數字鍵盤;電話號碼輸入框,可以調用電話號碼鍵盤;郵箱輸入框,可調用郵箱鍵盤,方便輸入@。
android鍵盤:
2、鍵盤上的功能鍵
鍵盤上右下角的功能鍵是可以被自定義的,這個功能鍵在填寫表單時,跟PC上的tab鍵有點像,起着向下切換表單項的作用,當處於最后一個表單項的時候,這個功能鍵就變成相應的操作。
比如在登錄表單中,光標處於用戶名框,右下角是下一項;焦點處於表單最后一項,但是有必填項未填寫時,該按鈕是置灰不可點的;當所有必填項填寫完整,且焦點處於表單的最后一項,操作按鈕可點擊,注意此時操作按鈕一定是藍色的。
3、鍵盤上的操作欄
當表單項多於3項的時候,基本上可以考慮增加鍵盤上的操作欄了,這個操作欄可以幫助用戶切換上一項、下一項和收起鍵盤。當焦點處於第一個表單項的時候,上一項置灰不可點。
八、校驗的小秘密
1、縱向的校驗順序
按照表單項從上到下的順序校驗
比如這個表單,就該按照1用戶名——>2密碼——>3手機號——>4郵箱——>5性別的順序依次校驗,用戶名格式不對、用戶名重名、用戶名在黑名單里之類的問題, 都會優先提醒,如果用戶名沒有問題,才會去校驗密碼,密碼沒有問題再去校驗手機號……這樣能保證錯誤提醒是可找到的,有規律可循的。
2、即時的校驗反饋
一種理想化的情況,就是當我輸入完一個表單項的時候,系統可以立刻告訴我,這一項填寫是否正確,而不是填完所有表單,提交之后,才告我我哪里需要修正。在Web端,即時校驗反饋已經非常常見,但是在移動端,即時檢驗尚需時日。主要原因是即時校驗受限於網速,當網絡環境不好的時候,校驗也許需要很久,會影響正在進行的下一項表單的填寫。