• <tt id="4qaqs"><rt id="4qaqs"></rt></tt>
    如何用「8點網格」來規范你的設計?看這篇好文! 2017-12-07 來源: 卓杰科技(www.mokembo.com) 瀏覽:

    QQ截圖20171206092830.jpg


    看完本文你會學到:

    1.  8 點網格系統的意義

    2. 為什么使用 8 點網格系統

    3.8 點網格系統的技巧有哪些

    什么是 8 點網格

    就是建立 8 點為一個單位的網格,所有的元素尺寸都是 8 的倍數。

    △ 圖片來自Material Deisgn設計規范

    為什么是8 點?

    為什么是基于 8 點去定義網格,而不是 6 點或者 10 點?引用下Quora上一個提問的回答:

    If you use 8, you can easily resize without ending up with half or quarter pixels. 8/2=4, 4/2=2 and 2/2=1. If you start with 10 you’ll end up with 2.5 pixels, and then 1.25 (10, 5, 2.5, 1.25 …) you get the idea. 8 gives you more flexibility than 10. /Sjur O. Sundin, Senior UX Architect / Design Manager – San Diego, CA/

    意思是:

    如果你用 8 作為設計的最小單位,你可以很方便的縮小的你的設計尺寸,8/2=4,4/2=2,2/2=1。如果你從 10 開始,你縮小到的網格單位可能是2. 5 像素,在往下是1. 25 像素。

    △ 8× 8 的元素被一直縮小50%的情況

    如果你是 2 倍屏設計, 1 倍下就是奇數的尺寸,如果是要在偶數尺寸的屏幕中(基本上的屏幕尺寸都是偶數的)劇中對齊位置上就會產生小數點了,如果是再縮放一倍,這時候元素尺寸又產生了小數點了,相信各位的潔癖肯定是不能忍的。

    為什么要使用這套系統?

    這里引用一些Material Design中的設計指導和Spec的一篇文章中的信息,結合自己的經驗來說明下:

    一、 更統一的UI

    當所有的元素尺寸都符合同樣的規則時,你自然就獲得了一套更加統一的UI。

    △ 圖片來自Material Deisgn設計規范

    二、 更少的選擇=節約更多的時間

    也許在設計某個元素的時候,或者定義某個空隙的時候,你用 8 好像稍微寬了點,于是你一點一點地調整。但你在選擇空隙是 7 還是 8 的時間時,你做其他事情的時間也就被浪費了,最后效果的差異其實并沒有那么大。

    更可怕的是最后你的設計稿里這里是6,那里是8,沒有一套清楚的規則的時候,會影響到開發對你設計稿元素間尺寸的認知,于是你精心調好的細節也會沒有那么好的被還原。

    試想你跟開發達成一種默契:如果我這里的標注小于8,那你看成 8 就好。其他的,一定是 8 的倍數。

    三、 多平臺的響應式設計

    基本的主流屏幕尺寸都至少在橫豎一個軸的維度上能被 8 整除,很多時候兩個軸的未讀都可以。甚至,有些平臺的設計規范(比如Material Deisgn)會特別要求建立4pt或8pt為基準的網格,這樣整套系統就能自然的符合這一規則。

    △ 當前主流屏幕的解決方案,可以看到基本上都能被 8 整除

    有些屏幕會很難調整適應這個系統,比如iPhone6 開始的375× 667 的尺寸,但是解決方法也很簡單。保持填充和空隙(padding & margin)的尺寸統一遵循規則,剩余的空間可以用塊狀的元素來填充。有一些元素的尺寸是奇數的也沒關系,只要他們能讓整體遵守這套規則就好。

    記住你的用戶永遠不會看到你實際使用的尺寸。

    比如Material Design沒有限制元素的高度一定符合 8 的倍數,但是讓元素的點擊范圍遵守 8 點網格的規則。

    所以說,這套系統更多的是用來規范自己的設計和開發,節省開發和設計溝通的時間,提高設計統一性,對用戶來說可能感知不大。

    執行這套方案的技巧

    一、 建立網格并對齊網格

    幾乎所有設計軟件都有「對齊到網格」的選項。如果你的設計絕對符合這套系統的話,設置好相應的網格選項并對齊絕對會給你很大的幫助。所以,你要先確保你打開了「對齊到網格」選項。

    △ Sketch中設置8px為基準的網格

    二、確定你自己的增量習慣

    大多數設計軟件都可以調整移動增量值,我喜歡把我的大增加值(按住command移動的增量)從默認的 10 調整到8,這會方便很多。

    △ 在sketch中調整鍵盤增量

    三、 快捷鍵

    很多應用程序都有快捷鍵,可以讓你在設計時快速移動元素、調整大小。記住這些快捷鍵,配合網格使用可以大大提高你的效率。

    四、 建立icon的框架

    △ Material Design icon的框架

    圖標通常需要不同的大小以保持相同的視覺重量。用框架來設計圖標,這是保持尺寸一致性的簡單方法。同時,框架能有效保證圖標的大小符合網格的規范。同樣記得把圖標的框架大小設置成 8 的倍數,并從大的圖標開始設計,縮放后記得對細節做調整。

    五、 放大、縮小

    如果你一直放大到1600%來設計,你可能會丟失垂直方向上的布局感受。相反,如果你一直在50%的縮放比例下查看你的UI稿,你可能會丟失一些重要的細節,比如完美像素。所以記住要經常放大縮小界面,在各種比例下查看你的設計。

    在線咨詢

    020-89202380

    裸体玩弄校花羞耻h
  • <tt id="4qaqs"><rt id="4qaqs"></rt></tt>