圖片來(lái)源網(wǎng)絡(luò)

今天我們來(lái)聊聊如何將原型圖設(shè)計(jì)的更有價(jià)值，文中以自己最近的工作情況為例，討論在整個(gè)開(kāi)發(fā)環(huán)節(jié)中如何定位原型設(shè)計(jì)以及調(diào)整設(shè)計(jì)方向。

背景考量

不同的項(xiàng)目背景各不相同，項(xiàng)目有大有小，人員有多有少，時(shí)間有緊有緩，這些因素可以為我們的設(shè)計(jì)提供初始評(píng)估，往往也能夠決定原型的整體形態(tài)。

首先，因?yàn)楣镜霓k公場(chǎng)所分屬園區(qū)不同的兩幢樓，其中設(shè)計(jì)部和技術(shù)部又恰好分開(kāi)，因此IM將作為主要的交流方式。

另外，由于公司的組織架構(gòu)關(guān)系，設(shè)計(jì)部承擔(dān)的是整個(gè)公司的相關(guān)設(shè)計(jì)任務(wù)，包括平面設(shè)計(jì)、視覺(jué)設(shè)計(jì)等等，所以每做一個(gè)新項(xiàng)目，需要幫助設(shè)計(jì)師能夠盡快熟悉項(xiàng)目。

項(xiàng)目特征

• 嵌入式開(kāi)發(fā)背景
• 溝通成本高
• 設(shè)計(jì)師需要額外的學(xué)習(xí)成本

大部分項(xiàng)目都包含以上特征，在分析清楚整體環(huán)境之后，自己便可以整理接下來(lái)的設(shè)計(jì)需要注意到的問(wèn)題。

明確重點(diǎn)

降低時(shí)間成本

因?yàn)樵投加勺约阂粋€(gè)人完成，所以規(guī)范化的需求分析、文檔撰寫(xiě)步驟我們直接略過(guò)，加之項(xiàng)目負(fù)責(zé)人坐在我旁邊，明確了大體需求之后，便開(kāi)始根據(jù)自己的理解做功能邏輯梳理，有問(wèn)題直接詢問(wèn)即可。

確保邏輯清晰

邏輯梳理是開(kāi)始原型設(shè)計(jì)之前的重要環(huán)節(jié)，通過(guò)對(duì)項(xiàng)目整體功能邏輯的梳理，對(duì)項(xiàng)目有整體的把握，可以幫助自己快速構(gòu)思整體框架，落實(shí)到設(shè)計(jì)工具上，也能夠預(yù)先設(shè)計(jì)好母版，便于開(kāi)展下一步的設(shè)計(jì)。
設(shè)計(jì)時(shí)不可避免的都會(huì)出現(xiàn)同頁(yè)面存在不同狀態(tài)或者因輸入不同導(dǎo)致產(chǎn)生不同的校驗(yàn)結(jié)果，針對(duì)這種情況，將場(chǎng)景一一列出，可以在設(shè)計(jì)工具中通文件夾下新建不同頁(yè)面做備注，或者做一個(gè)簡(jiǎn)單的用戶流圖。

恰當(dāng)使用工具

關(guān)于邏輯梳理的工具有很多種，開(kāi)始如果不太確定，用紙筆畫(huà)畫(huà)也是不錯(cuò)的，一些腦圖工具可以根據(jù)自己的需要選擇。

高效雙向溝通

客觀環(huán)境限制了我和設(shè)計(jì)部同事的面對(duì)面交流機(jī)會(huì)不多，主要交流基本都集中在每個(gè)項(xiàng)目的分析介紹會(huì)議上面，因此將原型設(shè)計(jì)的清晰明了、邏輯周全、文檔詳盡便是每次會(huì)議前必須要做好的基礎(chǔ)工作。同時(shí)為了設(shè)計(jì)人員的設(shè)計(jì)能夠更貼合自己的想法、提高工作效率，也會(huì)找一些實(shí)際相近的完整設(shè)計(jì)案例給設(shè)計(jì)人員進(jìn)行參考。

設(shè)計(jì)原則

能夠提升溝通效率的設(shè)計(jì)才是好的設(shè)計(jì)，一份原型往往需要給設(shè)計(jì)師和開(kāi)發(fā)人員兩組人員參考，因此需要兼顧他們不同的使用目的。

• 設(shè)計(jì)師重視頁(yè)面表現(xiàn)形式和元素類型
• 開(kāi)發(fā)人員重視內(nèi)在邏輯

完整的了解整個(gè)項(xiàng)目是兩組人員的共通目的，因此自己往往采用保真度+說(shuō)明相結(jié)合的方式進(jìn)行原型設(shè)計(jì)。

• 添加基礎(chǔ)的頁(yè)面跳轉(zhuǎn)、輸入、點(diǎn)擊等基本動(dòng)作
• 采用不同色塊表現(xiàn)頁(yè)面層級(jí)主次關(guān)系和特殊狀態(tài)

將確認(rèn)與取消按鈕設(shè)置不同灰度值

利用淺灰色塊白色字體，能夠表現(xiàn)出不可點(diǎn)擊的效果

• 復(fù)雜邏輯使用流程圖或用戶流圖做輔助說(shuō)明，下圖為我做過(guò)的一些用戶流示例：

移動(dòng)端用戶流

業(yè)務(wù)邏輯圖

• 對(duì)于較為復(fù)雜的邏輯或容易忽略的細(xì)節(jié)添加輔助說(shuō)明

審核狀態(tài)存在多種情況，不適合使用交互動(dòng)作

• 復(fù)雜動(dòng)效使用近似實(shí)例做演示說(shuō)明

反饋

做到以上這些，設(shè)計(jì)師們往往不會(huì)有太大問(wèn)題，也基本可以保證按時(shí)交付初稿，這時(shí)自己對(duì)設(shè)計(jì)過(guò)稿之后，會(huì)發(fā)現(xiàn)部分問(wèn)題，此時(shí)對(duì)這些問(wèn)題采用圖文說(shuō)明的形式整理成文檔，統(tǒng)一提給設(shè)計(jì)師，如果是細(xì)節(jié)問(wèn)題，設(shè)計(jì)師根據(jù)文檔說(shuō)明，往往都能夠理解，如果存在邏輯或者功能上的問(wèn)題，便需要通過(guò)會(huì)議來(lái)進(jìn)行明確，初稿的修改意見(jiàn)可以直接加在修改后的原型里,或者以單獨(dú)的文件發(fā)送。

這樣基本上設(shè)計(jì)師做好二次修改后，就可以直接交付開(kāi)發(fā)人員了。

因?yàn)楣玖鞒滩](méi)有那么規(guī)范，自己也算是承包了需求分析、功能設(shè)計(jì)等部分工作，因此省略了PRD環(huán)節(jié)，所有的文檔和原型設(shè)計(jì)都在.rp文件中完成，個(gè)人認(rèn)為這樣更簡(jiǎn)潔，也能夠節(jié)省第三方人員的工作時(shí)間，目前來(lái)看效果還是不錯(cuò)，從后臺(tái)管理系統(tǒng)到網(wǎng)站，再到App，一直采用這樣的設(shè)計(jì)思想和流程，后面如果遇到其他問(wèn)題，再繼續(xù)調(diào)整。

高保真的原型往往更適合演示給你的用戶，而在實(shí)際項(xiàng)目中，一份通俗易懂，邏輯清晰的原型文檔才更加適合和你一起戰(zhàn)斗的小伙伴。

如果你也熱愛(ài)設(shè)計(jì)，歡迎通過(guò)公眾號(hào)與我交流