在項目設(shè)計中,交互設(shè)計師與上游的產(chǎn)品經(jīng)理睡陪,下游的視覺設(shè)計師,開發(fā)工程師和測試等崗位的工作密不可分匿情。不論是承上啟下的工作溝通兰迫, 還是方案評審的設(shè)計講解,專業(yè)的交互設(shè)計師應(yīng)該具備優(yōu)秀的表達能力炬称,不僅是語言方面的表達汁果,交互文檔的表達也尤其重要。交互文檔是對接上下游崗位转砖,利于協(xié)同團隊工作的重要輸出件须鼎。(本文會以Axure軟件輸出形式舉例說明)
一、交互文檔的輸出原則
交互文檔本身就相當于一個產(chǎn)品府蔗,我們要考慮到上下游不同崗位(目標用戶)對交互文檔的不同需求(用戶目標)晋控,交互文檔輸出原則(設(shè)計目標),在文檔的結(jié)構(gòu)姓赤,內(nèi)容和形式上可總結(jié)為三大原則:
1. 邏輯嚴謹赡译,文本簡明
邏輯混亂的文字表達通常會顯得比較啰嗦,甚至會讓人不知道你要表達的是什么不铆,降低了閱讀效率蝌焚,也增大了溝通成本。交互文檔的整體內(nèi)容結(jié)構(gòu)與頁面內(nèi)容結(jié)構(gòu)(文字關(guān)系)的書寫要思路清晰誓斥,邏輯嚴謹只洒,簡明扼要,并盡可能的做到“不重復(fù)劳坑,不遺漏”將交互設(shè)計的思路和方案更好的可視化毕谴。當然,邏輯和文本的表達都是可以訓練的,日常生活中我們也應(yīng)該注意這方面的培養(yǎng)與提升涝开。
2. 便于迭代循帐,利于協(xié)同
剛?cè)胄械臅r候我是一名UI設(shè)計師,我的第一份交互文檔是用PS做的舀武,在PS里輸出圖片再粘貼到Axure上拄养,首先是文檔管理起來很麻煩,其次是編輯起來不方便银舱,迭代修改都要找到對應(yīng)頁面的PS源文件修改后再轉(zhuǎn)移到Axure瘪匿,工作效率大大降低。交互稿在方便別人的同時纵朋,也應(yīng)該方便自己柿顶,而我卻忘記了自己也是這個產(chǎn)品的用戶。
文章開始說到交互文檔是對接上下游利于協(xié)同團隊工作的重要輸出件操软,所以文檔應(yīng)該保證利于其他崗位人員的查看或編輯的嘁锯。如在文檔格式方面,如果你是用Axure做設(shè)計聂薪,發(fā)給對方源文件外也要生成一份HTML文件家乘,這樣就算對方?jīng)]有Axure軟件,也可以順利打開藏澳。
3. 美即適用?
美國心理學家丹尼爾·麥克尼爾提出美即好效應(yīng):“對一個外表英俊漂亮的人仁锯,人們很容易誤認為他或她的其他方面也很不錯∠栌疲”
交互文檔不僅要邏輯“美”业崖,表現(xiàn)層面也要考慮視覺上的美,可以從圖文排版蓄愁、字體大小双炕、明暗層次等方面去考慮。輸出一份美的交互文檔從視覺上來說還能潛移默化的促進人們形成正面積極的態(tài)度撮抓,積極的態(tài)度會使你的交互評審更高效妇斤,也會提升程序大哥們寫代碼過程中的愉悅感。當然丹拯,追求美的產(chǎn)出也應(yīng)該是設(shè)計師的職業(yè)素養(yǎng)站超。
二、交互文檔的結(jié)構(gòu)與內(nèi)容
下面我簡單介紹下交互文檔的輸出思路乖酬,供大家學習參考死相。這里要注意的是,每位設(shè)計師要根據(jù)公司實際工作情況來定文檔的樣式咬像,有針對性地進行設(shè)計輸出媳纬。
文檔的整體結(jié)構(gòu)可以理解為圖書中的目錄部分双肤,下圖是我整理的一份文檔結(jié)構(gòu)模板,分為文檔封面钮惠、更新日志、設(shè)計思路七芭、需求表素挽、交互稿、廢紙簍六個部分狸驳。必要時预明,還可包含信息架構(gòu)、交互規(guī)范說明耙箍、頁面流程圖等部分撰糠。
1. 文檔封面
這個部分呈現(xiàn)產(chǎn)品簡介,包含版本信息辩昆、參與人員等基本信息阅酪。
2. 更新日志
在項目中設(shè)計方案的修改和優(yōu)化是不可避免的,方案有調(diào)整時更新日志就比較重要了汁针。更新日志可以清晰記錄新增或修改了哪個具體頁面术辐,新增或修改的內(nèi)容是什么,日期施无、版本……這樣項目成員就可以一目了然關(guān)注到重點修改更新信息辉词,提升了工作效率。
3. 設(shè)計思路
這一部分在交互評審會中尤為重要猾骡,因為參加評審的人很可能還不了解這個項目瑞躺,如果我們會上直接講方案,忽略設(shè)計思路的講解兴想,評審的過程就很可能局限在了布局排版上幢哨,評審也就沒有了意義。將設(shè)計過程更加結(jié)構(gòu)化呈現(xiàn)出來襟企,如概述項目背景嘱么、目標用戶、產(chǎn)品目標顽悼、場景分析曼振、用戶目標 、設(shè)計目標與設(shè)計思路(如圖)蔚龙,方便他人理解整個項目背景下的設(shè)計思路冰评,也方便以后回溯總結(jié)項目設(shè)計。但沒必要將全部的分析內(nèi)容都放進來木羹,畢竟這份文檔不是需求分析文檔甲雅,篩選放入重要且適當?shù)膬?nèi)容展現(xiàn)即可解孙。
任務(wù)流程是用圖形化的形式來表達產(chǎn)品邏輯關(guān)系的步驟和過程,指用戶使用產(chǎn)品中操作后的各種結(jié)果反饋等抛人。進行流程設(shè)計前提是完全了解需求弛姜,站在用戶的角度去考慮引導(dǎo)用戶完成用戶目標,關(guān)注用戶的操作不僅可以讓你的思維更清晰妖枚,還可以避免有操作邏輯的遺漏廷臼。還能讓其他人能快速理解。
4. 需求表
當交互設(shè)計中涉及到其他崗位的需求時(如動畫绝页、語音荠商、音效等),可選擇表格呈現(xiàn)续誉,或是提供共享盤路徑方便他人查看莱没,但要記的在需求更改或更換路徑要及時更新,這個部分可根據(jù)實際情況選擇呈現(xiàn)酷鸦。
5. 交互稿
交互稿主體結(jié)構(gòu)的功能層級要清晰饰躲,合理的命名,格式統(tǒng)一井佑,新增/修改的內(nèi)容以及日期要統(tǒng)一標識清晰属铁,方便他人瀏覽查找。
交互稿單頁面包含界面圖躬翁、設(shè)計說明焦蘑。不要包含太多功能交叉,方便他人理解盒发。交互說明可以通過文字例嘱,流程圖配合方式呈現(xiàn),比純文字的說明更直觀宁舰。還要注意不要遺漏異常拼卵、特殊情況說明,保證交互說明思路清晰而內(nèi)容詳盡蛮艰,交互說明類型有以下幾種:
限制:包含極限值腋腮、范圍值等,如:數(shù)值是否存在極值壤蚜,最多顯示多少字符即寡,多出是否折行,如99+等袜刷;
狀態(tài):包含默認狀態(tài)聪富、常見狀態(tài)、特殊狀態(tài)著蟹;
操作:包含常見操作(正常操作得到的反饋)墩蔓、特殊操作(極端情況操作)梢莽、誤操作秆吵、手勢操作(雙擊熟空、長按、捏视哑、伸阵面、滑動)等葡粒;
反饋:操作后得到的反饋動作(提示、跳轉(zhuǎn)膜钓,動畫語音等)。
6. 廢紙簍
交互文檔中的回收站(后悔藥)卿嘲,廢棄的頁面或過程方案稿別急著刪除颂斜,方案在不斷調(diào)整優(yōu)化的過程,本以為沒有用的頁面拾枣,統(tǒng)統(tǒng)放這里沃疮,后期很可能用的到哦!
三梅肤、后記
不同的公司會有不同的工作流程司蔬,根據(jù)項目、流程等實際情況來設(shè)計適合自己的交互設(shè)計文檔姨蝴。當然俊啼,最重要的還是對設(shè)計本身的多方面思考。在什么樣的場景下左医,你通過什么方式解決了什么問題授帕,還有沒有更好的方式…… 細致去分析并權(quán)衡取舍,就可以做出一份邏輯清晰會表達的交互設(shè)計文檔了浮梢。
以上分享希望對大家會有所幫助跛十。同時歡迎各位同行指正交流~
…… 遇見你真好,謝謝你的閱讀……