如何輸出一份會(huì)表達(dá)的交互文檔
不同的公司會(huì)有不同的工作流程,根據(jù)項(xiàng)目、流程等實(shí)際情況來(lái)設(shè)計(jì)適合自己的交互設(shè)計(jì)文檔。
在項(xiàng)目設(shè)計(jì)中,交互設(shè)計(jì)師與上游的產(chǎn)品經(jīng)理,下游的視覺(jué)設(shè)計(jì)師,開(kāi)發(fā)工程師和測(cè)試等崗位的工作密不可分。不論是承上啟下的工作溝通, 還是方案評(píng)審的設(shè)計(jì)講解,專(zhuān)業(yè)的交互設(shè)計(jì)師應(yīng)該具備優(yōu)秀的表達(dá)能力,不僅是語(yǔ)言方面的表達(dá),交互文檔的表達(dá)也尤其重要。交互文檔是對(duì)接上下游崗位,利于協(xié)同團(tuán)隊(duì)工作的重要輸出件。(本文會(huì)以Axure軟件輸出形式舉例說(shuō)明)
一、交互文檔的輸出原則
交互文檔本身就相當(dāng)于一個(gè)產(chǎn)品,我們要考慮到上下游不同崗位(目標(biāo)用戶)對(duì)交互文檔的不同需求(用戶目標(biāo)),交互文檔輸出原則(設(shè)計(jì)目標(biāo)),在文檔的結(jié)構(gòu),內(nèi)容和形式上可總結(jié)為三大原則:
1. 邏輯嚴(yán)謹(jǐn),文本簡(jiǎn)明
邏輯混亂的文字表達(dá)通常會(huì)顯得比較啰嗦,甚至?xí)屓瞬恢滥阋磉_(dá)的是什么,降低了閱讀效率,也增大了溝通成本。交互文檔的整體內(nèi)容結(jié)構(gòu)與頁(yè)面內(nèi)容結(jié)構(gòu)(文字關(guān)系)的書(shū)寫(xiě)要思路清晰,邏輯嚴(yán)謹(jǐn),簡(jiǎn)明扼要,并盡可能的做到“不重復(fù),不遺漏”將交互設(shè)計(jì)的思路和方案更好的可視化。當(dāng)然,邏輯和文本的表達(dá)都是可以訓(xùn)練的,日常生活中我們也應(yīng)該注意這方面的培養(yǎng)與提升。
2. 便于迭代,利于協(xié)同
剛?cè)胄械臅r(shí)候我是一名UI設(shè)計(jì)師,我的第一份交互文檔是用PS做的,在PS里輸出圖片再粘貼到Axure上,首先是文檔管理起來(lái)很麻煩,其次是編輯起來(lái)不方便,迭代修改都要找到對(duì)應(yīng)頁(yè)面的PS源文件修改后再轉(zhuǎn)移到Axure,工作效率大大降低。交互稿在方便別人的同時(shí),也應(yīng)該方便自己,而我卻忘記了自己也是這個(gè)產(chǎn)品的用戶。
文章開(kāi)始說(shuō)到交互文檔是對(duì)接上下游利于協(xié)同團(tuán)隊(duì)工作的重要輸出件,所以文檔應(yīng)該保證利于其他崗位人員的查看或編輯的。如在文檔格式方面,如果你是用Axure做設(shè)計(jì),發(fā)給對(duì)方源文件外也要生成一份HTML文件,這樣就算對(duì)方?jīng)]有Axure軟件,也可以順利打開(kāi)。
3. 美即適用?
美國(guó)心理學(xué)家丹尼爾·麥克尼爾提出美即好效應(yīng):“對(duì)一個(gè)外表英俊漂亮的人,人們很容易誤認(rèn)為他或她的其他方面也很不錯(cuò)?!?/p>
交互文檔不僅要邏輯“美”,表現(xiàn)層面也要考慮視覺(jué)上的美,可以從圖文排版、字體大小、明暗層次等方面去考慮。輸出一份美的交互文檔從視覺(jué)上來(lái)說(shuō)還能潛移默化的促進(jìn)人們形成正面積極的態(tài)度,積極的態(tài)度會(huì)使你的交互評(píng)審更高效,也會(huì)提升程序大哥們寫(xiě)代碼過(guò)程中的愉悅感。當(dāng)然,追求美的產(chǎn)出也應(yīng)該是設(shè)計(jì)師的職業(yè)素養(yǎng)。
二、交互文檔的結(jié)構(gòu)與內(nèi)容
下面我簡(jiǎn)單介紹下交互文檔的輸出思路,供大家學(xué)習(xí)參考。這里要注意的是,每位設(shè)計(jì)師要根據(jù)公司實(shí)際工作情況來(lái)定文檔的樣式,有針對(duì)性地進(jìn)行設(shè)計(jì)輸出。
文檔的整體結(jié)構(gòu)可以理解為圖書(shū)中的目錄部分,下圖是我整理的一份文檔結(jié)構(gòu)模板,分為文檔封面、更新日志、設(shè)計(jì)思路、需求表、交互稿、廢紙簍六個(gè)部分。必要時(shí),還可包含信息架構(gòu)、交互規(guī)范說(shuō)明、頁(yè)面流程圖等部分。
1. 文檔封面
這個(gè)部分呈現(xiàn)產(chǎn)品簡(jiǎn)介,包含版本信息、參與人員等基本信息。
2. 更新日志
在項(xiàng)目中設(shè)計(jì)方案的修改和優(yōu)化是不可避免的,方案有調(diào)整時(shí)更新日志就比較重要了。更新日志可以清晰記錄新增或修改了哪個(gè)具體頁(yè)面,新增或修改的內(nèi)容是什么,日期、版本……這樣項(xiàng)目成員就可以一目了然關(guān)注到重點(diǎn)修改更新信息,提升了工作效率。
3. 設(shè)計(jì)思路
這一部分在交互評(píng)審會(huì)中尤為重要,因?yàn)閰⒓釉u(píng)審的人很可能還不了解這個(gè)項(xiàng)目,如果我們會(huì)上直接講方案,忽略設(shè)計(jì)思路的講解,評(píng)審的過(guò)程就很可能局限在了布局排版上,評(píng)審也就沒(méi)有了意義。將設(shè)計(jì)過(guò)程更加結(jié)構(gòu)化呈現(xiàn)出來(lái),如概述項(xiàng)目背景、目標(biāo)用戶、產(chǎn)品目標(biāo)、場(chǎng)景分析、用戶目標(biāo) 、設(shè)計(jì)目標(biāo)與設(shè)計(jì)思路(如圖),方便他人理解整個(gè)項(xiàng)目背景下的設(shè)計(jì)思路,也方便以后回溯總結(jié)項(xiàng)目設(shè)計(jì)。但沒(méi)必要將全部的分析內(nèi)容都放進(jìn)來(lái),畢竟這份文檔不是需求分析文檔,篩選放入重要且適當(dāng)?shù)膬?nèi)容展現(xiàn)即可。
任務(wù)流程是用圖形化的形式來(lái)表達(dá)產(chǎn)品邏輯關(guān)系的步驟和過(guò)程,指用戶使用產(chǎn)品中操作后的各種結(jié)果反饋等。進(jìn)行流程設(shè)計(jì)前提是完全了解需求,站在用戶的角度去考慮引導(dǎo)用戶完成用戶目標(biāo),關(guān)注用戶的操作不僅可以讓你的思維更清晰,還可以避免有操作邏輯的遺漏。還能讓其他人能快速理解。
4. 需求表
當(dāng)交互設(shè)計(jì)中涉及到其他崗位的需求時(shí)(如動(dòng)畫(huà)、語(yǔ)音、音效等),可選擇表格呈現(xiàn),或是提供共享盤(pán)路徑方便他人查看,但要記的在需求更改或更換路徑要及時(shí)更新,這個(gè)部分可根據(jù)實(shí)際情況選擇呈現(xiàn)。
5. 交互稿
交互稿主體結(jié)構(gòu)的功能層級(jí)要清晰,合理的命名,格式統(tǒng)一,新增/修改的內(nèi)容以及日期要統(tǒng)一標(biāo)識(shí)清晰,方便他人瀏覽查找。
交互稿單頁(yè)面包含界面圖、設(shè)計(jì)說(shuō)明。不要包含太多功能交叉,方便他人理解。交互說(shuō)明可以通過(guò)文字,流程圖配合方式呈現(xiàn),比純文字的說(shuō)明更直觀。還要注意不要遺漏異常、特殊情況說(shuō)明,保證交互說(shuō)明思路清晰而內(nèi)容詳盡,交互說(shuō)明類(lèi)型有以下幾種:
- 限制:包含極限值、范圍值等,如:數(shù)值是否存在極值,最多顯示多少字符,多出是否折行,如99+等;
- 狀態(tài):包含默認(rèn)狀態(tài)、常見(jiàn)狀態(tài)、特殊狀態(tài);
- 操作:包含常見(jiàn)操作(正常操作得到的反饋)、特殊操作(極端情況操作)、誤操作、手勢(shì)操作(雙擊、長(zhǎng)按、捏、伸、滑動(dòng))等;
- 反饋:操作后得到的反饋動(dòng)作(提示、跳轉(zhuǎn),動(dòng)畫(huà)語(yǔ)音等)。
6. 廢紙簍
交互文檔中的回收站(后悔藥),廢棄的頁(yè)面或過(guò)程方案稿別急著刪除,方案在不斷調(diào)整優(yōu)化的過(guò)程,本以為沒(méi)有用的頁(yè)面,統(tǒng)統(tǒng)放這里,后期很可能用的到哦!
三、后記
不同的公司會(huì)有不同的工作流程,根據(jù)項(xiàng)目、流程等實(shí)際情況來(lái)設(shè)計(jì)適合自己的交互設(shè)計(jì)文檔。當(dāng)然,最重要的還是對(duì)設(shè)計(jì)本身的多方面思考。在什么樣的場(chǎng)景下,你通過(guò)什么方式解決了什么問(wèn)題,還有沒(méi)有更好的方式…… 細(xì)致去分析并權(quán)衡取舍,就可以做出一份邏輯清晰會(huì)表達(dá)的交互設(shè)計(jì)文檔了。
以上分享希望對(duì)大家會(huì)有所幫助。同時(shí)歡迎各位同行指正交流~
…… 遇見(jiàn)你真好,謝謝你的閱讀……
本文由 @橙芝兒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自 Pixabay,基于 CC0 協(xié)議
真好!
可不可以提供范例下載啊,大神
思路不錯(cuò),感謝分享
再詳細(xì)點(diǎn),或者有一個(gè)rp文件供下載就好