一辛馆、前言
上一篇文章是給大家提供一個制作UI設(shè)計規(guī)范的大體思路烹看，這一篇準(zhǔn)備來聊聊我們在具體執(zhí)行過程中遇到的最大問題昔驱、瓶頸是什么疹尾！
此篇文章適讀人群：想進(jìn)階的初級UI設(shè)計師、有追求的初級交互設(shè)計師骤肛。
二纳本、發(fā)現(xiàn)問題
前期做規(guī)范的過程是十分痛苦的，每做一個板塊都要花很多時間去思考怎么表達(dá)萌衬、展示才能讓其他設(shè)計師和程序員都一目了饮醇，然而隨著內(nèi)容的增加，發(fā)現(xiàn)很多地方無法深入的執(zhí)行下去秕豫，只能含糊其辭，給我們制作規(guī)范的人員帶來了很大苦惱观蓄。
為什么有如此大的執(zhí)行阻礙呢混移？帶著問題我們找到團(tuán)隊的一位設(shè)計前輩請教了一番，在前輩的指點下侮穿，終于發(fā)現(xiàn)了問題所在:我們對于前端如何實現(xiàn)設(shè)計稿其實并沒有很好的了解歌径。
三、解決問題
大家要明白亲茅，如果你沒有徹底了解你做的界面回铛，那么做規(guī)范就會十分艱難狗准，因為你只是做了表層的視覺設(shè)計，換句話來說就是你根本不明白界面是怎么用代碼實現(xiàn)出來的茵肃。我就是因為遇到了這樣的問題腔长，所以在做規(guī)范的時候，經(jīng)常無從下手验残。
了解原因之后捞附，我們決定如果后期再發(fā)生執(zhí)行困難的情況，我們就會向設(shè)計前輩或者前端程序員咨詢一些簡單的實現(xiàn)方法您没，慢慢了解他們的思維模式鸟召，讓設(shè)計執(zhí)行變得越來越順暢。
四氨鹏、舉個實例
其實遇到困惑的地方還是蠻多的欧募，這里就拿二級導(dǎo)航來舉例，希望大家能舉一反三仆抵，多多思考與實踐槽片。
圖1-1是XX項目的所有關(guān)于二級導(dǎo)航的樣式，因為這一塊的界面不是我做的（都是借口）肢础，所以規(guī)范不太了解还栓，導(dǎo)致在做整個項目的規(guī)范時，遇到了極大的阻礙传轰。
最初看這幾個二級導(dǎo)航時剩盒，我的第一感覺是4個樣式遵循相同規(guī)則：整條導(dǎo)航欄平均N等分后，文字在每個等分區(qū)域內(nèi)居中慨蛙，但是仔細(xì)查看間距后發(fā)現(xiàn)只有2辽聊、3的樣式遵循這樣的規(guī)律，1和4并不遵循期贫，那1和4的樣式到底是什么呢跟匆？
導(dǎo)航1，如下圖
標(biāo)明顏色后通砍，我們可以清晰看出玛臂，原來這個導(dǎo)航是平均分成了3等分（紅綠藍(lán)），只不過將綠色分割成兩半放在左右兩邊封孙，這樣我們就可以根據(jù)整條導(dǎo)航的長度計算出每塊區(qū)域的長度迹冤，不論是開發(fā)還是設(shè)計師都可以一目了然并且明白其中的設(shè)計規(guī)則。
導(dǎo)航4虎忌，如下圖
首先我們先來認(rèn)識一個單詞：auto（自動的意思）泡徙，就是指數(shù)值可以變化、不固定膜蠢。
再來看這個導(dǎo)航樣式堪藐，在程序員眼中這個導(dǎo)航其實是由兩個容器組成的莉兰，一個容器是：綠色區(qū)域+紅色區(qū)域+藍(lán)色區(qū)域，另一個容器是：黃色區(qū)域（不可滑動礁竞，大小固定）糖荒。
而第一個容器內(nèi)的綠色和藍(lán)色部分（間距）也是固定的，所以只有紅色區(qū)域是可變化的苏章，因為紅色區(qū)域的文字個數(shù)是可以變化的寂嘉，我們只要給出字體大小即可。
所以對于導(dǎo)航4的規(guī)范枫绅，我們要給出綠色泉孩、藍(lán)色、黃色區(qū)域的寬度并淋；文字（選中寓搬、未選中）的大小及顏色；黃色區(qū)域內(nèi)圖標(biāo)的大小县耽、間距以及滑動規(guī)則就基本可以高度還原出視覺稿的樣式了句喷。
了解了這些前端知識之后，我們發(fā)現(xiàn)再次制做二級導(dǎo)航的規(guī)范時兔毙，過程順暢很多唾琼。
五、心得
先來總結(jié)一下當(dāng)設(shè)計師擁有一定開發(fā)思維后的好處有哪些澎剥？
1.減少與開發(fā)哥哥不必要的溝通锡溯，推進(jìn)工作的順利進(jìn)行。
2.對于設(shè)計師自身管理設(shè)計文件哑姚、規(guī)范化作圖祭饭、規(guī)范的制定、頁面標(biāo)注都有極大的幫助叙量。
3.避免設(shè)計很多無法落地的設(shè)計方案倡蝙，省時省力，提高工作效率绞佩。
任何事情都有其內(nèi)在的套路與規(guī)律寺鸥，我們必須要了解事物的本質(zhì)，才能幫助我們更好的執(zhí)行征炼；所有的苦惱與迷茫都是源自你對事物的理解不夠透徹析既，所以讓我們從現(xiàn)在開始，鍛煉透過事物看本質(zhì)的思維能力谆奥，就算以后你不做設(shè)計了，這種能力也可以伴隨著你拂玻，讓你受益終身酸些！
