网页设计视觉字体规范

（一）网页宽度及高度

建画布一般1920px*1080px(高度建议可自定)建议视觉中心网站宽度1000px以内，推荐尺寸960px，如果超出1000px，推荐尺寸1200px。（两边需留白，目的自适应）

建议网站高度控制在2-3屏内，大概高度控制在2000px以内为宜。一般一屏高度在710px以内,否则需要下滑，不下滑会看不到下方内容。

（二）字体字号

字体请使用系统自带字体。例：微软雅黑、黑体、宋体、Tahoma、Arial、Verdana。

安卓中文常用微软雅黑，英文常用HelveticalNeue

中文备选字体：方正兰亭黑

英文备选字体Helvetica、Arial、DIN

IOS常用字体：苹方

字号大小：

中文：最低12px起步，12、14……偶数递增

H1标题字36px,行间距60px,  H2副标题字24px,行间距40px,  正文14px,行间距24px,修饰提示性文字12px,行间距20px.

行间距=行高-字号（行高一般为20px）

2、英文：最低10px起步，10、12……偶数递增

字体颜色：

常规颜色：#666666（常用大面积范围文本子，在列表中标题字呈现加粗）

重要文字：#333333（常用于标题和关键性文字）

警示文字：#ff0000(常用于提示性文字，警示文字)

次级文字：#999999（常用于帮助信息，不需太在意的文字）

（三）页面布局

1.整体视觉

尽量整齐，视觉统一

2.网页栅格页面宽度：980px栏目间距：10px

3.产品栅格产品宽度：160px产品间距：40px/30px

一般为W=(A*n)-i    (W为网页宽度，A为元素快+间隙，n为元素块数，推荐栅格系统计算网站grid.guide/

4.表单

两个输入框间距一般为10px,提示框与本体的输入框为5px,文本与文本的间距为18px

5.Bar

所有Bar运用文字为宋体，12号字体Bar高度为25px，14号Bar高度为30px

6.留白

版块间距为10px版块与内容间距为10px内容单元之间间距为10px内容的间距均为10px

7.Button

运用：交易、购买、购物车、后台、搜索、提交

合适的按钮尺寸

1.导航（文本字号一般14px）站酷导航按钮80*60px,东方头条导航按钮60*50px,宽度控制在50-100px左右,按钮内部左右留白一般20px左右,高度控制在30-50px左右,一般行高200-400%

2.注册、登录

注册、登录按钮一般宽度与上方输入表单宽度保持一致,一般表单文本对话框宽度300-400px左右

高度控制在30-50px左右（行高200-400%左右）,由于单独存在，尺寸大、字号大，一般字号14-18px

3.搜索框

由于搜索框一般位于顶部单独存在,搜索框文本域尺寸较大，故按钮亦大,一般宽度控制80-100px左右,高度控制在30-50px左右（行高200-400%左右）

icon搜索按钮，一般宽度缩小，尺寸50px左右

4.购买、关注

一般购买按钮在150-200px左右,高度控制在30-50px左右（行高200-400%左右）,由于单独存在，尺寸大、字号大，一般字号14-18px,关注等按钮相对购买宽度略小

(四)icon

制作规格：统一的视角、倒角、材质、尺寸，颜色数量尽量不要超过三种

制作要求：图标必须会意直观，这是它区别于文字的价值

icon尺寸正方形常见一般尺寸30*30  32px*32px 50*50 100*100px视大小自定

（五）命名

图片命名规范：建立良好文档规范，养成图片命名习惯，有利于源文件的移交、继承和重用，能有效提高工作效率，利于合作

（六）图片输出

切图时要贴合图形区，避免空白区域占用文件大小