网页搜索框设计 第1篇
① 单个推荐词交替显示
比如,小米官网。
截图为动态图哦,大概5秒换一个推荐词。个人觉得间隔时间有点长了。
② 多个推荐词同时显示
比如,LexisNexis,全球顶级法律数据库中国站。
没有和小米一样,做1个推荐词的动态交替显示,是因为用户场景不同。
提示:推荐词可能会大于3个的,比如有8个。那就在用户每次回到首页后,显示一批新的推荐词。
或者,直接显示在框外,如下文所述。
网页搜索框设计 第2篇
注意!配置路由时引入组件的一个坑:路由对应组件导入错误
错误原因:自定义组件和框架组件名字重复,可能会错把框架的组件给 import 进来
解决:修改自定义组件的名称
方法一:编程式导航路由跳转
引入 vue-router 的 { useRouter }
使用 (_/search_),导航到搜索页面
方法二:声明式路由跳转
网页搜索框设计 第3篇
为啥居中?当然因为对于网站,搜索是核心功能。如果没有搜索功能的话,业务几乎无法开展。它最最最重要啦!
① 绝对居中
这种一般适用于搜索引擎的首页。页面基本就是一屏,搜索是最主要功能,其他内容不重要。
比如Google、百度。
Google的界面就相当干净清爽。嘿,我就是纯搜索的,赶紧搜呗!
百度,可以只显示一个搜索框。
如图所示的搜索框下的大块资讯,是可以在设置中隐藏的,不想看,关掉就好。
② 相对居中,垂直略靠上部。
适用于数据库网站的首页。
因为数据库的数据量动不动就是千万、上亿的,搜索是极其重要的功能,99%的用户都是带着目的来的,直接通过搜索找数据的。搜索框需要极其醒目,需要占据首屏大部分的位置。
但考虑到数据库网站的首页也需要展示其他信息,来增加用户粘性,一般会有好几屏,比如最新信息、热点信息之类的。这些就放在搜索框大区块的下方了。
比如官方司法权威网站——中国裁判文书网,全国的1亿多个案件都在这个数据库里,供免费查阅。搜索数据是核心功能,因此搜索框最醒目,占首屏大部分位置。其他信息依次往下布局展示。
网页搜索框设计 第4篇
概念:响应式设计(Responsive Design)是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面,随着屏幕尺寸的改变,自适应地改变页面布局。
通俗来说,这个网页就可以自动适应手机、平板、和电脑的各个分辨率。用户在各个设备上浏览这个web页时,页面布局和交互都是自动调节的,相当舒适。
以页面中的单个功能区为例:
Tips:做响应式设计,需要公司舍得投入资源,因为涉及到很多额外的工作量。最起码有以下:
为啥3套?因为针对分辨率需要做2个节点。我司一般是792px
好了,响应式设计就大概讲一下吧。不然又能写好几页。收~
以Youtube为例,大家可以感受下搜索框的响应式设计。
3. 按钮样式
网页搜索框设计 第5篇
① 可以放logo的右边
比如google的搜索结果页。
从设计理念上说,google的搜索框和logo放在一起,也能组成品牌和搜索引擎之间的强关系。即google=search. 用户们不也早就说,“你google一下”,而不是“你搜索一下了”嘛!
从UI上说,搜索引擎的内页一般只有列表,这样搜索框也能和列表左对齐,布局清晰。
② 其他位置,根据情况判断。比如Figma界面,文章最后有图。此处不赘述。
2. 宽度
搜索框的宽度(包括input box + search button),同样取决于搜索功能的重要性。其中,大概率取决于上文所述的搜索框的位置。
其次,也需要考虑输入的关键字的字符数。
另外,根据整体布局决定。