Quartz Composer快速上手指南

去年给Team做了一次名为《Animation Prototyping – 让设计动起来》的分享,讲解如何快速上手 QC 的方法,结果一周内就有同学可以做出成品了。以下是讲稿的核心部分,捞出来串讲一下:

基础工具:Quartz Composer + Origami

1. 先熟悉下QC工作区的面板。如下图摆放,方便操作。

Animation-Prototyping-1

2. QC基本工作原理。摸清它的逻辑,之后就好办了。(这是用 Keynote 画的模型示意图,用来表示部件之间的关系。)在“Parent panel”里建这三个部件,构建基础手机模型。

Animation-Prototyping-2

3. 所有动画,都在“Render in image”中完成。双击它,进入下一层编辑界面。首先创建“Clear”部件,非常重要,它的作用是清除缓存,避免显示出错。接下来动画部件的摆放,如图示即可,遵循这个逻辑构建交互动画。

Animation-Prototyping-3

好了,其余就看你具体要做什么交互,Origami 会帮助你,它提供了很多现成的部件。用实际的例子来演示一下上面这个公式:

Animation-Prototyping-6

Animation-Prototyping-7

多多练习,体会一下,很快就能掌握 QC 组织和“编程”的诀窍,开始实战。


另外,在寻找动态表现原型方法时,顺路还研究了一下 Framer.js,最后觉得还是 QC 更容易上手,适合设计师使用。针对 QC 和 Framer.js 我做了一个简单对比:

Animation-Prototyping-4

Animation-Prototyping-5

如果想了解 QC 是什么和前期准备工作,可以参看我上一篇介绍:Quartz Composer入门

Web设计师能从游戏中学到些什么

What Web Designers Can Learn From Video Games
Smashing Magazine版权所有
作者:Smashing Magazine
译者:UCD翻译小组波希米亚
原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/

译者序:一直以来我都想写一篇关于游戏与交互设计之间关系的文章,因为我坚信好的设计和游戏一样有魔力,都能为用户带来乐趣。这可能跟我之前在游戏公司任职过有关,潜移默化地受到感染和熏陶。当看到这篇文章时,共鸣了,这就是我想要说的,于是我决定译过来,跟更多设计师产生共鸣,推动 “乐趣设计”,同时也为自己这方面的想法写下第一笔。

好的设计应该是融会贯通的,有相似的细节和处理方法,当然,还要有一个能够吸引人的理由或法宝,如果你有过这方面的零碎念头,而没有能汇总在一起,往下看,这就是了!

游戏越来越Web化,而Web也越来越游戏化。如果你想证明这一点,只需要去看看雅虎问答。有人问,有人答,最终获胜答案还能拿到奖励分(译者注:没玩过雅虎问答的想想百度知道)。这是一个排名系统,可以积聚和解锁系统中越来越多的功能。它的工作原理是因为心理的成就和游戏机制,从而鼓励互动。问题来 了,Web设计师们能从游戏中学到什么?或者更确切的说,是从视频游戏中?

一个好的游戏界面必须高度可用,并且直观,能够用尽可能少的动作完成很多重复的动作。它们需要具有吸引力,并且够可爱。一个好的游戏界面会给用户体验加分的。在游戏中,人们接受内容的同时不希望幻想被打破,所以再伟大的游戏产品都可能败于一个不给力的界面。

即使在像《波斯王子》这样的老游戏里,只有有限的系统功能,也要求设计师们必须做出一些创新。在功能越发丰富的今天,我们不难从现代视频游戏中发掘中更先进的设计技术。

网站的用户以同样的方式,希望其内容交付的方式,是很容易理解,直观,引人入胜,而且不需要过多滚动或点击。事实上,Web设计师可以从视频游戏界面中学到 很多。使用了通用游戏界面思想的网站,可以简化用户操作,同时为站点注入更多个性化。这样能带来更高的流量和回访率,甚至销售额(说白了,就是钱嘛!)

这并不奇怪,我们已经看到,像carousels,lightboxes,accordions和日益复杂的导航,已经通过CSS和JavaScript库大量涌入了浏览器中。无论是好事还是坏事,那都是另一篇文章要讨论的,本文将专注于技术,而不是那些错误的应用。

更多

用好Axure的协作功能

最近一个项目里,“被迫”开始使用Axure的协作功能,为了保证版本统一和一致的输出。实践的效果不错,在时间短、质量要求高、同时又有多人参与时非常奏效。

为什么说“被迫”,这里当然是个反语,但说实话,做了这么长时间交互设计,参与过大大小小不少项目,能使用到这个功能的情况是屈指可数的。往往都是1个交互设计师对2-3产品经理,来一个需求分一个人跟,出于人员配比的原因,也就很少有机会能出现几个交互设计师攒在一起协作个什么的情况。

这个功能虽不是总能用到,但适时使用一下,能让参与者感到欢乐不少。

创建协作项目

以Axure RP Pro 6 Beta for Mac为例,Win下的版本差不多。

1. 打开或新建一个.rp文件,然后开始创建:选择”Share”中的“Create Shared Project from Current File…”

更多

内容为空时提交如何处理

终于能出来透口气,写点东西了。前段太忙,也很郁闷,现在调整过来点了。

我的设计原则就是在满足需求的前提下,尽可能的简化,简化,再简化。有一次跟一个朋友聊天,他问我作为交互设计师,你的三个原则是什么?我回答:1.以用户为中心去设计,让事情变得简单化;2. 平衡商业需求与用户体验之间的权重;3. 有下游意识,但不干涉下游二次创新。

“用户体验是门妥协的艺术”,一边是复杂的需求输入,另一边要做到简单的产品输出,这是件既麻烦又头疼的事。大框架想好了,抠细节的时候,问题就一个接一个的来了。如果内容为空,提交时如何处理?类似这样细节末端的问题,怎么啃下来?

Kent.Zhu同学的一篇《空搜索如何设计》倒是给了我启示。跳出来想一下,内容为空到底有多重要,给予用户一个怎样的反馈是恰到好处的呢?下面有5种处理方式,根据量级由轻到重分别来看一下:

1. 内容为空时“update”按钮干脆不可用,从根本上杜绝提交空信息的操作。实例:Twitter.com

twitter

更多