迭代 UI 设计

迭代的UI设计

大家早上好 哇 这掌声真热烈 感谢你们的到来 我们非常开心能来到这里 我是Ryan Olshavsky 和我一同前来 坐在下面的是 Jonathan Cho 我们是Apple iWork 团队的设计师 我们为Mac、iOS及iCloud开发了 Numbers、Pages和Keynote应用

Jon和我设计软件界面 已经有很长一段时间了 为Apple和其它公司都设计过 若总结出一点来概括我们多年工作经验 那一定是... “做出好设计不容易” 我知道这听起来好像是 每一个设计师都会讲的话 因为它有利于我们的工作稳定性 如果每一个人都相信这个说法

也许你们见过一些设计师的作品 觉得看上去也不是很难 你是对的 很多时候优秀的设计 看上去会是显而易见或者毫不费力的 但是真正让设计变得困难的 是所有优秀设计 都必须回答的问题 类似这样的问题 “我们将设计什么？” “我们为谁设计？” “它能像预想的那样工作吗？” “我们真的做对了吗？”

这些问题没有显而易见的答案 它们总是很困难 即使对于那些最富有经验的设计师 如果你是一个独立开发者 或者你是团队里唯一的设计师 或者你从未设计过任何东西 回答这些问题会是一项艰巨的任务 但是我们必须要回答 因为我们知道 设计很重要 设计是如此重要 它会深刻影响到 应用程序的质量 和用户的使用感受

一个糟糕的设计 可以让基本又明显的交互体验 变成一次不堪忍受 甚至令人尴尬的用户体验

一个优秀的设计 相反地 能把一个令人望而生畏 充满困难的任务 变得简单 友好 并且优雅

即使它内部构造极其复杂

很不幸 优秀的设计永远没有捷径 也从来没有神奇的按钮 可以把各种截然不同的功能 一键整合成用户满意的成功产品 设计不是毫不费力的 它需要时间、努力、 专注和严谨的工作 但是好消息是 让设计变得更简单的方法是存在的 你可以使用不同的工具、技巧以及方法 来消除设计中的不确定因素

帮助你尽快完成一项优秀设计 所以今天 Jon和我将会和大家分享 一些技巧和方法 我们团队在日常设计工作中所使用的 来帮助你找到这些基本问题的答案 尤其是“我们将设计什么？”

“我们从哪开始？” “怎样才是正确的设计？”

首先 “我们将设计什么？” 我们从这个问题开始 因为如果你可以回答这个问题 它能让其它问题都变得简单很多

也许你计划打造一大堆强大的功能 但是你不知道哪一些真正值得投入精力 或者你已经确定了 某一类潜在用户 但是不确定哪一类功能 是这些用户希望得到的 或你已经开发了一个非常棒的应用程序 但是不确定它将要面向的用户 一个行之有效的方法可用来 回答这些问题 那就是定义你的应用 也就是说 找出所有你的应用能做的事

从用户立场出发 分析出对他们最有用的功能

以及那些最符合你 开发应用初衷的功能

以此来决定应用的功能

为了演示方便 在这次演讲中 Jon和我会假装设计一款应用 有多少人去过Caffe Macs？

很好 若没有 Caffe Macs是一家 位于Cupertino的Apple总部的餐厅 它拥有一份轮换的菜单 展示了所有新鲜准备的食物 方便每天在那里就餐的Apple员工 但是有一些人会走去餐厅 排队 点餐 付款 然后回到自己的办公室就餐 为了让这些人就餐更方便 我们将设计一款应用 让这些员工预定自己的工作餐 然后我们帮助递送到他们的办公室 非常棒的想法 首先 善意地提醒大家 你们即将看到许多的食物图片 如果你还没来得及吃早餐或者零食的话 我为此向你道歉

所以 让我们开始 定义我们的这款应用 首先 我们需要确定哪一些功能 是这个应用需要具备的

首先需要包括所有显而易见的功能 我们非常确定需要一份主菜的菜单 关于主菜的细节 和预定食物的功能 但同时 我们需要包括其它基本的功能 收集所有的功能 你认为用户可能想在应用里看到的 也许应用功能还包括 安排送餐时间 查看食物评级

快速下单 宴席承办服务 等等 在这个阶段 所有的想法没有好坏之分 所以 请发挥想象力 记录一切你想要的功能 一旦你拥有了功能列表 先把它放在一边 接下来我们要做的是 找出应用面对的用户 以及他们的具体需求 这会是所有环节里最困难的一步 因为很难让同一个团队的所有人 在确定目标用户的问题上达成共识

但若缺少一致性意见 我们就无法确定目标用户及他们的需求 最终的产品也只会是一个 集合了众多无用功能的大杂烩 或者更糟糕 它花费了大量时间和精力 最后却无人问津 因为定位了错误的目标用户 所以给大家介绍一些简单的技巧 首先 你不等于用户

你只是其中之一 但是如果你只考虑自己的喜好 这种先入为主的想法可能引发偏见 你对用户体验的理解 可能是完全错误的 举例 我是Apple的员工 将成为Caffe Macs应用用户 但是我几乎只吃芝士汉堡

如果让我来设计这个应用的话 只考虑自己的意愿 我会把当日汉堡 放到首页 我一定会这么做 因为我只关心这个 对我来说这就是完美的功能 对其他人却未必如此 有人喜欢沙拉 或者鱼 或者其它任何食物

为自己设计应用 会让你忽略了其他用户的需求 当然 它的对立面也是成立的 你的用户不可能是所有人 因为这样的定位太模糊 不能引导你得出 任何有意义的结论 你无法得知 对于用户最重要的功能 和最具价值的功能 相反的 你更应该去了解 目标用户最基本的特征 其中一个方法是 设想你正在面试一个用户 试图找出他喜欢的功能 不喜欢的 以及他们真正关心的 在这个例子中 我们也许会这样问用户 他们更喜欢现做的食物 还是现成的？ 他们更喜欢悠闲的午餐 还是会议间隙的就餐？ 他们每天都吃一样的食物？ 还是喜欢尝试不同的？ 他们更喜欢健康的食品 还是一切看上去好吃的食物？

试着利用这类问题 找到一些实用的用户特征 然后 从这些答案中找出

最符合你的目标用户的特征 你可以通过直觉或者经验 来帮你完成选择 此外 若你有用户调查或市场调查的数据 你也可以用它们来帮助你做出选择

在我们的例子中 用户可以很方便地走去餐厅 然后挑选一份现成的沙拉或三明治 所以 我们的目标用户是那些 需要快速新鲜而又健康的食物的人

一旦你确定了用户的基本特征 你可以把它们改述为用户需求 所以 我们的用户需求是食用新鲜食物 快速地吃完... 对不起 享受一份新鲜的午餐 快速地解决 尝试不同的种类 以及做出健康的选择 像这样清楚地表达出用户需求 能够帮助你在设计过程中 专注于他们的需求

可是 你的需求怎么办？ 作为一个应用开发者 或者产品拥有者 你的需求是什么？ 你可能会想要用户依赖于你的应用 日复一日 或你想让它成为一个非常好玩的产品？ 或者你想让它效率极高？ 你也需要记录下这些特征 作为你的应用程序目标 它们阐述了 你对应用程序的定位 它们的使用体验 以及如何区别于其它产品

所以我们的应用目标是 提供方便的外卖递送服务 使用户免于亲自去到餐厅 我们将要突出每日主菜 这样用户能够知道 他们拥有哪些选项 同时我们希望Caffe Macs 的顾客感到满意 这样他们会经常光顾

请注意这个列表不包括另外一些条目 提高利润 提高投资回报 或者控制食物成本之类 不可否认 从商业角度来看 这些都是很重要的目标 但是对于我们的设计 并不提供任何有意义的方向 这是因为商业目标描述的是 你希望在应用发布后取得的成果

然而应用设计目标描述的是 你想打造的用户体验的质量

你需要同时了解这两种目标 但是 只有应用设计目标才能启发你 以及鼓励你设计出伟大的产品

好的 最后 为了决定应用的具体功能 我们需要参考第一步提出的所有功能 站在客户目标和应用目标的角度来考虑

我们再来看一下这个列表 浏览每一条功能时 把它们放入这些目标的语境 你能很快地挑选出适合我们应用的条目 所以 除了这些基本的功能 我们还可以添加一个主菜评级系统 来达成我们的客户目标 寻找新颖有趣的食物 用户反馈链接 属于应用目标 它能让顾客更加满意 因为用户能够提出意见 让我们了解他们的满意度

使用同样的方法我们可以排除 那些不满足目标要求的功能 这并不是说它们不好 或者永远不值得被考虑 它们只是不符合当下 我们对应用的定位 所以我们可以暂时忽略它们 在将来的新版本中再作考虑

好 看看我们的成果 现在我们拥有了功能列表 这些简洁明了的产品功能 是基于我们对应用目标的深刻理解 和对客户目标的全面认识 接下来我们将给大家介绍 如何开始进行应用设计 我将把讲台交给Jon

谢谢 Ryan

我们知道了要设计怎样的应用 现在就开始吧 但我们从哪里开始呢？ 我个人的喜好是 从我已经知道的部分开始

也许你还并不知道 完整的应用是什么样 但是也许有一两种功能 你确信将被需要 你可以从它们开始设计 举个例子 如果你要设计一个聊天应用 你可以从对话界面开始设计 因为你知道 许多用户将会 长时间使用这个界面 或者 如果你在设计一款约会应用 你可以从个人资料页开始设计 因为你知道 它占据了用户体验的 一个很大的部分

在我们的例子中 我在设计一个外卖应用 我不知道它拥有哪些功能 但是我知道 我需要设计一份菜单 方便用户订餐

所以我将从菜单页面开始设计

在这次演示中 我将在Keynote里设计UI 你肯定知道Keynote是一个 演示文稿应用 其实它同样是非常实用的UI绘制工具

它能方便地创建界面布局 拥有不同的动画效果 甚至可以生成交互原型 导入到手机上 我们团队尤其喜爱Keynote 我们用它设计几乎所有的应用 事实上 Keynote本身 就是用Keynote设计的

仔细想想

好像根本不可能 但事实是这样 因为Keynote实在太出色了 让我们开始绘制UI

UI是由几个简单元素构建的 它是由形状和线条构成 从顶部的选项栏里插入 我能插入一个形状 插入一根线条 UI也包含文字 我可以插入文字 点击生成文本框

UI还包含了图片 我有一个美食图片文件夹 直接把它拖拽到Keynote里 我可以调整它的大小

很好 我将从形状开始 复制粘贴一个形状 改变它的大小 到375x667像素 因为这就是iPhone 6屏幕像素

把它变成白色 然后居中

所以在短短30秒钟内 我就设计了一个简单iPhone应用

一个手电筒 哈哈

开个玩笑

我将要绘制一个菜单界面 我有一个习惯 使用其它应用的截图 来作为参考 这里有一张截图 来自短信应用 把它拖拽进去 尺寸稍大 因为是retina分辨率 所以我要调整一下大小

然后把它放在我正在绘制的界面旁边

现在这个屏幕截图就在我的界面旁边 我可以用它作为参考 所以我先选择一个形状 来勾勒出我界面的布局 调整这个方框的大小 使它贴合顶部 我在系统偏好里开启了辅助放大功能 所以我可以快速地放大屏幕 确定所有绘制都是像素级准确

很好 现在对线条进行同样的操作

我知道这条线细度为1

再一次放大 确保它处在准确的位置上

非常好 现在我将要多次拷贝这根线条

我暂时不会在意它们所处的位置 我偷个懒 等一下再整理它们

我唯一关心的是最后这一根线

我要确保最后这根线条 正好在我想要的位置上

非常好 现在我可以全选线条 使它们间距等分 向左对齐 这是一条捷径 调整所有线条的位置

噢 好的 这还不是最令人印象深刻的部分

我想改变线条的颜色 可以在这里完成 让它变成灰色 如果要选择某种特定的颜色 可以使用颜色选择器 使用滴管工具 它让我的光标变成了一个放大镜 点击屏幕上的某种特定的颜色 这种颜色将被用作线条的颜色 对标题栏采用同样的操作 我将得到淡灰色

现在我已经画好了界面的大致轮廓 下一步我将要匹配这些文字 选择一个文本框 匹配短信应用里的字体 先输入我想要匹配的文字 你会发现字体和大小都不正确 我知道iPhone的系统字体 是San Francisco 所以现在设置它为 San Francisco 然后缩小字体 好像我想要匹配的文字是半粗体

我可以放大屏幕 确保它们完全相同 很好 看起来非常接近 接着对次级文字采用相同操作

足够接近了 好的

现在我的文字跟截图的文字几乎相同了 这个看起来好像是 有点偏灰色 调整一下透明度

接下来我将给UI添加内容 这里有一份文档 里面包含了各种主菜的名字和具体描述 复制粘贴一部分到这里

调整它的大小

非常好 我们再给界面添加一个标题 匹配这个

看起来它们的大小正合适 非常好 让它居中显示

把它改名为Caffe Macs

好的 现在我已经有适合的文字了 接下来我想要添加一些图片 选择我的青花鱼图片 调整它的大小

必须确保它的大小和形状完全正确 所以我将使用一个形状 把它作为蒙板 调整方块 使它符合我想要的大小

接着 同时选择它们 依照蒙板的形状剪切图片

再微调一下

非常好

现在我的青花鱼图片 尺寸正合适了 我还有其它使用蒙版的方法 我想要跟截图一样状态栏 但我不想绘制它 只需要复制这张图片 双击使用蒙板 拖拽状态栏然后置于顶部 我为自己节省了几分钟的时间 最后是这个小箭头 我有另外一个小技巧 截取我当前屏幕的一部分图片 使用快捷键 Command、 Ctrl、Shift 4 有一点难记 但它很实用 我的鼠标变成了一个照相机 在这个箭头周围截取一个方框 它就被复制到我的剪切版 只要粘贴它

这是一个不太知名的快捷键

很好 现在我得到了一排内容 把这些集合到一起

同样的 我将对它们进行操作 就像我对线条做的那样 我只关心最后一个的正确位置 因为我可以全选它们

间距等分 向左对齐

很好 接下来我只要替换这些图片 复制粘贴更多的内容进去 使它看上去像一个真正的界面 为了节省时间 我在这之前已经画好了界面 所以最后的效果看起来是这样的 所以在仅仅3分钟内 我就画好了界面

我想简单谈一谈 我在这几分钟里涉及的具体步骤 首先我使用了手机截屏作为参考 匹配界面的色彩 大小 和文字 我同时也把截屏剪切下来 用作我自己的UI的贴图 我绘制了一些方框和线条 调整它们的尺寸 多次放大界面 保证像素级完美 我添加了令人信服的UI内容 使用了真实的图片和文字 使得UI看起来更真实

我认为只要多一点练习和投入 任何人都能完成我刚才的简单步骤 现在我把演讲台交还给Ryan

谢谢你Jon 一如既往的好

好的 这即是我们 Caffe Macs的菜单设计 我们已经完成了 对吗？ 看起来已经够好了 满足了菜单的各种功能要求 看上去也不错 我们干脆就此打住 继续设计下一个功能 下一张界面？ 但是我们怎么能确定 第一份设计就是正确的设计呢？

经验告诉我 它可能不是最好的 如果你不尝试其它的设计 你永远不会知道它是否正确

事实上你需要从不同的角度来看待问题 在迭代设计中寻找新的想法和突破口 你也许错过了它们

基本上 你需要不断审视 自己的应用设计 然后问自己 我们怎样才能做得不一样？ 再来看看之前的设计 我们怎样才能做得不一样？ 在这个例子中 我们的设计是基于显示行的 有件事我们可以做 那就是改变每一行的尺寸 增加每一行的高度 可以显示出更少的主菜种类 但是我们能让主菜的图片更大 你也可以增加或减少 界面显示的信息 我们添加了价格

你还可以考虑不同页面布局 调整内容显示之间的留白 也就是调整屏幕显示内容周围的空间 我们在图片周围添加了一些空白 让UI看起来更开放

你也可以尝试不同的字体 举个例子 我们使用大号细体字作为菜名 给价格增加了一点色彩 让它在屏幕上更加突出

充分发挥你的想象力 我们还想 如果菜单里没有图片会怎样 为什么不呢？ 这值得一试 但是我们发现 如果每一行没有一个视觉重点的话 我们需要把主菜的名字加大加粗 让菜单给人不同的感觉 请注意我并没有在评判任何一个设计 我们只是在头脑风暴 试图找出新的思路 我们还可以使用另外一个技巧 180度逆向思维 目前为止所有设计都是面向文字的 如果我们面向图片呢？ 我们得到了一个图片网格 看起来就像一个完全不同的应用对吧

你还可以考虑图片的比例 哪种形状最能适合你的内容 所有图片都是方形的 也许加宽的效果会更好呢 你还可以尝试不同的内容呈现方式 这里每种主菜都显示在 一块磁贴或是一张卡片上 这样能让它们区别于彼此

回想一下你都是如何利用屏幕空间的 这些图片都是边缘相接的 最有效地利用了iPhone屏幕 在这个布局中 为了更好地显示文字 我们把它们叠加在图片上 创造了一种完全不同的视觉风格

请记住 没有人限制你使用 整齐的网格或者行列 你可以调整内容的尺寸和比例 来生成完全不同的效果

可以结合不同创意创造全新的方案 看看这个照片边缘相接的样式 把它和列表布局的样式结合在一起

思考一下应用的沉浸感 这些大图片主导了屏幕 鼓励用户花费更多时间来浏览它们

如果你的文字非常重要 请确保它们的易读性 确保那些拥有视力障碍或者色盲的人 能够看到每个重要的细节

最后 把这个大图片的想法发挥到极限 这样它就几乎占满了整个屏幕

现在竖直滚动会让人不舒服 相反的我们使用左右滑动 只需要滑动切换主菜种类 思考一下内容浏览可以使用 哪些不同的导航规则

好的 除了最早的设计 这里还有11个可供替代的 它们都是由Keynote绘制的 你需要做的只是不停的问 我们还能怎样做得不同？ 直到你尽可能想到所有的 有趣的替代方案为止

你可以尝试使用不同的布局 来规划你的内容 调整文字的大小、颜色、 粗细以及字体 调整内容的显示比例 增加或者减少屏幕的显示内容 使用180度逆向思维 以及把想法推至极致 考虑使用不同的内容导航规则

所以 下一个问题是 这些设计里有适合我们应用的吗？ 我们还不知道

这一步需要你和你的团队 一起来评判这些设计 这会是很有趣的过程 你需要暂时抛开骄傲和自尊 忘记你绘制这些原型花费的时间 让自己站在第三方的位置上 来评价和批判你的设计 寻找它们的长处和短处 找到最好的那一个 要做到这一点 你需要细察每一个设计 提出一些困难的问题 比如说 这个设计多大程度上 满足了用户的目标？ 多大程度上 满足了你自己的应用目标？ 它满足你对这个应用的定义吗？

它能为用户提供正确的信息吗？ 有没有足够的内容支持用户进行操作？ 它方便阅读吗？

互动性强吗？ 应用的交互方式 用户熟悉吗？ 应用界面上的术语 用户理解吗？ 基于他们的经验和知识

最后 这个设计让你感觉正确吗？ 即便它满足了所有的标准 并且客观上来说是一个好的设计 但是它真的是你想要的那样吗？ 它拥有你想要的个性和外观吗？ 这和其它所有标准同样重要

这些问题都非常主观 你很可能遭遇各种反对 来自你的的同事们 甚至是你自己的 但是提出这些问题 并且诚实地回答它们 能够帮助你找到正确的设计

Jon和我将给大家演示一下这个过程 我们将在你们的面前 批判这些设计 从而找到最适合的那一个 我们先花点时间思考一下

Jon你怎么认为？ 横向地比较它们 很明显有一些设计更出色 所以我认为我们应该先清除其中几个 好的 让我们去掉A 第一个设计 它很好 但还是不如其它的设计优秀 好的 让我们再去掉D 它没有任何图片 看起来有点奇怪 对的 一个美食应用 我们需要图片

我们再去掉E 它的图片太多了 看起来非常拥挤 并且给出的信息也不足 是的 我认为我们可以去掉F 它呈现的信息有点太多了 并且它的视觉布局有些太匆忙 主菜的名字被裁掉一部分 这很不好 -很好的观点 -我认为我们可以去掉I 这些图片的比例很有趣 但是你并不能看到足够的食物细节 来判断它到底是好是坏 -好的 -接下来是L 尽管我喜欢大尺寸图片 但是翻阅12到15份不同的菜品 有一点令人乏味 我认为我们也该去掉它 我同意

很好 现在我们只剩下6个了 进度不错

是的

没有用到很长时间 好的 我们再从细节方面看看剩下的这些 对比这两个 它们其实很相似 它们的功能非常相似 我认为选项B更常规一些 也许用户更希望 在iPhone上看到这样的菜单

而且我喜欢边缘相接的图片 我觉得非常好看 事实上我更喜欢选项C 它更有趣一些 我喜欢它偏细的字体 我认为它符合当下的潮流 所有信息都居左显示 这一点也很棒 用户很容易就能滚动页面 查看名字和价格 我喜欢它带来的感觉 更加开放 更加新鲜 是的 我认为这都是很好的观点 -谢谢你 -谢谢 你说服了我 好吧我们去掉选项B

顺便说一下 我们都在即兴发挥

这两个看起来也非常相似 它们都有边缘相接的图片 G拥有网格布局 然而H更像一个便当盒 我非常喜欢 我非常喜欢H 它有许多不同的尺寸和多样性 让人感觉很有趣

是的 H看上去很酷 但是我认为它有一个致命缺陷 也就是 某些菜式看上去比其它的更重要 就好像 我们特别希望 你会购买烤青花鱼 事实上并非如此 这些都应该是平等的选项 我认为如果我们喜欢这样的风格的话 G会是更好的选择 它很好地平衡了这种边缘相接的风格 和应用本身的功能倾向性 我还是很喜欢H 但是我认为你的观点很有道理 -是的 -我们该选择G 非常公平

好的 在这两个之间 我个人非常喜欢J 我对这种边缘相接的风格 情有独钟 同时它还让我想起了美食杂志 我认为这是一个很酷的风格 Ryan 我们不是在设计美食杂志 我们在设计一个外卖应用 在J上你甚至都不能看到文字 我喜欢K 更好地平衡了 图片和文字 它看上去跟主题更有关联性 也更加开胃 好的我知道你的意思了 你给了我H 我也给你K -是的 -好的 妥协

好了现在我们只剩下前三名了

你怎么看？ 它们看起来都很棒 但是把它们横向比较的话 我认为很明显能看出 G就没有那么优秀了

这些文字描述非常有用 告诉用户这是什么食物 G在这一方面十分欠缺 是的 把它们放在一起看 我觉得你是正确的 即使我喜欢边缘相接的图片 我认为拥有文字描述 更多的信息会让体验更好 我觉得我们应该去除G 好的 我们现在只剩C和K了 短短几分钟内我们成功缩减到两个选项 非常棒 这两个从功能上看很类似 它们看起来都很棒 同时也有不同的风格 它们之间我并没有一个特别的偏好 你觉得呢？ 是的 我也没有 它们看起来都很棒 好吧 我们事先也担心出现这样的情况 也许你们能帮助我们 有了这些标准... 你们已见过我们如何批判自己的设计了 对照这些标准 请用掌声 告诉我们谁更喜欢C的设计？

好的 接下来 谁更喜欢K的设计？

我认为K是赢家 很明显 这就很好办了

恭喜K最终获选 干得漂亮 所以我们整个设计团队都认可这个选择 K融合了功能性 高效率 以及我们希望这个应用所拥有的特质 我们终于找到了最适合的设计方案 是的 我们已经上路了 但是一张界面还不是一个完整的应用 我们还需要弄清楚 这个应用应该怎样工作 为了给大家更详细地介绍 我将请回Jon上台

谢谢

我们需要设计出一个工作流程 一个工作流程是 完成任务所需要的一整套步骤 在这个例子中 应用的任务是预定午餐 所以让我们回到刚选好的设计方案

我需要遵循之前的建议 从我了解的开始做起 我不太清楚这个应用可以做什么 但是有一件事我很确定 如果我点击任何一种主菜 我希望能看到关于它的更多信息 所以我要设计一个信息界面

看起来大概像这样 好的 接下来 我可能还要添加一种订餐方式 我添加一个预订按钮 暂时先把它放在屏幕的底部 非常棒 如果点击了这个预定按钮会发生什么？ 我不知道

也许我能直接完成预订 然后让用户知道这已经完成了 这就是我设计的工作流程

看起来很不错 我认为它很好的完成了订餐的任务

但是当我再看它的时候 我发现了一些问题 它缺少了一些我们谈及的功能 你不能改变订单内容 递送地址 或者递送时间 感觉有点奇怪 现在重新看它 我认为下单动作完成得太突然了 当我点击了预定按钮 我就已经花了10美元 在这期间应该有一个选项 让我可以撤销订单

所以我认为这个工作流程还可继续优化 我们再试一次

在许多应用中我都见过 一个购物车模式 我将要在我的应用里借鉴它 在右上角添加一个购物车图标 现在如果我点击食物 我将看到一个加入购物车的按钮 点击它 这个按钮会反馈说 已经被添加到购物车 图标也会相应地告诉我 里面新加入了订单 这看上去是一个很常规的操作 非常棒 我认为用户会知道怎么使用它 现在如果我点击购物车图标 我可以给用户展示订单汇总 在这里他们可以更改选择 以及得到确认信息 他们将花费11.68美元购买食物 如果我点击下单 我可以向用户显示订单完成 并展示相关信息

现在 我的工作流程看起来像这样 它解决了我刚才提出的问题

它让我知道订单的细节 它也不会让下单过程太突然 用户知道正在发生什么 我认为这非常棒

但是我认为这个流程还没有做到最好 它包含了太多的步骤 仅仅只为了简单地预定一份三明治 我认为我还能把它变得更简单 我发现 我重复了一个步骤 菜单界面可以很好地 向用户展示食物信息 也许用户完全不需要再进入细节页面 来决定他们要预订的食物 用户也许可以直接从菜单界面 决定他们要预定的主菜 所以让我们来把工作流程变的更简短

我把购买键直接放到菜单界面上 因为它已经包含了足够的信息 现在如果用户点击这其中一个按键 我们依然保留购物车模式 但是不同于在右上角显示购物车图标 它现变成了这个 从屏幕下方浮出的小托盘 在这里显示出订单信息 甚至于让用户直接在菜单页完成订餐 他们还可以向上呼出托盘页面 查看订单的全部细节和其他选项 很大程度上我们已经完成了任务 用户可以看到足够的信息 来决定是否完成订餐 事实上我还能继续优化 如果用户点击了预订键 我可以利用同样的托盘栏 显示订单确认状态

现在 我们的工作流程是这样的 它包含三个步骤 但是让人感觉更加简单 因为所有的操作都能在菜单页完成

它依然拥有之前设计的所有功能 但是所有的选项都被移到托盘栏里 而不是将这些步骤强加给用户 看起来非常棒

我认为这个工作流程非常成功 它成功完成了订餐任务 还缩短了订餐时间 请注意我设计的思路 我遵循了相同的原则 如我之前提及的那样 我从自己知道的开始做起 然后不断地评估和迭代 直到我自己满意为止

现在让我们来总结今天的演讲 让我们请回Ryan

谢谢你 Jon 我等不及想用上我们的虚构应用了

好的 我们只有几分钟时间来总结 我希望我们向大家成功阐述了 几个重要观点 首先 “做出好设计不容易” 不可否认它们充满乐趣 但会耗费时间精力以及不断的自我审视 使用我们分享的这些方法和技巧 能让这一切变得简单一些 如果你正在确定应用的设计方案 请先定义你的用户目标 以及你的应用目标 参照它们来选择需要的功能

若你知道了应用设计方案 但却不知道UI应该怎么设计 没有关系 先从你知道的做起 在此基础上不断增加 如果你在开始前不知道全部系统的设计 这没有关系 这可能是我们的偏见 试一试Keynote 你们也许会喜欢上它

要找出最合适的设计 请尝试尽量多的思路 不要在第一份设计后止步 它可能还不够好 批判你的设计 寻找最能满足你用户的目标 和应用目标的设计 不断地评估和迭代 直到你感到满意

我们希望你们能运用这些技巧和方法 在你们的日常工作中 给自己充分的时间来 计划 完成 和批判自己的设计 它值得你的投入

你可在此处找到本场演讲的更多信息

也请大家查阅这些相关演讲 它们非常精彩 我想现在已经上线了 谢谢大家的到来