所谓的“左右横滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的横向内容滑动设计。用于在同一个页面的 X 轴方向拓展内容空间，“左右横滑”的交互方式被广泛应用于各类 App 中。

横向滑动要解决什么问题？

横向滑动作为手势交互的一个拓展，目的初衷是提升信息“内容和操作”的拓展性。

1. “内容”拓展性：

移动端的任何类型页面内容都可能无法在一个界面呈现完整，因此滑动去呈现更多的内容，常见的当然是纵向滑动。但它无法承载所有类型内容呈现的问题，这个时候就需要横向滑动来解决。

2. “操作”拓展性：

当一个页面的内容已经是固定完整的，这时候需要用户进行一些行为操作，如常见的下载、删除、添加、管理…,而这些行为如果直接呈现在界面上必然导致混乱，因此需要配合一些横向滑动激发这些行为，从而保证界面的流畅体验。

目前横向滑动的典型设计场景及利弊分析

横向滑动从移动端手势出现到现在十几年的时间已经有了非常典型的使用场景，接下来我们就来列举一下有哪些常见的类型：以下从「清晰度、效果」两个纬度进行分解

1. 入口型横滑切换（手机主页app、各大电商入口、banner…）

解决内容拓展问题

这类场景通常是用户最熟悉的，不论从认知清晰度、效果角度都是不错的，主要原因是场景曝光度非常高、频次非常高；比如Android\ios首页横滑切换app入口每天上百次的操作频次；

2. 内容型横滑切换（微视、垂直电商、地图）

解决内容拓展问题

这类切换方式适合内容相对聚焦和单一的产品，比如垂直类电商：wish、唯品会，所有内容仅仅是通过类目来区分的产品；微视：内容统一为小视频…;百度地图：横滑查看更大范围地图…;由于内容的高度统一和整合，因此切换难度低，但在认知的初期会稍有一定的门槛，原因是大部分app都是纵向滑动feeds流，而且用户记忆是海马记忆，不会特别清楚记得app的操作，所以新打开app和新用户会有一个认知过程，但门槛不高。

3. 隐藏操作唤起

解决操作拓展问题（管理列表、IM列表、通讯录list…）

解决操作问题

在所有类型中的横滑，只有这种方式不是浏览型手势而是操作型，通常这类功能隐藏在列表中，为了保证列表信息的有效性和美观度，选择隐藏操作功能，由于是低频操作，所以初期需要用户发现并成功使用该功能；不过目前很多list页面都采用这种通用的交互手势，因此用户并不难发现。

4. 模块内容横滑切换（饿了吗\品质优选）

最复杂也是最容易出现问题的

解决内容拓展问题

这是最容易出错的一种场景，就是在整个界面中只有一个模块采用横向滑动，而其它内容又是纵向feeds流滑动；由于移动端内容的路径多、入口多，因此用户的核心操作流是：找入口——看信息——做任务；在这个过程中任何一个隐晦的、不常见的交互都很容易被用户忽略，比如说：饿了么品质优选、唯品会二级类目、去哪儿旅游推荐…，这些案例其实是为了横向空间拓展更多的内容而做此选择，但通常情况下隐藏内容点击率会骤降，很少有用户耐心的横滑浏览完成，因此设计师要严格把控数量以及内容的质量；在这里还有一种情况是很严重的，就是模块级的横滑内容与纵向列表之间有叠加交互，就会导致用户反复在2中操作中完成任务，这一点非常不建议使用此手势，当然以下案例并没有这种情况。

横向滑动的优点

1. 几乎能够100%适配到所有设备，保持了一致性

2. 为二级信息提供了展示空间，并且不占用页面空间。

比如在图片画廊里的图片，横向滑动可以让用户预览内容，可以划过或者点击查看。

3. 横向滑动节约了纵向屏幕空间。

而不是将所有内容都展示在一个很长的页面。纵向布局让所有的信息都成小块展示。但是横向滑动更加灵活。现在，内容可以在横向和纵向两个方向同时展示。

4. 横向滑动可以让用户预知分类里的内容，通过往一边滑、向下滑，差不不同类别的内容。

两个维度让用户可以在同一个界面中看到更多的类别和选择。

5. 横向滑动的内容需要保持高质量和持续吸引力才能提升点击转化。

慎用左右横滑设计？

1. 挑选合适的使用场景

单页多维度的信息结构是“左右横滑”最适合的应用场景。传统的 List 适合纵向无限呈现单一属性的内容（比如朋友圈或知乎的回答），而对于 App 首页等多种信息聚合的页面，就适合横向开拓内容维度。

2. 显眼并适宜的主题展示

3. 引导左右滑动（可见性）

4. 控制数量并避免极限情况

5. 低效率和错误的优先级

设计师们都喜欢“左右横滑”的设计，不仅因为信息密度大，页面层次好梳理，更多也是因为操作方式“酷”。但有经验的设计师会尽可能拒绝“左右横滑”，因为它的效率还是太低。而效率低，体现在两个方面：

首先，就像上面说过的，更多的小白用户对左右滑动的预期并不强，还是更加适应纵向滑动的传统交互方式。违反了“Don’t Make Me Think”的基本原则。

其次，纵向和横向优先级常常导致预期错误。以下图 App Store 为例，所谓的内容都是 App，泳道只是用不同的维度把 App 组织起来。

如果你要购买其中一个资源位，你要更高优先级“泳道”中的第二屏位置，还是低优先级“泳道”中的第一屏位置呢？

文章来源：优设   作者：Jingwhale Design

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

个人中心作为app类的重要页面，无论是交互设计师还是视觉设计师，都需要对个人中心的设计过程做到胸中有数，本文就“个人中心”版块进行分析与总结，一起进步。

文章来源：站酷

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--手机appUI设计--

 （以上图片均来源于网络）

 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

       手机appUI界面设计赏析（十）

     手机appUI界面设计赏析（十一）

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

  蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

“个人主页”是一个听起来很熟悉，但又跟“个人中心”傻傻分不清楚的一个模块，一般情况下处于APP底Tab的最右边，通常喊它为“我的”。

这个界面看似没什么挑战可言，给设计师一种“不就是排排版的事儿嘛”的膨胀误解，认为完全在自己射程范围内，整个人都有点飘。

但最近发现，它并不像表面所呈现出的那么简单，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。

好，废话不多说，上才艺。

 个人主页和个人中心的区别是？ 

讲“个人主页”前，先跟大家捋一下它俩的区别，避免混淆。首先，并没有官方定义它们的名字，只是喊的人多了也就成了它们的名字了。

所以“个人主页”也好、“个人中心”也罢，只是大家习惯性称呼，为了合作过程中大家在同一个话语体系，提效而已。

要说它们俩的区别，其实还是有的。

 什么是个人中心？

个人中心，承载着自己账号信息、设置管理、福利信息等功能的聚合地，主要用于个人信息的管理。

它常见于“工具类”产品中，如下：

对于“个人中心”，设计师要考虑的最核心是：如何解决“效率”问题。因此信息布局合理，视觉尽可能减少干扰，变得格外重要。

什么是个人主页？

个人主页，一般承载着用户个人信息、个人影响力、生产的内容等等，以此突显自己魅力或定位。

常出现在内容、社交、社区类产品中，比如以下产品：

当然，还有一些产品，它既包含“个人中心”，也包含“个人主页”，如下：

整体来看，“个人中心”偏向于个人信息的管理，更关注于“效率”；而“个人主页”偏向于展示自我，关注点更“多元”，会复杂一些，下面会细讲。搞明白了它们的区别之后，大家会发现“个人中心”相对更简单一些。

所以，这次我们先聚焦聊聊“个人主页”。

 设计“个人主页”前思考什么？

在工作中，做任何需求都应该有其目的或目标，不然所有的忙碌都容易沦为资源的浪费。“个人主页”也应有其价值和使命。

像上一趴所说，“个人主页”是为了让用户突显或塑造自己的魅力，很像是一个人的“个人名片”。那么，用户塑造个人魅力对产品有什么价值和收益呢？目标是什么呢？

拿短视频产品举例：如果用户能够在“个人主页”充分展现自己的才华和魅力，从而带来了更多浏览者的“关注”，那他们就更有动力分享或生产优质内容，进而使产品内容更加丰富；从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存，让内容生产者有更多的涨粉空间，粉丝规模做起来之后再进行商业化。

这样对消费型用户、内容生产者、平台方都有利，进而处于良性循环。

这就是“个人主页”背后的大概逻辑和目的。

 如何进行“个人主页”的设计？

了解完“个人主页”存在的价值和目标之后，那么，作为产品或设计师们需要帮助用户解决几个问题：1.树立人设；2.辅助吸粉; 3.助力变现。

 1.树立人设 

人为什么需要树立人设？

树立人设，本质上是两种目的：获得认可（提升关注/约X），获得收入（提升变现能力）。

如何帮助用户快速建立人设？

个人主页里有几个区域，影响着用户建立人设：a.头图区；b.个人信息区；c.作品区；

a.头图区

头图，指的是“个人主页”顶部的图片区域。

为了让浏览者进入“个人主页”快速了解作者，头图这种处理手法，是很多社交/社区/内容类产品，“树立人设”的标配。

比如：社交类产品的头图，用户要么放自己照片，要么放风景；

大V、商家等角色的用户，会把头图打造成自己品牌的招牌，辅助浏览者快速了解自己定位。

不过，头图尺寸占比要把控好。

尺寸大小会影响界面的“屏效比”和用户“上传门槛儿”，对产品核心数据也有着千丝万缕的关系。

b.个人信息区

个人信息区，也是作者的基础资料。

一般包含着：用户的昵称、账号、简介、标签、粉丝关注量、关系链等信息。这个区域设计时需要重点考虑“信息亲密度”和“信息优先级”。

信息亲密度：指的是如何将更亲近的信息，以信息组的形式传递，减少用户认知成本。

比如下图，常见的社区或内容类产品针对“个人信息区”的处理方式（同一颜色的色块代表亲密度更强的信息。）

同时，“信息组”与“信息组”之间也需要处理好亲密度，比如“小红书”和“instagram”的“好友关系链”与“关注按钮”是放一起的，方便用户快速作出“关注”决策。

c.作品区

作品区的重要性不用多说了，它是作者“树立人设”的重要组成部分，也直接影响着浏览者是否愿意关注的关键因素。

“作品区”设计时，有2个重要因素需要考虑：“作品尺寸占比”、“作品信息外显”。

1）作品尺寸占比:

比如下图，同样是短视频产品，Before作品区一排仅1个作品，剪映2个作品，而抖音3个作品。

单从排版美丑来评价是不负责的，那么如何决策哪种处理手法“对”的呢？

这需要通过自己产品定位分析，以及通过不同布局方式进行上线测试，重点观测核心数据（用户消费时长/作品消费个数/关注率等）的影响情况来决策。

2）作品信息外显:

除了作品本身，它的“辅助信息”也是帮助用户做决策的重要因素。

比如：“Before”除了对作品热度信息（浏览量、评论量等）外显以外，更强调和引导用户进行互动，如：收藏、分享、评论、充电；“剪映”根据产品属性，更强调“使用数”和“作品的描述文案”；“抖音”作品仅外显“点赞数‘，同时通过“置顶”和“刚刚看过”提升用户决策效率。

以上可以看出，头图区、个人信息区、作品区，是让浏览者快速且准确的了解或关注内容创作者重要组成部分，也是内容创作者“树立人设”的主要手段。

 2.辅助吸粉 

辅助吸粉，换句话说也是辅助用户提升“关注率”。

不可否认，清晰的编辑个人信息，产出优质的内容，是用户吸粉的根本，我们能做的只是“助攻”。

所以，在做此类“个人主页”时，我们需要通过设计手段做个靠谱“奶妈”，有几个维度可以尝试：a.强化关注；b.沉淀粉丝。

a.强化关注

衡量粉丝多少，是通过用户是否点击“关注”了内容创作者。

因此身为产品工作人员，在个人主页设计时，除了其它信息呈现以外，在不影响页面信息合理性的情况下，尽可能强化“关注”按钮，引导用户操作。

b.沉淀粉丝

有了粉丝之后，提升粉丝忠诚度和粘性，是每一个内容生产者面临的问题，也是工作人员们需要帮内容创作者解决的。

左边是“快手”，在个人主页内有粉丝群入口；右边是“火山”，打造自己的“圈子”，粉丝们可以在里面发自己的动态，或进行互动。

这么做是为了提升内容创作者的粉丝粘性，给他们更大的空间去运营粉丝，培养感情，打造更忠诚的私域流量。

 3.助力变现 

除了树立人设、辅助吸粉以外，助力他们变现，才能使他们长期扎根于此（留在自己平台）。不然大V们会带着自己圈到的粉丝，去别的地儿赚钱，给你的产品带绿帽子。

拿知乎举例，内容创作者可以在个人主页挂自己的商品橱窗，给符合自己人设的商品带货。

也可以开通付费咨询模块，通过帮助用户解答问题实现变现。

除此之外，还可以做付费Live课程。

再来看下像哔哩哔哩、抖音、火山、QQ音乐等平台，在个人主页都有辅助用户变现的入口。

下面是“声撩”，利用用户声音的优势去变现，比如：陪打游戏（软妹子声音让王者峡谷的汉子们兴奋）、睡前陪聊、睡前连麦等等。

如果你真的很富有，且不想让妹子陪聊陪打游戏，就是单纯的想砸礼物引起注意，右图可以看出，有个入口是直接“送礼”。

这么做满足土豪诉求（博取主播注意），满足主播诉求（变现），满足平台诉求（抽成），何乐而不为。

同时，也越来越多了产品不仅解决C端用户的变现诉求，同时解决B端用户变现诉求。比如，抖音赋能商家，商家号的“个人主页”可以自定义tab，默认展示“商品”tab。

用户不仅能在这里消费作品，还能通过作品建立的信任促进购买行为。

再比如，instagram也提供B端用户开店铺功能。

以上，是关于“个人主页”如何助力用户变现的案例，其实玩法还有很多，这里仅提供一些思路，大家平常玩APP时可以多关注下。

   总结   

总的来说，“个人中心”与“个人主页”最大的区别在于：“个人中心”主要是“给自己看的”，更注重使用效率。

“个人主页”主要是“给他人看的”，更注重突显自己魅力。在满足使用效率的基础上，需要通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，从而使用户和平台实现双赢，打造一个更完善的生态。

以上，是“个人主页”设计相关思考，希望对你们有所帮助。

文章来源：UI中国    作者：大牙

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--手机appUI设计--

 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

可能很多人认为搜索设计很简单：在主页顶部设计一个搜索框或者搜索图标，就可以完成操作。但搜索前、中、后的体验大家有没有仔细考虑过呢？

在搜索过程中需要展示什么？如何帮助用户尽快找到他们想要的？搜索的体验如何与其他体验相联系？这是很多设计师思维模糊的地方。

在本文中，将介绍搜索设计需要了解的内容，以及在不同App和案例中的搜索体验。 

一、搜索前的体验

搜索是产品中不可或缺的一部分，无论打开哪个App, 我们都能很快找到搜索功能。搜索作为一个功能入口，简单的呈现方式对用户来说很重要。

搜索设计常见的形式有3种:

• 顶部搜索框

• 图标(放大镜)搜索

• 底部搜索导航

从视觉和优先程度来看，底部导航>搜索框>图标。那么每种形式的优缺点是什么，又分别在什么时候使用呢？ 

1、顶部搜索框

搜索框通常位于App主页的顶部，作为一个大的触摸目标，更容易被用户发现和使用。搜索框的组成一般包括容器、预设文字、操作按钮。

容器通常填充为白色或灰色，里面带有预设好的产品文案。但是容器什么时候用白色，什么时候用浅灰色呢？这取决于App主页的背景色。

设计准则是始终将容器的颜色与页面背景色相对比。拿谷歌地图和微信读书相比较，灰色背景下用白色的搜索框，反之亦然。

当然也有例外，Airbnb在白色背景上就有一个白色的搜索框。为什么这样设计呢？因为它的搜索框带有阴影，能和背景作出区分，也是一种可行的设计方法。

预设文字的作用是提示用户要搜索的内容或搜索方向，告诉用户可以从搜索中得到什么。在App Store中，预设文字告诉用户可以搜索“游戏、应用、故事等”，Messenger中的预设文字只有“搜索”，为用户提供功能入口。

预设文字在内容浏览类App中很常见——不仅可以展示拥有的内容类别，还能结合搜索趋势来积极地推广热门内容。比如微信读书的搜索框使用最近流行的书作为预设文字，以此提高内容的曝光率，吸引用户阅读。

操作按钮虽然与搜索相关，但摆放的位置不固定。可能在搜索框内部，也可能在搜索框两侧。哪些图标/文本按钮对搜索有帮助呢？最常见的是搜索框中的语音输入功能和二维码图标。

另外一个好的搜索体验的关键是能从视觉上区分与搜索相关的图标。

2、搜索图标

如果一款产品希望用户专注于浏览内容，或者不需要频繁使用搜索，可以采用图标的样式将搜索入口放在页面顶部。例如，在Medium上用户通常是漫无目的地浏览内容，而不是搜索特定的主题；Facebook上的用户通常只想浏览朋友的帖子，很少搜索内容。 

3、底部搜索导航

与前两种形式相比，底部搜索导航离用户距离最近，更容易作为接触目标也被赋予更多的特性。

UberEats通过主页的排序和过滤，帮助用户分类感兴趣的餐厅，并将搜索作为底部导航的第二个标签，这样用户就能够不断看到和探索新餐厅。

Tiktok也将搜索入口放在第二导航中，完整的首页有利于为浏览视频的用户提供沉浸式的体验。

二、搜索页内容展示

当用户想搜索某个内容，点击搜索框之后该做什么呢？App应该如何帮助用户搜索？

用户点击搜索框时会弹出一个页面，我们将其定义为“搜索页”。搜索页的目的是让用户做好搜索的准备，对要寻找的内容进行提示，拓宽用户对要搜索的内容的看法。

弹出的搜索页帮助产品完成两个主要任务：

• 利用视觉和交互告诉用户已经做好搜索的准备；

• 通过页面上的内容提醒用户他们正在寻找的东西，或者为他们提供可能感兴趣的东西。 

1、视觉和交互——做好搜索的准备

当我们有一个特定的搜索目标时，我们的注意力就会完全放在搜索框(或搜索图标)上，如果突然被引导到一个新的页面，可能会带来零碎的体验。

所以要把“搜索前”到“搜索页”的转换做得更自然，让用户感觉仍然在同一个页面上操作一样。点击Facebook的搜索图标，图标通过平滑的动效扩展成一个搜索框。

无论搜索在什么位置，显示搜索框的不同状态很重要，告诉用户“已经准备好进行搜索”。以领英为例，分析一下从搜索前到搜索页面发生了哪些变化：

• 从搜索中返回的方法：取消。这对所有的搜索体验都是必要的，可以使用取消或者返回图标。

• 搜索框改变了填充色。搜索框从灰色变为白色，反映当前搜索操作处于焦点状态。

• 只留下必要的图标。二维码能帮助搜索所以仍然保留，而左边的个人资料图标和搜索图标都会消失。

• 弹出光标来鼓励用户输入文字。

在某些App中，搜索框在“搜索前”和“搜索页”中的位置可能不相同，这样做的目的是在两种体验之间进行平滑的过渡。Google的搜索框向上滑动来展示搜索内容，保证过渡动效的流畅性。

有些搜索体验不可能让用户停留在同一页面上。Airbnb的搜索需要一系列的引导将用户转移到一个全屏的流程中。

关键的地方在于，搜索页面在屏幕中间弹出，键盘向上滑动，用户可以通过无缝的交互从“搜索前”平滑过渡到“搜索中”。 

2、内容——提示搜索的信息

历史记录可以帮助用户进行有针对性的搜索，因为过去的兴趣是当前兴趣的有力指标。但是只显示历史搜索记录会将用户的注意力集中到过去的搜索上，而不是保持搜索的状态。所以除了显示搜索记录外，显示推荐内容能拓宽用户对潜在事物的兴趣。

关键点1：“没有内容可推荐”

当一款产品的功能主要是为了让用户完成某个特定的任务或达到某个目标，那么它可能就没有动机去推广任何内容。这类产品只会显示最近的搜索记录，比如Notion是一个笔记应用，只负责存储用户的笔记，因此只显示过去的搜索记录来帮助用户进行搜索。

关键点2：“在搜索前推广内容”

有的产品通过将各种内容提供给用户查看和探索，为用户实现某个目标。谷歌地图的搜索框下面有热门的标签，用户很可能会从标签中找到他们感兴趣的类别。用户点击搜索框后，谷歌就会假设用户有特定的去处，只专注于帮助他们到达想去的地方。

关键点3：“平衡内容推荐和历史搜索”

主页上的推荐内容可能很容易被忽略(因为它可能与用户的操作无关)，但是搜索页上的热门推荐很少会被忽视。因为用户是带着目标主动进入搜索页，所以不会省略页面上的任何信息。

热门类别

通过在最近搜索页上将各种美食放在首位，UberEats和Doordash这类送餐App就可以引导用户尝试更多的餐厅。

热门话题

展示热门话题能为用户创造一种社区感，会让用户觉得他们与更大的社会保持联系。Quora是很大的问答平台，它不仅显示推荐的话题，还显示了关注者的数量。看到这一点，用户会想：“如果一个话题有13万追随者，那一定很好！我也想成为其中的一员。”

热门新闻

新闻类搜索具有很强的时效性，用户很清楚明天的内容将不同于今天的内容。所以有些App会对新闻或热搜进行实时排名，向用户展示最热门的资讯。

Reddit展示了当前的趋势，让用户了解的内容，Robinhood每小时都会更新华尔街关于股市的文章，这样用户就可以做出及时和明智的财务选择。

搜索推荐

通过算法，很多App都能从用户过去的兴趣中推断用户的喜好，然后不断推送相似的内容，比如淘宝的相似商品推荐。

同样的策略也可以应用于搜索页。小红书作为一款流行App，搜索页显示根据用户口味定制的推荐；Twitter的“For you”标签根据过去的搜索展示的相关内容。显示更多与用户相关的内容可以拉近与产品的距离，用户也会花更多的时间使用产品。

搜索细分

Medium的搜索做得很聪明，它将搜索页面细分为两个步骤：先点击搜索框来浏览不同的主题，再次点击会显示光标和搜索记录。通过这种分解体验，用户在搜索时获得了更多的信息量和更简洁的体验。

总结

以上是关于搜索前和搜索页的体验设计。产品的搜索体验受到多方面的影响：自身目的、内容种类、受众类型。希望这篇文章能够让你了解搜索体验的可能性，为搜索设计带来更清晰的方向。

文章来源：站酷      作者：Clippp

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--手机appUI设计--

 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

--手机appUI设计--

（以上图片均来源于网络）

 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）