实例分析!聊聊UI界面中搜索入口的设计 - 优设-UISDC

实例分析!聊聊UI界面中搜索入口的设计

2016/11/01 8135评论区

ui-search-design-method-1

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

欢迎关注点融设计中心DDC微信公众号:「微信ID:DR_DDC」

用搜索的原因

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

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

不使用搜索的原因

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

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

不同用户群

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

任务型:

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

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

链接型:

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

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

混合型:

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

搜索入口的设计

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

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

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

uisdc-201611-17

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

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

uisdc-201611-18

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

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

uisdc-201611-19

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

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

uisdc-201611-110

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

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

以上是对搜索表现形式的一些基本见解,谢谢。

欢迎关注点融设计中心DDC微信公众号:「微信ID:DR_DDC」

ddcqr

「专业科班训练方法」

  1. 《专业科班的方法!设计师在工作中通过哪些方式获取灵感?》
  2. 《专业科班的方法!设计一个LOGO 的常规思路和流程是怎样的?》
  3. 《专业训练方法!如何设计一张高品位高水准的海报?(大量实例)》
  4. 《专业科班方法!平面设计里怎样提高作品的视觉冲击力?》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-search-design-method

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 视觉设计 素材下载 设计师专访 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里