PART1-唐纳德诺曼关于交互设计的可视性的基本原则
唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典，我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》，而是第一本《日常的设计》，这本第一本书最精华的内容是阐述了交互设计的基本原则，这个原则无论是对工业设计中的人和物件交互，还是说是建筑中的人和空间交互都有很深刻的指导意义。作为一名app产品设计，对于这几个含义理解之后，融汇到app设计的情境下，会让你对之前工作流中的『交互设计』有全新的认识。
触觉，听觉，视觉，味觉，嗅觉。只要能被人的五感所感知到，不论是和空间，和机器，和生活中的物件还是和人，只要发生五感的共情，我们就说是可以被交互的。（注意，本文中不考虑复杂多感交互，并且只考虑交互的一方是正常生物人。）
在人的五感之中，本文依旧着重讨论视觉，因为科学研究表明，在人五感的感知信息中，视觉视觉占比达到了惊人的83%。（其中听觉11%，嗅觉、触觉、味觉机加起来占比6%），而不管是什么设计，如果可视性不佳，都不能算得上优秀。
i.示能（Affordance）
"示能"这个词，狭义的理解一下，是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现，由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。
还是举那个诺曼最经典的例子，如下图所示：
从视觉上看这张图，我们从以往的生活经验联想一种方形的，带纹路的黄色物质，再配合长期的视觉线索，我们会知道这张图上是一个木块，那从我们的视觉线索上，知道这个木板很细，（应该）能够轻易被折断；而且很轻，（应该）可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能"，而明确的我们和图上这个木材的交互关系。
那再看这张图：
我们通过生活经验的联想可以知道这是一个木门，为什么会区别这是木门而不是上面的木材呢？主要原因是因为这上面有个『把手』。在人的视觉中，有时候观测物体的某项"示能"是清晰可见的，比如上图那个木材可以被轻易搬动，而有很多物品的"示能"是不可轻易被感知的，比如上面那张木材的图，我们就不能感知到这个木材是可以被『轴转动』的。
而这张门的图上，大家想象自己是一个什么都不知道的野人，看到上面这个图，只有一块特别显眼的『把手』，你作为高智慧生物，是不是应该去触摸一下，并且企图能够与『把手』进行互动？
所以总结一下，如果这个门上没有把手，作为我们人类的认知而言，可能会认为这个门不能从外面被打开，但是如果这就是一个能从外面被打开的门，但是忘记设计外面的把手，那就意味着，这个物体"示能"的视觉通道被堵塞。（视觉通道被堵塞的"示能"可以被认为是一种"反示能"），"反示能"对交互作用是起到抵制作用的。也就是说，如果这个门是可以从外面被打开，但是我为了不让大家从外面打开，我在设计之初不加从外面打开的把手，一定程度上就可以抑制大家从外面打开的这种行为。
大家明白了么？
所以为了更有效的展现某些物体的视觉可交互，示能和反示能都必须被揭示出来，即可被觉察到。如果示能和反示能不能够被觉察到，就需要人为的把它们都标识出来，我们听过一些有效的手段就可以做到，比如在直立的木头一侧加上一个『把手』，这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索，你只需要旋转把手，稍加用力即可发现这个"示能"。
所以，我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』
ii.意符（Signifiers）
划重点：示能决定可能进行哪些操作。意符则点名操作的位置。
用户界面上的意义符号，简而言之，就是一切用户感知中可以点击产生反馈的功能集合。
但是这是在以屏幕为介质的用户界面中我个人下的定义，但是在实际生活中，人们寻找蛛丝马迹，寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索，就是意符。
这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因，他在视觉上示能和意符都及其突出，一块屏幕和一个按钮，屏幕用户点击滑动交互，按钮用于点击交互，学习成本很低。大家试想一下之前的塞班系统，左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射，虽然也很易于理解，但是当大家看到苹果这么简单的手机的时候，相信所有人都是惊讶的：
△.示能和意符的关系
示能揭示了世界上作为主体的人（这里只考虑人），如何与其他东西进行互动的可能性。
一些示能是可视觉感知的，一些则是需要视觉之后联想感知（即不可直接感知）的。
意符指示能操作的位置。
一些意符是生活中的符号、标签和图样，如门上用符号标记的“推”、“拉”或“出口”，或指示所要采取行动的箭头和图示，或是朝向某个方向的手势，或其他的说明。一些意符仅仅是预设用途，譬如门的把手，或某个开关的物理结构。
划重点：在设计中，（尤其是UI设计中）意符比示能更重要。
示能和意符是本文中最重要的，下文会说到在app中的意符设计。
后面的映射，反馈和概念模型内容我简略说：
iii.映射（Mapping）
有一些自然映射是生物本能的或者是文化赋予的，比如如按照通常的习惯向上移动手势意思是增加，向下移动意味着减少，。当一系列可能的操作是可见的，当控制和显示契合自然映射时，设备就会容易使用。（具体参考我写的交互闲谈丨01里面那个视频手势的例子）
iv.反馈（Feedback）
反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候，内心的预期是需要获得反馈的，如果在一个该获得反馈的地方没有获得反馈，人就会很疑惑，比如如果一个app的按钮点击之后没有跳转或者没有新的变化，那么人就会呆滞，如果反馈不及时，人还有可能会放弃。（比如网络不好导致的跳出率，比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的==）
v.概念模型（ConceptualModels）
概念模型通常是高度简化的使用说明，告诉你事物是如何工作的。概念模型只要有用就行，不必完整或准确。概念模型通常可以从设备本身推断出来，一些模型通过人与人相授，还有一些来自手册。（比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种，手游中一开始的新手指引也是。）
PART2-屏幕的示能与基本的交互方式
一个人和一块（未通电的）触摸屏幕，在不借助道具的情况下到底能衍生出多少种交互方式？从五感出发去深入剖析的话大概分为：
嗅觉：用鼻子闻一闻这块屏。（发现并没有味道）
听觉：用耳朵听那块屏发出的声音。（发现并听不到什么声音）
味觉：用舌头舔一舔这块屏。（诶有点咸？）
视觉：用眼睛去看这块屏。（这是一块光滑的类似于玻璃的物体）
你们发现了么，对于一个原始的屏幕设备，比如手机，我们忽略按钮什么的物理按键，光思考那块没用通电的屏幕，如果你作为一个心智未开化的人（或者现在假设你就是一只猴），你真正对屏幕有建设的交互一定是在触觉上，我这么说大家能理解吧。我们不妨换位思考一下下，你现在是20年一个准备做概念手机的交互专家，你去穷举任何人和屏幕的交互，唯一有『肢体接触』的方法就是用手指（或者脚趾）去触摸，还有就是用舌头舔。用舌头舔会有口水，不利于屏幕的识别，万一漏电了画面太美不敢想。
所以，结论是，人类看到一块屏幕设备，这块屏幕设备的视觉示能最终导向了，人和屏幕的交互手段被定位在触觉上，而脚趾相对于人类来说没有手指灵活，所以最终我们把交互规定到手与屏幕的交互（简称交互手势）。
触觉：
我们来穷举一下手指和屏幕的交互方式：（图片来自Graphicpear，中文是我自己加上的。)
不要纠结于图，往下看，其实现今的所有的手势交互，我们基本操作分为：
一根手指：单击、双击、长按、拖动、上下滑、左右滑。
两根手指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。
三根手指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。
四根手指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。
五根手指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。
双手双指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。
双手十指：单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。
（上面写的双手双指是指每只手出一个手指，比如你们在手机修图时候的某些旋转操作）
其实你如果还要穷举的话，还有双手每只手一个指头、双手每只手两个指头、双手每只手三个指头、双手每只手四个指头这些奇怪的情况，但是由于现阶段手势足够完成日常操作，所以日常的人和屏幕交互并没有引入这些别的奇怪的方案。
我相信随着科技的进步和发展，其他的双手的交互操作也会大面积的被引入进来，起码我个人在看类似于黑镜啊还有别的欧美科幻片的时候，不止一次见到了这样的画面。（我印象最深的是黑镜第三季06，女主角操控手机方式是四指横滑，然后胖大叔操作无人驾驶的骑车的时候是双手旋转打开一个屏幕，然后再通过指头拖动目标完成导航交互。）这些电影里面反应的人的未来科技中蕴含了很多交互方法，大家可以看电影的时候多留意一下。
有点扯远了，回到手机app的交互手势，（除开游戏以外）一般单指双指即可解决。而先现今科技下，相对于大屏幕一些的平板电脑，无论是ipad还是Andriod厂商，都会引入三指，四指甚至五指的部分交互手势。
由于今天的主题是手机app，那我们下一部分就着重主要来说说手机app的交互。
PART3-手机app中的意符分析
在设计中，尤其是UI设计中，意符比示能更重要。
理解这句话的本质是因为一块屏幕上人需要设计图形、按钮、内容。去让他完成一些具体事情，所以在屏幕显示的软件中的意义符号就需要有很深的引导性。
还记得之前我的定义么？用户界面上的意义符号，简而言之，就是一切用户感知中可以点击产生反馈的功能集合。
我们闲言少叙，先来看一个例子：
如图是喜马拉雅FM的app首页UI，我将从功能属性、视觉焦点两个角度，一排一排的进行分析：
角度一、首先从功能属性上进行分析：
第一层：NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』，本质上是以功能名字命名的意符，其意符的表现形式为图片+文字。没啥好说的，每一项映射到自己的功能详情。
A、到『分类』页面。B、到『订阅』页面。
详细绝大多数人都能答对，这里的正确答案是A，滑动到下一个tab『分类』。大家只知其所以然，感觉这里的tab本身就是靠滑动手势来控制的，但是更深层次的原因呢？为什么？
如@HoZiN的下图所示：
如果用户滑动这个页面只能在首页的5个tab之间切换，我们认为他是下图的第一种，也即是在单一Bottom模块下切换（Hozin将其命名为独立SubNavi切换，SubNavi的意思其实也就是底部的Bottomnavigationbar的意思，我上文中就直接简称BottomBar了，个人命名习惯而已大家能懂是这个意思就行），而另一种情况是有些app当滑动到最后一个tab，再右滑屏幕会进入到第二个Bottom模块，既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了，但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于，一般情况下，b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了，关于这个更深层次的原因可能是开发的原因，可能是产品没法做到每一个Bottom都有tab，也可能是因为别的app信息架构方面的原因，在这里就不展开了。
我们再继续单独看这个第二层：
如上图所示，这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页，而是一个『每日优选』的列表页，那我就认为这个设计是欠妥的。
我为什么说这样的设计欠妥，其原因如下：
那既然我不确定，我们不妨分两种情况去分析：
第一种情况：之前首页只有四个tag，而新加了一个以具体内容ip产品名（比如康永来了也好，或者明天老罗来了也罢）作为显示，实则是每日优选的一个强视觉tag，为的是引导用户点击具体ip产品之后看到每日优选的这个列表，从而为别的每日优选这个列表页导流。（我认为对于一个成熟的产品团队，不太可能是这种情况）
第二种情况：之前首页就有『每日优选』这个tag，只不过后来为了运营或者强视觉需求，改成了具体ip产品名。（我倾向于第二种假设）
我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出，通过从视觉上的突出（视觉突出这一点确实做得很好）从而博取用户流量，然后让用户通过查看『康永来了』这个具象的兴趣点tab，进入每日优选的这个列表，从而为别的每日优选产品导流。
从文案层面来说『康永来了』确实比『每日优选』更吸引人，但是如果是我来设计这个地方的话，我个人倾向还是放一个每日优选的tag，毕竟这是所有用户都能懂的语言，而康永是谁？这个问题毕竟不是所有人都知道的。
如果实在是通过数据或者产品运营需求表示，我们需要强调『每日优选』的话，那我会把每日优选的视觉也做得像现在康永来了一样突出，但是名字不能变，还得叫『每日优选』。
那如果康永来了这个ip市场运营那边吩咐了，确实需要持久强推怎么办？
办法有，比如banner位就可以直接推，而且banner位可以直接跳转到具体ip的详情页，路径更加简短，用户马上就可以购买，不像现在跳到的是一个每日优选的列表，用户还得通过一次点击才能进入详情。
第一种办法是在第三层的最前面（必听榜的前面）加一个独立的康永来了tag，这样的做法是开发成本简单易行，但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了，多放一个运营强推ip也没毛病啊。_(:зゝ∠)_
第二种办法虽然比较decent一些，是在第四层和第无层的中间开辟一块很小的次banner位去放，如下图所示:
总而言之吧，第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解，不一定对，大家切勿偏听偏信。好了我们继续往下看。
这里主要是有两方面的原因，第一是做成左右滑的话，屏幕空间最多只能展现三张半，不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点，大家看如下图所示：
所以说嘛，app中的意义符号设计直接决定了这个app的易用性。不要乱来。
第七层：这就是bottombar具体没什么好讲的了，也就是五个图形意符，各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的，有些是带了icon也带了文字的，带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。
角度二、从视觉上进行分析：
最后抛出一个视觉上BottomBar的问题，现在很多app会在实心icon还是线性icon上面纠结，知乎的BottomBar一直采用实心icon，而Airbnb一直采用线性icon，到底为什么？
我会在下一期的交互闲谈里面说这个问题，大家也可以想一想，其实（如果我理解的没错的话）答案就在我上面这段论述中。
PART4-手机app中的意符设计需要辩证的几小点
一个擅长app中意符设计的人，本质就是对appUI设计有十足把握的人，关于这里的几点辩证只是提出来说一下，具体的UI设计过程中这样的问题不胜枚举，大家可以留言交流。
一、BottomBar上的意符到底要不要加文字？
手机中可供点击反馈的意符设计分为很多种，有纯图片的（比如banner），有图形+文字的（比如BpttomBar上的那些），有纯文字的（不如上文中喜马拉雅的切换tab，比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案），还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』，还有一些是按钮形式的。
在这些意符的设计中，意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义，那就一定要在附近加上文字形成一个完整的意符。
举个例子：已下载这个icon已经被所有app用烂了，大家一听就知道应该包含一个向下的箭头，比如历史记录也是，大家都能想到是一个时钟，这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计，一个是带文字，一个是不带文字，都不影响用户识别体验。
但是比如再举一个例，『我的』图标，现在大家都习惯用一个『人头像』，而一切新奇的产品比如说『氧气app』，才用的是一个圆圈，那么这个时候如果是意义识别为主导的产品（比如电商啊或者用户不是那么年轻的）就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别，也可以借助文字瞬间映射到。
那比如像『一个One』、『Medium』和『500px』这样的众多app，他们的BottomBar都是一个纯图形：
所以，如果你采取无文字的BottomBar，那么请UI设计师用心设计你的icons。
二、设置引导用户点击加载的意符应该如何设计
有一个app需要设计这样一个功能：文字默认折叠展示3行，但是点击之后需要（非跳页）加载全文，那么请问需要设置怎样的意符引导用户点击？
传统的大概是三种方案：
第一是在文字第三行的前四个字用其他颜色（比如蓝色）标记为『加载更多』，用户一点之后加载全部（早期知乎的做法）。
第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』，用户点击之后加载全部。
第三种是在文字第三行结束的位置放一个省略号即可，用户阅读之后发现没读完，自己会尝试点击。
显然，第三种方法仅适合社区类app或者贴吧或者问答类app，因为一般用户读都很难读完，更别说给你点击一下了。第一种和第二种也是见仁见智，一般情况下我个人推荐第一种，因为需要文字折叠成三行的页面就说明本身画面排布很紧张，就不要另起一个第四行放『点击加载更多』了。
三、app中的按钮设计，什么时候应该有push色，什么时候应该没有
有两种情况：
第一种是你点击某个意符，这个意符发生变化（颜色或样式变化）同时跳转。
第二种是你点击某个意符，这个意符完全不发生变化但是页面跳转。
从用户期待每次行为都得到反馈的心理上来说，我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的（也就是上面的第一种）。但是有时候由于反馈动效我们写得不尽如人意问题，我们看到冗长（哪怕只有半秒）切重复的的反馈内心就会就会很烦。
举个例子比如原生安卓的MaterialDesign点击每个item都会出现一个水波动效反馈，当然原生MaterialDesign的动效是足够优秀的，所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍，拉长三分之一。你们一定会崩溃的相信我。
PART4-总结
1、app产品设计和UI的设计中，意符的设计是当众最重要的一环，因为每一个意符作为产品的功能入口和行为入口，它们不光光是产品的流量节点。更是app产品信息架构的核心提现。
2、在设计app的意符的时候，要更多的考虑到意符所蕴含的具体交互手势（比如喜马拉雅的tabbar就包含了滑动和点击）以及具体的对用户行为的思辨。
3、app中意符的设计一定是框架层面的设计，他的本身视觉层级不易过高，最好不能超过app主体信息。
4、意符的意义映射要尽可能的单一，最好能让用户一眼就了解这个意符是代表什么功能什么意义。
5、app意符的观察、分析、设计是一个长期的过程，大家可以试着多问自己一些为什么。
Part01-用户体验和用户体验设计
关于“用户体验”这个词，很多刚入行的新人都觉得它玄之又玄，妙不可言。一方面是不知道他具体到底是什么，就好像那是一块理想地，看不见也摸不着，另一方面呢糟糕的用户体验，作为用户是能清晰感觉到它的存在。所以呢，在这里，会围绕“用户体验”这个词做一个科普性质的解释和综述，希望对初学者一些小小的帮助。
1.1什么是用户体验？
用户体验的定义有很多种，我比较倾向的解释是：
“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”
首先明确第一个概念，体验是一个过程，生活中的一切皆是体验，我们赤裸裸的来到这个世界，最后赤裸裸的离开，来人世走一遭就是来体验来了。
从广义上来看，体验的主体是人，客体可以是一切物体和事情，媒介是我们的感官；当我们的感官作用在一切事物上，会产生相应的心理行为，比如预期，比如反馈，比如情绪，着所有的一切一起作用，形成了用户体验过程。
只要留心生活，你会发现用户体验无处不在。
举两个例子：
第一个是北京随处可见的地铁充值机，我经常看到用户站在那里懵逼，最主要的是他违背了用户的操作习惯，插卡机器的的行为总会让人联想到APM机，而几乎所有的APM机器卡都是插一半然后自动吸进去的，而北京地铁卡是需要插到底，然后还需要用力按一下才能成功识别，跟多用户懵逼在这一步，并没有用力按，然后以为是机器坏了没有识别。
第二个例子是我工作的地方旁边商场一楼有一个肯德基，它有两个门可以进入，第一个门是在商场外临街，第二个门是在商场内。
我连续两周的工作日每天早上9点半到10点在这家店吃早餐，发现一件很有趣的现象，由于工作人员的疏忽，商场内的门二经常会忘记打开，因为这个商场的负二楼和地铁站连在一起，所有很多人地铁到站的人群从地铁站口出直接从商场内走向街道：
在这些人群里，如果他们正巧有买早餐的需求，他们往往会从门2进，如果正巧由于工作人员的疏忽，门2没开。按照常人的思维，哪怕门2没开，那不还有一个门1么，用户完全可以多走几步出去从街道门1进入啊，应该不会太影响。如果你能得出这样的结论，又碰巧你正好是互联网的设计或者产品人员，那么你可能有“自我安慰型人格”。
我吃早餐的两周里做了一个统计，10个工作日里，每天在我吃早餐的这半个小时内，试图推开门2却发现打不开的，平均到每天有6位，按照每个人平均买一份早餐套餐15元钱来算，10天内，由于工作人员的失误，这个门至少阻挡了至少900元营业额。
回到刚刚那个“自我安慰”的思维，我发现，10天内被这个门阻挡的实际62位用户里，真正出街道从街道门1再次进入的人，只有十七位。也就是说这个实验中肯德基早餐用户被最短路径阻隔之后，再次选择次路径完成转化的转化率17/62（27%）。
别急，还有更吃惊的数据：在被门2阻隔的62个人中，有17个是自身顺路要往街道右边走路过门1的。但是由于被门2阻隔，他们17个人当中，哪怕自身行走路径要路过门1，选择从门1进去的也只有7位，大概在11/17（64%）（判断顺路依据是他们吃完后从门1出门往右走）。
再看一下肯德基这个例子的数据结论：
被门2阻拦的62个人里，45人流失。
其余17位选择从门1再次进入，这17人里，本身就要顺路经过门一的占11位，说明大概率只有顺路才会进入完成转化。
这个例子说明什么呢？
在替代品遍地都在的今天，不要试图去挑战用户的体验。
当用户看到肯德基的门2，他们产生的预期是马上就可以推开享受一顿早餐，这时候由于门2打不开，使得用户预期受挫。
受挫用户的第一反应并不是想解决办法（表现在例子中就是寻找另一个门进入），而是放弃它。毕竟，没有肯德基我还可以吃麦当劳，还有星巴克，还有面包店，各种各样的选择。
这就是为什么互联网行业把产品用户体验看得这么重要的原因，除了社交产品以外的用户是很难有忠诚度的，你的产品难用，你不能给用户更大的福利，用户一旦发现别的产品做得比你好，用户会马上放弃你，转而用别的替代品。
上面的那个例子主要表达的是用户预期受阻带来的糟糕体验导致用户流失。其实整个用户体验的过程当中，是有很多很的因素相互制约，协同作用的：
户体验本身一个很庞杂繁复的系统；在一个过程内，用户对整个过程中的元素的预期和反应（情感和生物反应）构成了整个用户体验系统。这里面包含了很多很多的旁支，比如人的感知、人的经验系统和使用场景决定了人对于单个体验的预期，而如果超过预期会带来惊喜，促使用户正向评价，也促使用户再次体验。比如人感知和体验中客体呈现的意符决定了人的行为等等…
用户体验最初的时候它只是用于表征易用性方面，而现在，它的概念更多的表现在情感的一个分支，包含设计情感互动和评估情绪。因为人的情绪是很难拿捏的，面对不同教育背景不同生活经历的用户，我们最初其实很难归纳出到底什么样的设计是具有好的用户体验。
好的用户体验各有各的优点，但是，糟糕的用户体验却很容易被归纳和识别出来。
1.2什么是用户体验设计？
说起设计（Design）这个词，那就厉害了，作为设计师的你听说过解释肯定有很多种，而我个人对”设计“的理解是：设计是一种”约束条件下，解决问题的可行的办法“。而对于用户体验设计而言，早期的时候，我们仅能够基于经验主义去完成一些设计，这时候专家的作用会被放大，因为专家提出的不要这样、不要那样，往往会成为指导性方案：
但是随着发展，不断地有人站出来尝试描述和定义用户体验的边界，比如：
随着探索者越来越多，我们最终也是大致能够够了出用户体验设计的定义范围：既然体验是一个过程，那么狭义的，用户体验设计实际上是通过改善和优化用户与产品交互过程，从而提升用户的满意度的过程。
这里有两个要点：
1、用户体验设计的目标是逐步不断提升用户满意度，前面两有个定语：“逐步“、”不断”，对于用户而言，永远没有所谓“最满意”的说法，只有“相较于上一次体验更满意”.所以除非定义一种可量化的终极满意度模型作为指标参照，否则用户体验设计是一个永远都有优化空间的过程。
2、用户体验设计是围绕过程的设计，在互联网行业中，这个过程主要指用户与产品（app、PC端，客户端、VR等）的交互过程中，所以下文重点讨论的是在互联网行业中的用户体验设计。
Part02-用户体验设计是一个岗位吗？
虽然用户体验设计目前还不是一个岗位，但是它正在趋向于成为一个岗位。要解释这一点，我们还是要从用户体验的定义说开去，还记得用户体验设计是什么吗？用户体验设计是通过改善和优化用户与产品交互过程，从而提升用户的满意度的过程。
既然要改善和优化用户与产品交互过程，那把这个句子拆分开来，大概需要的知识储备有：
1、从主语的角度看：首先你要了解用户吧？用户是人，要提升人的满意度，对人感到心理满足的机制是不是需要了解？
3、既然是用户与产品交互过程，是不是要知道人和产品（手机、app、PC）到底是如何交互的？每一次的点击，滑动对于用户来看心理应该是怎样，产品的每一次反馈都意味着什么？
呐，你现在来看，其实我们互联网行业现在划分的UI/视觉/交互/用研，甚至往广了说包括产品/开发/测试，工作内容都是构成用户体验的要素，它需要的知识面特别特别广，对人的综合素质要求很高，所以目前来看，用户体验还不能是一个岗位，但是很多大公司，比如腾讯阿里，他们期待设计师能够变成有更大洞察和对业务、人性有更多了解的全方位人才，而不是一个只会画图的美工，所以说未来，用户体验设计师可能会变成一个title，但是可以预料的是，用户体验涵盖的这么多方面知识，每个人都是有侧重和专长的：可能有些人就是很喜欢视觉设计和UI设计，那他们在精研这部分的同时，相应的懂一些交互方面的知识，这就算是优秀的偏视觉方向的用户体验设计师；那视觉表现很差的人能不能算优秀设计师呢？当然可以，比如他是心理学或者HCI（人机交互设计）的研究生，对人和用户心理有自己独特的认识，再加上精通定性和定量研究方法，对数据有独特的敏感，那他未来可能是用户研究方向的用户体验设计师。
用户体验设计发展到今天，目前包含了最大的三个有模糊边界的模块是用户研究、交互设计、视觉设计。现在绝大多数互联网公司也都是按照以上这三个模块去设置岗位的，这样有一个很大的问题其实是不利于设计师的发展。
阿里巴巴1688的设计总监汪方进关于这三个岗位，有这样的一番评述：
比如交互岗位，如果对接的是一位能力较强的PD，他们可能把交互稿定了七八成，交互设计师完善后交付给视觉设计师，而对接的视觉设计师又有一些交互Sense，他也许把交互稿又改了改，那么这个过程下来，交互设计师的内容，还能保留多少呢？我所说的这种情况，可能也是当下我们交互设计师同学所面临的痛。
而视觉设计师又是怎样的现状呢？视觉设计师拿到交互稿后，在交互稿的基础上美化润色一下，自主发挥空间不太大。从我们集团总体情况来看，视觉设计师的（P级）成长是比较慢的，因为我们讲求论述自身设计的价值是什么，但把视觉从整体中剥离出来，视觉设计师设计的某一个页面，具体能带来多少商业价值？视觉设计师很难去论述这点。
关于用研、视觉、交互这三个模块，我也想分开来谈谈，希望能对目前刚入行或者入行不久感到迷茫的小伙伴有所帮助。
Part03-用户研究
上面我们说到，用研、交互、视觉这三个模块构成了一个用户体验设计的能力维度，要搞清楚这三个维度，我们不妨先看看业界最出名的一张用户体验要素图：
我们一般把最下面战略层的部分分解开，其中除了产品和公司战略之外，关于用户需求的定义交给用研（用户研究）人员去完成。
关于用户研究，如果是一个从0到1的产品，产品初期是需要对产品用户进行定位划分和用户画像，就是我的这个产品是为了解决什么样的用户的什么需求的，这些用户的属性是怎样的，他们具有什么样的特质和颜色、他们一般使用产品的情景是如何的？
这里需要注意的是，如果你不是一位有用研经验的人去第一次尝试做用研，需要留心我们很容易落入理想化用户设计的陷阱。再客观的站在用户角度去思考，去设计也会有主观和流于表面的情况出现。我们不能想当然的按照理想情景去思考用户需求，用户需求是复杂的，再加上企业自己的，以及各部门的需求纷繁，所以一般在产品迭代的过程中新的功能很容易陷入想当然的“用户就是需要啊”的思维之中。所以对于成熟的产品来说，需要划分核心主流和普通用户并分别画像。关于用户画像的方法有很多很多，大家可以去随意搜索在这里就不细谈了。
还有如果是一个初次开展用户研究的同学做用户研究的时候，可以掌握几种常见的方法，访谈法，焦点小组，易用性测试，问卷调查这些方法各有利弊，最重要的是找到当前情境下解决问题且行之有效的方案，比如访谈或者焦点小组，精心整理问题并邀请公司的一些员工或者核心用户进行访谈并全程录音，在结束后认真提炼访谈中多次被用户提到的关键词，从关键词中按维度抽象整理出用户的需要，是访谈的核心价值。并且输出文档，赋予思考，再以此作为整个设计改版的核心依托，让里面用户提到的关键词在设计页面中体现，这才是有效的设计。
关于用户研究的常用方法，具体推荐给大家两本大部头的书，大家感兴趣或者不知道自己感不感兴趣，可以去看看《设计调研》和《洞察用户体验方法与实践》第二版。
Part04-交互设计
交互设计的输出物是产品原型，也就是你们看到的线框图。那线框图是怎么产生的呢？这个需要从产品经理那边对功能梳理开始。
一般大一点的有交互团队的公司，比如新浪微博啊之类的，他们的产品经理的工作重点会更加focus在功能本身到底是不是用户所需要的，而经过产品提出来的需求文档，一般只有功能需求List和他们的优先级，如果遇到要画图说明的，也就是简略的几一个草图。
这时候，交互设计师会根据产品的提出的功能需求List去进行整理和区分：
这里整理和区分的方法是合并，拆分和归纳。
比如功能A是可以拆分成更细颗粒度的需求A1和A2的，其中A1和A2又碰巧属于不同的已有的两个功能区块，那么就可以把他们拆分到不同的功能线上，如果某些功能发现他们有同样的属性，那是不是考虑把他们整合在一起？
这样整合完了需求，再按照优先/重要的二维表格去划分，最后得到一个需求量表：
然后我们根据这样的版本需求量表优先级和重要性，有的放矢的去设计功能入口和信息架构，就会游刃有余：
而一般复杂产品新增功能的时候，往往要考量很多因素，不能一味的去做功能堆砌，还是需要把不重要的功能隐藏或转移，突出重要的功能，再把一些同属性的功能入口组织在一起并列，这些都是在原型之前需要思考的问题。再往下，那就是根据一个一个的信息去设计产品低保证原型图，那就没啥好说的了，你们看到的原型图几乎都差不多，但是至于你们的交互设计师的原型是不是按照我上面步骤一步一步推演出来的，那就要打个问号了，这可能是区分一般交互设计师和高级一点的交互设计师的一种办法。（如果你见到听到功能就开始画低保真的交互，那…）
如果你以为交互设计师就是画个原型，那你就错了，交互设计师切记不要沦为产品助理……其实在真个UX体系中，交互设计师承担的是最重要也是最核心的一个环节，那就是优化用户路径（即优化流量路径）。
什么叫优化用户路径呢，举个例子，全民k歌是一款唱歌的app，那用户最核心的功能就是在上面唱歌，而关于唱歌，大概有独唱、合唱两种维度。比如现在，我作为普通用户，想要去完成独唱一首歌的行为。这种行为从用户路径上看就是用户从任何页面到唱歌详情页。那么到底有多少条路？既是说，到底有多少个页面可以跳转到唱歌详情页？然后你会发现，其实能跳到唱歌详情页的，除了清唱那种独特的方法以外，其他的都是要通过伴奏详情页跳转，那么问题又来了，到底有多少个页面可以跳转到伴奏详情页呢？
就这样，去穷举所有的用户路径，然后看看这些路径过程中有没有一些冗余操作是可以删减的：
穷举所有用户路径，看看有没有哪一跳是可以被优化的（以唱吧为例
这里面有很大很大的学问，如果展开说的话可能是一个几万字都说不清楚的篇幅。
总之，一个好的app一定是功能和产品形态足够扁平简单。
要让产品形态足够扁平简单，就需要根据app的形态去整理和梳理交互层级，针对流量问题进行具体的分流设计：
比如当我们看到一个200wpv的页面，下属三个平行按钮分别只有40w、12w和3wpv，刨除场景问题之外，从交互出发那是不是我们可以设计一个内页的segment组件去完成三个内页的滑动跳转、降低操作成本呢？
比如淘宝这样：
又或者说，我们是不是可以未一个pv较低却承载功能较大的页面另外设置另多个入口呢？
比如像外卖产品这样：
最后的最后，交互设计的工作产出就是原型了，既然都思考妥当了，画个图就就没啥好说的了...
Part05-UI设计
再往后，交互设计师会把原型给到UI设计师，UI设计师的工作范围大家想必很了解，就是把低保真的原型变成高保真的设计稿。
在这里再啰嗦一遍啊：
UI设计师的基本技能是精确的信息视觉传达，不是视觉炫酷的界面！
重要的事情说三遍！
我们唱吧UED最近一直在招人。
看UI的简历，然后发现一个很大的问题是，我发现UI设计师的简历真的是千奇百怪五花八门，有那种插画画的很好的，有那种第一眼上来就是一个很立体的3D建模渲染震撼到你的，也有那种大渐变dribbble风给你一种好像很厉害的样子的，但是这些都不重要，如果一个界面上的内容信息没有主次区分，或者展现得没有层级对比，再花哨的东西都没有用。
UI设计其实都不是闹着玩的工作，也绝对不是纯主观感性的工作，判断一个UI界面的好坏可以通过易用性和易读性测试、眯眼测试的方法检验，判断一个产品交互设计的优劣也可以从易用性测试和用户反馈中得出线索，判断哪种交互手段和信息架构更为可行通过abtest的方法得出结论，这一些的一些设计它都是一个有着科学的方法论作为指导的。
希望从此之后大家审视产品的时候不要以UI美丑这种最低级的主观因素去思考（当然UI的一致性和美观度很重要），但是更多的，要想想更深层次功能布局和信息架构，以及产品打的人群上往更加宏观和抽象的高胃度进行思考。
Part-I什么是交互
狭义的交互（Interaction）定义交互主体必须是人本身，而客体可以是产品，环境，服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着心理预期施加一个行为，然后客体会根据这个行为给与一个反馈（没有反馈本质也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正。如下图所示，这就是我理解的最小交互模型：
当时我举的例子是用翻页器去控制ppt翻页：
如上图所示，拆解这一套交互行为：
当我我点击翻页器的“下一页”按钮，我点击行为附带的心理预期是“PPT翻往下一页”，然后我点击的时候，遥控器塑胶按钮给到我手指一个物理反馈，证明我按下的行为已经完成了，这是“输出端（我的手）的交互与反馈”，这时候遥控器接收到按钮指令，把指令通过红外线传输到USB接收器上，接收器把指令传到PC端然后完成翻页动作，再通过大屏幕传到我的眼（输入端）中，我就可以确认这一次交互反馈是符合预期的。BTW这里有一点想要补充：设备对设备（上图中黑色箭头），也属于广义的交互，只不过现阶段大家研究的交互设计都是狭义的，人为主体的交互。
在我们日用科技产品的早期，有两个东西是无法跳过的，那就是按键手机和PC电脑：
他们几乎是同步在发展的，而这两个产品的交互行为基本上延续到了触屏手机时代，所以为了弄明白触屏手机的交互，这两个产品是值得讲一讲的。
先看按键手机（就是我们小时候用的非智能手机）：
再来看PC，作为和按键手机差不多一起出现的载体形式，人们操作PC端人是通过媒介（也就是鼠标+键盘）输入的，其实本质上也是我们通过鼠标在桌面上滑动x-y区域对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系，然后键盘上几十个键配合输入完成操作。
大家发现了么，上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为，这两种载体从出身开始就还是需要很大交互成本的。
触屏手机出现之后，交互专家们不禁要问一个问题了：
手和触摸屏到底有多少种交互方式？
答案是有很多种：
越是高阶越是隐藏的交互手势越复杂，所谓的“交互成本”也越高，比如锤子三指滑动换屏保那种，就是利用了高阶交互便捷实现边界功能。那这么看起来，iOS也好还是所有的安卓手机都好，从用户端而言，就是组合交互手势，让信息更好的传达而已。那么同理，在App中也是一样，如果我们了解了每一个交互行为的用户心理预期，对设计工作而言就能做到有的放矢：
我们以“单击”和“滑动”这两个最简单的交互行为举例。
所谓单击手机屏幕，用户其实最核心的是有两个预期：
第一是选中一个元素，比如Radio组件。第二是逻辑上的Next，比如点了一件衣服，应该Next到衣服的详情；点了付款，应该出现付款流程，点了返回，应该back到上一路径点等等。
划动交互也是一样的，用户在一块手机屏幕上单指划划划，用户内心的预期其实也不复杂，最核心的预期也就两点：
第一是查看屏幕外的线索（前提是设计师给用户留下线索了或者是这个UI组件长得就是可以划动的样子）第二是查看相邻标签的内容，或者查看同一个标签下的相邻元素，比如iOS的segmentcontrolle组件就是典型例子：
当我们了解了这些之后，我们在实际的设计工作中就可以根据上面这些理论来合理选择UI组件去呈现对应的信息了。
Part-II从交互维度合理选择UI组件
我们在设计工作中，选择UI组件，本质上就是选择信息的呈现形式。
每一个常见的UI界面和UI组件，都一定也满足上面所说的最小交互模型：
在这里我举一些例子说明。
第一个例子：同样的内容，选择不同的UI组件呈现，给用户呈现的是完全不同的产品结构：
大家看下面这张图：
这两个UI模块摆在大家面前，大家应该能清晰的感受到，左边是一个segment控制下面内容的UI；而右边是一个所有内容列表的集合页，只不过通过tab聚类了而已。
第一件事应该想到的是如果需要采用右边的排列形式就必须要控制tag的字数；然后由于右边的tag占据了推荐贴的位置，导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的，图右的优势在于，由于竖向排列tag可以让一个屏幕显示更多的tag，可以让用户更方便的定位内容，比如外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜，而且外卖产品的左侧tag一般是一家店铺的菜的品类，用户下滑菜品配合点击品类，点完即走，很方便（京东和淘宝电商类平台也是类似的）。
再来看第二个例子，就是UI应该会随着内容而进行调整和优化：
这里举一个唱吧的例子，唱吧从7.0到8.6之间做了三次改版，大家可以看到，唱吧团队几乎是损失了屏幕效率来加大了间隔和突出了歌名，这是为什么呢？
这是因为页面承载的关键任务不同，大家对比着7.0时候和8.6时候的UI样式，正好是今天快手和唱吧的对比：
大家会发现，其实这个页面，快手和唱吧承载的内容都是消费转化，都希望用户点击进去消费内容，但是两款产品做了截然不同的UI风格，原因是什么呢？
快手在这个页面，其实承载的关键任务是：“迅速让用户找到感兴趣的点”，它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身，比如第一张图是一个人在打高尔夫，右边是一个工人，然后第二排左边是一个游戏的镜头，右边是一个传递正能量，大家可以很方便的通过图片识别里面的内容，用户更沉浸更聚焦的去选自己喜欢的点击进入消费就可以了。但是唱吧的视频截图其实是不能识别里面内容的，大家可以看到，第一张图是一个妹子，第二场图是一个妹子，第三张图还是一个妹子，那用户点击进去的动力在哪儿了？除了这个照片长相之外，更多的其实是文字决定的，是这个人唱的这首歌的歌曲名是不是我喜欢的，或者是这个演唱者的的歌手等级。
所以基于这种跟深层次的逻辑，唱吧和快手两款产品的这个页面都是为了促进消费转化，但是UI长相上完全不同。
我们看第三个例子：
同样组件下，选择不同的交互方式，也会使得效果完全不同，比如现在有一个UI页面，主要由一个tab（iOS叫segmentcontrolled）组件控制下面的内容，样子张这样：
我先假定一个前提：这个app中的这个组件不支持横划，只支持点击切换。
好了，现在我假设这是一款已经稳定运营了一年的产品，为了说明问题，我假设一个理想数据：
假设每天有20W的uv访问这个页面，其中分流情况是：
10Wuv消费“推荐”下的内容
2Wuv消费“生活”下的内容
1Wuv消费“段子”下的内容
3Wuv消费“美女”下的内容
4Wuv消费“游戏”下的内容
这时候，为了优化交互行为，有一天决定把这个tab组件从不可横向划动改成可以划动的（并且告诉用户这里可以滑动了哟~），然后给你一次机会重新排列这五个tab顺序，你会怎么做呢？最简单的办法当然是把五个tab按照用户消费意愿逐一排列，即：“推荐、游戏、美女、生活、段子”。
这样排列当然没有任何问题，但是还有没有更优解呢？我给出的解决办法是这样的，大家评判一下：
按照用户的消费量，“游戏”是消费量第二的一个tab，毫无疑问我会把它排在第二项，这样可以刺激用户划动行为，然后“美女”是消费量第三的，我会把他放在第四位，这时候我会把“段子”和“生活”这两个消费率最低的tab分ABtest做两个版本放在第三和第五位拿去测，以判断之前的“段子”和“生活”是由于自身内容不够优质，还是之前交互成本太低导致的数据较差：
最后我们来看第四个例子：
比如一个app，他的UI张如下图所示的这个样子
现在假设在运营和市场团队不做任何努力的情况下，单从产品交互的角度，能不能优化上面这个版块的点击率？
首先我们来分析一下页面架构：
如果我们认为，不管是点击右上角的“>”，还是点击留个圆形入口都算完成转化的话，我们现在的这个红色的UI组件，入口位置一共有7个。根据长尾理论，如果我们把这个圆形入口从6个扩展到比如九个，是不是一定对转化率有正向影响？答案并不一定：
为什么呢？因为主要是这样的改动会带来一个未知的泳道横划交互，它会产生一定的影响，如下图所示：
用户看到这个泳道之后可能出现三种行为：
a.“用户完全不滑动”——那入口就从7个变成了7.5个，别的没有变量影响。
b.“用户滑动看完了之后，点击某一个或者左上角的“>”进入”——这是我们想要的转化
c.“用户滑动看了这些圆形入口之后松手，就是不点击进去”——这是我们不愿意看到的结果
想到这里，那为什么我们不能让用户直接滑动之后松手就跳转呢？
想到这里，所以优化方案如下图所示，给与用户一个x轴区间，滑动手势操过那个区间则告诉用户你现在松手默认跳转，用户不愿意跳转也可以回划，只要不足这个x区间就给与用户自主选择的机会：
我之前在上家工作的时候，我们把6个圆形入口变成了10个，然后用这个“松手跳转”的交互把单元模块的穿透率从21%提升到了31%，这是一个实战当中的真实例子。
当然了，请大家再思考这样的一个问题：
一个页面的流量就这么大，一个地方涨了11%，那势必别的地方就会相应的损失11%。一般情况下app首页承担着80%以上的分流工作，根据流量漏斗来看的话每一次引流都会导致其他模块的数据下降，所以设计师们应该要根据运营策略和公司大的产品OKR来合理选用合适的交互组件，以达到想要的目的，还是那句话：“小孩儿才分对错，大人只看利弊。”
Part-III从交互的维度量化用户体验
移动互联网产品设计中，尤其是在中国的app产品，有两大分歧阵营：
“扁平”阵营表示了，我们需要产品足够扁平，最好就是三次交互可以触达所有app界面：
“简洁”阵营也表示了，我们需要页面信息足够简洁，最好一个页面只完成一个核心任务：
那既然是这么专业且牵连甚广的一个名词，我们真的就没有办法去量化评价它了吗？
永远不要忘记，用户体验是个过程，而我们每个人也都是用户本身。在这里我提供一种普通用户维度的比较好用的用户体验评估方法是“穷举分析用户行为路径”。
比如你是一款外卖产品的设计师，那么用户在不同产品模块下定一个外卖的流程路径大概有多少种，都穷举出来。比如你是一款在线演唱类的产品设计师，那么用户在产品中完成一首歌需要的用户路径到底有多少条，穷举所有路径之后一一优化，让路径变得更加扁平，或许是一个最“笨”但是有效的方案，怎么优化呢？用淘宝消息页举个例子：
淘宝消息页上面有“交易物流”、“通知”、“互动”三个tab，这时候我们假设一个用户三个按钮下面都有消息，用户想要看完这三个消息大概需要几次交互？答案是至少6次：“点击第一个进去-返回-点击第二个进去-返回-点击第三个进去-返回”，这样的交互显得呆板且冗长，淘宝团队巧妙的把三个内页集合成一个页面的三个tab形式，大大缩短的交互成本，这就是所谓的“把用户路径变得更扁平”：
大家在使用很多产品的过程中，多多留心就会发现原来细节里面总有魔鬼。
市面上大量出现同质化产品、设计，就是因为大家都在按照现有的，常用的模版在设计，现在其实比早两年会好很多，很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。
例如下面的案例，这是一个电瓶车电池租赁的一个产品。
如果让你盯着第一个界面进行改版，我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来，或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的，即便将错误路径3改成了路径2，你以然还是在错误的路径上，本质没变。所以为什么我们说要做正确的事而不是正确的做事。
交互不仅仅能够让产品好用的，也要让产品走对方向。
另外，UI也是交互的一部分，属于看的懂。好用可以分为看得懂，学的快，用的会，交互体现在人们日常所接触到的大部分媒介，并且与之产生联系。例如一把水壶，水壶的设计形式首先通过视觉让你感知这是一个水壶，如果把水壶的外形做成一个马桶，你觉得它还是一个水壶吗，这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作，例如装水、倒水。而用的会就是这个水壶更多的附加功能，例如烧水、定时、调温等等。
交互的媒介是不可缺少的，大家是否去研究过为什么古代人们撰写文字是从上至下，从右往左而现代人的习惯是从左右的？古代受限于工具、媒介，竹简是主流的记录文字信息的媒介，有人会说竹简可以从做往右写不是非要从上往下啊，但是大家可以看到人们是如何打开进行阅读的，如果是横着阅读但是打开是上下展开就会非常不自然了。
所以在当时人们为了适应非常有限的工具资源，改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑，那基本也就凉凉了。
从2g到5g时代的发展，除了生活方式发生翻天覆地的变化外，我们所接触到的媒介也发生了变化，从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步，让人们对信息的获取更加方便快捷。除了内容，外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化，从当初的搬砖按键手机到支持ar等新技术的超智能化手机，改变了我们的认知也改变了我们的生活方式。
平台迁移的交互成本，很多同学可能都玩过moba类游戏-dota，这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制，键盘用来控制技能的释放和其他快捷物品的使用，都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标，这是端游中基本的交互行为与操作。
在现在非常火热并且模式和dota相似度很高的王者荣耀手游中，我们看到了，如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动，右手拇指来控制技能的释放，在这里大家要注意，在端游中技能的释放是可以非常精准的，并且可以指向性释放在某一个角色中，但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能，但是在手游中我们无法做到选中某一个技能再点击到某一个角色上，所以手游中只能进行非指向性的预判技能释放。
同样在端游和手游的吃鸡游戏中，端游键盘控制人物移动，鼠标控制射击与视角，但是在手游中控制射击与视角就需要2个手指来完成非常不方便，也很影响射击的精度，但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备，专门用来给多余的手指进行射击操作。
另外，大家如果做b端的同学应该也深有感触，平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事，因为在网页端我们有大量的空间和更自由的控件形式去承载信息，比如联动的左侧标签导航和顶部联动的标签导航，在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航，但是页面显示实在有限，很多的信息完全无法在一个界面中呈现，所以要么将页面进行左右滑动，要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。
web端的工具和网页通常都会有撤销操作，按CMD（ctrl）+Z大部分都可进行撤销上一步操作，但是在移动端我们无法通过特定、或者统一的手势进行撤销，所以很多时候在表单输入的时候会有一键删除图标，却无法进行撤销。所以我在想是不是可以在用户一键删除信息后，删除按钮变为撤销按钮，有待考量。
到底什么是交互设计，这个问题其实是比较复杂的，也是我一直在思考的问题。所以也翻阅了很多文献，尝试做更多的案例来解释。交互设计的概念真的挺多的，光网上能够找到的定义就不下5种，这些对交互设计的定义中，比较频繁出现的是行为、场景、用户等词汇，交互设计到底设计的是用户的行为，还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情，我觉得可能还是没有能够解释清楚交互设计的本质。
事实上，为什么我们讲不清楚什么是交互设计，其实UI设计也一样，她绝不可能单纯的指代用工具绘制出用户界面，其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语
例如“你可以意思一下”，单就这句话，我们大概知道最关键的是“意思”二字，包含了特别多的含义，含义需要通过语境、使用场景来区分，说者的“意思”是想告诉听者什么呢？没人知道，是一口气干完一瓶酒，还是喝一口？还是送一点礼还是？应付一下？
当然这句话中的“可以”也很有讲究，加上“可以”说明你也能选择不“意思”，是不是觉得这7个字让我们整一句话都活了起来，说者与听者如果不在一个境中，听着就压根不知道说者的具体表达含义。
同样的，在设计领域，很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。说出来自己都要笑出声，还有什么五彩斑斓的黑等等。就比如呼吸感这样的词，这个词听起来比较抽象，让听者都有点不太好意思追问什么是呼吸感，其实你问了，说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸，但设计者觉得现在刚好，所以本身就没有一个标准，更多的就是主观的感受，让你不得不接受这个建议的原因是因为两者的身份。
我们用我们能够讲述的语言去描绘我们不懂的事物，再例如设计师和开发还原只会说往左移动10px，而不会说给这个view加上paddingleft10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识，设计师通常喜欢描述从左到右或者从上到下，但是在开发的语音认知理，他需要知道的是空间坐标，并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识，开发也尽可能的去补充设计背景。
在这里，交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通，所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。
再举个例子，不知道大家有没有编辑过问卷或者做过用户访谈，很多时候是不是觉得收集到的信息无效、无用，其实很多的原因是因为我们和用户对于这些问题压根不在一个频道，比如：你的问卷问的是，您喝酒的频率是多少，选项有：从不、偶尔、经常，在用户的眼里偶尔可能是1年喝一次，而我们觉得差不多1个月喝一次算偶尔，再比如访谈的时候问用户这个问题：您觉得您喜欢下面哪个页面的风格？用户：“什么是风格？”
所以交互设计师有一个能力久显得很重要了：让万物都可与之对话的能力，对话需要什么，是语言。
我们都知道，语言是我们沟通的根本，语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言，不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等，例如在模型手办中有分线、渗线、勾线、补土等，这也都是在特顶专业领域中的一些术语，但这些并不是语言，只是在某个领域中大家总结出来便于沟通的文字符号。
所以我们再回到上方看一下定义，首先语言是由词汇所组成，词汇是由符号做组成，大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法，但这些都仅仅只是规范，而并不是语言。语言拥有更强的普适性和通用性。
那么我所认为的语言他首先包含了能够组成词汇的符号，这些符号大概就是指：点、线、面、体、色彩由这些点线面体可以组成的词汇有：按钮、文字、图标、图片等。但是光有词汇不行，在汉语中有12种词类：名词、动词、形容词，在由句子组成的词汇中包含了不同的成分：主、谓、宾、定、状、补...这里不过多叙述。
语言很重要的一点它具有语境，语言的运用包含了看听读写4个方面，看和听指的是输入，读和写指的是输出，那么交互设计语言中，也包含输入和输出两种属性，例如输入指的是由不同“词汇”组成的“句子”，比如由标题、箭头、色块组成的一个itme，是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。
这里的控件虽然有两个属性，但是还需要语境来帮助我们理解，一个是它本身所能够输出的默认状态的，比如点击之后的跳转页面，另外他也可以具备产品赋予的自定义属性，例如底部滑出picker。
还有，在汉语中“去买两个桃子吧”，这里的“两”肯能是虚数也可能是实数，但是在交互设计中，我们如何表示点击1下和两下或者是多次呢，一般单击的属性通常可以有一些特性的符号属性所表示出来，例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等，那么双击的话可以用双箭头来表示吗，当然不可以，双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。
那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思，并且有用的。这会让更多信息不对称的情况消失，不仅仅是设计师，在产品团队中大家都能够有一套共性的交互语言系统，无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中，大多都是多种元素的拼合，给出常用的、可复用的控件、组件，但是大家依然还是无法从语言角度去创新，这就导致了很难会有新的、有用的交互形式的出现，比如很多搜索控件都是承载在顶部导航栏中，那么在做规范的时候也只能在这个组件上去微调，殊不知搜索这个控件的“语境”并不单单只能在页面顶部，例如高德地图做的就很好。这样一来，这个组件的常规规范形式就能和很多产品区分开来了，当然要视产品形态不同。
市面上有许多的新零售电商产品，页面中的信息流也是大同小异，但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式，但是我们要知道，30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示，但是3000个就不行了，很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。
所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中，首屏基本上都是呈现这样的策略，从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局，从基本上能够满足一个大量sku电商产品的所有需求，但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢？
通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性，并且在后台工具中灵活控制，同时除了日常的营销目的之外，在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。
最后总结一下，我认为交互设计也包含了视觉，所以我们在决定用什么样的设计形式之前需要考虑更多，入业务、用户价值等等，从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。
大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道我们眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。
视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。
大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。
我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。
但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。那光说原理，我们也来看一下在产品设计中需要注意的地方，因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。
如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。
还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号，当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击，但依然还是不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。
但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。
而且线上觉得还OK的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。
当然色彩的运用也会讲整个页面的层级凸显出来，而不单纯的用中性色来区分层级。
同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样，“展开”使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。
所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱
另外，UI设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面，当前板块标签和正在播放剧集的激活状态。
色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造
在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。
然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色
但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。
会让人产生“幻觉”！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。
为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的
让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。
荧光色绝对不可以使用在UI界面中，尤其是主色。会让你瞬间失明！
在很多dribbble的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。
说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。就不说色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。
为了营造这样的“新拟物”的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字，说的好听叫做使用了奥卡姆剃刀原则，有一句话一直非常影响我做设计：“设计是需要被简化的，但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。
例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼
首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究例如用户画像，品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑，并且对市面上的app进行总结，我们发现大部分的产品色，简单来讲在我们HSB模式中去色都在一个固定的范围，就像这样。
在上文中也说到用色比例的631法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的1种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。
其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给2-3种层级即可，至少2种，至多3种。在选择3个层次的中性色文字是，给大家一个建议：标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50，默认文字不要大于80，大家可以去尝试一下，且中性色不得使用纯黑。
该风格设计感和个性都极强，很考验设计师对造型绘制的把控，功底不够就很容易导致设计后出现识别问题。所以设计难度较大，且延展性较弱，难以表达复杂语义，使用需谨慎。
面型不透明度风格，通过调节前后不透明度可以带来较强的空间感，使用场景较广泛。
晶白严格来说也算质感图标（白色质感）的一种，常见于品类图标设计，通过透明度、投影、渐变等参数调节，使整体立体感和空间感都很强。
又叫毛玻璃风格，是通过背景模糊，或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受，但由于容易与浅色背景相融，造成对比度不足难以识别的问题，所以在使用中需要注意无障设计。
也叫2.5d，有很强的趣味性，及识别度，适合重要入口或运营设计。但这类风格较为卡通，且表现花哨。使用需要注意应用场景及目标人群年龄段，避免干扰信息阅读和不符和产品风格。
这类风格可以很好的吸引用户注意力，在电商、美食类产品中较常见，主要注意配色干净协调。
新拟态图标色彩相对单一，与背景融合度较高，通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大，再有这类风格与背景对比较弱，无障设计问题较大。
通过大量渐变、投影来表现立体感，整体风格偏年轻化，常见在教育类产品中，使用注意配色干净和谐。
通过调节同一色相不同明度、饱和度来营造前后空间感，整体风格统一。
这类图标特点很明显，有极高的识别度，目前美团外卖品类区入口就是该风格，整体偏年轻化。主要考验设计师造型绘制、技法表现能力。
通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术（装饰）价值更大，不追求识别度，美观即可。
这类风格既可以做图标又可以做空状态插图，设计美观有特色即可。
这类移动端界面较少见，目前只在一个海外电商产品（Jollychic）中看过，还有就是一些像素游戏中，比如「泰拉瑞亚」、「我的世界」。
力量感、稳重、男性等感受
安全、亲和、年轻
由于图标风格繁多，所以以上列举并不包含所有图标风格。
图标存在的目的是起引导作用，在丰富页面视觉的同时，帮助用户更快的获取信息（当然图标的使用意义还有很多）。设计师在将文字翻译成图标前，必须先理解其文字含义。因为最终呈现的图标，需要用户一眼能准确反翻译其中含义（艺术抽象、装饰类图标除外）。
在C端设计中，以Tab为例，一些常见文案：首页、分类、发现、我的，这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说，目前在做一款网站搭建工具，后台常会需要设计组件及对应的图标，比如：滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标，在一定程度上会比较难精准传达文案。
我们可以借助情绪版，根据产品定位和目标用户描述，再结合应用场景，在目前已有的风格中找到符合产品气质，符合当前模块视觉层级的图标风格。
前面我们已经了解了目前常见的图标风格有三大类：线性、面型、线面，其中还有很多细分，比如在线性中又分粗线（沉稳、力量）、细线（品质）、曲线（女性化），还有圆角、直角，每种类型所传递的感受都不同。在创意前期，我们将每个点合理进行随机组合（如下图）即可创造一种更新颖的风格。
经过关键词详解发散，其实我们已经获得了很细节点，接下来将这些细节点进行合理融合后，就可以得到代表同一语义但形式各异的基础图标样式（此时还只是想法阶段，可以通过手绘方式记录组合形式，不用特别精细化）。
在界面图标设计中最常用尺寸：12x12、16×16、24×24、32×32、48×48（其他尺寸：64×64、96×96、128×128、256×256、512×512）
图标是否美观，会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中，通常会尽量减少不必要的细节，降低图标复杂度，来帮助用户快速识别。当然图标也有丰富细节的做法，常见在一些重要运营入口上。
识别度的问题，在最前面明确语义中就有提到过，这里就不赘述。
在细节中包含：表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等（不同风格图标的细节不同，这里只是列举部分），上述细节在系列图标中都应保持一致。
在图标绘制中，需尽量避免坐标位置xy或宽高参数出现小数点，以此保证最终导出的图标是清晰的。
由于不同图标外轮廓不同，就会导致哪怕在物理大小上相同的图标（假设都是24x24），但视觉上可能还是会给人大小不一致的感受，因此我们需要借助前面提到的图标盒子进行约束调整。
图标的饱满透气，不一定需要加入很多笔画（描边、装饰等）细节。而是尽可能在形成风格的同时，简化能影响识别度的关键笔画，通过调节笔画大小、长短、位置使图标达到一个最平衡状态。
以如下途牛_我的页面_功能区图标为例：
图中标红图标就存在饱满度不足，及内部较拥挤的情况，第一感受是看起来不舒适，品质感比较低。除此外，还存在如下问题：
在图标中融入品牌基因可以有效的提升产品品牌感，作为高阶设计师必备技能之一，常见提取维度：
以我之前的豆果美食项目为例，提取到如下细节：
根据提取到的基因，最终得到如下两套风格不同，但语言相同且都具备品牌感的图标。
Logo轮廓：在图标中融入品牌logo外轮廓（GooglePlay），或根据logo轮廓结合应用特性进行延展（Microsoft）。
根据文案进行详细翻译，帮助我们充分理解文案。
释义：有专门的知识或经验，受聘为机关团体或单独个人提供专门咨询的人。
提取释义中关键信息，生成关键词：专业、专人，再根据关键形容词发散一系列具象名词。
根据产品调性和模块视觉层级以及考虑延展性，初步确定如下风格组合起来是比较适合：
在实际查看中，发现Tab的风格为单色+不透明度+断点风格。
为了和Tab拉开差异，最终确定以如下风格进行组合表现比较符合产品调性：
线性：双色
面性：单色、双色、不透明度、轻质感、明暗质感
线面：线面
通过手绘或大脑想象进行造型构思，这里我就不展示手绘过程（行吧，我承认就是画的太丑了不敢放）。
由于不同风格对图标造型构思有所影响，且图标类型很多，不同特点组合起来样式更多。案例精力有限，所以只以线性双色风格做演示，希望大家灵活使用。
这一步就是将手绘图形矢量化，在矢量化创意过程中，我们可能会对手绘的图形进一步简化细节或新增造型，这都很正常。只需注意在整个绘制过程中遵循图标设计规范，以及注意图标设计注意事项即可。
图标盒子使用
创意输出
Tips：
1or2？
最后对专属客服进行多风格尝试，最终效果如下：
附上部分绘制过程中的淘汰稿：
这里主要介绍静态图标中，svg格式在工作中如何输出给前端同学使用（借助iconfont）。
1、图标资源优化
在iconfont官方绘制指南中有描述，在导出前需要按如下规则优化图标资源：
2、选中图标导出svg格式
以Figma为例，优化图标资源后，选中图标将输出格式选择为导出svg。
3、上传iconfont
在资源管理下，选择需要上传的位置。
去除颜色并提交：适合单色图标，去除颜色提交可以方便前端使用代码修改参数，减少不同状态图标重复上传。
保存颜色并提交：适合多色图标（注意：在单色情况下，选择保留颜色提交，前端则无法通过代码修改图标颜色）。
最后当我们把图标都上传好后，就可以将前端同学拉入团队项目中开心进行玩耍。
让我们先看下各类App中，一些比较不错的信息卡片长什么样：
图片理解很简单，就是该卡片想表达的信息主体，可以是商品、风景、插画等，PGC内容图片通常由运营把控，UGC内容为用户自行上传。虽然上线后实际上传的图片，对于设计来说没有太多关系，但在设计稿中还是需要严格控制图片质量。（一定程度上也能提高过稿率）
图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）
标签处理需要注意如下：
按钮和标签在处理上很相似，可参照标签。
信息布局需要注意如下：
1【明确产品类型】
产品类型不同主要对布局产生影响。
原因：新闻资讯类，吸引用户产生点击的并不是因为图片，而是具体的标题，通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反，这类产品图片比文字更吸引人。
2【明确应用场景】
卡片式：在卡片式中图片是设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果。
应用场景：
列表式：信息集合一般是简单的图文组合（小图+标题）或纯文本信息。由于列表垂直排列每一行内容，相对卡片式，在同样大的屏幕中可以展示更多内容，可供用户阅读信息更多，新闻类和数据类应用更青睞于这种设计。
目标受众的属性，对信息权重的划分影响很大，比如对价格敏感的用户，优惠信息的视觉层级就需要抬高。为了便于理解下面的案例，这里我定义的就是对价格敏感性用户。
4【划分信息层级】
定义了目标用户后，将卡片内所有元素罗列出来，并借助四象限分析的方法，对各个元素的权重进行划分。
5【同类信息分组】
将同类信息分组，便于后面确定元素之间的亲密性关系。
6【增强信息对比】
前面我们借助四象限，将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理，设计用户浏览视线，在该过程中对案例中的元素进行如下处理：
做完上面这些后，可能大部分人觉得到这就可以了，但其实我们还可以再增加设计细节，这也是你与其他设计师拉开差距的地方。
7【设计细节表现】
由于案例不同，增加细节的方式不同，所以需要具体案例具体分析。在本次案例中，我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标，来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标，配合预约文案，让用户预知操作后可能的结果，并且提升按钮视觉层级、提升点击欲望。
8【确定最终布局】
在布局中主要考虑两个点：
1、合理性&拓展性
由于该卡片的应用场景为推荐列表，所以这里保持原有的上下布局，遵从人眼阅读习惯。
2、屏效比
Q1:3张设计稿中活动标签为什么进行修改？
答：稿1到稿2，活动标签样式修改，位置调整，对应不同的用户，对于价格敏感性用户，显然稿2更能刺激他们点击。稿2到稿3，对标签样式再次进行加强。稿3到稿4，考虑该应用场景是在推荐列表中，为了避免出现多个同类型活动的卡片，导致过乱，所以修改了设计样式。
Q2:在稿3到稿4中优惠标签这一排内容，和预约按钮这一排内容，上下调整的原因是什么？
Q3:你认为最终稿还有优化空间吗？
沟通是为了完成设定的目标，把信息、思想和感情，在个人和群体之间传递，并达成协议的过程。沟通目的一般分为：说明事物、表达感情、建立关系、达成目标。
需求沟通是设计师和团队围绕需求目标，信息传递的过程，是设计师展开设计工作的起点，贯穿整个设计过程，沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性，对很多新手设计师来说，在需求沟通过程中，可能会碰到一些共同的沟通问题，比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。
针对这些问题，本文尝试梳理需求沟通过程中几种典型场景和方法，以期帮助新手设计师快速识别需求沟通中的常见问题；提升沟通效率，快速达成共识；掌握沟通窍门，更精准高效的产出需求。
本文主要分成2个部分，第1部分主要聚焦在需求沟通过程中的不同阶段，面对的典型沟通问题和解决方案；第2部分主要介绍沟通中一些常见的技巧和方法。
通常设计师在处理需求的流程大致可以分成4个部分：了解需求->分析需求->探索方案->实现方案。在不同的阶段，设计师要解决的核心问题不同：
了解需求阶段，设计师和产品针对需求目标进行讨论，并和团队就产品目标达成共识；
分析需求阶段，设计师和产品针对产品策略合理性进行讨论，并提出体验诉求；
探索方案阶段，设计师探索设计方案，并和产品就商业目标和体验目标达成平衡；
实现方案阶段，设计师和产品协调优先级，调整方案，确保方案最大程度实现还原；
对于目标较明确的需求，在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后，即可进入需求分析，策略讨论阶段。
但对于方向探索类需求，如何协助产品探索目标，和团队达成关于目标的共识，是这阶段的沟通重点。以一个创业的项目为例，产品想做一个图片社区，原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下：
在了解需求背景、用户群体，明确了需求目标后，进入需求分析阶段，通常产品会给一个商业假设：假如做了xxxx，用户就会xxxxx，产品可以达成xxxx目标。以一个需求为例子：产品想做一个任务体系，通过福利吸引用户做任务，从而拉动产品活跃。
如果设计师完全按产品给的商业假设输出，方案产出过程貌似很顺利，但可能隐藏了很多问题。以本需求为例，产品的商业假设逻辑是：用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求；
但这个假设是正确的吗？设计师的价值就在于，这个时候要能找出产品假设中的问题。通过对用户的了解和洞察，还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题，才能顺利实现产品目标。
通过对用户实际参与过程的分析，用户在看到任务奖励后，实际需要权衡的内容很多，如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大？分析需求过程关键就是找到这些问题的对应策略，强化用户参与的动力，降低参与难度。
在方案输出阶段，设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标，很多时候希望把达成商业目标的手段做的很强；
当发生围绕商业目标和体验问题，谁都无法说服对方的情境时，设计师该如何沟通呢？
首先，作为设计师要摆正沟通立场，理解商业化是任何产品的根本目标，体验也是实现商业化手段之一，我们反对的不是商业化，而是简单粗暴的商业化方式，商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。
其次，应能够识别对于曝光越多越好，越直接越有效的这种思维方式，通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时，最节省力气的做法就是提升曝光等方式达成目标。
当发生争执时，如果仅仅站在设计立场上，用设计理论说服对方，通常效果有限。尝试找到产品实现商业化目标背后的逻辑，不要用手段代替目的，探索更好的实现商业化方式的可能性，比如尝试在合适的路径上推荐，或探索用户更容易接受的内容形式。
沟通的过程是一个信息螺旋传递的过程，表达者的信息传递到接收者时，因为背景、环境、理解能力、传递完整度等差异，接收者仅能接收部分信息，而接收者在理解消化后，再将自己的信息传递出去，这个过程循环往复，会导致两个最常见的沟通问题：目标偏离以及信息衰减。学习适当的沟通技巧，可以有效减缓目标偏离和信息衰减。
针对这三个会导致沟通目标偏离的问题，可使用以下技巧：
②换位思考：能够倾听对方的问题和困难，尝试寻找解决问题的办法，而不是一直表达诉求，无助于问题的解决和推进；
③控制/倾听情绪：美国心理学家埃利斯创建的ABC情绪理论，拆解了事件发生和情绪之间的关系，指出事件的发生并不是导致情绪的直接原因，我们持有的信念才是。因此在沟通中不要加入太多内心戏，过度解读事件。比如产品让设计反复改稿时，可能会解读为产品在故意刁难，尝试了解反复修改背后的原因，可能对解决问题更有帮助。
沟通过程中表达者的模糊表达和接收者的理解偏差，会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达：“设计稿尽快输出”、“页面太结构化了，想要更社交化一点”、“能不能做得更有创意一点，更有趣点”当出现这些类似的沟通语句时，可以尝试通过具体化方式，进行确认。
在需求沟通过程中，我们要对不同阶段的沟通目标有清晰的认识，围绕目标进行充分准备，运用设计方法了解用户、了解产品核心诉求，做到知己知彼，才能进行有效的沟通。
沟通是解决问题，共同协作的重要方式。如果你觉得自己不善于沟通，可能要反思下沟通前是否想清楚自己的沟通目标，对于解决问题的过程、方法是否熟悉，准备是否充分？当我们能做到知己知彼、胸有丘壑时，沟通可能就变得简单起来。
说唱歌手LilNasX用《OldTownRoad》做BGM在短视频平台发起的牛仔挑战（#Yeehawchallenge），使这首歌曲通过短视频成为了全球爆款。这首歌在美国地区的流媒体播放量超过了25亿次，在Billboard排行榜保持了19周的冠军。
在游戏领域，短视频/直播内容也正成为分发重要形式。短视频巨头已深入游戏腹地，2020年移动游戏用户与短视频用户重合率达82.5%，近六成移动游戏用户会用短视频主动搜索游戏内容。短视频在和游戏内容结合上有先天优势，消费门槛低，体验更沉浸，同时也可以快速获取其他玩家的感受。除此外，对于游戏制作和发行方来说，这里也是通过内容创作获取用户的良好渠道。
游戏依托赛事直播、KOL直播，聚集了大量高质玩家，相较于传统分发方式，直播具备互动性、真实性、及时性等三大特点。KOL主播可以将游戏最直观的展现在玩家面前，更可以利用高人气迅速提升游戏热度。Facebookgaming现在采用直播feeds的方式进行游戏的推广，使玩家对游戏体验感受更直观。
黑客帝国4在官网为用户提供了一段可交互的宣传视频，根据用户的选择不同，触发不同类型结局。让用户更有代入感和掌控感。有种“我”开启了一段故事，也更容易带来体验上的惊喜感。
洛杉矶流行艺术家BIIANCO为其单曲That’swhatfriendsarefor制作了互动音乐视频，以互动游戏的方式让观众进行多次选择，探索属于自己的故事。
2021年音频内容呈爆炸式增长，播客这种很早就有的形式，在今年焕发了蓬勃生机。因为疫情原因，音频内容呈爆发式增长，相较于其他数字内容表达方式，音频覆盖了更多互动场景，用户可以在通勤、运动和打扫房子的时候在车里播放。
21年初热播的《流金岁月》不仅霸屏热播热榜，更首次将营销可能性转化到“看不见的”声音领域，最终联手十多家播客参与多方面讨论了女性、友谊、成长等话题，精细化传播，也让更多电台参与创作讨论，最终“我的「流金岁月」”主题内容实现了全平台百万级的总播放量。
影音、游戏联动明星、品牌、知名IP、传统文化产业、线下活动等等具有影响力的合作方进行战略合作，扩大双方影响力。如英雄联盟和LV的跨界联动，这款由LV设计的史上最昂贵、最奢侈的游戏皮肤，还未推出就捕获了无数LOL玩家的心，在让玩家兴奋不已之余，还引发了“这款皮肤究竟有多贵”的讨论。
2021年底热剧《风起洛阳》联动洛阳市文化单位正式发布“华夏古城宇宙”的全新概念，并宣布“华夏古城宇宙”首发洛阳IP中的剧集《风起洛阳》、纪录片《神都洛阳》、动画片《风起洛阳之神机少年》，带领观众开启探索华夏文明的旅程。
影视剧宣发期，通过话题互动或设置传播内容，让用户创作内容进行传播，如《鱿鱼游戏》引发自发传播的抠糖挑战也引起更多受众注意激发用户观看。
通过大型庆典活动，让用户共情，形成记忆共享，将志同道合的人聚在一起，形成文化传播。如英雄联盟每年都会举办盛大的全球总决赛开幕庆典，并加入一些让人印象深刻的游戏元素。
同时Discord可以创建「临时」游戏语音频道，可以让其他成员看到频道内成员正在玩的游戏；玩家也可以将游戏实况传输到服务器，在语音频道邀请朋友共同观看自己的游戏“现场直播”，让玩家的朋友在沙发上重现游戏的感觉；
2021年初爆火出圈的社交产品clubhouse，也是在早起利用名人明星和圈子的力量，通过采用邀请制的方式吸引了高质量的种子用户，带动app的影响力，提升其在世界产品和科技圈的热度。
相较于传统的机器人客服，机器人进化出了新能力,在数字内容推广上展现新前景。在Discord中，由第三方机构提供各种数字内容服务能力的机器人，如将Patchbot机器人添加到频道后，可以将用户喜欢的游戏资讯/功能更新及时推送到频道中，让玩家获取信息更及时；
在Discord和Telegram聊天群组中，有很多提供数字产品服务能力的机器人，为群中小伙伴定期推送和主动获取影音资源。
随着元宇宙、区块链技术的火爆，数字内容也展现了不同以往的展示和推广方式。2021作为元宇宙爆发年，向我们展示了未来的一角。通过虚实结合的互动体验，数字营销不再局限于单一的文字/画面，而是通过多体感的交互，让用户全方位的体验数字内容，为猎奇的互联网用户打开了数字营销新篇章。
贾斯汀比伯举行了一场由真实动作捕捉的线上虚拟演唱会，比伯在演唱《Peaches》、《HoldOn》等人气单曲的同时，观看直播的观众可以根据场景与比伯进行线上互动：场景切换到田野时，观众可以点击不同颜色的花朵，让田野生出花朵形状的流光；
切换到街头场景时，观众可以把聊天内容或爱心发送到比伯周围；
Decentraland提供了去中心化的社交世界，用户可以创建自己的虚拟形象，在不同的游戏场馆进行切换，为游戏品牌起到了更好的宣传作用；同时Dcentraland提供了虚拟土地售卖，用户或开发者购买土地后，通过制作3D场景，发布自己设计的各种产品或服务，这些场景也可以使用VR终端来体验，用户或开发者可以发挥无限的想象力进行宣传创作。
韩国剧集《鱿鱼游戏》热播后，剧集中的游戏关卡在罗布乐思公司的游戏社区被“1:1”还原，其中的游戏“1、2、3”木头人进入推荐排行榜，吸引了众多观众成为玩家，也让很多玩家去奈飞追剧，扩大了该影视资源的影响力。
以一个小小的齿轮（或者扳手）形象登场，“设置”在几乎所有产品中都是不可回避的模块，他允许用户在弹性范围内自定义产品，来更好地适应实际需求。
在一些产品团队的眼里，“设置”或许是一件非常简单的事情，因为大多设置模块的使用频次低，无关核心业务。所以当内容看似非常简单明确时，“设置”甚至会不经设计，由开发直接上手就干。但这样简单处理的结果被摆到用户面前时，各种糟糕的体验就纷至沓来了。找不到设置入口、不知道该如何设置的用户吐槽屡见不鲜。所以说，“设置”，说简单也不简单。
下面我们就从用户场景出发，深入挖掘设计逻辑，重新认识这个随处可见的小齿轮。
调研发现，不同性质、体量的产品，“设置”模块的功能设计存在着不小的差异。
ToC产品一般会提供关于用户自身使用习惯的设置，如界面语言、皮肤主题等。而对于ToB产品来说，除了部分与ToC产品重叠的用户个性化设置内容外，往往还有作用于整个平台、全体用户的系统设置权限，当然他们的可见用户并不是全体成员。
从上述对功能的简单描述可以初见，“设置”模块的目标用户也不会是一成不变的。
拿我们日常高频使用的浏览器产品来说，设置是开放给全体用户的功能模块，但它的使用频次很低，如一些关于性能、证书的配置，即使是浏览器的熟练使用者也可能对它很陌生。也就是说，哪怕是产品的高级用户，也可能是“设置”模块的新手用户。
而以技术导向的工具型产品为典例，繁杂的系统设置是产品为了满足不同客户间、复杂多变的业务规格，在系统中留出的弹性空间。在这个需求场景中，与产品对话的用户一般是系统管理员或技术支持人员等，他们对系统方方面面的经验认知都很充足，甚至系统设置就是其主要工作模块。所以，对于这类用户场景下的“设置”模块，“高效操作、成功结果”是至关重要的设计目标。因为高级用户往往不追求很强的互动性，更希望跳过流程和步骤，直接切入功能得到理想结果。
面向不同的目标用户，自然有不同的设计逻辑，本文接下来的内容，或有共同之处，但更侧重于面向第二种情况的思考。
思考“设置”的用户场景，使得设计逻辑的探讨更加有据可依。简单来看，“设置”的设计可以从三个环节切入：
接下来我也将从这三个环节发散思考，从信息架构、展示编辑、默认值、帮助说明以及保存等多个方面来谈谈我对“设置”的一些看法。
成熟的“设置”模块，必然拥有良好的信息架构。这不仅是指“设置”内部的导航设计，同时也包括“设置”在整个产品的层级安排。这些导航、层级的确定，则会受内容信息体量、功能重要程度等影响。
首先，在“设置”内部规划一个合理且清晰的导航，需要在信息的深度和广度之间做好平衡。平衡架构的天然敌人少不了信息量冗杂这个令人头疼的问题。无论是在单个层级中内容过多，还是层级本身过多，都会给用户的快速定位带来考验。而通过调研发现，如Google、Salesforce等产品都选择在复杂的“设置”模块引入了全局搜索来帮助用户缓解查找某一功能的压力。
信息量冗杂带来的考验还有那些零散的、彼此关联不强的设置项。对他们的架构安排，很容易因为不知道怎么组织，便一股脑地塞进诸如“通用”、“高级”等的模糊分类中，不过这可谓是十足的懒人设计。想要搞定这些难搞的信息，设计者需要对设置内容有更深入的研究和理解，搞清楚它改变了什么、会影响什么以及后续是否会拓展更多关联设置，等等。
还有一个值得思考的细节：对于丰富多样的设置项来说，是将他们散落到直接影响的功能模块中合适，还是汇总于一个设置模块中更合适呢？或许在不同的场景里答案并不一致，我觉得这需要综合考虑该设置项的放权角色、配置频率、配置影响等因素。
完成“设置”模块的基本架构后，就该将目光投向那些具体的设置项了。就常见的设置内容而言，根据其适合的展示形式进行简单的抽象，主要分为以下两种：
1、适合以表单形式组织的内容：一般是具有独立影响又拥有相同特征标签的单条数据被整合到一个分组下进行展示与配置
2、适合以表格形式组织的内容：一般是具有相同固定结构的数据集需要进行统一管理，包括组层面的增删等
为每一个内容选择最合适的展示形式（当然也并不仅是上述两种），这个选择大多时候并不困难，因为“设置”场景的目标导向往往比较明确、直接。当然也不排除部分复杂场景的存在，这就需要我们多花些心思，以用户更易理解的展示形式完成功能性的表达。
在“设置”模块，展示与编辑的联系非常紧密。直接编辑和解锁后编辑的选择，主要取决于用户进入页面的常规诉求是查看确认还是编辑修改，以及这些设置内容的改动容错性是否良好，等等。
在本文讨论的“设置”场景中，每一个更改都可能对整个平台乃至全体用户产生影响。通过调研，我们发现多数用户对于默认值的沿用性不低。故，对于那些需要默认值的设置项，选择一个合适的默认值是值得审慎对待的问题。
除了默认值的设计，恰到好处的帮助说明也可以让设置的用户体验变得更好。
我时常看到“设计的目标应该是完全删除说明文字”之类的论述，这好像正契合了简约至上、不要让用户思考等当下流行的宗旨。但，正如尼尔森十大原则的最后一条“人性化帮助原则”也指出，帮助和使用文档是有必要的。
结合“设置”的自身的特点：这是一个对产品进行底层配置（相对其他模块而言）的控制模块，对用户的认知与学习能力有着不低的门槛要求。也就是说，设置的内容对于用户是有一定难度的。我们需要更多考虑内容的帮助说明是否充足，不要想当然觉得用户能够理解。
所以，不难想象，设置模块的说明概率会远高于产品的主体功能模块。进一步探究帮助说明的设计：从形式来说，它可以是文案、配图甚至是一个视频讲解；从强度来说，它可以一次性出现、常驻于页面或是直接跳转帮助文档等。大多数用户并不希望在设置模块获得探索的乐趣，所以无论如何设计，帮助其快速完成任务是我们在设计“设置”时非常重要的一个追求。
“保存了吗”这不仅是每个设计师在电脑卡机时候会问自己的问题，也是用户在完成一系列配置操作后的疑惑。这就牵扯到了设置何时生效的问题。最常见的交互方案有两种：
1、每一项配置都即时生效
2、整个表单统一提交后生效
那么，哪一种方式更好？我继续尝试从业务需求和用户习惯两个方面入手：
“设置”模块的操作往往牵一发而动全身，试错成本其实是非常大的。之前听产品经理说过一个银行客户因为修改了某个小小配置项，而造成了巨大实际损失的例子。所以，在这样一个控制中枢般地位的模块中，即时生效的选用必须谨慎评估操作风险，减少用户轻易出错的机会。
同时，由于即时生效和表单提交这两种交互方式都非常常见，用户天然存在一种认知压力，也就是上面提到的“保存了吗”的不确定。所以，我们需要通过设计，让用户快速且准确地知道当前页面采用的是何种保存交互。
从调研和自身经验得出，以下几点都是比较好的思路：
1、实时的操作反馈可以帮助用户判断是否生效
2、尽量控制设置内容在一屏以内，这样无论是否设计统一提交的按钮（或者更改后出现），用户都可以轻易感知
3、将统一提交的按钮以悬浮方式明显地驻于页面底部，减轻内容超出一屏时的认知压力
4、慎重处理如开关、按钮、滑块等带有很强“即时生效”隐喻的控件
对于很多产品产品而言，“设置”是点击率不高的辅助模块。由开发人员直接上手，设置项很容易就变成机器语言的直译、迭代顺序下的铺陈，而用户是否可以接受这种简单粗暴的处理，就成了阿甘手中的那盒巧克力。
设计本身是建立在对用户、场景、问题的深刻洞察之上，而竞品分析是设计师耳熟能详的设计思维及方法。在自身的阶段性成长中，竞品分析也为久乔及工作带来了显著的增益。
关于竞品分析，大家聊了太多的“如何做”，而我想和大家聊聊“为什么做”。深究竞品分析存在的意义，在实践中设计思路及侧重点将更清晰明确，游刃有鱼。
竞品分析能够帮助产品设计，遵循存在已久的用户心智模型和产品实现模型——启发于《雅各布定律》。
《雅各布定律》由尼尔森十大原则的创立者、尼尔森诺曼集团的创始人之一，雅各布·尼尔森（JakobNielsen）提出。
他认为雅各布定律更像是一种自然规律，只是在描述一个事实，而这个事实就是用户在其他千千万万个网站（产品）上积累经验，学会如何使用网站，当一个网站跟其他网站一致的时候用户会立刻知道该如何操作，但如果违反了雅各布定律，那么用户会毫不犹豫地离开。
简而言之，产品设计需要尽可能降低用户的学习成本，依据用户存在已久的用户心里模型及产品实现模型，进行任务和流程设计。
「YouTube2017年改版前后的对比，在新版中，网站框架和功能上几乎没动，只是在UI上做了顺应新的设计准则，比如调整字体大小、颜色、栏目间距等。整体上和旧版没太大区别，而且还给用户提供了旧版的选择。」
遵循用户认知，对互联网产品有着潜移默化的影响，也印证了尼尔森的《雅各布定律》。这些“影响”在竞品中随处可见，并且符合设计原则及心理学。
同类型产品给用户的心理暗示趋于一致，相近的产品实现模型，让用户快速理解产品是如何工作的。
用户深受行业头部产品，实现模型的教育，建立了认知及行为习惯。所以我们会发现，行业诞生的新产品及迭代的头部产品遵循着一致的概念模型，规避重新教育用户的成本。
我们在不同类型的产品上都进行顺畅的操作，是因为产品向我们示意了一致的可交互能力，简称“示能”。
「文字末位带有箭头，表示可点击查看更多信息；图片带有数字角标，暗示我们可以左右滑动切换...」
保证产品示能与行业竞品一致，为用户沉浸式体验建立基础，避免用户使用时产生疑惑二次思考。
当页面映射关系是用户所熟悉的，已存在的认知便可让用户触达目标，免去学习成本。
「协同软件的消息页面，页面结构及功能分布大同小异，明确地传递各元素之间的映射关系：选中聊天列表的对象，右侧会出现对应的聊天窗口，窗口下方的输入框可以发送新的消息。」
主要体现在产品表现层的视觉符号，传达给用户的意义一致。
「小红点表示有未处理的信息；“笔”代表可填写或修改。」
为自身产品寻求体验及商业的更多可能，打破既定的思维，是竞品分析的关键。围绕不同类型的竞品，直接竞品及间接竞品，设计师的分析侧重点及借鉴取舍也有所不同。
对于产品目标、核心功能、用户群体高度一致的直接竞品，设计师在明确目标后，梳理核心功能设计与竞品之间存在的差异，取长补短。
剖析竞品体验层比自身产品出色的原因是什么，如何更好地解决用户的痛点；当然也需要反观自身产品存在优势的关键，能否通过数据、反馈再进一步拉开差距。以及如何规避短处...
「2月登顶免费社交榜的“啫喱”App，通过创造的潮玩虚拟形象的新型社交产品，可进行各类有趣的虚拟形象互动。同样布局虚拟社交的大厂，字节跳动也推出了“派对岛”App，潮玩形象可结合实景化的实时线上活动社区，可以说是各有千秋。
二者便是典型的直接竞品，将会不断的迭代，共同期待他们相互的“取长补短”吧！」
由于互联网的信息透明，直接竞品趋于同质化，给与设计师的启发也有限。因此，将目光转向间接竞品是非常有必要的。
寻找产品目标、用户群体相近但存在差异，但业务场景及功能也有一定相似性的竞品，作为思维的跳板，或许能为止步不前的现状注入灵感。
在企业协作平台中，视频会议、线上协作等协同产品的在线标记功能，完全可以对“Jam”这款插件进行分析，来实现对于关键内容的信息传递流程和用户体验的提升！」
「21年飞书妙计上线，令人眼前一亮：飞书可将会议中的音视频内容，实时生成文本形式的会议纪要！
借助竞品分析，能够帮助设计师发散思维、寻找设计突破点。在设计思路聚焦的环节，我们也能通过竞品分析进行验证。
资源允许的情况下，设计师可以基于《用户体验要素》中的五要素：战略层、范围层、结构层、框架层、表现层，对竞品进行全方面的竞品分析。
战略层分析主要围绕“为什么开发产品”，我们可以了解竞品的产品目标、用户需求，以及二者结合的商业目标。为了达成最大化商业效益，竞品进行了哪些成功的业务、商业化设计。
自家产品的战略层目标，与竞品的是否有共同点或者相似性。如果有，已制定的设计策略与竞品成功的解决方案是否存在差异，能否解决产品目标及用户需求，在竞品分析中能得到初步验证。
「鼓励“先进团队，先用飞书”的企业协作平台，飞书桌面端在团队切换后数据隔离展示。也正因如此，左侧导航在常用功能区下方，预留特定区域便于用户快捷切换团队，提高效率；
显然二者的差异化设计，归根于各自的战略层考虑，用于达成特定的产品目标和用户需求。」
范围层等其他几个要素，都能够验证相应的设计思路。
为了提高团队产研效率及商业效率，设计创新或借鉴都会相对谨慎，避免沉没成本。
所以在一些资源相对紧张的项目中，为了及时验证多个设计方案的可行性，可对竞品类似的功能设计进行分析，再结合现有的资源（排期、开发投入），从多个设计方案中确定解决方案。
「在系统表单设计中，提交前用户存在多次编辑的诉求。为了给用户提供更灵活高效的体验，关于表单的保存，我们团队预想了3个，在用户体验、技术实现上有较大的差异的设计方向：
显然自动实时保存的体验最佳，也是团队倾向推动的方向。但B端系统中的使用相对少见，考虑用户的学习成本及技术实现，落地及项目收益存疑。
但发现间接竞品，云文档（语雀、飞书文档、印象笔记）的内容实时保存功能，非常贴近我们的体验预设。
最终敲定方向1，围绕用户构建自动保存的体验认知。间接云文档的实现方式做降级处理，数据仅仅保存在前端浏览器缓存，而不是像云文档一样直接存储至云端服务器。项目落地设计目标，并没有暂用过多的开发资源，项目也如期推进。」