产品设计流程四部分十四招2 B、工作过程
4、我不在意线框图的质量
我并不是那种花费半年来打磨线框图原型的人。如果客户能预先准备了线框图那就最好了。
好的客户会在准备好自己的想法和思路,甚至会画在纸上。用线框图原型举例,并不是想说它,我只是强调深入理解产品本身非常重要。你的UI/UX技能、想要表达的想法与你本身才是决定最终产品的因素。借助线框图,你可以了解客户的想法,弄清楚需要几屏来构成整个应用。借此,你也会更加了解应用本身。
有一种情况绝对是设计师的噩梦:客户希望将线框图1:1地输出成最终产品,分毫不改。客户您好,您是猴子请来的逗比么?这哪里是设计师干的事情啊?所以,当你碰到这样的项目的时候,尽快搞定,然后像博尔特一样奔跑着远离这个项目,划清界限。
5、大尺寸PSD背景
7个月前我刚开始在Badoo工作时,看到同事Sasha的工作过程时就在想,这哥们恐怕完全不明白Photoshop是怎么工作的吧?不过现在我正准备用他的方式来作图,因为这种模式更对我的胃口:当你正在做一整个APP或者信息量较大的Dashboard的时候,使用大尺寸背景能更好地设计界面。
在创建新的PSD文件时,我基本上会将背景设置成8000×5000像素的大小。要知道,我不仅仅只是创建一套UI kit,在大背景下工作时我能看到每一个元素相互之间的搭配,体会每一个界面状态的差别。此外,用这种方式来设计,还可以非常轻易地截取小图或某一状态/阶段下的产品图片给开发者。
6、用一个PSD收纳所有界面
当我做一个普通的APP界面的时候,我也会用到其他APP的UI界面。这个时候,我更喜欢其他所有的界面都存在于一个PSD中,即使它们不是同一个产品的。
我很清楚,这种情况下先用Sketch会很有帮助,但是我更喜欢使用Photoshop,并将大量不同UI的源文件置于一个PSD当中,而非几十个单独文件。如此一来,我可以直接快速地从一个UI中选择图层拖放到当前的界面中,而无需在几十个不同PSD文件中慢慢找某一图层。
7、文件夹与规范
从各个角度上而言,我都是一个整洁的人——桌面上只有图标,每个项目每个客户都有单独的文件夹。我每个文件夹都是依据相同规则整理好内容,就像我的PSD的图层结构一样。我的每个PSD结构都非常清晰,我整理它们的时候,一旦发现一个文件夹的图层超过8个,就会创建新的文件夹,将不同属性的图层区分开,归纳好。我会将PSD图层整理得井井有条,仿佛随时迎别人检阅一样。我不用为每个图层单独命名,因为你可以很轻易地通过我的文件夹命名和结构来了解每个图层的功用。
最近我开始同@LukášKus一同工作的时候,他老是抱怨他在AE中没有这样的结构化文件夹。你看,这很重要吧?
如果你想知道更多PSD礼仪,不妨看看PSD礼仪白皮书。
8、与朋友交流
朋友们对产品设计的反馈,对我而言是至关重要的信息。我可以很轻易地创建一组小型的用户测试,并且倾听朋友们反馈它们碰到的问题,以及修改意见。这些想法常常能为解决问题开拓思路打开一扇全新的门,我会在产品开发的各个阶段进行这样的测试,获取反馈。此外,这种测试谁都可以参与,不过我一般会将被测试者分为两个部分:来自社区的UX设计师以及普通用户。这主要是因为产品受众常常是普通用户,而非设计师。
9、界面设计
当我或者客户准备好线框图原型之后,我更倾向于将它们合并到一个PSD文件中去。接下来,我会琢磨界面交互,点击不同的地方会产生什么效果。在这个过程中,我们常常能发现缺失的环节和需要补充的界面,以及其他的错误,这些都是客户和我们最初考虑不周全的地方。如此一来,我便可以将所有的界面和元素放在一起,综合起来看。当我面对一个拥有15屏的APP界面设计稿的时候,就会发现让它们保持统一风格是一件很难的事情,最初的设计准则也因此需要调整。
三种不同的标识线,第一种是带数字标号指向下一屏的,第二种是屏内指引线,第三种是指向外部应用和链接的线。
含联系人的预览图
完整预览图
关于样式——我所使用的原型设计样式和很多设计师差不多,但是比起耗费大量的时间去绘制复杂的指引线展示交互过程,我更愿意使用代表下一屏的数字标号和简单直观的指引线来展示我的设计。这种方式有点儿像过去老范儿的游戏说明书,但是它比起印刷电路板般的指引线地图要好的多。如此一来,你便可以在整张图上看到更多有效的信息。