五个案例简述Web设计原则：通用一致

《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南，目的是提升设计与开发的效率及质量，为广大用户提供优质的用户体验。

Web内容数以千亿涵盖生活各个方面，除了稳定流畅的浏览，优质的内容及服务，也需要高质量的交互及视觉体验。基于百度新使命以及百度搜索开放的生态特征，我们提供适合第三方的设计指南与直观的案例参照。

《Web设计指南》会根据Web生态的发展不断更新优化，但是指南中的设计原则仍然相对稳定，具有持久性。设计原则包括：通用一致、简洁清晰、高级精致、智能快捷，本文将为大家介绍通用一致原则。

通用一致原则

通用一致的设计，可以减少认知负担带来流畅体验，也可以提升设计及开发效率。 

搜索场景下的Web内容页涵盖生活各个方面，服务于大众用户，同时横跨多种系统和不同尺寸的设备，稳定直观的体验根基于通用一致的设计。根据一定的标准持续复用，才能让用户从陌生到熟悉，建立习惯与信任，这需要在界面布局，视觉风格、图标寓意、功能文案，交互逻辑等方面的通用一致体验。

通用一致的界面不仅方便于用户，第三方开发者根据自身需求，参考基本设计原则和案例，采用通用的 UI 组件可以提升开发效率，保证页面性能与加载速度。

当然，通用一致并不是绝对的，绝对的统一会让用户感到重复乏味，有时我们需要特殊的样式，给用户有趣、生动，超出预期的愉悦体验。这部分将在高级精致以及智能快捷原则中讲解。

设计案例 01

建议控件采用扁平化风格，充分考虑通用性，类似或相同功能，采用同类交互及视觉样式；通用一致的设计可以提升设计质量和效率。 

设计案例 02

建议控件的尺寸沿用4pt的倍数使用。例如按钮，输入框，图标等控件，沿用统一的节奏和规则，可以让控件更加通用，提升设计和开发效率，减少对不同尺寸选择的纠结与干扰。 

设计案例 03

建议通常采用通用样式标题栏，尽可能避免自定义布局、高度和图标样式不一致的标题栏，而采用一致的标准，可以避免重复设计，给用户稳定的体验。 

设计案例 04

同一控件可能应用多种场景，尺寸，也可能对应多种状态。例如图标的设计统一采用几何化正视图风格，根据需要可以灵活变化填充样式，变化中保持形状的统一，能减少用户认知负担，建立信任。 

设计案例 05

页面布局采用栅格，能够保证页面版块划分沿用一定的规则，各模块通用一致。我们建议采用12列流式栅格，具体规则详见基础规范的栅格部分。 

感谢阅读

喜欢看小编文章的点个订阅或者喜欢！小编每天都会跟大家分享文章，也会给大家提供web前端学习资料。