UI設(shè)計學習總結(jié)

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

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

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

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

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

第一章：PS基礎(chǔ)

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

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

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

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

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

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

吸管工具(吸取顏色)

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

畫筆工具(畫家必備)

仿制圖章工具(快速復制出樣品)

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

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

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

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

減淡工具(畫出高光)

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

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

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

矩形工具(畫出方形)

抓手工具(移動圖片不會改變圖片)

縮放工具(放大縮小)

默認色（快速替換成前景色為黑色，背景色為白色）

切換前景色與背景色

前景色與背景色

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

切換顯示模式(全屏)

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

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

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

第二章：PS進階

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

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

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

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

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

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

第四章：AI進階

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

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

通過漸變色和圓形完成完成的案例

用圓通過路徑查找器完成的推特Logo

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

第六章：LOGO設(shè)計

個人Logo設(shè)計靈感

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

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

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

第八章：ICON設(shè)計

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

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

第九章：后臺網(wǎng)站設(shè)計

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

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

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

個人學習總結(jié)

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

學習思路

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