网页UI设计的原则和规范
网页UI设计原则与规范
前端网页设计的参考标准(PC端),要使web页面看起来美观,就需要从网页尺寸、字体、颜色、间距等方面遵循一定的规范。
对每一个前端开发者来说,如果没有 UI 设计师出图,仅凭自己写一个好看的网页是一件很让人头疼的事情。因此本文从初学者的角度出发,总结一些设计规范要点,作为近段时间学习的温故总结。
我本身是一名前端开发者,因为前段时间写的项目被客户吐槽颜值欠佳,故请教了一些 UI 设计师,并查阅了许多资料和教程,最终整理了一份 PC 端网页设计的参考标准。可能公司不同,面向客户群体不同,大家设计习惯也不尽相同。这里写的只是我个人的参考标准,因此下面提到的规范或标准只是一种方法论,在具体工作中还是要灵活运用。
本文大致分为 7 个模块来介绍,未来随着经验的积累、学习的深入,还会更新。
- 网页尺寸
- 网页文字
- 网页留白
- 颜色规范
- 图片规范
- 设计原则
- 组件使用原则
接下来逐一展开,可先查看思维导图,有一个宏观的了解。
一、网页尺寸
制作网页时我们选用的分辨率是 72 像素/英寸,使用的画布尺寸 1920px * 1080px。但并不代表我们可以在整个画布上作图。
网页的布局主要有两种:居中布局和左右布局。布局不一样使设计的空间也不相同。
1. 居中布局
居中布局一般分为顶部导航和主内容区两部分。
顶部导航:承载的是品牌信息与整个网站的结构信息,明确的告知我们网站里最主要的几块内容。 通常放置于页面的顶端,从左自右依次为:LOGO、一级导航项、辅助菜单(用户、设置、通知等)。
- 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。
- 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。
- 顶部导航高度 H(header)的范围计算公式为:48 + 8n(n 是自然数)。
主内容区:用于网站内容的展示。 通常内容区域设置为固定尺寸 1200px(或 1000px ~ 1400px 区间),整个页面排版稳定,不受用户终端显示器影响。
上下级的结构符合用户上下浏览的习惯,也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率,但在纵向空间上会有一些牺牲。此外,由于导航栏水平空间的限制,不适合那些一级导航项很多的信息结构。
上下布局的做法是对两边留白区域进行最小值 M(Margin) 的定义,当留白区域到达限定值之后再对中间的主内容区域 W(Weight)进行动态缩放。
主内容区 W 尺寸常用的有 1200px、1190px、1168px、1152px、1000px、960px。 两边留白区域最小值 M 常用尺寸有24px、16px、0px。 这里说的只是一般常用的动态布局参数,实际设计中一套完美的方案需要设计师具备前端视角、平面构图视角以及交互视角,并且依据所在团队产品规范来综合决定。
以 W = 1152px , M = 24px 为例,为在响应式方面保证更好的预览效果,我们在主内容区外面增加了 24px 的边距, 避免屏幕尺寸在低于 1152px 的时候内容贴边, 于是需要将主内容区域最大宽度改为 1200px,再增加 24px 的内边距 。
注:部分 B 端产品不考虑浏览器范围缩小低于 1000px 时的动态布局情况;部分B端产品考虑浏览器范围缩小低于 1000px 时移动设备上的动态布局情况。
页脚:Footer(页脚)也是展示页中非常重要的一部分,包含的信息内容为:实用导航,语言选择,社交链接,帮助和支持,版权和隐私声明等。 在页面的最底部。并且如果没有特殊需求,不建议设置成固定在显示器的底部,否则会浪费纵向空间。
2. 左右布局
常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。
- 顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。
- 顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。
- 顶部导航高度 H(header)的范围计算公式为:48 + 8n(n是自然数)。
- 侧边导航宽度 S(sidebar)的范围计算公式:200 + 8n(n是自然数)。
左右布局分两类:
顶部-侧边布局-通栏:同样拥有顶部导航及侧边栏,和上下布局的区别是两边未留边距,多用于应用型的网站。
侧边布局:侧边两列式布局。页面横向空间有限时,侧边导航可收起。
侧边导航在页面布局上采用的是左右的结构,一般主导航放置于页面的左侧固定位置,辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应,能提高横向空间的使用率,但是整个页面排版不稳定。侧边导航的模式层级扩展性强,一、二、三级导航项目可以更为顺畅且具关联性的被展示,同时侧边导航可以固定,使得用户在操作和浏览中可以快速的定位和切换当前位置,有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。
二、网页文字
网页中字体也是有使用规范的,我们这里考虑主流的 PC 端屏幕尺寸(1920px*1080px分辨率)。
先看某个网页的规范:
下面具体介绍下网页文字应该遵守的设计规范。
1. 字体
中文建议:微软雅黑 英文建议:arial
最多使用三种混搭,优先使用各操作系统默认的字体。如果指定其他字体,要注意版权问题。
2. 字号
正文:12px ~ 18px 之间 12px 适用于突出性的日期、版权等注释性内容; 14px 适用于非突出性的普通正文内容; 16px 或 18px 适用于突出性的标题内容。 英文可偏小:10px ~ 16px 导航栏字体:14px ~ 18px 区间,禁用加粗 整站文字:12px ~ 36px 区间
根据实际情况可以调整,但要使用偶数字号。
层次的区别,可以改变字体颜色或加粗来体现。
3. 间距
相邻两个文字的间距,其实不需要太过介意,除了特殊的需求之外,都可以使用默认数值的间距。
行间距:字体大小的 1.5 ~ 2 倍; 段间距:字体大小的 2 ~ 2.5 倍。
例如:当用 14px 的字体时,行间距(line-height):21px ~ 28px;段间距(margin):28px ~ 35px。
4. 颜色
主文字颜色,建议使用公司品牌的 VI(视觉识别 Visual Identity)颜色,可提高公司网站与公司 VI 之间的关联,增加可辨识性和记忆性。
正文字体颜色:#333333 ~ #666666 之间的颜色 辅助性、注释类的文字:#999999 等比较浅的颜色
如果对颜色驾驭能力比较强,也可以选用偏公司 VI 颜色的深色作为正文字体颜色或者辅助性文字颜色。 例如:公司的品牌色是蓝色,那么正文字体就可以选用偏蓝色的深色。 这样处理之后,文字就带有了环境色,网站整体色调将更加和谐。
5. 文字块区域
避免大面积的纯黑字体。
文字块视情况可以用 1px 虚线框围起来,虚线框颜色用 RGB(0,0,0,0.15)。
border: 1px dashed rgba(0,0,0,0.15);
三、网页留白
1. 8倍数原则
利用 8 的倍数来规定页面中元素(按钮、输入框、图片等)的尺寸及各自间距的大小。 即任何需要自定义的长、宽,margin 和 padding 都应该是 8 的倍数。
查看大图
很多人虽然理解要用原则约束尺寸,但还是会产生疑问,为什么是 8,不是 6、10 或者其他数字?
据统计,使用中后台系统的用户的主流分辨率主要为 1920、1440 和 1366,个别系统还存在 1280 的显示设备。主流的屏幕尺寸大部分都是 8 的整数倍数。即使某些屏幕边长像素不是 8 的倍数,在设计中仍然可以尽量做到自定义元素的长、marging,以及 padding 都是 8 的倍数来维持设计的一致性。
2. 间距一致性
田字形布局时,中间十字间距要一致。 上下、左右要对称统一。
特殊情况下,「竖」可以比「横」宽(符合中国传统美学)。
3. 组件留白
表格的外边间距用 16px,其他组件 8px。 可参考 Markdown。
四、颜色规范
1. 颜色特性
不同行业一般有自己行业的色彩。 例如: 金融行业网站:红色或者金黄色 环保行业网站:大多喜欢绿色 家具行业网站:白色 企业展示网站:蓝色
具体参考比较知名的几个网站。
2. 背景色
背景色一般采用清淡素雅的色彩,避免采用复杂的图片作为背景色,同时背景色要与文字的色彩对比强烈一些。
3. 色彩数量
一般控制在 3 ~ 4 种色彩以内,通过调整色彩的各种属性来产生变化。
常用的网页设计配色:同色系、邻近色、类似色、中差色、对比色。
如果是新手,推荐6条网页配色原则:
- 需要配色的是你的画布,而不是你的图片
- 选择简单的灰色作为你网站的基调
- 只选择一种颜色突出显示
- 如果有疑问,请使用蓝色
- 给你的高亮色增加变化
- 尽量不要使用颜色选择器右上角的颜色
4. 常用搭配
蓝白橙: 蓝为主调。白底,蓝标题栏,橙色按钮或 icon 做点缀。
绿白兰:绿为主调。白底,绿标题栏,兰色或橙色按钮或 icon 做点缀。
橙白红: 橙为主调。白底,橙标题栏,暗红或桔红色按扭或 icon 做点缀。
暗红黑:暗红主调。黑或灰底,暗红标题栏,文字内容背景为浅灰色。
万能色:黑白灰是万能的,可以跟任意一种色彩搭配。当你为某种色彩的搭配苦恼的时候,不防试试用黑白灰。
5. 颜色的禁忌
避免使用单色,纯度很高的单一色彩容易造成视觉疲劳。
忌脏:背景与文字内吝对比不强烈,灰暗的背景令人沮丧。
忌纯:艳丽的纯色对人的刺激太强烈杭议,缺乏内涵。
忌跳:再好看的颜色,也不能脱离整体。
忌花:要有一种主色贯穿其中,主色并不是面积最大的颜色,而是最重要,最能揭示和反映主题的颜色,就像领导者一样,虽然在人数上居少数,但起决定作用。
忌粉:颜色浅固然显的干净,但如果对比过弱,整得苍白无力了,就像病夫一样无可救药。
蓝色忌纯,绿色忌黄,红色忌艳。
6. 推荐的配色工具网站
还可以参考几个不错的配色工具网站(排名分先后):
- 色卡生成类:
- Adobe Color CC 这款是 Adobe 官方出品的配色工具,里面有很多配色的模式,比如单色系,三元色,互补色等,还能自己通过调节色轮选择配色方案。
- Palettable 进入网站它会随机推荐给你一个颜色,你可以选择喜欢(快捷键 L)或不喜欢(快捷键按 D),不喜欢的话,就会再推荐一个新的。选择喜欢的话,网站会继续推荐颜色来与它搭配,如此进行下去,就可以得到一个配色色卡了,而且里面的颜色都是你喜欢的。
- Color Scheme Designer 这个配色工具是国人翻译的一个外国工具网站,原网站叫 Paletton。可以选择多种颜色搭配模式,并且能够预览生成的网页效果。
- 色卡选择类:
- Color Hunt 网站实时更新不同的配色方案,并会按照受欢迎程度排列。
- Flat UI Colors 这个网站提供了多种主流 UI 配色方案,特别是扁平化配色。
- 网页设计常用色彩搭配表《配色表》 这个网站也是国人整理的小工具,通过选择分类名,跳转出推荐的颜色组合搭配。
- 优秀网站参考:
- Reeoo 通过颜色搜索,为用户提供 APP,网页设计,平面设计,书籍设计,ICON 等精彩案例。
五、图片规范
图片是网页设计中不可缺少的元素,它于文字和色彩并称为网页三大语言。
1. 首图
首图最好只用高清图片。
2. 图片展示
在展示多张图片的时候,要保持图片的统一性、色调的统一性、尺寸的统一性(最好数值都为偶数)。
3. 图片尺寸
需要全屏显示的图片,宽度尺寸严格设计为 1920px。 但是值得注意的是,图片内容的有效范围不能超过网页内容的有效范围,控制在 1200px 以内,以免遇到小屏设备时显示不全,而造成信息遗漏。
六、设计原则
这里的设计原则主要是参考了蚂蚁金服的 PC 设计规范,不做搬运工,仅列出几个重要的点,详情参考原文。
1. 亲密性
如果信息之间关联性越高,它们之间的距离就应该越接近;反之,则它们的距离就应该越远。
纵向间距关系: 通过「小号间距(8px)」、「中号间距(16px)」、「大号间距(24px)」这三种规格来划分信息层次。
基础间距:8 纵向间距的加减:y = 8 + 8 * n(n 是自然数)
横向间距关系: 为了适用不同尺寸的屏幕,在横向采用「栅格布局」来排布组件,从而保证布局的灵活性。 需要注意的是,在一个组件内部,元素的横向间距也应该有所不同。
2. 对齐
文案类对齐: 标题和正文左对齐,使用了一个视觉起点。
表单类对齐: 冒号对齐(右对齐)。
数字类对齐: 为了快速对比数值大小,建议所有数值取相同有效位数,并且右对齐。
3. 对比
主次关系对比、总分关系对比、状态关系对比。
详情见蚂蚁金服的 PC 设计规范。
4. 重复
重复元素可以是一条粗线、一种线框,某种相同的颜色、设计要素、设计风格,某种格式、空间关系等。
详情见蚂蚁金服的 PC 设计规范。
5. 直截了当
需要在哪里输出,就要允许在哪里输入。 不要为了编辑内容而打开另一个页面,应该直接在上下文中实现编辑。
详情见蚂蚁金服的 PC 设计规范。
6. 足不出户
能在这个页面解决的问题,就不要去其它页面解决。
详情见蚂蚁金服的 PC 设计规范。
7. 简化交互
如果用户鼠标移动距离越少、对象相对目标越大,那么用户越容易操作。
通过运用上下文工具(即:放在内容中的操作工具),使内容和操作融合,从而简化交互。
详情见蚂蚁金服的 PC 设计规范。
8. 提供邀请
在交互之前给出反馈,解决易发现性问题。
详情见蚂蚁金服的 PC 设计规范。
9. 巧用过渡
在交互期间为用户提供视觉反馈。
详情见蚂蚁金服的 PC 设计规范。
10. 即时反应
在交互之后立即给出反馈。
详情见蚂蚁金服的 PC 设计规范。
七、组件使用原则
1. 面包屑
层级过深时,建议做隐藏处理,页面显示保持在三级以内,最多不宜超过五级。
尽可能不使用面包屑,尤其是当前页面的导航能清晰的告诉用户他在哪里时。
2. 下拉框
选项不多的下拉框,可以用多选框代替。
3. label标签
不要直接用 label,加个底纹可能更好看(少的情况下)。
4. button按钮
必要的时候加个图标。 过渡 loading 视情况可以放在按钮上。
5. charts图表
图例不要在右边竖着,放在上面偏右横排。 有标题的话放在中间横排。
6. 其他组件
详情见蚂蚁金服的 PC 设计规范。
参考文献
- 蚂蚁金服pc设计规范
- B端网页设计规范全方位汇总
- UI设计规范 - 尺寸和文字规范
- UI设计规范 - 颜色和图片规范
- 6条网页设计配色原则,让你秒变配色高手
推荐阅读
-
iOS 客户端 UI 界面设计原则和规范
-
35 岁实现财务*,腾讯程序员手握2300万提前退休?-1000万房产、1000万腾讯股票、加上300万的现金,一共2300万的财产。有网友算了一笔账,假设1000万的房产用于自住,剩下1300万资产按照平均税后20-50万不等进行计算,大约花上26-60年左右的时间才能赚到这笔钱。也就是说,普通人可能奋斗一辈子,才能赚到这笔钱。在很多人还在为中年危机而惶惶不可终日的时候,有的人的35岁,就已经安全着陆,试问哪个打工人不羡慕?但问题是有这样财富积累必然有像样的实力做靠山。没有人可以不劳而获。 看到这里,肯定有人说,那么对于普通人来说,卷可能真就成了唯一的出路。但是卷也有轻松的卷,“偷懒”的卷法,对于程序员而言,刨除掉一时无法改掉的开会传统占用的大部分时间,如何把有限的时间和精力放在真正重要的架构设计、需求设计上,而不是重复的造*,编码、改bug、手动测试。因此在科技改变生活的今天,学会使用AI工具成为程序员们的必备技能。 以全栈式全自动的软件开发工具飞算SoFlu软件机器人为例,作为全球首款面向微服务架构设计和最佳实践的软件机器人,SoFlu软件机器人改变了原来手工编码的作业模式,通过可视化拖拽方式以及参数配置就能实现等同于编写复杂代码的业务逻辑,在设计业务逻辑时就完成了微服务应用开发,做到“业务即图,图即代码”,实现“软件开发,十倍提效”。 而作为飞算SoFlu软件机器人的一个重要组成部分,FuncGPT(慧函数)支持所有类型函数创建。通过自然语言描述Java函数需求,实时生成高质量、高可读性的Java函数代码。生成代码可直接复制到IDEA,或一键导入Java全自动开发工具函数库。 FuncGPT(慧函数)具有五大核心能力: ● 自然语言:通过自然语言即可生成函数,降低软件开发门槛。 ● 秒级函数开发:全自动秒级开发函数,秒级完成,效率千倍提升。 ● 一站式函数开发应用:函数生成即可直接应用,效率、安全有保障。 ● 质量可靠:生成的函数代码符合业界规范、具备良好的可读性,符合最优解。 ● 灵活生成:可以根据开发人员的具体需求生成并支持调整和修改。 以“将文件流转换为File对象”这个需求为例,以下是FuncGPT(慧函数)秒级生成的代码: / 类名:FileConverter // 函数名:convertStreamToFile // 函数功能:将文件流转换为File对象 // POM依赖包:无 import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; public class FileConverter { /** * 将文件流转换为File对象 * @param inputStream 文件流 * @param filePath 文件路径 * @param fileName 文件名 * @return 转换后的File对象 * @throws IOException 如果发生I/O异常 */ public static File convertStreamToFile(InputStream inputStream, String filePath, String fileName) throws IOException { File file = new File(filePath + File.separator + fileName); // 创建File对象 try (FileOutputStream outputStream = new FileOutputStream(file)) { // 创建文件输出流 byte buffer = new byte[1024]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { // 从文件流读取数据并写入文件 outputStream.write(buffer, 0, bytesRead); } } return file; // 返回转换后的File对象 } } // 函数示例 // 将文件流转换为File对象示例 // 入参:inputStream,文件流 // 入参:filePath,文件路径 // 入参:fileName,文件名 // 出参:file,转换后的File对象 // 调用示例: // InputStream inputStream = new FileInputStream("example.txt"); // String filePath = "C:\\Users\\User\\Documents"; // String fileName = "example.txt"; // File file = FileConverter.convertStreamToFile(inputStream, filePath, fileName); // System.out.println(file.getAbsolutePath); // 输出结果:例如,将文件流转换为File对象后,文件的绝对路径为:C:\Users\User\Documents\example.txt // 则输出结果为:C:\Users\User\Documents\example.txt 通过分析,不难发现以上代码:
-
PCB 工艺规范和 PCB 设计安全原则
-
hadoop 的架构思想和设计原则
-
Hadoop 技术内行对 MapReduce 架构设计和实施原则的深刻理解 pdf 下载
-
开放平台的安全认证和授权原则与实践》:如何设计安全的 API 网关
-
开放平台的安全认证和授权原则与实践》:如何设计安全的 API 网关
-
⭐️C# Zero to Beginner ⭐️|带你了解编程中的 -23 种设计模式和六种设计原则。
-
像首席技术官一样思考:如何高效管理 30 人的研发团队?-管理越多越轻松。好的研发团队,应该是上拨下用,即下级对上级的向上管理;而不是反过来,总是向下管理,甚至是 CTO 做经理的事,经理做工程师的事,工程师最终会被当成实习生。如果是这样,就会越管越累,不仅团队无法成长,而且团队整天很忙还效率低下,问题一大堆。 有这样一个小故事:一位高级经理下班后帮忙倒垃圾,结果被老板训斥了一顿。这就好比首席技术官做了实习生自己该做的事。事情本身没有对错之分,只是从不同的角度有不同的理解。 古人云:"用人不疑,疑人不用"。在面对自己的研发团队时,应该相信他们能做好,授权一线开发人员充分发挥专业特长,不要限制他们的工作。但在相信他们的同时,也要进行二次确认,始终秉持 "我相信,但我要确认 "的原则和严谨的精神。因为每个人都会犯错和疏忽,通过发挥团队的智慧,团队犯错的机会就会大大减少。比如回归测试、代码审查、开发演示、变更审批等等。 如前所述,每个人都难免会犯错。但作为管理者,你所设计和商定的流程不能出错。管理者的每一个决定和沟通都应该经过深思熟虑。就像红绿灯的交通设计,某辆车不小心闯红灯可能会扣分,但红绿灯的设计一定要正确、人性化、统一。再比如,开发人员可能会因为疏忽大意写出 bug,但研发流程的设计和上线流程的发布不能有任何差错。因此,流程体系的设计,一方面要结合当前团队规模、业务特点和需要重点解决的问题来设计,另一方面也要在人员防错、效率提升、发挥团队集体智慧等维度进行综合考量。应该站在更高更抽象的角度去思考,不断思考一个倍受欢迎的园区应该如何设计,思考一个灵动、经典、永恒的建筑应该遵循怎样的模式,思考一个成功、优秀、卓越的研发团队应该需要怎样的流程和制度。 最后,反馈很重要。向上汇报很重要,向下反馈也很重要。能够保持顺畅的双向反馈和闭环管理,对研发团队的协作和沟通有着非常明显的积极作用。在向上汇报方面,要培养团队在正式汇报、会议汇报、私下沟通、书面总结、非正式场合等方面的沟通能力,提醒下属报喜也要报忧。凡事先记录,再跟进,最后反馈。反馈很重要,主动汇报更难得。 另一方面,同时也不要忽视向下反馈。好的爱,是双向的。团队也是如此,没有严格的上下级之分,只是分工和角色不同而已。作为管理者,不必总保持一种 "神秘感",让人 "捉摸不透 "才是牛。当团队做得好或有人做得好时,要记得在公开或私下场合给予肯定和赞许。业务有增长、业绩有提升时,别忘了给团队一些鼓励,或者安排一次下午茶或聚餐。在例会或正式会议上,也可以同步向大家传达一些重要信息和高层指示。"欲速则不达,欲远则同行"。 当向上汇报、向下反馈的沟通闭环形成后,同时结合前面研发过程的管理闭环,双管齐下,就能形成良性循环。如此反复,持之以恒,优秀卓越的研发团队,必将呈现。 能力、产出和效率 接下来,继续重复关于能力、产出和效率的话题。 站在不同的角色,以及一个企业经营、生存和发展所需要的基础上,我把研发生产力分为三个层次,分别是:一线员工关心的研发能力、管理层关心的软件产出和操作人员关心的企业生产效率。简单概括就是:既要把工作做好,又要能出成果,还要能帮企业赚钱。
-
什么是可用性测试?有效性(Effectiveness)-- 用户完成特定任务和实现特定目标的正确性和完整性程度;效率(Efficiency)-- 用户完成任务的正确性和完整性程度与所用资源(如时间)之比;满意度(Satisfaction)-- 用户在使用产品时的主观满意度和接受程度。 2.如何获得可用性? 可以参考以下原则:Gould、Boies 和 Lewis(1991 年)为以用户为中心的设计定义了 4 个重要原则: 早期以用户为中心:设计者应在设计过程的早期就努力了解用户的需求。 综合设计:设计的所有方面都应同步发展,而不是按顺序进行。使产品的内部设计始终与用户界面的需求保持一致。 早期和持续测试:当今唯一可行的软件测试方法是经验主义方法,即如果实际用户认为设计可行,该设计就是可行的。通过在整个开发过程中引入可用性测试,用户就有机会在产品推出之前对设计提出反馈意见。 迭代设计:大问题往往掩盖了小问题的存在。设计人员和开发人员应在整个测试过程中对设计进行迭代。 3...什么是可用性测试? 可用性测试是根据可用性标准对图形用户界面进行的系统评估。 可用性测试是衡量用户与系统(网站、软件应用程序、移动技术或任何用户操作设备)交互时的体验质量。4.如何进行可用性测试? l 实验室实验