細微處見功夫！聊聊那些不被重視的交互稿細節

作為一個經歷了從小到大公司的 交互設計 師，筆者對于 交互設計 的認識，也從淺入深，從宏觀到微觀，自己慢慢的形成了對交互設計的一系列心得。

首頁

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

在創業型的公司，由于人員不多，有的人員會身兼多職，同時項目單一，大家的目標一致，所以開發過程中的溝通成本較低，另外，在項目產品的迭代過程中，開發人員的面對面溝通就更加有效。但是，在規模較大的公司，由于人員、項目眾多，很難協調大家面對面的溝通，因此，在產品開發的每個階段的產出物的規范化，就顯得尤為重要，特別是設計的說明與注釋。交互稿的設計說明與注釋非常有助于交互設計意圖的準確傳達，能夠幫助產品開發各階段的人員，自主的了解其設計目的，解答開發過程中的疑惑。今天我們就來聊一聊交互設計稿中這些被人忽略的細微之處。

第一：交互設計原型的全局注釋

交互設計的全局注釋包括設計規范的說明和視覺界面的要求與期望兩部分。

1）設計規范說明

軟件的設計規范說明是指在原型開始或者原型頁面的頂部，關于原型中出現的一些統一的元素、控件等的說明，可以在原型中不做解釋，使原型界面顯得整潔。

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

視覺界面的要求與期望是交互設計師在原型中要傳達給視覺設計師的頁面風格與重點的界面元素，使交互設計師的設計理念得到貫徹和實施，保證視覺稿與產品經理與交互設計師的想法一致。視覺界面的要求與期望包括主色調、頁面風格、重點元素、頁面情緒等等。

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

第二：原型的說明與注釋

通過實踐，筆者關于原型的注釋和說明的方法與技巧如下：

1）可點擊注釋

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

2）批注框注釋

當頁面內容較多時，可以采用批注框注釋的方式，對元素進行定向注釋說明。通常采用在形狀內寫上注釋說明，并用箭頭連接形狀與注釋元素。但是連接箭頭、注釋框和說明文字要保持顏色統一，以區別頁面原有內容。Ps：注釋顏色可以在全局注釋中說明。

△ 批注框注釋

3）Axure自帶控件注釋

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

△ Axure自帶控件注釋

效果展示：

4）頁面內注釋

頁面內注釋是指將注釋內容直接在所要說明的內容旁邊，注釋文字與頁面的批注元素采用統一色調，以區別原有內容。當頁面元素較少時，使用少量的文字注釋，顯得頁面精致、有細節，同時又不顯得頁面凌亂。

5）頁面氣泡注釋

頁面氣泡注釋是將頁面內的細節操作流程分解，進行補充說明。該方法使用與頁面較為復雜，但頁面中只有少量元素可以操作，并有相應的反饋，這樣可以減少頁面數量，同時頁面細節豐富，且小功能得到很好的表現。不過，氣泡注釋屬于就地顯示，建議一個頁面中的氣泡層級不要超過三個。

6）頁面右側編號注釋

當一個頁面內有多處注釋時，將元素進行編號，并統一在頁面內容右側進行說明。

注意：

注釋編號不要遮擋界面內容；

設計說明與編號的關聯性要強（可用區域截圖）；

右側的批注區域不要太寬，一般在200-400像素之間。

7）新增頁面注釋

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

8）故事版注釋

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

9）工具欄注釋

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

10）事件注釋

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

11）狀態注釋

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

12）右鍵注釋

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

最后，是交互設計原型的發布。

原型發布主要包括文檔變更記錄與標志。

1）文檔變更記錄

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

2）標志

標志是在發布原型時，使用統一的名片樣式作為標志，記錄作者，便于溝通。

添加名片的方式是：點擊Axure右上角的發布，點擊生成HTML文件或者在HTML文件中生成當前頁面，在彈出框中點擊標志，即可導入圖片格式的名片，建議名片的尺寸不要太大，信息突出。導入以后，不用點擊完成，點擊取消，即可在預覽頁面中，左上角的頁面結構菜單上部看到該標志。

添加效果如圖：

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

交互原型不僅僅只是產品界面，背后還有很多細節要不斷的去豐富，去完善。

愿與你同行！

歡迎關注作者微信公眾號：

「交互設計好文」

【優設網 原創文章 投稿郵箱：[email protected]】