交互設計詳細說明文檔

時間：2012-08-01 來源： 阿里巴巴良無限UPD團隊  做者：阿里巴巴良無限UPD團

　現狀分析

　　目前交互設計師產出的原型圖缺乏詳細的說明文檔，易形成溝通成本大及質量風險，這也是咱們去作這件事的初衷。

　目標及收益

　　1.專業輸出物，提高自身專業度

　　2.與開發團隊合做更默契，減小溝通成本且儘可能避免信息遺漏與理解誤差，開發團隊可共同參考

　　3.界面驗收時的清單(前端開發的demo評審\項目功能預演\項目測試)

　　4.項目改版或換設計師時便於查閱

　說明具體內容?

　　1 複雜頁面間邏輯操做與複雜單頁面的操做邏輯

　　2 字符限制(必填選填 \ 字符顯示數量)

　　3 連接與按鈕指向

　　4 交互細節說明

　　5 校驗

　　6 文案

　　7 需求調整

　舉例

　　1 複雜頁面間邏輯操做與複雜單頁面的操做邏輯

　　(1)複雜頁面間的邏輯關係

　　(2)複雜單獨頁面的邏輯

　　2 字符限制

　　(1)頁面必填字段應標註說明，統一在字段前標註「*」，選填無需特別標註

　　(2)爲提升空間利用率，某些表格單元格內僅顯示預覽字段，更多信息須要滑過以tips的形式顯示全。

　　說明需傳達清楚：1.是否作限制2.若是限制，多少字出現截斷3.截斷後是顯示爲省略號仍是不顯示

　　3 連接與按鈕指向

　　(1)你須要將頁面上的每一個關鍵連接事件或每一個按鈕事件標識清楚。它們有的指向你安排的某個頁面，有的操做產生了一個結果反饋……(page flow—頁面流是交互設計師的職責)

　　(2)注意操做有時受狀態影響，也須要將其對應關係標註出來

　　4 交互細節說明

　　你能夠在這裏說明任何你想要的效果。你的合做者也只需用10分鐘時間閱讀完畢，標註出與他工做相關的重點。找不到你人時隨時可作參考。(圖片來源於hedi alibaba國際站交互說明圖)

　　5 校驗

　　表單或列表裏經常會出現校驗，它一樣起到引導用戶的做用，有沒有特殊格式限制?字數限制?這裏的觸發需不須要聯動校驗?如「請輸入正確的郵件格式「等

　　6 文案

　　(1)操做提示信息文案，如操做成功，彈出「選品表提交成功「;或引導提示類信息，如：

　　(2)字段的名稱需推敲，特別注意產品裏相同釋義字段需統一;但也不能一律而論，如什麼時候叫「貨品」，什麼時候叫「商品」

　　7 需求調整

　　請標註修改提出人、修改緣由、詳細修改內容及波及到的相關全部頁面，好比一個字段的調整可能會波及到相關不少頁面的調整

　　一些重要的事

　　●完美的標註文檔，永遠沒法取代面對面的溝通

　　●文檔是爲解決問題

　　●標註形式你們看明白便可，或者你有什麼更好的經驗，記得分享

　　●小項目或小需求，針對交互交付物規範，我的以爲不能僅僅由於時間而折扣，敏捷永遠不能以損失質量爲前提

　　兩種解決方案：

　　1.交互設計師評估更多時間用來我的完善說明文檔

　　2.與前端同窗根據實際狀況面對面溝通落地規範取代逐一標註

　　●兩個角色，交互是主要撰寫者及維護者;前端開發是意見提出者與修訂者，可以有效解決設計和前端可行性的衝突