九个案例简述Web设计原则：简洁清晰

作者 | 百度搜索用户体验中心

《Web设计指南》分为设计原则、基础规范两方面主要内容，同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者，订阅《Web设计指南》。

前言

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

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

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

简洁清晰原则

去形式化做减法，突出内容尽可能去掉不必要的装饰和形式，用清晰简洁的设计形式来表达功能、交互及内容。
在页面开发设计中，同一页面展现尽可能多的内容通常不是最佳的设计，克制信息展现的数量，明确信息层次，突出主要内容。用户在搜索相关场景下希望快捷准确的获取相关信息，复杂或过量的信息容易让用户失去耐心，影响用户的使用效率，也会让页面的设计看起来拥挤，影响页面性能和设计品质。

做减法，保证清晰简洁是优质设计区别于普通设计的关键因素之一。

简洁是永远不会过时的设计原则，在AI时代更显重要，简洁的设计不是不考虑功能和内容的复杂性，而是充分理解复杂的信息，对其进行有效分析，区分层级，用简洁清晰的形式来表达。

简洁清晰原则和扁平化设计风格相匹配，具体如下：

采用扁平化的图形、按钮或图标，减少不必要的色彩，渐变，材质以及与内容无关的图形元素。
保证页面整洁，信息层次区分明确，区块划分明确，减少不同字体及样式。
简化信息，尽可能减少不必要的交互和步骤。

设计案例 01

设计案例01：减少背景色或背景图对主体内容的干扰，克制使用大面积颜色，控制信息文案的长度，突出主体信息。

设计案例 02

设计案例02：尽可能减少不必要的浮层，弹窗打断用户的操作与浏览，弹层应该尽可能简洁容易让人理解，弹层分为模态和非模态，需要用户进行确认或进行选择的可以采用对话框形式，无需用户确认和操作仅用来提示用户的可采用toast形式。

设计案例 03

设计案例03：背景简洁、主体突出的图片更能传达主要信息，克制使用不同字体及渐变材质效果

设计案例 04

设计案例04：减少内容区域被浮层干扰遮罩，突出主体信息，保证可阅读性，保持页面整体简洁清晰。

设计案例 05

设计案例05：注意移动端下拉选择的使用，例如二选一可以采用复选框（check box）或切换按钮（toggle button）。

设计案例 06

设计案例06：注意移动端简化下拉交互操作，例如设定提醒日期时，选择日期的交互操作。

设计案例 07

设计案例07：选择简洁的布局和版式，注意移动端的页面适配。

设计案例 08

设计案例08：注意移动设备不同屏幕密度的字号适配，避免字号使用不当影响信息展现。

设计案例 09

设计案例09：注意移动设备不同屏幕密度的行间距适配，默认字体设置。不同设备和操作系统的字体展现效果可能存在差异。

Brilliant Open Web
BOW（Brillant Open Web）团队，是一个专门的Web技术建设小组，致力于推动 Open Web 技术的发展，让Web重新成为开发者的首选。

BOW 关注前端，关注Web；剖析技术、分享实践；谈谈学习，也聊聊管理。

关注 OpenWeb开发者，回复“加群”，让我们一起推动 OpenWeb技术的发展！