本文轉載自簡書，作者：Bystander7原文鏈接：

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

…

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

時間：2019-07-07

作者：郗鑒

出版社：中國工信出版集團?電子工業出版社

配圖全部來源：郗鑒

原文鏈接：

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

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

七、iPhone設計規范

1、型號尺寸

邏輯像素：單位PT、按照內容尺寸計算。

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

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

iPhone手機型號與像素對應表：

2、HIG設計指南

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

設計規范：

狀態欄高度：6/7/8: 20pt ；X : 44pt。

導航欄高度：44pt；大標題導航116pt=狀態欄20pt+標題文字34pt；滑動后變為正常高度：20pt+44pt。

導航欄圖標：建議24*24pt；最大28*28pt。

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

工具欄高度 44pt。

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

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

色彩：官網有建議的系統色彩。

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

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

控件：在無須過多體現設計感的頁面中，都使用系統默認控件，在一些品牌感需要強調的頁面或者產品中使用自定義樣式。多為44pt，即手指選擇區域7-9mm。

鍵盤：輸入狀態下，輸入框信息都需要往上移?；蛘弋斴斎胍粋€表單時，頁面垂直定位到當前輸入的位置。

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

3、工作流程

前期調研：用戶研究了解品牌調性。

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

視覺稿：根據原型圖完成界面設計，工具：Sketch、XD、PS。

實時預覽設計稿工具：Design Mirror、XD、Sketch Mirror。

設計規范：主色/輔色/色彩規范，文字顏色/大小規范，Icon規范，應用圖標規范，按鈕和交互態規范，間距規范。

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

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

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

項目走查：開發完成后查看界面，對比設計稿進行修改調整，盡可能最大化還原設計。

八：Material Design

1、安卓

安卓是一套操作系統。

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

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

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

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

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

2、Material Design

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

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

組件

懸浮球FAB：Material Design中最明顯的標志。默認尺寸56*56，mini尺寸40*40?？商D，可展開子菜單。擴展形FAB按鈕：帶文字異形，且不隨屏幕滾動。也可應用于底部應用欄。

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

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

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

底部導航：與iOS類型，底部等分多個圖標區域，配以文字輔助。

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

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

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

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

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

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

頁卡：頂部欄的一部分，2-3個頁卡組成，選擇時切換相應內容。

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

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

滑塊：調節音量進度。

選擇器：單選框、復選框等。

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

狀態指引：加載過程進度，給用戶傳遞狀態。

排版

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

色彩

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

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

界面中的色彩，狀態欄和頂部導航欄用鄰近色，告知用戶這部分屬同一個邏輯關系；底部應用欄與FAB使用對比色，強調FAB的重要性。

文字

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

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

產品圖標是體現品牌和功能性的圖標，傳達產品的核心理念和意圖。圖標網格盡量使用4的倍數。在網格和參考線的輔助下設計出視覺大小均衡的圖標。

產品圖標設計中，不要因為顏色增加多余的陰影，不要使用太多重疊的表面層數，層級，分割和手風琴層次，不要用奇怪的透視。

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

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

未點擊圖標顏色為#000000，透明度為87%。點擊態圖標顏色為#000000，透明度為38%。

圖標應和界面內容的直角或圓角或其他特征相互呼應，以體現品牌感。

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

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

…

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。