很多同學對於剛入門的小夥伴都會問這樣一個問題，什麼是UI設計？
百度百科解釋為：UI即User Interface（用戶界面）的簡稱。UI設計是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。
但實際中很多從業UI設計只做了界面美化的這一部分。所有有時候也弱化了UI設計範圍。因此今天和大家說說在UI視覺設計過程這塊的工作流程。在參與到一個項目中，UI的職責不簡單是做一個圖這麼簡單，而是要把自己的工作對接到整個項目流程中去，從最開始的項目規劃到項目落地及後期測試都需要自己去參與其中。
第一步
我們要知道一個項目中有那些成員，知道你的上游和下游是誰，需要負責設計那一模塊和輸出那些東西？我們需要互動設計師或者產品經理手中拿到：
· 需求文檔
· 頁面流程
· 低保真原型圖
· 項目交付日期
確認並無任何意見，開始著手產品的視覺設計。有些產品或者交互只會給一個低保真原型圖，但儘量要掌握更多的流程和用戶信息，可以在設計中通過頁面更好的引導用戶。
第二步
設計環節，設計環節主要說一些規格和互動設計師及項目經理確定一下具體的設計風格和設計樣式，相信每個人都有自己的風格和想法。再設計中要注重平台插件樣式和平颱風格，還要尋求客戶意見避免後期項目返工風險，這樣更容易贏得用戶信賴。
00001. 新建750x1334xp的畫布大小，顏色模式為rgb8，像素率為72（一般設計稿按蘋果7的大小尺寸）
00002. 確定符合企業品牌的app主色調和材質
00003. 設計圖標
00004. 設計整個APP頁面，注意，細節有誤丟失？按鈕點擊狀態、反饋、缺失狀態、字數超出、加載中、未加載態、加載失敗態，是否都提供了？
00005. 頁面標註
00006. 切圖
第三步
設計環節的交付物，這個環節對UI新手來說是一個比較短板的環節，像做平面設計一樣吧界面設計好了，但該怎麼交給開發，讓開發實現在產品上去，就難道了一大片。
首先我們的知道iOS和Android開發需要的設計交付物至少要有：高保真UI圖(設計稿），標註，切圖。並且知道這些交付物對開發有什麼樣的作用。
高保真UI圖：
高保真UI圖所起到的作用是，開發會參照其畫頁面，僅僅是獲知頁面樣子的一個手段，並非什麼高精度的事情。所以不需要出IOS和Android兩套樣子一樣只有大小不一樣的圖。
標註和切圖：
標註和切圖的作用是，開發會按照標註的尺寸，把切圖按照高保真UI圖的擺放方式做到界面上。
那麼問題來了，iOS的開發和Android開發所需要的標註和切圖是不一樣的。如何在一套iOS的高保真UI圖上做出兩套標註和切圖呢？
首先ios設計的像素尺寸是750×1334（iphone6的尺寸）
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%，
第四步
就是驗收開發成果，我們不僅把頁面設計出來，還要讓他最終展示在產品中，所以開發完成開發以後，我們需要驗收界面效果是不是和我們設計的一致。如果一致，或者因開發原因沒有辦法實現，我們就要修改設計方案，在設計的時候我們要和開發交流一下比較特殊的視覺效果是否能實現，如果沒法實現那我們設計這塊就要修改設計方案。
最後總結一下就是在做產品UI的視覺設計中，從拿到低保真原型圖到驗收產品，才是UI設計師在一個項目中參與的本職的工作中。也可以根據個人能力延伸到界面交互，用戶任務的互動設計中。