2015-7-13 用心設(shè)計
藍藍設(shè)計( m.73404.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里
在搬著小板凳坐工程師 Buddy 旁邊送果汁送零食的日子里，我受 Google Material Design 的啟發(fā)，折騰出一套自認(rèn)提高雙方溝通效率的標(biāo)注規(guī)則，心情挺好還為此做了模板，最下面有源文件的下載地址。
沒錯，Markman 是傳說中的標(biāo)注神器，看起來也確實方便快捷，但是當(dāng)一個頁面中，要同時標(biāo)注間距、大小、顏色和字號時，過多的信息一齊扔給工程師，就會讓人有些抓狂。比如這樣：
這里的標(biāo)注雖然都有清晰的箭頭指示，但卻并不具有視覺邏輯，或者說呈現(xiàn)出來的視覺邏輯并不符合開發(fā)邏輯。工程師在搭建一個頁面的時候，會先去架構(gòu)布 局，一塊內(nèi)容一塊內(nèi)容劃分好，接著填充進內(nèi)容，最后來修改視覺的樣式。那么我們也應(yīng)該按照順序，先告訴人家每個模塊的間距啦大小啦，再告訴人家用什么字體 和顏色，也就是先有布局標(biāo)注，再有樣式標(biāo)注。
這就是我的做法，視覺稿完成后，每一個頁面拿出來放在左邊，再用三個畫板來說明它。
標(biāo)注信息分類之后，我還會給標(biāo)注本身設(shè)置共享樣式：塊面通常用藍色的遮罩，區(qū)別不同百分比時則用紅黃綠的遮罩，數(shù)字間距用紅底白字，視覺樣式則用藍 底白字，這樣的好處是：對與設(shè)計師，可以快捷修改所有標(biāo)注樣式；對于工程師，快速建立對這套標(biāo)注視覺語言的認(rèn)知，明白不同顏色所代表的信息屬性，更方便的 找到他所需要的信息。
設(shè)計實現(xiàn)之前，就和工程師們一起統(tǒng)一一套樣式規(guī)范，除了常見的顏色和字體之外，我還會把通用的 UI 組件拿出來，一半是針對系統(tǒng)原生控件的樣式定制（alert/toast/radio btn/switch…），一半則是完全自定義的 UI 組件（產(chǎn)品自己的 UI kit）可以是任何會高頻復(fù)用的產(chǎn)品功能性的東西，比如這里的 SKU 選擇器和按鈕。
在項目進程中，我甚至?xí)凸こ處焸儨贤ê?，然后在每個組件旁寫上這個組件是誰正在實現(xiàn)或已經(jīng)實現(xiàn)，附在項目共享文件或者郵件里，避免重復(fù)勞動。
統(tǒng)一標(biāo)注的好處不僅是我們自己在后續(xù)的設(shè)計中可以復(fù)用和遵守， 對于 web/iOS/Andriod 的工程師而言，也能提高代碼效率同時保持不同平臺最終效果的統(tǒng)一，后續(xù)迭代的時候也不會出現(xiàn)莫名其妙的樣式和代碼。如果遇到產(chǎn)品的大版本更新，也正好趁此 機會和工程師們一起好好梳理一遍現(xiàn)有的樣式，清除掉不再使用的樣式，指定好新的層級。
好了，看完之后大概會有人吐槽說有必要么這樣的標(biāo)注多浪費時間啊，那么請去看看@圭多達萊佐這位朋友的樂譜，get it? 就是要追求?。ㄑ鎏臁?
最后，這次模板是我自己的一個 redesign concept， 基于foundmyanimal.com，（一家 base 在 Brooklyn 的工作室，手工制作非常有愛的銘牌、項圈等動物飾品）圖片素材全部源自其網(wǎng)站和 Instagram，不得轉(zhuǎn)載。
至于我的源文件，大家隨便用，I don’t give a fuck.
當(dāng)然，這是一套還不夠嚴(yán)謹(jǐn)不夠科學(xué)的自創(chuàng)標(biāo)注，設(shè)計師盆友們，特別是工程師盆友們！覺得有任何值得改進的地方請隨時跟我討論~ help me improve : P
Happy designing~
藍藍設(shè)計的小編 http://m.73404.com.cn