天才教育網(wǎng)合作機(jī)構(gòu) > UI設(shè)計(jì)培訓(xùn)機(jī)構(gòu) > 交互設(shè)計(jì)培訓(xùn)機(jī)構(gòu) >

誠筑說超級(jí)設(shè)計(jì)培訓(xùn)

歡迎您!
朋友圈

400-850-8622

全國統(tǒng)一學(xué)習(xí)專線 9:00-21:00

位置:UI設(shè)計(jì)培訓(xùn)資訊 > 交互設(shè)計(jì)培訓(xùn)資訊 > UI設(shè)計(jì)理論和UI總結(jié)

UI設(shè)計(jì)理論和UI總結(jié)

日期:2022-07-09 11:38:49     瀏覽:120    來源:誠筑說超級(jí)設(shè)計(jì)培訓(xùn)
核心提示:自學(xué)網(wǎng)-咨詢微信Emma91168首先說一下什么叫UI,UI的本義是用戶界面,是英文User和interface的縮寫。UI設(shè)計(jì)師簡稱UID(User Interfac
自學(xué)網(wǎng)-咨詢微信Emma91168


首先說一下什么叫UI,UI的本義是用戶界面,是英文User和interface的縮寫。UI設(shè)計(jì)師簡稱UID(User Interface Designer),指從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人還有點(diǎn)、線、面。


UI設(shè)計(jì)理論


1:一開始學(xué)UI的時(shí)候是用PS PS很多人都用過都是用來扣扣圖片什么的,PS這軟件功能挺強(qiáng)大的并不是只有扣扣圖這么簡單(此處有點(diǎn)水)。


2、交互設(shè)計(jì)師,做整個(gè)項(xiàng)目的交互流程。(交互設(shè)計(jì)是人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域,它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu),使之相互配合,共同達(dá)到某種目的。)


3、用戶體驗(yàn)研究師,主要通過各種方法了解用戶現(xiàn)在需要什么樣的體驗(yàn)什么樣的界面,從而對(duì)這個(gè)項(xiàng)目的總體體驗(yàn)做決策。


4. 提出快速原型虛擬逼真設(shè)計(jì),并對(duì)其特點(diǎn)和原理進(jìn)行了討論.快速原型虛擬逼真設(shè)計(jì)是面向并行工程,基于虛擬原型和虛擬環(huán)境仿真的設(shè)計(jì),強(qiáng)調(diào)虛擬原型的快速生成與演化.在關(guān)鍵技術(shù)、原型系統(tǒng)以及開發(fā)環(huán)境三個(gè)層次上論述了快速原型虛擬逼真設(shè)計(jì)的研究.提出快速原型虛擬逼真設(shè)計(jì)模型以及基于該模型的體系結(jié)構(gòu)。


5.平面設(shè)計(jì)要注意字體,無論是標(biāo)記還是排版。字體是*能體現(xiàn)出平面的效果,還有版式,排版是*重要的一個(gè)過程 。 色彩,色彩要提高盡量拋棄傳統(tǒng)的紅黃綠藍(lán)。


UI設(shè)計(jì)總結(jié)

自學(xué)網(wǎng)-咨詢微信Emma91168

一開始上課的時(shí)候老師就交了幾個(gè)工具怎么用看著挺簡單的,自己動(dòng)手的時(shí)候一臉懵逼很無奈真是所謂的一看就會(huì)一做就廢,經(jīng)過了挺長的時(shí)間才可以克服這困難,像鋼筆工具吧,一開始做的時(shí)候心里面真的想放棄有一種想砸電腦的沖動(dòng)后來還是堅(jiān)持了下來慢慢練習(xí)才讓鋼筆工具倒在我的堅(jiān)持之下,后面就是自己做海報(bào)、設(shè)計(jì)網(wǎng)站、設(shè)計(jì)名片、設(shè)計(jì)廣告圖、LOGO和練習(xí)怎么調(diào)顏色。


附上自己的成果


這倆個(gè)是用自己練習(xí)了好幾天鋼筆工具臨摹出來的。


這個(gè)是用了幾個(gè)圓形合并出來的鯨魚和一個(gè)忘記叫什么名字圖形。


利用PS的素描制作。


在學(xué)習(xí)的過程中*讓我難忘的就是制作一個(gè)屬于自己的LOGO,想了好幾節(jié)課*后制作出來感覺有點(diǎn)滿意吧。


附上自己的成果


設(shè)計(jì)網(wǎng)站


設(shè)計(jì)網(wǎng)站的話排版、顏色。審美觀比較重要接下來就是排版問題,一開始學(xué)習(xí)網(wǎng)站排版都是這邊一條線那邊一個(gè)框的,還有字體一個(gè)粗一個(gè)細(xì)一個(gè)大一個(gè)小沒有對(duì)齊各種各樣后面都是經(jīng)過天天練習(xí)才完成一個(gè)正規(guī)的網(wǎng)站排版。


AI總結(jié)


AI的話倒是沒有什么老師也沒有教很多,不過AI做的圖都是矢量圖PS做的圖都是像素格的換句話來說AI做的圖片比PS做的圖片要高清一點(diǎn)吧,個(gè)人感覺。很多都是用鋼筆工具來完成也就那樣吧。AI的功能有一些比PS的好。


附上自己用AI做的成果


總體來說還算可以吧,不是學(xué)得很完美自己還需要多加努力。


PS基礎(chǔ)


PS基礎(chǔ)的話就是首先認(rèn)識(shí)一下這些工具叫什么名字,不然別人問你鋼筆工具在哪你找半天都找不到,還有一些常用的快捷鍵吧。


首先認(rèn)識(shí)一下快捷鍵:


Ctrl+S = 保存 Ctrl+N = 新建圖層 Ctrl+0 = 打開文件 Ctrl+Z = 返回(只能返回一步)


Ctrl+Alt+Z= 返回(可以返回多步) Ctrl++= 放大 Ctrl+ - =縮小 空格=抓手工具


Ctrl+0(數(shù)字)圖片大小自適應(yīng)屏幕 Ctrl+W 關(guān)閉 Ctrl+Alt+W 關(guān)閉全部


Shift+Ctrl+S 儲(chǔ)存全部 Ctrl+D 取消框選 Shift+Ctrl+I 反選 Ctrl+T 調(diào)整大小


這些都是常用的快捷鍵。


還有左邊導(dǎo)航欄的工具:


移動(dòng)工具 V 選框工具M(jìn) 套索工具L 魔棒工具W 橡皮擦工具E 鋼筆工具 這些都是常用的。


還有就是多加練習(xí),習(xí)慣了就可以了沒必要死記硬背。


這些都是基礎(chǔ)的東西,一張衣服圖片,首先用魔棒工具吧他圈起來Delete去掉不要的東西然后放一張背景圖放在上面然后正片疊底基本就可以了。


PS進(jìn)價(jià)


PS進(jìn)價(jià)的話,感覺前的常用工具用習(xí)慣了你考研嘗試著做一個(gè)有成果的東西可以嘗試做哪些案例。


首先可以在網(wǎng)上找一些圖片,然后用你的腦子思考一下你喜歡怎么做喜歡哪些風(fēng)格。


磨皮


新建一個(gè)圖層放進(jìn)圖片


打開圖像,進(jìn)入通道調(diào)板復(fù)制藍(lán)色通道


然后把你剛剛復(fù)制的藍(lán)色通道濾鏡其他選擇高反差保留。


然后取色取和圖片上面的色素然后用畫筆工具涂抹眼睛鼻子嘴巴眉毛


涂抹完后選擇圖像計(jì)算生成有一些PS不一樣的版本選擇圖像調(diào)整計(jì)算


這個(gè)時(shí)候會(huì)生成一個(gè)Alpha通道


按住Ctrl鍵用鼠標(biāo)點(diǎn)擊Alpha1通道載入選區(qū)Shift+Ctrl+I反選返回到圖層調(diào)板點(diǎn)擊激活圖層。


然后建立一個(gè)曲線調(diào)整層,調(diào)整曲線,邊觀察圖像的變化


調(diào)好后按Shift+Ctrl+Alt+E組合鍵蓋印可見圖層


現(xiàn)在看著臉上是不是有些黃褐斑


在工具箱中取海綿工具,模式選項(xiàng)為去色。設(shè)一個(gè)較小的數(shù)值小心擦拭色斑。然后用畫筆工具選取鄰近的顏色上色就OK了


就OK了這些步驟多加練習(xí),我也是練習(xí)了很多遍才成功的,圖片是我調(diào)整磨皮過后的你可以隨便找一張圖片來嘗試。


AI基礎(chǔ)


首先認(rèn)識(shí)一下左邊的工具,和PS的工具差不多但是AI的功能是非常強(qiáng)大的。


先學(xué)習(xí)一下填充和描邊,先新建一個(gè)圖層然后畫一個(gè)矩形選框然后給他上色和填充左上角文件下面可以選擇顏色。


如果你想切換顏色可以Shift+X這個(gè)快捷鍵可以將描邊和里面的顏色切換


如果不想要里面的顏色可以按問號(hào)鍵


想縮小的話可以點(diǎn)擊上面的角Shift+Alt不像PS還要Ctrl+T然后還要Shift+Alt其他工具自己嘗試。


AI進(jìn)價(jià)


基礎(chǔ)打好了可以嘗試著做其他小東西。下面我練習(xí)做了一個(gè)動(dòng)物。


首先用鋼筆工具一個(gè)一個(gè)臨摹出來,注意:不像PS那樣直接畫,這個(gè)是一個(gè)一個(gè)的來畫比如耳朵就是一個(gè)耳朵 眼睛就是一個(gè)眼睛 鼻子就是一個(gè)鼻子。畫完后選擇他的耳朵有一條路徑然后選擇吸管工具吸一下別的顏色他的耳朵就自動(dòng)上色了。其他的部位也是這樣。慢慢練習(xí)很快就會(huì)了。


版式設(shè)計(jì)


版式設(shè)計(jì)是指設(shè)計(jì)人員根據(jù)設(shè)計(jì)主題和視覺需求,在預(yù)先設(shè)定的有限版面內(nèi),運(yùn)用造型要素和形式原則,根據(jù)特定主題與內(nèi)容的需要,將文字、圖片 圖形 及色彩等視覺傳達(dá)信息要素,進(jìn)行有組織、有目的的組合排列的設(shè)計(jì)行為與過程。


版本設(shè)計(jì)就是排版,排版也是一個(gè)很重要的東西,如果你的網(wǎng)站和廣告圖排版得好看相信很多客戶找你,排版重要就是顏色要和圖片形成舒適的感覺,文字要大小一致色彩要給人一種舒適欺騙眼睛。什么樣的廣告網(wǎng)站需要什么樣的排版和因素都要考慮好,審美要和整體一致。


留白:則是版中未放置任何圖文的空間用特殊表現(xiàn)手法。其形式、大小、比例、決定著版面的排版。留白的感覺是一種輕松,*大的作用是引人注意。在排版設(shè)計(jì)中,巧妙地留白,講究空白之美,是為了更好地襯托主題,集中視線和造成版面的空間層次。


LOGO設(shè)計(jì)


LOGO是徽標(biāo)或者商標(biāo)的英文說法,起到對(duì)徽標(biāo)擁有公司的識(shí)別和推廣的作用,通過形象的logo可以讓消費(fèi)者記住公司主體和品牌文化。網(wǎng)絡(luò)中的logo代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。在設(shè)計(jì)個(gè)人的LOGO中要考慮到很多因素,比如自己的名字、自身喜歡的東西或者自己的想到的某一些東西,我自己也有一個(gè)屬于自己的LOGO。


設(shè)計(jì)思路:上面的馬相應(yīng)我的姓下面的字母是我常用的英文名字


字母的意思是風(fēng)情, 風(fēng):有好處也有壞處意譯以后一帆風(fēng)順,情:人間處處有真情意譯以后收獲親情友情愛情。


官網(wǎng)設(shè)計(jì)


官網(wǎng)設(shè)計(jì)比較注重風(fēng)格顏色字體要求比較嚴(yán)謹(jǐn)頭腦一點(diǎn)要清晰排版要明確對(duì)齊。


這個(gè)是我自己修改了學(xué)校的網(wǎng)站不是很好一般般吧風(fēng)格是以前的風(fēng)格,字體都是楷體顏色分黑、紅、藍(lán)。多看一些*的網(wǎng)站,收集多樣的風(fēng)格,多加練習(xí)。


ICON設(shè)計(jì)


一個(gè)ICON代表的是一個(gè)圖標(biāo)、一個(gè)網(wǎng)頁、一個(gè)APP圖標(biāo),有些人說ICON的設(shè)計(jì)原理是什么,風(fēng)格統(tǒng)一?那你就錯(cuò)了,現(xiàn)在很多設(shè)計(jì)師都一味的追求ICON的一致風(fēng)格,這些獨(dú)特的風(fēng)格可以讓ICON在界面中脫穎而出,但是如果所有在ICON都這樣設(shè)計(jì)的話那就沒有什么意義了。


這是我自己設(shè)計(jì)的一套ICON做了有差不多一個(gè)星期吧,主題是雪人,因?yàn)楝F(xiàn)在是冬天所以就想到了雪人,做這個(gè)雪人的時(shí)候修改了好多次一開始是黑色的后來感覺不是很對(duì)就改回白色了圖標(biāo)的顏色一開始也是黑色,但是黑色總是有點(diǎn)不合適,坑了好久看見別人用漸變色然后我也使用了一個(gè)藍(lán)紫的漸變色,經(jīng)過幾次修改才完成這一套ICON雖然不是很好,背景的風(fēng)格和顏色都不是很完美,腦子不夠用所以也就這樣了。不是很好看。


后臺(tái)網(wǎng)站設(shè)計(jì)


后臺(tái)網(wǎng)站設(shè)計(jì)要考慮風(fēng)格顏色,明確業(yè)務(wù)流程中要考慮你這個(gè)后臺(tái)是干什么的?用來輔助工作的還是企業(yè)內(nèi)部人員使用,使用你后臺(tái)網(wǎng)站的人是什么角色?老板?管理員?員工?還是顧客?需要什么功能?權(quán)限問題,用戶信息,用戶為什么要用你的網(wǎng)站,這樣一步一步的構(gòu)思出來。


這是我自己設(shè)計(jì)的一個(gè)后臺(tái)網(wǎng)站,顏色很一般風(fēng)格也是一般,參考了百度上的一些后臺(tái)網(wǎng)站,主要是銷售電子產(chǎn)品,LOGO是我自己的排版的話應(yīng)該還行吧不是很好的排版。還需要努力讓自己的風(fēng)格和顏色提高。




自學(xué)網(wǎng)-咨詢微信Emma91168
如果本頁不是您要找的課程,您也可以百度查找一下: