10個提高Android視覺效果的設計技巧
在 Android 應用開發中,風格和設計或許不是最關鍵的要素,但它們在決定 Android 應用成功與否上確實扮演重要的角色。以下是 10 個 Android 應用的 UI 設計技巧,還有個附加技巧,能夠提供你的 Android 應用的視覺吸引力。
1. 使用大小適當的影像
在影像方面,許多 Android 應用開發者採用的是大小單一的做法。儘管這會使資源管理變得更為簡單,但就應用的視覺吸引力而言,這是個錯誤的做法。要讓應用呈現出最佳的視覺效果,那麼就應當針對具體的裝置螢幕設計不同的影像。最適當的影像才能構建出最棒的使用者體驗。
2. 使用適當格式的影像
我們都見過有些應用在嘗試載入某些大型影像時會暫停,這不僅僅因為影像的大小存在偏差,而且還因為影像採用了非理想的格式。Android 平臺支援許多種媒體格式,比如 PNG、JPEG、GIF、BMP 和 WebP(注:僅 Android 4.0+ 版本支援)。PNG 是無損圖片的理想格式,而 JPEG 的呈現質量並不穩定。
Android 還支援帶有 Nine-Patch 的彈性影像。如果可行的話,可以考慮使用 WebP 來替代 JPEG,因為這種格式在儲存和下載時效率更高。也就是說,如果將其作為與較老格式同時使用的獨立圖片,那麼應用整體規模會變大,這就削減了使用新格式的優勢。
3. 運用微妙動畫,顏色來呈現狀態改變
在螢幕轉場時運用微妙動畫以及 UI 控制顏色變化來呈現應用狀態改變,這會讓你的應用更顯專業感。比如,活動間的淡入淡出使螢幕轉變更為自然,改變被按動的按鍵顏色會突顯正在發生的使用者動作,清晰地呈現出使用者正在做的事情。
Android 3.x 及隨後的版本可開啟硬體加速,這會讓動畫執行更為流暢。但是需要進行測試,因為並非應用的所有功能都能夠相容硬體加速。
4. 用圓角效果來軟化 UI
Button、PageView 等使用者介面控制按鈕在螢幕上都會呈現矩形的畫素形狀,但這需要進行處理。在控制介面上,使用圓角效果來軟化使用者介面的外觀,這顯得很像 Web 的風格,但確實很受使用者喜歡。
5. 在 3D 效果中使用一致性的“光照”
最新版本的 Android 平臺使用全息樣式和 3D 圖示等。如果你在應用的控制按鍵中使用投影和其他此類樣式,確保要使用一致性的“光照”。換句話說,要確保陰影在螢幕上的朝向一致。在影像編輯器中使用相同的數值來創造相同的斜度和紋理。
6. 使用高對比度配色方案
當某個家庭成員(注:往往是老一輩的人)首次發現可以在郵件中使用帶顏色的字型和背景,於是傳送給你一封使用白色背景和檸檬黃色字型的電子郵件,這樣的郵件閱讀起來相當費勁。有些人在設計應用的螢幕時,可能會讓玩家難以閱讀或導航螢幕中的內容。使用適當的高對比度顏色,會讓螢幕更易於檢視,緩解眼睛的壓力。要將配色方案作為系統資源的一部分,以此為基礎來開展其他工作。
7. 使用大型和易讀的字型
和上述不良配色方案一樣,我們也會收到家庭成員傳送來帶有某些古怪字型、難以閱讀的文字。相比其他字型,有些字型確實閱讀起來更為容易。
字型大小也是個重要因素,在保持與其他螢幕功能的平衡性的前提下,儘量將字型制作得夠大。就像在使用傳真機時,使用小於 12 磅的字型並不合適。
Android 4.0 的設計師推出了一種只適用於該平臺的新字型,這種字型在移動裝置上的閱讀很容易,它被稱為 Roboto。
8. 不要過多偏離平臺規範
許多成功的手機應用會使用人們較為熟悉的使用者介面。它們有簡單且主流的使用者介面,其使用的控制方式也是使用者所熟悉的。在使用者介面控制和螢幕設計中,不要表現得過於另類。儘量簡單化,與平臺其他應用的表現保持一致。以平臺作為決定應用表現和行為的線索。
如果你正在製作的 UI 與眾不同,確保用 AB 測試等客觀方法來比較新 UI 和傳統 UI,由此來決定新設計方案是否更優化,比如更有效、更易於使用或者看起來更為舒適。
9. 遵從 UI 指導原則
Android 程式說明書中有許多可以整合到應用中的 UI 指導原則。根據應用所使用的 Android 版本的不同,這些指導原則往往也有所差異。當出現這種情況時,你需要製作多種資產來應對多種指導原則。指導原則涵蓋了圖示、小部件、選單和活動等部分。
10. 測試使用者介面
開發者往往不是優秀的 QA 或測試者。應用可穩定執行後,面向完全不熟悉應用設計和意圖的使用者開展測試是很有價值的做法。應用設計師往往自認為使用者會覺得他們的應用 UI 很直觀,情況或許並非如此。只有真正讓使用者來測試應用,你才能夠在釋出應用前發現許多意料之外的問題。
附加技巧:僱傭職業美術或影像設計師
現在,使用者期望看到外觀精美且設計專業的應用。正如你不會衣著隨便地去參加面試,所以你應當投入足夠的資源來潤色應用外觀後再將其釋出。在多數情況下,程式設計師往往不是技術嫻熟的美術人員,所以可以考慮僱傭職業美術人員來完成這項工作,只是要確保你對設計結果有清晰的認識。
當你埋頭進行 Android 應用開發時,往往很容易遺忘使用者介面設計。在你的應用相對較穩定後,瀏覽這個列表,對應用進行潤色。通常來說,這些任務最好留到開發後期,因為此時的螢幕內容相對較為固定。
相關文章
- 資料視覺化設計的25個小技巧視覺化
- 提高郵件營銷效果的5個技巧
- [譯] 迅速提高設計美感的 7 個小技巧
- css揭祕實戰技巧 - 視覺效果[三]CSS視覺
- win10怎麼關閉視覺效果_win10系統如何取消視覺效果Win10視覺
- 程式設計技巧│提高 Javascript 程式碼效率的技巧程式設計JavaScript
- ui設計怎樣做出有效果的視覺層級?UI視覺
- 手機頁面設計應更加註重視覺效果設計SKZ視覺
- 視覺還原小技巧!CSS 實現角標效果視覺CSS
- Win10 1990版概念設計元素帶來新奇視覺效果:UI很復古Win10視覺UI
- 資料視覺化的設計技巧,終於有人講明白了!視覺化
- 資料視覺化效果怎麼做,資訊視覺化設計用什麼軟體視覺化
- 品牌|切割+鏤空 分享一組效果豐富的品牌視覺設計作品視覺
- win10如何關閉視覺效果_win10視覺增強怎麼關閉Win10視覺
- 善用這些UI設計小技巧,快速提高你的設計水平UI
- 提高VSCode 10倍效率的技巧VSCode
- 馬峰視覺設計視覺
- UI文案設計技巧,視覺與內容兼具不再是夢UI視覺
- UI設計培訓必學,提升視覺層次感小技巧!UI視覺
- 學習 PixiJS — 視覺效果JS視覺
- 快速提高你的UI設計水平的一些小技巧UI
- 如何提高函數語言程式設計技巧函數程式設計
- 前端設計師必須知道的10個重要的CSS技巧前端CSS
- 21個UI設計必會的設計技巧UI
- 視覺化編輯器的設計視覺化
- 提高 PostgreSQL 插入效能的 5 個技巧SQL
- 提高效率的 Android Studio 技巧彙總Android
- 10 個你可能不知道的 Android Studio 技巧Android
- 6個技巧輕鬆玩轉資料視覺化視覺化
- 盤點 | 提高雲端計算安全性的5個技巧
- VC++視覺化程式設計第一個程式設計例項出錯C++視覺化程式設計
- 視覺化搭建 - 容器元件設計視覺化元件
- 提高Python執行效率的5個技巧!Python
- 視覺效果 -- iOS Core Animation 系列三視覺iOS
- EverWeb 3.9.6 視覺化的網頁設計工具Web視覺化網頁
- 款領先的視覺效果和動態圖形設計軟體:After Effects 2023 (Ae2023)視覺
- 聊聊android列表檢視的快取設計Android快取
- 前端使用 Konva 實現視覺化設計器(10)- 對齊線前端視覺化
- 老程式設計師的10個程式設計小技巧,教你寫出高質量程式碼!程式設計師