Article Pick up

UI Team: Number5

Contents

• Five Things to Know When Designing a Windows 8 App

• The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly

http://uxmag.com/articles/five-things-to-know-when-designing-a-windows-8-app

http://uxmag.com/articles/the-pursuit-of-tappiness

Five Things to Know When Designing a Windows 8 App

01

背景說明

微軟推出最新的Windows8作業系統是希望結合桌

上運算體驗與觸控於一身的平板裝置，微軟也大肆

招攬程式開發與設計者進行Win8 App Store開發，

而有一些Win8 UX設計指南必須遵循才能上架。

在還沒成為Win8 App專家前，必先瞭解Metro

UI(改稱為Modern UI，微軟的最新的設計概念跟風

格)是如何成為Win8的特色，在此不討論Win8的好

壞，而是尋求瞭解Win8的UI及設計。

Modern UI Style Design

Modern UI是微軟最新的設計風格與設計語言，包括了獨特的設計準則跟字型排版。藉由包浩斯學院與無襯線字型到設計運動的啟發，微軟創造了一個簡潔風格讓使用者直接與內容互動。

這些準則為：

•Be Authentically Digital: 數位思維，設計上應著重功能大於具體象徵，

例: 電子書的翻頁動畫

•Take Pride in Craftsmanship: 設計上注重細節，甚至追求完美像素呈現

•Be Fast and Fluid: 應用程式的畫面跟動畫呈現必須流暢

•Do More with Less: 限制程式的範圍，避免閃亮裝飾性的功能

•Win as One: 使用微軟的設計規範，減少學習曲線

Touch Comes First, But it’s not the Only Thing

*1: MSDN觸控互動設計 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465415*2:一定要知道的 Windows 8 基本操作(滑鼠篇) http://www.dotblogs.com.tw/mrsunboss/archive/2012/10/26/78944.aspx MSDN回應滑鼠互動 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh700408.aspx

已經有太多關於Win8的可以提供眾多觸控功能，傳統桌面程式(Aero UI)跟平板都有觸控功能，部份平板只有執行Win8 Metro App時才能觸控，其餘桌機、NB、平板則是兩者可以切換，Win8提供了與內內互動的新手勢指令，而部份指令是與其他平台(iOS/Android)不同。根據微軟的觀測，使用Win8平板，不單單只會進行螢幕畫面的展示操作，也會抓取平板裝置進行互動。根據使用觀察研究，微軟發展出適合平版的直覺操作手勢指令，例如螢幕邊緣的觸控滑動 *1

雖然一堆公司忙著做出滿足觸控體驗的程式，但是依舊有很多傳統視窗使用者是用鍵盤滑鼠操作Win8，因此如同標題所言，開發者必須謹記在心除了觸控互動外，還有滑鼠。而這兩種是使用Win8時，截然不同的體驗。 *2

Navigating Windows 8

*3: MSDN語意式縮放的指導方針 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465319.aspx

Win8最大的一個改變就是取消[開始]鈕，改以[開始畫面]代替。開始畫面則是充滿互動資訊顯示的動態磚，讓使用者點選。另一個重大改變是水平捲動。因為部份App要顯示的內容過多，連續向右卷頁又變的太麻煩，為了補救這點，微軟發展出語意縮放，透過兩指尖捏合的手勢指令，可以將動態磚畫面縮小到方便一次呈現檢視。*3

Navigating Windows 8

Nav Bar:從螢幕的上邊緣向下撥動，即可顯示瀏覽列方式

應用程式列:從螢幕的下邊緣向上撥動，即可顯示命令應用程式列*4

快速鍵:使用者可以在每個應用程式使用的一組特有固定按鈕：搜尋、分享、連線、設定以及開始。

搜尋使用者可以搜尋您應用程式或另一個應用程式中的內容，他們也可以從另一個應用程式搜尋您應用程式的內容。

分享使用者可以將您應用程式中的內容與其他人或服務分享。

裝置使用者可以連接裝置並傳送內容、串流媒體以及列印。

設定使用者可以按照自己的偏好設定您的應用程式，以及存取使用者說明。

開始使用者可以直接進入 [開始] 畫面。

*4: MSDN應用程式列的指導方針 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465302.aspx

在Win8有新的手勢指令跟導引操作，或是對初用Win8的使用者是較困難，但是一旦熟悉後，將會變為直覺操作的體驗。Nav Bar/ App Bar/ Charms為Win8的特點。

Limiting Scope

中樞頁面中樞頁面是使用者進入應用程式的入口。在這裡會以豐富的水平移動瀏覽檢視顯示內容，使用者可以藉此立即了解新的功能和可使用的功能。中樞由不同內容類別組成，每個類別均對應至應用程式的區段頁面。每個區段均應以泡泡形式顯示內容和功能。中樞應提供各式各樣的視覺呈現方式，吸引使用者並將他們的注意力引導至應用程式的其他部分。

區段頁面區段頁面是應用程式的第二層。在這裡可使用任何形式顯示內容，只要能夠呈現出最佳的狀況和區段所包含的內容。區段頁面由個別項目所組成，而每個項目均有自己的詳細資料頁面。區段頁面也可以使用群組功能和全景樣式配置。

詳細資料頁面詳細資料頁面是應用程式的第三層。這裡會顯示個別項目的詳細資料，而使用的格式會依特定的內容類型而有極大的差異。詳細資料頁面由項目詳細資料或功能所組成。詳細資料頁面可以包含許多資訊，也可以包含單一物件 (例如圖片或視訊)。

如前述Win8 Modern UI的特色是讓使用者聚焦在內容的互動，Win8建議透過階層式的設計。

Limiting Scope

這些是一些基本概念，最重要的是知道每個App的目標重點是什麼。若是塞了太多功能、特色，容易讓階層過於複雜，使用上暈頭轉向。設計時要適切侷限，尤其是當使用者切換不同階層時，不要讓多餘的內容、資訊造成轟炸使用者的狀況。保持簡單，不要讓使用者頁面時，還需要用到搜尋才能找到需要的功能、資訊。

The Grid and Branding

*5: MSDN設計您的 Windows 市集應用程式品牌 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465418.aspx

Win8 App是由嚴謹的每個20像素方格構成，方格可在不同應用程式中維持一致的版面，迫使專注在內容的呈現與可視性而甚於視覺裝飾。即使方格看起來受到限制，但是還是有空間透過設計發揮創意。有些方法可以讓您的App更個性化與品牌識別性。*5顏色配置讓使用者在一開始的Win8市集中有一致與色彩識別性，因此調整市集中的顏色與圖片配置更搭配您的品牌與應用程式，讓使用者第一眼就能熟悉。另一個增加品牌識別性的方法是背景跟Logo。巧妙的背景搭上引人的視覺設計可以讓App增加許多獨特性與識別性，這可以是簡單的背景貼圖或是有意義的圖案。用一個大Logo當背景也是一個不錯方式，讓使用者操作App時一定看得到，這也符合Win8的簡潔設計風格卻又增進識別性。

結論

*6: MSDN建立出色的 Windows 市集應用程式 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh464920.aspx

現有許多Win8的範例可以套用，但是請記住要發揮自己獨特的想法跟美學觀點以及品牌特色。Modern UI是設計風格不是範本，善用設計指南跟建議來打造可以彰顯公司一致特色。

所以設計師設計Win8 App時要注意：•瞭解Modern UI設計風格，但是不是被此限制設計•設計上注重觸控，但是別忘了還有滑鼠•設計App時，記得有新的手勢指令•重新評估App，去無存菁程式的精華，即使去除不必要的特色，還是能反映出公司的品牌識別性

不管Win是好是壞，可以確定的一件事是Win8已經存在那，這些小技巧有助於啟發與幫助設計Win8市集的App。*6

The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly

02

背景說明

目前光美國就有七千萬平板使用者，而這數字是一年內成長兩倍。同時代表美國30%的網路使用者是使用平板上網。從2011到2012，在電子商務網站上用平板的流量成長了384%，第一次超過智慧手機的流量。而平板的市場正要開始起步擴張。在這個明顯趨勢下，正是配合平板功能，調整網站設計的時機，若是輕忽，將會造成評價下降，訪客流量、甚至銷售下降等。

What is Tappiness?

當網站呈現Tappiness時，是易於手機或是平板裝置使用。Tappiness是指適當地空間留白配置、易於閱讀的文字編排、具邏輯性的互動提示，以及讓網站訪客更易於瀏覽操作的大型觸控區域。

較大的字體跟較寬的觸控區域，讓網頁即使是縮小在平板螢幕上使用，也有不錯的體驗

What is Tappiness?相反地是太小不易閱讀的字體與連結排列太過於緊湊，導致發生不想要的操作錯誤，而增加操作時間、複雜性以及挫折體驗，而讓訪客快速流失。

較小的字體與觸控區域，會造成平板使用上難以閱讀及使用

Improve Your Site’s Tappiness in Six Easy Steps

幾個細微的調整就能增進易讀性以及操作的靈活性。

• 增加按鈕的尺寸跟邊寬：成年人的食指平均寬度大約是45-57像素。

為何要讓網站訪客難以找到並點選「購買」按鈕?

延伸閱讀：如何提高Call to Actions (CTA) 的效能? http://www.dns.com.tw/seo/?p=6822

Improve Your Site’s Tappiness in Six Easy Steps

• 確認連結跟按鈕即使沒有滑過，看起來也是可以觸按：平板沒有滑曳情況。用清楚、對比色去裝扮文字連結，也別懼怕用底線當作文字連結。

Improve Your Site’s Tappiness in Six Easy Steps

• 加大文字的易讀性：

Improve Your Site’s Tappiness in Six Easy Steps

• 增加導覽選單列的間隔：試著從5-10像素開始，如果可以，就更大。

Improve Your Site’s Tappiness in Six Easy Steps

• 增加增加欄位的大小與空間：讓訪客容易點選欄位與輸入資訊。改進表格將會是網站轉換率最好的方法。

延伸閱讀：Website Conversion Rate = 網站轉換率 http://savvywang.blogspot.tw/2006/11/website-conversion-rate.html

Improve Your Site’s Tappiness in Six Easy Steps

• 增加頁面邊框與內容的留白：這可以增加易讀性與降低視覺上的複雜度。增加網頁的留白空間，跟較擁擠內容相比，較有易於讀取的印象。

這些方法，同時也對於一般電腦網站訪客有用，但是導入之前要先在所有平台上完成QA確認。

Websites with Tappiness可以試試在電腦跟平板上，瀏覽下列範例網站。這些網站並沒有針對平板採用不同的版面編排，卻能在兩種平台上看起來都很棒。

Fitbit使用恰當的留白搭配大字體跟寬闊的觸控區域

Websites with Tappiness

Comcast使用大字體跟空間，也容易注意清楚的指示連結，也提供好的選單間跟易於使用的表格欄位。

Websites with Tappiness

Skillshare加大主文字體，也提供易用的按鈕以及足夠的文字區塊留白空間。

Websites with Tappiness

Apple網站當然不意外，是手持觸控裝置設計的先驅。

結論

您現有的網站適合觸控操作嗎？用一台平板就能馬上進行確認。而做出不佳的平板網路瀏覽體驗代表損失訪客、轉換率以及金錢。

好消息是這些小改變不用花費太多的時間跟金錢，卻能帶來巨大地使用者體驗的改善，也代表省下不少錢。

Thank you.