网页视觉设计规范

广州/学生/8年前/2448浏览
网页视觉设计规范
leogong88

网页视觉设计规范

网页视觉设计规范

版面尺寸 :

1920(版心1100)

搜索框:(圆角是个半圆)

fe9a59180cb9b5b3086ed4861f74.jpg


色值:

文本色值:


文字色值:

c7a859180cc8a801216a3e7c5832.jpg


大小:

按钮大小:

401159180ce1b5b3086ed470df3e.jpg


头像大小:

c98959180cffa801216a3e43f91a.jpg


文字大小:


0c0b59180d0fb5b3086ed4b45679.jpg


表单填写:(表单内外文字缩进10px)

默认状态

f43759180d26a801216a3e52e724.jpg


警报(错误提示)

7a3c59180d3db5b3086ed482c353.jpg


通过验证(正确提示)

25ca59180d53b5b3086ed4617e69.jpg


输入时状态

b1b859180d6ab5b3086ed43eaf6e.jpg


单选项:

d1ff59180d7ea801216a3e710108.jpg


多选项:

c00b59180d93b5b3086ed40fe924.jpg


图标使用:

120*120px (圆角20px)

071659180da5a801216a3e0b03a1.jpg


100*100p

864359180db8a801216a3ed313fd.jpg


切图:

辅助软件:软件下载地址分享http://pan.baidu.com/s/1eQfKnaM

一键切图:SuperSlicr.atn、切图神器:CutAndSliceMe、标注:MarkMan_2.7.8

切图文件:01. 图片(images )

02. 效果图

03. 标注图

切图元素:图标、logo、按钮、标签(一些简单形状的按钮可以直接写就不用切了)

命名规则:模块 - 类别 - 功能 - 状态 .jpg 或者 模块 - 类别 - 功能 - 状态 .png

标注规则:文字大小,间隔,行距,缩进px,长度,按钮,边框

d69b59180dd1a801216a3e938cd1.jpg


分页信息 :

920a59180de5b5b3086ed41c2954.jpg

(文:DELBBG)

23
阅读原文
|
Report
|
59
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in