登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>网页制作>>网站设计原则>>提升用户在移动端的搜索体验
提升用户在移动端的搜索体验
来源:网页教学网 ‖ 作者: ‖ 点击: ‖ 时间:12-01-17 10:58:55 ‖ 【 】‖ 我要投稿

网页端搜索引擎的简单易用一直是网页产品设计中的优秀范例。 它巧妙地利用大片留白,一个搜索框入口,链接排布形式和品牌LOGO的互相搭配,在一个页面里为用户提供了绝佳的用户体验。强大的产品特性也使其成为上网冲浪必不可少的工具之一,帮助用户挖掘到未知的网络世界。



随着移动互联网的快速发展,移动信息量也迅猛膨胀,用户对手机搜索引擎的需求也与日俱增。因此搜索引擎也纷纷开始酝酿自己的手机产品。和PC机相比,手机端硬件更加局限,使用场景更加多样,交互形式更加丰富,因此简单的网页页面移植已经不能满足用户对于手机搜索引擎的需求。所以简单页面也开始了华丽变身,纷纷设计了自己的独立客户端。 当将简单的页面转变为客户端软件时,应该如何设计呢?下面将会为您逐步揭晓这些产品设计的攻略。

“组织”产品架构,让品牌特性凸显出来

移动客户端的设计和网页设计不同。由于屏幕大小的限制和移动端性能的影响,产品的结构和网页相比会更复杂, 层次也会更多。产品将面临的挑战是:用户已经习惯了网页排布的使用方式,他们不愿意花费精力去适应一款全新交互的产品。那么当把搜索引擎从PC端移植到展现形式多变的手机端时,如何组织这些结构和层次,让用户能够迅速地摸清产品结构,清晰感知它的品牌特点,就尤为重要。

Google的产品架构主要由4个大部分构成,如上图所示: 搜索区域, 更多应用程序入口, 分类切换以及浏览工具栏。与网页相比,产品的组织结构更多,客户端不能再使用网页端全局静态留白的布局形式。但是设计师巧妙地利用了手势操作进行层与层之间的叠加变化,为搜索区域搭配出了和网页端几乎相同的布局形式。“Google化”的组织方式,让用户在初次使用手机Google搜索产品时就能共用网页端的心智模型,减少了学习成本。

Bing的移动搜索客户端组织方式不仅延续了它在网页上的布局特色,而且也突出了其极具品牌特色的Daily Picture 服务(每日图片推送)。 通过每天向客户端推送一张高清精美图片, 配合着图片上的附注信息, 加强了客户端与用户的互动性,同时也通过其提高了用户对软件的期待度与黏性(比如用户会有期待:明天的图片会是什么呢? 我一定要记得看看) 。

其次Bing 的一些细节上的配色使其非常具有自身移动平台Windows Phone 7的特色。 如上图所示的设置页面, Bing将iOS上的Navigation Bar和List的样式进行了重新组织布局, 和右图WP7的界面对比,是不是有异曲同工之妙呢?这样的组织设计,抓住了品牌拥护者的使用习惯,也从产品设计上体现出了自身的特点。

“拆分”信息层次,提升移动端展现效率

在PC端使用网页搜索引擎时,搜索建议会在用户输入后才展现,其中服务器会根据一定的算法将用户经常搜索的词语和服务器中常被搜索的关键字一起下发作为搜索建议。 但在移动端,因为输入成本的提高,所以, 搜索引擎客户端选择将信息层次进行了拆分。 通过分解用户在不同情况下的不同需求, 将展现的内容分阶段进行展现,实现让用户再一次输入后,有更多选择机会的目的。

Google 在关键字搜索时主要由两种状态构成。 一是触发框后进入输入模式, 此处将会显示带有图标的搜索历史记录; 二是输入关键字后,将显示搜索建议, 单击建议将对相关关键字发起搜索。 而右边的“+”号也实现了拆分搜索建议的目标,通过让合适的关键字上框, 让用户可以获得更多的搜索建议,也能发起更精确的搜索。

Bing的搜索流程与Google类似,也划分为两个阶段, 但对于细节的处理略由不同。 Bing的搜索框被触发后会显示搜索历史记录, 但是在记录是按类别进行划分, 并在底部提供书签和更多历史记录的入口。通过拆分入口的方式,为用户提供更多的点选机会。


当输入关键字后, 含有关键字的搜索历

|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:关于defer和async
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论