專業(yè)的交互輸出文檔應該怎么寫?
![](http://image.woshipm.com/wp-files/img/101.jpg)
交互輸出文檔里面最重要的是做設計時的多方面思考。
這篇文章的信息架構:
- 前言
- 交互輸出文檔的重要性
- 專業(yè)的交互文檔應該包含哪些內容
- 撰寫交互設計出文檔使用工具
- 后記
前言:用戶體驗部在大型的互聯網公司里面都是核心部門,交互設計師們都對接著各自的產品經理及項目,因業(yè)務不同,每個項目都有著各自的節(jié)奏和進展,勢必也導致交互輸出文檔的粗細度不同。本文通過一個專業(yè)交互文檔模版的例子,給大家講述如果規(guī)范自己的交互文檔?
交互輸出文檔的重要性
作為一名交互設計師,我們的重點工作職責是起到承上啟下的作用。
比如對接上游的產品經理和項目經理,跟他們討論過產品規(guī)劃及需求后,他們會根據交互設計師輸出的交互文檔來評審設計方案是否滿足用戶需求,以及在開發(fā)實施過程中的可行性;
其次要對接下游的視覺設計師和開發(fā)工程師,他們會根據交互文檔中的線框圖、交互細節(jié)說明等來輸出視覺設計稿、用代碼實現交互設計方案,并以此為依據完成落地實現等工作。所以交互設計師最重要的輸出物就是交互文檔,它是對接上下游的重要紐帶。
專業(yè)的交互文檔應該包含哪些內容
專業(yè)的交互文檔應該包含以下7點內容:完整的項目簡介、需求分析、新增修改紀錄、信息架構、交互設計的方案闡述、頁面交互流程圖(包含界面布局,操作手勢,反饋效果,元素的規(guī)則定義)、異常頁面和異常情況的說明。
1、完整的項目簡介
完整的項目簡介包含:項目的名稱,產品經理,交互設計師,視覺設計師,開發(fā),測試,團隊名稱,撰寫時間等,如下圖所示
2、需求分析
需求分析應該包含:功能需求和對需求分析理解,如下圖所示
3、新增修改紀錄
新增修改紀錄應該包含:新增交互和修改紀錄的來往版本說明,如下圖所示
4、信息架構
信息架構就是產品所呈現的信息層次,它由哪些部分組成,之間的邏輯關系是什么,表達信息結構可以使用mindmanager,xmind,百度腦圖等工具。由于注冊流程屬于小需求的優(yōu)化,可以不放信息架構,所以這里不做圖片展示。
5、交互設計的方案闡述
以注冊為例,先理解注冊的作用再談功能交互設計的方案闡述;
賬戶注冊的作用主要有三點:
- 唯一性:用戶戶注冊之后,用戶擁有特屬的個人中心,擁有自己獨特的軟件使用特性以此其他用戶做區(qū)分
- 可管理性:用戶注冊之后,公司可以根據注冊信息,賬戶信息,方便信息推送,當用戶很久不來的時候還可以發(fā)郵件 ? ? ? ? ?或者短信刷一下存在感,挽留用戶。
- 同步性:當用戶使用別的移動端時,只需要登錄注冊的賬戶即可得到所有的同步數據
注冊的四種常見設計方案:
- 無需注冊登錄界面。所有用戶均可使用,無個人中心和千人千面的概念(這類的app一般功能較簡單)。比如iOS系統自帶的工具類APP,像經常使用的鬧鐘、天氣、計算器等,以及一些簡單的第三方工具類的APP:電池先生,道德經app,榫卯等;
- 只用手機號注冊。這是我們目前目前使用較多的一種注冊登錄方式。用手機號碼注冊APP,通過短信的方式驗證,常見的例如理財類app和社交類app;
- 使用郵箱或者手機號注冊的即可完成;
- 使用郵箱或者手機號注冊以及支持第三方賬戶登錄。
針對以上的分析,然后結合自己的產品業(yè)務情況和市場定位找到一個最后適合自己產品的設計方案即可。
6、頁面交互流程圖(包含頁面布局,手勢操作,反饋效果,元素的規(guī)則定義)
(1)頁面布局
從頁面的布局可以看出產品的整體結構,幫助同事了解界面的功能展示和元素布局。頁面布局即對界面信息的設計。
(2)手勢操作
通過可交互元素去觸發(fā),這個過程需要手勢操作,常見手勢操作有 單擊,雙擊,左滑,右滑,長按,拖拽,滑動,下擊,抬起,夾捏等。
(3)反饋效果
根據用戶與界面之間發(fā)生的交互操作,產生的反饋效果,反饋效果按照頁面關系的維度可以分為兩類:一類是在當前頁面的反饋效果如點擊輸入框鍵盤調出光標閃爍,點擊同步按鈕,在當前頁面出現浮層動畫等等。另一類是跳轉到下一個頁面的反饋效果。
(4)頁面跳轉
將產品分解為多個任務,一般一個產品都有若干個主干任務,其他則是支干任務(微信的主干任務是即時聊天,朋友圈、搖一搖、購物、設置等都屬于支干任務)。在頁面流程圖上面,清楚的標注處通過怎么的操作跳轉到哪個界面。一般進入下一級界面是從右往左滑入,返回上一級界面通常是從左往右滑入 。對于特殊的跳轉效果要特殊說明。
(5)元素的規(guī)則定義
對于原型圖里面的關鍵字段等元素都要詳細說明,例如列表里面時間的定義規(guī)則。列表的排列邏輯,元素的展示邏輯,元素的極限情況
(6)其他細節(jié)
例如:正在加載狀態(tài)、加載完成有內容的狀態(tài)、加載完成無內容的空狀態(tài)、失敗狀態(tài)(比如網絡異常/權限未開啟)、不同角色的用戶看到的內容是否一樣、不同狀態(tài)的文案圖標變化。內容的加載方式,何時加載、何時顯示、何時刷新。
7、異常頁面和異常情況的說明
做交互原型時,先考慮正常情況,當正常情況全部做完了,接下來就可以開始畫所有的異常頁面和異常情況了
常見的異常頁面包含:數據為空的頁面、操作失敗的頁面、拉取數據失敗的頁面、頁面不存在的頁面
常見的異常情況包含:斷網狀態(tài)、服務器異常、操作失敗、字符限制、網絡切換(從wifi切換到移動數據)、權限限制,關鍵字段超行
綜上所述再給出幾點建議:
- 一個頁面一個任務:每一頁能展示的內容是有限的,如果同一頁中堆積太多的線框圖會造成問題
- 每個任務都有起點,一個任務應該從起點一直到該任務的結束整條路徑。
- 同一頁面的不同狀態(tài)最好在一個頁面展示(不要忽略極端情況)。
- 頁面布局規(guī)范,準確傳遞設計方案。
- 盡量黑白灰,避免原型圖對視覺設計師產生干擾。
撰寫交互設計出文檔使用工具
- 如果是大項目或者團隊協作的話,推薦使用Axure。Axure可以進行協作比較方便。
- 對于邏輯比較復雜的大需求,推薦使用Axure,Axure含有站點地圖,可以清晰體現出交互的頁面層級關系。同時可以很好的完成各個場景的跳轉。
- 對于網頁端交互而言,推薦使用Axure。pc端界面大,平鋪很多界面展示效果較差。
- 如果是小需求,推薦使用Sketch,sketch畫交互效率高
- 如果是制作交互動效demo,推薦使用flinto,protopie,princile。如果做交互提案推薦使用Keynote。
后記:
交互輸出文檔里面最重要的是做設計時的多方面思考。就像文章中里面的注冊,其實還有很多可以思考的,例如四種注冊的方案各自優(yōu)缺點,都可以細致去分析。當設計師養(yǎng)成把所有的都考慮清楚,然后權衡取舍。就可以做出一份高質量無邏輯問題的交互設計文檔了。
作者:UX,華為ITUX交互組組長 ?微信公眾號:UEDC
本文由 @UX 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載。
你好,請問有交互文檔模板嘛,方便發(fā)一下不?
您好,沒有在公司實習過,想看一份專業(yè)的交互文檔學習,不知道可不可以
網易的交互設計是真的很棒啊!
樓主能不能有空可以講一講有關數據交互、異常情況下的用戶引導、不同判斷條件下的交互流程、混合型開發(fā)頁面交互的選擇
好的,等我組件寫完了就寫這種類型
我剛接觸這個行業(yè),我總覺得跟著時代走才會不脫節(jié),所以我毅然決然一畢業(yè)就轉行進這個行業(yè)。我們總關注很多的公眾號,可是公眾號是怎么發(fā)布文呢?類似于這種我們現在接觸太多的交互了,就說APP吧,最近幾年,APP層出不窮,有些APP idea很棒可是做出來的效果確實不敢恭維,相信大家多多少少會有體會?,F在很多人遇到問題都是想著有沒有APP可以解決問題,而APP僅僅就靠一個idea開發(fā)出來就好了么?看了這篇文我理解的是:視覺是門面,交互是內在。好的內在才會有持久用戶,從而吸引更多的用戶!謝謝作者的分享,我這種小白也看懂了七八成,不說會實踐,至少了解了做交互的基本流程。
加油![:mrgreen:](http://m.codemsi.com/wp-includes/images/smilies/mrgreen.png)
那請問交互文檔和需求文檔的具體區(qū)別在哪嗎,我看到很多需求文檔的結構好像和交互文檔差不多
同一頁面下的正常情況和異常情況要放在一起表現出來嗎,如果畫上會不會太擁擠?
分排放,例如第一排是正常任務流程的頁面原型,往下面一排可以放異常頁面同時標志說明
學習了 一看就是大公司的配置 小公司基本一個產品經理全包了 細節(jié)肯定沒這么好
第二點需求分析 插錯圖了吧
確實插錯圖了,謝謝我改過來