【读书笔记】ios10人机界面指南-视觉

第四章-视觉

1、动效Animation

谨慎使用动效

确保动效的一致性

争取真实可信

2、品牌Branding

精致出不显眼的品牌

设计为主,品牌次之

品牌设计遵从于内容

忍着,别让你App里到处放logo

遵循苹果商标指南

3、颜色


【读书笔记】ios10人机界面指南-视觉_第1张图片

在你的应用程序使用补色

选择一个关键色去提示App里的交互

一般来说,创建一个有限颜色个数的色板去协调你的应用logo

将颜色配置文件应用到图像

使用宽彩色来增强兼容设备的视觉体验

交互元素和非交互元素禁止使用同一颜色

在不同亮度条件下测试你应用程序的配色方案

考虑真色调显示如何影响颜色

考虑色盲以及在不同文化环境下颜色的含义

【读书笔记】ios10人机界面指南-视觉_第2张图片
正常人看到的
【读书笔记】ios10人机界面指南-视觉_第3张图片
红绿色盲人看到的

使用足够的颜色对比度(最小4.5:1的对比度,建议7:1时优选,满足更严格的可访问性标准)

4、布局Layout

【读书笔记】ios10人机界面指南-视觉_第4张图片

在切换页面时,保持对当下内容的聚焦

确保主要内容在默认大小下也足够的清晰

在应用程序里保持一个整体一致的外观

使用视觉重量和平衡去表达(信息层级的)重要性

排列整齐元素来减少阅读的疲劳感并且帮助用户理解软件的组织和层次结构

避免不必要的布局变化

如果可能,同事支持竖屏和横屏方向

如果您的应用程序只支持一种屏幕方向,需要你同时支持他的两种变化

(即可180度翻转)

根据内容的变化去定义你的应用程序对于设备旋转的响应

为交互元素提供足够的间距(尽量保持最小可交互点击面积在44pt*44pt之内)

为文本大小的变化做好准备

5、排版Typography

强调重要信息

如果可能的话,使用一个字体

尽量使用内置的文本样式

确保自定义字体清晰

实现可访问性为自定义字体

6、动态字体大小Dynamic Type Size

【读书笔记】ios10人机界面指南-视觉_第5张图片
【读书笔记】ios10人机界面指南-视觉_第6张图片
【读书笔记】ios10人机界面指南-视觉_第7张图片
【读书笔记】ios10人机界面指南-视觉_第8张图片
【读书笔记】ios10人机界面指南-视觉_第9张图片
【读书笔记】ios10人机界面指南-视觉_第10张图片
【读书笔记】ios10人机界面指南-视觉_第11张图片

字体使用与间距

【读书笔记】ios10人机界面指南-视觉_第12张图片
【读书笔记】ios10人机界面指南-视觉_第13张图片

你可能感兴趣的:(【读书笔记】ios10人机界面指南-视觉)