當前位置:編程學習大全網 - 人物素材 - 如何學習UI設計?

如何學習UI設計?

隨著互聯網行業的發展,如今市場對於UI設計師的要求越來越高,對應的UI設計的學習內容也越來越多。如果妳現在還想拿著壹項大多數人都會的基礎技能找高薪工作,這基本不太現實。

互聯網剛剛興起之時,UI設計的門檻很低,也許妳只會平面設計或者單純的網頁設計就能找到壹份很不錯的工作。但現在,隨著智能手機的普及、5G時代的來臨,網民基數越來越大,大家對於界面的要求也越來越高,對應的企業的要求也發生了很大的變化。產品生產的人性化意識日趨增強,越來越多的企業開始註重交互設計、用戶測試方面的投入。企業不僅需要UI設計懂設計,還需要懂交互、懂用戶心理,甚至還要會代碼、AE制作動效、以及插畫、手繪等等。

說了這麽多,那我們如何學習UI設計?又如何成為市場上需要的UI設計呢?我現在從壹個成熟的UI設計課程去拆分講解具體的學習步驟,以及學習中的註意事項。

壹、那我們如何學習UI設計?又如何成為市場上需要的UI設計呢?1、手繪以及軟件基礎---軟件水平

手繪

沒有美術功底可以學UI設計嗎?

答案肯定是可以,但是有美術功底的UI設計師在壹定程度上會使自己的競爭力更加突顯。創意想法對於UI設計來說是很重要的,但這只是壹方面,能通過不同方式與途徑準確地表達出自己的創意想法又是另壹方面。對於有美術基礎地設計者來說就會有更多地表現形式來表達自己的想法,比如常用的手繪、插畫、寫實圖標等。

所以我們要學會在今後的UI設計工作中,利用手繪。在這個部分的學習中,其目的是通過手繪掌握並了解形體的結構,光感和空間關系。後期才可以將手繪滲透到作品中,把手繪和鼠繪結合,從零到壹的進入到插畫,進壹步滲透到項目作品中,比如電商首頁/專題頁/APP閃屏/缺省頁等。

學習手繪,並不是需要大家達到專業美術生的水平,而是讓大家學會利用手繪更好的表達自己的作品。因為軟件操作帶來的靈感遠沒有手繪帶給我們的思路敏捷。每壹個成熟的設計師來講,好的創意和想法壹定不是先來自於電腦,而是先來自於本上,手繪是創意和靈感最好的表現及表達方式,養成手繪的習慣和會手繪這件事能夠更加拓展設計師的思維,把妳對圖形的需求快速呈現草圖上進行快速的演變圖形嘗試對比,進而提高工作效率。

所以針對手繪部分,將手繪結合項目中的設計,可以有以下學習流程:

通過靜物練習了解物體,透視/光影/三面五調

通過飽和度、明度、色調等理解色彩關系、通過剖析每個顏色的正向負向心理暗示,了解色彩情感表達

運用ps軟件手繪圖標,提升軟件熟悉度

手繪鼠繪結合繪制技巧(插畫臨摹)?

軟件

軟件是UI設計不可缺失的輔助工具,工具的學習並不在多,而在於妳是否能熟練的使用工具將自己的想法表達出來,讓工具化身為左右手去協助自己完成設計。每壹類設計工具選擇壹到兩熟練操作,在今後的工作中遇到類似工具是可以很快上手的。

其實,學習工具最快的方法是帶有目的的學習,使用反推法學習可以讓妳更清晰更直觀的了解這個功能存在的意義。以案例入手從案例中學習新的工具,讓工具和技法和案例融合壹體,從而加深對軟件及其綜合能力的入門和提高。

那什麽是反推法學習呢?下面我們選取PS、AI這兩個設計中常見的工具來簡單介紹壹下,其他工具也可以參考這樣的學習模式。至於軟件的熟練度就需要妳自己花時間反復練習。

(1)PS,Adobe Photoshop,是由Adobe Systems開發和發行的圖像處理軟件。相信不是設計行業的小夥伴也對它久仰大名,更是設計專業人員必須掌握的設計工具。 Photoshop主要處理以像素所構成的數字圖像,其重點在於對圖像的加工處理。

?

初次接觸PS,我們需要自學掌握PS基礎、工具詳解、布爾運算、圖層樣式、混合選項、蒙版、調整圖層、濾鏡、混合模式、圖像等。我們如何壹步步將這些功能摸清楚用明白呢?

PS基礎:了解工具詳情、圖層樣式//圖層調整。(案例演示)

學習ps布爾運算,並運用到圖形繪制中。

通過海報合成案例,掌握混合模式/蒙版。

利用圖像調整(曲線、色相飽和度、色彩平衡等),調整合成素材顏色、光影等統壹性。

海報合成中利用濾鏡達到遠近、虛實、銳化、扭曲等目的/利用camera raw做合成最後調整。

我們只有不斷的通過對商業實戰的分析,通過結果的反推,讓軟件和設計思維相結合。在反推和臨摹的過程中,讓我們的工具基礎更加紮實。

(2)AI, Adobe illustrator,是壹種應用於出版、多媒體和在線圖像的工業標準矢量插畫的軟件。它的功能強大,用戶界面體貼,是大多數設計師選擇矢量編輯軟件的不二選擇。? ?

對於AI,我們需要掌握AI的圖形符號功能及使用技巧,AI的漸變、混合工具、2.5D插畫。再到繪圖工具的精通,通過主流插畫風格的學習及風格的轉換,學習插畫中的色彩。最後實現logo圖形的繪制技巧及字體設計等。

ai基礎:通過學習路徑查找器掌握圖形減去、相交、相加等能力/掌握圖形符號,增強圖形或設計美感。

適量插畫繪制,加強對物體結構/光影/顏色的理解。

順應當下流行趨勢,通過人物、風景深入了解主流矢量插畫表現形式。

以上這些其實只是對工具有個基礎的認識,讓妳了解工具的功能,然後反復去熟悉工具。至於如何利用這些工具,還需要繼續進階學習。

2、設計基礎、設計理論--設計思維

沒有設計思維,工具用的再熟練,設計出的作品也不會被大眾認可。所以我們必須學習設計的原理,掌握設計基礎。將理論和實踐結合,完美的將自己的想法合理的展示出來。

這個階段中可以引入Logo設計、字體設計和VI手冊設計,在理論中穿插實操,讓學習富有目的性,在操作中反推設計思維。

什麽是logo?如何入手做原創logo?logo的常見表現形式?這裏將Logo和文字設計相結合來講解壹下學習步驟。

學習平面構成:點線面,了解平面空間的基本元素。以設計的手段來讓元素變得更精致更富視覺沖擊力。

習平構基本形式重復、近似、漸變、變異等,培養邏輯思維和造型能力以便我們能夠將其運用到實際的設計當中。

從Logo設計頭腦風暴中開發自己,思維空間從宏觀到微觀提取設計關鍵詞。

學習LOGO草圖繪制多種方案,這裏就要用到之前學習的手繪技巧啦。然後選其中壹種進行繼續優化。

通過不同關鍵詞相互組合,做圖形提煉、結合、重組、賦予關鍵詞圖形化,圖形化優化定稿。

根據字體橫豎撇捺等了解文字結構字面、重心、獨體合體字、中宮處理等,掌握字體變形設計,完善logo提案效果圖增強過稿概率。

logo文字部分提取重新設計

logo圖形文字結合定稿

在Logo設計中我們學習了平面的構成、字體設計等,在畫冊學習中我們同樣會穿插設計知識。比如設計的色彩心理學、色彩對比及配色技巧,vi基礎+應用部分規範及內容,場景應用效果圖及尺寸和材質等。通過自己模擬項目,去深入掌握vi手冊基礎部分。

學習VI視覺手冊規範,重點提煉VI視覺手冊頁眉頁腳設計。

模擬練習項目從甲方、用戶等多角度深入掌握vi手冊基礎部分:企業標誌、標準色、標準字體、中英文印刷規範、輔助圖形、錯誤應用,並以企業特性進行基礎部分規範設計。

vi手冊應用部分,以使用場景、材質、工藝、尺寸、展示環境等,給出甲方專業成品落地建議及效果展示。

完善vi手冊提案效果圖。

3、Web網頁/電商運營設計

平面設計是UI設計的基礎,我們通過平面設計去學習了設計基礎、設計思維,減少了UI設計學習階段中的很多疑惑。

互聯網時代,絕大多數企業都意識到通過線上資訊來吸引更多的潛在客戶是多麽重要。這些潛在客戶對妳的公司及產品印象的好壞,很大程度上取決於妳在網站設計上投入精力的多少。企業站和電商平臺也是互聯網環境下企業必不可少的傳播平臺和C端自主交易平臺,是互聯網產業下的主流。

所針對網頁設計,要求妳熟悉和掌握web端設計的規範,了解網站基本架構和柵格化布局,重點掌握企業站界面設計規範和輸出規範,且能夠根據企業真實需求設計頁面。掌握網頁中的版式設計/構圖排版/網頁中的色彩/文字/圖片搭配,掌握企業站首焦圖的設計技巧。

而電商部分則需要電商行業設計要求與設計規範,學習電商行業不同類型的設計方法和店鋪包裝方法,掌握電商設計全流程以及電商banner版式設計。

知識這麽多,看起來都頭大。別急!!!我們將這些知識進行拆分,壹步步帶妳飛。

(1)企業響應式網站/壹屏網站設計:掌握網頁設計流程及規範,網頁設計配色、排版技巧。

Web設計基本規範:單位、分辨率、尺寸、字體、顏色等/通過案例展示了解網站組成架構(首頁設計)

網頁設計中的版式擴散與界面設計

通過柵格化布局,增強網頁設計版式,深入研究網頁中構圖/色彩/字體/圖片使用等,提升整體頁面細節。

響應式移動端設計規範:設計尺寸、適配設備、排版布局轉化形式。

企業網站界面設計

(2)後臺設計:掌握數據圖形化,及圖形數據配色。

目前,根據招聘市場信息反饋可視化和後臺也是網頁階段的標配,所以後臺首頁又有那些學習要點呢?

企業網站界面設計

掌握壹屏式網頁設計及頁面中交互效果設計(壹屏首頁設計)

通過設計案例了解後臺設計規範及後臺操作流程和功能

後臺首頁設計

將後臺數據通過柱狀、餅形、走勢圖等手法以增強觀賞閱讀性為目的做數據可視化處理

(數據圖形化設計) ?

(3)電商設計:操作掌握首頁、專題頁、詳情、主圖、直通車、鉆展、後臺裝修,移動端與pc端設計規範,並且通過店鋪實際操作掌握電商詳情頁的設計技巧和版式技巧。

通過淘寶電商平臺了解首頁移動端與pc端設計規範。

掌握主圖、直通車、鉆展設計規範,以及在後臺推廣窗口了解更多運營推廣圖設計板塊。

通過項目案例分析展現專題頁設計構圖/以真實案例剖析:項目流程、關鍵點提取、視覺推導圖。

淘寶電商平臺首頁、專題頁設計

詳情頁設計規範及內容構成,站在用戶角度去考慮設計

淘寶電商平臺詳情頁設計

通過申請自己的淘寶店,在電商後臺實操裝修/商品上架(切圖/上架/後臺裝修實操)

(4)C4Dbanner:掌握3D場景設計,運用到設計作品中,豐富畫面視覺效果。

C4D軟件基礎/場景搭建,利用3d場景提升設計空間立體感,增強視覺沖擊力。

(白模場景搭建)燈光材質/渲染輸出/c4dbanner(場景貼材質/打燈光/渲染設置並輸出應用到banner中)。

banner設計中的版式與Z軸拆分。

提升電商banner,畫面中融入更多插畫元素。並多以矢量插畫風格展現。

C4D風格banner設計制作。

3、移動端設計

劃重點啦!!!

隨著移動互聯網的發展,大家對於手機的需求也越來越高,人們用手機娛樂、消費、學習,所以UI設計無時無刻不體現在我們的生活中。在這壹部分,我們不僅要學習設計,還要學習用戶體驗、交互設計、運營設計,讓我們的產品更貼近目標用戶的使用習慣。

(1)用戶體驗、競品、原型圖:了解項目開發、產品調研、項目流程,掌握交互原型。

通過市場調研或大數據分析,做項目競品分析。利用大數據統計分析用戶對產品的痛點及體驗反饋,模擬用戶畫像分析用戶對本項目的痛點、需求、受眾、職業等等。通過數據比對及資料搜集做市場分析。

學習Axure軟件,繪制低保真原型圖。

結合產品分析和競品分析,用Xmind制作思維導圖。

分析app頁面流程圖/功能框架/界面跳轉邏輯,利用axure繪制App原型圖。

(2)圖標、膠囊、界面設計:通過整體性設計界面去掌握圖標、狀態欄、導航欄、標簽欄、閃屏、啟動、歡迎頁/引導頁,彈窗頁面等界面設計。

以剪影圖標、扁平圖標、線性圖標、面性圖標、微質感圖標、輕擬物圖標認識圖標的多樣性。

探究金剛區、功能圖標、裝飾性圖標設計的特性,及不同板塊應該使用的圖表類型及設計。

了解ios/安卓界面設計規範:尺寸、字體、顏色、大小、行距等,再深入探究界面中組成部分如:狀態欄、導航欄、標簽欄等尺寸可點擊空間大小等。

通過成熟的App,了解膠囊/彈窗設計形式及組成部分,深入分析閃屏/啟動/引導頁/三者之間的設計特性和運營思維用戶體驗等

最後,從0到1按照用戶思維和產品思維整體性設計界面 ?

(3)運營界面、AE交互動效、制定視覺規範設計:電商中的運營思維與產品設計結合,以用戶思維審查界面尋找用戶痛點,提升整體運營界面,達到營銷推廣目的。AE交互動畫設計,增強界面交互操作體驗感。

以運營思維延展推廣類界面設計。(多看優秀電商產品,去反推運營思維與設計)

突出促銷活動專題頁、彈窗、閃屏設計氛圍,增強視覺感染力,促進用戶點擊瀏覽量。

運營界面設計。(從模範開始,到加入運營思維設計運營界面)

以案例掌握ae軟件基礎:圖形變形、移動、大小、透明動畫

深入ae功能:節點緩動、速度圖表使用讓畫面更柔和順暢自然、利用濾鏡達到更多動畫效果,以界面交互動畫、跳轉效果動畫做練習及項目展示。

掌握視頻導出MP4、png序列、quicktime方式。

4、WEB前端:UI設計不壹定要精通Web前端,但是如果了解前端基礎知識,可以更好和程序員溝通,以實現自己想要的效果。

掌握Web前端的基本知識,熟悉Html5和Css3.熟悉框架布局

通過學習Html5和Css3的學習,把自己設計的企業站解析成網頁。

通過以上的學習,我們具備UI設計技能,進入UI設計行業後,更需要保持持續的學習去提升自己的審美、設計、技能等。所以多去看別人的設計,不是要抄襲,而是去思考學習別人的優點,去提升自己的設計思維。

  • 上一篇:適合用來調侃的幽默句子素材
  • 下一篇:元旦日歷的卡通素材
  • copyright 2024編程學習大全網