前言

作為移動端的產(chǎn)品經(jīng)理，官方的APP設(shè)計文檔可以說是比較重要的一份資料，尤其是那些剛?cè)胄械漠a(chǎn)品新人，通讀一遍文檔會從概要層面上了解到很多內(nèi)容，當(dāng)然對于視覺設(shè)計師、交互設(shè)計師而言，也是非常重要的官方指南。

官方文檔中對控件界面交互等都作出了規(guī)范說明，這對產(chǎn)品設(shè)計是非常重要的，不僅能確保設(shè)計出符合平臺規(guī)范的應(yīng)用，而且能幫助我們擴(kuò)展設(shè)計思路，做到手中有術(shù)、心中有道才能設(shè)計出優(yōu)秀的產(chǎn)品。

IOS9 人機(jī)界面指南

今年，伴隨著iPhone 6S代的上市，也迎來了嶄新的IOS9（也許相比前代有限的變動，并不能稱之為“嶄新”），IOS 人機(jī)界面指南也進(jìn)行了更新，文檔共分為五大部分，分別是：

1. UI設(shè)計基礎(chǔ)（UI Design Basics）
2. 設(shè)計策略（Design Strategies）
3. IOS 技術(shù)（IOS Technologies）
4. UI 元素（UI Elements）
5. 圖標(biāo)圖像設(shè)計（Icon and Image Design）

官方文檔是純英文的，對于我這樣英語水平有限的同學(xué)來說，全部啃下來還是相當(dāng)吃力的，不過感謝騰訊團(tuán)隊的辛勤付出，逐步將其翻譯成中文，目前已完成前兩個部分，后續(xù)部分也會陸續(xù)放出，同學(xué)們且耐心等待。以下會嘗試從產(chǎn)品經(jīng)理的角度對每個部分進(jìn)行相關(guān)的解讀，水平有限，不喜隨意噴。

1. UI 設(shè)計基礎(chǔ)

第一部分主要對界面UI設(shè)計進(jìn)行了規(guī)范定義，我個人認(rèn)為此部分主要作為「指導(dǎo)原則」來使用。不僅在產(chǎn)品設(shè)計之初，讓我們就在頭腦中對設(shè)計形式有所規(guī)范，同時在遇到設(shè)計方案取舍、改進(jìn)等情況時能給予我們一個評判衡量的標(biāo)準(zhǔn)。我想，遵循這部分內(nèi)容要求所設(shè)計出的應(yīng)用，至少在UI設(shè)計層面達(dá)到了合格的水準(zhǔn)。

首先，文檔給出了iOS的三大設(shè)計原則：

• 遵從(Deference)：UI應(yīng)該有助于用戶更好地理解內(nèi)容并與之交互，并且不會分散用戶對內(nèi)容本身的注意力。
• 清晰(Clarity)：各種尺寸的文字清晰易讀；圖標(biāo)應(yīng)該精確醒目，去除多余的修飾，突出重點，以功能驅(qū)動設(shè)計。
• 深度(Depth)：視覺的層次感和生動的交互動畫會賦予UI新的活力，有助于用戶更好地理解并讓用戶在使用過程中感到愉悅。

這三個原則可以作為一個指導(dǎo)思想貫穿到整個產(chǎn)品設(shè)計過程中，保證設(shè)計的產(chǎn)品能夠做到：以內(nèi)容為核心、內(nèi)容和功能清晰可見、便于用戶理解并感到愉悅。

接下來，對UIKit提供的UI組件做了大致的分類：欄(Bars)、內(nèi)容視圖(Content Views)、控件(Controls)、臨時視圖(Temporary Views)。這些組件是搭建產(chǎn)品結(jié)構(gòu)、承載內(nèi)容、實現(xiàn)功能的重要組成部分，在第四部分會詳細(xì)加以說明（暫未翻譯，敬請期待）。

然后，結(jié)合IOS系統(tǒng)后臺特性，講解了應(yīng)用啟動/停止時需注意的地方，這里和Android系統(tǒng)有很大的區(qū)別，如果對兩個平臺的區(qū)別不是很清楚的同學(xué)，需要在這里多花點心里了解一下。

另外，文檔對應(yīng)用交互性與反饋、動畫、圖標(biāo)圖形、顏色字體等內(nèi)容都做了基礎(chǔ)的說明。需要說明一點，這里主要是從指導(dǎo)思想層面進(jìn)行了概述，沒有涉及到細(xì)節(jié)實現(xiàn)的方法。

該部分章節(jié)具體的內(nèi)容詳見：[ISUX譯]iOS 9人機(jī)界面指南(一)：UI設(shè)計基礎(chǔ)，同時對這部分的結(jié)構(gòu)內(nèi)容，我整理一份思維導(dǎo)圖，在文末可以下載。

2.設(shè)計策略

第二部分主要詳解了一些設(shè)計原則以及產(chǎn)品成型的大體過程，重點在「產(chǎn)品設(shè)計」。從需求的調(diào)研階段，通過產(chǎn)品設(shè)計規(guī)范，最終得到應(yīng)用的界面并能順利完成相應(yīng)的任務(wù)。這是整個產(chǎn)品研發(fā)過程前期至關(guān)重要的一環(huán)，在很大程度上決定著一款產(chǎn)品的成敗。

首先，文檔給出了六個設(shè)計原則：

• 美學(xué)完整性：應(yīng)用的視覺表現(xiàn)和交互行為與功能結(jié)合后所傳達(dá)出的整體一致性；
• 一致性：專注于讓人們覺得舒適的標(biāo)準(zhǔn)和范例，并提供應(yīng)用內(nèi)部統(tǒng)一的體驗；
• 直接操作：直接在屏幕上操作對象時，能更集中精力完成任務(wù)；
• 反饋：可以明示人們的行為，呈現(xiàn)操作結(jié)果，并更新于任務(wù)進(jìn)程之中；
• 隱喻：應(yīng)用中的虛擬對象和交互行為盡量與用戶已經(jīng)熟悉的體驗相似；
• 用戶控制：是人—而不是應(yīng)用—發(fā)起和控制行為

在把需求轉(zhuǎn)化為界面交互的設(shè)計過程中，總是會有一些共通的原則可以指導(dǎo)我們?nèi)绾螌崿F(xiàn)功能、如何處理問題等等，而官方給出的以上原則無疑是其中最具價值代表性的。

然后，講述了從概念到產(chǎn)品的流程，無疑此環(huán)節(jié)就是產(chǎn)品經(jīng)理最重要的職責(zé)，在這個環(huán)節(jié)有很多的經(jīng)驗都值得我們?nèi)タ偨Y(jié)學(xué)習(xí)，也在很大程度上決定著一個產(chǎn)品經(jīng)理的優(yōu)秀程度?；蚨嗷蛏?，我們都可以從官方的文檔說明中吸取一些營養(yǎng)：

1. 定義應(yīng)用：對應(yīng)用主要功能和目標(biāo)用戶的簡明具體的描述；
2. 為任務(wù)量身訂制界面：根據(jù)清晰的目標(biāo)和易用性來平衡用戶界面的設(shè)計
3. 原型 & 迭代：最好先創(chuàng)建原型來進(jìn)行用戶測試，收獲新鮮觀點

最后，通過一些官方應(yīng)用案例，從實戰(zhàn)層面講述了一些設(shè)計過程，能方便我們從中了解到更多有價值的知識。

該部分章節(jié)具體的內(nèi)容詳見：[ISUX譯]iOS 9人機(jī)界面指南(二)：設(shè)計策略，同樣內(nèi)容的思維導(dǎo)圖在文末一并下載。

“剩余章節(jié)占位”

騰訊團(tuán)隊的翻譯目前進(jìn)行到了第二章，隨著剩余章節(jié)內(nèi)容的發(fā)布，本篇文章也會進(jìn)行及時更新解讀，文末的思維導(dǎo)圖也會一并更新，感興趣的朋友歡迎收藏本文，跟蹤進(jìn)展。

……

……

總結(jié)

如文章開頭所說，官方人機(jī)界面指南是非常重要的一份基礎(chǔ)資料，作為產(chǎn)品經(jīng)理，我相信從中能學(xué)到很多知識，最終希望能夠達(dá)到「手中有術(shù)、心中有道」，如此才能設(shè)計出優(yōu)秀的產(chǎn)品。

iOS9 人機(jī)界面界面思維導(dǎo)圖（xmind版）下載地址如下：思維導(dǎo)圖下載（百度云）

本文由 @劉鵬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。