作者 | 百度搜索用户体验中心
《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技术的发展!