很多大廠的優(yōu)秀的設(shè)計(jì)師都有寫(xiě)過(guò)此類(lèi)文章，但是光看大神的寶貴經(jīng)驗(yàn)無(wú)法轉(zhuǎn)化成自己的實(shí)際行為。所以我通過(guò)總結(jié)大神經(jīng)驗(yàn)和結(jié)合自己實(shí)際形成自己的設(shè)計(jì)方法體系, 為自己所用。

 

一、交互文檔的作用

我們先來(lái)看一下產(chǎn)品研發(fā)團(tuán)隊(duì)其他崗位的輸出物，產(chǎn)品經(jīng)理：需求文檔，視覺(jué)設(shè)計(jì)師：視覺(jué)稿，開(kāi)發(fā)：Emmm代碼？那么，交互設(shè)計(jì)師的輸出物是——原型圖？NO! NO! NO! 是交互設(shè)計(jì)文檔，原型圖只不過(guò)是文檔的其中一部分。

優(yōu)秀的交互設(shè)計(jì)文檔可以為產(chǎn)品開(kāi)發(fā)流程帶來(lái)什么好處？

1.交互設(shè)計(jì)文檔是交互設(shè)計(jì)師連接上下游的重要工具，團(tuán)隊(duì)其他相關(guān)者可以通過(guò)文檔對(duì)設(shè)計(jì)方案有個(gè)簡(jiǎn)單的認(rèn)識(shí)，有助于工作開(kāi)展；

2.交互設(shè)計(jì)文檔可以使得項(xiàng)目有序的開(kāi)展，并且作為后續(xù)產(chǎn)品測(cè)試的依據(jù)；

3.統(tǒng)一的文檔有利于交互設(shè)計(jì)師工作的開(kāi)展，專(zhuān)業(yè)的交互設(shè)計(jì)文檔是交互設(shè)計(jì)師的加分項(xiàng)。

 

二、交互文檔的結(jié)構(gòu)

團(tuán)隊(duì)成員可以通過(guò)交互文檔的結(jié)構(gòu)對(duì)產(chǎn)品有一個(gè)整體的認(rèn)識(shí)，一個(gè)清晰明確的結(jié)構(gòu)可以提高整個(gè)文檔的可讀性。交互文檔的結(jié)構(gòu)主要由封面、更新日志、設(shè)計(jì)過(guò)程、交互稿、控件庫(kù)和草稿箱六大方面組成。

1.封面

內(nèi)容：產(chǎn)品簡(jiǎn)介、版本信息和人員分工等項(xiàng)目簡(jiǎn)介。

2.更新日志

內(nèi)容：產(chǎn)品新增或修改的更新記錄

組織：日期+【修改/新增】+頁(yè)面名稱(chēng)（新增的頁(yè)面名稱(chēng)）+修改/新增點(diǎn)+修改人+備注

Tips: 可以設(shè)置鏈接方便成員直接跳轉(zhuǎn)查看；更新迭代的信息可以在修改/新增的頁(yè)面的交互說(shuō)明中進(jìn)行標(biāo)識(shí)，以示區(qū)別。

3.設(shè)計(jì)過(guò)程

內(nèi)容：需求分析、用戶研究、競(jìng)品情況、業(yè)務(wù)/交互流程圖和信息架構(gòu)等等。

Tips：可根據(jù)情況篩選上述內(nèi)容放上，方便交互設(shè)計(jì)師用于理解產(chǎn)品。

4.交互稿

內(nèi)容：界面、流程+交互說(shuō)明

Tips：這是整個(gè)交互設(shè)計(jì)文檔的重中之重，后面單獨(dú)詳解。

5.控件庫(kù)

內(nèi)容：放上常用的控件，可提高設(shè)計(jì)師在設(shè)計(jì)時(shí)的效率。

6.草稿箱

內(nèi)容：用以存儲(chǔ)草稿或廢稿

Tips：在設(shè)計(jì)過(guò)程中的草稿和廢稿千萬(wàn)不要手殘的刪掉，說(shuō)不定以后就是寶貴資源呢！

 

三、交互文檔的內(nèi)容（交互稿）

交互文檔的內(nèi)容主要有頁(yè)面、流程+交互說(shuō)明三大方面組成，交互說(shuō)明中又包括頁(yè)面元素說(shuō)明、交互邏輯說(shuō)明、異常情況說(shuō)明等等。

1.頁(yè)面

頁(yè)面是對(duì)界面信息的設(shè)計(jì)，展示產(chǎn)品功能和元素布局，在設(shè)計(jì)程中注意頁(yè)面的布局規(guī)范、層級(jí)關(guān)系和跳轉(zhuǎn)關(guān)系。

2.流程

流程展示任務(wù)的邏輯關(guān)系，流程是如何跑通的都要通過(guò)設(shè)計(jì)清晰的表達(dá)出來(lái)。

流程設(shè)計(jì)的原則：一個(gè)頁(yè)面一個(gè)任務(wù)；每個(gè)任務(wù)有始有終，即每個(gè)任務(wù)都有起點(diǎn)和終點(diǎn)；頁(yè)面的不同狀態(tài)最好在同一個(gè)頁(yè)面展示，不要忽視極端情況。

3.交互說(shuō)明

3.1頁(yè)面元素說(shuō)明，主要是元素內(nèi)容和對(duì)內(nèi)容的規(guī)則定義。

元素內(nèi)容，如：控件、字段、按鈕等。

對(duì)內(nèi)容的規(guī)則定義，如：字段的顯示規(guī)則、截?cái)嘁?guī)則（超過(guò)10個(gè)字以外用…表示）、輸入限制（最多輸入500字）、格式要求等；如：按鈕的默認(rèn)狀態(tài)、特殊狀態(tài)、視覺(jué)樣式等。

3.2交互邏輯說(shuō)明，主要是觸發(fā)、操作反饋、特殊情況說(shuō)明等等。交互邏輯說(shuō)明遵從先整體后局部的原則，如先頁(yè)面后頁(yè)面元素。

○頁(yè)面交互邏輯說(shuō)明，如：從哪里可以進(jìn)入這頁(yè)面；操作成功/不成功/取消后分別進(jìn)入哪些頁(yè)面；怎么進(jìn)入/離開(kāi)這個(gè)頁(yè)面（轉(zhuǎn)場(chǎng)方式）。

○觸發(fā)（觸發(fā)也可以看成是上一步操作的反饋，但是我喜歡把它單拎出來(lái)）,如:點(diǎn)擊刪除控件，彈出對(duì)話框?yàn)槔?/p>

對(duì)話框是在哪里被觸發(fā)的？什么時(shí)候觸發(fā)的？怎么觸發(fā)的？它是怎么出現(xiàn)的？要怎么消失？

○操作，常見(jiàn)的手勢(shì)操作，如：雙擊、長(zhǎng)按、滑動(dòng)、單擊、夾捏等等。

○反饋，如：跳轉(zhuǎn)頁(yè)面，下一級(jí)頁(yè)面從右往左滑入；狀態(tài)改變，按鈕從未激活狀態(tài)到激活狀態(tài)。

○特殊情況，如：頁(yè)面空狀態(tài)；加載狀態(tài)；加載成功進(jìn)入哪個(gè)頁(yè)面；服務(wù)器錯(cuò)誤；網(wǎng)絡(luò)異常等等。

○其他還有動(dòng)效說(shuō)明、音效說(shuō)明、視覺(jué)風(fēng)格注明等交互說(shuō)明。

 

以搜索為例，啟發(fā)撰寫(xiě)交互說(shuō)明思路。

四、交互文檔的設(shè)計(jì)規(guī)范

1.字體

字體：微軟雅黑，系統(tǒng)自帶的字體，在團(tuán)隊(duì)協(xié)作過(guò)程中不丟失

大小：16pt，方便開(kāi)發(fā)閱讀

顏色：主要文字顏色#333333；次要文字顏色#666666；說(shuō)明文字顏色#999999；警示文字顏色#ff0000

2.顏色

盡量使用黑白灰；通過(guò)深淺不同的灰色來(lái)表示層次和重點(diǎn)，彩色（如紅色）用戶警告、錯(cuò)誤提示。

3.命名

每一頁(yè)面/界面都要有標(biāo)題；迭代更新在頁(yè)面標(biāo)識(shí)。

4.布局

對(duì)齊：元素與元素、界面與界面、界面與說(shuō)明之間保持左對(duì)齊

留白：畫(huà)面留白，不過(guò)擠或過(guò)空，不能因?yàn)槭墙换ジ宥雎悦烙^性

5.格式

交互設(shè)計(jì)文檔可選擇的格式有PPT/PDF和HTML。

個(gè)人偏好HTML，團(tuán)隊(duì)協(xié)作時(shí)直接發(fā)送壓縮包就好，提高協(xié)作效率。

五、交互文檔的設(shè)計(jì)原則

1.易讀性

功能完整、描述簡(jiǎn)短、邏輯嚴(yán)謹(jǐn)。交互設(shè)計(jì)文檔的用戶是下游的視覺(jué)設(shè)計(jì)師和開(kāi)發(fā)，功能缺失會(huì)導(dǎo)致拖慢整個(gè)項(xiàng)目進(jìn)度。開(kāi)發(fā)會(huì)根據(jù)交互說(shuō)明進(jìn)行開(kāi)發(fā)，保證描述的簡(jiǎn)短性可提高開(kāi)發(fā)小哥哥的閱讀效率。邏輯嚴(yán)謹(jǐn)，將所有的可能性都考慮到，大大提高用戶體驗(yàn)。

2.易于迭代

這也是我不推薦PDF的原因，PDF不能更改啊。但是產(chǎn)品是需要不停的迭代的，所以我們也需要一個(gè)可以實(shí)時(shí)迭代的交互文檔來(lái)跟上產(chǎn)品迭代的節(jié)奏。

3.規(guī)范統(tǒng)一

交互設(shè)計(jì)文檔是一個(gè)產(chǎn)品，產(chǎn)品的規(guī)范統(tǒng)一保證產(chǎn)品的易用性，降低用戶的學(xué)習(xí)成本。統(tǒng)一的交互設(shè)計(jì)文檔還可以提高團(tuán)隊(duì)的工作效率。保證文檔統(tǒng)一可以在不同的頁(yè)面使用一致的控件、組件和交互方式。

Tips：一個(gè)基本的交互設(shè)計(jì)文檔模板，每次只要使用模板往上填充內(nèi)容就好了；有些交互說(shuō)明是很通用的，如：字段的顯示規(guī)則啦，可以做成筆記，以后直接拿來(lái)復(fù)制粘貼即可，我一般用有道云筆記，也可以利用思維導(dǎo)圖，我一般用Xmind。

4.美觀性

不能因?yàn)槭墙换ピO(shè)計(jì)文檔就忽略美觀性啊，好歹也是拿給別人看的，考慮用戶體驗(yàn)啊。雖然我感覺(jué)我自己的交互稿很丑，hhh

5.創(chuàng)新

保持創(chuàng)新是一個(gè)設(shè)計(jì)師成長(zhǎng)不可或缺的道路啊。

 

六、制作交互文檔的工具

工具：Axure、Sketch、Keynote、Princile等。

我用Axure，很多大廠也是使用這個(gè)軟件，在功能層面已經(jīng)很完善，而且可直接發(fā)布成HTML，方便協(xié)同。

Anyway，沒(méi)錢(qián)買(mǎi)Mac，沒(méi)錢(qián)買(mǎi)Mac，沒(méi)錢(qián)買(mǎi)Mac，所以，你懂得~

 

最后，我想說(shuō)輸出一份完整的交互設(shè)計(jì)文檔也不是一蹴而就的，也是通過(guò)不斷的學(xué)習(xí)積累，這里介紹一下我是如何積累整理出屬于自己的設(shè)計(jì)方法的。

奧野宣之在《如何有效的閱讀一本書(shū)》中介紹有效閱讀的五個(gè)步驟，選書(shū)、購(gòu)書(shū)、讀書(shū)、記錄和活用。我想可以運(yùn)用到交互學(xué)習(xí)中來(lái)：

1.找到自己在交互學(xué)習(xí)中的薄弱環(huán)節(jié)，如：交互設(shè)計(jì)文檔；（選書(shū)）

2.通過(guò)各種途徑找到優(yōu)秀書(shū)籍或大神文章。（購(gòu)書(shū)）

3.學(xué)習(xí)優(yōu)秀的設(shè)計(jì)師是如果撰寫(xiě)交互設(shè)計(jì)文檔。（讀書(shū)）

4.學(xué)習(xí)的過(guò)程中要進(jìn)行筆記。（記錄）

5.提煉規(guī)律，結(jié)合自己工作實(shí)際，讓設(shè)計(jì)經(jīng)驗(yàn)變成自己的設(shè)計(jì)方法。（活用）

所以，就這樣，8~