题图来自Saurageresearch
企业对客户旅程总体的认知与应用比例为25%，属于初期水平。2C类企业、大型企业、金融行业对客户旅程的认知和应用水平明显高于其他类型的企业。大多数企业在最近两年才开始尝试客户旅程方法，主要由研究、设计、客服部门在主导客户旅程的应用，客户旅程地图的绘制频率大部分是每年或半年绘制一次。
企业目前主要将客户旅程应用于客户需求分析、产品和服务的设计、以及客户旅程测量与分析等领域，并在提升客户满意度、促进以客户为中的企业文化，以及提升营销和运营的转化率方面效果最明显。大部分企业对认为客户旅程有积极的效果，极少给出负面评价。客户旅程方法使用时间越长，客户旅程地图绘制频次越高的企业获得效果越明显，并且2B企业比2C企业获得效果更明显。
虽然目前由市场部门（包括营销、销售和品牌部门）主导的比例较少，但由市场部门主导客户旅程应用获得效果明显好于其他部门主导的情况，由客服部门主导的效果低于其他部门。这与MyCustomer在2018年在欧美的研究结论相反，这可能说明市场部门在客户体验领域的主导权在逐步上升。
对于未来一年的使用客户旅程的意愿，虽然各类企业对客户旅程方法的效果表示肯定，并且明确表示不会使用的比例很少，但相当比例的企业存在较大不确定性。存在的主要困难和挑战包括专业知识、方法和技能的欠缺，以及专业工具和平台的不足。未来客户旅程方法要在整体应用水平上取得突破，这些方面是需要重点聚焦的领域。
02：
不同类型的企业，在客户旅程的认知和应用程度上也表现出较大差异：2C企业的应用程度明显高于2B类型的企业，总体认知和应用比例分别为30%和20%。大型企业也明显高出中小型企业，分别为29%、22%和19%。客户旅程是一个相对比较复杂的系统性方法，真正的应用需要人员、资金等各项资源的投入，大型企业更具备优势。相比而言，小型企业的在。分行业来看，认知和应用程度最高是银行/金融/保险行业（30%），一方面是由于这个行业的本身的客户决策流程长、金额大、风险大，另外一方面也是由于这个行业的利润较高，企业有相对较为充足的资源进行投入。
由客户研究部门和团队主导客户旅程的绘制时目前的最常见的模式，其次是设计部门，以及客服、品质部门主导。但产品、战略、营销、销售部门主导的情况也一定的比例，这也说明目前开展客户旅程应用的企业，其目的存在多样性。不同部门来主导，其方法和应用上也会存在差异。
在绘制客户旅程的过程中，目前主要用的是客户调查数据和客户访谈数据，这也是客户研究团队最擅长和最容易采集的数据。其次最常用的数据来源是客户行为和客户反馈/投诉数据，总体上对外部数据应用多于内部数据，对小数据多于大数据。
在客户旅程地图绘制工具方面，使用最多的是PowerPoint，处于绝对领先的地位；其次是常用的绘图和设计工具，例如Visio、Photoshop、Adobe Illustrator等；专用的客户旅程地图绘制工作使用比例非常低，最主要的客户旅程地图专用绘制工具UXpressia的使用比例也只有10%，其他的则更低，使用比例只有2%-4%。主要是目前客户旅程地图绘制并不是一项常见工作，所以通用型的文编编辑和绘图工具会是常用选择，而目前的客户旅程地图绘制工具多为英文版本，国内还没有出现较好的客户旅程地图绘制工具，这也是客户旅程地图专用工具使用比例较低的重要原因。
不同情况下，客户旅程的应用效果也不尽相同。调查数据显示，使用客户旅程方法时间越长，绘制客户旅程地图频率越高，客户旅程方法取得的效果越好。使用2年以上的企业和2年以下的企业表示有效的比例（包括“比较有效”和“非常有效”，下同）分别为83%和69%；每年绘制多次客户旅程地图的企业和多年绘制一次地图的企业的表示有效的比例分别为81%和62%。
在将客户旅程方法进行具体应用时，最常见是用于客户需求分析、产品和服务设计、客户旅程分析和测量。其次是在企业文化建设、工作管理和沟通方面的应用。在具体操作层面，例如客户旅程编排、营销和互动，目前也有一定比例的具体应用。随着客户旅程方法应用的进一步深入，直接到操作层面的应用将逐步提升。
客户旅程在不同领域的应用对最终的效果有明显的影响：表示客户旅程应用效果一般的企业在各个具体应用领域的应用比例均低于获得明显效果的企业。效果一般的企业在客户需求研究和分析、客户旅程编排、市场营销和推广，以及品牌传播与互动方面的应用差距最大（落后超过10%的比例）。从调查数据来看，虽然用于编排、营销和品牌的总体比例不高，但确实影响最终应用效果的显著因素。
通过以上在不同领域的应用，客户旅程方法在各个方面的效果都有所体现，尤其是在提升客户满意度、强化以客户为中心的企业文化、提升营销和运营的转化率方面最为明显，分别由59%、54%和37%的企业表示在这三个方面得到了提升。
不同类型的企业未来使用客户旅程方法的可能性也存在明显差异。使用客户旅程越久、使用频率越高，获得的效果越好的企业，继续使用客户旅程方法的倾向越高。2C企业比2B企业未来更愿意使用客户旅程，虽然2B企业获得效果更明显，但2B企业使用客户旅程的难度和成本更多到，导致2B企业的使用意愿要明显低于2C企业。另外，相对于中型和小型企业，大型企业的使用意愿明显更高，表示可能会使用的比例达到了61%，明显高出中小型企业。
对于在客户旅程应用过程中的挑战，最大的困难不是预算不足，而是知识、方法、技能、工具和人员的欠缺和不足，尤其是专业知识和方法的掌握不够，是最大的两项困难。其次碰到的问题是企业高层，以及其他部门的支持不够。
文章来源：UXOOLS
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编者按：这篇文章来自资深设计师 Taras Bakusevych ，他对于产品和体验有着非常深入的理解，这篇文章深入梳理了如何制作用户历程图才是合理和便捷的，是一篇相当给力的用户历程图终极设计指南：
用户历程图（Journey Mapping）可能看起来是一个复杂的东西，尤其是当你尝试在小组讨论的时候把这个东西说清楚，会发现相当不容易。这篇文章将会为你阐明这一强大工具的使用方法，并且提供一个简单的模板，并且帮你创建拥有足够洞察力的用户历程图，让你像真正专业的 UX 设计师一样，创建便利、深入、有效的用户历程图。
在数字产品当中，用户历程图可能是用来呈现用户如何达成目标的最佳、最常用的工具了。当我们故事以可视化的方式呈现出来，就可以沉浸在用户的体验当中。这也是为什么说用户历程的价值是巨大的。
理解用户历程图，会迫使我们以更加结构化的方式来思考整个用户体验，去梳理和定义事件的顺序、关键阶段以及事件之间的过渡。
同时，用户历程图还能建立起用户和设计师之间的同理心，当你随着用户历程图推进的时候，能够更加深入理解用户的痛苦和无奈，从而帮设计师理解用户的动机。
用户历程图还能帮你真正定义痛点，这是至关重要的。每种产品都应该在某种程度上帮助用户，让用户生活更加轻松，如果你对痛点有所了解，自然就可以改善体验。
根据实际的使用场景，用户历程图会有很多不同的呈现形式，里面通常会包括一些图形化的元素将整个历程或者流程呈现出来，而余下的元素则采用解释性的文本来作为支撑。
绝大多数的模板会显得过度装饰，且过于复杂，在很多时候，它们会作为项目中的展示性成果展现在PPT当中，而不是作为一种有效的工具，来帮助团队来洞察需求。
如果你上网搜索用户历程图，你会发现一大堆各式各样的图，这些图和实际的理解是脱节的。
用户现状历程图反映的是用户当前的状态，这反映的是用户历程在优化之前、当下的状态。而用户未来历程图则反映的是用户历程在优化过之后，未来理想的状态是什么样的。
这两者在结构和目标上是不一样的，主要差别在于用户角色的定义上。有的时候，你的用户确实是消费者，而在很多情况下，用户又不一定是消费者，这就是差别所在。
用户历程图侧重于呈现客户的前端体验，而服务蓝图则重在呈现后端的构成，以及交付方式背后的业务逻辑以及同产品核心之间的关系。
你可以在 Megan Erin Miller 和 Erik Flowers 的这篇文章当中找到更多的信息。
从来就不存在什么完美的用户历程图，不过你可以基于某个版本的用户历程图来着手。而这里准备的这套模板是经过长期测试和实验之后总结出来的一款，它非常容易上手，复杂度也控制得恰到好处，并且它包含你所关注的绝大多数的指标，甚至更多。下面，我将教你如何逐步完成这个用户历程图。
你可以在这里下载 PDF 文档
在研讨会或者工作坊模式下，开始用户历程的研究和搭建，是一个不错的练习方式。在这种情况下，即使的团队有较多的人，也最好按照小组来进行（每个小组3-5人）。根据用户历程的复杂度和涉及的内容的不同，通常你应该可以在 1.5 小时候完成整个用户历程图的搭建。至于你能用到的文具，仅仅 需要多种不同颜色的便签纸，笔和红点贴纸即可。在开始之前，你需要和各个小组先声明和解释整个过程，并且确保所有人对于这个过程的流程、原理和方法的认知保持一致。
在这里，我们需要定义地图的内容，用户的整个行为历程，以及他们试图要达成的目标，都有哪些。这很关键，不仅要确保所有的参与者都很清楚用户场景，而且要借此构建出对于后续设计有帮助的内容输出。
演员——这个历程与谁有关？整个历程图应该只和一个角色有关，也就是要经历整个历程的用户角色。
场景和目标——描述参与的用户的行动的情况和状态，从而增加上下文环境的清晰度。描述用户的目标，期望以及动机都有什么。
当前/未来状态——阐明用户历程所在的阶段。
Ps：即使此刻你要做的是某个未来的产品，也最好不要跳过当前状态，洞察当前的用户和产品状态、痛点、习惯，有助于你去验证想法。
接下来，你需要定义整个用户历程的大的阶段。先把各个阶段定义好能够最大程度节省你的时间和精力。最简单的方法，是先定义第一个和最后一个阶段，然后再来填补中间的各个阶段，不要创建太多的阶段，而是将整个用户历程切分成为有意义的部分。
按照用户操作流程，来逐个执行梳理各个阶段用户的行为、状态。千万不要试图梳理得过于详尽和细致，尽量专注于关键因素，确定用户需要哪些要素，才能推进到下一个阶段。
在这个阶段，要开始描述和用户执行操作紧密关联的的想法，涉及到的问题，还有感受。在很多其他的用户历程图模板当中，这个部分通常是和整个用户历程图是分开的，但是实际上，只有合并到一起才是合理的。
在这个部分，我不建议将时间花费在用户情感曲线的绘制上，这样做的实际目标更多是为了更加具有视觉吸引力，并不具备实际的价值。
在这个步骤当中，我们会高亮标注出用户在各个阶段会接触到的物理和数字交互点，以及涉及到的工具、人和服务。我相信各个阶段所覆盖的这些触点，能够帮助我们更好地梳理和构建出整个心智模型，并且能够帮助产品和服务，让它们能够更加切合用户的需求，更好地集成到一起。
如果你已经和你的团队创建了类似移情图、价值主张画布，那么你无需在这个事情上重新创建相同的内容，因为用户历程图和以上内容中有大量重复的部分，你只需要迁移过来即可。随后，你可以将进度合并到当前的用户历程图当中。
这个步骤，需要将各个不同阶段的内容填写进来。
给每个参与者一些红点贴纸，方便他们在整个用户历程图上，对他们认为是痛点的部分进行标记并投票。痛点可能和情绪有关（比如害怕提供个人详细信息），也可能与行为有关（比如手动输入快递地址等）。这就是为什么最好不要为痛点创建单独的行列，因为可能涉及到的点非常多也非常分散。如果需要对痛点进行深入的描述，使用红色便签纸来进行详细阐述。
到了最后的阶段。在确定痛点之后，我们就可以开始思考如何缓解或者消除痛点。通常，我们需要通过改进整体策略，完善功能，集成服务，来解决痛点，当然，更多的时候，可能还需要我们拥抱一些更加狂放的构思，通过创新来搞定痛点。
在小而无关紧要的细节上进行争论，很容易迷失方向。我经常会看到某些小组会停留在第一阶段，陷入争论，无法推进。从来都没有任何一个用户历程图是完美的，因为用户总会有不同的习惯，并且需要产品设计师从不同的角度来解决问题。
因此，这需要你和你的团队专注于 80%最关键的用例，而不是在所有可能的事情上做复杂的取舍，并且踟蹰不前。
文章来源：优设 作者：Taras Bakusevych
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。
1. 背景色
iOS 平台在深色模式下的背景色展示是动态的，分为基础、升起（例如，弹出框或半浮层）。如下图中 iOS 系统的两个界面，相同样式的组件在基础层与升起层显示的是不同的两组颜色。
从 iOS14 的色彩规范中可以发现随着界面高度的升起，系统定义的三级背景色也同步进行了一级上升。
iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果，但相对的开发成本也较高。
再来看看 Android 平台深色模式下不同层级间背景色的显示规律。
Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级，通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级，Android 的背景色分级逻辑则更加的简单易用。
2. 文字色
iOS 的规范中定义了 4 个等级的文字色，一级文字色为黑白纯色，二到四级文字色为色相偏蓝的半透明色，通过降低同一颜色的不透明度数值来进行分级。
Android 的文字色分为 3 个等级，与 iOS 的共同点是都用了半透明颜色，也都采用了降低不透明度的方式来进行分级。不同点是 Android 文字色使用的黑色与白色，没有添加色相。
使用带有透明度的字色能够避免相同字色与背景色相融的问题。以 Android 为例，三级文字色与 10 种背景色叠加后都具有较高的识别度。
iOS 则通过一套半透明字色可以适应基础与升起两种不同背景色的使用场景。
3. WCAG
iOS 人机界面准则和 Material design 在深色模式的建议中，都提到了文字信息需满足 WCAG 无障碍阅读的 AA 标准。
WCAG 全称为 Web 内容无障碍指南，其中包含分为可感知性、可操作性、可理解性、可兼容性四项原则的相关建议，这些建议可使网站内容更容易访问。WCAG 从高到低分别是 AAA、AA、A 三个等级。其中 AA 要求文字与背景对比度不小于 4.5:1。
感兴趣的朋友可以通过下面链接进行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通过下面的色彩对比计算器进行对比度检验（下图为翻译后展示）https://www.msfw.com/Services/ContrastRatioCalculator
这里我拿 iOS 在深色模式下的主次两级字色与基础、升起背景色做了一下对比度检验，得到的结果均满足 WCAG 无障碍阅读的 AA 标准。这里再给大家推荐一个可以同时对多个颜色进行对比度检验的网站 https://hexnaw.com
4. 彩色
iOS 人机界面准则的彩色方案中给出了 9 种颜色。如下图所示的深浅配色方案以 RGB 与 HSB 两种属性进行对比。
https://baike.baidu.com/item/HSB
图中左侧以 RGB 属性展示的各项参数差值较大，没有明显的规律性；右侧以 HSB 属性展示的各项参数差值较小，其中靛青与紫色 HS 数值相同，仅有 B 的数值有所差异，但整体来看依然没有一个完整的规律。
相较 iOS 系统彩色方案的单独订制，Android 系统的配色方案则是一整套渐变梯度由“50-900”的色彩库。
在 Android 的色彩工具中还可以自定义配色方案，在色板中选取一个主题色，对应梯度值为 500，通过一套算法来自动获取其他梯度的辅助色。
为了在深色主题中提供更大的灵活性和可用性，Android 官方建议在深色主题中使用较浅的色调（200-50），而不使用默认的主题颜色（饱和色调范围为 900-500）。
总结来看两大平台在深色模式的适配上都各有所长，在整体的视觉体验上 iOS 更加鲜亮突出，Android 则更加柔和舒适。
iOS 更加注重细节体验，在整体的色彩规范中的很多颜色都是单独定义的，这也印证了 iOS 13 发布后苹果官方向用户所表达的“屏幕上的每个元素都经过精心设计”这一理念。而 Android 的色彩规范中无论从背景色、文字色还是彩色都遵循着一个梯度规律。
深色模式改版设计的前期工作除了调研两大平台的指导规范外，我们还对已上线深色模式的竞品 app 进行了调研，调研的主要目标是背景色、文字色的色相与亮度展示效果。（以下截图时间为 2020 年 2 月份）
腾讯新闻，主背景无色相，次级背景无色相，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。
网易新闻，主背景色相偏蓝，次级背景色相偏蓝，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。
凤凰新闻，主背景无色相，次级背景无色相，一级文字无色相亮度偏低，次级文字无色相亮度极低。文字与背景对比度低，主要信息不够突出。
以 3 个 APP 首页来对比，可以明显的感觉到凤凰新闻首页的信息展示不够突出，在日间场景下体验极差。
深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求。凤凰新闻作为资讯类 app 用户在夜间使用的场景也有一定的占比。深色模式的改版不仅要在日间满足使用需求，还要保证夜间的视觉刺激相对柔和。所以，在设计配色方案时就不能使用对比度极高的纯黑色背景与纯白色文字，只能在各种灰色中搭配出最优方案。
经过多稿背景色与文字色的搭配尝试后，最终确定了下图中所框选的配色方案。这个方案整体背景色与二三四级文字色在色相上略微偏蓝，相较于无色相背景更具有活力，在视觉体验上信息层级的区分也更加明确。
在各种方案尝试设计的过程中对颜色的色相、饱和度、亮度的选取都是随机的，目的是在短时间内进行快速试错来确定配色方向。
本次改版的目标中还需要重新构建色彩规范，所以还需要对这稿配色的选用进行细致的打磨，在色彩对应的 HSB 参数中进行细微的调整使整套配色方案有律可循。
最终方案在四级背景的色相与饱和度方面进行了统一，对亮度的递增梯度统一为 5。对比初选方案在视觉上变动也很微弱，却使色彩分级规律一目了然。那么依照此方式也可以对文字色与彩色也进行了一轮打磨。
对于文字色在深色模式优化调整的基础上也对浅色模式下的文字色进行了调整，使深浅模式下两套字色更具有规律性。
在文字色的使用上凤凰新闻没有参照两大平台规则使用带透明度的颜色，主要原因是从自身实际出发，考虑到端内的文字色使用场景部分是用于半透明背景色上的，如果文字色与背景色均带有透明度，叠加后的体验会很差。
凤凰新闻的功能图标以线性为主，通常搭配文字一起使用，所以对图标颜色的定义与文字色是保持一致的。
在彩色的规范梳理中浅色模式下保持不变，仅对深色模式下颜色的亮度进行了调整，使深浅色模式下颜色的亮度对比有了统一的规则。
当然我们还需要对新的背景色与一二级文字色进行检验，看看是否满足 WCAG 无障碍阅读的 AA 标准，也就是常规尺寸文本对比度高于 4.5 : 1。
下图就是凤凰新闻客户端的新版色彩规范，在规范中除了上述的主要的通用颜色外也有部分是单独定义的颜色，这些颜色多用于独立或特定的场景下。
在完成色彩规范的重构后，重新输出界面样稿与旧版进行对比。
通过设计稿对比老版夜间模式与新版深色模式，能够直观的感受到新版在信息浏览上体验更好。
1. 色值替换
在着手进行色值替换时，iOS 开发小哥反馈给我凤凰新闻全端跟色值有关的代码有 2000+条，如下图中是日夜间对应的这条代码样式。
如此多的色值代码多数是相同色值在不同场景中重复使用，但彼此却又完全无关联，还有很多是日积月累的旧色值未被删除。如逐条替换费时费力效率极低，后期的维护也极其麻烦。
为了提高适配效率以及便于后期维护，使得之后的色值替换可以达到全局响应的目的。由设计师与开发人员共同建立一个色值对照表。
此表中设计命名主要基于色彩规范，用于设计师团队间的沟通协作。工程命名由开发人员提供，主要用于设计师与开发人员的在设计走查中进行高效的沟通协作。
以凤凰新闻 iOS 端为例，优化后的色值代码库如下图，由原来的 2000 多条色值代码变成了 30 多条色值代码「宏」。
在 iOS 开发工具 Xcode 的可视化文件夹中看起来就更加直观了。
之后的色值使用开发人员只需要调用代码库中相应的「宏」即可，后续版本迭代中如有对通用色值的调整只需修改相应的「宏」代码即可完成全端替换。
以这种方式快速完成首轮色值替换后很多页面的色值会出现错误，需要 UI 设计师持续的进行走查反馈，再由开发人员根据反馈进行修改校正。
以 iOS 端为例在深色模式色值走查过程中设计师分批次以 PDF 格式反馈给开发人员的，开发人员在修改反馈问题的同时设计师也在进行下一批问题的整理，这样同步进行的效率会更高。
2. 切图替换
切图替换场景相对比较多，同样延用色值走查的协作方式，设计师分批修改开发同步进行替换。开发小哥提供切图的方式就是直接扔过来一个全端切图包，需要设计师修改切图颜色后以原命名重新发回去。当打开切图包后顿感一阵头大，切图总数有近千张之多。
虽然切图很多但其中有一部分是已经无用的老切图，在替换的过程中也对端内切图重新进行了一轮梳理，删除了很多无用和重复的切图，同时也对凤凰新闻 app 的体积进行了瘦身。
在切图的替换过程中比较费时的是对同一切图存在多张的情况进行整理，梳理出该切图的所有使用场景然后反馈给开发人员进行统一调用，之后如再次修改即可完成全局替换。
除 icon 外还需要对默认图与缺省图进行替换。
3. 特殊适配
凤凰新闻客户端需要进行特殊适配的场景主要是图集与小视频界面，这两个界面仅有一套色值与 icon，界面中的元素需要单独处理，在切换深色模式后避免出现错误。
4. 界面展示
Dark Mode 适配是一项费时费力的巨大工程，也是探索和优化用户体验的全新挑战。本文主要描述了凤凰新闻 APP 在 Dark Mode 适配中的一整套心路历程，从规范、设计以及实现的角度对整个项目进行复盘总结。
文章来源：优设 作者：凤凰网设计中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
关于按钮的一些知识和我的一些观点分享给大家。
按钮是最常用的组件之一，有很多小伙伴并没有很全面的认识这个组件，今天我把关于按钮的一些知识和我的一些观点分享给大家。
一 按钮的作用
在使用按钮之前，你要了解什么是按钮，按钮的作用是什么，什么时候该用按钮。
1）什么是按钮
按钮用于触发一个及时操作。
2）有什么作用
2.1 功能操作
比较常见的是：展开收起、加减、下拉等。这种情况下以功能性为主，按钮的形式适当弱化，重点强调功能，突出主体信息。
2.2 指引用户下一步操作
这个是最常见的使用场景，每个可交互页面上都有这类按钮的出现，用来指引用户下一步该怎么做。比如：创建、保存...
2.3 培养用户习惯
当用户知悉某个按钮能指向某个操作，或者获取某类信息后，长此以往用户就会形成使用习惯。如果某操作能够为用户持续带来价值，那就可以在按钮的位置让它更醒目，持续培养用户点击习惯。
二 按钮有哪些类型
· 主按钮：用于主动行动点，一个操作区域内只有且只能有一个主按钮；
· 默认按钮：用户内有主次之分的一组行动点；
· 虚线按钮：常用于【添加】操作；
· 文本按钮：用于次级的行动点；
· 链接按钮：用于作为外链的行动点。
三 按钮的状态
1）交互状态
1.1 Normal 正常状态
此状态为按钮的正常显示状态，就是按钮在也页面中的常规状态。
1.2 Hover 悬浮状态
此状态为按钮的悬浮状态，当鼠标滑过时候的状态会给用户一个交互反馈，因为它只是一个视觉上的反馈并无实际作用，所以在移动端就把此状态去掉了。
此状态的效果并没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.3 Click 点击状态
此状态为按钮的鼠标 / 手指按钮状态，操作完此状态后，就会引发此按钮的真实作用。
同时，此状态的效果也没有具体的规则，具体按产品风格来定。这里我给一个参考效果，但并不是唯一效果，如果不合适，可以酌情更改。
1.4 Disable 禁用状态
此状态为按钮的不可操作状态。
当页面中有未完成的任务或页面中有错误导致不可提交页面时，按钮会处于 Disable 状态。这个状态在产品中也是很常用的，而且这种情况下应该引导用户去做其他操作，所以此按钮在视觉上一定要弱于其他。所以要制定一个通用的展示方案。
一般方案有两种：
· 无论按钮本身颜色是什么，它的背景色均为纯灰色，常用的色值有：#CCC、#999等，此种方案为常用方案；
· Disable 状态为 Normal 状态的 30% 透明度，如果你想让按钮都有颜色倾向的话，可以用这种方案。
2）状态属性
· 常规：常规样式的按钮，主操作按钮；
· 危险按钮：删除/移动/修改权限等危险操作，一般需要二次确认；
· 幽灵按钮：用于背景色比较复杂的地方，常用在首页/产品页等展示场景；
· 加载：用于异步操作等待反馈的时候，可以避免多次提交。
四 按钮的使用方法 / 禁忌
1）一个操作区有且只有一个主按钮
一个操作区有且只有一个主按钮去引导用户操作，如有有多个或没有则会影响用户的判断。尽可能少的让用户去做选择，产品的终极目标应该是“傻瓜式”产品，不要让用户有学习成本。
2）圆角值
根据产品风格，三种圆角值的设定：
2.1 圆角值为 0
这种适合用在比较严谨 / 企业级产品中，比如：阿里云；
2.2 小圆角值
这种是最常用的形式，在不失严谨的同时还有一些细节，如果可以的话，尽量选这种的；
2.3 超大圆角值
这种一般需要有独特的产品风格才可使用。样式不好把控全局效果，所以使用频率较低，慎重使用。
较大圆角值，此类千万不要用，不要问，问就是太丑。
3）精简文字
按钮里面的文字一定是精简的，不要展示过多文字，更不要折行。
4）文字与按钮比例要适中
文字与按钮的比例要适中，文字不要太大或太小，都会影响视觉展示。
5）弥散阴影
如果你想要用弥散阴影，阴影的颜色尽量用带按钮本身颜色倾向的，这样会让按钮更有呼吸感。需要注意的是：只有主按钮才能用阴影，其他级别的不要用，不然识别度会变差，并且会让按钮的体验变得很差。
6）主次操作按钮样式统一
主次操作按钮样式要统一，不要滥用样式。
7）按钮样式与其他组件要有区别
实际使用中，按钮样式不要与其他组件样式混用，避免让用户产生误解，做一些不必要的操作和思考。
8）不同场景适配
现在暗黑模式也是常用的场景了，所以黑/白场景下都要考虑到识别度的问题。
9）主次按钮的位置
主次按钮左右的问题，也常常出现在设计讨论会中，这次我直接放个结论吧，以后不要再为这件事吵架了。
在提交页面、弹窗中，主按钮在右；在其他常规页面上，酌情考虑。
五 按钮尺寸
按钮尺寸具体用多大的，这里我总结了一个规范（仅代表个人意见）。
· 高 = 文字行高 + Xn，X=自然数，n=4
· 宽 = 文字宽度 + Xn，X=自然数，n=4
在其他地方也可以用类似的公式去做规范，比如卡片的间距，你可以设置 n 为基础值，在此基础上用 Xn 去选取合适的值。
注意：常用的字号为 12px、14px，尽量不要用太大的字号在按钮上。
小结
按钮只是众多组件中的其中一个，也是最常用的组件之一。对于设计师来说，无论大小组件，我们都要精益求精的去思考，只有把每一个细节做好了，才能做好产品。日积月累的把每一个知识点掌握了，我们也就成长了。
文章来源：优设网 作者：友设青年
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你是否和我有同样的困惑，常常无法客观看待自己的设计，优化的时候又常常不知从哪里下手，看到别的产品设计又无法给出具体的判断依据。
今天学习一下用户体验的结构化衡量标准。不管是日常工作还是作品提升，都可以作为一个方向性的指导。
要想读懂一个信息，多少文字才能解释清楚（认知成本）？网页加载多长时间才算合理（时间成本）？要设置摄像机的时间和日期，设定多少个步骤才算合理（操作成本）？
首先我们来了解一下通用设计法则之——成本效益法则
成本效益法则的概念
百科含义：成本效益法则指的是要从“投入”与“产出”的对比分析来看待“投入（成本）”的必要性、合理性，即考察成本高低的标准是产出（效益）与投入（成本）之比，该比值越大，则说明成本效益越高，相对成本越低；考察成本应不应当发生的标准是产出（效益）是否大于为此发生的成本支出，如果大于，则该项成本是有效益的，应该发生。
从设计的角度来看，成本效益法则一般是用来评估伴随着新功能或新元素出现新增加成本的最后财务回收状况。
用户价值 = 新体验 - 旧体验 - 切换成本
从用户角度来看，成本效益法则也可以用来提高设计的品质。如果与设计互动的相关成本大于收益，就是不良设计；相反，如果效益大于成本，就是优秀设计。用户成本一般包括认知成本、操作成本、时间成本。
体验 = 效益 - 认知成本 - 时间成本 - 操作成本
例如：把走一段路到展览馆看展当作成本，把看展的趣味程度当作效益，如果趣味程度超过走路的成本，那么这个展览设计就是优秀设计。
优秀的展览设计效益大于成本
糟糕的展览设计成本大于效益
每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后，用户觉得获得的效益高于此次互动的相关成本，即是优秀的设计；相反，如果成本高于效益，即是糟糕的设计。
怎么做？
若想提高体验的价值，可以从两方面入手：1. 提高效益；2. 降低成本。
提高效益更多是产品层面的决策，所以站在设计师的角度，这篇重点从如何“降低成本”展开。降低成本主要有三方面：降低认知成本、降低时间成本、降低操作成本。
PART 1
降低认知成本
1. 减少冗余信息
a. 去掉累赘文案
为了避免客诉，设计常常会“被迫”在首页做冗长的文案提示，比如美团民宿的“今天入住、明天离店”的文字提示，彷佛在跟着文案做“今天入住+明天离店=1晚”的数学题，过于平铺直述反而增加了用户思考。而且过于具体的文案在小字显示的效果下阅读性也不够好，反而增加了用户阅读文案的认知负担。
同样是 1 晚，Airbnb的文案表达简洁明了，日期间的横杠足以理解是从哪天到哪天的含义。
如果说Airbnb是国外产品，调性不同，那么像马蜂窝的解决方案也是层次与阅读都更加清晰易懂的方式。
b. 去掉多余选项
招行银行的首页功能并不是我会经常要用的功能，但是却无法像支付宝那样自定义编辑首页的功能icon，去掉不需要的功能入口。
2. 内容好理解，减少思考，减少记忆
a. 文案与图片匹配度
文案与图片的契合度高更够帮助用户更有效的理解内容，App Store的推荐卡片在这方面表现的非常优秀。
b. 结构框架好理解——格式塔原理
接近原则中指明物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。京喜首页功能模块区分的相对距离差别不够大，加上商品图的视觉干扰，更加影响信息层次的区分。而淘宝的模块信息分组则清晰明确，信息辨识度高，视觉干扰少，能够有效减少用户区分信息的思考。
c.记忆的局限，降低记忆负担
人们工作记忆的容量有限，大约是 4±1。由于短期记忆的局限，设计师应该确保用户可以简单地识别信息，但不能从之前的对话中回想信息。
比如我们经常会发现考试中的选择题比简答题更容易，这是因为选择题要求我们去识别答案，而不是在记忆里回想答案。
再例如搜索，当搜索结果出现时，我们的注意力自然地从输入的词汇转移到了结果上，因此好的设计应该在搜索结果页展示搜索词。把点击过的结果变色也是帮助用户记忆已点过的内容。
知乎的搜索结果不记忆已阅览的内容，而谷歌搜索则帮助用户记忆已阅览过的内容。
3. 优先级：信息层级
a.用户优先级、b.功能优先级、c.视觉优先级
d.交互优先级
常见的是弹窗按钮，需要区分信息优先级，不让用户产生选择困扰。
4. 文字、图标的识别性、易读性
美团Tab icon简洁明了，图形与含义符合，文案简洁清晰。而悦会则显得复杂难以识别，不仅文案复杂，易读性比较差，图标也没有准确表达其寓意。
5. 一致性
a. 内部的一致性、b. 交互逻辑的一致性、c. 元素的一致性、d. 语词的一致性、e. 信息架构的一致性
f. 视觉的一致性
Airbnb的版式从banner到下面的标题分类，对齐方式与字体对比都保持一致风格，图标和插图都是线与线面的风格。对比之下，携程的设计语言则相对不够完整，不仅icon风格不太一致（面和线都有），banner运营位的版式也是比较随意的（文案没有统一的排版规范）。
6. 提示、引导、反馈
好的引导反馈能够大大赋能业务目标，相对于躺平的关注引导，好好住的类似提示引导，则生硬了很多，特别是两句文案的切换动作比较刻意，加的笑脸表情也跟引导关系不大。而躺平的引导非常的萌，文案与形象风格都很nice，加上形象手指的动态效果，使引导非常的自然讨喜。
7. 符合用户习惯
比如，Windows 与 Mac 系统的软件关闭方式。使用windows电脑时，我们形成了右上角关闭的操作习惯。后来开始用Mac电脑，关闭入口都在左上角，在一段时间内，每次关闭都要找一下关闭按钮在哪里。由于Mac的关闭方式没有比windows产生显而易见的体验提升，改变操作习惯成本高，部分用户可能会认为Mac的关闭操作不好用。
当然，假如最开始用的是 Mac 电脑，后面再使用 Windows 电脑，也会感到 Windows 不好用，这是先入为主的观念，一旦产生习惯，改变习惯将产生一定的学习成本。
PART 2
降低时间成本
1. 扭转用户对时间的感知
今日头条通过懒加载的方式，将文字内容优先显示，并且将图片位用默认底色先显示出来，用户可以在图片加载出来之前先看文字内容，大大避免了等待的焦虑。我们应该避免像移动营业厅这样的空白加载页面。
2. 增加等待过程中的价值
王者荣耀游戏开始前的加载界面会有小技巧的提示，等待的时间可以学习一些小技巧。
PART 3
降低操作成本
1. 先价值吸引后行动（先浏览后登陆）
每日瑜伽可以先浏览内容，想要了解更多的时候才引导登录，降低了操作成本。而keep却必须要先登录才可以浏览里面的内容，增加了使用门槛。
2. 预测用户行为
滴滴出行根据用户经常使用的地点预测用户要去的地方，一键选择地址更便捷。
3. 主动替用户选择
美团外卖支付时主动帮用户选择极速支付选项，一方面让用户更便捷，另一方面也能增加银行卡账户的绑定，赋能业务。
4. 简化关键节点
淘宝确认订单自动选择优惠券，简化了关键流程，降低操作成本，提高下单转化。现在很多购物平台也都实现了这一点。
5. 减少手动输入操作
以闪送为例，自动读取复制信息——一键粘贴——智能识别——自动填充信息，减少了用户的手动输入操作，大大提高了体验的质量与效率。
降低成本的误区
是不是成本越低，这项设计就是越优秀的设计呢？在成本效益法则下，绝不是成本越低，效益就越高，设计决策需要把互动产生的效益考虑在内。
如果一个交互的复杂度能够提高交互产生的效益，那么就应该适当的增加交互的复杂度。
比如我们常用到的密保键盘，打乱的数字顺序能够防止偷窥者从手势位置窃取密码，因此这项交互成本的提高相应的能够大大了我们资产账户的安全效益。
所以，必要时是可以通过提高成本换取更高的收益。但同时如果技术允许，通过手机短信验证登录与面容识别这种成本更低安全系数更高的方式，还是更好的选择，要根据具体的场景具体对待。
总结
每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后，用户觉得获得的效益高于此次互动的相关成本，即是优秀的设计；相反，如果成本高于效益，即是糟糕的设计。
设计师运用成本效益法则提升用户体验的维度主要在降低用户的认知成本、时间成本、操作成本。
降低认知成本包括：减少冗余信息；内容好理解，减少思考，减少记忆；优先级：信息层级；文字、图标识别性，可读性，易读性；一致性；提示、引导、反馈；符合用户习惯。
降低时间成本包括：扭转用户对时间的感知；增加等待过程中的价值、趣味性、小贴士。
降低操作成本包括：先价值吸引后行动；预测用户行为；主动替用户选择；简化关键节点；减少手动输入操作。
同时我们也要注意降低成本的误区，并不是成本越低越好，如果提高成本可以换来更高的效益，也要具体情况具体对待。
文章来源：站酷 作者：水原七秒
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每年年初的 CES 消费电子展，是一个非常适合了解前沿技术，了解消费和产品趋势，甚至在这些量产、准量产以及概念设计产品当中，窥见属于未来的设计趋势。
每年的 CES 都是一个特别适合展示新趋势的地方。虽然很多厂商会倾向于在 CES 上发布新品，但是相比于这些为数不多的新品和发布会，CES 上更加值得一看的是那些正在研发、小范围内投产并且你即将会看到的新技术和有趣的东西，它们所指向的都是消费级的产品，也贴合我们一直在说的「趋势」。
今年 CES 大会选择了线上举办，不同厂商选择使用直播、视频或者图文的形式发布了自己的产品，有的是概念设计，更多的是后续会量产的产品，类型丰富。这篇文章会按照几个大的类别和趋势，将今年的CES 展上产品进行了梳理，方便和我们之前的设计/技术趋势相互印证。
锐龙系列的 AMD CPU 以极高的性价比让广大电脑用户喊出了「AMD Yes ！」的最强音，而脱离 Intel 阵营的苹果干脆以 M1 芯片，把牙膏厂 Intel 原本的不安全感直接拉满，成为了压垮骆驼的最后一根稻草。在 CES 大会开始之前干脆把 CEO 换成了工程师出身的行业老兵 Pat Gelsinger，试图重拾工程师文化。
在今年的 CES 大会上，试图改变的 Intel 发布了针对高性能轻薄笔记本电脑的芯片，H 系列：
H 系列采用 Tiger Lake 架构，全系列搭载高性能的 Iris Xe 核显，它的性能足以在 1080p 分辨率下流畅运行《古墓丽影》这个级别的游戏（实际上 M1 的发布会上也同样使用了这款游戏作为性能测试）。
英特尔的11代桌面端芯片也在性能上又不小提升，采用了全新的 Rocket Lake-S 架构，不过最值得期待的是下半年才会公布细节的12代混合架构 CPU，Alder Lake。
老对手 AMD 在 CES 2021 上则发布了全新的 5000 系列移动端处理器，其中标压的 5000H 系列和低压的 5000U 系列，都用自身的配置和性能解释了“便宜大碗”的概念。
最高可选 8核16线程的配置，主频可飙升至 4.4GHz，充满电之后日常使用可以达到 17.5小时，电影播放可以长达 21 小时的电影。
而同为御三家之一的 Nvidia 则带来了桌面级的RTX 3060显卡以及移动端的RTX 3080/RTX 3070/RTX 3060。
当然，无论是桌面端的显卡还是移动端显卡的性能都有着不俗的表现，具体大家可以去官网看看这里就不说了……（一个很重要的原因是由于比特币的疯狂涨幅，导致挖矿需求暴涨以至于这波显卡价格出现了极其疯狂的增长，一卡难求，鬼知道啥时候能恢复正常）
总而言之，移动端芯片（主要是 针对笔记本电脑）在性能提升的同时还控制好续航，无论是CPU本身的算力还是显卡的性能，都有着相当明显的提升。这对于设计和创意从业者而言，意味着有着更加轻薄地电脑和平板可供选择，并且性能足以支撑从平面到3D渲染、 视频剪辑乃至于大型游戏，而且很大程度上，性价比有 「AMD Yes」，高性能可以上 Intel H 系列 + Nvidia ，而习惯使用 macOS 地用户应该也会在未来几个月内等到新的 M 系列芯片和 Macbook Pro 16 和 Macbook Pro 14 ，当然这和 CES 2021 就没啥关系了。
目前这些新芯片本身的强大性能和优良的续航，可能需要到后续的电脑和笔记本上才有所体现，好在 CES 2021 本身还发布了不少性能优秀、设计过硬的电脑类产品。
笔记本电脑在历年 CES 大会上都是重要的组成部分。在这些笔电类产品当中，除了一部分迭代更新的量产新款之外，还会有不少基于特定的需求，在设计和功能上高度特化的产品出现。
比如 HP 的 Envy 14 笔记本就很典型地属于前者，11代英特尔 CPU 和 Nvidia GeForce GTX 系列的显卡，传统的造型和更加精致的工业设计，这种不过不失的产品其实是各大厂商在 2021 年铺货时的中坚力量。
而微软的 Surface Pro 7+ 也只能算得上是小幅更新，多个配置可选，没有太多好说的。
而出自联想的 ThinkBook Plus Gen 2 i 笔记本在继续探索了双屏笔记本的另外一种可能性，A面的超大尺寸电子墨水屏搭配手写笔，简直就是给手绘和笔记爱好者量身定制的创作空间。掀开之后又是一台传统的超极本，13.9 mm 的厚度 和 1.3 KG 的重量也非常符合携带通勤的标准。
相比之下， 同一谱系的 ThinkPad X1 Titanium Yoga 的翻转设计则显得更加传统，不过在性能和影音上，Dolby Vision HDR和Dolby Atmos扬声器的支持让它在影音娱乐上更加突出，少了电子墨水屏，整体厚度也缩减到了11 mm。
不过，更有意思的是华硕ZenBook Pro Duo 15 OLED 笔记本电脑，原本 Duo 系列的双屏设计已经相当独特了，这次的新款不仅将配置进一步推升到了 i9 cpu + NVIDIA GeForce RTX 307 的级别，还给副屏增加了一个自然的 9.5 度倾斜，防炫光的同时还更加贴合人体工程学。这可能不一定符合每个人的审美，但是可能正好是某些天天肝视频跑渲染的设计师同学正好需要的东西。
另外一边，游戏本也基本上是在堆配置，Alienware M15 R4和M17 R4 老老实实地把显卡推到了 NVIDIA GeForce RTX 3080，加上 360hz 超高频率的显示屏，内存堆到32GB，存储支持 4TB PCIe，性能够怪兽，但是别的就没啥好说的。
而另外一边的 Razer 推出的 Razer Blade Pro 17 2021 和 Razer Blade 15 2021 这两款笔记本，本质上和外星人家的差不太多，配置有多高堆多高，机身工艺搞好点，RGB 信仰灯炫起来……
当然这并不重要，这次 CES 2021 上，Razer 真正的杀手锏是这俩笔记本的配件，Razer Project Brooklyn概念游戏椅：
只需按一下按钮，这款游戏椅就可以从背面展开60英寸的OLED显示屏，真正沉浸式的游戏体验，带有4D模块化功能的扶手以及折叠可调的桌子，连整个框架都是带有高保真触觉模块的，体验有多好，就要看你和游戏厂商的想象力了。
对于游戏本本体而言，在配置和外观上的设计很大概率只能靠添油战术，互相之间见招拆招，真正能够打出新意，玩儿出花样的，基本都是在外设和配件上。
智能手机毫无疑问是大家最关心的事情。支持5G频段，AI驱动的后置多镜头模组，前置挖孔/刘海镜头，6英寸屏幕，这几乎是当下绝大多数智能手机的标准配置，也是贴合大众需求的最佳实践。CES 2021 发布的 三星 Galaxy S21 Ultra 5G 就是这种典型，配置到位无懈可击，更重要的是，后置镜头模组的工业设计相当具有识别度，边角凌厉又富有美感。
不过大家都很清楚未来趋势肯定不会止步于此，柔性屏幕给人带来的想象力太过丰富，包括苹果在内的一线厂商几乎都在这个基础上进行探索。
三星的 Galaxy Fold 系列已经发不到第二代，Moto 的新生 Razr 也发布了迭代之后的版本，苹果早早申请了环绕式柔性屏幕的设计专利:
不过，最有意思的还是卷轴屏幕。在 CES 2021 之前，OPPO 就公布过卷轴屏手机的概念设计：
在今年CES 上， LG 发布的 LG Rollable 则可能是最早量产的卷轴屏的智能手机（预计在今年年内发布）：
虽然没有 LG 这么快，TCL 也同样带来了自己的卷轴屏智能手机，不过和 LG 的横向拉伸不同，TCL 的屏幕选择了纵向拉伸：
相比于折叠机构，卷轴式的柔性屏幕将不会因为过大的折叠角度而出现屏幕折痕。不过这种收纳方式在保持优雅的同时，还会面对和升降式摄像头一样的问题：展开和收纳结构的可靠性和开阖时间的控制。
可以确定的是，柔性屏幕设备会逐渐增加，而目前技术的快速迭代意味着在未来2年内会有一大批类似的设备出现。无论是折叠、翻转、卷轴还是翻盖式双屏，都意味着 UI 界面的动态延展，而不同的结构设计带来的是交互方式的百花齐放，这对于UI 和交互设计而言，都是全新的挑战，以及新的机遇。
不要忽视了这种硬件设计之下的复杂度，即使是最简单的双屏折叠，对于 UI 交互和开发而言，都是巨大的挑战，不信可以先看看微软的双屏设计规范：
物联网和智能家居从提出来到最终落地为消费级产品，经历了十几年漫长的过程。在今年的 CES 展上所展示的很多智能家居类的产品，确确实实比以往更加「智能」也更加富有想象力。除了各大厂商原本在工业设计和基础技术上的积淀，这些产品大多借助了机器学习技术来提升「智能」程度，并且借助语音交互来保持操控的便捷性。
智能家居的花样就多了。
三星推出的 Bot Care 智能机器人看起来像是一个更具未来感的的 R2D2，不仅能够识别你的语音命令，而且能够借助成熟的 AI 技术识别你的行为，它会学习和了解你的日程安排，能够逐渐了解你的习惯，并且在日常的生活中提供帮助。
而更加进阶的是 Bot Handy 智能家居机器人功能就更多一些了，它不仅可以在室内到处溜达，而且能够能够识别材质和物品，它自带的机械臂能够帮你收拾房间，收拾厨房物品等等等等。
CareOS Themis 的智能镜子也借助传感器和 AI 实现了诸多传统镜子做不到的事情。通过内置的 IR 温度传感器、UV皮肤分析灯以及相机，CareOS Themis 智能镜子 能够对你的卫生状况、皮肤状况乃至于心理健康状态进行分析，并且提供切实可行的建议。
传统家居和传感器、数字硬件的结合，将家居设备的安全性、可用性和完备性全方位地进行了提升。比如 LOCKLY Duo 智能锁就加入了双重锁定技术，可以更快打开又保证了安全性：
而 Ampere Shower 这个蓝牙淋浴扬声器，不仅可以让你在淋浴时享受 360 度环绕立体声，想要播放什么内容完全可以用语音控制，而且考虑到它特殊的使用场合，它干脆借助淋浴喷头的水流来进行充电：
而便携式投影仪也是诸多大厂的下一个发力点，在保持高流明、智能可控的特性的同时，进一步缩小提及，提升音响效果，就像华硕的 ZenBeam Latte 的便携投影仪一样：
传统家电设备则在智能化和场景化的探索之下，呈现更加灵活的新玩法。三星定制的4门 Flex 冰箱可以针对不同的食品进行定制化的管理，而传统固定的冷冻/冷藏式的分区也借用智能化的管理打破，如果你需要更多的冷藏空间，只需要通过设置就能够进行转换和调整。
当然，智能电视当然是 CES 大会上绕不过去的门类，只是多数厂商的产品都是在自然硬件和性能迭代上「更高、更快、更强」。
而其中真正称得上有趣的，还是 LG 的升降式透明电视：
透明屏幕在不同光照条件下的泛用性，应该还是存疑的。毕竟去年8月小米发布透明电视之后，已经有过不少质疑的声音了。不过这些小众产品的不断迭代和推出才有可能让透明屏幕技术上的不断前进，更贴近科幻电影中使用场景的小型透明智能设备的普及才有希望。届时，UI 设计应该又有新的设计需求了吧？
CES 2021 的这些新型的智能家居类设备上，可以更进一步印证之前大家对于趋势的预测：
可穿戴设备的热度也一直在逐渐提升。
国外疫情的持续也促使很多厂商开始考虑如何制作更加贴合健康需求的可穿戴设备。
游戏硬件雷蛇的 Project Hazel N95智能口罩应该是 CES 展上最受关注的硬件之一，它并不仅仅搭配了 N95 级别的防护和可更换滤芯，透明的遮罩充满了未来感，同时雷蛇还将扬声器和信仰灯集成在过滤器的外侧，确保语言交流清晰，视觉风格独特：
另外，为了确保整体的安全性还附带了专用的紫外线消毒盒：
相比于雷蛇的科幻感，AirPop Active +智能口罩就显得更加运动。
AirPop Active + 则是一个专业的运动口罩，借助内置传感器，这款口罩能够跟踪空气质量以及佩戴者的呼吸状况，并且通过蓝牙和手机同步，方便查看。同时，在滤芯即将耗尽时，也会提醒用户。这款口罩从外观到功能都是明显面向运动爱好者的。
BioButton 这款设备则是一款新冠病毒感应器，将它贴在颈部，它会跟踪你的呼吸、心率、睡眠和血氧状况等生命体征，并且识别你是否出现了感染新冠病毒的症状，可以说是针对性极强了。不过，对于绝大多数隔离在家的用户，锻炼是更重要的事情。
NordicTrack Vault 顶级家庭健身房就是一个这样的产品，超大屏幕结合 iFit 的互动健身体系，你可以清晰直观地对自身的动作进行审视和视觉反馈，进一步进行矫正，同时确保在家也可以获得健身教练 1对1 的指导。
智能手表是可穿戴设备这一领域是一个大类。目前绝大多数的智能手表在各种传感器功能上都做得不错，差异主要是在体验的细节优化、工业设计、品质以及品牌溢价上了。
Fossil 在 CES 2021 上带来了支持 5G LTE 网络的 Fossil Gen 5 LTE，芯片用的高通骁龙 3100，心率、GPS、海拔、环境光等传感器一个不缺。Fossil Gen 5 LTE 提供金色和玫瑰金两种配色。
相比之下 Amazfit GTR 2e 智能手表则更加关注运动爱好者的细分需求——直接提供了90多种不同的运动模式，它可以识别你是在跑步还是骑车，45 天超长续航，5 ATM 的防水级别，可以说是在专业性上相当到位了。
此外，飞利浦发布的 Sonicare 9900 Prestige 智能牙刷也相当亮眼。通过传感器，它能够识别不同位置的压力，监控清洁位置和刷牙的运动轨迹，并且提供 AI 实时指导和个性化刷牙动作推荐，同样是通过蓝牙连接手机来实现信息的传达。
其实这些健康相关的可穿戴设备也呈现出几个典型的趋势性的特征：
在可穿戴设备当中，涉及到VR/AR的产品需要单独说一下。
VR 和 AR 你应该比较了解了，虚拟现实和增强现实，那么MR 和 XR 呢？
MR 是混合现实，通俗的说它是介乎 VR 和 AR 之间，虚拟合成的「图像」和真实的世界相互融合，还可以和现实物品进行一定程度的互动。而 XR 是扩展现实（Extened Reality）的缩写，它其实是以上 VR、AR、MR 的一个总称，或者说 VR/AR/MR 是 XR 的子集，XR 所涵盖的领域和范畴比以上几个都要宽泛。
比如虚拟触感就是属于 XR 的。在今年的 CES 大会上，Senseglove Nova 和 bHaptics 推出的紧身衣套装，所带来的体验就是虚拟世界在触感上的投射介质。
以 bHaptics TactSuit X40全身触觉套装 为例，全身内置 40 个触觉反馈点，15 个小时的续航，在 VR 和 AR 眼镜的支持之下，无论是游戏还是看电影，只要有相关的数据支撑，就能带来真正意义上完全沉浸式的体验，视觉听觉触觉全覆盖，这大概才是真正意义上的「沉浸式体验」吧？
Xenoma EMStyle 套装也是一个针对皮肤和肌肉的新玩意，这款可穿戴设备当中包含 24 个电极，胸部4个，腹部4个，每个手臂2个，臀部2个，每条腿4个，它们可以为全身主要的肌肉群提供刺激，并且可以让健身教练在安全距离之外，通过电极刺激的方式提供指导，也算是某种意义上的「虚拟触觉」。
接下来说说我们更熟悉的智能眼镜。
联想 ThinkReality A3 智能眼镜也算是今年 CES 上关注度较高的产品。其中，ThinkReality A3 又分 PC版和工业版两种，两者硬件配置上相同，但PC版只能和Windows 同步，工业版可以连接到Android智能手机（基于骁龙800系列芯片），并运行使用联想ThinkReality软件平台构建的定制行业应用。
Vuzix 也在 CES 上发布了下一代智能眼镜，其中集成了MicroLED显示引擎，具有完全透明的高级波导光学器件。Vuzix 使用一对微小的高效 MicroLED投影仪提供动力，从而可以为用户提供高密度像素阵列，在双眼中投射超级清晰的视觉内容。
上面的智能眼镜还算得上是科技产品，而 Mojo Vision Len AR 隐形眼镜就算得上科幻级别的产品了。从尺寸上来说，普通眼镜和隐性眼镜就是数量级上的差别，Mojo 的这款智能隐形眼镜使用微电子技术，内置了微型显示屏，可以共享重要信息，用 Mojo Vision 来使用增强现实，不仅无缝，而且无形。
可以说，如今的虚拟现实技术已经走到了一个全新的阶段了：
新事物正在以无与伦比的速度进化。芯片性能和基础的技术为消费级的硬件提供了最扎实的工业基础，繁盛而多样的企业开始有意识地深耕细分领域的产品，其中留给设计师的空间其实非常大。
各式各样的笔记本类产品，已经针对不同需求的设计师进行了细分优化，不同类型的设计师应该都会找到针对自身领域需求的硬件设备，多屏幕、多输入方式的笔电和周边外设正在快速地丰富起来。
而快速发展的柔性屏幕，则可能正在给 UI、交互设计师提出一个复杂的难题，那就是屏幕延展之后的UI和交互上的提升的问题。而智能家居和虚拟现实相关领域的快速进化，最终的问题同样会压到设计师头上——你要如何为这一新的交互和UI进行设计？
那个时候，交互设计师这个门类应该会真正意义上彻底独立出来，而不是把交互的活儿让产品或者UI设计师来完成……因为交互设计本身的工作量会暴增，而且有着更高的要求和更加复杂的情况要处理。
文章来源：优设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
优惠券是我们电商中最常见的活跃用户的一种方式，简单的设计就能带来巨大的客流量。虽然小小的一张优惠券并不会占用太多的版面，也不会浪费太多的色彩去装饰，但想要知道优惠券的种类、特点，还需要我们认真剖析，仔细揣摩。
今天就和大家分享一下关于优惠券设计的那些事儿～
通常在活动、促销、甩卖等场景中，我们最常用到的手段无疑是优惠券了，为什么被众多设计师和商家所喜爱，也是源于它的这几大优点。
1. 提升用户活跃度：
人们总是对 “降价”、“打折” 这样的字眼充满了兴趣，用户也习惯于在了解到商品的价格及优惠力度后再决定购买，所以有优惠的商品才更具有吸引力。
2. 增加产品曝光量：
用户一券在手，总是让人忍不住翻看可以使用的商品，这无形中增加了平台商品的曝光量。同时好的优惠券会在用户的口口相传中得到推广，这对平台、商家和产品来说，都是一个很好的展现自己口碑的机会。
3. 刺激用户的潜在购买需求：
当用户的购买行为背后没有充分的购买动机，交易就会轻易的受到其他因素的影响而中断。优惠券的出现满足了用户 “赚到” 的心理，用户就愿意为潜在的购物需求买单。
4. 提升用户的购买力：
用户的购买力和收入水平成正比，和商品价格呈反比，当价格受到优惠时，用户的购买力也可以得到相应改善。
体验券
一般针对新品或测试产品向用户免费发放的体验券，意在吸引用户的关注，倾听用户的意见，有时体验券也会以邀请码的形式出现。
△ 体验券（图片来源：京东智联云官网）
代金券（又称现金券）
一般使用门槛较低，不会有金额、数量等方面的要求，可以直接使用，若购买商品不够券面金额，通常情况下是不退还差额的，如：新人大礼包、无门槛红包和员工福利等。
满减券
通常会有订购数量、订单总价、产品种类等方面的要求，满足条件的订单才可享受满减，如：生活缴费商品满 ¥100 减 ¥2 优惠券。
打折券
打折券是直接对商品进行打折，一般商品较贵，购买的用户较少，或者用户订购量大会采用此类型优惠券，如：8.8 折优惠券等。
单品券为购买单一商品时使用的优惠券；
系列产品券为购买某种特定系列产品时所使用的优惠券，用户只需要购买指定系列的产品就可以享用这张优惠券，如：购买无线宝 WiFi5 系列产品优惠券等；
品类券为购买某一类商品时使用的优惠券，如：购买清洁类、医药类、生鲜类等优惠券；
品牌券为购买某一品牌商品时使用的优惠券，如：购买华为、京东云等品牌产品所用的优惠券。
店铺优惠券则是店铺自行发放的，如：关注有礼、抽奖、新老顾客回馈等；
平台优惠券是由平台直接发放给用户的优惠券，针对的目标群体范围较广，如：购物津贴、百亿补贴等；
政企消费券成本由政府、企业和平台共同承担，意在提升某些地区消费者的消费能力和消费水平，如：北京消费券等。
说到拉新，我们总会遇到一些一点诚意都没有的优惠券，例如：劳斯莱斯 “5 元代金券”。实际上这也是一种吸引用户关注的方法，成为了人们口口相传的调侃。
下面是 “京东智联云官网活动” 拉新引流的新人礼包，我们可以看到 “新人千元大礼包” 字样，新用户在完成注册任务之后就可以领取相应优惠券。
通常情况下，我们使用 “代金券” 进行拉新。代金券的价值相当于同等金额的现金，购物时直接使用，一般不会有过于苛刻的门槛，用户使用起来方便，所以对新用户的吸引力极大。在设计时我们需要注意以下几点：
设计目标 – 吸引新用户；刺激用户的购买需求；使其真正成为我们的用户。
任务模块 – 除了优惠券本身外，设计时还应该注意各任务模块的衔接与规划，如：用户登录、注册、用户的信息填写等。
门槛值设定 – 门槛值设置较小的优惠券才具有较强的吸引力。对于新用户来说，用户不需要购买太多商品，也不用局限于某个商品的使用。对于设计师而言，需要考虑门槛值和商品成本之间的关系。
面额设定 – 优惠券面额的设定可以很好的反应我们吸引消费者所付出的成本，控制获客成本也是拉新过程中的重要环节，设计师应该清楚了解用户喜好，剖析哪种互动方式可以在降低成本的同时扩大优惠券和商品的吸引力。
时间设定 – 这里可以强调优惠券使用时间的展示，方便用户在有效期内即时使用，避免浪费。
当然，每一种优惠券都有 “促活” 的属性，不管是优惠还是打折无不吸引着消费者的注意。例如：每年的 “京东 618” 和 “京东智联云 11.11 大促（下图）” 都是采用了各种优惠券来吸引用户完成交易的。
促活一般是电商发展的关键时期，设计上会呈现出：短期内让利、时间短促、宣传、优惠券种类不限等特点。
小结：
其实优惠券的作用还有很多，它还可以解决用户存留等问题。由于篇幅有限这里就不过多展开，期待小伙伴们一起思考和挖掘。
收益预估：设计前预先判断本次活动的成交量，计算每单的收益大小以及总收益。
使用范围：根据活动的目的，确定使用范围（ “平台”、“品类”、“品牌”、“店铺” 等）。
使用门槛：每种优惠券都有相应的使用门槛，这是保证商家不会亏损的重要环节。
领取上限：设置领取上限，一方面根据商品库存的多少，尽可能照顾到更多有需要的用户；另一方面也可以表明优惠并不是那么轻易就会得到，增加优惠券的吸引力。
使用有效期：如果优惠券的使用期过长或没有有效期，那就和降价没有什么区别了。
通常活动结束后设计师要对本次设计进行复查，通过调研判断优惠券对用户的吸引力。一方面从定量的维度考量，我们要对用户的浏览量、领取量、使用率、实际下单量和用户参与程度进行观测；另一方面从定性的维度分析用户的实际感受，用户在体验完成后是否愿意再次光临或推荐给亲友，也是我们需要考查的方面。
文章来源：优设 作者：JellyDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
品牌升级设计不是件小事，也不像看到的那样光鲜亮丽。这个过程很复杂，充满了很多人的意见和情感。基于我个人对品牌的认知，品牌设计的整个推导过程是“文化←专业→业务”，也就是说核心的品牌资产去承载文化和赋能业务。害，虚头巴脑的，还是上张图来捋一下思路：
确定虚的部分后，需要多维度分析需求，并且了解用户对品牌的印象（前提是要确定你的用户是谁），但首当其冲的是确定一个方法，那么情绪版是一个相对来说还算靠谱的推导方式：
按照这个思路，设计风格以及重要因子（颜色 / 字体等）就基本被确认下来了，然后就需要相关的设计师按照逻辑图的顺序落实到业务应用当中：
哦，对了，做这些之前最好确定一个 SOP 模版，帮助你可以快速的完成适配工作：
另外还要强调一点（这个点我在面试的时候也会经常问候选人），因为整个项目涉及的人很多，耗费的资源也巨大，所以为了确保无缝执行，协调工作要怎么进行呢？这就需要机制和规则的设定来辅助你管理/协调每一个人的工作了（不要忽视这块，并不是只有界面设计是设计，思维的设计同样是设计哈）：
对了，除了运用在品牌视觉之外，产品中也需要适当的被 highlight 一下，以马蜂窝为例：
如果说 logo 是企业的象征，那么超级符号是品牌形而上的灵魂。不同于辅助图形，辅助图形往往来源于品牌标志，可以是品牌标志本身，也可以是品牌标志某一部分；超级符号的形式偏生活化的符号，跟辅助图形形式上可能类似，但用途往往更大；
比如可口可乐的瓶身，宝马的前脸，ta 通常不那么起眼，甚至在你脑海里都习以为常，觉着就应该这样，丝毫提不出什么质疑；
著名搜索引擎百度定义超级符号为：他们本身具有一定意义，要求人们按照其指导进行活动。（这个解释感觉冷飕飕的…）我试图用自己话来说：就是品牌本身传承下来或者创造出来最具特色最能代表的图腾；
品牌设计中需要符合和 logo 搭配使用，因为在一定场景下，真正能让用户感知并认可的可能是超级符号，而非品牌的 LOGO；
当然，超级符号可以依附于 logo 存在，同样也可以作为个体单独存在，两者并没有绝对意义上的划分：
1. 超级符号的形式
最著名的两者合二为一的就是天猫啦，从天猫 logo 的诞生到现在，质疑一直没有停止过，硕大的猫头看起来傻里傻气但恰恰也是这个原因，被记住了概率大大增加；如今我们能看得到每年的双十一都会有这只猫存在：
另外如果用一个通用符号作为超级符号的话，其实是比较吃亏的，用户虽然可以比较容易的描述出比如一个圆一个矩形之类的，但是却不容易让用户记住你，记住你跟其他产品的区别；比如美团外卖的品牌升级，一定程度上是想从通用符号过渡到专属符号。
符号和 logo 分离的例子也有很多，比如滴滴的圆：
咱也不知道为啥，ta 就用了个通用符号，不过属实还挺好看～
2. 浅谈超级符号的设计
设计一个符号一定要把产品的特色最大化，试想一下漫画的画法，其中最重要的一点就是特点的不断夸张夸张再夸张，不断让人记住 ta 最具特色的那一面：
初期的超级符号绝对不是简单的设计一个图形就完了，从最基本的图形到颜色、字体、元素、板式再到整个视觉风格体系，再到融入到产品 UI 或者线下媒介的传播的每一个触点去传达品牌；当然超级符号也会有进化，比如最终进化到可口可乐最后会进化成一个颜色-红色；再比如已经销声匿迹的 ofo，你永远也不会说：“我要骑一辆 ofo”，取而代之的是“我要骑一辆小黄车”，所以你看符号进化到最顶级的时候未必需要实体（咦，这句话又让我想到了奥卡姆剃刀）。
综上，做出具有可被记忆的特殊性符号，基本上就成功了 80%了。再经过长期不断的迭代优化，最终进化为无形的品牌资产就基本上可以宣告品牌的成功了～
上点小福利
尽管我一直坚持输出设计观点，但我发现好多朋友练就了 “一看就会，一用就废” 的日常技能，所以还是准备了一些经过我严选的模版和素材送给铁子们，希望铁子们在学会理论的同时也能手活跟上，眼高手低不可取，眼手双高真牛 B！
当下，品牌设计的价值也不断的被提高，一方面是在流量尤为重要的今天，品牌的第一个作用就是导入流量；另一方面是因为产品的溢价主要是由商业包装决定的，包装最终成就一个品牌，而品牌就是终极的包装。设计师作为其中的重要参与者，一定要明白品牌资产的沉淀和品牌是其实是质的区别，别试图去用形而上的手段去解释本质性的问题，试着把产品和品牌紧密结合，毕竟品牌的最大输出口就是产品本身。
文章来源：优设 作者：负能量补给站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
大家好，我是Clippp。看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
首先将图标按尺寸大小分为两类；
继续细分对应的面性、线性、线面结合、扁平、拟物化等类型；
最后选择标准、容器、渐变、3D、手绘、阴影等风格。
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到16px，这些酷炫的效果都无法呈现出来。
小尺寸图标用作UI控件，起到引导功能或装饰目的。
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
1.2带有背景色的面性图标
1.2渐变线性图标
1.3等距线性图标
1.4手绘线性图标
1.5断线图标
1.6双色线性图标
2.2带有背景色的线面结合图标
2.3错位线面结合图标
2.4色块图标
2.4单色线面结合图标
3.2带有容器的扁平化图标
3.3等距图标
3.4半阴影扁平图标
3.5长阴影扁平图标
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
文章来源：站酷 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com
