#21天打卡产品经理的日常思考# #组件应用# Fluent 或 Material 在设计文档中更多基于基础的网格、布局、设计模式来阐述通用性的响应式规则；因此他们的响应式设计有非常好的延续性，组件的响应式方案基本上都遵循这些规则。而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面，他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里，在桌面端与移动端分别是 table 和 list 的模式，这个方案并不是通过全局抽象规则得出来的；而是基于对组件的针对性设计，正如他们为不同的组件设计了不同的 Breakpoints，这种针对性也适用于特定的 UI 解决方案。

#21天打卡产品经理的日常思考# Grid System：栅格系统Grid System是二维的更加全面的网格布局。栅格系统是所有设计体系必备的，我们通常将页面横向分为 N 列，定义每一列的尺寸与间距，这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的，通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列；同时一些设计体系还提供了可见性相关的 token，来控制界面元素在不同屏幕的显示与隐藏。Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统，因为 12 的因数够多，能满足足够多的布局细分同时又不至于太复杂；Carbon 的做法更加 geek 一些，他们的「2x grid」采用了 16 栅格系统，布局粒度更细但放弃了 3，6 这样的因数。Ant Design 为了满足复杂的业务情况，采用了 24 栅格系统，24 栅格提供了更高的灵活性的同时，也大大增加了复杂度，面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念，核心思想是在较小的屏幕上降低栅格数量，将多余的栅格自动折行弹性布局。

#21天打卡产品经理的日常思考# Flex Layout：弹性布局Flex Layout是一种针对一维的局部布局，以轴为核心的弹性布局。Flex 布局是 CSS3 提供的强大布局能力，从更自然更具语义化的角度实现界面元素的自适应；应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局，Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中，Flex 布局通常结合 Breakpoints 使用，在两个 Breakpoints 之间让界面做更平滑的过度；除此之外其它平台也都有类似的弹性布局能力，例如 Fluent 在 windows 采用 XAML 构建布局系统。无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力，响应式设计要解决布局的问题将会深度依赖这些基础技术手段，本篇不进一步展开。

#21天打卡产品经理的日常思考# Breakpoints：屏幕断点屏幕断点是响应式设计的基础依据，它决定了我们要适配到什么样的设备或屏幕规格，并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的，包括考虑了移动设备的横评竖屏情况；关于详细的规格设置其实并没有太***价值，设计体系都是根据自身定位以及设备覆盖的情况来制订的；例如 Material 的断点在低分辨率范围分得非常细，是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下，屏幕端点不需要太多，无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。Fiori 的断点设计比较有意思，在设计文档中仅有基本的布局规则，没有明确的 Breakpoints 规则，Fiori 对于不同的组件会设计不同的 Breakpoints。例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格，而在 Form 的组件中，Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞，从这点上看出 Fiori 认为不同的组件有不同的表达模式，因此应该针对性对组件进行优化。

#21天打卡产品经理的日常思考# Rem：相对尺寸单位几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位，Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸，即 1rem = 16px；Alta 默认采用是 14px 的规格，并允许基于不同应用选择 12px 或 16px 的规格，默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现，这也许和他们的产品特性相关。国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端，主要为了两个目的：方便计算尺寸、在不同宽度的设备上等比缩放内容；这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段，在使用上本身也存在一定争议，而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用。

#21天打卡产品经理的日常思考# #实施模式# 实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段，经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

#21天打卡产品经理的日常思考# #设计模式# 这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案，这些设计模式除了单独应用外，有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式，非常全面地涵盖了其它设计体系中的绝大部分方案，分别是：调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

#21天打卡产品经理的日常思考# #移动优先# 提响应式设计不得不提「移动优先」设计策略，移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略，基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略，它认为在响应式设计中优先为屏幕限制更大的移动设备设计，再扩展到大屏幕的 PC 端是一种更有效的设计方法；例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法。Fiori 尤其指出「移动优先」专注核心功能，专注增强而非降级，提前考虑移动端更多的独特特性以及异常情况，能提供更好的体验。Material Design 可能算是移动优先的最佳实践，它本身就诞生于 Android 平台，而后再通过大量响应式规则扩展到桌面及 Web 端，使得 Material 在多端都拥有一致贯穿的良好体验。1、Web与Wap 采用Adaptive Design，单独设计Web与Wap 各自使用 Responsive Design，保证在不同平台尺寸下能优雅的显示；2、移动优先（单独设计后，相对于Responsive Design）「移动优先」专注核心功能，专注增强而非降级。

#21天打卡产品经理的日常思考# Adaptive Design 与 Responsive Design关于响应式设计通常会有两个普遍认识，即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD)与 Responsive Web Design (RWD)概念。它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸，而 RWD 是同一套代码做弹性的适应，本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题。

#21天打卡产品经理的日常思考# 打造虚拟性成就感，提升情感归属。会员体系中，会员类型、等级积分和徽章等，是会员信息里最能让用户清晰感知到的。通过一些虚拟的成就感设计能够让用户产生“圈层感”。以会员徽章为例，徽章具有稀缺性和荣誉感，能够让用户感受到他比起非会员用户更加高级，从而增加用户对于品牌的信任感和认同感。那么对于设计师来说，徽章的设计也需要具备更强的辨识度，加入一些品牌基因让用户有“圈内人”的价值感。另外，徽章的展示也非常重要。当我们收集到的内容，或者付费得到的内容无法被他人看到时，荣誉感和成就感、情感归属，都会大打折扣。

#21天打卡产品经理的日常思考# #差异化的设计强化品牌感# 根据产品类型不同进行差异化设计，可以体现在以下几个方面：颜色、质感、字体、信息结构等。颜色：颜色不限于黑金、黄金、蓝灰等等，颜色可呼应品牌色，拉开与同类竞品的差异质感：通过不同的底纹表现质感，比如流动的丝绸、尊贵的皇冠、不规则的曲线等来打造一种会员品质感。还能通过一些投影和光晕的效果，丰富整个会员页的层次字体：通过设计品牌字体增加品牌识别度，强化品牌感知信息结构：卡片式设计在会员页中运用广泛，多采用大圆角设计，更具柔和感。将信息包裹在封闭的卡片内，使得信息层级更为明确。同时可以融入一些动效，最大化利用屏幕效率展示权益信息

#21天打卡产品经理的日常思考# 会员体系建立之抢占用户心智场景，满足用户“利我主义”。当你要做一件特定事情时，会第一时间想起谁的会员服务呢？这就是接下来我要说的，用服务来闭环用户的需求场景，长时间的、可持续性的抢占用户的心智场景，打造核心卖点。如果你的会员产品没有独占场景的话，那么失去用户因为场景打开你的可能性会大大增加。所以，场景规划的重要性绝不亚于权益的设定，好的场景规划可以用较低的成本让用户第一时间想起你的权益。

#21天打卡产品经理的日常思考# 会员体系建立之设定合理的用户成长路径，做好精细化运营。有了明细化的成长路径，用户才愿意付出努力，去达到相应标准的消费或者活跃度。而每一步成长都应该设定相应的奖励提升，合理的奖励提升是用户能否持续成长的关键所在。一旦用户的会员等级越高，那么用户断续会员的可能性也就越低。除此之外，划分用户层也能大大提升运营效率。通过用户的个人信息、行为路径、消费能力等多个维度来进行划分用户层。从而找到业务中真正的“超级用户”，做好精细化运营。例如图中淘宝的88VIP，淘气值需要达到1000分以上才能用88元购入会员。然而淘气值会在一个季度内部分清空，用户需要保证在淘宝的持续消费行为，才能保证自己始终享受88元买VIP的奖励。这一设定的目的就是要做高净值用户留存。

#21天打卡产品经理的日常思考# 正所谓“利益是人类行动的一切动力”，没有好处的事情，用户是不会买单的。而会员享受的权益是否跟付出所均衡也正是用户的主要痛点。会员体系中，权益是必不可少的。那么权益设定是越多越好吗？答案是不一定的。对于用户来说，精准的权益才是至上的。会员体系要基于用户的生活场景来设定权益，而不是单纯考虑给用户返利这件事。权益的设计和用户的需求场景如果没有完全对上，都可以算作成本的浪费。