1.GUI
圖形用戶界面(Graphical User Interface,縮寫為GUI)又稱圖形用戶接口,是指采用圖形方式顯示的計算機操作用戶界面。
2.WUI
WUI是Web User Interface的縮寫,即網頁設計。
3.IXD
Interaction Design即交互設計,縮寫為IXD。交互設計定義的是人和機器的相互“交流行為”,機器包含軟件設備,同時也包含硬件設備。
交互行為是在兩個或者多個個體之間進行相互配合,并且達到某種目的,而交互設計則是為了讓整體過程更順暢、更完善。
4.UE/UX
User Experience即用戶體驗,縮寫為UE/UX,是用戶在使用產品的過程中建立起來的一種純主觀感受。
UI設計和其他設計不同,不是會用軟件工具繪制幾個圖像,就稱為UI設計了。
它需要設計師具備大量的學科知識,包括認知心理學、設計學、語言學和統計學等,這些知識在界面設計中扮演著重要的角色。
就拿我們平常較常見的卡券來說,它的設計看似簡單,但也暗藏了很多要點,今天小編就以卡券設計為例,和大家一起探討探討。
卡券界面設計
卡券界面多出現于大眾消費類和營銷類APP中,常以列表形式出現,可以根據活動內容設計不同風格。
卡券列表:
設計卡券列表時,既要每個活動廠商的LOGO可以凸顯出來,又不能影響界面的一致性。
另外,如果采用單色模式設計,視覺一致;如果采用彩色模式設計,要考慮顏色的搭配。看似簡單的界面,實際上包含了很多設計技巧。
卡券列表界面操作實例:
01新建文檔,設置“寬度”為750像素,“高度”為1334像素,完成后單擊“確定”按鈕。
02導入導航欄,將其拖曳到畫布部,也可獨立創建導航欄,設置“寬度”為750像素,“高度”為88像素,或創建狀態欄,設置“寬度”為750像素,“高度”為40像素。
03使用“圓角矩形工具”繪制圖形,設置“半徑”為20像素,“填充”顏色為(R:255,G:96,B:163)。
04選擇“橢圓形工具”,然后按住Shift鍵繪制圓形,接著設置“填充”顏色為(R:246,G:90,B:80)。
05使用“橢圓形工具”創建3個圓形,繪制一個擴散,并將圓形圖層移動到紅色圓形下方,再設置“填充”顏色為白色。
06分別選中白色圖形,設置大圓的圖層“不透明度”為6,中圓的圖層“不透明度”為10,小圓的圖層“不透明度”為16。
07導入LOGO圖片,拖曳到圓上,再按快捷鍵Ctrl+Alt+G添加剪貼蒙版。
08使用“文字工具”輸入文本,選擇合適的字體和字號。
09使用“矩形工具”繪制圖形,然后按住Shift鍵繪制正方形,接著選擇正方形,按快捷鍵Ctrl+T進入自由變換模式,再旋轉45度后進行縮放,較后按快捷鍵Ctrl+E進行合并。
10選擇“直接選擇工具”,然后選中菱形,在選項欄設置“操作路徑”為“減去層形狀”,接著設置“填充”顏色為(R:181,G:102,B:255)。
11雙擊繪制的圖形,然后在彈出的對話框中選擇“投影”選項,接著設置“不透明度”為6,“距離”為12像素,“大小”為0像素,再單擊“確定”按鈕,較后設置圖層的“不透明度”為96。
12使用“文字工具”輸入文本,選擇合適的字體和字號,再將繪制好的項目編組。
13將編組項目水平向下復制多份,然后使用同樣的方法繪制其他的列表項目。
14使用“文字工具”完善界面,至此,卡券列表就繪制完成了。可以通過變換顏色拓展出不同商戶的優惠券,是個很有代表性的頁面練習。