UI設(shè)計(jì)基礎(chǔ)分類(lèi)學(xué)習(xí)匯總

　　1.GUI

　　圖形用戶(hù)界面（Graphical User Interface，縮寫(xiě)為GUI）又稱(chēng)圖形用戶(hù)接口，是指采用圖形方式顯示的計(jì)算機(jī)操作用戶(hù)界面。

　　2.WUI

　　WUI是Web User Interface的縮寫(xiě)，即網(wǎng)頁(yè)設(shè)計(jì)。

　　3.IXD

　　Interaction Design即交互設(shè)計(jì)，縮寫(xiě)為IXD。交互設(shè)計(jì)定義的是人和機(jī)器的相互“交流行為”，機(jī)器包含軟件設(shè)備，同時(shí)也包含硬件設(shè)備。

　　交互行為是在兩個(gè)或者多個(gè)個(gè)體之間進(jìn)行相互配合，并且達(dá)到某種目的，而交互設(shè)計(jì)則是為了讓整體過(guò)程更順暢、更完善。

　　4.UE/UX

　　User Experience即用戶(hù)體驗(yàn)，縮寫(xiě)為UE/UX，是用戶(hù)在使用產(chǎn)品的過(guò)程中建立起來(lái)的一種純主觀感受。

　　UI設(shè)計(jì)和其他設(shè)計(jì)不同，不是會(huì)用軟件工具繪制幾個(gè)圖像，就稱(chēng)為UI設(shè)計(jì)了。

　　它需要設(shè)計(jì)師具備大量的學(xué)科知識(shí)，包括認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)和統(tǒng)計(jì)學(xué)等，這些知識(shí)在界面設(shè)計(jì)中扮演著重要的角色。

　　就拿我們平常較常見(jiàn)的卡券來(lái)說(shuō)，它的設(shè)計(jì)看似簡(jiǎn)單，但也暗藏了很多要點(diǎn)，今天小編就以卡券設(shè)計(jì)為例，和大家一起探討探討。

　　卡券界面設(shè)計(jì)

　　卡券界面多出現(xiàn)于大眾消費(fèi)類(lèi)和營(yíng)銷(xiāo)類(lèi)APP中，常以列表形式出現(xiàn)，可以根據(jù)活動(dòng)內(nèi)容設(shè)計(jì)不同風(fēng)格。

　　卡券列表：

　　設(shè)計(jì)卡券列表時(shí)，既要每個(gè)活動(dòng)廠商的LOGO可以凸顯出來(lái)，又不能影響界面的一致性。

　　另外，如果采用單色模式設(shè)計(jì)，視覺(jué)一致；如果采用彩色模式設(shè)計(jì)，要考慮顏色的搭配?？此坪?jiǎn)單的界面，實(shí)際上包含了很多設(shè)計(jì)技巧。

　　卡券列表界面操作實(shí)例：

　　01新建文檔，設(shè)置“寬度”為750像素，“高度”為1334像素，完成后單擊“確定”按鈕。

　　02導(dǎo)入導(dǎo)航欄，將其拖曳到畫(huà)布部，也可獨(dú)立創(chuàng)建導(dǎo)航欄，設(shè)置“寬度”為750像素，“高度”為88像素，或創(chuàng)建狀態(tài)欄，設(shè)置“寬度”為750像素，“高度”為40像素。

　　03使用“圓角矩形工具”繪制圖形，設(shè)置“半徑”為20像素，“填充”顏色為（R:255，G:96，B:163）。

　　04選擇“橢圓形工具”，然后按住Shift鍵繪制圓形，接著設(shè)置“填充”顏色為（R:246，G:90，B:80）。

　　05使用“橢圓形工具”創(chuàng)建3個(gè)圓形，繪制一個(gè)擴(kuò)散，并將圓形圖層移動(dòng)到紅色圓形下方，再設(shè)置“填充”顏色為白色。

　　06分別選中白色圖形，設(shè)置大圓的圖層“不透明度”為6，中圓的圖層“不透明度”為10,小圓的圖層“不透明度”為16。

　　07導(dǎo)入LOGO圖片，拖曳到圓上，再按快捷鍵Ctrl+Alt+G添加剪貼蒙版。

　　08使用“文字工具”輸入文本，選擇合適的字體和字號(hào)。

　　09使用“矩形工具”繪制圖形，然后按住Shift鍵繪制正方形，接著選擇正方形，按快捷鍵Ctrl+T進(jìn)入自由變換模式，再旋轉(zhuǎn)45度后進(jìn)行縮放，較后按快捷鍵Ctrl+E進(jìn)行合并。

　　10選擇“直接選擇工具”，然后選中菱形，在選項(xiàng)欄設(shè)置“操作路徑”為“減去層形狀”，接著設(shè)置“填充”顏色為（R:181，G:102，B:255）。

　　11雙擊繪制的圖形，然后在彈出的對(duì)話框中選擇“投影”選項(xiàng)，接著設(shè)置“不透明度”為6，“距離”為12像素，“大小”為0像素，再單擊“確定”按鈕，較后設(shè)置圖層的“不透明度”為96。

　　12使用“文字工具”輸入文本，選擇合適的字體和字號(hào)，再將繪制好的項(xiàng)目編組。

　　13將編組項(xiàng)目水平向下復(fù)制多份，然后使用同樣的方法繪制其他的列表項(xiàng)目。

　　14使用“文字工具”完善界面，至此，卡券列表就繪制完成了?？梢酝ㄟ^(guò)變換顏色拓展出不同商戶(hù)的優(yōu)惠券，是個(gè)很有代表性的頁(yè)面練習(xí)。