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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535893.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebP 在减少图片体积和流量上的效果如何?WebP 技术实践分享

作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题。而 WebP技术的出现,为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技…

百度主任架构师谭待:如何让不带团队的程序员负责重大项目?

演讲 | 谭待 整理 | 赵新龙、尾尾 谭待,百度主任架构师、百度搜索公司技术委员会联席主席。主要研究领域在分布式系统和搜索引擎,是百度BVC代理计算和Matrix私有云的主要设计者,两获百度最高奖。主持设计了百度新一代搜索架构,在…

Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多,对Google的动作也比较关注,所以受邀参加了这次的Chrome Dev Summit (CDS)。本文是我在现场做的…

九个案例简述Web设计原则:简洁清晰

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

大型网站HTTPS 实践(一)| HTTPS 协议和原理

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。本文就着重介绍了 HTTPS 协议涉及到的重要知识点和平时不太容易理解的盲区,希望能对大家理解 HTTPS 协议有帮助。百度 HTTPS 性能优化涉及到大量内容…

大型网站HTTPS实践:HTTPS对性能的影响

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS性能优化涉及到大量内容,从前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列的文章将…

PWA将带来新一轮大前端技术洗牌?

作者 | 彭星 编辑 | 尾尾 一、回顾历史:移动时代之初,Web遭遇两大枷锁 Web 在移动时代遭遇两大枷锁1.Web 在移动时代遭遇两大枷锁 当 Web 自信满满,步入移动时代之时,它还没有做好充足的准备。 回顾 2014 到 2015 年那段时间…

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

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。关注OpenWeb开发者,回复“设计指南”,即可获取已发布资源。 设计原则之高级精致 简洁并不等于粗糙没有细节&#x…

Linux系列(一):简介与目录结构

1、Linux简介 1.1、起源 Linux出现于1991年,是由芬兰赫尔辛基大学学生Linus Torvalds和后来加入的众多爱好者共同开发完成 1.2、Linux特点 多用户,多任务,丰富的网络功能,可靠的系统安全,良好的可移植性,…

大型网站的HTTPS实践:基于协议和配置的优化

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS性能优化涉及到大量内容,在前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列的文章将…

Hadoop的安装及配置

PS:最新安装教程请参考Hadoop的安装与配置(设置单节点群集)详细教程 1、Hadoop安装前准备工作: 在开始Hadoop安装与配置之前,需要准备的环境:Linux系统、配置JDK环境变量。 2、安装 我们可以到Apache Hadoop的官网ht…

在 PWA 中使用 App Shell 模型提升性能和用户感知体验

作者|潘宇琪 编辑|Daisy 在构建 PWA 应用时,使用 App Shell 模型能够在视觉和首屏加载速度方面带来用户体验的提升。另外,在配合 Service Worker 离线缓存之后,用户在后续访问中将得到快速可靠的浏览体验。 在实践过…

【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)

写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站。对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长。技术上原理也很简单,在页面加载时加…

MongoDB(二):MongoDB的安装

这里以OSX系统为例,window和linux可以参考https://www.runoob.com/mongodb/mongodb-linux-install.html 1、我们使用 curl 命令来下载安装: # 进入 /usr/local cd /usr/local# 下载 sudo curl -O https://fastdl.mongodb.org/osx/mongodb-osx-ssl-x86_…

Postman接口测试(超详细整理)

常用的接口测试工具主要有以下几种 Postman:简单方便的接口调试工具,便于分享和协作。具有接口调试,接口集管理,环境配置,参数化,断言,批量执行,录制接口,Mock Server, …

【转】AB实验设计思路及实验落地

这篇文章会讨论: 1. 在什么情况下需要做 AB 实验 2. 从产品/交互角度,如何设计一个实验 3. 前端工程师如何打点 4. 如何统计数据,并保证数据准确可信 5. 如何分析实验数据,有哪些数据需要重点关注 6. 附:如何搭建…

【转】mip-semi-fixed 走走又停停

写在前面 MIP 中悬浮元素的特殊情况 其实组件上线已经有一段时间了,最开始看到这个需求是站长提交了一个这中功能的组件过来,不过看过代码立刻就想到了 MIP 页面的特殊性:从结果页打开的 MIP 页面,是嵌套在一个 iframe 之中的。…

【转】百度站长平台MIP引入工具使用心得

MIP引入主动推送流程 对于 MIP 站点改造好了,我们如何提交数据,并且 MIP 提交后,我们能得到哪些数据的反馈,在这里简单的写一篇文章,说一下。 改造 MIP,我们一般是添加了一个二级域名站点进行改造&#x…

Hadoop之HDFS应用

1、通过http://127.0.0.1:8088/即可查看集群所有节点状态: 2、访问http://localhost:9870/即可查看文件管理页面(在3.0.0中在之前的版本中文件管理的端口是50070,替换为了9870端口): ————进入文件系统 ————…

MIP ACCESS细节剖析

什么是 MIP ACCESS MIP ACCESS 由百度 MIP 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中内容,直至用户登录、订阅或付费后才能够查看隐…