網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好
當前位置:酷知知識幫 > 遊戲數碼 > 電腦

APP標籤欄設計規範

欄目: 電腦 / 發佈於: / 人氣:9.06K

UI設計師在根據原型圖做設計稿的時候,遵守一定的設計規範能夠讓設計稿看起來更標準,也能體現個人水準,下面介紹標籤欄設計規範。

標籤欄設計規範

(01)進入sketch軟件界面,按A添加畫板,在右側可以選擇預設尺寸。

APP標籤欄設計規範

(02)畫板創建完成後來繪製標籤欄大小,在工具欄中選擇“矩形”

APP標籤欄設計規範 第2張

(03)選擇工具後,在畫板中繪製形狀,標籤欄正常高度為98px,所以我們在一倍圖中作圖的話,就要為48px。

APP標籤欄設計規範 第3張

(04)形狀創建完成後,在右側屬性中可調整形狀的大小、填充等,一般我們都會添加一個y-1,模糊1的陰影,讓標籤欄能夠和頁面區分開。

APP標籤欄設計規範 第4張

(05)標籤欄規範高度一定要為49px,你可以在屬性欄“高”中輸入數字調整。

APP標籤欄設計規範 第5張

(06)在標籤欄中肯定要有按鈕進行點擊的,那麼按鈕的大小要求是怎樣的呢?我們隨便繪製一個按鈕。

APP標籤欄設計規範 第6張

(07)在標籤欄中的按鈕最小點擊區域不能小於44*44,所以我們需要繪製一個矩形在按鈕的下方,高寬都要是44哦,切圖的時候連着一起切。

APP標籤欄設計規範 第7張

(08)輸出按鈕的時候,選擇“切片”,然後切出44*44區域即可,不要矩形填充顏色的話,可將形狀填充設為0%。

APP標籤欄設計規範 第8張

(09)最後導出的時候要注意,因為我們375*667是一倍尺寸,導出的時候,大小要選擇2x。

APP標籤欄設計規範 第9張
Tags:app 設計規範