移動用戶界面的5個設計原則

如下內容由Mockplus（摹客）團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

 

去年移動端用戶首次在全球範圍內超過桌面端用戶。看看來自全球的統計數據，現在超過22％屏幕的分辨率爲640x360。

這種趨勢不容忽視，儘管響應式和移動式開發已有一段時間了，移動界面中的交互與桌面界面中的交互卻很是不一樣。隨着React Native和Progressive Web Apps（響應式網頁程序）的興起，將來幾年移動用戶界面的開發也將成爲Web開發的重要組成部分。

在開發移動用戶界面時，簡易性對於良好的用戶體驗相當重要。界面應保持一致，避免用戶的認知超負荷和讓用戶感受到混亂。

爲了知足和權衡用戶交互的做用，本文提到了5個可衡量的原則。這篇文章將分別對這些原則作一個簡短的總結，並舉例子來概述咱們在建立移動界面時應該考慮的問題。

有效性

有效性可檢驗當用戶在使用界面時候的有效性如何。用戶有從其餘界面和現實世界中獲取的經驗。在人機交互（HCI）中，稱爲用戶正在建立的心理模型，以便更容易地理解複雜的概念。咱們能夠根據現實生活中獲取的知識來提升用戶的效率。有效性的目標是減小完成任務所需的操做次數。

舉一些例子：

PWA是使用心理模型來提高用戶效率的一個極好的例子。經過設計相似於模擬調諧器的數字調諧器，用戶能夠當即將這個數字版本的調諧器映射到他在現實世界的體驗中。

使用匹配和已知的圖標來減小認知負擔。把它們和小標籤結合起來，減小錯誤的解讀。

心理模型的另外一個例子就是將事物的轉換當作相似於現實世界中燈光的切換。

(圖片1)

 

效率

效率是指用戶可以以何種方式理解應用程序的當前狀態以及能夠執行的操做。它以每秒動做來衡量，並描述了用戶完成任務的效率。

一些例子

在界面中提供用戶所在位置的視覺提示。例如顯示標題，在窗體中提供進度條，突出顯示當前標籤。

若是界面變得太複雜了，那就設計出可分配子任務的簡單類別。例如全部用戶相關數據的概要，過去保存項目的集合以及新信息的檢索。

(圖片2)

 

生產率

生產率是指用戶成功完成任務所需的時間以及用戶發現和識別界面功能的容易程度。它是根據相對於時間完成任務所需的動做數量來衡量的。

一些例子

經過提供界面核心任務的快捷方式來減小打字的須要。

避免使用誤導性的標籤，例如使用錯誤的圖標。

提供錯誤消息，以便用戶能夠快速從錯誤中恢復。

(圖片3)

 

反饋錯誤信息

給用戶反饋是界面設計中最重要的部分之一。恰當的反饋能夠明顯減小咱們的錯誤。咱們能夠經過每一個任務的每一個操做中提交的錯誤數量來衡量失誤。

一些例子

爲用戶操做提供適當的反饋。

突出重要/新信息。

提供教程或提示，能夠在須要時查看。

顯示當前視圖/任務/用戶的名稱。

當用戶發生錯誤或系統未按預期工做提供反饋。例如，表單錯誤，沒法上傳/處理。

(圖片4)

 

認知負荷

減小用戶的認知負擔對於界面的友好度相當重要的。咱們能夠經過使用隱喻來解決晦澀的概念，並保持界面簡單，以避免使用戶混淆。衡量認知負荷的一種方法是計算每一個視圖的動做。

一些例子

在視圖和內容切換之間提供動畫，切勿粗糙的剪切和混亂的篡改內容。

使用熟悉和匹配的符號，使用戶易於完成任務。

使用邏輯流程讓用戶快速完成一項新任務。

(圖片5)

 

結論

當咱們設計一個用戶界面時，它的設計重點就應該是幫助用戶完成他要完成的任務。那麼在界面設計過程當中你應該問本身一些問題：

我設計的界面是否讓用戶以最簡單的方式來完成任務？

界面是否遵循簡單性以及利用心智模型來減小認知負荷？

該界面是否顯示用戶所在的位置，避免用戶混淆和迷失方向？

用戶是否獲得了恰當的反饋意見？

界面是否考慮過可能出現的錯誤並提供對這些錯誤的反饋？

因爲屏幕尺寸小，移動界面很受限制，所以將應用程序簡單化並把重心放在用戶想要完成的任務上就顯得尤其重要。若是界面變得過於複雜和混亂，多是由於它試圖去知足許多不一樣的條件，實際上應該被拆分紅不一樣的應用程序。經過保持界面的有效性，效率，生產率，及時反饋錯誤信息和減小認知負載，咱們能夠避免設計出一些看起來花哨，實際上並不支持用戶完成任務的用戶界面。

 

學習工具，但不受限於某種工具。Mockplus作原型，更快更簡單，如今下載Mockplus，免費體驗暢快的原型設計之旅。

原文連接：https://medium.com/swlh/principles-of-mobile-user-interfaces-94661cca7c16

原文做者：Lisi Linhart