分析產品，也是難到很多 UI 設計師的問題。很多人認為這屬于產品經理的工作，但實際上 UI 設計師也離不開使用產品分析的技能來處理日常的工作，以及提升自己的產出質量。
產品的分析其實遠遠沒有想象中那么玄乎，這篇文章就要教會大家如何通過正確的步驟完成對產品的分析。
以下為正文。
產品分析，顧名思義，就是對某互聯網產品，進行系統的、多緯度的分析，并最終完成一份邏輯清晰，符合客觀事實的商業報告。
為什么我們需要這個報告？那是因為對于我們工作的決策來說，獲取越多有效的參考信息，就越能幫助我們做出正確的選擇。
舉個例子，如果我準備做一款針對定制奶茶外賣的 APP，那么就要了解這樣的 APP 產品通常有哪些模塊和功能，通過 APP 下單的流程是什么樣的，以及用戶更喜歡什么樣的設計或者交互。這時候，光靠我自己腦補是沒用的，我得分析同行或者相關外賣 APP 產品，才能得到明確的結論，然后作為依據開始設計我自己的產品。
或者，我們在面試或者客戶談判之前，有認真的分析過對方的產品，那么在溝通過程中就可以讓我們的處境更有利，能進行更有質量的溝通和探討。
產品分析的好處很多，不僅能幫助我們解決當前的問題，也可以幫助設計師鍛煉自己的邏輯思維能力，產品能力以及業務能力，是升職加薪的必備技能。
接下來，可能很多同學已經忍不住摩拳擦掌，想要知道產品分析應該怎么開始了，但別急，我要先講講一個被很多人忽略，以及在眾多講解文章中都沒有提及的東西，就是產品分析的 —— 目標。
前面提到，產品分析最后要以商業報告的形式呈現，而一份合格商業報告是要提供 “明確的結論” 的。如果這份報告指向性不清晰，洋洋灑灑寫了一百頁，像流水帳一樣把所有能羅列的分析內容全都一股腦做進去，那對于自己和看的人都是一場災難。因為這樣的報告沒有重點，缺乏閱讀性。
開始分析前，我們要確定一個明確的目標，即想要通過這份報告獲得哪些信息。在獲取的內容上，往往不會只想得到一個結果，很可能會是復數形式，所以我們需要列一個表格，將它們羅列出來。
比如我們再用想做奶茶外賣服務的APP為出發點，那么我們分析美團或者餓了么的產品，定了下面這些目標：
可以看出，對于產品、交互層面的分析明顯要大于設計的權重，根據 MVP 原則，第一個版本應該要得出的是一個流程可以跑通的產品，在前期過分關注設計和細節并不是首要任務。
所以，在不同的場景、時期、戰略上，產品分析的側重點就不同，而且留給我們的分析時間也不可能足夠充足的，所以也要將精力集中在最重要的事情上，提升效率，才可以真正解決問題。
整個產品分析的內容，可以劃分成多個緯度和若干的細節，我用下面這個思維導圖表示出來。
這樣的圖表讓人望而生畏，如果每一部分我們都認真做分析，那么勢必得寫出非常多的內容不可，所以才有了前面所說的要規劃分析的目標，在實際執行過程中有很多分析項是不需要提及的。
再者，產品分析中還包競品分析、運營分析、交互分析、視覺分析、文案分析等分支，它們各有側重和取舍，所以不要為此而感到恐慌。
下面，我們分別對這些內容進行簡單的說明。
1.產品的基本信息
分析任何產品的第一步，就是對它有一個大致的認識，首先就是去下載和體驗它，并且能用一句話來概括它的功能，然后通過該功能解決了用戶什么樣的需求。
然后就是它所處的行業目前的狀態，是否規模連年上升，有什么重量級新聞或者革新，未來的發展趨勢是什么。如果我們不了解的情況下，可以多在百度、知乎、新聞門戶上進行搜索和了解
盡可能收集可信的數據報告或者圖表，便于信息的整理。
對于一些新上線不太久的應用，通常會帶有非常明顯的初創團隊烙印，可能有一些匪夷所思的交互或者功能，這時候在應用上浪費時間干想是沒有用的，可以花點時間在網上找找創始成員的履歷，會對我們認識應用有更大的幫助。比如拼多多創始人在上線前有 “拼好貨” 的多年積累，產品模式是經過檢驗的產物，有大量相似的特征。
最后，還可以對產品當前的處境做簡單的收集，有沒有強大的外部競爭，它們各自在市場中占比的數據，以及用戶在不同商店、社交平臺中對其的評價。這可以幫助我們對該產品的競爭力和商譽做出初步的認識。
2.用戶研究
用戶研究這個名詞出現得非常頻繁，想不看見都難，它是專業產品團隊必備的項目準備工作。用戶研究的方式和產出物多種多樣，通常我們會建立清晰的目標畫像找出目標用戶，然后對他們進行訪談、調研，設計可用性測試、眼動測試等等，幫助我們更好的推出可以被用戶喜愛的產品。
但在我們研究外部產品的時候，往往不需要將它想得太復雜（除非是對直接競爭對手的分析），否則只需要整理該產品的目標用戶畫像即可。
用戶畫像即總結核心用戶多個緯度的特征，主要分成三個部分。
生理主要就是用戶的年齡、性別、身高或體重等特性，外在的則是諸如學歷、工作履歷、所處城市、薪資狀況等可以直接收集的內容，內在的則是性格、愛好、行為（喜好女裝之類的……）等等和關聯主觀特征的內容。
根據我們的需要對這些屬性進行篩選，就可以制作幾個標準的用戶畫像卡片出來，比如下方這種。
3.用戶體驗要素
因為這兩年對于產品、體驗、設計的專業分析需求高漲，所以 《用戶體驗要素》 中的五要素就成為大家喜聞樂見的分析模型，它給我們提供了明確的分析步驟和方向，易于上手。
戰略層：
戰略層指的是產品在宏觀、商業層面上的的考慮，需要我們自己的判斷，因為如果不是內部人員，那么對于一款產品的戰略層思考是無法做到絕對準確的。雖然網上可以搜索到很多商業分析和企業 PR 稿，但是這些內容的使用往往是具有欺騙性的，是基于運營需求拋給大眾的障眼法。
比如我之前分析的一篇關于瑞幸咖啡的總結（個人總結）：
https://www.zhihu.com/question/306547560/answer/559771838
所以，報告中沒有充足的把握時就不要在這個問題上侃侃而談，只需要回答，一款什么樣的產品才可以滿足用戶的需求獲得商業上的成功。
范圍層：
戰略層可以獲得的信息通常是一個比較宏觀、含糊的概念，所以，我們要來制定更具體的方案，明確產品應該包含那些功能和服務，規劃產品功能要覆蓋的范圍。
比如提供奶茶的外賣服務 APP，初期我們的功能包含選擇店鋪商品、加入購物車、交易結算系統，但不包含資訊推送、曬單社區等功能。
所以，范圍層就是將該產品提供的最重要的服務、產品內容羅列出來。
結構層：
這就是一個產品的功能或者信息結構，通常我們可以用思維導圖或者樹狀圖的方式進行梳理。最初級的方法是通過對可視頁面的層級做梳理，整理出產品的頁面層級結構。
而更好的方式，是根據產品的幾個核心功能建立產品流程圖，將操作的結構與邏輯展示出來，繪制這個圖表的過程中可以更好的加深我們對產品的理解。
框架層：
框架層即頁面的布局結構，以及組件層面的交互和展示，一般來說，可以研究產品的主要流程頁面，每個頁面的布局和信息展示是否合理，操作是否順暢。
如果覺得沒法很好的理解，書中建議是通過 “界面設計”、“導航設計”、“信息設計” 三個角度切入，但這樣操作性太差。建議在分析這個界面的時候，只要關注內容從上到下的布局內容有沒有契合主題，并且重要的組件中，字段權重能不能很好的被表現出來即可。
比如我們看下面飛豬的航班頁面，頁面模塊依次是城市、日期、班次列表、排序篩選。在航班列表中，最被用戶關注的價格信息得到凸顯（證明買機票的用戶對價格更敏感），時間作為次級權重元素相對被弱化但依舊易于識別。
表現層：
這里就是著重分析產品設計本身的特點了，相對就容易了不少，只要分析配色的方案，設計的一致性，捕捉動效和情感化設計的細節即可。
就不展開更多的說明了。
用戶體驗五要素的分析一樣不是散亂的拋出結果而已，如果按原書的方法做分析，肯定也會作出非常復雜的報告，所以我再提煉一次用戶體驗分析的思路。
通過分析產品的商業目標，進入劃分功能和服務的范圍，之后根據核心的服務總結主要操作流程，并在最后的交互、布局、設計的幾個方向來判斷它們是否有益于核心流程，能被用戶接受。然后得出結論，如果有益，那么產品符合商業目標的條件，如果沒有，則難以達成。
4.盈利模式
有一些產品本身就有購買要素，或者有付費的項目，那么對它作出分析是非常重要的。因為任何商業產品最終的目的都是為了盈利，所以多數產品會在這方面下足功夫。
如果是電商、外賣、快遞這類直接發生交易的應用類型，只要分析產品本身的交流流程即可，相對比較直觀。
如果是類似社交、資訊、工具類的應用，往往在盈利點上會比較隱晦，并通常包含較多零散的盈利來源，比如不同位置的廣告位，訂閱服務，付費道具等等。
我們要做的就是把這些盈利來源全部羅列下來，如果知道價格也對應填寫上去即可。
5.運營策略
如果不是以工具為導向的產品，通常就有比較重的日常運營。包括用戶運營、社區運營、媒體運營、內容運營和活動運營。
有不少產品的迭代是以運營為導向的，我們直接通過產品功能本身去分析它往往得不到理想的結果，所以需要從運營的角度進行切入。
比如每日優鮮這樣的生鮮電商，如果仔細研究用過它的服務，就會發現這款產品本身交易的流程乏善可陳，但是出彩的地方是在于層出不窮的運營策略，無論是選品的內容運營或者活動運營上，而這些運營方式才是推動產品的改動和優化的主要因素。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
新手和初學者總會錯誤的將審美的能力托付給天賦或是科班教育，作為自己審美水平低下的借口。如果這么想，那肯定不會為自己帶來任何改善。
今天，我要寫一些不一樣的東西出來。
按我一貫的風格，我不喜歡在入門問題上高開高走，一開始就討論比較概念或者藝術性的問題，就講講在最初級月薪不過萬，連自己工作設計類型相關的作品都沒辦法評判好壞的情況下，展開討論。
所以，我要寫一篇接地氣的提高審美的回答。
關于比較
審美是一個宏大的話題，無論是文學、影視、視覺、時尚等我們都可以審視它們的 “美”。不同領域的 “美” 有不同的形式，不同的立場，不同的角度，不同的原則。
在這里，我們不談具體某個領域審美的規則和方式，我們來講講提升審美的具體做法。
講一個例子，在國內，我們普遍覺得女生在對穿衣打扮的審美上比男生更優，對于其它經過設計的事物所展現的審美也比男生更好。這種差別在高中時期便逐漸放大，在大學中就能明顯得感覺出來這一點。
這是由于基因天賦論導致的嗎？
是也不是。女生愛美這點是一個既成的事實，有比較大的先天因素，而因為對美好事物的追求比男生更強烈，所以在審美上整體大于男性。
但大家要注意，這個因果關系的模型太過簡陋，我們要進一步來分析為什么對美好事物的追求就能導致審美上的差異，這就是我們提升審美的關鍵，先從衣品講起。
原因1：
基于對美的追求，女生往往會花更多的時間在穿衣打扮上，也就意味著要購物。無論是在商場還是淘寶，女生逛起來的熱情與時長都遠遠大于男生，這造成了女生在查看數量上也遠遠大于男生。
這就和很多設計前輩告訴你要 “多看” 的做法是一樣的，通過量變引起質變，只要你看的夠多，審美自然就可以提升了。
這話說的頗有道理，但依舊在推理上站不住腳。因為，量變為什么一定就能產生質變？這個變化的邏輯依據是什么？在青銅段位里打了一萬盤，也不代表一定能打進最強王者不是。
所以，這就是要引入第二個原因，關于對比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會做一件事，就是大量的試衣服（此處被我言中的女性同學可以點個贊讓我看見你們的雙手），經常抱了一整籮筐的衣服進試衣間，在里面對著鏡子鼓搗擺 Pose 大半個小時，然后才能挑選一兩件自己喜歡的出來，或者干脆一件也不要。
嗯，不要問我是怎么知道的……
在這個過程里，就發生了提升審美中最重要的一環 —— 對比。通過大量的對比，來找出好看的、高級的、適合自己的衣服。也因為對比，女生們就通過實踐來了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個過程實際上收窄了選擇的范圍，比如一個個子比較高挑五官比較立體的女生，是很難在比較過后還會選擇那些可愛、少女、小鳥依人的設計。很可能會偏向運動、男友、中性等風格。
而在有了具體的偏向以后，她們依舊會深入到這個范圍，繼續觀察、嘗試、對比，然后再次提升對這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡單，通過大量的觀察，然后對比和篩選，就能非常直接的提升我們的審美，這個提升的過程完全依靠的是人的主觀能動性。
日常生活中我們遇到的絕大多數某些人審美比自己更好的人，都是因為他們在某些方面看過的，比較的比我們更多，而不是依靠天賦的加持，這個思路落實到創作中也一樣。
當然，我絲毫不懷疑人類的歷史長河里，有極少數人打娘胎里就因為染色體中某些基因片段神秘的律動，而獲得了獨特的審美與創作天賦，但那始終是一個可以忽略的概率。審美的提升是個人主動的行為，不要祈禱上帝在你身上投的骰子能得到你要的結果。
即使拋開這群有 “天賦” 的神仙，也依舊還有很多第二梯隊、第三梯隊的老法師們通過奮斗逼的經歷功成名就不是。
所以別這么自戀總要搬達芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問問自己鑰匙配嘛？
什么？您配？
您配幾把……
具體案例
不正經到此為止，正經臉……
既然說了那么多關于比較的問題，空口白話難以令人信服，所謂沒圖我說個……錘子。因為很多新人都會說，你覺得大多數設計案例看起來都挺好，覺得挑不出什么毛病啊。
所以，下面我挑了幾個與設計有關的方向，并找了一些案例出來，你們來看看同類型中，哪一張圖是最優的。
而沒被選上的那些，對于你選出來的圖而言，它們當然都是有 “問題的”。
人像攝影
美食攝影
室內設計
產品設計
海報設計
管理界面
UI APP 界面
小結
審美提升的第一步，就是從對比開始，因為這個世界對所有事物的評判，都有不同方向的兩個極端。善惡、美丑、高矮、胖瘦，是對立而相互依存。
就像左拉的《陪襯人》中所講的：
“……另一個卻總是奇丑無比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個比較。要知道，你上了圈套。那個丑女子要是獨自走在街上，會嚇你一跳；那個相貌平常的，會被你毫不在意地忽略過去。但當她們結伴而行時，一個人的丑就提高了另一個人的美?！?
之前我們講了關于審美提升的第一步對比，但是我們留了一個疑問，為什么依靠對比我們可以提升，或者只靠對比我們就一定可以提升審美嘛？審美提升起來就如此容易？
當然不是！
對比的過程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統性提升審美的道路上，最大的敵人就是——主觀感受。因為無論我怎么解釋和審美提升相關的方法，總有人會覺得它就是依靠個人審美，不同人審美不一樣，總能找出有的人就喜歡網紅臉但看不上湯唯或者高圓圓的案例。
沒錯，每個人都有自己的審美，無論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設計師該擁有的審美是不能這么隨意的，因為作為專業人士，我們的審美就要符合 “專業” 的要求，即通過客觀標準來評價事物的內在價值。
比如茶、酒、咖啡這類飲品，都已經擁有非常成熟的市場，會根據產品的價值形成對應的價格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個人的選擇上，任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標瑰夏冰滴，但無論你怎么想，也無法改變它們價值不對等的事實，瑰夏手沖有遠遠超出速溶的口感和品質。
但超出的部分在哪里？答不答得上來，就是內行和外行的區別。
內行經過專業的訓練可以品嘗出其中蘊含的風味、口感，解釋它們與產地氣候的聯系，儲藏運輸的條件，以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。
如果設計師對設計相關的作品只能做到和外行一樣的水平，那么他也只能是設計師中的外行，并且缺乏成為優秀設計師的必要基礎。
所以，接下來我們來探究一下，作品的評價為什么重要！
丹尼爾·卡尼曼的暢銷書《思考快與慢》中，將我們的思考方式簡單的劃分成了兩個部分，用了非常簡單粗暴的 “系統1”、“系統2” 命名。簡單概括它們的含義，就是系統 1 是聯想式思維，系統2是規則式思維，也可以看成是直覺與慎思的區別。
先說系統1，直覺是我們大腦對日常接受信息簡化處理的產物，我們的大腦就像處理器一樣，每天都要面對海量的信息通過視覺、味覺等五感導入，如果它沒有任何區別的對這些內容進行深度、縝密的分析，那么它一定會超負荷運轉并最終自我毀滅。
所以生物的演化，讓我們的大腦進化出了一套可以對信息進行過濾和簡化的系統，格式塔心理學中關于視覺對物體簡化、完形的理論，也是由其產生，這就是我們對很多事物下意識反應的來源。比如在走路的過程中，看見一輛自行車直挺挺的從遠處像你沖過來，那么你會馬上感覺到危險并往某個方向規避，整個過程會在不到1秒的時間內完成。
而系統2，就是對事物進行邏輯推導的深入思考，如果用它來處理危險的事件，那么結果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進的方向與我站立的位置相交，并且它的時速約為 40km， 在撞到我的時間還有3S，如果以這種速度撞在我們身上，大概率會發生……
“BONG～”
那就不用想可能會發生什么事情，你已經被撞飛了，可以直接得到結果。類似的事情還有很多，無論是對與危險的，還是日常事務的作用，系統1都發揮出了極其重要的作用。也因為它的有效，而導致我們對它依賴過度。所以，很多人在對于美丑的審視上只依靠系統 1 來完成，而不會深入去思考各中原由。
系統 1 對美丑的判斷，是個人的，但它并沒有 “審” 的過程，專業的分析也就無從談起。斯洛曼和費恩巴赫所著的 《知識的錯覺》 里提到：
"直覺給予我們一個簡化的、粗略的，而且通常足夠好的分析，這讓我們產生錯覺，自以為所知甚廣。但是當我們慎思時，我們才意識到事物實際上何其復雜，我們真的只是略知皮毛。"
審美和品嘗美酒、咖啡一樣，需要通過了解專業的知識，培養系統的分析方式進行刻意練習，逐漸擺脫依靠我們直覺做出的不可靠的判斷。
因為任何優秀的設計作品，在創作過程中都不可能是隨性而為的，都是經過創作者深思熟慮后的產物，我們對優秀作品的評價，就是通過專業的知識對其創作邏輯進行推導，哪里有亮點，哪些是敗筆，都是清晰可見的。
它不僅幫助我們判斷別人作品的優劣，也可以分析我們自己作品的不足，從而得到改進的思路。所以為什么說審美要先于實踐，如果連什么是好的都不了解，自己設計出來的東西都不知道如何評價，又談何進步？
在我自己的教學經驗中，這個問題所表現出來的差異就很有意思。如有一些審美能力較差的學生第一次設計 Banner ，花了非常多精力和時間，自我感覺不錯，但是作品質量極差，會在得到否定的評價以后表示詫異和茫然，因為他們已經預感應該得到贊美與肯定。而審美較好的學生則是在完成作業以后充分的發現自己設計的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對其作品做出評價，因為他們自己也會覺得作品質量差的沒評價的必要。
但不幸的是，在商業視覺設計的領域中，提升我們的專業評價的能力，并不如其它行業一般有固定的流程和教學，按筆者自己長期的經驗來看，如果我們盲目的從藝術、設計、心理多個學科的基礎理論開始學起，那提升的速度太緩慢，需要的周期太長，而且有非常強烈的挫敗感，如果沒有好老師的引導，還容易鉆牛角尖誤入歧途。
所以，第一部分的對比，重要性才能體現出來。我們要通過實踐作為基礎，來系統性的提升我們的專業審美能力，通過應用推理的能力，抑制我們無所不在的直覺。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒太多關系，這是最氣人的。所以，最后一部分，我們來講講具體實施的做法。
先聲明，審美提升是要通過刻意練習的步驟的，誰也不可能只通過區區幾篇文章就以為自己已經明白了，所以需要執行下面這個循環步驟：
? 采集：大量觀察和收集作品
? 對比：留下它們中最好的
? 分析：尋找優劣差異的原因
開始前，還要解釋一件事，就是我們提升審美都要先從某個點開始突破，從你最感興趣的，或是工作關聯度最高的設計類型開始，而不是無差別的亂看。與美術學相關的所有設計中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。
1.采集
觀察的來源多種多樣，強烈建議初期只使用花瓣即可，不要分心到太多的平臺上，選擇太多往往不是好事，會增加干擾，讓我們疲于奔命，模糊一開始的目標。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創建一個 APP 的畫板，然后搜索 APP 相關的關鍵字，但不需要關注第一頁彈出的采集結果，直接查看 “畫板” 選項。
畫板是別的用戶自己整理的采集合集，我們可以通過封面簡單篩選出你喜歡的，然后打開它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來找到能讓自己覺得滿意的作品，再將它們 “采集” 到自己創建的畫板中，并設定一個數量，比如采集到500張為止。
2.對比：
達到目標的數量就停下來，因為再采集下去能帶來的作用已經非常有限了。雖然采集中已經包含了選擇和對比的過程，但我們要更進一步，在自己的選出來的作品里進行比較。相信在完成這個步驟以后，你們已經可以明顯感覺到最后 100 張收集的質量是遠遠高于前 100 張的。在羅子雄 TEDX 的演講中就說過：你回頭看三個月前收集的作品，會發現它們都是垃圾……
更極端一點，那就是我們只在挑選的作品中留下最好的十分之一，聽起來是不是很刺激。
也就是我們要開始在自己選出來的作品中，你要刪掉其中的 450 張作品 （最好有留底），即使當中有一些你非常喜歡，而且它們都是你的勞動果實。但就因為這樣，你才會更慎重的進行比較。因為多數人的采集只是走馬觀花，后面根本就不會看這些東西。
當然，這個過程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來會更順手一點。
3.分析：
在上一步操作里，我們會動用我們腦海里所有關于理性的分析方法來解釋它們的優劣，并得出結論，雖然這些想法可能很幼稚或漏洞百出，但不要擔心，最后一步就是用來解決這個問題的。
我們捉對挑選一些作品出來，在剩下的作品中和已經被你否決掉的作品各選一張，然后將它們排列到一起，對比它們的優缺點，比如下圖是我從我自己畫板中找出的近期和早期的采集作品。
專業的分析是怎么得出的？當然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設計的理論給格出來，這條路是走不通的，所以才有王陽明 “知行合一” 的教誨。
我們要把對比的內容進行細化，把一套作品看成若干細節的合集，明確比較的目標，這樣才能得到理想的結果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來分析，這時候局勢已經比較明朗了，上側的設計中文字是能被清晰識別的，在不同的字段類型中字重有對應的調整，主次有序。而下側的文字應用則缺乏對比，部分文字甚至和背景都無法做出區分，且字重幾乎沒有變化，使用了多種字體沒有整體性，導致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個細節，是不是簡單多了。如果這時候你再覺得手足無措，完全分析不出什么具體的東西怎么辦？
學??！
如對比到配色，我們解釋不出為什么右圖的配色不行，那就針對配色去了解相關的配色技巧、理論，網上可以搜索的分享就一大堆了，比如關于色彩對比、用色比例等等，將你學到的知識現學現用套進這兩張作品中，也就可以很快的得到驗證。
后面每出現這樣的問題，就現學現賣，不僅可以直接提升我們對作品的理解能力，還能鞏固我們學過的理論知識。多分析幾組對比，你就會發現對于這類作品的審美和理解已經得到了質的飛躍，這時候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環。
結尾
對于設計基礎審美的提升就解釋到這里了，再寫下去也沒人看了（寫不動了）。我們在職業相關的審美提升一定要具有實用性，接地氣，目標準確的特點，不要這個階段跑去聽古典，看畫展，讀詩歌，所以整個回答我都盡量避開這些坑不提。
設計師的專業性首先不是追求審美的極限，而是先提高自己的下限。只有超出自己動手能力的下限，才能讓我們拒絕粗制濫造的作品，驅動我們進步。
最后，在同意我前面觀點的基礎上，大家可以嘗試我最后給出的方法，如果你覺得你的審美還提升不上去，那歡迎你們隨時找我算賬！而只是看完卻沒有實質行動，那就不要再抱怨自己什么提升上去了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這兩年互聯網行業在 C 端市場上的增長已經不足以吸引大眾和投資者的視線，B 端作為一個新的熱點開始被追捧。
但 B 端是一個泛指，它是由若干面向商業場景的不同細分行業組成。包括云服務、SAAS、PAAS、定制系統、數據可視化、智慧平臺、商用 HMI 等等。
不同 B 端細分行業差距是非常大的，就像游戲 APP UI 和一般軟件 APP UI 完全是兩種職業一樣。每當我們討論 B 端行業前景，就一定要聚焦到具體的行業類型，否則就沒有討論下去的基礎。
而我們今天重點聚焦的，就是目前聲勢極大的數據可視化行業。
這是最近很多同學咨詢和關注的領域，也是各大顯卡廠商、3D 引擎發布會上的?？?。
各種讓人眼花繚亂的圖例和技術應用解說，很容易讓我們產生未來已經加速向我們走來的 “幻覺”，此時不抓緊時代的機遇投身數字化界面的設計，更待何時？
但我還是要勸大家別光顧著雞凍，冷靜下來好好分析這些行業和市場狀況，當你了解的越多，你就越會發現，這個職業方向和你們想的不太一樣……
首先，數字可視化領域也是一個比較籠統的行業，它依舊可以拆分出若干細分領域。但我先簡單根據視覺展示類型把它們分成兩大類，平面展示型和3D展示型。為什么根據這個分而不是商業場景，下面會做進一步解釋。
首先，數據可視化不是用了花哨的 3D 視覺才叫可視化，平面展示類型是絕對不能忽視的一個方向。它的主要應用場景集中在商業 BI ，統計分析工具等。
比如統計并查看網站、應用、店鋪數據的平臺。
這類產品有非常廣泛的使用場景和需求，是現代企業和產品運營的基石，它存在的價值是毋庸置疑的。
而另一類 3D 展示型的細分發展方向，包含展示大屏、數字孿生、智慧項目、商用 HMI 等類型。
這類項目更多是由技術發展催生而來的 “新需求”，和 5G 的發展是高度相似的。我對這個行業的發展潛力是認可的，但對設計師從事這個行業的總體前景持悲觀態度。
下面，針對真正的數據可視化設計師，我會從下面幾個維度展開討論（唱起反調）：
- 知識門檻
- 行業特征
- 團隊價值
數據可視化是對數據信息進行圖形化設計的過程，這個行業不是這兩年才出現的，而是由來已久。
從世界上第一個圖表的誕生之后，就有無數統計學家和設計師投身到這個領域中，發明和設計出各種精妙絕倫的圖形。
數據可視化的重要性不會比任何其它設計行業低，但是，數據可視化重要性的來源，是由數據本身的價值賦予的。因為詮釋數據的方式精彩，所以有價值，而不是僅僅是因為你做得好看且花哨。
更進一步說，就是數據可視化的價值是被統計學賦予的，而統計學是被這個世界真實需要的。
但很可惜，極少有 B 端設計師會投入精力到統計學的基礎知識和應用，這就導致很多設計稿中，連對數據的展示應該用折線還是柱狀都分不清。
或許你依靠經驗可以提升對一些基本圖表使用的心得，但是，進階的可視化設計需求就靠幾個簡單的折線、柱狀、餅圖就能解決嘛？那下面這些圖形應用需要掌握什么？
復雜的可視化應用場景，不僅需要設計師對統計內容和數據應用有主動地分析，還需要對計算機圖形學有一定的掌握。先不說門檻極高的 R 語言應用，但凡涉及到區級以上的地理信息可視化，就一定需要應用 GIS 工具的應用，導出并轉化數據包。
除了 2D 以外，3D 可視化的項目，所需的知識儲備就更進一大步。很多新人的認知以為設計師的工作只要用 3D 軟件建模并輸出就可以，學會 C4D 就可以做可視化項目。
這和以為掌握烤箱的功能就可以做出美味的蛋糕性質是一樣的……
前面說過，3D 可視化是由技術發展催生出的行業，它的應用受到技術的影響非常大。因為 3D 應用實在是太復雜了，比 2D 圖形復雜好幾個量級，這就導致設計可以落地的限制遠遠超出新手的認知。
常規的 3D 項目，必然要借助相關的圖形協議或者引擎。比如新手剛開始都以為的 3D 可視化就是網頁中運行 3D 效果，而網頁運行 3D 就是借助 WebGL 圖形協議實現的。
由于各種技術和硬件限制，WebGL 的性能是奇差無比的，因為它的圖形繪制渲染主要依靠 CPU 來完成，只要項目稍微復雜一點，多邊形和圖元數量一多，立馬就會讓電腦變卡（CPU占用量暴漲）。同時，它可以使用的渲染效果、著色器也必然不等同于 3D 軟件的高階渲染插件 OC 或 Redshift。
因為 WebGL 太弱，目前封閉的可視化項目就轉而使用其它的技術解決方案，即虛幻 Unreal 和 Unity。沒錯，就是你們玩游戲啟動畫面中顯示的那倆引擎。
換句話說，現在的高端 3D 可視化項目，就是用做游戲的方式做可視化應用，只要在指定設備里安裝，就可以調用 GPU 資源，實現更高級復雜的效果。
但是，只要應用了對應的引擎，就必須使用配套軟件來完成渲染、動畫、交互事件。即通過 C4D 或者 Blender、犀牛等軟件完成建模（不同可視化項目應該用的建模軟件也不一樣），再導入到虛幻或者 Unity 編輯器中進行下一步的操作，然后再和開發進行交付。
因為 3D 的復雜性，導致獨立 3D 可視化項目的開發流程被大幅度拉長，從而讓設計師需要掌握的知識面也大大增加。中間每個步驟都充斥著各種屎尿屁的限制，我就不繼續展開了。
3D 可視化設計師，幾乎就等同于游戲行業中的技術美術(Technical Artist)，因為游戲開發更復雜，分工更明確，技術美術作為設計師和開發之間的橋梁，幫助項目的美術能盡量在技術上被實現。
而因為可視化項目的建模精度與視覺效果要求不高（對比游戲），這些工作就要由同一個崗位包攬，設計師就沒辦法回避這些讓人絕望的知識信息。
還有一點對比游戲行業更讓人絕望的，就是 3D 可視化實際應用的技術方案是高度碎片化、沒有體系的，而且技術迭代周期遠比游戲行業短（WebGPU已經在路上了），這在客觀上增加了設計師的從業壓力（歡迎體驗前端開發的壓力？）。
一個專業的可視化設計師知識門檻，是遠遠高于一般 UI 設計師的。
當我們研究一個行業的前景時，就是研究它未來的趨勢和潛力。數據可視化嚴格意義來講并不是完全獨立的一個行業或市場，而是其它多個大市場中的某個組成部分。
如前面提到的數字分析、物聯網、工業物聯，都是層次更高的商業化市場。這些都是近年來高速發展的熱門行業，是帶動可視化行業發展的客觀依據，我就不一一找公開統計數據佐證了。
而可視化除了商業場景外，還有個在國內做可視化繞不開的話題 —— 政策。
如果具體關注過地產、5G、電動車產業的發展歷程，就應該明白國家意志的貫徹可以怎樣在短時間內催生出市場的高度繁榮（或者泡沫）。
而政策對于可視化的利好，就在于 “數字政府” 概念的規劃中。從幾年前開始就興起的政務數字化轉型，到最近國務院發布的 《關于加強數字政府建設的指導意見》，都是中央直接 “指導” 地方發展數字化的指標，是行政意志與力量的體現。
說更具體點，下面是指導意見中的目標說明，非常直白，大家可以自己體會：
到2025年，與政府治理能力現代化相適應的數字政府頂層設計更加完善、統籌協調機制更加健全，政府數字化履職能力、安全保障、制度規則、數據資源、平臺支撐等數字政府體系框架基本形成，政府履職數字化、智能化水平顯著提升，政府決策科學化、社會治理精準化、公共服務高效化取得重要進展，數字政府建設在服務黨和國家重大戰略、促進經濟社會高質量發展、建設人民滿意的服務型政府等方面發揮重要作用。
到2035年，與國家治理體系和治理能力現代化相適應的數字政府體系框架更加成熟完備，整體協同、敏捷高效、智能精準、開放透明、公平普惠的數字政府基本建成，為基本實現社會主義現代化提供有力支撐。
原文鏈接： http://www.gov.cn/zhengce/content/2022-06/23/content_5697299.htm
正因國情在此，所以這些年 G 可視化項目才如雨后春筍一般涌現。智慧城市、智慧農村、智慧水利、智慧交通、智慧民政等等，都是借助這股東風蓬勃發展。
所以，商業和政務的迫切需求，催生出一大批可視化服務公司，如 EasyV、ThingJS、觀遠等。即使頭部大廠也生怕錯過這個機會，紛紛組建團隊進行行業布局。如騰訊云的 Raya Data、阿里云的 DataV、網易的數帆等等，都已經小成氣候，初現鋒芒。
市場需求旺盛，規?？焖僭鲩L，前景理應一片大好！但是……
市場總規模的擴張，帶給個體的收益卻不一定有表面看起來那么理想，尤其是設計師崗位。
這要先從常規 UI 設計行業說起，UI 設計師工資已經是國內設計行業工資最高的類型之一，從10年前的屌絲行業到今天能和老牌貴族建筑設計叫板，是非常了不起的成就。
而之所以有這種收入，除了移動互聯網爆發以外，最重要的原因就是互聯網產品的 “利潤率”，可以用非常少量的職員撬動上億甚至上百億的利潤。
如王者榮耀 2021 年全年盈利 28 億美元，接近 200 億人民幣的利潤。一款游戲的利潤直接達到萬科（2021年利潤225億）和中國人保（2021年利潤216億）的水平，他們都是在冊員工超過 10W 人的大型企業，也是國內各自行業里的巨頭，而王者的員工只是他們的幾百近千份之一。
再如螞蟻金服、微信、抖音之類的國民級互聯網應用，都是用極少的員工達到讓人難以置信的估值和利潤，這在傳統行業是無法想象的。
所以能盈利的公司會給員工開出滿是行業紅利的待遇，拔高行業上限的同時，也迫使那些有志于挑戰巨頭的新公司愿意抬高工資價碼，吸引人才。
總結起來，UI 之所以平均收入遠超平面、服裝、工業、室內等老牌設計行業，并不是因為 UI 專業門檻更高，而是以行業規模、項目規模、利潤率三個核心指標的共同作用形成。
其中，項目規模和利潤率的重要性，其實遠遠大于行業規模，這是很多職場新人最想不通的地方。
例如廣告行業已經是一個萬億市場了，除了分眾這家互聯網獨角獸外，其它老牌廣告營銷公司每年財報的營收和利潤大家感興趣的可以去搜搜（下圖為 21 年財報）。
看看他們的營收總額和凈利潤比例，以及員工總數，你自己就會得出，作為普通平面設計師的待遇，是絕對不可能超過頭部互聯網企業的，甚至能達到中游水平都是超常發揮的結論。
行業規模大，但是頭部企業規模和利潤卻不高，除了行業本身的平均利潤率因素外，還有一個原因就是業務是高度分散的，沒有被集中在少數頭部企業，供應商數量龐大，不像多數 C 端市場都由少數幾家公司或者產品把持或直接壟斷。
在可預見的未來，可視化行業也會處于這樣的情況，競爭激烈，利潤率低。而且作為 B 端服務商，不要看各家企業需求旺盛，政府各級單位招標不斷，實際上每個項目的規模都不大，百萬內的項目才占行業的絕大多數，這是不太符合滿足我們收入期待的項目規模。
而單個項目規模在未來高速擴大在我看來也不太現實，有兩個原因，一個是項目使用人數極少（通常也就幾十上百人…），另一個就是對可視化項目實用性的質疑。
如果看過航天相關的報道，就會看到指揮室數據大屏相比我們網上看過的案例比起來，簡陋得發指。這會是因為總局沒有預算，請不起設計師和團隊開發嘛？
為什么航天指揮中心沒有用下面這種 “科技感” 滿滿，復雜的我坐下面保證除了標題一個字也看不見的 “高端設計”？
原因說出來讓人沮喪，因為他們 —— 真的要看上面的信息??！
真正能發揮可視化價值的場景并不多，很多項目出發的意義，就是為了表面工程（各級ZF單位需求，自行體會），裝飾屬性大于實用性。既然實用性不夠高，很多甲方心里也清楚，是花錢裝裱門面的，那么投入的預算就更不可能太高。
所以，我對可視化行業的整體的發展是認可的，但對單家公司或項目的預期，卻是悲觀的，它們沒法達到我們已經習慣的 C 端和 SAAS 行業的高度。
最后，還要探討下數據可視化中設計師的團隊價值。
我們知道，一個完整的可視化項目設計與開發門檻都是非常高的，但因為高，創造的價值就高嘛？項目營收的成本占比就高嗎？
答案依然是否定的！因為可視化行業的絕大多數項目都是 “傳統” 的外包項目。
不管是商業是政務領域，外包最重要的任務，都是找到業務（中標）。樸素的價值觀會認為，只要技術和服務夠好，業務自然源源不斷，其實不然。技術服務都是后驗的，客戶沒有合作過之前是不知道的，在市場上挑選服務商，可不是打開淘寶買家評論查看分數和具體評價篩選。
所以，外行了解服務商的窗口，更多是通過熟悉的中間人介紹，或者銷售的嘴。誰能拿到項目，誰就為公司創造了最大的價值。后面怎么做那是后面的事，換誰做不是做……
這就是最常見的外包企業思路，所以技術人員或者設計往往都是消耗品，沒有那么強的依賴性。而在具體外包實踐環節中，項目的執行決策也和一般 B 端、G 端項目不同。
我以前一直強調，B 端項目的存在價值，是用來解決業務問題，為企業 —— 降本增效。但是可視化項目往往不是用來解決問題，而是用來 —— 解決產生問題的人！
尤其是面向政務的項目，在領導的需求面前，是沒有體驗這一說的，首先考慮的應該是 ”科技感“（結合前文理解），不然怎么展示自己貫徹上層指導意見……
這種環境對于創意類職業是非常不利的，一方面創造的價值并不顯著，另一方面是由別人 “教你” 怎么做設計。長此以往，你會越來越缺失職業競爭力和發展可能。
問題二，則是因為可視化項目獨立開發成本太高昂，做的視覺內容又非常固定。于是有實力的團隊就紛紛投入可視化編輯工具的研發，解決最麻煩的底層圖形方案。
這和 B 端的前端開源框架非常類似，把底層的代碼、交互、動畫、性能優化都幫你做好了，設計師和程序員可以用非常省事的完成項目的視覺內容落地。
但是，常規 B 端管理項目中，界面樣式一直就不是最重要的事情，而是解決復雜頁面流程和組件交互的問題。所以資深的 B 端設計師樂于應用第三方的框架來完成復雜的項目。
而在可視化領域中，多數項目并沒有那么多和復雜的交互需要考慮，視覺展示效果才是第一位，絕大多數團隊應用第三方框架是大勢所趨。核心工作內容被影響，那才叫觸及靈魂的打擊。
所以，在我看來可視化設計師可以創造高價值的場景，只會出現在兩種團隊中。
第一種，是給其它可視化團隊提供圖形服務的 SAAS 工具，比如 Raydata、EasyV 這類。都需要團隊有非常優秀的前端程序員和技術積累，換句話說，就是既要有技術實力又要有資金保障的團隊。
第二種，則是走優質項目輸出路線的小團隊或公司。會有一些優秀的開發人員坐鎮，再由設計師主導來推動業務發展，不會什么項目都做，會選有價值的用心交付。例如早年的 UI 外包團隊 ARK、Eico、TangUX 等都是這種路線。
這兩種對比目前海量的服務商來說都是鳳毛麟角，第一種類型是可視化設計師發展最好的歸宿，因為設計產出和圖形技術發展高度捆綁，只有這樣的團隊才會最早最快接觸新的專業技術方案。
除了這兩類，不要對其它外包類公司有太多的期待。在整個互聯網行業中，成熟產品團隊非常不喜歡招外包設計師不是沒有原因的。
至于未來是不是可視化內容會在 C 端領域打開局面，發展出一些新的應用場景，我就不過早下定論了。
最后，做個總結，給目前還沒有進入可視化設計行業，或者是誤打誤撞進入這個行業的設計師一些職業方向的建議。
可視化設計行業和廣告業非常類似，就是從業人員收入構成是沙漏狀，而不是像 UI 這樣呈金字塔狀的，缺乏健康的增長梯度和充足的腰部崗位。
可視化設計師從菜鳥進入專業階段所需的知識量更大，準備周期更長，技能門檻更高。在初中級階段和一般 UI 行業對比起來 —— 毫無性價比。
如果本身熱愛可視化，想將 FUI 那些東西搬進真實的世界和項目里，也做好了艱苦學習的準備（說不定是你樂在其中的），那么這個的行業的頭部崗位就是為你這種人準備的。
畢竟行業體量大，當然就會有真正優質的崗位出現，只是它的門檻高，沒有那么多水分能擠。
如果不是異常熱愛這個行業，具備較強的自學能力，或有一定的 3D 和圖形技術知識積累，那么不太建議往這個職業深入發展，一般的 B 端和 SAAS 項目才會是更好的選擇。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內容進行組織和排版，涉及到原創的也僅僅只有少量的圖標（大多數人還畫不好）。
這種狀態持續了很多年，看起來歲月一片靜好。
但是，這兩年市場發出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯網和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現狀也被稱為互聯網的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。
只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！
且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。
作為新世代的 UI 設計師，多數人對擬物的設計可以說是完全空白的狀態，所以是時候要重拾擬物設計這個傳統藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 “輕”，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內，不能和輕擬物劃上等號。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節的漸變角度、投影的使用上，就會產生錯誤的設計，造成光影視覺沖突和矛盾。
在創建了光源以后，物體受到光線的影響就會產生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現害會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現，再或者一拳超人中男主光頭上長期存在的高光配飾（多數動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發現首頁頂部業務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區分。
形體的重要性在于要對圖形本身有比較合理的呈現，不要讓比例失調和圖不達意。
第二步：完善圖形細節
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創建一個圖層，然后添加深色的透明度漸變，就可以表現出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，講整個圖標的質感進行拉升，
通過上面的演示，我們可以將整個擬物設計流程精簡成：
1.確定圖形基本輪廓、外形比例、模塊色彩
2.豐富細節樣式增加趣味性和適當的擬真感
3.通過蒙版添加暗部來完善表現的明暗和層級關系
4.添加高光元素作為圖形的亮點，拉升層次感
然后，通過這樣的步驟，再來完成后續的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
在如今的界面設計中，投影使用的范圍和頻次越來越高。無論線上項目或是追波上飛機稿，都可以看見各種各樣的投影樣式。
投影的使用，是 UI 設計師必須掌握好的視覺設計基礎。投影遠沒有大家想象的那么簡單，即使軟件中可以設置的參數并不多，很多設計師始終沒辦法很好的應用投影來提升自己的設計質感。
所以，這篇文章就會詳細講解設計投影的正確姿勢。
有了光，才有影。光影是美術和攝影最核心的基礎。
如果沒有系統學習過相關理論，對投影的認識會有失偏頗，會認為投影只是將一個物體的輪廓（遮擋光源的部分）完整映射在其它平面上而已，一個光源下只有一個影子，比如下圖設計出來的情況。
但是，真實世界中的投影，卻并沒有這么簡單，往往虛實即不統一，明暗也不一致。就像下面這個物體的陰影。
在光學原理中，不透明物體遮擋光源，所產生的影子有兩個部分，本影和半影。本影是影子中間最暗的部分（還有偽本影的概念，我們暫時將它合并起來理解），而四周開始變淺變淡，有彌散質感的影子稱為半影，就像下圖所示。
現實世界中可見的投影都會形成這兩種影子，因為光源有散射的特征，當光線照射在物體上時勢必會產生非垂直角度的光線，于是其中作用最大，重疊最多的一部分形成本影，而其余比較極限的切線部分形成半影，如下圖的案例。
通過案例我們也可以發現，當光源、物體、陰影面的距離不同時，產生的本影和半影面積也就不同。反過來講，我們還可以通過物體本影和半影的面積，來判斷它的空間關系，比如下方的兩個物體，明顯能感受到下側懸浮的高度大于上側。
或者，通過陰影來判斷光源對于物體的方向和強弱。比如下圖案例，就可以明顯判斷光源位于畫面的左側，所以即使擺入其它物體，陰影也會朝反方向延伸。
除此之外，投影還可以反應很多其它隱藏的三維信息，只要使用得當，它就可以幫助設計師表達呈現各種不同的空間位置。比如可以通過投影判斷物體是處于懸空或者是平躺，以及物體的厚度如何。
根據生活的經驗，我們已經對投影所產生的暗示習以為常，能根據投影的結果下意識的對界面內容做出判斷。所以，設計師在設計過程中如果對投影沒有進行很好的思考，就無法設計出符合規律和邏輯的投影，界面就會產生違和感，而作品也因此大幅降低了質感。
在進入了扁平化的設計環境后，投影有很長一段時間被抹除，因為大家認為那是擬物的遺毒，就怕設計里用到擬物元素顯得不夠時髦。
到了 Material Design 發布以后，谷歌在規范中增加了 Z 軸的概念，也就是為平面預設了立體的空間，設計元素可以定義與空間中水平面的距離，并通過投影來表現。
下圖中，Z 軸數字越大，代表和水平面的距離越遠，上升得越多。而帶給我們這種感受的原因，就是投影的暗示，元素本身的 XY 坐標并沒有任何改變。
即然增加了投影，那么谷歌的專業設計團隊，肯定不會很隨意的制定其參數。當我們打開谷歌的官方 UI kits 源文件進行查看時，就能發現其中的奧妙。它們為元素創建了兩層投影，即本影和半影，有時也稱為 top shadow 和 bottom shadow。
并且，還有一個在第一部分沒有提及的要點，投影的深淺與元素的距離是非線性的，即中心到邊緣衰減的速度是越來越大的，用坐標軸標示就是非線性的函數關系，而大多數軟件中的投影只能以線性的模式呈現。
在 UI 設計師接觸的平面類軟件中，只有 PS 具備完美復現這種投影的能力，即控制投影的等高線。
上面出現的投影都是黑白灰，但在現在流行的設計作品中，最常見的是應用了彩色的投影，攝影中也經常會應用彩色的投影渲染氛圍。
但是，投影中的這些彩色區域，并不完全都是投影，還包含了折射和漫反射等混雜的色光。為了簡化（完整的闡述可以寫一本書了），我們可以認為是光線穿透物體從而投射出帶有物體本身顏色的投影。就像撐起一把綠色的陽傘，傘下的人頭頂也會彌漫著草原的芬芳……
在開始展示具體的設計案例前，我們要先明確一個原則，即：優雅的投影是讓你感受到它的存在，但不會吸引你去關注它！
一般的設計軟件中，元素的陰影即是在元素的背后添加了一個相同輪廓的純色矢量圖形，我們可以通過 XY 軸移動它的位置，并使用模糊的參數來設置它的彌散度。
當元素距離水平面越近，陰影距離元素也就越近，即投影的 XY 值越小，模糊也越小，如果離得遠則相反。
3.1 常規投影類型
第一種投影的類型，即假定元素平躺，光源正對著元素的平面，可以參考谷歌提供的投影方案疊加兩層投影。第一層是 XY 軸坐標為0，只添加模糊的參數，透明度較低。第二層陰影使用相同的模糊參數，增加 Y 軸坐標，透明度較高。
在非 MD 設計中，它濃郁的投影參數會讓整個界面變“臟”，變擁擠。我們要做的是要降低投影的透明度，這樣才能讓投影的表現更自然舒適。要牢記的是，當使用純黑色做陰影時，透明度無論如何都不應該高于 20%，正常區間在 5%-15%。
既然知道陰影屬性的規律，我們還可以復制這個矢量圖層做高斯模糊也可以得到一樣的效果，這種方法可以支持我們設計出更真實的投影。即將 Bottom Shadow 獨立出來，縮小并向下移動。
如果想要得到彩色的投影，那么只要切換投影的色彩即可。值得注意的是，不同色彩的刺激程度不同，我們要憑感覺去調整它們的透明度。
如果感覺不得勁，陰影太少了，那么我們就讓元素的 Z 軸上升。
既然前面提到彩色投影是由于光線穿透了元素，那么當使用了漸變色或者是圖片的投影，我們在之前提到的復制出的那層充當 Bottom shadow 的矢量圖形，就可以不使用填充色，而是直接用漸變或者是原圖進行模糊和透明度調整。
3.2 非常規投影類型
光既然可以垂直于被照射平面，那么發揮想象力，我們還可以更改光與面的位置，讓光線與平面之間的夾角變小，如下圖所示。
在這個場景中，投影就作用在圖片下方的地面，只有地面處于透視狀態時，才能可以看見它的投影，所以，我們就可以得到下方的效果。
當然，我們還可以結合光源的類型，比如使用聚光燈等，那么陰影的輪廓就會發生變化。
我們甚至可以假設元素本身產生了一定的變形，如邊緣翹起，那么就會出現獨特的陰影形狀。
我們可以從日常生活中的觀察將各種不同的投影形式引用進我們的設計中，讓我們設計中的視覺形式更豐富有趣。
學會正確的投影設計方式，并不是僅僅讓我們局限在 UI 元素的設計上。它還能給我們帶來很多意想不到的幫助，比如做設計作品的包裝。
通過前面講解的知識點，上方展示案例中應用的陰影方式相信你們已經可以看出端倪了，如果使用基礎的陰影設置去創建展示的陰影，就會發現效果遠遠不如案例的高級，自然也難以帶給別人良好的視覺體驗。
最后，在項目中，想要將設計出來的陰影交付給開發，真正落地實現出來，無論安卓或是 iOS ，陰影的渲染和設計軟件的參數是不一致的，這就需要大家自己鉆研究了。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。而 UI 的發展從擬物的繁瑣細節中掙脫出來，卻在色彩的展現中放飛了自我。
零售業有個有趣的研究成果 —— “七秒鐘定律”：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我幾年經驗總結的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關注色相選擇條。
細心的同學應該已經發現了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環形模式，所以它實際上就是色環的柱狀展示圖，應用起來和色環沒有實際區別。
接下來就要說到重點，飽和度和明度選擇區，我自己使用的習慣，是將這個選擇區通過黃金三分法的方式切割成等比的 9 個區域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯網產品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側，無人區則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結果。牢記這 9 個區域的場景劃分，可以幫助我們非常高效、安全地完成 UI 配色。
在眾多的 UI 設計規范中，色彩部分的介紹，都必然包含三種類型，分別是：
主色：應用的核心色彩，品牌色
輔色：豐富頁面視覺和傳達效果的次要顏色
中性：沒有色相的文字、背景用色
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關聯一個大致的色彩范圍，再進行微調。
在今天的互聯網產品中，主色的應用選擇范圍在拾色器區域的右上角，前面已經有解釋了。這和平面設計中的用色有非常大的不同。
移動端產品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調是無法實現這個目標的，所以今天主色飽和度越來越極致，比如我們之前整理的，發在站酷的一篇總結：
再加上屏幕的 RGB 顯示特性，高對比度，高動態范圍的特質能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區域選出合適的色值。
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環，這里就要派上用場了。我們知道色環是個色彩序列首尾相連的環形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了標準的用色類型，跟著常規方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環的 “角度原則”，越需要被突出的顏色，可以在色環中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產生強烈的操作欲望。
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現、便于閱讀的重任。多數新手覺得中性色無關緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的主要判斷依據是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足 RGB 的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規律在拾色器中進行表現，那么我們就可以得到一個 L 型曲線，我稱它為 “中性曲線”。
掌握對于主色、輔助色、中性色的選擇方法，那么對于 UI 配色的奧義來說，你已經掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們應用如何應用，如何配置。
所以，我根據主色和輔助色應用總結了一個配色的四象限表格，在分別看看它們對應的案例：
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關注。
這類配色中，主色的應用占比也大，出現頻率高，鮮有其它顏色出現。比較適用于圖片內容豐富的題材中，或者是相對正式、品牌感強的應用。
這是多數主流應用的趨勢，降低主色占比，留出更多的空間給內容模塊的展示上，突出自身帶有的服務和功能。
通常，會應用這種方式是因為產品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規劃，然后再動手執行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現模塊層級，文字信息的權重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內容。
根據第一個方案，我們可以再用這個原型來實現其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經不太應用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據四種不同的配色方案，我們就可以得到四種不同的配色結果和風格，在每次設計開始實施前，我們都可以根據這種做法來做嘗試，并選出自己滿意的方案。
要再次強調，UI 配色是極其強調形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調整，并選出合理的那個。
作者：酸梅干超人 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
頭像，作為我們在虛擬世界展現給別人的形象，無疑擁有強烈的社交屬性，還記得當年剛剛擁有QQ的我，隔一周就會換上自己喜歡的圖片，通過頭像還添加了好些擁有同樣愛好的人。
但是隨著年齡的增長，我們開始不太愛去設置自己的頭像(有些APP甚至會將設置頭像作為領取獎勵的任務，可見大家越來越不愛設置頭像)，一些不經常使用的APP都是習慣性的使用默認頭像。
這時候設計合適產品的默認頭像能夠使產品整體更加和諧。接下來我們就來看看默認頭像的7種設計方式。
單個無性別頭像是最常見的默認頭像設計方式，以無性別灰色或單色系半身人像為主，有些會使用宇航員的形象（也看不出性別），且一般只有一個。如下圖：
特點：無性別頭像具有更廣的包容性，設計簡單快捷適合比較趕的項目；但設計單一，單個無性別頭像的社交屬性不夠強烈。
性別頭像以男女性別劃分，根據用戶男女比例的不同有以下三種情況。
產品定位以男性居多，無論用戶男女都僅有男性默認頭像。
特點：只設計一個男性頭像，比較快捷，但對女性用戶不太友好
產品定位以女性居多，無論用戶男女都僅有女性默認頭像。
特點：只設計一個女性頭像，比較快捷，但對男性用戶不太友好
產品定位沒有明顯的性別偏向，分別設計男性和女性頭像，需要注意的是該方式常常需要用戶設置性別。
特點：分別設計男性與女性頭像，能滿足大部分用戶，需要開發判定用戶的性別。
吉祥物頭像也是使用很頻繁的，一般擁有吉祥物的APP都會采用該方式設計默認頭像，設計1個或是多個。
常見吉祥物多以動物為主，也有以人物、擬人物為主的吉祥物，比如B站的看板娘萌妹子和黃油相機的一坨黃油。
特點：吉祥物頭像更具辨識度，隨時隨刻加深用戶對吉祥物的印象，便于制作延伸設計。
這里的logo頭像是除去以吉祥物為logo的APP后，其他的logo頭像。使用這種默認頭像的APP比較少見，目前我看到的有悅動圈和開眼，如下圖：
特點：logo頭像能加深品牌的印象，但缺失了頭像應有的社交屬性。
頭像中以文字為主，一般僅有兩個字。以釘釘為列，它的默認頭像使用用戶姓名后兩位作為中心，我認為其實釘釘的默認頭像已經可以很好地幫助用戶找到公司對應的同事，反而比起某些圖片類自定義頭像來的直接。
還有一種文字頭像是以APP名稱為主，比如叮當快藥，它的默認頭像取了”叮當“二字，和logo頭像類似，同樣能加深品牌印象。
特點：以文字為主，多為兩個字。OA辦公系統可借鑒釘釘以員工姓名為主。也可將APP名稱置入頭像中，能迅速設計出來，適合時間緊的項目。
多主題默認頭像，常用在擁有強烈社交屬性的產品中，APP給了用戶更加豐富的默認頭像選擇，有了這些豐富的默認頭像即便用戶不自定義頭像也不會對界面的層次感造成影響。
soul設置頭像時可以選擇多種畫風的不同人物，男女分別有36個默認頭像供用戶選擇，并且還可以改變背景色，使得默認頭像變化豐富，具有一定的趣味性。
類似的還有B站的隨機頭像，共有11個以B站看板娘為形象的默認頭像，可以幫助用戶減輕因選擇困難癥不知用何頭像的焦慮。
特點：為用戶提供了豐富的默認頭像，能減輕用戶不知使用什么頭像的選擇困難，并且具有一定的趣味性，但設計花費時間較多，不適合時間緊的項目。
最后介紹的捏臉頭像，追溯起來應該是從iOS12發布的Memoji延伸而來，這種可以像捏泥人一樣任意改變的頭像具有非常強烈的趣味性，甚至形成了一夜爆紅專門捏臉的APP-ZEPETO。
捏臉頭像的有趣不僅在于可以捏臉，它就像是我們在虛擬世界中的形象，可以給她打扮、布置房間等，更像是延伸出來的裝扮游戲。比如淘寶點擊個人中心的頭像就會進入淘寶人生。
soul則將捏臉頭像真正應用到了頭像的制作中，在個人中心點擊頭像即可進行超級捏臉，捏好后就可以直接應用了。
特點：具有強烈的趣味性，可以延伸為單獨的互動游戲，實現難度較大，不適合廣泛的應用。
本文著重介紹了7種默認頭像的設計方式，分別是單個無性別頭像、性別頭像、吉祥物頭像、logo頭像、文字頭像、多主題頭像、捏臉頭像，我們在設計時可以根據項目時間、產品的定位、趣味性等選擇合適的默認頭像。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：人類君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
數據可視化的表現形式現在也2D和3D（這里的2D和3D只是通俗的叫法，不具備行業普遍性，只是作為文章中的分析，進行表達），在網上還是有很多關于2D數據文章和教程，我覺得還比較具備行業的普遍性，所以今天我們就來聊聊3D數據可視化。
現狀：3D可視化目前來說還是屬于一個比較小眾的設計群體，而且因為主要面對的客戶大多是ToG或者ToB的項目，項目保密工作做的很好，對外發聲較少，因此也會顯得特別神秘，行業門檻也相對較高。但是由于政府和企業對于這類項目的需求大，再加上城市智慧建設、軍事電子沙盤、智慧交通，項目多且廣泛，也就導致了這類設計師較為稀缺。
通常所表達的就是通過3D的游戲引擎（例如：Unity3D）制作出來的數據可視化項目，他能夠更直觀的還原出所要展示數據可視化的真實場景，并且能夠實時接入數據，使得整個項目更具立體、更具有科技感。使得項目在面對復雜操作時能靈活應對。
在我看來，雖然也是UI設計師，但是他和大眾認知中的UI設計師又有很多不同，比如承載設計的屏幕可能大到16m*9m、小到只有iPad的尺寸，因此很考驗設計師對不同尺寸屏幕下的設計方法。而3D數據可視化更多是向空間、建模形式的表達，因此對于三位的理解、空間的交互轉變都尤為重要，我在下面來一一拆解需要哪些能力～
視覺能力：在設計當中，視覺也是最基本的能力，其主要滿足這個數據可視化當中對于場景、物體的視覺能力、數據圖表的視覺效果，對于地圖、建筑、數據的視覺表達。通常風格以科技感的風格為主，因此考驗的更多是我們設計師的想象力、對于科技產品的表達能力，因此對于FUI比較重視，如果平時能夠多看科幻電影能夠對這方面能力也會有所提升～
數據可視化能力：首先你需要具備很強的數據表達能力，即將用戶想的數據現象通過你的數據化設計進行表現出來。同時需要去理解每個數據之間的真正含義，然后再去設計，因此對于圖表的理解必須更加深刻。再次因為是通過3D的手法實現，你所更需要了解是我設計的這個圖表，2D和3D之間到底存在什么差異，既然我用了3D，在圖表層面上怎么和2D圖表拉開差距、有所區別，這是我們需要去認真思考的。
三維交互能力：三維軟件的交互和二維不同，雖然在移動端大家都提出了Z軸的概念，但是和現如今所需要的可視化的項目不同。
建模能力：因為在實際工作當中，很多建筑物不能夠靠你的三維想象來進行設計稿的制作，因此通常我們也會使用c4d這一類的三維建模軟件，這樣能夠保證快速出設計稿的同時，對于物體的表現又能非常到位。
對于接觸數據可視化的UI設計師來說，最關心的莫過于這個項目你們是怎么落地。因為每個公司要求不同，我說的只是我們自己的做法，只是想說出來和大家分享分享～
一般我們產出的會幾個東西：設計靜幀圖（包含靜幀圖、標注、切圖）、視頻demo、交互流程（看項目）
基本流程：這個是必須要的，首先項目會根據我們所出的設計靜幀圖進行和需求方進行對接，確定他們想要的效果和設計靜幀稿上是否一直。如果雙方理解存在差異，就會按照要求進行修改。修改完成后會將設計靜幀稿交到建模師手中，3D建模會根據你這個靜幀圖進行建模。當然，我們設計師是不需要制作模型的，如果會，當然也是更好，能夠方便建模師進行快速建模。但是因為每個項目的要求不同，對于我們這種設計師來說時間相對很緊。對于我們來說需要進行快速的出圖，從而能夠和需求方進行方案的確定。
設計靜幀圖：他最大的作用是和需求方進行溝通，以及和建模師進行效果確定。還有后續驗收時會根據靜幀圖進行效果評定～
標注：字體、字號、顏色、位置、基本數據參數，標注和之前大家熟悉的思路基本一致。
切圖：icon、圖片，開發不能通過代碼進行實現的
視頻demo：會根據項目的難以程度進行制作，通常在較大項目中，會有時間進行視頻demo的制作，同時demo也會給需求方、開發進行很好的演示，使得整個項目在開發當中能夠更加明確。
交互流程：但是我們需要考慮到的是設計后整個效果是如何，以及設計后整個點擊過后的交互，因此在基本方案確定后，靜幀圖會和交互方案
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：CE青年 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
篩選可以說是我使用比較頻繁的一種交互形式，比如我點外賣，會選擇滿減優惠力度大，同時我也可以選擇在哪一個價格區間內的產品，這就會用到篩選，而到了B端產品上來，一個CRM系統當中，篩選的邏輯也會比移動端的復雜，伴隨著：且關系、或關系、大于、小于等等這樣復雜的邏輯，也為設計本身增加了很多難度。因此，今天我們就來討論討論篩選控件
篩選存在的對于整個表單來說是非常重要的，它可以幫助用戶，在表單茫茫多的數據當中進行快速的定位；可以對表單進行快速劃分，縮短用戶對于數據的尋找時間；能夠滿足用戶在工作中，實際業務場景的篩選。
對于實際B端場景來說，篩選是日常數據分類的一個重要途徑，我們先來看看實際場景到底有哪些？
比如今天作為一個電話銷售人員，想要聯系最近注冊的用戶時，通常會通過篩選來選出最近幾天注冊過，同時又沒有銷售更進的客戶，進行一個優先級的排布；
再比如說，在銷售周報當中，銷售主管可以通過篩選得到每個人這周完成的狀態，也可以通過篩選得出每個人對于線索的更進情況和對客戶的流失狀態等等，這些都可以通過各種各樣的篩選形式來滿足用戶對于特定情況下的使用
篩選可以通過多個篩選條件進行多維度的尋找，而導航、搜索只能通過單一條件進行指定篩選。
雖然在現在很多搜索都可以支持多維度用空格去進行多字段的關鍵詞搜索，但本質上區別不大
所以在B端項目當中，如果你有表單，那你就需要篩選
我們將篩選分為基礎篩選和高級篩選兩種，兩種篩選會根據業務場景不同，在不同的頁面去使用
基礎篩選一般為系統預設好的篩選字段，具有很強的業務和場景的需求。基礎篩選一般分為四個部分：
篩選條件：是指用戶可以篩選的范圍
篩選項：是指用戶可以選擇的篩選項目
已選項：是指用戶已經選中的篩選項
備選項：是指用戶還沒有選擇的篩選選項
基礎篩選更多作為用戶快捷篩選的一種方式，因為一般使用場景當中用戶幾個篩選邏輯為“且”
同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。
高級篩選一般為篩選中含有運算符，同時篩選當中包含條件關系，比如且關系或者否關系。一般高級篩選包含以下幾類關鍵詞
篩選關系：是指幾個篩選條件之間的關系，一般為 且、或關系，即 且 關系為幾個條件之間的交集；或 關系為幾個條件之間的聯集（并集）
篩選字段：是指在篩選當中，所要的篩選項，一般為表單當中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關系，常見的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數值
高級篩選一般滿足更多的用戶場景，為用戶多條件多字段、多個篩選關系、多個篩選操作 提供有利保障。
當在篩選器條件少于5個的情況下，最常使用的就是上下布局，這樣篩選能與網站保持統一的情況下，上下布局也更方便用戶進行閱讀
當篩選器過多的情況下（一般在5-15個之間），篩選器過多，需要滾屏才能看到篩選結果，用戶使用起來會很別扭。所以在5-15個的情況下，一般會將篩選項進行收折，這樣保證篩選整體面積不會太大，同時將用戶常用的篩選放在前面，可以滿足用戶基本的業務需求和使用場景
左右布局在PC端一般是以字段選擇進行篩選，通俗來講就是將用戶可以篩選的所有字段全部羅列出來，然后通過勾選選，擇出你需要篩選的字段，進行篩選器的使用
左右布局的好處是能夠將篩選的所有條件都直接的展示出來，可以適應很多場景，在篩選器用15個以上時。通過左右布局的方式，能夠讓篩選條件進行滾動，在最大限度保持用戶使用體驗
在日常的B端產品中，篩選的形式有哪些？篩選到底應該怎么設計？接下來為大家總結梳理一些在 B端產品 中的篩選玩法，希望為你開啟新大陸。
平鋪型一般為用戶搜索結果數據量過大，使用戶搜索出來的結果與其預期差距過大，用戶然后可以通過篩選對數據的再一次分類，使用戶能夠精準尋找其想要的結果。
平鋪型一般為篩選條件少于6個，這樣能夠通過1行或者2行去展示篩選項的結果
多用于信息量大的產品，比如電商、視頻網站等等。常見的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來。
平鋪型的好處是將篩選項的結果全部或者部分放出，能夠幫助用戶快速理解篩選項以及快讀找到自己想要的結果。
缺點也是很明顯，平鋪型的控件占比大，需要占據大量面積展示平鋪出的篩選結果。
比如淘寶PC端，搜索一個產品后花去40%的面積去展示所有的篩選條件，其實就是想引導用戶，淘寶搜索過后spu的數量仍然過大，想通過進一步的篩選，讓用戶明確自己對想要東西。同時因為面積占比大，通常平鋪型都是以收折的狀態，只有在搜索觸發后才會完全展開
收折型篩選是一種簡單直接的篩選形式，將用戶常用的篩選形式通過下拉框的形式進行篩選。每一個篩選條件就是一個下拉框，這種形式看上去很簡單，但是在B端場景中，下拉框對于用戶來說認知成本低，操作性也較強，同時在用戶重度使用時，又能給用戶很好的使用體驗的一種方式
用戶可以直接對其常用的字段篩選進行一步操作，并且沒有復雜的篩選關系，全部都是“且”的篩選邏輯，能夠保證用戶進行快速的篩選選擇
將所有信息全部平鋪展開，信息量過于冗雜繁多，同時在做通用性產品時，這種方式很難做到通用性
單側篩選是一種更通用的篩選形式，通過對于你想篩選的字段進行勾選，勾選完成后就會出現篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點擊查詢，篩選操作才算完成。
整個單側篩選，大量的篩選條件可以放置在表單的左側或者右側，通過表單縱向空間，去承載大量篩選條件。
節省空間、通用性強。因為在很多Saas系統、Paas系統當中，無法針對每一個客戶進行設計，就要考慮到系統通用型高，做一些大而全的功能。在每個表單也所需要定制化修改的地方很少，同時能容納的信息量可以很大。
就是在后臺系統當中只有這一種篩選形式會面臨在我常用的幾種篩選的字段中，要通過不斷尋找，來滿足我的篩選需求，操作麻煩。
我們產品在某一次改版就將篩選由收折式修改為單側式，因為我們用戶使用篩選的場景非常的多，用戶每次篩選都要多進行2、3步操作，導致用戶進行了大量的吐槽，后來進行修改，將篩選順序支持手動調整順序，用戶吐槽的次數才慢慢減少。
表頭篩選是一種復雜篩選的形式，其最開始是來源于Excel的篩選形式。點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺產品的發展中，得以借鑒過來。
可以通過表頭的點擊，使用戶更快捷進入到自己的篩選條件，在通常情況下，在表單越左的數據顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。
用戶第一次進入系統很難理解這種交互形式，且在每個表頭都會有一個icon，影響用戶對于表頭的識別。
通過點擊篩選按鈕，展現出篩選彈窗，進行篩選。這種篩選適合在篩選功能在系統中不是很重要的層級。最常見的就是Tapd，在其中篩選不是很強的一個功能，同時也是系統中十分有必要的。
是能夠在節省面積的情況下，可以進行很復雜的篩選，同時可以支持復雜情況下的篩選
彈窗會遮擋一部分表單數據，會影響篩選人的判斷，其次篩選條件的添加也相對更加繁瑣。
在我們一系列篩選的調整過后，我們團隊也總結了對于我們來說更重要的條件和形式，來和大家分享探討一下。
我們認為影響篩選控件最重要的是用戶的使用頻率，因為用戶的使用頻率和使用方式，直接影響到我們篩選是用普通篩選or高級篩選，也會影響到篩選的形式。
篩選功能的做法，取決于我們產品未來是想往哪一個方向發展，如果想把功能做的強大，就得考慮到篩選的后續擴展性。因此滿足實際業務也是十分重要。
在B端系統當中，最可能遇見的就是你給用戶設計的路徑但是其實用戶根本沒有往你想的方向去操作。我們系統最開始給用戶設計好了很多功能點，但是用戶對于這個點的認知成本實在過低，也導致了后面系統功能點很多都被埋沒。因為在你設計好了一個功能點后，要適當引導用戶，解釋這個功能的使用場景才不會讓你設計的功能被淹沒。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：CE青年 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提起用戶激勵體系你會想到什么？積分體系？簽到體系？或者是簡單粗暴的現金優惠？
以上都不是，今天我想和大家分享的是任務成就體系中的勛章設計。
一、什么是勛章
我們先來看看勛章的定義： 勛章，是指授給有功者的榮譽證章或者標志。 古代歐洲為了區別在戰場上的騎士，一個名為勛章的標志制度得以發展。每一個貴族都會設計出一個獨特的標志，制作在他的盾牌、外衣、旗幟和印章上。（摘自百度百科）
上面這段話有三個詞語是重點，有功者、榮譽、獨特標志。有功者反應了勛章不是每個人都能獲得的，而榮譽則反應了勛章是榮譽的象征，能帶給獲得者精神上的滿足。獨特標志則區分了獲得者與其他人。
小到小時候得到的小紅花，大到奧運會國家贏得獎牌，這些都算是勛章（不同產品的叫法可能不同，有勛章、徽章、獎章等）。
二、勛章的作用
上面我們說了勛章能帶給獲得者精神上的滿足，那么延伸到互聯網中，勛章設計的完善則能一定程度上起到滿足用戶的成就感，激勵用戶不斷使用產品的作用，常用在內容類產品中，如視頻類、知識付費類、閱讀類產品中。
但是把勛章設計運用的最好的當屬游戲類產品了，比如王者榮耀的勛章成就體系，借助獲得難易程度不同的勛章，能使用戶自主的不斷使用產品，獲得高等級勛章后還會被膜拜為大神，充分滿足了用戶的虛榮心。
三、勛章頁的構成
勛章頁大致由六部分構成。包括勛章頁入口、勛章墻、勛章詳情說明、進度展示、勛章圖標。
1.勛章頁入口
勛章入口一般有兩個位置，一是放置在個人中心頁中，還有一種則是放置在個人主頁中。個人中心頁只需點擊底部tab切換即可看見入口，而個人主頁還需用戶再點擊一次才可看見。
放置在個人中心
放置在個人中心的勛章入口大致也有兩種樣式，一種是以圖標的形式跟隨在昵稱旁邊，另一種則是放入個人中心列表功能入口中。如下圖：
二者的選擇主要是看個人中心的主要導航方式，一般宮格導航為主的個人中心頁會采用勛章入口跟隨昵稱旁邊，列表導航為主的則會將入口放入列表中。
當然，具體選擇還是看勛章功能的重要程度，比如波洞的個人中心以列表導航為主，但勛章入口卻是放置在頂部宮格中，我的理解是波洞的勛章功能層級較高，因此放在了更顯眼的位置。
放置在個人主頁
勛章入口多以圖標形式跟隨昵稱放置在個人主頁中，此類產品往往擁有較強的社交屬性，用戶擁有自己的動態主頁，因此既能查看自己的，也能查看他人的勛章。
上圖知乎的勛章入口還將用戶擁有的勛章展示了出來，比起單個圖標入口更能吸引用戶點擊進入
2.勛章墻
點擊勛章入口進入的頁面就是勛章墻了，勛章墻主要包括用戶已獲得的勛章信息以及產品包含的所有類別的勛章展示。
勛章墻展示幾乎都是采用的宮格式布局，一般一行分布2~5個勛章，多以3個為主。
勛章墻中的已獲得勛章信息包括用戶總獲得的以及不同類別勛章的單類獲得數，顯示總獲得數的勛章墻會在頂部加入用戶的獲得信息，幫助用戶一眼識別。
在勛章墻的設計中，注意要做好獲取與未獲取勛章的區別樣式，重點是保證用戶能一眼識別出獲得與未獲得的勛章，多是將未獲得的勛章置灰處理。反面例子如下：
上圖KEPP中，已獲得勛章是將其正常顏色展示，而未獲得勛章采用的淺紫灰色，我一眼看過去時真的沒有反應過來哪些是未獲得的。
3.勛章詳情說明
勛章詳情說明是在勛章墻展示中，點擊勛章后以彈窗的形式展示出來的，包括全屏彈窗與非全屏彈窗兩種展現形式。
全屏彈窗詳情說明
勛章詳情說明采用全屏彈窗能承載更多的信息，除了可以包括獲取說明外，還可以承載獎勵說明、獲取進度以及獲得后的分享炫耀按鈕等。
上圖中得到與咕咚的該勛章都屬于升級類勛章，勛章本身有級別的劃分，左右切換可查看不同級別的勛章，像這樣有等級劃分的勛章采用全屏彈窗會更加直觀
非全屏彈窗詳情說明
承載的信息較少，一般只包括簡短的說明信息，更加簡潔輕量。如下圖：
知乎與開眼都采用的非全屏圖片彈窗，視覺效果更加輕量。知乎雖然也有等級劃分類的勛章，但由于采用的非全屏彈窗，等級切換采用的是點擊切換，說明文字也更加簡潔。而開眼則直接在文字中說明下一等級勛章，并不能直接切換查看。
4.進度展示
需要累積獲得的以及等級劃分的勛章還需要加入獲取進度。我匯總了3種勛章進度展示的樣式，包括進度條、數字進度、文字說明。
進度條
以一個橫向進度條展示在勛章詳情說明中，能夠直觀看出當前進度占比，對升級進度有一個大致的判斷，占屏比較大，適合放入全屏彈窗詳情說明中。
上圖中咕咚進度條只展示了進度百分比，而波洞的進度條同時配上文字說明，升級進度更加精確。
數字進度
左邊為當前達到數字，中間斜杠隔開，右邊為該勛章獲取總達到數字。升級進度精確，占屏比小，即可放入全屏彈窗詳情說明也可放入非全屏彈窗詳情說明。
文字說明
文字說明進度直接告訴用戶還差多少具體的進度，沒有總進度展示，進度也很精確，占比小，注意需要對文字進行字數限制。
5.勛章圖標
勛章圖標作為勛章設計中最重要的一環，需要UI設計師花費很多的心思。勛章圖標目前多為圖形圖標，我只看到開眼是采用的圖片類勛章。
在設計圖形勛章時以現實生活中的勛章為靈感，多采用統一的勛章背景模板，保證整體勛章墻的視覺統一，便于多次復用。常用的形狀有六邊形、圓形、盾牌形狀等。
切忌在設計圖形勛章時采用復雜的背景模板，以免降低了勛章內部主體的層級。
四、劃重點
本文主要為大家淺析了勛章設計的定義、作用以及勛章頁的構成。
勛章的定義：勛章是指授給有功者的榮譽證章或者標志；
勛章的作用：勛章能帶給獲得者精神上的滿足，一定程度上激勵用戶不斷使用產品；
勛章頁的構成：包括勛章頁入口、勛章墻、勛章詳情說明、進度展示以及勛章圖標。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：人類君 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn