提公升Android應用視覺效果的10個UI設計技巧

2021-06-28 16:48:30 字數 2393 閱讀 4300



在android應用開發中,風格和設計或許不是最關鍵的要素,但它們在決定android應用成功與否上確實扮演著重要的角色。以下是10個android應用的ui設計技巧,還有個附加技巧,能夠幫助提公升各位開發者的android應用的視覺吸引力。

技巧1:使用大小適當的影象

在影象方面,許多android應用開發者都是採用一種通用的尺寸。儘管這會使資源管理變得更為簡單,但就應用的視覺吸引力而言,這是個錯誤的做法。要讓應用呈現出最佳的視覺效果,那麼就應當針對具體的裝置螢幕設計不同的影象,最適當的影象才能構建出最棒的使用者體驗。

技巧2:使用適當格式的影象

我們都見過有些應用在嘗試載入某些大型影象時會暫停,這不僅僅因為影象的大小存在偏差,而且還因為影象採用了非理想的格式。android平台支援許多種**格式,比如png、jpeg、gif、bmp和webp(僅android 4.0+版本支援)。png是無損的理想格式,而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應用開發時,往往很容易遺忘使用者介面設計。在你的應用相對較穩定後,瀏覽這個列表,對應用進行潤色。通常來說,這些任務最好留到開發後期,因為此時的螢幕內容相對較為固定。

Core Animation 視覺效果《三》

kcafilterlinear kcafilternearest kcafiltertrilinearbutton2.layer shouldrasterize yes button2.layer rasterizationscale uiscreen mainscreen scale 不過博主查了...

CSS揭秘 視覺效果

1.單側投影 由box shadow的第四個長度引數即擴張半徑,可根據你指定的值去擴大或 當指定負值時 縮小投影的尺寸。可知單側投影實現如下 2.不規則投影 drop shadow 濾鏡可接受的引數基本上跟box shadow屬性是一樣的,但不包括擴張半徑,不包括inset關鍵字,也不支援逗號分割的...

電腦中優化「視覺效果」怎麼設定

windows 除了多 支援更好之外,最重要的變化就是 面目 有了很大的變化,然而這種變化是以極大地消耗系統資源作為代價的!如果老覺得系統資源不夠用,那麼就要考慮關閉windows 的視覺特效。方法很簡單,一學就會。先是需要在系統屬性對話方塊裡設定,關閉所有的視覺特效。依次單擊 開始 菜 單 控制面...