商旅web端UI规范1.0

网页宽度与首屏高度

一般网站宽为996px,国内网站大部分还是以1000个像素为界限,因超过1000像素适合在大屏幕上浏览,小屏幕会显得拥挤。国内尺寸设置比较保守,这样可以保证大部分用户舒适的浏览网页。

设计稿的尺寸大小

在2017版后的PS中新建文档都有预设,如下图:

这也极大的方便了设计Web网页是的思考时间,目前我在公司一般设计网页的内容区域一般是为1000px,整体宽度为1920px,所有的设计文档宽1920px主体内容根据具体情况而定(主体内容要是想要适应所有用户必须低于1000px)。

常用字体及字号

字体设计的总原则是:可辨识性和易读性。

中文建议使用微软雅黑字体,英文则建议使用arial 字体。常用的字体大小号有以下几种:

Name Description web

xlarge

特大标题 18px

large

大标题 16px

normal

正文 14px

small

注释性内容 12px

12px是用于网页的最小字体,适用于突出性的日期,版权等注释性内容。

14px则适用于非突出性的普通正文内容。

16px或18px适用于突出性的标题内容。

网站的字体大小并没有硬性规定具体的字号,根据实际情况可以酌情考虑,但是要有限适用偶数字号。

字体规格也不需要太多,最好适用三种混搭,如果需要更多

层次的区别,可以改变字体颜色或加粗来体现。

字体间距舒适范围

相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。

行间距,推荐以字体大小的1.5-2倍作为参考;

段间距,推荐以字体大小的2-2.5倍作为参考。

当选用14px字体时,行间距:21-28px; 段间距:8px-35px

字体颜色设计技巧

Name Description rgb hex color

main

主色调 255,140,26 #ff8c1a

second

辅助色,二级 48,139,232 #308be8

primary

深黑,用户标题,正文 51,51,51 #333333

secondary

二级文字 102,102,102 #666666

hint

说明提示文案 170,170,170 #bbbbbb

disable

用于输入框默认提示 204,204,204 #cccccc

green

用于选中,成功提示 46,189,89 #2ebd59

red

用于价格,警告,强调提示 255,70,20 #ff4614

white

用于反白 255,255,255 #ffffff

link

用于链接色 0,160,255 #00a0ff

null

用于无结果/空态页 192,160,255 #c0c5d0

标题字的颜色,建议使用#333333,可增加可辨识性和层级;

正文字体颜色,保险起见,选用易读性的深灰色,建议选用#333到#666之前的颜色

辅助性的,注释类的文字,则可以选用#999999之类的比较浅的颜色。

发表评论

电子邮件地址不会被公开。 必填项已用*标注