高级精致&智能快捷的Web设计原则案例

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

《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技术的发展！