在有一次面试的时候，我问候选人一个问题：你觉得你作为设计师，最擅长的是什么？候选人回答我说他最擅长的是移动端的设计。
紧接着我又问主流的移动端设计规范有哪些呢？他开始支支吾吾说不出所以然，我再次提醒他做移动端的时候是怎么做的，有没有参照什么设计规范？他归纳总结了半天，说是去参考一些比较成熟的 APP，看他们是怎么做的。
他的回答有问题么？有问题，错了么？也没错。但是他没有聚焦问题，也对成熟的设计规范一无所知，成熟的 APP 设计规范本身也是属于可参照的坐标系；但他们都有一个更加底层的规范，那就是 iOS 设计规范和 Materia Design 等移动端设计规范。
他的回答更多像是知其然而不知其所以然，这些设计规范我们可以理解为一种被普遍接受且广泛运用的方法论，而我们在做设计的时候，就是在有意或者无意中运用这些设计规范进行输出方案。
萌新设计师拿到需求就开始上手画图，设计老油条拿到需求会思忖再三；萌新设计师设计过程中东借西鉴，设计老油条设计过程中会运用完整的设计体系；萌新设计师评审设计的时候总是三缄其口，设计老油条评审设计的时候口若悬河。
是什么导致这两者之间的差别呢？
这就涉及到设计进阶中的一个重要的问题了：你在做设计的时候，有没有自己的方法论？
百度百科上对于方法论的定义是“关于认识世界、改造世界的方法的理论”。
如果聚焦在设计行业，可以理解为，关于分析问题、解决问题的方法的理论，初级的设计师倾向于通过经验化的手段解决问题，高阶的设计师则通过一定的设计理论去支撑自己的设计，关于方法论的沉淀，可以看出设计师个人能力阶段。
1. 总结归纳
像软件工程师一样，每个人都有自己的技术栈，设计师也可以这样理解，你的职业成长依赖于相关的某一行业；因此你的“技术栈”，构成了你设计能力的基本盘，大类比如 B 端交互设计师和 C 端交互设计，体验设计师和视觉设计师等，小类如 B 端可视化设计师、C 端动效设计师等。
在各自行业积累的经验，是我们个人技能的护城河，通过对这些经验的总结和归纳，我们在遇到类似需求的时候，可以快速复用；这也是为什么招聘的时候一般会要求有类似行业经验的设计师优先。
同时，我们在运用这些经验去设计的时候，可以理解为是一种本能的直觉；我将其称之为设计师的直觉，就像色彩搭配、文字间距、页面留白这些基本的设计要素，大多数设计师都是依赖于设计师直觉（经验）进行设计。
2. 复盘
设计师的经验构成了我们方法论的基础，但是在平时的设计中，如果不注重项目复盘和总结，沉淀的经验也大多都是毫无章法的记忆碎片；因此针对项目的复盘很重要，复盘既包含设计层面的，也包含产品规划、人员协同层面的，这些也刚好构成设计师多维能力的一部分，比如产品能力、沟通能力等。
复盘可以让我们的经验更好的转化为可用的方法论，比如之前在设计长表单的时候，遇到了很多复杂的问题，既有业务方面的，也有交互方面的；通过之前的一盘复盘文章《如何设计一个超长长长长长的复杂表单》，我将遇到的问题以及解决方法分析并记录。
实际上，初版的设计稿并没有像文中所写的那么完善，而是在后续的不断优化中，我将复盘后的一些方案加以运用，取得了良好的效果。
总结归纳和复盘的区别在于，总结归纳是在一个项目阶段内展开的，是碎片经验的累计；而复盘是一个项目阶段结束后，从项目的全局视角出发，通过回顾和反思，发现项目的优点和不足，以此来激发新的思路和新的方案，为以后的项目提供参考；而总结归纳也可以作为复盘的一个手段，两者相辅相成。
机制，于是花时间精心准备，组织大型会议，或激烈讨论或洗耳恭听，在心里留下一个又一个“哦，原来如此”，“哦，不过如此”，“哦，彼此彼此”的回响，时隔几周后这样的气泡便消失殆尽，难免困惑其意义几何。
3. 抽象
方法论本身是一个抽象的概念，人们将现实世界中发现问题解决问题的方法总结成一套可以加以复用的理论，抽象一方面可以延伸方法论的使用范围，也可以更好的进行指导设计；通用的规则一般要比狭隘的规则容易遵守，我们所见到的大多数设计规范，都是依据原子设计理论，通过对原子、分子、组织、模板、页面的定义，产出相应的设计规范和资产。
在产出设计规范的过程中，是将设计风格映射到原子设计理论上，从而抽象出各自行业内的设计规范；在运用设计规范的时候，我们又将设计规范解构到各自的业务中，从而产出符合业务场景的设计，解决业务问题。
4. 刻意练习
最近看了一本书，《刻意练习》书中写道：
“反复做一件事情，目的是找出你在哪些方面存在不足，并且聚焦于在那些方面取得进步，试着采用不同的方法来提高，直到你最终找到适合自己的方法。
为了在没有导师的时候有效地练习某种技能，牢牢记住以下三个 F，将是有帮助的；这三个 F，其实是以字母 F 开头三个单词，即：专注（focus）、反馈（feedback）以及纠正（fix it）；将技能分解成一些组成部分，以便反复地练习，并且有效地分析、确定你的不足之处，然后想出各种办法来解决它们。”
刻意练习适合需要大量时间来进行巩固的技能型能力，比如插画、排版等，我们可以看到大多数学习插画需要的一个基本要求就是多画多练习；而同样，刻意练习在写作沟通方面也有着比较突出的作用，当你输出的内容越多，你的写作技能同样也会提升（当然这不是绝对的线性关系）
如果说总结归纳、复盘和抽象是形成自己方法论的理论基础，那刻意练习就类似于手段了，通过刻意练习，可以将方法论加深固化为自己的专有技能，提升自己的多维能力。
通过对设计经历的总结归纳、复盘和抽象，形成一套属于自己的完整方法论体系。
同时，基于对相关技能的刻意练习，加固完善方法论体系，有助于我们学习业务知识，提升业务能力；快速输出方案，提高设计效率。
文章来源：优设 作者：星野随记
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天我们来聊一聊动画法则与动画曲线，做动效不但要遵循物理规律还要结合人们的视觉体验，想让动效更自然更符合实际，对于动画法则与动画曲线的学习是必不可少的，希望此篇文章能帮助到你~
首先我们说一说动画法则，动画有12项基本法则，源自于迪士尼动画师经累积数十年的动画制作经验所整理出来的，我们逐一来分析学习
01.挤压与拉伸（Squeeze and stretch）
当有力作用到物体身上时，物体将会产生一定的形变，比如你在拍球时，球落地后会被挤压，弹起时会产生拉伸，对于具体的挤压与拉伸的强度，与物体的硬度和用力的大小有关。做动画要遵循运动规律让动画更自然。
如下图小球的弹跳，左侧是无挤压与拉伸的效果，右侧是加入挤压与拉伸后的效果，明显右侧更自然一些
从挤压与拉伸的程度上，我们还可以看出物体的硬度，挤压与拉伸的程度越明显，物体越柔软，反之，物体越硬,如下图我们做一个夸张点的对比，可以看出右侧小球硬度更高一些。
02.预备动作(anticpation )
当物体要发生运动或者人物要做动作之前会有一个预备动作，比如向前方扔东西，一般都会抬手向后然后在向前。或者人在跳高之前会先下蹲发力，然后在高高跳起，做动画也是一样，预备动作可以让用户知道即将发生什么。例如下图中的蓝色小球会看起来更有活力和冲劲。
03.布局（staging）
staging是表演；展现；分阶段进行；筹划的意思，我们可以理解为布局或者构图，例如看动画时，有些表达人物特性的画面会静止几秒，有些场景素材过于复杂的地方会对突出的人物打聚光灯，来引导用户的视觉走向。
04.连续与关键(straight & pose to pose)
我们可以理解成是两种动画制作方法，第一种是连续，也就是根据连续的动作逐一来制作每一帧的画面；第二种叫做关键，也就是先制作好关键的动画，然后再制作关键动画之间的画面。(连续与关键适用于手绘动画，而用AE或者一些动画软件在制作时可以结合使用)举个例子，比如你想做由于矩形逐步变幻成三角形的动画，如下图
05.跟随动作与重叠动作（follow through & overlapping）
跟随动作意思是动作的一个延续性，比如人物戴着红领巾向前跑然后停止，在停止的时候，红领巾是向前飘动的；重叠动作是指人物在运动的时候身体的关节并不是同一时间开始同一时间结束的，而是两者有重叠，如果同时开始和结束的话会很机械。
06.缓入缓出(slow in & slow out )
这个是最常用的动画法则，后面的动画曲线中也会详细说明这部分的，因为所有物体从静止到开始运动再到最后停止，都是一个逐步加速在逐步减速到停止的一个状态，当然机械物体的运动除外，比如传送带上的货物，就属于匀速运动。
07.动作弧线（action arc）
人物运动时会受到骨骼的影响，会呈现弧线运动，如果是直线运动就会生硬很多，举个例子
如果你看到了很明显的区别，却还是不知道为什么的话，我们来这样看
是不是瞬间豁然开朗
08.次要动作（secondary action）
次要动作我们可以理解为细节，主要是点缀主要动作的，比如用右手敲门，左手自然下垂，会给人感觉很放松，如果左手握拳会给人气愤的感觉，如果眼睛四处张望看起来就比较像小偷，这里的左手和眼睛就属于次要动作，可以丰富主要动作，但是不要太过，适当即可。
09.节奏(rhythm)
节奏可以使画面更有张力。有快有慢，有急速，有慢镜头，这些都可以使画面充满节奏感，很平均的画面就会很机械。
10.夸张（exaggeration）
夸张是可以增加对用户的吸引力的，和现实一模一样不是最优的选择，合理的讲动画夸张化往往可以呈现出更好的效果。（可以用挤压与拉伸，加快或放慢等等）
11.实体图（real figure）
可以理解为立体的形态，一个圆很平，但是立体的球就会有空间感，同时要保持画面的平衡。
12.吸引力（apparl）
画面有创新，独特，可以让用户过目不忘，吸引力强
以上要合理的运用才会达到最好的效果，不要机械的使用，说完了动画法则，我们看一下动画曲线。
首先动画曲线有什么作用？在哪里可以调节呢？
动画曲线可以现实对象运动的仿真效果，比如加速运动、减速运动、匀速运动、自由落体等等；在图表编辑器中为某个属性添加动画时，可以在速度图表中查看和调整动画曲线，从而影响对象的变化速率，使其更真实。
正式学习动画曲线之前我们先说一个小知识
关键帧
时间轴上的关键帧会有一些不同的形状，关键帧图标形态取决于关键帧之间的时间间隔的插值方法。当图标的一半为深灰色时，颜色较深的一半表示这一侧附近没有关键帧，或者其插值由应用于前一关键帧的定格插值所取代。
我们一起来看下有几种图标类型
让我们来一一解释，先看最简单的四个
圆形：
自动贝塞尔曲线（对两侧速度不同的关键帧进行柔和的连接）下面动图可以看出两者的不同对比
正方形:
定格（硬性变化）在文字变换动画中常用
凹三角和凸三角都是停止关键帧，可以通过右键点击切换保持关键帧来调整
凹三角是曲线关键帧转换为停止关键帧后的状态；凸三角是普通线性关键帧转换为停止关键帧后的状态
了解了关键帧之后我们来看看速度曲线与值曲线
最后我们来学习下动画曲线，动画曲线可以分为：线性动画，缓入动画，缓出动画，缓入缓出动画，我们逐一来举例说明
线性动画（linear）
动画从开始到结束一直是同样的速度运动，也就是匀速直线运动，看起来不是很自然，例如现实生活中的传送带就是匀速直线运动。
缓入动画(ease-in) -加速运动
动画的速度先慢后快，动画曲线先是陡峭再平缓，例如现实生活中汽车启动，但是缓入动画会在速度最快的时候停止，会很突然，有点像被磁铁吸住的感觉。
缓出动画（ease-out）-减速运动
与缓入动画正好相反，缓出动画的速度先快后慢，例如现实生活中汽车慢慢停止
缓入缓出动画(ease-in-out )
速度由慢变快再变慢，例如现实生活中的汽车启动加速到停止。但是默认的F9对于实际效果来讲并不够，还需要我们把对比调节的更强，如下图我们可以看到调整前后的不同节奏感。
总结一下，单纯的线性动画与缓入动画和缓出动画并不太符合正常的运动规律；当缓入缓出动画相互结合时才会更符合正常的运动规律，但是时间上的掌握也是需要慢慢琢磨的，希望此篇文章可以给你带来一些启发
文章来源：站酷 作者：凌旬
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
传统的汽车中控系统，大多是相对固定的硬件组合到一起，共同构成中心的控制台，控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到 2000 年前后，汽车的中控台都一直以这样相对固定的物理按钮和旋钮来搭建，用户也可以通过官方或者第三方服务，来升级功能，比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。
随着移动端技术的发展，iOS 和 Android 等智能软件系统的完善和提升，汽车的中控系统也不再受限于固化的硬件功能。平台化的软件体系让中控系统有了更多的可能性，影音娱乐开始更加丰富，而已然完善的移动端触摸式交互生态，则为汽车中控以屏幕替代物理按钮打下基础，各类原本存在于手机电脑的新型的 APP 、功能、服务也逐渐出现在汽车中控系统上，而特斯拉更是一步到位，以一块巨大的触摸屏彻底革新了中控的交互体验，OTA 升级，有机多样的UI交互，彻底释放开了汽车中控交互体验上的想象力。新的问题出现了，新的方法在迭代，新的趋势也得到了印证。
宝马奔驰保时捷等顶级的汽车厂商大都在中控台的设计上，探索了各自的可能性，国内厂商也毫不示弱，不过其中绝大多数的系统都基于我们熟悉的 Android 或者是 Android Auto 作为基础来进行定制和优化，而苹果则基于自家 iOS 生态，在 2013 年推出了 iOS in the Car 服务，目前正式名称为 Carplay。而目前各大厂商所青睐的 Android Auto 也上在 Carplay 发布之后所跟进并发布的。
目前，Carplay 和 Android Auto 都已经上行业标准级别的存在，今天这篇文章， 我们先聊聊 Carplay。
CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布，最早出现在一些制造商的汽车展览上。
Carplay 本身并非完全独立的存在，它本身会和 iPhone 一起联动，让iPhone 成为你的车钥匙和辅助管理系统。
CarPlay 车载让你能够在驾驶车辆时智能、安全地使用各项 iPhone 功能。你可以开导航、打电话、收发信息、听喜欢的歌。所有这一切，都整合在车内的中控显示屏上。在 iOS 14 中，CarPlay 车载还引入了全新的 app 类别和适用于 CarPlay 车载仪表盘的自定墙纸。
Carplay 以 苹果自身在移动端交互和用户体验上的深厚积淀，总结和梳理出了一套可供学习和值得参考借鉴的规范。
这些规范对于需要考虑车载使用场景的厂商以及正在布局车载移动端软件或者系统的厂商的设计师而言，都有着相当的参考和学习价值。
作为车内辅助、操作、娱乐的中心，Carplay 可以直接连接到汽车中控的触摸屏上，提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景，而它的设计原则也围绕着这一场景来规划：
Carplay 当中会有提供音频内容的 APP，诸如 Podcasts，网络电台，新闻，音乐，体育节目等等，这些服务和 APP 将会通过内置的屏幕显示，并且借助最常见的「标签栏+列表」来呈现基本的框架，并且必须包含「播放」界面。尽管这类服务和应用是借由内置的界面框架来呈现，但是依然有值得注意的要点：
使用此图标代表明确的、本地的的内容。
使用此图标来标识在线的内容，确保用户知道内容来自网络，并且会耗费网络流量。
在进行音频内容播放的时候，Carplay 会显示「正在播放」的界面，并且会使用如下界面：
在设计这个相关的界面功能的时候，需要注意以下几点：
Carplay 能够内嵌到不同厂商的车中，自然也可以控制车内的硬件。这一部分的硬件驱动支持通常是由厂商提供，并且借由 Carplay 内的界面，提供统一的交互体验。
VoIP 也就是基于 IP 的语音传输功能，而在 Carplay 中，VoIP 应用主要借助 Siri 服务，并且全由 Siri 操控，它并不为用户提供直接的交互界面，因此无需专门设计 UI 界面。
它支持阅读信息和编写/回复消息，不过需要用户授予权限
当你的 APP 有推送信息未读的时候，通常会在 APP 的右上角增加一个红色的小红点标识，并且其中会有一个白色数字用来标识未读信息的数量。
对于错误信息，应当妥善处理，并且绝对是要在必要的时候才推送报错信息。
在加载内容的时候，使用黑屏或者静态的界面，可能会让它整体上看起来像是死机了一样，者可能会导致用户离开。
在 Carplay 当中，有2种常见的导航模式：
横向导航。通常使用标签栏来进行导航，不同内容横向排布，用户可以快速点击不同标签切换。
分层导航。用户在屏幕上点选不同选项，通往不同的子界面。其中地图应用采用的是这种结构。
音乐类应用可以使用横向导航，也可以使用分层导航，在设计导航的过程中，应当注意：
全面的测试，是确保应用可用性的重要前提。
无论音频是否是你的 APP 的主要内容呈现形式，你都需要了解用户对于音频有哪些期待，并且尽量去贴合这些需求。
在管理汽车功能的页面当中，厂商提供的功能和数据将会无缝的接入到 Carplay 当中，比如气候、网络、GPS 等等。当数据不可用的时候，尽量提供合理的响应方式。
比如当汽车通过隧道，没有 GPS 信息的时候，尽量以不打扰的方式来告知用户。
3.3、iPhone
Carplay 是和 iPhone 连接起来使用的，并且在程序数据上也相互兼容互通，只是Carplay 本身提供的是简化之后的 UI ，并且针对驾驶的场景进行了优化。
支持 Carplay 的车辆通常会有物理按钮和旋钮，它们可以作为 Carplay 交互的辅助。当物理按键作为用户的主要交互介质的时候，通常至少会存在一个 Siri 按钮，导航控件，选择控件，以及后退控件。
这些控件和 Carplay 应当高度对应，无论是播放、暂停、上一首/下一首 都应该做出准确的相应。具体可以参阅：MPRemoteCommandCenter
当 Carplay 投射的屏幕不支持触摸的时候，还有基于旋钮的焦点式交互方式，当用户拧动旋钮的时候，能够让光标从一个元素切换到另一个元素，激活并交互。
文章来源：优设 作者：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
用户可以通过内置的触摸屏来与 Carplay 直接进行交互。高保真屏幕可能会比低保真屏幕，在交互效率上更高，更低延迟，支持更多手势。Carplay 的交互基本采用的都是单指交互，具体可以参考下方列表：
在设计交互的时候，尽可能少地使用触摸交互，避免用户在驾驶过程中分心。
Siri 是 Carplay 的基本功能，无干扰的语音让用户和程序之间的交互更加自然和安全
即使看不到 Carplay 的屏幕，依然可以使用方向盘上的语音命令按钮来激活 Siri。激活后，Siri 会针对语言进行处理和分析，并且转换为可用的指令。
具体可以参与 SiriKit 编程指南。
动画可以让屏幕上的元素，拥有一层附加的视觉效果。如果方法得当，动画还能呈现状态，提供反馈，增加用户直接操控时候的感觉，并且告知用户可视化操作的结果。
成功的品牌设计并不只是把 LOGO 塞到 APP 当中，出色的 APP 能够巧妙地使用字体、配色和图像来构建独特的品牌形象。
关于这方面的设计，可以详细参考 iOS 设计规范中的 配色、版式以及 图标和图像 这三个章节。
在品牌设计上，Carplay 要求设计师：
通常，配色可以提供交互性，提供视觉连贯性，并且对界面赋予生命力。
Carplay 支持不同像素密度不同纵横比的显示，但是这也意味着在实际布局设计的时候，要格外小心，尽量让你的设计在不同的屏幕分辨率和长宽比之下，都显得足够正常。
Carplay 采用的字体是苹果的 SF 字体。你可以在这里下载到字体：
和 iOS 类似，在 Carplay 当中，屏幕分辨率也分为 1x 2x 和 3x。
每个 Carplay APP 都应该有一个显著突出的图标，确保在驾驶的时候可以轻松点击到。
如果你设计的 APP 当中，需要的图标并不存在于系统图标当中，或者系统图标与你的 APP 并不匹配，可以自定义图标设计。
系统本身内置了许多小图标，服务于日常各种不同的任务，通常这些小图标会使用在导航栏和标签栏当中，尽可能使用这些内置的图标。
上拉菜单是一种特定的弹出菜单，通常从屏幕底部弹出，并且包含2个以上的选项。不过在 Carplay 当中应该尽量避免使用上拉菜单，在 iPhone 上倒是可以使用它，但是不要在 Carplay 中显示。
在内容加载的过程当中，请勿让屏幕保持静止，或者空白，使用活动指示器确保它看起来没有静止。
如果可以的话，可以在加载过程中提供对用户有帮助的信息。具体可以参考 UIActivityIndicatorView
警告会用来通知用户一些关键性的信息，警告通常由标题、可选信息以及一个或者多个按钮组成。除此之外，警报的视觉系统是静态的，无法自定义。
警告最小化呈现。由于警告本身会破坏用户体验，所以请在重要的情况下使用警报。
相关开发人员可以参考这份文档：UIAlertController
按钮通常可以用来触发一些特定的操作，具有可自定义的背景，并且可以包含标题和图标。和 iOS 不同，Carplay支持的按钮样式非常有限。
标签是推送到屏幕上的一条短消息，这个标签可以显示任意数量的静态文本。在设计标签的时候，尽量保持标签清晰易读。具体开发可参考UILabel。
导航一般在屏幕的顶部，通常导航栏右侧会有返回按钮，中央是标题。有时右侧会有其他的可交互的控件。
滚动视图让用户可以浏览到更多的内容，用户可以用滑动或者轻拂来进行浏览信息。
标签栏通常出现在屏幕顶端，并且用户可以借此快速切换。逻辑上标签栏可以包含无限多的 Tab，但是可见的标签数量，会根据实际显示尺寸而有所不同。
表单通常会以单列的样式存在，干净有效地呈现大量信息。
在具体的表单条目的设计上，也有详细的规格要求。
默认样式，左侧可放置图片，并且标题也是靠左对齐的。具体参考文档：UITableViewCellStyleDefault 以及 UITableViewCell
副标题样式。这是包含标题和副标题的一种样式，两者靠左对齐，上下排布。具体参考文档：UITableViewCellStyleSubtitle 和 UITableViewCell
Value1 样式。标题靠左对齐，副标题靠右对齐。具体参考文档：UITableViewCellStyleValue1 和 UITableViewCell
Value2 样式。标题和副标题文本都靠右对齐，具体参考文档：UITableViewCellStyleValue2 和 UITableViewCell
文章来源：优设 作者：陈子木
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“世界如此精彩，当然不能置身局外”，“愿你向世界交付你的价值”
为什么要写这片文章？
自己入行交互一年多，最近从梁宁老师的《产品思维30讲》和《增长思维30讲》获得了两套思维框架，并从中铭记了两句话：“世界如此精彩，当然不能置身局外”，“愿你向世界交付你的价值”，于是想通过运用这两套思维框架，重新审视各类产品，把自己训练成一个客观的人，并向世界交付我自己的价值。
微信作为一款从2G时代出现的产品，跨越了十一年的时间，成为了如今国民级的应用，甚至正逐渐成为我们的生活方式，却一直保持着简单和连接的理念。就在今年一月份，微信推出了8.0版本，其中添加了很多新奇有趣的功能，站在用户视角上，能看到评价有褒有贬，有人说微信根本不了解用户而且孤傲，有人说微信正在变得臃肿，有人说微信体验不好但是没有替代品不得不用。看了很多介绍微信8.0的文章，发现都只是在介绍微信8.0更新了什么，但是没有看到有人会更深层次地聊微信为什么要这样更新；上周我在听完张小龙的微信十周年演讲后，感触良多，并从中窥探出了微信更新的些许用意。于是想试着从用户体验的角度去分析微信，所以我想把第二个思维框架分析对象确定在了微信身上。
愿读完这篇文章，你能获得我所希望交付的价值～
微信是一款什么软件？
先说结论，微信本质上是一款连接的信息流流量平台。
在很多人人眼中，微信就应该是一款社交工具，希望微信能够做好社交的本职工作就够了，不需要再加上其他杂七杂八的功能；有人抱怨说微信变得越来越臃肿，很多功能其实自己并不用得到，还占用手机的内存，已经丢失原来简单的模样。
但是要知道，你眼中所看到的世界，其实是由各种外部和内部的因素所塑造的。就像几年前有一句特别火的话：你的眼睛里，有你走过的路，看过的风景，读过的书和爱过的人。你能成为你今天的样子，其实是由你的人生经历所决定的。所以微信十年来不断改版，从一款通讯工具变成如今的连接信息流的平台，其实是由微信的基因所决定的。张小龙在2021年1月微信十周年公开课中讲到：“微信10年，如果非要用两个词来描述微信，我想一个是连接，一个是简单。从一开始微信从一开始的连接人，到后来的连接企业，微信支付功能后开始连接现金流，到如今8.0的视频号来连接视频，短视频的信息流，微信基于连接的理念从来没有变过。这也是为什么当年微信能够战胜米聊成为当今最火热的社交工具的原因。
在2014年的时候，微信1.0版本的时候，微信只有400万用户，而雷军米聊有2000万用户，两者的差距从微信3.0推出陌生人社交拉开，从推出微信支付功能开始彻底打败了米聊。是因为米聊是只是在社交，而微信却是在做连接；微信把社交看成一种信息流，从而把更多的信息流整合连接自己的体系内；因为要把更多的信息流整合到平台上，于是微信变得越来越大，占用的内存越来越多。看似有意为之，实则情非得已。另外说一句，雷军貌似是在这次大战之后学会了教训，并把这套战略用在了小米身上，于是能看到你OPPO，ViVO把手机作为核心盈利产品，而小米却只是把手机作为流量连接的入口，继而发展出小米智能家居这一庞大的产业链。
所以你以为微信只是一款社交工具，但其实微信是连接信息流的流量平台。
什么是信息流？字节跳动的张一鸣认为世界是由人流、物流、资金流、信息流组成。比如文字，语音，视频，支付、都是信息流的一个分类。你可以把互联网想象成一条大江大河，无数的企业将大江大河中的水引入自己的支流中，使自己变得强大；所以互联网的的竞争，本质上是流量的竞争，流量指的其实就是信息流。
什么是平台？美团副总裁张川的理解是：平台首先是动态不平衡，你不知道你能在这里遇到谁；第二条，用户彼此之间要产生网络效应；第3条，用户之间永远有彼此的需求，无法握手，需要平台从中撮合。
微信里有的那么多陌生的人，陌生的公众号，你不知道你能在这里遇到谁，你在微信中与熟人，陌生人社交，能够产生巨大的网络效应，催生出了微信支付、公众号这样的庞大商业体系；用户与熟人或陌生人之间、用户与公众号之间、用户与商家之间，永远存在需求，而微信在从中充当了连接的作用。
张小龙说过一段特别牛逼的话：让产品自然生长。微信作为超级巨大的流量平台，真正做到了不打扰用户，让微信的流量自然碰撞、发酵，构建出了如今如此庞大的微信帝国。
微信带给了用户什么样的确定性？
微信始终致力于连接于简单，十年来不曾改变。
连接上面已经说过了，下面来说说简单。微信提供了简单的确定性，每一个功能都切中要害，张小龙说微信最骄傲的是，十年的样子和今天的样子并没有什么改变。通过最简单的方式做到最大程度满足用户的需求，这对产品经理对用户情绪把控要求特别高。分析一个产品一般要从三个角度去分析，首先是从宏观视角看这个产品是附着在什么样的经济体上，竞争对手是谁，也就是常说的看大局，看清楚谁是自己的朋友，谁是自己的敌人。然后是从中观视角去分析产品的服务人群，功能流程，信息结构，并由此得出用户画像、用户体验地图、痛点痒点爽点等用户体验相关的结论。最后是从微观视角，从用户内心的底层情绪出发，去探究产品对于用户内心情绪的影响，由此来进一步分析产品带给用户什么样的确定性。
一般来说，用户体验设计师掌握好中观视角，基本上就能在行业内生存下来。中观视角更多靠的是经验和套路，掌握分析产品的方法和路径，多花时间去实践，假以时日，你就能成为行业内合格的用户体验设计师。但更难的，其实是掌握好宏观视角和微观视角。宏观视角是打大仗的能力，需要你站在足够高的视角去俯瞰整个大局，看清楚产业周期，产业的方向，靠的其实是定战略，和找杠杆，入行不久的体验设计师或产品经理通常没经历过大仗，是很难体会到的，我自己也没经历过，所以只是听梁宁老师介绍，学了一些这方面的思维框架而已，感兴趣的读者可以去了解。但其实梁宁老师更希望我们做到的，是掌握分析微视角的能力。
张小龙就是一个对产品的微观视角特别敏感的人，他能从用户底层细微的情绪变化中分析出用户的需求点。想想微信从通讯工具到熟人社交，再到陌生人社交，再到公众号、微信支付，直到今天的视频号，都是精准地把握了用户最底层的情绪需求的结果。比如，微信的朋友圈从完全开放，到仅设置三天可见，再到三个月或半年可见，直到可直接管理是否看朋友圈，到了微信8.0，甚至要求用户验证好友时就首先确定朋友圈权限，这一连串改变，其实都是源于张小龙对用户在当下社交情绪逐渐发生变化的精准把控能力，这也是为什么都称张小龙是产品经理之神的原因。
微信为什么推出视频号？
微信为什么推出视频号呢？在我看来是为了争夺信息流。这是腾讯继2018年微视在短视频大战战败后发起的第二波战争。
上面说到过，互联网的本质其实是信息流，谁拥有的信息流越多，谁就能获得更大的势能。淘宝靠着电商和支付的信息流，就成为了中国第一的电商公司，字节跳动靠着短视频载体的抖音和长视频载体的西瓜视频以及新闻载体的今日头条在几年间迅速成为了互联网巨无霸级别的存在。
我们可以倒回几年前回顾一下那场大战，战场上有抖音、快手、微视、还有就是一些草莽或腰部的小视频软件。当时快手用户数是高于抖音和微视的，甚至放出不屑于花钱买广告做推广的言论。结果就在2018年春节，抖音8天烧了5亿美元，重金做推广，吸引了大批短视频爱好者和流量；随后快手感觉势头不对，也开始疯狂重金砸广告，做补贴，并成了2020年春晚赞助商。而微视的做法是，大量补贴的同时，借助腾讯的杠杆，直接将入口做在了QQ和微信中，全面禁止非腾讯系短视频链接在微信朋友圈中扩散。结果出乎意料的是，微视和一众其他成为了短视频大战的牺牲品，从此短视频市场二分天下，南抖音北快手的阵容确定下来。与此同时，还有一件事值得关注，就是2019年，三家互联网企业对微信发起了挑战，一个是马桶MT,一个是罗永浩的 聊天宝，最后一个是抖音的多闪，最后是以微信的不理会作为收场。
为什么短视频如此重要？因为它很可能是未来信息流主流的载体。
不知道你有没有感受到，微信公众号没以前那么火了，其实很大的原因是因为我们把看微信公众号文章的时间拿去刷抖音、看短视频了 。在2018年之前，微信公众号是微信信息流非常重要的入口。在PC互联网时代，搜索引擎百度是流量的入口，旗下的百度贴吧，百度知道，百度百科组成了中国最大的中文互联网内容创作社区，使得百度成为了BAT三巨头的头部企业。但是在移动互联网时代，各大应用开始自建搜索引擎，自营内容对百度进行了封锁；微信公众号从中崛起成为了新的流量入口，无数的自媒体创业者通过微信公众号上创作内容，成为了移动互联网时代的信息流入口。但是，随着4G技术带来了更高的网络带宽与传输速率，视频内容开始发展，短视频应运而生。
短视频为什么能够取代文章？
回到底层情绪来看，是因为人们比起文字本能地更能理解简单、直接的图像。文字带给人的反馈是延时的：你得先识别文字本身，理解语义，上下文联想，最后你才能得出一段文字的含义。而短视频是带来即时反馈的，它没有阅读成本，能通过视觉和听觉，就能给用户带来更加深刻和即时的情绪上的变化。其次，短视频的创作门槛比写文章低，张小龙在演讲中说到，许多人其实是不擅长写长文章的，但是你让他用手机拍一段视频，这是一件很容易就能做到的事情。最后是因为当代人的心智提上去了，这时代的人们的观念正在逐渐开放，更加乐于表达自己，短视频当然就能使更多人参与进来，自然就能成为下一阶段主流的信息流载体，微信当然不能置身局外。
所以，到这里，你其实就已经能看清一些微信在做的事情了。微信为什么要开设视频号？就是为了争夺下一阶段信息流入口。为什么当年支付宝要推微信？是为了争夺的信息流。
当前阶段，谁是微信的竞争对手？信息流的上游是人，谁掌握了最大的信息流谁就是竞争对手，目前能看到的是抖音，2018年抖音推出多闪，其实就是为了构建自己信息流平台；在之后，可以预见到抖音和微信在短视频流量争夺上必有一战。
微信能不能赢？
我觉得微信这次能赢，因为人性的弱点推动了互联网的流量，但人性的光明构筑了商业的文明。
互联网商业本质是流量*转化率，字节跳动鼓励人们在抖音、西瓜视频上发视频，采用的是补贴的方式，这会使得视频博主在其平台上发布视频的目的变得利益化，是在变相鼓励视频创作者生产更具强吸引力的题材，取夸张的标题名字来吸引更多用户点击，从而获得更多流量，并通过广告商的投资，带来商业的变现。去年甚至还爆发了直播带货的新蓝海，其实本质上都是帮助视频创作者带来商业利益。色欲作为人类的本能，自然是最能吸引用户的手段，所以你能看到与性相关的视频在抖音，快手等平台占比是最多的。
这种利用人性的弱点（贪婪、色欲、虚荣、窥视）构筑的互联网流量，使得抖音快手在短视频草莽时代逐渐成为了短视频中的头部平台，但是在存量竞争市场上这一机制终究不可持续。相比，我更喜欢微信视频号的做法。
微信选择只做内容承载和传递的载体，这就意味着微信不会去生产内容，也不会去买内容，并不会关注具体的内容到底是什么，而是真正做到让用户自发地去生产和分享内容，让产品自然生长。张小龙说视频号的目标是，希望人人都能够很容易地通过视频化的方式去公开表达内容。这使得内容创作者本身很难带有利益目的。视频号的初衷，就不是让一部分内容创作者获得极高的关注度，成为网红，获得商业变现，而是希望人人都能够像在朋友圈发布图文一样，以视频化的形式去表达自己的内容。微信能这么做，是因为其拥有巨大的信息流，有足够的能力去做这件事。
尽管现在打开视频号，里面同样充斥各种基于人性的弱点所创作的内容，微商、网课、低俗，诱惑等内容遍地，但现在你看到的它的样子，绝不是它本该有的样子。我相信随着微信对视频号的迭代，视频号终会成为微信所目标的那个人人都能表达自己的样子。
为什么张小龙说直播新的表达方式？
张小龙在公开课中讲到：未来直播可能变成一种很多人都在用的、个人表达方式。为什么？因为直播能够营造场景。
什么是场景？场就是时间+空间。景呢？是能够触发情绪的交互。直播比起视频，更能够激发用户内心的情感，能够让主播和听众之间产生更深刻的连接。这种感受其实是视频无法比拟的。就像你在现场看演唱会和看录播体验是完全不一样的，周边的环境会影响用户的情绪。令我很深刻的体验是，今年王者荣耀冬季赛决赛第四局DYG对战南京Hero战队，当时的局面是0:3，如果第四局DYG没有赢就意味着比赛的结束。当时直播中所有人的心都很紧张，结果DYG里的清清用一手关羽力挽狂澜，赢得比赛，在场主持人，和屏幕前的观众都被DYG清清的不服输感动，场面一度到达高潮，我的内心也被深深震撼到了。但是之后看录播，就会发现有人在看外星人似的，发弹幕很冷淡地表示都是基本操作，完全不懂我们在激动什么。这才使我意识到，直播真的比视频更能激发用户的情绪。
现在你打开微信直播，内容质量其实并不好，是因为新流量入口会带来新红利，投机者当然不会放过这个机会。但实际上，微信直播应该和会如今刷礼物求关注，公会云集的直播平台不一样，会呈现出一个更加开放、生活化的样子。
微信为什么要在表情包、状态上的创新？
微信8.0更新了动态表情包，动态，把视频放在名片，音乐播放器优化上等一系列新有趣的小功能。这些功能按照张小龙的说法是人们对情绪的表达更强烈了：他觉得人们喜欢表达更加强烈的表情，他觉得设置状态能够帮助用户找到同类，他觉得音乐播放器不该是一个电唱机放在那里转，而应该给用户更直观的视觉表达。你会发现，张小龙描述需求的方式，是极度自我的表现，他会用心里想的美好的用户故事来解释为什么要加这个功能，而没有根据数据来得出结论。甚至他说想做一个功能，让十几亿人都能在同一张画布上画画，然后看最后画出来的是什么样子。这些一些功能，张小龙就是拉一个一二十人的团队，讨论了一下自己的想法，就这么简单的做了，就这么推出了。
这里我想说说自我与自律。成为高手的路径是一万小时定律，但是，想让一个人持续在一件事情上花费一万个小时是很难的，有两种方法可以实现。一个是保持自律，带着对失败的恐惧，坚持下去；另一个是对这件事保持满足和愉悦感，靠着对做这件事的热爱来度过这一万个小时。自我和自律的人都能成为非常成功的人，你从小受学校的灌输自律的理念其实是为了便于管理。但自我的人，是充满创造力的，对不满意的事物是抱有强烈的情绪的，他们不能容忍不完美的事情，并会去努力改变它。苹果大神乔布斯是一个极度自我的人，他能乐此不疲地对着ppt演练上百次，他不能容忍手机附带个键盘笨重的样子，乔布斯让自己追求卓越的精神成为了苹果的设计理念。梁宁老师说，张小龙是一个极度自我的产品经理，正是由于其对用户在社交需求上极其敏感的感受，才催生出了如今简单并且连接世界的微信，张小龙说自己是被上帝选中的，其实是因为持续做出了正确的决定，而这决定，与其对用户情绪的深刻把控有关。所以腾讯出产品经理，阿里出运营人才。
你吸收谁的营养，你就变成谁。你靠什么满足你，你就会成为它的样子。什么东西持续满足你的东西，什么东西永远让你不爽，这就是你的命运。
总结
这次分析微信，我没有严格根据梁宁老师给的中观思维框架来分析（痛点痒点爽点、用户画像、用户故事、用户体验地图、服务蓝图等），而是从微观情绪和宏观大局上分析了微信带给人的确定感，微信视频号的意义所在，聊了些关于自我与自律的事情。因为我觉得微信成为今天这个样子，服务着如此庞大的用户量，它已经成为了我们生活中不可或缺的一部分了，人生百态，微信包容了无数种用户画像，在其上也书写着无数的感动人心的故事，我觉得这时再去聊中观套路其实已经没有什么意义了。微信从1.0，跨越2G到5G的技术革新，从一个简单的通讯工具，不忘简单和连接的理念，十年时间迭代成为了我们离不开的一种生活方式，这放在人身上该是一个多么励志的事情啊！
最后我想交付给你一句，也是梁宁老师交付给我的，一直触动鼓励我坚持下去的话：
今天你在什么样的点位上其实并不重要，重要的是在未来，你会以哪种方式，持续迭代。
文章来源：站酷 作者：努力的橙子
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当时在构思这个icon时，从一个视觉表现很强的动态形式，一直做减法直至非常恰当合理有效的融入页面当中，下图中最后一个最简洁的设计是确定的方案，简单的动效突出而不突兀，恰到好处。
↓↓
如果你现在打开小米商城进入小米上新，会发现只改了一张背景图，因为开发还没有排上期，但最终会按此次改版的效果开发上线，所以有时候遇到这种情况时，设计师还需要结合当前产品的开发框架进行适配设计。
文章来源：站酷 作者：吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
信息有各种形式，图、文、视频、音频等，而承载信息的形式也多种多样。
本文意将信息容器进行整理归纳，以总结出一些经验规律。
信息容器是承载信息的载体，位于内容层。要理解信息容器的概念，首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度，还有纵深维度。
从底层（远离用户）到顶层（靠近用户），基本上可以分为以下几层：
背景层
信息层
全局操作层（各种常驻于屏幕的bar、悬浮按钮等）
浮出层（模态类型的浮出层还需要有蒙版进行隔断）
本文要讨论的“信息容器”，指的是信息层上，装载信息的载体。信息的类型多种多样，可以是文字、图片、视频、各种操作控件等。
常见的信息容器主要有2大类：列表和卡片。
在整理案例的时候，我不禁产生了一个疑问，到底什么是列表，什么是卡片？如何界定和区分两者？这个问题乍一听有点无厘头，列表不就是列表吗，多个布局一致的狭长单元组合在一起，就形成了列表。那么什么是卡片呢？和屏幕两侧保持一定间距，带圆角的就是卡片吗？
我们不妨先看看下图案例：
为什么类似的布局形式，上图中，图1给人感觉是列表，图2给人感觉是卡片，图3既像列表又像卡片？
从内容层面来说，包含的信息类型有：文字、图标/图片、按钮。几乎没有太大区别。
是什么导致我们观感上的不同呢？
电商案例也许可以给出答案。
从电商产品的商品列表页中可以看到，用户可以自主选择两种不同的商品展示模式：列表模式和卡片模式。
这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量：主图、标题信息、价格信息、辅助信息，相似的展示效率（一屏展示约4.5个商品），不同的信息容器展示形式给人不同的感觉。
单纯从信息层面或者视觉层面都不能界定列表和卡片，如果多维度叠加限定又太繁琐，因此本文给出的列表和卡片直接的区别界定是：可以自主定位关键线索，规划视觉浏览动线。如果视觉浏览大方向是竖直的，那么就归入列表范畴，浏览动线不是竖直而是折线的，都算在卡片范畴。
除了上面说的，最常见的两类信息容器：列表和卡片之外，还有另外两种形式，分别是：无容器和复合容器。
这些容器具体有哪些特点，我们一一来看。
列表的定义：将结构一致的信息单元在竖直方向上铺陈下去，形成的信息集合。
不同场景要呈现的信息侧重不同。
举例几种常见的列表形式：
用户/消息列表
图文列表
功能列表
“卡片型”列表
用户/消息列表的内容结构很清晰，头像+身份+内容提要+辅助信息。
图片天然地比文字更具有吸引力，视觉上的优先级排序是头像＞身份＞内容提要＞辅助信息。
当然用户可以很方便地选择关注的对象是图片还是文字，这体现了列表的优越性，浏览动线竖直，可以方便用户根据自己想要的索引快速定位。
这里值得讨论的是头像用方形还是圆形的问题，相信大家都想到过这个问题，同样是社交产品，qq是圆头，微信是方头，这里边有什么原因呢？
本文尝试分析一下，仅是个人意见，欢迎讨论。
按照理论，圆头亲切的形状感知更加适合轻松基调的产品，方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品（淘宝、京东）的信息通知一般都是圆头的，匹配轻松愉悦的网购体验，而金融类产品（支付宝）多是方头。对于同是熟人社交类产品的微信和qq来说，qq用户层年龄偏低，属性相对更加活跃，更加轻松的圆头可能更适合此类用户。
以iOS为例，当用户向左滑动列表时，呼出针对该列表单元的操作。具体列表对应具体操作，操作项数量不同。
方案A：
优点：操作底板宽度适应文案，不会出现空间局促的现象。
缺点：当文案字段长时，列表被推出屏幕外的内容较多，当用户操作分心时，可能会忘记正在操作的对象，虽然这种情况极少发生。
方案B：
优点：操作底板固定，文案折行规则明确，既不会造空间拥挤，被挤出屏幕外的列表区域可控。
方案C：
优点：搭配图标，视觉更丰富。
缺点：图标占据了一定高度，导致文案无法折行，列表被推出屏幕外的内容较多，与方案A类似。
综上，个人认为方案B是最合理的，对于文案长度的宽容度高，即便文案较长，也可以保证视觉和谐，并保留较多列表内容。
在用色策略上，使用的是为大众所接受的“语义色”，一些具体的颜色在长期经验积累中形成了固定的语义。
当用户触发了带有一定破坏性的操作时，需要用户进行二次确认。
并不是所有情况都需要二次确认，二次确认的样式也有多种。
同样都是模态视图，要表达的信息也相似，都是要求用户进行选择，为什么有些产品选择将对话框居中，有些产品选择将对话框放在底部？这里涉及到关于模态视图的相关知识点，本篇文章旨在讨论信息层面的内容，模态视图涉及到了浮出层的内容，将在下篇文章中进行详细探讨。本篇文章不做过多延展。
信息流产品一般是由图片+重点文案+标签（可有可无）构成。
不同性质的产品想要突出的重点不同，根据内容的重要性权重来分配视觉占比。
从上方几个例子中我们可以看到：
在图文比例从左到右依次提升；
图文布局案例1-3使用了左文右图的方式，案例4-7使用了左图右文的方式。
搞清楚如何图文布局和设置图文比例，就基本解决了资讯流页面最关键的问题。
资讯列表或称feed流，主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息，用户主动反馈的信息精度更高，用户不惜花费更多操作成本来提示产品，对内容不感兴趣。
从视觉上说：
1、提交反馈的入口（小而浅的icon）都不明显，有些产品用“更多”来提示用户，有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时，才会注意到屏蔽入口。常规浏览时，该图标不会影响用户注意力。
2、反馈形式采用模态对话框，用户需要选择具体操作，是屏蔽内容或作者、还是举报或不感兴趣。
3、对话框是否有指向性：从表意明确的角度上来说，带有箭头的气泡更有利于用户定位对象。
从交互上说：
反馈入口热区较小，容易误触，大多数情况下，用户不会注意和点击该图标，用户是以浏览为主要行为。
列表索引一般还是定位文字为主要形式，不同用户的认知水平不同，图标表意始终是一大难点，多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点，但是在具体情境下，如设置页，用户更加在意快速找到自己要找的内容，多度的图标样式，实际上会折损用户的检索效率。
一般功能页面或放置许多功能，常常会超过十几项，这种情境下，检索效率低下是一个痛点。
如何提高检索效率？—— 分组
分组给用户提供了认知线索，根据格式塔原则，用户总是倾向于把距离近的、样式统一的元素归位同类。
毫无分组显然对于检索是不利的，用户需要逐一浏览，该情况适用于列表项无法分组时，如果有分组条件，务必分组，帮用户节约筛选成本。
UI界面中，列表的分割方式常见的有以下3种：
线条分割
块面分割
间距分割
在我们的固有观念里，大圆角，不通栏，有投影的形象就是卡片。
这种样式也越来越盛行，许多产品尝试将列表也用“卡片化”进行包装。
虽然是相当细节的点，但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。
产品级的风格统一来源于点滴细节。
卡片的类型繁多：单列大卡片、泳道、内容流（两列网格、瀑布流）、宫格
从内容展示效率上来讲，单张大卡片就占据占据屏幕（刘海屏）超出一半的高度，用户需要不断滑动屏幕浏览下方内容，操作成本较高。大卡片形式对内容本身，如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品，图片社区（如躺平）本身较为小众、即便是UGC（用户产生内容）单元，用户上传的图片素材平均水平也较高，垂类电商（如Nike）图片品质由编辑控制，质量高且稳定。以上类型产品不以量吸引用户，用户往往更加在意内容本身是否优质。用户没有带着明确的目标，心智更加类似于浏览杂志。产品提供什么内容，就进行浏览。从上方案例可见，除了微信读书之外的3款产品首页都没有突出搜索功能，而是以信息流呈现为主。
与列表分割一致，卡片也有对应分割方式。
大卡片占据屏幕面积大，理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互，点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片，可以选择不再显示该卡片内容，产品收集反馈，对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势，用户触发该手势往往是试探性的，代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。
何为泳道？顾名思义，常见的滑动手势是上下方向滑动，但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动，该类型的形式组合在一起，就好比泳道赛道一般。
可以横向滑动以查看内容的呈现形式，称为“泳道”。泳道可以有多种形式。
停止位置随机：
内容与手势相关度高，比较自由，但停止位置随机，不能保证停下后用户能完美看到当前卡片的所有信息，需要用户微调卡片位置。
停止位置固定：
根据用户滑动速率，模拟物理惯性和摩擦，判断最终展示哪张卡片，并将卡片呈现在屏幕中部，确保卡片上的信息都可以读取。这种交互更加合理，给滑动设置卡点，类似banner效果。
双列卡片可以看成是大卡片（单列）的另一种表现形式。这种形式更加提高了空间利用率，对于单一信息展示更加克制。平衡了效率和效果，是电商、图片社区、视频等产品类型的首选表现手法。
双列卡片可以细分为两大类：
卡片流（对齐）、瀑布流
卡片对齐：
优点：规整统一，视觉动线清晰，浏览舒适。
缺点：对主图尺寸要求高，确定的比例会对商品展示有一定局限。
瀑布流：
优点：图片尺寸宽容度高，满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。
缺点：不容易进行比较，若要进行图片间的对比，比较困难，视觉动线混乱。
两列式的卡片布局需要注意内容层与背景层的区分。
大多数产品的背景层是浅灰色，内容层是白色，色差可以建立区分。部分产品背景层是白色，或者说取消了背景层的概念，那么要建立卡片之间的区分，就需要通过间距或者卡片加底色的方式。
个性化推荐模块对电商产品尤其重要，准确地将用户可能感兴趣的产品推荐出去，可以减少用户的搜索、筛选步骤，提升购买效率和愉悦感，从而提升用户对产品的评价。因此，不断收集用户的喜好相当重要，尽管各种算法已经让产品显得越来越智能，但依旧要给用户留下提建议的入口。
上文介绍了资讯类产品中，用户如何给出对于具体信息的反馈，电商类产品原理也大同小异。
从功能上来说，淘宝、闲鱼、京东，都是通过用户手势（点击图标或长按卡片或两者皆可）来呼出选项，用户通过选择来表达意见，从而使推送更精准。
从视觉上来说，淘宝和闲鱼的反馈形式类似，都是在卡片上添加一个黑色半透明蒙版，将有限的选项竖直码放在卡片上，类似小型模态的概念（但是这里不同于严格的模态视图，没有限定用户必须要做出选择，用户可以直接划走）。而京东的逻辑不同，使用了传统阻断性模态视图的处理方式，将下方卡片用蒙版遮挡，希望用户专注于选择。
从阻断感上说，京东的阻断干是最强的，将用户从原本的浏览行为中提取出来，请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上，针对性足够，且延展性好，气泡的高宽都可以调整，而淘宝和闲鱼的处理方式，在极端情况下，如选项超过5项时，所有内容放在卡片之上，空间就很紧凑。
这类操作比较隐晦，可点击按钮很不明显，长按手势也不常用。同样是当用户有明确反馈需求时，才会寻找反馈入口，一般情况下，用户不会注意到。以用户常态下的浏览行为为最优先。
闲鱼的交互做的很细致，蒙版出现采用了水波的形式，用户抱着要吐槽的心态，这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。
除了电商类产品，部分视频类产品长按卡片也会呼出对应效果。
案例1和案例2，长按卡片，都是出现视频片段的预览。效果类似iOS的3Dtouch，在相册中按压具体照片即可预览。而案例3，点击“更多”图标，呼出操作。然而选项只有1项，不符合逻辑，单一的选项无法构成“选择”，这会让人有点摸不着头脑。
如果把界面看作是一张大网格，不同的内容占据着不同位置、不同面积的页面区域。
除了我们已经熟悉的“有序”布置，如从上到下依次排列内容（大卡片），或者从左往右依次排列内容（泳道），还有更加灵活多变的排布方式可供选择。
布局的本质是分配界面面积，用以盛放内容，同时运用面积对比进行突出。除了面积对比的方式外，还有其他方式可以突出关键内容。
无内容的呈现形式比较简单：内容直接置于背景层之上。减少视觉负担，内容为主，形式为辅。
复合容器是指超过一种的容器形式的组合，如卡片中包含列表、卡片中包含泳道等。
不同的信息容器组合在一起，搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比，对比越大，层次拉得越开，重点就越突出。
建立对比的策略：
色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比
文章来源：站酷 作者：doo_W
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
