交互設(shè)計(jì)輸出物標(biāo)準(zhǔn)

Powered

by

阿里巴巴中文站leo.lee簡單、高效、突出重點(diǎn)Alpha交互設(shè)計(jì)輸出物標(biāo)準(zhǔn)1

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

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

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