視覺、交互和功能

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

關 鍵 詞：視覺設計 人機交互 Metro風格 多媒體信息設計

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

1 什么是Metro風格和什么是Metro風格的應用

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

2 Metro風格的設計理念

2.1 從布局上談metro的設計理念

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

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

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

2.2 從交互上談metro設計理念

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

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

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

其次，如同最開始我們提出的，Metro風格的應用就是針對性定制化的應用。所以把隱藏邊緣欄放在最底部的左端和右端，正是因為考慮了Win8的誕生是為了平板時代的到來，而根據(jù)人體工程學，當使用者手持設備時，底部的左端和右端是最容易觸碰控制的區(qū)域。

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

2.3 從針對性的動畫制作上談metro設計理念

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

同時Metro的所有動畫設計集成了一個動畫庫，當所有的設計都利用標準庫中的動畫，讓用戶遇到在不同的時間不同的環(huán)境中遇到都能感到熟悉和信任。

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

3.1決定你的用戶體驗目標

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

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

用戶為了達到他們的目標而與設計的產(chǎn)品產(chǎn)生的一整套相關交互，這一系列的動作對應著的是一個流程。每個流程都應該與功能內(nèi)容緊密相關，并幫助用戶到達設計之初，設計師所構想的藍圖場景。交互設計的目的是簡化用戶達到目標前需要的動作步驟并降低學習成本。

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

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

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

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

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

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

4 總結

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

參考文獻

[1] Win8 Guider 設計指南

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

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