為什麼 Android 工程師不喜歡寫界面細節?


不請自來。

三年安卓開發經歷中,大大小小十來個項目,合作過的設計師七八位,常常被界面問題坑得鼻青臉腫,大半夜改完功能一個人拎著鼻涕對著設計圖揣摩半天改界面。

設計不僅僅是一張圖!

設計不僅僅是一張圖!

設計不僅僅是一張圖!

重要的話必須說三遍。合作過的人當中,唯一明白這個道理的,是以前部門的UI總監,也是目前為止遇到水平最高的設計師(本人見識短淺,沒見過什麼大牛)。印象最深刻的是一個項目首頁中上方三分之一處有個顯示天氣和時間的控制項,他拿過板子瞄一眼,眉頭皺一下,雙手端平到眼前,來回斜了兩次,說出了那句我至今難忘的話:「控制項位置高了一個像素,你回去改下」,回去查完發現錯誤的時候當場就給跪了,自此看到美院出身的設計師都覺得對方腦後自帶光環,不自覺想要拉一下拉鏈檢查一下全身影像有沒有什麼七八像素的毛病。

一個對細節這麼在意的設計師,會只丟給你一張標記了密密麻麻數值的保真圖就不管,產品出來以後才抱怨么?明顯不會。當時剛入行,不明白他一些做法的意義,現在想起來,基本上圍繞一個點:「讓程序員充分了解設計師的意圖」。

好比同樣一個居中的頂頭標題控制項,它是固定寬度始終在中間,還是兩邊留白寬度固定;一個頁面裡面,哪些部分相同的顏色是關聯的,當風格變化時一起改變,而其他哪些部分的顏色只是現在看上去一致實際是不關聯的;列表顯示的文字,是怎樣對齊的,最多顯示多少字;相似控制項中的留白大小哪些是關聯的,哪些只是在這個解析度下大小恰好相等的......

諸如此類細節,設計師考慮越多溝通越細,安卓工程師才能越大程度上實現你的要求。後來合作的設計師,往往都是一張圖丟過來就完事,你知道這種情況下重新去理解還原的難度有多高么?就跟戀愛中的男生揣摩女生心思一樣:

至於猜中猜不中,全看經驗豐富不豐富。

嗯,這個標題應該是水平拉伸的;大概,這幾個部分的顏色應該寫在一起,一起變化;咦,這個列表在不同狀況的頁面里寫的字數不一樣,A圖列表左邊的字數跟B圖列表右邊的字數加起來會顯示不下,那中間五分之三處分割,兩邊沿著分割線各自留白......

到了這個時候,基本也就不會管顯示出來是不是跟設計圖一致了。

底線:不會顯示錯誤,在不同設備上沒有顯示錯誤;

:在大部分設備上顯示基本一致不會很扭曲,某個標準的解析度設備上跟設計圖一致程度95%以上。

高階:你時間很多,今晚不用加班么?!

至於更高的追求,看看界面到這個程度上程序員已經花了多少時間再說吧。如果設計師把很多細節都已經先考慮清楚,完整溝通了,界面達到進階程度花費的時間會減少到三分之一到四分之一,但現實往往是,一張圖丟過來,有想要問的細節問題,只能得到一個回答:跟ios一樣。。。然後我就呵呵了,自己繼續回到牆角去猜去分解。

如果什麼都不考慮,就按照一個設備的顯示狀況,呼啦呼啦根據設計圖給出來的數值把頁面弄出來。是的,設計師開心,還原度高,程序員也開心,不用動腦花時間少,但問題是,這樣出來的東西能在其他設備上用么?一上線用戶換個設備連登錄按鈕都找不到好嗎?

這種情況下,能喜歡去寫頁面細節的才真奇怪:

1.花了那麼多時間搗鼓頁面細節你們看不出來,下次花時間少點好了。

2.還有功能沒完成呢,頁面往後放放,反正不影響進度,說不定明天你就改了,等定下再說。

3.天天跟我較勁頁面,我是寫代碼的,又不只是個寫頁面的(某群體中槍)。

4.安卓又不是撿來的,憑什麼細節問題之前不溝通定標準,各自實現了就要改成跟ios一樣?!

5.geek的審美一向跟普通用戶是不同的,我對自己的審美有自知,沒說的部分就不擅自去弄了,等後面再去問設計吧,來,先看看這個bug是怎麼回事。。

......

綜上,看到一個應用的安卓頁面在不同設備都很好看時,要麼是他們有很好溝通的設計師,要麼是有一個深夜加班一邊調界面一邊懷疑自己審美的工程師。。


來?把你的設計放出來叫我們看看?我為什麼在做細節的時候連陰影動態都考慮上了呢?如果你是嚴格按照平台的設計規範做的,我站在你這邊噴你們工程師,如果不是,呵呵。


見過一種牛B的做法,與大家分享下,把美工的整個圖當背景用,咦,有人問了,不切么,切個幾把。。。再切也做不出老人機控制項。。。。然後控制項全部透明,好吧居然上線了。據說想出這種辦法的人。。。還。。。。卧槽。。。不說了(逃。。。俺當時看到代碼和界面文件直接。。。Orz了

補充下,多款平板,用程序top和left計算,反正透明,偏也偏不到哪去,後來我們去接這個項目重寫了界面部分。

再後來我們又重寫了iOS和Web和HTML5手機版本。。。

期間美工全部裁了,換了一個懂量圖的,終於給搞定了,歷時1年,全部120萬行代碼,精簡掉一多半。

不匿了。。。。


我來猜測下你們美工的設計稿:按鈕大小300*80px,水平居中,豎直距底邊距45px,顏色#66CCFF,字體雅黑,字型大小23.5px,字色#EEEEEE,陰影顏色#000000,陰影半徑22px

整體設計稿300ppi,1080*1920px

告訴你句實話,這玩意我看不懂,也調不出來。

我曾試過和美工說,請用dp標註唄。美工回我,dp?dpi吧?

如果你們美工通讀Android Design,出的設計稿令人髮指的詳細好用,那請你申請把那個Android攻城獅開掉。如果相反,活該人家不在乎界面細節。你自己都不在乎。

如果你不懂技術,怎麼區分?看設計稿邊距標的是16dp還是44px,並且dp是否是8的倍數。

-----------------更新的分割線--------------

評論區有不少人提到「不會算這個當什麼程序猿」。對於這種不那麼友好的問題,我非常得意的回答你:這不是我的活兒~

實際上,本人除了不會用數位板繪圖以外其他都還會比劃兩下,所謂One man army我不是不能幹,從出產品原型到簡單切圖到碼代碼到測試甚至日系專精的各類式樣書。

然而你覺得這對產品本身是件好事嗎?這次幫別人圓了,就會有無數個下次。我們美工至今還會切出960*128像素大小的button背景,還是純色的且沒有highlight版。第一次按dp公式算好調好了,第十次呢?Google使用mvc的本意就是讓設計師在xml里自己微調。既然不願意學xml/不願意裝環境/不會用IDE,那我來寫,但請你把自己的工作做好,做到位。


這種問題顯然太絕對,而且完全取決於你的公司重不重視設計、設計師給出的設計稿規不規範。

說到這我覺得完全有必要給你看下我廠設計師的設計稿。此時當然要祭出 Chris 的一篇回答了:視覺設計師是怎樣讓前端工程師 100% 實現設計效果的? - 陳希 Chris 的回答

所以,我覺得這壓根兒不是 Android 工程師的問題,是你們的設計師給的界面稿讓你看了就沒有調的慾望吧?

我記得我來魅族之前,就只知道當年 @李楠 在發布會上說魅族對界面的調整是像素級的。後來直到去年我以軟體工程師的身份加入魅族,才知道我廠對界面的調整壓根不是像素級的,而是 「0.X」 像素級。你打開 Flyme 4.0 的系統升級,這麼簡單一個 App,可去年在做的時候,我的視覺小夥伴找我前後調整了4次界面,每次改 dimens.xml 都幾乎是「幾點幾dip」級別的修改。但這些值完全不需要我去量或者測,因為視覺的小夥伴會直接告訴我哪裡哪裡差了幾 dip。

對了還有動畫。熟悉 Android Animation 的都知道 Android 的動畫有插值器的概念。現在 MX4 最新體驗版應用中心,詳情頁下面那個安裝按鈕,點擊之後會有一個往右縮進的動畫。我記得剛開始做的時候用遍了所有的插值器都不能讓視覺的同事滿意。後來第二天,動畫組的小夥伴直接給了我一份每秒 26 幀的值,從 0 到 1 ,精確到小數點後4位。有了這個,你只需要寫一個自定義的插值器 implements TimeInterpolator,再重寫一下 getInterpolation(float input) 就好,弄完之後效果一步到位,動畫組的小夥伴也很滿意。

所以很多時候我不覺得這是 Android 工程師的問題,而是你們的設計對這塊重不重視,另外還有就像 @Chris 說的,他們能不能把自己的語言轉化成工程師能聽懂的語言,這點也很重要。


因為是創業公司,資源不夠,時間不足。我所有設計稿都沒有標註過。改設計改功能還來不及,標註就別提了。

但我們的Android應用開發出來,十分精細,一眼望過去毫無違和。雖然也有不盡然完美的地方,但也大體80分了。

所以我覺得「Android工程師不喜歡寫界面細節」絕對是看人!像我們的情況,沒有時間標註,但我們工程師沒少問我,這個地方多少dp,這個地方你看是這樣不?我就馬上打開設計稿看一看。所以主要在於做好產品的意願,主要在於溝通。

大公司里我也呆過,產品經理被要求一定寫豐富完整的文檔再開發,就是為了到時候有一個功能缺了,工程師可以馬上噴說你產品經理沒寫,或者產品經理馬上噴說這地方我寫了你沒實現。所以標註同理,就是為了追責而已。你沒標我就不做,這就是伸手思維,能不能做好我不管,你不標,我就有理由不做,或者不做好。

當然,工程師為何十分懈怠,以下情況完全理解:

1. 設計得太丑,工程師開發的也沒興緻。

2. 不與工程師討論,也不屑於聽取工程師的意見,覺得工程師啥也不懂,全世界我最NB。

2. 沒想好就做,沒想好就改,各種重複勞動。

2015.4.13 為避免誤會的補充。

其實每個人的看法,都帶有自己的假設。而每個人不同的假設,是誤會的來源。

質疑的同學,我猜是假設了「這貨借創業公司資源不夠為名,不做標註這種份內之事,估計本來也懶得做。以下是我的觀點:

第一,理想情況下,設計師應該標註尺寸。更完整的表達自己的設計,也能提高開發的效率和完成度。

第二,創業公司的情況,是百廢待興,萬丈高樓平地起。我的第一優先順序,是完成所有的設計。做完一個模塊的設計稿之後,會馬上去做下一個模塊的設計稿,而不是去標註。第一個原因是時間資源不足。第二個原因是在這種從零開始的設計,做完一個模塊的設計去做下一個模塊,很有可能會遇到一個問題,進而考慮到整體的設計,會修改之前模塊的設計。這就是說,如果做完一個模塊就去標註,那麼這個標註的功夫就很可能是浪費的。

你可能會說,那就全都做完再標註咯?可是創業公司里,工程師是不會有時間等到所有設計都定好再開發的。這是創業公司和成熟公司的區別,也會造成思考方式的不同,以及誤解。

事實上,我們現階段服務端的工程師和客戶端工程師協調API,也是通過溝通和看代碼的方式。而沒有去把每一個API都寫好完美的注釋和豐富的文檔。這個道理是一樣的。

所以,設計稿標註,API文檔,這種事情,都是整個項目已經基本定型的時候才會考慮的事情。

第三,我現在在做的一部分工作,就是整理之前的設計稿,整理一份UI規範,包含了詳細的標註。於是也開始了對於之前界面的規範化和走查。

這是一種迭代,這是我們所採用的工作方法。未必完善,僅供大家參考討論吧。


我們最美系列的產品都很注重體驗,從來沒見過哪個夥伴因為視覺稿沒標註就開腔罵人的。漂亮合理的視覺輸出工程師是非常願意去實現的,哪怕要花比平時多幾倍的時間。為什麼?大家都把產品當做是自己的孩子,每個人也在做自己的代表作產品,每天成千上萬的用戶使用產品帶來的自豪感和滿足感遠遠超過調整UI的繁複。

所以

從開發角度,不要把安卓UI開發之當做體力活,大家都在發現美創造美,你覺得不美,噁心開發不下去你不會去和設計師溝通嗎?

從設計師角度,不要把視覺輸出稿標註顏色和像素就當做是溝通,文檔郵件甚至im都解決不了溝通問題。產品在手機上顯示的不好很多情況是溝通不暢的結果。

最後,一切把設計師稱作美工的都是耍流氓,你不尊重他的工作,即便是暫時的能力達不到,他自然也不會尊重你,從產品上都能看出來。

啰嗦一句,分工沒錯,但別把分工當做流水線,遲早出問題。


個人觀點:

這個問題是多方面因素造成的,拿安卓舉例:

首先,工程師的能力。之前我呆過的一家公司,工程師的水平高低差別很大,新來的工程師基本上不了解安卓的架構,即便你很明確的標出了坐標和數值,仍然不能做到位;

其次,設計師的問題。如果你提供的guide或者圖片資源很混亂,工程師看不懂,甚至需要他們自己去計算,這樣的話你的設想的畫面是肯定出不來的。我上上家公司,設計師不懂px轉換dip的數值,還有哪些圖片是相對和絕對對齊,這些知識盲點顯然增加了工程師開發的難度。

再次,就是看團隊的融洽度了,設計師需要了解一點code,工程師也需要懂一些ui知識。團隊配合需要磨合,要是彼此之間缺乏信任和尊重,總是互相推脫責任,再好的方案也不能轉化成產品。


1. 抱怨設計稿不好看就不做的,看著就醉了。

2. 設計稿的細節問題,有問題為什麼不溝通呢,等設計師主動和你溝通,你為什麼不能主動去和設計師溝通?溝通下來設計師提供的產出才能符合工作流的要求。世界上有這麼一個規範的開發工作流及文檔規範是適用於所有項目,拿來就能用的么?如果沒有,請主動溝通。

3. 程序允許有 BUG,設計師的設計稿也會有考慮不周的地方,不要最高標準要求別人,換個標準要求自己。還是那句話,誰有問題,都應該主動溝通。

4. 設計師不懂基本的android設計規範,請直接炮轟,但大家一起糊弄一下算了是怎麼回事呢?

5. 希望設計師了解程序員的工作,設計師也希望程序員能了解設計稿的意圖。兩個工種的思維方式和關注點是不同的,需要互相理解。WEB 開發過程中優秀的前端就是連接兩邊的紐帶。


同情國內Android開發者

別說Android了,我們iOS都不願意做

為啥呢

你沒事整個按鈕大小是奇數是什麼鬼,間距不能被2/3整除是什麼鬼?

看都不看HIG直接跟我說這樣設計最好看是什麼鬼

我不懂設計,但是我至少懂HIG啊.

拿著網頁設計照搬到手機上這活還能不能好好乾了?

做視覺稿時候你放在手機上看過了嗎,那按鈕那大小,位置真的大丈夫嗎

一天一小改兩天一大改誰有空沒事陪你改細節?老子功能還沒做完呢好嗎


恰恰相反我們這裡iOS的經常是說差不多就好了,能用就行。。。而安卓則是完全按照UI來做。你這句安卓工程師不喜歡做界面細節有點太片面了吧。

另外如果你自己設計個IOS的UI去做那人家做的差也只能,呵呵了。不討論dp px那些,單純的交互。


ui是動的,不是圖片!手機尺寸不是都一樣,你給我像素是沒用的!code比你畫圖複雜,不是ios有什麼,android里就也有什麼控制項!你畫一個ios組建,我他媽要寫半天!你能不能自己用android手機?!!!你知不知道操作邏輯是不一樣的!!!!邏輯啊!!!


寫界面還好,各種微調太耗時間


iOS Human Interface Guidelines: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Android Design: http://developer.android.com/design/index.html

Material Design: http://www.google.com/design/spec/material-design/introduction.html


扯淡,界面設計師連細節都不在乎么???那特么叫什麼界面設計,只會丟一張標註過的圖那就是垃圾!!再說說程序如果他只是混日子那就別幹了,設計或者是自己又或者是別人發現的問題一定要改!!收起自己的玻璃心吧,即使是某一方面的專家也會出問題!虛心接受別人的意見吧!!


一般是以iOS設計為主(或者只懂iOS)的產品經理的問題…… 別賴程序員 別噴我……


有時候我會在想,這個射雞屎有木有把設計好的圖片放在手機上看過一次?

------------------------------------內容補充的華麗分割線-------------------------------------

以前有做過兩年的android開發,現在才轉了做產品,兩年前我就很想說

你用一套4s的圖給我,要我適配當時MX,小米2,華為P6,三星S3,note12,HTC OneX,HTC G7G10G11G12,最後還他媽的拿一台android系統並且是320*480解析度的4s過來。一會說在G7上字體的兩邊間距那麼小,一會說在Onx X上兩邊間距那麼大,顏色不對。操你媽,我都打不下去了。麻煩你們作圖的時候放上不同的手機上看看先好嗎。


美工來回答為什麼不用dp標註,因為目前能標dp又好操作的標註軟體不多,我只知道像素大廚可以。我本人常用markman,操作便捷,但是不能自動轉化成dp。如果用ps標註dp效率極低。

目前和公司同事合作我用的都是2倍效果圖,同事們都是自動除以二,之前我也是和他們說過這個問題的,也沒有人反對。

其他問題有時間再回,希望多溝通,找到更多高效合作的方法。


管住手不去翻歷史記錄,肯定都是充滿爭議的內容。

我認為 App 開發是 UI 的開發比數據、性能更重要的工作。

Web 開發都已經獨立出前端(甚至有偏 UI 和偏 JS 兩種)的職位,App 開發也需要有人專註在 UI 部分。

如果只是會寫 Java 就去做 Android 開發,那他一定不是個合格的 App 開發者。


出來工作發現對接的 Android 工程師都不喜歡做界面的細節

———— 為什麼不喜歡做界面細節?因為我做一部分就要反覆揣摩你的設計稿,數據對不上啊,我要換算dp,px啊,給個奇數我怎麼居中啊,字型大小根本就不是你在windows上的字型大小好嗎點點點。切圖也不按尺寸分好目錄,拷貝個圖還要翻來翻去找,圖全部還要重命名,時不時還要給你改點9。反覆在這種困擾中寫界面,結果就是半小時的活要干兩小時,就像你讓賽車手去開拖拉機那麼不爽。那麼,我當然不會喜歡做界面細節啊!更何況本來就沒技術含量,做體力活都讓人做不爽。

每次 UI 給到很準確的顏色值、間距、字型大小大小……

————不能正確應用在目標設備上,不能按目標設備特性來做設計的話,數值準確地比神州X號還準確有毛用啊!

但出來的界面就是巨丑無比,和視覺稿相比差距太大,

————估計你的視覺稿放手機上也沒有好看到哪兒去

雖然 Android 很難匹配,

———— 知道難匹配還不多用點心

但 Android 應用也有很多界面比較好的。

————好的肯定不會來抱怨,因為Android界面做得好的設計知道怎麼才能做得好,題主顯然還不知道。

如果以上你都確確實實能保證自己的設計想周到了,就拿著你的證據去打攻城獅的臉吧。希望你去打臉的時候想周到些,不然可能反被打哦。

--------------------------------- 上面是寫給經驗不足又愛抱怨的看 -----------------------------------

實際上這個問題你想解決太簡單了,去找你的攻城獅,親熱地拉著他/她問,我的設計稿跟你做出來的實際效果不太一樣耶,幫我看看設計上哪兒不太合理么?他/她應該很快就能給你很多反饋意見,外加修正他/她偷懶亂寫的地方。下一次你們溝通效率將會有質的飛躍,彼此的工作也能更順暢。


推薦閱讀:

Chrome 的界面設計在近幾年是不是沒有較大的改變?
學習 UI 設計有哪裡推薦的網站?
今天我開發的校園社交APP上線,但是我不懂運營怎麼辦?
扁平化設計中,按鈕是如何讓人有點擊欲的?
機械設計研究生在讀,明年畢業,還有機會轉行嗎?

TAG:Android開發 | 用戶界面設計 | 視覺設計師 | Android工程師 |