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

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

《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。关注OpenWeb开发者,回复“设计指南”,即可获取已发布资源。

设计原则之高级精致

简洁并不等于粗糙没有细节,严谨精细雕琢细节,给用户带来超出预期的愉悦,高品质的体验。

品质感不仅仅适用于品牌范畴,也适用于Web生态中的具体页面,用户对内容和服务做出直观判断往往是通过页面设计细节的好坏,因此好的内容与服务依赖优质的设计。高级精致原则也可以应用在需要用户集中关注单个元素信息时使用,避免大量通用一致信息下找不到重点。

  • 避免使用低质量,模糊的图片,图片的选用要与内容紧密结合。
  • 高品质的设计取决于配色,图片质量,版式整体设计考虑,更取决于相关细节处理。
  • 有品质感的设计更能够深入人心,给用户超出预期的体验,提升用户忠诚度。

设计案例01

设计案例01:简洁的页面也可以看起来高端精致,注意细节处理,如图标、logo、图片的精心选择和修整。
这里写图片描述
这里写图片描述

设计案例02

设计案例02:注意边距适配,精心选用图片,以及多张图片的组合搭配。注意图片的比例和构图。
这里写图片描述
这里写图片描述

设计案例03

设计案例03:注意图片的质量和清晰度,我们建议图片资源保持图片尺寸至少达到2X屏幕密度下的像素尺寸。同时考虑加载性能,不要直接上传拍照原图,对图片适当进行压缩。
这里写图片描述

设计案例之智能快捷

为用户提供智能、自然和及时的信息及交互反馈,流畅的动效、多感官的体验有助于用户理解信息及场景,这也是面向未来设计的基本特征之一。
为用户提供智能、自然和及时的信息及交互反馈,流畅的动效、多感官的体验有助于用户理解信息及场景,这也是面向未来设计的基本特征之一。

控件元素不仅只是静态展现和交互,也可以赋予活力,每一个元素具有变体,变色,缩放,发光,发声等智能特征,利用动效引导功能交互流程,可以让传统的Web更具活力和亲和力。

移动端受制于用户使用场景及屏幕尺寸,用户输入等操作不及鼠标精准,在设计上充分考虑操作上的便捷,优化操作流程,根据场景和用户适配相关的内容与引导,给用户及时清晰的反馈,让体验更加智能便捷。

设计案例01

设计案例01:由于手机键盘区域小且密集,输入困难的同时还易引起输入错误,因此在设计页面时因尽量减少用户输入,对用户输入场景进行引导和智能匹配。
这里写图片描述
这里写图片描述

设计案例02

设计案例02:减少用户的操作步骤,智能判断用户的意图,协助用户简化选择提升效率,让复杂的功能体验更加顺畅便捷。
这里写图片描述
这里写图片描述

设计案例03

设计案例03:根据用户的使用地点,时间,设备等信息动态推送展现相关内容,例如地图在上下班高峰时段自动展现上下班路况信息、天气信息等。
这里写图片描述

设计案例04

设计案例04:微动效可以表达功能状态,可以让界面更具吸引力,更加有趣。提供及时的动效反馈(音频,视觉提示等指示功能系统),并让用户了解信息状态;例如下面案例svg图形的动效,形体根据状态需要变换形体,打破静态页面内容的乏味,让页面看起来更加生动智能。
这里写图片描述

设计案例05

设计案例05:控件元素不仅有静态展现,也可以赋予活力,元素具有动态属性,例如变体,变色,缩放,发光,发声等智能特征,智能快捷的理念可以让传统的Web更具活力和亲和力,利用动效引导功能交互流程。
这里写图片描述

Brilliant Open Web

BOW(Brilliant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。

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

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

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

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

相关文章

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 页已经…

MIP 技术进展月报:储存功能全新上线,MIP-Cache域名升级,校验更严谨

集 * 瞬时触达用户、高转化率、炫酷闪电标、优质展现形式 * 等诸多特性为一体的 MIP 页面吸引了众多站点进行改造。为了更好地服务于广大站长,更快地倾听站长们的声音,MIP 技术团队特推出《MIP 技术进展月报》,欢迎大家对 MIP 技术提建议&…

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

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

MIP技术进展月报第2期: 数据绑定,异步脚本加速

一、 功能更新 1. mip-bind 上线,实现复杂交互 MIP bind 双向绑定机制和组件上线,提供双向绑定的特性;能够允许页面实现数据驱动功能,开发者可以在任意场景修改数据,并驱动页面元素变动。 MIP 小姐姐画外音&#xf…

Hadoop的安装与配置——搭建完全分布式集群

一、搭建集群 1、准备服务器(这里以我的3台Centos7为例) 1个主节点:Carlota1(192.168.33.21),2个子节点:Carlota2(192.168.33.22),Carlota3(192.168.33.23) 2、配置主节点名 在主节点命令行输入&#x…