安卓設(shè)備的型號與iOS設(shè)備有所不同钓丰,而且界面風(fēng)格和用戶的交互習(xí)慣都與iOS不同底挫,直接使用iOS的設(shè)計(jì)圖會降低展示效果和用戶體驗(yàn)
基礎(chǔ)
統(tǒng)一的顏色
- 確定一個(gè)主色調(diào)荞雏,頁面中的顏色盡量控制在6種以內(nèi)
- 頁面的背景顏色 (默認(rèn)值-#FFFFFFFF)
- 常規(guī)文字顏色 (默認(rèn)值-#8A000000)
- 提示文案顏色 (默認(rèn)值-#61000000)
- 錯(cuò)誤提示顏色 (默認(rèn)值-#FFB00020)
- 分割線顏色
統(tǒng)一的尺寸
- 設(shè)計(jì)圖尺寸調(diào)整為360 * 640况毅,使用藍(lán)湖等軟件的尺寸調(diào)整功能會影響還原度
- 尺寸調(diào)整功能會統(tǒng)一對頁面進(jìn)行縮放胶征,但設(shè)計(jì)的時(shí)候并不是按比例進(jìn)行設(shè)計(jì)的导犹,所以縮放后會影響頁面還原度
- 頁面的內(nèi)邊距
- 標(biāo)題欄的高度
- 常規(guī)文字大小 (默認(rèn)值-14sp)
統(tǒng)一的設(shè)計(jì)
- 所有頁面的按鈕樣式唱凯,常見的有四種樣式:主按鈕可點(diǎn)擊羡忘、主按鈕不可點(diǎn)擊、副按鈕可點(diǎn)擊磕昼、副按鈕不可點(diǎn)擊
- 所有頁面的標(biāo)題欄樣式
- 所有輸入框樣式
其他注意事項(xiàng)
- APP的狀態(tài)欄文字為白色卷雕,狀態(tài)欄的背景盡量采用深色,以不影響用戶查看狀體欄文字為準(zhǔn)
- 點(diǎn)擊區(qū)域不宜過小票从,無背景的點(diǎn)擊區(qū)域可以通過添加透明圖層展示在設(shè)計(jì)圖中
- 設(shè)計(jì)圖中要體現(xiàn)狀態(tài)欄漫雕、標(biāo)題欄的高度,方便在開發(fā)中以這些元素為基準(zhǔn)繪制頁面
- 頁面中文字的字號不小于12號
- 同一段文字的樣式要一致
- 安卓的彈窗上不需要有關(guān)閉按鈕峰鄙,用戶會使用返回按鈕關(guān)閉彈窗
進(jìn)階
- 會出現(xiàn)軟鍵盤的頁面浸间,確保所有交互元素處于上半屏,防止頁面元素被軟鍵盤遮擋
- 不可上下滾動(dòng)的頁面按照360 * 640尺寸設(shè)計(jì)吟榴,可滾動(dòng)的頁面出兩張圖:360 * 640一張魁蒜、360 * max一張
- 有輸入框、有吸底內(nèi)容的頁面不建議設(shè)計(jì)為整頁滾動(dòng)的頁面
- 彈窗中不要添加輸入框
- 文本展示區(qū)域要考慮換行的情況吩翻,設(shè)計(jì)圖中最好畫出極限區(qū)域
- 考慮深色模式下的顏色對應(yīng)關(guān)系
- 圖標(biāo)切圖盡量采用矢量圖
- 確定一個(gè)副色調(diào)兜看,在用戶交互的地方使用(復(fù)選框、輸入框狭瞎、開關(guān))
- 提前列出app所有用到的顏色及用處细移,便于全局調(diào)整