作者 | 百度搜索用户体验中心
《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。关注OpenWeb开发者,回复“设计指南”,即可获取已发布资源。
设计原则之高级精致
简洁并不等于粗糙没有细节,严谨精细雕琢细节,给用户带来超出预期的愉悦,高品质的体验。
品质感不仅仅适用于品牌范畴,也适用于Web生态中的具体页面,用户对内容和服务做出直观判断往往是通过页面设计细节的好坏,因此好的内容与服务依赖优质的设计。高级精致原则也可以应用在需要用户集中关注单个元素信息时使用,避免大量通用一致信息下找不到重点。
- 避免使用低质量,模糊的图片,图片的选用要与内容紧密结合。
- 高品质的设计取决于配色,图片质量,版式整体设计考虑,更取决于相关细节处理。
- 有品质感的设计更能够深入人心,给用户超出预期的体验,提升用户忠诚度。
设计案例01
设计案例01:简洁的页面也可以看起来高端精致,注意细节处理,如图标、logo、图片的精心选择和修整。
设计案例02
设计案例02:注意边距适配,精心选用图片,以及多张图片的组合搭配。注意图片的比例和构图。
设计案例03
设计案例03:注意图片的质量和清晰度,我们建议图片资源保持图片尺寸至少达到2X屏幕密度下的像素尺寸。同时考虑加载性能,不要直接上传拍照原图,对图片适当进行压缩。
设计案例之智能快捷
为用户提供智能、自然和及时的信息及交互反馈,流畅的动效、多感官的体验有助于用户理解信息及场景,这也是面向未来设计的基本特征之一。
为用户提供智能、自然和及时的信息及交互反馈,流畅的动效、多感官的体验有助于用户理解信息及场景,这也是面向未来设计的基本特征之一。
控件元素不仅只是静态展现和交互,也可以赋予活力,每一个元素具有变体,变色,缩放,发光,发声等智能特征,利用动效引导功能交互流程,可以让传统的Web更具活力和亲和力。
移动端受制于用户使用场景及屏幕尺寸,用户输入等操作不及鼠标精准,在设计上充分考虑操作上的便捷,优化操作流程,根据场景和用户适配相关的内容与引导,给用户及时清晰的反馈,让体验更加智能便捷。
设计案例01
设计案例01:由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计页面时因尽量减少用户输入,对用户输入场景进行引导和智能匹配。
设计案例02
设计案例02:减少用户的操作步骤,智能判断用户的意图,协助用户简化选择提升效率,让复杂的功能体验更加顺畅便捷。
设计案例03
设计案例03:根据用户的使用地点,时间,设备等信息动态推送展现相关内容,例如地图在上下班高峰时段自动展现上下班路况信息、天气信息等。
设计案例04
设计案例04:微动效可以表达功能状态,可以让界面更具吸引力,更加有趣。提供及时的动效反馈(音频,视觉提示等指示功能系统),并让用户了解信息状态;例如下面案例svg图形的动效,形体根据状态需要变换形体,打破静态页面内容的乏味,让页面看起来更加生动智能。
设计案例05
设计案例05:控件元素不仅有静态展现,也可以赋予活力,元素具有动态属性,例如变体,变色,缩放,发光,发声等智能特征,智能快捷的理念可以让传统的Web更具活力和亲和力,利用动效引导功能交互流程。
Brilliant Open Web
BOW(Brilliant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。
BOW 关注前端,关注Web;剖析技术、分享实践;谈谈学习,也聊聊管理。
关注 OpenWeb开发者,回复“加群”,让我们一起推动 OpenWeb技术的发展!