iLeichun

来源：http://www.wangzhanbaojia.com/new/a1468.html

                                       阿里巴巴资深交互设计师 宋磊

如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题，“好的产品设计一定是建立在对用户需求的深刻理解上”这句话被许多设计师视为设计的天条；至于在设计中如何发现并深刻理解用户的需求，并由此设计出具有优秀用户体验的产品，阿里巴巴的UED团队在多年的产品设计实践中总结出重要的五项原则。

1. 同理心：所谓的同理心通俗说法就是换位思考。设计师在设计产品时要能够做到换位思考，体会用户的立场和感受，并站在用户的角度思考和处理问题，把自己置身于相关的用户场景中，理解用户的行为特点和行为差异。

在我们阿里系网站，淘宝网站上面主要是C类用户，淘宝的很多设计师自己本身就是C类用户，他们会更加容易把握和理解C类用户的需求，以此来指导产品的设计。这一点对于我们B2B的设计师来说即是面临的困难也是一种机遇，因为B2B的设计师很难从自身获得足够的B类用户经验也就无法很好的把握和理解B类用户的需求，所以我们团队就更加强调设计师的同理心、换位思考能力。我们会要求设计师在平时多注意积累用户经验，熟练的使用自己的产品，模拟B类用户进行相关操作，也会经常让设计师走出去把用户请进来等各个渠道和用户研究的手段让设计师可以全方位深入的了解用户需求。使得我们的设计师可以很客观、深入和全面的了解用户以及相关需求，也就避免了依赖自身经验和主观臆断的闭门造车。

记得在我上大学学习《无障碍设计》课程的时候，为了体验和理解腿部残疾人士对于乘坐车辆的需求，我会把自己的腿绑在一起或者坐在轮椅上，真实体验腿部残疾人士上车时的场景。我想有过这种体验的设计师为腿部残疾人士设计产品的时候，肯定会在设计中充分考虑到残障人士的真实需求了。

同理心是用户体验设计的基础，只有这样设计师才会对用户需求把握的越透彻，设计出越贴心的产品。当我们的用户看到产品时会说：“这就是我想要的”，我想这应该就是最好的用户体验设计了。

同时需要说明的是同理心不是万能的，也不都是准确的，更灵活的运用和效果的产出，一方面需要设计师长期的产品设计经验的积累和对用户长期深入的接触和理解；另一方面需要设计师对用户数据和用户行为的分析再加上相关的用户研究的方法的使用。

2. 简洁就是好的：简洁不等于简单，它是在设计师深刻理解用户需求的基础上，根据用户的操作行为、信息架构等因素深思熟虑后的用户交互界面，界面不是产品功能的简单 “堆砌”和界面信息的杂乱“摆放”；是一个满足了用户特定需求、具有流畅操作、赏心悦目的界面。

记得在前几年很多网站的注册页面中，排列了许多需要用户填写的必填或者选填的表单，显得页面特别的繁琐和复杂，其实这些都不是用户想要的，用户需要一个页面上只有简单的一道两个必填的项目，可以让用户以最快的速度完成相关表单的填写，以便尽快的完成网站的注册的简洁页面。但是我们却基于保存用户资料数据、商业和运营的考量，设计出一个复杂的注册页面，强迫着用户做着对于用户来说没有意义的事情。

再看看现在网站的注册页面基本上只有很少的几个简单需要用户填写的注册信息，甚至有些网站为了让用户更加快捷的完成他的目标，取消了注册环节，真正的方便了用户。

简洁就是好的，本质上是让设计师了解一般用户在单个页面只会有一个主任务和主流程，因此不要用其它次要因素或是繁复的视觉元素来打扰他的视觉注意力，干扰他的判断，越简洁，用户的使用感受越佳，这样对于用户体验来说就是好的。

3. 把决定权还给用户：要让用户知道产品的决定权是在用户自己手中的，不要和用户抢夺控制权，要谨慎的帮助用户做一些决定，很多时候还是要让用户自己进行判断，并进行操作。

很多时候网站出于商业、营销等层面的考虑，会帮助用户做决定，会引导用户做一些他所不愿意或者反感的事情。这些举动严重干扰了用户的操作进度和用户目标的完成。

例如在SNS网站中，当用户编辑完一篇内容顺利发布后会出现发布成功页面，该页面自动跳转到已发文章列表页面。但是一些用户其实发完是想看该文章的详情页面，以了解回复或者留言情况，还有一些用户是想再次编辑一篇新的文章，还是少部分用户希望回到首页。所以系统自动跳转到已发文章列表页面就让很多用户感觉到不便，让用户产生很差的使用体验。其实我们可以在发布成功页面不做任何跳转，在给该页面上添加几个用户可能要去的页面链接。这就是要把决定权还给用户。

把决定权还给用户，是体现了对用户的尊重，让用户知道产品是掌握在用户自己手中，产品只是辅助用户完成他之前设定需要完成的目标或任务，只有这样才是给用户带来尊重感、安全感，给产品带来很好的使用体验。

4. 帮助用户做一些事情：在用户在使用网站的时候，很多地方我们是可以帮助用户完成一些事情，这个就可以让用户更省心更有效率的完成他需要带到目标。互联网用户相对于传统行业的用户来说，网站更容易收集用户的相关数据和用户使用网站的行为轨迹。这样就有助于我们了解用户，帮助用户做一些事情。比如在下单页填写物流信息的时候时很多用户不知邮政编码，通过用户填写的省市区系统可以自动完成填写大致的邮编，让用户顺利完成注册。但帮助用户必须有个度，不能过多也不能太少。

例如在莫网站用户在商品购买成功后会有个购物成功的页面提示，通过数据分析与用户调查，发现绝大部分的用户此时会希望看到订单详情，看订单的受理情况。于是当购物成功的页面生成后，系统将自动跳转到订单详情页面，帮助客户完成这一点击。

但并不是说这一做法是不变的，随着时间和环境的改变，如果发现订单详情页面的点击量下降，而继续购物和寻找其他商品的点击量变大，这些数据所能反映出来的信息是用户不希望直接跳转，这时就要考虑把自动跳转页面取消。

另外如果卖家在发布产品时要选择类目，如果以前多次发布过相关的类目，现在再发布时，系统会根据他以往的发布情况直接给出他要的类目，与此同时再给他一个选择全部类目的入口，便于卖家快捷地发布商品。

帮助用户做一些事情，其实就是充分利用网络系统的一些运算、速度上的一些优势辅助用户在网上完成相对复杂一些的任务，可以让用户快捷、方便的完成任务。

5. 用户也是不断的成长：我们的用户的使用经验也会随着互联网行业和网站的发展而发展，用户的经验也是在不断的积累中，也在不断的接受的新的事物和新的交互方式。所以不要用静止的眼光看待用户，不要把用户想的太笨，也不要把用户想的太聪明。

例如在一般网站的文字段落中都会有超文本链接，其表现形式一般使用区别于旁边普通文字的颜色外加下划线的形式表示。之前会有设计师认为也许这样的表示用户会不知道该处是一个超文本链接，所以会在旁边给予专门的提示文字告诉用户该处是超链接，其实随着互联网不断深入到人们的日常生活中，各个网站基本都使用该标准的超文本链接样式，用户已经熟知了这一样式和交互模式，如果在链接旁再加上文字说明，反而会阻碍用户阅读的完整性。

同样也不也要把用户想的很专业很聪明，网页技术人员通常对网页代码、服务器等技术问题非常熟悉，所以也想当然的认为用户也是同样知道这些技术。当用户输入了错误的网站时，页面会显示“404”错误，这个对于普通用户来说就会很困惑，用户不知道这个代表了什么错误，这个又意味着什么。会猜测是不是网络故障，是不是页面出现问题。这时如果我们把“404”错误，换成“该页面不存在”等说明，用户就可以清晰的明白出现了什么问题。这样实例充分说明了不好把用户想的太聪明，都是互联网资深用户。

最后要说一点的是：在设计中任何一个产品都不可能满足所有用户的所有需求，即使前期做过大量的调研和准备工作，新的产品上线时还是不可能做到百分百的功能齐全，可以先上线50%的功能，但是这部分的功能的体验是好的，之后通过实际运行中获得的用户数据和反馈不断优化升级，互联网产品文化就是Beta版文化。用户体验设计的实质就是一个产品不断优化的过程，没有最好，只有更好。

源地址：http://www.uxsong.com/?p=719

在经历了策划、设计、开发等一系列的劳作辛苦之后，只要再进行细致地测试网站便可以上线了。笔者参与过很多大大小小的网站项目，今天从产品的角度来说说功能测试环节中最容易被忽视的测试细节点。

一：搜索死角

这里所说的搜索是指站内搜索，站内搜索可以让用户非常方便的找到目的内容，另外可以通过记录用户站内搜索关键词来进行用户分析。可是随着网站内容的增多以及条件的繁琐，站内搜索往往是以多重条件搜索的方式来展示给用户使用的。这就给测试人员造成了一定的压力，毕竟测试人员光从需求文档上是无法对每项搜索条件和结果进行深入分析的，因此搜索功能的测试可称之为“测试死角的老大”。

解决方法：建议测试人员邀请产品经理共同测试该功能，做到万无一失。

 二：列表排序死角

无论是门户网站还是电子商务网站或者是NNS社区，他们都少不了列表排序，今天笔者用某网站的口碑榜排序列表来叙述一下该死角到底有多深。如果我们来做一个公正的第三方评论平台的话我们只需要根据时间、口碑值来进行排列即可，这样一来死角不会太深。越来越多的网站把口碑榜，销售榜，关注榜作为提高PV和降低退出率的手段，这样一来列表排序会有网站的运营人员参与，在此我做一个比方大家就会明白列表排序会出现死角的原因了。假设我们现在来进行一个电脑关注度的排序，假设从网站后台的表单中我们查询是这样排列的：

这时运营接到市场部的通知，要求把神舟电脑加入到关注度排行榜的第三位，从网站后台我们查出神舟电脑的关注度为1200，这里就存在一个问题了如果强制将方正替换为神舟的话那么展现在网页上的列表排序就像下面这样：

用户不是傻子一眼就看出来这样的商业行为，因此测试人员在测试排序列表时，如果包含了强制置顶功能的列表不光是要把值插入进去，更要做到前后统一的效果，这样才不会穿帮。

解决方法：没有绝对的解决方法，因为本文是做死角探讨不是技术文章，因此具体的方式不做赘述，笔者以前的做法就是采用“补偿法”把少的补上，出现相同值得话就要视情况而去操作了。

三：SQL注入攻击死角

SQL注入攻击是黑客对数据库进行攻击的常用手段之一。随着B/S模式应用开发的发展，使用这种模式编写应用程序的程序员也越来越多。但是由于程序员的水平及经验也参差不齐，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入（摘取百度百科）。前段时间密码泄露门事件闹的沸沸扬扬，所以在测试环节对待这样一个普通用户涉及不到的操作还是需要倍加留心。

解决方法：笔者不是安全专家，所以没有非常好的解决方法，如果大家对此有兴趣的话可以在网上查阅相关资料。

 四：图片缩放死角

图片是网站的灵魂，一张恰到好处的配图能够吸引用户的目光，从而为用户提供优良的用户体验。UI设计师在设计页面时选取照片的尺寸会根据版面的需要来进行搭配，而往往这样的配图在网站上线后是需要运营人员根部不同的内容进行更换的，甚至有新闻采集系统会自动转发外站的新闻，由于配图的图片位置大小是固定的，所以一不小心的工作失误就会出现图片变形的情况从而影响用户使用的心情。

解决方法：根据版面的样式确定图片的最大长宽尺寸，并配以淡色的外框，如果程序检测到上传的尺寸与之不符，那么根据等于缩放的比例缩放最大宽度或者高度。即便左右留白或者上线留白总比一张变形的图片看得舒服。

五：文字截取死角

该死角和第四个颇有相似之处，最大字符长度如果设置不准确的话一来会影响用户的阅读，二来会影响页面的美观，好在这样的一个死角修正起来很简单，笔者就不做赘述希望测试人员在测试的时候多加小心便好。

解决方式：试验及调整到最佳的字符显示数量，如果标题真的过长的话建议用…放在标题的末尾，从程序的角度来说增加标题的“title” 显示。

 今天就说这么多，我相信肯定会有很多看官也有会有自己总结的死角，不妨说出来分享一下。

By：alex

作者:itwoodman     

虽然已经不做设计师快三年了，可是依然会一直留意站酷。看着各位高手的作品，总让我庆幸我没有把这条路走下去——三年前，我就是由于觉得自己在设计上没有什么天分，于是转行去了一家游戏公司，去做官网建设和媒体渠道方面的工作。如今看来，这条路没有错，我的设计和站酷上的高手想比，差距不是用努力学习追的上的。

由于工作的关系，我经常扮演一个网页设计的需求方的角色。3年的时间，我看了无数的设计稿，也亲手枪毙了很多的设计稿。很多时候我觉得很无奈，那些设计都很好——有的精美的让我枪毙的时候心情极度难受——这些设计本身不是不美观，只是由于设计者太注意设计本身，忽略了很多设计之外的东西。联想到在站酷上也经常看到的很多精美华丽的“飞机稿”，这不能不让我这个依然爱好设计的旁观者心疼！所以我想就我这三年作为一个设计需求方，从我所看到的视角来说一下网页设计。希望对大家能有帮助。当然，在设计方面，我只能说是个外行，如果说的有什么不对，还希望大家能见谅。

设计师与需求方：

记得我自己做设计的时候，当时公司一位在中国待了快6年了的老外曾经对我说：“中国没有DESIGNER，中国只有PAGE WORKER！”当时听到这句话很不服气，还试图和他理论，当然，最后结果是老外认错了，而我和那个老外也成了好朋友。但是，如今自己做了3年的需求方，我终于不得不很无力的承认了这个事实——不是中国设计师没有创意，而是客户心理对于项目的需要造就了设计师变成了美工。

我不得不承认，大多数的需求方都是外行，有的甚至审美品位严重扭曲——当然，在很多高端的公司，专业的需求方也不是没有，只是这样的需求方是可遇不可求的。在大多数需求方看来，在整个项目当中，他们是处于一个“主动”的地位，对于整个项目具有主导话语权。或许他们脑海当中，真的有很漂亮的设计概念，只是他无法实现，于是便找到了设计师，希望设计师根据他所“想”的一个模糊的蓝图来设计页面。于是问题出来了，由于需求方非专业的描述使得设计者的设计思路变的跟着模糊起来。或许需求方的想法表达的很清晰，但是由于扭曲的审美观导致设计师无法认同。无论由于前者的原因还是后者的原因，都会使得页面变的不伦不类。这样的经历，我想每位设计师都曾经遇到过。

接下来我们来说说解决方法：

1、制作之前的沟通非常必要。你要假设需求方是“白痴”，什么都不懂。在需求在自己脑海里未明确之前，不要试图去猜测着做，这样“飞机”的概率极高。最好是让需求方找到同类风格的网站至少2-3个，让他说明这些网站他欣赏在什么地方。当深入的沟通之后，了解了需求方的意图和口味之后，你会发现沟通的时间远远会小于你重做的时间。

2、对于用户给予的需求，不要太咬文嚼字，同第一条所说，需要假设需求方为“白痴”，很多专业的细节，他们一般不会关注。在做需求方的过程中，我也犯过类似的错误：记得那时侯提交需求，由于项目要求科技感未来感比较强，我在需求中写了一句：“整个网站的设计基调为科技感未来感比较强的蓝紫色。”结果，页面出来了之后，发现整体的设计风格很符合我事先的要求，页面也做的很漂亮，只是唯一的问题就出在头部的人物，设计师看到需求后，为了追求整个页面的色调“符合需求”把人物的色调也做成了蓝色，远看就像是阿凡达。..对于这个结果，我哭笑不得。没办法，谁叫当时自己需求没有写清晰呢？

3、对于主导意识比较强的需求方，不妨自己做一下用户引导。好设计师的个性都很强，这是我和很多设计师接触下来的感觉。有个性是好的，但是工作归工作，工作的时候还是要讲究工作方法的。不要试图顶撞需求方，这样做并不明智；也不要试图用自己的专业术语说服对方，这会造成沟通的无效，严重的甚至会让需求方觉得你是在“忽悠”他，从而对你产生不信任感。比较合理的方式是：“我觉得，你提的想法很不错，只是，我个人觉得。..。..。..。（尽量用对方听的懂的大白话）这样做的话效果会更好一些。当然，我们可以按照您的思路给您做一稿，但是如果可以，我想按照我的想法也做一稿，两稿比较下或许会更稳妥些。”如此一来，对方有台阶下，不至于伤了自尊，而你，也就是多花了一些时间，至少争取到了按照自己想法做页面的机会。

4、“大！一定要大！”很多时候，需求方会对你这么说。通常这么说的意思，就是这个需要“明显”。虽然可以假设需求方是“白痴”，但是在这点上，他比你懂。不过，客户说“大”，未必一定要“大”，首先，试图分析下，他为什么说要“大”，或许从产品本身的角度，对方是正确的；然后是修改，不过这个修改不是需求方说什么就是什么，依照第三条的做法，一稿按照用户的要求改，一稿可以尝试一些其他方法：比如换字体、换颜色、换样式，找个衬托的东西什么的。..总之是在不破坏设计效果为前提的基础上作出自己觉得正确的修正——需求方大多是了解自己的产品并且知道自己要做什么的（也有不少是什么都不懂不知道的，遇到那种算你倒霉），他们或许不太清楚如果用美术的方法达到自己的效果，但是如果仔细分析，还是能够了解他们的意图的。

5、千万不要随意改动LAYOUT，即使你觉得这个LAYOUT糟糕的让自己崩溃，也不要不和需求方联系就随意去做调整——你需要有这样的意识：很多时候需求方是需要控制结果并对结果负责的，不告知需求方而随意修改需求将为结果带来很大的不可控因素并对结果带来不可知影响，是对需求方很严重的挑衅。即使实在无法接受这样的LAYOUT，至少自己脑子里思考下，为什么对方会这么布局？如果不使用这样的布局，我是否能有更好的解决方案？然后带着“可能效果会更好的解决方案”去说问题。这样至少不会让需求方觉得你“无视”他的需求，而是在“帮助”他解决问题。

6、要学会挑选客户，在我还是设计师的时候，一位老前辈曾经说过：“当你选择接1000￥/p以下的单的时候，就意味着，你的设计已经定位在这个档次了。”事实也的确如此，很多中小企业的领导、国企或者政府的领导，通常会有很强的主导意识，而且觉得设计不值钱，设计就是按照他们的意图制作页面，设计师也就是一工匠。和这样的客户讲设计基本没戏，你的设计也别指望能做的出彩。什么档次的用户决定什么档次的设计，这句话是有道理的。

设计师与程序：

关于这个问题，很多时候是无法调和的矛盾。很多时候设计和程序是天生的“敌人”——设计师对于页面的认识是“漂亮”，而程序对于页面的认识是“简单”。对于页面的根本认识的不同，是两者发生矛盾的关键。我不得不承认，这样的矛盾很多时候是无法完全消失的，不过话说回来，事在人为，通过主观的努力尽可能去避免这些问题还是可行的。

1、多了解一些技术的东西是有必要的，DIV+CSS是必须要学的，别觉得那是程序的事情——如果你不想自己的页面被改的面目全非，所以这个是必须的。JS的代码可以不懂，但是JS的原理还是该了解——至少和程序沟通你要的效果的时候用的到。这些都是最基础的，如果你还想朝着更高的方向发展。

2、有时候简化页面是没有办法的事情，中国的网速就这个情况，现在电脑的配制也是无法改变的客观事实。有些效果比如FLASH、JQuery等等，虽然效果很华丽，有时候太占带宽太占系统资源。去掉也是没有办法的事情，毕竟，如果漂亮的效果让用户看不到或者等不到，结果会比没有效果更糟糕。

3、私底下多和程序沟通。人心都是肉长的，有时候私下沟通比工作沟通有效果的多。没事情的时候多和程序一起抽抽烟、喝喝酒、吃吃饭、唠唠嗑。和好的设计一样，好程序也大多很有个性，但是思维也大多很简单，就和写判断逻辑一样，不是0就是1，所以别被表面的现象所迷惑、事实上程序是很容易接触的一类人。和程序处熟了，工作沟通也会容易不少、甚至可以直接找一个处熟的程序搭档接一些私单，有财一起发，不仅能赚钱，还能增进相互之间的感情，何乐而不为？

设计师和终端体验者：

虽然说设计师很少能和终端体验者发生关系。但是事实上，一个页面到底好不好，终端体验者最有权利说。作为一个设计师，不是说光会设计漂亮页面就OK了，如果用户体验不好，页面再漂亮，也是空的。

1、需要学习理论，但不要迷信理论。很多设计师喜欢看国外的设计理论，这些理念通常都很先进，而且都有很强的逻辑，让人觉得“该这么回事”。不过，实际情况是，这些所谓先进的理念都是外国设计师根据国外用户浏览习惯总结出来的东西，虽然很系统、很完善。但是和中国用户的习惯还是有很大差异的。关于这点，我做过几个大型英文网站的项目，感触很深刻。其实，那些理论也都是外国设计师一点一点总结出来的，我们为什么自己不能总结一些中国用户自己的习惯呢？多看各个成功的网站，多观察身边的人浏览网站的习惯，然后自己思考一下“为什么”。当你有自己成熟的理论了，你就离“大师”不远了。

2、好的页面设计是引导用户去阅读的。设计的最终目的是为了传达信息，如果为了页面美观而失去了传达信息本身的效果，那这种页面设计的效果就是负的。这是很多有平面设计习惯的设计师时常会忽略的问题。尤其在以文字和图片作为传达主体的网站上，这种问题更加明显。建议有这样问题设计师能看一些关于排版方面的书籍——在这方面，网页设计和印刷排版设计是有共通之处的。

3、设计也需要在文字上下功夫。很多时候页面上的引导是通过文字链接实现的，而策划案里面或者LAYOUT里面不会给你明确的文字（有不少策划案里所给的文字链界是仅供参考的），如果不自己琢磨下，有时候真会出现不少尴尬。最简单的例子：很多人喜欢用“MORE”、“CLICK HERE”、“SKIP”这样的英文单词。这个单词什么意思，我们都知道、可是如果这个网站目标用户群体是中年人或者年纪更大的人。那恭喜你，你对牛谈琴了——呈然，现在的年轻人大多有英文基础，但是老一辈可没有我们这么好的教育水平啊！。..很多设计师都不太在意文字本身，这在中国是一个很悲哀的事实——这样的态度会让设计师很难进步，就是从职业规划上来说，将来要朝更高的其他方向发展，这也会成为一个障碍。

4、考虑下动态页面具体使用中会遇到的问题。静态页面我们能够控制最后出来的效果。但是动态页面却会出现我们无法预计的问题，你需要考虑到没有美感的网站编辑用丑陋颜色的标题把你的页面搞的乱七八遭、你需要考虑到有时候用户名是8个字，但是你却只给了7个字的距离。..。..如此等等的问题都会影响到页面的效果和用户的观感。这方面的问题总是会超出你的想像，但是一旦发现了，就必须准备解决的方案，能否发现问题以及是否快速找到解决问题的方案，在一定程度上也是判断一个设计师是否有经验的标志。

给新人的建议：

1、平时多看所收集整理素材、自己做的页面分门别类的整理好、老设计师为什么出东西的速度比你快而且效果好？就是因为他们看的比你多，素材比你丰富。老设计师的硬盘绝对是个宝，恩恩，别想歪了。

2、设计的时候少些想法，设计好之后多些想法。大胆下笔、小心收拾，只要总体的感觉对了，设计就能出效果，相反，设计时候想法多了，不仅会严重影响设计速度，出来的东西也会不伦不类。

3、设计有时候不都是加法、减法也很重要，全是效果等于没有效果，材质和光感觉最好能保证统一。影响整体效果的东西，再漂亮也要狠的下心去掉。

4、自己看效果的时候一定要放到100%看，建议根据不同分辨率浏览器宽度拉一下辅助线，保证在不同分辨率下效果都不至于太差。看的时候可以学学画素描的方法，眯起眼睛看，那些东西突出没有、哪些东西没有突出，用那个方法一看就知，当然如果带眼睛的可以把眼镜去掉，效果是一样的。

5、有能力制作个人网站的话，还是做一个吧！一方面练手，另外一方面，无论是求职还是接单，都用的着！

6、设计有时候真需要天分，如果做了一段时间，发现自己没有天分，不如像我一样，跳出去换个工作比较好。呵呵，这条只是一个玩笑。要相信自己的努力会有结果，如果你能坚持的话，我相信，迟早有一天你也能成为最NB的设计师！

Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势。

对网页设计和开发，2012还是比较混乱的一年。我们处于很多小矛盾当中：移动贪婪地占领市场份额；原生App威胁开放的互联网；收费墙阻碍曾经免费的信息；合作与分裂的冲突；复古（Skeuomorphism）的交互模式挑战创新的设计模式。

我们很难预测将来会发生什么，但是一些设计师、开发工程师和行业的大师提出了自己的观点。以下是他们对2012年的一些猜测，关注这些方面，你更可能取得成功。

1. 渐进增强(Progressive Enhancement)

Happy Cog 的创始人 Jeffrey Zeldman说过，移动Web的暴增以及Webkit智能机超越传统桌面的Web浏览，让大家甚至是顽固的怀疑论者采用渐进增强、HTML5、CSS3以及基于Web标准的其它方面的设计。他还提到，IE对Web标准的支持越来越好，更加说明了大家迫不及待拥抱新的世界。

2. 响应式设计(Responsive Design)

另外，Zeldman认为，我们在经历着“被Web标准的折磨”，但是在硬件领域，现在有非常多的设备，有着不同的性能——要给它们分别开发一套界面再麻烦不过了。因为这点，他期望响应式设计在2012年发挥大作用，架起不同平台之间的桥梁。

Clearleft 创始人 Andy Budd 猜想这可能是激进出版商利用iPad夺取Apple公司收费墙的一种方式，并且预测到2012年底，响应式网站的涓涓细流将会变成潺潺大河。“这就好像Web标准又开始行动了。”但是Flat Frog Design的用户体验战略家Erin Jo Richey认为这并不会一帆风顺。“网站会缩放大小，仅凭这点并不意味着在桌面和移动平台的所有的信息价值是一样的。用户交互的信息需要灵活地调整，就如网站大小一样。”她说，因此会有更多的项目和客户关注到屏幕大小并需要适合的策略，使得内容在不同分辨率的设备能正常展示。

3. Flash将幸存

很多用Flash设计的网站被认为会停留在2011年，然而设计师Tom Muller预测，Adobe的技术在2012将会一直活者，不会毁灭。“很多人支持不用Flash设计网站而是使用Web标准，并且也渐渐地不太使用Flash网站。但是，我相信Flash还会存在一段时间。”Muller解释到，在2011年期间，他参与了三个大项目，都是基于Flash的，因为Flash是创建交互视频、动画和3D的最好工具。

”设计师和开发工程师有时候目光不够长远，他们不了解哪些才是最关键的被大多数人需要的，因为他们更喜欢所幻想的酷的东西。”他说，“越来越多的大网站从Flash切换到HTML5和CSS3”，但是对于娱乐网站，Flash是并将一直是创造完美体验的最佳选择。因为这些网站就像是电影世界的扩展，而不仅仅是枯燥的文本信息。在游戏行业，Dull Dude Games的创始人Iain Lobb预测，2012年，Flash会光荣地回归，客户会尝试使用HTML5是因为那是焦点所在，但是，我认为正确的事是把他们带回到Flash的时代。

4. 原生支持更强

即使Flash在2012年长盛不衰，但是，浏览器原生的特性和功能将会继续，Opera的宣讲者Bruce Lawson说到，“随着对HTML5的支持增强，并且有更多的浏览器和平台，我们会看到原生支持的更大压力，它要支持一些以往通过插件来支持的特性：摄像头、麦克风等通过使用HTML5的getUserMedia，还有其他更多的东西，例如对适应性的流媒体的支持。”

5. 应用程序开始稳定

自称精通代码和cookies的Remy Sharp，称2012年浏览器和平台更加的紧密，“我期望看到更多的高质高性能的网页游戏，从中你辨别不出来究竟是否是原生的。”他还认为更多的网站会运行在文件或者操作系统的其它方面。

从视觉的角度看，Muller认为这个趋势会使得设计师根据平板电脑和屏幕交互来设计，形成在鼠标与触屏之间的混合设计。他同时指出，2012年重纹理的设计将开始出现，在一定程度上Apple设备表示极力赞成。但是设计师Roger Black认为在一个由内容统治的世界，设计师和编辑将“要减轻这个繁荣，把他们所知道的转化成别的东西”。他建议：“不要用平板的新闻和移动杂志网站为例，而是要想想数字出版。”

在技术方面，社区软件顾问Suw Charman-Anderson预测，App的便利扩大了消费者数量，但是对开发工程师而言，却是比较头痛的，因为开发工程师创建的App需要兼容各种不同的平台，需要应对不同的商店政策。跨过原生与Web App的较量，她认为2012年会带来原生/HTML5混合模式App的广泛应用，你可以通过一个源头就能为不同平台的App添加内容。她举例Pugpig.com网站，“他们用HTML5结合iOS和Android，创造更好的用户体验。这只是时间问题，这个策略是小商家适应不同平台的唯一的方法。”

6. Web App的分裂(fragmentation)

大家可能认为2012年Web App会持续增长，但是Lawson担心2012年会是Web App分裂的一年。浏览器供应商之前的合作会促进HTML5规范的推进，但是并没有促成Web其它层级的规范。不幸的是，我们看到很多Chrome专有的App，“不要在这里搞发明”的极端的例子已经有10个——是的，10个—— 不同的 App格式，是由提供商发明的，而不是多方协同的。这个打击了开发工程师，更糟的是，伤害了用户。

Mozilla 的技术专家Rob Hawkes保持乐观的态度， Boot to Gecko，Mozilla的操作系统可以促成Web App的增长，并且减少单一浏览器提供商的App开发。Boot to Gecko项目主要关注移动领域，它会实现很多的Web接口，来访问移动硬件的特性。

7. 移动越来越重要

提到移动，很容易想到移动流量和使用量的持续的增长。基于移动的App将会取得绝大优势，我们会看到移动MVC框架的增长，如37signals，Treehouse创始人 Ryan Carson说。

在市场份额方面，移动平台专家Peter-Paul Koch认为2012年移动Web将增加百分之十。客户将提出做移动网站的需求，所以桌面设计师和开发工程师要做好失去客户的准备，他警告。Koch认为创建移动网站会同时带来几个好处：不再有Flash，鼠标效果和基于像素的渲染。所以要关注的是响应式设计、设备API，还有要了解哪些特性是移动设备最需要的，并更加意识到网站需要适应不同设备。

8. 设备暴增

淡定！设计师Aaron Gustafson认为移动设备的增长将会带来很大的挑战，即是，设计师和开发工程师要面对更小的平板——想像一下Nook Tablet 和Kindle Fire而不是iPad——因为低价的平板占领更大的市场。Lobb认为这会导致更多的开发工程师需要拥有数个不同的设备来检查网站的兼容性。

9. 不仅仅是视觉

设计师兼插画家Geri Coady提出，我们经常说优秀的设计是无形的，然而很少人意识到网站或App关注的不仅仅是视觉设计，还要兼顾文案设计和交互设计。2012年，设计师和客户会更加意识到网站的外观并不是全部——样式、内容、行为同等重要——这些方面结合起来才能更加强化网站、App和品牌。

该理念来自于“扩展技能”（Carson认为，2012年，不懂前端开发的设计师不是好的设计师）或者说来自于协同合作。Sharp希望看到很多的开发工程师向设计师学习，这样才能把设计更好地呈现。同样道理，设计师应该多向开发工程师学习，以理解哪些设计是可能实现的，为什么有些东西更难实现。Erik Spiekermann认为，这样更多的设计师能更好地理解代码，而更多的开发工程师能更好地理解设计。

10. 社区应用的竞争持续升温

2012年，社区应用的重要性将会继续，但是各有各的观点。开发工程师 Blaine Cook预言，facebook会继续扮演重要角色，而小企业像Path、Instagram、Tumblr 、Spotify等，社区交互会达到一个临界点。很多的社区分享网络和App都想从facebook和twitter的大肥肉上取得一点油水，但是最终结果将会是仅仅把分享功能集成到他们的服务当中。他同时指出，Facebook提供工具来创建网站而不仅仅是网页，来满足人们继续集成到社区媒体和服务，他对这点表示怀疑。

11. 双屏模式的增长

双屏体验在2012年会更加普遍，Budd预测。电视节目公司更加意识到竞争，除了电脑还有平板和手机等不同的平台，他们开始推动相关的内容到不同的平台当中。有些2011年的例子，包括“Million Pound Drop”现场直播节目，还有BBC的平板应用“Nature Watch”。很多的小公司都转向双屏体验，包括Shazam的新的电视剧标签功能。所以，好好期待吧！

12. 分布式的人力资源(Distributed workforces)

Richey认为，2012年很多公司的创立模式会比较创新。新一代的年轻设计师和开发工程师步入了“不幸”的工作行业，他们要学习很多方面的技能。随着经济的发展，很多设计师和开发工程师不甘于在狭小的空间里付出他们劳动和自由。随着高质量的科技公司拥抱移动的分布式的人力资源，找寻高端人才的老板们需要重新审视自己的公司文化。

13. 更强的客户服务

Headscape的联合创始人Paul Boag认为2012年将会是Web行业的客户服务年。作为Web设计师，我们以为做好网站就行。但是不仅仅是这点。我们同时提供服务给客户。我们经常很关注用户体验、代码和设计，但是我们忽略了其它重要的东西，包括更好的沟通、理解商业需求、超越客户的期望。如果我们要在2012取得成功，我们需要取得客户的认可，而仅仅是满足用户的需要。

14. 更加专业

Budd认为，整个行业正逐步地走向专业化，这意味着设计师和开发工程师需要更加努力，否则他们就变成廉价劳动力了。2012年，设计师需要更多的策略和方法，不要再向Web标准妥协和做差劲的项目，不再偷工减料而是要努力去传递客户所期望的价值。Spiekermann同时认为，更多的客户期待更专业的设计师，更完美的网站，更敏捷的流程。

15. 突破界限

最后一点，Edge of my Seat 的创始人 Rachel Andrew 认为2012年将会是技术和技能革新比较迅速的一年。整个2011年，我们看到浏览器对HTML5和CSS3的支持得到很好的改善，我们可以实际应用到工作当中，所以我们需要学习和应用最新的技术。她说，我们要经常反思，确保不要用一贯的思路去做同样的事情，而是尝试使用新的更好的方法。Andrew相信，2012年会有更多的设计师推动新技术的发展。放弃无效的方法和旧的方法，用新的最好的实践来实现我们要实现的。

网络自由的抗争

没有任何一个设计趋势像争取自由那样火热。一些开发工程师担心立法者继续妨碍网络自由，在欧洲和美国，最典型的是媒体巨头的授意。Zeldman说，任何普通人，只要理解网络的基本知识，都会坚决反对SOPA（Stop Online Piracy Act）。可恶的法案，会击毙网络上所有的网站，甚至毁掉
DNS系统。

Kock希望如果哪个国家制定了这类愚蠢的法案，我们会采取行动，寻找更好的方法来应对，Lawson希望立法者不要用“想想孩子”的争论来做审查内容的借口。“我是做父母的，我不希望我的孩子在网络看到不适合的内容。监视网络使用是父母的职责，而不应该不是审查对象之一。”另外，2012年我们将会继续抗议，否则政府会毁掉整个网络继而是整个产业。

来源：http://www.kuqin.com/web/20120319/319112.html

代码注释和格式化的目的都是为了让代码更容易阅读和理解，提升了代码的可维护性，下面是 10 个关于代码注释和格式的 10 个最佳实践（特别是 Java）。

代码注释

注释是代码的一部分，在统计代码行时注释也包含在内，非常重要。一段无任何注释的代码很可能是完全无用。尽管有些极端的建议说代码应该有自注释的方法，不过我们还是建议注释良好代码的必要条件。

1. 只在需要的时候编写注释
   • 不要为每行代码都编写注释，无用而且降低可读性，例如：
     • int count = 0; // 给 count 变量设置初始值，这人人都能看懂 (?!?)
   • 缺少注释会增加代码维护难度和实践，首先变量和方法名应该是可理解和自注释的，下面是两个不好的例子：
     • int s = sqrt(v1) + v2 / v3 + fread(s). getChar(0)  //(?!?)
     • List<int> getVal(int val, int len, String op) //(?!?)
2. 不要编写错误的注释，比无注释更可恶
3. 为非常重要的变量编写注释，而不是使用自文档风格
4. 为所有的公开的方法和接口编写注释，这是必须的
5. 应该删除文档中一些无用的内容，例如 todo 之类的

代码格式化

很多的开发工具都提供代码格式化的功能，例如 maven checkstyle ，并且这些格式化操作可在代码保存时自动进行，但这些工具格式化的规则多少跟每个公司的要求不同，所以在使用前应该进行设置以便跟公司代码格式规范一致。

下面是一些对于代码格式化的建议：

1. 统一使用括号的方式：你可以在同一行使用括号或者换一个新行，这都没关系，关键是要一致。
2. 统一空行使用的规则，例如方法结束后可以来三个空行，是否每行代码都用空行隔开或者不，这些依照自身的习惯而行，但要统一。
3. 缩进的处理方式统一
4. 每行的字符数应该有所限制，提升代码可读性，一般 80 左右个字符最为合适
5. 代码中的空格使用要一致，例如：
   • 操作符和变量：
     • a += b , c = 0; (a == b)
   • 语句和括号之间：
     • if (value) {, public class A { 
   • 循环之中：
     • for (int i = 0; i < length; i++) 
   • 类型转换：
     • (int) value , (String) value

来源：http://www.kuqin.com/software-engineer/20120324/319252.html

光束看上去比较简单，制作起来是非常复杂的。尤其是一些弯曲的光束，转折的部分比较难刻画。最好是先分析好光束的构造，然后再分段来制作，这样就容易很多。
最终效果

<点小图查看大图>

<图1>

<图2>

<图3>

<图4>

<图5>

<图6>

<图7>

<图8>

<图9>

<图10>

<图11>

<图12>

<图13>

<图14>

<图15>

<图16>

<图17>

16、新建一个组，用钢笔勾出下图所示的选区，然后给组添加图层蒙版。

<图18>

17、在组里新建一个图层，用钢笔勾出下图所示的选区，羽化8个像素后拉上图20所示的线性渐变。取消选区后添加图层蒙版，用黑色画笔把边缘的过渡擦出来。

<图19>

<图20>

18、用钢笔勾出下图所示的选区，羽化1个像素后按Ctrl + J 把选区部分的图像复制到新的图层，混合模式改为“颜色减淡”，效果如下图。

<图21>

19、新建一个组，用钢笔勾出下图所示的选区，给组添加图层蒙版。

<图22>

<图23>

<图24>

<图25>

<图26>

<图27>

<图28>

23、用画笔点上一些小点，效果如下图。

<图29>

24、把背景图层影藏，在图层的最上面新建一个图层，按Ctrl + Alt + Shift + E 盖印图层，如图30。确定后按Ctrl + U改变一下颜色，混合模式改为“滤色”，适当调整大小和位置，效果如图31。

<图30>

<图31>

最后调整一下局部高光，完成最终效果。