iOS 7人機介面準則

發表於2014-02-19

Apple官方推出的“iOS人機介面準則”一直被iOS開發者奉為絕對的設計參考寶典,特別是iOS7系統推出以來,Apple公司對該準則進一步做了更新。最近,國內知乎社群的郎啟旭推出了“iOS人機介面準則”完整的中文版,使iOS國內開發者可以快速上手。

iOS人機介面準則主要分為UI設計基礎、設計策略、iOS技術、UI元素、圖示和影像設計等幾個大類,其中每個大類有細分為許多小節,對iOS介面設計原則描述的非常詳盡。

準則一開始就談到了iOS7的設計主旨:

  • 依從(Deference)。使用者介面(UI)應當有助於使用者理解內容並與之互動,而非對抗。
  • 清晰(Clarity)。文字在每種字號下都易於閱讀,圖示表意準確清晰,裝飾也恰到其度,並以對功能的無比關注驅動設計。
  • 縱深(Depth)。視覺上的分層介面和逼真的動作使其更賦活力,提升了使用者的愉悅和理解。

對於“依從”這個主旨,準則舉了幾個實際設計的例子來闡述其表現方式,包括:

  • 充分利用整塊螢幕。重新考量對插圖和視覺框架的使用,可以考慮讓內容擴充套件到螢幕邊緣。“天氣”就是一個很好的範例:漂亮的全屏介面非常直觀地呈現出某個地點當前天氣的關鍵資訊,而且還有
    多餘空間可以顯示每個小時的天氣資料。
  • 重新考量模擬現實的視覺表現。浮雕、漸變和陰影效果有時會讓介面元素變得沉重,進而喧賓奪主。相反,要突出內容並讓介面扮演一個輔助性的角色。
  • 通過半透明的介面元素來暗示背後的內容。半透明效果(如“控制中心”)可以提供情境,幫助使用者看到更多可用的內容,並給人一種短暫停留的暗示。在 iOS 7 中,半透明元素只模糊渲染在其正背後的內容,給人一種透過宣紙的感覺,但螢幕上的其他部分並不會模糊。
  • 大量使用留白。留白會讓重要內容和功能更為突出、更易於理解。同時,留白還可以傳達一種安靜平和的感覺,這會讓 app 看上去更加專注和高效。
  • 用色彩簡化介面。使用一種主題色——例如「便籤」中的黃色——來突出重點,並巧妙地暗示其互動性。同時,這會給 app 帶來一致性的視覺主題。內建的 app 使用了一系列純淨的系統顏色,而每一種顏色在深色淺色兩種背景中看起來都很好。
  • 擁抱無邊框按鈕。在 iOS 7中,所有的條欄按鈕都沒有邊框。無邊框按鈕會在按鈕的內容區域內使用情境、顏色和一個動作導向的標題來暗示其互動性。如果合適,還可以通過顯示纖細的邊框或者淺色背景來讓按鈕更加突出。
  • ……

在“啟動和停止”一節中,準則特別強調:一般來說,在接觸新 app 的一兩分鐘內人們就會決定是否繼續使用。如果你把握住這轉瞬即逝的機會迅速呈現有用的內容,就可以激發新使用者的興趣,並給所有使用者帶來出色的體驗。不要在 人們安裝好你的 app 後告訴他們需要重啟裝置。重啟會耽誤時間,還會讓你的 app 看起來不太可靠且難以上手。

避免要求使用者提供設定資訊,代之以:

  • 關注 80% 使用者的需求。這樣,大部分使用者不需要進行任何設定,因為你的 app 已經按他們期望的方式設定好了。如果有一些功能只有極少數使用者可能需要或者大部分使用者只會用一次,請拋棄這樣的功能。
  • 儘可能通過其他方式獲取資訊。如果你可以使用任何內建程式或裝置中使用者所提供的資訊,那就從系統中獲取這些資訊,而不要讓使用者再輸一次。
  • 如果你確實需要提供設定資訊,請讓人們在你的 app 中輸入。然後,儘快儲存這些資訊(例如,在你 app 的設定中)。這樣一來,在有可能體驗到你 app 的樂趣前人們不會被迫切換到 iOS 的「設定」中了。如果人們將來需要修改這些資訊,可以在任何時間前往 app 的設定頁面進行修改。

準則在“設計策略”部分指出,一致性可以讓使用者將 app 中的某部分介面的經驗和技巧複用到其他地方,或者從一個 app 複用到另一個 app。一致性的 app 不是對其他 app 的簡單複製,也不是風格上的一成不變,相反,它關注使用者所習慣的方式和標準,並提供一個具有內在一致性的體驗。

要判斷一個 iOS app 是否符合一致性原則,可以通過以下幾個問題來考量:

  • App 是否和 iOS 標準保持一致?它是否正確地使用了系統控制元件、檢視和圖示?是否以使用者所期望的方式利用了裝置的特性?
  • App 自身是否具有內部一致性?文字內容是否使用了統一的用辭和風格?同樣的圖示是不是通常意味著相同的意思?當使用者在不同的位置執行同一個操作時是否符合其預期?自定義的介面元素外觀和其行為是否保持一致?
  • App 是否在合理範圍內與之前的版本保持一致?術語和含義是不是仍然相同?基本概念和主要功能是否基本不變?

準則強調:在整個開發過程中,始終要用你的app 定義陳述去判斷功能點、控制元件和用詞是否妥當。例如:

  • 當你考慮增加一個新功能時,問問自己,這對你 app 的主要目的和目標使用者是不是不可或缺?如果不是,把它放在一邊,它可能是構建另一個 app 的基礎。例如,你已經確定你的使用者喜歡探索烹飪,那麼強調打包好的蛋糕和加工好的熟食可能不會被使用者喜歡。
  • 當你考慮 UI 的外觀和行為時,問問自己,你的目標使用者是喜歡簡潔流暢的設計,還是一個更明顯的主題風格?以使用者對你 app 的期望為指引,例如使用 app 去完成一項重要任務,快速找到一個答案,探究內容詳情,或者為了娛樂。儘管你的購物清單 app 需要易於理解而且立即可以上手,但你的使用者可能會更喜歡一個展示著大量美味食材圖片的介面主題。
  • 當你在考量術語時,努力去迎合你的受眾的專業認知。例如,即便你的受眾不太可能由專業廚師組成,但你也應該明白,使用者會希望看到配方和技術方面的專業術語。
  • 儘可能避免增加使用者的認知負擔。使用者熟悉標準 UI 元素的外觀和行為,所以不需要停下來去思考如何使用它們。但當他們面對那些和標準 UI 外觀和行為完全不一樣的元素時,先前的經驗毫無用處。除非你獨特的元素可以讓任務執行更容易,否則使用者可能不會喜歡被迫去學習新的流程,而這些流程又不會 在其他 app 中用到。
  • 重新設計標準控制元件前要三思。如果你正在計劃重新設計一個標準控制元件,要確保你的新設計提供了和標準控制元件一樣多的資訊。例如,如果你設計的開關控制元件不能表現出兩個相反的狀態,使用者可能不會意識到這是一個兩態控制元件。

有關iOS 7人機介面準則的詳細內容可以檢視Apple官方文件,也可以檢視郎啟旭翻譯的中文版

相關文章