當(dāng)你畫線框圖時(shí),你應(yīng)該想些什么?

2 評(píng)論 22076 瀏覽 191 收藏 7 分鐘

我們每個(gè)人在剛?cè)胄械臅r(shí)候,接到項(xiàng)目需求,最初更多的會(huì)淪為產(chǎn)品經(jīng)理的畫圖工具,幫他畫好線框圖、補(bǔ)全場(chǎng)景狀態(tài)反饋等,這時(shí)候你可能會(huì)彷徨痛苦,感覺自己沒有辦法實(shí)現(xiàn)作為交互設(shè)計(jì)師的價(jià)值,不用彷徨痛苦,你現(xiàn)在需要的只是一個(gè)完善的工作流程,下面我就拋磚引玉來講一下當(dāng)我在畫線框圖時(shí),我在想的12345……,希望對(duì)剛?cè)胄械男』锇槟苡兴鶐椭?/p>

1.分析梳理確認(rèn)需求

如果不想淪為產(chǎn)品工具的話,首先你在接到需求時(shí)應(yīng)該要做的是需求分析梳理確認(rèn)。

peitu02

第一步,了解項(xiàng)目背景。

去找這個(gè)產(chǎn)品業(yè)務(wù)的負(fù)責(zé)人聊一聊,這能讓你快速的知道這個(gè)項(xiàng)目的背景,這個(gè)產(chǎn)品的規(guī)劃,用戶的基本資料,需求要解決的痛點(diǎn);

第二步,分析需求的合理與否。

你要思考需求解決的痛點(diǎn)是不是用戶在使用過程中真正的痛點(diǎn)?需求提出的功能是否能夠解決這個(gè)痛點(diǎn)?有沒有更好的方法去解決這個(gè)痛點(diǎn)?如果認(rèn)為需求不合理,你應(yīng)該去和項(xiàng)目負(fù)責(zé)人、項(xiàng)目成員去溝通交流,在溝通的時(shí)候如果你是新人的話請(qǐng)準(zhǔn)備好數(shù)據(jù),畢竟數(shù)據(jù)更具有說服力。

第三步,確認(rèn)需求的細(xì)節(jié)。

比如信息模塊內(nèi)容、功能點(diǎn)、后臺(tái)交互邏輯等,畢竟誰也不想在項(xiàng)目進(jìn)行過程中,出現(xiàn)需求變更,信息模塊內(nèi)容呈現(xiàn)與產(chǎn)品需求有出入,前端的寫好的頁面樣式后臺(tái)不能使用等情況。

2.思考分析確認(rèn)優(yōu)化方案

當(dāng)需求確立后,我們下面要做的就是設(shè)計(jì)優(yōu)化方案,是體驗(yàn)價(jià)值的時(shí)候了~

peitu03

第一步,競(jìng)品分析。

當(dāng)然在設(shè)計(jì)方案的時(shí)候如果有同類型的產(chǎn)品,我們還是要去看一看,分析一下他們的和我們有什么區(qū)別,他們做的有什么好的地方,有哪些是可以吸收和借鑒的,畢竟站在別人肩膀上看的更遠(yuǎn)~

第二步,信息模塊的重要級(jí)別劃分。

把信息的重要級(jí)別進(jìn)行區(qū)分排序,那些是要突出的、那些是要弱化的、那些是要隱藏的,這樣的話進(jìn)行后期頁面布局就會(huì)輕松很多。

第三步,任務(wù)流程。

梳理主要的任務(wù)流程,最好把他們畫出來,分析那些環(huán)節(jié)是可以優(yōu)化的,最終確認(rèn)主要任務(wù)流程的優(yōu)化方案。

第四步,頁面流程。

根據(jù)主要任務(wù)流程,畫出頁面流程,每個(gè)頁面的入口出口,頁面之間的串聯(lián)等,最好都要畫出來,當(dāng)你在做具體方案的時(shí)候就不會(huì)出現(xiàn)遺漏頁面的情況了。

3.具體方案——低保真設(shè)計(jì)

當(dāng)思路和優(yōu)化方案已經(jīng)確定好,下面要做的就是具體方案的設(shè)計(jì)~

peitu05

第一步,頁面低保真設(shè)計(jì)。

根據(jù)頁面流程進(jìn)行頁面的低保真設(shè)計(jì),信息模塊的級(jí)別劃分能讓你在布局的時(shí)候有一個(gè)整體的考量,當(dāng)然細(xì)節(jié)的布局設(shè)計(jì)也是考量設(shè)計(jì)功力的一個(gè)地方,所以做好每一個(gè)細(xì)節(jié)的設(shè)計(jì)來體驗(yàn)自己的價(jià)值吧……

第二步,根據(jù)任務(wù)流程進(jìn)行全場(chǎng)景的設(shè)計(jì)。

各種反饋狀態(tài)~異常狀態(tài)~初始狀態(tài)~文案~信息極限值~跳轉(zhuǎn)~加載~無狀態(tài)~網(wǎng)絡(luò)異常~404~等

4.設(shè)計(jì)檢查

當(dāng)方案做完以后,接下來重要的一步就是要進(jìn)行設(shè)計(jì)檢查。

peitu04

第一步,檢查頁面一致性。

Logo、頭部、尾部、面包屑等是否和整站統(tǒng)一,按鈕樣式、反饋狀態(tài)、報(bào)錯(cuò)等樣式是否統(tǒng)一;是否有缺少的場(chǎng)景和狀態(tài),根據(jù)任務(wù)流程對(duì)場(chǎng)景和狀態(tài)進(jìn)行排查,保證設(shè)計(jì)的完整性

第二步,確保方案的可用性和易用性。

設(shè)計(jì)任務(wù)流程,進(jìn)行設(shè)計(jì)走查,測(cè)試時(shí)選擇普通用戶,保證設(shè)計(jì)的可用性和易用性。

5.交互設(shè)計(jì)說明文檔

peitu06

設(shè)計(jì)方案是要給別人看的,而不是把方案丟給產(chǎn)品就可以了,視覺設(shè)計(jì)需要你的說明文檔來設(shè)計(jì)所有的樣式,前端需要你的說明文檔去做交互樣式、各種反饋、限制,開發(fā)需要你的文檔梳理頁面之間的邏輯關(guān)系,制作交互動(dòng)效等,所以做好交互設(shè)計(jì)文檔不只是對(duì)項(xiàng)目負(fù)責(zé)也是為了更好的方便其他同事的工作,畢竟大家好才是真的好~

到了這一步,下面就是跟進(jìn)的工作了~確保視覺產(chǎn)出質(zhì)量,前端的交互效果、還原度和兼容性~最后的最后吾日三省吾身——設(shè)計(jì)總結(jié),總結(jié)才有收獲,才能不斷前行~

設(shè)計(jì)的流程大同小異,重要的是接到項(xiàng)目先去思考,然后再去做,這樣真正到了畫線框圖的時(shí)候你才能一瀉千里^_^

 

本文由 @Ruby007 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 可以的,挺在理

    回復(fù)
    1. 嗯嗯

      回復(fù)