2.2 设计原则
通用一致的设计，可以减少认知负担带来流畅体验，也可以提升设计及开发效率。
搜索场景下的Web内容页涵盖生活各个方面，服务于大众用户，同时横跨多种系统和不同尺寸的设备，稳定直观的体验根基于通用一致的设计。根据一定的标准持续复用，才能让用户从陌生到熟悉，建立习惯与信任，这需要在界面布局，视觉风格、图标寓意、功能文案，交互逻辑等方面的通用一致体验。
通用一致的界面不仅方便于用户，第三方开发者根据自身需求，参考基本设计原则和案例，采用通用的 UI 组件可以提升开发效率，保证页面性能与加载速度。
当然，通用一致并不是绝对的，绝对的统一会让用户感到重复乏味，有时我们需要特殊的样式，给用户有趣、生动，超出预期的愉悦体验。这部分将在高级精致以及智能快捷原则中讲解。
设计案例01：建议控件采用扁平化风格，充分考虑通用性，类似或相同功能，采用同类交互及视觉样式；通用一致的设计可以提升设计质量和效率。
设计案例02：建议控件的尺寸沿用4pt的倍数使用。例如按钮，输入框，图标等控件，沿用统一的节奏和规则，可以让控件更加通用，提升设计和开发效率，减少对不同尺寸选择的纠结与干扰。
设计案例03：建议通常采用通用样式标题栏，尽可能避免自定义布局、高度和图标样式不一致的标题栏，而采用一致的标准，可以避免重复设计，给用户稳定的体验。
设计案例04：同一控件可能应用多种场景，尺寸，也可能对应多种状态。例如图标的设计统一采用几何化正视图风格，根据需要可以灵活变化填充样式，变化中保持形状的统一，能减少用户认知负担，建立信任。
设计案例05：页面布局采用栅格，能够保证页面版块划分沿用一定的规则，各模块通用一致。我们建议采用12列流式栅格，具体规则详见基础规范的栅格部分。
去形式化做减法，突出内容尽可能去掉不必要的装饰和形式，用清晰简洁的设计形式来表达功能、交互及内容。
在页面开发设计中，同一页面展现尽可能多的内容通常不是最佳的设计，克制信息展现的数量，明确信息层次，突出主要内容。用户在搜索相关场景下希望快捷准确的获取相关信息，复杂或过量的信息容易让用户失去耐心，影响用户的使用效率，也会让页面的设计看起来拥挤，影响页面性能和设计品质。
做减法，保证清晰简洁是优质设计区别于普通设计的关键因素之一。
简洁是永远不会过时的设计原则，在AI时代更显重要，简洁的设计不是不考虑功能和内容的复杂性，而是充分理解复杂的信息，对其进行有效分析，区分层级，用简洁清晰的形式来表达。
简洁清晰原则和扁平化设计风格相匹配，具体如下：
- 采用扁平化的图形、按钮或图标，减少不必要的色彩，渐变，材质以及与内容无关的图形元素。
- 保证页面整洁，信息层次区分明确，区块划分明确，减少不同字体及样式。
- 简化信息，尽可能减少不必要的交互和步骤。
设计案例01：减少背景色或背景图对主体内容的干扰，克制使用大面积颜色，控制信息文案的长度，突出主体信息。
设计案例02：尽可能减少不必要的浮层，弹窗打断用户的操作与浏览，弹层应该尽可能简洁容易让人理解，弹层分为模态和非模态，需要用户进行确认或进行选择的可以采用对话框形式，无需用户确认和操作仅用来提示用户的可采用toast形式。
设计案例03：背景简洁、主体突出的图片更能传达主要信息，克制使用不同字体及渐变材质效果
设计案例04：减少内容区域被浮层干扰遮罩，突出主体信息，保证可阅读性，保持页面整体简洁清晰。
设计案例05：注意移动端下拉选择的使用，例如二选一可以采用复选框 （check box） 或 切换按钮（toggle button）。
设计案例06：注意移动端简化下拉交互操作，例如设定提醒日期时，选择日期的交互操作。
设计案例07：选择简洁的布局和版式，注意移动端的页面适配。
设计案例08：注意移动设备不同屏幕密度的字号适配，避免字号使用不当影响信息展现。
设计案例09：注意移动设备不同屏幕密度的行间距适配，默认字体设置。不同设备和操作系统的字体展现效果可能存在差异。
简洁并不等于粗糙没有细节，严谨精细雕琢细节，给用户带来超出预期的愉悦，高品质的体验。
品质感不仅仅适用于品牌范畴，也适用于Web生态中的具体页面，用户对内容和服务做出直观判断往往是通过页面设计细节的好坏，因此好的内容与服务依赖优质的设计。高级精致原则也可以应用在需要用户集中关注单个元素信息时使用，避免大量通用一致信息下找不到重点。
- 避免使用低质量，模糊的图片，图片的选用要与内容紧密结合。
- 高品质的设计取决于配色，图片质量，版式整体设计考虑，更取决于相关细节处理。
- 有品质感的设计更能够深入人心，给用户超出预期的体验，提升用户忠诚度。
设计案例01：简洁的页面也可以看起来高端精致，注意细节处理，如图标、logo、图片的精心选择和修整。
设计案例02：注意边距适配，精心选用图片，以及多张图片的组合搭配。注意图片的比例和构图。
设计案例03：注意图片的质量和清晰度，我们建议图片资源保持图片尺寸至少达到2X屏幕密度下的像素尺寸。同时考虑加载性能，不要直接上传拍照原图，对图片适当进行压缩。
为用户提供智能、自然和及时的信息及交互反馈，流畅的动效、多感官的体验有助于用户理解信息及场景，这也是面向未来设计的基本特征之一。
为用户提供智能、自然和及时的信息及交互反馈，流畅的动效、多感官的体验有助于用户理解信息及场景，这也是面向未来设计的基本特征之一。
控件元素不仅只是静态展现和交互，也可以赋予活力，每一个元素具有变体，变色，缩放，发光，发声等智能特征，利用动效引导功能交互流程，可以让传统的Web更具活力和亲和力。
移动端受制于用户使用场景及屏幕尺寸，用户输入等操作不及鼠标精准，在设计上充分考虑操作上的便捷，优化操作流程，根据场景和用户适配相关的内容与引导，给用户及时清晰的反馈，让体验更加智能便捷。
设计案例01：由于手机键盘区域小且密集，输入困难的同时还易引起输入错误，因此在设计页面时因尽量减少用户输入，对用户输入场景进行引导和智能匹配。
设计案例02：减少用户的操作步骤，智能判断用户的意图，协助用户简化选择提升效率，让复杂的功能体验更加顺畅便捷。
设计案例03：根据用户的使用地点，时间，设备等信息动态推送展现相关内容，例如地图在上下班高峰时段自动展现上下班路况信息、天气信息等。
设计案例04：微动效可以表达功能状态，可以让界面更具吸引力，更加有趣。提供及时的动效反馈（音频，视觉提示等指示功能系统），并让用户了解信息状态；例如下面案例svg图形的动效，形体根据状态需要变换形体，打破静态页面内容的乏味，让页面看起来更加生动智能。
设计案例05：控件元素不仅有静态展现，也可以赋予活力，元素具有动态属性，例如变体，变色，缩放，发光，发声等智能特征，智能快捷的理念可以让传统的Web更具活力和亲和力，利用动效引导功能交互流程。
