一个搜索框多个按钮_网站搜索栏设计指南:要不要?怎么设计?

ec428aeee05f64aa042e0c6d3f49b78a.gif

在网站的设计过程中,搜索栏是一个很容易被忽略的部分,但用户却依赖它来寻找特定的信息。由于搜索栏是网站中最常用的元素之一,所以搜索栏的设计对用户体验有着重要的影响。

d9639b43405e84ebde1bad7c48def5f4.png

网站是否需要搜索栏?搜索栏使用背后的思维和心理是帮助用户快速找到信息。搜索栏对于内容复杂、超过100页的网站非常有用。在企业对消费者(B2C)领域,搜索栏用于大型电子商务网站、新闻网站、交易网站和预订网站,帮助用户轻松找到信息。它们也被用于大型B2B站点,这些站点有许多客户细分和产品线。如果是一个只有很少页面的小站点,那么可能不需要一个搜索栏,但是随着站点的增长,那就将需要它。创建搜索栏时要考虑的因素搜索栏通常由两个UI元素组成:一个输入字段和一个按钮。然而,搜索栏的设计对用户在你的网站上找到他们想要的信息的速度有很大的影响。我们认为,设计搜索栏的时候需要考虑如下问题:突出显示你的搜索栏:让网站搜索栏很容易发现,把它显示在你的网站显著位置。避免将搜索框隐藏在下拉菜单中或隐藏在搜索图标后面(渐进式披露),因为这会让用户很难找到它。此外,当你隐藏你的搜索栏时,你添加了一个额外的动作,用户必须在搜索你的网站之前采取。搜索栏加入放大镜图标:图标作为一个动作或一个物体的心理捷径和视觉线索。对于搜索操作,放大镜是普遍接受的符号,使用它将使用户更容易识别你的搜索栏,即使没有文本标签。当选择一个放大图标,选择一个示意图图标,不是过度程式化,以增加识别的速度。使用大量的对比度和填充,以确保图标突出,并使其足够大。遵循搜索按钮设计惯例:当为搜索栏创建一个搜索按钮时,要遵循好的按钮设计的惯例,确保它是正确的大小和足够的对比度,以使它突出。确保用户可以使用键盘上的"输入"功能提交他们的搜索查询。一些用户仍然使用enter来提交查询,而且它对于可访问性也很好。使用占位符文本引导用户搜索:使用一个搜索查询示例作为占位符文本,引导用户在您的站点上进行搜索查询。这对网站搜索栏很有用,用户可以在搜索栏中搜索不同的条目。限制占位符文本的长度,以减少认知负荷,并确保有足够的对比度,使其易于阅读。设计一个简单的搜索框:创建一个搜索框,看起来像一个搜索框,而且很容易使用。从一个简单的搜索开始,如果需要,给用户提供使用搜索过滤器或高级搜索机制的选项。搜索栏放在合适的位置:网站用户使用F模式浏览网站,把你的搜索栏放在这个F模式中是很重要的,这样用户可以看到它。这是在顶部中心或右上方的网站。此外,用户实际上希望在页面顶部找到网站的搜索栏。不要把你的搜索栏埋在页脚,用户需要在那里寻找它。使用热图来找出你的网站上用户滚动和点击最多的区域(热点),并将你的搜索栏放在那里。搜索栏进行提示:当用户输入他们的搜索查询时,自动提示会引导用户避免在搜索查询公式中出现错误。确保自动建议是有益的,以避免混淆或分散用户的注意力。通过加粗显示用户输入的信息和自动提示之间的差异。搜索栏放在每个页面上:在搜索栏设计中,让用户总是能够访问搜索框。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/528986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql的使用优化问题吗_如何对 mysql 进行优化的问题

3641 天前mingszu-------------------------------------------------------------------------------------------------------------------------------------------------------------------| Table | Non_unique | Key_name | Seq_in_index | Column_name | Collation | Ca…

通过 xlsx 解析上传excel的数据

一、前言 在前端开发中,特别是在后台管理系统中,导入数据(上传excel)到后端是是否常见的功能;而一般的实现方式都是通过接口将excel上传到后端,再有后端进行数据解析并做后续操作。 今天,来记录…

状态机设计的一般步骤_浅谈状态机

来源:公众号【ZYNQ】ID :FreeZynq整理 :李肖遥本文目录前言状态机简介状态机分类Mealy 型状态机Moore 型状态机状态机描述一段式状态机二段式状态机三段式状态机状态机优缺点总结扩展-四段式状态机01. 前言状态机是FPGA设计中一种非常重要、…

java中default_Java 中关于default 访问权限的讨论

Java中关于成员变量访问权限问题一般书中会给出如下表格:简单地描述一下表中的内容:用private 修饰的成员变量只能在类内部访问;用default修饰的成员变量可以再内部访问,也可以被同个包(同一目录)中的类访问;default修…

python手机解释器_python3

Python解释器Linux/Unix的系统上,Python解释器通常被安装在 /usr/local/python3这样的有效路径(目录)里。我们可以将路径 /usr/local/python3/bin 添加到您的Linux/Unix操作系统的环境变量中(最好参照您python的安装路径进行添加),这样您就可以通过 shel…

increment java_Java中的increment()有什么作用?

publicclassThisTest{privateinti0;//第一个构造器:有一个int型形参ThisTest(inti){this.ii1;//此时this表示引用成员变量i,而非函数参数iSystem.out.println("Intconstructori—...public class ThisTest {private int i0;//第一个构造器&#xff…

python保存模块_Python使用Pickle模块进行数据保存和读取的讲解

pickle 是一个 python 中, 压缩/保存/提取 文件的模块,字典和列表都是能被保存的.但必须注意的是python2以ASCII形式保存,而在python3中pickle是使用转换二进制的数据压缩方法保存数据所以,在保存或者读取数据的时候,打开文件应该…

java 输出当月日历_java 实现打印当前月份的日历

实现当前日历的打印,当前日期用*来表示。关键得出这个月的第一天是星期几。基姆拉尔森计算公式W (d2*m3*(m1)/5yy/4-y/100y/400) mod 7在公式中d表示日期中的日数1,m表示月份数。y表示年数。注意1:在公式中有个与其它公式不同的地方&#xff…

pythonmessage用法_请问Mac下如何用python读取iMessage信息?

很早之前,学习Python web编程的时候,就涉及一个Python的urllib。可以用urllib.urlopen(“url”)。read()可以轻松读取页面上面的静态信息。但是,随着时代的发展,也来越多的网页中更多的使用javascript、jQuery、PHP等语言动态生成…

xmlhttprequest 跨域_跨域资源共享(CORS)安全性

跨域资源共享(CORS)安全性背景 提起浏览器的同源策略,大家都很熟悉。不同域的客户端脚本不能读写对方的资源。但是实践中有一些场景需要跨域的读写,所以出现了一些hack的方式来跨域。比如在同域内做一个代理,JSON-P等。但这些方式都存在缺陷&…

java 图片识别 tess4j_图像文字识别(四):java调用tess4j识别图像文字

转自:https://blog.csdn.net/a745233700/article/details/80203340javajava调用tess4j识别图像文字Tesseract-OCR支持中文识别,而且开源和提供全套的训练工具,是快速低成本开发的首选。前面记录过在java中调用tesseract-orc,该方法…

sql in转换为join_同一个SQL语句,为啥性能差异咋就这么大呢?(1分钟系列)

《数据库允许空值,往往是悲剧的开始》一文通过explain来分析SQL的执行计划,来分析null对索引命中情况的影响,有不少朋友留言,问explain结果中的type字段,ref,ALL等不一样的值究竟是什么含义。今天花1分钟简…

java rmi接口 超时设置_Spring RMI客户端读超时设置 | 学步园

标准Java的RMI设置我所知道的有三种方式,其中第1、2种不区分框架均适用,但影响整个JVM级别的RMI服务1. 启动时设置sun.rmi.transport.tcp.responseTimeout,单位是毫秒java -Dsun.rmi.transport.tcp.responseTimeout502.在应用程序中设置环境变…

python黑客库长安十二时辰 更新_【Python成长之路】python 从零学爬虫 -- 没时间看《长安十二时辰》电视剧怎么办?直接爬取所有剧情吧!...

【写在前面】最近大火的《长安十二时辰》真的是好看,算的是良心网剧了。但是由于平时工作时间较长,经常无法准时追剧,并且又因为不想见到元裁那对挨千刀的(作为演员,演技是值得肯定的,角色演绎的让人看的心烦)。因此就…

java字符串笔试题_五道Java常见笔试题及答案汇总

1、String和StringBuffer的区别?答:Java平台提供了两个类:String和StringBuffer,它们可以储存和操作字符串,即包含多个字符的字符数据。这个String类提供了数值不可改变的字符串。而这个StringBuffer类提供的字符串进行…

遥感原理与应用孙家炳_2.2遥感应用模型

章节概览遥感应用模型是遥感的一种定量化手段,通常在遥感领域有一个更广为人知的名词——定量遥感。但是定量遥感是一种方法模型而非技术手段,随着科学的发展,热门越来越体会到定量遥感的必要性。定量遥感的应用是十分广泛的,也是…

python升级命令debian_debian python 2.7.11 升级

首先下载源tar包可利用linux自带下载工具wget下载,如下所示:下载完成后到下载目录下,解压tar -zxvf Python-2.7.11.tgz进入解压缩后的文件夹cdPython-2.7.11在编译前先在/wp-content/local建一个文件夹python27(作为python的安装路径&#xf…

mysql必学十大必会_MYSQL 学习(一)--启蒙篇《MYSQL必知必会》

MYSQL必知必会一. DDL 数据定义语言Data Definition Language 是指CREATE,ALTER和DROP语句。DDL允许添加/修改/删除包含数据的逻辑结构,或允许用户访问/维护数据(数据库,表,键,视图......)的逻辑结构。DDL是关于“元数…

python连接wifi_python 自动重连wifi windows的方法

如下所示:# codingutf-8import urllib2import urllibfrom cookielib import CookieJarimport osimport reimport timeclass ConnectWeb(object):def __init__(self):self.cookiejarinmemory CookieJar()self.opener urllib2.build_opener(urllib2.HTTPCookieProce…

java for新循环_Java 8 新语法习惯 (for 循环的函数替代方案)

我们看这样一个示例public class ForDemo {public static void main(String[] args) {// TODO Auto-generated method stubSystem.out.println("Get set...");for (int i 0; i < 4; i) {System.out.println(i"...");}}}测试结果Get set...0...1...2...…