iPhone設(shè)計(jì)規(guī)范
iPhone歷史
談到iPhone岖沛，人們首先想到的是史蒂夫·喬布斯（Steve Jobs）。盡管喬布斯已經(jīng)去世仍侥，但是他的理念仍然是現(xiàn)代智能手機(jī)設(shè)計(jì)的原則洲赵。喬布斯不僅重新定義了智能手機(jī)，還定義了移動(dòng)端應(yīng)用程序鸦做。
喬布斯在自家車庫(kù)里創(chuàng)立了蘋(píng)果公司励烦，自此“車庫(kù)”也成了創(chuàng)業(yè)者最愛(ài)的地標(biāo)谓着。蘋(píng)果公司的第一代電腦內(nèi)置了非常出色的用戶圖形界面系統(tǒng)（GUI）并且內(nèi)置了Helvetica等漂亮的字體。
后來(lái)坛掠，在經(jīng)歷了蘋(píng)果公司的權(quán)利斗爭(zhēng)后赊锚，成熟的喬布斯再次登上發(fā)布會(huì)的舞臺(tái)，推出真正能改變世界的產(chǎn)品——iPhone屉栓。喬布斯強(qiáng)調(diào)用戶界面和交互設(shè)計(jì)的重要性舷蒲，這種理念改變了當(dāng)時(shí)的設(shè)計(jì)思維，并影響至今友多。
iPhone歷程
相關(guān)產(chǎn)品：iPhone（初代）牲平、iPhone 3G（二代）、iPhone 3GS（三代）域滥、iPhone 4（四代）纵柿、iPhone 4s（五代）、iPhone 5（六代）启绰、iPhone 5s和iPhone 5C（七代）昂儒、iPhone 6和iPhone 6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）委可、iPhone 7和iPhone 7 Plus（十代）渊跋、iPhone 8和iPhone 8 Plus（十一代）、iPhone X（十一代）、iPhone XS/iPhone XS Max拾酝、iPhone XR（十二代）
邏輯像素和物理像素
邏輯像素（Logic Point）：邏輯像素的單位是pt燕少，它是按照內(nèi)容的尺寸計(jì)算的單位。
iPhone 4的邏輯像素是480pt*320pt微宝。但是由于每個(gè)邏輯的點(diǎn)因?yàn)橐暰W(wǎng)膜屏密度增加了一倍棺亭，即1pt=2px，所以iPhone4的物理像素是960px*640px
物理像素：物理像素單位是pixel蟋软，簡(jiǎn)寫(xiě)為px镶摘。它是按照像素格計(jì)算的單位，屏幕設(shè)計(jì)中最小的單位是px岳守。
ppi（Pixel Per Inch）：屏幕分辨率的單位凄敢，表示每英寸顯示的像素密度。屏幕的ppi值越高湿痢，這個(gè)屏幕每英寸能容納的像素顆粒就越多涝缝，那這個(gè)產(chǎn)品的畫(huà)面的細(xì)節(jié)也就越豐富。
當(dāng)ppi值大于300時(shí)譬重，人類無(wú)法用肉眼察覺(jué)出屏幕上的“馬賽克”格子拒逮。但是如果屏幕很大，那么呈現(xiàn)視網(wǎng)膜屏的ppi值也需要更大臀规。
UI設(shè)計(jì)師更適合選擇按照iPhone 6/7/8作為基準(zhǔn)進(jìn)行界面設(shè)計(jì)滩援。
HIG設(shè)計(jì)指南
各個(gè)組件專有名詞以及對(duì)應(yīng)尺寸：
狀態(tài)欄（Status Bars）最上方，顯示時(shí)間塔嬉、運(yùn)營(yíng)商信息玩徊、電池電量的區(qū)域。
（iPhone6/7/8狀態(tài)欄高度=20pt（40px）谨究、iPhone X狀態(tài)欄高度=44pt（132px））
導(dǎo)航欄（Mavigation Bars）狀態(tài)欄之下恩袱，一般來(lái)說(shuō)導(dǎo)航欄中間是頁(yè)面標(biāo)題，左右是放置功能圖標(biāo)的區(qū)域胶哲。
（iPhone6/7/8導(dǎo)航欄高度=44pt（88px）畔塔、iPhone X狀態(tài)欄高度=44pt（132px））
注意：iPhone X的ppi值為458，與iPhone6/7/8的換算方式不同鸯屿。
大標(biāo)題導(dǎo)航欄：高度一般是116pt（232px）澈吨，這包括20pt（40px）狀態(tài)欄的高度，同時(shí)能放下34pt（68px）的大標(biāo)題和輔助信息（如返回等圖標(biāo)）碾盟。
注意：大標(biāo)題不應(yīng)該像傳統(tǒng)的導(dǎo)航一樣常駐在頁(yè)面之上棚辽，因?yàn)樗加玫目臻g太大。iPhone X數(shù)值需要另外換算冰肴。
標(biāo)簽欄（Tab Bars）指的是App底部的區(qū)域屈藐。iOS規(guī)范中Tab欄一般有五個(gè)榔组、四個(gè)、三個(gè)圖標(biāo)形式联逻，也就是把寬度等分為五份搓扯、四份、三份包归。
（iPhone6/7/8標(biāo)簽欄高度=49pt（98px）
注意：通常UI設(shè)計(jì)師會(huì)在Tab欄圖標(biāo)之下加上10pt（20px）的注釋文字锨推，這個(gè)注釋文字一般來(lái)說(shuō)是非常淺的淺灰色。
工具欄（Tool Bars）在蘋(píng)果自帶瀏覽器的底部公壤。工具欄同Tab欄一樣都是位于瀏覽器的底部换可，但是高度略窄，其高度是44pt（88px）厦幅。
閃屏：一張完整的靜態(tài)滿屏的圖片沾鳄，用于App啟動(dòng)加載的頁(yè)面。UI設(shè)計(jì)師只需要按照正常的iOS移動(dòng)端尺寸進(jìn)行設(shè)計(jì)就行确憨。
安全距離：即與手機(jī)邊緣留出的邊距（Margin）译荞。雖然這個(gè)邊距沒(méi)有明確嚴(yán)格的規(guī)定，但是一般的App會(huì)留出16pt~24pt的邊距休弃，防止用戶在屏幕邊緣不易選擇吞歼。
色彩：只要符合產(chǎn)品氣質(zhì)并且從色彩心理學(xué)理論角度思考，用什么顏色是設(shè)計(jì)師的自由塔猾。
字體：iOS英文使用的是San Francisco（SF）字體篙骡，中文是蘋(píng)方黑體。
蘋(píng)果認(rèn)為App的字體信息層級(jí)可分為 大標(biāo)題（Large Title）桥帆、標(biāo)題一（Title 1）医增、標(biāo)題二（Title 2）慎皱、標(biāo)題三（Title 3）老虫、頭條（Headline）、正文（Body）茫多、標(biāo)注（Callout）祈匙、副標(biāo)題（Subhead）、注解（Footnote）天揖、注釋一（Caption 1）夺欲、注釋二（Caption 2）等幾種。
啟動(dòng)圖標(biāo)今膊，在蘋(píng)果提供的資源中些阅，有Template-AppIcons-iOS這個(gè)文件。只需要專注設(shè)計(jì)啟動(dòng)圖標(biāo)斑唬，用啟動(dòng)圖標(biāo)替換智能對(duì)象里的內(nèi)容就會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了設(shè)計(jì)的圖標(biāo)市埋。
控件：包括輸入框黎泣、按鈕、滑桿缤谎、頁(yè)卡抒倚、開(kāi)關(guān)等。
注意：設(shè)計(jì)師要想自己設(shè)計(jì)控件坷澡，一定要注意兩件事情
1托呕、選擇區(qū)域基本符合44pt（88px）原則
2、設(shè)計(jì)操作的不同狀態(tài)
鍵盤(pán)：在設(shè)計(jì)時(shí)频敛，考慮到鍵盤(pán)展開(kāi)時(shí)的效果项郊，有兩種情況：
1、一些界面中的輸入框和信息可能往上移動(dòng)斟赚；
2呆抑、當(dāng)輸入一個(gè)表單時(shí)，頁(yè)面會(huì)垂直定位到輸入位置汁展。
iTunes上傳截圖：這里需要提供1242px*2688px和1125px*2436px的兩套截圖鹊碍。
工作流程
1、前期調(diào)研階段
2食绿、原型圖階段
3侈咕、視覺(jué)稿階段（iPhone 6/7/8尺寸下，實(shí)時(shí)預(yù)覽設(shè)計(jì)稿）
4器紧、視覺(jué)規(guī)范（主色/輔色/色彩規(guī)范耀销、文字顏色/大小規(guī)范、ICON規(guī)范铲汪、應(yīng)用圖標(biāo)規(guī)范熊尉、按鈕和交互態(tài)規(guī)范、間距規(guī)范）
5掌腰、切圖（Adobe XD狰住、藍(lán)湖、Cutterman）齿梁、命名規(guī)范（可以按照“功能_類型_名稱_狀態(tài)@倍數(shù)”的格式命名）
6催植、標(biāo)注（藍(lán)湖、px像素大廚勺择、Markman）
7创南、iOS開(kāi)發(fā)（Objective-C、Swift省核、UIkit框架）稿辙、
8、項(xiàng)目走查（判斷視覺(jué)還原程度气忠、懂i笑傲邻储、選擇狀態(tài)等動(dòng)態(tài)效果是否符合預(yù)期）
動(dòng)效
目前iOS主流的動(dòng)效實(shí)現(xiàn)方式有四種未桥。
1、設(shè)計(jì)師提供開(kāi)發(fā)動(dòng)效視頻或GIF
2芥备、可以使用序列幀的方式實(shí)現(xiàn)動(dòng)畫(huà)
3冬耿、給程序猿AVI等視頻文件直接插入視頻
4、使用Airbnb開(kāi)源的Lottie
Material Design
安卓是什么萌壳？
安卓是基于Linux的開(kāi)放源代碼的操作系統(tǒng)亦镶。它是安迪·魯賓（Andy Rubin）創(chuàng)立的。最后被Google收購(gòu)袱瓮，安卓的發(fā)展更加順利缤骨。安卓是一套與Windows類似的操作系統(tǒng)。
安卓是一套性能非常好的底層框架尺借，但是用戶體驗(yàn)和設(shè)計(jì)上都是白紙绊起，因此很多開(kāi)發(fā)商基于安卓系統(tǒng)的底層系統(tǒng)開(kāi)發(fā)了交互良好、視覺(jué)設(shè)計(jì)更加的表現(xiàn)部分燎斩，這種開(kāi)發(fā)稱為安卓ROM開(kāi)發(fā)虱歪。
小米通過(guò)優(yōu)化安卓底層框架，加上自身研發(fā)的栅表、用戶體驗(yàn)良好的交互和視覺(jué)笋鄙，完成了MIUI——一款基于安卓的手機(jī)操作系統(tǒng)包。
自此怪瓶，幾乎每一個(gè)國(guó)內(nèi)手機(jī)品牌都有一套自身的ROM系統(tǒng)萧落。小米MIUI、魅族Flyme洗贰、錘子Smartisan找岖、聯(lián)想有聯(lián)想樂(lè)OS、華為有華為ROM等敛滋。
安卓的尺寸
由于安卓的市場(chǎng)發(fā)展比較亂许布，沒(méi)有像蘋(píng)果一樣嚴(yán)格的硬件生產(chǎn)規(guī)范，因此屏幕尺寸一場(chǎng)混亂矛缨。其中使用率最高的是720P和1080P爹脾。
dp單位：獨(dú)立密度像素的簡(jiǎn)稱（Density-independent Pixels）帖旨，是安卓設(shè)備上的基本單位箕昭，如同蘋(píng)果設(shè)備上的pt一樣。已知一個(gè)設(shè)備的ppi值解阅，dp與px之間的換算關(guān)系是：
dp×ppi/160=px
sp單位：獨(dú)立縮放像素的簡(jiǎn)稱（Scale-independent Pixels）落竹，是安卓設(shè)備上文字的單位。默認(rèn)情況下1sp=1dp货抄。
三大金剛鍵：底部有返回鍵述召、Home鍵朱转、任務(wù)列表鍵。這三個(gè)金剛鍵是安卓交互的一部分积暖，安卓平臺(tái)上的應(yīng)用程序交互基于三大金剛鍵藤为。
但是由于很多用戶喜歡iPhone的單獨(dú)Home鍵設(shè)計(jì)，因此很多廠商輝仔啊硬件上一隱藏三大金剛鍵或像iPhone一樣保留Home鍵夺刑。
切圖：UI設(shè)計(jì)師需要切出五套不同分辨率的切圖缅疟，那么不同的分辨率應(yīng)該按照drawable-mdpi、drawable-hdpi遍愿、drawable-xdpi存淫、drawable-xxdpi、drawable-xxxdpi的文件夾存放各套切圖沼填。
.9切圖：這種圖片可以表明哪些部分可以被拉伸桅咆，哪些部分不能拉伸。
設(shè)計(jì)師要做的就是用ps中的鉛筆工具1px大小坞笙，透明度為100%岩饼，顏色#00-0純黑色，然后在切圖邊緣畫(huà)出1px的橫豎線薛夜，再把這張圖命名后綴加上.9忌愚，這樣就搭好了“暗號(hào)”。
什么是Material Design却邓？
安卓陣營(yíng)產(chǎn)品的設(shè)計(jì)規(guī)范和風(fēng)格硕糊。目標(biāo)是創(chuàng)建一種優(yōu)秀的設(shè)計(jì)原則和科學(xué)技術(shù)融合的可能性，并給不同的平臺(tái)帶來(lái)一致性的體驗(yàn)腊徙，同時(shí)可以在規(guī)范的基礎(chǔ)上突出設(shè)計(jì)者自己的品牌性简十。
Material Design并不是完全的抽象扁平風(fēng)格，它是從物理現(xiàn)實(shí)中學(xué)習(xí)了如質(zhì)感撬腾、投影螟蝙、加速度、紙張的模擬等隱喻方法民傻。這些都會(huì)讓MD更加被用戶理解胰默。
設(shè)計(jì)理念
Z軸的概念：手機(jī)界面是一個(gè)平面二維的空間，而MD通過(guò)二維的一些表達(dá)手段漓踢，如投影牵署、動(dòng)效等構(gòu)建出Z軸的概念。
組件
懸浮球FAB（Buttons：Floating Action Button）
FAB尺寸：默認(rèn)尺寸（56dp*56dp)和mini尺寸（40dp*40dp）喧半。
可交互的FAB：可以具有一個(gè)跳轉(zhuǎn)走的功能奴迅，他也可以是一個(gè)展開(kāi)的子菜單。
擴(kuò)展性的FAB：帶文字異性并且不隨屏幕滾動(dòng)的按鈕屬于擴(kuò)展性的FAB挺据。
底部應(yīng)用欄（App Bars：Bottom）
底部應(yīng)用欄顯示屏幕底部的導(dǎo)航和按鍵操作取具。底部應(yīng)用欄是由容器脖隶、導(dǎo)航欄抽屜控制、浮動(dòng)懸浮按鈕暇检、動(dòng)作圖標(biāo)产阱、更多菜單空間幾部分組成。
頂部應(yīng)用欄（App Bars：Top）
頂部應(yīng)用欄中的標(biāo)題像報(bào)紙一樣居左块仆。這是因?yàn)镸D認(rèn)為閱讀應(yīng)該如報(bào)紙一樣按照從左往右的順序排列心墅，并且圖標(biāo)左側(cè)最多可以放置一個(gè)系統(tǒng)圖標(biāo)，右側(cè)可以放置多個(gè)系統(tǒng)圖標(biāo)榨乎。
頂部應(yīng)用欄由頂部欄容器怎燥、抽屜式導(dǎo)航圖標(biāo)、標(biāo)題蜜暑、系統(tǒng)圖標(biāo)铐姚、更多按鈕組成。
背板設(shè)計(jì)
在引發(fā)的某個(gè)操作中肛捍，可設(shè)計(jì)背板承載某些選項(xiàng)和輔助信息隐绵。背板的設(shè)計(jì)與iOS中的Action Sheet類似，但又可以更加個(gè)性化拙毫。
背板設(shè)計(jì)的輔助控件主要包括一下幾個(gè)點(diǎn)
1依许、背板設(shè)計(jì)隱藏時(shí)，后層控件可以提供有關(guān)前層的輔助信息
2缀蹄、背板設(shè)計(jì)激活時(shí)峭跳，后層會(huì)顯示與前層相關(guān)的控件。
這樣可變的設(shè)計(jì)可以讓用戶更加方便的找到需要的功能缺前。
橫幅：頂部欄下面的第一個(gè)凸顯區(qū)域蛀醉，顯示突出的消息和相關(guān)的可選操作，它可以是一個(gè)對(duì)話衅码，也可以是一個(gè)提示或者包含圖形的設(shè)計(jì)拯刁。
底部導(dǎo)航（Bottom Navigation）：與iOS一致。
按鈕（Buttons）：純文字按鈕逝段、線性按鈕垛玻、切換按鈕、填充按鈕
純文字按鈕：只有加粗帶色彩的文字奶躯，可以理解為可選擇鏈接
線性按鈕：用一個(gè)線框說(shuō)明選擇區(qū)域帚桩，比較不顯眼
填充按鈕：明顯
切換按鈕：使用率低于其他按鈕
卡片式設(shè)計(jì)
MD的顯著標(biāo)志∥撞冢卡片設(shè)計(jì)如同一個(gè)小的單元朗儒，在這個(gè)單元里的信息邏輯關(guān)系更加緊密。
如果一個(gè)單元的信息過(guò)多参淹，很容易在用戶閱讀時(shí)發(fā)生串行的現(xiàn)象醉锄，卡片式設(shè)計(jì)能夠有效地規(guī)避這個(gè)問(wèn)題。
紙片設(shè)計(jì)
紙片設(shè)計(jì)是輸入框中多個(gè)元素的組合浙值，紙片有選中態(tài)和交互態(tài)等豐富的交互恳不。
例如：郵件添加人的操作就是一個(gè)輸入框內(nèi)添加一個(gè)紙片的操作，這樣的紙片可以承載頭像和文字雙重信息开呐。
對(duì)話框（Dialogs）
可以分為模態(tài)對(duì)話框和非模態(tài)對(duì)話框烟勋。
模態(tài)對(duì)話框需要和人交互；
非模態(tài)對(duì)話框更多的是顯示提示信息筐付。
分割線（Deviders）
分割線分為全出血分割線和插入式分割線/居中分割線和標(biāo)題分割線卵惦。
全出血分割線給人的感受是信息完全獨(dú)立；
插入式分割線更方便用戶閱讀并準(zhǔn)確找到當(dāng)前閱讀的位置瓦戚；
居中分割線如果閱讀曲線是沿中心進(jìn)行的沮尿，同屬一類的附屬元素；
標(biāo)題分割線用小號(hào)標(biāo)題的當(dāng)作分割線较解。
抽屜式導(dǎo)航（Navigation Drawer）
蘋(píng)果不建議使用抽屜式導(dǎo)航畜疾，因?yàn)榕c Tab欄相比，Tab欄的用戶觸發(fā)率更高印衔，而抽屜式導(dǎo)航需要選擇兩次才能觸發(fā)某個(gè)功能啡捶，層級(jí)較深。
頁(yè)卡（Tabs）
頁(yè)卡常見(jiàn)于頂部應(yīng)用欄奸焙，作為應(yīng)用欄的一部分粗壯乃瞎暑。一般由2~3個(gè)頁(yè)卡組成。當(dāng)用戶選擇其中一個(gè)頁(yè)卡時(shí)与帆，應(yīng)用欄下方跳轉(zhuǎn)對(duì)應(yīng)的內(nèi)容金顿。
文本輸入框（Text Fields）
用戶需要輸入文本信息時(shí)使用文字輸入框，文本輸入框樣式MD提供的由填充性輸入框和線框輸入框鲤桥。
圖片組（Image Lists）
四種形式
正常圖片組：每張圖片大小一樣揍拆，間距統(tǒng)一并且通常會(huì)窄一些，給人秩序感和統(tǒng)一感茶凳。
排版圖片組：圖片按照柵格分割嫂拴，最大尺寸的圖片等于四個(gè)小圖片拼起的高、寬贮喧，寬尺寸的圖片的寬度等于兩個(gè)小圖片的寬度相加筒狠。
照片墻圖片組：結(jié)構(gòu)比較松散，適合圖像尺寸不均等的內(nèi)容展示箱沦，效果如同家居中的照片墻辩恼。
瀑布流圖片組：花瓣的瀑布流，圖片寬度全部相等，由于高度不等會(huì)展現(xiàn)出如同瀑布一樣的形式灶伊。
滑塊（Sliders）? ? ??
設(shè)計(jì)師在設(shè)計(jì)某個(gè)音樂(lè)類的App或者視頻App時(shí)疆前，音量或者其他設(shè)置都需要一個(gè)滑塊，從而方便用戶進(jìn)行調(diào)節(jié)聘萨。調(diào)節(jié)功能就可以使用滑塊進(jìn)行隱喻竹椒。
選擇器（Selection Control）
單選框/復(fù)選框
底部提示欄（Snackbars）
一個(gè)對(duì)用戶不過(guò)多干擾，并且信息不必確認(rèn)操作的信息提示工具欄米辐。
狀態(tài)指示（Progress Indicators）
某些進(jìn)程加載內(nèi)容時(shí)胸完，需要讓用戶感知到這個(gè)狀態(tài)，即進(jìn)度條翘贮。
色彩
在配色的時(shí)候需要注意三個(gè)原則：
分級(jí)：設(shè)計(jì)師可以用不同的顏色告訴用戶哪些時(shí)可以交互的赊窥，哪些是裝飾，并且色彩與信息的邏輯關(guān)系應(yīng)該是相關(guān)的狸页，重要的元素應(yīng)該使用最突出的顏色锨能；
清晰：文本和背景一定要有色彩反差，也就是”白紙黑字“肴捉、”黑紙白字“腹侣；
品牌：一個(gè)產(chǎn)品的品牌與調(diào)性體現(xiàn)出移動(dòng)端應(yīng)用程序上就是主色調(diào)，如網(wǎng)易紅齿穗、QQ音樂(lè)綠傲隶，能讓人時(shí)刻明白自己使用的是什么產(chǎn)品。
文字
Material Design在安卓上的字體窃页，中文使用的是思源字體跺株，英文用的Roboto。其他Google的免費(fèi)字體也全部可以子啊安卓的MD中使用脖卖。
字體單位sp
產(chǎn)品圖標(biāo)
產(chǎn)品圖標(biāo)是設(shè)計(jì)師在設(shè)計(jì)界面時(shí)體現(xiàn)品牌和功能性的圖標(biāo)乒省。圖標(biāo)以簡(jiǎn)單、大膽畦木、友好的方式傳達(dá)產(chǎn)品的核心理念和意圖袖扛。
網(wǎng)格
盡量使用4的倍數(shù)構(gòu)建。網(wǎng)格對(duì)設(shè)計(jì)師設(shè)計(jì)圖標(biāo)有很好的參考作用十籍，有利于其發(fā)i西安橫縱方向上沒(méi)有對(duì)齊的細(xì)節(jié)蛆封。而參考線是有黃金比例和不同形狀但面積相等的幾何圖形模板組合而來(lái)的，同樣具有很好的參考意義勾栗。
圖標(biāo)處理
注意：顏色本身沒(méi)有z軸惨篱，不要因?yàn)轭伾年P(guān)系增加多余的陰影；
重疊的表面層數(shù)要注意围俘，太多的圖層可能使圖標(biāo)過(guò)于復(fù)雜砸讳；
不要在圖標(biāo)上使用過(guò)多的層級(jí)和分割琢融；
手風(fēng)琴是指圖標(biāo)扁平陰影的處理，不要食用過(guò)多的手風(fēng)琴層次簿寂，避免臃腫漾抬；
不要用奇怪的透視扭曲產(chǎn)品圖標(biāo)。
系統(tǒng)圖標(biāo)
系統(tǒng)圖標(biāo)是設(shè)計(jì)師在構(gòu)件界面時(shí)負(fù)責(zé)表意功能和信息的圖標(biāo)陶耍，系統(tǒng)圖標(biāo)設(shè)計(jì)應(yīng)簡(jiǎn)單奋蔚、現(xiàn)代她混、友好烈钞，每個(gè)圖標(biāo)都應(yīng)盡可能簡(jiǎn)化以表達(dá)最基本的特征。
圖標(biāo)分類
MD把圖標(biāo)分為填充圖標(biāo)坤按、線性圖標(biāo)毯欣、圓角圖標(biāo)、雙調(diào)圖標(biāo)臭脓、尖角圖標(biāo)酗钞。系統(tǒng)圖標(biāo)可以適應(yīng)任何產(chǎn)品的風(fēng)格。
形狀
MD過(guò)去版本中對(duì)形狀規(guī)定較為死板来累，最新的MD在形狀上非常自由砚作。菱形、半圓形嘹锁、圓角都可以使用，這些充滿個(gè)性的形狀可以幫助設(shè)計(jì)師構(gòu)建更酷的界面。
交互
空狀態(tài)（Empty States）
空狀態(tài)應(yīng)該與品牌保持一致茫负，可以使用幽默和可愛(ài)的情感化設(shè)計(jì)同用戶產(chǎn)生親和感陷嘴，，但是不應(yīng)該體現(xiàn)可操作性摔竿，不用使用口號(hào)和可選擇是的暗號(hào)面粮。
警告對(duì)話框（Alert Dialog）
警告對(duì)話框可以讓用戶預(yù)知下一步會(huì)發(fā)生什么，并提供選擇來(lái)取消這個(gè)行為继低。
閃屏（Launch Screens）
圖像（Images）
在設(shè)計(jì)師設(shè)計(jì)的App中一個(gè)圖像可能會(huì)被切成很多個(gè)尺寸熬苍，如1：1、3：4袁翁、16：9等柴底，甚至是圓形或正方形，這時(shí)候需要保證圖像的核心區(qū)域在任何尺寸中都能顯示梦裂。
新手引導(dǎo)（Onboarding）
MD建議產(chǎn)品設(shè)計(jì)新手引導(dǎo)頁(yè)似枕，一次幫助用戶了解該程序是如何操作的，以及有什么樣的功能年柠。
離線功能（Offline States）
有些功能會(huì)因?yàn)闊o(wú)網(wǎng)絡(luò)而完全不能使用凿歼，這時(shí)同樣需要設(shè)計(jì)師設(shè)計(jì)一些狀態(tài)用于表現(xiàn)現(xiàn)在是無(wú)網(wǎng)絡(luò)的褪迟。讓用戶感知這個(gè)狀態(tài)。
主題編輯器
