这篇译文来自Invision团队免费提供的系列课程:设计师如何与开发者合作。本系列的第一篇请查看:
设计师如何与开发者合作(一):什么是为开发而设计?
设计是如何与开发者合作(二):从哪里开始?需要询问开发者的问题
在上一节中,我们学到了一些在开始设计之前你必须询问开发者的问题。随着设计过程的推进,沟通要进一步进行。所谓“好”的产品与“伟大”的产品之间的差异,很大程度上取决于你有没有在设计与开发过程中与开发者好好沟通。
在这一篇文章中,我们将告诉你在设计过程中你需要询问开发者哪些问题,以及在团队协作过程中需要注意的事项。
问题5:我可以在mockup中使用示例数据或内容吗?
所有的数据和内容都被你(设计师)严格控制的mockup往往看起来很棒。你可以使用漂亮的股票图像,使用完美的数字符,有趣的文本块。虽然这有助于你在展示提案时看上去绝对“完美”,但是这样的设计与实际上线的设计往往是有差距的。
如果可以的话,设计中最好使用真实的数据,这样做大有好处。你需要理解你的设计时机上线后将有怎样的效果。比如说用户提供了模糊的图像,账户名称使用了2个姓氏等等,以及许多用户在操作时可能产生的情况。
如果说你的网站变化的部分较少,比如说是销售网站或者登录页,尽量保存好之前设计过的所有版本文件。
对于会动态生成内容的网站,这里有一些方法可以产生“真实”的内容:
如果你的产品是一个全新的品牌,模拟尽可能多的用户可能会提供的内容
-从竞品的网站上找到样本。(在mockup阶段“借鉴”竞品是没有问题的)。
-创建一个团队账号,并试着上传运行不同的内容,包括图片,文字等等。
-创建用户画像,使用虚构的用户名、故事背景、典型场景等构建。即便用户暂时不存在,这仍然有助于从不同的视觉生成账户和数据。
-如果已经有数据了,要求开发人员提供数据给你。
在我的职业生涯早期,我重新设计了某个已经拥有数据的网站。我就是简单地逛逛网站,随便选几个用户,把之前网站上有的数据Copy过来用在我的mockup中。
虽然这可能比你用自己编的数据好,但这也不是最好的。因为你会下意思地去选择那些会让你的设计看起来更好的账户。
如果说你可以要求开发者从数据库中找一些账号和序列出来,那么相对于你自己选择的内容,你的设计真正上线时将会更加灵活和有力。
我喜欢询问的一些问题有:
以下这些元素对应最长有多少字符?最短有多少字符?一般是多少字符?
-个人或企业名称
-标题
-说明
- 要点
记住,你不仅仅要为最长或最短的数据设计相应的距离,你也需要明白一般情况下数据有多长。这一点非常重要,因为这代表着你的产品在大多数时候的状态。你需要为最长和最短的情况进行相应的设计,但无论如何,处于一般状态时,应该是你的设计看起来最棒的时候。
占比最大的几种上传图像尺寸是多少?它们各占多少百分比?
图片和影响的尺寸很大程度上决定你的布局。如果图像尺寸是由用户自己上传的照片所决定的,那么就是一个巨大的挑战了。
如果说你打算使用缩略图或者裁剪图像的方式,那你需要明白一般用户上传的尺寸大小,来让这样的设定更适合用户。
为开发而设计更多时候是去做一种理智而艰难的决策。
问题6:你希望我在开发过程中的参与程度有多高?
这是一个意味深长的问题。因为你想要的答案是“很多”。最好早点明确这个问题,避免之后的冲突。
具体来说,如果你有前端开发经验,你会写HTML和CSS吗?开发者们会喜欢自己写完代码,然后让你去挑出他们代码中的细节错误?
如果你自己不亲自写代码,那么没隔多久你来检查一次开发成果?我见过大多数的开发者不把自己看作也不想成为设计师。如果说有组织清晰的设计检验,能够帮助开发人员,并且避免后期的评审中被这些问题拖后腿。
记住你所做的这一切的目标是让开发者可以放松地询问你的问题或意见,而不是为了让你去挑他们工作的错误。每个项目中都会有一些不知道由哪一方来负责的问题,针对这些问题,同时考虑你的专业意见和代码库会帮助想出更好的解决方案。
通用的法则:描述你希望实现的行为,而不是你认为可以实现它的技术。
我之前已经强调过这点了。没有人喜欢被告诉如何做好自己的工作(作为设计师你也不喜欢被客户教导如何设计吧?)尤其是被那些没有他们专业的人教导。你很容易找到你想要实现的效果或页面的范例,有时你会抑制不住地用你那些所谓的专业知识去告诉开发者要怎么实现这些效果。我却你还是不要这么做,你只需要告诉他们你希望实现什么样的行为或效果就行了。
在IPhone和IPad还没有出世之前,基本上所有的网站动画都是由Flash来构建的(当然你也应该知道现在Flash快要绝迹了)。但在Flash还占据Web端动画的绝对王者地位时,其实已经存在很多别的实现动画的方式,并且它们可能其实会更适合你的项目。
而在当时,我发现因为自己没有使用正确的语言而与开发者产生了很多政治。比如我曾经说:“让我们使用Flash来实现经验的导航跳转和Hover动画”。这实在太糟糕了。我其实应该这样说:“我希望导航可以有这个动画效果,有什么办法可以做到这一点,并且不会影响代码的完整性?”
所以你应该做的事描述清楚你想要有的最终效果和你为什么希望实现它(比如)动画可以使得用户更加愉悦,从而让产品脱颖而出。)之后让开发者们自己去决定是用什么样的技术来实现它。
任何优秀的开发者都会喜欢挑战。让他们明白你想要实现这个效果的意义,他们就会更加愿意帮助你达成它。而结果就是一个更好的网站和更好的代码。
采用这篇文章提到的技巧,你应该能够更好地与开发者处好关系了。接下来的课程会告诉大家帮助实现响应式布局和友好的代码的具体技术,敬请期待。
小结
我可以在mockup中使用示例数据或内容吗?
对于新产品:
-从竞争对手的网站采集样本数据
-动员团队创建多个账号
-创建Persona
对于现在产品的再设计:
-开发者可否从数据库中抽取一些样本出来?
-最长的数据有多长?最短的数据有多短?通常情况下数据有多长?
-用户上传图片的最常见尺寸是多少?
我在开发过程中的参与程度需要有多高?
-我需要写HTML/CSS吗?
-开发过程中的哪个阶段我可以查看目前成果,从而发现设计问题并提出建议?
-我们和开发者可以一起对一些不好划分权责的问题进行决策吗?
尽可能让Mockup接近真实产品上线后的样子。建立合理的工作流程,让你和开发者可以更好地相处合作。