如何撰寫(xiě)高效的交互說(shuō)明？
2021-4-13 ui設(shè)計(jì)分享達(dá)人
定義：
交互說(shuō)明是針對(duì)原型圖內(nèi)容元素的補(bǔ)充解釋文字（包含交互邏輯描述、反饋狀態(tài)描述等） 交互設(shè)計(jì)說(shuō)明書(shū)由交互設(shè)計(jì)師完成編輯、修訂、發(fā)布的 主要閱讀對(duì)象：產(chǎn)品人員、設(shè)計(jì)人員、研發(fā)人員、測(cè)試人員等，他們都是交互設(shè)計(jì)文檔的使用主角。 主要關(guān)注：交互邏輯、功能架構(gòu)、交互事件、界面頁(yè)面流轉(zhuǎn)與內(nèi)容布局等。這里的產(chǎn)品經(jīng)理代表產(chǎn)品經(jīng)理及以上管理層。 注意要點(diǎn)： 為項(xiàng)目梳理清楚邏輯關(guān)系，文檔按照邏輯關(guān)系和功能架構(gòu)分支等設(shè)置目錄講清楚項(xiàng)目、功能、組件、頁(yè)面流轉(zhuǎn)關(guān)系。主要關(guān)注：說(shuō)明文檔的具體頁(yè)面數(shù)量，因?yàn)檫@決定 UI 設(shè)計(jì)師出多少效果圖。另外，要看你的原型設(shè)計(jì)給 UI 設(shè)計(jì)師留了多少發(fā)揮空間，不要過(guò)于高保真。以及頁(yè)面元素是否統(tǒng)一規(guī)范便于提煉出典型頁(yè)面和設(shè)計(jì)規(guī)范。 注意要點(diǎn)： 清晰合理的頁(yè)面功能布局，注意交互組件復(fù)用，頁(yè)面不同狀態(tài)描述清晰。主要關(guān)注：非常關(guān)心細(xì)節(jié)實(shí)現(xiàn)，關(guān)心有多 少個(gè)功能、多少個(gè)功能新特性、多少個(gè)頁(yè)面元素組件、多少個(gè)交互動(dòng)效等， 但他不關(guān)心方案里一個(gè)輸入框里是用彩色還是黑白，因?yàn)樗蔷唧w功能的實(shí)現(xiàn)者。 注意要點(diǎn)： 明確表示出關(guān)于功能設(shè)計(jì)、頁(yè)面邏輯、組件交互等信息的細(xì)節(jié)，例如：一個(gè)頁(yè)面刷新，要分為觸發(fā)刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況：網(wǎng)絡(luò)不佳、程序異常等。如果你沒(méi)有提出明確需求，責(zé)任就會(huì)在需求方，而不是研發(fā)部門(mén)。主要關(guān)注：測(cè)試是依靠需求說(shuō)明書(shū)和交互設(shè)計(jì)說(shuō)明書(shū)，進(jìn)行測(cè)試用例與測(cè)試腳本的編寫(xiě)，在交互設(shè)計(jì)說(shuō)明文檔里需要說(shuō)明白每一個(gè)功能的交互動(dòng)作與事件，測(cè)試是抓細(xì)節(jié)的，所以需要配一些說(shuō)明性文字解釋交互設(shè)計(jì)的思路與實(shí)現(xiàn)路徑，這樣測(cè)試人員就可根據(jù)設(shè)計(jì)思路設(shè)計(jì)出測(cè)試用例。當(dāng)然，測(cè)試用例分多種類(lèi)型，這里指的是功能測(cè)試與邏輯測(cè)試，一些性能測(cè)試等需要依靠程序使用的軟件、數(shù)據(jù)庫(kù)等技術(shù)性的接口文檔來(lái)定。 注意要點(diǎn)： 功能點(diǎn)、業(yè)務(wù)邏輯、界面元素、交互過(guò)程分解步驟。上面解釋了各角色使用交互設(shè)計(jì)說(shuō)明文檔的場(chǎng)景及他們期待的真實(shí)需求，我們需要清楚地了解這些內(nèi)容，才能有針對(duì)性地撰寫(xiě)交互設(shè)計(jì)說(shuō)明。 在交互設(shè)計(jì)過(guò)程中，上述四個(gè)角色會(huì)不斷有所交集。所以，一旦編輯文檔，就需要對(duì)這幾個(gè)角色有針對(duì)性地解釋和閱讀優(yōu)化。 清晰準(zhǔn)確的交互說(shuō)明，可以起到哪些作用：1.減少交互設(shè)計(jì)師與產(chǎn)品上下游人員的溝通成本 交互說(shuō)明撰寫(xiě)準(zhǔn)則：只針對(duì)有邏輯規(guī)則、異常狀態(tài)、特殊交互、分支流程、關(guān)鍵節(jié)點(diǎn)等進(jìn)行說(shuō)明。 對(duì)于一些常識(shí)性、無(wú)異常點(diǎn)的地方不用堆積文字描述... 交互說(shuō)明畢竟是要給人看的，堆積的文字誰(shuí)看得下去？？只會(huì)帶來(lái)額外的閱讀壓力和極高的理解成本，交互設(shè)計(jì)師修改起來(lái)也麻煩。 01.設(shè)計(jì)內(nèi)容組件：對(duì)于重復(fù)性強(qiáng)、出現(xiàn)頻率高的內(nèi)容，設(shè)置一個(gè)模板內(nèi)容及說(shuō)明即可。 對(duì)于重復(fù)出現(xiàn)的地方，直接代替過(guò)去就行，可大幅度減少交互設(shè)計(jì)師的工作量，開(kāi)發(fā)也方便理解。 02.分頁(yè)面/位置來(lái)展示：當(dāng)整體交互原型頁(yè)面較多時(shí)，不要全都鋪在同一個(gè)頁(yè)面進(jìn)行展示說(shuō)明，會(huì)顯得頁(yè)面臃腫、瀏覽費(fèi)力?？蓢L試：?jiǎn)为?dú)展示某個(gè)模塊、分支流程、場(chǎng)景等下的交互稿。小而聚集，內(nèi)容更精簡(jiǎn)、理解更方便。 03.若各模塊/分支流程/場(chǎng)景中的交互稿存在一定的關(guān)聯(lián)性，可以先做一張總體性的「概覽圖」，再去單獨(dú)展示。讓開(kāi)發(fā)知道整體方案之間的關(guān)系、又能了解各個(gè)細(xì)分方案里的交互說(shuō)明。 交互稿里總會(huì)有一些比較復(fù)雜、難以文字來(lái)說(shuō)明的想法，像是一些動(dòng)效、狀態(tài)等。 對(duì)于這一些比較復(fù)雜的說(shuō)明，可抽離出來(lái)進(jìn)行對(duì)比、詳細(xì)描述，針對(duì)局部進(jìn)行狀態(tài)效果描述，不必重復(fù)復(fù)制全量頁(yè)面。 像一些按鈕或功能存在多種狀態(tài)時(shí)，也可用“表格/列表”的方式進(jìn)行展示。 針對(duì)不同體量及復(fù)雜度的項(xiàng)目，交互說(shuō)明一定存在多種排版布局方式。但要注意以下幾點(diǎn)： 01.就近原則：交互說(shuō)明盡量靠近所描述的原型圖（或具體功能點(diǎn)）采用數(shù)字標(biāo)號(hào)對(duì)應(yīng)描述。特殊情況下交互說(shuō)明離頁(yè)面數(shù)字標(biāo)注點(diǎn)較遠(yuǎn)時(shí)，可用虛線連接引導(dǎo)閱讀動(dòng)線。 02.縱向展示：同頁(yè)面不同狀態(tài)/模塊及交互說(shuō)明盡量縱向延伸展示，這樣更便于鼠標(biāo)滾動(dòng)查看。不要橫向平鋪太長(zhǎng)。 03.減少重復(fù)：對(duì)于相同的頁(yè)面框架/功能菜單僅部分模塊/狀態(tài)不同，可畫(huà)一張全要素主頁(yè)面示意，其余針對(duì)不同模塊/狀態(tài)拆解后，單獨(dú)對(duì)比展示，并補(bǔ)充交互說(shuō)明。突出差異點(diǎn)，減少重復(fù)性元素的干擾。 04.主次分明：交互說(shuō)明樣式整體需要區(qū)別于原型圖頁(yè)面元素，可一眼區(qū)分。同時(shí)，對(duì)于交互說(shuō)明也需要區(qū)分主要解釋和次要描述，讓不同查看者抓住重點(diǎn)。 不同的排版布局方式各有利弊，所以具體采用哪種布局方式要根據(jù)所做項(xiàng)目的情況，以及開(kāi)發(fā)人員的閱讀習(xí)慣而定。 類(lèi)似于設(shè)計(jì)的控件庫(kù)，我們?cè)陧?xiàng)目中寫(xiě)交互說(shuō)明寫(xiě)多了就會(huì)發(fā)現(xiàn)，既然元素可以調(diào)用控件庫(kù)快捷使用，那么該元素的交互說(shuō)明也可以歸類(lèi)入庫(kù)，在需要的時(shí)候直接拿出來(lái)根據(jù)具體情況調(diào)整使用。這樣做的目的：使用時(shí)快捷調(diào)用，修改時(shí)快捷修改。 若交互原型做了調(diào)整（包含交互說(shuō)明），一定要告知團(tuán)隊(duì)成員！！并寫(xiě)明修改位置（在哪個(gè)頁(yè)面）。 否則產(chǎn)品、前端、后臺(tái)、測(cè)試等同事的相關(guān)想法、工作會(huì)停留在上個(gè)交互稿里。不要因?yàn)樾畔](méi)對(duì)齊而造成了不良影響。就算改了一處小東西，也盡量和同步一下。
1.同一頁(yè)面內(nèi)不同模塊描述
當(dāng)同一頁(yè)面內(nèi)存在多種狀態(tài)時(shí)，可畫(huà)一張全要素主頁(yè)面示意，其余針對(duì)不同模塊/狀態(tài)拆解后，單獨(dú)對(duì)比展示并補(bǔ)充交互說(shuō)明 2.頁(yè)面功能點(diǎn)邏輯規(guī)則描述對(duì)于頁(yè)面中的元素和功能點(diǎn)描述可采用數(shù)字標(biāo)號(hào)對(duì)應(yīng)的形式，若面功能點(diǎn)較多且存在關(guān)聯(lián)時(shí)，可分組標(biāo)號(hào)做統(tǒng)一說(shuō)明 3.頁(yè)面內(nèi)細(xì)節(jié)簡(jiǎn)短標(biāo)注描述用于描述頁(yè)面內(nèi)功能點(diǎn)及元素的簡(jiǎn)短說(shuō)明（20個(gè)字內(nèi)）大段說(shuō)明文字不建議用此方式（易干擾頁(yè)面）…
文章來(lái)源：站酷 作者：體驗(yàn)為王UX
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
