开发移动版网页的技巧:一个案例
创始人
2024-07-24 18:50:52
0

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

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

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

开发移动版网页的技巧

AllKpop 做对了好几件事情

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

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

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

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

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

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

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

开发移动版网页的技巧

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

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

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

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

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

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

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

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

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

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

原文链接:http://www.ifanr.com/37519

【编辑推荐】

  1. 网页设计师晋阶必知的十个小窍门
  2. 网页设计的80/20规则 你可知道?
  3. 中国的网页设计为什么这么烂?
  4. iOS、Android都是浮云 Web才是王道
  5. Web开发者不能忽略的10个设计元素

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...