你學會UI設計了嗎？

UI設計師如何前驅？

關於產品

做爲一個UI設計師，咱們還在乾巴巴的等着產品經理甚至交互提供的需求和原型再開始動手嗎？這樣被動的工做是永遠沒法提高本身的，固然你也永遠只能拿到幾千塊的薪水了。

咱們應該參與UI設計前期產品的規劃中去：

1.瞭解下一個版本計劃作哪些需求，上一個版本還留下什麼需求？

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

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

4.但願以後拿到哪些數據，而且對這些數據準備作怎樣的分析，得出怎樣的結果？ 產生的商業價值又是什麼？ 這個需求是否能爲咱們的產品帶來明顯的業務或者用戶體驗的提高？

關於交互／用研

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

那麼咱們能夠怎樣去作一個需求的調研，看看用戶是否是反饋了這個比較嚴重的問題，下面咱們分了3個步驟：

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

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

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

這3個步驟缺一不可，少一個這個需求就能夠不作。

找到了實際需求以後（用戶其實想抽菸）咱們得來給這些需求排優先級（買菸，點菸，散味），這裏教你們一個用研用的模型－－kano模型，這個模型中分別列了三個屬性：必備屬性，指望屬性，魅力屬性；另外還有個個不經常使用的屬性：反向屬性和無差別屬性，這裏就不細說了。

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

指望屬性就是用戶但願有這個功能，若是沒有，用戶滿意度會降低（點菸，爲了服務好用戶必須點上）。

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

當咱們將不少需求用kano模型統計出來後會發現，咱們的需求分類成這三種，那麼咱們作需求的順序就是必備需求>指望需求>魅力需求。（具體怎樣使用能夠加我qq或者下方關注公衆號）

固然以上的內容不只僅用研同窗會用到，交互的同窗也一樣能夠去用，由於我以爲未來的趨勢將會是UX>UI,說的更準確一點就是二者互相融合，甚至融合更多角色。

關於視覺

顏色：

爲了保持產品的總體品牌調性，咱們將會使用一種主色調，兩種或三種輔色，但通常選擇兩種輔色，選擇同一色系或者鄰近的色系，好比主色是藍色，那麼咱們能夠選擇臨近色系的淺藍和深藍作爲輔色。再加上1-2種點睛色，用來高亮顯示，提醒用戶的做用，好比紅色，橙色，黃色等對比色。

字體：

通過研究及多方證明，在一倍設計圖下，最利於閱讀的字號以及大部分人所以爲最溫馨的字號大小是16px。那麼，在同一個產品裏，咱們將用到除了頂部導航之外的3種字體大小，分別爲正文16px，次要性文字14px，提示文字12px。對於10px文字小編建議儘可能少的使用。字體的顏色也一般使用3個顏色便足以用於這個產品，深色，深灰色，以及淺色字體。

線條：

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

圖標：

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

排版：

排版對於一個頁面來講是最最重要不過了，在交互稿上，交互已經大體區分出了信息的佈局，這個時候咱們視覺須要去進行「具像化」（或許前期交互就是你本身作的）。咱們先將信息關聯度大的內容整合在一塊兒，再根據內容的重要程度，以用戶的視覺流進行排布，固然這個只是正常的設計流程，凡事無絕對，要懂得變通。再說一個小竅門，就是儘可能保證信息元素之間的距離相等，除非爲了區分兩個信息，間距一致會使整個頁面更美觀，固然咱們考慮作頁面的時候不是能展現全部信息就是好設計，咱們強調的是用戶體驗，那麼用戶不但願一眼看去都是信息，這個時候咱們須要作一些留白的設計或者信息的層級顯示。

作項目碰到的問題：

1.目前採用的標註方式使用sketch的插件marketch一鍵導出標註，雖然不是很精確，但已經大大提升了工做效率。問題來了，開發到底看不看標註？頗有意思的問題，其實只要項目緊他們通常不會看標註，等到邏輯寫完了，再來改UI的問題。那麼爲了不在頁面寫完後不作大的佈局調整，作爲視覺設計，應該在開發前期就和前端定義好佈局的框架，交互，用自定義仍是系統控件，不然等開發寫完你和開發說我要的效果不是這樣，可是開發說已經改不了了，再改就要很大的精力去重寫（固然也多是開發想偷懶），這裏必須說一下，其實爲了你我他，UI設計必需要學前端代碼，不然開發隨便忽悠下你你就放棄了本身的立場，這徹底是對本身，對產品不負責。

2.儘量將頁面的狀態補全，由於可能沒有交互，也可能交互的文檔原型沒有那麼細緻。好比你作完一個頁面發現全部字段都填滿了，整個頁面挺飽滿，這個時候測試的同窗說了，這個字段後臺可能不返回，是空，那裏也是空，這樣的頁面東邊少一塊，西邊少一塊還好看嗎？

3.適配的問題。運營要作活動圖片，經過後臺返回獲取到不是由前段添加，這時候咱們須要定義一個比例，不一樣機型等比例縮放便可。

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

把內容少的，重要的部分先作，再作內容多的，重要的。最重要的仍是老闆重視的，必須先作！

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

6.sketch的插件craft＋dropbox的新組合用來製做app kit，能拖拽直接使用和編輯