产品设计十四步

今天的译文中,一位生活在伦敦的设计师 Jan Losert 总结并分享了自己在产品设计过程中的一些方法与技巧,共四个部分——产品设计前、中、后三个阶段,以及一些如何提高产出率的技巧。文章实操性很强,具有启发性。下面进入译文。

产品设计十四步

Jan 总结的产品设计的四个部分

设计前的准备

1. 画(头脑风暴)

不管是画在纸上,记在笔记本上,或者写在任何一小块东西上,我需要点什么来分享我脑子里的想法,我需要把他们记下来以免忘记。这也导致了我的银行信、餐馆收据、书本封面各种能写写画画的地方都留下了我的草稿。

产品设计十四步
Jan 的头脑风暴笔记

我喜欢记在能摸得到的东西上,比如记在我的 Moleskine 笔记本上。记录在这样一个小本上对我之后再次反复翻看很有帮助,当需要开始某个项目,需要不同点子的时候,我常常回头看看曾经记录的想法,是否可以改造、延伸或者根据它们重新创作。

2. 收集好图

产品设计十四步
『艺术家也是收藏家』

这个环节的另一个关键词就是「收集好图」,这是我每天做的事儿。当然集图看图的方法多了去啦。我偏是个保守而传统的人——用 Dropbox(译注:百度云等网盘的爸爸)文件夹将图片分类(Dashboard,iOS,插画等等)。当要做一项调查或者拿到一个项目时,我就会去过过那些图片,找找灵感。Dropbox 会将低画质的预览图先缓存到本地,所以不联网也能看。

3. 资料来源与准备工作

能给我们提供灵感的网站有很多 —— Dribbble,Behance,Pttrns,Pinterest等等,而且很容易能找到和你手上类似的项目,并或许能帮你解决当前正面临的问题。

产品设计十四步
文件夹结构 —— PSD、截屏、资料、灵感

所以当我开始新项目的时候,我通常会准备一个默认文件夹,其中包含四个子文件夹—— PSD,截屏,资料和灵感。在网上找到的任何与这个项目相关的东西,我都放到「灵感」这个文件夹里。

Behance 是个不错的网站,小到界面色板大到完整的项目,基本什么都能在这找到。比如某个 app 已经存有用户资料了,有时还会放一些魅力用户的照片。不过有时候我也可能根本就不用这个文件夹,但那就是另一回事儿了。

设计中的细节

4. 我不在乎线框图的质量

我不是画线框图一画画半年那一派的,我甚至更希望客户能给我准备好一个线框图。

好的客户是那些在纸上已经备好了想法的人。

我认为线框图是为了理解所要达成的设计目标,而不是为了呈现最终成品。最终成品关系到你如何来展现你的界面、如何用技术和想法来体现用户体验。线框图能够帮助你来设想这个项目需要多少屏来实现,并理解客户的想法是什么。

对于设计师来说过于细致的线框图很可能会成为你的噩梦……当某人只想复制画好的流程图然后揪住其中一些小的细节……那是猴子干的事儿可不是设计师干的。在这种情况下,每个设计师最好赶紧做完项目中你的部分然后开溜,跑的如博尔特君一样!(译注:尤塞恩·博尔特:牙买加短跑运动员,被认为是世界上跑的最快的人。)

5. PSD——使用大画板(像在 Illustrator 里那样)

当我 7 个月前开始为 Badoo 工作时,我观察到我的同事 Sasha 是如何工作的,我当时想他应该是不会用 Photoshop。然而,现在我也开始学着像他那么用 PS 了!我发现他工作的方式对我来说还真的很有效。尤其当做一个比较大的项目时,比如,一个网页应用或者一个复杂的仪表盘时,这个方法特别管用。

一般来说,我会使用一个 8000*5000 pixel 的大画板,我的工作不外乎就是设计一套大的 UI 控件。使用大画板工作起来特别有效率,因为我能够同时看到所有的控件,且能很清楚的看到每块的细节。这样一来给程序猿们做一套控件截屏或者做某单控件的局部截屏也是相当快的。

6. 把所有界面都做进一个 PSD 文件里

一般如果不是那种非要弄点革命性的创新或者非要与众不同的情况下,我要是做一个手机 app,通常会让自己进入多次元的极端状态……也就是说,我会把设计的所有界面都放到一个 PSD 文件里(比如下图的那个文件夹 14 里,还包含着 12 个不同的图形设计……自己体会)。

产品设计十四步
PSD 里的图层

我知道这种情况下其实用 Sketch 会好很多,特别是对工作会很有帮助。但我就喜欢大、一、统——以一抵四十,因为这样真的是神快呀,一个屏下的某个控件复制粘贴到另一屏下或者文件夹里就是分分钟的事儿。这也就是说,如果我在顶层几栏里改变背景或者是几个 icon,我不需要在几百个 PSD 文件里重复工作几百次。

7. 文件夹整理的礼节

从各方面来说我都是一个巨整洁的人——我桌面上有一个图标,文件夹以客户和项目分类布好,每个文件夹的结构都像我上面说的那样,PSD 文件也如上所述。我的每个 PSD 也都整整齐齐的分类放在每个文件夹里。我使用这样一条准则,就是如果我的文件夹里所包含的超过八个图层,我就会再新建一个文件夹。我怀着一颗为他人整理文件的心来整理我自己的 PSD 文件,不过一般我不会用很多时间来给各图层命名,因为我打开每个文件夹就能很方便的找到各个图层。

不过最近当我开始和 @LukášKus 工作时,他常抱怨说他在AE里面没有这些文件夹,所以特殊情况也要特别对待。

如果你想知道如何更优雅的整理PSD,请戳 http://photoshopetiquette.com/。

8. 与朋友沟通

有一群能提供有价值的反馈的朋友圈对我来说至关重要。通过他们,我能很容易的开展小型用户调研,听听来自于他们对这些问题的想法,找到解决问题的其他方案,或是打开一个新的视角。当我的项目或界面设计进行到的每一阶段时,我都会开展这样小型测试。何况,你测试谁并不重要,可以是任何一个人。我更倾向于结合两个方面——来自于你所在团体中的用户体验设计师和普通用户。这是因为,你的设计是做给普通用户的,而不是专门做给设计师或者用户体验专家的。

9. 图表

当我的客户或者我自己准备好线框图时,我更倾向于将他们融合到一个 PSD 文件里。然后,我开始设想交互的过程,我点完这里点完那里会发生什么。通常在这样总体梳理过程中,我们总会发现之前我和客户都没有注意到的遗漏的某些屏、甚至是错误。当专注于某个界面做线框图时,特别容易造成这类疏忽。于我来说,我不认为做「预原型」是一种重复工作,而实际上是对设计中所有的界面与元素的一个总览。比如当做一个有 15 屏以上的项目时,我很难保证在设计整个 app 时所做的风格样式从始至终都保持着一致,我很容易做着做着做着就不太一致了。

产品设计十四步
三种不同样式的线——第一条是常规线连接编号为8的屏;
第二条是在 app 中的连接;
第三条是连接到外部 app 或链接时。

产品设计十四步
连线示例

产品设计十四步
完整的预览图

关于样式——与大多数设计师相似,我会在设计中使用同样的样式。不过并非花大量时间在整个画板上画这样的线,我会使用圆圈和屏编号。这有点像我最近读的一本游戏书,但相较于那种类似在面包板上画电路图的画法,这种方法更胜一筹。

设计后的规范

终于快讲到最后啦,最后一个部分说说规范的设定和视觉统一性的最终检查。对我来说,无论小项目大项目这都是至关重要的一个环节。通常,当我在做一个大项目时,我都想在这一环节里稍作修改,我其实不确定我是不是把这里的每个细则都改过。我用这些规范准则来让自己和程序员们确定在设计中没有出现 50 种不同的灰度亦或是 14 种不同字号的字。

10. 颜色规格

颜色规格是我记在脑子里的第一件事儿。在设计扁平化的今天,要尽可能使用更少种类的颜色来表示按钮和文字。准备一个规格颜色的 PSD 文件会非常有用,就如上图这种类似画家调色盘一样的色板或者说像 Photoshop 里面用到的色板。

产品设计十四步
颜色规范示例

11. 文字规格

另一个让你想起有关 logo 规格的就是 app 中关于字体的大小(size)、字重(weight)这些文字方面的规格。同样的,这些规格是写给程序员看的,但你也需要总览一遍。

产品设计十四步
文字规范

12. UI 控件

UI 控件对于公司 app 和网站的风格一致性上起着重要的作用。如果你所在的团队中有好几名设计师,好几名前端工程师,大家在交叉工作时选用同款 UI 控件是非常重要的。如果准备好这样的一套 UI 控件,我就可以在我需要的时候随取随用。而且,程序员也不会过来问问问,因为他可以很方便的看到鼠标悬停在某按钮上的效果。

*注意: 这一点是我在和一家大公司合作的时候意识到的,这么基本的常识居然人家告诉我没听说过……同一段 CSS 写了擦擦了写……然后呢,然后同一个按钮在三个 app 上长的都不一样。你说,一致性这事儿你怎么能这么不认真呢。*

产出率

13. 待办事项

我前面说过我是一个整洁的人,这不得不提到我的待办事项簿。你用什么 app 或者用纸来记都不是大问题。我喜欢用 Cultured Code 这款应用(肯定是个有文化的程序员开发的)或者有时候就用一张纸。那种把待办事项上所有事项都打钩的感觉棒极了!我有时候有点强迫症,总是想把邮箱里接的所有活一气儿全做了。不过现在我知道了,与其同时开展五个项目,不如还是全神贯注于一两个项目,做完之后再做下一个。

有句俄罗斯谚语说:如果你同时追两只兔子,那么你哪个也追不到。

14. 目标

如果你知道你想达到什么目标当然是极好的,但也不必要太纠结在这一块。我给自己制定了 14 天的目标(类似一个短跑比赛)和季度目标。此外,我尝试在制定目标的时候让自己有一些新的体验(比如:在 After Effects 里面做我的第一部动画),并同时让自己能够完成当前的工作(做完 2 个 Behance 的案例学习)。

还有啥?

译注:前方高能,请自行搜索这些工具。

额……我不用鼠标,只用触摸板。我不开工具栏,(咳咳……)快捷方式烂熟于心。我用 Skala Preview 在 iPhone 上预览 Photoshop 的效果图,然后我想学 After Effects 还有 Sketch。至于画原型的软件,我使用 InVision 做基于 Web 平台的设计,使用最新款的 Marvel app 做 iOS 平台的设计。对于我来说,用笔直接画会比在 iPhone 屏幕上拖来拽去的快多了。我有时候还会使用 Pop app 做一些初期原型设计,比如当我在地铁里闲着能点点屏幕的时候。

还有最后几句

我真的很难保证我做每个项目的时候都完完全全按照上面所说的整个过程做下来,因为有时候我可能就直接跳过几步,或者我直接就开始在 Photoshop 里面画脑子里想的。

以我的经历来说,我在用户反馈、可用性测试等这类事情上并没有丰富的经验,但我仍然认为它们非常重要。特别是可用性测试,它们将用户的实际使用情况展现在我们面前,这常常与我们所设想的完全不同。

  • 产品设计十四步已关闭评论
    A+
发布日期:2015年09月22日  所属分类:产品经验