移動端產品人必讀「iOS9 人機界面指南解讀」
前言
作為移動端的產品經理,官方的APP設計文檔可以說是比較重要的一份資料,尤其是那些剛入行的產品新人,通讀一遍文檔會從概要層面上了解到很多內容,當然對于視覺設計師、交互設計師而言,也是非常重要的官方指南。
官方文檔中對控件界面交互等都作出了規范說明,這對產品設計是非常重要的,不僅能確保設計出符合平臺規范的應用,而且能幫助我們擴展設計思路,做到手中有術、心中有道才能設計出優秀的產品。
IOS9 人機界面指南
今年,伴隨著iPhone 6S代的上市,也迎來了嶄新的IOS9(也許相比前代有限的變動,并不能稱之為“嶄新”),IOS 人機界面指南也進行了更新,文檔共分為五大部分,分別是:
- UI設計基礎(UI Design Basics)
- 設計策略(Design Strategies)
- IOS 技術(IOS Technologies)
- UI 元素(UI Elements)
- 圖標圖像設計(Icon and Image Design)
官方文檔是純英文的,對于我這樣英語水平有限的同學來說,全部啃下來還是相當吃力的,不過感謝騰訊團隊的辛勤付出,逐步將其翻譯成中文,目前已完成前兩個部分,后續部分也會陸續放出,同學們且耐心等待。以下會嘗試從產品經理的角度對每個部分進行相關的解讀,水平有限,不喜隨意噴。
1. UI 設計基礎
第一部分主要對界面UI設計進行了規范定義,我個人認為此部分主要作為「指導原則」來使用。不僅在產品設計之初,讓我們就在頭腦中對設計形式有所規范,同時在遇到設計方案取舍、改進等情況時能給予我們一個評判衡量的標準。我想,遵循這部分內容要求所設計出的應用,至少在UI設計層面達到了合格的水準。
首先,文檔給出了iOS的三大設計原則:
- 遵從(Deference):UI應該有助于用戶更好地理解內容并與之交互,并且不會分散用戶對內容本身的注意力。
- 清晰(Clarity):各種尺寸的文字清晰易讀;圖標應該精確醒目,去除多余的修飾,突出重點,以功能驅動設計。
- 深度(Depth):視覺的層次感和生動的交互動畫會賦予UI新的活力,有助于用戶更好地理解并讓用戶在使用過程中感到愉悅。
這三個原則可以作為一個指導思想貫穿到整個產品設計過程中,保證設計的產品能夠做到:以內容為核心、內容和功能清晰可見、便于用戶理解并感到愉悅。
接下來,對UIKit提供的UI組件做了大致的分類:欄(Bars)、內容視圖(Content Views)、控件(Controls)、臨時視圖(Temporary Views)。這些組件是搭建產品結構、承載內容、實現功能的重要組成部分,在第四部分會詳細加以說明(暫未翻譯,敬請期待)。
然后,結合IOS系統后臺特性,講解了應用啟動/停止時需注意的地方,這里和Android系統有很大的區別,如果對兩個平臺的區別不是很清楚的同學,需要在這里多花點心里了解一下。
另外,文檔對應用交互性與反饋、動畫、圖標圖形、顏色字體等內容都做了基礎的說明。需要說明一點,這里主要是從指導思想層面進行了概述,沒有涉及到細節實現的方法。
該部分章節具體的內容詳見:[ISUX譯]iOS 9人機界面指南(一):UI設計基礎,同時對這部分的結構內容,我整理一份思維導圖,在文末可以下載。
2.設計策略
第二部分主要詳解了一些設計原則以及產品成型的大體過程,重點在「產品設計」。從需求的調研階段,通過產品設計規范,最終得到應用的界面并能順利完成相應的任務。這是整個產品研發過程前期至關重要的一環,在很大程度上決定著一款產品的成敗。
首先,文檔給出了六個設計原則:
- 美學完整性:應用的視覺表現和交互行為與功能結合后所傳達出的整體一致性;
- 一致性:專注于讓人們覺得舒適的標準和范例,并提供應用內部統一的體驗;
- 直接操作:直接在屏幕上操作對象時,能更集中精力完成任務;
- 反饋:可以明示人們的行為,呈現操作結果,并更新于任務進程之中;
- 隱喻:應用中的虛擬對象和交互行為盡量與用戶已經熟悉的體驗相似;
- 用戶控制:是人—而不是應用—發起和控制行為
在把需求轉化為界面交互的設計過程中,總是會有一些共通的原則可以指導我們如何實現功能、如何處理問題等等,而官方給出的以上原則無疑是其中最具價值代表性的。
然后,講述了從概念到產品的流程,無疑此環節就是產品經理最重要的職責,在這個環節有很多的經驗都值得我們去總結學習,也在很大程度上決定著一個產品經理的優秀程度?;蚨嗷蛏?,我們都可以從官方的文檔說明中吸取一些營養:
- 定義應用:對應用主要功能和目標用戶的簡明具體的描述;
- 為任務量身訂制界面:根據清晰的目標和易用性來平衡用戶界面的設計
- 原型 & 迭代:最好先創建原型來進行用戶測試,收獲新鮮觀點
最后,通過一些官方應用案例,從實戰層面講述了一些設計過程,能方便我們從中了解到更多有價值的知識。
該部分章節具體的內容詳見:[ISUX譯]iOS 9人機界面指南(二):設計策略,同樣內容的思維導圖在文末一并下載。
“剩余章節占位”
騰訊團隊的翻譯目前進行到了第二章,隨著剩余章節內容的發布,本篇文章也會進行及時更新解讀,文末的思維導圖也會一并更新,感興趣的朋友歡迎收藏本文,跟蹤進展。
……
……
總結
如文章開頭所說,官方人機界面指南是非常重要的一份基礎資料,作為產品經理,我相信從中能學到很多知識,最終希望能夠達到「手中有術、心中有道」,如此才能設計出優秀的產品。
iOS9 人機界面界面思維導圖(xmind版)下載地址如下:思維導圖下載(百度云)
本文由 @劉鵬 原創發布于人人都是產品經理?,未經許可,禁止轉載。
- 目前還沒評論,等你發揮!