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