@我愛靜電 和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.hx168888.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】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：