1. <input id="pqntn"><font id="pqntn"><nobr id="pqntn"></nobr></font></input>

          • 思缘论坛首页
          • 论坛搜索
          • 下载记录
          • 每日签到
          • 设计软件,PS下载
          • VIP素材区预览
          • VIP素材区下载
          • 缘分?#39029;?#20540;
          发新话题
          打印

          [心得?#35760;É] 如何在移动应用程序中设计搜索栏

          如何在移动应用程序中设计搜索栏

          为什么Google今天成为搜索巨头呢?部分原因是因为它改变了我们寻找答案的能力¡£

          像查找单词定义一样简单的事情¡£20年前£¬你将不得不从架子上取下你的字典£¬以找到你的查询的答案¡£现在£¬你可以打开?#21482;?#25110;打开电脑£¬输入或说出单词£¬然后立即得到答案£¬而且只需付出很少的努力¡£

          这?#20013;问?#30340;快捷方式不仅存在于像谷歌这样的搜索引擎上¡£移动应用程序现在也具有自己的搜索功能¡£

          搜索栏到底是移动应用界面中的必要条件还是过度功能?让我们来看看为什么搜索栏对移动应用体验很重要¡£然后£¬我们将根据查询的上下文和应用程序的功能£¬看看设计搜索栏的方法¡£

          ©– 移动应用搜索不可或缺

          搜索栏多年来一直是网站的标准组成部分£¬但统计数据显示£¬用户并不总是将其视为必需品¡£来自Neil Patel和Kissmetrics的数据侧重于电子商务网站上搜索栏的使用£º



          如图所见£¬60%的受访用户更?#19981;?#20351;用?#24049;?#32780;非搜索£¬而47%的用户选择通过常规搜索功能进行可过滤的¡°搜索¡±¡£

          如果菜单设计精?#35760;?#26631;签清晰 - 无论它有多广泛 - 它都非常容易使用¡£但移动应用程序用户是一个不同的?#20998;Ž¬?#20182;们在移动应用程序的原因与网站不同¡£总之£¬他们想要更快£¬更集中£¬更方便的体验¡£但是£¬由于智能?#21482;?#23631;幕的空间有限£¬因此包含多项菜单或一组过滤器的方法并不可行¡£

          这就是移动应用需要搜索栏的原因¡£

          你可以在移动应用中找到很多用于搜索的内容£º

          内容驱动的应用程序£¬如报纸£¬发?#35745;教?#21644;博客;

          拥有大量库存和对这些库存进行分类的电子商务商店;

          约会和网络应用程序£¬用户连接大量的¡°匹配¡±¡£

          ©– 搜索在移动应用程序的设计方法

          设计物理搜索栏

          当涉及到应用搜索栏物理存在时£¬需要考虑以下几点£º

          上还是下?

          ¢Ù 应用程序顶部的全宽条形图¡£

          这适用于由搜索驱动的应用¡£大多数情况下£¬用户打开应用程序的目的是进行搜索¡£



          Facebook就是一个很好的例子¡£尽管Facebook用户最有可能参与应用程序中的新闻提要£¬但我有一种潜在的怀疑£¬即Facebook的数据表明搜索功能更常用 - 至少就第一步而言¡£因此£¬为什么它放在应用程序的顶部¡£

          ¢Ú 底部对齐?#24049;?#26639;中的选项卡¡£

          这适用于使用搜索作为应用程序的要功能£¬增强功能的应用程序¡£



          与Facebook不同£¬Instagram是一款非常简单的社交媒体应用¡£用户可以关注其他帐户£¬并通过全屏故事更新以及无限滚动新闻了解他们共享的内容¡£

          搜索功能存在于?#24049;?#26639;中£¬以便用户可以查看其他帐户以仔细阅读或关注¡£

          深还是浅?

          有时£¬移动应用会从应用体验深处的搜索功能中受益¡£

          你会在像Bed Bath&Beyond这样的电子商务应用中经常看到这种场景£º



          在此示例中£¬此搜索功能存在于主页上的标准产?#20998;?#22806;¡£此类搜索的结果也以独特的方式显示£¬这?#20174;?#20102;搜索的目的£º



          你还可以使用其他方式在电子商务应用上使用¡°深层¡±搜索功能¡£

          考虑每个产品附带大量店铺¡£如果你的用户想要了解其他消费者对产品的评价搜索功能将帮助他们快速获得包含特定关键字的评论¡£

          标签或放大镜?

          这将带到我的下一个设计点£º如何知道哪个设计元素代表搜索功能¡£

          以下是YouTube移动应用中如何使用此示例的示例£º



          我看到它的方式£¬放大镜可以在以下情况使用的搜索设计元素£º

          用户访?#30690;?#24212;用程序的主要原因之一是进行搜索£¬而它的竞争对手则不是¡£

          在这种情况下£¬YouTube需要迷你放大镜£¬因为它提供两种类型的用户£º

          ¡¤ 来应用程序搜索视频的用户¡£

          ¡¤ 来应用程序上传自己视频的用户¡£

          为了节省空间£¬YouTube应用程序标题中存在指向两者的链?#21360;?#22914;果你的应用程序中存在竞争优先级£¬请考虑执行相同的操作¡£

          ¡°搜索¡±还是提示?

          在设计搜索移动应用程序时要考虑的另一件事是搜索框内的文?#23613;?#35201;做出决定£¬你必须?#39318;?#24049;£º

          ¡°我的用户是否知道他们可以使用此搜索功能查找哪些内容?¡±

          在大多数情况下£¬他们会£¬但最好在搜索栏中包含提示文本£¬以确保你不会添加不必要的麻?#22330;?br />


          搜索栏告诉我¡°尝试搜索'Costa de Valencia'¡±¡£这不一定是明确的建议¡£它更能帮助我弄清楚如何使用这个搜索栏来研究旅行的地方¡£

          对于Airbnb的新用户£¬这将是一个有用的提示¡£他们可能会来到这个网站£¬认为它就像是支持用户查找航班和汽?#24213;?#36161;等内容¡£但是£¬Airbnb就是提供住宿和体验£¬所以这个搜索文本是引导用户朝着正确方向前进的好方法£¬并使他们不会收到¡°抱歉£¬没有与您的查询匹配的结果¡±回复¡£

          总结

          正如在这里看到的£¬搜索栏不是一些一次?#32536;?#35774;计元素¡£当你的应用程序为用户提供快速便捷的体验时£¬搜索栏可以减少他们在其中花费的时间¡£它还可以使应用程序成为更有价值的?#35797;´£?#22240;为它不需要太多的精力来获得所需的内容¡£

          来源£º站酷     作者£º对啊设计学院

          加入论坛VIP£¬下尽您想要的素材£¬点击进入£¡

          如果您在做图或者看教程£¨PHOTOSHOP方面£©£¬遇到任何问题请到问题交流区提问£¬地址£ºhttp://www.ofly.tw/forum-41-1.html£»我们会在第一时间帮助您解决问题£¬如果在教程后面跟帖£¬一律不给予解决£¡~

          TOP

          一如既往的支持支持

          TOP

          发新话题

          关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

          工信部备案£º沪ICP备09005587号 苏州市公安?#30452;?#26696;编号£º32058302001042

          Powered by Discuz Copyright © 2005-2015 www.ofly.tw All rights reserved.

          ½­Î÷¶àÀÖ²ÊÍæ·¨
          1. <input id="pqntn"><font id="pqntn"><nobr id="pqntn"></nobr></font></input>

                1. <input id="pqntn"><font id="pqntn"><nobr id="pqntn"></nobr></font></input>