当前位置:首页 > 经验学习 > 交互设计

简单页面的华丽变身-Search App Product Design

所属栏目:交互设计 时间:2013-12-26 来源: 作者:不详 点击:

网页端搜索引擎的简单易用一直是网页产品设计中的优秀范例。 它巧妙地利用大片liu(留)白,一个搜索框入口,链接排布形式和品牌LOGO的互相搭配,在yi(一)个页面里为用户提供了绝佳的用户体验。强大的产品特性也使其成为上网冲浪必不可少的工具之一,帮助用户挖掘到未知的网络世界。
随着移动互联网的快速发展,移动信息量也迅猛膨胀,用户对手机搜索引擎的需求也与日俱增。因此搜索引擎也纷纷开始酝酿自己的手机产品。和PC机相比,手机端硬jian(件)geng(更)加局限,使用场景更加多样,交互形式更加丰富,因此简单的网页页面移植已经不能满足yong(用)户对于手机搜索引擎的需求。所以简单页面也kai(开)始了华丽变身,纷纷设计了自己的独立客户端。 当将简单的页面转变为客户端软件时,应该如何设计呢?下面将会为您逐步揭晓这些产品设计的攻略。
“组织”产品架构,让品牌特性凸显出来
移动客户端的设计和网页设计不同。由于屏幕da(大)小的限制和移动端性能的影响,产品的结构和网页相比会更复杂, 层次也会更多。产品jiang(将)面临的挑战是:用户已经习惯了网页排布的使用方式,他们不愿意花费精力去适应一款全新交互的产品。那么当把搜索引擎从PC端移植到展现形式多变的手机端时,如何组织这些结构和层次,让用户能够迅速地摸清产品结构,清晰感知它的品牌特点,就尤为重要。

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

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

其次Bing 的一些细节上的配色使其非常具有自身移动平台Windows Phone 7的特色。 如上图所示的设置页面, Bing将iOS上的Navigation Bar和List的样式进行了重新zu(组)织布局, 和右图WP7的界面对比,是不是有异曲同工之妙ne(呢)?zhe(这)样的组织设计,抓住了品牌拥护者的使用习惯,也从产品设计上体现出了自身的特点。
“拆分”信息层次,提升移动端展现效率
在PC端使用网页搜索yin(引)擎时,搜索建议会在用户输入后才展xian(现),其中服务器会根据一定的算法将用户经常搜索的词语和服务器中常被搜索De(的)关键字一起下发作为搜索建议。 但在yi(移)动端,因为输入成本的提高,所以, 搜索引擎ke(客)户端选择将信息层次进行了拆分。 通过分解用户在不同情况下的不同需求, 将展现的内rong(容)分阶段进xing(行)展现,实现让用户再一次输入后,有更多选择机会的目的。

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

Bing的搜索流程与Google类似,也hua(划)分为两个阶段, 但对于细节的处理略由不同。 Bing的搜索框被触发后会显示搜索历史记录, 但是在记录是按类别进行划分, 并在底部提供书签和更多历史记录的入口。通过拆分入口的方式,为用户提供更多的点选机会。
当输入关键字后, 含有关键zi(字)的搜索历史记录会优先排列在前面并按类型进行划分,服务器下发的搜索建议,对已输入字符和未输入字符进行了高亮区分。 这样的拆分方式,让用户从视觉层面上更容易进行区分。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: