手机站点和桌面站点设计的10个区别

简介: 桌面网站的一些设计原则是大家广泛认可,并积极付诸实践的。例如:系统状态保持可见,避免错误信息,在错误发生时,应该提供一些具体的指南帮助用户解决这些问题等。 很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。

桌面网站的一些设计原则是大家广泛认可,并积极付诸实践的。例如:系统状态保持可见,避免错误信息,在错误发生时,应该提供一些具体的指南帮助用户解决这些问题等。

很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。毕竟,网页设计是从一些基础的,基于文本的HTML出发,才发展成为今天的WEB标准的。因此,我们也可以想象依靠这些原则,手机站点的设计也会和网页站点的设计一样,获得巨大的成功。

然而,移动站点的设计仍处于初步阶段。Jakob Nielsen在2009年移动可用性调查时指出,相比与网页站点80%的成功率,用户使用移动设备查看移动站点时平均成功率只有64%, 形式要素的差 异对用户交互成功率的影响是巨大的,因此,在进行移动站点的设计时要充分考虑移动设备的形式要素,

随着手机站点设计的持续增长,一些新的原则,以及一些好的设计实践将会浮出水面。作为前进的第一步,本人通过分析一些成功的手机站点来研究两者的不同。在我的研究中,涵盖了航空,电子商务,社交网站,娱乐等一些较成功的站点,并得出了至少10个区别。

1. 内容优先

桌面站点可以有1024*768的分辨率,而智能机仅有320*480分辨率,如何在如此小的分辨率中,在不降低用户体验效果前提下进行设计是很有 挑战性的。桌面站点常常包涵更广的内容,而移动站点仅包涵一些符合使用情境的主要功能和特征,如图1、图2所示Orbitz的桌面站点和移动站点。移动站 点应该通过移动设备将用户最需要的内容和特征展现给用户。一些站点内容,信息架构和屏幕布局都是在深度理解客户需求的前提下设计的。

 

1—Orbitz桌面站点特征

 

2—Orbitz移动站点特征

 

2. 垂直浏览取代水平浏览

如图三Urban Outfitters站点所示的那样,在呈现数据结构和数据内容时,水平导航是一种广泛采用的导航方式。用户可以从左到右,点击不同的站点链接来浏览。Joshua Porter在一篇名为“The Challenge of Moving to Horizontal Navigation“的 博客中,讨论了在页面顶端而不是页面两侧使用水平导航的好处。至于顶端时,用户可以更容易聚焦于页面的内容,而在两侧时,会很容易干扰用户视线。在我的研 究中,90%的移动站点采用垂直导航的方式取代水平导航,包括如下图所示的Urban Outfitters移动站点。

3—Urban Outfitters桌面站点中的水平导航

 

4—Urban Outfitters移动站点的垂直导航

 

3. 导航条,标签和超文本

如图5所示,超链接是因特网站点的主要组成部分,然而,在移动站点中,我们则很少看到超链接。并不是在移动站点中没有超链接,而是被一些导航条,标签和按钮等取代了,如图6所示。用户使用手指来操作移动设备是产生垂直导航方式的原因之一。

在电脑上,移动鼠标,点击超链接是很理想的查看信息的方式,但是在移动设备中,通过手指触摸屏幕来打开超链接就不那么容易了。用户可以很容易激活一 个链接,进入一个新页面,但,这并不是用户期望的页面,如果这样的话,会产生非常差的体验效果。Fitts定律告诉我们使用指点设备达到一个目标的时间与 设备当前的位置和目标位置的距离,以及目标的大小有移动的关系。在一些大的手机站点中,导航条,标签和按钮会吸引更多的注意力。

5—Kayak 网页链接

6—Kayak 手机页,没有链接

4.  Text and Graphics文本和图形

在网页中,我们经常会看到一些促销,营销或者导航的图形信息。如图7所示的dell站点,设计者经常需要设计一些促销或营销的图形,如图8所示、公 司LOGO始终保持着导航的目标,通过它,用户可以进入主页。而在移动站点设计中,应该减少这些图形,原因有二:其一,一些移动设备并不支持和传统网页站 点一样显示方式;其二,移动屏幕较小,显示内容有限,除此之外,过多的显示内容会降低移动设计的运行速度。

7—Dell首页,有图形

8—Dell 移动页,只有较少的图形

5. 全局导航与情境导航

桌面站点提出使用多种导航方式,如图9 Best Buy 站点。一些全局性的导航可以保持站点的一致性,而其他一些情境导航会随着用户使用站点的不同而不同。在移动站点中,全局导航是最常见的导航方式,如图10 Best buy的移动站点就是非常典型的例子。

在移动站点中,移动设备有限的屏幕决定了应该减少全局导航和情境导航。然而,缺少全局导航和情境导航则会让用户迷失,为此,在构建移动内容时,应该尽量减少层级关系,这样,用户无需挖得太深就可以找到自己所需的信息,作为设计师,应该让用户在迷失之前找到自己的信息。

9—在Best Buy桌面站点中各式各样的情境导航

10—在Best Buy 移动站点中,没有情境导航

6. 页脚

在桌面站点设计中,有两种典型的页脚,第一种页脚提供了一些内容的连接,用户可以查看主页,或其他一些较低优先级的内容,如“人才招聘”和“站点地图第二种脚注,则提供了用户想看的所有内容结构,如图11所示,在页脚中列出一些快速入口,用户就可以纵观整个站点。在移动站点中,通过页脚,用户可以查看首页,但尽量保持最少连接数,如图12所示,在页脚中,不包含全部快速链接。

11—Dell 桌面站点的页脚

 

12—Dell 移动站点,较少的页脚

7. 面包屑

如图13所示,在桌 面站点中,面包屑导航可以有效地标明用户所在的位置,查看自己的导航路径,但通常会让用户产生站点内容多,层级关系深的感觉。面包屑导航方式很少出现在移 动站点中,通常也是没有必要的。有限的空间结构是原因之一,另外,这种方式使得用户需要经过很深的途径才能找到所需要的信息。同样,我们应该让用户在有迷 失感之前获取想要的信息。

13—Amazon移动站点的面包屑

8. 进度条

在桌面站点中,如果用户需要通过多种步骤才能完成某一过程,如购买过程或者填写较长注册表过程,如表14所示, 在页面的顶端经常会给出一个进度条,指导用户完成这个过程,这种进度条在移动站点中还没有出现。

采用一些替代的方法,让用户无需进度条,就可以表明当前所在的位置。如,不使用一些暗含用户操作“下一步”或“继续”的按钮,使用明确的标签按钮,告知用户的下一个步骤,如“前往收银台”“指定送货及付款”。这样,用户不仅知道当前的过程,还期待下一步的信息。

14—Amazon 站点的进度条

9. 集成手机功能

智能机是通信设备,打电话是其基本功能。尽管移动平台的设计和内容都是有限的,但仍具有一些桌面平台无法比拟的新机会,例如,可以使用直接拨打电话 或短信的方式订购物品,如图15所示,将促销短信与产品功能进行整合,用户只需选择一个手机号码,然后通过这个号码来打电话或发短信,无需输入数字。

15— Best Buy 移动站点,电话购物

10. 本地化和个性化搜索

基于地理位置的服务是移动站点独一无二的优势。仅在5年前,地理位置服务才和消费市场结合起来,现在,在一些移动程序和网页站点中,地理位置服务作为增值服务的一部分而广泛使用。

很多移动设备可以自动检测用户的地点,并给出一些本地化的检索结果。如图16,Best Buy本地商店搜索功能,Yelp的餐厅搜索,Kayak的班机搜索,通过了解用户的交易地点以及一些临时服务,商家就可以有针对性地推广自己的产品或服务。

16—在Kayak中,自动监测地理位置并给出一些检索建议

小结

基于我们的研究,我们总结了移动站点和桌面站点设计10大不同点:

  1. 桌面站点可以包含更丰富的信息,而移动站点包含一些在大部分时间,地点中使用的典型功能和特征。
  2. 桌面站点采用顶端的水平导航方式来呈现站点结构和内容,而90%的移动站点采用垂直导航的方式。
  3. 桌面站点通常使用超链接,移动站点极少使用超链接
  4. 桌面站点会根据促销,营销,导航目的的不同设计不同的图形,移动站点应避免一些促销或营销的图形,较少使用导航图形。
  5. 在桌面站点中,可以使用各种各样的导航方式,如全局导航和情境导航。移动站点采用全局导航,情境导航极少。
  6. 在桌面站点中,用户可以通过页脚查看站点内容,或查看一些快速链接。移动站点较少采用一些页脚,更不会使用页脚来包含一些快速链接。
  7. 在桌面站点中,面包屑导航可以帮助用户找到需要的页面,或者返回查看一些导航路径。而在移动站点设计中,由于自身的一些平台结构的限制,面包屑导航的方式是没有必要的。
  8. 桌面站点通常在页面顶端增加进度条来引导用户完成某项进程。移动站点并不出现进度条。
  9. 移动站点可以更好地整合手机功能,如电话直接订货或发送促销信息。
  10. 移动站点可以使用一些技术手段自动检测获取本地搜索结果。根据用户的一些喜好提供个性化的搜索结果,对用户来说更加重要

 

原文地址:http://www.iptu.net/index.php/archives/3059.iptu

目录
相关文章
|
2月前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
34 0
|
6月前
|
JSON 缓存 移动开发
原创自研uniapp+vue3手机桌面os管理系统
vue3-uniapp-os一款基于uniapp+vue3跨端手机版后台os系统新解决方案。
290 3
|
7月前
|
网络协议 数据安全/隐私保护 网络架构
如何在家中使用手机或电脑远程控制公司iStoreOS软路由下的电脑桌面
如何在家中使用手机或电脑远程控制公司iStoreOS软路由下的电脑桌面
168 4
|
7月前
|
传感器 人工智能 监控
Java智慧工地管理云平台源码 带AI识别、桌面管理+大屏指挥+手机APP
智慧工地平台支持项目级、公司级、集团级多级权限划分,可根据企业的组织架构进行项目权限、功能权限、数据权限设定。
161 0
|
7月前
uni-app实现左右滑动菜单,模拟小米手机桌面菜单应用
uni-app实现左右滑动菜单,模拟小米手机桌面菜单应用
|
5G 网络架构
信号 ,手机信号和wifi信号区别,2.4GHz和5GHz,遥控器的种类有哪些
信号 ,手机信号和wifi信号区别,2.4GHz和5GHz,遥控器的种类有哪些
680 1
信号 ,手机信号和wifi信号区别,2.4GHz和5GHz,遥控器的种类有哪些
|
iOS开发
手机桌面应用图标和APP启动画面全尺寸
手机桌面应用图标和APP启动画面全尺寸
手机桌面应用图标和APP启动画面全尺寸
|
Android开发
安卓手机如何在桌面上添加敬业签提醒便签?
敬业签云便签是一款专为上班族设计的多端云同步的桌面提醒便签,安卓手机上可安装手机版Android端免费使用。 敬业签pc软件直接在电脑桌面上编辑显示待办日程,在其手机版上,也可将待办事项添加到手机桌面。
1964 0
|
Android开发 iOS开发 Windows
敬业签电脑手机云同步便签及安卓手机和苹果手机云同步桌面便签
敬业签桌面便签软件 敬业签是具有代表性、领先的第三代互联网桌面便签软件,能够实现随手记录便签内容、自动云同步、云存储功能,并附带公历/农历定时提醒待办事项、按天、周、月、季、年循环重复提醒和重要事项循环提醒的时间管理功能,解决传统的桌面便签误删除无法恢复及历史记录无法查看的问题。
1839 0
|
Android开发
【请教问题】kanzi如何实现类似安卓手机桌面滑动切换界面效果?
目前想用kanzi实现类似安卓手机的左右滑动切换桌面的效果。尝试了以下两种方法都没有实现。 方法一: 仿造例子程序album切换效果,将Trajectory List Box 3D中切换改为AngleTrajectory方式,可以实现切换,但是两个图片的间距太大,设置spacing参数到最小也还是有间距。
1234 0