切圖的細節-不會消失的一像素

前陣子跟另一位設計師討論到關於切圖的細節,所以特別寫了這篇文章來討論。

之前的文章有提到過,關於切圖一事,我大多交給工具來處理 cut&slice me,而這套工具的使用,有一個條件,是要用最大的解析度做為切圖的基礎,再生成不同解析度的圖片,也就是我先做大3x,再透過工具縮成1x,而在程式批次縮小的過程,我想大概自動化的流程就是:平面化→縮小→輸出。所以如果我畫了一個 3px*3px 的 block,照他的規則,應該會自動產生出 @1x 的 1px*1px、@2x的2px*2px及 @3x的3px*3px  的切圖,如下圖。

3pxdottest2


從上圖中可以知道 3px*3px  的 block 會分別縮小成不同解析度下需求的尺寸。

接下來問題來了,如果繪製的圖小於 3px*3px 會發生什麼事情?我們先來看 2px*2px 的 block 輸出成切圖的結果。

2pxdottest

很明顯的 2px*2px 的 block在 @2x跟@1px 的條件下,己經是縮小的極限了,不會再更小,所以停留在 1px。

那如果是 1px*1px的block,會是什麼樣的情況?

1pxdottest

最小就是1px,不會再更小了,因此我們就可以知道,小於1px的大小在平面化再縮小成切圖的時候,是沒有意義的。

但光是這樣的討論還不夠,會那麼在意切圖的細節,原因在於設計 icon 時,會用到線條,而且線條不會剛好切在每個格點,或是帶有孤度…等等,因此線條或區塊間通常會有間隙,所以我用一個比較極端的方式來比較,存在不同像素的間隙時,切出來的圖會有什麼不一樣。

cols

我先畫了一些固定高度為 6px 長方型,然後給他們不同的間隙,在還沒做切圖之間,我們大概可以猜想一下,切圖會變成什麼樣子,高度在 @3x 的時候會是 6px,@2x時會是4px,@1x時會是2px;而寬度的部份,根據我上面的測試,寬度為 3px 的時候,@2x 會是 2px,@1x 會是 1px,而寬度為 2px 時,在 @2x 之後都是 1px,寬度是 1px 的情況下就都是 1px。

但間隙會怎麼處理,如果照這樣的規則,切出來的圖一定會分不出來間隙,但我們可以直接看結果:

mixnobg

@3x 的情況下,應該沒什麼太大的問題,間隙還是很清楚,但是在 @2x 跟 @1px 的情況下,間隙小於 1px 的情況下,發現電腦會自動幫你補上灰色,有些原本應該要是黑色的區塊,也變灰色了,雖然我不太知道灰色是怎麼決定的,但我想應該是透過補差法的方式而來的,但這就是電腦在做的事情了;我們要知道的是,在遠看的情況下,它依然還保有一定的辨視度。

但更神奇的是,電腦補的不是實色的灰色,而是半透的顏色(*png才會的格式才會保有透明度),如下圖:

mixwithbg

我們可以發現,這些灰色,是帶有透明度的黑色,所以在不同的背景色上,做大圖來縮小圖,只要符合解析度的需求餵圖,間隙的感覺不會消失,這些小於 3px 的間隙會用某種方式來呈現,所以 1 像素永遠不會消失。正常螢幕解析度看是像這樣的:

normalview2

以上大概就是我的測試結果。

但對於介面設計還有 icon 的繪製有什麼樣的建議,電腦會自動幫你補足這 1px 的間隙,如果切出來的圖會歪,那大概就是對齊的問題了,另一點就是如果要保有比較好的銳利度,或許算好px再繪製icon,會是比較好的方式,當然這就比較困難一些。

但一般人的眼睛很難去辨視 1px 的差異,尤其是在高解析度的螢幕上那就更難了,所以對齊倒是可以努力去方向,那就回到我的另一篇文章(如何在illustrator上設定完美像素(pixel perfection)中所提的,對稱圖形盡量用偶數去算,比較不會有歪掉的感覺。

以上小小討論,如果有任何錯誤或補充,歡迎討論。

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可樂

有任何問題,歡迎討論!

APP切圖的命名方式

關於切圖的命名方式,基本上沒有什麼固定的規則,但就我個人的經驗,切圖命名是一件很重要但很麻煩的事,一個 app 的開發,可能有數十張甚至百張的切圖,還要依不同解析度去做切圖,所以命名一定要清楚、一致、能擴充,否則之後會很難管理。

關於切圖的規則,有幾點必需要注意:

  1. 全部英文小寫
  2. 請以下底線做區隔 例: btn_navi_share_disable
  3. 輸出的檔案格式必須是.png
  4. 圖片請保留透明底,讓元件的小大一致。(下面有說明)
  5. ios依解析度會有@2x、@3x的圖片,而android會依解析度存成mdpi、hdpi、xhdpi、xxhdpi…等不同資料夾。

關於第 4 點要說明一下,保留透明底,在切圖的時候,不要依照 icon 的形狀做切圖,因為每個 icon 的高度、寬度都會不一致,不好對齊、標示,此外,如果圖片是可以點擊的,那點擊的範圍大小也會不一樣,這對工程師與使用者都會造成困擾,如下圖。

slice_exam-01

切圖工具

在沒有切圖工具時,切圖是設計師的惡夢,尤其是 Android,同時要做 hdpi、xhdpi、xxhdpi…簡直要命,還好這世界總是存在希望的,有人就開發出好用的切圖神器,我使用的是 cut&slice me 這套 photoshop 的 plugin,這套 plugin 可以快速的切圖,同時會依照圖層名稱來命名圖片名稱。

Cut&slice me 2.0版本還在開發,所以目前不支援 ios@3x 的切圖,同時 Android,只支援到xxhdpi(3倍)的解析度, 至於其他切圖軟體,大多要付費,但就實用性來說,花這點錢非常值得啊!! 否則切圖真應該獨立出一個專門的職缺才是!

切圖流程

我個人的開發習慣,是在 ai 設計完稿後,將所有要切的圖片丟到 ps,統一在 ps 做管理,我是做大縮小派的,所以丟到 ps 之後不用再重新放大,切圖軟體會要求提供最大尺寸 (You have to design for the highest resolution.-cut&slice me),然後執行時會自動轉成不同解析度的圖;但要注意的是,丟回 ps 的時候,我會儘量保留「向量圖智慧型物件」,以便之後重覆的修改或使用。

切圖的命名規則

Cut&slice me 會以圖層名稱做為圖片檔名的命名,所以命名的規則很重要,好的命名方式,一眼就能知道這張圖是用來做什麼的,跟在管理網頁 css 的道理是一樣的。

所以我根據自己的工作經驗整理出來一些規則提供參考,但未必要用這樣的方式,一切看個人習慣或工程師的要求來做調整。我提供的規則是:

誰_在那裡_長什麼樣子_在做什麼_什麼時候

  • :也就是構成畫面的元件,btn(button)、ic(icon)、bg(background)、…等等,通常放第一順位,通用性很高,整個app都可使用。

     

  • 在那裡:這元件在那裡使用的,可以用app的架構,例如:stat(status bar)、tools(tools bar)、side(side bar)、tab(tab bar)、ctn(content)…等,如果沒有特定的位置,我會取名com(common)或不要命名,通常會是共通的元件。

     

  • 長什麼樣子:形容這個元件的樣式:例如:方向、顏色、品牌…等。

     

  • 在做什麼:元件主要作做用,分享、收藏、編輯、開關…等等。

     

  • 在什麼時候:也就是狀態,例如:按鈕會有:normal、pressed、actived、disable這幾種狀態,但如果沒有特別的狀態,也可以用數字來表示。而slice&cut me 在圖層管理時加上「@BTN」 就會把所有按鈕的狀態給設定好,超貼心的~

     

簡單舉個例子,例如我要在 navigation bar 上做一個 fb 分享的按鈕,我圖片的命名可能就會是:

btn_navi_fb_share_normal/pressed/disable

這樣的命名方式,資訊應該夠充足了,從名稱就可以大概知道這張圖片是用來幹嘛的,所以之後要換圖或是新增圖片,都會比較好管理。

以上是我的命名建議,但依照不同 app 的需求,命名的方式也應要有所調整;此外,app 的開發能夠支援的樣式愈來愈多(圓角、陰影…等等),而且目前主流還是以扁平化設計為主,不像以前要做擬真化的設計,所以如果能夠用程式解決的,跟工程師好好溝通,儘量用程式解決,這樣也比較不會有解析度或尺寸的問題。

如果有更好的命名方式,也都歡迎討論~

介面設計使用的繁體中文字體 –Android篇

關於 Android 的介面設計,在前幾篇有提到相關的製圖環境設定:

如何在illustrator 上設定Android的製圖環境

而這篇主要介紹如何在 Android 系統模擬繁體中文字體環境, 與 ios 亦同,在中文字體部份沒太多選擇,雖然 Google 與 Adobe有一起開發出開源字體 (Noto CJK),但就目前在來看,原生 Android 的預設中文字體似乎還是只有一種, 加上各家廠牌手機都有自行開發基於 Android 系統的介面,例如:Htc 的 sense、小米的米 ui…等等,所以各家廠牌的手機顯示出的中文字體也不太一樣,而使用者也可以透過軟體來更換系統字體,但這篇不針對其他客製化的字體做討論。

在Android的中文繁體原生字體是DroidSansFallback,只有這個字體可以用,所以我就用這個字體當作說明的標準。

DroidSansFallback  (for windows,mac可以抓回去自行測試,ttf 檔)

這個字體的結構與對岸的文泉驛微米黑相同,根據我的找到的資料 DroidSansFallback 應該是文泉譯的團隊跟 Google 團隊一起開發的,而繁體字是直接轉自簡體字,所以有些筆劃是對岸習慣的比劃,相關文章的討論可以看這篇:

GB 18030 就在你身邊 – justfont

android_font_size-01

上圖是兩種字體的比較,相同的字級下看起來差異不大。而在 Android 的開發環境,字體的單位是 sp(Scaleable pixels),有點類似 dp,但就記得字體的單位是 sp 就好了,單位相關的文章最近 Google Material Design 也有釋出相關的設計說明:

Units and measurements – Google Material Design

以下是我在繪製 Android 會注意到的事項:

1.中文字體大小至少12sp

Android 中文字體最小就是 12sp,小於 12sp,根據我找到的資料可能會出現錯誤。stackoverflow

2015/04/20補充說明:
根據網友的補充,字體可以小於12sp,但會出現錯誤提醒,並非無法設定小於12sp的字體。
同時再附上android 按鈕樣式產生器:Android button maker – Angrytools.com

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

前面幾篇我有提到我是屬於做大縮小派的,所以我不會以1dp=1px做為開發環境,通常是1dp=3px來做為android的繪製環境。

所以根據我測試的結果,在 3 倍的尺寸下繪製介面(1920px*1080px),字體大小我會x3,例如:12sp 的字要用 36px,14sp 的字要用 42px,以此類推。

android_font_size-02

上圖是我針對不同的 dpi所整理出來的 sp 與 px 之間的轉換,但根據我的實際操作結果 (htc m7),還是會有誤差,真正 app 的字體會略小於設計時所模擬出的畫面的字體約 1sp,也就是說如果我要完全符合我預想的字體大小,所有的字體在設計標示時,要再加 1sp,例如:在 480ppi 的製圖環境下, 36px 的字體在設計稿上,本來是要標 12sp,為了符合大小,會標 13sp,以此類推。

3.粗細的設定

關於粗細的設計,我不太確定(歡迎指正),根據我的測試,中文字體可以設定 Light 與 Regular,但粗細實際比較下,沒什麼改變,但如果在 Regular 的字體下再設成 bold,會略粗。但我通常不會再針對粗細做設定,Regular 的粗體我認為太粗,不好使用。

4.字體的可用樣式

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

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

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

以上是我針對Android界面設計繁體中文字體環境模擬的建議,當然這些規則都會因為新的技術有所調整,例如新的 Noto 字體的開放使用等等,介面設計沒有一定的方法,所以如果有更好的方式,也歡迎討論。

介面設計使用的繁體中文字體 – iOS篇

在進行介面繪製時,我們會盡量讓繪製出來的畫面能夠與工程師刻出來的畫面一致, 而字體的部份,也會使用裝置所預設的字體,如果為了美觀選了一些 iOS 沒有支援的字體,工程師應該會跟你說:「ㄎㄎ,沒有這種字體唷,自己想辦法~」

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

2021/10/28 更新
iPhone 在 iOS9 之後,中文字體全面換成蘋方體,使用在繪製介面時請使用蘋方體,蘋方體目前也是 mac 上的預設中文字體,windows 的部份需要下載安裝使用。

蘋方體  for windows

在繪製介面時,設計師的問題是,我要設多大的字體來模擬手機的畫面?以下提供幾點建議:

中文字體大小至少11pt

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

搭配不同粗細

蘋方體目前可以設定六種不同程度的字重,建議不超過三種字重,因為中文字結構較為複雜,使用太多不同字重的字體,排起來會顯的混亂、沒有重點。

請設定好字體的使用規範

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

電腦螢幕與手機螢幕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所構成的空白區域,剛好將整個視覺的重心給分散掉。

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

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

 

如何在Illustrator 上設定Android的製圖環境

使用illustrator繪製介面的人不多,而且網路上可以參考的文章也很少,記得我第一次接觸到介面設計時,公司交接給我的是一份又一份的紙本文件,所有的標式方式都是以人工的方式進行標示,因為頁面很多,有時會由不同人來進行文件標示,每個人標的都不太一樣,最後刻出來的介面就得經過不斷的修正與調整。

為了統一標示,所以我找了很多文章,但大多的文章頂多跟你說明一些像素原理,還有單位的轉換,真正教你怎麼設定或怎麼標示的文章不多。

於是,我只好自己摸索。與工程師溝通後,也找到一些比較好的製圖的方式,這篇文章我主要說明如何在illustraor 上設定android的製圖環境。

基本上,繪製android的介面前,我先大略解釋一下什麼是px(pixel),什麼是ppi(pixel per inch)跟dpi(dots per inch),當然有很多文章可以參考,如果己經了解,可以直接跳過,看我最後的設定。

  • 像素(px)

    大家都很熟悉,就是電腦上圖片所顯示的單位,我們常常說的,圖片是1920px*1080px ,指就是以像素做為單位。

  • 每英吋像素(ppi)

    指的是每一英寸上有多少像素,而我們一般在看螢幕的細膩度就是在看這個單位,每一隻手機的尺寸都不相同,所以ppi是一個比較各家手機畫面細緻度的一個「物理標準」。而ppi是用螢幕對角線的長度所計算出來的,所以各家手機廠商的長寬比不同,計算出來的ppi也就會不一樣,這裡只要記得一個原則就好,在相同的解析度下,手機的尺寸越大,ppi就越低,簡而言之,ppi就是螢幕像素的物理密度。舉個例,htc m8的手機尺度是5吋,m7是4.7吋,一樣是1920px*1080px的解析度,誰的ppi高?  答案是m7。

  • 每英吋點(dpi)

    指的是每一英吋上有幾個點,而點(dots)是什麼? 看指的是什麼。也就是說,如果有人跟我說dpi,我必需要知道他講的是什麼的dpi,dpi是需要被定義與指定的,例如印刷與螢幕對於dpi的需求也就不同,印刷至少要300dpi,而在螢幕的圖片只需要72dpi就夠了。而在電腦或手機的螢幕上的1dot=1px的條件下,ppi跟dpi指的相同的事情。

就是因為每一家andorid裝置的尺寸都不太一樣,所以google必需制定一個標準(前面所提的dpi需要被定義或指定),規定以160dpi為基礎,往上延申尺寸,也就是說在每英吋160點的條件下,1dot就等於1px,此外以「獨立像素(dp)」做為開發andorid介面的單位,請參考下圖。

andorid_size

http://developer.android.com/design/style/devices-displays.html

而身為一個介面設計師,最想知道的是,到底要用多大的尺寸來繪製介面?因為在電腦上是以px作為單位,而andorid是以dp作為單位,1dp到底要等於多少px是我們在意的事情。

http://screensiz.es/phone

這個網站有提供相對的倍率做為參考,px density的倍率就是大略的比率, 300%指的就是1dp=3px,如果不想深究(我想大概也不需要花太多時間去深究),就以這個比例下去繪製,誤差會很小。

以上如果都看不太懂也沒關係,就照我下面的設定下去畫就對了

以1920px*1080px作為繪製尺寸

而我個人的習慣,我會以1920px*1080px,作為繪製的尺寸,因為這個尺寸是主流的高階手機規格,從4.7~6吋的螢幕目前都是以這個尺寸為主,想知道自己的手機是什麼尺寸,就直接截圖,丟回電腦看就知道了,就目前的手機來看,大概都是這樣的尺寸。

將cadtools的比例設為3:1

這個我就不多說了,設成3:1,不懂的看這篇文章。
Illustrator專用標示文件工具 CAD-tools

使用cut&slice me 切圖

而切圖的部份,就交給cut &slice me 去處理,一次滿足所以有的dpi,我是屬於放大縮小派的,因為我覺得這樣省事,而且要做介面的mock up 或demo也比較方便。

繪製時盡量符合material design的規範與標準

google 出了一份material design的設計準則,
material design
個人建議可以google的guideline作為繪製的準則,雖然他的guideline上是以dp作為單位,根據我的實作經驗,在1920px*1080px的大小繪製介面,會完全match material design的尺寸。

任何的元件,盡量以8dp的倍數作為尺寸標準

在material design的標準下,你會發現大多的元件都是以8dp的倍數作為尺寸標準,而在px的環境下,要乘3倍去繪製,也就是說要畫一個8dp*8dp的正方型,用24px*24px 下去畫就對了。

字體大小1sp=3px

sp是android的字體單位,而在字體大小的設定上,1sp會等於3px,也就是如果要模擬12sp的大小,將字體也設定為px,用36px下去做對了,之後我會針對字體的部份再做說明。

基本上按上我建議的設定下去做,繪製出來的介面誤差會很小,剩下的就是在不同裝置上的微調了,在我的經驗中,除了比較舊的機型有些會跑版外,基本上大部份都符合我預期的設定,當然這些都是我自己實作出來的經驗,繪製介面的方式有很多,如果有更好的方式,也都歡迎交流。

如何在illustrator 設定iphone6 及iphone6 plus 的製圖環境

這篇主要是介面如何在illustrator設定iphone6與 iphone6+ 的製圖環境。

過去iphone4s到5的改版加高了螢幕(480pt→568pt),對於介面的佈局影響不大,麻煩的反而是設計風格的調整,從寫實變成扁平化的風格,花了我好一段時間去調整app;

而iphone5→iphone6、6+的改版,我想才是設計師頭大的改版,應該還有蠻多人不知道怎麼處理,我找了一些資料,中文可以參考的資料不多,如果有興趣可以參考以下的網站:

The weirdness of the iPhone 6 Plus resolution and how to work around it

The Curious Case of iPhone 6+ 1080p Display

The Ultimate Guide To iPhone Resolutions

在ai要用什麼樣的尺寸來繪製iphone6、6+的界面,同時又能兼容iphone5的尺寸,這其實有點麻煩,原因在於iphone5與iphone6、6+的「可視範圍」根本不一樣…基本上就像是在iphone上做RWD…3種尺寸,同時又有@1X、@2X、@3X圖片的需求,怎麼做比好? 我想了幾個方案:

要看方案前,我們來比較以下裝置尺寸的大小,

iphone dimension

這張圖使用point作為的單位(pt-point是工程師在刻 ios介面統一的單位,跟android的dp類似),從上圖我們可以知道,iphone4s跟iphone5寬度一樣,iphone5高度略高,所以用iphone5為基礎去繪製介面的情況下,會超出iphone4高度的可視範圍,但我們可以去忽略它,因為使用者在操作介面時,用下滑的手勢就看的到內容,所以對於介面上的佈局影響不大。

iphone4andiphone5size-02

這張圖就可以看出,iphone4s到iphone5的改版,介面就只差在高度不同。

可是從iphone6、6+之後,除了尺寸變高外,寬度也變寬,可視的範圍整個變大,對使用者來說,當然是好事,因為可以看到的資料也就變多了,而開發app的設計師與工程師臉就綠了,因為同時要考慮三種寬度的繪製尺寸。

behance on iphone

從這張圖,就可以知道,在iphone5、6、6+的畫面上,資料的長度就會不一樣(紅框處),所以可能的作法就是固定左右的邊距,而資訊的區域,隨裝置大小來變動資訊量。

最直覺的做法就是刻三個不同的版…標三種不同的尺寸,也就是要做三種設計,再針對每一個裝置來進行設定…我想這應該是在考驗設計師與ios工程師的耐心吧!

所以我提供ai繪製的解決方案如下,

  • 方案一:只做2倍iphone5的版本,iphone6跟6+,就不要理他,讓系統自己去render出尺寸。
  • 方案二:做3倍的iphone6的版本,但設計時同時要考慮到iphone5、iphone6+的佈局。
  • 方案三:三個尺寸都做。

注意:以上方案是以ai為繪製工具,並且以pt做為單位基礎。

如果是方案一,

是以iphone5的版本刻,以640px*1136px的大小繪製,cadtools比例調整成2:1,iphone6跟iphone6+的畫面讓系統自己render,優點就是做一次就結束,缺點是,iphone6跟iphone6+的圖還有字會糊掉,就看大家強迫症的輕重了…

cadtools工具請看這篇

選擇方案一,會有一份設計稿,一分標示稿,@1x、@2x的素材包(cut&slice me @3x的版本還在開發中)

先講方案三,

全部都刻,在ai的設定如下:

  • iphone5 : 640px*1136px的大小下去繪製,cadtools比例調整成2:1來做標示。
  • iphone6:以750px*1334px 的大小繪製,cadtools比例也是2:1做為標示,icon的圖示,可以與iphone5的共用,都是@2X的大小。
  • iphone6+:以1242px*2208px的大小繪製,cadtools比例調成3:1來做標示,用裁圖工具,裁成@1X、2X、3X的圖。

所以最後應該會有三份設計,三份的尺寸標示稿,還有一份@1x、@2x、@3x的素材包,優點當然就是全部的尺寸都齊了,缺點就是很花時間…。

值得注意的是在iphone6+上,他會自動downsizing成1080px*1920px(原尺寸除以1.12)的尺寸…但這就不必理他了,因為不是我們可以控制的。但值得注意的事,ios有一個44pt的最小點擊區域原則,但是因為downsizing的關係,在iphone6+的畫面上,可能會不小心打破這個規則,也就是說假設你畫了一個112pt *112pt的元件,在畫面上會自動downsizing成100pt*100pt。

方案二,

也是我可能會採取的方式,但如果要採取這種方式,最好對於介面的尺寸與距離都有一定的敏感度與經驗,新手當然建議全刻過一次,可以更加熟練,ai設定如下:

設定一個1125(375*3)px*2001(667*3)px的繪製區域,cadtools比列調成3:1,在繪製版面時,因為要考慮到iphone5、與iphone6+的寬度,對於非固定寬度的物件,要有最小寬度限制,裁圖也是交給裁圖工具一次搞定。

在這樣的繪製條件下,只需要出一份設計稿,一份標示圖,一份@1x、@2x、@3x的素材包。

要注意的是,什麼樣的物件大小是要固定的,什麼樣的物件大小是可以變動的,一開始就要想好,而且最好要標示「最小寬度」,讓iphone5可以正常的顯示,這樣的優點就是出一次圖就可以解決,缺點就是要去想像iphone6+多出來的寬度(736-667=69pt)會填入什麼樣的內容。當然還有更好的方式,就是出一份完整的設計guideline,將所有有物件模組化,在不同的裝置下如何顯示,都能夠提供清楚的說明,這樣往後只需要標示大略的版面配置,物件的部份請工程師按照guideline的方式去處理,應該也可以省不少事。

但在這樣的方案下,mockup只能做iphone6的,所以除非客戶有特別要求,否則iphone6的尺寸,應該會是主流的規格。

我簡單示範一次我會怎麼標示:

iphone6_mark-03

 

上圖是我以1125px*2001px所繪製出來的圖,我的標示會分三種顏色,灰色跟紅色藍色,灰色代表是固定尺寸,不可變動,紅色是最小寬度(for iphone5),藍色則是auto,會隨寬度調整大小。

這樣的標示方式,我想應該也就夠清楚了~~但建議還是要多與工程師溝通做法,畢竟做法掌握在工程師手中,溝通才是解決問題的根本之道啊!!

以上是我個人建議的方案,如果有任何疑問,或有更好的做法都歡迎討論 :)。

 

 

 

 

Illustrator專用標示文件工具 CADtools

2021/10/12 更新
目前已比較少人用 Illustrator 繪製介面,通常會使用更專業的介面計軟體:Sketch、Figma、Adobe XD。建議使用更專業的軟體,下面文章提供的教學設定依舊可以參考。


這次來介紹一下一套我常用的標示工具CADtools,這套工具是由Hot Door所開發的 Illustrator 套件,安裝後就可以像 Autocad一樣,在 ai 的文件進行標示的動作。一般比較常用在空間設計上,但用在進行介面的標示,也是非常好用的!

Hot Door

但這套軟體本身並不便宜,所以…

因為我是用ai 來進行介面的繪製,基本上我不會再把圖出到ps來進行標示,目前我還沒找到比CAD-tools 更方便的方法。至於ps的話,有很多工具可以選擇,如果有興趣可以參考這篇文章:(已成為歷史的部份😢)

標示文件神器:specKing

這套軟體的安裝方式就像一般的AI的插件安裝方式一樣,安裝後會在視窗裡找到這套插件

Image 1

同時工具區,也會出現CADtools的可用工具按鈕,基本上會使用到的工具不多,通常進行介面的標示只會用到:垂直距離、水平距離、資訊的標示(顏色、字體大小、圓角…)、還有比例設置功能,大概這樣就很夠用了。

2015/03/30補充 :在進行標示時,請先至 視窗 / CADtools / 顯示CAD單位 →將單位設置成「」,這裡的點代表的就是px,其他設定還有小數點,暫時用不到。

  1. 平行尺寸-通過線:標示平行尺寸的距離
  2. 垂直尺寸-通過線:標示垂直尺寸的距離
  3. 標示:標示文字內容
  4. CAD比例:調整比例,如果是2:1,就是你畫一個10px*10px的物件,標出來的值會是5*5。這超好用,因為不用再去計算@2x或@3x;透過比例的設定,如果是要出@3x的圖,將CAD比例設成3:1,標出來的值假設是1(單位:點),洽好就是android(XXHDIP)的1dp。所以我都出大圖,透過比例功能的轉換成pt或dp的單位,這之後會非常省事。
cadtools02

要特別注意的是,標時文件時,會在圖層中產生一個維度層,用來紀錄每個標示的內容,而我在標示時,通常會再建立一個measure block圖層,來進行標示,可以參考下圖:

cadtools03

通常我會利用measure block來測量距離,標示完後,就直接取消顏色留下路徑,但如果刪除路徑,那維度層的標示也會同時消失,所以把measure block分開於其他圖層,是為了讓文件乾淨,不要跟其他物件混在一起,方便管理。

最後標示完的文件會像這樣:

cadtools04

超有成就感的呢!!

最後要再強調一下,給工程師的文件一定要清楚,如果不確定怎麼標示,在標示時可以與工程師溝通,正確的文件標示,可以降低溝通成本,通常我標示完文件過去,就很少再回來了,所以標示清楚與準確對於一個好的介面設計師而言是很重要的,此外怎麼將與工程師的溝通成本降到最低,那就是建立一個完整的設計 Guideline,怎麼建立? 這之後我再說明吧!