超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

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

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

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

風格

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

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

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

重量

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

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

屬性

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

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

網(wǎng)格

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

這個時候網(wǎng)格就起到很關(guān)鍵的作用，有了網(wǎng)格相當于提前將圖標限定范圍，在網(wǎng)格范圍內(nèi)根據(jù)圖標的重量和重心靈活調(diào)整大小，這樣會讓不同形狀的圖標看起來更統(tǒng)一。

視覺校正

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

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

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

角度

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

帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調(diào)。雖然這種帶透視的圖標能引發(fā)用戶關(guān)注，但不建議這么設(shè)計。

比例

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

清晰

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

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

細節(jié)

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

一致性

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

但在同一個頁面場景中，執(zhí)行相同功能的圖標應(yīng)該保持相同的樣式。

熟悉感

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

最后

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

作者：Clippp

轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)

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

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

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

更多精彩文章：

圖標定制設(shè)計之一：6大章節(jié)！圖標設(shè)計基礎(chǔ)知識全方位入門指南

圖標定制設(shè)計之二：超全總結(jié)！金剛區(qū)圖標設(shè)計的 10 大風格

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

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

圖標定制設(shè)計之五：研究微軟 Fluent 圖標規(guī)范后，我總結(jié)了這9個知識點！

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

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

圖標定制設(shè)計之八：從6個方面幫你快速掌握圖標設(shè)計規(guī)范

圖標定制設(shè)計之九：不止畫圖標！5 個金剛區(qū)的交互設(shè)計思考

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