?!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 手机站点和桌面站点设计的10个区?- app开发资?- 徐州亿网|络公司(www.qwolzk.live)

当前位置Q?a href="http://www.qwolzk.live/">首页 > app开发资?/a>

手机站点和桌面站点设计的10个区?/h2>

来源Q徐州亿|网l科技有限公司 旉Q?011-06-26 作者:阿贺

桌面|站的一些设计原则是大家q泛认可QƈU极付诸实践的。例如:pȝ状态保持可见,避免错误信息Q在错误发生Ӟ应该提供一些具体的指南帮助用户解决q些问题{?/span>

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

然而,Ud站点的设计仍处于初步阶段?/span>Jakob Nielsen?/span>2009q移动可用性调查时指出Q相比与|页站点80%的成功率Q用户用移动设备查看移动站Ҏq_成功率只?/span>64%Q?/span> 形式要素的差异对用户交互成功率的影响是巨大的Q因此,在进行移动站点的设计时要充分考虑Ud讑֤的Ş式要素,

随着手机站点设计的持l增长,一些新的原则,以及一些好的设计实践将会Q出水面。作为前q的W一步,本h通过分析一些成功的手机站点来研I两者的不同。在我的研究中,늛了航I,电子商务Q社交网站,׃{一些较成功的站点,q得Z臛_10个区别?/span>

1. 内容优先

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

 

?1—Orbitz桌面站点特征

 

?2—OrbitzUd站点特征

2. 垂直览取代水^览

如图?/span>Urban Outfitters站点所C的那样Q在呈现数据l构和数据内ҎQ水q_航是一U广泛采用的D方式。用户可以从左到叻I点击不同的站炚w接来览?/span>Joshua Porter在一名?/span>The Challenge of Moving to Horizontal Navigation“的博客中Q讨Z在页面顶端而不是页面两侧用水q_航的好处。至于顶端时Q用户可以更Ҏ聚焦于页面的内容Q而在两侧Ӟ会很Ҏq扰用户视线。在我的研究中,90%的移动站炚w用垂直导航的方式取代水^DQ包括如下图所C的Urban OutfittersUd站点?/span>

?/span> 3—Urban Outfitters桌面站点中的水^D

?4—Urban OutfittersUd站点的垂直导?/span>

 

3. D条,标签和超文本

如图5所C,链接是因特|站点的主要l成部分Q然而,在移动站点中Q我们则很少看到链接。ƈ不是在移动站点中没有链接,而是被一些导航条Q标{֒按钮{取代了Q如?/span>6所C。用户用手指来操作Ud讑֤是生垂直导航方式的原因之一?/span>

在电脑上Q移动鼠标,点击链接是很理想的查看信息的方式,但是在移动设备中Q通过手指触摸屏幕来打开链接就不那么容易了。用户可以很ҎȀzM个链接,q入一个新面Q但Q这q不是用h望的面Q如果这L话,会生非常差的体验效果?/span>Fitts定律告诉我们使用指点讑֤辑ֈ一个目标的旉与设备当前的位置和目标位|的距离Q以及目标的大小有移动的关系。在一些大的手机站点中Q导航条Q标{֒按钮会吸引更多的注意力?/span>

?/span> 5—Kayak |页链接

?/span> 6—Kayak 手机,没有链接

4.  Text and Graphics文本和图?/span>

在网中Q我们经怼看到一些促销Q营销或者导航的囑Ş信息。如?/span>7所C的dell站点Q设计者经帔R要设计一些促销或营销的图形,如图8所C、公?/span>LOGO始终保持着D的目标,通过它,用户可以q入主页。而在Ud站点设计中,应该减少q些囑ŞQ原因有二:其一Q一些移动设备ƈ不支持和传统|页站点一hC方式;其二Q移动屏q较,昄内容有限Q除此之外,q多的显C内容会降低Ud设计的运行速度?/span>

?/span> 7—Dell首页Q有囑Ş

?/span> 8—Dell Ud,只有较少的图?/span>

5. 全局D与情境导?/span>

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

在移动站点中Q移动设备有限的屏幕军_了应该减全局D和情境导航。然而,~少全局D和情境导航则会让用户q失Qؓ此,在构建移动内ҎQ应该尽量减层U关p,q样Q用h需挖得太深可以找到自己所需的信息,作ؓ设计师,应该让用户在q失之前扑ֈ自己的信息?/span>

?/span> 9?/span>Best Buy桌面站点中各式各L情境D

?/span> 10?/span>Best Buy Ud站点中,没有情境D

6.

在桌面站点设计中Q有两种典型的页脚,W一U页脚提供了一些内容的q接Q用户可以查看主,或其他一些较低优先的内容,?ldquo;人才招聘”?ldquo;站点地图?/span>W二U脚注,则提供了用户想看的所有内容结构,如图11所C,在页脚中列出一些快速入口,用户可以纵观整个站炏V在Ud站点中,通过脚Q用户可以查看首,但尽量保持最连接数Q如?/span>12所C,在页脚中Q不包含全部快速链接?/span>

?/span> 11—Dell 桌面站点的页?/span>

?/span> 12—Dell Ud站点Q较的脚

7. 面包?/span>

如图13所C,在桌 面站点中Q面包屑D可以有效地标明用h在的位置Q查看自qD路径Q但通常会让用户产生站点内容多,层关系q感觉。面包屑D方式很少出现在移 动站点中Q通常也是没有必要的。有限的I间l构是原因之一Q另外,q种方式使得用户需要经q很q途径才能扑ֈ所需要的信息。同P我们应该让用户在有迷 失感之前获取惌的信息?/span>

?/span> 13—AmazonUd站点的面包屑

8. q度?/span>

在桌面站点中Q如果用户需要通过多种步骤才能完成某一q程Q如购买q程或者填写较长注册表q程Q如?/span>14所C, 在页面的端l常会给Z个进度条Q指导用户完成这个过E,q种q度条在Ud站点中还没有出现?/span>

采用一些替代的ҎQ让用户无需q度条,可以表明当前所在的位置。如Q不使用一些暗含用h?ldquo;下一?rdquo;?ldquo;l箋的按钮,使用明确的标{按钮,告知用户的下一个步骤,?ldquo;前往攉?rdquo;“指定送货及付?rdquo;。这P用户不仅知道当前的过E,q期待下一步的信息?/span>

?/span> 14—Amazon 站点的进度条

9. 集成手机功能

机是通信讑֤Q打电话是其基本功能。尽移动^台的设计和内定w是有限的Q但仍具有一些桌面^台无法比拟的新机会,例如Q可以用直接拨打电话或短信的方式订购物品,如图15所C,促销短信与品功能进行整合,用户只需选择一个手机号码,然后通过q个L来打电话或发短信Q无需输入数字?/span>

?/span> 15— Best Buy Ud站点Q电话购?/span>

10. 本地化和个性化搜烦

Z地理位置的服务是Ud站点独一无二的优ѝ仅?/span>5q前Q地理位|服务才和消费市场结合v来,现在Q在一些移动程序和|页站点中,地理位置服务作ؓ增值服务的一部分而广泛用?/span>

很多Ud讑֤可以自动用L地点Qƈl出一些本地化的检索结果。如?/span>16Q?/span>Best Buy本地商店搜烦功能Q?/span>Yelp的餐厅搜索,Kayak的班机搜索,通过了解用户的交易地点以及一些时服务,商家可以有针对性地推广自己的品或服务?/span>

?/span> 16?/span>Kayak中,自动监测地理位置q给Z些检索徏?/span>

Z我们的研IӞ我们ȝ了移动站点和桌面站点设计10大不同点Q?/span>

  1. 桌面站点可以包含更丰富的信息Q而移动站点包含一些在大部分时_地点中用的典型功能和特征?/span>
  2. 桌面站点采用端的水q_航方式来呈现站点l构和内容,?/span>90%的移动站炚w用垂直导航的方式?/span>
  3. 桌面站点通常使用链接,Ud站点极少使用链?/span>
  4. 桌面站点会根据促销Q营销Q导航目的的不同设计不同的图形,Ud站点应避免一些促销或营销的图形,较少使用D囑Ş?/span>
  5. 在桌面站点中Q可以用各U各LD方式Q如全局D和情境导航。移动站炚w用全局DQ情境导航极?/span>
  6. 在桌面站点中Q用户可以通过脚查看站点内容Q或查看一些快速链接。移动站点较采用一些页脚,更不会用页脚来包含一些快速链接?/span>
  7. 在桌面站点中Q面包屑D可以帮助用户扑ֈ需要的面Q或者返回查看一些导航\径。而在Ud站点设计中,׃自n的一些^台结构的限制Q面包屑D的方式是没有必要的?/span>
  8. 桌面站点通常在页面顶端增加进度条来引导用户完成某进E。移动站点ƈ不出现进度条?/span>
  9. Ud站点可以更好地整合手机功能,如电话直接订货或发送促销信息?/span>
  10. Ud站点可以使用一些技术手D自动检获取本地搜索结果。根据用L一些喜好提供个性化的搜索结果,对用h说更加重?/span>

公司动?/a>

|站

营销{划

行业资讯

22ѡ5ضǮ