人人小站创建页面中的用户体验设计 « Java自由人-执着专注于设计…

十一

2011

Comm

Posted by

admin

人人小站创建页面中的用户体验设计

一直以来就在关注用户体验，但并没能将所见到或者意识到的优秀设计做一个整理，这个人人小站算是一个尝试吧，文章会同时发布在本博客和人人小站 http://

用户体验始终是网站设计者关注的一个很重要的话题，用户体验包括很多个因素。在此不作宏观介绍，只是对在注册人人小站中遇到的一个小亮点做简单分析。

人人小站头像

对于tag（标签），tag的应用很广泛，优酷视频上传页面，博客日志发表页面，QQ空间日志发表页面等等。tag能更快的更准确地使得搜索引擎或者程序知道你的文章内容和主题，查找归类更方便。

同时人人小站的日志发布界面也对tag作出了解释。

对于使用过或者是了解的人会知道tag的用法，一般在两个tag之间添加英文的逗号或者是空格。而对于每试用过的人，可能根本不知道tag是什么意思，也不知道应该如何添加tag。

人人小站在这里使用了以下几种方式来进行tag的输入：

1：提供预选词语（tag），在tag区域提供了大家经常使用的词语来完成选择，这是一个惯用的手法了，选择成本要比输入成本小得多。

2：手动输入tag时自动识别，一个非常棒的功能，前面说过了tag一般有两种分割方式，英文逗号和空格，而人人在此用了自动分割tag的方式，输入一个词语之后不管你是按空格分隔还是按逗号（包括中文逗号和英文逗号）分隔，他都会自动识别并且将其放到上方，意为已选tag，从视觉上一目了然，这些是我已经写好的tag。

不能不说这个设计非常棒，巧妙地把tag的输入方式变成动态的，可识别的，而且降低用户输入烦躁度的（输入多个tag 每个中间一个逗号的确很令人烦躁），同时大大降低了对新用户的学习成本。

至于程序的实现方法也十分巧妙，他用了div来建立一个圆角带1像素描边的矩形框，在div里定义上一行为已选tag list，下面为输入框，而在输入框部分没有明显边界，因此造成了整个box都是输入框的假象，真的是非常巧妙，如图。（上方下方其实是两个box，而且上方是不可输入的，但是在视觉上他们是一体的）

输入框激活前subjects为0*0，subjects.input对象为327*29

输入框激活后subjects对象为一个tag的大小。下面的subjects.input对象为327*29

小小bug：也不能说是bug吧，就是输入顿号之后便无法自动分割tag写入到上方的list，而且如果词语里面含有顿号即使用户输入空格或者是逗号也不会再识别，不过应该不会有很多人喜欢用顿号分割的吧。

人人小站创建页面中的用户体验设计

Post comment

Video

Blogroll

近期文章

标签

链接表

近期评论

分类目录