上下游協(xié)作之交互設(shè)計文檔
這篇文章簡單總結(jié)了如何寫一份會表達的交互文檔,讓團隊中的上下游(產(chǎn)品、UI、開發(fā)、測試)溝通協(xié)作更加流暢。
關(guān)于交互設(shè)計文檔的文章不少,很多時候看了不一定能馬上提高一個境界,而需要我們不斷結(jié)合項目去實踐和總結(jié)積累。這里也是借鑒了一些設(shè)計書籍、行內(nèi)的設(shè)計分享以及結(jié)合自己做項目的親身經(jīng)歷進行總結(jié)。
一、 規(guī)范交互設(shè)計文檔的重要性
交互設(shè)計文檔,稱為DRD(Design Requirement Document)。
我們知道,做出一款產(chǎn)品需要團隊多人協(xié)作,也要歷經(jīng)多次版本迭代。交互設(shè)計師在實際工作中,除了需求分析,輸出交互稿之外,也要配合視覺、開發(fā),甚至測試的工作。
此外因項目的節(jié)奏和進度不同,難免輸出的交互文檔有精細(xì)程度之差。所以輸出一份專業(yè)規(guī)范而表達清晰的交互設(shè)計文檔會尤為重要。
設(shè)計規(guī)范解決了什么問題?
二、交互設(shè)計文檔的書寫思路
1. 目錄
2. 封面
文檔封面包含版本信息、參與人員等信息。
3. 文檔說明
寫交互文檔是為了能夠很好地進行上下游協(xié)作,所以需要將文檔表達清楚。文檔說明包括項目背景、更新日志、設(shè)計進度、評審記錄等。以便讓項目組人員能夠知曉設(shè)計的“歷史進程”,提高溝通的效率。
3.1 項目背景
3.2 更新日志
版本迭代過程中,有時候會遇到人力資源調(diào)配(人員流動或者項目調(diào)配),如果能及時地記錄更新日志并且傳達到位,大家的合作會順暢很多。
4. 需求分析
根據(jù)PRD(產(chǎn)品需求文檔)進行需求的梳理,包括用戶調(diào)研、需求拆解、競品分析、用戶體驗地圖等等(根據(jù)具體不同項目進行安排)。
5. 頁面交互
關(guān)于頁面交互原型文檔的書寫思路,常見的有任務(wù)流程圖、頁面流程圖、信息架構(gòu)。需要具體結(jié)合項目場景呈現(xiàn)。
5.1 任務(wù)流程
在設(shè)計之前我們首先要梳理任務(wù)流程圖,一般是主流程+子流程的結(jié)構(gòu)方式,繪制的軟件有Sketch,Axure或者其他第三方軟件。
5.2 信息架構(gòu)
信息架構(gòu)圖按照功能-頁面-模塊-元素繪制,幫助我們梳理功能、涉及的信息點,防止漏項。
團隊中協(xié)作之時,也便于做設(shè)計任務(wù)分工。
5.3 交互原型
通常來說,交互原型頁面由原型頁面+交互說明組成,我們盡量用一個頁面說明清楚一個事情,盡量避免看文檔的同事困惑,節(jié)省不必要的查找時間,尤其是核心的頁面需要附上具體的流程說明。
本案例是公司的app項目,“分析”頁面中,tab標(biāo)簽包含“總、月、周、日”,可以自由切換,方便開發(fā)能夠第一眼看到關(guān)聯(lián)的流程頁面。
5.4 交互說明
雖然很多產(chǎn)品、開發(fā)人員不愿意讀太多文字,相比之下更愿意看直觀的線框圖。但交互說明也不可省略,這是為了讓大家能夠更好地理解界面的操作行為和邏輯。
那么交互說明包含什么呢?
- 內(nèi)容:范圍值、極限值;
- 狀態(tài):默認(rèn)狀態(tài)、異常狀態(tài)、特殊狀態(tài)說明;
- 操作:常見操作、特殊操作、誤操作、手勢操作等等;
- 反饋:操作后的提示、跳轉(zhuǎn)、動畫等。
本案例中除了描述頁面內(nèi)容,也包含了默認(rèn)、特殊狀態(tài)的說明,以及操作行為等。
tips:
- 盡量用真實而符合邏輯的數(shù)據(jù);
- 不要忽略特殊狀態(tài);
- 清晰簡潔;
- 交互說明更新時及時告知大家……
交互設(shè)計規(guī)范:
交互組件庫:
結(jié)合實際項目場景,制作交互設(shè)計規(guī)范和建立交互組件庫,并且不斷調(diào)整以適用項目需要,可以大大地提高工作效率。
三、總結(jié)
俗話說,好的設(shè)計需要有好的表達。誠然,交互設(shè)計文檔作為設(shè)計師的重要產(chǎn)出物之一,應(yīng)該是對上下游協(xié)作有益的,能作為評估和參考。
當(dāng)拿到產(chǎn)品的需求文檔時,應(yīng)該學(xué)會從商業(yè)、技術(shù)、用戶的角度多方面思考和分析,擁有“翻譯”成設(shè)計目標(biāo)的能力。相比畫圖,設(shè)計的思考、決策過程更能體現(xiàn)自身的價值。
至于原型,行內(nèi)當(dāng)前沒有統(tǒng)一的標(biāo)準(zhǔn),很多規(guī)范需要基于項目的實際場景慢慢積累起來,本文中列舉的也是通常遇到的情況,僅作參考。
總而言之,團隊之間的溝通非常重要,與書寫交互文檔的目的同理。
本文由 @emily 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
您好~求分享文檔,希望跟大神學(xué)習(xí)學(xué)習(xí),感謝 郵箱:7490204135@qq.com
您好~求分享文檔,希望跟您學(xué)習(xí)學(xué)習(xí),不外傳,感謝 郵箱:1563878535@qq.com
您好~求分享文檔,希望跟您學(xué)習(xí)學(xué)習(xí),不外傳,感謝 郵箱:liao_chenghong@126.com
您好~求分享文檔,希望跟您學(xué)習(xí)學(xué)習(xí),不外傳,感謝 郵箱:445762249@qq.com
可以分享交互文檔嗎?不外傳,非常感謝970750158@qq.com
您好,感謝您的分享,初級交互設(shè)計師一名,請問可以看下您的交互文檔嗎。郵箱:496724702@qq.com
您好~求分享文檔,學(xué)生黨向?qū)W習(xí)學(xué)習(xí),不外傳,非常感謝。郵箱:1178569502@qq.com
您好~求分享文檔,希望跟您學(xué)習(xí)學(xué)習(xí),不外傳,感謝 郵箱:408906687@qq.com
您好~謝謝您的文章。請問可以借閱一下交互文檔嗎?學(xué)生想學(xué)習(xí),不外傳。非常感謝,772994094@qq.com。
大神,求分享文檔,不外傳。郵箱:412554750@qq.com
大神,求分享文檔,不外傳。郵箱:412554750@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:593363258@qq.com
求分享文檔和組件庫,不外傳。非常感謝??郵箱:1009774627@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:365527885@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:913169559@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:365795954@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:569006936@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:370714136@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:1091888951@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:1686817407@qq.com
大神,我正在自學(xué)交互,希望能看看您的文檔做個參考,如果方便的話可以發(fā)一份文檔嗎,謝謝????郵箱:463982624@qq.com
大神,同求文檔,希望跟您學(xué)習(xí)學(xué)習(xí),郵箱:1591654987@qq.com
大佬,求一份文檔,290857902@qq.com,祝大佬事業(yè)蒸蒸日上
大神,同求文檔,希望可以有機會深入學(xué)習(xí)學(xué)習(xí),郵箱:50838271@qq.com。多謝~
感謝作者的經(jīng)驗分享,希望能看看文檔和組件庫以便更好的學(xué)習(xí),感謝了,727909230@qq.com ,祝大佬身體健康,工作順心~~