当前位置Q?a >首页 > 营销{划
手机站点和桌面站点设计的10个区?/h1>
来源Q徐州亿|网l科技有限公司 旉Q?011-06-26 作者:(x)
桌面|站的一些设计原则是大家q泛认可QƈU极付诸实践的。例如:(x)pȝ状态保持可见,避免错误信息Q在错误发生Ӟ应该提供一些具体的指南帮助用户解决q些问题{?/span>
很多些适合|页设计的原则和指南也同样适用于移动^台。毕竟,|页设计是从一些基的,Z文本?/span>HTML出发Q才发展成ؓ(f)今天?/span>WEB标准的。因此,我们也可以想象依靠这些原则,手机站点的设计也?x)和|页站点的设计一P获得巨大的成功?/span>
然而,Ud站点的设计仍处于初步阶段?/span>Jakob Nielsen?/span>2009q移动可用性调查时指出Q相比与|页站点80%的成功率Q用户用移动设备查看移动站Ҏ(gu)q_成功率只?/span>64%Q?/span> 形式要素的差异对用户交互成功率的影响是巨大的Q因此,在进行移动站点的设计时要充分考虑Ud讑֤的Ş式要素,
随着手机站点设计的持l增长,一些新的原则,以及(qing)一些好的设计实践将?x)Q出水面。作为前q的W一步,本h通过分析一些成功的手机站点来研I两者的不同。在我的研究中,늛?jin)航I,?sh)子商务Q社交网站,׃{一些较成功的站点,q得Z(jin)臛_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构和数据内Ҏ(gu)Q水q_航是一U广泛采用的D方式。用户可以从左到叻I点击不同的站炚w接来览?/span>Joshua Porter在一名?/span>“The Challenge of Moving to Horizontal Navigation“的博客中Q讨Z(jin)在页面顶端而不是页面两侧用水q_航的好处。至于顶端时Q用户可以更Ҏ(gu)聚焦于页面的内容Q而在两侧Ӟ?x)很?gu)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标{֒按钮{取代了(jin)Q如?/span>6所C。用户用手指来操作Ud讑֤是生垂直导航方式的原因之一?/span> 在电(sh)脑上Q移动鼠标,点击链接是很理想的查看信息的方式,但是在移动设备中Q通过手指触摸屏幕来打开链接就不那么容易了(jin)。用户可以很Ҏ(gu)ȀzM个链接,q入一个新面Q但Q这q不是用h望的面Q如果这L(fng)话,?x)生非常差的体验效果?/span>Fitts定律告诉我们使用指点讑֤辑ֈ一个目标的旉与设备当前的位置和目标位|的距离Q以?qing)目标的大小有移动的关系。在一些大的手机站点中Q导航条Q标{֒按钮?x)吸引更多的注意力?/span> ?/span> 5—Kayak |页链接 ?/span> 6—Kayak 手机,没有链接 4. Text and Graphics文本和图?/span> 在网中Q我们经怼(x)看到一些促(j)销Q营销或者导航的囑Ş信息。如?/span>7所C的dell站点Q设计者经帔R要设计一些促(j)销或营销的图形,如图8所C、公?/span>LOGO始终保持着D的目标,通过它,用户可以q入主页。而在Ud站点设计中,应该减少q些囑ŞQ原因有二:(x)其一Q一些移动设备ƈ不支持和传统|页站点一hC方式;其二Q移动屏q较?yu),昄内容有限Q除此之外,q多的显C内容会(x)降低Ud设计的运行速度?/span> ?/span> 7—Dell首页Q有囑Ş ?/span> 8—Dell Ud,只有较少的图?/span> 5. 全局D与情境导?/span> 桌面站点提出使用多种D方式Q如?/span>9 Best Buy 站点。一些全局性的D可以保持站点的一致性,而其他一些情境导航会(x)随着用户使用站点的不同而不同。在Ud站点中,全局D?/span>最常见的导航方式,如图10 Best buy的移动站点就是非常典型的例子?/span> 在移动站点中Q移动设备有限的屏幕军_?jin)应该减全局D和情境导航。然而,~少全局D和情境导航则?x)让用户q失Qؓ(f)此,在构建移动内Ҏ(gu)Q应该尽量减层U关p,q样Q用h需挖得太深可以找到自己所需的信息,作ؓ(f)设计师,应该让用户在q失之前扑ֈ自己的信息?/span> ?/span> 9—?/span>Best Buy桌面站点中各式各L(fng)情境D ?/span> 10—?/span>Best Buy Ud站点中,没有情境D 6. 脚 在桌面站点设计中Q有两种典型的页脚,W一U页脚提供了(jin)一些内容的q接Q用户可以查看主,或其他一些较低优先的内容,?ldquo;人才招聘”?ldquo;站点地图”?/span>W二U脚注,则提供了(jin)用户想看的所有内容结构,如图11所C,在页脚中列出一些快速入口,用户可以纵观整个站炏V在Ud站点中,通过脚Q用户可以查看首,但尽量保持最连接数Q如?/span>12所C,在页脚中Q不包含全部快速链接?/span> ?/span> 11—Dell 桌面站点的页?/span> ?/span> 12—Dell Ud站点Q较?yu)的?/span> 7. 面包?/span> 如图13所C,在桌 面站点中Q面包屑D可以有效地标明用h在的位置Q查看自qD路径Q但通常?x)让用户产生站点内容多,层关系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常?x)给Z个进度条Q指导用户完成这个过E,q种q度条在Ud站点中还没有出现?/span> 采用一些替代的Ҏ(gu)Q让用户无需q度条,可以表明当前所在的位置。如Q不使用一些暗含用h?ldquo;下一?rdquo;?ldquo;l箋”的按钮,使用明确的标{按钮,告知用户的下一个步骤,?ldquo;前往攉?rdquo;“指定送货?qing)付(gu)?rdquo;。这P用户不仅知道当前的过E,q期待下一步的信息?/span> ?/span> 14—Amazon 站点的进度条 9. 集成手机功能 机是通信讑֤Q打?sh)话是其基本功能。尽移动^台的设计和内定w是有限的Q但仍具有一些桌面^台无法比拟的新机?x),例如Q可以用直接拨打电(sh)话或短信的方式订购物品,如图15所C,促(j)销短信与品功能进行整合,用户只需选择一个手机号码,然后通过q个L(fng)来打?sh)话或发短信Q无需输入数字?/span> ?/span> 15— Best Buy Ud站点Q电(sh)话购?/span> 10. 本地化和个性化搜烦(ch) Z地理位置的服务是Ud站点独一无二的优ѝ仅?/span>5q前Q地理位|服务才和消费市(jng)场结合v来,现在Q在一些移动程序和|页站点中,地理位置服务作ؓ(f)增值服务的一部分而广泛用?/span> 很多Ud讑֤可以自动(g)用L(fng)地点Qƈl出一些本地化的检索结果。如?/span>16Q?/span>Best Buy本地商店搜烦(ch)功能Q?/span>Yelp的餐厅搜索,Kayak的班机搜索,通过?jin)解用户的交易地点以及(qing)一些(f)时服务,商家可以有针对性地推广自己的品或服务?/span> ?/span> 16—?/span>Kayak中,自动监测地理位置q给Z些检索徏?/span> 结 Z我们的研IӞ我们ȝ?jin)移动站点和桌面站点设?/span>10大不同点Q?/span>
公司动?/a>
- 2015徐州亿网APP点子大赛
- 周六游?—?水深火热
- 数钱游戏 --- 开?j)一?/a>
- 周末游戏
- 由徐州亿|承建开发的塔机动态监控管理系l正式上U?/a>
- 由徐州亿|承建开发的Zȝh防伪防窜货功能的微信公众q_正式上线
- 中秋攑ց前的团队Ƣ聚
- 台儿庄一日游
- 周六游戏 ------ H出重围
- 7.26日周六活?/a>
行业资讯
- 1?日~1?日百度相关系l出现故?/a>
- 癑ֺ公司的技术别以?qing)薪资范?/a>
- 企业App开发推q的三大程
- 徐州|络公司Q网l陷׃可不?/a>
- iPhone6涉嫌外观抄袭
- 山寨Q扒一扒那些靠着别h才能zȝ手机APP应用
- APP当道的时代你用或者不用,它就在那?/a>
- 做网站要选择合适的域名
- 如何避免成ؓ(f)Google补充材料
- 认识SEO原理和网站推q方?/a>
营销{划