一、个性化的性别选择设计
完善信息对于产品来说是提升体验的关键，一些产品在初始状态会引导用户去完善，比如昵称、头像、性别、年龄等基础信息的采集。如何提高用户的设置兴趣，降低完善信息的排斥感，需要设计师进行反复推敲。
最近在体验 FLAG APP 的时候，在性别选择界面设计上区别于以往体验过的产品，将性别的可视化进行了更为情感化的强化。出色的设计让用户眼前一亮，精美的插画提高了整体设计的感官体验。该案例提供了性别选择差异化的表现，是提高常规信息界面设计视觉感的不错思路。
二、情感化的用户等级设计
用户等级是增加黏性的关键，也能通过等级带给会员更多的增值服务，激发用户的参与度。
在使用海马体照相馆 APP 的时候，个人中心在顶部视觉区域会直接显示用户等级，配合情感化的人物插画特别突出。通过左右滑动可以查看不同的等级，等级名称和对应的人物形象插画也会针对性的设计，不仅强化了用户体验，不错的视觉感也能吸引用户的关注度。
三、精美的插画助你释放压力
插画在产品设计中的曝光度越来越高，风格多样化直接影响产品风格，也能增强情感化体验。全靠插画撑起整个产品的案例是什么样子呢？最近发现了这么一款产品。
Wild Journey 是一款解压的白噪音 APP，内置了许多大自然的声音，让用户体验到荒野的空旷、森林的静谧、大海的波涛。整个设计全是精美的矢量插画作品，带给用户赏心悦目的感官体验。来这里释放自己的压力，放松身心。
四、趋势化的引导页设计
引导页设计是最容易呈现风格趋势的，利于设计师进行创意发挥。无论是想要发挥插画技能、建模能力或者动效表现，引导页都能提供发挥的场景。
最近在体验嘀嗒出行的时候，发现全新升级的 9.0 版本，引导页设计风格也是让人耳目一新。利用了趋势感的插画风格和视觉表现风格（玻璃质感风）相结合，画面清新自然，带给用户非常好的视觉感官体验。
五、可视化表现提高用户理解度
可视化设计逐步成为信息传递的趋势，利用图形化的形式更利于用户理解，相较于枯燥的文字化呈现来说阅读理解的效率更高。
Keep 在产品设计的时候，有效的将一些数据的表达和内容的普及以可视化的图形进行展示，不仅提高了界面设计的感官体验，也能有利于用户对于内容的理解。提高界面设计的视觉感也能让用户更为关注，图形可视化已经逐步成为产品设计解决方案中的趋势。
六、个性化的主题皮肤设置
个性化的定制设计可以让用户感受到产品的温度，根据自己的喜好选择主题化呈现。成熟的产品都会在个性化设置上面提升体验度，特别是在主题皮肤的定制上面，提供了更多的风格让用户选择。
Keep 在将主题皮肤设置定义为选择运动伙伴，不仅提供了不同的 IP 形象和主题皮肤，俏皮可爱的动态延展也传递了情感化的体验。多种风格的设计满足了不同用户的喜好需求，还为不同的主题定义了拟人化的角色和身份，视觉感和体验度都非常的到位。
七、提高参与度的签到设计
签到设计可以提高用户黏性，让用户在参与的同时获得礼品或者增值服务，签到也成为了众多产品的标配功能。对于设计师来说，如何通过设计提高用户签到的参与度，是需要不断探索的设计思考。
最近在使用天天跳绳时，发现其签到设计的视觉表达直观醒目，大大的提高了用户对于签到的理解和参与度。将签到后解锁的勋章、经验、装扮和礼品等直观的结合到签到界面中，不仅风格协调统一，视觉风格也符合运动场景感。看到这个界面成功吸引了我的签到欲望，签到操作简单，整体的体验度都做得非常不错。
八、情感化的个人中心设计
个人中心作为主界面之一来说，设计的体验度是至关重要的。为了满足用户的喜好需求，个性化的设置也是层出不穷，功能布局、头像装扮、主题皮肤等都呈现出了众多的优秀设计方案。
天天跳绳是个人经常使用的一款运动辅助工具，记录小孩跳绳也是非常便利的工具。个人中心顶部视觉区域的人偶形象增强了界面设计的感官度，人偶的动态体现出用户的运动状态，可以进行自定义的设置来满足自己的情感表达。可以设置人偶的装扮、旋转角度、动作等，人性化的功能设置提高了自定义的体验度，强化了用户情感化的使用体验。
九、结果导向的设计表达
以图标/图形/图片等设计辅助信息的传递很常见，通常都是根据信息的文案来进行设计表达。如果放弃本身文案信息传递的意思，选择结果导向的设计表达，也能带来不一样的设计反思。
最近在体验 One More 的时候，动作库的列表设计中便选择了结果导向的思路。如果是常规的设计解决方案，会根据列表主题内容来设计配图，这样也能辅助对于内容的理解。但是 One More 选择了完成该项目得到的锻炼部位为设计思路，虽然不能辅助项目信息的传递，但是这个设计表达更能让用户理解完成的结果，参与度也能得到提升。可视化的设计替代了文字的表达，提高了用户对项目的理解度，进而转化更高的参与度。
十、新颖的轮播 Banner 设计
轮播 Banner 图对于设计发挥来说，除了在本身的创意和视觉表达层面以外，产品结构和功能层面也是设计师需要探索的方向。
极有家 APP 在产品的体验设计层面做得非常不错，针对轮播 Banner 位置也是做了新颖的创新。在 Banner 图上设计了不同商品的引导标签，方便用户在感受整体家装效果图的同时可以选择场景中的商品，也能对场景中的商品价值有个清晰的认知。轮播的形式结合了待轮播图的预览和风格名称，增加了待轮播图的曝光度，整个样式表达上面视觉感也非常不错，是一个比较新颖的设计解决方案。
作者：黑马青年 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
写在最前
B端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X轴指水平方向上的轴线，Y轴指竖直方向上的轴线，以及Z轴指在三维空间中垂直于视窗平面的轴线。当设计B端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。
本文围绕这三个轴，来看看在B端界面的三维空间里，都有哪些设计规律。
一、X轴的布局与适应
B端界面在PC视窗下展示，范围更大，如常见的分辨率尺寸有1280x1024、1440x900、1920x1080等，且浏览器还支持动态拖拽改变视窗宽度。所以B端界面在X轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。
B端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在X轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。
1.单栏型
表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。
2.双栏型
表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。
1）主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在X轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。
2）各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。
3.多栏型
多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现2种适应的方式。
1）数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。
2）媒体卡类页面，卡片需要设定一个最佳展示的宽度如w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为w的卡片时，所有卡片宽度都恢复到w，增加一列。
上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。
二、Y轴的空间利用
B端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面Y轴的空间利用了。这里我们提供4个小办法来解决上面的问题。当出现大量信息时，应该注重Y轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。
1.如何承载大量信息
1）替换型对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面Y轴的高度是固定的，仅做内容的变更。
2）向下延展型
对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面Y轴可无限延展。
2.如何区分强弱主次
1）强-滚动吸顶当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在Y轴上的展示。
2）弱-局部展开对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。
三、Z轴的叠加顺序
说完X轴、Y轴的布局设计，我们最后来看看Z轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在Z轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以Z轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？此处，我们将页面的所有可能出现的元素按照Z轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z轴上的元素就能整齐地叠加起来啦。
1.基础区间
a.展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。
b.固定类-固定在页面某处的元素，滑动页面时会对a的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。
c.浮层类-由a中的元素触发出的、指向该元素的临时浮层元素。会对a以及固定元素产生遮挡。临时浮层之间的z轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。
2.模态区间
d.模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互(抽屉、对话框和全屏预览等).
e.临时浮层-在模态元素上出现的临时浮层，计算高度时，可把d层想象成基础区间的c层（下拉浮层、气泡等）.
f.第二层模态层-在d出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。
模态区间内，多个模态层可进行叠加（即上文的f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。
3.顶层区间
g.全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。
h.临时层-由g触发出的临时浮层
max.最高层-始终动态高于当前页面所有层的元素（比较典型的是Toast组件）。
四、写在最后
到这里，我们就浅谈完关于B端界面的X、Y、Z轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
百度酒店以比价为核心特色，经历多次设计探索，初步建立了用户认知。
设计中通过“核心流程分析-明确用户关注信息-探索比价价值”的方式去制定设计策略，并在方案探索与落地阶段，通过思路发散、多轮数据验证与方案迭代，验证了“氛围感知强化、价值信息传达、聚合比价”等设计手段的作用，希望给服务和电商等比价类产品的设计师一些启发和参考。
一、项目背景
酒店住宿在线预订市场中，各个平台基于用户权益、运营补贴等差异进行着激烈的价格竞争，导致行业存在天然的价差。而在我们进行的一次酒店预订访谈中发现，超过半数的用户在预订酒店时会进行比价，而比价的用户中多数会使用2个以上的酒店APP。因此，在市场存在价差且用户有比价诉求的背景下，百度酒店通过接入多家供给及会员低价，旨在建立酒店聚合比价平台，为用户提供性价比最高的酒店搜索服务。
二、设计策略与落地触点
1.目标和策略制定
在上述背景下，我们与产品侧对齐业务目标，结合对用户诉求的分析，确定了设计目标。
为了达成设计目标，需要明确比价在酒店预订的各个触点下对用户的价值是什么，以探索比价如何发挥作用。下图列出了酒店预订的核心流程、核心模块及用户关注信息，由于用户在各个环节关注的信息不同，比价所能发挥的价值也就不同，因此基于比价是否影响用户进行选择和决策，我们又将核心流程分成服务报价选择前、服务报价选择时、服务报价选择后。
设计目标的实现也对应上述3个环节如下图：
2.明确落地触点
为了找到一些好的比价概念和价值的传达方式，以及提升比价体验的方式，我们进行了竞品调研，竞品包含酒店、商品等不同行业，调研结论归纳如下：
结合竞品调研结论，我们根据百度酒店的核心流程和触点进行了设计策略的拆解，建立了策略和落地的映射关系。
三、方案探索与落地
1.提升感知-让用户知道百度酒店可以比价
这一环节的设计目标是要让用户知道百度酒店可以比价，以吸引用户在百度酒店完成下单行为，因此清晰、有吸引力的比价元素设计十分重要。基于竞品调研内容，我们进行了设计探索。
1）酒店列表-氛围感知强化及价值信息传达
下图所示为酒店列表比价设计的探索过程，最初的方案，为了保证酒店信息的获取体验，采用了与传统酒店预订平台采用一致的结构和信息优先级，仅结合图片区域和价格做了比价信息的结合，但这种设计与传统酒店预订平台差异很小，比价感知和价值的传达效果并不好。因此设计侧转变思路，在酒店列表中通过更强化的模块来突出比价的感知，同时结合“比某平台低xx”的文案说明比价结果，传达“比价获得更低价”的感知。
酒店列表覆盖多个场景，为了建立百度酒店一致的体验和认知，我们将列表的设计覆盖到了搜索结果页和小程序的多个页面，如图所示。
2）房型及服务报价-基于低价推荐去强化比价
房型及服务报价模块对应酒店精准需求和酒店详情页，与酒店列表思路一致，方案在逐渐与传统酒店预订平台产生差异化，去强化比价、低价的感知，形成记忆点。
下图为搜索结果页的方案，最初外露了多个房型，以满足用户的选择诉求，但从用户行为数据来看，百度酒店的绝大多数用户会选择酒店的最低价房型及报价，因此我们调整设计方案，结合最低报价，用模块式的对比方式去强化比价，并通过“低价立省xx”的信息去传达低价感知。另外，这一部分的设计也和聚合比价有所结合，后面会进行详细的说明。
详情页的主要模块设计与搜索结果页基本一致，如下图所示，详情页中将最低报价作为低价房型推荐，以建立一致的比价认知同时便于用户快捷预订低价。另外，在常规的报价列表中，为了提升用户查找报价的效率，相比于最低价房型，采用了弱化的形式。最终方案上线后，数据上也取得了正向的效果，报价展现到预订点击的转化得到了提升。
3）“产品缝隙”中的比价概念渗透
“产品缝隙”并不像上述列表模块那样感知强烈，设计的目的是为了进一步加深“百度酒店可以比价”的用户印象。结合百度酒店的核心页面，我们重新设计了酒店列表和房型报价列表的加载态，利用“多资源方交替动效+文案说明”的方式，构建动态的比价感知，在用户进入页面或者进行筛选等场景时会出现。另外，我们也利用了小程序首页和详情页的页尾，在阅读结束时去传达全网比价的概念。
2.建立认知-聚合比价模式的构建
在竞品调研部分，我们提到了聚合比价模式，百度酒店由于报价复杂，也适合用这种方式去简化报价。
如图所示，常规酒店预订平台，同一房型（如标准大床房）会存在不同服务政策（早餐服务、取消规则、支付方式）的报价，而在百度酒店中，由于又加入了预订平台的差异，报价会更加复杂，数量更多且同质化严重，即服务政策相同，仅预订平台不同的报价多次出现，这就导致了报价列表的查看和选择效率较低。
聚合比价模式就是要将这些服务政策相同的报价聚合在一起进行比价，以简化报价列表提升选择效率，同时在服务相同的情况下，绝大部分用户会更倾向于低价，在报价聚合后，可以突出低价以便用户预订。
我们也在探索如何让聚合比价更简单，初始方案采用点击展开的形式，用户可以保持滑动浏览的交互体验，整个过程的交互体验比较流畅，但页面的层级关系较为复杂，用户认知成本高。因此我们又尝试了调起面板展示比价详情，让用户聚焦在当前报价的对比，并通过模块式的设计，清晰罗列了每个平台的服务、优惠明细等差异信息，让信息的对比更高效，同时强化低价平台，与前面的比价模块保持认知一致。
聚合比价模式下，存在了两种用户路径，如图所示。用户可以直接选择最低价资源方完成预订，也可以通过比价详情弹层，查看针对同一服务的所有平台报价，对比平台的详细服务、优惠差异后再选择预订。
这种预订模式的目的，一方面在教育用户建立百度酒店可以比价、可以买到低价的认知，另一方面也提升了用户选择低价平台的效率。另外，聚合比价要具有清晰的规则才能被理解和信任，在比价详情中，为了进一步降低认知成本，我们通过标题突出了聚合项，并增加了比价说明入口，让聚合规则更明确。聚合比价的方案上线后，报价的预订点击到成单转化也得到了提升。
另外，前文提到的精准需求搜索结果页和详情页的低价房型推荐也利用了这种模式，不过在比价感知上做了更强化的处理。用户可以在详情页直接点击各个平台报价完成预订，也可以点击文字部分查看房型详情，在页面底部的比价详情中完成报价的对比和预订。
3.强化记忆-比价价值感的再次强化
填单场景是在预订完成后，这个环节我们可以将比价的概念和价值再次展示给用户，以加深用户对比价的认知。这里的设计手段与“提升感知”阶段类似，如图所示为一些方案探索，在用户选择低价平台预订，点击跳转至填单页后，我们会强化用户“预订到最低价”以及“为用户节省xx元”的感知。另外，在用户提交订单时，会存在一定的加载时间，我们也利用了这里的“产品缝隙”，结合加载态继续传递低价、省钱的认知。
四、结语
回顾百度酒店的比价设计过程，我们以比价及低价感知传达、高效预订低价为设计目标，基于百度酒店的核心预订流程，探索比价在各个环节如何发挥作用，进而将设计目标的实现划分为了“提升感知、建立认知、强化记忆”三个阶段，并为业务带来转化提升。
提升感知过程结合流程中的主要模块，通过模块式对比形式、传达比价价值感、基于低价推荐强化比价、以及利用“产品缝隙”等手段，去吸引用户了解和使用比价；建立认知过程利用“聚合比价”模式去精简报价，同时结合对低价报价、低价平台的强化，让用户更便捷的预订低价；最后强化记忆的环节，我们进行了一些方案尝试，再次强调比价的价值。另外，为了建立一致的比价认知，整体的设计中也坚持一致性的原则。百度酒店的比价设计也在不断地尝试和优化中，希望能给用户创造更好的使用体验。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、项目背景
百度文库APP是一个在线文档分享平台，上线已有十余年的时间，是一款名副其实的老字号互联网产品。随着互联网的成熟以及年轻用户的涌入，时代语境和流行文化发生了变化。年轻化设计已经成为互联网产品设计中不可避免的话题。在日常对用户反馈的监测中，我们发现文库APP当时的体验已经不能满足用户多样化的需求。并且在体验走查以及用户访谈中发现，文库APP的视觉风格、交互方式、使用感受都存在老旧、不贴合流行趋势的问题。
二、由内而外，打造年轻化感知
通过对年轻市场进行洞察，我们发现年轻用户对产品的需求是多维度的。不仅对产品的“颜值”有高要求，他们更追求使用时的便捷和流畅度。他们对新鲜事物的接受程度更高，也更愿意去探索产品新的玩法，与产品进行沉浸的情感互动。
所以此次年轻化改版不能只是对“产品的外表”进行升级，要从视觉、体验进行全方位、多维度的年轻化升级。由内而外的打造年轻化感知。
三、“老字号”互联网产品的焕新之路
2.1 视觉升级-更好看
2.2 体验升级-更好用
写在最后
从UI设计诞生初期，设计师在屏幕上模拟现实世界的交互方式，用拟物化的设计风格帮助用户熟悉UI界面操作。到现在用户对移动屏幕越来越熟悉，设计师们可以在产品设计中去尝试更多的可能性。产品与用户共同成长才是年轻化设计的意义。
未来，我们也会保持好奇心和探索欲，不断打磨产品体验，与用户共同成长。
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX视觉/交互/运营设计师，可投简历至MEUX@baidu.com (注明信息获取来源如：站酷）
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
作者：百度MEUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
客户购买我们的产品，服务解决方案的目的就是这几个。要么赚钱，要么省钱，要么提高效率或者节约时间。
因此我们一般需要考虑这几个问题：
客户通过购买公司的产品，服务或解决方案，得到了一些结果，这些结果推动公司整体战略的前进，最终实现了公司的愿景。
客户成功，用一句话来总结。客户通过购买解决方案而获得最大的价值。
客户寻找的不是产品、不是解决方案，而是成功。
以SaaS行业为例：
在经营层面上，目前的SaaS业务有两种不同的经营视角，分别如图1和图2所示。
图1常规的经营过程
图2 SaaS的经营过程
在图1的经营价值链中，客户成功的价值权重不大；交付之后整个生意就定型了，有没有客户成功差别不大。换句话说，在客户成功上加大投入，收益并不会同步提升，这就是为啥软件企业不强调客户成功的原因。
图2的经营价值链中，客户成功的价值权重至少超过50%。因为客户成功承担了除初次收入之外，后续所有订阅收入责任。如果SaaS企业在客户成功业务上不加大投入，就可能承受半截生意的风险。
SaaS生意即使在签约交付之后，这事儿也没算完；在SaaS收入模式下，不能把产品卖给客户后就一走了之。因为交付之后与客户就“失联”了，为了收回剩下客户订阅费，或者想要回更多的增购款，就必须有客户成功业务。
说到为什么国内的客户成功没有那么热了，相反还被嫌弃了；于是有人认为是因为国内客户成功的姿势不对，没有理解老外的客户成功精髓。
国外SaaS公司对客户成功的要求，无非也就三个：培训、使用、增购。其实不是姿势的事，而是国内外客户成功的业务背景不一样；即使姿势一样，结果也会天差地别。
以SaaS行业为例，如果按照图2的经营逻辑，客户成功对应的是留存；而衡量收入的留存指标是NDR，即净收入留存率。NDR的计算公式为：
NDR=(beginningrevenue+upgrades-downgrades-churn)/beginning revenue
从NDR公式可以看出：能把SaaS生意搞砸的是churn，即客户流失。恰好在流失这点上，中外SaaS企业面临问题很不一样。
国外的SaaS客户，订阅付费天经地义。所以churn并不是客户成功的重点，CSM做好基本动作就OK；而如何提升upgrades，才是客户成功的业务重点。因为这不但补偿了churn带来的损失，还能使NDR>100%。所以国外SaaS公司的客户成功团队，是一个不折不扣的盈利组织。
但国内的情况完全相反，SaaS客户“跑单”是大概率事件。所以，国内客户成功的业务重点还真不一样，与老外的姿势不一样，也不是没有道理。
所以，当前国内客户成功业务的首要目的，还不是为了赢利；而是为了止损，即 止住客户流失造成的收入损失。虽然这样做公司盈利水平会降低，但这也只是增长慢的问题，不至于影响公司的生存。
从这个意义上来说，国内的SaaS企业，比国外SaaS企业更需要客户成功。
所以说确保用户续购，增购，转推荐就成了客户成功经理最重要的事情。
增长的秘密就是新老客户双翼齐飞。或者叫双轮驱动。
作为客户成功经理，客户的留存率是最重要的一个衡量指标。
2015~18年领英的会员拥有客户成功经理头衔的人数。是一个快速攀升的一个状态。据领英的一个统计显示，客户成功经理是最有前途的职业之一。
在Google上搜索客户成功经理短语的一个增长趋势。也可以看到这几年是有一个非常迅猛的增长。
将客户成功作为一种实践的公司，会比竞争对手增长得更快。客户成功经理的角色也是数字化转型的中心。
客户成功经理就在这个经常波动的消费差距内工作。
如果要用一句话来总结客户成功经理，就是客户成功管理就是实现价值，真正的价值是让自己和客户都越来越成功。
客户成功经理最主要的内容分为三块。
横轴：客户对交付成果的一个期望
纵轴：是客户体验的一个程度
客户成功等于客户的成果加上客户的体验。
CS（客户成功）=CO（客户成果）+CX（客户体验）
有三个动作可以提高续约率：
这里涉及到三个关键期：
如果你想知道客户的满意度，又想用最简单的办法。那就可以用NPS净推荐值这个指标。
它是一种大多数公司用来衡量总体客户满意度的核心的指标。
NPS=支持者人数百分比 — 贬低者人数百分比。
客户成功经理的任务需要把客户从『活跃使用用户』变成『忠诚客户』，最后变成了高NPS客户。如果用一句话总结就是：
客户成功经理要让客户取得成功并且体验出色。
最后对未来做个展望。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文将分享另一个更为深层全面的B端用户研究方法——用户访谈。通过面对面的沟通，以及观察用户的表情、行为去挖掘更深层的需求。
下面是本次分享的文章结构，标⭐️的为重点部分。
用户访谈通常可以采用线上会议、电话或者线下面对面交流两种形式。
线上会议和电话访谈的优势显而易见，可以不受地域限制展开调研访谈，整体的成本也比较低，设计师可以自己找领导或者协调资源去推动。
缺点也是比较明显，沟通起来效率低下，比如我们一定有过“电话里说不清，我们见面详谈”的经历。
所以，相较而言线下访谈无疑是最佳的调研形式。首先当面沟通更加高效，其次对于搭载硬件设备的产品来说，让受访者在真实场景里操作演示，可以发现更多隐性问题。
在访谈过程中通常会接触到以下3种类型的受访用户，不同类型的用户我们应该怎么接触交流呢？
话痨型的受访者占大多数，通常就是想法、意见比较多。他们不仅有一大堆不满意的点要诉说，甚至连对应的解决方案都想好了。
整体接触下来，我觉得该类型的受访者，可提供的有价值信息会更多一点。只不过我们要学会过滤信息。因为他们的修饰用词通常比较多，例如：“太难用”、“超级麻烦”、“哎 我真的是受不了啊”…
访谈话痨型的受访者，我们需要注意无论怎么聊都要紧扣主题，防止变成了吐槽专场。
其次也要表达肯定，安抚情绪，并对问题进行进一步提问：“您的这些建议真的很棒，也给我们提供新的思路，我都记下来了，我还想确认下，刚才您说的3个关于结算环节的问题，哪一个给您造成的困扰最大？”
顾名思义，受访者可能是因为性格内向或害怕说错了不好意思等缘故，在受访过程中问一句答一句，比较容易冷场。答案的价值也比较低，例如：“对，是的”、“还行吧”、“没啥感觉啊”、“反正就这样用用吧”、“说不上来”。
这种情况下要尝试缓解下氛围压力，换个形式沟通：“就是随便聊聊，公司派我们来呢，就是因为非常关注用户的使用感受，想收集一波用户反馈与建议，您有啥不满意的地方都可以跟我讲讲，越多越好。”
其次我们在提问的时候也要带有引导性，例如：“还有呢、然后呢、具体说说呢”，如果对方实在说不出所以然，最有效的办法就是进入上机操作环节，通常操作过程中那些问题也会随之暴露出来。
专业型的受访者一般是老板或者店长、经理岗位的员工，他们对于产品或整个门店乃至行业都了解得比较透彻。
和这样的受访者沟通，不仅是局限于产品的一些问题挖掘，他们会从这个行业的角度阐述一些个人的见解观点，给我们提供一些有价值的优化方案或者改进方向。
例如餐饮的老板其实并不是很关心点餐、结算的流程有多么的顺畅高效，毕竟他们不需要亲自去做这些执行，而且坦率的说，对于绝大部分产品而言，好用并不能成为其核心竞争力。
他们关心的是如何带来更大的商业价值，类似于如何提升坪效，如何提升门店会员的储值能力等等。而这些老板的关注点，也会给我们未来的产品优化方向打开新的思路，去思考如何给我们的用户创造更高的商业价值。
我们在做访谈之前，首先一定要熟悉产品业务的相关背景、受访商户的基本情况。
访谈过程中可能会提及一些专业名词，例如餐前餐后模式、明档、一鱼多吃、坪效、估清等等。我们具备了这些基础相关知识以后，省去了不必要的解释环节，可以使访谈推进地更顺利。
其次建议要了解下行业相关的基础知识。尤其是餐饮业态，华南、北方、四川等地都因为饮食习惯的不同，在产品的功能和使用上的需求也是相差很大。具备了这些知识点以后，在提问过程中，也更利于提出一些深刻的问题，而不是浮于表面的提问。
行业相关的分析报告，可以去艾瑞、36氪、发现报告等网站进行查询收集，在此不做赘述。
在访谈初期，需要准备一份访谈框架，但并不意味着我们整个过程只能按提纲来提问。尤其是B端这种千载难逢的访谈机会，只按规定的框架提问属实是太吃亏了。所以在时间允许的情况下，除了框架以内的问题，尽可能多发散地去提问。
例如餐饮业态，会有各种不同载体的终端设备联动使用，一体机POS、手持的POS、厨房KDS、厨显大屏、各类打印机等等都可以顺便了解、调研下，让我们对于全链路的协作流程也会有更深刻的认知。
再例如后厨会涉及到KDS大屏显示，可以问问目前的大屏显示是否够清晰（字够大），也可以和负责海鲜称重的工作人员聊聊，海鲜的售卖、计价流程，以及菜品双单位（例如：1【条】鱼，重量1【公斤】）的使用等等。
在沟通过程中，一定会有一些触类旁通的收获与问题被发现。这些问题也许来自一个模块、或者某个特定角色，又或者是主产品关联的其他后台产品。
在提问的时候要考虑到受访者的年纪和理解能力，如果措辞过于专业，可能会导致受访者理解不到位，因此沟通的过程中要尽可能的说大白话。
我们都知道没有经历过的事，很难感同身受。有时候看到客户群里，因为产品的各种原因导致商户情绪激动，我们理智上非常理解，但是情感上很难共鸣。
因此每次的门店调研，我都会抓住机会观察整个门店的运营情况，去感受那种忙碌的氛围。
有时候开始进入营业高峰期，机器出现卡顿或者外卖不接单等情况时，自己的情绪都会一下子紧张起来，也能够深刻感受到产品给客户带来的困扰。
当再次有产品迭代优化时，这些体验总能让自己能更容易代入用户的角度思考问题。
除了去体会产品对情绪的直接影响，还可以关注下整个门店的布局、收银产品的数量与摆放位置、不同产品的协同使用等等。
这些都会帮助我们发现，到底什么是门店运营环节里最重要的模块。
在访谈过程中，不排除受访客户会反馈一些暂时无法解决的问题。这时候一定要告诉受访商户：“您的问题我已经记录下来，回去会针对这个问题反馈上报，最迟X天我会让顾问给您回复的”。
这么做一方面也是细节处维护公司品牌的整体售后体验，其次也有助于我们再次回访时，受访商户乐意花时间跟我们聊。
了解了用户访谈的一些基本信息和注意点以后，到了本文核心部分，关于整个访谈的推进过程，一共分为3个阶段。
1）访谈的3种类型
首先明确访谈的类型，用户访谈的类型主要分为以下三种，最常见的就是第三种类产品使用回访。
①新品场景调研新品调研的访谈，一般是由于业务的发展，可能需要升级或者打磨一款新产品来满足市场的需求。
在访谈的过程中，我们需要关注的点就是用户画像、商户诉求、使用场景、终端载体等一系列因素。
②潜在商户拜访当去往一个城市进行批量客户调研的时候，偶尔会有拜访潜在客户的调研机会。这种类型访问的关注点集中在商户的痛点与需求上。
由于是潜在客户，我们势必是要了解他们想要购买或者替换产品的前因后果。也是借此机会了解到竞对的优劣势，他们放弃竞对的原因，以及我们当前产品的功能是否满足客户的需求，还有哪些点不满足，客户重点关注的是什么。
③产品使用回访
使用回访是最常见的访问类型，主要目的是对商户进行售后维护、提升使用体验。
且由于B端产品的复杂性和远距离特点，以及新功能同步给商户存在的滞后性，公司会安排定期的上门回访。如果有这样的机会，UED一定要尽量申请跟着去门店调研。2）问题设计3步走
到了最关键的一步，就是关于访谈的问题设计。
总结一下，问题的设计渠道来源主要有3种。主要还是根据调研目标进行问题设计，另外两种方式，作为辅助。
那具体问题应该怎么设计，这边我们分为3个步骤，从面到点依次拆解进行问题设计。
第一步：了解产品全场景能力
B端产品的特点可以借用《U一点料》的9个字概括，“多场景、全链路、多角色”，所以设计问题前，我们可以从场景+链路+角色/节点功能的维度来设计问题。
以餐饮行业的产品举例，首先建议了解自家产品的全场景业务能力。
即从商家端到消费端会经历的产品模块和具备的现有功能，做到心中有数即可，毕竟不会一下子调研这么多模块和功能。
第二步：确定要调研的流程主线
其他ToB产品同理，可根据某个操作链路为主线，确定主流程后进行问题设计。其实就可以理解为确定调研的目标。例如下图要调研的主流程，就是提取点餐>下单>结算为主线。
第三步：关键节点问题展开设计
根据刚才确定的主流程，我们找到所有关键节点进行问题框架设计。
以上3个步骤可以理解为，如何在功能极其复杂的B类产品当中，筛选出与访谈目标紧密相连的功能链路。避免我们的访谈提纲做的过于冗余没有核心。
3）2种提前准备工作
①提前告知
这点也非常重要，每一次去门店调研之前，先由当地负责的顾问与受访商户提前沟通。
一方面是需要与对方预约时间，另外一方面这种访谈对商户而言就相当于优质的售后服务，会有受访商户提前列框架，准备问题。
那么这种情况更有利于调研，因为受访者明确自己的问题点在哪里，就等着调研团队（售后团队）来门店后，好好拉扯一番。
②准备材料与设备
万事具备，只欠东风。我们再盘点确认下本次访谈的各类工具是否备齐，准备进入访谈阶段，大致需要准备的东西是以下4种材料工具。
在了解了受访者类型、采访者需要注意的点，以及带着我们设计好的问题，下面正式进入访谈阶段。
1）开场白
到达门店后，我们的顾问会给受访客户做一下来访成员介绍，并讲明此次到店的目的。一般都是产品使用回访，或者新功能推荐培训。
通常来说，受访商户对来访团队总是有很多”心里话“想唠一唠，因此暖场氛围比较容易起来，也有助于我们接下来的沟通。
2）访谈中
进入正题以后，我们会先大致了解下受访者最近使用的体验以及遇到的问题，而后会根据问题框架进行提问。在整个过程中也需要注意观察用户在描述问题时候的表情和肢体语言，搜集用户对于产品的真实态度。
其实整个访谈流程我们归纳一下，需要关注的就是四个关键点，手+口+心+颜。
①手-实操演示
关于实操演示放在第一个讲，是因为这个环节非常重要。线下访谈时强烈不建议“脱机访问”，这种形式对受访者而言需要花更多的时间去思考问题的答案。
会遗忘甚至想不起来当时的具体情况，随便的敷衍回答“嗯，还行”、“挺好的”，或者干脆彼此都不在一个频道上。
其次，在操作过程中，建议用手机进行拍摄记录。因为每个人对产品的理解方式与程度不同，在用户操作的过程中，会发现一些有意思的代偿方案。这些也是思考的切入点。代偿方案是否比原先设定的实现方法更便捷。
回去通过视频仔细分析受访者的操作路径，以及每个操作之前是否有迟疑等等。并且将问题点一一记录下来。
②口-问具体操作
这个就是根据问题框架进行提问。在这个过程中，通常会穿插着上机操作演示，在现场记录的时候可以先记录个大概，等结束后再仔细整理。
③心-问心里感受
问受访者的心理感受，其实就比较偏主观了，我们可以从“我们家的产品”和“人家的产品”两个维度去对比询问心里感受。值得注意的是，即使是这样开放式的提问，也有提问技巧。
比如“你觉得现在还有什么不好用的地方”就比“你感觉现在的产品好用么”这样的提问方式更有效。
因为产品一定是有可有优化的空间，“有什么不好用的地方”这样提问的方式就是具体到了某个点上面，具体什么点不好用。
而后者的提问方式是基于整个产品，受访者可能会出于不好意思等原因直接说“你们的东西还行吧，还可以”。
④颜-关注动作表情
当我们提问产品优缺点的时候，受访者大部分都会带上表情和肢体语言，并且情绪表现和性格有比较大的关系。
性格比较雷厉风行、急躁一点的，通常会像连珠炮一样疯狂输出，并且措辞会比较极端。例如：“真的太难用了”、“太麻烦了”、“严重影响门店营业了啊”。
接受到这种信息我们首先要做的就是安抚对方的情绪，其次对于这些信息要学会剔除一些夸张描述。
而性格温和一点的受访者，在阐述问题的时候也会比较婉转。“不是太方便”、“这个改动没啥感觉”、“也还行、都可以”，如果某个高频操作真的很影响日常工作效率，往往会表现得很无奈，甚至还有点委屈。
那么无论是哪种表现，其实都要考验采访者的经验，结合产品的功能去考虑，找到反馈中真实有效的部分。
通过以上4个环节，其实就可以收集到很多有用的信息，语言信息、视频信息、动作表情信息等等。接下来的任务就是信息的梳理归纳。
3）结束语
访谈结束后，我们需要做个简单的总结回顾。将关键问题再次复述确认，进行查漏补缺并且再次感谢受访者，表达他们今天提的建议价值很大，后续会梳理出可落地的点优化到产品当中。
如果说聊得比较开心，大多数的受访商户都会邀请来访团队吃个饭再走，也算是额外的福利。在就餐过程中的非正式场合交流，也可以聊聊门店的一些运营情况等等，帮助我们更深入的了解这个行业。
1）资料梳理
我们在访谈过程中会有大量未整理的一手记录，结束后需尽快地梳理，尽可能详细地记录下用户描述的细节、肢体动作表情语言等等。建议使用石墨、语雀、腾讯文档等在线编辑工具，方便分享修改。
如果是连续访谈几位商户，我会在访谈结束以后，迅速地将刚才的访谈内容整理出一份原始资料。并罗列出一些受访者反馈但访谈提纲里没有的问题，去下一家受访商户的时候可以验证下该问题的普遍性。
2）整理落地
输出后我们需要再次进行提炼，将有价值可落地的问题点提取出来，进行汇报分享，并找到相对应的产品研发进行探讨排期，这样就形成了一个完整的闭环，真正做到了发现问题、解决问题。
3）流程概括
前文絮絮叨叨说了很多，其实关于用户访谈这事用6个字就可以概括，简单理解：
问谁？问啥？答啥？改啥？
能够回答清楚这4个问题，那么这就是一次有价值的访谈经历。
ToB业务的特点就是会有一定的行业壁垒，设计师在刚接触的时候一定会有很多茫然时刻。对于各种专业词汇的一脸懵，对于行业的不了解。
或者很多人对于B端的认知还停留在，B端好像没啥好设计的，都是现成的组件库拖一拖，成就感比C端差远了。
那么做访谈、体验优化的意义是什么呢？
作者：B端设计情报局
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文介绍了一个案例研究，是作者在一家拥有 60 多年历史的产品导向型公司中实施服务设计的旅程，本文将着重介绍如何在大型国际数字支付技术组织 IDPTO（化名）中建立服务设计创新中心。这份经验希望传递到每一个正在用服务设计影响公司内外部的朋友们。
在拥有 25 年的设计实践经验后，我收到了一份具有挑战性的邀请，成为一家全球性公司的执行董事，并通过设计领导其转型。选择巴西是因为它负责拉丁美洲 75% 的支付交易。该公司已经针对该市场实施了加速增长计划，因为他们认为这是正确的创新计划的测试市场。在六个月的时间里，我从自己的服务设计咨询公司转行到 IDTPO。
在那段时间里，我有机会参观了该公司位于美国的公司总部。这种面对面的互动对我来说至关重要：
2016 年 3 月，在圣保罗，我开始了为期三个月的组织问题诊断，以及另外三个月的定义问题阶段。然后，我正式开始确定公司的痛点、局限性和全球领导层的战略目标。我参与了公司接下来一年、三年和五年周期的整个战略定义。
自过渡过程开始以来，我一直致力于竞争对手研究并绘制生态系统地图。我还收集了有关公司直接面向消费者市场和几项趋势研究的可靠材料。在第二个月，我向领导层提交了一份战略计划，其中包括我们将如何工作的大纲，该计划基于三个层面的行动：战略、战术和行动。
组织诊断的结论是，该公司已经在对设计原则的基本理解和应用的基础上致力于以技术为中心的创新。
根据设计阶梯 1，我确定该公司处于“界面设计”阶段。如下所示，除了更改其图形表示之外，我还修改了该工具并添加了另一个“设计作为文化”步骤。这是对上述模式的重要升级，更符合当前的创新战略。
这一步（第4阶梯）很重要，因为这是在组织中实施设计策略时的最终部分，即通过设计优化组织使其成为组织文化的步骤。
在我看来，“设计作为文化”分为三个层次：
我提出的战略计划包括两个三年一次的周期性循环策略和相关的年度目标。第一个周期侧重于通过开发独特的创新流程来整合组织内的设计。
第二个周期侧重于发展组织的能力，以从“设计作为过程”过渡到“设计作为战略”。在最初执行的六年后，我们将能够衡量组织中以设计为主导的变革的进展和收益。
评估指标后，我们将能够继续下一步（即“设计作为文化”）。
第一个周期从为组织的创新中心定义五项创新原则开始。这些原则已经与组织的领导团队共同制定。
这不仅改变了交付方法，还引发了大胆的组织转型，因为它改变了组织过去工作的范式。
甚至在创新中心正式启动之前，我们就尝试了两种开发形式来解决问题。第一个是用经典五天设计冲刺模型帮助一家重要地区性银行。第二个是为电子商务平台开发聊天机器人。最后一个解决方案经历了一个更长的七周时间，使我们能够测试初创公司的融入，以帮助我们采用开放式创新方法。
在这个周期的第一年，三点很重要：
这就是为什么我选择服务设计作为创新过程的基础，同时参考了 Richard Buchanan 教授的工作。如图 3所示，过去 20 年是从基于人工制品的物质性的实践到为解决复杂问题而开发的“非物质解决方案”的设计思维转变的时刻。
我们的经济现在建立在象征价值的交换之上。经验决定了每个人在这种交换中投入的价值。在过去的二十年里，我们看到了一系列新公司的出现，例如 Uber 或 Airbnb，它们诞生于数字环境中，专注于我们所说的体验经济 。
因此，服务设计和交互设计等主题近年来受到关注，因为它们是这种新经济发展的基础。仅六个月后，我们就协助五家金融科技公司将 IDPTO 技术应用于他们的流程。之后，其中三家金融科技公司能够开发出现成的市场解决方案。在第 1 年末，我们向整个组织展示了流程（图 4）。
该活动在公司的美国总部举行并引起了很多关注，因为在一年内我们有项目要展示、成功指标和接下来两年的路线图。
创新过程不一定是线性的。该过程以简报会（与不同利益相关者的协作研讨会）开始，以最终确定和实施的解决方案结束。
到第 3 年末，我们超越了指标，赢得了奖项，并开始为公司的第二个创新周期做好准备——在战略层面采用设计。创新中心战略的一部分是将其工作方法扩展到整个拉丁美洲地区。2018年，我们对区域团队进行了培训，并准备了文件，包括经验、教材、方法和工具。其他一些地区也采用了部分方式，例如美国和亚洲的加速计划以及欧洲和亚洲的服务设计。尽管如此，还是存在挑战：创新中心位于组织的产品领域内。
在第一个周期的最后一年，由于全球项目和奖项，我在内部和外部获得了很多知名度之后，我与全球首席产品官讨论了：
次年，他决定将该领域的名称从“产品”改为“解决方案”。
在业务加速数字化的背景下，成功的战略规划为城市交通、公共交通、即时支付、新支付技术和新信息交易技术等领域的项目设定了总体目标。
我们有几个项目要管理，我们需要使用对公司文化产生重大影响的项目管理方法。实施了新的高管培训课程。加大投资力度，竣工项目稳步增长。
设计现在是公司战略的一部分。设计已成为开发新服务和新技术的战略决策的主要因素。
以下是我领导下的两个创新周期后的一些数字：
这篇文章无疑是给了我们在自己的组织中运用服务设计的一针强心剂，让我们有更多的自信去运用服务设计和影响组织，我们要相信服务设计方法论带来的作用，相信其本身有强大的能力。
记得之前做项目的时候，小伙伴有说过一句：之所以可以反复成功，其实是方法论本身的能力，而我们更多的是在运用罢了。希望大家以此共勉。
作者：陈昱志Yeutz
来源：人人都是产品经理
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
很多情况下，用户选择一个产品的理由是有没有某个功能，但弃用的理由却常是产品好不好用。能否打造优质的B端用户体验，成了影响B端产品用户续约的一个关键因素。
(1）流程越短越好。 我们在上班、逛街的时候，倾向选择一条最短的路线，希望用最少的时间到达目的地。用户操作系统时也希望这样。
(2）整合功能场景。 某个功能由谁、在什么场景下操作，以及可能会遇到什么问题、需要什么关联功能来解决，如果功能点相互独立， 关联很少，会让用户用起来很不顺手，有种断层的感觉。
（3）有效指导异常。Saas 有一个特点是功能模块间会尽可能相互独立，基础数据的设置和业务上面的使用往往是在不同的功能模块内。这会导致B端用户在遇到空数据的情况下， 可能不知道该怎么操作。这时，需要要提示用户按具体步骤操作来顺利完成任务。
交互体验，对上承接了业务，对下承接了视觉。好的交互体验能让业务流程简捷，更关注用户习惯。 B端产品的交互和C端产品差异较大，C端常用的移动客户端屏幕小，可显示的内容较少，需要不停地跳转完成操作，但B端产品大多用电脑来操作，一页可显示的内容较多。所以做B端产品交互一般需要注意下面几点：
(1）少跳转。曾有用户反馈，说某个功能操作流程太长了，操作起来很麻烦。通过走查发现流程其实是没有问题的，不能再缩减流程了。通过可用性测试发现是因为跳转页面导致，用户在操作时去了另一个界面，然后再返回来，让用户在操作时感觉流程更长。于是就把页面跳转优化成了弹窗，弹窗里面操作完点击关闭即可， 改后用户觉得流程缩短了，操作效率更高了。
B 端产品能用弹窗的时候，不要跳转，哪怕弹窗里面加弹窗，只要不跳出这个页面，用户都会觉得没有阻断他的操作。虽然，从交互的角度讲，弹窗里再加弹窗不符合规范，但在实用性面前是可以商榷的。
(2）少弹窗。 相比弹窗，在某些场景下，有更好的处理方式。比如，直接放页面上。 弹窗是点击按钮触发的，自动完成操作后关闭，或者用户手动关闭。虽然比跳转好，但比不上在页面上直接呈现高效。
页面上直接呈现是理想状态。但是往往因为内容太多，很多时候不得不隐藏起来。直接呈现对于页面的布局和设计都有极高的要求，原则是高频且重点的内容外露。
（3）交互形式统一。 整个系统里面的交互规则要保持一致，大到弹窗的出现形式是居中弹出还是右侧滑出，小到多选控件是不是一致。 在整个系统里面相同的业务都用同一个控件。虽然可能由于一些业务的特殊性， 需要对控件做个性化处理，但不要影响整体的一致性。
(1）信息清晰。 信息清晰不仅指信息结构的层次，还包括页面的内容，最好让用户一眼就能看到上面写了什么，有什么功能。有些设计师不喜欢加黑、大、粗的字， 觉得不够高级，而是根据自己的美感把字体设计为一些个性化字体，且字号不大。
很多时候B端用户的操作时间比C端用户长，他们需要长时间盯着页面，所以页面信息清晰就能减少他们的疲劳。
(2）信息紧凑。 当页面上想要呈现的内容较多时，设计师一定要压缩空间，使布局合理紧凑。
(3）少用图标。 有时候，设计师会使用图标来代替文字表达，并花大精力设计很好看的图标。图标的应用在C端产品中非常常见，一是为了节省空间，二是为了美观。但在B端产品中，大多数情况下，图标越少越好，有时文字的简写比图标来得直观易懂。图标过多用户需要使用很多遍才能记住每个按钮的含义。
B端产品设计需要非常重视用户体验。这直接影响到用户的工作效率，转而影响到软件的续约率。 为打造好的用户体验，我们通常从业务层面、交互层面、视觉层面来着手提升用户体验。 很多时候，有些好的交互方案会受到技术框架的限制，导致方案无法实施。
但是为了产品获得更好的用户体验，首要考虑的依然是用户的使用流畅度、易用性，而不是实现的复杂程度、系统现有框架的限制、现有规范的标准。 系统上的难点应当留给内部去解决，把最大的便利性留给用户。这样我们才能获得更好的产品口碑、更高的续约率、更大的市场。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前端工程化指的是：在企业级的前端项目开发中，把前端开发所谓的工具，技术，流程，经验等进行规范化，标准化。
企业中的Vue项目和React项目，都是基于工程画的方式进行开发。
好处：前端开发自成体系，有一套标准的开发方案和流量。
概念： webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性性能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。
步骤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> ul>li{这是第$个li}*9 </body> </html>
import和require导入模块的区别
1、require对应导出的方法是module.exports,
import对应的方法是export default/export
2、require 是CommonJs的语法
import 是 ES6 的语法标准。
3、require是运行运行时加载模块里的所有方法（动态加载），
import 是编译的时候调用（静态加载），不管在哪里引用都会提升到代码顶部。
4、require 是CommonJs的语法，引入的是的是整个模块里面的对象，
import 可以按需引入模块里面的对象
5、require 导出是值的拷贝,
import 导出的是值的引用
6. require是node.js带有的 CommonJS语法里的东西，可以在终端中运行
如果要在浏览器端运行 我们要使用import这个es6语法
js代码
//导入模块 // const $ = require('jquery') import $ from "jquery"; //定义jquery入口函数 $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })
将js文件导入index.html之后，发现没有效果，这时我们就需要webpack工具了，将语法进行重新编译，把es6语法转化为es5语法。
npm i webpack@5.42.1 webpack-cli -D
生产依赖
创建webpack.config.js配置文件并写入
//使用node.js的导出语法向外导出一个webpack的配置对象 //导入模块并进行导出内容，这样写会比直接导出内容多一个记录信息的txt文件，当然我们也可以使用es6语法进行导入导出，大家可以私下去了解。 const { Module } = require("webpack"); Module.export = { mode: 'development' } //也可以直接导出内容 // module.export = { // mode: 'development' // }
在package.json配置文件中的script中写入声明
最后执行npm命令进行编译，有一个注意点就是node.js版本需要是17版本以下的不然会出错，当然应该有其他解决办法，但博主不会，只好退回版本
执行 npm run dev 这个命令，可以看到src里的index.js和jquery.js都被压缩了。
会生成一个编译后的文件夹
将main.js文件导入index.html.，不用导入index.js。
打开页面就可以成功显示了
mode的可选值
mode节点的可选值有两个，分别是：
当我们使用npm run dev这个命令的时候，会执行package里的dev里的内容，
dev里写的webpack，那么它就会执行weboack.config.js这个文件里的内容，根据里面的内容再进行打包。
webpack中的默认约定
大家可能有个疑问，就是打包的时候为什么会打包index.js这个文件，它是怎么寻找的路径等问题。
在webpack4和5的版本中，有如下的默认约定，找不到就会报错。
注意：可以在webpack.config.js中修改打包的默认约定。
自定义打包的入口和出口
在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口文件夹和出口文件。
// 使用node.js的导出语法向外导出一个webpack的配置对象 const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), //设置打包输出路径，以及输入文件名称 output: { //指定存放目录 path: path.join(__dirname, 'dist1'), filename: 'new.js' } }
生成的文件就变了。
当我们修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，这就很麻烦我们可以 通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便，常用的webpack插件有如下两个：
安装webpack-dev-server
安装命令
npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server
注意：webpack-dev-server会启动一个实时打包的http服务器。
这样当我们每次修改index.js文件时，保存后就会自动打包，摁两次ctrl+c就可以终止运行。
这种打包实际上时虚拟打包，并不是每次保存打包之后将main.js进行了修改，当我们修改代码保存自动打包之后，我们发现页面UI并没有变化，那是因为main.js实际上没有修改，访问自动打包修改后的页面需要访问本地8080端口
在这个http服务器内才能访问到修改后的内容，我们前面说了修改后的js并没有保存到main.js中，那它保存到哪里去了？它其实被保存到了根目录中，以内存的形式进行了保存。
文件名跟你前面设置的打包文件名一样，虽然看不到这个文件但是可以进行访问，我们需要把页面引入链接从 new.js改成新生成的保存到内存中的new.js，完成这两个步骤就可以真正的实现自动打包并实时演示了。
当我们开启了自动打包服务功能，访问服务器后，显示的是根目录，需要点击一下文件夹，才能显示页面文件index.html，我们只需要把页面文件copy一份儿到根目录，这样点开网页就能直接显示，这个webpack插件就可以实现相应的功能。
安装
npm install html-webpack-plugin@5.3.2 -D
使用代码
//导入相应模块 const HtmlPluginConfig = require('html-webpack-plugin') //实例化 const HtmlPlugin = new HtmlPluginConfig(); //实例化 const HtmlPlugin = new HtmlPluginConfig({ //被复制文件的路径 template: './src/index.html', //复制到哪 filename: './index.html' });
最后再向外暴露对象
//插件的数组，将来webpack在运行时，会加载并调用这些插件 plugins: [HtmlPlugin] //将实例化对象写入。
执行 npm run dev命令，进行自动打包，然后进入本地8080端口网页，就可以直接看到页面了。
当你修改js之后也会实时更新。
注意点以及个人建议和理解
我们可以在scripts里设置两个属性，dev是用来开发实时浏览观看内容的，dev2是用来进行物理打包的（当你完成项目需要打包的时候）。
这里我需要说一下html-webpack-plugin这个插件，上面我们可以直接看到页面是因为这个插件复制了一份儿index.html到根目录所以可以直接访问。
这个插件里面 有个属性叫filename，就是你将文件复制到什么位置。
两个注意点
第一个就是它的值，属性值写的相对路径是根据你打包文件的位置为基准的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一个文件夹里，…/就在new.js的上级文件夹里，所以当你打包的时候会发现除了new.js之外还有index.html
第二个就是输出方式，如果执行的是dev2，那么就跟new.js进行物理复制，如果执行的是dev那么就跟new.js一样，以内村存储的方式进行保存。
生成的html文件里会自动导入同时打包的js文件
在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置。
其中有一些属性设置可以更方便我们进行开发。
devServer: { open: true, //打包完成后默认打开浏览器 port: 8080,//修改端口号 host: '127.0.0.1' //修改主机地址 }
转自 csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在B端产品设计中，理解并设计好流程，对产品的体验非常重要。通常涉及到有三个方面的流程：业务流程、审批流程、操作流程。
在企业的日常经营中，为了对业务过程进行更好的管理，企业会梳理出一系列流程、规范以及作业标准。流程化能够帮助企业各岗位的员工更好地分工合作，使企业效率更高。对于 B端产品，设计师首先要读懂业务流程，然后才能设计好产品。 业务流程，是指为达到特定的业务目标而由不同的人分工合作完成的一系列活动。活动之间不仅有严格的先后顺序限定，而且活动的内容、方式、责任等也都必须有明确的安排和界定，以使不同活动在不同岗位角色之间进行流转交接。
下图是某企业的采购流程，涉及了五个部门、多个岗位角色、多个业务活动。
业务流程大多是企业根据业务特征、自身经营特点以及资源配置情况而制定的，在业务上具有一定的通用性，但在具体应用上又充满了企业的个性。业务流程和单据是经典搭档，可以说“流程 + 单据=业务”， 每个环节的工作形成一张单据，记录着时间、地点、参与人、业务状况。当这个环站的工作完成后，进入到下一个环节的工作时，单据也会随之流转到下一个系统中对应的功能节点，并形成一张新的单据，记录新的信息。
下图是某企业采购流程中从采购到结算部分涉及的单据：
除读懂业务流程外，我们还需要应用“场景驱动的设计”方法，整理出每个环节中涉及的用户、场景，以及作业的特征，并大胆地通过设计来改造流程，最后通过设计减少人员工作量，减少流程中的多余环带， 提升企业效率。这样才能设计出对客户有价值、用户体验好的产品。企业的收货流程，要经过到货签收、质检、 收货入库等过程，每个环节都会有诸多问题。下面是梳理了某企业收货流程的简易体验地图：
经过对场景和可行性分析后，设计了一套新的业务流程。流程简化为货车司机直接将货物送入指定仓库的电子围栏，并全自动质检、入库，大幅降低了人工成本并提升了工作效率。这一步通常是产品经理去完成，作为用户体验设计师在调研的过程中发现有好的流程优化方法，或者看到好的竞品值得参考，可以和产品经理沟通一起推动产品业务流程用户体验的提升。
在企业中，出于对重点业务的管理需求，除了会制定固定的业务流程方便大家协作，还会对业务关键节点做审批。简单的审批只需要在流程进行到关键节点时，将重要结果发给相应业务管理者审批。但是，由于一些企业组织机构复杂，管理严格，为了保证业务的合规与安全，需要多个角色、多个环节的审批，这个流程即是审批流程。
（1）首先员工提交需要审批的材料（系统中是提交单据)。
(2）各环节审批者会根据流程分别对材料进行审批。
(3）审批通过后会自动进行到下一步。
(4）审批不通过，就此流程结束。
(5）退回则打回到流程起点，待改进后重新走流程。
(6）审批都通过后，审批流程结束。
在实际应用中，可能会有非常复杂的流程与功能。比如除常规的审批通过、不通过、退回功能外，还会有改派、加签、抄送等。
(1）改派：当前审批人将审批材料转给其他人。
(2）加签：增加审批的步骤，在一些企业中还会有前加签、后加签。
(3）抄送：将材料同时抄送给某人或某角色。
以上只是列举一些常用的动作，在一些大型企业或者国企，流程和功能更复杂。当面对复杂而多变的审批需求时，需要将审批流程设计得更加灵活、自由，具有自定义功能。另外，需要将审批流程设计得更加模块化，可以在任何一个业务环节中加入审批过程。
在审批流程的设计中， 根据企业制定的审批规则，自动判断是否符合标准，自动审批。尤其对一些每天都在发生、经常重复而不重要的事情，可以完全省去人工审批的过程，采用自动审批，自动触发业务流程，以此来提高审批效率。
前面两个流程主要基于企业业务制定，在企业没有信息化前就已经存在了，在改造优化上还有一些阻力和困难。作为用户体验设计师，可以通过对操作流程的优化来改进用户体验。
以上文中的收货案例为例子：
（1）系统中收到若干个质检任务。
(2）逐一打印质检单。
（3）带着质检单来到仓库，寻找需要质检的货品。
(4）找到货品，逐箱打开进行检查，业务操作不熟练的还需要询问老员工。
(5） 将质检结果随时记在打印出的质检单上。
(6） 逐一检查完毕，回到办公室，将信息录入系统。
这个过程繁琐，而且在操作的过程中，容易出错。因此根据实际工作中的业务场景，对操作流程进行了优化如下：
整个操作流程省去了“打印单据”“重复记录单据”“询问老员工” 的过程，并简化了“寻找单据”的过程及记录结果的过程。
在对操作流程的设计过程中，也应遵循“场景驱动设计”的方法，并将物理实体、数字实体统一考虑，充分利用各自的特点，尽最简化用户的 操作流程，并降低操作的复杂度。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com