流金岁月 » web设计

拒绝平庸——浅谈WEB登录页面设计

simondai — Mon, 16 Jan 2012 05:51:43 +0000

用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而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

时尚的CSS3进度条

simondai — Thu, 12 Jan 2012 01:21:07 +0000

时尚的CSS3进度条先看效果图，非常漂亮吧：

demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码： HTML代码比较简单

1 2 3

.progress-bar – 定义进度栏的常规样式。
.blue – 定义进度条的风格，这里是蓝色的
.stripes – 当前进度的动画类型。
span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.progress-bar { background-color: #1a1a1a; height: 25px; padding: 5px; width: 350px; margin: 50px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; }
.progress-bar span { display: inline-block; height: 25px; width: 200px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; -o-transition: width .4s ease-in-out; transition: width .4s ease-in-out; }

添加颜色，进度条风格：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.blue span { background-color: #34c2e3; }
.orange span { background-color: #fecf23; background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215)); background-image: -webkit-linear-gradient(top, #fecf23, #fd9215); background-image: -moz-linear-gradient(top, #fecf23, #fd9215); background-image: -ms-linear-gradient(top, #fecf23, #fd9215); background-image: -o-linear-gradient(top, #fecf23, #fd9215); background-image: linear-gradient(top, #fecf23, #fd9215); }
.green span { background-color: #a5df41; background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916)); background-image: -webkit-linear-gradient(top, #a5df41, #4ca916); background-image: -moz-linear-gradient(top, #a5df41, #4ca916); background-image: -ms-linear-gradient(top, #a5df41, #4ca916); background-image: -o-linear-gradient(top, #a5df41, #4ca916); background-image: linear-gradient(top, #a5df41, #4ca916); }

条纹样式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

.stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; }
@-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} }
@-moz-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} }

闪烁样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

.shine span { position: relative; }
.shine span::after { content: ”; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
-webkit-animation: animate-shine 2s ease-out infinite; -moz-animation: animate-shine 2s ease-out infinite; }
@-webkit-keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;} }
@-moz-keyframes animate-shine { 0% {opacity: 0; width: 0;} 50% {opacity: .5;} 100% {opacity: 0; width: 95%;} }

发光样式：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.glow span { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset; box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-animation: animate-glow 1s ease-out infinite; -moz-animation: animate-glow 1s ease-out infinite; }
@-webkit-keyframes animate-glow { 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }
@-moz-keyframes animate-glow { 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;} 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;} }

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《时尚的CSS3进度条》

Loading，让烦躁少一些

simondai — Thu, 05 Jan 2012 11:53:20 +0000

这是一个浮躁的年代，长听到这样的抱怨“好慢！”“等到死！”，每次看到那个转啊转的圈圈，或者是那个“loading…”后面那三个点不停滴闪动，心里总是有莫名的焦躁，彼时的心情就好像下面这张图片一样，不知您是否有同感…

有人统计，用户能够忍受的最长等待时间大约在 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

表单交互设计之二——校验思考

simondai — Wed, 04 Jan 2012 11:21:59 +0000

你是否经常碰到在填写表单时，提交无数次却还是无法通过校验的情况；或者你是否在为不知道填写中哪里出现错误而抓狂；再或者你是否碰到过当你填写了一大堆信息，之后点击按钮提交时，校验报错的同时，你发现你所填写的所有的信息都被清空；或者你还碰到过很多很多校验当中出现的问题，那么我们现在就开始进行表单校验设计的思考。

那校验有哪些情况呢？

1、 READY？

提到校验，我们往往会联系到提交表单后出现的错误提示类信息，但是其实在填写表单前的提示信息与表单填写校验有着莫大的关系。

此类提示信息能够帮助用户在填写表单前，降低出错的可能性。它出现的形式分为以下几类：

a) 简要提示——有如：icon，icon+文字，文字，暗提示。

出现情况：一般提示信息比较简短，能够让用户一目了然的记住，并且不干扰表单的填写项。

alipay.com付款页面

alibaba.com注册

b) 复杂提示——以缩略信息或icon来显示，通过点击和hover进行查看。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况。

taobao.com机票登机人填写页

ctrip.com机票登机人填写页

c) 限制操作——在表单填写前，对某些需要填写或者操作项会有一些disabled的状态，只有当某些条件被激活用户才能进行操作。

出现情况：当填写项与项之间带有关联性，前面的填写项会影响后面填写项的内容或状态；或当填写项较少，填写项均可以即时校验，就可以将主提交操作项做状态限制。

livestream.com机票登机人填写页

d) 其他提示——填写表单的时候，还有一种比较特殊但又更简单明了的提示，例如：使用图片说明。

出现情况：当填写表单项的提示说明很难用文字清晰表述，这时候可以使用图片，视频等辅助方式来帮助用户快速理解。

alipay.com水电煤缴费页面

2、 ING~

当您浏览完整体的表单，接下来就是进行填写的步骤。在填写的过程中，我们会碰到很多类型的校验，比如：即时校验的友情类提示，即时校验的警示提示，关联性校验的提示。即时的校验也分为三种状态一种是on focus后的帮助提示、输入中的校验、lost focus后的校验。

出现情况：提示信息内容较多，需要用户仔细阅读，并且无法简单记忆，直接全部显示会影响整个表单填写，因此此类情况需要hover或者点击操作进行查看。hover或者点击后有浮层，蒙板，或者跳转新页面等情况

a) 即时校验的友情类提示

即时校验的友情类提示不是提交时无法通过的出错警示，而是给到用户一些更合理的建议或者帮助。

Ctrip.com填写登机人页

（当你选择了儿童票时会提示儿童票的某些特定限制。当你输入的出生日期与你之前选择的购买类型不一致的时候会建议你去购买更合适的类型，但并不强制。）

Buy360.com的注册页

（当onfocus的时候会出现下方帮助提示类信息，当然也有很多网站会做成暗提示。）

163.com的注册页

（当onfocus的时候会出现右边密码的强度，会根据你输入密码的改变而提示你的密码强弱。）

b) 即时校验的警示提示

即时校验的警示提示是属于错误类提示，这类错误会影响表单无法提交。

警示提示类的校验重要级别非常高，因此在颜色和位置上都需要非常明显。有很多网站甚至将出错内容和出错后如何修改的建议都放在了该提示中显示。

163.com的注册页

Buy360.com的注册页

c) 关联性校验

关联性校验是所填写项之间会有相互影响的逻辑关系，后一项的填写是否正确会取决与前几项的填写内容。

Buy360.com的注册页

（设置密码填写项与确认密码填写项不一致时会提示错误。）

招商银行信用卡支付页

携程旅行计划创建页

（旅行计划目的地1和目的地2的时间段有冲突时就会提示错误。）

3、 ACTION！

当您填写完表单，开始触发提交按钮的时候，表单会开始进行表单提交后的校验。目前比较多的有两种，一种是逐条提示，另一种是一次性全部提示。

a) 逐条提示

逐条提示是在提交表单后，虽然有多项错误，但是每次提交只按顺序显示一条错误。逐条告知错误提示，会导致用户改完之后再次提交又需要重复修改，视线流上下来回，不停的修改不停的提交，多次操作才能完成整个表单的过程。

yihaodian.com注册页

b) 一次性全部提示

一次性全部提示是在提交表单时将所有错误全部罗列。

Yahoo.com注册页

Hotels.com预订页

（该网站设计不仅将所有错误一次性全部罗列在填写框右侧，并且提交按钮的hover状态再次将所有错误呈现，点击某项错误会直接锚点跳转至该错误填写区域。）

思考：

出错提示有4个基本原则：即时反馈出错提示，出错提示的位置显示恰当并且明显突出，提示信息内容清晰易懂，一次性显示全部出错提示。

除了这些基本的设计原则，在设计表单的校验中，还会有很多让我很纠结的点，以下罗列一些我个人认为比较好的经验。

1、在设计校验时虽然需要考虑到出错提示的明显突出，但是在实际情况中，会和页面的空间大小和布局相关，需要考虑实际情况来定夺。

2、尽量避免不必要的错误，一是自动喷入值；二是限制型操作；

比如，在身份证填写项中填写了身份证信息时，如果下面还需要填写出生日期，完全可以直接喷入身份证上的出生日期值。

3、有的错误校验会自动修正一些信息，但是这类行为请不要忘记告知用户。

4、友情类提示的校验重要级别永远低于警示类错误校验，在视觉和交互的位置上应该酌情考虑。

5、错误信息出现的位置视觉等效果应该统一，并且在位置上保持在用户可见的范围内。

6、页面自动锚记至出错项处，如果是多条可锚记至第一项，最好还能on focus至出错的填写项。

7、不要轻易清空用户填写的内容。

8、错误提示不仅显示错误点，更可以推荐用户一些正确填写建议。

9、出现了错误提示后，再次on focus至填写项时，不要隐藏错误提示。

本文作者：S++　转载请注明来自：携程UED

32个使用 Google 网页字体的优秀网站案例

simondai — Wed, 04 Jan 2012 01:27:12 +0000

如今，网页设计师非常注重网页字体的运用，为了能让网站有更好的可读性和更强的吸引力，他们需要更漂亮的字体。Google网页字体（Google Web Fonts）为设计师们提供了几百种免费开源的字体，只需要在网页中加入一小段代码就可以在你的网页中现实漂亮的字体。今天这篇文章就向大家展示32个使用Google网页字体的优秀网站案例。

1. Shopify

使用的字体: Open Sans

2. Creep Fest

使用的字体: Homemade Apple, Copse

3. Icon Bits

使用的字体: PT Serif, Verela Round

4. Woolly Robot

使用的字体: Homemade Apple, Special Elite

5. Insites

使用的字体: PT Sans, PT Sans Narrow

6. Best Web Gallery

使用的字体: Oswald

7. Dave Carter

使用的字体: Cuprum, Dancing Script, Pacifico

8. Living Word

使用的字体: Open Sans

9. Jones Film Video

使用的字体: Droid Sans

10. Peter Nappi

使用的字体: Special Elite

11. Million Trees

使用的字体: Cabin Sketch, Cabin, Neucha

12. Column Five

使用的字体: Josefin Slab

13. Allure Graphic Design

使用的字体: Amaranth, Didact Gothic

14. Urban Off

使用的字体: Goudy Bookletter 1911, Six Caps, Raleway, Tinos

15. Indubitablee

使用的字体: Kameron

16. Go Bloom Health

使用的字体: Copse

17. Carnivale Du Vin

使用的字体: Arvo, Bevan, Maiden Orange, Shanti

18. Clearfire

使用的字体: PT Sans, PT Sans Narrow

19. Cofinery

使用的字体: Open Sans Condensed

20. 2011 Full Frontal

使用的字体: Cabin Sketch

21. Jux

Neuton, Varela Round

22. More Hazards

使用的字体: Im Feel Great Primer

23. Mihai Balea

使用的字体: Oswald

24. Laura Burciaga

使用的字体: Dancing Script, Droid Serif

25. Tatchies

使用的字体: Questrial

26. Sparks Online

使用的字体: Nobile, Cabin Sketch, Cabin, Open Sans

27. Colbow Design

使用的字体: Yellowtail

28. El Julio

使用的字体: Lobster Two, Open Sans

29. Chimp Chomp

使用的字体: Droid Serif, Loved by the King,Homemade Apple

30. The WP Co

使用的字体: Podvoka, Oswald

31. Kyle Thacker

使用的字体: Carme, Open Sans

32. Ian James Cox

使用的字体: Droid Sans

英文链接：Outstanding Websites Using Google Webfonts

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

让邮件设计更上层楼的六种方法

simondai — Sun, 01 Jan 2012 08:46:06 +0000

1. 尝试更和谐的色彩搭配

Adobe’s Kuler 这个工具可以预览你的logo和其他色彩组合起来的效果，并建议最近的搭配。

2. 合理地组合色彩

在邮件模板中使用不同的配色方案，下面是一个可供参考的模板.

Headers: Dark Purple #6F1168
Background: Light Grey #EFEFEF
Component background: White: #FFFFFF
Text: Black #000000
Links: Orange: #f27123

3. 挑选字体

Times New Roman, Arial, Comic Sans, Courier, Trebuchet, Verdana, Helvetica, Century Gothic, Impact and Tahoma.这些英文字体可以都测试下效果，中文的字体还是推荐微软雅黑，比较大气。

4. 组合字体

不同的地方可使用不同的字体，例如

黑体或下划线用来标识用户召唤部分
斜体表示引用的内容
Heading使用彩色字体
链接文字使用下划线.

5. 寻找平衡

一张好图片胜过千言万语，但是邮件的特殊性可能会无法让所有收件人看到内嵌的图片，这是文字和图片的平衡

还有邮件排版的平衡，左右排版还是上下排版，可以通过测试来比较效果

6. 合理排版

不必在邮件中覆盖方方面面，只需包含最核心的信息，用户如果感兴趣可点击登陆页面继续浏览

在图片和文本周围适当留空也能让邮件看起来更美观

via http://www.emailvendorselection.com/email-marketing-software-future/

原文：http://www.emailqunfa.com/?p=629

36个非常有趣的互动网站设计作品范例

simondai — Sun, 01 Jan 2012 08:29:28 +0000

实现网站的深度和运动效果有很多种方式，例如有的网站使用视差滚动（Parallax Scrolling），有的是用Flash动画。不管采用什么技术，伪深度（或者运动）效果能够让网站更具互动性，更有趣。今天这篇文章就向大家分享从网上收集的36个非常有趣交互网站设计作品，一起欣赏。

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

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

30套非常精美的免费网页图标素材

simondai — Wed, 28 Dec 2011 04:28:51 +0000

网上的免费图标素材非常多，可以说是琳琅满目。图标对设计师来说是宝贵的财富，高质量的图标素材既能为设计师节省时间，又能有很不错的效果。今天本文收集了30套新鲜出炉的图标素材资源与大家分享，可以免费下载使用。记得分享和推荐一下

1. Cute Blogging Icon Set

2. Mobile Icon Set

3. Payment Icon Set

4. Picons Social Free

5. Nike AF1 Icon

6. Applications Icons and Extras

7. Nikon D90 Icon

8. PixeloPhilia2

9. PixeloPhilia 32PX Icon Set

10. 10 Free Useful Icons for Designers

11. iPad 2 Icons

12. Vector Social Media Icons

13. Hel?

14. Professional E-Commerce Icons Set (20 Icons)

15. Basic set

16. Free Glossy Modern Browsers Icons

17. Construction Icon Set

18. iCandies Icon Set

19. Free Medical Stock Icons: The Centigrade MedicalSeries

20. 48px Web Icon Set 226 icons

21. Social Icon Set – Eco-friendly

22. Monochromatic Iconset 2

23. Monochromatic Icon Set 1

24. Mini Designer Icon Set – 10 Free Icons

25. Plastique – Over 500 Icons and counting

26. Boolean 1.1

27. Strabo

28. Iconsweet2

29. Replacement iOS Icons

30. Somicro: 27 Social Media Icons

英文链接：Extremely Impressive Web Icon Sets for Free

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

界面设计速成

simondai — Tue, 27 Dec 2011 11:21:23 +0000

原文：http://ued.taobao.com/blog/2011/12/27/%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e9%80%9f%e6%88%90/

从淘宝网首页看内容随机展示应用

simondai — Mon, 26 Dec 2011 05:25:02 +0000

开始之前先解释下相关概念，当然都是按自己的理解杜撰的。

什么是随机展示？为什么会有这种需求？
从下图可以看到，现在的网站，特别是电子商务网站，都有内容切换模块。基本上分为两种，一种是tab内容切换/js轮转切换，都是用户可以手动点击切换或自动切换，用户可以查看所有内容，但一次只能查看一个单元内容，称之为“显性隐藏”；一种是没有切换按钮，后台有一个一定容量的内容池子，在当前模块区域内只能显示固定数量的内容，除非用户刷新网页，用户看不到其余的内容，称之为“隐形隐藏”。

不管是显性隐藏还是隐形隐藏，都需要用户交互互动后才能看到全部内容或者更多内容，即使是自动切换的也是需要用户等待一段时间才能达到前面的目标（看到全部内容或者更多内容）。但从数据统计来看，没有交互的设计才是最好的，因为用户真的很“懒”，没有多少人原因去点击切换，有隐藏等交互的内容区域，除去设计和内容的因素之外，往往第一个显示模块的点击率比其它的内容要高很多。

在这种情况下，如何保证每个切换模块的内容的展示机会均等？那就是随机展示，不管是显性隐藏还是隐形隐藏，通过程序来控制每次用户第一次打开的内容都是不一样的，这样就能保证自然状态下，每个内容的展示机会是均等的，从而避免从宏观上来看很多内容根本就没有和用户见面的机会。

说了这么多，回归正题来看看淘宝首页是怎么做的，从截图来看，淘宝首页一共有10个显性隐藏或者隐形隐藏区域（有广告图片、促销信息、单品、功能，但都可归类为内容），基本上都是采用随机展示的方式来保证每个内容模块的展示机会是一样的，大家可以手动刷新看看，每个显性隐藏或者隐形隐藏区域第一次展示的内容都是不一样的。

对于上面的情况做了个统计，从统计情况看显性隐藏中有不同的切换方式：

不过一个页面有这多的隐藏展示区域，个人感觉从易用性来说并不好，还是要掌握好一个度，毕竟用户“懒”是一个方面，另一方面太多的隐藏内容也会影响加载速度。特别是自动切换的展示方式更应该慎用，如果一屏之类有太多的动态切换，对用户干扰太大。当然自动切换的方式也有很多种，国内的都喜欢带点动画，要么上下要么左右，动作挺大的，一屏之内如果超过2个区域都这样子的话，用户就很难集中精力去看他想看的内容了。关于这一点，棒子做的比较好，尽管棒子的网站从上到下都是隐藏/显示的区域，但人家的切换方式比较低调，只换内容，不带动作，就是简单的显示隐藏切换，这样视觉上来看变化不大，甚至有时候悄无声息的。当然从网站定位来看，taobao首页作为超级入口，又有超级多的用户做后盾，有这么多的隐藏切换区域也很正常。而棒子的网站另当别论，可能棒子用户适应这样的感觉，再说人家的带宽也够给力。

可以看个棒子的网站，首页居然有13个隐藏展示区域，当然都是采用随机方式，切换方式很低调，显示和隐藏，不带过渡动画。

附带几个棒子网站地址，感兴趣的同学可以看看：

http://www.11st.co.kr

http://www.bandinlunis.com

http://www.shilladfs.com

http://www.lotte.com

原文：http://www.uedwow.com/taobao-random-display/