細(xì)微處見(jiàn)功夫！聊聊那些不被重視的交互稿細(xì)節(jié)

作為一個(gè)經(jīng)歷了從小到大公司的交互設(shè)計(jì)師，筆者對(duì)于交互設(shè)計(jì)的認(rèn)識(shí)，也從淺入深，從宏觀到微觀，自己慢慢的形成了對(duì)交互設(shè)計(jì)的一系列心得。

首頁(yè)

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

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

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

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

1）設(shè)計(jì)規(guī)范說(shuō)明

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

2）視覺(jué)界面的要求與期望

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

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

第二：原型的說(shuō)明與注釋

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

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

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

2）批注框注釋

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

△ 批注框注釋

3）Axure自帶控件注釋

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

△ Axure自帶控件注釋

效果展示：

4）頁(yè)面內(nèi)注釋

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

5）頁(yè)面氣泡注釋

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

6）頁(yè)面右側(cè)編號(hào)注釋

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

注意：

注釋編號(hào)不要遮擋界面內(nèi)容；

設(shè)計(jì)說(shuō)明與編號(hào)的關(guān)聯(lián)性要強(qiáng)（可用區(qū)域截圖）；

右側(cè)的批注區(qū)域不要太寬，一般在200-400像素之間。

7）新增頁(yè)面注釋

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

8）故事版注釋

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

9）工具欄注釋

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

10）事件注釋

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

11）狀態(tài)注釋

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

12）右鍵注釋

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

最后，是交互設(shè)計(jì)原型的發(fā)布。

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

1）文檔變更記錄

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

2）標(biāo)志

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

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

添加效果如圖：

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

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

愿與你同行！

歡迎關(guān)注作者微信公眾號(hào)：

「交互設(shè)計(jì)好文」

《網(wǎng)易美女設(shè)計(jì)主管！交互設(shè)計(jì)菜鳥(niǎo)如何入門(mén)？》
《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com