激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

如何設(shè)計出讓人眼前一亮的圖標(biāo) | 火星時代教育

發(fā)布時間：2024-08-20 10:35:43 瀏覽量：117次

導(dǎo)讀：圖標(biāo)在UI設(shè)計師的眼中，就像一顆一顆的螺絲釘，用小小的身軀，連接了產(chǎn)品各個功能和界面，得以讓整個功能流程順暢進(jìn)行。這些圖標(biāo)，究竟是如何發(fā)揮它的作用的？我們又該如何把它做到美觀耐看呢？一起來文中看一下吧。
圖標(biāo)設(shè)計

一、圖標(biāo)是什么

圖標(biāo)定義

要做好圖標(biāo)，首先我們要知道圖標(biāo)是什么？在一般認(rèn)知里，圖標(biāo)可以定義為一種圖形化的符號或標(biāo)識，用于幫助我們理解某些復(fù)雜功能或操作，尤其在數(shù)字化領(lǐng)域里，可視化的圖形符號，更利于高效的展示信息和引導(dǎo)人機(jī)操作交互。也有人稱之為icon或eikan。

1. 圖標(biāo)的發(fā)展史

圖標(biāo)發(fā)展史

圖標(biāo)的歷史可以上溯到人類文明發(fā)源伊始，最早的象形文字，巖洞壁畫等都可以算作圖標(biāo)的一種，為我們后代研究人類文明產(chǎn)生了珍貴的歷史意義。但今天我們研究的圖標(biāo)主要以計算機(jī)系統(tǒng)發(fā)明為分界線，看看這短短幾十年間，圖標(biāo)是如何演化的。

80年代的初期圖標(biāo)還是黑白單色

90年代慢慢多了些色彩，形狀也更豐富

到2000年后，隨著顯示技術(shù)的發(fā)展，圖標(biāo)也越來越形象

圖為iOS1-8圖標(biāo)變化

二、圖標(biāo)的分類

圖標(biāo)因其良好的辨識性和無障礙溝通特性，在各種場景下被廣泛應(yīng)用，同樣，因使用場景的不同，圖標(biāo)所代表的意義也不一樣。

1. 應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)

iOS14桌面應(yīng)用圖標(biāo)

應(yīng)用圖標(biāo)指的是我們設(shè)備界面上的應(yīng)用入口，通常具有較強(qiáng)的品牌特性，可能與logo一致或與其核心功能一致， 如instagram 就是一個簡化的相機(jī)正視圖，亞馬遜則是一個購物車形象，國內(nèi)也有不少產(chǎn)品直接使用了能夠代表產(chǎn)品的文字，需要注意的是，界面圖標(biāo)必須遵循對應(yīng)系統(tǒng)下的尺寸規(guī)范。

華為EMUI 10應(yīng)用圖標(biāo)

華為EMUI 10應(yīng)用圖標(biāo)

2. 功能圖標(biāo)

與應(yīng)用圖標(biāo)不同的是，它主要作為界面中的功能入口，一般為簡潔易辨識的符號，根據(jù)不同產(chǎn)品調(diào)性，圖標(biāo)風(fēng)格也可以多種多樣，并且不強(qiáng)制必須為標(biāo)準(zhǔn)形狀，異形圖標(biāo)能讓界面更為生動，整體風(fēng)格的發(fā)揮也有了更多空間。

功能圖標(biāo)

3. 輔助圖標(biāo)

輔助性圖標(biāo)通常存在于有較多長文字時，搭配作為輔助說明，在UI中，可能還具備一定情感化的作用，在提升用戶接收信息效率的同時安撫用戶情緒；所以整體可能需要具備更多細(xì)節(jié)，作為畫面補(bǔ)充的一部分。

缺省圖標(biāo)

如：缺省圖標(biāo)

4. 與logo的區(qū)別

雖然這兩者特性極為相似，都是圖形化的符號，但logo是為整體品牌服務(wù)的，具備其獨(dú)一無二的專利特性，甚至可以是IP形象或文字；兩者的關(guān)系可以理解為父子。

三、圖標(biāo)的繪制

能夠繪制出高質(zhì)量的圖標(biāo)是每個UI設(shè)計師必備的能力，本次我們以功能圖標(biāo)為例，為大家展示具體的幾個繪制步驟和要點(diǎn)，希望幫大家在細(xì)節(jié)上避開影響圖標(biāo)精致度的一些小細(xì)節(jié)。

第一步：建立圖標(biāo)網(wǎng)格

圖標(biāo)網(wǎng)格

功能圖標(biāo)因形態(tài)結(jié)構(gòu)各異，難免存在尺寸不一的情況，必須考慮其整體視覺的協(xié)調(diào)一致，最好的辦法就是建立圖標(biāo)網(wǎng)格，也可以稱為圖標(biāo)盒子，當(dāng)圖標(biāo)形態(tài)分別為長、方、圓時，有一個合理的比例限制。

圖標(biāo)盒子

將常見圖標(biāo)形態(tài)約束在圖標(biāo)盒子內(nèi)。當(dāng)與個別圖標(biāo)形態(tài)無法完美匹配時，也不必拘泥，一切以達(dá)到視覺和諧為首要。我通常會在圖標(biāo)網(wǎng)格外圍預(yù)留一個安全區(qū)域，可以規(guī)避切圖出現(xiàn)不完整的情況。

第二步：具象功能

有了網(wǎng)格，第二步則需要我們根據(jù)功能，找到與之對應(yīng)的實(shí)物形象；如筆記本是記錄，電話是通話，時鐘代表時間，日歷代表日期等等。

具象功能

這些功能相對比較容易找到現(xiàn)實(shí)中的實(shí)物，如果是比較抽象的功能呢？就需要我們發(fā)散思維，找與之相近含義的事物。如隱私功能，隱私是沒有實(shí)物的，但是我們可以通過“隱私”這個詞延伸：不公開的、隱藏的、鎖起來的、被保護(hù)的，繼續(xù)根據(jù)這些詞延展：就可能是密碼、盾、鎖、遮眼等等。

第三步：簡化結(jié)構(gòu)

有了功能的具體形象，下一步就是思考如何讓圖標(biāo)變得更簡潔易辨識。

畢加索《公?！? style=

畢加索創(chuàng)作《公?！窌r，從初稿到最終成品歷經(jīng)了11個版本，最后只用寥寥幾條線來勾勒，但我們依然能一眼認(rèn)出牛的形態(tài)。繪制圖標(biāo)也一樣，需要我們思考如何省略無用細(xì)節(jié)，化繁為簡，提取他們的主要特征。

第四步：善用布爾運(yùn)算

有了簡化的圖標(biāo)形象，我們接下去應(yīng)該思考如何讓圖標(biāo)更為規(guī)范耐看。

桃心圖標(biāo)

如桃心圖標(biāo)，就是兩個簡單圓角矩形組合而成

桃心圖標(biāo)

桃心圖標(biāo)，也可以做得更圓潤

不同組合下的布爾運(yùn)算，圖標(biāo)形態(tài)特征也會不一樣。這一步的訣竅就是盡可能使用基礎(chǔ)圖形去組合拼貼，這樣做出來的圖標(biāo)，尤其在適配不同尺寸大小切圖時不易拉伸變形。

第五步：處理細(xì)節(jié)

統(tǒng)一性

風(fēng)格統(tǒng)一

風(fēng)格：線性、面性統(tǒng)一

斷點(diǎn)細(xì)節(jié)一致：平角、圓角

圖標(biāo)氣質(zhì)一致：是圓潤還是尖銳硬朗

隨著功能界面的不斷復(fù)雜化，大家早已不滿足于同一產(chǎn)品或同個界面中單一的使用面性或線性圖標(biāo)，而是搭配使用便于層級劃分，故而這里只考慮在同一層級下圖標(biāo)的統(tǒng)一性。

視覺平衡

視覺平衡

如圖，三角形置于中間位置時，視覺重量會偏向左邊，在這個基礎(chǔ)上，我們就需要做出適當(dāng)調(diào)整，以達(dá)到視覺重量平衡。

一致的視角

一致視角

當(dāng)你想讓自己的圖標(biāo)變得更加出彩而采用了區(qū)別于正視圖的結(jié)構(gòu)，那也一定要確保至少在同等層級下，這些圖標(biāo)視角是一致的。

第六步：做出差異化

融入品牌DNA

韓國購物App 11 street

韓國購物App 11 street，就很好的融合了品牌logo的箭頭符號

功能圖標(biāo)因簡潔通俗，比較容易出現(xiàn)市場同質(zhì)化嚴(yán)重的現(xiàn)象，故而很多App選擇在圖標(biāo)中融入品牌基因，不僅做出差異性，還能提升品牌調(diào)性。

跟隨趨勢創(chuàng)新

趨勢創(chuàng)新

通過對圖標(biāo)風(fēng)格質(zhì)感的創(chuàng)新表達(dá)，讓人眼前一亮。這種方式更多需要你了解當(dāng)下的流行趨勢和技法，根據(jù)產(chǎn)品的風(fēng)格調(diào)性，對圖標(biāo)進(jìn)行量身打造。

圖標(biāo)微動效

圖標(biāo)微動效

隨著5G時代來臨，微動效也早就出現(xiàn)在了大眾視野，基于圖標(biāo)的微動效表達(dá)，能讓用戶更快注意到某個功能并去點(diǎn)擊它，如果你的動效還恰好有趣美觀，更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發(fā)揮空間。

第七步：完善圖標(biāo)庫

通常一個產(chǎn)品的功能圖標(biāo)會多達(dá)幾十甚至

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定