手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式。

如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受。

如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点。

首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移动互联网的基本法则——

  1. Strive for consistency.力求一致
  2. Enable frequent users to use shortcuts.允许频繁的使用快捷键
  3. Offer informative feedback.提供明确的反馈
  4. Design dialog to yield closure.设计对话,告诉用户任务已完成
  5. Offer simple error handling.提供错误预防和简单的纠错能力
  6. Permit easy reversal of actions.应该方便用户取消某个操作
  7. Support internal locus of control.用户应掌握控制权
  8. Reduce short-term memory load.减轻用户的记忆负担

其次,针对手机上的交互设计原则,还有以下需要补充的一些点——

  1. 尽量减少操作的步骤
  2. 尽量利用点击来代替输入
  3. 时刻让用户知道自己所处的位置
  4. 与web保持一致且数据同步
  5. 为输入法让出空间

而对于手机上的信息展示方式而言,则是本文讨论的重点,也是从《Mobile Interaction Design》一书上受到了些启发。

手机上的信息展现,一方面要有利于你找到需要的信息,一方面要提供友好的方式阅读你需要的信息。为了在手机上有效的支持这两个任务,手机网站交互设计中的信息设计需要满足以下几条:

  1. 摘要形式展现信息
  2. 导航和提示处于明显的位置
  3. 减少滚动

一、摘要形式展示信息

因为手机上的信息展现和web上的信息展现都有一个共同的出发点——方便阅读。任何有助于用户迅速判断某条信息是否有价值的方式都可以借鉴,以防止用户花了大量的时间去阅读一些对他来说没有意义的内容。因为web可以展现很详细的信息,而手机上显示一篇稍微长点的文章就需要好几页,所以我们不能把一篇篇文章直接适配到手机版就可以了,而且需要提供一个新的方式,让用户可以总揽全局,一下子看到所有的文章,这就需要把信息缩略成摘要的形式,但是这也需要分情况考虑,比如以下几个例子——

1、对于新闻来说,需要显示标题

2、对于博客来说,需要显示标题+时间+评论

如果http://elyaaa.com 不经过适配直接加载到手机上,样式如上,体验很不好,即使是大屏幕的触屏手机也需要缩放+滚动操作才能看到全貌

而经过了优化的http://elyaaa.com/wap/index-wap2.php 却可以提供足够好的体验,以列表的形式展现信息,用户可以第一时间获知网站的概况,迅速找到有效信息进行浏览

3. 对于论坛来说,需要显示标题+作者+时间

人人网的日志展现形式,就接近于论坛的展现要求,显示了详细的标题、作者和发表时间。之后只需要一步操作就可以打开日志,快速的索引和良好的体验给该客户端增色不少。

4、对于微博来说,需要显示全部

新浪微博android客户端信息以摘要形式显示,单击或长按展开,显示详细信息,再单击弹出操作框。这样一方面增加操作步骤,给用户带来负担,另一方面需要一条条的去展开,影响流畅的阅读体验。

Twitter的android客户端Twidroid以全文方式显示Twitter信息,单击弹层选择操作。即简化了操作步骤,又有利于快速浏览。

Twitter的android客户端Twigee也是以全文方式显示Twitter信息,单击打开新页面选择操作。也是在简化操作步骤的同时提高了浏览体验。

二、导航和提示处于明显的位置

新浪微博android客户端提供了明确的提示信息和导航信息,但是缺点是这类新信息提醒最好是可以操作的

Android上的Twitter客户端TweeCaster提供了一个提示和导航集成到一起的解决方案,而且保证了可操作性,体验很好。

三、减少滚动

显而易见,用户在web上就很讨厌滚动操作,在手机上更是如此。但是我们面对的问题是,手机客户端需要把大量的信息整合到终端上展现给用户,势必造成一些不得不进行的滚动和翻页。为了减少垂直滚动,我们可以按照以下方式来布置内容——

1. 将一些导航功能(菜单栏等)固定的放在页面的顶端或底端

2. 将十分重要的信息放置在靠近顶部的位置

比较新浪微博wap版和腾讯微博wap可知道,腾讯做了更多的调研,他们把“刷新”这个操作放在第一权重的位置上,而新浪微博的刷新则要经过至少四步操作才能到达(非触屏版),即使是触屏版,这个“刷新”所在的位置也让它不利于点击。

3. 减少每一页的信息量,让内容更简练而不冗长

4. 重要的操作可以重复布置在页面的最底端

暂时只做一些手机客户端交互设计原则上的探讨,以后将陆续研究一些设计方法。

转载注明:来源于http://elyaaa.com/userexp/510.html

时间: 2024-11-01 10:23:01

手机网站交互设计中的信息设计的相关文章

信息设计的交流原则和信息设计中的图形设计

文章描述:信息设计中的图形设计原则. 在当今纷繁复杂的世界,设计形式也是百花齐放,什么设计才是最容易被用户接受,并且能很好的给用户带来他们需要的信息,这是值得我们探讨的.  信息设计的定义 信息设计顾名思义就是用于信息交流的设计,如果我们把"信息"这个词语拿出来单独来解释的话,首先"信息"这个词语由来已久,它是人类文明赖以发展的基础,可以说人类所有的知识和故事都是信息,通过信息的传递,人类的文明才得以进步和向前发展.现在人们接收的信息越来越多,所以我们可以根据规律来

谈产品设计中的策略设计

在动笔写这篇文章之前,对文章的标题我纠结了很久,本来想将题目写成<谈产品的策略设计>后来一想"产品策略"这个词包含的范围太广,还包括市场营销,品牌宣传等,而自己写的却仅限于互联网产品设计的这个范畴,所以最后决定还是写成<谈产品设计中的策略设计>更好一些.在 产品讨论会议中大家总是会发生激烈的争论,争论的方面有很多,可能是用户体验,也可能是产品功能,但仔细想想让大家争执最激烈,争执时间最久的恐怕就要属 产品策略方面的问题了.一个问题从不同的角度,或者是不同的思维的

UI设计中的包容性设计

近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道.虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难.于是乎,"包容性设计" 的概念就被引入到了UI设计中. 那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为"主流产品或服务的设计能为尽可能多的人群所方便使用--无需特别的适应或特殊的设计".当然

网页设计分析:UI设计中的包容性设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道.虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难.于是乎,"包容性设计"的概念就被引入到了UI设计中. 那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为"主流产品或服务的设计能为尽可能多的人群所方便使用-

网页设计中的按钮设计

在网页设计中,按钮设计是常被忽略却又相当重要的一个角色.在网页设计中,按钮与链接的功能类似,都是经过点击后到达另一页面或实现某种目的,不过二者还是有实际上的区别的. 按钮代表着"做某件事",即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的.并且绝大多数都是对表单的提交.从技术上讲,这类按钮的作用是向后台提交了数据,"命令"服务器去做了一件事.而链接则是带你去另一个页面,从功能属性上而言,它是看,而非是做. 按钮和链接的另一区别就是它的眼球效应.因此

从四个方面讲述微博在信息共享中的信息设计

文章描述:信息的流动越来越快,信息的获取也越来越容易,在微博,明星能更快的成名,商人能更快的挣钱,品牌能更好的建立,我们要怎么设计才能应对未来的高速发展呢,在这里愿意与大家共同思考共同讨论~ 如今的社会早已是信息社会,能快速高效的获取信息,成为了竞争力的核心,早已在十几年前,互联网的普及就已经加速了信息的流动,大家获取信息的方式也逐渐转向更高效的互联网,而现在,微博时代的来临,又给大家带来了什么样的信息呢? 记得某位互联网巨头说过,用户对互联网的四大需求是:信息共享.通讯.娱乐互动.电子商务,其

互联网社区产品设计中的关系设计问题总结

众所周知,"关系"的设计是社区产品中相当重要的一个环节,在设计关系的时候需要考虑到关系的成本,信息与关系的走向.关系的后续衍生产品和辅助功能等,不同类型的社区有着不同量级的关系设计,如果最初的架子没有搭建好,就会给后期的运营带来很大的麻烦.在此,将之前产品设计中领悟到的一些关于关系设计的问题总结整理,供大家参考. 1.谁与谁发生关系? 在社区产品,或者包含社区产品的大网站中,关系一般可以分为两个大的类型,: (1).用户与用户之间的关系 (2).用户与内容之间的关系(包含用户产生的内容

谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

让我们谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"