午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁(yè)

留白設(shè)計(jì)和UI設(shè)計(jì)準(zhǔn)則

資深UI設(shè)計(jì)者 設(shè)計(jì)管理與成長(zhǎng)

敘述留白設(shè)計(jì)準(zhǔn)則以及UI設(shè)計(jì)的排版準(zhǔn)則

這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!

天宇 平面設(shè)計(jì)

今天來(lái)繼續(xù)聊聊慢熱視覺(jué)課里的排版部分,分享一些小干貨給大家:
 
 
 
1.主體和畫(huà)面對(duì)比:
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
同學(xué)排版做的不錯(cuò),但是主體和背景的對(duì)比不足,導(dǎo)致怎么畫(huà)面有些悶悶的。 所以我們可以提亮背景,加強(qiáng)背景和麥克風(fēng)的對(duì)比這樣畫(huà)面就不會(huì)那么悶了。
 
 
像下面這些都是畫(huà)面對(duì)比不足導(dǎo)致畫(huà)面悶悶的或者層次拉不開(kāi)的問(wèn)題畫(huà)面:
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
我們可以在中間加一層亮色隔開(kāi),也可以增強(qiáng)畫(huà)面的對(duì)比:
 
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
 
 
2,整體畫(huà)面的結(jié)構(gòu)比列:
 
比如下面的這張畫(huà)面,整體可以分ABC三個(gè)部分。
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
 
問(wèn)題就在于A/C的體量太一致了,覺(jué)得整個(gè)畫(huà)面很臃腫。怎么調(diào)整呢?其實(shí)我們可以適當(dāng)調(diào)整占比,拉開(kāi)A/C的差距,比如縮小C的占比,這樣整個(gè)畫(huà)面就更有主次了:
 
 
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
實(shí)際效果,頂部的標(biāo)題和底部的信息拉開(kāi)了主次,整個(gè)畫(huà)面才有了更好的節(jié)奏感:
 
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
 
 
3.排版的延續(xù)性
 
看看下面的兩個(gè)案列:
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
左邊的排版感覺(jué),就是排版和主體元素有很強(qiáng)的分割感,右邊的排版就比較連貫。
 
 
 
 
要去除這種感覺(jué),我們需要像右邊這種,在中間區(qū)域增加一些和排版同色系的圖形或者文字來(lái)起到延續(xù)的作用,這樣整個(gè)畫(huà)面才能連貫起來(lái),不會(huì)有分割感。
 
 
 
 
4.局部排版的比例節(jié)奏
 
拿下面這個(gè)排版舉例:
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
 
他的文字和英文太相近了,看起來(lái)就像三根柱子,毫無(wú)變化:
 
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
調(diào)整的有主次變化,我們可以縮小其中一根,再加一些錯(cuò)位:
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
 
表現(xiàn)到字體排版上就是:
 
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
節(jié)奏感是不是就好多了呢?
 
 
 
 
5.排版的疏密節(jié)奏
我們來(lái)看下這一份作業(yè):
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
整個(gè)畫(huà)面非常密集,特別是背景排版全是各種小字密密麻麻布滿的整個(gè)畫(huà)面,就導(dǎo)致了整個(gè)畫(huà)面非常密集。
 
 
其實(shí)這里我們需要整體畫(huà)面你的節(jié)奏感,一般來(lái)說(shuō)我們背景的密集程度要和主體有所聯(lián)系,一般來(lái)說(shuō)我們主體是我們畫(huà)面中最復(fù)雜的部分,其余部分如點(diǎn)綴元素、背景等的復(fù)雜度都要弱與主體,這樣才能很好的突出主體。
 
 
 
我們可以用一些大塊面的字體去大面積概括畫(huà)面,不要用很小很碎的字體去堆疊:
這排版確實(shí)專(zhuān)業(yè),這次不獻(xiàn)丑了!
 
 
氣質(zhì)是不是一下就上來(lái)了呢?
 


作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTY0MDUxNg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

教你一文讀懂圖標(biāo)設(shè)計(jì)

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

引言
在數(shù)字化時(shí)代,用戶界面(UI)設(shè)計(jì)成為了連接用戶與產(chǎn)品的重要橋梁。圖標(biāo)作為UI設(shè)計(jì)中不可或缺的元素,不僅承載著信息傳遞和導(dǎo)航的功能,還直接影響著用戶的視覺(jué)體驗(yàn)和情感反應(yīng)。一個(gè)優(yōu)秀的圖標(biāo)設(shè)計(jì)能夠瞬間吸引用戶的注意力,傳達(dá)出應(yīng)用的核心功能,甚至成為品牌識(shí)別的一部分。本文將深入探討
圖標(biāo)設(shè)計(jì)的基礎(chǔ)、步驟與技巧,并通過(guò)實(shí)際案例分析
,為設(shè)計(jì)師們提供一套完整的圖標(biāo)設(shè)計(jì)指南。
(如果文中存在任何不準(zhǔn)確或遺漏之處,我也非常期待各位專(zhuān)家的指正和建議)
本文目錄
本文目錄
 
「大廠設(shè)計(jì)師」教你一文讀懂圖標(biāo)設(shè)計(jì)
 
 
 
一、圖標(biāo)設(shè)計(jì)的基礎(chǔ)
1. 定義與功能
圖標(biāo)是一種圖形符號(hào),用于代表應(yīng)用程序、功能或操作。在UI設(shè)計(jì)中,圖標(biāo)可以快速傳達(dá)信息,提高用戶的理解和操作效率。
(1).定義
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中的重要環(huán)節(jié),通過(guò)創(chuàng)造
具有高度概括性和象征性的圖形符號(hào)
來(lái)代表各種物體、動(dòng)作和概念。這些符號(hào)簡(jiǎn)潔明了,能夠讓用戶快速識(shí)別,并在軟件界面、網(wǎng)站和移動(dòng)應(yīng)用等多領(lǐng)域廣泛應(yīng)用。例如,常見(jiàn)的“保存”圖標(biāo)是一個(gè)軟盤(pán)形象,用戶一看即知這是保存文件的功能。這種直觀性是圖標(biāo)設(shè)計(jì)的核心價(jià)值所在。
(2).功能:
圖標(biāo)設(shè)計(jì)的主要功能包括
提升視覺(jué)美感、增強(qiáng)用戶交互體驗(yàn)、節(jié)省空間以及提供上下文信息
。例如,在手機(jī)桌面上,微信圖標(biāo)用兩個(gè)對(duì)話氣泡簡(jiǎn)單圖案代表了這個(gè)軟件;在界面導(dǎo)航和工具欄中,圖標(biāo)可以快速引導(dǎo)用戶執(zhí)行特定操作,例如,“搜索”圖標(biāo)通常是一個(gè)放大鏡的形象,用戶看到這個(gè)圖標(biāo)就知道可以進(jìn)行搜索操作。這種通用的圖標(biāo)設(shè)計(jì)使得用戶無(wú)需額外的學(xué)習(xí)成本就能快速上手。
具有代表性的圖標(biāo)
具有代表性的圖標(biāo)
 
2. 圖標(biāo)的分類(lèi)
圖標(biāo)類(lèi)型可以從多個(gè)角度進(jìn)行分類(lèi),以下是根據(jù)風(fēng)格、功能和交互方式等不同維度的分類(lèi)介紹
(1).按風(fēng)格分類(lèi)
  •  
    線性圖標(biāo):
線性圖標(biāo)主要為
單色線性或增加品牌色點(diǎn)綴
,使用輕量的線條勾勒,整體感受趨向于精致、細(xì)致,具有銳度感,不同的線條表現(xiàn)會(huì)帶來(lái)不同的視覺(jué)感受。
兩種具有代表性的線性圖標(biāo)
兩種具有代表性的線性圖標(biāo)
 
  •  
    面性圖標(biāo):
面性圖標(biāo)包括
單色填充、多色疊加、微漸變
等不同形式,主要通過(guò)填充顏色來(lái)表達(dá)圖形,能夠更好地傳達(dá)出圖標(biāo)的力量感和重量感,依賴于外輪廓的清晰度來(lái)提高識(shí)別度。
三種具有代表性的面性圖標(biāo)
三種具有代表性的面性圖標(biāo)
 
  •  
    輕質(zhì)感圖標(biāo):
輕質(zhì)感圖標(biāo)包括
磨砂玻璃、輕寫(xiě)實(shí)、晶白風(fēng)
等,相較扁平圖標(biāo)而言,更突出圖標(biāo)的細(xì)節(jié)刻畫(huà)和真實(shí)的質(zhì)感,增加了一些輕微的陰影或質(zhì)感,以增加層次感。
三種具有代表性的輕質(zhì)感圖標(biāo)
三種具有代表性的輕質(zhì)感圖標(biāo)
 
  •  
    擬物化圖標(biāo):
擬物化圖標(biāo)包括
2.5D、偽3D、3D建模
圖標(biāo)等,盡量將現(xiàn)實(shí)世界中的形狀、紋理、光影融入到設(shè)計(jì)中,以模擬真實(shí)物體的外觀。
三種具有代表性的擬物化圖標(biāo)
三種具有代表性的擬物化圖標(biāo)
 
  •  
    字符圖標(biāo):
字符圖標(biāo)使用
簡(jiǎn)化和通用的圖形
,如字母、數(shù)字和簡(jiǎn)單的圖形符號(hào),具有較高的識(shí)別度和靈活的適用場(chǎng)景。
兩種具有代表性的字符圖標(biāo)
兩種具有代表性的字符圖標(biāo)
 
(2).按功能分類(lèi)
  •  
    應(yīng)用圖標(biāo):
應(yīng)用圖標(biāo)是各種應(yīng)用程序的識(shí)別標(biāo)志,通常在應(yīng)用商店里下載的一些應(yīng)用程序的標(biāo)志
  •  
    頂部導(dǎo)航欄圖標(biāo):
常見(jiàn)有搜索、收藏、消息通知、掃一掃、每日簽到等
  •  
    底部導(dǎo)航欄圖標(biāo):
根據(jù)軟件的功能模塊進(jìn)行分類(lèi),常見(jiàn)有主頁(yè)、我的等一些主要的模塊
  •  
    金剛區(qū)圖標(biāo):
是整個(gè)UI界面中的核心功能區(qū)域,承載頁(yè)面的主要功能和重要信息
  •  
    表單內(nèi)圖標(biāo):
常見(jiàn)于”我的“界面中,根據(jù)產(chǎn)品類(lèi)型不同而有差異
  •  
    通用圖標(biāo):
常見(jiàn)有箭頭、睜眼、閉眼、返回、收藏等
按照功能劃分的六種圖標(biāo)
按照功能劃分的六種圖標(biāo)
 
(3).按交互方式分類(lèi)
  •  
    靜態(tài)圖標(biāo):
靜態(tài)圖標(biāo)不會(huì)隨著用戶的操作或界面的變化而改變狀態(tài)
  •  
    動(dòng)態(tài)圖標(biāo):
動(dòng)態(tài)圖標(biāo)會(huì)根據(jù)用戶的交互或界面的其他變化而改變狀態(tài),如Bilibili的三連圖標(biāo)動(dòng)效
Bilibili的三連圖標(biāo)動(dòng)效
Bilibili的三連圖標(biāo)動(dòng)效
 
3. 設(shè)計(jì)原則
學(xué)習(xí)了圖標(biāo)的基本分類(lèi)之后,設(shè)計(jì)師們?cè)谠O(shè)計(jì)圖標(biāo)的過(guò)程中需要注意
易識(shí)別性、統(tǒng)一性、簡(jiǎn)潔性
等基本的設(shè)計(jì)原則。我再給大家分享幾個(gè)icon設(shè)計(jì)的最佳原則幫助大家再UI設(shè)計(jì)中設(shè)計(jì)出完美的圖標(biāo)。
(1).圖標(biāo)設(shè)計(jì)的尺寸
最小的圖標(biāo)大小通常為12×12px
。根據(jù)行業(yè)標(biāo)準(zhǔn),在以此為基礎(chǔ)產(chǎn)生的大小值中,大部分的數(shù)值都是通過(guò)將先前的數(shù)字加倍而創(chuàng)建的。通常我們可以看到小、中、大這三個(gè)尺寸的圖標(biāo)大小。值得我們注意的是,在我們創(chuàng)建ICON時(shí),應(yīng)該以100%的比例設(shè)計(jì),這樣才會(huì)使得圖標(biāo)像素看起來(lái)比較完美。同時(shí)通過(guò)進(jìn)一步放大也可以確保準(zhǔn)確性。
  •  
    iOS平臺(tái)規(guī)范:
iOS界面的網(wǎng)格系統(tǒng)
基于4pt的倍數(shù)
。蘋(píng)果官方建議最小可點(diǎn)擊區(qū)域?yàn)?4pt,以確保用戶在操作時(shí)的準(zhǔn)確性和舒適度。因此,設(shè)計(jì)IOS圖標(biāo)時(shí)應(yīng)以此為參考,確保交互元素的可點(diǎn)擊性。
  •  
    Android平臺(tái)規(guī)范:
Android界面
使用8dp的倍數(shù)
作為網(wǎng)格基礎(chǔ),最小操作熱區(qū)要求為48dp。因此,通常建議采用48px作為常規(guī)圖標(biāo)的設(shè)計(jì)尺寸,以便在不同設(shè)備和分辨率下都能保持良好的觸控體驗(yàn)。
iOS系統(tǒng)中美團(tuán)app的圖標(biāo)尺寸
iOS系統(tǒng)中美團(tuán)app的圖標(biāo)尺寸
 
(2).完美像素
具有完美像素的圖標(biāo)會(huì)呈現(xiàn)出
清晰明快的線條和形狀
。如今,高分辨率顯示器和Retina顯示器越來(lái)越流行,因此在不久的將來(lái)可能會(huì)減少對(duì)像素完美圖標(biāo)的要求。但就目前而言,我們所設(shè)計(jì)的圖標(biāo)也應(yīng)該是可擴(kuò)展、響應(yīng)迅速并能適用于許多設(shè)備的。我們?cè)趧?chuàng)建具有完美像素的圖標(biāo)時(shí),可以參考以下三種建議:
  •  
    對(duì)齊像素網(wǎng)格:
這種設(shè)計(jì)方法可以使直線變得非常清晰,并增加曲線和拐角的清晰度
  •  
    使圖標(biāo)保持完美角度:
有角度的線條更有模糊感。在創(chuàng)建圖標(biāo)時(shí),完美的角度是45°
  •  
    邊緣:
邊緣的4個(gè)像素最暗,因此最少需要保留4個(gè)像素的留白,這樣線條邊緣看起來(lái)才會(huì)更清晰
達(dá)成完美像素的三個(gè)要求
達(dá)成完美像素的三個(gè)要求
 
(3). 一致性原則
圖標(biāo)的一致性,就是一組圖標(biāo)放置在一起,
圖標(biāo)要看起來(lái)差不多
,不能忽大忽小,我們前文提到過(guò)幾何圖形它們有視覺(jué)差,有的時(shí)候并不是說(shuō)尺寸一樣,大小就一樣了,在設(shè)計(jì)過(guò)程中除了可以利用柵格系統(tǒng)保證圖標(biāo)大小統(tǒng)一之外,還需要注意以下幾個(gè)方面要保證統(tǒng)一:
  •  
    線寬與間隙:
為了使圖標(biāo)看起來(lái)整潔一致,非常重要的一點(diǎn)就是要記住線寬和間隙的大小。這是一條我們必須遵循的規(guī)則,即:
所有線條的寬度相同
。
  •  
    方/圓角一致性:
包括圖標(biāo)在內(nèi)的對(duì)象圓角半徑會(huì)定義項(xiàng)目的外觀和感覺(jué)。當(dāng)我們對(duì)一組中的多個(gè)對(duì)象進(jìn)行闡述時(shí),就需要遵循這一簡(jiǎn)單的規(guī)則,即:
在方角和圓角之間選擇其一
,并對(duì)整組圖標(biāo)應(yīng)用相同的屬性。
線條與間隙、方圓角保持一致性
線條與間隙、方圓角保持一致性
 
  •  
    視覺(jué)大?。?/div>
當(dāng)我們把一個(gè)大小相等的正方形和一個(gè)圓形放在一起時(shí),就會(huì)產(chǎn)生一種奇怪的感覺(jué):圓形似乎比正方形小。為了
使我們的形狀在視覺(jué)上看上去大小相同
,我們就應(yīng)該把圓圈變大,或減小正方形的大小。
  •  
    視覺(jué)平衡:
我們經(jīng)常在設(shè)計(jì)程序中使用中心對(duì)齊。雖然這種方法并沒(méi)有錯(cuò),但在細(xì)節(jié)方面,比如圖標(biāo)設(shè)計(jì)中,我們就需要相信自己的眼睛,
打破數(shù)學(xué)規(guī)律,以增強(qiáng)元素的平衡
。以播放按鈕為例,它的形狀越不對(duì)稱(chēng),需要改進(jìn)的地方就會(huì)越明顯。
視覺(jué)大小、平衡的一致性
視覺(jué)大小、平衡的一致性
 
(4).KISS原則
即Keep Simple & Starightforward,這個(gè)原則背后的想法是,如果大多數(shù)
系統(tǒng)保持簡(jiǎn)單操作
,那么它們就會(huì)運(yùn)作得很好。用戶也就會(huì)越容易理解并與之交互,而它就越有可能被放到項(xiàng)目設(shè)計(jì)中。那么,KISS原則是如何運(yùn)用于圖標(biāo)設(shè)計(jì)的呢?
  •  
    不使用文本:
文字和圖標(biāo)的結(jié)合會(huì)減少圖標(biāo)的使用方式。此外,小尺寸的文本具有不可讀性。如果我們?nèi)匀恍枰獙⑽谋咀鳛橹С衷?,就需要使用ICON旁邊的提示工具和標(biāo)簽。
  •  
    不要過(guò)度設(shè)計(jì):
不必要的復(fù)雜性會(huì)妨礙設(shè)計(jì)目的。重復(fù)的設(shè)計(jì)也會(huì)嚴(yán)重影響用戶體驗(yàn)
  •  
    盡可能避免不必要的元素:
但我們不能忘記確保每個(gè)圖標(biāo)在整體上下文中都是可以理解且清晰的
KISS原則的三項(xiàng)要求
KISS原則的三項(xiàng)要求
 
「大廠設(shè)計(jì)師」教你一文讀懂圖標(biāo)設(shè)計(jì)
 
 
二、圖標(biāo)設(shè)計(jì)步驟與技巧
 1. 研究與分析
在圖標(biāo)設(shè)計(jì)的第一步研究與分析中,需要
對(duì)品牌和目標(biāo)受眾、競(jìng)爭(zhēng)環(huán)境以及設(shè)計(jì)元素
進(jìn)行深入的分析。下面詳細(xì)介紹圖標(biāo)設(shè)計(jì)步驟與技巧第一步研究與分析:
(1).業(yè)務(wù)需求和用戶需求
了解業(yè)務(wù)的需求背景是至關(guān)重要的。這有助于設(shè)計(jì)師
理解產(chǎn)品的個(gè)性和定位
,確保圖標(biāo)設(shè)計(jì)能夠準(zhǔn)確傳達(dá)品牌信息。同時(shí),
明確品牌的目標(biāo)受眾
,了解他們的需求和偏好,可以幫助設(shè)計(jì)師更好地滿足用戶期待,提高圖標(biāo)的吸引力和有效性。
用戶需求、業(yè)務(wù)需求與設(shè)計(jì)需求
用戶需求、業(yè)務(wù)需求與設(shè)計(jì)需求
 
目標(biāo)受眾不同
,他們對(duì)圖形的期望也會(huì)不一樣,比方說(shuō)設(shè)計(jì)兒童產(chǎn)品界面和B端產(chǎn)品界面時(shí),所用的顏色和形狀都是有考究的。例如,兒童產(chǎn)品:叫叫閱讀的圖標(biāo)設(shè)計(jì)形狀會(huì)比較圓潤(rùn),色彩頁(yè)比較豐富;而B(niǎo)端產(chǎn)品:騰訊會(huì)議的圖標(biāo)設(shè)計(jì)用色就會(huì)很克制,形狀也不會(huì)過(guò)于圓潤(rùn)。
不同目標(biāo)用戶對(duì)圖標(biāo)設(shè)計(jì)風(fēng)格的影響
不同目標(biāo)用戶對(duì)圖標(biāo)設(shè)計(jì)風(fēng)格的影響
 
(2).競(jìng)品分析
分析競(jìng)爭(zhēng)對(duì)手的圖標(biāo)設(shè)計(jì),
找出差異化的設(shè)計(jì)方向
,這對(duì)于創(chuàng)建獨(dú)特的圖標(biāo)至關(guān)重要。通過(guò)觀察競(jìng)爭(zhēng)對(duì)手的設(shè)計(jì),設(shè)計(jì)師可以避免重復(fù),并找到創(chuàng)新的切入點(diǎn)。下面以國(guó)內(nèi)最大的兩家電商購(gòu)物平臺(tái)拼多多和淘寶為例,詳細(xì)說(shuō)明其不同的圖標(biāo)設(shè)計(jì)風(fēng)格時(shí)是怎樣體現(xiàn)出不同的品牌理念和市場(chǎng)定位的。在UI界面設(shè)計(jì)的競(jìng)品分析中,拼多多與淘寶作為電商行業(yè)的兩大巨頭,其界面設(shè)計(jì)各具特色,體現(xiàn)了不同的品牌理念和市場(chǎng)定位。以下是對(duì)兩家公司界面設(shè)計(jì)的詳細(xì)競(jìng)品分析:
i.設(shè)計(jì)風(fēng)格:
  •  
    拼多多:
拼多多的界面設(shè)計(jì)簡(jiǎn)潔明快,以紅色為主色調(diào),
象征著活力、熱情和實(shí)惠
。首頁(yè)主打拼團(tuán)購(gòu)物模式,整體風(fēng)格更加年輕化、社交化,符合其社交電商的定位。
  •  
    淘寶:
淘寶的界面設(shè)計(jì)則更加穩(wěn)重且富有現(xiàn)代感,以橙色為主色調(diào),
寓意著財(cái)富和繁榮
。首頁(yè)布局合理,分類(lèi)清晰,用戶可以一目了然地找到自己需要的商品。搜索框設(shè)計(jì)簡(jiǎn)潔明了,配合推薦搜索詞,使用戶快速定位到目標(biāo)商品。
ii.色彩搭配:
  •  
    拼多多:
拼多多主打的紅色調(diào)顯得活潑可愛(ài),符合年輕用戶的審美,整體色彩搭配
簡(jiǎn)潔明快
  •  
    淘寶:
淘寶
色彩豐富
,但頁(yè)面整體顯得稍顯雜亂,缺乏統(tǒng)一的色彩風(fēng)格。
iii.功能設(shè)計(jì):
  •  
    拼多多:
拼多多
注重用戶體驗(yàn)
,拼團(tuán)、秒殺等活動(dòng)設(shè)計(jì)獨(dú)特,社交元素豐富,用戶參與感強(qiáng)。同時(shí),拼多多的搜索框和推薦算法也更加個(gè)性化,根據(jù)用戶的偏好推薦相應(yīng)的商品。
  •  
    淘寶:
淘寶
功能豐富多樣
,商品種類(lèi)繁多,搜索推薦系統(tǒng)較為智能,但頁(yè)面加載速度較慢。此外,淘寶還擁有豐富的社交功能,用戶可以通過(guò)買(mǎi)家秀、評(píng)價(jià)等功能進(jìn)行社交互動(dòng)。
iv.用戶體驗(yàn):
  •  
    拼多多:
拼多多通過(guò)社交分享和拼團(tuán)互動(dòng),增加了用戶粘性,
用戶參與感強(qiáng)烈
。同時(shí),拼多多的價(jià)格戰(zhàn)略也體現(xiàn)在界面設(shè)計(jì)上,頁(yè)面上經(jīng)常出現(xiàn)“xx人正在拼團(tuán)”的提示,吸引用戶參與拼團(tuán)活動(dòng)。
  •  
    淘寶:
淘寶作為老牌電商平臺(tái),
用戶體驗(yàn)相對(duì)成熟
,但個(gè)性化推薦仍需提升。淘寶的購(gòu)物流程相對(duì)傳統(tǒng),但廣告較多,頁(yè)面略顯復(fù)雜。
拼多多、淘寶的界面圖標(biāo)設(shè)計(jì)對(duì)比
拼多多、淘寶的界面圖標(biāo)設(shè)計(jì)對(duì)比
 
(3).設(shè)計(jì)元素
選擇能夠代表品牌核心價(jià)值的圖形元素
,如圖標(biāo)、符號(hào)或抽象圖形。這些元素應(yīng)當(dāng)簡(jiǎn)潔明了,易于識(shí)別,同時(shí)具有獨(dú)特性,能夠在眾多圖標(biāo)中脫穎而出。字體的選擇應(yīng)與品牌風(fēng)格相符,確保字體的可讀性和美觀性。顏色的搭配也非常重要,需要選擇能夠傳達(dá)品牌情感和個(gè)性的顏色,并確保顏色的搭配和諧。例如,閑魚(yú)App的UI設(shè)計(jì)通過(guò)獨(dú)特的設(shè)計(jì)元素,成功體現(xiàn)了品牌風(fēng)格。以下是對(duì)閑魚(yú)App圖標(biāo)設(shè)計(jì)的詳細(xì)分析:
i.顏色:
閑魚(yú)App采用了醒目且統(tǒng)一的配色方案,
以黃色為主色調(diào)
。黃色作為主色調(diào),
給人一種溫和和舒適的感覺(jué)
,同時(shí)用于強(qiáng)調(diào)重要的功能按鈕或提示信息,使用戶能夠迅速識(shí)別出需要操作的按鈕。針對(duì)年輕用戶的喜好著重設(shè)計(jì),采用了淡黃、淡藍(lán)等更為年輕化的色彩,這種配色方案不僅提高了界面的辨識(shí)度,還增加了用戶使用的舒適度。
ii.圖標(biāo)設(shè)計(jì):
閑魚(yú)App的圖標(biāo)設(shè)計(jì)非常簡(jiǎn)潔明了,
采用了扁平化+輕質(zhì)感的風(fēng)格,簡(jiǎn)化了復(fù)雜性
,方便用戶快速識(shí)別功能。特定的圖標(biāo)如“待售”、“交易中”、“已售”等,幫助用戶快速識(shí)別自己商品的狀態(tài)。同時(shí),幾乎每個(gè)重要界面上都有閑魚(yú)的IP形象小黃魚(yú),頻繁強(qiáng)調(diào)品牌形象
閑魚(yú)獨(dú)特的圖標(biāo)設(shè)計(jì)體現(xiàn)出獨(dú)特的品牌設(shè)計(jì)元素
閑魚(yú)獨(dú)特的圖標(biāo)設(shè)計(jì)體現(xiàn)出獨(dú)特的品牌設(shè)計(jì)元素
 
 2. 構(gòu)思與草圖
圖標(biāo)設(shè)計(jì)的構(gòu)思與草圖階段是整個(gè)設(shè)計(jì)過(guò)程中至關(guān)重要的環(huán)節(jié),它不僅決定了圖標(biāo)的最終形態(tài),還影響著用戶體驗(yàn)和品牌傳達(dá)。
(1).構(gòu)思
完成研究與分析后,我們要收集關(guān)于
“詞語(yǔ)—圖形”之間能轉(zhuǎn)化的元素
,用生活中的物或其他視覺(jué)對(duì)象來(lái)代替所要表達(dá)的功能信息或操作提示。例如設(shè)計(jì)圖標(biāo)“發(fā)現(xiàn)”,我們會(huì)想到放大鏡、指南針、眼睛、飛機(jī)、星球等,可以都畫(huà)出來(lái)進(jìn)行選擇,這一階段也稱(chēng)為頭腦風(fēng)暴階段。但最終我們?cè)O(shè)計(jì)師選擇什么來(lái)表達(dá)呢?這個(gè)時(shí)候我們不僅需要從普通角度進(jìn)行思考,也要通過(guò)
分析行業(yè)角度
、以及
產(chǎn)品自身角度
進(jìn)行思維發(fā)散。
通過(guò)三個(gè)不同角度,完成詞語(yǔ)到圖形的轉(zhuǎn)化構(gòu)思
通過(guò)三個(gè)不同角度,完成詞語(yǔ)到圖形的轉(zhuǎn)化構(gòu)思
 
(2).草圖
草圖是設(shè)計(jì)師
將想法轉(zhuǎn)化為可視化圖形
的第一步。在紙上快速繪制草圖,可以幫助設(shè)計(jì)師迅速探索多種構(gòu)思,并在數(shù)字化之前收集靈感 。在繪制草圖時(shí),設(shè)計(jì)師應(yīng)注重
簡(jiǎn)潔性和可識(shí)別性
,避免過(guò)于復(fù)雜的細(xì)節(jié) 。同時(shí),草圖還應(yīng)具有一定的抽象性和概括性,以便在后續(xù)的設(shè)計(jì)中進(jìn)行靈活調(diào)整 。
繪制抽象與概括的草圖
繪制抽象與概括的草圖
 
3. 細(xì)節(jié)處理
圖標(biāo)設(shè)計(jì)的細(xì)節(jié)處理是確保圖標(biāo)既美觀又實(shí)用的關(guān)鍵。以下是一些關(guān)于圖標(biāo)設(shè)計(jì)細(xì)節(jié)處理的建議:
(1). 風(fēng)格選擇
把 icon 的外形確定下來(lái)后,就可以開(kāi)始細(xì)化圖標(biāo)風(fēng)格了,如果不知道該采用什么風(fēng)格,不如先看看自家app的風(fēng)格或設(shè)計(jì)語(yǔ)言是什么,可以
根據(jù)app風(fēng)格細(xì)化圖標(biāo)風(fēng)格
。比如站酷的app的頁(yè)面風(fēng)格是扁平、漸變、線條,那么icon就可以按照扁平、帶線條的方向設(shè)計(jì)。
站酷app的頁(yè)面風(fēng)格與圖標(biāo)
站酷app的頁(yè)面風(fēng)格與圖標(biāo)
 
(2).圖標(biāo)的柵格系統(tǒng)
柵格系統(tǒng)即(Keyline)就是
把圓、正方向、三角形、長(zhǎng)方形(縱向和橫向)合并到一起的參考物
,方便我們?cè)谠O(shè)計(jì)不同圖標(biāo)時(shí)進(jìn)行參照對(duì)比。正確的使用刪格會(huì)
讓設(shè)計(jì)更加標(biāo)準(zhǔn)和統(tǒng)一
。網(wǎng)格以24*24為基準(zhǔn),可成倍放大或縮小。它是我們?cè)O(shè)計(jì)的“容器”。框架可以幫助我們通過(guò)選擇畫(huà)布的一個(gè)區(qū)域來(lái)創(chuàng)建設(shè)計(jì)。大家在創(chuàng)建設(shè)計(jì)時(shí)經(jīng)常會(huì)將ICON放置在框架中,這么做的原因在于以下幾點(diǎn):
柵格系統(tǒng)及其正確用法
柵格系統(tǒng)及其正確用法
 
  •  
    大小:
由于圖標(biāo)的幾何形狀,它們都具有不同的高度和寬度。為了在設(shè)計(jì)中正確使用ICON,我們就應(yīng)該將它們放置在大小始終相同的框架之中。
  •  
    導(dǎo)出:
框架內(nèi)的圖標(biāo)需要與視覺(jué)中心對(duì)齊,這對(duì)于導(dǎo)出帶有框架的圖標(biāo)至關(guān)重要。
  •  
    組件:
如果我們使用Figma,那就需要通過(guò)創(chuàng)建組件來(lái)節(jié)省時(shí)間。大家可以使用“實(shí)例功能”來(lái)快速替換圖標(biāo)。
使用柵格系統(tǒng)保證圖標(biāo)大小一致、視覺(jué)平衡,同時(shí)也能方便建立組件庫(kù)
使用柵格系統(tǒng)保證圖標(biāo)大小一致、視覺(jué)平衡,同時(shí)也能方便建立組件庫(kù)
 
(3).圖標(biāo)的一致性
我們前文提到過(guò)幾何圖形它們有視覺(jué)差,有的時(shí)候并不是說(shuō)尺寸一樣,大小就一樣了,在設(shè)計(jì)過(guò)程中除了可以利用柵格系統(tǒng)保證圖標(biāo)大小統(tǒng)一之外,還需要注意以下幾個(gè)方面要保證統(tǒng)一:
i.圓角統(tǒng)一:
圓角統(tǒng)一,就是
圖標(biāo)之間有相同造型
,然后又都有圓角的,那么他們就要
保持相同的圓角曲度
,比方說(shuō)下面這組圖標(biāo),圖標(biāo)的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規(guī)范和專(zhuān)業(yè)。
ii.風(fēng)格統(tǒng)一:
界面中同樣功能的圖標(biāo),
樣式和風(fēng)格需要保持一致
,比方說(shuō)這組圖標(biāo)樣式,風(fēng)格就保持著高度的一致,都是用的玻璃質(zhì)感的磨砂材質(zhì)。
iii.角度統(tǒng)一:
這組扁平化圖標(biāo),在右邊
相似的角度
都疊加了一個(gè)小色塊,增加了圖標(biāo)的層次感,相同的角度也增加了圖標(biāo)的一致性和系列感。
iv.線條粗細(xì)統(tǒng)一:
圖標(biāo)的粗細(xì)要統(tǒng)一
,這樣圖標(biāo)就會(huì)看起來(lái)比較精致,比方說(shuō)下面的這組圖標(biāo),圖標(biāo)外框線都是用的3px,圖標(biāo)里面的線都是用的2px,圖標(biāo)的粗細(xì)都保持一樣的粗細(xì)規(guī)律,這樣的圖標(biāo)看著也是同樣的美觀和一致。
v.疏密統(tǒng)一:
下面是一組類(lèi)似于插畫(huà)風(fēng)格的圖標(biāo),圖標(biāo)的風(fēng)格是布線比較密集飽滿,
保證布線的疏密統(tǒng)一
,而三個(gè)圖標(biāo)都遵循了這樣的原則,看起來(lái)出奇的統(tǒng)一,所以它們看起來(lái)像是一組成套圖標(biāo)。
vi.透視統(tǒng)一:
當(dāng)設(shè)計(jì)的圖標(biāo)是立體時(shí),要
注意它們的透視要統(tǒng)一
,就像下面的這組2.5D圖標(biāo),它們的設(shè)計(jì)透視就保持著高度的一致。
通過(guò)六組圖標(biāo)學(xué)習(xí)如何保證圖標(biāo)一致性
通過(guò)六組圖標(biāo)學(xué)習(xí)如何保證圖標(biāo)一致性
 
 4. 命名與輸出
圖標(biāo)設(shè)計(jì)不僅需要美觀、實(shí)用,還需要
符合一定的規(guī)范和標(biāo)準(zhǔn)
。以下是關(guān)于圖標(biāo)設(shè)計(jì)的命名與輸出的詳細(xì)指南:
(1).圖標(biāo)設(shè)計(jì)的命名規(guī)范
i.命名原則:
命名應(yīng)盡量簡(jiǎn)潔明了,
避免使用冗長(zhǎng)或復(fù)雜的名稱(chēng)
。且所有命名只能為
小寫(xiě)英文字母
,不要使用中文或首字母大寫(xiě)的形式。遵循統(tǒng)一的命名規(guī)則,確保團(tuán)隊(duì)成員之間的協(xié)作效率。
ii.命名結(jié)構(gòu):
  •  
    通用切圖命名:
組件_類(lèi)別_功能_狀態(tài)@2x.png(例如:tabbar_icon_home_default@2x.png)。
  •  
    模塊特有切圖命名:
模塊_類(lèi)別_功能_狀態(tài)@2x.png(例如:bill_icon_search_pressed@2x.png)。
iii.命名結(jié)構(gòu):
  •  
    控件/組件:
指獨(dú)立的可操作界面元素,如狀態(tài)欄、搜索欄等。
  •  
    模塊:
通常指頁(yè)面中的部分區(qū)塊,如背景、按鈕等。
  •  
    功能:
指頁(yè)面或模塊中需要操作或點(diǎn)擊的點(diǎn)。
  •  
    狀態(tài):
表示當(dāng)前切圖的狀態(tài),如默認(rèn)狀態(tài)、點(diǎn)擊時(shí)狀態(tài)等。
ps:圖標(biāo)的命名一般用英文或者拼音,如果初學(xué)者對(duì)于英文命名不好理解,那么推薦下面這個(gè)網(wǎng)站,它將常用圖標(biāo)命名匯總非常方便。
圖標(biāo)命名表與命名網(wǎng)站推薦
圖標(biāo)命名表與命名網(wǎng)站推薦
 
(2).圖標(biāo)設(shè)計(jì)的輸出規(guī)范
i.輸出尺寸:
根據(jù)不同平臺(tái)和設(shè)備的需求,圖標(biāo)可能需要不同的尺寸
。例如,iOS和Android平臺(tái)對(duì)圖標(biāo)的尺寸要求有所不同。常用的網(wǎng)格繪制尺寸包括:16、24、36、48、64、128、512、1024等。對(duì)于啟動(dòng)圖標(biāo),iOS和Android通常使用1024×1024像素的尺寸。
ii.輸出格式:
位圖格式:
PNG、JPG
等,適用于大多數(shù)應(yīng)用場(chǎng)景。矢量格式:
SVG
,適用于需要無(wú)損縮放的場(chǎng)景。
GIF
格式:適用于動(dòng)態(tài)圖標(biāo)。
iii.輸出注意事項(xiàng):
確保圖標(biāo)在不同尺寸下的顯示效果清晰銳利,避免出現(xiàn)半個(gè)像素等情況。對(duì)于需要透明背景的圖標(biāo),確保導(dǎo)出時(shí)保留透明度信息。在導(dǎo)出過(guò)程中,
注意保持圖標(biāo)的視覺(jué)一致性和平衡感
。
「大廠設(shè)計(jì)師」教你一文讀懂圖標(biāo)設(shè)計(jì)
 
 
三、應(yīng)用案例分析
 1. Apple的iOS 18系統(tǒng)圖標(biāo)
隨著iOS 18系統(tǒng)的發(fā)布,蘋(píng)果公司再次對(duì)系統(tǒng)圖標(biāo)進(jìn)行了更新和優(yōu)化,旨在提升用戶體驗(yàn)和視覺(jué)美感。iOS 18不僅延續(xù)了蘋(píng)果一貫的簡(jiǎn)潔、直觀的設(shè)計(jì)風(fēng)格,還
引入了更多現(xiàn)代化的設(shè)計(jì)元素
,特別是在深色模式下的表現(xiàn)尤為突出。此次圖標(biāo)設(shè)計(jì)的更新,反映了蘋(píng)果對(duì)于細(xì)節(jié)的關(guān)注和對(duì)用戶需求的深刻理解。
(1).iOS 系統(tǒng)圖標(biāo)設(shè)計(jì)的演變歷史
  •  
    iOS 1-3 擬物設(shè)計(jì)的巔峰:
   在2007年,初代iPhone問(wèn)世,iOS(當(dāng)時(shí)稱(chēng)為iPhone OS)的圖標(biāo)設(shè)計(jì)以
擬物風(fēng)格
為主。蘋(píng)果通過(guò)逼真的紋理和立體感讓圖標(biāo)看起來(lái)栩栩如生。
  •  
    iOS 4-6 細(xì)節(jié)打磨:
   隨著iOS的逐漸成熟,蘋(píng)果在iOS 4到iOS 6之間繼續(xù)使用擬物設(shè)計(jì),但
在細(xì)節(jié)上進(jìn)行了更精細(xì)的打磨
。這一時(shí)期的圖標(biāo)在光影效果和材質(zhì)感上有了更高的表現(xiàn)。
iOS 1-6的圖標(biāo)設(shè)計(jì)
iOS 1-6的圖標(biāo)設(shè)計(jì)
 
  •  
    iOS 7-9 扁平化設(shè)計(jì)的到來(lái):
2013年,iOS 7帶來(lái)了劃時(shí)代的
扁平化設(shè)計(jì)
。蘋(píng)果放棄了擬物化風(fēng)格,轉(zhuǎn)而采用更簡(jiǎn)潔、更現(xiàn)代的圖標(biāo)設(shè)計(jì)。通過(guò)去除多余的陰影和高光,圖標(biāo)變得更加輕盈。簡(jiǎn)約的設(shè)計(jì)語(yǔ)言讓整個(gè)系統(tǒng)顯得煥然一新。這一轉(zhuǎn)變不僅僅是設(shè)計(jì)風(fēng)格的變化,更標(biāo)志著蘋(píng)果設(shè)計(jì)哲學(xué)的更新。
  •  
    iOS 10-12 細(xì)節(jié)優(yōu)化與動(dòng)態(tài)效果:
iOS 10到iOS 12在扁平化的基礎(chǔ)上,
加入了更多的動(dòng)態(tài)效果與視覺(jué)層次
。圖標(biāo)的顏色更加鮮艷,層次感更強(qiáng)。例如,信息圖標(biāo)變得更圓潤(rùn),而音樂(lè)圖標(biāo)的顏色更加活潑。蘋(píng)果開(kāi)始在圖標(biāo)中融入更多的交互動(dòng)畫(huà),讓用戶體驗(yàn)更加生動(dòng)。
iOS 7-12的圖標(biāo)設(shè)計(jì)
iOS 7-12的圖標(biāo)設(shè)計(jì)
 
  •  
    iOS 13-15 簡(jiǎn)約與多樣性的結(jié)合:
在iOS 13到iOS 15之間,蘋(píng)果繼續(xù)優(yōu)化圖標(biāo)設(shè)計(jì),
加入了深色模式
支持,允許用戶根據(jù)環(huán)境光線自動(dòng)調(diào)整顯示效果。
  •  
    iOS 16-18 多彩的個(gè)性化時(shí)代:
進(jìn)入iOS 16,蘋(píng)果推出了
自定義鎖屏和小組件
功能,
圖標(biāo)也開(kāi)始支持更多的自定義選項(xiàng)。
用戶可以通過(guò)Focus模式設(shè)置個(gè)性化的圖標(biāo)風(fēng)格,從而更好地表達(dá)自己的個(gè)性。iOS 17更是將這種個(gè)性化設(shè)計(jì)推向了新高度,用戶不僅可以定制App圖標(biāo)的形狀和顏色,還可以通過(guò)Widget讓桌面顯示更多動(dòng)態(tài)信息。
iOS 13-18的圖標(biāo)設(shè)計(jì)
iOS 13-18的圖標(biāo)設(shè)計(jì)
 
(2).iOS 18系統(tǒng)圖標(biāo)具體案例分析
i.主屏幕的改動(dòng)
  •  
    布局:
iOS 18 將會(huì)允許用戶將主屏幕上的
圖標(biāo)放置在任何位置
,而不需要強(qiáng)制依次排列擺放
用戶可以在主屏幕的任意空白位置擺放 app 和小組件,可以把它們放在程序塢上方,以便快捷使用,也可以讓它們圍繞墻紙主體排布。
  •  
    允許用戶自定義圖標(biāo)顏色:
蘋(píng)果將允許用戶定制應(yīng)用程序圖標(biāo), 可以
讓用戶更改應(yīng)用程序圖標(biāo)的顏色
。App 圖標(biāo)和小組件可通過(guò)深色或色彩效果變換外觀,用戶還可將它們的尺寸調(diào)大,創(chuàng)建最適合自己的體驗(yàn)。比如說(shuō)可以將社交軟件圖標(biāo)設(shè)置為藍(lán)色、購(gòu)物軟件圖標(biāo)設(shè)置為橙色、銀行金融類(lèi)的圖標(biāo)設(shè)置為綠色等等,這樣我們可以更加直觀的對(duì)應(yīng)用進(jìn)行分類(lèi)以及查找。
用戶可自由調(diào)節(jié)布局以及圖標(biāo)的顏色
用戶可自由調(diào)節(jié)布局以及圖標(biāo)的顏色
 
ii.Siri應(yīng)用圖標(biāo)
  •  
    歷史演變:
最初的Siri圖標(biāo)簡(jiǎn)單而又獨(dú)特。黑色背景上,「i」字母上方的綠色圖形像一個(gè)
對(duì)話氣泡
,簡(jiǎn)潔明了地表達(dá)了Siri作為語(yǔ)音助手的功能。蘋(píng)果正式收購(gòu)Siri并將其集成到iOS系統(tǒng)之后。圖標(biāo)采用了一個(gè)
麥克風(fēng)
的形象,背景則是金屬質(zhì)感非常強(qiáng)烈的圓圈,中央的麥克風(fēng)帶有漸變的紫色。這一設(shè)計(jì)與當(dāng)時(shí)的iOS擬物化設(shè)計(jì)風(fēng)格完全一致。第三和第四版圖標(biāo)繼續(xù)沿用麥克風(fēng)形象,但設(shè)計(jì)變得更加簡(jiǎn)潔,更符合開(kāi)始流行起來(lái)的
扁平化
設(shè)計(jì)趨勢(shì)。從2016年開(kāi)始,Siri圖標(biāo)的麥克風(fēng)移除并被
彩色的音頻波
取代,進(jìn)一步強(qiáng)調(diào)Siri的聲音識(shí)別和處理能力。2017年之后,Siri圖標(biāo)開(kāi)始以
球體形狀
呈現(xiàn),內(nèi)部是多層漸變色組成的動(dòng)態(tài)光芒,給人一種未來(lái)感和科技感。
  •  
    iOS 18的更新:
如果你有注意到市面上五花八門(mén)的AI產(chǎn)品,你會(huì)發(fā)現(xiàn),這些 AI 產(chǎn)品的品牌標(biāo)志設(shè)計(jì)也遵循了這一目標(biāo),大多數(shù)都具有相同的特征:
不構(gòu)成威脅、抽象、簡(jiǎn)單和非擬人化
。從這一「創(chuàng)新」改變來(lái)看,重新設(shè)計(jì)的Siri標(biāo)志更加符合這一個(gè)性化要求。
Siri的歷史演變、新版Siri圖標(biāo)、Siri其他AI產(chǎn)品的圖標(biāo)對(duì)比
Siri的歷史演變、新版Siri圖標(biāo)、Siri其他AI產(chǎn)品的圖標(biāo)對(duì)比
 
iii.實(shí)時(shí)生成表情符號(hào)
Genmoji是蘋(píng)果公司在iOS 18系統(tǒng)中引入的一項(xiàng)全新功能,它利用
生成式AI技術(shù)
讓用戶通過(guò)簡(jiǎn)單的文本描述就能自動(dòng)生成獨(dú)特的表情符號(hào)
。比如在發(fā)送短信的時(shí)候,可以根據(jù)當(dāng)時(shí)聊天的情形實(shí)時(shí)創(chuàng)建新的表情符號(hào)。這些表情符號(hào)不僅能夠反映你的心情和個(gè)性,還能適應(yīng)不同的對(duì)話和場(chǎng)合。
如何使用Genmoji
如何使用Genmoji
 
(3).iOS 18系統(tǒng)圖標(biāo)設(shè)計(jì)未來(lái)展望
隨著技術(shù)的不斷進(jìn)步和用戶需求的變化,iOS系統(tǒng)的圖標(biāo)設(shè)計(jì)也將不斷創(chuàng)新和發(fā)展。未來(lái)可能會(huì)有更多
個(gè)性化和動(dòng)態(tài)化
的圖標(biāo)設(shè)計(jì)出現(xiàn)以滿足不同用戶的需求和偏好。同時(shí)隨著人工智能和機(jī)器學(xué)習(xí)技術(shù)的發(fā)展圖標(biāo)設(shè)計(jì)可能會(huì)
更加智能化和自動(dòng)化
從而提高設(shè)計(jì)效率和質(zhì)量。無(wú)論如何變化iOS圖標(biāo)設(shè)計(jì)都將繼續(xù)秉持簡(jiǎn)潔、一致、高辨識(shí)度和視覺(jué)吸引力的原則為用戶提供更好的使用體驗(yàn)。
 2.優(yōu)秀圖標(biāo)網(wǎng)站推薦
通過(guò)前面的文章學(xué)習(xí),相信大家已經(jīng)對(duì)圖標(biāo)設(shè)計(jì)了如指掌了,那么作為一名合格的設(shè)計(jì)師,我們?nèi)绾卫煤玫脑O(shè)計(jì)資源進(jìn)行提效呢?以下是一些優(yōu)秀的圖標(biāo)設(shè)計(jì)網(wǎng)站推薦:
(1).IconFinder
  •  
    特點(diǎn):
擁有龐大的圖標(biāo)庫(kù),包含超過(guò)89萬(wàn)個(gè)圖標(biāo)和17936個(gè)圖標(biāo)集。支持多種格式下載,包括PNG、SVG、CSH等。部分圖標(biāo)收費(fèi),但免費(fèi)圖標(biāo)數(shù)量也相當(dāng)可觀。
(2).IconPark
  •  
    特點(diǎn):
字節(jié)跳動(dòng)旗下的一款圖標(biāo)下載網(wǎng)站,相比Iconfont,圖標(biāo)種類(lèi)不算太多,但圖標(biāo)的規(guī)范非常統(tǒng)一,也可在右側(cè)的操作欄更改圖標(biāo)屬性,另外還有免費(fèi)的插畫(huà)庫(kù)可供使用。
(3).Iconfont
  •  
    特點(diǎn):
iconfont是阿里巴巴的圖標(biāo)庫(kù),應(yīng)該也是受眾最多的一個(gè)圖標(biāo)下載網(wǎng)站,給我們平時(shí)工作提效不少,造福了不少的設(shè)計(jì)師。
(4).IKonate
  •  
    特點(diǎn):
Ikonate是一款可以在線編輯的圖標(biāo)網(wǎng)站,涵蓋了常用的一些圖標(biāo),可以調(diào)節(jié)線條的粗細(xì)和大小,導(dǎo)出的格式是SVG。
(5).Iconduck
  •  
    特點(diǎn):
Iconduck的優(yōu)點(diǎn)是有273,858個(gè)免費(fèi)的圖標(biāo)庫(kù)和插畫(huà)庫(kù)供大家選擇,儲(chǔ)備夠豐富。
(6).Icon8
  •  
    特點(diǎn):
Icon8是一個(gè)專(zhuān)注于提供高質(zhì)量圖標(biāo)和設(shè)計(jì)資源的平臺(tái)。這里的圖標(biāo)涵蓋了扁平化、線條、顏色等多種風(fēng)格,都是由專(zhuān)業(yè)設(shè)計(jì)師和插畫(huà)師手繪制作,確保了其獨(dú)特性和高品質(zhì)。除了豐富的圖標(biāo)資源,Icon8還提供了字體、照片、音效、視頻、插圖等多元設(shè)計(jì)資源,滿足各種項(xiàng)目的需求。
推薦的六個(gè)圖標(biāo)網(wǎng)站
推薦的六個(gè)圖標(biāo)網(wǎng)站
 
此外,在選擇這些圖標(biāo)設(shè)計(jì)網(wǎng)站時(shí),還需要注意以下幾點(diǎn):
  •  
    版權(quán)問(wèn)題:
   確保所選網(wǎng)站的圖標(biāo)資源符合您的使用需求,特別是商業(yè)用途時(shí)要注意版權(quán)限制。
  •  
    格式兼容性:
   根據(jù)項(xiàng)目需求選擇合適的圖標(biāo)格式,如PNG、SVG等。
  •  
    更新頻率:
   選擇那些定期更新圖標(biāo)資源的網(wǎng)站,以獲取最新的設(shè)計(jì)趨勢(shì)和素材。
總結(jié)與展望
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中不可或缺的一部分,它要求設(shè)計(jì)師具備良好的審美觀、對(duì)用戶的深刻理解以及不斷的創(chuàng)新能力。通過(guò)遵循設(shè)計(jì)原則、掌握設(shè)計(jì)技巧、應(yīng)對(duì)挑戰(zhàn)并關(guān)注未來(lái)趨勢(shì),設(shè)計(jì)師可以創(chuàng)造出既直觀又吸引人的圖標(biāo),為用戶提供更優(yōu)質(zhì)的體驗(yàn)。在未來(lái),UI設(shè)計(jì)將繼續(xù)發(fā)揮其重要作用,成為連接用戶與數(shù)字世界的橋梁。設(shè)計(jì)師們需要注意以下三個(gè)未來(lái)圖標(biāo)設(shè)計(jì)的發(fā)展方向:
  •  
    技術(shù)影響:
隨著AR/VR等新技術(shù)的應(yīng)用,未來(lái)的圖標(biāo)設(shè)計(jì)可能會(huì)變得更加互動(dòng)和個(gè)性化。新技術(shù)的應(yīng)用將為圖標(biāo)設(shè)計(jì)帶來(lái)更多的可能性和挑戰(zhàn)。
  •  
    用戶需求變化:
未來(lái)的圖標(biāo)設(shè)計(jì)可能會(huì)更加注重個(gè)性化和互動(dòng)性。未來(lái)的設(shè)計(jì)師需要更多地考慮到用戶的個(gè)性化需求和使用場(chǎng)景。
  •  
    人工智能:
   AI輔助設(shè)計(jì)工具可以幫助設(shè)計(jì)師更快地生成和優(yōu)化圖標(biāo)方案。人工智能的發(fā)展將為設(shè)計(jì)師提供更多的工具和支持,幫助他們更高效地完成工作。
設(shè)計(jì)師們只有不斷學(xué)習(xí)和進(jìn)步,才能在激烈的競(jìng)爭(zhēng)中保持領(lǐng)先。持續(xù)學(xué)習(xí)不僅是個(gè)人成長(zhǎng)的需要,也是行業(yè)發(fā)展的需求。
「大廠設(shè)計(jì)師」教你一文讀懂圖標(biāo)設(shè)計(jì)
 
 
 


作者:阿琳01
鏈接:https://www.zcool.com.cn/article/ZMTY0NjM2MA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

解鎖B端按鈕設(shè)計(jì)10大密碼

天宇 B端ui設(shè)計(jì)文章及欣賞

 
無(wú)法想象沒(méi)有按鈕的頁(yè)面是什么滋味,那定會(huì)像沒(méi)有方向盤(pán)的汽車(chē),讓人不知所措吧?也無(wú)法想象按鈕設(shè)計(jì)不恰當(dāng),會(huì)給用戶帶來(lái)怎樣的困擾?
 
面對(duì)十萬(wàn)火急的任務(wù)需求,
如果需要調(diào)動(dòng)全部理性腦,深呼吸三秒,
才能找到想要執(zhí)行操作的按鈕入口,我想這樣的產(chǎn)品設(shè)計(jì)是失敗的,是會(huì)被用戶所唾棄的。
 
本文將詳細(xì)剖析按鈕的神秘面紗,了解它、研究它,讓按鈕設(shè)計(jì)成為產(chǎn)品的得力助手,為我們的產(chǎn)品賦能,為我們的工作提效,下面就讓我們開(kāi)啟這場(chǎng)神秘之旅吧!
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
目錄
一、按鈕的定義
二、按鈕設(shè)計(jì)的種類(lèi)
三、按鈕設(shè)計(jì)的尺寸
四、按鈕的構(gòu)成
五、按鈕設(shè)計(jì)的作用
六、按鈕的位置
七、按鈕的顏色
八、按鈕在UI界面的設(shè)計(jì)原則
九、按鈕設(shè)計(jì)的注意事項(xiàng)
十、按鈕弱化設(shè)計(jì)的六種方式
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
按鈕在我們生活中起著很大的作用,它就像我們的小助手一樣,幫我們一鍵開(kāi)啟想要的任務(wù),凡事都能一鍵觸達(dá)。
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
按鈕在UI界面中,是一種界面交互控件,通常以矩形、圓形或其他幾何形狀呈現(xiàn),具有明確的視覺(jué)邊界。它通過(guò)用戶的點(diǎn)擊、觸摸等操作來(lái)觸發(fā)特定的功能或操作,如提交表單、執(zhí)行命令、導(dǎo)航頁(yè)面、切換狀態(tài)等。
 
按鈕一般包含文字標(biāo)簽、圖標(biāo)或兩者的組合,以清晰傳達(dá)其功能。
同時(shí),按鈕在不同狀態(tài)下會(huì)呈現(xiàn)出不同的視覺(jué)效果,如默認(rèn)狀態(tài)、按下?tīng)顟B(tài)、懸浮狀態(tài)、禁用狀態(tài)等,為用戶提供操作反饋和引導(dǎo)。
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
1、Antdesign對(duì)按鈕的種類(lèi)劃分:
 
?
 次按鈕
常規(guī)按鈕,用于非主要?jiǎng)幼?。如果不確定選擇哪種按鈕,次按鈕永遠(yuǎn)是最安全的選擇。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
主按鈕
突出“完成”、“推薦”類(lèi)操作;一個(gè)按鈕區(qū)最多使用一個(gè)主按鈕。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
文字按鈕
弱化的按鈕,采用更輕量的按鈕樣式,可用于需大面積展示按鈕場(chǎng)景,例如下面的站酷活動(dòng)頁(yè)就用了很多的文字按鈕,只有當(dāng)按鈕被選中時(shí),按鈕才會(huì)高亮選中。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
圖標(biāo)按鈕
圖標(biāo)提供視覺(jué)線索,避免逐字閱讀按鈕文案,更高效地使用界面,讓頁(yè)面看起來(lái)更加的簡(jiǎn)潔。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
在按鈕中添加圖標(biāo)
用于對(duì)按鈕含義補(bǔ)充解釋?zhuān)岣甙粹o識(shí)別效率。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
2、按鈕的樣式種類(lèi)
按鈕的樣式可以從多個(gè)方面進(jìn)行分類(lèi)和設(shè)計(jì),以下是一些常見(jiàn)的樣式分類(lèi):
 
按顏色劃分:
單色按鈕
按鈕背景為單一顏色,如藍(lán)色、綠色、紅色等,常用于強(qiáng)調(diào)按鈕的主要功能或操作。
 
漸變色按鈕
按鈕背景為漸變色,可以是線性漸變或徑向漸變,通常用于增加視覺(jué)吸引力和現(xiàn)代感。
 
透明按鈕
按鈕背景透明或半透明,通常用于與背景融合或突出按鈕上的文本和圖標(biāo)。
 
彩色邊框按鈕
按鈕背景透明或淺色,但有彩色邊框,常用于需要突出按鈕邊界的場(chǎng)景。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
按形狀分
矩形按鈕
這種是最常見(jiàn)的按鈕形狀,適用于大多數(shù)界面設(shè)計(jì)。
 
圓形按鈕
按鈕形狀為圓形,通常用于表示播放、暫停等操作,或用于具有特定功能的圖標(biāo)按鈕。
 
圓角按鈕
按鈕形狀通常為圓角矩形,常用于需要柔和視覺(jué)效果的場(chǎng)景。
 
自定義形狀按鈕
根據(jù)設(shè)計(jì)需求,按鈕可以是任意自定義形狀,如星形、心形等,常用于創(chuàng)意設(shè)計(jì)或特定主題的界面。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
按邊框分
無(wú)邊框按鈕
按鈕沒(méi)有邊框,背景和文本直接顯示,常用于簡(jiǎn)潔的界面設(shè)計(jì)。
 
細(xì)邊框按鈕
按鈕有細(xì)邊框,常用于區(qū)分按鈕與周?chē)?,同時(shí)保持界面的簡(jiǎn)潔性。
 
粗邊框按鈕
按鈕有粗邊框,常用于強(qiáng)調(diào)按鈕或與背景形成強(qiáng)烈對(duì)比。
 
虛線邊框按鈕
按鈕邊框?yàn)樘摼€,常用于表示輔助操作或非主要功能。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
按圖標(biāo)分
圖標(biāo)按鈕
按鈕上只有圖標(biāo),沒(méi)有文本,常用于表示通用操作或節(jié)省空間的場(chǎng)景。
 
圖標(biāo)+文本按鈕
按鈕上既有圖標(biāo)又有文本,圖標(biāo)通常位于文本左側(cè)或上方,常用于清晰表達(dá)按鈕功能的場(chǎng)景。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
按陰影樣式分
無(wú)陰影按鈕
按鈕沒(méi)有陰影,常用于簡(jiǎn)潔或平面風(fēng)格的界面設(shè)計(jì)。
 
輕微陰影按鈕
按鈕有輕微的陰影效果,常用于增加按鈕的立體感和層次感。
 
明顯陰影按鈕
按鈕有明顯的陰影效果,常用于突出按鈕或與背景形成強(qiáng)烈對(duì)比。
 
動(dòng)態(tài)陰影按鈕
按鈕的陰影效果會(huì)隨著鼠標(biāo)懸?;螯c(diǎn)擊等交互動(dòng)作而變化,常用于增加交互體驗(yàn)的趣味性。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
按動(dòng)畫(huà)種類(lèi)分
無(wú)動(dòng)畫(huà)按鈕
按鈕沒(méi)有動(dòng)畫(huà)效果,常用于簡(jiǎn)潔或傳統(tǒng)的界面設(shè)計(jì)。
 
懸停動(dòng)畫(huà)按鈕
當(dāng)鼠標(biāo)懸停在按鈕上時(shí),按鈕會(huì)有動(dòng)畫(huà)效果,如顏色漸變、邊框變化、圖標(biāo)旋轉(zhuǎn)等,常用于增加交互體驗(yàn)的趣味性和吸引力。
 
點(diǎn)擊動(dòng)畫(huà)按鈕
當(dāng)點(diǎn)擊按鈕時(shí),按鈕會(huì)有動(dòng)畫(huà)效果,如縮放、震動(dòng)、波紋等,常用于增加交互體驗(yàn)的反饋感。
馬蜂窩的功能主按鈕,在點(diǎn)擊的時(shí)候都會(huì)產(chǎn)生動(dòng)畫(huà),交互感十足。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
加載動(dòng)畫(huà)按鈕
當(dāng)按鈕處于加載狀態(tài)時(shí),按鈕會(huì)有加載動(dòng)畫(huà)效果,如旋轉(zhuǎn)圖標(biāo)、進(jìn)度條等,常用于告知用戶操作正在進(jìn)行中。
 
 
 
3、按鈕的幾種狀態(tài)
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
3.1 默認(rèn)按鈕
按鈕的初始狀態(tài),通常具有正常的顏色、形狀和文字顯示,等待用戶操作。
 
3.2 待激活狀態(tài)按鈕:
待激活狀態(tài)按鈕通常用于指示某個(gè)功能或服務(wù)尚未激活或啟用,用戶需要執(zhí)行某些操作來(lái)激活它。這種按鈕的設(shè)計(jì)和實(shí)現(xiàn)需要清晰地傳達(dá)當(dāng)前的狀態(tài),并引導(dǎo)用戶進(jìn)行下一步操作。
 
3.3 點(diǎn)擊狀態(tài)按鈕:
當(dāng)用戶點(diǎn)擊按鈕時(shí),按鈕會(huì)呈現(xiàn)按下的狀態(tài),通常通過(guò)改變顏色、形狀或添加陰影等方式來(lái)表示。
 
3.4 禁用按鈕:
在某些情況下,按鈕會(huì)處于禁用狀態(tài),無(wú)法進(jìn)行操作,通常會(huì)以灰色或半透明的方式顯示,提示用戶當(dāng)前操作不可用。
 
3.5加載狀態(tài)按鈕:
加載狀態(tài)按鈕通常用于指示某個(gè)過(guò)程正在進(jìn)行中,例如數(shù)據(jù)加載、文件上傳或頁(yè)面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理,而不是卡住或出現(xiàn)錯(cuò)誤。
 
3.6危險(xiǎn)提示狀態(tài)按鈕:
危險(xiǎn)提示狀態(tài)按鈕通常用于提醒用戶即將執(zhí)行的操作可能帶來(lái)風(fēng)險(xiǎn)或不可逆的結(jié)果,例如刪除重要文件、注銷(xiāo)賬戶等。這種按鈕的設(shè)計(jì)和實(shí)現(xiàn)需要讓用戶明確意識(shí)到操作的危險(xiǎn)性,以避免誤操作。
 
下邊這兩組彈框就是運(yùn)用了危險(xiǎn)按鈕,來(lái)提示客戶未來(lái)即將面臨的風(fēng)險(xiǎn),警示作用非常的明顯。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
1、 Web端的按鈕尺寸建議
在Web端,按鈕尺寸沒(méi)有固定標(biāo)準(zhǔn)。不過(guò),一般來(lái)講,按鈕的高度常在32px-48px之間,寬度可根據(jù)內(nèi)容靈活設(shè)置,但最好不要小于48px,這樣方便用戶用手指(觸屏設(shè)備)或鼠標(biāo)點(diǎn)擊。像一個(gè)簡(jiǎn)單的“提交”按鈕,寬度可能是80px左右,高度是36px左右。這些尺寸能保證按鈕在視覺(jué)上比較舒適,易于交互。
 
 
2、 麻省理工觸摸實(shí)驗(yàn)對(duì)按鈕尺寸的指導(dǎo)
麻省理工觸摸實(shí)驗(yàn)室通過(guò)對(duì)人類(lèi)指尖的研究,得出了關(guān)于界面按鈕大小設(shè)計(jì)的一些重要參考數(shù)據(jù)。
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
對(duì)于食指,平均寬度在16至20毫米,指腹觸摸區(qū)域尺寸為10至14毫米,指尖觸摸區(qū)域尺寸為8至10毫米;對(duì)于拇指,平均寬度為25毫米,指腹觸摸區(qū)域尺寸為12至16毫米,指尖觸摸區(qū)域尺寸為10至12毫米。由此建議,食指觸摸的按鈕應(yīng)保證在8毫米×8毫米以上,且控件間距應(yīng)保證至少在1毫米以上;拇指觸摸的按鈕應(yīng)保證在10毫米×10毫米以上,且控件間距應(yīng)保證至少在2毫米以上。
 
該研究還指出,大多數(shù)用戶可以舒適可靠地?fù)糁?nbsp;10 毫米×10 毫米的觸摸目標(biāo) 。
 
 
3、 iOS對(duì)按鈕尺寸大小的規(guī)范
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
從按鈕圖標(biāo)尺寸來(lái)看,根據(jù)蘋(píng)果官方設(shè)計(jì)指南,iOS中按鈕圖標(biāo)有不同標(biāo)準(zhǔn)。小圖標(biāo)尺寸為24×24pt,用于小型按鈕,如導(dǎo)航;標(biāo)準(zhǔn)圖標(biāo)為32×32pt,用于普通按鈕,適合次要操作按鈕;大圖標(biāo)是 40×40pt,用于寬大按鈕;特大圖標(biāo)則為48×48pt,用于特大按鈕。不同設(shè)備屏幕尺寸也有對(duì)應(yīng)的建議圖標(biāo)尺寸,如iPhoneSE建議24pt,iPhone14及iPhone14Pro建議32pt,iPad 建議40pt 。
 
在最小觸摸區(qū)域方面,iOS規(guī)定最小觸碰區(qū)域?yàn)?4×44pt,這種尺寸一般適合主要操作按鈕。
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
UI按鈕的組成主要包括以下幾個(gè)關(guān)鍵元素:
 
1、圓角
圓角的大小決定了按鈕的氣質(zhì)和視覺(jué)感受。小圓角常用于常規(guī)按鈕,如4px圓角;圓角越大,越有親和力,人眼往往不喜歡非常鋒利的物體,所以通常不建議使用0圓角的按鈕樣式,根據(jù)我大量的體驗(yàn),我發(fā)現(xiàn)市面上確實(shí)也是帶圓角的按鈕居多些。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
2、圖標(biāo)
圖標(biāo)用于直觀表達(dá)按鈕的功能或狀態(tài),如加載中、編輯等。圖標(biāo)的設(shè)計(jì)應(yīng)與整體頁(yè)面風(fēng)格一致,并確保其含義明確易懂。
 
 
3、內(nèi)間距
內(nèi)邊距能夠擴(kuò)大按鈕的可點(diǎn)擊范圍,幫助用戶更容易點(diǎn)擊按鈕。一個(gè)好的設(shè)計(jì)間距是把按鈕的水平內(nèi)邊距設(shè)計(jì)成垂直內(nèi)邊距的2倍。當(dāng)然,你也可以根據(jù)你設(shè)計(jì)的實(shí)際情況做適當(dāng)調(diào)整,規(guī)矩不是死的。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
4、容器
容器是包含所有視覺(jué)和交互元素的框架,包括顏色、紋理、文案和圖標(biāo)等。容器的設(shè)計(jì)應(yīng)支持按鈕的功能和美觀。
 
 
5、邊框
邊框定義了按鈕的邊界,常用于次級(jí)按鈕的描邊。邊框的粗細(xì)和樣式可以影響按鈕的視覺(jué)層次和交互效果。
 
 
6、文案
文案是按鈕上的文字描述,用于表達(dá)按鈕的含義和功能。文案應(yīng)簡(jiǎn)潔明了,易于理解,同時(shí)具有一定的吸引力。
 
 
7、背景
背景用于表達(dá)按鈕的狀態(tài)和品牌氣質(zhì)。不同的背景顏色和紋理可以增強(qiáng)按鈕的視覺(jué)吸引力和品牌識(shí)別度。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
8、投影
投影用于凸顯層級(jí)關(guān)系,幫助用戶更好地區(qū)分不同的按鈕。投影通常與紋理、漸變色結(jié)合使用,以打造更好的視覺(jué)體驗(yàn)。
 
佐糖首頁(yè)為了促進(jìn)轉(zhuǎn)化,特意將“開(kāi)通會(huì)員”的按鈕用投影凸顯處理,帶投影的按鈕明顯有向前走的感覺(jué),比沒(méi)有投影的按鈕看起來(lái)更加顯眼,小小投影在頁(yè)面中不僅起到增加空間感的作用,還起到了業(yè)務(wù)強(qiáng)調(diào)的作用,已經(jīng)不僅僅是樣式的一個(gè)承載了。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
這些元素共同作用,不僅提升了按鈕的功能性,還增強(qiáng)了其美觀性和用戶體驗(yàn)。在設(shè)計(jì)UI按鈕時(shí),應(yīng)綜合考慮這些因素,以確保按鈕既美觀又實(shí)用。
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
Antdesign指出按鈕的作用是指導(dǎo)用戶采取你希望他們采取的行動(dòng),并幫助用戶防錯(cuò)。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
1、觸發(fā)操作
1.1提交與確認(rèn):
在表單填寫(xiě)場(chǎng)景中,如用戶注冊(cè)、登錄、信息提交等,按鈕用于觸發(fā)提交或確認(rèn)操作,將用戶輸入的信息發(fā)送給系統(tǒng)進(jìn)行處理。
 
1.2執(zhí)行功能:
在各類(lèi)軟件中,按鈕是執(zhí)行具體功能的主要方式,如在圖像編輯軟件中,“裁剪”“旋轉(zhuǎn)”“調(diào)整顏色”等按鈕,可讓用戶快速實(shí)現(xiàn)相應(yīng)功能。
 
 
2、導(dǎo)航跳轉(zhuǎn)
2.1頁(yè)面切換:
在多頁(yè)面的應(yīng)用或網(wǎng)站中,按鈕可實(shí)現(xiàn)頁(yè)面之間的切換,如網(wǎng)站的首頁(yè)、產(chǎn)品頁(yè)、關(guān)于我們頁(yè)等,通過(guò)點(diǎn)擊按鈕,用戶能方便地瀏覽不同頁(yè)面內(nèi)容。
 
2.2菜單展開(kāi)與收起:
用于控制導(dǎo)航菜單的展開(kāi)與收起,節(jié)省頁(yè)面空間,提高界面的整潔度和易用性。
 
 
3、狀態(tài)控制
3.1顯示與隱藏:
可用于控制某些元素的顯示與隱藏,如在電商網(wǎng)站中,點(diǎn)擊“查看更多商品詳情”按鈕,可展開(kāi)隱藏的詳細(xì)商品信息。
 
飛書(shū)中的這個(gè)小小按鈕,它承載著隱藏折疊的功能,讓頁(yè)面看起來(lái)更加的簡(jiǎn)潔有序。
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
3.2啟用與禁用:
在某些功能需要滿足一定條件才能使用時(shí),按鈕可用于表示該功能的啟用或禁用狀態(tài),如在未填寫(xiě)完必填項(xiàng)時(shí),“提交”按鈕處于禁用狀態(tài),無(wú)法點(diǎn)擊。
 
中國(guó)移動(dòng)云盤(pán)的登錄頁(yè)就是這么設(shè)計(jì)的,當(dāng)前面信息沒(méi)有填完,后面的登錄按鈕始終是禁用的狀態(tài),只有當(dāng)信息填完,且填寫(xiě)正確,按鈕才會(huì)亮起。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
4、提供反饋
4.1 操作反饋:
當(dāng)用戶點(diǎn)擊按鈕后,按鈕會(huì)通過(guò)顏色、形狀、動(dòng)畫(huà)等方式的改變,向用戶提供操作反饋,告知用戶系統(tǒng)已接收到操作指令。
 
4.2 引導(dǎo)提示:
在一些復(fù)雜操作或新功能引導(dǎo)時(shí),按鈕可作為引導(dǎo)提示的一部分,告知用戶下一步操作,如在新手引導(dǎo)流程中,突出顯示“下一步”按鈕。
 
心島日志的新手指引中就是這樣設(shè)計(jì)的,按鈕在其中起了很重要的指引作用。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
5、數(shù)據(jù)交互
5.1 數(shù)據(jù)篩選:
在數(shù)據(jù)展示界面,如表格、列表等,按鈕可用于對(duì)數(shù)據(jù)進(jìn)行篩選,方便用戶快速找到所需信息。
釘釘打卡這個(gè)界面中,多虧有了日、周、月的篩選按鈕,才讓數(shù)據(jù)篩選變得如此便捷。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
5.2 數(shù)據(jù)排序:
通過(guò)點(diǎn)擊“按時(shí)間排序”“按銷(xiāo)量排序”等按鈕,用戶可對(duì)數(shù)據(jù)進(jìn)行重新排序,以滿足不同的查看需求。
 
 
6、品牌傳達(dá)
很多產(chǎn)品的按鈕顏色都是與它的品牌色高度一致的,它既是按鈕,又是品牌色的傳遞大使。
 
網(wǎng)易云音樂(lè)的按鈕色用的網(wǎng)易紅,釘釘打卡的按鈕用的騰訊藍(lán),都是在傳遞自己的品牌色,同時(shí)也是在進(jìn)行指令的傳達(dá)。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
在日常設(shè)計(jì)中,頁(yè)面無(wú)疑少不了按鈕位置的擺放,那么按鈕放置在什么樣的位置合適,這也是一個(gè)值得深思的問(wèn)題,也許我們已經(jīng)司空見(jiàn)慣了按鈕的位置擺放,但是我們知道它為什么要放這里或者那里嗎?下面我們來(lái)看下這幾種設(shè)計(jì)模型,讓它告訴我們,為什么,在特定場(chǎng)景下,按鈕位置要這么放?
 
 
1、設(shè)計(jì)依據(jù) – Z型視覺(jué)模型
1.1 原理含義
Z型視覺(jué)模型是一種描述用戶在瀏覽網(wǎng)頁(yè)或界面時(shí)視覺(jué)軌跡的理論模型。
它的布局遵循字母Z的形狀,指用戶的瀏覽路線——從左到右,從上到下的的視覺(jué)運(yùn)動(dòng)軌跡。
 
首先,人們從左上角到右上角進(jìn)行掃描,形成一條水平線;第二步,向頁(yè)面的左下側(cè),創(chuàng)建一條對(duì)角線;最后,再次向右轉(zhuǎn),形成第二條水平線,當(dāng)觀眾的視角以這種模式移動(dòng)時(shí),它形成一個(gè)虛構(gòu)的“Z”字形。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
1.2 視覺(jué)區(qū)域
區(qū)域1:位于頁(yè)面左上角,是用戶視線最先關(guān)注的區(qū)域,通常放置最重要的信息,如網(wǎng)站標(biāo)志、導(dǎo)航欄等,能第一時(shí)間吸引用戶的注意力并讓用戶對(duì)頁(yè)面內(nèi)容有初步的整體認(rèn)知。
 
區(qū)域2:在區(qū)域1的右側(cè),用戶的視線在水平移動(dòng)時(shí)會(huì)經(jīng)過(guò)該區(qū)域,可放置一些與區(qū)域1相關(guān)的輔助信息或次要的導(dǎo)航元素等。
 
區(qū)域3:位于頁(yè)面中部偏左,當(dāng)用戶視線繼續(xù)向下移動(dòng)時(shí)會(huì)關(guān)注到該區(qū)域,通常用來(lái)展示頁(yè)面的核心內(nèi)容,如產(chǎn)品介紹、文章主體等。
 
區(qū)域4:在頁(yè)面的右下角,是用戶視線的終點(diǎn)區(qū)域之一,可放置一些重要的操作按鈕或補(bǔ)充信息等,以吸引用戶在瀏覽完主要內(nèi)容后進(jìn)行進(jìn)一步的操作或獲取更多信息。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
1.3 應(yīng)用案例
在電商網(wǎng)站中,商家會(huì)把熱門(mén)推薦或主打產(chǎn)品放在區(qū)域1和區(qū)域3,以吸引用戶的注意力。在產(chǎn)品詳情頁(yè)面,將“加入購(gòu)物車(chē)”“立即購(gòu)買(mǎi)”等按鈕放在區(qū)域4,方便用戶在瀏覽完產(chǎn)品信息后進(jìn)行購(gòu)買(mǎi)操作。
 
天貓商城就是這樣做的,把網(wǎng)站的LOGO圖放置在左上角(區(qū)域1),把產(chǎn)品圖放置在左下角(區(qū)域3),最后在用戶瀏覽了全部頁(yè)面之后,在右下角(區(qū)域4)放置購(gòu)買(mǎi)按鈕,引導(dǎo)用戶下單。
 
在這個(gè)帶有銷(xiāo)售場(chǎng)景的頁(yè)面設(shè)計(jì)中,
購(gòu)買(mǎi)按鈕放置在右下角符合用戶瀏覽習(xí)慣,也符合Z型視覺(jué)模型。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
在B端應(yīng)用軟件中,可能運(yùn)用的功能比較多,按鈕也比較多,通過(guò)大量分析和觀察發(fā)現(xiàn),它們
大部分喜歡把按鈕放置在每次視覺(jué)運(yùn)動(dòng)線的起點(diǎn)或者終點(diǎn)的位置。
 
騰訊云是這樣處理的,中國(guó)移動(dòng)網(wǎng)盤(pán)是這么處理的,看似巧合,其實(shí)也有它合情合理的一面,因?yàn)槊恳粋€(gè)動(dòng)作的開(kāi)始和結(jié)束都會(huì)更加的引人注意。
 
這就跟人們每次入職一個(gè)新公司一樣,剛進(jìn)去時(shí)會(huì)特別賣(mài)力、小心,后面時(shí)間長(zhǎng)了,也就形成免疫,習(xí)慣了,但是當(dāng)最后要離開(kāi)這家公司的時(shí)候,最后心情又會(huì)特別復(fù)雜,回想起自己在這里成長(zhǎng)的歲月,就會(huì)心生很多的感慨,也會(huì)特別的記憶深刻。
 
也許這也是為啥很多頁(yè)面設(shè)計(jì),喜歡
把重要的按鈕放置在每次視覺(jué)運(yùn)動(dòng)線的起點(diǎn)或者終點(diǎn)吧!
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
按鈕的顏色在界面中不僅起到視覺(jué)點(diǎn)綴的作用,同時(shí)也是按鈕狀態(tài)的一種呈現(xiàn)和反饋。
 
按鈕顏色不是千篇一律的品牌色,它也經(jīng)常需要根據(jù)業(yè)務(wù)場(chǎng)景的不同,更換顏色,比方說(shuō)紅色-刪除按鈕、黃色-告警按鈕、綠色-通過(guò)按鈕、藍(lán)色-更多按鈕,不同的按鈕在顏色設(shè)計(jì)上都會(huì)有所區(qū)別。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
此外,在設(shè)計(jì)按鈕顏色時(shí),有一些基本規(guī)范。
首先,從功能角度看,
主要按鈕通常會(huì)使用比較突出的顏色,
像鮮艷的藍(lán)色(如#007BFF),這是因?yàn)樗{(lán)色醒目又不會(huì)過(guò)于刺眼,能引導(dǎo)用戶去點(diǎn)擊。次要按鈕(如取消、返回)的顏色會(huì)稍淡一些,比如淺灰色(#ccc),讓用戶知道這是相對(duì)次要的操作。
 
從顏色搭配來(lái)說(shuō),按鈕顏色要和背景色有足夠的對(duì)比度,方便用戶識(shí)別。比如背景是白色,深色按鈕就會(huì)很清晰;如果背景顏色較深,那按鈕可以用淺色或者高亮度顏色。
 
另外,顏色的選擇也要考慮產(chǎn)品的風(fēng)格和使用場(chǎng)景。例如,在一個(gè)游戲軟件里可能會(huì)使用更活潑的色彩,像紅色、橙色;而在辦公軟件里,通常會(huì)采用比較沉穩(wěn)的色調(diào),如藍(lán)色、黑色。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
1、可識(shí)別性
1.1 視覺(jué)清晰:
按鈕應(yīng)采用用戶熟悉的設(shè)計(jì)樣式,如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
 
1.2 文字明確:
按鈕上的標(biāo)簽應(yīng)準(zhǔn)確、簡(jiǎn)明直接地介紹其功能,避免使用過(guò)于通用或模糊的表述,讓用戶清楚點(diǎn)擊后會(huì)發(fā)生什么。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
2、易操作性
2.1位置合理:
將按鈕放在用戶期望看到的地方,如遵循F型或古騰堡原則,在頁(yè)面的視覺(jué)焦點(diǎn)區(qū)域放置重要按鈕。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
2.2尺寸適宜:
按鈕大小應(yīng)反映其在屏幕上的優(yōu)先級(jí),更大的按鈕用于更重要的操作,同時(shí)要適配用戶的手指,避免誤觸。
 
 
 
3、一致性
3.1 順序得當(dāng)、邏輯一致:
按鈕的順序應(yīng)反映用戶與界面之間交互的邏輯,如“上一步”按鈕通常在左邊,“下一步”按鈕在右邊。
 
3.2 狀態(tài)樣式一致:
按鈕應(yīng)具有一致的狀態(tài)樣式,如默認(rèn)、按下、聚焦、禁用等,一個(gè)產(chǎn)品中,這些狀態(tài)樣式要高度的一致,不能在這個(gè)頁(yè)面按鈕樣式是這樣的,跑到另一個(gè)頁(yè)面,樣式又發(fā)生了改變。
 
著名的格式塔心理學(xué)也是這么認(rèn)為的,它強(qiáng)調(diào)人對(duì)事物的理解是基于整體的、有組織結(jié)構(gòu)的,如果按鈕設(shè)計(jì)做到一致性,對(duì)提高產(chǎn)品的整體性是有非常大的改進(jìn)的。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
4、簡(jiǎn)潔性
4.1 避免過(guò)多
避免在一個(gè)界面中使用過(guò)多的按鈕,以免讓用戶感到無(wú)所適從,應(yīng)優(yōu)先考慮最重要的操作。
 
4.2 功能單一
每個(gè)按鈕應(yīng)盡量只執(zhí)行一個(gè)主要功能,避免一個(gè)按鈕承載過(guò)多復(fù)雜的操作,降低用戶的認(rèn)知成本。
 
希克定律指出,人的決策時(shí)間會(huì)隨著選擇的增加而增加。在按鈕設(shè)計(jì)中,
簡(jiǎn)潔的設(shè)計(jì)能減少用戶的選擇和認(rèn)知負(fù)擔(dān)
,使用戶能更快地做出決策并執(zhí)行操作。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
5、美觀性
5.1 風(fēng)格統(tǒng)一
按鈕的設(shè)計(jì)風(fēng)格應(yīng)與整個(gè)UI界面的風(fēng)格保持一致,包括顏色、形狀、字體等方面,形成統(tǒng)一的視覺(jué)體系。
 
5.2 對(duì)比協(xié)調(diào)
在保持整體協(xié)調(diào)的基礎(chǔ)上,通過(guò)對(duì)比突出重要按鈕,如使用高對(duì)比度的顏色、較大的尺寸等,吸引用戶的注意力。
情感化設(shè)計(jì)理論強(qiáng)調(diào)設(shè)計(jì)應(yīng)該注重用戶的情感體驗(yàn)。美觀的按鈕設(shè)計(jì)能夠傳遞積極的情感信息,增強(qiáng)用戶和產(chǎn)品的情感連接。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
6、要符合習(xí)慣
奧斯卡·王爾德說(shuō)過(guò):“習(xí)慣一旦養(yǎng)成,便很難改變。” 
所以我們?cè)谠O(shè)計(jì)按鈕的時(shí)候,一定要符合人性的習(xí)慣,而不是試圖改變?nèi)藗兊牧?xí)慣。
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
1、按鈕設(shè)計(jì)要有分組意識(shí)
帶有分組的按鈕擺放,讓人看起來(lái)總是更加的有序,也更利于用戶進(jìn)行操作,面對(duì)同類(lèi)型的功能操作點(diǎn)無(wú)需跳躍著去尋找,能很快在相似功能操作區(qū)域找到。
 
360的分組意識(shí)很強(qiáng)烈,三個(gè)不同區(qū)域的圖標(biāo)按鈕樣式都做了明顯的區(qū)分,讓界面看起來(lái)更加有序,操作起來(lái)也更加的便捷。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
2、按鈕排列視覺(jué)上要有主次
切不可一行按鈕中出現(xiàn)多個(gè)高強(qiáng)調(diào)的按鈕,Antdesign對(duì)這個(gè)也做了詮釋?zhuān)瑫?huì)對(duì)用戶的行為進(jìn)行錯(cuò)誤的引導(dǎo),也不利于聚焦。
 
通義這個(gè)頁(yè)面雖然有多個(gè)選中的按鈕,但是沒(méi)有全部用高強(qiáng)調(diào)的按鈕,只有強(qiáng)推薦的操作“開(kāi)始錄音”才用了強(qiáng)按鈕,其它通過(guò)相對(duì)淺的顏色做了弱按鈕選中處理,視覺(jué)上主次分明,信息主次表達(dá)上也清晰可見(jiàn)。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
3、不要在按鈕中放置兩個(gè)圖標(biāo)
當(dāng)一個(gè)按鈕同時(shí)兼顧兩個(gè)交互動(dòng)作的時(shí)候,一定要區(qū)分設(shè)計(jì),不能赤裸裸的展示在一個(gè)按鈕中,而不做任何區(qū)分。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
4、返回按鈕宜放置在左邊
具有返回意義的按鈕,應(yīng)該放在左側(cè),暗示其方向是回到之前,例如上一步。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
5、按鈕文字不宜太長(zhǎng)
簡(jiǎn)短的文字更易被用戶閱讀和記住,在一個(gè)按鈕上最多不超過(guò)5個(gè)文字,重要的按鈕一般
使用2~4個(gè)字。
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
? 用純灰色文字的弱化按鈕
 
? 用灰色邊框+灰色文字的弱化按鈕
 
? 用顏色邊框+顏色文字的弱化按鈕
 
? 用灰底+灰色文字的弱化按鈕
 
? 用淺色底+顏色文字的弱化按鈕
 
? 用純顏色的弱化按鈕
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼
 
 
通過(guò)本篇文章的探討,我們深入了解了B端按鈕設(shè)計(jì)的九大核心要素。從按鈕的基本定義到Antdesign的分類(lèi),再到尺寸、構(gòu)成、作用、位置和顏色等細(xì)節(jié),每一部分都是提升用戶體驗(yàn)的關(guān)鍵。
 
按鈕設(shè)計(jì)不僅關(guān)乎美觀,更影響著用戶的操作效率和滿意度。
在UI界面中,遵循設(shè)計(jì)原則和注意事項(xiàng),確保按鈕既實(shí)用又具有吸引力,是每位設(shè)計(jì)師的職責(zé)。
 
希望本文能為設(shè)計(jì)師們提供有價(jià)值的參考,激發(fā)更多創(chuàng)新靈感,共同推動(dòng)B端產(chǎn)品的交互設(shè)計(jì)向更高水平發(fā)展。
 
 
解鎖B端按鈕設(shè)計(jì)10大密碼


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!

天宇 設(shè)計(jì)思維

前言
在我們的日常生活中,心理學(xué)的影響無(wú)處不在。它像一把神奇的鑰匙,能打開(kāi)人們內(nèi)心深處的秘密。作為設(shè)計(jì)師,我們更應(yīng)該掌握并運(yùn)用心理學(xué),將其融入我們的設(shè)計(jì)中,從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計(jì)并不僅僅是形狀、顏色和布局的組合,更是對(duì)人類(lèi)心理的探索和解讀。我們的每一個(gè)設(shè)計(jì)決策,都與用戶的心理狀態(tài)和認(rèn)知過(guò)程息息相關(guān)。如何抓住用戶的眼球、引發(fā)他們的興趣、引導(dǎo)他們的行為,這些都是我們需要深入研究的課題。
在眾多的心理學(xué)原理中,馮·雷斯托夫效應(yīng)(Von Restorff Effect)是一個(gè)值得設(shè)計(jì)師們關(guān)注的設(shè)計(jì)法則。這個(gè)效應(yīng)揭示了一個(gè)有趣的現(xiàn)象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設(shè)計(jì)中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關(guān)注的焦點(diǎn)。今天筆者就帶大家了解一下設(shè)計(jì)中常用的心理學(xué)之一馮·雷斯托夫效應(yīng)。
 
 
 
分享目錄
一、關(guān)于馮.雷斯托夫效應(yīng)
二、馮.雷斯托夫效應(yīng)對(duì)設(shè)計(jì)的影響
三、在設(shè)計(jì)中的應(yīng)用
四、常見(jiàn)問(wèn)題及解決方式
五、結(jié)語(yǔ)
 
 
 
一、關(guān)于馮.雷斯托夫效應(yīng)
1.產(chǎn)生背景
在1933年的德國(guó),一個(gè)名叫海德維希·馮·雷斯托夫的醫(yī)生開(kāi)啟了一項(xiàng)改變我們對(duì)人類(lèi)記憶理解的實(shí)驗(yàn)。她深入探索了當(dāng)人們面對(duì)一系列物品時(shí),他們的記憶是如何運(yùn)作的。通過(guò)精心設(shè)計(jì)的對(duì)比實(shí)驗(yàn),她發(fā)現(xiàn)了一個(gè)令人驚奇的現(xiàn)象:在一組物品中,那個(gè)最特別的物品總是更容易被人們記住。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
這一發(fā)現(xiàn)為我們揭示了一個(gè)核心事實(shí):特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個(gè)被聚光燈照亮,那么相比其他未被照亮的物品,它無(wú)疑會(huì)成為人們關(guān)注的焦點(diǎn),從而在記憶中留下更深的痕跡。
這個(gè)人類(lèi)行為和記憶的規(guī)律后來(lái)被命名為“馮·雷斯托夫效應(yīng)”。這一效應(yīng)不僅僅是一個(gè)簡(jiǎn)單的觀察,它實(shí)際上是人類(lèi)行為學(xué)和心理學(xué)領(lǐng)域的一項(xiàng)重要研究成果。隨著時(shí)間的推移,這一效應(yīng)逐漸被應(yīng)用于美學(xué)和設(shè)計(jì)領(lǐng)域,為設(shè)計(jì)師們提供了全新的視角和工具,以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應(yīng)被正式確立命名以來(lái),眾多科研學(xué)者在此基礎(chǔ)上進(jìn)行了更深入的研究,他們不僅剖析了這一效應(yīng)的內(nèi)在機(jī)制和影響因素,還探討了其在不同情境下的應(yīng)用。隨著研究的深入,對(duì)于這一效應(yīng)的理解也在不斷加深,并衍生出了許多其他的理論和學(xué)術(shù)觀點(diǎn)。
 
2.融入設(shè)計(jì)行業(yè)
馮·雷斯托夫效應(yīng)為我們提供了一個(gè)獨(dú)特的視角,幫助我們更好地理解人類(lèi)記憶的運(yùn)作方式。通過(guò)運(yùn)用這一原理,我們可以在設(shè)計(jì)中有意識(shí)地創(chuàng)造出令人難忘的元素,從而與觀眾建立更深刻的聯(lián)系。無(wú)論是在廣告、品牌推廣還是產(chǎn)品設(shè)計(jì)中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
馮·雷斯托夫效應(yīng),又被稱(chēng)為隔離效應(yīng)或新奇效應(yīng),揭示了人們?cè)谟洃浿械钠谩.?dāng)情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時(shí),這種效應(yīng)尤為明顯。
在當(dāng)今信息爆炸的時(shí)代,用戶往往沒(méi)有耐心去仔細(xì)查找信息,而是快速掃視。因此,設(shè)計(jì)師需要巧妙地運(yùn)用萊斯托夫效應(yīng),使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出,吸引用戶的目光。
統(tǒng)一性是設(shè)計(jì)的基礎(chǔ),但只有差異化的元素才能讓信息從頁(yè)面中脫穎而出。通過(guò)巧妙運(yùn)用顏色、形狀、布局等元素,我們可以創(chuàng)造出與眾不同的視覺(jué)效果,引導(dǎo)用戶的視線。通過(guò)巧妙地突出關(guān)鍵內(nèi)容,我們能夠更好地與用戶溝通,引領(lǐng)他們的注意力,為業(yè)務(wù)創(chuàng)造更大的價(jià)值。
 
 
 
二、馮.雷斯托夫效應(yīng)對(duì)設(shè)計(jì)的影響
1.背景不同 強(qiáng)化視覺(jué)
在界面設(shè)計(jì)中,我們常常會(huì)遇到這樣的情況:在同類(lèi)型的元素中,某一元素與其他元素存在顯著差異,這種現(xiàn)象我們稱(chēng)之為“背景不同”。為了使某個(gè)模塊或元素在用戶心中留下深刻印象,我們可以利用環(huán)境差異來(lái)提高其識(shí)別度和記憶度。這種手法在UI設(shè)計(jì)中被廣泛應(yīng)用,它利用了馮·雷斯托夫效應(yīng),能有效吸引用戶點(diǎn)擊。
例如淘寶底部標(biāo)簽欄中的四個(gè)ICON,唯獨(dú)首頁(yè)的第一個(gè)ICON(品牌logo)風(fēng)格與眾不同。即使離開(kāi)了該頁(yè)面,這個(gè)特殊的ICON依然讓人印象深刻,餓了么第二的圖標(biāo)也是如此。因此,我們?cè)谠O(shè)計(jì)界面時(shí),若想吸引用戶的注意或提高點(diǎn)擊量,可以打破常規(guī),讓特定元素在同背景下脫穎而出。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
再比如下圖的個(gè)人中心界面,功能入口模塊均采用ICON展示,而游樂(lè)場(chǎng)模塊卻采用了特殊的布局和設(shè)計(jì)。因此,當(dāng)用戶進(jìn)入個(gè)人中心時(shí),最先映入眼簾的便是游樂(lè)場(chǎng)模塊。這也解釋了為什么我們?cè)谶M(jìn)行廣告和活動(dòng)投放時(shí),需要特別設(shè)計(jì)的原因。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
2.經(jīng)驗(yàn)不同 強(qiáng)化記憶
當(dāng)遇到與過(guò)去經(jīng)驗(yàn)顯著不同的情況時(shí),我們的大腦會(huì)產(chǎn)生一種特殊的效應(yīng),這種效應(yīng)被稱(chēng)為“經(jīng)驗(yàn)不同”的效應(yīng)。例如,在騎自行車(chē)的過(guò)程中,我們通常習(xí)慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來(lái)騎車(chē),結(jié)果很可能會(huì)摔倒。從此以后,每當(dāng)我們聽(tīng)到或描述有關(guān)騎車(chē)摔倒的事情時(shí),我們都會(huì)立刻想起那次“經(jīng)驗(yàn)不同”的嘗試。
同樣地,淘寶和京東在618、雙十一等大型促銷(xiāo)活動(dòng)時(shí),會(huì)選擇重新設(shè)計(jì)他們的首頁(yè)。與往常的設(shè)計(jì)相比,這些新的首頁(yè)設(shè)計(jì)通常會(huì)增加更多的促銷(xiāo)入口,甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來(lái)看,這種與以往不同的設(shè)計(jì)能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴(kuò)大活動(dòng)對(duì)用戶的影響力。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
 
 
三、在設(shè)計(jì)中的應(yīng)用
1.功能隔離提高效率
在視覺(jué)層面難以實(shí)現(xiàn)強(qiáng)烈差異化時(shí),我們可以通過(guò)功能來(lái)實(shí)現(xiàn)有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區(qū)分開(kāi)來(lái)。這種設(shè)計(jì)確保了關(guān)鍵信息的優(yōu)先級(jí),使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過(guò)巧妙地運(yùn)用功能,我們可以輕松地解決視覺(jué)上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個(gè)性化的體驗(yàn)。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
2.動(dòng)效加強(qiáng)引導(dǎo)
靜態(tài)頁(yè)面容易讓人視覺(jué)疲勞,動(dòng)效能夠更加生動(dòng)有趣地展示內(nèi)容,引導(dǎo)用戶更加關(guān)注頁(yè)面。相較于被動(dòng)接受信息,動(dòng)效能夠更加有效地吸引用戶注意。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
3.背景聯(lián)動(dòng)吸引目光
隨著B(niǎo)anner自動(dòng)輪播的普及,用戶對(duì)其的吸引力逐漸降低。面對(duì)不斷變化的廣告,用戶不再耐心地逐個(gè)瀏覽。當(dāng)無(wú)法獲取所需信息時(shí),他們的視線會(huì)迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對(duì)這一挑戰(zhàn),騰訊視頻首頁(yè)的Banner采用了背景聯(lián)動(dòng)的形式。這意味著頭部背景色會(huì)根據(jù)Banner圖片的色調(diào)進(jìn)行變化,從而擴(kuò)大了內(nèi)容的變化空間。這種設(shè)計(jì)不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關(guān)注。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
4.icon強(qiáng)化加強(qiáng)視覺(jué)感知
頻道頁(yè)的入口方式多種多樣,金剛區(qū)icon無(wú)疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能,單一的icon配合動(dòng)效可有效吸引用戶關(guān)注。此策略簡(jiǎn)單高效,有助于用戶快速找到所需內(nèi)容。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
5.內(nèi)容強(qiáng)化凸顯價(jià)值感
在設(shè)計(jì)界面時(shí),我們追求的是在有限的空間內(nèi)展示更多的有效信息,避免信息的無(wú)效重復(fù)。但在電商平臺(tái)中,尤其是涉及到利益點(diǎn)時(shí),我們需要確保信息具有足夠的價(jià)值感和吸引力。
以智行APP開(kāi)通會(huì)員為例,領(lǐng)神卡作為核心賣(mài)點(diǎn)被突出展示,采用了平鋪展開(kāi)的方式,從而突顯其價(jià)值。相對(duì)其他權(quán)益則相應(yīng)地進(jìn)行了弱化處理,以保持整體信息的清晰度和重點(diǎn)。這樣的設(shè)計(jì)既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點(diǎn)。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
6.分層隔離提高信息層級(jí)
頁(yè)面信息層次分明,信息層級(jí)越高,用戶感知越強(qiáng)烈,越能吸引注意。例如,模態(tài)彈窗處于最上層,與內(nèi)容層完全隔離,用戶無(wú)法忽視。其次是非模態(tài)懸浮層,與內(nèi)容層隔離,但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
 
 
四、常見(jiàn)問(wèn)題及解決方式
1.本末倒置的危險(xiǎn)
受“危險(xiǎn)按鈕”的影響,過(guò)去設(shè)計(jì)師常常給予負(fù)向情緒操作很高的視覺(jué)層級(jí),例如退出登錄。這樣的設(shè)計(jì)意圖是警示用戶操作危險(xiǎn),但視覺(jué)上卻過(guò)于強(qiáng)調(diào),甚至有些“喧賓奪主”。近年來(lái),移動(dòng)端設(shè)計(jì)中這種矛盾逐漸減少,但仍然存在。與其強(qiáng)調(diào)操作的難度和危險(xiǎn)性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應(yīng)來(lái)看,這種設(shè)計(jì)方式有本末倒置之嫌,應(yīng)盡量避免。
馮.雷斯托夫效應(yīng) | 設(shè)計(jì)師需要知道的設(shè)計(jì)原則!
 
 
 
2.什么都突出等于什么都不突出
新手設(shè)計(jì)師常常會(huì)遇到想要突出所有元素,但最終無(wú)法突出任何一項(xiàng)的問(wèn)題。頁(yè)面中的特異點(diǎn)應(yīng)該屬于少數(shù),如果所有元素都想做得不一樣,都會(huì)讓頁(yè)面整體視覺(jué)效果崩潰。因此,在設(shè)計(jì)中要學(xué)會(huì)取舍,選擇最重要的元素進(jìn)行突出,才能達(dá)到最佳的視覺(jué)效果。
 
 
 
五、結(jié)語(yǔ)
總的來(lái)說(shuō),將馮·雷斯托夫效應(yīng)運(yùn)用到設(shè)計(jì)中,能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設(shè)計(jì)。但請(qǐng)記住,任何設(shè)計(jì)決策都應(yīng)以用戶為中心,了解他們的需求和心理是關(guān)鍵。只有這樣,我們才能真正創(chuàng)造出打動(dòng)人心的設(shè)計(jì)。
 


作者:大漠飛鷹CYSJ
鏈接:https://www.zcool.com.cn/article/ZMTYzMjYwNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

一個(gè)小彈窗引發(fā)的28個(gè)建議

資深UI設(shè)計(jì)者 設(shè)計(jì)管理與成長(zhǎng)

這套高顏值的質(zhì)感彈窗設(shè)計(jì)方法,看了一定學(xué)會(huì)!

UI設(shè)計(jì)師是怎么做多維度競(jìng)品分析的?

資深UI設(shè)計(jì)者 設(shè)計(jì)管理與成長(zhǎng)

本文為設(shè)計(jì)師提供全流程指導(dǎo),深入探討多維度競(jìng)品分析的方法。文章分享了如何拆解多維度,以及6種實(shí)用的分析技巧。

B端基礎(chǔ) | 規(guī)范的做一套有特點(diǎn)的中后臺(tái)ICON

天宇 B端ui設(shè)計(jì)文章及欣賞

 

我與ICON的設(shè)計(jì)好像有什么不結(jié)之緣。早在2017年我就寫(xiě)過(guò)一篇如果對(duì)抗APP中ICON設(shè)計(jì)同質(zhì)話的問(wèn)題。提出了自己的一些建議。而在之后的工作中也多次改版或設(shè)計(jì)過(guò)成套的APP應(yīng)用中心的ICON和系統(tǒng)后臺(tái)ICON庫(kù)。ICON設(shè)計(jì)的經(jīng)驗(yàn)?zāi)鞘遣坏貌回S富的存在。

 

ICON,中文翻譯為圖標(biāo)。是對(duì)象的圖像表示,指用圖形指代某些名詞,如:打開(kāi)、警告、愛(ài)、學(xué)校、山等。ICON,是上世紀(jì)九十年代伴隨IT 產(chǎn)業(yè)出現(xiàn)的一個(gè)技術(shù)詞匯,原指計(jì)算機(jī)軟件編程中為使人機(jī)界面更加易于操作和人性化而設(shè)計(jì)出的標(biāo)識(shí)特定功能的圖形標(biāo)志。

 

 

 

下面是我總結(jié)了這幾年設(shè)計(jì)icon的經(jīng)驗(yàn)結(jié)合大廠的后臺(tái)規(guī)范。給新手設(shè)計(jì)師的一些建議,都是經(jīng)驗(yàn)之談希望能夠幫到你??梢宰屇阍谠O(shè)計(jì)的這條路上走的越來(lái)越輕松。

 

 

 

 

第一章 ICON的設(shè)計(jì)

 

那位美女設(shè)計(jì)師:?。「闶裁囱?,B端設(shè)計(jì)師icon還有設(shè)計(jì),你傻不傻呀。我給你分享幾個(gè)現(xiàn)成的icon網(wǎng)站吧下載了就能用。
我:是的我也用現(xiàn)成的icon在很多的需求里。但是我更喜歡自己設(shè)計(jì),自己去做。直接用現(xiàn)成的icon不爽嗎。嗯當(dāng)然爽呀。看是你要要知道做的更好的方法和可能性。不要總把自己當(dāng)美工吧,我們可以是設(shè)計(jì)師的。

 

做為什么師我們大概都應(yīng)該知道icon作為我們界面的重要構(gòu)成元素,它會(huì)在很大程度上影響我們界面的風(fēng)格。甚至?xí)绊懳覀兤放频恼{(diào)性。所以一套符合我們?cè)O(shè)計(jì)風(fēng)格具有我們品牌調(diào)性的icon是很有必要的。總之你想明白一個(gè)道理,你一整個(gè)屋子都裝修好了,房間里獨(dú)獨(dú)到處都放了幾把破椅子。不難受嗎。

 

Ant design設(shè)計(jì)規(guī)范:圖標(biāo)是 UI 設(shè)計(jì)中必不可少的組成。通常我們理解圖標(biāo)設(shè)計(jì)的含義,是將某個(gè)概念轉(zhuǎn)換成清晰易讀的圖形,從而降低用戶的理解成本,提升界面的美觀度。在我們的企業(yè)級(jí)應(yīng)用設(shè)計(jì)范圍中,圖標(biāo)在界面設(shè)計(jì)的諸多元素中往往只占了很小的比重,在調(diào)用時(shí)也會(huì)被縮到比設(shè)計(jì)稿小很多倍的尺寸,加上在圖形素材極度豐富并且便于獲取的今天,在產(chǎn)品設(shè)計(jì)體系中實(shí)現(xiàn)一套美觀、一致、易用、便于延展的圖標(biāo)體系往往會(huì)被不小心忽略掉。Ant Design 相信一整套優(yōu)質(zhì)的圖標(biāo)對(duì)于設(shè)計(jì)質(zhì)量的影響是非常巨大的,這考驗(yàn)著設(shè)計(jì)師的協(xié)作能力,以及對(duì)圖形塑造的系統(tǒng)性思維,同時(shí)也能反映一個(gè)團(tuán)隊(duì)對(duì)于細(xì)節(jié)的追求。

 

 

1、中后臺(tái)ICON的設(shè)計(jì)原則

 

中后臺(tái)使用的icon大部分規(guī)范平臺(tái)也好或者一有系統(tǒng)也好他們的設(shè)計(jì)原則基本是大同小異的。我的建議是如果你要設(shè)計(jì)一整套的icon圖標(biāo)。在設(shè)計(jì)之前確定自己icon的設(shè)計(jì)原則。這個(gè)設(shè)計(jì)原則可以依照自己的界面設(shè)計(jì)風(fēng)格或期望的界面設(shè)計(jì)風(fēng)格以及行業(yè)屬性、自己品牌等去制定。

 

1-1、Ant design圖標(biāo)設(shè)計(jì)原則

 

Ant Design 的圖標(biāo)設(shè)計(jì)原則源自「確定」和「自然」,落實(shí)到圖標(biāo)設(shè)計(jì)領(lǐng)域,一共有四個(gè)。準(zhǔn)確、簡(jiǎn)單、節(jié)奏、愉悅。

 

1-1-1、準(zhǔn)確:

 

設(shè)計(jì)造型準(zhǔn)確的圖標(biāo)(保持偶數(shù)原則,去小數(shù)點(diǎn));選擇表意準(zhǔn)確的圖標(biāo),不對(duì)用戶的認(rèn)知造成困擾。

 

 

 

1-1-2、簡(jiǎn)單:

 

在表意清晰準(zhǔn)確的基礎(chǔ)上,盡量保持圖形的簡(jiǎn)潔,不做多余的修飾。

 

 

 

 

1-1-3、節(jié)奏:

 

挖掘構(gòu)圖中的秩序之美。

 

 

 

 

1-1-4、愉悅:

 

賦予適度的情感。在部分圖標(biāo)設(shè)計(jì)中,會(huì)適度的注入擬人化的元素,令圖標(biāo)具備生命力。

 

 

 

 

1-2、TDesign圖標(biāo)設(shè)計(jì)原則

 

Icon 作為 UI 構(gòu)成中重要的元素,它一定程度上影響整體 UI 界面呈現(xiàn)出的風(fēng)格,TDesign 初期提供一套適用于中后臺(tái)場(chǎng)景的線性 Icon,以普適、通用的標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì),風(fēng)格契合默認(rèn) TDesign 的風(fēng)格,線性、圓角。在TDesingv中設(shè)計(jì)原則為、從簡(jiǎn)、精確、適度

 

1-2-1、從簡(jiǎn):

 

制作時(shí)保證參數(shù)的簡(jiǎn)化,盡量消除小數(shù)點(diǎn)以及非整數(shù)的角度。處理線條以及輪廓時(shí)刪除多余的錨點(diǎn),輸出時(shí)應(yīng)避免出現(xiàn)不必要的裝飾,保持圖標(biāo)的簡(jiǎn)潔。

 

 

 

 

1-2-2、精確:

 

在設(shè)計(jì)時(shí)避免使用那些含義模糊的圖形,當(dāng)同個(gè)事物存在多個(gè)圖形表述時(shí),應(yīng)選取最為流通的樣式,必要時(shí)進(jìn)行針對(duì)性的強(qiáng)化。在圖標(biāo)輸出時(shí)也應(yīng)遵守命名規(guī)范,精確的文字描述便于他人查找。

 

 

 

 

1-2-3、適度:

 

單個(gè)圖標(biāo)作為一個(gè)獨(dú)立的視覺(jué)個(gè)體,在線條的疏密以及圖形的搭配上要呈現(xiàn)適度感。在處理一些必要的高密度圖標(biāo)時(shí)也要考慮線條的節(jié)奏感,讓其舒適不壓迫。系列圖標(biāo)要遵守適度原則,將變化控制在一定范圍內(nèi)。

 

 

 

發(fā)現(xiàn)沒(méi)大廠規(guī)范為了普世所以他們的圖標(biāo)設(shè)計(jì)原則定的基本都是一樣的。只是換了一個(gè)詞而已。而且他們的大部分原則和細(xì)節(jié)都是來(lái)自平面設(shè)計(jì)里的板式設(shè)計(jì)和標(biāo)志設(shè)計(jì)里的形式美法則。

 

 

2、如何規(guī)范的設(shè)計(jì)ICON

 

設(shè)計(jì)一套優(yōu)秀的圖標(biāo)設(shè)計(jì)應(yīng)該簡(jiǎn)潔明了、直觀性強(qiáng)、獨(dú)特性好、可識(shí)別度高、適應(yīng)性廣、細(xì)節(jié)處理精細(xì)、可擴(kuò)展性強(qiáng),并且能夠根據(jù)用戶反饋及時(shí)改進(jìn)和優(yōu)化。如果要具備這些特征,那我們?cè)谠O(shè)計(jì)的時(shí)候就要遵循一些特定的規(guī)范。

 

 

 

2-1、柵格

 

icon設(shè)計(jì)的柵格在大場(chǎng)的設(shè)計(jì)規(guī)范里面分為兩種。一種ant design設(shè)計(jì)規(guī)范里面的那種柵格。另一種是TDesign設(shè)計(jì)規(guī)范里面的柵格。我之前在做的時(shí)候是直接呀的阿里巴巴示例圖庫(kù)的上傳模板里面的柵格進(jìn)行設(shè)計(jì)的不過(guò)。沒(méi)有這設(shè)計(jì)規(guī)范里面的柵格好用。

 

 

 

2-1-1、Ant Design柵格

 

Ant Design 的系統(tǒng)圖標(biāo)都是按照 1024 x 1024 的畫(huà)板進(jìn)行制作的。

 

出血位: 在圖標(biāo)的設(shè)計(jì)過(guò)程中預(yù)留出血位的做法,可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn);同時(shí)在設(shè)計(jì)過(guò)程中,也為設(shè)計(jì)師把握?qǐng)D標(biāo)間平衡留下了進(jìn)退的余地。新版的設(shè)計(jì)規(guī)格在圖形的外圍預(yù)留了 64px 的出血位,多數(shù)的圖標(biāo)在設(shè)計(jì)中我們都不建議超過(guò)這個(gè)區(qū)域。

 

 

 

 

2-1-2、TDesign柵格

 

柵格作為圖表繪制的底層結(jié)構(gòu),是一切屬性設(shè)計(jì)的基礎(chǔ)。線條的長(zhǎng)短粗細(xì)、圖標(biāo)的大小比例等關(guān)鍵因素均在其基礎(chǔ)上制定。圖標(biāo)常見(jiàn)尺寸為16*16;20*20;24*24;32*32這四種輸出尺寸。這些尺寸均可以清晰的顯示在常規(guī)的顯示器上。TDesign 最終選擇以16*16px 的尺寸作為圖標(biāo)繪制的統(tǒng)一柵格尺寸

 

 

 

我記得最早入行的時(shí)候畫(huà)icon就用的這種柵格。但是我不太喜歡,因?yàn)樵趯?shí)際的設(shè)計(jì)之中會(huì)出現(xiàn)好多問(wèn)題。當(dāng)時(shí)的我是無(wú)法解決的。


2-2、輪廓與模板

 

面對(duì)各式各樣的icon我們?cè)谏弦徊接辛藮鸥瘢酉聛?lái)就要處理在柵格里如何讓形狀不同的icon在視覺(jué)上大小是一致的,在視覺(jué)上是平衡的。所以轉(zhuǎn)對(duì)不同形狀的icon在柵格里所占的輪廓規(guī)范就產(chǎn)生了?;具@個(gè)輪廓都是一樣的。因?yàn)樗且粋€(gè)很基礎(chǔ)的東西。

 

 

但其實(shí)可能是我技術(shù)的問(wèn)題。在過(guò)往的很多次設(shè)計(jì)中如果你完全按照這個(gè)輪廓去執(zhí)行。做出來(lái)的icon你會(huì)發(fā)現(xiàn)其實(shí)在視覺(jué)上還是會(huì)存在問(wèn)題的,我都會(huì)在做一次優(yōu)化。不過(guò)這很大可能是我技術(shù)和設(shè)計(jì)能力的問(wèn)題吧。

 

 

2-3、設(shè)計(jì)細(xì)節(jié)

 

即使有了規(guī)范,柵格輪廓等。但是往往我們?cè)谠O(shè)計(jì)制作的時(shí)候還是會(huì)有很多的細(xì)節(jié)需要去處理的。這樣我們的設(shè)計(jì)才會(huì)更專(zhuān)業(yè)。因?yàn)槲矣胊nt 規(guī)范比比較多所以。我們就一起看一下ant的規(guī)范里對(duì)icon設(shè)計(jì)細(xì)節(jié)的一些建議。

 

在ant的圖標(biāo)設(shè)計(jì)規(guī)范中,對(duì)icon圖標(biāo)進(jìn)行了、形式感、韻律、平衡、辨識(shí)這幾方面對(duì)我們?cè)谠O(shè)計(jì)和制作icon可能遇到的問(wèn)題給了一些建議。

 

Ant Design圖標(biāo)設(shè)計(jì)建議詳情: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分類(lèi)

 

以上的內(nèi)容主要在探討一類(lèi)icon圖標(biāo)的設(shè)計(jì)。那就是中后臺(tái)的圖標(biāo)設(shè)計(jì)。但其實(shí)icon圖標(biāo)是有很多的分類(lèi)的。交互性圖標(biāo)、裝飾性圖標(biāo)、說(shuō)明性圖標(biāo)

 

3-1、交互性圖標(biāo)

 

這類(lèi)圖標(biāo)主要用于應(yīng)用程序的界面設(shè)計(jì),它們可以向用戶傳遞某種信息,引導(dǎo)用戶執(zhí)行特定操作,同時(shí)也允許用戶向程序傳遞控制信息。例如,登陸注冊(cè)按鈕、開(kāi)關(guān)按鈕、數(shù)量按鈕、點(diǎn)贊、轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。

 

 

3-2、裝飾性圖標(biāo)

 

這類(lèi)圖標(biāo)主要用于提高頁(yè)面設(shè)計(jì)性,它們可以加深個(gè)性化設(shè)計(jì)風(fēng)格,提升用戶線上體驗(yàn)感,迎合受眾群的偏好,提升設(shè)計(jì)親和度。例如,符合節(jié)日需求的線上活動(dòng)呼應(yīng)圖標(biāo)、個(gè)性化圖標(biāo)等都屬于裝飾性圖標(biāo)。

 

 

3-3、說(shuō)明性圖標(biāo)

 

這類(lèi)圖標(biāo)主要用于闡明信息,它們是區(qū)分不同功能或內(nèi)容的視覺(jué)標(biāo)記,簡(jiǎn)單地說(shuō),就是對(duì)功能的解釋說(shuō)明。例如,象形圖標(biāo)、隱喻圖標(biāo)、工具圖標(biāo)和混合圖標(biāo)等。

 

 

此外,根據(jù)圖標(biāo)的具體功能和用途,還可以將圖標(biāo)分為表意圖標(biāo)(又稱(chēng)解釋性圖標(biāo))和標(biāo)識(shí)性圖標(biāo)。表意圖標(biāo)是通過(guò)原本不存在實(shí)物的符號(hào)表達(dá)某些特定的含義或操作行為,這些符號(hào)逐漸繼承了一些象形符號(hào)的特性并不斷演化。例如,“箭頭”已經(jīng)從最初的“弓箭”衍生為一種特定的表意符號(hào)。而標(biāo)識(shí)性圖標(biāo)主要用于標(biāo)識(shí)品牌、產(chǎn)品或服務(wù),它們通常具有獨(dú)特的設(shè)計(jì)風(fēng)格和視覺(jué)效果,以便在市場(chǎng)上脫穎而出。例如,蘋(píng)果公司的蘋(píng)果圖標(biāo)就屬于標(biāo)識(shí)性圖標(biāo)。

為我以往的設(shè)計(jì)經(jīng)驗(yàn)里大部分都是在做B端的設(shè)計(jì)和交互工作。在我的理解里圖標(biāo)就分兩類(lèi)。1、規(guī)規(guī)矩矩的ICON。2、花里胡哨的ICON。就這么簡(jiǎn)單。

 

 

 

 

第二章 實(shí)戰(zhàn)我搞了一套ICON

 

再優(yōu)秀的理論也只能是理論。實(shí)踐才是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。這不是我說(shuō)的。這是老馬(卡爾·海因里希·馬克思)說(shuō)的。所以就請(qǐng)大家進(jìn)入我的實(shí)踐過(guò)程吧。

 

 

 

1、需求背景

 

需要還是要從最初開(kāi)始講。我負(fù)責(zé)的SAAS平臺(tái)要迭代換框架。然后對(duì)界面視覺(jué)交互、產(chǎn)品功能都迭代一個(gè)大的版本。這次設(shè)計(jì)部分的任務(wù)就我來(lái)負(fù)責(zé)。

 

因?yàn)槭谴蟮牡铩K赃@次icon設(shè)計(jì)的需求是跟著整個(gè)平臺(tái)一起走的。你要設(shè)計(jì)新的視覺(jué)還用之前的那套老icon顯示是不合適的。在者說(shuō)那套icon的質(zhì)量也是一個(gè)難以想象的存在。是開(kāi)發(fā)直接從網(wǎng)上個(gè)個(gè)平臺(tái)找的。所以這次這個(gè)平臺(tái)的視覺(jué)迭代就有了搞一套適合我們界面和行業(yè)的icon圖標(biāo)。

 

 

這是我們SaaS平臺(tái)的設(shè)計(jì)價(jià)值觀

 

2、設(shè)計(jì)原則

 

因?yàn)槭窍扔辛私缑妫鲆惶着浜辖缑娴牟藛蝘con圖標(biāo)。我想我們的icon要符合整體頁(yè)面的風(fēng)格。不說(shuō)給界面加分了,也不破壞我辛苦做的界面視覺(jué)。

 

結(jié)合我們品牌的logo圖標(biāo)的特點(diǎn)。讓我們的icon也擁有獨(dú)屬于他們自己的絲帶偶。把公司logo的設(shè)計(jì)特點(diǎn)加入到我們這次icon的設(shè)計(jì)原則里。

 

 

是的優(yōu)美,是我們這一套icon的特點(diǎn)。也是從我們logo里提取出來(lái)的設(shè)計(jì)要點(diǎn)。然后把他運(yùn)用到icon設(shè)計(jì)里。

 

3、規(guī)范的制定ICON的制作

 

規(guī)范的知道基本是使用的阿里巴巴矢量圖庫(kù)早期的那個(gè)上傳圖標(biāo)模板的AI文件。為什么會(huì)選擇使用這個(gè)呢。因?yàn)槲覀僑aaS平臺(tái)的所以icon都是從阿里巴巴矢量圖庫(kù)引用的。我要把我做的icon上傳到阿里巴巴矢量圖片他們使用,而不是直接切圖給他們用。

 

 

在這套圖標(biāo)設(shè)計(jì)的時(shí)候,其實(shí)并沒(méi)有完全的按照大廠的設(shè)計(jì)規(guī)范進(jìn)行。在很多的細(xì)節(jié)上做了調(diào)整。為的是達(dá)到更好的效果。當(dāng)然。也有很多遺憾。在很多的方面并不是很標(biāo)準(zhǔn)。在下次優(yōu)化設(shè)計(jì)時(shí),會(huì)更好的去執(zhí)行制定的設(shè)計(jì)原則和設(shè)計(jì)規(guī)范。

 

 

 

第三章 拓展知識(shí)(標(biāo)志設(shè)計(jì)淺談)

 

之所以寫(xiě)這部分內(nèi)容,是因?yàn)槲矣X(jué)得在平面設(shè)計(jì)里標(biāo)志設(shè)計(jì)的知識(shí)對(duì)我們現(xiàn)在圖標(biāo)設(shè)計(jì)是很有用的??梢允菆D標(biāo)設(shè)計(jì)本身就是適應(yīng)了顯示屏后的標(biāo)志設(shè)計(jì)。如果你搞懂了標(biāo)志設(shè)計(jì)的系統(tǒng)知識(shí),那圖標(biāo)設(shè)計(jì)不就是手拿把掐的事了。標(biāo)志設(shè)計(jì)就是殺雞的牛刀。

 

一般我們說(shuō)到標(biāo)識(shí)設(shè)計(jì)可能大概覽的就是會(huì)認(rèn)為是品牌形象設(shè)計(jì),也就是LOGO設(shè)計(jì)。是的我大學(xué)學(xué)的標(biāo)志設(shè)計(jì)就是在講品牌LOGO的設(shè)計(jì)。但我現(xiàn)在理解的標(biāo)志設(shè)計(jì)可能意義更廣泛。因?yàn)樵诤芏嗟臅r(shí)候我是把標(biāo)志設(shè)計(jì)的知識(shí)和原理來(lái)應(yīng)用到其他的設(shè)計(jì)方面。

 

標(biāo)志是品牌形象核心部分(英文俗稱(chēng)為:logo),是表明事物特征的識(shí)別符號(hào)。它以單純、顯著、易識(shí)別的形象、圖形或文字符號(hào)為直觀語(yǔ)言,除表示什么,代替什么之外,還具有表達(dá)意義、情感和指令行動(dòng)等作用。

 

 

LOGO、標(biāo)志、徽標(biāo)、商標(biāo)是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物,它不同于古代的印記,現(xiàn)代標(biāo)志承載著企業(yè)的無(wú)形資產(chǎn),是企業(yè)綜合信息傳遞的媒介。

 

 

1、標(biāo)志設(shè)計(jì)怎么來(lái)的

 

標(biāo)志的來(lái)歷,可以追溯到上古時(shí)代的"圖騰"。最初人們將圖騰刻在居住的洞穴和勞動(dòng)工具上,后來(lái)就作為戰(zhàn)爭(zhēng)和祭祀的標(biāo)志,成為族旗、族徽。國(guó)家產(chǎn)生以后,又演變成國(guó)旗、國(guó)徽。

 

古代人們?cè)谏a(chǎn)勞動(dòng)和社會(huì)生活中,為方便聯(lián)系、標(biāo)示意義、區(qū)別事物的種類(lèi)特征和歸屬,不斷創(chuàng)造和廣泛使用各種類(lèi)型的標(biāo)記,如路標(biāo)、村標(biāo)、碑碣、印信紋章等。

 

到本世紀(jì),公共標(biāo)志、國(guó)際化標(biāo)志開(kāi)始在世界普及。隨著社會(huì)經(jīng)濟(jì)、政治、科技、文化的飛躍發(fā)展,21世紀(jì)以來(lái)經(jīng)過(guò)精心設(shè)計(jì)從而具有高度實(shí)用性和藝術(shù)性的標(biāo)志,已被廣泛應(yīng)用于社會(huì)一切領(lǐng)域,對(duì)人類(lèi)社會(huì)性的發(fā)展與進(jìn)步發(fā)揮著巨大作用和影響。

 

 

2、標(biāo)志的作用

 

隨著“讀圖”時(shí)代的到來(lái),標(biāo)志以簡(jiǎn)潔、 獨(dú)特、易識(shí)別的圖形符號(hào)傳達(dá)著特定的含 義和綜合信息,成為人們相互交流和傳遞 信息、溝通情感、表達(dá)愿望的視覺(jué)語(yǔ)言。 特別是在注重品牌效能與品質(zhì)的今天,標(biāo) 志發(fā)揮著重要的作用。 標(biāo)志最主要的功能是以其簡(jiǎn)潔、醒目、 美觀的圖形符號(hào)傳遞信息。

 

 

2-1、區(qū)分商品

 

標(biāo)志能夠表述某種組織、某項(xiàng)活動(dòng)或某 企業(yè)品牌的性質(zhì)、服務(wù)和宗旨。標(biāo)志作為一種視覺(jué)識(shí)別符號(hào),能有效 區(qū)別各種品牌給消費(fèi)者的印象。也就是說(shuō), 它能夠表述出個(gè)性特點(diǎn),使其從眾多同類(lèi) 產(chǎn)品的標(biāo)志中被區(qū)別出來(lái)。

 

市場(chǎng)上的商品花色、品種繁多。在商品的海洋里,消費(fèi)者只能根據(jù)不同的 標(biāo)志區(qū)別同類(lèi)商品的不同品牌和不同生產(chǎn)廠家,并以此進(jìn)行比較與選擇。商業(yè)企業(yè)在經(jīng)營(yíng)商品時(shí),有的 也用自己的標(biāo)志表示各自的經(jīng)營(yíng)特色。標(biāo)志的這種作用是其取得法律保護(hù)的主要依據(jù),在國(guó)際貿(mào)易中, 這種作用也得到了普遍的認(rèn)可。

 

2-2、樹(shù)立形象

 

標(biāo)志是現(xiàn)代經(jīng)濟(jì)的產(chǎn)物,它不同于古代的印記?,F(xiàn)代標(biāo)志承載著企業(yè)的無(wú)形資產(chǎn),是企業(yè)綜合信息 傳遞的媒介。對(duì)于企業(yè)而言,不僅要表明“我是誰(shuí)”,還要說(shuō)明“我怎么樣”。標(biāo)志通過(guò)在不同場(chǎng)合、 不同載體的反復(fù)出現(xiàn),使人們?cè)诳吹綐?biāo)志的同時(shí),就能自然聯(lián)想到產(chǎn)品

 

可口可樂(lè)歐洲太平洋集團(tuán)公司前總裁喬戈斯曾經(jīng)說(shuō):“可口可樂(lè)成功的原因很簡(jiǎn)單,許多制造商只 熱衷于為消費(fèi)者提供產(chǎn)品,而大多數(shù)消費(fèi)者則需要產(chǎn)品的牌子。請(qǐng)記住,一聽(tīng)可口可樂(lè)不只是飲料,它 還是一個(gè)朋友。

 

2-3、品牌價(jià)值

 

如今的社會(huì),享用名牌似乎成為身份的象征、地位的體現(xiàn)和個(gè)人魅力的表現(xiàn),這就使標(biāo)志有了某種 精神的力量,這種精神力量代表著品牌的價(jià)值。

 

名牌價(jià)值是無(wú)形資產(chǎn),無(wú)形資產(chǎn)的價(jià)值遠(yuǎn)遠(yuǎn)高于企業(yè)的有形資產(chǎn)價(jià)值和年銷(xiāo)售額。“可口可樂(lè)”“百 事可樂(lè)”的品牌價(jià)值都達(dá)到上百億美元。標(biāo)志在各個(gè)國(guó)家都受到法律的保護(hù),從這個(gè)意義上說(shuō),名牌標(biāo) 志是企業(yè)的無(wú)價(jià)之寶,絲毫也不為過(guò)。

 

美國(guó)可口可樂(lè)公司的一位經(jīng)理說(shuō),即使可口可樂(lè)工廠一夜之間被毀壞殆盡,公司也能憑借“可口可樂(lè)” 標(biāo)志的聲譽(yù)從銀行立即貸款重建工廠??梢?jiàn),對(duì)擁有名牌標(biāo)志的企業(yè)來(lái)說(shuō),標(biāo)志就是企業(yè)發(fā)展的一種依 托與保證,是一筆巨大的無(wú)形資產(chǎn)。

 

2-4、美化產(chǎn)品

 

標(biāo)志作為企業(yè)和產(chǎn)品形象的象征,它用無(wú)聲的具有美感的圖形語(yǔ)言宣傳著產(chǎn)品的質(zhì)量與特色。標(biāo)志 設(shè)計(jì)的好壞直接影響企業(yè)和產(chǎn)品的信譽(yù)度。成功的標(biāo)志不僅代表了產(chǎn)品本身,也增強(qiáng)了產(chǎn)品的魅力。

 

著名的香奈兒(CHANEL)的標(biāo)志以簡(jiǎn)約明快的圖形和相得益彰的字體搭配給人以典雅、高貴之感。 香奈兒于 1913 年由創(chuàng)始人加布里埃·可可·香奈兒(Gabrielle Chanel)在法國(guó)巴黎創(chuàng)立,其標(biāo)志是由兩 個(gè)背向的“C”重疊而成,圖形平衡對(duì)稱(chēng),充滿溫文爾雅、端莊聰慧之氣,

 

3、標(biāo)志的創(chuàng)意原則

 

標(biāo)志的本質(zhì)是信息傳播,這是現(xiàn)代的 標(biāo)志設(shè)計(jì)的核心。標(biāo)志的設(shè)計(jì)創(chuàng)意應(yīng)該從 信息入手,從功能需要出發(fā)。需要告訴大家的是什么,而不是把形式作 為設(shè)計(jì)的唯一出發(fā)點(diǎn)。

 

3-1、獨(dú)特性

 

在標(biāo)志設(shè)計(jì)中,有的人喜歡造型簡(jiǎn)單的,這得到了大部分人的認(rèn)可;而有的人則認(rèn)為在簡(jiǎn)單中可適 當(dāng)復(fù)雜,這要取決于實(shí)際的用途。不論簡(jiǎn)單或復(fù)雜,需要把握一點(diǎn):標(biāo)志需要具備的特質(zhì)是獨(dú)特。沒(méi)有 哪個(gè)企業(yè)甘愿平凡,大多數(shù)企業(yè)都在竭盡所能地建立自己獨(dú)特的企業(yè)文化和市場(chǎng)經(jīng)營(yíng)特色,所以在設(shè)計(jì) 標(biāo)志時(shí)必須深思熟慮。

 

獨(dú)特性是標(biāo)志設(shè)計(jì)的最基本要求。標(biāo)志的形式法則和特殊性就是具備各自獨(dú)特的個(gè)性,不允許絲毫 的雷同。這就要求標(biāo)志的設(shè)計(jì)必須做到獨(dú)特、別致,追求創(chuàng)造與眾不同的視覺(jué)感受,給人留下深刻的印象。

 

3-2、醒目

 

醒目的設(shè)計(jì)是所有標(biāo)志希望達(dá)到的視覺(jué)效果。優(yōu)秀的標(biāo)志能夠吸引人,給人以較強(qiáng)的視覺(jué)沖擊力。 因?yàn)橹挥幸鹑说淖⒁?,才能使?biāo)志所要傳達(dá)的信息對(duì)人產(chǎn)生影響。在標(biāo)志設(shè)計(jì)中,注重對(duì)比、強(qiáng)調(diào)視 覺(jué)形象的鮮明與生動(dòng),這是產(chǎn)生醒目性的重要形式要素。

 

3-3、簡(jiǎn)單容易記憶

 

標(biāo)志要易于識(shí)別、記憶和傳播。這并不是說(shuō)簡(jiǎn)單化,而是指以少勝多、立意深刻、形象明顯、雅俗共賞。 通俗性強(qiáng)的標(biāo)志具有公眾認(rèn)同面大、親切感強(qiáng)等特點(diǎn)。對(duì)于商標(biāo)而言,一個(gè)易記的商標(biāo)形象首先要有一個(gè)與眾不同的響亮、動(dòng)聽(tīng)的商標(biāo)名稱(chēng),以好的商標(biāo)名稱(chēng)為基礎(chǔ),綜合考慮商標(biāo)的特點(diǎn),選擇最佳方案, 再進(jìn)行具體的圖形設(shè)計(jì)。

 

3-4、標(biāo)志顏色

 

標(biāo)志色彩的配置一般有三種基本方法;

 

-是原色配合
原色的顏色單純、強(qiáng)烈、鮮艷奪目,藝術(shù)效果和傳播效果顯著。

 

-是同類(lèi)色配合
只選擇一種顏色,采用依靠色彩明亮度變化的辦法,如用桔紅、桔黃、中黃、淺黃進(jìn)行搭配,形成由淺入深的過(guò)度色視覺(jué),能表達(dá)出動(dòng)態(tài)感。

 

-是補(bǔ)色配合
這種色彩配置,對(duì)比鮮明,圖形格外醒目鮮艷,能給人以很強(qiáng)的視覺(jué)沖擊效果。

 

4、標(biāo)志設(shè)計(jì)形式美法則

 

標(biāo)志設(shè)計(jì)也是藝術(shù)設(shè)計(jì)的一種。所以他也同樣適用于我們?cè)O(shè)計(jì)里的形式美法則。用這些法則去設(shè)計(jì)你的標(biāo)志或ICON讓他們的信息傳遞更準(zhǔn)確。視覺(jué)表現(xiàn)更優(yōu)秀。

 

形式美法則
標(biāo)志設(shè)計(jì)是一種視覺(jué)藝術(shù),人們?cè)谟^看一個(gè)標(biāo)志圖形的同時(shí)、也是一種審美的過(guò)程。在審美過(guò)程中,人們把視覺(jué)所感受的圖形,用社會(huì)所公認(rèn)的相對(duì)客觀的標(biāo)準(zhǔn)進(jìn)行評(píng)價(jià)、分析和比較,引起美感沖動(dòng)。

 

4-1、變化與統(tǒng)一

 

任何一個(gè)完美的標(biāo)志圖形必須具有統(tǒng)一性,這種統(tǒng)一性越單純,越有美感。但只有統(tǒng)一而無(wú)變化,則不能使人感到有趣味、美感也不能持久,這是因?yàn)槿鄙俅碳さ木?,變化是刺激的源泉,有喚起興趣的作用,但變化也要有規(guī)律,無(wú)規(guī)律的變化,然起混亂和繁雜。因此變化必須在統(tǒng)一中產(chǎn)生。

 

4-2、對(duì)稱(chēng)于均衡

 

均衡是在不對(duì)稱(chēng)中求平穩(wěn)。均衡可分為調(diào)和均衡和對(duì)比均衡兩大類(lèi),調(diào)和均衡是指同形等量,即在中軸線兩面所配列的圖形的形狀、大小、分量相等或相同。除圖案造型的均衡外,還有量的均衡、色的均衡,在標(biāo)志圖形設(shè)計(jì)時(shí)必須相應(yīng)考慮,以追求標(biāo)志視覺(jué)張力。

 

4-3、節(jié)奏與韻律

 

節(jié)奏是韻律的條件,韻律是節(jié)奏的深化,節(jié)奏也就是“律”,這種律不僅表現(xiàn)在音樂(lè)上,而且反映在其他方面,當(dāng)物體失去均衡則會(huì)引起運(yùn)動(dòng)。此種運(yùn)動(dòng)如有規(guī)律,則稱(chēng)之為“律”。在標(biāo)志圖形設(shè)計(jì)中,如果將線的長(zhǎng)短、粗細(xì)、曲直、方位等進(jìn)行不同程度的變化和巧妙組合,便會(huì)創(chuàng)造出不同感的“律”的形式,歸納起來(lái)分為:循環(huán)體、反復(fù)體及連續(xù)體。

 

4-4、調(diào)和于對(duì)比

 

在標(biāo)志設(shè)計(jì)中,對(duì)比與調(diào)和應(yīng)用極廣,如在大小、方向、虛實(shí)、高低、寬窄、長(zhǎng)短、凹凸、曲直、多少、厚薄、動(dòng)靜以及奇數(shù)與偶數(shù)的對(duì)比。對(duì)比是標(biāo)志圖形取得視覺(jué)特征的途徑,調(diào)和是標(biāo)志完整統(tǒng)一的保證。

 

4-5、比例與尺度

 

任何一個(gè)完美的圖形都必須具備協(xié)調(diào)的比例尺度。在標(biāo)志圖形中常用的比率有整數(shù)比、相加級(jí)數(shù)比、相差級(jí)數(shù)比、等比級(jí)數(shù)比、黃金比等。標(biāo)志設(shè)計(jì)的形式美法則,不能孤立和片面地理解,因?yàn)橐粋€(gè)美圖形的設(shè)計(jì),往往要綜合利用多種法則來(lái)表現(xiàn)。這些法則是相互依賴,相互滲透,相互穿插、互相重疊、相互促進(jìn)的,隨著時(shí)代的變化,審美標(biāo)準(zhǔn)、設(shè)計(jì)手法也在不斷發(fā)展。

 

 

5、標(biāo)志發(fā)展趨勢(shì)

 

近年來(lái),標(biāo)志設(shè)計(jì)發(fā)展越來(lái)越成瘦。總的發(fā)展趨勢(shì)是由復(fù)雜到簡(jiǎn)約、具象到抽象、色彩更多樣話、標(biāo)志的發(fā)展是一個(gè)設(shè)計(jì)相互交融、設(shè)計(jì)風(fēng)格的多樣化過(guò)程。設(shè)計(jì)手段是次要的,目的才是第一位的。更注重的應(yīng)使其商業(yè)性。

 

以下標(biāo)志設(shè)計(jì)趨勢(shì)內(nèi)容引用自標(biāo)志情報(bào)局編譯的作者為Bill Gardner是logolounge.com的創(chuàng)始人的《2023標(biāo)志設(shè)計(jì)趨勢(shì)報(bào)告》。https://www.logonews.cn/logo-design-trends-for-2023.html

 

我們每年收到的所有標(biāo)志清晰解讀并整理成這份報(bào)告并不是一項(xiàng)容易的工作??偣渤^(guò)30,000個(gè)標(biāo)志,對(duì)我和一群杰出的設(shè)計(jì)師來(lái)說(shuō),這就像是世界上最大規(guī)模的配對(duì)游戲。最初,我們歸納出大約60-70個(gè)組別,然后將它們進(jìn)一步劃分為具有最大影響力的15個(gè)類(lèi)別。

我只是通過(guò)對(duì)提交的30,000多個(gè)標(biāo)志進(jìn)行徹底分析(還有國(guó)際上每個(gè)重要品牌的更新和重塑)后呈現(xiàn)的報(bào)告。因此你要了解的是,就像任何氣象學(xué)家會(huì)告訴你的那樣,他們不能保證天氣預(yù)報(bào)的準(zhǔn)確性。同樣,我們也無(wú)法總是預(yù)測(cè)設(shè)計(jì)師將向哪個(gè)趨勢(shì)方向發(fā)展,這就是這份報(bào)告能讓我們保持警惕并感到有趣的原因所在

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

 

重新讀了一遍標(biāo)志設(shè)計(jì)的內(nèi)容。果然受益匪淺的感覺(jué)。還是要時(shí)常溫故而知新的。學(xué)習(xí)了大廠的ICON設(shè)計(jì)規(guī)則也是很有收獲的。



作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTU5NTM3Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.gerard.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 欧美狂野乱码一二三四区 | 好湿好滑好硬好爽好深视频 | 国产成人8x视频一区二区 | 国产亚洲精品线观看不卡 | 97午夜伦伦电影理论片 | 国产亚洲精品 在线视频 香蕉 | 久久久久免费视频 | 人妻夜夜爽99麻豆AV | 无码一区二区在线欧洲 | 伊人天天躁夜夜躁狠狠 | 亚州AV中文无码乱人伦在线 | 老师掀开短裙让我挺进动态 | 男人J桶进男人屁股过程 | 精品人妻伦一二三区久久AAA片 | 亚洲精品色情婷婷在线播放 | 麻豆国产99在线中文 | 免费精品在线视频 | 亚洲精品线在线观看 | 老师掀开短裙让我挺进动态 | 国产精品爽爽久久久久久竹菊 | 国产精品乱人无码伦AV在线A | 9久高清在线不卡免费无吗视频 | 秋霞电影网视频一区二区三区 | 亚洲精品拍拍央视网出文 | 98久久人妻无码精品系列蜜桃 | 超碰97人人做人人爱少妇 | 亚洲三级在线看 | 麻豆免费观看高清完整视频 | 久久久无码精品亚洲A片猫咪 | 香港论理午夜电影网 | 色婷婷AV99XX| 岳扒开让我添 | 国产精品欧美一区二区在线看 | 巨乳中文无码亚洲 | 一个人看的HD免费高清视频 | 久久精品国产在热亚洲完整版 | 性色AV一区二区三区V视界影院 | 成人a视频在线观看 | 天天拍拍国产在线视频 | 网红主播 国产精品 开放90后 | 日本一二三区视频在线 |