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

廣告

電腦螢幕與手機螢幕PPI的關係

關於 ppi (pixel per pnch)每英吋像素,在前幾篇文章有提到。

這篇來討論一下,關於 ppi 在電腦螢幕與手機螢幕之間的關係。

1inchpx

上圖的視窗,對於常常在使用繪圖軟體的人應該不會陌生,解析度通常是預設72 ppi,也就是指在1英吋裡會有72個像素,我們也可以隨意的去調整ppi的值,所以在電腦的操作上,ppi 指的就是這件事。

那這跟手機螢幕所指的 ppi 有什麼關係? 就定義(「每英吋裡有多少相素」)來看都是一樣的。

手機的螢幕 ppi 的計算公式如下:

ppicount從上面的公式來看,我們一樣可以得到手機螢幕的 ppi 。為什麼要用對角線來算,因為各家的尺寸不同,用對角線最公平啦,~

那我們再看下一張圖。

squareppi

想像這張正方型的圖片,就是手機螢幕,那這個正方型的 ppi 是多少? 首先我們先把 z 的長度,透過斜邊公式計算出來,再根據 ppi 的公式求得,一個1英吋72*72解析度的螢幕,ppi大約也是72,但其實這樣的算法是多此一舉,一定會是72 ppi,因為只是不同單位在轉換而己,而且電腦螢幕與手機螢幕的像素應該都是接近「正方型」的,所以在正方型的像素的條件下,未必要用對角線來求 ppi,只要知道寬、高,也是可以求算ppi。

重點是想討論一下,如果在製圖時,將製圖的尺寸設成手機螢幕的物理尺寸,然後再調整 ppi 的值,是不是一個可行的方式?

例如m7的螢幕尺寸是4.1(inch)*2.3(inch), ppi 是468,那將數值作為繪圖尺寸,應該是可行的?

感覺上好像是可以4.1*468=1919, 2.3*468=1076, 其實己經很接近原來的1920*1080的解析度了。

但實際上應該不好操作,因為要考慮到切圖、還有單位的換算、還有不同裝置的尺寸大小…

那不如就用預設的72 ppi,在1920*1080上製圖就好…

以上只是我鑽牛角尖思考,當然這篇一點都不實用…

金馬51主視覺分析

金馬51視覺

這張圖片是金馬51的主視覺,是台灣知名設計師,蕭青陽的作品。

當初這張作品出來時,被惡搞了一翻,雖然我第一時間也會有奇怪的聯想,但就理性的角度來看,這樣的主視覺,還是可以用黃金分割來做簡單的分析。

這篇文章我不多做說明,就直接看圖吧~

51

 

這個作品套上黃金比例的線稿後,就大概可以知道,版面偏寬、胖會有比較大、氣派的感覺,

主視覺往中間稍微集中,視覺重心大概是在頁面的中間下方,有比較有穩重感~

而5、1、TAIPEI GOLDEN HORSE FILM FESTIVAL所構成的空白區域,剛好將整個視覺的重心給分散掉。

文案主要集中在右下方的圈圈,這在版面的佈局算是蠻常見的方式,但整體來看,是是蠻符合黃金比例的分配方式。

所以再次證明,大部份的版面設計絕非偶然或光靠直覺,仍然是有規則可以找尋的!! 美感就因人而異了。