UI設計之標注與切圖


標注

內容:

1、文字:大小、字體、粗細、顏色、不透明度

2、布局控件屬性:控件高度、背景色、透明度、描邊和圓角大小

3、間距:圖標文字列表等都間距、控件之間都距離和左右邊距

4、列表:列表都高度、顏色、內容上下間距等

5、段落:行距

6、全局屬性:如導航欄文字大小、顏色頁面左右邊距、默認間距

切圖

無法用代碼實現的內容需要切圖,主要切@2x和@3x圖

注意:

1、切圖輸出格式:png24位、png8位、jpg3種格式

2、同一模塊內,切圖大小應保持一致

3、切圖輸出大小必須保持為偶數(為了適配,改變圖片大小時不會出現小數情況)

4、為了減小包的大小、所有切圖盡量壓縮后再給開發

下載安裝藍湖

進入藍湖官網點擊下載插件:https://lanhuapp.com/

點擊下載都插件圖標即可自動安裝到Photoshop軟件中

然后打開Photoshop,點擊【窗口】-【擴展功能】-【藍湖】

打開藍湖后需要輸入藍湖得賬戶密碼進行登錄,如果沒有賬號需要在藍湖官網先進行注冊

登錄之后選擇設計尺寸、上傳的項目等

選擇“選中的畫板”,在圖中拉出參考線,然后沿着參考線畫出畫板,創建畫板后換回移動工具

給需要切圖的圖標進行命名

切圖的命名格式

頁面-位置-功能簡品-狀態

注意:

1、不能使用中文命名

2、不能以數字開頭

標記切圖

標記切圖時可設置固定大小

不是同一個圖層的圖

切圖前需要選中圖層進行分組,然后選擇該分組進行切圖

標記完成后選中畫板點擊上傳

上傳成功后到瀏覽器藍湖上找到相應的項目查看上傳的畫板,點擊上方的切圖圖標可以下載切圖

常用英文命名單詞

中 文 英 文
啟動頁面 default
頂部導航 nav
左側導航 leftnav
工具欄 toolbar
狀態欄 statusbar
背景 bg
按鈕 button
照片 photo
圖片 img
圖標 icon
個人資料 porfile
用戶 user
彈出 pop
返回 back
刷新 refresh
刪除 delete
編輯 edit
下載 download
內容 content
廣告 banner
登錄 login
注冊 register
標題 title
提示信息 msg
鏈接 link
注釋 note
標志 logo
主頁 home
列表 list
設置 set
更多 more
取消 cancel
按鈕常態 nor
按鈕選中 sel
按鈕突出 hig
按鈕不可用 dis


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM