登录界面的人性化设计优化实践

高 敏 南京视觉艺术职业学院 211215

1 优化方案—以微信为样本

微信，是现在大部分手机用户的一个生活方式，在智能手机主导的手机市场中，越来越多的手机用户开始使用微信，但是会不会存在这样的一种现象，上班的时候电脑开着，挂着腾讯QQ、移动飞信、人人网、而手机上挂着微信、微博、易信、陌陌。电脑开着，慢慢的就会被忽略掉，除了工作上的事情才会去触碰，闲来时抱着手机微信聊着，分享新闻、参与商家互动等。但是当工作繁忙时，会开始嫌弃手机聊天的速度，觉得这么多人所关注的微信，只能手机登录的弊端，于是开始烦躁不堪，连平时腾讯QQ 上的好友都转战微信，因为微信还有一个功能就是可以绑定一个腾新QQ 号，用来接收QQ 信息。近期微信针对存在的这种弊端，开始支持微信网页版。因为微信是一个时代社交软件中最具有代表性的一个，它是这两年来迅速兴起的一个交流平台，开始只有手机的客户端，电脑客户端只有公众账号才有，这也许是它刚开始兴起时吸引用户的原因，当越来越多的社交软件涌现在电脑屏幕时，这款软件只提供给手机用户，那么它就必须做到它所提供的客户端功能能够吸引用户。微信现在是手机用户交流的主流软件，拥有比较庞大的用户群体，它的出现也符合国内互联网发展的年轻化趋势，对于登录界面的设计也是具有时代性和典型性。

图1 是微信刚推出的网页版登录界面，图2 是微信手机登录端切换到电脑版浏览器登录时手机上的验证显示界面。

2 用户需求分析

本章节主要是针对微信从手机客户端转向飞信网页版登录界面的设计优化分析。在研究这种登录界面切换的初期，还是需要对使用微信的用户进行了解分析，根据不年龄段的用户来挖掘不同受众群体的需求。

由于自己工作环境的局限性，只能利用身边使用微信的用户进行了解，了解群体为艺术类院校大学生5 人，大学工作人员5 人，已经参加工作的人群5 人。

（1）首先会了解这三类人群使用微信的频率，他们一天之中会多少次使用微信。

（2）每一次使用什么登录方式登录微信，是手机客户端登录还是微信网页版登录。

（3）登录微信主要的情感需求是什么。

（4）对于现有的微信手机登录界面和刚推出的微信网页版登录界面有什么看法。

（5）对于微信的两个登录方式，有什么看法。

下面对于了解的结果，做一个总结：

（1）5 名学生对于微信的使用频率较高，并且基本24 小时在线，就算晚上休息了，也不会退出登录，只会把界面推送到后台，当有信息的时候，会将信息再推送到前台提示。所以大学生会每天都登录微信，来联系好友，或者与好友分享信息。5 名大学工作人员，由于工作关系，每天在上课的时间段都不会登录微信，每天登录微信的时间段在上下班途中和中午休息期间。登录微信只要是了解学生动态，浏览关注的公众平台信息，或者查看好友发布的最新动态等，有的老师会利用微信建立聊天组，给学生发布最新的通知。而已经参加工作的5 名工作人员登录微信的时间不固定，偶尔会登录查看还有最新动态，或者查看所在公司的公众平台所发布的信息，适当的进行转发，为公司做宣传。

（2）了解的15 名人员，目前为止常用的登录方式还是手机客户端，因为手机登录端可以看到好友分享的信息和发布的状态，而目前微信网页版只能类似最初的腾讯OICQ 一样，仅限于聊天，接受信息， 并不能查看好友发布的状态和分享的信息，更不用提自己转发和分享信息或者发布信息了。对于公众账号的沟通还需要有一个小的类似登录的确认。

（3）了解的登录用户都期望微信的手机登录界面能够人性化一点，颜色不用过于单一，对于登录界面的引导页，可以根据具有情节性，增加登录用户的视觉冲击力。

（4）了解的用户普遍认为在手机客户端登录界面的布局上可以将登录框适当的将尺寸调整小一些，另外增加一些新的可选择的登录选项，例如公众账号信息浏览的登录等，这样和好友的信息可以区分开，可以选择性的登录，当用户不想接受公众账号所发布的信息，或者不想查看的时候可以直接登录浏览个人好友信息可以发布个人信息的界面，而想阅读公众账号信息或者参与互动的时候可以直接登录公众账号信息的登录界面选项，选项层次清晰。希望网页版的登录界面也能够像手机版登录界面一样，可以选择性登录查收信息或者发布信息。

（5）对于两种登录方式的看法，网页版的登录方式，更多的是希望加入登录账号的登录框，而不是仅仅是二维码扫描的方式，因为如果用户需要登录微信，但是手机却不在身边，此时身边只有电脑的话，那么也就能够通过手机微信扫以扫二维码登录网页版的微信，那么网页版的登录界面此时也就没有存在的价值了。

从了解这15 名为新用户的结果分析， 不同年龄段的用户他们所关注的微信重点是不一样的，对于登录界面的设计，提出的看法也是不一样的，大部分的登录用户希望有新的登录模式去体验，这样的界面要易于操作，易于登录，易于选择性登录，那么满足这些要求的同时，还需要考虑到登录用户的情感诉求，登录的最终目的性，将这些融入到登录界面的人性化设计里面去，让用户的登录的同时可以获得良好的交互体验。

3 登录界面人性化设计的优化

根据登录界面的人性化设计的元素分析和调查了解的登录用户的情感需求， 针对刚推出的微信网页版登录界面，作为研究对象进行设计的优化，从登录界面的重要性，布局结构的编排、视觉传达这几个方向来研究，进行登录界面设计的人性化优化，并要做到细节和总体结构的风格统一。

用户想要使用微信，就必须通过微信的登录界面，而登录界面是一个重要的信息传播窗口，也是决定用户是否愿意通过使用手机扫描登录的二维码来完成登录的过程。那么作为由一个手机登录界面的切换的网页版登录界面，这样的转变登录用户是需要一个适应过程的，在用户心理上要有一个缓冲的过程，这样的登录界面需要显示快捷方便的优势，从而激起登录用户的切换交互手段。

网页版微信的登录界面，在设计的时候需要让用户很直观的了解这种新型切换的登录界面的特殊功能，网页版微信登录界面目前只针对已经注册过用户名的用户，但是却没有考虑到没有注册的用户，他们在登录网页版微信的时候还是需

图2 微信手机登录端切换到电脑版浏览器登录时手机上的验证显示界面

图1 微信网页版登录界面047

软件开发

Software Development

电子制作

要有一个专门的登录框或者注册的文字链接说明的，这样的一个登录框可以让用户感受到他们被重视，感受到人性化的设计，也方便为注册的用户注册。在网页版微信的登录界面上除了可以设置登录，应该也可以设置手机版登录界面和网页版登录界面的相互相切换，在切换的同时，还可以选择是否同时接受信息，或者只允许一个登录点登录，不能同时在线。在登陆框的旁边可以有一个切换使用说明，用来给登录用户一个提示，引导他们完成登录，同时也可以凸显功能设计的人性化。、

对于的网页版登录界面的布局，是建立在整个网页框架的基础上的，可以根据不同的登录需求在登录界面上设定不用的区域，手机二维码扫描登录、公众账号信息浏览登录和个人信息浏览登录可以划分为三个区域，这样的话微信就可以将公众账号登录界面融入到网页版微信登录界面里面来，既需要管理公众账号，有需要登录个人账号的登录用户就可以在这一个界面上进行登录。用这两个登录框将网页版微信的登录界面划分为两大部分，表现为弧线的旋转感，使得整个界面呈现一种立体感。当用户用鼠标准备点击的时候，鼠标的移动选择可以改变两种登录框的大小，重点感突出，到那个登录用户选择的时候，可以将登录框放大，方便登录用户登录。也可以在三种登录方式下方设置其他通讯账号登录微信的方式。

网页版登录界面的构成元素不是非常多，主要包含文字、二维码、登录提示的图片、带有微信主色调的色彩表现。在文字的叙述上，要考虑文字的表达方式，文字的各种属性，需要通过整体的登录板式突出不同文字的不同层次，激起登录用户的登录兴趣，登录框可以放在立体方形内，登录框随着鼠标点击立体方形变大而变大，登录按钮和提示文字也需要进行设计规划，这样让登录用户能够更加清晰明朗的了解登录界面的使用。

整个登录界面中文字属性的设置需要考虑到登录用户的关注程度，用户最想要通过文字了解的信息是什么，那么可以通过这些被关注的文字入手，对文字进行字体设计和字体变换。

同时可以将一些原有的微信登录引导图片也引入到网页版微信登录界面中来，这样也可以增加用户的关注度。其实当微信个人使用版本从手办版发展到现在的网页版，是一个延续的过程，也是一个重要的变迁。现在的网页版微信登录界面其实还在推广当中，设计师可以利用这个延续和变迁的过程设计一个引导图，让登录用户慢慢接受这个转变的现实，因为刚才设想的界面中已经有三个登录框的位置，那么引导图片的穿插也成了一个问题，因为登录界面的版面有限。我们可以将上文所说的三个立体的方框放在一行，形成一定的弧度，或者放在一条水平线上，将水平线作为投射点，在水平线下方可以设计出三个登录框的“倒影”当然，倒影的内容不可能是真扥这三个登录框的“倒影”，设计师可以利用这三个倒影框， 来展示引导图，因为是“倒影”，那么在图片色调的设计上需要有区别，比如图片透明度的调整，图片蒙版的渐变色调整等。这样就可以将原本的两个页面进行融合， 设计师也可以用过这三个“倒影”来完成一个小型故事的“述说”，让整个登录界面更具有故事性。

在色彩的使用上，设计师还需要考虑到原本微信的基本色，为了让整个微信登录界面的色彩形成统一的风格，整个登录界面的色调主要以绿色、深灰色和黑色为主。考虑到这主色调还需要将登录界面中的图片融合问题考虑进去，在图片的设置上要有主色调的颜色作为背景，在将图片般透明化，蒙版渐变处理，这样可以增加网页版微信登录界面的空间感、层次感和增强氛围。

登录界面中不需要有过多的导航内容，其实那三个选择性的登录框在某种程度上来说已经替代的导航的功能，从外形上来看，就相当于导航的三个内容，当鼠标触碰其中的某一个登录框的时候，登录框会呈现出放大的效果，同时另两个登录框是伴随着变大的登录框以同样的速度变小的一定程度。这样的方式可以增加登录界面的趣味性和互动性，增强登录界面的欢快氛围。除了三个登录框，在原有的繁体和英文快速切换的小导航的基础上，还可以再登录界面的下方增加使用其他方式登录的小导航，然后导航的内容可以包含网络上各种聊天的工具，例如腾新QQ、MSN、新浪微博、腾讯微博、人人网等。这样也可以引导登录用户可以使用其他登录方式登录，这样可以免去注册的过程，节省了登录的时间，并且方便快捷。