UI界面中搜索入口的设计

写在前面:

我以前是学空间设计的,所以对引导性的感知比其他学设计的要更早。其实,设计总就还是一个“万法归宗”的东西。“吸引”——“引导”——“持续”——“欲罢不能”用用户的这种思维去检验自己的作品(交互/UI)是比较客观的。那个步奏出了问题,丧失了用户,那个点就是你的失败点。

很多设计师的很多新想法和新的操作逻辑很有意思,或者说新推出的商业企划很有吸引力,但问题是如何让用户最乐意的去接受,而且不过分增加界面和程序压力这才是我们需要考虑的。否则——套用有些老板的话:要你干嘛?

软件看似简单,其实内部的骨架在不断调整,每一个新的信息出来都会伤筋动骨,不过,对于一个设计师来说,“解决问题”才是最有价值感的事情。

(这段时间经历的不少,各种各样的不快包括伤病的些许的折磨。分享这篇文章的原因是里面有很多和自己这段时间考虑的问题有相似的地方,不过他并不那么深入,大家借鉴就好。)

搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

用搜索的原因

使用搜索时,用户可以自己掌握浏览该网站的路径,从哪一页进入到哪一页,自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。

另一个原因是,当用户浏览网页到一半不知道接下去该干什么的时候,往往会使用搜索直接去找到自己想找的内容。

不使用搜索的原因

相对于搜索,用户根据类目,或者从功能模块的入口进入各个页面其实是跟着页面的导向进行的下一步操作。

网页的设计者会根据网站的不同需求从而设计不同的页面布局。根据这些页面布局进而引导用户一步一步的达成网站设计者的目的。这些目的可能就是买一件商品,参加一个活动等等。用户可以根据设计者创建的引导流程一步步的查看网站内容。

不同用户群

根据搜索是否主动搜索这点来分,可以把用户分成3种类型:任务型,链接型,混合型。

任务型:

任务型的用户就是前面说的直接使用搜索功能的用户。大部分用户都是任务型的用户。这些用户往往是带着某种目的来,例如已经知道了自己要购买的商品,就直接搜索商品名称进入搜索列表页。

使用搜索的场景可以再细化一点,通常用户已经想好了具体要搜索的关键词,同时他使用的网站可以搜索到非常大量的搜索结果时,用户会使用搜索功能。例如在手机里找一个联系人的号码,如果手机里只存了10个号码,那很可能就直接打开联系人的APP,从这10个人的姓名中找到一个号码;另一种情况,如果手机里存了500个号码,这时候要逐个浏览来找某个联系人效率就会相对低,这是大家会做的是在联系人里找到搜索框,输入要找的人的姓名或者拼音,定位到要找的人,最后找到电话号码。

链接型:

链接型的用户打开一个页面之后会找各个功能的链接(首页广告,功能入口,链接),即使他们已经想好了要找某些信息,他们还是会通过点击入口而不是输入关键字来找页面。通常这类用户知道自己要买麦片,但是没有考虑好什么品牌的麦片,哪个国家的麦片,那这个时候,他们会做的是找到网站的类目入口,在类目里找到“麦片”的分类,点击进入,而不是直接搜索关键词“麦片”。

链接型的用户只有当他们在页面上找不到自己需要的相关信息链接时,才会选择使用搜索框。

混合型:

混合型的用户行为其实以上两种都有,有时候会直接搜索关键词,有时候会在页面上寻找链接,没有使用以上哪种偏好的倾向性,只是用当下他们觉得最好的方式。

搜索入口的设计

不同功能,不同需求的界面会影响到搜索框入口的设计。

iOS系统的搜索框只有在用户下拉页面时才会出现。

对于一个系统界面来说,给用户提供各个APP,功能入口是一个系统的重要功能,所以对于搜索,系统做了隐藏处理。

1478488128-4967-08Kwh62UoMq

YouTube的搜索框点搜索icon出现。

YouTube有针对用户的喜好在首页提供不同的视频,是一个对每个用户个性化的订制内容, YouTube希望用户浏览查看他们对于用户推荐的视频。所以他们没有把搜索框直接展开而是只显示一个icon,点击之后出现单独的搜索页。

youtube20161107110711

 

 

 

 

电商类APP搜索框一般直接露出在首页的最顶端。

前面有说到在电商网站中,当用户不知道接下去该做什么的时候,会使用搜索操作来直接到达自己想要到达的页面。所以,通常电商网站中,搜索往往是固定在顶部Global上的,以便用户无论在哪一页都能找到。

1478488131-6990-08Kwh5z6yQ4

搜索引擎像Google的首页则只有搜索框。

类似于Google,百度,Bing,搜索是他们的主营业务,自然希望用户所要查看的大部分页面都是通过搜索来获得。所以把搜索框做为用户的唯一使用路径放在首页,不论是APP还是网页。

1478488134-8823-08Kwh54fhzs

这4个例子里对用户对搜索的需求依次增强,所以搜索在页面上的表现形式也依次增强。

作为一个用户大量使用的工具:搜索,它的位置,呈现形式直接关系到制作者对产品的预期,也直接关系到用户会用什么形式使用当前的界面。有的用户浏览界面知道自己要找什么,有的用户是来页面上逛逛的,针对不同用户,不同的搜索设计方案可以帮助设计者达到设计目的,也能帮助用户更好的使用体验。

UEbuang:LIBOBO

原文链接:http://abc351247398.lofter.com/post/1de24434_cd2210f

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/18681/

(0)
TinadminTinadmin
上一篇 2016-11-03
下一篇 2016-11-08

相关推荐

  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • 昨晚,微软发布了一款设计师神器!业界一片哭声!

    #交互学堂#昨晚,微软又硬了。 发布了一部怪兽,把毒少毒死了。。。 这就是我要的桌面电脑啊!!! 一体机—— surface studio (这是配置:Core i7处理器,GeForce 980M显卡,32GB内存+2TB混合硬盘,3:2 TrueColor…

    2016-10-27
  • 设计效果评估及产品迭代-有理有据做设计

    近期关注了几篇关于考核产品效果的文章,话题都是围绕如何权衡“数据指标”和“用户体验”。本人更认可的是Facebook总监的说法“ 数据目标是很有用的,但它和用户体验不应陷入永久的竞争对立局面 ”。在我们评估设计效果…

    2017-03-08
  • 个性的移动应用引导页设计欣赏

    现在的用户下载app时最先看到的东西就是引导页。一个引导页就像一个导游,它会快速的向用户介绍app本身对用户有什么用处已经该如何操作。这是描述应用本身最简单的方式,但是它的设计却不是那么容易。 一个引导页最…

    2016-04-27
  • 用户故事:UI设计的基石

    在整体设计流程中,用户故事可以说是点亮应用绝对目标的那一点星光。该片文章的作者将给我们讲解为什么哪怕是小范围的采用用户故事也能给整体UI设计流程带来巨大的好处。 一支设计团队坐下来讨论为一家新客户所设计…

    2015-04-26
  • [译] 设计一致性的7个小贴士

    设计中的一致性会在无形之中使你的设计效果更加优秀,也更易于用户使用。它为用户提供了足够的空间去按着你要要的方式来体验你的设计。 对于一致性来说,在某些些情况下,要理解并实践它几乎是无需伤脑的事情,而在…

    2016-07-22
  • 你的产品鸡肋了吗?

    如何保证自己的产品不成为鸡肋,除了成功的商业模式外,只有高频次的使用才能保证用户忠诚度,延长产品生命周期。所以,好的用户体验也就成为了其中非常重要的致胜王牌。

    2016-10-20
  • 统一图标大小的方法分享

    最近在整理设计稿中出现的图标,整理除了汇总之外,还需要重新调整一下图标的大小,使他们看起来“差不多大”。调了很久,也咨询了一些设计师朋友,最后在谷歌的Material Design找到了一种规定的方式,特此来记录一下…

    2016-09-05
  • App Store2016年最新审核规则

    编号 中文内容 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA)、人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同。以下规则和示例旨在帮助开发者的程序能获得 2.1 崩溃的程序…

    UI设计 2016-01-21
  • 清晰、高效、一致、美观 – 关于设计原则的优先级排序

    我们在Salesforce的产品设计团队当中有个不成文的规矩: 无论谁拿出一份什么清单 – 功能列表、研究报告,或者哪怕只是体恤衫名录 – 无论什么,只要是清单的形式,肯定会有人出来问一句:“按优先级排过序吗?” 有时…

    UI设计 2016-04-26