首頁

192025-3

留白設計和UI設計準則

資深UI設計者設計管理與成長

敘述留白設計準則以及UI設計的排版準則

評論(0) 瀏覽(22)

192025-3

巧用構圖知識，讓設計不再套版

資深UI設計者設計管理與成長

通俗易懂的構圖知識

評論(0) 瀏覽(16)

192025-3

這排版確實專業，這次不獻丑了！

天宇平面設計

今天來繼續聊聊慢熱視覺課里的排版部分，分享一些小干貨給大家：

1.主體和畫面對比：

同學排版做的不錯，但是主體和背景的對比不足，導致怎么畫面有些悶悶的。所以我們可以提亮背景，加強背景和麥克風的對比這樣畫面就不會那么悶了。

像下面這些都是畫面對比不足導致畫面悶悶的或者層次拉不開的問題畫面：

我們可以在中間加一層亮色隔開，也可以增強畫面的對比：

2，整體畫面的結構比列：

比如下面的這張畫面，整體可以分ABC三個部分。

問題就在于A/C的體量太一致了，覺得整個畫面很臃腫。怎么調整呢？其實我們可以適當調整占比，拉開A/C的差距，比如縮小C的占比，這樣整個畫面就更有主次了：

實際效果，頂部的標題和底部的信息拉開了主次，整個畫面才有了更好的節奏感：

3.排版的延續性

看看下面的兩個案列：

左邊的排版感覺，就是排版和主體元素有很強的分割感，右邊的排版就比較連貫。

要去除這種感覺，我們需要像右邊這種，在中間區域增加一些和排版同色系的圖形或者文字來起到延續的作用，這樣整個畫面才能連貫起來，不會有分割感。

4.局部排版的比例節奏

拿下面這個排版舉例：

他的文字和英文太相近了，看起來就像三根柱子，毫無變化：

調整的有主次變化，我們可以縮小其中一根，再加一些錯位：

表現到字體排版上就是：

節奏感是不是就好多了呢？

5.排版的疏密節奏

我們來看下這一份作業：

整個畫面非常密集，特別是背景排版全是各種小字密密麻麻布滿的整個畫面，就導致了整個畫面非常密集。

其實這里我們需要整體畫面你的節奏感，一般來說我們背景的密集程度要和主體有所聯系，一般來說我們主體是我們畫面中最復雜的部分，其余部分如點綴元素、背景等的復雜度都要弱與主體，這樣才能很好的突出主體。

我們可以用一些大塊面的字體去大面積概括畫面，不要用很小很碎的字體去堆疊：

氣質是不是一下就上來了呢？

作者：菜心輕量文
鏈接：https://www.zcool.com.cn/article/ZMTY0MDUxNg==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

評論(0) 瀏覽(17)

192025-3

教你一文讀懂圖標設計

天宇移動端UI設計文章及欣賞

引言

在數字化時代，用戶界面（UI）設計成為了連接用戶與產品的重要橋梁。圖標作為UI設計中不可或缺的元素，不僅承載著信息傳遞和導航的功能，還直接影響著用戶的視覺體驗和情感反應。一個優秀的圖標設計能夠瞬間吸引用戶的注意力，傳達出應用的核心功能，甚至成為品牌識別的一部分。本文將深入探討

圖標設計的基礎、步驟與技巧，并通過實際案例分析

，為設計師們提供一套完整的圖標設計指南。

（如果文中存在任何不準確或遺漏之處，我也非常期待各位專家的指正和建議）

本文目錄

一、圖標設計的基礎

1. 定義與功能

圖標是一種圖形符號，用于代表應用程序、功能或操作。在UI設計中，圖標可以快速傳達信息，提高用戶的理解和操作效率。

(1).定義

：

圖標設計是UI設計中的重要環節，通過創造

具有高度概括性和象征性的圖形符號

來代表各種物體、動作和概念。這些符號簡潔明了，能夠讓用戶快速識別，并在軟件界面、網站和移動應用等多領域廣泛應用。例如，常見的“保存”圖標是一個軟盤形象，用戶一看即知這是保存文件的功能。這種直觀性是圖標設計的核心價值所在。

(2).功能：

圖標設計的主要功能包括

提升視覺美感、增強用戶交互體驗、節省空間以及提供上下文信息

。例如，在手機桌面上，微信圖標用兩個對話氣泡簡單圖案代表了這個軟件；在界面導航和工具欄中，圖標可以快速引導用戶執行特定操作，例如，“搜索”圖標通常是一個放大鏡的形象，用戶看到這個圖標就知道可以進行搜索操作。這種通用的圖標設計使得用戶無需額外的學習成本就能快速上手。

具有代表性的圖標

2. 圖標的分類

圖標類型可以從多個角度進行分類，以下是根據風格、功能和交互方式等不同維度的分類介紹

(1).按風格分類

線性圖標：

線性圖標主要為

單色線性或增加品牌色點綴

，使用輕量的線條勾勒，整體感受趨向于精致、細致，具有銳度感，不同的線條表現會帶來不同的視覺感受。

兩種具有代表性的線性圖標

面性圖標：

面性圖標包括

單色填充、多色疊加、微漸變

等不同形式，主要通過填充顏色來表達圖形，能夠更好地傳達出圖標的力量感和重量感，依賴于外輪廓的清晰度來提高識別度。

三種具有代表性的面性圖標

輕質感圖標：

輕質感圖標包括

磨砂玻璃、輕寫實、晶白風

等，相較扁平圖標而言，更突出圖標的細節刻畫和真實的質感，增加了一些輕微的陰影或質感，以增加層次感。

三種具有代表性的輕質感圖標

擬物化圖標：

擬物化圖標包括

2.5D、偽3D、3D建模

圖標等，盡量將現實世界中的形狀、紋理、光影融入到設計中，以模擬真實物體的外觀。

三種具有代表性的擬物化圖標

字符圖標：

字符圖標使用

簡化和通用的圖形

，如字母、數字和簡單的圖形符號，具有較高的識別度和靈活的適用場景。

兩種具有代表性的字符圖標

(2).按功能分類

應用圖標：

應用圖標是各種應用程序的識別標志，通常在應用商店里下載的一些應用程序的標志

頂部導航欄圖標：

常見有搜索、收藏、消息通知、掃一掃、每日簽到等

底部導航欄圖標：

根據軟件的功能模塊進行分類，常見有主頁、我的等一些主要的模塊

金剛區圖標：

是整個UI界面中的核心功能區域，承載頁面的主要功能和重要信息

表單內圖標：

常見于”我的“界面中，根據產品類型不同而有差異

通用圖標：

常見有箭頭、睜眼、閉眼、返回、收藏等

按照功能劃分的六種圖標

(3).按交互方式分類

靜態圖標：

靜態圖標不會隨著用戶的操作或界面的變化而改變狀態

動態圖標：

動態圖標會根據用戶的交互或界面的其他變化而改變狀態，如Bilibili的三連圖標動效

Bilibili的三連圖標動效

3. 設計原則

學習了圖標的基本分類之后，設計師們在設計圖標的過程中需要注意

易識別性、統一性、簡潔性

等基本的設計原則。我再給大家分享幾個icon設計的最佳原則幫助大家再UI設計中設計出完美的圖標。

(1).圖標設計的尺寸

最小的圖標大小通常為12×12px

。根據行業標準，在以此為基礎產生的大小值中，大部分的數值都是通過將先前的數字加倍而創建的。通常我們可以看到小、中、大這三個尺寸的圖標大小。值得我們注意的是，在我們創建ICON時，應該以100%的比例設計，這樣才會使得圖標像素看起來比較完美。同時通過進一步放大也可以確保準確性。

iOS平臺規范：

iOS界面的網格系統

基于4pt的倍數

。蘋果官方建議最小可點擊區域為44pt，以確保用戶在操作時的準確性和舒適度。因此，設計IOS圖標時應以此為參考，確保交互元素的可點擊性。

Android平臺規范：

Android界面

使用8dp的倍數

作為網格基礎，最小操作熱區要求為48dp。因此，通常建議采用48px作為常規圖標的設計尺寸，以便在不同設備和分辨率下都能保持良好的觸控體驗。

iOS系統中美團app的圖標尺寸

(2).完美像素

具有完美像素的圖標會呈現出

清晰明快的線條和形狀

。如今，高分辨率顯示器和Retina顯示器越來越流行，因此在不久的將來可能會減少對像素完美圖標的要求。但就目前而言，我們所設計的圖標也應該是可擴展、響應迅速并能適用于許多設備的。我們在創建具有完美像素的圖標時，可以參考以下三種建議：

對齊像素網格：

這種設計方法可以使直線變得非常清晰，并增加曲線和拐角的清晰度

使圖標保持完美角度：

有角度的線條更有模糊感。在創建圖標時，完美的角度是45°

邊緣：

邊緣的4個像素最暗，因此最少需要保留4個像素的留白，這樣線條邊緣看起來才會更清晰

達成完美像素的三個要求

(3). 一致性原則

圖標的一致性，就是一組圖標放置在一起，

圖標要看起來差不多

，不能忽大忽小，我們前文提到過幾何圖形它們有視覺差，有的時候并不是說尺寸一樣，大小就一樣了，在設計過程中除了可以利用柵格系統保證圖標大小統一之外，還需要注意以下幾個方面要保證統一：

線寬與間隙：

為了使圖標看起來整潔一致，非常重要的一點就是要記住線寬和間隙的大小。這是一條我們必須遵循的規則，即：

所有線條的寬度相同

。

方/圓角一致性：

包括圖標在內的對象圓角半徑會定義項目的外觀和感覺。當我們對一組中的多個對象進行闡述時，就需要遵循這一簡單的規則，即：

在方角和圓角之間選擇其一

，并對整組圖標應用相同的屬性。

線條與間隙、方圓角保持一致性

視覺大?。?/div>

當我們把一個大小相等的正方形和一個圓形放在一起時，就會產生一種奇怪的感覺：圓形似乎比正方形小。為了

使我們的形狀在視覺上看上去大小相同

，我們就應該把圓圈變大，或減小正方形的大小。

視覺平衡：

我們經常在設計程序中使用中心對齊。雖然這種方法并沒有錯，但在細節方面，比如圖標設計中，我們就需要相信自己的眼睛，

打破數學規律，以增強元素的平衡

。以播放按鈕為例，它的形狀越不對稱，需要改進的地方就會越明顯。

視覺大小、平衡的一致性

(4).KISS原則

即Keep Simple & Starightforward，這個原則背后的想法是，如果大多數

系統保持簡單操作

，那么它們就會運作得很好。用戶也就會越容易理解并與之交互，而它就越有可能被放到項目設計中。那么，KISS原則是如何運用于圖標設計的呢？

不使用文本：

文字和圖標的結合會減少圖標的使用方式。此外，小尺寸的文本具有不可讀性。如果我們仍然需要將文本作為支持元素，就需要使用ICON旁邊的提示工具和標簽。

不要過度設計：

不必要的復雜性會妨礙設計目的。重復的設計也會嚴重影響用戶體驗

盡可能避免不必要的元素：

但我們不能忘記確保每個圖標在整體上下文中都是可以理解且清晰的

KISS原則的三項要求

二、圖標設計步驟與技巧

1. 研究與分析

在圖標設計的第一步研究與分析中，需要

對品牌和目標受眾、競爭環境以及設計元素

進行深入的分析。下面詳細介紹圖標設計步驟與技巧第一步研究與分析：

(1).業務需求和用戶需求

了解業務的需求背景是至關重要的。這有助于設計師

理解產品的個性和定位

，確保圖標設計能夠準確傳達品牌信息。同時，

明確品牌的目標受眾

，了解他們的需求和偏好，可以幫助設計師更好地滿足用戶期待，提高圖標的吸引力和有效性。

用戶需求、業務需求與設計需求

目標受眾不同

，他們對圖形的期望也會不一樣，比方說設計兒童產品界面和B端產品界面時，所用的顏色和形狀都是有考究的。例如，兒童產品：叫叫閱讀的圖標設計形狀會比較圓潤，色彩頁比較豐富；而B端產品：騰訊會議的圖標設計用色就會很克制，形狀也不會過于圓潤。

不同目標用戶對圖標設計風格的影響

(2).競品分析

分析競爭對手的圖標設計，

找出差異化的設計方向

，這對于創建獨特的圖標至關重要。通過觀察競爭對手的設計，設計師可以避免重復，并找到創新的切入點。下面以國內最大的兩家電商購物平臺拼多多和淘寶為例，詳細說明其不同的圖標設計風格時是怎樣體現出不同的品牌理念和市場定位的。在UI界面設計的競品分析中，拼多多與淘寶作為電商行業的兩大巨頭，其界面設計各具特色，體現了不同的品牌理念和市場定位。以下是對兩家公司界面設計的詳細競品分析：

i.設計風格：

拼多多：

拼多多的界面設計簡潔明快，以紅色為主色調，

象征著活力、熱情和實惠

。首頁主打拼團購物模式，整體風格更加年輕化、社交化，符合其社交電商的定位。

淘寶：

淘寶的界面設計則更加穩重且富有現代感，以橙色為主色調，

寓意著財富和繁榮

。首頁布局合理，分類清晰，用戶可以一目了然地找到自己需要的商品。搜索框設計簡潔明了，配合推薦搜索詞，使用戶快速定位到目標商品。

ii.色彩搭配：

拼多多：

拼多多主打的紅色調顯得活潑可愛，符合年輕用戶的審美，整體色彩搭配

簡潔明快

。

淘寶：

淘寶

色彩豐富

，但頁面整體顯得稍顯雜亂，缺乏統一的色彩風格。

iii.功能設計：

拼多多：

拼多多

注重用戶體驗

，拼團、秒殺等活動設計獨特，社交元素豐富，用戶參與感強。同時，拼多多的搜索框和推薦算法也更加個性化，根據用戶的偏好推薦相應的商品。

淘寶：

淘寶

功能豐富多樣

，商品種類繁多，搜索推薦系統較為智能，但頁面加載速度較慢。此外，淘寶還擁有豐富的社交功能，用戶可以通過買家秀、評價等功能進行社交互動。

iv.用戶體驗：

拼多多：

拼多多通過社交分享和拼團互動，增加了用戶粘性，

用戶參與感強烈

。同時，拼多多的價格戰略也體現在界面設計上，頁面上經常出現“xx人正在拼團”的提示，吸引用戶參與拼團活動。

淘寶：

淘寶作為老牌電商平臺，

用戶體驗相對成熟

，但個性化推薦仍需提升。淘寶的購物流程相對傳統，但廣告較多，頁面略顯復雜。

拼多多、淘寶的界面圖標設計對比

(3).設計元素

選擇能夠代表品牌核心價值的圖形元素

，如圖標、符號或抽象圖形。這些元素應當簡潔明了，易于識別，同時具有獨特性，能夠在眾多圖標中脫穎而出。字體的選擇應與品牌風格相符，確保字體的可讀性和美觀性。顏色的搭配也非常重要，需要選擇能夠傳達品牌情感和個性的顏色，并確保顏色的搭配和諧。例如，閑魚App的UI設計通過獨特的設計元素，成功體現了品牌風格。以下是對閑魚App圖標設計的詳細分析：

i.顏色：

閑魚App采用了醒目且統一的配色方案，

以黃色為主色調

。黃色作為主色調，

給人一種溫和和舒適的感覺

，同時用于強調重要的功能按鈕或提示信息，使用戶能夠迅速識別出需要操作的按鈕。針對年輕用戶的喜好著重設計，采用了淡黃、淡藍等更為年輕化的色彩，這種配色方案不僅提高了界面的辨識度，還增加了用戶使用的舒適度。

ii.圖標設計：

閑魚App的圖標設計非常簡潔明了，

采用了扁平化+輕質感的風格，簡化了復雜性

，方便用戶快速識別功能。特定的圖標如“待售”、“交易中”、“已售”等，幫助用戶快速識別自己商品的狀態。同時，幾乎每個重要界面上都有閑魚的IP形象小黃魚，頻繁強調品牌形象

閑魚獨特的圖標設計體現出獨特的品牌設計元素

2. 構思與草圖

圖標設計的構思與草圖階段是整個設計過程中至關重要的環節，它不僅決定了圖標的最終形態，還影響著用戶體驗和品牌傳達。

(1).構思

完成研究與分析后，我們要收集關于

“詞語—圖形”之間能轉化的元素

，用生活中的物或其他視覺對象來代替所要表達的功能信息或操作提示。例如設計圖標“發現”，我們會想到放大鏡、指南針、眼睛、飛機、星球等，可以都畫出來進行選擇，這一階段也稱為頭腦風暴階段。但最終我們設計師選擇什么來表達呢？這個時候我們不僅需要從普通角度進行思考，也要通過

分析行業角度

、以及

產品自身角度

進行思維發散。

通過三個不同角度，完成詞語到圖形的轉化構思

(2).草圖

草圖是設計師

將想法轉化為可視化圖形

的第一步。在紙上快速繪制草圖，可以幫助設計師迅速探索多種構思，并在數字化之前收集靈感。在繪制草圖時，設計師應注重

簡潔性和可識別性

，避免過于復雜的細節。同時，草圖還應具有一定的抽象性和概括性，以便在后續的設計中進行靈活調整。

繪制抽象與概括的草圖

3. 細節處理

圖標設計的細節處理是確保圖標既美觀又實用的關鍵。以下是一些關于圖標設計細節處理的建議：

(1). 風格選擇

把 icon 的外形確定下來后，就可以開始細化圖標風格了，如果不知道該采用什么風格，不如先看看自家app的風格或設計語言是什么，可以

根據app風格細化圖標風格

。比如站酷的app的頁面風格是扁平、漸變、線條，那么icon就可以按照扁平、帶線條的方向設計。

站酷app的頁面風格與圖標

(2).圖標的柵格系統

柵格系統即(Keyline)就是

把圓、正方向、三角形、長方形(縱向和橫向)合并到一起的參考物

，方便我們在設計不同圖標時進行參照對比。正確的使用刪格會

讓設計更加標準和統一

。網格以24*24為基準，可成倍放大或縮小。它是我們設計的“容器”?？蚣芸梢詭椭覀兺ㄟ^選擇畫布的一個區域來創建設計。大家在創建設計時經常會將ICON放置在框架中，這么做的原因在于以下幾點：

柵格系統及其正確用法

大小：

由于圖標的幾何形狀，它們都具有不同的高度和寬度。為了在設計中正確使用ICON，我們就應該將它們放置在大小始終相同的框架之中。

導出：

框架內的圖標需要與視覺中心對齊，這對于導出帶有框架的圖標至關重要。

組件：

如果我們使用Figma，那就需要通過創建組件來節省時間。大家可以使用“實例功能”來快速替換圖標。

使用柵格系統保證圖標大小一致、視覺平衡，同時也能方便建立組件庫

(3).圖標的一致性

我們前文提到過幾何圖形它們有視覺差，有的時候并不是說尺寸一樣，大小就一樣了，在設計過程中除了可以利用柵格系統保證圖標大小統一之外，還需要注意以下幾個方面要保證統一：

i.圓角統一：

圓角統一，就是

圖標之間有相同造型

，然后又都有圓角的，那么他們就要

保持相同的圓角曲度

，比方說下面這組圖標，圖標的外形都是正方形且它們都帶有圓角，可是它們的圓角曲度卻明顯不一樣，這樣就看起了不夠規范和專業。

ii.風格統一：

界面中同樣功能的圖標，

樣式和風格需要保持一致

，比方說這組圖標樣式，風格就保持著高度的一致，都是用的玻璃質感的磨砂材質。

iii.角度統一：

這組扁平化圖標，在右邊

相似的角度

都疊加了一個小色塊，增加了圖標的層次感，相同的角度也增加了圖標的一致性和系列感。

iv.線條粗細統一：

圖標的粗細要統一

，這樣圖標就會看起來比較精致，比方說下面的這組圖標，圖標外框線都是用的3px，圖標里面的線都是用的2px，圖標的粗細都保持一樣的粗細規律，這樣的圖標看著也是同樣的美觀和一致。

v.疏密統一：

下面是一組類似于插畫風格的圖標，圖標的風格是布線比較密集飽滿，

保證布線的疏密統一

，而三個圖標都遵循了這樣的原則，看起來出奇的統一，所以它們看起來像是一組成套圖標。

vi.透視統一：

當設計的圖標是立體時，要

注意它們的透視要統一

，就像下面的這組2.5D圖標，它們的設計透視就保持著高度的一致。

通過六組圖標學習如何保證圖標一致性

4. 命名與輸出

圖標設計不僅需要美觀、實用，還需要

符合一定的規范和標準

。以下是關于圖標設計的命名與輸出的詳細指南：

(1).圖標設計的命名規范

i.命名原則：

命名應盡量簡潔明了，

避免使用冗長或復雜的名稱

。且所有命名只能為

小寫英文字母

，不要使用中文或首字母大寫的形式。遵循統一的命名規則，確保團隊成員之間的協作效率。

ii.命名結構：

通用切圖命名：

組件_類別_功能_狀態@2x.png（例如：tabbar_icon_home_default@2x.png）。

模塊特有切圖命名：

模塊_類別_功能_狀態@2x.png（例如：bill_icon_search_pressed@2x.png）。

iii.命名結構：

控件/組件：

指獨立的可操作界面元素，如狀態欄、搜索欄等。

模塊：

通常指頁面中的部分區塊，如背景、按鈕等。

功能：

指頁面或模塊中需要操作或點擊的點。

狀態：

表示當前切圖的狀態，如默認狀態、點擊時狀態等。

ps：圖標的命名一般用英文或者拼音，如果初學者對于英文命名不好理解，那么推薦下面這個網站，它將常用圖標命名匯總非常方便。

圖標命名表與命名網站推薦

(2).圖標設計的輸出規范

i.輸出尺寸：

根據不同平臺和設備的需求，圖標可能需要不同的尺寸

。例如，iOS和Android平臺對圖標的尺寸要求有所不同。常用的網格繪制尺寸包括：16、24、36、48、64、128、512、1024等。對于啟動圖標，iOS和Android通常使用1024×1024像素的尺寸。

ii.輸出格式：

位圖格式：

PNG、JPG

等，適用于大多數應用場景。矢量格式：

SVG

，適用于需要無損縮放的場景。

GIF

格式：適用于動態圖標。

iii.輸出注意事項：

確保圖標在不同尺寸下的顯示效果清晰銳利，避免出現半個像素等情況。對于需要透明背景的圖標，確保導出時保留透明度信息。在導出過程中，

注意保持圖標的視覺一致性和平衡感

。

三、應用案例分析

1. Apple的iOS 18系統圖標

隨著iOS 18系統的發布，蘋果公司再次對系統圖標進行了更新和優化，旨在提升用戶體驗和視覺美感。iOS 18不僅延續了蘋果一貫的簡潔、直觀的設計風格，還

引入了更多現代化的設計元素

，特別是在深色模式下的表現尤為突出。此次圖標設計的更新，反映了蘋果對于細節的關注和對用戶需求的深刻理解。

(1).iOS 系統圖標設計的演變歷史

iOS 1-3 擬物設計的巔峰：

在2007年，初代iPhone問世，iOS（當時稱為iPhone OS）的圖標設計以

擬物風格

為主。蘋果通過逼真的紋理和立體感讓圖標看起來栩栩如生。

iOS 4-6 細節打磨：

隨著iOS的逐漸成熟，蘋果在iOS 4到iOS 6之間繼續使用擬物設計，但

在細節上進行了更精細的打磨

。這一時期的圖標在光影效果和材質感上有了更高的表現。

iOS 1-6的圖標設計

iOS 7-9 扁平化設計的到來：

2013年，iOS 7帶來了劃時代的

扁平化設計

。蘋果放棄了擬物化風格，轉而采用更簡潔、更現代的圖標設計。通過去除多余的陰影和高光，圖標變得更加輕盈。簡約的設計語言讓整個系統顯得煥然一新。這一轉變不僅僅是設計風格的變化，更標志著蘋果設計哲學的更新。

iOS 10-12 細節優化與動態效果：

iOS 10到iOS 12在扁平化的基礎上，

加入了更多的動態效果與視覺層次

。圖標的顏色更加鮮艷，層次感更強。例如，信息圖標變得更圓潤，而音樂圖標的顏色更加活潑。蘋果開始在圖標中融入更多的交互動畫，讓用戶體驗更加生動。

iOS 7-12的圖標設計

iOS 13-15 簡約與多樣性的結合：

在iOS 13到iOS 15之間，蘋果繼續優化圖標設計，

加入了深色模式

支持，允許用戶根據環境光線自動調整顯示效果。

iOS 16-18 多彩的個性化時代：

進入iOS 16，蘋果推出了

自定義鎖屏和小組件

功能，

圖標也開始支持更多的自定義選項。

用戶可以通過Focus模式設置個性化的圖標風格，從而更好地表達自己的個性。iOS 17更是將這種個性化設計推向了新高度，用戶不僅可以定制App圖標的形狀和顏色，還可以通過Widget讓桌面顯示更多動態信息。

iOS 13-18的圖標設計

(2).iOS 18系統圖標具體案例分析

i.主屏幕的改動

布局：

iOS 18 將會允許用戶將主屏幕上的

圖標放置在任何位置

，而不需要強制依次排列擺放

。

用戶可以在主屏幕的任意空白位置擺放 app 和小組件，可以把它們放在程序塢上方，以便快捷使用，也可以讓它們圍繞墻紙主體排布。

允許用戶自定義圖標顏色：

蘋果將允許用戶定制應用程序圖標，可以

讓用戶更改應用程序圖標的顏色

。App 圖標和小組件可通過深色或色彩效果變換外觀，用戶還可將它們的尺寸調大，創建最適合自己的體驗。比如說可以將社交軟件圖標設置為藍色、購物軟件圖標設置為橙色、銀行金融類的圖標設置為綠色等等，這樣我們可以更加直觀的對應用進行分類以及查找。

用戶可自由調節布局以及圖標的顏色

ii.Siri應用圖標

歷史演變：

最初的Siri圖標簡單而又獨特。黑色背景上，「i」字母上方的綠色圖形像一個

對話氣泡

，簡潔明了地表達了Siri作為語音助手的功能。蘋果正式收購Siri并將其集成到iOS系統之后。圖標采用了一個

麥克風

的形象，背景則是金屬質感非常強烈的圓圈，中央的麥克風帶有漸變的紫色。這一設計與當時的iOS擬物化設計風格完全一致。第三和第四版圖標繼續沿用麥克風形象，但設計變得更加簡潔，更符合開始流行起來的

扁平化

設計趨勢。從2016年開始，Siri圖標的麥克風移除并被

彩色的音頻波

取代，進一步強調Siri的聲音識別和處理能力。2017年之后，Siri圖標開始以

球體形狀

呈現，內部是多層漸變色組成的動態光芒，給人一種未來感和科技感。

iOS 18的更新：

如果你有注意到市面上五花八門的AI產品，你會發現，這些 AI 產品的品牌標志設計也遵循了這一目標，大多數都具有相同的特征：

不構成威脅、抽象、簡單和非擬人化

。從這一「創新」改變來看，重新設計的Siri標志更加符合這一個性化要求。

Siri的歷史演變、新版Siri圖標、Siri其他AI產品的圖標對比

iii.實時生成表情符號

Genmoji是蘋果公司在iOS 18系統中引入的一項全新功能，它利用

生成式AI技術

，

讓用戶通過簡單的文本描述就能自動生成獨特的表情符號

。比如在發送短信的時候，可以根據當時聊天的情形實時創建新的表情符號。這些表情符號不僅能夠反映你的心情和個性，還能適應不同的對話和場合。

如何使用Genmoji

(3).iOS 18系統圖標設計未來展望

隨著技術的不斷進步和用戶需求的變化，iOS系統的圖標設計也將不斷創新和發展。未來可能會有更多

個性化和動態化

的圖標設計出現以滿足不同用戶的需求和偏好。同時隨著人工智能和機器學習技術的發展圖標設計可能會

更加智能化和自動化

從而提高設計效率和質量。無論如何變化iOS圖標設計都將繼續秉持簡潔、一致、高辨識度和視覺吸引力的原則為用戶提供更好的使用體驗。

2.優秀圖標網站推薦

通過前面的文章學習，相信大家已經對圖標設計了如指掌了，那么作為一名合格的設計師，我們如何利用好的設計資源進行提效呢？以下是一些優秀的圖標設計網站推薦：

(1).IconFinder

特點：

擁有龐大的圖標庫，包含超過89萬個圖標和17936個圖標集。支持多種格式下載，包括PNG、SVG、CSH等。部分圖標收費，但免費圖標數量也相當可觀。

(2).IconPark

特點：

字節跳動旗下的一款圖標下載網站，相比Iconfont，圖標種類不算太多，但圖標的規范非常統一，也可在右側的操作欄更改圖標屬性，另外還有免費的插畫庫可供使用。

(3).Iconfont

特點：

iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站，給我們平時工作提效不少，造福了不少的設計師。

(4).IKonate

特點：

Ikonate是一款可以在線編輯的圖標網站，涵蓋了常用的一些圖標，可以調節線條的粗細和大小，導出的格式是SVG。

(5).Iconduck

特點：

Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇，儲備夠豐富。

(6).Icon8

特點：

Icon8是一個專注于提供高質量圖標和設計資源的平臺。這里的圖標涵蓋了扁平化、線條、顏色等多種風格，都是由專業設計師和插畫師手繪制作，確保了其獨特性和高品質。除了豐富的圖標資源，Icon8還提供了字體、照片、音效、視頻、插圖等多元設計資源，滿足各種項目的需求。

推薦的六個圖標網站

此外，在選擇這些圖標設計網站時，還需要注意以下幾點：

版權問題：

確保所選網站的圖標資源符合您的使用需求，特別是商業用途時要注意版權限制。

格式兼容性：

根據項目需求選擇合適的圖標格式，如PNG、SVG等。

更新頻率：

選擇那些定期更新圖標資源的網站，以獲取最新的設計趨勢和素材。

總結與展望

圖標設計是UI設計中不可或缺的一部分，它要求設計師具備良好的審美觀、對用戶的深刻理解以及不斷的創新能力。通過遵循設計原則、掌握設計技巧、應對挑戰并關注未來趨勢，設計師可以創造出既直觀又吸引人的圖標，為用戶提供更優質的體驗。在未來，UI設計將繼續發揮其重要作用，成為連接用戶與數字世界的橋梁。設計師們需要注意以下三個未來圖標設計的發展方向：

技術影響：

隨著AR/VR等新技術的應用，未來的圖標設計可能會變得更加互動和個性化。新技術的應用將為圖標設計帶來更多的可能性和挑戰。

用戶需求變化：

未來的圖標設計可能會更加注重個性化和互動性。未來的設計師需要更多地考慮到用戶的個性化需求和使用場景。

人工智能：

AI輔助設計工具可以幫助設計師更快地生成和優化圖標方案。人工智能的發展將為設計師提供更多的工具和支持，幫助他們更高效地完成工作。

設計師們只有不斷學習和進步，才能在激烈的競爭中保持領先。持續學習不僅是個人成長的需要，也是行業發展的需求。

作者：阿琳01
鏈接：https://www.zcool.com.cn/article/ZMTY0NjM2MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(16)

192025-3

解鎖B端按鈕設計10大密碼

天宇 B端ui設計文章及欣賞

無法想象沒有按鈕的頁面是什么滋味，那定會像沒有方向盤的汽車，讓人不知所措吧？也無法想象按鈕設計不恰當，會給用戶帶來怎樣的困擾？

面對十萬火急的任務需求，

如果需要調動全部理性腦，深呼吸三秒，

才能找到想要執行操作的按鈕入口，我想這樣的產品設計是失敗的，是會被用戶所唾棄的。

本文將詳細剖析按鈕的神秘面紗，了解它、研究它，讓按鈕設計成為產品的得力助手，為我們的產品賦能，為我們的工作提效，下面就讓我們開啟這場神秘之旅吧!

一、按鈕的定義

二、按鈕設計的種類

三、按鈕設計的尺寸

四、按鈕的構成

五、按鈕設計的作用

六、按鈕的位置

七、按鈕的顏色

八、按鈕在UI界面的設計原則

九、按鈕設計的注意事項

十、按鈕弱化設計的六種方式

按鈕在我們生活中起著很大的作用，它就像我們的小助手一樣，幫我們一鍵開啟想要的任務，凡事都能一鍵觸達。

按鈕在UI界面中，是一種界面交互控件，通常以矩形、圓形或其他幾何形狀呈現，具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作，如提交表單、執行命令、導航頁面、切換狀態等。

按鈕一般包含文字標簽、圖標或兩者的組合，以清晰傳達其功能。

同時，按鈕在不同狀態下會呈現出不同的視覺效果，如默認狀態、按下狀態、懸浮狀態、禁用狀態等，為用戶提供操作反饋和引導。

1、Antdesign對按鈕的種類劃分：

次按鈕

常規按鈕，用于非主要動作。如果不確定選擇哪種按鈕，次按鈕永遠是最安全的選擇。

主按鈕

突出“完成”、“推薦”類操作；一個按鈕區最多使用一個主按鈕。

文字按鈕

弱化的按鈕，采用更輕量的按鈕樣式，可用于需大面積展示按鈕場景，例如下面的站酷活動頁就用了很多的文字按鈕，只有當按鈕被選中時，按鈕才會高亮選中。

圖標按鈕

圖標提供視覺線索，避免逐字閱讀按鈕文案，更高效地使用界面，讓頁面看起來更加的簡潔。

在按鈕中添加圖標

用于對按鈕含義補充解釋，提高按鈕識別效率。

2、按鈕的樣式種類

按鈕的樣式可以從多個方面進行分類和設計，以下是一些常見的樣式分類：

按顏色劃分:

單色按鈕

：

按鈕背景為單一顏色，如藍色、綠色、紅色等，常用于強調按鈕的主要功能或操作。

漸變色按鈕

：

按鈕背景為漸變色，可以是線性漸變或徑向漸變，通常用于增加視覺吸引力和現代感。

透明按鈕

：

按鈕背景透明或半透明，通常用于與背景融合或突出按鈕上的文本和圖標。

彩色邊框按鈕

：

按鈕背景透明或淺色，但有彩色邊框，常用于需要突出按鈕邊界的場景。

按形狀分

矩形按鈕

：

這種是最常見的按鈕形狀，適用于大多數界面設計。

圓形按鈕

：

按鈕形狀為圓形，通常用于表示播放、暫停等操作，或用于具有特定功能的圖標按鈕。

圓角按鈕

：

按鈕形狀通常為圓角矩形，常用于需要柔和視覺效果的場景。

自定義形狀按鈕

：

根據設計需求，按鈕可以是任意自定義形狀，如星形、心形等，常用于創意設計或特定主題的界面。

按邊框分

無邊框按鈕

：

按鈕沒有邊框，背景和文本直接顯示，常用于簡潔的界面設計。

細邊框按鈕

：

按鈕有細邊框，常用于區分按鈕與周圍元素，同時保持界面的簡潔性。

粗邊框按鈕

：

按鈕有粗邊框，常用于強調按鈕或與背景形成強烈對比。

虛線邊框按鈕

：

按鈕邊框為虛線，常用于表示輔助操作或非主要功能。

按圖標分

圖標按鈕

：

按鈕上只有圖標，沒有文本，常用于表示通用操作或節省空間的場景。

圖標+文本按鈕

：

按鈕上既有圖標又有文本，圖標通常位于文本左側或上方，常用于清晰表達按鈕功能的場景。

按陰影樣式分

無陰影按鈕

：

按鈕沒有陰影，常用于簡潔或平面風格的界面設計。

輕微陰影按鈕

：

按鈕有輕微的陰影效果，常用于增加按鈕的立體感和層次感。

明顯陰影按鈕

：

按鈕有明顯的陰影效果，常用于突出按鈕或與背景形成強烈對比。

動態陰影按鈕

：

按鈕的陰影效果會隨著鼠標懸停或點擊等交互動作而變化，常用于增加交互體驗的趣味性。

按動畫種類分

無動畫按鈕

：

按鈕沒有動畫效果，常用于簡潔或傳統的界面設計。

懸停動畫按鈕

：

當鼠標懸停在按鈕上時，按鈕會有動畫效果，如顏色漸變、邊框變化、圖標旋轉等，常用于增加交互體驗的趣味性和吸引力。

點擊動畫按鈕

：

當點擊按鈕時，按鈕會有動畫效果，如縮放、震動、波紋等，常用于增加交互體驗的反饋感。

馬蜂窩的功能主按鈕，在點擊的時候都會產生動畫，交互感十足。

加載動畫按鈕

：

當按鈕處于加載狀態時，按鈕會有加載動畫效果，如旋轉圖標、進度條等，常用于告知用戶操作正在進行中。

3、按鈕的幾種狀態

3.1 默認按鈕

：

按鈕的初始狀態，通常具有正常的顏色、形狀和文字顯示，等待用戶操作。

3.2 待激活狀態按鈕：

待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用，用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態，并引導用戶進行下一步操作。

3.3 點擊狀態按鈕：

當用戶點擊按鈕時，按鈕會呈現按下的狀態，通常通過改變顏色、形狀或添加陰影等方式來表示。

3.4 禁用按鈕：

在某些情況下，按鈕會處于禁用狀態，無法進行操作，通常會以灰色或半透明的方式顯示，提示用戶當前操作不可用。

3.5加載狀態按鈕：

加載狀態按鈕通常用于指示某個過程正在進行中，例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理，而不是卡住或出現錯誤。

3.6危險提示狀態按鈕：

危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果，例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性，以避免誤操作。

下邊這兩組彈框就是運用了危險按鈕，來提示客戶未來即將面臨的風險，警示作用非常的明顯。

1、 Web端的按鈕尺寸建議

在Web端，按鈕尺寸沒有固定標準。不過，一般來講，按鈕的高度常在32px-48px之間，寬度可根據內容靈活設置，但最好不要小于48px，這樣方便用戶用手指（觸屏設備）或鼠標點擊。像一個簡單的“提交”按鈕，寬度可能是80px左右，高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適，易于交互。

2、麻省理工觸摸實驗對按鈕尺寸的指導

麻省理工觸摸實驗室通過對人類指尖的研究，得出了關于界面按鈕大小設計的一些重要參考數據。

對于食指，平均寬度在16至20毫米，指腹觸摸區域尺寸為10至14毫米，指尖觸摸區域尺寸為8至10毫米；對于拇指，平均寬度為25毫米，指腹觸摸區域尺寸為12至16毫米，指尖觸摸區域尺寸為10至12毫米。由此建議，食指觸摸的按鈕應保證在8毫米×8毫米以上，且控件間距應保證至少在1毫米以上；拇指觸摸的按鈕應保證在10毫米×10毫米以上，且控件間距應保證至少在2毫米以上。

該研究還指出，大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標。

3、 iOS對按鈕尺寸大小的規范

從按鈕圖標尺寸來看，根據蘋果官方設計指南，iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt，用于小型按鈕，如導航；標準圖標為32×32pt，用于普通按鈕，適合次要操作按鈕；大圖標是 40×40pt，用于寬大按鈕；特大圖標則為48×48pt，用于特大按鈕。不同設備屏幕尺寸也有對應的建議圖標尺寸，如iPhoneSE建議24pt，iPhone14及iPhone14Pro建議32pt，iPad 建議40pt 。

在最小觸摸區域方面，iOS規定最小觸碰區域為44×44pt，這種尺寸一般適合主要操作按鈕。

UI按鈕的組成主要包括以下幾個關鍵元素：

1、圓角

圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕，如4px圓角；圓角越大，越有親和力，人眼往往不喜歡非常鋒利的物體，所以通常不建議使用0圓角的按鈕樣式，根據我大量的體驗，我發現市面上確實也是帶圓角的按鈕居多些。

2、圖標

圖標用于直觀表達按鈕的功能或狀態，如加載中、編輯等。圖標的設計應與整體頁面風格一致，并確保其含義明確易懂。

3、內間距

內邊距能夠擴大按鈕的可點擊范圍，幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然，你也可以根據你設計的實際情況做適當調整，規矩不是死的。

4、容器

容器是包含所有視覺和交互元素的框架，包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。

5、邊框

邊框定義了按鈕的邊界，常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。

6、文案

文案是按鈕上的文字描述，用于表達按鈕的含義和功能。文案應簡潔明了，易于理解，同時具有一定的吸引力。

7、背景

背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。

8、投影

投影用于凸顯層級關系，幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用，以打造更好的視覺體驗。

佐糖首頁為了促進轉化，特意將“開通會員”的按鈕用投影凸顯處理，帶投影的按鈕明顯有向前走的感覺，比沒有投影的按鈕看起來更加顯眼，小小投影在頁面中不僅起到增加空間感的作用，還起到了業務強調的作用，已經不僅僅是樣式的一個承載了。

這些元素共同作用，不僅提升了按鈕的功能性，還增強了其美觀性和用戶體驗。在設計UI按鈕時，應綜合考慮這些因素，以確保按鈕既美觀又實用。

Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動，并幫助用戶防錯。

1、觸發操作

1.1提交與確認：

在表單填寫場景中，如用戶注冊、登錄、信息提交等，按鈕用于觸發提交或確認操作，將用戶輸入的信息發送給系統進行處理。

1.2執行功能：

在各類軟件中，按鈕是執行具體功能的主要方式，如在圖像編輯軟件中，“裁剪”“旋轉”“調整顏色”等按鈕，可讓用戶快速實現相應功能。

2、導航跳轉

2.1頁面切換：

在多頁面的應用或網站中，按鈕可實現頁面之間的切換，如網站的首頁、產品頁、關于我們頁等，通過點擊按鈕，用戶能方便地瀏覽不同頁面內容。

2.2菜單展開與收起：

用于控制導航菜單的展開與收起，節省頁面空間，提高界面的整潔度和易用性。

3、狀態控制

3.1顯示與隱藏：

可用于控制某些元素的顯示與隱藏，如在電商網站中，點擊“查看更多商品詳情”按鈕，可展開隱藏的詳細商品信息。

飛書中的這個小小按鈕，它承載著隱藏折疊的功能，讓頁面看起來更加的簡潔有序。

3.2啟用與禁用：

在某些功能需要滿足一定條件才能使用時，按鈕可用于表示該功能的啟用或禁用狀態，如在未填寫完必填項時，“提交”按鈕處于禁用狀態，無法點擊。

中國移動云盤的登錄頁就是這么設計的，當前面信息沒有填完，后面的登錄按鈕始終是禁用的狀態，只有當信息填完，且填寫正確，按鈕才會亮起。

4、提供反饋

4.1 操作反饋：

當用戶點擊按鈕后，按鈕會通過顏色、形狀、動畫等方式的改變，向用戶提供操作反饋，告知用戶系統已接收到操作指令。

4.2 引導提示：

在一些復雜操作或新功能引導時，按鈕可作為引導提示的一部分，告知用戶下一步操作，如在新手引導流程中，突出顯示“下一步”按鈕。

心島日志的新手指引中就是這樣設計的，按鈕在其中起了很重要的指引作用。

5、數據交互

5.1 數據篩選：

在數據展示界面，如表格、列表等，按鈕可用于對數據進行篩選，方便用戶快速找到所需信息。

釘釘打卡這個界面中，多虧有了日、周、月的篩選按鈕，才讓數據篩選變得如此便捷。

5.2 數據排序：

通過點擊“按時間排序”“按銷量排序”等按鈕，用戶可對數據進行重新排序，以滿足不同的查看需求。

6、品牌傳達

很多產品的按鈕顏色都是與它的品牌色高度一致的，它既是按鈕，又是品牌色的傳遞大使。

網易云音樂的按鈕色用的網易紅，釘釘打卡的按鈕用的騰訊藍，都是在傳遞自己的品牌色，同時也是在進行指令的傳達。

在日常設計中，頁面無疑少不了按鈕位置的擺放，那么按鈕放置在什么樣的位置合適，這也是一個值得深思的問題，也許我們已經司空見慣了按鈕的位置擺放，但是我們知道它為什么要放這里或者那里嗎？下面我們來看下這幾種設計模型，讓它告訴我們，為什么，在特定場景下，按鈕位置要這么放？

1、設計依據 – Z型視覺模型

1.1 原理含義

Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。

它的布局遵循字母Z的形狀，指用戶的瀏覽路線——從左到右，從上到下的的視覺運動軌跡。

首先，人們從左上角到右上角進行掃描，形成一條水平線；第二步，向頁面的左下側，創建一條對角線；最后，再次向右轉，形成第二條水平線，當觀眾的視角以這種模式移動時，它形成一個虛構的“Z”字形。

1.2 視覺區域

區域1：位于頁面左上角，是用戶視線最先關注的區域，通常放置最重要的信息，如網站標志、導航欄等，能第一時間吸引用戶的注意力并讓用戶對頁面內容有初步的整體認知。

區域2：在區域1的右側，用戶的視線在水平移動時會經過該區域，可放置一些與區域1相關的輔助信息或次要的導航元素等。

區域3：位于頁面中部偏左，當用戶視線繼續向下移動時會關注到該區域，通常用來展示頁面的核心內容，如產品介紹、文章主體等。

區域4：在頁面的右下角，是用戶視線的終點區域之一，可放置一些重要的操作按鈕或補充信息等，以吸引用戶在瀏覽完主要內容后進行進一步的操作或獲取更多信息。

1.3 應用案例

在電商網站中，商家會把熱門推薦或主打產品放在區域1和區域3，以吸引用戶的注意力。在產品詳情頁面，將“加入購物車”“立即購買”等按鈕放在區域4，方便用戶在瀏覽完產品信息后進行購買操作。

天貓商城就是這樣做的，把網站的LOGO圖放置在左上角（區域1），把產品圖放置在左下角（區域3），最后在用戶瀏覽了全部頁面之后，在右下角（區域4）放置購買按鈕，引導用戶下單。

在這個帶有銷售場景的頁面設計中，

購買按鈕放置在右下角符合用戶瀏覽習慣，也符合Z型視覺模型。

在B端應用軟件中，可能運用的功能比較多，按鈕也比較多，通過大量分析和觀察發現，它們

大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。

騰訊云是這樣處理的，中國移動網盤是這么處理的，看似巧合，其實也有它合情合理的一面，因為每一個動作的開始和結束都會更加的引人注意。

這就跟人們每次入職一個新公司一樣，剛進去時會特別賣力、小心，后面時間長了，也就形成免疫，習慣了，但是當最后要離開這家公司的時候，最后心情又會特別復雜，回想起自己在這里成長的歲月，就會心生很多的感慨，也會特別的記憶深刻。

也許這也是為啥很多頁面設計，喜歡

把重要的按鈕放置在每次視覺運動線的起點或者終點吧！

按鈕的顏色在界面中不僅起到視覺點綴的作用，同時也是按鈕狀態的一種呈現和反饋。

按鈕顏色不是千篇一律的品牌色，它也經常需要根據業務場景的不同，更換顏色，比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕，不同的按鈕在顏色設計上都會有所區別。

此外，在設計按鈕顏色時，有一些基本規范。

首先，從功能角度看，

主要按鈕通常會使用比較突出的顏色，

像鮮艷的藍色（如#007BFF），這是因為藍色醒目又不會過于刺眼，能引導用戶去點擊。次要按鈕（如取消、返回）的顏色會稍淡一些，比如淺灰色（#ccc），讓用戶知道這是相對次要的操作。

從顏色搭配來說，按鈕顏色要和背景色有足夠的對比度，方便用戶識別。比如背景是白色，深色按鈕就會很清晰；如果背景顏色較深，那按鈕可以用淺色或者高亮度顏色。

另外，顏色的選擇也要考慮產品的風格和使用場景。例如，在一個游戲軟件里可能會使用更活潑的色彩，像紅色、橙色；而在辦公軟件里，通常會采用比較沉穩的色調，如藍色、黑色。

1、可識別性

1.1 視覺清晰：

按鈕應采用用戶熟悉的設計樣式，如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。

1.2 文字明確：

按鈕上的標簽應準確、簡明直接地介紹其功能，避免使用過于通用或模糊的表述，讓用戶清楚點擊后會發生什么。

2、易操作性

2.1位置合理：

將按鈕放在用戶期望看到的地方，如遵循F型或古騰堡原則，在頁面的視覺焦點區域放置重要按鈕。

2.2尺寸適宜：

按鈕大小應反映其在屏幕上的優先級，更大的按鈕用于更重要的操作，同時要適配用戶的手指，避免誤觸。

3、一致性

3.1 順序得當、邏輯一致：

按鈕的順序應反映用戶與界面之間交互的邏輯，如“上一步”按鈕通常在左邊，“下一步”按鈕在右邊。

3.2 狀態樣式一致：

按鈕應具有一致的狀態樣式，如默認、按下、聚焦、禁用等，一個產品中，這些狀態樣式要高度的一致，不能在這個頁面按鈕樣式是這樣的，跑到另一個頁面，樣式又發生了改變。

著名的格式塔心理學也是這么認為的，它強調人對事物的理解是基于整體的、有組織結構的，如果按鈕設計做到一致性，對提高產品的整體性是有非常大的改進的。

4、簡潔性

4.1 避免過多

避免在一個界面中使用過多的按鈕，以免讓用戶感到無所適從，應優先考慮最重要的操作。

4.2 功能單一

每個按鈕應盡量只執行一個主要功能，避免一個按鈕承載過多復雜的操作，降低用戶的認知成本。

希克定律指出，人的決策時間會隨著選擇的增加而增加。在按鈕設計中，

簡潔的設計能減少用戶的選擇和認知負擔

，使用戶能更快地做出決策并執行操作。

5、美觀性

5.1 風格統一

按鈕的設計風格應與整個UI界面的風格保持一致，包括顏色、形狀、字體等方面，形成統一的視覺體系。

5.2 對比協調

在保持整體協調的基礎上，通過對比突出重要按鈕，如使用高對比度的顏色、較大的尺寸等，吸引用戶的注意力。

情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息，增強用戶和產品的情感連接。

6、要符合習慣

奧斯卡·王爾德說過：“習慣一旦養成，便很難改變。”

所以我們在設計按鈕的時候，一定要符合人性的習慣，而不是試圖改變人們的習慣。

1、按鈕設計要有分組意識

帶有分組的按鈕擺放，讓人看起來總是更加的有序，也更利于用戶進行操作，面對同類型的功能操作點無需跳躍著去尋找，能很快在相似功能操作區域找到。

360的分組意識很強烈，三個不同區域的圖標按鈕樣式都做了明顯的區分，讓界面看起來更加有序，操作起來也更加的便捷。

2、按鈕排列視覺上要有主次

切不可一行按鈕中出現多個高強調的按鈕，Antdesign對這個也做了詮釋，會對用戶的行為進行錯誤的引導，也不利于聚焦。

通義這個頁面雖然有多個選中的按鈕，但是沒有全部用高強調的按鈕，只有強推薦的操作“開始錄音”才用了強按鈕，其它通過相對淺的顏色做了弱按鈕選中處理，視覺上主次分明，信息主次表達上也清晰可見。

3、不要在按鈕中放置兩個圖標

當一個按鈕同時兼顧兩個交互動作的時候，一定要區分設計，不能赤裸裸的展示在一個按鈕中，而不做任何區分。

4、返回按鈕宜放置在左邊

具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前，例如上一步。

5、按鈕文字不宜太長

簡短的文字更易被用戶閱讀和記住，在一個按鈕上最多不超過5個文字，重要的按鈕一般

使用2~4個字。

? 用純灰色文字的弱化按鈕

? 用灰色邊框＋灰色文字的弱化按鈕

? 用顏色邊框+顏色文字的弱化按鈕

? 用灰底+灰色文字的弱化按鈕

? 用淺色底+顏色文字的弱化按鈕

? 用純顏色的弱化按鈕

通過本篇文章的探討，我們深入了解了B端按鈕設計的九大核心要素。從按鈕的基本定義到Antdesign的分類，再到尺寸、構成、作用、位置和顏色等細節，每一部分都是提升用戶體驗的關鍵。

按鈕設計不僅關乎美觀，更影響著用戶的操作效率和滿意度。

在UI界面中，遵循設計原則和注意事項，確保按鈕既實用又具有吸引力，是每位設計師的職責。

希望本文能為設計師們提供有價值的參考，激發更多創新靈感，共同推動B端產品的交互設計向更高水平發展。

作者：姝斐suphie
鏈接：https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(22)

192025-3

馮.雷斯托夫效應 | 設計師需要知道的設計原則！

天宇設計思維

前言

在我們的日常生活中，心理學的影響無處不在。它像一把神奇的鑰匙，能打開人們內心深處的秘密。作為設計師，我們更應該掌握并運用心理學，將其融入我們的設計中，從而創造出更具有吸引力和影響力的作品。

設計并不僅僅是形狀、顏色和布局的組合，更是對人類心理的探索和解讀。我們的每一個設計決策，都與用戶的心理狀態和認知過程息息相關。如何抓住用戶的眼球、引發他們的興趣、引導他們的行為，這些都是我們需要深入研究的課題。

在眾多的心理學原理中，馮·雷斯托夫效應（Von Restorff Effect）是一個值得設計師們關注的設計法則。這個效應揭示了一個有趣的現象：特殊的東西往往比普通的東西更容易被人記住。這就意味著，在設計中，我們要制造一些“特殊”的元素，使它們能夠從眾多的信息中脫穎而出，成為用戶關注的焦點。今天筆者就帶大家了解一下設計中常用的心理學之一馮·雷斯托夫效應。

分享目錄

一、關于馮.雷斯托夫效應

二、馮.雷斯托夫效應對設計的影響

三、在設計中的應用

四、常見問題及解決方式

五、結語

一、關于馮.雷斯托夫效應

1.產生背景

在1933年的德國，一個名叫海德維希·馮·雷斯托夫的醫生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時，他們的記憶是如何運作的。通過精心設計的對比實驗，她發現了一個令人驚奇的現象：在一組物品中，那個最特別的物品總是更容易被人們記住。

這一發現為我們揭示了一個核心事實：特別的事物更能吸引我們的注意力，并在我們的記憶中留下深刻的印記。想象一下，在一組物品中，如果有一個被聚光燈照亮，那么相比其他未被照亮的物品，它無疑會成為人們關注的焦點，從而在記憶中留下更深的痕跡。

這個人類行為和記憶的規律后來被命名為“馮·雷斯托夫效應”。這一效應不僅僅是一個簡單的觀察，它實際上是人類行為學和心理學領域的一項重要研究成果。隨著時間的推移，這一效應逐漸被應用于美學和設計領域，為設計師們提供了全新的視角和工具，以創造出更具吸引力和影響力的作品。

自馮·雷斯托夫效應被正式確立命名以來，眾多科研學者在此基礎上進行了更深入的研究，他們不僅剖析了這一效應的內在機制和影響因素，還探討了其在不同情境下的應用。隨著研究的深入，對于這一效應的理解也在不斷加深，并衍生出了許多其他的理論和學術觀點。

2.融入設計行業

馮·雷斯托夫效應為我們提供了一個獨特的視角，幫助我們更好地理解人類記憶的運作方式。通過運用這一原理，我們可以在設計中有意識地創造出令人難忘的元素，從而與觀眾建立更深刻的聯系。無論是在廣告、品牌推廣還是產品設計中，突出特別的元素都是一種有效的策略，可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。

馮·雷斯托夫效應，又被稱為隔離效應或新奇效應，揭示了人們在記憶中的偏好。當情境或經歷中出現與眾不同的刺激時，這種效應尤為明顯。

在當今信息爆炸的時代，用戶往往沒有耐心去仔細查找信息，而是快速掃視。因此，設計師需要巧妙地運用萊斯托夫效應，使關鍵內容從繁雜的信息中脫穎而出，吸引用戶的目光。

統一性是設計的基礎，但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素，我們可以創造出與眾不同的視覺效果，引導用戶的視線。通過巧妙地突出關鍵內容，我們能夠更好地與用戶溝通，引領他們的注意力，為業務創造更大的價值。

二、馮.雷斯托夫效應對設計的影響

1.背景不同強化視覺

在界面設計中，我們常常會遇到這樣的情況：在同類型的元素中，某一元素與其他元素存在顯著差異，這種現象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象，我們可以利用環境差異來提高其識別度和記憶度。這種手法在UI設計中被廣泛應用，它利用了馮·雷斯托夫效應，能有效吸引用戶點擊。

例如淘寶底部標簽欄中的四個ICON，唯獨首頁的第一個ICON（品牌logo）風格與眾不同。即使離開了該頁面，這個特殊的ICON依然讓人印象深刻，餓了么第二的圖標也是如此。因此，我們在設計界面時，若想吸引用戶的注意或提高點擊量，可以打破常規，讓特定元素在同背景下脫穎而出。

再比如下圖的個人中心界面，功能入口模塊均采用ICON展示，而游樂場模塊卻采用了特殊的布局和設計。因此，當用戶進入個人中心時，最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時，需要特別設計的原因。

2.經驗不同強化記憶

當遇到與過去經驗顯著不同的情況時，我們的大腦會產生一種特殊的效應，這種效應被稱為“經驗不同”的效應。例如，在騎自行車的過程中，我們通常習慣于左手控制左把手，右手控制右把手。但是，如果我們嘗試用雙手交叉的方式來騎車，結果很可能會摔倒。從此以后，每當我們聽到或描述有關騎車摔倒的事情時，我們都會立刻想起那次“經驗不同”的嘗試。

同樣地，淘寶和京東在618、雙十一等大型促銷活動時，會選擇重新設計他們的首頁。與往常的設計相比，這些新的首頁設計通常會增加更多的促銷入口，甚至改變ICON的風格。從馮·雷斯托夫效應的角度來看，這種與以往不同的設計能夠更好地吸引用戶的注意力，加深用戶的記憶，并擴大活動對用戶的影響力。

三、在設計中的應用

1.功能隔離提高效率

在視覺層面難以實現強烈差異化時，我們可以通過功能來實現有效的隔離。以微信為例，其置頂功能允許用戶將好友或群聊消息置于頂部，從而與其他信息區分開來。這種設計確保了關鍵信息的優先級，使用戶能夠更快速地找到和關注所需內容。通過巧妙地運用功能，我們可以輕松地解決視覺上的一致性與差異化之間的矛盾，為用戶提供更加流暢和個性化的體驗。

2.動效加強引導

靜態頁面容易讓人視覺疲勞，動效能夠更加生動有趣地展示內容，引導用戶更加關注頁面。相較于被動接受信息，動效能夠更加有效地吸引用戶注意。

3.背景聯動吸引目光

隨著Banner自動輪播的普及，用戶對其的吸引力逐漸降低。面對不斷變化的廣告，用戶不再耐心地逐個瀏覽。當無法獲取所需信息時，他們的視線會迅速轉向其他區域。

為了應對這一挑戰，騰訊視頻首頁的Banner采用了背景聯動的形式。這意味著頭部背景色會根據Banner圖片的色調進行變化，從而擴大了內容的變化空間。這種設計不僅使廣告更加引人注目，還使用戶更容易被吸引并保持關注。

4.icon強化加強視覺感知

頻道頁的入口方式多種多樣，金剛區icon無疑是最優選擇。若要突出展示某些業務功能，單一的icon配合動效可有效吸引用戶關注。此策略簡單高效，有助于用戶快速找到所需內容。

5.內容強化凸顯價值感

在設計界面時，我們追求的是在有限的空間內展示更多的有效信息，避免信息的無效重復。但在電商平臺中，尤其是涉及到利益點時，我們需要確保信息具有足夠的價值感和吸引力。

以智行APP開通會員為例，領神卡作為核心賣點被突出展示，采用了平鋪展開的方式，從而突顯其價值。相對其他權益則相應地進行了弱化處理，以保持整體信息的清晰度和重點。這樣的設計既充分利用了屏幕空間，又確保了用戶能夠快速了解到核心的利益點。

6.分層隔離提高信息層級

頁面信息層次分明，信息層級越高，用戶感知越強烈，越能吸引注意。例如，模態彈窗處于最上層，與內容層完全隔離，用戶無法忽視。其次是非模態懸浮層，與內容層隔離，但不影響用戶操作。還有側邊懸浮按鈕、頂部或底部懸浮橫條等。

四、常見問題及解決方式

1.本末倒置的危險

受“危險按鈕”的影響，過去設計師常常給予負向情緒操作很高的視覺層級，例如退出登錄。這樣的設計意圖是警示用戶操作危險，但視覺上卻過于強調，甚至有些“喧賓奪主”。近年來，移動端設計中這種矛盾逐漸減少，但仍然存在。與其強調操作的難度和危險性，不如考慮如何讓用戶自然地忽視這些操作，減少不必要的干擾。從馮·雷斯托夫效應來看，這種設計方式有本末倒置之嫌，應盡量避免。

2.什么都突出等于什么都不突出

新手設計師常常會遇到想要突出所有元素，但最終無法突出任何一項的問題。頁面中的特異點應該屬于少數，如果所有元素都想做得不一樣，都會讓頁面整體視覺效果崩潰。因此，在設計中要學會取舍，選擇最重要的元素進行突出，才能達到最佳的視覺效果。

五、結語

總的來說，將馮·雷斯托夫效應運用到設計中，能幫助我們創造出更具吸引力、更容易被記住的設計。但請記住，任何設計決策都應以用戶為中心，了解他們的需求和心理是關鍵。只有這樣，我們才能真正創造出打動人心的設計。

作者：大漠飛鷹CYSJ
鏈接：https://www.zcool.com.cn/article/ZMTYzMjYwNA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(18)

192025-3

新中式海報這樣改，秒變吸睛神器！

天宇平面設計

作者：召物少年
鏈接：https://www.zcool.com.cn/article/ZMTY1MDgwNA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(14)

182025-3

一個小彈窗引發的28個建議

資深UI設計者設計管理與成長

這套高顏值的質感彈窗設計方法，看了一定學會！

評論(0) 瀏覽(24)

182025-3

UI設計師是怎么做多維度競品分析的？

資深UI設計者設計管理與成長

本文為設計師提供全流程指導，深入探討多維度競品分析的方法。文章分享了如何拆解多維度，以及6種實用的分析技巧。

評論(0) 瀏覽(20)

182025-3

B端基礎 | 規范的做一套有特點的中后臺ICON

天宇 B端ui設計文章及欣賞

我與ICON的設計好像有什么不結之緣。早在2017年我就寫過一篇如果對抗APP中ICON設計同質話的問題。提出了自己的一些建議。而在之后的工作中也多次改版或設計過成套的APP應用中心的ICON和系統后臺ICON庫。ICON設計的經驗那是不得不豐富的存在。

ICON，中文翻譯為圖標。是對象的圖像表示，指用圖形指代某些名詞，如：打開、警告、愛、學校、山等。ICON，是上世紀九十年代伴隨IT 產業出現的一個技術詞匯，原指計算機軟件編程中為使人機界面更加易于操作和人性化而設計出的標識特定功能的圖形標志。

下面是我總結了這幾年設計icon的經驗結合大廠的后臺規范。給新手設計師的一些建議，都是經驗之談希望能夠幫到你。可以讓你在設計的這條路上走的越來越輕松。

第一章 ICON的設計

那位美女設計師：啊！搞什么呀，B端設計師icon還有設計，你傻不傻呀。我給你分享幾個現成的icon網站吧下載了就能用。
我：是的我也用現成的icon在很多的需求里。但是我更喜歡自己設計，自己去做。直接用現成的icon不爽嗎。嗯當然爽呀?？词悄阋雷龅母玫姆椒ê涂赡苄?。不要總把自己當美工吧，我們可以是設計師的。

做為什么師我們大概都應該知道icon作為我們界面的重要構成元素，它會在很大程度上影響我們界面的風格。甚至會影響我們品牌的調性。所以一套符合我們設計風格具有我們品牌調性的icon是很有必要的。總之你想明白一個道理，你一整個屋子都裝修好了，房間里獨獨到處都放了幾把破椅子。不難受嗎。

Ant design設計規范：圖標是 UI 設計中必不可少的組成。通常我們理解圖標設計的含義，是將某個概念轉換成清晰易讀的圖形，從而降低用戶的理解成本，提升界面的美觀度。在我們的企業級應用設計范圍中，圖標在界面設計的諸多元素中往往只占了很小的比重，在調用時也會被縮到比設計稿小很多倍的尺寸，加上在圖形素材極度豐富并且便于獲取的今天，在產品設計體系中實現一套美觀、一致、易用、便于延展的圖標體系往往會被不小心忽略掉。Ant Design 相信一整套優質的圖標對于設計質量的影響是非常巨大的，這考驗著設計師的協作能力，以及對圖形塑造的系統性思維，同時也能反映一個團隊對于細節的追求。

1、中后臺ICON的設計原則

中后臺使用的icon大部分規范平臺也好或者一有系統也好他們的設計原則基本是大同小異的。我的建議是如果你要設計一整套的icon圖標。在設計之前確定自己icon的設計原則。這個設計原則可以依照自己的界面設計風格或期望的界面設計風格以及行業屬性、自己品牌等去制定。

1-1、Ant design圖標設計原則

Ant Design 的圖標設計原則源自「確定」和「自然」，落實到圖標設計領域，一共有四個。準確、簡單、節奏、愉悅。

1-1-1、準確：

設計造型準確的圖標（保持偶數原則，去小數點）；選擇表意準確的圖標，不對用戶的認知造成困擾。

1-1-2、簡單：

在表意清晰準確的基礎上，盡量保持圖形的簡潔，不做多余的修飾。

1-1-3、節奏：

挖掘構圖中的秩序之美。

1-1-4、愉悅：

賦予適度的情感。在部分圖標設計中，會適度的注入擬人化的元素，令圖標具備生命力。

1-2、TDesign圖標設計原則

Icon 作為 UI 構成中重要的元素，它一定程度上影響整體 UI 界面呈現出的風格，TDesign 初期提供一套適用于中后臺場景的線性 Icon，以普適、通用的標準進行設計，風格契合默認 TDesign 的風格，線性、圓角。在TDesingv中設計原則為、從簡、精確、適度

1-2-1、從簡：

制作時保證參數的簡化，盡量消除小數點以及非整數的角度。處理線條以及輪廓時刪除多余的錨點，輸出時應避免出現不必要的裝飾，保持圖標的簡潔。

1-2-2、精確：

在設計時避免使用那些含義模糊的圖形，當同個事物存在多個圖形表述時，應選取最為流通的樣式，必要時進行針對性的強化。在圖標輸出時也應遵守命名規范，精確的文字描述便于他人查找。

1-2-3、適度：

單個圖標作為一個獨立的視覺個體，在線條的疏密以及圖形的搭配上要呈現適度感。在處理一些必要的高密度圖標時也要考慮線條的節奏感，讓其舒適不壓迫。系列圖標要遵守適度原則，將變化控制在一定范圍內。

發現沒大廠規范為了普世所以他們的圖標設計原則定的基本都是一樣的。只是換了一個詞而已。而且他們的大部分原則和細節都是來自平面設計里的板式設計和標志設計里的形式美法則。

2、如何規范的設計ICON

設計一套優秀的圖標設計應該簡潔明了、直觀性強、獨特性好、可識別度高、適應性廣、細節處理精細、可擴展性強，并且能夠根據用戶反饋及時改進和優化。如果要具備這些特征，那我們在設計的時候就要遵循一些特定的規范。

2-1、柵格

icon設計的柵格在大場的設計規范里面分為兩種。一種ant design設計規范里面的那種柵格。另一種是TDesign設計規范里面的柵格。我之前在做的時候是直接呀的阿里巴巴示例圖庫的上傳模板里面的柵格進行設計的不過。沒有這設計規范里面的柵格好用。

2-1-1、Ant Design柵格

Ant Design 的系統圖標都是按照 1024 x 1024 的畫板進行制作的。

出血位：在圖標的設計過程中預留出血位的做法，可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險；同時在設計過程中，也為設計師把握圖標間平衡留下了進退的余地。新版的設計規格在圖形的外圍預留了 64px 的出血位，多數的圖標在設計中我們都不建議超過這個區域。

2-1-2、TDesign柵格

柵格作為圖表繪制的底層結構，是一切屬性設計的基礎。線條的長短粗細、圖標的大小比例等關鍵因素均在其基礎上制定。圖標常見尺寸為16*16；20*20；24*24；32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標繪制的統一柵格尺寸

我記得最早入行的時候畫icon就用的這種柵格。但是我不太喜歡，因為在實際的設計之中會出現好多問題。當時的我是無法解決的。

2-2、輪廓與模板

面對各式各樣的icon我們在上一步有了柵格，接下來就要處理在柵格里如何讓形狀不同的icon在視覺上大小是一致的，在視覺上是平衡的。所以轉對不同形狀的icon在柵格里所占的輪廓規范就產生了。基本這個輪廓都是一樣的。因為他是一個很基礎的東西。

但其實可能是我技術的問題。在過往的很多次設計中如果你完全按照這個輪廓去執行。做出來的icon你會發現其實在視覺上還是會存在問題的，我都會在做一次優化。不過這很大可能是我技術和設計能力的問題吧。

2-3、設計細節

即使有了規范，柵格輪廓等。但是往往我們在設計制作的時候還是會有很多的細節需要去處理的。這樣我們的設計才會更專業。因為我用ant 規范比比較多所以。我們就一起看一下ant的規范里對icon設計細節的一些建議。

在ant的圖標設計規范中，對icon圖標進行了、形式感、韻律、平衡、辨識這幾方面對我們在設計和制作icon可能遇到的問題給了一些建議。

Ant Design圖標設計建議詳情：https://ant-design.antgroup.com/docs/spec/icon-cn#%E8%BD%AE%E5%BB%93%E7%BA%BF%E4%B8%8E%E6%A8%A1%E7%89%88

3、ICON分類

以上的內容主要在探討一類icon圖標的設計。那就是中后臺的圖標設計。但其實icon圖標是有很多的分類的。交互性圖標、裝飾性圖標、說明性圖標

3-1、交互性圖標

這類圖標主要用于應用程序的界面設計，它們可以向用戶傳遞某種信息，引導用戶執行特定操作，同時也允許用戶向程序傳遞控制信息。例如，登陸注冊按鈕、開關按鈕、數量按鈕、點贊、轉發分享等都屬于交互性圖標。

3-2、裝飾性圖標

這類圖標主要用于提高頁面設計性，它們可以加深個性化設計風格，提升用戶線上體驗感，迎合受眾群的偏好，提升設計親和度。例如，符合節日需求的線上活動呼應圖標、個性化圖標等都屬于裝飾性圖標。

3-3、說明性圖標

這類圖標主要用于闡明信息，它們是區分不同功能或內容的視覺標記，簡單地說，就是對功能的解釋說明。例如，象形圖標、隱喻圖標、工具圖標和混合圖標等。

此外，根據圖標的具體功能和用途，還可以將圖標分為表意圖標（又稱解釋性圖標）和標識性圖標。表意圖標是通過原本不存在實物的符號表達某些特定的含義或操作行為，這些符號逐漸繼承了一些象形符號的特性并不斷演化。例如，“箭頭”已經從最初的“弓箭”衍生為一種特定的表意符號。而標識性圖標主要用于標識品牌、產品或服務，它們通常具有獨特的設計風格和視覺效果，以便在市場上脫穎而出。例如，蘋果公司的蘋果圖標就屬于標識性圖標。

為我以往的設計經驗里大部分都是在做B端的設計和交互工作。在我的理解里圖標就分兩類。1、規規矩矩的ICON。2、花里胡哨的ICON。就這么簡單。

第二章實戰我搞了一套ICON

再優秀的理論也只能是理論。實踐才是檢驗真理的唯一標準。這不是我說的。這是老馬（卡爾·海因里希·馬克思）說的。所以就請大家進入我的實踐過程吧。

1、需求背景

需要還是要從最初開始講。我負責的SAAS平臺要迭代換框架。然后對界面視覺交互、產品功能都迭代一個大的版本。這次設計部分的任務就我來負責。

因為是大的迭代嘛。所以這次icon設計的需求是跟著整個平臺一起走的。你要設計新的視覺還用之前的那套老icon顯示是不合適的。在者說那套icon的質量也是一個難以想象的存在。是開發直接從網上個個平臺找的。所以這次這個平臺的視覺迭代就有了搞一套適合我們界面和行業的icon圖標。

這是我們SaaS平臺的設計價值觀

2、設計原則

因為是先有了界面，要做一套配合界面的菜單icon圖標。我想我們的icon要符合整體頁面的風格。不說給界面加分了，也不破壞我辛苦做的界面視覺。

結合我們品牌的logo圖標的特點。讓我們的icon也擁有獨屬于他們自己的絲帶偶。把公司logo的設計特點加入到我們這次icon的設計原則里。

是的優美，是我們這一套icon的特點。也是從我們logo里提取出來的設計要點。然后把他運用到icon設計里。

3、規范的制定ICON的制作

規范的知道基本是使用的阿里巴巴矢量圖庫早期的那個上傳圖標模板的AI文件。為什么會選擇使用這個呢。因為我們SaaS平臺的所以icon都是從阿里巴巴矢量圖庫引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用，而不是直接切圖給他們用。

在這套圖標設計的時候，其實并沒有完全的按照大廠的設計規范進行。在很多的細節上做了調整。為的是達到更好的效果。當然。也有很多遺憾。在很多的方面并不是很標準。在下次優化設計時，會更好的去執行制定的設計原則和設計規范。

第三章拓展知識（標志設計淺談）

之所以寫這部分內容，是因為我覺得在平面設計里標志設計的知識對我們現在圖標設計是很有用的?？梢允菆D標設計本身就是適應了顯示屏后的標志設計。如果你搞懂了標志設計的系統知識，那圖標設計不就是手拿把掐的事了。標志設計就是殺雞的牛刀。

一般我們說到標識設計可能大概覽的就是會認為是品牌形象設計，也就是LOGO設計。是的我大學學的標志設計就是在講品牌LOGO的設計。但我現在理解的標志設計可能意義更廣泛。因為在很多的時候我是把標志設計的知識和原理來應用到其他的設計方面。

標志是品牌形象核心部分（英文俗稱為：logo），是表明事物特征的識別符號。它以單純、顯著、易識別的形象、圖形或文字符號為直觀語言，除表示什么，代替什么之外，還具有表達意義、情感和指令行動等作用。

LOGO、標志、徽標、商標是現代經濟的產物，它不同于古代的印記，現代標志承載著企業的無形資產，是企業綜合信息傳遞的媒介。

1、標志設計怎么來的

標志的來歷，可以追溯到上古時代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動工具上，后來就作為戰爭和祭祀的標志，成為族旗、族徽。國家產生以后，又演變成國旗、國徽。

古代人們在生產勞動和社會生活中，為方便聯系、標示意義、區別事物的種類特征和歸屬，不斷創造和廣泛使用各種類型的標記，如路標、村標、碑碣、印信紋章等。

到本世紀，公共標志、國際化標志開始在世界普及。隨著社會經濟、政治、科技、文化的飛躍發展，21世紀以來經過精心設計從而具有高度實用性和藝術性的標志，已被廣泛應用于社會一切領域，對人類社會性的發展與進步發揮著巨大作用和影響。

2、標志的作用

隨著“讀圖”時代的到來，標志以簡潔、獨特、易識別的圖形符號傳達著特定的含義和綜合信息，成為人們相互交流和傳遞信息、溝通情感、表達愿望的視覺語言。特別是在注重品牌效能與品質的今天，標志發揮著重要的作用。標志最主要的功能是以其簡潔、醒目、美觀的圖形符號傳遞信息。

2-1、區分商品

標志能夠表述某種組織、某項活動或某企業品牌的性質、服務和宗旨。標志作為一種視覺識別符號，能有效區別各種品牌給消費者的印象。也就是說，它能夠表述出個性特點，使其從眾多同類產品的標志中被區別出來。

市場上的商品花色、品種繁多。在商品的海洋里，消費者只能根據不同的標志區別同類商品的不同品牌和不同生產廠家，并以此進行比較與選擇。商業企業在經營商品時，有的也用自己的標志表示各自的經營特色。標志的這種作用是其取得法律保護的主要依據，在國際貿易中，這種作用也得到了普遍的認可。

2-2、樹立形象

標志是現代經濟的產物，它不同于古代的印記。現代標志承載著企業的無形資產，是企業綜合信息傳遞的媒介。對于企業而言，不僅要表明“我是誰”，還要說明“我怎么樣”。標志通過在不同場合、不同載體的反復出現，使人們在看到標志的同時，就能自然聯想到產品

可口可樂歐洲太平洋集團公司前總裁喬戈斯曾經說：“可口可樂成功的原因很簡單，許多制造商只熱衷于為消費者提供產品，而大多數消費者則需要產品的牌子。請記住，一聽可口可樂不只是飲料，它還是一個朋友。

2-3、品牌價值

如今的社會，享用名牌似乎成為身份的象征、地位的體現和個人魅力的表現，這就使標志有了某種精神的力量，這種精神力量代表著品牌的價值。

名牌價值是無形資產，無形資產的價值遠遠高于企業的有形資產價值和年銷售額。“可口可樂”“百事可樂”的品牌價值都達到上百億美元。標志在各個國家都受到法律的保護，從這個意義上說，名牌標志是企業的無價之寶，絲毫也不為過。

美國可口可樂公司的一位經理說，即使可口可樂工廠一夜之間被毀壞殆盡，公司也能憑借“可口可樂” 標志的聲譽從銀行立即貸款重建工廠?？梢姡瑢碛忻茦酥镜钠髽I來說，標志就是企業發展的一種依托與保證，是一筆巨大的無形資產。

2-4、美化產品

標志作為企業和產品形象的象征，它用無聲的具有美感的圖形語言宣傳著產品的質量與特色。標志設計的好壞直接影響企業和產品的信譽度。成功的標志不僅代表了產品本身，也增強了產品的魅力。

著名的香奈兒（CHANEL）的標志以簡約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。香奈兒于 1913 年由創始人加布里埃·可可·香奈兒（Gabrielle Chanel）在法國巴黎創立，其標志是由兩個背向的“C”重疊而成，圖形平衡對稱，充滿溫文爾雅、端莊聰慧之氣，

3、標志的創意原則

標志的本質是信息傳播，這是現代的標志設計的核心。標志的設計創意應該從信息入手，從功能需要出發。需要告訴大家的是什么，而不是把形式作為設計的唯一出發點。

3-1、獨特性

在標志設計中，有的人喜歡造型簡單的，這得到了大部分人的認可；而有的人則認為在簡單中可適當復雜，這要取決于實際的用途。不論簡單或復雜，需要把握一點：標志需要具備的特質是獨特。沒有哪個企業甘愿平凡，大多數企業都在竭盡所能地建立自己獨特的企業文化和市場經營特色，所以在設計標志時必須深思熟慮。

獨特性是標志設計的最基本要求。標志的形式法則和特殊性就是具備各自獨特的個性，不允許絲毫的雷同。這就要求標志的設計必須做到獨特、別致，追求創造與眾不同的視覺感受，給人留下深刻的印象。

3-2、醒目

醒目的設計是所有標志希望達到的視覺效果。優秀的標志能夠吸引人，給人以較強的視覺沖擊力。因為只有引起人的注意，才能使標志所要傳達的信息對人產生影響。在標志設計中，注重對比、強調視覺形象的鮮明與生動，這是產生醒目性的重要形式要素。

3-3、簡單容易記憶

標志要易于識別、記憶和傳播。這并不是說簡單化，而是指以少勝多、立意深刻、形象明顯、雅俗共賞。通俗性強的標志具有公眾認同面大、親切感強等特點。對于商標而言，一個易記的商標形象首先要有一個與眾不同的響亮、動聽的商標名稱，以好的商標名稱為基礎，綜合考慮商標的特點，選擇最佳方案，再進行具體的圖形設計。

3-4、標志顏色

標志色彩的配置一般有三種基本方法；

-是原色配合
原色的顏色單純、強烈、鮮艷奪目，藝術效果和傳播效果顯著。

-是同類色配合
只選擇一種顏色，采用依靠色彩明亮度變化的辦法，如用桔紅、桔黃、中黃、淺黃進行搭配，形成由淺入深的過度色視覺，能表達出動態感。

-是補色配合
這種色彩配置，對比鮮明，圖形格外醒目鮮艷，能給人以很強的視覺沖擊效果。

4、標志設計形式美法則

標志設計也是藝術設計的一種。所以他也同樣適用于我們設計里的形式美法則。用這些法則去設計你的標志或ICON讓他們的信息傳遞更準確。視覺表現更優秀。

形式美法則
標志設計是一種視覺藝術，人們在觀看一個標志圖形的同時、也是一種審美的過程。在審美過程中，人們把視覺所感受的圖形，用社會所公認的相對客觀的標準進行評價、分析和比較，引起美感沖動。

4-1、變化與統一

任何一個完美的標志圖形必須具有統一性，這種統一性越單純，越有美感。但只有統一而無變化，則不能使人感到有趣味、美感也不能持久，這是因為缺少刺激的緣，變化是刺激的源泉，有喚起興趣的作用，但變化也要有規律，無規律的變化，然起混亂和繁雜。因此變化必須在統一中產生。

4-2、對稱于均衡

均衡是在不對稱中求平穩。均衡可分為調和均衡和對比均衡兩大類，調和均衡是指同形等量，即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外，還有量的均衡、色的均衡，在標志圖形設計時必須相應考慮，以追求標志視覺張力。

4-3、節奏與韻律

節奏是韻律的條件，韻律是節奏的深化，節奏也就是“律”，這種律不僅表現在音樂上，而且反映在其他方面，當物體失去均衡則會引起運動。此種運動如有規律，則稱之為“律”。在標志圖形設計中，如果將線的長短、粗細、曲直、方位等進行不同程度的變化和巧妙組合，便會創造出不同感的“律”的形式，歸納起來分為：循環體、反復體及連續體。

4-4、調和于對比

在標志設計中，對比與調和應用極廣，如在大小、方向、虛實、高低、寬窄、長短、凹凸、曲直、多少、厚薄、動靜以及奇數與偶數的對比。對比是標志圖形取得視覺特征的途徑，調和是標志完整統一的保證。

4-5、比例與尺度

任何一個完美的圖形都必須具備協調的比例尺度。在標志圖形中常用的比率有整數比、相加級數比、相差級數比、等比級數比、黃金比等。標志設計的形式美法則，不能孤立和片面地理解，因為一個美圖形的設計，往往要綜合利用多種法則來表現。這些法則是相互依賴，相互滲透，相互穿插、互相重疊、相互促進的，隨著時代的變化，審美標準、設計手法也在不斷發展。

5、標志發展趨勢

近年來，標志設計發展越來越成瘦?？偟陌l展趨勢是由復雜到簡約、具象到抽象、色彩更多樣話、標志的發展是一個設計相互交融、設計風格的多樣化過程。設計手段是次要的，目的才是第一位的。更注重的應使其商業性。

以下標志設計趨勢內容引用自標志情報局編譯的作者為Bill Gardner是logolounge.com的創始人的《2023標志設計趨勢報告》。https://www.logonews.cn/logo-design-trends-for-2023.html

我們每年收到的所有標志清晰解讀并整理成這份報告并不是一項容易的工作。總共超過30,000個標志，對我和一群杰出的設計師來說，這就像是世界上最大規模的配對游戲。最初，我們歸納出大約60-70個組別，然后將它們進一步劃分為具有最大影響力的15個類別。

我只是通過對提交的30,000多個標志進行徹底分析（還有國際上每個重要品牌的更新和重塑）后呈現的報告。因此你要了解的是，就像任何氣象學家會告訴你的那樣，他們不能保證天氣預報的準確性。同樣，我們也無法總是預測設計師將向哪個趨勢方向發展，這就是這份報告能讓我們保持警惕并感到有趣的原因所在

01、Wildflowers(野花)；02、Bloblend(流動混合)；03、Fades(逐漸模糊)；04Foreshort(透視)；05、Thrust(推進)；06、Spirals(螺旋)；07、Sonics(聲波)；08、WireForms(線框)；09、BallCaps(球形頂端)；10、NameFills(名字填充圖形)；11、Stretchers(元素拉伸)；12、NeoStencil(噴漆模版藝術)；13、HalfAster(半星號)；14、Double Os(雙圓環)；15、Ritz(餅干)；

重新讀了一遍標志設計的內容。果然受益匪淺的感覺。還是要時常溫故而知新的。學習了大廠的ICON設計規則也是很有收獲的。

作者：彪形大漢pro
鏈接：https://www.zcool.com.cn/article/ZMTU5NTM3Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

評論(0) 瀏覽(22)

1 2 3 4 5 6 7 ... 917 »

日歷

鏈接

個人資料

藍藍設計的小編 http://m.gerard.com.cn

首頁

第一章 ICON的設計

1、中后臺ICON的設計原則

1-1、Ant design圖標設計原則

1-1-1、準確：

1-1-2、簡單：

1-1-3、節奏：

1-1-4、愉悅：

1-2、TDesign圖標設計原則

1-2-1、從簡：

1-2-2、精確：

1-2-3、適度：

2、如何規范的設計ICON

2-1、柵格

2-1-1、Ant Design柵格

2-1-2、TDesign柵格

2-2、輪廓與模板

2-3、設計細節

3、ICON分類

3-1、交互性圖標

3-2、裝飾性圖標

3-3、說明性圖標

第二章 實戰我搞了一套ICON

1、需求背景

2、設計原則

3、規范的制定ICON的制作

第三章 拓展知識（標志設計淺談）

1、標志設計怎么來的

2、標志的作用

2-1、區分商品

2-2、樹立形象

2-3、品牌價值

2-4、美化產品

3、標志的創意原則

3-1、獨特性

3-2、醒目

3-3、簡單容易記憶

3-4、標志顏色

4、標志設計形式美法則

4-1、變化與統一

4-2、對稱于均衡

4-3、節奏與韻律

4-4、調和于對比

4-5、比例與尺度

5、標志發展趨勢

分類

日歷

鏈接

個人資料

存檔

1、中后臺ICON的設計原則

1-1-1、準確：

1-1-3、節奏：

1-2-3、適度：

2、如何規范的設計ICON

2-1、柵格

2-1-1、Ant Design柵格

3、ICON分類

3-1、交互性圖標

第二章實戰我搞了一套ICON

1、需求背景

2、設計原則

3、規范的制定ICON的制作

第三章拓展知識（標志設計淺談）

2、標志的作用

2-2、樹立形象

2-3、品牌價值

3、標志的創意原則

3-1、獨特性

3-2、醒目

3-3、簡單容易記憶

3-4、標志顏色

4、標志設計形式美法則

4-1、變化與統一

4-2、對稱于均衡

4-3、節奏與韻律

5、標志發展趨勢