交互設(shè)計輸出物標準

Powered

by

阿里巴巴中文站leo.lee簡單、高效、突出重點Alpha交互設(shè)計輸出物標準1

2UED各階段輸出物為什么要對各階段輸出物的名稱進行修正？更加形象化的表達，體現(xiàn)專業(yè)性，減少歧義prototypemockupdemo交互原型視覺稿前端demo22024/5/13交互設(shè)計輸出物表達交互設(shè)計內(nèi)容是產(chǎn)品原型設(shè)計過程中的階段性成果、過渡型交付通過可視化產(chǎn)出使各方對設(shè)計范圍和內(nèi)容有形象化的、統(tǒng)一的認知“輸出物是用以表述觀點和描述設(shè)計方案，本身不是設(shè)計的目的?！苯换ポ敵鑫铮≒rototype）：什么時候提交輸出物？在向視覺設(shè)計或前端開發(fā)提交需求時，應(yīng)附帶上傳完整的輸出物文檔，并在變更時保持附件更新32024/5/13為什么要標準化幫助交互設(shè)計師明確方案需要提供的內(nèi)容及范圍，減少遺漏減少溝通和銜接成本、提高工作效率標準化是為了：42024/5/13交互輸出物的類型規(guī)格AxureRP文檔（推薦）采用AxureRP交付輸出物，便于項目的版本持續(xù)更新、存檔以及團隊協(xié)作適用于：新項目或復(fù)雜項目；有多人參與設(shè)計的項目PNG或PSD等圖片格式（推薦）如果需求是建立于現(xiàn)有的產(chǎn)品之上，也可根據(jù)現(xiàn)有視覺規(guī)范直接提供視覺輸出物，請參考慧慧的視覺輸出物標準化文檔適用于：已有明確視覺規(guī)范的現(xiàn)有產(chǎn)品和功能頁面，或小需求處理文本描述如果需求涉及修改比較小，如修改或增加模塊，并無新增視覺樣式，則可以直接提交設(shè)計描述即可。適用于：文本描述或口頭表述已經(jīng)可以描述清楚的需求52024/5/13輸出物標準化做什么和不做什么做什么：明確交互輸出物應(yīng)涵蓋的內(nèi)容示例說明交互輸出物應(yīng)描述的關(guān)鍵信息和重要邏輯整理視覺設(shè)計和前端開發(fā)對交互輸出物的需求不做什么：本文檔只提供交互輸出物的建議內(nèi)容和標注方式范例，并不強制統(tǒng)一，設(shè)計師可針對項目的實際情況選擇性參考62024/5/13交互輸出物的設(shè)計原則簡單、高效、突出重點簡單：提交的Demo應(yīng)簡潔明了，便于閱讀和理解高效：避免繁復(fù)的界面設(shè)計，關(guān)注界面的狀態(tài)和邏輯突出重點：有的放矢，對于設(shè)計重點要表述清晰和完整72024/5/13輸出物可能涵蓋的內(nèi)容1、版本記錄及說明：(可選)2、頁面名稱：按照實際頁面標題命名3、流程頁面/狀態(tài)/系統(tǒng)異常：無結(jié)果、少結(jié)果、多結(jié)果等4、操作反饋及校驗：系統(tǒng)反饋信息、錯誤校驗，系統(tǒng)異常處理等5、流程圖：(可選)82024/5/13如何進行標注（1）1、標注位置就近原則建議不要將標注填寫在AxureRP的page

note或者specification將標注寫在頁面需要說明的位置，有助于視覺或前端直觀查看重要的說明信息，也便于發(fā)布為圖片格式進行分發(fā)時，信息不會丟失92024/5/132、關(guān)鍵信息和重要邏輯才需進行標注首先，輸出物并不能取代面對面的溝通；其次，交付物標準化的主要目的是“幫助交互設(shè)計師明確頁面設(shè)計需求，減少遺漏，幫助視覺、前端明確細節(jié)、提高工作效率”，過多說明和標注不利于工作效率因此，交付物中應(yīng)只對重要、關(guān)鍵，并且Demo無法直觀瀏覽的界面或狀態(tài)進行說明，在交付和跟進過程中，仍應(yīng)和視覺及前端就Demo進行充分的溝通。如何進行標注（2）102024/5/133、如非必要，無需使用動態(tài)面板和腳本什么時候需要制作動作腳本？輸出物需要向其他人演示實際交互邏輯，或靜態(tài)頁面無法表述交互過程時其他情況下應(yīng)避免使用動態(tài)面板和腳本，原因：1、交互設(shè)計師應(yīng)更關(guān)注設(shè)計要解決的問題，而不是在Demo中的效果2、添加的動作效果，在視覺或前端查看Demo時，可能會忽略隱藏的面板和邏輯如何進行標注（3）112024/5/134、靈活的標注方式每位交互設(shè)計師在具體的Demo標注中可以采取自己適合的方式填寫描述和說明基本原則是：標注信息的位置建議在Demo主體之外；在一個Demo中標注應(yīng)該采用一致的樣式外觀，視覺樣式明顯區(qū)別于控件元素如何進行標注（4）122024/5/131、氣泡標注常見標注示例2、框線標注3、箭頭指向標注132024/5/13多人參與交互設(shè)計過程設(shè)計分期進行以及其他有版本追溯需求的情況什么時候需要版本記錄？142024/5/13基于頁面的流程圖能夠幫助設(shè)計師和前端快速了解開發(fā)需求，及頁面直接的邏輯關(guān)系建議在大型項目中，或包含流程頁面的需求中添加流程圖，并在流程圖中鏈接相應(yīng)的頁面但在多數(shù)項目輸出物中，流程圖都是可選的流程圖是必要的嗎？152024/5/13零結(jié)果、少結(jié)果及多結(jié)果內(nèi)容顯示與隱藏，如不同等級會員的用戶界面的差異Tab控件控件的禁用、激活以及修改，如在提交表單過程中，禁用提交按鈕增加、編輯、刪除、查找流程/頁面/狀態(tài)162024/5/13最為常見的情況就是在一個數(shù)據(jù)展示頁面，可能出現(xiàn)無結(jié)果的情況，需要針對實際情況來對無結(jié)果頁面進行適當?shù)恼f明和引導(dǎo)；如果可能出現(xiàn)大量數(shù)據(jù)的情況，還需要考慮是否使用翻頁或其他兼容方式（滾動條或AJAX應(yīng)需加載）流程/頁面/狀態(tài)標注示例零結(jié)果、少結(jié)果及多結(jié)果172024/5/13如果Demo中存在隱藏狀態(tài)的界面元素，建議在Demo中直接繪制出來，以便視覺和前端查看，只需在Demo中補充說明顯示和隱藏的觸發(fā)條件、出現(xiàn)方式即可Demo

by羅偉from“ETCdetail修改需求”流程/頁面/狀態(tài)標注示例2、內(nèi)容顯示與隱藏182024/5/13Tab是在小空間內(nèi)顯示大量信息而經(jīng)常使用的控件，在使用該控件時，請考慮以下問題并進行標注：1、Tab模式：當前頁面切換內(nèi)容，還是打開新頁面2、Tab的觸發(fā)是：鼠標hover（是否需要延時）、單擊3、Tab下內(nèi)容加載方式：內(nèi)容初始隱藏、內(nèi)容預(yù)加載、Tab觸發(fā)后AJAX加載流程/頁面/狀態(tài)標注示例3、Tab控件192024/5/13在界面交互過程中，可能需要對于空間進行控制和修改，如示例中某些狀態(tài)下，“新增”按鈕不可用，需要置灰處理；或者信息后面的“全部”按鈕點擊展開內(nèi)容后，label會更改為“關(guān)閉”流程/頁面/狀態(tài)標注示例4、控件的禁用、激活、以及修改202024/5/13在任何需要展示批量數(shù)據(jù)的情況下，請考慮是否需要增、刪、改、查等邏輯流程/頁面/狀態(tài)標注示例5、增加、編輯、刪除、查找212024/5/13系統(tǒng)原因，不能顯示相應(yīng)頁面或數(shù)據(jù)用戶等級權(quán)限不足以查看和顯示某些功能系統(tǒng)異常/權(quán)限處理222024/5/13在界面交互過程中，可能需要對于空間進行控制和修改，如示例中某些狀態(tài)下，“新增”按鈕不可用，需要置灰處理；或者信息后面的“全部”按鈕點擊展開內(nèi)容后，label會更改為“關(guān)閉”系統(tǒng)異常/權(quán)限處理系統(tǒng)原因，不能顯示相應(yīng)頁面或數(shù)據(jù)232024/5/13如上圖中，如訪問者不是當前旺鋪的會員，則無法查看會員價格在項目中也經(jīng)常遇到針對不同級別的會員（TP、free或旺鋪會員等級）有不同的界面內(nèi)容，需要再Demo中考慮完善。系統(tǒng)異常/權(quán)限處理用戶等級權(quán)限不足242024/5/13根據(jù)提交數(shù)據(jù)的要求、預(yù)估可能出現(xiàn)的用戶提交錯誤情況及如何校驗采用何種校驗方式：提交后服務(wù)器校驗、觸發(fā)校驗、AJAX或者在控件層面限制輸入數(shù)據(jù)類型各種錯誤輸入情況下，相應(yīng)的提示信息及其展示每次校驗存在多種錯誤的情況下，校驗的先后順序以及提示信息的優(yōu)先順序錯誤或反饋信息如何顯示及隱藏反饋及校驗252024/5/13如上圖中，如訪問者不是當前旺鋪的會員，則無法查看會員價格在項目中也經(jīng)常遇到針對不同級別的會員（TP、free或旺鋪會員等級）有不同的界面內(nèi)容，需要再Demo中考慮完善。反饋及校驗校驗示例262024/5/13彈出對話框是采用模式對話框，還是非模式對話框（是否需要遮罩層，如何關(guān)閉對話框）如何觸發(fā)改變狀態(tài)，單擊或者鼠標hover？如果是鼠標hover，是否有必要進行延時處理。如通常采用延遲0.3-0.5秒再觸發(fā)tab切換，以避免用戶鼠標無意識劃過時的