安卓app設計

2021-09-11 06:16:05 字數 3039 閱讀 8949

顏色的運用

採用的是扁平化的設計,可以看到一大塊一大塊區域的顏色。這些顏色大多亮麗引人,整個介面上搭配的顏色也不會太多,基本保持在三種顏色以內。

「沒有錯誤的顏色的,只有錯誤的搭配」。顏色是沒有對錯的,我們要用經驗和直覺來搭配它們,所以要先來認識認識顏色。

primary color是乙個應用使用最為廣泛的顏色,它決定了乙個應用整體的基調。

介面中很多的元素都會使用到這個顏色。 選定主顏色之後,通常還會在主顏色的附近,選擇乙個暗色作為搭配,例如indigo 600~900作為深色。這個顏色通常只是體現在狀態列的顏色上。

了暗色,有時還需要使用與主顏色相配合的亮色,例如indigo 500作為主色之後,indigo 50~400,都是亮色可選的物件。

accent color

accent color是與primary color完全不同的乙個色調,用來吸引使用者的注意力,比如用在按鈕、進度條等等需要使用者關注的、有互動功能的元件上面。如果primary color與accent color是不同色調,設計師可以自由的選擇;如果primary color與accent color都是同一種色調,那麼確定accent color的時候,通常使用google調色盤中名字裡帶a的顏色,例如a100~a700.

color_palette_choose4

文字的使用

文字是應用當中使用最多的要素。顯示一段供使用者閱讀的文字,程式執行時的資訊提示都離不開它。

文字是內容的實際體現者,因此設計師需要將使用者的注意力盡可能的吸引到文字當中。

字型可以分成兩種型別:有襯線的-serif;無襯線的-sans-serif,也簡稱sans。serif的筆劃端部會多出來一截修飾;sans的筆劃端部是平的。

serif_sans_difference2

大小不同的位置,文字顯示的大小也可能有所不同。material design對介面上各個顯示元素中使用到的文字大小,作出了規定。

顯示english-like內容的時候,在中文系統中顯示英文:

顯示的位置 字型型別 字型大小

display 4 light 112sp

display 3 regular 56sp

display 2 regular 45sp

display 1 regular 34sp

headline regular 24sp

title medium 20sp

subheading regular 16sp

body 2 medium 14sp

body 1 regular 14sp

caption regular 12sp

button meduim 14sp

顯示dense內容的時候,在中文系統中顯示漢字:

顯示的位置 字型型別 字型大小

display 4 light 112sp

display 3 regular 56sp

display 2 regular 45sp

display 1 regular 34sp

headline regular 24sp

title medium 21sp

subheading regular 17sp

body 2 medium 15sp

body 1 regular 15sp

caption regular 13sp

button meduim 15sp

規律就是,顯示正文時(從title開始),中文比顯示英文要大1sp。

display對大家來說可能比較陌生:它的用法是將文字作為乙個大區域的顯示,例如手機待機時螢幕上顯示的時間資訊,就是將文字當作display來運用的。

顏色文字使用的顏色與背景的顏色相關,採用白色或者黑色,目的是提高文字的可讀性,不要讓文字的顏色和背景的顏色混在一起。

文字的顏色需要根據顯示的位置體現出不同的深淺顏色。這種顏色的深淺是通過調整字型的透明度實現的,而不是將字型設定成一種灰色。

安卓系統根據顯示內容的重要性,將文字主要分成了好些類:textcolorprimary textcolorsecondary textcolorprimaryactivated textcolorsecondaryinverse 等等。不過最重要的就是:

textcolorprimary:就是primary text-主要文字內容使用的顏色。它使用在文字的title,headline,subhead,body1~2,button這些位置。

textcolorsecondary:就是secondary text-次要文字內容使用的顏色。它使用在display 1~4,caption這些位置。

淺色背景

對於淺色背景,字型使用純黑色-#000000,根據使用場景的不同,透明度不同,

使用的場景 透明度

primary text 87%

secondary text 54%

disable text, hint text 38%

假如文字需要與圖示配合使用,那麼文字的顏色也是使用純黑色-#000000,但是會根據當前是否處於啟用的狀態而不同,

圖示啟用狀態 圖示對應文字的透明度

啟用 54%

未啟用 38%

深色背景

對於深色背景,字型使用純白色-#ffffff,根據使用場景的不同,透明度不同,

使用的場景 透明度

primary text 100%

secondary text 70%

disable text, hint text 50%

假如文字需要與圖示配合使用,那麼文字的顏色也是使用純白色-#ffffff,但是會根據當前是否處於啟用的狀態而不同,

圖示啟用狀態 圖示對應文字的透明度

啟用 100%

未啟用 50%

圖示的使用

安卓系統希望應用的圖示框定在48dp尺寸方框以內,並且擁有1dp的邊框(包含在48dp的尺寸以內)。為了作圖的細緻,建議我們將48dp的圖示先放大4倍,也就是變成192dp(邊框4dp),再進行設計。

圖中的primary text和secondary text 就是我們前面提到的文字顏色。亮色背景下,這裡看到的顏色分別是#212121和#757575。準確的講,它們應該是:

安卓app設計規範

發布於 byadmin 隨著安卓智慧型手機不停的更新換代。安卓手機系統越來越完美,螢幕尺寸也越來越大啦!比如最近小公尺的miui 6的發布和魅族手機系統的更新等等。以小公尺miui6的安卓手機來說,miui6進行了全新設計,堅持 內容才是本質 的設計哲學,重新提煉內容,簡化圖示設計。目前最新安卓手機...

安卓app公升級之安卓app簽名

2.使用者自定義的方式簽名 簽名是安卓的公升級的必須要求 載掉舊版本才能安裝新版本,即讓使用者把舊版本卸在裝新的,這樣使用者體驗肯定就不好了。使用者自定義的方式簽名具體流程如下 1 滑鼠右鍵單機專案,選擇export,出如下視窗 之後就按步驟要求就可以匯出乙個已經通過自定義密匙簽名的安卓apk和密匙...

react native 安卓APP打包

1,生成乙個簽名金鑰 方法1 keytool genkey v keystore my release key.keystore alias my key alias keyalg rsa keysize 2048 validity 10000 方法2 首先開啟androidstudio選單選擇bu...