介面設計時使用的繁體中文字體 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吧~~~有任何問題或錯誤,歡迎指正討論。

廣告

留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s