大家好，這里是設計夾，今天為大家分享的是「圖標設計細節」。圖標在頁面中的尺寸很小，卻包含著很多細節。作為通用的視覺化語言，把握住其中的設計細節至關重要。

這次總結一下圖標設計的屬性以及在圖標設計中，很重要但容易被忽略的知識點。

在 UI 設計中，圖標主要有兩大類：一類是 APP 啟動圖標，每個 APP 獨一份；另一類是系統 icon，搭配文字，方便用戶快速理解信息，也是這篇文章重點講解的內容。

風格

常見的圖標風格有線性、面性、彩色、寫實、3D 等，圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異，主要的作用是反饋動作和吸引用戶更多注意力。

1. 線形/面性：最基本也是做常用的風格，廣泛用在頁面設計中。
2. 彩色：通常用于反饋用戶的操作或者增加用戶的注意力。
3. 3D/寫實：當頁面中的某個內容需要引起用戶高度注意時使用，一下抓住用戶的視線。

Tips: 現在字節、百度新推出的一些年輕化產品中，有很多精致的 3D 寫實圖標，極具個性，很好地迎合了年輕用戶的喜好。在扁平風格流行的當下，這樣的嘗試也是一種突破。

重量

簡單的線性圖標重量輕，看起來更簡約，不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容，那么更適合選用簡約的、重量輕的線性/面形圖標，防止頁面過于雜亂。

相反，如果當前的頁面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至 3D 圖標來增加頁面的豐富性，讓頁面看起來更有設計感，給用戶帶來視覺上的愉悅，簡約而不簡單。

屬性

構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等，表達式規則是統一的，以便只給觀看者識別圖標所需的最小更改。

1. 描邊粗細：手機上常用到的描邊粗細有 2px、3px、4px。2px 的看起來會顯得更加精致，4px 的描邊視覺較重，可以用在優先級較高的區域作為功能性圖標,。
2. 端點/節點：圖標的端點有平頭、圓頭和方頭，圖標的節點有斜接連接、圓角連接、斜角連接，具體使用哪種樣式要根據頁面的情況統一設置。
3. 圓角半徑：方形的圖標邊角過于鋒利，用戶有時候看起來會不舒服，圓角圖標更圓滑，相對來說更容易讓用戶接受。雖然圓角用的更普遍，但具體使用哪種，還是要考慮頁面的整體風格再決定。

網格

圖標的外形有圓形、方形、三角形甚至不規則形狀的，所以我們很難將不同形狀的圖標尺寸完全統一。

這個時候網格就起到很關鍵的作用，有了網格相當于提前將圖標限定范圍，在網格范圍內根據圖標的重量和重心靈活調整大小，這樣會讓不同形狀的圖標看起來更統一。

視覺校正

由于設計軟件的局限性，雖然有些圖形已經居中對齊，但有時候還需要進行視覺校正。

最典型的圖標案例是“播放”圖標，利用設計軟件對齊中間的三角形后，會發現三角形的位置看起來偏左。

利用軟件對齊后，我們還需要再用眼睛確認一遍，我們可以將三角形向右移動，保證三角形的重心與圓形的重心一致，這樣整個播放圖標看起來會更舒服。

角度

設計圖標時，我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視，所以大多數的圖標都沒有透視，看起來會更簡潔。

帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注，但不建議這么設計。

比例

圖標比例通常使用 8 的倍數作為基準，例如 8px、16px、24px 和 32px，以便在各種環境中進行流暢地切換。除此之外，在移動端等屏幕尺寸較小的頁面中，還會使用 4px 的倍數，來實現多功能性。

清晰

圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小，要盡可能做到對用戶友好，可以使用一些簡單的隱喻設計，但含義不能過于復雜。

一個圖形能說明的問題，沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義，這樣反而會影響用戶的操作。

細節

這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息，特別是對于尺寸很小的系統圖標，最好只保留最基本的內容，移除多余的裝飾元素。

一致性

這里說得一致性，并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面，線性、面性等多種圖標風格可以一起使用。

但在同一個頁面場景中，執行相同功能的圖標應該保持相同的樣式。

熟悉感

面對不同的操作系統，例如 iOS 和 Android，同一功能對應的圖標也會有差異。針對不同的系統，我們可以選用大多數用戶熟悉的圖標，這樣用戶能更快地理解圖標的含義

最后

以上就是常用卻容易忽略的圖標設計細節，希望通過這些內容能幫助你對圖標設計有更深的認識。

作者：Clippp

轉載請注明：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南

圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格

圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！

圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！

圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！

圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！

圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？

圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范

圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考

圖標定制設計之十：這6種類型的菜單圖標和用法，這篇全總結了！

簡介說明

1. 理論表述

任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。

2. 研究背景

1954 年，Paul Morris Fitts 根據信息類比提出一個假設，該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數，卻給了后來的交互研究人員極大的啟發。

我們現在經?？吹降?Shannon 公式（即上面那個公式）是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」，該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎，它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系：因為以 2 為底的指數函數是遞增函數，所以，T 與 D 正相關（D 越大 T 越大），而與 W 負相關（W 越大 T 越?。?。

設計案例

人們做出一個移動指針的操作通常需要兩步：

• 將指針快速移動至目標大致所在的區域；
• 精細調節指針的位置以達到可點擊的區域。

菲茨定律所包含的兩點內容：

• 指針當前位置與目標間的距離 D 越長，所需時間越長；
• 目標的寬度 W 越大，所需時間越短。

綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。

1. 需要連續操作的控件盡可能接近

案例1：系統右鍵菜單，微信彈出菜單

最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶，點擊這類按鈕之后一定會有后續的任務和操作，所以這些任務都被安排在了距離所點擊區域更近的菜單中。

案例2：夸克和 Safari 的 url 輸入框位置比較

另外一個例子是瀏覽器的搜索欄輸入框，現在已經有一些瀏覽器（比如簡單搜索、夸克）會將輸入框以及一些其他更常用操作置于底部，這是因為我們正常握持手機時，大拇指離底部更近，所以需要進行點擊操作的話底部的輸入框操作起來更方便，也更快。

2. 可點擊的按鈕盡可能大

這一點在現今的 APP 中做得已經非常到位了。

案例3：哈羅出行

作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。

3. 邊角的利用

還有一個比較特殊的就是對于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態欄，包括 Mac 特有的觸發角。

案例4：MacOS 觸發角設置

為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢？在硬件設備中邊角是一個極其特殊的存在，由于指針再怎么移動都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對于用戶的操作來說是「無限可觸發」的，這有什么意義呢？這意味著對于隱性存在的目標來說，W 趨于無限大。

既然 W 趨于無限大，根據公式時間 T 就趨于常量 a。

結論就是無論指針距離目標物多遠，所需要花費的時間都已經達到了理論的最小值，輕松且高效。而在移動 APP 中同樣有邊角的應用，比如最近拿了 Google Play 設計大獎的 Drops。

案例5：Drops

創新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的，而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣，但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩，滑起來相當帶勁。

4. 菲茨定律的逆向應用

菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時間為主要目標，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時，可以逆向運用菲茨定律，增加操作的復雜度。

案例6：iPhone 關機和微信刪除聊天窗

iPhone 的滑動關機延長了用戶關機操作的時間，以提醒用戶此操作為不可逆，需要謹慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達到警示的目的。

另一個典型就是彈出窗口的關閉按鈕。

案例7：Luckin Coffee 的彈出窗

彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等，所以開發商會希望用戶花盡量多的時間去注意到它們的內容，這時候雞賊的開發商會把關閉按鈕做得又小又遠（遠離視覺中心），讓用戶花更多的時間去尋找和點擊它們，效果拔群。

注意事項

注意點1：D 不能過分短

過分短的間距不僅無法提升操作效率，反而會造成視覺壓力從而降低用戶體驗。

反面案例1：唯物魔改版

按照菲茨定律魔改的唯物登錄頁面，理應操作得更迅捷方便，然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外，我嘗試著點了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。

注意點2：W 不能過分大

大尺寸的點擊目標確實能夠有效地降低用戶操作成本，但是過分大的目標也會很直接地破壞畫面的平衡，浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系，當按鈕已經足夠大時，再增大就沒有什么體驗上的提升了，如下圖所示。

反面案例2：KEEP 魔改版

與唯物類似，當按鈕大到一定程度之后，會對畫面造成恐怖的破壞效果。

總結

• 盡可能縮短連續操作所相關按鈕的間距，盡可能做大需要頻繁點擊的按鈕（但都不要太過分）。
• 注意屏幕四邊和四角在交互中的價值。
• 逆向運用菲茨定律以延長用戶在當前頁面的時間，或對用戶的下一步操作發出警示。

參考資料

1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
4. Mr湯進er. (2017). 產品設計法則：菲茨定律（費茨法則）/ Fitts’ Law.
5. bozhongtao (2012). 菲茨定律與互聯網設計 Fitts’Law.

前言

距離iPhone 12系列發售已經有段時間。

之所以沒第一時間撰文，是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發售。

而在此之前，即便是Apple線下店也沒有樣機。

保險起見，我等接觸到 Mini 和 Max 真機后，開始著手撰文。

一周前完成了文字部分，本周終于完成了幾十張配圖，這才和大家見面。

為了方便新同學更好的了解本文內容，我會簡單提及一些關于適配的必要信息。

并附上往期內容的鏈接，方便延展翻閱。

本文約3200字，分以下六個部分：

基本參數

在網絡上搜索手機界面適配的相關內容。常會看到文中提及以下幾個參數：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI數值…

其實，在處理常見手機界面適配時，設計師只要關注以下3個基本參數：渲染像素（Pixel）、邏輯像素（Point）、 倍率（Scale）

渲染像素（Pixel）可以理解為是手機截屏時所得到的圖片尺寸，單位是px；

邏輯像素（Point）可以理解為是程序員在用代碼繪制頁面時所用的尺寸，也被叫做“1倍圖尺寸”。比如Sketch中對應的機型尺寸

對應的就是手機的邏輯像素尺寸。

倍率（Scale）因為邏輯像素和渲染像素存在著一定的比例關系，這種比例通常被稱為倍率，比如切圖后綴的@2x、@3x對應的就是倍率的數值。

值得一提的是，倍率不一定是整數，比如三星GALAXY J2（540×960），倍率是@1.5x；

華為M3 Life 8.0”（1920×1200）的倍率則是@2.25x

兩種適配

適配方式主要有兩種：

1. 倍率適配

主要應用在邏輯像素相同，但倍率不同的設備。

比如iPhone 11適配到 iPhone 11 Pro Max

兩個適配的邏輯像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。

2. 邏輯像素適配

這種適配方式應用在兩個倍率相同，但邏輯像素不同的設備，

比如iPhone 11 到iPhone 8：

兩個設備的倍率都是@2x，邏輯像素則分別是：414 x 896pt 和 375 x 667pt。

如果兩個設備的倍率和邏輯像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max

那通常會先進行邏輯像素適配，再進行倍率適配。

由于倍率適配相對簡單，只需要考慮分割線和切圖這兩個因素。

因此，設計師通常說的手機適配、尺寸適配常指邏輯像素適配。

所以搞清楚iPhone有哪幾種邏輯像素，就成了iPhone適配和驗收的關鍵。

iPhone 12對設計的影響

在今年10月份發布的iPhone 12系列共有四部機型。

在談新設備前，我們先簡單回顧截止iPhone 11系列時，iPhone的幾款主流機型及其對應的參數：

通過圖表可知，在iPhone 12發布前，市面上的iPhone共有6種不同的分辨率需要完成適配。

那么iPhone 12又帶來哪些變化呢？

從官方給出的屏幕數據可知，四款設備的物理像素如下：

由圖可知，今年iPhone共新增了3種全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）

但在設計層面，iPhone 12系列四款手機，只為設計師增加了1170×2532、1284×2778 兩種新的設計尺寸。

畫重點：目前有一些文章，錯把iPhone 12 mini的屏幕參數1080×2340當做最終的繪圖尺寸，認為12 mini的邏輯像素為360x780pt 。

事實上iPhone 12 mini采用了iPhone X一樣的渲染像素，即1125 x 2436px，對應的邏輯像素是375x812pt。

為了解釋這個問題，得從大家比較熟悉的iPhone Plus系列手機說起。

在前文提到，手機界面適配時，設計師只要關注：渲染像素（Pixel）、邏輯像素（Point） 以及倍率（Scale）這三個基本參數。

而其中的渲染像素通常會和屏幕的物理像素保持一致，比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。

這也導致大家很容易把物理像素和渲染像素混為一談。

但既然說了是“通常會保持一致”，就總會有例外。

比如iPhone Plus系列，官方給出的屏幕參數（物理像素）是1080×1920，但渲染像素卻是1242×2208。

所以設計師在針對Plus系列做圖的時候，就得按照1242×2208進行輸出。

而新款iPhone 12 mini的情況和Plus系列一樣：

官方給出的物理像素尺寸是1080×2340 ，但拿到設備真機后，通過測量可知12 mini采用的渲染像素是1125×2436，這和iPhone X的渲染像素保持一致。

在明確這一點后，我們再看下iPhone 12系列設備的參數：

如果我們只看邏輯像素，加上iPhone 12系列，目前iPhone 共有7種尺寸。

這些尺寸都需要設計師留心，并完成相關機型的驗收走查。

不過，到這里還沒完?？紤]到iPhone存在“標準”和“放大”兩種模式的視圖。

還需要將放大模式的尺寸考慮在內。

目前各個設備的放大模式對應的適配三要素分別如下：

其中320x693pt是全新的尺寸，出現在12 mini、12、12 Pro這三款設備中。

由此，在把放大模式納入適配考量范圍后，iPhone的邏輯像素共統計出8種尺寸。

如果將其中最小尺寸和最大尺寸比較寬高的話，寬度相差了108pt、高度相差了358pt

對于那些橫滑需要外露一部分的頁面，需要重新設計尺寸或調整局部的適配方案。

這對于一些單屏顯示的頁面而言，也是件麻煩事。

iPhone市場占比變化

先思考一個問題，在下面幾個尺寸的iPhone中，你覺得哪一種尺寸的iPhone在市面上占比最高？

在 iPhone 12發布之前，在iPhone這幾種屏幕尺寸中，你覺得哪一種iPhone的市場占有率最大？

我相信絕大多數設計師，都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里，大家都是用這個尺寸在做圖。

那實際情況究竟如何呢？

我們先看下阿里友盟今年05月01日的數據：

PS：數據公司按設備的物理分辨率進行統計，而非渲染像素。所以這里的1920×1080對應的是Plus系列手機。

今年五月，國內iPhone占比最高的機型是Plus系列。而設計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。

其中排在第三的1125×2436（對應@2x的設計尺寸是750×1624）和前兩者的占比仍有較大的差距。

那是不是隨著時間的推移，1125×2436的機型占比會逐漸增大，并逐漸占據第一呢？

如果你也有同樣的想法，恐怕又得失望了。

翻看5月份的iPhone增量數據，會發現一個有意思的情況：

在增量中，828×1792（對應iPhone 11）增速以51.9%遙遙領先第二名的1125×2436。

下面，看下最新的11月統計的iPhone存量數據：

828×1792已經從占比第四名上升到了第三名，

再看11月份的增量數據：

828×1792的增速不減反增，從5月份的51.9%增加到了最近的63.8%

如果不考慮最新的iPhone 12系列，828×1792有望接替Plus系列，成為市場占比最大的iPhone尺寸。

在828×1792的設備飛速增長的同時，1125×2436這個尺寸的設備增速卻在不斷下降。已經從5月份的27.8%降到了現在的10.2%

iPhone 設計尺寸演變

過去設計師常用的設計師尺寸是750×1334，但隨著iPhone進入全面屏時代，如果再把750×1334作為設計的基準尺寸顯然已經不合時宜。

而目前常用的750×1624尺寸對應的機型（對應1125×2436在@2x下的尺寸）無論在存量市場中的占比，還是增量市場中的占比都少的可憐。

而新發售的iPhone 12系列中，也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款，采用全新的渲染像素和邏輯像素。

很難想象1125×2436這個尺寸的設備，還能和過去的750×1334尺寸一樣，成為iPhone主流的分辨率尺寸……

設計基準尺寸的選擇，除了要看設備的占有率，還要兼顧適配的成本。比如，當有大中小三種尺寸的設備需要設計時，優選中間尺寸作為基準尺寸。

以中間尺寸為基準，無論是適配到小尺寸、還是適配到大尺寸，界面的調整幅度都是最小的，偏差不會太大。

反之，如果選擇小或大作為基準，或許頁面適配到中間尺寸時感覺還行，但適配到另一側相對極端的尺寸時，則容易出問題。

新，設計基準

界面設計師所用的繪圖基準尺寸并非一成不變?；乜催^去：

設計師用的基準尺寸已經從最初的640×960、變成640×1136、再到750×1334，以及現在的750×1624，已經變化了4次。設計師幾乎每隔兩年就會隨著新iPhone的發布調整一次設計尺寸。如今隨著iPhone 12的發布，加上750×1624對應機型在市場中占比的低迷，我們可以重新思考在iPhone眾多尺寸中，哪一款更適合作為設計的基準尺寸。

這里先不考慮設計師對尺寸的慣性依賴，只思考適配兼容性和市場占有率這兩方面。適配兼容性，按照“大中小”優選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸（指邏輯像素）中選出位于中間的尺寸：

分別是 375x812pt 以及390x844pt，前者對應1125x2436px ，后者則對應1170x2532px，如果進一步將其轉換成大家熟悉的@2x尺寸，則分別對應：750×1624和780×1688

在市場占有率層面，隨著Apple逐漸停售之前的設備，新款iPhone的分辨率占領市場只是時間問題。而在新設備中，只有iPhone 12 mini這一款設備采用大家熟悉的1125x2436px（375x812pt，對應@2x下尺寸750x1624px）。如果按照此前的經驗推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成為最熱賣且占比最高的設備只是時間問題。

截止iPhone 12發布為止，顯然 390x844pt （對應@2x下尺寸780x1688px）更適合作為今后的設計基準尺寸。

作者：海邊來的設計師

轉載請注明：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律

手機及小程序界面設計之二：三分鐘搞懂，iPhone 12發布后的設計尺寸調整

手機及小程序界面設計之三：從 Dribbble 高贊的 828 個作品中，總結出 2022 設計趨勢

手機及小程序界面設計之四：手機屏幕越來越大，UX設計師面臨哪些挑戰？

手機及小程序界面設計之五：連高手都容易忽略的9個 iOS 與 Android 間的交互差異

手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律

手機及小程序界面設計之七：基礎科普！超全面的 UI 元素尺寸設置指南（上）

手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！

手機及小程序界面設計之九：手機端表格設計：我整理了一套循序漸進的處理方法

手機及小程序界面設計之十：超詳細解讀：UI導航設計不僅僅指的是導航欄

Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位，對 Dribbble 設計的研究會讓我們看清設計的方向。

為了保證這篇文章的質量，Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品，作品總的大小為 2.2G。

總結

從挑選出的 828 件作品中，排名前十的作品中 9 件為 B 端設計，另一件作品也是 B 端產品 C 端化的產物。其中：

• B 端界面設計占比 476/828，57.4%；
• C 端界面設計占比 180/828，21.7%；
• 視頻動效作品占比 223/828，26.9%；

明眼人都能看出其中的比重關系，B 端設計再次大火，為什么是再次？因為 B 端設計之前火過，只不過沒有趕上一個好的時代，在 C 端設計風光的十年里而忽略了其存在。隨著 C 端市場飽和與數字化的浪潮下，實體經濟、ToB、ToG 的產業再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設計，相信今年視頻動效作品占比還會再次提升。

Dribbble 年度最佳作品

Dribbble 年度最佳作品來自大家最熟悉的 UI8 團隊中的 Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。

為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢？既不是 C 端也不是純 B 端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年Dribbble 設計流行趨勢之一。

MetroUI 是 Windows8 的界面設計語言，在 2010 年至 2013 年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動 To B、To G 的發展元年，通過幾何色塊（MetroUI）實現 B 端產品與 C 端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。

最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現 B 端設計重功能和交互體驗，視覺點到為止的設計理念。

下面我們來欣賞年度最佳作品里面的流行趨勢吧。

1. 易讀性（停頓感）

字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。

通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。

2. 曲線

在標題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。

除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。

3. 多彩高斯漸變風

多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。

多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。

B 端界面設計

1. 側邊欄 Sidebar

B 端設計的火爆帶動了 B 端相關模塊設計，更多的人也愿意嘗試 B 端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于 PC 屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。

2. 儀表盤設計

儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B 端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。

3. 流程設計

復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是 B 端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。

4. B 端 C 化

B 端 C 化是 B 端產品設計的視覺表現力慢慢往 C 端產品設計的視覺靠齊，國內 B 端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B 端產品也開始移動化、智能化，國內主流還是通過小程序、H5 來現實 B 端產品 C 端化。

5. 輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。

輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。

界面設計技巧

1. 人文氣息

為什么人加色塊的組合方式能流行起來？還是 B 端行業流行帶動的。B 端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。

當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。

這種風格更適合大公司，國內的一些手機廠商 OPPO、VIVO 等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。

2. 毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下 UI 扁平化的設計趨勢。蘋果 Mac OS Big Sur 系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術-C4D 創建彩色玻璃的 4 個技法”，完全能滿足 UI 設計師。當然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費的使用權，具體安裝購買方法上某寶就可以輕松搞定，真香。

3. 輕擬物

輕擬物這幾年一直流行，在 UI 設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如 B 端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。

4. 簡潔設計

簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在 B 端產品界面中更加需要簡潔設計，我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?；氐浆F實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。

5. 幾何圖形

幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B 端產品視覺設計 C 端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年Dribbble B 端產品的視覺設計一定會更上一個臺階。

幾何圖形另一個場景化的地方就是品牌，作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。

6. 暗黑設計

暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。

在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design 給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為 15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome 插件）用來測試界面的對比度。

7. 模塊化（組件化）

為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在 B 端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從 0 到 1 搭建 B 端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。

產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。

8. 插畫

插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。

9. 幾何插畫

幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。

10. 線面插畫

線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。

動效

1. 微交互

界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI 界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C 端產品微交互和動效已經很成熟了，一部分功勞來自 iOS 系統原生自帶的效果。B 端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。

2. Mg 動畫

Mg 動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG 人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。

三維

1. 三維圖標

MacOS Big Sur 系統圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。

2. 輕三維

為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建?！驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更加出彩。

3. P4D（PS+C4D）

P4D 是 PS 加 C4D 的設計表現技法，也是視覺設計的最后一個環節，通過 PS 對 C4D 的渲染圖片進行調色，利用 PS 的調色技巧可以很好的解決 C4D 打燈光的瑕疵，還可以利用 PS 強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過 PS 的后期合成來實現，這也是 P4D 的強大之處。

4. 卡通 IP

卡通 IP 設計最近三四年技術的迭代已經慢慢的走上成熟，卡通 IP 也從傳統的純 PS 手繪技法，轉到 C4D 建模—角色綁定—MD衣服制作—OC渲染—PS（靜態）/AE（動態）調色。

卡通 IP 火的本質更適合做營銷，相比于品牌或 Slogan，卡通 IP 具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通 IP 已經是互聯網 B 輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。

對于 UI 設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。

5. 三維動畫

C4D 三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在 AR/VR 領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學還是有一定的優勢。

總結

上一次寫 Dribbble 流行趨勢還是兩年前了，通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火，隨著最近的互聯網裁員潮大家也慢慢的進入到反思層，客觀的看待和理解這個真實的世界，曾經的流行趨勢也需要慢慢的沉淀下來。

存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。

6000 多字的設計流行趨勢，希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業奉獻微薄之力。

作者：水手

轉載請注明：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

更多精彩文章：

手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律

手機及小程序界面設計之二：三分鐘搞懂，iPhone 12發布后的設計尺寸調整

手機及小程序界面設計之三：從 Dribbble 高贊的 828 個作品中，總結出 2022 設計趨勢

手機及小程序界面設計之四：手機屏幕越來越大，UX設計師面臨哪些挑戰？

手機及小程序界面設計之五：連高手都容易忽略的9個 iOS 與 Android 間的交互差異

手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律

手機及小程序界面設計之七：基礎科普！超全面的 UI 元素尺寸設置指南（上）

手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！

手機及小程序界面設計之九：手機端表格設計：我整理了一套循序漸進的處理方法

手機及小程序界面設計之十：超詳細解讀：UI導航設計不僅僅指的是導航欄