WonderCSS

2013年Web设计该怎样做!

年底是网站改版最密集的时候,初创公司或成长迅猛的网站尤其需要不断改进以满足用户的普遍需求。科技博客改版最具代表性,从成立之初几人的团队博客成长到具备一定规模的媒体平台,技术需要不断革新,设计体验需要不断完善,内容沉淀和更新数量上的增长,也需要重新考虑内容的整合方式。

2013-Web-Design-Trends

响应式设计(Responsive Web Design)将被全面采用

2013 之前,网站设计首要考虑的是屏幕分辨率的问题,大体会将网站分为电脑桌面版和手机 WAP 版本,使用不同的二级域名访问或者链接跳转,也有 WebApp 形式的移动版,存在的问题是电脑、手机访问的体验、可用性都存在巨大差异。

近两年移动设备飞速发展,在路上床上,茶余饭后使用手机或平板设备浏览资讯网站。与使用电脑浏览的频率基本一致,平板屏幕横屏和桌面电脑分辨率一致,竖屏却更接近手机分辨率的比例,这时响应式设计需求就体现出来了。现代的网站应同时、实时响应和兼容桌面、平板、手机的不同分辨率的排版。

从访问统计中可以看出,不同阶段移动设备型号有 1000~3000 种,屏幕分辨率大体分几种,但个别差异也很大。网站设计,特别是内容为主的网站,响应式设计能够很好满足最基本的阅读需求。MA,PD,TNW 最新改版都采用了响应式设计,Techmeme Leaderboard 前 100 家网站,有超过 10% 是响应式设计排版,我相信明年这个数字会有很大幅度增长。

AJAX无限流用户体验

很多社交媒体网站已经在网站中使用无限流效果,常见于控制面板,时间轴,以及用户信息区。此效果的发展得益于Twitter的流行和Tumblr独特的布局风格。而且,不久前Pinterest也在其主页采用了无限流。

设计师们可能会问,为什么这种方式如此有用?因为它提供了一种无缝界面,而且无需重新加载页面。但是,接下来用户很快会面临一个艰难的问题:很难区分每个页面。利弊都是存在的,这也给我们提示了很重要的一点:并不是所有网站都适合无限流。我认为,当页面需要加载信息而且这些信息不需要特定的页码区分时,无限流是非常有效的。

举个例子,在博客归档中使用就不是一个很好的选择,因为读者可能想直接去某个页面,例如第15页或者第25页,而不是多次滚动页面到达想去的地方。但在Tumblr和Pinterest中使用就无出其右了,因为在那里信息是动态的不断变化的。Twitter信息区第一页或者第二页显示的内容是随时间变化的,因此相比之下Ajax速度是显而易见的。没人想点击“下一页”来显示下一组信息。

HTML5 趋于标准并被大幅度采用

尽管 HTML5 还没有很完善的标准化,但不少特性能够大幅度提升用户浏览体验,科技博客以内容为主,技术上的尝试会更加前卫,现代浏览器性能和对 HTML5 特性的支持越来越完善,让网站表现更像一个 App,可以满足一些更加个性化的需求,而且会越来越多。

访问 PD 首页,脚本会在后台自动预加载文章列表内容,当你点击查看文章的时候,实际内容已经加载完毕,可以非常快的查看页面内容,包括图片,浏览体验有很大幅度提升;TNW 在切换文章的时候,同样可以达到接近实时的效果,同样是采用了 HTML5 技术; MA 使用了 HTML5 离线缓存增强浏览体验,使用 Infinite Scrolling 方式载入更多内容。

HTML5 语义化标签也开始被采用,目前语义化标签还不会被搜索引擎增加排名权值,但仍然可以让搜索引擎更好地识别内容。相关阅读:2013年关于 HTML5 令人期待的10项预测

使用推荐机制驱动信息流排序

这是一个信息爆炸的时代,各种信息如潮涌袭来,读者获取信息的方式也发生了巨大的改变,越来越多的读者通过微博、推送等快餐形式消费内容,RSS 订阅用户更多抱怨更新频繁、数量太多无法适从。

MA、PD、TNW 改版均开始将最新文章放到侧边栏,主体栏目采用编辑推荐、热门精选方式展现新文章,其中 MA 还首次采用了社会化分享驱动排序,推荐文章,热门文章由 Facebook、 Twitter ,Google Plus 等分享数据作为主要依据。

By 于湛 发布于 2013.04.26 1,396 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注