2022-2-27 鶴鶴
無論是高保真還是低保真原型，設(shè)計人員在軟件中的展現(xiàn)所有效果，最終目的都是傳遞給開發(fā)人員進行實現(xiàn)。當開發(fā)人員開始使用代碼還原頁面時，設(shè)計就不可以再隨意修改。
最重要的不是在設(shè)計軟件中展現(xiàn)的效果，而是實際在用戶設(shè)備上實現(xiàn)的效果，因此在設(shè)計時，要提前考慮代碼實現(xiàn)的成本。
盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。
Border：圍繞元素外圍的邊線。
Padding：元素及其子元素之間的間距。
Margin：元素和其相鄰對象之間的間距。
點（pt）取決于屏幕物理尺寸大小，是絕對尺寸單位。對應(yīng)@1x圖的1px。
像素（px）取決于實際屏幕顯示分辨率，是相對尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.
建議使用“@ 1x”進行設(shè)計，其他尺寸圖可以從@1x進行衍生。
如果是以@2x進行設(shè)計，那么若要得到@3x則要先縮小50%然后再擴大300%，增加了不必要的工作量，并且很容易出現(xiàn)奇數(shù)、小數(shù)等不便利數(shù)值。
創(chuàng)建的每個UI元素都應(yīng)該和像素網(wǎng)格對齊，防止出現(xiàn)半像素的“鋸齒“效果。
文本由于其圖形的特殊性，難免會出現(xiàn)無法對齊像素的情況，這里可以忽略。
文本是頁面中最重要的元素之一，但因為其本身的多樣性，產(chǎn)生的不同的字體、行高很難和其他元素一起適用網(wǎng)格。因此給文本設(shè)置基線網(wǎng)格，將基線網(wǎng)格采用4pt進行等距劃分，來和其他元素進行和諧搭配。
使用8的倍數(shù)來定義區(qū)塊和內(nèi)部元素的尺寸，間距等。
當區(qū)塊元素為文本（例如按鈕）時，將文本設(shè)置成其余部分一致（或者平臺預(yù)先定義好）的大小，然后使用padding來確定區(qū)塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。
硬網(wǎng)格：將元素放置在以8為增量定義的顯示網(wǎng)格中，使用額外的透明背景元素，和前景元素組成一個整體。
軟網(wǎng)格：保證元素之間的的間距為8的倍數(shù)，以此獲得更快的處理速度，從而得到更流暢的體驗。
當所有尺寸都遵循相同的規(guī)則時，就有了一致的UI。
減少自定義的尺寸規(guī)則，得到更快的代碼運行速度。
無論設(shè)備外形如何，主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。
有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當調(diào)整區(qū)塊的大小來進行適配。
確保開啟了“對其像素網(wǎng)格”選項。
如果根文根大小設(shè)置了16px，則可以使用0.5rem的增量在8點網(wǎng)格上構(gòu)建布局。
如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預(yù)處理器間距變量來處理布局，同時保留變量以供后期維護。
大多數(shù)軟件都可以設(shè)置快速“微調(diào)”，一般默認為10px，sketch中可將其調(diào)整為8px，便于快速的工作。
學習并善用快捷鍵，提高工作效率。
圖標設(shè)計通常需要進行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。
設(shè)計時經(jīng)常會放大預(yù)覽界面來進行設(shè)計，這會導(dǎo)致會略整體；如果以縮小的尺寸會導(dǎo)致看不到細節(jié)，因此要經(jīng)常變焦畫面來確保能看到整個畫面。
文章來源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( m.payeee.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.payeee.cn