前言
《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南，目的是提升设计与开发的效率及质量，为广大用户提供优质的用户体验。
Web内容数以千亿涵盖生活各个方面，除了稳定流畅的浏览，优质的内容及服务，也需要高质量的交互及视觉体验。基于百度新使命以及百度搜索开放的生态特征，我们提供适合第三方的设计指南与直观的案例参照。
《Web设计指南》会根据Web生态的发展不断更新优化，但是指南中的设计原则仍然相对稳定，具有持久性。设计原则包括：通用一致、简洁清晰、高级精致、智能快捷，本文将为大家介绍简洁清晰原则。
简洁清晰原则
去形式化做减法，突出内容尽可能去掉不必要的装饰和形式，用清晰简洁的设计形式来表达功能、交互及内容。
在页面开发设计中，同一页面展现尽可能多的内容通常不是最佳的设计，克制信息展现的数量，明确信息层次，突出主要内容。用户在搜索相关场景下希望快捷准确的获取相关信息，复杂或过量的信息容易让用户失去耐心，影响用户的使用效率，也会让页面的设计看起来拥挤，影响页面性能和设计品质。
做减法，保证清晰简洁是优质设计区别于普通设计的关键因素之一。
简洁是永远不会过时的设计原则，在AI时代更显重要，简洁的设计不是不考虑功能和内容的复杂性，而是充分理解复杂的信息，对其进行有效分析，区分层级，用简洁清晰的形式来表达。
简洁清晰原则和扁平化设计风格相匹配，具体如下：
采用扁平化的图形、按钮或图标，减少不必要的色彩，渐变，材质以及与内容无关的图形元素。
保证页面整洁，信息层次区分明确，区块划分明确，减少不同字体及样式。
简化信息，尽可能减少不必要的交互和步骤。
设计案例01
设计案例01：减少背景色或背景图对主体内容的干扰，克制使用大面积颜色，控制信息文案的长度，突出主体信息。
设计案例02
设计案例02：尽可能减少不必要的浮层，弹窗打断用户的操作与浏览，弹层应该尽可能简洁容易让人理解，弹层分为模态和非模态，需要用户进行确认或进行选择的可以采用对话框形式，无需用户确认和操作仅用来提示用户的可采用toast形式。
设计案例03
设计案例03：背景简洁、主体突出的图片更能传达主要信息，克制使用不同字体及渐变材质效果
设计案例04
设计案例04：减少内容区域被浮层干扰遮罩，突出主体信息，保证可阅读性，保持页面整体简洁清晰。
设计案例05
设计案例05：注意移动端下拉选择的使用，例如二选一可以采用复选框（checkbox）或切换按钮（togglebutton）。
设计案例06
设计案例06：注意移动端简化下拉交互操作，例如设定提醒日期时，选择日期的交互操作。
设计案例07
设计案例07：选择简洁的布局和版式，注意移动端的页面适配。
设计案例08
设计案例08：注意移动设备不同屏幕密度的字号适配，避免字号使用不当影响信息展现。
设计案例09
设计案例09：注意移动设备不同屏幕密度的行间距适配，默认字体设置。不同设备和操作系统的字体展现效果可能存在差异。
预览时标签不可点收录于话题#个上一篇下一篇