美文网首页
浏览器 --- 搜索框的设计

浏览器 --- 搜索框的设计

作者: vedon_fu | 来源:发表于2017-04-22 20:42 被阅读78次

搜索框是浏览器中交互最为频繁的控件之一,因此如何设计一个搜索框变得极为重要。用户输入搜索关键字,浏览器会提供命中关键字的搜索结果。大多数浏览器的行为都差不多,如下图所示:

WechatIMG1.jpeg

上图依次是:百度浏览器,QQ浏览器,UC浏览器,夸克浏览器。一样的关键字,不一样的数据和排序。从图中可以看出有如下功能:

  • URL 自动补全
  • 历史网址提示
  • 常用网址提示
  • 关键字提示

这么多功能最终都是为了让用户以最快最舒服的方式找到想要的内容。搜索框看似简单,其实是一个非常复杂的交互控件。说白了就一句话,如何根据用户使用习惯对数据进行有效的排序筛选。

  • 数据
  • 排序筛选
  • 用户习惯

根据这三点来设计浏览器的搜索框就是今天的主题。

数据

数据的来源可以是:

  • 书签
  • 导航
  • 浏览历史
  • 框计算 (服务器支持)
  • etc

数据源不是越多越好, 数据源多样化会导致数据膨胀,最终会增加用户使用成本。 那么,如何对数据进行有效的排序和筛选变得非常重要。

数据排序筛选

需要在有限的显示区域里面,展示有效的数据。排序根据用户权重系数降序排列,
首先对每一种数据源配置权重系数w1 ,然后对同一数据源的每一条数据配置权重系数w2。同一数据源的权重按一定的算法衰减,保证所有数据源重要的数据都可以在有限的显示区间显示 。

一条数据的权重最终为:

W =  w1 * w2 * f(index)

用户习惯

通过学习用户行为高效的配置资源,提高用户的浏览体验。这里不得不说Chrome ,一款伟大的浏览器。通过参照 Chrome 的实现方法,实现根据用户行为有效配置资源。用户行为的学习,也会影响到数据的排序,使排序更加智能化。

相关文章

  • 浏览器 --- 搜索框的设计

    搜索框是浏览器中交互最为频繁的控件之一,因此如何设计一个搜索框变得极为重要。用户输入搜索关键字,浏览器会提供命中关...

  • 产品设计-app搜索框-搜索功能

    产品设计-app搜索框-搜索功能 思考一:是否需要搜索框 搜索框的设计主要方便用户快速找到相关内容,涉及到大量线上...

  • 浏览器设计(1):搜索框设计思考

    在浏览器中,搜索框无疑处于相当重要的一环——浏览器满足的核心需求是搜索,而搜索框正是打开这一基本功能的“钥匙”。一...

  • 交互-搜索框设计

    类型 1.隐藏搜索框 只提供一个放大镜icon,需点击跳转才可搜索,或下拉显示搜索框。 占据空间小,位置灵活,层级...

  • 设计师必修课:搜索设计有什么窍门?这三点不得不知

    今天为大家带来的文章是「搜索」设计。可能很多人认为搜索设计很简单:在主页顶部设计一个搜索框或者搜索图标,就可以完成...

  • 【Objective-C】UISearchBar原生控件自定义样

    开发应用实现搜索页面就需要创建搜索框,为了满足设计师的需求可能需要自定义搜索框,既然 Objective-C 为我...

  • 搜索框的体验设计

    写在前面 无论网站或是App,搜索功能几乎成了标配,在其间占据着或轻或重的位置。一方面,搜索可以帮助用户节约时间、...

  • 如何下载谷歌浏览器

    1、在任意浏览器搜索框搜索“谷歌浏览器”,便会弹出以下界面,找到官网 2、点击下载 3、接受并安装 4、选择安装路...

  • 【windows】设置默认浏览器

    1、打开“开始”菜单,点击“设置” 2、选择“系统”,搜索框中搜索“默认应用” 3、浏览器下选择“+”,点击添加需...

  • 如何优化搜索框?

    搜索框的设计包含很多内容,当然算法部分才是核心,但是算法之前的一切工作都是必不可少的。 搜索的优化主要分为:搜索框...

网友评论

      本文标题:浏览器 --- 搜索框的设计

      本文链接:https://www.haomeiwen.com/subject/uanqzttx.html