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

标签: 神器下载 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上习以为常的刷着微博看着网文切着西瓜找着你妹的时候,当一大波人信心满怀的开始步入这个看似熟悉,或者说”简单”的工作中后,突然发现,悲催,完全不是那么回事嘛.

留英经验分享

- 木頭 - ss1271的奋斗
据说今年申请英国留学的人数再创新高,我来英国也快一年了,最近看到街头很多眼神中充满期待的新生,分享些经验:. 本经验分两大类:行前准备和到英国之后的衣食住行介绍. 全部例子以本人所处的Newcastle upon Tyne为准. 在签证拿到前购买机票还是在签证拿到之后购买各有利弊. 签证拿到前购买,最后可能导致机票改签,请斟酌.

iOS升级经验分享

- - 技术改变世界 创新驱动中国 - 《程序员》官网
作者认为,及时关注、快速反应、覆盖测试是面对iOS系统升级时最重要的三大原则,文中还详细分析了iCloud Storage和Automatic Reference Counting这两大iOS 5新特性. 2011年10月初,iOS 5正式发布,带来了大量新特性. 随之而来的是大量应用需要针对iOS 5系统进行升级适配.

我的2011年考研经验分享

- zealken - 褪墨
我去年考的研,一路走来,各种意外事件不断,最后好歹把整个流程走了下来. 虽然最后没过初试线,但这一年的历程还是给了我不少难以从别处得到的经验. 成功的经验固然好,我这失败的经验更能给人启发. 我报考的北大ccer,因为我对经济理论比较感兴趣,既然研究生又要上三年,不如选个好点的学校考考. 这里我要说的是,很多事情,如果不去尝试,很可能自己把自己吓着.

经验分享:如何写好文案

- - 优设(UISDC)
哈密:不知道大家有没有看过这样一个视频:. 视频最后说“change your words,change your world”,由此可以看出文案的魅力. 好的文案可以吸引用户,并带来转化率的大幅提升. 那么我们就来讨论一下,如何写出好的文案. 假如你生产了一款最新的手机,有800万像素摄像头,1080p分辨率的显示屏,可以进行超高清拍摄,还能编辑和分享.

Mac软件和学习经验分享

- - Starming星光社最新更新
Office 2011(word, ppt, excel) - 不用在虚拟机里面折腾了. Keynote - 这才是 PPT 神器. PreziDesktop - Prezi,ppt神器二号. Adobe Acrobat - 编辑pdf. TimeLine 3D - 基于时间轴的展示. Skim - 浏览pdf,虽然可以编辑,但是并不是保存到 pdf 文件本身.

【seo经验分享】seo的思维

- - 人人都是产品经理
思维决定着出路,seo的思维决定着我们优化的最终成败. 用户体验度以及搜索引擎蜘蛛体验,才是我们思维中应放在第一位的内容. 面对着搜索引擎的不断变化,中文搜索引擎优化工作越来越难作. 百度,一个善变的搜索引擎平台,让许多作中文搜索引擎优化的个人或是公司吃尽了苦头. 2012年一年,百度让更多的作搜索引擎营销的人们不再相信seo,认为作seo不稳定,不能很好的给他们带来流量.

产品运营设计经验分享

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

用户研究经验分享

- - CSDN博客互联网推荐文章
    前段时间参与了游戏用户的研究和分析,对于用户研究(以下简称用研)积累了一些经验,在此进行总结跟大家分享一下.     做任何事情之前都可以多问为什么,这个习惯可以帮助自己思考的更加全面.     在回答这个问题之前我们可以进一步思考:.     l)在什么情况下用研.     2)不同场合的用研是不是有局限性.