怎么做一个ui搜索界面设计

搜索是我们经常使用的功能，当我们面对复杂的信息时，想找到目标信息，就会寻找搜索功能的位置，今天小编主要给大家分享怎么做一个ui搜索界面设计，希望对你们有帮助!
 

1.搜索功能的视觉提升
 

(1)搜索框设计
 

统一设计语言:根据app的整体设计语言，如果页面是亲和力强的圆形按钮、大圆角的卡片样式，那么搜索框的设计语言也应该是一致的。如飞天猪搜索框的右上角对应品牌形象，实现了设计语言的统一。
 

搜索框比例:搜索框的长度应保证可输入字符的极限长度、推荐词的字符数，输入框的高度应符合移动端手指的触摸区域。
 

搜索框视觉层次突出:搜索框的线条与面在视觉层次上应更突出。
 

(2)搜索icon设计
 

图标符合用户的心意:在用户的心目中，放大镜图标就是“搜索”，如果图标很明显，那么就没有必要显示“搜索”这个词。
 

搜索icon形体:在设计中，我们发现icon的设计尺寸与屏幕有很大关系。在移动端中，屏幕较小，可以放置的图标和文本按钮更少。在较小的范围内，icon形体需要高度细化，太复杂和太细的线条会导致微弱的视觉对比度。
 

(3)位置设计
 

用户对某些用户界面元素和模式的位置有一定的期望和习惯性认知。搜索是其中一种模式，大多数用户希望在界面的顶部或右上角找到它。
 

2.搜索中加入微交互提升情感体验
 

随着技术的发展和经验的提高，越来越多的app增加了微交互动效。例如，在搜索页面中添加了过渡动画，以及语音搜索中的引导动效。
 

(1)提供即时反馈:在搜索过程中，视觉反馈的微交互让用户明白操作已经被系统接受，给用户一种控制感。
 

(2)促进互动:搜索中的微交互鼓励用户进行更多互动，它可以指导用户，教育用户，降低学习成本，让用户了解如何使用它。
 

(3)带来愉悦感:搜索过程中的微交互给用户带来流畅愉悦的体验。
 

例如，语音搜索的功能与品牌吉祥物相结合，创造出未来的智能感，在等待搜索的同时增加品牌吉祥物的加载效果，或者对于无法搜索的内容，搜索结果页面可以添加一些可爱的小效果来引导用户进行下一步操作，从而避免用户无法搜索的负面情绪，影响产品的使用。