设计规范

iOS设计规范

1.ios设计三大原则

（1）视觉层：清晰

（2）交互层：遵从

（3）结构层：深度

2.ios规范细节拆分

（1）界面结构

状态栏：

状态栏始终固定在屏幕上边缘

@1x下尺寸为20pt 

避免滚动内容直接透过状态栏显示(设计抽屉导航时)

.在用户全屏观看媒体时，可以考虑隐藏状态栏以及所有页面UI  

导航栏：

导航栏是半透明的( 70%)，位于状态栏下方

@1x下尺寸为44pt ( iPhone X是88pt )

不要自定义状态栏

避免导航栏内内容过多，空间数目一般不超过2

iOS11导航栏分为两种形式

标签栏：

标签栏是半透明的( 70%)，始终出现在屏幕底部

@1x下尺寸为49pt ( iPhone X上为83pt )

标签栏一次最多承载5个标签，多于5个的图标以列表形式收纳到“更多”里

标签栏用来组织整个应用层面的信息结构

标签栏的图标有正负形

工具栏：

工具栏是半透明的( 70% )

@1x下尺寸为44pt ( iPhone X上为83pt )

工具栏内放置用户最常用的指令

工具栏可以放置文字或图标，当项目超过3个以上的项目可以使用图标

（2）系统字体

苹方

（3）人机交互

手势：

用户通过在屏幕上执行手势与iOs设备进行交互。这些手势与内容密切关系，并增强与对象的直接操控感。

网页设计规范

文字规范

1.常用字体

宋体

微软雅黑

黑体

2.常用字号

12px

14px

16px

18px

3.字体单位

像素-相对单位  用于web

点-绝对单位  用于手机

4.字体设置

BLOD（不是所有字体都有）

5.边缘设置

无

锐利

犀利

浑厚

平滑

网站类型

1.专题页

只围绕一个产品或服务来设计

罗列这款产品或服务的要点

每个要点都以设计的形式展现

网页安全宽度

1.有效设计区域

（1）三种情况

网页宽度允许（小于）（等于）屏幕分辨率宽度

网页宽度不允许大于屏幕分辨率宽度

（2）常见尺寸

基于1024*768

基于1336*768

基于1440*900

响应式

根据用户屏幕自动调整页面；响应效果如图。

网站开发概念

1、分辨率：72像素/英寸；

2、颜色模式：RGB 8位；

3、网页背景：纯色平铺、渐变色或底纹平铺、通栏大图片。

屏幕分辨率

1.标准分辨率1024px/768px，有效设计内容宽度1000px，首屏高约700px；

2.常用分辨率1280px/800px，有效设计内容宽度1200px，首屏高约750px；

3.1920px/1080px，有效设计内容宽度1200px-1400px。

网站开发概念

网站界面设计、网页前端代码、网站后台开发、测试优化、运维。

网页结构命名

1、Head头部（LOGO、栏目），高度60-120px；

2、banner主要视觉区域，尺寸1920*600以内。

3、main主要内容区域，主要注意有效设计区域；

4、Footer尾部区域。