品牌 需求 创意 哈喽，各位设计同僚大家好，我是造视品牌中心的品牌总监图层叔。很荣幸能在这里给大家分享一下我的个人职业生涯，以及这 10 年从一个单纯的技术型设计师如何成长为一名具有品牌思维的创意团队管理者。「服务品牌」倍轻松、松下、森马、WMF、自由点、卡士酸奶、十月结晶、水密码、原始黄金、盐津铺子、鲨鱼菲特、慧曼洗碗机、尔沫卫浴、德佑湿厕纸、传奇会茶叶……一、我的成长经历我是 2012 年在电商野蛮生长期进入电商这个行业的，在 2017 年开始创业。在这个时段是我成长最飞速的时候。让我从一个只关注技术的设计师，转变为一个具有品牌思维的经营者。也从最开始只追求技术上的提升，到系统化去学习品牌理论（在认知层面有很大的改变）。所以在创业初期思维的局限性，导致前期有大量的试错成本，在思维转变后，慢慢从开始做低端的设计，一步步成长为具备品牌思维的负责人。二、什么是品牌思维？首先要明白很简单的一个底层逻辑“供需关系”，因为所有产品和人的接触都是有供需的。设计也是需要搞清楚设计中的“供需关系”。无论是我以前，还是有部分的设计师，都是以技术为王，这样就会导致在设计时过于“自嗨”，就无法去洞察“消费者、品牌、产品、运营”之间的关系是什么。那么如何解决供需呢？ 1）需求：这个项目需要什么？ 决策人是谁（运营、老板、设总监），需求是什么？品牌当前阶段想要解决什么问题？品牌的发展阶段（萌芽，发展、破圈、成熟），品牌的历史是什么，品牌的内核是什么？产品在这个阶段需要怎么样去突破？产品是新品还是老品，新品如何形成差异形成流量爆品，老品如何奠定地位和标准。 消费者对于品牌和产品的需求是什么？消费者对于产品的市场需求，功能需求的挖掘。供给：我有什么？在这个项目如何解决一一解决这些需求？那么我们就以上面的需求罗列思维框架，举个例子大家就能理解了。例如，我们做的盐津铺子，盐津铺子在用户认知是一个很传统的品牌。随着消费的升级，人们对于休闲零食的需求不仅仅是口感和味道，升级为“社交属性”。“打破旧的烙印，焕发新的印象”这个就是在各个需求维度中找到的成果，通过这个成果与品牌需求、产品需求的结合提取了整个视觉打造的核心:打破消费者对于盐津铺子传统陈旧的烙印焕发新的印象在传承工艺美食的同时变，得年轻、潮流、有趣好玩。让年轻消 费者产生兴趣点，从而产生共鸣。怎么把传统的传承工艺用年轻时尚、有趣好玩的方式表达。再去倒推到我们视觉呈现：产品包装、IP 形象、主题风格、主题创意如何打造。所以通过需求的深度解析、才有了视觉表达关键词和思路：“国潮”承载视觉表现 ，用 IP 和国潮热辣少年结合。“美味匠心”坚守传承，传承工艺，新表现，新表达。“零食艺术”表达创新，零食界的“抓马”Drama。其次，当意识到了“供需关系“的底层逻辑。在考虑问题的维度就会发生变化，不管是创意想法、还是设计呈现，对于品牌自身的内核理解。就会从各维度的需求去考虑，这样对每个板块需求的理解会更加的深入。核心本质就是你的意识决定了你技能的瓶颈。三、整个经济下行的阶段，导致各行各业需求减少，设计师该如何破圈？近年来，总有设计同僚问我这个问题，当然了，每个人的情况不同，我无法提供实际的建议。不过我对于这个阶段的思考理解可以作为参考。① 认知破圈， 不断跟各职位的人多交流这两年通过和很多专业策划大佬，运营大咖，品牌一线操盘手交流经验和心得发现了。做品牌的核心要点，就是要分析产品，并且关联到背后的人群，一定要考虑到你的竞争环境，这些信息都需要综合考虑深度探索，才能做好一个项目。例如十月结晶这个项目，在接到项目时，十月结晶的定位和想要打造的整个概念“东方母婴”已经很清晰了。那么在品牌方向已经很明确的前提下，我的思考更多是把“东方母婴”这个概念结合产品，激活线上的触点，让消费者能快速感知到。结合之前的需求框架，我需要解决的更多是产品功能结合品牌理念，让消费者能在线上触点快速感知到产品功能卖点的同时，并且通过主题风格和视觉创意把品牌新的定位更加的落地，让消费者更容易感知品牌理念和定位。通过深度对于品牌和人群需求深度的挖掘洞察，提取了核心的视觉走向“国风之美与科技之力融会贯通” 东方精致美学结合创新科技匠心的主题风格。再结合产品本身功能属性“柔软的力量”。提取主题创意——遇见新生之美，绽放女性之力，来进行贯穿整个创意表达。主题风格+主题创意，来层层推敲产品元素，人群搭配，空间搭配，视觉符号，才有了十月结晶这个项目的呈现。 ② 认知破圈，不断拓宽积累自己的知识广度时刻观察周边的变化，培养观察总结习惯。多关注流行趋势、流行事件，并向自己提问为什么流行，为什么出圈，搜他出圈的背后逻辑以及操盘团队。对周身事物时刻保持新鲜感和探索，因为在当下信息爆炸的时代，更容易造成信息茧房，要时刻保持对于新的事物，新的趋势来进行探索和吸收。设计无时不在，电影、综艺、电视剧、包括去餐厅吃饭，养成主动思考背后的设计原因。③ 认知破圈，不断深挖研究每一个你接触到的品牌，或者你做的项目品牌的深度挖掘。从现状到历史，不断挖掘，才能更清晰了解这些公司在乎的到底是什么。我在做松下冲牙器项目时，前期对松下整个品牌，历史，创始人理念，产品理念进行深度的挖掘和探索，才提取了我们的核心卖点 6U+，以及创意主题。四、我在成长过程中走过的那些弯路从事设计行业以来，会发现做到一定阶段的时候，无论是在技术上，还是思维上都面临需要破圈，我大体把我的成长破圈经历分为 3 个阶段。1. 基础技术破圈在早期做淘宝的时候，有一条鄙视链，做广告的看不起做媒体的，做媒体的看不起做地产的，做地产的看不起做图文的，而做图文的看不起做淘宝的。因为在早期（2011 年）那时的淘宝设计，就是拼素材，下素材，拼在一起就可以用，几乎只需要掌握基础的排版，只要有一定色彩基础，在加上会用 AI 导素材到 PS，就可以满足工作需求。 因此在那时，我把更多的精力放在版式设计、配色和基础的合成技巧上的研究2. 综合技术破圈等到了 2013 年以后，明显感觉到行业内卷变得严重，开始重合成，重创意，店铺出现，我记得非常清楚，当年在美妆品类有一个品牌叫瓷肌，打造了一个药妆风格的感觉，瞬间在品类破圈，成了类目 TOP1，从那个时候开始，我意识到了品牌的重要性，意识到了风格的重要性同时，品牌和产品的关系，品牌和用户的关系，以及品牌和推广之间的关系。这才开始有意识的精进合成、视觉风格、研究产品与视觉的融合，以保持在这个不断变化的行业里面能不被淘汰。3. 认知思维破圈这个阶段，我认为是当前很多设计师都欠缺的，而这个阶段的我也只是还在路上，自从 2017 年后，我们加入到了一家营销策划公司。才发现设计是要跟策略进行结合的；在每个品牌在品类中不同的竞争阶段，不同的抢占市场时机，面对不同消费者，视觉打造的策略也是不同的；并且在什么时候需要去叫卖产品卖点，什么时候需要去挖掘品牌基因，什么时候需要结合推广做事件营销，这是一个相对庞大的知识体系。而现在的我，也正在这个阶段不断的学习与破圈也希望我的每个阶段的经历，能给各位小伙伴带来帮助。五、对设计同僚们想说的话我入行已经快 10 年了，见证了电商的起起落落。所以，我也在这个过程中不断打怪升级。在每个阶段不断的定一个阶段性的目标，然后朝这个目标不断前行。所以在这个过程中也有一些小小的心得，在每个阶段怎么发力。如果你刚入行，建议丰富自己的基础。从版式、构图、配色、元素搭配这些基础去深耕，因为这些技能是后期成长的基本。如果你入行 3-5 年，建议丰富自己的综合技术。从合成、C4D、AE、动效、手绘这些综合技能里面找到自己的偏好，其他作为辅助来进行学习与积累。如果你入行 5 年以上，建议丰富自己的认知（这个要前置，从进入这行就开始有意识的学习积累），从定位、传播、到品牌的理解深入浅出的不断随着市场趋势不断地更新。最后给每位正在奋斗的设计同僚一句我的心里话，做事的过程是追寻自醒的过程。做有趣的事，远比有意义更重要，追寻成就感 。本篇来源：优设网原文地址：https://www.uisdc.com/supply-and-demand
样机 功能 素材库 大家好，这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具，分享给大家，本期推荐的 5 个神器分别是：打开即用！小而精的在线样机网站 「Mockup Creator」分层且可编辑！Ai 文件一键导出为 PSD 格式的神器「Ai to PSD Master」15+功能合集！微软官方推出的 Windows 实用工具「PowerToys」云盘功能妙用 ~ Eagle 素材库也能实现多端实时同步了超省心！可直接翻译图片内文字并复制的微信翻译功能往期回顾：这5款工具，让设计师工作效率提升 200%！（十）大家好，这里是和你们聊设计的花生~ 最近又收集了一批好用的设计及办公工具，今天就继续我们的「设计师效率工具」第10期，本期为大家推荐的神器分别是： 一键出图！阅读文章 > 一、Mockup Creator网站直达： https://designstripe.com/mockups/Mockup Creator 是一个免费的在线样机网站，样机模型包括手机、电脑、海报、名片、书籍等多个类型，质量很高。选中样机后直接上传图片就能立即生成效果图并下载，比在 Ps 中套样机更直观快捷。使用方法：进入网站后，点击需要的样机进入编辑页面，可以更换图片及样机配色，完成后可以下载 JPG 或者 PNG 格式的图片（下载前需先登录）。5个样机网站免费商用！提升设计质感必备大家好，我是和你们聊设计的花生~样机网站是提升设计质感的利器，特别是在进行作品集呈现的时候，好的样机网站里的素材能让作品集质量直接上升一个高度。阅读文章 > 二、Ai to PSD Master使用教程： https://uiiiuiii.com/software/352173.html#post_download6Ai to PSD Master 是一款 Ai 脚本插件，可以将 Ai 文件保留所有分层导入 Ps 中，且导入后所有图层依旧是矢量可编辑的格式。使用方法：文件安装包下载链接见文末。插件在 Windows 和 Mac 中都可以使用，链接视频里讲解了 Mac 的方法。如果是 Windows 系统，也是在 Ai 中通过“文件-脚本-其他脚本”选择此插件，然后在弹出的提示框内选择“确定”，将文件导出为“.PSD”格式。简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 三、PowerToys下载及功能说明： https://learn.microsoft.com/zh-cn/windows/powertoys/PowerToys 是微软官方发布的一款开源实用工具集，包括置顶窗口、保持唤醒、颜色选取器、图像大小调整、提取文字、管理键盘及鼠标功能等 15 种功能。所有功能都可以用快捷键出，可以有效提升我们的工作效率，适合 Win10 及以上系统。使用方法：文件安装包下载链接见文末，下载后直接解压安装即可。这 5 款工具，让设计师工作效率提升 200%！（四）大家好我是花生~勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！阅读文章 > 四、云盘同步妙用相信很多设计师小伙伴都在用 Eagle 作为自己的素材灵感库，它功能强大，但由于是本地程序，一旦换一台设备就无法获取素材库里的内容。最近我在 B 站上看到了一位 UP 主分享的教程， 讲述了如果使用云盘的同步功能，使 A 设备的素材库可以在 B 设备中使用，且一端更新后可以及时同步到另一端。另外他还分享了一个可以在网页和手机上浏览 eagle 素材的方法。使用云盘同步 Eagle 素材库： https://www.bilibili.com/video/BV1rP4y1u7FF在网页及手机中浏览 Eagle 素材： https://www.bilibili.com/video/BV1B3411v7Jr我用的是百度网盘和 Windows 系统，下面和大家分享我的利用百度网盘的同步功能建立同步素材库的方法：首先需要在 A 电脑上下载百度网盘的客户端，其界面左侧工具栏内有“同步空间”功能，启用后桌面会有一个快捷方式，电脑资源管理器里也会多一项"百度网盘同步空间”的选项（开始还不不熟悉同步空间的话可以看一下官方指引）打开 eagle，点击界面左上角的选项图标，选择“资源库-创建资源库”，为新资源库命名「云同步素材库」，然后在保存路径里选择"百度网盘同步空间”，点击保存。此时再打开百度网盘客户端里的同步空间，新创建的「云同步素材库」就会显示在里面了。此时如果你在 eagle 里添加素材，且同步空间是开启的状态，那么素材会实时更新到云盘里。同样的，如果里在同步空间里将素材删除，那么 eagle 内的文件也会消失。如果你想在 B 电脑上打开同一个素材库，B 电脑上要有同账号的百度网盘客户端并启用“同步空间”功能。然后在 B 电脑的 eagle 客户端上导入新资源库，选择"百度网盘同步空间”里的「云同步素材库」，素材就会同步到 B 电脑上。同样的，在 B 电脑上对素材的增删操作也会同步到“同步空间”及 A 电脑内，因为它们共同的素材库只有一个，就是同步空间内的「云同步素材库」。这种同步的思路都是一致的，就是在云盘内建立于一个素材库，利用其同步功能，实现本地或线上的多端同步更新，大家可以按这个思路利用其他的云盘同步功能来建立同步素材库。也可以用这个思路同步 Blender配置 。五、微信翻译功能之前只知道微信可以提取图片中的文字，最近才发现微信还可以直接翻译图片内的文字，且在电脑上可以直接复制图片中被翻译好的文字，比我之前“提取图片文字-复制到翻译软件”的方法要方便好多，还没用过这个功能的小伙伴可以试试。操作方法：以电脑端为例，将图片发送到对话界面中（我一般是发送到文件传输助手），点击右键选择“翻译”，翻译完成后直接用鼠标选中文字并复制使用。好啦以上就是第 11 期的效率工具推荐，如果你正好需要就赶紧用起来，也欢迎大家在评论区分享自己觉得好用的效率工具~ 喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友。有关本文或设计的问题可以在评论区提出，我会第一时间为回复。推荐阅读：先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 掌握这5个Ai小技巧，帮你快速提升文字排版效率（四）大家好，我是和你们聊设计的花生~今天继续为大家带来 Ai 排版技巧第四期，这期主要和大家分享 5 个与长文本排版相关的实用小技巧，一起来看看吧~上期回顾：1. 设置网格并转换为参考线在进行折页或者画册设计时，为了保证版面的整洁有序、信息清晰传达，设置网格是必然可少的一步。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 Ai插件和PowerToys安装包98.49MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-11
设计师 用户 场景 编者按：本文从启蒙、基础、强化、进阶4个方面，列举了UI设计师学习交互的路径和方法。交互自学干货：网易设计师：自学交互最应该关注的 4 个核心知识点网易UEDC - 杨倩 ：对于非交互设计的同学，要怎么去学习交互设计呢？阅读文章 > 一、为什么 UI 设计师要懂交互？近几年的互联网市场，有不少公司提出了“全链路设计师”、“用户体验设计师”的说法，合并交互与 UI 岗，一时间众说纷纭：有人说是高要求，有人则说这是一场变相的“人力压缩”。其实，设计师作为一个高度复合型的岗位，虽有 UI、交互、产品设计等细分，但无论是哪个细分岗位，都需要对业务、场景、用户、技术实现有所掌握，才能给出最佳的设计方案。高度竞争的市场环境下，单纯的“美化产品原型稿”，早已丧失了获得高回报工作的可能性。因此，才会对设计师的要求越来越趋于综合化。放眼如今的 UI 设计师招聘描述：用户体验、交互可行性、数据分析……这些曾属于交互设计师的职责，已普遍的出现在UI设计师的必备技能中。至此，我们可以危言耸听地说一句：“单一的 UI 设计已经逐渐满足不了互联网市场的需求”；但也正因为如此，我们才要丰富起自己的武器库，去创作更大的价值……二、UI 设计师该如何学习交互呢？1. 启蒙篇：站在用户的角度上思考问题笔者曾经也是一位 UI 设计师，在工作中由于项目从 C 端逐渐偏向 B 端，工作重心也就需要从视觉倾向于产品逻辑、交互体验上了。岗位名称从“UI 设计师”到“用户体验设计师”再到“交互设计师”。这其中最大的转变就是：将自己从“站在画面美观的角度上”思考问题，转变为“站在用户的角度上”去思考问题（也许我之前是个不懂设计的美工）。举个简单的例子，之前做一个叉车工使用的 PDA 把枪界面：现场实施人员给我带来一个小需求，为避免叉车工在操作的时候误触，需要把底部的操作按钮向上移；我在上移了 16px 之后依然被要求不够，“继续上移，再上移！”站在设计规范的角度上，我与实施人员几番 battle 之下……他发给我一张现场叉车工人的手的照片，我这才明白这么做的理由：长期的重活导致他们的手骨节粗大；再加上在搬货途中使用 PDA 的抖动性增强，使他们的操作误区比普通人大了许多。在了解用户与场景之后，再看向那个 PDA 界面操作按钮下大片的空白，瞬间显得合理了……2. 基础篇：如何画出合理的界面？首先，笔者建议大家可以结合自身项目，从基础层面开始学习，由小至大、由简入繁。一来，是因为项目流程中原本岗位配合本就严丝合缝，要么是已有交互、要么是产品经理产出交互原型稿，可能并不会给你很大的试错空间；二来，则是因为各位分析过大场景的能力可能不足，直接上手反倒容易短期内没有产出，影响学习的情绪……基础内容主要包括三个部分：工具、控件、设计原则① 工具这里会有很多 UI 童鞋问的一个问题就是：我需要学习 Axure 软件吗？个人建议：Axure 可以但没必要, 反正我现在没用到。各位既然能够画出精美的高保真效果图，那么低保真的交互稿还画不出来吗？工具如何并不重要，如今用 Sketch、Figma 画原型的交互设计师很多，而且这样更方便与视觉同学之间的产出物转化。所以大家倒不必将过多的时间精力放在软件上，别让软件成为学习路上的第一个拦路虎。② 控件IOS、Android、MacOS、Windows 各端、各平台的设计规范&控件是设计的基础，无论你是 UI 还是交互，都应该熟练使用各个平台、系统的组件使用场景。只是 UI 与交互的侧重点可能不一样, 很多 UI 设计师过分注重组件的样式，而忽略了它们的用户使用场景。所以组件究竟该如何学习？a. 熟记组件的使用场景这个组件在什么情况下会用到？只有熟记使用场景，才能在需求到手时，快速实现功能。这些内容在各组件共享平台的使用指南中都有详细介绍，以 element 为例：基础用法、相似组件区别都有标明（如下图）。b. 各端组件不要混用不同端的同种功能组件会有很大的操作区别，比如：滥用移动端与 PC 端之间的组件，就会影响到用户的体验。以加载方式为例：web 端常见的分页加载就不适合出现在移动端，移动端主打的轻量化操作体验，多以滚动&点击的方式触发加载。③ 设计原则如何画出一张合理的界面布局？那么你一定离不开交互设计的七大定律。对于交互设计七大定律，想必大家多多少少都有了解：格式塔原理、72 法则、席克定律、费茨定律、奥卡姆剃刀原理、复杂性守恒定律等。交互设计七大法则！新手必看的超多案例编辑导语：怎么样才能让设计出来的产品更加美观，更加符合大众审美呢？阅读文章 > 以上定律的详细定义，笔者在此就不一一摘抄了，想要知道的童鞋可以上网搜一搜。下面我具体只讲我是如何学习这些定律的，那就是：多看案例！看得多了，自然就会用了。以费茨定律举例：带入这个定律去看下面的实际方案：详情页面“返回”按钮究竟摆在哪里，比较合适呢？我们选取了几个 App 详情页面的查看，最常见的两个样式，左上角 VS 左下角，那么哪个方案操作更便捷呢？带入用户手指操作的场景，如果是双手操作，那么两个方案区别不大；但如果是单手操作，通过单手拇指触屏的操作热力图来看，左上角的返回按钮属于“难触及区域”，而左下角则是“操作便捷区域”，带入费茨定律，我们就能得出左下角的返回按钮操作更快捷！温馨提示：其实这些交互的定律就如同我们 UI 的设计规则一样，可以在做设计的时候去参考，却不能照本宣科，脱离实际场景。以免出现笔者前文中“一味追求规范，而忽略用户痛点”的教训。3. 强化篇：如何做出好用的功能？一个好用功能的前提，得是一个能用的功能。所以我们要先让流程闭环，功能跑起来；然后再做优化，逐步完善……① 先做出一个能用的功能：流程闭环我们在做每一个版本需求时，产品经理都会给到一条功能的业务流程，而这条业务流程是没有办法直接转化成页面的。设计师们需要将“业务流程”转化为“用户操作步骤”，再转化为“界面”。举一个最经典的审批流程的例子：业务流程大家都很熟悉：发起-审批-结束；其中包括了两类用户：发起人&审批人。以发起人为例，向下拆分他的用户操作步骤；再从操作步骤中推导出界面（如下图）：② 让功能变的好用：深挖用户场景当闭环的操作流程已经搭建完成，我们就需要考虑，如何让它变得更加好用了。这一环节我们需要深度挖掘用户场景：弄清楚“谁？在什么情况下？要做什么？”，然后与用户共情，带入场景去思考问题……继续以发起审批为例：在这一过程中，审批发起人（用户）+在提交了审批之后（场景）+想要知道审批的结果（目标）。带入用户的角度，去思考这个场景下，他们的心理活动，他们会有什么想法？再以此为需求，逐步完善我们的功能：这里可能又有童鞋发问了：我没有这么强的共情能力，想不到这么多用户的可能性怎么办？那么，交互设计师的核心技巧：用户调研、可用性测试、数据埋点、竞品分析……就可以了解一下了！通过这些方法，就能又快、又准的帮你做出一个好用的功能。4. 进阶篇：设计赋能业务（绩效加分项）“赋能业务”是设计师工作中最重要的一点，相信这个词在大家的绩效汇报中经常看到。如果说不懂“用户体验”的 UI 只是一个画图机器的话，那么不懂“赋能业务”的交互则是一个画原型图的机器。① 如何赋能业务？首先要弄清你的业务目标是什么？然后再围绕着业务目标去细化拆分：思考自身设计，拆分设计任务了解项目组其他岗位成员的拆分任务，找准发力点，向下拆分举个例子，一个证件审核后台的案例：审核后台的客服人力不足，导致工单积压，用户频频电话投诉催办。业务方要求在一个月内，在不增加客服人员编制的情况下，将催办类投诉工单降低 80%！收到这个业务目标后，项目组内全体成员都在针对业务目标思考方案、制定各自的任务：第一步，设计师团队从设计出发，拆分设计任务：去调研客服人员审核流程，做操作步骤精简提效；再去调研投诉用户的心理，增加审核进度反馈功能，缓解用户焦躁情绪；然而，这些体验层级的优化虽有奏效，却很难担起降低 80%投诉率的大额目标。第二步，理清团队其他岗位的任务内容及策略，向下拆分：通过沟通，大数据团队针对该目标提出了通过 OCR 识别技术（光学字符识别技术：通过扫描将印刷文字转为图片，再利用文字识别技术转化为可使用的文字输入），智能审核证件的方案。然而却因为 OCR 识别错误率太高，导致近一半的工单仍然需要人工审核。那么此时，设计师就可以在提升 OCR 识别成功率的目标下，向下拆分自己的设计目标了。去调研 OCR 识别率低的基础情况：除去技术层面的问题，用户上传照片不规范、倾斜、反光、重要信息未拍全等都会导致识别失败。那么对于这些问题，上传审核步骤的指引优化就是关键所在！最后，团队一起实现了降低 80%投诉率的大目标，而设计师在项目过程中，既解决了用户遇到的问题、又解决了团队遇到的问题，做到了真正的赋能业务！尾声漫长的文章终于接近尾声了……最后一句临别赠言送给大家（也是笔者在学习交互的时候，一位老师送给我的）：不必太过死磕各个岗位的工作范围，没有哪个行业内的专家能够给交互、视觉、以及任何一份岗位的工作范围去下定义。百度百科上能搜到的所有针对岗位的描述，也都只是包括但不限于。所以，不必被他人设限，也不必给自己设限……总而言之一句话，学习和提升是自己的事情，预祝各位成功！欢迎关注「网易UEDC」公众号：本篇来源：优设网原文地址：https://www.uisdc.com/self-study-of-interaction-design
风格 字体 趋势 最近查阅了国内外近 20 篇 2022 年和 2023 年的设计趋势类文章，总结了 6 大类视觉设计趋势。最大的感觉是，每一种稳定的新趋势都来源于以往的铺垫，顺应着时代的发展，不同风格之间的融合创新经常能让曾经的经典再次迸发出新的活力。设计趋势网页篇：先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 一、3D 风格随着我们进一步深入元宇宙，对 AR/VR 的应用需求将在各个行业继续发展，在这样的发展下，具有纵深感的 3D 风格大概率会持续保留在每年的主流趋势里，它的应用从简单的使用阴影和轮廓增加深度，到利用三维建模软件构成图标、添加纹理、形成场景和动画，一直在不断的丰富着蓬勃发展的数字世界。BY Mako TsereteliBy Vivivian for Vitality Studio二、玻璃风格从 Mac OS Big Sur 和 Windows 11，社会压力的倍增使得天然具有清透感的玻璃风格稳居近 2 年的设计趋势榜单前排，并且还一直在设计师的手里不断的演变进化，这种进化主要是和其他风格打包出售。例如近 1 年兴起的磨砂玻璃风、弥散玻璃风、极光玻璃风等，从 2D 的平面和 UI 界面到各种 3D 图标和场景，自带清透感的玻璃风变成了一种随处可见的风景。「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？阅读文章 > 实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 三、新式渐变渐变风格，把它作为趋势似乎有点老套，但万变不离其中，它的各种进化版作为趋势榜单里的常客一定已经让你印象深刻。而且说实话，各种新名字渐变的区分度其实并没有那么明显，作为渐变大家族的一员，互相长得像这也是肯定的。极光渐变霓虹灯液体渐变/流体渐变弥散柔光弥散光设计！网易阿里大厂都在用的刷屏级新设计风这阵子不是有一种设计流行风悄悄刮了起来嘛！阅读文章 > 四、微创新的字体与排版1. 大字风格大字风格似乎从几年前苹果系统界面的一次改版就开始被人津津乐道，虽然经常被其他趋势挤出它的趋势地位，但随着老龄化，信息冗杂的持续，它一直具有留在趋势榜单的实力。随着与大胆的颜色、几何构图等结合，这种风格已经唤起了新的活力。By Ebco Concepts2. 复古字体回归越未来，越怀旧，这大概是人类的天性。去年到今年，许多颇具复古风格的字体开始回归，例如不停出现的 Sans Serif 字体。文艺复古感拉满！设计师必备的5款免费打字机字体（附源文件下载）大家好我是和你们聊设计的花生~之前给大家推荐了 10 款纤细优雅的英文手写字体，这种字体可以作为在海报设计中作装饰元素，起到平衡版式、丰富画面层次和烘托氛围的作用。阅读文章 > 左：ABC Ginto geometric humanist sans serif typeface by ABC Dinamo. 右：ABC Ginto geometric humanist sans serif typeface by ABC Dinamo.3. 扭曲字体也许比较小众，不过我觉得蛮有趣的。拉伸的字母和打结的排版使得传统的字体样式被赋予了文字扭曲，连字打结、融化或淡入淡出的形式。这种样式的出现也可能和 Metaverse 趋势有关，它为设计提供了呈现一个支离破碎现实可能性，当然，它也有可能是受到了液体渐变风格的影响，为字体加入了一种液体效果。Cobya modern variable weight typeface by Lane Knop4. 生动排版字体结合图形、颜色、用动画等来辅助字体排版，各种创意性的想法结合层出不穷，让画面变得更加生动有趣。五、新复古风格复古设计的风向不会仅仅局限于字体和排版，或者说，字体和排版的复古回归只是复古设计风格的一个方面，在科技不断发展的新时代，复古当然不是原本的复制，而一直在融入新的变化，复古未来主义、微复古风格、朋克风格……这些在曾经流行过的设计样式展现出新的生命，所以，也许我们可以统称这一类的风格为：新复古。Packaging design for KEW 3101 Coffee六、环保自然风快节奏带来的失衡感促使着人们关注着自然、健康和生活的平衡感。这样看来，环保自然的风格将会一直保留在我们的视线之内，它不会过时。除了单纯在视觉表现层传递环保以外，在材料、印染等实实在在为环保而设计的方向也逐渐受到了设计师的重视和提倡。同时，大自然本身丰富多彩的色彩和形状也给了设计师很多启发。3D 风格、玻璃风格、各种新式渐变、微创新的字体与排版、以及新复古与环保自然这六大类风格趋势，在 2023 年，会在你的设计里会占据几条呢？备注：所用图片一切版权归原作者所有，部分图片因直接来源于查阅的文章，未标注作者。欢迎关注作者微信公众号：「林间有影落」本篇来源：优设网原文地址：https://www.uisdc.com/2023-design-trend
知识 自己的 方式 2022年职场习惯第6期来了！这期邀请了南宁学院副教授邓海贝，分享了他快速成长的学习方法，以及坚持多年如一日的职场习惯和思考方式。上期回顾：为什么有人工作才两年，能力远超五年的设计师？大家好，我是知果，感谢优设的邀请，借着这个机会跟大家分享一些我的经历，聊聊如何学习与成长。阅读文章 > 嘉宾介绍：邓海贝，南宁学院副教授，微信公众号“艺海拾贝 Design”主理人，2021 年优设年度十大作者。平面设计科普官，从基础知识到进阶技巧，无论是字体应用、配色法则或是排版布局，平面设计中每个环节的疑问，都能在他的文章中找到答案。大家好，我是邓海贝，感谢优设网的邀请，能与大家分享一些学习心得和工作经验！我目前在南宁学院任教，自己还运营着微信公众号：艺海拾贝 Design，平时发布一些版式设计相关的教程，旨在帮助新手设计师快速成长，欢迎学习版式设计的朋友们关注。1. 您有哪些坚持了三年以上的工作和生活习惯？先说生活习惯吧，早睡早起、保持稳定且规律的作息时间，是我一直以来坚持的生活习惯，不管工作日还是假期，基本保持在 23：00 左右睡觉，7：00 左右起床，充足的睡眠是保证每天精力充沛的重要基础。我平时大部分时间都用于正职教师工作（除了上课，还承担着教研室主任的工作），期间会有一些私人的设计项目介入，自从创建公众号之后又占据了大量的时间，4 年期间写了 160 多篇原创文章，目前还在筹备我的第一本书。往期热门文章回顾：用超多案例，帮你掌握「上下构图」的排版技巧构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。阅读文章 > 用超多案例，帮你掌握「左右构图」的排版技巧在设计之前，对于设计元素的摆放位置需要有一个大致的构想，这个构想就是构图，它相当于是版式的雏形，有了这个雏形之后，才能开始下一步的细化，只有充分理解构图的意义与作用，排版时才能做到心中有数。阅读文章 > 这可能是最容易出效果的配色方法：互补色（基础篇）互补色分为“光学互补色”和“印刷（色料）互补色”两种。阅读文章 > 做出高大上的书法字排版，看这一篇就够了！书法艺术是中华民族文化的精髓，是最具民族特色的设计元素之一。阅读文章 > 这些年几乎每天都工作到 22：00。但是我是极度不喜欢熬夜的人，如果没有特别紧急的事情，22：00 会关电脑停止工作。我认为熬夜的这些时间，第二天也需要花相同甚至更多的时间补眠回来，一旦第二天有其它急事不能补眠，那就很影响工作效率。再说说工作习惯，我是一个几乎没有拖延症的人，今天能做完的事，绝不会拖到第二天。我一直坚持的工作习惯是把每天要做的事项列好工作计划，把要做的事项根据紧急程度和耗时程度进行分类，根据事情的轻重缓急逐一攻破。第二个好习惯是工作时专心一志、心无旁骛，尽量提高工作效率。每个人拥有的时间都是相同的，只有让工作时间的效率最大化，才能完成更多事项。所以我在工作时是非常专心的，不能有一点干扰，别说是听音乐了，就算有一点杂音都不能容忍。我自从毕业两年后，就保持着一份主职加一到两份兼职的工作状态，而且还不熬夜，就得益于这两个好习惯。2. 刚进入职场的设计师，如何进行更有效的学习？经常有同学问我，为什么看了很多设计书和教程，自己的设计能力还是提升不了？如何进行更有效的学习？跟大家分享我的经验。学习金字塔理论这是美国学者埃德加·戴尔提出的学习“金字塔理论”，对我们常用的几种学习方法进行测试，两周以后学习内容平均留存率如下：第一种，只通过声音来学习的“听讲”方式，效果最低，只能留下 5%；第二种，通过看设计书和设计教程的“阅读”方式学到的内容，可以保留 10%；第三种，通过图片、声音、动画结合视频教程的“视听”方式学习，可以达到 20%；第四种，通过现场观摩的“示范”学习方式，可以记住 30%；第五种，“参与讨论”，可以记住 50%的内容；第六种，实际演练、亲身体验等“实践”学习方式，可以达到 75%；第七种，收获最大的学习方式，是分享知识“教授别人”的方式，可以记住 90%的学习内容。在学习的金字塔理论中，通过听讲、阅读、视听、演示的方式获得知识，学习的效果相对比较差，属于被动的学习；通过讨论、实践、教授他人的方式获得知识，都是团队学习和参与式学习，属于主动的学习，学习的效果比较好。所以你为什么看了大量的图文教程和视频资料，发现收获甚微，因为只处于“阅读”和“视听”的被动学习，如果课后不对所学知识进行巩固，没有把理论知识运用到实践中，其实并没有正常掌握和吸收知识。最有效的学习方式根据学习的金字塔理论，通过实践的方式学习知识，留存率更高，可以看出实践在学习过程中的重要性。所以去优秀公司工作是最好的学习方式之一。因为有一群志同道合的同事、在各种领域都有特长的前辈，可以不断汲取新知识。这些知识又可以通过在工作中与他人进行讨论交流，在实践中运用进行巩固，不断思考创新，所以进步是非常快的。这也是为什么我一直推荐大家去好的设计公司的原因，在优秀的公司学习一年，可以获得相当于普通公司几年的设计经验；而如果在图文店工作几年，其实你只是在用一年的经验重复做几年的事情而已。学习金字塔理论中，学习效果最好的方式是把知识传授给他人。我深有体会，在我做公众号写教程的这些年，每次写一篇教程，我会花几十个小时去看大量的文章、搜集图片资料、整理自己的知识、做案例示范，最后有条理的讲解出来。通过这样的知识输出，把大脑中掌握不太成熟的知识进行优化，使知识得到完善，从而会进一步加深对知识的理解。可以说写教程的这几年也是我进步最大的阶段。所以在学习的过程中要学会主动学习，积极与他人进行讨论，在实践中运用获得的知识，并主动的与他人分享自己学到的知识。正确的学习方法设计没有捷径，正确的学习方法简单总结起来就是多看、多做、多想，不断重复：多看，是提高审美的有效手段，我们经常说“读书破万卷下笔如有神”就是这个道理，优秀的设计师必须要有扎实的美术基础，极高的审美品味，丰富的知识底蕴。因此，想做好设计，第一步必须要多看和多借鉴，看的优秀作品多了自然会往优秀作品方向去做。还要善于整理归纳，看到优秀的作品要保存到自己的资料库进行分类，当接到设计任务时，能很快的调出来作为参考。多做。书看了教程学了，但是不等于学会了，只有在实践中运用，才能把知识转变为自己的。多练习是让初学者很好提升设计能力的方法，在实践过程使自己的技法和经验逐步提升，还能有效提高审美并熟悉设计中的规范。看和做的时候一定要多想，别只模仿表面，更要模仿优秀作品背后的思想，通过理解、感悟、最终进行创新。假设老师教给你的知识是 A，那么，如果你把 A 完全复制做出来，那你可能做出来的成果是 A+或者 A-，但是这个知识并不属于你。你需要通过学习 A，然后独立做出 B 或 C，这样才算真正把知识学懂，变成属于你自己的知识，简单的说就是举一反三。最后把学到的知识分享给他人。这个过程需要不断梳理、思考、研究，把相关知识融汇贯通，知识已经成为你大脑中永远不能磨灭的一部分。所以分享不只是帮助其他人，同时也是对自己的提升。还可以锻炼自身的写作、表达、沟通能力，这也是设计师要晋升所要具备的素质和能力。本篇来源：优设网原文地址：https://www.uisdc.com/designers-good-habit-denghaibei
英文 元素 贴纸 大家好，这里是和你们聊设计的花生~今天继续为大家带来海报设计常用 装饰元素 的第 3 期，本期的元素分别是：英文字体、中心辐射线、心形、镭射风及卡通风贴纸和渐变波点，并有超多实用教程和免费可商用资源分享给大家，一起来看看吧~上期回顾：简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 一、英文字体英文字体在海报设计中很常见，由于它也算是文字信息，所以很多小伙伴可能没有意识到这些英文字体也算是一种“装饰”。其实很多时候我们拿到的海报文案内并不包含英文信息，这个时候就需要设计师自己补充这部分的内容。添加英文字体可以达到以下效果：丰富文案内容。如果你拿到的海报文案都是中文且内容比较少，无法撑起整个版面，就可以自己根据海报的主标题、主题或者关键词添加对英文信息，这些英文信息可以与主标题处于同等层级，用于传达海报主题；也可以缩到很小，放在边角位置稳定版面。增强视觉吸引力和设计感。对于一些具有设计感的字体，我们可以将其放大，置于画面主体之后，这样会带来很强的视觉冲击力；也可以压在画面之上，平衡版面烘托氛围，具体情况要看字体的气质来确定。海报中英文字体的使用之前为大家推荐很多高质量的免费可商用英文字体，它们的风格各不相同，有的适合正文排版，有的则适合作为纯装饰。需要的小伙伴可以戳下方链接了解，或者直接访问我的主页。5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二）大家好，我是和你们聊设计的花生。阅读文章 > 海报如何更有力量感？加上这个元素准没错！（附素材下载）大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到海报设计中，可以营造浪漫优雅的氛围。阅读文章 > 海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 二、中心辐射线由中心像四周发散的线条元素常作为背景在海报设计中使用，置于画面主体人物或物体之后，可以起到聚焦视线、丰富画面的作用。它常见于复古、卡通风格以及与促销有关的海报中。中心辐射线及心形元素在画面中的使用三、心形心形算是一个比较特殊的图形符号了，在与爱情有关，或者表达强烈喜爱或推荐的主题中使用比较广泛，既可以作为局部的装饰元素，也可以放大作为主视觉或者特殊的图片形状使用。下面为大家介绍一种在 Ai 里快速画出完美心形的方法。四、贴纸贴纸作为一种独立性较强的设计元素，在海报、包装、品牌、VI 等设计中都能看见它的身影，设计简单但是能赋予对象独特的识别性。目前比较流行的贴纸风格可以分为 2 两种，一种以抽象几何元素为主，比如网格地球、星形或者纯文字；另一种是以扁平卡通插画元素为主题，形式丰富多样，趣味十足。且随着设计工具的进步，贴纸也有了更多不同的样式，比如加入了 3D 特效， 或者添加镭射渐变和材质质感。下面为大家推荐一些贴纸元素的设计教程：「镭射渐变贴纸元素设计教程」 https://uiiiuiii.com/photoshop/1212389155.htmlhttps://uiiiuiii.com/illustrator/1212388923.html「扁平卡通风贴纸设计教程」https://uiiiuiii.com/illustrator/1212458495.htmlhttps://uiiiuiii.com/illustrator/1212297326.html五、渐变波点渐变波点是是孟菲斯风格最常见的元素之一，具有强烈的复古气息。除此之外也可以作为海报中作为局部装饰，或作为插画中的纹理。之前我专门写了一篇文章向大家介绍如何在 Ai 和 Ps 中制作渐变波点效果，并讲解了背后的原理，帮助大家更好地制作出符合自己需求的效果，具体教程戳下面链接：渐变波点怎么做？我为你总结了 3 种超快方法（附原理解析）大家好我是和你们聊设计的花生~渐变波点是设计中常用的一种装饰元素，和各种风格的适配性很强。阅读文章 > 以上就是第三期的海报常用装饰元素推荐，希望对大家的设计有帮助~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读:先睹为快！2023年值得关注的10大平面设计流行趋势大家好，这里是和你们聊设计的花生~一转眼 2022 年就只剩最后一个月了，除了总结今年的收获，也是时候了解一下未来的设计新趋势了。阅读文章 > 平面设计作品不出彩？来看高手总结的14个细节！本文用真实的平面设计作品案例，通过优化前后的关系，让读者短时间受到启发，建议平面设计师收藏保存哟上期回顾：上上期回顾：阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/decorative-elements-of-poster-design-3
卡片 内容 间距 卡片设计在 UI 中有非常多的优势，相关的文章我已经写过几篇了，结合往期文章可以更系统地学习卡片设计规范：新人设计师来收！卡片式设计基础入门指南（附超多案例）很多人对 APP 中的卡片设计习以为常，但对于卡片设计流行的原因、优点，以及如何做好卡片设计却可能不甚了解。阅读文章 > 做好这4个细节，帮你快速提升卡片设计效果！Hi，我是彩云。阅读文章 > 在做卡片设计时什么才是最重要的？这篇文章中我将会分享 8 个最关键的细节。在这之前，我们一起来对 UI 中的卡片设计基础做一个梳理，总结下一般在哪些场景适合用卡片设计。卡片是 UI 中的一个组件元素，能够创建清晰的视觉单元，让信息更具逻辑性。它通常包含：标题、描述、图片、按钮或者链接。基础卡片一、一般在哪些场景使用卡片设计？产品目录页面：大型电商网站诸如亚马逊、阿里、沃尔玛和 eBay 都使用了卡片设计做产品呈现。通常，一个产品卡片构成包括产品图片、标题、价格、折扣和行动按钮，可以通过点击这个行动按钮查看商品详情页面。Amazon (top) and Alibaba (bottom)eBay (top) and Walmart (bottom)内容网站：新闻文章、社交媒体平台会使用卡片组件这种比较聚焦的设计去呈现每个内容，这样用户可以快速扫描，阅读内容。Behance (top) and Dribbble (bottom)CNN (top) and BBC (bottom)仪表盘界面：仪表盘是一个非常好的例子，在其中能够很容易体现卡片设计的优势，它能把相关的信息在界面上组织到一起，帮助用户更容易的比较和分析数据信息。Mixpanel (top) and Dribbble (bottom)收集网站：浏览和探索大量的设计作品是一种有趣和吸引人的体验，就像 Pinterest，Unsplash 基于卡片布局，用大图封面的形式能够抓住用户的眼睛。这就是为什么在网页和手机体验中使用卡片浏览变得如此流行的原因。Pinterest (top) and Unsplash (bottom)协作工具：卡片是很灵活的组件，它可以将不同类型的信息和子元素组合在一起。例如，Figma、Miro、Framer 都用了卡片形式展示项目和文件。卡片设计干净、易于互动、实用，可以很容易地进行文件相关操作。Figma and Miro二、最佳实践讲卡片设计的文章相信已经很多了，但我想在这篇文章中着重讲一些容易被忽略的设计细节。我希望这些点可以帮你进一步优化卡片设计。1. 注意在卡片和背景之间设计合适的对比度为了从背景中更好的区分卡片，你可以给卡片增加一个外描边或者加一个浅浅的投影。彩云注：这里原作者放的例子我觉得没有特别好，但是她提到的这个细节确实是需要注意的，背景和卡片之间的颜色对比不要太小，不管是改颜色还是加描边或者投影，都是为了加大这种对比。比如下面彩云随便找的一个很优秀的卡片设计，就是用的多彩色加大了卡片与背景的对比，使得信息清晰可见。2. 努力维护好字体大小，避免使用太小的字号内容可读性由所选字体和字体大小决定。下面的例子中可以看出，两个卡片设计在样式上都差不多，但因为字体大小选的对，整个卡片在视觉上变得更平衡，对人眼来说更好，所以右边的卡片更容易识别。关于字号选择有一些经验可以分享给你，帮助你优化视觉层次。（彩云注：这里提到的尺寸应该多指 PC 端）标题，使用的字号会在 20px-96px 或者更大，取决于卡片的尺寸和具体内容副标题，字号会使用小于主标题 2px-10px，这样可以比较容易区分正文，字号最少 16px。在某些情况下，如果你使用某些本身字符就比较大的字体，则可以适当减少字号。例如，在谷歌规范（ https://material.io/design/typography/the-type-system.html#applying-the-type-scale ）中，两个正文文本的大小分别定义为 14px 和 16px按钮，它的字号不可以比正文的字号小。当需要展示多个选项时，对于主要按钮需要用到更突出的字体样式（加粗 Semi-bold/Bold），次级按钮使用略弱的字体样式（一般 Regular/Medium）尝试限制字体大小的数量，可以使用字体缩放插件，Figma 中的插件 Type scale（ https://www.figma.com/community/plugin/739825414752646970/Typescales ）或 Web tool for defining a type scale（ https://type-scale.com ）3. 对留白创建一个间距体系留白是 UI 各元素之间的空白区域，它们将创建视觉组，保持视觉层级。如果你想避免设计混乱，需要确保做好一致性，你需要定义好间距体系，这对开发来说也会非常有效，减少代码量，还原的更好。关于间距系统我也有一些经验选择一个基础单位，并用它来作为 UI 元素间距的倍数值。一般来说，基础单位是 4px（0.25rem）。不建议使用奇数比如 5px，这是因为设备中会有 1.5x 的 DPI，这个留白的缩放值会变成 7.5px 会导致像素模糊通过使用基础单位作为增量或乘法来定义间距值，减少间距值的数量，会让 UI 更简洁，例如它用来定义 Tailwind（ https://tailwindcss.com/docs/customizing-spacing ）这个产品留白规范Figma 进阶用法，修改“大移动”（具体设置方法见官方帮助文档 https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values ），从默认的 10px 改到 8px，这将会让你每次移动元素可以保持 8px 的数值（这是基础单位的 2x），只需要按住 shift+方向键即可。这会非常省时间4. 尽可能设计与内容布局相似的加载状态加载状态匹配即将加载的真实内容会减少用户对于加载内容的不确定性心态。下面的例子，你可以在右边看一个正确加载效果的设计，会更加符合用户的心理预期。一组加载状态的效果对比Figma and Vimeo5. 定义一个卡片的固定高度在实际项目中，你需要设计一个卡片元素，假定一个卡片是一行内容，另一个卡片是有 4 行文本内容。最好的解决方案是设计一个固定高度的卡片，在内容较少的卡片上使用留白，而在内容较多的卡片上使用文字截断。（彩云注：这样卡片在效果上更加一致。）6. 使用网格作为卡片设计的基础规范网格作为卡片的布局基础，有助于统一地安排内容，这就是为什么当涉及到卡片设计时它们是如此有用。当你需要时，可以使用网格将卡片的宽度扩展到需要的网格列数量，通常这样做，你可以找到一个合适的卡片宽度。当设计一个响应式布局时，应该为每个断点设计一个网格，设计相应的卡片大小。（彩云注：可能有些人不大理解断点的意思，它指的是从 PC 切换到平板，然后再切换手机，屏幕大小在变化，布局也会做相应的改变）(1) PC (2) 平板(3) 手机你可以在这 2 个网站学习到更多关于响应式设计的规范 Material Guidelines or Intuit Design System.当你在设计基于卡片，响应式布局时，你需要问自己几个问题：卡片内容在所有断点之间看起来一致吗?（台式机、平板电脑、手机）间距值是否一致？交互合理吗?它们会影响卡片的大小和卡片之间的间距吗?长标题有考虑吗?它们会如何影响卡片的内容?一些 Figma 设计卡片布局的建议：为卡片定义约束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ），以确定当你调整它们的大小时，布局中的卡片应该如何响应为卡片应用 auto-layout（ https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout ），使它自动调整大小根据里面的项目。在 Figma 上有教程（ https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids ）创建一个 8px 的网格可以让你在设计中精确地排列和调整 8px 增量单元的元素大小7. 创建不同内容的卡片设计如果你事先知道卡片可能有不同长度的内容，请确保在设计中涵盖这种情况。在不同内容转换过程中将帮助开发以正确的方式为卡片做好还原，避免破坏内容对齐。8. 为更好的用户体验定义卡片交互UI 交互是用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的操作，状态是在特定用户的交互中出现的视觉反馈。与许多其他 UI 元素(按钮、文本字段、下拉菜单等)一样，卡片的状态应该取决于使用上下文和定义的交互。对于特定的交互，卡片应该根据状态设置样式。最常见的卡片状态列表:默认：卡片处于正常状态，无任何用户交互悬停：当用户将鼠标光标(指针)放在卡片上时激活：如果卡片是可点击的，用户按下鼠标主按钮点击它，卡片的样式应该改变，以显示组件是激活的。这与按钮被按下的状态相同聚焦：当使用键盘或语音等输入法时，卡片会高亮显示。通常在网页上这种状态是用蓝色的，但你可以选择你自己的品牌色，只要确保颜色与背景颜色至少 3:1 的对比度选择：卡片被选择时的状态拖动:用户拖拽卡片时的状态总结卡片是 UI 中的常见组件，你可以在大多数网站和移动应用中找到它，它实在是太流行且实用了，所以一定要掌握好卡片设计并进行大量的练习。通过这些知识点的学习，我们可以使它们在视觉上更有吸引力，更有效，更容易访问。欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/8-card-design-methods
用户 心智 程序 今年以来，京东购物小程序围绕“一键发现 万物好店”的产品心智，从消费链路的上游提升可逛性出发进行了一系列产品&营销设计升级。1.0 致力于打造更契合微信域的用户体验；2.0 尝试以一种有趣的姿态留住偶发闲逛用户。2.0 近期已陆续上线，借此机会和大家分享一下整个改版过程及思路。往期改版：让购物简单快乐！京东 APP 11.0 深度解读：视觉篇在 APP11.0 深度解读系列的第一篇文章中，剖析了基于生态进行体系化大改版的解读与思考，本文将聚焦于视觉设计，阐明我们对此版本的设计主张与思路，在各个场景是如何外化以辅助达成改版目标的。阅读文章 > 一、变化与契机过去，京购小程序更多是京东 APP 在微信域的分身，在货品、产品设计及营销层面与京东 APP 没有任何差别。现在，小程序已由散点式孤岛向全域营销转变，成为京东在微信域流量及交易的主阵地。与此同时，我们面向的用户也更加多元偶发，他们购物需求模糊，以闲逛、消磨时间为主，偏好居家日用、⻝品生鲜等高频高耗商品。在微信域差异化货品及算法的加持下，前端设计急需打破现状，进行体验差异化升级，塑造微信域专属心智。二、改版思路基于人货场差异化洞察，改版思路围绕“知心省心开心”的用户需求体系，从被动支持、到主动引领、再到互动交流，阶梯式构建用户对京购小程序的结构化认知。1. 知心打造契合微信域的用户体验首页作为小程序的门面担当，即是用户心智承接的核心阵地，也是内容分发的主要场景。故 1.0 为用户打造“知心”的消费体验，我们先从首页切入。在此过程中我们也面临着渠道、人群、品牌等多重挑战。基于数据/用户/竞品等专业洞察，以结构化思维解构分析，由里及表从框架、内容、动线、品牌 4 个方向升级应对以上挑战。框架承载能力升级针对框架的升级，将从广度和深度来个维度来进行拆解，为每一个闲逛场景，重塑更具包容性体验框架。广度上，面向不断扩展的多元化电商内容结合设计趋势跟随及偶发用户特性，将旧版楼层堆叠严重的货架型框架，通过内容精简使 feeds 移入首屏让用户快速进入逛的状态。深度上，将旧版单一扁平框架拓展成一个更具探索性的立体框架，以应对日益增多的渠道特色需求。通过摇一摇融入社交心智高效分发内容、向左打造私域化阵地、向右建设专属活动日历、下拉则用娱乐化承接偶发用户，让用户更好的发现内容。feeds 内容表达能力升级双列流设计弱化了推荐 feeds 不同内容的个性表达，基于前期大量的设计探索，我们从「触达表现心智」3 个层面系统化构建更具精细化的内容表达模型，提升内容触达效率的同时丰富内容形式。动线多元化升级在浏览前中后场景下深挖偶发用户痛点，结合用户行为及心理进行多元化营销动线设计，吸引持续浏览和点击。品牌心智升级在完成首页整体体验架构设计后，我们也围绕着京东品牌继承、差异化货品调性打造、大促特色营销氛围改造 3 个维度进行了京购小程序品牌心智升级。① 京东品牌继承与重塑微信生态环境下，京购小程序在继承京东品牌调性的基础上，通过兼顾场域特色，打造更聚焦、包容、多元的品牌记忆点，重塑京东微信域专属视觉体系。提炼高效、丰富、亲和的设计关键词，并定义品质简洁、亲和舒适、轻透明快的视觉基调，从色彩、 图形 、质感、动效 4 个维度进行设计映射。匹配微信域五大机会品类货品特性挖掘微信域 5 大机会品类特性，从色彩精细化传达、情绪性语义意向来布控场域类目主色调，塑造微信域差异化类目专属心智。有渠道特色的大促营销场建设在京东大促主题背景下，微信域将协同主站的节奏爆点、核心玩法、权益结算、尖货爆品内容。在此基础上，制定预热期抢跑营销节点，实现对大促整体节奏上的补位增长，在场景期通过限时营销部署对抗品类期的销售疲软的差异化营销策略。结合微信域用户动机及特点，我们进行了有渠道特色的差异化营销场设计。为统一大促期间用户感知，我们在品牌、颜色及风格调性上，同步了主站的大促营销心智，打造递进式大促首页基调。并基于小程序日常“低价”的营销策略，预热期采用颜色降噪设计让用户更聚焦信息为大促造势。品类专场期配合微信红点通知，在开⻔红及 bigday 同步 app 视觉氛围，唤醒承接微信的京东老用户。与此同时，为了更好的承接微信域用户，围绕“承接场效、优惠透传、视觉减负、营销感知”等设计策略，打造具有微信域特色的大促营销场设计，并不断尝试和校验试跑出最适合小程序的体验设计方案，激发用户“逛”的兴趣。最后为助力业务提升用户行为转化，针对微信域组件&动效等前端设计模块，持续进行 ABtest 测试，并基于数据反馈沉淀高转化设计策略。2. 省心① 为用户带来“省心又省钱”的购物体验我们的用户是典型省钱不省生活的一群人，不管是消费体验还是货品供应，我们都希望做到省心又省钱。消费链路升级：购物全流程用户需求识别与满足过去京购小程序侧重“搜索转化”的单一路径。为了给用户带去省心的消费体验，新版以购前明确购物需求、购中快速决策转化、购后获取专属服务的体验定位进行消费链路升级。购前：向消费链路上游延伸购前针对用户的模糊需求，在完善搜索功能的同时利用热点话题、微信域尖货榜单、延展推荐等内容升级搜索流程，向消费链路上游延伸，承接用户闲逛探索需求。购中：快速决策转化购中基于信息减负、路径缩短、社交辅助等设计策略，构建短商详、购物车分享、短链结算等新型产品形态来提升用户决策转化效率。购后：打造更具专属感的服务体验购后以用户分层，围绕不同场景、不同用户身份的内容&权益渗透设计，打造更具专属感的服务体验。微信域特色频道：一段从认知到相知的旅程京购小程序通过重运营、强干预的方式试验跑出微信域的心智单品和类目，从“单品、品类、品牌”维度孵化“10 元店、单单返、大牌微力”等特色营销 IP。在此背景下，设计侧围绕从认知到相知的过程，进一步助推差异化货品占领用户心智。认知：记住我的样子为快速穿透用户心智形成记忆认知的目的，设计上围绕“频道定位、品质凸显、微信专属”等关键词，着重刻画逛购动线中“无需计算的直降、邀友享低价的特权”，并通过品类调性，联动头图、商卡打造沉浸式的品类营销动线，匹配用户类目心智，立足于为用户带来“有品质最省钱”的购物体验。除日常运营外，频道每月定期联动品类和品牌打造营销 Bigday，以 “超 V 单品日、超级返、大牌 V 力”进行全新升级。为进一步穿透用户心智，团队内部头脑风暴反复推敲，以“心智连贯性、设计延展性”为原则，选取“V”作为微信域系列 IP 的超级符号，并根据应用场景特征设定符号延展原则，在首页、频道、黄流等购物全链路布局有效发声点，形成统一的、多方位的营销声浪。相知：记住我的好受微信去中心化特色影响，用户在微信的购物行为更加偶发、快捷，为加速用户行为转化，基于“短链”的设计思维，结合“爱达法则+上瘾模型”，搭建了积木式的 “IDA 后链路互动增长策略”提升流量 ROI。即从资源入口进入，通过区分不同生命周期的用户设计覆盖首页、频道、黄流等全链路权益营销动线，让对的人，在对的地点，获得最适合 TA 的权益，将“省心”贯彻到底。用“精准权益、互动裂变、私域沉淀”三位一体的积木式短链互动模型，赋能京东微信域广告后链路，充分串联及发挥公众号、视频号等微信域非中心化的业务能力，并最终沉淀到京东购物小程序做整体交易，拉长及放大用户价值。与此同时，为加速用户行为转化，融合心理学认知偏差等定律，对模型进行“复刻”和“升级”。在微信域特色频道和营销玩法中孵化“复访、裂变、转化”等短链玩法，助力业务增长。3. 开心更精准的匹配用户泛娱乐、泛社交兴趣随着用户消费场景的多元化，内容对整个消费行为产生了多维影响，作为传统电商平台如何从单一的理性货架导购到丰富的感性内容引导，从单一的满足商品刚需到增加情感因素和人文关怀？1.0 通过差异化体验升级拉近与微信消费者的距离，2.0 我们依然选择从用户视角出发，将小程序二楼作为创新试验田，尝试用更内容化娱乐化的方式与用户建立联系；我们想要京东不再那么“一本正经”，而是以一种有趣的姿态让用户在娱乐中完成购物初体验。依托于微信小程序二楼开放能力，区别于常规浏览动线，我们以逆向思维在页面顶部开拓一个能与用户深度交流的二楼娱乐阵地。通过首页娱乐任意门引发用户好奇心自发下拉，进入我们精心设计的神秘好玩世界；再以视频化&游戏化&社交化等好玩有趣的内容，并搭配微信即时打款，锁定用户进入后的黄金 5 秒注意力，循序渐进的通过传统电商权益牵引用户进入电商流程，从而链接小程序新消费场景。触达：传递娱乐属性，强化好玩有趣心智在霸屏下拉入口的设计中，秉承意向性及情绪化表达的设计原则，基于泛娱乐化关键词映射，打破京购小程序平稳的主流色系，用高饱和反差对比色形成视觉冲击；以轻拟物风深入构建元素细节呈现，尽可能塑造元素中的空间、体积、光源等复杂的物理表现，增加界面的质感厚度和纵深感，整体炫彩动感，使二楼好玩基调拉满，给用户焕然一新的直观感受。吸引：突破认知壁垒，贴近用户真实生活契合内容表达的设计风格探索小程序二楼如何突破认知壁垒吸引用户停留，我们进行了前瞻性的泛娱乐化内容探索。在内容呈现上，短视频以更加轻松直观的表达和更广泛的用户接受度来吸引用户持续停留；小游戏以反套路低门槛易上手的魔性玩法来获得用户投入精力增加粘性；社交互动以抓住目标用户正能量相亲相爱的特质来刺激用户病毒式传播。1.0 我们建立起的审美是一种对秩序、精致美的追求，2.0 需要更多元化的审美打乱设计的秩序，以一种更为感性的设计方式来传递调性，贴近偶发用户真实生活；我们根据内容特色尝试利用“新丑风”、土味暴力美学风、美女封面老头乐等设计风格让视觉表现陷入“百家争鸣”的局面。激励设计呼应现实场景，激发用户体验爽感激励机制作为吸引用户的有效手段，尝试用虚拟设计映射实体的手法来与现实场景呼应，拉满体验爽感从而建立与用户的情感共鸣，让小程序二楼走出一条“别样花路”。把生活中的记忆通过夸张的动效方式加入到激励设计的体验链路中，通过动效设计来引导用户情绪，强化喜悦感知；最终经过反复调试，现金设计复刻了 Money 扑面而来的惊喜动效。有了现金动效的打样，红包的动效设计也就顺利很多。转化：牵引用户软着陆电商环境当用户被吸引后，在此阶段使用简单直接的传统电商权益逐步牵引用户进入电商流程；至此通过整套动线，让这些偶发闲逛用户发现好玩有趣不一样的京东。写在最后在微信生态环境下京购小程序汇聚了形形色色的用户，他们可能是忙忙碌碌的打工人、有钱有闲的小镇青年、岁月静好的大爷大妈…；他们带着独特的生活气息来到这，很有幸为他们呈现不一样的京东；希望每一个来到京购小程序的用户都可以感受到知心、省心和开心。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-wechat-design
用户 操作 功能 引言任月月：据调查，中国人口老龄化程度在全球已处于中上水平。2022 年《政府工作报告》提出：“积极应对人口老龄化，优化城乡养老服务供给，推动老龄事业和产业高质量发展”。应对人口老龄化已上升为国家战略。其实早在 2020 年 11 月国务院办公厅就印发了《关于切实解决老年人运用智能技术困难的实施方案》。2021 年 4 月工业和信息化部办公厅发布了《关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》。该通知针对互联网网站、移动互联网应用(APP)制定了改造标准规范。目前很多头部大厂都已经按照要求完成了应用的适老化改造，并且分享了很多改造经验。可以说，适老化是今后应用发展的一个大趋势。笔者最近的工作也涉及到了相关改造设计，所以针对这个主题，做了一些学习探索。看了各类文章，结合 N 家银行 APP 的适老化设计场景体验和自己项目实践的思考，在这里与大家分享。希望可以给到大家一些启发。最新的银发族研究报告：如何做好适老化设计？来看阿里出品的研究报告！阿里云、零点有数与上海交通大学设计学院三方联合在 U Design Week 中发布了《银发族数字化产品适老化研究蓝皮书》（以下简称“蓝皮书”）。阅读文章 > 一、什么是适老化设计1. 适老化设计的定义百度百科上是这么定义的，适老化设计是指在住宅中，或在商场、医院、学校等公共建筑中充分考虑到老年人的身体机能及行动特点做出相应的设计，包括实现无障碍设计，引入急救系统等，以满足已经进入老年生活或以后将进入老年生活的人群的生活及出行需求。互联网时代，我们的应用在设计的过程中，同样也需要考虑老年用户的特征与需求。移动互联网的发展给我们带来了巨大的便利，特别是在疫情时期，很多事情实现了线上办理。但与此同时，也暴露出了很多问题，很多老年人被丰富的互联网世界拒之门外，比如不会使用健康码出行受阻、不会线上转账仍需跑银行办理业务、不会线上挂号只能线下排队等等。大家可以想想，自己身边的长辈是不是经常会出现上述类似的问题。我们在“嘲笑”他们落伍的时候，更应当反思，这个社会有没有为他们考虑。作为设计师，能够为他们做些什么？2. 无障碍设计无障碍设计常与适老化设计一起出现，无障碍设计不止适老化设计，是针对所有人的设计，要包容所有人。可以说是一种通用性、包容性设计。通用性设计：强调设计所有的系统和产品，使每个人都能使用，无论他们的年龄或能力。包容性设计：好的设计应该满足尽可能多的使用者的需求。例如：苹果系统的设计，他贴心的考虑到了行动、视力、听力和认知障碍人士的各类需求，并为其设计，让他们也能轻松的使用苹果的产品。在研究适老化设计的过程中，我发现一些适老化设计的规则和无障碍设计有着互通点。可以说适老化其实是信息无障碍的一部分，而信息无障碍的一些设计手法可以解决适老化中的部分问题。所以在此简单的聊一聊两者的关系，以更好的辅助大家对后文的理解。二、为什么要进行适老化设计1. 用户群体人口老龄化已成为全球普遍现象，但中国人口老龄化规模大、程度深、速度快。据局部抽查统计概算，全国 45 岁人口比例已达到 38%，如果按此比例计算，全国 45 岁以上人口数量已达 5.09 亿。另外，根据中国互联网络信息中心（cnnic）在京发布第 49 次《中国互联网络发展状况统计报告》显示，截至 2021 年 12 月，我国 60 岁及以上老年网民规模达 1.19 亿，互联网普及率达 43.2%。个人认为，互联网的适老化设计除了对 60 岁及以上老年网民友好，对于 50 岁左右的银发人群也同样有益。所以在这里，我将用户群体拓宽到了 50 岁及以上的银发人群。小说明：根据观察身边的年长用户，50 出头其实就已经存在看不清、搞不懂、不敢用、不会用等问题了，而且他们非常喜欢适老版本，也会主动要求帮忙把各类 app 调整成适老版本。所以在这里将用户群体进行了拓宽。根据 QuestMobile 数据显示，2022 年 8 月，银发用户月活跃用户规模达 2.97 亿，同比增长 12.5%，月人均使用时长 121.6 小时，同比增长 8.6%，增速明显高于全网平均水平。而且，国家在不断地向老年群体普及互联网，对于金融产品，银发人群具有很大的消费潜力，具有“有钱有闲”的市场优势。那么面对如此庞大且不断增长的用户群体，我们的设计势必要为其考虑，才能更通用。2. 人文关怀老年人等弱势群体，从生活到日常娱乐，他们对于产品的体验会和我们存在一定的差异。随着年龄的增长，老年用户会出现视力、听力、触觉、认知理解等能力的下降。且在心理上会对新鲜事物有一定的恐惧和抗拒，容易出现情绪挫败。一旦使用受阻，便会感到无助和沮丧，不愿意继续使用。另外，互联网信息的繁杂、经常出现的网络诈骗案例，也给老年用户带来了不安全感。他们会因为担心，不小心点了不该点击的链接，造成自己的资金损失。在工业和信息化部办公厅发布的适老化标准中也指出在适老化界面中需要保证产品的安全性，限制广告插件及诱导类按键。为了给老年用户带去更好、更安全的产品体验，让他们跟上时代的步伐，我们的设计应当为其考虑。为他们，也是为未来的我们。3. 不止为老年人虽说适老化设计，只是无障碍设计的一部分，但是我们的设计，最终有可能所有人都会受益。在某些特定的情况下，所有人都可能是“老年人”或“残疾人”提到“老年人”或“残疾人”，我们会想到以下几种场景：视觉障碍：看不清、失明听觉障碍：听不清、耳聋行动障碍：坐着轮椅认知障碍：不理解内容的含义对于以上几种场景，是只有“老年人”或“残疾人”才会碰到吗？当然不是。在某些情况下，我们也会碰到。这里就要提到一个概念：“情境性障碍（Situational Limitation）”，是指我们任何一个人，都会在某个场景下出现临时性的障碍。比如在一些银行服务中，情境性障碍的场景案例有：视觉障碍：在户外场景，我们使用手机银行，可能会出现文字看不清的情况；听觉障碍：在嘈杂环境中，我们会听不清一些语音播报；行动障碍：手上提着东西，想使用手机银行进行线下付款，可能会误点到别的功能上去；认知障碍：银行新上线了一个功能，我们之前从来没有碰到过，会出现短暂的认知障碍。也许我们设计的初衷是为老年人进行无障碍设计，但其实在很多时候，因为外部环境，我们也会出现短暂的情境性障碍，所以为他们设计，也是为我们自己设计。4. 银行用户需求网上银行 app 行业近年来收获了大量的用户增长，于此同时，也出现了各类声音，这些声音反应了用户的各类需求。据统计网上银行 APP，41 岁及以上用户仅占比 12.8%。对于年长网银 APP 用户对保险服务的需求更高，同时也更为偏好风险较高的股票交易。虽然现阶段他们在银行金融业的渗透率较低，但是随着更多的老年用户接触互联网金融，预计活跃渗透率将会进一步提升。对于这群如此有消费潜力的用户，现实中，有很大一部分老年用户对网上银行服务存在不了解、不敢用、不会用等痛点。场景小故事：以下案例来自身边长辈① 银行卡办理与认证场景：银行很多业务已实现半自动化，需要手机配合操作完成业务。问题：辛辛苦苦跑一趟银行，但因手机使用不熟练，不知道怎么操作，银行员工又忙没能详细指导(代劳)，导致业务无法顺利办理，只能第二天再跑一趟。② 线上转账场景：从柜面转账到 ATM 机转账，再到现在的手机转账，完全不同的转账方式，接受起来很慢，操作不熟练，不敢放心使用。问题：年长用户，对于网络陌生，内心保持不信任。宁愿跑银行也不敢、不会在手机银行进行转账操作，或者就让子女代劳，完全没有享受到互联网带来的便捷。根据网易 UEDC 调研，老年群体手机银行操作体验痛点和对手机银行的期望如下：如何将这群用户服务好，是当下很多网上银行 app 需要思考的问题。另外，在很多行业中，中老年人因为拥有丰富的经验在岗位上会更具优势，对于企业银行用户来讲，处于关键角色的用户例如财务，工作年限长、经验足是优势。那么企业银行面向企业的设计，如何提升中老年用户的使用体验也同样值得考虑。三、老年用户的特征与需求想要更好地为老年用户做设计，我们就需要详细了解老年用户的特征与需求。从前文的使用现状中，我们可以将老年用户的需求分为生理需求和服务需求。生理需求：看不清、难操作、怕出错(容易挫败）、不理解、听不清服务需求：不了解、找不到、不会用、不敢用这两类需求的来源还要从老年用户的特征入手去解析。1. 老年用户之困——视觉障碍随着年龄的增长，老年用户视觉的敏感度、明暗感觉、空间感、色彩感都会有所下降。而且老年用户患有眼部疾病的概率会有所增加。60 岁以上的老年人中，视觉器官老化导致视力减退者为 47.9%，其中绝大多数是远视。常见的问题有：字小看不清、感觉字的颜色淡看不清、难以识别蓝紫色为代表的冷色调颜色、动态视觉感知弱等。2. 老年用户之困——听觉障碍根据听力学的研究，男性约从 45 岁以后开始出现听力衰退，女性稍晚，随着人类寿命的延长，老龄人口的增多，老年人耳聋的发病率也有所增加。常见的问题有：听不到、听不清、觉得语速过快等。3. 老年用户之困——行动障碍老年人的行动以及各项操作会随着年龄的增长而变得缓慢、不协调。而且老年人的手指会偏大，细胞水分减少，皮肤皱纹加深，会使得触屏灵敏度大大降低。动作精准度的下降使得老年人无法准确的完成手势操作。常见的问题有：不会复杂的手势操作、容易误触、点击困难、无法长时间连续操作等。4. 老年用户之困——认知障碍人的认知能力也会随着年龄的增长而下降。老年人会出现反应慢、判断力下降、学习能力退化的情况。在这种情况下，老年用户接触互联网的心理障碍就更加剧了。常见的问题有：难接受新应用、难分辨信息真伪、不理解图标/图片的意思、容易挫败更容易接受熟悉的东西等。四、银行金融产品适老化设计应当如何入手针对以上老年用户的需求，银行金融产品的适老化设计应当如何入手。接下来我们结合《移动互联网应用（APP）适老化通用设计规范》中的内容（以下简称《规范》）和现有的各类产品适老化设计现状一起学习下如何进行适老化设计。《规范》适用范围为：各企业在提供适老化服务时的内嵌适老版界面、单独的适老版 APP。主要包括 5 大点技术要求：可感知性、可操作性、可理解性、兼容性以及安全性。1. 适老版入口设计① 内嵌适老版界面企业将适老版界面内嵌在原先的 APP 中，提供入口供用户切换。这种方案目前市面上使用较多，入口通常放置在设置中。对于银行金融产品，经调研，不少都遵循 all in mobile 的设计理念，要求根据不同的场景可以快速随时切换，所以除了设置中，还会在其他位置放置切换入口，方便用户切换。常见切换入口名称工商银行：幸福生活版；中国银行：岁月长情版；光大银行：简爱版；甘肃银行：颐年版；支付宝：长辈模式；招商银行/网商银行：长辈版；中国农业银行/平安口袋银行：大字版；宁波银行/云闪付：关爱版等等对于切换入口的名称，每款应用都有自己的特色，整体来看，大字、长辈版是使用频次最高的，通俗易懂，其他类型的名称虽然有特色，但是与其他应用不同，不符合用户通用认知，在一定程度上会给年长用户造成理解障碍。常见切换入口位置对于内嵌版本的切换入口通常有以下三种：一级页面顶部的“版本切换”按钮一级页面下拉加号内的“版本切换”我的页面-设置-“版本切换”这三种形式根据应用的功能层级，开启适老模式需要进行 1～3 次点击，常见点击路径如下：「首页」—版本切换图标—「适老版」「首页」—版本切换图标—「版本选择」—点击选中—「适老版」「首页」—加下拉—版本切换图标—「适老版」「首页」—加下拉—版本切换图标—「版本选择」—点击选中—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「介绍页」—开启确认—「适老版」「个人中心」—设置按钮—「设置」—版本切换—「版本选择」—点击选中—「适老版」特色切换过渡页面设计中国农业银行：设置页面直接外置各种版本，直观且丰富了设置页面工商银行：在版本切换页面详细介绍了各个版本的特色支付宝：独立页面介绍适老版对于开启适老模式，是否需要设置过渡页面，个人认为需要，因为具有图文介绍的过渡页面，虽然在一定程度增长了用户切换路径，但是给了用户切换的心里预期。而且对于模式的切换一般是低频操作，适当给用户一些“阻力”可以避免误操作。② 单独的适老版 APP企业也可以根据自身情况选择开发单独的适老版 APP，目前市面上以酷狗、UC、百度地图/新闻、腾讯地图/新闻、新浪微博等为代表开发了单独的适老版 APP。用户在应用商店搜索“大字版”“关怀版”等关键词即可下载。（目前暂无银行金融产品上线单独适老版的 APP）经体验，一般开发了单独的适老版 APP，在普通版本 APP 中便不会设置大字版切换模式，仅提供字号设置功能和下载适老版 APP 引导页。2. 可感知性该技术要求主要解决老年用户的视觉障碍、听觉障碍及认知障碍。规范如下：① 字型大小调整文字的类型根据调研，同样文字大小的情况下，非衬线体比衬线体结构更加清晰。所以《规范》中建议使用非衬线体，以减少不必要的视觉干扰，保证易读性。另外采用可以提高字重方法，使文本轮廓更加清晰。中文字体例如思源黑体、微软雅黑等都是比较厚重的，不建议使用宋体、楷体等衬线体。英文字体，特别是对于数据的展示，为了让数据更醒目直观，可以选择非衬线类厚重的字体。例如：我们部门为了在设计中更好的展示数据信息，提取常用字符设计了非衬线类的“兆日金融体”。文字的大小《规范》中建议适老版界面及单独的适老版 APP 中的主要文字信息不小于 18 dp/pt。Ant Design 设计语言中讲到关于计算最小字体的方法，基于年长用户阅读距离（43 cm）以及最佳阅读角度（0.75）计算并换算得到建议最小字号为 16dp/pt。那么我们到底按照哪个规范来呢？笔者觉得，这两个规范没有对错，大家根据自己页面设计或适配的情况来确定就可以了。对于年长用户来讲，不同的人视觉感官度也不一样，我们在设计允许、布局整洁的限度下，字体肯定是越大越好。例如下图是我在做适老版过程中制定的缩放系数规范，为了保证部分复杂页面布局不错乱，将主要文字最小字号定义为 16dp/pt。当然以上的规范不一定可以适合所有人，毕竟随着用户的年龄增长，视觉障碍会加深。我们还可以更加人性化一点，比如让用户在大字模式下可以继续根据需求调节字号大小、听文字消息。例如：iOS 系统中在辅助功能里可以设置更大字体、粗体文本（《规范》建议应用字型大小可随系统设置调整，或内部具备字体大小设置选项）；微信可以开启听文字消息。文字的适配规则针对文字放大后，极值情况下的适配，主要有省略和换行两种方式，需避免文本、元素被剪裁。界面元素及容器需要跟随文字放大而等比例系数放大同一容器内的元素横向间距保持固定，纵向间距可按照比例系数适配② 行间距《规范》建议段落内文字的行距至少为 1.3 倍，且段落间距至少比行距大 1.3 倍，同时兼顾移动应用适用场景和显示效果。根据调研测试：标题行间距为 1.3 倍，文字行间距为 1.5-1.8 倍，视觉效果最舒适。数值仅供参考，具体大家还要融合自己的设计去确定。③ 对比度为了解决年长用户因为文字、图像颜色淡而看不清的问题，在设计的过程中我们需要使用强对比度的颜色。《规范》建议文本/文本图像呈现方式、图标等元素间的对比度至少为 4.5：1（字号大于 18 dp/pt 时文本及文本图像对比度至少为 3：1）。这一标准源自 WCAG 标准，其中的颜色对比度的无障碍标准包括比度最低标准（AA 级）和对比度增强标准（AAA 级）。对比度(AA 级)：文本的视觉呈现以及文本图像至少 7:1 的对比度；大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px）以及大文本图像至少有 4.5:1 的对比度。对比度(AAA 级)：文本的视觉呈现以及文本图像至少要有 4.5:1 的对比度；大号文本（字重为 Bold 时大于 18px，字重为 Regular 时大于 24px）以及大文本图像至少有 3:1 的对比度。小贴士：Web Content Accessibility Guideline（Web 内容无障碍指南）是业界公认的指导标准，简称 WCAG 标准。其目标是为满足国际个人、组织和政府需求的 Web 内容可访问性提供单一共享标准。2018 年 6 月发布了 2.1 版本，并成为 W3C 推荐标准。WCAG 2.2 草案于 2022 年 9 月完成。简单来说，就是要求我们在设计适老化界面的过程中，文本颜色需要按照标准加深，与背景色拉开差距以保证年长用户可以清晰识别。为了保证达到这一标准，我们可以使用色彩对比工具去进行测试：工具一： https://webaim.org/resources/contrastchecker/工具二： https://www.wenjiangs.com/wp-content/uploads/2017/06/contrast-ratio/工具三： https://m2.material.io/resources/color/工具四： https://contrast-grid.eightshapes.com④ 颜色用途颜色是界面设计最重要的元素之一，设计师经常通过不同颜色表达去传达一些信息，例如成功、失败等等。但是在无障碍设计中，颜色不应当作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。因为随着年龄的增长，我们对颜色识别感知会变弱，所以使用颜色代表特定意义的时候，需要有另外一种区分方案。例如：使用下划线表示链接，或使用粗体突出显示文本图标和文本结合使用传达成功或失败的信息使用线条粗细、纹理或图案区分图标样式使用不同的图案传达信息等等对于颜色的使用，我们还需要注意以下几点：颜色多样：页面中应使用区别较大的丰富色彩，可借鉴真实存在的物体，保持认知一致。可适当加深颜色以提高颜色的对比度重要元素避免使用蓝色和紫色：由于老年人的晶状体变黄、变浑浊，会选择性的吸收蓝光，从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显。对于这一点，还是要看各个品牌的主题调性，如果无法避免使用蓝色和紫色，那么就提高饱和度以加强识别性。⑤ 验证码对于移动应用中的非文本验证码（例如拼图类、选图类、旋转类等验证方式），年长用户容易产生认知障碍，不理解验证的方式；也可能会产生行动障碍，无法准确对齐验证码。所以对于验证码我们应当做如下处理：图片文本类验证码应当清晰易懂，并提供放大查看的操作；非文本类验证码应当简单易操作，或者提供可被不同类型感官(视觉、听觉等)接受的替代或引导表现形式。⑥ 图标设计对于页面中的图标，在适老化的过程中我们通常是按照适配比例去放大原来的图标尺寸。除了单纯的放大，在项目允许定制化设计的时候，我们还需要注意尽量采用通用、年长用户易理解的形式去设计图标。另外建议搭配文字描述，方便用户更清晰更快速理解。例如平安口袋银行的大字版，图标都一定程度上进行了拟物化处理，并且都配有通俗易懂的文字解释“电话”“去这里”，能够让年长用户轻松领会含义。3. 可操作性① 组件焦点(热区)大小由于年长用户细胞水分减少，手指偏大，在使用触屏的过程中灵敏度较低。所以对于常规组件的焦点，他们操作起来可能会很难完成操作目标。所以我们在放大文字、图标等控件的同时，对于可点击的组件焦点(热区)也需要同步放大。《规范》建议适老版界面中的主要组件可点击焦点区域尺寸不小于 60 60dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 44dp/pt；单独的适老版 APP 中首页主要组件可点击焦点区域尺寸不小于 48 48dp/pt，其他页面下的主要组件可点击焦点区域尺寸不小于 44 44dp/pt。对于规范中的内容，具体我们可以这样做：在需要点击操作的元素( ② 手势操作触摸屏时代，有着各种各样创新的手势操作和交互；但是对于年长用户由于行动和认知障碍，这些创新比较难学习理解并流畅操作。所以在移动应用中，应对用户进行手势导航或者操作的结果提供反馈提示；避免需 3 个或以上手指才能完成的复杂手势操作。对于点击、上下滑动、左右滑动、放大缩小这四类交互年长用户的接受度更高。这四种交互，操作比较简单；且对应到界面上的屏幕空间，用户更容易理解。现在很多应用中创新，有长按侧滑进入左侧空间、长按下拉进入二楼等交互；这类交互对于年长用户来讲其实非常不容易理解且不便操作。笔者之前教过家里长辈这类操作，想告诉他们这类“便捷创新”的功能，但是发现他们重复三四次才能完成操作，且过一段时间就会忘掉，依旧会选择一步一步点击到达目标页面。综上，对于适老化版本的手势操作我们需要注意以下几点：使用简单的手势操作：单指优于多指、单击优于双击(多次点击)、单一的手势优于组合手势；不要加入需要力道触发的手势，例如长按下拉，年长用户把控不好力度很容易把这个手势变成了单击；有一定学习成本的手势，应当给出引导教学；给手势操作及时反馈，避免用户觉得没有触发到而多次点击。③ 充足操作/反馈时间在移动应用中，如果限时不是活动的必要部分或关键要素，且不会导致用户发生法律承诺或财务交易，则应为用户的操作留下充足时间，在用户操作完毕前界面不发生变化。年长用户对于一些动态信息的感知度比较低，所以如果页面中出现一些提示信息，我们可以采用以下方案让提示更友好：适当延长时间，避免用户还没读清内容就消失了，例如 toast 显示持续时间可以由 3s 延长到 5s；采用其他类型的提示给用户足够的阅读时间，将短暂停留的内容，调整为常显内容，由用户自行操作确认关闭，例如将 toast 改成弹窗；利用震动等其他感官提醒优化提示，例如消息推送的震动及消息提示音、警告场景下的长震动；我们在拉长交互时间的同时，还需要注意避免跨屏任务，因为年长用户在进行多个输入或操作的任务上会表现出明显的障碍。在任务的过程中，我们需要给出足够的解释说明，引导帮助年长用户完成多任务操作。④ 浮窗在移动应用中，若内容产生新窗口（包含但不限于弹窗），应设置易于用户关闭窗口的按钮。关闭按钮只可在左上、右上、中央底部，且最小点击响应区域不能小于 4444dp/pt。对于这条《规范》，我们可以拆分成以下几点来理解落地：超出 7 秒长时间停留的页面（弹窗），需要提供关闭机制；关闭机制可以是关闭按钮、返回按钮、跳过按钮或者功能文字操作按钮等一切可以立即退出当前页面的操作；对于这些关闭机制的点击热区不能小于 4444dp/pt。⑤ 提供更便捷的录入方式年长用户对于表单录入类的操作，总是有很大的心理/操作负担，碰到这类页面常常是不愿意操作，让别人代劳。例如银行的转账页面，大部分都需要录入付款信息、收款信息、转账金额等一系列内容。如果让用户每一项都手动输入，不但效率低而且很容易出错。我们可以做些什么，去减轻用户录入负担呢？提供有限的选项和默认项 在页面中我们需要适当精简页面以减轻用户心理负担，只提供需要的选项，或者在需要的时候出现对应选项。另外在有限的选项中，还可以提供高频选项作为默认选项，减少用户操作简单理解，提供的选项越少，用户越容易选择，提供默认选项>提供有限选项>提供多种选项。选择代替输入选择类的交互方式比输入类更便捷，可以避免繁琐的打字过程，很多年长用户打字都不是很顺畅，甚至是使用手写录入文字。所以对于一些固定项的内容，使用选择类的交互可以很大程度提升操作效率。识别录入代替输入对于一些比较大段，需要仔细核对的内容，使用拍照扫描、复制粘贴识别、二维码识别录入等方式更不易出错；例如付方账号的录入。自动数据带入具有前后逻辑关联的表单数据，可以提供填写某个数据自动带入其他内容的联动交互，减少用户输入/选择操作；例如录入收款卡号后、自动识别带入收款银行；常用项历史记录提供历史记录功能，记录近期操作过的选项，方便用户快速复用再次操作；例如常用收款人的记录，点击后自动带入收款人信息，无需重复操作录入。⑥ 缩短操作路径年长用户经常会出现“我在哪”“我要怎么做”“接下来我要做什么”等困扰；面对这样的困扰，我们可以做如下交互优化：精简功能，缩短重点功能操作路径，避免信息层级过深，要让用户快速触达；拆分任务步骤，防止信息过载，减少每屏信息密度；对于跨屏的长任务，提供操作进度引导，告知用户所处位置进度，做到流程明确。减少非必要操作，或允许跳过不必要的步骤；4. 可理解性① 提示引导机制《规范》建议在用户安装移动应用时，应为适老化设置、老年人常用功能提供显著的引导提示。也就是我们常说的功能引导机制。对于内嵌的适老版界面，前文中也有提到常见入口位置，市面上大多数的适老版切换位置都比较隐蔽，且未按照规范给予显著切换提示，还有很大的优化空间。经调研分析多个 app 产品，适老化设置我们可以从以下几点着手优化设计：初次下载 app 或适老版上线的时候，提供功能开启引导或功能上新提示，告知用户有该功能、功能的入口、如何操作开启；开启前提前告知用户，适老版是什么，开启后界面会有怎样的变化，给用户心理预期；进入适老版本后引导提示用户如何回到标准版本，避免用户不想使用适老版而找不到出口；退出适老版需要二次确认关闭，防止长着用户误触。例如云闪付为简单的弹窗提示，招商银行使用了半弹窗，还告诉用户如何重新开启长辈版，既起到了二次确认的作用也做了提示引导；在“设置”中提供“适老版”入口，且用户可以通过搜索“长辈版”、“亲情版”、“关爱版”、“关怀版”等关键词直达功能；常用功能的提示引导我们可以从以下几点着手优化设计：提供功能指示引导或说明设置帮助中心，提供纯文字教程、图文教程或视频教程，方便用户查找。还可以将教程以浮窗的形式展示在具体功能页面中，让用户可以边看边操作。设置客服中心（智能客服、电话客服），运营/客服人员专项跟进，随时为年长用户提供帮助。界面设计中，对于需要点击操作的设置行为指引，引导用户完成点击。例如在按钮文案中加入行为动作，结果导向的内容；还可以对于一些卡片式的点击区域加上按钮引导。② 语音功能在适老版中融入语音功能可以很好的辅助年长用户进行一些录入操作和信息获取，因为很多年长用户文化程度不高，不会使用输入法，大多选择手写输入的方式。但是手写输入效率比较低，而且如果写的字不清晰会识别错误。我们可以从以下几个角度融入语音功能：使用 AI 技术，提供语音输入功能，目前市面上不少银行应用都设置了语音操作的功能，而且将这个作为重点易触达的功能展示在了关键位置。例如工商银行的语音操作；功能操作过程中，提供实时智能语音助手或人工客服；也可以结合语音导读功能进行同屏解说引导用户操作；提供结果状态下语音播报或声音反馈提示，在操作正确或错误时给予对应的正向、警示提示音；融入智能读屏功能。融入语音功能的时候，考虑到年长用户的听觉障碍，我们还需要注意以下几点适当增大音量：老年人听觉平均感知音量在 67.5～75.3 分贝之间；降低语速，提供慢速、正常、快速等语速供用户自己选择，更清晰有效的获取语音信息；优化收音机制，去除杂音，提升录入识别成功率；支持方言，可智能识别方言或有一定纠错机制。③ 通俗易懂的文字由于年长用户触网时间短，受教育程度不同，可能对互联网常用的一些词汇存在认知障碍。所以我们在设计的时候需要对一些互联网词汇进行口语化表达，采用用户易理解的文案。同时对于一些提示性的文案，需要表达清晰，在文案上要具有一定的引导性，例如，用户输入账号缺少 1 位的时候，应当提示：请输入 xx 位账号，而不是仅仅提示，输入错误，让用户自己去找哪里错了。④ I 模型-精简的布局目前市面上大多数首页都承载了很多内容，但是这种布局对于年长用户来讲不利于集中视线聚焦功能。所以在适老版建议采用 I 模型的布局模式，聚焦内容，减少用户视线主焦点的转化，这样更便于年长用户阅读与理解。一般来讲，我们需要控制用户的视觉主焦点转化不超过 2 次。⑤ 使用具体的内容、真实形象在制作活动 banner 场景中，采用具象的图片会比插画类型的图形更容易向年长用户传达信息，而且会给年长用户传递出真实感从而提升对产品的信任度。例如中国银行在适老版的设计中采用了大量的真人场景配图，非常的直观易理解。5. 兼容性辅助技术移动应用程序不应禁止或限制终端厂商已适配好的辅助设备（如读屏软件等）的接入与使用。在辅助工具开启时，移动应用内容中所有功能性组件均能正常工作：按钮可正常访问；输入框能正常进行输入；多媒体能正常播放；在页面局部更新后，移动应用内容中新增的功能性组件也应能正常工作。这一点更多的是从开发技术角度制定的规范，要求软件开发的过程中做好适配，保证适老版使用各类辅助技术的时候能够正常运行。我们设计师能做的就是在设计验收的过程中，考虑到这个层面，并将一些辅助功能的接入与使用纳入设计验收。6. 安全性① 拒绝引导性内容现在很多应用有着各种各样的广告、推销、诱导下载链接等，而年长用户容易受骗，所以在适老版中严禁出现推销广告等内容。《规范》中限制如下：广告插件及诱导类按键限制禁止广告插件。适老版界面、单独的适老版 APP 中严禁出现广告内容及插件，也不能随机出现广告或临时性的广告弹窗。禁止诱导类按键。移动应用程序中无诱导下载、诱导付款等诱导式按键。对于银行金融产品来讲，涉及到资金安全，筛选重要功能、安全的产品提供给年长用户就显得尤为重要。例如工行适老版的投资理财和专属存款，仅放了适合年长用户的产品。② 给用户信任感，保障老年用户个人信息安全移动应用程序进行个人信息处理时应遵循最小必要原则，即处理个人信息应当有明确、合理的目的，并应当限于实现处理目的的最小范围，不得进行与处理目的无关的个人信息处理，以保障老年用户个人信息安全。同时我们在设计呈现的时候，可以加入一些安全、保障类的表达来提升产品整体的可信度，增强年长用户对产品的信任感，从而敢用。例如：加入安全中心、安全保障、信任背书等元素，打消年长用户疑虑；对关键信息进行脱敏展示，降低年长用户对数据泄露的担心；在各个环节增加安全信息提示，加强安全认证，多重保障让年长用户安心；增加防骗、反欺诈模块，增强年长用户防骗意识章节小结以上，我们结合《规范》里逐条规则和实际案例拆分讲解了如何去实际落地适老化设计。在这里借用阿里对适老化设计建议的关键词提炼，总结本章重点内容：字号18dp/pt——清晰的字型、足够大的文字、舒适的行间距强烈好于柔和——符合无障碍标准的对比度、可识别的颜色具象好于抽象——优先使用写实图片行动好于描述——使用表示行为的“动词短语”会更容易理解熟悉好于新鲜——使用符合认知的设计和流程、易理解的图标、通俗易懂的文案色彩好于图形——使用丰富的色彩，加强年长用户记忆与理解点击好于滑动——简单的手势操作、容易点击的热区点击好于输入——提供更便捷的录入方式多模态好于单模态——语音功能的融入接下来我们一起看一下目前市面上的一些银行金融产品适老化版本的体验测评分析。五、银行金融产品适老化案例分析1. 工商银行名称：幸福生活版slogan：超大字体，设计极简；语音助手，交互升级；专属理财，乐享收益；亲情账户，传递关爱。入口：五个一级页面下拉加号内的版本切换；我的页面-设置-切换长辈版(幸福生活版)出口：一级页面拉加号内的版本切换；我的页面-设置-切换标准版。体验分析：入口和出口位置及交互一致，贴合用户心智，符合操作习惯；一级页面布局精简，层级清晰，重点功能突出。语音操作放在了最重要的位置，方便年长用户操作页面内的功能都经过了筛选，只放出了年长用户常用功能。对于网点服务还有专门的适老网点推荐功能子页面也做了适老化的定制，从视觉到交互，都适配了年长用户需求。除了个别不是很重要的标签文字比较小，工行整体的适老化都做的不错推荐指数：2. 招商银行名称：长辈版入口：我的页面-设置-长辈版出口：首页-下拉到底部-回标准版体验分析：入口较隐蔽，开启无提示直接开启首页是常用功能、点击客服直接进入“小招客服”，页面精简，重点突出；功能子页面仅做了简单的文字、控件放大；点击“回标准版”出现的半弹窗提示，防止误操作，起到二次确认的作用，同时告知用户重新开启的入口推荐指数：3. 中国银行名称：岁悦长情版slogan：风格简约，大字展示，为年长客户甄选产品和服务入口：首页-版本；我的-设置-版本切换出口：我的-切换标准版体验分析：入口的设计视觉效果很好，非常直观。出口太过明显，且没有二次确认，对于年长用户如果误触了回到标准版，可能找不到入口首次切换至岁悦长情版，有功能引导一级页面功能和布局做了精简，但是二三级子页面未做适配。整体设计风格符合年长用户审美，给用户温馨的感觉。推荐指数：4. 中国农业银行名称：大字版slogan：超大字体，功能精简；语音助手，一键客服入口：首页-版本；乡村振兴-版本；我的-更多下拉-版本；设置-版本切换出口：首页-版本；我的-更多下拉-版本；设置-版本切换体验分析：多个入口，且入口的设计样式很有特色；出口与入口的路径相同。布局清晰，功能做了筛选精简，一级页面仅保留常用功能。重点功能子页面进行了布局和交互的适老化适配。整体的视觉还原和谐度很好，大字版的用色也针对年长用户的生理特征进行了加深处理。推荐指数：5. 宁波银行名称：关爱版slogan：超大字体，精简功能；贴心服务，便捷易用入口：首页-加号下拉-版本切换；我的-版本切换；出口：首页-加号下拉-版本切换；体验分析：页面极简，取消了底部的 tab 栏，首页视觉表达符合年长用户需求；语音功能使用了悬浮的按钮，且伴随收起交互，这点对年长用户不是很友好，不容易点击使用；重点功能子页面仅做了少量适配，大部分控件与普通版一样；推荐指数：6. 平安口袋银行名称：大字版slogan：平安在手，儿女无忧；字体更大，简洁易懂入口：首页-加号下拉-版本切换；我的-版本切换；出口：首页-版本切换；我的-版本切换；我的-设置-版本切换体验分析：页面结构清晰，重点功能突出，精选的功能都是与年长用户相关的，比如防骗宝典、平安老人意外险等等；图标设计更具象，更易读懂理解；二三级子页面均做了视觉适配，适配呈现效果体验感很好；各类业务场景都做到了告知、引导和反馈。推荐指数：7. 云闪付名称：关爱版slogan：字体大，图标大，使用更简单入口：首页-版本切换；我的-设置-切换至关爱版出口：首页-版本切换体验分析布局和功能都做了精简；退出关爱版有二次确认，避免了误操作；各功能的子页面未做大字适配。推荐指数：8. 江苏银行名称：融享幸福版slogan：字体更大 简洁清晰 一键帮助 安全无忧入口：首页-版本切换；出口：首页-版本切换；体验分析入口与出口一致，标识明显；页面布局精简，功能内容贴合年长用户的需求，特别是一键帮模块里的内容都是实际解决年长用户需求的功能；语音介绍功能，是其他产品没有的，开启后可以点击进行语音播报讲解，很大程度解决了年长用户看不懂、不会用的痛点；“反欺诈指南”、“日历模式”都贴合年长用户需求，暖心且有特色；推荐指数：总结这篇文章很长，感谢大家耐心读到了最后。其实刚开始准备这篇文章的时候，只是想基于自己的工作内容做一个复盘。但是在书写总结的过程中，我查找阅读了大量的资料，感受到了无障碍、适老化设计的暖心人文关怀，就觉得很有必要仔细的写一写。特别是这句话“手机字体越来越大，音量越来越大，子女的陪伴却越来越少。子女知识想用一部手机联系到老人，却没有想过，他们也想用手机，去联系今天的世界。”狠狠的触动了我。所以如果能让更多的设计师关注到这个群体、能够向更多的设计师传达适老化设计的一些知识点，这篇文章就发挥了它的价值。其实整体来看，目前整个互联网的产品适老化才刚刚开始并不是很完善，企业也可能因为成本、资源等问题无法实际落地推动适老化设计。但是随着时间的推移，一定会有更多的产品关注并落地实施适老化（在我写这篇文章的过程中，有好几家银行产品对适老化的版本做了多次迭代优化，最终编辑排版的时候，又更新了一些案例。所以说适老化是大趋势，头部产品都已经开始注重这部分人群的体验了）希望通过这篇文章给设计师们一点启发。就算大家目前所做的产品，没有适老化设计的需求，里面的一些知识点融入基础产品的设计，也是适用的，能给用户带去更好的用户体验。再次感谢大家的阅读，希望通过设计的力量，帮助年长用户更好的融入并享受数字化生活。参考文章：为了帮助大家更好的理解本文，以下为书写过程中阅读参考的一些文章和报告，可供进一步深入学习。《QuestMobile2022 银发经济洞察报告》《中国互联网络发展状况统计报告》 《QuestMobile 银发人群洞察报告》 《QuestMobile 金融支付报告》 《工业和信息化部办公厅关于进一步抓好互联网应用适老化及无障碍改造专项行动实施工作的通知》《腾讯出品！手机银行适老化设计探索（附超多干货）》 《如何做好产品的适老化和无障碍设计？来看腾讯的实战案例！》 《小程序适老化设计指南》 《超全面！「无障碍设计」指南》 《适老化设计——让产品充满温度》 《百度大字版精细系统的适老化设计研究实践》 《一篇就够！实际场景落地适老化设计》 《色彩无障碍指南: 如何让色盲用户获取色彩信息》 《银发族数字化产品适老化研究蓝皮书》 《优设 9 图-如何做好适老化设计》 本篇来源：优设网原文地址：https://www.uisdc.com/bank-app-said-aging-design
干货 设计师 合集 大家好，这是 12 月的第 1 波设计干货合集！这次的干货合集应该相当符合视觉和平面设计师的需求，有每日更新灵感素材的设计师干货日报，有两款各有特色的配色工具，有免费的3D字体小样，也有开源免费的高品质图标，有风格现代简约但是质感十足的免费背景素材，还有新的人工智能绘图工具。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第五波！2022年11月精选实用设计干货合集大家好，这是 11 月的第 5 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、免费高素质简约现代弥散背景https://vackground.com/product/liquid-wave-modern-mesh-backgrounds高素质的背景素材能够极大地提升整个页面的格调，而这套免费的背景素材就可以做到这一点，整体的风格非常现代，而且带有弥散渐变的光影，视觉效果拉满。这组免费背景总体有 40 张，包含有 ai 和 jpg 两种格式，有需要的同学赶紧下载。2、为品牌精心适配的配色工具https://draftss.com/color-palette-for-branding这个名为 Colorss 2 的配色工具和其他配色工具略有不同，它会根据情绪、感知和氛围来制定配色方案，这些情绪具体有什么特征，适合什么定位的品牌使用，会给人什么样的感受，都会搭配相应的说明，方便设计师使用。而且 Colorss 还会制定配色方案的延伸和变种，方便在复杂的使用场合灵活使用，可以说相当良心了。3、图案快速预览配色工具https://more.graphics/variants某个配色方案确定之后，整体的效果到底好不好？最简单的方法，就是找个图案直接套用看看效果。这个服务就是专门干这个事儿的，内置了3个图案专门用来查看各种配色的实际对比度和视觉效果，你也可以自己上传图案来测试效果，并且也可以自定义配色方案来查看效果。4、超帅的立体 3D 字体 Font Zhttps://fontz.design/FontZ 提供的 3D 字体几乎适用于所有的设计项目，这些预先设计好样式的字体可以非常轻松地使用，而且支持的软件类型也相当丰富，从 PS Sketch 到 Figma Blender，虽然整套字体是收费的，但是提供免费的 Demo。5、每日更新的设计师干货日报https://designerdailyreport.com/这个名为设计师日报的浏览器插件，会提供每日精选内容，从精选的图片、免费的字体、品牌设计、优秀设计师作品集到令人惊叹的网站、作品以及 Instagram 灵感等，不一而足，想让灵感和素材触手可及的同学可以装上这个插件获取灵感吧。6 、免费开源的高素质图标https://circumicons.com/这是一个面向设计师和开发者的开源图标库，这套图标库总计有 285 个不同但是足够日常使用的图标，这些图标特别适合使用 React、Vue、Svelte 等现代开发框架的地方，无论你是设计师还是开发者，都可以轻松驾驭和使用这些图标。7、人工智能绘图平台 AISEO ART https://art.aiseo.ai/AISEO Art 同样是一个基于人工智能的文字转图片的服务，它的人工智能算法按照分类进行过细致的训练，你可以在输入文本描述之前，先选择你要生成的图片的分类，它生成的结果会更贴合需求。此外，AISEO Art 还新上线了模板功能，喜欢尝试的同学可以上手看看。本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol1
渠道 用户 反馈 作为一枚产品汪，需求分析是一项非常重要的工作，而做好需求分析的第一步，莫过于搜集分析用户的问题并提出解决方案了。恰好最近也在温习三节课的产品课，分享所思所想，共同交流讨论~那么如何去收集问题呢？——那自然是要从用户的行为、操作、评论上搜集了。一种时间较快、成本较低、资料较多的方法就是通过用户反馈发现问题，用户反馈往往都是网络上现成的，当我们知道从哪些渠道可以找到，不同的渠道该如何去处理，就可以很快地得出一些有价值的现有问题。用户反馈，不仅可以得到产品自身的问题，在很多时候，还可以获取到竞品的问题，以及从中发现自身产品未来的机会点。接下来我们就一起来看看怎么做吧~更多用户调研方法：如何设计高质量B端调研问卷？高手总结了8个步骤（附模板下载）编者按：B端设计的调研问卷该如何设计？阅读文章 > 一、可以从哪些渠道搜集用户反馈？总体来看，可以分为三大类渠道：网络公开渠道，半公开渠道，产品内部渠道。网络公开渠道：APP Store、豌豆荚、小米、华为等手机应用商店；百度、google 等公开搜索引擎；微博、百度贴吧、小红书等公开交流平台；半公开渠道：微信、微信朋友圈、用户评价等有好友关联的半公开性质渠道；产品内部渠道：用户投诉、客服咨询、电话录音，一般可以从客服或者运营团队得到；那么针对不同类别的收集渠道，要想尽可能地获得有效信息，我们需要使用不同的处理策略。二、如何处理不同类别渠道的反馈？网络公开渠道，最关键的是要勤搜索，定期到公开渠道上去搜索用户评论。第二可以借助一些工具，比如关键词订阅、使用监控工具等。网络公开渠道的第一大类是主流的应用商店与常用工具，这个类别和产品和用户特性无关，适用于任何产品。需要注意一点，在不同的系统中，明确有哪些不同的应用商店。下面列出比较主流的应用商店。iOS 系统：APP store。Android 系统：豌豆荚、百度手机助手、360 手机助手、小米应用商店、华为应用商店等。常用监控工具：AppAnnie、应用雷达、CQASO 等。那么花了这么多心思监控应用商店，我们需要关注什么？建议关注以下四个关键点：重点看低分差评，可以锁定 1-3 分的低分，在有限的时间内获取最大的信息；重点看有实际描述的低分，这些评论用户是描述了实际问题的，比如一天卡了好多次，定位我的位置不准等实际描述的评论，可以忽略比如不好、垃圾、差评等无实际描述的差评，因为提供不了有效的信息；监控异常行为，关注是否有水军刷榜、恶意评价等；监控竞品变化，俗话说知己知彼百战不殆，关注竞争对手的最新情况，也是提升产品的一个关键点。第二大类则是微博、百度贴吧等公开交流平台，主流的社交平台有微博、百度贴吧、知乎、小红书这些比较知名的公开交流平台，都可以到这些平台上，通过关键字搜索用户评论。需要注意的是，根据我们自身产品的特性和用户群的细分，需要适当定向选择不同的平台。比如是基金股票相关的产品，那么还要到雪球、天天基金等知名的相关公开网站上，去寻找用户反馈。对于半公开渠道，分析用户点评基本同公开渠道，同样的，我们要重点看低分差评、有实际描述的差评、异常行为。通过这些真实的用户反馈，从而可以更进一步地去分析当前遇到的问题，是产品质量的问题？还是服务质量的问题？或者是功能不能用不好用的问题？能够真正去发现问题，找到问题，解决问题。对于内部渠道，一般通过客服后台、意见反馈、电话、邮件等方式得到，作为 PM，我们要清楚公司内部的用户反馈渠道有哪些，第二要到一线去，定期与一线客服交流，以此获得用户反馈。如何收集产品问题，最基本最常用的方法之一就是用户反馈，知道从哪些渠道可以获得，并且不同的渠道如何处理，是一个合格 PM 的基本功哦~！欢迎关注作者微信公众号：「书灵的织梦国度」本篇来源：优设网原文地址：https://www.uisdc.com/collect-user-issues
价值 业务 目标 UX/UI 设计师在日常工作中是否遇到以下疑问：1.方案由上游主导，设计师没有发挥空间怎么办？2.如何从设计视角出发梳理体验优化建议？3.如何向各方证明你的优化建议是有价值的？要回答以上问题，首先得理解设计价值究竟为何。设计价值相关模型：如何清晰量化设计价值？试试这个超实用的GSSM模型！编者按：本文通过实战案例，帮你掌握一个能量化设计价值的GSSM模型。阅读文章 > 一、如何理解设计价值设计≠艺术，设计从诞生之初就是为“解决问题”而存在。在体验设计场景，如果业务方是“需求提出者”，那产品经理和设计师就是从不同视角切入的“问题解决者”，而用户既是“需求源头”，又是“方案验证者”和最终“价值创造者”。下面我们详细解读「设计价值」与「业务/用户/产品」三方的关系：1. 设计价值源于业务目标，产于业务价值变现商业设计本质上服务于业务，因此判断设计价值的关键是：是否真正地帮助业务解决问题，助力业务目标达成。换言之，设计价值就是设计师通过设计思维/策略/方法，直接或间接帮助业务创造的那部分价值。设计不能脱离业务自嗨，不能“为了强调设计的存在而设计”。 有效设计在于对业务诉求的精准满足。我们构思设计方案时，脑海中始终要回答：实现了哪些业务目标解决了哪些业务问题创造了哪些业务价值2. 通过对用户需求的洞察和满足，为业务创造价值业务价值最直接的来源是用户价值的变现，因此，想要实现业务价值 要服务好用户，这为设计价值的实现提供了有效抓手：设计师可以通过洞察用户需求，完善产品功能、优化操作体验的方式助力业务目标达成。P.S. 用户价值 = 产品给目标用户带来的核心价值，即：帮助用户解决了什么问题，满足了什么需求，提供了什么服务。3. 产品 PRD 是“第二参考视角”对于资深设计师来说，产品 PRD 不一定是最优解，它更像是提供了解决问题的第二参考视角，产品侧在理解业务目标的基础之上，从实现角度产出了初步解决方案，为设计师打开思路。不同阶段设计师在面对同一份 PRD 时，有如下处理方式：初级：不知其然，表象复刻——直接按照PRD方案输出相应设计；中级：知其然，表象优化——对PRD方案进行查漏补缺，提出体验层面优化建议；高级：知其所以然，透过表象看本质——综合业务/产品目标，挖掘用户原始需求，提出当下最优解。二、3维推导设计目标当设计师拿到 BRD & PRD 后，如何综合多维视角制定设计目标和策略？下面列举了笔者在日常工作中重点关注的维度。1. 业务视角：明确定位业务会从商业角度提供清晰定义产品边界和价值变现模型，从 BRD 中可以提取以下重点信息：产品/需求的目标用户类型和特定场景范围；给用户带来的核心价值（帮助用户解决了什么问题/满足了什么诉求）；用户价值变现模型和策略（如何通过满足诉求进而实现用户价值变现）；业务价值可量化指标我们需要注意以下两点：关注北极星指标，比如某些场景侧重“留存”，有些侧重“转化”，这会影响设计侧重；在产品发展初期，了解业务线未来的布局和规划，可以帮助我们把握设阶段性计节奏。2. 用户视角：匹配 & 完善需求用户是一切需求的源头，仅从业务视角出发定义需求是无本之木。因此当设计师碰到业务需求不明确，或者对产品方案存疑时，最好的办法就是回归用户视角。用户需求挖掘一方面可以丰富和完善业务目标，另一方面也帮助我们审视当前业务需求是否与用户诉求吻合。通过用户分析我们可以得到：目标用户特征；典型场景下核心诉求、任务和关键行为；关键行为对应的可量化指标P.S.为了挖掘多维度用户诉求，我们可以根据具体场景将用户细分，如：角色：如 B 端/C 端；熟悉程度：小白/普通/专家；客户价值：高价值/一般价值；目标强弱：强目标/半目标/无目标；兴趣/偏好：价格敏感/小众人群；阶段：获取-激活-留存-收益-推荐；流程：开始前/进行中/结束后...3. 产品视角：产品策略 & 实现约束在业务主导的场景下，产品经理往往是需求的“第一经手人”，我们需要在 PRD 中捕捉到产品对业务需求的理解和转化策略。另外，产品视角也阐释了在落地实现层面的约束限制，特别是前台与中/后台的依赖关系。从 PRD 中可以获取以下重点信息：产品目标和策略；功能范围和核心流程；前中后台能力支持；实现成本和风险点在消化 PRD 过程中我们需要注意：① 从产品系统视角审视需求：多数情况下，我们接到的需求是点状的，可能是某个子模块的子流程/功能，此时我们可以用更系统的视角向上追溯，定位模块所属能力矩阵，找到模块与模块之间的联系，这有利于精准把握需求，保证链路场景闭环，为后续由点到面驱动更大层面体验优化作准备；② 不要忽略实现层面的限制很多功能不是“不该做”，而是当下“做不了”或“性价比低”，一些优化方案提出前，我们需要从产品角度考虑现有中后台能力支持、研发可行性、运营人力成本等，避免设计“空中楼阁”。综合以上业务、用户和产品三个维度，我们更加精准推导设计目标。需要注意的是，设计不是万能的，大多情况下设计只能通过“影响/实现局部用户价值”间接助力变现，我们只需关注可以通过设计手段参与、干预和落实的部分即可。一个设计目标的完整表述 = 通过「XX 设计策略」帮助目标用户「实现 XX 价值/满足 XX 需求/解决 XX 问题」，以助力「XX 业务目标/变现方式」达成。（在实际表达中可以适当精简）三、方案推导 & 价值量化确立明确的设计目标和策略后，下面进入设计实施和验证阶段，这里推荐两个基础的推导模型。1. SKS 模型：从策略到方案SKS 模型，即策略(Strategy) 影响因子(Key factor) 解决方案(Solution)。设计目标中的策略是一切方案推导的源头，我们需要找到影响策略实现程度和效果的关键因素，将其视为可控变量，并以这些变量为切入点进行方案尝试，最终衍生多种解法。比如：我们把提升 Banner 的点击率作为策略，那影响 banner 点击的影响因素可能是：形式是否新颖、配色是否亮眼、是否有动效引导、利益点是否突出、行动按钮是否吸引人点击等等，每一个影响因子都可以衍生出多种设计方案。2. GAM 模型：从目标到指标上文提到，设计手段通常是以间接方式助力用户价值实现，进而赋能业务目标达成。那如何量化设计价值呢？我们可以使用“GAM 模型”，即设计目标(Goal) 高价值行为(Action) 衡量指标(Metric)。具体方法如下：① 设计目标反推高价值行为一个设计目标实现，一定是由链路中一个/多个高价值行为促成。比如用户在真正“下单”前，会访问商品详情页，浏览商品详情页信息，加购物车等。② 用行为指标度量设计价值用数据刻画和度量高价值行为的指标变化，进而度量设计方案的价值。 我们可以尽量多维度拆解高价值行为和相应度量指标，维度越多，关联性越高，判断误差越小。四、小结事有轻重缓急，不是所有的需求都需要走上述方法进行设计分析，要学会辨别重点的、有发展潜力的需求投入更多设计精力深入研究。后续笔者将通过具体的设计项目，详细阐述如何运用业务产品用户三重视角，推导改版目标和设计策略，敬请期待《设计师如何提升专业价值-实战篇》。参考文献：《五步推导，让你成为体验设计专家》《谷歌 HEART 用户体验模型》《如何理解「设计价值」？又该怎样体现？》《互联网产品经理应该具备的 3 种视角》欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/increase-design-value
用户 新手 操作 前言很多时候，大家都觉得新手引导大可不必，对于大部分产品，用户看都不看直接关掉，但对于一些较为复杂的产品，新手引导是不是比看长篇大论的说明书好多了。设想一下，我们生病后拿的药品，可曾有过一次将说明书从头到尾的看完过，我相信通常都是遵医嘱或者后续再咨询吧，相比之下，如果购买的是一台跑步机，除了看视频操作之外，可能还会看一看说明书，虽然查看率较低，但不可否认的是遇到突发问题或许能起到关键作用。UI 设计中的新手引导主要帮助用户认识产品、捋清重要功能入口，以帮助其快速上手、降低后续使用过程中的认知成本，同时也是产品作为拉新转化的重要步骤，对于较为复杂的产品来说至关重要，不容忽视。那么在设计新手引导时要注意哪些问题、如何将引导的作用发挥到最大，接下来与大家一起了解。引导设计B端篇：如何做好B端产品的引导帮助？我总结了2个方面！合理的产品引导功能，可以使用户在较短时间内了解产品的特性与使用，本文带你了解静态和动态2种邀请引导方式。阅读文章 > 一、了解新手引导1. 什么是新手引导当我们进入一家新的公司时，一般都会有人事带着我们认识团队中的每一个人、或者在会议上做自我介绍，我们很清楚，即便不这样做，只需一定的时间也可以通过主动/被动沟通逐渐熟悉，但公司的安排无疑加速让我们融入新的环境，更快进入最好的工作状态，这就是显示版的“新手引导”。《增长黑客》中曾说过：欲望-摩擦=转化，为了增加转化，既可以增加用户的欲望、也可以减少产品与用户的摩擦，“新用户体验”作为用户旅程的起点，必定有诸多摩擦点，新手引导就是为了消除这些摩擦点而存在。产品中的新手引导能帮助用户在短时间内快速了解产品特色以及使用方式，轻松体验多种功能。站在产品角度，新手引导让用户掌握产品核心功能、提高留存率后，对提升转化起到了至关重要的作用。2. 需引导的功能/内容首先，展示产品特色，让用户了解该产品相比同类产品中的优势与亮点，给用户留下良好的印象、或者说有想用下去的欲望；第二，产品的更新迭代，不管是新功能的上线还是原有功能入口位置的变化，都应该及时提示用户，避免用户在之前版本的固有思维中、无法快速扫视到自身所需的入口而花费更多的时间成本；第三，操作指引，这一点并不是所有产品都需要的，在正常情况下，产品要做到不让用户思考就能快速上手，但针对较为复杂的产品，则需要通过新手引导帮用户快速掌握其操作方式与技巧，降低自行学习成本，例如部分 B 端、工具类应用。3. 出现的时机大部分新手引导出现在应用下载或版本更新后的首次打开时，这有助于用户对产品的新功能/操作有基本了解。新手引导不求大而全，在介绍核心功能和特色后，可将出现过的引导进行隐藏，方便用户在需要的时候手动唤出以寻求帮助。另外，产品需要保持用户对产品自行探索的好奇心，对于那些非必须但必要的新手引导，可在不干扰用户的前提下，根据用户的操作进行行为预判，在合适的时间主动给予提示，确保用户的隐性需求能得以明确并及时解决。二、使用场景及样式分类1. 页面遮罩引导页面遮罩引导相当于把气泡引导样式进行了升级，区别在于页面上方增加了一个黑色半透明蒙层进行遮罩，被引导的下层内容处镂空设计，并在蒙版上配交互手势、文字信息或插图等内容进行辅助说明，用户需要手动点击“下一步/跳过/关闭”按钮方能操作其他内容。这种新手引导最大的优势是能让视觉聚焦于当前被指引的功能说明处，确保用户不会被其他信息所干扰。基本是在下载或更新应用后的首次打开时出现，可显示一个或多个（顺序引导），信息传达的有效性很高。需要注意的是内容介绍必须与所引导的位置处保持亲密性，关闭按钮明显、易操作。出现多个引导时，需同时提供“下一步”、“跳过”按钮，这里不乏有一些老用户二次下载或出于更新版本的目的，根本不需要新手引导，如果每次都要挨个点，对老用户来说，这不是帮助、而是干扰了。2. 对话框引导对话框一种强引导，一般在用户即将使用的某个功能被限制或在使用过程中主动寻求帮助时出现，对用户来说有实际性的帮助。对话框的出现依然会打断用户操作，尤其是自动触发的弹出时机要得当，弹出不及时或提前干扰用户都会存在负面影响。对话框引导会在合适的时机由系统自动触发或用户主动触发。① 系统自动触发例如用户需要使用某个功能时，系统自动弹出需升级到新版本或完成任务才能体验，并提供快捷通道，方便用户直达目标。另外，视频类应用的付费影片可免费体验 5 分钟，到时间后，系统会自动暂停播放并弹出付费通道，引导用户转化。② 用户手动触发这类引导都会有一个操作入口，使用按钮、“问号”图标或文本超链接（说明/操作指引/帮助...）提示，用户可随时点击唤出引导说明。例如，用户在应用内主动开启设备的通知、定位权限，激活信用卡时预留手机号码的文本说明或卡背面的 CVV/CVC 图文指引说明等。3. 气泡提示引导这是一种较为轻量但指向性极强的引导方式，其表现形式是在需要的位置弹出一个带尖角的气泡容器加引导性的文案提示，用户可跟随引导操作、也可忽略气泡直接操作其他内容，不会打断用户，其干扰性极小。气泡提示引导可用在新功能上线、核心功能定位、隐藏菜单提示等场景，可配合图片素材、动画效果，因带有明确的指向性，可出现在页面的任何位置，兼容性极强。4. 操作栏引导相比前面提到的对话框引导，操作栏与之有些相似，其都是阻断式且没有明确指向性的引导方式，唯一不同的是，操作栏虽然视觉重心稍弱于对话框，但弹出的位置在屏幕下方，利于用户操作（靠近手指），尤其是单手操作更容易触达。另外，操作栏有更多的空间资源，对于内容较多的详细指引比较适合，可通过图文、背景组合营造出浓烈的视觉氛围，还能增加突出的 CTA 按钮提升转化率。5. 其他引导方式除了上述提到的几种新手引导之外，还有引导页、缺省页、偏好标签等方式，但那些都是较为复杂且独立的模块体系，不是三言两语能说清楚的，建议阅览其他单独的相关资料。三、新手引导设计小技巧1. 情感化链接情感化是设计的利器，它将毫无感情的互联网产品赋予生命力，消除人机界面的冰冷交互，帮助用户和产品建立友好的联系。在设计新手引导时，不妨加入拟人化的形象、深入人心的文案以及模拟现实世界的事物/事务，做一个有温度的产品，更能拉近与用户之间的距离。2. 强化利益点、建立目标对于活动促销类新手引导，在用户操作之前可告知操作后能得到什么、不操作会有什么损失，不乏使用一些如利益引诱、中断警告、视觉氛围等常规设计手段让用户有明确的使用目标，便于推动用户做出正向的决策。操作之后着重突出利益点刺激用户，给用户留下深刻的印象或让其期待下次的到来。3. 多个功能分层引导遵循一次只做一件事的原则，多个功能需按不同的优先级、跟随用户的操作依次呈现。还需要在每个层级都提供“跳过”入口，新手引导是为满足用户需求所提供的帮助，而不是强制用户使用。4. 复杂功能分时间段引导较为复杂的功能可将信息进行拆分，根据其重要程度按不同的时间历程分别开放，避免用户一次性接受过多的信息量，也能降低单次学习成本，提高吸收效率。例如：VIP 功能，每个等级都可能会单独开放新的服务、权限，系统应该在用户每次升级后、把新的服务及时引导反馈，切不可在首次开通 VIP 时就一股脑的把所有增值服务都告知用户，没那耐心去记、也记不住。如有必要，可把不能使用的功能放出来置灰显示或提供操作限制等。5. 多样化的视觉样式不同的新手引导，可设计出不同的视觉样式，避免相同的样式让用户形成“惯性思维”误以为已经看过，不加思索的跳过而让新手引导成为累赘。四、常见问题及处理方式1. “跳过”弱化处理在 UI 界面中，只要不是用户主动寻求帮助而弹出的信息，就会条件反射地去寻找关闭按钮，直至内容消失。虽然很多新手引导都有提供“跳过”操作，这无可厚非，但是不要设计的过于明显，太过抢眼的“跳过”按钮很容易激起用户的条件反射，不管有无帮助、看见就点，这也就失去了新手引导的初衷。适度弱化“跳过”操作入口，用户即便想要关闭，但在寻找操作的过程中，也许会被有趣的、有帮助的信息所干扰，或可持续浏览。2. 使用浅色遮罩很多时候，为了让用户按顺序走完新手引导，会在气泡后面添加一层遮罩，其不管是箭头指示还是镂空透底，遮罩的颜色（纯黑不透明度）最好使用浅色，需要用户在吸收新手指引内容的同时、还能看到界面整体的结构样式，在新手引导结束后对操作路径有一定的印象，太深的遮罩不利于用户整体学习。3. 最易理解的表达方式引导文案必须言简意赅，需要以最能吸引用户注意、容易理解的表达方式有效的突出重点。切忌长篇大论，过多的文本内容，用户容易忘记或出现记忆偏差，而且也没那个耐心去看。如果内容无法精简的更短，可以考虑使用图片/插图代替部分文字，以图文结合的方式体现，还可以用分段显示的方式跟用户进行互动，边用边学。4. 内容较多要显示进度在设计新手引导时，不管内容有多么精彩，都不要想着一次给用户灌输过多信息。用户初次使用产品，只需给予必要的功能及适当的帮助，多个引导的数量通常控制在 3~5 条即可。还需要让用户实时知道当前进度，避免用户无法掌控内容量而产生焦虑感，如果被直接跳过就无法发挥出新手引导的作用。5. 用户要有选择权新手引导主要是为了帮助用户快速上手，虽然最终的目标是为提升转化，但不要意想天开的在新手引导中仅放置一个“去转化”快捷入口。没有关闭操作、强制用户进入转化流程的做法，除了极少少数的必用情况外，大概率会被用户直接结束进程，既然无法关闭那就卸载吧！不管内容有多么重要、有多么想提升收益，都不可强制用户，我们可以利用设计手段去吸引用户操作，但依然要提供后退的入口，就算不是多么的明显也行，用户应该要有自主选择的权利。6. 趣味化的内容用户在使用新手引导学习的过程中，本身是枯燥的，设计师可以根据产品的调性设计出趣味化的字体、插画，还能配合动画设计给用户带来趣味化的使用体验。五、结语本文从基础认识、样式分类、设计技巧及常见问题处理四个方面介绍了新手引导在 UI 设计中的实践，虽然它只是很小的一个环节、且不是所有的应用（如购物类、社交类、新闻类）都需要新手引导，可一旦涉及就显得尤为重要。新手引导设计的是否合理易用，直接关系着用户的使用体验及产品转化，如果你的新手引导只是摆设、甚至成为累赘，还不如去掉。新手引导设计需根据产品自身特性结合业务场景，在合适的时机、以最合理的方式呈现给用户，引导用户快速熟悉产品、并使用产品。笔者希望通过本文内容，让初中级设计师对新手引导有一个系统化的认识，在日后的设计中，能结合实际应用场景给出最合适的方案，为用户提供实际的帮助、为产品提升价值。欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/user-guidance
模型 信息 工具 大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 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
视觉 产品 用户 C 端的产品更加注重运营策略和展现形式，不仅要考虑视觉侧的氛围与效果，还要顾及商业运营中如何更高效的提升转化率和变现的根本策略；而 B 端产品重点在于提升用户效率的体验目标，因此 B 端产品的设计策略显得更加纯粹。本篇文章通过 B 端和 C 端产品存在交集的案例，分享其中的细节与优势。相关干货：用C端的方法，从3个方面提升B端产品的用户体验！在如今用户为王的时代，用户体验成为一种新的品牌竞争力。阅读文章 > 一、B 端和 C 端的差异化无论是在用户群体、产品定位还是使用场景等方面，B 端和 C 的产品都存在着较多的明显差异，但其实究其本质它们的设计理念是趋同的，目的都是降本增效。不过 C 端的产品更加注重运营策略、更加注重视觉展现形式，所以不仅要考虑视觉侧的氛围与效果，还要顾及商业运营的目标及策略，以及如何更高效的提升转化率和变现的根本目的。而 B 端产品逻辑较强，使用过程需清晰易懂，重点在于提升用户效率，这本身就是体验目标之一，因此 B 端产品的设计策略显得更加纯粹。可以简单理解为 C 端产品：视觉层面 效率体验；而B端产品：效率体验 视觉层面。总结来说两者之间有3点根本差异：内容的差异化、交互形式的差异化、展现形式的差异化。但有的时候 B 端和 C 端产品是存在一定交集的，比如「京象-配送时间同步互通」的整体项目过程就是在 B 端的产品中加入 C 端运营活动，以此作为案例分享，将从项目背景、视觉创意、总结与心得三个方面作为发力点来进行展开叙述。二、项目背景概述1. 背景介绍① 京象是什么京象是一款配送员配送大件快递时使用的 app，在师傅配送过程中扫描运单、联系客户、上门安装等服务。② 用户画像三方司机兼配送员师傅、不属于京东自营小哥，目前京象用户量为 20,000 人左右，随着整体产品体量增大用户量与日俱增。③ 项目背景配送员只配送无法进行安装服务，需厂家安装。整体项目可以理解为在原有“送装一体”的场景基础上，新增“配送时间同步”场景。“送装一体”指的是既配送又安装，配送时间同步的全称为“配送时间同步安装时间”。简单说就是因为根据配送不同的商品决定师傅具备不同安装能力，所以有些安装简单的可以提供安装服务，安装复杂的则无法提供安装服务。比如，配送电视的时候也可以给客户提供安装服务，但配送空调时由于没有安装资质导致无法提供安装服务，所以配送员妥投后会与厂家服务的师傅进行交接，师傅配送的时间与厂商的安装师傅的上门安装时间进行信息同步。④ 存在问题目前物流送货与安装服务两条链路信息并不互通，三方的配送员送装同步率极低，影响用户体验；送装同步率仅 3.8%，送装同日率仅 20.2%⑤ 解决方案现需共同搭建一个信息共享渠道，互通信息，提高送装同步率，提升用户体验。 因此用佣金奖励的形式激励配送员师傅按时填写时间并妥投，如果配送妥投时间和上门安装时间有效同步，则师傅会得到 10%的相应额外佣金提成。2. 核心目标整体流程物流与 3CS（3C Sevice：3C 产品服务管理）打通，对于需要做送装互通的订单在京象打标，支持配送员点击订单，跳转到京工巧匠，配送员在京工巧匠录入预计配送时间，准时妥投的订单，3CS 通过京工巧匠给配送发放佣金，共建“配送时间同步奖励活动”的整体氛围，带给用户全方位的流程与视觉体验，助力整体业务发展，促进产品商业转化。3. 落地方案在目前 B 端的京象 app 产品中增加 C 端运营活动。其中页面部分可以分为两部分：第一部分为进入首页面时，新增配送时间同步的卡片。此单类型可以引导师傅赚取佣金，其中含有首页、运营类浮窗以及 banner 资源位；第二部分为点击资源位的详情后的 H5 指引页面，目的是帮助师傅清晰易懂的了解活动的内容与细则。三、视觉创意1. 创意过程① 方案流程图分为 UI 部分和 H5 部分，通过 H5 的运营活动确定主题氛围，再反推至 UI 设计当中进行视觉的调性统一，最后输出的 UI 界面再回归于 H5 详情说明。② 关键词提取提取出三组关键词，分别为：热情、潮流、激励。热情：活动要充满热情的视觉感受，让人意识到到温暖、热闹的主题。潮流：通过繁华与多彩迸发出强大的视觉感染力。激励：佣金作为奖励机制，以此为利益点促活与转化用户。③ 情绪版分析情绪版制定风格为：三维化、拟物风和缤纷的色彩。2. 设计细节展示① H5 主 kv 细节前期先手绘出草稿，再到整体建模，通过白膜与 HDR 环境加上打光处理，最后渲染出整体效果，最终再进行相应的后期处理。② 视觉氛围细节场景输出-佣金领取：通过视角、色彩、材质、构成四个方面建立整体的视觉氛围。视角：采用 3D 广角展示运营活动主题。色彩：红、橙、金、紫。材质：基础材质为主题，加上少量金属材质提升细节质感，全局 45 度打光并统一 HDR。构成：以储蓄罐为主体，向外散发红包和金币，并加入如同时光机器一样的装饰外围，以此形成主视觉营销元素烘托氛围。③ UI 界面功能细节衍生出 UI 的界面样式，营造出交互流程和视觉的功能性模块。核心功能：引导派送员点击配送时间的填写项，并告知改活动可获取佣金的中心内容。四、总结与心得1. 个人总结本次运营页面使用 blender 建模、ps 后期来提供主 kv 的方案。由于时间的仓促，对于 H5 内容的利益点和文案细则先输出一版 demo 给到产品，最终由产品敲定文案。整体风格偏运营、营造一种参与活动赢的高额佣金的氛围。最终的交互流程和视觉界面设计也针对该项目的具体使用场景进行细分，最终输出一版均高度认可的方案。在该项目中属于 B 端产品，如果视觉不够突出会影响整体活动的点击率；如果视觉过于突出，比如如果从首页到详情的所有入口都营造的非常强烈，也会造成视觉干扰，影响其功能性的操作。所以与刚开始提到的依据 B 端与 C 端的本质化差异，在 B 端产品上加入 C 端运营活动，那么尽可能的让：效率体验视觉层面。这样才能在促活运营的同时，减轻功能操作流程上的负担，权衡当中的用户体验设计。2.个人心得好的设计不能仅凭设计师的直觉，优秀的体验要靠数据说活，所以本次修改点也好、利益点也罢，还是不断的去和产品进行沟通，上线的时候通过数据埋点和用户反馈以及后期调研来判定本次的流程和视觉样式是否合理，是否符合用户体验。最终的目的也是和大家分享项目当中的细节和亮点，希望通过不断沟通、突破自己、进步与成长。欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/c-to-b
线条 文字 粗细 在做版式设计的时候，我们经常会用到一种元素来辅助排版——线，“线”具有区隔内容、强调信息、平衡版面、指引、组合、连接、装饰等诸多功能，能有效解决很多版式问题，但“线”的使用并没有表面上看起来那么简单，很多设计新人在用“线”排版时会出现：冗余、死板、不平衡、不美观等问题，所以，葱爷今天就来讲讲，在使用“线”进行排版时需要注意哪些细节。平面干货：平面设计高手教程！全方位解锁「点线面」的运用方法（附实操案例）本文从点线面的定义、作用、设计方法帮你全方位科普点线面在版式设计中的运用，附上实操案例，基础差的平面设计师，这篇别错过了！阅读文章 > 一、线的种类常用于版式设计的“线”有 6 种：1. 长直线线条的长短没有一个明确的界定标准，我自己评估了一下，在中文版面里，线条如果长于 10 个正文的字符宽度，大概就可以称之为长线，否则就是短线。另外，长线用于区隔内容时，其长度一般是大于或等于内容的长度。2. 短直线短线用于区隔信息时，线条会比“文字行”短，短线还常用于组合信息，作用类似于大括号。上图的红色短线就是起到了组合信息的作用。3. 斜直线斜线的主要用于切割文字和图片、规范文字排版、填充空白等，比水平和垂直的线条更具动感。4. 折线折线常用于信息指引，比如产品的功能示意图、信息图表等，另外，用于区隔信息效果也不错。5. 曲线比如波浪线、弧线、或者螺旋线等等，曲线比直线更加柔和、活泼，常用于儿童、女性、或手写体为主的设计中。6. 虚线虚线具有低调、优雅、可爱的特性，常用在正文排版中用于区隔信息。二、线的粗细不同粗细的线条其效果和气质会有明显差异，所以需要根据具体的需求来设置线条的描边参数。细线条比较秀气和精致，如果版面的调性要求高端和优雅，所作用的文字“字重”以regular或light为主，那么细线会更加合适。线条的粗细值通常和其中小号字的较细笔画（衬线体参考横笔划）的粗细差不多。粗线条相对粗犷而显目，如果版面中主要文字的“字重”是medium或bold为主的无衬线体，那么使用粗线条比较合适。如果线条所作用的文字字号只有一种，线条的粗细值通常会比文字笔画略细一点点。而如果所作用文字的字号不只一种，线条的粗细值通常是介于大号文字与小号文字的笔画粗细之间。如果版面中的线条比较多，功能也不一样，那么最好区分一下线条的粗细，以使版面更加精致、层级更加清晰。比如在上图的报纸排版中，区隔报头与目录之间的线条是最粗的，甚至还用了两根线条；目录之间的线条，以及区隔目录与版位的线条要相对细一些；而版位里不同信息板块之间的分隔线是最细的；用于区隔导读和正文的线条又是比较粗的。另外，如果线条的目的是为了强调众多文字中的某些句词，通常也会使用较粗的线条。三、线的长短长线和短线的有些功能是一的，比如区隔内容，那到底什么时候要用长线，什么时候要用短线呢？主要依据是其所作用的内容的长短，通常来说，作用的内容比较长，那么用长线效果比较好；内容不一定只是文字，也可能是文字加图片,甚至是纯图片。如果所对应的内容比较短，则用短线效果会更好，短线的长度通常在所作用文字中“长句”的 1/3-1/5 之间。四、线的位置长线的起点和终点通常要与对应的图文两端对齐，或一端对齐、一端做出血处理，如果同类型的文字段落有长有短,则以最长的为准。短线则要与所对应文字的对齐方式统一，比如统一左对齐、右对齐、居中对齐。如果线条的作用是强调某些词句，那么其与文字的间隔会比较小，大概是线条粗细的1-2倍，甚至会与文字交叉；如果线条的作用是将不同组别的信息区别开，那么线条与文字的距离通常是大于等于 1 行文字的高度（横向区分），或者是大于等于 1 个字符的宽度（竖向区分）；文字越少、空间越大，间隔也相应要更大。五、线的呼应关系在文字相对较多的版面里，我们好少看到只有一根线条的情况，因为有几条重复出现的线时，才能形成呼应，以及版面的统一性、平横性和节奏感；而版面中出现不同的线是为了呼应内容本身的结构，也是为了加强版面的对比关系。图三比图一和图二更加平衡、更加精致。六、打破线的束缚如果你希望版式的调性更加灵活和时尚，可以在图文与线之间适当做一些错位、叠加或者交叉的效果，就会有一种打破束缚的感觉。以上葱爷分享了版式设计中“线”的使用技巧和注意事项，当然，这些所谓的方法也觉得不是标准，设计是不存在标准的，所谓的经验和技巧只是能帮助经验不足的设计师可以更快做对、做好，如果你够强，所有的经验都可以打破。关于排版中的其他细节，我们后面慢慢聊。本篇来源：优设网原文地址：https://www.uisdc.com/line-design
游戏 用户 游戏中心 一、改版背景QQ 游戏中心是手 Q 用户触达游戏的重要场景，每天有海量用户来此进行游戏相关的互动操作，随着产品的功能迭代，体验的逐步更新，用户对 QQ 游戏中心也有着更多更强的诉求。在 2022 年的研究报告《游戏中心核心价值及机会点定性研究》中发现用户在游戏中心内最为关心的是领取福利，通过在游戏中心获得游戏相关的礼品道具帮助提升游戏体验。同时用户对游戏有着较强的社交感、成就感、沉浸感诉求。随着产品目标的调整，游戏中心的功能也逐渐丰富化，除开领福利和找游戏，用户可以在此消费游戏内容、购买游戏道具、以及使用游戏相关功能等，用户触达游戏的方式变得更加多元，用户的粘黏性也进一步提升，产品依势也需要打造更好的产品游戏氛围感和品牌印象来建立用户口碑、提升转化。同时，以“生机”为设计理念的 QQ，也进行了体验上的版本迭代，游戏中心作为 QQ 内的重要业务，也将跟随紧随其后完成体验的更迭，提升用户体验、延续 QQ 品牌基因。往期改版案例：大厂如何从零开始做设计？QQ音乐超级订阅全链路设计复盘编者按：本文QQ音乐设计师完整复盘了QQ 音乐「超级订阅」平台的构建流程和思考过程，想学习大厂思维的你，这篇千万别错过。阅读文章 > 二、制定设计策略对用户、产品、设计的诉求进行整合后，梳理出本次改版的基本设计思路——在提升产品用户体验的基础上，以品牌符号强化产品的记忆点，一方面从产品体验上给用户带来更顺畅体验，同时以品牌图形强化游戏感和沉浸感，提升用户心中的品牌印象。优化基础体验：跟随手Q“生机”设计理念和界面风格，统一UI界面样式 ；重构内容消费的信息容器，提升内容消费效率；提升设计效率，以及打造更高效团队合作方式。打造品牌记忆点：通过品牌基因的植入、游戏氛围感的增强，让产品更具辨识度，同时加强产品的游戏属性，强化用户的沉浸感。游戏中心改版总览图三、解决问题1. 基础体验优化游戏中心本次改版在体验上的优化聚焦在 3 方面：① 焕新界面随着产品功能的扩充和迭代，游戏中心的界面风格开始趋于参差，同时伴随QQ设计规范——Q语言的更新，游戏中心的首要任务即完成界面风格的统一。统一风格以往的游戏中心，采用更为丰富多彩的设计语言，导致从手 Q 进到游戏中心较为强烈的割裂感。而本次改版中延续手 Q 的简约透气的风格表现，通过色彩样式、组件、圆角等设计要素将界面进行规范统一，保证体验的一致性。求同存异在首页、游戏、攻略这 3 个场景，界面的风格向手 Q 设计语言靠拢，色调以手 Q 蓝为主，以相对简洁的界面风格保证内容传递的高效性。同时根据业务诉求，也保持了游戏中心自有特色——在福利和商城tab两个主场景下强化游戏氛围感：采用3D图形和多彩图标、界面主色调使用情绪更高的橙黄色，让整体感知更符合产品的特质。除开界面风格，图标的设计也融入了游戏中心的特色——保持基础型与手Q图标一致外，同时将一些图标通过游戏化语义表达出来，使其更具趣味性和游戏感。② 重构容器优化内容消费体验内容卡片结构化游戏中心的消费内容来源丰富，包含问答站、小世界、频道等多处内容源，给用户带来海量内容的同时，也导致了信息容器的冗杂，增加用户的认知负担、降低浏览效率。在前期和产品的梳理中，发现游戏中心的 feed 类型可以分为 4 大类，总计有 21 种样式。为解决用户的浏览体验问题，对 feeds 结构进行了结构化整理，以流式布局将所有样式整合为 6 个部分，基于不同消费内容去排列组合 feed 类型，简化产品逻辑，同时用户更聚焦内容阅读。提升游戏分发效率游戏 tab 作为游戏分发的主要场景，改版前主要以横向列表容器去承载游戏信息，用户探索新游的效率较低，同时雷同化的结构，容易浏览疲劳。针对以上情况，在页面设计上丰富了承载容器的样式，采用高效率的游戏图标排列或者游戏合集卡片，提高了浏览效率，也让用户更容易命中自己钟爱的游戏类型，不同的容器类型组合也让整个浏览更有节奏，减少疲劳感。③提升设计效率游戏中心在以往产品功能的快速迭代中，由于规范和组件的不完善以及和开发同学协作模式的不确定性，让产品界面的实现往往不尽满意，无论是开发效率还是还原程度都受到一定的影响，最终导致用户体验的不完满，所以本次的改版，提升设计的效率也是体验提升的重要一环统一设计规范界面的基础样式和控件，和手 Q 基本规范保持一致，包括颜色、图标风格、基础控件、圆角、栅格等。同时基于业务的诉求，我们在手 Q 基础上拉出一条规范支线用于游戏中心的设计——主要在基础色、图标等拓展了更多样式。提升协作效率以往黑夜模式的适配，开发和设计需要同时输出和还原两次设计稿，导致适配成本较高。在本次改版中，将新风格页面的组件 token 化，搭建起设计和开发之间界面样式的映射关系，开发和设计只需还原一次设计稿，即可完成黑夜模式的适配，达到高效设计、快速上线迭代目的。黑夜模式的上线，也提升了游戏中心的浏览感受，让用户的体验更友好、更亲近用户，回归 Q 语言亲和自然的设计原则。2. 打造品牌记忆点① 打造品牌记忆符号QQ围绕社交有效性、社交广度与深度、社交动力等维度，打造一个积极向上充满生命力的社交生态体系。生机的理念承载乐观活力与积极延续，具备有序和精致的特点，也象征万物发展所蕴含的生命力。——Q语言-设计理念在游戏的世界观中，“能量”经常作为源动力元素以推动游戏进展，QQ游戏中心承接Q语言“生机”的设计理念，提炼衍生“能量”概念，以能量元素将生机理念具像化，赋予产品积极快乐充满活力的品牌感知。在确定能量作为核心关键词后，对此发进行情绪版关键词的发散，结合前文提到各方诉求，最终把关键词锁定到能量、游戏感、氛围上。② 品牌基因拓展在对关键词的发散阶段，讨论和尝试了多种能将“能量”概念视觉化的元素，考虑到UI界面的延展性和可用性，最终把可视化元素锁定在宝石和光上——宝石造型上相对简单，光在动画塑造上能拥有多样丰富的表现形式。为契合概念的设定和后续的延展，我们把宝石定义为能量石。在能量石的设计上，特意营造出能量充盈、光感琉璃的视觉感受，造型上采用多面切割结构，色彩上兼容蓝色和黄色两种色调，以匹配游戏中心的整体界面风格。除开主体图形，也从其他设计维度去落地能量的设计理念：图形能量之石除开前面的基础宝石，也设计了多种能量石的造型，并兼容磨砂质感，以应对不同场景使用。在 UI 界面的运用在产品的核心界面上，将能量石作为背景图案使用，强化品牌和氛围感；和业务也进行结合——以能量石将商城的幸运值图形化，让品牌和功能直接连接起来；把能量石材质和游戏元素进行结合——王者皮肤墙功能内，将游戏LOGO赋予能量石材质，让游戏和平台品牌之间产生品牌上的关联。能量之石图形在界面内的运用与 3D 图形的结合宝箱是游戏中心一个重要道具，每日有大量活跃用户来游戏中心做任务开宝箱，开宝箱成为了产品触达用户的高频场景。因此对宝箱进行了设计，希望在高触发场景加强用户的品牌感知，强化游戏感。宝箱在造型上采用了和宝石一样的切割造型，同时宝箱上加入了能量石，把 3D 图形和能量石进行结合。除开宝箱外，对业务内常用的图标进行了 3D 化处理。3D 图形在界面内的运用动效在动效的设计上，也承接能量的设计理念，以光为设计灵感，设计了游戏感强烈，电光火石般的的动画效果——能量光，用于界面内UI界面和3D图形动画，强化整个产品的游戏氛围感。动效在界面中的运用颜色在界面颜色的使用上，主界面延续手 Q 的标准蓝色调，包括控件、字色也与手 Q 统一，保证界面整体色调的延续性。同时基于业务诉求，拓展了情绪感知更强烈的“游戏橙”。对于以内容体验为主的页面——比如游戏中心的首页、游戏发现页、攻略页，使用手Q的标准蓝；在需要强氛围和游戏感的页面——游戏福利页和游戏商城页，采用游戏橙。质感由于游戏中心内多处用到的 3D 元素，对 3D 的质感进行了规范统一。材质考虑到 UI 界面的通用性，避免 3D 材质的喧宾夺主，材质风格以简单通用为主，颜色以界面主色调为基础，漫射材质多营造轻黏土的通用质感；针对能量石的材质，则采用光感通透的玻璃材质。灯光灯光采用基本的三点布光，旨在表现物体的质感、立体感和空间透视感。整体布光氛围积极，友好，明朗，透传 QQ 活力生动的品牌气质。字体游戏平台内，有着较多需要运营设计的场景，字体是信息展示的重要元素，选择了造型感较强造字工房的逼格青春字体，作为界面内的强调字体，更好的营造游戏氛围感。字体在运营活动和 UI 界面中的运用四、总结QQ 游戏中心作为 QQ 用户触达游戏的重要途径，用户们在体验链路上有着各式各样的诉求。产品功能的多元化也让用户体验必须追随功能持续迭代。拥有几亿用户的 QQ，各类产品的统一优质体验，也是“一切以用户为中心”原则的必要体现。设计作为距离用户最近的一方，在平衡各方诉求后呈现给用户一个全新的游戏氛围感十足的产品，是本次改版的终极愿望。希望能量满满、生机焕发的 QQ 游戏中心改版能给大家带来一些启发。欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/qq-game-center-design
热点 内容 数据 大家好，这里是和你们聊设计的花生~现在很多设计师都选择在抖音等短视频平台上发布作品，打造个人品牌以实现流量变现，但不少有这种想法的设计师对创作什么内容、如何引流不太了解。今天就为大家推荐一款抖音官方出品的创作者工具「抖音热点宝」，它能帮助我们学会如何洞察热点趋势、优化创作内容、参与热门话题并获取官方流量扶持，是新手短视频创作者必备的神器。免费好用！自媒体时代设计师必备的5款Gif制作工具大家好，我是和你们聊设计的花生 ~身处自媒体时代，我们每个设计师都可以作为内容创作者在微博、小红书、知乎、朋友圈这些地方分享自己的经验和想法，而无论是写设计教程，还是制作表情包，Gif 动图都是一种极佳的信息传递媒介，它比静态图片更详细生动的展示步骤和细节，也比视频更轻便直观，因此应阅读文章 > 抖音热点宝网页端地址：https://douhot.douyin.com/手机端入口：进入抖音 - 点击右上角的搜索 - 输入“抖音热点宝”获取入口抖音热点宝是抖音官方推出的创作者工具。它汇集抖音每日3000+热点，支持热点分析、热点预测、数据观测、官方活动日历查询等功能，帮助创作者更直观全面的了解热点趋势。下面以手机端为例，为大家分享如何利用热点宝帮我们创作热门内容以及迅速吸引流量。在抖音手机客户端搜索“抖音热点宝”就会显示入口，点击banner进入热点宝的界面了。热点宝功能分区有三个：热点、观测和活动。「热点」展示的是分钟级别的上升热点榜单，可按类别和城市筛选，更快速定位优质的热点内容；「观测」展示的是分区的头部账号，我们可以选择监控其中一些账号或者作品的数据，作为自己优化内容的参考；「活动」展示的是官方活动日历，可以帮助创作者提前规划创作内容，并获取官方流量扶持。1）热点功能热点区内包含视频、图文、音乐、搜索、全站热点等分类，可以精准了解不同分区的用户都在关注哪些内容。点击标签进入对应的话题发表内容，对这个话题感兴趣的用户就能收到本条内容的推送和曝光，从而获取流量。如果想做平面设计方面的内容，可以先点开“话题榜”搜索平面设计，然后在“话题总榜”处将选项更换为“热度飙升话题榜”，时间选按自己的需要选“近3天”或“近7天”。设置好这些选项后，我们就能得到目前站内关注度最高的有关平面设计的话题排行。进入其中的话题可以看到话题的热度趋势、播放量趋势、点赞量趋势、作者画像和用户画像这些内容。点击“话题详情”可以参与发帖，这样制作的内容也能被精准推送给对平面设计感兴趣的用户，从而实现曝光和吸粉。2）观测功能“观测”功能非常适合刚开始做短视频内容的设计师。学会一项技能最好的方式就是先模仿，如果你现在对该创作什么内容、写什么样文案、以什么形式展现还比较迷茫，那就先找一些你觉得在设计领域做的比较好的账号，把它们作为学习的对象，分析这些账号的选题、文案、更新频率、时长、点赞收藏数据等方面的信息，作为自己创作内容的参考。抖音热点宝的“观测”功能通过一下几点协助我们做好数据分析工作：1. 观测指定账号数据。在搜索栏内输入你想观测的账号，可以看到该账号的点赞、涨粉、评论、分享、更新等数据信息，其作品的数据分析（如点赞最多或涨粉最多的作品），还有该账号粉丝画像和粉丝数据。2. 观测指定视频数据。如果你在刷抖音的时候看到一条很好的内容，可以通过分享功能复制其链接，然后复制到热点宝“ 观测-他人作品 ”中，就能获取该作品全部数据。3. 观测自己的作品。使用这个功能可以帮我们准确优化自己创作的内容，如果一个作品你花费了比较多的心思或者进行了新的尝试，可以将其置入观测中，实时关注数据变化。如果没有达到预想中的数据，就需要思考一下是哪方面的问题以及该如何调整优化了。3）活动功能“活动”内有抖音的官方活动日历，会在展示未来30天内的官方举办的主题活动，参与这些活动会有官方的流量扶持，对于刚入门的创作者来说是一个不错的引流方式。因为可以看到未来活动安排，有比较充足的时间准备内容，对新手非常友好。点击进入活动详情页后，“活动介绍”内会有关于投稿时间和内容形式的详细介绍，大家根据要求进行创作投稿即可。抖音热点宝的网页版与手机移动端的功能相同，而且多了"热点广场"功能，在里面可以看到实时的热点榜单和热词趋势。用网页端看榜单趋势及分析数据的体验比手机端更好，大家可以根据自己的实际情况结合使用。以上就是今天和大家分享的短视频内容创作神器「抖音热点宝」。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~「抖音热点宝」网页端地址：https://douhot.douyin.com/「抖音热点宝」手机端入口：进入抖音 - 点击右上角的搜索 - 输入“抖音热点宝”获取入口推荐阅读：清华出品！AI 神器 WantQuotes 让你的文案立马变高级大家好，我是和你聊设计的花生~前两天刚盘点完一波人工智能在图像生成方面的超强工具，又在微博上看到了清华大学推出的一款“据意查句”的 AI 工具，可以按照你想要的意思快速查找出相关的名言、诗句、俗语等 。阅读文章 > 写文案没灵感？这8款文案网站免费用！编者按：本文为大家收集了 8 款好用的文案网站神器，包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网，让你写文案手到擒来。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/douhot-douyin
时间 事情 工作 Hey 你今天过得好吗?我是小确幸发现安开开，虽然生活中困难重重，但还是得想办法好好过生活呀今天的小确幸，来自于几个亲测有效的时间提效方法，帮大家更从容地应对工作压力，以便多留出些时间，好好照顾自己。更多效率工具：这5款工具，让设计师工作效率提升 200%！（十一）大家好，这里是和你们聊设计的花生~ 最近又收集了好多超实用的效率工具，分享给大家，本期推荐的 5 个神器分别是： 打开即用！阅读文章 > 一、没时间，我没时间！我之前的状态是经常忙到飞起，有时好多事儿一并行做就乱，而且总被打断。但奇怪的是，下班后回想一天都干了些啥？却又想不起来，只觉得还有好多活儿没干完。第二天又陷入了和昨天重复的忙碌状态。后来我发现，抛开“目标动力”谈时间管理的，都是耍流氓！目标动力才是做成事的“道”，时间管理只是实现目的的“术”。这个“道”只能自己找。只有足够上头，才能足够有效。比如“为了晚上飞长白山滑雪，我要在 6 点前完成工作！”但“术”是通用的，可以借鉴和学习。今天就分享我亲测好用的提效方法，以解决 2 个几乎所有人都遇到的难题：时间不够，咋办？总被打断，咋办？运用熟练，每天能省出 2-3 小时呐！干点啥不香！二、“乾坤挪移”法，专治时间不够乾坤挪移法：首先总结自己一天的精力曲线变化，然后将事情按所需精力高低分类，再按精力曲线重新匹配事情顺序，好让每一分钟时间都发挥它最大的价值。具体分为 3 个基本方法，和 2 个进阶方法。1. 将时间按效率高低分类先观察自身状态，记录下一天中什么时间段最精神、一般、或困顿。然后将时间分成高效、一般、低效 三类。比如，我自己记录的一天时间情况如下：2. 将事情按所需精力分类同理，也将事情按 复杂、一般、简单，分为 3 类：复杂事情：需要完整时间，高强度思考的事，比如“思考复杂方案”，就需要放到高效时间内重点完成；一般事情：思考强度一般，比如“简单需求画图”、“常规事务性会议”，适合放到精力一般的时间段；简单事情：比如“写周报”，只需要碎片化时间，不占用思考内存的事情。3. 让对的事，遇到对的时间然后，将分好类的事情，乾坤挪移，调整顺序。例如： 将“复杂事情”放到“高效时间”内，将“简单事情”，放到“低效时间”内。举例，你是一个上午高效的人。但你之前的工作状态都是白天处理杂事，只留出晚上特别疲惫的时间干活儿，效率必然低下。意识到这一点后，如果第二天和 PM 对需求，10 点-18 点对方都能接受，那我即使上午有空，也会安排在 17-18 点。因为我上午时间宝贵，精力充沛，我需要用上午的时间做复杂的事情。以上是 3 个基本方法，如果你还想节省更多时间，那可以试试一下 2 个进阶方法~！4. 进阶叠加法 1：一段时间，同时做多件事开车熟练的人，可以一边聊天一边听歌。同理，对于简单熟练的工作，同样可以叠加在同一个时间内做完。举个例子，如果一下午需要做的事情有：2h 简单会议（不需要高度参与，内容常规，听就行）15m 写周报15m 搜集优秀设计素材1h 完成简单需求出图正常排，需要 3.5h，但其实，2、3、4 完全可以叠加在开会中，同时进行，边听边做 2h 开完会，同时就能把所有工作完成。瞬间节省 1.5h~！同理，上下班路上我会一边骑车，一边听书，到了工位快速用 20 分钟记下路上刚听的要点，也是通过叠加法，挤出自学的时间。5. 进阶叠加法 2：一段时间，产生多份成果接到一项工作之前，多向前想一步，看看手头这件事能不能同时应用于多种场合。举个例子，接手一个复杂需求，在分析和出图的过程中，就把过程中遇到的困难&应对方法，随时记录到一个复盘文档中；同时也尽量按项目汇报的标准去输出内容。这样一来，同样是完成一个需求的时间，别人可能仅仅完成了一个需求，而你在一段时间内，同时产生了 3 份成果：完成 100%需求完成 90%复盘文档完成 80%项目汇报接下来只需收尾整理，就可以完成以上 3 项工作啦。三、“无中生有”法，专治总被打断无中生有法：从时间、空间、人等，各个角度寻找解决办法，尽可能多地制造专注的场景，以及寻找被打断后有助于快速恢复的事件。1. 主动创造更多专注场景分为时间和空间、人三个方面。① 时间同样一件事情，如果一小时能专注做完，但如果中途被打断一两次，可能就得花 2 小时才能做完。若真的有需要高度专注思考，不想被打断的的事情，而工作中实在又避免不了被打断，那就只能无中生有，创造不被打断的时间。比如我会时常会在 9:30-10:30 和 13:00-14:00 这两个多数人都在休息的时间段，安排高强度思考工作。② 空间我属于高敏感型人格，对听觉、嗅觉、触觉等信息，都极其敏感，所以在办公室周围如果有人开会、讲话，我都会不自觉听到，分散精力。如果你和我一样，那有效的方法就是营造一个专注的物理空间，如：戴上降噪耳机，或者直接约个没人的会议室，高效专注地把事情做完。小提示：如果白天自己安排了重要的工作，可以将自己的日程提前占上，以避免别人突然占用你的重要时间，拉你去开会。③ 人并不是所有的被打断都是无法控制的，可以从中跳出一些能控制的“打断”，将其集中安排在一起，以减少一天中，被打断总次数。举个例子：一般组外的打断是不可控的，但组内的打断，多数是可以商量的。如果不主动控制，我可能从早到晚都要时不时中断手头工作，去帮其他同学审稿，或解答校招同学的问题。但是我可以主动和同学们商量，比如约定：审稿、问题解答，如果不着急，可以集中在下午 16-18 点沟通，如果着急就随时沟通。这样就能最大限度地在高效工作时，减少被打断的次数啦。小提示：如果实在实在工作紧张，就直接退出工作聊天App，定个闹铃，每半小时看一下消息，可以最简单粗暴地减少被打断的次数。2. 利用“TURN ON 事件”，快速进入状态如果被打断不可避免，再回到手头的事情就非常困难，那如何快速重新进入状态呢？我个人经验，有些事情，是能帮助自己更快速进入专注状态的，我将这些称为“TURN ON 事件”：一做这些事，就像打开一个开关，能帮我从懒散的状态，迅速切换到专注状态。这需要自己摸索，我目前找到的 2 个“TURN ON 事件”，是打字，和 2 倍速听书。① 打字我有时切换状态后，会先打字记一会儿读书笔记。就是将一些图片版 PDF 书籍的划线部分，打字整理成文字版的读书笔记。手指飞速敲击键盘的动作，能极大地帮助我快速进入到心流状态，迅速专注起来。附加好处，就是让我对记录内容的思考、印象更深刻，比直接用 OCR 识别理解更到位。② 2倍速听书有时开完一个 3 小时的会，脑子昏昏沉沉的，回到工位只想发呆。这时，如果开启“2 倍速听书”，同时打字记下重点内容，就会借着快语速，马上进入专注状态——因为如果不集中精力会跟不上哒~！不信的小伙伴可以感受一下边听边记的酸爽：如果发呆，20 分钟过去就过去了；2 倍速听书，20 分钟不仅能加速专注，还能推动自己多看点书，简直完美~！四、高阶方法还有 2 个方法，通用且有效，但就是很难坚持，强烈推荐进阶玩家试试哦。1. 记录时间花销详细记录下每件事情所花时间的方法，源于著名时间管理书籍《奇特的一生》，作者柳比歇夫通过每天精确的时间记录，创作出 70 多部领域广泛的学术著作，高效得惊人。我尝试过记录时间，非常明显的好处是：记录时间能有效纠正我对时间花销的感知。比如我以为写一篇小文，本以为 4 小时就能搞定；但最后统计，我总共花了将近 13 小时，前后 2 天才能完成。意识到“写文不易”的事实后，下次我预估时间就会更加准确。2. 玩儿“和自己赛跑”的游戏工作中经常有那种觉得很无聊，但却不得不做的工作。开始我怀着抵触心情去做。但后来我发现，再无聊的工作，也可以赋予它一个意义——可以用来“练习和自己赛跑”。每一项任务，都可以在做之前设定一个“跳一跳”能完成的时间，然后和自己赛跑，看看能不能跑赢之前的自己。比如，一个非常简单的简单需求，我预估今天花 4 小时搞定画图部分，那我就和自己赌一把，看看 3 小时能不能画完。玩儿嘛，试试呗！反正也没啥损失。玩儿着玩儿着就快了。好了，以上的方法，不仅可以帮我节省出 3.5h 的宝贵时间，实现 6 点下班~！还能让我在完成工作之余，坚持学习~！希望以上的方法，能帮点赞分享的你们，节省出更多的时间，照顾好自己，陪伴好心爱的人。即使困难重重，也能尽力把生活过得好一点，更好一点。欢迎关注作者微信公众号：漫声细语本篇来源：优设网原文地址：https://www.uisdc.com/efficiency
飞翔的企鹅
在路上
表哥
落霞与孤鹜
张大湿
