经验分享！移动端设计开发流程（附神器推荐）

前端工程师下岗啦
谁来设计原型
提高设计效率的神器
与工程师配合

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

和pc端网站的设计和开发相比，移动客户端的开发工作，对绝大多数人来说，绝对是一个崭新的行当。那么当我们每天在iphone上，在各种安卓在各种pad上习以为常的刷着微博看着网文切着西瓜找着你妹的时候，当一大波人信心满怀的开始步入这个看似熟悉，或者说”简单”的工作中后,突然发现,悲催,完全不是那么回事嘛！

相信很大一部分产品或者设计或者开发人员是从之前的传统互联网”出家”过来的，当然，这包括我还有身边很多很多人。总之，这是一个坑，因为APP，这个”看上去很简单”的东西，真心不简单。

下面分享一下在这一年多点的时间里，谈谈我的一些经验，水平有限，如有错误，欢迎指正。
本文偏技术流，一共分两部分，一部分是流程，另一部分是设计经验及思路。以下是第一部分，我们看看流程这档子事

1.前端工程师下岗啦!?

我们现在习惯于将某一个app叫做一个产品. 相对于web端的产品开发流程. 移动客户端的开发流程在某些流程上开始发生变化。
web端. 我们做一个产品. 从产品立项开始。
产品经理提出需求(原型等)>讨论需求>通过需求>交付设计师设计layout>确认>页面制作(俗称切页面)>交付工程师开发>修改细节及bug>上线。

移动客户端
产品经理提出需求(原型等)>讨论需求>通过需求>设计layout(包括交互设计及ui设计)>确认>切图>交付工程师开发>后期修改>上线。

哦?好像差别不是很大嘛?
我们主要谈一下一些职位分工的变化. 前者和后者,在开发过程中,一些职位消失了.一些职位出现了. 对于我本身的理解,设计师更加的细分,虽然交互设计师在web端也会存在(分工比较细的公司),但客户端开发来说,交互却作为一个非常重要的一环出现了.对于寸土寸金的手机屏幕来说,对于开发者逻辑能力的要求也越来越高,如何在这么小的屏幕里对各种功能进行合理有效的布局显得更加重要.虽然在某些创业型组织中,设计师人数上仍然处于弱势,但对于对体验要求越来越高的用户来说.这绝对是个不能忽略的要点.

另外,我们会发现,前端工程师这样的传统职位在移动开发的流程中,消失了! 没错,是消失了! 设计师设计完设计稿,一般会直接进行切图的步骤.因为,我们知道,绝大部分的安卓和ios客户端,以及其他客户端,并不基于html(是因为效果和性能太差了吗?自己体验下吧!).所以,为我们悲催的前端工程师稍微的默哀一下(请与时俱进的做出改变吧!干爸爹!).

还是前端工程师,真的消失了吗? 不好意思,我错了! 慢慢的发现,他们的工作被另一个”前端”代替了.这就是我们可爱的程序猿同学.虽然传统的前端工程师并不能在移动客户端开发中发挥作用,但,有一点是没有变化的. 手机客户端里也是需要各种”布局”的,就像web页中的字体,图片等等的样式,各种对齐,这个还是要有人来做的.因此这部分工作,慢慢被开发人员所代替了.设计后期,对于各种细节的调整,转由这部分负责”界面”的工程师来和产品以及ui同学对接负责调整.

2. 谁来设计原型?

前面提到,手机客户端设计过程中的逻辑性比web产品的设计强不只一点半点.按照一般的产品开发流程,产品经理会在前期会使用各种原型工具如visio,axure等等来做出线框图.然后交由设计师进行ui设计.可是,根据之前的开发经验,对于网页还好,可是对于逻辑性极强的手机页面来说,这种方法并不会有多方便快捷,至少,这种静态的页面无法表现各种交互和信息的层次.如下图这样的结构,我是会晕的,而且也不是非常爱看。

当然,对于不同的团队来说,产品经理和设计师之间配合的方式都不尽相同.我们需要从中发现一种适合自己团队的配合方式. 对于迭代速度很快的app,小团队,首次开发的情况下,产品经理或者ue可以只画出app的框架及流程稿,剩下的交由ui设计师来设计也未尝不可,这样可以给设计师更大的发挥空间,虽然这样会给设计师提出更高的要求,但,相信一个负责任的设计师是非常愿意这么做的,这对于自身的提高帮助巨大啊难道不是吗? 另外产品经理可以腾出时间来做更重要的事情(产品的同学你们懂的..)

3.提高设计效率的神器

为了能对设计稿的交互有更深的理解,以及将更具象化的信息传递给开发者及其他人. 我们可以借助某些手段来提前做出一款APP来.

(1)flash.

是的,廉颇老矣,尚能饭否. flash这种神器做这个可是最合适不过的了.对于某些交互效果,如果在设计阶段就有分歧,我们可以考虑用flash将其实现出来,用于讨论或者演示.但.flash的缺点也非常明显,开发出demo的成本实在是,有点高.另外,不要妄想在手机上可以看到直观的效果了.
去年在设计某客户端的时候,曾使用flash做过一次flyout效果.很直观的展示在电脑上,各种异见瞬间消失,项目最终得以推动(虽然最后效果并不怎么样,呵呵.)
(2)快现.

一款号称手绘原型,拍照并在手机上制作交互的软件.但不知道为什么没能流行起来.不过如果单纯只是在手机上来将各种交互全部穿起来的话,效率确实低的可怜.

http://www.36kr.com/p/178205.html

(3)腾讯uidesigner

http://uid.cdc.tencent.com/

UIDesigner继承了快现的亮点,但不同的是,这款软件将制作交互的平台由手机转到了PC端.实际使用中确实方便很多.配合手机端的 UIDplayer,几乎可以完整的将设计稿做成一个像模像样的APP并可以在手机上完美的呈现出来,这对于演示来说,确实非常方便.强烈推荐使用.

下边是电脑端截图.

(4).PS play

http://www.uisdc.com/ps-play

同样是腾讯出品的一款软件

在做移动客户端设计时,我们不可能只在显示器上观看效果.一来没有任何临场感,二来无法准确判定设计的真实效果. 所以我们就需要将设计效果图导入手机来进行查看.但…..难道一次次的插入拔出插入拔出除了让你的爱机high到极点之外,难道你们就不考虑下数据线的感受吗?! 难道你们就不考虑下usb口的感受吗!? (╯`□′)╯(┴—┴

好吧!神器来了. 我们仅仅需要的是在手机上安装ps play这款软件.pc端仅仅需要photoshop即可(ps版本需要CS5及以上).然后确保在电脑和手机在一个局域网的情况下.打开 photoshop,然后点击菜单>edit>remote connections, 确认信息.然后打开手机的ps play软件,找到电脑的这个ip地址,你在ps中设计的文件即可同步在photoshop上展示了.非常方便. 我心爱的iphone请养精蓄锐接受下一次usb线的调教吧!

4.与工程师配合.

工程师作为最终实现各种效果的人,必须要做好随时沟通的觉悟.否则,即使设计稿再漂亮,那也只是一张破图而已,没有任何价值.设计师必须在产品开发中后期与工程师保持密切配合.确保自己的设计最终能够付诸实现.

由于工程师的思维与设计师及产品经理差别巨大(请不要拍我),所以在将设计稿交付工程师过程中,除了使用上边提到的神器将主要的交互及设计思路演示以达到思想统一外,其中的各种小技巧也必须掌握足够.

(1)前期:设计稿交付工程师

将设计稿中各种颜色标在设计稿上. 必要时可标注各种间距的像素值.不过鉴于工程量巨大而且即使标出来这些,后期效果也并不是太好.因此,这一步我建议省略,只标出颜色值即可.

(2).中期:与工程师沟通及研究各种效果的实现方式.想当然的效果是会得到工程师的鄙视的.因此必须在这个阶段与工程师一起研究每一个效果如何实现.确保最后返工会降至最少.

(3).后期:调页面.

这是个非常苦逼的阶段. 经过一段时间的开发,哇,终于可以将app装到自己的手机上一睹芳容了.可是…. 最终的效果却是…

请理解工程师是以实现功能优先的哈. 这个没对齐那个没对齐,这种问题, 就要靠后期搬个小凳子坐在工程师旁边默默陪伴身体力行来解决啦.终于特么的可以有指点江山的感觉了!你们懂么?(内牛满面ing…)

恩,最后一部是非常重要的,作为设计师及产品经理的你一定要在设计的各个阶段对我们的程序猿同学动之以情晓之以理无时不刻的对他们进行洗脑,ui很重要ui最重要.闻闻我身上有像素味么亲?

恩！如果你身边有一个可以不用你说话就把界面做的跟效果图一模一样的程序猿，嫁了吧！