我有时候不知道如何开始回答，大约在心中觉得交互设计师是一个对综合能力要求很多的职业，无法“说一不二”。工具固然很重要，现在很多大企业的设计部门都在制定设计标准，规范性的软件工具掌握越来越受到关注。 不过，我以为然设计师要少些“匠气”，多思考“为什么”，“怎么做”，也就是从“术”逐步转化为“道”的层面。这么说起来似乎太玄。

这段时间我一直在想一个问题——设计，尤其是交互设计是否可以归结为思维过程。

• 思维方式一：从“平面”到“舞台”的设计

一位交互设计前辈曾说设计思维的局限有时在于太拘泥于面前的那个“方块”，如果你把面前的二维方形界面转化一个思维，将它翻转一下，看成一个舞台，你需要的元素都是你的演员，什么时候转场，什么时候出现那位角色，如何出现……很多事情都会豁然开朗。

其实这种思维方法，就把平时面对的二维交互界面更佳贴合用户接触的三维、四维空间，达到模拟现实，增加用户操作的感知和理解。

或许刚这样说，可能还无法hold。举个例子，在实际工作中，我们可能会和团队一起讨论这个页面是否应该出现某功能，出现在哪里？以及这个功能元素如何出现。可能大家争论不休，谁也没有特别能服众的理由。其实这个时候就可以使用这种思维方法，把这个功能元素当作演员，如果你是导演，那么这个演员应该在：

• 何时出现：用户什么时候需要它？
• 演员在合适的时间来到合适的位置上，出现在哪里才不会影响主角的风采，也足够醒目呢：它的出现会影响我主要功能吗？它的出现用户可以感知到吗？
• 它的出场是该渐渐显露还是突然出现呢：转场、 跳转、 浮出还是弹出合适？

虽然通行的伙伴说比不上泰国的大皇宫，不过还是一片华丽的金灿灿。

走廊的内饰也很讲究



环顾四周，因为淡季，皇宫还在修葺。不过听说柬皇宫还是最近刚刚开放给游客的，所以也算另一种幸运了呢。
听说现任皇帝，也就是西哈努克亲王和莫尼克公主的儿子最近出访，不在皇宫内。可惜，因为之前听妈妈说，西哈努克亲王是过去亚洲四大帅哥之一（包括周总理），加上又是柬法混血儿，还好奇想一睹尊容，想必也是帅的耀眼吧。听说他还未婚，惹来团里很多妹纸都惊叫，不过人家的未婚只是没有法定老婆，不是指没有三妻四妾哦～妹纸们表想多了：）

传说中的后宫佳丽待的后宫，可惜外人不得入内。
皇宫内部陈列很多金银珠宝的收藏品，可惜不能拍照，各位看官就发挥想象力。柬埔寨盛产玉器和银器，里面还有尊很高大的玉佛，据说也是各种辗转，这个国宝也曾经被侵略者掳去，后来又回归故土的。

七头眼镜蛇保卫着皇宫。
旁边有个小小博物馆，倒是可以拍照。里面主要是皇帝和皇后庆典、婚礼和平时的服饰，还有一些日常用品。



还有一些民族服装的展示。像是下面据说是过去女子一周的穿着：从周一到周六各有颜色的不同。看来柬埔寨人民看看什么颜色衣服便知道今天是星期几了。

走出皇宫的后庭，雕纹的门里，隔着若隐若现的柬埔寨风貌。

走廊的墙壁上画着皇家壁画。

旁边又是一尊塔。

旁边的皇家花园里的塔颇像中国和尚圆寂的舍利塔。

水中的睡莲好美～


老实说，柬皇宫的确显得有点小，转转便到了尽头。快到门口的时候发现了一个造型有趣的石猴，有点孙大圣的味道。

这个猴子其实也是柬埔寨神话传说的一部分，晚上观看舞蹈表演的时候，猴子和神仙姐姐还有段情缘，到时候再仔细聊聊。

东南亚常见的象头人身雕像。
快要出皇宫看到有卖饮料的摊贩。买了一个当地的梨汁解渴。

柬埔寨有自己的货币，不过通收美元。按照一美元折合4000瑞尔来计算。这杯梨汁也不过2000瑞尔。不过动辄几千瑞尔的花，让人感觉这里的钱是多么的不值钱。

离开的皇宫，匆忙的行程不容许我们留恋。下一站大吴哥，高棉还在向我们微笑。敬请期待下篇《柬埔寨之殃——高棉的神秘微笑》….

回到所在的酒店，异域风情扑面而来。

顶层天窗倒是有点西班牙的味道。


酒店的室内游泳池看起来好给力，可惜没带泳衣只能望着兴叹。



时间不早了，扑倒床上，但愿梦里来到神秘的吴哥窟。

早上一起床出门到处都是这种人力三轮车。

一早的旅途就从中心公园开始。


随处可见这种七头眼镜蛇，据说是助佛祖得道的守护祥兽。

小山的顶上是一座威严的寺庙咯。


可惜寺庙多有严格的规定，拖鞋进入并且严禁拍照。

寺庙前供奉的莲花瓣增添了几处浪漫色彩。

从侧边穿过寺庙辗转看到一座白塔。


随处可见拜佛用的各式各样的佛龛。




门口偶遇柬版指挥交通的玄彬哥，还很亲切的愿意配合照相。帅啊～


这里似乎是用来纪念皇帝陛下的。接下来的旅程，就是柬埔寨现在皇帝所住的大皇宫了。会不会遇到皇帝陛下呢？嘿嘿，敬请关注——柬埔寨之殃-（二）遇见皇宫和高棉的微笑

比如，dribbble上，hover显示作品更多信息。

　　有时，hover提供更多的操作。

qzone单条feed上面的屏蔽更多操作

　　无论用于哪种方式，即便网页中非常常见，在触屏移动设备中hover将不复存在。这倒也容易理解，因为在手机和人之间不再存在其他间接设备（比如鼠标），人们可以直接使用自己的手指触摸进行交互。

　　由此，所有在桌面web端依赖鼠标悬浮的交互体验都需要重新思考。hover出的信息往往不象点击那样重要：直接显示太过，没有他也不行。因此hover从桌面端倒手机端的转化不能忽视。

　　对于移动设备，你对于hover菜单的选择可以是：当前页打开，点击或拨动显示，跳到另一页面，或者干脆放弃。

1、当前屏展示

　　如果hover后的内容很重要，例如重要的操作和内容，那么最好的方式就直接展示到当前页面。Twitter在其官方触屏版就是这么做的。

桌面端，将鼠标hover在twitter单条feed就会展示出几个操作：收藏，转发，回复。

Twitter认为这些操作足够重要，因此在移动触屏的体验上直接展示在屏幕上。

2、点击或滑动

　　在手机web 浏览器中，如果代码没有对hover进行特殊设置，会自动设为点击效果。如果你对于现有网站上hover所出的菜单无计可施，可以考虑将他设为默认点击展开。当然，这点上如果hover所出的菜单中操作逻辑上是指下一步那就最好了。但是这对于无疑会造成打断，使得操作进程中多了一步。

　　对于桌面端hover显示更多操作的情况。操作表（Action Sheet）也可以算作一种当前页弹出的展示方式。

　　如果hover后的操作不属于“下一步”，可以考虑拨动显示更多这种方式。不过，相对于点击，拨动手势不太直观，需要更多学习成本，最好采用一些隐喻或轻量的动画－让人们知道他应当如何操作。

　　USA Today更多内容分类采用的截字加阴影的效果，暗示用户拨动显示更多。同时，用户第一次进来的时候会显示一个右滑的动画。

　　同时提醒大伙，在使用不显而易见的手势（比如滑动）时，最好提供其他可选的方式。比如yahoo！邮箱，需要滑动的手势显示，同样支持全屏时候显示。

3、另开一页

　　如果hover所展示的信息属于扩展类型，那么在手机这么有限的屏幕下，最好把hover后的内容单独打开一页。Barnes&Noble就使用了这个方法。

Barnes&Noble把桌面端hover出现的更多信息，单独打开一页展示。

4、去掉更健康

　　如果hover菜单意义不大，就直接舍弃吧。去掉对于用户没啥价值的多余选择和信息，不仅会让你的界面更佳清爽，还让你省去多余的开发时间，所以别害怕扔掉hover。

部分翻译来自《mobile first》

　　她的创始人Dave Morin说新版不久就已经超过150万人下载，而老版一年才突破了100万关口。用户一天内在新版分享的内容超过老版一年的内容。

　　path2.0之后带来的用户量和活跃用户的暴增最大的功臣莫过于界面设计和体验上的不俗表现：
1、产品定位的转变引发UI设计的调整

　　path1.0的时候大家似乎还没有看出她和instagram等等一系列社交软件明显的差异化。path2.0已经将定位清晰表达出来了：和亲密好友分享生活日记的app(Path is the smart journal that helps you share life with the ones you love)。

　　虽然她在可添加好友数量从50暴增到150,但无论是睡眠、起床之类的个人信息分享，强化的timeline feed样式，还是只有昵称没有头像的简约，都传递出她希望和亲密的人分享自己生活日记这一中心。

　　在界面表达上，设计师也传递着这一核心定位：

对比path1.0的图标，2.0在UI上做了日记本隐喻的处理

loading时候，如日记本打开的翻页效果

2、突破ios瓶颈的架构方式

path1.0 vs. path2.0

　　在整个path的改版中，最为惊艳的还是她突破ios的一些制约，创新的一些架构模式。

　　在path1.0时，底部还是采用非常传统的tab导航方式。架构上也普普通通没有新意。

　　由于手机屏幕尺寸和手指碰触的限制，44*44像素的最小触碰尺寸造成了底部导航tab只能放少于等于5个。这对于功能的扩展造成了限制和瓶颈。

　　path2.0完全颠覆了iOS guild line的模式，采用三屏模式（左屏、主屏、右屏）

　　同时架构上凸显了这种方式具有的极好的扩展性。

　　可以假想，path在设计之初也面临添加各种其他动能（比如音乐、地点、和谁在一起、起床睡觉）时候面临，中间的拍照键不好满足的情况。因此，采用这种三屏模式，极简了主页面，主屏仅留下feed展示，和添加功能。将导航放入左侧的屏幕，增加了未来的可扩展性，同时也保证主屏幕清晰的内容：动态展现和添加我的动态，还有最新的消息提醒。

　　她深知对于消息来说，新增的消息才是重点。一方面在主屏底部显示了最新一条消息的摘要和未读消息的数量，另一方面把全部消息收在左屏的activity里面。

3、timeline的影响

　　好吧，path的创始人来自于Facebook，path2.0出场的一刹那我们就看到了Facebook的timeline的影子。Facebook的timeline也出现的在终端上了，和path几乎一模一样。先不去争辩究竟是谁抄袭的谁。path在feed的展示上格外强调时间线的展示方式。

　　在手指拖动屏幕向下滚动的同时，右侧浮现各个feed分享的时间，时钟动态的显示回转，强化了时间线（timeline）。
4、更加直观的表达

　　交互设计中，所见即所得（WYSIWYG）对于用户来说是一种最容易学习的交互模式。

　　新手任务中，用户需要添加个人cover。添加的个人信息，即时的在当前位置表达、编辑信息。之后的展示上也采用一致的布局，让用户非常清晰了解到所输入的内容结果如何，也算是“操作前结果可预知”的体现。

　　社会化网络的两大精髓：表达自我，了解他人，在个性化cover上表现的淋漓尽致。

　　另一个方面是手势的直接表达。path摒弃了除了点击（tap）以外的其他手势。对于滑动显示等其他手势来说，点击（tap）才是最直观的、优于其他操作的手势。

　　主屏左下角的+绝对是亮点。有没有想过为何放在左下角？又为什么采用弧形展开？仅仅是为了追求炫目的效果么？

　　其实对于手势来说，多数人都使用右手为利手，同时使用右手拇指单手操作。那么方便的可触碰区如下图：

右手利手的拇指可触碰区

　　图中的easy区是容易操作的区域，且成弧度展示。对于展开的6种功能平等且易操作的展示。那么path2.0的主操作，放置在左下角，采用弧度展开也有依据的。并且，她在同一个位置展开后，转变为×号，复用位置，节约操作空间。

　　除此之外，path2.0在动画效果展示上也极富爱心。loading的翻书动画，图片upload效果，音乐播放的从大到小展示，都让path的体验变得卓越。

　　The End

Thanks for kiwi‘s illustrations.