距离iPhone 12系列发售已经有段时间。
之所以没第一时间撰文，是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。
而在此之前，即便是Apple线下店也没有样机。
保险起见，我等接触到 Mini 和 Max 真机后，开始着手撰文。
一周前完成了文字部分，本周终于完成了几十张配图，这才和大家见面。
为了方便新同学更好的了解本文内容，我会简单提及一些关于适配的必要信息。
并附上往期内容的链接，方便延展翻阅。
本文约3200字，分以下六个部分：
在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数：比如屏幕分辨率（物理分辨率）、屏幕尺寸、PPI数值…
其实，在处理常见手机界面适配时，设计师只要关注以下3个基本参数：渲染像素（Pixel）、逻辑像素（Point）、 倍率（Scale）
渲染像素（Pixel）可以理解为是手机截屏时所得到的图片尺寸，单位是px；
逻辑像素（Point）可以理解为是程序员在用代码绘制页面时所用的尺寸，也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸
对应的就是手机的逻辑像素尺寸。
倍率（Scale）因为逻辑像素和渲染像素存在着一定的比例关系，这种比例通常被称为倍率，比如切图后缀的@2x、@3x对应的就是倍率的数值。
值得一提的是，倍率不一定是整数，比如三星GALAXY J2（540×960），倍率是@1.5x；
华为M3 Life 8.0”（1920×1200）的倍率则是@2.25x
适配方式主要有两种：
1. 倍率适配
主要应用在逻辑像素相同，但倍率不同的设备。
比如iPhone 11适配到 iPhone 11 Pro Max
两个适配的逻辑像素都是 414 x 896pt，但倍率不同，前者是@2x、后者是@3x。
2. 逻辑像素适配
这种适配方式应用在两个倍率相同，但逻辑像素不同的设备，
比如iPhone 11 到iPhone 8：
两个设备的倍率都是@2x，逻辑像素则分别是：414 x 896pt 和 375 x 667pt。
如果两个设备的倍率和逻辑像素都不相同，比如iPhone 8 到 iPhone 11 Pro Max
那通常会先进行逻辑像素适配，再进行倍率适配。
由于倍率适配相对简单，只需要考虑分割线和切图这两个因素。
因此，设计师通常说的手机适配、尺寸适配常指逻辑像素适配。
所以搞清楚iPhone有哪几种逻辑像素，就成了iPhone适配和验收的关键。
在今年10月份发布的iPhone 12系列共有四部机型。
在谈新设备前，我们先简单回顾截止iPhone 11系列时，iPhone的几款主流机型及其对应的参数：
通过图表可知，在iPhone 12发布前，市面上的iPhone共有6种不同的分辨率需要完成适配。
那么iPhone 12又带来哪些变化呢？
从官方给出的屏幕数据可知，四款设备的物理像素如下：
由图可知，今年iPhone共新增了3种全新的屏幕尺寸。（其中iPhone 12和iPhone 12 Pro的物理分辨率相同，故合并看待）
但在设计层面，iPhone 12系列四款手机，只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。
画重点：目前有一些文章，错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸，认为12 mini的逻辑像素为360x780pt 。
事实上iPhone 12 mini采用了iPhone X一样的渲染像素，即1125 x 2436px，对应的逻辑像素是375x812pt。
为了解释这个问题，得从大家比较熟悉的iPhone Plus系列手机说起。
在前文提到，手机界面适配时，设计师只要关注：渲染像素（Pixel）、逻辑像素（Point） 以及倍率（Scale）这三个基本参数。
而其中的渲染像素通常会和屏幕的物理像素保持一致，比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。
这也导致大家很容易把物理像素和渲染像素混为一谈。
但既然说了是“通常会保持一致”，就总会有例外。
比如iPhone Plus系列，官方给出的屏幕参数（物理像素）是1080×1920，但渲染像素却是1242×2208。
所以设计师在针对Plus系列做图的时候，就得按照1242×2208进行输出。
而新款iPhone 12 mini的情况和Plus系列一样：
官方给出的物理像素尺寸是1080×2340 ，但拿到设备真机后，通过测量可知12 mini采用的渲染像素是1125×2436，这和iPhone X的渲染像素保持一致。
在明确这一点后，我们再看下iPhone 12系列设备的参数：
如果我们只看逻辑像素，加上iPhone 12系列，目前iPhone 共有7种尺寸。
这些尺寸都需要设计师留心，并完成相关机型的验收走查。
不过，到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。
还需要将放大模式的尺寸考虑在内。
目前各个设备的放大模式对应的适配三要素分别如下：
其中320x693pt是全新的尺寸，出现在12 mini、12、12 Pro这三款设备中。
由此，在把放大模式纳入适配考量范围后，iPhone的逻辑像素共统计出8种尺寸。
如果将其中最小尺寸和最大尺寸比较宽高的话，宽度相差了108pt、高度相差了358pt
对于那些横滑需要外露一部分的页面，需要重新设计尺寸或调整局部的适配方案。
这对于一些单屏显示的页面而言，也是件麻烦事。
先思考一个问题，在下面几个尺寸的iPhone中，你觉得哪一种尺寸的iPhone在市面上占比最高？
在 iPhone 12发布之前，在iPhone这几种屏幕尺寸中，你觉得哪一种iPhone的市场占有率最大？
我相信绝大多数设计师，都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里，大家都是用这个尺寸在做图。
那实际情况究竟如何呢？
我们先看下阿里友盟今年05月01日的数据：
PS：数据公司按设备的物理分辨率进行统计，而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。
今年五月，国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。
其中排在第三的1125×2436（对应@2x的设计尺寸是750×1624）和前两者的占比仍有较大的差距。
那是不是随着时间的推移，1125×2436的机型占比会逐渐增大，并逐渐占据第一呢？
如果你也有同样的想法，恐怕又得失望了。
翻看5月份的iPhone增量数据，会发现一个有意思的情况：
在增量中，828×1792（对应iPhone 11）增速以51.9%遥遥领先第二名的1125×2436。
下面，看下的11月统计的iPhone存量数据：
828×1792已经从占比第四名上升到了第三名，
再看11月份的增量数据：
828×1792的增速不减反增，从5月份的51.9%增加到了最近的63.8%
如果不考虑的iPhone 12系列，828×1792有望接替Plus系列，成为市场占比最大的iPhone尺寸。
在828×1792的设备飞速增长的同时，1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%
过去设计师常用的设计师尺寸是750×1334，但随着iPhone进入全面屏时代，如果再把750×1334作为设计的基准尺寸显然已经不合时宜。
而目前常用的750×1624尺寸对应的机型（对应1125×2436在@2x下的尺寸）无论在存量市场中的占比，还是增量市场中的占比都少的可怜。
而新发售的iPhone 12系列中，也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款，采用全新的渲染像素和逻辑像素。
很难想象1125×2436这个尺寸的设备，还能和过去的750×1334尺寸一样，成为iPhone主流的分辨率尺寸……
设计基准尺寸的选择，除了要看设备的占有率，还要兼顾适配的成本。比如，当有大中小三种尺寸的设备需要设计时，优选中间尺寸作为基准尺寸。
以中间尺寸为基准，无论是适配到小尺寸、还是适配到大尺寸，界面的调整幅度都是最小的，偏差不会太大。
反之，如果选择小或大作为基准，或许页面适配到中间尺寸时感觉还行，但适配到另一侧相对极端的尺寸时，则容易出问题。
界面设计师所用的绘图基准尺寸并非一成不变。回看过去：
设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334，以及现在的750×1624，已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布，加上750×1624对应机型在市场中占比的低迷，我们可以重新思考在iPhone众多尺寸中，哪一款更适合作为设计的基准尺寸。
这里先不考虑设计师对尺寸的惯性依赖，只思考适配兼容性和市场占有率这两方面。适配兼容性，按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸（指逻辑像素）中选出位于中间的尺寸：
分别是 375x812pt 以及390x844pt，前者对应1125x2436px ，后者则对应1170x2532px，如果进一步将其转换成大家熟悉的@2x尺寸，则分别对应：750×1624和780×1688
在市场占有率层面，随着Apple逐渐停售之前的设备，新款iPhone的分辨率占领市场只是时间问题。而在新设备中，只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px（375x812pt，对应@2x下尺寸750x1624px）。如果按照此前的经验推算，iPhone 12（1170×2532）接替iPhone 11（828×1792）成为最热卖且占比最高的设备只是时间问题。
截止iPhone 12发布为止，显然 390x844pt （对应@2x下尺寸780x1688px）更适合作为今后的设计基准尺寸。
文章来源：优设 作者：海边来的设计师
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
复杂应用大多情况下是偏专业和B端的一些UI界面，它们大多出现在桌面端使用环境，并且终端用户类型多样，涉及流程、链条、业务也大多呈现出多变复杂的特征。这篇文章，来自UX设计领域的存在NNGroup，作者为凯特·卡普兰。
我们之前将「复杂应用」界定为特定专业领域当中，需要经过广泛培训之后使用的，有着非结构化目标、非线性工作流程的任何应用程序。这个概念可能听起来有点抽象，不过这么说你可能会 更容易理解：从科学研究到专业人员，诸如金融分析师，它们常用的那些专业软件应用。这类应用通常有着这些特点：
尽管不同的复杂应用之间差异很大，但是他们的共同点是，专业的从业人员对于这类工具有着极强的依赖性。
考虑到设计师和开发者在面对这类工具的时候的挑战，我梳理总结了 8 个复杂应用的设计原则和指南。
很多研究表明，对于复杂的应用和工具，用户更加青睐可以立刻上手开始使用而不受它复杂度影响的那类工具。
与大量的教程、文档、帮助和设置说明相比，能够立刻开始的任务和项目，对于用户有着莫大的吸引力。这种现象被称为「活跃用户悖论」。
虽然在专业领域当中，倚靠摸索和试错学习是不恰当也不安全的，但是一定程度的边做边学是必须的，因为不可能在培训和手册当中涵盖所有的使用场景。
所以，在设计的时候应该提供「跳过教程」的直接上手的偏好设置，同时进行相应的安全性设置，避免新手的莽撞操作导致损失。比如可以限制这个阶段的用户执行长流程多任务的操作，让控制面板实时显示操作结果或者预览结果，这样用户无需执行全部操作就可以知道大概的结果。
在 Salesforce 控制面板当中，就可以实时预览面板编辑的效果。
绝大多数用户都不是进阶的专家级用户，他们在绝大多数时候会使用基础但是效率没那么高的操作和执行方案。很多用户形成习惯之后，通常不会主动做出改变，而这在日积月累之后导致大量的时间浪费，效率低下。
值得一提的是，这个时候依赖冗长的文档和教程其实很难达成效果，更合理的方式是结合用户所处的上下文环境，通过界面工具提示的方式，适时地告知用户「有更方便的方法」。
通常，可以使用悬停提示，或者是弹出式工具提示来实现这一功能。
ArcMap 是一款地理信息系统类工具，它通常会通过上下文环境下的信息引导，来帮助用户了解技巧。
复杂的应用程序，通常会有很多功能是分散的而非线性的，不同的功能组合起来可以实现特定的功能。在这类工具当中，用户日常可能也不是很确切知道最终的目标是什么，而需要通过数据分析来逐步推进，同时，在知道确切目标的情况下，也应该可以遵循不同的路径灵活地达成目标。
设计师这些应用的时候，设计师应该避免使用固定、唯一、 僵化的实现路径，迫使用户必循严格按照某一固定路径来做事情。一方面，允许用户跳过某个步骤，或者回滚到更早的路径，另一方面，允许用户遵循不同的方式和路径来达成目标。
比如万事达卡的自助服务就可以通过交互式的图表来引导用户完成不同的任务。
复杂的任务，通常意味着它需要很多步骤，不同的环节，而在实际的应用场景中，某个分析步骤耗费几个小时甚至几天，都是有可能的。在高度复杂的现实生活中，某个步骤可能会换人接手，可能会因为硬件、 网络等问题而暂停甚至丢失，这也意味着「可追溯性」是很重要的。
所以，在这样的复杂应用当中，应该允许用户在使用过程中，可以便捷清晰地记录、保存、 导出内容和记录，允许用户中断，中断后可以恢复特定的任务。在任务进行过程中可以进行注释、保存相关的说明。
在决策建模软件TreeAge 当中，用户可以在分析和建模过程中进行开放式的注释，可以后续在底部快速访问这些笔记。
复杂的应用通常还会面临一个状况，就是工具本身的不足，用户需要在多个工作空间上使用工具和内容的时候，它需要具备切换的功能。对于不具备的功能，应用程序应该允许使用第三方的应用来作为补充。
比如当软件不支持某个操作的时候，应该允许用户从线上的其他数据库中获取并导出数据来使用，可以依托外部文档作为支持，允许用户在应用中做注释和评论。
减轻工作负担的一个要点，是尽量使用通用的API、接口和标准，尽量兼容行业标准软件，比如 Excel、Powerpoint ，尽量使用标准格式，等等。
微软的商业分析软件 PowerBI 就提供了标准化的导出和复制功能，非常方便
复杂应用通常旨在保持泛用性。使用场景多样，多种不同的功能，一家汽车生产厂家，可能会和蜜蜂养殖机构采用同样的工具和软件来监测机器故障。但是，这种泛用性的另外一面，就是混乱性。复杂的应用可能会同时兼顾到基础型的小白用户和进阶型的专家用户，而后者用到的功能很小概率会被基础用户用到。
所以，设计者需要在不降低功能性的情况下，基于应用场景、 用户需求来进行简化和优化，在保持功能完整易用的前提之下，降低复杂度和混乱度。
分阶段和层级展现就是一种降低混乱度但是不影响功能性的一种常见策略。当用户进行到特定任务、特定阶段、特等级别之后，再呈现特定功能，是有效的设计方法。
即使降低了混乱度，在复杂应用当中，信息量可能依然是过载的。通常，对于这种情况可以通过区分信息层级的主次来进行快速的区分，不过，从交互上来说，这可能依然不够。
对于诸如控制面板一样的界面，用户可能需要时刻查看面板上的信息，需要了解次级信息但是又不能离开界面，这就体现出主次信息之间的过渡呈现的重要性了。
一般而言，使用类似与悬停显示的方式，能够比较柔和地将次级信息呈现出来，允许用户查看详细的定量数据。下面这个案例当中就是，悬停显示更多次级信息。
复杂应用通常在界面上包含由大量的信息，而这个时候关键性的数据如果不在视觉上做突出显示，会被用户错过。通过视觉区分、提示警报的方式，让用户及时注意到，才有可能规避可能存在的问题。
值得注意的是，让关键信息和元素凸显的方式，并不一定非得是使用鲜艳的色彩和较粗的字体，简单的放大呈现，使用图形化的元素辅助提示，或者是提供足够的留白都可以达到目的，就像下面的案例一样：
复杂的应用多种多样，支持的服务和功能也千差万别，但是无论如何呈现，此类复杂应用的设计都是非常挑战设计师的设计功底的，需要设计师了解业务，了解用户，并且能够通过设计更好地提供服务。
文章来源：优设 作者：Kate Kaplan
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着网购成为了人们购买东西的第一选择，各大平台的竞争也逐渐转移到了提升用户体验感的身上。不管购买什么东西，最终都要经历下单这一流程。一个合理的下单流程，往往可以让消费者体验流畅，从而提升对平台的好感度，进而愿意长期的使用。
这是个非常值得研究的内容，最近我在优化商城下单流程的过程中，遇到了许多问题，通过不断地探究，也对整个模块有了更深刻的理解，希望通过总结能给大家带来一些启发。
下面将从目标的提出，结合案例的解说，并最终推到出结论的方式讲解。
作为漏斗模型的最终收口的购买步骤，是购买转化的关键。
但往往有些产品由于对流程没有系统深刻的理解，会有很多迷惑的操作，使得下单的流程相当混乱。我也曾经经历过类似的购物情景，经过一轮谜之操作后，我终于下完单了，但过后会担心刚才买的东西有没出错。
关于流程的优化我们遵循的原则是：先让流程合理了，再提高用户每步操作的效率。
怎么理解合理，必须解决以下两个问题，整个下单流程涉及到哪些步骤？步骤之间有什么逻辑关系？
我们需要洞悉到流程之间是如何串连，信息是如何层层递进并最终达成目的。因为只有每环节解决了对应的问题，流转到下一环节才能更省心。才能避免信息的反复确认，影响操作的效率甚至引发出错。
可以拆分成三个维度考量，第一是页面布局的重点突出的提效，第二是信息展示直观的提效；第三是交互操作简化的提效。清晰的页面信息传达能让用户清楚并了解自己的操作结果，并快速做出决策。
下单流程按需要提交的信息进行拆分，一般下单需要先确定商品（一切影响商品价格的因素的确定，如规格）；其次是订单信息的确认（不影响商品价格，是订单层面信息的确认，如收货人，备注等），而后是订单支付，支付方式的确认。
最后是订单进度的跟踪。这里列出的每一步前提都是上一步内容的确定。只有这样才能做到环环相扣，并且信息流转。
你是否遇到过在逛商城时看到某个服务，想购买时，进入的详情页却没有价格，然后需要你点击咨询客服，打开了一个咨询窗口
卖东西不标价，你卖个寂寞吗？
作为用户的我难免会有浪费老子时间的负面情绪出来，撇开一些特殊情况说，一个详情最重要的两个要素是商品信息和商品价格。因为了解商品的目的是购买，购买的决策需要价格的支撑。
这是一对不可分离的组合，没有价格的商品陈列和没有目标指向的价格都是没有意义的。
那么总结一下：商品详情必备的两个信息：
满足了必备元素展示后，我们还要考虑元素的放置位置，首先是突出重要的元素，其次是浏览顺序符合用户场景。这样才能真正做到提高下单效率，我们来看看下面这个例子:
京东的商品详情作为购物电商商品详情的代表来说一下，可以看到视觉浏览路径是非常流畅的，明确的实觉引导和操作指引，先看价格，再选规格，而后点击购买。
权大师的商品详情虽然页面中这重要元素都非常醒目，但它却没有让用户的决策提效，我猜测费用总计为什么放在这个位置，是希望用户直观看到选择不同的服务项目对应的收费的变化。
可是也忽略了金额作为重要的元素，当用户进入详情需要第一样看到，导致浏览路径有点绕圈圈。
携程的详情可以说是权大师的一个优化，同样的考虑，头部不仅展示了重要的价格和商品信息，给到用户购买的预期。在规格选择后，预定按钮旁边还展示商品的总价。减少用户来回查看金额的不便。
在购物中，选择商品或者服务的规格是一个常见的操作流程，选择规格的目的有：
以上几个选项，根据不同的业务会有不一样的描述，不过可以概括两个内容，一是影响能不能买，二是能买的话不同规格的选择怎么影响商品价格。
图像化选项，比如颜色外形等规格有图像的描述就更加直观。如果换成文字的话，用户的生活经验会影响对文字解读的结果。
数值化选项，这样不需要选中再查看总价来判断金额的变动情况。很方便地不同选项的价格，方便对比然后选择。
通常门票或者酒店的规格选择会用上面这种方式展示，同样的道理，把不同项目的价格列出来，让项目之间的对比更直观。
下图的例子中参考身高这一项规格说一下，身高的规格本来就是有规律的，比如从矮到高，或者从高到矮。
如果我选择红色规格衣服，身高规格最后两项灰掉了，这时就算我不看具体身高规格是多少，也大概知道红色衣服身高最高的规格没货了。
这时，我想找一个有170cm身高的衣服，我就会不断切换颜色规格，用视线的余光去看什么时候170cm的规格亮起来。规格的展示通过位置和内容的支撑，能让用户更快速找到变化的差异。
不影响商品价格，是订单层面信息的确认，如收货人、备注等。
第一步说的是商品信息的确认，这一步是订单信息的确认，这两个维度怎么理解呢？
举个例子：比如你到商场买东西，你首选是挑选好要买的商品放到购物篮里，再到结算台支付。
这时候你是有个比较清晰购物列表在脑海中的，因为在挑选时候已经经过判断，我拿了一个薄荷味的牙膏，还拿了一个潘婷的洗发水。现在只需要把这些给到收银员，她再确认一次就可以了。
但试想如果在你的结算的时候，有个小孩把你购物篮的东西搅乱了，放了一些别的商品或者拿走了其中的一些商品，你在收银台这里就会变得十分混乱。我又得重新确认一下自己要买的东西是什么。
订单的确认是建立在商品的确认上的，而且步骤之间本来就存在了递进的关系。先确认能不能买，再考虑能买的话收货人等订单的信息。在这一步，确认的信息尽量不影响商品的单价。
淘宝这个例子的话，订单确认的页面需要确认收货人信息、数量、配送方式、运费险等，这几个元素都不影响商品单价的，都是订单层面的信息确认。这就符合前面所说的，页面信息层层递进，减少相同信息反复确认的原则。
飞猪买门票这个流程中，从详情页到规格选择到订单确认，门票类型始终可以选择，到最后填写订单了，还是可以选择不同的票种。
这操作有点迷惑，前面都告诉我了当前选择了成人票，到最后还告诉我，你还可以选择要一张学生票噢。最后确认下单信息要把商品信息再确认一次，这就是影响下单效率的表现。
支付的确认也有两个重要的元素，金额和支付方式的选择。
但也有的商城也会做成下面右图，在订单确认页面把支付方式也一并选择了。
表面上简化了步骤，但由于不同步骤确认的突出的信息是不一样的，如果我选择支付，那在支付前我必定会关注金额。所以右图这样就没法让突出重要信息，需要费劲地找一下金额是多少。
订单的详情页里包含的信息有：商品的信息、订单的信息、支付的信息、订单进度的信息。这个环节，订单的进度信息无疑是重点。
对信息展示优先级排序为：订单进度信息 > 商品信息 > 支付信息 > 订单信息，淘宝的订单详情按重要程度自上而下排列：
有的商城甚至会把一些权重低的信息收起来，如订单信息、支付信息。想查看时候可以点击查看更多信息，这样做的好处是能让界面整体更清爽，降低页面的复杂程度，那么对重点信息的抓取就更快速了。
对订单办理的进度展示优化，我认为淘宝可以说是个经典的案例：
以上改动都是让订单进度掌控的体感更加丰满的过程：
以上进度展示的关键点可以概括为：当前进度、整体流程、完成的预期。有了以上三点，用户对于整个进度的才能有一个清晰的把握。
在订单流程设计各环节中，如果我们明白每一步的操作的目的，提炼出关键点。那在优化中就能更加得心应手。如果发现本文有什么逻辑的错误，欢迎大家指正，一起进步。
下面附上本文的知识目录：
文章来源：人人都是产品经理 作者：小圈学产品
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Design project的第三个特点是根据反馈快速迭代。我们的第一个想法是设计一个暑期实习计划，鼓励EPAPA学生到心仪的企业做一个简单的实习（即使是打杂也无不可），由学校和企业合作提供培训和导师，旨在帮助学生在进入大学之前就对感兴趣的职业有第一手的认知，例如我们认为如果你亲眼看过谷歌的工程师工作，就会对成为工程师需要什么知识更加有谱。我们拿着这个方案到学校和老师、学生交流，收集他们的反馈，发现其中一个较大的问题：学生自己分析和提取信息的能力较弱，很难从两个月的实习期当中收获很多有用的信息，我们设想中的“从实干中学习”很难实现。
那我们最终设计的方案是什么呢？在这里卖个关子，如果大家感兴趣可以去看我们小组final presentation的内容：
这篇文章是对大部分产品都有的签到功能的一些总结。
说到签到，几乎是互联网产品的标配了，大家估计都很熟悉。但是签到功能并不是所有的APP都合适的，出现这个总结的原因就是小伙伴在工作中遇到问题的一个吐槽。
场景：小伙伴公司在做一个记账功能的APP，她发现原型中有个签到功能
小伙伴：为什么要做签到，对于我们的产品好像没啥用？
产品经理：吸引用户进入APP， 提升用户活跃度呀。
小伙伴：你用啥吸引用户，我们就一个记账APP？
产品经理：用户签到，我们就给积分，积分高了等级就高了，他可以给别人看看他多牛逼！
小伙伴陷入了久久的沉默，然后就来和我吐槽了，什么“天才”会因为一个记账APP的等级高觉得牛逼啊……
就像小伙伴公司做签到功能的目的是为了提高用户的活跃度，他的初衷我觉得是对的，但是没有考虑到产品本身适不适合做签到、以及给予用户的奖励是否能吸引用户。
所有抛开产品本身谈签到的行为都是耍流氓，我是个正经人！会结合一些市面上的产品来总结一下签到功能，其中包括为什么要做签到？什么产品适合做签到？签到有哪些方式和类型？做签到功能需要考虑哪些东西？若总结有不足之处大家友好交流呀。
什么是签到？在生活中第一个想到的是上班打卡、小时候上学点名。这些签到场景都有具体的时间限制、要按规定的方式进行登记并且伴随着未完成签到会有一定的“惩罚”。当签到功能被用到APP中时，APP中的签到通常是指产品通过一些奖励强化用户行为并促使用户打开APP进行浏览、打卡。用户为了得到奖励再次签到，达成闭环，产品用签到来提升用户活跃度和用户粘性，继而达到业务上的转化。
APP签到和现实签到的差别：1、APP中的签到扩宽时间维度（一天24小时都可以签到、并且还可以补签）；2、强化“奖励”只要你签到，我就给你奖励；3、弱化了“惩罚”，大部分APP对用户的签到都是给予奖励，个别APP也有惩罚机制，如早起打卡活动，如果未达到目标，用户参与活动的钱就会被其他完成目标的用户瓜分。
了解了什么是签到后，接下来就是看我们的产品适不适合做签到，并不是所有App都适合做签到的，适合做签到的产品通常都具有以下特点
当用户希望从你的产品获得实质利益或某种精神满足的时候，你的产品就适合做签到。比如内容、社区、电商、金融、游戏类型产品。
当用户认为你的产品是一个工具，那么就不适合做签到功能。如日历、天气、浏览器、翻译等（还有小伙伴公司正在做的记账APP），因为用户使用工具类产品是在有需求的时候打开并在短时间内完成操作，在没有需求的时候不会使用。
一般签到常用于高频服务，低频的工具型产品就不适合做签到。（有人肯定会想，微信也是高频次为什么没有签到，因为用户每天都会进行社交，好的社交产品不需要签到就有很高的活跃度。微信这样的产品并不需要签到功能，毕竟大家每天都会打开微信吧……增加签到就鸡肋了）
了解你的产品适不适合做“签到”后，接下来看看APP中，为什么要做签到，也就是签到的作用。能想到的有提高用户活跃度、培养用户习惯、汇集流量转化业务、拉新等等。接下来从用户和产品两个角度来看为什么要做签到。设计师在做设计前一定要先了解好做签到需求的目的！需要了解不同的目的相对应的设计的侧重点也是不同的。
签到有一定的作用但是小声逼逼：签到不能决定一个APP的死活，对产品有多大的作用，本质上还是要看产品的核心功能，要想靠签到救活一个APP，基本不可能（除非你是王多鱼）
1）促活：通过奖励来促使用户每天使用产品。培养用户的使用习惯。这个其实是大多数APP做签到的目的，也是衡量签到功能是否成功的重要指标；设计师在设计的时候，就要考虑奖励的样式呈现、签到的方式、激励点的设置、签到的提醒等。
2）留存：一般签到页面为了提高留存率，在设计上可以展示第二天或者近7天登录的奖励（例如很多游戏的签到页），会吸引想要奖励的用户再次登录。如果通过签到让用户养成了每日签到的习惯，那产品的留存率将提高；
3）拉新：通过签到来满足用户的技能成长记录与分享后得到他人的夸奖、认同的需求。从而刺激用户对外分享，让产品获得更多曝光，某一定程度上也能拉新。如朋友圈经常能看到keep用户的健身签到图、坚持背英语的签到图。
4）营收：让用户从签到转化达到营收是最重要的目的。现在很多产品的签到功能跟商城挂钩，给予奖励吸引用户购买商品，一定程度上能拉升营收。设计师在设计的时候，就要考虑优惠券、兑换的设计怎么结合到签到中，因为优惠券能促使用户下单、积分加现金能增加礼品、道具等的收入。
5）会员体系：签到有助于产品建立更加完善的会员积分系统，不同的会员等级，享受的待遇和优惠不一致。通过坚持打卡，来激励用户激活更高的会员等级。设计师在做签到页的时候就要考虑和会员等级怎么挂钩，引导用户。
6）品牌印象：这个目的就需要设计师在签到页增加品牌吉祥物或其他象征物，强化用户对产品的印象。
签到对用户而言，是因为能够用户获利，所以才会去签到，获利分为物质和精神两种。
1）物质奖励：即用户可以获得积分、兑换商品、优惠券、现金等（大部分有商城的APP常用的奖励）
2）精神奖励：即用户自己的情感满足（如keep打卡技能成长记录与分享后得到他人的夸奖、认同的需求）、以及签到获得不同的会员等级与用户权限、或者虚拟的奖章（如游戏勋章）、排行榜之类的。
在了解了我们的产品是否适合做签到后，接下来了解要把签到功能做好，需要从哪几个点入手？（另外，在做这篇总结的时候，有大佬的签到设计上了首推，大家可以结合大佬的设计一起看这个模块，食用效果更佳）
把签到功能加到APP里，在不影响主要功能使用的前提下，把签到功能入口做的越明显越好，这样才能在更新后让用户更加容易发现，并且让用户在每天签到时能够更加快捷，不会因为进入的路径过长或者过于复杂而让用户放弃
1）首页金刚区图标
这类的签到功能相对独立且内容强大，比较能吸引用户，有的签到就是常规入口，如：拼多多的现金签到、京东的领京豆、飞猪的领里程。放在首页的目的是为了曝光。
2）底部单独tab
这类型多见于生鲜、超市之类的APP，签到对其功能比较重要的产品。
3）首页右下角悬浮球
首页右下角的悬浮球是签到快捷入口，未签到情况下显示，签到完成则会消失（之前有遇到，没找到就不配图了）
悬浮球会遮挡一部分底部内容以及干扰用户操作。友好用户体验就是当用户向下滑动页面的时候悬浮入口就会消失或者收纳到页面右侧只露出一点，也就不会造成干扰的问题了。
4）个人中心的列表类、按钮类
这类是很多APP会采用的签到模块入口，与个人中心模块的其他列表的展现形式一致（图标+文字）
5）弹窗类提示
一般使用的App并不是太多，在进入APP时，就会跳弹窗，想引导用户去签到，因为这类形式容易造成用户不同程度的反感。（从我的弹窗总结就能看出大家多不喜欢弹窗了）
6）导航栏
签到在导航栏上进行展示的时候，用户是较为容易忽略导航栏上的签到功能的，所以设计师通常会做成金币、红包、礼物的形式并加上动画效果来用户的注意。
7）个人主页顶部小标签/小按钮
通常放置在用户名边上或者顶部，突出签到的功能
1）写死的界面（需要重新发版才能更改）
这种适合签到页面不复杂，不需要经常调整的
2）H5（可以在不发版的情况下进行替换）
适合经常改需求的产品，可以根据需求不断更替（如有些电商产品会根据节日做不同的签到样式）
1）自动签到
在APP中就是登录即签到，优点是用户很便捷签到成本低，缺点是放弃成本也随之变低，不利于习惯养成和形成有效转化。用户一般对自动签到的感知度较低，因为自动签到通常显示为：连续签到X天，获得XX积分。用户不能明确感知获利信息，如签到获取的积分能做什么，产品想要吸引用户长期签到很难。在设计的时候需要把签到结果反馈给用户又不能给用户形成过多的干扰。
游戏类的自动签到一登录就自动签到，并向用户展示签到得到的奖励，并且会展示多天的，吸引用户再次点击进入产品
2）手动签到
用户要主动去点击并获取奖励。手动签到在设计的时候，为了签到的效率，通常会把签到按钮放大处理，让用户可以快速找到签到入口并快速完成操作。通常会除了签到功能外，还会有签到说明、规则、以及引导用户进行转化模块。手动签到尽量让用户长时间停留更有利于用户停留和转化，大部分电商产品都是手动签到。手动签到缺点是不能一步完成，用户通常要付出操作成本。若签到层级太深，用户通常注意不到（所以需要在首页做快捷入口）
1）连续签到
需要用户在一段时间内连续完成签到不可间断，断签后需要重新开始的计算方式。连续签到我认为包含了每日签到所以不单独拆开说。连续签到通常会故意设计成单次签到的奖励不如连续签到的奖励多，连续签到所获得的奖励内容存在叠加与翻倍关系。每完成一个短周期，就可以获得一个大奖，增强新鲜感，刺激用户养成连续签到的习惯。但这样，一旦用户断签，带来的损失感也要比前一种大得多，用户不一定愿意重新开始，而是会彻底放弃。可以在设计中加个每日提醒功能和补签功能。
若产品打算使用连续签到的方式，就需要考虑断签的情况下的设计
A 用户断签就需要重新开始签到
B 提供补签，可以是用积分兑换、拉新，补签的具体方法可以很多具体可以和公司负责运营的小伙伴商量，但是要补签对用户来说一定要付出的成本小于补签后获利成本，用户才会完成补签动作。
2）累计签到
用户在在APP内达到规定次数即认为签到成功，可间断。断签后依旧计算总天数。用户每天签到可以获得当日奖励，并且只要保证周期内达到规定次数就可以获得额外奖励。亮点：由于能连续签到的用户实在太少，累积签到可以给用户有缓和度，给用户还能达到的心理暗示，会更容易让用户接受。
当产品要设置签到周期通常就是连续签到方式，常见的签到周期为5天、7天、21天、一个月。很多APP都会选择7天这个周期设置。选择7天，因为我们平时上班、上学都是以周为单位的，比较容易被用户习惯。
在签到周期的最后一天会设置一个激励点，设计师在设计的时候可以在第三天设置激励点，把2个小部分，因为我们在上班的过程中通常把周三做为一个节点，过了周三后，就好像马上周末了一样，开心！让用户在较短周期完成签到获得奖励，再通过小周期的叠加来培养用户签到习惯。激励点的设置可以和数据结合分析，看哪天最容易断签，就在那天设置奖励日，让用户看到奖励打开APP实现连续签到的目的。
签到的奖励反馈内容和产品希望培养的用户行为直接相关，根据产品提供给用户的奖励，签到可以分成以下几种常见类型：
1）物资激励签到
就是只要用户签到，就给用户物资奖励，奖励可以是优惠券、现金抵现、抽奖、兑换商品等，是大多数产品的签到手段，模式简单粗暴，大部分APP都是使用这种方式。这种签到激励往往耗时较长，且有一定的运营成本，奖励的价值往往都比较低。同时过程中缺乏新意，且只能满足用户较低层次的需求。
有个有意思的签到是网易云签到，虽然这个产品签到成功会有积分奖励，但是最吸引用户的是每次签到后，网易云会推荐一首歌以及一些歌曲评论，身边有坚持网易云签到的小伙伴基本是奔着这个奖励去的。
还有另一种物资激励，如早起计划这种类型的签到方式，是先让用户付出少量的资金，周期签到完成后可以瓜分奖金池里的资金。如果签到失败，你前面付出的资金就会被其他完成的小伙伴瓜分，这类签到由自愿参与，在设计的时候，要列出挑战成功奖励、失败的结果，利用用户“厌恶失去”的心理让用户更加容易坚持下去，并且只要参与这个计划，每天醒来第一件事，就是快打开我们的APP进行签到。
2）精神激励签到
这类签到，主要是利用等级、称号、曝光率、成就感、认同感等一些自我实现和尊重的需求来刺激用户使用。最典型的产品就是Keep的运动徽章，微博话题的签到热度排行、蚂蚁庄园等等，但对于获得奖励的门槛往往要求较高（例如：keep要运动目标才可以签到）。
3）体验驱动签到
这有的产品没有“签到”功能，但是产品本身自带签到，将“签到”作为产品的一种属性，使产品拥有了每天都需要被打开的原因，很好的提高了整个产品的活跃度。例如：网易蜗牛读书，登录即可领1小时免费时长就是这个产品的“签到功能”，吸引很多用户每天登录虽然没有签到功能，但是将其内化成了用户每天必须打开它的理由。做这种签到的前提是产品能够满足用户的某个需求，就像用户如果没有阅读需求，这个免费时长就毫无价值和吸引力了。
4）游戏化签到
很多平台为了凸显签到的差异化，增强吸引力，游戏化签到方式就应运而生了。相比普通的签到方式，游戏化包含了更加丰富的内容和场景，更容易让用户上瘾。对用户而言，也不会有任务般的强迫感，用户体验相对更好。非常建议小伙伴们可以研究下游戏化签到。
比较典型的就是种水果，用户签到达到一定周期后，平台给你送水果。支付宝的蚂蚁森林和养鸡就是非常成功的游戏化签到。比如我沉迷的养鸡，就是通过养鸡让小鸡产生爱心，每达到5颗爱心就可以让一个人得到救助，以这种公益的方式吸引用户使用支付宝（因为没饲料了，使用支付宝付款后就会产生饲料）和达到店铺赋能（还可以看店铺获得饲料）。
这个模块展示常见APP签到的几种样式
1）弹窗类
此类签到通常在一个页面内即可完成签到操作，无需跳转到其他页面，此类签到规则在游戏类app中也运用的较多，展示模式也跟游戏类app相似。
2）标签类
标签卡片式适合展示当天较为重要的奖励数据，通常在当天签到展示信息较多的时候使用。相比其它展示类型更加清晰明了。但不能看到隔天的奖励，刺激用户连续签到。
3）时间进度类
A 时间轴平铺类
时间轴平铺类通常可以很明显的看到时间进度，一般以时间轴进度条横向平铺的形式进行展示。周期通常为7天为并设置奖励日，培养用户签到习惯。在知乎看到一个问答帖：为什么现在很多男生不追女生了？下面有个高赞的回答：看不到进度条。同理，大部分人没能坚持签到，是因为看不到进度条。
B 日历平铺类
头部展示宣传运营信息。弹窗类上的日历展示会相对简洁，日历类跳转页通常在签到逻辑较为复杂的情况下使用，能够更好的呈现当月的签到情况。
4）勋章类
在运动健身类、游戏类App中运用较多，当直观看到奖章荣誉，对用户有较强的激励作用。
游戏形式有抓娃娃、地图闯关、浇水种树、建设小镇等
了解完签到的设计要点后，怎么运用到设计中？看两个典型的，一个是标准的签到的产品，一个是去除签到字样但有签到概念的产品
京东的签到瓜分京豆页面，将拉新、留存、促活、转化结合到一块。这一套下来，用户在参与这个活动时，保证了用户这23天每天会打开一次（如果漏签，用户会拉新补签）。
蚂蚁森林就是游戏化的方式展现出来，去除了“签到”字样，但是依旧达到签到功能的产品，用户的参与度和留存度都很高，
用户的典型路径为：
进入蚂蚁森林界面；
收取自己行为产生的能量（运动、支付、回收……）；
去好友的页面收取他们的能量，或者帮他们收取即将消失的能量；
积累到一定数量后，种下真实的树。获得证书
1、蚂蚁森林的签到形式是收取能量（或收取好友能量），能量是你前一天的运动、支付产生的
2、奖励是产品方替你种下一棵树并获得证书（这个是物资奖励+精神奖励）这是很强的精神奖励（看周围小伙伴沉迷于透能量，早上7点半定闹钟来偷我的能量就知道了）
3、签到周期，能量3天不收会消散，这形成了一个签到周期。奖励是种树，不同的树苗所需能量不一样，用户可以自行选择对其难度小的。能量种树并领取证书就是激励点的设置
4、可以收取他人能量形成社交联系（我下次也要定闹钟去偷他的能量！），也会进一步提升产品的活跃和留存。
这个总结了签到的定义、什么产品适合做签到、为什么要做签到以及做签到要注意哪些要点，签到确实不能决定一个产品生死，最终要看的还是产品本身的核心功能。但如果你用得好，虽不能雪中送炭，但一定可以锦上添花。希望小伙伴们在做签到功能的时候，能提供给大家清晰的认知和方法。可能存在一定的局限性。这个总结也断断续续写了两周，希望能对大家有帮助。
文章来源：站酷 作者：是阿三三呀
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
使用互联网产品过程中，会有很多因素造成操作错误或失误，导致无法顺利完成任务。因此产品的容错性设计是交互设计中的重要内容。
用户在实际使用互联网产品的过程中，会有很多因素造成操作错误或者失误，而导致无法顺利完成任务，或者完成任务的效率很低。产品自身所具备的容错能力对于各种使用场景的有效覆盖，可以提升产品纠错效率、降低用户操作出错概率，因此产品的容错性设计是交互设计中的重要内容，也是提升用户体验不可忽视的一个环节。
容错性概念源于计算机领域，容错性是指计算机系统在发生故障的情况下，依然能够保证系统正常运行。计算机这种保证系统正常运行的能力也被称为容错能力。
本篇内容我们讨论的是容错性在互联网产品领域的内涵和意义。延伸到互联网产品设计领域，容错性的范畴更为宽泛，涉及产品对错误操作承载能力的多个方面，包括：如何降低用户操作的出错率，如何及时提供纠错帮助，以及如何给用户提供解决方案等内容。
「 即便你的产品90％的时间都运行良好，但是如果在用户需要帮助时置之不理，他们是不会忘记这一点的。——《Getting Real》」
一个产品设计的无论多么简单，用户都难免在使用过程中因为各种原因而犯错。互联网产品面向的用户群体是复杂多样化，教育背景的不同，行为习惯的差异，复杂的使用场景，都会使得用户的真实操作相比产品设计之初的预期有一定出入。此外，一些产品本身存在的因素，例如产品路径复杂，逻辑不畅等，也有可能造成用户无法顺利完成任务，亦或是完成任务的效率低，出错率高。产品在遇到错误如不能够及时纠错帮用户挽回损失，会给用户带来不好的用户体验，也是产品的一种设计缺陷。因此设计师应具有良好的容错性设计思维，尽量避免用户错误操作的出现，当用户出现错误操作时，帮助用户识别、诊断，及时反馈问题所在，并提出有效的解决方案，帮助用户快速从错误中恢复。最终达到使产品更可用、更易用的目的，给用户带来更优的用户体验，使用户与产品的交流更加顺畅。
互联网产品的容错设计可从用户使用产品的三个阶段来考虑，即操作前、操作中、操作后。可大致归纳为以下几方面内容：首先在用户操作前给予正确有效的引导；其次在重要的操作步骤给予用户及时有效的提示；当用户发生操作错误或失误时及时为用户纠错并提供有效的解决方案；最后帮助用户在错误发生后迅速回到正确状态。
在用户开始任务操作前给出用户正确有效的提示，可减少错误操作的发生。需要注意的是，引导应尽量醒目且简单易理解，确保能引起用户注意，并且在用户注意到后快速获取信息，到有效的防错帮助。
产品常见的引导主要针对两种情况。第一种是针对于新手用户的功能介绍，不同于曾使用过产品的用户或者高级用户，新用户首次使用产品的过程其实是一个学习的过程，此时需要让用户快速了解产品核心功能及主要的操作，帮助他们更快地上手。
例如下图导航APP新版本的新手引导【如图1】，在用户首次启动产品时，产品用趣味性的图文形式给用户展示了打车、公交乘车、实时公交路线等功能的信息介绍，能够让新用户快速熟悉核心功能，并在正式使用产品的过程中提升效率，降低出错率。
图1-导航APP新手引导
第二种情况是针对产品上线的新功能或者较大的功能变动而设计的初次引导，产品的功能改动可能会是用户产生不同程度的陌生感，适当的提示可帮助用户快速熟悉新功能点或页面信息的调整。初次引导常见的方式有很多种，包括：遮罩式引导、弹窗式引导、气泡、浮层式引导等等。
例如版本升级后的音乐APP【如图2】，首页使用情感化图文设计加遮罩式的引导，可以有效将注意力集中到特定功能上，用户进入页面第一时间就注意到，确保了信息传达的有效性。
图2-新版首页的遮罩引导
以上列举的内容属于狭义层面的引导，用户尚处在被动接受引导的学习阶段，在此阶段引导的目的是提醒和防错。从广义的层面来讲，我们可将对用户的引导理解为”消减信息的不对称性“，当用户面对可影响其决策的因素时，给予用户关键性的信息提示和说明，可以促使用户做出正确的决策。
针对需要加工时间的特殊品类，如烘焙蛋糕，京东到家在用户决策的关键页面和步骤展示时效提醒【如图3】，避免用户在完成订单信息填写或结算后才发现商品的配送时间超出用户的期望，会给用户带来极为不好的购物体验。
图3-京东到家页面中的时效提醒
当用户进行一些如修改、删除、覆盖等不可逆操作时，系统需要在用户做出这类操作指令后告知其产生的后果，让用户自主决策是否选择继续执行。在此阶段的提示需要注意从以下两个角度考虑：一是提示的方式，二是提示的时机。
在用户完成任务的操作路径中，大部分产品首先会选择以弹框的形式对用户进行信息提示。弹框可以分为模态弹框和非模态弹框两种大的类型【如图4】，主要区别在于是否强制用户进行交互操作。如何选择合适的弹框形式对用户进行提示，要依据提示信息的优先级和视觉权重的大小，同时要清楚不同类型的弹框适合的场景。
图4-弹框分类
模态弹窗是较重的提示方式，在用户进行重要且有风险的操作时可优先考虑使用。其优点是可以快速获取用户的视觉焦点，缺点是会打断用户当前的操作流程，用户需要进行如单击“确定”、“取消”、“关闭”按钮等操作指令将该对话框关闭后才可继续操作。
而非模态弹框属于轻量级的提示方式，其优点是不强制用户进行交互操作，或者用户依然可以在页面进行其他操作。弹框出现一段时间后会自动消失，所以但不利于承载过多文字信息。非模态弹框对用户造成的干扰较小，但也因此容易被用户忽视。
给用户的信息提示还有一点不可忽视的是反馈时机，应确保用户在关键的操作步骤得到及时的反馈，因为滞后的反馈可能会导致用户因为某一个环节的错误操作不得不重复操作一遍之前的流程，或者要修改关的一系列信息。
【如图5】中的登录页面，用户登录需要依次输入手机号、密码、图片验证码，但如果用户输错了密码并不能马上得到反馈，依然可以继续填写验证码，只有在全部信息填写完之后点击登录，系统才会校验密码，并提示用户密码错误重新确认，用户需要再次输入密码以及识别并输入一次验证码。但如果系统验证密码可以提前到输入图片验证码的步骤之前，在用户在得到密码填写错误提示后则可以停止操作后面的步骤，马上修改密码。
图5-登录页面中的提示滞后
同时，尽量为用户提供相应的解决方案，这样可以提升纠错信息有效性。BOSS直聘会因为手机储存空间不足给用户报错，并且会告知用户如何去管理储存空间，以解决此问题【如图7】。
图6-多行表单报错页面
在产品设计中，为降低操作的出错率，限制也是一种方式。在可能造成错误操作的入口适当设置操作障碍或者禁止操作，增加不可逆操作的难度，可以有效规避错误操作发生风险、减少误操作概率。例如常见的页面信息置灰、按钮置灰的设计，可以有效避免用户的误操作。
此外通过让控件、动作、选项等变得可见，尽可能减少用户记忆负担，把需要记忆的内容作为辅助信息提供给用户，或帮助用户自动完成信息填写也可以帮助用户快捷地完成既定任务，降低出错率。例如【如图8】在信息填写的步骤，可在用户已复制的内容和上传的图片中自动识别姓名、电话、地址等内容，并在用户确认后自动帮用户填写对应信息，为用户大大节省时间和记忆成本，快捷地完成既定任务，降低出错率。
在用户执行操作后，应尽可能的为用户保留已操作的信息，以便在发生错误或失误后可撤销之前的操作。针对一些流程较为复杂的操作任务，记录用户在每一步骤的操作信息，让用户可以从出错的步骤上及时恢复到正确的流程上，或恢复到距离错误操作最近的步骤，可有效的帮用户挽回失误。例如很多图片编辑的APP都支持用户撤销当前的操作，在用户对照片进行多编辑后页面上会有回到上一步和下一步操作的按钮，可让用户有机会恢复到上一步操作结果上。
图9-图片编辑页面顶部切换上一步和下一步的操作按钮
以上是关于互联网产品中容错设计的概念、重要性以及设计方法的一些阐述和思考。在产品设计的实际应用的中，可以模拟使用场景，对目标用户使用产品的真实操作进行行为观察，分析对比产品设计的操作路径与用户真实操作的差别，发现并收集用户可能发生错误或失误操作的关键步骤，验证产品的容错能力是否能达到有效覆盖。同时，也要通过产品数据的对比分析得出用户操作错误及失误的真实原因，指导并提升产品容错能力的设计优化，进而不断提升产品的可用性和易用性。
文章来源：站酷 作者：DXC设计体验中心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
黑川雅之，世界著名工业设计师，将建筑的思维融入工业设计中，并开创东方日式美学和西方工业设计思维融合的先河，甚至对后来原研哉和深泽直人的创作都有重要的影响。黑川雅之被称为日本设计圈的达芬奇，作为日本建筑和工业造型设计界的代表人物，他个人本身就像是一部活的工业文明发展史。
说黑川雅之是日本战后将日本传统文化和西方现在工业设计完美结合的第一代设计师一点也不夸张。
在工业设计的世界里，黑川雅之将日式禅意美学与西方工业设计世界注重完整和功能性做了完美的融合。从他的工业设计中都可以看出来对空间和时间的反思和理解。
黑川雅之老师提倡设计应该关注通感，而不该只是注重外在的表象和造型。所以，黑川老师强调在视觉设计之余，要更加关注设计对象对其余感官的刺激，尤其是触觉。
代表作赏析——
结合传统的手工艺与现代感的设计，最有代表性的作品系列是Irony铸铁壶系列。沙模铸铁本身记录了铁的演变过程，在铁的表面能够清晰地看到这一由温度和时间共同留下的痕迹，驱散人们印象中光滑金属表面的冷质和距离感，金属表面也可以被打造得温润自然，既粗糙又美丽。
GOM系列
上世纪70年代是塑料和金属的全盛时期，也是注重视觉美感的年代，而GOM第一次以“材料”这个关键词登场，对于黑川来说带有向现代主义挑衅的意味。在他看来，如果说现代设计是日耳曼的理性审美意识和基督教价值观下白皙光亮的形象，而橡胶吸光的、黯黑的表面含有危险和不安的成分，黑色暗影有坏的意味，似乎是对明快现代设计的一种对抗。
PLPL餐具系列
在西方培养了盘子文化，在日本则演变为了碗的文化。 设计最重要的是通过款式、材料及材料的原始意义，将该物品周围的独特韵味表现出来。设计韵味，从而在人的内心深处引起情感上的共鸣。
黑川雅之说——
含而不露
日本设计讲求意境，不需要表达得太多，其余的要留给观赏和使用者以想象的空间。强化触感可以让材料当主角，款式的简单给视觉上禅意之美。
返璞归真
比起工业时代大规模生产语境下“追求体验”的产品，日本设计更加关注对“留白和空”的运用。不刻意去追求完美，天然的情景下或许存在杂质、存在结节、存在伤疤，但不完美本身也是一种完美，自然的哲理本身也包含着宇宙万物制衡的道理。
关注偶然
不是什么事情都会在计划下发生，人生充满了偶然和不确定性，承认并顺应偶然的存在才能迸发出无限的可能，设计也是一样。就好像在制造铸铁壶的过程中，由于不可控的温度和时间的作用，自然而随机地形成大大小小的气孔，这是偶然之力造就的美。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计思维（Design Thinking）是通过提出有意义的创意和想法，来解决特定人群的实际问题。设计思维可以帮助各个专业背景的人通过创新的解决方案解决问题。在“设计思维”在被不同的学者提出之后，IDEO是第一家将设计思维应用于商业问题的解决之中。IDEO的创始人，David Kelley，后来又在美国斯坦福大学创建了著名的D.School，斯坦福设计学院。
斯坦福设计学院将设计思维分成5大步骤：“Empathy同理心思考”、“Define需求定义”、“Ideate创意构思”、“Prototype原型实现”、“Test实际测试”。下面具体阐述。
第1步：移情／同理心
移情就是对他人的情感或情绪感同身受的能力。
第一步的目的是进行用户研究，从而了解人们真正关心的东西，我们需要真正了解他们的处境，比较常用的方法是用户访谈。
举个例子，如果你想帮助老年人进行设计，你可能会发现他们行动能力下降，但是他们想保持走动的能力。 在和他们进行访谈的过程中，他们可能会与你分享他们实现目标的不同方法。 在访谈后期可以进行深入挖掘，寻找个人故事或比较极端的场景。 理想情况下，你可以与多个访谈者人重做此过程。
当然用户研究的方法不仅于此，还可以：
·进行民意调查或组件焦点小组进行调查。
·勤发电子邮件，了解受众对当前活动的反馈。
·统计数据、视觉跟踪软件也能派上大用场。
·嵌入代码，观察设计元素对交互的影响。
·通过社交网络、亲身交流对交互效果进行监控。
·对你的受众进行群体划分，了解不同群体对相似的产品、品牌或设计的反应。
第2步：定义问题
通过访谈，你现在可以了解人们在特定活动中实现的实际需求。 一种方法是对受访者在谈论他们的问题时提到的动词或活动进行重点分析：比如他们会说，他们喜欢去散步，结识老朋友喝茶，或者在街角商店购物。 通过深入分析，透过表面你可能会意识到，这不是老年人喜欢外出，而是他们希望彼此保持联系。 分析后，制定一个问题陈述：“有些老人害怕孤独。 希望保持联系。
第3步：创意
现在只关注问题陈述并提出解决问题的想法。 重点不在于获得一个完美的想法，而是要想出尽可能多的想法，比如针对我们的例子，我们可以提出许多想法：独特的虚拟现实体验，高级友好悬停板或改装的手推车。 不管它是什么，请画出你的最佳想法，并将它们展示给你正在尝试提供帮助的人，这样你才能得到他们的反馈。
第4步：原型制作
现在花一点时间思考一下你从对话中了解到的不同想法。 问问自己，你的想法如何适应人们的实际生活。 你的解决方案可能是一个新想法和已经被使用的组合。 然后连接点，勾勒出最终的解决方案，并建立一个真正的原型，以进行测试。
第5步：测试
现在寻找实际用户测试你的原型。 如果人们不喜欢它，要敢于接受意见，关键是要了解哪些是有效的，哪些没有，所以任何反馈都很好。 然后回到理念或原型，并运用你的技能。 重复这个过程直到你有一个能够解决实际问题的原型。
第6步：重复以上步骤进行迭代
反馈——原型——测试——反馈——原型.......
荷兰埃因霍芬理工大学工业设计系博士在读
公众号：“用设计做研究”
知乎专栏：“用设计，做研究”
设计与研究/工业设计/荷兰留学 原创文章发布
原创：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfaces》，这篇文章透过 Medium 平台，开始在各个设计师社区当中发酵，随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。
事实上，也确实有很多产品和 UI 界面跟进了这种设计风格。包括三星在内的很多品牌甚至会使用这种风格来制作宣传视频，油管主播 MKBHD 也在自己的视频中使用到了这种风格：
从美学价值上来说，新拟物化足够现代，看起来也颇为时尚，科技感也很足，不过在在实际的应用上，新拟物化本身确实不算是一种系统全面的设计风格，因为在很多具体的 UI 元素上，是难以保证可用性和易用性的。
在需要体现出视觉纵深（Z轴方向的高程、高度）的地方，新拟物化的 UI 元素很难做到显著，而这也使得用户很难立刻马上意识到「这是一个可交互的元素」：
此外，彩云还梳理了新拟物化可以应用的范畴和场景，可以说非常贴心了。不过，这不是今天要说的重点。
Michal Malewicz，对，就是去年年底让我们注意到新拟物化风格的这个小哥，他又搞事情了：他在油管和 Medium 上又预测了可能会流行的新设计风格：Glassmorphism。
显而易见，Glassmorphism 这个词是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，我们姑且将其称之为「玻璃拟物化设计」。
Malewicz 小哥对于这种风格特征归结为4点：
简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。
如果你和经常翻看 Dribbble 或者 Behance ，你会注意到有很多设计师在有意识地采用「玻璃拟物化」美学的设计。
比如这是 Figma 团队的设计师 Rogie 所设计的小图标
大家着迷于这种风格到底原因何在？
1、愉悦感
首先，当然是视觉愉悦感。
使用「玻璃拟物化」来设计的界面，由于毛玻璃的通透性，在有多个控件的情况下，呈现出一种独特的「虚实结合」的美感。
2、层次感
来自 Paperpillar 团队的 Ghani Pradita 设计的 UI 控件
用户可以很清晰地感知到多个不同的层次，看不清楚但是可以透过「玻璃」的「背景层」，创造朦胧效果的「玻璃层」，前景的UI控件，这已经比原有的 UI 界面多了一层，当然，实际上如果你用的巧妙，可以让层次更多但是协调地存在。
3、呈现语境
这是设计师 Ilham Maulana 为 Plainthing Studio 团队所设计的网页
有些东西应该是不言自明的。比如「我在哪」「我是从哪里来的」这种事情，可以透过「玻璃」看到的背景层就能够很好地暗示出此刻的位置。
4、微妙高级
设计师 Ghulam Rasool 设计的 UI 范例
经过「玻璃层」处理之后的背景显得非常柔和，无论是动态还是静态的都不会影响前景元素的呈现。同时，位于前景的文本、色彩、UI 控件依然可以保证良好的可读性。
在设计中间的「玻璃层」的时候，可能需要你控制好这个「微妙」的程度。不过不论怎样，这种呈现方式都非常的雅致，甚至有那么一丝「诗意」存在。
那么，这种设计风格到底是如何被塑造出来的？如果要追根溯源，「玻璃拟物化」到底是从哪里来的？
老实说，玻璃拟物化，Glassmorphism，追根溯源还是在苹果头上。
我之前在《Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学》这篇文章当中，曾详细回顾了设计师 Cordell Ratzlaff 是在怎样的背景之下，发掘并延展出了苹果的整套 Aqua 视觉美学：
这种对于光影的追求也促使老竞争对手微软做出了改变，很难说几年后微软在Windows Vista 上所推行的「Aero」（光）视觉风格不是从「Aqua」上衍生出来的：
而「Aero」这种视觉风格当中，就使用了非常引人瞩目的玻璃的质感，只不过阴影的设计毫无疑问「参考学习」了同时期 Mac OS X 当中相对明显的黑色投影。
只是这种设计风格经历了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用实验性的设计得到了青睐，并逐渐普及到整个微软系产品，甚至因此牺牲了同时期的社交手机产品 Kin：
值得注意的是，在 Kin 系列的界面当中，「玻璃」式的半透明元素是存在的，并且很明显是延续自「Aero」美学，只是受限于屏幕分辨率（320×240 px，320×480 px），很难呈现出更多细节。
随后，Windows Phone 诞生，Windows 8 问世，包豪斯十足的 Metro 视觉风格成为微软的选择。
不过在此过程中，还有一些更重要的事情：Android 和 iOS 全面拥护扁平化设计。全新的 iOS 系统当中，全新的通知系统会使用半透明材质，用来暗示用户当前所处的环境：
这种对于毛玻璃材质的选择，很大程度上和时任设计高级副总裁的乔纳森艾维分不开——这是一个对于材质、场景、暗喻有着清晰认知和感知力的工业设计大师，而这一点也体现在他为 iOS 7 所制作的设计语言的介绍视频当中。至于乔纳森对于玻璃材质的迷恋我们可以回头在聊。
值得一提的是，在 移动端 UI 界面当中，成体系地使用「玻璃」的隐喻，是从 iOS 7 开始的。但是 iOS 的设计美学是一个更加庞大的东西，真正的「文艺复兴」应该是在 Windows 10。
之所以说是文艺复兴，很大程度上是因为微软设计团队在2016年的时候开始构建的 Fluent Design 这套设计美学体系，而它所使用的核心设计隐喻是「Acrylic」，也就是亚克力，是从「Aero」继承而来。
实际上，最初的 Windows 10 更多的是在设计体系和交互上花心思，「Acrylic」其实是在发布之后很久，大概2017 年的某次重要更新中加入的「新材质」。
相比于 Windows Vista/7 时代的 「Aero」，「Acrylic」更加具体，量化，功能性更强，美学上更加优雅，而在具体的实施上，微软的 Fluent Design 和如今的「玻璃拟物化」更加接近，而近年来很多接近「玻璃拟物化」的设计，也和这种设计美学架构近似。
微软的 Fluent Design 当中，背景和前景之间的「Acrylic」层，其实是由5个部分构成：
当然，使用这么多手段这也是尽可能让最终的色调尽可能地在前景的 UI 当中，显得自然不突兀。如果你想了解更多，可以看这里：
虽然 Fluent Design 并没有如同最初大家所期待的一样，像 Material Design 或者苹果的 HIG 那样成为一种极为主流、广泛应用的设计系统，但是它随着 Windows 10 在世界范围内的普及而始终潜移默化地影响着整个设计领域。
一方面，在的 Windows 10 20H2 版本当中，从开始菜单到具体的 UI 界面当中，彻底将 Windows 8 时代 Metro 风格去掉了，扎眼的动态磁贴都用上了 Fluent Design 风格的毛玻璃效果：
另外一边，的 macOS Big Sur 也在整个 UI 界面当中大规模使用了接近「玻璃拟物化」的半透明毛玻璃视觉效果，在系统自带的 APP 当中尤其显著：
而值得一提的是，macOS Big Sur 和当下的 iOS 14 在视觉美学上也保持着高度的一致，尤其是在系统的设计美学逻辑上是统一的：
这种主流操作系统的背书，「玻璃拟物化」的进一步推行和普及，无疑有着重要的影响。相比于看起来高级但是炫技多于实用性的「新拟物化」，「玻璃拟物化」这种风格在各大操作系统的践行和验证之下，实用性更强，视觉美学上也得到目前的操作系统的验证。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我们此刻所讨论的「玻璃拟物化」在视觉效果上无疑是更加激进、强化的。
设计师 Malewicz 在他的文章当中对于这种设计风格有一个非常直观的总结：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计行业里几乎没有什么是保持不变的，如果有，那就应该是“坚持创新”这四个字，很多设计师觉得自己没有亮眼的作品，或者老被客户说设计没新意，就是因为缺乏创造力，缺乏坚持创新的态度。所以，葱爷今天给大家分享一波作品，看看人家是怎么打破常规、做出新意的。
注:文中图片整理于网络,如有侵权,请联系删除。
蓝蓝设计的小编 http://www.lanlanwork.com