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尾部区域。