开发移动版网页的技巧:一个案例

标签: 业界趋势/Trend 前缀分类 心得体会/Tips 范物闲谈/Talk 观点 | 发表时间:2011-03-31 04:00 | 作者:积木 没剑
出处:http://www.ifanr.com

在智能手机日益普遍的今天,网页设计必须考虑到小屏幕智能手机的要求。专门开发手机应用自然是一个不错的方案,但是毕竟耗费精力,况且还需要针对不同设备进行开发和维护。

开发移动版网页是另一个不错的选择。这件事情看起来简单,却也有许多细节和门道。Useit 网站最近的一篇文章对手机版网页设计的探讨值得参考。

这篇文章以报道韩国流行明星资讯的网站 allkpop.com 为例。Allkpop 的手机版网页是这样的:

allkpop-live-site

AllKpop 做对了好几件事情

一是内容,Useit 的调查认为手机上的杀手级应用是消耗时间(这个可以探讨)

二是专门的移动版网页,即使有 Opera 这样的浏览器能够为手机优化网页,也不如专门的移动版网页体验更好。

三是自动探测,服务器自动探测用户设备,提供特定页面,而不是为移动网页设置单独的地址。

四是信息可点击区域比较大。

五是标题中关键字在前端,因为标题比较长,这样做能突出重点。

那么,这个网页设计有没有问题呢?以我一个外行人的眼光看,也能发现一些小问题。首先是对空间的利用不好,日期挤占了大部分空间而且是重复出现;其次就是标题下面的分类和标签,字很小,而且对读者意义不大。

我们看看 Useit 对网页是如何进行重新设计的。

allkpop-redesigned

首先突出的一点是图片,读图比读文字更直观,尤其是对于一个报道明星新闻的网站。其次是信息量加大:删除了无用的分类和标签,以关键语句为读者展现文章要点,浏览更高效。

Useit 对网页做出的其它改进还包括:

更大的触控空间:原来的文章区块可触控部分比较多,比如标题右上角的下拉三角,触控范围较小,可用性低。改进后整个文章色块都是触控区域,更加适合手持设备。

文章区块间的距离更紧凑:读者无需下拉也能完整浏览最底部文章区块。

完整标题:这样能够展现更多信息以供读者选择。

突出内容:标题中每个明星的姓名都加重突出。

日期做为分界线:节省屏幕空间,更有条理的展示内容。

改进顶部导航栏:原来的导航栏中,分类和搜索都在右上角,容易误触,改进后的页面里分类与搜索拉开了距离,而且分类加上了文字描述,更易发现。

移动设备由于屏幕较小,对于设计的要求往往更高,所谓细微之处见技巧,这个案例足以证明。

设计上的受限越多,你越需要改进用户界面,以提供最优的可用性。移动设备是一个极为受限的设计问题。

Via Useit


© 积木 for 爱范儿: 拇指资讯小众讨论, 2011. | Permalink | 22 comments | Add to del.icio.us
Post tags: ,

相关 [开发 移动 网页] 推荐:

开发移动版网页的技巧:一个案例

- 没剑 - 爱范儿 · Beats of Bits
在智能手机日益普遍的今天,网页设计必须考虑到小屏幕智能手机的要求. 专门开发手机应用自然是一个不错的方案,但是毕竟耗费精力,况且还需要针对不同设备进行开发和维护. 开发移动版网页是另一个不错的选择. 这件事情看起来简单,却也有许多细节和门道. Useit 网站最近的一篇文章对手机版网页设计的探讨值得参考.

给力!LibreOffice也将开发网页版以及移动版

- 欧剃 - 文章栏目
LibreOffice官方宣布将尝试开发网页版、Android版、ios版的办公程序,预计会在明年底或后年发布这些产品. 网页版的LibreOffice将使用GTK+框架,用HTML5来写界面.

AdMob 停止为移动网页提供广告,Google 让开发者使用 AdSense

- pestwave - 36氪
Google在博客中宣布,他们将停止 AdMob 对移动网页的支持,让内容发布商使用 AdSense 投放广告. 对于传统的 Wap 网页,支持截止时间是 9 月 30 号,对于高端 iPhone 或 Android,这个时间会延长一些. Google 在 2009 年以 7.5 亿美元的价格收购了 AdMob,希望扩大自己在移动领域(包括移动网页和移动应用)的广告赢利能力,之后由于战略调整和功能冗余,AdMob 的某些功能直接被砍掉了.

移动开发那些事

- - 微博UDC
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发. 但从这两种开发模式的特点来说,从它们诞生之日起就开始了不断的争论,孰好孰坏,本文不作探讨,只是简单罗列下本人开发遇到的问题和最终的解决方案.

移动开发之总结

- - SegmentFault 最新的文章
1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影. 备注:transparent的属性值在android下无效. 2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影.

Chrome网页应用开发教程

- tiger - 互联网的那点事
发布时间:2011年2月1日. 发布源:How-Tos(OhBoard). 我花了10天时间开发了OhBorad,这个小巧的白板应用. 12月12日,我萌生了想法,12月22日我赚到了第一笔钱3.99美金. 所以在这里和大家分享一下这个开发指南. 如果你打算自己做Chrome网页应用,那么你可幸运了.

iPad网页开发教程及规则

- - CSDN博客Web前端推荐文章
在iPad上使用Safari浏览普通网站网页的时候,网页因为太大而导致需要手动放大缩小或者滑动,虽然这种滑动行为在iPad上市之初的各种宣传中被津津乐道,但时间久了我们还是会发现这样做并不方便,给用户带来的感受并不十分好. 不支持Flash在没有越狱的iPad Safari中,网站的Flash都是无法显示的,但可以通过第三方软件或插件或者浏览器来解决,不过,即使不能显示Flash,你一样能够用HTML5和CSS3实现同样的效果.

中文字体网页开发指南

- - 阮一峰的网络日志
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比 英文字体,中文字体的网页开发有着极大的局限性. 因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体. (*注:确实有 网站提供中文字体的web服务,从技术角度,我认为这样做不可取.

2011 移动平台开发现状

- 山河之外 - 互联网的那点事...
Visionmobile 根据“2011 开发者经济调查报告”(点击这里下载该报告)中的数据制作了一幅信息图,使我们可以一览手机各平台的开发现状. 这幅信息图关注的的手机平台有 Android,黑莓,iOS(iPhone),Java ME,Mobile web,Symbian,Windows Phone.