gui-48第四章軟件ui設計metro應用界面設計理念與

主要內(nèi)容Metro應用界面的設計理念與規(guī)范Metro應用界面icon圖標制作實戰(zhàn)學習重點：Metro應用界面的設計理念與規(guī)范形狀工具的使用怎么突出簡單的風格設計學習目標：熟練掌握形狀工具的使用掌握簡單的風格設計4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念“Metro

Ui”？“metro”字面是“地鐵”的意思，在微軟的 開發(fā)名稱為“

typography-baseddesign

language”（基于排版的設計語言）。Metro

UI是微軟的一種設計方案。該設計方案已用于移動操作系統(tǒng)Windows

Phone

7和Windows

8等多款微軟產(chǎn)品。2010年初（ ）獲得Metro

UI專利批準。4.4.1

Metro應用界面的設計理念與規(guī)范形成，被稱為“平面設計風格”，由于這種風格簡單明確，傳達功能準確，因此很流行于全世界，成為二戰(zhàn)后影響最大，國際最流行的設計風格，因此被稱為“國際主義平面設計風格”。1.設計理念源自 的設計風格(Metro之父)20世紀50年代期間，一種嶄新的平面設計風格在

德國與4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念真正的靈感來源于機場和地鐵的指示牌,碩大突兀的字體，能吸引讀者的注意力。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念特征特效這個概念最的地方就是放棄一切裝飾效果，諸如陰影、、紋理、漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈俐落，沒有任何羽化、漸變或者陰影。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念特征簡單元素通常采用許多簡單的用戶界面元素，諸如按鈕或者圖標之類。設計師們通常堅持使用簡單的外形（矩形或者圓形），并且盡量突出外形，這些元素一律為直角（極少的一些為圓角）。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念特征專注排版由于使用特別簡單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗。字體是排版中很重要的一部分，和其他元素相輔相成。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念特征專注顏色配色貌似是最重要的一環(huán)，通常采用比其他風格更明亮、炫麗的顏色。同時，配色還意味著

的色調(diào)。比如，其他設計最多只包含兩三種主要顏色，Metro平均使用六到八種。更傾向于使用單色調(diào)，尤其是純色，并且不做任何淡化或柔化處理（最受歡迎的顏色是純色和二次色）。另外還有一些顏色也挺受歡迎，如復古色（淺橙、紫色、綠色、藍色等）。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念特征最簡方案的整體設計中避免太多花哨的東西。簡單的顏色與文字就已足夠。如果要添加視覺效果，選擇簡單的圖像。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念與蘋果的iOS、谷歌的Android的區(qū)別都是以應用為主要呈現(xiàn)對象，而Metro界面強調(diào)的是信息本身，而不是冗余的界面元素。突出產(chǎn)品

的內(nèi)容外，沒有

裝飾性的設計，在視覺效果方面，已在UI這有助于形成一種身臨其境的感覺。趨勢Metro

UI

這種扁平化和簡潔的設計正在成為新的趨勢，越來越多的上 這種設計路線。4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念4.4.1

Metro應用界面的設計理念與規(guī)范1.設計理念4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范動態(tài)磁鐵設計尺寸4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范桌面的布局尺寸4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范內(nèi)頁的布局尺寸4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范行高4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范顏色4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范文字4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范圖標4.4.1

Metro應用界面的設計理念與規(guī)范1.設計規(guī)范按鈕4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.1

用戶圖標案例制作步驟1：新建文檔，尺寸大小為：120*120像素。為一個磁鐵的大小，前景色設置為黑色。4.4.2Metro應用界面icon圖標制作實戰(zhàn)elete填充。4.4.2.1

用戶圖標案例制作步驟1：前景色設置為藍

值：#3387ea，快捷鍵：a4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.1

用戶圖標案例制作步驟2：首先使用橢圓工作繪制一個小圓，大?。?5*24像素，顏色填充為白色。。合并兩個圖層，步驟3：再繪制一個橢圓，大小：34*23像素。使兩個圓命名為“形狀1”4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.1

用戶圖標案例制作步驟4：

圖層，排放形式如圖。命名為“形狀2”步驟5：選中形狀2圖層，按住ctrl鍵，鼠標點擊形狀1圖層建立選區(qū)。4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.1

用戶圖標案例制作步驟6：按delete鍵刪除，移動形狀2圖層到合適的位置，如圖：步驟7：添加文字“用戶”。4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.2

聊天圖標案例制作步驟1：新建文檔，尺寸大小為：120*120像素。為一個磁鐵的大小，前景色設置為黑色。4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.2

聊天圖標案例制作步驟2：前景色設置為：#f9be3e，快捷鍵：a

elete填充。步驟3：使用多邊形工具，選擇聊天氣泡形狀，繪制圖形，大?。?3*42像素。4.4.2Metro應用界面icon圖標制作實戰(zhàn)4.4.2.2

聊天圖標案例制作步驟4：