做一份讓工程師淚流滿面的標(biāo)注

2015-7-13    用心設(shè)計(jì)



藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源:莫貝網(wǎng)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,請(qǐng)點(diǎn)這里

在搬著小板凳坐工程師 Buddy 旁邊送果汁送零食的日子里,我受 Google Material Design 的啟發(fā),折騰出一套自認(rèn)提高雙方溝通效率的標(biāo)注規(guī)則,心情挺好還為此做了模板,最下面有源文件的下載地址。


為什么傳統(tǒng)的標(biāo)注方法讓人難受?

沒錯(cuò),Markman 是傳說中的標(biāo)注神器,看起來也確實(shí)方便快捷,但是當(dāng)一個(gè)頁(yè)面中,要同時(shí)標(biāo)注間距、大小、顏色和字號(hào)時(shí),過多的信息一齊扔給工程師,就會(huì)讓人有些抓狂。比如這樣:

這里的標(biāo)注雖然都有清晰的箭頭指示,但卻并不具有視覺邏輯,或者說呈現(xiàn)出來的視覺邏輯并不符合開發(fā)邏輯。工程師在搭建一個(gè)頁(yè)面的時(shí)候,會(huì)先去架構(gòu)布 局,一塊內(nèi)容一塊內(nèi)容劃分好,接著填充進(jìn)內(nèi)容,最后來修改視覺的樣式。那么我們也應(yīng)該按照順序,先告訴人家每個(gè)模塊的間距啦大小啦,再告訴人家用什么字體 和顏色,也就是先有布局標(biāo)注,再有樣式標(biāo)注。

用2個(gè)頁(yè)面解釋布局,再用1個(gè)頁(yè)面解釋樣式

這就是我的做法,視覺稿完成后,每一個(gè)頁(yè)面拿出來放在左邊,再用三個(gè)畫板來說明它。

  1. 橫向布局:解釋元素左右的外間距、內(nèi)間距和橫向?qū)挾?。(這里要考慮到針對(duì)不同寬度屏幕的適配,標(biāo)注是給固定值還是百分比)
  2. 縱向布局:解釋元素的上下間距和高度。(有時(shí)要確保頁(yè)面里最重要的信息——比如一個(gè) CFA btn——在不同屏幕大小中是否都出現(xiàn)在了首屏,判斷標(biāo)注是向上定位還是向下定位 )
  3. 視覺樣式:字體、字號(hào)、行高、顏色、透明度、圓角。

標(biāo)注信息分類之后,我還會(huì)給標(biāo)注本身設(shè)置共享樣式:塊面通常用藍(lán)色的遮罩,區(qū)別不同百分比時(shí)則用紅黃綠的遮罩,數(shù)字間距用紅底白字,視覺樣式則用藍(lán) 底白字,這樣的好處是:對(duì)與設(shè)計(jì)師,可以快捷修改所有標(biāo)注樣式;對(duì)于工程師,快速建立對(duì)這套標(biāo)注視覺語(yǔ)言的認(rèn)知,明白不同顏色所代表的信息屬性,更方便的 找到他所需要的信息。

單獨(dú)拎出可復(fù)用的組件,統(tǒng)一標(biāo)注

設(shè)計(jì)實(shí)現(xiàn)之前,就和工程師們一起統(tǒng)一一套樣式規(guī)范,除了常見的顏色和字體之外,我還會(huì)把通用的 UI 組件拿出來,一半是針對(duì)系統(tǒng)原生控件的樣式定制(alert/toast/radio btn/switch…),一半則是完全自定義的 UI 組件(產(chǎn)品自己的 UI kit)可以是任何會(huì)高頻復(fù)用的產(chǎn)品功能性的東西,比如這里的 SKU 選擇器和按鈕。

在項(xiàng)目進(jìn)程中,我甚至?xí)凸こ處焸儨贤ê?,然后在每個(gè)組件旁寫上這個(gè)組件是誰(shuí)正在實(shí)現(xiàn)或已經(jīng)實(shí)現(xiàn),附在項(xiàng)目共享文件或者郵件里,避免重復(fù)勞動(dòng)。

統(tǒng)一標(biāo)注的好處不僅是我們自己在后續(xù)的設(shè)計(jì)中可以復(fù)用和遵守, 對(duì)于 web/iOS/Andriod 的工程師而言,也能提高代碼效率同時(shí)保持不同平臺(tái)最終效果的統(tǒng)一,后續(xù)迭代的時(shí)候也不會(huì)出現(xiàn)莫名其妙的樣式和代碼。如果遇到產(chǎn)品的大版本更新,也正好趁此 機(jī)會(huì)和工程師們一起好好梳理一遍現(xiàn)有的樣式,清除掉不再使用的樣式,指定好新的層級(jí)。

 

DOs & DON’Ts

  1. 始終遵循,視覺邏輯符合工程師的開發(fā)邏輯。
  2. 合理劃分,再?gòu)?fù)雜的頁(yè)面,用三步也足夠能說清楚,信息不要擠在一起。
  3. 考慮到頁(yè)面在不同屏幕大小下的變化,間距是否固定,比例是否縮放,圖片和按鈕寬度是否自適應(yīng)。
  4. 任何細(xì)節(jié)和要求都寫清楚寫清楚,寫,清,楚,不要指望任何人“意會(huì)”你的設(shè)計(jì),任何決定都要有據(jù)可查。
  5. 每一個(gè)標(biāo)注本身也要注意對(duì)齊方式,更干凈整潔的標(biāo)注能讓大家一眼找到所需。

好了,看完之后大概會(huì)有人吐槽說有必要么這樣的標(biāo)注多浪費(fèi)時(shí)間啊,那么請(qǐng)去看看@圭多達(dá)萊佐這位朋友的樂譜,get it? 就是要追求?。ㄑ鎏臁?

  • 在做標(biāo)注的過程中,你會(huì)再次仔細(xì)審視自己的設(shè)計(jì),總會(huì)發(fā)現(xiàn)之前被忽略/沒考慮周全的細(xì)節(jié),比如間距字號(hào)顏色是否遵守了統(tǒng)一的規(guī)則,比如不同屏幕大小如何適配。
  • 耍聰明會(huì)偷懶的話,shared style 設(shè)置好,插件快捷鍵背好,能復(fù)用的樣式提煉出來,你便會(huì)發(fā)現(xiàn),雖然投入到標(biāo)注的時(shí)間增加了30%,但是和工程師后期反復(fù)溝通的時(shí)間減少了80%。
  • 他們?nèi)绻谝淮文?demo 給你看,你還會(huì)驚喜的發(fā)現(xiàn)有很高的視覺還原度,個(gè)別小細(xì)節(jié)微微調(diào)整就好了。大家都討厭改改改,一次通過多有成就感呢。

最后,這次模板是我自己的一個(gè) redesign concept, 基于foundmyanimal.com,(一家 base 在 Brooklyn 的工作室,手工制作非常有愛的銘牌、項(xiàng)圈等動(dòng)物飾品)圖片素材全部源自其網(wǎng)站和 Instagram,不得轉(zhuǎn)載。

至于我的源文件,大家隨便用,I don’t give a fuck.

當(dāng)然,這是一套還不夠嚴(yán)謹(jǐn)不夠科學(xué)的自創(chuàng)標(biāo)注,設(shè)計(jì)師盆友們,特別是工程師盆友們!覺得有任何值得改進(jìn)的地方請(qǐng)隨時(shí)跟我討論~ help me improve : P

Happy designing~

分享本文至:

日歷

鏈接

個(gè)人資料

存檔