APP圖標設計規(guī)范及要求介紹
我要評論產(chǎn)品圖標網(wǎng)格已經(jīng)形成了一致的標準，且建立了一套明確的圖形元素定位規(guī)則。這種標準化帶來了靈活，而連貫的系統(tǒng)。今天為大家分享APP圖標設計規(guī)范及要求，一起來學習吧！
以上已經(jīng)是全尺寸比例高寬網(wǎng)格圖可以右擊另存作為參考圖使用
網(wǎng)格
關鍵線的形狀是網(wǎng)格的基礎。利用這些核心形狀做為向?qū)В纯墒拐麄€相關產(chǎn)品的圖標保持一致的視覺比例。
方形
高&寬: 152
圓形
直徑: 176
豎直矩形
高:176 寬:128
水平矩形
高:128 寬:176
DP 單位網(wǎng)格設備上的啟動器以 48dp 的尺寸顯示產(chǎn)品圖標 (邊緣 1dp)，所以當你創(chuàng)建圖標時，請使用 48dp 的尺寸，必要時可將其放大 400% 到 192 x 192 dp (邊緣變位 4dp)。
保持這樣的放縮比即可在尺寸在縮小時保持邊緣的鋒利和對齊的正確性。
1:1 單元網(wǎng)格
4:1 單元網(wǎng)格
幾何我們?yōu)檫@幾種特定的關鍵線制定了預設規(guī)則：圓形線、方形線、矩形線、正交線和對角線。這個通用且簡潔的元素調(diào)板形成的目的是統(tǒng)一產(chǎn)品圖標和規(guī)范它們在網(wǎng)格上的布置。
為什么要這樣設計？以上右圖著名的視覺錯覺案例可以例證：
一樣長的線段不同的視覺表現(xiàn)產(chǎn)生不一樣的視覺感知，矩形的視覺感知面積相對大，所以相對網(wǎng)格線居中定格最小部分來設計來達到各種其他形狀樣式的圖標統(tǒng)一感。
內(nèi)容區(qū)域
內(nèi)容應該保持在活動區(qū)域以內(nèi)，如有必要，內(nèi)容可以延展至修飾區(qū)域之中，但不能超出。
活動區(qū)域
修飾區(qū)域
關鍵線形狀關鍵線形狀是網(wǎng)格的基礎，通過關鍵線，即可保持系統(tǒng)圖標的一致性。
方形
寬&高：18px
圓形
直徑：20px
豎直矩形
高：20px, 寬：16px
豎直矩形
高：20px, 寬：16px
幾何我們?yōu)檫@幾種特定的關鍵線制定了預設規(guī)則：圓形線、方形線、矩形線、正交線和對角線。這個通用且簡潔的元素調(diào)板形成的目的是統(tǒng)一 Google 系統(tǒng)圖標和規(guī)范它們在網(wǎng)格上的布置。
構建
組成
系統(tǒng)圖標剖析筆劃末端
角
留白
筆觸
內(nèi)部角
邊界區(qū)域
角
一致的圓角半徑（2px）是統(tǒng)一全系列系統(tǒng)圖標的關鍵，不要修改它。
圖標內(nèi)部的角應為直角，也不要修改它。
外部角
內(nèi)部角
筆觸一致的畫筆寬度（2px）也是統(tǒng)一全系列系統(tǒng)圖標的關鍵，請在內(nèi)外部的邊角上保持使用2px的寬度。
一致
折線和角
筆劃末端
內(nèi)部角
視覺校正極端情況下必要的校正能夠增加圖標的清晰度。 如有必要，需與其他圖標保持一致的幾何形狀，不要加以扭曲。
復雜
縮小
清空為了可讀性和觸摸操作的需要，圖標周圍可以留有一定的空白區(qū)域。
清空區(qū)域
放置
----------------------------------------------------------------------------------------------
最佳范例一致的圖標可以有利于用戶理解，在不同應用中也盡量使用已有的系統(tǒng)圖標。
(上圖)可取
使用相同的畫筆寬度以及方形的筆劃末端。
(上圖)不可取
不要使用不相同的畫筆寬度以及非方形的筆劃末端。
(上圖)可取
讓圖標顯得正面且堅定。
(上圖)不可取
不要傾斜、旋轉(zhuǎn)圖標，或是讓圖標顯得立體。
(上圖)可取
簡化圖標使其更具清晰度和可讀性。
(上圖)不可取
不要過度擬物化使得圖標復雜。
(上圖)可取
讓圖標更加幾何化而變得更加顯眼。
(上圖)不可取
不要過度精細，使用過細畫筆寬度。
(上圖)可取
使用一致的幾何形狀。
(上圖)不可取
不要使用過于松散的形狀。
(上圖)可取
讓圖標在像素點上（X、Y 坐標值不包含小數(shù)）。
圖標應有相等的寬高(e.g. 24x24)，避免扭曲。
(上圖)不可取
圖標不在像素點上。
寬高不等。
以上就是APP圖標設計規(guī)范及要求介紹，教程很實用，希望大家看完本篇教程能有所幫助！
相關文章
全畫幅不是半畫幅的兩倍有什么區(qū)別? 聊聊相機的傳感器尺寸
說到相機畫幅，估計平時聽到最多的可能就是全畫幅與半畫幅了，以至于不少人認為中畫幅比全畫幅要小，為了避免這種常識性錯誤，這篇文章就來和大家說說相機的不同畫幅，所謂2025-04-07
4紙和A5紙因其尺寸適中，使用尤為廣泛,但你知道它們之間有何區(qū)別嗎？今天，就讓我們一起來探討這個話題2025-02-01
各類商務印刷品的尺寸怎么選? 印刷設計常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西，哪些尺寸，紙張更合適呢？本文為大家整理了常用印刷尺寸，方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶關鍵性信息，詳細請看下文介紹2024-02-10
現(xiàn)如今，證件照已成為我們生活中不可或缺的一部分,無論是求職應聘，還是入學注冊，亦或是辦理各種證件，都需要提交符合規(guī)定格式和要求的證件照，那么，這些證件照的尺寸和2024-02-10
平面設計是一個注重視覺效果的設計，簡單的排版方式有時候不能滿足視覺突出的效果，業(yè)務很難達到吸引用戶的眼球，下面我們就來看看8個平面設計技巧分享2023-10-08
每個設計師都有自己最喜歡的設計軟件，并把軟件作為自己的第二語言，今天我們來推薦10款UI設計不可或缺的工具，詳細請看下文介紹2023-10-08
夏日電影風怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風怎么調(diào)色調(diào)色？夏天快到了，想要調(diào)節(jié)夏季電影風的畫面，該怎么操作呢？下面我們就來看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02
什么是真RAW 什么是偽RAW? 簡單說說真 RAW 和 偽RAW
隨著索尼α7RV（ILCE-7RM5）正式發(fā)售，近期有不少網(wǎng)友跟我咨詢索尼相機“無損壓縮（M）”和“無損壓縮（S）”RAW的問題，今天做一個統(tǒng)一答復2022-12-24
手機UI設計尺寸有哪些？作為新手在設計手機ui的頁面的時候，發(fā)現(xiàn)自己設計的尺寸都很奇怪，如果能有元素尺寸介紹就好了，下面就來看看我們匯總的超全面的UI元素尺寸設置指南2021-08-06- 常用照片尺寸有哪幾個？我們經(jīng)常說一寸照片，二寸照片，這些照片的尺寸是怎么計算的？下面我們就來看看照片標準尺寸/像素對照表匯總2021-08-06
