【干貨】交互設計方案規(guī)范（附sketch輸出模版）

cxz23

上海/產(chǎn)品設計師/5年前/1006瀏覽

版權(quán)

cxz23

從內(nèi)容和形式角度，分享一份合格的交互輸出方案的打開方式～

1. 背景

1.1 針對問題：

【用戶】設計稿內(nèi)容形式千人千面，影響方案傳達的品質(zhì)，有障于查閱體驗；
【設計師】在方案呈現(xiàn)上，設計師會浪費一定精力（例如要涵蓋哪些類目？結(jié)構(gòu)復雜的方案如何拆解表現(xiàn)？設計說明寫哪些方面，要細到什么程度？如何標注排版等）
【備忘】目前內(nèi)容上不夠體系化，不利于設計方案的系統(tǒng)性追溯，例如缺少設計構(gòu)思的記錄沉淀。幫助你理清思路，并記錄下來，便于回顧。

1.2 應對方案：

把自己的設計稿當做產(chǎn)品去經(jīng)營，確保邏輯嚴謹，清晰明確；美觀適用，便于迭代和協(xié)同；保證用戶體驗。

目標：01.從內(nèi)容以及形式上構(gòu)建一致性，輸出一套交互設計稿模版，提升查閱品質(zhì)；提高設計師出稿效率，幫其理清思路并記錄下來，便于回顧。
版本：完整版，簡單版
定義內(nèi)容：內(nèi)容結(jié)構(gòu)，版式布局，交互說明規(guī)則，標注形式等
輸出物：sketch（見附件1），Axure（待補充）

2. 內(nèi)容構(gòu)成

可區(qū)分完整版和簡版，對比如下：


版本/內(nèi)容		完整版	簡版	備注
概覽（簡介）	名稱/版本/成員
版本記錄
圖例說明
設計分析	需求分析（問題/目標/需求點）			需求的價值和原因，即做什么？
設計思路（應對方案/側(cè)重點）		可選	即怎么做（推導出的具象策略）
研究&分析結(jié)論		可選	即交互支撐點（備份分析結(jié)論，支撐設計方案）
交互方案	結(jié)構(gòu)圖（頁面結(jié)構(gòu)圖/操作流程圖）		可選	結(jié)構(gòu)層，邏輯層
頁面交互圖			交互原型圖
通用說明	規(guī)范組件/通用模塊		可選	規(guī)范，可復用的模塊
廢棄站	過程稿件		可選

應用決策：

結(jié)合需求的“重要評級”和需求實際情況（復雜程度/類型/緊急程度）來決策，靈活選用：

基于重要評級：S級應用完整版，A優(yōu)先應用完整版，B級允許應用簡單版；
結(jié)合復雜程度：若定義為B級，且結(jié)構(gòu)復雜或需求類型需要，可在簡版基礎上增加內(nèi)容維度，反之，可適當簡化內(nèi)容維度，但不能完全降級。
結(jié)合時間緊急程度：同理，在評級和復雜度基礎上，可結(jié)合考慮交稿日期，可適當簡化輔助性的內(nèi)容維護。
注意：項目評級請具體參照附件-UED設計評級

3. 內(nèi)容說明

結(jié)合內(nèi)容構(gòu)成，分別具體說明如下：

3.1 概覽：

記錄需求的基本情況：如需求名稱，參與成員，版本記錄和通用圖例。

需求名稱：統(tǒng)一規(guī)范，簡明扼要。命名格式同iwork，例如：【業(yè)務線】版本號_本次需求名稱。

版本記錄：即更新日志。為迭代而生，便于快速定位，追溯和溝通。錄入建議如下：

倒序排列，最新版本（即3，2，1）放置最上方，便于查閱；
發(fā)布內(nèi)容簡明且條理清晰，建議標記【增】【改】【刪】；格式如：【增/改/刪】模塊范圍（編號+名稱）：內(nèi)容簡述；
備注：必要時在此記錄關聯(lián)信息，如狀態(tài)”定稿版“，超鏈接，過程情況等。

圖例說明：為了讀者便于理解，匯總設計稿中所涉及的標識的輔助說明。如：操作/跳轉(zhuǎn)圖例、標簽圖例、流程圖例以及手勢操作圖例等。

3.2 設計分析：

【推導過程完整化結(jié)構(gòu)化，便于理清思路，明確方向，回溯總結(jié)】記錄庖丁解牛的分析決策過程，并結(jié)構(gòu)化呈現(xiàn)出來，有利于讀者了解其來龍去脈。提高設計方案的說服力。也利于設計師本人思路的梳理和方案的完整回顧，從而培養(yǎng)產(chǎn)品思維和體驗思維。

主要包含以下3部分：

需求分析：即基于原始需求信息分析得到的需求情況，重點關注需求的背景，目的以及需求范圍，便于明確要做什么？為什么做這個，以確保統(tǒng)一戰(zhàn)線。

設計思路：即設計目標，側(cè)重點，應對策略，風險問題等。通過設計分析，明確怎么做的問題，為方案設計打好基石。

調(diào)研分析：基于具體需求類型，附錄相關的研究分析結(jié)論，或者數(shù)據(jù)情況。（例如用戶畫像，競品分析，用戶體驗地圖，數(shù)據(jù)分析，舊版分析等）

注：可根據(jù)實際需要，靈活擴展或收斂。

3.3 交互方案：

此部分是設計稿的核心，內(nèi)容可分為：信息架構(gòu)圖和頁面交互圖。

信息架構(gòu)圖：是用戶體驗的結(jié)構(gòu)層，信息的骨架，利于全局縱覽?？删呦鬄椤绊撁娼Y(jié)構(gòu)圖”和“操作流程圖”：頁面結(jié)構(gòu)圖，意在表達需由哪些部分構(gòu)成；操作流程圖重在清晰且直觀的闡述某功能層面的邏輯信息。有助于幫助我們梳理邏輯，避免遺漏。注意事項如下：

內(nèi)容是否要涉及“頁面結(jié)構(gòu)圖”或“操作流程圖”，基于需求的實際需要來定奪。例如涉及結(jié)構(gòu)優(yōu)化，信息層級相對復雜，建議設計方案里包含頁面結(jié)構(gòu)圖，反之可以不體現(xiàn)結(jié)構(gòu)圖。
針對內(nèi)容結(jié)構(gòu)的復雜程度，可基于邏輯關系進行拆解分類，避免雜亂無章，查閱者看不懂。
工具：除模版內(nèi)提供的線框圖外，Axure自動生成外，允許在第三方工具內(nèi)完成繪制，并插入至此，例如頁面結(jié)構(gòu)圖-幕布，百度腦圖，X-mind；流程圖軟件-Creately等

頁面交互圖：具象到頁面級，通過圖文并茂來表述設計方案。內(nèi)容主要包含：模塊名稱，各頁面標題+頁面原型，設計說明，圖形標注。注意事項如下：

命名編號：為便于查找匹配，拆分的模塊以及其內(nèi)的各頁面需按邏輯關系來編號命名。如1_模塊1名稱，1.1_模塊內(nèi)某頁面名稱，2_模塊2... ；02.具體頁面名稱上建議體現(xiàn)路徑關系，例如：1.2_父級頁名稱>子級名稱。
【內(nèi)容結(jié)構(gòu)】結(jié)構(gòu)要清晰明確，對應信息架構(gòu)圖，結(jié)合產(chǎn)品結(jié)構(gòu)進行頁面劃分；邏輯嚴謹，美觀適用，不重復不遺漏。
排版布局：建議橫向排版主流程，縱向排版輔助或分支流程頁面；各頁面原型圖下邊排放交互說明；確保頁面布局規(guī)范，有效傳遞設計方案。
原型稿： 01.原型圖只需畫出主流程線即可，其余的可以體現(xiàn)在交互說名里，這樣避免雜亂；02.設計稿子盡量使用真實數(shù)據(jù)；03.相對簡單明確的邏輯流程，可省略不畫跳轉(zhuǎn)指向(flow line)，盡量不干擾主體原型內(nèi)容，保持簡潔。
圖形標注：01.布局整齊有序，盡量不要干擾到設計稿的主體內(nèi)容；02.統(tǒng)一樣式，與圖例對應；同一個設計稿中布局樣式統(tǒng)一；03.盡量標記出較出稿“修改”，新增或待細化等狀態(tài)，方便定位。
設計說明：01.與標注編號一一對應；02. 內(nèi)容條理清晰，定義明確，描述簡潔易懂，用詞準確無歧義（交代清楚，避免查閱者看不明白）；03.規(guī)則類別：簡介，操作流程（對象，場景條件，行為，狀態(tài)，反饋），適配樣式，限制條件，異常情況等；04.核心說明，建議圖文并茂（局部示例圖/流程圖）；05. 通用規(guī)則盡量復用（或引用）提高輸出效率；；06.文本格式：最子級條目使用無序列符合標記“.”，強調(diào)內(nèi)容建議用大括號（“【】”）標記，引用內(nèi)容用“”。