- Design for the Future
- 劉澤宏 李春旭 林靖雨編著
- 1697字
- 2019-01-01 06:22:10
1.2 Metro風格的原則
如果對Metro風格應用于軟件界面設計領域認真思考,我們首先需要確定這種新生事物的最主要的特點;其次,還需要明確應用于軟件界面的Metro設計風格有怎樣鮮明的特點區別于其他軟件界面設計風格。這些特點都反映了Metro風格的設計原則。
1.2.1 Metro UI的特點
干凈、輕量、開放、快速
Metro應用總是讓人感覺非常快速,用戶與應用之間的交互總是迅速得到響應;Metro應用關注主流程任務,界面絕大部分面積都用來顯示主要信息,而與主流程無關的選項和設置則都隱藏或放置在角落;Metro應用較少使用生硬的分割,而更善于使用留白;Metro應用的界面往往鮮活而生動。示例如下圖所示。

重內容,而非線框與修飾
線框與修飾并非不重要,甚至與內容同等重要,當內容雜亂無章到無法組織時,線框與修飾會成為救命稻草。然而線框可能被濫用,也可能在一塊大畫布中將相互關聯的內容割裂開來。與使用線框與修飾的目標相同,Metro應用使用留白來組織內容。用戶從內容本身受益,而不是裝飾。Metro應用往往使不表示內容的視覺元素最小化,內容本身即為UI,內容本身即為控件,用戶直接與內容進行交互。如下圖所示。

優雅的文字
在Metro應用中,文字不僅是可讀的,也是優美的,且具備特有的表現力和魅力。以Segoe字體為標志的字母文字不僅清晰直觀,而且在加重、放大、縮小中提供一種不妥協的優雅體驗,如下圖所示。

有情感的動畫
Metro應用通過高度響應的動畫保持界面的鮮活,這些動畫好像被賦予了情感。動畫的作用還不止于此,它同時提供了用戶交互上下文,提高了易用性。例如,點擊一段郵件的話題,話題飛入下一個頁面,幫助用戶注意到新頁面的全文是關于這個話題的。
可靠的信息
為內容而設計,簡明直接,確保信息的可靠性,不誤導用戶。任何帶有迷惑性的設計和引導,都是Metro所排斥的。
1.2.2 Metro UI的識別
Metro的簡潔之美如此深入人心,人們看到一部設計作品往往就能通過直覺來識別它是否遵循Metro風格。微軟Metro風格的應用和設計有五大鮮明的特點,可以用來鑒別該作品是否屬于Metro風格。
鮮明的顏色
Metro風格往往使用對比度強烈的鮮艷飽和純色塊作為圖標或文字的底色,也就是人們通常所說的“大色塊”。這些底色一般不使用或少量使用色彩過渡,一般不使用或少量使用透明度,絕不使用3D或其他非平面化的視覺效果。
矩形Tile
Tile是Metro風格作品中最常見的視覺元素。一般為純矩形,沒有圓角和折邊。Tile的內容可以是文字、圖標或圖片。Tile的大小并不單一,但在同一作品中Tile的尺寸一般是基準尺寸的倍數。在程序中Tile可以是活動的(Live Tile),通常是可點擊的。
Segoe UI、微軟等線和微軟雅黑
Metro風格英文作品使用Segoe字體家族作為界面字體。字體本身是純色填充,不使用或少量使用平面效果,絕不使用3D或其他非平面視覺效果。對于中文應用程序,微軟為Windows Phone設計了微軟等線字體,該字體在展示中文文字方面具有與Segoe UI相似的表現力;在Windows 8中,中文應用的默認字體為新雅黑。
整幅圖片和純色圖標
Metro風格的作品經常使用大尺寸的圖片甚至整幅圖來充分發揮圖片本身的表現力。圖片本身是清晰的,圖片所表達的內容通常是現代的。而Metro風格中的圖標往往是純色的,以純白色為最多,圖標使用簡單的線條和填充抽象圖標的功能。
留白而少線框
Metro風格的作品很少使用線條和線框分割畫布中的區域和功能,著重提供用戶沉浸式體驗。在必要時,作品通常使用不同大小及權重的字體或留白來區分畫布中的不同區域。
1.2.3 Metro哲學
作為一種界面展示技術,Metro和蘋果、谷歌的設計的最大區別在于:后兩者都是以應用為主要呈現對象;Metro界面強調的是信息本身,而不是冗余的界面元素。在視覺效果方面,這有助于形成一種身臨其境的感覺。Metro有幾種常用的手法來引起用戶的反應:信息的重要程度往往通過文字的大小來表達;顯示下一個界面的部分元素在功能上的作用主要是提示用戶“這兒有更多信息”。
在時間碎片中找尋到更多的信息。這就是Metro UI為現代應用所定制的設計理念,也是Metro的哲學,夸張一點說,現在的社會連呼吸都要趕時間,很多用戶沒有過多的時間來用復雜的手勢操控設備。在公交車上,我們可能利用從座位起身到在后門排隊等待下車的這個很小的時間間隔,還想著要看一條微博。也許趁著在超市排隊結賬時,都要用微信搖一下周圍的新朋友。Metro的種種設計原則和特點都是為了保證用戶的快速操作和信息獲取的準確性。
- 基于C語言的程序設計
- Visual C# 2008開發技術實例詳解
- Maya極速引擎:材質篇
- STM32嵌入式微控制器快速上手
- Storm應用實踐:實時事務處理之策略
- Red Hat Linux 9實務自學手冊
- 軟件構件技術
- Learning Apache Apex
- Hands-On Dashboard Development with QlikView
- 青少年VEX IQ機器人實訓課程(初級)
- Photoshop CS4數碼照片處理入門、進階與提高
- 運動控制系統
- Getting Started with Tableau 2019.2
- Practical Network Automation
- Practical Network Automation