所有文章 - UCD大社区

扁平化设计与色彩趋势

波希米亚 — 2013-05-03 09:11:55

Making it Work: Flat Design and Color Trends
Designmodo版权所有
作者：Carrie Cousins
译者：UCD翻译小组，波希米亚
原文地址： http://designmodo.com/flat-design-colors/

这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做？给点提示，色彩是扁平化趋势中最重要的一部分。

扁平化设计进修

扁平化设计你可以通俗的理解为：使用简单特效，或者无特效来创建的设计方案，它不包含三维属性。诸如投影、斜面、浮雕、渐变等特效都不要在设计中使用。

扁平化设计给人的感觉通常都很简洁，即使它可以做的很复杂。简单、直接、友好的特性也使得它广受移动界面和时尚网站设计的青睐。

想了解更多扁平化设计趋势，可以看之前的这篇文章。

定义调色板

说到色彩，扁平化设计中会用到很多，但设计师们通常会选择大胆的和鲜亮的来使用。怎样使用色彩让设计各有不同？设计师们打开调色板，多数时会选鲜亮的，饱和度高的来用，偶尔也会使用灰色或黑色。而包括彩虹调色板在内的很多传统配色规则都被抛出窗外。

其实归根结底就是色调与饱和度的匹配。虽然在色调上，设计师可以有很多选择，但一般开始会选互为镜像的色深。它要么是一个主色或辅色的组合，要么是色盘的另一部分，包含了更多的黑白色混合。

一提扁平化设计的色彩方案，人们就会想到高饱和、鲜亮、复古或单色块之类的。并不是说这是唯一的选择，只是发展趋势让它们变的流行。

鲜亮的色彩

鲜亮的色彩为扁平化设计创造出一种与众不同的感觉。因为它在亮背景和暗背景下都能获得很好的对比度，以吸引用户的注意。这正是它成为扁平化设计色彩趋势的原因。

从哪里开始？

FlatUIColors.com 网站上有很多扁平化设计的流行色调，是项目起步的好选择。无论是明亮的蓝色、绿色，还是黄色、橙色，你都能从中找到流行色的缩影。这个网站最重要的一点就是，你可以免费选择和下载色值到本地。（就个人而言，我对灰色调情有独钟。）

Designmodo 已将亮色设计大纲进一步地整合到了最近发布的 Flat UI Free 套件中，包括扁平化设计，流行的图标以及调色板（对配色新手来说，这简直太赞了），而且界面更易用。

在设计中使用严格的原色的情况并不常见，比如纯红、纯蓝、纯黄，一般都混色使用。如果你想自己做配色方案，请注意简洁。记得选择类似的色调和饱和度，当然，也可以采纳我们的建议。

亮色：可以尝试把这些色彩组合，或混合在一起使用。它们在白色或黑色背景上都有很好表现。

比较流行的有：蓝色，绿色和紫色。

复古色

复古色也是扁平化设计中一种流行的方案。

这些建立在鲜亮颜色基础上的不饱和色彩，加之白色内容的反差，看起来更柔和。是不是有种老校区的感觉。复古色的配色方案往往包含大量的橙色和黄色，偶尔也有红和蓝。

复古色很常见的是用在主色和辅色上，因为它们给人感觉很舒缓。

复古色：这类色彩适合作为主色元素出现，配以图案或柔和的色彩，效果最佳。

比较流行的有：橙色，桃色，梅子色和深蓝色。

单一色

单一色方案正在被日益普及。它依赖于黑色和白色的单一颜色来创造新的色调。

大多单一色彩方案都是一个基本色搭配另外2-3种其他色调。最流行的色调就是蓝色，但也有设计师采用黑色（或灰色）作为基色，用红色代表按钮或动作。另一种做法是利用颜色差异。比如蓝色，你可以添加绿色调进去，来创建一个蓝绿色的方案。

同时，单一色方案在移动和App设计中也极为流行。

单一色：与其他色调方案一样，通过调节对比度，可以在父颜色基础上得到很多不同的色调。比如原始颜色对比度是100%，你可以看看调成50%，20%和8%后分别是什么样子。

比较流行的有：蓝色，灰色和绿色。

结论

其实真正使扁平化设计火起来的原因是：这个概念很新，且有趣。你可以在项目中体会这一点。

一个与项目相匹配的色彩方案，能够引导用户更好地使用网站，这是件很酷的事情。现在，超越传统配色的束缚，去创造一个更舒适的扁平化色彩方案吧。

来吧，下载 Flat UI Free 或使用现有的配色方案，开始你的项目吧。

源地址：http://blog.b3inside.com/design/flat-design-and-color-trends/

Ps Play——移动端预览Photoshop设计零阻力

admin — 2013-04-10 19:44:12

还在为繁复的导出设计稿到手机上查看效果烦恼吗？没错，业界有不少小工具可以帮到大家，但是它们给力吗？很显然，在公司超级强大的网络架构下，它们无用武之处。所以，【Ps Play】应运而生，下面为大家介绍下这个微创新产品。

1、Ps Play 可以通过WiFi，实时在终端设备上预览电脑上Photoshop的设计稿，可同步调试及截图保存到移动终端，并可以通过Email、QQ、微信等工具即时分享。

2、具体介绍

以便捷、快速的方式，辅助设计师准确把控设计效果，解决长久以来导入设计效果图到终端设备测试的繁复问题，并可以快速通过即时聊天、社交软件进行分享和讨论。

具体操作如下：

（1）确认您的电脑与iPhone手机连接是同一个无线WiFi网络；

（2）在Photoshop菜单[编辑>远程连接]下开启连接，需确定您的Photoshop版本在CS5.5以上才能使用此功能；

（3）在手机Ps Play可用连接菜单中找到开启的Photoshop连接热点，并点击连接；（注：Tencent FreeWiFi 比较复杂，无法自动检索到Photoshop热点，所以需要手动加入连接，如你在家中等比较简单的局域网，Ps Play会自动帮你搜索到热点，轻松连接）

（4）尽享Ps Play即时预览Photoshop工作画面的愉快体验，同时还能为每个工作阶段快照记录并分享

微创新点：

（1）同一局域网可连接IP地址前2段一致的服务器（例如10.66.53.192和10.66.53.67、 10.66.53.192和10.66.67.23两组示例都可以正常连接）；

（2）兼容自动搜索和手工添加服务器两种方式；

（3）预览素材超过预览设备屏幕像素尺寸时，支持上下左右滑动，可固定比例缩放、1:1实际尺寸及全屏展示；

（4）预览方案时能快捷截图记录，可查看历史记录；

（5）可直接运用微信、Email、QQ等工具分享；

（6）支持手动刷新，已克服网络不稳定情况；

技术实现原理：

（1）本发明利用SOCKET/TCP协议，无线或有线接入Adobe Photoshop中的远程连接（Remote Connections），并对Adobe公司的Photoshop进行实时远程操作和实时获取的Photoshop文件的信息。

（2）通过零配置网络技术（Zero configuration networking）进行自动搜索，或通过手动加入域内远程连接的IP接口，并对其操作进行保存记录。

（3）从Adobe Photoshop中获取的图像信息，信息的尺寸大小将对移动设备的屏幕进行自适应，无论时正常屏幕或高清屏幕。

（4）本发明根据设备的方向检测，作出横向屏幕/纵向屏幕的自适应。

（5）设备可对当前状态进行抓屏操作，并把抓屏信息作出分享和保存。

（6）抓屏信息利用第三方通讯软件（如微信）的应用程序编程接口（API）做出即时分享，或使用电子邮件（Email）技术进行传递。

（7）抓屏信息可通过应用程序编程接口（API）传递到其他软件进行操作。

产品体验地址：http://x.rdm.3g.qq.com/a/4049 （稍后推出iPad、Android版）

手机扫描即可下载体验

产品CE平台：http://ce.oa.com/psplay

源地址：http://djt.qq.com/portal.php?mod=view&aid=456

关于用户体验与产品价值

kent.zhu — 2013-04-10 19:40:10

解释一下，这里说『产品价值』也许不准确，但是我没找到更合适的词，所以，将就一下，我具体会描述清楚。

上午在折腾Mac下的虚拟机，烤了一个别人装好了的Win7系统，做简单的优化，卸载360的时候遇到一个界面。于是，我发了一条微博，并评价到『这是一个很牛逼的设计，值得学习』。看了一下微博的反馈，大家都觉得我是在黑360安全卫士，觉得这个设计很脑残或者体验很糟糕。

实际上，我确实是觉得这是个很值得学习的，很牛逼的设计。

360安全卫士的这个卸载界面设计，跟早前新浪微博每次更新新版本之后，提示用户发送一条微博，且把取消分享做的很不起眼是一个类型的设计。

这2个设计，站在产品经理的角度，我都是支持的，并且认为确实是应该这样做的。但是，可能更多的人会站在『用户体验』的角度来思考，认为是个『很糟糕的体验』或者有点『强奸用户』。

我一直认为，产品设计是一个很讲究『平衡』的艺术工作。平衡产品的利益与用户的利益，通过『设计』在两者之间找到平衡点。

也许你会认为，只要跟用户的利益保持一致，自然就可以获得产品的利益，但，实际上，这往往只是个美好的理想罢了。

更多的时候，用户的利益诉求与产品的利益诉求是冲突的，而产品的艺术就是去保持这种平衡，实现共赢。

所以，我常常把构建一个产品循环比喻成『设计鱼池』，用户就是鱼儿，产品设计者是在设计一个鱼池，让用户在鱼池中活动。鱼池设计的目标是让鱼儿在其中按照设计者的思路游弋。

实际上，用户体验并不等于用户的体验，而是服从与产品战略层的一种体验。我这么说，也许很多人觉得有点被颠覆，但是，你仔细想想，一个不符合你产品战略的『优秀的用户体验』，意义何在？

今天我们也在移动饭醉团中讨论过360安全卫士的这个设计，@oxygen 提到一个观点『用户价值大于用户体验』，我很认同。

对于新浪微博而言，更新之后发送一条微博，是要告诉更多的用户去升级，去体验更新的服务；对于360安全卫士而言，卸载之前再次跟用户对话，是想再能继续的帮助用户去解决一点问题，挽留住这个用户。

虽然，这2个设计，从交互上看，跟用户的预期都不一致，但是，用户价值是有意义的。作为一种平衡，舍弃掉『跟用户预期不一致』这个体验的收益很明显。这，确实是一个好的『设计』，值得学习。

当然，也许在交互的方式上或者界面的表现上确实是有值得提高的地方的。比如，早前有个设计案例是说，当你点击退订某个EDM的时候，界面会出现几个被揍的半死的产品经理的形象，这种卖萌的方式很多用户会乐于传播。

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

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

关于A/B Test的外传

jimjun — 2013-04-10 09:14:39

A/B测试的作用大家都知道，就不多说了，在这里写写我在平时工作中应用心得。

在我的业务线平时应用A/B的场景：A大多是已经在线的一个产品，而B是一个我们将要上线的另一版本的产品（有可能是改进也有可能是推倒重来的），因为直接通过B去替换A可能用户一下子接收不了，所以我们会切部分用户出来用B版本，上线一段时间后，收集用户的反馈，再去调整，逐步去替换使用A的用户，这样做能让用户更平滑的接收。别小看这个过程，其实有很多策略可讲究了。说说我的真实经历。

之前做【AE卖家后台首页改版】的时候有两种方案做A/B测试，第一种：直接切20%的流量体验新版后台（根据帐号数随机切20%的用户登录就跳转到新版），不提供【返回旧版】入口，另一种切50%的流量让用户体验新版后台，但是要提供【返回旧版】的入口。

第一种方案相对比较保守或者说慎重，因为用户不能回到原来熟悉的页面中去使用，特别是在后台（执行任务为主）一旦用户有比较紧急和重要的任务要做（比如编辑产品、发货、回复询盘），会非常影响他的效率，从而直接带来一些不理性的反馈。好处：如果产品的改版是方向性的（就是商业决策上一定要这样去改了)，那通过这种方案一步步切流量，整个过程还需要和用户沟通解释，就能有个较平滑的过渡，比如网站首页的改版、SKU项目。

第二种方案就比较开放，因为用户有【返回旧版】的入口，用的不爽可以回去，而且被测试的用户基数较大，这样得到的反馈相对来说更有定量的价值，容易发现同类度比较多的问题，相对来说反馈内容也比较理性充实，我在群里、网上、上门跟用户聊的时候他们大多都说出对于不爽的很多细节。

当然这两种方案都基于一个很重要的前提，改版前做好功课：解决的问题和用户期望匹配度要高，准，而且第二种尤其。写到这里大家应该能看出我最终选择了哪种方案做了【AE卖家后台首页改版】。

对了，第二种方案还能给我们一个很重要的结果指标，就是用户在A/B版本的存留人数，再来看个当时【AE卖家后台首页改版】review数据图。

此次使用A/Btest的进行测试，新旧版各50%的用户，在新旧版头部布有切换按钮，用户在下次登录ME时会自动进入上次退出地的ME版本中。

总的来说新版上线后，用户随着一个时间段的体验和适应，新旧版的的存留上是五五开。

新版由于链接数上有所简化，所以PV对比上会略低，而新版Session在近一周有所超越旧版的迹象。

通过存留比能很好的反映用户最终的接受度，同时也是作为判断产品是达到足够替换旧版的一个重要指标之一。

这里再提一下对于改版类的A/B测试还有一大利器就是热点分布图，基本能很直观的表现出用户的焦点功能能否在一屏内看到，操作到，尽量少的需要滚动。

当然每个产品情况不同不一定是看类似的指标数据，但在做A/B前梳理清楚上线后通过哪些数据来衡量是非常重要的，衡量哪些指标，我们UED也最好能主动和PD一起去讨论，毕竟有些指标数据能指导、影响我们的方案和看问题视角。

当然A/B测试还有很多种用法和分步实施方案，测试出的结果也会有很多有意思的解读，项目做的多了，思考的多，遇到的问题多了，都能感受的到，以上只是举了个简单的例子。

A/B测试和PD

写到这个标题，是我想到了很多时候UED在PD沟通方案出现分歧时，最终会提出做A/B测试，这本身没错。但我在和PD们聊过这个问题时，他们有时候会有一种较负面的感觉：这么小的一个需求还要做A/B哪有资源和时间，感觉这成了阻碍他们项目进度的一个绊脚石。可能我们只是想证明自己更对，并没有那种意思，但如果对方有了这种感受其实很不利于以后的合作的。

我的一点点看法就是，如果项目是很重要和关键的改动，我们尽早提出该项目需要做A/B测试（PD也会比较慎重的，最好你还能提出如何去做A/B测试的建议方案更nice），规划到项目整体资源中去，而不是在项目KICKOFF后，大家都完成了评估开始执行了再来提。如果是些小改动影响不大，方案一直纠结不下，哪我建议我们大度点让让TA们吧，最后真的他们错了，补救的成本也不会太高的。这点是我们需要注意下的。

以上只是个人心得，虽不能适用大家的工作场景，但举一反三，希望带给大家一点点思考，就算没浪费大家读到这里了。

源地址：http://www.aliued.com/2013/01/14/1503/

好的产品关注功能，优秀的产品关注情感

Steven — 2013-04-08 13:05:52

「好的产品关注功能，优秀的产品关注情感」

产品设计当中的趣味性、愉悦度，这些都是针对用户情感化设计的领域

功能、实用性，这些需要很强逻辑性的事物很难和情感产生关联，并不是指这些不重要，它们很重要，它们是基础，但缺少了情感的作用，很难产生一些东西，像：快乐、愉悦、悲伤、美…

花、大海、春天、小屋… 这些都是很普通的名词，但将它们富有诗意的组合在一起：我有一所房子，面朝大海，春暖花开。接受者会投入不同的情绪去理解这样一个组合。

上面这些名词就像我们在设计过程当中所遇到的各种元素，按键、菜单、icon、动态效果… 将它以诗意的方式组合在一起，由此用户产生了情绪上的波动。

交互设计的本质是对用户行为的一种设计，直达内心的设计能够影响用户自身的情感，从而导致用户的行为。常会有设计师说将用户当成是一个易怒、情绪不定、不明理的人，为什么？因为人的本质是非理性的，逻辑是理性层面的考量，而面对情感这个潜藏在理性背后的东西，需要设计师有深厚的功力，这不是单纯技巧上的问题，而是一种时间、感觉、情绪等综合的圆熟。

针对用户情感进行设计时需要考虑产品的用户群，情感设计的应用将会为产品塑造个性，需要明确产品个性是否与目标用户相符。所以题主需要考虑一下，所说的趣味性是否与产品所预期的个性相符，这很重要。

交互设计中的趣味性如果让我用一句话表达，我会说：「情理之中，意料之外」

扯回到正题，交互设计中，哪些做法可以增加趣味性，或提升操作愉悦度？
btw.自己对有趣的定义可能会与大家不太一样。

方式1：「延伸现实」
最知名的例子莫过于，iOS的惯性滑动效果（或许有同学会不同意，但这真的是我认为很有趣的设计），这样的一个设计，在我眼中可以用两个字来形容–惊艳，什么样的设计师才能够对周围世界的观察敏锐到如此境界呢？让我们记住这个人的名字吧 — Bas Ording，可以说没有这个设计可能就没有iPhone的诞生吧，传送门：乔布斯最关注的iPhone 专利：惯性滚动

图1 惯性滚动专利示意图，专利传送门（翻墙）：List scrolling and document translation, scaling, and rotation on a touch-screen display

这样的设计见微知著，简单、有力、充满乐趣，看似微不足道，但影响巨大，乃至整个iOS的框架就建立在类似这样的设计之上（多点触摸，惯性滑动），即便是刚接触的用户，也能轻易理解这项设计，同时，对于用户进行操作时情感影响也很大。ps.由于工作需要多在两个系统间切换，当从iOS切换至Android时，生硬的边界反馈常令我索然乏味。

时常在想，如果换成是我，将如何进行设计才能达到与iOS惯性滑动同等的效果？

之后，设计师Loren Brichter在惯性滑动的基础上延伸了它的功能性及趣味性，下拉刷新，被Twitter收购后最近正在申请这项专利。传送门：滑动解锁是苹果的专利？下拉刷新是Twitter的

从零开始设计出新东西可以是创造，而在已有的基础上创造也是一种设计。

图2 下拉刷新

方式2：「触景生情」

图3 香蕉汁包装设计 – 深泽直人

通过视觉的的手段，微妙的启发用户的感觉及情绪，这里用深泽直人的一个包装设计做一个例子吧（如图3）。
此类方式也是目前在各APP上应用最多的设计技巧。

方式3：「小把戏」

图4 Google搜索结果页面转跳设计

对枯燥的事物进行转变，以一种轻松、幽默的方式进行展示，在不失其功能性的基础上增加一些想像力，这样的尝试能够使用户产生有趣且愉快的感觉，这是一种积极情感，对你的产品也会有正向的帮助。ps.别使用过头

图5 微信中的蛋糕雨，快捷酒店管家日房左侧的纸巾以及提示图片

方式4：「保持新鲜感」
人们往往会忽略身边所熟悉的事物，这是人本身的适应性所造成的，当在熟悉的状态当中出现新奇有趣的东西时，人们的注意力也会被集中过来。

这种方式常应用在游戏类的APP当中，增加新的装备、新的玩法、新的资料包… 令用户能够在现有游戏框架拥有不一样的游戏体验。

还有像，输入法产品的皮肤，输入相对是一个枯燥的过程，为了令用户在这个过程中能投射入一些情感，会为其制作并不断推出新的皮肤。ps.不过更换皮肤是一种被动的选择过程。

图6 百度Mac输入法皮肤（听说近期会有品质更高的皮肤出现）

方式5：「充分利用声音」
声音对于我们的情感有一些特殊的作用，节奏和旋律的变化都能够影响到用户的情感，有时可能只是一个单一的声音，现在请你们在脑海里回响一下：QQ新消息的声音、微博客户端下拉刷新的声音、Windows开机时的启动音…

在你的APP当中增加一些有趣的声音，实例化一下：设计一款计时器，在时间倒数时出现时钟的嘀嗒声，接近结束时出现一种急促声，引发用户的注意，结束时出现水壶烧开的声音（现实生活中，水烧开时的声音会令你快速产生动作），这会不会让用户感觉到会心一笑呢？

除声音外，充分利用身体的其它感官来增加APP的趣味性。

方式6：「游戏」
游戏本身就充满了交互的趣味性，做为设计师需要考虑的只是如何将游戏引入到产品设计当中，或将产品以游戏的方式展示。例如：Android解锁屏幕，以游戏、益智的方式实现加密以及解屏的功能，很优秀。

图7 Android解锁屏

先写到这吧，所有的设计其实都已经你的脑中，只是看你如何去发现它们。

ps.从内心深处觉得设计不应该始于技术或功能，但实际往往受限于技术及功能，这是一个矛盾的事实。

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

手机上能不跳转就不跳转

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

关于移动应用的上下文情境

c7210 — 2013-04-08 13:02:46

要打造终极完美的体验是不可能的，因为每个用户都会以不同的方式使用产品，其中涉及到的因素有方方面面，包括文化、社会环境、个人品味、目标动机等等。

虽然这些因素使得我们难以精确的了解不同的用户在使用产品的过程中产生了怎样的体验，不过，对移动应用上下文情境的研究可以帮助我们对这些因素进行梳理，以便尽可能全面深入的了解用户，有针对性的打造产品的体验模式。

三种情境

在实际设计与开发一款产品之前，充分的研究工作是非常必要的，我们至少需要对产品最核心的那个目标用户群有所认知。这项工作不需要进行的很复杂，有时候一支笔、一张纸，外加一些常识就足够了。

对上下文使用情境的研究特别有助于在前期预计产品投放到市场后会遇到的一些陷阱和潜在问题。上下文情境分为三类：

物理情境：用户在使用产品时所处的物理环境。
技术情境：会对用户理解与使用产品产生影响作用的技术因素，包括移动应用自身的设计，以及产品所处的系统平台、硬件设备等等。
社会情境：对产品的推广传播起到推动作用的互联网社会属性。

物理情境

作为产品的设计与开发者，我们通常会将注意力过多的集中在产品本身上，从而忽视了很多会影响用户体验的外在因素。了解用户、提升体验的第一步就是要明白目标用户是怎样使用产品的。他们在怎样的环境中使用你的应用，在家还是路途中？使用的时候是否会处于匆忙的状态下？是否时常有外部因素会导致使用过程被中断？

让我们说的具体一些，比如当你正在手机上玩游戏时，很有可能是因为在等车而打发无聊时间。玩游戏的过程随时都会被打断，例如车来了，你必须上车；这时游戏的体验就中断了。当你在车上坐定之后，又会拿出手机继续之前的游戏，此时你显然希望可以从之前中断的地方继续玩下去。对于这款游戏产品来说，暂停按钮或是退出时自动保存进程的功能就是必需。

通过创建这样的情境剧本，你可以比较清晰的预见到产品在实际使用当中有可能遇到的问题。

我们可以从两个方面来分析产品所处的物理情境：一是环境背景，例如户内或户外、背景噪音、光照强度等，二是人的行为状态，例如行走、驾车、站立等待、下厨、购物等。结合用户的核心目标与需求，分析他们通常会在怎样的环境背景与行为状态下使用产品，你将发现很多有可能影响产品体验的外在因素，并在设计过程中有针对性的进行解决或规避。

下面我们将物理情境方面的问题汇总一下：

用户通常会在怎样的地理环境使用你的应用？
这样的地理环境当中有哪些因素会分散用户的注意力？
对于这些干扰因素，你的产品当中能否有相应的预见与响应机制？
用户在使用你的产品时是否通常处于多任务状态下？
用户自身的行为状态是否会干扰产品的使用？
对于用户自身行为所产生的干扰，产品当中能否有相应的预见与响应机制？
是否有必要根据用户在使用产品时通常所处的地理环境，对产品的功能与设计进行优化调整？

相关阅读：iOS Wow体验 - 为应用的上下文环境而设计

技术情境

另外一个需要考虑的是产品自身的设计、技术特性，以及用户使用产品的技术能力。举个简单的例子，眼下有不少关于拟物化与扁平化界面设计风格的争论，实际上，一个大体的原则是，无论使用怎样的设计风格，都必须确保界面的自解释性，使用户能够在很短的时间内理解并上手使用。

充分的测试工作是很有必要的，譬如你新设计了一个自认为非常容易理解的图标，但是用户很有可能因为从没有见过这样的设计而无法理解图标的含义。

在设计过程中，通过纸质原型进行可用性测试总是会有帮助的。简单快速的测试工作不需要很大的成本，却可以帮助你观察实际用户与产品原型之间的实际交互过程；记录并分析他们的反应和决策，这个过程可以为你带来很多意想不到的信息。

根据目标用户的群体特征来选择产品面向的系统平台，这也是一个重要的决策。你需要问自己一些具体的问题，例如产品功能对平台设备有怎样的技术需求，对系统资源及电量的消耗如何，等等。像待办事项这样的轻量级应用不该产生很大的耗电量，用户也很难保留功能有限却非常耗电的应用。设计师应该与开发者一起，将这些有可能影响产品体验的技术情境要素考虑进来。一些典型的问题包括：

根据目标用户的特征，你的应用产品需要支持哪些系统平台？
不同系统平台之间的优势与劣势在哪里？
应用需要利用的硬件设备功能有哪些？
应用对系统资源的消耗量如何？
目标市场的技术前景如何？
应用是否需要用户保持网络连接？
应用对于流量的消耗量如何？
在功能设计与技术上有没有可能降低数据的传输量？
怎样确保用户数据的安全？

相关阅读：怎样打造高性能的移动体验

社会情境

考量移动应用产品所处的社会情境是具有挑战性的。互联网将整个世界连接了起来，我们不能低估各类社交网站对产品推广和传播所起到的作用。

我们需要判断产品身上有可能具有的社会化因素，考虑能否有效的利用互联网的传播能力。如今，“分享”或“喜欢”这类功能是很常见的，不过你需要首先弄清楚这些社会化功能与自己的产品是否具有相关性，能否有效的产生附加价值。

要考量产品的社会情境特征，我们需要从用户的角度出发考虑一些问题：

用户的目标和实际需求是什么？
产品的目标是什么？
用户是怎样与产品进行互动的？
用户与产品互动的过程中需要集中多高的注意力？
产品有哪些核心功能？
用户是怎样使用这些功能的？
用户使用产品的方式是否会与设计目标有所出入？
用户对于界面会产生怎样的反应？
用户使用某些功能的时候是否需要保持网络连接？

通过对社会情境特征的分析，你可以发现产品当中那些有利于社会化传播的功能与文化元素，并有针对性的推广给潜在的目标用户。

总结

你即将或已经开始设计开发一款移动应用产品了吗？记得考虑以上这些有可能影响产品体验的上下文情境因素。要打造一款能够真正帮助用户解决特定问题的产品，这方面的研究工作是必不可少的，毕竟，在真正设计和开发工作之前，你应该了解用户为什么会下载你的应用，以及他们会在怎样的环境中以怎样的方式使用你的应用，如果有可能的话，又是否可以促进他们主动传播你的产品。

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

符合黄金分割的抠菊花造型

西乔 — 2013-04-01 09:06:35

多么垃圾的设计稿上只要加上黄金螺旋，看起来就像是经过专业设计的垃圾了。

上图是我用随便找到的一张照片做的演示，经过几十分钟的研究，我发现非常巧合滴是，这抠菊花的造型也如此完美地契合了斐波纳契黄金螺旋这一神秘的美的规律，专业，紧密，浑然天成。

如果你的设计稿不入流怎么办，找黄金螺旋，缩放来缩放去，一定找到你设计稿里某个元素能凑上的边线或拐点，咔嚓对上了。这就叫艺术“掉书袋”吧。

当然我同意创造一种基于数学思维的艺术是可能的。在设计中运用几何结构是一个非常古老流派。在设计中使用Grid system或参考线是可取的，很多情况下非常有效的，用来统筹布局、统一定位。对称，等分，黄金分割在视觉上的确也有特别的效果。比较离奇的还有√2、√3、√5这些比例，估计质数什么的也有人试过了。。。

这个流派有人信奉有人不信。但是过于迷信这些有理数或者无理数的神奇效果，我觉得是没啥必要的。用什么工具信奉什么理论不重要，重要的是你做出来的，得是个东西。

其它的也不多说了，我来讲一个丢勒 Albrecht Dürer 的故事。丢勒是文艺复习时期最著名的德国画家和艺术理论家之一，（我认为他的最高成就在铜版画和木刻画）。

他写过几何学著作《度量四书》和《人体比例四书》，研究的几何结构包括螺旋线、蚌线、圆外旋轮线以及三维结构、多面体结构和倍立方， “偏爱托勒密的方法超过了欧几里德的方法”，非常有前瞻性地把几何学原理应用到建筑学、工程学和版式编排设计之中。

他曾经说过：
“……没有什么东西比一张毫无技巧笨拙的图片更让健全的判断力所讨厌了，尽管花费了许多心思和努力。现在这类画家没有意识到它们自身错误的唯一原因就是，他们没有学过几何学。没有几何学知识，任何人都不可能是成为一名纯粹的艺术家，但是应该谴责他们的老师，他们自己对这种艺术是无知的。” – 丢勒《Of the Just Shaping of letters》 1953

丢勒代表着“健全的判断力”蔑视你们这些无知的不配称之为艺术家的小瘪三们。是不是很耳熟。

但是，然而, although, but, however, 丢勒在死前的一篇附于他的几何艺术学著作的最后一卷书后的美学短文中，他写到：“一位艺术家应该凭借丰富的视觉经验去想象一个美的事物”。“一个人随手在半张纸上花一天的时间用铅笔画出的东西，或在一块小木头上刻出的东西，可能比另一个人花了一年的辛勤劳动炮制出来的大作品更有艺术魅力。”

In other words, that an artist builds on a wealth of visual experiences in order to imagine beautiful things. Dürer’s belief in the abilities of a single artist over inspiration prompted him to assert that “one man may sketch something with his pen on half a sheet of paper in one day, or may cut it into a tiny piece of wood with his little iron, and it turns out to be better and more artistic than another’s work at which its author labours with the utmost diligence for a whole year.”

附：审美、效用与情感——关于icon和Logo设计的一些想法

源地址：http://blog.xiqiao.info/2013/03/28/1387

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

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

产品成长中的”节外生枝”

ico — 2013-03-22 07:59:47

是否经历过这样的场景，“网站中边缘的商品，却发现卖的意料之外的好”；”页面中的大banner却敌不过某处的文字链”；”流程上给用户加上的贴心功能，反而却让用户迷茫” 等等，这些意料之外，”节外生枝“的事情，是不是和当初设计功能时初衷完全不同？这篇文章就像简单讨论下这些“节外生枝”的事情。

节外生枝与 “节外生籽(种子)”

如果换个角度，从“节外生枝”变成“节外生籽(种子)”，可能会有疑问产品还没有做大做强就开始想着做别的？怎么还会做得好产品？其实并不是这样，每个产品都会有几大类型的用户，主流用户，专家用户，随意用户，边缘用户。边缘用户的需求和主流用户的需求是不一样的，产品抓住主流用户就可以了，但如果发现一颗有潜力的种子，培养一下也可以把边缘用户再转化成主流用户，并非对当前产品忽略。先看看几个例子：

饿了么最近推出的“订奶茶”产品，主打订奶茶，虽然和外卖一样都是预订，不过从人群上来说“外卖”和”订奶茶”是2种有交集不重合的人群，身边的同事有中午叫外卖的，有习惯出去吃饭的，也有中午自己带饭的？如果下午休闲时刻大家一起叫一杯奶茶是不是又是另一种情况了？这些不习惯订外卖的人，并不一定会对订奶茶这件事没有热情，把这块单独分离开，保留奶茶，下午茶，鸡排的分类，并且做更多方便的“订奶茶”的功能，可能对“外卖”的“边缘用户”产生影响，再转化成“订奶茶”的“主流用户”，拉动“外卖”这件事，从人群，行为，场景的不同，换一个角度，也会发现产品的种子。

大众点评的“周边快查”也是如此，有些用户只是快速的查找附近银行，ATM，邮局等，最多用到这10%的功能，却要去消化目前完整的点评客户端，随着点评客户端越来越大而全，这部分的空间会越来越挤压，所以大众点评拿现有产品，做了删减和优化，推出“周边快查”的应用，也可以帮助这些“边缘用户”变成“主流用户”。

种子的成长

种子的成长会有3部分，从“发现种子”-“培养种子”直到“茁壮成长”，除了之前之前提到的，饿了么的“订奶茶”，点评的“周边快查”，国内还有不少产品都有他们的种子产品，比如：美团的“猫眼电影”，美图秀秀的“美颜相机”，等等，关于具体的成长，我们就拿美团的“猫眼电影”来举个例子：

发现种子：

美团通过销售数据分析发现团购商品中的电影票的销量非常好，人们非常喜欢通过团购的方式看电影，又分析到整个电影行业在未来几年仍然会持续不断增长的行业，这是个非常有潜力的市场，团购电影票可以誉为种子。

* 2011全年美团卖出430万张电影票，占电影行业1%份额 2012.01.10 【来源: 中国经济新闻网《美团网全年卖出430万张电影票：销售额1.2亿》】

培养种子：

发现了种子之后，美团推出“网页的电影频道”和“美团电影App”，这样团购电影的用户不用再每次在这么多团购商品中查找电影票了，直接可以在美团电影App中找到，同时提供了电影信息，评论，附近电影院位置，更加灵活的把单纯的购买变成平台，把一些只在买电影票想到美团的用户发展成为“美团电影”的主流用户。

* 2012.02 美团推出美团电影App 2012.02.28 【来源：Appstore】
* 2012.11 团购电影票占总体票房份额 16.7% 【来源：网易科技《美团电影APP改版：去团购化卡位移动购票》】

茁壮成长：

美团电影App经过一定发展达成了一定量级，美团想让美团电影再往上提升一个等级，可以变成独立的垂直于电影的产品，所以改名“猫眼电影”并且在产品设计上全面去团购化，增加选坐，等更加垂直的功能，让用户感受到猫眼电影就可以解决一切问题，而非淘便宜团购电影票才找我们的感觉，黏度和名气大大增强。

* 2013.01 美团电影改名“猫眼电影”，目标去团购化，强调观影指南，在线选坐等功能 2013.01.24 【来源：Appstore】

(以上仅为本人通过数据报道的一些推测，如美团同事看到纰漏请多多包涵)

被抑制的种子

未发现种子没问题，如果发现了也无动于衷，那么在原本这么大的产品盘子里，种子要么被抑制，要么吞噬产品其他部分。

种子并不是可有可无的事情

“任天堂最初是做花牌的”，“诺基亚是做橡胶”，“三星是开制糖厂的”，“Skype初期只做文件共享的”，“Twitter一开始想做播客的”。这些公司在现在所做的业务，在他们创办时候做的业务是有天翻地覆的变化。虽然很多人会说有时代&科技发展的因素在里面，但是不可否认的是他们发现了自己身上的种子，在原有基础上的再一次发芽，给了自己更多的可能性，强大了自己。

图片来自，折折熊的《产品周期中的策略》

任何产品在发展中间都会经历“试错、爆发、平稳、衰减、经典”这几个周期，无非是时间长短的问题，种子在里面可大可小，有没有曾经发现过自己的产品有种子存在？

源地址：http://icojump.in/?p=2559

为什么要用户登录？

kent.zhu — 2013-03-20 13:15:56

只有登录才能完成相应的操作似乎已经成了很多产品，尤其是交易类产品的一种理所当然的规矩。所以，当你点击购买按钮的那一刻，一个讨厌的登录框就会弹出来，打断了你的操作。

你必须开始思考你是否曾经在这个产品里注册过，你的密码是什么，最郁闷的事情是，你常常还忘记了用户名…..

于是，为了完成交易，你必须再次完成注册，但是，他可能会提示你你的某个证件已经使用过了，你需要更换…..

但是，该证件是唯一的，所以，你又必须开始想办法找回你之前的账户。

好吧，当这一切都忙完了，请问，你还能记起你是因为什么而搞了这么多事情吗？还有，你还有想继续交易的心情吗？

所以，每次在使用交易类产品的时候，我总是想问一句，你们凭什么让用户登录？用户为什么要登录？

快捷酒店管家是一个典型的交易类产品。在最初的产品设计中，我们就最大程度的弱化了“注册”这个概念，同时也最大程度的弱化了“登录”的概念。我们从另外一个角度重新思考并设计了这个交易系统。

用户来快捷酒店管家是要预订快捷酒店的。这个跟你去酒店前台预订酒店，去一个代售点买个火车票完成的任务是一致的。你需要提交的基本信息，然后付钱，然后拿到房卡或者火车票。那，这里有存在登录这么一说吗？

既然是一个交易型的产品，从骨子里说就是，你提供给我相应的信息，我卖给你东西，就这么简单。提供一套账户系统，然后用户帐户名、密码登录进行交易，看似简化了这个交易流程，但，实际上则是增加了用户的负担，也打断了用户的使用流程。

所以，在快捷酒店管家，只会出现2种情况。你之前预订过，下次预订的时候直接点击预订，确认订单，就完成了预订；你之前没预订过，你需要输入姓名、身份证、手机号，确认订单，完成预订。不论是哪种情况，你能感受到的都是顺畅，无打扰，这是一个对现实生活的拟物与映射。

当然，还有另外一种比较折衷的情况。在交易类产品中，默认所有的情况进来都是填写交易需要的表单，但是，提供额外的入口允许用户切换到现有的账户模式，这个时候再进入登录页面。也能一定程度上保证用户操作流程的完整流畅。

在移动端产品设计中，因为移动设备与用户的更亲密的结合的存在，强制让用户进行登录，其实是个很反人类的事情，是在折腾用户。更快的完成任务，更顺畅的操作流程才是最重要的。

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

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

关于原型设计的一些事

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

设计沟通的七条经验

CDCer — 2013-03-20 11:04:12

经常有新入职的同学，搞不清设计师和别的职位如产品经理，在工作内容上有什么区别。回答了几次之后，我总结出两方面的差别，简单概括为：技能和定位。

“技能”指的是设计师掌握了项目中其他角色都不具备的能力——画图。这么概括有点简单粗暴了，事实上设计师的专业能力远比画图两字涵盖的内容要广。但“画图”确实是更容易被所有人理解的说法（向家里长辈解释我干什么的时候，他们如果不理解我就会说是画图的，他们就会貌似恍然大悟地哦一声，终于听到一个他们想要的能听懂的答案了）。伴随着人机界面从命令行到图形可视化，再进化到哪儿哪儿都可以摸的触屏时代，用户对于“美”和“交互”的要求越来越高，设计师的能力和价值也愈发受到重视。

设计师的“定位”，是随着用户体验受重视而发展起来的。互联网产品有一个很重要的特点是免费。聊天是免费的，搜索是免费的，游戏是免费的，杀毒也是免费的。免费对用户来说当然是好事，但免费也意味着用户迁移的成本很低，特别是当产品同质化严重时。一款免费游戏，如果突然宣布收费，市场上又有同类游戏，结果很有可能是大规模的用户流失。和传统行业不同，在免费的商业模式之下，用户黏性、忠诚度对产品来说至关重要；而用户体验就是构成黏性的一个重要因素。于是伴随着互联网行业的蓬勃发展，用户体验设计师，以用户体验卫道者的姿态站了出来。

这么说不代表别的角色不用对用户体验负责。在一个优秀的团队中，从项目经理到开发测试，每个成员都会对最终的体验努力并负责。但设计师之外的其他角色会面临屁股决定脑袋的困境。比如产品经理除了用户体验之外，还要兼顾商业价值和老板需求；开发要考虑实现成本和技术限制；运营要负责营收和转化率等。而设计师的定位更纯粹，自身立场不存在矛盾和冲突：站在用户立场，坚持用户体验的价值，时刻提醒团队用户想要什么；同时负责设计细节的执行。

这样就引出正题了，一个项目团队中设计师和其他角色的矛盾冲突，本质上就是这层定位差异带来的。（开发：这里明明功能都实现好了，设计师你还老是要改来改去的，到底想搞哪样！）基于这种定位冲突，设计师不能简单地把自己定位在执行层面上，还要通过积极主动的沟通，推动用户体验的落地和实现。这就对互联网设计师的沟通提出了很高的要求。

实际工作中，我们每天也花大量时间在开各种会，各种讨论上。沟通的效率和效果都直接影响着最后产出的质量。但在我们看最终的工作结果的时候，沟通作为过程反而不那么直观，很难去评价和衡量。我试着列举设计沟通中容易犯的一些错误，并总结了7条经验，希望对同样在思考这些问题的同学有些帮助。下文主要拿产品经理和设计师之间的矛盾冲突来举例。

1. 避免鸡同鸭讲

双方都在说自己的道理，却不听对方是怎么讲的；或者因为沟通双方无法说出真实的想法，导致沟通停留在表面上无法深入。这两种情况下，沟通效率都很低，而且很难达成共识得到结果。

比如我有一次看到，产品经理在和设计师争执，一个在讲运营的事情，一个在讲设计规范的事情，都在尝试着告诉对方，从自己的专业角度来看，这个事情应该怎么做。讨论几乎无法进行下去，因为谁也不肯让步。这种沟通效率是很低的，双方压根就没有站在同一个层面讲问题，设计师不懂运营，产品经理不懂设计。

这种情况在新人身上更常见，因为新人刚进入工作岗位，只了解自己的专业和工作内容，还不太理解别的团队中其他成员的目标和立场，很容易出现鸡同鸭讲的情况。当发现自己和对方讲的不是一个层面的东西时，及时找有经验的同事来帮助沟通会是行之有效的办法。

另一种情况也很常见，就是沟通的其中一方不愿意或者不知道怎么说出自己真实的想法。如一个产品经理一定要设计师改一个东西，设计师怎么解释也没用，请来了有经验的同事看，也觉得这里其实不用改。沟通到最后才发现，原来是产品的老大说要这么改，产品经理在老大面前答应了要改，所以就跑来设计师这里软磨硬泡。产品经理如果可以从一开始就告诉设计师，这个需求是来自某某，我坚持是因为我答应某某说肯定可以改掉的，整个沟通就不需要耗这么久了，因为只要把这个某某也卷入一起讨论就可以搞定了。

设计师需要掌握更多跨专业知识，理解不同职位的立场；学会讲自己内心真实的想法，挖掘对方的表述背后真实的含义。只有当设计在同一层面上时，才能做更有效率的沟通。

2. 不要过早陷入细节

优秀的产品一定是有细节的产品，优秀的产品设计人员也一定是个对细节敏感而挑剔的人。但细节也同时意味着需要更多精力的投入。要让投入有性价比，就要把握好切入细节的时间点。做产品和画画的道理很像，先草稿，再勾线，再上色，是一个由粗入细的过程。草稿没画完的情况下，如果先上了一部分颜色，再要修改整体构图就非常困难了，或者就得换一张重画。

道理说起来很简单，但实际操作的时候，即便是有经验的设计师，有时也会不自觉地陷入细节。比如有次开会，会上需要确定产品的定位。偶然讲到一个遗留的设计问题，于是开始激烈地争论，直到开完会都没讨论出结果。这个设计问题重要么？应该说也是重要的，但是否应该在确定产品定位的会议上讨论，是否应该卷入这些人参与讨论？

3. 认真你就输了

团队每个成员掌握的信息是不对称的，而设计解决方案往往是综合了这些信息之后做出的判断。所以不管是谁提出来的方案，随着讨论的深入，都有可能被证明是错的，或者有更优的解决方案。

讨论中每个人都会有自己的赞成或反对的观点。见过一些人，会非常激动地维护自己的观点，和别人大吵什么是对的。他会陷入自己的思维，无法跳出来，甚至有时自己也觉着不对了，也依然为了面子而坚持。这种人往往特别喜欢坚持，和他们确定方案是件真心累的事情…

每个人都会维护自己的想法，但我们不用像捍卫尊严那样去捍卫它们。有经验的设计师会控制自己的情绪，平静而肯定地表达自己的立场；在发现自己错误的时候，能不失面子地向对的方向靠拢。做得更好的设计师还知道怎么控制别人的情绪，在轻松的气氛下把讨论搞定。每当有人很激动地表达的时候，我会笑笑跟他说，你认真了。

4. 同理心

做互联网的同学都知道要站在用户的角度看问题，最好能够一秒变小白，这就是所谓同理心。但同理心其实是典型的知易行难，不说一秒变小白了，一小时能变小白就不错了。而在做设计沟通的时候，是否能以同理心去沟通，也直接影响到沟通质量。

有这么个例子，A想了一个晚上的设计解决方案，第二天很开心地过来跟B一说，B说这个不行，我早就想过了。然后两个人就火药味很浓的吵起来了。表面看起来两个人在争论方案，其实是尊严之争。A一个晚上的思考，几秒钟就被B推翻了，B否定的不是A的方案，而是A的智商。A也不明白为什么自己火气就很大，就是要跟丫死磕。

这个例子中，B可以试着反过来想想，如果A在瞬间否定自己，自己会怎么反应，就能明白问题的症结了。这个例子给我们的启示是，永远不要第一时间否定对方，要说让我想想。即使第一时间就对是非有个判断，也要先拖一下，给自己点时间再仔细思考下方案的合理性，再给出答复。

能够想他人之所想，确实能够大大帮助到我们日常的沟通。但是和一秒变小白一样，这需要大量经验的积累才能达到收放自如的境界。不过我还是有个建议，可以帮助更好地沟通。就是当自己情绪波动的时候，可以直观地表达自己的感受给对方听，而不要防卫性地攻击。比如当对方说你的设计很丑的时候，你可以说“审美是主观的，每个人都有自己的评判标准，不过这个设计你觉得丑还是让我很沮丧”，而不要说”这个哪里丑了，这么上流的设计都看不懂你个土鳖，你倒是画个给我看看“。前者的表达直观地把自己的感受传达给对方，使得对方更容易“同理”你，后者只能使沟通变得更糟。

5. 认同“形式追随功能”

一些“有追求”的设计师经常容易犯形式大于功能的错误。

作为设计师，我们要明白，虽然界面表现很重要，但是形式是追随功能而存在的，不能为了追求表现形式而要求功能做妥协。好用和易用，都是建立在有用的基础之上的。当功能和界面表现发生冲突时，界面表现应该向功能妥协。比如要设计一款商务应用，如果为了体现设计师的成就感，非要把界面做得充满趣味性，那就违反了用户使用场景；反过来在游戏里，界面就不能设计得枯燥乏味。设计师要能够控制住自我表现的冲动，认真地理解产品定位和用户场景，然后做出好的设计。

形式追随功能，换个说法其实就是功能限制形式，设计是带着镣铐跳舞。前段时间听广研nico的分享，他对设计师的定义我很喜欢，他的定义是：设计师是有方法的人。这里引用一下再加个定语，所谓牛逼的设计师，是指在种种限制之下，依然可以用优雅的方法解决问题的人。

设计师要从内心建立起对这一理念的认同，转化到沟通中，就更容易和产品团队达成一致。

6. 引入外援

即便是富有经验的设计师，也难免会碰到在沟通中陷入僵持的情况，谁也说服不了谁。这个时候如果擅于引入外部的声音，会非常有助于打破僵持。

也许可以暂时搁下争议，回去做数据上报，一周后看数据大家再做决定？或者随机在周围找n个和项目无关的人，对目前的解决方案做个A/B test，用一场快速轻量的测试解决争议？或者找一个你们都信得过的权威来给点建议？看看置身事外且经验丰富的同事怎么看这个问题。

卷入更多的人，能帮助我们更全面客观地看待问题，跳出从“我”出发看问题时的局限。而在僵持不下时，第三方的介入也给当事人留出了一定的空间，双方退一步冷静看问题之后，更容易达成一致。

7. 教学相长

职业生涯中，什么样的队友都会遇到。神一样的固然要好好把握，猪一样的也要循循善诱。

好的设计师一定是个好学不倦的人，除了设计以外，积极地通过平时的沟通机会，了解和学习跨专业的知识。当你能理解开发是怎么实现的时候，就不会设计出开发无法实现的设计稿；当你能理解产品经理想的是什么的时候，设计返稿率一定会大大降低。

好的设计师一定也是个好的老师，潜移默化地影响身边队友的理念。把自己的设计思想和审美品味带到整个团队中来。当团队成员对设计理念的认同和审美品味趋同的时候，以上很多沟通问题就不成为问题了。是不是会“教”，或者说是否具有影响力，是高级设计师和普通设计师的一道分水岭。有影响力的设计师，能够更大程度发挥自身价值，进而影响项目结果。

严格来说，第7条已经和沟通本身无关了。持续学习并且善于总结分享，应该是每个优秀设计师的必备素质。在这个基础之上，影响团队，增强共识，才是从根源上解决了沟通问题。

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

相关话题：产品设计团队协作源地址：http://cdc.tencent.com/?p=7080

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

小心产品的虚荣指标

kent.zhu — 2013-03-15 20:06:40

标题来自《精益创业》，我懒的想，就借用了。

产品上线了，必然的就需要一些指标来衡量这个产品的价值。常见的比如PV、UV、DAU、MAU、ROI等等。这些数字，一定意义上代表了产品的价值，也是里程碑的象征。因此，我们会经常看到各个产品在媒体上爆料自己的数据，以展示自己的实力。

然而，随着这种里程碑意义的被放大，越来越多的虚荣性指标充斥着互联网，充斥着各种产品的宣传。更有甚者，这些虚荣指标成为了产品的KPI，为了达成KPI，更多的手段被使出来，最终加剧了这些指标的虚假。

比如，将使用过跟这个产品相关联的功能的用户全部算入到这个产品的活跃用户中。比如，始终以累计用户来衡量，而没有去掉流失用户等。类似一周内有 10 万个新用户，单月 PV 达到 200 亿，300 万个会员总数，这些数据成为产品热衷于对外PR的指标。

从趋势上看，用户数量肯定是在不断增加的，随着用户数量的增加，注册用户、激活用户肯定也是增加的，所以，这些数字看上去很重要，但其实意义不大。

类似的虚假指标的出现，在很大程度上阻碍了产品的正常发展。除了对外吹个牛逼，对内基本上都是在玩数字游戏，自己骗自己。

每个产品都应该有属于自己的可行指标。这个指标能指引产品的方向、并帮助公司作出更好的决策，这样的指标能带给公司与众不同的竞争力。这样的指标才是每个产品都应该去关注的，而那些虚荣指标，交给PR部门去对外哄哄媒体和竞争对手就可以了。

比如，点评的可行指标可以是点评数量及餐厅图片上传数量；拍照社区的可行指标可以是每天的照片上传数量，一周内回来网站并上传照片的使用者百分比；社区的可行指标可以是最近30天都活跃的用户数量。

漏斗模型是一个比较合适的衡量方式的。通过漏斗的方式，可以很好的知道产品本身的运转情况及产品的业务模型。

比如从获取一个用户到用户最终下单的漏斗中，掐头去尾，计算获取一个用户的成本是多少，用户一单贡献的价值是多少，再计算出来用户重复购买的比率，大概就能知道这个生意是不是划得来。如果划不来，是漏斗出现了问题，还是模式出现了问题？

在快捷酒店管家产品的前期，我们建立了几个漏斗模型，新用户下单漏斗、老用户下单漏斗等，用来调整产品设计，直到这个漏斗趋于稳定。然后引入新的用户进来，不断优化这个漏斗。

我们需要一套可以看出来这个产品是一个可持续的产品的指标，用来衡量这个产品的价值，而不是一个总量的趋势。比如，用户总量是增长的，但是每个新用户所产生的收益是否有提高？在总量中，新老用户的比例如何？

另外，从产品的循环来看，实际上产品的过程就是一个“设定一个假设 – 用数据去验证这个假设 – 调整假设值，继续验证”这样的一个过程。在这个验证的过程中，虚荣性的静态数据并不能有所帮助，而能够揭示产品因果关系的数据更有帮助。

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

源地址：http://item.feedsky.com/~feedsky/Kentzhu/~7248736/721713207/5099563/1/item.html

【CDC翻客】用核心-路径法设计页面

CDCer — 2013-03-15 20:06:02

译者注：文章的原名为Designing Screens Using Cores and Paths。本文作者受到城市规划中“交通需求线”的启发，提出了网站设计的“核心-路径法”。区别于通常采用的从框架到主页以及导航的方式，“核心-路径法”让设计者从核心内容入手，由内而外来设计。这个打破常规的方法能够在网站中创造最直接的路径，以便用户找到核心内容。

链接原文：http://boxesandarrows.com/designing-screens-using-cores-and-paths/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

想象一下，当你隔着一片草坪想要到达对面的巴士站时，你是绕着草坪四周的人行道走过去，还是从中间穿过去呢？假如草地是干的，也没有被禁止进入，那么你很可能会选择最近的路线——穿过草坪直接走到巴士站。如果之前有不少人也这么干过，就会出现一条“走出来的路”。

这种计划外的道路连接了两点之间的最短距离，我们周围到处是这样的例子。在城市规划中，它们被称为“交通需求线”(desire paths\desire lines)，意思是人的自然行为和人为规划路线间的差异。

建筑师Christopher Alexander在他的著作《模式语言》中定义了“交通需求线”（1976）。对于“交通需求线”在建筑学中的应用，他给出了具体说明：

“规划道路的方法，是先在自然景点中设置目标点，再将这些点彼此相连形成路径。” ——Christopher Alexander

原则上，亚历山大的做法是以目标——即人们最终想要的东西为导向，然后将它们以最有用的方法连接在一起。

但在网页设计中，遵循的方法通常是相反的：设计师从主页开始设计。然后他们根据网站结构层次制定出一个导航方案，不管合适与否。但是目标（用户正在找的主要内容，或是他们想要做的事）却成了设计过程中被考虑的最后一件事情。

受到“交通需求线”的启发，我们可以改善这种设计网页的方法。使用核心-路径这种方法，可以指导你在网站中创造最直接的路径，以便用户直达核心内容。

核心-路径模型

“不要一上来就从主页和整体导航方案来开始，而要从核心内容入手，由内而外来设计。“

“以目标为导向。”信息架构师Are Halland在他的演讲《核心-路径法：可寻性设计》中这样建议。他概述了网页设计的另一种方法：不要一上来就从主页和整体导航方案来开始，应该从核心内容入手，由内而外来设计。就是这么直接。

这个方法基于三个关键要素：

1．核心内容

核心内容就是吸引用户来到网站的原因。从开发商的角度来看，核心即是网站提供的内容。需要注意的是，核心内容并不总是一个页面。对YouTube而言，核心内容是视频，而不是www.youtube.com上的页面。这使得YouTube也可能会有在其他网站上能够找得到的视频内容。

核心内容也可能带有辅助信息。例如，技术细节可以认为是核心内容的一个扩展。像Flickr这样的网站，对照片的描述以及用户给它的标签，都是核心内容——照片的辅助信息。

2．向内路径

用户该如何找到核心内容？有时，访客通过主导航或搜索找到核心内容。但他们也可能直接来自谷歌。或者是其他路径，例如来自其他网站，广告，直接在浏览器中输入URL链接，甚至通过RSS和时事通讯。进入路径也要考虑搜索引擎优化，例如人们搜索的关键词是什么。

3．向外路径

假设用户找到了他们要找的内容，接下来他们可以做什么、又会做什么呢？从根本上说，后续的每个交互都会给业务带来某种价值。这就是转变发生的地方。对外路径可以是从“把一样东西放进‘购物车’”到“推荐一款产品给朋友”这些操作中的任何一个。和向内路径一样，向外路径也有很多选项要考虑，包括离开网站的链接。

这三要素中的每一个都具有不同的功能。核心内容真正是为用户和业务双方创造价值的地方。向外路径的引导在这里起到了很大的作用：网站最终希望用户产生购买等具体行为。向内路径保证了可寻性，就是如何让用户在网上找到他们想要的产品和服务。而从商业的角度来看，向外路径是为网站带来投资回报率的东西。

下面是核心-路径法的图解，以Amazon为例（图1）。核心内容是一款产品，这里用红色方框中的内容来表现，包括一本书的封面和关键细节等。在左边列出用户可以找到这本书的多种方法，这些就是向内路径。把Amazon认为用户在核心内容上能够产生投资回报的行为，作为可能的向外路径列在右边。

图1 www.amazon.com的核心-路径模型

核心-路径法的运用过程

想象以下场景：你在一个小的设计公司工作，接到了一个自行车网站改版的单子。这家店现在仅有一个“小册子”一样简陋的网站，上面写有地址和营业时间。他们想引入电子商务，以便能够在线出售。产品包括高端赛车和山地自行车，以及它们的一些配件。这家店想在线出售的产品总共有1000款左右，主要的目标客户群是职业自行车选手和业余发烧友。已售出的自行车主要来自于优质品牌，因此，网站的设计应该强调自行车产品的高品质。根据核心-路径法，以下是如何设计这个网站的完整步骤。

第一步：定义核心内容

核心产品是什么？首先列一个候选名单：自行车，配件，服务等等。名单来源于脑暴，没有对错的概念。编辑完整的名单之后，确定一个核心内容和它的辅助信息。在大的团队里这意味与团队成员和利益相关者达成共识。

在上述场景中，核心产品是自行车。自行车照片是展示核心内容的关键元素。在这个案例中，自行车的功能、品牌以及产品系列是从属于核心内容的信息。辅助信息包括价格和额外的技术细节。

在优先考虑和确定这些细节之后，手绘核心内容（图2）。不要绘制包括导航和标志的整个页面，只专注于核心内容。

顾客可能希望详细的查看产品细节，所以在这个阶段要考虑两件事，第一：他们如何与产品内容进行交互。第二：要思考一旦用户找到核心内容之后的使用场景。

图2手绘核心内容和辅助信息

请记住，用户也会从智能手机和平板电脑来访问网站。他们也可能会发图片到 Facebook或者 Pinterest。这是分布式核心的一个例子。因此我们手绘出如何将核心内容放到不同场景中（图3）。同样，不要绘制页面装饰或者导航，只专注于核心内容。

图3 不同场景中核心内容展示的不同版本

从这里你可以看到，核心内容和辅助信息在不同场景下的表现形式。你可能不得不来回地通过版本的迭代来更新它们。

第二步：列出所有可能的向内路径

用户到达你网站的所有方式是什么？显然浮现在脑海的第一个是：网站搜索，主导航，谷歌和其他网站的链接。但是通过头脑风暴，能够找到更多的路径：购物比价网站的链接，乃至来自于线下媒体，如印刷产品目录。

对于列表中的每一个向内路径，都要写下设计需求，同时满足这些需求。例如，对于来自谷歌和其它搜索引擎的访客来说，搜索引擎优化和登录页优化是必要的（图4）。

图4向内路径的列表和对应的关键需求

第三步：列出所有可能的向外路径

从核心内容推测出路径。就像步骤二一样，向外路径也要满足设计的需求。依据业务的重要性把向外路径进行排序，使得后续设计更清晰。由于向外路径最终会产生商业价值，对其排序要参照商业目标。在这个例子中，通过一个明确的引导按钮将顾客带入结账流程。如果顾客不能马上做决定，那第二个优先级是给顾客提供一个链接，链接到愿望清单，或者向他人推荐产品的链接。

图5向外路径的先后次序

到现在为止，我们既不用看主页也没有想过导航。然而，我们已经完成了重要的设计决策，如核心产品的移动版本长什么样，以及用户如何与网站的主要内容进行交互。当做出高保真模型后，这些最初的界面可以进行用户测试。

第四步：将所有内容整合在一起

当你设计了核心内容，罗列了向内路径和向外路径之后，再来关注主页和导航。这个阶段的目标是让用户以最简单，最直接的方式找到核心内容。

设计网站的主页，导视页面以及搜索结果页面。手绘几个备选方案。在设计的时候，要记住核心内容和路径的元素：核心内容是什么，用户如何得到它，以及业务如何转换？

图6手绘主页—第一稿

在这个场景中，为了使顾客从主页到核心内容区，自行车商店的三大产品系列出现在主导航：职业赛车，山地车以及配件。对于目标客户来说，品牌也是很重要的考虑因素，因此品牌也包含在内。一个明显的环节——购物车和结账流程也位于导航区中。

图7手绘有过滤和排序选项功能的导视页面

以下是一个模版，关于在文章中我们捕捉的所有关键点以及描述的步骤（图8）。在本文末尾下载模版，尝试自己的核心-路径法吧。

图8核心-路径法的模版

总结

以下几个方面是这种方法对设计的改善：

识别差距。

在最开始的时候，对主要内容的目的进行质疑可以发现差距。

设计元素的优先级。

分解关键要素，可以优先考虑在整个设计中如何呈现。

聚焦设计。

核心-路径法为整个设计团队提供了一个明确的方向。

核心-路径法与其他方法直接的差异在初始阶段是很小的。但是这种影响是巨大的：现在，核心内容巍然屹立在你的设计中。网页设计中所有的其他元素服务于一个目标，那就是用户和商业的完美结合。

了解“CDC翻客”，请移步：【CDC翻客】翻客来袭！Fanke is coming！(链接：http://cdc.tencent.com/?p=6518）

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

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

一次内部“精益创业”的总结

小强 — 2013-03-07 20:07:14

《精益创业》是一本好书！强烈推荐，没有这本书，我也搞不出下面说的那些事情。

2013年之前，当你玩一款移动游戏的时候，你会发现很难获得游戏资料和游戏攻略。很多移动游戏压根没有官网，或者官网很简陋，得不到你想要的资料和攻略。只要东找找西找找。所以当时我们在公司内向尝试一下，看能否做一个产品来满足移动游戏玩家的这些需求。于是开启了下面所说的精益创业的过程。

精益创业的核心思想我觉得就是上面这个循环。另外一个就是最小化原型（这个我会在下一篇文章里细说）。

我们挑了一个外部产品做这个事情：

背景：我们只有2个人，没有资金支持，只有1-2个月的时间。所以我们的摊子铺的很小，一些不配称之为产品的东西，被我们当做最小化的原型（事后让我对最小化原型有了新的认识）。同时我们挑了一款其他公司开发的产品——《大掌门》，这么做是为了体验外部人员做这些事情的难度和可行性。

点子	开发	测试	认知
做一个游戏资料整合的事情，把散步在网络各处的攻略整合到一起，利用图形化的目录方式让内容更好找	用mindmanager做了一个《大掌门》攻略大全，涉及到了游戏的所有方面为了节省时间，只做了结构，没有添加内容	在玩家QQ群里发布了结构图的图片，看看玩家的反馈如何同时找一些玩家单独聊天，获得更深入的反馈	玩家觉得表现方式很好，但是结构过于复杂，层级太多。我们画出来的图中，很多内容都找不到资料和攻略，很多内容玩家也不太关心。
从“大而全”改为做“垂直细分”决定做弟子细分的资料攻略。我们在贴吧和QQ群里查看了最近的100个玩家问题，大部分都是弟子和血战相关	用word文档的形式将所有甲级弟子的基础属性，成长，天赋，缘，培养方向，评分等信息整合到一起。	当我们还没有放出去的时候，就感觉这个东西不行，自己看着都不爽于是回炉重做	当时已经有一个excel的版本被玩家广为流传，内容跟我们差不多。我们把做好的word放一起发现没有任何优势。所以决定在表现上下功夫，同时做的更适合移动设备的阅读。
用网站作为载体，表现上要很好，移动设备也要易于阅读。	用wordpress搭建网站，把word里的内容搬到网站上，加入更多的图片和图标，一定要美观。	在贴吧和Q群里传播这个网站，通过GA来查看数据表现	回访只有30%左右，跳出率20%以下，停留时间在8分钟。每次浏览页面数量在16页以上。除了回访低，其他数据表现都很好。但是回访低用户就无法沉淀。内容性质的产品也无法爆发，很难成长。
除了更好的表现以外，我们希望把用户评价作为一个特色，就好像大众点评和中关村一样。	加入友言评价插件，降低评价的门槛，同时可以获得一定的社区传播。然后自己先整一堆马甲号，填充一些评价。	在百度贴吧开展了一次评价送游戏cdkey的活动，每个cdkey价值10块钱，高质量的评价就可以获得。	活动被贴吧置顶的两天，评价数量很多，每天70个左右，但是取消置顶后评价几乎为0，玩家主动些评价的行为十分少。想通过评价来作为特色需要慢慢培养，不断积累，是一个长期的工程。而加了评价之后，GA上各项数据并没有明显提升。

最后总结一下：

这种垂直领域任然有机会！任玩堂做MT的专区也只有几个月，但是MT专区已经占到整个网站流量的10%，同样，着迷网的wiki版块也占到了网站整体的10%。（数据来自alexa，跟真实数据会有出入）

但是有4个难点：

1.游戏的原始数据不容易获得

2.流量从何而来？（搜索引擎细水长流，无法爆发。贴吧或者其他网站虽然能够短期爆发，但是不持久，且爆发力不够。口碑？）

3.内容做的再好，表现形式再漂亮。都只能是工具！如果只做内容，用户不容易沉淀。需要一些内容之外的东西黏住用户，沉淀下来。

4.外部竞争。不难看出，现在很多手游垂直媒体都开始对一些游戏做精细化的内容，吸引了不少用户和流量。如果再有更大的公司加入，在流量和资金方面都有更大的优势。风险很大。

PS1:这是“创业”虽然以放弃告终，但是让我们更加看透了产业环境。发现了百度的优势（搜索是入口，贴吧沉淀用户）

PS2：之前在evernote不断记录每个阶段我们做了什么，数据，心得等。比这篇文章内容更多，细节更多，但是记录的很随意，没有章法，感兴趣的可以看看，共享地址：http://www.evernote.com/shard/s94/sh/4168c76a-1029-4244-8ea8-d15d3d734769/a34904d60f0e103eeca3e77a784c09fe

源地址：http://xiaoqiang.me/?p=4063&utm_source=rss&utm_medium=rss&utm_campaign=%25e4%25b8%2580%25e6%25ac%25a1%25e5%2586%2585%25e9%2583%25a8%25e7%25b2%25be%25e7%259b%258a%25e5%2588%259b%25e4%25b8%259a%25e7%259a%2584%25e6%2580%25bb%25e7%25bb%2593

如果独立B2C网站要做社区化

白鸦 — 2013-03-07 20:03:55

以下内容是之前我和@Fenng 在“贝塔.朋友”微信公众号上的公开探讨。想要看到的更及时请关注：BetaCafe
—————————————————————————————————————————————————

问：如果独立B2C网站要做社区化，你认为好的切入点是什么？未来电商和社交会怎样交集？

答：

0、独立B2C网站要做社区化这帽子太大，这事儿很扯。还是说说B2C网站做不做自己的社区这事儿吧。

1、我不认为B2C网站一定要有自己的社区。值得大多数B2C网站先做好的是：在用户经常去的社区里维护好和他们的关系。然后再同时考虑要不要有自己的社区，也不迟。

2、重点在于建设渠道品牌、服务品牌或者产品品牌的B2C，确实有必要搞个自己的社区，因为确实需要保持和客户的紧密沟通，确实需要有个客户交流的地方，就当是自己的客厅吧。但这个社区不需要很复杂，一个简单的BBS往往确实最好的选择，把BBS用好了足矣满足需求。

3、此社区的切入点更合适是“会员服务和互助交流”，而非“会员营销”的地方。出发的方向决定了前面能走多远。（当然，“会员服务和交流”并不代表不可以做“会员营销”，重点不同而已）

4、此社区更不可能做成一个“xxx行业社区”或者“xxx平台”。商户的基因和出发点很简单：卖货+赚钱，这样的情况下想做好社区几乎不可能；用户到商户就是：买东西+花钱，他们随时会担心商户狡诈多赚自己的钱，内心里很难跟商户做朋友，在商家的网站上看到陌生人他们都会怀疑是商家派来骗钱的。
当当没可能做出来一个豆瓣，正是如此。“凡客达人”也是个很好的失败案例，不只是SKU太少根本支撑不起来一个分享氛围，而是出发点本来就有问题。

5、很多淘宝的大卖家有自己的QQ群，一个店铺挂三五百个QQ群是非常正常的事情，会员在这里聊天、互相咨询、炫耀自己的穿衣效果，蛮好。一方面会员有地方呆着，一方面商家需要的时候还可以方便的把信息送达给他们。
但，当他们尝试把这些人从QQ群拉到自己的论坛，从自己的论坛拉到自己的“社会化分享社区”的时候，大部分会员根本就不会买帐了。
因为这些人压根就不需要总呆在“商家提供的”社区，在QQ群是顺便，而且还可以“屏蔽消息”，进你的网站的那条路实在太远太麻烦。

6、多数商家做自己的社区最后都会变成无人问津却又不舍得关闭的坟场。特别是哪些非综合性的B2C。因为消费者根本就不会有事没事就去百度一下你的网站，然后再转到你的社区转转。

7、我相信未来超过半数的电商交易会来自于“社交”。因为人们会越来越多地进行“因为别人有，我也要有”的消费，而不是“我得有”的消费。“受他人影响的消费”占绝大多数的时候，来自社交的消费就是主流。电商平台会成为“下单和结账”的地方，社区才是消费产生的起点，才是货品展示的地方。

但，这个“社区”并不会是“商家自己的社区”。

—
问：知道为什么不用做交通罚款吗？

答：

1、交警木有接口，银行接口区域性过份强，接入成本过高。

2、taobao.com > 搜索“城市名交通罚款” > 查看商品详情找到卖家QQ > QQ上砍价(通常可以不可扣分，1分100元，罚款照交) > 回到淘宝下单，支付宝付款。… … 担保交易，放心安全！
（温馨提示：发货后7天系统会自动确认收货付款，自动确认之前如果对方还没搞定要点申请退款）。

源地址：http://ucdchina.com/baiya/?p=930

所有文章 - UCD大社区

扁平化设计与色彩趋势

扁平化设计进修

定义调色板

鲜亮的色彩

从哪里开始？

复古色

单一色

结论

Ps Play——移动端预览Photoshop设计零阻力

关于用户体验与产品价值

关于A/B Test的外传

好的产品关注功能，优秀的产品关注情感

手机上能不跳转就不跳转

关于移动应用的上下文情境

三种情境

物理情境

技术情境

社会情境

总结

符合黄金分割的抠菊花造型

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

手机上的长列表

产品成长中的”节外生枝”

节外生枝 与 “节外生籽(种子)”

种子的成长

发现种子：

培养种子：

茁壮成长：

被抑制的种子

种子并不是可有可无的事情

为什么要用户登录？

关于原型设计的一些事

设计沟通的七条经验

1. 避免鸡同鸭讲

2. 不要过早陷入细节

3. 认真你就输了

4. 同理心

5. 认同“形式追随功能”

6. 引入外援

7. 教学相长

Justinmind，为移动设计而生

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

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

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

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

小心产品的虚荣指标

【CDC翻客】用核心-路径法设计页面

核心-路径模型

1．核心内容

2．向内路径

3． 向外路径

核心-路径法的运用过程

第一步：定义核心内容

第二步：列出所有可能的向内路径

第三步：列出所有可能的向外路径

第四步：将所有内容整合在一起

总结

识别差距。

设计元素的优先级。

聚焦设计。

一次内部“精益创业”的总结

如果独立B2C网站要做社区化

节外生枝与 “节外生籽(种子)”

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

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

3．向外路径