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