Responsive Web Design (RWD) 一般翻譯成「響應式網站設計」,指的是網站在不同裝置上,隨裝置螢幕視窗寬窄的不同改變網頁的佈局,目的是減少使用者縮放、平移和捲動等操作行為。
RWD 除了提供使用者友善的網站環境,對網站設計師與前端工程師而言,這種技術因不再需要區分不同裝置的設計,使得後台維護變得容易,隨各式裝置的湧現,RWD已成為網站開發的趨勢。
最能夠完美解釋 RWD 的金句就是 “Content is like water.”(內容就像水,當水進到不同容器時,會隨著容器的形狀而改變,而 RWD 則是讓內容能隨著裝置做出調整。因此,製作 RWD 的技術也稱為 「液態排版 (Liquid Layout)」。
這次杏仁餅乾小編整理了 10 rules of best practice for responsive design 裡的要訣,再和大家分享兩個專門收錄 RWD 的網站!
1. 伸縮自如的設計:大小兼顧
當你需要設計一個網頁的介面時,你應該要 「先思考它在移動裝置上的呈現方式」:先將網頁的所有內容劃分成不同區塊,並依重要性做排序,再將它們按照順序安排到尺寸最小的介面上。換句話說,最小的介面保留的是最核心的設計。
當你從最小的介面佈局到最大的介面時(如平板或桌面),再一步步為你的設計加上一些次要的元素(如下圖所示)。
儘管手機介面的優化具有相當高的重要性,也不代表你應該忽略寬視窗上的介面,並記得市面上不斷有新的裝置被推出,趨勢與使用者的習慣皆會改變,當心顧此失彼!
2. 思考情境脈絡:有捨有得
RWD 網站不只是把同一個內容塞進不同的介面大小而已。在視窗變化的過程中,別忘了網站內容在不同介面上實際的呈現,例如:你的文章有可能會因為區塊的變動而出現上下文不連貫的情形。當內容改變時,網站的佈局方式也必須隨之調整
從多欄位的寬視窗轉變至單欄位的窄視窗是 RWD 典型的特徵,而當空間有限時,你必須減少非至關重要的內容。
就像在大掃除一樣,如果你還在思考你是否會需要某個物品,代表你可以將它先放入丟棄堆裡了;在響應式設計裡,若你仍試圖找到理由來說明為何你需要某個元素,那麼你可以考慮移除這個元素。
專注於真正重要的內容與功能,積極地減少無關緊要的元素吧!
3. 網站優化
掌握前兩點核心後,該如何讓網站更優質呢?
3.1 圖片品質 v.s. 網頁下載速度
隨網站設計趨勢走向巨大的、螢幕延伸的圖像 ,高畫質的影像是抓住使用者目光的重要方式,卻也影響了網頁下載的速度。設計師必須在豐富的視覺效果與整體頁面呈現間找到平衡。
再次強調,積極地移除不必要的元素,優化保留下來的圖像。
3.2 善用 icons
以適當的 icons 取代冗長的文字,用在螢幕空間有限的裝置上尤其有幫助。
而 icon 通常以 SVG 的檔案格式上傳,此種可縮放向量圖形(Scalable Vector Graphics)在放大縮小的過程中皆不會失真,且檔案大小也不因圖像大小而改變,是 RWD 的好選擇。
3.3 留意字體大小
在字體安排上,你必須確認你的設計讓網站在大、中、小裝置上,皆能維持想營造的整體感覺。
例如細體字在文字夠大時,能夠清楚地閱讀,但縮小時卻可能不夠清晰,如此會降低網站的易讀性。在必須使用細體字時,請確認文字在最小尺寸時,仍能容易地閱讀,若否,則可考慮更換別種適當的字體。
3.4 考慮輸入方式
不同裝置的使用者操作網站方式差異,如桌機或筆電使用者利用滑鼠與鍵盤操作網站,手機、平板使用者則是以手指來點擊輸入,因此按鈕或表格的設計上必須注意使用者是否能順利、有效地點擊。
最後,別忘了在各種大小的裝置上,實際測試你的 RWD !
現在來為大家介紹兩個蒐集 RWD 的網站:
RWD JP 專門蒐集日本優秀的響應式網站,每日會更新 2–3 個網站(但有時也會休息一下 😉)一起來看看吧!
- 進到首頁馬上就能看見許多 RWD 在不同視窗大小上的呈現,你可以點擊圖片進入網站,實際拖拉視窗,體驗一下這些 RWD 的精湛之處!
2. 可以從不同的分類(種類、顏色、網頁技術、風格)找你想看的網站
- Media Queries 蒐集了歐美的 RWD 網站,除了英文外,還有義大利、德國、法國,甚至芬蘭、捷克的網站,讓你有機會一虧異國的設計。
2. 雖然不像 RWD JP 有分類瀏覽的功能,但可以選擇「受歡迎程度」來排列順序,看看哪些設計最令人喜愛吧!
以上就是杏仁餅乾小編的筆記啦!