最近在研究Dashboard的设计，看到Medium上一篇讲设计流程的文，总结了作者4年以来的设计流程经验，读来颇有收获，遂译出来分享。
1. 设计之前
让客户提供三四个他喜欢的参考实例，了解他喜欢的内容，以及他对设计结果的期望。
多和开发、产品沟通; 目标是在开始开发之前尽可能多地排除问题。
“用户画像”超级重要。它让你明确为谁设计；在解决方案模棱两可时，它能有效地帮助选出一个最合适方案。
设立一个明确的目标。如果是新项目，务必让你和客户都明确好设计目标。任何事都可以成为目标，所以，要明确定义好。
建立好项目文件夹。比如可以有个inspiration文件夹，看到的任何有感觉的东西都丢进去，为日后做moodboard做准备。
2. 低保真阶段
白板阶段
我一般是这么工作的 ：
如果加个新功能，或重新设计一个流程，所有人坐在一起开会，在白板、纸上、ipad上画想法草图。这让我们把team的所有人都放到设计师的位置（包括产品等）；最后选出俩，看哪个更好。
这个阶段我们讨论最多的是极端边缘情况，在这个阶段，就把边缘情况定下来非常重要。不要等到设计阶段再去想这些问题；更糟糕的是要到开发阶段才去想，那样你会浪费大量时间精力。
列出所有屏幕上的信息（用户需要输入什么信息）
列出所有用户要输入的信息，和使用流程。
确切写下用户在某一个特定页面输入什么，如何达成他想要的目标。
记下所有可能的情况
所有dashboard、apps都有不同状态，别漏了这一步。设计阶段，我们要确保解决所有这些情况。
在sketch中画很炫的图表，看起来很酷。但很多时候，尤其是当用户刚进入你的产品时，他们会看到你产品的其他状态（比如初始状态、空白状态…）所以要提前做好准备。
下图是我么你处理空状态的例子。
准备第一版Diagram
这一步直接影响低保真原型。
多亏了白板阶段的成果。我们明确了所有可能的状态、用户的输入和希望达成的目标。
为了总结所有交互流程，我画了Diagram，只用方块代表每个页面，下面标上每页的名字。
介绍一个画Diagram的工具： Camunda Modeler, 可以导出svg，到sketch里上色。（但打开奇慢）：Examples - camunda BPM platform
3. 设计阶段
情绪板
设计阶段从创建moodboard开始，因为之前在灵感文件夹收集了很多图。 在开始像素级别画图之前，我主要使用moodboard来与同事讨论我的想法，并描述一些视觉概念。
第一稿
设计始终是一个持续的过程，在达到满意结果前，有很长过程要不断迭代。
为了获得第一反馈并开展讨论，我第一稿不会考虑像素，会把之前用的元素拖过来用，这让我不到一天就攒出来一个像模像样的页面。
你可以先做一个简单的原型，去test页面之间的相互联系。
写下引导（信号）
引导信号是用户决策的关键之一，是设计的重要组成部分。
没什么比这更糟糕的：一个漂亮的设计，视觉语言却让人困惑，用户纠结不知道如何进行下一步。
第一次试验测试
初稿可以在Marvelapp或Invision中快速创建一个原型。
这样特别好，你可以和其他人共享个原型链接，拿原型去验证某个流程或场景，互相讨论，
通过这种方式，您可以轻松测试问题点，并可以让一个真实用户验证一个设计决策，不再浪费精力时间。
规矩
尤其在团队协作时，保持文件整洁很难！然而可以建立一些通用规则。
推荐个强大的sketch重命名插件：rodi01/RenameIt
Tip： 将所有内容放在画布中
我曾有个坏习惯：当画板其他地方还是空白时，就去雕琢一个漂亮的标题。
后来，我学会先把所有内容元素都丢进画板，先排出来。在有整体概念布局的前提下，深入细节，会容易得多。
像玩乐高一样创建UI元素
Sketch有个很棒的功能是“shapes with resizing properties”。这让团队中每个人都能轻松设计的西。
我们的sketch文件现在靠拖拽就能完成。你可以给你任意一个团队成员空白的画布，他们可以创建几乎高保真的草稿。
所以，我们可以跳过线框图，从真实的像素开始。这极大方便了将线框图转为真实设计的过程。任何PM都可以创建线框图，然后我可以轻松地将其转换为高保真。
4. 评价 & 交付
规则说明
主要目标是与团队沟通我的想法，并尽可能地减少开发人员的难度，为他们提供最好的资源。这对我来说绝对是我作为设计师工作的最重要的部分。
把所有交互操作整理成说明文档，也是工作中的一环。我会在sketch中每个页面的下面写明白。
交付设计稿同时附上对所有关键点的解释说明，是一个很好的方式。这样以后所有人都能快速读懂你的图纸。
Diagram
汇报时可以展示Diagram，也适于打出来并与团队讨论。但是现在我觉得有更好的选择，比如最终的原型。
最终原型
带交互跳转的原型很重要。
一般到最终原型之前，会有3-5个版过程稿。
我一般会导出之前把所有状态都在sketch中准备好。
如前所述，您可以使用Marvelapp或Invision，还可以添加评论，完善交互设计说明。
如果都是按需求来的，作者就可以再真实像素状态下check作品，检验流程。
短视频比文档要好
我之前会用页面截图制作成展示整个操作流程的视频，发送给客户汇报用。用视频来解释我设计的一切。
在汇报之前，这对我来说是一个很好的确认巩固过程，做展示视频的过程中，我弄明白了所有问题，缕清了我设计的所有交互。
这对于远程团队也是很好的工作方式。每个人都可以重复播放整个操作流程，随时随地思考它们。
动效
你可以使用After Effects或Principle。动效能很好地解释你想让这个或那个移动or悬停。
Styleguide
工程师的另一个关键点是了解事件在不同情况下的反应。
设想下输入错误信息后的错误状态、提交按钮的不可点击状态、在输入框中的什么位置放置光标，等等。
如果有一个通用组件文档，表明所有元素的不同状态，开发会很开心。
5. 最后验证
把设计交付给开发同学后，我们就集中精力到下一个阶段：验证我们的设计
Inspectlet / HotJar
设计变成代码后，有条件的话去使用Inspectlet或HotJar观测用户使用情况。
我总是很兴奋（或沮丧），当我看到用户如何使用Dashboard导航栏或在个人页上做了什么。
Inspectlet在收集所有用户使用情况方面很给力。也适用于大型项目。
我们在公司项目中使用Inspectlet。
Mixpanel
Mixpanel非常适用于验证我们的目标（尤其是我们在过程开始时设置的目标）。
Mixpanel能统计有多少用户完成某个特定流程；在设置帐户之前，有多少用户流失；有多少人从首页跳转到存储页和我们最有价值的产品页。
对于我的个人网站，我使用HotJar的免费功能来生成热力图，并至少可以记录几个浏览我个人网站的用户的浏览方式。
Google Analytics
我不能写大项目，但会写点简单的代码。最近我对用户的点击区域感兴趣，同时在查看Hotjar热图。然后我决定再在Google Analytics中设置个基本的点击跟踪。这样就可以轻松
获得你网站上的用户点击路径。知道从X跳到Y有多少人、占比多少。
正如你所看到的，我正在跟踪每个按钮，每个链接。我给这些锚点每个都附加不同的标签。 这有助于我轻松跟踪用户的行为路径。
例如，我发现使用顶级导航的使用是强调的链接文字入口的5倍多。
Intercome
当我们完成了初始化流程，我们就进入到了接收来自于内部系统邮件的流程。
我们在这一块要做的是确保所有的页面、文字信息本身都是有意义的，并且能为访问者提供实实在在的帮助。
确保邮件会将用户引导向一个他们非常乐意去的页面，并且尝试提供具体 的帮助文章和信息，引导他们完成接下来的流程。
6. 设计后回顾
目标
我曾经同时做5个项目，但到最终都无力推进至完成，很沮丧。
如今，我的目标是每个月至少做好一件事。 这个“事情”可以是我个人网站中任意2个子页面；一个新产品；一个客户的新落地页，等等。
让自己保持前进，并享受完成事情的快感。
别太迷信Dribbble
Dribbble是我们设计师吸引新客户并展示我们工作的很好地方，过去几年我从中学到很多。但它有它的不足。
我之前也一直喜欢追求完美像素的酷炫图片，但是那并不是用户真正需要或使用的。
下图是Tapdaq的一个例子，这是我为了往Instagram和Dribbble上晒的一张不错的图，右边是现在页面的样子。然而这背后是我花了几个小时，盯着用户使用个人页的操作情况，然后，才总结出的用户最实际需要的信息。
你可能因为一个酷炫的土豆或Pizza滑动的动画，收获500个likes。
但是，真正重要的是，您的用户如何管理公司电子邮件的频率，或如何过滤出它们的性能分析。
作者 dribbble：Jan Losert
原文作者：
原文链接：
https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146
