UI圖標設計

——實訓環節專業班級：數字媒體藝術設計2006、20071.2認識APP設計

由于移動設備的逐步流行和廣泛普及，APP這個詞語開始頻繁的出現在廣大網民的視線中。也許有時候還不知道APP具體指什么，但一定下載過APP，使用過APP。那么什么是APP？APP的優勢和分類有哪些？APP元素構成包含什么？APP即Application(應用程序)的縮寫，指運行在智能手機、平板電腦等移動終端設備上的第三方應用程序。隨著智能手機和Pad等移動終端設備的普及，人們逐漸習慣了使用應用客戶端上網的方式，而目前國內各大電商，均擁有了自己的應用客戶端，這標志著應用客戶端的商業使用，已經開始初露鋒芒。不僅如此，隨著移動互聯網的興起，越來越多的互聯網企業、電商平臺將應用客戶端作為銷售的主戰場之一。本次實訓主要針對手機APP設計進行講解，根據手機操作系統的不同進行劃分，APP設計可大致分為iOSApp設計和AndroidApp設計兩類。1.2認識APP設計1.2.1什么是APP設計1.2認識APP設計1.2.1什么是APP設計iOS客戶端圖標展示Android客戶端圖標展示1、豐富的第三方應用程序APP應用軟件能在短時間內發展迅猛，主要歸功于它滿足了當今社會發展和人們生活的需求，不管是商店、游戲、翻譯程序、圖庫等生活所涉及到的方方面面，它都可以以客戶端程序的形式呈現在用戶面前。1.2認識APP設計1.2.2APP的優勢2、便捷性優勢APP應用軟件帶給人的是方便與實用。以前人們瀏覽網頁，上網購物，查詢資料只能通過瀏覽器來實現，但在當今快節奏的社會中，這種繁瑣的瀏覽查詢方式已遠遠落后，所以這個時候移動APP應用軟件就很自然的擔當了替代的角色。1.2認識APP設計1.2.2APP的優勢3、已融入人們生活APP軟件已延伸到了生活和工作的各個領域。手機在當今時代已經是不可缺少的生活工具，在公交上，地鐵上處處可見使用手機的用戶。APP方便手機用戶隨時隨地查詢和瀏覽，有效占領了用戶的“空閑時間”。1.2認識APP設計1.2.2APP的優勢在當下移動互聯網時代里，更多的企業和開發者為開發APP投入了大量的人力和財力，導致APP產品層出不窮，并占據了各大應用市場。目前市場上的APP大致可分為以下幾類。1.2認識APP設計1.2.3APP設計分類分類應用購物類天貓、淘寶、聚美、糯米網、美麗說、京東、蘇寧易購社交類QQ、微信、微博、陌陌、YY、來往、飛信、百合婚戀、世紀佳緣出行類途牛旅游、攜程旅行、滴滴打車、優步、途家網、驢媽媽生活類墨跡天氣、安居客、天氣通、趕集生活、58同城、美食杰女性類大姨媽、我是大美人、小肚皮、喂奶計劃、美柚孕期拍照類快手、美拍、美圖秀秀、美顏相機、百度魔圖、美人相機影音類酷狗、愛奇藝、暴風影音、天天動聽、騰訊視頻、央視影音資訊類騰訊新聞、今日頭條、網易新聞、新浪新聞、新華社、中關村在線理財類隨手記、掌上基金、存儲罐、大智慧、同花順、百度錢包、支付寶瀏覽器類手機百度、QQ瀏覽器、UC瀏覽器、火狐瀏覽順、360瀏覽器1、啟動圖標啟動圖標是APP的重要組成部分和主要入口，是一種出現在移動設備屏幕上的圖像符號。人們通過對字母和圖像的認知，獲得符號所隱含的意義。啟動圖標一般由圓角矩形或者矩形底板和LOGO或文字構成，更多出現的是由圖標加文字組成的。1.2認識APP設計1.2.4APP構成元素2、加載頁點擊APP圖標后，打開應用的第一個界面就是加載頁。加載頁是由一張漸變或者單色的背景、LOGO（或APP名稱）、廣告語以及版權信息等幾部分組成的，據不完全統計加載頁加載時間通常為2000-3000毫秒。大部分商家會將這個加載頁做成廣告頁。1.2認識APP設計1.2.4APP構成元素3、引導頁當加載頁加載完成后，通常會看到幾張連續展示、設計精美、風格統一的頁面，這就是引導頁。在未使用產品之前，通過引導頁可提前獲知產品的主要功能和特點，并給用戶留下深刻的第一印象。根據引導頁的目的、出發點不同，可以將其分為功能介紹類、使用說明類、推廣類、問題解決類。一般引導頁不會超過5頁。1.2認識APP設計1.2.4APP構成元素4、首頁首頁通常是打開應用后，內容部分映入用戶眼簾的第一個頁面，因此可以說首頁是整個APP中最重要的頁面。首頁通常是由狀態欄、導航欄、內容區、標簽欄構成，具體分析如下。狀態欄：通常為系統默認信息，通常包括電池電量提示、信號狀態等。導航欄：通常包含分類、搜索框、掃一掃、消息中心等。內容區：根據APP的功能不同，內容區域差異也較大。例如電商APP首頁主要包含Banner輪播圖（6個左右）、快速通道（圓形背景圖標）、商品促銷和展示（如秒殺）等。標簽欄：該區為APP主要功能分類，通常是圖標加文字形式展現；例如電商類APP，其標簽欄主要包括：首頁、發現、分類、附近、購物車、我的等幾個標簽。1.2認識APP設計1.2.4APP構成元素4、首頁1.2認識APP設計1.2.4APP構成元素5、內容頁通過APP中的首頁所點擊進去的頁面均稱為內容頁。通常包含列表頁、詳情頁、個人中心頁等。1.2認識APP設計1.2.4APP構成元素任何一款APP的設計都要遵循一套完整的設計流程，這樣才能保證開發過程中有章可循。APP設計的主要流程包括產品定位、交互設計、視覺設計、用戶體驗、項目開發、測試和運營。1.3APP設計流程首先，要明確APP設計的構想和理念，以及受用人群是哪一類，是寫給小孩玩的游戲，還是用來理財的記賬類應用，每個APP應用都有固定的適用人群，而這決定了APP的內容是什么，也決定了要給使用者以什么樣的用戶體驗。其次，一個APP有明確的使用目的是必須的。設計者要了解用戶的需求是什么，如何才能滿足用戶的需求，同時吸引更多的用戶來使用你的APP。產品定位后的產出物應為低保真原型圖和原型說明文檔。低保真原型圖指粗略的線框圖，主要用來簡單說明產品功能。1.3APP設計流程1、產品定位交互設計主要是針對低保真原型圖對產品細節做進一步優化，更多考慮的是用戶流程、信息架構、交互細節和頁面元素等。最終的產出物為高保真原型圖，高保真是最接近最終產品的線路圖，用于表達產品的流程、邏輯、布局、視覺效果和操作狀態等。1.3APP設計流程2、交互設計視覺設計主要是根據高保真原型設計產品界面，這就要求視覺設計師對原型設計有深刻的了解，能夠整體把控頁面的邏輯，用視覺手法完成產品設計。最終的產出物為各種圖片、界面切圖和界面標注。1.3APP設計流程3、視覺設計用戶體驗需堅持以用戶為中心的原則，保持功能與審美的平衡。其實，這一過程貫穿于整個設計當中，通常由團隊的產品經理、交互設計師和視覺設計師來共同完成。1.3APP設計流程4、用戶體驗程序員根據設計團隊提供的標注切圖、搭建界面，根據產品提供的功能說明文檔去開發功能，最終產出物是可使用的應用。1.3APP設計流程5、項目開發應用開發完成后，還需進行后續的測試工作，主要測試應用上有沒有功能問題，將測試結果反饋給開發人員和設計人員進行修改。6、測試運營人員最終把打包好的應用發布到蘋果商店和各大安卓市場上，并通過各種手段提升應用人氣。同時還需要把運營過程中發現的問題反饋給產品人員，由產品人員發起產品的迭代。7、運營為了避免APP設計中出現不必要的麻煩，如設計尺寸錯誤導致顯示不正常的情況發生，與設備相關的尺寸概念是必須要提前了解清楚的。本節將針對移動設備中常用的尺寸進行詳細講解。1.4移動設備尺寸英寸其實就是我們常說的長度單位。顯示設備通常用英寸來表示大小，如14英寸筆記本電腦、50英寸液晶彩電，指的是屏幕對角的長度，手機屏幕也繼承了這個計量單位。1.4.1英寸1.4移動設備尺寸像素的全稱為圖像元素，是用來計算數碼影像的一種單位，如同攝影的相片一樣，數碼影像也具有連續性的濃淡階調，若把影像放大數倍，會發現這些連續色調其實是由許多色彩相近的小方點所組成，這些小方點就是構成影像的最小單位，即像素。1.4.2像素1.4移動設備尺寸分辨率是屏幕物理像素的總和，是指顯示器所能顯示像素的多少。在屏幕尺寸一樣的情況下，可顯示的像素越多畫面就越精細。一般用屏寬像素數乘以屏高像素數來表示，比如iPhone7的屏幕分辨率為750×1334像素，就是說iPhone7的屏幕是由750列和1334行的像素點排列組成的。1.4.3分辨率1.4移動設備尺寸網點密度（簡稱DPI）通常用來描述印刷品的打印精度，表示每英寸所能打印的點數。例如，設置打印分辨率為96DPI，那么打印機在打印過程中，每英寸的長度上將打印96個點。DPI越高，打印機的精度就越高。當DPI的概念用在手機屏幕上時，表示手機屏幕上每英寸可以顯示的像素點的數量。1.4.4網點密度1.4移動設備尺寸像素密度（簡稱PPI）常用于屏幕顯示的描述，表示每英寸像素點的數量。例如，在Photoshop中新建文檔時，設定某圖的分辨率為72PPI，當圖片對應到現實尺度中，屏幕將以每英寸72個像素的方式來顯示。顯示屏幕的PPI數值越高，畫面看起來就越細膩。1.4.5像素密度1.4移動設備尺寸1.4.6常見手機屏幕規格1.4移動設備尺寸型號分辨率（像素）屏幕尺寸（英寸）PPI手機系統iPhone5/5s/5c640×11364.0326iOSiPhone6/6s750×13344.7326iOSiPhone6Plus1080×19205.5401iOSiPhone7750×13344.7326iOSiPhone7Plus1080×19205.5401iOS三星S51080×19205.1432Android三星S6/S71440×25605.1576Android紅米41080×19205441Android小米51080×19205.15428Android隨著移動互聯網的興起，越來越多的互聯網企業、電商平臺已經成功使用APP來強化品牌價值和服務，APP的使用已完全融入人們的生活當中。常用的軟件PhotoshopCC和IllustratorCC。1.5APP設計軟件在智能手機時代，APP應用開發已經成為發展動向，然而很多APP應用軟件在設計方面做的并不夠。那么，怎樣才能設計出高質量的APP得到用戶的一致好評呢？除了要有好的設計理念以外，與APP相關的設計元素也是必須要了解和掌握的。下面就針對APP設計中的色彩、布局等相關知識進行詳細講解。1.6APP設計要素1）主色主色是決定畫面風格趨向的色彩，主色可能是多種顏色，一般在Logo和視覺面積較大的導航欄上使用。主色的選擇過程稱為定色調，它的成敗直接影響到視覺傳達的效果，還會影響到使用者的情緒。因此確定主色調是APP設計中非常關鍵的一步。2）輔助色輔助色的作用是使畫面更完美更豐富。一般應用在APP中的控件、圖標和插圖上。1.6.1 色彩1.6APP設計要素1、認識色彩3）點睛色點睛色通常在色彩組合中占據的面積較小，視覺效果較為醒目。主要用在提示性的小圖標或者需要重點突出的圖形中。1.6APP設計要素1.6.1 色彩1、認識色彩1）明暗對比明暗對比是決定畫面情調、風格的重要因素。在以明度為基準配色時，明度對比強則視敏度高，畫面清晰明朗。明度對比太強則使色彩層次兩極分化，帶有強烈的刺激性，1.6.1 色彩1.6APP設計要素2、色彩對比原則2）色相對比因色相差異而產生的對比稱為色相對比。色相對比的強弱與色彩的相對位置和距離有關，在如圖1所示的色相環中，對比最強的是相對180度補色的對比，如紅與綠的對比。如圖2所示即為色相對比界面效果。1.6.1 色彩1.6APP設計要素2、色彩對比原則3）面積對比將兩個色彩強弱不同的色彩放在一起，若要得到對比均衡的效果，必須以不同的面積大小來調整，弱色占大面積，強色占小面積，而色彩的強弱是以其明度和彩度來判斷，這種現象稱為面積對比。1.6.1 色彩1.6APP設計要素2、色彩對比原則4）純度對比因色彩純度差異而產生的對比稱為純度對比。高純度的色彩明艷、純凈，低純度的色彩含蓄、柔和。在色彩的配色中，往往高純度色彩與低純度色彩相互襯托，相輔相成，這樣色彩的鮮明性和柔和性才能凸現出來。1.6.1 色彩1.6APP設計要素2、色彩對比原則1）參考同類APP根據APP所涉及的行業、風格和定位去尋找同類型APP的色彩搭配組合。如科技風一般采用藍、白、灰為主；女性主題經常以粉色、紫色或柔和的米色為主；美食類主題多以橘黃色為主。1.6.1 色彩1.6APP設計要素3、APP色彩的搭配方法2）三色搭配原則三色搭配原則是指在設計作品中，單個界面的顏色應保持在三種以內（這里的顏色指色相）。如果超過三種，就會產生眼花繚亂的感覺。1.6.1 色彩1.6APP設計要素3、APP色彩的搭配方法注意：在實際設計中，仍然可以使用三個以上的顏色來裝點我們的設計，只是保證顏色不超過三種基調就可以了。3）借助配色軟件如果覺得上述方法無法滿足需求，還可通過配色網站進行配色，通過這種方法獲得的色彩組合都符合色彩搭配規范，省時省力。1.6.1 色彩1.6APP設計要素3、APP色彩的搭配方法狀態欄：位于界面最上方，就是我們經常說的信號、運營商、電量等顯示區域。導航欄：表示當前界面的名稱，包含相應的功能或者是頁面之間的跳轉按鈕。內容區：展示應用提供的相應內容，也是布局變更最為頻繁的一個區域。標簽欄：位于界面最下方，類似于頁面的全局導航，方便快速切換功能或是導航。在手機上，標簽欄包含“未選擇和已選擇”兩種視覺效果。1.6.2 界面布局1.6APP設計要素1.6.2 界面布局1.6APP設計要素在界面設計之前，設計者首先會對界面的風格進行定義。通常UI界面的設計風格主要包括扁平化和擬物化這兩大類，對它們的詳細講解如下。1.7UI設計風格扁平化風格是指去掉多余的透視、紋理、漸變以及能做出3D效果的元素，而強調通過抽象、簡化、符號化的設計元素來完成設計。扁平化設計要求所有元素的邊界都干凈利落，簡單直接的將信息和事物的工作方式展示出來，減少用戶認知障礙的產生。1.7.1 扁平化風格1.7UI設計風格1、什么是扁平化風格1）拒絕特效扁平化設計僅僅采用二維元素，所有元素都不加修飾，從圖片框到按鈕，再到導航欄都干脆有力，規避羽化、陰影以及3D等特效。1.7.1 扁平化風格1.7UI設計風格2、扁平化設計的原則2）僅使用簡單的元素扁平設計中使用到很多簡單的UI元素，比如按鈕和圖標，設計師更常用矩形、圓形、方形等簡單的形狀。UI元素應該在保持可用性的前提下盡可能的簡單，保證應用或網站直觀、易用，無需引導。1.7.1 扁平化風格1.7UI設計風格2、扁平化設計的原則3）注重排版因為扁平化設計要求元素更簡單，排版的重要性就更為突出了。字體的大小應該匹配整體設計，文案精簡、干練，保證產品在視覺上和措辭上的一致性，1.7.1 扁平化風格1.7UI設計風格2、扁平化設計的原則4）關注色彩色彩的使用對于扁平化設計來說非常重要。扁平化設計的色調通常更有活力、色彩更純，其主要、次要顏色通常都是非常大眾化的顏色，然后再配以幾種其它顏色。扁平化設計的另一個趨勢在于復古顏色的使用，在扁平化設計中淺澄色、紫色、綠色、藍色都極為流行。1.7.1 扁平化風格1.7UI設計風格2、扁平化設計的原則5）最簡方案設計師要盡量簡化自己的設計方案，避免不必要的元素出現在設計中。簡單的顏色和字體就足夠了，如果一定需要視覺元素，可通過添加簡單的圖案來實現。1.7.1 扁平化風格1.7UI設計風格2、扁平化設計的原則現今扁平化的設計正在成為新的趨勢，越來越多的網站設計已在UI上走扁平式設計的路線。因為通過這種風格可以讓設計更具有現代感，另外可以強有力的突出設計中最為重要的內容和信息。但是，任何事物的發展規律都必須遵循產生、發展、衰敗、消亡，只有不斷的推陳出新，才能生生不息。所以說扁平化設計最終也會被別的設計風格取代。但是設計師們會不斷的計劃和嘗試，并最終將它進化到一個新的風格——微扁平設計風格（也稱扁平化2.0）。1.7.1 扁平化風格1.7UI設計風格3、扁平化設計的發展趨勢微扁平設計是指在符合符合扁平化的簡潔美學的前提下，增加一些光影效果。例如，微陰影、幽靈按鈕、低調漸變等。1.7.1 扁平化風格1.7UI設計風格3、扁平化設計的發展趨勢擬物化風格是指模擬現實物品的造型和質感，通過疊加、高光、紋理、材質、陰影等效果對實物進行再現，也可適當程度變形和夸張。擬物設計會讓用戶第一眼就認出實物。1.7.2 擬物化風格1.7UI設計風格1、什么是擬物化風格擬物化設計的特點主要體現在以下兩方面：界面：模擬真實物體的材質、質感、細節、光亮等。交互：人機交互也需要擬物化，模擬現實中的交互方式。針對擬物化設計的優缺點分析如下：優點：認知和學習成本低，而且傳達了豐富的人性化的感情。缺點：擬物化本身就是個約束，會限制功能本身的設計。1.7.2 擬物化風格1.7UI設計風格2、擬物化設計的特點及優缺點在UI設計中針對不同的操作系統，界面設計效果也會有很大的差異。下面就針對用戶最常用的iOS系統和Android系統進行詳細講解。1.8智能手機操作系統1.8.1 iOS系統iOS作為蘋果移動設備iPhone和iPad的操作系統，在AppStore的推動之下，成為了世界上引領潮流的操作系統之一。iOS的用戶界面能夠使用多點觸控直接操作，控制方法包括滑動、輕觸開關及按鍵。與系統交互包括滑動(Swiping)、輕按(Tapping)、擠壓(Pinching，通常用于縮小)及反向擠壓(ReversePinchingorunpinching通常用于放大)。此外通過其自帶的加速器，可以令其旋轉設備改變其y軸以令屏幕改變方向，這樣的設計令iPhone更便于使用。1.8智能手機操作系統1.8.1 iOS系統1、文字規范1.8智能手機操作系統在iOS8系統中，英文和數字字體為“HelveticaNeue”，它是比較典型的扁平風格字體，中文字體為HeitiSC（中文名稱叫黑體-簡）。最新的iOS9系統中，中文字體為“蘋方”，英文和數字字體為“SanFrancisco”。1.8.1 iOS系統1、界面布局規范1.8智能手機操作系統狀態欄：尺寸為750×40像素，字體大小為24像素。導航欄：尺寸為750×88像素，標題文字大小為34~40像素，按鈕文字一般不大于32像素。內容區：尺寸為750×1108像素，字體大小在22~36像素之間。標簽欄：尺寸為750×98像素，字體大小為22~24像素。1.8.2 Android系統Android系統是一種基于Linux開發的操作系統，主要使用于移動設備，如智能手機和平板電腦，由Google公司和開放手機聯盟領導及開發。尚未有統一的中文名稱，中國大陸地區較多人使用“安卓”，英語是機器人的意思。2011年11月數據顯示，Android占據全球智能手機操作系統市場52.5%的份額，中國市場占有率為58%。如今Android已經成為了現在市面上主流的智能手機操作系統，隨處都可以見到綠色機器人的身影。1.8智能手機操作系統1、文字規范1.8智能手機操作系統在Android4.X系統中，中文字體為“DroidSansFallback”，英文字體為“Roboto”。在Android5.0系統中，中文字體改為“思源雅黑”。在實際設計中，中文字體選擇“方正蘭亭黑”，英文字體選擇“Roboto”即可。1.8.2 Android系統1、界面布局規范1.8智能手機操作系統狀態欄：尺寸為720×50像素，字體大小為24像素。導航欄：尺寸為720×96像素，標題文字大小為34~40像素，按鈕文字一般不大于32像素。內容區：尺寸為720×1038像素，字體大小在20~36像素之間。標簽欄：尺寸為720×96像素，字體大小為22~24像素。1.8.2 Android系統注意：在APP界面設計中，不管是針對iOS系統還是Android系統，字體大小的設置都不是一成不變的，上述參數僅供參考。實際運用中還需結合界面的美觀度做適當調整。1、定義主題2.1.2圖標設計流程2.1圖標設計基礎知識定義主題是指把要設計的圖標所涉及的關鍵詞羅列出來，重點詞匯突出顯示，確定這些圖標是圍繞一個什么樣的主題展開設計，對整體的設計有一個把控。2、尋找隱喻2.1.2圖標設計流程2.1圖標設計基礎知識“隱喻”是指真實世界與虛擬世界之間的映射關系，“尋找隱喻”是指通過關鍵詞進行頭腦風暴，看看可以聯想到哪些實物。如“休息”這個關鍵詞，可以聯想到下面的圖形。2、尋找隱喻2.1.2圖標設計流程2.1圖標設計基礎知識從上圖可以看出，通過“休息”這個關鍵詞，聯想到了沙發和床，因為它們都有休息的功能。每一個工作和學習的環境都不一樣的，導致對于某個詞的隱喻理解也有所不同。例如，經常喝咖啡的人，認為工作忙碌，來一杯香醇的咖啡就是休息。當然應用是為大多數人制作的，所以要挑選最被大多數人接受的事物來抽象圖形。除非你的應用是為某個群體設計的個性應用。3、抽象圖形2.1.2圖標設計流程2.1圖標設計基礎知識抽象圖形要求設計師將生活中的原素材進行歸納，提取素材的顯著特點，明確設計的目的，這是創作圖標的基礎。在上圖中，“飛機”和“拉桿箱”都進行了抽象化處理，汲取各自最顯著的特點，形成了最終的圖標。3、抽象圖形2.1.2圖標設計流程2.1圖標設計基礎知識需要注意的是，圖形的抽象必須控制，圖形太復雜或者太簡單，識別度都會降低。當“飛機”過于寫實，甚至接近照片時，就會顯的非常復雜且太過具象。當“飛機”過于簡單，甚至只能看到圓形輪廓的時候，就已經看不出什么了，太過抽象。4、繪制草圖2.1.2圖標設計流程2.1圖標設計基礎知識經過對實物的抽象化汲取后，便可以進行草圖的繪制。在這個過程中，主設計師需要將實物轉化成視覺形象，即最初的草圖。當然草稿可能有很多方案，這時需要篩選出若干滿意的方案繼續下面的流程。5、確定風格2.1.2圖標設計流程2.1圖標設計基礎知識在確定了圖標的基準圖形后，下一步就是確定標準色。我們可以根據圖標的類型選擇合適的顏色。當你不知道使用什么顏色的時候，藍色是最穩妥的選擇。目前圖標設計主流是扁平化風格。6、制作和調整2.1.2圖標設計流程2.1圖標設計基礎知識根據既定的風格，使用軟件制作圖標。在扁平化風格盛行的今天，單獨的圖形設計需要更多的設計考量，需要經過大量的推敲，設計調整，因此在圖標的制作中，會修正一些草圖中的不足，也可能增加一些新的設計靈感。7、場景測試2.1.2圖標設計流程2.1圖標設計基礎知識圖標的應用環境有很多種，有的在APPsrore上使用，有的在手機上使用。手機的背景色也各不相同，有深色系的，也有淺色系的。我們要保證圖標在各個場景下都有良好的識別性，因此在圖標上線前，設計師需要在多種圖標的應用場景中進行測試。1、可識別性原則2.1.3圖標設計原則2.1圖標設計基礎知識可識別性原則，指的是圖標要能準確表達相應的操作，即我們看到一個圖標，就要明白它所代表的含義，這是圖標設計的靈魂。2、差異性原則2.1.3圖標設計原則2.1圖標設計基礎知識差異性原則是指圖標要有差異化，以便于用戶辨認和操作。因為圖標設計的目標是提高效率，如果用戶真的很難區分它們，反而降低了工作效率。因此，一些優秀的圖標，往往能夠知圖達意，堪稱設計典范。3、風格統一性原則2.1.3圖標設計原則2.1圖標設計基礎知識一套設計非常協調統一圖標不僅看上去美觀，同時也會增強用戶的滿意度。通常設計風格統一的圖標可以從以下幾點考慮：1）圖標造型上的統一。例如，是選擇扁平化圖標還是選擇擬物圖標。2）圖標色調的統一。3）圖標細節元素要統一。例如是選擇無邊框圖標，還是選擇有邊框圖標。1、正負形組合2.1.4圖標設計技巧2.1圖標設計基礎知識正負形組合是一種最常見的設計方法，我們可以根據應用抽象出兩到三個重要的功能點，或者產品特質，然后提煉相應的圖形，通過圖形相互組合、疊加，或者摳除，組成新的圖形。2、折疊圖形2.1.4圖標設計技巧2.1圖標設計基礎知識當一個完整的平面圖形設計完成后，可以分析圖形的輪廓走向，在圖形的結尾或者轉角處做局部折疊處理。3、線形圖標2.1.4圖標設計技巧2.1圖標設計基礎知識線形圖標是一種獨特的繪制圖形手法，可通過提煉圖形的輪廓設計，各式線性圖形，應用的形象簡練、完整，更具吸引力。4、透明漸變2.1.4圖標設計技巧2.1圖標設計基礎知識通過對圖形放大或縮小疊加不同透明度的圖形，形成一個層次豐富，形態飽滿的圖形組合。5、色塊拼接2.1.4圖標設計技巧2.1圖標設計基礎知識色塊拼接是指把圖形分割成有規律的塊狀，并填充顏色。6、圖形復用2.1.4圖標設計技巧2.1圖標設計基礎知識對已經設計好的主圖形，進行復制，通過透明度、顏色或者大小的變化，創造出一種圖形陣列之美。7、背景組合2.1.4圖標設計技巧2.1圖標設計基礎知識運用不同的底板背景更能使圖標匯聚聚焦點、富有活力。背景可以選擇純色、漸變色、放射或規律的集合線條以及和主題相關的元素。圖標形狀+背景組合。文字+背景組合。圖文組合+背景組合。吉祥物（或卡通形象）+背景組合。360手機主題大賽一等獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計360手機主題大賽二等獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計360手機主題大賽創意獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計360手機主題大賽人氣獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計主題大賽一等獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計主題大賽二等獎

優秀Icon圖標組分析風格優秀Icon圖標UI圖標設計主題大賽二等獎