「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

用好藍湖,提升團隊協作效率,藍湖指北,教你如何用好藍湖。本期【藍湖指北】如約而至~

藍湖的標註、切圖功能廣受好評,正確選擇標註尺寸,讓設計師與工程師的溝通和協作事半功倍。本期【藍湖指北】,湖湖將手把手教你如何選擇標註尺寸。

Step 1 :將設計圖上傳至藍湖

上傳設計圖至藍湖,單擊設計圖任意地方,即可打開設計圖標註信息面板,查看該設計圖元素大小、描邊、顏色、投影、圓角、字體、字號、邊距等信息。單擊空白處,即可關閉標註面板。

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

Step 2 :標註時,正確選擇標註單位

點擊標註面板右上方三角圖標,打開標註單位列表,即可根據需要選擇標註單位。

這裡的“單位”是指在設計圖尺寸不改變的情況下更換不同的設備顯示設計尺寸。

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

很多人問:為什麼我改的單位越大,顯示的數值越小?

dp 是指從 mdpi 到 xxxhdpi 每單位物理尺寸的像素數越來越大。

也就是說:

mdpi 時 1dp = 1px

xxxhdpi 時 1dp = 4px

mdpi 時 1px = 1dp

xxxhdpi 時 1px = 0.25dp

dp = pt

所以屏幕分辨率高了需要的物理尺寸就是 px 換算比就會增大

❤️ 標註單位:

px 常用於網頁

pt 應用於 iOS 設備開發時使用的單位

dp 應用於 Android 設備開發時使用的單位

rem 應用於網頁開發使用的單位標註一般是按照 @2x 來做,切圖的話用 @2x 或 @3x 都可以。

為了便於大家理解,機智如我湖,為大家總結了選擇標註尺寸的方法,讓你一目瞭然。

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

Step 3 :下載切圖時,正確選擇標註倍數

標註完成後,點擊切圖圖標,選擇設計圖詳情頁左側工具欄中的“下載切圖 ”,就可以一鍵下載本頁面所有的切圖。

根據開發需求,工程師可以選擇多倍數切圖,倍數越高的圖片像素越高,越清晰。

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

Tip:如何同時一鍵下載多張設計圖的全部切圖?

在畫布頁面,按住 Shift + 鼠標左鍵選擇多張設計圖,或者,鼠標右鍵拖拽可框選設計圖 ;

框選後,右鍵菜單,選擇【下載切圖】,即可同時一鍵下載多張設計圖內的全部切圖。

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸

標註尺寸選得好,產研團隊效率高!

選擇標註尺寸,做好以上三步,小小的細節對團隊開發協作的效率影響卻很大,設計和開發都能一步到位。

經過湖湖的分享,希望對大家有所幫助。你在使用藍湖的過程中還有什麼問題需要湖湖幫你答疑解惑的呢?

歡迎在評論區提問,湖湖等你來,有問必答~

用藍湖,不加班!

藍湖網址:LanhuApp.com

藍湖,高效的產品設計協作平臺

「藍湖指北」一張圖教你如何選擇 UI 設計標註尺寸



分享到:


相關文章: