有人說產(chǎn)品開發(fā)過程中web前端沒有結(jié)論特恬，只有隨需求不停的修改悠砚，但是項(xiàng)目必須要有階段性的結(jié)論士嚎，作為一個(gè)前端開發(fā)凹嘲，如何避免為了某一個(gè)需求而陷入反復(fù)更改的困境呢师倔？不要把責(zé)任全部推到產(chǎn)品不斷的需求更改或者設(shè)計(jì)不停的視覺調(diào)整上，你其實(shí)可以做得更好周蹭。在不斷的追求新技術(shù)趋艘，打磨技術(shù)精益求精之時(shí)，拓寬自己的知識面凶朗，尋找正確了工作姿勢也很重要瓷胧。
首先，心態(tài)很重要棚愤。
如果你期望你的工作狀態(tài)是這樣：產(chǎn)品經(jīng)理把一個(gè)功能需求的每一個(gè)環(huán)節(jié)都考慮周到搓萧，每一個(gè)細(xì)節(jié)點(diǎn)的覆蓋全面，每一個(gè)想法都表達(dá)完美（當(dāng)然宛畦，這是一個(gè)好的產(chǎn)品經(jīng)理應(yīng)該追求并達(dá)到的）瘸洛，交互和視覺能夠以用戶體驗(yàn)和美學(xué)的角度完美的詮釋產(chǎn)品的需求點(diǎn)，然后將所有需求的前期溝通準(zhǔn)備都ready刃永，給到開發(fā)開始投入生產(chǎn)货矮，然后你作為一個(gè)前端開發(fā)，與后臺一起合作斯够，逐個(gè)的還原產(chǎn)品需求文檔所描述的功能與細(xì)節(jié)囚玫，偶然在作為一個(gè)開發(fā)的同時(shí)喧锦，也作為一個(gè)用戶向產(chǎn)品提出一些邏輯不合理的點(diǎn)，溝通敲定抓督，最后開發(fā)完畢燃少，產(chǎn)品視覺體驗(yàn)覺得OK，可以上線铃在。
那在工作的前幾年阵具，你過的一定很煩惱，因?yàn)槟憧赡芸偸窃诩m結(jié)這些問題：
1定铜、按照產(chǎn)品的需求單實(shí)現(xiàn)功能點(diǎn)后阳液，產(chǎn)品經(jīng)理體驗(yàn)發(fā)現(xiàn)整體的流程邏輯跑起來太繁瑣，改揣炕！
2帘皿、視覺走查發(fā)現(xiàn)頁面按照視覺稿給定的尺寸在不同的屏幕尺寸上并不協(xié)調(diào)，改畸陡！
3鹰溜、交互發(fā)現(xiàn)按照產(chǎn)品的邏輯更改后，整個(gè)交互變得并不友好丁恭，需要重新調(diào)整交互方案曹动，不爽，改牲览！
.....
所以你發(fā)現(xiàn)墓陈，作為一個(gè)前端開發(fā)，在這一個(gè)需求上竭恬，完成你的開發(fā)量后跛蛋，你又得大改熬的！并且你還得告訴自己痊硕，一切以產(chǎn)品的完美為依托，在發(fā)現(xiàn)有問題的時(shí)候押框，就是得盡力配合改動(dòng)岔绸。
但你內(nèi)心還一定有點(diǎn)小抱怨，產(chǎn)品經(jīng)理需求還沒想好就開始投入設(shè)計(jì)和開發(fā)橡伞，交互設(shè)計(jì)不完善的問題設(shè)計(jì)人員竟然在設(shè)計(jì)過程中沒有發(fā)現(xiàn)盒揉，是他們的不專業(yè)影響了開發(fā)進(jìn)度。
如果一直以這種角度思考問題兑徘，作為一個(gè)完全可以被代替的代碼搬運(yùn)工刚盈，還期待著身邊的搭檔完美解決所有的問題，你只能在抱怨中毫無作為挂脑，不要忘記自己是在一個(gè)團(tuán)隊(duì)中藕漱，如何更有效率的幫助團(tuán)隊(duì)完成目標(biāo)欲侮，如何自主的把控節(jié)奏很重要。
產(chǎn)品經(jīng)理在對著一個(gè)生動(dòng)的頁面時(shí)的想法遠(yuǎn)比在對著腦中或者文檔上描述的功能點(diǎn)時(shí)更豐富肋联，而前端開發(fā)對一個(gè)產(chǎn)品細(xì)節(jié)的包括是最全面的威蕉。所以，作為一個(gè)前端開發(fā)橄仍，你可以做的更多韧涨。
在產(chǎn)品宣講的前期，根據(jù)以往開發(fā)的經(jīng)驗(yàn)侮繁，你可以更多的提出產(chǎn)品所遺落的細(xì)節(jié)虑粥，而這些細(xì)節(jié)的補(bǔ)充可以讓交互視覺在設(shè)計(jì)時(shí)更全面。而在開發(fā)過程中宪哩，你會跟你所開發(fā)的產(chǎn)品進(jìn)行一次全面深入的對話舀奶，每一個(gè)按鈕，每一塊信息的表達(dá)斋射，每種用戶操作所對應(yīng)的反饋育勺，你的程序都必須覆蓋到，所以及時(shí)的更產(chǎn)品視覺一起溝通這些反饋的表現(xiàn)形式罗岖，是否需要調(diào)整涧至，以避免在開發(fā)完成后的二次變更。在開發(fā)的組件設(shè)計(jì)階段桑包，如何合理封裝組件邏輯南蓬、適度的預(yù)留彈性入口，也極為重要哑了，我的看法是組件化不僅僅是為了開發(fā)人員的代碼復(fù)用赘方，也為了頁面模塊的快速調(diào)整修改。
這些注意點(diǎn)作為一個(gè)稍微有經(jīng)驗(yàn)的前端開發(fā)弱左，可能都有自己的一套實(shí)行方式窄陡，但如何在團(tuán)隊(duì)合作時(shí)落實(shí)的更好，效率更高呢拆火。有人說開發(fā)人員改行做產(chǎn)品經(jīng)理有優(yōu)勢跳夭，因?yàn)橛斜容^嚴(yán)謹(jǐn)?shù)漠a(chǎn)品邏輯思維，但是我覺得產(chǎn)品經(jīng)理们镜，設(shè)計(jì)币叹，開發(fā)人員三者應(yīng)該是互通的，產(chǎn)品經(jīng)理當(dāng)然是更注重產(chǎn)品的思維和了解市場模狭，但也需要有良好的邏輯思維颈抚，了解基本的視覺規(guī)范。而設(shè)計(jì)人員嚼鹉，尤其是交互設(shè)計(jì)贩汉，需要更了解用戶體驗(yàn)規(guī)則九妈，有好的審美，但是也需要了解產(chǎn)品的基本要素雾鬼，了解開發(fā)的復(fù)雜度萌朱。所以開發(fā)人員，在不斷最求精益求精的技術(shù)時(shí)策菜，也應(yīng)該不斷增強(qiáng)自己的產(chǎn)品思維晶疼，只有了解真正的產(chǎn)品需求，才能在開發(fā)前或者開發(fā)中發(fā)現(xiàn)潛在問題又憨，只有懂得設(shè)計(jì)的基本原則翠霍，才能在合理與不合理中拋出可能的風(fēng)險(xiǎn)，提前調(diào)整方案蠢莺。
產(chǎn)品思維
當(dāng)產(chǎn)品經(jīng)理為了一個(gè)用戶點(diǎn)擊行為而列出不下五六種相應(yīng)的響應(yīng)模式時(shí)寒匙，跟你談到用戶行為引導(dǎo)和用戶轉(zhuǎn)化，請理解其合理性躏将，甚至給出更多的細(xì)節(jié)確認(rèn)會讓后期的開發(fā)更有效率锄弱，網(wǎng)上有很多產(chǎn)品思維類的書籍和研究，廣泛涉獵更有助于培養(yǎng)自己的見解祸憋。
一個(gè)產(chǎn)品經(jīng)理好友推薦的一些書籍有空可以慢慢讀一下：
《Free》
《結(jié)網(wǎng)》
《啟示錄》
《簡約至上》
設(shè)計(jì)的基本原則
不要再糾結(jié)1px的問題会宪，抱怨設(shè)計(jì)的眼睛為何如此毒辣，為何你看起來毫無差別完全按照設(shè)計(jì)稿實(shí)現(xiàn)的東西蚯窥，能被挑出那么多的問題掸鹅。同時(shí)，從移動(dòng)端iphone4的尺寸到google nexus6拦赠，從12寸到29寸的顯示屏巍沙，一份靜態(tài)的設(shè)計(jì)稿大多數(shù)情況下都不能覆蓋到所有的顯示屏尺寸，作為最接近產(chǎn)品產(chǎn)出的開發(fā)人員荷鼠，你需要和設(shè)計(jì)溝通給出最合理的兼容方案句携。
收集的網(wǎng)上評價(jià)比較適合入門級別理解的設(shè)計(jì)書籍：
《The Design of Everyday Things 》
《破繭成蝶-用戶體驗(yàn)設(shè)計(jì)師》
《眾妙之門——網(wǎng)站UI設(shè)計(jì)之道》
《寫給大家看的設(shè)計(jì)書》
組件化思維
前面說的兩點(diǎn)都需要日常生活中慢慢積累理解，現(xiàn)在要談的我們前端開發(fā)熟悉的點(diǎn)了颊咬，組件化思維务甥。這里不是要談前端的組件化方案牡辽，而是組件設(shè)計(jì)的出發(fā)點(diǎn)喳篇。
1、養(yǎng)成代碼組件化的習(xí)慣态辛，它會使你頁面模塊的添加麸澜、刪除、更改變得更優(yōu)雅奏黑，而管理和閱讀也會更舒心炊邦。
2编矾、收攏參數(shù)入口，保持可擴(kuò)展性馁害，在設(shè)計(jì)組件時(shí)窄俏，不可能把所有的可能性變動(dòng)都設(shè)計(jì)并實(shí)現(xiàn)，但組件如果要復(fù)用碘菜，日后變更或者添加新功能是必然的凹蜈，所以保持良好的可擴(kuò)展性非常重要，如果每次的修改都要花大量的經(jīng)歷在向前兼容確認(rèn)上忍啸，就失去的組件化的意義仰坦。
3、代碼文檔化计雌，組件維護(hù)不是一件容易事悄晃，代碼形成文檔化的風(fēng)格后，本身就是一種自規(guī)范凿滤，不同的人修改或者使用代碼時(shí)妈橄，不需要額外的規(guī)范文檔就能合理遵循組件規(guī)范。
4翁脆、合理控制組件粒度眷细，根據(jù)業(yè)務(wù)需求衡量組件復(fù)雜度與修改復(fù)用程度的性價(jià)比。
