給UI設計初學者的完全自學指南!
來源:站酷 作者:z迷suger
作者分享了自己自學UI設計的一些心得,想自學UI的同學可以參考一下別人的經驗。
什麼是UI設計
UI的本意是用戶界面,是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成,但實際上還包括用戶與界面之間的交互關係。
個人認為UI設計不僅僅是豐富原型稿和產品經理交接,一定程度上囊括了交互和視覺的部分責任。
日常任務和可交付成果
日常任務分為幾個階段,包括需求階段、原型階段、視覺階段、前端及開發階段、優化階段。在整個項目流程中,UI設計師處於承上啟下的關鍵位置。
一. 需求階段
參與討論,了解並挖掘需求。進行用戶需求分析任務,協助產品經理細化需求,從商業需求文檔到產品需求文檔。
二.原型階段
同步商業需求文檔進程,交互設計師輸出各階段所需的產品原型,也即線框圖。並組織評審和討論會(UI設計師也參加,可以深入的了解線框圖的邏輯),在評審和討論後,交互設計師輸出一個確認版的線框圖以及交互說明文檔。
三.視覺階段
視覺階段包括界面設計階段,界面輸出階段。
1.界面設計階段
根據原型設計階段的界面原型,對界面原型進行視覺效果的處理,該階段確定整個界面的色調、風格、界面、窗口、圖標、皮膚的表現。
界面設計完成後也要組織評審會,評審要面對rd或fe的質疑。
2.界面輸出階段(一般初學者自學時對這部分會比較迷茫,我將會在下篇文章單獨講下這部分)界面輸出也就是切圖以及標註,並輸出整體界面的視覺規範。
四.前端以及開發階段
配合好開發人員完成相關的界面結合,驗收視覺以及前端、開發成果。根據他們的反饋,改進交互設計,並與產品經理協調。
五. 優化階段
觀測核心數據變化,進行可用性測試和用戶調研,以便優化下個版本
當下的UI界面設計趨勢
一.單一主色調
用簡單的色階,配套灰階來展現信息層次
優點:起到了很好的信息傳達效果,減少多餘信息的干擾,使用戶專註於主要信息獲取。
典型例子:
二.數據可視化
用直觀的餅圖,扇形圖,折線型,柱狀圖等豐富的表現方式
優點:可以在更小的屏幕空間內更立體的展示內容
典型例子:天氣通
三.卡片式
使用卡片樣式
優點:保證了卡片和卡片之間的獨立性,又保證了服務和服務的統一化設計。
百度外賣這兩個頁面用的是卡片式
四. 內容為王
真正有價值的app,一定是內容取勝。
新浪利用字體排版,儘可能的內容前置,弱化圖標和操作讓用戶集中注意力於內容閱讀上。
優點:讓用戶聚集於內容上
典型例子:滴滴試駕裡面的車品電商頁面
五. 大視野背景圖
用通欄的圖片作為背景
優點:提升視覺表現力度,又豐富了App情感化元素,這種設計方法,對字體和排版設計要求更高,難度也多,但極容易渲染氣氛。
典型例子:airbnb
工具:ps、sketch、Illustrator等等
推薦書籍
謝謝大家閱讀
溫馨提示:
推薦閱讀:
※git初級操作之安裝git配置與理念解釋(一)
※從零基礎學UG 初學者必備40條技巧
※適合初學者的九式基礎瑜伽動作分解
※【教程】吉他自學初學者需掌握的知識匯總。
※單板滑雪速成