BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

念叨 - 关于Keynote与Sketch、UX与音乐,以及Xcode 7

念叨 - 关于Keynote与Sketch、UX与音乐,以及Xcode 7

这个博客从2011年秋天开始做到现在,我就从来没学会怎样起个像样点的标题。随便翻翻这里那里的各种科技频道,无数充满创意与时代气息的标题时常让我自惭形愧。

话说这周是实在找不到什么有欲望做掉的译文,周末下午大好时光总不好荒废过去,雨下的固然疯狂,昏昏沉沉有的没的随便念叨念叨好了。做译文其实挺省心的;换到自己念叨的时候,思路容易飘飞,如若刻意收敛又写不出几句人话;亦或是认真起来扯个一万多字好像之前有篇Apple Watch平台认知什么的文章那样写完照照镜子发现有脑浆从耳朵里面流出来,也是蛮危险的。

念叨三件事吧。我不得不说现在各位看到的已经是自己砍掉各种过分飘飞的闲言碎语之后的字了。

Keynote与Sketch

如今越来越热衷于Keynote与Sketch协作。“协作”这词儿有点大了,其实无非是将Sketch中的UI元素拖拽到Keynote当中直接作为Prototyping的素材来使用。具体说也就是在Sketch中完成了包括不同状态和转场流程的线框稿之后,把Sketch放左边Keynote放右边(无所谓,个人习惯),将Keynote文稿尺寸设定为5S或6或随便你喜欢的规格,然后从左侧Sketch里把图层啊Group啊直接拖进Keynote,一步一步的构造界面,按照自己的剧本开始欢乐的制作原型。

当然这些所指的是需要你去探索或演示转场模式的情况,例如在设计新的功能模块或是全新的产品时;对于那些相对成熟的、有着比较稳定的设计模式的功能或产品,普通的优化迭代需求只提供静态线框稿以及详细的交互描述便也够了。

通篇是念叨而不是教程,所以涉及到what和how的具体问题不做深入了。有些重点值得关注,例如在Keynote中制作原型时,要善用过渡效果里的“神奇移动”。中文名字略low是真的,用起来却也不同凡响,前后两个界面当中共有的元素会根据你的调整而自动进行位移、缩放和不透明度等等属性的变换,只这一点就足够满足大部分transition的演示需求了。具体的使用方法,外面有很多靠谱的讲解,个人觉得看看WWDC 2014里Apple的设计师讲解他们是怎样使用Keynote快速制作原型的那个video其实就足够了(Prototyping: Fake It Till You Make It)。

另外需要注意呢,从Sketch复制到Keynote的元素是不包含图层结构的,譬如你同时选中导航栏以及其中的标题按钮等元素,扔到Keynote当中就被拍平成为一个元素。所以在设计转场时,对那些可能贯穿在多个界面中的元素,或是在一个Group里面会单独发生变化的元素,要考虑将它拎出来单独复制到Keynote成为独立元素,便于通过“神奇移动”进行transition;对于那些静态组件(在所有场景中都保持不变),将它们整体一股脑复制过来放在那里便好。

制作原型的最终目的是为了演示 - 以最低的成本、最直观的效果,向产品、其他设计师或开发同学展示交互方案,沟通思路。使用Keynote制作的原型,核心价值在于优雅顺畅的转场效果或局部动效演示,所以最终的交付形式要么是Keynote文件本身,要么是视频文件。一对一的沟通,将Keynote文件扔给对方没什么问题,但对我个人来说,在实际当中最主要的场景还是多人在线交流。你不能假设团队中每个人都使用Mac,不能假设每个使用Mac的同事都安装了Keynote - 对大家来说,观看成本最低、最具跨平台性的媒介就是视频了。但我不使用Keynote导出的视频,因为设置自动转场会很麻烦,系统添加的间隔时间会叠加到动效之上,零点几秒的出入也会对转场效果产生明显的破坏作用。常用的方法比较low,却也最实用 - 一手按键盘操作Keynote演示,一手举着iPhone对着Mac屏幕拍摄视频,然后直接在手机上发到讨论组里。这样一方面自己可以控制演示的进程,该停的地方停一下,为了让观看者有时间思考,一方面可以确保效果的精准还原。

UX与音乐

这里的“音乐”可以指概念比较宽泛的Rock N’ Roll吧,我不知道,对其他类型的音乐不太了解。

在产品、设计相关的工作当中,我偶尔会有意无意的把这两者关联起来,觉得它们有些相似。

譬如每当看到那些过分精致的图标、过分炫酷的动效,甚至是纯粹通过CSS“写”出的精妙图形,我都会想到一位名叫Michael Angelo的吉他手,人称无影手,玩琴的朋友想必听说过。上学时曾经看过一些他的视频,真正机械人一般的速度,在视频里甚至可以看出手臂移动的残像。无论在琴行玩,还是以前各种论坛里,这样的“大师”包括其他很多以速度见长的高手都是一般玩家所崇拜和拼命效仿的。只是我从来不知道这里的意义是什么 - 旋律和情感似乎完全不重要,人体仿佛成为机械工具,灵魂被技术取代,这一切和杂耍没什么区别。

当然也许这些人拿起乐器从来也不是为了输出音乐,而是将演奏单纯作为获取仰慕与认同的手段。这和有着高超技法却只将本领用在与产品脱离干系的“作品”上的设计师蛮类似的 - 掌握了设计工具的使用方式,执迷于“形”,执迷于“术”,全身心的依靠在设计交流平台上展示技巧获得赞许来维系自己的精神世界。撸瑟。

除了吉他手的联想,在另外一些时候我又会觉得一些设计同行太像那些称得上是Rock Star的主唱,譬如Axl Rose,活在绝对的自我世界中,前一秒柔情后一秒狂暴,精神病患者般的性格,一切行为只是为了200%的倾泻着自己的任性 - 但说到底这是摇滚明星的职业要求 - 肆无忌惮的表达出偏激、纯真、虚伪、善良的感情,一股脑糊在你脸上让听众觉得震撼让听众觉得爽让听众觉得找到了某些心里妄想却得不到的东西让听众觉得他喊出了自己想喊但是喊不出的东西。极端的自我表达正是摇滚乐受众所欣赏和乐于接纳的。

而UX设计不是这样。只有依附于产品,UX的概念才成立。只有依附于用户,产品的概念才成立。而产品的用户只是需要自己的痛点被解决而已,他们不像乐迷膜拜摇滚明星那样关心产品设计师的自我、性格、品位,真的,他们不关心。用户愿意下载并保留这个app而不是那个app,最终取决于是否有用+是否好用。最好不要幻想着用户是冲着你独具匠心拷贝过来的配色和设计模式而下载你家产品的,最好不要幻想着用户关心并理解你通过界面设计所表达出的自我特质,最好不要幻想着用户对着界面兴奋不已大声叫好。

客观的说,自己也未必能自始至终从容不迫的置身事外,只是尽量保持清醒和自省吧。

再来一些正能量吧,不记得从前有没有絮叨过,印象里似乎有,但既然这次是专题念叨,倒也无妨。回想一下从2006年开始不再那样沉迷于乐队和排练一类的事务,除了客观方面譬如时间精力不允许、朋友四散等因素之外,主观上来说,似乎从设计工作当中所汲取到的精神养分已经能够代替从前在音乐方面获取的那些了。曾经最热衷于排练,因为享受那种四、五个人在一起,一方面各司其职,一方面又专注在同一件事情上,在自由发挥的同时彼此推动促进的默契的感觉 - 如果自己所在的设计团队足够棒,这些感觉同样可以在工作中体验到 - 你在自己的角色当中,譬如交互设计,去思考和发挥,同时能够感受到其他交互、视觉设计师都在一样的专注和投入,贡献着各自的能量,并且随着配合的深入而越发默契,彼此能站在对方的角度互相推动或补充 - 除了没有乐器和功放在耳边制造出震耳欲聋的声音以外,这些都和乐队排练没什么区别,至少对我来说是这样。

Xcode 7

用Apple的话说,就是大快人心的大好事吧。这里没有太多可以絮叨,只是这一点不得不拿出来说说。Xcode 7允许你直接在实际设备上测试app工程项目了,而在此之前必须每年给Apple交99刀的保护费才可以,否则只能通过Xcode自带的模拟器来测试。

对设计师来说,这意味着你可以更加放心的把Xcode作为原型工具来使用了 - 想象一下Sketch有了手机端的“Mirror”配合之后的强大,你就知道我在说什么了。从前最多是通过项目文件和开发同学进行沟通,或是通过模拟器运行原型然后投影出来进行演示;现在你可以直接把原型扔到iPhone里了,不仅便于自己在第一时间感受设计方案在实际设备里的表现,更可以带出去给更多的人来操作体验,获取反馈。当然,这些都是站在设计师的角度来说的;这项升级对于开发工作的辅助价值则是另外的话题了,另外那个我完全不擅长念叨的话题。

最后来个首尾呼应吧。说起在实际设备里跑原型,我到现在也搞不懂为什么iPhone端的Keynote在运行演示的时候是横纵屏颠倒的 - 如果你试过将桌面端制作的原型放到iPhone的Keynote里运行,就知道我在说什么了 - Apple官方的解决方案是在Keynote里把界面横过来做,这样放到手机上就是正常的竖屏演示了...真心反人类,期待将来Keynote可以加入这方面的修正更新,届时我们就又多了一种可以方便部署到实际设备当中体验和演示的原型工具了。

评论 (4)
用xcode来做原型制作工具,对设计师的要求太高了吧?
关于录keynote的地方,不是可以用自带的quicktime 录频吗,还可以设定录频区域
交互工具现在越来越丰富了,交互实现的流程也慢慢的在改变开发的流程,现在的实际工作中就在尝试需求流程清楚后,先不带网络请求和数据,快速用叉扣得撸一个完整的demo,能基本还原真机场景下的使用,快速验证,也亏得是自家的小产品才敢这么折腾,给博主赞一个,持续更新很棒啊
哈多交流的