現今的 網站設計 ，不再只是單純考慮內容版面在電腦裝置上的呈現方式，更應該著重於思考其他行動裝置的呈現畫面，在專業術語中，我們稱之為「響應式 網頁設計 Responsive Web Design」，英文可簡稱為RWD。現代人生活生活離不開手機已是大趨勢，所以在各種行動裝置中，又以手機板畫面最重要，甚至老闆們透過手機處理事情的時間遠超過在電腦前。
有沒有響應式設計，對我有什麼影響嗎？
「這 個網頁跑版了也…」、「這個按鈕好難按！」、「圖片和文字也太小了吧…怎麼看啊？」如果您用手機瀏覽網頁，曾經有過以上的心理OS，那就代表該網站在響應 式設計上，得到不及格的分數！甚至下次可能還會不想點進去看…，因為太不方便了！與其說設計網頁的美觀與否，響應式網頁設計其實更是在比各位設計師的細心 程度，因為響應式網頁設計最重要的觀念就是：「提供給使用者最佳的體驗效果」。
今天愛思科要透過9大重點，針對手機板的介面使用，為各位點出響應式網頁設計都該具備的重要條件：
（一）容易操作
如同我們在上一段強調「最佳的體驗效果」，容易操作肯定是最重要的一點了！再者，如果一個響應式網頁式設計連「容易操作」的最基本要求都沒有的話，怎麼還能說自己是「響應式設計」呢…
容易操作的定義其實因人而異且範圍廣大，然而我將容易操作的定義解釋為「不須思考就能了解如何使用」。包含各種面向的操作像是：上下左右滑動的方式、點擊位置、按鈕會前往哪裡等等所有細節。
（二）表現重點
因為我們在手機上的空間有限，「講重點」就成了響應式網頁設計呈現的首要條件，過濾不需要的內容，讓使用者更快抓到現在的重點是什麼，或是用隱藏、收合、下面的方式來決定內容顯示與否。
（三）版面位置
為了讓手機板畫面能有最佳的版面呈現，我們同時需要去思考每個區塊的大小，像是頁首頁尾的高度、廣告BANNER的大小等等，而此觀念在首頁設計又尤其重要。
（四）風格一致
這 裡的風格一致，泛指網站的整體風格設計，總不能在電腦版上呈現的視覺色為藍色，來到手機板卻立刻成了綠色吧！這種分開思考的錯誤，實在很容易讓使用者混 淆！除了風格之外，必備功能也必須一致，我們都知道與手機板相比，網頁版的功能一定是最齊全的，但因市面上仍有許多網頁板與手機板為分開製作的網站，導致 在同步更新功能時，容易有兩方功能不一的錯誤發生。
（五）簡化選單
選單絕 對是最常被使用者拿來了解網站內容的指標功能！而為了節省空間，現今的響應式設計幾乎都將選單收進一個icon內（如果您網站的響應式設計連這點都沒有做 到…那麼您可能要認真考慮是否還要合作下去了…）。對於部分功能較複雜的網站，手機板可能會選擇性捨棄一些功能選項來顯示，進行簡化之餘再次提醒您，別忘 了站在使用者的角度思考什麼是他們真正需要的！
（六）善用圖標
人類處理影像元素的速度，是文字的6萬倍！所以在網頁上使用適量圖標的元素，不僅讓介面的豐富度提升，讓使用者在體驗上可以得到有趣的經驗之外，更能達到意想不到的快速理解體驗效率！
（七）方便點擊
如果您不是用手機板瀏覽此篇文章，請您先拿起的手機，必且回答我兩個問題：「您用單手操作還是雙手？手機在您哪隻手上？」
我想大部分的人都是「單手操作」、「右手拿手機」吧！就因如此，像是：將選單按鈕放置在右上方、點擊按鈕置中且拉長，提升單手操作的點擊便利性，都是我們提供給您的建議方針。
（八）容易閱讀
「還在放大檢視文字大小嗎？」這個問題其實還是很常發生在現今的網頁上…現在的人透過手機閱讀大量文字，「易讀性」決定使用者願不願意閱讀下去的決勝點！手機板的文字大小我們建議至少16px以上，另外適當的調整字距也是使用者體驗加分的小訣竅。
（九）合適影像
合適影像並沒有一定的標準，根據網站類型的不同會有不同的最佳呈現方式，若以作品導向的網站來說，讓使用者「看清楚」是您首要考慮的條件，所以千萬別讓您的客戶還要透過「放大」，才勉強搞懂那些作品。
怎麼樣才符合最佳的響應式網頁設計？其實這個問題沒有標準答案，因為根據產業或網站屬性不同，呈現的最佳條件也會有所差異。那又要怎麼調整到最佳的體驗效果呢？最快檢視的方式就是，現在拿起您的手機，把自己當作使用者來瀏覽您的網站，抓出任何您覺得不方便的所有地方！
參考文獻：
1.戴軒廷、馬恆、張紹勳 (2004), 衡量 網路廣告 態度之指標建構, 台灣管理學刊, 4(1), 59-84.
2.李青蓉等編著.(1998).人機介面設計，台北縣：空大。
3.邱柏清.(2004).網頁介面愉悅行之研究，國立台灣科技大學設計研究所碩士論文。
資料來源：icisco
留言列表
