您的位置:首页 > 设计资讯 > IT网络 > 内页

让我们一起来设计【搜索】

核心提示: 在UX领域,可见性是其根本概念之一:由物体的外形特征推导出其行为上潜在的可能。比如大门上的推板意味着门是可以推的;把

在UX领域,可见性是其根本概念之一:由物体的外形特征推导出其行为上潜在的可能。比如大门上的推板意味着门是可以推的;把手则说明门是可以拉的。你有没有遇到过走到一扇门跟前却发现开门的方式与你预料的大不相同的情况呢(译者注:有的,我的大学就是,不过每年HCI的课都会拿出来举例,给人一种“我是故意的”高逼格假象)?这是由于事物的外形特征和实际功能不匹配造成的。

同样地,搜索框的设计应该遵循其功能性。其目的是允许用户以关键字词的方式输入请求,那么它就应该看起来像是能被输入的,并且有一个能够明确表明其功能的相关按键。它还应该足够宽,这样才能容纳较长的文字。

让我们一起来设计【搜索】_新客网

eBags.com里的搜索功能结合了外形和功能

让我们一起来设计【搜索】_新客网

basmatitree.net的一个相比起来不那么常见的搜索框设计

可见性这个概念应贯穿于用户体验的方方面面。然而,目前有很多主流的网页搜索引擎为了标榜个性或品牌需要而选择另类的设计。Google就是个例子,它在首页采用了两个按键,其中包含了个莫名其妙的“I'm Feeling Lucky”选项。这两个按键都被居中置于输入框下面,所有组件的边框是如此之窄致使其功能性只能被含糊地理解到。

让我们一起来设计【搜索】_新客网

极简的谷歌搜索框设计

然而,这些设计已然被大众接受了,毕竟都这么多年了,仗着谷歌的名声人们似乎已习惯了把这种所谓的“简约”当成其“优秀”品牌文化的一种诠释。首页搜索框的位置和排版只是暂时的;当用户一在输入框里进行输入时,页面的排版就会变掉,而结果和搜索框会跑到页面的左上角。搜索按键的标签会变成一个放大镜的图标。直到这时,作为一个搜索功能的行动按键,它具备了合格的可见性。

让我们一起来设计【搜索】_新客网

谷歌显示结果的页面上一个更加常见的搜索框设计

Bing也同样在首页提供了一个相似的居中搜索框,一旦进行搜索后,搜索框等一系列组件会立马乾坤大挪移到左上角。

让我们一起来设计【搜索】_新客网

Bing结果页面上的搜索框

雅虎可能算是所有这些搜索引擎里最正常的了——采用了简单的布局和始终明确可用性的按键,这两者在搜索前后都会保持相当的一致性。

让我们一起来设计【搜索】_新客网

雅虎搜索界面上的搜索框

这三个网站都会在页面一加载好就自动定位光标到搜索框上,同时也都允许用户通过点按回车来提交搜索请求。

另外,它们都会在提交搜索后在输入框里保留搜索请求的内容,这能让用户对其搜索的信息进行确认,同时还能为下一次关联性的搜索提供便捷。

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:Beach

搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部