初進UI領域——如何快速融入公司工作流程

新公司入職篇（我將帶頭衝鋒）

當你剛入職一家新公司，新公司所謂的就是從0-1開始定位自己的產品、後續開發產品，以及最終使用產品，幫助公司產品完成一個由無到有的上線過程；

進入新公司，你將會有一個完整的工作流程體系：產品—UI設計師—開發（多數公司把這個團隊歸屬於開發部門）

而身爲UI設計師的你也需要做一些準備：

熟悉產品

一個產品的誕生都是依賴於最初產品的定位和分析。剛入職的你，你可能會覺得產品分析只是產品經理的事情，你只是一個做後期的，只要把UI設計圖做完美就行，但事實證明，如果UI設計師沒有對產品有足夠的認識，後續做圖會十分喫力，會對產品產生陌生感。所以前期產品分析你會和產品經理一起去做，你會發現時不時的會有需求會，需求會就是大家一起討論產品，最後從會議裏討論出結果。雖然你沒有很大的把握去敲定最後的會議結果，但是有你的參與，也會讓他們保留下實質性的意見，也能讓你更熟悉產品的概念

原型圖輸出

產品定位做好了，你的產品經理這邊會開始着手於原型圖的輸出。原型圖的製作可能很多新手會說就是簡單的排版，但其實身經百戰的UI設計師就知道，原型圖它是有一定的操作邏輯的，一個界面的內容裏面都會有跳轉的，比如你點擊了某個按鈕，它是會跳轉到另外一個界面，所以產品前期的交互思維都是在原型圖上定義的，原型圖有錯誤，後面的流程也會受到影響。當然，有時產品經理也會叫你一起參與原型圖製作的，就比如內容的一個版塊如何去擺放，所以你也要時刻準備着。

製作UI設計圖

界面尺寸規範

每個公司製作UI圖都會有一個機型規範的，比如IOS和Android兩種機型，現在大多數公司以IOS端爲準的，但是也有少數公司以Android端的界面爲準，設計UI設計圖之前可以詢問一下產品經理，公司機型的規範是以哪個爲準；現在大多數公司流行於製作iPhone6/7/8（375*667pt）、IPhoneX/XS/11pro（375*812pt）、Android手機（360*640pt）尺寸的界面。

定義產品品牌色

當到了製作UI設計圖的環節時，也是你的本職工作。從最初的製作開始來說，你需要定義一個主題色，主題色就是產品的品牌色，這要從你的產品來定義，你做的是怎樣一款產品，那麼它定義的屬性顏色就是什麼，就比如金融類產品，我們一想到的就是藍色，母嬰類產品一想到的就是粉色。顏色跟其他事物一樣，使用需要恰到好處；一般來說UI配色最多使用三種基色是最好的，這樣你將獲得更好的效果，顏色使用多了，就越難保持色彩平衡的。配色我們可以參考十二色環圖的配色原則。

外邊距

在設計過程中，我們常用的外邊距有32px、30px、24px、20px等。一般是4的倍數，邊距數值大小可以根據頁面內容緊湊度來決定，頁面內容簡潔的可以留大一些，內容密集的可以留小一些。

規範製圖、保持統一

製作UI設計圖的時候，往往會有相同的模塊出現，就比如二級頁面導航欄裏往往會有一個標題和一個箭頭，這個標題的字號需要在你製作每個二級頁面的時候保持統一，返回箭頭也是一樣，需要保持它的尺寸大小。所以在製作相同模塊的時候可以記錄一下它們的尺寸規範，也可以設定一個組件，方便快捷使用。

交給開發工程師的UI設計稿

開發部門都是有一個完整的工作流程：產品經理—UI設計師—開發；你的UI設計圖是按照產品經理提供的原型圖製作的，所以UI設計圖必須和原型圖保持一致，，因爲開發工程師也是通過原型圖的交互說明進行開發的。如果開發工程師正在編程中的時候，發現原型圖和UI設計圖不一致的時候，那麼前面的編程也會受到很大的影響，甚至導致開發工程師返工。

當然在UI設計過程中，開發工程師這邊也會給你一些必要的規範：

1.按鈕規範

像一些UI設計師在設計UI圖中的過程中，按鈕就是隨便建立一個矩形輸入文字，但這其實是新手的做法。在按鈕給到開發工程師那邊編程時，開發工程師那邊需要設置一個padding值；padding值是什麼，在按鈕當中，通俗的理解Padding就是文字與按鈕之間的間距。

錯誤padding按鈕示例中padding值不相同，在實際工作中，這樣會使自己設計的按鈕與開發實際還原的按鈕差距很大，從而視覺上就會有很大的變化，爲什麼說錯誤示例的規範實現不了，因爲對於開發工程師而言，Padding通常都是統一且固定的，只會根據按鈕文字長度進行相應的調整，我舉的錯誤例子，其實在開發工程師面前這類設計是不能夠被共用，而且對開發工程師項目會變得越來越不能維護，所以按鈕設計應該更規劃。

那麼對於如何保持統一，真的需要去實現兩個文字按鈕長度和四個字的一樣怎麼辦：

假設兩個字的按鈕文字字號是24px，它一邊的padding是20px；那麼適配一個4個字的按鈕長度就是：24px*4個字+左右兩邊的padding值（20*2）=136px，所以4個字的按鈕寬度就可以設置爲136px。