青岛网站建设公司,青岛网站制作公司-奈薇建站网
建站咨询热线:0532-8878113113165158935 
知识普及 » 宽屏幕下的Web设计

宽屏幕下的Web设计

奈薇网页设计 2019-08-01 15:09发表
阅读次数 1348
  我倾向于在Web设计中尽可能在最优分辨率前后都给予浏览器宽度一定的自由度.往大去是为了在能改善体验的前提下充分利用大屏幕的用户的屏幕空间,往小去是考虑到有时候用户并不是把浏览器窗口最大化,或者不能占满整个屏幕.

  举个usecase,我工作的时候经常会两个窗口side-by-side,一个窗口是GoogleDocs,另外一个窗口呈现参考资料.如果是在咖啡馆里面干活那就只有笔记本一个屏幕,每个窗口700px宽,很多时候我就要不断地拖水平滚动条,非常悲剧.

  如果浏览器的窗口特别大或者特别小呢?我觉得可以不为这些极端情况做优化,但底线是不要让人觉得出错了,也算是给网站界面预留退路的一种吧.一般来说,我会给界面指定个最大宽度值和最小宽度值,这样宽度的变化不至于失控.像iGoogle在小屏幕下乱成这样,不应该:

  这些肯定都不是主流用户面对的场景,可设计师不就是应该追求完美么.这里有另外一个因素是自适应宽度页面的设计和开发工作量都要比固定宽度大,许多人大概还要考虑一下这个额外投入值不值的问题,例如我就把自己blog的宽度给写死了,反正没啥人上来看…

  Google的大部分产品界面都是自适应浏览器宽度的,产品不同,具体做法也会有不同.对于application性质的产品,界面框架一般都是自适应的,但为了保证里面文本的可读性,往往会对文本内容区域限制一个最大宽度,像GoogleReader这样:

  新版GoogleNews首页整个固定宽度居中,除了上面统一的导航条(我是觉得可以做得更有弹性一点):

  GoogleImagesSearch的结果页面没有什么文本可读性的问题,所以他们采取的解决方案是每行显示图片的数目随界面宽度变化而变化,内容区域总能填得满满的:

  PicasaWebAlbum的图片浏览界面右栏是固定的宽度,而左栏显示图片的区域是变化的.值得一提的是它还会根据窗口大小的不同,请求不同大小的照片大图,而不是把照片拿回来再缩放.可以随便点上面一个大图去看看.

  而我最近做的一个项目的要求是希望从大概200px到大概1000px都要呈现良好,鉴于这是一个导航性质的列表页面,最后采取了大致如下的布局方式:

  这些都是现在的解决方案,再超前一点呢?不大恰当地类比,大屏幕和小屏幕的关系就如同报纸和书本一样,媒介的面积大了,其实还有很多潜力可挖.两个例子,用户现在可以在GoogleBooksSearch的读书界面中设置成两页并排放,如果这个是自动做的呢?而CSS3中也引入了文本分栏,可以像报纸那样把文本分栏显示(参照yuhou.cn的实现效果).不是说分栏这样的解决方案一定好(搞不好要用户来回拖垂直滚动条就更麻烦了),但我们确实还可以开阔一下思路,想想如何能优化宽屏幕下的显示效果.

  实际上设计和用户行为也是相互影响的过程,手头的一份数据显示,目前来说屏幕越大,用户进行“最大化”浏览器窗口的操作越少,这也说明用户觉得宽屏幕下网页显示效果不佳.但如果越来越多的网站提升了宽屏幕下的体验,说不定也会有越来越多的用户也会选择在宽屏下“最大化”窗口呢.

  参考阅读:

  Fenng:UCDChina的设计是否土鳖?白鸦:网页用多宽才合适?西贝乔:拿数据说话千鸟:宽屏不是用来阅读的。

宽屏幕下的Web设计相关标签:网站申请网站建设方案网站搭建网站制作
相关热点推荐
什么是自助建站系统
如何进行网站首页改版
首页:如何发挥五大引导
网站推广、网站宣传的作
企业VI设计不可忽略的
深色调网页界面设计注意
网站建设前应该准备什么
网站文化与网页设计
什么样的网站才能实现效
SEO教程推荐--网站
怎样让网站友情链接交换
网站百度快照不更新的解
《设计师谈网页设计思维
如何让你的网站或是个人
关键词网页应该放到什么
引发思考的细节设计
什么样网站体验更好一些
现代企业需要建立网站吗
网站如何定位
网站推广方法--资源合
百度优化排名容易遇到的
网站推广技巧之搜索引擎
探讨运用seo技术做网
谈谈什么是成功的网站设
SEO基本技术及策略
SEO的历史
网页设计中的版式原理-
站长经验,建站经验
新手创建优秀网站的6个
企业建站流程及实用技巧
顶尖网络高手写的ale
网站突然被降权到底有什
网站设计八步骤
优秀站长必备思路下
百度《站点子链》工具开
网站建设合同签订需要注
赏析优秀专业网站学习网
网页制作者和网页设计师
网页设计灵感的起源地
WEB可用性测试的问题
奈薇建站网青岛网站建设公司/青岛网站制作公司,专业提供"气质"型网站建设及精美网站制作服务,同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展

热点地区:青岛网站建设价格 青岛即墨网站制作公司 开发区信息港 山东在线门户
  • 备案号
  • 鲁ICP备13010283号
建站咨询热线0532-88781131 15166683288 13963906391
版权所有© BangJianZhan.Com & Nev.Cn 青岛网站建设/网站制作公司
青岛雨后网络科技有限公司 - 青岛市市北区福州北路90号,景泰尚都6层
已经为您服务了
160个月 8