【Change 的 芒果 App 專欄】Let’s Dive Deeper into the Metro’s Design Principle and Language – Part 1

歡迎各位再度回到 Change 的芒果 App 專欄中,

還記得嗎 Principle 與 Language 的差異嗎? Principles 是所謂的設計需求,符合設計需求的產品,則稱為表述這些需求的 Languages,兩者是不一樣的! 還不太明白嗎? 再 回想一下 吧 : )

接下來,我們將分兩部份來介紹 Metro Design Principle 與 Metro Design Language,

在本次的專欄中,將介紹 Metro Design Principle 的真正內涵,而在下次,將說明 Metro Design Language 是由哪些部分所組成的。

好的,讓我們來看看甚麼是 Metro Style 的設計準則:

輕便、乾淨、開放與快速 (Light, Clean, Open, Fast)

又稱為簡約風格 (Fierce Reduction),主要指拿掉多餘的設計元素。還記得設計界的名言嗎?將元素加入設計中並不難,真正需要勇氣與智慧的是以最精簡的設計,表現你的設計意涵。Metro 設計準則的第一項就是簡約,也就是用最少的設計元素來展現意境。

另外除了製作一個簡潔的 UI,更重要的,而且你應該要優先考慮的是: 如何簡化 App  的流程 。光是有一個非常傑出的 Metro Style UI 是不夠的,必須避免讓使用者進行無謂的頁面轉換。你應該看過 Inception 中,年輕造夢者所設計的迷宮。一旦你頁面轉換太過複雜,使用者就像掉進迷宮一般,再也走不出來,說不定用完你的 App 之後,還需要拿出圖騰來看看自己是否活在真實世界中。這時候,就算你的 UI 設計再傑出,一切都是沒有用的!

  • Metro 設計準則 1: 不僅是讓你的 UI  盡量簡潔,也要盡可能的簡化你的流程。並且請把簡化流程作為最優先的設計考量。

 

以內容為主 (Content, not chrome)

本項準則,是要提醒你,在一個 UI 上,真正的主角應該是要表達給使用者的資訊 (information),又稱為內容 (Content)。在很多的 UI 上,可以看到開發者或是設計師搶了整個介面的風采,設計了很多邊框、陰影、圓角邊框或是複雜的背景圖片。但在 Metro Style 中,內容才是王道 (Content is the king) ,請盡量減少使用按鈕、拖拉條、背景圖片或版面佈局的過度設計,避免降低使用者獲取資訊的效率。

  • Metro 設計準則 2: 這場秀的主角是內容或資訊,而不是那些 UI 的元素

 

排版印刷術 (Typography)

排版印刷術是一種可以讓畫面更加美觀的設計手法。在 Metro style 中,我們使用不同尺寸與大小來讓畫面上的資訊看起來更結構化。下面這張圖是某個天氣 App 的畫面,以最大的尺寸表達 App 名稱。接著畫面中央分別以其他不同的尺寸表示獨立的資訊區塊,是不是一目了然呢?

像這種有「結構化」關連的資訊,最適合使用排版印刷術的設計手法。排版印刷術相當適合用在處理具有階層關係的結構化資訊。像是投影片的製作,人們總是以主標題表達每一頁主題,接著以更細的階層,逐步的展示細節資訊,方便閱讀讀者更有系統地吸收資訊。

這也正是 Metro Style 不推薦使用「項目編號」的原因,如果你以排版手法將資訊階層關係適當表達出來,其實你並不需要任何的「項目編號」。 不知道甚麼是項目編號嗎? 請打開你的 Word,你會了解的。若想要更了解何謂排版印刷術,請參考 這裡

  • Metro Style 設計準則 3: Metro 並不全然與排版印刷術相同。排版印刷術只是 Metro Style 其中一種表達資訊的手法,最適合用來以表達結構化的資訊。

 

動作效果 (Motion)

雖然 Metro Style 深受 印刷設計 的影響,但當到了數位媒體的時代,一切都與傳統靜態媒體變得很不一樣。在由像素構成的電子螢幕中,我們可以設計一些動畫效果,來幫助資訊內容成為更顯眼的主角,或是改善 App 流程轉換的體驗效果。比方說,Turnstile motion 是一種告訴使用者,即將「關閉」現在的 App 或「切換」至另一個 App 的效果,Continuum motion 則是用來表示將要在「同一個 App」中顯示不同階層的資訊。

在 Metro Style 或其他介面設計中,重要的是不要使用太多無謂的動畫。我們都看過一些投影片設計,將文字或圖片以很奇怪的動畫效果出現或消失,讓人摸不著頭緒。這就是無謂動畫使的資訊內容失焦的典型例子。很多動畫效果都已有其固定的表達行為,若是使用不當,常常會降低使用者體驗。你可以參考 這個連結 ,了解更多有關 Metro Motion 的內容。

  • Metro Style 設計準則 4: 使用動作效果強化 App  的流程,或襯托資訊內容成為頁面的主角。

 

真實數位化 (Authentically Digital)

所謂的真實數位化,又稱為 原創數位 。意思就是說不必去模仿真實世界中的各種物品,而是應該突顯出各個操作的真實目的。例如一個電子書的 App,真正重要的焦點應該是放在如何讓使用者更方便的閱讀電子書內容,而不是將焦點放在如何讓翻頁行為更加擬真。或是一個販賣書籍的電子書城,應該著重在改善使用者購買書籍流程的效率,而非將重點放在如何模擬出很華麗且真實的書架。

當然,模仿真實世界物品的設計手法沿用已久,微軟在 Metro 之前也是以此作為設計哲學。模仿真實世界與原創數位是兩種不一樣的設計哲學,並沒有優劣之分。只是在 Metro style 之中,在乎的是如何讓使用者有效獲得資訊內容,而不是在乎是否跟真實世界使用相同的互動方式。

 

  • Metro Style 設計準則 5: Metro Style 設計的重點在於如何將資訊快速的表達出來,真實世界的物件模擬不是主要的重點。

微軟 Metro Style 走的是與 iPhone 很不一樣的介面設計風格,相信大家看到這邊也都應該可以發現到這一點。其實就像作者說的,設計風格並沒有優劣之分,就看你所遵循的是哪一種準則。要避免的是就是遵照某種設計風格,但完成的作品卻又參雜著其他風格的影子,這就變成了四不像了。不過,不管哪種設計準則,任何一種設計學派,都必須承認「內容才是主角」,能夠讓使用者快速地獲得他想要的資訊,才是介面設計的最高境界,你說是嗎?

接下來,我們將來談談 Metro Design Language 的內容,下次見囉!

(資料來源:artu)