一、前言

1、代碼>原型

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

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

2、盒子模型

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

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

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

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

3、什么是point（pt）

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

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

4、@1x

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

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

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

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

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

6、文本元素

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

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

1、基本原理

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

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

2、兩種方法

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

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

三、為什么重要

1、保持一致性

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

2、更少的決定=更少的時(shí)間

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

3、多平臺(tái)設(shè)計(jì)

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

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

四、實(shí)施技巧

1、對(duì)齊網(wǎng)格

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

2、Rems和變量

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

如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預(yù)處理器間距變量來(lái)處理布局，同時(shí)保留變量以供后期維護(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ì)通常需要進(jìn)行視覺(jué)修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來(lái)保證整體的一致性。

6、放大、縮小

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

文章來(lái)源：站酷   作者：YMOOM

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.hengshangtqd.cn )是一家專注而深入的界面設(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ù)