分析產(chǎn)品，也是難到很多 UI 設(shè)計(jì)師的問(wèn)題。很多人認(rèn)為這屬于產(chǎn)品經(jīng)理的工作，但實(shí)際上 UI 設(shè)計(jì)師也離不開(kāi)使用產(chǎn)品分析的技能來(lái)處理日常的工作，以及提升自己的產(chǎn)出質(zhì)量。

產(chǎn)品的分析其實(shí)遠(yuǎn)遠(yuǎn)沒(méi)有想象中那么玄乎，這篇文章就要教會(huì)大家如何通過(guò)正確的步驟完成對(duì)產(chǎn)品的分析。

以下為正文。

產(chǎn)品分析，顧名思義，就是對(duì)某互聯(lián)網(wǎng)產(chǎn)品，進(jìn)行系統(tǒng)的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀事實(shí)的商業(yè)報(bào)告。

為什么我們需要這個(gè)報(bào)告？那是因?yàn)閷?duì)于我們工作的決策來(lái)說(shuō)，獲取越多有效的參考信息，就越能幫助我們做出正確的選擇。

舉個(gè)例子，如果我準(zhǔn)備做一款針對(duì)定制奶茶外賣(mài)的 APP，那么就要了解這樣的 APP 產(chǎn)品通常有哪些模塊和功能，通過(guò) APP 下單的流程是什么樣的，以及用戶更喜歡什么樣的設(shè)計(jì)或者交互。這時(shí)候，光靠我自己腦補(bǔ)是沒(méi)用的，我得分析同行或者相關(guān)外賣(mài) APP 產(chǎn)品，才能得到明確的結(jié)論，然后作為依據(jù)開(kāi)始設(shè)計(jì)我自己的產(chǎn)品。

或者，我們?cè)诿嬖嚮蛘呖蛻粽勁兄?，有認(rèn)真的分析過(guò)對(duì)方的產(chǎn)品，那么在溝通過(guò)程中就可以讓我們的處境更有利，能進(jìn)行更有質(zhì)量的溝通和探討。

產(chǎn)品分析的好處很多，不僅能幫助我們解決當(dāng)前的問(wèn)題，也可以幫助設(shè)計(jì)師鍛煉自己的邏輯思維能力，產(chǎn)品能力以及業(yè)務(wù)能力，是升職加薪的必備技能。

接下來(lái)，可能很多同學(xué)已經(jīng)忍不住摩拳擦掌，想要知道產(chǎn)品分析應(yīng)該怎么開(kāi)始了，但別急，我要先講講一個(gè)被很多人忽略，以及在眾多講解文章中都沒(méi)有提及的東西，就是產(chǎn)品分析的 —— 目標(biāo)。

前面提到，產(chǎn)品分析最后要以商業(yè)報(bào)告的形式呈現(xiàn)，而一份合格商業(yè)報(bào)告是要提供 “明確的結(jié)論” 的。如果這份報(bào)告指向性不清晰，洋洋灑灑寫(xiě)了一百頁(yè)，像流水帳一樣把所有能羅列的分析內(nèi)容全都一股腦做進(jìn)去，那對(duì)于自己和看的人都是一場(chǎng)災(zāi)難。因?yàn)檫@樣的報(bào)告沒(méi)有重點(diǎn)，缺乏閱讀性。

開(kāi)始分析前，我們要確定一個(gè)明確的目標(biāo)，即想要通過(guò)這份報(bào)告獲得哪些信息。在獲取的內(nèi)容上，往往不會(huì)只想得到一個(gè)結(jié)果，很可能會(huì)是復(fù)數(shù)形式，所以我們需要列一個(gè)表格，將它們羅列出來(lái)。

比如我們?cè)儆孟胱瞿滩柰赓u(mài)服務(wù)的APP為出發(fā)點(diǎn)，那么我們分析美團(tuán)或者餓了么的產(chǎn)品，定了下面這些目標(biāo)：

可以看出，對(duì)于產(chǎn)品、交互層面的分析明顯要大于設(shè)計(jì)的權(quán)重，根據(jù) MVP 原則，第一個(gè)版本應(yīng)該要得出的是一個(gè)流程可以跑通的產(chǎn)品，在前期過(guò)分關(guān)注設(shè)計(jì)和細(xì)節(jié)并不是首要任務(wù)。

所以，在不同的場(chǎng)景、時(shí)期、戰(zhàn)略上，產(chǎn)品分析的側(cè)重點(diǎn)就不同，而且留給我們的分析時(shí)間也不可能足夠充足的，所以也要將精力集中在最重要的事情上，提升效率，才可以真正解決問(wèn)題。

整個(gè)產(chǎn)品分析的內(nèi)容，可以劃分成多個(gè)緯度和若干的細(xì)節(jié)，我用下面這個(gè)思維導(dǎo)圖表示出來(lái)。

這樣的圖表讓人望而生畏，如果每一部分我們都認(rèn)真做分析，那么勢(shì)必得寫(xiě)出非常多的內(nèi)容不可，所以才有了前面所說(shuō)的要規(guī)劃分析的目標(biāo)，在實(shí)際執(zhí)行過(guò)程中有很多分析項(xiàng)是不需要提及的。

再者，產(chǎn)品分析中還包競(jìng)品分析、運(yùn)營(yíng)分析、交互分析、視覺(jué)分析、文案分析等分支，它們各有側(cè)重和取舍，所以不要為此而感到恐慌。

下面，我們分別對(duì)這些內(nèi)容進(jìn)行簡(jiǎn)單的說(shuō)明。

1.產(chǎn)品的基本信息

分析任何產(chǎn)品的第一步，就是對(duì)它有一個(gè)大致的認(rèn)識(shí)，首先就是去下載和體驗(yàn)它，并且能用一句話來(lái)概括它的功能，然后通過(guò)該功能解決了用戶什么樣的需求。

然后就是它所處的行業(yè)目前的狀態(tài)，是否規(guī)模連年上升，有什么重量級(jí)新聞或者革新，未來(lái)的發(fā)展趨勢(shì)是什么。如果我們不了解的情況下，可以多在百度、知乎、新聞門(mén)戶上進(jìn)行搜索和了解

盡可能收集可信的數(shù)據(jù)報(bào)告或者圖表，便于信息的整理。

對(duì)于一些新上線不太久的應(yīng)用，通常會(huì)帶有非常明顯的初創(chuàng)團(tuán)隊(duì)烙印，可能有一些匪夷所思的交互或者功能，這時(shí)候在應(yīng)用上浪費(fèi)時(shí)間干想是沒(méi)有用的，可以花點(diǎn)時(shí)間在網(wǎng)上找找創(chuàng)始成員的履歷，會(huì)對(duì)我們認(rèn)識(shí)應(yīng)用有更大的幫助。比如拼多多創(chuàng)始人在上線前有 “拼好貨” 的多年積累，產(chǎn)品模式是經(jīng)過(guò)檢驗(yàn)的產(chǎn)物，有大量相似的特征。

最后，還可以對(duì)產(chǎn)品當(dāng)前的處境做簡(jiǎn)單的收集，有沒(méi)有強(qiáng)大的外部競(jìng)爭(zhēng)，它們各自在市場(chǎng)中占比的數(shù)據(jù)，以及用戶在不同商店、社交平臺(tái)中對(duì)其的評(píng)價(jià)。這可以幫助我們對(duì)該產(chǎn)品的競(jìng)爭(zhēng)力和商譽(yù)做出初步的認(rèn)識(shí)。

2.用戶研究

用戶研究這個(gè)名詞出現(xiàn)得非常頻繁，想不看見(jiàn)都難，它是專業(yè)產(chǎn)品團(tuán)隊(duì)必備的項(xiàng)目準(zhǔn)備工作。用戶研究的方式和產(chǎn)出物多種多樣，通常我們會(huì)建立清晰的目標(biāo)畫(huà)像找出目標(biāo)用戶，然后對(duì)他們進(jìn)行訪談、調(diào)研，設(shè)計(jì)可用性測(cè)試、眼動(dòng)測(cè)試等等，幫助我們更好的推出可以被用戶喜愛(ài)的產(chǎn)品。

但在我們研究外部產(chǎn)品的時(shí)候，往往不需要將它想得太復(fù)雜（除非是對(duì)直接競(jìng)爭(zhēng)對(duì)手的分析），否則只需要整理該產(chǎn)品的目標(biāo)用戶畫(huà)像即可。

用戶畫(huà)像即總結(jié)核心用戶多個(gè)緯度的特征，主要分成三個(gè)部分。

生理主要就是用戶的年齡、性別、身高或體重等特性，外在的則是諸如學(xué)歷、工作履歷、所處城市、薪資狀況等可以直接收集的內(nèi)容，內(nèi)在的則是性格、愛(ài)好、行為（喜好女裝之類的……）等等和關(guān)聯(lián)主觀特征的內(nèi)容。

根據(jù)我們的需要對(duì)這些屬性進(jìn)行篩選，就可以制作幾個(gè)標(biāo)準(zhǔn)的用戶畫(huà)像卡片出來(lái)，比如下方這種。

3.用戶體驗(yàn)要素

因?yàn)檫@兩年對(duì)于產(chǎn)品、體驗(yàn)、設(shè)計(jì)的專業(yè)分析需求高漲，所以 《用戶體驗(yàn)要素》 中的五要素就成為大家喜聞樂(lè)見(jiàn)的分析模型，它給我們提供了明確的分析步驟和方向，易于上手。

戰(zhàn)略層：

戰(zhàn)略層指的是產(chǎn)品在宏觀、商業(yè)層面上的的考慮，需要我們自己的判斷，因?yàn)槿绻皇莾?nèi)部人員，那么對(duì)于一款產(chǎn)品的戰(zhàn)略層思考是無(wú)法做到絕對(duì)準(zhǔn)確的。雖然網(wǎng)上可以搜索到很多商業(yè)分析和企業(yè) PR 稿，但是這些內(nèi)容的使用往往是具有欺騙性的，是基于運(yùn)營(yíng)需求拋給大眾的障眼法。

比如我之前分析的一篇關(guān)于瑞幸咖啡的總結(jié)（個(gè)人總結(jié)）：

https://www.zhihu.com/question/306547560/answer/559771838

所以，報(bào)告中沒(méi)有充足的把握時(shí)就不要在這個(gè)問(wèn)題上侃侃而談，只需要回答，一款什么樣的產(chǎn)品才可以滿足用戶的需求獲得商業(yè)上的成功。

范圍層：

戰(zhàn)略層可以獲得的信息通常是一個(gè)比較宏觀、含糊的概念，所以，我們要來(lái)制定更具體的方案，明確產(chǎn)品應(yīng)該包含那些功能和服務(wù)，規(guī)劃產(chǎn)品功能要覆蓋的范圍。

比如提供奶茶的外賣(mài)服務(wù) APP，初期我們的功能包含選擇店鋪商品、加入購(gòu)物車(chē)、交易結(jié)算系統(tǒng)，但不包含資訊推送、曬單社區(qū)等功能。

所以，范圍層就是將該產(chǎn)品提供的最重要的服務(wù)、產(chǎn)品內(nèi)容羅列出來(lái)。

結(jié)構(gòu)層：

這就是一個(gè)產(chǎn)品的功能或者信息結(jié)構(gòu)，通常我們可以用思維導(dǎo)圖或者樹(shù)狀圖的方式進(jìn)行梳理。最初級(jí)的方法是通過(guò)對(duì)可視頁(yè)面的層級(jí)做梳理，整理出產(chǎn)品的頁(yè)面層級(jí)結(jié)構(gòu)。

而更好的方式，是根據(jù)產(chǎn)品的幾個(gè)核心功能建立產(chǎn)品流程圖，將操作的結(jié)構(gòu)與邏輯展示出來(lái)，繪制這個(gè)圖表的過(guò)程中可以更好的加深我們對(duì)產(chǎn)品的理解。

框架層：

框架層即頁(yè)面的布局結(jié)構(gòu)，以及組件層面的交互和展示，一般來(lái)說(shuō)，可以研究產(chǎn)品的主要流程頁(yè)面，每個(gè)頁(yè)面的布局和信息展示是否合理，操作是否順暢。

如果覺(jué)得沒(méi)法很好的理解，書(shū)中建議是通過(guò) “界面設(shè)計(jì)”、“導(dǎo)航設(shè)計(jì)”、“信息設(shè)計(jì)” 三個(gè)角度切入，但這樣操作性太差。建議在分析這個(gè)界面的時(shí)候，只要關(guān)注內(nèi)容從上到下的布局內(nèi)容有沒(méi)有契合主題，并且重要的組件中，字段權(quán)重能不能很好的被表現(xiàn)出來(lái)即可。

比如我們看下面飛豬的航班頁(yè)面，頁(yè)面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中，最被用戶關(guān)注的價(jià)格信息得到凸顯（證明買(mǎi)機(jī)票的用戶對(duì)價(jià)格更敏感），時(shí)間作為次級(jí)權(quán)重元素相對(duì)被弱化但依舊易于識(shí)別。

表現(xiàn)層：

這里就是著重分析產(chǎn)品設(shè)計(jì)本身的特點(diǎn)了，相對(duì)就容易了不少，只要分析配色的方案，設(shè)計(jì)的一致性，捕捉動(dòng)效和情感化設(shè)計(jì)的細(xì)節(jié)即可。

就不展開(kāi)更多的說(shuō)明了。

用戶體驗(yàn)五要素的分析一樣不是散亂的拋出結(jié)果而已，如果按原書(shū)的方法做分析，肯定也會(huì)作出非常復(fù)雜的報(bào)告，所以我再提煉一次用戶體驗(yàn)分析的思路。

通過(guò)分析產(chǎn)品的商業(yè)目標(biāo)，進(jìn)入劃分功能和服務(wù)的范圍，之后根據(jù)核心的服務(wù)總結(jié)主要操作流程，并在最后的交互、布局、設(shè)計(jì)的幾個(gè)方向來(lái)判斷它們是否有益于核心流程，能被用戶接受。然后得出結(jié)論，如果有益，那么產(chǎn)品符合商業(yè)目標(biāo)的條件，如果沒(méi)有，則難以達(dá)成。

4.盈利模式

有一些產(chǎn)品本身就有購(gòu)買(mǎi)要素，或者有付費(fèi)的項(xiàng)目，那么對(duì)它作出分析是非常重要的。因?yàn)槿魏紊虡I(yè)產(chǎn)品最終的目的都是為了盈利，所以多數(shù)產(chǎn)品會(huì)在這方面下足功夫。

如果是電商、外賣(mài)、快遞這類直接發(fā)生交易的應(yīng)用類型，只要分析產(chǎn)品本身的交流流程即可，相對(duì)比較直觀。

如果是類似社交、資訊、工具類的應(yīng)用，往往在盈利點(diǎn)上會(huì)比較隱晦，并通常包含較多零散的盈利來(lái)源，比如不同位置的廣告位，訂閱服務(wù)，付費(fèi)道具等等。

我們要做的就是把這些盈利來(lái)源全部羅列下來(lái)，如果知道價(jià)格也對(duì)應(yīng)填寫(xiě)上去即可。

5.運(yùn)營(yíng)策略

如果不是以工具為導(dǎo)向的產(chǎn)品，通常就有比較重的日常運(yùn)營(yíng)。包括用戶運(yùn)營(yíng)、社區(qū)運(yùn)營(yíng)、媒體運(yùn)營(yíng)、內(nèi)容運(yùn)營(yíng)和活動(dòng)運(yùn)營(yíng)。

有不少產(chǎn)品的迭代是以運(yùn)營(yíng)為導(dǎo)向的，我們直接通過(guò)產(chǎn)品功能本身去分析它往往得不到理想的結(jié)果，所以需要從運(yùn)營(yíng)的角度進(jìn)行切入。

比如每日優(yōu)鮮這樣的生鮮電商，如果仔細(xì)研究用過(guò)它的服務(wù)，就會(huì)發(fā)現(xiàn)這款產(chǎn)品本身交易的流程乏善可陳，但是出彩的地方是在于層出不窮的運(yùn)營(yíng)策略，無(wú)論是選品的內(nèi)容運(yùn)營(yíng)或者活動(dòng)運(yùn)營(yíng)上，而這些運(yùn)營(yíng)方式才是推動(dòng)產(chǎn)品的改動(dòng)和優(yōu)化的主要因素。

作者：酸梅干超人      來(lái)源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

新手和初學(xué)者總會(huì)錯(cuò)誤的將審美的能力托付給天賦或是科班教育，作為自己審美水平低下的借口。如果這么想，那肯定不會(huì)為自己帶來(lái)任何改善。

今天，我要寫(xiě)一些不一樣的東西出來(lái)。

按我一貫的風(fēng)格，我不喜歡在入門(mén)問(wèn)題上高開(kāi)高走，一開(kāi)始就討論比較概念或者藝術(shù)性的問(wèn)題，就講講在最初級(jí)月薪不過(guò)萬(wàn)，連自己工作設(shè)計(jì)類型相關(guān)的作品都沒(méi)辦法評(píng)判好壞的情況下，展開(kāi)討論。

所以，我要寫(xiě)一篇接地氣的提高審美的回答。

關(guān)于比較

審美是一個(gè)宏大的話題，無(wú)論是文學(xué)、影視、視覺(jué)、時(shí)尚等我們都可以審視它們的 “美”。不同領(lǐng)域的 “美” 有不同的形式，不同的立場(chǎng)，不同的角度，不同的原則。

在這里，我們不談具體某個(gè)領(lǐng)域?qū)徝赖囊?guī)則和方式，我們來(lái)講講提升審美的具體做法。

講一個(gè)例子，在國(guó)內(nèi)，我們普遍覺(jué)得女生在對(duì)穿衣打扮的審美上比男生更優(yōu)，對(duì)于其它經(jīng)過(guò)設(shè)計(jì)的事物所展現(xiàn)的審美也比男生更好。這種差別在高中時(shí)期便逐漸放大，在大學(xué)中就能明顯得感覺(jué)出來(lái)這一點(diǎn)。

這是由于基因天賦論導(dǎo)致的嗎？

是也不是。女生愛(ài)美這點(diǎn)是一個(gè)既成的事實(shí)，有比較大的先天因素，而因?yàn)閷?duì)美好事物的追求比男生更強(qiáng)烈，所以在審美上整體大于男性。

但大家要注意，這個(gè)因果關(guān)系的模型太過(guò)簡(jiǎn)陋，我們要進(jìn)一步來(lái)分析為什么對(duì)美好事物的追求就能導(dǎo)致審美上的差異，這就是我們提升審美的關(guān)鍵，先從衣品講起。

原因1：

基于對(duì)美的追求，女生往往會(huì)花更多的時(shí)間在穿衣打扮上，也就意味著要購(gòu)物。無(wú)論是在商場(chǎng)還是淘寶，女生逛起來(lái)的熱情與時(shí)長(zhǎng)都遠(yuǎn)遠(yuǎn)大于男生，這造成了女生在查看數(shù)量上也遠(yuǎn)遠(yuǎn)大于男生。

這就和很多設(shè)計(jì)前輩告訴你要 “多看” 的做法是一樣的，通過(guò)量變引起質(zhì)變，只要你看的夠多，審美自然就可以提升了。

這話說(shuō)的頗有道理，但依舊在推理上站不住腳。因?yàn)椋孔優(yōu)槭裁匆欢ň湍墚a(chǎn)生質(zhì)變？這個(gè)變化的邏輯依據(jù)是什么？在青銅段位里打了一萬(wàn)盤(pán)，也不代表一定能打進(jìn)最強(qiáng)王者不是。

所以，這就是要引入第二個(gè)原因，關(guān)于對(duì)比。

原因2：

女生逛街能逛這么久，往往在除了看以外，還會(huì)做一件事，就是大量的試衣服（此處被我言中的女性同學(xué)可以點(diǎn)個(gè)贊讓我看見(jiàn)你們的雙手），經(jīng)常抱了一整籮筐的衣服進(jìn)試衣間，在里面對(duì)著鏡子鼓搗擺 Pose 大半個(gè)小時(shí)，然后才能挑選一兩件自己喜歡的出來(lái)，或者干脆一件也不要。

嗯，不要問(wèn)我是怎么知道的……

在這個(gè)過(guò)程里，就發(fā)生了提升審美中最重要的一環(huán) —— 對(duì)比。通過(guò)大量的對(duì)比，來(lái)找出好看的、高級(jí)的、適合自己的衣服。也因?yàn)閷?duì)比，女生們就通過(guò)實(shí)踐來(lái)了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。

這個(gè)過(guò)程實(shí)際上收窄了選擇的范圍，比如一個(gè)個(gè)子比較高挑五官比較立體的女生，是很難在比較過(guò)后還會(huì)選擇那些可愛(ài)、少女、小鳥(niǎo)依人的設(shè)計(jì)。很可能會(huì)偏向運(yùn)動(dòng)、男友、中性等風(fēng)格。

而在有了具體的偏向以后，她們依舊會(huì)深入到這個(gè)范圍，繼續(xù)觀察、嘗試、對(duì)比，然后再次提升對(duì)這些東西的理解和審美。

所以，看吧，審美的提升第一步就是這么簡(jiǎn)單，通過(guò)大量的觀察，然后對(duì)比和篩選，就能非常直接的提升我們的審美，這個(gè)提升的過(guò)程完全依靠的是人的主觀能動(dòng)性。

日常生活中我們遇到的絕大多數(shù)某些人審美比自己更好的人，都是因?yàn)樗麄冊(cè)谀承┓矫婵催^(guò)的，比較的比我們更多，而不是依靠天賦的加持，這個(gè)思路落實(shí)到創(chuàng)作中也一樣。

當(dāng)然，我絲毫不懷疑人類的歷史長(zhǎng)河里，有極少數(shù)人打娘胎里就因?yàn)槿旧w中某些基因片段神秘的律動(dòng)，而獲得了獨(dú)特的審美與創(chuàng)作天賦，但那始終是一個(gè)可以忽略的概率。審美的提升是個(gè)人主動(dòng)的行為，不要祈禱上帝在你身上投的骰子能得到你要的結(jié)果。

即使拋開(kāi)這群有 “天賦” 的神仙，也依舊還有很多第二梯隊(duì)、第三梯隊(duì)的老法師們通過(guò)奮斗逼的經(jīng)歷功成名就不是。

所以別這么自戀總要搬達(dá)芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問(wèn)問(wèn)自己鑰匙配嘛？

什么？您配？

您配幾把……

具體案例

不正經(jīng)到此為止，正經(jīng)臉……

既然說(shuō)了那么多關(guān)于比較的問(wèn)題，空口白話難以令人信服，所謂沒(méi)圖我說(shuō)個(gè)……錘子。因?yàn)楹芏嘈氯硕紩?huì)說(shuō)，你覺(jué)得大多數(shù)設(shè)計(jì)案例看起來(lái)都挺好，覺(jué)得挑不出什么毛病啊。

所以，下面我挑了幾個(gè)與設(shè)計(jì)有關(guān)的方向，并找了一些案例出來(lái)，你們來(lái)看看同類型中，哪一張圖是最優(yōu)的。

而沒(méi)被選上的那些，對(duì)于你選出來(lái)的圖而言，它們當(dāng)然都是有 “問(wèn)題的”。

人像攝影

美食攝影

室內(nèi)設(shè)計(jì)

產(chǎn)品設(shè)計(jì)

海報(bào)設(shè)計(jì)

管理界面

UI APP 界面

小結(jié)

審美提升的第一步，就是從對(duì)比開(kāi)始，因?yàn)檫@個(gè)世界對(duì)所有事物的評(píng)判，都有不同方向的兩個(gè)極端。善惡、美丑、高矮、胖瘦，是對(duì)立而相互依存。

就像左拉的《陪襯人》中所講的：

“……另一個(gè)卻總是奇丑無(wú)比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個(gè)比較。要知道，你上了圈套。那個(gè)丑女子要是獨(dú)自走在街上，會(huì)嚇你一跳；那個(gè)相貌平常的，會(huì)被你毫不在意地忽略過(guò)去。但當(dāng)她們結(jié)伴而行時(shí)，一個(gè)人的丑就提高了另一個(gè)人的美?！?

之前我們講了關(guān)于審美提升的第一步對(duì)比，但是我們留了一個(gè)疑問(wèn)，為什么依靠對(duì)比我們可以提升，或者只靠對(duì)比我們就一定可以提升審美嘛？審美提升起來(lái)就如此容易？

當(dāng)然不是！

對(duì)比的過(guò)程只是表象，我們還要追究深層次的原因，那就是“推理”。

在系統(tǒng)性提升審美的道路上，最大的敵人就是——主觀感受。因?yàn)闊o(wú)論我怎么解釋和審美提升相關(guān)的方法，總有人會(huì)覺(jué)得它就是依靠個(gè)人審美，不同人審美不一樣，總能找出有的人就喜歡網(wǎng)紅臉但看不上湯唯或者高圓圓的案例。

沒(méi)錯(cuò)，每個(gè)人都有自己的審美，無(wú)論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設(shè)計(jì)師該擁有的審美是不能這么隨意的，因?yàn)樽鳛閷I(yè)人士，我們的審美就要符合 “專業(yè)” 的要求，即通過(guò)客觀標(biāo)準(zhǔn)來(lái)評(píng)價(jià)事物的內(nèi)在價(jià)值。

比如茶、酒、咖啡這類飲品，都已經(jīng)擁有非常成熟的市場(chǎng)，會(huì)根據(jù)產(chǎn)品的價(jià)值形成對(duì)應(yīng)的價(jià)格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個(gè)人的選擇上，任何人都可以偏愛(ài)一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標(biāo)瑰夏冰滴，但無(wú)論你怎么想，也無(wú)法改變它們價(jià)值不對(duì)等的事實(shí)，瑰夏手沖有遠(yuǎn)遠(yuǎn)超出速溶的口感和品質(zhì)。

但超出的部分在哪里？答不答得上來(lái)，就是內(nèi)行和外行的區(qū)別。

內(nèi)行經(jīng)過(guò)專業(yè)的訓(xùn)練可以品嘗出其中蘊(yùn)含的風(fēng)味、口感，解釋它們與產(chǎn)地氣候的聯(lián)系，儲(chǔ)藏運(yùn)輸?shù)臈l件，以及沖制過(guò)程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒(méi)有體系的評(píng)價(jià)。

如果設(shè)計(jì)師對(duì)設(shè)計(jì)相關(guān)的作品只能做到和外行一樣的水平，那么他也只能是設(shè)計(jì)師中的外行，并且缺乏成為優(yōu)秀設(shè)計(jì)師的必要基礎(chǔ)。

所以，接下來(lái)我們來(lái)探究一下，作品的評(píng)價(jià)為什么重要！

丹尼爾·卡尼曼的暢銷(xiāo)書(shū)《思考快與慢》中，將我們的思考方式簡(jiǎn)單的劃分成了兩個(gè)部分，用了非常簡(jiǎn)單粗暴的 “系統(tǒng)1”、“系統(tǒng)2” 命名。簡(jiǎn)單概括它們的含義，就是系統(tǒng) 1 是聯(lián)想式思維，系統(tǒng)2是規(guī)則式思維，也可以看成是直覺(jué)與慎思的區(qū)別。

先說(shuō)系統(tǒng)1，直覺(jué)是我們大腦對(duì)日常接受信息簡(jiǎn)化處理的產(chǎn)物，我們的大腦就像處理器一樣，每天都要面對(duì)海量的信息通過(guò)視覺(jué)、味覺(jué)等五感導(dǎo)入，如果它沒(méi)有任何區(qū)別的對(duì)這些內(nèi)容進(jìn)行深度、縝密的分析，那么它一定會(huì)超負(fù)荷運(yùn)轉(zhuǎn)并最終自我毀滅。

所以生物的演化，讓我們的大腦進(jìn)化出了一套可以對(duì)信息進(jìn)行過(guò)濾和簡(jiǎn)化的系統(tǒng)，格式塔心理學(xué)中關(guān)于視覺(jué)對(duì)物體簡(jiǎn)化、完形的理論，也是由其產(chǎn)生，這就是我們對(duì)很多事物下意識(shí)反應(yīng)的來(lái)源。比如在走路的過(guò)程中，看見(jiàn)一輛自行車(chē)直挺挺的從遠(yuǎn)處像你沖過(guò)來(lái)，那么你會(huì)馬上感覺(jué)到危險(xiǎn)并往某個(gè)方向規(guī)避，整個(gè)過(guò)程會(huì)在不到1秒的時(shí)間內(nèi)完成。

而系統(tǒng)2，就是對(duì)事物進(jìn)行邏輯推導(dǎo)的深入思考，如果用它來(lái)處理危險(xiǎn)的事件，那么結(jié)果可能是我們先判斷這輛自行車(chē)行駛的軌跡并得出它前進(jìn)的方向與我站立的位置相交，并且它的時(shí)速約為 40km， 在撞到我的時(shí)間還有3S，如果以這種速度撞在我們身上，大概率會(huì)發(fā)生……

“BONG～”

那就不用想可能會(huì)發(fā)生什么事情，你已經(jīng)被撞飛了，可以直接得到結(jié)果。類似的事情還有很多，無(wú)論是對(duì)與危險(xiǎn)的，還是日常事務(wù)的作用，系統(tǒng)1都發(fā)揮出了極其重要的作用。也因?yàn)樗挠行?，而?dǎo)致我們對(duì)它依賴過(guò)度。所以，很多人在對(duì)于美丑的審視上只依靠系統(tǒng) 1 來(lái)完成，而不會(huì)深入去思考各中原由。

系統(tǒng) 1 對(duì)美丑的判斷，是個(gè)人的，但它并沒(méi)有 “審” 的過(guò)程，專業(yè)的分析也就無(wú)從談起。斯洛曼和費(fèi)恩巴赫所著的 《知識(shí)的錯(cuò)覺(jué)》 里提到：

"直覺(jué)給予我們一個(gè)簡(jiǎn)化的、粗略的，而且通常足夠好的分析，這讓我們產(chǎn)生錯(cuò)覺(jué)，自以為所知甚廣。但是當(dāng)我們慎思時(shí)，我們才意識(shí)到事物實(shí)際上何其復(fù)雜，我們真的只是略知皮毛。"

審美和品嘗美酒、咖啡一樣，需要通過(guò)了解專業(yè)的知識(shí)，培養(yǎng)系統(tǒng)的分析方式進(jìn)行刻意練習(xí)，逐漸擺脫依靠我們直覺(jué)做出的不可靠的判斷。

因?yàn)槿魏蝺?yōu)秀的設(shè)計(jì)作品，在創(chuàng)作過(guò)程中都不可能是隨性而為的，都是經(jīng)過(guò)創(chuàng)作者深思熟慮后的產(chǎn)物，我們對(duì)優(yōu)秀作品的評(píng)價(jià)，就是通過(guò)專業(yè)的知識(shí)對(duì)其創(chuàng)作邏輯進(jìn)行推導(dǎo)，哪里有亮點(diǎn)，哪些是敗筆，都是清晰可見(jiàn)的。

它不僅幫助我們判斷別人作品的優(yōu)劣，也可以分析我們自己作品的不足，從而得到改進(jìn)的思路。所以為什么說(shuō)審美要先于實(shí)踐，如果連什么是好的都不了解，自己設(shè)計(jì)出來(lái)的東西都不知道如何評(píng)價(jià)，又談何進(jìn)步？

在我自己的教學(xué)經(jīng)驗(yàn)中，這個(gè)問(wèn)題所表現(xiàn)出來(lái)的差異就很有意思。如有一些審美能力較差的學(xué)生第一次設(shè)計(jì) Banner ，花了非常多精力和時(shí)間，自我感覺(jué)不錯(cuò)，但是作品質(zhì)量極差，會(huì)在得到否定的評(píng)價(jià)以后表示詫異和茫然，因?yàn)樗麄円呀?jīng)預(yù)感應(yīng)該得到贊美與肯定。而審美較好的學(xué)生則是在完成作業(yè)以后充分的發(fā)現(xiàn)自己設(shè)計(jì)的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對(duì)其作品做出評(píng)價(jià)，因?yàn)樗麄冏约阂矔?huì)覺(jué)得作品質(zhì)量差的沒(méi)評(píng)價(jià)的必要。

但不幸的是，在商業(yè)視覺(jué)設(shè)計(jì)的領(lǐng)域中，提升我們的專業(yè)評(píng)價(jià)的能力，并不如其它行業(yè)一般有固定的流程和教學(xué)，按筆者自己長(zhǎng)期的經(jīng)驗(yàn)來(lái)看，如果我們盲目的從藝術(shù)、設(shè)計(jì)、心理多個(gè)學(xué)科的基礎(chǔ)理論開(kāi)始學(xué)起，那提升的速度太緩慢，需要的周期太長(zhǎng)，而且有非常強(qiáng)烈的挫敗感，如果沒(méi)有好老師的引導(dǎo)，還容易鉆牛角尖誤入歧途。

所以，第一部分的對(duì)比，重要性才能體現(xiàn)出來(lái)。我們要通過(guò)實(shí)踐作為基礎(chǔ)，來(lái)系統(tǒng)性的提升我們的專業(yè)審美能力，通過(guò)應(yīng)用推理的能力，抑制我們無(wú)所不在的直覺(jué)。

前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒(méi)太多關(guān)系，這是最氣人的。所以，最后一部分，我們來(lái)講講具體實(shí)施的做法。

先聲明，審美提升是要通過(guò)刻意練習(xí)的步驟的，誰(shuí)也不可能只通過(guò)區(qū)區(qū)幾篇文章就以為自己已經(jīng)明白了，所以需要執(zhí)行下面這個(gè)循環(huán)步驟：

    ? 采集：大量觀察和收集作品

    ? 對(duì)比：留下它們中最好的

    ? 分析：尋找優(yōu)劣差異的原因

開(kāi)始前，還要解釋一件事，就是我們提升審美都要先從某個(gè)點(diǎn)開(kāi)始突破，從你最感興趣的，或是工作關(guān)聯(lián)度最高的設(shè)計(jì)類型開(kāi)始，而不是無(wú)差別的亂看。與美術(shù)學(xué)相關(guān)的所有設(shè)計(jì)中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。

1.采集

觀察的來(lái)源多種多樣，強(qiáng)烈建議初期只使用花瓣即可，不要分心到太多的平臺(tái)上，選擇太多往往不是好事，會(huì)增加干擾，讓我們疲于奔命，模糊一開(kāi)始的目標(biāo)。

例如首先要提升在 APP 方面的審美，我們先在花瓣中創(chuàng)建一個(gè) APP 的畫(huà)板，然后搜索 APP 相關(guān)的關(guān)鍵字，但不需要關(guān)注第一頁(yè)彈出的采集結(jié)果，直接查看 “畫(huà)板” 選項(xiàng)。

畫(huà)板是別的用戶自己整理的采集合集，我們可以通過(guò)封面簡(jiǎn)單篩選出你喜歡的，然后打開(kāi)它們，瀏覽里面收集的作品。

然后盡量按自己最高的要求來(lái)找到能讓自己覺(jué)得滿意的作品，再將它們 “采集” 到自己創(chuàng)建的畫(huà)板中，并設(shè)定一個(gè)數(shù)量，比如采集到500張為止。

2.對(duì)比：

達(dá)到目標(biāo)的數(shù)量就停下來(lái)，因?yàn)樵俨杉氯ツ軒?lái)的作用已經(jīng)非常有限了。雖然采集中已經(jīng)包含了選擇和對(duì)比的過(guò)程，但我們要更進(jìn)一步，在自己的選出來(lái)的作品里進(jìn)行比較。相信在完成這個(gè)步驟以后，你們已經(jīng)可以明顯感覺(jué)到最后 100 張收集的質(zhì)量是遠(yuǎn)遠(yuǎn)高于前 100 張的。在羅子雄 TEDX 的演講中就說(shuō)過(guò)：你回頭看三個(gè)月前收集的作品，會(huì)發(fā)現(xiàn)它們都是垃圾……

更極端一點(diǎn)，那就是我們只在挑選的作品中留下最好的十分之一，聽(tīng)起來(lái)是不是很刺激。

也就是我們要開(kāi)始在自己選出來(lái)的作品中，你要?jiǎng)h掉其中的 450 張作品 （最好有留底），即使當(dāng)中有一些你非常喜歡，而且它們都是你的勞動(dòng)果實(shí)。但就因?yàn)檫@樣，你才會(huì)更慎重的進(jìn)行比較。因?yàn)槎鄶?shù)人的采集只是走馬觀花，后面根本就不會(huì)看這些東西。

當(dāng)然，這個(gè)過(guò)程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來(lái)會(huì)更順手一點(diǎn)。

3.分析：

在上一步操作里，我們會(huì)動(dòng)用我們腦海里所有關(guān)于理性的分析方法來(lái)解釋它們的優(yōu)劣，并得出結(jié)論，雖然這些想法可能很幼稚或漏洞百出，但不要擔(dān)心，最后一步就是用來(lái)解決這個(gè)問(wèn)題的。

我們捉對(duì)挑選一些作品出來(lái)，在剩下的作品中和已經(jīng)被你否決掉的作品各選一張，然后將它們排列到一起，對(duì)比它們的優(yōu)缺點(diǎn)，比如下圖是我從我自己畫(huà)板中找出的近期和早期的采集作品。

專業(yè)的分析是怎么得出的？當(dāng)然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設(shè)計(jì)的理論給格出來(lái)，這條路是走不通的，所以才有王陽(yáng)明 “知行合一” 的教誨。

我們要把對(duì)比的內(nèi)容進(jìn)行細(xì)化，把一套作品看成若干細(xì)節(jié)的合集，明確比較的目標(biāo)，這樣才能得到理想的結(jié)果，比如：

    ? 字體

    ? 配色

    ? 布局

    ? 配圖

    ? ……

比如我們挑文字出來(lái)分析，這時(shí)候局勢(shì)已經(jīng)比較明朗了，上側(cè)的設(shè)計(jì)中文字是能被清晰識(shí)別的，在不同的字段類型中字重有對(duì)應(yīng)的調(diào)整，主次有序。而下側(cè)的文字應(yīng)用則缺乏對(duì)比，部分文字甚至和背景都無(wú)法做出區(qū)分，且字重幾乎沒(méi)有變化，使用了多種字體沒(méi)有整體性，導(dǎo)致最后的閱讀感受極差。

同理，你可以再試試分析其它幾個(gè)細(xì)節(jié)，是不是簡(jiǎn)單多了。如果這時(shí)候你再覺(jué)得手足無(wú)措，完全分析不出什么具體的東西怎么辦？

學(xué)??！

如對(duì)比到配色，我們解釋不出為什么右圖的配色不行，那就針對(duì)配色去了解相關(guān)的配色技巧、理論，網(wǎng)上可以搜索的分享就一大堆了，比如關(guān)于色彩對(duì)比、用色比例等等，將你學(xué)到的知識(shí)現(xiàn)學(xué)現(xiàn)用套進(jìn)這兩張作品中，也就可以很快的得到驗(yàn)證。

后面每出現(xiàn)這樣的問(wèn)題，就現(xiàn)學(xué)現(xiàn)賣(mài)，不僅可以直接提升我們對(duì)作品的理解能力，還能鞏固我們學(xué)過(guò)的理論知識(shí)。多分析幾組對(duì)比，你就會(huì)發(fā)現(xiàn)對(duì)于這類作品的審美和理解已經(jīng)得到了質(zhì)的飛躍，這時(shí)候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環(huán)。

結(jié)尾

對(duì)于設(shè)計(jì)基礎(chǔ)審美的提升就解釋到這里了，再寫(xiě)下去也沒(méi)人看了（寫(xiě)不動(dòng)了）。我們?cè)诼殬I(yè)相關(guān)的審美提升一定要具有實(shí)用性，接地氣，目標(biāo)準(zhǔn)確的特點(diǎn)，不要這個(gè)階段跑去聽(tīng)古典，看畫(huà)展，讀詩(shī)歌，所以整個(gè)回答我都盡量避開(kāi)這些坑不提。

設(shè)計(jì)師的專業(yè)性首先不是追求審美的極限，而是先提高自己的下限。只有超出自己動(dòng)手能力的下限，才能讓我們拒絕粗制濫造的作品，驅(qū)動(dòng)我們進(jìn)步。

最后，在同意我前面觀點(diǎn)的基礎(chǔ)上，大家可以嘗試我最后給出的方法，如果你覺(jué)得你的審美還提升不上去，那歡迎你們隨時(shí)找我算賬！而只是看完卻沒(méi)有實(shí)質(zhì)行動(dòng)，那就不要再抱怨自己什么提升上去了。

作者：酸梅干超人      來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

這兩年互聯(lián)網(wǎng)行業(yè)在 C 端市場(chǎng)上的增長(zhǎng)已經(jīng)不足以吸引大眾和投資者的視線，B 端作為一個(gè)新的熱點(diǎn)開(kāi)始被追捧。 

但 B 端是一個(gè)泛指，它是由若干面向商業(yè)場(chǎng)景的不同細(xì)分行業(yè)組成。包括云服務(wù)、SAAS、PAAS、定制系統(tǒng)、數(shù)據(jù)可視化、智慧平臺(tái)、商用 HMI 等等。 

不同 B 端細(xì)分行業(yè)差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業(yè)一樣。每當(dāng)我們討論 B 端行業(yè)前景，就一定要聚焦到具體的行業(yè)類型，否則就沒(méi)有討論下去的基礎(chǔ)。 

而我們今天重點(diǎn)聚焦的，就是目前聲勢(shì)極大的數(shù)據(jù)可視化行業(yè)。 

這是最近很多同學(xué)咨詢和關(guān)注的領(lǐng)域，也是各大顯卡廠商、3D 引擎發(fā)布會(huì)上的?？汀?nbsp;

各種讓人眼花繚亂的圖例和技術(shù)應(yīng)用解說(shuō)，很容易讓我們產(chǎn)生未來(lái)已經(jīng)加速向我們走來(lái)的 “幻覺(jué)”，此時(shí)不抓緊時(shí)代的機(jī)遇投身數(shù)字化界面的設(shè)計(jì)，更待何時(shí)？ 

但我還是要?jiǎng)翊蠹覄e光顧著雞凍，冷靜下來(lái)好好分析這些行業(yè)和市場(chǎng)狀況，當(dāng)你了解的越多，你就越會(huì)發(fā)現(xiàn)，這個(gè)職業(yè)方向和你們想的不太一樣…… 

首先，數(shù)字可視化領(lǐng)域也是一個(gè)比較籠統(tǒng)的行業(yè)，它依舊可以拆分出若干細(xì)分領(lǐng)域。但我先簡(jiǎn)單根據(jù)視覺(jué)展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據(jù)這個(gè)分而不是商業(yè)場(chǎng)景，下面會(huì)做進(jìn)一步解釋。 

首先，數(shù)據(jù)可視化不是用了花哨的 3D 視覺(jué)才叫可視化，平面展示類型是絕對(duì)不能忽視的一個(gè)方向。它的主要應(yīng)用場(chǎng)景集中在商業(yè) BI ，統(tǒng)計(jì)分析工具等。 

比如統(tǒng)計(jì)并查看網(wǎng)站、應(yīng)用、店鋪數(shù)據(jù)的平臺(tái)。 

這類產(chǎn)品有非常廣泛的使用場(chǎng)景和需求，是現(xiàn)代企業(yè)和產(chǎn)品運(yùn)營(yíng)的基石，它存在的價(jià)值是毋庸置疑的。 

而另一類 3D 展示型的細(xì)分發(fā)展方向，包含展示大屏、數(shù)字孿生、智慧項(xiàng)目、商用 HMI 等類型。 

這類項(xiàng)目更多是由技術(shù)發(fā)展催生而來(lái)的 “新需求”，和 5G 的發(fā)展是高度相似的。我對(duì)這個(gè)行業(yè)的發(fā)展?jié)摿κ钦J(rèn)可的，但對(duì)設(shè)計(jì)師從事這個(gè)行業(yè)的總體前景持悲觀態(tài)度。 

下面，針對(duì)真正的數(shù)據(jù)可視化設(shè)計(jì)師，我會(huì)從下面幾個(gè)維度展開(kāi)討論（唱起反調(diào)）： 

- 知識(shí)門(mén)檻 

- 行業(yè)特征 

- 團(tuán)隊(duì)價(jià)值 

數(shù)據(jù)可視化是對(duì)數(shù)據(jù)信息進(jìn)行圖形化設(shè)計(jì)的過(guò)程，這個(gè)行業(yè)不是這兩年才出現(xiàn)的，而是由來(lái)已久。 

從世界上第一個(gè)圖表的誕生之后，就有無(wú)數(shù)統(tǒng)計(jì)學(xué)家和設(shè)計(jì)師投身到這個(gè)領(lǐng)域中，發(fā)明和設(shè)計(jì)出各種精妙絕倫的圖形。

數(shù)據(jù)可視化的重要性不會(huì)比任何其它設(shè)計(jì)行業(yè)低，但是，數(shù)據(jù)可視化重要性的來(lái)源，是由數(shù)據(jù)本身的價(jià)值賦予的。因?yàn)樵忈寯?shù)據(jù)的方式精彩，所以有價(jià)值，而不是僅僅是因?yàn)槟阕龅煤每辞一ㄉ凇?nbsp;

更進(jìn)一步說(shuō)，就是數(shù)據(jù)可視化的價(jià)值是被統(tǒng)計(jì)學(xué)賦予的，而統(tǒng)計(jì)學(xué)是被這個(gè)世界真實(shí)需要的。 

但很可惜，極少有 B 端設(shè)計(jì)師會(huì)投入精力到統(tǒng)計(jì)學(xué)的基礎(chǔ)知識(shí)和應(yīng)用，這就導(dǎo)致很多設(shè)計(jì)稿中，連對(duì)數(shù)據(jù)的展示應(yīng)該用折線還是柱狀都分不清。 

或許你依靠經(jīng)驗(yàn)可以提升對(duì)一些基本圖表使用的心得，但是，進(jìn)階的可視化設(shè)計(jì)需求就靠幾個(gè)簡(jiǎn)單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應(yīng)用需要掌握什么？ 

復(fù)雜的可視化應(yīng)用場(chǎng)景，不僅需要設(shè)計(jì)師對(duì)統(tǒng)計(jì)內(nèi)容和數(shù)據(jù)應(yīng)用有主動(dòng)地分析，還需要對(duì)計(jì)算機(jī)圖形學(xué)有一定的掌握。先不說(shuō)門(mén)檻極高的 R 語(yǔ)言應(yīng)用，但凡涉及到區(qū)級(jí)以上的地理信息可視化，就一定需要應(yīng)用 GIS 工具的應(yīng)用，導(dǎo)出并轉(zhuǎn)化數(shù)據(jù)包。 

除了 2D 以外，3D 可視化的項(xiàng)目，所需的知識(shí)儲(chǔ)備就更進(jìn)一大步。很多新人的認(rèn)知以為設(shè)計(jì)師的工作只要用 3D 軟件建模并輸出就可以，學(xué)會(huì) C4D 就可以做可視化項(xiàng)目。

這和以為掌握烤箱的功能就可以做出美味的蛋糕性質(zhì)是一樣的…… 

前面說(shuō)過(guò)，3D 可視化是由技術(shù)發(fā)展催生出的行業(yè)，它的應(yīng)用受到技術(shù)的影響非常大。因?yàn)?3D 應(yīng)用實(shí)在是太復(fù)雜了，比 2D 圖形復(fù)雜好幾個(gè)量級(jí)，這就導(dǎo)致設(shè)計(jì)可以落地的限制遠(yuǎn)遠(yuǎn)超出新手的認(rèn)知。 

常規(guī)的 3D 項(xiàng)目，必然要借助相關(guān)的圖形協(xié)議或者引擎。比如新手剛開(kāi)始都以為的 3D 可視化就是網(wǎng)頁(yè)中運(yùn)行 3D 效果，而網(wǎng)頁(yè)運(yùn)行 3D 就是借助 WebGL 圖形協(xié)議實(shí)現(xiàn)的。 

由于各種技術(shù)和硬件限制，WebGL 的性能是奇差無(wú)比的，因?yàn)樗膱D形繪制渲染主要依靠 CPU 來(lái)完成，只要項(xiàng)目稍微復(fù)雜一點(diǎn)，多邊形和圖元數(shù)量一多，立馬就會(huì)讓電腦變卡（CPU占用量暴漲）。同時(shí)，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。 

因?yàn)?WebGL 太弱，目前封閉的可視化項(xiàng)目就轉(zhuǎn)而使用其它的技術(shù)解決方案，即虛幻 Unreal 和 Unity。沒(méi)錯(cuò)，就是你們玩游戲啟動(dòng)畫(huà)面中顯示的那倆引擎。 

換句話說(shuō)，現(xiàn)在的高端 3D 可視化項(xiàng)目，就是用做游戲的方式做可視化應(yīng)用，只要在指定設(shè)備里安裝，就可以調(diào)用 GPU 資源，實(shí)現(xiàn)更高級(jí)復(fù)雜的效果。

但是，只要應(yīng)用了對(duì)應(yīng)的引擎，就必須使用配套軟件來(lái)完成渲染、動(dòng)畫(huà)、交互事件。即通過(guò) C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項(xiàng)目應(yīng)該用的建模軟件也不一樣），再導(dǎo)入到虛幻或者 Unity 編輯器中進(jìn)行下一步的操作，然后再和開(kāi)發(fā)進(jìn)行交付。 

因?yàn)?3D 的復(fù)雜性，導(dǎo)致獨(dú)立 3D 可視化項(xiàng)目的開(kāi)發(fā)流程被大幅度拉長(zhǎng)，從而讓設(shè)計(jì)師需要掌握的知識(shí)面也大大增加。中間每個(gè)步驟都充斥著各種屎尿屁的限制，我就不繼續(xù)展開(kāi)了。 

3D 可視化設(shè)計(jì)師，幾乎就等同于游戲行業(yè)中的技術(shù)美術(shù)(Technical Artist)，因?yàn)橛螒蜷_(kāi)發(fā)更復(fù)雜，分工更明確，技術(shù)美術(shù)作為設(shè)計(jì)師和開(kāi)發(fā)之間的橋梁，幫助項(xiàng)目的美術(shù)能盡量在技術(shù)上被實(shí)現(xiàn)。 

而因?yàn)榭梢暬?xiàng)目的建模精度與視覺(jué)效果要求不高（對(duì)比游戲），這些工作就要由同一個(gè)崗位包攬，設(shè)計(jì)師就沒(méi)辦法回避這些讓人絕望的知識(shí)信息。 

還有一點(diǎn)對(duì)比游戲行業(yè)更讓人絕望的，就是 3D 可視化實(shí)際應(yīng)用的技術(shù)方案是高度碎片化、沒(méi)有體系的，而且技術(shù)迭代周期遠(yuǎn)比游戲行業(yè)短（WebGPU已經(jīng)在路上了），這在客觀上增加了設(shè)計(jì)師的從業(yè)壓力（歡迎體驗(yàn)前端開(kāi)發(fā)的壓力？）。 

一個(gè)專業(yè)的可視化設(shè)計(jì)師知識(shí)門(mén)檻，是遠(yuǎn)遠(yuǎn)高于一般 UI 設(shè)計(jì)師的。 

當(dāng)我們研究一個(gè)行業(yè)的前景時(shí)，就是研究它未來(lái)的趨勢(shì)和潛力。數(shù)據(jù)可視化嚴(yán)格意義來(lái)講并不是完全獨(dú)立的一個(gè)行業(yè)或市場(chǎng)，而是其它多個(gè)大市場(chǎng)中的某個(gè)組成部分。 

如前面提到的數(shù)字分析、物聯(lián)網(wǎng)、工業(yè)物聯(lián)，都是層次更高的商業(yè)化市場(chǎng)。這些都是近年來(lái)高速發(fā)展的熱門(mén)行業(yè)，是帶動(dòng)可視化行業(yè)發(fā)展的客觀依據(jù)，我就不一一找公開(kāi)統(tǒng)計(jì)數(shù)據(jù)佐證了。 

而可視化除了商業(yè)場(chǎng)景外，還有個(gè)在國(guó)內(nèi)做可視化繞不開(kāi)的話題 —— 政策。 

如果具體關(guān)注過(guò)地產(chǎn)、5G、電動(dòng)車(chē)產(chǎn)業(yè)的發(fā)展歷程，就應(yīng)該明白國(guó)家意志的貫徹可以怎樣在短時(shí)間內(nèi)催生出市場(chǎng)的高度繁榮（或者泡沫）。 

而政策對(duì)于可視化的利好，就在于 “數(shù)字政府” 概念的規(guī)劃中。從幾年前開(kāi)始就興起的政務(wù)數(shù)字化轉(zhuǎn)型，到最近國(guó)務(wù)院發(fā)布的 《關(guān)于加強(qiáng)數(shù)字政府建設(shè)的指導(dǎo)意見(jiàn)》，都是中央直接 “指導(dǎo)” 地方發(fā)展數(shù)字化的指標(biāo)，是行政意志與力量的體現(xiàn)。 

說(shuō)更具體點(diǎn)，下面是指導(dǎo)意見(jiàn)中的目標(biāo)說(shuō)明，非常直白，大家可以自己體會(huì)： 

到2025年，與政府治理能力現(xiàn)代化相適應(yīng)的數(shù)字政府頂層設(shè)計(jì)更加完善、統(tǒng)籌協(xié)調(diào)機(jī)制更加健全，政府?dāng)?shù)字化履職能力、安全保障、制度規(guī)則、數(shù)據(jù)資源、平臺(tái)支撐等數(shù)字政府體系框架基本形成，政府履職數(shù)字化、智能化水平顯著提升，政府決策科學(xué)化、社會(huì)治理精準(zhǔn)化、公共服務(wù)高效化取得重要進(jìn)展，數(shù)字政府建設(shè)在服務(wù)黨和國(guó)家重大戰(zhàn)略、促進(jìn)經(jīng)濟(jì)社會(huì)高質(zhì)量發(fā)展、建設(shè)人民滿意的服務(wù)型政府等方面發(fā)揮重要作用。 

到2035年，與國(guó)家治理體系和治理能力現(xiàn)代化相適應(yīng)的數(shù)字政府體系框架更加成熟完備，整體協(xié)同、敏捷高效、智能精準(zhǔn)、開(kāi)放透明、公平普惠的數(shù)字政府基本建成，為基本實(shí)現(xiàn)社會(huì)主義現(xiàn)代化提供有力支撐。 

原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm 

正因國(guó)情在此，所以這些年 G 可視化項(xiàng)目才如雨后春筍一般涌現(xiàn)。智慧城市、智慧農(nóng)村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風(fēng)蓬勃發(fā)展。 

所以，商業(yè)和政務(wù)的迫切需求，催生出一大批可視化服務(wù)公司，如 EasyV、ThingJS、觀遠(yuǎn)等。即使頭部大廠也生怕錯(cuò)過(guò)這個(gè)機(jī)會(huì)，紛紛組建團(tuán)隊(duì)進(jìn)行行業(yè)布局。如騰訊云的 Raya Data、阿里云的 DataV、網(wǎng)易的數(shù)帆等等，都已經(jīng)小成氣候，初現(xiàn)鋒芒。 

市場(chǎng)需求旺盛，規(guī)模快速增長(zhǎng)，前景理應(yīng)一片大好！但是…… 

市場(chǎng)總規(guī)模的擴(kuò)張，帶給個(gè)體的收益卻不一定有表面看起來(lái)那么理想，尤其是設(shè)計(jì)師崗位。 

這要先從常規(guī) UI 設(shè)計(jì)行業(yè)說(shuō)起，UI 設(shè)計(jì)師工資已經(jīng)是國(guó)內(nèi)設(shè)計(jì)行業(yè)工資最高的類型之一，從10年前的屌絲行業(yè)到今天能和老牌貴族建筑設(shè)計(jì)叫板，是非常了不起的成就。 

而之所以有這種收入，除了移動(dòng)互聯(lián)網(wǎng)爆發(fā)以外，最重要的原因就是互聯(lián)網(wǎng)產(chǎn)品的 “利潤(rùn)率”，可以用非常少量的職員撬動(dòng)上億甚至上百億的利潤(rùn)。 

如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤(rùn)。一款游戲的利潤(rùn)直接達(dá)到萬(wàn)科（2021年利潤(rùn)225億）和中國(guó)人保（2021年利潤(rùn)216億）的水平，他們都是在冊(cè)員工超過(guò) 10W 人的大型企業(yè)，也是國(guó)內(nèi)各自行業(yè)里的巨頭，而王者的員工只是他們的幾百近千份之一。 

再如螞蟻金服、微信、抖音之類的國(guó)民級(jí)互聯(lián)網(wǎng)應(yīng)用，都是用極少的員工達(dá)到讓人難以置信的估值和利潤(rùn)，這在傳統(tǒng)行業(yè)是無(wú)法想象的。 

所以能盈利的公司會(huì)給員工開(kāi)出滿是行業(yè)紅利的待遇，拔高行業(yè)上限的同時(shí)，也迫使那些有志于挑戰(zhàn)巨頭的新公司愿意抬高工資價(jià)碼，吸引人才。 

總結(jié)起來(lái)，UI 之所以平均收入遠(yuǎn)超平面、服裝、工業(yè)、室內(nèi)等老牌設(shè)計(jì)行業(yè)，并不是因?yàn)?UI 專業(yè)門(mén)檻更高，而是以行業(yè)規(guī)模、項(xiàng)目規(guī)模、利潤(rùn)率三個(gè)核心指標(biāo)的共同作用形成。 

其中，項(xiàng)目規(guī)模和利潤(rùn)率的重要性，其實(shí)遠(yuǎn)遠(yuǎn)大于行業(yè)規(guī)模，這是很多職場(chǎng)新人最想不通的地方。 

例如廣告行業(yè)已經(jīng)是一個(gè)萬(wàn)億市場(chǎng)了，除了分眾這家互聯(lián)網(wǎng)獨(dú)角獸外，其它老牌廣告營(yíng)銷(xiāo)公司每年財(cái)報(bào)的營(yíng)收和利潤(rùn)大家感興趣的可以去搜搜（下圖為 21 年財(cái)報(bào)）。 

看看他們的營(yíng)收總額和凈利潤(rùn)比例，以及員工總數(shù)，你自己就會(huì)得出，作為普通平面設(shè)計(jì)師的待遇，是絕對(duì)不可能超過(guò)頭部互聯(lián)網(wǎng)企業(yè)的，甚至能達(dá)到中游水平都是超常發(fā)揮的結(jié)論。 

行業(yè)規(guī)模大，但是頭部企業(yè)規(guī)模和利潤(rùn)卻不高，除了行業(yè)本身的平均利潤(rùn)率因素外，還有一個(gè)原因就是業(yè)務(wù)是高度分散的，沒(méi)有被集中在少數(shù)頭部企業(yè)，供應(yīng)商數(shù)量龐大，不像多數(shù) C 端市場(chǎng)都由少數(shù)幾家公司或者產(chǎn)品把持或直接壟斷。 

在可預(yù)見(jiàn)的未來(lái)，可視化行業(yè)也會(huì)處于這樣的情況，競(jìng)爭(zhēng)激烈，利潤(rùn)率低。而且作為 B 端服務(wù)商，不要看各家企業(yè)需求旺盛，政府各級(jí)單位招標(biāo)不斷，實(shí)際上每個(gè)項(xiàng)目的規(guī)模都不大，百萬(wàn)內(nèi)的項(xiàng)目才占行業(yè)的絕大多數(shù)，這是不太符合滿足我們收入期待的項(xiàng)目規(guī)模。 

而單個(gè)項(xiàng)目規(guī)模在未來(lái)高速擴(kuò)大在我看來(lái)也不太現(xiàn)實(shí)，有兩個(gè)原因，一個(gè)是項(xiàng)目使用人數(shù)極少（通常也就幾十上百人…），另一個(gè)就是對(duì)可視化項(xiàng)目實(shí)用性的質(zhì)疑。 

如果看過(guò)航天相關(guān)的報(bào)道，就會(huì)看到指揮室數(shù)據(jù)大屏相比我們網(wǎng)上看過(guò)的案例比起來(lái)，簡(jiǎn)陋得發(fā)指。這會(huì)是因?yàn)榭偩譀](méi)有預(yù)算，請(qǐng)不起設(shè)計(jì)師和團(tuán)隊(duì)開(kāi)發(fā)嘛？ 

為什么航天指揮中心沒(méi)有用下面這種 “科技感” 滿滿，復(fù)雜的我坐下面保證除了標(biāo)題一個(gè)字也看不見(jiàn)的 “高端設(shè)計(jì)”？ 

原因說(shuō)出來(lái)讓人沮喪，因?yàn)樗麄?—— 真的要看上面的信息啊！

真正能發(fā)揮可視化價(jià)值的場(chǎng)景并不多，很多項(xiàng)目出發(fā)的意義，就是為了表面工程（各級(jí)ZF單位需求，自行體會(huì)），裝飾屬性大于實(shí)用性。既然實(shí)用性不夠高，很多甲方心里也清楚，是花錢(qián)裝裱門(mén)面的，那么投入的預(yù)算就更不可能太高。 

所以，我對(duì)可視化行業(yè)的整體的發(fā)展是認(rèn)可的，但對(duì)單家公司或項(xiàng)目的預(yù)期，卻是悲觀的，它們沒(méi)法達(dá)到我們已經(jīng)習(xí)慣的 C 端和 SAAS 行業(yè)的高度。 

最后，還要探討下數(shù)據(jù)可視化中設(shè)計(jì)師的團(tuán)隊(duì)價(jià)值。 

我們知道，一個(gè)完整的可視化項(xiàng)目設(shè)計(jì)與開(kāi)發(fā)門(mén)檻都是非常高的，但因?yàn)楦?，?chuàng)造的價(jià)值就高嘛？項(xiàng)目營(yíng)收的成本占比就高嗎？ 

答案依然是否定的！因?yàn)榭梢暬袠I(yè)的絕大多數(shù)項(xiàng)目都是 “傳統(tǒng)” 的外包項(xiàng)目。 

不管是商業(yè)是政務(wù)領(lǐng)域，外包最重要的任務(wù)，都是找到業(yè)務(wù)（中標(biāo)）。樸素的價(jià)值觀會(huì)認(rèn)為，只要技術(shù)和服務(wù)夠好，業(yè)務(wù)自然源源不斷，其實(shí)不然。技術(shù)服務(wù)都是后驗(yàn)的，客戶沒(méi)有合作過(guò)之前是不知道的，在市場(chǎng)上挑選服務(wù)商，可不是打開(kāi)淘寶買(mǎi)家評(píng)論查看分?jǐn)?shù)和具體評(píng)價(jià)篩選。 

所以，外行了解服務(wù)商的窗口，更多是通過(guò)熟悉的中間人介紹，或者銷(xiāo)售的嘴。誰(shuí)能拿到項(xiàng)目，誰(shuí)就為公司創(chuàng)造了最大的價(jià)值。后面怎么做那是后面的事，換誰(shuí)做不是做…… 

這就是最常見(jiàn)的外包企業(yè)思路，所以技術(shù)人員或者設(shè)計(jì)往往都是消耗品，沒(méi)有那么強(qiáng)的依賴性。而在具體外包實(shí)踐環(huán)節(jié)中，項(xiàng)目的執(zhí)行決策也和一般 B 端、G 端項(xiàng)目不同。 

我以前一直強(qiáng)調(diào)，B 端項(xiàng)目的存在價(jià)值，是用來(lái)解決業(yè)務(wù)問(wèn)題，為企業(yè) —— 降本增效。但是可視化項(xiàng)目往往不是用來(lái)解決問(wèn)題，而是用來(lái) —— 解決產(chǎn)生問(wèn)題的人！ 

尤其是面向政務(wù)的項(xiàng)目，在領(lǐng)導(dǎo)的需求面前，是沒(méi)有體驗(yàn)這一說(shuō)的，首先考慮的應(yīng)該是 ”科技感“（結(jié)合前文理解），不然怎么展示自己貫徹上層指導(dǎo)意見(jiàn)…… 

這種環(huán)境對(duì)于創(chuàng)意類職業(yè)是非常不利的，一方面創(chuàng)造的價(jià)值并不顯著，另一方面是由別人 “教你” 怎么做設(shè)計(jì)。長(zhǎng)此以往，你會(huì)越來(lái)越缺失職業(yè)競(jìng)爭(zhēng)力和發(fā)展可能。 

問(wèn)題二，則是因?yàn)榭梢暬?xiàng)目獨(dú)立開(kāi)發(fā)成本太高昂，做的視覺(jué)內(nèi)容又非常固定。于是有實(shí)力的團(tuán)隊(duì)就紛紛投入可視化編輯工具的研發(fā)，解決最麻煩的底層圖形方案。 

這和 B 端的前端開(kāi)源框架非常類似，把底層的代碼、交互、動(dòng)畫(huà)、性能優(yōu)化都幫你做好了，設(shè)計(jì)師和程序員可以用非常省事的完成項(xiàng)目的視覺(jué)內(nèi)容落地。 

但是，常規(guī) B 端管理項(xiàng)目中，界面樣式一直就不是最重要的事情，而是解決復(fù)雜頁(yè)面流程和組件交互的問(wèn)題。所以資深的 B 端設(shè)計(jì)師樂(lè)于應(yīng)用第三方的框架來(lái)完成復(fù)雜的項(xiàng)目。 

而在可視化領(lǐng)域中，多數(shù)項(xiàng)目并沒(méi)有那么多和復(fù)雜的交互需要考慮，視覺(jué)展示效果才是第一位，絕大多數(shù)團(tuán)隊(duì)?wèi)?yīng)用第三方框架是大勢(shì)所趨。核心工作內(nèi)容被影響，那才叫觸及靈魂的打擊。 

所以，在我看來(lái)可視化設(shè)計(jì)師可以創(chuàng)造高價(jià)值的場(chǎng)景，只會(huì)出現(xiàn)在兩種團(tuán)隊(duì)中。 

第一種，是給其它可視化團(tuán)隊(duì)提供圖形服務(wù)的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團(tuán)隊(duì)有非常優(yōu)秀的前端程序員和技術(shù)積累，換句話說(shuō)，就是既要有技術(shù)實(shí)力又要有資金保障的團(tuán)隊(duì)。 

第二種，則是走優(yōu)質(zhì)項(xiàng)目輸出路線的小團(tuán)隊(duì)或公司。會(huì)有一些優(yōu)秀的開(kāi)發(fā)人員坐鎮(zhèn)，再由設(shè)計(jì)師主導(dǎo)來(lái)推動(dòng)業(yè)務(wù)發(fā)展，不會(huì)什么項(xiàng)目都做，會(huì)選有價(jià)值的用心交付。例如早年的 UI 外包團(tuán)隊(duì) ARK、Eico、TangUX 等都是這種路線。 

這兩種對(duì)比目前海量的服務(wù)商來(lái)說(shuō)都是鳳毛麟角，第一種類型是可視化設(shè)計(jì)師發(fā)展最好的歸宿，因?yàn)樵O(shè)計(jì)產(chǎn)出和圖形技術(shù)發(fā)展高度捆綁，只有這樣的團(tuán)隊(duì)才會(huì)最早最快接觸新的專業(yè)技術(shù)方案。 

除了這兩類，不要對(duì)其它外包類公司有太多的期待。在整個(gè)互聯(lián)網(wǎng)行業(yè)中，成熟產(chǎn)品團(tuán)隊(duì)非常不喜歡招外包設(shè)計(jì)師不是沒(méi)有原因的。 

至于未來(lái)是不是可視化內(nèi)容會(huì)在 C 端領(lǐng)域打開(kāi)局面，發(fā)展出一些新的應(yīng)用場(chǎng)景，我就不過(guò)早下定論了。 

最后，做個(gè)總結(jié)，給目前還沒(méi)有進(jìn)入可視化設(shè)計(jì)行業(yè)，或者是誤打誤撞進(jìn)入這個(gè)行業(yè)的設(shè)計(jì)師一些職業(yè)方向的建議。 

可視化設(shè)計(jì)行業(yè)和廣告業(yè)非常類似，就是從業(yè)人員收入構(gòu)成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長(zhǎng)梯度和充足的腰部崗位。 

可視化設(shè)計(jì)師從菜鳥(niǎo)進(jìn)入專業(yè)階段所需的知識(shí)量更大，準(zhǔn)備周期更長(zhǎng)，技能門(mén)檻更高。在初中級(jí)階段和一般 UI 行業(yè)對(duì)比起來(lái) —— 毫無(wú)性價(jià)比。 

如果本身熱愛(ài)可視化，想將 FUI 那些東西搬進(jìn)真實(shí)的世界和項(xiàng)目里，也做好了艱苦學(xué)習(xí)的準(zhǔn)備（說(shuō)不定是你樂(lè)在其中的），那么這個(gè)的行業(yè)的頭部崗位就是為你這種人準(zhǔn)備的。 

畢竟行業(yè)體量大，當(dāng)然就會(huì)有真正優(yōu)質(zhì)的崗位出現(xiàn)，只是它的門(mén)檻高，沒(méi)有那么多水分能擠。 

如果不是異常熱愛(ài)這個(gè)行業(yè)，具備較強(qiáng)的自學(xué)能力，或有一定的 3D 和圖形技術(shù)知識(shí)積累，那么不太建議往這個(gè)職業(yè)深入發(fā)展，一般的 B 端和 SAAS 項(xiàng)目才會(huì)是更好的選擇。

作者：酸梅干超人      來(lái)源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

在今天的 UI 設(shè)計(jì)領(lǐng)域，由扁平化設(shè)計(jì)風(fēng)格占據(jù)主導(dǎo)地位，已經(jīng)是無(wú)可辯駁的事實(shí)了。扁平化應(yīng)用除了提升用戶獲取信息的效率外，對(duì)設(shè)計(jì)師而言就是設(shè)計(jì)的難度大大降低了。

一個(gè)界面的 UI 視覺(jué)元素，僅僅只需要圖片素材、矢量圖標(biāo)、幾何、文字，UI 設(shè)計(jì)師的工作僅僅是對(duì)內(nèi)容進(jìn)行組織和排版，涉及到原創(chuàng)的也僅僅只有少量的圖標(biāo)（大多數(shù)人還畫(huà)不好）。

這種狀態(tài)持續(xù)了很多年，看起來(lái)歲月一片靜好。

但是，這兩年市場(chǎng)發(fā)出了一些不同的聲音，那就是打破純扁平風(fēng)格的 UI 風(fēng)格、元素開(kāi)始越來(lái)越盛行了。

比如新擬態(tài)風(fēng)格在年初炒了一波熱度，各大平臺(tái)和公眾號(hào)都鋪天蓋地的發(fā)文和介紹，介紹它的設(shè)計(jì)理念和設(shè)計(jì)方法。

還有就是以餓了么、美團(tuán)為首的國(guó)民級(jí)應(yīng)用在主頁(yè)顯眼的位置里使用極具識(shí)別性的擬物圖標(biāo)，引起設(shè)計(jì)圈的熱議。

首先講講新擬態(tài)設(shè)計(jì)，之所以之前只字不提，是因?yàn)槲覍?duì)這個(gè)風(fēng)格實(shí)在沒(méi)什么好感，有種對(duì)純擬物借尸還魂的味道，且它的樣式對(duì)于信息密度高的應(yīng)用是完全不適用的，只能活在飛機(jī)稿里。

而國(guó)內(nèi)大型應(yīng)用開(kāi)始在實(shí)際項(xiàng)目中上線擬物圖標(biāo)，意義就不一樣了，證明這樣的設(shè)計(jì)是經(jīng)過(guò)幾個(gè)大廠團(tuán)隊(duì)認(rèn)可，且有共識(shí)的。

當(dāng)然，這并不因?yàn)榇髲S用了就無(wú)腦推崇。而是純扁平的設(shè)計(jì)已經(jīng)越來(lái)越難滿足部分需要強(qiáng)視覺(jué)效果的頁(yè)面設(shè)計(jì)了。

今天的互聯(lián)網(wǎng)和過(guò)去不一樣，用戶的增長(zhǎng)留存不再是過(guò)去一樣通過(guò)裂變和口碑完成，一個(gè)產(chǎn)品只要認(rèn)真打磨體驗(yàn)、功能就能獲得用戶的青睞和駐留。用戶的精力時(shí)間是固定的，而互聯(lián)網(wǎng)產(chǎn)品又層出不窮，佛系的等待用戶臨幸是沒(méi)有出路，這種現(xiàn)狀也被稱為互聯(lián)網(wǎng)的下半場(chǎng)。

佛系不行，當(dāng)舔狗更不行（成本太高），所以今天大型產(chǎn)品都在對(duì)待用戶的態(tài)度都選擇更具更具侵略性的霸道總裁人設(shè)。不僅是用色飽和度越來(lái)越高，運(yùn)營(yíng)活動(dòng)越來(lái)越密集，廣告和強(qiáng)提示也越來(lái)越多。比如剛打開(kāi)了三個(gè)應(yīng)用，進(jìn)入的首頁(yè)大家自己意會(huì)……

有點(diǎn)扯遠(yuǎn)了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡(jiǎn)風(fēng)就不會(huì)合適。當(dāng)對(duì)扁平的視覺(jué)效果已經(jīng)開(kāi)發(fā)到極限以后，那么進(jìn)一步在一些細(xì)節(jié)處應(yīng)用擬物就成為必然的選擇。

而擬物的應(yīng)用并不可能鋪設(shè)到整個(gè)應(yīng)用中去，因?yàn)橥耆珨M物化的設(shè)計(jì)降低信息瀏覽效率是必然的，所以它只適合做局部的視覺(jué)強(qiáng)化，來(lái)加強(qiáng)用戶對(duì)特定區(qū)域的感知。

最常見(jiàn)的需要被凸出的要素，就是首頁(yè)中應(yīng)用的快速入口圖標(biāo)、分類圖標(biāo)和底部導(dǎo)航欄圖標(biāo)了。這些區(qū)域長(zhǎng)期受運(yùn)營(yíng)活動(dòng)支配，相信大家已經(jīng)很習(xí)慣了。

只是，這些圖標(biāo)開(kāi)始在脫離運(yùn)營(yíng)活動(dòng)的狀態(tài)下，也開(kāi)始使用非扁平模式，那就不再是運(yùn)營(yíng)設(shè)計(jì)師的工作職責(zé)，而是 UI 設(shè)計(jì)師們繞不過(guò)去的檻了（知識(shí)盲區(qū)）！

且除了 APP 外，其它領(lǐng)域?qū)τ跀M物設(shè)計(jì)的需求也會(huì)開(kāi)始逐漸提升，尤其是目前越來(lái)越復(fù)（fu）雜（kua）的大屏數(shù)據(jù)展示、車(chē)載界面、定制系統(tǒng)等等。

作為新世代的 UI 設(shè)計(jì)師，多數(shù)人對(duì)擬物的設(shè)計(jì)可以說(shuō)是完全空白的狀態(tài)，所以是時(shí)候要重拾擬物設(shè)計(jì)這個(gè)傳統(tǒng)藝能了。

前面我有提到，擬物主要應(yīng)用在關(guān)鍵的圖標(biāo)上，但應(yīng)用的擬物風(fēng)格并不是過(guò)去我們追求的那種極其真實(shí)、復(fù)雜的擬物，而是經(jīng)過(guò)一定簡(jiǎn)化、抽象后的擬物 —— 輕擬物。我們要先來(lái)明確一下輕擬物到底是什么。

首先我們看看，過(guò)去優(yōu)秀的擬物圖標(biāo)和設(shè)計(jì)案例，它不僅表現(xiàn)元素本身的光影、透視、構(gòu)造，甚至?xí)浅Ｍ暾谋憩F(xiàn)物體表面的材質(zhì)和肌理。

這種圖標(biāo)單看起來(lái)確實(shí)很好看、細(xì)致。但是，把它丟進(jìn)我們當(dāng)前的頁(yè)面中是非常違和的，因?yàn)樗鼈兗?xì)節(jié)實(shí)在太多了，而且畫(huà)起來(lái)非常耗時(shí)間，不利于項(xiàng)目整體的推進(jìn)。

所以為了符合畫(huà)面的質(zhì)感，又要考慮項(xiàng)目效率，輕擬物這個(gè)概念開(kāi)始被提出和應(yīng)用，作為一個(gè)折中的解決方案。

它和純擬物設(shè)計(jì)的共同點(diǎn)在于，也表現(xiàn)光影、結(jié)構(gòu)、透視，但它盡可能精簡(jiǎn)了輪廓的復(fù)雜度、肌理和層級(jí)，呈現(xiàn)出更概念化、理想化、易于辨識(shí)的擬物圖形。

所以，我們主要去學(xué)習(xí)的內(nèi)容是輕擬物的設(shè)計(jì)方法，而不是徒手畫(huà)照片（這個(gè)可以緩緩）！

而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實(shí)體質(zhì)感的。但是扁平從插畫(huà)到圖標(biāo)設(shè)計(jì)經(jīng)過(guò)多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設(shè)計(jì)，應(yīng)用大量的漸變、投影、模糊的效果，比如下圖案例。

這在我們之前圖標(biāo)的系列干貨中有提過(guò)，這類設(shè)計(jì)是面性圖標(biāo)的進(jìn)階版，它們依舊屬于扁平風(fēng)格的范疇之內(nèi)，不能和輕擬物劃上等號(hào)。

對(duì)于這幾年才開(kāi)始學(xué)習(xí) UI 設(shè)計(jì)的新手來(lái)講，擬物已經(jīng)變成一個(gè)很陌生的事物，這對(duì)行業(yè)來(lái)說(shuō)是比較悲哀的一件事。

因?yàn)閿M物的設(shè)計(jì)不僅僅是畫(huà)圖標(biāo)而已，對(duì)它的學(xué)習(xí)可以全方位的提升設(shè)計(jì)師的基礎(chǔ)素養(yǎng)，不僅包括對(duì)傳統(tǒng)美術(shù)（結(jié)構(gòu)、光影、色彩、透視）知識(shí)點(diǎn)的剖析，還包含對(duì) PS 使用的深入探索。

可以說(shuō)，自從擬物不成為必修題材以后，九成以上的UI設(shè)計(jì)師是不會(huì)用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。

輕擬物本身也是擬物，所以它的核心基礎(chǔ)和擬物設(shè)計(jì)師一致的，只是省略了更多復(fù)雜的細(xì)節(jié)。而對(duì)于整個(gè)擬物的體系來(lái)講，最重要的東西實(shí)際上只有2個(gè)，形體、光影。

形體表現(xiàn)

形體的表現(xiàn)，就是對(duì)圖形外輪廓的樣式的呈現(xiàn)。在過(guò)去我們寫(xiě)的圖標(biāo)分享中，有寫(xiě)過(guò)面性圖標(biāo)進(jìn)階的設(shè)計(jì)中，可以包含更多的細(xì)節(jié)、內(nèi)部元素，而不是僅僅只有外輪廓。

輕擬物的形體設(shè)計(jì)就要處于進(jìn)階面性圖標(biāo)或者更難的水平之上，即你要把這個(gè)圖形的內(nèi)容有明確的示意并畫(huà)出來(lái)，而不是用抽象的圖形做填充而已。

比如大眾點(diǎn)評(píng)的快速入口圖標(biāo)，雖然看起來(lái)很復(fù)雜，但是那是配色上的復(fù)雜，而不是形體輪廓上的具象化。

換句話說(shuō)，擬物插畫(huà)的圖形基底，類似扁平插畫(huà)風(fēng)格圖標(biāo)，不能表現(xiàn)得太抽象，也不能增加過(guò)多的細(xì)節(jié)，需要一種恰到好處的平衡（玄學(xué)），這就非?？简?yàn)設(shè)計(jì)師的判斷和經(jīng)驗(yàn)了。

并且，在描繪輪廓的時(shí)候，新手盡可能的采取正視圖來(lái)進(jìn)行繪制，而不要通過(guò)俯視圖、側(cè)視圖、斜視圖等方法來(lái)呈現(xiàn)圖形的多個(gè)面，這樣難度會(huì)大幅度上升，比如下面這種情況。

光影表現(xiàn)

除了形體外，光影就是整個(gè)擬物的靈魂了。

當(dāng)一個(gè)完整的圖形完成填充色時(shí)，它是扁平圖案，如果完成光影呈現(xiàn)的時(shí)候，它就是三維空間的立體圖形，比如下面這個(gè)圓的案例：

在擬物的設(shè)計(jì)中，我們對(duì)光影的定義是至關(guān)重要的，所以首先就是針對(duì)該圖形確定光源的方向，是上方、前方、左上還右上，這對(duì)后續(xù)的設(shè)計(jì)有一連串的影響。

如果對(duì)光影沒(méi)有正確的解釋，那么在制作細(xì)節(jié)的漸變角度、投影的使用上，就會(huì)產(chǎn)生錯(cuò)誤的設(shè)計(jì)，造成光影視覺(jué)沖突和矛盾。

在創(chuàng)建了光源以后，物體受到光線的影響就會(huì)產(chǎn)生明暗面和投影，可以簡(jiǎn)單劃分成4個(gè)部分，高光、亮部、暗部、投影。

這和我們學(xué)習(xí)的素描有一定的差異，美術(shù)中對(duì)光影的表現(xiàn)害會(huì)包含明暗交界、反光面，這對(duì)于輕擬物的來(lái)說(shuō)負(fù)擔(dān)太重，所以我們要去掉它們，接下來(lái)重點(diǎn)講講高光和暗部。

高光是物體作為受光物對(duì)光源的直接反映，比如人像攝影中人眼眸中的高光就是對(duì)閃光燈的鏡像表現(xiàn)，再或者一拳超人中男主光頭上長(zhǎng)期存在的高光配飾（多數(shù)動(dòng)畫(huà)的光頭角色都有）……

高光可以非常有效的增加畫(huà)面的層次和對(duì)比性，讓物體看上去更有沖擊力和觀賞性。

而暗部，則完全是為了正常表現(xiàn)物體結(jié)構(gòu)和弧度增加的示意，因?yàn)椴辉谑芄饷?，所以顏色?huì)變暗。在實(shí)際操作過(guò)程中，我們可以通過(guò)漸變的方式開(kāi)控制明暗的表達(dá)，但盡量不要直接手動(dòng)設(shè)置一個(gè)漸變色出來(lái)，而是為它疊加暗部或亮部的黑白透明度漸變。

了解這幾個(gè)特性以后，下面，我們就通過(guò)一個(gè)實(shí)例來(lái)講解一下輕擬物設(shè)計(jì)的過(guò)程吧。

作為輕擬物的演示，直接畫(huà)個(gè)圖標(biāo)講一遍怎么操作是沒(méi)什么用的，我們要從實(shí)際場(chǎng)景出發(fā)，用它來(lái)解決一些真實(shí)的問(wèn)題。比如看看下面的 KFC 官方 APP 首頁(yè)：

總結(jié)它的問(wèn)題，不難發(fā)現(xiàn)首頁(yè)頂部業(yè)務(wù)功能太多了，頂部圖標(biāo)就包含30個(gè)（加滑動(dòng)的），雖然每個(gè)模塊圖標(biāo)單看都沒(méi)有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級(jí)和對(duì)比性。

我們要做的，就是通過(guò)輕擬物的方式，調(diào)整快速入口最大的三個(gè)圖標(biāo)，凸顯它們的重要性以及和其它圖標(biāo)的視覺(jué)差異性。先從第一個(gè)圖標(biāo)開(kāi)始，講解一下如何完成輕擬物化設(shè)計(jì)的升級(jí)。

第一步：確認(rèn)輪廓造型

第一個(gè)操作，即確定圖標(biāo)本身的輪廓。根據(jù)原有圖標(biāo)的樣式我做了一些改動(dòng)，包括加粗車(chē)頭，減少高度，增加車(chē)燈等。并對(duì)每一個(gè)模塊進(jìn)行純色的填充，定義它們的色彩和做出區(qū)分。

形體的重要性在于要對(duì)圖形本身有比較合理的呈現(xiàn)，不要讓比例失調(diào)和圖不達(dá)意。

第二步：完善圖形細(xì)節(jié)

這一步，就要在原有基礎(chǔ)上，進(jìn)行下一步的深入。包括對(duì)一些細(xì)節(jié)交代得更清楚一點(diǎn)，增加一些有趣的小元素等等，完善它的具體樣式。

第三步：增加基礎(chǔ)的暗部表現(xiàn)

在這里，我們就要開(kāi)始為圖標(biāo)增加高光了，高光從右上角打下來(lái)，那么有疊加關(guān)系的元素就會(huì)產(chǎn)生一個(gè)向下的投影。并且反向暗部的表現(xiàn)，讓整體的立體感稍強(qiáng)。

這一步在軟件中主要使用蒙版功能，通過(guò)蒙版在背景上方創(chuàng)建一個(gè)圖層，然后添加深色的透明度漸變，就可以表現(xiàn)出對(duì)暗部和投影的效果。

第四步：增加高光效果

接著，就是最后一步，將高光添加到畫(huà)面中來(lái)，講整個(gè)圖標(biāo)的質(zhì)感進(jìn)行拉升，

通過(guò)上面的演示，我們可以將整個(gè)擬物設(shè)計(jì)流程精簡(jiǎn)成：

1.確定圖形基本輪廓、外形比例、模塊色彩

2.豐富細(xì)節(jié)樣式增加趣味性和適當(dāng)?shù)臄M真感

3.通過(guò)蒙版添加暗部來(lái)完善表現(xiàn)的明暗和層級(jí)關(guān)系

4.添加高光元素作為圖形的亮點(diǎn)，拉升層次感

然后，通過(guò)這樣的步驟，再來(lái)完成后續(xù)的兩個(gè)圖形，拆解完的效果如下。

然后，再用這三個(gè)修改后圖標(biāo)套用進(jìn)原來(lái)的頁(yè)面，并做出對(duì)應(yīng)的修改，再來(lái)看看前后對(duì)比：

通過(guò)這個(gè)對(duì)比，我們就可以看出在這個(gè)復(fù)雜的首頁(yè)頭部中，輕擬物風(fēng)格可以從一眾平面中被凸顯出來(lái)，且不會(huì)顯得太突兀和復(fù)雜。

而這就是輕擬物在項(xiàng)目設(shè)計(jì)中的實(shí)際作用，當(dāng)畫(huà)面元素已經(jīng)開(kāi)始超負(fù)荷，且容易導(dǎo)致同質(zhì)化的審美疲勞和主次不清時(shí)，就是輕擬物登場(chǎng)的時(shí)候了。

作者：酸梅干超人      來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

在如今的界面設(shè)計(jì)中，投影使用的范圍和頻次越來(lái)越高。無(wú)論線上項(xiàng)目或是追波上飛機(jī)稿，都可以看見(jiàn)各種各樣的投影樣式。

投影的使用，是 UI 設(shè)計(jì)師必須掌握好的視覺(jué)設(shè)計(jì)基礎(chǔ)。投影遠(yuǎn)沒(méi)有大家想象的那么簡(jiǎn)單，即使軟件中可以設(shè)置的參數(shù)并不多，很多設(shè)計(jì)師始終沒(méi)辦法很好的應(yīng)用投影來(lái)提升自己的設(shè)計(jì)質(zhì)感。

所以，這篇文章就會(huì)詳細(xì)講解設(shè)計(jì)投影的正確姿勢(shì)。

有了光，才有影。光影是美術(shù)和攝影最核心的基礎(chǔ)。

如果沒(méi)有系統(tǒng)學(xué)習(xí)過(guò)相關(guān)理論，對(duì)投影的認(rèn)識(shí)會(huì)有失偏頗，會(huì)認(rèn)為投影只是將一個(gè)物體的輪廓（遮擋光源的部分）完整映射在其它平面上而已，一個(gè)光源下只有一個(gè)影子，比如下圖設(shè)計(jì)出來(lái)的情況。

但是，真實(shí)世界中的投影，卻并沒(méi)有這么簡(jiǎn)單，往往虛實(shí)即不統(tǒng)一，明暗也不一致。就像下面這個(gè)物體的陰影。

在光學(xué)原理中，不透明物體遮擋光源，所產(chǎn)生的影子有兩個(gè)部分，本影和半影。本影是影子中間最暗的部分（還有偽本影的概念，我們暫時(shí)將它合并起來(lái)理解），而四周開(kāi)始變淺變淡，有彌散質(zhì)感的影子稱為半影，就像下圖所示。

現(xiàn)實(shí)世界中可見(jiàn)的投影都會(huì)形成這兩種影子，因?yàn)楣庠从猩⑸涞奶卣?，?dāng)光線照射在物體上時(shí)勢(shì)必會(huì)產(chǎn)生非垂直角度的光線，于是其中作用最大，重疊最多的一部分形成本影，而其余比較極限的切線部分形成半影，如下圖的案例。

通過(guò)案例我們也可以發(fā)現(xiàn)，當(dāng)光源、物體、陰影面的距離不同時(shí)，產(chǎn)生的本影和半影面積也就不同。反過(guò)來(lái)講，我們還可以通過(guò)物體本影和半影的面積，來(lái)判斷它的空間關(guān)系，比如下方的兩個(gè)物體，明顯能感受到下側(cè)懸浮的高度大于上側(cè)。

或者，通過(guò)陰影來(lái)判斷光源對(duì)于物體的方向和強(qiáng)弱。比如下圖案例，就可以明顯判斷光源位于畫(huà)面的左側(cè)，所以即使擺入其它物體，陰影也會(huì)朝反方向延伸。

除此之外，投影還可以反應(yīng)很多其它隱藏的三維信息，只要使用得當(dāng)，它就可以幫助設(shè)計(jì)師表達(dá)呈現(xiàn)各種不同的空間位置。比如可以通過(guò)投影判斷物體是處于懸空或者是平躺，以及物體的厚度如何。

根據(jù)生活的經(jīng)驗(yàn)，我們已經(jīng)對(duì)投影所產(chǎn)生的暗示習(xí)以為常，能根據(jù)投影的結(jié)果下意識(shí)的對(duì)界面內(nèi)容做出判斷。所以，設(shè)計(jì)師在設(shè)計(jì)過(guò)程中如果對(duì)投影沒(méi)有進(jìn)行很好的思考，就無(wú)法設(shè)計(jì)出符合規(guī)律和邏輯的投影，界面就會(huì)產(chǎn)生違和感，而作品也因此大幅降低了質(zhì)感。

在進(jìn)入了扁平化的設(shè)計(jì)環(huán)境后，投影有很長(zhǎng)一段時(shí)間被抹除，因?yàn)榇蠹艺J(rèn)為那是擬物的遺毒，就怕設(shè)計(jì)里用到擬物元素顯得不夠時(shí)髦。

到了 Material Design 發(fā)布以后，谷歌在規(guī)范中增加了 Z 軸的概念，也就是為平面預(yù)設(shè)了立體的空間，設(shè)計(jì)元素可以定義與空間中水平面的距離，并通過(guò)投影來(lái)表現(xiàn)。

下圖中，Z 軸數(shù)字越大，代表和水平面的距離越遠(yuǎn)，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的 XY 坐標(biāo)并沒(méi)有任何改變。

即然增加了投影，那么谷歌的專業(yè)設(shè)計(jì)團(tuán)隊(duì)，肯定不會(huì)很隨意的制定其參數(shù)。當(dāng)我們打開(kāi)谷歌的官方 UI kits 源文件進(jìn)行查看時(shí)，就能發(fā)現(xiàn)其中的奧妙。它們?yōu)樵貏?chuàng)建了兩層投影，即本影和半影，有時(shí)也稱為 top shadow 和 bottom shadow。 

并且，還有一個(gè)在第一部分沒(méi)有提及的要點(diǎn)，投影的深淺與元素的距離是非線性的，即中心到邊緣衰減的速度是越來(lái)越大的，用坐標(biāo)軸標(biāo)示就是非線性的函數(shù)關(guān)系，而大多數(shù)軟件中的投影只能以線性的模式呈現(xiàn)。

在 UI 設(shè)計(jì)師接觸的平面類軟件中，只有 PS 具備完美復(fù)現(xiàn)這種投影的能力，即控制投影的等高線。

上面出現(xiàn)的投影都是黑白灰，但在現(xiàn)在流行的設(shè)計(jì)作品中，最常見(jiàn)的是應(yīng)用了彩色的投影，攝影中也經(jīng)常會(huì)應(yīng)用彩色的投影渲染氛圍。

但是，投影中的這些彩色區(qū)域，并不完全都是投影，還包含了折射和漫反射等混雜的色光。為了簡(jiǎn)化（完整的闡述可以寫(xiě)一本書(shū)了），我們可以認(rèn)為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽(yáng)傘，傘下的人頭頂也會(huì)彌漫著草原的芬芳……

在開(kāi)始展示具體的設(shè)計(jì)案例前，我們要先明確一個(gè)原則，即：優(yōu)雅的投影是讓你感受到它的存在，但不會(huì)吸引你去關(guān)注它！

一般的設(shè)計(jì)軟件中，元素的陰影即是在元素的背后添加了一個(gè)相同輪廓的純色矢量圖形，我們可以通過(guò) XY 軸移動(dòng)它的位置，并使用模糊的參數(shù)來(lái)設(shè)置它的彌散度。

當(dāng)元素距離水平面越近，陰影距離元素也就越近，即投影的 XY 值越小，模糊也越小，如果離得遠(yuǎn)則相反。

3.1 常規(guī)投影類型

第一種投影的類型，即假定元素平躺，光源正對(duì)著元素的平面，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標(biāo)為0，只添加模糊的參數(shù)，透明度較低。第二層陰影使用相同的模糊參數(shù)，增加 Y 軸坐標(biāo)，透明度較高。

在非 MD 設(shè)計(jì)中，它濃郁的投影參數(shù)會(huì)讓整個(gè)界面變“臟”，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現(xiàn)更自然舒適。要牢記的是，當(dāng)使用純黑色做陰影時(shí)，透明度無(wú)論如何都不應(yīng)該高于 20%，正常區(qū)間在 5%-15%。

既然知道陰影屬性的規(guī)律，我們還可以復(fù)制這個(gè)矢量圖層做高斯模糊也可以得到一樣的效果，這種方法可以支持我們?cè)O(shè)計(jì)出更真實(shí)的投影。即將 Bottom Shadow 獨(dú)立出來(lái)，縮小并向下移動(dòng)。

如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺(jué)去調(diào)整它們的透明度。

如果感覺(jué)不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。

既然前面提到彩色投影是由于光線穿透了元素，那么當(dāng)使用了漸變色或者是圖片的投影，我們?cè)谥疤岬降膹?fù)制出的那層充當(dāng) Bottom shadow 的矢量圖形，就可以不使用填充色，而是直接用漸變或者是原圖進(jìn)行模糊和透明度調(diào)整。

3.2 非常規(guī)投影類型

光既然可以垂直于被照射平面，那么發(fā)揮想象力，我們還可以更改光與面的位置，讓光線與平面之間的夾角變小，如下圖所示。

在這個(gè)場(chǎng)景中，投影就作用在圖片下方的地面，只有地面處于透視狀態(tài)時(shí)，才能可以看見(jiàn)它的投影，所以，我們就可以得到下方的效果。

當(dāng)然，我們還可以結(jié)合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會(huì)發(fā)生變化。

我們甚至可以假設(shè)元素本身產(chǎn)生了一定的變形，如邊緣翹起，那么就會(huì)出現(xiàn)獨(dú)特的陰影形狀。

我們可以從日常生活中的觀察將各種不同的投影形式引用進(jìn)我們的設(shè)計(jì)中，讓我們?cè)O(shè)計(jì)中的視覺(jué)形式更豐富有趣。

學(xué)會(huì)正確的投影設(shè)計(jì)方式，并不是僅僅讓我們局限在 UI 元素的設(shè)計(jì)上。它還能給我們帶來(lái)很多意想不到的幫助，比如做設(shè)計(jì)作品的包裝。

通過(guò)前面講解的知識(shí)點(diǎn)，上方展示案例中應(yīng)用的陰影方式相信你們已經(jīng)可以看出端倪了，如果使用基礎(chǔ)的陰影設(shè)置去創(chuàng)建展示的陰影，就會(huì)發(fā)現(xiàn)效果遠(yuǎn)遠(yuǎn)不如案例的高級(jí)，自然也難以帶給別人良好的視覺(jué)體驗(yàn)。

最后，在項(xiàng)目中，想要將設(shè)計(jì)出來(lái)的陰影交付給開(kāi)發(fā)，真正落地實(shí)現(xiàn)出來(lái)，無(wú)論安卓或是 iOS ，陰影的渲染和設(shè)計(jì)軟件的參數(shù)是不一致的，這就需要大家自己鉆研究了。

作者：酸梅干超人      來(lái)源：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來(lái)越豐富，形式越來(lái)越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細(xì)節(jié)中掙脫出來(lái)，卻在色彩的展現(xiàn)中放飛了自我。

零售業(yè)有個(gè)有趣的研究成果 —— “七秒鐘定律”：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。

要在小小的手機(jī)屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實(shí)不易。如果你還對(duì)配色一無(wú)所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。

無(wú)論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來(lái)看看這些案例：

雖然是不同的應(yīng)用，但是這個(gè)拾色器的用法大同小異，但是，很多新人并沒(méi)有搞懂拾色器的正確應(yīng)用邏輯。

很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。

HSB 是色彩科學(xué)中對(duì)所有顏色屬性的理論劃分，是種概念上的定義，可以用來(lái)解釋任何色彩，也就是說(shuō)可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡(jiǎn)潔、干練。

因?yàn)橐粋€(gè)正確的選色過(guò)程，是先確定出色相，然后再在這個(gè)色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。

細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因?yàn)樯嗟男蛄惺且粋€(gè)首尾相接的環(huán)形模式，所以它實(shí)際上就是色環(huán)的柱狀展示圖，應(yīng)用起來(lái)和色環(huán)沒(méi)有實(shí)際區(qū)別。

接下來(lái)就要說(shuō)到重點(diǎn)，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個(gè)選擇區(qū)通過(guò)黃金三分法的方式切割成等比的 9 個(gè)區(qū)域，然后明確它們?cè)?UI 中的對(duì)應(yīng)情緒和應(yīng)用場(chǎng)景。

在過(guò)去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會(huì)往右上角聚集，一些次要、不可點(diǎn)的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無(wú)人區(qū)則是我們重點(diǎn)避開(kāi)的對(duì)象。

下面我們分析幾個(gè)案例，看看它們?cè)谶@個(gè)選擇區(qū)中的色彩分布情況：

大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會(huì)得到基本一致的結(jié)果。牢記這 9 個(gè)區(qū)域的場(chǎng)景劃分，可以幫助我們非常高效、安全地完成 UI 配色。

在眾多的 UI 設(shè)計(jì)規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：

• 主色：應(yīng)用的核心色彩，品牌色

• 輔色：豐富頁(yè)面視覺(jué)和傳達(dá)效果的次要顏色

• 中性：沒(méi)有色相的文字、背景用色

2.1 主色的選擇

主色是一個(gè)應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍(lán)色、微信的綠色、京東的紅色、淘寶的橙色。

確定主色，并沒(méi)有大家想象的那么復(fù)雜，它的要點(diǎn)在于 —— 你想讓用戶感受到哪種情緒，然后通過(guò)情緒關(guān)聯(lián)一個(gè)大致的色彩范圍，再進(jìn)行微調(diào)。

在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計(jì)中的用色有非常大的不同。

移動(dòng)端產(chǎn)品要在一個(gè)方寸大的空間中爭(zhēng)奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無(wú)法實(shí)現(xiàn)這個(gè)目標(biāo)的，所以今天主色飽和度越來(lái)越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：

支付寶主色變更分析

再加上屏幕的 RGB 顯示特性，高對(duì)比度，高動(dòng)態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。

2.2 輔助色的選擇

輔助色是豐富應(yīng)用中的次要色彩，它會(huì)包含一到若干個(gè)和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。

前面我們提到過(guò)色環(huán)，這里就要派上用場(chǎng)了。我們知道色環(huán)是個(gè)色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個(gè)最樸素的原則，即兩個(gè)顏色在這個(gè)環(huán)形中角度越大，那么視覺(jué)差異性越大，對(duì)比越強(qiáng)，比如下圖的展示：

這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個(gè)色彩對(duì)比度的判斷標(biāo)準(zhǔn)。而真正輔助色的選擇，是根據(jù)實(shí)際場(chǎng)景的功能決定的。

比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型，跟著常規(guī)方法來(lái)做，是沒(méi)有其它思路的情況下最簡(jiǎn)單、最安全的輔助色選擇方式。

沒(méi)有標(biāo)準(zhǔn)元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的則越近。

比如下方攜程的案例，主色在藍(lán)色的情況下，支付、保險(xiǎn)金標(biāo)簽這些需要被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓我們一眼就能看見(jiàn)并產(chǎn)生強(qiáng)烈的操作欲望。

2.3 中性色的選擇

中性色，是頁(yè)面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺(jué)得中性色無(wú)關(guān)緊要，實(shí)際情況恰恰相反。

主色輔助色決定了界面視覺(jué)是否出彩，而中性色的應(yīng)用直接決定了頁(yè)面能不能正常使用。如果看過(guò)比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁(yè)面和進(jìn)行使用也不會(huì)有絲毫的障礙。

中性色的配置，就是制定一個(gè)由深到淺的灰度階梯，應(yīng)用在對(duì)應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。

中性色雖然指的是無(wú)個(gè)性，但并不是只能用純灰色，常見(jiàn)的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足 RGB 的某種特性）。

這種做法，顏色越淺的時(shí)候飽和度應(yīng)用色值就越低，將這個(gè)規(guī)律在拾色器中進(jìn)行表現(xiàn)，那么我們就可以得到一個(gè) L 型曲線，我稱它為 “中性曲線”。

掌握對(duì)于主色、輔助色、中性色的選擇方法，那么對(duì)于 UI 配色的奧義來(lái)說(shuō)，你已經(jīng)掌握了一半，接下來(lái)就要了解更具體的實(shí)踐思路了。

配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。

所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個(gè)配色的四象限表格，在分別看看它們對(duì)應(yīng)的案例：

3.1 主色占比大，色彩豐富度高

主色會(huì)作為頂部標(biāo)題欄或其它重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來(lái)進(jìn)行暗示，吸引用戶關(guān)注。

3.2 主色占比大，色彩豐富度低 

這類配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對(duì)正式、品牌感強(qiáng)的應(yīng)用。

3.3 主色占比小，色彩豐富度高

這是多數(shù)主流應(yīng)用的趨勢(shì)，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。

3.4 主色占比小，色彩豐富度低

通常，會(huì)應(yīng)用這種方式是因?yàn)楫a(chǎn)品的服務(wù)是相對(duì)單一，但也需要用戶投入注意力的應(yīng)用，設(shè)計(jì)師就會(huì)盡力避免給予用戶過(guò)多的干擾。

每次在進(jìn)行配色的時(shí)候，我們都需要對(duì)自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動(dòng)手執(zhí)行。有了這個(gè)目標(biāo)，后面在整個(gè)項(xiàng)目的設(shè)計(jì)中的配色步驟就是水到渠成的事情了。

在實(shí)踐前，我們要簡(jiǎn)單講講一個(gè)應(yīng)用或者界面的標(biāo)準(zhǔn)配色的流程了，流程順序如下：

具體應(yīng)該怎么使用這套流程，我們用一個(gè)圖蟲(chóng) APP 改版的案例來(lái)做演示，首先從四象限中的第一個(gè)主色占比高、色彩豐富度高的類型做起。

4.1 配色流程演示

原型是 UI 設(shè)計(jì)的基本藝能了，在開(kāi)始具體設(shè)計(jì)、配色前，搭建頁(yè)面的框架原型是一個(gè)必備的條件，下面，是我們已經(jīng)準(zhǔn)備好的原型案例。

然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。

有了主色，就可以對(duì)頁(yè)面進(jìn)行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。

接著，我們開(kāi)始整理中性色的使用，選擇新的顏色來(lái)填充文字和背景，清晰的表現(xiàn)模塊層級(jí)，文字信息的權(quán)重。

最后，就是添加輔助色和其它色彩的元素了，這個(gè)步驟建議都是放在最后一步操作。因?yàn)樯试截S富，越難控制，容易讓整個(gè)畫(huà)面顯得雜亂無(wú)序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。

下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用其它色彩，來(lái)豐富頁(yè)面的色彩內(nèi)容。

4.2 其他配色類型應(yīng)用

根據(jù)第一個(gè)方案，我們可以再用這個(gè)原型來(lái)實(shí)現(xiàn)其余的三個(gè)方案的配色。

比如下面的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。

然后是主色占比小，色彩豐富度高的方案，進(jìn)一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。

最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開(kāi)始增多，只保留最核心的一些元素使用主色，和極少的輔助色。

根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計(jì)開(kāi)始實(shí)施前，我們都可以根據(jù)這種做法來(lái)做嘗試，并選出自己滿意的方案。

要再次強(qiáng)調(diào)，UI 配色是極其強(qiáng)調(diào)形式的應(yīng)用科學(xué)，最后做的往往會(huì)和一開(kāi)始想的效果有極大出入，所以需要我們有幾個(gè)備選方案，可以隨時(shí)進(jìn)行調(diào)整，并選出合理的那個(gè)。

作者：酸梅干超人      來(lái)源：站酷



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司