在今天的 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端項目當中，如果你有表單，那你就需要篩選
我們將篩選分為基礎篩選和高級篩選兩種，兩種篩選會根據業務場景不同，在不同的頁面去使用
基礎篩選一般為系統預設好的篩選字段，具有很強的業務和場景的需求?；A篩選一般分為四個部分：
篩選條件：是指用戶可以篩選的范圍
篩選項：是指用戶可以選擇的篩選項目
已選項：是指用戶已經選中的篩選項
備選項：是指用戶還沒有選擇的篩選選項
基礎篩選更多作為用戶快捷篩選的一種方式，因為一般使用場景當中用戶幾個篩選邏輯為“且”
同時篩選的邏輯也為簡單篩選，所以在使用場景上只適合在對篩選要求不高的場景下使用。
高級篩選一般為篩選中含有運算符，同時篩選當中包含條件關系，比如且關系或者否關系。一般高級篩選包含以下幾類關鍵詞
篩選關系：是指幾個篩選條件之間的關系，一般為 且、或關系，即 且 關系為幾個條件之間的交集；或 關系為幾個條件之間的聯集（并集）
篩選字段：是指在篩選當中，所要的篩選項，一般為表單當中的所有可篩選的字段
篩選操作：是指篩選字段和篩選值之間的關系，常見的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。
篩選值：你所需要篩選的數值
高級篩選一般滿足更多的用戶場景，為用戶多條件多字段、多個篩選關系、多個篩選操作 提供有利保障。
當在篩選器條件少于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咨詢、用戶體驗公司、軟件界面設計公司
隨著跨設備跨平臺的趨勢不斷顯現，比如最近很火的鴻蒙，一部手機就可以完成辦公場景到生活娛樂場景的轉化，未來B端的管理系統不在局限于pc端，體驗將不斷向移動化對齊，使B端用戶不再受時間和地點限制。
B端各個端口的特性：
在保證使用體驗下。pc端、pad端、pc端的功能會是一個下放的過程，屏幕越小功能越簡化。
比如有贊的美業工作臺，手機端只有宮格功能入口，PAD端除了功能入口外，把工作內容也做了露出，PC端則展示了數據圖表、快捷功能，以及其他提升效率的入口，內容交互更加的復雜。三端里，不僅屏幕尺寸不一樣，使用場景和角色也完全不同，比如PC端店長使用頻次更高，用于管理店鋪查看經營狀況。PAD端則普通員工頻次更高，用于查看具體工作內容，需要接待的客人。手機端更通用，所有角色所有場景都會使用，有可能是在店里、家里、路上所以在設計移動端時要考慮如何在提升操作效率的同時兼容可用性。
B端的典型表單，由數據錄入和操作按鈕構成，往細拆解的話包含1.標題、2.標簽、3.提示信息、4.輸入區、5操作按鈕。
標題：表單的主題，起到說明表單模塊的作用，尤其是在分組的表單中格外重要。
必填提示：用于區分多個表單內容項的必填和非填項，一般使用紅色的“*”表示。
標簽標簽：表單內容項的名稱，說明對應表單含義以及向用戶說明應該錄入信息的類型。
提示：幫助用理解表單，最多見的是引導說明信息和反饋信息。
輸入區：表單的核心區域，承載用戶主要的交互。
操作按鈕：完結表單操作的觸發器，用于確認數據或者取消數據，表單越復雜按鈕也會越多樣。
大部分場景我們希望用戶能盡快完成表格。但在有些場景呢又希望用戶能放慢速度，使他們能夠深思熟慮，比如下面的三個場景：
1.在一些資質審核的頁面，希望用戶能仔細填寫。
2.小屏幕的場景，要求表單縱向或者橫向最小化。
3.國際本地化的需求，表單需要適應不同的長度和多種語言。
這張圖是醫生端注冊流程的競品對比。他們哪種方案能更好的為用戶和產品服務呢？接下來我們來看下三種典型的表單，能幫助你更好的理解。
1.左對齊標簽
優點：如果用戶不熟悉表單要錄入的數據，或者是復雜內容，左對齊會更容易些。視覺動線會更符合人們閱讀習慣，并能節省縱向的空間。
缺點：長標簽會增加標簽和輸入框的距離，導致延長完成時間。
從馬泰奧-彭佐在2006年進行的眼動研究里發現，左對齊標簽速度是最慢的，用戶眼動定位的次數最多的。如果希望用戶能放慢速度，并仔細閱讀表單中的每個輸入框，左對齊會是一個很好的辦法。特別是含有大量的可選輸入框，或者陌生數據，比如像資質認證頁、金融申請頁等。
在左對齊標簽里，內容也有右對齊的方案，如下圖。這解決了長標簽帶來的適配問題，使空間能更好地利用。但關聯度會降低，增加理解成本。并會導致眼動距離拉長，適合選擇類的錄入方式，緩解此缺點。
2.頂對齊標簽
優點：有較多的橫向空間，并且閱讀效率快，對于國際化的設計或長標簽特別有用。
缺點：會占用較多的縱向空間。
在同一個實驗中，標簽到輸入框只花了50毫秒，比左對齊快了10倍。
以下是B端的典型列表，主要是信息的查看和操作?；臼怯?.卡片、2.切換篩選、3.搜索、構成。
卡片：在移動端列表中更多的是以卡片式的形式呈現，卡片利于展示信息的深度和承載更好的交互。在移動app中我們可以大膽的嘗試使用卡片式設計，不僅信息能夠很好的突出，也能適應多端設備的展示。
篩選：篩選對于整個表單來說是非常重要的，它可以幫助用戶在表單茫茫數據中進行快速的數據定位以及劃分，縮短用戶對于數據的尋找時間；
搜索：將想要查詢的信息輸入到相應的搜索器中，用戶可直達任務目標。
貼近場景的設計可以舒緩數據頁面帶來的心理壓力，擬物元素與表單的結合的呈現形式能夠給用戶帶來愉悅感。
如下圖的例子，途牛商旅用了差旅審批單粗細線條元素，醫鹿用了病歷本上面的釘扣，餓了么商家版模擬小票的設計。
B端典型數據頁，他們基本是由1.數據統計、2.可視化卡片、3.篩選、4.數據明細構成。
數據統計：將用戶所需關注的重點摘出來，并展示和業務相關的其他數據。通常是主數據+副數據的結構。
可視化卡片：數據分析里有一句話叫“一圖勝千言”，當面對海量數據時（右圖），利用圖表可以幫助用戶快速理解數據含義。
而圖表是數據頁面里的重要組件，經過圖形化、通俗化、形象化后的數據可以幫助我們直觀的理解數據。
激勵性數據設計
2008 年，為了減少電力消耗，有一家電力公司向 35,000 名客戶發送了一封帶有簡單圖表的信，向客戶展示了他們和鄰居的電力消耗情況。
在圖表中，可以看到一個條形圖，代表 3 個不同組的功耗：節能的鄰居、所有鄰居和收信人的家庭。這向客戶顯示他們是否比鄰居消耗更多或更少的電力。
最后這些收到信件的客戶平均降低了 2% 的功耗 ，雖然就個人電費而言，這似乎很小，但對所有客戶而言，這相當于節省了大量電力和百萬美元。從那時起，全國其他電力公司都采用了這種方法。而這種方法也叫做激勵性的數據設計。
移動端圖表
實際執行中，要針對具體場景，選擇合適的方案。比如在一個多折圖表要選曲線的還是直角的，直角能精準的體現數據而曲線降低認知負擔使視覺愉悅。
下圖淘特首頁設計中，需要在較少的縱向空間里設計可視化圖表，可以看出這里簡化了y軸的標簽以及取值范圍，最后反應到圖表上會是一個較平滑的曲線。而這種設計方案上更多的是感知價值而不是精準的數據，這跟激勵性的數據設計有相同的作用。
工作臺是一個幫助用戶快速掌握工作進度及進入工作狀態的導航頁面。也是用戶感知產品價值的重要門面；所以首頁工作臺是體驗規范和視覺風格的核心場景。
我們來觀察下醫蝶谷為什么這樣改版。從原型的變化可以發現，這次改版更多的是去滿足業務上的變化，我認為有以下幾點
業務優化：
1.這樣的改版體現了醫蝶谷在業務策略上的變化。觀察老版本我們發現，極速問診占了首頁的4/10。這個階段更多是考慮患者訂單響應時間，所以接單較慢的新手醫生體驗較差。
2.將極速問診的內容進行收起，醫生搶單的成本更高，并且將原本tab的問診整合進了首頁。使醫生在首屏就可以快速掌握工作進度及進入工作狀態。
視覺優化：
1.老版本的快捷工具圖標顏色更豐富容易被用戶發現，但是在醫生常用的工作臺里，又顯得有些用力過猛，新版本弱化常用功能圖標的視覺，讓醫生關注到更有價值的信息上。
2.在新版的首頁里，因為極速問診改變了位置，我們可以在設計上做一些差異化的改變，去適應新功能的承載。
前面提到了B端的表單、列表、數據頁面、工作臺的案例。為了表達透徹下面我跟大家分享下我在工作中碰到的案例。
醫生這個職業對我們來說熟悉又陌生，在我們生活里每過一段時間幾乎都會去和醫生打交道。醫生一上午可能就有多達幾十位患者就診，平均到每位患者僅有3～4分鐘的診斷時長。在這短暫的時間內，要完成病癥的診斷處置、病歷填寫，還要面對來自病患各種問題，難度可想而知。而這種場景映射到互聯網上也是同樣的，何況大部分還是兼職醫生。所以我們要做的是讓產品更易用，降低流程的復雜度。
通過醫生調研發現，醫院排班并不按照周循環，平常臨時突發事情多。所以一日的排班里，時間會有一定的跨度。
舉個例子，大家去看病時候時候一定遇到一個場景，是醫生讓你去拿報告，在回來的時候你不是重新排隊的狀態，醫生需要在這時候對你進行干預。
設計應當順應醫生的工作特點，考慮在特殊場景上的使用，我們提出的以下策略。
精簡布局，提升屏效
1.在前文B端列表有提到，列表頂對齊的方式用戶閱讀起來效率是最高的。所以這里將時間標簽調整到內容上方，同時調整卡片里任務名稱和時間的權重。
2.優化前任務排序結構是按時間規律往下排布，一小時占用一行。因為醫生平日事情多突發，排期上無法按照一定的規律。如果需要查看下午、晚上的排期交互步驟則會被增長。所以在設計上將無任務的時間標簽進行收縮，這樣在首屏也能看到在晚上的排期狀況。
利用色彩，少即是多
色彩是最具本質影響力的表現因素，在設計即簡單又重要。研究表明，人們只需 90 秒就能對一種產品做出下意識的判斷，而其中高達 60%以上的判斷僅基于顏色。
排期表借助色彩關系，提高用戶查找效率和傳遞更多的信息。如下圖一開始的想法是按照患者端的邏輯，依據業務圖標進行區分，但兩端統一要考慮的因數比較多，不適合復用。最后考慮采用顏色標簽的形式進行區分
優化路徑，去繁化簡
從前期的調研的結果來看，醫生的排班是無規律多突發的，會出現在一天里添加多個不連續時段的場景。所以我們針對醫生的排班的設置做了以下優化
優化前添加一個時段需要4步，添加一天不連續的3個時段需要3x4=12步，需要用戶判斷復雜的邏輯，而優化后添加一個時段需要3步，添加一天不連續3個時段需要4x1=4步，邏輯簡單明了
這是醫生端其中一個案例，可以看到一個視覺、交互上的優化都是針對醫生實際的工作場景去設計的，在醫生這個行業，有著很大的行業壁壘，需要我們逐一去調研給出設計方案。這也是B端設計中需要重點關注的地方。
代碼框架
B端設計師最常接觸的設備就是PC，而要做移動B端基本上也是會通過H5、RN等技術實現。這樣方便多平臺復用，下面我以web為例子，講述我們該如何理解前端的頁面結構
提升開發效率
設計的過程中，好的工作流程可以幫助開發節約工時。如果公司有交互的基本是能做到提前開發的。沒有的話，我們最好有框架思維，先搭好框架，截圖給開發參考，開發會根據你提供截圖，進行基礎模塊搭建，最后在根據標注文檔進行css上面的調整。
降低服務器成本
我們將切圖給予到開發以后，開發會將其傳到服務器上面。
用戶在訪問我們的頁面時其實是相當于發送一次請求，將服務器里面的圖片下載下來，如果圖片的數量太多或者文件太大，會占用大量用戶的帶寬帶來極差的體驗。
而服務器的空間也是需要公司付費購買的，所以盡量一張圖在多處使用。如果是非常高清的圖片，可以將圖片里的人物切出來，在不同的場景去復用。實測一張4k的官網banner，人物單獨切出進行復用可以減少banner50%的大小。
占位符
在一些需要實現文本換行的效果里，開發很難去通過去寫間距，因為會有換行的關系。一般會通過占位符的方式去實現，而在占位符里有分為好幾種，下圖我列舉了最常用的三種占位，分別能實現三種不同的間距。
字重
字重的功能是為了在文本種突出重點強調內容，在文本中常采用3種規格的字重（regular，Medium，Smlbold）。但在h5的環境里，只有字體標準和粗的還原效果。在標注文件里也能發現標準體和粗體在標注文件里都會顯示字重為500，而500在前端里的顯示和標準體是是沒有區別的，我們需要寫好規則，和開發約定，以后只要看到medium就寫成600字重。
如何推動規范
通常在一個版本我們就算把開發大佬的頭搞禿了，都很難吧所有規范改完，因此我們需要將自己作為PM的角色，針對現有的需求進行拆分，并排出優先級、分版本迭代進產品，并同步需求。
另外在推動規范的過程中，有可能會出現上圖的情況。這里可以使用表格的方式進行推動上線，可以好的避免以下情況。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：丸子說設計 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
其實說到設計的價值，它是非常大的，可以從很多不同的維度去出發，每一個小點都可以作為閃亮的發光點去助力產品獲得價值，并且現在互聯網時代，多元化思維越發重要，我們不僅需要在本職范圍內去發光，還需要拓展更多的能力。
但是我也發現目前普遍存在一個很嚴重的問題，有很多小伙伴設計一個紅包也能扯出一堆增長模型，這也是因為隨著全鏈路、全棧設計的噱頭出現，以及一系列的模板化思維體系所影響。
設計思維本沒有對錯，但是需要合理的運用，并且將設計點需要落在實際的內容上，像我們常見的用戶畫像、體驗地圖、情緒版等等，那么我們應該如何有效的將設計點落實在內容上呢？
眾所周知，在整個產品設計中，視覺感受是最直觀的，也是我們作為一名UI設計師能直接去影響的，而視覺層面的內容基本可以劃分為六個點，也就是我們常常所說的 - 形色字構質動
在很多的設計運用場景中，這六點都是作為比較基礎的內容，像一些視覺語言制定上，而產品設計的過程中，縱使有再多的方法論和思維體現，最終都需要通過視覺的表現，所以我打算利用這幾點去深入挖掘，也許可以找到更多的設計發力點。
形也就是設計中最基礎的圖形元素，在平面和品牌設計中經?？梢砸姷剑褚恍c線面、圖形構成等等，而回到產品設計中呢，最典型的形就是我們經常見到的圖標，那除此之外，形還有哪些體現方式呢？
圖形的設計表現中，我第一個聯想到的就是插畫，但是插畫的類型和使用方式也分為很多種。
首先我們先設想一個場景，當我們接觸到一個新鮮的事物時，我們首先需要快速的了解他，我們可以通過產品說明書、產品結構圖，場景使用模擬等不同的方式來表現。
因此在一些服務頁面或新功能介紹中，都會適當的融入功能插畫，而這種表現形式可以使得界面展示更直觀，快速的讓用戶理解所描繪的功能含義，減少用戶學習成本。
像一些頁面中還可以利用場景插畫去表現，不僅可以打造內容的差異性，還可以快速讓用戶融入到場景中，進一步提升用戶的情感體驗。
品牌設計的目的就是為了利用圖形化的元素，去加強用戶的記憶，而隨著產品發展成熟，為了可以非常有效的去強化品牌，形成產品間的差異性，設計在表現層可以利用不同的形式去強化品牌。
設計表現上可以賦予產品非常明確的設計風格，例如抖音的故障風格，在圖標、插畫、活動頁面都有很好的延展，這也賦予了很深的產品印象，甚至有很大一部分用戶看到故障風格就會聯想到抖音。
除此之外也可以利用品牌元素進行一定的延展設計，像Logo圖形可以用到很多的圖標和默認圖上，或者也可以使用品牌形象，在一些界面的提示信息、內容引導、以及一些插畫繪制上，都可以進行有效的融入，進一步達到品牌延展的功能。
那么說到延展，其實我們也可以針對一種元素進行適當的延展，將所需要體現的內容進行強滲透，從而進一步打造內容的專屬調性，以及強化用戶的心智。
下面的案例來自攜程精選榜單，而在整個入口、詳情頁，均采用鉆石元素貫穿到整個頁面當中，不僅可以使得畫面更加具有視覺沖擊力，也可以使得鉆石品質的氛圍在頁面中多次露出，進而加深頁面品質感。
圖形的表現還有一個非常重要的內容體現，那就是數據圖表。在一些工具型或B端產品中，都會有著大量數據，而為了讓產品使用更高效，我們可以利用這種形式來展示。
但每一個結構不同的圖表，所側重的功能都是不一樣的，有的偏向于于數據對比，有的偏向于連續變化數據，有的偏向于占比情況等等，因此在使用的過程中需要區分內容的側重以及用戶對數據使用的傾向。
在現實中，顏色賦予了這個世界繽紛多彩，它是我們肉眼最直觀的感受。在設計中，顏色是尤為關鍵的一部分，它賦予了內容不同的表現形式。
顏色的學問也比較廣泛，除了我們常說的色彩關系、顏色搭配等等一系列之外，色彩上到心理學、下到用戶體驗，涉及的范圍十分全面，那接下來我們就來感受一下色彩的美妙吧～
生活中有著不同的顏色，例如黃昏與清晨、深夜與極光，都有著不同的色彩傾向。除此之外，色彩心理學中介紹，不同的顏色給予用戶不同的心理感受。
例如我們常常所說的金色表示尊貴，這就好比現實生活中的金銀銅牌，他們利用不同的顏色去體現內容的品質，我們恰好可以利用這種顏色運用到會員、勛章等內容中，去凸顯會員的尊享感、情感化，進一步強化用戶的身份感知。
顏色的感受也可以利用到全局的設計配色上，我相信大家肯定都非常熟悉前段時間非常火爆的暗黑模式，這就是利用不同的顏色來打造特殊的模式，而暗黑模式可以使得用戶在黑夜也能舒適的使用產品，并且一定程度上節約手機的電耗。
但不是所有的深色系產品都是暗黑模式，我們也可以利用這種顏色搭配打造不同的產品氛圍與特色。例如抖音、MOO音樂等等。
并且隨著互聯網的發展，用戶群體逐漸龐大，其中也有部分身體有局限的用戶，對于他們來說更加迫切通過互聯網獲取信息，因此越來越多大公司注重到這一方向，而這也是我們作為一名設計師，更應該去優化的方向。
可以采用無障礙色系，以及顏色的色差處理，針對性的服務于色盲和色弱群體，使得他們可以在信息閱讀上更符合他們的習慣，從而進一步打造更人性化的產品體驗。
色彩搭配講究顏色統一、協調，在一些界面中，我們可以利用這種色彩技巧去營造氛圍，可以有效的提高界面沉浸感，但是產品中由于內容的差異無法固定顏色，而這也會導致顏色統一性較難處理，因此可以利用代碼的能力判斷封面色彩傾向，從而進行填色，例如豆瓣app。
不僅如此，我們也會市場看到頭部背景圖和banner圖的色彩也會統一處理，這是單獨配置了一張背景圖，從而達到頁面頭部的協調性。
字體在設計中占有很重要的一部分，在UI設計中也是最為關鍵的信息傳遞載體之一，而關于字體的內容也是十分廣泛的，下面我將從字體排版、字體設計和字體內容三個方向來分享我的心得。
字體排版中的字體行高、間距、段落等等，這些都是一名設計師必須去掌握的基礎，但是有一些看似簡單的規則，卻常常會被忽略。
例如下面案例中的結尾標點符號在首，這個是避首位法則中最關鍵的內容，那為了解決這種方式，我們可以利用「推出式避頭尾」，這也是目前主流的方式之一，利用這種換行的形式避免問題，但是往往會形成句尾參差不齊。
因此我們可以利用「優先推入式」標點擠壓的方式，將標點符號進行空間擠壓，這樣可以在很大程度上確保文字在合適的版心內整齊一致。
空格是我們平時接觸最多的一種字符了，常使用與內容分割中，但是在排版中有很多場景也會用到空格。
例如英文排版中的點號后面需要加空格，不然會導致語句之間過于擁擠，而中英文結合的時候，之間也是需要空格進行分割處理，除此之外中文和數字之間也是如此。
字體的類型分為很多種，而常規的界面信息展示中，一般都采用無襯線字體，但個別產品利用特殊字體去傳遞產品的氣質，例如閱讀產品中采用襯線字體。
除此之外， 大廠也紛紛設計屬于自己的專屬字體，通過這樣的方式去強化自身的品牌感。
一年前的MIUI11版本更新，最重磅的內容即是推出動態字體，用戶可以自由選擇字體粗細，同時為了讓界面的美觀度及文本識別性不會被破壞掉。
既然聊到字體，那我們順便再來談談近期比較火的微文案，雖說內容聽起來側重于文案策劃，但是其目的是為了優化用戶體驗，甚至提高轉化率等等，那么作為一名設計師，我們更應該去關注這樣的內容。
而微文案的體現也分為兩個部分，例如下圖中所展示的情感文案，百度網盤的會員到期提示，擬用“藏頭詩”的形式，渴望留住用戶。
除了上面所描述情感文案外，我們還可以利用文案內容來影響用戶行為，往往是這種越細節的地方越是存在著成就或破壞用戶體驗和轉化率的因素，而這些文案一般出現于，提示文案，引導文案，彈窗文案等等，不僅可以解決用戶的疑惑，還能進一步引導操作。
說到結構，我們一般都會聯想到用戶體驗五要素中的結構層，他在產品設計中更多體現于信息布局和內容結構布局，而對于我們設計師來說，更多的感覺就好像畫面中的布局與排版。
結構的內容相對來說還是比較廣泛的，我主要是圍繞界面布局來進行分析，講一些我覺得還不錯的優秀案例，希望從這幾個角度出發，可以帶給大家一些啟發。
場景化設計是體驗設計中較好的發力點，也是我最近一直在研究的方向，后續有空我會單獨寫一篇文章再進行深入分析?？偟膩碚f呢，場景化設計分為多個側重點，今天分享的內容主要圍繞著用戶分層，為不同的用戶設計。
像我們常見的一些首頁布局中，其實有也簡單的分層，我們可以根據用戶不同的目的來進行布局拆分。
下面的案例從上到下依次為，目的明確的搜索用戶、分類明確的用戶以及只想隨便看看的用戶，這樣的話，可以有效的服務與不同用戶的目的，也可以快速實現流量分發的作用。
而這兩個界面都屬于功能服務類界面，用戶去完成某件事的行為也可能會存在差異，所以我們也可以對于功能進行合適的分層布局。
下面的案例從上倒下依次為，想快速申請貸款或者快速完成任務獲取現金的用戶，我們提供了直接操作區域，并且置于頭部進行業務屬性強化，中間融入了更多的分類與內容引導，進一步激發用戶的興趣，最后可以再通過不同的形式適當的減少用戶顧慮，例如優惠券的福利（強化申請貸款），為新用戶提供發帖示例（確保社區的內容品質）
雖然兩個界面的內容差異較大，但是結構拆分的方式以及目的都是大同小異的，主要還是為了滿足不同行為的用戶，進一步輔助他們完成功能服務。
而關于用戶分層的場景設計中，我們還可以區分用戶不同的狀態/身份來對界面進行差異化布局，下面的案例來自于百度網盤會員界面。
我們都了解會員他分為很多不同的階段，而不同階段的用戶，對于內容的關注上也存在很大的差異的，我們可以從這個角度出發，區分用戶的會員狀態，進一步來進行差異化設計。從而有效的提高不同階段用戶的行為決策。
論最出色的界面布局結構，那滴滴的 xpanel 必定讓人印象深刻，它是一個將卡片附著于第一信息架構層級上，內容上分為“消息卡片”“主體卡片”“拓展卡片”三個維度，通過這種方式將一屏內搶占的空間通過簡易的交互模式補償回來了，這樣既不打破用戶的核心體驗，同時又增強了運營、功能的玩法與拓展。
所以我們會發現在大部分的打車、導航產品中，均會采用這樣的結構布局，這也是對特定場景垂直領域的深耕和挖掘，尋找“接觸點”，幫助獲取更多的功能、內容、服務，實現業務的“有效增長”。
而對于一個設計點，在歷經了一段時間的發展后，也演變出了一系列的其他內容，我從這個點深入出發，圍繞著內容和布局進行延展。
眾所周知，產品和運營都希望我們能在有限的空間中去展示更多的信息，并且有效的給其他功能進行導流，因此我們可以根據長尾效應，在無限長的信息流當中，利用不同的卡片布局，給予不同的活動、功能進行導流。
上面所說到的xpanel，是將卡片附著與信息之上，跟著這個思路發展，我們便產生了下圖所示中的半模態卡片布局，雖然追波之前出現一大批疊上疊上疊中疊的布局，但通過線上的實際使用最終發現，疊一層才是比較合理的方式，而這種布局有著良好的空間收納能力與信息拓展能力。
質感是設計師在表現的時候最直觀的體現，也可以稱為設計風格，但風格近幾年間也發生了很大的變化，從起初的擬物到扁平，而最近也有很多不同“流派”的質感表現，下面我將舉例給大家欣賞一番。
前段時間流行了一段時間的新擬態，一度被扣上有望成為未來趨勢主流的設計風格，但由于質感表現上細節過多，影響信息內容，并且局限性太大，因此并沒有被廣泛流傳，但是在視覺設計上，是一個不錯的設計表現。
磨砂玻璃的質感表現其實很早很早在iOS的界面設計中就已經存在，但當時并沒有廣泛普及，而最近這種風格又以一種全新的姿態回到我們的視線中，他給我們最直觀的感受就是虛虛實實。
在用戶界面中，這種虛實的變化可以有效的創建視覺層次結構，增加自然精心的細節，并且在多復雜內容中能讓用戶全面感知與處理信息，有效傳達信息，讓信息可閱讀、易閱讀。
隨著大屏手機的興起，單屏顯示高度也明顯增高，而大部分頁面內容并不能占據一屏空間，因此利用設計手法去強化頁面頭部，除了元素裝飾外，就是這種淡淡的色彩漸變效果，起初只運用于少部分頁面中，但慢慢的這種效果開始流行起來，越發廣泛。
動效設計，顧名思義就是動起來的效果，這種表現形式使得靜態的頁面可以更加靈活的動起來，不僅可以使得操作體驗更加順暢，也可以在某種程度上吸引、引導用戶。
在動效的編排中，轉場是非常關鍵的一部分，我之前也專門寫過一篇《交互動效-轉場的那些事兒》，感興趣的朋友可以再碰個場，支持下。
用戶操作進入新頁面后，通常會比較關注入場元素，像一些金融產品、數據圖表，都會采用短暫的動態效果，強化元素的展示效果，進一步吸引用戶關注數據與內容。
在很多優秀的設計網站上，我們可以發現大多數交互動效都是對持續元素進行特殊處理，他們不僅可以讓動效更加特別，還可以提高產品的流暢度。
例如下面的案例，前后頁面的內容關系比較大，因此操作后可以采用持續效果，進一步引導用戶的視線，提高視覺體驗，強化交互流暢感。
在整個動效編排中，除了關注入場和持續元素之外，停留元素也是非常值得關注且可以深入打磨的內容。
例如下面的案例，在整個搜索體驗的鏈路中，我們可以發現搜索框提示文字、輸入的單詞等等均在進行了停留處理，確保在頁面切換時，減少用戶的視覺跳轉，可以有效提供用戶的專注度，打造更加輕松的體驗。
產品設計中都希望在足夠的空間內可以展示更多的信息，但這樣往往會帶來信息過載的問題，因此我們需要在設計的過程中對信息展示進行區分，利用行動觸發結合動效的形式，輔助信息布局更合理。
下圖的案例來自vivo全新的原子隨身聽，利用現實生活中音樂播放器的樣式，將同類app進行收納，完美的體現了，在較小的空間布局下如何展示更多的內容。
與此同時也會發現很多產品中利用容器來承載信息，典型的案例就是FAB按鈕，用戶操作后再利用動效的形式進行反饋，其實和上面的相差不大，只不過他屬于不同信息共用同一區域。
網頁端有一個不同于移動端的交互，那就是hover，因此我們可以利用這種交互方式，去處理信息的重要層級，然后根據用戶的操作再進行詳細露出，很大程度上優化了信息空間展示。
隨著產品體量越來越大，功能繁多的同時，頁面結構也變得十分復雜，為了確保用戶體驗過程中，更清楚頁面層級，以及操作后的流程，所以我們可以通過動效合理安排交互流程，助力用戶的舒適體驗。
我之前也專門寫過一篇《交互流程中的三大重點》，感興趣的朋友可以再碰個場，支持下。
利用動效的形式，提升用戶在交互流程中的操作預知，例如下圖的分類圖表，充分的體現內容的含義，進一步強化用戶操作前的預知性。
在一些結構復雜的頁面中，我們可以通過合理安排交互動效，轉場方式、狀態反饋等等一系列的設計，有效的對界面層級路徑梳理。
其實設計師的發力點不單單只是我們平時看到的產品分析、用戶畫像、體驗地圖，其實從設計的角度出發，也有很多價值點，我們作為一名設計師，更應該根據產品現狀去制定明確的設計目標，深入挖掘，利用有效的設計價值觀，正確的驅動設計前行，最終通過設計去提高產品體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：三石設計 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家有沒有遇到這樣的問題，當你面對非常復雜的信息時，在進行信息整理設計時，往往會陷入比較糾結的場面，不知道怎么把這一堆信息進行比較好的排列。如果你剛好也有這部分疑問，這篇文章適合你繼續閱讀。
本篇文章會提供一種解決排列問題的簡單底層邏輯，我們可以圍繞這個邏輯去排布我們的頁面，從而讓整體排版變得更加清晰合理。
信息層級存在于我們目前看到的每一個畫面。它本質上是信息組織的一種方式，通過信息的放大縮小和對應的位置，能夠將復雜的信息分為不同的模塊呈現在我們的視野中。
大家先簡單看一下圖中兩個畫面，你就能夠直觀感受到信息層級對于用戶認知的作用。
不好的信息層級就像左圖一樣會讓畫面比較雜亂，難以進行視覺上的識別。而優秀的信息層級就像右圖一樣能夠讓我們快速且準確的識別出畫面想要傳遞的信息。
因此信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰傳遞業務價值，合理的信息層級劃分也是提高產品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
既然信息層級對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級則顯得尤為重要。而目前網上的資料也是參差不齊，我也曾為此類問題查閱了大量資料，想要找到一個簡單高效的答案。
但目前查閱到的資料幾乎都在講排列的四個基本原則：對比、對齊、親密、重復。不可否認的是這四個方法對于我們排布信息層級確實起到了很大的作用。但也闡述得太過寬泛，讓人很難在實際中更有效地利用。
即使我對排版四個原則非常熟悉，在面對復雜層級排版時仍會面對困惑。因此我對目前頁面上比較好的頁面排版進行了進一步的探索：
經過線上頁面與概念的整體研究發現，他們在遵循排版原則的基礎上，本質上都存在一個簡單的邏輯：那些優秀的頁面設計都把主內容的層級控制在了三層左右，如下圖所示。
因為三層左右的層級是最容易被用戶感知，且視覺上不易混亂。超過三層后隨著層級越多復雜性會相對增加。
比如我們看下面這兩個例子，左邊層級因為特別復雜，造成用戶獲取信息效率變低，而通過層級的轉換，我們可以將其變得更簡單且易讀。
再舉一個例子，我們在大部分場景見到的純文字排版基本都離不開以下幾種形式：
因此，我們需要在排版時需要首先思考一個邏輯：那就是盡量將我們的內容層級控制在三層左右。且這三層內有比較明顯的對比關系。
有同學看到這肯定要問了，這個道理我也懂啊，可是在實際業務中大部分時間拿到的信息太多，根本做不到保持在三層以內。別急，這篇文章的重點當然不是告訴你這么簡單的道理，而是在面對復雜層級的時候，我們應該怎樣去控制它的層級表現，從而讓它在最終呈現上保持在三層左右，讓用戶獲取信息的效率更高。
其實我們在實際中的大部分優秀頁面，在本身的信息層級上可能都非常復雜，但我們可以通過一系列的方法，去減輕這種多層級的影響，從而讓我們的頁面即使承載了很多復雜的信息，也能變得更加簡單清晰。那我們接下來就闡述一下對復雜層級的處理方案。
這可能是被很多人忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，但卻忽略了這些信息是否真實地被需要。這就需要我們從源頭上進行第一層的判斷。
源頭降低的本質就是判斷我們當前所要呈現的信息是不是必要的。其實這也是在目前工作中遇到的場景，比如某些時候產品給到了我們很多信息，但我們并不一定會全盤接受，而是通過當前頁面的業務場景去進行判斷。確定每個信息的合理性，從而可以決定有些元素是否可以刪減，提高整體信息設計的一致性。
1. 當前的所有信息真的需要存在于頁面中嗎，如果去掉某些信息有無影響。
比如當你在進行打車的時候，當你輸入目的地之前，一切其他的信息都無需呈現。當你輸入目的地后，車輛的相關信息和價格才會進行呈現，當你打車后，司機的相關信息才會進行呈現。這些都是按照用戶的使用場景來進行對應的呈現。
2.當前信息的重要程度是怎樣的，對于某些不重要的信息是否可以通過隱藏的方式展現。
當你拿到一堆信息，信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。比如當你瀏覽新聞的時候，標題永遠是最關注的，而評論，作者，簡介等都是可以忽略的信息。
上述兩個問題的確認，會影響我們對后面的信息排布。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
信息排布的本質是通過我們對信息進行排列上的調整，來將多余的層級融入到三層以內。從而讓我們整體的頁面顯得更加簡潔。
通過目前的實踐總結，我覺得目前可以有以下五種方法來幫助我們更合理地安排信息層級。
信息分組是大家在設計時都能夠想到的形式，分組能夠將復雜的信息打散，從而降低頁面整體的復雜度。比如我們常用的分組方式有三種方式：間距、分割線、卡片。
那么這三種方式有沒有區分呢，VIVO設計團隊曾經就這個問題展開過用戶調研，但結果表示，如果純粹從用戶的角度來講，對其變化感知不大。但這三種分割方式會影響我們在呈現信息時的整體視覺觀感，因此我們可以根據當前信息的復雜度作出以下規則：
通過這三種場景的區別，我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。
組件其實是目前大部分設計師在進行信息排布時必備的部分，因此對于這部分設計師的熟練度也是最高的。而本篇想要強調的是，目前這幾種組件對于我們信息層級的劃分起到了比較重要的作用：樹形結構、表格結構、步驟條、選項卡。
▍樹形結構
對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。
▍表格結構
對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。
▍步驟條
步驟條則對場景要求非常明確，我們可以將多個場景通過分布的形式進行呈現，從而減少當前頁面的復雜度。
▍選項卡
選項卡更適合與同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。
由于組件這一塊大家的認知已經比較全了，在這里就不進行更深入的講解了。如果有需要的同學可以通過瀏覽各大廠的組件文檔去進行更細致的查閱。
通過改變布局的方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這句話什么意思呢，舉個簡單的例子：
從上圖中你可以看出目前的層級較多，尤其是兩層tab的疊加，視覺上就會顯得稍微有點凌亂。我們可以通過將第二層tab換個布局，從上下結構變為左右結構，達到從視覺上簡化層級的作用：
當然以上只是舉了一個簡單的例子。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，比如上述的兩欄結構，甚至三欄結構，從而讓整體變得更加簡潔。
我們可以利用信息融入的形式來減弱其對層級的影響。信息融入從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。比如我們看下面這一個例子，Coding產品設計中將標題與tab利用分割排列在一起，從而變為同一層級，這個時候就不會出現四層的復雜結構，頁面還是保持三層結構，通過這種方式有效降低了頁面的復雜度。
信息融入這個方法，當我們在進行B端布局時，用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，我們再看一個例子：
可以看到TAPD將「另存為視圖功能」與「缺陷統計」進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
在很多時候，我們覺得信息混亂的原因，就是頁面要素太多太花哨。比如工作中的一個小卡片，也就是利用信息弱化去減少畫面的復雜度：
因此我們需要學會對信息分級，不重要的信息就進行弱化，這樣整體的表述上會好很多。
通過上述5種方案：信息分組、利用組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化在三層以內，從而讓我們最終的頁面呈現不會太過復雜，更容易被用戶理解。但不可否認仍會有更復雜的頁面，即使縮減也仍有過多層級，那么這個時候就一定要記得最開始的從源頭去追溯這些所有信息是否必要。
在研究的過程中，也總結了目前在進行信息層級排布過程中比較糾結的一些細節點，也分享給大家。希望對遇到相同問題的同學一些幫助。
大家對「對齊」并不陌生，它存在于我們的每個頁面。但在對齊的過程中，我們可能會忽視一個小細節點，那就是沿著字的軸線對齊。比如下圖兩個例子：
在看見左圖時，總覺得哪里會有點奇怪，但又不知如何表述。而右圖看著就會相對更舒服。經過對比過后明顯發現右邊的圖整體相比于左側會更整齊，而這就是說的沿著字的軸線對齊。這主要是由于相似原則引起的：那些明顯具有共同特性(如形狀、大小、顏色等)的事物會被我們的視覺組合在一起，即相似的部分在感知中會形成若干組。
而左側因為標題字和底部字沒有形成對齊，因此會顯得更加凌亂一點。所以沿著字的軸線對齊會讓我們在整體的頁面呈現中顯得更整齊。
這是我平時在做設計呈現時也會糾結的一個問題。當你想用卡片來呈現視覺時，你有沒有糾結過到底是用線框卡片還是背景色填充呢。
我就曾陷入這種糾結，但在去搜索查閱時，發現目前其實關于這塊相關的資料，因此在大部分情況下都是由設計師自行決定的。但經過線上產品的調研發現，這塊內容其實也包含著一定的規則：
1.取決于卡片的數量
對于卡片少的其實可以用色塊來呈現，對于卡片多的可以考慮用線框來進行。這其實主要是從一個視覺的維度來進行呈現，舉個簡單的例子：
通過coding和飛書的卡片對比，你會發現卡片過多時線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。右側整體的呈現行會顯得更好一些。
2.取決于頁面的視覺重心
這里頁面視覺重心的含義是當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調，可以看到下圖的例子，右側的頁面會相對更穩重一點。
在進行色塊時，時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢，我們應該何時使用這兩種色彩呢。
我們先看一下案例：
可以看出目前這兩種顏色的運用更多的是功能上的區分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。
2.而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。
所以我們可以根據當前的信息場景來選擇合適的色彩，后面再面對時就可以不用那么糾結。
本期的內容到這里就結束了。關于這期的信息層級內容，真正需要深入了解的是控制信息層級背后的方法。很多時候我們看見的優秀頁面并不是因為它本身就簡單，而是通過我們合理的信息層級控制，讓最終呈現上顯得不復雜，這其實也是我們在實際工作中需要注意的很重要的一個點。
本文重點內容再回顧，當我們遇見復雜的信息層級時，需要分三步：
1.明確當前所有信息的必要性和重要分級，需要從源頭去深入了解；
2.運用五個方法可以有效減低信息層級：信息分組、組件拆分、更改布局、信息融入、信息弱化
3.同時在運用過程中需要注意影響層級的小細節
以上是本文關于信息層級的另一種角度的描繪，雖然沒有提及四大基本原則，但在實際運用中也是很重要的。最后，雖然進行了很多資料查詢，但在在闡述過程中不可避免會有闡述不到位的地方，歡迎進行反饋。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：進擊的M 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn