为什么遵从平台设计规范

1、在本平台做产品当然要符合平台的设计规范,可以帮助产品可以快速过审。
2、减少用户学习成本。
3、减少开发成本

苹果ios设计三大原则

2018-10-11/ios设计规范 - 笔记 - 图1

ios设计三大原则

清晰

2018-10-11/ios设计规范 - 笔记 - 图2

清晰
2018-10-11/ios设计规范 - 笔记 - 图3

颜色
颜色不要使用特别浅的色,保持颜色的阅览体验并要考虑色盲人群。如何查看颜色可识别度,可将界面颜色调为黑白状态下查看。
颜色使用:尽量不要超过2种颜色,使用1种颜色的不同纯度加相似色。
2018-10-11/ios设计规范 - 笔记 - 图4

排版
格斯塔理论:
2018-10-11/ios设计规范 - 笔记 - 图5

图形
2018-10-11/ios设计规范 - 笔记 - 图6

留白

依从

依从是为了内容而服务,让内容更加容易的去展示,让用户更快速找到想要的内容。
2018-10-11/ios设计规范 - 笔记 - 图7

依从

深度

2018-10-11/ios设计规范 - 笔记 - 图8

深度

结构

2018-10-11/ios设计规范 - 笔记 - 图9

ios设计的结构

状态栏

2018-10-11/ios设计规范 - 笔记 - 图10

在不同设备上状态了不一样
2018-10-11/ios设计规范 - 笔记 - 图11

白色
2018-10-11/ios设计规范 - 笔记 - 图12

黑色
2018-10-11/ios设计规范 - 笔记 - 图13

半透明(模糊)
2018-10-11/ios设计规范 - 笔记 - 图14

京东状态栏使用底部渐变透明

导航栏

2018-10-11/ios设计规范 - 笔记 - 图15

2018-10-11/ios设计规范 - 笔记 - 图16

导航栏中标题的位置种类
2018-10-11/ios设计规范 - 笔记 - 图17

尽量减少导航条上的内容

搜索栏

2018-10-11/ios设计规范 - 笔记 - 图18

2018-10-11/ios设计规范 - 笔记 - 图19

搜索栏种类
2018-10-11/ios设计规范 - 笔记 - 图20

标签栏

2018-10-11/ios设计规范 - 笔记 - 图21

工具栏

工具栏中的功能一般不会跳转页面,只在当前页面操作。
2018-10-11/ios设计规范 - 笔记 - 图22

控件Controls

按钮

2018-10-11/ios设计规范 - 笔记 - 图23

展示指示器只在ios中才有
展示指示器只在ios中才有
2018-10-11/ios设计规范 - 笔记 - 图24

添加按钮

编辑菜单

2018-10-11/ios设计规范 - 笔记 - 图25

长按呼出

标签

2018-10-11/ios设计规范 - 笔记 - 图26

页面控件(轮播图)

2018-10-11/ios设计规范 - 笔记 - 图27

选择器

2018-10-11/ios设计规范 - 笔记 - 图28

活动指示器(转菊花、加载图标)
2018-10-11/ios设计规范 - 笔记 - 图29

2018-10-11/ios设计规范 - 笔记 - 图30

网络活动指示器

2018-10-11/ios设计规范 - 笔记 - 图31

进度条

苹果不希望有太多进度条,希望能迅速加载。(网页中有很多进度条,淘宝app中大多都是网页)
2018-10-11/ios设计规范 - 笔记 - 图32

分段控件

用做二级菜单
2018-10-11/ios设计规范 - 笔记 - 图33

滑块

2018-10-11/ios设计规范 - 笔记 - 图34

步进器

2018-10-11/ios设计规范 - 笔记 - 图35

开关

不要放在导航栏中
2018-10-11/ios设计规范 - 笔记 - 图36

2018-10-11/ios设计规范 - 笔记 - 图37

视图

2018-10-11/ios设计规范 - 笔记 - 图38

views

操作列表

2018-10-11/ios设计规范 - 笔记 - 图39

操作列表
2018-10-11/ios设计规范 - 笔记 - 图40

活动视图

2018-10-11/ios设计规范 - 笔记 - 图41

2018-10-11/ios设计规范 - 笔记 - 图42

2018-10-11/ios设计规范 - 笔记 - 图43

警告窗

2018-10-11/ios设计规范 - 笔记 - 图44

2018-10-11/ios设计规范 - 笔记 - 图45

想让用户点击的操作放右边

集合视图

2018-10-11/ios设计规范 - 笔记 - 图46

2018-10-11/ios设计规范 - 笔记 - 图47

表单视图

2018-10-11/ios设计规范 - 笔记 - 图48

滚动视图

2018-10-11/ios设计规范 - 笔记 - 图49

2018-10-11/ios设计规范 - 笔记 - 图50

人机交互样式

2018-10-11/ios设计规范 - 笔记 - 图51

手势

2018-10-11/ios设计规范 - 笔记 - 图52

2018-10-11/ios设计规范 - 笔记 - 图53

2018-10-11/ios设计规范 - 笔记 - 图54

2018-10-11/ios设计规范 - 笔记 - 图55

2018-10-11/ios设计规范 - 笔记 - 图56

2018-10-11/ios设计规范 - 笔记 - 图57

2018-10-11/ios设计规范 - 笔记 - 图58

身份验证

2018-10-11/ios设计规范 - 笔记 - 图59

指纹识别
2018-10-11/ios设计规范 - 笔记 - 图60

人脸识别

其它规范(不只限制与ios)

界面模式

启动页

2018-10-11/ios设计规范 - 笔记 - 图61

启动页

引导页

2018-10-11/ios设计规范 - 笔记 - 图62

引导页

浮层教程

2018-10-11/ios设计规范 - 笔记 - 图63

浮层教程(其实这个浮层是一张图片)

空状态

2018-10-11/ios设计规范 - 笔记 - 图64

空状态
包含这几种状态
无网状态
初次使用
报错失败
2018-10-11/ios设计规范 - 笔记 - 图65

无网状态
2018-10-11/ios设计规范 - 笔记 - 图66

2018-10-11/ios设计规范 - 笔记 - 图67

空状态的设计指南
2018-10-11/ios设计规范 - 笔记 - 图68

2018-10-11/ios设计规范 - 笔记 - 图69

2018-10-11/ios设计规范 - 笔记 - 图70

面试时,空状态尽量不要使用品牌形象,会让面试官觉得有点轻佻,也回让面试官觉得到公司能不能用。

首页

2018-10-11/ios设计规范 - 笔记 - 图71

首页

列表页

2018-10-11/ios设计规范 - 笔记 - 图72

列表页

操作、输入页

2018-10-11/ios设计规范 - 笔记 - 图73

操作、输入页

详情页

2018-10-11/ios设计规范 - 笔记 - 图74

详情页
2018-10-11/ios设计规范 - 笔记 - 图75

基本组件

2018-10-11/ios设计规范 - 笔记 - 图76

导航栏

2018-10-11/ios设计规范 - 笔记 - 图77

导航栏
导航栏中,苹果会将标题放置中心,安卓会放置左侧。

底部便签栏

2018-10-11/ios设计规范 - 笔记 - 图78

列表

2018-10-11/ios设计规范 - 笔记 - 图79

导航与控件

导航控件

2018-10-11/ios设计规范 - 笔记 - 图80

标签式
2018-10-11/ios设计规范 - 笔记 - 图81

2018-10-11/ios设计规范 - 笔记 - 图82

舵式导航
2018-10-11/ios设计规范 - 笔记 - 图83

标签导航

分段控件

2018-10-11/ios设计规范 - 笔记 - 图84

苹果SegmentControls
2018-10-11/ios设计规范 - 笔记 - 图85

自定义的
2018-10-11/ios设计规范 - 笔记 - 图86

一般的
2018-10-11/ios设计规范 - 笔记 - 图87

tabs与SegmentControls的区别
2018-10-11/ios设计规范 - 笔记 - 图88

苹果分段控件内容过多,放右侧按钮,点击从底部弹出全部内容。
滑动Tab
2018-10-11/ios设计规范 - 笔记 - 图89

深入式

2018-10-11/ios设计规范 - 笔记 - 图90

抽屉导航

安卓原生抽屉导航是浮动在内容上,苹果是把内容推开出现。
现在越来越少使用抽屉导航的原因是:1.单手握持区域较远,不易操作。2.苹果从左边往右滑动是返回操作。
2018-10-11/ios设计规范 - 笔记 - 图91

2018-10-11/ios设计规范 - 笔记 - 图92

2018-10-11/ios设计规范 - 笔记 - 图93

其它样式

仪表盘式

一般出现于app内页和智能家居app上
2018-10-11/ios设计规范 - 笔记 - 图94

滑动式

太浪费空间
2018-10-11/ios设计规范 - 笔记 - 图95

弹出式

2018-10-11/ios设计规范 - 笔记 - 图96

比较符合各平台规范的产品

印象笔记
2018-10-11/ios设计规范 - 笔记 - 图97

不太符合

qq
原因:使用次数多,场景与设备不稳定。学习成本太高。

如果安卓与苹果设计一致,安卓开发成本较高

原因:
1.设备大小太多。
2.苹果有很多默认空间,安卓没有。
有数据说成本在1比4

刷新控件

内容刷新
2018-10-11/ios设计规范 - 笔记 - 图98

界面见跳转加载
2018-10-11/ios设计规范 - 笔记 - 图99

内容页加载
2018-10-11/ios设计规范 - 笔记 - 图100

加载方式
2018-10-11/ios设计规范 - 笔记 - 图101

2018-10-11/ios设计规范 - 笔记 - 图102

Action Sheet

动作菜单/动作面板/行动列表
2018-10-11/ios设计规范 - 笔记 - 图103

2018-10-11/ios设计规范 - 笔记 - 图104

2018-10-11/ios设计规范 - 笔记 - 图105

2018-10-11/ios设计规范 - 笔记 - 图106

2018-10-11/ios设计规范 - 笔记 - 图107

页面指示器

附在轮播图、一组卡片等页面底部,用来表示页面总数量和当前停留的页面。
2018-10-11/ios设计规范 - 笔记 - 图108

page indicator
2018-10-11/ios设计规范 - 笔记 - 图109

2018-10-11/ios设计规范 - 笔记 - 图110

2018-10-11/ios设计规范 - 笔记 - 图111

2018-10-11/ios设计规范 - 笔记 - 图112

尽量不要使用第三方样式,避免让用户不知道什么意思
2018-10-11/ios设计规范 - 笔记 - 图113

Skeleton Screen(加载占位图)

需单独设计,它是默认样式。也属于空状态的一种。
2018-10-11/ios设计规范 - 笔记 - 图114

2018-10-11/ios设计规范 - 笔记 - 图115

Badge(小红点/徽标)

2018-10-11/ios设计规范 - 笔记 - 图116

2018-10-11/ios设计规范 - 笔记 - 图117

设计要点

Switch(开关/切换开关)

一般在设置页面中。
安卓的开关按钮会比较大,苹果的会放在开关内。
2018-10-11/ios设计规范 - 笔记 - 图118

2018-10-11/ios设计规范 - 笔记 - 图119

2018-10-11/ios设计规范 - 笔记 - 图120

2018-10-11/ios设计规范 - 笔记 - 图121

2018-10-11/ios设计规范 - 笔记 - 图122

A-Z index(字母导航)

2018-10-11/ios设计规范 - 笔记 - 图123

2018-10-11/ios设计规范 - 笔记 - 图124

2018-10-11/ios设计规范 - 笔记 - 图125

Picker(选择器/拾取器)

2018-10-11/ios设计规范 - 笔记 - 图126

2018-10-11/ios设计规范 - 笔记 - 图127

2018-10-11/ios设计规范 - 笔记 - 图128

类似苹果Picker的样式
2018-10-11/ios设计规范 - 笔记 - 图129

2018-10-11/ios设计规范 - 笔记 - 图130

2018-10-11/ios设计规范 - 笔记 - 图131

Soft Keyboard‘(虚拟键盘)

2018-10-11/ios设计规范 - 笔记 - 图132

2018-10-11/ios设计规范 - 笔记 - 图133

2018-10-11/ios设计规范 - 笔记 - 图134

2018-10-11/ios设计规范 - 笔记 - 图135

2018-10-11/ios设计规范 - 笔记 - 图136

适配

适配的原因是为提升设计效率,做一稿设计图适配所有设备使用。

pt&px

2018-10-11/ios设计规范 - 笔记 - 图137

像素密度

Pixels Per Inch也叫像素密度,所表示的是每英寸所拥有的像素数量。像素密度越大,显示画面细节就越丰富。像素密度=√{(长度像素数^2+宽度像素数^2)}/ 屏幕尺寸。
2018-10-11/ios设计规范 - 笔记 - 图138

325PPI=√(1136²+640²) / 4

分辨率

像素的总数÷实际占用的物理尺寸。
普通屏幕是1倍图
高清屏幕是2倍图

PT(points)

2018-10-11/ios设计规范 - 笔记 - 图139

在sketch中画板大小设置为多少

375 ×667
1.sketch是矢量软件在小尺寸下做图不会失真。
2.如果直接用2倍图来做,需要单位换算,每个元素都应该是2的倍数,适配3倍图时还需要乘以1.5,比较麻烦。在1倍图下做好后直接成2或乘3就可以了。
2018-10-11/ios设计规范 - 笔记 - 图140

2018-10-11/ios设计规范 - 笔记 - 图141

2018-10-11/ios设计规范 - 笔记 - 图142

2018-10-11/ios设计规范 - 笔记 - 图143

2018-10-11/ios设计规范 - 笔记 - 图144

因为苹果se读取是2倍图,在苹果6做的大小,在se中也会同等大小,导致页面显示错误。
解决方法
1.保6不保5.可做的元素小点,尽量让减少错误影响。
2.采用百分比标注。
mac电脑下载该插件使用sketch可进行自动换算百分比。
2018-10-11/ios设计规范 - 笔记 - 图145

2018-10-11/ios设计规范 - 笔记 - 图146

苹果x适配

2018-10-11/ios设计规范 - 笔记 - 图147

重点内容在安全区域内
2018-10-11/ios设计规范 - 笔记 - 图148

苹果6 plus实际物理尺寸为1080x1920。
苹果希望在6plus中使用3倍图,因为技术或其它原因不能达到,所有就骗手机尺寸为1242x2208,逻辑分辨率414x736,然后设计按1242x2208来设计,开发按414x736来写程序。然后系统会自动缩小到1080x1920。