主页 > L生活城 >你应该知道的产品设计14招 > 正文

你应该知道的产品设计14招

你应该知道的产品设计14招

我在 Dribbble 上发表作品之后,收到了许多积极的回应和提问,促使我动笔写这篇文章,和大家聊聊我做产品设计两年多来经历和思考。

说来惭愧,在产品设计上我始终沿用同样的设计流程,不过在我看来,这套流程确实接近理想状态。我将这些技巧划分为四个部分:事前準备、工作过程、后置作业、效率技巧,接着让我来一一解释。

你应该知道的产品设计14招
事前準备1. 绘製草图

绘製草图其实不用太讲究,用一张纸、一本笔记本都无所谓,哪怕是手边的传单都可以,最重要的是要将脑海中的想法诉诸文字、图像,确实记录下来。唯有画出来,才能真正记住它们,不被遗忘。因此,我们可能需要保存一堆记录着点滴灵感的报纸、账单、杂誌封面甚至餐巾纸。

你应该知道的产品设计14招

不过对我来说,最理想的记录工具还是实实在在的东西,例如 Moleskine 笔记本。我喜欢不时翻看我记录其中的想法和灵感,如此我便能回顾过去的想法,并藉此调整甚至重塑当下手边产品的设计思维,或者延伸出更多的想法。

2. 搜集图片
你应该知道的产品设计14招

事前準备的第二阶段是搜集图片,这也是我每天都做的事情。数以百计的风格、成千上万的图片充斥网路,但是我特别喜欢的还是老派的风格。我会在 Dropbox 中为这些图片分门别类。当我开始执行专案的时候,会透过这些图片来寻找灵感。Dropbox 会预先同步好所有图片内容,因此不需要网路你也能随时随地查看这些图片。

3.Moonboard 与準备工作

我们可以透过很多网站获取灵感-----Dribble、Behance、Pttrns、Pinterest 等等,我们常常可以从中找到别人做的类似产品。此外,也许别人正试图解决与你同样的问题,因此,你也可能从中受益。

做好 Moodboard 很重要。

什幺是 Moodboard?Moodboard 是指经由对使用者与产品认知的色彩、影像、数为资产或其他材料的蒐集,可以引起某些情绪反应,作为设计方向与形式的参考。

当我开始一个新专案的时候,我会準备一个文件夹来收纳相关资料:PSD、截图、灵感以及各种资源各有一个文件夹。其中「灵感」文件夹就收着我从网路搜寻来的、与专案相关的所有文件,用来激发我的灵感,这就是我的 Moodboard。

你应该知道的产品设计14招

这个文件夹里应该包含从基础色版,到 Behance 上完整的案例研究等各种类型的讯息。如果这是一个涉及使用者讯息的 APP,那幺你应该得要有吸引人的人物照片。

工作过程4. 我不在意线框图的品质

我不是那种花费大半年来绘製线框图原型的人,如果客户能预先準备线框图就再好不过了。

好的客户会準备好自己的想法和思路,甚至画在纸上。用线框图原型举例,并不代表它是最好的方法,我想强调的是深入了解产品本身非常重要。设计师的 UI/UX 技能、想要表达的想法与设计师本身才是决定最终产品的重要因素。藉由线框图,你可以了解客户的想法,也更清楚产品本身。

有种情况绝对是设计师的噩梦:客户希望将线框图一比一等比例地输出成最终产品,丝毫不改。当你碰到这样的要求,儘快完成交付,然后远离这个产品,赶紧划清界限。

5. 大尺寸 PSD 背景

七个月前我刚开始在 Badoo 工作时,看到同事的工作过程就在想,他恐怕完全不懂

在建立新的 PSD 文件时,基本上我会将背景设置成 8000×5000 像素的大小。要知道,我不只是建立一套 UI kit,在大尺寸背景下工作时我能看到每个元素相互之间的搭配,体会每个界面状态的差别。此外,用这种方式来设计,还能轻易地截取小图或某一状态/阶段下的产品图片给开发者。

6. 用一个 PSD 收纳所有界面

当我做一个普通的 APP 界面的时候,我也会用到其他 APP 的 UI 界面。这个时候,我更喜欢其他所有的界面都存在于一个 PSD 中,即使它们不是统一个产品的。

你应该知道的产品设计14招

我很清楚,这种情况下先用 Sketch 会很有帮助,但我更喜欢使用

7. 文件夹与规範

我的桌面上只有图示,每个专案每个客户都有单独的文件夹。每个文件夹都是照着相同推责整理内容,就像我的 PSD 图层结构一样。我的每个 PSD 结构都非常有条理,整理它们的时候,一旦发现一个文件夹的图层超过 8 个,就会新增文件夹,将不同属性的图层区分、归纳。我会将 PSD 图层整理得井然有序,彷彿随时欢迎别人检阅一样。我不用为每个图层单独命名,因为任何人都可以轻易地透过我的文件夹名称和架构来了解每个图层的功用。

8. 与朋友交流

朋友们对产品设计的反馈,对我而言是相当重要的讯息。我可以轻易地建立一组小型的使用者测试,并且倾听朋友们反应它们碰到的问题,以及修改意见。这些想法常常能为解决问题开拓思路并打开一扇全新的们,我会在产品开发的各个阶段进行这样的测试,获取反应。此外,这种测试大家都可以参与,不过我通常会将受测者分为两个类别:UX 设计师以及一般使用者。主要是因为产品使用者通常是一般使用者,而非设计师。

9. 介面设计

当我或客户準备好线框图原型之后,我更倾向将它们合併到一个 PSD 文件夹。接下来,我会确认介面中的细节,点击不同的地方会产生什幺效果。在这个过程中,我们常常能发现缺失的环节和需要补充的介面,以及其他的错误,这些都是客户和我们最初考虑不周的地方。如此一来,我便可以将所有的介面和元素放在一起,综合起来看。当我面对一个有 15 种画面的 APP 介面设计图的时候,就会发现让他们保持一致风格是一件很难的事情,最初的设计準则也因此需要调整。

三种不同的标示线,第一种是带数字标示指下一画面的,第二种是画面内指引线,第三种是指向外部程式和链结的线。

你应该知道的产品设计14招

包含关係人的预览图

你应该知道的产品设计14招

完整预览图

你应该知道的产品设计14招

关于样式——我所使用的原型设计样式和很多设计师差不多,但是比起耗费大量的时间去绘製複杂的指引线展示互动过程,我更愿意使用代表下一画面的数字标示和简单直观的指引线来展示我的设计。这种方式有点像过去的游戏说明书,但是它比起印刷电路板般的的指引线地图好多了。如此一来,你便可以在整张图上看到更多有效的讯息。

为此我附上 PSD,让大家更容易理解我的想法。

后置作业

终于接近尾声,最后一个部分是建立设计规格,检查并确保视觉一致性。事实证明,这个环节是过程中极为重要的部分,无论产品专案是大是小。在大型专案中,如果要改变某些元件的属性,通常无法百分之百确定是不是把所有相关元件都改正了。有了设计规格之后,我们就能确保 UI 中不会出现 50 种不同浓淡的灰色和 14 种不同尺寸的字体。

10. 色彩规格

建立色彩规格是设计师该谨记的首要任务。在扁平化设计盛行的今日,我们终于可以尽可能减少为按钮和文字设定色彩规格。你可以在 PSD 中建立类色

你应该知道的产品设计14招
11. 版面规格

另一个重要规格就是版面样式和字体的规格。将每个应用到的字体、大小、粗细、字距、行距等规格明确地标示在 PSD 中,这将大大地减轻设计师和开发者在规格化上的负担。

你应该知道的产品设计14招
12.UI Kit

当讨论 APP 与网站一致性的时候,UI Kit 就显得极为重要了。同时,如果你身处设计师团队中或者与前端工程师协作的时候,UI Kit 同样是不可或缺的。有了这份标準化的文件,设计师可以随时随地抓取 UI 元素建立新的介面,而前端工程师也能清晰地了解每个 UI 元素的样式,不用每遇到问题就跑来问设计师了。

值得注意的是,很多大公司依然未曾注意产品的 UI 元素一致性的问题,CSS 样式一次又一次地重写,你会发现同一个按钮在三个不同程式中有三种截然不同的说明,设置截然不同的样式。因此,千万不要忘记保持一致性。

效率技巧13.todo

我保持一切井然有序的祕诀在于使用 todo list。使用什幺样的 APP 并不重要,重要的是执行。我喜欢 Cultured Code 开发的效率工具 Things,偶尔也喜欢用纸张记录各种待办事项。完成所有待办事项的感觉很棒。我曾经沈迷于接手所有寄送到我信箱的专案,但是现在我才发现,最畅快的还是一次专注于 1-2 个专案,并且 100% 地完成它们之后,再开始新的专案,这比起同时与 5 个不同专案奋斗来得更有效率。

14. 目标

明确知道自己的目标是好是,但是千万不要因而受到束缚。我会为自己订定两週计划,并且定下季度目标。同时,我会让自己尝试新的事物,并设定可达成的目标,同时不断精进手边的专案直到完成。

What else?

我不使用滑鼠,只用触控板,并且学会所有快捷键。我使用 Skala Preview 将

最后几句话

按照上面的流程来处理每个专案的确有难度,因为当有些产品一开始就有想法和思路,我会跳过上面的某些流程直接开工。

在我过去工作的公司里,我从未体验过真正的讯息回馈。设计师能从使用者测试和讯息回馈中了解更多并从中受益,这些讯息能促使他们思考新产品,完善旧有产品。尤其是在使用者测试的环节,设计师收到的回馈会改变他们对于产品本身的认知,因为设计师终将发现,许多一般使用者根本不会照着设计师的设计来使用 APP。

欢迎加入「Inside」Line 官方帐号,关注最新创业、科技、网路、工作讯息
你应该知道的产品设计14招
你应该知道的产品设计14招

相关阅读