手机客户端交互设计原则及信息展现方式

标签: 产品交互 | 发表时间:2014-03-27 20:55 | 作者:admin
出处:http://www.techxue.com/forum.php

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

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

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

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

Striveforconsistency.力求一致Enablefrequentuserstouseshortcuts.允许频繁的使用快捷键Offerinformativefeedback.提供明确的反馈Designdialogtoyieldclosure.设计对话,告诉用户任务已完成Offersimpleerrorhandling.提供错误预防和简单的纠错能力Permiteasyreversalofactions.应该方便用户取消某个操作Supportinternallocusofcontrol.用户应掌握控制权Reduceshort-termmemoryload.减轻用户的记忆负担

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

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

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

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

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

一、摘要形式展示信息

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

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

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

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

而经过了优化的http://elya.cc/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://elya.cc/userexp/510.html

相关 [手机 客户端 交互设计] 推荐:

手机客户端交互设计原则及信息展现方式

- - 互联网分析沙龙
在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢.

客户端交互设计适配之——屏幕大小

- Estella - 所有文章 - UCD大社区
随着各个手机操作系统的应用平台的上线,几乎所有的互联网应用都在往手机上迁移. 然而手机与PC 不一样,PC经过了多年的发展,在设计上形成了很多不成文的规则,如网页的宽度都在960px左右【当然,由于整体的电脑屏幕往大尺寸及高分辨发展,除了背景宽屏自适应外,不少网页也正朝着更宽的方向上发展】. 当前的手机种类繁多,手机屏幕的大小、比例各异,并且手机的屏幕本身就小,因此既要考虑应用在不同屏幕大小上的适配,又要保持其一致性,同时还要提高每个手机屏幕的使用效率,这就存在着很多的矛盾点.

浅析手机语音交互设计

- Elic - 所有文章 - UCD大社区
语音识别技术,也被称为自动语音识别,其目标是将人类的语音中的词汇内容转换为计算机可读的输入,例如按键、二进制编码或者字符序列. 语音识别技术作为输入方式,比按键输入和手势输入更为快捷,学习成本很低,对于非特定人连续语音识别系统的识别率达到98.73%,已经达到实用要求,具有广阔的应用前景,在手机端的应用有语音拨号、语音输入、语音命令、语音搜索和语音翻译等.

2011交互设计体验日-用讲故事的方式来做手机产品交互设计

- leeking001 - 落花流水——elya妞╰_╯
2011中国交互设计体验日在北京举行,elya和Alex代表百度MUX出席并主持了“用讲故事的方式来做手机产品交互设计”的工作坊. A5 交互设计体验日-用讲故事的方式来做手机产品交互设计. 下载链接:http://www.slideshare.net/cyelya/a5-9374817/download.

触屏手机网站-炫版交互设计

- Qing - 所有文章 - UCD大社区
触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别.

用讲故事的方式来做手机产品交互设计

- Lamo - 互联网的那点事
随着移动互联网浪潮滚滚来袭,移动设备交互设计师是时代的弄潮儿. 你需要知道怎样为真正的目标用户做设计;需要知道真实用户的使用场景;需要知道怎样让你的产品变得用血有肉;需要知道怎样用讲故事的方式来做产品;需要知道怎样将讲故事的方法贯穿到设计循环中去,本次工作坊也是力求通过一些我们尝试过的方法,跟大家一起展开探讨.

智能电视交互设计与手机的五大不同点

- - 曉生
所谓智能电视,是指像智能手机一样,搭载了操作系统,可以由用户自行安装和卸载软件、游戏等第三方服务商提供的程序,开发商可以持续对系统功能进行扩充和升级的新电视产品. 继电脑、手机和平板之后,电视将成为非常重要的屏幕,各大公司纷纷推出智能电视机,那么智能电视与手机的交互设计有什么不同点呢. 传统电视机和机顶盒各有遥控器,几十个按键,而常用的按键不到十个,有些按键甚至从来没有使用过.

手机客户端UI设计之手机平台之争

- 瑾 - Taobao UED Team
    为了占领移动互联网的制高点,当前的几大IT巨头都以手机平台为基础展开争夺. 占领移动平台就是占领了用户的移动桌面,也就为自身的移动服务争取到了最佳位置.       微软公司推出windows phone 7, 曝光了windows 8;苹果公司也开了iOS 5的发布会;谷歌的Android 3.0的发布,Android 2.4 的若隐若现等等;大家都在努力提升平台体验.

手机客户端交互适配设计之我见

- Shell Wang - 互联网的那点事
简摘:本文从手机平台、机型(触屏和键盘)及屏幕大小三个方面简单的讨论了一下手机客户端的交互及适配特性及一些原则. 手机客户端软件虽只是手机中一个功能,但它却要比设计单款手机更为复杂. 在设计单款、单系列手机时,需要考虑这款手机的软、硬件优势及不足,考虑其特性、其UI Style Guideline ,确定这些内容后,整个平台的UI也找到基础了.