UI知識,新手如何自學UI設計?(4)

來源:站酷 作者:z迷suger 學習:9578人次
m.theoat.com.cn_03133055R-0.jpg

什么是UI設計

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

個人認為UI設計不僅僅是豐富原型稿和產(chǎn)品經(jīng)理交接,一定程度上囊括了交互和視覺的部分責任。

日常任務和可交付成果

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

一. 需求階段

參與討論,了解并挖掘需求。進行用戶需求分析任務,協(xié)助產(chǎn)品經(jīng)理細化需求,從商業(yè)需求文檔到產(chǎn)品需求文檔。

二.原型階段

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

m.theoat.com.cn_0313305L0-1.jpg

三.視覺階段

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

1.界面設計階段

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

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

m.theoat.com.cn_03133021W-2.jpg

2.界面輸出階段(一般初學者自學時對這部分會比較迷茫,我將會在下篇文章單獨講下這部分)

界面輸出也就是切圖以及標注,并輸出整體界面的視覺規(guī)范。

四.前端以及開發(fā)階段

配合好開發(fā)人員完成相關的界面結合,驗收視覺以及前端、開發(fā)成果。根據(jù)他們的反饋,改進交互設計,并與產(chǎn)品經(jīng)理協(xié)調。

五. 優(yōu)化階段

觀測核心數(shù)據(jù)變化,進行可用性測試和用戶調研,以便優(yōu)化下個版本

當下的UI界面設計趨勢

一.單一主色調

用簡單的色階,配套灰階來展現(xiàn)信息層次

優(yōu)點:起到了很好的信息傳達效果,減少多余信息的干擾,使用戶專注于主要信息獲取。

典型例子:

m.theoat.com.cn_0313301429-3.jpg

二.數(shù)據(jù)可視化

用直觀的餅圖,扇形圖,折線型,柱狀圖等豐富的表現(xiàn)方式

優(yōu)點:可以在更小的屏幕空間內更立體的展示內容

典型例子:天氣通

m.theoat.com.cn_0313306029-4.jpg

三.卡片式

使用卡片樣式

優(yōu)點:保證了卡片和卡片之間的獨立性,又保證了服務和服務的統(tǒng)一化設計。

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

m.theoat.com.cn_0313304134-5.jpg

四. 內容為王

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

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

優(yōu)點:讓用戶聚集于內容上

典型例子:滴滴試駕里面的車品電商頁面

m.theoat.com.cn_0313301204-6.jpg

五. 大視野背景圖

用通欄的圖片作為背景

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

典型例子:airbnb

m.theoat.com.cn_0313302421-7.jpg

工具:ps、sketch、Illustrator等等

推薦書籍

m.theoat.com.cn_0313304437-8.jpg

謝謝大家閱讀

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
芙蓉泣雨780772016-05-10 10:51
第一次跟教程臨摹225101j5ftc067q6q6t77w.png第二次結合源文件臨摹225124xmgqowm46sqov14y.png

關注大神微博加入>>

網(wǎng)友求助,請回答!