UX發展趨勢與相關技術探討(下)－自適應式網頁設計三大基本技術
上篇簡單說明了何謂使用者體驗(User Experience)，以及大略的說明「體驗」的概念，以及本文作者對於使用者體驗的看法與相關實例，接著，本章節將簡單介紹幾個本文作者認為與UX相關性較高的技術。

自適應式網頁設計(Responsive Web Design)

在行動裝置愈來愈普及的今日，為了讓使用者有更好的網路「瀏覽體驗」，簡稱RWD的Responsive Web Design應運而生，RWD主要包含了三種基本技術Fluid Grid、Flexible Image & Media Queries，接下來逐一簡單說明。

液態格子(Fluid Grid)

液態格子即是將網頁中，原本固定(Fixed)規格的格子(Grid)，改以浮動的方式進行設計。簡單的說，就是將原本以N px為單位的設計，改為以N%為單位。詳細寫法差異呈現於下方Table 2。


▲ Table 2. Fixed Layout vs. Fluid Layout（Source: Kailashkumar, V. Natda (2013)）



以此方式設計，便可讓網頁能依照裝置的螢幕尺寸大小，自動按比例進行調整，就如同液體會依照裝填容器不同而隨其變化形狀。

易適應的圖像(Flexible Image)

而在圖像(Image)的處理上，一般的圖像或照片解析度，在行動裝置的呈現上，容易超出畫面的邊界，無法直接看到完整的圖像。因此，必須透過CSS中的max-width來解決這個問題，也就是讓寬度(Width)的部分以比例的方式呈現，而高度(Height)則是隨寬度比例同向變動，寫法範例如下方Table 3所示。


▲ Table 3. Source Code of Flexible Image（Source Code: Yuxin (2012)）



Media Queries

在CSS3的Media Queries技術在RWD中扮演著重要的角色，此重要點在於，前面兩個小節所提到的技術，雖然能增加網頁的可讀性，但一般網頁的資訊對行動裝置來說，可能仍就是過多，因此必須仰賴本小節所討論的技術來進行資訊篩選，也就是根據裝置螢幕的大小，判斷哪些區塊需要被載入、哪些剔除，不過此技術在使用上需注意，瀏覽器必須支援CSS3才能正常運作，而目前IE8以下的瀏覽器是不支援CSS3的。(Yuxin 2012)寫法範例如下方Table 4所示。


▲ Table 4. Source Code of Media Queries（Source Code: Yuxin (2012)）



RWD效果呈現

運用RWD的技術來進行網頁設計，我們便可輕鬆突破裝置的限制，同時只需進行一次的開發，而不需要因為裝置的螢幕大小不同重新進行設計，三項技術中站有關鍵性角色的Media Queries，它所創造出來的主要效果就如下方圖7所呈現，依據畫面大小不同，保留最佳的瀏覽資訊。


▲ 圖7. Web of Think with Google in different driver（Source: Media Queries）



最終目的，就是期望使用者在進行瀏覽體驗時，不再因為裝置不同，而影響整體的瀏覽體驗，進而吸引使用者無論何時、何地，只要有適當的網路、裝置，都可以到自己的網站或平台來逛逛，替網站或平台帶來更多的流量及效益。

本質設計(Material Design)

Material Design是Google於2014年所提出的設計概念，網路筆者將其翻譯為「本質設計」，他認為這種設計概念其實是一種考慮事物本質的設計，將數位世界當中的UI元素，當作是一種不存在於現實世界的新材質，並且賦予它物理特性，但並非是去做擬物化的設計。(阿里媽媽MUX 2014)
目前主流上與Google Material Design概念類似的，有Apple的Guidelines、Windows的Modern UI及Facebook的Paper，這些概念的大方向是相同的，但各方在細節上著重的部分卻不太一樣，接下來本文將簡介Material Design的設計概念。

Material Design概念 (阿里媽媽MUX 2014)

● 紙張形態的模擬
我們知道電子螢幕是屬於完全平面化的，不像實體書本，我們可以看到每一頁紙張之間是有空間關係的，然而，雖然電子螢幕無空間感，但資訊內容是有空間層級的關係。因此，透過Material Design將紙的特性帶到數位世界當中，讓資訊內容間的層級關係，有如紙張的空間感。


▲ 圖9. 紙張形態的模擬範例（Source: 阿里媽媽MUX (2014)）


● 轉場動畫
過去傳統只有二維的概念，當點選打開一個新頁面時，就是直接刷新畫面，並沒有顯現出空間層級關係。因此轉場動畫即是增加轉場過程中的空間層級關係，另外，也不單只是頁面層級的動畫過渡，同時也能動畫中感受到作業過程中的變化，例如刪除時，垃圾桶圖標會有傾倒的動畫。


▲ 圖10. 轉場動畫範例（Source: 阿里媽媽MUX (2014)）



● ICON動畫
互動動畫在app當中已蔚為風行，那緊接而來的是設計師將焦點轉移到icon身上，透過icon動畫的設計，突顯「選取」、「反向選取」兩種狀態間的切換，例如Facebook上對貼文「按讚」、「收回讚」的動畫。
● 大面積色塊action bar
除了互動動畫之外，Material Design也透過大面積鮮豔色塊，讓畫面呈現出一種距離感，或是用色塊突顯主要內容或標題，讓畫面的層次感更為豐富。


▲ 圖11. 大面積色塊 action bar範例（Source: 阿里媽媽MUX (2014)）



● FAB按鈕(Floating Action Buttons)
FAB按鈕是Material Design中，非常引人注目的一塊，因為它跳脫了以往新建、增加、收藏…等制式按鈕的形式，而是透過反差配色的設計，突顯這個按鈕(如圖12的圓形+按鈕)，同時這類按鈕通常會是這個畫面的主要功能。


▲ 圖12. FAB按鈕動畫範例（Source: 阿里媽媽MUX (2014)）



● 無邊框按鈕
此部分指的便是，將一般按鈕典型的樣子去掉按鈕邊框，只保留圖示或文字的部分，甚至直接使用icon的方式來呈現按鈕，而Material Design的action bar也是採用類似的設計概念。
● 聚焦大圖
使用與螢幕等寬，幾乎佔據掉大半的圖像，去掉action bar，只保留部分無邊框的功能鍵(返回、功能清單等)，給人一種延伸的感覺。

Floating Action Buttons實作篇

前一小節介紹完了Material Design的基本設計概念，其中有特別提到FAB按鈕是Material Design一大特點，所以接下來本文將參考網路筆者Goofyz(2015)的教學文章，簡單介紹FAB按鈕的實作方法。Floating Action Button可以翻譯為「浮動動作按鈕」，那這種按鈕就正如其名，感覺就像是一個「浮」在畫面上的按鈕。
● 加入FAB
將activity_main.xml中的LinearLayout轉為FrameLayout，然後加上以下code:（Source: Goofyz (2015)）


也可使用其他Layout，但預記得更新對應的positioning資料，另外，Material Design Guideline建議margin為16dp。(Goofyz 2015)加 click 則是在onCreate()加上下方Code，即可完成FAB按鈕。（Source: Goofyz (2015)）



● 外觀選項
預設下，FAB的顏色是用theme的accentColor，按下去漣綺的效果顏色是 colorControlHighlight，要改的話可以在 style.xml的AppTheme中加入：（Source: Goofyz (2015)）



不過上面兩種寫法，colorAccent和colorControlHighlight都會影響整個app，倘若只想改變FAB的顏色可以加上backgroundTint 和 rippleColor：（Source: Goofyz (2015)）



另外FAB它提供兩種大小，加上app:fabSize-“mini”則為mini版按鈕，不過Guideline建議如非必要，一般情況下應用normal大小。

總結


▲ 圖13. 體驗成長因果環路（Source：本文作者整理）




本文最後，上方的圖13來做個簡單的總結，前面幾個章節，說明了「體驗」的趨勢發展、本文作者對「UX」看法及相關的實例和技術探討，總結來說，也就是希望使用者在使用過您個人或企業的網站、平台等資訊服務後，能在這過程當中獲得不同以往或更佳的使用者體驗，進而刺激使用者再次體驗的意願，藉此來增加電子商務平台收益或是企業其他效益…等。但前提是您要讓圖13當中的＋是增加的關係(圖13的＋指的是兩個因素間為正向關係，意即A愈多則B也愈多；反之，當A愈少則B也會跟減少)。（本文由凌羣電腦提供）



閱讀(上)篇...UX發展趨勢與相關技術探討(上)