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

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

…

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

時間：2019-07-07

作者：郗鑒

出版社：中國工信出版集團?電子工業(yè)出版社

配圖全部來源：郗鑒

原文鏈接：

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

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

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

1、型號尺寸

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

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

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

iPhone手機型號與像素對應(yīng)表：

2、HIG設(shè)計指南

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

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

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

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

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

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

工具欄高度 44pt。

閃屏 ：不同型號不同尺寸。

頁面左右安全距離：16-24。

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

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

啟動圖標：設(shè)計尺寸 1024*1024，按照程序員要求切出不同尺寸。

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

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

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

3、工作流程

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

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

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

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

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

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

標注：上傳藍湖有自動標注，也有標注工具：像素大廚、Markman等。

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

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

八：Material Design

1、安卓

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

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

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

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

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

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

2、Material Design

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

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

組件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

底部提示欄：對用戶不過多打擾，且信息不必確認操作的信息提示工具欄。

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

排版

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

色彩

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

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

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

文字

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

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

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

產(chǎn)品圖標設(shè)計中，不要因為顏色增加多余的陰影，不要使用太多重疊的表面層數(shù)，層級，分割和手風(fēng)琴層次，不要用奇怪的透視。

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

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

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

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

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

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

…

說了這么多，你有沒有心動呢？快來購買吧↓↓↓

總結(jié)

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

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