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

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

《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。

前言

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

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

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

简洁清晰原则

去形式化做减法,突出内容尽可能去掉不必要的装饰和形式,用清晰简洁的设计形式来表达功能、交互及内容。
在页面开发设计中,同一页面展现尽可能多的内容通常不是最佳的设计,克制信息展现的数量,明确信息层次,突出主要内容。用户在搜索相关场景下希望快捷准确的获取相关信息,复杂或过量的信息容易让用户失去耐心,影响用户的使用效率,也会让页面的设计看起来拥挤,影响页面性能和设计品质。

做减法,保证清晰简洁是优质设计区别于普通设计的关键因素之一。

简洁是永远不会过时的设计原则,在AI时代更显重要,简洁的设计不是不考虑功能和内容的复杂性,而是充分理解复杂的信息,对其进行有效分析,区分层级,用简洁清晰的形式来表达。

简洁清晰原则和扁平化设计风格相匹配,具体如下:

采用扁平化的图形、按钮或图标,减少不必要的色彩,渐变,材质以及与内容无关的图形元素。
保证页面整洁,信息层次区分明确,区块划分明确,减少不同字体及样式。
简化信息,尽可能减少不必要的交互和步骤。

设计案例 01

设计案例01:减少背景色或背景图对主体内容的干扰,克制使用大面积颜色,控制信息文案的长度,突出主体信息。
这里写图片描述
这里写图片描述

设计案例 02

设计案例02:尽可能减少不必要的浮层,弹窗打断用户的操作与浏览,弹层应该尽可能简洁容易让人理解,弹层分为模态和非模态,需要用户进行确认或进行选择的可以采用对话框形式,无需用户确认和操作仅用来提示用户的可采用toast形式。
这里写图片描述
这里写图片描述

这里写图片描述
这里写图片描述

设计案例 03

设计案例03:背景简洁、主体突出的图片更能传达主要信息,克制使用不同字体及渐变材质效果
这里写图片描述
这里写图片描述

设计案例 04

设计案例04:减少内容区域被浮层干扰遮罩,突出主体信息,保证可阅读性,保持页面整体简洁清晰。
这里写图片描述

这里写图片描述

设计案例 05

设计案例05:注意移动端下拉选择的使用,例如二选一可以采用复选框 (check box) 或 切换按钮(toggle button)。
这里写图片描述
这里写图片描述

设计案例 06

设计案例06:注意移动端简化下拉交互操作,例如设定提醒日期时,选择日期的交互操作。
这里写图片描述
这里写图片描述

设计案例 07

设计案例07:选择简洁的布局和版式,注意移动端的页面适配。
这里写图片描述
这里写图片描述

设计案例 08

设计案例08:注意移动设备不同屏幕密度的字号适配,避免字号使用不当影响信息展现。
这里写图片描述
这里写图片描述

设计案例 09

设计案例09:注意移动设备不同屏幕密度的行间距适配,默认字体设置。不同设备和操作系统的字体展现效果可能存在差异。
这里写图片描述
Brilliant Open Web
BOW(Brillant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。

BOW 关注前端,关注Web;剖析技术、分享实践;谈谈学习,也聊聊管理。

关注 OpenWeb开发者,回复“加群”,让我们一起推动 OpenWeb技术的发展!

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

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

相关文章

大型网站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 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中内容,直至用户登录、订阅或付费后才能够查看隐…

Linux环境下Flume的安装

1、在官网http://flume.apache.org/download.html下载flume的压缩包 2、解压到指定位置并重命名 tar -zxvf apache-flume-1.9.0-bin.tar.gz3、配置环境并生效 #vi ~/.bashrc export FLUME_HOME/usr/local/APP/flume export PATH$PATH:$FLUME_HOME/bin #使变量设置生效 #sour…

MIPCache 域名升级

一、MIPCache URL 是什么 举个例子,MIP 官网的 URL 为: https://www.mipengine.org 对应的 MIPCache 的 URL 为: https://mipcache.bdstatic.com/c/s/www.mipengine.org 所谓 MIPCache URL 是经过 MIP-Cache CDN 缓存后的 MIP 页面地址&…

Flume监听端口,输出端口数据案例

1、在flume目录下新建/myconf目录,并在目录下新建socket-console.conf 文件! mkdir myconf cd myconf touch socket-console.conf2、编辑文件vim socket-console.conf,添加以下内容: # 定义这个agent中各组件的名字 a1.sources r1 a1.sink…

MIP 移动网页加速器视频教程全新发布

MIP (Mobile Instant Pages - 移动网页加速器) 是百度推出的开源项目,用于移动端页面加速。MIP 技术通过优化浏览器资源加载,前端代码执行及 CDN 缓存加速来加速页面,打造秒开的页面浏览体验。目前,有 5000 多家站点的 MIP 页已经…