[學習筆記] RWD網頁設計03 — 以 UI設計角度切入響應式設計該注意的細節

在設計網頁時我們應該注意哪些東西呢? 網頁瀏覽的動線設計? 使用者體驗? 點擊範圍大小?

動線設計：並非所有內容都要全部塞到網頁裡面

以 PC 來說，因為解析度較高，我們通常可以顯示較多的資訊，使用者的動線可能是從列表選單到內容、廣告、表尾等等，但為了良好的 使用者體驗，正常來說我們在行動版，會捨去一些較不必要的內容 ( 像是廣告 )，使用者可以在有限的畫面中，較快得到所想讀取的內容。

何謂良好的斷點時機?

常見的方式就是透過＂文字行數＂的多寡來判斷。

一行文字的字數若太多，會造成行寬太寬，人的肉眼需要左右來回移動，其實是不好閱讀的，因此一行的字數太多或太少都不好，因此欄數減少的需求，像是三欄式變兩欄式、單欄式設計，就可以透過當下的每行文字多寡來判斷是否該下斷點。

補充說明：中文內文單行字元 30～40 會比較好閱讀，英文則是 32～80 個字元數。（詳細規範可參考於此 )

良好的行數設計，人類肉眼最舒適的閱讀範圍 ( 示意圖 )

點擊範圍：設計讓人好點選的元素

研究指出，人的手指觸控點擊範圍差不多是 40px，因此，以行動版來說，在我們點選一個欄位 ( 選項或連結 ) 時，高度至少要滿足 44px 以上，使用者比較不會有誤點的情形發生，比較好選擇。

少即是多：避免資訊量爆炸

PC 版解析度較大，通常會顯示較完整的資訊給使用者，但在行動版解析度有限的情況之下，我們可以捨取相對不重要的一些資訊，留下重要的給使用者判斷，而這些清楚的資訊就足以協助使用者決定是否進一步閱讀更詳細的內容。

PC 版的資訊量過多，可適時地在手機版刪除部分較不重要的訊息，對於使用者閱讀體驗也會比較好，像是上圖手機版只顯示縮圖和標題 ( 以新聞網為例 )

載具的特性：touch vs. hover

以列表來舉例，在電腦版我們滑鼠滑過 ( hover ) 列表時，會出現下拉式選單，但在行動版是選單被點選 ( touch ) 之後，才呈現出下拉式選單，手機版則不會出現 hover 的設計。

只有特定斷點才會出現的元素與 Layout 切換，舉例 : 漢堡樣式選單只會出現在行動版

漢堡選單按鈕式意圖。左圖為電腦版，右圖為手機版

以上圖來說，在電腦版的情況，若是使用者需要點選漢堡選單按鈕，才可以看到選單內容，相對來說對於使用者體驗不是那麼的好，因為上方的橫幅其實有足夠的空間來顯示選單的內容。

電腦版的 CSS 設定，隱藏漢堡選單按鈕，選單內容水平排列呈現。

但手機版在解析度有限的情況下，通常我們傾向於隱藏選單內容，在點選了選單按鈕後才會展開，以垂直排列呈現。

手機版的 CSS 設定，選單內容預設為隱藏，在點選漢堡選單按鈕後才會展開，並且垂直排列。

總結來說，在設計網頁的時候，必須考慮在不同裝置解析度不同的情況下，有不同的版型規劃和內容取捨，才提供給使用者最佳的網頁呈現和使用者體驗。

如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)