本文其实应该叫,Web 用户体验设计提升指南。
一个 Web 页面,一个 APP,想让别人用的爽,也就是所谓的良好的用户体验,我觉得他可能包括但不限于:
- 急速的打开速度
- 眼前一亮的 UI 设计
- 酷炫的动画效果
- 丰富的个性化设置
- 便捷的操作
- 贴心的细节
- 关注残障人士,良好的可访问性
- ...
所谓的用户体验设计,其实是一个比较虚的概念,是秉承着以用户为中心的思想的一种设计手段,以用户需求为目标而进行的设计。设计过程注重以用户为中心,用户体验的概念从开发的最早期就开始进入整个流程,并贯穿始终。
良好的用户体验设计,是产品每一个环节共同努力的结果。
除去一些很难一蹴而就的,本文将就页面展示、交互细节、可访问性三个方面入手,罗列一些在实际的开发过程中,积攒的一些有益的经验。通过本文,你将能收获到:
- 了解到一些小细节是如何影响用户体验的
- 了解到如何在尽量小的开发改动下,提升页面的用户体验
- 了解到一些优秀的交互设计细节
- 了解基本的无障碍功能及页面可访问性的含义
- 了解基本的提升页面可访问性的方法
页面展示
就整个页面的展示,页面内容的呈现而言,有一些小细节是需要我们注意的。
整体布局
先来看看一些布局相关的问题。
对于大部分 PC 端的项目,我们首先需要考虑的肯定是最外层的一层包裹。假设就是 .g-app-wrapper。
<div class="g-app-wrapper"> <!-- 内部内容 --> </div>
首先,对于 .g-app-wrapper,有几点,是我们在项目开发前必须弄清楚的:
- 项目是全屏布局还是定宽布局?
- 对于全屏布局,需要适配的最小的宽度是多少?
对于定宽布局,就比较方便了,假设定宽为 1200px,那么:
.g-app-wrapper { width: 1200px; margin: 0 auto; }
利用 margin: 0 auto 实现布局的水平居中。在屏幕宽度大于 1200px 时,两侧留白,当然屏幕宽度小于 1200px 时,则出现滚动条,保证内部内容不乱。
对于现代布局,更多的是全屏布局。其实现在也更提倡这种布局,即使用可随用户设备的尺寸和能力而变化的自适应布局。
通常而言是左右两栏,左侧定宽,右侧自适应剩余宽度,当然,会有一个最小的宽度。那么,它的布局应该是这样:
<div class="g-app-wrapper"> <div class="g-sidebar"></div> <div class="g-main"></div> </div>
.g-app-wrapper { display: flex; min-width: 1200px; } .g-sidebar { flex-basis: 250px; margin-right: 10px; } .g-main { flex-grow: 1; }
利用了 flex 布局下的 flex-grow: 1,让 .main 进行伸缩,占满剩余空间,利用 min-width 保证了整个容器的最小宽度。
当然,这是最基本的自适应布局。对于现代布局,我们应该尽可能的考虑更多的场景。做到:
底部 footer
下面一种情形也是非常常见的一个情景。
页面存在一个 footer 页脚部分,如果整个页面的内容高度小于视窗的高度,则 footer 固定在视窗底部,如果整个页面的内容高度大于视窗的高度,则 footer 正常流排布(也就是需要滚动到底部才能看到 footer)。
看看效果:
嗯,这个需求如果能够使用 flex 的话,使用 justify-content: space-between 可以很好的解决,同理使用 margin-top: auto 也非常容易完成:
<div class="g-container"> <div class="g-real-box"> ... </div> <div class="g-footer"></div> </div>
.g-container { height: 100vh; display: flex; flex-direction: column; } .g-footer { margin-top: auto; flex-shrink: 0; height: 30px; background: deeppink; }
Codepen Demo -- sticky footer by flex margin auto
当然,实现它的方法有很多,这里仅给出一种推荐的解法。
处理动态内容 - 文本超长
对于所有接收后端接口字段的文本展示类的界面。都需要考虑全面(防御性编程:所有的外部数据都是不可信的),正常情况如下,是没有问题的。
但是我们是否考虑到了文本会超长?超长了会折行还是换行?
对于单行文本,使用单行省略:
{ width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
当然,目前对于多行文本的超长省略,兼容性也已经非常好了:
{ width: 200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
处理动态内容 - 保护边界
对于一些动态内容,我们经常使用 min/max-width 或 min/max-height 对容器的高宽限度进行合理的控制。
在使用它们的时候,也有一些细节需要考虑到。
譬如经常会使用 min-width 控制按钮的最小宽度:
.btn { ... min-width: 120px; }
当内容比较少的时候是没问题的,但是当内容比较长,就容易出现问题。使用了 min-width 却没考虑到按钮的过长的情况:
这里就需要配合 padding 一起:
.btn { ... min-width: 88px; padding: 0 16px }
借用Min and Max Width/Height in CSS中一张非常好的图,作为释义:
0 内容展示
这个也是一个常常被忽略的地方。
页面经常会有列表搜索,列表展示。那么,既然存在有数据的正常情况,当然也会存在搜索不到结果或者列表无内容可展示的情形。
对于这种情况,一定要注意 0 结果页面的设计,同时也要知道,这也是引导用户的好地方。对于 0 结果页面,分清楚:
- 数据为空:其中又可能包括了用户无权限、搜索无结果、筛选无结果、页面无数据
- 异常状态:其中又可能包括了网络异常、服务器异常、加载失败等待
不同的情况可能对应不同的 0 结果页面,附带不同的操作引导。
譬如网络异常:
或者确实是 0 结果:
关于 0 结果页面设计,可以详细看看这篇文章:如何设计产品的空白页面?
小小总结一下,上述比较长的篇幅一直都在阐述一个道理,开发时,不能仅仅关注正常现象,要多考虑各种异常情况,思考全面。做好各种可能情况的处理。
图片相关
图片在我们的业务中应该是非常的常见了。有一些小细节是需要注意的。
给图片同时设置高宽
有的时候和产品、设计会商定,只能使用固定尺寸大小的图片,我们的布局可能是这样:
对应的布局:
<ul class="g-container"> <li> <img src="http://placehold.it/150x100"> <p>图片描述</p> </li> </ul> HTML 复制 全屏
ul li img { width: 150px; }
当然,万一假设后端接口出现一张非正常大小的图片,上述不加保护的布局就会出问题: