為何時至今日現在網頁還大多是留白,尤其是 16:9、16:10 的現在,大多數網頁在左右兩邊還是空出了大量的空間?
「留白」或者說「空出大量空間」是結果不是目的。
網頁設計充滿了對訪客解析度和瀏覽器的妥協。網頁設計的第一目標是可用,其次才是美觀。在高分屏暫時還不是主流、至少並沒有普及到可以令設計人員無視低分屏,以及非固定寬度設計如響應式或活動寬度開發成本高、難以維護調試、不易兼容舊瀏覽器的前提下,960px 這樣成熟的定寬格柵系統可以取得顯示效果和開發成本的平衡。
再者就算是響應式設計,也只有少數會設計成「有多寬佔多寬」的樣式(我比較熟悉的大概就這個:CSS-Tricks),大多數都是超過某個寬度之後橫向就不再拉長,然後變成題主所說的「左右空出大量空間」。這是因為響應式設計的首要目標是窄屏如手機平板而不是炫富一樣的超大屏幕,實現響應式設計也非常非常麻煩,除了不同寬度下的調試非常費力以外,要填滿特別寬的屏幕且規避 @金釗立 所說的「過寬的網頁會帶來視野、信息分散、長文本可讀性等太多問題」本身就需要相當的設計水平才行。- 不是所有人都全屏看網頁的
幾年前的調查就發現,1024px寬度的屏幕用戶一般會全屏看網頁,而1024以上的不會選擇全屏(Security Alert:),其他類似研究結果還有說800寬度是個分水嶺的。這些年來屏幕的尺寸/精度/成本控制 都越來越好的,全屏看網頁的用戶我認為只會降不會生
- 響應式布局的蔓延下,現在很多中小站點開始提供1200px寬的頁面了,對付一般瀏覽器的寬度很夠用了。而大型網站考慮到性能和維護,還普遍採用老的網格和布局,所以兩側留白的情況會相對明顯點
- 要說完全不留空隙,那就是流體布局了。不過流體布局的網站一直比較少大型網站的內容類型比較豐富,用流體布局的話很難全局都排的好看
- 網頁並不是可以加寬的,過寬的網頁會帶來視野、信息分散、長文本可讀性等太多問題
特地截圖怒答:解決寬屏網頁留白,firefox with tree style tab值得你擁有。敬請摺疊。
目前來說:響應式可以適應主流解析度,但是很重要的一點:網頁不是屏幕多寬,頁面就得設計的多寬,人的眼睛看頁面是有一定的寬度的限制的,超過這個寬度就會頻繁移動視線,分散注意力。在做這些之前都是可以通過眼動儀來測試的。
所以通常來說一段文字合適的寬度是:600px 左右。
解析度1024的用戶是你所稱的寬屏設計的最大殺手,就像ie6用戶是前端工程師的最大殺手一樣
是否留白與 16:9 或者 16:10 沒任何關係。因為這些網頁不是根據屏幕長寬比設計的,而是根據絕對像素值設計的。
他們做網頁就只留了那個寬度,無論你是 1920x1080 的 16:9 還是 1920x1200 的 16:10 還是 1920x1440 的 4:3,甚至是 1920x1920 的 1:1 ,那個留白都始終存在。。。留白只與你的顯示器寬度像素有關,與長寬比例沒有關係。
解決這個問題的最簡單辦法是全網頁縮放,絕大多數現代瀏覽器都支持的。只要網頁設計得合理,其全網頁縮放的效果必定非常完美。——知乎就是個典型的例子,全網頁縮放效果非常好,沒有任何瑕疵。- -那2條白邊是給你放QQ,旺旺用的。。。。。。。
因為做自適應網頁需要寫大量的代碼和無窮盡的測試(跨尺寸跨平台跨解析度跨各種各樣的瀏覽器)。做個當中一坨的網頁是最省錢和最省時間的。
參考閱讀:自適應網頁設計
自適應網頁設計(Responsive Web Design)舉個例子: Inzeit - Mobilizing Retail
這是個體驗不錯的自適應網站。我用手頭的設備都上了下,
22寸台火狐網頁10寸 ipad2 1024x768國產渣板htc渣機體驗非常完美,但是這背後是苦逼的碼農滿滿的辛酸的淚啊 !關鍵還是兼容多種設備和窗口大小工作量太大,部分網站是做到自適應了的,比如谷歌+和谷歌其他的Web
人能夠一眼看完的最大行寬決定了,不可能把全部的屏幕用完
我超喜歡留白 感覺兩邊滿了很2 可能也有我這類人的存在吧
額 照顧方屏用戶,做一個頁面 寬屏 方平 都能用 寬屏留白 哇噢 真省事
想了一會兒沒想明白什麼叫留白。。看了評論才反應過來,,原來指的是全屏看網頁,兩邊的留白。
我想不留白的原因是因為,屏幕這麼大的今天,應該很少人全屏看網頁了吧(個人猜測,無數據支持)?尤其是Mac用戶,已經沒有最大化這個按鈕了。全屏只適合沉浸式應用,顯然Browser這種跳來跳去的不屬於這一類。
另一個原因,如果不留白?難道要在上面加元素么?
那會讓用戶被滿屏幕的信息弄得不知所措,也增加了用戶瀏覽的難度,降低了用戶的注意力。簡單的來說,留白是現代設計的標誌之一。其目的是為了減少壓迫感,和突出設計者想讓用戶看到的東西。P.S. 特地開了一下全屏模式感受留白。。。推薦閱讀:
※前端學習路線圖?
※LinkedIn 的強點在哪裡,為什麼FLAG會並列 ?
※如何看待樂視414硬體免費日,對以後電視,手機行業有什麼影響?
※如何一句話概括一些編程技能?
※求大神告訴我,該怎麼追程序猿啊不尷尬~?