摘 要： 基于在互聯(lián)網(wǎng)和多媒體背景下的設(shè)計(jì)依然要注重內(nèi)容大于形式這個(gè)設(shè)計(jì)中永不變更的觀點(diǎn)，文章結(jié)合整體布局設(shè)計(jì)、交互設(shè)計(jì)和制定性動(dòng)畫設(shè)計(jì)等設(shè)計(jì)的形式對(duì)Metro風(fēng)格的設(shè)計(jì)特點(diǎn)進(jìn)行了分析，指出了設(shè)計(jì)時(shí)所遵循的原則。并結(jié)合實(shí)際的一些設(shè)計(jì)情境，說明了在進(jìn)行多媒體信息設(shè)計(jì)的時(shí)候，應(yīng)該如何根據(jù)設(shè)計(jì)方法進(jìn)行實(shí)踐。

關(guān) 鍵 詞：視覺設(shè)計(jì) 人機(jī)交互 Metro風(fēng)格 多媒體信息設(shè)計(jì)

隨著web2.0和Html 5時(shí)代的到來，互聯(lián)網(wǎng)以及基于互聯(lián)的各類應(yīng)用接踵而來，幾乎充滿了我們生活的每一個(gè)縫隙。隨著MAC OS系統(tǒng)結(jié)合觸控技術(shù)出色的將人和機(jī)器之間的互動(dòng)調(diào)配到極佳的狀態(tài)，互聯(lián)網(wǎng)以及多媒體設(shè)計(jì)領(lǐng)域中，呼吁交互設(shè)計(jì)的聲浪越來越高。在這一浪潮中，出現(xiàn)了許許多多優(yōu)秀的設(shè)計(jì)，Path的時(shí)間流，Pinterest的瀑布流。本文選擇微軟在其最新的系統(tǒng)中提出的Metro設(shè)計(jì)風(fēng)格，來分析設(shè)計(jì)是如何將視覺、交互和功能三者緊密結(jié)合起來。

1 什么是Metro風(fēng)格和什么是Metro風(fēng)格的應(yīng)用

對(duì)于什么是Metro設(shè)計(jì)風(fēng)格，歸結(jié)為一點(diǎn)即為在設(shè)計(jì)的過程中，始終需要遵從內(nèi)容重于形式這個(gè)原則。之所以這是設(shè)計(jì)的核心，還要回到體驗(yàn)的核心是什么的論題上。任何產(chǎn)品，特別是互聯(lián)網(wǎng)產(chǎn)品，內(nèi)容是體驗(yàn)的核心，其他的一切都只是幫助用戶能更好的使用內(nèi)容的工具。工具可以包括布局、命令和導(dǎo)航，這些是設(shè)計(jì)的形式。而所謂的Metro風(fēng)格的應(yīng)用就是針對(duì)所服務(wù)對(duì)象，以及提供服務(wù)的設(shè)備平臺(tái)結(jié)合觸控互動(dòng)技術(shù)和整體Windows的用戶界面框架來量身設(shè)計(jì)出來的應(yīng)用。它將軟件和硬件特性完美結(jié)合，而不是將設(shè)計(jì)和機(jī)器分離開導(dǎo)致應(yīng)用的“不接地氣”。

2 Metro風(fēng)格的設(shè)計(jì)理念

2.1 從布局上談metro的設(shè)計(jì)理念

對(duì)于很多互聯(lián)網(wǎng)應(yīng)用和媒體應(yīng)用，整體布局會(huì)直接影響用戶的第一印象。而布局的好壞則會(huì)決定用戶在進(jìn)入界面后的舒適感的強(qiáng)弱，進(jìn)而導(dǎo)致是能擁有用戶的逗留還是無奈憤概的“不玩了”。Metro風(fēng)格的設(shè)計(jì)以簡潔的版式為基礎(chǔ)，將內(nèi)容本身作為了組織和分組排版的方式，盡力的刪除了多余的線條和框架。使用空白來建立開放性，給我們的視覺留出可以呼吸的空間，這樣在使用我們所需的內(nèi)容時(shí)候，能足夠關(guān)注正確的內(nèi)容（圖1）。

在內(nèi)容的邏輯關(guān)系上，通過版式斜坡來表達(dá)內(nèi)容的層次。而在規(guī)范化上，每個(gè)字體大小都設(shè)置為20像素的整數(shù)倍，而每個(gè)級(jí)別又都按照一定比例大于前面一個(gè)層級(jí)，如：42pt=80像素；20pt=40像素，這樣的比例能讓用戶很容易就辨識(shí)出內(nèi)容的結(jié)構(gòu)關(guān)系（圖2）。

Metro風(fēng)格的另一個(gè)視覺特點(diǎn)就是統(tǒng)一使用剪影，并通過網(wǎng)格對(duì)齊元素來達(dá)到布局的結(jié)構(gòu)化和一致性：在頂部、左側(cè)和底部邊距利用負(fù)空間形成“C”形（圖3），而另一邊則是充盈的狀態(tài)，暗示了用戶可以平移的方向；標(biāo)題都在相同的位置，這樣在頁面之間的快速切換不會(huì)造成視覺上的紊亂感，界面能一直保持平穩(wěn)。

2.2 從交互上談metro設(shè)計(jì)理念

談及互聯(lián)網(wǎng)應(yīng)用的設(shè)計(jì)，基本上所有的人都會(huì)談交互。交互不是那些炫動(dòng)的視覺效果，不是蘋果系統(tǒng)里各種特效收放圖標(biāo)。交互其實(shí)是一個(gè)框架，一種流程，是剝離掉美麗外套，那些基于人體工程學(xué)的邏輯。

在Metro的設(shè)計(jì)中，和體驗(yàn)相結(jié)合的交互設(shè)計(jì)體現(xiàn)：滑動(dòng)是沿視圖的長邊平移的，并且只在一個(gè)軸上進(jìn)行移動(dòng)，使用戶能接受到一個(gè)很穩(wěn)定的系統(tǒng)環(huán)境的信息。

對(duì)于基于手機(jī)、平板和PC的應(yīng)用設(shè)計(jì)，始終需要考慮的是怎么樣可以使用戶通過最快捷的路徑到達(dá)目標(biāo)內(nèi)容。特別是在這些界面空間有限的設(shè)計(jì)平臺(tái)上，如何能表達(dá)出花樣百出的功能通道卻不影響簡潔的界面需求，這也是交互設(shè)計(jì)師在進(jìn)行工作時(shí)需要解決的問題。以Metro為例，桌面上通過隱藏邊緣來提供快速管理進(jìn)程和各類入口，保持了主工作界面的清潔，這是一種按照需求度安排座位的方式，把用戶當(dāng)前所需展現(xiàn)，把用戶可能需要的放在下層避免造成用戶分心。

其次，如同最開始我們提出的，Metro風(fēng)格的應(yīng)用就是針對(duì)性定制化的應(yīng)用。所以把隱藏邊緣欄放在最底部的左端和右端，正是因?yàn)榭紤]了Win8的誕生是為了平板時(shí)代的到來，而根據(jù)人體工程學(xué)，當(dāng)使用者手持設(shè)備時(shí)，底部的左端和右端是最容易觸碰控制的區(qū)域。

最后由于數(shù)字產(chǎn)品和人的交互，目前最廣泛的還是通過人手的動(dòng)作結(jié)合觸摸技術(shù)或者動(dòng)態(tài)捕捉。所以在這些交互方式的設(shè)計(jì)上需要考慮到操作對(duì)象目標(biāo)的尺寸和間距需要適合觸摸，并允許范圍內(nèi)的操作誤差。

2.3 從針對(duì)性的動(dòng)畫制作上談metro設(shè)計(jì)理念

動(dòng)畫是Metro設(shè)計(jì)語言的又一點(diǎn)睛之處，而如同所有的設(shè)計(jì)細(xì)節(jié)為遵循的一切為功能一樣，metro的動(dòng)畫以功能場景為中心，每一個(gè)動(dòng)畫都是針對(duì)某個(gè)場景專門設(shè)計(jì)的，謹(jǐn)守設(shè)計(jì)需要傳達(dá)信息的原則，幫助用戶直觀的了解正在或者將要發(fā)生的動(dòng)作和事件。這是有效設(shè)計(jì)的理念：設(shè)計(jì)的存在背后一定有所意圖，即便動(dòng)畫也如此，它是信息發(fā)出者，而不只是視覺裝飾。

同時(shí)Metro的所有動(dòng)畫設(shè)計(jì)集成了一個(gè)動(dòng)畫庫，當(dāng)所有的設(shè)計(jì)都利用標(biāo)準(zhǔn)庫中的動(dòng)畫，讓用戶遇到在不同的時(shí)間不同的環(huán)境中遇到都能感到熟悉和信任。

3 如何進(jìn)行Metro風(fēng)格的設(shè)計(jì)—互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)方法

3.1決定你的用戶體驗(yàn)?zāi)繕?biāo)

比如你想做一個(gè)相機(jī)的應(yīng)用。首先需要思考的是用戶在什么情景下會(huì)需要拍照，并且思考拍照之后的一系列相關(guān)動(dòng)作，比如處理，分享，保存，以及用戶希望有怎樣的使用體驗(yàn)。這些動(dòng)作和體驗(yàn)需求下隱藏的原因和心理就是產(chǎn)品設(shè)計(jì)存在的意義。也是新產(chǎn)品設(shè)計(jì)之初的靈感來源。在眾多的使用情景和拓展功能中，找出最本質(zhì)的需求，然后將需求轉(zhuǎn)化為產(chǎn)品功能。后續(xù)的所有設(shè)計(jì)，從視覺到交互都圍繞這個(gè)功能，目的在于讓用戶更容易理解功能邏輯，更明白怎么和這個(gè)他們需要的功能產(chǎn)品“對(duì)話”。

3.2決定產(chǎn)品設(shè)計(jì)的交互邏輯

用戶為了達(dá)到他們的目標(biāo)而與設(shè)計(jì)的產(chǎn)品產(chǎn)生的一整套相關(guān)交互，這一系列的動(dòng)作對(duì)應(yīng)著的是一個(gè)流程。每個(gè)流程都應(yīng)該與功能內(nèi)容緊密相關(guān)，并幫助用戶到達(dá)設(shè)計(jì)之初，設(shè)計(jì)師所構(gòu)想的藍(lán)圖場景。交互設(shè)計(jì)的目的是簡化用戶達(dá)到目標(biāo)前需要的動(dòng)作步驟并降低學(xué)習(xí)成本。

比如你想做一個(gè)基于話題的社交類產(chǎn)品，首先你需要概述一下在使用功能的過程中，先做什么事情，然后會(huì)出現(xiàn)哪些情景分類。對(duì)于話題類產(chǎn)品，我們可以列出關(guān)鍵流程：發(fā)表話題；參與別人的話題；邀請朋友參加自己的話題；修改話題內(nèi)容和評(píng)論；分享求擴(kuò)散。在邏輯上，這些流程有可以分為兩條線：一是為瀏覽而發(fā)生的動(dòng)作，而是為發(fā)言而發(fā)生的動(dòng)作。

3.3通過視覺來展現(xiàn)產(chǎn)品

一般到這時(shí)候，設(shè)計(jì)師已經(jīng)知道了產(chǎn)品的功能和用戶使用功能時(shí)的實(shí)現(xiàn)流程。此時(shí)，設(shè)計(jì)師需要通過視覺表達(dá)，將產(chǎn)品結(jié)構(gòu)和內(nèi)容展現(xiàn)出來。視覺依然需要緊密的貼合內(nèi)容，視覺設(shè)計(jì)是傳達(dá)信息最直觀的方法，絕不僅僅是為了美觀而存在。

視覺設(shè)計(jì)之初，需要明確的是創(chuàng)造哪些界面，并為每個(gè)視圖的界面上表達(dá)功能和內(nèi)容所必不可少的元素規(guī)劃布局。具體的說，就是需要在根據(jù)前面的設(shè)計(jì)階段中所得出的流程步驟來列出產(chǎn)品需要設(shè)計(jì)的指令，并弄清楚指令應(yīng)該出現(xiàn)在產(chǎn)品的那些地方。

另外在視覺上，需要通過有效的排版，將內(nèi)容結(jié)構(gòu)傳達(dá)給用戶。結(jié)構(gòu)可能是層級(jí)的結(jié)構(gòu)，也可能是群組類型的結(jié)構(gòu)。視覺的作用是對(duì)用戶的潛在引導(dǎo)作用，讓用戶明白下一步應(yīng)該去哪，產(chǎn)品的核心內(nèi)容和功能在哪。

對(duì)于設(shè)計(jì)師來說，通過明確產(chǎn)品的目的，完善產(chǎn)品的交互邏輯并通過視覺將內(nèi)容表達(dá)出來三部分工作之后，產(chǎn)品設(shè)計(jì)的雛形基本就完成了。

4 總結(jié)

互聯(lián)網(wǎng)產(chǎn)品體驗(yàn)是第一位，好的功能需要良好的用戶體驗(yàn)來支撐。而在用戶體驗(yàn)中，易用性和信賴感是最基礎(chǔ)的。而易用性和信賴感的基礎(chǔ)又是需要以內(nèi)容為重，以功能為重。在所有的設(shè)計(jì)中，應(yīng)該遵循：所有的設(shè)計(jì)的存在都應(yīng)該有所意圖，需要起到傳遞信息，幫助用戶更好的理解產(chǎn)品的功能和交互。而這些都是有方可循，只要設(shè)計(jì)師在做設(shè)計(jì)時(shí)，能首先做到自己充分了解產(chǎn)品，從用戶的視角來看產(chǎn)品邏輯，并結(jié)合視覺傳達(dá)，和必要的人機(jī)工程學(xué)知識(shí)，就能讓功能繁雜的互聯(lián)網(wǎng)產(chǎn)品在使用起來得心應(yīng)手。

參考文獻(xiàn)

[1] Win8 Guider 設(shè)計(jì)指南

[2] Alan Cooper. 交互設(shè)計(jì)之路-讓高科技產(chǎn)品回歸人性[M]. Chris Ding. 電子工業(yè)出版社2006.

[3] James Kalback. Web導(dǎo)航設(shè)計(jì)[M]. 李曦琳. 電子工業(yè)出版社 2009.