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