萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 交互設計詳細說明文檔

交互設計詳細說明文檔

交互設計詳細說明文檔 三聯教程

  現狀分析

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

  目標及收益

  1.專業輸出物,提升自身專業度

  2.與開發團隊合作更默契,減少溝通成本且盡量避免信息遺漏與理解偏差,開發團隊可共同參考

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

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

  說明具體內容?

  復雜頁面間邏輯操作與復雜單頁面的操作邏輯

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

  鏈接與按鈕指向

  交互細節說明

  校驗

  文案

  需求調整

  舉例

  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.與前端同學根據實際情況面對面溝通落地規范取代逐一標注

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

  同時感謝hedi的建議

  文章來源:良無限-UED

copyright © 萬盛學電腦網 all rights reserved