本文轉(zhuǎn)載自簡(jiǎn)書，作者：Bystander7原文鏈接：

https://www.jianshu.com/p/507f0fcb0457

…

UI全書(下)《UI設(shè)計(jì)師進(jìn)階完全指南》讀后梳理：iPhone設(shè)計(jì)規(guī)范和Material Design兩章節(jié)內(nèi)容

時(shí)間：2019-07-07

作者：郗鑒

出版社：中國(guó)工信出版集團(tuán)?電子工業(yè)出版社

配圖全部來(lái)源：郗鑒

原文鏈接：

https://www.zcool.com.cn/article/ZNzkxMzgw.html

https://www.zcool.com.cn/article/ZODA0NDIw.html

七、iPhone設(shè)計(jì)規(guī)范

1、型號(hào)尺寸

邏輯像素：單位PT、按照內(nèi)容尺寸計(jì)算。

物理像素：單位PX、屏幕設(shè)計(jì)中最小單位。

ppi：屏幕分辨率的單位、每英寸顯示的像素密度。

iPhone手機(jī)型號(hào)與像素對(duì)應(yīng)表：

2、HIG設(shè)計(jì)指南

iOS Human Interface Guidelines，是蘋果公司針對(duì)iOS設(shè)計(jì)的一套人機(jī)交互指南，目的是為了使運(yùn)行在iOS上的應(yīng)用都能遵從一套特定的視覺以及交互特性，從而能夠在風(fēng)格上進(jìn)行統(tǒng)一。

設(shè)計(jì)規(guī)范：

狀態(tài)欄高度：6/7/8: 20pt ；X : 44pt。

導(dǎo)航欄高度：44pt；大標(biāo)題導(dǎo)航116pt=狀態(tài)欄20pt+標(biāo)題文字34pt；滑動(dòng)后變?yōu)檎８叨?#xff1a;20pt+44pt。

導(dǎo)航欄圖標(biāo)：建議24*24pt；最大28*28pt。

標(biāo)簽欄高度：6/7/8: 49pt ；X : 49pt+34pt底部導(dǎo)航條，文字10pt，圖標(biāo)30pt左右，數(shù)量3-5個(gè)不等。

工具欄高度 44pt。

閃屏 ：不同型號(hào)不同尺寸。

頁(yè)面左右安全距離：16-24。

色彩：官網(wǎng)有建議的系統(tǒng)色彩。

字體：英文 San Francisco；中文 蘋方。

啟動(dòng)圖標(biāo)：設(shè)計(jì)尺寸 1024*1024，按照程序員要求切出不同尺寸。

控件：在無(wú)須過(guò)多體現(xiàn)設(shè)計(jì)感的頁(yè)面中，都使用系統(tǒng)默認(rèn)控件，在一些品牌感需要強(qiáng)調(diào)的頁(yè)面或者產(chǎn)品中使用自定義樣式。多為44pt，即手指選擇區(qū)域7-9mm。

鍵盤：輸入狀態(tài)下，輸入框信息都需要往上移。或者當(dāng)輸入一個(gè)表單時(shí)，頁(yè)面垂直定位到當(dāng)前輸入的位置。

iTunes截圖：即常說(shuō)的應(yīng)用商店截圖，需提供1242*2688和1125*2436兩個(gè)尺寸。

3、工作流程

前期調(diào)研：用戶研究了解品牌調(diào)性。

原型圖：站在視覺和交互的角度提出建議，工具：XD、Sketch、墨刀、Axure等。

視覺稿：根據(jù)原型圖完成界面設(shè)計(jì)，工具：Sketch、XD、PS。

實(shí)時(shí)預(yù)覽設(shè)計(jì)稿工具：Design Mirror、XD、Sketch Mirror。

設(shè)計(jì)規(guī)范：主色/輔色/色彩規(guī)范，文字顏色/大小規(guī)范，Icon規(guī)范，應(yīng)用圖標(biāo)規(guī)范，按鈕和交互態(tài)規(guī)范，間距規(guī)范。

切圖：sketch、XD可直接導(dǎo)出切圖，PS借助工具cutterman、藍(lán)湖等，切圖命名可按照“功能_類型_名稱_狀態(tài)@倍數(shù).png”格式。

標(biāo)注：上傳藍(lán)湖有自動(dòng)標(biāo)注，也有標(biāo)注工具：像素大廚、Markman等。

動(dòng)效：1、提供GIF；2、提供動(dòng)畫幀頁(yè)面；3、提供AVI視頻；4、使用Lottie，即AE完成動(dòng)畫，通過(guò)BodyMovin插件導(dǎo)出json文件提供給開發(fā)人員。

項(xiàng)目走查：開發(fā)完成后查看界面，對(duì)比設(shè)計(jì)稿進(jìn)行修改調(diào)整，盡可能最大化還原設(shè)計(jì)。

八：Material Design

1、安卓

安卓是一套操作系統(tǒng)。

安卓尺寸大小不一，使用率最高的是720P(720*1280)和1080P(1080*1920)，設(shè)計(jì)時(shí)按照1080P來(lái)設(shè)計(jì)。

安卓底部有三大金剛鍵：返回、Home、任務(wù)列表。

單位 dp，字號(hào) sp。切圖需要五套分辨率的切圖：mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi。

.9切圖：用黑色覆蓋可以拉伸區(qū)域，后綴名為.9.png。

設(shè)計(jì)方法：1、延伸iOS的設(shè)計(jì)；2、提供安卓專屬設(shè)計(jì)稿；3、按照安卓最新Material Design規(guī)范進(jìn)行單獨(dú)的界面設(shè)計(jì)。

2、Material Design

一種注重卡片式設(shè)計(jì)、紙張的模擬，使用強(qiáng)烈對(duì)比色彩的設(shè)計(jì)風(fēng)格。信息噪聲減少，足夠的情感傳遞，最大限度的保證可讀性的基礎(chǔ)上，還有一些物理現(xiàn)實(shí)的影子。

設(shè)計(jì)理念：在平面的基礎(chǔ)上增加Z軸的概念，通過(guò)投影、動(dòng)效等方式表達(dá)出高度。用不同的Z軸高度表示不同的重要性和邏輯層級(jí)關(guān)系。

組件

懸浮球FAB：Material Design中最明顯的標(biāo)志。默認(rèn)尺寸56*56，mini尺寸40*40。可跳轉(zhuǎn)，可展開子菜單。擴(kuò)展形FAB按鈕：帶文字異形，且不隨屏幕滾動(dòng)。也可應(yīng)用于底部應(yīng)用欄。

底部應(yīng)用欄：顯示底部導(dǎo)航和操作，不等分。由容器、導(dǎo)航抽屜控制、浮動(dòng)操作按鈕FAB、動(dòng)作圖標(biāo)、更多菜單控件組成。?在底部應(yīng)用欄中，FAB可放置中間位置，也可放置右側(cè)。

頂部應(yīng)用欄：左側(cè)最多一個(gè)系統(tǒng)圖標(biāo)，右側(cè)可放置多個(gè)系統(tǒng)圖標(biāo)。由頂部欄容器、抽屜式導(dǎo)航圖標(biāo)(可選)、標(biāo)題(可選)、系統(tǒng)圖標(biāo)(可選)、更多按鈕(可選)組成。頂部欄也可改變高度以凸顯標(biāo)題。頂部欄可以嵌入圖片，高度改變。背板設(shè)計(jì)：可隱藏：顯示輔助信息，可激活：顯示相關(guān)控件。

橫幅：頂部欄下第一個(gè)區(qū)域，顯示突出的消息和相關(guān)操作。可以是提示，也可以是包含圖形的設(shè)計(jì)。

底部導(dǎo)航：與iOS類型，底部等分多個(gè)圖標(biāo)區(qū)域，配以文字輔助。

按鈕：純文字按鈕、線性按鈕、填充按鈕、切換按鈕。

卡片式設(shè)計(jì)：也是Material Design的顯著標(biāo)志。包含：容器卡容器、縮略圖(可選)、標(biāo)題文字(可選)、小標(biāo)題(可選)、多媒體(可選)、輔助文字(可選)、圖標(biāo)(可選)、按鈕(可選)。分割線用比較輕的顏色，保證卡片完整性。

紙片是輸入框多個(gè)元素的組合，有選中態(tài)和交互態(tài)等。

對(duì)話框：分為模態(tài)對(duì)話(需要與人交互)和非模態(tài)對(duì)話(顯示提示信息)。

分割線：全出血分割線(與頁(yè)面寬度一樣)、插入式分割線(右側(cè)封閉左側(cè)打開)、居中分割線(左右不封閉)、標(biāo)題分割線(分割線下有小號(hào)文字標(biāo)題)。

抽屜式導(dǎo)航：需要兩次觸發(fā)，左側(cè)抽出的形式。組成：容器(可選)、頭部(可選，常為用戶信息)、分割線(可選)、選中態(tài)、選中態(tài)文本、未激活文本、小標(biāo)題、底層界面(不可操作)。

頁(yè)卡：頂部欄的一部分，2-3個(gè)頁(yè)卡組成，選擇時(shí)切換相應(yīng)內(nèi)容。

文字輸入框：填充型輸入框、線框型輸入框。

圖片組：正常圖片組(大小一樣)、排版圖片組(用柵格分割，可拼接，大小不一)、照片墻圖片組(結(jié)構(gòu)散、大小不一)、瀑布流圖片組(寬度一致，高度不同)。

滑塊：調(diào)節(jié)音量進(jìn)度。

選擇器：單選框、復(fù)選框等。

底部提示欄：對(duì)用戶不過(guò)多打擾，且信息不必確認(rèn)操作的信息提示工具欄。

狀態(tài)指引：加載過(guò)程進(jìn)度，給用戶傳遞狀態(tài)。

排版

響應(yīng)式布局：根據(jù)屏幕進(jìn)行等比例大小縮放。列(不變)、水槽(寬度可變)、邊距(可變)，即應(yīng)用柵格系統(tǒng)。

色彩

Material Design 色彩鮮亮，明度純度適中，重視背景與文字的色彩對(duì)比，保證文字可讀性。

配色注意三個(gè)原則：分級(jí)(區(qū)分可交互和裝飾)；清晰(色彩反差)；品牌(主色調(diào))。

界面中的色彩，狀態(tài)欄和頂部導(dǎo)航欄用鄰近色，告知用戶這部分屬同一個(gè)邏輯關(guān)系；底部應(yīng)用欄與FAB使用對(duì)比色，強(qiáng)調(diào)FAB的重要性。

文字

中文使用思源字體，英文使用Roboto字體。

Material Design 支持眾多語(yǔ)言字體，包括阿拉伯語(yǔ)、漢語(yǔ)、日語(yǔ)等非西文體系。

產(chǎn)品圖標(biāo)是體現(xiàn)品牌和功能性的圖標(biāo)，傳達(dá)產(chǎn)品的核心理念和意圖。圖標(biāo)網(wǎng)格盡量使用4的倍數(shù)。在網(wǎng)格和參考線的輔助下設(shè)計(jì)出視覺大小均衡的圖標(biāo)。

產(chǎn)品圖標(biāo)設(shè)計(jì)中，不要因?yàn)轭伾黾佣嘤嗟年幱?#xff0c;不要使用太多重疊的表面層數(shù)，層級(jí)，分割和手風(fēng)琴層次，不要用奇怪的透視。

系統(tǒng)圖標(biāo)應(yīng)簡(jiǎn)單、現(xiàn)代、友好，簡(jiǎn)化至最基本的特征。字體圖標(biāo)是把圖標(biāo)變成字體格式以節(jié)約空間。盡量使用幾何形狀，不要太過(guò)松散。需要留出一定的邊距來(lái)保證圖標(biāo)大小一樣。

圖標(biāo)由描邊末端(直線并有角度)、圓角(建議2dp)、泛白區(qū)域、描邊(不要使用兩種以上的粗細(xì))、泛白邊緣、留白組成。圖標(biāo)應(yīng)提供足夠的留白和操作區(qū)域以便于用戶手指的選擇。

未點(diǎn)擊圖標(biāo)顏色為#000000，透明度為87%。點(diǎn)擊態(tài)圖標(biāo)顏色為#000000，透明度為38%。

圖標(biāo)應(yīng)和界面內(nèi)容的直角或圓角或其他特征相互呼應(yīng)，以體現(xiàn)品牌感。

Material Design 在形狀上很自由，菱形、半圓形、圓角都可以使用。設(shè)計(jì)師可以在設(shè)計(jì)中用一致的方式將形狀、顏色、弧度等特征融入與頁(yè)面設(shè)計(jì)中，可以提升產(chǎn)品的品牌感。

交互：空狀態(tài)(和品牌一致，無(wú)可操作性)，警告對(duì)話框(預(yù)知下一步行為，并操作)，閃屏，圖像(16:9、4:3、1:1等比例)，新手引導(dǎo)(幫助用戶了解如何讓操作)，離線功能(設(shè)計(jì)狀態(tài)表示無(wú)網(wǎng)絡(luò)，也可提供一些在無(wú)網(wǎng)絡(luò)下可操作的功能按鈕)，主題編輯器(修改樣式，圖標(biāo)風(fēng)格等)。

…

說(shuō)了這么多，你有沒有心動(dòng)呢？快來(lái)購(gòu)買吧↓↓↓

總結(jié)

以上是生活随笔為你收集整理的mint ui tabbar选中后怎么改变icon图标_UI全书（下）读后梳理：iPhone设计规范和Material Design规范...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。