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

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

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

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

通用一致原则

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

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

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

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

设计案例 01

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

设计案例 02

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

设计案例 03

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

设计案例 04

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

设计案例 05

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

感谢阅读

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ThoughtWorks

DAY-2 刘冉孙弘《性能测试问题与思考》

演讲题目:《 性能测试问题与思考》 【演讲摘要】 持续集成早已成为了敏捷开发中不可缺少的一部分,不过持续交付还是很难在实际开发工作中使用起来,特别是对于有G...

3349
来自专栏web前端教室

2018年的四大热门VueJs项目

从我个人主观的讲课与开发体验来讲,我更喜欢VueJs,因为相对于ReactJs来比较,vue的许多开发细节都更简练,更贴近业务逻辑,下面是github上的十个比...

761
来自专栏无原型不设计

如何将原型设计的优势发挥到淋漓尽致?

原型设计在整个产品阶段中的存在,绝非偶然。它能最快最准确的从用户那里获取产品信息的相关反馈。现如今,几乎没有任何一家产品公司能够完全不采用原型设计。特别是伴随...

2785
来自专栏web前端教室

学习前端的起点

今天有同学问我,“零基础应该先从哪学啊”? 这个问题很好回答,“先从HTML,CSS,JS”,开始学起。 那么接下来会有第二个总是,“HTML或JS从哪开始学啊...

1848
来自专栏开源优测

从龙套到跑路:自动化测试入门

目标 首先要定义自动化测试的目标是什么? 在笔者的企业实践中,给自动化测试明确了两个目标: 主动或被动方式触发主业务流全流程覆盖验证(应用于大规模持续集成验证)...

3585
来自专栏ytkah

微信小程序可以转发给微信好友了

  微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅。同时开放了微信运动步数、背景音乐播放等更多基础能力。小程序可以在自己的页面上放置转发按钮,用户...

3204
来自专栏互联网杂技

用户体验设计中最常见的误解

UX Myths网站收集了很多关于用户体验设计中最常见的误解和解释了为什么他们不适用。现在将这些经验研究整理出来,为各位设计从业者做参考,避免依赖个人的主观经验...

3316
来自专栏web前端教室

前端新人如何在不顺利的情况下完成开发任务?

昨天的文章里提到一个同学有些跟不上公司绩效考核,抛开一些主客观方面的原因不提,前端新人应该怎么来相对有质量有完成一个业务需求呢? 这个话题每个人的感受都不同,我...

19410
来自专栏腾讯社交用户体验设计

在整理设计规范中变强

1133
来自专栏web前端教室

【思路】学习前端的思路问题

大家好,今天是周五,祝大家周末快乐,今天我们聊一下《学习前端的思路问题》。为什么要聊这个呢,因为群里的小伙伴经常会问我,前端怎么学,学了很久没方向啊,学什么东西...

1071

扫码关注云+社区

领取腾讯云代金券