首頁

3D與UI結(jié)合的設(shè)計(jì)探索

純純

關(guān)于 Big Sur 的新圖標(biāo)的討論很多,很多都在激烈爭(zhēng)論。人們對(duì)蘋果公司沒有將完全扁平設(shè)計(jì)引入 Mac 感到松了一口氣,但分歧并未停止。有些人認(rèn)為這引領(lǐng)一種新的圖標(biāo)表現(xiàn)方式,而有些人則認(rèn)為這是丑到了天際。



但蘋果的設(shè)計(jì)就是這樣,不管你你喜不喜歡,過一段時(shí)間他總會(huì)流行起來。就像iPhone11剛面世時(shí),背面的攝像頭組被無數(shù)人吐槽一樣,而現(xiàn)在這個(gè)設(shè)計(jì)已經(jīng)成了高端機(jī)的標(biāo)板。


大家還能想起來UI扁平化設(shè)計(jì)已經(jīng)流行了多少年了嗎?

從2013年6月11日蘋果發(fā)布iOS7算起,現(xiàn)在已經(jīng)將近8年了,這8年時(shí)間扁平化像颶風(fēng)一般席卷了整個(gè)UI設(shè)計(jì)圈,一夜間幾乎所有的APP UI都被拍扁了。




其中以Instagram的換標(biāo)作為扁平盛行時(shí)代的里程碑



但扁平化設(shè)計(jì)的確已經(jīng)一統(tǒng)江湖太久了,人們似乎已經(jīng)有點(diǎn)厭倦了。其實(shí)設(shè)計(jì)風(fēng)格就是這樣,并沒有絕對(duì)的好與不好,只要審美不疲勞,就可以繼續(xù)流行下去,至于流行多久我們經(jīng)常會(huì)用一個(gè)詞去形容---耐看度。

扁平化帶給我們的是畫面的輕盈和設(shè)計(jì)的高效率,但是缺點(diǎn)也是明顯的,場(chǎng)景表現(xiàn)過于單一的問題,設(shè)計(jì)感體現(xiàn)較為有限,于是很多設(shè)計(jì)師都在嘗試用新的設(shè)計(jì)風(fēng)格替代或者進(jìn)化現(xiàn)在的扁平化設(shè)計(jì)風(fēng)格,今天我們就來探討一下新擬物背景下3D與平面的結(jié)合設(shè)計(jì),能在UI中擦出什么樣的火花。


2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


現(xiàn)在這樣的風(fēng)格會(huì)被我們稱之為重度擬物風(fēng)格,他不好看了?技術(shù)落后了嗎?當(dāng)然不是!只是目前不流行了!

他的特點(diǎn)是強(qiáng)調(diào)光影對(duì)比與物理質(zhì)感,色彩都會(huì)比較偏“暗”,而且伴隨設(shè)計(jì)的往往是難和慢!刻畫一個(gè)細(xì)節(jié)需要很久,在強(qiáng)調(diào)設(shè)計(jì)效率組件化的今天,這種費(fèi)時(shí)又難學(xué)的設(shè)計(jì)方法必然不會(huì)成為主流。


當(dāng)前的UI流行趨勢(shì)是強(qiáng)調(diào)高飽和的色彩搭配(在沒有光影細(xì)節(jié)之下也只有色彩可以玩了),這種風(fēng)格明顯也不符合趨勢(shì),被“淘汰”也就難免了。


從設(shè)計(jì)角度上解析,圖標(biāo)主要是由四方面構(gòu)成:構(gòu)圖+光影+色彩+紋理

而擬物風(fēng)格圖標(biāo)在這四方面更加強(qiáng)調(diào)構(gòu)圖、光影和紋理,而色彩則是更多去搭配紋理質(zhì)感,所以你看到多數(shù)擬物風(fēng)格圖標(biāo)在質(zhì)感上很棒,但是色彩卻沒有那么豐富。




說到新的擬物風(fēng)格,這只是一個(gè)概念,也有稱之為輕擬物,輕偏平,這里并沒有通用的稱呼和預(yù)設(shè)的設(shè)計(jì)方法,一切的UI設(shè)計(jì)風(fēng)格都是為產(chǎn)品本身服務(wù),如果新的設(shè)計(jì)風(fēng)格能讓產(chǎn)品整體體驗(yàn)得到“提升”,哪怕這種提升只是成功獲取到了用戶的注意力,那這個(gè)設(shè)計(jì)就是有價(jià)值的。



所以當(dāng)下如果你的產(chǎn)品中想要吸引目光就要有點(diǎn)與眾不同的東西,要么是獨(dú)門的功能,要么就是吸晴的設(shè)計(jì)。
顯然扁平的彩色圖標(biāo)現(xiàn)在已經(jīng)達(dá)不到這個(gè)效果了,而以前的擬物又顯得有點(diǎn)過時(shí),在這種時(shí)代背景下,新的風(fēng)格必然就會(huì)被碰撞出來。


于是乎我們就會(huì)看到以下的一些大廠“創(chuàng)新”,你不止能看到輕擬物設(shè)計(jì),還能看到“實(shí)物”設(shè)計(jì)......

不得不說,各位設(shè)計(jì)師們還真是拼了...


“哪怕這種提升只是成功獲取到了用戶的注意力,那這個(gè)設(shè)計(jì)就是有價(jià)值的?!睕]毛??!各位加油!


當(dāng)然蘋果BigSur帶給我們的圖標(biāo)設(shè)計(jì)創(chuàng)新更加有趨勢(shì)意義,這種3D+平面的設(shè)計(jì)組合方法更加能給我們一些設(shè)計(jì)啟迪和思考,并且這種3D圖標(biāo)與之前的擬物風(fēng)格有著明顯的視覺區(qū)別

我用3D重構(gòu)了一個(gè)計(jì)算器icon,以此為例來進(jìn)行分解,如下:

與2D設(shè)計(jì)方法設(shè)計(jì)圖標(biāo)一致,都是先勾畫圖形(建模),然后填色、加材質(zhì)和燈光,但不同的是在3D環(huán)境下,這一切都比2D環(huán)境下簡(jiǎn)單了,而且視覺效果更佳,整體畫面感更佳立體,質(zhì)感更加飽滿,并且根據(jù)渲染器的參數(shù)調(diào)節(jié)和材質(zhì)質(zhì)感的不同,即使是在同一模型下,也能制造出很多種不同的視覺體驗(yàn)。



圖標(biāo)背板的選擇上,由于選擇了3D作為主體表現(xiàn),3D背板過于搶視線,圖標(biāo)為了突出主體而非背景,建議使用2D平面背板與3D前景圖標(biāo)進(jìn)行結(jié)合。

3D設(shè)計(jì)圖標(biāo)的確有一些天然的優(yōu)勢(shì),特別是在質(zhì)感和光感的表達(dá)準(zhǔn)確度上,是絕對(duì)超過2D的。
但是2D圖標(biāo)在一些風(fēng)格的設(shè)計(jì)也是很難替代的,比如線性圖標(biāo)和漸變風(fēng)格圖標(biāo)。




3D設(shè)計(jì)的確可以提升UI整體的視覺氛圍,并且現(xiàn)在在一些APP中已經(jīng)可以看到小范圍3D案例了(比如支付寶),但是多是以插畫的形式出現(xiàn),其實(shí)與產(chǎn)品UI還是有一定距離的。

未來3D設(shè)計(jì)一定會(huì)是UI中大展身手,但是目前的常見的3D設(shè)計(jì)軟件實(shí)在是太龐大了,我與許多3D行業(yè)的同行聊天的時(shí)候,大家普遍的認(rèn)知是現(xiàn)在的3D軟件(包括C4D)的實(shí)際最佳場(chǎng)景依然是動(dòng)畫設(shè)計(jì),UI的中的3D屬于非常輕量級(jí)的,用現(xiàn)在主流的3D設(shè)計(jì)軟件做UI應(yīng)用案例,有點(diǎn)用巡航導(dǎo)彈打蚊子的感覺,而且這個(gè)蚊子還是距離一米以內(nèi)。這有點(diǎn)像當(dāng)年的PS來做UI,雖然可以完成但是效率不高,學(xué)習(xí)曲線也高,于是Sketch和Figma這樣的產(chǎn)品順理成章的取代了PS在UI界的地位。


當(dāng)然趨勢(shì)不可避免,效率也會(huì)提升,且方法總是有的,降低門檻,提升效率一直是我們的追求!

原文地址:站酷
作者:殘酷de樂章

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



超全!B端通用界面設(shè)計(jì)法則全方位科普!

周周


很多產(chǎn)品經(jīng)理和設(shè)計(jì)師在設(shè)計(jì) B 端產(chǎn)品界面的時(shí)候不知道該怎么辦,今天筆者給大家匯總了一些 B 端典型界面及其設(shè)計(jì)原則,幫助大家從容應(yīng)對(duì)界面設(shè)計(jì),不再不知所措。

Dashboard

Dashboard 頁通常作為產(chǎn)品的首頁出現(xiàn),產(chǎn)品內(nèi)各種重要的數(shù)據(jù)和信息都會(huì)展現(xiàn)在 Dashboard 上。用戶可以通過點(diǎn)擊 Dashboard 上的卡片或卡片上某條數(shù)據(jù),快速鏈接到詳情,這大大縮短了用戶獲取信息的路徑。產(chǎn)品團(tuán)隊(duì)也可以通過 Dashboard 頁,向用戶傳遞產(chǎn)品迭代、運(yùn)營活動(dòng)等內(nèi)容。

1. 設(shè)計(jì)原則

模塊獨(dú)立

Dashboard 是由承載不同內(nèi)容的卡片組成的,每塊卡片的內(nèi)容都要獨(dú)立,不該交叉。

有效統(tǒng)計(jì)

Dashboard 上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實(shí)所需,如果統(tǒng)計(jì)數(shù)據(jù)不對(duì)用戶產(chǎn)生任何價(jià)值,那還不如不統(tǒng)計(jì),否則會(huì)干擾用戶。

短路徑導(dǎo)航

了解用戶需要使用 Dashboard 的核心目標(biāo),為用戶通過 Dashboard 達(dá)到數(shù)據(jù)詳情頁提供最短的路徑導(dǎo)航。

2. 工作臺(tái)

使用場(chǎng)景

將用戶需要待辦的事項(xiàng)、事項(xiàng)處理的進(jìn)度等都完整的展示出來,方便用戶隨時(shí)查看,提升用戶的工作效率。

核心功能

核心統(tǒng)計(jì)數(shù)據(jù)、待辦任務(wù)、快捷入口、通知公告等。

設(shè)計(jì)建議

  • 展示與使用角色日常工作相關(guān)模塊,并且將重要模塊放在首屏。
  • 總模塊數(shù)量盡量控制在 59 個(gè)。
  • 不同的角色需求不同,應(yīng)提供基于角色的差異化視圖。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

3. 新手引導(dǎo)

使用場(chǎng)景

當(dāng)新用戶第一次使用產(chǎn)品時(shí),為了減少用戶的困難和快速完成用戶的任務(wù),新手引導(dǎo)頁可以將核心操作鏈路展現(xiàn)給用戶。

核心功能

產(chǎn)品介紹、核心功能使用手冊(cè)、相關(guān)內(nèi)容指引。

設(shè)計(jì)建議

  • 引導(dǎo)步驟盡量控制在 35 步。
  • 引導(dǎo)語盡量簡(jiǎn)短并闡明要義。
  • 可以添加視頻學(xué)習(xí)窗口,幫助用戶快速上手。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

4. 監(jiān)控頁

使用場(chǎng)景

監(jiān)控頁是數(shù)據(jù)可視化頁面中的一種,它通過一系列對(duì)數(shù)據(jù)高度概括的圖表來展現(xiàn)系統(tǒng)的核心指標(biāo)。指標(biāo)監(jiān)控頁的使用者通常是管理者(即決策者),他們需要看到系統(tǒng)整體的運(yùn)行狀態(tài),監(jiān)控全局?jǐn)?shù)據(jù),從而調(diào)整自己的決策。

核心功能

關(guān)鍵指標(biāo)統(tǒng)計(jì)。

設(shè)計(jì)建議

  • 展示決策者關(guān)注的核心指標(biāo),并將重要模塊靠前展示。
  • 使用合理的圖表展現(xiàn)數(shù)據(jù)。
  • 圖表配色要符合數(shù)據(jù)的特性,例如警示用黃色。
  • 允許用戶可以下鉆查看詳情。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

5. 分析頁

使用場(chǎng)景

分析頁也是數(shù)據(jù)可視化頁面中的一種,它通過對(duì)系統(tǒng)多維度的詳細(xì)分析來展示系統(tǒng)的情況,從而使使用者可以發(fā)現(xiàn)問題,并盡早找出解決辦法。監(jiān)控頁重在總覽,而分析頁重在明細(xì),因此,分析頁的使用者通常是執(zhí)行者。

核心功能

關(guān)鍵指標(biāo)明細(xì)分析。

設(shè)計(jì)建議

  • 展示執(zhí)行者關(guān)注的明細(xì)指標(biāo),并將重要模塊靠前展示。
  • 使用合理的圖表展現(xiàn)數(shù)據(jù)。
  • 明細(xì)數(shù)據(jù)模塊不宜過多,59 個(gè)為宜。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

表格頁

表格頁可以處理大量的數(shù)據(jù)條目,同時(shí)可以導(dǎo)航至對(duì)應(yīng)數(shù)據(jù)的詳情頁。在表格頁中,用戶可以查詢自己所需要的數(shù)據(jù)條目,以及對(duì)比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。

1. 設(shè)計(jì)原則

模塊清晰

表格頁通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁器等模塊組成,要保證模塊間層次合理與清晰。

數(shù)據(jù)格式

表格頁中最大的模塊為表格區(qū),該區(qū)域由列組成,列由數(shù)據(jù)構(gòu)成,列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務(wù)及用戶的需求,例如“星期三”不能表現(xiàn)成“星期 3”。

數(shù)據(jù)對(duì)齊

對(duì)齊方式合理的數(shù)據(jù),有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對(duì)齊方式為數(shù)值右對(duì)齊,文本左對(duì)齊,特殊情況居中對(duì)齊。

2. 使用場(chǎng)景

全表格頁是最常見的產(chǎn)品界面,全表格頁主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁器組成。表格區(qū)是表格頁中的主角,當(dāng)界面數(shù)據(jù)只需要一張表呈現(xiàn)的時(shí)候,使用全表格頁。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁器。

設(shè)計(jì)建議

  • 將重要的字段和用戶使用頻率較高的字段放置在表格靠前的位置。
  • 表格中重要的字段和數(shù)據(jù)保證讓用戶可以看完整。
  • 表格中的時(shí)間、狀態(tài)、操作欄等,以及其他業(yè)務(wù)規(guī)定的字段,需保持完整展示。
  • 表格上方的篩選條件一次性展示不宜過多,建議 3-8 個(gè)左右。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

3. 左樹右表頁

使用場(chǎng)景

左樹右表頁的界面布局基本與全表格頁差不多,只不過其多了一顆左側(cè)的樹來幫助用戶導(dǎo)航。

核心功能

導(dǎo)航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁器。

設(shè)計(jì)建議

  • 導(dǎo)航樹上的文字盡量展示完整,便于用戶定位信息。
  • 導(dǎo)航樹的層級(jí)不可太深,控制在 4 層以內(nèi)。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

4. 上下表格頁

使用場(chǎng)景

上下表格頁是表格嵌套表格幻化過來的,通常上表格為主表,下表格為子表,子表展示了主表中某條數(shù)據(jù)的詳情。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁器。

設(shè)計(jì)建議

  • 主表數(shù)據(jù)對(duì)應(yīng)的子表數(shù)據(jù)需要符合邏輯且展現(xiàn)清晰。
  • 若主表和子表均數(shù)據(jù)量大,則需要都加入篩選條件。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

4. 左右表格頁

使用場(chǎng)景

左右表格頁與上下表格頁有異曲同工之妙,左右表格頁通常左表為主表,右表為子表。

核心功能

多字段篩選、操作區(qū)、表格區(qū)、分頁器。

設(shè)計(jì)建議

  • 由于表格左右布局,表格列不宜過多,盡量不出現(xiàn)滾動(dòng)條。
  • 左右表格區(qū)分要明顯,保證信息正確歸屬。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

6. 折疊表格頁

使用場(chǎng)景

折疊表格頁的出現(xiàn)通常是頁面上表格的信息需要分組,每一張表格展現(xiàn)一類信息。

核心功能

分組、操作區(qū)、表格區(qū)、分頁器。

設(shè)計(jì)建議

  • 建議加上分組的標(biāo)題及描述信息。
  • 每個(gè)表格為一個(gè)模塊,建議模塊可全部展開與全部折疊。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

表單頁

表單頁是用于信息添加和錄入的頁面類型,用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成,從而提交給系統(tǒng),由系統(tǒng)接收并輸出信息。

1. 設(shè)計(jì)原則

控件合理

通過選擇合理的數(shù)據(jù)錄入控件,及通過合理的信息組織形式,幫助用戶可以快速完成數(shù)據(jù)錄入的任務(wù)。

明確好用

表單頁面中,每個(gè)表單項(xiàng)都要做到自身體驗(yàn)的明確與好用,例如針對(duì)一些有通用值的表單項(xiàng)建議設(shè)置默認(rèn)值,針對(duì)必填項(xiàng)要明確標(biāo)明,針對(duì)表單項(xiàng)標(biāo)題、錯(cuò)誤提示要明確傳達(dá)含義。

清晰反饋

表單錄入完后,允許用戶進(jìn)行返回、取消、清空、保存等操作,并且操作后提供明確的反饋,例如保存成功、保存失敗等。

2. 基礎(chǔ)表單頁

使用場(chǎng)景

表單項(xiàng)較少,表單信息直接平展即可,表單錄入任務(wù)簡(jiǎn)單且快速。

核心功能

表單項(xiàng)、填寫說明、操作按鈕區(qū)。

設(shè)計(jì)建議

  • 表單項(xiàng)盡量單行縱向排列,引導(dǎo)用戶縱向閱讀。
  • 在界面空間有限時(shí),表單項(xiàng)可多個(gè)組合在一行中,進(jìn)行多列排列,建議不超過 3 列。
  • 表單項(xiàng)對(duì)齊方式一致,保證用戶視線流舒適,高效完成數(shù)據(jù)錄入。
  • 表單整體要保持在用戶合理操作范圍,居左或居中。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

3. 高級(jí)表單頁

使用場(chǎng)景

高級(jí)表單頁通常需要用戶填寫大量的信息,這樣大型而復(fù)雜的數(shù)據(jù)錄入任務(wù)需要被拆解為多個(gè)部分進(jìn)行。

核心功能

分組/卡片分組、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

  • 任務(wù)的分組需要有層層遞進(jìn)關(guān)系,而不是無序的分組。
  • 如果任務(wù)分組過多,最好不要超過 5 組,在 25 組之間較為合適,可以采用錨點(diǎn)定位的方式來幫助用戶定位信息。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

4. 分步驟表單頁

使用場(chǎng)景

當(dāng)表單填寫有相應(yīng)的步驟順序時(shí),采用分步驟表單較為合適。

核心功能

步驟條、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

  • 若步驟間有很明確的順序關(guān)系,需在相關(guān)位置進(jìn)行明確的提示。
  • 若有些步驟為非必填,建議也做出合理的展現(xiàn)。
  • 步驟不宜過多,在 25 項(xiàng)為宜。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

5. 帶樹表單頁

使用場(chǎng)景

當(dāng)表單塊歸屬不同的分類時(shí),需要使用帶樹表單頁去處理。

核心功能

導(dǎo)航樹、表單項(xiàng)、操作按鈕區(qū)。

設(shè)計(jì)建議

  • 分類超過 10 項(xiàng),且分類標(biāo)題內(nèi)容較長(zhǎng)時(shí),建議使用樹導(dǎo)航。
  • 分類帶有層級(jí)時(shí),建議使用樹導(dǎo)航。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

詳情頁

詳情頁的作用是向用戶展示一個(gè)對(duì)象的完整信息,它的主要作用是幫助用戶信息瀏覽,同時(shí)允許對(duì)詳情頁整體的數(shù)據(jù)或某部分?jǐn)?shù)據(jù)發(fā)起編輯等操作。

1. 設(shè)計(jì)原則

層次分明

針對(duì)信息較少的詳情,平鋪展示即可;針對(duì)信息量大的詳情,需進(jìn)行合理組織,保證層級(jí)分明。

結(jié)構(gòu)相近

針對(duì)詳情信息的模塊化組織,要求盡量模塊的結(jié)構(gòu)相似,減少復(fù)雜性,降低用戶的理解成本。

2. 基礎(chǔ)詳情頁

使用場(chǎng)景

基礎(chǔ)詳情頁信息量較少,信息復(fù)雜度低,直接平鋪展示即可。

核心功能

詳情信息。

設(shè)計(jì)建議

  • 建議呈現(xiàn)在一張卡片中,直接通過標(biāo)題進(jìn)行區(qū)分。
  • 字段與內(nèi)容要明顯區(qū)分,不可糊在一起。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

3. 高級(jí)詳情頁

使用場(chǎng)景

高級(jí)詳情頁需要展示的內(nèi)容量較大,且復(fù)雜度高,需要拆分為多組來幫助用戶瀏覽信息。

核心功能

卡片、分組、詳情信息。

設(shè)計(jì)建議

  • 分組維度要合理,保證一個(gè)維度講一件事情。
  • 若分組模塊大于 5 項(xiàng),建議使用錨點(diǎn)定位。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

4. 可編輯詳情頁

使用場(chǎng)景

詳情頁中有部分字段由于業(yè)務(wù)需要,會(huì)進(jìn)行修改。

核心功能

詳情信息、可編輯信息。

設(shè)計(jì)建議

  • 可編輯字段通常有兩種情況,一種為常顯編輯,一種為點(diǎn)擊編輯。用戶對(duì)常顯編輯字段操作時(shí),頁面需要對(duì)是否編輯過做出適當(dāng)反饋。
  • 可編輯樣式盡量統(tǒng)一,減輕用戶認(rèn)知負(fù)擔(dān)。

超全!B端通用界面設(shè)計(jì)法則全方位科普!

我們?nèi)绻茏龅綄?duì) B 端通用型界面了然于胸,那么在面對(duì)用戶需求時(shí)才能從容應(yīng)對(duì),舉一反三。不斷總結(jié)和抽象,是我們應(yīng)對(duì)各種需求的不二法寶。




文章來源:優(yōu)設(shè)網(wǎng)    作者:知果日記


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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



2022追波設(shè)計(jì)流行趨勢(shì)

周周

為了保證這篇文章的質(zhì)量,追波年度的每個(gè)作品都超過550贊。在此原則下挑選了828件作品,作品總的大小為2.2G。


相比于《2020年追波設(shè)計(jì)流行趨勢(shì)》多出了328件作品。


總結(jié)

從挑選出的828件作品中,排名前十的作品中9件為B端設(shè)計(jì),另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中:

B端界面設(shè)計(jì)占比476/828,57.4%;

C端界面設(shè)計(jì)占比180/828,21.7%;

視頻動(dòng)效作品占比223/828,26.9%;


明眼人都能看出其中的比重關(guān)系,B端設(shè)計(jì)再次大火,為什么是再次?因?yàn)锽端設(shè)計(jì)之前火過,只不過沒有趕上一個(gè)好的時(shí)代,在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、ToB 、ToG的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過C端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會(huì)再次提升。



追波年度最佳作品

追波年度最佳作品來自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個(gè)贊


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


MetroUI是Windows8的界面設(shè)計(jì)語言,在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí),那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年,通過幾何色塊(MetroUI)實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接,你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng),毛玻璃的多彩高斯模糊漸變風(fēng),年度作品當(dāng)之無愧。


最后來看下按鈕的設(shè)計(jì),正常的按鈕要么文字加色塊,要么左圖標(biāo)加右文字,它設(shè)計(jì)成左文本加右圖標(biāo),更加注重信息的可讀性和易讀性,也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn),視覺點(diǎn)到為止的設(shè)計(jì)理念。


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


易讀性(停頓感)

字體三原則:可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上,不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感,更加適合用戶閱讀。


通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本,“我愛你”、“我Love你”、“我ai你”、“我??你”,哪個(gè)更加會(huì)有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。



曲線

在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢(shì)之一,第一個(gè)設(shè)計(jì)目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中,簽字的文本都是手寫體的感覺,手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息,也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。


除了突顯文本外,曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試,通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。



多彩高斯?jié)u變風(fēng)

多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的,多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對(duì)比來制造畫面的沖突,需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。


多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。




B端界面設(shè)計(jì)


側(cè)邊欄Sidebar

B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì),更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì),側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng),好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì),而是一套實(shí)用美觀可落地的設(shè)計(jì)。



儀表盤設(shè)計(jì)

儀表盤設(shè)計(jì)是一個(gè)很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù),團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同,自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。



流程設(shè)計(jì)

復(fù)雜的事情簡(jiǎn)單化,簡(jiǎn)單的事情標(biāo)準(zhǔn)化,標(biāo)準(zhǔn)的事情流程化,流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn),需要對(duì)業(yè)務(wù)高度抽象,讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。



B端C化

B端C化是B端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺靠齊,國內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外,由于業(yè)務(wù)的發(fā)展,B端產(chǎn)品也開始移動(dòng)化、智能化,國內(nèi)主流還是通過小程序、H5來現(xiàn)實(shí)B端產(chǎn)品C端化。



輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式,彌補(bǔ)無代碼拓展性差、覆蓋場(chǎng)景少的問題。在保有無代碼靈活、易用、快捷的同時(shí),又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng),輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。


輕代碼化將功能進(jìn)行打包,升級(jí)成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版,綁定對(duì)應(yīng)的變量即可使用。




界面設(shè)計(jì)技巧


人文氣息

為什么人加色塊的組合方式能流行起來?還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外,還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。


當(dāng)然企業(yè)也需要進(jìn)行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。


這種風(fēng)格更適合大公司,國內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合,而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。



毛玻璃效果

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




輕擬物

輕擬物這幾年一直流行,在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物,其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫面中,扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中,比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。




簡(jiǎn)潔設(shè)計(jì)

簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則,在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì),我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了?;氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問題?如何與上級(jí)溝通?該功能是否可做可不做?是否需要埋點(diǎn)用數(shù)據(jù)說話?如果只是一味競(jìng)品有我們就需要有,功能不斷累加只會(huì)讓界面越來越重。



幾何圖形

幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺設(shè)計(jì)C端化的進(jìn)程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。



幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌,作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程,品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。



暗黑設(shè)計(jì)

暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大,如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。


在設(shè)計(jì)暗黑主題時(shí),不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則,即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì),可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”(Figma、Sketch、XD、Chrome插件)用來測(cè)試界面的對(duì)比度。



模塊化(組件化)

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


產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分,也就是幾個(gè)模塊,每一部分都是具有獨(dú)立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。




插畫

插畫作為設(shè)計(jì)的一大品類,不同的插畫師都有自己擅長(zhǎng)的風(fēng)格,本質(zhì)是都有自己的個(gè)性,但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事,表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合,插畫不會(huì)過時(shí),而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。



幾何插畫

幾何插畫算是插畫簡(jiǎn)化的一種表現(xiàn)形式,人和物的形態(tài)不再寫實(shí),而是抽象成幾何圖形拼湊的感覺,同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上,平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。



線面插畫

線面插畫最近一兩年非常流行,準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來,這時(shí)候用線條簡(jiǎn)單勾勒后,結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí),可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí),還能保持界面的干凈整潔。




動(dòng)效


微交互

界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開的,UI界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒,取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了,一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品,還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值,共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。



Mg動(dòng)畫

Mg動(dòng)畫需要很好的節(jié)奏感、韻律,每一個(gè)場(chǎng)景動(dòng)畫都需要其中的元素進(jìn)行連接變化,讓轉(zhuǎn)場(chǎng)動(dòng)畫更加自然,MG人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然,通過粒子效果讓特定場(chǎng)景無限循環(huán)會(huì)讓人更加印象深刻。




三維


三維圖標(biāo)

MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行,三維圖標(biāo)的應(yīng)該場(chǎng)景還是需要有較大留白空間的界面,因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上?設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合,存在即合理。合適最重要,它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。



輕三維

為什么輕三維在界面設(shè)計(jì)中占有一席之位?一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素,比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等,這些都是用戶日常使用系統(tǒng)軟件常見的元素,通過簡(jiǎn)單的幾何形體建模—打燈光—加材質(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加,特別是當(dāng)下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光,局部的漸變色或環(huán)境光更佳出彩。



P4D(PS+C4D)

P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法,也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié),通過PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色,利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強(qiáng)大的合成功能,將渲染圖片與圖片素材進(jìn)行合成,來表現(xiàn)畫面的視覺度,當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果,也可以通過PS的后期合成來實(shí)現(xiàn),這也是P4D的強(qiáng)大之處。



卡通IP

卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通IP也從傳統(tǒng)的純PS手繪技法,轉(zhuǎn)到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色。


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


對(duì)于UI設(shè)計(jì)師來說學(xué)習(xí)是有成本的,暫時(shí)并不是必備技能,如果喜歡完全可以學(xué)習(xí),從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競(jìng)爭(zhēng)力。



三維動(dòng)畫

C4D三維場(chǎng)景動(dòng)畫通過構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景,會(huì)讓用戶體驗(yàn)真實(shí)感,三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感,未來在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。



總結(jié)

上一次寫追波流行趨勢(shì)還是兩年前了,通過兩年的沉淀對(duì)趨勢(shì)流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火,隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層,客觀的看待和理解這個(gè)真實(shí)的世界,曾經(jīng)的流行趨勢(shì)也需要慢慢的沉淀下來。


存在即合理,趨勢(shì)流行稍縱即逝,注定是不長(zhǎng)久的,只有大浪淘沙歷史遺留下來的風(fēng)格才能更長(zhǎng)久。但我們也不能不去關(guān)注,因?yàn)槟挠惺裁此^的創(chuàng)新,只不過是舊元素的重新組合,并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝,風(fēng)格永存”大概就是這個(gè)意思吧。


6000多字的設(shè)計(jì)流行趨勢(shì),希望能幫助設(shè)計(jì)師度過互聯(lián)網(wǎng)裁員的寒春。最后希望以后每年堅(jiān)持輸出設(shè)計(jì)流行趨勢(shì)。為設(shè)計(jì)行業(yè)奉獻(xiàn)微薄之力。



文章來源:站酷   作者:水手哥

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


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識(shí)

ui設(shè)計(jì)分享達(dá)人

前言


做好圖標(biāo)設(shè)計(jì)是一個(gè)入門級(jí)UI設(shè)計(jì)師的必備技能之一,圖標(biāo)是界面中非常重要的組成部分,在實(shí)際的工作中,即便是一些工作多年且有一定經(jīng)驗(yàn)的設(shè)計(jì)師,也很難保證自己設(shè)計(jì)的圖標(biāo)有多么完美。不同位置的圖標(biāo)在界面中所起到的作用不同、風(fēng)格也不同、其設(shè)計(jì)思路更是有所區(qū)別,例如金剛區(qū)、分類、標(biāo)簽欄、服務(wù)工具等。

用圖標(biāo)準(zhǔn)確的表達(dá)出實(shí)際含義,僅僅學(xué)其「形」是不夠的,需要對(duì)圖標(biāo)有較為全面、系統(tǒng)的認(rèn)識(shí),了解圖標(biāo)的相關(guān)概念、正確的繪制方法及處理好一系列的細(xì)節(jié),本篇文章將介紹圖標(biāo)設(shè)計(jì)的具體方法及要點(diǎn),幫你規(guī)避掉一些常見的問題,讓圖標(biāo)設(shè)計(jì)有理有據(jù)。





本期大綱


一、圖標(biāo)的定義

二、常見的圖標(biāo)風(fēng)格

三、性格與氣質(zhì)

四、設(shè)計(jì)規(guī)范與流程

五、常見問題及注意事項(xiàng)

六、圖標(biāo)資源

七、總結(jié)





一、圖標(biāo)的定義


1 什么是圖標(biāo)?

圖標(biāo)是一種具有高度概括性的圖形化標(biāo)識(shí),在界面中與文案相互支撐、搭配使用,隱晦或直白的表達(dá)內(nèi)容的具體含義、屬性特征、形象氣質(zhì)等豐富的視覺信息。

從概念上來講,圖標(biāo)可分為廣義、狹義兩種,廣義指的是現(xiàn)實(shí)世界中的圖形符號(hào)、且有明確指向的含義,而狹義的圖標(biāo)指的設(shè)備界面中的符號(hào),這些設(shè)備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體,如手機(jī)、電腦、iPad...等。在UI設(shè)計(jì)中主要具是針對(duì)狹義的概念。

圖標(biāo)設(shè)計(jì)是一門學(xué)問,在我們的認(rèn)知中,通常將圖標(biāo)理解為某個(gè)概念的抽象圖形,通過設(shè)計(jì)清晰易懂的圖形傳達(dá)出比文字更高效率的信息,同時(shí)提升界面的美觀程度。想要將圖標(biāo)設(shè)計(jì)的更加出色,則需要頻繁練習(xí)、不斷試錯(cuò)、持續(xù)探究并嘗試新的風(fēng)格,所以很值得我們花費(fèi)大量的時(shí)間去鉆研練習(xí)。


2 圖標(biāo)的基本特征

一個(gè)界面是由文字、圖標(biāo)、幾何圖形、圖片(音頻、視頻)組成,從UI設(shè)計(jì)師的角度,相對(duì)來說,其他三種元素大多運(yùn)用到的是排版技巧,而圖標(biāo)則是需要繪制、創(chuàng)作的元素,在沒有圖標(biāo)的情況下,純文字也可以代替,可為什么貴還要費(fèi)力費(fèi)時(shí)的設(shè)計(jì)圖標(biāo)呢?原因主要有兩點(diǎn):

首先,圖標(biāo)作為一種圖形符號(hào)的存在,跟文字的復(fù)雜程度相比,在識(shí)別效率上有著先天的優(yōu)勢(shì),因文字需根據(jù)語種、長(zhǎng)短的不同,所占用的界面空間資源就不同,在文字較多的情況下,大大減低了用戶瀏覽速度及信息傳達(dá)的效率,固圖標(biāo)將文字信息進(jìn)行了濃縮。好的圖標(biāo)不僅易于識(shí)別、效率更高,且讓界面更加簡(jiǎn)潔,所以我們常見的圖文結(jié)合界面,絕大多數(shù)都是圖標(biāo)在上、文字在下,或者圖標(biāo)在左、文字在右,這些設(shè)計(jì)足以說明圖標(biāo)視覺傳達(dá)的優(yōu)先級(jí)高于文字。

其次,不同風(fēng)格、樣式的圖標(biāo)能讓界面看起來更美觀,提高用戶的視覺舒適度。設(shè)想一下,如果界面沒有任何圖標(biāo)的點(diǎn)綴,即便用戶也能使用,但看多來多少都有些枯燥無味,全部用文字來理解內(nèi)容還容易引起視覺疲勞。





二、常見的圖標(biāo)風(fēng)格


1 扁平風(fēng)格

扁平風(fēng)格圖標(biāo)主要是由形狀的描邊、填充進(jìn)行各種組合搭配來表達(dá)不同的含義,并通過不同的色彩體現(xiàn)出不同的視覺效果,最常見配色有以下幾種:

◇ 單色:簡(jiǎn)潔、清晰視覺效果,常見于基礎(chǔ)功能圖標(biāo)。例如:B端功能入口,移動(dòng)端個(gè)人中心、二/三級(jí)頁面的工具欄等,也有很多app的金剛區(qū)利用底色塊襯托反白的圖標(biāo)。

◇ 雙色:是很常見的功能性圖標(biāo),至少由兩個(gè)以上的元素組成,在單色的基礎(chǔ)上加以色彩點(diǎn)綴,讓本身就不是很突出的元素不再單調(diào),如果融入品牌色,能提升整個(gè)界面品牌調(diào)性,適用場(chǎng)景跟單色圖標(biāo)相比則范圍更廣。

◇ 多色:至少由三種或以上的形狀、顏色組合而成,常用于金剛區(qū)、產(chǎn)品分類列表、定制化菜單等。

◇ 漸變:漸變色的圖標(biāo)顯得較年輕化,可以是單元素的漸變或多元素的漸變組合,能映射出一種活潑、熱烈的氛圍。例如:視頻、直播等娛樂類型的APP,或車載UI等。

◇ 不透明度:調(diào)整圖標(biāo)中某個(gè)元素的不透明度,可在不變換色系的情況下豐富配色細(xì)節(jié),還能與底色融合的更加細(xì)膩,解決多色漸變視覺跳躍的問題。

另外,在UI界面中,扁平化風(fēng)格圖標(biāo)使用最多的當(dāng)屬線性、面性、線面結(jié)合這三種類型。


1)線性

線性圖標(biāo)主要是通過線條描邊勾勒出來的圖形,在界面中的尺寸普遍偏小,其線條不能過于復(fù)雜,否則將會(huì)影響辨識(shí)度,看似不多的簡(jiǎn)單線條搭配不同的色彩,則有很大的調(diào)整空間。


2)面性

面性圖標(biāo)主要通過剪影的形式來制作抽象的形體,相比線性圖標(biāo)則面積更大、視覺層級(jí)更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設(shè)計(jì)感,以達(dá)到多種視覺表現(xiàn)的效果。


3)線面結(jié)合

線面結(jié)合的圖標(biāo)既有線段或輪廓、又有填充的色塊,相比純線/面性單一樣式的圖標(biāo)則細(xì)節(jié)更加豐富,如果把控到位,會(huì)有更好的視覺效果及信息傳達(dá)的效率,也不失趣味性。


2 擬物化風(fēng)格

擬物風(fēng)格的圖標(biāo)主要通過細(xì)節(jié)和光影、根據(jù)現(xiàn)實(shí)世界中的物品塑形打造出圖形立體效果,非常考驗(yàn)設(shè)計(jì)師的造型繪制、技法表現(xiàn)能力。這種風(fēng)格的圖標(biāo)有著極強(qiáng)的代入感,能讓用戶快速領(lǐng)會(huì)圖標(biāo)所傳達(dá)出的意圖及氣質(zhì)。

因?yàn)閿M物化圖標(biāo)信息元素的高復(fù)雜度及突出的視覺效果非常搶眼,在頁面中頻繁出現(xiàn)會(huì)成為干擾其他信息的存在,游戲類應(yīng)用中使用的非常普遍(不過多贅述)。在其他類型的應(yīng)用中,大部分出現(xiàn)在營銷類型的界面,例如專題頁、成就榜、會(huì)員中心等。


3 輕質(zhì)感風(fēng)格

跟擬物化圖標(biāo)相比,輕質(zhì)感就不會(huì)有太多復(fù)雜的元素,主要通過各種色彩漸變、發(fā)光、投影等圖層樣式體現(xiàn)出非常柔和的立體感,整體風(fēng)格偏年輕化,給人輕盈、簡(jiǎn)潔及精致的感覺。在設(shè)計(jì)過程中,請(qǐng)使用干凈且和諧的配色,主要使用在界面較大區(qū)域的位置。


4 磨砂玻璃風(fēng)格

不僅僅是頁面背景有毛玻璃風(fēng)格,圖標(biāo)的毛玻璃風(fēng)格也很出彩,主要通過背景模糊、疊加、剪切圖層來實(shí)現(xiàn)(網(wǎng)上很多教程)。輕量漸變搭配毛玻璃的朦朧感,可以體現(xiàn)出圖標(biāo)的質(zhì)感與神秘感。

除上述這幾種風(fēng)格的圖標(biāo)之外,還有例如2.5D、3D、像素風(fēng)、新擬態(tài)...等,但在UI設(shè)計(jì)中并不常用,就不一一舉例說明了。





三、性格與氣質(zhì)


1 性格走向(描邊/拐角)

力量型:粗線條、直角拐點(diǎn),給人一種力量、狂野的感覺,常用于體育、健身、機(jī)械類型的產(chǎn)品;

可愛型:粗線條、圓角設(shè)計(jì),看起來活潑可愛,給人舒適、飽滿的感覺,在兒童、教育類產(chǎn)品中很常見;

嚴(yán)謹(jǐn)型:細(xì)線條、直角拐點(diǎn),看起來工整、嚴(yán)謹(jǐn),中規(guī)中矩,適合政府、法律類型的產(chǎn)品;

精致型:細(xì)線條、圓潤(rùn)的拐角,柔和、干凈、纖細(xì)且精致的感覺,很適合極簡(jiǎn)風(fēng)格的設(shè)計(jì),在藝術(shù)、金融、珠寶等奢華類產(chǎn)品中比較常見。


2 動(dòng)態(tài)效果

如果想要突出金剛區(qū)、工具列表中的某個(gè)功能入口,將圖標(biāo)設(shè)計(jì)成動(dòng)態(tài)效果,既能保持整體圖標(biāo)風(fēng)格的統(tǒng)一、又能單獨(dú)突出功能的重要性,起到強(qiáng)調(diào)的作用,用來吸引用戶的注意力,引導(dǎo)用戶操作,提升其點(diǎn)擊率。切記動(dòng)效圖標(biāo)不能過多,當(dāng)什么都突出了等于什么都沒有突出。

其次,在年輕化、娛樂類型的產(chǎn)品Tab欄中的圖標(biāo)切換時(shí),加入動(dòng)態(tài)效果,可起到畫龍點(diǎn)睛的作用,還能通過動(dòng)效表達(dá)出不同的情緒,降低切換時(shí)的枯燥感,好的Tab動(dòng)效能傳達(dá)出整個(gè)產(chǎn)品的氣質(zhì)。

最后,如果有類似運(yùn)營或短期內(nèi)的活動(dòng),需要吸引用戶注意但又不適合固定在界面中的某個(gè)位置,這時(shí)可以設(shè)計(jì)一個(gè)動(dòng)態(tài)圖標(biāo)懸浮在設(shè)備某個(gè)位置(注意用戶體驗(yàn)及交互原則),既不過多的占用頁面資源,還能同時(shí)顯示在多個(gè)界面,一舉多得。

(動(dòng)效圖標(biāo):@墨染ART 授權(quán))





四、設(shè)計(jì)規(guī)范與流程


遵循圖標(biāo)設(shè)計(jì)規(guī)范有利于設(shè)計(jì)師之間的合作及接下來的設(shè)計(jì),以及產(chǎn)品整體圖標(biāo)風(fēng)格的統(tǒng)一性,起到約束的作用,即便在更換設(shè)計(jì)師的情況下,也不至于出現(xiàn)較大的問題。在制定合理的設(shè)計(jì)規(guī)范前需要先了解圖標(biāo)到底有哪些規(guī)范,應(yīng)從哪些方面入手,以便接下來的圖標(biāo)設(shè)計(jì)順利進(jìn)行。


1 網(wǎng)格尺寸比例

為了保持圖標(biāo)元素的平衡,尺寸大小需要保持一致,通常我們會(huì)建立基礎(chǔ)網(wǎng)格尺寸進(jìn)行圖標(biāo)的繪制,常見的網(wǎng)格尺寸有16、24、36、48、64、128、512、1024,這些網(wǎng)格尺寸并非固定,也會(huì)根據(jù)設(shè)計(jì)中的特殊尺寸而變化。

一個(gè)圖標(biāo)系統(tǒng)包括網(wǎng)格尺寸和圖標(biāo)元素兩部分,設(shè)定好網(wǎng)格尺寸后,就需要用keyline來約束圖標(biāo)形狀的長(zhǎng)、寬比例了。最終設(shè)計(jì)的圖標(biāo)大小并不是跟隨網(wǎng)格尺寸,而是根據(jù)不同的形狀占比受制于圖標(biāo)keyline,最終形成統(tǒng)一的視覺大小。

從上圖中可以看出,相同尺寸的圖標(biāo)在真實(shí)的視覺中相差很大,這就好比一個(gè)100像素的圓形、跟100像素的方形相比,站在邏輯角度,大小是相同的,但在視覺上,一定是方形顯得更大。所以我們常說的圖標(biāo)大小相同,并非真實(shí)尺寸,而是視覺感受。


2 圖標(biāo)keyline

為保持圖標(biāo)視覺上的一致性和平衡感,需要先繪制keyline用來指導(dǎo)、規(guī)范圖標(biāo)設(shè)計(jì)。keyline由圓形、正方形、長(zhǎng)方形-橫、長(zhǎng)方形-豎、三角形和對(duì)角線組成,網(wǎng)格的大小需保持4的倍數(shù),便于不同尺寸的圖標(biāo)都能適配,可使用24*24px的網(wǎng)格尺寸為基準(zhǔn),其他尺寸的圖標(biāo)可通過增加倍數(shù)以此類推,如48*48px、72*72px......

下圖是以24px尺寸的網(wǎng)格參考基準(zhǔn)示例(出血為2px):


3 確定圖標(biāo)風(fēng)格

根據(jù)產(chǎn)品屬性及目標(biāo)用戶并結(jié)合應(yīng)用場(chǎng)景,找到最符合自身產(chǎn)品性格、氣質(zhì)的圖標(biāo)設(shè)計(jì)風(fēng)格,例如健身應(yīng)用屬力量、粗礦類型,圓角、曲線適合女性產(chǎn)品等,在前面的「性格與氣質(zhì)」中有舉例說明。


4 圖標(biāo)繪制

經(jīng)過圖標(biāo)風(fēng)格的確定,圖標(biāo)細(xì)節(jié)便是接下來繪制過程的核心部分,對(duì)線性圖標(biāo)來說,注重的是線條的粗心,而面性圖標(biāo)則注重各小圖形之間的距離,所以在繪制時(shí),需要保持線條、間距的統(tǒng)一,方便后期的圖標(biāo)更新迭代。


1)線性描邊粗細(xì)

我們以iOS@2x為基準(zhǔn)(避免@1x的3px描邊變成1.5px,小數(shù)點(diǎn)),可適配最2px、3px、4px最常用的描邊粗細(xì),4px視覺較重,用于優(yōu)先級(jí)較高區(qū)域的功能性圖標(biāo),2px看起來會(huì)顯得更加精致,在設(shè)計(jì)中,還需根據(jù)產(chǎn)品的行業(yè)屬性及調(diào)性來確定描邊的粗細(xì),并統(tǒng)一起來。


2)面性正負(fù)形間距

面性圖標(biāo)需要確保每個(gè)單獨(dú)的形狀之間有足夠的間距,以24px大小的形狀為例,其間距不能小于1px,以此類推,雖然未規(guī)定上限,但間距也不宜太大,否則無法相互組合關(guān)聯(lián),以實(shí)際視覺的舒適度為準(zhǔn)。


5 創(chuàng)意提取

根據(jù)行業(yè)類型及風(fēng)格進(jìn)行創(chuàng)意設(shè)計(jì),如線性統(tǒng)一斷點(diǎn)、融入品牌基因、單個(gè)元素傾斜、節(jié)日氛圍烘托、修飾元素等,為圖標(biāo)塑造靈魂或傳遞更多信息而進(jìn)行的二次創(chuàng)作。





五、常見問題及注意事項(xiàng)


1 識(shí)別性

圖標(biāo)存在的意義,主要是為了快速傳遞信息,不能讓其成了無用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時(shí)間的積累,人們對(duì)一些線上圖標(biāo)信息的隱喻已根深蒂固,早就形成了慣性思維,所以我們?cè)O(shè)計(jì)的圖標(biāo)必須要符合用戶的認(rèn)知,能讓用戶快速理解,即便出現(xiàn)個(gè)別特殊情況,也要用文字清楚的標(biāo)注說明,否則一旦讓用戶產(chǎn)生疑惑,圖標(biāo)就起了負(fù)面作用,在很大程度上影響使用體驗(yàn)。符合認(rèn)知的圖標(biāo)能讓用戶下意識(shí)的理解且接近心理預(yù)期,減少學(xué)習(xí)成本,提升使用效率。


2 簡(jiǎn)潔美觀

圖標(biāo)是將現(xiàn)實(shí)世界中的事件/事務(wù)用抽象的圖形表現(xiàn)出來,如果過于追求完美而設(shè)計(jì)的太復(fù)雜,還不如直接上圖片來的快,所以不能過于展現(xiàn)真實(shí)物品的細(xì)節(jié),最終設(shè)計(jì)出正確而不失真的圖標(biāo)尤為重要,這樣既能用于傳遞信息,又便于用戶快速且清晰感知。


3 視覺對(duì)齊

為確保視覺平衡,異形元素在使用系統(tǒng)自動(dòng)對(duì)齊后,會(huì)有一定的偏差,需手動(dòng)微調(diào)進(jìn)行視覺對(duì)齊。


4 保持一致

針對(duì)大型項(xiàng)目,要想整個(gè)家族的圖標(biāo)更加和諧,保持相同的樣式及設(shè)計(jì)原則著實(shí)不易,尤其是在多人完成設(shè)計(jì)的情況下,事先有一個(gè)清晰的設(shè)計(jì)原則和規(guī)范是必不可少的。圖標(biāo)都有著對(duì)應(yīng)的視覺重量,例如描邊粗細(xì)、填充模式、繁簡(jiǎn)程度等屬性,需要做的就是控制好這些關(guān)鍵因素,讓整體看起來視覺重量相同且能相互關(guān)聯(lián)組合到一起,保持所有圖標(biāo)的一致性。


5 最小間隙

單個(gè)圖標(biāo)的各元素之間要有呼吸感,需要適當(dāng)?shù)牧舭?,如果描邊過大,整個(gè)條看起來感覺像糊成一團(tuán)或臃腫不堪,如果存在類似問題,可通過減小描邊值或降低圖標(biāo)的復(fù)雜程度來解決。


6 使用2的倍數(shù)

以偶數(shù)為單位的設(shè)計(jì)便于數(shù)據(jù)的計(jì)算(2的倍數(shù)),例如正負(fù)形間距、描邊值等,在iOS@2x設(shè)計(jì)下,@1x也不會(huì)出現(xiàn)小數(shù)點(diǎn)。在移動(dòng)端設(shè)計(jì)中,最小的圖標(biāo)為24px,可被2、3、4、6、8、12整除,也是可以被整除最多的數(shù)值,因此,可靈活的等比縮放。


7 延展性

即便做好了前面的一切,圖標(biāo)設(shè)計(jì)工作也并未完成,需要做的是持續(xù)測(cè)試圖標(biāo)的可用性,做好后續(xù)的完善與優(yōu)化,沒有最好、只有更好,以確保上線后的效果和后續(xù)的迭代。





六、圖標(biāo)資源庫


阿里巴巴矢量圖標(biāo)庫:https://www.iconfont.cn/,90%以上常見的矢量圖標(biāo)下載;


飛書官方圖標(biāo)庫:https://iconpark.oceanengine.com/official,海量資源可在線修改,調(diào)整描邊、填充、單/雙/多色、端點(diǎn)后下載SVG格式圖標(biāo)。

雖然上述圖標(biāo)資源基本能滿足我們的日常設(shè)計(jì)所需,但僅僅只能是作為參考而已,一味的圖方便、投機(jī)取巧只會(huì)毀了自己的動(dòng)手、創(chuàng)新能力。





七、結(jié)語


圖標(biāo)設(shè)計(jì)是一個(gè)非常龐大的版塊,且有很多個(gè)分支,例如:金剛區(qū)、標(biāo)簽欄、應(yīng)用圖標(biāo)...等,每個(gè)分支都有自己的一套設(shè)計(jì)法則,我們需要在不斷的學(xué)習(xí)與創(chuàng)新中獲得更多經(jīng)驗(yàn)。一篇文章不足以道出圖標(biāo)設(shè)計(jì)的精髓,但可以在不斷沉淀、相互探討、持續(xù)的學(xué)習(xí)中一起進(jìn)步。

下篇「圖片」文章再見。

原文地址:站酷
作者:飛鷹Article

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




按鈕篇 | 做好設(shè)計(jì)細(xì)節(jié),你需要了解這些!

ui設(shè)計(jì)分享達(dá)人

前言


說起按鈕,很多做設(shè)計(jì)的小伙伴是熟悉的不能再熟悉了,它是我們?cè)谠O(shè)計(jì)界面時(shí)最常用、最重要的組件之一,也是易被忽略的元素之一,所以在設(shè)計(jì)之前,做好對(duì)按鈕組件的認(rèn)識(shí)、了解非常有必要。

從我們有記憶認(rèn)知開始,按鈕就時(shí)刻在和我們打交道,墻上的電燈開關(guān)、電視機(jī)的調(diào)節(jié)按鈕、遙控器的按鈕等等,這些物理按鈕不僅僅是當(dāng)下UI按鈕組件的前身,且不會(huì)消失,依然會(huì)有很多非數(shù)字化的產(chǎn)品及機(jī)器設(shè)備在持續(xù)延用,不管如何演變,基本不會(huì)脫離實(shí)物參考。按鈕最吸引我們的莫過于通過簡(jiǎn)單觸摸就能輕松滿足自己的行為需求,按鈕設(shè)計(jì)的直觀性及易用性會(huì)影響著人們完成一件事情的意愿及效率。

在UI設(shè)計(jì)中,如何完美的避開問題、把按鈕設(shè)計(jì)的更好,是每個(gè)設(shè)計(jì)師需要深思的問題。按鈕設(shè)計(jì)的好壞,將直接關(guān)系著用戶引流、觸發(fā)行動(dòng)、產(chǎn)品轉(zhuǎn)化率等至關(guān)重要的問題。另外,精致的按鈕也會(huì)讓整個(gè)頁面的視覺提升檔次。本篇文章將對(duì)按鈕作出解析,介紹在設(shè)計(jì)按鈕時(shí)需要著重考慮的因素及設(shè)計(jì)標(biāo)準(zhǔn),并將理論付諸于實(shí)踐。





分享目錄


一、按鈕的作用

二、按鈕的類型

三、按鈕的狀態(tài)

四、按鈕的大小及風(fēng)格

五、常見誤區(qū)及避坑指南

六、總結(jié)





一、按鈕的作用


1. 什么是按鈕

在UI設(shè)計(jì)中,按鈕是一個(gè)明確指示交互行為動(dòng)作的組件,主要用于觸發(fā)某一個(gè)即時(shí)操作,很多時(shí)候,我們需要采取下一步行動(dòng)或返回到上一步,都要通過按鈕(部分場(chǎng)景可用手勢(shì)交互)來完成。

在視覺層面,按鈕的組成看起來很簡(jiǎn)單,由一個(gè)底色塊/線框加上一組文案即可組成,但真正要將按鈕設(shè)計(jì)好,僅停留在視覺層面并不嚴(yán)謹(jǐn),其大小、位置、色值、文案...等每一個(gè)細(xì)節(jié)的處理都關(guān)系著用戶的操作體驗(yàn),下面的這幾種情況大家肯定有碰到過:


2 按鈕有什么用

通常,我們?cè)谠O(shè)計(jì)按鈕之前,需要詳細(xì)理解按鈕所存在的意義,哪里該加、哪里不該加、為什么要加,主要從以下幾點(diǎn)來體現(xiàn)按鈕的作用:


2.1 功能性操作

這種按鈕很常見,比如展開、收起、下拉、加減等,按鈕視覺較弱,重點(diǎn)強(qiáng)調(diào)該頁面的功能,突出主體信息,在操作之后會(huì)發(fā)生一些交互變化,這類按鈕主要起到功能形態(tài)的作用。

2.2 明確引導(dǎo)下一步操作

當(dāng)用戶完成一個(gè)頁面的內(nèi)容填充或信息確認(rèn),就會(huì)失去視覺焦點(diǎn),而下一步按鈕就會(huì)聚焦視覺重心,通過文案告知用戶下一步該怎么做,常見的有保存、下一步、支付、確定...等。

另外,用戶需要完成某個(gè)任務(wù),但同一個(gè)任務(wù)流程的信息、種類較多,這時(shí)就會(huì)通過分步驟、分頁的方式,并在每個(gè)步驟的末尾增加一個(gè)能起到上下銜接作用的按鈕,明確引導(dǎo)用戶進(jìn)入下一步操作,以此來提升用戶完成整個(gè)任務(wù)的成功率。

2.3 培養(yǎng)行為習(xí)慣

如果在操作某個(gè)按鈕之后得到了一定的利益,且能持續(xù)為用戶帶來價(jià)值,那么不妨將這個(gè)按鈕設(shè)計(jì)的更醒目,并在同等級(jí)但不同的地方保持視覺的統(tǒng)一,持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣,當(dāng)用戶下次再看到類似這種按鈕時(shí),慣性思維就會(huì)引導(dǎo)點(diǎn)擊。


3 按鈕的組成

在大部分的認(rèn)知中,最常見的按鈕就是一個(gè)底色塊加上一句文案就完成了,殊不知一個(gè)好的按鈕需要經(jīng)過很多細(xì)節(jié)的把控,才能發(fā)揮出按鈕的最大作用。例如文案的長(zhǎng)短/邊距、容器的大小/圓角、填充色的主/次之分...等,下面我們來看看一個(gè)按鈕到底是由哪些屬性、元素組成。

◇ 圓角:傳達(dá)出按鈕的氣質(zhì),決定用戶的視覺感受,最常見的為小圓角,也有較為嚴(yán)謹(jǐn)、力量型的全直角、卡通可愛、年輕化風(fēng)格的全圓角。

◇ 圖標(biāo):用于按鈕含義的圖形化抽象表達(dá),例如加載中、編輯;

◇ 容器:整個(gè)按鈕的載體,容納文案、圖標(biāo)等元素;

◇ 邊框:確定按鈕的邊界,常用于次級(jí)按鈕描邊;

◇ 文案:用文字表達(dá)按鈕的含義,精簡(jiǎn)文案;

◇ 背景:表達(dá)按鈕的當(dāng)前狀態(tài),對(duì)按鈕合理的使用主體色能有效傳播品牌氣質(zhì);

◇ 投影:讓按鈕具有層次感,配合漸變背景能體現(xiàn)出微質(zhì)感的效果。





二、按鈕的類型


1 功能類型

按照功能屬性分類,可將按鈕類型分為流程控制和功能選項(xiàng)操作。

流程控制:常見的傳統(tǒng)按鈕,如支付、下一步、確定、保存等,容器承載著圖標(biāo)、圖標(biāo)+文案、文案。

功能選項(xiàng):開關(guān)/加減控件、標(biāo)簽欄/分類、狀態(tài)切換等,操作之后只針對(duì)當(dāng)前頁面做出屬性的調(diào)整,不涉及流程的變化。


2 視覺樣式(橫向)

視覺樣式有所區(qū)別,在不同的頁面可能存在同等級(jí)的權(quán)重。

常規(guī)按鈕:最常見的按鈕,當(dāng)同一個(gè)頁面出現(xiàn)多個(gè)常規(guī)按鈕時(shí),會(huì)有主次之分;

虛線按鈕:常用于添加、上傳等操作;

文本按鈕:僅用文字作為觸發(fā)點(diǎn),部分會(huì)用主色、右側(cè)箭頭、下劃線等方式突出。


3 層級(jí)分類(縱向)

高權(quán)重:帶有填充色的主操作按鈕,當(dāng)同一個(gè)頁面存在多個(gè)按鈕,只允許存在一個(gè)高權(quán)重(主操作)按鈕;

中權(quán)重:帶邊框輪廓的概述按鈕,同一頁面可存在多個(gè)中權(quán)重的按鈕;

低權(quán)重:純文本按鈕,以及淺色填充+淺色文字的按鈕,同一頁面可存在多個(gè)低權(quán)重按鈕。





三、按鈕的狀態(tài)


在設(shè)計(jì)按鈕時(shí),為了體現(xiàn)按鈕不同的具體含義,以及后續(xù)設(shè)計(jì)、開發(fā)的統(tǒng)一性,明確按鈕交互樣式是設(shè)計(jì)過程中不可缺少的重要組成部分。設(shè)計(jì)師需要在不干擾界面視覺的前提下,對(duì)每個(gè)按鈕的樣式、狀態(tài)有清晰的定義,與其他元素、布局區(qū)分開來,以確保按鈕的可供性。常見的狀態(tài)主要有以下幾種:

◇ 待激活狀態(tài):需要完成一定的操作、或有一個(gè)以上必要的前置條件后才允許交互;

◇ 正常狀態(tài):按鈕的正常顯示狀態(tài),可進(jìn)行交互操作;

◇ 點(diǎn)擊狀態(tài):觸碰效果,表示按鈕正在進(jìn)行交互且未結(jié)束,會(huì)在正常狀態(tài)的基礎(chǔ)上增加一個(gè)純黑色不且透明度為10%的蒙層,交互完成后,即會(huì)引發(fā)此按鈕的真實(shí)作用;

◇ 加載狀態(tài):產(chǎn)生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時(shí)間才能執(zhí)行完成;

◇ 禁用狀態(tài):系統(tǒng)默認(rèn)暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。





四、按鈕的大小及風(fēng)格


1 按鈕的尺寸

在PC端設(shè)計(jì)按鈕時(shí),因?yàn)槭髽?biāo)的精準(zhǔn)點(diǎn)擊,我們通常會(huì)將按鈕設(shè)計(jì)的小一些,同時(shí)也能讓整個(gè)界面看起來更加細(xì)膩,只要不影響操作,36px~48px范圍內(nèi)的按鈕是比較常見的。但移動(dòng)端的按鈕設(shè)計(jì),我們要更多的考慮到物理尺寸,即手指(指尖)在操作時(shí)需占用的實(shí)際范圍。

iOS的設(shè)計(jì)規(guī)范中,將按鈕的最小點(diǎn)擊區(qū)域規(guī)定為44pt,一旦小于這個(gè)數(shù)值,操作時(shí)就會(huì)出現(xiàn)精準(zhǔn)度較低的情況,導(dǎo)致操作失誤或無效。

在實(shí)際的iOS界面中,很多應(yīng)用在設(shè)計(jì)按鈕時(shí)并未嚴(yán)格遵循最小44pt的這個(gè)標(biāo)準(zhǔn),例如很多一、二級(jí)界面的次級(jí)功能入口,有些連30pt都不到,也并未對(duì)用戶造成多大的影響,可能是對(duì)應(yīng)的功能權(quán)重、用戶點(diǎn)擊頻率都非常低的原因,還有一部分文字按鈕,其本身永遠(yuǎn)都不可能達(dá)到最小的觸控標(biāo)準(zhǔn)(觸控?zé)釁^(qū)加大即可),所以關(guān)于按鈕的尺寸大小并非規(guī)定的很死板。

費(fèi)茨定律告訴我們「目標(biāo)尺寸越大,移動(dòng)至目標(biāo)所花費(fèi)的時(shí)間就越短」,所以,在滿足手指觸控范圍的同時(shí),還要根據(jù)所對(duì)應(yīng)功能的權(quán)重占比來適當(dāng)調(diào)節(jié)按鈕的大小。不難理解,當(dāng)某個(gè)元素的尺寸越大就越吸引眼球,就更容易被視覺捕捉到,也更容易被「點(diǎn)擊」,精準(zhǔn)度被降低的同時(shí),也減少了用戶的操作成本。

我們以8像素柵格系統(tǒng)、iOS的2倍圖為例,較為常見的有:小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。


2 按鈕的風(fēng)格

在UI設(shè)計(jì)中,幾乎每個(gè)頁面都存在按鈕,樣式、種類也有很多,但設(shè)計(jì)風(fēng)格常見的也就幾種,例如扁平化、微質(zhì)感、擬物化、新擬態(tài)(概念)...


2.1 扁平化按鈕

通常在容器中填充一個(gè)純色即可,沒有多余的視覺干擾,操作簡(jiǎn)便,這種類型的按鈕一般在應(yīng)用中用的最多。例如:工具型應(yīng)用、B端應(yīng)用等。

2.2 微質(zhì)感按鈕

相比扁平化,填充漸變色再加上淺淺的投影,不僅能保持信息內(nèi)容的簡(jiǎn)潔、讓用戶產(chǎn)生更強(qiáng)的操作欲望,還能讓頁面具有品質(zhì)感,更加耐看。例如:年輕化應(yīng)用、娛樂類應(yīng)用、兒童應(yīng)用等。

2.3 擬物化按鈕

大多設(shè)計(jì)的很立體,3D質(zhì)感、屬性樣式豐富多彩,參考現(xiàn)實(shí)世界中的事務(wù)或攝取應(yīng)用場(chǎng)景中的某些元素,使其更加逼真,有較強(qiáng)的代入感。例如:游戲類應(yīng)用、H5專題、運(yùn)營banner等。

2.4 新擬態(tài)按鈕

2021年風(fēng)靡一時(shí),幾乎無人不知,但要想落地卻不太現(xiàn)實(shí),實(shí)用性不強(qiáng),也只能在飛機(jī)稿中出出風(fēng)頭,隨著時(shí)間的流逝,逐漸銷聲匿跡,不知哪天會(huì)不會(huì)經(jīng)改良后再次面世(當(dāng)初扁平化問世,也是幾經(jīng)波折,經(jīng)多年改良才逐漸被大眾所接受)。目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài),例如:計(jì)算器、AI設(shè)備控制、有道云筆記等。





五、常見誤區(qū)及避坑指南


1 主/次操作層級(jí)分明

當(dāng)同一個(gè)頁面出現(xiàn)多個(gè)按鈕時(shí),只允許存在一個(gè)主操作按鈕,其他不做特別設(shè)定。當(dāng)然,如果次要操作較多,也不益過多的出現(xiàn)次級(jí)按鈕,可根據(jù)權(quán)重降級(jí)處理,以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。


2. 統(tǒng)一樣式

主/次操作按鈕要統(tǒng)一樣式,用戶需操作時(shí),盡可能的減少其思考及選擇時(shí)間,按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維,節(jié)省時(shí)間成本,提高操作效率。


3. 圓角值

在大多數(shù)界面設(shè)計(jì)中,我們通常所見到按鈕還是小圓角和全圓角居多,也有部分按鈕完全直角,需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來選擇最合適的圓角類型。不管如何,盡量避免大圓角(卡片除外)按鈕,不方不圓、不倫不類的,顯的不夠成熟也不好看。


3.1 小圓角

小圓角按鈕的圓角值通??刂圃诟叨鹊?/5、1/6,兒童類型的應(yīng)用也有1/4(較大)的,并非絕對(duì)值。如果習(xí)慣使用8像素網(wǎng)格,根據(jù)按鈕的尺寸大小,直接將圓角值固定在8px、16px、24px(較大)這幾個(gè)數(shù)值,能減少設(shè)計(jì)組件的數(shù)量,也利于開發(fā)做組件封裝后續(xù)調(diào)用。

3.2 全圓角

全圓角按鈕的圓角值固定為高度的1/2,或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。

3.3 直角

不設(shè)圓角值,在PC端較為常見,也有部分較為嚴(yán)謹(jǐn)?shù)囊苿?dòng)端應(yīng)用使用直角按鈕。


4. 按鈕中的文字

按鈕中的文字要便于用戶理解,不能過于陌生或繞口,用戶碰到不易理解的信息會(huì)產(chǎn)生困惑,甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失。除此之外,文字還需要精簡(jiǎn),不能過多或折行且能合理的引導(dǎo)用戶完成操作。

上圖的文案歧義就很明顯,自以為聰明的設(shè)計(jì)師想要挽留用戶,刻意將主次按鈕樣式對(duì)換,希望用戶操作不成功,那么用戶在需要取消訂單時(shí)就疑惑了,到底是點(diǎn)擊「確定」還是主操作按鈕「取消」才能取消成功呢?或許稍加思考,用戶也能反應(yīng)過來,但無疑增加了選擇難度、思考時(shí)間及操作成本。



5. 文字與按鈕比例

按鈕中的文字太大或太小都會(huì)影響用戶對(duì)信息接收的效率,大小比例需要適中。文字太大會(huì)感覺很擁擠(跟大家衣服買小了感覺一樣),沒有呼吸感,要給文字四周留下足夠的空間,同時(shí)文字太小會(huì)顯得小氣,看起來也會(huì)比較吃力,不利于信息接收。


6. 按鈕與其他組件的區(qū)分

設(shè)計(jì)好按鈕組件之后,頁面中的其他組件或元素要與按鈕有很明顯的區(qū)別,避免讓用戶產(chǎn)生不必要的誤解。


7. 彈窗主/次按鈕的位置

在彈窗中,主按鈕是在左?還是在右?這是一個(gè)爭(zhēng)論不休的問題,那么不爭(zhēng)了,在移動(dòng)端的彈窗設(shè)計(jì)中,主按鈕靠右就行了,不一定絕對(duì)正確,但絕對(duì)不是錯(cuò)的。根據(jù)調(diào)查數(shù)據(jù)顯示,單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高,且用戶也有一定的意識(shí),左側(cè)為上一步、右側(cè)為下一步,頂部左側(cè)為返回,右側(cè)為保存或確定。


8. 無障礙設(shè)計(jì)

可訪問性是按鈕設(shè)計(jì)最重要目標(biāo)之一,不僅要樣式統(tǒng)一,還應(yīng)符合用戶的認(rèn)知,讓用戶能快速知曉這個(gè)元素能否點(diǎn)擊?點(diǎn)擊之后會(huì)發(fā)生什么?甚至有種似曾相識(shí)的感覺。如果將按鈕樣式設(shè)計(jì)的與用戶認(rèn)知有較大的偏差,不易于用戶理解。


9. 減少使用禁用按鈕

在表單設(shè)計(jì)中,大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕,在完成之前,需少用禁用按鈕,在前面有講到「待激活狀態(tài)」,即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。

通常系統(tǒng)默認(rèn)不允許操作或存在時(shí)間限制會(huì)用到填充為灰色的禁用按鈕,即便如此,也要盡量讓系統(tǒng)將其隱藏,萬不得已的情況下需要在按鈕附近說明情況,以免使用不當(dāng)引起用戶的負(fù)面情緒。


10. 投影的使用

在給按鈕添加投影時(shí),選擇灰色或純黑色加調(diào)整不同明度即可滿足基本效果,但如果想要更好的視覺體驗(yàn),可以基于按鈕本身的色值來調(diào)整,讓投影效果看起來更舒適,跟頁面更搭。另外,切勿過度使用投影,寧缺毋濫,若按鈕的投影太深,看起來粗糙臟亂,還不如不用,顏色較淺的按鈕盡量不使用投影,否則可能會(huì)影響按鈕的識(shí)別度,讓這個(gè)頁面看起來不夠清爽。





六、總結(jié)


對(duì)于設(shè)計(jì)師來說,按鈕作為設(shè)計(jì)組件之一,有很多細(xì)節(jié)容易被忽略,我們需要對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考,如論任何大小組件,都需要做到精益求精,才能給用戶帶來更好的使用體驗(yàn)。

原文地址:站酷
作者:飛鷹Article
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

2022年標(biāo)志設(shè)計(jì)趨勢(shì):標(biāo)志的未來

ui設(shè)計(jì)分享達(dá)人

2021年,標(biāo)志設(shè)計(jì)師朝著更大膽、更具創(chuàng)新性的設(shè)計(jì)邁出了一大步。與平面設(shè)計(jì)趨勢(shì)類似,品牌推廣大量采用軟循環(huán)動(dòng)畫和鮮艷的配色方案。它還開辟了實(shí)驗(yàn)排版,鼓勵(lì)創(chuàng)造性思維重新審視標(biāo)志設(shè)計(jì)。

2022年的標(biāo)志設(shè)計(jì)趨勢(shì)很可能會(huì)延續(xù)這一大趨勢(shì),我們希望看到上述美學(xué)在全球范圍內(nèi)得到重塑。您會(huì)看到設(shè)計(jì)師同樣選擇極簡(jiǎn)主義和卡通標(biāo)志、3D 和平面標(biāo)志、花卉和文字標(biāo)志。我們認(rèn)為2021年是創(chuàng)作自由的一年。然而,看起來在2022年,我們將看到它真正的肆無忌憚。

1) 簡(jiǎn)單的幾何圖形和基本形狀

2) 高大的標(biāo)志

3) 飽和顏色和漸變

4) 象征主義和極簡(jiǎn)主義代替現(xiàn)實(shí)主義

5) 涂鴉和草圖

6) 粗體字標(biāo)標(biāo)志

7) 無襯線標(biāo)志

8) 花藝和微妙的裝飾

9) 黑白標(biāo)志

10) 3D與平面樣式

簡(jiǎn)單的幾何圖形和基本形狀

在2022年,擁有基于復(fù)雜圖形的標(biāo)志幾乎會(huì)很少見。此類標(biāo)志通常難以記住,客戶可能會(huì)很難發(fā)現(xiàn)在品牌與其圖形表示之間的聯(lián)系。對(duì)于尋求加強(qiáng)存在感和提高品牌知名度的大企業(yè)來說,這可能是一個(gè)巨大的問題。因此,公司傾向于拒絕此類標(biāo)志,而傾向于使用一些基本的東西。

基本的幾何形狀是各種三角形、圓形、正方形、點(diǎn)和線,它們使標(biāo)志設(shè)計(jì)成為簡(jiǎn)單的圖像。作為優(yōu)化,建議設(shè)計(jì)師使用充滿活力或獨(dú)特的配色方案?;蛘呦喾?,切換到黑白,將這種極簡(jiǎn)效果發(fā)揮到極致。最后,還有負(fù)空間,這是另一種采用簡(jiǎn)單幾何形狀并保持視覺趣味的好方法。

高大的標(biāo)志

雖然2022年的大多數(shù)標(biāo)志設(shè)計(jì)趨勢(shì)與我們兩年、三年或五年前曾經(jīng)擁有的一切產(chǎn)生共鳴,但高大的標(biāo)志就像一口新鮮空氣和創(chuàng)造力。反對(duì)過度使用的三角形、方形和圓形標(biāo)志。正如我們從多個(gè)Behance項(xiàng)目中看到的那樣,它們的美學(xué)非常適合尋求領(lǐng)先的時(shí)尚公司、精品店、創(chuàng)意工作室和大品牌。

高大的標(biāo)志部分借鑒了裝飾藝術(shù)風(fēng)格,它們特別喜歡優(yōu)雅的垂直框架。高大的標(biāo)志同樣具有波西米亞風(fēng)美學(xué)和現(xiàn)代幾何元素。事實(shí)上,這種標(biāo)志設(shè)計(jì)趨勢(shì)的根源并不那么重要。真正重要的是新的形狀讓設(shè)計(jì)師想出了新的標(biāo)志創(chuàng)意,所以在這里我們希望他們以不同的方式處理字體和圖形元素。

飽和顏色和漸變

實(shí)踐表明,標(biāo)志的顏色工作和色彩的選擇是一個(gè)非常個(gè)人化的故事,通常很難跟蹤全球趨勢(shì)或與特定顏色相關(guān)的任何標(biāo)志趨勢(shì)。有人更喜歡黑白標(biāo)志。有人會(huì)選擇現(xiàn)在特別流行的單色、裸色或大地色。然而,如果我們看看大品牌,我們將能夠在標(biāo)志設(shè)計(jì)中使用生動(dòng)、飽和的顏色來定義一個(gè)巨大的趨勢(shì)。

對(duì)標(biāo)志設(shè)計(jì)中顏色的興趣已經(jīng)發(fā)展到這樣的程度,創(chuàng)作者不僅要增加飽和度,還要選擇純粹、生動(dòng)的解決方案,同時(shí)盡可能地簡(jiǎn)化標(biāo)志。太多的細(xì)節(jié)和顏色會(huì)造成混亂的外觀,因此選擇其中一個(gè)至關(guān)重要——在極簡(jiǎn)主義時(shí)代,選擇很明確。然而,我們不禁強(qiáng)調(diào)鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標(biāo)識(shí)看起來廉價(jià)甚至業(yè)余。因此,當(dāng)您關(guān)注這一標(biāo)志設(shè)計(jì)趨勢(shì)時(shí),重要的是要取得平衡——否則您將面臨使用可疑標(biāo)志的風(fēng)險(xiǎn)。

象征主義和極簡(jiǎn)主義代替現(xiàn)實(shí)主義

有多種與簡(jiǎn)化標(biāo)志和極簡(jiǎn)主義相關(guān)的標(biāo)志趨勢(shì)——這可能是最能說明問題的。我們每個(gè)人都將標(biāo)志創(chuàng)建為一件真正的藝術(shù)品。動(dòng)物、花卉、神話和生物——在標(biāo)志內(nèi),它們展示了精湛的技藝和對(duì)細(xì)節(jié)的迷人關(guān)注。誠然,這樣的標(biāo)志確實(shí)看起來很引人注目,但從響應(yīng)式設(shè)計(jì)的角度來看,它們失去了其他類型的標(biāo)志。

您可能還記得響應(yīng)式標(biāo)志,這個(gè)術(shù)語是在大約4年前引入的。這些是可以適應(yīng)不同屏幕尺寸或其他媒體的標(biāo)志。為此,設(shè)計(jì)人員可以刪除字標(biāo)、簡(jiǎn)化或隱藏標(biāo)志。今天幾乎沒有人認(rèn)為響應(yīng)式標(biāo)志是一種獨(dú)立的現(xiàn)象或趨勢(shì)。相反,響應(yīng)性是標(biāo)志的自然特征,象征主義和極簡(jiǎn)主義的運(yùn)動(dòng)正好證明了這一點(diǎn)。

涂鴉和草圖

2022年,草圖和涂鴉將作為圖形設(shè)計(jì)趨勢(shì)回歸,因此它們作為單獨(dú)的標(biāo)志設(shè)計(jì)趨勢(shì)出現(xiàn)。其復(fù)興的關(guān)鍵是人們對(duì)設(shè)計(jì)師個(gè)人品牌方法的興趣增加。顯然,沒有什么比以獨(dú)特風(fēng)格繪制的快速草圖、卡通人物和形狀更好的了。

因此,要為標(biāo)志設(shè)計(jì)中的更多涂鴉以及企業(yè)品牌中草率的卡通標(biāo)志和快速繪制的吉祥物做好準(zhǔn)備。以快速和樸實(shí)的方式制作的手繪標(biāo)志也受到歡迎,我們已經(jīng)看到以這種方式書寫品牌名稱的項(xiàng)目和團(tuán)隊(duì)。

粗體字標(biāo)標(biāo)志

如果我們考慮2021年的標(biāo)志設(shè)計(jì)趨勢(shì),粗體字標(biāo)志將是最好的例子。于2020年底推出的實(shí)驗(yàn)排版項(xiàng)目專注于不常見的幾何解決方案。難怪品牌和標(biāo)志設(shè)計(jì)師不能忽視這種大規(guī)模的圖形設(shè)計(jì)創(chuàng)新——在這里,我們?cè)跇?biāo)志設(shè)計(jì)方面有了一個(gè)全新的方向。

許多跨國公司選擇字標(biāo)標(biāo)志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而,幾乎沒有人認(rèn)真考慮使用實(shí)驗(yàn)字體進(jìn)行品牌重塑。這就是為什么此類文字商標(biāo)標(biāo)志主要在獨(dú)立工作室、小型企業(yè)、精品店、沙龍和個(gè)人創(chuàng)作者中傳播。也許,這些大膽標(biāo)志的特征是其吸引力的另一個(gè)關(guān)鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標(biāo)志——或者那些想要感受品牌美學(xué)的人。

無襯線標(biāo)志

雖然使用大膽的實(shí)驗(yàn)排版并不是每個(gè)人的趨勢(shì),但無襯線字體是每個(gè)人都知道和理解的。自從設(shè)計(jì)師拒絕花哨的腳本和襯線字體而支持無襯線字體以來,已經(jīng)有一段時(shí)間了。但由于存在普遍趨勢(shì),我們可以說它仍然是2021年的標(biāo)志設(shè)計(jì)趨勢(shì)——順便說一下,這得到了我們上面寫的極簡(jiǎn)主義和基本幾何形狀的流行的支持。

拒絕花哨字體的動(dòng)機(jī)非常簡(jiǎn)單——使用無襯線字體要容易得多。使它們適應(yīng)不同的屏幕和畫布尺寸并不復(fù)雜,因此它們更適合響應(yīng)式標(biāo)志。有趣的是,幾年前,我們觀察到了一個(gè)相反的過程:許多公司從無襯線字體切換到襯線字體,因?yàn)閺?fù)古設(shè)計(jì)非常流行。今天,隨著復(fù)古狂熱慢慢釋放出來,健康的實(shí)用主義出現(xiàn)了,無襯線字體再次相關(guān)。

花藝和微妙的裝飾

我已經(jīng)不知道設(shè)計(jì)師和產(chǎn)品創(chuàng)造者用極簡(jiǎn)主義制作了一系列標(biāo)志多少年了。與此同時(shí),許多小企業(yè)繼續(xù)選擇和使用它們,所以這些標(biāo)志不會(huì)退縮——就好像它們剛剛出現(xiàn)在市場(chǎng)上一樣。所以請(qǐng)放心,它們將與您共存數(shù)個(gè)季節(jié),同時(shí)還會(huì)定期推出新款式,例如2022年風(fēng)靡一時(shí)的Boho。

也許,這種標(biāo)志設(shè)計(jì)趨勢(shì)是最流行的。優(yōu)雅的線條看起來令人著迷,因此使用它們的誘惑很大。2019年如此,2022年依舊如此。 事實(shí)上,這種微妙的視覺風(fēng)格并不僅僅集中在花藝上。有很多日常用品:從家具到文具和衣服。重要的是這些標(biāo)志模板是如何制作的!

黑白標(biāo)志

隨著我們繼續(xù)從各個(gè)方面學(xué)習(xí)了解極簡(jiǎn)主義,讓我們?cè)谶@個(gè)市場(chǎng)中傳遞2022年的另一個(gè)自信趨勢(shì):黑白標(biāo)志。實(shí)際上,將黑白色調(diào)視為一種趨勢(shì)是很奇怪的,因?yàn)樗且环N經(jīng)典的解決方案,并且它的存在與時(shí)間和風(fēng)格的變化無關(guān)。所以,我們需要讓您注意到對(duì)此類標(biāo)志的興趣是日益增加的,其中最重要的例子是GoDaddy的重新設(shè)計(jì)之一。他們逐漸簡(jiǎn)化了他們的標(biāo)志,現(xiàn)在他們似乎到達(dá)了最后階段——帶有帶有無襯線字體和保留標(biāo)志的黑白標(biāo)志。

黑白標(biāo)志的最佳之處在于它們令人難以置信的風(fēng)格靈活性,這使得它們?cè)谄放圃O(shè)計(jì)師中流行起來。它們完美地適應(yīng)了品牌的審美,因此可以將它們用于字體、裝飾元素和幾何形狀的各種實(shí)驗(yàn)。極簡(jiǎn)主義、創(chuàng)造性的排版、花卉、象征主義、原始幾何——一切都與黑白標(biāo)志相得益彰。

3D與平面樣式

3D是2021年最有前途的圖形設(shè)計(jì)趨勢(shì)之一。隨著技術(shù)的發(fā)展,這種圖形變得如此龐大,以至于我們永遠(yuǎn)無法預(yù)見。甚至可以在直觀的在Spline或 Procreate的最新更新中進(jìn)行高質(zhì)量3D對(duì)象的制作。圖像質(zhì)量也得到了發(fā)展。

然而,在標(biāo)志設(shè)計(jì)中,情況頗有爭(zhēng)議。設(shè)計(jì)師將平面樣式的 logo 轉(zhuǎn)換為3D,反之亦然,力求使 logo 風(fēng)格更加生動(dòng)和簡(jiǎn)潔——后者對(duì)于舊版本的3D和假3D尤為典型。出于同樣的原因,他們付出了很多努力來探索類似于3D的方向——等距藝術(shù)。它允許在視錯(cuò)覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像。可能它看起來比3D更適用于標(biāo)志設(shè)計(jì)——但時(shí)間會(huì)證明公司和客戶會(huì)習(xí)慣什么。

最后

顯然,2022年和2021年的標(biāo)志設(shè)計(jì)趨勢(shì)沒有明確的界限。大多數(shù)處于巔峰的趨勢(shì)已經(jīng)伴隨我們很長(zhǎng)一段時(shí)間了。

但是,我們可以肯定地說,例如之前非常受歡迎的故障風(fēng)格,不太可能成為本季標(biāo)志設(shè)計(jì)的主角。在過去的幾年里已經(jīng)有很多這樣的事情。動(dòng)畫標(biāo)志也是如此,這是2021年最有希望的標(biāo)志趨勢(shì)之一。動(dòng)畫本身繼續(xù)引起人們的興趣,這是展示品牌的一種成功技術(shù)——但不幸的是,它并沒有被證明是可行的。

最后,3D的命運(yùn)也沒有確定,我們還不能說3D或扁平風(fēng)格的標(biāo)志設(shè)計(jì)是否會(huì)成為一種趨勢(shì)。我們已經(jīng)寫過,設(shè)計(jì)師的立場(chǎng)是模棱兩可的,一個(gè)方向和另一個(gè)方向都有品牌重塑。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷 作者:對(duì)啊設(shè)計(jì)君
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

儀表盤設(shè)計(jì)的 7 個(gè)階段

資深UI設(shè)計(jì)者

你知道儀表盤應(yīng)該如何被設(shè)計(jì),才能更符合用戶需求、滿足用戶的使用期待嗎?過于復(fù)雜的儀表盤設(shè)計(jì)可能是不可取的,在進(jìn)行儀表盤設(shè)計(jì)前,你需要做好相應(yīng)的規(guī)劃和設(shè)計(jì)策略。本篇文章里,作者總結(jié)了儀表盤設(shè)計(jì)的七個(gè)階段,一起來看一下。

一個(gè)看起來很酷炫的儀表盤可能有很多功能但實(shí)際上,它通常只是一個(gè)閃亮的玩具,而不是一個(gè)有用的工具。這些儀表盤類似于多臂機(jī)器人,能隨機(jī)拖拽數(shù)據(jù)并將這些數(shù)據(jù)分門別類地整理在一起,讓你目瞪口呆。

就像魔術(shù)師玩紙牌戲法一樣,它看起來令人印象深刻,但它的大腦和巧奪天工的手法一樣好。

([1] Widget:全稱Web widget是一種Web2.0 的衍生物,它好像是一個(gè)小型的應(yīng)用程式,是一小塊可以在任意一個(gè)基于HTML的網(wǎng)頁上執(zhí)行代碼構(gòu)成的小部件。)

玩這個(gè)儀表盤機(jī)器人一開始可能很有趣,但最終會(huì)讓客戶失望,因?yàn)樗鼪]有達(dá)到用戶的期望值。為什么會(huì)發(fā)生這種情況呢?設(shè)計(jì)一個(gè)工具而不是一個(gè)很快就會(huì)被丟棄的玩具的訣竅是什么呢?

一、構(gòu)想儀表板:核心大腦 Conceiving the dashboard: the brain

讓我們深入剖析儀表盤設(shè)計(jì)。

儀表盤是由客戶、設(shè)計(jì)師和開發(fā)人員共同設(shè)計(jì)的,他們每個(gè)人通過合作做出一定的貢獻(xiàn),并且所有的基礎(chǔ)功能在一開始就確定了(或者他們沒標(biāo)明)。

一個(gè)有思考能力的人是從胚胎發(fā)育而來的。腦細(xì)胞和神經(jīng)細(xì)胞是最先形成的,隨后是身體的其他細(xì)胞,而這正是任何可行項(xiàng)目被創(chuàng)建的方式。

第一個(gè)階段是最重要的。如果你在這個(gè)階段遺漏了什么,那么任何奇特的設(shè)計(jì)都無法挽救。因?yàn)樵谶@一階段你正在為儀表盤的長(zhǎng)期發(fā)展奠定基礎(chǔ)?!拔覟槭裁幢辉O(shè)計(jì)出來?誰需要我?”如果儀表盤會(huì)說話的,它一定會(huì)問這些問題。你能回答這些問題嗎?

  • 儀表盤將如何促進(jìn)公司目標(biāo)的達(dá)成?
  • 什么樣的結(jié)構(gòu)、功能和視覺效果能讓儀表盤執(zhí)行它的任務(wù)?
  • 哪種設(shè)計(jì)最適合你的目標(biāo)受眾?

這些問題的答案將構(gòu)成你設(shè)計(jì)理念的基礎(chǔ)(現(xiàn)在你可以告訴你的儀表盤存在的意義了)。

儀表盤設(shè)計(jì)的 7 個(gè)階段

網(wǎng)頁P(yáng)erls儀表盤設(shè)計(jì)

1)儀表盤的“智能”是其實(shí)現(xiàn)目標(biāo)的能力。

有些人認(rèn)為只有分析類儀表盤才需要智能性能,而可操作的儀表板只需要可讀性,實(shí)際上這個(gè)想法是錯(cuò)的。比方說,你有一個(gè)用于激勵(lì)員工的操作類儀表盤,用戶的注意力應(yīng)該放在比較結(jié)果,然而設(shè)計(jì)師會(huì)讓其在視覺效果上更加突出。

2)儀表盤上沒有瑣碎的細(xì)節(jié)。儀表盤上需要展示足夠的信息使用戶來做決定。設(shè)計(jì)師的職責(zé)是幫助用戶,而不是通過一系列很酷的小微件來幫助用戶解決難題。任何不是出于這個(gè)目的設(shè)計(jì)的都會(huì)阻礙用戶使用。

3)從項(xiàng)目的初始階段到最終階段,設(shè)計(jì)師必須關(guān)注公司的目標(biāo)、儀表盤的目標(biāo),和用戶的目標(biāo)。否則儀表盤將永遠(yuǎn)無法運(yùn)行。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Clover

二、數(shù)據(jù)及關(guān)鍵績(jī)效指標(biāo)的選擇:這屬于血液循環(huán)系統(tǒng) Data & KPI selection: the circulatory system

儀表盤的數(shù)據(jù)就像是身體內(nèi)的循環(huán)血液。我們必須了解它們來自哪里,它們?cè)诒挥脩粜枰獣r(shí)是如何被處理的,以及它們?cè)撊绾伪豢梢暬?

理所當(dāng)然地,設(shè)計(jì)師需要了解指標(biāo)的目的,顯然,這將幫助他們選擇合適的微件,但不僅僅只有這些。

舉個(gè)例子,一個(gè)客戶想在屏幕上看到許多不同的讀數(shù)。你(作為設(shè)計(jì)師)并不需要從屏幕上去除任何東西來清理儀表盤的展示空間;但你可以做的是突出最重要的東西,并在視覺上淡化次要的內(nèi)容。

然而,要做到這一點(diǎn),你必須得知道哪個(gè)指標(biāo)是最重要的且哪個(gè)是次要的。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Bidding Car

最重要的一系列指標(biāo)有助于實(shí)現(xiàn)目標(biāo),且能幫助控制流程(或者產(chǎn)品),例如:

  • 它們展示實(shí)際的成功率;
  • 它們影響產(chǎn)品被感知的方式;
  • 它們激勵(lì)創(chuàng)建該儀表盤的團(tuán)隊(duì)。

指標(biāo)的選擇還需要了解受眾。用戶應(yīng)該看到哪個(gè) KPI以及他們認(rèn)為最容易理解的視覺表現(xiàn)形式?

人們喜歡對(duì)應(yīng)他們目標(biāo)的一系列數(shù)字。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Panch

三、儀表盤的結(jié)構(gòu):這類似于骨頭 Dashboard structure: the skeleton

想象一下,你進(jìn)入一家酒店房間,看到一張床、一面桌椅、一個(gè)鏡子和一個(gè)衣柜,就算不打開壁櫥,你也能猜到里面有什么,吹風(fēng)機(jī)、拖鞋、浴巾就放在你所認(rèn)為的地方——有人已經(jīng)保證了這些。

一個(gè)好的儀表盤設(shè)計(jì)就如同那個(gè)房間:它是干凈、整潔且可被預(yù)知的。你可以立即看到所有必需品,并且直觀地知道剩下的東西會(huì)在哪里。設(shè)計(jì)師們有他們自己的工具來確保儀表盤設(shè)計(jì)的整潔性。

1. 層級(jí)

首先,你需要理清思路,在發(fā)揮創(chuàng)意之前,要對(duì)所有數(shù)據(jù)進(jìn)行排序,將其分類并充分理解優(yōu)先級(jí)等等,確定用戶可以立即看見的關(guān)鍵指標(biāo)數(shù)據(jù)。

1)視覺層級(jí)必須反應(yīng)信息層級(jí)。

設(shè)計(jì)師可以通過微件的大小及位置來表現(xiàn)數(shù)據(jù)的層級(jí)權(quán)重。如果你的用戶是從左往右閱讀的,那么關(guān)鍵信息必須放在左上角,而相關(guān)性最弱的信息放在底部右下角。

對(duì)數(shù)據(jù)重要性的排序方法取決于儀表盤的設(shè)計(jì)用途。重要的是根據(jù)信息的優(yōu)先級(jí)構(gòu)造信息并搭建邏輯鏈路。

2)將信息面板視為一個(gè)故事,而不是一系列的數(shù)據(jù)點(diǎn)。

2. 網(wǎng)格

網(wǎng)格對(duì)于創(chuàng)建頁面的總體布局、排序協(xié)調(diào)和對(duì)齊元素非常有用。

儀表盤設(shè)計(jì)的 7 個(gè)階段

3. 信息模塊

系統(tǒng)的模塊類似于一個(gè)住宅中的功能分區(qū):臥室用來睡眠,餐廳用來吃飯之類,每個(gè)區(qū)域有其功能。你的舒適性取決于它們放置的位置有多方便。

一個(gè)糟糕的布局不能靠翻新和布置家具來挽救,因此與之相類似的,信息模塊的布局需要被提前考慮。信息模塊幫助你展示內(nèi)容的層次結(jié)構(gòu),且?guī)椭愀鶕?jù)數(shù)據(jù)內(nèi)容的重要性、相關(guān)性和邏輯連接對(duì)內(nèi)容進(jìn)行分組。每個(gè)模塊應(yīng)該在給定過程中執(zhí)行特定的目的。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì)的 7 個(gè)階段

4. 連續(xù)性和接近性

如果你在去往廚房的路上需要穿過一個(gè)有兩扇門的走廊,那么這是一個(gè)糟糕的室內(nèi)布局。相互關(guān)聯(lián)的進(jìn)程則會(huì)假定在邏輯上也具有相似性。如果一個(gè)模塊的進(jìn)程需要來自另一個(gè)模塊的數(shù)據(jù),那么數(shù)據(jù)的布局就需要有近似性。

這一點(diǎn)必須事先考慮,這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。所有相關(guān)的信息應(yīng)依據(jù)相似性,從最重要到最不重要性來進(jìn)行分組和定位。

5. 分離模塊

沒有人需要一個(gè)與臥室相連的廚房。為了將兩個(gè)區(qū)塊分開,你需要留白或者負(fù)空間。你一定要在一開始就考慮到:將負(fù)空間視為視覺平衡所需要的設(shè)計(jì)元素組合。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Wingle

四、功能:這就類似于身體的肌肉部分 Functions: the muscles

功能和工具的數(shù)量取決于儀表盤的用途和其用戶的主要目標(biāo)。為了自由地移動(dòng),人類需要兩條腿,狗需要四條腿,而蜘蛛需要八條腿。一個(gè)擁有太多功能的儀表盤就像一條有著六條腿的狗一樣優(yōu)秀,但這有點(diǎn)讓人毛骨悚然。

不要在控制面板上放太多工具,只需要在最表層放置用戶必需品就好。太多的可用工具會(huì)讓用戶困惑且被嚇退,因?yàn)檫@會(huì)讓儀表盤看起來很復(fù)雜。個(gè)性化總是比定制要好。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Band

五、微件:重要的器官 Widgets: thevital organs

如果屏幕上有超過 5~7 個(gè)的小微件,人們則會(huì)難以理解其內(nèi)容。所以我們(設(shè)計(jì)師)的工作是讓相關(guān)數(shù)據(jù)可以被訪問但數(shù)量保持一定,不過多,這樣就能使用戶能在數(shù)秒中理解他們看到的內(nèi)容。視覺可視化的工具包括:

  • 表格
  • 圖形
  • 圖表
  • 卡片
  • 指標(biāo)
  • 地圖
  • 圖片
  • 分組
  • 過濾器
  • 列表
  • 資料結(jié)構(gòu)

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤數(shù)據(jù)微件的選擇取決于你儀表盤的目的和你的受眾。請(qǐng)思考以下問題:

  • 哪一種微件最能展示特定的 KPI(關(guān)鍵績(jī)效指標(biāo))?
  • 用戶需要最先在儀表盤上看到什么?
  • 哪一種微件將會(huì)是用戶最容易理解的?
  • 什么可以幫助用戶更快地找到他們需要的東西?

請(qǐng)選擇容易理解和可讀的微件。這里有一個(gè)讓人困惑的與最易理解的微件對(duì)比示例:?????????

儀表盤設(shè)計(jì)的 7 個(gè)階段

請(qǐng)考慮什么是主要的目標(biāo)來吸引用戶的注意力。

例如,如果你的首要任務(wù)是業(yè)績(jī)目標(biāo),則應(yīng)使用數(shù)字;如果你需要比較數(shù)值,則應(yīng)使用折線圖或者柱狀圖;如果是為了激勵(lì)團(tuán)隊(duì),則應(yīng)使用具有亮點(diǎn)突出的排行榜。

選擇一個(gè)不合適的部件或默認(rèn)的小部件模板可能會(huì)混淆用戶或?qū)е滤麄冋`解數(shù)據(jù)。最好的解決方案總是分析和測(cè)試的結(jié)果。

儀表盤設(shè)計(jì)的 7 個(gè)階段

最好的小部件設(shè)計(jì)是簡(jiǎn)約的,并且易于閱讀的。

例如,一個(gè) 3D 圖可能看起來令人印象深刻,但它占用了用戶太多的注意力,最終證明它會(huì)分散用戶的注意力。漸變、過度使用顏色和太多細(xì)節(jié)也同樣會(huì)造成困擾。

六、視覺設(shè)計(jì):通用技巧 Visual design: general tips

我們已經(jīng)構(gòu)建了儀表盤的大腦和身體。最后需要構(gòu)建的是儀表盤的皮膚——最表面的一層。這可以根據(jù)好的經(jīng)典設(shè)計(jì)的基本原則來完成,但這里仍然有些細(xì)節(jié)需要具體說明。

1. 簡(jiǎn)約性

一個(gè)儀表盤應(yīng)該跟你喜歡的工作桌面一樣干凈:它只有必需的文件和工具,沒有任何干擾項(xiàng)。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):MEMO

2. 配色板

儀表盤的顏色選擇必須服務(wù)于一個(gè)目的:盡可能清晰地呈現(xiàn)信息。你的配色板越大,就越難清晰地展示信息。所以不要在儀表盤上使用過多顏色。盡可能用相同顏色的深淺色或者不同的色相。

儀表盤設(shè)計(jì)的 7 個(gè)階段

首選,你需要選擇一個(gè)基礎(chǔ)色,然后選擇一個(gè)輔助色。每個(gè)顏色都必須有特定的用途。一個(gè)顏色可以用來結(jié)合/組合元素,另一種顏色可以用來強(qiáng)調(diào)元素。顏色還經(jīng)常用來展示一個(gè)元素是主動(dòng)的還是被動(dòng)的。避免使用可能具有負(fù)面含義的顏色。

例如在下面的例子中,紅色看上去像展示一些不好且不受歡迎的數(shù)據(jù):

儀表盤設(shè)計(jì)的 7 個(gè)階段

如果儀表盤提供可定制的顏色,請(qǐng)確保所有的可選顏色看上去都不錯(cuò)。Aodbe Color CC 是一個(gè)用來選擇配色的優(yōu)秀工具。

3. 強(qiáng)調(diào)

語義的強(qiáng)調(diào)之處應(yīng)和視覺的強(qiáng)調(diào)之處一一對(duì)應(yīng)。你可以使用顏色(對(duì)比、亮度)、形狀、大小、負(fù)空間等等來強(qiáng)調(diào)元素。

4. 可讀性和數(shù)字格式

這是確保視覺上清晰清楚的一切:干凈的布局,視覺層級(jí),突出重點(diǎn),對(duì)比鮮明的元素,適當(dāng)?shù)淖煮w,且這些字體也必須具有對(duì)比性和易讀性。

高精度的數(shù)字格式是難以讓人理解的。最好的辦法是將任何數(shù)字四舍五入,并減少較長(zhǎng)的數(shù)字。

七、適應(yīng)性 Adaptability

在實(shí)踐過程中,當(dāng)桌面版本是用戶的優(yōu)先選擇時(shí),則應(yīng)該優(yōu)先構(gòu)建網(wǎng)頁版,然后創(chuàng)建移動(dòng)端的。如果你的目標(biāo)受眾主要使用移動(dòng)端版本,則應(yīng)首先著眼于構(gòu)建移動(dòng)端的儀表盤。然后再創(chuàng)建桌面端的。

儀表盤設(shè)計(jì)的 7 個(gè)階段

儀表盤設(shè)計(jì):Snap

八、結(jié)論 In conclusion

設(shè)計(jì)一個(gè)優(yōu)先的儀表盤并不容易。我們將其創(chuàng)建過程類比作人類發(fā)展,因?yàn)樗怯涀≈匾獤|西和展示工作的連續(xù)階段的好方法。當(dāng)你在開發(fā)你的儀表盤,請(qǐng)不斷地自我提問:是否一切各就其位、各司其職?是否有多余的部分嗎(需要去掉)?各部位協(xié)作時(shí)工作正常嗎?用戶會(huì)喜歡這樣的結(jié)果嗎?這(功能)會(huì)有用嗎?

如你所見,視覺設(shè)計(jì)實(shí)際上是設(shè)計(jì)師最后需要擔(dān)心的事。如果你什么都沒有漏過,你的儀表盤將對(duì)你的用戶產(chǎn)生有價(jià)值的幫助,而不只是一個(gè)玩具。

本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

儀表盤設(shè)計(jì)的 7 個(gè)階段


文章來源:人人都是產(chǎn)品經(jīng)理   作者:TCC翻譯情報(bào)局


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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


 


毛玻璃圖標(biāo)的設(shè)計(jì)教程

lanlanwork


1. 一定要注意識(shí)別度

其實(shí)我一直不敢使用毛玻璃效果的原因,就是害怕有識(shí)別度問題,其實(shí)網(wǎng)上現(xiàn)在有很多毛玻璃圖標(biāo):

圖片

做概念稿練習(xí)練習(xí)還好,如果真的落地肯定不行,太影響識(shí)別了。

為了不影響識(shí)別,我們可以有兩個(gè)做法。

其一:就是毛玻璃的透明度別太低,像騰訊視頻這種:

圖片

這樣不影響我們識(shí)別圖形的輪廓。

其二,我們可以把圖標(biāo)主圖形用顏色填充,毛玻璃的面積只是很小一部分,起到輔助作用即可,比如像喜馬拉雅這種:

圖片

這樣整體的識(shí)別度也不會(huì)太受影響。

以上就是關(guān)于不影響識(shí)別的小方法。

 

2. 技法

毛玻璃圖標(biāo)大部分一共分三層,填充層、玻璃層,模糊層(模糊層是嵌入到玻璃層的)。

其中最重要的一個(gè)關(guān)鍵點(diǎn)就是,玻璃層其實(shí)是假的,并不是透明的,而是100%的填充色。

舉個(gè)最簡(jiǎn)單的例子,我們先畫一個(gè)深藍(lán)色的填充層:

圖片

然后加一個(gè)玻璃層,這個(gè)玻璃層不是透明的,而是100%填充色:

圖片

那有同學(xué)就會(huì)問了,毛玻璃效果怎么產(chǎn)生呢?其實(shí)就是把下面的深藍(lán)色圓復(fù)制一個(gè)進(jìn)入到前面的玻璃層:

圖片

有人又會(huì)問,這也沒效果啊,對(duì),因?yàn)閺?fù)制進(jìn)入玻璃層的圓形和后面的原型位置一摸一樣,如果不做改變,就看不出變化,所以我們先來模糊下:

圖片

區(qū)分的還是不夠開,我們?cè)俳档屯该鞫龋?

圖片

這效果就立馬出來了。

所以從技法層面來說,并不是很難,主要是要注意識(shí)別度和整體的設(shè)計(jì)感。(當(dāng)然,這只是我個(gè)人制作的方法,可能別人也有其他的方式)。

 

3. 底色

前幾天在群里看到一位星友問,說為什么他做的效果是第二個(gè),而不是第一個(gè)那種透透的毛玻璃感覺:

圖片

其實(shí)我在最開始做毛玻璃效果的時(shí)候和她遇到了一樣的問題,這個(gè)問題產(chǎn)生的原因就是因?yàn)榈咨?,現(xiàn)在的底色是黑色,一個(gè)玻璃放在黑色上面,透出來的顏色肯定是深灰色,而不是淺白色(除非你這塊毛玻璃本來就是白色的)。

我在之前的一次練習(xí)時(shí),做一個(gè)黑金配的的毛玻璃效果,最開始就做成了這個(gè)樣子:

圖片

總感覺有點(diǎn)奇怪,其實(shí)就是因?yàn)樵诤谏尘吧?,玻璃層的顏色用了白色,感覺沒透過去,就感覺怪怪的,后來我把玻璃層的顏色變成深灰色:

圖片

這樣看起來就好多了。

制作的原理和剛才說的是一樣的,先把大形畫完:

圖片

然后前面整一個(gè)玻璃層,選一個(gè)深灰色:

圖片

然后把下面的形狀復(fù)制一個(gè)剪切到玻璃層中:

圖片

現(xiàn)在看不出效果是因?yàn)椴A永锩娴膱D形和后面的圖形位置是一摸一樣的,這時(shí)候我們把玻璃層的圖形模糊:

圖片

現(xiàn)在已經(jīng)差不多區(qū)分出來了,如果想要更明顯的區(qū)分,可以把透明度再降低一點(diǎn):

圖片

也還ok,當(dāng)然,我覺得加不加透明度,還是看具體效果調(diào)整就可以了!

再強(qiáng)調(diào)下,大家在做毛玻璃的時(shí)候一定要注意背景色哦,不然可能就會(huì)看起來很奇怪。

 

總結(jié)

好了,以上就是我個(gè)人對(duì)于毛玻璃效果的一點(diǎn)總結(jié),我個(gè)人還是比較喜歡一組毛玻璃圖標(biāo)是多色的,如果是一個(gè)顏色,比如這種:

圖片

相對(duì)來說沒那么耐看,如果是多色的:

圖片

就會(huì)耐看很多,希望給大家一點(diǎn)啟發(fā),下期見,默默扔!

 

原文地址:菜心設(shè)計(jì)鋪(公眾號(hào))
作者:菜心設(shè)計(jì)鋪
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》好慘,我竟然被批評(píng)了,問我為什么不安排教程?我怕了

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

B端圖標(biāo)如何設(shè)計(jì)和應(yīng)用

資深UI設(shè)計(jì)者


1.1 圖標(biāo)的主要類型


理解圖標(biāo),首先關(guān)注的是圖標(biāo)本身的類型,在整個(gè) UI 體系中,圖標(biāo)基本就分成3個(gè)大類:



工具圖標(biāo):包含一定產(chǎn)品功能隱喻的簡(jiǎn)化抽象圖形,代替文字節(jié)省界面空間,方便用戶理解

裝飾圖標(biāo):主要目的是用來裝飾界面的視覺元素,樣式大于功能,常用于節(jié)日活動(dòng)中

啟動(dòng)圖標(biāo):產(chǎn)品的啟動(dòng)圖標(biāo),即用來在系統(tǒng)中打開該產(chǎn)品的圖形按鈕,基本以自身 LOGO 為主


在 B 端項(xiàng)目中,應(yīng)用最廣泛的必然是工具圖標(biāo),而裝飾、啟動(dòng)圖標(biāo)卻鮮有露面機(jī)會(huì)。但出現(xiàn)的少,不代表沒有,解釋工具圖標(biāo)前,我們先優(yōu)先講解下裝飾和啟動(dòng)圖標(biāo)在什么情況下會(huì)出現(xiàn)。


其中,SAAS 類服務(wù)就有很多會(huì)重點(diǎn)強(qiáng)調(diào)品牌、情感化設(shè)計(jì)的案例,例如大家比較熟悉的阿里云和騰訊云。項(xiàng)目中就大量啟用 3D 化的裝飾圖標(biāo)提升界面的質(zhì)感。



啟動(dòng)圖標(biāo)則會(huì)應(yīng)用在一些比較大型的項(xiàng)目里,當(dāng)項(xiàng)目出現(xiàn)了很多下級(jí)功能模塊或類似插件的體系時(shí),就會(huì)采取使用應(yīng)用圖標(biāo)的方式作為入口。


比如 Figma 也是一個(gè) B 端工具,它的插件列表中就可以看見不同的啟動(dòng)圖標(biāo)。還有類似 Slack、Invision、Teambition 等產(chǎn)品,一個(gè)龐大的產(chǎn)品生態(tài)就必然會(huì)衍生出強(qiáng)化不同子產(chǎn)品身份的需求,就自然而然會(huì)用到啟動(dòng)圖標(biāo)了。



最后,就是我們熟知的工具圖標(biāo)了,前兩種圖標(biāo),在前期畫不好不要緊,畢竟這類規(guī)格的產(chǎn)品會(huì)有經(jīng)驗(yàn)更豐富的設(shè)計(jì)或總監(jiān)坐鎮(zhèn),新手當(dāng)個(gè)切圖仔即可……


但是工具圖標(biāo),重要性就不言而喻了,B 端項(xiàng)目對(duì)工具圖標(biāo)的需求非常大,幾乎每個(gè)組件中都會(huì)包含圖標(biāo)。



雖然今天網(wǎng)上有非常豐富的圖標(biāo)素材庫,但在形式各異的 B 端項(xiàng)目里依舊是供不應(yīng)求的,各種行業(yè)特有的功能、實(shí)物、隱喻,只能設(shè)計(jì)師自己完成。


B 端設(shè)計(jì)師在圖標(biāo)設(shè)計(jì)領(lǐng)域的主要工作,就是確定圖標(biāo)樣式、設(shè)計(jì)圖標(biāo)、導(dǎo)出切圖。下面的分享我們也會(huì)主要圍繞工具圖標(biāo)展開。


1.2 B端工具圖標(biāo)的風(fēng)格


工具圖標(biāo)的應(yīng)用主要包含兩個(gè)部分,線性圖標(biāo)和面性圖標(biāo)。



這里再提圖標(biāo)風(fēng)格,不是把以前的知識(shí)點(diǎn)重新講一遍,而是要強(qiáng)調(diào) B 端圖標(biāo)的特殊性。和 C 端相比,B 端圖標(biāo)的實(shí)用屬性更高,并不需要過多凸顯本身的視覺風(fēng)格。


所以,工具圖標(biāo)中,使用大量漸變、插畫、投影的類型都要排除掉,它們對(duì) 99.9% 的項(xiàng)目都只會(huì)造成體驗(yàn)的負(fù)影響,不要被網(wǎng)上的追波風(fēng)飛機(jī)稿給帶偏。



適合 B 端項(xiàng)目的工具圖標(biāo)只要應(yīng)用最基礎(chǔ)的線性和面形風(fēng)格即可,一定要?jiǎng)澐殖霾町?,?yīng)該只包含圓潤(rùn)、纖細(xì)、尖銳這幾種。



很多人好奇線性和面形圖標(biāo)在 B 端設(shè)計(jì)中有什么使用上的差異呢?答案是沒有差異。


線性和面形的使用,純粹看設(shè)計(jì)師在當(dāng)前場(chǎng)景判斷哪個(gè)合適用哪個(gè),只要保證對(duì)應(yīng)圖標(biāo)風(fēng)格統(tǒng)一即可。


不過如果遇到一些比較特殊的情況,比如要表現(xiàn)各類設(shè)備的復(fù)雜圖標(biāo),那用線性的做法還是相對(duì)合適和簡(jiǎn)單一點(diǎn)。



1.3 圖標(biāo)的統(tǒng)一性規(guī)范


對(duì) B 端設(shè)計(jì)來講,獨(dú)立設(shè)計(jì)圖標(biāo)的步驟是必不可少的,應(yīng)該掌握的圖標(biāo)規(guī)范還是必須要懂的。


我們雖然沒有 C 端那么多風(fēng)格和技法的拖累,但想畫好 B 端圖標(biāo)卻多出了其它難點(diǎn),那就是一個(gè)頁面中出現(xiàn)的圖標(biāo)實(shí)在是太多了。



這就引發(fā)了我們要講的第一個(gè)規(guī)范要點(diǎn) —— “統(tǒng)一性”,所有同規(guī)格類型圖標(biāo)具有一致性的特征,這些特征包含了:

  • 粗細(xì)一致:首先使用統(tǒng)一的描邊、線段粗細(xì)參數(shù)

  • 圓角一致:使用一致的圓角數(shù)值,不要一下尖角一下圓角

  • 透視一致:使用接近的透視角度,不要有的側(cè)視有的正視圖

  • 大小一致:視覺的大小保持一致,有均衡的大小感受


如果不能保證統(tǒng)一性的基本要求,那么整個(gè)頁面看起來就會(huì)非常的廉價(jià)、業(yè)余。很多新手處理 B 端項(xiàng)目就是應(yīng)用了多套素材庫圖標(biāo),它們的細(xì)節(jié)完全不一樣,統(tǒng)一性當(dāng)然無從談起。


而讓整套圖標(biāo)保持統(tǒng)一性,是相當(dāng)有難度的,其中最難的一點(diǎn),就是如何讓一套圖標(biāo)的大小均衡。雖然我們要對(duì)每套圖標(biāo)確定一個(gè)固定的尺寸,但不代表圖標(biāo)實(shí)際圖形的長(zhǎng)寬數(shù)值是完全一致的。


幾何圖形對(duì)視覺有一定的欺騙性,有不同的大小體驗(yàn),比如下方案例(魷魚游戲亂入?):



所以,基于這樣的特性,每個(gè)圖標(biāo)本身都包含了兩層屬性,圖標(biāo)的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實(shí)際占地大小,是透明白的,排版的時(shí)候以這個(gè)尺寸作為實(shí)際的邊緣來測(cè)量。



而視覺尺寸,則是在占位尺寸下圖標(biāo)圖形的實(shí)際大小,這個(gè)大小是帶給我們實(shí)際視覺感受的部分。一套圖標(biāo)的不同圖形必然視覺尺寸是各不相同的,我們用占位尺寸包裹它們來方便我們進(jìn)行統(tǒng)一的應(yīng)用。



所以,使用成熟的圖標(biāo)素材必然會(huì)發(fā)現(xiàn)圖形周邊還會(huì)有透明的空白區(qū)域。當(dāng)然,不同的素材,這個(gè)留白也是有區(qū)別的,下一個(gè)小節(jié)就會(huì)解釋。


最后要聲明一點(diǎn),一套項(xiàng)目中可以包含多個(gè)規(guī)格(2-5個(gè))的工具圖標(biāo),比如導(dǎo)航用的圖標(biāo)比普通工具圖標(biāo)更復(fù)雜一點(diǎn),設(shè)計(jì)師只要保證每種規(guī)格保持的統(tǒng)一性即可。


1.4 圖標(biāo)的柵格系統(tǒng)


圖標(biāo)越多,大小的控制越困難,所以專業(yè)的圖標(biāo)庫繪制就必然會(huì)應(yīng)用圖標(biāo)的柵格系統(tǒng)進(jìn)行輔助。


在 Ant 的體系中,一個(gè)基于柵格的圖標(biāo)實(shí)際包含3層,背景層、格線層、圖形層。



背景層,即圖標(biāo)展位尺寸,需要先確定出這個(gè)元素的大小,然后才是里面的繪制區(qū)域。通常,柵格系統(tǒng)會(huì)為邊緣預(yù)留 1-4 像素的內(nèi)邊距(出血位),正所謂四周留一線,日后好相見。


格線層,則是使用的柵格線段,也是最重要的部分。格線層通常由 4 個(gè)基本圖形構(gòu)成,包含正方形、圓形、水平長(zhǎng)方形、垂直長(zhǎng)方形。


這四個(gè)圖形的長(zhǎng)寬大小不一,原因是為了對(duì)應(yīng)幾何圖形視覺尺寸不同的特征。把它們并列排列,就可以發(fā)現(xiàn)它們的視覺大小非常接近。



這些格線的作用,就是提前幫我們確定好視覺比例,幫助我們快速繪制相同圖形類型的圖標(biāo)。



但是,不是完美符合這四個(gè)圖形要求的圖標(biāo)該怎么辦,總不能格線把所有輪廓都給你實(shí)現(xiàn)出來吧?


格線的另一層作用,也就是最重要的作用,其實(shí)是一個(gè)用來做測(cè)量的工具,而不是輪廓依據(jù)。在幾何視覺差中,最基礎(chǔ)的大小原理是占用面積越大的圖形,尺寸感受越大。所以,長(zhǎng)寬一致的正方形大于圓形,圓大于三角形。


所以當(dāng)我們繪制的非常規(guī)圖形,和類似格線進(jìn)行對(duì)比時(shí),長(zhǎng)寬缺少的一側(cè),就要由另一側(cè)增加數(shù)值來填補(bǔ)它的面積。


比如下圖 Ant 官方的電腦圖標(biāo),它的寬是橫向矩形,但是中間區(qū)域面積較小,所以增加了高度進(jìn)行平衡。



再看一些其它的案例



這一步?jīng)]有固定的參數(shù)使用技巧,設(shè)計(jì)師需要將完成的圖標(biāo)置入到其它圖標(biāo)旁邊進(jìn)行調(diào)試,確保尺寸是合適的。

格線只是一個(gè)圖標(biāo)大小設(shè)置的參考工具,一切以最終效果為標(biāo)準(zhǔn)。





理解完圖標(biāo)的基本規(guī)范,就到圖標(biāo)的使用邏輯了,解決一些常見的設(shè)置誤區(qū)。


2.1 圖標(biāo)應(yīng)該做多大

圖標(biāo)該做多大的,這是目前被問到最多的問題。本來應(yīng)該是非常簡(jiǎn)單的一件事,但很多工作多年的設(shè)計(jì)師也搞不清楚。


仔細(xì)捋了捋,罪魁禍?zhǔn)拙褪?AntDesign 這套規(guī)范中對(duì)圖標(biāo)畫布的解釋了。



要重點(diǎn)強(qiáng)調(diào),Ant 設(shè)計(jì)圖標(biāo)的意圖,和一般項(xiàng)目的是完全不同的。Ant 作為一套龐大的開源項(xiàng)目,它的圖標(biāo)核心特征之一就是 —— 適應(yīng)性


這些圖標(biāo)要被應(yīng)用到各種不同的設(shè)備、顯示器、系統(tǒng)中,圖標(biāo)尺寸會(huì)用多大,在幾倍圖環(huán)境顯示全都是不確定的。所以圖標(biāo)一開始按越大的規(guī)格完成,后續(xù)實(shí)際應(yīng)用中的縮放、匹配也就越容易,適應(yīng)性越高。


但是,在我們自己的項(xiàng)目中,這種做法是完全沒有必要的,1024 圖標(biāo)的負(fù)面影響包含:

  • 像素?cái)?shù)過多使得數(shù)值的制定難度大大提升,不管是元素尺寸還是描邊粗細(xì)

  • 矢量圖形源文件進(jìn)行縮放很容易發(fā)生錯(cuò)位,提前輪廓化會(huì)破壞源文件

  • 縮放圖標(biāo)后描邊的數(shù)值往往會(huì)出現(xiàn)非整數(shù)和 0.5 的狀態(tài),虛邊問題嚴(yán)重


在常規(guī)項(xiàng)目里,一套項(xiàng)目是可以包含不同尺寸和規(guī)格的圖標(biāo)的,而不是我們做一套相同風(fēng)格的圖標(biāo)在整個(gè)應(yīng)用中無差別使用。


這也意味著,每個(gè)圖標(biāo)在產(chǎn)品中的使用場(chǎng)景通常只有一個(gè)尺寸,不需要去面臨縮放的情況。即使需要縮放,也只是這套圖標(biāo)中的少數(shù)幾個(gè)需要,或者相對(duì)特殊的項(xiàng)目。


所以,圖標(biāo)尺寸設(shè)定,就是根據(jù)當(dāng)前位置合適的尺寸來制定。可以使用素材在已經(jīng)設(shè)計(jì)好的布局中嘗試多大的數(shù)值合適,然后創(chuàng)建同樣的數(shù)值即可(盡量以4的倍數(shù)為標(biāo)準(zhǔn))。



2.2 素材的正確使用方法


我們知道圖標(biāo)的素材非常豐富,不管是 Iconfont、IconPark 還是 Iconsearch 等網(wǎng)站,都提供了海量的素材。但是只要稍微專業(yè)點(diǎn)的項(xiàng)目,往往素材庫都滿足不了,部分規(guī)格的圖標(biāo)還是需要我們自己重新繪制。


所以說圖標(biāo)素材就完全沒用了嗎?當(dāng)然不是。


圖標(biāo)的正確用法是作為一種快速試錯(cuò)的參照物,它可以幫助我們實(shí)現(xiàn):

  • 參考圖標(biāo)的具體尺寸在哪個(gè)數(shù)值最合理

  • 參考當(dāng)前場(chǎng)景使用面性還是線性的風(fēng)格更合理

  • 參考圖標(biāo)的設(shè)計(jì)風(fēng)格是圓還是尖銳更合理

  • 參考相關(guān)隱喻的圖形樣式哪種更合理


在項(xiàng)目的界面設(shè)計(jì)階段,我們一向建議優(yōu)先使用外部的素材,尤其是 IconPark 這種比較統(tǒng)一,還可以快速調(diào)節(jié)圖標(biāo)樣式的工具網(wǎng)站。



這個(gè)過程即使素材找不到和寓意一致的也沒關(guān)系,用相近的圖標(biāo)替代就可以。等到頁面布局基本完成以后,最后再集中精力對(duì)需要繪制的圖標(biāo)重畫一遍(甚至是在開發(fā)階段繪制)。


通過別人的圖標(biāo)來快速匹配尺寸、風(fēng)格、樣式,會(huì)幫助我們節(jié)省非常多的時(shí)間,也有助于我們?cè)O(shè)計(jì)出更專業(yè)、美觀的圖標(biāo)。


另外,就是針對(duì)項(xiàng)目一些偏小尺寸的通用圖標(biāo),就可以比較放心的應(yīng)用素材,例如翻頁的左右、更多、下拉、搜索等等。



2.3 圖標(biāo)的色彩和狀態(tài)


圖標(biāo)的尺寸、樣式都確定了,最后就是關(guān)于圖標(biāo)的色彩和不同狀態(tài)的制定了。


前面講過,B 端項(xiàng)目對(duì)圖標(biāo)的裝飾屬性沒有那么迫切,所以正常情況下,太花哨的圖標(biāo)是要盡量避免的。彩色、漸變色、投影,都不應(yīng)該在這個(gè)情況下胡亂使用。


常規(guī)的圖標(biāo)只要使用中性色即可,而需要特別對(duì)待的圖標(biāo),色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。


當(dāng)然,如果項(xiàng)目涉及到一些特殊的工具圖標(biāo),類似工廠、工業(yè)領(lǐng)域表達(dá)實(shí)體設(shè)備的擬物圖標(biāo),可以打破這個(gè)原則。但是,同樣避免這套擬物圖標(biāo)的每個(gè)圖標(biāo)用色不同,盡量只使用 3 種以內(nèi)的顏色完成擬物的填色。



同時(shí)色彩的使用還有一個(gè)重要的意義就是對(duì)圖標(biāo)不同狀態(tài)的呈現(xiàn),部分圖標(biāo)會(huì)承擔(dān)按鈕的功能,包含默認(rèn)、選中兩個(gè)基本狀態(tài)。


普通權(quán)重的圖標(biāo),未選中狀態(tài)可以在默認(rèn)色彩基礎(chǔ)上使用透明度來實(shí)現(xiàn)。



高權(quán)重的圖標(biāo),則可以在選中的狀態(tài)替換色彩,或者更改圖標(biāo)的類型,將原本的線性更改成面形并填充色彩制造反差。





完成所有圖標(biāo)的設(shè)計(jì)以后,最后一步就是切圖和導(dǎo)出了,這決定你的圖標(biāo)能不能被正確運(yùn)用到線上項(xiàng)目中。


3.1 圖標(biāo)的收納和命名


在一套專業(yè)的 B 端項(xiàng)目中,已經(jīng)設(shè)計(jì)好的圖標(biāo)是設(shè)計(jì)規(guī)范的 “資產(chǎn)” 內(nèi)容之一。圖標(biāo)的文件不能散落在項(xiàng)目的各個(gè)界面里,而是在規(guī)范頁面中有統(tǒng)一的整理和收納。



這種做法的流程是,先在軟件的規(guī)范庫中創(chuàng)建對(duì)應(yīng)的圖標(biāo)組件( Symbol / Compoent ),然后再在具體頁面中應(yīng)用,方便后續(xù)的統(tǒng)一管理和修改。


而在這個(gè)過程中,我們也需要對(duì)圖標(biāo)有正確的命名方法,來確保團(tuán)隊(duì)調(diào)用、檢索圖標(biāo)的效率。通常,我的圖標(biāo)命名規(guī)范如下:

尺寸 / 類型 / 圖標(biāo)名-狀態(tài)


示例:

48px/導(dǎo)航圖標(biāo)/表盤頁-默認(rèn)

24px/一般圖標(biāo)/搜索-默認(rèn)


“/” 號(hào)的引用主要是方便軟件中對(duì)組件層級(jí)進(jìn)行劃分,而我調(diào)用圖標(biāo)的規(guī)則勢(shì)必是先從尺寸開始,再選擇對(duì)應(yīng)規(guī)格,最后類型和狀態(tài)。


提前命名也是方便后續(xù)我們切圖和導(dǎo)出,但要提及一點(diǎn),圖標(biāo)的命名不要追求英文化,因?yàn)槲覀兊脑~匯量不可能實(shí)現(xiàn)正式的英文命名規(guī)則,只會(huì)寫一堆大家都看不懂的單詞。


而開發(fā)在使用我們的圖標(biāo)切圖時(shí),也不會(huì)用我們之前取的命名,會(huì)根據(jù)自己的命名習(xí)慣重新命一遍,寫個(gè)讓他能看懂的名字遠(yuǎn)比用亂七八糟的英文強(qiáng)。


3.2 圖標(biāo)的切圖格式


接下來,就要解釋切圖的規(guī)則了。很多沒有經(jīng)驗(yàn)的設(shè)計(jì)師切圖就只是隨手加個(gè)切片,然后上傳藍(lán)湖發(fā)給開發(fā)自生自滅了,這是一個(gè)非常不合理的操作。


再或者,強(qiáng)行使用 Fonticon 格式,而不管實(shí)際情況如何,造成最后實(shí)現(xiàn)效果完全不同步或?qū)崿F(xiàn)不了。


切圖是通過前端調(diào)用并在瀏覽器中進(jìn)行顯示的圖形,而要被瀏覽器正常顯示,就有必要了解適合使用的切圖格式。


圖片的格式包含位圖和矢量?jī)煞N,位圖是通過記錄像素色值的圖形格式,假設(shè)一張圖是 100*100 像素,那么記錄 1W 個(gè)像素點(diǎn)的色彩,所以無法支持無損縮放。而矢量則是通過記錄點(diǎn)線面的坐標(biāo)繪制出顯示圖形的格式,可以支持自由縮放。


理論上,矢量格式是最佳的圖標(biāo)切圖格式,但是它的限制同樣有很多,例如:

  • 無法記錄漸變色

  • 導(dǎo)出輪廓容易有錯(cuò)誤

  • 無法記錄擬物圖形

  • 無法記錄投影元素


前面說過,普通項(xiàng)目中同一圖標(biāo)是很少出現(xiàn)一會(huì)兒大一會(huì)兒小的需求,所以矢量最大的特征無損縮放,往往就不需要我們?nèi)タ紤]。矢量格式切圖的主要出發(fā)點(diǎn)是用來應(yīng)對(duì)移動(dòng)端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題,而不是網(wǎng)頁端的基本使用。



當(dāng)一套項(xiàng)目中出現(xiàn)了矢量格式無法覆蓋的圖標(biāo)時(shí),那么即用矢量切圖,又用位圖,就會(huì)顯得非常的混亂。只有類似 LOGO 等圖形元素,才需要考慮 SVG 格式,而不是一看到圖標(biāo)就上。


所以,最適合切圖的格式就是位圖的 PNG 格式,一方面它是無損的,另一方面它支持透明背景,在切圖應(yīng)用上可以完美和設(shè)計(jì)稿結(jié)合,而這是其它大多數(shù)位圖格式不具備的特征。


當(dāng)每次項(xiàng)目完成以后,并不需要通過藍(lán)湖來實(shí)現(xiàn)切圖的導(dǎo)出,如果切圖文件分散在各個(gè)項(xiàng)目頁面里,那么一定會(huì)有很多圖標(biāo)被遺漏,尤其是圖標(biāo)的不同狀態(tài)切圖。


所以,最理想的切圖形式,就是將所有圖標(biāo)完成整理和命名以后,一起框選,然后導(dǎo)出成 PNG 格式,再同步給程序員即可。






以上就是關(guān)于 B 端圖標(biāo)應(yīng)用的所有知識(shí)點(diǎn)了。后續(xù)會(huì)將這些內(nèi)容進(jìn)行分拆,更新到原子核系列課程中去,會(huì)有更細(xì)節(jié)的案例說明。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼ben_lanlan,報(bào)下信息,會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

文章來源:站酷 作者:酸梅干超人
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


如何選擇合適的圖標(biāo)?來看這份圖標(biāo)類型和風(fēng)格匯總

ui設(shè)計(jì)分享達(dá)人

常見的分類是簡(jiǎn)單的線性分類,缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對(duì)不同類型及風(fēng)格的圖標(biāo)有一個(gè)體系化的認(rèn)知。


大家好,我是Clippp??吹胶玫膱D標(biāo)我們會(huì)習(xí)慣性地截圖保存,但隨著收集的圖標(biāo)越來越多,會(huì)發(fā)現(xiàn)對(duì)圖標(biāo)的分類會(huì)變得越來越混亂…做設(shè)計(jì)時(shí)也不清楚到底該參考或運(yùn)用哪種風(fēng)格最合適。來看看如何解決這些問題!

一、定義圖標(biāo)類型

對(duì)圖標(biāo)進(jìn)行分類時(shí),普遍會(huì)遇到的問題是一個(gè)圖標(biāo)有多種風(fēng)格。例如下面這個(gè)水滴圖標(biāo),樣式很簡(jiǎn)單,但可以劃分到多個(gè)類別中。

面對(duì)這樣的問題,推薦使用系統(tǒng)性的結(jié)構(gòu)來劃分圖標(biāo)類別: 
  • 首先將圖標(biāo)按尺寸大小分為兩類;

  • 繼續(xù)細(xì)分對(duì)應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型;

  • 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級(jí),可以明確定義圖標(biāo)類別。

二、圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現(xiàn)出來。

在對(duì)圖標(biāo)歸類時(shí),首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類: 
  • 大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo),例如App啟動(dòng)圖標(biāo)或代表品牌形象; 
  • 小尺寸圖標(biāo)用作UI控件,起到引導(dǎo)功能或裝飾目的。

三、圖標(biāo)類型

確定圖標(biāo)尺寸后,進(jìn)一步細(xì)分圖標(biāo)類型: 
面性圖標(biāo) 
線性圖標(biāo) 
線面結(jié)合圖標(biāo) 
扁平化圖標(biāo) 
擬物化圖標(biāo) 


利用這種簡(jiǎn)單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中,所以在小圖標(biāo)分類中沒有展示。

四、圖標(biāo)組成


圖標(biāo)尺寸越小,展示的細(xì)節(jié)越有限。相比于大圖標(biāo),小圖標(biāo)的尺寸有一定局限性,圖標(biāo)組成包括 標(biāo)準(zhǔn)和容器兩種。 


大圖標(biāo)利用尺寸上的優(yōu)勢(shì)能展示更多內(nèi)容,分為多種組成形式。

五、小尺寸圖標(biāo)樣式


簡(jiǎn)單的圖像可以更具包容性。圖標(biāo)的尺寸越小,越考驗(yàn)設(shè)計(jì)師傳達(dá)信息的能力。 

1.面性圖標(biāo)

1.1標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識(shí)別,適合應(yīng)用在小尺寸圖標(biāo)中。 
關(guān)鍵點(diǎn):
確保圖標(biāo)有清晰的邊緣,避免羽化; 
圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。 

1.2帶有背景色的面性圖標(biāo)

彩色背景為簡(jiǎn)約設(shè)計(jì)帶來了更多可能。通過這個(gè)技巧使面性圖標(biāo)更友好,更具吸引力。 
關(guān)鍵點(diǎn):
為背景選擇4-12種顏色。 
考慮圖標(biāo)是淺色還是深色,是否適用于所有背景色。 
在彩色背景上使用白色圖標(biāo)比黑色效果更好。 

2.線性圖標(biāo)

2.1標(biāo)準(zhǔn)線性圖標(biāo)

線性圖標(biāo)因?yàn)楹?jiǎn)潔性和現(xiàn)代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標(biāo)。 
關(guān)鍵點(diǎn):
確保輪廓像素清晰。 
越簡(jiǎn)單越好。 
追求更簡(jiǎn)單的細(xì)節(jié)。 

2.2雙色線性圖標(biāo)

設(shè)計(jì)小尺寸圖標(biāo)時(shí),必須放棄細(xì)節(jié)并強(qiáng)調(diào)簡(jiǎn)單的形狀。但當(dāng)使用一種顏色效果不太理想時(shí),可以考慮添加一些顏色。 
關(guān)鍵點(diǎn):
使用兩種搭配和諧的顏色。 
考慮將一種顏色用于主要形狀,另一種顏色用于細(xì)節(jié)。 
少即是多。 
使用粗線條。 

3.線面結(jié)合圖標(biāo)

線面結(jié)合擁有更多細(xì)節(jié),提升用戶的愉悅感。 
關(guān)鍵點(diǎn):
最好使用深色而不是純黑色描邊。 
限制圖標(biāo)的顏色種類。 
避免過多細(xì)節(jié)。 

 4.扁平化圖標(biāo) 

扁平化圖標(biāo)既簡(jiǎn)單又巧妙,表達(dá)品牌形象的同時(shí)具有豐富的內(nèi)涵。 
關(guān)鍵點(diǎn):
避免在<20px的尺寸中使用此圖標(biāo)樣式。 
選擇2-3種顏色,可以一起使用。 
一種顏色為主色,另一種顏色應(yīng)為高光/細(xì)節(jié)色。 

六、大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少,更多用于產(chǎn)品標(biāo)識(shí)或品牌宣傳。 

 1.線性圖標(biāo) 

1.1標(biāo)準(zhǔn)線性圖標(biāo)

在設(shè)計(jì)任何圖標(biāo)前,都可以先創(chuàng)建一個(gè)線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
關(guān)鍵點(diǎn):
這類圖標(biāo)最容易制作。 
避免出現(xiàn)輪廓羽化。 
線條粗細(xì)要一致。 
不要害怕添加細(xì)節(jié)。 

1.2漸變線性圖標(biāo)

添加一些漸變能讓原本單一的線性圖標(biāo)賦予更多的個(gè)性。 
關(guān)鍵點(diǎn):
在小尺寸圖標(biāo)中添加漸變會(huì)降低圖標(biāo)的可視性。 
選擇漸變時(shí),首先考慮鄰近色。 
線條越粗,漸變?cè)矫黠@。 
線條細(xì)節(jié)越多,漸變?cè)矫黠@。 

1.3等距線性圖標(biāo)

2.5D圖標(biāo)做起來會(huì)花費(fèi)很多時(shí)間,但效果會(huì)很好。在設(shè)計(jì)汽車、房屋、家具等實(shí)體產(chǎn)品時(shí),建議優(yōu)先使用2.5D圖標(biāo)。 
關(guān)鍵點(diǎn):
同一組圖標(biāo)要使用相同的等軸測(cè)網(wǎng)格。 
2.5D等軸圖標(biāo)很復(fù)雜,在較小的尺寸下會(huì)失去作用。 
如果可以,讓所有圖標(biāo)都朝向同一個(gè)方向。 

1.4手繪線性圖標(biāo)

隨著設(shè)計(jì)趨勢(shì)向簡(jiǎn)約化、扁平化發(fā)展,很多設(shè)計(jì)師喪失了手繪圖標(biāo)的能力。實(shí)際上手繪圖標(biāo)讓品牌更真實(shí)甚至更有趣。 
關(guān)鍵點(diǎn):
手繪圖標(biāo)掃描后,再用數(shù)字方式重新繪制,這樣可以保證線條粗細(xì)一致。 
盡量讓所有的線條保持相同的顏色,這會(huì)使文件更小。 

1.5斷線圖標(biāo)

標(biāo)準(zhǔn)的線性圖標(biāo)看起來可能會(huì)很單調(diào),而簡(jiǎn)單靈活的斷線處理能為圖標(biāo)增加更多個(gè)性。 
關(guān)鍵點(diǎn):
斷線粗細(xì)應(yīng)該相同。 
圖標(biāo)的中斷次數(shù)盡可能保持一致。 

1.6雙色線性圖標(biāo)

關(guān)鍵點(diǎn):
確保兩種顏色具有相同的對(duì)比度,否則可能會(huì)導(dǎo)致用戶看不清其中一種顏色,因此無法識(shí)別完整的圖標(biāo)。例如左下角的淺綠色對(duì)于視力弱的用戶來說就很不友好。 

2.線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)可以看作是添加顏色后的線性圖標(biāo)。線面結(jié)合具有很強(qiáng)的輪廓,讓圖標(biāo)能夠清晰可見。 
2.1標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
使用有限的顏色和統(tǒng)一的線條風(fēng)格,使圖標(biāo)具有品牌性。 
使用線條和點(diǎn)來添加更多細(xì)節(jié)。 
避免使用純黑色描邊。 

2.2帶有背景色的線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
描邊斷開時(shí),圖標(biāo)效果很更好。 
避免在小尺寸時(shí)使用。 
使用有限的調(diào)色板。 
考慮使用較淺的描邊/背景色。 
考慮在圖標(biāo)下方添加一條水平線,使圖形具有相同的位置(中間的圖標(biāo)示例) 

2.3錯(cuò)位線面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯(cuò)位時(shí),顏色移到右邊圖標(biāo)左上角留出高光,帶來一種清新的感覺。 
關(guān)鍵點(diǎn):
考慮使用斷線描邊。 
使用有限的調(diào)色板。 
確保描邊和填充色簡(jiǎn)單且一致。 

2.4色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點(diǎn)在于并不依賴于顏色,僅將其用于裝飾。 
關(guān)鍵點(diǎn):
選擇有限的調(diào)色板。 
先關(guān)注輪廓再關(guān)注顏色,顏色僅用于裝飾。 
避免形狀色和背景色過于相似,降低可見度。 

2.4單色線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
避免使用暖色調(diào)尤其是紅色,會(huì)讓用戶感到壓抑。 
首先確定合適的描邊顏色,再考慮填充色。 

 3.扁平化圖標(biāo) 

扁平化圖標(biāo)通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡(jiǎn)潔、友好和適當(dāng)?shù)募?xì)節(jié),讓這類圖標(biāo)非常具有吸引力。 
3.1標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點(diǎn):
使用柔和的調(diào)色板,避免明亮的顏色。 
分清簡(jiǎn)化和添加細(xì)節(jié)之間的界限。 

3.2帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器,帶來動(dòng)態(tài)的感覺。 
關(guān)鍵點(diǎn):
嘗試讓圖形從容器中凸出來,以增加深度。 
因?yàn)樵谌萜髦?,可以添加更多的?xì)節(jié)而不用擔(dān)心圖形變得混亂。 
嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。 

3.3等距圖標(biāo)

關(guān)鍵點(diǎn):
保持所有圖標(biāo)朝向同一方向。 
選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來更一致。 
避免小尺寸使用。 

3.4半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影,得到更具個(gè)性的圖標(biāo)。 
關(guān)鍵點(diǎn):
小尺寸圖標(biāo)不起作用。 
使用有限的調(diào)色板。 
確保所有的圖標(biāo)色調(diào)相似。 

3.5長(zhǎng)陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時(shí),可以考慮添加長(zhǎng)陰影,主要包括純色陰影和漸變陰影兩種類型。 
關(guān)鍵點(diǎn):
使容器具有相同的顏色或類似的色調(diào)。 
只在大尺寸圖標(biāo)中使用。 
將半陰影與長(zhǎng)陰影組合使用效果更好。 

 4.擬物化圖標(biāo) 

擬物化圖標(biāo)實(shí)際上已經(jīng)包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

這種風(fēng)格的圖標(biāo)看起來與現(xiàn)實(shí)生活中的圖標(biāo)盡可能類似,讓用戶感到更舒適。 
關(guān)鍵點(diǎn):
考慮添加底部陰影。 
使光源來自同一方向。 
確保圖標(biāo)都朝向相同的方向。 
目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo),可以考慮使用3D建模來實(shí)現(xiàn)這種效果。 

總結(jié)

希望大家能對(duì)圖標(biāo)的分類及設(shè)計(jì)有更全面深入的認(rèn)識(shí),從而構(gòu)建一套完整的圖標(biāo)思維體系。

文章來源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


日歷

鏈接

個(gè)人資料

存檔