网页设计规范

文字规范

1.常用字体

1、宋体

2、微软雅黑

3、黑体

2.常用字号

1、12px

2、14px

3、16px

4、18px

3.字体单位

1、像素-相对单位  用于web

2、点-绝对单位  用于手机

4.字体设置

BLOD（不是所有字体都有）

5.边缘设置

1、无

2、锐利

3、犀利

4、浑厚

5、平滑

网站类型

1.专题页

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

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

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

网页安全宽度

1.有效设计区域

（1）三种情况

1、网页宽度允许（小于）

2、（等于）屏幕分辨率宽度

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

（2）常见尺寸

1、基于1024*768

2、基于1336*768

3、基于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尾部区域。

APP iOS设计规范

1.ios设计三大原则

（1）视觉层：清晰

（2）交互层：遵从

（3）结构层：深度

2.ios规范细节拆分

（1）界面结构

状态栏：

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

2、@1x下尺寸为20pt 

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

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

导航栏：

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

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

3、不要自定义状态栏

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

5、iOS11导航栏分为两种形式

标签栏：

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

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

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

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

5、标签栏的图标有正负形

工具栏：

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

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

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

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

（2）系统字体

苹方

（3）人机交互

手势：

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