您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

淺談Metro Ui界面

 

什么是“Metro Ui”?

“metro”字面是“地鐵”的意思,

在微軟的內(nèi)部開發(fā)名稱為“ typography-based design language”(基于排版的設(shè)計(jì)語(yǔ)言)。

Metro UI是微軟的一種設(shè)計(jì)方案。該設(shè)計(jì)方案已用于移動(dòng)操作系統(tǒng)Windows Phone 7和Windows 8等多款微軟產(chǎn)品。2010年初(美國(guó))獲得Metro UI專利批準(zhǔn)。

 

 

 

 起源      源自瑞士的設(shè)計(jì)風(fēng)格(Metro之父)

20世紀(jì)50年代期間,一種嶄新的平面設(shè)計(jì)風(fēng)格在聯(lián)邦德國(guó)與瑞士形成,被稱為“瑞士平面設(shè)計(jì)風(fēng)格”,由于這種風(fēng)格簡(jiǎn)單明確,傳達(dá)功能準(zhǔn)確,因此很流行于全世界,成為二戰(zhàn)后影響最大,國(guó)際最流行的設(shè)計(jì)風(fēng)格,因此被稱為“國(guó)際主義平面設(shè)計(jì)風(fēng)格”。

真正的靈感

來源于機(jī)場(chǎng)和地鐵的指示牌,碩大突兀的字體,能吸引讀者的注意力。

 

 特征

 1.拒絕特效

這個(gè)概念最核心的地方就是放棄一切裝飾效果,諸如陰影、透視、紋理、漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈俐落,沒有任何羽化、漸變或者陰影

 

 

2.簡(jiǎn)單元素

通常采用許多簡(jiǎn)單的用戶界面元素,諸如按鈕或者圖標(biāo)之類。設(shè)計(jì)師們通常堅(jiān)持使用簡(jiǎn)單的外形(矩形或者圓形),并且盡量突出外形,這些元素一律為直角(極少的一些為圓角)

 

 

3.專注排版

由于使用特別簡(jiǎn)單的元素,排版就成了很重要的一環(huán),排版好壞直接影響視覺效果,甚至可能間接影響用戶體驗(yàn)。字體是排版中很重要的一部分,和其他元素相輔相成。

 

 

4.專注顏色

配色貌似是最重要的一環(huán),通常采用比其他風(fēng)格更明亮、炫麗的顏色。同時(shí),配色還意味著更多的色調(diào)。比如,其他設(shè)計(jì)最多只包含兩三種主要顏色,Metro平均使用六到八種。

更傾向于使用單色調(diào),尤其是純色,并且不做任何淡化或柔化處理(最受歡迎的顏色是純色和二次色)。另外還有一些顏色也挺受歡迎,如復(fù)古色(淺橙、紫色、綠色、藍(lán)色等)。

 

 

5.最簡(jiǎn)方案

網(wǎng)站的整體設(shè)計(jì)中避免太多花哨的東西。簡(jiǎn)單的顏色與文字就已足夠。如果要添加視覺效果,選擇簡(jiǎn)單的圖像。

 

 

 與蘋果的iOS、谷歌的Android的區(qū)別

都是以應(yīng)用為主要呈現(xiàn)對(duì)象,而Metro界面強(qiáng)調(diào)的是信息本身,而不是冗余的界面元素。突出產(chǎn)品核心的內(nèi)容外,沒有更多裝飾性的設(shè)計(jì),在視覺效果方面,這有助于形成一種身臨其境的感覺。

 

 趨勢(shì)

Metro UI 這種扁平化和簡(jiǎn)潔的設(shè)計(jì)正在成為新的趨勢(shì),越來越多的網(wǎng)站已在UI上走向這種設(shè)計(jì)路線。

 

 總結(jié)

無論風(fēng)格如何,界面形式都取決于實(shí)際的功能。好的設(shè)計(jì)方案離不開產(chǎn)品前期的規(guī)劃工作,特別是通過草圖或線框原型進(jìn)行的探索。識(shí)別出最核心的用例需求,、使用原型不斷嘗試和驗(yàn)證,為接下來的界面設(shè)計(jì)工作打下堅(jiān)實(shí)的基礎(chǔ)。

“大家說的扁平化風(fēng)格的逐漸盛行固然有它的道理,但本質(zhì)上它只是設(shè)計(jì)美學(xué)當(dāng)中的一種;與仿古、高光、金屬質(zhì)感、木質(zhì)等視覺效果相同,對(duì)視覺風(fēng)格的選擇必須以良好的信息架構(gòu)及交互模式為基礎(chǔ)。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id1788.html
不要在你的網(wǎng)站上使用視差滾動(dòng)效果的5個(gè)原因(翻譯)
人人都“懂”交互設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×