搜索图标那些优点和缺点列表

在对搜索界面设计的研究中，我们发现了搜索框的一个发展趋势：越来越多的设计使用一个纯粹的放大镜图标来替换传统的带有“搜索”二字的文本按钮，甚至有些还丢掉了文本输入框，仅仅留下了一个放大镜图标。今天哪一个版本的用户体验是最好的呢?

　　之前的搜索框设计指南

　　传统的搜索框设计已经很成熟，其主要原则是：

　　在页面的右上角放置一个醒目的搜索框，搜索框的旁边放置一个搜索按钮。

　　搜索框不需要文字说明，旁边的那个明显的搜索按钮告诉用户在这里就可以搜索，同时还告诉他们如何搜索。

　　然而，今天的一些新兴的模式打破了这些基本准则. 放大镜图标更加节省空间，所以更多的网站使用它。更加灵活的使用设计准则是没有问题的，但是有一点是需要确认的，那就是用户的需求仍然是保持不变的。用户并不关心搜索区域看上去像什么，他们只是需要一个可以迅速输入搜索关键词的地方。如果设计惯例正在发生变化，但仍能允许用户轻松的实现这个目标，而不是减慢，那就不会有什么问题。可是在我们调查中发现，只有图标的搜索设计还是存在一些明显的缺点：

　　(a)：传统搜索按钮的搜索框;

　　(b,c,d)：新兴的带放大镜图标的搜索框设计模式;

　　(e)受移动设计影响的只有图标无输入框的设计(我们并不推荐这种设计)

　　图标的采用

　　放大镜图标已经和搜索紧密联系在一起，部分原因是许多不同的网站、应用程序和操作系统使用它来提供一种查找信息的方法。有了这样的贯彻执行，用户已经学会更快的识别这一图标。随着响应式设计的流行，仅使用图标的设计模式更加的流行起来(尽管好的响应式设计的站点在转换到大一点的屏幕时在图标旁边还会显示一个搜索框)。

搜索图标那些优点和缺点列表相关推荐

微信小程序：历史搜索及根据关键词列表查询
searchValue 是搜索内容,searchList 是存放搜索内容的数组,通过使用 wx.setStorageSync('searchList', searchList)在本地存储一个名为sea ...
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
[软技能] 请说说使用iconfont图标的优点和缺点
[软技能] 请说说使用iconfont图标的优点和缺点优点:减少请求次数,将多个 icon 合并到一个字体文件中,从而提高网页性能: 自由的变化大小和颜色,因为字体是可以通过样式来设置大小和颜色的: ...
vue中关键字的搜索，输入关键字列表和分页一起刷新
接着上篇文章,这个是关键字的搜索,输入关键字进行搜索的时候,列表的数据和分页跟着一起改变 <template><div class="all"><di ...
js中搜索栏中的搜索图标(以及其他各种图标）怎么写？Fontawesome
一.推荐网站可能大家刚写js时,遇到一些需要用的图标,会上网去搜图片,然后ps...其实,有一个很好的网站已经为我们设计好了所有的(几乎你需要用的)所有图标.有很多这样的网站:fontawesome ...
搜索图标在搜索框内的搜索框的编写（宛如绕口令一般的标题）
以模仿微博顶部搜索框为例: <div style="height: 28px;width: 468px;"><input type="text" ...
搜索图标居中的搜索框~iOS风格搜索框
原文:http://www.bkjia.com/Androidjc/1012884.html 自定义EditText实现类iOS风格搜索框,edittextios 最近在项目中有使用到搜索框的地方,由 ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
修改SearchView默认搜索图标
标题:在代码中修改SearchView控件的默认图标样式,并设置搜索图标与默认字体的距离步骤: 1.首先定义一个SearchView Searchview mSearchview = (Searc ...

搜索图标那些优点和缺点列表

搜索图标那些优点和缺点列表相关推荐

最新文章

热门文章