經(jīng)驗(yàn)分享！移動(dòng)端設(shè)計(jì)開(kāi)發(fā)流程（附神器推薦）

@我愛(ài)靜電 和pc端網(wǎng)站的設(shè)計(jì)和開(kāi)發(fā)相比，移動(dòng)客戶端的開(kāi)發(fā)工作，對(duì)絕大多數(shù)人來(lái)說(shuō)，絕對(duì)是一個(gè)嶄新的行當(dāng)。 那么當(dāng)我們每天在iphone上，在各種安卓在各種pad上習(xí)以為常的刷著微博看著網(wǎng)文切著西瓜找著你妹的時(shí)候，當(dāng)一大波人信心滿懷的開(kāi)始步入這個(gè)看似熟悉，或者說(shuō)"簡(jiǎn)單"的工作中后,突然發(fā)現(xiàn),悲催,完全不是那么回事嘛！

相信很大一部分產(chǎn)品或者設(shè)計(jì)或者開(kāi)發(fā)人員是從之前的傳統(tǒng)互聯(lián)網(wǎng)"出家"過(guò)來(lái)的，當(dāng)然，這包括我還有身邊很多很多人?？傊@是一個(gè)坑，因?yàn)锳PP，這個(gè)"看上去很簡(jiǎn)單"的東西，真心不簡(jiǎn)單。

下面分享一下在這一年多點(diǎn)的時(shí)間里，談?wù)勎业囊恍┙?jīng)驗(yàn)，水平有限，如有錯(cuò)誤，歡迎指正。
本文偏技術(shù)流，一共分兩部分，一部分是流程，另一部分是設(shè)計(jì)經(jīng)驗(yàn)及思路。以下是第一部分，我們看看流程這檔子事。

1.前端工程師下崗啦!?

我們現(xiàn)在習(xí)慣于將某一個(gè)app叫做一個(gè)產(chǎn)品. 相對(duì)于web端的產(chǎn)品開(kāi)發(fā)流程. 移動(dòng)客戶端的開(kāi)發(fā)流程在某些流程上開(kāi)始發(fā)生變化。
web端. 我們做一個(gè)產(chǎn)品. 從產(chǎn)品立項(xiàng)開(kāi)始。
產(chǎn)品經(jīng)理提出需求(原型等)>討論需求>通過(guò)需求>交付設(shè)計(jì)師設(shè)計(jì)layout>確認(rèn)>頁(yè)面制作(俗稱切頁(yè)面)>交付工程師開(kāi)發(fā)>修改細(xì)節(jié)及bug>上線。

移動(dòng)客戶端
產(chǎn)品經(jīng)理提出需求(原型等)>討論需求>通過(guò)需求>設(shè)計(jì)layout(包括交互設(shè)計(jì)及ui設(shè)計(jì))>確認(rèn)>切圖>交付工程師開(kāi)發(fā)>后期修改>上線。

哦?好像差別不是很大嘛?
我們主要談一下一些職位分工的變化. 前者和后者,在開(kāi)發(fā)過(guò)程中,一些職位消失了.一些職位出現(xiàn)了. 對(duì)于我本身的理解,設(shè)計(jì)師更加的細(xì)分,雖然交互設(shè)計(jì)師在web端也會(huì)存在(分工比較細(xì)的公司),但客戶端開(kāi)發(fā)來(lái)說(shuō),交互卻作為一個(gè)非常重要的一環(huán)出現(xiàn)了.對(duì)于寸土寸金的手機(jī)屏幕來(lái)說(shuō),對(duì)于開(kāi)發(fā)者邏輯能力的要求也越來(lái)越高,如何在這么小的屏幕里對(duì)各種功能進(jìn)行合理有效的布局顯得更加重要.雖然在某些創(chuàng)業(yè)型組織中,設(shè)計(jì)師人數(shù)上仍然處于弱勢(shì),但對(duì)于對(duì)體驗(yàn)要求越來(lái)越高的用戶來(lái)說(shuō).這絕對(duì)是個(gè)不能忽略的要點(diǎn).

另外,我們會(huì)發(fā)現(xiàn),前端工程師這樣的傳統(tǒng)職位在移動(dòng)開(kāi)發(fā)的流程中,消失了! 沒(méi)錯(cuò),是消失了! 設(shè)計(jì)師設(shè)計(jì)完設(shè)計(jì)稿,一般會(huì)直接進(jìn)行切圖的步驟.因?yàn)?我們知道,絕大部分的安卓和ios客戶端,以及其他客戶端,并不基于html(是因?yàn)樾Ч托阅芴盍藛?自己體驗(yàn)下吧!).所以,為我們悲催的前端工程師稍微的默哀一下(請(qǐng)與時(shí)俱進(jìn)的做出改變吧!干爸爹!).

還是前端工程師,真的消失了嗎? 不好意思,我錯(cuò)了! 慢慢的發(fā)現(xiàn),他們的工作被另一個(gè)"前端"代替了.這就是我們可愛(ài)的程序猿同學(xué).雖然傳統(tǒng)的前端工程師并不能在移動(dòng)客戶端開(kāi)發(fā)中發(fā)揮作用,但,有一點(diǎn)是沒(méi)有變化的. 手機(jī)客戶端里也是需要各種"布局"的,就像web頁(yè)中的字體,圖片等等的樣式,各種對(duì)齊,這個(gè)還是要有人來(lái)做的.因此這部分工作,慢慢被開(kāi)發(fā)人員所代替了.設(shè)計(jì)后期,對(duì)于各種細(xì)節(jié)的調(diào)整,轉(zhuǎn)由這部分負(fù)責(zé)"界面"的工程師來(lái)和產(chǎn)品以及ui同學(xué)對(duì)接負(fù)責(zé)調(diào)整.

2. 誰(shuí)來(lái)設(shè)計(jì)原型?

前面提到,手機(jī)客戶端設(shè)計(jì)過(guò)程中的邏輯性比web產(chǎn)品的設(shè)計(jì)強(qiáng)不只一點(diǎn)半點(diǎn).按照一般的產(chǎn)品開(kāi)發(fā)流程,產(chǎn)品經(jīng)理會(huì)在前期會(huì)使用各種原型工具如visio,axure等等來(lái)做出線框圖.然后交由設(shè)計(jì)師進(jìn)行ui設(shè)計(jì).可是,根據(jù)之前的開(kāi)發(fā)經(jīng)驗(yàn),對(duì)于網(wǎng)頁(yè)還好,可是對(duì)于邏輯性極強(qiáng)的手機(jī)頁(yè)面來(lái)說(shuō),這種方法并不會(huì)有多方便快捷,至少,這種靜態(tài)的頁(yè)面無(wú)法表現(xiàn)各種交互和信息的層次.如下圖這樣的結(jié)構(gòu),我是會(huì)暈的,而且也不是非常愛(ài)看。

當(dāng)然,對(duì)于不同的團(tuán)隊(duì)來(lái)說(shuō),產(chǎn)品經(jīng)理和設(shè)計(jì)師之間配合的方式都不盡相同.我們需要從中發(fā)現(xiàn)一種適合自己團(tuán)隊(duì)的配合方式. 對(duì)于迭代速度很快的app,小團(tuán)隊(duì),首次開(kāi)發(fā)的情況下,產(chǎn)品經(jīng)理或者ue可以只畫(huà)出app的框架及流程稿,剩下的交由ui設(shè)計(jì)師來(lái)設(shè)計(jì)也未嘗不可,這樣可以給設(shè)計(jì)師更大的發(fā)揮空間,雖然這樣會(huì)給設(shè)計(jì)師提出更高的要求,但,相信一個(gè)負(fù)責(zé)任的設(shè)計(jì)師是非常愿意這么做的,這對(duì)于自身的提高幫助巨大啊難道不是嗎? 另外產(chǎn)品經(jīng)理可以騰出時(shí)間來(lái)做更重要的事情(產(chǎn)品的同學(xué)你們懂的..)

3.提高設(shè)計(jì)效率的神器

為了能對(duì)設(shè)計(jì)稿的交互有更深的理解,以及將更具象化的信息傳遞給開(kāi)發(fā)者及其他人. 我們可以借助某些手段來(lái)提前做出一款A(yù)PP來(lái).

(1)flash.

是的,廉頗老矣,尚能飯否. flash這種神器做這個(gè)可是最合適不過(guò)的了.對(duì)于某些交互效果,如果在設(shè)計(jì)階段就有分歧,我們可以考慮用flash將其實(shí)現(xiàn)出來(lái),用于討論或者演示.但.flash的缺點(diǎn)也非常明顯,開(kāi)發(fā)出demo的成本實(shí)在是,有點(diǎn)高.另外,不要妄想在手機(jī)上可以看到直觀的效果了.
去年在設(shè)計(jì)某客戶端的時(shí)候,曾使用flash做過(guò)一次flyout效果.很直觀的展示在電腦上,各種異見(jiàn)瞬間消失,項(xiàng)目最終得以推動(dòng)(雖然最后效果并不怎么樣,呵呵.)
(2)快現(xiàn).

一款號(hào)稱手繪原型,拍照并在手機(jī)上制作交互的軟件.但不知道為什么沒(méi)能流行起來(lái).不過(guò)如果單純只是在手機(jī)上來(lái)將各種交互全部穿起來(lái)的話,效率確實(shí)低的可憐.

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

(3)騰訊uidesigner

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

UIDesigner繼承了快現(xiàn)的亮點(diǎn),但不同的是,這款軟件將制作交互的平臺(tái)由手機(jī)轉(zhuǎn)到了PC端.實(shí)際使用中確實(shí)方便很多.配合手機(jī)端的 UIDplayer,幾乎可以完整的將設(shè)計(jì)稿做成一個(gè)像模像樣的APP并可以在手機(jī)上完美的呈現(xiàn)出來(lái),這對(duì)于演示來(lái)說(shuō),確實(shí)非常方便.強(qiáng)烈推薦使用.

下邊是電腦端截圖.

(4).PS play

http://www.czdes.cn/ps-play

同樣是騰訊出品的一款軟件

在做移動(dòng)客戶端設(shè)計(jì)時(shí),我們不可能只在顯示器上觀看效果.一來(lái)沒(méi)有任何臨場(chǎng)感,二來(lái)無(wú)法準(zhǔn)確判定設(shè)計(jì)的真實(shí)效果. 所以我們就需要將設(shè)計(jì)效果圖導(dǎo)入手機(jī)來(lái)進(jìn)行查看.但…..難道一次次的插入拔出插入拔出除了讓你的愛(ài)機(jī)high到極點(diǎn)之外,難道你們就不考慮下數(shù)據(jù)線的感 受嗎?! 難道你們就不考慮下usb口的感受嗎!? (╯`□′)╯(┴—┴

好吧!神器來(lái)了. 我們僅僅需要的是在手機(jī)上安裝ps play這款軟件.pc端僅僅需要photoshop即可(ps版本需要CS5及以上).然后確保在電腦和手機(jī)在一個(gè)局域網(wǎng)的情況下.打開(kāi) photoshop,然后點(diǎn)擊菜單>edit>remote connections, 確認(rèn)信息.然后打開(kāi)手機(jī)的ps play軟件,找到電腦的這個(gè)ip地址,你在ps中設(shè)計(jì)的文件即可同步在photoshop上展示了.非常方便. 我心愛(ài)的iphone請(qǐng)養(yǎng)精蓄銳接受下一次usb線的調(diào)教吧!

4.與工程師配合.

工程師作為最終實(shí)現(xiàn)各種效果的人,必須要做好隨時(shí)溝通的覺(jué)悟.否則,即使設(shè)計(jì)稿再漂亮,那也只是一張破圖而已,沒(méi)有任何價(jià)值.設(shè)計(jì)師必須在產(chǎn)品開(kāi)發(fā)中后期與工程師保持密切配合.確保自己的設(shè)計(jì)最終能夠付諸實(shí)現(xiàn).

由于工程師的思維與設(shè)計(jì)師及產(chǎn)品經(jīng)理差別巨大(請(qǐng)不要拍我),所以在將設(shè)計(jì)稿交付工程師過(guò)程中,除了使用上邊提到的神器將主要的交互及設(shè)計(jì)思路演示以達(dá)到思想統(tǒng)一外,其中的各種小技巧也必須掌握足夠.

(1)前期:設(shè)計(jì)稿交付工程師

將設(shè)計(jì)稿中各種顏色標(biāo)在設(shè)計(jì)稿上. 必要時(shí)可標(biāo)注各種間距的像素值.不過(guò)鑒于工程量巨大而且即使標(biāo)出來(lái)這些,后期效果也并不是太好.因此,這一步我建議省略,只標(biāo)出顏色值即可.

(2).中期:與工程師溝通及研究各種效果的實(shí)現(xiàn)方式.想當(dāng)然的效果是會(huì)得到工程師的鄙視的.因此必須在這個(gè)階段與工程師一起研究每一個(gè)效果如何實(shí)現(xiàn).確保最后返工會(huì)降至最少.

(3).后期:調(diào)頁(yè)面.

這是個(gè)非常苦逼的階段. 經(jīng)過(guò)一段時(shí)間的開(kāi)發(fā),哇,終于可以將app裝到自己的手機(jī)上一睹芳容了.可是…. 最終的效果卻是…

請(qǐng)理解工程師是以實(shí)現(xiàn)功能優(yōu)先的哈. 這個(gè)沒(méi)對(duì)齊那個(gè)沒(méi)對(duì)齊,這種問(wèn)題, 就要靠后期搬個(gè)小凳子坐在工程師旁邊默默陪伴身體力行來(lái)解決啦.終于特么的可以有指點(diǎn)江山的感覺(jué)了!你們懂么?(內(nèi)牛滿面ing…)

恩,最后一部是非常重要的,作為設(shè)計(jì)師及產(chǎn)品經(jīng)理的你一定要在設(shè)計(jì)的各個(gè)階段對(duì)我們的程序猿同學(xué)動(dòng)之以情曉之以理無(wú)時(shí)不刻的對(duì)他們進(jìn)行洗腦,ui很重要ui最重要.聞聞我身上有像素味么親?

恩！如果你身邊有一個(gè)可以不用你說(shuō)話就把界面做的跟效果圖一模一樣的程序猿，嫁了吧！

原文地址：站酷
作者：我愛(ài)靜電

 
================微信推薦================
想在手機(jī)上、被窩里獲取網(wǎng)頁(yè)設(shè)計(jì)教程、無(wú)線端設(shè)計(jì)經(jīng)驗(yàn)分享和各種意想不到的資源"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：