国产乱码一区二区三区四区_国产精品免费不卡_国产精品一区精品国产自在_亚洲国产精品97久久无色_一本之道无人区_俄罗斯胖老太牲交

在UI設(shè)計(jì)系統(tǒng)中，圖標(biāo)是最重要的組件之一，是任何UI界面中不可或缺的視覺(jué)元素。理解與圖標(biāo)相關(guān)的概念以及正確的繪制方式是入門(mén)級(jí)UI設(shè)計(jì)的必備條件。
關(guān)于互聯(lián)網(wǎng)上繪制的圖標(biāo)有很多文章和教導(dǎo)，但它們不是太籠統(tǒng)，它們太片面。即使在閱讀了大量這些零碎的知識(shí)之后，我們很難對(duì)我們的認(rèn)知中的——系統(tǒng)有更全面的了解，因此大多數(shù)初級(jí)UI設(shè)計(jì)師總是繪制壞圖標(biāo)。
在回答這個(gè)問(wèn)題時(shí)，我希望用一篇長(zhǎng)篇文章來(lái)理解圖標(biāo)設(shè)計(jì)的所有關(guān)鍵點(diǎn)和具體的設(shè)計(jì)方法，這樣所有設(shè)計(jì)新手都可以開(kāi)始使用圖標(biāo)設(shè)計(jì)。
本文分為五個(gè)部分：

圖標(biāo)介紹：首先，您對(duì)圖標(biāo)有了全面的了解，并了解圖標(biāo)的類(lèi)型和應(yīng)用場(chǎng)景。

工具圖標(biāo)：最常見(jiàn)工具類(lèi)型圖標(biāo)的規(guī)范，以及相應(yīng)的設(shè)計(jì)案例演示。

裝飾圖標(biāo)：近年來(lái)，越來(lái)越廣泛地使用視覺(jué)圖標(biāo)設(shè)計(jì)理解，并做出相應(yīng)的解釋。
啟動(dòng)圖標(biāo)：說(shuō)明啟動(dòng)圖標(biāo)的規(guī)格以及如何有效地設(shè)計(jì)它。
應(yīng)用案例：介紹在UI項(xiàng)目中應(yīng)用多少圖標(biāo)規(guī)范，如何設(shè)計(jì)正確的圖標(biāo)。
對(duì)圖標(biāo)的基本了解
圖標(biāo)是圖形標(biāo)識(shí)符。它有兩個(gè)概念，廣泛和狹隘。廣義上指的是在現(xiàn)實(shí)世界中具有明確含義的所有圖形符號(hào)。狹義是指計(jì)算機(jī)設(shè)備界面中的圖形符號(hào)。它具有非常大的覆蓋范圍。
對(duì)于UI設(shè)計(jì)師，我們專(zhuān)注于狹義概念，這是UI界面視覺(jué)組合的關(guān)鍵元素之一。
在最常見(jiàn)的平面設(shè)計(jì)風(fēng)格的瞬間，界面的實(shí)際視覺(jué)構(gòu)圖只有4個(gè)元素，圖片——文本——幾何——圖標(biāo)。
可以說(shuō)圖像——文本——幾何只使用排版技巧，而圖標(biāo)是UI設(shè)計(jì)中唯一要求我們除了插圖元素之外“繪制”——“創(chuàng)建”的元素。事情的困難已經(jīng)增加。
在原始界面中，拋出一些正方形——并粘貼幾張圖片——填寫(xiě)一些單詞，可以制作界面，如Clear APP，不僅工作量小，而且符合極簡(jiǎn)主義原則，為什么不感恩設(shè)計(jì)圖標(biāo)？
這涉及到圖標(biāo)角色的討論。為了節(jié)省空間并進(jìn)入每個(gè)人都希望更快看到的關(guān)鍵干貨，我不會(huì)從古代人類(lèi)和圖形符號(hào)之間的糾纏開(kāi)始，并談?wù)搱D形界面本身。有這么重要的位置，不是嗎？
有兩個(gè)原因。雖然第一個(gè)文本也是圖形符號(hào)，但文本與圖標(biāo)相比過(guò)于復(fù)雜，并且在識(shí)別效率方面存在固有的缺點(diǎn)。而且，不同的語(yǔ)言具有不同的文本長(zhǎng)度。如果您更改為阿拉伯語(yǔ)或俄語(yǔ)，則可能無(wú)法在一行中安裝所有單詞。圖標(biāo)可以以更有效的方式壓縮我們想要傳遞的信息，不僅易于識(shí)別，而且使界面更簡(jiǎn)潔，更有利于排版。
第二點(diǎn)是關(guān)于視覺(jué)欣賞。在某些頁(yè)面中，如果刪除了圖標(biāo)，則不會(huì)影響我們的運(yùn)營(yíng)效率和對(duì)內(nèi)容的理解。但是沒(méi)有圖標(biāo)，缺少這些裝飾，我們會(huì)覺(jué)得這個(gè)頁(yè)面看起來(lái)太無(wú)聊，不好，最好的例子就是應(yīng)用程序設(shè)置頁(yè)面。
既然您已了解圖標(biāo)的作用和重要性，那么您需要了解我們想要在工作中設(shè)計(jì)哪些圖標(biāo)。
可分為三大類(lèi)：
工具圖標(biāo)
裝飾圖標(biāo)
啟動(dòng)圖標(biāo)
下面，我們將分別介紹它們并顯示相關(guān)的設(shè)計(jì)類(lèi)型，以便讀者在開(kāi)始學(xué)習(xí)特定設(shè)計(jì)之前，可以更全面地了解UI設(shè)計(jì)創(chuàng)建的圖標(biāo)。
雖然很容易理解，但它包含很多設(shè)計(jì)風(fēng)格，可以分為兩類(lèi)：線性和扁平，然后分開(kāi)細(xì)分。
1.風(fēng)格1：線性風(fēng)格
線性圖標(biāo)（圖形）由線條的描邊輪廓勾勒出輪廓。大多數(shù)人對(duì)其風(fēng)格識(shí)別的第一反應(yīng)應(yīng)該是使用純色封閉輪廓。例如，在模式示例中，線性圖標(biāo)的創(chuàng)意空間似乎不多，但實(shí)際上有很多調(diào)整空間。
2.風(fēng)格2：面部風(fēng)格
面部圖標(biāo)，是一種圖標(biāo)樣式，使用內(nèi)容區(qū)域的顏色填充。類(lèi)似地，在這種類(lèi)型的圖標(biāo)中，它不僅是一種應(yīng)用純色的方式，還有許多類(lèi)型的視覺(jué)表示。
3.風(fēng)格3：混合風(fēng)格
當(dāng)然，在設(shè)計(jì)圖標(biāo)類(lèi)型時(shí)，它不一定是非線性和非保形的。有些設(shè)計(jì)師熱衷于創(chuàng)作和嘗試，并且還創(chuàng)建了具有線性筆劃和顏色填充的混合圖標(biāo)。區(qū)域。
裝飾圖標(biāo)
與工具圖標(biāo)相比，裝飾圖標(biāo)具有更多視覺(jué)效果。對(duì)于一些更復(fù)雜的應(yīng)用，過(guò)度簡(jiǎn)單無(wú)法彌補(bǔ)過(guò)度的信噪比問(wèn)題。我們需要豐富視覺(jué)體驗(yàn)以提高內(nèi)容的觀看質(zhì)量并減少在一個(gè)屏幕上顯示的內(nèi)容量。
例如，在類(lèi)別列表中，可以使用線框和文本將大量?jī)?nèi)容集中到一個(gè)屏幕中，但實(shí)際的瀏覽效率不會(huì)增加，并且它并不美觀。
還有一個(gè)國(guó)內(nèi)接口設(shè)計(jì)環(huán)境，將根據(jù)操作要求進(jìn)行專(zhuān)門(mén)設(shè)計(jì)。特別是在電子商務(wù)領(lǐng)域，第一屏幕上的圖標(biāo)將被改變?yōu)橹黜?yè)的風(fēng)格，這將增加事件的氛圍。
裝飾圖標(biāo)設(shè)計(jì)，雖然沒(méi)有明確說(shuō)明如何做，效果如何好，但最常見(jiàn)的類(lèi)型有四種，下面分別介紹。
平面樣式
平面裝飾圖標(biāo)通常可以理解為在平面插圖中繪制的圖標(biāo)。除了繼承平面純色填充功能外，它還具有比普通圖標(biāo)更多的細(xì)節(jié)和樂(lè)趣。
2.對(duì)象的風(fēng)格
準(zhǔn)風(fēng)格的圖標(biāo)現(xiàn)在越來(lái)越頻繁出現(xiàn)，并且集中在大規(guī)模的經(jīng)營(yíng)活動(dòng)中。通常，這些活動(dòng)會(huì)通過(guò)對(duì)象的方式將頭部設(shè)計(jì)成類(lèi)似故事的場(chǎng)景，因此使用自然頂部的相關(guān)圖標(biāo)。對(duì)象的設(shè)計(jì)將更合適。
3. 2.5D風(fēng)格
2.5D是具有卡通和像素繪畫(huà)風(fēng)格的平面設(shè)計(jì)類(lèi)型。在一些非必要的設(shè)計(jì)環(huán)境中，使用2.5D將更容易與主流界面設(shè)計(jì)風(fēng)格相匹配，它具有更強(qiáng)的樂(lè)趣和分層。
4.多彩漸變
這是一個(gè)詞匯的原始術(shù)語(yǔ)，找不到更恰當(dāng)?shù)拿枋觯蛘哂X(jué)得夸張的點(diǎn)與其氣質(zhì)是一致的。這種圖標(biāo)是通過(guò)一系列非常激進(jìn)的漸變和對(duì)比來(lái)實(shí)現(xiàn)的，通常是彩色陰影。
使用這些圖標(biāo)的區(qū)域通常呈現(xiàn)出色彩鮮艷的場(chǎng)景，只能用于內(nèi)容非常豐富且面向用戶(hù)的產(chǎn)品。這是一個(gè)非常困難的設(shè)計(jì)。
5.物理地圖
最后一個(gè)是采用真實(shí)攝影對(duì)象的設(shè)計(jì)風(fēng)格。雖然它不完全屬于我們的創(chuàng)作和繪畫(huà)，但考慮它是合適的。由于此圖標(biāo)經(jīng)常出現(xiàn)，因此有必要在以后掌握它。啟動(dòng)圖標(biāo)
最后，我們來(lái)談?wù)剢?dòng)圖標(biāo)。啟動(dòng)圖標(biāo)的設(shè)計(jì)比前兩種圖標(biāo)更難，因?yàn)樗鼘?shí)際上是“徽標(biāo)進(jìn)入系統(tǒng)圖標(biāo)模板”的圖標(biāo)。
除了掌握必要的規(guī)格外，發(fā)射圖標(biāo)主體的設(shè)計(jì)是LOGO的設(shè)計(jì)，它超越了圖標(biāo)繪圖本身的知識(shí)。因此，在將來(lái)，我將為此問(wèn)題解釋一些簡(jiǎn)單易懂的設(shè)計(jì)解決方案。我們來(lái)看看一些設(shè)計(jì)形式。
文字形式
用作圖標(biāo)主體的文本類(lèi)型通常是應(yīng)用程序本身的品牌。 LOGO使用文本，因此在此處復(fù)制字體。
2.圖標(biāo)表格
對(duì)于某些部分工具，將使用工具圖標(biāo)設(shè)計(jì)適合使用簡(jiǎn)單圖形傳達(dá)應(yīng)用程序功能的啟動(dòng)圖標(biāo)。
3.圖形圖標(biāo)
圖形表單看起來(lái)非常接近圖標(biāo)形式，但它根本不屬于同一類(lèi)型。它不是圖標(biāo)的原因是因?yàn)檫@種圖標(biāo)的主圖形是一個(gè)高度抽象的標(biāo)識(shí)，傳達(dá)了品牌標(biāo)識(shí)。不是圖形的意思。
4.插圖形式
對(duì)于一些純粹的應(yīng)用程序，如閱讀，漫畫(huà)和兒童應(yīng)用程序，他們熱衷于使用卡通人物作為圖標(biāo)的主體。
5.原型形式
雖然平面設(shè)計(jì)現(xiàn)在占主導(dǎo)地位，但仍有許多應(yīng)用程序，其中啟動(dòng)圖標(biāo)是通過(guò)模擬設(shè)計(jì)的。因?yàn)閷?duì)于這些應(yīng)用，設(shè)計(jì)傳達(dá)的信息通常更直觀和準(zhǔn)確。
當(dāng)然，還有其他方法可以啟動(dòng)圖標(biāo)設(shè)計(jì)，例如明星爆頭，照片，原始游戲圖片等，但了解這些類(lèi)型就足夠了。
上面介紹的三個(gè)圖標(biāo)是未來(lái)將在UI行業(yè)中設(shè)計(jì)的內(nèi)容。雖然圖標(biāo)看起來(lái)很簡(jiǎn)單，但有很多技巧可以使用。除了正確設(shè)計(jì)圖標(biāo)外，高級(jí)和低級(jí)UI設(shè)計(jì)者之間的區(qū)別還包括圖標(biāo)設(shè)計(jì)類(lèi)型的數(shù)量。
因此，在開(kāi)始學(xué)習(xí)之前，不要將設(shè)計(jì)圖標(biāo)限制為最簡(jiǎn)單的圖形，并且有許多有趣的設(shè)計(jì)表單等待您嘗試。
學(xué)習(xí)圖標(biāo)所需的軟件
了解了圖標(biāo)的類(lèi)型，是時(shí)候開(kāi)始了解應(yīng)該使用哪些軟件來(lái)制作這些圖標(biāo)。通常，UI使用的設(shè)計(jì)軟件主要包括PS，AI，Sketch和XD。從理論上講，它們都包含圖標(biāo)繪制功能。如果我直接告訴你掌握這4個(gè)軟件，那么很難畫(huà)出圖標(biāo)。這是非常不負(fù)責(zé)任的，所以為了對(duì)新人更友好（如果你們都精通，只是跳過(guò)它），我將分析這四個(gè)軟件在圖標(biāo)設(shè)計(jì)中的優(yōu)缺點(diǎn)，以及需要的部分要掌握。 。1. Sketch/XD
這兩個(gè)軟件是我們?cè)O(shè)計(jì)UI界面的主要力量。但是你必須記住，他們的主要功能是完成UI界面元素的布局，而不是創(chuàng)建和繪圖。
雖然它們都包括路徑，筆，布爾運(yùn)算等（Sketch比XD略好），但是當(dāng)你想繪制一些非?；镜木€性或平面圖標(biāo)時(shí)沒(méi)有問(wèn)題，但只要它涉及更復(fù)雜的圖形，你常常不知所措。
因此，我建議所有學(xué)習(xí)UI的新手不應(yīng)該從這兩個(gè)軟件開(kāi)始，而應(yīng)該首先掌握PS和AI。當(dāng)您想快速實(shí)現(xiàn)一些簡(jiǎn)單的圖標(biāo)時(shí)，您自然知道如何使用Sketch和XD。
可以說(shuō)PS和AI的應(yīng)用決定了我們圖標(biāo)設(shè)計(jì)的上限，而Sketch和XD是下限，所以上限越高越好。
2. Photoshop
PS是一款專(zhuān)為一切設(shè)計(jì)的設(shè)計(jì)軟件，但它本質(zhì)上是一個(gè)“位圖軟件”。如下文所述，理想的是在界面中使用矢量格式圖標(biāo)，而PS不便于矢量操作，例如將矢量圖層復(fù)制到其他軟件。
在實(shí)際項(xiàng)目中，我們將使用PS來(lái)設(shè)計(jì)具有相對(duì)復(fù)雜視覺(jué)性能的一些圖標(biāo)，例如啟動(dòng)圖標(biāo)，工件圖標(biāo)，物理圖標(biāo)等。
沒(méi)有很多PS功能需要用于繪制圖標(biāo)。您需要在學(xué)習(xí)此軟件的過(guò)程中對(duì)其進(jìn)行過(guò)濾。關(guān)鍵點(diǎn)有以下幾點(diǎn)：
路徑創(chuàng)建和調(diào)整
鋼筆工具和錨
路徑圖層
布爾運(yùn)算
圖層屬性
雖然PS用于在實(shí)際項(xiàng)目中繪制復(fù)雜圖標(biāo)，但它并不妨礙我們使用PS從最基本的圖標(biāo)中繪制。因?yàn)槲覀兿胍莆丈鲜鲋R(shí)點(diǎn)，所以簡(jiǎn)單的工具圖標(biāo)是最好的銳化工具。 Stone，然后學(xué)習(xí)AI的操作，你可以更快地開(kāi)始。
3.彈簧
AI也是UI設(shè)計(jì)必須學(xué)習(xí)的軟件。它非常通用，主要用于設(shè)計(jì)矢量圖形。與PS相比，它具有更好的矢量運(yùn)算支持。它是用于調(diào)整路徑細(xì)節(jié)的最全面，最精細(xì)的軟件，AI中的圖形也可以直接復(fù)制并粘貼到其他應(yīng)用程序的畫(huà)布中。
如果你掌握了上面提到的PS基礎(chǔ)，那么學(xué)習(xí)AI要容易得多。其中，AI設(shè)計(jì)圖標(biāo)中有三個(gè)特殊功能需要掌握和學(xué)習(xí)：
形狀發(fā)生器
輪廓中風(fēng)
路徑查找器
在花了幾個(gè)晚上掌握PS和AI的相關(guān)知識(shí)點(diǎn)后，我們?yōu)楹罄m(xù)研究提供了技術(shù)支持，我們可以進(jìn)入下一階段。
結(jié)束這是圖標(biāo)系列中的第一篇文章，信息量也不算小。因此，我們將在最后總結(jié)它，以便每個(gè)人都能更容易記住。
知識(shí)點(diǎn)1：在UI的界面中，圖標(biāo)的主要功能是有效地傳遞信息并美化界面。
知識(shí)點(diǎn)2：UI中涉及三種主要類(lèi)型的圖標(biāo)，例如工具圖標(biāo)，裝飾圖標(biāo)和應(yīng)用程序圖標(biāo)。
知識(shí)點(diǎn)三：工具圖標(biāo)，是用于在界面中傳達(dá)信息的圖形符號(hào)，主要包括線性，面部和混合設(shè)計(jì)風(fēng)格。
知識(shí)點(diǎn)四：裝飾圖標(biāo)，是用于增強(qiáng)界面視覺(jué)體驗(yàn)的圖形，主要包括平面，仿制，2.5D，漸變等設(shè)計(jì)風(fēng)格。
知識(shí)點(diǎn)5：應(yīng)用程序圖標(biāo)是用于啟動(dòng)應(yīng)用程序的圖標(biāo)，主要包括設(shè)計(jì)表單，如文本，圖標(biāo)，圖形，插圖和工件。
知識(shí)點(diǎn)6：學(xué)習(xí)繪制圖標(biāo)，優(yōu)先考慮PS和AI的路徑相關(guān)功能，而不是Sketch和XD。