給UI設計初學者的完全自學指南！

來源：站酷 作者：z迷suger

作者分享了自己自學UI設計的一些心得，想自學UI的同學可以參考一下別人的經驗。

什麼是UI設計

UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關係。

個人認為UI設計不僅僅是豐富原型稿和產品經理交接，一定程度上囊括了交互和視覺的部分責任。

日常任務和可交付成果

日常任務分為幾個階段，包括需求階段、原型階段、視覺階段、前端及開發階段、優化階段。在整個項目流程中，UI設計師處於承上啟下的關鍵位置。

一. 需求階段

參與討論，了解並挖掘需求。進行用戶需求分析任務，協助產品經理細化需求，從商業需求文檔到產品需求文檔。

二.原型階段

同步商業需求文檔進程，交互設計師輸出各階段所需的產品原型，也即線框圖。並組織評審和討論會（UI設計師也參加，可以深入的了解線框圖的邏輯），在評審和討論後，交互設計師輸出一個確認版的線框圖以及交互說明文檔。

三.視覺階段

視覺階段包括界面設計階段，界面輸出階段。

1.界面設計階段

根據原型設計階段的界面原型，對界面原型進行視覺效果的處理，該階段確定整個界面的色調、風格、界面、窗口、圖標、皮膚的表現。

界面設計完成後也要組織評審會，評審要面對rd或fe的質疑。

2.界面輸出階段（一般初學者自學時對這部分會比較迷茫，我將會在下篇文章單獨講下這部分）界面輸出也就是切圖以及標註，並輸出整體界面的視覺規範。

四.前端以及開發階段

配合好開發人員完成相關的界面結合，驗收視覺以及前端、開發成果。根據他們的反饋，改進交互設計，並與產品經理協調。

五. 優化階段

觀測核心數據變化，進行可用性測試和用戶調研，以便優化下個版本

當下的UI界面設計趨勢

一.單一主色調

用簡單的色階，配套灰階來展現信息層次

優點：起到了很好的信息傳達效果，減少多餘信息的干擾，使用戶專註於主要信息獲取。

典型例子：

二.數據可視化

用直觀的餅圖，扇形圖，折線型，柱狀圖等豐富的表現方式

優點：可以在更小的屏幕空間內更立體的展示內容

典型例子：天氣通

三.卡片式

使用卡片樣式

優點：保證了卡片和卡片之間的獨立性，又保證了服務和服務的統一化設計。

百度外賣這兩個頁面用的是卡片式

四. 內容為王

真正有價值的app，一定是內容取勝。

新浪利用字體排版，儘可能的內容前置，弱化圖標和操作讓用戶集中注意力於內容閱讀上。

優點：讓用戶聚集於內容上

典型例子：滴滴試駕裡面的車品電商頁面

五. 大視野背景圖

用通欄的圖片作為背景

優點：提升視覺表現力度，又豐富了App情感化元素，這種設計方法，對字體和排版設計要求更高，難度也多，但極容易渲染氣氛。

典型例子：airbnb

工具：ps、sketch、Illustrator等等

推薦書籍

謝謝大家閱讀

溫馨提示：