原型圖的設(shè)計(jì)，是項(xiàng)目經(jīng)理給甲方提案時(shí)，需要展現(xiàn)的能力和專業(yè)性。本文主要是為項(xiàng)目經(jīng)理提供一套方便使用，而且設(shè)計(jì)統(tǒng)一，視覺美觀的原型組件庫。

下載鏈接：https://pan.baidu.com/s/117_dd9KQZTUvOlcJ7jKHwQ 密碼：fj2t

設(shè)計(jì)這套組件庫

1. 主要解決的矛盾

項(xiàng)目經(jīng)理給甲方提案需要展現(xiàn)能力和專業(yè)性，原型圖的設(shè)計(jì)是其中的一環(huán)。原型在功能展示方面沒問題，但由于大多項(xiàng)目經(jīng)理不是設(shè)計(jì)師，在原型圖本身的氣質(zhì)，檔次上會(huì)稍有欠缺。

2. 目標(biāo)

為項(xiàng)目經(jīng)理提供一套方便使用，而且設(shè)計(jì)統(tǒng)一，視覺美觀的原型組件庫。

3. 人群

項(xiàng)目經(jīng)理。

對(duì)此，我們采訪了一些項(xiàng)目經(jīng)理，并綜合進(jìn)行了用戶畫像。

分析的重點(diǎn)難點(diǎn)

• 使用：易用，元素分類清晰，不同種類元素齊全，考慮各種常用組合。
• 趨勢(shì)：采用 iPhoneX 的邊框外形，但是齊劉海，上下圓角為處理難點(diǎn)，不要為了視覺強(qiáng)行給產(chǎn)品經(jīng)理增加制圖的負(fù)擔(dān)。
• 展示：整體版面色調(diào)要統(tǒng)一，不要花哨，但是要體現(xiàn)檔次和專業(yè)。在向甲方展示的時(shí)候給自己和項(xiàng)目加分。

組件庫的特點(diǎn)是組件元素要盡量齊全，我還考慮了加入一些常用的組合，讓使用更加方便。

考慮到也許會(huì)有新人不會(huì)使用，附上使用教程，和設(shè)計(jì)流程。

歡迎關(guān)注作者微信公眾號(hào)：「原型不再low」

圖片素材作者：Stwo

「組件化設(shè)計(jì)怎么做」

• 《為什么我們都應(yīng)該學(xué)會(huì)組件化設(shè)計(jì)思維？》
• 《進(jìn)階必讀！可能是最全面的組件化開發(fā)與設(shè)計(jì)指南》
• 《實(shí)用全面！教你用Sketch Libraries構(gòu)建組件庫/設(shè)計(jì)體系》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com