大螢幕下的網頁設計

來源:互聯網
上載者:User

我傾向於在 Web 設計中儘可能在最優解析度前後都給予瀏覽器寬度一定的自由度. 往大去是為了在能改善體驗的前提下充分利用大螢幕的使用者的螢幕空間, 往小去是考慮到有時候使用者並不是把瀏覽器視窗最大化, 或者不能佔滿整個螢幕.

舉個 use case, 我工作的時候經常會兩個視窗 side-by-side, 一個視窗是 Google Docs, 另外一個視窗呈現參考資料. 如果是在咖啡館裡面幹活那就只有筆記本一個螢幕, 每個視窗 700px 寬, 很多時候我就要不斷地拖水平捲軸, 非常悲劇.

如果瀏覽器的視窗特別大或者特別小呢? 我覺得可以不為這些極端情況做最佳化, 但底線是不要讓人覺得出錯了, 也算是給網站介面預留退路的一種吧. 一般來說, 我會給介面指定個 最大寬度值 和 最小寬度值 , 這樣寬度的變化不至於失控. 像 iGoogle 在小螢幕下亂成這樣, 不應該:

這些肯定都不是主流使用者面對的情境, 可設計師不就是應該追求完美麼. 這裡有另外一個因素是自適應寬度頁面的設計和開發工作量都要比固定寬度大, 許多人大概還要考慮一下這個額外投入值不值的問題, 例如我就把自己 blog 的寬度給寫死了, 反正沒啥人上來看…

Google 的大部分產品介面都是自適應瀏覽器寬度的, 產品不同, 具體做法也會有不同. 對於 application 性質的產品, 介面架構一般都是自適應的, 但為了保證裡面文本的可讀性, 往往會對常值內容地區限制一個最大寬度, 像 Google Reader 這樣:

新版 Google News 首頁整個固定寬度置中, 除了上面統一的導航條 (我是覺得可以做得更有彈性一點):



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。