作者 | 百度搜索用户体验中心
《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。
前言
《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南,目的是提升设计与开发的效率及质量,为广大用户提供优质的用户体验。
Web内容数以千亿涵盖生活各个方面,除了稳定流畅的浏览,优质的内容及服务,也需要高质量的交互及视觉体验。基于百度新使命以及百度搜索开放的生态特征,我们提供适合第三方的设计指南与直观的案例参照。
《Web设计指南》会根据Web生态的发展不断更新优化,但是指南中的设计原则仍然相对稳定,具有持久性。设计原则包括:通用一致、简洁清晰、高级精致、智能快捷,本文将为大家介绍通用一致原则。
通用一致原则
通用一致的设计,可以减少认知负担带来流畅体验,也可以提升设计及开发效率。
搜索场景下的Web内容页涵盖生活各个方面,服务于大众用户,同时横跨多种系统和不同尺寸的设备,稳定直观的体验根基于通用一致的设计。根据一定的标准持续复用,才能让用户从陌生到熟悉,建立习惯与信任,这需要在界面布局,视觉风格、图标寓意、功能文案,交互逻辑等方面的通用一致体验。
通用一致的界面不仅方便于用户,第三方开发者根据自身需求,参考基本设计原则和案例,采用通用的 UI 组件可以提升开发效率,保证页面性能与加载速度。
当然,通用一致并不是绝对的,绝对的统一会让用户感到重复乏味,有时我们需要特殊的样式,给用户有趣、生动,超出预期的愉悦体验。这部分将在高级精致以及智能快捷原则中讲解。
设计案例 01
建议控件采用扁平化风格,充分考虑通用性,类似或相同功能,采用同类交互及视觉样式;通用一致的设计可以提升设计质量和效率。
设计案例 02
建议控件的尺寸沿用4pt的倍数使用。例如按钮,输入框,图标等控件,沿用统一的节奏和规则,可以让控件更加通用,提升设计和开发效率,减少对不同尺寸选择的纠结与干扰。
设计案例 03
建议通常采用通用样式标题栏,尽可能避免自定义布局、高度和图标样式不一致的标题栏,而采用一致的标准,可以避免重复设计,给用户稳定的体验。
设计案例 04
同一控件可能应用多种场景,尺寸,也可能对应多种状态。例如图标的设计统一采用几何化正视图风格,根据需要可以灵活变化填充样式,变化中保持形状的统一,能减少用户认知负担,建立信任。
设计案例 05
页面布局采用栅格,能够保证页面版块划分沿用一定的规则,各模块通用一致。我们建议采用12列流式栅格,具体规则详见基础规范的栅格部分。
Brilliant Open Web
BOW(Brillant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。
BOW 将依托于【Open Web 开发者】公众号,为大家提供设计、开发、安全等 Web 相关知识和案例。同时,也非常欢迎有志于改变世界的你加入我们!
关注 OpenWeb开发者,回复“加群”,让我们一起推动 OpenWeb技术的发展!