小白求教,搜索框前加下拉框选择搜索条件

作者: 少校seo 分类: 黑帽seo资讯 发布时间: 2019-09-06 23:06

杨海明07-19 11:11

三级

html:

<。选择name = " " id = " MyTYPe " on change = " ChangeMyTYPe(此)" >;

<。option id = " type 1 " value = " 1 " selected = " selected " >;项目分类

<。optionid="type2"value="2 " >;获奖材料

……

<。/select>。

<。Inputplaceholder= "请输入... " id = "querykey"/>

js:

函数更改我的类型(范围){

varmyType=$(范围)。val();

如果(myType==1){

$ ("# queryKey ")。attr(“占位符”,“请输入材料提示”);

}elseif(myType==2){

$ ("# querykey ")。attr(“占位符”,“请输入不同的提示”);

}elseif(myType==2){

……

}其他{

……

}

}

搜索引擎优化类似于这个条件搜索框,查询的方法是自己写下黑帽搜索引擎优化。百度下不会太多,多练习。

HTML实例搜索字段(带源代码)

qq_2481957707-19 11:19

四级

如何让搜索框的体验更好?我总结了这些设计套

无论是网站还是应用,搜索功能几乎都是标准的,占据着轻或重的位置。一方面,搜索可以帮助用户节省时间并直接达到他们的目标。另一方面,它也是用户主动表达愿望的窗口,有助于收集用户需求,引导用户行为。

在不同的业务类型和不同的场景中,搜索的位置和形式可能会有很大的不同。是否有涵盖各种搜索体验设计的总体思路?

我最近玩了30多个应用,涵盖了10多个类别,如搜索、信息、知识、电子商务、社交网络、视频、音乐、导航、工具、O2O和生活服务。我总结了搜索设计的一些例程和设计形式,分解它们,并与每个人分享和讨论它们。我们可以结合自己的业务类型和特定的应用场景来选择合适的表单,以增强搜索体验。

乍看之下,速度和准确性似乎与技术而非设计更相关。但事实上,这三者相辅相成。我们可以通过合理的温度敏感设计来提高搜索效率和体验,使用户能够更快、更准确、更舒适地进行搜索。

搜索过程可以分为三个操作:单击搜索框/图标→输入文本/字符→单击搜索按钮/关键字。触发每个动作后,将会有相应的反馈。

使用独立的选项卡作为搜索条目,整个选项卡页面围绕搜索功能展开。整个页面为搜索功能的扩展提供了大量空间。它可以进行各种尝试,适用于把搜索视为重要交通入口的应用。

代表包括应用商店、推特和新浪微博。应用商店和推特的标签页中只保留搜索框和搜索关键词推荐。新浪微博做了更多尝试,包括分类、主题和不同类型的推荐,有更多的操作空间。

最广泛使用的形式,主要是在页面顶部,更引人注目。有些应用在滑动页面时也会在顶部显示搜索框,方便用户随时使用。

通常,搜索框中会有预设文本,提示用户可以搜索的关键词类型。目前,越来越多的应用(尤其是电子商务类)使用搜索框作为操作入口,并加入一些热门词汇、活动、新产品/新功能等。并且不限于一个单词,而是可以是一个单词、一个短语或者甚至一个句子。

搜索图标被广泛使用,通常位于页面的右上角。与搜索框相比,搜索图标的导向性稍差,操作空间有限,但它可以节省导航栏空间,适用于搜索作为辅助功能的场景。

例如,今天获得的学习模块以提要流的形式显示了用户的日常学习任务。该模块的预设功能是浏览和收听,内容是有限的(仅包括用户付费订阅的内容和平台个人向用户推荐的内容)。搜索在这里只是一个辅助功能,所以门户被削弱了。此外,还发现将此处的搜索设置为全局搜索(搜索完整应用程序)可以引导用户找到更多内容,并避免无结果/结果少的情况。

这种形式的搜索功能被削弱,门户在主页上不可见,有些被折叠在其他门户中,有些可能被手势唤醒。

典型的是搜索框出现在下拉列表中:搜索入口平时是隐藏的,不占空间,需要的时候可以快速的向下呼气。微信、iOS桌面和备忘录都采用这种形式。

搜索过程是改善搜索体验的关键部分。该过程可分为三个阶段:单击搜索框/图标→输入文本/字符→单击搜索按钮/关键字。

这两种形式的区别在于按钮的设计。前者有“返回”和“搜索”按钮,而后者只有“取消”按钮。这里,“返回”和“取消”功能是相同的,它们将结束搜索并返回到上一页。

因为键盘通常是一个搜索键盘,有自己的“搜索”按钮,从操作的连续性来看,键盘上的搜索按钮更符合用户的习惯。因此,目前大多数应用程序只在界面上保留取消按钮,这也更有利于用户关注。

一些应用程序突破了传统的搜索框风格,采用了更突出的形式(如Aibiying)。一些网站增加了图片、语音和二维码识别的入口,这也提供了更多的信息输入方式。

辅助区的推荐主要包括历史记录、热点搜索和分类。不同类型的应用在设计上有偏见。例如,电子商务应用程序,热搜索可以用作某些类别的操作入口和指南。但是,对于工具应用程序(如印象笔记),搜索功能主要用于查找用户自己的笔记。因为它没有操作属性,所以不需要热搜索。

#p#分页标题#e#

对于搜索到的关键词,搜索结果可以被更新(例如,酒仙桥3号房和1号房的租赁信息可以在58中增加),搜索结果以前没有被处理过(例如,加湿器在京东被搜索过,只浏览了第一页,并且购买没有完成),或者搜索需要被重复(例如,从高德地图中的不同起点搜索地点和路线规划),然后关键词需要被重新输入。

历史记录可以提高重复搜索的效率,但并非所有搜索都需要历史记录。如果搜索结果的操作相对简单,并且可以一次完成,则可以根据情况省略。

例如,应用商店,无论是搜索关键字还是准确的应用名称,用户搜索后最有可能的操作是下载。如果你不满意,你可以离开,但离开后搜索同一个应用程序的可能性很小,历史记录的作用有限。

历史记录有两种主要形式:一种是标签型,另一种是列表型。标记节省空间,并具有很强的表格扩展性(它可以显示更详细的信息,还支持收集和删除等操作)。

考虑到隐私问题,历史记录通常支持删除。有两种删除方式,一种是删除单个栏,另一种是清空所有栏。删除单个条的功能主要在列表类型中找到。对于某些标签类型,长按也可以用来删除单个条(例如淘宝)。

应该注意的是,历史记录只在搜索的初始阶段使用。之后,可以引导用户使用收集、订阅、足迹等功能,在合适的场景下创建更好的体验。例如,腾讯的视频录制和观看历史不仅可以阻止用户搜索,还可以记录进度。对于值得购买的东西,搜索结果页面上会添加一个“注意”按钮。关注后,用户可以在主页的“关注动态”选项卡上看到不断更新的搜索结果。

热搜索的功能类似于搜索框中的预设副本,并起到引导作用。然而,由于辅助区域的空间有限(键盘将覆盖它的一部分),为了尽可能提高利用率,热搜索中的字数通常是有限的。

热门搜索的显示形式主要是标签。因为一些热门搜索是可能暴露隐私的个性化推荐,一些应用程序还设置了隐藏按钮。

当应用程序中涉及许多业务、类型和类别时,可能会出现各种类型的搜索结果,它们的形式和操作也不同。为了让一些有明确目的(清楚地知道要搜索的类别)的用户快速准确地找到他们期望的结果,经常使用分类搜索。

搜索框中的类别选择适合有明确要求的用户。例如,在这个链中,用户特别清楚是搜索二手房还是租房。默认情况下,在搜索框中限制类别可能会导致搜索结果的偏差。为了照顾更多的用户,大多数应用程序提供“全部”类别,默认情况下在“全部”类别下搜索结果,如微博。

如果您没有在搜索框中选择类别,您仍有机会在搜索过程中选择类别。淘宝使用标签以不同的方式显示“全部”、“天猫”和“商店”的搜索建议和结果。另一方面,亚马逊在输入过程中提供类别选择(默认情况下,搜索所有类别,但提供了搜索小类别的门户)。同样,还有58条京东、闲鱼等。

更多应用程序使用搜索结果分类的方式来呈现不同类别的结果,减少了用户在搜索过程中的决策压力。最常见的形式是tab(代表:智虎、支付宝)。第一个选项卡通常是各种结果的堆栈,后面的每个选项卡都是一种类型,便于切换。其他人使用标签来区分(代表脸谱、网易考拉和京东),使用列表作为类别条目(代表58),并直接堆叠各种类别模块(更像是基于列表的扩展,代表微信和豆瓣为每个类别公开一些内容)。

清除图标是一个深思熟虑的小设计。其功能是用一个键清除搜索框的内容,并与引导副本交替出现:当键入文本时,引导副本消失,出现的图标被清除;单击清除图标清除文本,并引导文案出现。

输入过程匹配:在输入过程中,对于输入的每个单词/字母/字符,将进行匹配,页面信息将被更新。这里的更新信息可以是针对输入内容或直接搜索结果推荐的信息。

前者是将关键字与输入内容相关联,如“女性”,推荐信息显示“女包”、“女鞋”和“女袜”等。该方法可以立即提供搜索建议,具有很强的指导性,可以提高效率。

后者是立即在数据库中搜索输入的每个单词/字母/字符,并同时显示搜索结果。这种无需点击搜索按钮即可实时显示搜索结果的方式称为“实时搜索”。

#p#分页标题#e#

即时搜索可以直接快速地看到结果,这在一定程度上可以提高搜索效率,但需要很高的计算能力。如果计算能力跟不上它,它可能需要等待加载,从而影响体验。它通常适用于数据量小或数据库已在本地下载的情况。

例如,QQ邮箱已经提前在本地下载了一些数据,搜索结果可以实时看到(只包括下载的数据)。单击“继续在服务器上搜索”向服务器请求数据。

输入完成匹配(Input Complete Matching):只有在输入完成后,点击“搜索”按钮开始搜索匹配,直接显示搜索结果。该方法省略了输入过程的实时分析和引导过程,适用于搜索功能要求不高的情况。

这是一个非常聪明的组合。它不仅为用户提供了必要的帮助和指导,还减少了请求的数量,以避免等待加载。

系统可以根据现有的搜索数据对关键词进行分类,并与数据库准确匹配。如果用户选择了已经关联的单词,他可以获得更准确和可控的搜索结果(并且这种选择也是对系统本身的反馈)。同时,由于分类已经提前完成,搜索可以直接检索,减少了计算量,速度也更快。

关键词的表达是灵活的。最简单的方法是根据输入的单词直接显示联想的关键词(比如今天的标题)。然而,由于页面空间有限,只有少数被键盘覆盖后才能曝光,所以每个人都发明了二级标签。它会显示关键字,并提供更多相关条目。

如下图所示,搜索“牛肉肉”并推荐关键词“牛肉”,然后是三个小标签“风干”、“手撕”和“张飞”。这三个关键词都是“牛肉”的再联想。点击整列搜索“牛肉”;点击二级标签(如“张飞”),搜索“张飞牛肉”。应当注意,次级标签的操作区域非常小,要求高操作精度,并且数量不能超过3。

有时系统推荐的关键词不够准确,用户需要稍后输入其他内容。但是,无论是关键字还是辅助标签,搜索都是在单击后直接执行的,这要求用户停用搜索结果页面上的搜索框,继续改进搜索词,并中断搜索过程。YouTube、脸书、亚马逊、淘宝等。采用了“向上填充”功能。单击关键词或辅助标签进行搜索,然后单击“向上填充图标”将关键词填充到搜索框中。

还可以预先给出与关键词对应的搜索结果的数量,方便用户控制搜索词的粒度,也避免了没有结果或结果少的情况。代表包括推特、公众评论、喜马拉雅山、连锁店、百度外卖等。

除了提供关键词之外,您还可以判断输入的单词,并在适当的时候提供分类建议(例如58、京东、亚马逊、闲鱼等)。,请参考上面的“分类搜索”一节。作为一个综合的生活服务平台,有多种类型的业务,搜索“牛肉”并有多种类别的相关信息,选择“食物”和“吸引投资”作为最有可能推荐给用户的两个类别。

此外,一些搜索结果可以在[之前链接到[/s2/]搜索引擎优化搜索框,并与关键词一起显示。这些搜索结果可能是平台用户的热门搜索、对当前用户的个性化推荐或平台运营和推广的内容。

搜索后,您通常会得到n个以上的结果,这些结果可能不是同一类型,可能有不同的表示形式。如何清晰有序地显示这些结果,以便用户能够准确快速地找到所需的结果?这涉及几个问题:

智能纠错:当用户输入错误的单词时,可能找不到结果。它要求系统判断和识别、推荐正确的单词或直接显示正确的结果。

默认排序:默认排序结果决定用户第一眼看到什么,并对后续转换有直接影响。一般来说,会根据用户偏好、点击率、转换率、平台运营、商业推广等因素进行综合排名。排序策略通常很复杂,不同的平台会考虑不同的因素并给出不同的权重。

保留搜索词:点击进入搜索页面时,输入的词仍然保留在搜索框中,一方面提示搜索到的关键词,另一方面方便用户修改和进行二次搜索。

结果对应于搜索词:许多应用程序的搜索内容不限于标题和结果列表的暴露部分,这导致搜索结果看起来与搜索词无关,容易引起用户混淆。

#p#分页标题#e#

公众评论举了一个很好的例子:我们搜索了“牛栏山”(牛栏山是一个地名,也是一个葡萄酒品牌)。公众意见搜索的内容包括商店名称、地点和推荐菜肴,然后可能有3种搜索结果:

分类筛选:分类筛选的维度与业务类型密切相关,不同行业之间差异很大。一般来说,排名包括时间、距离、热度、价格、销售量等维度。过滤维度更加丰富和个性化,甚至会根据搜索内容而变化。

一般的排序功能将放在搜索字段和结果之间,以便于切换。然而,一些应用程序(主要是外国应用程序,如亚马逊和YouTube)折叠了分类功能,不像前者那样方便。

当过滤器项目的尺寸很小时,过滤器(以及排序)可以放置在搜索栏和结果之间,单击后,结果将以下拉菜单的形式出现。如果尺寸很大,通常使用侧杆。需要注意的是,多重筛选维度的叠加可能导致结果太少,而预筛选结果的数量是一个很好的方法(如网易考拉从海外购买)。

对于前两种情况,可以提示用户或自动纠正错误。对于后者,它通常会匹配相关结果进行补充,或者提示用户更改关键词、扩大搜索范围、订阅等。

例如,语音搜索不仅为视力不好的老年人提供了一种友好的方式,也适用于一些输入不便的移动场景。例如,导航内置语音搜索可以在驾驶时实现路况查询、位置搜索、路线规划等功能。此外,在一些音乐应用中,可以引入旋律来实现“听歌曲和识别音乐”,甚至“哼唱和识别音乐”。

借助图像识别技术黑帽seo,图像搜索也得到广泛应用。百度的“搜索图片”可以搜索相似的图片,跟踪图片来源,获得不同大小的图片。小型猿类的“照片搜索”使用光学字符识别技术快速识别问题,消除了繁琐的输入过程。淘宝和其他电子商务公司一方面可以搜索相同的产品,另一方面在无法准确描述产品名称时搜索产品名称。

文章对各种设计形式进行了分解和分析,希望能给大家带来一些启发。受空间和自身水平的限制,有些内容只是一点点介绍,还有更深层次的应用需要探索。

实践出真知。一方面,我们接触到一个应用程序,它可以从特定的搜索形式中逆转其功能定位和应用场景,并思考是否有更好的方案来提高我们的思维能力。另一方面,在未来的设计实践中,应该从功能入手,综合考虑业务类型、功能定位、目标用户和应用场景,选择最合适的形式,改善搜索体验,让用户搜索更快、更准确、更舒适。

网站在早期很难排名,那是因为你的网站在基本优化方面没有做好。怎么会有排名呢?第一页说基本的优化应该从最基本的地方开始。早期阶段是先设计网站和网站...

随着情人节的结束,二月设计圈干货系列悄然更新。新工具和新资源仍然是同样的重量和味道。与以前的收藏类似,免费材料、工具和服务占了90%。...

每个网站都由不同功能和类型的页面组成。当用户打开错误的链接时,网站的404页将会派上用场。一个可靠的404页应该指导用户继续浏览,同时通知他们错误的位置。...

今天,让我们来谈谈如何使用Axure来实现上下滚动的效果。如何实现上下滚动的效果:让内容在显示区域滚动;当内容面板不接触顶部时,让内容面板移动到顶部;内容面板接触顶部并且没有连接...

你还在加班来实现每个小函数的“代码”吗?如果你今天想早点下班,请过来看看我最新的工具包。有了它们,您只需要直接使用这些函数,或者比作者创建它们时花更多的时间来优化它们。...

当我们需要设计基于任务的函数时,除了基本线路图和交互之外,我们还需要事先知道整个函数的内部逻辑流程,简称函数逻辑图。以一些熟悉的基于任务的函数为例来帮助你理解...

如何设计简单的新闻聚合产品?文章介绍了制作一个非常简单的新闻聚合产品的7个步骤。好奇的你和我会过来看看。你知道3号线或4号线县城的用户在哪里看新闻吗?不是今天的头条新闻,但是...

@Mockplus原型设计:许多人可能认为搜索框不需要设计,毕竟这只是两个简单的元素。然而,搜索框通常是内容复杂的网站中最常用的设计元素。当用户遇到相对复杂的网站时,他们...

当你面对两家质量相同、价格相同的咖啡店时,服务设计的意义在于让你进入其中一家而不是另一家。目前,服务设计一词在中国已被许多从业者所关注,并在近几年得到了广泛应用。...

老年用户群仍有巨大的增长潜力。但是像任何其他用户组一样,年长的用户需要我们设计满足他们需求的体验。年龄的限制意味着在数字技术中吸引用户的一些传统方法是正确的...