所以開始一個(gè)項(xiàng)目前，除了我們知道它的商業(yè)目標(biāo)，產(chǎn)品愿景，用戶人群后，同時(shí)它的價(jià)值也是我們需要關(guān)注的點(diǎn)。

04 明確設(shè)計(jì)主張

有了前面那些部分，產(chǎn)品愿景，商業(yè)目標(biāo)，用戶人群，產(chǎn)品價(jià)值后，這個(gè)階段就應(yīng)該明確定義好你所做的產(chǎn)品設(shè)計(jì)主張是什么？

什么是設(shè)計(jì)主張，簡(jiǎn)單來說就是一個(gè)人的性格和特點(diǎn)，我們身邊每天接觸那么多人，哪些人能給你留下印象深刻呢？可愛的，還是有氣質(zhì)的，產(chǎn)品和人一樣都需要有性格。

最怕我們做的設(shè)計(jì)，做的產(chǎn)品沒有性格很平庸，所以一定要定義一個(gè)產(chǎn)品的性格特征。

bean這款產(chǎn)品的價(jià)值是最新的一些明星音樂發(fā)布，用戶群體都是90后，追星一族，所以在整個(gè)產(chǎn)品設(shè)計(jì)，定義的設(shè)計(jì)主張就是潮流，年輕化，在整個(gè)產(chǎn)品設(shè)計(jì)上，交互上都圍繞潮流，年輕化來打造，形成整個(gè)產(chǎn)品潮流年輕化的感受。

圖形上體現(xiàn)潮流年輕化：每一個(gè)都不一樣，播放按鈕也是通過LOGO的桃心演繹，每個(gè)按鈕里面圖形都是根據(jù)內(nèi)容去變化的。

圖形上體現(xiàn)潮流年輕化：音樂專輯banner和海報(bào)，和界面中元素一致，同時(shí)拓展性更強(qiáng)，排版上高度一致同時(shí)又有各種的特點(diǎn)。

色彩上體現(xiàn)潮流年輕化：色彩系統(tǒng)上，顏色飽和度更高，更多年輕化色彩運(yùn)用在里面，讓整個(gè)視覺系統(tǒng)呈現(xiàn)年輕化。

線上設(shè)計(jì)：線上官網(wǎng)設(shè)計(jì)，第三方社交設(shè)計(jì)都是統(tǒng)一一套潮流，年輕的設(shè)計(jì)手法。

線下設(shè)計(jì)：在線下IP上同樣圍繞著年輕化，潮流去打造。

接下來，再以另一款產(chǎn)品為例做分析：

它是韓國(guó)一款生活化的電商設(shè)計(jì)，它的整個(gè)用戶人群就是一些對(duì)生活有品質(zhì)的中產(chǎn)階級(jí)，產(chǎn)品特別也是通過雜志化運(yùn)用，幫你挑選好一些好的有品位的產(chǎn)品，所以設(shè)計(jì)師整個(gè)設(shè)計(jì)定義就是優(yōu)雅、儀式感，一起來看看設(shè)計(jì)師圍繞這2個(gè)關(guān)鍵詞怎么在交互和視覺上打造的。

交互上：產(chǎn)品沒有過多裝飾內(nèi)容，通過這種簡(jiǎn)單清晰的圖片，所有掌控權(quán)交給用戶，滑動(dòng)的操作方便快捷，通過交互和視覺來體現(xiàn)優(yōu)化和儀式感。

視覺上：雜志化優(yōu)雅的排版，就像閱讀一本書一樣，沒有任何細(xì)節(jié)瑕疵，完美有品質(zhì)把每一個(gè)產(chǎn)品交代清楚。

排版上：將雜志，品質(zhì)感淋漓極致的體現(xiàn)處理，從商品選擇，到商品細(xì)節(jié)查看，都無不體現(xiàn)這個(gè)產(chǎn)品對(duì)生活的講究。

色彩上：低飽和的配色，優(yōu)雅的排版，統(tǒng)一且精致。

所以在這個(gè)階段，對(duì)于設(shè)計(jì)主張的明確是尤其重要的，需要先定義好關(guān)鍵詞，再結(jié)合關(guān)鍵詞去產(chǎn)出關(guān)鍵詞下的視覺表現(xiàn)，比如色彩，交互，視覺圖形等關(guān)鍵頁面。

05 方案設(shè)計(jì)

在明確設(shè)計(jì)主張后，那么我們就可以著手設(shè)計(jì)，但是到這里，很多朋友又有很大困難，是先做規(guī)范呢，還是先做UIkit，每個(gè)人心中仿佛有不同的答案，特別是一個(gè)項(xiàng)目時(shí)間緊湊，又有很多人合作情況下，顏色，按鈕，列表怎么用，包括樣式等等，下面分享下我個(gè)人經(jīng)驗(yàn)。

1. 定核心頁面風(fēng)格

假設(shè)明確了設(shè)計(jì)主張是年輕化，潮流感，那么可以基于這個(gè)設(shè)計(jì)主張，進(jìn)行視覺探索，如果團(tuán)隊(duì)有幾個(gè)設(shè)計(jì)師，可以一起出設(shè)計(jì)方案，出方案一般會(huì)挑選核心4、5個(gè)頁面進(jìn)行設(shè)計(jì)，設(shè)計(jì)好了后，和領(lǐng)導(dǎo)評(píng)審，明確某一個(gè)設(shè)計(jì)方向。

2. 梳理基礎(chǔ)組件

前面階段已經(jīng)定義好的大概風(fēng)格，最好能確定4張頁面的主風(fēng)格，確定好主風(fēng)格，然后進(jìn)行組件細(xì)化。

確定風(fēng)格后，梳理常用設(shè)計(jì)元素，從顆粒度最小的開始，比如線條，按鈕樣式，顏色，表單，字體，行間距，網(wǎng)格系統(tǒng)等等，比如字號(hào)，有幾種字號(hào)，字號(hào)的行間距是多少，是文字的1.2倍，還是1.5倍，按鈕分幾種樣式，線框的，填色的，還是帶投影的等等每周這個(gè)界面。

當(dāng)然也可以一邊設(shè)計(jì)，一邊把確定的元素錄入到Uikit里面，需要注意的是圖標(biāo)，圖標(biāo)是一個(gè)產(chǎn)品中很能體現(xiàn)風(fēng)格的地方，需要好好的研究，圖標(biāo)一定需要做出自己的特色處理。

3. 更新組件

做的過程中，可以邊做邊維護(hù)更新組件，小組也可以進(jìn)行分工，誰負(fù)責(zé)色彩，誰負(fù)責(zé)圖標(biāo)，常用的分類一般是：色彩，樣式，按鈕，間距，字體，網(wǎng)格，空白頁，插畫，列表，導(dǎo)航，然后還有一些大家產(chǎn)品各種業(yè)務(wù)的場(chǎng)景

基本這個(gè)階段的執(zhí)行就是：

概念設(shè)計(jì)探索—選5頁開始設(shè)計(jì)–確定字體顏色–按鈕樣式–網(wǎng)格間距–整理成組件到uikit–圖標(biāo)規(guī)范–插畫規(guī)范–整理

06 最后

以上基本就是大公司的一個(gè)項(xiàng)目從0到1的大概過程，簡(jiǎn)單回顧下設(shè)計(jì)總結(jié)的幾步：

1. 了解產(chǎn)品定位
2. 用戶是誰，為誰做設(shè)計(jì)
3. 產(chǎn)品的價(jià)值(HMW公式)
4. 明確設(shè)計(jì)主張方案設(shè)計(jì)（先核心頁面再Uikit）

#專欄作家#

Sky，微信公眾號(hào)：我們的設(shè)計(jì)日記（ID：helloskys），設(shè)計(jì)交流可加微信：hellosky678，人人都是產(chǎn)品經(jīng)理專欄作家。原支付寶體驗(yàn)設(shè)計(jì)專家，阿里巴巴天貓?jiān)O(shè)計(jì)專家；10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn)，對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

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

題圖來自Unsplash，基于CC0協(xié)議