互聯網剛剛興起的時候,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提案的效果圖,增強過度提交的概率。
標誌文本部分提取重新設計
標誌圖形文本組合最終確定
在標誌設計中,我們學習了平面的構成、字體設計等。,而且我們還在畫冊的學習中穿插了設計知識。比如色彩心理學、色彩對比與配色技巧、vi基礎+應用部分規格與內容、場景應用效果圖、尺寸與材料等。通過自己的模擬項目,可以深入掌握vi手冊的基礎部分。
學習VI視覺手冊規範,重點提煉VI視覺手冊頁眉頁腳設計。
模擬演練項目從甲方和用戶的角度深入掌握vi手冊的基礎部分,如企業logo、標準顏色、標準字體、中英文印刷規範、輔助圖形、錯誤應用等,並根據企業特點設計基礎部分。
在vi手冊的應用部分,從使用場景、材料、工藝、尺寸、展示環境等方面給出了甲方專業成品落地和效果展示的建議。
完善vi手冊提案效果圖。??
3.網頁/電子商務運營設計
平面設計是UI設計的基礎。我們通過平面設計學習了設計基礎和設計思維,減少了很多UI設計學習階段的疑惑。
在互聯網時代,大多數企業意識到通過在線信息吸引更多潛在客戶是多麽重要。這些潛在客戶對妳的公司和產品的印象,很大程度上取決於妳在網站設計上投入了多少精力。企業站和電商平臺也是互聯網環境下企業不可或缺的交流平臺和C端獨立交易平臺,是互聯網行業下的主流。
對於網頁設計,要求妳熟悉和掌握網頁設計的規範,了解網站的基本框架和網格布局,重點了解企業站的界面設計規範和輸出規範,能夠根據企業的真實需求設計頁面。掌握網頁中的版面設計/構圖排版/色彩/文字/圖片搭配,掌握企業站首個焦點圖的設計技巧。
電商部分需要電商行業的設計要求和規範,學習電商行業不同類型的設計方法和店鋪包裝方法,掌握電商設計的全流程和電商banner的版面設計。
這麽多知識,大家看起來都很大。放心吧!!!我們將拆分這些知識,帶妳壹步壹步來。
(1)企業響應式網站/壹屏網站設計:掌握網頁設計流程和規範,網頁設計配色和排版技巧。
網頁設計的基本規範:單位、分辨率、大小、字體、顏色等。/通過案例展示了解網站構成架構(首頁設計)。
網頁設計中的布局擴散與界面設計
通過網格布局,增強網頁設計的布局,深入研究網頁中構圖/顏色/字體/圖片的使用,改善整體頁面細節。
響應式移動終端設計規範:設計尺寸、適配設備、排版布局變換形式。
企業網站的界面設計
(2)背景設計:掌握數據圖形和圖形數據的配色。
目前根據招聘市場信息反饋可視化和後臺也是網頁階段的標配,那麽後臺首頁有哪些學習點呢?
企業網站的界面設計
掌握壹屏網頁設計和交互效果設計(壹屏主頁設計)
通過設計案例了解後臺設計規範和後臺操作流程及功能。
後臺主頁設計
通過柱形圖、餅圖、趨勢圖等方式將背景數據可視化,增強查看和閱讀能力。
(數據的平面設計)?
(3)電商設計:掌握首頁、專題頁、詳情頁、主圖、直通車、鉆展、後臺裝修、移動端、pc端的設計規範,通過店鋪的實際運營,掌握電商詳情頁的設計技巧和排版技巧。
通過淘寶電商平臺了解首頁移動端和pc端的設計規範。
掌握主圖、直通車、鉆展的設計規範,在後臺推廣窗口詳細了解運營推廣圖設計板塊。
通過項目案例分析展示主題頁面的設計構成/用真實案例分析:項目流程、關鍵點提取、可視化推導圖。
淘寶電子商務平臺主頁和專題頁面的設計
詳情頁的設計規範和內容構成,從用戶的角度考慮設計。
淘寶電子商務平臺詳情頁的設計
通過申請自己的淘寶店,實際上可以在電商後臺裝修/上架商品(剪圖/上架/做後臺裝修)。
(4) C4Banner:掌握3D場景設計,並運用到設計作品中,豐富畫面的視覺效果。
C4D軟件基礎/場景構建,利用3d場景提升設計空間的立體感,增強視覺沖擊力。
(白色模型場景構造)燈光材質/渲染輸出/C4banner(場景粘貼材質/燈光/渲染設置和輸出應用於banner)。
橫幅設計中的布局和z軸拆分。
提升電商旗幟,在畫面中融入更多插畫元素。而且大多是矢量插圖的風格。
C4D風格旗幟設計和制作。
3.移動終端的設計
專註點!!!
隨著移動互聯網的發展,人們對手機的需求越來越高。人們使用手機是為了娛樂、消費和學習,所以UI設計無時無刻不在我們的生活中體現。這部分不僅要學習設計,還要學習用戶體驗、交互設計、操作設計,讓我們的產品更貼近目標用戶的使用習慣。
(1)用戶體驗、競品和原型圖:了解項目開發、產品研究和項目流程,掌握交互原型。
通過市場調研或大數據分析來分析競品。利用大數據統計分析用戶痛點和對產品的體驗反饋,模擬用戶畫像分析用戶痛點、需求、受眾、職業等。通過數據對比和數據收集做市場分析。
學習Axure軟件,畫出低保的真實原型。
結合產品分析和競品分析,用Xmind做思維導圖。
分析app頁面流程圖/功能框架/界面跳轉邏輯,用axure繪制App原型圖。??
(2)圖標、膠囊、界面設計:掌握圖標、狀態欄、導航欄、標簽欄、閃屏、啟動、歡迎頁/向導頁、彈出頁等界面設計。
用剪影圖標、平面圖標、線狀圖標、面狀圖標、微紋理圖標、輕仿圖標了解圖標的多樣性。
探討金剛區的設計特點,功能圖標和裝飾圖標,以及不同板塊應使用的圖表類型和設計。
了解ios/ Android界面的設計規範:大小、字體、顏色、大小、行距等。,然後深入探究狀態欄、導航欄、標簽欄等界面組件的維度和可點擊空間。
通過成熟的App,我們可以了解膠囊/彈出的設計形式和組成部分,深入分析閃屏/啟動/引導頁之間的設計特點和操作思維用戶體驗。
最後,根據用戶思維和產品思維的完整性,設計從0到1的界面??
(3)操作界面、AE交互、視覺標準設計:電子商務中操作思維與產品設計的結合,可以通過對用戶思維界面的審視,找到用戶的痛點,完善整體操作界面,達到營銷推廣的目的。AE交互動畫設計,提升了界面的交互操作體驗。
用操作思維擴展和提升類接口設計。(看優秀的電商產品反推運營思維和設計)
突出促銷活動專題頁面、彈窗、閃屏的設計氛圍,增強視覺感染力,促進用戶點擊查看。
操作界面的設計。(從模型到加入運營思維設計運營界面)
結合案例掌握ae軟件的基礎知識:圖形變形、運動、大小、透明動畫。
深度ae功能:節點慢動作,速度圖的使用讓畫面更加柔和流暢自然,濾鏡用於實現更多動畫效果,界面交互動畫和跳躍效果動畫用於練習和項目展示。
主視頻輸出MP4,png序列和quicktime。
4.Web前端:UI設計不壹定要精通WEB前端,但是如果了解了前端的基礎知識,就可以更好的和程序員交流,達到想要的效果。
掌握Web前端的基礎知識,熟悉Html5和Css3,熟悉框架布局。
通過學習Html5和Css3,把自己設計的企業站解析成壹個網頁。
通過以上學習,我們掌握了UI設計技巧。進入UI設計行業後,需要不斷的學習,提升自己的審美、設計和技能。所以多看看別人的設計,不是去抄襲,而是去思考借鑒別人的優點,提升自己的設計思維。