白鸦，以用户为中心的设计

IM产品的好友界面是整个软件最重要的界面（也是产品主面板的咽喉所在），如果把IM产品比作电话，她的好友列表就相当于电话的拨号盘，是易用性要求最高的界面。是软件使用者开始使用的第一感受。

现在我们的IM软件里好友列表是千篇一律的“下拉列表式”，“存在必然合理”，这样的显示方式一也一定有着它的原因和他的合理性。

但是“主面板”到底应该显示哪些内容？怎么显示才是用户最易用最合理的？用户究竟最需要在这个界面完成什么样的功能？这些问题都值得我们好好的思考和研究…

今天先来说说主面板的布局和基本操作，下次再来好好的看看这些主面板的交互设计

QQ主面板

QQ默认主面板打开的时候显示的是“好友列表”，在这里我们腾讯的同行们设计了两种显示的方式“树型”和“传统型”（上图中我们看到的是“树型”的显示方式，事实上它是一种“树型”和“传统型”的结合，只是把最常用的“好友”默认成了树型的显示而把其他的列表保留着传统的选项型），同时他们还把好友的信息显示分成了“大头像显示”（左图）和“小头像显示”（右图）两种方式，默认的时候使用的是“大头像显示”。可以说在这里这两种方式“各有特点”，可以说现阶段在好友列表的显示上QQ做出了很好的设计。
我们继续来看看QQ的整个主面板设计，首先在上图“A”的位置我们可以看到自己的头像（包括可点击下拉的快速设置通道）和号码和自己的登陆状态还包括了腾讯认为比较重要的三个功能点。在这里我觉得他是比较合理的。
继续看他的整个联系人下拉区域，首先“B”处的“手机好友”和“群组”单独作为两个特殊的群体罗列了出来，然后“最近联系人”是我觉得QQ2005所增加的功能中最有用的一个！很实用（我们不说这里是否出现很多BUG的问题，但说这个功能点的设计我认为是非常好的一个点子）！
如上图“D”处我们可以看到QQ毫不吝啬的把他们现在几乎所有提供的项目都罗列了出来！不知道应该怎么去描述这样的感受！首先我想问一个古老的问题“功能按钮到底是不是可以直接用ICON还表达他的含义？” 回答应该是否定的，然后我们说了“大哥你放这么多图标水能认识都是什么意思呀？！”我想不常用的人充其量只能肯定其中“手机短信”这个图标的含义！那么难道我们要让用户一个个的把鼠标放上去看看问题提示么？ 再说一点“这些功能到底是不是都有必要放在这里？”，比如刚才说到的“手机短信”我们已经明确的有了一个“手机好友”干嘛还要把他揪出来再列到这里呢？为了引导多几个用户使用多收取那么一点短信费？牵强了点吧！这么一排图标….
我要把C留在最后来说，2005版本推出之前MSN已经有了“搜索”和“显示正在播放的歌曲”这两个功能于是我们的QQ2005也有着这样两个功能（且不说是巧合还是我们在业务竞争上的需要），首先我很佩服qq tm的同行们能够把这两个功能点收缩的这么小，只占了这么点空间真的很不容易！ 但是我们毕竟有那么多的功能需要在这里体现（其实这两个功能在这里的某些操作显示完全还可以省略的），但是突出杵进来这么两个功能让我们不得不说“QQ臃肿”了！
我们可以用PS把QQ的界面量一下，应该会发现在它的默认界面中可供显示好友列表的区域不够整个高度的1/3，这是一个很可怕的现象？！！ 我们这个界面的目的是什么？是让用户通过这个界面找到自己的好友（无论是在线的还是手机的等等）然后和他通讯。可是我们连去找自己的好友都难，那么我们是不是捡了芝麻丢了西瓜呢？？当然也许腾讯的同行们也是无奈之举，“每个功能都很重要！”。不过我想总该有可以改进的地方的。当然，每个产品的战略发展有着它的目的，也许这么作也是QQ的一些策略,我们只能说说自己的感受而已…

GT主界面

“A”GT把用户的操作菜单充分的简化和收缩，于是出来了如此精简的界面。
“C”把用户的状态和用户的“副名”综合成一个概念我想这是google高明的地方，不然就会像下载MSN这样，名字、状态、歌曲、。。。 哪有那么多话要在名字的显示里说呀？无聊！
“B”把好友列表千篇一律的放在一起，然后弄一个综合的搜索功能去方便用户查找。。。
“D”这个功能有些不知所以然，适用性有多少值得探讨
“E”添加好友的这个位置正可谓“恰到其份”
简洁、非常的简洁、过分的简洁、甚至过于简单，这就是GT的特点。 我喜欢。
没有一个多余的图标！

MSN主界面

打开MSN的界面我们会很欣慰的看到了一个问题的解决“某些功能的操作只是上不是只用ICON就能完全做到的！”于是我们看到了MSN宁愿写上一些被某些人认为“没有用图好看”的文字也要让用户能够很轻松的明白要
表达的功能。
首先我们可以看看“A”区域，这里也被MSN的同行们给安排的座无虚席，我想他们也肯定是“咬过很多次牙了，不这么做没办法呀！　业务需要太多了！”那我们还能说什么呢？！
“B”！这个以前在上边现在被调到上边“着重”放置的“添加联系人”每次看见我都很不爽！难道MSN真的没有用户研究的部门么？难道他们不知道什么是用户使用习惯么？反正功能我问了五个朋友五个人都是放在这里是败笔！再说一句不该说的“就算放在这里咱也做的好看点好不好？” 开句玩笑话我估计这个地方是这样的：“领导”或者某些“专家”们狠狠地拍了几下脑袋然后说“我们的添加联系人在下面不够显眼，要放到上边，上边要比下边好”于是设计师就很不情愿的应付了他们一下，或者说设计师压根就把这个事情忘记了。 等要推出的时候想了起来，赶紧糊弄一下过去算了…
还是那句话“不要忘了我们这个界面的主题是什么？什么是我们的第一目的？是人能够用户找到自己的朋友然后去和他说话，不是显摆功能展示广告”的地方。
“F”“移动电话”和“脱机用户”可以单独列出这个功能很实用！
“D”说实话如果咱把“搜索”放上边把“添加联系人”拿到下边也比现在好多了
“E”懒的说

ICQ主界面

忘记了icq5.0以前的版本是怎么样子的，好像不会这么难受吧！
“A”，真不知道是不是因为老外的观察能力强还是因为他们都天生比中国人聪明! WK！放这么多图标谁能认识几个呀？？一个个的鼠标放上去看提示？丫把用户当猴耍呢？
“B”，ICQ默认把在线和离线用户分开显示，这一点个人表示十分的赞同！
“C”，这里的个人资料没有那么多的闲篇，就是一个交待比较清楚的操作提示。想看自己什么样想知道自己现在是什么名字点开就行了！ 不错。
不过我们再看看“C”的左下角那里的两个显示标签，知道什么意思么？不知道吧，刚开始我也不知道。刚开始我用了以后知道了然后说他不该做的用户这么不好理解，不过现在我理解了“已经有了默认的显示了而且ICQ人和他是很合适的，其他的显示功能不是很鼓励用户去使用，有而且不是非常难找到不就行了嘛~”
“D”，大哥咱就算弄个广告的位置也没必要这么夸张吧？！
“E”google自己的IM推出了，估计ICQ不会帮它放太久了吧…

雅虎通主界面

“A”雅虎通把主菜单直接放进了主面板里，这一天体现了功能为主的特征
“B”这个用户信息显示的地方不多不少，算是比较精道了
很多时候我们在说“雅虎通的主界面布局的设计是个很费心思的安排”，我们可以看见他的主界面主要分成了两个部分：“C”和“D”两个区域，“C”区主要是“好友”和“地址薄”（如图“B”）、“D”区主要是一些附件的功能服务（如图“E”）
“F”把搜索放在界面的下方也是个为了照顾用户而不得已的办法，但这样用户的使用可能会不方便了很多，甚至直接降低了使用的频率。但也是一个合理的办法\
雅虎的设计即没有什么突出的地方也没有什么严重的不足，也许这就是国际化软件的特点。

SKYPE主界面

SKYPE的主界面设计出了“A”处我们暂时还说不出来什么，可以说它没有次序也可以说它“比较合理”；但是“A”这里的几个图标出现了很明显的不统一性，不得不说。图标的大小都不一样！

UC主界面

第一次打开UC的时候出了一阵子的眼慌别的就没什么了。
也许UC的主要服务点分成了他们的即时通讯和聊天室两个部分所以他们把整个主界面用这个两个部分给填满了。
在好友的显示上他们也是一样的分成了“大头像显示”和“小头像显示”两个部分，qq在之前的版本的大头像显示中也是这样的上下结构，对于这样的结构安排QQ现在做出了很好的改进。那么UC呢？ 是不是在下个版本里能有更好的显示方式出现呢？（额外的说一句：UC的头像也太难看了点吧！！）
“A”我们可以看到UC把他们引以为豪的“网络硬盘”和“邮件”放到了用户头像的右侧，但是这样的显示会出现一个问题：一般的用户进来更多时候会误认为那两个ICO是UC网络硬盘服务的两个功能点！
“B”“C”这里的功能设置在这个特定环境下基本上都没什么说的，但是是不是难看了些呢？
“D”这个地方也许是几个确实无法省略的服务项目，他们能用ICON配上文字确实是让用户方便了很多！ 虽然多占了一行的空间但是却让用户得到了更多的方便！

贸易通主界面

贸易通的头部分我记得在“登录”的时候已经说过；
“A”合理的利用空间把用户的“名片”连接显示了出来，是个很不错的主意！
“B”把这些添加和搜索功能放在下面是我个人比较欣赏的
“C”记得以前就说过“占了这么大一个高度的空间却还做的如此难看！”何苦呢！
“E”阿里巴巴的两个即时通讯软件都同时犯了一个同样的毛病：在好友列表搜索后不显示好友的数量 和在线的人数。 显示有多少好友在线是可以刺激用户去点击操作的，这一点我们不能忽视。

淘宝旺旺

淘宝旺旺我很喜欢，“A”这里安排的也很合理。很不错。
“E”还是上边说到的那个毛病：不显示好友数

还有很多IM ，但是在主界面都是大相径庭。 可以说上边的算是一些很典型的代表了。。。

总结来说：
1、主面板最重要的部分什么？ 显示用户的一些联系人，让用户可以方便的进行下一步操作。
2、主面板的图形设计要注意什么？ 让用户看着舒服。不是花里胡哨让人看着头晕。
3、主面板的设计一般存在什么样的困难？空间小！“重要功能”多！，所以我们需要很好的控制和分析“什

么才是主要功能，什么是可以通过合理的交互设计来完成的？”把用户最常用的功能突出表现出来，把不常

用的功能通过一些好的点子保留但不明显显示出来
4、能不能打破列表式的显示方式？！ 也许可以！ 需要我们再次好好的探讨。（记得之前和几个好朋友也聊

过解决这个问题的点子，有机会一定想办法去实现一下试试）

由此可见主界面最主要的是交互设计，下次我们来看上边这些软件的交互设计。。。

分类：UCD ,05/09/09 7:04 下午 | 18,304 次浏览 |