UI設(shè)計(jì)學(xué)習(xí)總結(jié)

平面設(shè)計(jì)基礎(chǔ)
平面構(gòu)成
三大構(gòu)成:點(diǎn)線面
重復(fù)構(gòu)成
相同，有規(guī)律的重復(fù)
近似構(gòu)成
形狀，大小，色彩，肌理相似
漸變構(gòu)成
色彩逐漸變化
發(fā)射構(gòu)成
通過(guò)一點(diǎn)向四周擴(kuò)散猶如綻放的花朵
密集構(gòu)成
自由布局，有密有疏

UI理論
UI(User Interface[用戶界面] 簡(jiǎn)稱)
UI具備視覺設(shè)計(jì)、交互設(shè)計(jì)、用戶體驗(yàn)三大部分

GUI(Graphical User Interface[圖形用戶界面設(shè)計(jì)師]簡(jiǎn)稱)
GUI主要做的就是店面設(shè)計(jì)、色彩部分、文字的顏色、按鈕、圖標(biāo)形態(tài)的設(shè)計(jì)

交互設(shè)計(jì)
三大因素：機(jī)器、人、界面
人使用機(jī)器操作，界面做出反應(yīng)

原型和架構(gòu)設(shè)計(jì)
根據(jù)需求搭出原型圖，再將架構(gòu)排版好

第一章：PS基礎(chǔ)

1.1 部分常用快捷鍵
Ctrl+N 新建 Ctrl+O 打開 Ctrl+S 保存 Ctrl+T 變換
Ctrl+J 復(fù)制當(dāng)前選擇或者圖層 Ctrl+D 取消選區(qū) Ctrl+Shift+Alt+T 連續(xù)變換
Ctrl+; 隱藏參考線 Ctrl+] 放大 Ctrl+[ 縮小
1.2 工具欄

移動(dòng)工具(移動(dòng)選中的內(nèi)容)

選框工具(框選內(nèi)容)

快速選擇工具(快速選中)

裁剪工具(裁剪不需要的部分)

圖框工具(創(chuàng)建占位符圖框(CC 2019新增))

吸管工具(吸取顏色)

修補(bǔ)工具(修補(bǔ)內(nèi)容)

畫筆工具(畫家必備)

仿制圖章工具(快速?gòu)?fù)制出樣品)

歷史記錄畫筆工具(畫一下還原到?jīng)]改變時(shí))

橡皮檫工具(配合畫筆工具會(huì)更好)

漸變工具(畫出彩虹不是問(wèn)題)

涂抹工具(就像用手去抹墨水一樣)

減淡工具(畫出高光)

鋼筆工具(摳圖作圖必備)

橫排文字工具(寫些自己需要寫的內(nèi)容)

路徑選擇工具(配合鋼筆工具與形狀工具)

矩形工具(畫出方形)

抓手工具(移動(dòng)圖片不會(huì)改變圖片)

縮放工具(放大縮小)

默認(rèn)色（快速替換成前景色為黑色，背景色為白色）

切換前景色與背景色

前景色與背景色

快速蒙版工具(快速摳圖)

切換顯示模式(全屏)

濾鏡(快速產(chǎn)生不一樣的效果)

添加蒙版，不改變圖片的情況抹去部分內(nèi)容

創(chuàng)建新填充或調(diào)整圖層

第二章：PS進(jìn)階

使用PS鋼筆工具做出的牛，一共用了五個(gè)圖層

巖漿字體
使用兩個(gè)文字圖層添加斜面浮雕，發(fā)光，陰影，圖案疊加，以及火焰等粒子特效完成

使用各種工具巧妙的將化妝品融入花朵里
使用蒙版給化妝品添加花瓣，再添加高光以及陰影，才能讓人覺得化妝品是屬于花朵的一部分

第三章：AI基礎(chǔ)
3.1 工具欄

3.2 快捷鍵
都是Adobe公司的產(chǎn)品，快捷鍵幾乎雷同，工具欄也是差不多的

AI轉(zhuǎn)曲線的快捷鍵 ctrl+shift+O
移動(dòng)工具【V】
直接選取工具、組選取工具【A】
鋼筆、添加錨點(diǎn)、刪除錨點(diǎn)、改變路徑角度【P】
添加錨點(diǎn)工具【+】
刪除錨點(diǎn)工具【-】
文字、區(qū)域文字、路徑文字、豎向文字、豎向區(qū)域文字、豎向路徑文字【T】
橢圓、多邊形、星形、螺旋形【L】
增加邊數(shù)、倒角半徑及螺旋圈數(shù)（在【L】、【M】狀態(tài)下繪圖）【↑】
減少邊數(shù)、倒角半徑及螺旋圈數(shù)（在【L】、【M】狀態(tài)下繪圖）【↓】
矩形、圓角矩形工具【M】
畫筆工具【B】
鉛筆、圓滑、抹除工具【N】
旋轉(zhuǎn)、轉(zhuǎn)動(dòng)工具【R】
縮放、拉伸工具【S】
鏡向、傾斜工具【O】
自由變形工具【E】
混合、自動(dòng)勾邊工具【W(wǎng)】
圖表工具（七種圖表）【J】
漸變網(wǎng)點(diǎn)工具【U】
漸變填色工具【G】
顏色取樣器【I】
油漆桶工具【K】
剪刀、餐刀工具【C】
視圖平移、頁(yè)面、尺寸工具【H】
放大鏡工具【Z】
默認(rèn)前景色和背景色【D】
切換填充和描邊【X】
標(biāo)準(zhǔn)屏幕模式、帶有菜單欄的全屏模式、全屏模式【F】
切換為顏色填充【<】
切換為漸變填充【>】
切換為無(wú)填充【/】
臨時(shí)使用抓手工具【空格】
精確進(jìn)行鏡向、旋轉(zhuǎn)等操作選擇相應(yīng)的工具后按【回車】
復(fù)制物體在【R】、【O】、【V】等狀態(tài)下按【Alt】+【拖動(dòng)】
文件操作 新建圖形文件【Ctrl】+【N】
打開已有的圖像【Ctrl】+【O】
關(guān)閉當(dāng)前圖像【Ctrl】+【W(wǎng)】
保存當(dāng)前圖像【Ctrl】+【S】
另存為… 【Ctrl】+【Shift】+【S】
存儲(chǔ)副本【Ctrl】+【Alt】+【S】
頁(yè)面設(shè)置【Ctrl】+【Shift】+【P】
文檔設(shè)置【Ctrl】+【Alt】+【P】
打印【Ctrl】+【P】
打開“預(yù)置”對(duì)話框【Ctrl】+【K】
回復(fù)到上次存盤之前的狀態(tài)【F12】
編輯操作 還原前面的操作(步數(shù)可在預(yù)置中) 【Ctrl】+【Z】
重復(fù)操作【Ctrl】+【Shift】+【Z】
將選取的內(nèi)容剪切放到剪貼板【Ctrl】+【X】或【F2】
將選取的內(nèi)容拷貝放到剪貼板【Ctrl】+【C】
將剪貼板的內(nèi)容粘到當(dāng)前圖形中【Ctrl】+【V】或【F4】
將剪貼板的內(nèi)容粘到最前面【Ctrl】+【F】
將剪貼板的內(nèi)容粘到最后面【Ctrl】+【B】
刪除所選對(duì)象【DEL】
選取全部對(duì)象【Ctrl】+【A】
取消選擇【Ctrl】+【Shift】+【A】
再次轉(zhuǎn)換【Ctrl】+【D】
發(fā)送到最前面【Ctrl】+【Shift】+【]】
向前發(fā)送【Ctrl】+【]】
發(fā)送到最后面【Ctrl】+【Shift】+【[】
向后發(fā)送【Ctrl】+【[】
群組所選物體【Ctrl】+【G】
取消所選物體的群組【Ctrl】+【Shift】+【G】
鎖定所選的物體【Ctrl】+【2】
鎖定沒(méi)有選擇的物體【Ctrl】+【Alt】+【Shift】+【2】
全部解除鎖定【Ctrl】+【Alt】+【2】
隱藏所選物體【Ctrl】+【3】
隱藏沒(méi)有選擇的物體【Ctrl】+【Alt】+【Shift】+【3】
顯示所有已隱藏的物體【Ctrl】+【Alt】+【3】
聯(lián)接斷開的路徑【Ctrl】+【J】
對(duì)齊路徑點(diǎn)【Ctrl】+【Alt】+【J】
調(diào)合兩個(gè)物體【Ctrl】+【Alt】+【B】
取消調(diào)合【Ctrl】+【Alt】+【Shift】+【B】
調(diào)合選項(xiàng)選【W(wǎng)】后按【回車】
新建一個(gè)圖像遮罩【Ctrl】+【7】
取消圖像遮罩【Ctrl】+【Alt】+【7】
聯(lián)合路徑【Ctrl】+【8】
取消聯(lián)合【Ctrl】+【Alt】+【8】
圖表類型選【J】后按【回車】

第四章：AI進(jìn)階

鋼筆工具配合實(shí)時(shí)上色做出的阿貍案例

鋼筆工具配合實(shí)時(shí)上色做出的插畫案例

通過(guò)漸變色和圓形完成完成的案例

用圓通過(guò)路徑查找器完成的推特Logo

第五章：版式設(shè)計(jì)

第六章：LOGO設(shè)計(jì)

個(gè)人Logo設(shè)計(jì)靈感

我的名字拼英縮寫LRL+內(nèi)向+性格多樣+雙子座
圖形里包含了我的拼英縮寫(LRL),后來(lái)也包含了我的網(wǎng)名(Yolx)
我本人性格內(nèi)向，平常一般不喜歡說(shuō)話，
一般陌生人和我聊天都是聊不了幾句，不過(guò)熟人還是聊的來(lái)話
所以個(gè)人比較喜歡少說(shuō)話多做事，效率為主
性格多樣，有時(shí)自己可能會(huì)因?yàn)橐恍┣闆r導(dǎo)致性格不一樣
雙子座，雖然不信這種玄學(xué)的東西，不過(guò)有時(shí)還是有點(diǎn)靈，
所以也把它加入個(gè)人Logo設(shè)計(jì)的靈感
第七章：官網(wǎng)設(shè)計(jì)

為學(xué)校官網(wǎng)重新設(shè)計(jì)

學(xué)校官網(wǎng)原本的設(shè)計(jì)，用我的話說(shuō)，好像八十年代的設(shè)計(jì)，確實(shí)看不下去
內(nèi)容多，布局密密麻麻，如果網(wǎng)站面對(duì)孩子的父母或者是其他感興趣的人
或許會(huì)看一下，不過(guò)面向青少年，那絕對(duì)沒(méi)看就不感興趣了，所以我的設(shè)計(jì)
把很多內(nèi)容刪減了，用Icon去表達(dá)內(nèi)容，這樣青少年更能接受

第八章：ICON設(shè)計(jì)

應(yīng)用在學(xué)校官網(wǎng)的Icon設(shè)計(jì)

當(dāng)時(shí)的Icon設(shè)計(jì)老師可看不下去，然而也只有我在設(shè)計(jì)Icon，
也就是老師手把手教會(huì)了我:要讓人看出來(lái)這是一套Icon
風(fēng)格一樣，有沒(méi)有圓角，是線還是面，在持續(xù)幾天的作業(yè)下
終于完成了這一套Icon,并把它運(yùn)用到了學(xué)校上

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

設(shè)計(jì)婚姻管理系統(tǒng)首頁(yè) 主要色調(diào)紫色(高貴，激情)

婚姻管理員進(jìn)入后臺(tái)首頁(yè)最先應(yīng)該看到的是今日的數(shù)據(jù)
所以簡(jiǎn)潔的頁(yè)面是無(wú)比重要的
第一板塊展示今天的登記人數(shù)以及預(yù)約人數(shù),
已完成的，未通過(guò)的，需要審核的
第二板塊展示上年的統(tǒng)計(jì)數(shù)據(jù)，直觀知道大致數(shù)據(jù)
第三板塊展示婚姻管理員今天應(yīng)該完成什么任務(wù)
第四板塊展示今天有進(jìn)行的婚姻，誰(shuí)和誰(shuí)結(jié)婚，在哪結(jié)婚，什么時(shí)候開始
第五板塊展示本月結(jié)婚與離婚的數(shù)據(jù)，可以通過(guò)簡(jiǎn)單的線了解到趨勢(shì)

第十章：設(shè)計(jì)作品集

個(gè)人學(xué)習(xí)總結(jié)

正如老師所說(shuō)的，雖然我們我們敲的是代碼，未來(lái)是程序員，但是，多學(xué)一樣技能就給自己的未來(lái)創(chuàng)造了不少的機(jī)會(huì)，那就比別人強(qiáng)了不少，也正是應(yīng)了中國(guó)傳統(tǒng)老話:技多不壓身
剛學(xué)UI確實(shí)好痛苦，因?yàn)橹扒玫亩际谴a，根本沒(méi)頭緒，就好比如，剛踏入這個(gè)學(xué)院，初中畢業(yè)的我都是面對(duì)書本，突然要面對(duì)這么密密麻麻的代碼，看到頭都大了，不過(guò)只要堅(jiān)持敲，不停學(xué)習(xí)，后來(lái)覺得代碼也沒(méi)什么難度，再回頭看以前敲的代碼，感覺自己確實(shí)比以前厲害了，以前很多代碼實(shí)現(xiàn)的內(nèi)容，現(xiàn)在幾行就解決了，再轉(zhuǎn)回UI，細(xì)細(xì)品味，也是如此
前期的設(shè)計(jì) 在后期看來(lái) 都是非常簡(jiǎn)單 只要堅(jiān)持 什么都可以學(xué)會(huì)

學(xué)習(xí)思路

第一步 快捷鍵
使用每款軟件最先應(yīng)該去了解快捷鍵，這可以幫助自己提高工作效率，比別人快一步
第二步 分析
無(wú)論是UI設(shè)計(jì)還是代碼，分析都顯的無(wú)比重要，別人是如何做的，用什么做的，為什么這么做，分析清楚，后面就不會(huì)懵懵懂懂的
第三步 實(shí)踐
所有的學(xué)習(xí)沒(méi)有實(shí)踐光靠看光靠分析那還是遠(yuǎn)遠(yuǎn)不夠的，光看不做永遠(yuǎn)學(xué)不會(huì)，自己動(dòng)手豐衣足食(有益大腦)
第四步 總結(jié)
實(shí)踐過(guò)程中遇到什么難題，如何解決的，為什么這樣做？
第五步 創(chuàng)新
當(dāng)自己有水平了，肯定不能限制在這個(gè)水平，水往低處走，人要往上爬，自己創(chuàng)新，才能比別人更強(qiáng)