本文重点梳理以下七大问题：一、令人眼花缭乱的专业术语；二、交互和视觉如何分工；三、工作的流程；四、视觉类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（用户界面）作为交互方式。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
摘要: 什么是ATL(与COM的关系，及MFC与COM的关系)自从1993年Microsoft首次公布了COM技术以后，Windows平台上的开发模式发生了巨大的变化，以COM为基础的一系列软件组件化技术将Windows编程带入了组件化时代。广大的开发人员在为COM带来的软件组件化趋势欢欣鼓舞的同时，对于COM开发技术的难度和烦琐的细节也感到极其的不便。COM编程一度被视为一种高不可攀的技术，令人望而却步
什么是ATL (与COM的关系，及MFC与COM的关系)
自从1993年Microsoft首次公布了COM技术以后，Windows平台上的开发模式发生了巨大的变化，以COM为基础的一系列软件组件化技术将Windows编程带入了组件化时代。广大的开发人员在为COM带来的软件组件化趋势欢欣鼓舞的同时，对于COM开发技术的难度和烦琐的细节也感到极其的不便。COM编程一度被视为一种高不可攀的技术，令人望而却步。开发人员希望能够有一种方便快捷的COM开发工具，提高开发效率，更好地利用这项技术。
针对这种情况，Microsoft公司在推出COMSDK以后，为简化COM编程，提高开发效率，采取了许多方案，特别是在MFC（MicrosoftFoundationClass）中加入了对COM和OLE的支持。但是随着Internet的发展，分布式的组件技术要求COM组件能够在网络上传输，而又尽量节约宝贵的网络带宽资源。采用MFC开发的COM组件由于种种限制不能很好地满足这种需求，因此Microsoft在1995年又推出了一种全新的COM开发工具ATL。
ATL是ActiveX Template Library的缩写，它是一套C++模板库。使用ATL能够快速地开发出、简洁的代码（Effectiveand Slimcode），同时对COM组件的开发提供最大限度的代码自动生成以及可视化支持。为了方便使用，从MicrosoftVisual C++ 5.0版本开始，Microsoft把ATL集成到VisualC++开发环境中。1998年9月推出的Visual Studio 6.0 集成了ATL3.0版本。目前，ATL已经成为Microsoft标准开发工具中的一个重要成员，日益受到C++开发人员的重视。
ATL究竟给开发人员带来了什么样的益处呢？这还要先从ATL产生以前的COM开发方式说起。
在ATL产生以前，开发COM组件的方法主要有两种：一是使用COMSDK直接开发COM组件，另一种方式是通过MFC提供的COM支持来实现。
直接使用COMSDK开发COM组件是最基本也是最灵活的方式。通过使用Microsoft提供的开发包，我们可以直接编写COM程序。但是，这种开发方式的难度和工作量都很大，一方面，要求开发者对于COM的技术原理具有比较深入的了解（虽然对技术本身的深刻理解对使用任何一种工具都是非常有益的，但对于COM这样一整套复杂的技术而言，在短时间内完全掌握是很难的），另一方面，直接使用COMSDK要求开发人员自己去实现COM应用的每一个细节，完成大量的重复性工作。这样做的结果是，不仅降低了工作效率，同时也使开发人员不得不把许多精力投入到与应用需求本身无关的技术细节中。虽然这种开发方式对于某些特殊的应用很有必要，但这种编程方式并不符合组件化程序设计方法所倡导的可重用性，因此，直接采用COMSDK不是一种理想的开发方式。
使用MFC提供的COM支持开发COM应用可以说在使用COMSDK基础上提高了自动化程度，缩短了开发时间。MFC采用面向对象的方式将COM的基本功能封装在若干MFC的C++类中，开发者通过继承这些类得到COM支持功能。为了使派生类方便地获得COM对象的各种特性，MFC中有许多预定义宏，这些宏的功能主要是实现COM接口的定义和对象的注册等通常在COM对象中要用到的功能。开发者可以使用这些宏来定制COM对象的特性。
另外，在MFC中还提供对Automation 和 ActiveXControl的支持，对于这两个方面，VisualC++也提供了相应的AppWizard和ClassWizard支持，这种可视化的工具更加方便了COM应用的开发。
MFC对COM和OLE的支持确实比手工编写COM程序有了很大的进步。但是MFC对COM的支持是不够完善和彻底的，例如对COM接口定义的IDL语言，MFC并没有任何支持，此外对于近些年来COM和ActiveX技术的新发展MFC也没有提供灵活的支持。这是由MFC设计的基本出发点决定的。MFC被设计成对Windows平台编程开发的面向对象的封装，自然要涉及Windows编程的方方面面，COM作为Windows平台编程开发的一个部分也得到MFC的支持，但是MFC对COM的支持是以其全局目标为出发点的，因此对COM的支持必然要服从其全局目标。从这个方面而言，MFC对COM的支持不能很好的满足开发者的要求。
随着Internet技术的发展，Microsoft将ActiveX技术作为其网络战略的一个重要组成部分大力推广，然而使用MFC开发的ActiveXControl，代码冗余量大（所谓的“肥代码 FatCode”），而且必须要依赖于MFC的运行时刻库才能正确地运行。虽然MFC的运行时刻库只有部分功能与COM有关，但是由于MFC的继承实现的本质，ActiveXControl必须背负运行时刻库这个沉重的包袱。如果采用静态连接MFC运行时刻库的方式，这将使ActiveXControl代码过于庞大，在网络上传输时将占据宝贵的网络带宽资源；如果采用动态连接MFC运行时刻库的方式，这将要求浏览器一方必须具备MFC的运行时刻库支持。总之MFC对COM技术的支持在网络应用的环境下也显得很不灵活。
解决上述COM开发方法中的问题正是ATL的基本目标。
首先ATL的基本目标就是使COM应用开发尽可能地自动化，这个基本目标就决定了ATL只面向COM开发提供支持。目标的明确使ATL对COM技术的支持达到淋漓尽致的地步。对COM开发的任何一个环节和过程，ATL都提供支持，并将与COM开发相关的众多工具集成到一个统一的编程环境中。对于COM/ActiveX的各种应用，ATL也都提供了完善的Wizard支持。所有这些都极大地方便了开发者的使用，使开发者能够把注意力集中在与应用本身相关的逻辑上。
其次，ATL因其采用了特定的基本实现技术，摆脱了大量冗余代码，使用ATL开发出来的COM应用的代码简练，即所谓的“SlimCode”。ATL在实现上尽可能采用优化技术，甚至在其内部提供了所有C/C++开发的程序所必须具有的C启动代码的替代部分。同时ATL产生的代码在运行时不需要依赖于类似MFC程序所需要的庞大的代码模块，包含在最终模块中的功能是用户认为最基本和最必须的。这些措施使采用ATL开发的COM组件(包括ActiveXControl)可以在网络环境下实现应用的分布式组件结构。
第三，ATL的各个版本对Microsoft的基于COM的各种新的组件技术如MTS、ASP等都有很好的支持，ATL对新技术的反应速度大大快于MFC。ATL已经成为Microsoft支持COM应用开发的主要开发工具，因此COM技术方面的新进展在很短的时间内都会在ATL中得到反映。这使开发者使用ATL进行COM编程可以得到直接使用COMSDK编程同样的灵活性和强大的功能。
本文的目的就是希望在有限的篇幅中能够使读者对ATL的使用和基本原理有一个初步的了解，为广大的COM开发人员更好地使用ATL开发起到抛砖引玉的作用。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
出处：https://www.cnblogs.com/pengdai
二、S单一职责SRP
1、定义
2、原则分析
3、优点
4、例子
三、O开放封闭原则OCP
1、定义
2、原则分析
3、例子
四、L里氏替换原则LSP
1、定义
2、原则分析
里氏代换原则是实现开闭原则的重要方式之一，由于使用基类对象的地方都可以使用子类对象，因此在程序中尽量使用基类类型来对对象进行定义，而在运行时再确定其子类类型，用子类对象来替换父类对象。
五、I接口隔离法则
1、定义
2、原则分析：
六、D依赖倒置原则DIP
1、定义
2、原则分析
3、例子1
[img]https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_png/ ... rFZQ/640?wx_fmt=png[/img]
七、合成/聚合复用原则
1、定义
2、原则分析
八、迪米特法则
1、定义
2、法则分析
5、例子
九、Q&A1、面向对象设计其他原则？
2、你能解释一下里氏替换原则吗?
3、什么情况下会违反迪米特法则？为什么会有这个问题？
4、给我一个符合开闭原则的设计模式的例子？
5、什么时候使用享元模式（蝇量模式）？
蓝蓝设计的小编 http://www.lanlanwork.com
