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；滑动后变为正常高度：20+44
导航栏图标 建议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。可跳转，可展开子菜单。扩展形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等比例），新手引导（帮助用户了解如何让操作），离线功能（设计状态表示无网络，也可提供一些在无网络下可操作的功能按钮），主题编辑器（修改样式，图标风格等）
网友评论