文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

在作为产品设计师和仪表板设计师的4年中,我学到了什么。

Computer workstation

在过去四年中,我一直设计仪表板和应用程序,我学会了同不同部门打交道,利用他们的知识以使产品的设计更好而且更高效。

今天,我将分享我学到的所有步骤,并将其纳入我的日常生活中。我相信这些步骤都有助于使我成为一名更好的设计师,我希望你们也会觉得它们有用。Six steps - 1 pre-process. 2. Low fidelity 3. work /design 4. Assets & delivery 5. Finalise and Test 6. After design

 

1.预处理

尽可能获得更多的信息(请给出三个例子)

第 1 段(可获 1.28 积分)

对我来说,没有什么比看到一个真正的工作例子更能让我清楚明白。当我与一个新客户合作时,或者忙于一个产品的全新登陆页面,我发现要求客户提供三到四个鼓舞人心的页面最为容易,因为这真的对双方都有帮助。

让您的客户将想法输入到表格中,您可以轻松的了解到他们喜欢什么,以及他们对成品设计的期望。

如果你与多个团队合作,你应该在产品的开发人员上花尽可能多的时间,和与你同事的设计师一样。 在Tapdaq工作期间,我学会了做出有效设计决策的关键是确保您尽可能多地与开发团队沟通。

第 2 段(可获 1.71 积分)

就我而言,遇到问题总会有一个解决方案,这种情况下,我并不能自己拿出解决方案。我想说我们的目标是尽可能多的解决问题,之后才会进入发展阶段。

了解角色模型

起初,我必须承认我对角色模型有所怀疑,但现在这一切对我都有意义。

因此,与我的旧的工作流程完全不同,我在研究产品功能时,可以看到角色模型是多么重要,尤其是在解决方案中有许多不同的边缘情况时。其会帮助你理解你到底是在为什么而设计。如果有可能的话,我的目标是有四到五个角色模型。最好是有基于实际用户的角色模型,因为无论是与他们通话或者是面对面,这可以在与他们聊天或演练你的解决方案时帮助你识别问题所在。

 

第 3 段(可获 1.86 积分)

Persona Template 

角色模板 — 在这里下载: http://janlosert.com/persona-template.zip

设定准确的目标 – 我们到底应该跟踪什么?

我认为大多数设计师/客户都忽略了这一步,但对双方设计来说,最重要的一方面是了解您正在设计的产品的目标。我们往往会直接跳转到像素并迅速使项目的用户界面更具体化。如果它是一个全新的网站或新的功能,一定要设定明确的你想要达到的目标。

由于一切都是可跟踪的,你要讨论所要跟踪的确切点。例如,这些可能包括从新注册到使用Paypal与使用信用卡购买的预期数量的客户。你总是要确保你知道你的目标在一开始的高度!

 

 

 

 

 

 

 

 

第 4 段(可获 1.7 积分)

P.S - 稍后您在这个过程中还需要在Mixpanel中设置渠道。

Project Structure

项目结构

建立项目文件夹,开始收集样板

有很多网站会给你灵感 - Dribbble,Behance,Pttrns,Pinterest等。你真的很容易找到类似项目的工作。此外,对于你正在经历并试图解决的问题,可能已经有一个解决方案。

在我开始一个新的项目时,我总是设置一个文件夹名为——源文件,荧光屏和输出,灵感和资源。我把我在互联网上找到的所有东西保存到我的“灵感”文件夹中,以备以后在基本样板中使用。这个文件夹包含任何东西,从插件,色板或甚至是来自Behance完全案例研究。

 

 

 

 

 

第 5 段(可获 1.64 积分)

2.低保真

白板

如果有人记得,我并不在意我之前一篇文章中的线框图的质量。我现在使用的方法如下:

如果我们想添加一个新的功能或重新设计一个程序,在会上我们坐下来,每个人都开始在白板,纸上,甚至iPad上绘制想法。这种做法让我们把每个人都置于设计师的位置上。之后我们最终会有两个设计选项,看看哪一个是最好的。

在这过程的一部分中,我们总是试图通过整个体验来讨论大多数边缘情况。现在解决它们是非常重要的,而不是在设计阶段,甚至更糟的是在开发部分。这种情况会让你失去很多时间和精力。

 

第 6 段(可获 1.86 积分)

绘制出所有的屏幕信息(用户需要输入的数据)

超越白板就在此刻,并列出所有使用者的输入以及叙述。将用户应该在什么时候插入到特定屏幕中,以及用户如何实现期望的目标写下来。

写下所有可能的状态

由于所有的仪表盘,应用程序或者网络的形式拥有不同的状态,这是你不应忘记的重要的一个步骤。

在设计时,我们需要确保解决所有问题。我们的草图文件以及PSD文件中有闪亮的图形以及冷却降温图片的话真是太好了。然而,最可能发生的是,使用者会看到你应用程序的相反面。特别是他们开始接触你的产品之时。有所准备很有必要。下面是我们如何处理我们的数据组件中空状态的示例。

第 7 段(可获 1.88 积分)

Tapdaq — Cross Promotion Widget States

Tapdaq — 交叉推广工具状态

准备第一张图

所有这些都导致最后部分的低保真表达。多亏了白板任务的结果,我们现在知道了所有可能的状态,用户的输入和目标。总结了所有互动后,我创建了一个表格,而且实话说,我已经改变了我多次使用这种做法的风格。它们可以是从具有光栅化布局的草图文件到粗糙矩形的任何内容,每个页面的名称如下。

话虽这么说,但过程总是痛苦,我通常会终止这种情况,在我们想要在过程中改变或添加一些东西时。有了这些解决方案,我通常被迫做更多的步骤; 例如改变线,箭头和图像的位置。

 

 

 

 

第 8 段(可获 1.75 积分)

毕竟,我们最终会使用Camunda Modeler,而这却不是一个设计工具。其只是一个能够创建技术表格的简单的应用。听起来虽然很奇怪,但这个应用现已发展用来帮你建立最基本的表格。最重要的是,创建的一切都是完全可扩展的。您可以轻松地拖放任何点,它会自动为您创建线和箭头。

你还可以从不同类型的点中选择对你有所帮助的点,例如,在用户从对讲机收到电子邮件时突出显示。Camunda允许导出到SVG,这使它很容易在草图中为跟踪点上色。

 

第 9 段(可获 1.33 积分)

Tapdaq Menu + Screens Structure (Export from Camunda Modeler)

Tapdaq 菜单+ 银幕结构(从camunda Modeler导出)

3.工作/设计

样板

Moodboard with Chronicle Display and bright blue colours

明亮的蓝色以及有记录显示的样板

当我将图像收集到我的灵感文件夹中时,我能够以创建样板为开端。我使用样板主要是为了和同事进行讨论我的想法,同时在我以像素处理开始时描述一些虚拟的想法。

初稿

设计始终是一个持续的过程。在这条路上你会重复多次以得到一个伟大的结果。初稿也可以用来收集反馈。你没必要设计完美的像素以开始接受接收来自你的队员,客户或者潜在用户的反馈。

第 10 段(可获 1.44 积分)

为了得知他们第一时间的想法,并开始进行讨论,我通常会在屏幕上将我们现有的设计混合起来(如下图所见)。这可以让我们在不到一天的时间内开始使用真正的外观设计。如果事情进行的顺利,你可以做一个简单的原型来测试。

写下你的副本(声调)

文案是用户决策的关键环节之一,我把它作为设计的关键部分。尽管我不是本地人,我仍然能够设置副本的声调。没有什么比用户在一个有着混乱对话框的漂亮设计中,努力找到下一步做什么更糟糕。

 

第 11 段(可获 1.46 积分)

第一次实习测试

有了你的初稿,你可以在Marvelapp或Invision中快速创建一个原型。这是我最近开始做的,事实证明它是另一个令人惊讶的验证方面。使用原型,你现在可以轻松地与您的团队中的3或4人通话,并与他们共享Invision或Marvelapp原型,并尝试问一些问题,同时测试他们的特定流程/情景。

这样,你就可以轻松测试您的提问技能,并直接地测试您的设计决策在真实用户中的反响,而不用担心浪费的资源和时间。

 

第 12 段(可获 1.69 积分)

礼仪

我们都知道保持整洁是多么难的一件事。 如何提供另一个功能。这通常会导致一个混乱的草图或PSD文件。在设计的仪表板用户界面工具包时,我学到了很多,特别是从作为一个初创公司中唯一的设计师,在团队工作或研究我的数字产品时之间的差异。我在Tapdaq工作时,对同事的技能很有信心,即使我知道我在努力保持文件整洁,尽管有时这是不可能的!

然而,当你在一个团队里工作时,我思考我的PSD文件就像我要为别人创建一个文件夹那样。我通常这样做,如果你有一个文件夹中超过8层,那么你应该创建一个新的。

 

第 13 段(可获 1.69 积分)

Dashboard UI Kit — Folders Structure

仪表盘用户界面工具包——文件夹结构

我找到了一个很棒的草图插件,在我使用我的仪表盘用户界面工具包时,它为我节省了时间。重命名——github.com/rodi01/RenameIt

您仍然可以看看这些旧的礼仪指南(很多点在编辑时都可以随便使用)——Photoshopetiquette.com

把所有信息都展现在画布上

在我的画布的其余部分是白色时,我一直努力设计漂亮的标题。在设计的时候,我学会了把所有的内容放在首位,只是布局和排版。这样更容易设计好细节部分,并展现出一些概念的内容。

 

 

 

 

第 14 段(可获 1.38 积分)

创建用户界面元素,并开始用乐高积木演示

参加聚会,我可能会迟到,写这些的时候,这听起来已经过时了。我们在此过程中没有做任何线框的原因很简单。图39中带有一些东西,我觉得太不可思议,那就是“形状会随着属性调整而发生变化”。这迫使我最终重建了所有50+ Tapdaq屏幕。其重建让团队中每个人的设计更加简易。现在我们的草图文件只是简单纯粹的拖放。你很简单地给队友一个空白的画布,他们可以创建几乎高保真的草稿。多亏了这一点,我们可以跳过所有的线框图工具,并且可以从实际像素开始看。

 

第 15 段(可获 1.54 积分)

其也可以与我们能够将实际将线框转换为实际设计同步。任何PM都可以创建线框,然后我就可以很容易地采用并将其转换为高保真。

Drag & Drop Elements in Tapdaq Sketch File

Tapdaq草图文件中的拖拽元素

4.资产和交付

当你完成了设计,但在第一次反馈基础上并没有迭代。现在是时候把你的设计交给你的工程师/开发者。

规格

我的主要目标之一是始终能够与团队就我所做的决定进行沟通,并能尽可能多地为我们的开发人员减少困难,以提供给他们最好的资源。对我来说,这是作为一名设计师的工作中最重要的一部分。

第 16 段(可获 1.64 积分)

因为我记录了所有的交互过程,并从过程一开始我就做好了完全的准备,创建规格只是小事一桩。我往往在谷歌文档里或者是在草图文件屏幕下编写规格。用对所用功能的解释来处理你的设计,这样很好,这样在将来,任何人都可以被你的文件吸引。

图表

我曾经在Badoo工作时,与团队和利益相关者一起做过这种技术。这种技术很适合将设计打印出来并和与团队进行讨论。但现在我认为有更好的选择。比如准备好最终的原型。

第 17 段(可获 1.35 积分)

Full Diagram of Sagram Analytics App

Sagram分析应用程序的完整图

最后的原型

对我来说最关键的一点是,在原型中总是所有的交互准备。在最后一个与队友的小会议或展现一些特定的流程中我通常最终有3-5个原型。我往往会准备好一个画板中草图的所有状态,然后在导出的时候复制那些画板,一遍让草图的每个状态都做好准备。

就像我之前所说的,你既可以使用 Marvelapp ,也可以使用 Invision。这样做是极妙的,即在你设计的部分添加注释,以扩大你的设计规格,这样即使是写文案的人也可以很容易在实际像素里检查,而且如果每个副本和对话框按需要工作的话,其也可以进行循环。

第 18 段(可获 1.55 积分)

Quicktime视频比笔记更好

在会议上我没有向团队以及客户展示时,我正在通过此原型往大屏幕上发送一个共享视频,并用这个视频来解释我所设计的一切。在每次演示之前确认自己的设计,是一个很好的方式,这样对于出现的任何问题我都可以解答,并且我可以了解到我的作品中可能出现的互动。团队在远程工作时,可以使用这个好方法。每个人在任何时间都可以回想整个交互过程。

动画

你可以使用After Effects或者Principle来作为你设计的点睛之笔。这对于你想要这样或那样移动还是悬停都是很好的解释。

第 19 段(可获 1.54 积分)

格式指南

对于工程师来说,另一个关键点是要知道在不同的场景中事态会如何发展。考虑输入错误时的状态或者在哪里会显示错误的消息。同样地,考虑提交按钮的禁用状态如何,在输入等中定位旋转器。对于工程师来说这样做超级容易,那就是将草图文件作为“乐高积木”,甚至在开始前对所有屏幕进行编码,来浏览你的符号画板和逐个样式的元素。

我在下次更新我的Dashboard UI Kit最需要的功能/设计之一实际上是格式指南以及从视觉上对所有元素的概述。

第 20 段(可获 1.29 积分)

Tapdaq UI Overview — Styleguide

Tapdaq用户界面概述——格式指南

5.最终测试

由于我们是把设计移交给工程师,我们能够专注于过程的最后一部分——对我们最终决定的成果进行测试!

Inspectlet / HotJar

将设计转为工作代码后,不要忘记包含其中的 Inspectlet 或者 HotJar JS代码段。在看到用户如何浏览我们的仪表板,或者他们在我的作品集页面上做什么时,我总是会感到很兴奋(或沮丧)。

Inspectlet可以捕获所有用而且户会话,这真是惊人,而且在大项目上也会发挥很棒的作用。它为用户提供很容易操作的“/页面”过滤,还可以帮助您观看特定功能或流程的会话。我们在Tapdaq中使用Inspectlet。

第 21 段(可获 1.49 积分)

对于我个人作品集,我使会用HotJar的免费功能来生成热图,并会对用户浏览过的作品做记录。

Mixpanel

Mixpanel非常适合用来验证我们的目标(我们在过程的开始就设置)。Mixpanel有助于查看有多少用户完成特定流程。在设置之前了多少用户删除了账户。有多少人从主要登录页面转到了有商店以及我们最有价值产品的页面。

谷歌分析

我不会对做很难的编码,但是我会使用CSS文件以及简单的代码。最近,我一直想看看用户点击的地方,在看到Hotjar热图时,我就决定也在谷歌分析里设置基础的点击追踪器。你可以在你的网页上很容易的追踪到每位用户的点击了什么。

 

 

 

第 22 段(可获 1.78 积分)

以下是跟踪点击次数的示例代码

**1. Paste script to your code**
 
<script>
        function track(name,label){
        ga('send', 'event', name, 'click', label, {
            hitCallback: function(){
            console.log('Event sent to Google Analytics');
                }
            });
        }
</script>
 
**2. Add onclick to your links**
 
<a href=“link” onclick="track('Click-Name','Click-Label')">Link</a>

**1. Paste script to your code**

Google Analytics Tracking Results

谷歌分析跟踪结果

正如你所看到的,我正在跟踪每个按钮,每个链接,我总是在每个锚点上附加一个不同的标签。这有助于我很容易地绘制出用户的行为。例如,我发现在介绍文本中突出显示的链接上,人们会较多的使用顶部导航的5倍。你也可以随时将此代码段编码到你的网站。

第 23 段(可获 0.94 积分)

注:遗憾的是,使用AdBlock并不能对用户的点击量进行计数。感谢@snapeuh帮我设置这些。

内部通话系统

当我们同意我们的初始流程时,我们讨论的是用户从内部通话系统收到电子邮件的部分流程。在这里我们的职责是确保所有副本和消息本身有意义,并且实际上对访问者有所帮助。确保你的电子邮件会指导用户访问你的结果。在此流程中,始终尽力提供如何继续的特殊性支持的文章和信息。

6)完成设计后,我如何管理我的工作?

目标

第 24 段(可获 1.29 积分)

对于旅程的最后一部分,我设置了一个月的冲刺目标——将其分为工作/ Tapdaq相关目标,个人项目目标以及生活目标。我仍旧使用代码培养来将这些项目拆分成很多小的任务,这样方便停止工作。我之前常常同时做5个不同的项目,而且到最后哪个项目都完成不了,这令我很沮丧。

现在,我的目标是每月至少要做好一件事情。而“这件事”可以是我文件夹下的任意两个新的子页面,一个新的产品或者是一个新的用户登录页面——这样只是为了保证我自己可以继续做下去,而且完成这些任务的时候我一直是快乐的。

第 25 段(可获 1.53 积分)

Originally from Siavash Mahmoudian — https://mobile.twitter.com/siavash/status/618093511066435585

最初来自Siavash Mahmoudian— https://mobile.twitter.com/siavash/status/618093511066435585

工作区

我的大多数设计都使用了草图,但是在Instagram上还是有大量的人询问我的Photoshop工作区,那么这给你们!janlosert.com/workspace.zip

7.最后几句话

这是对我提交的设计所有步骤的概述。显然,我并没有一直遵循完全相同的程序,但这让你知道了我是如何工作的。

将Dribbble抛之脑后

在过去4年里,在我所学到的经验以及我的设计所发生的变化中,我了解到了Dribbble是我们设计师吸引新客户和炫耀我们工作的最佳方式。但它却不一定是你想创建你的设计的地方。我的目标一直是为Dribbble设计有吸引力的高像素文件图片,但真正的用户需要的并不是这些,而且也不会使用它们。

第 26 段(可获 2.1 积分)

这是一个Tapdaq上的例子——这些是我脑海中已经为Instagram和Dribbble做的一次很好的设计。但是在我们花了几小时观察人们编辑他们的配置文件后,我也已经展示了当前屏幕看起来的样子,这之后,我已经意识到了他们实际的请求以及所需要的信息。

Account Settings — Before & After

帐户设置 ——之前和之后

你可能会收到500种诸如土豆或者滑动的比萨饼此类明亮的疯狂动画,但是真正重要的是,你的用户可以找出如何管理公司电子邮件的频率,或者学会如何将他们的绩效分析进行过滤。

未来(我想学的东西)

第 27 段(可获 1.29 积分)

我的下一个任务最重要的是更深入地研究UX。为了能够在我的下一篇文章中,分享对用于A / B测试以及收集数据的UX工具的概述。在使用UX方面,我还是一位新用户,在之前的工作中,我并没有很多机会学习。但是,目前我热衷于跟踪和观察每个用户在我从事的每一个新项目上的动态。

结尾

我很乐意听到你的工作流程——在你的个人项目中,你通常会采取哪些步骤,或者在团队工作时,你的流程是如何的不同。我很喜欢看其他人的工作区。而且最重要的是,你可以随时分享在我的过程中所有/附加步骤的想法。

我更多的会在Tapdaq上以及Dribbble上发布我的个人项目,而且在Twitter上听到你的想法我会更开心。

原稿发表于网络平台上。转载许可。

第 28 段(可获 2.04 积分)

文章评论