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

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

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

設計的心理學 – 行動的七個階段

相片 2015-4-17 上午10 01 25

這陣子看了一本設計心理相關的書《設計的心理學》,是 Donald A. Normand – 唐納.諾曼的大作,只要是從事介面或是使用者經驗的設計,應該多少都會看過他的著作 ,而這本書已經是第三版了,作者也不斷的修正及增加新的內容。這本書不太好閱讀,偏重認知心理學,理論與實務之間的結合,但為了把從書中學到的東西內化,我將裡面所提到的重要概念再透過自己理解的方式來進行說明與討論。 read more

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

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

1.減少灰階顏色定義

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

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

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

APP切圖的命名方式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1inchpx

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

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

金馬51主視覺分析

金馬51視覺

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

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

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

51

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

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

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

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

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

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

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

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

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