交互設計輸出物標準

1、Powered by 阿里巴巴中文站 leo.lee簡單、高效、突出重點交互設計輸出物標準UED各階段輸出物為什么要對各階段輸出物的名稱進行修正？更加形象化的表達，體現(xiàn)專業(yè)性，減少歧義prototypemockupdemo交互原型視覺稿前端demo交互設計輸出物p表達交互設計內容p是產(chǎn)品原型設計過程中的階段性成果、過渡型交付p通過可視化產(chǎn)出使各方對設計范圍和內容有形象化的、統(tǒng)一的認知“輸出物是用以表述觀點和描述設計方案，本身不是設計的目的。”交互輸出物（Prototype）：什么時候提交輸出物？在向視覺設計或前端開發(fā)提交需求時，應附帶上傳完整的輸出物文檔，并在變更時保持附件更新為什么要標準化p

2、幫助交互設計師明確方案需要提供的內容及范圍，減少遺漏p減少溝通和銜接成本、提高工作效率標準化是為了：交互輸出物的類型規(guī)格Axure RP文檔（推薦）采用Axure RP交付輸出物，便于項目的版本持續(xù)更新、存檔以及團隊協(xié)作適用于：新項目或復雜項目；有多人參與設計的項目PNG或PSD等圖片格式（推薦）如果需求是建立于現(xiàn)有的產(chǎn)品之上，也可根據(jù)現(xiàn)有視覺規(guī)范直接提供視覺輸出物，請參考慧慧的視覺輸出物標準化文檔適用于：已有明確視覺規(guī)范的現(xiàn)有產(chǎn)品和功能頁面，或小需求處理文本描述如果需求涉及修改比較小，如修改或增加模塊，并無新增視覺樣式，則可以直接提交設計描述即可。適用于：文本描述或口頭表述已經(jīng)可以描述清楚的

3、需求輸出物標準化做什么和不做什么做什么：明確交互輸出物應涵蓋的內容示例說明交互輸出物應描述的關鍵信息和重要邏輯整理視覺設計和前端開發(fā)對交互輸出物的需求不做什么：本文檔只提供交互輸出物的建議內容和標注方式范例，并不強制統(tǒng)一，設計師可針對項目的實際情況選擇性參考交互輸出物的設計原則簡單、高效、突出重點簡單：提交的Demo應簡潔明了，便于閱讀和理解高效：避免繁復的界面設計，關注界面的狀態(tài)和邏輯突出重點：有的放矢，對于設計重點要表述清晰和完整輸出物可能涵蓋的內容1、版本記錄及說明：(可選)2、頁面名稱：按照實際頁面標題命名3、流程頁面/狀態(tài)/系統(tǒng)異常：無結果、少結果、多結果等4、操作反饋及校驗：系統(tǒng)反

4、饋信息、錯誤校驗，系統(tǒng)異常處理等5、流程圖：(可選)如何進行標注（1）1、標注位置就近原則建議不要將標注填寫在Axure RP的page note或者specification將標注寫在頁面需要說明的位置，有助于視覺或前端直觀查看重要的說明信息，也便于發(fā)布為圖片格式進行分發(fā)時，信息不會丟失2、關鍵信息和重要邏輯才需進行標注首先，輸出物并不能取代面對面的溝通；其次，交付物標準化的主要目的是“幫助交互設計師明確頁面設計需求，減少遺漏，幫助視覺、前端明確細節(jié)、提高工作效率”，過多說明和標注不利于工作效率因此，交付物中應只對重要、關鍵，并且Demo無法直觀瀏覽的界面或狀態(tài)進行說明，在交付和跟進過程中，

5、仍應和視覺及前端就Demo進行充分的溝通。如何進行標注（2）3、如非必要，無需使用動態(tài)面板和腳本什么時候需要制作動作腳本？輸出物需要向其他人演示實際交互邏輯，或靜態(tài)頁面無法表述交互過程時其他情況下應避免使用動態(tài)面板和腳本，原因：1、交互設計師應更關注設計要解決的問題，而不是在Demo中的效果2、添加的動作效果，在視覺或前端查看Demo時，可能會忽略隱藏的面板和邏輯如何進行標注（3）4、靈活的標注方式每位交互設計師在具體的Demo標注中可以采取自己適合的方式填寫描述和說明基本原則是：標注信息的位置建議在Demo主體之外；在一個Demo中標注應該采用一致的樣式外觀，視覺樣式明顯區(qū)別于控件元素如何進

6、行標注（4）1、氣泡標注常見標注示例2、框線標注3、箭頭指向標注p 多人參與交互設計過程p 設計分期進行p 以及其他有版本追溯需求的情況什么時候需要版本記錄？基于頁面的流程圖能夠幫助設計師和前端快速了解開發(fā)需求，及頁面直接的邏輯關系建議在大型項目中，或包含流程頁面的需求中添加流程圖，并在流程圖中鏈接相應的頁面但在多數(shù)項目輸出物中，流程圖都是可選的流程圖是必要的嗎？1.零結果、少結果及多結果2.內容顯示與隱藏，如不同等級會員的用戶界面的差異3.Tab控件4.控件的禁用、激活以及修改，如在提交表單過程中，禁用提交按鈕5.增加、編輯、刪除、查找流程/頁面/狀態(tài)最為常見的情況就是在一個數(shù)據(jù)展示頁面，可

7、能出現(xiàn)無結果的情況，需要針對實際情況來對無結果頁面進行適當?shù)恼f明和引導；如果可能出現(xiàn)大量數(shù)據(jù)的情況，還需要考慮是否使用翻頁或其他兼容方式（滾動條或AJAX應需加載）流程/頁面/狀態(tài)標注示例1. 零結果、少結果及多結果如果Demo中存在隱藏狀態(tài)的界面元素，建議在Demo中直接繪制出來，以便視覺和前端查看，只需在Demo中補充說明顯示和隱藏的觸發(fā)條件、出現(xiàn)方式即可Demo by 羅偉 from“ETC detail修改需求”流程/頁面/狀態(tài)標注示例2、內容顯示與隱藏Tab是在小空間內顯示大量信息而經(jīng)常使用的控件，在使用該控件時，請考慮以下問題并進行標注：1、Tab模式：當前頁面切換內容，還是打開新

8、頁面2、Tab的觸發(fā)是：鼠標hover（是否需要延時）、單擊3、Tab下內容加載方式：內容初始隱藏、內容預加載、Tab觸發(fā)后AJAX加載流程/頁面/狀態(tài)標注示例3、Tab控件在界面交互過程中，可能需要對于空間進行控制和修改，如示例中某些狀態(tài)下，“新增”按鈕不可用，需要置灰處理；或者信息后面的“全部”按鈕點擊展開內容后，label會更改為“關閉”流程/頁面/狀態(tài)標注示例4、控件的禁用、激活、以及修改在任何需要展示批量數(shù)據(jù)的情況下，請考慮是否需要增、刪、改、查等邏輯流程/頁面/狀態(tài)標注示例5、增加、編輯、刪除、查找p系統(tǒng)原因，不能顯示相應頁面或數(shù)據(jù)p用戶等級權限不足以查看和顯示某些功能系統(tǒng)異常/權

9、限處理在界面交互過程中，可能需要對于空間進行控制和修改，如示例中某些狀態(tài)下，“新增”按鈕不可用，需要置灰處理；或者信息后面的“全部”按鈕點擊展開內容后，label會更改為“關閉”系統(tǒng)異常/權限處理系統(tǒng)原因，不能顯示相應頁面或數(shù)據(jù)如上圖中，如訪問者不是當前旺鋪的會員，則無法查看會員價格在項目中也經(jīng)常遇到針對不同級別的會員（TP、free或旺鋪會員等級）有不同的界面內容，需要再Demo中考慮完善。系統(tǒng)異常/權限處理用戶等級權限不足根據(jù)提交數(shù)據(jù)的要求、預估可能出現(xiàn)的用戶提交錯誤情況及如何校驗p采用何種校驗方式：提交后服務器校驗、觸發(fā)校驗、AJAX或者在控件層面限制輸入數(shù)據(jù)類型p各種錯誤輸入情況下，相應的提示信息及其展示p每次校驗存在多種錯誤的情況下，校驗的先后順序以及提示信息的優(yōu)先順序p錯誤或反饋信息如何顯示及隱藏反饋及校驗如上圖中，如訪問者不是當前旺鋪的會員，則無法查看會員價格在項目中也經(jīng)常遇到針對不同級別的會員（TP、free或旺鋪會員等級）有不同的界面內容，需要再Demo中考慮完善。反饋及校驗校驗示例p彈出對話框是采用模式對話框，還是非模式對話框（是否需要遮罩層，如何關閉對話框）p如何觸發(fā)改變狀態(tài)，單擊或者鼠標hover？如果是鼠標hover，是否有必要進行延時處理。如通常采用延遲0.3-0.5秒再觸發(fā)tab切換，以避免用戶鼠標無意識