作為一個(gè)經(jīng)歷了從小到大公司的交互設(shè)計(jì)師，筆者對于交互設(shè)計(jì)的認(rèn)識，也從淺入深，從宏觀到微觀，自己慢慢的形成了對交互設(shè)計(jì)的一系列心得，慢慢的關(guān)注開始關(guān)于交互細(xì)節(jié)的小技巧。其中交互稿是最重要的一部分。今天我們就來聊一聊交互設(shè)計(jì)稿中這些被人忽略的細(xì)微之處。

交互設(shè)計(jì)中直接體現(xiàn)設(shè)計(jì)師工作成果的是交互設(shè)計(jì)稿。關(guān)于交互設(shè)計(jì)稿，在不同類型的公司，對交互設(shè)計(jì)稿的要求也不一樣，規(guī)范度也隨著公司的規(guī)模變得越來越重要。在交互設(shè)計(jì)稿中，不僅僅包括原型設(shè)計(jì)，還包括原型的全局解釋、原型設(shè)計(jì)說明及原型的更改記錄等。也許，這些內(nèi)容在有些人眼中無關(guān)緊要。但是，在分工明確、產(chǎn)品版本迭代清晰的公司中，這些是較為注重的內(nèi)容，因?yàn)檫@些才是細(xì)微之處見功夫。

在創(chuàng)業(yè)型的公司，由于人員不多，有的人員會身兼多職，同時(shí)項(xiàng)目單一，大家的目標(biāo)一致，所以開發(fā)過程中的溝通成本較低，另外，在項(xiàng)目產(chǎn)品的迭代過程中，開發(fā)人員的面對面溝通就更加有效。但是，在規(guī)模較大的公司，由于人員、項(xiàng)目眾多，很難協(xié)調(diào)大家面對面的溝通，因此，在產(chǎn)品開發(fā)的每個(gè)階段的產(chǎn)出物的規(guī)范化，就顯得尤為重要，特別是設(shè)計(jì)的說明與注釋。交互稿的設(shè)計(jì)說明與注釋非常有助于交互設(shè)計(jì)意圖的準(zhǔn)確傳達(dá)，能夠幫助產(chǎn)品開發(fā)各階段的人員，自主的了解其設(shè)計(jì)目的，解答開發(fā)過程中的疑惑。

在交互設(shè)計(jì)稿中，哪些是被人忽略的細(xì)微之處呢？

一. 交互設(shè)計(jì)原型的全局注釋

交互設(shè)計(jì)的全局注釋包括設(shè)計(jì)規(guī)范的說明和視覺界面的要求與期望兩部分。

1. 設(shè)計(jì)規(guī)范說明

軟件的設(shè)計(jì)規(guī)范說明是指在原型開始或者原型頁面的頂部，關(guān)于原型中出現(xiàn)的一些統(tǒng)一的元素、控件等的說明，可以在原型中不做解釋，使原型界面顯得整潔。

2. 視覺界面的要求與期望

視覺界面的要求與期望是交互設(shè)計(jì)師在原型中要傳達(dá)給視覺設(shè)計(jì)師的頁面風(fēng)格與重點(diǎn)的界面元素，使交互設(shè)計(jì)師的設(shè)計(jì)理念得到貫徹和實(shí)施，保證視覺稿與產(chǎn)品經(jīng)理與交互設(shè)計(jì)師的想法一致。視覺界面的要求與期望包括主色調(diào)、頁面風(fēng)格、重點(diǎn)元素、頁面情緒等等。

在交互原型中，除去原型界面，原型的設(shè)計(jì)說明與注釋是交互設(shè)計(jì)原型中分量最多的部分，也是交互意圖傳達(dá)的重要途徑。

二. 原型的說明與注釋

通過實(shí)踐，筆者關(guān)于原型的注釋和說明的方法與技巧如下：

1. 可點(diǎn)擊注釋

在交互原型中，鼠標(biāo)點(diǎn)擊事件是經(jīng)常發(fā)生的，包括頁面之間的跳轉(zhuǎn)，動態(tài)面板之間的切換等等。而在頁面中并不是所有的button都能點(diǎn)擊，因此就需要在界面中可點(diǎn)擊的地方放置可點(diǎn)擊注釋，通常是手型標(biāo)示，或者其他的半透明的圓形，這些是可以自定義的。對于不太常用的標(biāo)識，需要在全局注釋中的設(shè)計(jì)規(guī)范說明中加以規(guī)范說明。

2. 批注框注釋

當(dāng)頁面內(nèi)容較多時(shí)，可以采用批注框注釋的方式，對元素進(jìn)行定向注釋說明。通常采用在形狀內(nèi)寫上注釋說明，并用箭頭連接形狀與注釋元素。但是連接箭頭、注釋框和說明文字要保持顏色統(tǒng)一，以區(qū)別頁面原有內(nèi)容。

Ps：注釋顏色可以在全局注釋中說明。

3. Axure自帶控件注釋

作為強(qiáng)大的交互原型設(shè)計(jì)工具，Axure怎么能沒有標(biāo)注功能呢？雖然Axure的標(biāo)注方式與查閱不是很方便，但是在保證設(shè)計(jì)頁面的整潔上確實(shí)很有效果的。這種比較適合大家相對來說比較熟悉的控件，在有特殊說明時(shí)，可以點(diǎn)擊查閱，其默認(rèn)狀態(tài)為隱藏。選中要注釋的元素，在NOTES中輸入注釋說明文字即可。在預(yù)覽界面中點(diǎn)擊元素右上角的標(biāo)示，即可查看注釋內(nèi)容。

效果展示：

4. 頁面內(nèi)注釋

頁面內(nèi)注釋是指將注釋內(nèi)容直接在所要說明的內(nèi)容旁邊，注釋文字與頁面的批注元素采用統(tǒng)一色調(diào)，以區(qū)別原有內(nèi)容。當(dāng)頁面元素較少時(shí)，使用少量的文字注釋，顯得頁面精致、有細(xì)節(jié)，同時(shí)又不顯得頁面凌亂。

5. 頁面氣泡注釋

頁面氣泡注釋是將頁面內(nèi)的細(xì)節(jié)操作流程分解，進(jìn)行補(bǔ)充說明。該方法使用與頁面較為復(fù)雜，但頁面中只有少量元素可以操作，并有相應(yīng)的反饋，這樣可以減少頁面數(shù)量，同時(shí)頁面細(xì)節(jié)豐富，且小功能得到很好的表現(xiàn)。不過，氣泡注釋屬于就地顯示，建議一個(gè)頁面中的氣泡層級不要超過三個(gè)。

6. 頁面右側(cè)編號注釋

當(dāng)一個(gè)頁面內(nèi)有多處注釋時(shí)，將元素進(jìn)行編號，并統(tǒng)一在頁面內(nèi)容右側(cè)進(jìn)行說明。

注意：

• 注釋編號不要遮擋界面內(nèi)容；
• 設(shè)計(jì)說明與編號的關(guān)聯(lián)性要強(qiáng)（可用區(qū)域截圖）；
• 右側(cè)的批注區(qū)域不要太寬，一般在200-400像素之間。

7. 新增頁面注釋

新增頁面相對來說比較簡單，但使用范圍卻相對局限。建議盡量少使用這種注釋方法，只適用于頁面注釋內(nèi)容較多，且氣泡注釋與頁面右側(cè)編碼注釋不能滿足需求時(shí)使用。該方法的設(shè)計(jì)頁面與設(shè)計(jì)說明分割在不同的頁面，造成閱讀上的跳躍性，易打斷整個(gè)功能的邏輯操作流程。

8. 故事版注釋

對于明顯的操作流程的注釋，可以采用連接線貫穿起來或者分步驟講解的方式，將各個(gè)產(chǎn)品的操作過程表述清楚。該方法類似需求分析中的故事版法，所以叫故事版注釋。這種方法與可點(diǎn)擊注釋向配合，可以完整的表現(xiàn)一個(gè)產(chǎn)品功能的邏輯流程。

9. 工具欄注釋

該方法僅用來注釋頁面中出現(xiàn)的工具、圖標(biāo)的說明。其使用方法，類似于右側(cè)編號注釋，但沒有編號，而是用圖標(biāo)代替，圖標(biāo)右側(cè)則是其功能的說明。

10. 事件注釋

對于交互事件較多，動態(tài)切換頻繁頁面，需要鼠標(biāo)動作以及鍵盤快捷鍵的操作說明。例如，鼠標(biāo)的事件包括下列若干方式：

11. 狀態(tài)注釋

頁面元素在不同的交互過程中，會展示多種狀態(tài)，使用統(tǒng)一的格式進(jìn)行注釋說明，便于對比查看。以文件夾的操作與顯示方式為例，可以用圖形文字來描述文件夾處于不同狀態(tài)的形式與功能。

12. 右鍵注釋

右鍵菜單作為界面的輔助功能，放在頁面內(nèi)容易遮擋頁面原有內(nèi)容，可使用設(shè)計(jì)注釋的方式，展開右鍵菜單的內(nèi)容。

三. 交互設(shè)計(jì)原型的發(fā)布

原型發(fā)布主要包括文檔變更記錄與標(biāo)志。

1. 文檔變更記錄

文檔變更記錄一般位于原型文檔目錄最后一頁，用于版本控制，為后續(xù)升級改進(jìn)提供參考信息。變更記錄可以以列表的形式展示或者其他形式，主要包括序號、日期、版本號、變更人（修改人）、修改內(nèi)容。

2. 標(biāo)志

標(biāo)志是在發(fā)布原型時(shí)，使用統(tǒng)一的名片樣式作為標(biāo)志，記錄作者，便于溝通。

添加名片的方式是：點(diǎn)擊Axure右上角的發(fā)布，點(diǎn)擊生成HTML文件或者在HTML文件中生成當(dāng)前頁面，在彈出框中點(diǎn)擊標(biāo)志，即可導(dǎo)入圖片格式的名片，建議名片的尺寸不要太大，信息突出。導(dǎo)入以后，不用點(diǎn)擊完成，點(diǎn)擊取消，即可在預(yù)覽頁面中，左上角的頁面結(jié)構(gòu)菜單上部看到該標(biāo)志。

添加效果如圖：

原型的注釋方式很多，雖然講了那么多，但還是無法窮盡所有的注釋方法。在不同的需求場景中，會根據(jù)實(shí)際情況采用看似不合理的注釋方式。無論采用什么樣的注釋方式，其目的都是增強(qiáng)頁面的邏輯、功能的表達(dá)，實(shí)現(xiàn)設(shè)計(jì)意圖的準(zhǔn)確傳達(dá)。

交互原型不僅僅只是產(chǎn)品界面，背后還有很多細(xì)節(jié)要不斷的去豐富，去完善。

愿與你同行！

作者：莫忘&初心，微信公眾號：UIUX設(shè)計(jì)工作坊（UIUX-HUANG)， 希望與同行者多多交流。

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