页面 用户 信息 在一个普通 B 端产品（以浏览器为载体）的页面中，相信很多产品设计师都有类似的经历，这个页面是要一直沿面包屑下沉，或者像 C 端产品一样无限返回，还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。信息结构的设计过程中，每一个功能模块是经过深思熟虑做好定义的，如果想让用户的任务流程顺畅、有所提效，那么信息架构的导航必须要发挥作用，也就是说用户需要去记住或者被“教育”每个模块的内容有什么。更多B端干货：8000字干货！B端交互设计师如何进行页面设计？前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。阅读文章 > 一、为什么要跳转1. 结构扁平化，减轻心理负担一次测试平台项目迭代中，发现旧有版本的面包屑层级特别深，最多可有 5 级，而且是详情页面与新建页面糅合在了一起，作为项目流程中的一个环节，不应该出现这种情况。于是调研了市面上能看到 B 端产品，腾讯云、阿里云和华为云等逐渐弱化了面包屑导航的使用，页面层级一般不会超过 3 级，华为云和腾讯云已经取消了面包屑的使用，阿里云虽然保留了面包屑导航，但是二级页面面包屑和返回同时存在，信息层级上也已经弱化了面包屑对信息层级的延伸。在一次任务流程中，如果信息层级很深，意味着用户会深入到更多的页面，进而偏离主流程，同时需要接纳的更多信息量，额外增加的信息负担会给用户的心理造成压力，而且还会给产品扣上信息沉重的帽子。对于主流程，模块提炼出的信息已经能够满足对用户对该模块的需求，如果仍有想了解颗粒度更小信息的需求，那么可以通过友好链接跳转到信息的源始位置查看，而不是在当前页面与主流程同级继续下沉。2. 增强记忆点，提高效率在产品设计之初，每个一级模块就已经做好了定位，比如腾讯云的私有网络，包含了子网和路由表，如果用户在私用网络的详情页能继续打开子网的详情信息，那么私有网络的定位就变成了私有网络的信息+子网信息，进而削弱子网模块的功能性，对用户而言，会有多处可以查看子网信息，这会模糊用户对产品结构的清晰认知。根据席克定律，下次信息查看时，面临众多的选择，任务效率是变低了的。另外，对于需要信息对比的场景，新开页面可以满足多种同类数据的对比需求。那么如果像腾讯云或者阿里云这样，新开 tabs，直接跳到子网模块的页面，这会暗示用户，这个功能信息点不属于私有网络，进而会强化子网模块的定位，也会凸显私有网络的主要流程。3. 关于用户习惯① 对于国内浏览器的用户国内的用户对百度等搜索浏览器并不陌生，并且长时间的使用已经对页面的跳转有了一定的预期和习惯。通过友好链接跳转到相应的页面，点击 tabs 回到搜索界面。同样借助浏览器为载体的产品面对同一个用户群体，其实不需要太多的再教育。另外，如果要处理或浏览的信息量很少，弹窗或者抽屉就可以即时获取，这时候就不需要跳转查看。② 公司内部的用户当然，具体的产品还需要考虑聚焦的用户人群，调研观察当前产品的用户习惯是怎么样的。如果是与其他平台或设计方向是有差异的，就要谨慎使用跳转方式变更，总结当前的用户习惯，通过引导或者多次迭代，统一使用正确的跳转方式。二、应用场景什么场景适合1. 平台 A 跳转到平台 B平台 A 中的一个流程中有平台 B 的信息，如果想点击查看具体信息，需要新开 Tabs 网页。2. 同一个平台内，当前模块流程下查看/编辑其他模块的内容，需要跳转新开 Tabs。跳转新开页面，如果信息的承载方式本身就是页面，那么跳转之后查看直接展示原来的页面就可以。如果是弹窗或者抽屉，有三种展示方式：当前页面打开弹窗或者抽屉新 tabs 回到原来的界面，打开弹窗或抽屉在 coding 的页面中，如果在一个抽屉中打开另外一个子工作项，回到原来页面后，详情信息还是以抽屉展示。3. 新 tabs 打开具体信息，不过原来的弹窗或者抽屉信息被铺在了页面中。当前抽屉中打开另外一个模块的抽屉信息时，新开页面的形式变成了页面，没有了返回等信息，页面中的信息平铺，引导用户看完信息之后，关闭当前页面。另外，这种展示方式还与权限有关系，方便信息在不同角色之间流转。三、特殊场景当然，上述的结论并不是市面所有产品的一致方式，通过体验还发现了以下不同的方式，以当前页面所处的场景为维度解释。1. 信息为当前模块流程的一部分在产品层面该功能信息是属于当面模块定位的，不适合再打开 tabs。2. 工作台/概览类的信息这关于工作台和概览类功能的定位问题，大部分的产品都将工作台定位成任务状态的中转站，用来做跳转分发使用，因此从工作台点击跳转到具体的任务模块，可以直接在当前页面跳到具体的任务页面。不过对于一些大的平台，还是建议新开页面，这样方便二次浏览待办信息。3. 其他① 当前在一级页面，如果跳转到其他模块可以选在当前页面直接刷新，不需要新开 Tabs。如果产品的基本定位是其他模块的内容都需要新开 Tabs 网页，最好保持统一。② 动态增减页签导航一些产品的结构设计是导航栏常驻，所有的页面都是以动态增减页签的形式展示，那么只要是本平台内的信息都是不需要新开 Tabs 网页的。不过使用这种方式设计者需要定义的是动态增减页签的使用逻辑。③ 导航模块常驻在一些产品中，导航模块是常驻的，在一个模块下的任务流程中，通过点击友好链接跳转到目标页面，导航随之变化，对用户也会存在一定的暗示：模块与模块之间是有不同功能定位的。但是用户当前用户的任务流程并没有结束，点击了友好链接，相当于丢失了主流程，要是返回还需要不断的点击，如果是个新建流程会更糟糕，所以这种方式不是很友好，要谨慎使用。像阿里云这样，左侧导航栏收起的的时候，用户从一个页面到另外一个页面，面包屑从 1-2-3，变成了 4-5，用户对当前页面的位置是无感的。从而会模糊任务路径方向，没办法准确定位当前位置。所以，新开 tabs 网页是很有必要的。当然，层级越深用户能触及的频率就会越小，于是团队的一部分成员就会说既然频率小那么对产品的影响很小，可以忽略的。但是，场景频率小是对所有用户而言，不是说用户群少。对一个产品而言，让用户满意很难，但是一个看似不起眼的跳转，只要让用户用过一次觉得难用、页面层级深，产品的整体印象就会大打折扣，因为用户不会在意这个问题是产品定位的主流程还是低频场景。往往用户能记住的不是产品带给业务的流畅感和增长，因为他们认为这是产品应该做到的，但是一次不好的体验却会历久弥新。页面跳转的总结有一定的局限性，特殊业务场景还需要做特殊处。本篇来源：优设网原文地址：https://www.uisdc.com/business-design-page-jump
关系 用户 信息 做设计的过程就是处理设计关系的过程。而无论交互设计还是视觉设计，在设计过程中需要反复考虑的是这 7 种设计关系：生意介质关系、路径联动关系、系统构成关系、同类并列关系、分级从属关系、归组收纳关系、Z 轴层级关系。在这里强调关系这个词，是因为设计这件事从来都不是孤立的。这个道理虽然很容易明白，但是在我们大部分常规设计工作中，接到的设计任务往往是经过拆解后的局部。陷入局部，忽略这个局部与其他因素之间的关系，是设计开始变得糟糕的重要原因。说到设计方法，我们现在已经有一些比较成熟的思维框架，比如斯坦福设计学院的 Design Thinking Process、双钻模型、体验地图、用户体验五要素框架等，但有了这些框架之后，在具体的设计问题中，还是没有一种行之有效的方法可以直接的指导、改善不同职级、不同经验的设计师的设计产出。基于这样的现状，我尝试梳理了我的设计方法论，从宏观的设计关系出发，侧重眼于微观的设计层面，希望用一种简单的方式抓住这 7 个词，为设计工作提供一点建议和帮助。往期干货：研究腾讯设计人才白皮书后，总结了这5点职场趋势从去年开始关注腾讯 CDC 每年一度的设计人才调研报告。阅读文章 > 一、生意介质关系为什么设计师容易自嗨？或者容易被别人认为设计师在自嗨，所以不得不连续不断不遗余力的进行自证，自证设计的价值？很多时候是因为没有处理好设计的生意介质关系。设计区别于艺术的一个根本点在于，设计是一种服务，而非自我表达。这种服务并不是说设计师作为乙方需要服务好你的需求方，而是说任何设计都始于明确的目标，并服务于一种生意以及参与到这个生意中的用户。这种服务的第一属性要求我们放下设计师的自嗨，分析生意和用户，分析当下遇到的问题，并在困难中寻找最佳设计方案。所以从这个角度来看，任何一个设计都是困难的。如果你觉得没有困难，那只能说明你想的过于简单，或者没有在从事真正意义上的设计工作。为什么说任何一个设计都是困难的？因为设计关乎用户的的认知、预期与习惯。用户认知的形成取决于用户过去的经验，过去这个用户或者说这类用户在使用类似产品时建立起来的基本认知，带着这个基本认知以及用过过去养成的操作习惯甚至思维习惯，用户看到你的产品界面时，首先会产生一个认知，在这个认知的基础上形成一个对这个界面状态的潜在预期。好的设计能够引导、管理用户的这种认知和预期，进而促使用户产生实际的操作行为。而差的设计往往不能帮助用户直观的建立基础认知，以至于不能产生我们想要的用户预期，甚至产生了完全错误的预期。当用户操作之后发现与自己的预期不相符的时候，体验痛点就产生了。所以说，设计是一种介质。一种连接生意和用户的介质，一种复杂与简单之间的介质，一种边界模糊的、还在不断进化的介质。要做好这种介质，需要设计师具备好的分析能力、逻辑思维与转化能力、想象与创造能力，而这三种能力合起来，可以简单概括为我们常说的洞察力。去洞察自己的洞察力吧。这样才能处理好生意与用户之间的设计关系，让设计成为一种好的介质。二、路径联动关系交互设计设计的是什么？设计的是用户行为。可用户行为是虚的，那实际上设计的是什么呢？设计的是一个个状态以及状态与状态之间的联动关系。这是一种设计关系，视觉设计考虑的点线面之间的关系，不同元素之间的组织关系，交互设计考虑的是不同信息之间的组织关系，不同状态之间的交互联动关系。在这个过程中，需要有好的用户洞察，充分理解用户场景与业务诉求，管理用户预期，及时给予合理的界面反馈。时间是线性的，我们的工作是线性的，用户在你的产品中花费的时间是线性的，所以用户在使用产品的过程中所接触到的一个个界面与交互也是线性的。在这个线条中我们需要考虑到你当前处理的这个点在整个用户路径中的关系，要如何处理才能使用户不在当前这个节点中断任务甚至退出程序。在这个线条中的每一个节点都与它的上一个节点与下一个节点存在路径联动关系。这种路径联动关系在交互设计的工作里常常以流程图的方式输出，容易理解，但同时也容易被忽视，尤其是对专职的视觉设计师而言。所以无论哪种形式的设计工作，对于路径联动关系的处理，都需要充分考虑流程的起点与终点，以及路径的汇合与分支。交互设计的思维不应该局限在交互设计这个工作或者交互设计师这个职位上，视觉设计师的工作同样需要具备交互思维。产品是一个复杂的系统，我们的日常工作是被拆分后的一个个节点。开始一个设计项目之后，只有充分考虑当前这个页面或者这个视觉物料在用户的时间线程里的前后联动关系。多问问自己，用户是从哪里来的，接触到你当前设计的这个界面/元素/物料之后，我们应该如何引导用户走到下一步。这个环节如果考虑的不够全面，就有可能形成断点。三、系统构成关系每一个科技产品都是一个有机的系统，它的迭代与成长呈现着基本的生命体征。每一个生命体的律动都可以表现出自然的美感。生命的发展与进化并不是被人为设计出来的，而现在我们人类希望自己设计和研发的产品能够不断进化，并且经久不衰的活下去。想想这有多难，首先我们要创造一个生命，其次我们还要希望他在短时间内根据达尔文的进化论在自然选择中不断进化，不断的在恶劣的竞争环境中存活、发展。每一个小的设计都从属于一个整体，是这个整体的一部分，并且带有这个整体的特征。我们常说的 DNA 也就是这个意思。每一个设计元素，都应该从属于一个设计语言，不管这个设计语言是显性的还是隐性的。假如说我们不在乎这个系统构成关系，或者说根本没有这个 DNA 的存在。在设计上对于其他竞品的我们认为好的、对数据有帮助的东西直接拿过来会有什么问题吗？如果我们觉得自己的手臂不够强壮，是不是直接可以移植健身教练的手臂到自己身上呢？那结果必定是丑陋的、畸形的。这也就是为什么我们在做设计规范与设计语言，为什么我们吹毛求疵的追求系统一致性。同样的，平面构成是设计基础课程，我们可以学到一些基础的构成一个画面的方式技巧。所以在设计草稿阶段需要从构图考虑，而不是从单个元素的刻画来进行。如果我们在做设计的时候忽略元素与元素之间的构成关系，最后整体的效果可能是不协调的、不自然的、美感缺失的。四、同类并列关系警察有两种，胖警察和瘦警察；讲笑话的表演有两种，相声和脱口秀；电影简单的说也有两种，故事片和纪录片。并列与类比是人们在对事物建立认知时的一个简单可用的方法，分类便于我们迅速理解世界，理解一个系统中不同功能、内容/信息之间的关系。同时，电影的类型化为电影产业带来了更多的观众，产品设计形态的类型化为互联网产品带来了更多的用户，信息的类型化帮助用户获取到了更多的信息。用户的时间碎片化了，大块的内容被切分成了小的信息单元，这样的背景下 Feed/信息流技术（算法匹配）发展起来。同时我们不能不看到这个懒惰的循环：碎片化催生了信息流，信息流让用户的时间更加碎片化。在这样的环境下，各种类型的信息被强行拆分塞进了用户的信息流。这些信息并列在一起，无论是新闻资讯、生活贴士、旅行攻略、还是一条机灵段子，无论是深度长文、番剧解说视频，还是一张吸引眼球的图片，通通都并列在一起，一起争夺用户短暂的注意力。归类的过程是强化共性搁置个性的过程。我们常常面对的困难也是该如何将功能或信息分类。这些信息本来是千差万别的，这种并列关系的处理在设计上的困难也是显而易见的。我们的困难是每当我们进入一个部分的设计时，总会觉得当前处理的这个问题是特殊的，并不那么容易对不必要的个性做出舍弃。五、分级从属关系如果一个团队有 100 个人一起做一件事情，那么怎么进行组织才能有效的完成这件事呢？如果一个系统有 100 个页面，那么这些页面如何能够更有序的组织在一起，才能完成业务目标并满足用户需求呢？如果一个页面有 20 个不同的字段与元素，那么界面中用户要阅读的内容、对下一步操作的引导等应该如何进行有效的组织？分级从属关系的建立可以帮助我们建立易于理解的设计框架。从信息架构的组织、导航的设计到单个页面、单个卡片的设计框架都需要清晰的传递分级从属关系。扁平化管理在互联网公司一度听上去非常洋气，但现在我们仍然无法确定扁平化管理一定优于层级化管理。扁平化的优点和缺点都很明显：他可以降低管理成本，但对公司结构架构能力和组织能力要求较高；他可以分权管理让更多的人参与决策，但这样的决策过程容易混乱；他可以更好的激励人才培养，但同时隐晦的层级关系也无法避免。扁平化设计更加凸显内容本身，避免信息传达上的不必要干扰，强调界面的效率。但值得强调的是，扁平化设计并非直接放弃了信息的层级关系，而是在用更简练的形式来表现层级关系。当扁平化成为一种设计趋势被无脑滥用的时候，扁平化本身的缺点就被无限放大了。在信息架构层面，明确的层级关系要比所谓的流行趋势重要的多。还以微信为例，他为什么要把朋友圈归到二级页面？为什么要在 IM 页单独设置一个聊天详情页而不把操作选项前置？为什么对于单条朋友圈的点赞与评论没有直接外露而收到一个单看上去表意并不明确的两个点的图标里？这看上去一点也不扁平，但似乎并没有影响到微信的易用性。六、归组收纳关系作为交互设计入门书籍的《简约至上》中谈到了删除、组织、隐藏、转移四个设计策略，介绍了非常实用的设计方法。几年前在装修房子的时候接触了一点室内设计的知识，小户型空间的收纳问题、动静分区问题、冰箱洗衣机放在什么位置会让生活更舒适的问题，这些问题的解决方法都与交互设计的设计方法相通。人们对简单的追求在不同的设计领域都非常相似。还有一个有趣的现象：世界是复杂的，人是复杂的，生意是复杂的，而大家在产品设计上的审美取向却是简单的。简单的体验简单的说就是在易懂的基础上易用，轻松，没有不必要的干扰和负荷，而这种简单体验的塑造建立在更有效的归组与收纳的设计关系处理上。卡片式布局、抽屉式菜单、发现页都是对信息和功能的归组收纳。在什么场景什么时机下适合隐藏、删除哪些内容，把哪些内容归位一组是更合适的，这些都需要设计师结合当前场景、结合其他几个设计关系的处理来综合考量。七、Z 轴层级关系设计的过程是处理信息关系的过程。人们有两只眼睛来感受广阔立体的空间，人们对信息的接收也从来都不是平面的。信息本身是立体的，而平面设计与互联网产品设计的媒介是平面的，设计师需要做的是把立体的信息通过平面的媒介完整的传递给用户。压感式触摸屏的技术发展带来了的新的交互手势；我们通过叠加与覆盖等设计方式在平面上制造层次的视觉误差来划分信息层级；我们利用信息与信息之间的大小对比、色彩关系来帮助用户更好的理解信息层级，降低视觉上的噪音与干扰。这都是在处理 Z 轴上的信息层级关系。信息与信息之间的关系是立体的，功能与功能之间的关系也是如此。所以无论扁平化的设计趋势如何，我们该处理的 Z 轴层级关系还是要处理。以上谈到的 7 种设计关系并不是相互独立的，相互之间存在交集，需要我们在设计过程中综合考虑灵活处理才可以形成结实、完整、成熟的设计方案。一篇文章篇幅有限，接下来我会分别对 7 种设计关系展开，并结合实例做进一步的分析与说明。欢迎关注作者微信公众号：「柴林的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/design-relationship
页面 用户 信息 前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过设计师的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。往期干货：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 如何进行页面框架设计前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。1. 了解业务在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。在辛向阳的交互设计五要素中强调了，交互设计的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。① 用户简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。管理者：我希望能够看到团队中所有人的工作进度。普通员工：我希望能快速的完成自己的任务。这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。② 场景对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。③ 目标对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。④ 媒介用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。⑤ 行为在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。2. 组织信息组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。① 明确信息通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。② 罗列信息明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表③ 导入观点，确定关系确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。④ 常见的组织方式常见的组织方式可以分为精确分类和模糊分类。精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。京东商城的左侧商品分类采用的就是模糊分类。混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。3. 组件选择组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。① 导航导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。返回导航：常见的组件有面包屑、返回按钮等。友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。其他导航：常见的有步骤条、分页器等。② 标签标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。③ 搜索搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。常见的组件可以分为：输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：B端干货！4个章节帮你掌握筛选功能设计面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。阅读文章 > 以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。4. 页面布局页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。① 选载体首先根据当前的业务的场景特点，先选择信息的承载方式。目前有三种方式：页面、对话框、抽屉页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。在具体的使用过程中：如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面；如果信息与触发页面有较强的关联性，考虑使用抽屉；如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。② 分区域在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。3. 调布局在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。4. 建议① 设计理论的应用设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。1）视觉动线理论F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。2）交互设计四策略删除将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。分类面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。隐藏将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。转移一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。3）格式塔心理学格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。在这里主要说一下这四个原则：接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。2. 遵循用户习惯在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。参考：https://ant.design/docs/spec/form-page-cnhttps://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeawhttps://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ本篇来源：优设网原文地址：https://www.uisdc.com/page-design
时间 信息 版面 在进行设计时，常常会涉及到“时间”的排版，比如展会日期、演出时间、活动促销时间等。“时间”在版面中更像是个“配角”，并不像标题和其它信息那么显眼，所以常常被设计师所忽视。但版面中任何一个小细节都会影响到版面整体的美观，本期讲解“时间”信息编排的几种思路，教你如何让“时间”的排版在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。往期平面干货：文字怎么搭配排版才吸睛！送你50+案例！海报文字的排版怎么样才能吸睛与众不同？阅读文章 > 一、对比“对比”在设计中无处不在，在“时间”的编排中也是如此。在设计时可以弱化日期中较次要的信息，突出主要信息，让观者一目了然。此案例时间并没有经过太多的刻画，但加入了大小对比，形成了视觉层次感。将“年份”和“月、日”字眼信息缩小，采用大小对比增强信息之间的跳跃率，显得灵动活泼。将“月份”改为空心字，形成空心字和实心字的强弱的对比，使主要信息“日期”更突出。二、简化将“年、月、日”简化为“.”“/”等符号，既能准确传达日期信息，又可以使视觉效果更简约。很多时候年份并不那么重要，可以把年份弱化，突出具体时间，形成对比、层次区分，这样更有利于阅读。如果时间信息较多，想更简约的呈现，年份直接删去也无妨。当活动的时间范围在同一个月，“月份”可以共用，这样能精简画面重复的信息。三、替代将月份替换为英文，使版式多一点变化。将日期中的阿拉伯数字用汉字代替，比较适用于传统复古的版面。日期连接经常使用横线“——”，也可以替换为各式各样的箭头来连接日期。将年份信息放在连接线上，既起到连接的作用，同时还能引起阅读者的注意。四、添加如果想让版面视觉效果更丰富，可以选择添加信息。此案例添加星期的英文缩写，增加大小对比，丰富了画面层次。有些活动是只在一天的某个时段举行，则需要添加具体时间。还可以添加图标或其他小元素进行装饰，增加更多趣味性。添加外框，让“时间”信息的呈现更整体，也能与其它信息进行区分。六、分行当有两个日期需要呈现，可以采用分行处理，让读者更易于阅读与识别。七、对齐方式左对齐是最符合人阅读习惯的对齐方式，所以也是“时间”编排中最常使用的对齐方式。在设计时也可以尝试改变不同的对齐方式，让编排多一些个性和变化。也可以将文字调整大小和间距，使两端完全对齐，可以达成工整严谨的效果，看起来也更加饱满。八、纵向编排在版面空间比较狭窄时，可以改变时间的排版方向来适合版面编排需求，纵向的编排还能体现出古典文化感。在改变排版方向时，一般要把数字调整为常规阅读方向，保证良好的识别性。也可以同时采用横排和竖排相结合的排版方式，形成方向上的对比，视觉效果更丰富。九、字体选取特殊的字体，让信息编排更具个性和设计感。掌握方法后，可以尝试更多的组合方式，让重新设计后的“时间”信息在顺利传递信息的同时，还具有良好的视觉体验，为版面增添设计感。本期示范所用字体为：Trajan、Times New Roman、Garamond、思源黑体、D-DIN、Bebas、Facon、Quantum、Bungee Inline、Morena、Baloo（除前三款外均可免费商用）欢迎关注作者的微信公众号：「艺海拾贝Design」本篇来源：优设网原文地址：https://www.uisdc.com/time-design
信息 用户 视觉 遇到跨职能同事对界面设计方案发出灵魂拷问，设计师该如何应答？本文从理论和应用层面，对不同种问题总结了万字科普，希望有用~往期干货：UI/UX设计作品集中的推理分析该怎么写？高手实操案例分析！编者按：作品集中的推导分析部分该怎么写，而不是套市面上的流程和模板？阅读文章 > 一、那些年，我遇到的灵魂拷问...我的日常工作嘛，想必和其他从事界面设计相关工作的设计师一样：70%的时间用来构思设计策略和产出设计方案、30%的时间用来和产品团队各种各样的角色打交道：比如需要通过项目展示，让产品决策者买账；或者给开发工程师解释设计细节、跟踪上线后的品控问题。而在这 30%的沟通时间中，与合作小伙伴们的探（撕）讨（逼）设计问题总是不可避免的一个环节。那在这个时候，如何让他们理解问题背景、如何让他们理解你的设计方案、如何让他们“买账”......诸如此类问题是否能高效沟通，显得尤为重要。其实，对于一些比较偏产品向的界面设计问题（比如：为什么支持“批量取消"？为什么有“确认页”？为什么“全屏展示活动图片”？...等流程、功能、信息展示型问题），我们解释起来是比较容易的——我们可以对标着产品经理制定的产品目标，结合数据分析师或用户研究员总结出来的数据或用户事实，即可快速地合理解释自己的设计方案。但是，如果你的小伙伴恰巧是非常严谨认真、刨根问底的人，他们可能会问出一些 非 常 微 妙的问题，让设计师立时无法抓到一个准确的论点或论据展开阐述，往往只能和团队的小伙伴们相顾无言。那这些 非 常 微 妙 的问题具体指的是什么呢？容我举个栗子：类似于以上的问题，想必各位设计师在日常工作中并不罕见。然而我每每回答时，对话会进入一个奇妙的怪圈，be like:“你不觉得这样设计更清晰/工整/美观吗？”“我不觉得啊，我觉得都长得差不多。”“可是这样用户能更快找到交互目标，完成交互任务，有更好的用户体验呀。”“啊？有吗？为啥？所以呢？”“......”所谓“忍一时越想越气，退一步越想越亏”。咱就是说，每次都不知道如何解释、眼睁睁看着设计被“砍”来“砍”去可不行。为了让我自己变成更加“耐撕”的设计师，同时尽可能帮助到遇到类似问题的小伙伴们，我尝试着阅读、思考、总结了一些界面设计的科普知识，并以此来深入浅出地、感同身受地、科学严谨地解释一下设计师那些对于微妙设计细节的坚持，到底是从何而来的。欢迎各位设计师小伙伴给你们身边发出类似灵魂拷问的跨职能同事分享这个科普帖；也欢迎刚出新手村的、从事界面设计相关工作的设计师小伙伴们，把它当作入门级界面设计理（下）论（饭）科普来阅读。1. 呔！灵魂拷问挑战一！对于“界面设计的工作定义”这个问题，我根据自己的理解和体悟，尝试着用更加通俗的方式概括了它的答案：界面设计，不仅仅是埋头把线框图“从无到有、从有到优”地吭哧吭哧画出来就完事儿了，它还包括了解目标用户的特性和需求，了解产品的细节和目标，并根据用户的期望和产品的商业目标，假设出最“两全其美”的方案，并用目标用户能“看得到”“看得懂”“能操作”的界面把这个方案表达出来。对于这个“两全其美”的方案本身，比如有什么功能、流程长什么样子这些问题，相信产品团队的其他角色会贡献一定的想法和决策；而对于让用户能“看得到”“看得懂”“能操作”这个要求，则是界面设计工作中的主要责任和挑战，也是我们花费了大量时间去“纠结”的关键点所在：有人肯定要问：但凡是能用智能电子产品看到你这个界面的人，肯定看得到字、认识字、也知道要点哪儿。为什么说“看得到”“看得懂”“能操作”这三点居然是个“挑战点”呢？——其实，“能做到”不一定意味着“做得好”，实际上人类的知觉和行为能力是十分有限的。关于这个论点，我将用一个例子来让大家深切了解（人类）用户的认知局限性。请仔细阅读下方的视频截图中，黑底白字的字幕给你“布置”的“观察任务”，之后再点击下下方的视频以开始观看：(《The Monkey Business Illusion》 - B 站视频源 点击下方视频直接播放，或复制链接跳转到 B 站观看）： .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。默数白衣服的人传了几次球看完这个视频，相信大家对于人认知的局限性已经有了一定感悟。然而，和“有限”的用户认知相反的是，在实际的产品规划中，（由于不断更新的商业目标）产品的功能和信息的增量却是“无限”的。这对矛盾意味着，要做到“看得到”“看得懂”“能操作”这三点，团队中的设计角色必须斟酌如何正确引导用户在海量信息中，按我们预期的方式和顺序去浏览和操作：而这就是，除了“画界面”——即“把产品经理规划的功能落实在界面中”这个要求之外，界面设计的另一个要求。这也导致了设计师在设计界面的工作中，会反复斟酌一些在跨职能同事眼中显得“无足轻重”的细节了。看到这里，各位看官可能会有进一步的疑问：诚然，“引导用户按商业期望并尽量无痛地操作界面”在上述矛盾点的铺垫下，确实显得十分重要。但是，这难道不该跟“界面结构”“文案”这些更直观的要素具有关联性吗？正确的交互引导和设计师纠结来纠结去的界面细节（比如：元素距离、字体大小、图标元素......等），到底有什么因果关系呢？用一个不那么恰当的例子做类比：程序员在模拟环境下跑代码之前，虽然没有那么确切的证据能证明这段代码一定能跑通且无 bug，但是他们往往会参考以往的经验和网上的案例，用最保险的逻辑和语法至少先码出一段能跑的代码，让它先运行起来再纠错。那么相似地，设计师设计的界面在上线之前，谁也不能保证这个设计一定能达成设计目标——商业目标及用户体验目标，但起码我们可以参考行业公认的“共性设计规律”，以及通过用户调研、数据分析得来的更有针对性的“个性设计规律”，用最自信的方式先设计出一个达到开发和上线标准的界面：而上述所说的“行业公认的共性设计规律”，往往就和那些跨职能容易忽略、但设计师却不停纠结的界面设计细节，息息相关。那么，这些“行业公认的设计规律”是什么？决定了怎么样的设计细节？以下我将挑选最基础的一些案例，用跨职能小伙伴们常见的“灵魂拷问”作为开头，结合理论和应用场景，帮助大家更快地感受和理解。2. 呔！灵魂拷问挑战二！我们来抽象和展开这个问题：为什么我们需要对某些界面模块进行“特别的设计”？需要“特别的设计”的情景是什么？为了回答这个问题，我想首先介绍一个界面设计的基础理论给大家：这个理论其实很好理解，无需再深挖背后的心理或生物学原理啥的。不过值得一提的是，这个理论其实不仅运用在界面设计中，在很多其他的艺术或设计创作领域也很常见，我能快速想到的一个（奇怪的）例子就是，喜剧《唐伯虎点秋香》中唐伯虎初遇秋香时，唐伯虎端详了一下秋香的外貌，对身边的祝枝山说“长得也是一般的好看而已嘛”，然后祝枝山意味深长笑了笑、朝着人群大喊：“美女！”，结果所有华府的女佣都转过了头，唐伯虎惊讶地往后一跳，直呼：“哇~秋香果然是国色天香，超凡出尘！”如果把唐伯虎想象成目标用户（？），把秋香姐想象成我们想重点推荐的功能（？？），要想让秋香姐，啊不是，某个功能对用户而言，是引人注目且过目难忘的，我们需要做出强烈的“对比”来凸显——在界面设计中，这个“对比”可能是颜色、尺寸、形状、留白等样式上的各种不一样：让我们再回头看看这个灵魂拷问：诚然，通过“挑选一个合适的展示位置”在现有布局中达到“使模块呈现最好的曝光量、（重复）点击率等表现数据”这个目的是可行的，但是不可否认的是，一个载体界面上最佳的位置是有限的，位置的更改更是对页面其他模块而言会牵一发动全身、对用户而言会产生新的学习成本。一旦我们想尽量维持其他现有功能的布局、或希望除了位置优化之外，穷尽最大所能提升模块的行为表现时，为这些模块做特别的设计优化是必要且合理的。当然，这种“特别的设计优化”中的具体设计细节，也要考虑到此处设计复杂度 v.s.研发周期等“性价比”问题，不能理直气壮一味追求“特别的视觉效果“而掉入“过度设计”的怪圈。3. 呔！灵魂拷问挑战三！让我来进一步抽象这个问题：对于界面中的文字信息，既然可以利用格式（分行、分段）来区分其类别和从属关系，我们为什么还需要进一步给予文字不同的视觉权重呢？在进一步解释其原因之前，让我们先明白另一个关于信息阅读的“规律”：为了更好地理解这句话，让我们将自己代入一个例子来实际体会一下所谓的“通过抓取关键词判断全局内容”是个什么情况，请回答以下问题：回想一下，你在以上例子中收集信息的方式是什么样的？是挨个阅读了第一组和第二组中的所有内容并做出了判断？还是跳跃阅读式提取了和“台灯”更相近的关键字并做出了判断？相信大部分人都更偏向于后者，而后者就是我们所说的“通过抓取关键词判断全局内容”。记得之前在阅读《社会心理学》这本书的时候，我发现在应用层面上，几乎所有的人类行为动机，其背后都有一个较根源的规律：人脑总是倾向于“简化提取信息“和“分散认知压力”。那么，当我们尝试着用这个心理学现象去反观“信息线索”这一规律时，它似乎变得可以推理和解释了：当我们的界面中堆叠了海量信息和视觉元素时，和我们预想的“用户会按顺序依次获取信息并进行脑内加工”不同，用户下意识会为了简化认知过程、分散认知压力，去跳跃式阅读并“采摘”他们认为的关键信息到大脑的“中央处理器”中，进行进一步加工，以便搞清楚“这个页面是什么？”、“我能否找到我需要的东西？”、“我大概能在哪里通过什么后续交互找到它？”...等问题。不知道大家是否曾看过“F 型阅读顺序”这个用户阅读规律，其实它的底层逻辑也同样是“信息线索”。那么让我们回到开头的灵魂拷问：为什么需要给界面上的某些文字进行视觉权重的处理，也就是加黑、加粗、加大、加行距等等？其实答案已经不言而喻了——为了把我们想传递给用户的信息，像喂饭一样“喂”到总是跳跃式阅读、可能会遗漏关键信息的用户的“嘴”中，让他们找到他们想找到的、或者我们想呈现给他们的信息。举两个栗子：4. 呔！灵魂拷问挑战四！用简单的话来复述这个问题，就是：利用额外的动态控件去传递信息，它的必要性是什么？对于这个问题的答案，让我从一张图片开始，为大家展开阐述。如下图所示，请你尝试盯着图片中心的蓝色圆形，并尝试用余光去辨别距离这个圆形由近及远的物体分别是什么：你是否有如下感觉：距离圆形，即我们的视焦点越远的物体，越难以辨别是什么形状？那么请你再尝试盯着下面这张动图的图片中心的圆形，并尝试用余光去辨别最远处那个不停运动的物体是什么：对于这张图片，那个动起来的、距离圆形较远的物体，好像没有静态的时候那么模糊了？以上这两个例子，其实都涉及到一个关于人类视觉的普遍规律：这个规律实际上和我们眼球构造导致的视觉特性有关，如下图所示：人的眼球视觉可分为“主要视觉”和“次要视觉”。其中，“主要视觉”分布在中心区域且范围较小，由“视锥细胞”产生图像，而“视锥细胞”对于光线充足条件下的静态目标的色彩和形状细节都十分敏感，在白昼时是人类主要使用的视觉细胞；“次要视觉”则围绕“主要视觉”分布在其周围且范围较大，由“视杆细胞”产生图像，“视杆细胞”对于亮度和动态十分敏感，是黑夜中在“视锥细胞”失灵时的主要视觉补充方式。其实，不仅是人类，很多其他以捕猎为生的哺乳动物的眼球也有同样的视觉特征。“主要视觉”能帮助捕猎者更好获取在视觉中心的猎物的一举一动，“次要视觉”则能帮助捕猎者快速获取周围环境中潜在的危险或捕猎竞争者的动向变化。这就解释了为什么当你在光线充足的屏幕上，盯着上面那张静态图片中的圆形时，你的“主要视觉”只能支持你看清视觉焦点范围内的很小一圈的事物，比如距离圆形最近的外星人头像；而对于那些距离圆形较远的形状，则因为落在了“次要视觉”中，而随距离变得越来越模糊。那上面这个视觉规律和本环节的灵魂拷问又有着怎样的关系呢？首先我们要明白的一点是，人类只有一双眼睛、一个视觉焦点（动线）。那么，当这唯一的视觉焦点随着我们正在进行的交互，移动到界面中的某个位置时，可能某些比较重要的、距离视觉焦点较远（而坐落在了“次要视觉”区域内）的信息，正在随着交互的进行更新了部分内容，那用户很可能就错过了这个重要信息的更新。那么，设计师能做什么来防止这种情况发生呢？根据上文提到的视觉原理，这里应该有两种思路：1. 把关键信息的静态文案，放置在当前交互（视觉）焦点附近 2. 如果 1.的解决方案在当前界面布局规范中不被允许，那么我们可以利用“视杆细胞对动效敏感“的特性，动态展示关键信息。最后，让我通过总结上文的内容，来快速回答一下本环节的灵魂拷问：当你想强调的信息和当前的交互（视觉）焦点较远的时候，由于视觉的局限性，我们很难感知到其变化。如果这种“不被用户感知”的概率很大、且其造成的体验或商业后果让人难以接受时，将该信息重复强调在焦点附近、或者用动效引起用户的注意，都是必要且合理的设计手段。5. 呔！灵魂拷问挑战五！同样，首先让我尝试转译和展开这个问题：在内容能够完整传递信息的情况下，为什么我们还要增加额外的视觉要素？对于这个问题，和前面的环节相同，让我先引入一个和答案有关的设计规律：单纯看字面的意思或许有些抽象，为了方便大家理解，同样我将用一个实际的例子来让大家亲身感受一下这个规律。如下图，请分别大声朗读出两个组中的所有词汇，朗读时记得尽量快速并保持正确（想挑战更高难度的小伙伴，也可以尝试朗读每个词汇的字体颜色名称）：你是否发现自己在识别和朗读第一组内容的时候，速度是快于第二组的？那原因又是什么呢？如果你仔细研究上面两组词汇，就会发现：第一组词汇的字面意思和字体颜色名称是一致的，比如：“粉红色”三个字的字体颜色也是“粉红色”；而第二组的上述两个要素，却是错位的。其实，在这个例子中，（如果你挑战的是朗读词汇本身）字体颜色就是一种“环境刺激物”，当人们对“环境刺激物”和目标识别物本身的信息认知是一致或者相似的时候（正如第一组所展示），就如本规律所说，人的辨识速度会更加快；反之则减慢。接下来，让我再例举一个和界面设计更贴脸的例子，让大家快速感受一下：如上图所示的三组提示，你阅读时长最短的是哪一组？你能最正确地 get 到弹框信息的又是哪一组？想必大多数人的答案都是第三组，因为其提示中的文字和辅助刺激物（颜色、图标）传递的信息是一致的，因而能使人们更快更正确 get 到信息。其实这个例子也体现了界面设计中，最常见的“环境刺激物”是什么——比如：颜色、图标、插图......这种视觉类刺激物；其他一些不常见的“环境刺激物”包括了：声音、震动这些和其他四感相关的刺激物（写到这里突然想到windows系统里，当警告框莫名其妙连续弹出时，那一连串的“噔噔噔噔噔”，就算现在回想都能吓到炸毛的程度...）：当然了，选择“环境刺激物”时也不一定非要挑选被文化或普遍认知刻进我们 DNA 的那些元素，诸如：红色=警示、感叹号=有问题......，它也可以来自特定产品领域、甚至完全来自你的产品本身：通过在交互中的不断重复和保持一致，将新的“刺激物+含义”组合刻进用户的潜意识中。比如，在填写密码/验证码等口令类输入的情境下，弹出框的震动会让人甚至都不用看错误提示，就意识到“填写错误”这个信息。这是因为某些聊天和金融类 APP 已经通过不断应用该“环境刺激物”在相应的场景，来让我们下意识把“震动”和“填写错误”联系起来：好的，有点扯远了......让我们回到这个问题。已知人在与界面交互时，注意力是线性的+有信息量上限的，当设计师面临：用户正在最重要的任务或者信息流中，且不应该被打断并转移注意力到次要信息线上。但同时，获取该次要信息对于用户后续的操作决策而言，又是必要的；用户正在主信息流中获取某个信息，但 ta 需要花更少的专注力成本在这个信息上，以便于将注意力“花在刀刃上”。在这两个情况下，用视觉权重适当的、含义一致的“环境刺激物”去辅助呈现对应的信息模块，是合理且有必要的设计手段。这是否给你带来了一些颠覆原来认知的、对界面设计的启示？——有的时候，界面设计上的“多设计”，反而是为了用户“少阅读”。6. 呔！灵魂拷问挑战六！同样，让我转译一下这个问题：在分割界面信息模块上，多样的空白行、多余的分割线，他们存在的意义是什么？在回答这个问题前，同样让我们从一些由实验结果总结而来的“规律”作为前情铺垫：这个规律其实很简单直观，大家可以回想一下自己欣赏各种平面艺术作品时，是否都是按照简单几何形去拆解构图的？或者反过来思考，在阅读过的平面设计构图教程中，是否大多数构图法则也都是以简单几何线/形作为基础的，比如：三角形、圆形、正方形、梯形、对角线、放射线等等...从正反两个方向来看，都有事实印证这个规律的正确性。在界面设计中，由于“传递信息”这个关键目的，带来了“布局的复杂度必须较低”的局限，同时也是考虑到技术投入和实现难度等问题，当设计组件或信息模块时，我们通常会采用的形状仅有方形和圆形：其中，圆形常用于偏视觉的元素（比如：图标，图标按钮等），我们暂且不展开。接下来，让我们聚焦在常应用于控件或文字模块的“方形”上。这时候就不得不引入一个在界面设计领域，大家最熟悉的理论之一——“格式塔”理论了。这里为了让解释更加好理解一些，让我直接选取一些和本环节问题最相关的两个“子理论”来为大家展开阐述。第一个“子理论”是“邻近性原则”：上图其实把这个原则体现得淋漓尽致，我就不再为大家举另外的栗子展开解释了。其实，这个原则就回答了“信息间的空白空间”存在的必要性——你是否还记得前文提到的“信息线索”这个规律？既然人们的界面阅读习惯是“快速扫描”、“跳跃获取信息”，那么，和“文字权重的多样性”类似，“空白空间”往往能让人在扫描信息时，下意识推理出信息结构（即信息的从属、分组关系），从而使得这种“跳跃式获取信息”的行为更加快速和准确。比如：当用户看到一整块被空白分割出来的、较独立的部分时，会下意识去扫描第一行——他们往往会认为那一行是标题。通过这种方式，他们可以了解这个信息模块是关于什么的、有没有仔细阅读的必要......等等关键信息。那么，如果“有层次的空白空间”就能在视觉上帮助分割界面的信息层级了，为什么有时候设计师还会应用分割线/框呢？首先需要从另一个“格式塔”的“子理论”——“同域原则”说起：这个规律说明了“分割线”也同样能帮助信息分组。并且，在设计实践中，“分割线”这种更为强烈的视觉元素，其分割信息的视觉强度是大于“空白空间”的——这意味着在以下两个情况下，分割线是有存在必要的：当在界面中的某层平级元素里，有最最需要重点强调的单个信息组时，需要用分割线/框强调之； 当界面中的某类平级元素，因为内含的子元素太多太杂导致“分无可分”时，需要引入视觉上观感更强烈的分割线/框来强化分组。当然，还有其他例外的情况也会使用到分割线/框，它们和视觉分组无关但和交互引导息息相关，比如：“带边框的信息模块”可用于暗示该模块可点击、且点击都指向同一个目的地页面；“一列带框的信息卡片被屏幕边缘隐藏一部分”，能用于暗示该卡片列是可横向滑动的......等等，这些常见的使用场景相信大家都不陌生，就不展开讨论了。所以总结并回答一下本环节的问题：“空白”的多样性，能帮助用户在扫视界面时，更快理解界面中的信息的分组关系、子母集关系，从而提升当用户跳跃式阅读界面时，其找关键字的准确性和速度；而分割线/框，作为“空白”的补充手段，既能在视觉上强调单个信息模块，又能帮助在层级过多、元素过杂的情况下，让信息的分组显得更清晰。因此，在信息较多、层级较复杂的界面中，设计师合理地利用多种数值的空白间距、分割线/框，是一种能帮助用户在阅读信息时“大脑减负”的常见方式。7. 呔！灵魂拷问挑战七！上述问题中提及的，无论是“菜单”还是“筛选”，本质上都是为目标选项池新增属性维度，并按这些维度分别分组，基于此让用户“按组定位”逐渐找到目标选项的一种交互方式。所以，让我们转译一下本环节的问题：和让用户直接阅读选项信息并决策相比，为什么我们需要通过（多层）分组的方式，让用户决策的过程从“一次性选择到目标”到“通过层层筛选、慢慢锁定目标”？它应该被应用在什么情景中？因为这个问题解释起来也有些复杂，因此，同样地，让我从人类“决策行为”的剖析开始阐述。人的决策行为，本质上分为“感知”和“思维”两个步骤：先“感知”一个可选项、理解它的内容、并将以上内容“存储”在自己的“短时记忆”中，然后接着“感知”下一可选项并同样存储在“短时记忆”中......然后通过“思维”快速判断自己对每个可选项的主观喜好、客观利弊，最后做出决策。从上述的“决策行为”方式中，我们可以看到承上启下的关键点是“把选项储存在‘短时记忆‘中”。说的有点悬乎，举个通俗的栗子来讲就是：当你上班摸鱼，思考中午吃啥的时候，你得先在脑内回忆一下今天食堂的菜谱有啥，才能基于这个信息纠结一小下下，最后决定吃什么。那可能有人又会问：这“短时记忆”又是什么？为什么选项会被存储在“短时记忆”、而不是其他什么什么的记忆里呢？好的，那让我们进一步展开这个话题，来探讨一下“短时记忆”这个概念。让我快速用一张图片来给大家科普一下什么是“短时记忆”，以及它的兄弟“长时记忆”：一般，在我们采集到信息中的关键内容后，它会被首先放入“短时记忆”中，只有当我们不断复习（刺激）该信息到某个临界值，它才会被放入“长时记忆”库中，拥有“长时记忆”的特性：一个事实是：大多数的选择决策往往都是一次性的。这就决定了它们只会存在在“短时记忆”中，并拥有“短时记忆”的局限性——留存时间短，最关键的是，可留存的信息量少。那到底这个“少”又是多么地“少”呢？这时候就不得不提到继“格式塔原则”之后另一个界面设计中最常被提及的定律——“米勒定律”了：那么，基于上面提到的两个关键点（即“记住可选项是决策的关键点”、“能记住的可选项的容量十分有限”），我们可以引出一个和用户决策行为相关的界面设计中的规律——“席克定律”：下面我将举一个栗子，让大家感受一下这个规律将如何作用于我们的决策行为中。假设此时你正准备吃中饭，那么请分别在下面 A-C 组的菜谱中决定你想吃的东西。你可以尝试计时，自己从开始阅读菜谱到最后决定吃什么共用了多久：体验完上述的栗子后，请试着回想一下：是否从 A 到 C 组的决策时长有个非常明显的增长趋势（如果你有一丢丢选择恐惧症，那么这种增长会更加明显）？这就是“席客定律”想告诉我们的规律。那么在设计实操中，如果可选项过多（超过 9 个），且这种决策对用户而言是必要的、不可跳过的，我们怎么减少用户在进行该决策时的思考负荷呢？在本环节的开始，我曾提到过，人类的决策过程分为“感知”和“思维”两个步骤，因此我们的优化方案也可以从分别优化这两个环节入手：优化“感知”的处理负荷，即帮助用户剔除非必要的可选项，可用的手段有自动筛选、自动排序，以及手动筛选框、手动排序等功能；优化“思维”的处理负荷，即将决策的关键因素拆解成不同的维度（组），并将信息多层次地分组放置，形成各种样式的“菜单”，手风琴菜单、下拉菜单、侧边菜单...等等。当然，解决措施有意义的前提是想解决的问题是有意义的，因此我们可以逆推，上述 1.和 2.的解决措施的应用场景为：选项库在做决策的当下，只会存在于用户的“短时记忆”中——毕竟正因为如此，才有了决策能力的局限性，才引发了后续问题和解决思路。那么，到底是哪些具体的应用场景符合上述条件呢？我罗列了一下能想到的场景：动态变化的选项库，比如：商品搜索结果列表、活跃用户列表、最热门的歌曲列表等等；非用户定制的、使用频率较低的选项库，比如：工具类软件的某些功能列表，系统设置选项列表等等。而一旦选项库是静态的、使用频率较高的、用户定制的，在这种情况下，选项库大概率已经坐落在了“长时记忆”的区间中，所谓“自动脑补”。在这种情况下，设计师可以不用考虑优化决策体验的问题。这时候，设计师使用“菜单”或者“筛选框”等控件的考量，更多应该是基于用户的心智模型、竞品的常规处理方式、它本身或其他同界面入口的曝光量影响等问题了。二、灵魂的拷问？灵性的应答！虽然，贯穿本文的始终是一个个“规律”和“理论”，但引用这些“规律”“理论”的本意是为了佐证本文中各种观点的合理性（毕竟“理论”和“规律”都是多次实际实验后总结出来的、在当前情景下最可能发生、最普适的现象），而非真的让大家在实际解决问题的时候，去咬文嚼字般地用似是而非的语言营造自己的权威感。让我们开个脑洞换位思考一下：当你在和程序员交流的时候，他们直接甩出代码开始和你讨论数据结构；当你在和数据分析师交流的时候，他们直接把公式和 XX 定理摆在你面前高谈阔论......在这些情况下，你非但不会觉得他们很专业，反而会一头雾水地当场无语，对吧？推己及人，我建议大家在实际的跨职能沟通中，能够更多以这些“理论”“规律”中较表象、容易理解的信息作为起点，结合实际的问题情景、设计方案去解释和沟通：以上就是基于我在实际工作中跨职能小伙伴们常问我的灵魂拷问，深度研究和思考后总结出的一些理论依据和应用方法，希望对你无论是审视自己的设计作品、还是回答跨职能同事的问题，都有参考价值。最后，感谢大家阅读本文，也欢迎各种点赞评论收藏，栓 Q~欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/workplace-response-guide
顾客 信息 注意力 信息爆炸的今天，消费者的注意力越来越稀缺，设计的目的不再仅仅是美观，更要有效。所以在开始动手之前你需要清楚这六点！电商好文：一小时1200张图！当电商设计师把AI画画加入实战，效果太炸了！编者按：AI画画一直是2022年的热门话题，但至今仍鲜有实战案例。阅读文章 > 一、视觉设计需要在信息爆炸的环境中吸引注意力这个时代信息量增长的速度就像是宇宙大爆炸一样迅猛，在如此巨大的信息河流中，每个人都难免会被干扰到。优秀的广告设计有一种神奇的本领——“它们知道怎样能吸引顾客的注意力”。在互联网出现之前，我们获取信息的渠道可能是电视、报纸、杂志、收音机、路牌广告…… 那个时候人们身边的信息来源相对较少，我们还比较愿意去花点时间去阅读它，我还记得我小时候无聊时翻看旧报纸时，就算是报纸上的广告也会一个字一个字的去看一遍，因为这是打发时间的好办法，如果遇到哪些有精美插图的读物，我会翻来覆去看上好几遍。然而，互联网的出现让信息像是插上了翅膀一样飞速增长，看看现在我们身边各种各样的广告牌、电视、电脑、手机，那一块小小的屏幕就像是无底洞一样，可以装下任何东西，信息取之不竭用之不尽。每天在我们所生活的这个世界出现了大量的信息，信息的增长速度绝对是一件近乎恐怖的事情——信息爆炸。信息爆炸表现在五个方面：1、新闻信息飞速增加。2、娱乐信息急剧攀升。3、广告信息铺天盖地。4、科技信息飞速递增。5、个人接受严重“超载”。“相比于爆炸的信息量，我们的时间并没有变多，注意力甚至更少了”相比于与日俱增的信息量，我们的时间并没有变多，我们一天还是 24 个小时，每个小时还是只有 60 分钟。时间非但没有增加，反而变少了！因为我们把本来就不多的时间分给了不同的信息，你可能每天会刷一会抖音，看一下朋友圈，上淘宝看看自己的快递到哪了，下了班放松一下打个游戏、追个剧……不知不觉中你的时间被分割成了无数个碎片。碎片化的信息、碎片化的浏览和阅读、碎片化的时间，碎片化就是我们今天生活状态的一个写照。在这种情况下，不受干扰的做一件事情来变得越来越困难，或许你也想把注意力用在学习上，但你刚刚准备翻开一本书时，你的好友却发来一条微信消息，接下来你很难忍住不看它。当你伸手去点亮屏幕时，你的注意力就像是暴露在了空地上，被各种信息瞄准，各种广告、推送、消息……它们蹦着跳着来吸引你的关注。多数情况下你会乖乖就范，注意力被它们所吸引，马上就忘掉了刚才那个要努力学习的自己，踏上了时间偷偷流逝的奇怪过程中。二、你的“大”战场在一块“小”屏幕上在信息与日俱增的今天，承载信息的主要载体却比以往任何时候都要小。以前我们信息的主要是通过书籍、杂志、报纸、纸张这些载体来传递，在纸张作为信息的主要载体时，人们的注意力专注度是很高的，没有消息弹出、没有信息推送，很少有信息能够干扰到你。随后电视与无线广播加入其中，我们的世界开始变得丰富多彩，有了声音和动画，但是我们还是能够保持专注来看节目或听节目，毕竟信息不是很多，我们还没有学会看一眼就能分辨出哪些是有价值的信息、哪些是无用的广告的本领，一切都东西对于我们还都是新鲜的。电脑出现后，信息就像是长了翅膀一样，飞速增加，各种博客、论坛开始受到追捧。 互联网继报纸、广播、电视之后成为了“第四大众传媒”互联网发展的速度远远超过了前几任媒体。无线电广播问世 38 年后，拥有 5000 万听众，电视诞生 13 年后，拥有同样数量的观众，而互联网从 1993 年对公众开放，到拥有这个数量的用户只花了 4 年时间。获取信息对于我们而言变得容易了很多，敲几下键盘，屏幕上就能找到我们想要的信息。但我们还是要老老实实坐在电脑前，保持一个相对专注的状态，并且使用时间也很长。直到 2007 年 1 月 9 日，乔布斯发布了 iPhone，随后在短短的时间里这个小小的屏幕能干的事情越来越丰富。听音乐、看电影、联络亲朋好友、订票、购物……并且它的使用环境非常便捷，你可以在乘车时候看电影，散步的时候听音乐、躺在床上还不耽误上网购物。然而这所有的功能全都基于那快还没有你手掌大的屏幕。在手机屏幕上，点、按、滑动，所有的操作都在一块几英寸的屏幕上进行，当然即使是阅读也只能在手机屏幕这小小的面积上进行。雪上加霜的是电子屏幕比纸制阅读更加难以进行，因为屏幕的刷新与发光特性会让眼球的疲劳加快。不仅是这些，越来越多的信息都加入了这场注意力的争夺战，这让你的专注度更加难以维系，在查看一些碎片信息的过程中，最长出现的情况是看到一个有兴趣的内容，然后就会沿着主题进而搜索相关的信息，从而注意力越扯越远，形成一种“注意力游离”的状态，半小时的时间变成了一上午的闲逛，到头来也不知道自己做了些什么。所以你要清楚顾客的阅读场景发生了巨大的变化，像这种碎片化的时间已经成为了消费者使用手机的主要场景。各种各样的信息变得越来越多，注意力的争夺变得尤为激烈，消费者在这种情况下越来越没有耐心。从原先一个字一个字读，到一行一行读，再到一屏一屏读。但是我们只能在这一小块屏幕上施展拳脚，毕竟这块小小的屏幕是人们最常用的上网渠道。截止到 2019 年，我国网民规模达到了 8.29 亿，全年新增手机网民 6433 万；网民中使用手机上网的比例高达 98.6%，手机已经成为网民最常用的上网渠道！用 PC 的甚至都可以忽略不计了。上网时间又多少呢？人均每周上网 27.6 个小时！这块小小的屏幕产生出巨大的价值，以天猫 2018 年双十一交易为例，24 个小时创造了 2135 亿的成交金额，而移动端的销售额竟然占了其中的 90%以上！手机上这块小小的屏幕已经成为了移动着的激烈战场。三、你只有 3 秒钟的时间抓住顾客的眼球在“浮躁”盛行的当下，“耐心”或者说是“注意力”渐渐成为了这个时代的稀缺资源。快节奏的生活让时间从来没有像今天一样紧迫，我们不会轻易把自己宝贵的时间交给谁，除非某条信息或某件商品对你来说有很大价值！比如你在面对眼前的广告时，会有一种“麻木”的状态，即使它出现在你眼帘中，你也不会去话时间去关注它，只有看到你关注的信息出现时才会花时间去了解。面临各式各样的商品推销信息，消费者开始学会了一种实用的技能——用最短的时间去找到自己想要的商品。所以绝大多数广告信息不会得到顾客的仔细阅读，甚至都没进入到顾客的眼帘就被顾客本能的杀掉了。人们每天要面临的信息量太多了，有效的设计才会被注意。现在你费尽心思营销你的商品，用尽各种方式证明你的商品有多好，但很多商家往往会漏掉一个最重要的环节：让顾客现在、立刻、马上购买！如果没给出一个立即购买的理由，顾客的反应则是“恩，这个东西看起来确实还不错，以后我可能会买一件试试看。”但是，想让顾客主动记住你、在下次购物时再想起你是非常难的！因为人们在互联网巨大的信息流的裹挟中，已经越来越“健忘”，人们习惯收集各种各样的干货文章还有各种感兴趣的商品，但是收藏后就再也没有打开过，甚至在一段时间后重新翻看我们收藏的信息时，面面相觑感觉从来就没有见过一样。在亿万件商品中，顾客的“健忘”会更加严重，顾客看完后如果觉得“没有必要现在买，等以后非用不可的时候在说吧”，那你的营销是失败的，这就好像是一个经验丰富的推销员在给你介绍了两个小时商品后表示：您不必现在买，什么时候买都一样。多么可笑和愚蠢？你能保证顾客在下次有需要时还能想起你吗？总之，你要记住网络中的消费者普遍具有“健忘”的特点，不要指望他能记住你，如果要成交，最好的时机不是明天，不是后天，而是现在！如何唤起顾客的紧迫感，让顾客立刻下单，这又是一个详细的分支，大家感兴趣的话骉叔后面会单独针对这个方面写一篇。放射状的注意力：注意力，或者说是人们所注意的内容和方式，总会被认为是点状的。点状的注意力特征是长时间专注，比如我们在阅读一本著作时，会把注意力努力控制在这本著作的内容上，尽量避免周围的环境和信息所干扰，即使周围有某些声音的干扰，我们也会把注意力拉回来，让注意力长时间的在“阅读”这件事上。但是，这是传统的阅读注意力的形态，互联网时代的注意力已经不再是点状了！放射状可能能够更加贴切的描述现代人们的注意力形态。请你尝试阅读下面这段话：卡夫卡说人类有两大主罪，所有其他罪恶均和其有关，那就是缺乏耐心和漫不经心。对于不了解卡夫卡的人来说，注意力已经不再是点状，因为这个点跑了。你会很好奇“卡夫卡是谁？我好像听说过，但又不太了解。于是你搜索“卡夫卡”了解到他是一位伟大的小说家，耳熟能详的作品有《变形记》，好像有档节目名字就叫变形记，于是你的又搜索了这两个变形记是否有关联……你有没有注意到？短短的时间，你的注意力已经从原先的一个点，放射出了很多个点，不同的内容，不同的方向……回到我们熟悉的购物过程中，即使我们带着明确目的去购买一件商品，也总是很容易被首页的各种广告把我们的注意力给分散开。你看了半小时的漂亮球鞋，忽然才想起来要买的是啤酒。可能是那双球鞋的图片拍的太漂亮，唤起了你拥有它的欲望，让你离你原来的目的地越来越远。3秒注意力法则：你只有几秒钟的时间抓住顾客的注意力，并且激起他们的兴趣……就像宇宙的大爆炸一样，前几秒、几毫秒特别重要。因为人们在浏览时会先以毫秒级的速度来扫描一下屏幕，然后做出判断，判断哪些是自己想要看的信息、哪些不确定、哪些直接拉进黑名单！注意力的分布还和屏幕的位置有密切的关系。简单来说就是倒三角原则：屏幕上面的信息会得到更多的注意，越往下所获得的注意力也就越少。所以我们商品描述的部分，处于顶端的头图是最被重视的，顾客的注意力大半都在头图的介绍中，而我们重点优化的产品详情介绍，其实是处于相对次要的位置！互联网经济就是注意力经济：互联网经济中，无论是社交、内容、购物、游戏、视频……归根结底就是注意力经济。谁能购在众多信息中争夺到用户的注意力，获取到用户的时间，谁就获得了更多的资本与力量！四、消费者阅读模式的变革决定了设计思路的转变人类感知这个世界的方式可以分为五种：视觉、听觉、嗅觉、味觉、触觉。实验心理学家赤瑞特拉（Treicher）做过一个著名的心理实验，是关于人类获取信息的来源。他通过大量的实验证实：人类获取的信息 83%来自视觉，11%来自听觉，这两个加起来就有 94%。网络带给我们一个视听结合的虚拟空间，也就是说，在网络中只有我们的视觉与听觉在发挥作用，嗅觉、味觉、触觉的信息无法获得。但是其中听觉所占的比例远远低于视觉，因为我们更多地是在“浏览”在“看”而非“听”。我们在浏览时主要是去看图像与文字，图像和文字这两种元素基本上构成了我们的互联网世界。所以视觉是消费者对商品、对品牌判断的最重要依据你在购买衣服时，对这件衣服的面料材质、版型设计、功能特性全部都是通过视觉来获取的，而产品的质量如何？触感是否舒适？有没有特殊的味道？这些信息也只能通过视觉信息去联想，比如你看到面料的特写，会联想它摸起来是一种什么样的触感，穿着是否舒适？是否有弹力？在购买零食时，图片是不是足够漂亮、能够唤醒你的食欲？这肯定是你购买的最关键信息，至于闻起来味道怎么样？口感如何？是否有足够的分量？这些都变得不再重要，因为从图片上你会感觉到“肯定好吃”甚至你的口水都被它挑逗出来了。除了产品，对一个品牌来说，视觉也是我们对它进行判断时最重要的因素：进入店铺后如果看到的是劣质的图片、毫无逻辑的布局、没有任何品牌辨识度的颜色，顾客会心里的好感度与信赖感会迅速降低，以至于怀疑你产品的质量，在你还没开始介绍时已经拒绝了你！这就像是我们对一个陌生人的判断，基本上也都是来源于你能看到的外表。视觉是我们所有感官之首，以前是，现在更是。图片比文字更容易被记住：莱昂内尔 斯坦丁做过一个试验，他请研究对象在 5 天内看了 10000 张图片，每张图片展示 5 秒，之后再向研究对象展示成组的图片时（一张见过的，一张没见过的），他们能记住之前看到过的 70%的图片。试试展示 10000 条广告口号，每条 5 秒钟，一个人在 5 天之后还能记住多少？为什么图片更容易被记住？因为图像给人的信息是具体而具象的，在信息堵塞的今天，大脑会本能的“偷懒”，去避免思考和记忆。所以人的大脑更容易记住具象的信息，这种可视化的图像信息更容易被记住，让信息的记忆成本变得很低，所以我们更愿意去看图，而非看字。就像上面我们提到的实验一样，给你看十张图片，肯定比给你十个英文单词更容易记住。我们总认为顾客会盯着我们的每个广告，去仔细阅读我们的内容，而实际上他们只是在每个页面上瞥一眼，扫过几个关键字，点击一个自己感兴趣的链接，至于其他的部分，顾客通常连看都不看。我们不是阅读，而是扫描，通常我们只是花极少的时间来浏览大部分页面，或者只是扫描一下，寻找能引起我们注意的文字或图片。“用户看起来更像“以 100 公里的速度驶过广告牌”。这是《点石成金》中的一个比喻，而且这是在将近二十年前所提出的，当时的互联网热潮刚刚兴起，信息拥挤的情况还远远不及今日。何况今天信息量爆发式增长。如果以前是“以 100 公里的速度驶过广告牌”，那今天应该至少是“以 300 公里的速度驶过广告牌”人们已经从汽车换成了高铁。所以，顾客可能会对你的那些含蓄的文字、无关紧要的装饰无感并且忽略掉，你应该把心思放在让顾客“驻足观看”上。五、广告图的设计不要让消费者长时间思考现代生活越来越快的生活节奏和爆炸的信息让人们形成了不加思索的思考方式，并且这种现象未来会越来越普遍。——罗伯特恰尔蒂尼思考是购买路上的拦路虎：现在，随便点进一家商城，都不难找到那些充满“创意”的广告，他们通常会有两个特征：广告语都是些华丽漂亮的大词，有时还会用一些聪明的双关语，好像被人一眼看明白就是自己的文案不合格一样。设计形式充满美感，各种点缀元素和绚丽的颜色搭配，但就是没把产品展示的好看。这种设计方式最大的特点是：“充满设计与创意，但第一眼就是没看明白”这就犯了一个普遍的错误，我们前面提到过：顾客并不是盯着我们的每个广告，去仔细阅读我们的内容，实际上他们只是在每个页面上瞥一眼，扫过几个关键字，点击一个领自己感兴趣的链接，至于其他的部分，顾客通常连看都不看。这些信息不够直接了当，不够清晰易懂，顾客必须停顿下来仔细看几遍你的广告才有可能领会其中意义。而在选择点击这件事上，没人会像去写论文一样思考。很多说法规定，让顾客从点击到购买完成，这个过程中的点击几次是最好的，有的规定在三次，有的是四次。其实重要的不是点击的次数，而是每次点击时，顾客需要多少思考？这个点击的动作有多艰难。如果你的点击是让人摸不着头脑，不知道点击的下一步是什么，即使你只需点击一下，也没人去点击。如果你的每一次点击都是毫不费力的、轻松而明确的，那么就不存在必须限制在几次以内。还有一种信息堵塞的情况：总是在很小的面积内塞满各种各样的产品卖点，密密麻麻的文字、各式各样的配图、五花八门的利益点都打包给浏览的顾客。至于如何消化吸收这些信息则完全让顾客自己去思考，这也是一种错误的做法。顾客总是单纯快速浏览，很少去仔细阅读你的广告，所以顾客会选择轻松的关闭网页，重新选择一个读起来毫不费力的页面。所以，你的广告或店铺看起来都应该是不言而喻、一目了然的。六、这些原则不会改变让我们来总结一下，互联网让顾客有了哪些改变：互联网环境中的顾客专注力变得更短，更欢迎一些“小块”的信息，而非大量信息。信息泛滥，注意力却贫乏。这就表示你的广告内容必须与顾客切身相关，了解消费者的需求、渴望，这样才能抓住顾客的注意力，这是销售的第一步。顾客懂得了闪避推销，更能分辨哪些是浮夸的宣传，变得越来越多疑。这意味着你的商品介绍中要给出足够多的“证据”让消费者能够消除这种不信任感。顾客喜欢看图片，因为这样更容易记忆和理解。让顾客思考是一件成本很高的事，请把复杂换成明确易懂。互联网虽然改变了各种生活方式，但是互联网并没有改变人本身。如同劳德·霍普金斯在他的经典著作《科学的广告》中所描述的：“人类的本质是不会变的。从大部分的角度来看，现代人跟凯撒时代的人没什么两样，所以基本的心理学原则依然牢靠，因此，你永远不必将学过的心理学原则全部打破、从新建立。基本的设计原则永远经典，哪怕世事变迁，沧海苍天。尽管技术发展日新月异，但是人本身的变化却非常缓慢。我们依然是只关心与自己有关的信息，至于商家宣传自己的规模有多大，取得了什么样的成就，那些我们都不感兴趣，我们只关注自己能获得什么。就像 Jakob Nielsen 所述：人类大脑的容量不会马上发生变化，所以研究这些人类行为所得到的成果在很长时间内都不会失效。对于顾客来说，20 年前他们遇到的困难，现在同样如此。无论什么时候，去了解你的顾客都是最重要的：无论在传统的报刊上刊登广告，还是在电视上播放广告，或者现在在网页上和手机 app 上展示你的广告。都有一个必不可少的步骤，就是尽可能多的去了解你的顾客！对你的顾客了解的越深入，你的广告也就更具有针对性。不要想着设计一则广告去吸引所有人，把你的商品卖给所有人，那样结果很可能是没人被你吸引，也没人购买你的商品。了解顾客哪些信息？目标顾客的年龄范围是什么？他们是 00 后还是 90 后？有或者是更成熟的 80 后？哪种性别的顾客对你的产品更感兴趣？你的潜在顾客收入水平大概是多少？收入会影响他们的品位和生活习惯。你的潜在顾客教育水平怎样？你用的那些专业术语他们能看懂吗？你的商品是顾客的生活必需品？还是奢侈品？顾客在什么样的场景使用你的产品？怎样使用你的产品？多展示这些场景，增加顾客的代入感。你的顾客觉得最有价值的是什么？便捷、便宜、个性还是品质？顾客除了在你的商店，还会在哪些渠道看到你的信息？你的顾客长期生活在什么地方？有什么明显的气候特点？你的顾客群体有没有独特的群体文化？你的顾客是哪种消费理念？是使用为主的持家型还是重视当下享受的？以上这些问题是一些比较典型的分析方向，我强烈建议你根据用户的特点总结出一个，或多个消费者画像，可以是具有不同性格、不同性别、不同工作性质的多个消费者画像，总之要能够代表你的消费者特点，并且去不断优化和修正。这样你在设计时会有明确的方向性，你可以在进行设计前考虑“这些顾客最关注的是什么？”，设计完成后站在消费者的角度去思考“他们会对这个设计感兴趣吗？”。本篇来源：优设网原文地址：https://www.uisdc.com/law-of-attention
模型 信息 工具 大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。但 V4 模型带给我的冲击还没有完全消散，一款功能更为强大用途更为广泛的 AI 工具又横空出世了，并在国内外互联网上引起广泛关注和热烈讨论，互联网大佬、编程大神及艺术家都对其功能之强大表示惊叹，而且玩得根本停不下来。它就是由 OpenAI 公司开发、号称地表最强 AI 工具的 ChatGPT。字节、腾讯也玩起AI绘画了，效果还非常不错！大家好，这里是和你们聊设计的花生。阅读文章 > ChatGPT 官方网： https://openai.com/blog/chatgpt/ （目前免费开放测试，需搭梯子使用）提起 OpenAI 我们并不会陌生，之前为大家推荐过得 AI 图像生成模型 Dalle·2 就是这家公司研发的，而 ChatGPT 是 OpenAI 研发的一款 GPT 语言模型，我们可以将它简单理解为一款 AI 对话机器人。ChatGPT 通过模拟人类对话的方式与用户进行互动，用文字回答用户提出的问题。自 12 月初发布后，国内外网友已经挖掘出 ChatGPT 的无数种神奇用法，它带给我们惊喜也是超出想象的。ChatGPT 可以成节日活动营销方案：回答你关于生活、学习和工作的问题：或者用英语帮你写一封用语正确、言辞恳请的商务邮件，让你再也不用担心语法错误，也省去了亲自书写的麻烦:甚至可以帮你讲价，砍价能力比人更厉害：下图是网友@莱森 用 ChatGPT 生成的一首诗，主题是“用诗一样的语言为一位盲人描述黄色”，配图是他用 AI 图像工具 Midjourney 生成。AI 写诗 AI 配图，人工智能技术是真的强大。图片内容来源：https://weibo.com/u/5498125999还有网友发现可以让 ChatGPT 帮忙写代码，或者检查现有代码的错误漏洞。ChatGPT 可以在很短的时间内就写好代码或指出其中有哪些漏洞并帮助纠正，这让很多程序员都欣喜不已。也有网友想到用 ChatGPT 来应对马斯克之前对推特工程师提出的“没有新的代码更新出来你就会被解雇”的要求——直接让ChatGPT生成的代码不就行了？而马斯克自己就是OpenAI的前联合创始人之一，这么一看真有些“以子之矛攻子之盾”的意味了。上面所举的这些例子都只是 ChatGPT 功能的冰山一角，但我们已经可以从中看出 ChatGPT 具有非常强大的信息搜集、整理、罗列和生成能力，可以极大提升我们的信息搜集的速度和效率，同时也可以节省我们很多写作精力和成本，让信息获取速度与输出效率都成倍的增长。而与 ChatGPT 进行对话也是与 Siri 或小爱同学完全不同的体验，我们不会有“这是一个机器人”的感觉。ChatGPT 的语言组织能力极强，逻辑清晰叙述流畅；可以根据前面的内容理解你提出的问题，分得清语句中的多个不同主体对象；还会拉扯“抬杠”，被指出错误也能及时承认并改正，仿佛真的是一位学识渊博的人在和你对谈。当然 ChatGPT 目前也有一定的局限。据官方介绍，ChatGPT 没有联网，不能反映实时讯息或所有互联网知识，对 2021 年后的世界和发生的事件了解有限。但这样不禁会让人联想联网后的 ChatGPT 功能或多么强大和可怕。另外就是 ChatGPT 偶尔也会生成一些不正确的信息。有国外网友分享了一段自己与 ChatGPT 就“什么是速度最快的海洋哺乳动物”这一问题进行的对话，ChatGPT 在这个问题上犯了了一些常识性的错误，并在逻辑上也有漏洞；但是认错态度良好，很快就纠正了自己的回答。双方的拉扯过程非常有意思，我简单翻译了一下图片，大家感受一下。官方也承认 ChatGPT 会用“看起来合理但其实错误或无意义的答案”来回应它可能并不真正理解的问题，也就是“一本正经的胡说八道”，而且它自己也并不能认识到这些错误。OpenAI 认为目前这个问题还很难解决。这也意味着对于 ChatGPT 提供的信息或答案我们并不能完全相信，仍然要经过主动的溯源求证。大家都熟悉的常识性知识我们可能很容易就能看出其中的错误和漏洞，但如果是比较冷门或专业程度比较高的信息呢？如果不进一步追溯来源或询问专家的看法，很容易被会被它误导或迷惑。此外 ChatGPT 和 AI 图像生成模型一样，也被限制回答与暴力、色情及可能会危害社会安全的问题，以避免该工具会被人用来伤害他人或造成不良影响。有网友试图要求 ChatGPT 编写病毒代码，但是被多次拒绝；一些思想过于消极极端的问题也会被纠正。虽然如果，对设计师来说，ChatGPT 这类 AI 工具的出现肯定好事，目前的功能也足以帮助我们解决很多工作和生活中的疑问。首先就是它强大的信息搜集检索能力，可以有效提升我们获取有效信息的速度和效率，犹如一个贴心到位的个人助理，有问必答。甚至帮你写工作日报、年终总结或者出一篇设计相关的科普文章都是非常轻松的事情。如果是使用 Google 或者百度这样的搜索引擎， 我们可能还需要自己收集信息、梳理整合内容、然后再写作输出，而使用 ChatGPT，不仅可以直接收获最精准的信息，且得到文本内容不用怎么修改整理就能直接拿着用，这样的处理方式及速度在 ChatGPT 出现之前是我们都不曾想过的。ChatGPT 还可以帮助我们在国外的媒体平台如 Twitter、YouTube 或 Discord 上轻松发布内容并与他人交流沟通，拓宽我们的信息获取面——将你想表达的意思简单描述给ChatGPT并要求它翻译成对应的语言就可以了，不论是英语、日语还是西班牙语都行，而且几乎看不出机翻的痕迹。此外国外有艺术家利用 ChatGPT 强大的语言能力，帮助自己生成描述文本，然后放进 AI 图像生成模型中使用，生成效果也相当不错。如果有小伙伴也在玩 AI 图像生成工具但对英文描述文本不怎么熟悉，这也是一个不错解决方法。ChatGPT 推出后，埃隆·马斯克发推文表示它“强大到令人害怕”，还有人表示这种 AI 工具可能会颠覆 Google 搜索的运行模式。就目前 ChatGPT 表现出的功能来说，它将来在科技、数字营销、教育等领域大有可为，一些初级的文案、编程、客服等工作也可能会因此收到冲击。而且 ChatGPT 还只是基于 GPT-3 模型的衍生产品，OpenAI 已经研发出 GPT-4 模型并将在未来推出，想必其功能也将更强大惊人。目前 ChatGPT 正在免费开放测试，强烈推荐大家都去体验一下，毕竟积极了解会影响我们未来生活的新事物总是没有错的。对了在写稿的时候看到一条非常有意思的微博，分享给大家。你能看出来这篇推文是人写的还是 ChatGPT 生成的吗？欢迎大家在评论区分享自己的看法。图片内容来源：https://weibo.com/7402396589/MinQd504h以上就是今天和大家分享的有关最新 AI 语言模型 ChatGPT 的内容。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~ChatGPT 官方： https://openai.com/blog/chatgpt/ （目前免费开放测试，需搭梯子使用）推荐阅读：字节、腾讯也玩起AI绘画了，效果还非常不错！大家好，这里是和你们聊设计的花生。阅读文章 > 10秒出图，以假乱真！设计师「用嘴修图」的愿望要成真了？大家好，我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion，它可以根据文本提示自动生成恢弘奇幻的艺术，非常适合作为艺术创作的灵感来源。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/chatgpt
信息 用户 需求 一、复杂系统的交互我是做 B 端系统的交互，干这行的朋友都知道 B 端系统很复杂，对用户搜寻信息、完成任务的能力有很高的要求，使用这种系统也往往不像你刷抖音、逛淘宝一样轻松。针对如此复杂的业务情况，我时常会感觉当前我们“交互设计”或者“体验设计”这一行的行业知识基础还是不太扎实。我们大家都知道，“交互设计”作为一个极为应用性的方向，就像一张桌子，桌面上的东西是具体的界面设计知识，比如控件设计、页面排版，而桌子的四条腿则是心理学/社会学/人因学/信息科学等等稍微偏向于基础研究的学科。因此本周我找了一本信息科学领域对信息搜寻行为的入门级读物，从别的学科切入交互设计，看一看对我们的日常工作有没有什么启发。实际上信息科学和交互设计很有渊源，比如我们现在在使用的“信息架构”这个概念就和信息科学有千丝万缕的联系。而且信息科学的最初的研究领域就是研究图书馆或者公司组织这种大型数据库的，正好跟 B 端设计师的工作范围不谋而合，所以读下来的确感觉还挺有启发。今天我就摘录其中“用户信息需求分析”一节，结合我的个人感受写一点东西。“信息”的定义在学界是复杂多变的，甚至到今天也并没有形成一致的定义。在香农那个年代对信息的定义是“降低事物的不确定性”，在此基础上结合实验衍生出了我们熟悉的费茨定律。但这个定义明显不怎么考虑人的主观因素，也不太符合直觉，是一个很费脑子的定义。用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 很明显学术界也有很多人有类似的看法，因此信息科学这个经过本世纪的发展，从一开始的只侧重于信息系统的构建，到今天也加入了很多心理学/社会学的视角和研究方法，和我们设计今日“以用户为中心”的核心思路也是有些类似的。在这些不同的视角下，作者归纳出了 4 种对“信息”定义和用户信息诉求的不同理解方式，下面我把它简写为 3 种。不同的研究者从不同的角度解释了“为什么我们的用户需要信息，他们对信息的诉求有什么差异，这种需求的差异又会形成什么样的行为差异”这个困扰我们交互设计师的问题。虽然他们作为研究者的思路是比较抽象的，但归纳出来的方式其实的确都能在我们的工作中找到一些现实依据，也是一个很妙的事情。二、用户为了获得答案而寻找信息罗伯特·泰勒在 1968 发表了一篇对用户（人）的信息需求的讨论。他坐在图书咨询台旁边观察来来往往的咨询者，发现每个人的咨询行为都很不一样，而且这种不一样似乎可以被分成成几类或者几种阶段。第一类阶段的信息需求无法用言语解释清楚，用户只能表达一种“模糊的不满”，一种对信息“脱口而出的无意识的诉求（Visceral need）”。第二类需求则是有意识的，但用户还是不能很有条理地说清楚自己到底要找什么，他们的陈述往往是模棱两可并且颠三倒四的。第三类需求终于逐渐结构化，用户可以用言语表达出自己要问什么问题、找什么东西，但用户不知道上哪里去找，也不知道自己应该找谁。比如这个信息可能出现在哪个系统里？我应该找综合咨询处的工作人员问，还是应该找哪个图书区的专员问？最终，第四类需求是高度结构化的，持有这类需求的用户很清楚系统会反馈给他们什么样的数据，只是不知道自己应该怎样与系统交互（比如输入什么样的词句），才能更好地匹配到自己想要获得的信息。他对这种现象举了个例子。比如一个读者来图书馆的实际目的是为了了解不同哲学家对一个哲学概念的不同见解，但因为他个人的特质、他对图书馆系统的了解、他的过往经历等等因素，他无法将这个问题非常结构性的表达出来，比如“你能用你的图书系统帮我搜索一下含有某哲学概念的哲学书籍能在哪个架子上找到吗？”。相反，他会来图书馆问一些非常宏大的、没头没脑的问题，比如“你们有哲学书吗？”他期望的不是图书管理员跟他说“对，我们有哲学书”，而是希望图书管理员帮他澄清问题、进一步的缩小检索范围，比如“你想找哪类型哲学书呢？”这个视角在 B 端设计中的价值主要是提醒我们需要对用户能力做正确的预估，以及一定要为用户搭建稳定的概念模型。从用户能力来说，虽然书中这一节并没有提到造成这种需求差异的原因，但根据我的经验，用户本身的受教育程度、思维方式、使用复杂产品的经验都会造成类似的信息需求的差异。我觉得业内一个特别不好的倾向是总把 B 端产品理解为“高能力用户的产品”或者“专家用户的产品”，但实际上 B 端产品的用户根据行业的不同，涵盖的情况相当广泛，也不乏上文说的那样“说不清楚自己要找什么”的情况出现。从概念模型的角度上来说，B 端产品可能因为各种各样的原因，有非常多的互相毫无联系的子系统。这就会让用户（特别是新用户）对“我能看到什么信息、我可以获得什么样的服务”毫无概念。在这种对系统整体边界没概念的状态下，用户也就总是停留在第三类需求的状态下，信息获取的效率很低。比如钉钉/飞书企业版都提供了一个“集成不同系统，在飞书上建立信息门户”的功能。简单来说就是公司购买这些企业版软件后，可以把自己的一大堆乱七八糟的邮箱/数据看板/后台等等以信息展示或者功能入口的形式“挂”到上面去，在聊天软件上形成一个企业门户。为啥要搞一个所谓“门户”呢？从信息获取的角度上来说，也是因为这些散落在各处的服务需要用一个集合入口去让用户对企业所有服务形成整体概念，从而更可能提高信息需求的结构化程度。从“这东西有没有？我该上哪找？”过渡到“怎么找更快？”三、用户为了降低不确定性而寻找信息一听到“不确定性 uncertainty”这个东西就知道又是香农那一套了，但是今天我们不再讲费茨定律，而是聊一聊用户在努力降低信息不确定性时的心理感受。查尔斯 · 阿特金在 1973 年将“信息需求”定义为“个人对重要的环境对象的当前不确定性水平与他期望状态之间的差异”。简单来讲，就是我们的用户对自己当前知识的评估，和他认为的理想状态的对比。比如一个用户自认为自己完全不会弄一个复杂的申请流程，并且他认为自己的岗位应该对这个申请流程特别熟悉，他就会受这种落差和自己的动力驱使，去不停的查找这个流程的相关知识和细节。这个过程中往往伴随着很高程度的焦虑，并且因为知识的搜索本质上是无穷无尽，精益求精的，因此这个用户何时停下检索更多的取决于他的动机有多强。比如这个学习者是个产品经理，在弄清楚了申请流程，他下一步可能还想弄清楚为什么要搞这么多步骤，每一步是为了什么，再下一步想弄清楚这个申请流程的迭代过程……研究者还发现，我们了解信息的动机往往不像我们经常做设计分析时那样理性、清晰、目标明确。也就是说，很多时候用户希望了解信息并不是因为他们想要用这些信息去分析啥，而是受“模糊的不安感，一种知识空白的感觉”所驱使，这是一种感性的情感需求。读到这里我的第一感受就是，这太体现情感化设计的重要性了。在我们的交互设计中，人对信息的理性需求往往被高估。比如我做表单或者做大表格的时候总是会去问用户“这个信息为什么对你很重要？”、“你要用这个信息去干嘛呢？”但实际上用户需要的可能并不是事无巨细的、机械式的信息透传，而是一种“对整体情况的理解”、一种“了解信息的安全感”，在这种安全感中，用户不会过高的预估自己掌握信息的必要性（因为他假设自己了解全局、他假设系统不会坑他）。虽然基础的信息透传还是必要的，但假如我们的用户没那么焦虑，是不是也就不必要持续进行地毯式的信息搜寻行为，生怕遗漏一丝细节？当然这种所谓的“情感化”不仅仅是指画多几个表情包或者写几句暖心文案。放在交互设计师面前的难题是，我们如何通过设计的形式去缓解用户的信息焦虑，为他们创造一个“不需要太专业也可以轻松使用我们 B 端软件”的概念与环境？视觉上的设计是一方面，但框架层及以上还有更多可探索的空间。四、用户为了构建意义而寻找信息这个研究很有意思，持这种观点的研究者认为我们生活中的信息存在不连续性，而这种不连续性就造成了用户认知的鸿沟或者裂隙。用户需要根据自己的诉求、动用自己的经验、寻找各种信息，并且不断尝试对信息进行归类、比较，最终内化信息，填补自己认知上的的“裂隙”。这个理论横跨了数个学科，实在是有点抽象，但好在作者在 93 年在咱们交互设计相关的会议上发表了一篇文章，举例详解用户的这种类似构建信息架构的意义构建过程，所以其实咱们看他的例子也能差不多理解。接下来我就为大家讲解一下。这个研究者在 1989 年观察了施乐（Xerox）公司的一个公司内部培训课程开发流程。当时施乐有几十种不同型号的打印机和扫描仪，每台打印机都有 10-20 份文件记录，每份记录从 30-300 页不等。因为这些记录内容都没有结构化，所以这个内培小组之前的课程都是基于某几种特定的打印机类型研发的，不好推广到所有的打印/扫描仪。举个例子，就像九阳有一大堆不同型号的豆浆机和破壁机，每个的功能和参数都有一些不同。有的有免滤豆渣功能、有的有加热烹煮功能，有的转速高、有的转速低，有的底部是塑料做的，有的是陶瓷做的。都不一样，也没人画个大表格归类一下。因此，内培部之前的课程研发只针对某款特殊的“免滤豆渣豆浆机”开发，讲这部机器转速如何、烹煮功能怎么用，有什么设计缺陷要注意等等。假如九阳的销售业务员都这样一个个机器挨个学，那显然效率太慢了，所以内培部门想了一个招：将机器分几个大类，先让销售们对我们九阳的产品建立一个大概认知，后续好深入。把学习流程模块化，比如有 3 种机器都有“烹煮功能”，那咱们就专门开一节课讲解咱们这个功能使用场景是啥、主要怎么用、对应的该如何维护等等，这样学起来就快多了。并且模块化/结构化的信息也能更好地支持对豆浆机/破壁机的分类。但是对于施乐的内培部门来说，打印机的参数巨多，分类方式也很多。面对如此复杂的情况，他们应该如何做到合理分类、模块化这两件事呢？换句话说，他们怎样从这些一盘散沙的信息中构建意义？研究者发现，这分成 3 个核心阶段：抓特征、抓差异：课程的开发者会从这些零散的打印机说明文件中总结出一些代表性特征，比如“底座制作工艺”这个特征可能包含了“陶瓷、塑料”找到特征对应的具体案例：也就是尝试把文件中的一些相关的信息点放到具体特征中，比如我看见这个豆浆机的文件里有描述它的“底部由金属构成”，那我就给它归成“底部制作工艺：金属”。在这个过程中逐渐形成整个信息框架。对特征进行增删：那些没有具体案例的、和案例不匹配的特征会被删除或者修改。比如我找到好几台豆浆机的制作工艺是“全体金属，底座橡皮包边”，那么“底部制作工艺”这个分类好像就不太能容纳这种案例，我可能会把“底部制作工艺”这种特征/分类调整为“制作工艺”，下面有两个子分类“一体制作”和“分体制作”。用户就是在在自上向下的“特征找案例”和自下向上的“抓特征、抓差异”过程之间不同的循环迭代，最终建立起一套比较稳定的体系，从而建立意义和逻辑。这个过程会充满了不确定性，随时会对特征进行修改。简单来说，用户完成任务的时间=建立概念的时间+真正去进行操作或者产出的时间。在这个循环过程中，施乐的打印机课程研发小组一共迭代了 4 版不同的教学架构。最后选择了第四种。为什么第四种更好？根据作者的陈述，是因为这样表示出了一种递归结构，有利于构建全局性的信息编码（可以理解为全局的标签系统），后续可以进行自动化的聚类分析。这里我们就不展开了，以后再聊。从这个视角来看用户的信息诉求或者意义构建行为，其实有两个特别有意思的点：施乐这个构建课程的过程其实极其类似我们交互设计师搞信息架构的流程。这个模型非常强调用户花在“理解清楚事情全貌”这件事上的时间，而不像菲茨定律一样极端强调用户花在具体操作上的时间。首先从信息架构的角度来说，虽然一开始信息架构：超越 web 的什么什么那本书就有提到“自上而下”、“自下而上”地构建产品的组织系统这么一回事，但是他只是轻轻的掠过了这两个概念，具体的提炼过程比较语焉不详。在这个案例里我们可以清晰的看到施乐这帮人是如何将“自下而上的聚类提炼”和“自上而下的分类归纳”这两个行为循环往复的做，从而产出一个比较稳定的、可以涵盖大多数信息的框架。那么我们作为交互设计师做信息架构的价值就是帮助用户省略到这个“咀嚼信息”的过程，让他直接跟着我们的思路走就能“消化信息”。从用户花的时间的这个角度来讲，我们在做设计的时候，特别是做 B 端设计的时候，很多产品经理往往希望你能把所有能展示的东西全部铺开给用户，好像提升信息的展示速度就等于用户对信息的获取效率提高了。从这个视角来看，完全不是这么一回事。你东一榔头西一棒子的提供给用户大量信息，其实就是给用户的“意义构建”提供了一个巨大的难题，他需要在这个页面上“抓特征差异”，然后“抓案例”来验证自己的思路，还要不断修改自己对这一摊子事物的抽象理解模型，然后才能真正进行操作。这个视角在我来看是对菲茨定律的一个挺好的补充。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/user-information-requirements
用户 信息 页面 随着市场竞争的日益激烈，用户除了要求平台提供更多更好的产品以外，还要求以更满意的方式去展示产品，信息呈现形式的不同，对用户的信息接收和解读会产生不同的效果，从而会影响用户的满意度进而对购买决策产生影响。而下单转化率是到家业务的重要指标之一，提高用户购买率是到家业务的核心需求，因此希望优化 58 到家页面设计。页面设计就像商品的造型设计，是想要吸引消费者的重要卖点，一个成功的页面设计不仅需要做到吸引用户点击浏览页面，还需要能够诱导用户身份转变成消费者，从而进行购买行为。页面优化的探索因此，页面设计不仅需要考虑视觉设计因素，还需要考虑用户认知，探索用户购买行为与动机偏好，从而精细化的理解用户的消费特点，了解用户心智。本次调研将会在这一阶段通过深度访谈，了解用户购买渠道、服务购买关注点、以及对服务的认知等，去深入了解不同渠道的核心竞争力、现有或潜在用户的人群画像以及未来线上服务产品的购买趋势；同时，在深入了解用户心智的基础上，我们也需要聚焦到家精选核心产品线下的购买流程，分析体验问题及优化方向。眼动测试的优势在这过程中，需要我们去了解用户在线上购买流程中的关注点，从而去分析其在流程中的体验。但在访谈中，用户“所说”是否即“所想”，“所想”是否即“所做”呢？而且一些下意识的行为，甚至用户自身都难以察觉，更不用说通过言语主动表达，那么这种情况下我们需要专门的技术来测试用户在关注什么。其中眼动测试和其他测量方法相比，具有设备简单、 实验数据直观等优势，能够高效地挖掘用户的无意识行为，并获得更直观的实验数据，适合于视觉界面相关的评估实验。因此在本次研究中，我们同时引入了眼动技术，通过眼动技术揭示在不同类目下，用户在购买过程中对信息的核心关注点以及浏览轨迹，从而作为用户行为数据以支持研究结果，进而提出优化建议。百度也发过类似的实战案例，大家可以一起看下：大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 什么是眼动测试那眼动技术到底是什么呢？眼动技术是确定一个人在注视何处的技术，主要通过眼动仪收集用户的眼动数据，然后用特殊软件对这些数据进行整理、 分析，得出特定的眼动指标和轨迹，进而用来分析用户心理和用户行为。1. 研究类型眼动研究中主要的研究类型有定性洞察和定量测试2. 如何选择由于本次的研究主要目的在于页面优化，需要去发现和解释可用性问题，并为页面优化提供改善建议，因此更适用于形成性研究，通过眼动仪去观察用户行为，探索行为的背后的原因。研究过程1. 研究准备确定研究问题：确定产品需要改进的领域设备：Tobii Pro Glasses 2 眼动仪任务流程：确定任务场景+任务点击+明确结束行为+追问刺激呈现：被试间设计2. 被试选择用户的选择并非随机，需要结合研究目标和方法，选择合适的用户进行实验，首先根据本次需要优化的到家精选具体类目，将人群按常用类目进行划分；根据以往的经验，性别、年龄、婚姻状况等会影响用户的选择和操作，所以对其性别、年龄、婚姻状况按照产品类目人群结构进行配比。此外考虑用户有竞品使用情况，此次调研并不限制其竞品的使用，但是否有本品使用经验对用户的操作和感知会有较大不同，因此限制其中一半用户未曾有使用到家精选经验。基于目前眼动追踪技术的局限性，并不能够校准和追踪所有人的眼睛，因此还需根据用户眼部情况进行筛选。3. 部分结果展示① 眼动轨迹图通过眼动测试后输出的眼动轨迹图，如图 1，可以看到用户在产品首页中， 其眼动轨迹较为复杂，眼跳次数也较多，说明用户在进入首页时，试图寻找目标业务入口时，较为困难。（眼动轨迹图中，以点表示个人注视，以线代表眼跳，在轨迹图中点的大小代表注视时长，点的大小和注视时长成正比，注视序列常以点上的数字表示，通过其注视序列反应环境中元素的吸引力以及视觉搜索轨迹）结合眼动关注情况和测后出声追问，其主要原因在于用户浏览习惯以 L 型为主，在无强烈刺激下，对左上方信息易忽略，且在页面中对头部单品的展示，部分用户因位置与颜色背景原因，误将其看作是广告位，因此出现寻找业务入口较难情况。② 热点图通过眼动测试输出的热点图，如图 2，我们看到用户的注意分布情况，以及用户的关注点及其程度。在不同的区域模块下，用户关注点各有侧重，但并不是指所有热点图用户关注程度越深，代表其越感兴趣，也可能代表用户对当前信息不理解。（眼动热点图其眼动追踪测量值以彩色表示。红色代表浏览和注视最集中的区域，黄色和绿色代表目光注视较少的区域。“热量”与所代表的测量值成正比，常用多个用户获得的数据创建的聚合可视化热点图）结合眼动关注情况和测后出声追问，发现不同性别用户在选择车型时参考依据不一，且在整体页面浏览中用户相比其基础信息，对保障类信息关注度更高，此外在浏览到服务流程中时，用户的关注度较高，测后追问时用户表示在服务流程的排版下信息重点不突出、信息繁杂，需要在众多信息中找自己需要信息，对用户认知负担较重。③ 注视视频通过眼动测试生成的注视视频，我们可以看到一些很难从静态可视化图表上看到的现象，如用户在寻找某一业务的入口，因为存在对其他入口的错误理解，易误点进入其他入口，这种动态的行为，通过注视视频更能够直观表示，并且对业务相关方更有吸引力。（注视视频是个体注视点的动态可视化，由移动的点或十字线表示，并覆盖在刺激的顶部）来个总结定性的眼动追踪分析关注的是人们如何看待事物，并通过查看追踪数据的可视化进行，而定量的眼动追踪分析大多数是关于设计之间、设计和标准之间的比较，对样本的选择、实验的设计、测量指标选择、数据的处理等有更严格的处理，希望未来在产品精细化研究方向上，能够通过眼动测试给予更多的贡献。大厂是如何做眼动研究设计的？来看这份详细的经验总结！短视频的兴起极大地改变了人们信息的接收方式，也越来越多地占据着大家日常生活的时间。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/eye-movement-test
数字 用户 信息 前言1. 数字人服务分类随着元宇宙概念的大热，作为基础建设元素的数字人在去年出现了井喷式的爆发。但实际上数字人并非近几年的产物，如果从世界上第一位虚拟歌姬林明美算起的话，数字人已经产生了近 40 年。这些年来，各界对于数字人的定义和分类尚没有统一的共识。从广义上来讲，任何以数字形式存在且具有类人外观和行为的数字化资产都可划为数字人范畴。依照此类定义，我们尝试将市面上的数字人服务进行归类。从下图可以看出，数字人依照应用形态大致可以分为三类。除了由来已久的 IP 型数字人以外，市场中还出现了以完成服务为目标的业务型数字人，以及以真人为原型强调替身属性的分身型数字人。从5个方面，帮你了解什么是虚拟数字人大家好，我是 Clippp。阅读文章 > 像洛天依、AYAYI 这类虚拟偶像和博主可划入到 IP 分类中，此类方向更关注数字人个人特性以及世界观的塑造，通常会采用 3D 高保真风格和手 K 或高精动作捕捉来确保整体形象的质量。而虚拟分身型则是以现实世界中的真实人类作为原型，为其在数字世界中赋予新生命。像 Travis 与堡垒之夜合作，在游戏世界举办虚拟演唱会就是此类虚拟人的一种应用。伴随着元宇宙概念的流行，相信定位在分身赛道的产品会致力于形象制作成本的进一步降低，从而让虚拟分身能力成为新数字时代公民的基础配备。而笔者所在团队打造的数字人则是第三种–业务型数字人。与前两类不同，业务型数字人通常使用 AI 驱动来完成人机交互。面对此类型数字人，如何发挥其拟人性的优势，打造真实的服务体验是本次设计的核心要点。接下来我们将在以下篇幅中介绍业务型数字人的设计实践。2. 数字人带来的体验变革“数字人”作为信息载体 服务趋向透明化传统的交互方式将界面中不同的元素，通过最优信息组合与层级堆叠，来承载用户与计算机之间的交流，如同翻译一样让双方彼此理解。但这样固定行为路径的信息结构，对于用户来说需要适应和学习，丧失了一部分自主能动性。诺曼（Don Norman）曾提出“无界面的界面”，界面设计追求透明性，以将对人机互动的干扰降到最低。所以从本质上来看，界面是以一个“具体对象”的身份出现的，既连接又分隔人与机器，以最自然的方式牵引与反馈信息与服务。而数字人正是界面服务本身的载体，让用户脱离界面本身的屏障，用更原始自然的方式面对界面，通过自然对话牵引服务。界面成为关系的动态空间 信息流动在“人”与“数字人”之间当系统的对话由“数字人”来进行承接后，界面的价值变成了推进“数字人”与“人”之间的互动，建立连结。我们发现相比较传统的线性交互逻辑，数字人的界面信息更偏向根据当前环境与用户状态的动态推送，除反馈当前对话结果外，也会根据场景中用户不断变化的多维信息为用户进行引导与推荐，同时为了保证服务场景的真实性，也需要与当前的交互环境无缝衔接，就此可见，界面不止是任务效率工具，同时也模仿人与人之间关系构建的方式，建立了人与机器互动的人文情怀。以线下银行客服为例的设计实践1. 项目背景用户与客户价值双驱动 为虚拟客服落地提供势能在探寻数字人产品落地场景的过程中，我们发现，需要将数字人的核心特性在特定领域中发挥核心价值，才能在市场中落地生长。因此低成本高转化的线下银行虚拟人客服，成为撬动金融行业的首选落地场景。就客户价值而言，线下服务场景每天有大量人工客服机械回答同样的问题，企业要为这些重复劳动支付巨额人力成本。且服务人员素质、知识储备参差不齐，现场表现不稳定，迫切需要低成本高质量的服务工具。虚拟人本身作为信息载体，保留人与人面对面沟通方式的同时，大大提升了沟通效率与服务稳定性，且平台灵活的配置能力可支持业务实时更新，省去大量人工培训成本，成为企业信息人工服务的新触点。就用户价值而言，角色身份上，面容亲和衣着职业的客服人员更能获取用户信任，引发用户交互兴趣。互动形态上，虚拟人打破了传统界面交互框架，将人作为信息交互对象，让服务有了具体“身份”，更易上手，信息获取更自然，让信息化程度不高的用户也可以摆脱设备恐惧，实现零门槛交互。2. 场景关系构建打破设备隔阂 让 “职业形象” 等候在 “ 职业场景 ”大屏设备仅仅作为承载数字人的媒介，我们希望界面在具体场景中 “隐身”，让数字人真实站立在场景中，获得用户亲和信任感，专注与她面对面沟通，不感到违和与侵扰。为达成这个目标，我们需要探究以下几个问题：如何塑造金融客服的职业形象如何营造自然真实的对话场景A.如何塑造金融客服的职业形象塑造数字人的形象，我们一般会从人格特质与职业特质两个方向分别对数字人的外表、情绪动作进行综合考量：① 外表维度即构建数字人的脸型五官、发型、妆容服饰。对于业务型数字人，我们需要从人格特质与职业特质两方面来思考他需要拥有什么样的面容、五官特征以及服饰要素。人格特质：银行客服需要表现出聪明专业的职业特点，同时又具备与人亲和的性格。参考相关面相心理学研究，浓眉大眼、脸型略尖的外表会给人聪明的印象，而嘴角上扬、眼型略弯，脸型棱角不凸显的外表会更亲和讨喜，在模特的选择上我们也尽量靠近这些特点。职业特质：偏分扎发是银行客服常见的职业发型，妆容不易过浓，显得干练有精神又平实亲和。在衣着的选择上，除职业工服外，为保障不同银行品牌的服务通用性，我们在工服上添加了品牌露出位，透传客户品牌形象。② 情绪动作维度即构建数字人情绪动作的选型与表现。因业务型数字人主要承载效率型任务，我们在情绪动作的选型上弱化了数字人人格特质的表现，更偏向于职业特质的表现。职业特质：为体现数字人职业特性，我们观察了线下银行客服的标准职业动作，选择了双手交叉于上腹部，丁字步站立的默认站位体现职业素养，同时减少无意义的动作设计，利用数字人的动作表情传达有效信息，如点头表示聆听，挥手表示内容推荐与指引，动作表现上选择幅度小、中性、自然的动作，以在表现鲜活灵动的同时不过分侵扰用户注意力。B.如何营造自然真实的对话场景为了能让用户在真实的线下场景有效且愉悦的体验服务，我们观察了线下银行的服务链路与空间设计，思考数字人全链路的进店服务体验，就以下两方面进行了思考与拆解：① 舒适安全的社交距离为了让数字人真实存在于场景中，与用户建立舒适安全的沟通，我们需要探究合适的人物身高与大小以保障用户与虚拟人之间距离适中交互自然。以 2019 年中国人平均身高作为参照，将 168cm 作为数字人实际身高，以便与用户建立平等沟通的视角。通常人与人在进行一般社交活动时，会保持 1.2m 左右的礼貌距离，在大屏的使用场景中，用户与屏幕需保持 50cm 左右的操作距离，根据成像原理我们发现数字人的实际身高需要进行适当缩放才可以真实模拟礼貌社交距离。我们采用真人模拟的测量方式，让 2 位 168cm 身高的同事面对面站立保持 1.2m 距离来进行大小观测，将真人模拟感受到的变化移植到虚拟人的大小调整上，做出相对舒适安全的社交距离。② 高效流畅的场景体验关于线下场景体验的拆解，我们主要思考两个方面，一是如何让大屏界面能够完美融入线下场景，数字人能够真正站立在场景里；二是拆解从用户进店到服务结束全链路体验，区分近远场的不同诉求精细打磨体验。场景模拟。关于数字人背景的设计，我们模拟了真实的线下客服场景，设立咨询柜台，本次方案中考虑到后续适用不同品牌银行接入，在品牌透出的视觉元素区位均可快速配置与替换。近远场体验拆解。Endsley 提出的三层情境意识（SA）模型，为信息处理提供了较为成熟的方法论，该理论分为三层：1.对当前情境中成分的感知；2.对当前情境的综合理解；3.规划预测该情境的未来情况。将情景理论与远近场相结合可将用户认知与设计要素做如下拆解：远场：建立认知，引导靠近根据上述的情境意识的三层模型，在情景获取阶段，重点在于为用户提供明确的元素，帮助用户快速建立有效认知。界面中所传递的信息包括：动态的、模拟真实身高且身着职业装的真人数字人，模拟银行前台的柜台，银行 logo 以及“空闲中，欢迎咨询” 的状态字样；进入情境解释阶段，对上述的元素进行整合诠释，用户能够明确建立起“智能的、可咨询、可信赖、可使用”的认知，此时结合用户咨询业务的需求内因，能够激发体验冲动；到情境反馈与预测阶段，用户会预测能够与数字人进行互动，解决需求，因此主动靠近，由远场转为近场。近场：建立关系，引导行为银行柜台使用人群数字化程度不高，交互方式上尽量符合用户自然对话的惯性认知，实现新手的无感过渡，降低学习成本与认知负荷。我们在具体交互方式的构建上，总结出以下交互设计思路供参考：主动服务当用户进入与数字人的交互区域，大屏自动通过图像人脸识别获取用户信息，数字人进入服务状态，主动说话并推出服务卡片，让用户能够快速建立服务认知，聚焦任务操作。指引明确触屏用户天然习惯点击操作，在信息输入方式上，对于不同类型的任务需要引导用户使用 GUI 操作还是语音输入表达诉求，强调：“试试说 ” 与 “选择” 的引导差异。同时在交互中的每一个状态下，都需要让用户明确我现在可以做什么，如何做，可以获取什么结果。要求数字人与用户交互的每一个节点明晰，引导通俗易懂，操作简单。渐进式引导为减少用户理解成本，我们在信息与操作的引导上采用单一路径，用户只需要跟随虚拟人的逐步引导，傻瓜式操作即可流畅完成服务。分支处理在一问一答的语音交互中，有很多潜在分支需要处理才可以还原自然体验。比如用户在服务进行中长时间未给出明确操作，至少会有两种情况：1.我们认为用户可能存在困惑，虚拟人会主动引导用户进行限定内容选择或聚焦提出问题。2.本身反馈内容较复杂冗长用户未操作则可能是还在消化信息，虚拟人需要延长等待时长等等。3. 交互式数字人大屏的设计要点A.交互式大屏的功能分区交互式大屏有自己独有的特性，本质上是一块超大触屏，但从交互方式与信息焦点两方面与传统触屏差异很大。在交互方式上，从手指的点按变成的整个手臂的移动，点触以多指拍按与扫动为主。在信息焦点上，用户曲臂操作屏幕，距离大屏的距离在 0.5m 左右，平视可接收的信息焦点有限，更多信息需要转动眼球或头部，那么用户的视线需要被引导与定位，信息需要按区块划分优先级，让用户更舒适流畅的获取信息。最佳操作区的设定我们根据人因工程学，确定出大屏的最佳交互区域最佳可视区，来展示核心卡片信息。以 55 寸大屏，1.68m 平均身高用户来进行方案探索。依照人体站立不屈膝，右侧大臂可旋转横向和纵向角度计算出最佳交互区域。根据最佳交互区，我们可以将核心交互卡片放置于此，次级交互放置于外沿，边缘区域不适合放置操作内容。最佳可视区的设定垂直可视区域：在用户保持站立时，最大视区为视平线以上 50 和视平线以下 70。视平线以上 25 至视平线以下 30 范围内为最佳眼睛转动区，能够以放松的状态识别信息，所以展示内容的最佳垂直视角在标准视线以上 25 至以下 30。水平可视区域：双眼区域大约在左右 60 以内，观察超出左右 60 的物体时，则需要集中精力才能识别物象，因此核心内容区域在左右 60 视角内较为合理。根据最佳垂直视角与水平视角的人因特点，结合头部小幅度垂直向下 15 转动扩大视角，我们计算得到 3 个可视区的划分，核心可视区展示主要对话流信息；次级可视区展示次要的状态信息，如收音反馈状态；最大可视区内尽量不放置信息。基于对交互区和可视区的计算测量，在页面布局中，我们将信息卡片最大程度的置于有效视区和次级交互区的重叠区域，用户可以最舒适的状态进行阅读和操作；将结束服务按钮放置在次级交互区外延，减少对核心内容的注意力分散；将音波引导动画放在次级可视区，通过色彩与动态变化对用户进行引导。B.交互式大屏的视觉设计文字清晰易读考虑大屏的尺度与真实的使用场景，界面中内容也需要相应的放大以适配大屏体验。在金融产品场景下，界面中最主要呈现的内容是文本信息，所以设计中要充分考虑文字的辨识度。合理运用字阶与对比度，能够有效提高信息的可读性，通过对比多种字号在不同距离下（远场、近场）的测试效果，对字体进行了标准化定义，阅读舒适的字号应不小于 36px，辅助说明的文字可降至 24px。除了字号大小，合理的对比度也对文本的易读性起到至关重要的作用，参考 WCAG（Web 内容无障碍指南）中对比度的不同级别建议，考虑公共的使用场景及部分中老年使用人群，因此将常规信息对比度设定为 7:1 以上，辅助信息不低于 4.5:1。视觉焦点一致用户在浏览内容需要头部有上下小幅度转动，为了让用户形成相对稳定的阅读模式，减少视线的跳跃感，我们将内容区的信息展示设定为用户输入和客服回答相对应的两条内容，且将它们的位置固定展示，这样用户在每次阅读信息时，视觉焦点可以保持由同一位置开始。数智人合理展示数智人作为服务温度与情感连接的对象，信息的展示要尽可能避免对数智人面部的遮挡，我们将信息的最大显示区顶部设定在数字人下颌向下 10cm 处，确保数字人能够较为舒适的呈现在用户面前，当页面发生滚动时内容与数智人的展示也较为合理。但也存在有大量信息展示的需求，为了满足高密度信息的有效传达，针对图片内容进行弹窗式扩展展示，在该场景下，将弹窗高度设计为完全遮挡数字人的方式，避免卡片高度跟随内容变化而遮挡部分数字人面部的情况出现。次级可视区信息强化用户对于次级可视区的信息获取效率有所降低，且该区域对于颜色和动态的获取更为敏感。因此想要提升该区域信息的传达效率，可通过强对比颜色及增加动态的方式进行强化。本次设计中语音输入的引导信息放置在次级可视区，因此通过采用大面积深色蒙层，强化收音区信息有效露出，较为明显的状态切换，能够从视觉上让用户对语音输入的引导高效获取。关于未来思考在数字人未来场景的应用中，会越来越趋向于实时的自然交互。计算机视觉、语音语义理解等 AI 服务能力日益精进成熟，多模态信息输入使得数字人的感知能力逐渐增强，我们在复杂信息的拆解与应用上，需要从用户作为人本身的需求与高效完成任务两方面出发，深度思考数据加工与应用逻辑。在交互反馈上，数字人与 GUI 的配合方式也是值得研究的方向，对不同的应用场景，在“人”与“ GUI ”的信息通道选择侧重会有很大差异，比如娱乐场景更偏向于人本身的情感化表现，而任务场景更侧重于信息高效传达。对于虚拟人本身生动性的表现上，也应该更多的考虑虚拟人相貌、情绪、动作、表情在人物世界观、生命感、人格化、业务属性等方面的映射与表现，真正实现人与“人”的连接。对于以上方向我们也都在探索的路上，期待 AI 与人类能日益共生共荣，共创未来。欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/digital-human-design
信息 用户 地图 地图 App 已经不再满足导航工具，通过信息挖掘和拓展，更希望能够成为人们日常生活中重要的信息平台。刚好回老家期间，高德地图用得比较多。使用过程中发现了一些比较有意思的细节，觉得有必要总结下分享给大家。主要包括以下 3 点内容：1. 信息架构升级，构建清晰的信息边界2. 信息挖掘，更好的服务用户出行3. 智能感知，提高用户行为效率信息架构升级，构建清晰的信息边界高德 10.0 版本升级了平台的信息架构。原有的版本并没有做信息分层，而是以地图画面为核心，将各类信息分散展示，出行功能路径入口共用“路线”功能，影响了用户的操作效率。另外为了减少各个功能对地图的遮挡，功能选项只能尽可能的融合、隐藏、精简，造成了部分入口信息层级较深，拉长了用户的行为链路，同时不利于功能和内容的拓展。在新的版本中，信息架构回归到传统的底部 Tab 导航形式，可以更好的拓展信息承载空间，满足信息平台型产品的设计定位。目前底部导航分为“首页、附近、消息、我的”四个频道，用户可以分类查看内容，信息结构更加清晰。图片来自 AlibabaDesign在首页中，高德地图打造了“内容中心”来承载更多信息。将”地图“与”内容“相互独立，构建出了明确的信息边界。交互设计上，内容中心采用弹性浮层方式，分为了 3 种模式。默认模式下，内容中心展示快捷功能”工具箱“和常用地点，方便用户快捷操作。当“内容中心”下拉收起，可以释放更多的屏幕空间给地图。上滑则进入“更多模式”，为用户提供更丰富的信息。“内容中心”的信息会根据用户实际位置，搜索地点而变化。例如我在北京时，会显示北京的专享服务。而我搜索上海的地点，首页下方则增加了上海的推荐信息。信息挖掘，更好的服务用户出行1. 地图信息颗粒度细化，提高信息承载能力一个地点除了基础的地理信息外，还需要集合各类相关信息，为用户做好出行服务。如何将复杂多样的信息整合，实现“所见即所得”展示给用户呢？高德地图采用了“内容分类”的方式来展示地理位置的二级信息，从而提高地图信息的承载量。当地图定位到景区范围内，会显示厕所、出入口、餐饮、停车场等信息选项，用户点击即可查看相应的内容。而大型商场聚焦放大时，用户可以查看商场楼层的店铺信息，将细节信息融入在地图中，通过多层级的信息划分，展示不同颗粒度的内容。2. 实景信息，提高用户决策准确性当我们进入一个陌生区域，乘坐公交车时，需要准确知道公交车站的位置。而公交车是有方向的，一旦我们进入了错误的方向，可能需要横穿马路或者绕行很远才能抵达正确的公交站点，这会花费用户很大的体力和时间成本。当用户规划出行路线时，地图路线中通过冒泡提示形式，引导用户查看公交站点的实景地图，方便用户更准确的定位。3. 场景化信息挖掘，为用户提供更好的服务体验当用户搜索酒店时，在页面上方会展示“查看附近酒店”的快捷按钮。方便用户快速查看周边的酒店，进行对比选择。如果用户在非营业时段搜索商业场所，会展示不同的信息状态。例如深夜搜索时，显示“已打烊”状态，而在清晨搜索时，显示”未营业“状态，并告知营业时间，避免用户跑冤枉路。当用户查询驾车路线时，如果查询的地点不是特别明确，系统会提供多个地点供用户选择，并增加了各个地点的选择比例，降低不熟悉用户的选择成本。另外选项中不仅有停车场景，还考虑到了接送人临时停车的场景，实现了多场景的覆盖。4. 激活用户群，实现信息共享当用户计划出行时，希望了解目的地的天气、游玩情况。有些信息平台无法给出明确的答案，于是高德地图将发言权交给了有经验的用户，搭建相互交流的群组，实现了信息的共享交换。智能感知，提高用户行为效率1. 用户行为态势感知当用户打开 App、搜索地点或者行程导航时，高德地图会主动感知用户的导航需求，提供相关的信息引导。例如上下班路线、消费券、团购优惠、停车场建议等等引导信息，引导用户的快捷操作。另外用户查询地点时，地图还会扩充展示周边地点的卖点信息，希望能够为用户提供更多的参考信息。2. 行程查询记录的保存用户在查询打车行程，但未打车时，信息会保存在首页信息中，便于用户随时调用出行。以上就是我的一些使用心得，欢迎小伙伴们评论区留言交流~下期再见。10个产品细节剖析，看看大厂是如何做设计的！UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/amap-design-highlights
表单 信息 抽屉 本篇文章总结了 B 端表单设计中的 3 大设计模式，4 大呈现方式及使用场景，希望对大家有所帮助。前言在 B 端设计中，表单设计是常见的需求设计，对于 B 端来说，表单的信息复杂程度会根据业务的实际情况而定，常见的简单表单设计只需要将表单的字段平铺在页面中，用户输入相关信息即可完成表单的任务。但是在 B 端的实际业务中，表单的需求有简单也有非常复杂的场景，如果都采用简单的平铺方式，必定会让表单填写任务变得难以操作。对于不同的表单模式使用的业务场景不同，表单的呈现方式也具有多种选择，并且适用的场景也不同。下面我总结了三种不同的表单展示方式，四种表单的呈现方式以及应用场景。表单设计的 3 大模式1. 平铺平铺：指的是将表单信息完整的排版在界面中。无论是在 B 端还是 C 端设计中，平铺的表单设计是最常见的，这样的表单用户可以一览看全所有表单的信息（但是对于表单字段多且复杂的场景，平铺也不能一览所有）。所以对于平铺的表单设计而言，一般是针对表单信息简单且字段信息较少的情况，如果字段信息小于两屏且字段信息强相关，那么我们可以选择采用平铺的表单设计方式。例如：飞书的审批表单页面设计就是采用平铺的设计方式2. 分组表单的第二种设计方式是分组，分组的排版方式又可以细分为三种方式。分别是：折叠分组、区域分组、标题分组。下面分别介绍了三种分组的详情。折叠分组折叠分组：指的是将表单信息分类显示，通过点击按钮展开和收起表单的具体信息。在 B 端设计中，会存在很多设置类表单设计，最常见的图表数据和样式外观设置，对于一个图表而言，会让用户自定义图表的各种信息设置，并且需要在一个表单中显示完整图表设计所涉及到的范围，所以大多数都会采用折叠分组的形式。折叠分组用户可以一眼看全表单所涉及到的大范围，用户锁定某个标题范围后，再展开去完善对应的具体表单信息，这样用户就可以不用在庞大的表单信息中去寻找自己需要完成的表单信息。折叠表单一般会包含一些默认的数值，用户可不做调整，不调整也不会影响功能的使用。如果说表单信息需要用户手动完整的填写或者确认，那么最好不要选择这种表单的设计方式。例如：Grafana 的自定义 BI 图表设置信息就采用了折叠的表单形式区域分组区域分组：指的是将表单信息分类显示，通过矩形背景划分区域，形成小组表单信息。在 B 端设计中，一些复杂的表单会通过区域分组的形式排版设计，可以将一个表单的信息通过信息的关联关系划分不同的区域形成小组信息，这样有利于信息的归类以及信息的填写。用户在看到复杂表单的时候不会被庞大的表单迷惑，可以更好的找到表单字段，也可以让用户填写表单更有秩序、更清晰。区域分组的使用场景，一般也是针对复杂表单且具有强相关的信息关系。例如：下面是我在工作中所运用的一个区域分组的表单设计方式。标签分组标签分组：指的是将表单信息分组标签化，形成独立的小表单信息，分为上下结构和左右结构。上下结构左右结构复杂的表单可以采用区域分组的形式，还可以采用标签分组的设计形式。标签分组可以一眼看全所有分组大类信息，对于一个表单涉及到多种信息字段的情况，并且每个组的字段信息都是独立的，不是强相关的，那么我们就可以采用标签分组的形式。标签分组可以直接点击标签快速定位到想要查看和填写的表单区域，这样使用户操作更加快速便捷。并且也让庞大的表单信息得到更好的整理，让用户使用更方便，可降低用户对于庞大表单信息的焦虑感。下面可以看一下在 B 端产品中我对于一些复杂表单标签分组的设计方式。3. 分页分页：指的是将整个表单信息通过多页的形式展示。分页表单设计一般会针对具有步骤前后顺序关系的表单。也就是指需要先完成上一步表单信息才能进入到下一步的表单页面，形成一个完整的闭环流程才能使表单信息提交成功。同样的，下面截图为 B 端实际业务工作中的一个分页表单设计页面，因为业务的保密性，所以就不做太多的业务信息，只需要看到分页表单的一个实际设计场景即可。表单的 4 大呈现方式及使用场景1. 弹窗（对于信息较少的表单）最常见的表单呈现方式即弹窗，无论是在 C 端还是 B 端，我们都随处可见弹窗形式的表单。弹窗表单一般呈现在屏幕中间，底部有暗色遮罩层，将底部信息与弹窗表单隔离，使用户专注于表单的填写。弹窗模式的表单一般是针对表单信息较少的情况，并且填写表单不需要关注底部页面的信息。用户可以在弹窗表单中顺利地完成表单的任务。案例：2. 抽屉（内容信息较多，且与底部信息强关联）抽屉形式的表单一般是针对表单信息较多且与底部信息具有强相关的关系。用户在填写表单时需要根据底部信息的辅助完成，或者需要同时操作底部面板中的相关信息，来协助完成表单信息及让交互使用更方便。抽屉形式的表单展示方式是从屏幕右侧弹出，有时候也会有从底部弹出的情况。这里主要分享从右侧弹出的抽屉表单模式，抽屉模式还分为三种模式：有遮罩层的抽屉模式、无遮罩层的抽屉模式、挤压模式。下面分别介绍这三种模式的区别以及使用场景。有遮罩层的抽屉模式有遮罩层的抽屉模式指的是抽屉底部有暗色遮罩层，将抽屉表单信息与底部页面信息隔离，这里的遮罩层与上面弹窗中的遮罩层是同样的作用。那么就有人有疑问了，既然都是有遮罩层具有同样的隔离作用，那为什么要从右侧弹出，而不直接和弹窗一样展示在屏幕中间呢？有遮罩层的右侧抽屉模式的表单具有以下特点：01：右侧抽屉出现位置在屏幕的右侧，虽然有遮罩层，但是仍然可以看到遮罩层底部页面的相关信息，如果在填写表单的同时需要关注底部信息，并为填写表单做辅助，那么右侧抽屉表单模式比常规的弹窗模式更适合。02：右侧抽屉模式的表单面积更大，更适用于复杂表单的呈现，可以展示更多的信息。案例：无遮罩层的抽屉模式无遮罩层的抽屉模式指的是抽屉底部没有暗色遮罩层，抽屉直接浮在底部内容之上，一般通过对抽屉背景做投影来区分底部内容与抽屉内容，让两者之间能更清晰地辨别使用。无遮罩层的右侧抽屉模式的表单具有以下特点：01：与有遮罩层的模式一样具有可根据底部信息辅助完成表单信息的填写的特点。02：适用于复杂表单且可以展示更多的字段信息。03：另外有一个更加重要的特点是：由于底部内容是没有遮挡层，所以用户还可以同时操作底部页面，使用户切换信息更便捷，使用效率得到提高。案例：3. 挤压模式挤压模式指的是表单信息从右侧出现，将原本画布的内容区域宽度减小，从而展示右侧表单。这样的展示方式界面需要做适配，做到画面中的元素自动适配画布大小，以满足正常的阅读和使用。挤压模式与上面的无遮罩层的抽屉模式具有相同的特点，另外挤压模式还具有可以完整看到原本界面中的内容，右侧表单可以自由展开和收起。但是对于表单信息庞大且复杂的业务情况就不太适用于右侧挤压的模式，因为表单宽度占据太多会影响原本界面内容的展示，原本内容会因为宽度区域太小而布局错乱的问题，如果因为右侧挤压的表单出现而改变原有界面内容的布局，对于用户而言使用也不太友好。案例：4. 页面（单独表单填写，且信息量较多）当表单信息庞大且与原界面无强相关的可以直接采用新页面呈现。使表单单独成页更好地展示表单信息减少其它信息的干扰。案例： 总结B 端的业务比较复杂，不同的表单信息的复杂程度有所不同，需要根据实际业务的情况合理地选择表单的展示方式，也需要考虑用户的使用场景以及业务表单的关联关系。简单且不具有强相关的表单可选择平铺，呈现方式可选择弹窗；复杂且具有强相关的表单可选择区域分组，呈现方式可选择无遮罩层抽屉/挤压；复杂且不具有强相关的可选择标签分组，呈现方式可选择有遮罩层抽屉；具有先后顺序的则选择分页，表单信息独立可选择分页的呈现方式（并非强制的表单设计选择方式，需要合理考虑业务哦！）6000字干货！6个方面帮你循序渐进掌握表单设计前言表单是 UI 设计中很常见的元素，不管是 PC 端还是移动端，表单几乎是无法规避的 UI 控件，用户可以通过表单完成线上购物、信息交换、文章订阅等任务，使用范畴极为广泛且牵扯到方方面面。阅读文章 > 欢迎关注作者的微信公众号：「设计小余」本篇来源：优设网原文地址：https://www.uisdc.com/form-design-model
文字 插画 信息 大家好，我是和你们聊设计的花生~ 今天我们继续聊聊海报设计。海报设计中一个比较令人头疼类型是多文字海报。由于功能需要或者甲方要求，文字数量极多，但海报的版面有限，如何在其中合理有序地安排大量文字信息，就成了一个需要好好思考的问题。今天就为大家总结了多文字海报排版的 3 种常见思路，从中我们可以学习如何高效地排版多文字内容，并清晰地进行内容传达。纯文字排版在文字信息过多的情况下，减少或直接不要图片或装饰元素，为文字排版腾出更多的空间，是最简单直接的方法。纯文字排版非常考验设计师梳理文字信息的能力，需要做好文字信息层级的划分，并熟练运用排版四原则。1. 划分好文字信息层次划分我们能一眼从海报上获取的信息是有限，所以要对文字信息的重要程度进行排序。吸引注意力、展现重点信息的文字，比如主标题、副标题、时间地点、活动特色等，信息层级较高，所以字号及版面占比要够大，才能第一眼吸引目标观众的注意。对活动、人物、注意事项等的详细介绍，是为想进一步了解活动内容的人提供信息，属于次要内容。无需第一眼就能看清，在字号上不用太大。版式设计中的文字层级怎么学？来看高手的实例演练！编者按：看似简单的版式设计，细节其实非常多。阅读文章 > 2. 排版四原则排版四原则即亲密性、重复、对齐和对比，能帮助我们将文字信息清晰有逻辑地进行呈现。更多关于排版四原则的详细讲解可以看这里自学体系第一课！写给新人设计师的界面排版原则（上）前面的视觉体系和大家简单提到过传统平面排版的四大原则：亲密性、对比、重复、对齐。阅读文章 > 图文分离在海报中插入图片、插画或相应的装饰元素，可以更好地表达活动主题和内涵，海报风格也会更突出亮眼。图画与文字分开处理是其中最高效的一种方法——插入单个装饰元素，并根据元素特性安排文字的位置，非常灵活。这个“元素”也可以是图形化的主标题，这样处理是一举两得——画面内容更加丰富有趣，主标题的信息层级也得到凸显。如果是整版的图片或者插画，需要有足够的留白空间用来安排文字，或者通过处理图片为文字留出空间。无论图片或插画的形式如何，文字部分还是做好信息层级的划分，并遵循排版四原则。图文结合这里的图文结合并非简单的将文字与图片排在一起，而是用图示或者插画取代大段文字，以可视化的方式地信息传达出去。图文结合的方式很适合场景化或者流程化的内容表达，比文字更加直接易懂，也能让海报主题鲜明，形式统一。图文结合的方法可以完美的和 2.5D 插画结合，配合文字变形搭建一个完整的插画场景，非常有意思。图文结合的方式对设计师的手绘有一定要求。如果觉得有难度，我们也可以通过一些免费可商用的插画图标库来弥补，这样效率也更高。拯救手残党！2021年4月值得收藏使用的6款插画图库插画图库大都遵循着特定的某种风格，并且数量不如其他的图库那样数量丰富。阅读文章 > 拥有这15个插画图库，足以抹平你和插画师之间的差距！不会画画是很多设计师朋友的「硬伤」。阅读文章 > 总结以上就是 3 种常见且易学的多文字海报排版方法：纯文字排版、图文分离和图文结合。多文字排版的方法还有很多，但是无论是哪种方法，梳理文字的信息层级都是最基础也是最重要。做好这一步之后，结合排版四原则，海报内容就能清晰有逻辑，信息传达也会更高效。本篇来源：优设网原文地址：https://www.uisdc.com/poster-layout-design
语言 字体 信息 导语 | 本文主要面向设计师们，文章从界面设计的角度介绍了在出海产品中，多语言设计的相关原则及要点，希望可以帮助刚接触或正在做出海产品的设计同学，建立起对多语言设计的初步认识。背景介绍1. 国际化与本地化在认识出海产品时，我们常常会听到“国际化”和“本地化”两个概念。在信息技术领域的官方定义下，对产品进行国际化（i18n）与本地化（L10n）处理的含义是，通过修改软件，使之能适应目标市场的语言、地区差异以及技术需要。两者概念区别有些微妙，我们或许可以用更简单的说法来解释——“国际化”意味着兼容，即用一套产品方案，来面对不同地区的用户，这叫实现产品的“国际化”。而“本地化”意味着定制，需要根据不同地区特性，进行分别处理，这叫“本地化”处理。两者的共同实现，才能更好地服务拥有不同文化背景的用户们。产品实现国际化与本地化的基本范围包括但不限于以下内容：2. 为什么要做多语言设计由上述背景可知，一个出海产品想要达成良好的国际化与本地化效果，需要整个产品研发团队从内容、设计、技术多个层面进行全面考量。对于设计环节而言，多语言设计是最需要关注的重点之一。做好多语言设计，能让产品拥有最基本的、适应不同地区的潜力——也为本地化内容的翻译呈现，提供良好的环境。国内设计师更常接触单一中文产品，但用中文产品设计的习惯来做出海产品，很容易“踩坑”。这与出海产品和国内产品的研发流程不同有关。我们团队在实际的项目经历中，发现具有一定规模的平台型产品，不太可能在设计初期拿到各语种的真实文案。因此在出海产品的实现过程中，会在中间阶段多出翻译、内容校验等阶段。因此，对于设计同学而言，如何做好多语言设计，以预知落地问题并提前规避，是一项重要挑战。认识语言差异全球文化多元各异，最直观的体现便是在语言和文字上。如何用一套设计方案来兼容存在各种各样差异的多国语言呢？这正是多语言设计的难点所在。首先，我们需要认识各类语言间存在哪些主要差异。1. 字符形态的差异字符是语句的基本构成单位。不同的文化发展背景下诞生出了形态各异的字符样式。而部分语言会共用一套字符体系。常见的字符体系有如下几种类型。从图形的角度分析这些字符的形态，不难发现，像拉丁字母以及西里尔字母，字符笔划构成相对简单，且笔划多为平直线条或是规整的弧线。而像阿拉伯字母、泰文等字符，组成相对复杂，笔划线条特殊的曲度较多。这是非常关键的字符形态差异，它将会影响后续我们对字体的选择。2. 内容长度的差异在不同语言下，同样含义的内容进行翻译后，得到的文本长度可能会有较大的差异。如何通过设计兼容这些信息，正是做多语言产品最大的难点所在。因此，在多语言设计阶段，非常建议基于英语进行设计(善用谷歌翻译)，以便于更直观地对信息兼容进行处理和判断。这里需要提醒的是，不建议大家用最习惯的中文进行占位，因为中文可以精炼文字，信息本身较短，很容易产生多语言适配的“盲区”。如果设计想要预知信息翻译后的长度，以便制定布局策略，可以用 google 文档自带的翻译函数 fx=GOOGLETRANSLATE(文本，“源语言”，“目标语言”) ，以及字符统计函数 fx=LEN(文本) ，快速实现多种语言的批量翻译和字符数计算，为设计提供初步参考。*资料 1: 我个人使用 google 文档创建的简易小工具，供参考（梯子访问）： https://docs.google.com/spreadsheets*资料 2: 全球语言简码表： https://www.zhudc.com/browser/201623. 词汇分界的差异语言还分为带有词汇分界、和不带有词汇分界两种情况。带有词汇分界的语言有英语、俄语等，分界意味着他们的语句以单词为最小单位。而中文、泰语等语言是没有分界的，一个语句中除了标点符号分隔，字符都是相连的。这也是影响段落布局的一个重要因素。4. 阅读顺序的差异阅读顺序分为 LTR (Left to Right)和 RTL (Right to Left)两种。我们常见的绝大部分语言都是从左到右的阅读顺序，而使用特殊右至左顺序的，则以阿拉伯语为代表。不同的阅读顺序，决定了布局时信息对齐、元素排布、甚至图标图示，都可能存在不同的规则。综上，在正式启动设计以前，建议设计同学向业务方了解清楚，平台会支持哪些语言。明确语言类型，了解以上差异后，才能更好地制定设计方案。核心原则：可读性与包容性根据对于不同语言差异的认识，以及我们团队在项目实施过程中的经验，我们可以将多语言设计的核心原则总结为可读性与包容性两大原则。可读性包含(1)字符可读性 (2)内容可读性；包容性包含(1)布局包容性 (2)认知包容性。1. 可读性原则字符可读性字符可读性，主要针对的是在应用风格化字体时，需考虑到在不同语言下的显示效果。部分产品因为品牌调性或美术风格的需要，会引用带有特殊风格个性的字体。而我们发现，市面上大部分风格化字体都是基于拉丁字母设计的。而那些形态特殊的字符，可能会比较难找到同种风格的风格化字体。即便有，它们的可读性受字体影响的风险会更高，因此检验字符可读性尤为必要。例：在一次运营活动中，我们将英语版本转为印地语版本时，两种语言都使用了名为 Teko 的风格化字体。当地合作的印度伙伴看到落地页面后，向我们反馈，这种字体导致他们的语言可读性下降许多。所以当产品覆盖的语言类型特别多时，如果要一一对应特殊语言去找风格化字体，无论是设计成本、或是页面加载成本都会特别高。这种情况下，可以适当考虑放弃部分语言的风格化字体效果，转用基础字体，优先保证字符的可读性。内容可读性内容可读性，指页面容纳信息时，是否给用户传递出了足够多的内容，让用户能达到最基本的信息理解，而不是靠猜。因此我们要针对多语言内容的长度特性，留有一定信息空间——尤其是信息使用了缩略处理时，需谨慎地确认露出的部分是否足以被用户理解。2. 包容性原则布局包容性布局包容性，即需要设计同学在元素、组件、模块等设计中，要进行弹性的设计考量，通过合理的布局设置，更好地兼容极多或极少内容的情况。布局的包容性对于平台型产品尤为重要。如果是一次性产出的、纯展示型产品，细致地根据实际内容检查调整适配效果并不需要太大功夫。但如果是需要长期维护、内容持续变更的平台型产品，一个高度包容性的布局，才能帮助产品用有限的成本达成较好的落地效果。例：商品货架卡片是一种典型的弹性空间，没有固定信息，因此信息布局以竖排为主，保证横向空间足够，不增加换行难度。输出时也要兼顾不同信息丰富度下的规则。字体的选择同样会影响布局包容性。当你选择了一个默认字符尺寸太超乎寻常的字体（过扁、过宽）时，在产品存在多语言多字体的情况下，会发现即便是同样的文本参数，单个字符宽度却相差很大。这会使得文本展示空间变得更不可控，导致适配风险增大。认知包容性认知包容性，是指设计时需要考虑到不同文化背景下用户，对于某些元素、符号的认知是否相通。例如，当产品出现需要单独使用图标来指代信息的情况时，需尽量保证选用的图标具有全球性的大众共识，并且不能产生歧义。当然，若非极端情况（如文字信息实在是兼容不下），大部分场景下还是建议尽量将图标配合文字使用，帮助不同语言、不同互联网认知水平的用户更好地理解并使用产品。设计实施要点接下来，我们将从基础样式、通用布局、组件使用和图标设计四个维度，介绍多语言设计时需要关注的问题要点，以及相关的处理建议。1. 基础样式字阶在同样的文字参数下，不同语言字符的体积视觉感受确实会略有不同。但遇到体量较为复杂庞大的产品，建议使用同一套字阶应对，尽可能降低设计成本和维护成本。可以基于本平台用户群体量级最大的语言为准来制定。行高为了让文本能更弹性的适应场景需要，建议文字默认带有行高，不按区分单行/多行情况，也便于字体样式的统一管理。2. 通用布局关注文本空间预留文本空间普遍情况下，多语言场景下文本长度会大于中文场景的文本长度，因此需要考虑预留更多文本空间，以保证信息露出的有效性。过小的露出空间（如只能露出一个单词）会让用户无法理解内容，产生困惑。选择排列方式在多语言设计中，排列方式的选择，需要视功能的实际场景确定。两类信息在同一水平下横排，就必然会需要分割有限的宽度空间，这种情况下如果文本超长需要换行时，信息可能会显得略微杂乱；但它的好处在于节约纵向空间，在信息不长或者横行空间较大的情况下仍可以使用。如果使用上下排列的方式，文本容纳的空间也将会更大，换行时的显示效果会相对更为可控。当图标与文本内容组合出现时，同样也需要考虑合适的排列方式。竖排更强调图标，可以应用在强调状态的场景下，如结果页；而横排时图标与文本同级，图标做辅助的说明作用，更适用于轻提示、列表等场景。但值得注意的是，在多个图标及文字并存的场景下，多语言设计布局会更常用横排的方式来兼容信息，例如快捷操作，或是一些入口场景。横排更能保证文字说明的露出效率，以及提升样式布局的规整度，并且也更方便内容条目的拓展。关注段落空间注意最小段落宽度当页面的横行分割较多时，单个段落宽度就会变得较小。此时在某些语言场景下容易出现单个单词换行，甚至宽度都容纳不下一个极长的单词情况。因此，在多语言场景下，需要保证段落有一定的宽度容纳信息。移动端小屏幕建议谨慎使用一行三个的布局方式。“加大”有限宽度排版时也可以通过改变排列方式加大段落宽度，只是这样会导致同样高度下可展示的卡片数量变少，信息密度降低，因此需要根据实际情况取舍；如果实在改变不了段落宽度，还可以通过缩小字号或字间距，变相加大宽度，尽可能容纳多一些信息。关注信息对齐常用左对齐如前文所说，不同语言在书面上的最小单位不同，为了更好的兼容各种情况，建议多用左对齐。因为像英语这种按单词分界的语言，很难保证每行内容宽度一致，并且中文常用的两端对齐的效果也并不能适用。多语言场景段落的左对齐相比居中对齐，更能带给用户较好的阅读体验。同类信息水平对齐当一个卡片模块中有多类信息并存时，需要关注重要信息的水平对齐，确保阅读动线的流畅，便于用户获取信息。限定高度内使用下对齐下对齐的使用，能帮助设计师在不改变限定空间尺寸的情况下兼容延展更多信息。例如大图卡片空间内的文本。下对齐之所以优于上对齐，是因为它能避免信息不足时，可能会浮在空中的情况。特殊的“右对齐”——阿语规则阿拉伯语界面需要根据一定的规则来满足这个地区用户从右至左阅读的需求，但其中也存在一些并不需要用 RTL 做处理的信息。设计阶段如果想要快速产出 RTL 界面，也可以应用设计软件中一些现有的插件资源来实现。协作中也可以将阿语规则与开发同学优先对齐，由开发实现后，最后再进行细节的检查。3. 组件使用标签组件在中文场景下，标签通常精简为 2-4 字。而在英语这类带有分界的语言下，通常建议标签内最多不超过两个单词，或是使用数字和符号代替，如 20%off 或 -20% 代替 20 percent off。如果一些辅助描述信息，必须展示 3 个及以上单词才能说清楚，建议以文本形式放到界面中，而不是使用标签组件，以保证信息的可拓展性。例：亚马逊的标签一般情况下只会承载促销说明用的短词组。而对商品的更多信息补充，如配送范围、官方认证等，会直接用文本的形式补充在商品列表中。按钮组件竖排的按钮组合相比横排按钮，能兼容更多信息，因此在多语言产品下的使用会更为广泛。非均等场景的按钮组合，需要限制图标下文字长度；如果为可能分界的语言，建议使用单个单词，否则建议更换成其他按钮组合样式。通知栏组件在移动端的多语言产品中，通知栏组件一行容纳不下全部文案的情况非常常见。在文本超出通知栏宽度的情况下，需要灵活使用信息横向滚动、或是带操作的方式，允许用户进入下一级或配合气泡、弹窗，确保用户有办法能获知完整内容。选项卡组件当选项卡选项大于等于三个时，建议使用等间距的选项设计，而不是均分宽度的选项设计，以避免文案溢出，同时显示信息更均匀紧凑。4. 图标设计要点选用有大众共识的图形图形需要满足认知包容性原则，可以多去观察成熟的全球性产品，何时会使用到纯图标的场景，又使用了什么样的图标。基础图形如代表播放的三角形、代表喜欢的爱心型，都是比较具有大众共识的。另外一些本身模拟了常见物品的图标，也不容易出错，如代表录制的摄像机、代表收藏的标签等。避免出现特定指代元素在图标设计中，可能会使用到一些特定的信息作为装饰，如文字或者是符号。如果这些符号带有特定区域，如美元的货币符号、或是赞的汉字，在全球性多地区的产品图标中必须谨慎使用。建议用更通用的元素代替，避免产生歧义。RTL 场景图标规则RTL 场景中，并非所有图标都需要镜像。例如暗示真实物体时，图标可以保持一致。需要镜像的常为带有方向含义的图标。有个比较特殊的场景值得说明：在内容播放场景中，播放按钮以及进度指示反应的是播放的方向，因此保持从左至右即可；而音量值的大小控制，是需要镜像的。更详细的镜像规则可参考： https://material.io/design/usability/bidirectionality.html落地还原在完成设计输出后，如何与开发同学配合落地，尽量在真实文案上线前打好适配基础，也是设计师需要投入精力关注的。1. 设定规则设定适配规则在设计方案交付到开发时，需要预先明确一些规则与开发同学对齐。例如在非通栏的容器中，需要向开发同学示意信息的极限宽度和内边距，并且明确超出该范围的情况下，应直接省略、滚动显示、还是换行处理。如省略处理，需要检查省略号前展示的内容是否可被用户理解；如滚动显示处理，需要评估是否会过于吸引视线，打扰到用户；如换行处理，需要进一步明确极限行数，保证容器高度可控。在交付设计稿前，设计师应有意识地在设计稿中尽可能展示极限情况，再配合沟通，更能提升双方协作效率。设定字体应用规则为了呈现效果等合理性，字体选择也必须进行更详尽的适配考量。以下内容主要介绍在网页产品中，可以如何制定字体选择和应用的规则。我们在项目设计的过程中进行过一次对游戏类网站中字体应用的研究，总结出一些规律：即多数网页产品通常会定义风格化字体和基础字体两种。风格化字体以凸显品牌调性/美术个性为目标，常应用于标题；而基础字体则应用于所有正文或控件当中。基础字体的选择一般从网页默认可引用的字体库中选择即可。常用的系统字体有 Arial 或者 Helvetica 等。如果在字体声明中没有特别列举某些语言的字体，浏览器在识别时会自动转为提供对应语言的常用系统默认字体，如 Thonburi（泰语）、Geeza Pro（阿语），因此不需要针对所有语言逐一做字体声明。2. 验收效果走查适配效果在走查还原效果时，建议多运用代码走查，在 html 结构中增加文本或是增加模块，检验开发同学是否有进行响应适配情况的处理，处理效果是否符合预期。检查字体显示情况着重检查 font-family 的规则，是否符合不同语言下的效果预期。其中需要注意，如果需要特别声明中文字体，务必把英文基础字体最前置，以防中文字体包中的字母样式覆盖英语场景。另外也需要检查你选择的网页系统字体，在不同语言下实际应用中的效果是否符合预期。在阿拉伯语的网页下，tohoma 覆盖后文字会看起来特别粗，暂不能特别明确是否是字体问题，但因为存在风险，我们将不会选择 tahoma 为第一基础字体，也不会列进字体声明里。结语文字是一个产品触达用户的桥梁，而出海产品的多语言适配，需要产品、设计、开发、翻译同学多方通力配合，才能尽可能达成较好的效果，呈现给各地区用户使用。本文主要以设计师视角介绍了多语言适配设计过程中需关注的要点和建议，希望可以帮助设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。但多语言适配涉及到的细节之多，在某些场景下并非只有唯一解，需要整个团队一起，具体问题具体分析，才能打磨出更友好的出海产品。如对本文有任何问题建议，欢迎指正、补充或讨论~产品出海如何做好设计？来看这篇近6000字的总结国内互联网近几年发展迅速，在很多方面都超过了一些其他国家互联网的发展阶段。阅读文章 > 欢迎关注作者「腾讯CDC体验设计」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/multi-language-design-guide
用户 位置 信息 我们比较喜欢做新的功能（或产品），因为可以在较短的时间内看到效果，更具挑战性，仿佛也更能体现一个人的能力。尤其在现在这个人人提倡敏捷开发的时代，大家都在拼命的往前赶，生怕自己落后于竞争对手，被竞争对手新的功能优先抢占了市场，所以经常忽略了现有功能的用户体验。如果开发完一个功能，就把它丢在一边，浪费了人力、财力不说，还有可能因为不好的用户体验，不仅没能吸引更多的新用户，还会造成存量用户的流失，那真是得不偿失啊。既然提升现有功能的体验那么重要，我们又该怎么优化现有功能、提升用户体验呢？我总结了一个方法，提升用户体验三步曲，方法仅供大家参考，如果不合理之处，请大家予以指正。该三步曲的内容为：我现在在哪？即现有功能存在哪些问题？我要去哪？即针对存在的问题设定目标，也就是我们想要达到怎样的效果？怎么去？即解决方案是什么？下面，我将通过一个实际案例来简单介绍下，优化现有功能、提升用户体验的三步曲。我现在在哪？为什么要先明确我现在在哪，明确产品当前存在的问题呢？这就好比医生给病人看病，只有明确了病人的症结所在，才能对症下药。我们一起来看下下面这个案例。现在的 app 一般都需要获取用户的位置权限，通过用户的定位进行个性化的推荐，提供精准的服务，给用户带来了良好的体验。我自己也习惯在使用 app 的时候，默认允许 app 获取我手机的位置权限，这样就可以根据自己的位置筛选需要的信息了，非常之高效。可是，这么实用的一个定位功能，如果做的不好，很可能会遭到用户的吐槽、投诉，甚至是用户的流失。现在有一个线上预约洗车的功能，用户可以先在线选择洗车地点、洗车时间，填写其他必要的信息，完成预约操作。预约成功后，就可以在预约时间至该洗车店洗车，这样可以大大节省用户到店等待的时间。既然需要线上选择洗车店，那么就需要有个“附近洗车店”的查看功能，该功能可以根据用户的定位由近到远展示附近的洗车店（这里主要介绍定位问题，暂不考虑用户手动搜索洗车店等情况），所以需要先获取用户的当前定位，才能准确的显示附近的洗车店信息。可是，用户虽然开启了 app 获取手机定位的权限，却未开启手机的 GPS 定位，此时，该页面因为获取不到用户的位置信息，一直处于 Loading 状态，直到 1 分钟后，才弹出“获取位置失败，请检查您的获取位置权限是否开启”的提示信息。这个功能存在的问题，主要有以下 3 点：响应慢，在获取不到用户的位置信息时，在 Loading 状态停留了 1 分钟，这个时间也太长了。有研究表明，在=1s 的时间显示反馈结果，用户会明显地感受到延时；若是>10s 以上，用户极有可能直接转身离开了。而在移动端，时间的标准还会更短，通常的说法是“3s 等待”，即在移动端，若超过 3s，用户就会转身离开了。提示信息不明确，该提示说让用户检查获取位置权限是否开启，可是用户明明已经开启了 app 获取手机定位的权限。操作路径较长，没有提供用户直达开启位置信息的入口，用户需要先离开 app，再去打开位置信息开关，最后再返回到 app 进行操作。我要去哪？明确了存在的问题，那么我们的目标也就清晰了。针对上述 3 个问题，我们设定的目标是：快速响应，响应时间
用户 信息 模型 最近在 12306 网站购票时，弹窗中展示了大段的文字信息，我只是匆匆扫了两眼就果断关闭了，实在没有耐心逐字读完。特别是节日抢票的场景，用户更不会有心情去看这些提示信息。所以在做产品设计时，需要注重信息的传递效率。B 端产品通常用在 PC 端，屏幕显示区域大，在做设计时会不自觉的添加较多的信息，反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递？我总结了以下 3 个原则：匹配用户心智模型心智模型指的是人们心中根深蒂固存在的，影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结，去认知世界。做设计这么久，竟然没听过心智模型？今天，我们来聊点不一样的东西。阅读文章 > 《About Face4:交互设计精髓》中提出了 3 种模型，实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型，越符合用户心智模型的设计，产品越容易理解。B 端产品页面内容变化较少，更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中，用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框，就知道需要填写内容；看到步骤条引导，就知道多步操作；看到 Radio Button，就知道是单选。因此方案设计时，设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型，避免因为组件使用不当，造成用户产生错误认知。例如考虑到用户的视觉动线，“新建”主要、高频按钮通常放在左上角，方便用户浏览和操作，而辅助功能按钮会放置在右侧，用户也逐渐形成了这样的心智模型。如果主操作按钮放置在右上角则违背了用户的心智模型，用户使用产品时，需要建立新的心智模型，改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升，个人认为有些得不偿失。信息的层次性B 端产品业务比较复杂，页面内容也会较多，信息的有效组织尤其重要。信息设计不是简单的内容堆砌，需要根据用户场景和需求做出优化处理，构建有效的信息的层级帮助用户去理解业务内容。信息层级包括 2 个方面：1. 系统空间分层在一个系统中存在着空间分层，当页面较为复杂时，需要通过合理的内容分层，有序的展现内在逻辑关系。B 端核心交互就是“增、删、改、查”，其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成，例如弹窗、侧边浮窗、跳转页面等形式。不同的信息在不同系统层级中相对独立的展示出来，保证了信息的层次感和秩序性。2. 页面信息结构复杂业务场景下，单个页面会承载大量的信息内容，需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。1）高效组织——卡片化设计在 B 端产品中，为了保证功能的完整性，必须要一个页面中展示给用户。逐条平铺，散点式的信息展示会造成信息密度过高，缺少层次性。而卡片方式可以很好的聚类相似信息，分割差异化信息，有助于降低信息的复杂性，帮助用户快速定位信息、浏览内容。2）化整为零——步骤化设计面对复杂的信息内容，用户容易产生畏难情绪。将复杂内容分步拆解，把用户的关注点从页面内容转移到步骤进度上，可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。另外步骤化设计还可以将散点内容归集到一个任务流程中，引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导，可以方便用户快速完成系统基本配置，避免用户操作的行为成本。3. 页面元素设计不同于 C 端产品，B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要，勿增实体”。页面内容需要以简洁为主，避免无关要素形成信息干扰。而设计师更加感性，担心设计过于平淡，会在界面中添加各种视觉元素，反而会增加用户的认知成本。让设计更有说服力的20条经典原则：奥卡姆剃刀编者按：我们都知道在设计中简化不必要的元素和操作会提升产品的效率，那么这是什么原理呢？阅读文章 > 信息的可理解性B 端产品通常业务具有一定的专业性，用户门槛较高。在复杂业务场景下，必须让用户能够较为清晰的理解产品及功能，才能保证信息的传达效率。1. 帮助信息B 端产品需要尽可能地降低用户学习成本，但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息，解决用户在使用过程中的疑问，帮助用户更好的理解业务内容，减少用户的记忆量。同时帮助信息还需要具有拓展性，当提示信息无法完全解决用户疑问时，还需要能够引导用户，查看完整的帮助文档，减少用户翻查资料的成本。2. 可视化设计数据可视化设计在 B 端产品中应用较多，例如概览页面，通过图形化的方式将数据的内在关系更直观的表达出来。在某些特定的场景下，内容页面也可以通过可视化展示帮助用户理解信息，例如常见的身份证图片上传等，很多用户无法分清楚正面反面，借助图片可视化提示，便于用户更好的理解信息。写在最后体验设计行业需要创新，但是 B 端产品设计需要更加谨慎。尊重用户的习惯，完整表达业务逻辑性、保证内容的可理解性，是设计师必须去关注的。从4个方面，帮你掌握B端产品设计利器「信息设计」图表图形、图像符号、地图，是我们生活中和设计实践中经常接触到的信息设计形式，这些设计制图在有限的平面空间里讲述了立体的故事，把信息清晰高效的传达给用户。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/b-end-information-design-rules
信息 用户 业务 在决策类产品中，用户的行为路径一般从信息分析场景到信息决策场景。系统关键信息密度的高低是影响用户决策速率的重要因子。因此我们建议从「信息拆分与重组」、「功能高效聚合」两个层级出发，以提升关键信息在页面模块中的的密度。B 端有效信息密度提升设计框架的颗粒度由粗到细可总结为三个层级，分别为基础层、功能层与信息层。首先是基础层，B 端产品多场业务景、多用户角色、多任务流程的关键性差异决定了业务侧信息是一切设计的出发点；再者，需依据业务场景定义、角色定义与任务流排布的相关内容链接与聚合产品功能；最后，基于以上信息，使用交互与视觉相结合的设计方法，降低用户与系统的交互成本，引导用户聚焦产品核心能力，提升关键信息在页面中的密度与触达效率。「信息拆分重组」：在 B 端系统中，信息拆分与重组是依据业务与产品内容对信息进行重新组合，以求达到低跳转、高密度、有效触达的设计目标。「功能高效聚合」：在 B 端系统中，功能高效聚合是依据业务场景与业务逻辑对产品功能进行重新整合，旨在单位时间、单位面积内的带来更多商业效益/效率提升。案例一：入库计划-销售计划确认产品设计方法：信息层拆分与重组。项目背景：基于对计划方式的调研及整理，结合业务侧对于销售计划确认模块提供参考信息过少、浏览体验较差等问题，对明细表格及其他部分进行整体体验升级。用户痛点：销售计划确认明细表格的浏览与分析效率低下，导致线上计划确认难。设计目标：依据业务逻辑对表格信息进行拆分与重组，减少并优化用户眼动轨迹，提升信息展示密度。案例二：全流程数据概况产品设计方法：功能高效聚合项目背景：对全流程进行数据可视化，分环节数据监控，同时展示时效等更多维度数据，便于业务快速定位异常并跟进处理。用户痛点：用户在产品方案中无法快速获取到履约率相关数据，在一定程度上影响数据分析与决策的效率。设计目标：依据业务逻辑排布浏览分析全流程数据任务的起点、过程与终点，缩短优化用户眼动轨迹，提升信息触达时效。最后以上就是「关键信息密度提升设计」的全部内容啦～录入流程设计、任务中断回溯设计已经发布，感兴趣的小伙伴记得阅读收藏哦～后续会为大家带来「场景化设计」等 B 端的设计方法，希望能给正在从事或准备入局 B 端的的小伙伴带来启发，也希望跟大家一起探讨更多的 B 端设计方法。B端案例实战！执行类产品的录入流程设计指南执行类产品中，信息录入是用户工作中最常见的场景之一，用户按照要求录入信息提交给系统，系统整合信息以完成执行结果。阅读文章 > B端决策类产品设计指南：任务中断回溯设计在 B 端产品线特别是在决策类产品中，针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中，特别是在决策类产品中，经常会出现因为需要决策的信息量多、任务处理周期长而造成任务（主动 or 被动）中断，用户反复多次进入任务处理流程的情况。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/density-lifting-design
标签 用户 信息 在 B 端产品线特别是在决策类产品中，针对在较长时间段内任务中断回溯的场景的设计方法在 B 端产品线中，特别是在决策类产品中，经常会出现因为需要决策的信息量多、任务处理周期长而造成任务（主动 or 被动）中断，用户反复多次进入任务处理流程的情况。针对在较长时间段内任务中断回溯的情景场景，从用户心理和业务场景出发设计快速定位任务进度的「状态标签」，在任务列表查询区提供「标签类别筛选」以及在任务处理详情页面「同步状态标签及关键信息」以保持视觉连贯和逻辑映射，从而增强用户定位能力，消灭负担及提高决策效率。B 端决策类产品流程图在这里，简单概括一下决策类产品的整体流程，用户通过逐条或批量处理待决策的任务最终完成所有任务的决策。在此过程中或主动或被动的会出现任务中断的情况，那么用户想要返回任务清单查找未完成或者处理中的任务就需要耗费时间和精力费力查找，这必然导致工作效率的降低。通过任务中断回溯这一设计手段，用户能够快速定位、精确查找，提高工作效率的同时带来更为平滑的用户体验。以 B 端-营销标签洞察产品为例项目背景：整合其他来源渠道的标签，并提供标签挂站内商品的服务。用户可通过各维度查询符合条件的营销标签，并可以针对标签进行修改后审核采纳。用户痛点：业务侧需在一周左右的时间中审核几十条甚至上百条营销标签，任务处理周期长，会出现主动或被动中断任务的情况，在重新开启任务处理流程时，需要从成百上千条任务中找出未审核或未采纳的任务后进行决策。设计目标：解决较长时间段内的审核中断回溯问题，使用户在每次进入该模块时，可以快速定位到未审核的标签。A「状态标签」：在标签表格中增设标签类别字段。标签类别分别为“已收藏”、“未收藏”、“已采纳”、“未采纳”、“新标签”。同时，设计三种颜色的标签来分别承载三种标签类别，使用“icon+字段”的视觉手段按状态差异化呈现，且该标签位于表格前列，依据用户浏览轨迹来辅助业务侧第一时间即可识别表格中不同类别的标签信息。B「标签类别筛选」：在页面查询区提供标签类别的筛选功能。中断后通过筛选“未采纳”、“未收藏”，即可快速查询到待审核的营销标签。C「同步状态标签及关键信息至其他场景」：将每条营销标签的“状态标签”及“关键信息”同步至详情页面。当用户点击表格中的“标签解读”按钮后，新页面打开标签详情页面，即用户能够同时打开多个详情页面。可在一定程度上无限拓展在某一时间内处理的标签个数。同时，在详情页面的页头展示该标签的“状态标签”与表格中该条的关键字段信息；在详情页面的页尾吸底展示“收藏”与“采纳”两个决策按钮，提升用户的审核效率。最后以上就是「任务回溯设计」的全部内容啦～～后续会为大家分享录入流程设计、关键信息密度提升、场景化设计等一系列的设计方法，希望能给正在从事或准备入局 B 端的的小伙伴带来启发，也希望大家一起探讨更多的 B 端设计方法。8000+干货！B端设计师要懂的信息架构一篇关于信息架构的深度解读，希望对大家有所帮助。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/task-interrupt-backtracking-design
用户 操作 信息 引言近一年来，Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用，深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点，总结下工具软件的体验设计的几个原则。事先声明，本文不是对比软件工具孰优孰劣，仅仅是为了探讨设计技巧，希望对你有所帮助。本文主要的内容包括：效率设计：提高用户行为效率简洁化设计：降低信息噪点可视化设计：减少用户思考成本效率设计工具软件首要的任务就是追求效率，减少用户的操作成本。1. 模板化设置组件化设计Figma 拥有强大的组件功能，类似于 Axure 中的母板，但是更加灵活。既有父子继承关系，实现了修改父组件后，子组件可以同步修改。但是子组件又有一定的独立性，内容可编辑，保证了灵活可用。而 Axure 母版则是强制性的，一旦修改了父组件的内容，子组件必然修改。样式模板化在 Figma 中，用户可以创建自己的色彩、描边和阴影样式库，在设计中随时调用，一劳永逸，减少了频繁调整样式的操作成本。2. 选择代替输入预置选项可以有效的提高用户效率。例如字号设置时，Axure 并没有预置选择项，用户需要手动输入修改。在 Figma 中则预置了常用字号，用户下拉选择即可。另外 Axure 默认字体是 13 号，而 Figma 是 14 号字体，更加贴合设计师的主流使用字号，减少了用户的修改次数。3. 批量修改批量修改是我们最常用的提高效率的设计手段。Figma 和 Axure 都有 padding 设置功能。不过 Figma 可以一键操作，用户输入一次就可以修改四个边距，调整效率更高。而 Axure 想要设置四边等距，则要逐个修改，操作上相对繁琐。简洁化设计在工具软件中，对象的属性栏应该是用户的高频操作区域。整体布局上，Figma 和 Axure 基本一致，都是包含了 3 个模块。可以设置对象的各种属性、交互效果设计等。而基础属性模块更是用户操作的重中之重。不过 Figma 属性栏通过信息分级展示、内容精简、有序布局等设计方法，带给用户更好的体验。1. 分级展示，隐藏不必要的内容创建元素时，Figma 属性栏默认只显示位置尺寸信息、图层透明度和填色等基础信息，描边、投影、导出等设置项只显示标题，内容全部隐藏不展示，保证了操作信息的所见即所得。当用户增加设置项时，系统都会给出默认设置，用户根据需要只要修改内容即可。另外 Figma 还采用了交互操作，减少页面的信息量。例如可下拉的选项默认不展示下拉按钮，而是在鼠标悬停时展示，从而让原本信息繁杂的页面变得更加清爽。而 Axure 则将内容信息平铺展示，无论用户是否需要操作，都会显示设置项的内容。这样的布局设计确实可以减少用户一次点击操作，但是低频操作的设置项反而增加了页面信息量，成为了页面的信息噪点。2. 适配用户习惯，减少页面信息量用户为了提高自行为效率，不会对所有页面元素命名，其实用户的命名频率并不高。所以 Figma 在元素属性设置中，没有修改元素名称的选项，而是放在了图层列表中修改。而 Axure 元素属性中，命名作为首要内容放置在了最顶端。3. 统一的对齐方式，让信息更加有序两者在信息布局和对齐上也有所差异。Figma 采用的是上下布局的方式，上方是功能标题，下方是设置内容。信息层级更加明显，也更加符合用户的浏览习惯。同时具有很好的一致性。而 Axure 以左右布局为主，左侧是标题信息，右侧是内容项。我个人理解这样的布局方式是为了压缩高度方向的尺寸，尽可能的保证设置项一屏完整展示出来，避免出现滚动条，增加用户操作成本。但是这种布局方式却造成了内容展示的混乱。另外不同长度的底边型输入框，也增加了内容的繁杂和错乱感觉，造成了页面信息的无序感。可视化设计在设计工具中，可视化设计更多的用在位置相关功能，辅助用户更好的理解信息，从而降低用户的思考成本。所以两者在设置选项中都增加了可视化的形式。例如上文提到的 Padding 设置，Fimga 采用的是可视化的形式，用户直接对号填写就可以了，用户的思考成本更低，甚至可以说是 0 成本。Axure 中的圆角设置、边线可见性设置也都采用了可视化的形式。并且可视化还具备操作功能，方便用户操作。写在最后当然 Figma 中的设计细节不止这些，不过很多设计并不是 Figma 的全新创新，而是在 Axure 和 Sketch 基础上优化而来的。所以有价值的设计并不一定是为了翻天覆地的推倒重来时，也可以站在巨人的肩膀上，做出符合自己产品定位和特色的设计方案。想做好微交互设计？我总结了这 8 种常见类型！大家好，我是 Clippp，今天为大家分享的是「微交互设计」。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/learn-design-from-figma
用户 操作 信息 老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。普适的适老化设计理念世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：1. “强烈“好于“柔和”针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。2. 善用“辅助”和“替代”针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。3. “点击”好于“滑动”针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。4. “具象”好于“抽象”针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。B端产品引入适老化设计也值得深思在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。另外我们看下 C 端与 B 端的主要差别：C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。适老化设计在POS中的应用留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。在对 POS 系统进行改造时，我们是按照以下设计思路进行的：第 1 步:沿用旧系统规则与结构B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。设计思路：梳理业务逻辑和功能模块：沿用旧系统规则与结构。制定框架：定稳定一致、拓展性强的信息框架与导航栏。统一专业术语：信息表达（文案）与原有系统尽可能保持一致。遵从使用者习惯：原系统中可能存在一些不够美观或不合常理但却实用的快捷入口及交互方式，可以整合优化后进行复用。第 2 步：理清主要用户与使用场景想要了解使用者的真实痛点，需从场景出发。第 3 步:用适老化设计原则去解决场景中的问题POS 使用场景有很多，这里列举 3 个常见的使用情境：可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。设计目标：确保信息在复杂的环境中，信息内容清晰可读。设计思路：1. 放大信息内容服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。2. 色彩对比度符合 WCAG 标准参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。3. 设计有意义的动画通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。比如用动画来展示商品被加进购物车的状态，引导下一步操作。4. 加大点击热区提高使用者点击操作的准确率和速度。5. 一屏策略在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？解决思路：进行功能筛选，满足场景中高优先级核心诉求，提取核心功能展示。模块化展示每个信息，根据格式塔的视觉感知理论，做到聚焦用户视角。可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。设计目标：追求信息的有效表达和操作的直觉性与效率。设计思路：1. 避免使用不易识别的图标B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。2. 信息的呈现符合用户眼动规律，操作轨迹越短越好可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。[9]用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。设计思路：1. 通过二次确认避免误操作在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。附上总结图：其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。结语适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。如何做好G端可视化中的适老化设计？我总结了10个注意点！前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体阅读文章 > 参考文献：[1] Cherry K E, Hawley K S, Jackson E M, et al. Pictorial superiority effects in oldest-old people[J]. Memory, 2008, 16(7): 728-741.[2] Persson H, Åhman H, Yngling A A, et al. Universal design, inclusive design, accessible design, design for all: different concepts—one goal? On the concept of accessibility—historical, methodological and philosophical aspects[J]. Universal Access in the Information Society, 2015, 14(4): 505-526.[3] Vanderheiden G, Tobias J. Barriers, incentives and facilitators for adoption of universal design practices by consumer product manufacturers[C]//Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Sage CA: Los Angeles, CA: SAGE Publications, 1998, 42(6): 584-588.[4] Wang M H, Liu S F. Study on Innovative Gestures Applicable to the Elderly[C]//International Conference on Human-Computer Interaction. Springer, Cham, 2020: 200-211[5] Huang H, Yang M, Yang C, et al. User performance effects with graphical icons and training for elderly novice users: A case study on automatic teller machines[J]. Applied ergonomics, 2019, 78: 62-69.[6] 世界卫生组织网站. 世界卫生组织发布《关于老龄化与健康的全球报告》[J]. 中国卫生政策研究, 2015, 8(11):1.[7] Rahman M, Ripon S. Elicitation and modeling non-functional requirements-a POS case study[J]. arXiv preprint arXiv:1403.1936, 2014.[8] Web Content Accessibility Guidelines (WCAG) Overview[EB/OL].[9] Gutenberg Diagram — Why you should know it and use it[EB/OL].本篇来源：优设网原文地址：https://www.uisdc.com/b-end-elderly-design
在路上
飞翔的企鹅
张大湿
表哥
落霞与孤鹜
