[TOC]

前言

俗話說完事開頭難

對一個Android開發而言，專案正式開發的第一步就是拿到圖（高清圖和具體切圖）。第一步至關重要，UI圖做得好、標準高，後面的開發更傾向於按照高的標準去要求自己，開了個好頭。UI本身就做得很爛，很多不合理的設計互動，切圖大小不一，格式紊亂，粗製劣造，做出來的app質量可想而知。

給美工的建議

基本原則： 符合規範
所謂規範主要是，符合美工的美學常識規範，和Google官方設計規範，我在專案中遇到的問題，概括起來包括以下幾個方面：

• 單位規範
  android螢幕有自己的基本單位。使用dp為單位切圖，android開發做起來會得心應手。當然使用px為單位已經是行業慣例了，如果實在改不了，並且你還不清楚他們之間的換算關係，可以參考我的上一篇博文-

  Android螢幕適配全攻略1-從dp sp px說起。這裡要說的是，讓設計和美工清楚的知道為什麼要使用dp這個單位，是為了去解決Android螢幕格式的多樣化問題。清楚了這個概念和具體計算以後，切圖和設計的時候才會更加註意，更早的去處理螢幕適配的問題，而不是到開發甚至測試和預釋出的時候才想起來處理這個問題，專案經驗告訴我們，儘早的發現問題，可以減少專案風險。

• 字型規範
  主要指字型樣式和大小的規範性，一般字型樣式我們都採用預設字型，如果實在有特殊需求，需要在app裡面匯入
  字型包。大小規範是指： 1.使用sp為單位標出。2.使用常用單位，並且為偶數（奇數除以2會產生小數，強制轉型會產生誤差）。在dimens檔案中這樣定義字型引用：
  <dimen name="font_size_tiny">10sp</dimen>
<dimen name="font_size_small">12sp</dimen>
<dimen name="font_size_normal">14sp</dimen>
<dimen name="font_size_normal_high">16sp</dimen>
<dimen name="font_size_large">18sp</dimen>
<dimen name="font_size_large_high">20sp</dimen>
<dimen name="font_size_xlarge_high">22sp</dimen>

  
  分別對應超小號、小號、正常號、偏大號、大號、超大號、特大號，一般app開發而言這7號字型基本夠用了，然後叫美工定義字型的時候按照標準定義，就像寫word文件的時候選擇小四，四號，小五這樣。這樣有個好處就是以後修改起來特別方便，比如你覺得整個app字型偏小，不需要你去挨個挨個的控制元件去改，直接修改下dimens檔案中引用的字型就好了。交流起來也更方便，不用說14sp，15sp這種抽象數值，而是告訴他這是一個普通字型型別，諸多好處專案開發的時候慢慢體會。
  我近期的專案美工還是按照px切圖，自己按照他切圖的手機列出一張對應表，按照表的標註找到對應的具體字型大小值。
  如：切圖的手機為442ppi
  ，那麼列出對應關係 ，找到他的px值，直接按照查表法，找到對應的數值填進去。

• 顏色規範
  一般美工標註顏色就是把設計發過來的圖，用取色器吸一下，然後寫到切圖上。這個工作沒技術含量，也突出不了工作的重要性。而且更可能會造成問題：取色器在不同電腦和圖片位置取到的定義同一顏色色值不一致，雖然這種不一致不容易被肉眼所發現（例如定義一個亮藍色，取值為：#ff239ff2，有的地方取值誤差變成：#ff239ff8,你很難發現他們的差別，但是他們總讓人心裡覺得不舒服），號稱擁有畫素眼的設計師犯這種錯誤不應該。
  一個app設計師為了風格統一，不會定義稀奇古怪的顏色，主色調，次色調，字型色調，導航色調就那麼幾種，為什麼不把他們統一列出來在手機上對比下UI效果後，取一個確定的值。所有頁面的顏色取值不要用取色器吸，對一下取色表，直接指定是哪一種色值就行了，規範統一。
  這樣開發直接在color.xml檔案中定義這些值：

    <color name="gray">#FFA9A9A9</color>
    <color name="gray_deep">#cc6977d2</color>
    <color name="gray_little">#999999</color>
    <color name="gray_green">#d4d4d4</color>
    <color name="hint">#B3B8E5</color>
    <color name="white">#ffffff</color>
    <color name="white_little">#f4f4f4</color>
    <color name="black">#000000</color>
    <color name="brown">#A67D3D</color>
    <color name="black_input_bg">#4C4F53</color>
    <color name="blue_little">#1dabf0</color>
    <color name="blue_tony">#01a0f3</color>
    <color name="red_text_state">#cd3013</color>
    <color name="red_remind">#e90000</color>
    <color name="green_little">#73D152</color>
    <color name="dlg_lite_blue">#ff359ff2</color>

使用的時候直接引用這些值

         android:text="@string/common_company_name"
         android:textColor="@android:color/white"
         android:textSize="@dimen/font_size_xlarge"                                                                                                                                                                    

而不是這樣：

         android:text="公司名稱"
         android:textColor="#ffffff"
         android:textSize="22sp"

這樣，開發在實際使用的時候有個明確的顏色概念，而不是具體的、抽線的一個色值，方便交流和記憶。如果後面發生意外，比如：反映字型色彩偏暗，你直接修改引用的色值就可以實現全域性修改，更不會出現取色器不準造成的不良後果，優點多多。
對了，說到顏色，美工記住所有純色系的圖片，不用切圖，程式可以自己實現，減少圖片數量和大小，可以極大的減少apk的體積。

• 切圖的規範
  經歷過就會明白切圖是個細緻活兒，圖示大小一定要統一。同一類圖如果是居中顯示，那麼這一類的圖示，都要居中顯示，形狀是規則正方形，不要留下白邊。如下面這種不規則切圖，會讓開發的過程變得異常的惱火。

  
  另外就是建立多套圖的適配，這個美工一般都知道，需要為Android創造多套圖，但是現在資料更新不及時以前主流包擴mdpi，hdpi，xhpi，xxhpi。現在出現了1080p的xxxhpi螢幕沒人切圖適配，我們知道高分屏的圖片放倒低分屏，系統會自動對他進行壓縮，從而達到一個較滿意的效果（但是系統壓縮會消耗系統資源，如果不考慮卡頓和大圖片記憶體溢位的情況，一般創造一套超高清圖就可以適配其他低分屏的手機）。但是如果低分屏的圖片拉伸到高分大屏上面，效果就實在慘不忍睹，所以如果實在是忙不過來，可以先切一套高解析度的圖用著。
  還有就是儘量圖示和背景分離，複雜場景分離成簡單icon，不要切圖一整塊的切出來，這樣在一些偏窄或者偏寬的螢幕上，圖示容易被擠壓變形，把圖示分離，讓程式設計師自己手動填充進去。

• 使用.9.PNG
  使用draw9patch神器下載地址，具體怎麼使用可以藉助搜尋引擎搜尋關鍵詞9png，有很多教程。 9png的目的是為了解決Android應用在不同螢幕上，很多控制元件的切圖檔案在被放大拉伸後，邊角會模糊失真的情況。這時候我們可以通過定義圖片可拉伸區域，來保證邊角不被拉伸；定義圖片可填充區域，來指定文字的顯示區域，保證文字顯示框按規範拉伸。使用口訣：上下左右，由少到多（拉伸區域往往是點兩個點，因為拉伸10個畫素和1個畫素區別不大。但是填充區域是必須是一段距離，直觀的理解就是從點變成了線，也就是從少變多）。需要注意的一點是，有時候文字的填充區域不應該是絕對的居中，而是相對圖片顯示區域的居中。如：
  。
  另外要注意的一點是，app被打包為apk釋出的時候，圖片的9png樣式會被去掉，你看到的是沒有點出9png的圖片原型的樣子。通過把apk重新命名為zip，然後解壓縮後找到對應檔案，可以驗證這一點。

• 出圖格式
  1.使用PNG24+jpg儲存，jpg主要用來儲存app啟動圖，引導圖片這種比較大的圖片。其他圖示，背景色使用PNG24儲存，不要用PNG8儲存，會造成色差。
  2.儘可能在保證圖片質量的基礎上壓縮圖片體積，這裡介紹一個好用的第三方工具智圖
  
  原圖大小1128KB，壓縮後的WebP質量為原圖的75%，左邊為原圖右邊為webp圖片，通過比較，幾乎看不出來兩張圖的差別，同時壓縮後的webp圖片大小為123KB。這樣過後，可以極大的壓縮我們app的體積，而且iOS也支援webp這種圖片格式。webp在Android程式碼中使用，需要藉助jni層實現，具體實現請參考我的Blog。

  當然美工拿到的圖，也是從設計師和產品經理哪兒給出來的高清，有些設計和體驗上的東西他們也無能為力。我們還得往上追，下一篇我想和產品經理談談。