正文

ui設(shè)計(jì)完整過(guò)程案例（ui設(shè)計(jì)完整過(guò)程案例分享）

發(fā)布時(shí)間：2023-04-28 01:49:17 稿源：創(chuàng)意嶺閱讀： 848

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于ui設(shè)計(jì)完整過(guò)程案例的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶(hù)遍布全國(guó)，設(shè)計(jì)相關(guān)業(yè)務(wù)請(qǐng)撥打175-8598-2043，或微信：1454722008

本文目錄:

1、什么是UI設(shè)計(jì)？
2、什么是UI設(shè)計(jì)
3、ui設(shè)計(jì)包括什么？需要掌握哪些？
4、如何自學(xué)UI設(shè)計(jì)？

ui設(shè)計(jì)完整過(guò)程案例（ui設(shè)計(jì)完整過(guò)程案例分享）

一、什么是UI設(shè)計(jì)？

UI設(shè)計(jì)（或稱(chēng)界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀(guān)的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶(hù)界面)的簡(jiǎn)稱(chēng)。

好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

UI設(shè)計(jì)師的職能大體包括三方面：一是圖形設(shè)計(jì)，軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)、操作規(guī)范等。

一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。三是用戶(hù)測(cè)試/研究，這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀(guān)性，主要通過(guò)以目標(biāo)用戶(hù)問(wèn)卷的形式衡量UI設(shè)計(jì)的合理性。

如果沒(méi)有這方面的測(cè)試研究，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)極大的風(fēng)險(xiǎn)。

擴(kuò)展資料:

就業(yè)前景

UI即用戶(hù)界面設(shè)計(jì)行業(yè)剛剛在全球軟件業(yè)興起，屬于高薪技術(shù)設(shè)計(jì)產(chǎn)業(yè)，與國(guó)外在同步發(fā)展水平。

其次國(guó)內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國(guó)移動(dòng)、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專(zhuān)業(yè)的UI設(shè)計(jì)部門(mén)，但專(zhuān)業(yè)人才稀缺，人才資源爭(zhēng)奪激烈。

就業(yè)市場(chǎng)供不應(yīng)求。如今，國(guó)內(nèi)的UI設(shè)計(jì)日益發(fā)展，有了專(zhuān)門(mén)的職業(yè)分工也開(kāi)始出現(xiàn)一些較高水準(zhǔn)的一線(xiàn)設(shè)計(jì)師與UI設(shè)計(jì)交流組織。

但總的來(lái)說(shuō)，在這一領(lǐng)域，我們與西方發(fā)達(dá)國(guó)家間的差距仍是顯而易見(jiàn)的。軟件領(lǐng)域不像物質(zhì)產(chǎn)品那樣，存在工藝、材料上的限制，其核心問(wèn)題恰在于人。

因此，提高軟件UI設(shè)計(jì)師的個(gè)人能力，真正提升軟件產(chǎn)品的人性化程度，已成為中國(guó)UI發(fā)展的重中之重。

UI設(shè)計(jì)工作的年薪基本保持在10到15萬(wàn)，經(jīng)驗(yàn)豐富者可以達(dá)到20萬(wàn)，資深的UI設(shè)計(jì)人員年薪可以更高。

參考資料:百度百科----UI設(shè)計(jì)

二、什么是UI設(shè)計(jì)

很多想要自學(xué)UI設(shè)計(jì)的小伙伴，苦于沒(méi)有好的學(xué)習(xí)計(jì)劃、課程大綱，學(xué)習(xí)效果很不好，花了時(shí)間也沒(méi)有將自己的知識(shí)體系建設(shè)全面。那自學(xué)UI設(shè)計(jì)到底應(yīng)該如何學(xué)習(xí)呢？

在講學(xué)習(xí)流程之前，我們先來(lái)來(lái)簡(jiǎn)單介紹一下什么是UI設(shè)計(jì)以及UI設(shè)計(jì)的前景如何。因?yàn)橹挥心懔私饬薝I設(shè)計(jì)之后，你才知道自己是否對(duì)其感興趣，是否是真的愿意花時(shí)間和精力去學(xué)習(xí)。

一、UI設(shè)計(jì)

UI（User Interface），中文名“用戶(hù)界面”。Ps：（百度解釋?zhuān)︰I是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀(guān)的整體設(shè)計(jì)。

那互聯(lián)網(wǎng)的這波浪，無(wú)論前浪，還是后浪都從未消停過(guò)。你經(jīng)?？吹健盎ヂ?lián)網(wǎng)+”這樣的組合，通俗解釋“互聯(lián)網(wǎng)+”就是“互聯(lián)網(wǎng)+各個(gè)傳統(tǒng)行業(yè)”，但這并不是簡(jiǎn)單的兩者相加，而是利用信息通信技術(shù)以及互聯(lián)網(wǎng)平臺(tái)，讓互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)進(jìn)行深度融合，創(chuàng)造新的發(fā)展生態(tài)。

在這其中，又與UI有什么緊密聯(lián)系呢？

把傳統(tǒng)行業(yè)放到互聯(lián)網(wǎng)上，肯定需要用一個(gè)界面來(lái)展示，哪怕只是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，而每一個(gè)互聯(lián)網(wǎng)下的產(chǎn)品無(wú)論是PC端還是移動(dòng)端，無(wú)論傳統(tǒng)行業(yè)還是非傳統(tǒng)行業(yè)，最終呈現(xiàn)都要以UI界面為依托，供用戶(hù)使用查看。這其中又不僅要視覺(jué)產(chǎn)出，還要好的交互和用戶(hù)體驗(yàn)。

舉個(gè)例子，說(shuō)說(shuō)我們平常不太關(guān)注的來(lái)電接聽(tīng)這回事。

蘋(píng)果手機(jī)在不鎖屏的狀態(tài)下，來(lái)電顯示時(shí)，接電話(huà)在右邊顯示綠色，掛電話(huà)在左邊顯示紅色。一般情況下右手拿電話(huà)，大拇指操作，綠色是接聽(tīng)電話(huà)，這是我們的常規(guī)操作，使用頻率很高，所以在右邊離大拇指更近，而掛電話(huà)頻率不高所以在左邊遠(yuǎn)一些。從色彩體驗(yàn)上分析，紅色也有警示警告的作用，

但如果紅色按鍵和綠色按鍵換個(gè)位置，其實(shí)并不會(huì)影響視覺(jué)，但卻不是一個(gè)好體驗(yàn)，可能隨時(shí)都會(huì)有掛電話(huà)的誤操作

UI無(wú)處不體現(xiàn)在我們生活之中，無(wú)論大小，它都存在于你所看到的，你所觸碰到的體驗(yàn)里。所以UI不單純是美工，還要考慮到視覺(jué)效果和用戶(hù)體驗(yàn)。而用戶(hù)是很挑剔的，對(duì)視覺(jué)的需求和對(duì)體驗(yàn)的需求都在不斷的發(fā)生變化和提高。所以這也造就了UI設(shè)計(jì)師這種不需要敲代碼，但仍然可以拿高薪的互聯(lián)網(wǎng)崗位。

二、UI設(shè)計(jì)學(xué)習(xí)計(jì)劃

很多小伙伴沒(méi)有嚴(yán)格的學(xué)習(xí)計(jì)劃，導(dǎo)致于自學(xué)周期被自己拖得很長(zhǎng)，所以自學(xué)UI設(shè)計(jì)，一定要制定適合自己的學(xué)習(xí)計(jì)劃，嚴(yán)格按照學(xué)習(xí)計(jì)劃去完成學(xué)習(xí)目標(biāo)，才能獲得最終的勝利。那每個(gè)人的學(xué)習(xí)能力和技能掌握情況不同，在這里分享一個(gè)零基礎(chǔ)全天候以周劃分的學(xué)習(xí)計(jì)劃。希望你可以針對(duì)自己的情況，參考此計(jì)劃為自己的量身打造UI設(shè)計(jì)自學(xué)計(jì)

越簡(jiǎn)單的元素搭配，就越考察一個(gè)設(shè)計(jì)師的基礎(chǔ)功，如果沒(méi)有過(guò)硬的技術(shù)和扎實(shí)的基本功，就難以準(zhǔn)確地傳達(dá)產(chǎn)品自身調(diào)性和營(yíng)銷(xiāo)賣(mài)點(diǎn)。

我們都知道創(chuàng)意思維對(duì)于設(shè)計(jì)師的重要性，卻也不能忽略基本功對(duì)于設(shè)計(jì)師的必要性。只有堅(jiān)持不斷的負(fù)重訓(xùn)練，扎實(shí)美術(shù)功底，才能在日后的商業(yè)實(shí)戰(zhàn)中輕松駕馭各種風(fēng)格。

第一周：手繪

手繪的重點(diǎn)主要是培養(yǎng)學(xué)員的形體結(jié)構(gòu)，光感、空間的關(guān)系，這算是一個(gè)審美培養(yǎng)的啟蒙，時(shí)下最流行的矢量插畫(huà)就和手繪密切相關(guān)。

第二、三周：PS、AI基礎(chǔ)軟件的學(xué)習(xí)

從零開(kāi)始學(xué)習(xí)軟件，需要用實(shí)際的案例去學(xué)習(xí)，這樣更加容易上手，并且UI設(shè)計(jì)的學(xué)習(xí)并不是只是簡(jiǎn)單的學(xué)習(xí)軟件工具，很多在人都以為UI設(shè)計(jì)只要會(huì)了PS、AI等就可以了，其實(shí)讓通過(guò)實(shí)際的案例去了解設(shè)計(jì)背后的意義即設(shè)計(jì)思維、創(chuàng)意理解，才是更為重要的目的。

但是只學(xué)思維也不行，我們也要加強(qiáng)設(shè)計(jì)的基本功，對(duì)軟件完全的精通掌握，這是必須的。

第四、五周:平面構(gòu)成、Logo

掌握平面設(shè)計(jì)中點(diǎn)、線(xiàn)、面，加以延伸到到Logo設(shè)計(jì)，Logo一方面是包括圖形另一方面是包括字體，所以了解文字結(jié)構(gòu)是非常基礎(chǔ)的，以及如果這一階段學(xué)的非常好，接Logo私單，價(jià)格高到不敢相信。

并且logo品牌部分學(xué)習(xí)中，要會(huì)從Logo的形式、氣質(zhì)、基礎(chǔ)屬性、思維方式、以及標(biāo)準(zhǔn)制圖等去深入學(xué)習(xí)。一個(gè)簡(jiǎn)單的圖形通過(guò)形式的變形而演變出千變?nèi)f化的造型，如此多的變化還怕設(shè)計(jì)不出Logo嗎？

舉例：從形入手，一個(gè)圓可變實(shí)心的圓、可變空心的、可變半圓的還可變橢圓、半圓，那是不是就能聯(lián)想到雞蛋、煎蛋、荷包蛋、帽子、水杯呢？

第六周：品牌Logo定稿以及VI手冊(cè)設(shè)計(jì)

圖片來(lái)源：阿多比設(shè)計(jì)學(xué)院學(xué)員作品

這一周其重點(diǎn)是甲方思維思考設(shè)計(jì)，對(duì)，就是那個(gè)煩人的甲方爸爸，需要學(xué)習(xí)換位思考。

整個(gè)第一階段的學(xué)習(xí)內(nèi)容都是非常基礎(chǔ)的，目的是培養(yǎng)設(shè)計(jì)思維，正所謂懂用戶(hù)所想，還不能設(shè)計(jì)出好產(chǎn)品？

第七周：響應(yīng)式網(wǎng)站、一屏式網(wǎng)站

從案例來(lái)講述網(wǎng)頁(yè)設(shè)計(jì)的構(gòu)成、顏色、字體、功能、按鈕以及設(shè)計(jì)規(guī)范、排版規(guī)范。

第八周：后臺(tái)數(shù)據(jù)

除了后臺(tái)設(shè)計(jì)，更多的是后臺(tái)的數(shù)據(jù)統(tǒng)計(jì)處理，如何做到簡(jiǎn)單化、明了化。

第九周：電商設(shè)計(jì)

電商平臺(tái)首頁(yè)設(shè)計(jì)，每一個(gè)月各大購(gòu)物平臺(tái)都會(huì)有全站式的活動(dòng)，活動(dòng)主題都不一樣，所以其實(shí)電商設(shè)計(jì)的人才缺口是非常大的。

第十周：淘寶平臺(tái)詳情頁(yè)、后臺(tái)

這一部分是可以自己去申請(qǐng)?zhí)詫毜?、上架產(chǎn)品，任何學(xué)習(xí)都沒(méi)有直接上手來(lái)得快。實(shí)操實(shí)練，自己去體會(huì)各大平臺(tái)的規(guī)范，才會(huì)了解得更加清楚。

第十一周:C4D、Banner

進(jìn)入3D訓(xùn)練啦，豐富視覺(jué)效果，提高就業(yè)競(jìng)爭(zhēng)能力，多會(huì)一門(mén)技術(shù)，就多一些可能，這也是我們要為什么不斷學(xué)習(xí)提升自己的原因。

第二階段，更多的是網(wǎng)頁(yè)的設(shè)計(jì)訓(xùn)練，重點(diǎn)掌握企業(yè)站界面設(shè)計(jì)規(guī)范和輸出規(guī)范，且能夠根據(jù)企業(yè)真實(shí)需求設(shè)計(jì)頁(yè)面。

第十二周：用戶(hù)體驗(yàn)、競(jìng)品分析、原型圖

本周開(kāi)始設(shè)計(jì)APP，通過(guò)數(shù)據(jù)分析來(lái)做競(jìng)品分析，使用Axure來(lái)繪制APP的原型圖。

第十三周：圖標(biāo)

有意思的圖標(biāo)也是完整APP設(shè)計(jì)的重要一環(huán)。

第十四周：界面、膠囊

通過(guò)標(biāo)志性APP來(lái)講彈窗頁(yè)、閃動(dòng)頁(yè)。

第十五周：界面設(shè)計(jì)

繼續(xù)完成APP，并學(xué)會(huì)切圖、命名、標(biāo)注、打包、交接（前端小哥哥、小姐姐打不打就看這周的學(xué)習(xí)內(nèi)容了）

第十六周：運(yùn)營(yíng)界面

營(yíng)銷(xiāo)推廣性的用戶(hù)思維培養(yǎng)，把握用戶(hù)的痛點(diǎn)提升整體運(yùn)營(yíng)界面，達(dá)到營(yíng)銷(xiāo)推廣的目的。這一般都是通過(guò)突然跳出來(lái)的彈窗、閃屏等，比如促銷(xiāo)性質(zhì)的頁(yè)面，增加了視覺(jué)感染力，促進(jìn)了用戶(hù)的點(diǎn)擊。

第十七周：交互動(dòng)效

學(xué)好AE動(dòng)效會(huì)非常加分，因?yàn)樗梢詼?zhǔn)確的傳達(dá)出你的思路，演示你想要的表達(dá)的效果。這必將成為UI的流行趨勢(shì)，不想要被市場(chǎng)淘汰，一定要繼續(xù)學(xué)習(xí)啊！

這一個(gè)階段，可以嘗試著手設(shè)計(jì)屬于自己的APP，你可以選擇自己喜歡的主題，沒(méi)有局限性，這可以成為零基礎(chǔ)轉(zhuǎn)行的你的作品集內(nèi)容哦。

第十八周：前端

大家都知道與UI設(shè)計(jì)師密切合作的是前端，那作為一個(gè)UI設(shè)計(jì)師，只有懂了前端，這樣才會(huì)合作得更好，提升工作的效率。我們可以學(xué)習(xí)HTML5，學(xué)習(xí)CSS3等。

雖然是以周劃分，安排得滿(mǎn)滿(mǎn)當(dāng)當(dāng)，這樣學(xué)習(xí)流程適合大多數(shù)零基礎(chǔ)的小伙伴，每周的內(nèi)容如果學(xué)習(xí)的不扎實(shí)，可以適當(dāng)停留腳步，因?yàn)槊總€(gè)人的學(xué)習(xí)能力不同，學(xué)習(xí)掌握情況不同。一定要將知識(shí)學(xué)扎實(shí)，一步一個(gè)腳印的往前走，才能真正將UI設(shè)計(jì)知識(shí)掌握牢靠。

三、ui設(shè)計(jì)包括什么？需要掌握哪些？

UI設(shè)計(jì)范圍很大，簡(jiǎn)單來(lái)說(shuō)，不僅能做平面設(shè)計(jì)，各種軟件網(wǎng)站界面我們也要設(shè)計(jì)?？傊灰桥c人類(lèi)生活相關(guān)的人機(jī)交互界面，都在它的設(shè)計(jì)范疇內(nèi)。UI設(shè)計(jì)的前身是平面、網(wǎng)頁(yè)設(shè)計(jì)，在原專(zhuān)業(yè)的基礎(chǔ)上加入了一些人機(jī)交互的邏輯、控件的應(yīng)用、組件的狀態(tài)設(shè)計(jì)等內(nèi)容。這是由于互聯(lián)網(wǎng)發(fā)展的精細(xì)化延伸出來(lái)的新門(mén)類(lèi)，因此設(shè)計(jì)的軟件應(yīng)用就是基本功了。

需要掌握Photoshop（圖像處理）、illustrator（圖形制作）、After Effects（視頻處理）、Axure（原型設(shè)計(jì)）、Dreamweaver（網(wǎng)頁(yè)制作）、Coreldraw（矢量制作）、Flash（動(dòng)畫(huà)制作）等設(shè)計(jì)軟件及HTML5.0和DIV+CSS網(wǎng)頁(yè)代碼基礎(chǔ)。

學(xué)會(huì)了各類(lèi)設(shè)計(jì)軟件的應(yīng)用還不夠，此時(shí)還不能獨(dú)立創(chuàng)作，因?yàn)槿狈?chuàng)意的表現(xiàn)技能，所以需要掌握鉛筆、素描本、手繪板等不同手繪工具的熟練運(yùn)用。此部分主要是設(shè)計(jì)思維的訓(xùn)練及表現(xiàn)，重在設(shè)計(jì)理論的學(xué)習(xí)與構(gòu)圖技巧，學(xué)會(huì)解析各類(lèi)圖標(biāo)的設(shè)計(jì)原理及表現(xiàn)技法。UI設(shè)計(jì)學(xué)習(xí)還是離不開(kāi)教程資料的。

通過(guò)前面理論與工具的練習(xí)，基本具備了設(shè)計(jì)的基礎(chǔ)能力，接下來(lái)就需要一些完整案例的實(shí)戰(zhàn)了。要學(xué)會(huì)模仿各類(lèi)產(chǎn)品優(yōu)秀案例、并能解析其設(shè)計(jì)要點(diǎn)，能推陳出新做出部分創(chuàng)新的完整案例。需要掌握不同類(lèi)型互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)規(guī)范、設(shè)計(jì)流程、設(shè)計(jì)圖紙的輸出與迭代方法，保證產(chǎn)品用戶(hù)體驗(yàn)的持續(xù)性提升，具體詳細(xì)內(nèi)容不多說(shuō)，知乎上面有很多這樣的信息。最后想說(shuō)的就是，學(xué)習(xí)需要一種態(tài)度，態(tài)度決定你的收獲高度！

四、如何自學(xué)UI設(shè)計(jì)？

很多人會(huì)選擇自學(xué)UI設(shè)計(jì)，自己一人也不知從何學(xué)起。這里就為大家?guī)?lái)了一些分享，從零基礎(chǔ)開(kāi)始學(xué)習(xí)UI設(shè)計(jì)，這其中我們到底要經(jīng)歷一些什么?

一、學(xué)習(xí)準(zhǔn)備——啟蒙首先要先去了解整個(gè)美術(shù)史的發(fā)展。從人類(lèi)起源各個(gè)階段中，美術(shù)經(jīng)歷了什么樣的變化，在各自的時(shí)代發(fā)揮了什么作用，近代美術(shù)史又經(jīng)歷了哪些波折，平面設(shè)計(jì)藝術(shù)是如何發(fā)展壯大走進(jìn)千家萬(wàn)戶(hù)，并且有哪些經(jīng)驗(yàn)成功過(guò)度到后來(lái)的UI設(shè)計(jì)中。那些享譽(yù)中外的藝術(shù)大師有何過(guò)人之處，他們?yōu)槊佬g(shù)學(xué)發(fā)展做出了哪些貢獻(xiàn)，他們的名作到底有何動(dòng)人之處。

二、繪畫(huà)技巧——洞察美術(shù)高考主要考的三大項(xiàng)：素描、速寫(xiě)、色彩。就是繪畫(huà)入門(mén)的三大基礎(chǔ)課題，我們學(xué)習(xí)的過(guò)程也是以這個(gè)順序逐步覆蓋的。如果你已經(jīng)在第一部分看完了那些書(shū)籍，就會(huì)知道，學(xué)習(xí)基礎(chǔ)繪畫(huà)的過(guò)程中，我們?cè)诩垙埳蠈?duì)現(xiàn)實(shí)世界的物體進(jìn)行細(xì)致準(zhǔn)確的描繪，也就需要我們更仔細(xì)的觀(guān)察事物。

三、掌握軟件——手段這一步就正式開(kāi)始進(jìn)入學(xué)習(xí)軟件的步驟。如果學(xué)習(xí)的是UI，那么以下幾種軟件是必不可少的：PS、AI、DW、Sketch……其余的根據(jù)愛(ài)好自己補(bǔ)充。很多設(shè)計(jì)師沒(méi)有經(jīng)過(guò)前兩個(gè)步驟的熏陶的，所以在學(xué)習(xí)軟件的過(guò)程中很容易自滿(mǎn)，明明對(duì)軟件的掌握還很膚淺就已經(jīng)恬不知恥的在簡(jiǎn)歷中輸入”精通“二次。他們的視角是狹隘的，只認(rèn)為學(xué)會(huì)了PS這些工具，就學(xué)會(huì)了設(shè)計(jì)，也忽略了自己遠(yuǎn)遠(yuǎn)沒(méi)有達(dá)到美工門(mén)檻的界限。

以上就是關(guān)于ui設(shè)計(jì)完整過(guò)程案例相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。