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

写下来自己的体验和感受，多少有些隔靴捞痒．．．

QQ 用户登录


（图：QQ01）

QQ2005的登陆界面在2004的基础上有了很大的改观，简洁了很多也舒服了很多。
还有很多人说“QQ的进步和变化太小了”，可是我想说“一个成型的产品如果改变太多会一不小心丢失掉很多用户的。那样做相当于赌博，90%的人不敢去这么赌，马化腾更不会去那么选择。”

◆ 如图QQ01，我们可以发现在“D”处点击下去就是以前的那些其他登录选项，大家应该还都记得QQ2004的登陆界面就是那种标签式的表达方式，被我们普遍认为繁琐而难看的方式。（可参照UC的登陆界面 图UCO1）当然可能有朋友会说” 这样的改变让有些用户找不到那些不常用登录方式了”，可我想说：“，既然是“不常用”的为什么要表现的那么显著呢？有个地方能让他找到不就可以了么？你又不是棒槌！”。 作界面，做结构设计最难的就是减法，QQ能在这个地方做到这点，真的很值得欣赏。
◆ 如图QQ01，我们看看两个很明显的第二视觉焦点“B”“C”，我想这应该也是QQ做的比较不错的地方 —— 让用户最常用最需要点击的地方最明显的出现用户面前。
◆ 一个让所有类似于这种POP形式的登陆窗口都不得不头痛的问题是“很多不很重要但不得不要的功能没有合适的地方安排！”。在这一点我觉得QQ2005也综合的很好，如图QQ01“A”处 我们可以看到QQ把这个头痛的选择都综合到了一起（包括他们的另外几个登陆模式），按照他们的市场需要按照客户的使用需要挑选出了四个最重要的放在了前面显示：“申请号码”“软键盘”“记住密码”“隐身登陆”，
当然在这里关于这四个挑选是否合理的讨论我想我们可以停止一下。因为：“只要简洁了简单了，就都是合理的”。
◆ 再看看里面的“记住密码”和“隐身登陆”。“隐身登陆”的作用就不用说了。当然如果你选择了“记住密码”QQ也会自己登陆，并由一个登陆过程的显示，登录的时候你也可以选择“取消登陆”然后再去“更改用户”。 但这个也存在一个问题“我选择了‘记住密码’但没有选择‘自动登录’呀，你干嘛问都不问我就自己开式登陆了呢？自作聪明！干嘛把‘记住密码’就认为是‘自动登录’呀？！！”
◆ 另外细心的朋友也许会发现QQ找不到设置“随系统启动”的位置在哪里？当然这也是为什么QQ的这个功能会在程序菜单的“启动”中。 还有一点把登陆窗口最小化放到右下角的做法，也是个很好的选择。更便于提醒用户“这个任务还在等着你去做”。
都说QQ没有真正的可用性团队，但是我们现在看到的人家在某些地方改进的却是很棒。（至少是我个人觉得他们的这些改进很好），期待着QQ下个版本在登陆界面上更简洁更便利更合理的改进…

MSN 登录

（图：MSN01）

MSN7.0改进最多的是功能，界面更有图形设计的苦心了，换句话说就是“炫”了。
当然让我们欣慰的是，炫的同时并没有出现过多的“花哨”或者繁琐。

◆首先我们看图MSN01，为了提现他的娱乐性“F”处我们是可以把那些土拉吧唧的主菜单和标题栏隐藏掉
◆再（右上至下）看看主区域的四个内容：1提示登陆（“单击下面登录”）、2保存记录过的用户名、3登陆操作按钮、4更换用户登录的提示文字及链接。（注意：如果没有保存登录记录就只有1和3两个内容了），这样看来及目的明确又合情合理，可谓是“胖一点则肥，瘦一点则虚”。但这里我还是想说“为什么不在一个窗口就搞定了，非得让我再点击一下、再弹出一个窗口？！”
◆如图MSN01 “B”区域，在这里我不得不说他“版式和内容都挺合理，虽然内容多了点”。
又是刚才提到的问题：我们可以看看YAHOO、ICQ等，他们是安排了“记住密码”和“自动登录”两个选项而MSN(包括UC等)只有一个“自动登录”，它的意思是“保存密码且自动登录”。当然可以解释说“ “保存密码”是“自动登录”的前提，不自动登录你干嘛选择“保存密码”呀？”。 但“保存密码”和“自动登录”本来就是两回事嘛。 个人赞成YAHOO的做法。
（而且这里还有一个特点：只能保存一个登录号码的密码记录。）
◆如图MSN01，“C”处是7.0版本中新加的一个功能，很便利的一个功能。也许这就是优势，那句话怎么说来着？ “你再说自己NB，你也只是BETA1.0我的已经是7.0了，总会用强于你的地方”
◆如图MSN01，“D”区域这里也是和刚才在QQ里提到的“QQ01图‘A’”处类似的一个问题，但在这里就没有那么麻烦了 因为类似于这样带“菜单栏”的登陆窗口完全不用考虑 “很多不很重要但不得不要的功能没有合适的地方安排！”问题了。
当然这里同样会出现另外的一个老生常谈的问题：当前状态没有或者不可用的功能是应该显示出来将其变灰还是直接干脆把这个功能给隐藏掉？（两个代表：我们可以看到YAHOO就是把目前不可用的功能直接隐藏掉了，MSN就是把这些功能变灰，各有其辞吧。）记得有一本关于UI设计的书里面提到了一个忌讳说的就是这个问题，那个书上说的是要“变灰”这样方便“预告”，我个人表示完全赞同！
个人觉得MSN的登陆界面已经趋向成熟，这张老脸我们就慢慢的对着吧。别去想它会有什么过大的变化了！

=================================================

MSN 7.5登陆

就在GTALK推出的当口我们看到了MSN7.5的新版推出，
细看一眼不难发现上边提到的问题在这里基本上都得以解决：
1、为了提醒用户他们把左上角收缩菜单栏的按钮加了个突出但并不是很难看的边框
2、把上文中我提到的“保存密码且自动登陆”修改成“保存密码”、“自动登陆”
3、把所有的登陆问题完全在一个窗口中解决了
4、增加了用户头像
5、改增了“获取新帐号”
6、第六点很关键，曾记得在7.0之前的MSN版本，如果你是首次使用光是选择注册登陆都要你半个小时的时间（以为MS认为这是和OS绑定的产品，他要先去找一些和OS习惯的关联..俨然一个WIN的附加产品），现在好了 我们可以直接使用帐户登陆了，算是一个独立的IM软件了…
这一点是我认为最人性的一个变化…
不过现在看来少稍微还是有一些繁琐，， 是不是可以再多一些简洁和适用的呢？ 我们期待…

哈哈，和家鼠一起讨论了一下；来了个“再版”。 （随意一改，别说我侵权哦！）

说明：
1、去掉了“保存我的信息”和“删除我的信息”，可以这样认为：
方案a：如果要保存密码就自动保存信息， 如果不保存密码就算了
方案b：只要你登陆了就会自动保存信息，退出软件的时候可以有一个提示“是否删除信息”（现在很多人这么做）； 只要你登陆了就会自动保存信息，如果你是在想删除。 就在下来列表中去选中然后删除。
也就是说添加了一个隐功能： 打开保存用户信息的下拉列表，选中一个信息 按“DEL”可以删除此信息。
2、“忘记密码” “获取新帐户” “服务状态”， 这些完全可以让用户点下面的链接进入网站操作（也可以在菜单中提供，当然也可以直接把下边的链接改成“进入网站”或者是“更多内容”）
3、改了几个像素的细节就不提了…

=================================================

ICQ 登录

（图：ICQ01）

看看ICQ的登陆界面：什么叫NB？什么叫自以为是？ 这就叫NB。 你们慢慢折腾吧，累不累呀！我就是不变，10年如一日保持我的登陆界面不变！依然小巧玲珑！

◆如图ICQ01“A”处，“都没外人，谁不知道谁呀！我这里可以号码登陆也可以邮件登陆你就不多啰嗦了。”
◆如图ICQ01“C”处，不是我不明白，是这些洋鬼子和咱区别太大！就这么点的内容干嘛占这么大的地方呀？为了变现北京的那个花？ WK！大哥别小看这么点地方，要是建奥运场馆的话，可值几箩筐金币的呀！
◆如图ICQ01“B”处，父老乡亲们你们明白他这个地方这句话的意思么（我是这天电脑的(M) 客人）？大哥们，我真的不知道怎么措辞才能简单的表单他的意思，但真的别写的这么难懂呀！MD，是这些洋鬼子聪明还是我太笨呢？?！！ 他的意思是：“我是这台电脑的客人，我只是临时使用。所以不用保存号码的密码（把这个选项钩选就可以发现“保存密码”、“自动登录”是不可选的了）”不过把“客人”两个字链接到帮助还算是个不错的想法。
◆如图ICQ01“D”处，瞧好吧您咧！！ 谁能很有把握的说出这里的这个X是什么意思？
它的功能是“删除号码的历史记录”。为什么放在密码后面？别问我，他们干的事我也不明白！（可能是这里能挤出来一块空地儿，而且还挨着号码记录比较近吧。）
别急！（点这个Ｘ会弹出一个窗口）要删除号码的历史记录还要能正确的输入要删除号码的相应密码。这招够绝吧？！　　不是你的号码，你就比乱动！
还有一点值得提出来：“A”处下拉框点击下去会有一个“新号码”，选择“新号码”链接会进入注册．．．

雅虎通 登录

（图：YAHOO01）

忍不住想说“雅虎通”的登陆动画挺逗的挺好玩的。雅虎通的登陆给我的第一感觉就是“不管你怎么登陆，不管你是否保存了密码（除非设置了自动登录）　我都是一样显示，以不变而应万变。你保存了密码我就给你显示出来，没有保存就空着。反正我的格局和显示基本是不会变的！”我觉得这样挺好。

◆如图YAHOO01 “A”,这就是他们刚才提到的一直保存不变的登陆窗口，基本上没有什么啰嗦和多余的部分，布局也算比较合理。
◆如图YAHOO01 “C”处,万一你不小心点了“A”区域的“取消”。没关系，你还可以在这里点击登陆调出这个窗口。当然如果你已经保存了用户和密码且选择了自动登录那么就可以直接自己登录了。
◆如果你设置了自动登录，它还有一个专门弹出的登陆过程如“D”，起码这样不至于不声不响的突然登陆进去了让你不知所以…　有人说雅虎通很知道省事，但人家不该省的地方一点也没省嘛！人家只是ＧＵＩ作的比较聪明省事而已（后话）
◆“E”就是我们刚才在上文MSN的登陆中提到的“当前状态没有或者不可用的功能是应该显示出来将其变灰还是直接干脆把这个功能给隐藏掉？”。在这里就不再多少这个问题了。

SKYPE 登录

（图：SKYPE01）

SKYPE的登陆界面算是比较朴素的，一进去就是一个只有“单击此处登录”的按钮，点击然后出现一个登陆框。（如图SKYPE01），当然这里也有这样的一个同类的问题(“D”处)：“当前状态没有或者不可用的功能是应该显示出来将其变灰还是直接干脆把这个功能给隐藏掉？”SKYPE选择了我喜欢的变灰。

在这里我不得不想说两个比较重要的问题：
◆如图SKYPE01“A”，爷们儿！你吃饱了撑的也别累我玩呀！那么大的窗口你只放一个按钮，非得让我点一下这个按钮再输入登陆信息，累不累呀？！！（起码你也得学学人家雅虎通自己把登录窗口弹出来呀！）
◆上边提到了“非得让我点一下这个按钮再输入登陆信息”，那就点吧！（谁让咱是人气吞生的用户呢） 点一个那个按钮 —— WK！大哥你吓死我吧！我的分辨率可是1280*800呀！你的窗口还是快把我吓坏了，你们家的地是祖宅吧？（不掏钱）。干嘛要这么大呀，我又不是眼花…
看他那提示“我已经具有SKYPE帐户 – 登陆SKYPE”“是否忘记了您的密码”…！再傻的人也能看懂了！ （且不说他的英文版本是什么样，反正这样的中文文字估计不是中国人弄得）
◆如图SKYPE01“B”，这个地方让我有点纳闷：“在启动机器时启动SKYPE”为什么放在这里呢？很重要么？ 真想有人帮我解释一下。。。
再看看那个“下一步”，　　哦．．．．　　哎，就算是．．也没必要．．．．
哎，本来还划了一个“C”的，我也不想说了…
传说TOM购买SKYPE后用户越来越多利益越来越大，越玩越过瘾… 但也不至于一点不管他呀？ 这也太浪费了吧？！！　浪费空间，浪费文字，浪费使用者的脑细胞．．　Ｉ　服了　ＹＯＵ　！

网易泡泡 登录

（图：POPO01）

首先想说POPO的形象确实挺漂亮…
POPO的登陆界面猛一看很多人都说“挺普通的”，我也觉得如此。
不过细看一下确实很多地方挺合理，整体挺好的..
◆ 如图POPO01 “A”，看样子这句话对POPO来说应该很重要，但是是不是字数稍微有点多呢？放在这里合适么？
◆如图POPO01 “B”，这个空间的利用我觉得很聪明
◆如图POPO01 “C”，这种弹出窗口的这个功能选择这个解决方法虽然很普通，但是也算是个很不错的选择。
其他地方也挺合理， 总是一句话“别说我俗！只要我适用合理”

新浪UC 登录

（图：UC01）

星星！~~ 五颜六色的星星~~ ，我头晕~
粗粗的数一下UC的登陆界面有多少个色你一定能表示很佩服他的设计者！ 粗粗统计一下UC的登陆界面有多少个直接表现出来的元素，你一定会对原型设计者竖起大拇指！（大哥你家住在天安门吧？ 寸土寸金能放上去的都要放上去，不挤死个把蚂蚁不算完！）

◆如图UC01 “A”，这里就是在一开始说到了QQ省去的地方。QQ做了减法UC却做了加法！ 难道用另外几种登录方式的用户确实有很多么？难道UC需要大力推官他另外几个登陆方式么？ 那么也该有个主次吧？ 都放出来表示你很NB么？
◆如图UC01 “B”，这个“更新好友信息”真的费了一番苦心！够心细的…
◆如图UC01 “C”，“申请密码保护”为什么放在这里？着重体现UC有这个密码保护功能么？不理解！！ 如果他真的需要完全可以登录进去以后申请嘛，或者能不能有其他的方法呢？放在这里不伦不类的…
◆如图UC01 “D”，找了三个从来没有用过UC却用其他聊天工具很多的人作了一下测试，结果不出我所料。有一个人输入完信息后“不小心”就“顺手”点了“登录”旁边的那个“关闭”！ 不明白把这里躲这个一个“关闭”是什么意思，上边不是有一个x 可以用来关闭么？就算你想让用户方便的关闭也没必要放在这里呀？！ 再说了，干嘛去鼓励用户关闭这个窗口呢？（只要有这个功能就可以了，不用这样的区鼓励用户的这个操作吧？！）
◆如图UC01 “E”，UC安排这个功能让我有些意外和惊喜！确实很信息，而且是一个很不错的功能！ 这次真的要竖起大拇指了! （如果你忘记了你难记的数字号码，就可以通过这个功能去找到你的密码。只要输入你的邮箱或者另外的注册信息。）
还有他这里的“自动登录”也是保存密码且自动登录的意思 。
个人觉得但就登录界面来说，UC做的很费心也很认真明显的下了不少苦心，但是可能在方式方法上还是存在一定的问题！

263ET 登录

（图：ET01）

可以说ET的登陆界面结构设计有我一定的建议和参与在里面，但一样存在几个无奈的问题：
◆如图ET01”B”，记得当时因为这个“取消”的问题我提出过几次争议后来还是被驳回了。现在我还是想问“有必要么？ 放在这里合适么？ 鼓励这个功能么？”
◆“A”“D”“C”的问题在这里就用再提了，在这里还算“比较合理”
◆我们看一下“E”，很明显的一个错误 “et号”VS“et号码”！

SQ 登录

（图：SQ01）

看见登陆界面有上角的那个小飞机了么？ 挺有意思的，， 这个小飞机使这个画面不空白了而且也变得很有意思了…
◆如图SQ01“A”，看看人家SQ弄的：很详细的告诉你“记住我的用户名和密码”整整齐齐九个字！，当然他们把保存密码和自动登录分开了。
◆如图SQ01“B”，这堆字也许很重要，但是是不是有点繁？
◆如图SQ01“B”，如果你保存过用户和密码点击“点击此处登录”会弹出上边的登录窗口，也许你会问“为什么不在这个窗口内完成呢？”继续走着：＂Ｄ＂看到没有？　ＳＱ不止可以保留一个用户信息，它最多可以保存两个历史用户的密码。
我不禁想问了：你只能保存两个不疼不痒的，何苦呢？这么费劲．．．

LAVA_LAVA 登录

（图：lavalava01）

这个登录界面很多人都是“太难看了”，但是细细的看下去还可以说“布局挺合理的”

贸易通 登录

（图：MYT01）

如果你选择了保存密码，当你再次打开贸易通就会首先上边的这个界面。但你可别以为那是让你去点，他停了不到0.1秒（闪一下）马上就开始进入登录过程的界面了… 我想问：何必呢？调戏我呀？给我晃一下是什么意思？ 我保存密码又不是要自动登录你干嘛直接给我登录了呀？ 晕乎~~
◆如图MYT01“A”，把“检测新版本”放在这里是什么意思？ 这个功能有这么重要么？
◆再看看“B”和“D”， “会员登录名”VS“注册新用户”！再看这句话“不是**会员，注册新用户”！难道他们的会员和用户存在很大区别？那就就“注册成会员”呗！
◆继续看“C”你注销以后，如果有历史密码保存就会出现这个界面。但是我不明白这个LOGO和一开始的LOGO怎么一大一小？同是一个产品的同一类界面LOGO的区别怎么就那么大呢~~
◆如图MYT01“F”，真不知道是为了好看还是因为什么。非得白白的安排这么高的一个空白修饰区域（足够20像素高）。再说我也没觉得好看呀，如果要是能好看点怎么做还没意见..
◆如图MYT01“E”，从这里我们能够明显的看出来这个软件建设的初衷。以为有这样的比要，所以这个搜索这个位置确实很合理…

淘宝旺旺 登录

（图：taobao01）

淘宝旺旺是众多IM软件中我比较欣赏的一个。但他的登录界面也不是十分的合理…
◆如图taobao01“A”“B”这两个地方个人认为都比较合理..
◆“C”这样的文字往往是我们不知道注意的地方。如果文字改成“输入搜索关键字”是不是更合适呢,,,
◆如图taobao01“A”“B”: 为什么LOGO不一样呢？

GOOGLE TALK 登录

写到旺旺的时候差点无法写下去了，但是现在到了Gtalk突然有了兴趣。
怎么说呢？就两个字“合理”“简洁”“适用”！

实在不愿意一点点的再去说了，现在开始总结一下问题：

1、登录界面应该更简洁，以完成用户的第一目的——登录 为中心思想，无须瞎扯太远！

2、关于一些不是至关重要的问题应该坚持一个原则：把它们综合起来用户能找到就行，没必要那么突出！特别是一些不太鼓励用户使用的功能。

3、一些目前不可用的功能需要保留下来并使用不可用状态。

4、某些登录流程能省就省，但每个过程都需要交代出来。最重要的千万不要给用户增加过程！能一个界面内解决的问题不要再多采用一个界面！

5、一些细节和术语问题需要规范和注意

6、不一定是功能越多越好，而是越方便就好！特别是不要为了一下小的无关紧要的功能而大费气力…当然说了这么多让我觉得最好的几个还是：Gtalk、MSN、POPO、雅虎通

找到了前一段作过的一个登录界面原型：

一口气写完发现有很多不尽人意的地方， 目的没有表达明确…

夜深人静，错误别也没有力气整理了。

作为草稿，日后整理…

勿转载！

分类：UCD ,05/08/25 11:22 下午 | 17,141 次浏览 |