思考关于搜索框的设计(2)
作者:Maison 来源:麦兜的交互设计 发布时间:2008-12-09 18:17:00
搜索框容易犯的错误
在设计的时候我发现了几个问题:
1. 把搜索框放到页面底部,或隐藏在导航菜单中。
2. 将输入框设计比较短,暗示让用户使用短词来查询。
3. 提交按钮设计的比较小,迫使用户必须让鼠标指向非常精准。
4. 搜索框比较难让用户发现。
5. 搜索框的形式和其他功能形式一样的设计,比如联系人中的设计。
6. 在全设计中的页面(推广宣传),搜索框被设计的很难发现。
7. 提供功能过于强大的搜索,当用户是需要简单。
8. 提交按钮的名字随意的乱叫。
9. 并非搜索的功能,当看上去很像搜索框。
10. 提供多个提交按钮。
Wikipedia的搜索框就没有很直观的体现搜索。用户点击“Go”和“Search”有什么区别?功能上有什么不同?能不能在设计上让他们不太一样么。
设计体贴的搜索框
让我们来看看一些经常反复出现的困难和问题,设计师可能会在设计搜索框时所顾虑的。
搜索框放在什么位置?
有比较多的可能性,但只有少许是正确的设计。最方便的地方是网站顶部左上角或右上角。这两个位置比较让用户发现。因为用户最常见的F-型眼扫描模式。很多的博客往往将搜索框放在网站底部,看上去这个不是个好主意,但可能处于广告等的考虑吧。
如何命名提交按钮?
让提交按钮根据使用场景和用户情感化的设计来命名,是一个不错的主意。如:查找、查询、搜索或者一个ICON来表示。
这样的搜索按钮图片是非常让用户困惑的。
如何让用户如何搜索?
一个很好的想法就是把提示的文字放在输入框内,当鼠标点击输入框时提示消失。这样能明确告知该怎么利用搜索框。虽然它需要用小小段JavaScript来实现。
许多网站开始使用Google提供的一些搜索服务,但是可能用户不太喜欢这样的搜索结果,而且Google的算法也不太适合某些公司的网站需求。当不可否认Google的出现打破了一些规则。


猜你喜欢
- Python这些年风头一直很盛,占据了很多领域的位置,Web、大数据、人工智能、运维均有它的身影,甚至图形界面做的也很顺,乃至full-st
- 我就废话不多说了,大家还是直接看代码吧!'''Created on 2018-4-4'''k
- 判断访问是否来自搜索引擎的函数,有兴趣的可以试试! <% '检查当前用户是否是蜘蛛人 Function check(
- 杭州最美的季节里,淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题
- 实际上关键词叫 微信pushState只能分享落地页 更贴切一点应用场景:vue + vue-routervue-router使用hash模
- 下面是asp代码实现列出sql数据库中存储过程的功能,可自行添加其它功能:< HTML >< 
- 这是一个由加油站油罐传感器测量的油罐高度数据和出油体积,根据体积和高度的倒数,用截面积来描述油罐形状,求出拟合曲线,再用标准数据,求积分来验
- testify在团队里推行单元测试的时候,有一个反对的意见是:写单元测试耗时太多。且不论这个意见对错,单元测试确实不应该太费时间。这时候,一
- shapefile转换geojsonimport shapefileimport codecsfrom json import dumps#
- 目录前言1、背景2、模拟测试3、结论总结前言如果不是踩到坑,我估计到现在还不知道时间字段会四舍五入。1、背景通过 Java 代码获取当日最大
- 我们很容易用numpy()和from_numpy()将Tensor和NumPy中的数组相互转换。但是需要注意的一点是: 这两个函数所产生的T
- 引言一般来说,很多时候我们面临这样一种情况,即我们需要运行时间记录器,它不断向我们显示当前时间或在给定的时间间隔内保持执行一定的代码和平,在
- python ThreadPoolExecutor线程池的工作线程中出现异常时,主线程不会捕获异常。解决方法1:直接在需要执行的任务方法中添
- 目的:让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。在开发的过程中,像用户信息(名字,头像,token)需要vuex中存
- 前言使用np.savetxt()方法可以将数据保存为txt文件或者是csv文件。1 np.savetxt()存储txt文件1-1 基础参数n
- 平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 va
- 数据集成:将不同表的数据通过主键进行连接起来,方便对数据进行整体的分析。两张表:ReaderInformation.csv,ReaderRe
- 网络通用urllib -网络库(stdlib)。requests -网络库。grab – 网络库(基于pycurl)。pycurl – 网络
- 老师罚学生抄写英文单词,结果学生给抄成这样……
- 1.汇率换算程序案例描述设计一个汇率换算器程序,其功能是将外币换算成人民币,或者相反案例分析分析问题:分析问题的计算部分;确定问题:将问题划