1.图形化的导航 　　 　　社交网的信息十分繁杂，因此导航的引导就显得至关重要。没有公司比Google更大胆了，将导航的tab全部简化成icon，只有鼠标hover上去的时候才会显示这个tab的注释。显然，这对新手用户而言，有一定的学习门槛的，但是我们从中无不从中感受到了简洁的力量，图形化导航让整栏显得干净整洁，功能集中，切换方便。

纵观国内外几大主流社交网的导航，导航大多采用的是文字，虽然从功能上看一目了然，但是由于文字本身不够简洁，排布起来有局限，那么只好在设计的时候，更要考虑功能的归纳分布以及优先级展示，隐藏不常用的功能。

2.使用灰色按钮 　　 　　经常做设计的人都知道，灰色按钮代表着是被禁用的功能，是不可点击的。然而Google+却大胆的使用了灰色按钮，通过鼠标hover告诉用户这是可点的。仔细想来，这用做以下两个原因：一、平衡了页面的配色。由于Google的logo主题色有四种，如果让按钮们默认展示原有的颜色，页面会看起来很花，没有重点。像这样灰掉的处理，使选中的tab更加突出，也不会带来干扰。二、按钮由灰点变彩色的方式给人一种点亮图标的暗示，增强了用户点击按钮的欲望。

从图标的发展趋势来看，无论颜色还是形态都是朝着简洁方向走的，过去花花绿绿的图标已经失去了它原有的标识感，纯色的图标应用起来会显得更上流，更高端。更优雅，更亲切的科技感。

3.鼠标所到之处均有反馈

网页上的大多数元素，在鼠标滑过的时候，都应该有其相应的反馈。无论是仅仅发生鼠标指针变化，还是出现下划线，或是结合一些简单功能的操作和注释来显示。设计师在做静态设计稿时，很容易忽略这些设计细节，但这正是一个产品体现良好交互性能的关键时刻。就好比和人交谈，如果他对我的话语没有任何反映，我也会减少对他诉说的兴趣，如果他时而点头，时而微笑，时而赞许，那么我可能会有更多更有意思的事情告诉他。因此，哪怕仅仅是边框的颜色变深了一些，也能表达这个页面对用户是友好的，而不是不理不睬的。

hover态是展示用户在当前页想知道的相关内容的最佳时机。例如鼠标划到头像时，会出现那个人的相关信息等。Hover态还可以对某一模块有强引导的作用，例如Google会强调它的搜索功能。另外，还可以用于隐藏一些不常用的操作，例如删除等。

4.简单任务在当前页完成

这里最值得一提的是Google+加好友和分组的流程优化。原本加好友和分组是两个独立的任务，分组是在对方同意加好友时才能进行，由于Google+推出的是单向关系链，因此将分组可以提前到添加好友这一步做。原本加好友是需要点击按钮，如今只用hover上去就会出现分组框，大大降低了加好友和分组的操作门槛。用户最少只要点击一下即可完成两步步骤。如今Face book等一些双向关系链的社交网也开始学习这种快速加好友和分组的方式。

5.feed实时滚屏更新

Feed就是我们的每天订阅的新消息。相信大家对下面的小黄条都不陌生吧，国内大部分网站都是采用点击小黄条来查看新的消息，而Google+是自动滚屏的方式展示最新消息，并在左侧出现一条蓝竖线，表示是最新更新。Google的设计之所以显得灵动，还有一个重要的原因，在于它的这些状态的改变都伴随着优雅的动画，而不是赤裸裸的出现、消失。包括feed的评论和赞，都是实时更新，配上简单华丽的动画，简直就像在看现场直播。

6.即时的系统反馈

　　类似上图中的提示条在整个网站都是统一一致的，它们都是自动出现，自动消失，有的还肩负着简单的操作，例如图中的撤消等。有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。 　　综上所述，本文从灵敏轻便的角度，对Google+的体验进行分析，总结出以上六点让web更轻便灵敏的设计方法，希望能给大家带来一些参考。

现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方 　　如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验， 安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。

精致的质感表现 　　iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。

iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。

小清新的插图 　　在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。

Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

人文关怀的品牌传达 　　设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。

新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。

越来越大的登录框 　　越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

简约而不简单 　　WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。

随着互联网的高速发展，移动互联网的到来，WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功，但却能为产品加分，为产品注入设计DNA，创造独特的风格和视觉感受， 好了，今天就先侃到这，作为用户使用的入口，希望这篇小文可以让大家对登录页面重视起来，设计出更多精彩的登录页面。

原文：http://cdc.tencent.com/?p=5037

有人统计，用户能够忍受的最长等待时间大约在 6～8秒之间。8秒是一个临界值，如果网页加载时间在8秒以上，很有可能大部分访问者最终都会离开该页面。除非他一定要打开那个页面。

以上三种是常见的loading方式，如果是我，我更希望看到第三种的进度条，因为我实在不知道第一个圈圈要转多久才能算加载成功，也不知道第二个点点点要点到猴年马月。

但是如果这个时候，界面除了看到“加载”以外的东西，是否就能转移用户的注意力呢？比如我们在银行排队的时候，如果我们无时不刻看着自己手中的号码牌和叫号板，虽然知道自己大概什么时候会轮到，但是依旧会无聊和烦躁。这时候银行里的一些宣传单起到了很好的作用：比如各种银行的理财产品，如果你不小心还看到了适合自己投资的，肯定会激动不已，觉得这个等待时间给自己带来的意外的收获，即使没有得到自己想要的信息，也不会觉得那么无聊了。又比如视频在缓冲的过程中，总是会放一段广告，我一直弱弱滴认为这个好鸡肋，舍不得放弃看那个视频，但又要忍耐这个加载时候的广告。但是如果广告做得很棒，就一点都不烦躁了，甚至还在评论里看到求加载广告的地址。网页的loading就承担了宣传单跟加载广告的作用。

在页面局部加载时常能看到第一个圈圈的身影，不过每次看到这个圈圈都差不多，如果换一种转圈的形式，也许会觉得“这个圈圈跟别的好像不太一样”，通过好奇减少等待的焦躁。

下面我找了一些变过形的圈圈，是不是多了一些新意呢？

减少用户的焦虑，可以给个允诺，示意他们还要加载多久，告诉现在的进度（有个进程百分比），算给一个定心丸。例如以下的方式：

其中上图最下面一种进度条又有不同的设计：

上面两种确定性进度条虽然都提示了现在的进程，但它们的差别是，第一种的进度条内容是纯色，第二种进度条内容有动画效果，如果这个进度条再某点上突然停住了，这时候会给用户造成困扰，到底是卡死了还是这段的加载比较慢呢？如果是下一种进度条就一目了然，如果卡死，那动画效果就没了，如果依然有动画效果，那就说明只是这一段加载比较缓慢。

如果进度条再进行一些变形，不仅告诉了用户现在的加载进程，还别有一种欣赏的意味：

PS：上右是搜狗实验室的logo，但是这个创意做成loading也很棒啊，还加强了品牌印象。

除了进度条变形外，还可以从文案下手，例如，下面的是“下厨房”的APP的加载页，虽然只有短短的一句话“是谁来自山川湖海 却囿于昼夜 厨房与爱”虽然只闪过短短一秒钟，这非但没给用户带来烦躁的感觉，反而觉得这个应用有一种特别的气质，不仅加深了印象，更带来了好感。

一般电影上映前都有一段预告片来吸引观众去观影。显露冰山一角，以此激起用户的好奇心，也告诉了用户大概情况。

上图是QZONE的热门应用游戏——捕鱼大亨的登陆页，这个loading的进度设计就像一个鱼雷的行程，不仅告诉玩家现在加载到哪个进度，尾部的小水花也似乎在说我一直在努力加载。另外，这个加载速度有点慢，上方还有场景图介绍，以此让玩家有更多的了解。这种弹出窗口展示放大图片和多个视图也是许多顶级在线零售商所采用的方法。虽然加载有点慢，但是给玩家这样一个暗示：这是非常值得的等待。

此外，如果要加载的东西比较多，那么加载进度肯定会比较慢，呈现一种加载条一直滞留不动的情况，在这种情况下，我们可以把进度条分成多个进度条多次加载以安抚用户焦躁的心。但是每次加载最好都配有文字显示现在在加载的内容，不然一次又一次的进度条会让用户恐慌“这到底要加载多少次才是个头！”但是如果像下面一样，明确告诉用户在加载的内容，就算用户是有些烦躁“怎么有这么多要加载”但是每次都相对加载得比较快，而且每次加载都有理有据，让用户觉得这个加载还是有必要的。

要减弱用户的焦躁，“增强用户的期待值”也不失为一种好方法，除了对本身网站的期待，还有对“进度条本身”的期待。

如果在不同的百分点上都会有不一样的颜色，那么用户也许在等待的时候会想：下一秒会是什么颜色呢，从而，好像也不是那么急了。

这个小人的表情好丰富，但是似乎又代表了用户的心情，看着他挪动并有不同的心理，就像在看一个好玩的gif。

这是印像派的新版制作间登陆，在等待的同时还告诉客户有哪些产品可以使用到制作间，既传达了品牌的信息，也让用户在等待时不那么枯燥。

此外，如果这个是多次登陆的网站，那么不管捕鱼大亨的场景展示，还是yxp的步骤流程展示，似乎这些展示只在第一次会起到比较特别的作用，但是如果每次都附带给登陆者不同的信息，那么，用户每次都有小惊喜，比如每次都随机出现一些小提示（以下分别是四次loading）：

虽然加载是个小细节，但是也很有可能不经意间让用户流失。以上是我的一些小心得，虽然搜集的这些设计方式可以减缓一些用户烦躁的等待情绪，但是真正可以减缓的办法还是加载的速度增快；别致的设计可以治标，加载速度提高是治本。在加载页中显示进度，给出承诺，增加信息量或者幽默内容都能使用户潜移默化减少“觉察”正在加载的时间。当然，烦躁是一种心情，加载是烦躁的导火索，但是如果每天保持好心情，那对待等待的耐心也会大大增加哦^.^

最后，送上一个可以生成加载圈圈的小工具，希望可以对您有帮助：

http://preloaders.net/en/circular

原文：http://uedc.163.com/8809.html

Egopop

Shout

Cloudy with a Chance of Meatballs

Cultural Solutions, UK

Go Live

Mauricio Guimaraes’ Portfolio

Meomi

Lilia’s Planet

Filidor Wiese

Convax

Ladio

Patagonia

Sensi Soft

On Toyota’s Mind

PrismGirl

Head2Heart

GE Ecomagination

Hippo App

Creative with a K

Infrared 5

Ben Faragau

Whittaker’s Chocolate

Machinarium

Markez Models

Ben the Bodyguard

Go Live

Nike Better World

Iutopi

Smokey Bones

Reverend Danger

Seamco

Jack Johnson Music

Nespresso

Red Bull Soapbox Racer

Zune Journey

Tinman

英文来源：36 Interactive and Interesting Samples

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

必选项是以什么形式出现在现如今的表单中的呢？

1、 表单信息的表现类别

下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。

41%的网站使用标签右对齐 （YouTube, Facebook, Metacafe）

30%的注册表单使用顶端对齐（Behance.net, Wufoo, Tickspot, Mixx, DZone）

29%使用的是标签左对齐（(Digg, Ning, Wykop.pl, 43things, StudiVZ）

2、 表单的应用范围

1） 注册

2） 登陆

3） 填写信息（支付，订单填写，个人信息填写等）

4） 发布

3、 必选项显示形式

1）以*展现形式

a）*在信息标签的左侧

b）*在信息标签和填写信息的右侧

c）*在信息标签和填写信息的当中位置

d）*在信息标签右侧

2）非*必选标志

a）非*icon表现形式

b）无必选项标志（都是必选项）

c）标注非必选项

d）暗提示

4、 必选项的深入思考

1）*和非*思考

a）*作为一个用户习惯已经存在了很多年，现在用户只需要看到文本框前面的*就基本知晓其为必选项，有些网站已经将“*为必填项”之类说明文字也直接隐藏了。那么对于这个用户基本不需要太多思考就知晓的图标，对于需要简化用户思考的表单来说确实要优于一些其他的非“*”icon的出现了。

b）有人会疑问一个表单，如果都是必填项，还有必要用*去标志出每个必填项吗？在没有必填项标志的时候，大部分人会有两种不同的理解，一类人会认为，这些均为必填项，而另一类人则会理解为此处均为非必填项，那么在这种情况下，如果标记了必填项可以满足不同人群的思考。

还有人，会疑问在一个表单中大部分项为必填项只有少部分为非必填项时，我们是否可以直接在非必填项旁标志出非必填的标志呢？当一个页面大部分为必填项时，而只有少量非必填项时，非必填项如果做的太弱化会导致整页无法区分必填还是非必填；而如果非必填项做的太过突出的话又反过来突出了页面中需要弱化的信息项，用户反而会去焦点关注在他们可填可不填的项中，有点适得其反。

因此，我还是认为当页面中的表单，无论是全部都是必填项还是大部分必填项，我们还是以“*”标出，这样也能使各类用户都不产生理解性的错误。

当然了，不同情况下的运用当然也有所不同，例如：用户在登陆时的认知，通常用户在登陆时输入项如用户名，密码等信息，而且此些项也基本是必填项，在这种认知的基础上，即使不出现*也不会造成任何理解性问题，那么作为精简原则来说，通常可以去掉*。

c）文本框内必填项暗提示，也是一个比较清晰标志必填项的方式，并且还很节省空间。

但是现在很多网站都在文本框中对文本框填写方式做其他暗提示，这个时候必填项暗提示就相对会被限制使用的范围了。作为必填项暗提示标志，还有两个致命的缺陷就是，当我填写完成时，我并不了解哪些是必填项哪些为非必填项，还有就是对于radiobox、checkbox、下拉框的必填来说也没有很好的解决方案。因此，在使用必填项暗提示时，在表单形式为文本框，并且文本框内无其他暗提示语句的时候也可以使用。

2） *思考

a）用户对于表单的视觉走向

从这张热点图中可以看出，对于表单类别的视觉走向是以左边标签为主向右延展。大部分用户集中在标签位置，通常用户填写顺序也是从上至下的，从左至右，较少用户会选择跳跃式的填写模式。

b）*位置

从上述用户视线流可以看出，*的位置应该在标签附近，并且能够整齐排列（这个可能还需研究）会更一目了然的展示出必填项。

这个时候作为：

标签左对齐的时候，*直接出现在标签前面，明显比较优，但是由于标签左对齐对于表单来说，标签项和填写项位置离开太远，可能会让用户搞不清楚到底哪个标签对应哪个文本框，因此此类标签方式不太赞成出现。

       那么标签右对齐的时候，*出现在标签与文本框当中，个人认为相对前一种来说要舒服很多了。不仅使得标签项和*标志和文本框等都离得很近，而且*的位置还可以成一直线对齐。如果*出现在文本框或者其他项的后方，会使得用户不得不跳跃视线，并且他们在填写完成时才意识到哪些是必填哪些非必填。

       标签顶对齐，此类方式，经常出现在宽度有限制的时候，也是目前经常看到的表现方式。按照之前的理论来说此类方式为了视线流更好的展示，个人认为标签前面带*会比较好，这样使得*、标签、文本框位置最近，也使得*能成直线展示。

当然还有一类特例，就是表单一行有多个填写项，这种方式*如果位置不当，很容易让人误解*的位置，如下图：

       此图中，姓名前的*很容易让人误解为是下拉框出的*。因此这时候*位置如果在标签和文本框当中可以很好的规避此类误解。

       虽然目前，我们认为标签右对齐，*出现在标签与文本框当中方式较优，但是也会出现特例，比如当出现radiobox的时候如果*出现在标签和radio当中，那么就会如下图：

总结：必选项是一个很小的展示方式，但其中还是存在很多很多的特殊问题，交互就是让我们思考页面中每个细小的环节，这样才能使用户在整体页面体验中获得最优最快捷的操作方式。当然具体情况还有很多很多，需要我们思考和考虑的地方也有很多，如果大家有很多的想法可以联系我们，让我们更好的充实我们每个blog文章。

原文：http://ued.ctrip.com/blog/?p=2493

用户名和口令

首先，我们先来说说用户名和口令的事。这并不是本站第一次谈论这个事了。如何管理自己的口令让你知道怎么管理自己的口令，破解你的口令让你知道在现代这样速度的计算速度下，用穷举法破解你的口令可能会是一件很轻松的事。在这里我想告诉从开发者的角度上来做设计这个用户名和口令的事。下面一几件规则：

• 限制用户输入一些非常容易被破解的口令。如什么qwert，123456,
  password之类，就像twitter限制用户的口令一样做一个口令的黑名单。另外，你可以限制用户口令的长度，是否有大小写，是否有数字，你可以用你的程序做一下校验。当然，这可能会让用户感到很不爽，所以，现在很多网站都提供了UX让用户知道他的口令强度是什么样的（比如这个有趣的UX），这样可以让用户有一个选择，目的就是告诉用户——要想安全，先把口令设得好一点。

• 千万不要明文保存用户的口令。正如如何管理自己的口令所说的一样，很多时候，用户都会用相同的ID相同的口令来登录很多网站。所以，如果你的网站明文保存的话，那么，如果你的数据被你的不良员工流传出去那对用户是灾难性的。所以，用户的口令一定要加密保存，最好是用不可逆的加密，如MD5或是SHA1之类的有hash算法的不可逆的加密算法。CSDN曾明文保存过用户的口令。（另，对于国内公司的品行以及有关部门的管理方式，我不敢保证国内网站以加密的方式保存你的口令。我觉得，做为一个有良知的人，我们应该加密保存用户的口令）

• 是否让浏览器保存口令。我们有N多的方法可以不让浏览器保存用户名和口令。但是这可能对用户来说很不爽。因为在真实世界里谁也记得不住那么多的口令。很多用户可能会使用一些密码管理工具来保存密码，浏览器只是其中一种。是否让浏览器保存这个需要你做决定，重点是看一下你的系统的安全级别是否要求比较高，如果是的话，则不要让浏览器保存密码，并在网站明显的位置告诉用户——保存口令最安全的地方只有你的大脑。

• 口令在网上的传输。因为HTTP是明文协议，所以，用户名和口令在网上也是明文发送的，这个很不安全。你可以看看这篇文章你就明白了。要做到加密传输就必需使用HTTPS协议。但是，在中国还是有很多网站的Web登录方式还在使用ActiveX控件，这可能成为IE6还大量存在的原因。我通常理解为这些ActiveX控件是为了反键盘记录程序的。
  不过，我依然觉ActiveX控件不应该存在，因为在国外的众多安全很重要的站点上都看不到ActiveX的控件的身影。

用户登录状态

首先，我想告诉大家的是，因为HTTP是无状态的协议，也就是说，这个协议是无法记录用户访问状态的，其每次请求都是独立的无关联的，一笔是一笔。而我们的网站都是设计成多个页面的，所在页面跳转过程中我们需要知道用户的状态，尤其是用户登录的状态，这样我们在页面跳转后我们才知道是否可以让用户有权限来操作一些功能或是查看一些数据。

所以，我们每个页面都需要对用户的身份进行认证。当然，我们不可能让用户在每个页面上输入用户名和口令，这会让用户觉得我们的网站相当的SB。为了实现这一功能，用得最多的技术就是浏览器的cookie，我们会把用户登录的信息存放在客户端的cookie里，这样，我们每个页面都从这个cookie里获得用户是否登录的信息，从而达到记录状态，验证用户的目的。但是，你真的会用cookie吗？下面是使用cookie的一些原则。

• 千万不要在cookie中存放用户的密码。加密的密码都不行。因为这个密码可以被人获取并尝试离线穷举。所以，你一定不能把用户的密码保存在cookie中。我看到太多的站点这么干了。

• 正确设计“记住密码”。这个功能简直就是一个安全隐患，我觉得并不是所有的程序员都知道怎么设计这个事。下面是一些方法供你参考。

1）在cookie中，保存三个东西——用户名，登录序列，登录token。

用户名：明文存放。
登录序列：一个被MD5加密过的随机数，每次以输入口令的方式登录后更新。
登录token：一个被MD5加密过的随机数，仅一个登录session内有效，新的登录session会更新它。

2）上述三个东西会存在服务器上，服务器的验证用户需要验证客户端cookie里的这三个事。

3）为什么要设计这个样子？因为，

a）登录token是单实例登录。意思就是一个用户只能有一个实例。

b）登录序列是用来做盗用行为检测的。如果用户的cookie被盗后，盗用者使用这个cookie访问网站时，我们的系统是以为是合法用户，然后更新“登录token”，而真正的用户访问时系统发现，只有“用户名”和“登录序列”相同，但是“登录token”
不对，这样的话，系统就知道，这个用户出现了被盗用的情况，于是，系统可以清除登录序列
和 登录token，这样就可以令所有的cookie失效，并要求用户输入口令。并给警告用户系统安全。

• 不要让cookie有权限访问所有的操作。否则就是XSS攻击，这个功能请参看新浪微博的XSS攻击。下面的这些功能一定要用户输入口令：

找回口令的功能

找回口令的功能一定要提供。但是很多朋友并不知道怎么来设计这个功能。我们有很多找回口令的设计，下面我逐个点评一下。

• 千万不要使用安全问答。事实证明，这个环节很烦人，而且用户并不能很好的设置安全问答。什么，我的生日啊，我母亲的生日，等等。因为今天的互联网和以前不一样了，因为SNS，今天的互联比以前更真实了，我可以上facebook，开心，人人网，LinkedIn查到你的很多的真实的信息。通过这些信息我可以使用安全问答来重设你的口令。Facebook的安全问答很强大，还要你通过照片认人。

• 不要重置用户的密码。因为这有可能让用户的密码遭到恶意攻击。当然，你要发个邮件给用户让其确认，用户点击邮件中的一个链接，你再重置。我并不推荐这样的方法，因为用户一般都会用笔记下来这个很记的口令，然后登录系统，因为登录系统时使用了“记住密码”的功能，所以导致用户不会去修改密码，从而要么导到被写下来的密码被人盗取，要么又忘记了密码。

• 好一点的做法——通过邮件自行重置。当用户申请找回口令功能的时候，系统生成一个MD5唯一的随机字串（可通过UID+IP+timestamp+随机数），放在数据库中，然后设置上时限（比如1小时内），给用户发一个邮件，这个连接中包含那个MD5的字串的链接，用户通过点击那个链接来自己重新设置新的口令。

• 更好一点的做法——多重认证。比如：通过手机+邮件的方式让用户输入验证码。手机+邮件可能还不把握，因为手机要能会丢了，而我的手机可以访问我的邮箱。所以，使用U盾，SecureID，或是通过人工的方式核实用户身份。当然，这主要看你的系统的安全级别了。

口令探测防守

• 使用验证码。验证码是后台随机产生的一个短暂的验证码，这个验证码一般是一个计算机很难识别的图片。这样就可以防止以程序的方式来尝试用户的口令。事实证明，这是最简单也最有效的方式。当然，总是让用户输入那些肉眼都看不清的验证码的用户体验不好，所以，可以折中一下。比如Google，当他发现一个IP地址发出大量的搜索后，其会要求你输入验证码。当他发现同一个IP注册了3个以上的gmail邮箱后，他需要给你发短信方式或是电话方式的验证码。

• 用户口令失败次数。调置口令失败的上限，如果失败过多，则把帐号锁了，需要用户以找回口令的方式来重新激活帐号。但是，这个功能可能会被恶意人使用。最好的方法是，增加其尝试的时间成本（以前的这篇文章说过一个增加时间成本的解密算法）。如，两次口令尝试的间隔是5秒钟。三次以上错误，帐号被临时锁上30秒，5次以上帐号被锁1分钟，10次以上错误帐号被锁4小时……

• 系统全局防守。上述的防守只针对某一个别用户。恶意者们深知这一点，所以，他们一般会动用“僵尸网络”轮着尝试一堆用户的口令，所以上述的那种方法可能还不够好。我们需要在系统全局域上监控所有的口令失败的次数。当然，这个需要我们平时没有受到攻击时的数据做为支持。比如你的系统，平均每天有5000次的口令错误的事件，那么你可以认为，当口令错误大幅超过这个数后，而且时间相对集中，就说明有黑客攻击。这个时候你怎么办？一般最常见使用的方法是让所有的用户输错口令后再次尝试的时间成本增加。

参考文章

• OWASP
  Guide To Authentication
• Dos
  and Don’ts of Client Authentication on the Web （PDF）
• Charles Miller’s Persistent Login Cookie Best Practice
• Wikipedia: HTTP cookie
• Personal knowledge questions for fallback authentication: Security
  questions in the era of Facebook

一、表格已死，可视当立！
在互联网还没有诞生的年代，有一群元老们为数据可视化做出了不可磨灭的贡献，而至今他们仍在在努力地工作着，他们就是表格、饼图、柱状图等。

可事实情况是，饼状图和图表只适合表现一个维度的信息，表格也只能表现X,Y两个方向上二维的信息，这种传统的数据展现形式对于驾驭表现现代化的大量，复杂，多维度，的信息需求而显得力不从心。这种矛盾的产生，让新的数据可视化设计形式在近年来备受瞩目。

二、人佛皆有装，数据也着衣
数据可视化（Data
Visualization）最早起源于1960年计算机图形学，人们使用计算机创建图形图表，将数据的各种属性和变量呈现出来。而在如今的信息爆炸时代，需要更高级的计算方法来给人们创建更复杂、规模更大，甚至是动态效果、实时交互的数字模型，因此数据可视化孕育而生。
俗话说，人靠衣装，佛靠金装，数据也是一样。

在数据可视化领域，主要有两个研究方向：
1.信息展示类——将丰富的信息进行整合、分析，从中提炼出最具意义的信息，以多样的、有趣的形式展现，供人们参考，引发思考。
中东——谁支持立即停火？
07年发表于“独立”杂志头版的信息图

Amaztype
在Amaztype图书搜索上搜索想要的书籍，搜索到的相关结果便会排列成检索词的首字母的形式。在展现了丰富的搜索结果同时体现了垂直搜索+视觉搜索的新搜索引擎。

2.数据挖掘类——从庞大的数据中，通过计算机图形学进行可视化的分析，从中得出某种联系，提炼出重要信息。
My
map
这个图外围的每个圈代表一个人，他们之间的线条代表联系，越高亮的颜色代表交流的频率越高。是基于60000封电子邮件存档数据，用不同颜色深度的线条呈现了地址簿中用户和个体之间的关系，比如回复、发送、抄送。“My
Map”允许在不同的关系组和时间段里挖掘信息，体现不同关系中短暂衰退和流向，从而成为名副其实的自画像、个人关系及社交的可视化反映。

What have I been listening
to?
拜伦.李通过创建直方图根据自己18个月的听歌记录得出的可视化的图示描述了他的音乐之旅。

三、数据亦有意，设计皆有法
俗话说，量体裁衣。在数据可视化中，每一块数据都有其存在的意义，因此我们在视觉设计中必须以数据为核心，对其进行设计。那么，如何对“数据体”设计进行斟酌，筛选，并抽象并使其视觉化，将成为我们为其裁得好衣的关键！

1.数据轴线化
在数据可视化中，如何对多条主线，复杂的信息进行展现？

在这个进化的例子中，有很多条进化主线，而在设计里，取其主线——时间为轴，把这些信息放入这根主轴线中，就是很好的方法。

2.信息扁平化
先来看一个这样的调查：各个年龄段和不同性别的人在不同类型的在线应用上所花费的时间
你觉得应该用多少表格
和柱状图才能理清整个事件？
让我们来看看这样多维的信息是如何成功被可视化的：

把这些信息以某一个轴为链，并把其他相关的信息以传统的表格展示出来，并强调其对比性，把具有深度，结构复杂的数据进行扁平化。使得读者能第一时间触及到到信息的每个层面，最大地缩短了沟通的距离。压缩“3d”的信息，使其“2d”平面化成为设计的关键。

3.抽象化
数据总是复杂的，对于数据挖掘者而言需要找到最有用的数据，因此我们需要对大量的数据进行抽象，即提取最重要的数据给用户。

这个男女的例子很好地反映了这一点，它只选取了部分有代表性的keyword来构成画面的要素，而筛选出这些数据的条件，却能通过某种程序的规则来控制。既强化了数据的对比性，同时也保证了数据准确性。

所有的信息可视化的设计方法，无不离开信息的整合，提炼，筛选，乃至升华，视觉传达中的各种要素在其中得到了充分的体验，与其讲让数据去操作视觉语言在舞蹈，倒不如说视觉语言给数据提供了新的生命。

四、光鲜形于外，数据涵于内！
在数据可视化的领域，时刻都在诞生则各种炫目，惊艳的作品，严谨的技术与创造性的艺术再一次在这个新的领域得到了碰撞出了灿烂的火花，枯燥的数据在插上设计的翅膀后在这个信息爆炸的时代向人们展现数据独特的魅力。事实上，在光鲜美丽的外表下，其核心内涵是数据，是信息。
而可视化的过程也绝不仅仅是是美化图表那么简单。信息可视化的目的不是可视化，最终的目的是要实现从可视化中进行数据挖掘，帮助人们来分析问题。设计在这里也不仅仅是一种表现形式，而是一种手段，不仅要对复杂枯燥的数据进行视觉的设计，而且还要对带有各种专业性质的数据的分析、理解、抽象、并对其进行提炼，因此对于设计师而言任重而道远。

最后附上一些不错数据可视化的网站，供大家参考 ：）
http://infosthetics.com/
http://www.visualcomplexity.com/vc/books.cfm
http://www.tuyansuo.com/page/14/
http://www.historyshots.com/store.cfm?s=sas
http://www.newsmap.jp/
http://www.bestiario.org/
http://well-formed-data.net/
http://flowingdata.com/

转载请注明出自”百度MUX” http://mux.baidu.com/2011/06/1357/

Tabs导航不错！
Tabs导航是一种表现形式，可以很直观的表现出当前所在的栏目和与之同级的其他栏目。

用tabs这种形式来表现导航是个很好的办法，也是很常见的。然而，如果一个网站的信息结构很复杂，层级很多，那么就经常会是tabs套tabs套tabs套tabs…

四层tabs…
我们抽象一下就成了下面这样：

怎么优化过多层的tabs？
最直接的想法当然是收起一些tabs来。
实际上，时时刻刻展示出所有层级的tabs并不必要，是有浪费的，浪费了用户的注意力。
上图的例子中，当我点开第三层tabs中的“歌手”后，我的诉求更多的是看“歌手”下更多的分类，以便我找到某位特定的歌手，这个时候并不会太关注“背景音乐”“我的收藏”“留言板”“相册”…这些tabs项此时成了干扰信息。
仍旧显示出一二三层tabs的价值主要在于告诉用户，当前的“歌手”栏目是在“音乐盒”->“正版音乐库”下的。那么，对于上面那些层tabs，可以只保留有价值的信息—表明当前所在栏目，而不显示与之同级的其他栏目。
去掉一、二、三级tabs中可供访问的tabs后的样子：

再整理一下…

是的，这就成了面包屑导航导航。
面包屑导航是另外一种反应网站信息结构的形式。因为省略掉了与当前栏目同级的其他栏目，所以面包屑导航的信息量小。

将上面演绎的过程总结一下：面包屑导航可以简化多层tabs导航中那些不太重要的层级。

要省略哪层呢？
就象上面说的那样，把当前页面以上以及同级的tabs都简化掉？显然不是，设计如果是这么简单的，那就不要设计师了。

我们来看看yahoo：

进入Autos栏目中，只展示Autos下的tabs，而不再展示与Autos同级的其他栏目。
看Autos的时候并不会经常会想着切换到财经、游戏等其他栏目，那么，简化掉第一级，只显示Autos栏目隶属于Yahoo！下。Autos频道下的两级菜单需要经常不断切换着看，即便当前是“LATEST MODELS”，上一级tabs“Home，New cars…”也依旧保留着，不简化。

再看amazon：

不断寻找商品的过程是不断往下找的过程，目前已经到达“Bikes”了。“Sports & Outdoors › Bikes & Scooters › Bikes & Accessories ›”这些都是当前页面“Bikes”的父级。相比之下，当前，用户更需要在“Bikes”里进一步筛选，而不是退回去选sports&outdoors类的其他产品，所以，“Bikes”下的进一步分类要充分的展示，而之前逐层筛选过的那些父级，统统的面包屑掉。

从上面的两个例子中，我们可以看到：
可以省略，也是需要省略的，是那些当前较少可能去选的、不需要反复切换的…
并非凡是当前页面上一级和平级的tabs都要简化，当然也不是都不简化。

这里说的用面包屑来简化多层tabs，要解决的问题源于网站结构层级太多，解决这个问题最好的方法当然是让信息层级结构本身简化点儿，少几个层级。

原文：http://www.chouyu.com.cn/?p=324

EEHarbor

EEHabor offers ExpressionEngine goods, so forms are probably their expertise.

The website itself is really beautiful and clean. The register form is clean, beautiful and straight forward, it is certainly a form that will not scar you away.

Contrast

Contrast is a web apps developer. Their website is pretty unique and nice, good usage of typography, colors and shapes. The contact form is also pretty unique and fun.

SVN2FTP

SVN2FTP is a hosted source control system. The website has a nice fun approach and a beautiful texture. The contact form is also nice and different from usual.

Ally Creative

Ally Creative is a small creative company. Their website is clean and have a nice textured background, the contact form is also pretty nice.

Think Vitamin Membership

Think Vitamin is a nice place to watch videos to learn web design and development. Besides having a nice website, all their forms are beautiful and pleasant.

Scribble & Tweak

A beautiful and neat single page layout that holds a nice and easy contact form.

Barnt & Arnst

I know I already showcased this website in previous lists, but I really like its colors and simple layout. And they deserve and extra point for their super clean contact form.

The Bullitt Agency

Nice website layout based on shades of black, gray and some beiges. Beautiful background images and classic contact form.

Atlason

Clean and beautiful layout with “built in” forms for FTP and email.

Major Tom

Nice image based layout with a “hidden” sign in form for clients.

Blind Pig Design

Their website is really cool. And as for the contact form, pretty classic and clean. Also loved the subject detail from the contact form – Oink!

Clyde Quay Wharf

A residential project from New Zealand with a layout based on beautiful background images and elegant type choices. The “register your interest” form is pretty clean and beautiful.

37 East

If you are thinking about doing the real African Safari, you should check out this website. The layout is based on really beautiful background images and interesting typography.

Michael Freimuth

Michael Freimuth is a art director and illustrator. His website is pretty simple and cool. The login form to browse archives is also really nice.

Social Design House

Their website has delicate colors combination and a good choice of typography. The contact form is also pretty beautiful.

Tinkering Monkey

Besides having some pretty stylish products to sell, Tinkering Monkey has a super clean layout. The contact form is also pretty neat.

Go Live!

Need a button to shout about your work? Try this! Go Live has a pretty colorful layout and their “let’s do it form” is also really nice.

Sophie Hardach

A cool single page layout for a book website. Contact form really unique.

Soapbox

Simple layout with a beautiful color scheme.

RxBalance

Beautiful watercolored layout with texture background. Delicate colors and typography. The contact form is also really elegant and simple.

原文：http://www.jackchen.cn/blog/?p=4401

以下对国内外近20个网站的注册表单进行的分析，并归类总结优秀表单的设计方法。文章最后对其中三个案例进行优化对比。

1． 越少的填写项越好

Site inspire

CSS web site award

Tumblr

DeviantArt小tips：将表格内容title写入格子内，在视觉上降低“要填很多项”的感觉

反例：Another Bookmark，填写项太多，字号太小格子太密

反例：Shutter Stock，同上，填写项过多格子过密

反例：点点印，当全是必填项时，可以不要*号，减小用户压力

2． 无论填写项多还是少，使用宽大的格子，行与行之间留白重组。一个清爽的页面比被密密麻麻小字儿充满的页面更容易诱使人注册。

Pictory

糯米

反例：sisTown（相比糯米只多了一项，却在视觉上感觉繁重很多）

3． 即时的提示（该格子内填什么，当光标移入才提示），即时的反馈（填的对不对，当光标移出再提示）。

twitter

Last.fm

Bangumi (注：此处提示信息相对有些过多)

Hashable

案例

案例一：Airbnb

分析：页面左右轻重不统一，视觉上已聚焦左侧框和右侧框，无法视觉focus

修改方法：

1） 将页面元素重新排列，让用户将注意力集中在“注册”上

2） 页头横线拉长覆盖全部宽度，页尾文案放在一行

3） 将填写项title放入格子中，是页面整齐化又不感觉内容过多

案例二：UserInterface

分析：

1） 只有四项需要填，但是过多无用的文案引导

2） 填写title及填写框没有任何对齐模式，界面较乱

3） UserInterface的logo没有突出，页面的没有title

4） 注册按钮太不突出，不能诱导注册

修改方法：

1） 把没用文案全部掉

2） 填写项titel与框左对齐

3） 修正logo及加入页面title

4） 强化“注册”按钮视觉效果

案例三：Visualize.us

分析：

1） 框长度不一导致左侧不整齐

2） 右侧干扰信息过明显

修改方法：

1） 将填写框统一长度

2） 右侧突出是有FB或twitter账号登陆，减轻干扰

来源：http://blog.sina.com.cn/s/blog_6d04fca50100r6bp.html