iOS、Android 色彩透明度的標示方式

在繪製介面時,調整顏色的透明度 (transparent) 是一個很常用的技巧,好處在於:

1.減少灰階顏色定義

2.維持介面顏色的一致性

早期網頁設計還沒支持透明度的屬性時,設計師要自己調色,來控制顏色的明暗,所以會發現許多網站關於灰階顏色的定義,基本上都用過一輪,但其實這樣的方式比較沒效率,後續要維護也會比較麻煩。

在app的開發上,灰階的顏色通常會使用在字體與線條上,為了讓字體的閱讀更加舒服,內文字體不會使用純黑色(#000000),而會使用「灰色」來代替,但實色的灰色會因為背景色的不同,會讓app文字內容的易讀性有所差異。

transparent-01

上圖大概就可以知道為什麼要用帶透明度的黑色來取代實色的灰色,因為帶透明度的黑色,在背景稍深時,還是有比較好的閱讀性,如果是實色,字體就會被整個畫面給吃掉,不易閱讀。當然也可以多定義一個新的灰色,但那就是要多記一個顏色。

而在 Google material design  裡 Typographic 有提到文字透明度的設定說明:

trasparent

第二段提到,建議文字顏色對比至少 4.5:1 建議是 7:1,最後定義出 54% black 與 87% black,雖然我有試著去算出這兩個數字,但最後還是找不到一個合理的算法(求解)。(百分比可以依需求自己設定,這邊只是舉 google 的例子,但我還是好奇這兩個數字是怎麼算出來的)。

2015/04/28補充:關於 4.5:1與7:1 的數值可以參考w3c的規範

2015/08/12補充:這篇文章被轉載,這邊再補充一下對比值的檢查工具

至於透明度定義好,要怎麼提供給工程師,說明如下:

iOS

iOS 在給顏色的值,可以直接給 alpha(α) 值,也就是像是網頁 css rgba 的標式方式,最後的 α 值,給 0~1 之間 0 代表完全透明,1 代表完全不透明,因此在 iOS  的標示上不會有什麼問題。

Android

Android 就比較麻煩,因為要給 hex 的色號,之前花了一點時間理解透明度的 hex 換算方式;hex全名是 hexadecimal,也就是 16 進位,這是除了 rgba 外,另一個比較常見的方式,在網頁設計上也經常在使用(在色號上會給#符號的,就是使用hex的方式給色)。

通常不指定透明度時,給的 hex 值不含井字號會有六碼:例:「#aabbcc」,aa 用來控制紅色、bb 用來控制綠色、cc 用來控制藍色,如果要補上透明度,就要在 aa之前加上透明度的 hex 值。

之前為了透明度的問題,手動算換了 16  進位的透明度值,以下是 rgba 跟 hex 的概略的換算方式(不想算數學就直接跳到表格,因為算的事情交給電腦處理就好):

transparent-02

但後來才發現有人整理好了不同透明度對應的 hex 值。– stackoverflow,如下表:

  • 0% – 00
  • 5% – 0D
  • 10% – 1A
  • 15% – 26
  • 20% – 33
  • 25% – 40
  • 30% – 4D
  • 35% – 49
  • 40% – 66
  • 45% – 73
  • 50% – 80
  • 55% – 8C
  • 60% – 99
  • 65% – A6
  • 70% – B3
  • 75% – BF
  • 80% – CC
  • 85% – D9
  • 90% – E6
  • 95% – F2
  • 100% – FF

所以如果要提供帶有透明度的 hex 值,就直接在 hex 值上的最前面,加上透明度的 hex 值就行了。在標示給工程師的文件中,就可以直接提供帶有透明度的 hex 色碼,例:「#cc000000」,我想工程師看到你如此貼心,應該也會挺開心的。

結綸

這篇的重點,其實是在強調,在繪製 app 時,字體與線條的線色盡量使用帶有透明度的黑色,而不要直接指定實色的灰色(如果是要那種紅底綠線、藍底黃色的特殊需求,不在此討論範圍)。

這也是我之前在做 app 時,因為定義太多不同的灰色,常常困擾我的問題,有時我也搞不清楚那個背景要用那個灰色,所以到最後每個位置的灰色定義都不一樣,維護上也就更加麻煩,你會發現工程師會一直跑來問你這個字體要什麼顏色…。

而背景色,建議還是以實色為主,因為每個 app 都會定義自己的主、副色,背景色如果用有透明度的顏色,不小心的話,有時會影響主色與副色的使用,但這是依 app 的需求取捨。

上述的說明,是基於白色的背景做為說明,如果是以深色的背景為主,那可以用白色帶透明度的字體顏色也是一樣的效果。

關於色彩的定義,可以參考這篇文章:

RGB、HSL、Hex 網頁色彩碼,看完這篇全懂了 – CSS可樂

有任何問題,歡迎討論!

廣告

介面設計時使用的繁體中文字體 for ios

我習慣在繪製app時,盡量讓繪製出來的畫面能夠與工程師刻出來的畫面一致,針對字體的部份,當然也要力求一致,如果為了美觀選了一些ios沒有支援的字體,工程師應該會跟你說:「ㄎㄎ,沒有這種字體唷,自己想辦法~」

基本上ios所使用的中文字體,相對於英文字體單純的多…因為沒得選擇;在ios的介面上,用的是「黑體(Heiti TC」)」是ios與mac通用的字體~

Heiti有分細、粗兩種字體 STHeitiTC-Light、STHeitiTC-Medium,在mac上繪製要模擬ios的介面,沒什麼問題,但在windows上,就要從mac上抓下來,然後轉換成windows可以用的格式,才可以在模擬出ios的字體,我上班時是用windows做介面的繪製,所以當然有準備好字體,之前在網路上找很久,都沒有相關資源,所以只好自己動手啦!

STHeitiTC for windows

下載後,解壓縮,丟到font就可以使用囉!!!

 

2015/09/23 更新

蘋果ios9之後,中文字體全面換成蘋方體

蘋方體  for windows

接下來要討論的就是,字體的設定,先要推薦一個app:Rainfont,這套app可以在ios的手機上查看ios內建的所有字體,可以調整大小,唯一可惜的是不能調整字距、行距、顏色…但還是很夠用了,有興趣的可以看這篇:

字級表把妹(內有強光慎入)-Akane Lee

在繪製介面時,設計師的問題是,我要設多大的字體來模擬手機的畫面?以下總結我一年多來的心得:

1.中文字體大小至少11pt

雖然ios的中文字體最小可以設到8pt…但除非必要,否則字體請儘量大於11pt,至少要讓人可以閱讀,除非你想挑戰使用者的耐心與眼力囉~

2.依不同的開發環境同比例放大

前面幾篇我有提到我是屬於做大縮小派的,所以我不會以1pt=1px做為開發環境,通常是1pt=2px或更高倍數來做為繪製環境。請參考這篇:
如何在illustrator 設定iphone6 及iphone6 plus 的製圖環境

所以根據我測試的結果,在電腦上面如果是用@2x的環境來製圖,那就直接將大小x2就好,但為了確保不會有問題,請先將字體的單位設為px,例如:如果要繪製12pt的文字,在@2x的繪製環境下,就用24px的字體,在@3x的環境下就用36px的字體,這樣基本上會完全一致!

3.搭配不同粗細

請記得有黑體也是有分粗、細,所以在標示文件時,要跟工程師說明清楚,否則工程師會依照個人喜好標示,那就是另一件事了,排版的重點在於節奏,怎麼排讓閱讀有節奏感,就看個人功力啦。

4.字體的可用樣式

字體的可用樣式不多,基本上就是:顏色、透明度、陰影、背景色,大概就這樣,互相搭配使用,雖然只有一種字體,也是可以有九九八十一種變化呢!

5.請設定好字體的使用規範

其實就是跟網頁一樣,h1~h6請定義好,內文、連結、標籤…等等,定義好在不同情況上字體的使用方式,這在往後要做標示或是重新設計,都會有所幫助。

以上大概就是ios的中文字體使用重點,要看英文字體就去下載Rainfont吧~~~有任何問題或錯誤,歡迎指正討論。

關於kerning 與tracking

這陣子剛好在研究  google 的 material  design,偶然發現 kerning與tracking這兩個名詞。

到底這兩個字有什麼差別,於是我稍查了一下,

兩個用都是字距的意思,但從中文字上很難理解這兩種字距有什麼不同,

因此我下一個比較清楚的說明。

kerning 指的是兩個(一對)字元之間的字距。

Kerning is the adjustment of space between pairs of letters.

tracking指的是一組文字的平均字距。

Tracking is Overall Letterspacing.

都是字距但有些微的不同,原因是英文字每個字元間的字距並不相同,理由是為了可以清楚辨別與閱讀,例如:kerning的 r與n,若kerning沒有調整好,可能就會被看成m,因此每個字元之間預設的kerning可能就會不同。

而中文字都是方方正正的,所以預設的字元之間的kerning基本上都是0,所以在中文字體下的設計,較少會考慮到kerning的設定。

關於在ai 或是ps下的設定,可以在文字→字元設定中找到相關的設定內容。

kerningNtracking

以上可以參考其他相關的文章

字體123:必需知道的基本知識(增補)

淺談Kerning與Tracking

教學影片

Illustrator tutorial: Pair kerning and tracking | lynda.com