一、前言

1、代碼>原型

無論是高保真還是低保真原型，設(shè)計人員在軟件中的展現(xiàn)所有效果，最終目的都是傳遞給開發(fā)人員進(jìn)行實(shí)現(xiàn)。當(dāng)開發(fā)人員開始使用代碼還原頁面時，設(shè)計就不可以再隨意修改。

最重要的不是在設(shè)計軟件中展現(xiàn)的效果，而是實(shí)際在用戶設(shè)備上實(shí)現(xiàn)的效果，因此在設(shè)計時，要提前考慮代碼實(shí)現(xiàn)的成本。

2、盒子模型

盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。

• Border：圍繞元素外圍的邊線。

• Padding：元素及其子元素之間的間距。

• Margin：元素和其相鄰對象之間的間距。

3、什么是point（pt）

點(diǎn)（pt）取決于屏幕物理尺寸大小，是絕對尺寸單位。對應(yīng)@1x圖的1px。

像素（px）取決于實(shí)際屏幕顯示分辨率，是相對尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.

4、@1x

建議使用“@ 1x”進(jìn)行設(shè)計，其他尺寸圖可以從@1x進(jìn)行衍生。

如果是以@2x進(jìn)行設(shè)計，那么若要得到@3x則要先縮小50%然后再擴(kuò)大300%，增加了不必要的工作量，并且很容易出現(xiàn)奇數(shù)、小數(shù)等不便利數(shù)值。

5、使用像素網(wǎng)格

創(chuàng)建的每個UI元素都應(yīng)該和像素網(wǎng)格對齊，防止出現(xiàn)半像素的“鋸齒“效果。

文本由于其圖形的特殊性，難免會出現(xiàn)無法對齊像素的情況，這里可以忽略。

6、文本元素

文本是頁面中最重要的元素之一，但因?yàn)槠浔旧淼亩鄻有裕a(chǎn)生的不同的字體、行高很難和其他元素一起適用網(wǎng)格。因此給文本設(shè)置基線網(wǎng)格，將基線網(wǎng)格采用4pt進(jìn)行等距劃分，來和其他元素進(jìn)行和諧搭配。

二、8點(diǎn)網(wǎng)格

1、基本原理

使用8的倍數(shù)來定義區(qū)塊和內(nèi)部元素的尺寸，間距等。

當(dāng)區(qū)塊元素為文本（例如按鈕）時，將文本設(shè)置成其余部分一致（或者平臺預(yù)先定義好）的大小，然后使用padding來確定區(qū)塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。

2、兩種方法

• 硬網(wǎng)格：將元素放置在以8為增量定義的顯示網(wǎng)格中，使用額外的透明背景元素，和前景元素組成一個整體。

• 軟網(wǎng)格：保證元素之間的的間距為8的倍數(shù)，以此獲得更快的處理速度，從而得到更流暢的體驗(yàn)。

三、為什么重要

1、保持一致性

當(dāng)所有尺寸都遵循相同的規(guī)則時，就有了一致的UI。

2、更少的決定=更少的時間

減少自定義的尺寸規(guī)則，得到更快的代碼運(yùn)行速度。

3、多平臺設(shè)計

無論設(shè)備外形如何，主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。

有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當(dāng)調(diào)整區(qū)塊的大小來進(jìn)行適配。

四、實(shí)施技巧

1、對齊網(wǎng)格

確保開啟了“對其像素網(wǎng)格”選項(xiàng)。

2、Rems和變量

如果根文根大小設(shè)置了16px，則可以使用0.5rem的增量在8點(diǎn)網(wǎng)格上構(gòu)建布局。

如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預(yù)處理器間距變量來處理布局，同時保留變量以供后期維護(hù)。

3、定義你的網(wǎng)格

大多數(shù)軟件都可以設(shè)置快速“微調(diào)”，一般默認(rèn)為10px，sketch中可將其調(diào)整為8px，便于快速的工作。

4、捷徑

學(xué)習(xí)并善用快捷鍵，提高工作效率。

5、框架你的圖標(biāo)

圖標(biāo)設(shè)計通常需要進(jìn)行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。

6、放大、縮小

設(shè)計時經(jīng)常會放大預(yù)覽界面來進(jìn)行設(shè)計，這會導(dǎo)致會略整體；如果以縮小的尺寸會導(dǎo)致看不到細(xì)節(jié)，因此要經(jīng)常變焦畫面來確保能看到整個畫面。

文章來源：站酷   作者：YMOOM

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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