UX Mag article導讀分享
•Download as PPTX, PDF•
0 likes•408 views
Five Things to Know When Designing a Windows 8 App The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
Similar to UX Mag article導讀分享
Similar to UX Mag article導讀分享 (20)
UX Mag article導讀分享
- 1. Article Pick up UI Team: Number5
- 2. 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
- 3. Five Things to Know When Designing a Windows 8 App 01
- 4. 背景說明 微軟推出最新的Windows8作業系統是希望結合桌 上運算體驗與觸控於一身的平板裝置，微軟也大肆 招攬程式開發與設計者進行Win8 App Store開發， 而有一些Win8 UX設計指南必須遵循才能上架。 在還沒成為Win8 App專家前，必先瞭解Metro UI(改稱為Modern UI，微軟的最新的設計概念跟風 格)是如何成為Win8的特色，在此不討論Win8的好 壞，而是尋求瞭解Win8的UI及設計。
- 5. Modern UI Style Design Modern UI是微軟最新的設計風格與設計語言，包括了獨特的設計準則 跟字型排版。藉由包浩斯學院與無襯線字型到設計運動的啟發，微軟創 造了一個簡潔風格讓使用者直接與內容互動。 這些準則為： •Be Authentically Digital: 數位思維，設計上應著重功能大於具體象徵， 例: 電子書的翻頁動畫 •Take Pride in Craftsmanship: 設計上注重細節，甚至追求完美像素呈現 •Be Fast and Fluid: 應用程式的畫面跟動畫呈現必須流暢 •Do More with Less: 限制程式的範圍，避免閃亮裝飾性的功能 •Win as One: 使用微軟的設計規範，減少學習曲線
- 6. 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
- 7. Navigating Windows 8 *3: MSDN語意式縮放的指導方針 http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465319.aspx Win8最大的一個改變就是取消[開始]鈕，改以[開始畫面]代替。開始畫面則是 充滿互動資訊顯示的動態磚，讓使用者點選。 另一個重大改變是水平捲動。因為部份App要顯示的內容過多，連續向右卷頁 又變的太麻煩，為了補救這點，微軟發展出語意縮放，透過兩指尖捏合的手勢 指令，可以將動態磚畫面縮小到方便一次呈現檢視。*3
- 8. 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的特點。
- 9. Limiting Scope 中樞頁面 中樞頁面是使用者進入應用程式的入口。在這裡會以豐富的水平 移動瀏覽檢 視顯示內容，使用者可以藉此立即了解新的功能和可使用的功能。 中樞由不同內容類別組成，每個類別均對應至應用程式的區段頁面。每個區段 均應以泡泡形式顯示內容和功能。中樞應提供各式各樣的視覺呈現方式，吸引 使用者並將他們的注意力引導至應用程式的其他部分。 區段頁面 區段頁面是應用程式的第二層。在這裡可使用任何形式顯示內容，只要能夠呈 現出最佳的狀況和區段所包含的內容。 區段頁面由個別項目所組成，而每個項目均有自己的詳細資料頁面。 區段頁 面也可以使用群組功能和全景樣式配置。 詳細資料頁面 詳細資料頁面是應用程式的第三層。這裡會顯示個別項目的詳細資料，而使用 的格式會依特定的內容類型而有極大的差異。 詳細資料頁面由項目詳細資料或功能所組成。詳細資料頁面可以包含許多資訊， 也可以包含單一物件 (例如圖片或視訊)。 如前述Win8 Modern UI的特色是讓使用者聚焦在內容的互動， Win8建議透過階層式的設計。
- 11. 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的簡潔設計風格卻又增進識別性。
- 12. 結論 *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
- 13. The Pursuit of Tappiness : Six Easy Ways to Make Your Website Tablet-Friendly 02
- 17. Improve Your Site’s Tappiness in Six Easy Steps 幾個細微的調整就能增進易讀性以及操作的靈活性。 • 增加按鈕的尺寸跟邊寬： 成年人的食指平均寬度大約是45-57像素。 為何要讓網站訪客難以找到並點選「購買」按鈕? 延伸閱讀：如何提高Call to Actions (CTA) 的效能? http://www.dns.com.tw/seo/?p=6822
- 18. Improve Your Site’s Tappiness in Six Easy Steps • 確認連結跟按鈕即使沒有滑過，看起來也是可以觸按： 平板沒有滑曳情況。用清楚、對比色去裝扮文字連結，也別懼怕用底 線當作文字連結。
- 19. Improve Your Site’s Tappiness in Six Easy Steps • 加大文字的易讀性：
- 20. Improve Your Site’s Tappiness in Six Easy Steps • 增加導覽選單列的間隔：試著從5-10像素開始，如果可以，就更大。
- 21. Improve Your Site’s Tappiness in Six Easy Steps • 增加增加欄位的大小與空間：讓訪客容易點選欄位與輸入資訊。改進 表格將會是網站轉換率最好的方法。 延伸閱讀：Website Conversion Rate = 網站轉換率 http://savvywang.blogspot.tw/2006/11/website-conversion-rate.html
- 22. Improve Your Site’s Tappiness in Six Easy Steps • 增加頁面邊框與內容的留白：這可以增加易讀性與降低視覺上的複雜 度。增加網頁的留白空間，跟較擁擠內容相比，較有易於讀取的印象。 這些方法，同時也對於一般電腦網站訪客有用，但是導入之前要先在 所有平台上完成QA確認。
- 28. Thank you.