如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
生命周期函数是指在某一个周期自动执行的函数。
以下是React中的常用的生命周期函数，按个部分中按照自动执行顺序列出，这几个过程可能存在同时进行
consructor()里面初始化Props和State属性。
componentWillMount()：在组件即将被挂载到页面的时刻自动执行。
render()：将组件挂载到页面。
componentDidMount()：组件被挂载到页面之后立即执行。
componentWillReceiveProps()：一个组件要从父组件接收参数， 只要父组件的render()函数非首次（如果这个组件第一次存在与父组件中不会执行，如果已经存在于父组件中才会执行）执行了，子组件的这个生命周期函数就会被执行。如果组件没有Props属性则直接跳过
shouldComponentUpdate()：组件更行之前检查是否需要更新，注意这个函数要有一个布尔类型返回值，如果返回false，这一部分的生周期 函数将不会继续执行，即无论如何组件都不会更新。利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能
componentWillUpdate()：组件更新之前。自动执行。但要在shouldComponentUpdate()执行并返回true之后执行。
render()：将组件更新到页面。
componentDidUpdate():组件更新完成之后立即执行。
componentWillMount()：当组件即将被页面剔除时执行。
render()也是生命周期函数，而constructor()并不是生命周期函数。
render()函数，其他的所有生命周期函数都可以不写，也不会报错，但是如果缺少render()函数程序就会报错，因为所有的生命周期函数除了render()函数都是继承自React中内置的。
componentDidMount()里面。
本文重点梳理以下七大问题：一、令人眼花缭乱的专业术语；二、交互和视觉如何分工；三、工作的流程；四、视觉类UI的自学；五、交互设计需要掌握的知识；六、今天设计什么；七、设计师的薪资
经常有人问我新手如何自学交互设计，我之前也录过一个视频给大家，没想到放到网上后点击率很高，看来对新人是的确有帮助的。所以今天再次针对这个问题做阐述，修正了第一版的一些内容，也更具有针对性。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
本组件基于element-ui 的图标库（星星图标）
第一步：
vue + webpack + element-ui 框架
第二步：
创建Rate.vue文件，实现双向绑定分数
第三部：
使用组件
在app.vue中引入组件
组件
说明
代码
<Rate v-model='value' size="32px">
<span>{{value}} 分</span>
</Rate>
import Rate from './components/Rate'
<template>
<div class="Rating" :value='value'>
<ul class="Rating-list">
<li v-for="s in 5" @click="changeRate(s)">
<i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
</li>
</ul>
<slot></slot> <!--显示用户自定义内容-->
</div>
</template>
props: {
size: { //父组件传值设置字体大小
type: String,
default: '16px'
},
value: { //绑定value，与$emit实现双向绑定
type:Number,
default:0
}
},
data() {
return {
star: this.value, // 初始化
style: {
fontSize: this.size //通过prop传值设置星星字体大小
}
}
},
methods: {
changeRate(s) {
this.star = s //更新当前星星数量
this.$emit('input', s); //将当前星星数量s与v-model绑定
}
}
demo演示
随着时间的发展，现在基本上人手一部手机的低头族。做为前端开发的程序猿，在开发移动端web应用的时候，对面一堆各色尺寸不一样的屏幕，就有点淡淡的忧伤。
以上是2018年二月份的友盟数据，可在这里查看详情
很明显我们所要实现的就是在上述如此之多的屏幕,都能实现UI大大出的视觉图上的效果。而要实现这样的效果主要有两个难点
各屏幕适配各屏幕的适配，有两种方案，flexible + rem 与 vw。这三个单词是什么意思，看着很眼熟，但是这两个方案居然是什么呢,请允许我细细道来。
flexible + rem显而易见,该方案是由rem 以及 flexible组成的。rem （font size of the root element）相对于根元素(即html元素)font-size计算值的倍数,flexible 即 flexible.js, 手淘团队提供的一个为该方案屏幕适配而写的一个库,主要实现的功能就是，根据屏幕的宽度给 html 元素设置一个合适的 font-size 值。
怎么样看的不是很懂是吧。让我来用一个页面场景再复述一遍。
正常情况下，我们的UI大大会以iphone6的尺寸为标准，做一套视觉效果图，并在上面进行标注，给到我们的标注图，如下所示
拿到这个图 我们该如何下手呢
到这里为止是不是就结束了呢 ? 很遗憾的告诉你并不是。为什么 html 元素的 font-size 要设置为 37.5px呢？现在这个界面在iphone6上能完美显示了，在iphone5s,iphone6p能完美显示吗？（iphone6, iphone6s, iphone7. iphone8屏幕没有发生变化，本文直接用iphone6代替了。）上面的两个问题 我们还有没解决，这个时候就轮到flexible登场了。只需要像如下引入就可实现用js来自动根据屏幕宽度设置 html元素的font-size的值。
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>引申一下在上述过程中，你会发现，UI给到我们的一般是px标注的图，我们将其转化为rem，这个过程其实会花费很大的计算时间。做为一个合格的程序员，我们应该把这种机械性无脑的操作交给计算机来实现。我使用的是PostCss的插件 postcss-px2rem,这个插件能让我们在写代码时候直接写px，在构建的时候自动将我们所写的px转换为rem，大大提升了我们的开发效率。
vw这个vw的方案，相当而言还比较新。vw 即（viewport width）可视窗口的宽度。之所以把这个方案放在后面来说，是因为viewport在去年（2017年）的时候存在不少的兼容性问题，各个浏览器的支持并不是很好。但是来到了2018年这个时间点，viewport单位意见得到了众多浏览器的支持（80.45%）。
可以在这里查看。
接下来就让我们来正式了解下这个方案吧。vw既然是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。举个例子，再次以iphone6手机为例，100vw = 750px => 1vw = 7.5px
再一次那上次的界面做示范
到这里为止是不是就结束了呢? 是的就是这么简单。
引申一下跟之前一样的痛点，我们仍然需要花费大量不必要的计算时间去把标注图中的px转换为vw，有没有类似于postcss-px2rem的工具呢？很荣幸能再次站在巨人的肩膀上，已经有大神写了了类似的PostCss插件 postcss-px-to-viewport
1px问题移动端的屏幕不仅仅分辨率有差异，其实还有Retina屏的问题。正常情况下，我们代码里的1px在屏幕上就应该显示一个像素点，但是在Retina屏下则不仅仅是一个像素点。再次拿iphone6为例，其dpr(device pixel ratio)设备像素比为2，css中一个1x1的点，其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px，在iPhone6 Plus下甚至会显示成3px。
这样的话，我们就会发现在有些手机上1px明显跟另外的一些手机的1px粗细不一样。其实大多数的小公司不会扣这样的一个细节，比如说我们公司不会。(^__^) 嘻嘻……
但是作为一个有追求的前端工程师，我们应该尽量的把事情做的完美一点，（ps.像大公司看齐，在大公司这个细节问题其实是不容忽视的，为了自己以后的发展前途，我们有必要把这个细节完善掉的。）
这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。使用postcss-write-svg插件,
@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } }.example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;}编译出来就是
.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;}其他小程序中的屏幕适配最近在写小程序，在小程序里，使用的是小程序的那套，跟平时用的vue全家桶以及react全家桶不一样，并没有配置webpack，在这种情况下我们使用postcss其实很困难（反正我是搞不出来/(ㄒoㄒ)/~~）
那该怎么办呢，小程序提供了一个自己的单位, rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备
iPhone5
iPhone6
iPhone6p
我们直接用拿到iphone6的标注图，直接写rpx就好。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想一个问题吧，如果有人给你发了一条微信，你没有回复 ta，原因是什么？
原因会有很多种，但是几乎每一种原因都可以对应到更深的层次。比如给你发消息的人对你而言不重要，是因为缺乏了回复的动机；没时间回复是因为缺乏了回复的能力；关闭了提醒是缺乏了回复的触发因素……
动机，能力，触发三大要素，是让用户产生行为必不可少的三大条件，在行为模型里也十分重要。
最早在 Norman 的《设计心理学》了解到关于行动的几个步骤，他将行动拆分为目标，执行，评估三大阶段，每一阶段又分为几个步骤，简单画了逻辑图 ：
但是很多时候会发现，用户不一定会按我们所设想的方式去使用我们的产品，特别是注册，购买等能提升转化率的行为……我在查询了一些关于心理学方面的内容后，发现了用户不进行这些行为，其实都是有可以解释的依据的，并且我们还可以利用这些依据来改善我们的产品。
从前面微信的例子，我们可以得知，要想让用户产生行为（Behavior），必须具备三个要素：充分的动机（Motive），完成这一行为的能力（Ability），促使人们付诸行动的触发（Trigger），这三者缺一不可。
于是我们可以得出一个行为模型：B=MAT，我们可以从数学的角度类比出人们产生行为的「临界点」，可以称为「行动边界线」（当然这是我自己瞎取的名字，方便理解），只有用户跨越了「行动边界线」，才能实施或者产生某种行为。
所谓触发，就是促使用户做出某种举动的诱因，引发用户去使用你的产品。
比如通过在其他平台广告推广等付费方式吸引新用户，这个可以称为「付费型触发」；
还有一些公关、媒体新闻的正面报道 ，app store 里面排行榜，AppSo 推荐好用应用等不需要付费，但是能够吸引用户使用你的产品，这个可以称为「回馈型触发」；
还有熟人之间的相互推荐，亲朋好友的口碑相传，这种方式十分常见，也是能够让产品大规模获取用户的一种方式，我们可以称为「人际型触发」。
但是这种方式经常会被恶意利用，比如我们经常看到的：分享XX到几个群即可领取XXX优惠，最后却发现是骗人的方式，利用这种方式也许可以获取大批用户，但是一旦用户发现被欺骗后就会立即停止使用你的产品，你也会失去用户的信任。
还有一种是以驱动用户重复某种行为的方式，用户主动与产品保持联系，比如用户注册了某个平台的账户，订阅了它们的内容更新，开启了消息推送，那么每一次更新推送就很有可能触发用户使用你的产品，这种方式可以称为「自主型触发」。
以上四种触发方式，都是来源于外部环境，那么我们可以将其称为「外部触发」。
昨晚在 PM CIRCLE 里面看到大家在谈论关于痛点、痒点、爽点的问题，也出了系列文章，后来在知乎上也搜了相关大佬的回复。
小小的总结一下：
为什么我会提到「痛点」、「痒点」、「爽点」？是因为我觉得这三者是从内部来触发用户采取下一步行动。
Nir Eyal 将情绪触发分为两种，一种为负面情绪，一种为正面情绪，两种情绪皆可触发用户采取行动，但是我觉得如果利用「痛点」、「痒点」、「爽点」来分析内部触发的话会更好，这三点通过深入挖掘用户内在的情感体验，设计出满足用户需求的产品，利用这三点也可以触发用户使用你的产品。
可以思考一下，人们为什么要发朋友圈，发微博？为什么要拍照？为什么要刷抖音？为什么朋友圈更新出现小红点后我就要去点击看？用户借助这些产品实现了怎样的目的？消除了什么样的烦恼？使用完这些产品后用户感受如何？等等问题。
可以把能力解释为完成该行为的难易程度
Hauptly，Denis J 有一个观点就是：当你使用某个产品时所需花费的步骤能被缩减或者是优化时，用户使用它的频率就会增加。他在《Something Really New》一书中，归纳了产品创新的三个步骤，简单画了下步骤图：
结合今天的科技变化，我们可以知道，将行为简单化可以推动产品创新，也只有将行为简单化，用户才会具备完成这一行为的能力。
福格总结了简洁性包含的6个元素，也就是影响任务难易程度的6个要素，简单总结下：
福格建议，为了增加用户实施某个行为的可能性，设计人员在设计产品时，应该关注用户最缺乏什么。
也就是说，要弄清楚是什么原因 阻碍了用户完成这一活动：是时间不够吗？还是缺乏资金？还是完成这一活动太耗体力了？或者是用户不想动脑筋？或者是这个产品与他们所处的社会环境格格不入？甚至是它太逾越常规，以至让人难以接受？
我记得我第一份实习，做的一款新闻app，那个时候还不懂交互也不懂产品，我记得在首页查看新的新闻内容的时候 ，因为数据加载量的原因，每次只能加载一定数量的新闻，所以当时设计的是一个「查看更多」的列表条，用户每次需要加载更多新闻内容的时候，都需要点击一次「查看更多」加载大约6条新的新闻，其实现在想想，为什么我们不设计一个自动加载呢？每次用户上拉的时候，自动加载一部分，这样能够让操作更加便捷，节约时间。
触发是提醒用户采取行动，而动机决定用户是否愿意采取行动，也就是用户行动时拥有的热情。在心理学里面，福格博士归纳了驱使用户采取行动的三大类核心动机：
能够成为某些人行为动机的东西，未必适用于另外一些人，所以，我们需要知道自己的目标用户到底需要什么。
举个例子：比如抖音的一些视频封面，是一些漂亮的女生封面，而对于大都数男生来说，为了追求快乐，就有了点击进去看的动机，而这种动机对于另外一些女性用户就不一定适用。
前几天在听 UCDCHINA 上海 大众点评 DPUX 专场《战略导向下的设计价值拓展》线下分享会的时候，其中也讲到了关于用户的7大基本心理特征——七宗罪：愤怒，淫欲，贪婪，懒惰，嫉妒，暴食，骄傲。
我觉得这也是能够让用户产生动机的七大因素 ，比如经常被广告商拿来利用的俗称「性卖点」的广告设计元素 ，利用人性的窥探欲，吸引用户付诸行动……
当我们知道了用户采取行动的几类核心动机后，我们可以通过一些心理学的方法来刺激用户的这些动机。
我在 Nir Eyal 的书中了解到一些关于启发法等认知偏差对人类行为的影响，比如稀缺效应，首因效应，环境效应，投射效应，近因效应，锚定效应，赠券效应，目标渐进效应等 。
比如很多电商平台商家会故意将商品库存降低，当产品数量由多变少的时候，它在用户心中的价值就会提高，那么用户购买的动机就会增强，这就是利用了稀缺效应 ；
再比如目标渐进效应，大意是讲当用户认为自己距离目标越来越近时，完成任务的动机会更加强烈。
目标渐进效应让我突然想到长沙的网红奶茶——茶颜悦色的集点卡，大概就是积满6点可以送一杯奶茶，我在第一次买第一杯的时候，他们给了我一张集点卡，上面已集了1个点，意思就是说我再集5个点就可以兑换一杯奶茶了，但是如果换一种方式，它把规则改成集5点可以兑换一杯奶茶，但是我买第一杯的时候，他们给我的卡上是空白的，没有点，那么你们觉得这两种方式，哪种方式更能让用户产生集点的动机呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
想一个问题吧，如果有人给你发了一条微信，你没有回复 ta，原因是什么？
原因会有很多种，但是几乎每一种原因都可以对应到更深的层次。比如给你发消息的人对你而言不重要，是因为缺乏了回复的动机；没时间回复是因为缺乏了回复的能力；关闭了提醒是缺乏了回复的触发因素……
动机，能力，触发三大要素，是让用户产生行为必不可少的三大条件，在行为模型里也十分重要。
最早在 Norman 的《设计心理学》了解到关于行动的几个步骤，他将行动拆分为目标，执行，评估三大阶段，每一阶段又分为几个步骤，简单画了逻辑图 ：
但是很多时候会发现，用户不一定会按我们所设想的方式去使用我们的产品，特别是注册，购买等能提升转化率的行为……我在查询了一些关于心理学方面的内容后，发现了用户不进行这些行为，其实都是有可以解释的依据的，并且我们还可以利用这些依据来改善我们的产品。
从前面微信的例子，我们可以得知，要想让用户产生行为（Behavior），必须具备三个要素：充分的动机（Motive），完成这一行为的能力（Ability），促使人们付诸行动的触发（Trigger），这三者缺一不可。
于是我们可以得出一个行为模型：B=MAT，我们可以从数学的角度类比出人们产生行为的「临界点」，可以称为「行动边界线」（当然这是我自己瞎取的名字，方便理解），只有用户跨越了「行动边界线」，才能实施或者产生某种行为。
所谓触发，就是促使用户做出某种举动的诱因，引发用户去使用你的产品。
比如通过在其他平台广告推广等付费方式吸引新用户，这个可以称为「付费型触发」；
还有一些公关、媒体新闻的正面报道 ，app store 里面排行榜，AppSo 推荐好用应用等不需要付费，但是能够吸引用户使用你的产品，这个可以称为「回馈型触发」；
还有熟人之间的相互推荐，亲朋好友的口碑相传，这种方式十分常见，也是能够让产品大规模获取用户的一种方式，我们可以称为「人际型触发」。
但是这种方式经常会被恶意利用，比如我们经常看到的：分享XX到几个群即可领取XXX优惠，最后却发现是骗人的方式，利用这种方式也许可以获取大批用户，但是一旦用户发现被欺骗后就会立即停止使用你的产品，你也会失去用户的信任。
还有一种是以驱动用户重复某种行为的方式，用户主动与产品保持联系，比如用户注册了某个平台的账户，订阅了它们的内容更新，开启了消息推送，那么每一次更新推送就很有可能触发用户使用你的产品，这种方式可以称为「自主型触发」。
以上四种触发方式，都是来源于外部环境，那么我们可以将其称为「外部触发」。
昨晚在 PM CIRCLE 里面看到大家在谈论关于痛点、痒点、爽点的问题，也出了系列文章，后来在知乎上也搜了相关大佬的回复。
小小的总结一下：
为什么我会提到「痛点」、「痒点」、「爽点」？是因为我觉得这三者是从内部来触发用户采取下一步行动。
Nir Eyal 将情绪触发分为两种，一种为负面情绪，一种为正面情绪，两种情绪皆可触发用户采取行动，但是我觉得如果利用「痛点」、「痒点」、「爽点」来分析内部触发的话会更好，这三点通过深入挖掘用户内在的情感体验，设计出满足用户需求的产品，利用这三点也可以触发用户使用你的产品。
可以思考一下，人们为什么要发朋友圈，发微博？为什么要拍照？为什么要刷抖音？为什么朋友圈更新出现小红点后我就要去点击看？用户借助这些产品实现了怎样的目的？消除了什么样的烦恼？使用完这些产品后用户感受如何？等等问题。
可以把能力解释为完成该行为的难易程度
Hauptly，Denis J 有一个观点就是：当你使用某个产品时所需花费的步骤能被缩减或者是优化时，用户使用它的频率就会增加。他在《Something Really New》一书中，归纳了产品创新的三个步骤，简单画了下步骤图：
结合今天的科技变化，我们可以知道，将行为简单化可以推动产品创新，也只有将行为简单化，用户才会具备完成这一行为的能力。
福格总结了简洁性包含的6个元素，也就是影响任务难易程度的6个要素，简单总结下：
福格建议，为了增加用户实施某个行为的可能性，设计人员在设计产品时，应该关注用户最缺乏什么。
也就是说，要弄清楚是什么原因 阻碍了用户完成这一活动：是时间不够吗？还是缺乏资金？还是完成这一活动太耗体力了？或者是用户不想动脑筋？或者是这个产品与他们所处的社会环境格格不入？甚至是它太逾越常规，以至让人难以接受？
我记得我第一份实习，做的一款新闻app，那个时候还不懂交互也不懂产品，我记得在首页查看新的新闻内容的时候 ，因为数据加载量的原因，每次只能加载一定数量的新闻，所以当时设计的是一个「查看更多」的列表条，用户每次需要加载更多新闻内容的时候，都需要点击一次「查看更多」加载大约6条新的新闻，其实现在想想，为什么我们不设计一个自动加载呢？每次用户上拉的时候，自动加载一部分，这样能够让操作更加便捷，节约时间。
触发是提醒用户采取行动，而动机决定用户是否愿意采取行动，也就是用户行动时拥有的热情。在心理学里面，福格博士归纳了驱使用户采取行动的三大类核心动机：
能够成为某些人行为动机的东西，未必适用于另外一些人，所以，我们需要知道自己的目标用户到底需要什么。
举个例子：比如抖音的一些视频封面，是一些漂亮的女生封面，而对于大都数男生来说，为了追求快乐，就有了点击进去看的动机，而这种动机对于另外一些女性用户就不一定适用。
前几天在听 UCDCHINA 上海 大众点评 DPUX 专场《战略导向下的设计价值拓展》线下分享会的时候，其中也讲到了关于用户的7大基本心理特征——七宗罪：愤怒，淫欲，贪婪，懒惰，嫉妒，暴食，骄傲。
我觉得这也是能够让用户产生动机的七大因素 ，比如经常被广告商拿来利用的俗称「性卖点」的广告设计元素 ，利用人性的窥探欲，吸引用户付诸行动……
当我们知道了用户采取行动的几类核心动机后，我们可以通过一些心理学的方法来刺激用户的这些动机。
我在 Nir Eyal 的书中了解到一些关于启发法等认知偏差对人类行为的影响，比如稀缺效应，首因效应，环境效应，投射效应，近因效应，锚定效应，赠券效应，目标渐进效应等 。
比如很多电商平台商家会故意将商品库存降低，当产品数量由多变少的时候，它在用户心中的价值就会提高，那么用户购买的动机就会增强，这就是利用了稀缺效应 ；
再比如目标渐进效应，大意是讲当用户认为自己距离目标越来越近时，完成任务的动机会更加强烈。
目标渐进效应让我突然想到长沙的网红奶茶——茶颜悦色的集点卡，大概就是积满6点可以送一杯奶茶，我在第一次买第一杯的时候，他们给了我一张集点卡，上面已集了1个点，意思就是说我再集5个点就可以兑换一杯奶茶了，但是如果换一种方式，它把规则改成集5点可以兑换一杯奶茶，但是我买第一杯的时候，他们给我的卡上是空白的，没有点，那么你们觉得这两种方式，哪种方式更能让用户产生集点的动机呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
移动端搜索功能设计：3个阶段解析搜索流程设计要点
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
这篇文章笔者想和大家聊一聊有关搜索功能的设计，搜索功能是每个内容型APP的核心，它的易用性决定了用户是否能从APP里快速找到自己想找的内容，那么决定搜索体验好坏的关键点又是什么呢？这里我总结了两点，“操作的易用性”和“结果的准确性”。看似简单的两点却有很多的学问，笔者把搜索的交互流程划分成三个关键阶段，“搜索前、搜索中及搜索后”，接下来将从这三个阶段逐一分析整个搜索流程中的相关设计。
在不同的APP或者不同的场景下搜索入口有着不同的表现形式，具体的表现形式取决于产品对搜索功能权重的定义，如果说在某一场景下搜索功能是用户常用的核心功能那么他在界面上所表现出来的权重就要高些，反之则低些。下图是常见的搜索功能的入口形式，他们的权重从左到右依次降低，笔者将对他们一一进行分析
如下图APP Store的搜索形式，搜索放在标签栏上作为一个独立的功能模块，它的功能层级是最高的。不管用户操作到哪里都可以随时进入搜索页面，这样的搜索入口通常用在搜索场景非常多的内容型APP上，方便用户在任何时候快速进入搜索页面。
如下图是京东app的搜索入口，它将搜索框外漏在nav bar上，这样的形式有着两个设计的关键点：
关键点一：搜索框外漏在顶部导航条上
搜索框直接外漏在导航条上是为了突显该功能，这一功能往往是用户在该页面非常核心的操作任务，类似天猫京东这类电商型app，通常情况下用户都是带着明确目的来购买东西的，那么他们采取的最快最直接的方式就是搜索。
关键点二：在向上滚动界面时，搜索框一直悬停在顶部
这样做的场景是这样的，在用户滚动页面寻找内容时，可能并不能找到自己想要的内容，搜索框一直悬停一是为了暗示用户可以进行搜索，二是为了让用户在想搜索时快速触发搜索
如下图是微信在聊天页面和通讯录页面的搜索入口，初始化状态时聊天页面的搜索框是不出现在用户的可视范围内的，当页面下滑时搜索框才出现，而在通讯录页面里搜索框是默认出现在用户的可视范围内的。
分析：微信在最近联系人和通讯录上搜索框的默认状态不同，这很好地诠释了这两种场景下的搜索功能的权重。最近联系人页面上的搜索入口显得更加隐蔽，因为在这个页面下用户产生搜索的场景很少，把其隐藏简化了界面的元素，提升了界面的美观性。
如下图是淘票票的搜索的入口，通过点击右上角的搜索icon进入搜索页面：
分析：在界面权重上，这样的方式相对于以上三种方式来说显得较弱一点，因为在这样的场景下用户使用搜索的概率并不是很高，如果把搜索外漏就会占据更多的屏幕空间，破坏界面的权重等级和美观性。
总结：依据用户的需求场景，搜索入口放在不同的位置，如果说在该页面搜索是一个主要的功能，我们就应该去突显它，提升它在界面上的权重，反之则减轻它的权重。
搜索中间页本来应该是一个轻量化的页面，用户在这里输入内容进行搜索即可。但随着运营需求的扩张，这个页面逐渐成为了一个运营重灾区，多了很多推荐的内容。笔者将从“输入框提示信息、搜索分类、搜索历史、搜索推荐、搜索输入、搜索建议”等方面分析一下这个页面的设计。
搜索框内的提示信息通常是提示用户当下可以搜索什么样的内容，如下图bilibi的搜索提示，告诉用户可以进行“视频、番剧、UP主或者AV号”的搜索，这样的提示信息对用户也是一种良性的引导，给用户提供了一个心理预期，同时也对用户随意输入关键词造成无结果的伤害体验的可能进行了限制。例如一个房产APP，搜索框内提示输入楼盘或小区名，如果没有这样的提示有的用户可能就会去输入价格去筛选房源，这句提示语很好地降低了这样的风险。
但随着人们对APP使用的熟悉，用户在这里的认知负担基本消除，运营人员逐渐抢占了这块地方，这句话变成了内容的推荐或者产品的Slogan，这些推荐的内容可以是运营人员手动维护的也可以是依据用户的购买和行为习惯进行推荐的。如下图右边是淘宝的搜索提示，搜索框的文案变成了“红人最爱潮牌名服”，这就是运营人员在为特定内容进行导流。
在内容型APP中搜索时通常会对内容进行分类搜索，这是为了帮助用户更地找到相关内容，分类的操作可以发生在搜索前也可以发生在搜索后，如下图是“淘宝、微信、网易云音乐”搜索分类的方式，笔者将分别对他们进行分析。
淘宝是将搜索分类前置，默认搜索宝贝，点击后弹出浮层进行切换。这样的方式存在一个明显的缺点就是由于该入口所占空间位置不显著，会导致用户感知太弱。 这样的方式通常用在用户大多数情况下只搜索某一分类的内容，如淘宝这样，用户大部分的搜索场景都是在寻找宝贝。
微信默认搜索所有内容，将分类通过通过三个很显著的入口放在搜索框下方，当点击某一分类时跳转到该分类的搜索界面，同时搜索框的文案以及搜索界面的内容发生相应变化，提示用户搜索范围被改变。这种方式通常用在这些分类搜索的场景都很常见时，它的缺点在于，从界面表现形式来看，这三个分类更像是三个功能的入口，他们与搜索框联系得不是很紧密，很多用户最开始使用时并不知道点击这些分类是进行搜索范围的限制。经测试3个从未使用过该功能的用户，他们都认为点击朋友圈后就是进入朋友圈，点击文章后就是显示所有文章。
网易云音乐是将搜索分类进行后置了，在下文关于搜索结果的展示我会分析它的优劣势。
搜索历史记住用户的足迹，方便用户快速向以前搜索过的内容进行转换。设计上我们需要注意的一点就是需要把搜索历史和搜索推荐区分开来，在位置上，尽量让搜索历史靠近搜索框（如下图），因为从认知心理学上来讲，越靠近搜索框的内容越能表示它是搜索历史。在表现形式上，搜索历史和搜索推荐尽量采用不同的表现形式。搜索历史伴随的交互操作有删除单条或者清空搜索历史
这里的搜索推荐通常有三种来源：
它存在的目的主要有两个：
建议：
受移动端操控方式的限制，在输入内容时存在两个明显的痛点：“修改内容”和“输入速度”。
关于修改内容：当用户想更改语句中一部分文字时，将光标移动到想要更改的地方是一件很难的事，点击操作真的很令人发狂，通常情况下我宁愿重新输入。但是针对这一点搜狗输入法做了一个很人性的交互，当用户按住键盘左右滑动时就能移动光标（如下图）。
关于输入速度：很早之前偶然间发现了UC浏览器在输入文字时的一个交互功能，如下图所示，当输入文字后，用户可以将搜索建议的词语直接加入到搜索框中然后继续输入文字。这样的需求场景在很常见，比如我想搜索“交互设计师的前景”，当我输入交互二字后就会有“交互设计”的搜索建议，点击搜索建议后面的箭头将这个词直接加入搜索框，然后就出现了“交互设计师的前景”的搜索建议，点击搜索建议后进入搜索结果的页面，这个过程中我少打了很多字，对我的搜索速度有很大的提升。
当用户输入内容后，搜索框下面出现了众多的搜索建议，这些搜索建议是为了帮助用户快速向目标进行转化，如下图是京东的搜索建议，当我输入画框后，一系列画框的搜索建议就出来了，它还有一个亮点就是在此提供了细化筛选条件，画框后面紧跟了“长方形、实木、正方形”等关键的筛选条件，为用户省去了到结果页进行筛选的步骤。
搜索结果是搜索过程中最关键的点，结果的准确性确定了用户体验的好坏，笔者将从“搜索结果的形式、搜索结果的操作、搜索结果的分类、搜索结果的排序”等方面来对搜索结果进行分析。
搜索结果一般分为两种，一种是所见即所得，用户输入内容后出现在搜索框下面的搜索建议就是搜索结果，这种搜索通常出现在一些轻量化的APP中，因为搜索建议对应的就是唯一的搜索结果，如下图微信的搜索一样。
第二种形式就是一个关键词对应了多个搜索建议，每个搜索建议又对应了多个搜索结果，当用户点击搜索后进入了一个专门的搜索结果页，如下图京东的搜索一样。
依据用户的需求目的，在搜索结果的列表上我们可以外漏用户大部分情况下会采取的操作，比如说视频类网站，用户搜索到某一内容后，最常采取的操作就是播放，我们就可以把播放按钮外漏，缩短用户的操作路径（如下图爱奇艺的搜索结果页）
通常的分类方式是TAB切和卡片，以下是微信和网易云音乐的分类。
这两种方式有各自的应用场景，TAB切主要应用在搜索结果有固定的几种分类，并且通常的情况下搜索结果都有很多的内容，如上图的网易云音乐，每一个分类都有很多的搜索结果，如果它采用卡片式的瀑布流布局，用户需要不停往下翻才能看到第二种分类的内容。卡片式主要运用在搜索结果的内容不多，如微信这样的情况，每一类结果并不是很多，卡片式的瀑布流布局能让用户快速定位到自己想要的内容，如果这里用TAB切就很尴尬了，因为每一类的内容都很少或者很多类里根本没有内容，这样的用户感受就不好了。
搜索结果的排序是一个比较复杂的工作，里面涉及了很多的算法逻辑，笔者对这块也不是很清楚，但是一般的垂直内容型APP并没有这么复杂的算法在里面，就是按照搜索的关键字去一一匹配。
如下图是说我在QQ阅读输入一个“男”字，然后就给我建议第一个字是“男”的所有可能的结果，当第一个字匹配完后就匹配第二个字，这样以此类推。他们的整体顺序就是按照匹配关键字的先后进行排列的，其实在排序中还牵涉了很多的算法，比如说它可能会掺杂一些“热度、人气、人为意图、语义”等因素的权重，这里不展开赘述了。
以上就是笔者对搜索功能的介绍和思考，希望能对大家有所帮助。
本文由 @不知名设计师 原创发布于人人都是产品经理。未经许可，禁止转载。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
几个月之前，我曾经在一篇文章中说过 Magic 和 Operator 这样的应用将会成为下一个重大突破。
它们的独特之处在于，它们没有采用传统的 UI（用户界面）作为交互方式。
蓝蓝设计的小编 http://www.lanlanwork.com
