技術(shù)資訊
到底要設(shè)計(jì)多寬的網(wǎng)頁?
2009-04-07 09:42:00
白鴉等同學(xué),作為設(shè)計(jì)師,都在研究,到底多寬的屏幕適合于閱讀。研究來研究去,他們認(rèn)為,設(shè)計(jì)頁面的人,首先應(yīng)該考慮到,很多同學(xué)眼珠子沒這么寬,必須限定為650-800寬度。也就是說,太寬了,就費(fèi)眼睛,閱讀速度也慢了,易用性就降低了(當(dāng)然,這也是很多老外研究的結(jié)論,白鴉他們只是作為傳道者,給大家傳道而已)。還有,白鴉同學(xué)也說了,有1680或1920寬度的顯示器,在看網(wǎng)頁時(shí),最好不要全屏,這樣簡(jiǎn)直是自己折磨自己。
說起來都挺好聽的,自然也是很有科學(xué)道理。但,到底網(wǎng)頁要不要搞得限定寬度,讓人在寬屏?xí)r,閱讀只看到左側(cè)一半的寬度,扭著脖子看左側(cè)信息,而忽略甚至費(fèi)勁地再看右側(cè)的信息?最近的safari瀏覽器最受人詬病的就是上面的 tab的close button的設(shè)計(jì)。隔得太寬,每次都要費(fèi)勁用鼠標(biāo)點(diǎn)擊那小叉叉,簡(jiǎn)直是對(duì)人的折磨。
我也知道,更短的連續(xù)文字更適合于一目十行,但實(shí)際上,純文字閱讀并非網(wǎng)頁設(shè)計(jì)首先要考慮的問題。到底設(shè)計(jì)多寬屏幕,實(shí)際上是需要更多考慮的問題?,F(xiàn)在的瀏覽器多數(shù)都支持無級(jí)縮放,在用大屏幕的時(shí)候,可以繼續(xù)考慮滿屏設(shè)計(jì),只需要用瀏覽器的縮放,基本就能解決問題。放大兩倍后,650的像素所占位置大概是1300,離屏幕遠(yuǎn)一些,看起來也沒多費(fèi)勁。設(shè)計(jì)師的首要目標(biāo),一是可能要考慮前幾年適合不同瀏覽器自動(dòng)調(diào)節(jié)CSS的做法,另一個(gè)是要培養(yǎng)用戶使用無級(jí)縮放的習(xí)慣。
02年yahoo改版的時(shí)候,就在考慮800和未來的主流1024之間如何平衡的問題??紤]到瀏覽器字體縮放的技術(shù),滿屏也不是那么令人可憎。相反,不要過多地考慮留空白,滿屏后,起碼可以讓閱讀者更加自如地控制字體大小,閱讀的舒適度,交回給用戶。
否則,以設(shè)計(jì)師為主導(dǎo)的設(shè)計(jì)方法,免不了又要進(jìn)入新浪彈出窗口的悖論:新浪的習(xí)慣是彈出新窗口,結(jié)果新上網(wǎng)的用戶習(xí)慣了彈出新窗口。結(jié)果,不用彈出新窗口的,似乎就不符合標(biāo)準(zhǔn)。既然大家都喜歡彈出新窗口,_blank的應(yīng)用就無處不在。瀏覽器的tab的功能也成為衡量一個(gè)瀏覽器是否已用的標(biāo)準(zhǔn)。鼠標(biāo)中鍵點(diǎn)擊也成為標(biāo)準(zhǔn)。相反瀏覽器的標(biāo)準(zhǔn)后退按鈕和后退操作,反而慢慢失去了作用。
回到問題上來,到底要設(shè)計(jì)多寬的網(wǎng)頁?我的認(rèn)為是:全屏是最佳選擇。要努力的是瀏覽器的適應(yīng)能力,要改變的是用戶的瀏覽習(xí)慣。關(guān)于《UCDChina 的設(shè)計(jì)是否土鱉?》——拿數(shù)據(jù)說話)
====對(duì)于屏幕寬度的例子,以下幾個(gè)企業(yè)各自的選擇很有代表性===
滿屏的習(xí)慣代表,字體的無級(jí)縮放,使其更易讀,oracle基本也是寬屏到底。
結(jié)合滿屏和固定寬度的做法的代表。首頁固定寬度,防止頁面結(jié)構(gòu)錯(cuò)亂,內(nèi)部閱讀頁,滿屏。導(dǎo)航和相關(guān)鏈接,置于屏幕的左上和右上位置。類似的有ebay的做法,直到最終頁面,前面都是用表格來固定寬度,防止頁面錯(cuò)亂,最后產(chǎn)品頁則全屏。google最早偏向于全屏處理文字的展示,但最近卻也靠近折中做法,頁面搜索結(jié)果也限定寬度,其他地方全屏。但搜索結(jié)果頁搜索結(jié)果區(qū)域的固定寬度,是為了防止cache和類似網(wǎng)頁以及comment等幾個(gè)功能不要和要點(diǎn)擊的搜索結(jié)果拉得太開,不得已的設(shè)計(jì)。gmail和reader等,依然是全屏設(shè)計(jì)。
固定寬度的典型代表,在1024已經(jīng)成主流的1年時(shí)間里,IBM固定是800像素設(shè)計(jì)首頁。后來逐步改到適合1024屏幕的寬度。而且特別喜歡用表格區(qū)分。
sun,apple,和ibm基本也類似,都跟nngroup的jakob nielsen脫不了干系。但nielesn的很多的理論,也用于microsoft等折中的企業(yè)身上。沒有一個(gè)固定的說法。
作為內(nèi)容為主的閱讀型網(wǎng)站,我最喜歡nytimes和msnbc的設(shè)計(jì)。但有一些設(shè)計(jì)理論可能會(huì)覺得這兩個(gè)網(wǎng)站稍顯花哨。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2009-04-08 08:51:00] 寬屏顯示下的網(wǎng)站網(wǎng)頁寬度
- [2013-12-26 21:50:21] 寬屏網(wǎng)頁設(shè)計(jì)趨勢(shì)與分析
- [2009-04-07 08:22:00] 寬屏幕下的Web設(shè)計(jì)
- [2009-04-07 08:23:00] 寬屏不是用來閱讀的
- [2009-04-07 08:24:00] 讓閱讀更流暢
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
插畫 網(wǎng)站SEO 網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè) 青島抖音小程序開發(fā) 蘋果系統(tǒng) 高端網(wǎng)站設(shè)計(jì) 網(wǎng)站推廣 營銷型網(wǎng)站 中小型企業(yè)網(wǎng)站建設(shè) 輪胎網(wǎng)站設(shè)計(jì) 青島IT資訊 海信網(wǎng)絡(luò)科技 企業(yè)建站 舒適的界面 微信小程序 官網(wǎng)網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站建設(shè) 力圖數(shù)字科技 網(wǎng)站制作 微信營銷的優(yōu)勢(shì) 集團(tuán)性網(wǎng)站 色彩心理學(xué) 青島flash網(wǎng)站 青島高端網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站設(shè)計(jì) 視覺靈感 SEO優(yōu)化 微官網(wǎng)帶來的好處 青島網(wǎng)站優(yōu)化 交互設(shè)計(jì)