一像素的恩怨情仇！程序猿與設(shè)計獅之間的那些事兒

編者按：很久沒聊過設(shè)計師職場了，今天說回那個千古難題：工程師與設(shè)計師的1像素之爭。設(shè)計師認(rèn)為一像素至關(guān)重要，非改不可，工程師認(rèn)為小題大做，精力沒花在刀刃上，有的設(shè)計師也容易因此沮喪，如果你是其中之一，推薦來看會代碼的設(shè)計師如何解決這件事。

@JingDesign?：無意挑起所謂的職位之間的矛盾，直到今天看到這樣一篇文章的時候，是的，這是一篇關(guān)于程序猿和設(shè)計獅之間的文章，起源是這樣的，一位網(wǎng)友在某社區(qū)上提了一個問題：

• 開發(fā)人員拒絕按照 UI 標(biāo)注還原設(shè)計，如何讓他理解精確還原的重要性，從而去修改代碼？
• 當(dāng)一個開發(fā)工程師屢次發(fā)問「這里讓我移1px有什么意義，我為什么要浪費(fèi)時間這么做」且拒絕修改時，如何讓這位開發(fā)理解、認(rèn)識到修改的重要性？
• 為什么國內(nèi)很多視覺設(shè)計師得為了那些雖然看起來很細(xì)碎、甚至可謂之雞毛蒜皮，但對于設(shè)計師還是很重要的細(xì)節(jié)追著工程師去修改，一項項列出問題，卻得不 到工程師正面的回應(yīng)？舉個例子，聽同事介紹過 Frog 的工程師會為了不影響視覺設(shè)計師工作，自己開發(fā)出檢查設(shè)計還原的軟件進(jìn)行還原檢查修改。
• 是什么背后的原因另產(chǎn)品的設(shè)計實現(xiàn)這么困難？是因為設(shè)計師不懂代碼？部分技術(shù)人員的審美意識？還是大廠心態(tài)或者其他什么原因？這種狀況怎么解決？到什么時代或是契機(jī)才能夠被解決？

嗯，不出所料，頂?shù)阶罡叩幕卮鹗沁@樣的。

限于篇幅，全文可右戳查看：http://zhi.hu.com

通篇文章中，作者不遺余力的對設(shè)計師進(jìn)行污蔑和調(diào)侃，甚至將話題轉(zhuǎn)移， 文中寫到：

• 對于軟件開發(fā)而言，碼農(nóng)的工作是必需的。設(shè)計師的工作是可選的。
• 沒人做設(shè)計，軟件也可以用。實際上在扁平化的今天，許多開發(fā)比如iOS，系統(tǒng)默認(rèn)的模版雖然不好看，但也不會是個毛胚房。但沒人寫代碼，那就是屁也沒得。
• 工作的重要性決定誰聽誰的。就是這么簡單。

嗯，靜電看完后，唯一感覺是 這是黑社會還是自我感覺太良好了呢？如果說用戶群決定了回答的質(zhì)量的話，我一點都不懷疑，除了對這個社區(qū)表達(dá)一點點微弱的反感情緒外，靜電還想對現(xiàn)實中設(shè)計師和開發(fā)的關(guān)系寫一點自己的心得和體會。

首先表明立場，靜電是位設(shè)計師，懂一點代碼以及產(chǎn)品。

緣起 1 像素，改與不改？

作為一個負(fù)責(zé)任的設(shè)計師來說，一像素對他們來說，重不重要，如果說不重要，那靜電認(rèn)為這不是一個合格的設(shè)計師，因為這是設(shè)計師的本職工作；

如果說重要，有的人會說，這個世界上沒有完美的事物，安啦安啦，不改也沒什么大不了，別折騰啦！

當(dāng)他們?nèi)デ笾_發(fā)想改掉這個問題的時候，開發(fā)可能會說，改這個工作量很大，需要很多時間，況且只是一個像素的問題，沒什么大影響，不要改了。

產(chǎn)品經(jīng)理說：我們最終的目標(biāo)是保證產(chǎn)品快速迭代，保證核心功能沒問題即可。1像素不用調(diào)了，浪費(fèi)時間。

別折騰啦，別折騰啦，別折騰啦！

這個時候想的開的設(shè)計師估計會放棄這樣的執(zhí)著，雖然心有不甘，但也無可奈何，心想:不改就不改吧，所有事物都是不完美的。

隨著時間的推移，一像素問題就這么越來越多。最終，當(dāng)有成百上千的一像素問題積累到一起的時候，突然有一天，用戶說：“這個軟件（網(wǎng)頁）怎么這么丑？你們的設(shè)計怎么做的？能力不行吧？”

設(shè)計師周圍的所有人：“這個是你設(shè)計的問題，你就不能好好設(shè)計嗎？你的水平有問題！態(tài)度有問題！”

設(shè)計師：“。。。”

我想這是發(fā)生在我們所有人身邊的事情，最終一款亂糟糟的軟件（網(wǎng)頁）就這么上線了。至于市場反響，你懂的。。。

我想這個時候設(shè)計師心里肯定有一萬頭草泥馬在奔騰。

一個爛產(chǎn)品就是在無數(shù)的妥協(xié)和一像素的錯位中產(chǎn)生的。在當(dāng)今產(chǎn)品同質(zhì)化嚴(yán)重的情況下，用戶自然會選擇界面美觀易用的產(chǎn)品。

沒人做設(shè)計，軟件也可以用？

是的，可以用，沒人做設(shè)計，軟件絕對可以用，就是用著很糾結(jié)就是了。舉個栗子，當(dāng)人類還在遠(yuǎn)古時代的時候，大家伙都是吃生肉的，沒人覺得不妥。后來呢，有個愛折騰的人對大家說：“那啥，其實用火烤的肉更好吃喲~” ，我估計當(dāng)時有很多對他說：“你瞎搞毛線啊，生肉就是好吃，吃生肉就夠了，吃烤的多麻煩！”。但最終熟肉還是戰(zhàn)勝了生肉，結(jié)果就是后來大家沒人吃生肉了。靜電想說的就是，湊合不是不可以，但湊合已經(jīng)無法滿足當(dāng)今人們?nèi)找嫣岣叩膶徝佬枨罅恕Ｈ藗儾粌H要吃飯，而且要吃飽飯，然后還要吃的美味。

設(shè)計存在的價值亦然。至于知X上某人的言論，程序是必選的，設(shè)計是可選的。靜電除了呵呵，還想附帶釋放嘲諷技能：“其實程序也不是可選的，因為吃飯才是可選的，活著才是可選的，其他神馬的，都特么見鬼去吧！這位仁兄，你說對嗎？”

當(dāng)設(shè)計師開始寫代碼，程序員開始嘗試設(shè)計的時候，你在做什么？

其實一像素的問題壓根不是問題，在設(shè)計師完成設(shè)計稿，設(shè)計縝密，標(biāo)注明確的情況下，開發(fā)人員在遵從設(shè)計稿的情況下，還原的程度是非常高的，基本可以到達(dá)80%到90%，這個時候的一些小細(xì)節(jié)，靜電建議作為設(shè)計師的大家積極與開發(fā)溝通協(xié)調(diào)來解決問題，相信大部分的開發(fā)者都是非常愿意幫助我們解決問題的。 另一方面，在溝通過程中，設(shè)計師也需要從與開發(fā)者的合作過程中理解開發(fā)者是如何進(jìn)行設(shè)計稿的復(fù)現(xiàn)的，代碼如何寫，布局如何合理，哪些地方是可以避免發(fā)生問題的，哪些是可以與開發(fā)者一起思考想辦法解決的。

關(guān)于與工程師溝通的藝術(shù)，同學(xué)們可以在這里找到一點技巧：《職場實用經(jīng)驗！聊聊交互設(shè)計師與開發(fā)溝通的技巧》

靜電從事APP開發(fā)過程中，電腦上是安裝于開發(fā)者一樣的運(yùn)行環(huán)境的（xcode），并使用git保持代碼與開發(fā)人員的代碼同步. 這樣有助于我們了解軟件的產(chǎn)生過程，必要的時候，我們可以順帶學(xué)習(xí)一些樣式調(diào)整的小技巧，對于設(shè)計師來說，這學(xué)到了更多東西有助設(shè)計稿的實現(xiàn)，對于開發(fā)者，他們一定是非常歡迎你這么做的，因為身邊有一個同樣會寫一些代碼，幫他們解決問題而不是提出問題扔給他們不管的人。 于是好基友就這么誕生了。

在這個過程中，一個非常好的現(xiàn)象正在發(fā)生，由于你們關(guān)系的進(jìn)展，作為設(shè)計師的你，在程序員遇到取色或者某些簡單的圖片問題的時候，你可以非常方便的來幫他，甚至可以幫他裝個photoshop慢慢教他做一些簡單的圖形處理。

這樣，相互協(xié)作和融洽的溝通就產(chǎn)生了。這個時候，你在做什么呢？是在寫一篇酸溜溜的檄文，還是無休止的抱怨對方？

不多說，現(xiàn)在就可以來學(xué)習(xí)，簡單易懂，培養(yǎng)興趣再說！《給設(shè)計師們的代碼指南！HTML與CSS簡介（一）》

優(yōu)秀的設(shè)計師和開發(fā)者：溝通與相互理解

其實我們一直在強(qiáng)調(diào)溝通，什么是溝通呢，雙方的交流才叫溝通，單方面的講解，另一方面卻無動于衷，不叫溝通。我們之前假設(shè)，設(shè)計師和開發(fā)者都是通情達(dá)理，氣場不那么相悖的。 但萬一遇到氣場不合的呢？或者對方就是不愿意去改著1px呢？原因可能是：

1，設(shè)計稿不夠謹(jǐn)慎，頻繁的改動，設(shè)計師請想象一下給客戶做東西改到吐血時的情景。

2，如果設(shè)計稿謹(jǐn)慎，標(biāo)注完整，但始終還原度較低，低到你無法忍受。 那么除了溝通，還有一個能力和態(tài)度的問題擺在你面前。 如果說初次磨合，我們可以嘗試來進(jìn)行溝通，在雙方態(tài)度都不錯的情況下，對方一般都愿意幫忙;還有一種情況，這個是大家最關(guān)注的問題，就是對方極度不配合，這個時候我們需要求助PM或者你的領(lǐng)導(dǎo)作為中間人來協(xié)調(diào)，成功將矛盾化解，記住，在這種情形下，設(shè)計師就不要過于較真兒了，否則針尖對麥芒，結(jié)果是兩敗俱傷。

3，當(dāng)設(shè)計師做到第二節(jié)描述的做到了體諒和理解的情況下，但對方依舊極度不配合，最終導(dǎo)致產(chǎn)品出問題，這個時候就不是設(shè)計師能解決的了，相信你的上級或者領(lǐng)導(dǎo)會對整個情況有更深入的了解和判斷。 你所要做的，就是做好本職工作完美到?jīng)]有紕漏即可。因為最終產(chǎn)品的質(zhì)量已經(jīng)不是你能把控的了的了，順其自然。通過其他形式尋找自身成就感。

4，沒有完善的bug反饋和質(zhì)量控制機(jī)制，將問題歸于個體認(rèn)知所帶來的差異而不是流程的標(biāo)準(zhǔn)化。

5，溝通不善.我知道設(shè)計師您在說要改改改.但開發(fā)可能是"....（都不愛理你）"

致我們親愛的開發(fā)者

1. 我們知道您很忙，每天面對無數(shù)的代碼看花了雙眼，無數(shù)bug需要修改，但我很想學(xué)一點代碼來分擔(dān)你的痛苦。
2. 我們知道您并不是low爆的沒品位的代碼狂人，您的內(nèi)心一定有對完美的追求。
3. 請你理解溝通是雙向的，很多時候，我們需要你來告訴對代碼一竅不通的設(shè)計師，怎么做更好。
4. 我們知道簡潔優(yōu)雅執(zhí)行效率超高的代碼是您畢生追求，但與設(shè)計師一起合作修改一個像素的問題，說不定也很好玩呢？
5. 我們的最終目的是一樣的，作出一款讓人滿意的產(chǎn)品。 請相信設(shè)計師的專業(yè)程度，盡管你可能比他更有才。
6. 設(shè)計師很樂意幫你在電腦上安裝一些更方便你進(jìn)行界面開發(fā)的小工具。
7. 請不要再說："程序要會ps，要美術(shù)干嘛？"這樣傷人心的話。

致自己——為1像素努力的設(shè)計師

1. 嚴(yán)格要求自己，一定沒錯。請認(rèn)真對待自己的每一個設(shè)計稿和每一個1px。
2. 如果你被甲方的變態(tài)客戶蹂躪過，請考慮一下，你現(xiàn)在作為甲方是如何對待"乙方"的。
3. 如果一個像素可以調(diào)一次，那就不要調(diào)兩次，如果反復(fù)調(diào)節(jié)多次，最好跟開發(fā)道個歉，然后學(xué)習(xí)如何自己調(diào)。
4. 學(xué)習(xí)簡單的代碼，其實他們沒那么難，甚至還挺好玩，試著求助工程師，讓他們在你電腦上裝一個開發(fā)環(huán)境，相信他們很樂意幫你。
5. 我們的最終目的是一樣的，作出一款讓人滿意的產(chǎn)品。 請相信開發(fā)者的專業(yè)程度，盡管你可能比他更有才。
6. 請相信，未來職業(yè)之間的區(qū)分會越來越模糊。 你就是這樣一個會寫代碼的牛逼設(shè)計師，也許是一個懂設(shè)計的產(chǎn)品經(jīng)理,讓他們羨慕去吧。
7. 試著相信，每個開發(fā)者都是可愛且善良的。 如果你無法相信上一句，請不要放棄尋找。

最后，我愛每一個工作認(rèn)真敬業(yè)，懂的上進(jìn)，有追求的設(shè)計師和開發(fā)工程師。

作者公眾號：jingdesign91

如何搞定設(shè)計師的職場溝通？高手來教你！

馬親王教你如何跟乙方溝通！
《親王駕到！馬伯庸教你如何做一個萬年好甲方》

10年廣告人教你如何與設(shè)計師明確需求！
《奔走相告！甲方如何與設(shè)計師明確需求？》

Facebook設(shè)計總監(jiān)教你如何與工程師溝通！
《寫給設(shè)計師：如何與工程師一起工作？》

原文地址：ui.cn
作者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量83萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：