以屏幕大小設計網頁

網頁嘅版面設計同雜誌設計完全唔同,尤其是自從手機嘅細屏幕都可以用黎睇網頁之後,以 responsive design 制作嘅 web,4″ 至 27″ 以上嘅屏幕都係睇同一頁;就算 mobile app 大部份都因為屏幕大細唔同而分同 phone app 同 pad app 兩種。Web 嘅 layout design 其實應該以類似 OS 嘅 UI design 去看待,同樣具 multi-resolution 嘅適應力。由 Windows 8 嘅 Modern UI 因為完全脫離 Windows 7 嘅傳統 desktop 介面設計而受到極大回應引證,尊重一般人嘅使用慣性係 user-friendliness 嘅重點。不論屏幕大小,用 desktop 還是用 mobile device,mouse click 或者 touch screen,觀感都應該有一致性,而操控應該直覺法,令人唔需要從新學習先為之好嘅設計。

 

display-actual-scale

 

Printing design 會刻意避免 paragraph column 做得太闊而影響可讀性,而網頁因為只會單方向上下 scroll ,唔適合好似雜誌咁一大段分幾個 columns,所以文章都會以 single column 排版;因為用唔盡版面嘅闊度所以通常有 sidebar。而 sidebar 嘅內容係頁頁都經常出現,但search engine 會視為比較次要嘅資訊,適合放聯絡資訊或者廣告之類。如果喺 desktop 以 FullHD 1920px 嘅闊度,個版面加埋 sidebar 都會覺得仲有好多空位,但因為想同細屏幕嘅觀感保持一致 ,所以最佳嘅方法係加個 background pattern 或者 wallpaper。

 

destop-pad-responsive-design

 

現時大部份 mobile device 都用 160 ppi 做標準,同雜誌印刷嘅 dpi 密度差唔多,大約係 27″ FullHD mon 嘅兩倍密度。一個 5.5″ mon 手机打橫用時,等於 ipad mini 打直時嘅闊度,上網時會有 device-width 768px。版面主流設計會將 image 同 video 之類嘅闊度按比例縮到同 paragraph column 一樣闊;比較做得好嘅 responsive design 會善用 sidebar 嘅移位改變 paragraph column 嘅闊度,令 mobile device 喺打橫時睇相比較好,打直方便睇文字。

 

phone-phablet-tablet-responsive-layout

 

因為要考慮 multi-resolution 嘅問題, web layout design 已經變得技術性,跟隨 best practice 同大路化多於創新。 除左主頁依類 landing page 嘅 layout 可以有多啲變化之外,其他以資訊為主嘅內頁都應該以可讀性為上,將 graphic design 嘅創新意念專注係 content 裏面嘅 image 甚至 video 等。

 

Reference:


Related posts: