小小的搜索框,大大的网页设计难题

分享到:

2017-08-09 08:08:00

今天我们的话题是网站建设时如何设计搜索框,可能有的小伙伴就会说了:“搜索框?不就是一个长方体输入框加上搜索按钮最后放在页面右上角就可以了嘛!有什么好讲的。”当然啦,大多数网站的搜索框看似就是这样简单的模式,但是往往越是简单的东西越难设计好,设计搜索框要考虑到很多方面的因素,并不是套用同一个模板就可以的。

网站搜索框模板

我们先从搜索框的尺寸先说起,虽然看似所有的搜索框都长得大同小异,但是只要仔细观察就可以发现不同网站搜索框的尺寸是不同的,有的很长,有的很短。一般来说,搜索框的尺寸要与用户在这个网站习惯的输入长度相匹配。

举个例子,像CNN这种内容导向型的新闻资讯网站和淘宝这种电子商务企业网站就会选择比较长的输入框,位置也会选择左上角,一方面是因为用户一般会输入比较长的搜索内容,如果搜索框太短就会看不见前面的输入部分,另外一方面是因为搜索是这些网站的首要功能,左上角也是视觉注意力的黄金位置。

而像一些对搜索功能不太重视的网站就会选择短一点输入框,位置也会转到不那么显眼的右上角。

如果你是新站长不知道要设计多长,那么就先做一个可以容纳27 个字符的输入框,后面再慢慢根据用户输入习惯调整输入框的尺寸。

接下来谈谈搜索框的位置,右上角和左上角是最常见也是最符合用户习惯的两个位置,放在哪一边也是有讲究的。如果你的网站操作十分依赖搜索功能,那么你最好将你的搜索框的尺寸放大并放在网页的左上角(或者居中),这样可以让用户一眼就看到。如果搜索功能不是很重要,那么你可以把它放在右上角,这也是符合用户习惯但相对左上角来说聚焦能力弱一点的位置。

如果技术上允许,可以给搜索框添加两个功能。第一个就是让搜索框能够跟随输入长度变长,这样可以避免用户在输入大量内容时看不到前面内容的不便,又可以节省空间,让页面布局更加平衡。第二个功能就是让用户可以通过回车键提交搜索,很多用户都习惯用回车键触发搜索,这样设计就更加人性化了。

各位正在制作网站的新站长们,在设计搜索框时不要掉以轻心,任何细节都有可能毁掉整个网站设计,一定要不断实践、不断发现问题并优化设计才能真正做好一个网站!网站搜索框也可以不用自己设计,那就是直接用凡科建站的网站模板,网站也能快速搭建出来。


声明:此篇为凡科建站原创文章,转载请标明出处链接:
  • 热门模板
  • 热门专题
  • 推荐文章
  • 热门标签
合作伙伴