深圳UI設(shè)計(jì)培訓(xùn)學(xué)校

UI究竟需要哪些手繪基礎(chǔ)知識(shí)

大多數(shù)的UI設(shè)計(jì)師是在做了UI之后開始學(xué)習(xí)手繪，因?yàn)閺臉I(yè)2~3年之后，大都會(huì)遇到瓶頸期，而對(duì)于設(shè)計(jì)師來說，手繪能力的提升有助于設(shè)計(jì)師的整體能力突破和提升，手繪基礎(chǔ)越深厚，設(shè)計(jì)思路和表現(xiàn)手法也會(huì)越開闊，作品的質(zhì)量也會(huì)更加提升。

所以建議大家多少學(xué)點(diǎn)手繪，但要明確一點(diǎn)，你是一名設(shè)計(jì)師，不要以其他行業(yè)的繪畫標(biāo)準(zhǔn)去要求自己，那樣就本末倒置了。

深圳UI設(shè)計(jì)培訓(xùn)學(xué)校

那么問題又來了，UI究竟需要哪些手繪基礎(chǔ)知識(shí)?手繪和素描一樣么?

手繪不等于素描，但卻是共通的。左邊的是寫實(shí)的素描作品，右邊是手繪人物作品，兩者都是超寫實(shí)，只不過右邊是彩色的，左邊是黑白，但右邊沒有素描基礎(chǔ)也無法畫的如此細(xì)膩。

對(duì)于沒有基礎(chǔ)的小白來說，建議先掌握透視，這是最基礎(chǔ)也是最難掌握的。

基礎(chǔ)透視

平時(shí)我們常用的透視是一點(diǎn)透視(平行透視)，兩點(diǎn)透視，三點(diǎn)透視(都用于建筑手繪)。

一點(diǎn)透視:強(qiáng)調(diào)縱深，畫法簡(jiǎn)單，適合表現(xiàn)偏平視且高度不高的物體和空間。

二點(diǎn)透視:適合表現(xiàn)在一定距離外偏平視的高度不高的物體和空間。

三點(diǎn)透視:強(qiáng)調(diào)高度，在使用仰視或俯視、尤其是表達(dá)高和深的概念的物體和空 間的時(shí)候，適合使用三點(diǎn)透視。

一二三點(diǎn)透視我都學(xué)過，但是怎么用?

如果只是會(huì)拉透視線，是一輩子也學(xué)不會(huì)透視的應(yīng)用的，要從具體的環(huán)境中去決定使用哪種透視。

這里推薦一本Scott robertson寫的透視書《How To Draw》。

選自《How To Draw》

      深圳UI設(shè)計(jì)培訓(xùn)學(xué)校

  ☆★教學(xué)目的

系統(tǒng)學(xué)習(xí)UI設(shè)計(jì)內(nèi)容，從UI中會(huì)涉及到的用戶體驗(yàn)與交互這塊開始學(xué)習(xí)。其次重點(diǎn)學(xué)習(xí)網(wǎng)頁界面設(shè)計(jì)、響應(yīng)式設(shè)計(jì)、軟件界面設(shè)計(jì)、移動(dòng)端界面設(shè)計(jì)。目的讓學(xué)生制作出符合UI規(guī)范的界面，并能獨(dú)立完成相對(duì)應(yīng)的原創(chuàng)作品。在教導(dǎo)設(shè)計(jì)中，也會(huì)涵蓋每一塊UI制作的具體流程，提升學(xué)生的思維與邏輯分析能力，產(chǎn)品研發(fā)與策劃能力。

☆★教學(xué)內(nèi)容

主要包括Axure用戶體驗(yàn)；網(wǎng)頁UI設(shè)計(jì)；移動(dòng)端UI設(shè)計(jì)幾大模塊。

1.Axure用戶體驗(yàn)：學(xué)習(xí)Axure軟件，了解UI設(shè)計(jì)前期原型設(shè)計(jì)的流程，具體圍繞網(wǎng)頁的原型設(shè)計(jì)與軟件的原型設(shè)計(jì)。并講解頁面之間的跳轉(zhuǎn)、交互狀態(tài)效果。學(xué)習(xí)Axure軟件，了解移動(dòng)端的基本原型搭建，了解交互相關(guān)的控件與人機(jī)交互中的合理想象。主要以APP的原型為主進(jìn)行學(xué)習(xí)。學(xué)習(xí)Axure軟件，了解動(dòng)效設(shè)計(jì)，例如下拉彈出菜單，輪播圖的展示，音樂播放器的時(shí)間線效果等。學(xué)習(xí)交互設(shè)計(jì)文檔的制作，集合整體框架內(nèi)容，注明頁面跳轉(zhuǎn)層級(jí)，與設(shè)計(jì)到各種交互狀態(tài)的說明。了解用戶體驗(yàn)的重要性。從前期產(chǎn)品的開發(fā)，到后期的設(shè)計(jì)。主要學(xué)習(xí)在功能上、設(shè)計(jì)上如何提高用戶體驗(yàn)。

2.網(wǎng)頁UI設(shè)計(jì)：了解網(wǎng)頁設(shè)計(jì)的趨勢(shì)、設(shè)計(jì)流程。區(qū)分不同系統(tǒng)、瀏覽器、分辨率等對(duì)網(wǎng)頁設(shè)計(jì)的要求。關(guān)注時(shí)下流行的網(wǎng)頁設(shè)計(jì)風(fēng)格。學(xué)習(xí)網(wǎng)頁設(shè)計(jì)規(guī)范，柵格化系統(tǒng)格式塔心理學(xué)。模塊與細(xì)節(jié)的規(guī)范，網(wǎng)絡(luò)廣告設(shè)計(jì)講解。學(xué)習(xí)網(wǎng)頁界面的色彩搭配。了解各種頁面導(dǎo)航與按鈕的設(shè)計(jì)法則。系統(tǒng)學(xué)習(xí)廣告banner的設(shè)計(jì)方式。了解網(wǎng)頁中的瀑布流、通欄、F式布局等。學(xué)習(xí)掌握高級(jí)光影學(xué)。加強(qiáng)創(chuàng)意構(gòu)圖的設(shè)計(jì)形式。了解表單的設(shè)計(jì)與用戶體驗(yàn)的融入。系統(tǒng)學(xué)習(xí)響應(yīng)式頁面設(shè)計(jì)的布局、模式與方法。鍛煉學(xué)生在設(shè)計(jì)頁面的同時(shí)符合SEO的設(shè)計(jì)規(guī)范。

3.移動(dòng)端UI設(shè)計(jì)：了解移動(dòng)端界面設(shè)計(jì)的發(fā)展趨勢(shì)。移動(dòng)端設(shè)計(jì)與PC端中的不同點(diǎn)。分塊講解不同系統(tǒng)、不同品牌機(jī)的不同設(shè)計(jì)法則與風(fēng)格。了解圖標(biāo)的設(shè)計(jì)分類與不同系統(tǒng)操作平臺(tái)中的圖標(biāo)設(shè)計(jì)規(guī)范。鍛煉布爾運(yùn)算與圖形造型。提高繪制圖形能力。了解圖標(biāo)設(shè)計(jì)中的結(jié)構(gòu)與光影學(xué)。具體配色原則等。

分析圖標(biāo)的表現(xiàn)形式2d/3d與流行趨勢(shì)。重點(diǎn)加強(qiáng)想象力的提升與創(chuàng)作能力。設(shè)定主題，獨(dú)立創(chuàng)作一整套的系統(tǒng)圖標(biāo)。學(xué)習(xí)主題風(fēng)格的統(tǒng)一化與衍生方式。了解APP當(dāng)中的控件、功能性圖標(biāo)。學(xué)習(xí)控件中的具體搭建與配色。訓(xùn)練正負(fù)形圖標(biāo)的設(shè)計(jì)。了解產(chǎn)品開發(fā)流程，從前期的MPD到思維導(dǎo)圖，低保真到高保真的具體工作流程。

學(xué)習(xí)IOS端的設(shè)計(jì)規(guī)范。了解APP的安卓端設(shè)計(jì)規(guī)范。系統(tǒng)學(xué)習(xí)APP中主要頁面的各種設(shè)計(jì)形式與規(guī)則方法。通過實(shí)戰(zhàn)，以分組的形式開發(fā)一個(gè)產(chǎn)品。從需求整理到調(diào)研，再到數(shù)據(jù)整合。最終完成基本的原型設(shè)計(jì)與交互文檔。了解導(dǎo)航在APP中的重要性。如何通過不同類型的導(dǎo)航引導(dǎo)用戶使用該產(chǎn)品。系統(tǒng)學(xué)習(xí)導(dǎo)航的12種分類。

學(xué)習(xí)APP中的啟動(dòng)頁、引導(dǎo)頁的界面設(shè)計(jì)形式。重點(diǎn)學(xué)習(xí)歸納產(chǎn)品的主要功能進(jìn)行引導(dǎo)展示。學(xué)習(xí)APP中的配色形式與色彩心理學(xué)。系統(tǒng)了解登錄、注冊(cè)頁面中的用戶體驗(yàn)。還有個(gè)人頁面的展示設(shè)計(jì)。將APP中的內(nèi)容信息通過合理的展示方式進(jìn)行表現(xiàn)。學(xué)習(xí)APP中的列表式構(gòu)圖、九宮格、圓心點(diǎn)放射、陳列館、輪播式構(gòu)圖。了解手機(jī)交互中的熱點(diǎn)區(qū)域，按鍵區(qū)等。系統(tǒng)地分析不同終端的適配法則。系統(tǒng)講解IOS端、安卓的切圖原則。

了解兩個(gè)不同終端的切圖方式與不同。man軟件對(duì)APP的注釋方法。了解微信平臺(tái)的公眾號(hào)。學(xué)習(xí)公眾號(hào)的設(shè)計(jì)流程與基本要求準(zhǔn)則。