<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 做一份讓工程師淚流滿面的標注

    2015-7-13    用心設計



    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


    每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計

    來源:莫貝網

    如果您想訂閱本博客內容,每天自動發到您的郵箱中,請點這里

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


    為什么傳統的標注方法讓人難受?

    沒錯,Markman 是傳說中的標注神器,看起來也確實方便快捷,但是當一個頁面中,要同時標注間距、大小、顏色和字號時,過多的信息一齊扔給工程師,就會讓人有些抓狂。比如這樣:

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

    用2個頁面解釋布局,再用1個頁面解釋樣式

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

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

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

    單獨拎出可復用的組件,統一標注

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

    在項目進程中,我甚至會和工程師們溝通好,然后在每個組件旁寫上這個組件是誰正在實現或已經實現,附在項目共享文件或者郵件里,避免重復勞動。

    統一標注的好處不僅是我們自己在后續的設計中可以復用和遵守, 對于 web/iOS/Andriod 的工程師而言,也能提高代碼效率同時保持不同平臺最終效果的統一,后續迭代的時候也不會出現莫名其妙的樣式和代碼。如果遇到產品的大版本更新,也正好趁此 機會和工程師們一起好好梳理一遍現有的樣式,清除掉不再使用的樣式,指定好新的層級。

     

    DOs & DON’Ts

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

    好了,看完之后大概會有人吐槽說有必要么這樣的標注多浪費時間啊,那么請去看看@圭多達萊佐這位朋友的樂譜,get it? 就是要追求啊(仰天……

    • 在做標注的過程中,你會再次仔細審視自己的設計,總會發現之前被忽略/沒考慮周全的細節,比如間距字號顏色是否遵守了統一的規則,比如不同屏幕大小如何適配。
    • 耍聰明會偷懶的話,shared style 設置好,插件快捷鍵背好,能復用的樣式提煉出來,你便會發現,雖然投入到標注的時間增加了30%,但是和工程師后期反復溝通的時間減少了80%。
    • 他們如果第一次拿 demo 給你看,你還會驚喜的發現有很高的視覺還原度,個別小細節微微調整就好了。大家都討厭改改改,一次通過多有成就感呢。

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

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

    當然,這是一套還不夠嚴謹不夠科學的自創標注,設計師盆友們,特別是工程師盆友們!覺得有任何值得改進的地方請隨時跟我討論~ help me improve : P

    Happy designing~

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 国产成人综合久久精品尤物| 国产精品日日摸夜夜添夜夜添1国产精品va欧美精 | 国产精品内射后入合集| 久久93精品国产91久久综合| 亚洲国产精品嫩草影院| 国产精品国色综合久久| 综合在线视频精品专区| 麻豆国内精品久久久久久| 人精品影院 | 91精品欧美综合在线观看| 中文无码精品一区二区三区| 久久成人精品| 精品97国产免费人成视频| 亚洲综合精品香蕉久久网97| 538国产精品一区二区在线| 久久99精品久久久久久久久久| 尤物TV国产精品看片在线| 欧美国产精品va在线观看| 国产精品青草久久久久福利99| 青青青国产依人精品视频 | 精品国产污污免费网站| 国产精品久久久久国产A级| 色偷偷88888欧美精品久久久 | 国产精品久久久久天天影视| 538国产精品一区二区在线| 国产精品免费AV片在线观看| 国产精品va无码一区二区| 国产成人精品无码播放| 99热成人精品热久久669| 国产成人精品久久一区二区三区| 国产精品无码一区二区在线| 好湿好大硬得深一点动态图91精品福利一区二区 | 久久精品女人天堂AV麻| 精品久人妻去按摩店被黑人按中出| 国产精品亚洲精品日韩已方| 国产精品午夜国产小视频| 国产在线精品一区二区三区不卡| 精品久久久久久久久久中文字幕 | 91久久精品91久久性色| 99久久国产综合精品麻豆| 国产精品1区2区|