以下是我们觉得必要的思考流程以及一些方法和关键点：

一、关于定位的思考

在首页改版之前，结合网站整体的策略变化我们首先思考以下三个问题：

1、改版的目的/目标是什么？

是配合网站整体战略的调整，还是用户体验的改善和提升，是自上而下的网站转型升级，还是自下而上的流量再分配？…
这些因素也决定了首页的设计思路是宏观还是微观，是信息层面的梳理还是视觉表达的优化。

2、首页的用户是谁？

用户是谁，用户特征是什么，用户的需求和价值在哪里？
考虑这个问题时，需要对于用户类型做相应的区分，不同的网站可能根据网站服务的特征来区分不同的用户群，比如：

• 时间：新用户与老用户
• 来源：自有用户、SEO用户、BD用户
• 关注行业：原材料用户、工业品用户、…
• ……

3、现状

• 目前的内容运营规则是怎样的
• 当前的界面是否存在可用性或易用性的问题
• 基本数据是怎样的：PV、UV、回访率、流量转化率，各产品的流量分布、各类型用户的访问基础数据是怎样的。这些数据本身是否能暴露当前的问题，或者能用以评估预期目标的效果

二、做好设计管理

1、找准关键角色

在这个过程中能否找准关键角色非常重要：谁是真正对首页负责的人，谁是对具体业务负责的人，相关的合作方的决策者是谁？只有明确关键角色，问题才能高效的决策和推进，而不是互相推诿和拖延，这将是考验改版项目团队工作技巧的重要一步。

2、提早沟通设计思路，而不是直接进入设计

不同工作风格会产生不同的工作流程，以首页改版为例，我曾经见过给出十多个首页设计稿给老大选择的壮观场面，这未必是不好的工作方法，但却显然是低效的。

建议在改版之前，能够和相关方（尤其是对于首页有决策权的leader）建立起充分沟通，将改版的整体目标建立共识，而不要一开始就沟通具体的设计细节——这很容易就陷入对于细节的争议当中。

当然为了避免“空谈”，做好相应的准备还是必要的，有可能的话提供数据依据和现状分析，并给出鲜明的观点。当然您也可以通过低保真的页面结构图，以便各方对于首页有概念上的理解。

3、项目管理

a) 资源保障

首页改版对于投入精力的需求长期而稳定，能否争取到相关资源，并且在项目过程中获得高优先级的支持将非常重要。

b) 时间计划：定期与追踪

首页改版是一个耗费较多资源，牵涉业务众多的项目，强烈建议按照项目流程来执行，但与一般项目不同的是首页改版的进度往往并不完全受控，相关影响因素较多，并不完全能由技术评估方案的工作量，因此建议在项目前期编制较为粗线条的项目时间表，主要用以对执行过程进行分解，而在方案基本成型后再建立精确的上线时间计划。

三、把握设计细节

1、设计即运营

设计的过程也是运营策划的过程，尤其是以运营为主的首页，设计师不仅要关注用户如何浏览和阅读，也需要考虑首页内容如何产生，因此首页的设计过程也是和相关业务方订立运营规则和运营方式的过程。

2、追求细节，但别害怕不完美

就像产品设计中常说的，产品的成功往往是通过快速迭代而造就的，如果追求完美的产品，则时机早已错过。首页的设计和改进也会是一个不断经受用户检验和快速迭代的过程。因此在设计上线先后不断通过用户的反馈和行为数据验证和确认，而无需去追求完美的方案——因为完美是不会存在的。

四、善用数据与用户

1、数据是了解用户的重要途径

a) 在设计前要对要验证的目标设定可衡量的指标

首页改版效果的指标与首页的定位关系密切，如何设置用户体验指标，建议参考Google的用户体验衡量指标体系(HEART)。

b) 是否有足够的数据来支持分析结论

一旦明确首页改版效果的指标，就要通过各种方式来收集指标的相应的数据，网站的基础访问数据、tracelog、点击分布等。如有必要应当对当前首页的数据指标进行收集，以便用以对首页改版后的效果进行对照。

我们的经验：我们在首页改版时主要采用的是（结合采购商身份的）页面CTR和Bounce Rate，以此来评估新老版本与用户需求的匹配度和吸引力。当然在不同的目标驱动下可能会采用完全不同的数据指标，比如在分析局部板块时可能会关注诸如广告效果、专场转化率、登录行为数等。

2、用数据来做决策和验证

a) 关键指标的定义及描述应该达成一致

在我们改版的过程中遇到一系列数据上问题，包括监测数据的不稳定、数据前后矛盾等，而在总结原因时发现问题出于不同的部门对于数据的定义和观测都有所差异，并且在AB Test过程中由于选取的样本数量和类型上的差异，也会使得观测的结果不具可比性。这也促使我们在后续的测试过程中建立统一的数据收集通道，并且在后续的AB Test中和BI部门进行充分的沟通来确保测试样本的可比性。

b) 不要迷信数据，要寻找数据背后的意义

3、意见反馈，有时候并不重要

这取决于你是否有足够的判断力和敢于say no。请考虑接收到的问题——

• 表达的是感受，还是使用的实际问题
• 是否是目标用户的问题
• 是普遍性的问题，还是个体问题
• ……

在从而做出自己的判断，要记得一点——聆听少数人的声音，但为大多数人设计。

五、“习惯”与重建习惯

一般情况下，首页改版总是会原有用户的使用习惯，因此在首页的测试过程和上线都需要慎重考虑用户习惯的延续和给予一定的指导。请考虑——

• 在测试版本上给予用户返回默认首页的入口，允许用户退出测试
• 在新首页上线后，在一段时期内保留旧版首页的入口，让那些尚未适应新首页的用户能够有缓冲期来完成原来习以为常的任务
• 如果有必要，提供一个what’s new页面，帮助用户快速了解新首页

我们经验：在新版正式上线后，在首屏为用户提供了新首页指南，在页面底部提供了回顾旧首页的入口，给用户留有充足的时间进行过渡，通过监控旧版本的流量也可以判断用户对于新版本的接受度，从而逐渐降低新版本的帮助的权重，并且在此过程中基本上未产生用户的主动投诉。

以上是我们本次阿里巴巴中国站首页改版的经验总结，在这里分享给有相关困惑或遇到同样问题的同学们，欢迎大家在专业上更深入的探讨。

原文链接：http://liuchenhuan.net/?p=701

从无到有的阿里巴巴无线端设计，经历了由前期的产品定位、产品形态探索、无线需求场景脑暴、产品拆解、分合的产品思路讨论、版本规划到手机行为、手机平台特性分析乃至信息架构的确定、细节的推敲…

无线端敏捷开发节奏快，如何低成本、有条不紊的迭代更新，版本规划以及产品的拓展性考虑尤为关键。九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存，但一期内容不足功能较少，过渡期既要保证目前版本的充实和架构合理，又要考虑用户习惯的延续和activity等的代码模块可复用。

在已有13年历史的网站（培养了稳定的用户群以及培养了一定的用户习惯）基础上，实际上我们并非从零开始。B2B的业务属性决定了无线场景的设计与网站的关联性，而用户使用时必然伴随部分网站习惯的迁移，因此在基于无线场景和手机端特性设计的同时，我们也同时考虑用户在网站端的认知映射。

作为项目owner，跟进后续流程的过程中有几点经验值得highlight：

1. 关于视觉适配难

相比于iOS平台, android硬件厂商众多，屏幕分辨率五花八门， 且dpi不同，我们这样做：
(1) 进行目标用户群使用手机比例调研(可通过问卷投放等方式)，选取一个主流分辨率和目标机(本项目中目标机为htc G7，分辨率480*800) ；
(2) 视觉设计过程中，实时在目标机并定期在其他分辨率手机上查看实际效果，并调整方案；
(3) 规范点九图(九宫格)的切片尤为重要。.9.png不但能最大程度低成本、高还原度的适配到android的各个屏幕，更是设计师和开发同学之间的沟通工具，避免在视觉－前端这一环节的设计走样。

2. 关于视觉切片资源文件大

由于功能模块相对独立的迭代开发，造成不同开发同学对于切片管理不统一，以至app文件大且运行过程中占用内存大，操作流畅度不佳的情况。在UI Check过程中，优化切片资源包，替换掉不规则渐变和纹理，尽可能复用样式，统一.9.png格式。

3. 关于UI Check

UI Check的目标不但是保证UI在开发环节的设计还原度，更是对设计方案的重要review。尤其手机操作流程性强，过程更为动态，转场动画、hover效果、gesture这些内容都需要高保真demo在真实的测试下确认调整和再优化。

最后，产品更新和体验优化是一个永无止境的过程。之后我们除了拓展更多无线平台(windows phone/iPad/…)以及新产品新功能追加，也会根据埋点数据和一手用研不断在迭代过程中同步优化体验设计。敬请期待！

下面为项目总结ppt中的部分内容，方便大家有个更加直观的了解：

感谢各位看官的时间，欢迎亲们更多的专业交流~~

原文链接：http://q.pnq.cc/archives/496

两年前，我们开发了一套基于Flash的文件（主要是图片）上传RIA应用，提供给阿里巴巴的用户使用。如果你使用过Wordpress或flickr上传图片，你应该已经用过类似的产品。这个程序基于YUI Uploader开发，增加了一个实用的功能——在客户端先将图片缩小，再上传到服务器。用户用数码相机拍摄的照片往往有600万以上的像素，但产品图片放到阿里巴巴网站上显示，并不需要这么大的像素，通常等比例缩小到1024×1024之内就可以了。借助于Flash对图片先缩小再上传的技术，我们在没有增加服务器投入的情况下，将原先上传图片的尺寸限制由250KB/张提升到了5MB/张。同时，Flash上传还比传统HTML表单方式上传有更好的体验，例如可以多选一批文件同时上传、可以实时展示上传进度、选择文件时可以过滤非图片文件。

这个组件获得了很大的成功。上线后不久，阿里巴巴网站上用户的图片上传数量由日均1万张左右上升至日均15万张左右。但在这个上传应用投入应用的两年中，我们遇到了各种问题。

1. BUG

在基于IE多标签浏览器中的伪沙箱问题就不说了，最严重的是cookie的问题。使用FileReference.upload的方式上传文件，http请求中附带的cookie信息不一定是当前浏览器进程的cookie，在Firefox、chrome等非IE浏览器中非常严重，可能传输的是IE中的cookie。即便是IE，也可能传输的cookie内容和当前页面的cookie记录不符合。这直接导致服务器端在收到文件之后的安全验证中失败。而对于阿里巴巴这样的大型网站，有比较成熟的java web框架，要去掉对cookie的依赖非常麻烦。于是结果就是，首先我们只有在用户使用IE系浏览器的时候才使用Flash上传，其次我们隔三岔五的还会收到使用IE的某些客户的投诉，在花费了大量的时间排查之后，我发现是由于cookie的问题导致上传失败。这个bug已经存在很多年，但是随着Flash从9升级到10，许多版本过去了，问题依然没有被解决。对于闭源的Flash，我们也帮不上忙。

2.性能

相对于现今数码相机的像素量，5MB的大小限制非常保守。但大于5M的时候，在一些低配置的电脑上，读取文件内容的时候就会发生浏览器假死现象。假死很容易导致浏览器崩溃，所以我们采取了保守的限制——5MB。

另外一个性能消耗是将BitmapData编码成JPEG文件的时候。Adobe提供了JPEGEncoder，但由于是Array实现的，所以性能是个问题。编码一个2880×2880的图片在一台中等配置的电脑上大约需要15秒时间。

我用Vector改写了这个类，时间缩短为3.5秒左右。使用Alchemy，时间进一步缩短到1.5秒左右。但还是不够安全，所以最后采用了异步Vector的方式，延长编码的时间，以保证程序的稳定性。（评测在这里）

3.图片质量

Flash内置的最好的图片缩小算法（用BitmapData.draw，并将smoothing参数设为true），在缩小图片的时候容易产生锯齿。因此我改写了Jacwright提供的缩小算法，图片质量的问题解决，但代价是性能又降低了一些。

4.安全限制

Flash10.0之后，增加了一个安全限制——当URLLoader以标准文件上传的方式发送POST请求的时候，需要由用户的UI操作（鼠标点击或按键事件）触发。因为我们对用户的图片做了处理，已经无法再通过FileReference上传，只能通过URLLoader。这个安全性限制规定每次发起一个上传文件的URLLoader请求，都必须让用户点击一下鼠标才可以。如果用户选择了20张图片，就要点击20次鼠标。这显然是无法接受的。因此我们放弃了用标准文件上传，采用普通post形式。代价是失去了对上传进度的跟踪，不知道文件上传的百分比；同时服务器端也需要改造。

改变

最近，我们做了一个决定：开发一个类似功能的ActiveX控件，替代Flash作为图片上传的主要解决方案。ActiveX的优势是性能，不足之处在于只能在Windows+IE浏览器中使用，但实际上我们的Flash上传目前也只能在IE中使用。Flash真的适合像阿里巴巴这样的网站使用吗？闭源和性能是Flash最大的问题。但在HTML5被广泛支持前，Flash和传统Ajax还是我们最主要的富客户端应用开发技术，相对于ActiveX、Silverlight、JavaFX、Gear等技术来说，Flash还是有安装率优势的。我们看到Adobe最近在新功能开发方面非常给力，值得称赞，但基础的功能的持续完善对开发者也同样重要。目前Flash依然是我们很重要的RIA技术，但是HTML5完全到来的那一天，现在很难说。

方凳会除了技术分享同样需要游戏来使得辛勤劳动的凳子们尽情的欢笑，这不在31期的方凳会，组委会费尽心机的组织了这一次的团队游戏

当确定31期的主要内容为游戏时，主席大YY同学想起了曾经的拓展经历，他绘声绘色的向我们（组委会其他同学）讲述他的历史，一听，果然有料，“孤岛求生”，有难度，有合作，有技巧。此时最大的纸老虎便是三座“孤岛”，偌大的滨江园区一览无余的，到哪去寻够坚固够大至少能站稳七八个大侠还得彼此两两相邻不能太近不能太远大概三四米之隔的这三座“孤岛”

结局自然是被我们找到了。上面这一段主要是想表达一下得意，尽管过去些时候了，嗯，很有才

闲话且住，上照片，看大伙的笑脸

瞎子岛的大侠们准备就续了，主持人在宣读瞎子岛的注意事项。（那些眼罩其实是口罩，滨江这破地方买不到足够的眼罩，只好用口罩代替了，反正都是新的，嘘……他们还不知道）

瞎子大侠们手搭着前一位的肩膀上瞎子岛。我们太坏了，游戏开始前连瞎子岛在哪是啥都不告诉当时还没瞎的瞎子大侠们，着实神秘而开心了一把

瞧，瞎子大侠们平静的坐在瞎子岛上，等待救援

那边厢，哑巴大侠们在阅读哑巴岛的任务单，可惜没法说话，不能正常交流啊

再来看普通人岛上的大侠们在干嘛，聚在一起努力解题呢

哑巴岛的大侠们有所动作 了，尽管彼此不能说话，默契配合搭桥

搭桥中。注意瞎子岛的队长，伸着手将自己岛上的任务拼命的给哑巴岛的大侠们看，可这哪看的到呀，更关键的是纸都拿反了，哈哈

桥快搭成了，瞎子岛队长仍然坚持递任务单

两位哑巴岛的美女大侠过桥来帮助瞎子岛的大侠们逃生

手拉手，慢慢走

我们逃离瞎子岛啦。（你俩咋知道在拍你们呢）

离胜利不远了，开始往普通岛搭桥。月月是女中豪杰，一马当先去接桥

互帮互助过桥

陈老师在花丛中，您在干嘛呢？

注意那只小兔子，哈哈

本文首发 方凳志

在开始聊我在阿里四个月的网页推广设计之前，我想先来说说我对平面设计和网页设计的认识。

它们之间的交集。

1.它们都是集艺术创作、电脑技术和数字技术于一体的，以“视觉”（包括符号、图片和文字）作为沟通和表现方式的一种创造过程。设计师一般会利用字体排印、视觉艺术、版面编排（page layout）等方面的专业技巧，来达成创作计划的目的。

2.它们都讲求视觉上的快速、正确、有效的信息传达，都在诉说一个理念或品牌，都具有商业价值，它们的目标是信息、提示、促销和产生连锁反应等。

同时他们之间的区别也是显而易见的，主要表现在

1.设计实现的介质不同

平面设计实现的载体具有多样性，纸、塑料、布、木头、金属等，一般都与印刷有关，因此它受到印刷的限制最大，例如对印刷纸张的材质、规格的要求，对字种字号的要求等，最明显的是印刷的最小字体普遍使用识别性较好的有衬线字体。平面设计给人的体验主要来自视、触觉两个方面。

网页设计通过屏幕的显示来实现，它与平面设计最大的区别是介入了多媒体技术的应用，但同时受网速的制约。在文字处理上，屏幕的像素化显示要求最小的文字必须设置消除锯齿来保证文字的识别性。网页设计通过视听被用户感知。

2.信息的承载量不同

平面设计的产出物包括海报、宣传册、杂志、包装、广告等，它们每一次所承载的内容是相对有限的，而网页设计每屏的信息承载量比平面设计大很多（因为网页的滚动条可以无限拖动）。

进阿里近两个多月时做的推广设计，我一直在范本末倒置的错误。为了突出推广产品的品质感，我把对优质的产品图，合适的人物、场景图的选择看作推广视觉表达的最重要的环节。某天有个同事在我身后说：设计与绘画一样，当你停下来的任何时候它都应该是完整的！因为这句话，我逐渐对推广设计的要点进行了归纳、分析，下面这几点是我这段时间做网页推广设计的认识。

1.正确地理解需求的诉求点，并尽快达成共识

当我们接到一个需求demo时，设计师会先独立地解读，包括：对需求诉求点的明确，页面的整体氛围的感受等，接下来就是对网页设计新人而言比较有挑战性的环节——需求沟通。由于知识结构的不同，设计师和需求方对于同一个效果的认识会不尽相同，这时我们可以进入到下一个环节，

2.明确页面设计的主题，投放的环境等，确定设计的氛围和色调

这个过程中我们应该尽量多地让需求方来描述她们所认为的这个活动想传达给人的感觉，设计师借此把这种感觉用关键的文字与需求方达成共识，

3.主题文字的重中之重的确定，交互稿子的审核

经过这两步，设计师可以花半个到一个小时的时间勾勒下这个页面的框架，包括构图，主题文字、元素的组合，行动点的安排等等，把第一个大致的稿子给需求方过一遍，进一步的沟通和明确以后可以开始设计了。这样做的好处是，设计的方向相当明确，

4.合理有效地编排设计。

网页设计不同于平面设计，它的显示空间完全依赖显示器的大小，因此网页设计的第一屏给人的印象直接决定了用户下一次还会不会再光顾，这就要求设计师必须同时合理安排好页面的各个板块的布局和衔接，保证信息传达的快速、准确、有效性，做到明确而自然。这里要强调一点的是过度渲染视觉效果的热闹而让客户不知所云的设计是没有价值的。

最后，当我们的页面有了重点，细节塑造以后，我们需要对页面进行最终的整合，页面左右上下是不是均衡，色调，光线是不是统一等等，做一些轻微的调整。

下面是我毕业这几个月做的一些推广banner,包括活动营销推广、商品营销推广、邮件/论坛帖。

从我这几个月的设计感受来说，对于一个刚毕业的设计师，在沟通方面的能力提高最重要，要学会换位思考。对需求的认识和理解要及时与需求方探讨，挖掘需求的诉求点进行突出表现。在技术上要坚持不断地练习、探索，尝试用不同的表现风格(可爱、炫酷、手绘、简约、雅致等)，不断提高专业技能，使创意和技术达到完美结合。

——在这里我要谢谢所有在生活工作上给予我帮助的人，谢谢大家！

第一季《生煎包·集结号》地址：http://aliued.cn/sjb.html

生煎包： 生煎包是阿里巴巴中国站UED出品的创意周刊，每年7月-11月一季，每季12期。2010年7月22日开始发布第一季第一期，预计到2010年12月初，我们将为您完整呈现2010年的“生煎包·第一季”。

发布时间：某周四早上10:00

生煎包口号：给设计加点料

生煎包愿景：扩大中国站UED在公司和业界的影响力，为打造全亚洲一流的互联网设计团队助力。

生煎包团队：

生煎包团队成员大多是中国站UED的实习生和新人，也有部门内外的老人~

生煎包的每位成员就好像是生煎铺的店小二，每周为生煎铺的苦想食谱、采购原料、准备馅料、制作生煎、煎生煎、吆喝着卖生煎等等工作而忙碌着。

生煎包们希望能将创意生活融入到每个阿里人的工作中，为着这个梦想，团队的每个人都在努力着！

生煎感触： 

每期生煎包的制作时间都很短，我们也一直在很赶的时间中追求更好。制作过程中充满的乐趣是我们在辛勤付出后收获的，因而大家也都愿意加班加点的来赶制最新鲜的生煎包。

生煎包们一直在追求“快乐工作”，也希望每个能看到生煎包的阿里人从生煎包中收获快乐。：）

生煎包主页地址：

http://share.aliued.cn/sjb/（阿里公司内网可访问）

如何在寸土寸金的首页上使页面的价值最大化，是每个网站设计者最关心的话题。

用户关注的页面长度、宽度都是有限的。宽度自不必说，一般网站都会根据自己网站最大用户群的硬件条件来设置；长度虽然没什么限制，但很少有用户有耐心看完太长的页面。

这个有限的区域相当于一个超市，页面内容相当于商品，超市要决定如何放置商品，就需要清楚每类商品所能带来的价值，然后综合协调摆放，使整体利益最大化。

超市在衡量商品价值时，不会一件一件的去衡量，而会把一种类型商品作为一个整理来衡量。 在网页内容的设计过程中，同一主题的内容经常会作为一个区块的方式展现在页面上，例如中文站首页的“卖家即时供应”、小商品首页的“饰品混批”等等。这一个区块的价值就是网站运营者或者设计者需要了解的“一种类型商品”的价值。

图1

那么如何计算区块的价值呢？

这个区块是N个链接的集合体，因此计算方法有很多种。

我们可以计算每个链接的价值，然后累计合并。但是，无论是逐个区块整理链接还是计算，都会是一件无聊反复的工作；更何况，运营同事随时可能更换链接，无论是时时监测还是要求运营同事配合通知，都不是较好的处理方式。

另外，同一个URL不仅可以在不同的页面上出现，也可以在相同的页面上出现两次以上，都会给对指定区块的监测造成很多干扰。

以前看过一篇文章，需要测试某个洋流的流向，测试者在源头处倒入大量的不易被腐蚀的树脂颗粒，使颗粒能够随水流流动，在其他地点进行监测，就会知道到底流向了何处。一个页面，相对于用户访问的众多页面来说，夸张点说，相当于大海中的一股水流，要比较精确地跟进访问过某个页面的用户路径的走向，则需要在需要观测的“水流”中加树脂颗粒之类的标识物——标签。

目前采用的打标签的方式通常是针对一个链接的，对N个链接的集合体，逐个打标签，这样就会把工作压力加给运营或者前端开发。如果用脚本在html代码里，把这个区块的所有链接自动在后缀加上标签，那么还会产生一个问题：对搜索引擎的排名会有影响。如果有不同的url指向相同的页面，那么搜索引擎可能会降低排名，从而对该页面造成负面效果。

为避免这些问题，我们采用的方法是，前端用一个JS脚本，使之能达到这样的效果：当用户出发区块的链接时，就会在url末尾自动加上标签。每次需要打标签时，前端只需要在区块DIV上做简单的配置。

如此一来，Apache端的日志，就会被加入了这个标记，我们分析的样本中就有了我们需要的独特的标签。之后的分析工作，就可以参考网站日志分析方法系列一：聚焦式分析。根据这个方法，我们可以很方便的计算出之后的行为模式，跟踪这个区块对重要访问行为的贡献程度，从而计算这个区块的价值。

还有一种对页面影响更小的方式，打标签时不要在url地址后加标签，而是打回到服务器上，根据时间，在数据仓库中做关联处理，但分析成本较高。

一、问题引发思考

前阵子与同事探讨一个小需求时又遇到了按钮表示“动作”和表示“状态”间矛盾问题。想想这个问题多年前已经开始讨论了，所以在此整理一下思路，与大家共享。

具体案例是这样的：如上图所示，在“启用”和“停用”搜索定制功能时，这个按钮到底是表示“状态”还是表示“动作”呢？简单的说，上图中 1表示当前是停用状态，还是表示点击后为停用操作呢？答案显然是不清晰的。

怎样能够清晰的表达两者的差异，减少用户的误解呢？我们首先要从“动作”、“状态”的定义和两者的关系入手。

二、什么是动作，什么是状态

动作是指具有一定动机和目的并指向一定对象的运动。
状态指人或事物表现出来的形态。
结合来讲，动作是促使人或事物改变某一状态的运动，而状态是动作造成的结果表现。因此两者经常是紧密关联的，有时甚至是互为条件的。

比如“操作收音机”这件事，我需要扭动旋钮或按键等“打开”的动作来打开收音机，当动作完成后收音机的状态是“打开的”。而“关闭”收音机这个动作的前提，是一个“打开的”状态的收音机。
”听起来好复杂阿！“很多人都会这么认为。为什么我们在生活中天天面对类似的事却很少有这样的感觉呢？

下面来看看生活中的例子我们或许就能理解了。

三、生活中的例子

1、电灯开关

「图2」

单控开关，我们最常见的开关之一，设计极其简单，按下一边是开，另一边是关。至于到底那边是开那边是关，没有几个人会特别关心。因为我尝试两次总会作对操作，几乎没有什么成本。人们不会感觉什么不爽。

当然，现在还有更好的设计。

「图2」

2、Ipod HOLD

「图3」

苹果的Ipod播放器的按键锁定功能“HOLD”。当开关拨动到“HOLD”字样一边时，左侧便会露出红色。而拨动到另一边是没有颜色的。巧妙的运用了色彩对人们心里特征的影响区分出了hold的状态。

3、显示器

「图4」

显示器电源开关，又一个“动作”和“状态”结合的应用。使用按钮突出的形态，和开关的图形表现来表示可执行的动作（这里按下去是用来开关的），使用背景灯的暗与亮来表示开关状态（灯亮表示现在是开的状态）。

类似的应用非常多，我们可以看到其中具有的特点是：1、可以触摸、按动（拨动）的按钮 2、色彩的区分 3、有的还有明显的位置差异以及标识。

四、软件以及网站中的例子

软件或网站界面显然不具备可触摸的特点，不过我们的设计师也尽量会模拟出类似现实中物品的可以操作的形状和质感。

「图5」

播放器常用的UI。点击中间的“播放”与“暂停”键即可切换操作。可以看出，这里忽略了状态的表现，我无法直观的看到现在是播放还是暂停的状态。原因很简单，就像开关电灯一样，影片的打开与关闭是可以直接感知到的，不需要专门的状态提示。

「图6」

再来看列表的视图切换。图上箭头所示“切换到大图”功能也是此类应用，忽略了状态的表现。因为“切换到大图”动作执行后，界面的状态会明显的改变（大图模式），不需要专门的状态来标识。

再看另一种情况

「图7」

音乐播放器中的随机播放。因为“随机”与“按顺序”播放并不容易直观察觉，因此状态需要明确标识。而动作本身由于并不是核心功能被弱化了，仅仅依赖界面功能区块划分来表示此处的可操作性。

「图8」

还是音乐播放器，这次不同的是线性的状态表示。音量的大小并不只是“开、关”两个状态那么简单，而是由小到大线性变化的。上面那个UI通过左右两个喇叭的形状很好的表达了音量大小的两端，中间的圆钮既是动作的操纵杆又是音量大小的刻度标识。因为它和左侧很好的连接在一起形成水槽效果，填满部分的长短再一次反映了音量的大小，非常巧妙。而下面那个UI只在左侧放了音量大小标识，虽然不同因量大小时左侧图标也会相应改变，但相比之下初次使用会难理解很多。

「图9」

上面是某帐户管理的UI，将状态和操作（动作）明显的分两列标识，虽然显得有些啰唆，但也清楚的表达出了应有的含义。

最后我们来看一个手机界面的应用。

「图10」

仿照物理拨动开关的质感与色彩表达，很好的”动作“与”状态“结合的例子。这样的设计你还会犯错么？

五、小结

前面作了很多应用的举例，那么到底怎样才能做好”动作“与”状态“结合的设计呢？

1、分离状态与动作的表示（如图9）。最直接，产生歧义的可能最小，但可能会占用大量空间，以及造成信息冗余。
2、忽略状态，突出动作（如图6）。当状态无需标识也能直观识别时适用。
3、忽略动作，突出状态（如图7）。当动作操作已经被划分指定区域，可以预期其可操作性时适用。
4、具象与仿生（如图10）。当与现实物品建立感官联系时，人们的学习成本会大大降低。此类运用不好定义其适用范围，留给大家探讨吧。

来阿里之前主要的工作方向客户端终端的gui设计，在这里聊几句设计icon的想法，有些观点可能有争议，纯属个人经验感受。

Icon设计的核心是信息传达的准确度，就是icon所传达的信息让目标用户能马上理解，不看字面上的意思就能知晓icon的功能，那么这个icon50%是成功的，如何做到这一点？

 1．要对整个项目足够了解，对这个图标赋予的功能要了解，那么所传达的信息大方向不会有错。

2．分析icon是名词、 动词还是动名

名词类的icon取材至生活中的元素特征或者大家熟知的符号，比如“音乐”，那么可以取音符；可以想象用户的共同的行为来取元素“音箱”“耳机”“播放器”，那么他们的主要特征是什么“喇叭”。

 个人认为，所表达的信息不能太具象，那无所谓icon了，在小尺寸，哪怕稍大的尺寸也太具象的图标表现不了，效果会很糟糕。

动词类可以用两种方式诠释，具有方位性的icon可以用箭头指示性图标来诠释，比如“导航”“下一步”“返回”，另一种动词类，比如“修改”“搜索”“设置”这种类型的图标最好脑海里先还原一下这个功能点的用户使用场景，再映射到生活中的真实使用场景。

建议：方向形很强的icon要用这种指示性的图标，像“导航”有方向的含义，但是也可以用“车”“道路+箭头”来诠释，这个就考虑到小尺寸的icon。

动名类，比如“搜索门址”“保存路线”“轨迹管理”如果菜单界面都用一个元素诠释icon信息，那么取名词来做设计，顺带提一下菜单页面本身就是设置类型的，就没必要把诠释“设置”；如果动名都诠释，那么动前名后。

3．抓住事物主要特征——Icon大多元素取至生活某一事物，那么想要让用户快速理解，最好抓住事物的主要特征来展现，特征也可以做简单处理也可以做复杂处理，这里所谓的复杂就是关注细节比较多，做的简易程度跟屏幕分辨率大小有关。一般大分辨率取元素的范围会大一点，做的细节会多一点，小分辨率取主要的特征就可，不要过于抽象，用户一眼就能认出这是什么事物是主要目的。

诠释简易的感念

4．传统认知的icon不要颠覆，比如“设置”“主页”“返回”“搜索”“下一页”，我指的是形，效果可以任意发挥

5．Icon建议尽量用几何图形，好表现。

做icon需要有耐心，有兴趣。

在Flash播放器运行时，将不同来源的资源划分到独立的沙箱(sandbox)内，不同沙箱之间不能彼此操作数据（除非目标沙箱做过一些设置，授权其他沙箱可访问），这就是Flash的跨沙箱问题。当Flash文件(.swf) 和页面(.html)不在同一个域名下时，如果不经过Flash内部声明System.allowDomain，html无法访问flash定义的接口；不经过html设置allowScriptAccess为’always’，Flash也无法调用页面上的js函数。

那么如果html和flash都设置了互相可以访问，是否Flash和html之间就可以互相访问了呢？理论上是的，然而实际上却不是。

在Chrome、Firefox等非IE浏览器上，是没有问题的。在“纯正”的IE6、IE7、IE8上也是正常的。但是在傲游、360浏览器、腾讯浏览器等基于IE的多标签浏览器中，刷新页面的时候，Flash播放器还是会抛安全沙箱错误。

点击访问测试页面。

使用上面说的“基于IE的多标签浏览器”访问，你会看到，第一次是正常的，刷新之后就不正常。如果你安装的是debug版本的播放器，可以看到Flash运行时发生了异常。

SecurityError: Error #2060: 安全沙箱冲突:ExternalInterface 调用者 http://pnq.cc/temp/test-dmm-crssdmn.swf 不能访问 http://q.pnq.cc/works/test/test-dmm-crssmn.html。
at flash.external::ExternalInterface$/_initJS()
at flash.external::ExternalInterface$/call()
at Main/start()
at Main/init()
at Main()

Flash的源码：

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;
	import flash.system.Security;
	import flash.text.TextField;

	/**
	 * Flash缓存造成的伪沙箱问题演示
	 * @author qhwa
	 */
	public class Main extends Sprite
	{

		public function Main():void
		{
			var tf:TextField = new TextField();
			tf.text = 'flash ready';
			tf.autoSize = 'left';
			addChild(tf);

			//允许被所有其他沙箱中的js或flash调用
			Security.allowDomain("*");

			start();
		}

		private function start():void
		{
			//在基于IE的多标签浏览器中，这里运行时可能出错
			ExternalInterface.call("alert", "Hi, flash is ready!");
			ExternalInterface.addCallback('drawCircle', drawCircle);
		}

		private function drawCircle():void
		{
			TextField(getChildAt(0)).appendText('\nDraw a circle');

			graphics.beginFill(Math.random() * 0xFFFFFF, .5);
			graphics.drawCircle(
				Math.random() * stage.stageWidth,
				Math.random() * stage.stageHeight,
				50);
			graphics.endFill();
		}

	}

}

似乎一旦swf是从缓存中读取的，allowScriptAccess这个配置就不起作用？为了验证是不是缓存引起的，我们每次为swf文件地址后面加上随机的数字，发现就不存在上面的问题了。可见这个问题确实是浏览器缓存造成的。

为swf文件动态加时间戳或随机数，通过防止缓存可以回避掉这个问题。不过这不是一个很好的方案，因为这会极大增加服务器的压力，并且导致页面加载速度一直都很慢。

不过好消息是，目前有个比这个更好的方案：延迟Flash的初始化功能。通过将Flash的ExternalInterface.addCallback时机延后一些，就可以解决这个问题。

修改一下Flash的代码，加一个setTimeout：

	...(略)
	public class Main extends Sprite
	{

		public function Main():void
		{
			...(略)
			//start();
			setTimeout(start, 500);
		}

		...(略)

	}

}

测试修改后的效果

那么，延迟多少比较合适呢？如果太多，用户会感觉到明显的延迟；太少，一些性能较差的电脑上问题依然存在。根据我一年多总结的经验，500ms是比较合理的数字。目前阿里巴巴中国网站上使用的Flash应用程序，如果有需要和js通信，都是延迟500ms初始化。

顺便说一下，延迟500ms还有另外的一个作用。IE6中，Flash初始化的时候无法得到 stage.stageWidth正确的数字，返回是0（stageHeight也一样）。延迟一点初始化就可以得到正确的数值了。

目前我还没有发现比延迟初始化更好的解决方案，如果你有更好的办法，欢迎交流！

（本文首发于 Flashlight）