1、第三章 各種UI常用元素制作第1頁，共22頁。上節回顧 UI設計的設計方法 UI設計的構成方法 UI設計的色彩搭配技巧 UI設計的設計風格 PS的圖層、蒙版第2頁，共22頁。12345常用圖形制作常見控件制作創意圖標設計與制作知識拓展 能力拓展 目錄第3頁，共22頁。 熟悉使用Photoshop制作各種簡單的UI界面常用元素?？梢造`活選擇各種工具，如路徑工具、擦除工具等。能繪制簡單圖形、控件、圖標等。 學習目標第4頁，共22頁。圓形、圓角多邊形直線常用圖形制作1.常用圖形制作第5頁，共22頁。2.常見控件制作按鈕的制作下拉選擇框滑動條TAB切換氣泡對話框常見控件制作第6頁，共22頁。2.常見控

2、件制作第7頁，共22頁。擬物化設計風格圖標扁平化設計風格圖標創意圖標設計與制作3.創意圖標設計與制作第8頁，共22頁。3.創意圖標設計與制作 圖標設計技巧1）圖標含義交通指示牌上的指示圖標、桌面圖標、文件圖標、應用程序圖標等圖標是標志、符號、藝術、照片的結合體，是圖形信息的結晶圖標的分類：圖像類、內容類、比喻類、標志類第9頁，共22頁。3.創意圖標設計與制作A. 圖像類利用實體物品說明應用程度的用途等該類多為書籍、常見物品，能夠直觀地展現應用程序的使用方式、操作方式第10頁，共22頁。3.創意圖標設計與制作B. 內容類將應用的操作方式或代表性的圖形展現出來。該類多為游戲類應用圖標，可以給用戶展

3、示盡可能多的游戲玩法和內容第11頁，共22頁。3.創意圖標設計與制作C. 比喻類用其它物體讓人們產生對應用的聯想方式。該類常在效率類、聊天類、健康類的應用中使用，需要利用人們熟知的形象和物品為應用內容做陷喻，讓用戶能聯想到其里面的內容。第12頁，共22頁。3.創意圖標設計與制作D. 標志類利用本身已有產品或已深入人心的標識來展現。該類嚴格意義而言不屬于圖標的范疇。第13頁，共22頁。3.創意圖標設計與制作2） 整理圖標創意圖標的關鍵在于“隱喻”，即圖標的靈魂。當設計應用程序圖標時，第一件事是：考慮什么樣的圖標能說明你的應用程序，能夠吸引你的目標客戶。以水果忍者為例說明圖標創意過程第14頁，共2

4、2頁。3.創意圖標設計與制作【1】分析應用程序的性質。應用程序是游戲？書籍？應用軟件？是否使用一個詞或者一個句子就能說清楚？ -隱喻的開始【2】根據內容進行關鍵詞提煉重組。盡量用一個詞語或一個動詞+名詞的形式將程序內容表達出來。盡可能少用副詞、形容詞及描述性的語言。忍者、刀、切開、水果、手雷忍者用刀切水果，并避開手雷第15頁，共22頁。3.創意圖標設計與制作切+水果【3】尋找關鍵詞。由切可以想到刀、刀痕等【4】將詞語具體化，語言圖形化。這個過程語言圖形化的第一步。首先，將詞語盡可能名詞化。其次，名詞更具體，并選擇更具代表性、更飽滿的形態。西瓜這個形態非常飽滿，且紅色有首比較強的視覺沖擊力。第1

5、6頁，共22頁。3.創意圖標設計與制作圖標的風格要傾向于用戶的喜歡圖標的風格主要分為商務類型、卡通類型商務類型圖標多以“冷色”為主，配色中主要體現冷色，但也可以使用暖色，但相對于同色相的色彩，也多為偏灰或偏冷的色調。這類顏色能讓人冷靜。卡通類型圖標多以“暖色”為主，顏色絢麗、純度偏高，或對比強烈。這類顏色可以調動人的情緒。3）定位圖標的風格，清楚你的用戶第17頁，共22頁。3.創意圖標設計與制作圖標越簡單、表意越清楚越好。4）設計技巧及需要注意的地方【1】避免圖標中過多元素的堆積。【2】注意保持光、反射、影子的一致性。否則給人拼湊感、雜亂無章。【3】充分利用有限空間，使用飽滿的圖形。第18頁，共22頁。Diagram知識拓展路徑工具形狀工具擦除類工具4.知識拓展 響應式圖標第19頁，共22頁。簡單網頁設計制作實例5.能力拓展顏色的使用 自定圖形工具的使用漸變填充的使用第20頁，共22頁。 本章集中介紹了使用Photoshop制作各種簡單的UI界面常用元素。對于圖形、控件、圖標等的制作可以靈活選擇各種工具，如路徑工具、