信息和交互 - UCD大社区

手机上能不跳转就不跳转

chouyu — 2013-04-08 13:05:20

跳转太多了，就搞不懂了。
PC上的网页，页面间反复跳转是再正常不过的了，从首页进入搜索结果页，再到详情页，再跳到相关内容的详情页…不过到了手机上，无节制的跳转就有点儿问题了。

从首页列表->单篇微博详情页->个人主页->单篇微博详情页->个人主页…可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。
如果是传统的PC网站，能展示层级导航，能在跳转到其它栏目时交代清楚，当然这样的情况也应该尽量减少，但总归还是能交代清楚的。
页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了。对于微博这种情况，明显就不够用了。还要像传统PC网站那样错综的链接，就比较容易绕晕了。

更多层级，更多点击操作，降低了使用效率。
即使没有绕晕，更多的层级，更多的深入，更多的点击操作，也降低了使用效率。
掘图志的手机版，在列表页直接就可以看到图片、打开视频：

你肯定被上面的化学老师吸引了注意力，其实我高中时也见过化学老师拿500毫升的烧杯喝水。吭吭~这里要说的是：这个手机版网站不需要进入到详情页，只是浏览列表就可以了，看到感兴趣的视频，直接点击就打开那个全屏的视频播放页了。如果每篇文章在列表页上只显示前面一小部分内容，要进入到详情页才能看全文、播视频，那样做虽然也没啥不对，但用起来就比较累了。
相比于有些网站的手机版只是把页面做的小了些，掘图志的手机版更多的考虑到了手机用户的使用情景，不仅看上去简单，而且用起来也效率高。

层级太多了看不懂；即使看得懂，层级多了用起来也麻烦，因此：手机上能不跳转就不跳转。那我们就来看看有没有办法减少跳转…

对于从列表页打开详情页这种情况，Google reader的方式是个典型：

直接在页面内展开，没有进入详情页这回事儿了，自然也就没有了进入后再返回的操劳。
Google reader将进入详情页这个页面间导航的问题变为了页面内导航的问题。于是，它页面内的导航就出了个小问题：打开一篇长文后，看到一半，不想看了，想滚下去或滚上去，都比较辛苦。（当然这也源于它原本是给PC设计的网页。）还好这个问题不需要去解决了，google reader要关闭了。不过这种设计并非只是google reader独有，使用类似的页面内展开的产品或许可以单独为自己的页面内展开做一些自己独有的页面内导航功能，让用户能在展开长文且滚到中间的时候可以直接收起此篇长文。

变“进入详情页”为“在当前页内展开”，这是专门给列表->详情这种情况用的。前面提到的微博，用这个办法似乎也解决不了什么问题，其实我们面对的多数产品都很难保证一个页搞定。
能不跳转就尽量不跳转，如果不得已，非得跳转呢？如果非得跳转，可以假装不是跳转。这样的例子也有不少：

假装不跳转例子1：Feedly的详情浮出。

点击后，它浮现出来了，点左箭头按钮，或者点详情页上的任何无链接位置都能收起来。
要把这种方式理解为是打开了一个弹出窗口，或许也可以，那它就是十恶不赦的模式化窗口了，实际上传统的进入详情页都可以被认为是等同于模式化窗口的，或者说，模式化窗口这种概念在现在的设计中已经不那么有意义了。（呃，这话题似乎相当有点儿复杂，应该单独拿出来好好聊聊，在这儿就不再往下说了吧，在这括号里是说不明白了。）
如果把这种形式理解为是一种更形象化的详情展示方式，那么它就显得挺可爱的了。原本的列表页似乎并没有消失，只是被盖住了，详情页的打开让人不是那么害怕了。
这个形式更像是手机上的微博里点击一张图片，图片直接浮现出来，再点击图片就又还原了。

假装不跳转例子2：Path的左右滑动。

点了一个tab，右侧的页面滑动过来，其实还是跳转页面，但是这样的形式让跳转看上去更像是滑过来的，不是离开了当前页去到了另外一个页。
另外，滑到了feeds页面，再点击某个图片，就又是微博里浮出图片的效果了，或者说是feedly的浮出详情。牛X了，组合拳啊~

假装不跳转例子3 “i”的翻转。

“i”页面的出现是翻过来的，是当前页的背面。

这些特别的方式，虽然没能减少页面间的跳转，但却把跳转润色的不那么生硬了，使得跳转更生动，更好理解。它们共同的思路是：让当前页与目标页的关系更具象。目标页盖住了当前页；目标页把当前页推到旁边去了；目标页在当前页的背面。

产品的结构要简单些才是关键。
如果运用这些表现方式，是不是就能把最开始的那个微博里不断跳转的问题处理好了呢？或许能有些帮助，但要完美，恐怕也够呛。
在feedly的详情页里再点击其中的链接，还是得规规矩矩的打开新页面，上面的其他例子也类似。也就是说，这些巧心思的设计也只能处理有限层级的页面关系。

“能不跳转就不跳转，非得跳转也尽量假装不是跳转。”这其实都有一个前提：产品的结构得简单点儿。
手机系统只提供了简装的页面间导航，我们费尽心思也只是处理了一、两层的页面关系，要做到像PC网页上那样复杂的页面间彼此互通，那就只能无限的“返回”了。手机系统提供的导航规范实际上也暗示了我们，就是不能把产品做得太复杂了，太复杂了搞不定。

当然我并不赞同以现有的局限作为产品设计的依据，产品要做什么，不做什么，仍旧应该以用户的目标、使用情景、用户任务为依据。手机上的局限或许可以理解为：我们不得不在这样的局限下去做“以用户为中心的设计”。

源地址：http://www.chouyu.com.cn/?p=417

画线框图容易忽略的几件事

legene — 2013-03-30 23:22:08

通过工作中的观察与总结，我发现不少新人交互设计师以及产品人员，在画线框图时都会忽略一些重要内容，导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。为了解决这些问题，一方面需要加强沟通，另一方面还需要多站在视觉的角度考虑线框图的设计，使大家的配合更默契。

那么具体怎样做呢？以下就是我工作中积累的一些心得，希望对大家有所帮助。

一、通过明暗对比表达

以前，我是这样画线框图的，这样能非常清晰的展示各模块元素之间的布局关系。然后我会告诉视觉，这些模块或元素之间的优先级关系是怎样的。但头疼的是，当界面元素很复杂的时候，视觉就难以一一记住了，这个时候就需要反复的沟通，视觉在这个过程中也非常的痛苦，经常是改的头都大了但还是有错误。

现在，我这样画线框图：

加入了明暗对比之后，界面元素的重要级关系更直观，我们不再需要跑过去跟视觉说：这N个模块中这个最重要，那个其次…… 视觉的工作效率也大大的提高了。

但需要注意的是：深色并不意味着比浅色更重要，要看色块之间的对比关系。比如下图：

“全部商品分类”是非常重要的，在深色块上用了浅色，是希望把它突出出来，让人更容易注意到。但是视觉设计师有可能会误以为浅色代表不那么重要，这个一定要提前沟通好。

修改前：

修改后：

二、不使用截图与颜色

很多产品人员为了能更清楚的表现想法，拼凑各种竞品的截图，组成一个页面。这样做一来不规范，二来对视觉设计师也有一定的干扰。另外不太建议在线框图上使用色彩，这样同样会对视觉设计师造成不必要的干扰。如果真的有一些关于图案的想法，可以告诉视觉设计师需要营造什么样的氛围，达到什么效果，而不是直接告诉他“画几个铜钱飞出来的样子，配一个皇榜……”

三、标记第一屏高度

第一屏高度至关重要，最重要的内容、尤其是重要的操作按钮尽可能在第一屏内显示完全，不然会对转化率有较大的影响。第一屏高度在什么位置？在1024*768分辨率下，极限情况下可定为570px；如果不那么严格的话，第一屏高度也可以定为600px。在原型稿上标明即可，这样可以给视觉设计师一个参考。但不要为了保持第一屏高度而让内容过度拥挤，这样会给视觉设计师带来不小的麻烦。

四、严格遵守栅格规范

很多产品人员或新人交互设计师都比较容易忽略这一点，没有按照栅格规范来布局，这样容易导致的结果就是：视觉设计师在按照栅格排版时，发现在交互稿中能排下的内容，在视觉稿中排不下了，这样就还得返回去改交互稿，或是修改需求内容。影响效率不说，可能还会影响最终的质量。所以在制作原型时，一定要注意这一点，同时也要保证交互稿中的字号、间距尽量符合视觉要求（比如间距最小10像素等），以免给视觉造成不必要的困扰。

五、合理的布局及间距

很多产品人员完全不考虑布局标准及美观程度，随便就把想要的内容堆到一起。这样视觉就只能重新考虑布局，无形中耽误了很多时间。另外就是前面提到的，不按照布局及间距标准画线框图，将很难准确的计算第一屏高度及每个模块的实际内容量，导致视觉返工的几率大大增加。（如下图的这种就是一个不合格的反例）

六、表达清楚UI逻辑

当设计一个内容元素较多、逻辑层级较复杂的页面时（比如表单），为了避免混乱，我们需要提前整理一下这些内容，以保证文字、链接、操作等内容的样式符合它们所代表的重要程度，并把各种复杂的情况归类成有限的几种形式，以给用户一个合理的视觉引导。（字号尽量控制在3-5种，根据情况匹配颜色）

主色调和点缀色最终由视觉设计师确定，在交互稿中有所示意即可。通过这些细致的分类，可以保证最终的字号及颜色符合逻辑，而不会给视觉设计师造成不必要的困扰（视觉考虑更多的是美观，而非令人头疼的逻辑）。

七、了解视觉趋势

时刻关注一些视觉趋势，有助于我们在审美上和视觉设计师站在较为一致的立场上，使大家的沟通更加顺畅。

从上图可以看出，目前的视觉趋势大致如下（2012）：

•渐变减少，视觉风格更平面化

•通过空隙和留白来分割区域，而不是用线

•布局更规整

•文字间距变大

•蓝色链接减少，黑色文字减少，灰色文字居多

•圆角减少，直角增多

•色块的叠加很流行

•去掉不必要的视觉元素

……

我们可以把这些发现应用在线框图的设计中。

如果在绘制线框图的时候，注意以上的几点，我们会发现，和视觉设计师的沟通越来越畅通。当然我这里说的沟通不一定是语言方面的，只要工作方法得当，即使不当面交流，你也会发现设计师更懂你的想法，而且往往一步就能到位，节省了大量的时间。

快来试试吧。

源地址：http://blog.sina.com.cn/s/blog_453d0220010190mc.html

手机上的长列表

chouyu — 2013-03-23 08:57:08

这个Watch Lists其实很长，有几十项，表现出来是这样：每页只显示5项，可以显示在一屏内，然后翻页。
在PC网页的设计时我们知道：把更多的内容放在一个页面里展示，比跳转页面更好，用户更容易看到。几米长的门户首页就是这么来的。
突如其来的手机应用，可能是让一些设计师有点儿不知所措了，觉得手机屏幕小，单手指操作有特点，等等我也不是很清楚的原因，最后得出了这么个结论：每个页面都不能滚动。这个结论显然有点儿不妥，而且，想要严格的实现，几乎不可能。
不断的下一页下一页，再上一页上一页，每次翻页又都需要载入新页面，显然不好用了，相比之下，“自选股”这样一个长列表会好一些。

要处理一个长列表时，放在一页里上下滚动会比切分成多页更好。嗯，这个结论或许下的有点儿早。

“短列表+翻页”的一个大问题在于每次都要载入页面，使得下一页的显示需要一些时间，不流畅了。对于一个长列表如果滚动的时候不流畅，会卡，当然会让人觉得不爽，那短列表不断翻页，可以看做是一种更大的卡吧，显然更不爽。
那么，如果短列表+翻页，但不卡呢？事先加载好了，只是不用滚屏的形式，每页都是没滚动条的，一页页很流畅的翻，是不是ok？
Feedly就是这样。

每页刚好显示一屏，不滚动，向上滑动翻到后面一页。
如果“短列表+翻页”预先加载好了，那么，“短列表+翻页”与“长列表”两种形式的差别仅仅在于给用户的表现模型不同：一个是盒装纸巾，一张又一张；另一个是成卷的卫生纸。这两种模型都是不难理解的。

不过类似Feedly这种表现形式需要解决一个额外的问题：如果我已经翻到了第12页，此时想返回去看第4页的某个内容，怎么才能快速的到达？
对于一个大页面，当前屏幕只能显示其一部分的时候，如何告诉用户当前显示的是整个大页面的哪个部分；应该提供怎样的功能让用户可以高效的回到页顶，去到页底，或达到页面中某一个特定的位置。这一系列问题，在PC上是由窗口滚动条负责解决的，不用细说了，大家再熟悉不过了。
手机系统中的滚动条退化了，只能显示当然所在位置，而不能提供操作了。android可以使劲儿的滑动一次性滚动更远，IOS可以点列表顶端接缝处快速回到顶端，快速的滚动也能一次滚动更多，但似乎没有android的效果明显。这些都是为了页面内的导航，但还都不如pc上窗口滚动条强大。
Feedly把正整卷卫生纸裁成了一张张的，将原本的页面内导航问题变成了页面间的跳转，于是连手机系统里提供的这一点点页面内导航功能都用不上了。如果我翻到了第12页，想回去看看第4页，就得往回多翻几次了，或者回到第一页，再往后翻三下。哪种方法效率都不太高。
手机因为小，设计上总体的方向是简化，减掉的自然应该是少数用户、少数时候会用到的功能。对于feedly这个手机版阅读器，多数用户每天只是来看看新闻，并不需要经常的精确的去查找某篇文章，甚至可以说，不需要实现从第12页快速回到第4页的功能，但别的产品也许就是比较需要的，比如，有100项的股票列表。
一个使用了feedly这种“短列表+翻页”形式的股票观察列表，或许可以自己单独做些导航功能，为自己的这个裁剪成多段的长列表服务，让各段间的跳转更高效。

既然如此麻烦，那干脆就“自选股”这样，直接就长列表，简单，直白，也省掉了那些麻烦。最朴素的形式是有其简朴的魅力，不过真是个100项的长列表，要从第12屏回到第4屏其实也不很快，也得滚好几下，而且操作不容易很精准，你也估计不出来到底得滚几下。
手机通讯录里有那种通过字母快速到达的导航功能，或许应该广泛应用；或许也需要我们为自己的长列表做些单独的页面内导航，只靠操作系统提供的通用功能并不总够用。

源地址：http://www.chouyu.com.cn/?p=405

关于原型设计的一些事

kent.zhu — 2013-03-20 11:05:36

关于什么是原型

为了讨论方便，有必要先做一个简单的定义。

这里的原型指的是对最终产品各页面上内容的简单呈现，通常不会设置颜色和字体，也不含图片。这里的原型，也通常被称作线框图、示意图、蓝图。在一些极端的情况下，原型图往往可以先被抽象成一个个的模块组合，然后再去细化每个模块中的内容极其展示形式。

原型的主要作用是为了沟通最初的产品设想。原型图展示的是内容和结构及粗线条的布局，而不是视觉设计。

一定程度上，原型图是为了说明用户将如何与产品进行交互，其主要受众是团队里的工程师与设计师。原型图一定要体现出用户在每个页面上期望看到的内容，以及这些内容在页面上的相对优先级。通常情况下，原型图在纸上呈现，也可以使用一些特定的软件进行制作，常见的包括axure、viso等。

所以，根据这个定义和解释。我们接下来讨论的问题，主要是围绕着Web网站和APP的原型设计进行的。

关于原型的精细程度

业界普遍的认知是，原型做相对中保真即可。中保真的原则是，对照原型，团队的设计师和工程师能够明白我们要做的是一件什么事情及这件事的重点就可以了。

当然，还存在另外一个观点，原型，必须是要高保真的。对于这个观点，个人持保留意见。高保真的原型需要花费更多的精力，同时，不够敏捷。

关于原型绘制工具

在程序员的世界里，终极问题是，什么是最好的语言？在前端工程师的世界里，终极问题是，什么是最好的浏览器？在产品经理和交互设计师的世界里，终极问题是，什么是最好的原型工具？….

基本上，不存在绝对好用的工具，完全取决与自己的爱好与使用是否顺手。关于原型绘制工具，网络上有很多人总结了很多不同的工具，你可自行选择。我个人使用的比较顺手的是axure。

哦，对了，实际上最好用的原型设计工具，最后，我发现，是纸和笔。在快捷酒店管家的实际项目运作中，我们更多的是运用白板来绘制原型，然后将经过讨论通过的原型用手机拍下来做记录存档。

关于axure的使用

（不使用该工具的同学，读到这里可以关掉页面了，谢谢。）

1、千万不要去学习复杂的交互动作！

首先，在axure里使用复杂的交互会上瘾，这将大大的浪费你的时间；其次，设计师和工程师都不会看你的复杂交互动作的，他们只觉得这是个图形而已；第三，如果你真想学，为什么不去学div+css呢？

2、如果你确实需要表达一个复杂的交互，可以考虑将这个交互拆解了表述

典型的比如一个输入框的不同状态。可以拆解为，获得焦点激活输入框 – 正在输入中 – 输入完成激活提交按钮 – 点击提交按钮完成提交。

这种拆解的方式，虽然看上去会占篇幅，但是却实在是最容易被理解的，连流程图都能省略了。

3、可以考虑将需求文档与axure原型结合起来

只是说可以，没说一定要这么做。这是我一直在使用的一种方式，我自己觉得效果还不错，详细的可以参考“基于axure的PRD协作”，不再赘述。

4、一定要有一套属于自己的控件库

控件库，简单理解就是将产品拆解成很多的小零件，当你需要的时候，将这些零件进行组装即可。这可以大大的提高你的原型制作效率。

关于原型控件，每个原型工具都有，你可以自己网上搜索。在实际运用的过程中，你可以根据自己的需要对这些控件做修改，之后可以再次使用。

5、原型的版本存档同样重要

原型，跟实际产品一样，是会迭代和不断被修改的，所以，一定要记得存档。即使是在同一个原型上做修改，也一定要做记录，这对后续回顾很重要。

最后，

原型设计，是每个交互设计师和产品经理最最最基本的技能。这也是一个梳理思路很好的方式。

—— 微信添加 iamkentzhu 为好友，有更多精彩等着你

源地址：http://www.ikent.me/blog/4477

Justinmind，为移动设计而生

zhuyu.xq、乐乘 — 2013-03-15 20:09:44

据国内三大运营商披露的最新数字，截止 2012 年 1 月份，中国的手机用户数已达 9.8758 亿，即将逼近 10 亿大关。CNNIC最新的调查显示，截至 2012年6月，大陆5.38 亿的网民中，有 15.3%的

网民不使用PC（桌上型电脑），也不使用NB（笔记型电脑）上网，只使用手机上网。砖家解释，这个现象来自互联网向某些不便使用PC或NB的人群扩散的结果。阅读全文

智能手机功能越来越强大，同时价格不断走低，让手机上网变得廉价、方便，降低了移动智慧终端机的使用门槛，把原本用普通手机的用户转化成手机上网用户。

目前此现象还在发展中，推估单用手机上网的人群规模还将继续增长。

移动已经是不可阻挡的趋势，未来人们的获取信息、娱乐、交流的最主要渠道就是移动终端。交互在移动应用上发挥的作用更大，能够实现基于传感器的多种效果。

这里推荐一款专注移动端的交互设计软件：JustinMind。它是由西班牙JustinMind公司出品的原型制作工具，可以输出Html页面。http://www.justinmind.com/

与目前主流的交互设计工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更为专属于设计移动终端上app应用。

下面先对JustinMind做一个简单的认识，这是该软件的主界面，共有5个功能分区：

下面是JustinMind的一些特性：

1.使用JustinMind，你可以在几分钟内利用其广泛的组件和交互绘制高保真原型。它提供了一些基本的形状，如矩形和文本，还有特定的组件，如菜单，表单或数据列表。

2.关于手势的交互效果：

JustinMind提供了多种触屏的交互效果，例如滑动、缩放、旋转，甚至捕捉设备方向等等。在需要产生效果的部件中选择对应的手势即可。

3.可以创建自己的组件库。

JustinMind为iPhone ，iPad，黑莓，Android提供了多样的组件。你可以创建自定义组件库，方法是将排列好的单个组件放在一起，并将它们集体框选拖动到组件库。

这样下次你就可以直接使用自己定义好的组件。

4.更为便捷的定义样式。

相比Axure，JustinMind更好的提供了属性窗口，并且更好的支持捕获PS等软件的图像属性。

5.JustinMind可以导出原型的所有信息到Microsoft Word。能够一键生成及其规范的文档。

6.共享原型进行测试。

JustinMind支持将原型上传到服务器并提供给他人进行测试，为产品的改进做出了良好的贡献。最为特别的是，基于usernote的服务允许你将原型放到移动设备上进行测试。

7.更友好的定义交互方式。

在JustinMind中，你可以通过拖拽等方式来实现跳转、定向等交互效果，无需像Axure一样每一步都只能通过点击来完成。并且显示更为直观，如进度条。

同时可以通过一些简单的无代码逻辑语句实现更为高级的交互效果。

8.全球范围内的复用、数据共享。

每一个模板都让这一套组件有不同的视觉风格，变量允许将数据从一个屏幕迁移到另一个，甚至使用它们来检查是否满足条件。

9.发布和收集反馈意见。

发布Prototyper作品到usernote后，全球各地的人将通过Web浏览器访问您的原型。他们的反馈结果将会实时的呈现在您的原型页面。

由于JustinMind在交互方式的实现以及原型的生成方面比较具有特点，所以我做了下面一些演示：

1.事件与交互

事件是JustinMind的一个关键功能，Justinmind Prototyper的事件由两个主要部分组成：一个是事件的触发（或用户事件），另一个是一组操作。每一个事件必须在屏幕上定义

一个特定的元素，这将作为事件的触发源。

这个就是事件窗口，在上文的主界面介绍中有过简单的介绍。

交互动作按照顺序依次排列下来，执行的顺序从上到下一目了然。每个交互动作中有很多的操作，这些操作是从左到右依次执行的。只有这些操作执行完成后，才会到下一个交互动作。

2.关于链接的设置

使用链接最简单的操作就是，例如，点击Button跳转到Screen3，那么直接将Button拖拽到Screen3上面就可以了。

3.下面列举了一些常用的事件，可以看出来JustinMind的图标还是非常形象化的：

On Click: 当用户单击鼠标左键并松开

On Mouse Up: 当用户释放鼠标按键

On Mouse Down: 当用户按下鼠标按键

On Double-click: 当用户双击鼠标左键

On Right-click: 当用户单击鼠标右键并松开

On Toggle: 当用户单击鼠标左键后，自定义的事件将被执行。用户再次点击后，事件将被还原

On Mouse Over: 当用户鼠标位于所定义区域之上

On Mouse Enter: 当用户鼠标进入所定义区域

On Mouse Leave: 当用户鼠标离开所定义区域

On Drag Start: 当用户按住鼠标左键并拖动至少5像素时

On Drag: 当用户按住鼠标左键并保持鼠标移动时

On Drag Stop: 当用户停止移动鼠标并且松开鼠标右键

On Key Up: 当键盘按键被释放

On Key Down: 当键盘按键被压下

On Swipe Up: 当用户一根手指向上滑动

On Swipe Down: 当用户一根手指向下滑动

On Swipe Left Up: 当用户一根手指向左上方滑动

On Swipe Left: 当用户一根手指向左滑动

On Swipe Left Down: 当用户一根手指向左下方滑动

On Swipe Right Up: 当用户一根手指向右上方滑动

On Swipe Right: 当用户一根手指向右滑动

On Swipe Right Down: 当用户一根手指向右下方滑动

On Pinch Open:当用户两根手指互相张开滑动

On Pinch Close:当用户两根手指收缩活动

On Rotate Left: 当用户两根手指向左旋转滑动

On Rotate Right: 当用户两根手指向右旋转滑动

On Tap Hold: 当用户手指按住屏幕超过2秒

On Orientation Portrait: 当设备由横屏切换为竖屏

On Orientation Landscape: 当设备由竖屏切为横屏

On Change: 当元素的值通过用户的直接操作发生变化时

On Focus In: 当输入框获得焦点时

On Focus Out: 当输入框失去焦点时

On Page Load: 当页面加载时

On Page Unload: 当用户离开页面时

举个简单但是有用的例子，当你要实现用户名密码验证的交互效果时，在大多数原型工具中，我们需要对输入框做一些逻辑上的设定，填好其属性中的数值。而在JustinMind中则更为直观：

在交互窗口中，选择条件表达式：

将需要验证的输入框拖拽到相应判断窗口：

将相应的判断逻辑拖拽到判断窗口，例如等号，并在右侧输入框输入需要的值

OK，That's it !在主界面点击生成，就可以及时预览效果了

关于模板

你可以为页面上的不同组件选择使用不同的模板，从而不改变内容只改变样式，切换起来非常灵活。

总结

JustinMind相比Axure最让人喜爱的4个原因有：

1.Easy Drag and Drop

JustinMind里面对于组件的交互效果有着及其方便的操作方式，点击一个对象，拖动到另一个对象，OK，这两个对象已经产生了交互的碰撞。

2.Powerful Interactions

JustinMind提供了强大的交互效果，鼠标hover的状态、点击后的效果，非常逼真。同时在移动设备上能够高度仿真的实现各种手势效果。

3.Quickly Simulate

JustinMind提供了一键生成，不用再像Axure那样多步操作，点击后直接在浏览器窗口打开。

4.Great Extras

网上有各种各样的组件、模板，可以根据需要选择相应的进行使用。

欢迎加入到我们的Justinmind中文爱好者小组，一起为国内用户奉上各种教程、资源和组件库：http://www.wejustinmind.com/

源地址：http://ux.etao.com/posts/734

掌上指路标 —– APP架构与导航设计

sapphireai — 2013-03-15 20:07:26

一款小小的手机应用，却包罗万象，融合这复杂的信息内容或功能逻辑。要让用户在使用中获得最好的体验，迅速掌握应用的框架结构，其导航的设计是一个重要的环节。

手机应用的导航和现实世界中的路标或者地图的作用很类似。它是应用软件的虚拟框架，对用户具有指示标识以及识别的功能。

比如，如同路标，导航能在使用中，定位用户当前在哪儿，为用户突出当前视图重要的功能，告知用户可以去哪儿，在不同的视图和区域迅速地切换信息，记录使用的操作轨迹防止用户迷失等。那么导航应该如何设计呢？

APP导航设计的步骤主要为以下三步：
1. APP框架整理：信息架构 or 任务分析
2. 框架层级判断：扁平 vs 树状
3. 导航具体表现形式：控件形式and摆放位置

Step1: APP框架整理：信息架构or 任务分析

为什么需要框架整理呢？
这和建造一栋大楼一样。在搭建一栋宏伟的建筑之前，需要预先对建筑中的各个小房间进行规划，以确保大楼结构的正确规划和安排。而蕴含着在App设计的最初阶段，需要先建立一个App蓝图，来确保在之后软件导航的设计过程中，设计人员能对功能产品所属层级以及需要兼顾的前后关系进行宏观的掌控。

框架整理的方法

在建立蓝图的过程中，需要根据App自身的特性，选取适当的方法。当下的App应用主要可以分为两大类，内容浏览类应用和功能操作型应用。对于内容浏览类应用，需要通过信息架构的方法，对信息数据进行整合归类。而对于功能操作型应用，则需要通过任务分析的方法，将功能分解组织形成一个能够闭环的网状操作模式。

信息架构的定义及使用方法

信息架构是一种对信息进行组织分类的方法，提升信息的可用性和可寻性，以使其能更加高效有序地被用户认知。

该方法最早起源于图书馆的图书分类，图书管理员通过将相似书籍归类并且进行编号，使读者能快捷方便地在上万册的图书中找寻到自己所需要的书籍。随着计算机科学技术的发展，信息量日益增多，该方法也广泛地开始应用于虚拟数据和信息的管理中，如数据库，内容管理系统CMS（contents management system）和网站设计中。

对大规模的数据信息进行架构是复杂的，而对于这类信息的架构需要有专业的信息分析师从多维度进行分析整理。而在实际的手机产品设计中，信息量相对较为简单，对于这类信息目前采用的分析方法主要有：信息结构，逻辑树和卡片分类三种方法。

信息结构主要是从物理世界中人们已经获得普遍赞同的信息的基础结构对信息进行排布，如歌曲的标题信息按照26字母的顺序进行排列；逻辑树则是按照人们心智模型中普遍认知的逻辑结构，将信息按照树状逻辑进行梳理，比如类别信息（颜色，材料等），从属信息（红色属于颜色，木头属于材料）；卡片分类则是对一些不确定的信息，按照用户习惯，通过卡片分类和统计的方法，来对信息进行归类，在电商的物品类别和网站地图的设计中进行了广泛的应用。

任务分析的定义及使用方法

(图片来源: University of York, HCI 课程讲义)

任务分析是指将用户为了实现某个目标执行的一系列动作或者是进行的认知过程进行分析的一种行为。通过任务分析，能让设计师清晰地了解到当前APP将要实现的功能层级顺序以及信息在系统中传递的状态，使其在设计中能全局地把握住产品的结构以及用户当前所需要进行的操作。

任务分析的首要任务需要明白用户的目标，然后将用户实现目标进行的操作进行拆解，此时每一个操作都可视作为一个原始任务。再原始任务的基础上，根据需要深入的程度将任务再进行更加细致的拆解。在产品设计中，拆解的终点一般视为可以单独进行设计以及分析的子单元。

Step2 ：功能层级判断：扁平 VS 树状

再分析了App的框架结构后，产品功能的逻辑层次也就基本确定。建议可以利用一些框架绘制软件将分析整理的框架记录下来，形成一张大的蓝图。在后期的导航设计中，许多功能的安排以及排布可以直接从图中所示的位置关系进行设计。

在导航的设计中，经常遇见的功能层级主要是两种：一种是扁平层级，即所属功能在框架蓝图中属于同一层级的并列关系，这种主要出现在信息架构较为扁平化，同级别任务功能较多的视图中，如Dashboard和列表设计；另外一种则是树状层级，即信息架构较为层次化或者任务之间有从属关系，需要用户逐层深入的视图中，如iOS中的单进单出式层级导航。

Dashboard是扁平层级导航设计中经常使用到一种模式，系统的首页和App的入口作为全局导航的一种方式应用广泛。在手机操作系统中，一般采用图标加消息数目的形式配合出现，让用户在第一个页面即可以选择想使用的软件功能。

沿用这种思路，在App的设计中，应用的第一个页面将扁平化的信息层级展现出来提供给用户进行选择，可以让用户迅速定位到自己关注的功能点上。这种导航设计的优点在于App的功能结构较为扁平，用户能迅速了解全局架构，而同时又因为功能选择过多集中在首页上，那么单个功能的层级不宜过于复杂，并且需要提供快速返回首页的设置，让用户能再次做出选择。

列表设计适用于内容浏览类应用的扁平信息层级设计，将相同层级的类别信息聚合地放在一个纵向列表中。操作系统中，使用到这种导航设计的主要有通讯录，歌曲列表，商店应用等以项目名字进行排布的扁平化区域。

同理，在App的设计中，类别信息较多的电商类应用，由单条目名称聚合的应用，信息订阅型的新闻类应用的导航模式，都属于典型的扁平化信息层级，因此列表导航的设计也非常适用。并且根据自身的特性，均有一些细微的差异。如淘宝的类别目录导航，类别在设计中根据用户使用的热度进行了自上而下的排版；而Eataly菜谱导航，则因为名称聚合较多，在右侧提供了便捷选择的字母索引；BBC的新闻导航则类似于类别信息与条目信息的综合导航，因此列表导航在设计时，除了按照用户关注热度自上而下进行排列，类别栏目还能方便地收起展开或者在浏览的过程悬停在页面顶端。

（图片来源： http://www.androidpatterns.com/ ）

树状层级结构的设计在移动设备的设计中应用极其广泛。和传统PC时代大量使用的“面包屑”网状设计不同，树状层级结构只允许用户从唯一的入口进入，并且从唯一的出口返回原处。这种设计模式非常适用于功能层级或者信息架构纵向非常复杂的应用，用户能够清晰地某个分枝上前进后退，而不用担心在App 迷失了当前所在位置。

树状层级导航在App的设计上有两种表现形式。一种是如iOS中的导航栏设计。用户从列表导航中选择某项进入下一层级，通过导航栏左上位置的“返回”按钮返回上一层级，整个导航给用户的感觉就如同在一棵大树上沿着纵向进行攀爬。而另外一种设计则是Windows Phone7上的Metro UI设计。如图所示，所属层级的下级内容如同平铺一般展现在同一维度上，而逐层的导航则以左右推移的方式进行，此种导航的设计让用户在逐层深入时，也纵观到全局的设计。

Step3: 导航具体表现形式：控件形式and摆放位置

通过前面两个步骤的分析与设计，App的导航结构可以算是基本完成。但因为现在手机平台众多，用户使用习惯各不相同。所以在产品的具体设计中，为了给产品提供最好的用户体验，还需要把握平台特性，选择合适的控件形式，并且根据用户手持设备的操作系统，为用户设计导航最易操作的位置。

如对于树状层级导航栏设计， iOS的导航栏控件被安排在了屏幕上方，因为在触屏的使用时，顶部区域是信息展现率最完整的区域，在手指操作的过程中，该区域的信息不易被手的运动轨迹遮挡。通过此导航栏用户能实时定位自己所处的当前位置以及可以返回的上层界面。

整个导航栏控件由“返回按钮”，“页面标签”和“可选管理区域”三个子控件组成。“返回按钮”一般放置于左上角区域，允许用户在进行树状层级信息的浏览后，通过此按键逐层地返回上一层级。按钮本身的设计该返回按钮只对应唯一的入口信息，不允许放置多层级返回按钮。页面标签则应是显示对当前视图信息的高度概括，可对应显示视图标题，序号位置等。可选管理区块可放置对于该屏幕的一些重要操作，实现屏幕内容的管理（如添加，编辑，翻页，删除，播放，详细内容等）。但只能放置一种管理按钮。

（图片来源： http://www.androidpatterns.com/ ）

而对于Android的树状层级导航，则更多的依赖于下部的硬件实体导航控件。主流的Android硬件导航提供四种功能：返回，菜单按钮，手机桌面，以及搜索。

返回按钮让用户返回上一步的功能操作。菜单按钮可以显示当前视图中相关的操作，最多可以有6个，但和iOS的“可选管理区域”的设置方式略有不同，该区域一般是全局的功能操作，所以不一定和每个视图都密切相关。手机桌面，用户点击后会快速地回到Android手机桌面，是一种全局导航体现。搜索按钮，如果执行的应用程序中有搜索设置，则会开启软件的相关搜索部分；如果没有搜索，则会调用系统的默认搜索引擎

综上，手机产品的导航设计需要在明确了设计的总体框架和结构后，根据硬件的特点和用户的使用习惯进行设计。通过理性的架构分析，感性的体验设计，好的导航结构能让你的App设计事半功倍。

转载请注明出自”百度MUX”

源地址：http://mux.baidu.com/?p=2991

交互设计师的产出物是什么？

Steven — 2013-01-30 19:05:31

加班中，为换脑子翻翻坟。

要不要长文呢？…… 算了，还是以一些图片代替吧，大部分都是在07~08年间在之前公司建设团队时的产物。

UE Team 内部工作流程（图1），指导性的流程，实际操作中会有偏差，如任务紧急有些环节及review就会被跳过，大体是这样一个流程。

图1

UE Team 外部工作流程（图2），简陋版（复杂版估计看不懂了），表达出大体的意思，各方之间的职责及工作范围。需求方要提供详细的需求文档（request doc），需求有变更需要被记录（change request doc）、接受需求后进入内部流程并交付产出物给开发团队（一堆doc，视觉都需要文档化），开发团队依据设计文档交付版本，QA部依据设计文档进行测试并反馈bug，UE继续跟进，然后无限循环……. -_-’

图2

产品Workflow文档（图3 只列出流程图的一小角），这玩意除了我和开发其它人都不敢看，伤神！当初画得这么复杂也是有点报复心理 -_-’ 。交互人员请多画画workflow能帮你理清逻辑，但别像下图这样。

图3

产品spec文档（图4），用来杀脑细胞的，为这头发白了不少！下图是老的制作方法，完全手写，后期就与原型一并产出了。详细到界面上每个元素的具体定义及行为描述，Diagram图的编号需要与上面的Workflow内的编号一致，方便开发人员查找！有些同行说没用、没人看，但我的体会是写个一年半载，整体设计能力将提升一个level，workflow文档和spec文档也可以考验一个人的细腻程度，现在的基本功也是那时候练下来的。

图4

Spec文档细分（图5），上面这个是大spec文档，还包含一些其它部分的文档。像之前我们的产品进行设计时是一个通用性的产品，当需要针对不同的客户进行订制化时，又将产生相应的Site Modification文档。

图5

产品原型（图6），早些年做原型时基本以PPT进行产出，review时方便进行展示，后来也用Axure（算是国内较早一批使用Axure的用户吧），由于前期流程比较扎实，review环节也比较多，我们制作原型时往往会产出高保真原型。另外，我们使用Axure制作原型除了看重它的交互性之外更重要的是它能方便导出spec文档。ps.现在已经较少用到了。

图6

工作资料目录（图7 科技树要完整 ^_^ ），做完一堆工作，产出N份文档，需要有一个逻辑清晰的目录管理，方便以后工作。下图仅列出产品目录，三个层级：产品名称》文档分类》具体目录。简单、明了、命名清楚（相关人员只要看到文档名就知道是哪个产品的哪份文档以及版本情况，下面介绍）

图7

文档命名规范（图8），这个是有大用处的东西！交付物从不同的设计人员手中产出，以文档的形式进行存放，并且需要给不同部门、不同人员进行阅览，命名统一后管理方便、沟通一致。

图8

-_- 这… 没想又成长文了！
罗列到这吧，除了上述这些，还有许多杂七杂八的文档。

目前，市面上用户体验人员越来越多，设计师也越来越多，但… 对于流程、规范、交付物、都没有太多介绍，不知道上面罗列的对各位有木有帮助，各个公司都有各个公司的玩法，算是一个补充吧。

UX / UE / UCD / UED / PED … 我都浮云了！设计而已嘛，继续加班 ……

ps. 转载请注明作者，不然黑你家产品 (-”-)

源地址：http://www.jianjia360.com/?p=304

数据可视化6步法

duanwei — 2013-01-30 19:04:28

在当前互联网，各种数据可视化图表层出不穷，本文尝试对数据可视化的方法进行归纳，整理成6步法。

一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值，我们暂且将其分别定义为指标和指标值。比如一个性别分布中，男性占比30%，女性占比70%，那么指标就是男性、女性，指标值对应为30%、70%。

1. 将指标值图形化

一个指标值就是一个数据，将数据的大小以图形的方式表现。比如用柱形图的长度或高度表现数据大小，这也是最常用的可视化形式。

传统的柱形图、饼图有可能会带来审美疲劳，可尝试从图形的视觉样式上进行一些创新，常用的方法就是将图形与指标的含义关联起来。

比如Google Zeitgeist在展现top10的搜索词时，展示的就是“搜索”形状的柱形，图形与指标的含义相吻合，同时也做了立体的视觉变化：

2. 将指标图形化

一般用与指标含义相近的icon来表现，使用场景也比较多，如下：

3.将指标关系图形化

当存在多个指标时，挖掘指标之间的关系，并将其图形化表达，可提升图表的可视化深度。常见有以下两种方式：

借助已有的场景来表现

联想自然或社会中有无场景与指标关系类似，然后借助此场景来表现。

比如百度统计流量研究院操作系统的分布，首先分为windows、mac还有其他操作系统，windows又包含xp、2003等多种子系统。

根据这种关系联想，发现宇宙星系中也有类似的关系：宇宙中有很多星系，我们最为熟悉的是太阳系，太阳系中又包括各个行星，因此整体借用宇宙星系的场景，将熟知的windows比喻成太阳系，将xp、window7等比喻成太阳系中的行星，将mac和其他系统比喻成其他星系，表现如下：

构建场景来表现

指标之间往往具有一些关联特征，如从简单到复杂、从低级到高级、从前到后等等。如无法找到已存在的对应场景，也可构建场景。

比如百度统计流量研究院中的学历分布，指标分别是小学、初中、高中、本科等等，它们之间是一种越爬越高，从低等级到高等级的关系，那么，这种关系可以通过构建一个台阶去表现，如下：

支付宝新出的个人年度账单中，在描述付款最多的三项时，构建了一个领奖台的形式：

小结：

根据之前3步，可将指标、指标值和指标关系分别进行图形化处理。

以最简单的性别分布为例，可以得到一个线性的可视化过程，如下：

以上图示为供参考的线性化过程，实际可视化思考中，将哪类元素进行图形化或者图形化前后的顺序可能均有不同，需根据具体情况处理。

4. 将时间和空间可视化

时间

通过时间的维度来查看指标值的变化情况，一般通过增加时间轴的形式，也就是常见的趋势图。

空间

当图表存在地域信息并且需要突出表现的时候，可用地图将空间可视化，地图作为主背景呈现所有信息点。

Google Zeitgeist在2010和2012年的年度热门回顾中，都是以地图为主要载体（同时也结合了时间），来呈现热门事件：

5. 将数据进行概念转换

先看下生活中的概念转换，当我们需要喝水时，通常会说：给我来一杯水；而不会说：给我来30ml的水。在这里，30ml是一个实际数据，但是难以感知，所以用一杯的概念来转换。

同样在数据可视化，有时需要对数据进行概念转换，可加深用户对数据的感知。常用方法有对比和比喻：

对比：

下图是一个介绍中国烟民数量的图表：如果只看左半部分中国烟民的数量：32000000，知道数据量级很大，但具体有多大却很难感知；直到看到右半部分：中国烟民数量超过了美国人口总和，这样一对比，对数据的感知就加深了。

比喻

下图是一个介绍雅虎邮箱处理数据量的图表，大意是每小时处理的电子邮件大小有1.2TB，相当于644245094张打印的纸。

这又是一个很大的数据，但到底有多大？在这里用了一个比喻的手法：644245094张纸，如果把每一张纸首尾对接，可以绕地球4圈多。到这里，能较深刻感受到雅虎邮箱处理的数据量之大，为地球节省了很多纸张。

更进一步地，还将这个比喻进行了图形化表现。

6.让图表“动”起来

数据图形化完成后，可结合实际情况，将其变为动态化和可操控性的图表，用户在操控过程中能更好地感知数据的变化过程，提升体验。

实现动态化通常以下两种方式：交互和动画。

交互

交互包括鼠标浮动、点击、多图表时的联动响应等等，如下是百度统计流量研究院的时间分布图，采用左图右表的联动形式，左图中，鼠标浮动则显示对应数据，点击则切换选择：

动画

包括增加入场动画、交互过程的动画、播放动画等等。

入场动画：即在页面载入后，给图表一个“生长”的过程，取代“数据载入中”这样的提示文字。

交互动画：用户发生交互行为后，通过动画形式给以及时反馈。

播放动画：一般来是提供播放功能，像看视频一样，让用户能够完整看到数据随时间变化的过程。下图是Gapminder在描述多维数据时，提供随时间播放的功能，可以直观感受到所有数据的变化。

总结

数据可视化形式多样，思考过程也不尽相同。以上6步法，是基于“数据”层面（区别于信息可视化），梳理思考过程，总结设计方法，为后续可视化提供可借鉴的思路。

源地址：http://ued.baidu.com/?p=3909

你怎么看第三方登陆

nothing弄一个 — 2013-01-25 15:31:03

最近遇到一个我一直不把它当问题的问题，就是关于第三方注册和本地注册的选择。之所以之前不当成问题，是因为作为一个普通用户，第三方登陆/注册简单方便，无外乎有时一些流氓应用强暴我发条微博或者暴漏点信息罢了，但冲着方便也就忍了。但这次之所以变成了问题，是在设计一个应用时，大boss说要去掉本地注册口，只留第三方的口，忽然一下子就懵了，这不是把自家门钥匙都给了别人嘛，这还是我自己家嘛！于是乎仔细思考了下……

就我知道的现在普通的注册分以上4种情况，我们目前采用的是第三种，分别说下优缺点吧

· 第一种：最传统的注册方式，注册门槛高，易在登陆页面就流失用户

· 第二种：可能很少的app会用这种，用为没有留下用户的本地ID，无法跟踪用户行为

· 第三种：第三方注册后系统默认分配给用户一个ID，可能用户可见，也可能不可见

· 第四种：第三方注册后用户手动填写一个ID而且还不能重复（这是我个人最讨厌的一种方式，感觉像是被骗进来注册的，比直接注册还要麻烦）

要说一下的是，只要是通过第三方登陆，就代表用户拿着别人给的钥匙进了我家门，一旦这钥匙被拿走了，用户也就没了。

下面从用户，本地app和第三方三个角度说说这事

· 用户的角度

第三方登陆方便了用户日常的网络生活，身在一个离不开网络的时代，每天都面对着不同的登陆界面，能有一种简单的登陆方式显得很重要。第三方登陆方便快捷，且很多资料信息可以公用，并可以将自己在某个app的动态信息同步到各个sns平台。于是有些犯懒的用户可能会养成一种“一个账号走江湖”的心里。

但话说回来，无论什么事只用一种方式处理肯定会在阴沟里翻船的，比如哪天你的微博号被封了，你的QQ号被盗了，株连下来的相关app也不能登陆了，注册新账号的话，那么之前你在网络上记录的生活也都回归到零了，那个时候，你又该怎么办呢？

· 本地客户端的角度

对本地应用而言无非是简化登陆过程，降低注册门槛，获取海量新用户。在争抢用户的竞争中，提高用户的转化率是决定能不能突出重围的重要因素。同样的事情都有两面性，我们利用第三方登陆的这种方式，在应程度上是依赖第三方的一种行为，在知乎上看到一篇很有激情的文章，说的就是关于使用第三方登陆都与app应用的限制，链接网址是www.zhihu.com/question/19618841；虽然有些说的极端了点，但在某种程度上也是对app设计者或者投资人的一种警醒，而对于那种直接去掉本地注册的app，更应该好好思考一下自己app的未来发展，保重啊~~~再者就是用户本事对第三方登陆的犹豫，就是关于隐私的暴漏，大家的潜意识下是不想在随便一个app上暴漏自己过多的信息的，这里结了两张图

综上，如果只保留第三方登陆，那么对于想保护自己隐私的用户，可能就比较容易流失掉了

· 第三方的角度

这样看来，第三方账号貌似像个大老板一样，随便给你开个口就可以让你活的好点，把口一掐，估计你是活不太好了，而且可以很好的继续扩大它本身的用户基数。我目前还没有想到这这种绑定对于这些大boss有什么坏处，在这场以用户数量定输赢的博弈当中，强大的第三方貌似永远是胜者。

未来的发展：创造一种新的登陆方式，更简单的，更具权威的，不依赖的

于是乎开始想，到底什么样的登陆方式，最适合一个新app。之前曾想，要是能以每个用户为单位，都有一个唯一的ID，类似指纹，身份证号等这具有唯一性和真实性的东西，让虚拟的社交网络完全落实在一个很实在的基础上，但这可能需要一个很大的数据库和服务器的支持，甚至涉及到很多政治上的因素，就如同最早提出的openID一样，也需要用户一个相对的接受过程。未来的世界将是一个光电信息传输的互联网时代，如何在这个虚拟的世界中做到真实可信，将是我们要逐步完成和思考的问题（想到这里貌似有点空泛了，呵呵）。

那么就目前来说，我们还能有什么好的想法呢？看到知乎上有个兄弟说，第一次登陆后设置九宫格解锁的方式，不用再次输入，而是转变了一种行为，这也许是个好主意吧。当然我们可以在技术上革新和拓展，比如指纹，瞳孔，人脸识别等，如果你想要十分安全的账户和密码，那就要：口令、虹膜、指纹（带体温）等等多方位整合了，就和电影里的保险箱一样。听起来好像遥远，但谁又知道呢，这个互联网的时代什么都有可能在一瞬间改变。

最近看到了这个Email一次性登录 方法，转给大家看看

（转）介绍一种最简单的实现，它是美国程序员Ben Brown在今年（2012）7月份提出来的。

他的做法很简单。用户登录的时候，只显示一个Email地址输入框。

用户输入Email地址以后，网站就向该地址发出一封邮件，里面包含了一个登录链接。用户点击这个链接，就证明他/她确实是这个邮箱的主人，身份有效，从而实现登录。

登录链接只在一段时间内有效，但是可以通过cookie，让用户长时间处在登录状态。如果cookie失效，则重新向用户邮箱发出另一个登录链接即可。

由于整个认证过程，都通过电子邮件完成，彻底实现"无密码登录"，而且操作流程很自然，易于理解。更重要的是，它使用现有的Email协议，不需要服务器端部署新的代码，具有最好的兼容性。

主要缺点是，它需要用户额外查看一次邮箱，稍显麻烦；它也不适合那种用户无法打开Email的场合，比如在朋友家中上网。因此，使用它的网站，还必须部署备用的登录方式。

综上是对于第三方登陆的思考，个人就目前的情况看，还是很不同意只保留第三方注册的口的，希望给有需要的人带来一点帮助~~

源地址：http://nothingnongyige.diandian.com/post/2013-01-25/40047714127

用户如何看待验证码广告

不是司南 — 2013-01-24 10:25:33

内容导读

从本篇文章中，你将获知什么？

国内外验证码广告介绍
验证码广告用户体验的重要性
验证码广告用户体验数据
上线5个月，验证码广告的表现如何？
验证码广告的多样形式

正文

12年7月，验证码广告作为百度联盟新的广告产品华丽上线。什么是验证码广告？顾名思义，就是在输入验证码的环节插入广告。怎么插入？像这样，扩展验证码区域，嵌入一张广告，提取广告内容，让它变成需要用户输入的验证信息。

这是传统验证码：

这是验证码广告：

其实在百度之前，验证码广告就作为新型展示广告在国外受到好评，诸如最出名的2家，Double Recall和Solve Media。Double Recall最早，2010年就在欧洲推出了这个模式，并辅之以数据证明验证码广告的盈利能力以及广告效果，曰：该广告的CPM(每千次展现成本)可达120美元，是传统展示广告的10倍左右，另在广告主知名度提升角度，优于传统banner广告11倍。Solve Media在其白皮书中也肯定了验证码广告在品牌效果方面的卓越建树。国内也有诸如宇初，创始人赵俊利前不久刚刚拿到了天使投资，称验证码广告为“互联网闲置资源中的金矿”，预估市场规模390亿（赵俊利的预估依据：每年中国网站因注册、登录、发帖、下载等应用进行的验证码输入次数约1300亿次，他给广告主的开价是300元/千次）。

验证码广告的优势显而易见：对于站长，增加了变现流量；对于广告主，获得了优质注意力。优质注意力如何解释，因为互联网信息过剩，其实大部分广告的展现是没能展现在受众面前的，即无效展现；又因为一定程度的广告回避效应，这个广告即使有效展现了，现如今聪明有经验的受众也知道哪些区域是广告，从而在浏览页面的时候能够快速聚焦重点区域，对广告视而不见。那么验证码广告有点类似传统广告中的“强制广告”，出现在必须的下载流程中，闪不开，躲不掉，强制关注，强制输入，从而获得高效高质的注意力。

看到这里，其实我们的问题也就产生了：作为广告过程中的重要一方，受众，是否接受这样的广告形式？

纵使国外成功了，我们的受众与国外的受众还不太一样，国外有pay-wall一说，就是用户在获取一些版权相关的东西时，需要付费才可以获得。因此验证码广告对用户的利好是非常明显的，用户可以用时间和精力换来免费的资源，而这笔费用实际就变成了广告主来承担。用户花几秒钟的时间省了版权费，广告主花钱买到了有效注意，可谓两全其美。

但国内，对于习惯“免费午餐”的网民来说，验证码广告是否有损我们的用户体验，有损的话有多大影响，是否致命？另外广告效果是否真如我们预期，受众对广告内容能记住多少？

请带着以上问题来看以下数据：

本调研实施于验证码上线一个月左右的时间，截止目前持续周期5个月。分别在验证码广告以及下载站站点上做了问卷入口，用户点击即可进入我们的问卷平台。8月样本量924，9月1768，10月1403，11月3562，12月2607，总计10264。

1. 用户是否接受验证码广告（Figure 1）

58%的用户表示“验证码广告形式新颖，我喜欢”。

5.8%的用户表示“不可接受，宁愿付费下载”

传统验证码是枯燥无趣的，为了识别确是人类还经常加一些斑点、波纹等噪音，不知会不会有人在反复输入提示错误时大骂一句%$#&。

这也就不难理解验证码广告在打断任务流的情况下还会有6成用户喜欢。

2. 用户在验证码广告的辨识方面有困难么？(Figure 2)

仅1成用户表示“辨识困难”

其中，“更容易”在原题里表示为比传统验证码更容易，“相差不多”表示和传统验证码相差不多，“需要适应”表示刚开始有点不适应，稍微熟悉一下就没问题了。

新产品的诞生总要面对市场的培育及用户习惯的培养，验证码广告上线于用户不知情与无准备的情况下，因此用户开始的不适应是非常正常的，并且在UI的合理引导下能使开始不适应的用户快速适应，这一部分人群也在一定程度上昭示产品的成功。

3. 验证码广告对用户的下载行为是否构成威胁？(Figure 3)

74.6%的用户表示会“照常下载”

12%的用户会放弃下载

这个问题是产品上线之前我们最担心的问题。结论的得出给产品团队吃了颗定心丸。免费午餐不会是中国互联网的长久之态，越来越多的用户会适应在“得到”之前付出一些小小的代价。

4. 验证码广告的记忆效果(Figure 4)

43%的用户能记住输入的内容

14%的用户能记住广告主品牌

广告效果指标按程度分为认知、情感和行动，认知又分为广告再认和广告回忆。并且，研究表明，用户参与可以有效提升广告回忆效果。

因为我们的线上环境难以控制广告对单一用户的再现，所以这里仅作了广告回忆，并将回忆按照由低到高分成3个层次，记住输入内容、记住广告、记住广告主。

数据显示，3/4的人在有广告意识的情况下，半数以上的人记住了输入内容，1/5的人记住了品牌。对比普通展示广告至少三成不被注意，注意到的也容易被用户选择性忽略的情况下，验证码广告的优势显而易见。

以上是验证码广告上线之初的数据情况。5个月后，我们对以上情况再次进行了考察。

数据显示，历经5个月的时间：

1. 用户对验证码广告新颖性的感知并未衰减，且排斥情绪在下降。

2. 难度对于用户来说越来越低，验证码广告相比传统验证码的辨识优势渐显。

3. 对下载行为的负向影响不断降低。照常下载的人群比例在不断攀升，从74.6%上升至82.6%。

4. 记忆效果未见明显增势，品牌意识略有增加。体现在能记住广告主品牌的人群比例在上升。但其实不是所有广告主都将重点放在品牌上，有的主打产品概念等，所以这一项仅供参考。

验证码广告在整个业内状态还处于发展之初，参与站点和广告主还都比较少，形式相对来说也比较单一。

百度、宇初用的基本就是颜色识别，提示用户输入某种颜色的文字，像这样：

可以看看国外的例子。将内容放在引号里，提示输入引用内容：

更有趣、更个性一点的还有这种：

提供稍稍有难度的判断要求，同时提升验证码的趣味性。不过实际操作起来对广告主的要求较高。

笔者简单概括下，目前市场常用的验证码识别方式有：颜色识别（最为常见）、引用识别以及判断识别。

作为产品，我们可以继续在验证码的形式上下功夫，使得它变得更为喜闻乐见，优化体验，在记忆的基础上提升品牌好感度等。广告主方面，可以更为巧妙地提取产品特征，尤其对于新产品上市导入新潮理念，成熟品牌开拓新的产品线，增加新的营销理念，提升验证信息与广告内容的契合度。

验证码广告将如何发展，笔者不好说，但面对互联网革新，广告产品也在不断寻求传统Banner广告之外的创意形式，验证码广告作为创新样式的第一波试水，效果还是比较喜人的。我们期待伴随市场的更多渗入，验证码广告能发挥更大的优势。

-END-

特别鸣谢蛋东的精美配图

相关话题：验证码源地址：http://ueo.baidu.com/?p=1813

善用文字的力量（二）——如何写好文案之“找卖点”

yuanjing — 2013-01-24 10:13:23

有研究表明：文字和图像能够引起人们注意的比例分别是22％和78％；能够唤起人们记忆的比例则分别为65％和35%。在前一篇介绍文案撰写的博文《如何写好文案之“做减法”》，我们从限定文案结构、精练文字技巧方面介绍了如何通过精练的文案，使得广告可以得到更多的注意和记忆。

然而，要想真正唤起消费者对广告的兴趣和较高的记忆度，单凭精练文字这一个步骤是很难实现的，而需要更好的设计文案传达的内容。那么，广告文案应该如何表达，才能更好的吸引消费者的兴趣并让其产生深刻的印象呢？

文案误区，直白平淡的说产品。

我们时常会看见这样的广告：文案内容简单直白的罗列了公司经营的全部业务或产品，抑或是像说明书一样详尽介绍产品或服务的主要功能。这类广告反映了一些广告主的心态，他们希望自己的产品和服务被消费者知道并记住。但事实往往是：这些平淡无趣的广告，除了广告主自己以外，很难有用户真的愿意关注它。

新颖有趣，才能让人印象深刻。

因此，广告如果希望令人印象深刻，务必要找到一个突出的“卖点”，并将其与消费者的“兴趣点”相结合。也许有人会问，如果消费者对广告产生了兴趣，但却无法了解产品服务的详细情况怎么办？我的目的可不是让消费者感兴趣、高兴那么简单。那么，我们想说的是，在复杂的网络环境下，如果消费者不感兴趣，信息是无法强制传达的，他们的视线可以直接掠过你的广告或任意关闭右上角的红叉叉；而一旦消费者产生了兴趣，他们会乐意点击你的广告，主动的获取更多信息。

相较于单纯介绍产品服务信息的广告语，有明确卖点的广告文案更能吸引消费者的兴趣。

六“卖”神剑，找卖点的6种方法。

那么，究竟选择什么样的话题，才能更好的吸引用户的兴趣呢？通过对一些优秀互联网广告的分析，我们总结出了6种容易吸引用户兴趣的话题或方法。

1. 新闻故事，博眼球。

人们总是容易对一些不同寻常、不可思议的事件产生好奇。因此，将广告包装成抓人眼球的新闻话题，更容易引起消费者的关注。

文案示例：

她是如何进入渣打银行工作的？3天，迅速拿到外企offer！

他53岁开始学习英语，成效惊人。时代报、CBN杂志特别报道。

励志哥变形记。从0基础到月薪10000，五星酒店里飞出英语达人。

2. 热点话题，获关注。

流行、热点话题往往是一段时间内大多数人关注的焦点，将广告语与最近流行的热点话题通过某些特质相联系，可以凭借热点话题的高关注度，吸引人们对广告的注意。值得注意的是，选取的热点话题应注意时效性，不应选取时间久远的话题；此外，产品服务和话题之间的关联也要自然，避免牵强附会。

文案示例：

生命不息，奋斗不止。2012，老罗英语，世界末日，照常上课。

品味舌尖上的英语，得New Ipad。

哑巴英语的末日。2012，原来这才是末日真相。

3. 普遍问题，找出路。

除了新闻话题、热点话题外，选取与人们工作、生活息息相关的话题或普遍面临的问题、难题，也可以引起人们的关注；品牌或产品若能针对这些问题给予良好的解决方式，还可以额外的得到消费者对其的认可。

文案示例：

还在为美国留学苦恼吗？XX（品牌名），帮你实现美国梦。

你已经多少次下定决心学好英语又半途而废了？跟不屈不挠的人在一起，坚持的可能性更大些。

英语不好，处处碰壁？来美亚英语，三个月英语听说无障碍。

4. 逆向思维，反传统。

当所有企业都强调自己是第一的时候，如果你说自己排名第二，也许会取得不同凡响的效果；当其他人都传递越多越好的理念时，你却告诉大家少是好的，也会出人意料。因此，从反方向突破常规，是一种非常容易吸引消费者注意力的方式。

文案示例：

1年=14个月。交1年的钱，上14个月课。

出国留学只学雅思怎么够？海外生活从XX（品牌名）开始，带你透过英语看世界。

对不起，我们只会教英语。美亚英语，专注英语教学14年。

5.关联特征，巧嫁接。

运用比喻、夸张、拟人等修辞手法，将某一事物的特点与另一事物关联起来，也会产生意想不到的效果。值得注意的是，不同事物之间的联想，要自然不生硬，二者之间确实存在某些共同的特征，联系起来才能博大家一笑。

文案示例：

XX（品牌名），把外教装进口袋！

暑期特价英语课程，白菜价，学英语。

2011年老罗英语培训暑假住宿班，打架报名中。

6. 抛出问题，引共鸣。

选取人们熟悉的话题进行发问，通过引发大家的思考而激发其对品牌或产品的共鸣，也能给人留下印象深刻的感觉。

文案示例：

How are you？Fine. 接下来说什么？上班族必备职场口语，抢救你的口语尴尬。

人民币一块钱在今天还能买点什么？或者，也可以到老罗英语培训听八次课。

最后，特别鸣谢力力张同学的重口味设计~~~

源地址：http://ueo.baidu.com/?p=1753

设计边缘状况的几个“凡是”

Danis — 2013-01-06 20:40:08

因为在做细节交互设计的时候，有时候明明知道却老偏偏漏掉一些特殊状况的方案设计，

其中又以边缘状况的设计遗漏为多数，所以干脆给自己总结了几个“凡是”，以提醒自己记得别忘记。

在这里一一列举，希望对大家也有些许帮助。

一。凡是输入，必有限制。

当我们在设计中使用到输入控件特别是文本输入框的时候，这个问题就来了。

第一个需要面对的是字符数的限制，

字符数的限制有的来自于产品本身的业务限制，

比如微博的140个字，注册时账号和密码的长度等。

有些产品看上去并不限制字符数，或者说并不给用户交代“限制”的概念。

但其实也需要限制，这种限制来自于技术方面的考虑。

比如写邮件的时候填入的收件人个数，搜索框接受的关键字字数，留言板的内容等。

虽然业务不要求，但录入的内容，可能会造成提交的困难，数据库的臃肿，被攻击的漏洞等，

所以我们也不得不考虑“隐形的限制”，虽然边界看不到，一旦用户越界，还是需要有相应的解决方案。

图 - 其实邮件主题还是不能写太长的，虽然一般不会写这么长

图 - 百度原来也有字数限制

输入并不全是文本，所以我们还需要面对其他格式的输入限制问题。

比如上传文件的个数，

图 - 人人网上传照片的数量限制

比如上传文件的大小，

图 - qq邮箱附件的大小上限

比如上传文件的格式，

上传照片的的时候如果用户选了非图片格式的文件怎么办？一开始就让ta只能看图片文件还是选中后提醒？

图 - qq邮箱对于exe附件的限制

这些限制也都从业务和技术两方面考虑，

比如相册一次只能传20张照片，升级为会员就能传50张，这是业务限制。

用浏览器相册一次只能传20张照片，安装插件或客户端，能传50张，这是技术限制，考虑浏览器负荷。

面对以上输入限制问题的时候，具体的解决方式当然是多种多样的，这里列举一些规则：

a.如果是字符输入，中英文字符数的计算规则。规则不一样，设计也不一样。

图 - 新浪微博是限制140个中文280个英文（当然还有各种其他字符空格的情况）

b.如何暗示限制？

c.违反规则的时候作何反馈？

这个问题文章下面会继续提及。

d.输入控件根据容纳内容的变化？

是直接用滚动条解决呢？还是伸长输入框呢？还是两者结合呢？等等。

图 - 出现滚动条

图 - 延长高度

e.别忘了以上内容。画一个输入框时想想这不是一个无底洞。

二.凡是输入，必考虑输出。

界面上的动态内容，可能来自于后台编辑的录入，也可能来自于前台用户的发表，

总之，界面上的动态内容，都是先有人输入的。

输入的人（特别是用户）可能不会去考虑以后展现的效果，

但作为设计师的我们，就要为用户考虑了。

要考虑超量内容的显示。

这涉及到两个方面的考虑，

先考虑输入时候的限制，我们要知道究竟某个显示空间究竟最多可能出现多少内容

（当然，有时候是输入输出一起考虑，最终双方平衡）。

再考虑这些内容在显示空间里如果显示不完，那怎么办？

解决方案可以是索引页显示局部，到详情页再显示完全（总得要有个地方显示完全的信息），

也可以是显示部分内容，留待更多展开显示。

或者滚动条来拯救等等等等。

既然有超量内容，也可能有空白内容。

当搜索结果为0的时候，怎么显示？

当用户还没收到任何消息的时候，怎么呈现？

当某个分类下的商品为空的时候，怎么办？

这些问题也不要忘记考虑进我们的设计方案里面。

图 - 有个说明总好过让人家以为未加载出来

图 - 不能总是指望用户每次都能搜出结果

另外，还有分辨率的事。

无论是移动终端（特别是android）还是电脑，我们设计的界面会出现在各种尺寸的显示器上。

这就决定了我们不得不考虑屏幕的适配问题。

比如一个pc上的弹出层，确定按钮的位置要保证在第一屏的话，那得考虑主流（里最小）屏幕高度。

比如一个默认的全屏应用壁纸，多大合适？用平铺合适还是居中合适？还是自适应？

比如480x800的屏幕能显示6行列表项，在480x854的屏幕就能多显示一行。

三。凡是成功，必考虑失败。

别想着用户永远都能正确操作，人非圣贤。

这是个大话题，涉及到怎么防止错误，错误后怎么提醒，怎么给予帮助，也许以后再专门做文章吧。

在这里想说的是，有时候做设计做昏头了，再加上进度紧张，

往往只是把正常的流程做出来了，却忘记了，既然用户操作了，就可能失败。

比如注册时表单项某些没填，

登录时密码账号不符，

拖动文件失败，

粘贴图片失败，等等等等。

图 - 加载失败的时候

边缘状况并不是我们设计的主要内容，但却又是不得不设计，

它体现着产品的贴心，考验着我们的细心，

魔鬼都在细节里，别忘了它们 :) 。

源地址：http://blog.sina.com.cn/s/blog_65b4f8d50101855x.html

有限屏幕的无限空间 -从空间角度谈移动界面扩展

wangrong03 — 2013-01-05 09:08:57

移动产品大家都不会陌生，几乎是无所不能，可以随时随地满足用户的多种需求。那么移动产品设计呢？有没有遇到类似的情况，PM小A说：产品要增加功能，在界面上加个入口，小意思嘛。小B说：内容太少了，咱们再扩展一下页面，没有难度嘛。小C说：能不能挤一挤多放个功能？用户真的有需求…

可界面的空间是有限的，内容需求却是无限的，从3.5寸到5.2寸到9.7寸的pad，不管多大尺寸的屏幕，都逃脱不了这样的命运。就像房屋的空间和放在里面的东西，永远存在东西放不下的问题。既然是同类的问题，能不能从相同的角度出发来找到解决方案呢？

在建筑学中，空间主要指视觉层面感受到的几何学意义的三维物理空间，也就是空间中的人对环境的一种三维层面的感受。因此空间扩展就是从不同维度来寻求解决方法，包括收纳、层级化分割和视觉感受扩张等。类比到移动产品的体验上，最基础的也是如何让有限的屏幕承载更多的功能，让用户感受到空间的舒适。本文就借助建筑学的空间扩展概念，从信息收纳、层级化信息、变脸和视错觉四个维度来谈谈屏幕空间的扩展。

收纳

顾名思义，把不用的东西收起来，表面上干干净净，打开会找到想要的内容，这种方式特别适合零碎功能的整合。

1.收纳方式分类，主要有以下三种。

a. 定义好收纳规则和内容

即规定整理好要呈现给用户的功能，这一种的关键点就是抽屉的标签，让用户在关着的情况下能究竟收在哪里，入口在哪里。

那么收纳的形式呢? 从交互模型来看有很多种，最典型的像Path 的侧边栏式，上下折叠式，沉入式，还有Android系统级操作的处理方法。目的都是在用户不会用到的时候，把相关的信息藏起来，收起来，并且有个永远存在的入口，当用户需求就能快速拉开调起，非常方便。

b. 定义好收纳规则后，用户随意扩展内容。

这种收纳方式特别适用于记事类或者日程类的应用，因为相对来说，这类应用的主要信息源是用户本身，且纵向无法预估和控制信息的量级。那么这样一种定义好收纳规则，但内容无限的方式就特别适用了。下图就是一种典型的记事本信息收纳方式。

c. 用户自定义规则和内容，随时可以整理替换抽屉的内容。

既然空间交给用户，怎样分割和收纳都由用户自定义，那么这一种方式的关键就是“扔”和“装”都要方便，可以简单快速的将内容装进抽屉。最直接的例子就是iphone的app界面，拖动叠加即可形成一个收纳，拿出去也非常方便。

2.收纳样式，主要分为“有门抽屉”和“无门抽屉”两种

a.有门抽屉

是指即使抽屉关闭，里面的信息收纳着，也需要固定存在的入口时刻提示用户从哪里开启，像侧边栏，永远有开启按钮的。

b.无门抽屉

是指开关抽屉门的都是通过高级手势操作唤起的，连门都不需要，只需要用户知道开启方式，比如长按、滑动指定信息条等唤起。
一般来讲，高级操作对应的也是收纳的较高级，不常用的信息，用户知道开启方式就可以，连抽屉门的空间都可以节省出来。

层级化信息

空间有限，那么要想空间利用更有效，可以将空间分割，分模块展现内容。不管是单纯的list列表，瀑布流，还是其他什么形式，总会从其他维度找到剩余空间。类比成道路交通，飞机、道路交通、地下轨道并行，便是充分利用了空间。移动界面中同级、下级的页面跳转，可以利用动效带给用户更接近真实的空间层级感。其中包括

a.同级多tab架构

b.下级筛选（包括下拉式和浮层式）

c.沉浸式下一级体验

即还原了相机近大远小的原理，通过层级分割展现更多信息页面，这种方式的好处是每个界面都可成倍扩展。

(以上只是各类别的列举，相同属性的内容都可进行扩展)

变脸

在Web 设计中不会在意细小的空间，状态条就是状态条，即使没有状态，空着也好，但移动空间实属宝贵，那么在不需要的时候显示其他内容，也不失为一种解决方案。基于代码实现的虚拟空间，都是可以有If-then条件的。
举例来说就是在XX情况下，按钮状态为A；在XXX情况下，此按钮状态为B。或者同样区域可以显示不同内容，承载不同的操作。

a.同区域显示不同状态

即延续web的状态条逻辑，将更多状态显示的集成发挥到极致，实时感知情境的变化，作为与用户直接沟通的对话窗口，承载更多信息来达到节省空间的作用。

b.同区域显示不同功能

像输入框的提示，情景化的按键等，会根据不同的框属性，适配不同功能按键。如下图所示比如联系人列表，在默认状态显示联系人列表名称，当用户需要搜索时，就会展开搜索框可进行输入。同一个区域在不同状态下，承担着两种不同的任务和内容，但这种方式的局限性是可扩展范围较小。适合一些小功能的位置集成。下图是某应用中的联系人列表，很直接的一个小点就是，将联系人列表显示和搜索联系人操作集成到同一区域，用户也容易接受。
同样同区域不同功能的变化在输入法的按键上体现的更为明显。

显示联系人列表

展开搜索框

目前对于移动端的应用，更多是对这种“变脸”逻辑的研究和扩展，很多产品也推出了情境化感知的概念，即扩展移动设备可感知的情境，增加if条件，让空间利用实现到极致。包括现在热门的对Smart Bar的讨论也是同样的道理。
因为移动设备有各种传感器，能实时收集用户信息，这些都是让应用变得更加智能的前提。

补充一点

在室内设计中，由于镜面具有反光和成像的功能，因此将其用于室内不仅能增加室内的亮度，而且能起到扩大空间感、丰富室内装饰效果的作用。这种视错觉的运用同样可以应用到移动界面设计中，通过轻量化视觉元素，增加转场动效等方式来使用户操作过程中体验更顺畅，从感受上起到扩展空间的效果。当然这更抽象到一种情感设计的层面，具体的应用方法还值得大家一起探讨。
下图同样为主屏解锁界面，一种是到点到点，另一种是点到边，哪种看起来空间更开阔呢？明显第二种会给人带来一种可扩展的空间感，第一种就显得完全平面化了很多，同样是一个界面的信息，第二种就给人一种更广阔空间的心理暗示，通过沉浸感的交互方式让用户感受到无限空间。

总结

好了，以上就是从建筑学空间扩展的视角出发，从收纳、层级化信息、变脸和视错觉四个层面分别对应到移动应用中,希望可以为你在移动应用中扩展信息空间的设计带来一点灵感，每个层面还可以扩展出更多的方式，我们一起在设计中不断积累和总结吧，充分利用屏幕空间，让有限的空间可以实现无限的延展。

转载请注明出自”百度MUX”

相关话题：移动设备的交互和设计源地址：http://mux.baidu.com/?p=3433

在设计中如何把握高保真的度

雪鸮 — 2012-12-31 15:43:28

让产品原型尽可能的高保真、华丽丽、无限逼近于完整产品是每个人都要的。但同时高保真也意味着大量的资源投入。如何在设计中既实现尽可能高的保真度，同时又避免资源浪费呢？这即需要我们对高保真的意义有清醒认识，同时也需要吸取一些敏捷的思想。

怎么定义高保真

一个华丽丽的作品（不局限于互联网产品）不可能一下子就从脑子里创意变成现实。它会被拆分成一系列相互依存的元素，整个组装过程会先从最基本的元素开始，逐渐填充和丰富。就像房子，先有钢筋，再有水泥，再有装修；就像汽车，先有车架，再有喷漆。

高保真的高是以完整的、可为消费者服务的产品为标准的。产品的诸多元素，目标用户、用户需求场景、信息架构、布局、控件逻辑、尺寸、色调、纹理、风格等等，被填充的越丰满，对最终完整产品的“模拟”程度就越高。只要能让这个半成品看起来更像是成品，就是高保真，怎么个像法，可以有很多选择。

所以，所谓的“高”保真可以是对外观的高保真，也可以是对交互逻辑的高保真，或者对代码性能、流量消耗的高保真，等等等等。以下先以通常大家理解的视觉的高保真为例来谈。

高保真原型在打造产品中的作用

任何产出物都具备两种作用。一种是创意发散阶段，产出多个方向，供后面筛选；一种是交付阶段，设计方案确定了，需要交付给下一阶段。

从节约资源的角度来考虑，高保真存在的前提是其依赖的前期元素都是确定的，这样投放在后期的资源才不会因为前期根基的动摇而尽废。

在创意发散阶段，假设项目进度已经到了需要确定精确尺寸，颜色，风格等后期元素的程度，设计师就应以用户需求场景、信息架构、布局等为确定的基础约束条件进行发散，想出多种视觉设计方案填充到已有的低保真原型框架上，再按照一些客观原则进行收敛过滤，找出最合适的选项。但通常收敛这个阶段会是产品大老板来拍板，虽然这并不应该成为唯一的决策方式。

在交付阶段，设计师应该对高保真阶段选定的设计方案中的元素进行充分的描述，以便充分地传达给下游的合作者。通常这些合作者是前段重构。所以要用程序员最熟悉的语言来描述设计，比如以CSS的盒子模型的方式来标注尺寸，以网页色彩体系来标注颜色。

使用高保真原型的禁忌

高保真原型其实就是产品开发进行到后期的半成品。从一个脑袋里的idea到像模像样的半成品，是需要投注很多心血的。每艰难地前进一步，都是以已有的步子为前提。

首先，最大的禁忌就是老大说我只看高保真的漂漂亮亮的东西，然后指着高保真的设计说早期的哪些步子定的不对。这种决策方式是对资源极大的不尊重，一旦早期的东西被干倒，后面的功夫都白费。

其次的禁忌就是各合作方没有把自己份内的构思充分夯实，就交付给下一步的合作者。夯实可以通过多从利益及决策相关人获取反馈，也可以通过自己多加发散再严格收敛，但终究要保证交付给别人的东西是经得起考验的，靠谱的，不会轻易改变的。一旦别人以你的东西为参考投入更多精力去丰富了产品，却被告知要返工，损失的资源和信任不止一点点。

第三个禁忌就是在向下一步合作方交付时传达信息不充分。传达信息可以靠更恰当、充分的文字标注，也可以靠面对面的交谈探讨，甚至还可以加上重复确认。当然，这是要消耗大量精力的，但这也是成为一个负责人的雇员应有的尽责态度。

祝愿天下所有设计师的精力可以少被浪费一些。

源地址：http://xuexiao.me/2012/12/%E5%9C%A8%E8%AE%BE%E8%AE%A1%E4%B8%AD%E5%A6%82%E4%BD%95%E6%8A%8A%E6%8F%A1%E9%AB%98%E4%BF%9D%E7%9C%9F%E7%9A%84%E5%BA%A6/

浅谈“最小化”和“关闭”的交互体验

狂雨 — 2012-12-24 20:30:17

随着互联网的发展，不同软件在作用不同的情况下有着不同的交互方式，下面来谈谈我们每天都接触的“最小化”和“关闭”。

按照最原始的设计意图，“最小化”是将程序暂时折叠起来，“关闭”是纯粹的程序关闭。但是现在你可以在很多客户端看到有以下这样的情况：

点击“最小化”：1、到屏幕左下方 2、到屏幕右下方

点击“关闭”： 1、最小化到右下方 2、关闭程序

糟糕的设计：360安全卫士、酷狗、QQ音乐

点击“最小化”时，到屏幕左下方

点击“关闭”时：程序没有关闭，而是没有任何提示的最小化到右下方（托盘）

这些客户端都有一个共同的特征：用户需要长时间后台运行。于是设计者就制造了这样一种交互心理印象：让你点击“关闭”时，并不是完全关闭程序，而是在右下方（托盘）继续运行，只是不是像点“最小化”那样占用你的左下方的任务栏位置。

很多软件都采用了这样的设计，用户大体能明白这样的意思，像360这样的系统软件，用户知道这些软件基本是不退出一直运行的，所以在点关闭符号（x）的时候也大概能明白软件只是最小化到右下方（托盘）运行而已。

不过我认为“点关闭按钮不能关闭”这设计还是太逊了，我猜测这种糟糕的设计应该是软件商为了不容易让用户直接关闭而慢慢出现。

———————————————————————————————————————————-

我认为PC客户端，良好的“最小化”和“退出”设计，按不同软件分为两种：

1、需要频繁操作界面的软件（文件夹/浏览器/Photoshop/办公软件等）：

最小化：直接显示在左下方

关闭：直接关闭程序（按误操作机率来决定是否加入确认关闭提示）

做得好的有：
Chrome — 最小化在左下方，点击关闭按钮直接关闭所有打开的标签，不作任何提示
（不加入确认关闭提醒，是因为误操作的机率小，用户一般可以区分标签页关闭和整个浏览器关闭的不同）

* Firefox和IE的确认关闭提醒，我认为是没必要的，如图：

2、不需要长期操作界面，但需要长期运行的软件（杀毒/IM/音乐）:

最小化：直接显示在右下方

关闭：直接关闭程序（按误操作机率来决定是否加入确认关闭提示）

做得好的有：

千千静听、QQ — 最小化到右下方，关闭的时候提醒是最小化到右下方还是关闭程序

（加入确定关闭提醒是因为误操作机率大，担心用户使用文章之前所说的糟糕设计的软件养成了习惯而导致误操作，比如之前用了酷狗，点击“关闭”它最小化到右下方，于是认为QQ也是如此，形成误操作。如果没有那些糟糕的设计，各产品设计标准统一，这个提示完全没有必要出现。）

———————————————————————————————————————————-

有些采用“点击关闭按钮最小化到托盘”设计的软件也是迫不得已，因为当有不少软件采用这种糟糕的设计时，用户会形成一定的习惯，而为了不想用户丢失而满足这些用户习惯，最终跟着做了这样的设计。所以就导致了我们桌面上多了这么多，点击“关闭”却不能关闭的软件。

源地址：http://www.cssnote.com/zui-xiao-hua-guan-bi.html

WIN8设计特性浅谈和腾讯微博MS首版设计思路分享

Dengxue CUI — 2012-12-24 09:41:09

10月，一个收获的季节，微软的新一代操作系统window8悄然而至，同时，我们的微博客户端团队，也搭上了第一波win8应用的末班车，设计并推出了腾讯微博MS版本。本文将结合腾讯微博MS版本的设计过程以及对win8系统特性的认识，聊聊win8操作的平台的应用设计。

文章很长，请选择有价值的部分阅读，或许你敢把它读完呢…

本文索引：

1. Windows8—再构想

2. Win8的系统特性

3. Win8的交互特性

4. Win8的视觉特性-Metro进化

5. 腾讯微博MS首版的设计思路

6. Win8平台应用设计建议

一、 Windows8—再构想

关键词：后PC时代

《Windows8 guide》开篇第一段即言明：“如今超过三分之二的PC是移动设备，比如笔记本、上网本、平板电脑。几乎每一台PC都有无线连接的能力”。所以，win8的设计更多的考虑了移动设备和触控体验，更加的关注的是用户和应用关系，而不是操作系统本身。虽然保留了大部分windows7的基础特性，但win8系统旨在创造更优的触控体验，建立新的良好的生态系统。

如果说苹果完成了后pc时代的基础性创新，那win8的出现则意味着传统PC的全面迁徙。以ipad、iphone为代表的无线触摸产品的强烈冲击，让微软意识到PC战场其实也已经彻底转移了，而win8操作系统就是在这种情形下微软的一次再构想。

二、 Win8的系统特性

Win8系统有很多不同一般的操作体验，这里笔者摘取了一些更能体现其设计理念的特性进行介绍，更多详尽的特点就不在此赘言了。

Win as One

在win8系统中，程序是以应用的形式存在的，它有应用市场，用户可以进行应用服务的购买，让人不禁联想到，这更像IOS、安卓等无线领域的，但不同在于，win8试图通过系统的平台，将安装在该平台上的所有应用进行有机的联系，强调应用间的协同和共享，给用户带来完整、生态化的体验，也让每一个在此生态系统内的应用“Win as One”。

1. Charms(超级按钮)：高于任何应用的系统整合工具栏

在任何时候，用户都可通过在屏幕右侧边缘向左滑动或将鼠标悬停至屏幕右侧，呼出Charms。Charms是个枢纽般的系统工具栏，通过这里，用户可以快速的进行搜索、分享、设置等操作。

2. 搜索：系统层级的整合搜索，带来更全面快捷的搜索与信息检索体验

搜索可查询的范围不再仅限于程序和文件，几乎遍及操作系统和互联网整个环境中。用户不仅可以在一个应用中查询关键字，而且还可以快速切换到其他应用，或者在几个应用直接来回切换搜索结果。简化了用户操作，无需重新输入关键词，就可以直接在新的应用程序下获得不同方面的搜索结果。

3. 共享：系统层级的整合分享，使应用之间更开放，信息和内容传递没有界限

用户可以在任何时候，把任何内容直接通过分享，分享至支持该内容分享的应用中，使信息得到开放无障碍的流动和扩散。

4. 贴靠视图：一屏两用，应用共处之道

5. 动态提醒：无处不在，让信息处理更加及时准确

Win8的动态提醒机制主要通过两种方式来实现：动态磁贴和系统toast。在start界面你可以设置动态的磁贴以实时显示每个应用里的最新更新，在任何时候你的应用都可以通过实时toast来对用户进行重要信息的提醒或者应用操作的提醒，toast是可以被用户主动滑走消失的，toast中可以直接显示新消息的内容。

前卫的触控体验

就在最近，当被问及企业用户喜欢Windows 8操作系统的什么特性时，身为微软掌舵人的史蒂夫·鲍尔默给出了非常简洁的回答：触摸、触摸、触摸！

Win8非常注重触控体验，排除基本的触控操作不说，其很多关键系统操作都是依靠比较高级手势操作进行的，虽然需要一定的学习成本，但因为是用户不得学习的操作，而且习惯之后确实也会给整体体验带来更加流畅、快捷的感受，这一点笔者本人还是比较欣赏的。另外通过这样的高级手势设定，win8使得用户的操作仅通过触摸屏幕就可以完全掌控，ipad也有类似的手势操作，但那仅仅是作为辅助操作存在，相对而言，win8贯彻的更加彻底，同时也更加流畅和便捷。

1. 语义缩放

Win8的横向流动界面可以无限延长，加之其内容为主的设计思维，在很多页面用户都不得不面对long long的滑动导航压力，比如win8的start（开始）界面，在这样的界面，系统增加了一步高级手势操作，用户可通过双指捏合，将当前界面缩小为纯导航视图，并进行快速导航跳转。此视图跟正常视图其实是两个界面，应用设计者可以根据自己的情况自行设计该视图的样式和操作。

2. 应用切换

Win8支持真正的多进程管理，而且是沉浸式操作体验，所以怎样切换应用，又是一个难题。Win8的解决方案是，用户可以通过左侧的边缘向右滑动，可以直接切换为上一个应用程序，整个过度非常流畅、快速。

3. 选择操作

Win8的选择操作使用了向下拉选的高级手势，选择操作可以在默认界面直接进行，不需要多一个编辑态，也不需要再设置一个多选框，更加直接，但也需要学习成本。

4. 关闭程序

Win8没有返回的物理按键，提倡沉浸式体验的设计理念，也造成了每个应用都没有关闭或者退出按钮，那么用户怎样关闭一个应用呢？只需要手指从屏幕顶端下划至屏幕下半区，伴随流畅的动画，应用关闭。

5. 多进程管理

用户可以在屏幕左侧向右滑动一小段距离再向回滑动，呼出当前进程管理。

6. 呼出工具栏

Win8应用中把大部分操作工具，都放在隐藏的工具栏中，固定的导航也经常放在隐藏的导航栏中，用户可以通过屏幕上边缘下滑或者下边缘上滑，呼出工具栏和导航栏。

对传统鼠键操作的平衡考量

Win8系统不仅仅有主推触摸体验的metro界面，也保留了Windows之前窗口操作的桌面系统，一方面照顾到windows用户的使用习惯，另一方面也因为在未来不短的一段时间内，win8的很大一部分用户依然会以鼠键操作为主要使用方式。另外，在metro界面的所有触摸操作，均有相对应的鼠键操作实现方式。

三、 Win8的交互特性

Win8 metro界面沿用了WP7的视觉风格，并且在交互上也继承了其简单、快速、内容为主等等的特质，像动态磁贴之于动态磁贴，横向列表之于全景视图，全局分享和搜索之于HUBS…Win8很多交互形式都是基于WP7的进化和发展。他们在精神上是互通的，在这里偶也无耻的链一下自己去年的一篇文章–《WP7交互特性浅析及APP设计探究》，有兴趣的可以参考阅读哦。

其实win8的大部分特色的具体交互形式在上面的系统特性中都已经做了很多介绍，这里主要进行一些交互设计思维上的总结，并结合实例进行说明。

1.“Content not Chrome”– 内容优于形式，注重信息而非界面

这是win8设计的核心思维，Chrome在设计时候，提出的理念就是让用户更加关注网页内容，而忽视浏览器本身，win8将其拿来主义一番，并进行了发扬，内容为先，其次是界面。我们会看到下面提到的一些交互设计方向，都是以这一核心思想做指导的。

举个手机的例子来形容这一点再贴切不过了。在iPhone之前很长一个时期内，手机的设计最重要的是硬件外观设计，奇形怪状，人们买手机的时候也非常注重外观的美丑，而发展到现在，每一台手机只有一个大屏幕，人们更加注重的却是屏幕里面的东西了，对手机的外形已经不再那么关系，当有一天，手机渐渐无形了，我想我们也不会那么奇怪。其实界面的设计也是这个道理，一切的形式都是为了更好呈现内容并让用户愉快的去接受而存在的。Win8将这一点作为其设计的指导思路。

2. 流动的导航，清晰的内容流向，继续或者回头

以内容为主导的交互界面，win8更希望通过内容的流动去带动或者吸引用户的使用，希望通过用户的潜意识去引导用户。所以它的导航是和内容在一起的，用户感知的下一步是去向什么样的内容，而不是怎样去走下一步。

3. 沉浸式的浏览与操作体验，隐藏式的工具与导航操作

Win8的设计提倡给予用户沉浸式的体验，在有限的屏幕中，将内容最大化的呈现给用户，同时将固定的导航和工具隐藏在上下边缘的工具栏和导航栏中。Windows不再是窗口，而是世界。

4. 横屏浏览带来的扁平架构

Win8的页面最大的特色就是流畅的横屏浏览，基于内容的导航架构，使win8的导航不在重要，而是直接把可能在其他平台需要二级页面的呈现的内容，直接呈现出来。另外，横屏空间的良好扩展性，也使得整个系统的架构更加扁平并且可用。

5. 横屏操作体验大部分情况下明显优于竖屏操作

Win8的设备比例，大部分设备使用情景以及横向滑动的系统操作等原因，造成了win8系统大部分情况下横屏操作的体验要由于竖屏操作。

风险

这不是微软的软文，所以win8还是有很多风险和问题的：

l 用户的潜意识最容易迷失

Win8提倡以内容去引导用户的浏览，希望通过用户的潜意识去引导用户。但其实，一旦内容的展现形式处理不够好，用户很容易在千篇一律的内容面前迷失自己。

l 高昂的学习成本

各种高级手势的运用，需要用户很高的学习成本，过高的操作门槛，在佩服其勇气的同时，也不得不为其担忧。

l 内容也会疲劳

Win8的生命力在于内容，好的内容能够在win8平台上得到很棒的呈现，但对形式的过分忽视，也会造成其对内容的要求更加苛刻，因为很难在win8平台上用不一样的表达方式来弥补某些内容本身的不足。外对高质量内容的持续要求，也可能会造成后期的疲软以及用户的审美疲劳。

l 触控与键鼠的混乱不堪

Win8十分激进的注重触摸体验，但又不得不考虑大部分用户的设备门槛和使用习惯，直接将Modern UI界面和Windows界面糅合在一起，造成不小的困扰。在设计每个触摸体验的同时，又要考虑键鼠用户的操作，也给设计本身带来了很多困难。

四、 Win8的视觉特性-Metro进化

从WP7开始的Metro风格引发了铺天盖地的口水战。有人说这是微软最后的挣扎，也有人说这是不能回避的未来样式。看起来WP7和Win8好像是iPhone和iPad的区别，但其实Win8的平板更大程度上代表了所谓的Metro风格，哦，应该叫Modern UI或Windows 8 style。

贯穿始终的精髓

灵感来源：

• 现代设计 — 包豪斯（简洁、实用，减少元素，以突显本质）

• 国际主义平面设计风格 — 瑞士平面设计风格（清晰强烈的栅格设计，强调版式设计，用文字的大小和层次来控制页面的节奏）

• 动态设计 — 电影艺术（世界级的动画，用以激发用户情感）

这样的设计思路清晰的铺开了“内容高于形式”的主题，简洁而又无边界、抛弃繁复的无质感元素，完美的诠释了Metro风格的设计精髓。

经典风格的进化

虽然在Win8的设计上微软依旧提供大量的“设计建议”，但微软渐渐放开了设计师的手脚，在经典的Metro风格上做了大量的改进，这一切也是为了更好传递与展示信息。

• 轻质感 — 方形、色块、直角看起来依旧是Win8的主要视觉风格，但在越来越多的应用中我们看到了渐变、投影、半透明以及轻量的拟物。

• 更多的分辨率尺寸 — 与WP7的单一尺寸不同，Win8的设备分辨率最小是10‘’（1024×768），推荐尺寸是11‘’（1366×768）及以上。微软提供了动态布局方式，可以缩小、放大或重新排列控件元素，从而适应各个设备的可用视觉空间。

• 优秀的栅格系统 — 在推荐的1366×768分辨率上，栅格的sub-unit为5px，1 unit为20px，所有的间隔与区域划分都以此为基础。针对不同的分辨率，栅格系统也分为3种基本尺寸：1倍、1.4倍、1.8倍。这也要求在提供位图资源的时候提供3种尺寸。

• 动态磁贴 — Win8的动态磁贴提供了两种尺寸、多种排版方式，设计师可以针对不同的推送内容，选择最有效的方式。你可以展示最新上传的照片、正在听的音乐、你的新提及、新邮件。用户既可以直接在瓦片中阅读提示信息，也可以对磁贴进行选择、删除等操作。它会不断吸引用户回到你的沉浸体验中，是一扇吸引和激励用户的门。

• 导向设计，从物理回归界面 — WP7的物理后退键是一条连续的路径， Win8的按键则全部移到了界面中。除了后退按钮，还有语义缩放、超级按钮、切换程序和关闭程序的手势这一些列精彩纷呈的路径选择方式。当然，在设计的时候，要利用视觉元素更有效的明确层级转换的关系，降低用户迷失的风险。

• 沉浸式体验 — WP7中还保留着状态栏和工具栏，在Win8中这一切都被隐藏起来。Win8风格希望用户能够沉浸内容本身，而不是让用户去考虑每个按钮的作用，让用户用自己的潜意识行为去操作。

五、 腾讯微博MS首版的设计思路

所有的应用都是在解决用户的问题，所有的设计都是在解决应用和用户的问题。这次腾讯微博MS首版设计的分享，我们决定以问题的形式呈现出来，解决了这些问题，我们也完成了该应用的设计。

？腾讯微博MS呈现的核心内容是什么

每一个win8的应用设计之初都会被问及这样一个问题：“This app is the best app in its category at____?”。我们的应用擅长什么？我们的用户能用它来做什么？我们该提供怎样的功能和内容？在这个核心想好之后，再去以此延伸去设计交互或视觉的呈现方式。

毫无疑问，我们所要做的就是将微博的信息完整、快速的呈现给用户，并提供给用户互动以及扩展微博关系链的核心体验。

明晰了用户需求和产品内容的关系之后，我们所面对问题也就变成了产品设计本身和平台的契合，以及用户易用性与产品细节的打磨。

?纠结的主页设计：流动的导航与无尽的微博主页的关系

微博是个消息汇合的地方，最核心的部分是用户的Timeline,这里的消息数量是无尽的，用户在此获取内容的操作也是连续的。在win8平台，最传统的信息组织形式莫过于，将微博Timeline以呈现部分内容的方式作为主页的一部分进行呈现，如要获取更多，则需要进入下一级详情页（如下图），这样好处在于我们可以在首页上展现更多的内容以吸引用户。但是却发现，我们的核心内容却没有得到很好展示。

于是，我们放弃了最初的想法，尝试了第二种结构。为了呈现核心内容，我们果断放弃广场、频道等内容的干扰，直接去除。为了方便用户能够尽快的处理自己的个人信息，我们在最开始的view保留用户的个人中心，在其后则将所有的微博以相对规则的顺序进行排列，用一个个矩形承载每条微博的信息（如下图）。

这样的好处在于我们能将用户timeline的微博全部呈现，不必担心被打断。但是，由于矩形的相对规则排序，造成了我们不能保证每条微博都完整呈现，用户还是需要点进每一条微博去浏览他的内容，增加了用户的操作压力。另外，在横屏浏览的信息流中，上下排布的微博信息，也给用户的单向浏览造成了困扰。

于是，我们改进并实现了第三种方案。时间轴的设计让无尽的微博主页看上去更加活泼，却又如此理所当然。用户可以在首页就能完整的浏览每一条微博消息，单向的内容浏览使用户的行为更加的顺畅自然。甚至，我们可以很自信的去掉首页的LOGO，当我们返璞归真的思考内容本质的东西，你就会发现，你希望给用户呈现的将不再是某种形式，而是某种气质。

？怎样在茫茫Win8应用中寻找自己的独特气质

我们先来看看商店里的一些应用，在其他平台的风格中，Win8风格堪称先锋，但当铺天盖地的方块、直角迎面而来，用户就很难记住那些看起来差不多的应用了。那么，在视觉设计中我们又该怎样体现自己的独特气质呢？

1. 主页的进化

设计初期，我们保守的尝试了经典Win8风格。我们发现自己的目光被那些绚烂的大色块夺走了。同时，这样的布局，对微博的文字阅读也不是一种很好的

方式。在第二、第三稿的时候，我们去掉了渐变，调整了背景色，将微博以规整统一的无渐变方形呈现。内容虽然明显了，但微博阅读的完整性以及图片的优势却依旧没有充分体现出来…

在心理学中，人类对图片的短时记忆会比文字更快速，阅读的时候一张配图会让人更快速的定位到上次阅读的位置，而如果是简单的文字语句则很难做到这点。于是在最终的时间轴方案中，我们充分的考虑了Win8的大尺寸屏幕，为微博的文字和图片呈现方式制定了特殊的策略：按时间顺序排序的每块微博区块为固定宽度，图片均以固定宽度无边界显示。微博区块的高度则根据屏幕进行自动适应，保证文字全部显示，图片高度则根据屏幕高度和文字高度进行相应裁剪。同时也设定了最小高度，避免微博区块出现太过于强烈的高低落差。

个人中心的排版也抛弃一般的色块，大尺寸的头像，三围页的list排布，用高亮色的数字和强对比色的提示来高效的展示信息。

2. 蓝色，延续的DNA

在设计上我们延续了腾讯微博的经典色调蓝色，但针对整体思路我们将蓝色的明度降低，用清透的效果营造出一种舒适柔和的氛围，减少环境色对阅读的干扰。

3. 细节，简洁与简陋的一步之差

极简风格最怕的就是看起来像没有设计过，为了避免这种现象的出现，我们用简单的样式配合独特的排版方式，在视觉和交互上都增加更多考究的细节。

l Timeline的不同 — 用时间线贯穿始终；采用了圆形头像平衡画面；配合时间轴的旋转刷新动画；大尺寸展示的图片策略。

l 搜索页、个人资料页 — Tab页减少层级跳转；去除不必要的边框等Chrome元素。

？让架构层次处理更扁平，给用户更少的全屏跳跃

在win8中能让用户迷失的除了流动不做区分的内容，还有就是太多的全屏跳转。沉浸式体验不应该存在于应用的每个页面，在合理的信息区分之后，扁平化的架构处理才更加符合win8的用户。

？触控与PC的抉择

写操作是微博的核心体验之一，考虑了用户在Win8平台进行写操作时，更加有可能选择使用键盘输入微博内容，我们在进行提及多人以及插入话题功能时，同时考虑了触屏输入和键盘输入两种模式下的不同操作反馈，借鉴了PC端微博写操作的操作体验。

在win8的设计中，键鼠的操作设计并不作为主要设计因素，但是却必须要考虑。很多时候我们多考虑一点，用户就会方便很多。

六、 Win8平台应用设计建议

l 不要过分遵守win8的设计指引，指引里的一切都是建议或者不建议，应用的设计应该做综合的考虑，平衡用户、平台和自己的内容，再去做抉择。

l Win8应用为内容而生，设计之前请先想清楚你的应用能给用户带来什么，然后合理的安排你的内容层次。

l Win8的导航是流动的，但也是易迷失的，所以我们更应该在内容的呈现形式上做不同的区分，以此来增加用户对其的辨识和聚焦，减少迷失。

l Win8的工具栏和固定导航栏都是隐藏的，但并不是说界面上就不应该出现这些，应用的核心操作以及用户最常用的操作，还是建议适当的在应用界面就予以呈现。

l Metro UI不是大方块，让那些言论见鬼去，在保持轻量和内容为主的前提下，适当的增加界面视觉层次和其他图形或者无图形的展现，是有利于用户对内容的辨识以及舒适阅读的。

l 在主要满足的触摸体验的同时，也适当考虑下鼠键用户的操作体验，这能给你带来口碑。

l 尽量减少操作的层级，win8的横向浏览已经带来了更加扁平的信息架构的机会，不要挥霍掉。

l 沉浸式体验没错也很好，但并不是说就要做各种的全屏页面跳转，合理安排信息的主次，使交互操作更加轻量和可预期，请为用户省点力。

l Win8的操作系统一般都可以提供比较可靠的硬件平台，所以请保持你的应用的动态与流畅。

l 谨慎考虑竖屏操作，可以为爱选择放手。

七、小结

整体的感觉win8操作系统还是非常快速、流畅、直接的，这是一次尝试，微软试图把人们对PC的操作习惯向更触摸更移动的方向迁移，但还有比较长的路要走。但是win8的设计哲学还是很应该得到认可的，也希望在不久的将来，大家说到简单、直接、快速这几个词的时候，联想到的不仅仅是李小龙，还有这样一个敢于尝试的操作系统。

源地址：http://item.feedsky.com/~feedsky/wsdued/~8274419/703280278/6377623/1/item.html

表单设计与转化率的提升

c7210 — 2012-12-17 18:09:09

无论是用于注册、支付还是联络，我们总是需要通过表单来获取用户的信息。不幸的是，在现实当中，总会有很多访问者一见到表单就会立刻点击浏览器上的后退按钮。这里面原因有很多，例如表单篇幅太长、不大友好、不那么值得信任，或是用户还没真正准备好进行交易等等。

这种情况每发生一次，我们就失掉了一个潜在用户。怎样将表单设计的让尽量多的访问者更愿意完成填写，这是设计师们必须面对的挑战。站在用户的角度，我们可以将问题分为四个方面。

我能得到什么？

一提到“转化”，设计师们首先想到的往往是一些相关操作的细节问题，包括按钮的颜色、标题的字号、对比度、对其方式等等。当然，这些是必须考虑的，但最最首要的问题是：作为网站的访问者，我为什么要填写表单？我能得到什么？

访问者不会简单的因为你提出了相关要求而把自己的个人信息透露给你；你要让他们看到这样做的好处在哪里。不妨把这件事看作一种交易，你的访问者提供他们的名字与邮箱地址，从而换取到一些他们需要的东西，例如享受服务、免费试用软件、下载PDF文档等等。

除了让浏览者知道他们能得到什么东西以外，你最好还能告诉他们这东西为什么是他们所需要的。要聚焦在产品的价值上，如果你能用最简单的介绍文字描述出你的产品能帮用户解决怎样的问题，唤起他们的共鸣，那么即使表单本身稍微复杂些，他们也会愿意完成填写；否则，字段最少的表单也不会引起他们的兴趣。

我凭什么相信你？

当人们第一次访问你的网站或接触到你的产品时，他们确实没什么理由一下子产生信任。不妨试着展示一些具有公共效应的“证据”，例如相关媒体报道、来自现有用户的赞许，以及任何可以鼓舞访问者对产品产生积极态度的元素。

Pocket Changed的订阅表单是个不错的例子，他们向访问者展示了当前已有多少人进行了订阅下载；此外，他们也非常简单直接的让访问者了解到在填写邮箱后可以得到什么。如果可以再加入一些来自真实订阅用户的赞许反馈，这个表单的转化效果会更好。

另外一种很有效的“证据”就是将所有报道过你家产品的知名媒体的logo陈列在页面中，当然前提是必须有相关的报道真实存在。这些具有很高识别效应的元素可以有效增强用户的信赖感。

你会用我的信息做些什么？

在为访问者提供积极引导的同时，我们还要想办法避免掉那些负面因素。人们在填写表单时的最大顾虑就是信息被网站方收集之后的用途。用户不会希望收到垃圾邮件，更不愿意自己的个人信息被传播出去。如果你确实运营着一个值得信赖的产品，那么不妨直接让用户知道你不会把他们的信息贩卖出去或是向他们发送垃圾邮件，就像FogBugz做的那样，在注册表单旁边以非常直白的口语化的方式告诉用户“我们不会出售或分享你的邮箱地址，就是这样。”

相关阅读：怎样通过更好的用户体验促进网站转化率的提升

这会占用我多少时间？

正像我们在前文中说到的，如果可以让访问者明确的了解到产品价值，唤起他们的需求共鸣，得到他们的信任，那么表单的长度将不会成为影响转化率的最主要因素，但这并不意味着我们不需要对表单进行简化。即使访问者决定执行转化行为，他们的时间和耐心也都是非常有限的。

我敢打赌，在很多时候，那些标注着“必填”的表单字段其实并非是真正需要的。

Gumroad在未登录状态的支付表单中剔除了很多常见的“必填”字段，最终只保留了用于输入邮箱地址、信用卡号、有效期和CV码的文本框。如果连未登录时的支付环节都可以被如此简化，我相信对于其他方面业务的那些复杂表单来说，不会没有优化空间的。

在对表单进行了充分的简化之后，我们还可以试着通过一些设计技巧让填写表单的环节看上去更轻量。在这方面，我个人最喜欢的一个案例来自原型制作工具InVision的注册表单。他们使用浮层的形式呈现表单，作为访问者，我可以感知到，当我填写完成之后就可以立刻回到之前的界面继续应用流程。

相关阅读：一个文本框搞定信用卡相关信息的输入

总结

现在就打开你的网站，看看哪些表单可以在以上四个方面有所改进。当然，你不必将目光局限在我们之前讨论的这些要点上；最重要的是在思考和设计的过程中时刻记得站在访问者的角度进行观察和体验，去发现那些对转化率的提升具有正面或负面影响作用的要素。

源地址：http://beforweb.com/node/143

视图模式：Android ViewPager & WP Pivot

小猛 — 2012-12-12 16:02:05

在iOS，Android和WP三家移动平台上，iOS的可用性是目前用户接受程度最高的，但是Android和WP也有不少各自平台的设计亮点，本章主要介绍Android和WindowsPhone的两种特色视图模式：Viewpager & Pivot。而且博主很负责的说，这两种视图模式是优异于iOS平台的。

1.名词解释

Android的ViewPager

ViewPager实际上就是一种同级选项卡排列的视图模式，用户可以通过最简单的左右滑动手势实现选项卡之间的切换。最常见的如Google官方应用：Play商店、 Play音乐。

操作手势：区域内左右滑动或点击标题均可实现视图的切换

官方文档对于这种视图的描述：点击查看

Fixed tabs

Fixed tabs are always visible on the screen, and can't be moved out of the way like scrollable tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.

Use fixed tabs to support quick changes between two or three app views. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area.

开发者可以查看官方的Android APIs: 点击查看

ViewPager在实际应用的优缺点：

优点：整屏左右滑动是最容易的操作手势之一，ViewPager可以方便用户在同级视图中快速切换，初次进入页面可以一次性加载两页，减少一次请求次数。
缺点：对于初次使用应用的用户，ViewPager并不能让用户理解一共有几个视图以及视图的名称；视图的数量不宜超过5个，且从5#视图回到1#视图必须滑动4次。

Windows Phone的Pivot视图

Pivot可以翻译成枢轴视图或选项卡视图，用于用户需要经常切换的同级页面，设计理念上同Android的ViewPager，唯一的区别是Pivot视图可循环切换。

操作手势：区域内左右滑动或点击标题均可实现视图的切换

Pivot的适用范围：

注册登录
产品列表页的标签筛选
全景视图下的同级子页面
层级简单注重体现内容忽略结构的页面

官方文档对于这种视图的描述：点击查看

2.案例说明

需要在一个手机屏幕中呈现完整的产品详情页，产品详情页包括

产品概要信息
基础信息
附加信息
详细信息

那么使用 iOS的设计规范来呈现这个页面应该是这样子：

阅读完所有信息需要有四个页面间跳转，需要按三次返回键。

而用Viewpager和Pivot视图模式呈现这样的页面只需简单的左右滑动即可，如果视图较少，程序还可以控制为一次服务器请求加载完所有信息。

通过这样的案例，我们可以发现如果用户有一定的认知能力，这两种视图的切换效率是明显高于iOS的列表跳转的。

文中如有错误，欢迎指出；转载请标明出处，谢谢！

源地址：http://www.54xiaomeng.com/?p=681

需要时显示——论App中的功能可见性

CDCer — 2012-12-01 14:49:27

近几年移动平台风生水起，APP多得数不胜数，交互方式也是遍地开花，相信大家都玩过那么几个让人惊艳的APP。大家看到的亮点或是转场够炫、或是拟物得恰到好处、又或是突破性的操作方式，但我认为“需要时显示”也是许多设计中的精妙之笔，是设计师应遵循的原则之一。

需要时显示

首先谈谈“需要时显示”这个概念，记忆中这句话有2个出处：

Extras on Demand. -《Designing Interfaces》

摘抄：让80%的使用情形更容易，而剩下的20%至少是可能达到的（需要用户稍做努力）。

Only Show What I Need When I Need It. -《Android Design-Design Principle》

摘抄：当一下子看到太多东西时，人们容易受打击。将任务和信息分解成小的、可消化的片段。隐藏当前非必须的选项，并指导人们如何走下去。

两个出处，一个贯穿全书，一个作为操作系统的规范，可见这句话的分量。

举个例子

说到这里，我忍不住要举个非常喜欢的案例-ALKAQUA矿泉水。不知道有多少同学在超市看到过这瓶水，反正它惊艳了我的时光…

整个瓶身只有LOGO，净含量等信息，配上胶囊状的形态，看上去非常简洁，气质优雅。

但这还不是高潮，真正的高潮是在转动瓶身时的那一刹那，我被折服了。

关于此水的详细介绍用极小的字体印在了背面，而又恰好地利用水的折射放大了文字。

画外音：我们为什么要转动瓶身了？一定是在寻找！那么当你要找它时，它就恰到好处地出现在你眼前，没有早一步，也没有晚一步，刚巧赶上了。

为什么“需要时显示”

在我看来，“需要时显示”能成为设计原则并不是不无道理：

1.页面承载更多信息

自从人类记录事物的方式从壁画到罗马人的“codex”页后，内容就变得有了边界。移动设备的兴起，使我们传统意义上的“页”变得越来越小，更加地需要隐藏使界面承载更多的信息！

2.使界面变得优雅

排版上认为，界面的优雅在于合适的留白，让人的视线可以得到喘息。就像批发市场对比奢侈品店的陈列，拥堵、嘈杂总给人一种低档、庸俗的感觉，而宽敞的空间总让人觉得从容、闲适。功能的隐藏释放了空间，使我们的界面变得优雅。

3.核心任务/信息更清晰

页面所有的设计应该为其核心任务服务，隐藏不必要的信息，核心信息才会相对清晰和凸显，这是对用户最好的指引。

4.打动用户

精妙的“功能出场”如同ALKAQUA的说明那样，在我们真正需要时给予我们，这样的设计能与用户产生思维上的互动，让人瞬间感动。

正题:如何“需要时显示”

“需要时显示”其实讲的是2点：

1.暂时不需要的功能要隐藏起来。
2.被隐藏的功能要能被发现。

第1点许多人已经探讨过了，我们可以通过聚拢、压缩等方式来进行。这里需要探讨的是第2点——如何让用户发现功能，或者说是“功能可见性”的问题。

换句话说，设计师定义了页面中隐藏了某些功能，但用户需要通过非常规手段才能发现，这个实在不是好的设计。（ps：这里需要考虑功能到底有多生僻，本篇暂不做讨论）

功能可见性

功能可见性，其实说得是“如何让用户发现功能”的问题。

最直接的形式是给用户一个可视信号：这里有东西。当然形式可以是直白的也可以是暗示性的、甚至可以通过社会性的影响。

但如果不给出信号的话，用户也可以：

1.通过学习发现。
2.被动地发现。
3.不用发现，它已经出现了。

于是我们就有了这样一个框架：

语义符号

1.蓄意性语义符号

蓄意性语义符号指的是有意识地创建和布置好的语义符号，简单点说就是有明确意义的实体信息，比如路口的指示牌等。

蓄意性语义符号是界面语言中最常见、最易被感知的信号，比如各种箭头、按钮、icon等。我们常用下箭头表示有浮层或可伸展，i按钮查看imformation信息，用“+”表示可展开等。

Path中的“+”则代表了一类“添加”操作的集合，google play中应用的介绍用“v”表示了下方有更多信息。

2.附带性语义符号

附带性语义符号指的是生活中行为和事件意料之外的副产品，简单点说就是暗示性的实体信息，比如人的影子，这是一个人存在于一个光源前面的附加效果，也暗示着人的存在。与蓄意性符号不同的是，它们表面上都不带任何意义。

早些年使用乐phone时的一个交互，让我记忆深刻。这里的光作为某个未知物的附带性产物（想想街头转角处的人影），被用户所察觉，它暗示着这里有东西。

QQ提醒的交互也非常有意思，点击底部的冠形部分，会弹出一个圆形菜单，冠形本身并没有什么明确意义，它仅仅暗示它是不完整的形态。

3.界面隐喻

附带性语义符号中有个特殊的类型是必须提及的，也是设计师最乐于关注的，那就是隐喻。

修辞上认为隐喻是通过比较两个好像无关的事物，制造的一种修辞的转义。而设计中的隐喻往往借助拟物化来产生附带性的信息，但并不是单纯地拟物，而是通过与现实物的类比，对界面语言进行转义，让材质、阴影、形状等形成新的意义。就像众所周知的：触屏界面的基础就是卡片式的隐喻，iOS的解锁就是插锁的隐喻等。

Flava中的一个操作相信用过的人都会有印象。撕边纸的操作让人联想到了卷纸，而卷纸则隐喻着该界面可以滚动，操作后果不其然。

另一个较经典的案例是ios6中地图的折角，按照现实的隐喻，这里是可以翻起的。

4.社会性语义符号

如何吃不熟悉的食物或使用不熟悉的餐具？看看别人怎么做。

穿越雪地该走哪条路？跟着脚印走。

人群、社会、其他人都有许多共享的信息，当这些可以被我们解读时，它就是社会性的语义符号。

在path如何评论一张图？当然你可以点击右上角的笑脸符号，但其实也可以点击下排的笑脸后侧的空白处。从社会语义的角度来说，大家在这里评论过，那我也应该也可以由此参与评论，就像在雪地里沿着脚印就能找到出路一样。

当有评论时你也许会发现更多：点击下排笑脸后侧和点击下排评论出现的页面是不一样的。

我是这样理解的：点击空白区就像是要加入其中，而点击评论则是查看详情。

其实以上分析基于我的猜测，但如果真是这样，path这里就会有点儿瑕疵，点击空白区应该出现的是“选择表情”，而不是“添加评论”。

不可感知的可见性

当然我们也碰到过许多没有符号线索的情况，即是在界面上找不到任何相关元素。对于这样的交互，要么用户可以学习到，要么我们就让功能像彩蛋一样被发现，又或者用户需要时它已经在场了。

1.引导式可见

要让用户发现功能，最简单的方式就是教育。我们可以对新用户进行引导，那用户使用前就能知道功能的存在了，尽管这样很暴力。

谁知道点“友加”的标题可以查看更多功能？但有了引导，用户表示“真心懂了”…

另一种颇为推崇的引导是利用转场，它基于一个认知前提“从哪里进入，即可从哪里退出”的反推。即是一个物体怎么离开界面，它也可以通过相同的方式进入到界面。

Paper选择画笔后工具栏会从边界滑出，然后我们得从边界手势滑入才能再次打开工具栏。没看到它缩下去的转场，还真不知道怎么弄出来。

2.彩蛋式可见
彩蛋式可见其实也是用户的一种学习，但这种学习是被动的，用户通过有目的或无目的的尝试发现功能。无可否认ios的撤销输入就是系统里最大的彩蛋，但它要通过很艰难的认知才能发现，当我第一次从裤袋摸出手机发现撤销确认时，琢磨了很久这玩意哪儿来的。

Naver首页顶部继续下滑时会出现几个功能，但不同于微博的是，这里的阻尼很大！

当用户找不着功能或进行游荡时，通过一些简单的操作如点、双击、滑动等就能发现功能，岂不是令人大喜过望。

QQ music 3.0中点击封面就会出现更多功能，这里的学习成本就非常小（面积够大）。

3.任务时可见
这里要说的是我认为的最精彩的一种设计，它需要理解功能特性及用户的行为，然后像ALKAQUA的说明一样，自然地出现。

iOS的搜索栏就是这样，在用户搜索之前并不需要知道确认、清除这些操作在哪里，甚至都不需要知道有没有。但当点击输入框后，它就很可能会被用到了，于是它刚好出现了。

twitter的刷新是其影响力最大的操作之一，其实用户的心理模型上本没有“刷新”这个概念，而是由于种种原因不能做到即时刷新，那么刷新操作应该出现在哪里？本质上刷新的诉求并不是reload，而是update，对于用户来说这意味着向页面上方索取，索取到当前信息的边界后再要索取的话自然就得刷新。

Path时间戳的设计也类似，大部分时候时间戳是帮助事件在时间轴上定位，当我们想看清图片时它又隐藏了。如果真的对事件的时间感兴趣时，你知道它就在那里。

打完收工

对于移动app设计中的空间讨论其实有不少先行者，我的同事listy在《移动设计空间节省之道》中也做了深入的探讨，我表示受益良多。

对于复杂的界面，我们不是要让它变得空白才好，而是需要有效地管理它，本文所讨论的“需要时显示”即是有效管理的途径之一。

跳开less is more，我更喜欢一句话：设计不是简单就行，而是不能复杂。

参考文献

1.《Designing interfaces》

2.《The Elements of Graphic Design》

3.《设计心理学2：如何管理复杂》

4.《Android Design-Design Principle》

http://developer.android.com/design/get-started/principles.html

5.《卡片、页与卷轴》

http://apple4.us/2012/02/card-pagination-scroll-lawrence-column-for-blogweekly.html

6.《移动设计空间节省之道》

http://cdc.tencent.com/?p=5339

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=6466)

源地址：http://cdc.tencent.com/?p=6466

阿里巴巴无线Wap内嵌App设计总结

vivi — 2012-12-01 14:19:10

大部分的情况下我们都处于移动状态，手机这种轻便、必备的终端工具使我们在千奇百怪的环境中也能完成一些微任务。同时随着无线网络带宽的增加，手机上网速度越来越快，使得手机等移动设备的上网体验越来越流畅。根据互联网数据中心IDC 的数据显示，到2015年人们通过移动设备访问Web的数量将超过PC访问。

无论是学生、上班族还是商人，利用好这些时间碎片，对于每一个人都具有重要的意义。WAP和APP在这种环境下充满了无限价值。

Wap一般通过手机浏览器便能被访问，作为缩小版浏览的网页，相对于PC端网页内容的多而全，它则显示了少而精的优势。除此之外，相对于当下风靡的APP客户端，Wap还有以下优势：

1、快速更新迭代产品：

互联网产品的更新迭代速度惊人，在Wap平台，产品更新、设计、开发完成后只需发布到线上服务器，用户通过浏览器访问WAP，就能看到最新修改的网页；更新迭代的成本较客户端（Android/IOS）都低，速度也更快。

2、支持跨平台，无安装成本：

WAP的访问只要求手机有上网浏览功能即可，一个浏览器就满足了任何需求，不用区分设备平台是Mobile Phone、Android还是iOS等。同样WAP不像客户端需要下载安装，只要在浏览器输入对应的网址就能查看。

不过wap的劣势也是显而易见的：在HTML5&CSS3&JS的配合下，虽然目前已经可以实现一些复杂的功能和交互，但是对一些相对复杂的功能和交互的实现还是不如客户端，因此用户体验较之客户端差。这也是目前很多应用（比如Facebook、Lofter等应用）选择转做Native APP的原因，这部分应用的年轻用户对设计体验的要求是比较苛刻的，这与b2b等交易网站对交易流程使用的流畅性的追求是不同的，对他们（商人）来说首先关注的是用户浏览是否顺畅，交易成功的数量，其次才是优美的界面，绚丽的动画。

互联网是个唯快不破的行业，阿里巴巴无线业务从整体成本上考虑，将HTML5擅长的对一些数据量不大，动画少的页面的优势，用来快速处理资讯、登陆等页面。目前阿里巴巴的生意经、论坛、资讯、登陆等模块都是直接嵌入Wap页面，解决内嵌页面的适配尺寸则依据客户端测试同学对APP用户的手机分辨率的测试结果：

根据最新一期的手机客户端适配分辨率分布测试结果显示，Android用户使用最多的分辨率是480x800、320x480，加上iOS平台320x480、480x960两个尺寸，共需要适配三个尺寸：320x480，480×800,480x960。这种适配利用的是当下比较流行的web响应式设计，嵌入到APP里面，能通过代码解析后与Native app 及手机系统进行交互，完成页面逻辑、内容的打通。

我们从这三个尺寸的设计中得出以下适配的使用规范：

整理规范不仅是一种设计总结，也是方便后续及其他设计师设计参考的依据。

以上是我做阿里无线的一些设计小结，欢迎其他在客户端有设计、使用经验的你来分享一下你的体会。

最后很感谢一起合作的无线小组，你们给了我很多帮助和建议，谢谢：）

源地址：http://www.aliued.cn/2012/11/29/%e9%98%bf%e9%87%8c%e5%b7%b4%e5%b7%b4%e6%97%a0%e7%ba%bfwap%e5%86%85%e5%b5%8capp%e8%ae%be%e8%ae%a1%e6%80%bb%e7%bb%93.html

信息和交互 - UCD大社区

手机上能不跳转就不跳转

画线框图容易忽略的几件事

手机上的长列表

关于原型设计的一些事

Justinmind，为移动设计而生

掌上指路标 —– APP架构与导航设计

Step1: APP框架整理： 信息架构or 任务分析

Step2 ： 功能层级判断： 扁平 VS 树状

Step3: 导航具体表现形式：控件形式and摆放位置

交互设计师的产出物是什么？

数据可视化6步法

1. 将指标值图形化

2. 将指标图形化

3.将指标关系图形化

借助已有的场景来表现

构建场景来表现

小结：

4. 将时间和空间可视化

时间

空间

5. 将数据进行概念转换

对比：

比喻

6.让图表“动”起来

交互

动画

总结

你怎么看第三方登陆

用户如何看待验证码广告

善用文字的力量（二）——如何写好文案之“找卖点”

文案误区，直白平淡的说产品。

新颖有趣，才能让人印象深刻。

六“卖”神剑，找卖点的6种方法。

1. 新闻故事，博眼球。

文案示例：

2. 热点话题，获关注。

文案示例：

3. 普遍问题，找出路。

文案示例：

4. 逆向思维，反传统。

文案示例：

5.关联特征，巧嫁接。

文案示例：

6. 抛出问题，引共鸣。

文案示例：

最后，特别鸣谢力力张同学的重口味设计~~~

设计边缘状况的几个“凡是”

有限屏幕的无限空间 -从空间角度谈移动界面扩展

收纳

1.收纳方式分类，主要有以下三种。

a. 定义好收纳规则和内容

b. 定义好收纳规则后，用户随意扩展内容。

c. 用户自定义规则和内容，随时可以整理替换抽屉的内容。

2.收纳样式，主要分为“有门抽屉”和“无门抽屉”两种

a.有门抽屉

b.无门抽屉

层级化信息

a.同级多tab架构

b.下级筛选（包括下拉式和浮层式）

c.沉浸式下一级体验

变脸

a.同区域显示不同状态

b.同区域显示不同功能

补充一点

总结

在设计中如何把握高保真的度

高保真原型其实就是产品开发进行到后期的半成品。从一个脑袋里的idea到像模像样的半成品，是需要投注很多心血的。每艰难地前进一步，都是以已有的步子为前提。

浅谈“最小化”和“关闭”的交互体验

WIN8设计特性浅谈和腾讯微博MS首版设计思路分享

贯穿始终的精髓

表单设计与转化率的提升

我能得到什么？

我凭什么相信你？

你会用我的信息做些什么？

这会占用我多少时间？

总结

视图模式：Android ViewPager & WP Pivot

Fixed tabs

需要时显示——论App中的功能可见性

Step1: APP框架整理：信息架构or 任务分析

Step2 ：功能层级判断：扁平 VS 树状