如何提高易用性?這7個要點是專門寫給新人的!

@喪心病狂十六夜貓?:本文介紹的7個移動UX 設計要點,諸如內容優先、導航設計、快速響應等都是基礎而經典的設計知識,適合新手入門學習和查漏補缺。

目錄

  1. ?一個屏幕,一個任務
  2. 看不見的用戶界面
  3. 充分留白
  4. 讓導航變得簡單
  5. 單手操作
  6. 響應快速
  7. 讓推送更加人性化

01.?一個屏幕,一個任務

減輕用戶在獲取所需信息上花費的努力。

為APP 所設計的每一個屏幕畫面,都需要仔細斟酌,讓每一個操作都發揮它的作用。

我們來看看下面這個Uber 的APP界面吧。用戶使用這個APP的目的是為了搭上出租車,所以在這個界面中,為了不使用戶感到混亂,我們限制了其他元素的出現?;贕PS 我們可以自動定位用戶所在的位置,用戶只需要選擇自己想去的位置就可以了。

如何提高易用性?這7個要點是專門寫給新人的!

看優秀的案例分析,也能學到不少可用性的知識喲:《全新UBER APP改版背后的設計思考總結》

02.?看不見的界面

內容即界面。

為了讓用戶著眼于內容,我們可以將一些不必要的元素進行刪除。這樣可以縮短用戶的關注時間,將他們引導到他們所需要的內容上。

以下面的谷歌地圖為例。谷歌把全部不必要的面板和按鈕統統省略,將地圖本身便是界面這一理念傳達出來。

如何提高易用性?這7個要點是專門寫給新人的!

 

03.?充分留白

為了讓重要的內容變得注目,讓我們來利用負空間吧。

負空間,又被人稱為留白,指的是在設計和布局的時候在要素的四周被空出來的部分,這部分往往被人無視。雖然有人認為這是對有限空間的浪費,但留白空間對于移動應用界面設計是非常必要的。

不管是在提高可讀性,排列內容的優先順序,還是進行可視化操作的布局上都發揮著非常重要的作用。不但可以簡化用戶界面,還能改善用戶體驗。

如何提高易用性?這7個要點是專門寫給新人的!

關于留白的方法,在這篇好文中有詳細的解讀:《超實用!移動端界面中的版式設計原理(下)》

04.讓導航變得簡單

導航菜單不管是在哪種情況、哪種屏幕下都應該能讓用戶很容易地找到。建議從界面的尺寸限制和內容的優先級出發,決定用哪種導航。

標簽欄作為導航菜單的代替,可以通過一個簡單的點擊跳轉到不同的頁面,對移動端APP來說也是非常方便的設定。

如何提高易用性?這7個要點是專門寫給新人的!

該用哪種導航,首先得知道有哪些導航模式,優缺點都是什么:《全方位科普移動端導航的七種設計模式》

05.?單手操作

對應大屏來設計尺寸吧。自從iPhone?6?和?6?Plus?發售之后,大屏幕已經是今后主流的趨勢了。

如何提高易用性?這7個要點是專門寫給新人的!

下面這張圖片展示了大部分人是怎樣持握移動設備的。(單手操作:49%?|?一只手托著操作:36%?|?雙手操作:15%)

如何提高易用性?這7個要點是專門寫給新人的!

參加試驗的用戶中有85%是用單手操作手機的。接下來的這張熱度圖反映的是自2007年以后發售的iPhone 屏幕上單手大拇指所能操作的范圍。正如你所看到的,隨著屏幕的不斷變大,所能操作的部分(圖中綠色區域)正在逐漸變小。

如何提高易用性?這7個要點是專門寫給新人的!

為了改善用戶體驗,你也需要將上面的數據應用到設計之中。在制作對應大屏幕(如iPhone6或7等等)的APP時,你也需要考慮到單手能操作的范圍。然后,在大拇指所能接觸到的范圍內配置你的導航菜單。

如何提高易用性?這7個要點是專門寫給新人的!

06.快速響應

不要讓用戶將時間浪費在等待上。

你應該把快速啟動時刻放在心上。通過后臺提前運行,你可以讓他看起來變得響應快速。這樣做會有兩個好處,用戶看不見它們的加載過程,且在用戶實際操作之前項目就已經加載完成。一個很棒的參考案例,就拿Instagram的照片上傳功能來說,用戶選擇好想要分享的照片時,上傳就已經開始了。

如何提高易用性?這7個要點是專門寫給新人的!

在Instagram上傳照片的時候,他還會提醒用戶添加標簽。直到用戶按下分享按鈕,照片的上傳工作就已經完成了,用戶可以立即分享他們的照片。

更多“欺騙”用戶的加載技巧,參考:《詳析6種常見的LOADING設計模式》

07.讓推送更加人性化

在發送信息之前多想想。

每天通過APP給用戶進行大量的推送會讓用戶的注意力變得分散甚至給他們帶來煩惱。這些讓人厭煩的推送也是用戶選擇卸載它們的原因之一(有71%的受訪者這樣回答)。

如何提高易用性?這7個要點是專門寫給新人的!

不要試圖為了吸引用戶而去給他們推送消息。而是將對用戶來說非常重要的消息進行整理之后,再給他們進行推送。

為了有效的給移動端的用戶推送通知,我們可以使用如推送通知、E-mail、應用內通知等各種各樣的手段。增加你的消息推送方式,將他們很好的結合在一起,可以讓你的用戶體驗變得更加友好。

如何提高易用性?這7個要點是專門寫給新人的!

更具體的設計方法和案例參見:《怕打擾用戶?來看看怎樣設計通知欄不會討人厭》

最后

在設計移動應用的時候,要將便利性(英:?Useful)與直觀性(英:?Intuitive)這兩點時刻記在心上。如果應用對用戶并沒有多大幫助,誰也沒有理由去使用它的;如果應用很便利,但使用又需要花費一番功夫,也沒有幾個人會去真正學習該怎樣使用的。好的UI設計和UX設計,應該將以上兩點問題全部解決。

那么,一起享受設計的樂趣吧。

提高可用性原則的3大方法:

  1. 經典的可用性原則丨《拿不定設計?讓經典的尼爾森十大可用性原則幫你?。ǜ桨咐?/a>
  2. 通過可用性測試丨《零基礎也能學!超詳細的可用性測試方法經驗總結》
  3. 從可用性角度看設計丨《直擊本質!從可用性角度重新解讀設計風格的變遷史》

原文地址:photoshopvip

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量180萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

收藏 11
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。