androidicon大小
① 更改手機桌面系統圖標
更改 Android 系統圖標的過程可以分為兩種方法。一種是通過修改 AndroidManifest.xml 文件，直接在代碼層面進行調整。例如，android:icon="@drawable/ic_launcher" 是用來指定圖標資源的，而 android:label="@string/site_name" 則用於設置應用名稱。具體來說，你需要將 ic_launcher 替換為你想要的新圖標文件名，並且將 site_name 修改為你想要的新圖標名稱。
另一種方法是使用具有圖標編輯功能的啟動器應用，如 APEX、NOVA、ADW 或 HOLO 等。安裝這些啟動器後，長按你想要更改圖標的應用，會彈出一系列選項，包括「換圖標」、「重命名」、「刪除」和「卸載」。通過這些選項，你可以輕松地選擇新的圖標。
需要注意的是，修改 AndroidManifest.xml 文件的方法需要一定的開發經驗，而使用啟動器應用則更加方便快捷。無論是選擇哪種方法，都要確保你選擇的圖標文件格式和大小符合 Android 的要求。此外，修改圖標的操作不會影響應用的功能，但可能會改變用戶體驗。
在使用啟動器應用時，選擇一個功能豐富且用戶評價良好的應用非常重要。不同的啟動器應用可能提供不同的功能和用戶體驗，因此你可以根據自己的需求選擇最適合的應用。
總之，更改手機桌面系統的圖標是一個簡單但可能需要一些學習的過程。無論你是通過代碼還是通過應用進行修改，都需要注意圖標文件的格式和大小，以及選擇一個合適的啟動器應用來幫助你完成這一任務。
② Android中icon和logo的區別
Android中icon和logo的區別
icon指一個圖示，通常是一類檔案型別的圖示 logo指一個徽標，通常是一個組織或一個團隊或一個網站的標志
icon：圖示；圖符；聖像；肖像；
logo：（某公司或機構的）標識；標志；徽標
所有的圖示都叫icon，但不是所有的圖示都是logo，logo是一種有特定標識意義的圖示，比如說公司的標識，比如說產品的標識。
apple-touch-icon，shortcut icon和icon的區別
apple-touch-icon 可以了解到這是一個類似網站favicon的圖示檔案，用來在iphone和ipod上建立快捷鍵時使用。
這個檔案應當是png格式，57x57畫素大小，放在網站根目錄之下。
如果准備的檔案不是57x57的話，它會自己縮放的。
在頁面的head部分，用下面的格式表示。
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
�0�2
語句一:<link rel="shortcut icon " href="favicon.ico" />
語句二<link rel="icon" href="animated_favicon.gif" type=image/gif />
備注:語句一 Shortcut Icon 就是在網址列前面出現的Icon
問題:語句二 icon的作用是怎麼?和語句一有什麼區別 ?
指導
過去，為保證favicon出現，網站設計者和開發者採用了多種方法。很難明確地保證favicon可以在所有電腦上顯示，即使是用同一版本的一種瀏覽器。
下列程式碼另一個局限就是它把favicon關聯到了某個特定的HTML或XHTML文件上。為避免這一點，favicon.ico檔案應置於根目錄下。多數瀏覽器將自動檢測並使用它。
建議包含以下兩行HTML程式碼:
CO
DE:
然而，只有第一行是必須的，因為「shortcut icon」字串將被多數遵守標準的瀏覽器識別為列出可能的關鍵詞（「shortcut」將被忽略，而僅適用「icon」）；而Inter Explorer將會把它作為一個單獨的名稱（「shortcut icon」）。這樣做的結果是所有瀏覽器都可以理解此程式碼。只有當希望為新瀏覽器提供另一種備用影象（例如動畫GIF）時，才有必要新增第二行。
在HTML中，link元件必須在head元件里（在<head>和</head>之間)。
對於XHTML，link必須使用「 />」結束（或「></link>」），而不可以使用「>」結束。
href可以，但不必，指向/favicon.ico的位置。它可以指向任何URL。
影象通常可以使用任何被瀏覽器支援的影象格式。
.ico檔案格式通常可以被所有可以顯示favicon的瀏覽器讀取。
設定伺服器 ，以傳送正確的MIME標識：
ICO 檔案 image/vnd.microsoft.icon（或者亦可出於相容性原因使用image/x-icon。然而最好使用IANA注冊的MIME型別，因為多數主流瀏覽器現在支援它）
GIF 檔案 image/gif
PNG 檔案 image/png
使用適當的解析度和色深。
ICO：包括多種解析度（最常使用的是16×16和32×32，Mac OS X有時使用64×64和128×128）以及位深（位元每畫素）（多數使用4、8、24 bpp，即16、256和1600萬色）。
GIF: 使用16×16，256色。
PNG: 使用16×16，256色或24位。
注意： 當favicon.ico被置於文件根目錄時，將會被一些不處理link元件的瀏覽器找到，即使沒有您的站點上沒有指向它的連結。
標准化
Favicon功能最早由微軟創設，而微軟公司的Inter Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支援的link標簽不遵從World Wide Web Consortium（W3C，全球資訊網聯盟）的HTML建議[1]，因為：
rel屬性必須包含一個用空格作分隔符的link型別的列表，所以一個包含兩詞的link型別不能被遵守標準的瀏覽器理解。
「.ico」檔案型別（一種用於Microsoft Windows上圖示的光柵格式）沒有一個注冊的MIME型別，而且似乎在當時也不能被多數瀏覽器理解。然而2003年，這一格式在IANA獲得注冊，其 MIME型別是image/vnd.microsoft.icon，進而消除了此問題的第一部分。
在網站上使用保留地址（reserved location）與Architecture of the World Wide Web（網際網路的結構）矛盾，同時被認為是link squatting（連結劫持）或URI squatting（URI劫持）。
Mozilla瀏覽器通過一種遵從Web標準的方法添加了對favicon的支援。它採用rel="icon"並允許網路設計人員新增任何支援的影象格式 的favicon。例如<link rel="icon" type=image/png href="/path/image.png">。後來鑒於此功能將被用於所有新內容，多數瀏覽器都對此功能增加了支援。
icon和idol的區別？
icon
名詞 n.
1.畫像,雕像;塑像
2.【電腦】代表所指謂的影象
3.聖像
4.偶像
idol
1偶像
2.受崇拜之人(或物);紅人,寵兒
icon和button的區別
icon 英['aɪkɒn] 美[ˈaɪˌkɑn]
n. 偶像，崇拜物件;圖示，圖符;[宗]聖像;肖像
名詞復數:icons,icones
[例句]Clicking the icon launches gmail in its own window.
點選這個圖示可以在獨立的視窗開啟gmail。
button 英['bʌtn] 美[ˈbʌtn]
n. 按鈕，電鈕;鈕扣，扣子;扣狀物;[植]芽
vt. 用鈕扣扣緊;用鈕扣裝飾，釘鈕扣於;在…上裝鈕扣
vi. 扣住;裝有鈕扣;扣上鈕扣
[例句]Do we really need a search button any more?
我們真的還需要一個搜尋按鈕嗎？
android中this和that的區別
這個應該不限於是安卓中吧
應該就是語言上的區別。
this 是:這個
that 是:那個
關於shortcut icon和icon程式碼的區別介紹
<link rel="shortcut icon" href=":example./favicon.ico"type="image/vnd.microsoft.icon"> <link rel="icon"href=":example./favicon.ico" type=image/vnd.microsoft.icon>
建議包含上面兩行HTML程式碼，可以支援ico格式的圖示
然而，只有第一行是必須的，因為「shortcut icon」字串將被多數遵守標準的瀏覽器識別為列出可能的關鍵詞（「shortcut」將被忽略，而僅適用「icon」）；而Inter Explorer將會把它作為一個單獨的名稱（「shortcut icon」）。這樣做的結果是所有瀏覽器都可以理解此程式碼。只有當希望為新瀏覽器提供另一種備用影象（例如動畫GIF）時，才有必要新增第二行。
在HTML中，link元件必須在head元件里（在<head>和</head>之間)。
對於XHTML，link必須使用「 />」結束（或「></link>」），而不可以使用「>」結束。
href可以，但不必，指向/favicon.ico的位置。它可以指向任何URL。
影象通常可以使用任何被瀏覽器支援的影象格式。
.ico檔案格式通常可以被所有可以顯示favicon的瀏覽器讀取。
設定伺服器，以傳送正確的MIME標識：
ICO 檔案 image/vnd.microsoft.icon（或者亦可出於相容性原因使用image/x-icon。然而最好使用IANA注冊的MIME型別，因為多數主流瀏覽器現在支援它）
GIF 檔案 image/gif
PNG 檔案 image/png
使用適當的解析度和色深。
ICO：包括多種解析度（最常使用的是16×16和32×32，Mac OS X有時使用64×64和128×128）以及位深（位元每畫素）（多數使用4、8、24 bpp，即16、256和1600萬色）。
GIF: 使用16×16，256色。
PNG: 使用16×16，256色或24位。
注意：當favicon.ico被置於文件根目錄時，將會被一些不處理link元件的瀏覽器找到，即使沒有您的站點上沒有指向它的連結。
標准化
Favicon 功能最早由微軟創設，而微軟公司的Inter Explorer網頁瀏覽器會對每一個網站都請求favicon。微軟支援的link標簽不遵從World Wide Web Consortium（W3C，全球資訊網聯盟）的HTML建議[1]，因為：
rel屬性必須包含一個用空格作分隔符的link型別的列表，所以一個包含兩詞的link型別不能被遵守標準的瀏覽器理解。
「.ico」檔案型別（一種用於Microsoft Windows上圖示的光柵格式）沒有一個注冊的MIME型別，而且似乎在當時也不能被多數瀏覽器理解。然而2003年，這一格式在IANA獲得注冊，其 MIME型別是image/vnd.microsoft.icon，進而消除了此問題的第一部分。
在網站上使用保留地址（reserved location）與Architecture of the World Wide Web（網際網路的結構）矛盾，同時被認為是link squatting（連結劫持）或URI squatting（URI劫持）。
Mozilla 瀏覽器通過一種遵從Web標準的方法添加了對favicon的支援。它採用rel=」icon」並允許網路設計人員新增任何支援的影象格式的 favicon。例如<link rel=」icon」 type=」image/png」 href=」/path/image.png」>。後來鑒於此功能將被用於所有新內容，多數瀏覽器都對此功能增加了支援。
為了更好的應用於各個地方，最好使用標准化方式，經過測試除IE6瀏覽器只支援icon格式的圖示，新的瀏覽器對所有格式的瀏覽器都支援的不錯
③ Android 應用程序的圖標 (Icon) 應該設計成多大
應用程序圖標
（Icon）應當是一個
Alpha
通道透明的32位
PNG
圖片。由於安卓設備眾多，一個應用程序圖標需要設計幾種不同大小，如：
LDPI
(Low
Density
Screen，120
DPI)，其圖標大小為
36
x
36
px。
MDPI
(Medium
Density
Screen,
160
DPI)，其圖標大小為
48
x
48
px。
HDPI
(High
Density
Screen,
240
DPI)，其圖標大小為
72
x
72
px。
xhdpi
(Extra-high
density
screen,
320
DPI)，其圖標大小為
96
x
96
px。
建議在設計過程中，在四周空出幾個像素點使得設計的圖標與其他圖標在視覺上一致，例如，
96
x
96
px
圖標可以畫圖區域大小可以設為
88
x
88
px，
四周留出4個像素用於填充（無底色）。
72
x
72
px
圖標可以畫圖區域大小可以設為
68
x
68
px，
四周留出2個像素用於填充（無底色）。
48
x
48
px
圖標可以畫圖區域大小可以設為
46
x
46
px，
四周留出1個像素用於填充（無底色）。
36
x
36
px
圖標可以畫圖區域大小可以設為
34
x
34
px，
四周留出1個像素用於填充（無底色）。
④ android app 界面設計按什麼尺寸
android app 界面設計是按720*1280的，切圖上可以點9切圖做到所有手機的適配。
狀態欄、導航欄和主菜單欄，以720*1280的尺寸來設計，那麼狀態欄的高度應為50px，導航欄的高度96px，主菜單欄的高度96px，因為是開源的系統，這里的數值也只能作為參考。
Android為了區別於IOS，從4.0開始提出了一套HOLO的UI風格設計風格，鼓勵將底部的主菜單欄放到導航欄下面，從而避免點擊下方材料誤點虛擬按鍵，很多APP的新版中也採用了這一風格。
(4)androidicon大小擴展閱讀：
注意事項：
1、通常情況要定位一個Icon只需給出 上/下邊距，左/右邊距，標注圖標距離只需標到可點擊范圍外
通用型顏色、字體單獨標明一份，通用型模塊只需單獨標明一份，如導航欄。
2、手機可視區域通常為寬度固定，長度超出邊界可滑動，所以標注物體寬度時可按比例說明，如果要標注內容上下居中，左右居中，或等比可不標注。
3、當交付的是一張完整圖片時，不需做機型適配，只需給高清圖(1920*1080)即可，注意進行壓縮。
4、若圖標在不同頁面重復出現，且尺寸相差不大，直接給出最大一份切圖，並在圓形圖標明尺寸，程序會根據需求縮放。
5、當背景是純色時只需給出色值，Android使用16進制色值。
參考資料來源：網路-Android
參考資料來源：網路-界面設計
參考資料來源：網路-狀態欄
參考資料來源：網路-導航欄
參考資料來源：網路-開源系統
參考資料來源：網路-切圖
參考資料來源：網路-UI設計
⑤ app啟動圖標設計規范-技術干貨：ApplewatchAPP設計規范
androidapp界面設計規范(dpi,dp,px等)PPI(Pixelsperinch):每英寸所擁有的像素數,即像素密度。
DPI(dotsperinch):即每英寸上,所能印刷的網點數,一般稱為像素密度。ppi計算公式:ppi=屏幕對角線像素數/屏幕對角線英寸數,通過勾股定理計算屏幕對角線像素數。
ScreenSize(屏幕尺寸):手機屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對角線的長度。
DIP(deviceindependentpixel):即dip/dp,設備獨立像素。1px=1dp
density(由dpi決定)
Resolution(解析度):指手機屏幕垂直和水平方向上的像素個數。eg解析度480
800,指該設備垂直方向有800個像素點,水平方向有480個像素點。
px(Pixel像素):相同像素的ui,在不同解析度的設備上效果不同。在小解析度設備上會放大導致失真,大解析度上被縮小。
AndroidDesign里把主流設備的dpi歸成了四個檔次:
120dpi、160dpi、240dpi、320dpi
,具體見如下表格。
實際開發當中,我們經常需要對這幾個尺寸進行相互轉換(比如先在某個解析度下完成設計,然後縮放到其他尺寸微調後輸出),一般按照dpi之間的比例即2:1.5:1:0.75來給界面中的元素來進行尺寸定義。
也就是說如果以160dpi作為基準的話,只要尺寸的DP是4的公倍數,XHDPI下乘以2,HDPI下乘以1.5,LDPI下乘以0.75即可滿足所有尺寸下都是整數pixel。但假設以240dpi作為標准,那需要DP是3的公倍數,XHDPI下乘以1.333,MDPI下乘以0.666,LDPI下除以2。而以LDPI和XHDPI為基準就更復雜了。同時第一款Android設備(HTC的T-MobileG1)是屬於160dpi的。鑒於以上各種原因,
標准dpi=160
谷歌官方對dp的解釋如下:
,-independentway.
Thedensity-,"medium"densityscreen.Atruntime,,asnecessary,.:
px=dp*(dpi/160).
Forexample,ona240dpiscreen,1dpequals1.5physicalpixels.'sUI,.
簡單來說,以160dpi的設備為准,該設備上1dp=1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個像素)。在app開發時,最好用dp來做界面的布局,以保證適配不同屏幕密度的手機。
dp和px的換算公式:
我的理解,該公式表示px的數值等於dp的數值*(設備dpi/160)
注意,px、dp是單位,但density沒單位。
applyDimension的源碼如下,可參考:
android的尺寸眾多,建議使用解析度為
720x1280
的尺寸設計。這個尺寸720x1280中顯示完美,在1080x1920中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。
app啟動圖標為48*48dp,對應各dpi設備,圖像資源像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|48
48px|72
72px|94
96px|144px
144px|
操作欄圖標為32*32dp,對應各dpi設備,圖像資源像素如下:其中圖形區域尺寸是24*24dp,可參考平時ui切圖會有部分留白。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|32
32px|48
48px|64
64px|96px
96px|
通知欄圖標為24*24dp,對應各dpi設備,圖標像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|24
24px|36
36px|48
48px|72px
72px|
某些場景需要用到小圖標,大小應當是16*16dp,其中圖形區域尺寸12*12dp。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|16
16px|24
24px|32
32px|48px
48px|
APP界面標注及切圖注意事項一、App屏幕適配通用知識簡介
1.標注時注意事項
一般情況要定位一個Icon只需給出上/下邊距,左/右邊距
標注圖標距離只需標到可點擊范圍外
通用型顏色、字體單獨標明一份
通用型模塊只需單獨標明一份,如導航欄
手機可視區域一般為寬度固定,長度超出邊界可滑動,所以,標注物體寬度時可按比例說明
如果要標注內容上下居中,左右居中,或等比可不標注
當繪制的是一個列表時且每一條內容一樣時,只需標注一條,如果每條內容有少許不同時,只需標明差異____糠
當交付的是一張完整圖片時,不需做機型適配,只需給高清圖(1920*1080)即可,注意進行壓縮
當背景是純色時只需給出色值(iOS使用RGB色值,Android使用16進制色值)
圖標應給出可點擊區域
若圖標在不同頁面重復出現,且尺寸相差不大,直接給出最大一份切圖,並在圓形圖標明尺寸,程序會根據需求縮放
可點擊按鈕通常要給出兩種狀態:普通/點擊(選中)
按鈕如果只是矩形、圓角矩形、圓形、橢圓形,給出尺寸和色值,可程序設置
漸變效果可通過程序實現,只需給出起始和結束色值跟范圍
2.切圖命名規范
背景:bg_
按鈕:btn_xxx_
圖片:img_
標簽:tab_
圖標:icon_
照片:pht_
導航:nav_
圖示:tip_
菜單:menu_
側欄:sidebar_
二、iOS應用屏幕適配
1.iOS究竟要是適配多少種機型,以哪款機型解析度作為設計尺寸最好
2016-3
iOS只需兼容iPhone4,完美兼容iphone5以上機型
如果按矢量圖製作設計圖按1X尺寸作圖,後期放大成2X、3X;如果按傳統的px作圖應用最大尺寸(3X)作為畫布。
以3X作為畫布(1242*2208)難記且不能整除,我們可直接以1280(640*2)作為寬度,完美縮放為1X、2X;
2X->3X以1.5來算尺寸和字型大小可得到較好效果
2.界面尺寸
設備解析度狀態欄高度導航欄高度標簽欄高度
iPhone6plus1242*2208px60px132px146px
iPhone6750*1334px40px88px98px
iPhone5/5s/5c640*1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024*768px20px44px49px
iPadmini1024*768px20px44px49px
導航欄背景圖中,如果考慮狀態欄背景,則背景圖尺寸為導航欄px+狀態欄px,如果只改變導航欄顏色則只需要導航欄px
3.圖標尺寸
設備AppStore程序應用主屏幕spotlight搜索標簽欄工具欄和導航欄
iPhone6plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPadmini1024*1024px90*90px72*72px50*50px25*25px22*22px
按鈕切圖建議以等寬高尺寸切圖,且像素必須>=88、*88px,當本身圖片寬度或高度不足時,補充空白像素(透明像素).一般情況下,只需要普通狀態下按鈕切圖即可
(適配不建議等比放大)
4.參考文獻
友盟設備指數
APP切圖流程和APP切圖命名規范詳細完整版
APP切圖詳細規范終極指南
iOS和Android的app界面設計規范
APP界面切圖命名和文件整理規范
三、Android應用屏幕適配
1.用px作為基礎單位的缺陷
對比上圖可以知道,ppi越低圖片顯示的越大,ppi越高圖片顯示的越小,造成不同手機上顯示圖片布局不統一!
使用dp作為單位所有機子顯示統一
2.衡量一個屏幕清晰度單位————屏幕密度(dpi==ppi)
計算公式:屏幕dpi=√(屏幕長^2+屏幕寬^2)/屏幕尺寸
名稱密度代表解析度Android單位與像素換算
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
xhdpi240dpi~320dpi720*12801dp=2px
xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
屏幕大小啟動圖標操作欄圖標上下文圖標系統通知圖標(白色)最細筆畫
320*480px48*48px32*32px16*16px24*24px不小於2px
480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小於3px
720*1280px96*96px64*64px32*32px48*48px不小於4px
1080*1920px144*144px96*96px48*48px72*72px不小於6px
3.究竟要適配多少種機型
2016-3
得出結論:只需適配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)
4.度量單位與邊框
可觸摸控制項都是以48dp為單位的
為什麼是48dp?一般情況下,48dp在設備上的物理大小是9mm(會有一些變化)。這剛好在觸摸控制項推薦的大小范圍(7-10mm)內,而且這樣的大小,用戶用手指觸摸起來也比較准確、容易。(xxhdpi標准下為144px)
邊框注意留白界面元素之間的留白應當是8dp。
例:
5.字體排版
Roboto是Android系統的默認字體集,字體大小單位sp(可縮放像素數,scaleablepixels)
根據Android設計規范,推薦使用12、14、16、20和34號,字體粗細可調
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(注意:字型大小要為雙數,且不可帶小數位)
6.9-patch圖製作
什麼是9-patch圖
為什麼要用9-patch格式製作圖
適應各種手機屏幕拉伸圖片需求,有效縮減圖片體積
什麼情況下使用
當發現圖片是背景時且可能拉伸被拉伸時,或圖片過大時
如何製作patch9圖
圖片外層增加一全透明像素,在透明像素區花4條純黑色邊
1.寬度可拉伸區域
2.高度可拉伸區域
3.垂直內容區域
4.水平內容區域
8.參考文獻
友盟設備指數
Android設計指南簡體中文版4.x
MaterialDesign中文版
Android設計中的.9.png
技術干貨：ApplewatchAPP設計規范一、規范概要
1.導航形式
層級式,通過當前頁面點擊跳轉到另外頁面的形式。適合應用於復雜產品,需要層層遞進。
頁面式,頁面切換,滑動,類似輪播
AppleWatch導航形式任選其一,不得同時存在。
2.交互方式
輕觸:列表、按鈕、切換等控制項的操作
手勢:縱向輕掃,界面滾動;橫向輕掃,界面導航之間的查看;從屏幕左側邊緣向右輕掃,返回父級界面。
壓力觸控:喚出當前頁面情景菜單
實體控制項(手錶旋鈕):長頁面瀏覽,避免手指長時間輕掃界面何遮擋界面
3.色彩
使用黑色作為APP的背景色,或者深色且高斯模糊的圖片作為背景
高對比度的顏色使用於文字、圖標、界面
4文字
SF和蘋方
5.圖標
通知圖標、首屏圖標和長看圖標、短看圖標
情景圖標(App內功能圖標)
6.布局
並排放置的圖標一行不要超過三個
布局優先採用左對齊
二、設計尺寸
1.1屏幕尺寸
38mm(272*340px)
42mm(312*390px)
1.2圖標尺寸
通知圖標48PX(38mm)55px(42mm)
首屏圖標和常看圖標80px(38mm)88px(42mm)
短看圖標172px(38mm)196px(42mm)
菜單情景圖標(App內的功能圖標)
圖標大小70px,實際圖標大小46px。(38mm)
圖標大小80px,實際圖標大小54px。(42mm)
圖標線寬不得小於4px
1.3圖標
1.3.1
通知圖標,系統通知彈出的圖標
1.3.2
首屏圖標,如下圖所示。首屏圖標80px(38mm)88px(42mm)
1.3.3長看圖標,如下所示,左上角圖標。常看圖標80px(38mm)88px(42mm)
1.3.4短看圖標,如下圖所示。短看圖標172px(38mm)196px(42mm)
2.字體和文字
2.1字體
SF和蘋方
2.2文字(字型大小,常見字型大小單位是PT和PX,PT是開發單位,PX是設計單位,在@2X下換算關系1PT=2PX)
標題headline18PT
正文標題caption15PT
正文body15PT
備注、腳注、輔助文字footnote12PT、13PT
3.顏色
高對比度的顏色使用於文字、圖標、界面
1.主色,如下圖所示
2.輔助色、點睛色(控制項、按鈕)
按鈕控制項在設計中通常帶有透明度
3.字體顏色和透明度
4.布局
1狀態欄和下方圖片和列表布局間距
38mm(30px),42mm(32px)
2狀態欄和列表按鈕布局間距
38mm(11px),42mm(13px)
3狀態欄和下方文本布局間距
38mm(46px),42mm(50px)
4文字邊距和分割線按鈕列表圖片邊距
38mm和42mm邊距相同
5.圖片和按鈕到屏幕兩邊距離
38mm和42mm邊距相同
5.控制項和列表
1單行控制項和列表布局尺寸
38mm
42mm
2.雙行控制項和列表布局尺寸
2.1正文+備注
38mm
42mm
2.2雙行正文
38mm
42mm
3.三行控制項和列表布局尺寸
38mm
42mm
4.多行控制項和列表布局尺寸
38mm
42mm
5.控制項和列表類型
_