五分鐘全知道！UI設計師的上下游都在做什么？

當感覺自己遇到瓶頸，覺得工作效率很低下時，可以看看我們的上游和下游都在做一些什么事情：產品在規劃什么，交互如何分析需求，用研是如何做訪談和問卷的，開發又是如何調接口和后臺對接的，幫助會很大。今天這篇好文告訴你上下游的同事都在做什么。

現在看到有許多的設計師仍然在鉆研怎么切圖更快，用什么軟件作圖，標注更快，我想告訴大家，先把手頭上的事情暫且放一放。因為我們的產品是一個大團隊在運作，只顧干自己的事情無異于閉門造車，當你切完一大堆圖發給開發的時候，開發說你這樣切出來我實現不了，傻眼了，留給開發的時間又縮短了一些。當你興致勃勃做完頁面等待UI評審的時候，卻發現自己缺少了好多狀態頁面，再臨時補上，留給開發時間又縮短了一些，最終上了一個不那么完美的項目。

當感覺自己遇到瓶頸，甚至覺得自己工作效率很低下的時候，我們走出去看看，看看我們的上游和下游都在做一些什么事情，產品在規劃什么，交互在如何分析需求，用研是如何做訪談和問卷的，開發又是如何調接口和后臺對接的，我們都可以參與進去，不要覺得困難，因為越做困難的事情，對自己能力提升的越快，害怕接受新的事物只會原地踏步。

UI設計師如何前驅？

關于產品

作為一個UI設計師，我們還在干巴巴的等著產品經理甚至交互提供的需求和原型再開始動手嗎？這樣被動的工作是永遠無法提升自己的，當然你也永遠只能拿到幾千塊的薪水了。

我們應該參與前期產品的規劃中去：

1. 了解下一個版本計劃做哪些需求，上一個版本還留下什么需求？

2. 在下一個版本中需求的目標和目的分別的什么？

3. 怎么樣挖掘出用戶的原始需求？

4. 希望之后拿到哪些數據，并且對這些數據準備做怎樣的分析，得出怎樣的結果？ 產生的商業價值又是什么？ 這個需求是否能為我們的產品帶來明顯的業務或者用戶體驗的提升？

關于交互／用研

接著，我們也千萬不要放過交互設計師，當他們拿到產品的需求的時候，這時候我們必須不要臉的湊過去，無論是請教也好，打臉也好，多去問問他做需求的思路，他是怎樣分析需求，分析商業戰略，怎樣梳理流程，怎樣設計框架，又是怎樣分析信息架構和布局的。這時候假如自己是一個交互設計師，然而當產品一股腦兒把需求提給你之后是不是快懵逼了呢？不要急，萬事開頭難，我們必須透過現象看本質，挖掘出用戶的原始需求才是關鍵，舉個例子：用戶發出了一個想吃東西的信號，這個時候產品就說用戶餓了，快送去饅頭米飯！！那其實真的是用戶餓了嗎，還是說用戶在打完游戲期間想抽根煙吃點零食呢？所以我們需要看清楚用戶究竟需要什么？

那么我們可以怎樣去做一個需求的調研，看看用戶是不是反饋了這個比較嚴重的問題，下面我們分了3個步驟：

1. 驗證這個使用場景是否存在？

2 .再次了解用戶是否已經有其他的解決方法？

3. 最后確定我們的解決方法是否在用戶看來比已有的解決方法跟更好？

這3個步驟缺一不可，少一個這個需求就可以不做。

找到了實際需求之后（用戶其實想抽煙）我們得來給這些需求排優先級（買煙，點煙，散味），這里教大家一個用研用的模型－－kano模型，這個模型中分別列了三個屬性：必備屬性，期望屬性，魅力屬性；另外還有個個不常用的屬性：反向屬性和無差異屬性，這里就不細說了。

必備屬性就是這個功能在這個產品里必須得有（買煙，你不給我買煙我怎么抽）。

期望屬性就是用戶希望有這個功能，如果沒有，用戶滿意度會下降（點煙，為了服務好用戶必須點上）。

魅力屬性就是如果做了這個功能，那么用戶會很開心很驚喜，如果沒有，那也影響不大（散味，這個時候要是能當著用戶的面吸光二手煙這簡直服務到家了）。

當我們將很多需求用kano模型統計出來后會發現，我們的需求分類成這三種，那么我們做需求的順序就是必備需求>期望需求>魅力需求。

當然以上的內容不僅僅用研同學會用到，交互的同學也同樣可以去用，因為我覺得將來的趨勢將會是UX>UI，說的更準確一點就是兩者互相融合，甚至融合更多角色。

關于視覺

顏色：

為了保持產品的整體品牌調性，我們將會使用一種主色調，兩種或三種輔色，但一般選擇兩種輔色，選擇同一色系或者鄰近的色系，比如主色是藍色，那么我們可以選擇臨近色系的淺藍和深藍做為輔色。再加上1-2種點睛色，用來高亮顯示，提醒用戶的作用，比如紅色，橙色，黃色等對比色。

一篇可以幫你掌握UI基礎配色的教程：《強烈推薦！幫你從零開始全面掌握UI設計的配色方法》

字體：

經過研究及多方證實，在一倍設計圖下，最利于閱讀的字號以及大部分人所覺得最舒適的字號大小是16px。那么，在同一個產品里，我們將用到除了頂部導航以外的3種字體大小，分別為正文16px，次要性文字14px，提示文字12px。對于10px文字小編建議盡量少的使用。字體的顏色也通常使用3個顏色便足以用于這個產品，深色，深灰色，以及淺色字體。

具體的教程可以來這里學習，專門針對UI設計的：《界面設計必備！全方位科普常用的字體規范（附神器）》

線條：

線條所起的作用一個是分割內容，第二個是流引導，同樣的內容，用橫向線條或者豎向線條，用戶的瀏覽路徑將會發生變化，所以分割線在整個app里的所用也是不言而喻的，那么我們將分割線也可以定義1-2個層級的顏色，在移動端肉眼能識別即可，但注意不能太深，也不能太淺。

圖標：

圖標能使整個app更生動，但是圖標有時候單獨存在又是個硬傷，對于一些抽象畫的字段圖標沒辦法更好的繪制出來的時候我們就需要進行圖文結合來描述。圖標使用的位置不同，大小也會不同，甚至風格也會迥異。比如：微信底部標簽欄的圖標，和頂部導航欄的圖標粗細不同，風格也不同。但是不是一個app里就有很多風格的圖標，只要形成統一就行。一般圖標能分為線性和色塊兩種，線性圖標更輕盈，缺點是放大之后線條會變粗，且線性圖標沒有色塊圖標來的表意明確。色塊圖標更直觀，且放大縮小不影響，可以用到iconfont里，圖標將成為一種字體，比較大程度優化app的內存，缺點是信息較多時比較冗雜。

圖標該不該加上文字描述，這篇文章可以給你答案：《終于有答案了！大家都熟悉的圖標是否還需要標注上文字？》

排版：

排版對于一個頁面來說是最最重要不過了，在交互稿上，交互已經大致區分出了信息的布局，這個時候我們視覺需要去進行“具像化”（或許前期交互就是你自己做的）。我們先將信息關聯度大的內容整合在一起，再根據內容的重要程度，以用戶的視覺流進行排布，當然這個只是正常的設計流程，凡事無絕對，要懂得變通。再說一個小竅門，就是盡量保證信息元素之間的距離相等，除非為了區分兩個信息，間距一致會使整個頁面更美觀，當然我們考慮做頁面的時候不是能展示所有信息就是好設計，我們強調的是用戶體驗，那么用戶不希望一眼看去都是信息，這個時候我們需要做一些留白的設計或者信息的層級顯示。

UI設計的排版教程：《新手福利！一份詳盡全面的UI設計字體與排版指南》

做項目碰到的問題：

1. 目前采用的標注方式使用sketch的插件marketch一鍵導出標注，雖然不是很精確，但已經大大提高了工作效率。問題來了，開發到底看不看標注？很有意思的問題，其實只要項目緊他們一般不會看標注，等到邏輯寫完了，再來改UI的問題。那么為了避免在頁面寫完后不做大的布局調整，做為視覺設計，應該在開發前期就和前端定義好布局的框架，交互，用自定義還是系統控件，否則等開發寫完你和開發說我要的效果不是這樣，但是開發說已經改不了了，再改就要很大的精力去重寫（當然也可能是開發想偷懶），這里必須說一下，其實為了你我他，UI設計必須要學前端代碼，否則開發隨便忽悠下你你就放棄了自己的立場，這完全是對自己，對產品不負責。

學前端開發的免費有趣教程在這：《天貓高手來教你！零基礎如何系統地學習前端開發？》

2. 盡可能將頁面的狀態補全，因為可能沒有交互，也可能交互的文檔原型沒有那么細致。比如你做完一個頁面發現所有字段都填滿了，整個頁面挺飽滿，這個時候測試的同學說了，這個字段后臺可能不返回，是空，那里也是空，這樣的頁面東邊少一塊，西邊少一塊還好看嗎？

3. 適配的問題。運營要做活動圖片，通過后臺返回獲取到不是由前段添加，這時候我們需要定義一個比例，不同機型等比例縮放即可。

4. 同時接到3個以上的需求怎么辦，拍優先級？怎么排？

把內容少的，重要的部分先做，再做內容多的，重要的。最重要的還是老板重視的，必須先做！

5. 能這個版本迭代掉的內容千萬不要放倒下一個版本，放著放著就沒了。

6. Sketch的插件Craft＋dropbox的新組合用來制作app kit，能拖拽直接使用和編輯。

最后講一句話：請基于場景設計！

歡迎關注作者的微信公眾號：

「從零開始學設計」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com