UI 設計師在給 iOS 或 Android 開發者提供資源圖的時候需要注意哪些細節? | 知乎問答精選

 

A-A+

UI 設計師在給 iOS 或 Android 開發者提供資源圖的時候需要注意哪些細節?

2019年06月24日 GOOGLE, 知乎問答精選 暫無評論 閱讀 3 ℃ 次

【郭嘉琦的回答(28票)】:

移動平台上只做過 iOS 開發。

關於尺寸和坐標:

  • 在實際的工程中用多大尺寸,就出多大尺寸的圖,絕對不要讓工程師去 resize 圖片!(當然 @2x 轉非 retina 分辨率除外,他們有腳本可以幫他們。)設計師最好開一個與屏幕分辨率相同的 psd 文件用來調整大小出圖。

  • @2x 的圖要給偶數分辨率,大小應當是整數(@Bill Cheng 在有些情況下視圖設置成浮點數的 frame 會導致自定義字體發虛)。
  • 同類資源(比如一排按鈕圖標)的大小要相同,因為工程師很可能會用循環創建那些視圖。可能有人會問為什麼大小會不一樣?最常見的是因為陰影等原因導致有幾個像素的偏差。還有些時候我也不知道為什麼,但是碰上不專業的美工就是會把同一個按鈕出的每次都不一樣大。
  • 同類元素的資源,不管大小相不相同,那麼它們的內容相對於 (0, 0) 點也要是對齊的。比如——圓的圓心對齊,人物的腳要在同一水平線上。至於 (0, 0) 點是左下還是左上,不同的操作系統規定得不一樣,在 iOS 中是左上。

關於留白:

  • 讓圖片盡可能小。
  • 但不要截斷陰影、外發光等。不要用眼睛判斷,多用 PS 的「按透明像素裁切」功能。
  • 有些具有對稱中心的元素,當四周的內容不對稱時,應該加多餘的留白讓元素的中心位於畫布中心。這並不是一句廢話,有時你的按鈕向右、向下投影,當按透明像素裁切後,按鈕的中心就會相對與畫布中心偏左、偏上。一般情況下不用這麼嚴格,但是如果你想給按鈕加個選中光暈,這張光暈的圖肯定比按鈕的圖要大,按鈕再不是中心對齊的話,程序員會十分痛苦。

關於切圖:

  • 用來播動畫的幀圖片,導出時運動圖層和靜止背景分開,減少運行時系統資源的耗費。
  • 可變尺寸的,或是大尺寸、四角特殊但四邊簡單的資源——比如微信的消息氣泡,可以導出最小可用的大小,工程師利用 iOS 的 resizableImageWithCapInsets: API 來生成所需大小的圖。參見 geeklu.com/2012
  • 有些資源不應出整張圖,而要根據工程師的需要切散,比如 Tab 背景圖不能帶著當前激活的 Tab 出圖,雖然它們很可能是被一起畫出來的。當你覺得工程師使用這張資源可能會有潛在的麻煩時,與他們溝通。

關於透明度:

  • 簡單地說,該透明的地方透明,不該透明的地方不要透明。有時設計師為了得到一些減淡了的顏色或者混合色而在 PS 中設置了填充的透明度,之後忘記了,等到出圖時也看不出區別。但是在實際程序中,這些半透明的地方可能會表現出怪異的行為。對於一個填充到底應不應該是半透明的,取決於設計師所要模擬的真實物體是不是半透明的。比如,現實中的陰影往往認為是不透明的。如果你給工程師一張具有半透明陰影的圖,並且兩個視圖都使用了這張圖,一旦它們重疊,那麼重疊部分的陰影就會加深。

關於文件名:

  • 如果文檔裡包括組件的命名,就按文檔來。
  • 否則,自己起文件名時注意邏輯分層、語義正交、適當的前綴後綴。
  • 是否使用單詞縮寫、多級文件名正序還是倒序等問題,多瞭解工程師的個人喜好。
  • 不要用拼音!
  • 多級文件名的不同部分之間使用「-」還是「_」連接,會影響到程序員的自動補全和一些操作(比如"btn-cancel-highlighted.png"中的每個詞可以單獨雙擊選中以便修改,但"btn_cancel_highlighted.png"雙擊則會選中整個詞,大家可以試試看)。

【王聰的回答(1票)】:

現在我們做iOS應用,美術基本都忽略非Retina的iPhone了,還用iPhone3GS的用戶已經比較少了,單獨切普通圖也許從人力和安裝包大小上都會不划算。

標籤:-用戶界面設計 -設計 -設計師 -Yang Chi -MMORPG -王進


相關資源:





給我留言