互聯(lián)網(wǎng)講究快速迭代，通常設(shè)計(jì)改動(dòng)的地方也不是特別多，我也能得心應(yīng)手的處理好。之前經(jīng)歷了一次不能拆分的復(fù)雜功能改版，從產(chǎn)品設(shè)計(jì)到開(kāi)發(fā)上線全面翻車(chē)，蘋(píng)果市場(chǎng)卡了 1 個(gè)月才通過(guò)審核。項(xiàng)目結(jié)束之后團(tuán)隊(duì)坐在一起復(fù)盤(pán)，除了協(xié)作流程的問(wèn)題，也有交互說(shuō)明文檔在復(fù)雜項(xiàng)目中寫(xiě)得不夠清晰的原因，在此分享給各位讀者。
以前我們界面和說(shuō)明擺放位置是參考的大廠的文檔，上方為界面，下方為對(duì)應(yīng)的說(shuō)明。
開(kāi)發(fā)測(cè)試同事和我們反饋，因?yàn)槊總(gè)頁(yè)面的界面都是左右擺放，所以他們習(xí)慣用橫向滾動(dòng)條查看同頁(yè)面屏幕外的內(nèi)容，根本不會(huì)注意豎向滾動(dòng)條，放在界面下方的說(shuō)明如果超出屏幕高度根本注意不到。
由于前端/客戶端開(kāi)發(fā)同事習(xí)慣了 zeplin 等切圖標(biāo)注軟件左界面右邊對(duì)應(yīng)參數(shù)的布局，希望我將界面和交互說(shuō)明左右布局。
△ UI 切圖標(biāo)注軟件界面
另外，要在交互說(shuō)明找到界面對(duì)應(yīng)標(biāo)記的文字很累。
基于以上反饋，我將界面和交互說(shuō)明改為左右布局，并將交互說(shuō)明按元素拆分，界面標(biāo)記和交互說(shuō)明左右一一對(duì)應(yīng)。
1. 交互說(shuō)明專有名詞標(biāo)點(diǎn)符號(hào)規(guī)范
交互說(shuō)明里經(jīng)常提到某個(gè)頁(yè)面、某個(gè)按鈕等元素，一旦提到的元素很多，混在說(shuō)明文字里看起來(lái)就特別累。因此我參考了 @叫我 vitamin 的《產(chǎn)品文檔中，特殊標(biāo)點(diǎn)符號(hào)的使用建議》，對(duì)說(shuō)明中提到的各種術(shù)語(yǔ)進(jìn)行規(guī)范：
當(dāng)描述的內(nèi)容包含某個(gè)菜單頁(yè)面的時(shí)候，建議使用「」（Mac 默認(rèn)輸入法中文情況下 shitf+{}可以打出這個(gè)符號(hào)，第三方輸入法設(shè)置下也可以打出來(lái)）或者“”，后面增加名詞修飾。
當(dāng)描述的內(nèi)容包含了某個(gè)頁(yè)面下的 Tab 信息或狀態(tài)的時(shí)候，建議使用「」或者“”，后面增加名詞修飾。
當(dāng)描述的內(nèi)容包含某個(gè)新增的字段的時(shí)候，建議使用反引號(hào)（‘code’）來(lái)表示。
當(dāng)描述的內(nèi)容中需要點(diǎn)擊某個(gè)按鈕或者使用某個(gè)功能的時(shí)候，建議使用【】來(lái)表示，不建議使用「」是怕直角引號(hào)太多，代表的含義太雜引起閱讀負(fù)擔(dān)。
舉例：
先打開(kāi)用藥助手的「會(huì)員購(gòu)買(mǎi)頁(yè)」，然后點(diǎn)擊“專業(yè)版購(gòu)買(mǎi)”tab，選擇對(duì)應(yīng)的價(jià)格，點(diǎn)擊【支付并購(gòu)買(mǎi)】。需要新增‘次月 30 月’字段。
2. 交互說(shuō)明分類(lèi)
光用對(duì)標(biāo)點(diǎn)符號(hào)還不夠，同事將交互說(shuō)明進(jìn)行分類(lèi)，不同的內(nèi)容寫(xiě)到不同的分類(lèi)下，這樣更清晰。
3. 交互說(shuō)明可視化
即使長(zhǎng)段文字寫(xiě)得再清晰，也沒(méi)有人樂(lè)意去看。圖像和視頻是更吸引人、更容易理解的方式，因此我將一些涉及到邏輯判斷的交互說(shuō)明由文字改成流程圖。
對(duì)于表單這種形式，每次都必須寫(xiě)輸入框占位符、軟鍵盤(pán)類(lèi)型這些，提交按鈕也肯定涉及到字段不對(duì)的判斷，其實(shí)這些很重復(fù)，也會(huì)導(dǎo)致說(shuō)明文字寫(xiě)得特別長(zhǎng)。因此我將此規(guī)范成 2 個(gè)表格，寫(xiě)的人和看的人都輕松了不少。
推薦大家多看看說(shuō)明文字里格式重復(fù)部分，合理運(yùn)用圖示和表格效果非常顯著。
為了需求拆分評(píng)估工期和調(diào)整需求（開(kāi)發(fā)砍需求）方便，盡可能地把頁(yè)面拆細(xì)一些。這樣突然要調(diào)整需求，直接隱藏部分頁(yè)面就可以了，都不用改。
基于以往經(jīng)驗(yàn)，為了讓交互稿看著更清晰，原則上每個(gè)頁(yè)面盡量不超過(guò) 6 個(gè)界面，界面只能一個(gè)橫排展示，禁止多行。
拆分規(guī)則可參考如下：
將不同的界面拆成不同的頁(yè)面：適用于界面本身有很多狀態(tài)，說(shuō)明非常多的情況。
將不同的流程拆成不同的頁(yè)面：適用于流程很長(zhǎng)，或有多個(gè)分支的情況。
將一個(gè)界面的不同模塊拆成不同的頁(yè)面：適用于單界面非常大或者復(fù)雜，或者說(shuō)明界面之前需要有個(gè)總體說(shuō)明的情況。
原諒我視覺(jué)和顏色能力很差，畫(huà)出來(lái)的線框圖不好看，也顯得不清晰。在灰度線框圖中，色塊的明暗對(duì)比度是傳達(dá)信息層級(jí)最重要的方式。
比如下圖：綠色按鈕的狀態(tài)是非常明確的，然而去色之后，灰色按鈕看起來(lái)就不像“最高層級(jí)”的元素了，甚至有種被“置灰禁用”的感覺(jué)。
為此，我找到一位視覺(jué)和交互都很厲害的美女設(shè)計(jì)師（已婚，你們不要想了）。她通過(guò)研究 Web 內(nèi)容無(wú)障礙設(shè)計(jì)指南，計(jì)算最佳對(duì)比度，得出一套交互說(shuō)明文檔配色規(guī)范。該規(guī)范能：
- 滿足字體、按鈕、標(biāo)簽、分區(qū)這四項(xiàng)最常見(jiàn)內(nèi)容的配色需求，并能擴(kuò)展到其他常用組件；
- 對(duì)比度足夠明晰易讀，但又不至于強(qiáng)烈到刺眼；
- 取色呈現(xiàn)梯度，能夠支持多個(gè)信息層級(jí)；
- 選取的色值不要太多，便于后期維護(hù)。
規(guī)范如下：
經(jīng)過(guò)這套規(guī)范，線框圖的配色層級(jí)清晰多了！
評(píng)審之后，在修改和新增的地方打上「新」「改」和日期的標(biāo)記，如果修改的地方很重要，可把顏色變色或加粗提醒大家注意。
Axure 小技巧：按住頁(yè)面名稱并拖動(dòng)到頁(yè)面里，能生成一個(gè)帶鏈接的方塊，方便開(kāi)發(fā)和測(cè)試點(diǎn)擊方塊直接跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面。
這套規(guī)范后來(lái)得到了開(kāi)發(fā)老大的表?yè)P(yáng)。我們?cè)O(shè)計(jì)師致力于為用戶提供更好的體驗(yàn)，其實(shí)對(duì)于交互說(shuō)明文檔而言，用戶就是開(kāi)發(fā)和測(cè)試同事。‘(dāng)然這套規(guī)范也要學(xué)習(xí)互聯(lián)網(wǎng)產(chǎn)品，后續(xù)根據(jù)反饋持續(xù)進(jìn)行迭代優(yōu)化。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。