作為一個經(jīng)歷了從小到大公司的交互設(shè)計師，筆者對于交互設(shè)計的認(rèn)識肥照，也從淺入深鸠信，從宏觀到微觀，自己慢慢的形成了對交互設(shè)計的一系列心得攒岛。
交互設(shè)計中直接體現(xiàn)設(shè)計師工作成果的是交互設(shè)計稿对湃。關(guān)于交互設(shè)計稿惯豆，在不同類型的公司，對交互設(shè)計稿的要求也不一樣，規(guī)范度也隨著公司的規(guī)模變得越來越重要宰翅。在交互設(shè)計稿中澡匪，不僅僅包括原型設(shè)計努溃，還包括原型的全局解釋劲装、原型設(shè)計說明及原型的更改記錄等。也許兼雄，這些內(nèi)容在有些人眼中無關(guān)緊要吟逝。但是，在分工明確赦肋、產(chǎn)品版本迭代清晰的公司中块攒，這些是較為注重的內(nèi)容励稳，因?yàn)檫@些才是細(xì)微之處見功夫。
在創(chuàng)業(yè)型的公司囱井，由于人員不多麦锯，有的人員會身兼多職，同時項目單一琅绅，大家的目標(biāo)一致扶欣，所以開發(fā)過程中的溝通成本較低，另外千扶，在項目產(chǎn)品的迭代過程中料祠，開發(fā)人員的面對面溝通就更加有效。但是澎羞，在規(guī)模較大的公司髓绽，由于人員、項目眾多妆绞，很難協(xié)調(diào)大家面對面的溝通顺呕，因此，在產(chǎn)品開發(fā)的每個階段的產(chǎn)出物的規(guī)范化括饶，就顯得尤為重要株茶，特別是設(shè)計的說明與注釋。交互稿的設(shè)計說明與注釋非常有助于交互設(shè)計意圖的準(zhǔn)確傳達(dá)图焰，能夠幫助產(chǎn)品開發(fā)各階段的人員启盛，自主的了解其設(shè)計目的，解答開發(fā)過程中的疑惑技羔。今天我們就來聊一聊交互設(shè)計稿中這些被人忽略的細(xì)微之處僵闯。
第一：交互設(shè)計原型的全局注釋
交互設(shè)計的全局注釋包括設(shè)計規(guī)范的說明和視覺界面的要求與期望兩部分。
1）設(shè)計規(guī)范說明
軟件的設(shè)計規(guī)范說明是指在原型開始或者原型頁面的頂部藤滥，關(guān)于原型中出現(xiàn)的一些統(tǒng)一的元素鳖粟、控件等的說明，可以在原型中不做解釋拙绊，使原型界面顯得整潔向图。
2）視覺界面的要求與期望
視覺界面的要求與期望是交互設(shè)計師在原型中要傳達(dá)給視覺設(shè)計師的頁面風(fēng)格與重點(diǎn)的界面元素，使交互設(shè)計師的設(shè)計理念得到貫徹和實(shí)施时呀，保證視覺稿與產(chǎn)品經(jīng)理與交互設(shè)計師的想法一致张漂。視覺界面的要求與期望包括主色調(diào)、頁面風(fēng)格谨娜、重點(diǎn)元素、頁面情緒等等磺陡。
在交互原型中趴梢，除去原型界面漠畜，原型的設(shè)計說明與注釋是交互設(shè)計原型中分量最多的部分，也是交互意圖傳達(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è)計規(guī)范說明中加以規(guī)范說明叨橱。
2）批注框注釋
當(dāng)頁面內(nèi)容較多時典蜕，可以采用批注框注釋的方式，對元素進(jìn)行定向注釋說明罗洗。通常采用在形狀內(nèi)寫上注釋說明愉舔，并用箭頭連接形狀與注釋元素。但是連接箭頭伙菜、注釋框和說明文字要保持顏色統(tǒng)一屑宠，以區(qū)別頁面原有內(nèi)容。Ps：注釋顏色可以在全局注釋中說明仇让。
3）Axure自帶控件注釋
作為強(qiáng)大的交互原型設(shè)計工具典奉，Axure怎么能沒有標(biāo)注功能呢？雖然Axure的標(biāo)注方式與查閱不是很方便丧叽，但是在保證設(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)頁面元素較少時榜田，使用少量的文字注釋益兄，顯得頁面精致、有細(xì)節(jié)箭券，同時又不顯得頁面凌亂净捅。
5）頁面氣泡注釋
頁面氣泡注釋是將頁面內(nèi)的細(xì)節(jié)操作流程分解，進(jìn)行補(bǔ)充說明辩块。該方法使用與頁面較為復(fù)雜蛔六，但頁面中只有少量元素可以操作，并有相應(yīng)的反饋废亭，這樣可以減少頁面數(shù)量国章，同時頁面細(xì)節(jié)豐富，且小功能得到很好的表現(xiàn)滔以。不過捉腥，氣泡注釋屬于就地顯示，建議一個頁面中的氣泡層級不要超過三個你画。
6）頁面右側(cè)編號注釋
當(dāng)一個頁面內(nèi)有多處注釋時抵碟，將元素進(jìn)行編號，并統(tǒng)一在頁面內(nèi)容右側(cè)進(jìn)行說明坏匪。
注意：
注釋編號不要遮擋界面內(nèi)容拟逮；
設(shè)計說明與編號的關(guān)聯(lián)性要強(qiáng)（可用區(qū)域截圖）；
右側(cè)的批注區(qū)域不要太寬适滓，一般在200-400像素之間敦迄。
7）新增頁面注釋
新增頁面相對來說比較簡單，但使用范圍卻相對局限凭迹。建議盡量少使用這種注釋方法罚屋，只適用于頁面注釋內(nèi)容較多，且氣泡注釋與頁面右側(cè)編碼注釋不能滿足需求時使用嗅绸。該方法的設(shè)計頁面與設(shè)計說明分割在不同的頁面脾猛，造成閱讀上的跳躍性，易打斷整個功能的邏輯操作流程鱼鸠。
8）故事版注釋
對于明顯的操作流程的注釋猛拴，可以采用連接線貫穿起來或者分步驟講解的方式，將各個產(chǎn)品的操作過程表述清楚蚀狰。該方法類似需求分析中的故事版法愉昆，所以叫故事版注釋。這種方法與可點(diǎn)擊注釋向配合麻蹋，可以完整的表現(xiàn)一個產(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è)計注釋的方式模暗，展開右鍵菜單的內(nèi)容禁悠。
最后，是交互設(shè)計原型的發(fā)布兑宇。
原型發(fā)布主要包括文檔變更記錄與標(biāo)志碍侦。
1）文檔變更記錄
文檔變更記錄一般位于原型文檔目錄最后一頁，用于版本控制隶糕，為后續(xù)升級改進(jìn)提供參考信息瓷产。變更記錄可以以列表的形式展示或者其他形式，主要包括序號枚驻、日期濒旦、版本號、變更人（修改人）测秸、修改內(nèi)容疤估。
2）標(biāo)志
標(biāo)志是在發(fā)布原型時，使用統(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è)計意圖的準(zhǔn)確傳達(dá)绍赛。
交互原型不僅僅只是產(chǎn)品界面，背后還有很多細(xì)節(jié)要不斷的去豐富骂维，去完善惹资。
愿與你同行！
