五个案例简述Web设计原则:通用一致

简介: 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南,目的是提升设计与开发的效率及质量,为广大用户提供优质的用户体验。Web内容数以千亿涵盖生活各个方面,除了稳定流畅的浏览,优质的内容及服务,也需要高质量的交互及视觉体验。

《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南,目的是提升设计与开发的效率及质量,为广大用户提供优质的用户体验。

Web内容数以千亿涵盖生活各个方面,除了稳定流畅的浏览,优质的内容及服务,也需要高质量的交互及视觉体验。基于百度新使命以及百度搜索开放的生态特征,我们提供适合第三方的设计指南与直观的案例参照。

《Web设计指南》会根据Web生态的发展不断更新优化,但是指南中的设计原则仍然相对稳定,具有持久性。设计原则包括:通用一致、简洁清晰、高级精致、智能快捷,本文将为大家介绍通用一致原则。

通用一致原则

通用一致的设计,可以减少认知负担带来流畅体验,也可以提升设计及开发效率。 

搜索场景下的Web内容页涵盖生活各个方面,服务于大众用户,同时横跨多种系统和不同尺寸的设备,稳定直观的体验根基于通用一致的设计。根据一定的标准持续复用,才能让用户从陌生到熟悉,建立习惯与信任,这需要在界面布局,视觉风格、图标寓意、功能文案,交互逻辑等方面的通用一致体验。

通用一致的界面不仅方便于用户,第三方开发者根据自身需求,参考基本设计原则和案例,采用通用的 UI 组件可以提升开发效率,保证页面性能与加载速度。

当然,通用一致并不是绝对的,绝对的统一会让用户感到重复乏味,有时我们需要特殊的样式,给用户有趣、生动,超出预期的愉悦体验。这部分将在高级精致以及智能快捷原则中讲解。

设计案例 01

建议控件采用扁平化风格,充分考虑通用性,类似或相同功能,采用同类交互及视觉样式;通用一致的设计可以提升设计质量和效率。 


img_dbbe49804f5fa265c6d59a5e9b34b037.png


img_7353b78905e6631fba3ab80afdd85a61.png

设计案例 02

建议控件的尺寸沿用4pt的倍数使用。例如按钮,输入框,图标等控件,沿用统一的节奏和规则,可以让控件更加通用,提升设计和开发效率,减少对不同尺寸选择的纠结与干扰。 


img_1898db7ab24a8f7dddede22435e80c7c.png


img_f6fd8093730eeae657d4c0edc5032928.png

设计案例 03

建议通常采用通用样式标题栏,尽可能避免自定义布局、高度和图标样式不一致的标题栏,而采用一致的标准,可以避免重复设计,给用户稳定的体验。 


img_18faa7352aef59027b1f57bc48c84f14.png


img_b3033eeee712bc7feadf4a58cb19f8fd.png

设计案例 04

同一控件可能应用多种场景,尺寸,也可能对应多种状态。例如图标的设计统一采用几何化正视图风格,根据需要可以灵活变化填充样式,变化中保持形状的统一,能减少用户认知负担,建立信任。 


设计案例 05

页面布局采用栅格,能够保证页面版块划分沿用一定的规则,各模块通用一致。我们建议采用12列流式栅格,具体规则详见基础规范的栅格部分。 


img_174a81e5b84179caeccfe7843d703908.png

感谢阅读

喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

相关文章
|
Java 数据库 网络架构
菜鸟之路Day36一一Web开发综合案例(部门管理)
本文详细记录了基于Spring Boot的Web开发综合案例——部门管理功能的实现过程。从环境搭建到功能开发,涵盖数据库表设计、Spring Boot项目创建、依赖引入、配置文件设置以及Mapper、Service、Controller的基础结构构建。文章重点讲解了查询、删除、新增和修改部门信息的业务逻辑实现,遵循RESTful规范设计接口,并通过统一响应结果类`Result`优化前后端交互体验。借助Spring的IoC容器管理与MyBatis的SQL映射,实现了高效的数据操作与业务处理,最终完成部门管理的全功能开发。
592 12
|
XML SQL 前端开发
菜鸟之路Day37一一Web开发综合案例(员工管理)
本文介绍了基于Web开发的员工管理综合案例,涵盖分页查询、条件分页查询、删除员工和新增员工四大功能模块。通过前后端交互,前端传递参数(如页码、每页记录数、查询条件等),后端使用MyBatis与PageHelper插件处理数据查询与操作。代码结构清晰,包括Controller层接收请求、Service层业务逻辑处理以及Mapper层数据访问,并结合XML动态SQL实现灵活的条件查询。此外,新增与删除功能分别通过POST与DELETE请求完成,确保系统功能完整且高效。
463 7
|
存储 前端开发 Java
菜鸟之路Day38一一Web开发综合案例(三)
本文介绍了Web开发中的文件上传与员工信息修改的综合案例,涵盖前端到后端的完整流程。重点讲解了阿里云OSS的集成,包括Bucket创建、密钥获取及SDK使用,并通过Spring Boot实现文件上传功能。同时,详细描述了员工信息查询与修改的操作逻辑,涉及Controller、Service和Mapper层代码实现。最后探讨了配置文件的优化,对比@Value与@ConfigurationProperties注解,展示了如何通过实体类批量注入配置参数,提升代码可维护性与灵活性。
399 1
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
前端开发 机器人 测试技术
【RF案例】Web自动化测试弹窗处理
在进行Web自动化测试时,常会遇到不同类型的弹窗,如ajax、iframe、新窗口及alert/Confirm等。这些弹窗可通过Selenium进行定位与处理。其中,ajax弹窗直接定位处理;iframe需先选中再操作;新窗口类似iframe处理;而alert/Confirm则需特殊方法应对。在Robot Framework中,需先定义并获取窗口后使用特定关键字处理。此外,还有部分div弹窗需在消失前快速定位。希望本文能帮助大家更好地处理各类弹窗。
675 6
【RF案例】Web自动化测试弹窗处理
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`<select>` 和 `<option>`)、文本域(`<textarea>`)、标签解释(`<label>`)、各类按钮(`<button>`)及表单重置功能、无语义布局标签(`<div>` 和 `<span>`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
578 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
672 11
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
625 7
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
423 6
|
UED 存储 自然语言处理
【语言无界·体验无疆】解锁Vaadin应用全球化秘籍:从代码到文化,让你的应用畅游世界每一个角落!
【8月更文挑战第31天】《国际化与本地化实战:构建多语言支持的Vaadin应用》详细介绍了如何使用Vaadin框架实现应用的国际化和本地化,提升用户体验和市场竞争力。文章涵盖资源文件的创建与管理、消息绑定与动态加载、日期和数字格式化及文化敏感性处理等方面,通过具体示例代码和最佳实践,帮助开发者构建适应不同语言和地区设置的Vaadin应用。通过这些步骤,您的应用将更加灵活,满足全球用户需求。
364 0