@我愛靜電 和pc端網(wǎng)站的設(shè)計(jì)和開發(fā)相比，移動(dòng)客戶端的開發(fā)工作，對絕大多數(shù)人來說，絕對是一個(gè)嶄新的行當(dāng)。 那么當(dāng)我們每天在iphone上，在各種安卓在各種pad上習(xí)以為常的刷著微博看著網(wǎng)文切著西瓜找著你妹的時(shí)候，當(dāng)一大波人信心滿懷的開始步入這個(gè)看似熟悉，或者說”簡單”的工作中后,突然發(fā)現(xiàn),悲催,完全不是那么回事嘛！
相信很大一部分產(chǎn)品或者設(shè)計(jì)或者開發(fā)人員是從之前的傳統(tǒng)互聯(lián)網(wǎng)”出家”過來的，當(dāng)然，這包括我還有身邊很多很多人?？傊?，這是一個(gè)坑，因?yàn)锳PP，這個(gè)”看上去很簡單”的東西，真心不簡單。
下面分享一下在這一年多點(diǎn)的時(shí)間里，談?wù)勎业囊恍┙?jīng)驗(yàn)，水平有限，如有錯(cuò)誤，歡迎指正。
本文偏技術(shù)流，一共分兩部分，一部分是流程，另一部分是設(shè)計(jì)經(jīng)驗(yàn)及思路。以下是第一部分，我們看看流程這檔子事。
我們現(xiàn)在習(xí)慣于將某一個(gè)app叫做一個(gè)產(chǎn)品. 相對于web端的產(chǎn)品開發(fā)流程. 移動(dòng)客戶端的開發(fā)流程在某些流程上開始發(fā)生變化。
web端. 我們做一個(gè)產(chǎn)品. 從產(chǎn)品立項(xiàng)開始。
產(chǎn)品經(jīng)理提出需求(原型等)>討論需求>通過需求>交付設(shè)計(jì)師設(shè)計(jì)layout>確認(rèn)>頁面制作(俗稱切頁面)>交付工程師開發(fā)>修改細(xì)節(jié)及bug>上線。
移動(dòng)客戶端
產(chǎn)品經(jīng)理提出需求(原型等)>討論需求>通過需求>設(shè)計(jì)layout(包括交互設(shè)計(jì)及ui設(shè)計(jì))>確認(rèn)>切圖>交付工程師開發(fā)>后期修改>上線。
哦?好像差別不是很大嘛?
我們主要談一下一些職位分工的變化. 前者和后者,在開發(fā)過程中,一些職位消失了.一些職位出現(xiàn)了. 對于我本身的理解,設(shè)計(jì)師更加的細(xì)分,雖然交互設(shè)計(jì)師在web端也會存在(分工比較細(xì)的公司),但客戶端開發(fā)來說,交互卻作為一個(gè)非常重要的一環(huán)出現(xiàn)了.對于寸土寸金的手機(jī)屏幕來說,對于開發(fā)者邏輯能力的要求也越來越高,如何在這么小的屏幕里對各種功能進(jìn)行合理有效的布局顯得更加重要.雖然在某些創(chuàng)業(yè)型組織中,設(shè)計(jì)師人數(shù)上仍然處于弱勢,但對于對體驗(yàn)要求越來越高的用戶來說.這絕對是個(gè)不能忽略的要點(diǎn).
另外,我們會發(fā)現(xiàn),前端工程師這樣的傳統(tǒng)職位在移動(dòng)開發(fā)的流程中,消失了! 沒錯(cuò),是消失了! 設(shè)計(jì)師設(shè)計(jì)完設(shè)計(jì)稿,一般會直接進(jìn)行切圖的步驟.因?yàn)?我們知道,絕大部分的安卓和ios客戶端,以及其他客戶端,并不基于html(是因?yàn)樾Ч托阅芴盍藛?自己體驗(yàn)下吧!).所以,為我們悲催的前端工程師稍微的默哀一下(請與時(shí)俱進(jìn)的做出改變吧!干爸爹!).
還是前端工程師,真的消失了嗎? 不好意思,我錯(cuò)了! 慢慢的發(fā)現(xiàn),他們的工作被另一個(gè)”前端”代替了.這就是我們可愛的程序猿同學(xué).雖然傳統(tǒng)的前端工程師并不能在移動(dòng)客戶端開發(fā)中發(fā)揮作用,但,有一點(diǎn)是沒有變化的. 手機(jī)客戶端里也是需要各種”布局”的,就像web頁中的字體,圖片等等的樣式,各種對齊,這個(gè)還是要有人來做的.因此這部分工作,慢慢被開發(fā)人員所代替了.設(shè)計(jì)后期,對于各種細(xì)節(jié)的調(diào)整,轉(zhuǎn)由這部分負(fù)責(zé)”界面”的工程師來和產(chǎn)品以及ui同學(xué)對接負(fù)責(zé)調(diào)整.
前面提到,手機(jī)客戶端設(shè)計(jì)過程中的邏輯性比web產(chǎn)品的設(shè)計(jì)強(qiáng)不只一點(diǎn)半點(diǎn).按照一般的產(chǎn)品開發(fā)流程,產(chǎn)品經(jīng)理會在前期會使用各種原型工具如visio,axure等等來做出線框圖.然后交由設(shè)計(jì)師進(jìn)行ui設(shè)計(jì).可是,根據(jù)之前的開發(fā)經(jīng)驗(yàn),對于網(wǎng)頁還好,可是對于邏輯性極強(qiáng)的手機(jī)頁面來說,這種方法并不會有多方便快捷,至少,這種靜態(tài)的頁面無法表現(xiàn)各種交互和信息的層次.如下圖這樣的結(jié)構(gòu),我是會暈的,而且也不是非常愛看。
當(dāng)然,對于不同的團(tuán)隊(duì)來說,產(chǎn)品經(jīng)理和設(shè)計(jì)師之間配合的方式都不盡相同.我們需要從中發(fā)現(xiàn)一種適合自己團(tuán)隊(duì)的配合方式. 對于迭代速度很快的app,小團(tuán)隊(duì),首次開發(fā)的情況下,產(chǎn)品經(jīng)理或者ue可以只畫出app的框架及流程稿,剩下的交由ui設(shè)計(jì)師來設(shè)計(jì)也未嘗不可,這樣可以給設(shè)計(jì)師更大的發(fā)揮空間,雖然這樣會給設(shè)計(jì)師提出更高的要求,但,相信一個(gè)負(fù)責(zé)任的設(shè)計(jì)師是非常愿意這么做的,這對于自身的提高幫助巨大啊難道不是嗎? 另外產(chǎn)品經(jīng)理可以騰出時(shí)間來做更重要的事情(產(chǎn)品的同學(xué)你們懂的..)
為了能對設(shè)計(jì)稿的交互有更深的理解,以及將更具象化的信息傳遞給開發(fā)者及其他人. 我們可以借助某些手段來提前做出一款A(yù)PP來.
(1)flash.
是的,廉頗老矣,尚能飯否. flash這種神器做這個(gè)可是最合適不過的了.對于某些交互效果,如果在設(shè)計(jì)階段就有分歧,我們可以考慮用flash將其實(shí)現(xiàn)出來,用于討論或者演示.但.flash的缺點(diǎn)也非常明顯,開發(fā)出demo的成本實(shí)在是,有點(diǎn)高.另外,不要妄想在手機(jī)上可以看到直觀的效果了.
去年在設(shè)計(jì)某客戶端的時(shí)候,曾使用flash做過一次flyout效果.很直觀的展示在電腦上,各種異見瞬間消失,項(xiàng)目最終得以推動(dòng)(雖然最后效果并不怎么樣,呵呵.)
(2)快現(xiàn).
一款號稱手繪原型,拍照并在手機(jī)上制作交互的軟件.但不知道為什么沒能流行起來.不過如果單純只是在手機(jī)上來將各種交互全部穿起來的話,效率確實(shí)低的可憐.
http://www.36kr.com/p/178205.html
(3)騰訊uidesigner
UIDesigner繼承了快現(xiàn)的亮點(diǎn),但不同的是,這款軟件將制作交互的平臺由手機(jī)轉(zhuǎn)到了PC端.實(shí)際使用中確實(shí)方便很多.配合手機(jī)端的 UIDplayer,幾乎可以完整的將設(shè)計(jì)稿做成一個(gè)像模像樣的APP并可以在手機(jī)上完美的呈現(xiàn)出來,這對于演示來說,確實(shí)非常方便.強(qiáng)烈推薦使用.
下邊是電腦端截圖.
(4).PS play
同樣是騰訊出品的一款軟件
在做移動(dòng)客戶端設(shè)計(jì)時(shí),我們不可能只在顯示器上觀看效果.一來沒有任何臨場感,二來無法準(zhǔn)確判定設(shè)計(jì)的真實(shí)效果. 所以我們就需要將設(shè)計(jì)效果圖導(dǎo)入手機(jī)來進(jìn)行查看.但…..難道一次次的插入拔出插入拔出除了讓你的愛機(jī)high到極點(diǎn)之外,難道你們就不考慮下數(shù)據(jù)線的感 受嗎?! 難道你們就不考慮下usb口的感受嗎!? (╯`□′)╯(┴—┴
好吧!神器來了. 我們僅僅需要的是在手機(jī)上安裝ps play這款軟件.pc端僅僅需要photoshop即可(ps版本需要CS5及以上).然后確保在電腦和手機(jī)在一個(gè)局域網(wǎng)的情況下.打開 photoshop,然后點(diǎn)擊菜單>edit>remote connections, 確認(rèn)信息.然后打開手機(jī)的ps play軟件,找到電腦的這個(gè)ip地址,你在ps中設(shè)計(jì)的文件即可同步在photoshop上展示了.非常方便. 我心愛的iphone請養(yǎng)精蓄銳接受下一次usb線的調(diào)教吧!
工程師作為最終實(shí)現(xiàn)各種效果的人,必須要做好隨時(shí)溝通的覺悟.否則,即使設(shè)計(jì)稿再漂亮,那也只是一張破圖而已,沒有任何價(jià)值.設(shè)計(jì)師必須在產(chǎn)品開發(fā)中后期與工程師保持密切配合.確保自己的設(shè)計(jì)最終能夠付諸實(shí)現(xiàn).
由于工程師的思維與設(shè)計(jì)師及產(chǎn)品經(jīng)理差別巨大(請不要拍我),所以在將設(shè)計(jì)稿交付工程師過程中,除了使用上邊提到的神器將主要的交互及設(shè)計(jì)思路演示以達(dá)到思想統(tǒng)一外,其中的各種小技巧也必須掌握足夠.
(1)前期:設(shè)計(jì)稿交付工程師
將設(shè)計(jì)稿中各種顏色標(biāo)在設(shè)計(jì)稿上. 必要時(shí)可標(biāo)注各種間距的像素值.不過鑒于工程量巨大而且即使標(biāo)出來這些,后期效果也并不是太好.因此,這一步我建議省略,只標(biāo)出顏色值即可.
(2).中期:與工程師溝通及研究各種效果的實(shí)現(xiàn)方式.想當(dāng)然的效果是會得到工程師的鄙視的.因此必須在這個(gè)階段與工程師一起研究每一個(gè)效果如何實(shí)現(xiàn).確保最后返工會降至最少.
(3).后期:調(diào)頁面.
這是個(gè)非?？啾频碾A段. 經(jīng)過一段時(shí)間的開發(fā),哇,終于可以將app裝到自己的手機(jī)上一睹芳容了.可是…. 最終的效果卻是…
請理解工程師是以實(shí)現(xiàn)功能優(yōu)先的哈. 這個(gè)沒對齊那個(gè)沒對齊,這種問題, 就要靠后期搬個(gè)小凳子坐在工程師旁邊默默陪伴身體力行來解決啦.終于特么的可以有指點(diǎn)江山的感覺了!你們懂么?(內(nèi)牛滿面ing…)
恩,最后一部是非常重要的,作為設(shè)計(jì)師及產(chǎn)品經(jīng)理的你一定要在設(shè)計(jì)的各個(gè)階段對我們的程序猿同學(xué)動(dòng)之以情曉之以理無時(shí)不刻的對他們進(jìn)行洗腦,ui很重要ui最重要.聞聞我身上有像素味么親?
恩！如果你身邊有一個(gè)可以不用你說話就把界面做的跟效果圖一模一樣的程序猿，嫁了吧！
================微信推薦================
想在手機(jī)上、被窩里獲取網(wǎng)頁設(shè)計(jì)教程、無線端設(shè)計(jì)經(jīng)驗(yàn)分享和各種意想不到的資源”福利”嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：
聯(lián)系客服
