网页设计中的微体验思考

今天简单分享一下我在做网页端设计时，结合产品特性和用户体验方面总结的几条思考：

点击按钮，反馈页面应该当前页面打开，还是新页签页面打开？

图文混排时，图片应放在左边还是应放在右边？

表单标题项文字应左对齐还是应右对齐？

下面我们结合虚拟案例来展开分析：

问题一

1、点击按钮，反馈页面应该当前页面打开，还是新页签页面打开？

操作提示类：

1.1、当前页面错误类提示

适用于表单类型的页面，实时提示错误所在，方便用户精确定位错误位置而对信息进行修改，方便效率，提示较轻，不打断用户操作

图片来自网络

1.2、toast提示

适用于页面全局类的提示及错误反馈，3秒左右消失，一般只是提示用户，不需要用户做确认动作，不打断用户操作，比弹框提示程度轻

1.3、弹框

一般适用需要用户紧急做决策或不建议用户做操作的提示，打断用户操作流程，需要用户马上处理，提示程度较重。

也常用做一些简单信息的编辑修改，当前页面做一些简单的调整，弹框处理不会让页面跳来跳去导致用户心理负担，对心理影响较轻，感知是在当前页面完成的操作。

但不适用于多信息多的编辑修改，多信息处理及一些需要稍复杂交互时建议新页面操作；且弹框上不宜再出现弹框或浮层提示的交互方式，不然会让用户在感知上容易疲惫，弹框上交互不应一层套一层，最好只是单层页面操作，不宜做太重，不宜把交互做复杂

需要后续操作类：

一般为当前页面按钮点击后跳转到另外页面需要接下来更多信息的操作，以完成产品流程，达到需求目标。

这样的操作反馈页面应该是当前页面打开还是新开页签打开呢？

1、当打开的页面需要大量编辑项的内容时，一般当前页面打开比较合适，如下案例，添加客户页面提交后，页面自动跳转到客户列表页，并更新信息，添加的信息展示在列表里。

2、当打开的页面只是查看浏览一些信息时，一般新页签页面打开，如下案例，用户不需要对新打开的页面进行操作，只是查看浏览信息，用户有可能同时打开多个页面进行信息比对，这时新页签页面打开比较方便，用户查看后关闭页签即可

问题二

2、图文混排时，图片应放在左边还是应放在右边？

我们图文混排时，经常纠结图片应放在左边还是右边，下面我以网上的一个作品为例子(作品版权属于原作者)来说下我的看法：

图片来自网络

上面是一个登录页面，左边表单，右边插图，但我们来分析一下，右边的图片只是辅助插图，当前页面的任务是完成左边的登录；

但我们在看到这个页面的时候，按照人的阅读习惯（从左至右），首先想要完成登录，这时视线在左边1的位置，但是被右边的插图吸引（图永远比文字有吸引力，且右边图的面积比左边表单部分要大，此时视线移到右边2的位置），看完图以后，想到自己到这个页面的目的是完成登录，视线又从右边2移到左边3（也就是1），完成账户登录，完成此页面任务。

下面我们把左边的表单和右边的插图调换位置，即图左文右

图片来自网络

按照人的阅读习惯，视线从左边插图的位置1开始（本来图也要比文字吸引视线，把图放左边正好符合人的阅读浏览习惯），然后视线移到右边表单2的位置进行账户登录，整个流程一气呵成，符合人的浏览习惯，且提升了用户效率

问题三

3、表单标题项文字应左对齐还是应右对齐？

我们先看下图，表单标题项左对齐

因为是左对齐，整个页面看起来比较整齐，但左标题和右边表单联系起来做一些操作时，尤其是整个页面表单项较多、标题项文字字数相差较大时，由于左边标题和右边表单间距较大，信息连接的紧密性不强，操作效率低；

下面我们把这个页面的标题项右对齐看下：

这样较多表单需要编辑时，即使标题项文字字数相差较大，但由于标题与右侧的表单连接紧密，相比左对齐更能提升用户操作效率。

但如果是5个以下的表单，且标题项文字字数相差最多两个时，更适宜于左对齐的方式，因按具体情况而定。

总结：

以上几点是我在做网页项目时的一些细节思考，我们做页面时不应该只是参考别人的设计，更应该结合项目的特性及用户人群、操作效率，多思考，多总结，以最合理的方式帮用户提供问题的解决方案，以提升用户体验，来提高产品价值