圖形用戶界面設計課程教學探討

摘要：近幾年高校紛紛開設的圖形用戶界面設計課程仍處于摸索階段，本文將試圖理清該課程的設計思路，并對教學過程和考核形式進行探討。

關鍵詞：圖形用戶界面設計;課程設計

隨著用戶對移動設備界面使用體驗需求的日益增強，人們不再僅僅關注設備或APP產品的功能性。如今清晰美觀易操作的可交互界面已成為設備界面或APP界面的最基本要求，故而近幾年越來越多高校開設了相關課程。

但這類課程仍處于摸索階段，國家對于該課程缺少統一規范和完整體系。教師若用平面構成、版式設計理論去支撐教學，學生很難做出符合市場審美的界面。因設計載體較傳統紙媒發生了變化，除了考慮藝術性，更要注重藝術性如何為功能性服務，這就牽扯到界面設計規范、控件位置、字號等細節。下面對該課程設計思路、教學過程和考核形式進行探討。

一、 課程設計思路

據畢業生工作情況了解，從事相關崗位的畢業生普遍存在設計與實際應用的割裂。針對“年輕設計師美工化”、設計“重皮膚輕骨骼”問題①，課程的設計就必須使學生把設計知識應用到虛擬的實際項目中，從而更多去思考設計在項目中的實際應用和用戶體驗問題，加深對功能性、易用性的理解，而不僅僅把界面當作獨立的設計作品去追求美觀性、藝術性。

例如讓學生去構思某類APP，思考這類APP的實際應用場景和目標用戶及需求，再確定整體架構;架構有了，認清了需求和功能如何在界面體現，再去設計界面。按此思路，就能更好地避免做出好看而不中用的繡花枕頭。相比讓學生直接去設計美觀的界面，此方式可根本解決重皮膚輕骨骼問題。

假設課程共60課時，課程設計可分五階段，各12課時，前兩階段側重基本概念，后三階段側重應用練習，逐步加深難度。

二、教學過程

階段一：扁平化設計

首先讓學生了解最流行的扁平化設計特征，擬物化扁平化的對比和各自優缺點，并掌握扁平化設計技巧，例如去掉多余高光紋理修飾效果，選擇簡潔清爽的字體，注重背景整體感等。了解風格掌握技巧后，可以帶學生設計幾個圖標，包括APP圖標和APP內的功能性圖標，讓學生先以小見大，理解扁平化用戶界面視覺思維，理清扁平化圖標設計思路。

階段二：手機系統界面設計

此階段學生須了解iOS系統和部分Android系統手機界面尺寸和設計規范的概念，了解用戶界面并不是根據設計師喜好天馬行空地設計，而是一切要根據規范。如狀態欄高度、各圖標尺寸、導航欄和菜單欄高度。根據規范，再講授扁平化界面設計原則，可通過保證界面清晰、展現深度層次、布局、字體與色彩等方面講授。最后根據這些理論讓學生實操，內容可選用手機系統界面中最簡單、內容少的鎖屏待機界面，學生只需展現頂端狀態欄、時間日期、底部小功能圖標，再配以美觀簡潔的背景圖片即可。通過設計最基本的系統界面，讓學生對整個圖形用戶界面，包括規范和設計原則，有更具專業性的理解。

階段三：天氣APP界面設計

設定具體類別，是為了讓學生考慮實際應用場景從而更重視界面易用性。天氣界面屬于信息量較少、較簡單、易上手的。教師首先講解天氣類界面設計思維，包括該類界面有哪些必要元素、確定元素后如何安排它們在界面上的位置、天氣的色彩象征對易用性的影響等。之后可進行案例分析，選用市面上已存在的多個天氣類APP，逐一分析它們的優缺點。此階段要求學生完成3-5個主要界面的設計制作。

階段四：音樂APP界面設計

授課思路借鑒上一階段，重點關注不同應用場景，如運動模式、深夜模式。案例可參考蝦米、網易云音樂APP。

階段五：平板點餐界面設計

與前幾階段不同，重點為在新形式平板布局下設計美觀易用的餐廳點餐界面。案例可參考海底撈點餐界面。

三、考核形式

該課程參與學校統考并不適用，因為注重制作的成果，無法在考試的短時間完成，建議分階段考核。除了每階段完成相應成果，也不能忽略最后作品的展示，因學生今后從事的崗位特點決定了需具備團隊合作能力和展示溝通作品能力。可在全班展示自己的界面，清晰說明設計思路、產品功能亮點，以及如何通過視覺手段去實現。展示環節也建議納入考核的一部分。

四、 結語和反思

當然，實際教學成果如何，除了學的一方認真學習實踐，作為教的一方也需反思諸多問題。學校實踐教學資源有限，一些學校雖已開始校企合作協同育人，但“在校企合作中更多是流于形式，并沒有形成完善的育人體系”;另外教師雖有理論基礎但普遍缺乏企業實踐。作為新時代新課程，學校和教師如何向社會輸送應用型人才，需繼續探索。

參考文獻：

[1]向樺. 以項目設計流程為導向的APP界面視覺設計教學改

革初探. 藝術與設計，2019（9）：135-137.

[2]鄭璇. “UI設計”課程教學內容和課程體系改革研究.科教

文匯，2019（10）：96-97.

作者簡介：王婧然，碩士，任職北京信息職業技術學院，教學方向為數字媒體藝術設計。