经验分享!移动端设计开发流程(附神器推荐)

标签: 神器下载 PS 教程 & 设计文章 移动端,设计,开发 无线端设计 | 发表时间:2013-07-18 18:06 | 作者:cyRotel
出处:http://www.uisdc.com

经验分享!移动端设计开发流程(附神器推荐)

@我爱静电 和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最重要.闻闻我身上有像素味么亲?

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

原文地址: 站酷
作者: 我爱静电

 
================ 微信推荐================
想在手机上、被窝里获取网页设计教程、 无线端设计 经验分享和各种意想不到的资源”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

优设哥向您推荐:

学会为设计稿做好标注(附工具推荐)

设计一款好的移动App,有哪些基本规则?

推荐:产品运营设计经验分享

推荐!游戏官网设计项目经验总结《轩辕剑7》

经验分享:10个超赞的图标设计技巧
无觅

相关 [经验 移动 设计] 推荐:

移动应用产品设计的十条经验分享

- - 雷锋网
【编者按】本文作者唐杰,一位年轻的北漂产品经理,有过几年独立站长的经历,以及一年多移动互联网产品经理经验. 本文列举了其在工作实践中体会到的十条移动应用产品设计经验,与大家分享. 希望本文抛砖引玉,与读者们共同讨论. 随着移动互联网的发展,越来越多的Web产品开始布局移动端,因此越来越多的PM在交流讨论移动APP的产品设计.

经验分享!移动端设计开发流程(附神器推荐)

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

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.

内容首页设计经验

- - 坏脾气的小肥
前些日子,有位老同事来和我讨论频道首页的设计,这才想起来我原来是做媒体的,以前还画过不少内容页面原型. 悲惨的是,我对内容页面的理解在转型产品后才渐渐成熟,以前画的那些都挺平庸. 做媒体的又有几个人去研究内容界面的交互心理呢. 过去从实践与反省中得来的经验之谈,不妨讲讲. 第一条和界面设计没关系,和定位有关系.

谈交互设计的经验积累

- - 网易用户体验设计中心博客
交互设计师的工作中,基础的工具、常识、流程……,这些都能够轻松学习到;最终的产出物,也能够找得到成熟的范本;而只有中间的经验,只能来自积淀,没有速成的方法. 这篇分享,把自己成长中和交流中获得的一些经验略微举例,加上交互相关的一点基础,希望能给对交互设计有兴趣的朋友提供一些帮助. 经验积累的切入点——模仿并思考.

产品运营设计经验闲谈

- - 百度MUX
但是产品发版、公司活动都需要你的设计参与,运营设计是这一切工作的基础. 各种紧急的重要的需求,都需要保质保量完成. 不断的积累运营设计经验,也是自己的安生立命之本. 运营设计是一道大餐,很愿意和大家一起分享,欢迎大家一起讨论. 这要先说说产品的流程,移动产品从出生到和用户见面大多都会经历这么几个阶段:.

设计沟通的七条经验

- - 盒子UI
  经常有新入职的同学,搞不清设计师和别的职位如产品经理,在工作内容上有什么区别. 回答了几次之后,我总结出两方面的差别,简单概括为:技能和定位. “技能”指的是设计师掌握了项目中其他角色都不具备的能力——画图. 这么概括有点简单粗暴了,事实上设计师的专业能力远比画图两字涵盖的内容要广. 但“画图”确实是更容易被所有人理解的说法(向家里长辈解释我干什么的时候,他们如果不理解我就会说是画图的,他们就会貌似恍然大悟地哦一声,终于听到一个他们想要的能听懂的答案了).

产品运营设计经验分享

- - 人人都是产品经理
运营设计是一道大餐,很愿意和大家一起分享,欢迎大家一起讨论. 这要先说说产品的流程,移动产品从出生到和用户见面大多都会经历这么几个阶段: 功能定位——交互流程( Ui )——视觉界面( GUI )——开发和测试——发版运营. 由此可见运营就是产品出生的过程,没有好的运营,酝酿已久的产品也见不到更多的用户.

移动界面隐喻设计

- PigheadX - 所有文章 - UCD大社区
是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身. 它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.