小助手科技_小程序定制开发图片

小助手科技_小程序定制开发图片

小助手科技_小程序定制开发图片

小助手科技_小程序定制开发图片

小助手科技_小程序定制开发图片

Web UI设计规范

作者: 小助手科技
来源: www.l-helper.com
时间: Sep 8, 2021
当前位置:  小助手科技 > 资讯 > Web UI设计规范

为确保公司所开发的软件产品界面风格的统一与一致性,明确 UI 设计师在进行界面设计时所需要遵循的准则和方法、 界面中各个元素的规格及要求,确保 web 页面在风格、结构和功能上的基本统一,提高工作效率,便于团 队合作开发,特制定此 UI 设计规范。此规范不具有唯一性,不是最终版本,文档中部份规范可根据实际项目情况调整。 

1. 颜色

1.1  应用原则

整体色彩不宜超过3种,并遵循对比原则,突出色彩层次感,除非特殊场合,杜绝使用对比强烈,让人产生极度不舒适体验的颜色,整个界面色彩尽量少使用类别不同的颜色。

1.2  颜色代码标准

在 CSS 中,所有颜色都以16进制色值来进行书写,如:#a0a0a0。

1.3 界面色彩 

2. 字体

2.1  字体的选择与字体大小

2.1.1 字体使用原则

字体以不超过2种字体为准,特殊情况除外

中文采用标准字体:“宋体”、“微软雅黑”,英文采用“Arial”或“verdana”,尽量不使用特殊字体(如 隶书、草书等,特殊情况、广告图片中可以使用图片替代),保证用户使用起来显示都很正常。

标题字体以“微软雅黑”为主,“宋体”为辅的使用原则,用不同的字重以达到不同的效果。

2.1.2 字体大小的选择

字体大小号的选择以 12px、14px、16px 等偶数字体大小为准。

另外所有控件尽量使用大小统一的字体属性,除了特殊提示信息,加强显示等列外情况。 

菜单标题字体大小:最小值14px,最大值16px。

正文标题字体大小:最小值24px,最大值32px。

2.2 字体排版样式

2.2.1 行距

标题:取默认行距;正文:取2倍行距,如下:

Font-size :12       line-height:24px

2.2.2 间距

取字体默认间距,特殊情况除外。

2.2.3 文字与表格/边框的边距 

文字在页面中的 leftright 方向对齐时,与边框或表格的距离最小为 10px,最大以不超过 20px 为准,如果在特殊版面情况下,可再适当调整。

文字在页面中的 topbottom 方向对齐时,文字与其 top 边距最小边距为 0.5 倍文字高度,或者 采取 topbottom 方向居中对齐的方式。

3. 图形图标

 图形图标包括图片、按钮、图标等, 应遵循常用标准,杜绝标新立异的让人无法理解的图形图标。

3.1 系统发送提示信息分类展示给用户,不同性质图标分类使用,分类有:

警告信息

禁止信息

操作成功信息

操作失败信息

错误信息

3.2 图标尺寸

图标尺寸以偶数为主,如:16px,32px…..

为保证图标显示效果,图标最小尺寸为14px,最大不超过48px。

3.3 图片格式

原则上使用png/jpg/gif格式。滚动轮播图片则使用png/jpg格式

图片文件命名统一使用如:

 banner_001.png / banner_001.jpg,其中“001”代表图片的顺序号

如需对统一图片不同尺寸的使用,可对命名进行区分:

 banner_001_01.png,banner_001_02.png……

3.4 图片文件大小

为保证速度,图片大小以保证图片质量的前题下越小越好。

图片大小上限以 100kb 为准,超出 100kb 的,可考虑分成多张图片显示。

3.5 图片尺寸

以不超过最大屏幕显示为准,如在 Web 页面设计中考虑会最大显示为 1920×1080,则图片的最大宽度不要超过 1920px

在制作图片时,图片尺寸单位统一以像素 (px) 为单位。 

3.6 图片分辨率

图片分辨率统一为 72 像素/英寸。 

4. 布局

目前显示器分辨率主要有 

16:9  

1920×1080 

1600×900 

1366×768 

16:10  

1920×1200

1680×1050

1440×900 

4:3 的

1024×768 

为了更好的适应不同的宽度,在布局时以自适应宽度为主。

最小显示宽度统一为 980px。

一个完整的web页面必须由以下三部分构成:

头部区域header 、主体区域main、底部区域footer, 有时出于布局需要,在“Header”下面还会加上用于页面功能导航“Menu”。

Header 区域无menu时,高度一般设置40-60px。

Header 区域有menu时,高度设置到50-80px,特殊情况下,可适当调整。

4.1 菜单 menu 布局结构 

主菜单数目不应太多,以单行布置为准。

菜单结构以:单行式、下拉式、树形目录式为主,菜单前的图标以 24px 为基准,可进行大小调节。

主菜单的宽度要做到基本接近,字数最好不多于 4 个,不少于 2 个。

菜单深度层级要求控制在三层以内。
下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列。 

4.2 边距

为避免页面元素紧贴边沿的情况发生,WEB 页面和其中的表格都应该设定边距,最小边距值为 “10px” 

4.3 对齐方式

表格 表格内部文字及数据,都以左对齐为准。

表格内内容在左对齐时应当与左边表格边距保持至少 10px 的位置。

表格各个单元格宽度的设置应采用百分比方式来进行,特殊情况按固定值处理。 

图片 以居中或左对齐为准,同一内容区域内的图片要做到大小统一,对齐方式统一。 


5. 其他注意事项

命名一律用小写,用:“_”连接

尽量用英文,如需要用到拼音方式的需要完整的拼音方式书写

不缩写,除非一看就明白的单词

尽量用常见的的英文表达如:

消息message 

浮框 popover

单选框 Radiobox    

复选框 Checkbox    

上传 Upload













上一篇: 喜讯!祝贺小助手科技高分通过国高专家评审

想了解更多?现在就开始免费体验

请您留言
深圳市小助手科技有限公司
0755-82494862
小助手科技_姓名图片
小助手科技_电话图片
小助手科技_邮箱图片
类型咨询类型
小助手科技_类型图片
services@l-helper.com
深圳市福田区泰然八路18号安华工业园6栋705室
QQ交谈 QQ交谈
友情链接:
Copyright 2014-2020 深圳市小助手科技有限公司-版权所有
ICP备案号:粤ICP备15072167号-1