今天看到的比較枯燥的理論，給大家分享一下。確實有點深奧,細細品讀。

為什么要使用八點網(wǎng)格

入門

代碼>模擬

設計應用程序和原型工具允許您創(chuàng)建的什么UI幻想的愿景可能模樣。但是當談到數(shù)字產(chǎn)品設計時，模型或原型的唯一目的就是將利益相關(guān)者和開發(fā)者提出的解決方案明確地傳達出去。最后，只有開發(fā)人員可以在代碼中復制（與資產(chǎn)相結(jié)合）才能使其生產(chǎn)。

現(xiàn)在，幾乎所有的東西你可以在一個設計工具使是可能的代碼來創(chuàng)建的，但有幾個原因-從實用性推出時間表，以性能問題-即一個設計可能不是實際的建立。

最重要的是你的設計如何在用戶設備上的代碼中進行操作，因此盡可能優(yōu)化在Sketch或Photoshop中完美布局的思想和編程之間的時間。

盒子模型

Box模型是描述對象的尺寸和間距的一種方法。它由4個組件組成：邊框，邊距，填充以及元素本身的尺寸。

邊框：圍繞元素邊緣的筆觸的厚度。大多數(shù)設計工具不允許這樣做影響總體間距和尺寸。

填充：元素與其子元素的界限之間的空間

邊距：元素與鄰近對象邊界之間的距離

什么是積分？

點（pt）是依賴于屏幕分辨率的空間測量。最簡單的解釋是，在“1x”分辨率（或@ 1x）下，1pt = 1px。

在“2x”分辨率（@ 2x）下，1pt = 4px，因為X和Y軸上的分辨率加倍，使得像素高2像素寬。

在“3x”分辨率（@ 3x），1pt = 9px（3px x 3px）等等。

“@ 1X”

請注意，這里的所有內(nèi)容都設計為“@ 1x”。@ 2x，@ 3x和所有其他變體的資產(chǎn)可以更容易地從@ 1x資產(chǎn)派生而不是在其倍數(shù)創(chuàng)建的設計。

例如，要將@ 2x設計的干凈資產(chǎn)從@ 3x設計（假設為偶數(shù)行的厚度），你需要將藝術(shù)品縮放到原始尺寸的50％（至@ 1x），然后將所得到的圖稿縮放到300％。

@ 1x設計另一方面可以輕松地縮放到任何整數(shù)倍 - @ 2x，@ 3x，@ 4x等。

通過在每個單獨的決議中進行工作，可以為圖標和優(yōu)質(zhì)資產(chǎn)添加更多的細節(jié)，但這樣做的機會卻相對不常見。在大多數(shù)情況下，為了速度和方便起見，1x工作是理想的工作。

使用像素網(wǎng)格

你創(chuàng)建的每個UI元素都應與像素網(wǎng)格對齊。這是一個被稱為像素擬合的概念，它確保您的所有元素在用戶設備上顯得清晰明了。

文本在這里是一個異常值，因為允許你的眼睛閱讀字母的獨特指標需要一些反鋸齒，使其他形狀模糊。所以，不要擔心你的字母的每一個點與像素網(wǎng)格對齊。

文本元素

諸如文本的內(nèi)聯(lián)元素幾乎總是給定界面中最重要的部分，但是像文本大小和行高之類的東西并不總是容易地與其他元素一樣容易地與其他元素一致，同時保持垂直的節(jié)奏和易讀性。

在您的設計中建立垂直一致性的基礎(chǔ)，您的文本是一個很好的工具。通過將每條文字的基線定位在均勻間隔的行上，您可以輕松地將所有UI元素都帶入和諧的垂直節(jié)奏。

我喜歡將我的8pt UI網(wǎng)格與4pt基準網(wǎng)格相結(jié)合。這種配對可以保持數(shù)學的簡潔和干凈，同時提供足夠的選項來適應各種文字樣式。

大多數(shù)平臺都有一些關(guān)于基礎(chǔ)知識的指導原則，但是從默認字體打破可能會導致獨特的結(jié)果，因此在布置文本時使用酌情決定權(quán)，然后在布置其他元素時將其作為基礎(chǔ)。

8點網(wǎng)格

基本原則

使用8的倍數(shù)來定義塊和內(nèi)聯(lián)元素的尺寸，填充和邊距。

當塊元素的唯一內(nèi)容是文本（例如按鈕）時，將文本設置為與UI和/或特定平臺的其余部分一致的大小，然后使用填充來確定塊元素的大小。在全寬元素的情況下，使用填充來確定高度和一致的水平邊距以確定寬度。

兩種方法

這個系統(tǒng)實際上有兩個突出的版本。將元素放置在以8點增量定義的系統(tǒng)顯示網(wǎng)格中（我們稱之為“硬網(wǎng)格”方法），另一個簡單地測量單個元素之間的8點增量（我們稱之為“軟”網(wǎng)格“方法）。

Hard Grid方法的主要參數(shù)是通過使用其他透明背景元素，然后將它們分組到小組前景元素，您可以在每個元素的基礎(chǔ)上跟蹤邊距和填充，并將這些容器像這樣磚塊。材料設計 - 其中一切都已經(jīng)設計成4pt網(wǎng)格 - 自然符合這種方法。

軟網(wǎng)格方法的論點是，當編寫接口時，使用實際的網(wǎng)格是無關(guān)緊要的，因為編程語言不使用這種格子結(jié)構(gòu) - 它只會被丟棄。當您達到高質(zhì)量，可編程的模型集合的速度是一個優(yōu)先事項時，繞過硬網(wǎng)格額外管理額外的層次，有利于軟網(wǎng)格更流暢，最小的結(jié)構(gòu)可能是一個優(yōu)勢。這也可能更有利于iOS，其中許多系統(tǒng)UI元素未被均勻網(wǎng)格定義。

為什么重要

一致的用戶界面

當你的所有測量都遵循相同的規(guī)則時，你會自動獲得更一致的UI。

更少的決定=更少的時間

通過刪除每8個間距選項中的7個，您可以減少可用的數(shù)量，隨后降低編碼速度。

多平臺設計

無論形狀因素如何，大多數(shù)流行的屏幕尺寸在至少一個軸上可以被8整除 - 通常兩者都是。另外，一些平臺的風格指南（如“材料設計”）專門針對4或8點的網(wǎng)格進行調(diào)用，從而使該系統(tǒng)成為一個自然的契合點。

一些屏幕顯然難以調(diào)整（iPhone 6是375 x 667點），但解決方案其實很簡單。保持您的填充和邊距尺寸一致，并減少/增加塊元素的大小以填補剩余空間。如果使網(wǎng)格保持一致，則可以使用奇怪大小的元素。請記住，您的用戶可能永遠不會看到您使用的實際測量。

實施提示

對齊網(wǎng)格

幾乎每個設計應用程序都有一個“對齊網(wǎng)格”選項。如果您使用硬網(wǎng)格方法，那肯定會使您的工作更容易。無論如何，如果有可用的話，您需要確保啟用“對齊像素網(wǎng)格”選項。

REMS＆變量

如果將根文本大小設置為16，您可以輕松地使用.5rem增量在8點網(wǎng)格上構(gòu)建布局。

如果您不想這樣做，或者不喜歡rems，您可以使用CSS或預處理器間距變量來處理布局，同時保留變量提供的額外的可維護性值。

定義你的網(wǎng)格

大多數(shù)設計應用程序允許您調(diào)整“大的微調(diào)”值。我使用一個名為Nudg.it 的應用，將素描中的我從10調(diào)整為8 。這是一個非常簡單的應用程序，使您的整個工作流程更快更容易。

SHORCUTS

許多應用程序具有快捷鍵，可讓您輕松地調(diào)整大小并調(diào)整增量。我強烈推薦學習它們 - 特別是微調(diào)和大小調(diào)整。

你的圖標的框架

圖標通常需要具有不同的尺寸以保持相同的視覺重量。在它們周圍放置一個框架，類似于Hard Grid如何定義元素大小是保持測量一致的簡單方法，同時允許在定義的參數(shù)內(nèi)進行變化。

放大，縮小

如果你把所有的時間都放大到1600％，你可以誤判你的垂直節(jié)奏。相反，如果您總是以50％的速度觀看您的用戶界面，您可能會錯過重要細節(jié)，如像素擬合。經(jīng)常調(diào)整縮放，以確保您看到整個圖片。