工作流程

交互設(shè)計(jì)師的工作，不僅僅是輸出設(shè)計(jì)方案，還需要參與前期的需求討論、后期開(kāi)發(fā)、測(cè)試驗(yàn)收等等產(chǎn)品設(shè)計(jì)與實(shí)現(xiàn)的多個(gè)環(huán)節(jié)。拿到一個(gè)新的項(xiàng)目需求后，從設(shè)計(jì)思考開(kāi)始，產(chǎn)品前期分析，設(shè)計(jì)產(chǎn)品，設(shè)計(jì)評(píng)審，用戶測(cè)試，直至產(chǎn)品上線。我們的工作流程如下：

項(xiàng)目展開(kāi)的過(guò)程中，必然會(huì)產(chǎn)生一些輸出物，以下是我們歸納出的輸出產(chǎn)物以及可以同步的平臺(tái)匯總。

需求分析階段

需求分析是軟件計(jì)劃階段的重要活動(dòng)，也是軟件生存周期中的一個(gè)重要環(huán)節(jié)，該階段是分析系統(tǒng)在功能上需要「實(shí)現(xiàn)什么」，而不是考慮如何去「實(shí)現(xiàn)」。需求分析的目標(biāo)是把用戶對(duì)待開(kāi)發(fā)軟件提出的「要求」或「需要」進(jìn)行分析與整理，確認(rèn)后形成描述完整、清晰與規(guī)范的文檔，確定軟件需要實(shí)現(xiàn)哪些功能，完成哪些工作。此外，軟件的一些非功能性需求（如軟件性能、可靠性、響應(yīng)時(shí)間、可擴(kuò)展性等），軟件設(shè)計(jì)的約束條件，運(yùn)行時(shí)與其他軟件的關(guān)系等也是軟件需求分析的目標(biāo)。

越是高階的交互設(shè)計(jì)師，越要有產(chǎn)品思維，越要從產(chǎn)品全局、產(chǎn)品源頭去考慮用戶的訴求。所以這個(gè)階段雖然是產(chǎn)品經(jīng)理、產(chǎn)品設(shè)計(jì)師更偏重的知識(shí)點(diǎn)，但作為交互設(shè)計(jì)師也應(yīng)該逐步積累這方面的技能。

1. 用戶研究報(bào)告文檔

文檔的價(jià)值與目的

為什么要進(jìn)行這次調(diào)研？可以是為了確認(rèn)產(chǎn)品功能是否好用，可以是了解用戶喜好，可以是為了推廣新產(chǎn)品。以這次調(diào)研為例，目的是通過(guò)用戶調(diào)研，理性了解用戶，根據(jù)他們的目的、行為和態(tài)度差異，將他們區(qū)分不同類型，然后從每種類型中抽取出典型特征，賦予人群畫(huà)像，最終挖掘出不同人群對(duì)產(chǎn)品的偏好和潛在需求，以及對(duì)品牌的認(rèn)知程度，從而指導(dǎo)市場(chǎng)推廣和產(chǎn)品設(shè)計(jì)。

文檔的目錄結(jié)構(gòu)

 

2. 用戶畫(huà)像

用戶畫(huà)像是在真實(shí)數(shù)據(jù)的基礎(chǔ)上嚴(yán)格定義出的高保真虛擬用戶，是真實(shí)用戶的虛擬代表。用戶畫(huà)像不是真實(shí)用戶，但是在設(shè)計(jì)過(guò)程中代表了真實(shí)用戶，用戶畫(huà)像不是虛構(gòu)的，是嚴(yán)格研究出來(lái)的。

此處需要區(qū)分人物角色和用戶畫(huà)像的概念，通常人物角色運(yùn)用于產(chǎn)品概念早期，人物角色的信息通常是由我們編造的。我們希望人物角色與我們所收集了解到的內(nèi)容保持一致，同時(shí)為了使人物角色更加栩栩如生，他們的一些具體細(xì)節(jié)可以是虛構(gòu)的。用戶畫(huà)像則是群體定量統(tǒng)計(jì)分析，對(duì)用戶進(jìn)行標(biāo)簽處理，海量數(shù)據(jù)挖掘所得。需要特別指出的是，也有一部分人將角色和畫(huà)像視為同一個(gè)概念，只是隨著產(chǎn)品階段不同處于不斷變化的過(guò)程之中，功能作用也隨之不同。

用戶畫(huà)像的目的

為保證產(chǎn)品是為有需求的人設(shè)計(jì)，同時(shí)為產(chǎn)品設(shè)計(jì)提供依據(jù)。有助于了解并定位目標(biāo)用戶，挖掘核心需求，豐富場(chǎng)景，進(jìn)行趨勢(shì)預(yù)測(cè)。

3. 產(chǎn)品功能列表

當(dāng)需求分析、篩選和評(píng)定優(yōu)先級(jí)之后得出結(jié)果，交互設(shè)計(jì)師需要把產(chǎn)品功能以列表的形式展現(xiàn)出來(lái)。這是需求分析之后，提出解決方案的第一步。

產(chǎn)品列表的價(jià)值

功能需求列表的價(jià)值，一是幫助產(chǎn)品經(jīng)理理清思路，二是幫助項(xiàng)目團(tuán)隊(duì)的其它成員了解產(chǎn)品功能需求，好讓他們提前做好相關(guān)準(zhǔn)備。

功能列表的內(nèi)容：

• 模塊：一般來(lái)說(shuō)，每個(gè)模塊下分 3~6 個(gè)子模塊是合理的，否則要考慮重新劃分。
• 子模塊：也就是一級(jí)模塊的二級(jí)分類，這里就已經(jīng)涉及到產(chǎn)品架構(gòu)的梳理了，但這里只是大致地梳理一下，后期在產(chǎn)品設(shè)計(jì)的下一個(gè)環(huán)節(jié)「搭框架」會(huì)進(jìn)一步調(diào)整。
• 功能：要給用戶提供什么功能，給這個(gè)功能起個(gè)名字。
• 功能描述：這個(gè)功能具體包含哪些操作，可以描述的具體一些，如支持用戶填寫(xiě)基本信息可自由創(chuàng)建課程，進(jìn)入課程空間就可對(duì)課程進(jìn)行編輯和管理，還可發(fā)布、刪除課程等。
• 用戶價(jià)值描述：也就是可以給用戶提供什么價(jià)值。
• 需求優(yōu)先級(jí)：這塊是整個(gè) Feature List 工作中核心的部分，判斷的準(zhǔn)確與否直接影響著將來(lái)產(chǎn)品的方向，我們只需要將我們之前評(píng)定的需求優(yōu)先級(jí)照抄過(guò)來(lái)就好。
• 開(kāi)發(fā)量：一般由研發(fā)部門(mén)的項(xiàng)目經(jīng)理或者開(kāi)發(fā)來(lái)確定。
• 投入產(chǎn)出比：簡(jiǎn)單來(lái)說(shuō)，就是商業(yè)價(jià)值除以開(kāi)發(fā)工作量（或開(kāi)發(fā)難度），當(dāng)然每個(gè)團(tuán)隊(duì)可以找出一個(gè)合適自己產(chǎn)品需求 ROI 的計(jì)算方法。
• 備注：覺(jué)得需要強(qiáng)調(diào)的，比較特殊的東西。

4. 場(chǎng)景故事板

故事板，起源于動(dòng)畫(huà)行業(yè)。在電影電視中，故事板的作用是來(lái)安排劇情中的重要鏡頭。他們相當(dāng)于一個(gè)可視化的劇本，故事板展示了各個(gè)鏡頭之間的關(guān)系，以及他們是如何串聯(lián)起來(lái)，給觀眾一個(gè)完整的體驗(yàn)。

現(xiàn)在，「故事板」在產(chǎn)品設(shè)計(jì)過(guò)程中也被廣泛的采用，雖然產(chǎn)品設(shè)計(jì)故事板和動(dòng)畫(huà)、影視制作故事板都是用一系列的圖片和語(yǔ)言組成的視覺(jué)表現(xiàn)形式，但是之間所表達(dá)的信息和目標(biāo)用戶卻是不一樣的。

故事板的價(jià)值

我們?cè)谧觥府a(chǎn)品設(shè)計(jì)故事板」的目的是讓產(chǎn)品設(shè)計(jì)師在特定產(chǎn)品使用情境下，全面理解用戶和產(chǎn)品之間的交互關(guān)系。

原型設(shè)計(jì)階段

搞清了產(chǎn)品定位后，就到了原型設(shè)計(jì)階段，這個(gè)階段交互設(shè)計(jì)師需要撰寫(xiě)交互文檔。交互文檔，即交互設(shè)計(jì)說(shuō)明文檔。英文「Design Requirement Document」，縮寫(xiě)「DRD」。 主要是用來(lái)承載設(shè)計(jì)思路、設(shè)計(jì)方案、信息架構(gòu)、原型線框、交互說(shuō)明等內(nèi)容。

DRD 非項(xiàng)目必需環(huán)節(jié)，一般情況下也不會(huì)為交互設(shè)計(jì)師專門(mén)留出相應(yīng)的時(shí)間預(yù)估。沒(méi)有這份文檔，項(xiàng)目也會(huì)繼續(xù)，但是可能項(xiàng)目會(huì)為此承擔(dān)不必要的溝通成本和時(shí)間成本。嚴(yán)重的話，項(xiàng)目的質(zhì)量也會(huì)受到影響。所以寫(xiě)與不寫(xiě)，交互設(shè)計(jì)師需要做把握。

以下是 DRD 的目錄結(jié)構(gòu)：

因?yàn)槭欠潜匾h(huán)節(jié)，這里就不詳細(xì)介紹了。

在一款產(chǎn)品的設(shè)計(jì)過(guò)程中，功能結(jié)構(gòu)圖是必須的，信息架構(gòu)圖視產(chǎn)品和 PM 自身而定，通常我們初步確定了產(chǎn)品功能結(jié)構(gòu)圖（產(chǎn)品功能框架）之后才開(kāi)始繪制產(chǎn)品結(jié)構(gòu)圖。在產(chǎn)品設(shè)計(jì)流程中，產(chǎn)品功能結(jié)構(gòu)圖是產(chǎn)品概念化階段的初期輸出，產(chǎn)品結(jié)構(gòu)圖是產(chǎn)品概念化的尾期階段輸出物，當(dāng)產(chǎn)品結(jié)構(gòu)圖完成后，我們對(duì)產(chǎn)品的基本模樣在心里就有了一個(gè)輪廓。同時(shí)以產(chǎn)品結(jié)構(gòu)圖作為繪制線框圖的依據(jù)，可以避免我們?cè)诋a(chǎn)品設(shè)計(jì)中邊畫(huà)邊改，跳進(jìn)死掐細(xì)節(jié)，不見(jiàn)森林的陷阱。

1. 流程圖的基本構(gòu)成和常用符號(hào)

流程圖由特定的圖形構(gòu)成，但具體樣子由圖本身的目的和閱讀者的閱讀習(xí)慣或約定來(lái)確定，所以使用的圖形并不是固定的，形式并不是最重要的，達(dá)到描述效果且讀者能讀懂即可。

2. 業(yè)務(wù)流程圖（泳道圖）

業(yè)務(wù)流程圖，不是操作流程圖也不是頁(yè)面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說(shuō)是產(chǎn)品的核心流程。

作用

通過(guò)業(yè)務(wù)流程圖，鉆研關(guān)鍵事件的流程，分析為什么要這么做，探索出更深層次的問(wèn)題，從而對(duì)現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化，進(jìn)而制定優(yōu)化方案，改進(jìn)現(xiàn)有流程；闡述在項(xiàng)目中各個(gè)角色是如何產(chǎn)生相關(guān)聯(lián)系的。

繪制規(guī)范/建議

• 讓涉眾參與，不要閉門(mén)造車：與業(yè)務(wù)流程圖包含的各個(gè)參與角色代表適時(shí)確認(rèn)事情的原本流程，杜絕自己想象。
• 恰當(dāng)?shù)膶哟畏纸?，不要將所有的環(huán)節(jié)都鋪到一張圖上。
• 逐漸深入，先抓枝干：切忌一開(kāi)始就陷入細(xì)節(jié)。
• 流程一定有開(kāi)始和結(jié)束：用清晰代表開(kāi)始和結(jié)束的符號(hào)來(lái)完成第一步和最后一步。
• 流程圖符號(hào)繪制排列順序：由上至下，由左至右。
• 同一流程圖符號(hào)大小宜相對(duì)一致。
• 編號(hào)：這是讓溝通效率提高的優(yōu)化措施。當(dāng)你有了編號(hào)系統(tǒng)，相當(dāng)于對(duì)你的流程圖都賦予了唯一識(shí)別身份證號(hào)。 負(fù)責(zé)流程規(guī)則審核和優(yōu)化的部分能夠清楚地在郵件里傳達(dá)：H5.1流程優(yōu)化，大家就更明確指的是什么。
• 路徑符號(hào)應(yīng)避免互相交叉。

3. 功能結(jié)構(gòu)圖

功能結(jié)構(gòu)圖就是按照功能的從屬關(guān)系畫(huà)成的圖表，在該圖表中的每一個(gè)框都稱為一個(gè)功能模塊。功能模塊可以根據(jù)具體情況分得大一點(diǎn)或小一點(diǎn)，分解得最小功能模塊可以是一個(gè)程序中的每個(gè)處理過(guò)程，而較大的功能模塊則可能是完成某一個(gè)任務(wù)的一組程序。用通俗的話來(lái)說(shuō)，功能結(jié)構(gòu)圖就是以功能模塊為類別，介紹模塊下其各功能組成的圖表。

作用

• 梳理需求，以鳥(niǎo)瞰的方式對(duì)整個(gè)產(chǎn)品頁(yè)面中的功能結(jié)構(gòu)形成一個(gè)直觀的認(rèn)識(shí)。
• 思考并明確產(chǎn)品的功能模塊及其功能組成。

4. 信息架構(gòu)圖

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層，是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會(huì)大改。

作用

• 幫助 PM 梳理復(fù)雜內(nèi)容的信息組成，避免信息內(nèi)容在展示過(guò)程中出現(xiàn)遺漏、混亂、重復(fù)；
• 作為開(kāi)發(fā)工程師建立數(shù)據(jù)庫(kù)的參考依據(jù)。

信息結(jié)構(gòu)圖構(gòu)成要素

• 導(dǎo)航：網(wǎng)頁(yè)訪問(wèn)者的訪問(wèn)途徑。
• 頻道：某一個(gè)同性質(zhì)的功能或內(nèi)容的共同載體，也可稱為功能或內(nèi)容的類別。
• 子頻道：某頻道下細(xì)分的另一類別。
• 頁(yè)面：?jiǎn)蝹€(gè)或附屬某個(gè)頻道或分類下的界面。
• 模塊：頁(yè)面中多個(gè)元素組成的一個(gè)區(qū)域內(nèi)容，可以有一個(gè)或多個(gè)，也可以循環(huán)出現(xiàn)，如文章列表。
• 模塊元素：模塊中的元素內(nèi)容，以文章列表舉例，文章標(biāo)題、文章摘要、文章發(fā)布時(shí)間，這些都是元素，都是組成模塊的內(nèi)容，同時(shí)他們也是可以循環(huán)出現(xiàn)的。元素的類型可以是文字、圖片、鏈接等等。

5. 任務(wù)流程圖

任務(wù)流程圖就是通過(guò)圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個(gè)功能時(shí)，會(huì)產(chǎn)生的一系列操作和反饋的圖標(biāo)。

作用

基于業(yè)務(wù)流程，進(jìn)行任務(wù)流程梳理，闡述角色和程序發(fā)生交互的流程，你如何進(jìn)行操作，系統(tǒng)如何進(jìn)行反饋。

任務(wù)流程與需求文檔中的業(yè)務(wù)流程并不一樣。雖然它們都是流程圖，但業(yè)務(wù)流程更偏向于業(yè)務(wù)限制、后臺(tái)邏輯等，并不過(guò)分注重用戶的操作邏輯。而任務(wù)流程則需要關(guān)注用戶如何操作、界面如何反饋等，從而引導(dǎo)用戶完成用戶目標(biāo)。

6. 產(chǎn)品結(jié)構(gòu)圖

產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表，簡(jiǎn)單說(shuō)產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡(jiǎn)化表達(dá)。

作用

它能夠在前期的需求評(píng)審中或其他類似場(chǎng)景中作為產(chǎn)品原型的替代，因?yàn)楫a(chǎn)品結(jié)構(gòu)圖相較于產(chǎn)品原型，其實(shí)現(xiàn)成本低，能夠快速對(duì)產(chǎn)品功能結(jié)構(gòu)進(jìn)行增、刪、改操作，減少 PM 在這個(gè)過(guò)程中的實(shí)現(xiàn)成本。

7. 線框圖

頁(yè)面線框圖，是通過(guò)圖形化的表達(dá)形式，闡述產(chǎn)品在頁(yè)面層面的信息。

構(gòu)成要素

• 頁(yè)面標(biāo)題：即每一個(gè)頁(yè)面的對(duì)應(yīng)標(biāo)題，一般就是導(dǎo)航欄標(biāo)題。
• 頁(yè)面內(nèi)容：以黑白為主，保證信息規(guī)整易讀。
• 交互說(shuō)明：用標(biāo)簽將其對(duì)應(yīng)起來(lái)，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等。
• 主流程線：只需要畫(huà)出主流程線即可，千萬(wàn)不能太多太雜，時(shí)刻考慮讀者的感受。

8. 交互說(shuō)明的幾種類型

限制

限制，包含范圍值、極限值等。

范圍值主要指數(shù)據(jù)的取值范圍。比如，當(dāng)你的界面上出現(xiàn)了下拉菜單、篩選按鈕、滑塊等控件時(shí)，你必須標(biāo)注清楚它們的選擇范圍，否則開(kāi)發(fā)人員就不清楚該如何設(shè)定，如圖所示。

極限值主要指數(shù)據(jù)的顯示限制。比如，最多應(yīng)該顯示多少字?jǐn)?shù)，過(guò)時(shí)如何顯示，是否折行等，如圖所示。

狀態(tài)

包含默認(rèn)狀態(tài)、常見(jiàn)狀態(tài)、特殊狀態(tài)等。

默認(rèn)狀態(tài)主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項(xiàng)等。這些內(nèi)容需要注明，否則開(kāi)發(fā)人員可能難以意識(shí)到這是用戶填完的效果，還是默認(rèn)就有的。

常見(jiàn)狀態(tài)主要指針對(duì)某-一個(gè)模塊，經(jīng)常遇到的一些狀態(tài)。這些狀態(tài)都需要在原型上表述出來(lái)。比如一個(gè)普通的積分模塊，一般會(huì)出現(xiàn)3種狀態(tài):未登錄狀態(tài)、登錄后未簽到狀態(tài)、登錄后已簽到狀態(tài)，如圖所示。

特殊狀態(tài)一般指非正常情況 下的樣式、文案、說(shuō)明等，如圖所示。

操作

包含常見(jiàn)操作、特殊操作、誤操作、手勢(shì)操作等。

常見(jiàn)操作主要指正常操作時(shí)得到的反饋狀態(tài)。比如一個(gè)普通的翻頁(yè)控件，在經(jīng)過(guò)不同操作后會(huì)立即出現(xiàn)如下的狀態(tài)。

特殊操作主要指一些極端情況下的操作。一般，用戶不會(huì)這么操作，但是-旦遇到極端情況，還是要想好應(yīng)對(duì)措施，因?yàn)閷?duì)于開(kāi)發(fā)人員來(lái)說(shuō)，不管是正常的還是極端的操作情況，他們都要去編寫(xiě)對(duì)應(yīng)的代碼。如下圖，是填寫(xiě)用戶信息的例子，當(dāng)不寫(xiě)交互說(shuō)明時(shí)，開(kāi)放往往會(huì)遇到很多問(wèn)題：如果已經(jīng)勾選了2個(gè)人，再勾選第3個(gè)人，怎么辦?如果勾選了「張XX」,下面區(qū)塊中會(huì)相應(yīng)地出現(xiàn)張XX的信息，那么這時(shí)候允許修改張XX的身份證信息嗎?假如允許的話，修改后「張XX」還保持勾選狀態(tài)嗎?表單提交后要新增一-個(gè)被保險(xiǎn)人信息嗎?若修改的是除身份證號(hào)碼以外的信息，「張XX」 還保持勾選狀態(tài)嗎?提交表單時(shí)是覆蓋原存儲(chǔ)信息嗎?若修改后出生日期、性別與身份證號(hào)碼不吻合怎么辦?......

面對(duì)各種復(fù)雜的情況，一方面，要和開(kāi)發(fā)人員積極探討，看看有沒(méi)有其他的解決方法可以簡(jiǎn)化各種邏輯判斷;另一方面，在得出結(jié)論后，要把交互說(shuō)明寫(xiě)清楚，避免出現(xiàn)讓開(kāi)發(fā)人員感到棘手的情況。

誤操作主要指當(dāng)用戶操作錯(cuò)誤時(shí)的情況。不過(guò)我們?cè)谠O(shè)計(jì)時(shí)要盡量避免用戶犯錯(cuò)的機(jī)會(huì)。如圖所示，提示中已告訴用戶「庫(kù)存5件」，如果這個(gè)時(shí)候用戶在「數(shù)量」一欄中輸入「6」會(huì)怎么樣呢?系統(tǒng)會(huì)自動(dòng)幫用戶將其改為「5」省去用戶手動(dòng)修正。

手勢(shì)操作主要指用戶使用移動(dòng)產(chǎn)品時(shí)的操作方式。常見(jiàn)的有點(diǎn)擊雙擊、長(zhǎng)按、捏、伸、滑動(dòng)，等等。

反饋

用戶操作后得到的反饋動(dòng)作，包含提示、跳轉(zhuǎn)、動(dòng)畫(huà)等。

提示主要指操作后，系統(tǒng)反饋給用戶的文字說(shuō)明等，如圖所示。

跳轉(zhuǎn)主要指點(diǎn)擊某個(gè)鏈接后，頁(yè)面跳轉(zhuǎn)到哪里。設(shè)計(jì)師需要在原型;上注明跳轉(zhuǎn)時(shí)是「原頁(yè)面刷新」還是「新頁(yè)面打開(kāi)」。如果是做手機(jī)應(yīng)用的話，需要注明跳轉(zhuǎn)時(shí)的轉(zhuǎn)場(chǎng)方式，如圖所示。

動(dòng)畫(huà)主要指用戶操作后，系統(tǒng)通過(guò)動(dòng)畫(huà)的方式反饋給用戶。動(dòng)畫(huà)給人的感覺(jué)比較友好、趣味性較強(qiáng)，是非常常見(jiàn)的一種反饋形式。比如刪除某條信息，該信息以漸變消失的形式告訴用戶:這條信息已經(jīng)被刪除了。

在移動(dòng)應(yīng)用中，動(dòng)畫(huà)反饋的形式更為常見(jiàn)。因此設(shè)計(jì)師一定要在原型上表述清楚動(dòng)畫(huà)的形式，必要時(shí)可以制作-段動(dòng)畫(huà)演示效果給開(kāi)發(fā)人員。

更多交互說(shuō)明的內(nèi)容可參閱《破繭成蝶-用戶體驗(yàn)設(shè)計(jì)師》

視覺(jué)設(shè)計(jì)階段

在視覺(jué)設(shè)計(jì)階段，交互設(shè)計(jì)師需要向視覺(jué)設(shè)計(jì)師介紹交互原型；對(duì)輸出的視覺(jué)設(shè)計(jì)方案，需要從交互角度予以評(píng)估，比如與交互設(shè)計(jì)初衷是否一致、內(nèi)容的主次是否表達(dá)得當(dāng)、是否有細(xì)節(jié)遺漏或錯(cuò)亂等等。另外，這時(shí)DRD中的全局通用說(shuō)明也將起到了很大的作用。視覺(jué)設(shè)計(jì)師可以通過(guò)全局通用說(shuō)明，了解到整個(gè)產(chǎn)品界面中需要用到的控件、可復(fù)用界面、時(shí)間規(guī)范、卻省頁(yè)匯總，以便視覺(jué)設(shè)計(jì)師整理梳理視覺(jué)規(guī)范，防止出高保真時(shí)遺漏界面。

1. 全局通用說(shuō)明

全局通用說(shuō)明，指整個(gè)產(chǎn)品可通用或者復(fù)用的元素。一般是邊做文檔邊整理出來(lái)的，方便自己或者接手該項(xiàng)目的設(shè)計(jì)師直接調(diào)用。其次，對(duì)開(kāi)發(fā)及時(shí)封裝可復(fù)用控件也是有參考價(jià)值的。

常用控件

常用控件類似UIKit，通常將極具復(fù)用價(jià)值的控制整理在一起，方便及時(shí)調(diào)用。

復(fù)用界面

顧名思義就是全局可復(fù)用的一些內(nèi)頁(yè)，比如選擇聯(lián)系人、獨(dú)立搜索頁(yè)等。

時(shí)間規(guī)范

在做產(chǎn)品的第一步，就應(yīng)該約定一個(gè)時(shí)間規(guī)范。不然各個(gè)端開(kāi)發(fā)出來(lái)，你會(huì)發(fā)現(xiàn)iOS是斜杠的，Android是橫杠的，WEB是圓點(diǎn)的。

缺省頁(yè)匯總

缺省頁(yè)一般包括加載失敗、加載中、網(wǎng)絡(luò)中斷和無(wú)數(shù)據(jù)的空頁(yè)面。為空頁(yè)可以按照模塊整理在一起，方便UI設(shè)計(jì)師最后一起設(shè)計(jì)缺省頁(yè)，保持風(fēng)格統(tǒng)一。

2. 功能動(dòng)效

用戶往往比我們預(yù)想中更能注意到頁(yè)面中的細(xì)節(jié)，動(dòng)效除了要幫助用戶快速找到他想要的東西，達(dá)到他想完成的任務(wù)，也是一種可以給用戶傳遞情感的交互元素。沒(méi)有用戶會(huì)拒絕任何產(chǎn)品的錦上添花，而功能性動(dòng)效對(duì)于產(chǎn)品來(lái)講，在滿足功能效率的同時(shí)，能夠帶來(lái)更多額外的附加體驗(yàn)，是一種相對(duì)比較容易引發(fā)體驗(yàn)峰值的途徑。好的交互設(shè)計(jì)師應(yīng)當(dāng)對(duì)這些功能動(dòng)效有比較深刻的理解，在視覺(jué)設(shè)計(jì)階段可配合視覺(jué)設(shè)計(jì)師給產(chǎn)品加上合理的功能動(dòng)效。

定義：

功能性動(dòng)效是一種嵌入 UI 設(shè)計(jì)中微妙的動(dòng)畫(huà)，有著明確、合理的目標(biāo)

功能性動(dòng)效的主要類型：

• 頁(yè)面空間轉(zhuǎn)換；
• 視覺(jué)信息反饋；
• 功能操作引導(dǎo)；
• 品牌與趣味；

頁(yè)面空間轉(zhuǎn)換類動(dòng)效

頁(yè)面空間轉(zhuǎn)換告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的，防止頁(yè)面轉(zhuǎn)換視盲，在空間上也能營(yíng)造更好的印象。

案例：輪播 Banner 中的空間轉(zhuǎn)換動(dòng)效

視覺(jué)信息反饋動(dòng)效類型

具備良好用戶體驗(yàn)的產(chǎn)品，都應(yīng)該給用戶的每一個(gè)操作提供反饋，無(wú)論成功與否，反饋會(huì)使用戶覺(jué)得自己與屏幕上的元素進(jìn)行真實(shí)互動(dòng)。即便隔著屏幕，也能讓用戶看起來(lái)是在直接操作，增加操作的可控性真實(shí)自然的體感。

案例：操作結(jié)果反饋

功能操作引導(dǎo)

當(dāng)用戶第一次使用你的 app 的時(shí)候，如果沒(méi)有幫助的話，他們可能會(huì)不知道如何操作。 我們應(yīng)該給用戶提供一些視覺(jué)提示來(lái)告訴他們哪些操作是可行的。

案例：功能操作中的引導(dǎo)

品牌與趣味

為了避免與市場(chǎng)上很多?app 同質(zhì)化，千篇一律的用戶體驗(yàn)，品牌動(dòng)畫(huà)可以成為一個(gè)產(chǎn)品的營(yíng)銷工具，用來(lái)表現(xiàn)一家公司的品牌價(jià)值或者突出產(chǎn)品的優(yōu)勢(shì)，同時(shí)給用戶一種愉快又難忘的用戶體驗(yàn)。

案例：功能操作中的引導(dǎo)

關(guān)于功能動(dòng)效的更多介紹可查看以下文章：《最常見(jiàn)的四種移動(dòng)端功能性動(dòng)效全面總結(jié)》

開(kāi)發(fā)與測(cè)試階段

1. 驗(yàn)收的常規(guī)流程

• 測(cè)試完成功能驗(yàn)收，將代碼打包提交給設(shè)計(jì)師驗(yàn)收
• 匯總驗(yàn)收問(wèn)題
• 將問(wèn)題提交開(kāi)發(fā)解決，跟進(jìn)解決的進(jìn)度和結(jié)果

2. 驗(yàn)收的內(nèi)容

• 交互流程
• 交互邏輯
• 頁(yè)面元素的交互細(xì)節(jié)
• 交互動(dòng)效
• 操作的易用性與使用體驗(yàn)
• 驗(yàn)收到非本次需求的其他問(wèn)題
• 移動(dòng)端項(xiàng)目分別驗(yàn)收iOS與Android端

搜集用戶反饋階段

對(duì)于迭代中的產(chǎn)品來(lái)說(shuō)，這一點(diǎn)需要持續(xù)關(guān)注。通常采用的方式是用戶調(diào)研、可用性測(cè)試、各種用戶反饋渠道搜集。交互設(shè)計(jì)師需要分析用戶反饋問(wèn)題的合理性、是否需要優(yōu)化。對(duì)于值得重視的反饋，需要思考設(shè)計(jì)方案、推進(jìn)實(shí)現(xiàn)。

1. 收集用戶反饋

想要收集用戶反饋并不復(fù)雜。對(duì)于線上的產(chǎn)品，可以在界面上放置一個(gè)「用戶反饋」入口，讓用戶在遇到問(wèn)題時(shí)，直接填寫(xiě)反饋信息。對(duì)于新產(chǎn)品以及重大的改版，可以通過(guò)電子郵件、首頁(yè)鏈接等方式主動(dòng)發(fā)放調(diào)查問(wèn)卷，收集用戶意見(jiàn)。如果你的產(chǎn)品有在線客服或是產(chǎn)品論壇等功能，也可以讓客服把每天咨詢最多的問(wèn)題收集匯總給你，或是直接「潛伏」到論壇中看看用戶的吐槽，獲取第一手反饋資料。

對(duì)于移動(dòng)應(yīng)用來(lái)說(shuō)，還有一個(gè)最方便簡(jiǎn)單的辦法來(lái)收集用戶反饋，那就是應(yīng)用市場(chǎng)。無(wú)論是蘋(píng)果的App Store, 還是安卓的Google Play， 又或者是豌豆莢、應(yīng)用助手等第三方應(yīng)用市場(chǎng)，都可以找到大量的評(píng)分、評(píng)論信息。我們可以好好利用這些免費(fèi)的平臺(tái)來(lái)收集移動(dòng)端的用戶反饋。

2. 可用性測(cè)試

可用性測(cè)試（usability testing）是一項(xiàng)通過(guò)用戶的使用來(lái)評(píng)估產(chǎn)品的技術(shù)，因?yàn)樗磻?yīng)了用戶的真實(shí)使用體驗(yàn)，所以可以視為一種不可或缺的可用性檢驗(yàn)過(guò)程。也就是說(shuō)，可用性測(cè)試是讓用戶使用產(chǎn)品的設(shè)計(jì)原型或成品。通過(guò)觀察，來(lái)直觀的記錄用戶的感受和體驗(yàn)，從而改善及提升產(chǎn)品可用性的方法。

可用性測(cè)試適用于產(chǎn)品發(fā)展的各個(gè)階段，包括前期設(shè)計(jì)開(kāi)發(fā)階段到后期優(yōu)化改進(jìn)階段。做可用性測(cè)試價(jià)值在于能夠在不同的階段更加高效的發(fā)現(xiàn)問(wèn)題，從而提高問(wèn)題解決效率。

3. A/B測(cè)試

AB測(cè)試的概念來(lái)源于生物醫(yī)學(xué)的雙盲測(cè)試，雙盲測(cè)試中病人被隨機(jī)分成兩組，在不知情的情況下分別給予安慰劑和測(cè)試用藥，經(jīng)過(guò)一段時(shí)間的實(shí)驗(yàn)后再來(lái)比較這兩組病人的表現(xiàn)是否具有顯著的差異，從而決定測(cè)試用藥是否有效。

互聯(lián)網(wǎng)公司的AB測(cè)試也采用了類似的概念：將Web或App界面或流程的兩個(gè)或多個(gè)版本，在同一時(shí)間維度，分別讓兩個(gè)或多個(gè)屬性或組成成分相同（相似）的訪客群組訪問(wèn)，收集各群組的用戶體驗(yàn)數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，最后分析評(píng)估出最好版本正式采用。

從對(duì)AB測(cè)試的定義中可以看出AB測(cè)試強(qiáng)調(diào)的是同一時(shí)間維度對(duì)相似屬性分組用戶的測(cè)試，時(shí)間的統(tǒng)一性有效的規(guī)避了因?yàn)闀r(shí)間、季節(jié)等因素帶來(lái)的影響，而屬性的相似性則使得地域、性別、年齡等等其他因素對(duì)效果統(tǒng)計(jì)的影響降至最低。

4. 一些注意點(diǎn)

注意android與ios平臺(tái)交互差異

尊重不同平臺(tái)的用戶習(xí)慣，是交互設(shè)計(jì)師在工作中應(yīng)該注意的環(huán)節(jié)。在產(chǎn)品設(shè)計(jì)中，遇到兩大平臺(tái)不同的交互時(shí)，交互設(shè)計(jì)應(yīng)當(dāng)：提升用戶體驗(yàn)形成模式做成控件庫(kù)，保持-致性差異不大的地方統(tǒng)一，減小研發(fā)和設(shè)計(jì)的成本。

android與ios十大產(chǎn)品/交互差異：

• 虛擬商品 支付規(guī)則和方式的不同
• 狀態(tài)欄交互的不同
• 下載方式和狀態(tài)的不同
• 軟件更新方式的不同
• 文字發(fā)送指令 位置的不同
• 退出浮層列表的不同
• 刪除方式的不同
• 導(dǎo)航欄tab交互的不同
• 消息推送機(jī)制的不同
• 復(fù)制文字后，剪切板狀態(tài)的不同

相關(guān)資料

PRD文檔模版下載：https://pan.baidu.com/s/1XGxc_JF0J2HuqwP20n0ktA? 提取碼：71cx

備用下載鏈接：https://share.weiyun.com/58lNX7w

歡迎關(guān)注作者的微信公眾號(hào)：「觸動(dòng)人心的設(shè)計(jì)」