酷播亮新聞
參與到一個項目中，我們不單單只是做一個圖那麼簡單，而是要把自己的工作對接到整個項目流程中去。
第一次寫稿，大家可以多交流。 做UI和交互兩年多，在UI設計中，很多開始學UI尤其是自學UI的同事都會問這麼一個問題，什麼是UI設計？
百度百科解釋為：UI即User Interface（用戶界面）的簡稱。 UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。
但實際中很多從業UI設計只做了界面美化的這一部分。 所有有時候也弱化了UI設計範圍。 因此我今天和大家交流的就是在APP視覺設計這塊的工作流程。 參與到一個項目中，我們不單單只是做一個圖那麼簡單，而是要把自己的工作對接到整個項目流程中去。
第一步
我們要知道一個項目中有那些成員，知道你的上游和下游是誰，需要輸入和輸出那些東西？ 我們需要交互設計師或者產品經理手中拿到：
- 用戶任務
- 頁面流程
- 低保真原型圖
確認並無任何意見，開始著手app視覺設計。 有些產品或者交互只會給一個低保真原型圖，但盡量要掌握更多的流程和用戶信息，可以在設計中通過頁面更好的引導用戶。
第二步
設計環節，設計環節主要說一些規格，具體的如何設計頁面樣式，相信每個人都有自己的風格和想法。 再設計中要注重平台插件樣式和平颱風格，這樣更容易贏得用戶信賴。
- 新建640x1136xp的畫布大小，顏色模式為rgb8，像素率為72（一般設計稿按蘋果5s的大小尺寸）
- 確定符合企業品牌的app主色調和材質
- 設計圖標
- 設計整個APP頁面，注意，細節有誤丟失？ 按鈕點擊狀態、反饋、缺失狀態、字數超出、加載中、未加載態、加載失敗態，是否都提供了？
- 頁面標註
- 切圖
第三步
設計環節的交付物，這個環節對UI新手來說是一個比較短板的環節，像做平面設計一樣吧界面設計好了，但該怎麼交給開發，讓開發實現在產品上去，就難道了一 大片。
首先我們的知道iOS和Android開發需要的設計交付物至少要有：高保真UI圖(設計稿），標註，切圖。 並且知道這些交付物對開發有什麼樣的作用。
高保真UI圖：
高保真UI圖所起到的作用是，開發會參照其畫頁面，僅僅是獲知頁面樣子的一個手段，並非什麼高精度的事情。 所以不需要出IOS和Android兩套樣子一樣只有大小不一樣的圖。
標註和切圖：
標註和切圖的作用是，開發會按照標註的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。
那麼問題來了，iOS的開發和Android開發所需要的標註和切圖是不一樣的。 如何在一套iOS的高保真UI圖上做出兩套標註和切圖呢？
首先ios設計的像素尺寸是640×960/1136（iphone4-5s的尺寸）
Android主流的hdpi模式下的像素尺寸是480×800,
可以得出他們的換算關係是，iOS@2x像素尺寸*75%=Android的hdpi像素尺寸。 （480÷640=0.75寬度比)
1>ios尺寸
iphone一二三代的：320x480px
@2x iphone4-4s：640x960px iphone 5，5c，5s ：640x1136px
iphone6：750×1334 px
@3x iphone6 puls：1080x1920px
2>Android主流尺寸
idpi 240x320px 120ppi(像素密度）
mdpi 320x480px 240ppi
hdpi 480x800px 160ppi
xhdpi 720x1280px 320ppi
xxhdpi 1080x1920px 480ppi
Ios各尺寸的比為@：@2x：@3x = 0.5：1：1.6875
Andriod各尺寸的比為idpi：mdpi：hdpi：xhdpi：xxhdpi：xxxhdpi=0.75：1：1.5：2：3：4
在iOS切圖與Android切圖的轉換中：
因為：iOS@2x像素尺寸*75%=Android的hdpi像素尺寸
所以： iOS@2x的切圖縮小75%之後，就是Android的hdpi模式下的切圖，
又因為：hdpi：xhdpi=1.5：2=0.75
所以得： iOS@2x的切圖就是Android的xhdpi的切圖尺寸
又以上可以得出，在手機APP設計中，在IOS和Android兩套版本的樣子一樣只有大小不一樣設計稿時，我們可以單獨做一個ios@2x的設計稿，在切圖階段按照IOS和Android 的轉換關係的出不同版本不同尺寸所需要的切圖。
注意：切圖在縮放之後像素會糊在一起，很可能需要重新調整，還有各種虛邊情況，尤其是那些帶透明陰影的，都要重新調。
Andriod的像素尺寸轉化為開發尺寸，即：px轉化為dp
我們以480*800像素尺寸下做的設計圖為基準。
開發將部件尺寸換算成dp尺寸的方法是，像素尺寸*2/3。480px*2/3=320dp
這也是為什麼要讓Android部件尺寸能讓3整除的原因。 如在hdpi模式，480*800像素尺寸設計圖中，開發看到300px寬度的標註，會定義其為寬200dp，到這裡Android開發才得到一個他們真正會用於開發的數值。
綜合 上述關係：iOS@2x像素尺寸*75%=Android的hdpi像素尺寸
Android的像素尺寸*2/3=Android的hdpi的dp尺寸
得出：iOS@2x像素尺寸*75%*2/3=Android的hdpi的dp尺寸
所以：iOS@2x裡一個寬600px的東西，在Android的hdpi模式下，正好300dp，正好是50%，
第四步
就是驗收開發成果，我們不僅吧頁面設計出來，還要讓他最終展示在產品中，所以開發完成開發以後，我們需要驗收界面效果是不是和我們設計的一致。 如果一致，或者因開發原因沒有辦法實現，我們就要修改設計方案，在設計的時候我們就的注意開發的難易程度。
最後總結一下就是在做APP UI設計中，從拿到低保真原型圖到驗收產品，才是UI設計師在一個項目中參與的本職的工作中。 也可以根據個人能力延伸到界面交互，用戶任務的交互設計中。
這些只是我個人的一些工作經驗和一些文章中總結出來的一些東西。 希望大家可以吐槽，多交流！
本文由 @ 僧可 原創發佈於人人都是產品經理。 未經許可，禁止轉載。
題圖來自usnplash，基於CC0協議