用户 滤镜 照片 悄悄问一句：农历新年将至，准备好发年终总结朋友圈了吗？随着相机 App 逐渐占领用户使用心智，除了日常大家用到的头部翘楚，还有哪些新奇有趣的工具可以给到设计师灵感和参考呢？今天我们总结了一些设计师的私藏，快来抄作业！功能性：小而美也会很有分量当所有的拍摄编辑类 App 都在追求大而全的功能覆盖时，一些 App 通过特色的风格和专精的用法杀出重围。通过将功能做“垂”做“深”，在用户心中占据了不可替代的位置。Darkr-原来照片也有 50 度灰作为一款专业的无色摄影工具，Darkr 内置了几百款不同程度的黑白滤镜和色阶层次，让黑白的表达更加丰富，同时“暗房”的预览概念也让用户仿佛置身专业摄影棚，原来黑白照片也可以不无聊。Darkr 内置的黑白色阶参数Dazz Cam-普通人也能成为王家卫Dazz 贴合了大火的复古风潮，不仅支持相片拍摄，也难能可贵的提供多款复古录像设备和镜头效果套组，让画质输出兼具氛围感和故事性，其中的“Kino”摄像机抽帧效果更是分分钟重现旺角卡门哦。Dazz Cam 复古拍摄设备套组Focus-连光晕都是爱你的形状很多摄影老法师追求的光圈虚化和景深质感在手机上也能够实现了！Focus 真正做到了人如其名，不仅能够后期调整照片的光圈大小指哪打哪，搭配内置滤镜让光斑都丰富了起来，所以…下次情人节知道怎么做了吧？Focus 内置的光圈滤镜效果iPics-剪裁也能发挥创想千万不要小瞧剪裁的魅力！这是一款非常简单的宫格剪裁软件，也同样可贵在方便实用。用它对照片进行处理，发挥一点想象就能拯救手机中的废片，轻松 get 日常情绪画报。iPics 的极简操作界面和运用效果趣味性：拍的不是照，是情绪拍照这件事本身就和娱乐息息相关，普通用户可能无法像摄影老法师那样对于镜头侃侃而谈，但是对于拍摄的兴趣和情怀是需要被重视和满足的，因此趣味的设计能够让用户因为瞬间的欢愉和惊喜而记忆犹新，毕竟拍照也拍的是个心情嘛。Fimo-一场收集癖的狂欢号称胶卷图书馆的 Fimo 有着丰富的胶卷种类和风格各异的画质表现，甚至连换胶卷的动效和浏览照片的方式都保持了高度统一的品牌世界观，这种对细节还原的呈现让用户有理由相信手中拿着的真的是一台复古相机呢。Fimo 的胶卷种类和画质概览Pott-照片调色就像开盲盒Pott 的视觉调性一直是时尚新潮的，这一点在它内置的发布工具上也得到了很好地贯彻，尤其是当用户选择未使用过的滤镜时，撕开包装的动效让整个过程惊喜有趣甚至有些爽！无形间激发了用户探索更多功能的意愿。Pott 发布器“拆”滤镜动效MONG LI-色彩下的你无厘头的可爱极简设计的拍照 App，会随机叠加不同形状的色彩和混合模式，用户永远不知道按下快门后会得到什么样的一张照片。这种简单的随机处理让身边每一个沉闷的角落都变的未知而有趣了起来。「云奢城」纵览掠影NOMO CAM-等待也很浪漫Nomo 作为大名鼎鼎的复古相机 App 相信是很多用户的心头好，除了玲琅满目的复古相机让用户欲罢不能，在照片的呈现上也独具匠心，每当用户拍摄出一张照片后，都需要耐心的等待照片慢慢成像，这种真实感让每一张照片都变的弥足珍贵。Nomo Cam 慢慢成像的过程操作性：用的顺手是专业底线当拍摄回归工具本身，不同的 App 都在交互引导上做出了不同程度的努力和尝试，贴心的引导和提示或多或少的帮助用户拍摄出更优质的内容。画音-水平仪治好了我的强迫症有多少次我们看着一张照片感叹真好但是发现地平线拍歪了？而剪裁又会带来不必要的画幅损耗。画音的贴心之处就在于拍摄界面植入明显的水平提示，从而辅助用户拍出横平竖直的照片从根本上解决问题。画音发布器中的拍摄倾斜提示型男相机-让摆 pose 变成填空题博主之所以能够成为博主很大一部分原因是他们会摆拍啊，这款 App 通过轮廓化拍照姿势的方式提供给普通用户以拍摄参考，不同于其他 App 过重的引导干扰，在方便用户模仿的同时也没有对画面进行过分的遮挡。型男相机摆拍引导得物-OOTDYYDS大部分人对于得物的印象可能停留在潮流穿搭平台，其实为了做到更优质的内容供给，他们的拍摄工具也同样在素材供给和交互体验上有所深挖。不仅根据用户的图片推荐不同的模板，同时支持商品植入和智能抠图功能，这样便捷的操作让普通用户也能轻松输出自己的穿搭画报。得物发布器的模板和商品抠图写在最后以上提到的拍摄编辑类工具，都是设计师的私藏，还有很多优质的工具没有办法一一跟大家呈现（比如 VSCO 和 HRZN）那么你的宝藏拍摄 App 又是什么呢？不要吝啬快点留言告诉我！！8款小众摄影App，帮你Get网红拍照的小心机说起拍照与后期修图App，相信每个人手机里都不缺自己习惯好用的。阅读文章 > 欢迎关注「淘宝设计」公众号：本篇来源：优设网原文地址：https://www.uisdc.com/camera-apps
用户 内容 人士 兔小巢 （txc.qq.com） 是一款由腾讯 CDC 开发的用户反馈互动社区，让腾讯内外各产品团队无需开发即可快速生成专属社区，高效收集用户反馈，并与用户进行深入交流。兔小巢作为用户反馈互动社区，每天能收到来自多个产品的成千上万条产品反馈，但是我们听到的是全部的声音吗？会不会有一些人因为产品设计上的某些细节问题，而无法顺利向产品团队提出反馈和想法呢？本文是兔小巢团队在适老化与无障碍改造探索方面的一次阶段总结，希望能为社区类产品，甚至是其他类型的产品提供一些思路。关于适老化与无障碍的重要性老年人和残障人士等弱势群体，无论是生活方式，还是日常娱乐，他们的体验行为或多或少会存在差异。通过一系列的用户调研，我们才近距离地了解到，在使用手机过程中，有一些我们习以为常的提示，可能超出了他们的理解范围，成为了无效的信息；有一些内容，我们可能扫一眼就能理解，但对于他们来说可能需要多几步操作，才能获取具体的信息。我国 60 岁及以上的人口已经有 26402 万，占全国人口的 18.7%，同时残障人士的数量也不容小觑，仅视障人士的数量已经超过 1700 万。但他们在使用手机软件过程中遇到的困难，却很难出现在常见的手机软件意见反馈渠道，更别说引起产品团队的关注。恰好今年国家发文要求微信、QQ 等腾讯系 9 款产品，在 2021 年 9 月 30 日之前完成适老化和无障碍改造。兔小巢作为嵌入在这些产品的反馈社区，有责任全力配合，帮助老年人及残障人士有效地发出他们的声音。因此，兔小巢适老化与无障碍改造提上了日程。整体改造成果围绕适老化与无障碍，兔小巢进行了一系列使用体验优化工作，主要通过前端改造来实现：1. 适老化字能看清楚了——文本展示效果自适应在微信、App 等条件下打开兔小巢，页面都可以配合应用设置的字体大小，调整内容展示的效果，包括文本字体大小、段落行距等，让老年用户无需寻找调整字体的设置，也能把字看清楚。相比普通版兔小巢首页，适老版的字体、按钮等元素整体放大，方便老年用户阅读。另外页面底部的按钮文案从“说两句”改为“我要发言”，更易于老年用户理解按钮的用途页面更“好看”了——页面颜色对比度优化随着年龄增长，老年用户视觉逐步衰退，具体表现包括视力下降、对蓝/绿色不再敏感、视觉范围变窄、较难适应明暗变化等。为了让老年用户在访问兔小巢时，也能获得舒服的阅读体验，兔小巢整体调整了页面颜色的对比度。关于适老化设计的颜色使用，请参考这篇：想做好适老化设计，先来了解人眼的光色原理！近期，所负责项目正在进行适老化的设计，分析过程中找到一些产品相关的研究和对比，但是看的过程，一直有个困惑：老年人看到的世界到底是什么样子？阅读文章 > 相比旧版兔小巢首页，新版的颜色对比度更高，方便老年用户清晰辨认，获得更舒服的阅读体验2. 无障碍读屏重点更突出了——读屏适配改造正常人使用手机靠“视觉”，而视障人士则靠“听觉”。大多数视障人士都是通过读屏功能来了解屏幕上的内容，但兔小巢此前还未实现读屏软件的相关适配，导致读屏表现欠佳，影响实际使用。因此，为了让视障人士也能顺畅地进行产品反馈，兔小巢对读屏功能进行了适配改造。如聚合相关性强的内容，使读屏软件可连续读出，方便用户减少操作；屏蔽无意义图标，让读屏软件减少读出强干扰性的内容等。以上的改造成果已经支持公司内外超过 7500 款接入产品，并且有近 4700 位老年用户体验，累计反馈了 1342 条信息。具体改造方案1. 文本展示效果自适应在适老化改造过程中，为了实现客户端字体自适应调整，我们设计了“元素尺寸控制系统”。在这个系统下：元素实际尺寸=元素的默认尺寸 倍率（倍率通过读取客户端的设置获取）在此基础上，我们还提供白名单设置，白名单内的元素在页面字体调整时大小保持固定不变。例如在帖子回复列表页上，用户头像并不是主要信息，通过将“用户头像元素”加入白名单，可以实现在页面整体适配字体变化时，头像区不会跟随字体放大而放大，保证了右侧帖子详情的可读性。兔小巢页面的字体自适应后，部分不影响理解的元素，如头像区域，会保持大小不变，保障页面整体的阅读体验2. 读屏适配改造在前期测试中，我们发现主流读屏软件在兔小巢的读屏体验不太理想。因此，通过以下 4 个方面进行整体的改造：读出图标的操作含义「原有问题」有一些图标，普通用户能够轻松地感知到这是可点击的按钮，比如下图的“点赞”。但由于代码未能规范地将图标声明为“按钮”，读屏软件无法识别，会直接略过图标，只朗读出数字 ，因此视障人士很难了解到这里可以进行点击来实现点赞效果。兔小巢反馈帖子中的“点赞”模块「解决方案」我们通过将“点赞图标”定义为按钮，并添加替代描述“已/未点赞，XX 个赞”，让视障人士明白这是一个可点击的交互，理解点赞的状态、有几个赞等信息。控制焦点，感知交互「原有问题」常见的弹窗（如下图的提醒内容），能够快速引起普通用户的注意，有着提醒、引导的作用。但由于前期兔小巢不兼容读屏软件，提醒内容无法让读屏软件识别，视障人士无法及时感知。并且当弹窗关闭时，读屏焦点会停留在弹窗原有的位置，因此会影响读屏软件无法读取应读的内容。兔小巢反馈环节中，提醒输入内容”不能少于 5 个字“的弹窗「解决方案」我们通过记录触发焦点、切换焦点的方式，让读屏软件有效读取弹窗内容，帮助视障人士快速感知弹窗；并且在关闭弹窗后，让读屏焦点回到原来的触发焦点，可以正常读取内容。聚合内容，减少操作「原有问题」普通用户阅读页面的内容，如昵称、发帖时间、帖子内容等，是自上而下连贯的。而读屏软件是按照实际 DOM 节点的顺序依次朗读的，导致读屏用户需要依次点击昵称、发帖时间、帖子内容等区域，才能完整了解页面上的信息。「解决方案」针对这部分相关性强的内容，我们使用 WAI-ARIA 技术将多个 DOM 节点聚合成一条信息，帮助视障人士点击 1 次即可获取全部信息，减少频繁操作，提升效率。读屏改造前，用户需要依次点击用户名字、发表日期、帖子内容，才能完整了解内容；改造后，仅需点击用户名字、帖子内容，操作步骤减少减少干扰「原有问题」对于普通用户来说，“>”能够帮助他们理解点击相应的位置会有下一步操作。但部分读屏软件会将 “>”朗读出来，因为“>”在代码中是通过一张图片实现的，而读屏软件会将图片名称朗读出来，所以这十分不利于视障人士理解。常见问题页面中的点击提示元素「解决方案」我们梳理出页面上所有纯装饰性元素，或对用户理解内容没有帮助的非文本内容，使用 aria-hidden=true 来屏蔽，避免读屏软件读取这部分的信息。最后的话为了保证功能对于老年用户、视障人士真正可用，我们还组织了 7 位老人、8 位视障人士对优化后的兔小巢进行可用性测试。针对老年用户与视障人士在体验过程中进一步暴露出来的认知障碍问题，我们再次优化调整了 20 多处细微流程和文案表意，让弱势人群能够把兔小巢轻松用起来。一位视障用户在可用性测试现场使用手机以上的改造，只是我们的第一步。随着，我们对弱势群体的了解更多一分，便意识到改造工作更任重道远、且无法一蹴而就。如何让他们更容易理解每一步操作、让他们更轻松地完成每一次点击，甚至让他们更多参与到交流互动中来，都值得我们进一步研究与优化。接下来，我们还会继续进行适老化与无障碍探索，希望在未来，弱势群体不仅是发出他们的声音，让大家听见，还能放大他们的声音，让他们也能在互联网世界中找到自己的价值与共鸣。近6000字干货！5个方面帮你完全掌握适老化设计（送大厂PPT）前不久看了阿里巴巴的设计周，其中有一个话题引起我注意“适老化”设计，今天就来聊一聊适老化设计的注意点。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/txc-elderly-design
产品 用户 功能 竞品分析作为无论产品经理、运营岗或体验设计师，都是其必备技能和工作范畴之一，想必大家也应该有些许心得和体会。但是如何通过竞品分析提炼有效信息，为业务或设计决策提供强有力的支撑，仍然值得进行更多的思考。文章主要介绍将用户体验五要素和表格对比法相结合的方式，系统阐述竞品分析的思路。为什么写该文章最近早上听两位同事的一段聊天。一位同事说自己很苦恼，不知道自己即将想购买的个人保险是否有什么潜在的风险。另一位同事则给她一个思路，可以给这家保险公司的竞争对手企业咨询一下，了解预购买的这份保险的问题。听了这段对话会发现竞品研究在我们的日常生活中无处不在，当我们无法判断一件事情的好或坏，最好的方式就是拿同类的产品来比较一下，也就是“货比三家”。可以发现，掌握竞品分析的研究思路不仅仅对我们的工作有帮助，而且对我们的日常生活也有一定的帮助。竞品分析不等于货比三家竞品分析最早源于经济学领域。随着互联网的火热，现在被广泛运用于互联网产品生命周期的流程设计中。互联网产品 PRD 评审或设计方案评审时，都有可能被领导或相关评审同事询问：竞品的方向是什么？竞品是如何做的？所以竞品分析在产品设计流程中的重要性也不言而喻。近两年的工作发现大家在进行竞品分析时会存在的一些共性疑惑：对于竞品分析肯定不能简单归纳为”货比三家“这么简单，张在旺老师在《有效的竞品分析》书中对竞品分析的意义按照对产品及个人两个维度进行说明：以终为始的思维方式分析为什么是以终为始的思维方式去做竞品分析，《高效人士的 7 个习惯》（The7 Habits of Effective People）提到的第二个习惯”以终为始”。做竞品分析时也要明确的清楚自己的目标，目标清晰的前提下进行设计分析，不至于最终的分析方向和目标偏离太远。竞品分析要怎么做1. 明确竞品分析的目标产品从概念提出到最后退出市场的整体生命周期中，竞品研究在不同阶段的目标也不同。首先了解当前产品在生命周期中所处的阶段和用户特征，做到先「知己」再去「知彼」。起步期阶段：产品刚进入市场，该阶段大部分产品属于业务导向，通过竞品研究主要目的是验证其需求是否可行或产品的商业模式是否靠谱。该阶段可以通过使用波特五力分析、PEST、SWOT 等方法分析，从宏观层面上了解产品可挖掘的机会与产品可能潜在的威胁，借鉴其中产品的商业模式归纳特征，打造差异化产品。成长期阶段：该阶段更多的是业务导向往体验导向过渡，该阶段产品的基本雏形已形成。可以通过 KANO 模型等方式研究竞品中用户的期望属性以及魅力属性的功能与信息。从竞品中可以获得创新的亮点与思路，尝试 MVP 的方式快速寻求解决方式，突破现有产品模式。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 成熟期阶段：更多的是通过创新的功能与内容优化以达到满足体验和商业的目标。通过结合商业的诉求，持续关注核心的竞争对手产品的迭代与产品设计，为自己提供创新的思路，不断打磨现有产品的细节与体验。2. 竞品的选择对于竞品的选择上，也要根据竞品分析的目的不同，进行不同的竞品选择。“决策支持”或“预警避险”类的分析，则可以从“品牌竞品、品类竞品、替代品”中寻找竞品。比如携程酒店产品的分析，则品牌竞品、品类竞品和替代品可以选择去哪儿酒店、美团酒店、飞猪酒店以及民宿和短租类产品如：爱彼迎、途家等。竞品分析的目的是“学习借鉴”时，可以从“品牌竞品、品类竞品、参照品”中寻找竞品。依然以携程酒店为例，则参照品可以选择饿了么、美团外卖以及京东等平台为参照品。初步选取好竞品后紧接着就是对竞品进行分类，选择一个合适的维度进行产品分类，将分类结果结合自己产品特性和用户特性进行初步筛选。3. 竞品分析的思维框架对于成长期和成熟期的产品的分析，笔者比较推荐 Jesse James Garrett 在《用户体验要素：以用户为中心的产品设计》书中的模型进行分析。用户体验五要素从 5 个层面拆解产品分析的维度，通过对战略层、范围层、结构层、框架层和表现层的拆解分析，可以全面、深入、细致的了解竞品。4. 战略层战略层主要是了解产品目前在公司的定位与阶段，目前产品的商业模式以及产品当前的核心定位是什么，讲清楚用户可以从产品中获得什么，公司可以从产品中获得什么，如果涉及到触点比较多，还要讲清楚，商家和用户以及平台之间的关系，建立平台性思考的思维框架模式。比如闲鱼二手闲置物品交易平台，该产品卖家在平台通过发布宝贝、鱼塘、话题等信息，平台则给予卖家一定商品的曝光和信誉评分，买家通过给平台提供一定的流量和交易额，平台则给予买家提优质的服务、交易和信誉。5. 范围层范围层主要研究竞品具有的基础元素以及核心具有的能力，推演产品的主要的核心功能、基础功能，了解功能之间的架构关系；同样以闲鱼产品为例，具有底层的基础元素是用户基础信息，平台具有信用体系和推荐的能力，则平台具有的亮点功能是交易担保以及兴趣推荐的功能。6. 结构层结构层主要包括信息架构与分类，该层面主要是对竞品的信息和功能之间的层级关系进行一定梳理，信息结构从产品的属性上可以分为两类：一类是比较复杂型的如运维类以及 Saas 类产品，另外一种是相对比较简单的 TOC 类的产品。通过对信息和功能结构的关系梳理，可以帮助我们快速了解竞品的信息与功能之间的关系。7. 框架层和表现层框架层和表现层则将页面模块以及页面元素拆分进行剖析，将页面拆成「模块-组件-元素-原子」。建议根据项目区分，并不一定每一个项目都要拆解到原子的颗粒去分析，掌握合理的度即可。在元素的对比分析中，结合打勾对比法的方式，重点关注核心的竞品，使用列表将信息进行分类罗列，通过打勾的方式对竞品功能拆分进行对比，保证分析的全面性以及在设计的落地层面上切实起到辅助决策作用。8. 竞品分析的准则为了保证分析报告的的质量，分析的过程中需要遵循一些评判的准则。应该是带着思考去看竞品，这里的思考比如说产品的可用性准则、IOS 设计规范、视觉设计的基础通用性规范去辩证看待竞品的设计。关于产品的设计准则，建议可参考尼尔森十大设计准则：使用竞品分析对产品改进竞品分析的最终目的是回归设计本身，辅助我们的设计执行与落地，对于很多用户体验设计师而言，可能最大的障碍在于如何将分析的结论运用于设计方案中。1. 对竞品功能与信息的前期调研阶段项目前期阶段进行竞品分析，可以建议结论先行。将竞品分析中确认的范围层部分和业务先讨论起来，避免因为后期大的功能信息变动，导致后期方案的反复修改。2. 产品框架与信息结构分析阶段通过对竞品的结构与框架的研究，输出产品结构图与用户操作流程图，并且结自身和产品的用户特征给出建议的方案，针对不同的框架逻辑，可以多方案输出，分析每一种方案的优、劣势，让讨论更加聚焦方案本身，提升方案的说服力。3. 产品的迭代改进走查阶段根据竞品中的亮点功能与信息进行分层梳理，按照人有我无（竞品大部分都有的信息，但是自己的产品流程中没有的），人有我有，人无我有的逻辑了解对方和自己产品的优劣势，重点关注人有我无的的产品功能、交互方式、视觉表现。结合竞品和自身产品的特性和从用户出发，综合考虑产品设计背后的本质根源，以及给用户解决的问题，给出合理的设计策略与建议。个人感想之前也见过一些小伙伴会花费很长的时间做竞品的分析，其实竞品分析重点不是竞品选择的数量有多少，当然合适的竞品选择和细致的分析很必要，但是比较重要的是通过既有深度也有逻辑性的分析后，输出的启发性想法或者建议性方案更重要。发现合适的机会—研究可行性方案—落地机会，重点是最终是否能够将发现的机会推进和最终落地，形成一个很完整的闭环。做好竞品不是一定就能做好产品，竞品分析也只是产品设计与分析过程中一个重要且必不可少的环节，最重要的还是先需要了解自身产品的特性，了解自身产品中用户的使用场景，从用户角度出发，提出当前比较合理的策略方案会更贴合用户的所需。本文篇幅相对有点长，在个别方面的分析不足之处或有更好的建议，希望可以及时交流。参考文献《用户体验要素：以用户为中心的产品设计》—Jesse James Garrett著；范晓燕译；《有效竞品分析》—张在旺著；《高效能人士的七个习惯》Stephen Richards Covey 著；万字干货！手把手教你学会竞品分析（上）我们做设计的时候经常会被问，为什么这么设计？阅读文章 > 万字干货！手把手教你学会竞品分析（下）上一篇带大家全面认识了竞品分析所用到的方法，以及竞品分析的原则和误区。阅读文章 > 欢迎关注「京东设计中心JDC」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/competitive-product-analysis-5
图形 主体 图片 当选择好图形后，比较理想的情况是可以直接进行设计使用，但很多时候图形主体可能不够明确，不能清晰表达核心信息的内容，图形主体的位置、大小、角度等不一定合适排版，这时候则需要对图形进行裁切处理，正确的裁图技巧可以让图形更加聚焦主体、突出设计主题。设计师日常拿到的图片形式就是矩形图，矩形裁切也是最基础的裁图技巧，接下来通过三个案例进行讲解：通常情况下画面都需要有着明确的主体，这样才能够有效的吸引受众的视线，将画面所要传达的信息清楚地呈现出来。通过对图形的裁切，简化可能抢走主体视觉的多余元素，保证图片的简洁度，以达到主体更加突出的效果，提升信息传递的效率。对原图进行适当的裁切，减少多余元素对主体的干扰，能更突出设计主题，但在裁切时，需要注意主体元素的完整性。留出右边空间进行文字排版：通过图片裁切，放大主体，让主体更突出，强调细节和情感，增加视觉冲击力。如左图是一张视觉效果质量不错的拳击手图片，但缺少视觉冲击力，通过裁切让主体更突出，满版占据画面，更具气势。把照片调整为黑白，并加强对比度，质感也更好。留出右边空间，根据图片的外轮廓进行文字的编排。同样的主体，经过裁切，让画面集中于整体目标的一部分，可以看到不一样的细节，呈现出特殊的视觉体验。如下图，选取篮球局部特写，看似取景小了，但是会扩展观看者的联想空间。更戏剧性的表达设计主题，更加浓郁的营造氛围，这样的处理手法让版面显得简洁而高级。虽然使用矩形图片进行设计也可以获得不错的视觉效果，但看多了会让人感到乏味，将图片裁切为其它图形会让整个设计显得更加新颖。所谓的异形裁切就是使用除了矩形以外的其它形状对图片进行裁切，需要注意的是裁切图形后不能影响到观众的理解。使用规则的几何形态，如三角形、圆形、多边形等，对图片的外轮廓进行裁切，得到新颖的几何形状图形。不规则形状形式多种多样，运用在版式设计中很考验设计师想象力。优点是可自由发挥设计的空间很大，缺点是操作难度高，排版难以把控。此案例根据建筑的流线型造型，按照建筑的外形进行裁切处理，使版面具有更强的形式感，视觉效果更加灵动美观。还有另一种不规则的形状是无规律、复杂多变、偶然产生形状，视觉感受自然、生动、有灵性。如笔触、墨点之类的偶然形态等。裁切后得到的不规则图形，能够打破页面的单调乏味，让画面更具设计感。将图形按照特定意义的形状（如数字、logo、人物等）来限定，使用剪贴蒙版来将图片约束在特定的图形的轮廓当中，使版面尝试新颖、独特的视角，更有趣的传递信息。本期讲解了图形裁切常用的方法，当图形处理好以后，我们会根据图形的位置、轮廓等因素进行文字的编排，那么如何在设计中做到图文互动，我们将在下期进行讲解，下期见！构图不完美？iPhone 摄影人物类冠军教你用正确的姿势裁图！@原画册韩松 ：构图不完美，可能是没有用正确的姿势裁图！阅读文章 > 欢迎关注作者的微信公众号：「艺海拾贝Design」本篇来源：优设网原文地址：https://www.uisdc.com/graphic-cutting
干货 合集 这是一个 大家好，这应该是 2022 年农历新年前的最后一波设计干货合集了！这波干货合集包含了好几个最新的图库，风格各不相同，有的完全免费，有的则提供免费试用，但是素质都相当过硬。此外，还有人工智能驱动的设计工具，有让 Figma 自动设计的插件，都相当给力，下面具体看看：1、AI 驱动的营销物料设计工具https://simplified.co/AI 驱动的设计工具越来越多了，这个名为 Simplified Design 和传统设计工具的差异在于，它借助人工智能将大量复杂的，原本需要手工仔细处理的部分给简化了，并且会越来越快，越来越精准。一键去背景都是最基本的操作，还有快速制作动画，自动生成多平台可用的物料，保证整体设计的一致性，等等等等。这个工具虽然完全版是收费的，但是提供免费试用，可以上手体验一下。2、3D 人类角色插画图库https://humans.wannathis.one/这是一个部分免费、风格时尚 3D 角色图库，这个图库的视觉风格非常有意思，摩登又现代，有男性和女性两个主要的角色，从服饰，场景，动作，到各种辅助搭配，可以说是非常全面，当然，完整版是收费的，可以免费下载一部分，值得试试哦~3、设计自动化的 Figma 插件https://automator.design/先说一下，严格意义上来说，这是一个付费的插件，有免费试用期，但是它真的值得推荐——这是一个能够帮你缓解工作压力的插件，通过拖放实现自动化的设计流程，智能化自动添加占位符，而这些都只是它智能化地的智能自动化设计当中的一小部分，它实现来 100 多种不同的智能化功能。方便不方便，试试就知道。4、完全免费的超大3D形状库https://www.shapefest.com/这是一个完全免费的图形类3D 形状类视觉素材库，严格意义上，它提供来超过 16 万张各种各样的透明背景的 png 格式的图片素材，这些素材可以直接应用到你自己设计项目当中。这些3D图形涵盖的元素类型非常丰富，包括各种 LOGO，几何图形，手形，立体文字，等等。5、免费人物场景插画图库 illustrationhttps://freesvgillustration.com/这是一个最近刚刚出来的一套包含人物和场景的插画图库，图库的基础版是完全免费的，图库提供的插画可以下载 SVG 和 PNG 格式的图片，这个服务最有意思的地方在于，你需要什么类型的图库，可以联系官方，让他们给你制作。6、免费等轴测SVG图形设计工具https://fffuel.co/iiisometric这是一个超级方便的制作3D效果强烈的等轴测图形编辑工具，它的使用用法非常简单，只需要设置好颜色，然后就可以使用积木堆叠的方式来快速堆叠出各种有趣的图形，应用在实际的设计项目当中。7、适合电商领域的免费插图包这个插图包是完全免费的，插画中的内容主要应用于电商和支付领域，这些插画足够有趣也足够简约。这组插图包种图片的格式是 SVG格式，可以在文章开头和结尾的百度云链接中获取。8、摩登衬线字体 Resonant Chilliner出自 Font Duo 的这款字体是一款风格颇为现代的衬线字体，有着足够的时尚感，在笔触上非常优雅，在尺寸和轮廓上又富有规律，足够克制。Resonant Chilliner 适合放在海报、请柬、邀请函和 banner 等场合。这款字体不可商用，仅可供个人使用，可以在文章开头和结尾的百度云链接中获取。9、健康主题的免费PPT模板这个以健康食物为主题的 PPT 模板整体采用来简约的设计风格，其中涵盖来多种不同的展示方式，从传统的图文混排到信息图，不一而足。这个ppt 模板的设计是相当不错的，不过不可商用，仅可供个人使用，可以在文章开头和结尾的百度云链接中获取。往期干货：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 第三波！2022年1月精选实用设计干货合集大家好，2022 年第3波设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 1月干货第四波10mf5rm 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-1-design-resources-vol4
卡片 组合 圆角 不知道你有没有发现，每次做 UI 设计，几乎都会遇到卡片容器，也会因为卡片没设计好，没创意，被领导 Diss。那么卡片到底要怎么设计？，有哪些细节需要我们注意？正好，我最近在研究卡片的玩法，发现一些我们很容易忽略处理细节的方法，如果掌握这些，可以帮助设计提升精致度和品质感。我挑选 4 个最具有意义的细节与大家分享，尤其是最后一个，很多设计师不敢尝试。卡片圆角方法卡片圆角看起来很简单，但是如果稍有不慎就会出现看着不和谐的现象。如果单纯卡片布局，其实圆角比较好定义，如下这种方式。常规的卡片圆角，我们可以根据产品设计中，所需要的圆角数量来定义几种大小就可以了，一般推荐 3~5 个就够了，不宜过多。可以用在小卡片、按钮、卡片和其他需要圆角的控件上。另外一种情况，卡片内继续嵌套卡片，这时候一般都会有圆角。那么两个卡片的圆角要怎么计算？面对这种情况，相对好用的方法是：内矩形的圆角是外矩形的 1/2，比如内矩形圆角是 16px，那么外矩形圆角是 32px。下面来看看两个案例。案例 1：上图，在大卡片情况下，左侧外卡片和内卡片圆角一致，这样设计出来效果，看着有些不和谐。右侧的方法内卡片圆角是外卡圆角的一半，这样的视觉看上去整体会和谐很多。下面看个实际应用案例。Dribbble案例 2：在分段导航控件场景下，左侧案例，内矩形和外矩形圆角相等，看着视觉感受不舒适。右侧，内矩形圆角是外矩形的一半，效果会好很多。下面看下这种导航的应用案例。Ghani Pradita卡片描边在一些场景下，如果我们整个产品界面的底色是白色，这时要添加白色卡片容器，同时只是单纯添加投影来区分层级，那么会显得有些模糊。白色背景下，如果添加投影的同时，再增加一描边效果，那么效果会好很多。上图，在白色背景的项目中，我们给卡片边缘加 0.5px 的线，色值#E9E9E9，这样就会清晰的轮廓，卡片层级会更清晰一些。CokePlay上面这个应用，在白色背景情况下，定义卡片，为了让信息层级清晰，特意在卡片上添加了描边效果。上图反面案例，同样的卡片设计，这个应用，卡片颜色和底部背景色一致，导致卡片几乎和背景融为一体，这样信息层级就会很弱，不推荐大家这样大面积使用。卡片组合版式卡片的组合版式，这个词也许你第一次听，因为是我发明的。到底什么是卡片组合版式？我这里指的是卡片与卡片之间的组合排版。上图案例中，这种组合版式，在设计中最常见，也是用得多一些，所以会显得比较常规。我们在前期做概念探索阶段，其实是可以打破这种布局模式的，挑战下其他思路。上图中，就是打破了原有的那种思路，尝试多卡片组合设计。下面，我们来看一些实际的设计案例。大家留意下我红圈标记的地方，这种卡片组合，就是我前面的那种多卡组合思路。MUSINSA&BALAAN上面两个上线的应用，通过卡片的组合排版设计，让画面更有张力和新鲜感。苹果官网卡片组合异形卡片异形卡片，很少有设计师会想到这样去布局，毕竟存在一定的风险。如果设计出来，效果还是蛮有惊喜的。我们今天讲的异形是除去圆形、方形的卡片。异形卡片的特点：不规则中有统一的规律，形式感强、张力、杂志感。BookletIF 设计大奖作品，Booklet 采用异形设计，增强了页面视觉张力。Kakao Webtoon这个动漫类 APP 应用设计，采用异形作为漫画人物容器承载，凸显画面趣味性和可玩性。EchoBehance@the octopus magazineBehance@SPOON. Brand Identity Renewal如果想打破现有模式，走创新方向，异形卡片可以作为一个切入点，毕竟异形卡片可以和品牌符号衔接起来，做创新拓展。写在最后卡片，在多形态业务中都频频出现，例如 C 端、B 端、Web 端、车载等，它的灵活性和适应性，受到广大设计师的青睐，对于开发人员来讲，适配性也很强。所以，既然这么重要的一个卡片容器，是值得我们去细致研究，以便于做出更好的卡片布局。今天我们讲了 4 个细节，我个人认为，如果说想发挥创意，最后一个异形卡片可以有更大空间。最后，大家可以自行在探索前期，多尝试创新。做好这4个细节，帮你快速提升卡片设计效果！Hi，我是彩云。阅读文章 > 欢迎关注作者微信公众号：「功夫UX」本篇来源：优设网原文地址：https://www.uisdc.com/card-design-details
禀赋 效应 用户 根据禀赋效应，当用户觉得某样东西属于自己时，他们愿意花更多的钱继续使用它。利用该效应，设计师可以通过个性化服务、免费试用和退款保证等简单方式，来提高产品的采用率和保留率。想象一下，你注册了一个 Premium Spotify 帐户并开始免费试用，只是为了看看它是怎样的。但是在免费试用期结束后，我相信你会付费并继续使用它，对吗？这就是禀赋效应如何发挥作用的一个简单示例。当用户觉得某样东西属于自己时，他们愿意花更多的钱以继续使用它。禀赋效应 [1] 一词来源于行为经济学领域。心理学家 Daniel Kahneman、Jack Knetsch 和 Richard Thaler 就 “禀赋效应” 进行了实验，并在他们 1990 年的论文 “禀赋效应和 科斯定理 [2] 的实验测试” 中阐释了这一概念。（ [1] 禀赋效应：当个人一旦拥有某项物品，那么他对该物品价值的评价要比未拥有之前大大提高）（ [2] 科斯定理：只要财产权是明确的，并且交易成本为零或者很小，那么，无论在开始时将财产权赋予谁，市场均衡的最终结果都是有效率的，实现资源配置的帕累托最优。科斯定理表明，市场的真谛不是价格，而是产权。只要有了产权，人们自然会 “议出” 合理的价格来。）禀赋效应描述的是人们为何愿意花更多的钱去留住他们已经拥有的东西，而非购买自己没有的东西。因此，我们可以看到，人们倾向于为自己拥有的物品赋予更大的价值。禀赋效应被认为是 “损失厌恶理论”[3] 的副产品。“损失厌恶理论” 认为人们对损失的在意程度高于利润。（ [3] 损失厌恶：指人们面对同样数量的收益和损失时，认为损失更加令他们难以忍受。）人们重视他们喜欢的产品 （插图来源：Storyset）“我的宝贝” —— 咕噜的声音是的，你猜对了！甚至咕噜（《指环王》 中的角色）和戒指也是禀赋效应的一个很好的例子。当咕噜拿到戒指时，他赋予戒指更大的价值，并拒绝放弃它，因为他觉得戒指是他所拥有的。正如妮可在她的文章中提到的，禀赋效应非常强大。我们的大脑在心理上建立了对物体的依恋，即使我们对这些物体并没有情感上的依恋。依恋可以立即产生，因为在潜意识中，我们在第一次接触时就赋予了对象更多的意义、品质和价值。何时采用禀赋效应？在设计的过程中，你一定会想，什么情况下可以利用禀赋效应？正如 UI Patterns 中提到的，你可以利用此效应来：留住普通用户让用户对你的产品赋予高于竞品的价值除此之外，你还可以利用此效应来将人们转化为特定产品的新用户。这称为 “产品采纳”。通常有 3 种方式可用于产品采纳：客户专属的个性化服务赠送免费物品退款保证客户专属的个性化服务引起禀赋效应的一个重要因素是用户的主人翁意识。因此，当你向用户提供适应其需求的个性化的产品时，就会创建用户与产品的情感联系。例如，如果你仔细分析 Web 浏览器 Google Chrome，会发现用户可以按照自己的意愿对其进行个性化设置。用户可以更改颜色主题，添加书签以便于访问，甚至可以添加扩展程序！这种个性化设置能够让用户感受到产品所有权，因此该产品对于他们来说具有更高的价值。客户拥有的个性化设置用户个性化服务的另一个实例是应用程序的新手引导。当用户创建帐户后，应用程序将询问他们的特定偏好，从而说服用户长期继续使用该产品。这是因为整个应用程序都是为用户量身定制的。赠送免费物品另一种引发禀赋效应的方法是向用户赠送免费赠品。其中包含两种类型，一种是特定产品的免费试用，另一种是在用户使用该产品时，向他们提供其他免费赠品。例如，Coursera 为用户提供任何其想学的课程的 7 天免费试听机会。用户可以在试用期内学习课程内容。大多数用户将被说服，继续付费并完成整个课程，因为他们已经拥有课程并开始学了。提供免费试听课的示例当用户获得免费试用机会时，由于禀赋效应，他们很有可能继续使用该产品。当一个人觉得某产品属于自己时，该产品在他们心中的价值是其实际价值的两倍。赠送赠品将有助于在更长的时间内留住用户。例如，Envato 元素每月都会向订阅者发送 “赠品”，从而说服订阅者继续使用 Envato，以获取每月免费的精彩内容。再说一次，这是禀赋效应的影响！赠送赠品的案例退款保证你一定遇到过很多提供退款保证的在线课程。如果用户不喜欢该产品，退款保证则为用户提供了撤销其行为的机会。由于退款保证，用户很愿意支付特定金额以注册产品。但是由于禀赋效应，当用户拥有该产品时，他们甚至愿意支付两倍的费来保留它，因此用户不太可能要回这笔钱，因为退款会让他们失去这笔钱带来的价值。例如，你或许已经在 Contented 等在线课程平台中看到过此类优惠。如果你对课程内容不满意，他们会提供 100% 退款保证。退款保证示例结论根据行为经济学，情绪和社会会影响一个人的决定。因此，当我们了解这些因素时，我们可以通过设计来帮助用户做出最佳决策。设计师可以利用这些效应，通过个性化服务、免费试用和退款保证等简单方式，来提高产品的采用率和保留率。更多引导用户的设计心理学：像心理学家一样做设计！5个掌控用户行为的实用技巧你有没有尝试过各种各样的能够影响用户行文的设计策略和设计方法？阅读文章 > 欢迎关注作者微信公众号：「TCC翻译情报局」本篇来源：优设网原文地址：https://www.uisdc.com/endowment-effect
徽标 图标 用户 大家好，我是 Clippp，今天为大家分享的是「徽标设计」。说到徽标（Badge）设计，可能有些读者会觉得陌生，但是大家肯定都知道手机软件上那些没完没了的小红点提示，这种设计就是运用了徽标（Badge）组件。徽标很常见却又很容易被忽视，除了常见的小红点，根据使用场景的不同，徽标组件还有其他设计样式，比如在小红点上加数字、文字、状态……而且除了圆形，徽标还有很多其他形状，如果你也忽视了这些关于徽标的设计细节，一起来看看吧~徽标的四种类型徽标组件有纯圆点、数值、文字、图标 4 种常见的类型：1. 纯圆点纯圆点徽标是最常用的类型，作为一个轻量级的提醒，引导用户点击某些特定的功能。纯圆点徽标还可以用来区分用户的状态，显示用户是否在线。2. 数值带有数值的徽标用来表示具体的数量，主要用在消息通知、添加购物车、外卖点餐等场景。例如在消息通知的场景中，消息 icon 上显示的数值可以用来告诉用户有几条未读的新消息。又或者在网购或点餐等场景中，通过购物车的数值徽标的变化，就能知道已经选择了多少商品或食物。3. 文字文字主要有两种使用类型，一种是单独的文字徽标，多用在电商运营等活动场景中，通过显示优惠促销来吸引用户。例如在某多多首页的功能图标区域，通过加入不同的文字徽标，能够告诉用户有新的“限时秒杀”活动和“立减 2 元”的充值优惠，鼓励用户采取行动。另一种是作为文字标签，放在 UI 卡片的任意一角，用来展示某个热门的话题或者显示浏览量等。或者放在内容中，用来突出重要的活动。关于标签组件，还有很有需要注意的设计点，后期我会单独出一篇文章展开讲讲标签设计。4. 图标在元素基础上叠加一个图标来显示当前的状态，或者对用户的反馈做出响应，常用的图标状态包括成功、失败、警告。在一些交友类产品中，可以用图标徽标表示哪些用户已经过实名认证。Tips：根据使用场景的需要，一个 UI 页面中可以包含多种徽标类型。在收件箱中，使用右上角的数值徽标展示新收到的邮件数量，下方纯圆点提示可以明确区分出新邮件和已读邮件。徽标设计的五个要素虽然徽标看起来很简单，但想要得到一个独特的徽标，仍然需要考虑颜色、圆角、描边、阴影、位置等设计要素。1. 颜色填充利用徽标颜色来调整内容优先级。背景色 100%的徽标比半透明(不透明度为 15–20%)的徽标视觉效果更明显，那么重要的内容优先使用100%的颜色填充，相对次要的内容则使用半透明度的徽标。徽标的颜色并不局限于某一种，更重要的是要灵活使用，做到在每个页面中都能有效吸引用户视线并且易于识别。2. 圆角半径调整徽标的圆角半径来改变容器的外形。除了基础的圆形、方形，也可以考虑使用长条状矩形、气泡形、不规则形状等外形样式。徽标大多用在原有元素的基础上，所以在设计徽标外形时，还要考虑原有元素的样式和风格，例如原有元素是圆形，那么徽标也应该考虑设计成圆形，这样才能和原有图标统一，跟整个 UI 页面搭配。3. 轮廓描边仔细观察就会发现，大多数徽标并没有和原有元素贴在一起，而是相切一定距离的宽度。通过给徽标加入与背景色相同的描边，既能将徽标单独展示出来，还能保证徽标在任何背景颜色上都能够被看到。4. 添加阴影通过给徽标设置一个平滑的阴影(使用相同的颜色)，能够得到一个微妙而优雅的悬停效果。5. 位置关系徽标容器的长度根据内容量的多少而定，容器长度可以向左、向右或从中心扩展。当徽标向右延伸时，需要注意徽标距离右侧相邻的图标之间的距离，避免徽标太长影响相邻图标的显示。灵活运用特定的文字缩写可以有效减少内容量并节省空间，例如使用“99+”来表示超过 100 条的消息，用“4.8k”表示 4800 位关注者。最后以上就是徽标(Badge)设计容易忽略的设计点，希望通过这些细节能帮助你打磨和改善产品的体验。「组件系列」的其他文章，近期也会不断更新，欢迎大家关注~看似简单烦人的小红点提示，原来还有这么多设计细节！你是否遇到这种场景，打开一个APP想赶紧用呢，结果满屏“小红点”提醒，强迫症的你必须咬咬牙把它们先消掉，才能舒心的正常使用。阅读文章 > 欢迎关注作者微信公众号：「Clip设计夹」本篇来源：优设网原文地址：https://www.uisdc.com/app-red-dot-design
保罗 兰德 美国 上一回我们讲到了国际主义开始在平面设计领域中称霸，这种风格以包豪斯现代主义为 DNA，然后在瑞士地区成型，最后被美国地区发扬光大继而推广到全球。堪称商业设计万金油的国际主义是如何发展至今的？国际主义（InternationalStyle）在当代是非常重要的风格，它属于商业设计中的“万金油”，放之四海而皆准，世界各国人民似乎都可以接受它，未必最好，但挺合适。阅读文章 > 但我们必须清楚，设计与艺术风格在任何时候都是多元发展的，只是以“你方唱罢我登场”的模式在共存，原因在于审美与文化也是多元的，通常是某个特定历史时期由某个风格占据主流罢了。所以在 1950 年代国际主义开始横行之际，美国地区发展出另一种被人称道的平面风格，史称“纽约平面设计派”（The Newyork School）。“纽约平面设计派”成员我们主要谈的是这个流派中的领头人—保罗兰德（Paul Rand）。因为谈平面设计史，史太浓认为难以绕过这么一位人物。美国设计师保罗兰德保罗兰德活跃于设计行业长达 60 年，曾因为接受苹果公司创始人乔布斯委托设计 Next 软件公司的标志而“出圈”，其中“只出一稿，绝不修改”的事迹为圈内人津津乐道。这个标志在 1986 年就要价 10 万美元，乔布斯还非常满意，是什么样的经历造就了保罗这样的底气与才情，我们今天来一起了解他的故事。保罗设计的 Next 品牌改名的娃娃脸保罗·兰德生于美国一个信仰东正教的犹太家庭，时间恰好是一战开打的 1914 年。他的父母以经营小商店为生，据说在保罗 3 岁时候他就喜欢拿着纸笔去临摹父母小店里的一些商品广告，这样的传奇小故事基本都是名人的标配，如此一来才更好解释他日后成就的根基所在。关于保罗的一些求学经历，多数资料都是一笔带过，所以应该没什么特别异于常人的表现，青少年时期的保罗有着一张非常讨人喜欢的娃娃脸，看上去特别有亲和力，这样的脸在他晚年则变得非常的慈祥与可爱。年轻的保罗·兰德他曾经在过好几个地方学习，分别是普拉特学院（the Pratt Institute）、珀森斯设计学院（Parsons School ofDesign）及纽约艺术学生联盟（the Art Students League），时间合计有 5 年左右。期间他比较著名的导师有来自德国的艺术家乔治·格罗斯（George Grosz），此人曾经是德国达达派的成员，后来保罗在平面设计中表现出的一些拼贴形式相信就来自格罗斯的影响。格罗斯及其作品1934 年保罗开始正式参加工作，第一份工作是帮家乡布鲁克林（Brooklyn）的一个工会提供插图绘制，然后工会会将这些插图出售给不同的报纸与杂志，也因为这样他后来被这些相关杂志公司“挖走”。这个时期他做了一件重要的事情，就是改名字，保罗原名其实叫“佩雷兹·罗森鲍姆”（peretz rosenbaum ），这是一个典型的犹太人名字，1930 年代作为一名犹太人处境是比较艰难的，当时反犹情绪高涨，尤其欧洲更加严重，这样一段历史相信大家并不陌生。保罗的插图设计所以保罗为了避免自己的犹太人身份给自己带来不必要麻烦，才将名字改为“保罗·兰德”。这个名字后来被后世评论家认为如同一次成功的“品牌命名”，因为美式英文中，相较旧的名字而言，Paul Rand 朗朗上口，好读好记，容易给人留下印象，是一个易于传播的“品牌名”。自成一格的设计保罗后来主要以品牌设计成大名，但早期主要从事书籍杂志、插图与广告方面的设计为主。保罗的报刊杂志设计资料显示，保罗大致从 23 岁开始就为美国一系列杂志报刊提供过设计服务，比如《老爷》、《服装艺术》（Apparel Arts）、《玻璃包装》（Glass Packer）等等，此时他就开始在相关平面设计中体现自己独特的风格。保罗设计的《服装艺术》杂志封面那时候他对欧洲盛行的各种平面风格都已经很熟悉，比如以包豪斯为首的现代主义，横跨艺术设计领域的立体主义，达达主义、超现实主义等流派。但他没有完全在工作中复刻这些风格，他注意到一个更深刻的问题，就是平面设计需要面对各种各样的人，除了知识分子，更多的是平民大众，过分精英主义的艺术风格或者过于刻板的现代主义都并非最佳选择，而应该更加有趣、生动、让人喜欢。保罗设计的杂志封面他这种想法跟他身处美国社会关系很大，美国作为一个移民组成的新国家，文化基调上有两个比较大的特点：其一是我们之前也反复说过的实用主义，讲究实在的价值。其二就是普遍乐天派的性格，如果大家身边有美国朋友也许有感触，他们往往很开朗，特别容易哈哈大笑，笑得身边人也会乐起来。这样两种文化特点形成的原因难以深究，留待其它朋友补充，但如此一来让他们在平面设计上就凸显出一种追求幽默感的倾向。保罗活泼的平面设计所以保罗兰德为了让自己的平面设计在美国受到欢迎，就体现出一种活泼、引人注目、喜欢开玩笑的特色，具体表现是简单诙谐的象征图形运用，流畅自由的手绘元素加持跟恰到好处的拼贴形式。他这种设计个性按史太浓的理解属于对欧洲流行风格的一种彻底内化，立体主义、达达主义跟现代主义都像维生素一般被他吸收，其中还可以找到德国“海报风格”（Plakastil）那种简约却富有内涵的表现手法。德国“海报风格”平面设计保罗身处时代洪流却不希望被大众牵着鼻子，当时源自瑞士平面风格的国际主义已经在美国逐渐变得很强势，但他认为这样的风格不过是设计表现的一种形式，不应该是唯一的形式。保罗的平面设计除了前面谈及的特点，还有让人看上去 “排版很大胆”这样的感受，这一点其实很突出，大家经常会被他一些跳跃的版面安排所震撼，不敢想象元素可以这样安排。保罗的版面风格这样是一种“艺高人胆大”的表现，保罗那些表面看去随意的设计其实有深刻的逻辑性考虑，而且存在有别于国际主义类型的“次序”，和谐、新颖、视觉冲击力强。这样的风格就成了“纽约平面设计派”一种基本设计调性。1941 年到 1954 年期间属于保罗的广告设计时期，这个阶段他服务于美国“温特劳伯广告公司”（theWeintraub advertising agency），从广告设计师做到了艺术总监。中年时期的保罗这样的选择跟时代相关，因为战后广告业开始在美国蓬勃发展，情况和如今一样，我们也经历了广告设计、网页设计、UI 设计轮番成为企业主要宣传物料的变化，其中也包括设计软件、流行风格的更新切换。在保罗的广告设计时期，他为当时美国一系列大型公司设计了诸多成功的广告，比如奥赫巴赫百货公司（Ohrbach‘s department store）促销广告，意大利奥里维蒂打字机公司（Olivetti Corporation）的产品广告等。保罗设计的奥赫巴赫百货公司促销广告这些作品为他赢得了行业名声，此时企业形象设计又开始兴起，他在 1954 年 40 岁时候离开广告公司开始创业，设计重心从广告平面转移到品牌设计，开启事业的第二春。品牌设计生涯我们现在普遍熟悉的品牌视觉系统（VI）其实不够 100 年的发展历程，史太浓后面会有专门章节讲述这段历史，本次我们先从保罗的故事中初步了解，他是这段历史的重要参与者。保罗设计的奥里维蒂打字机公司广告平面设计除了公益活动、政府宣传之外，主要社会职能就是配合市场营销，过去一般的体现是海报与书刊杂志，还有配套的产品物料。而在二战之后，因为大型企业的国际化需要，大家发现品牌形象的系统设计显得非常重要，其优势体现在视觉识别性、设计系统性与品牌资产积累方面。其实保罗在广告时期就做过不少品牌设计，属于比较早期从事这方面探索的设计师，1946 年（关于这个年份有几种说法）他出版过一本名为《关于设计的思考》（Thoughtson Design）包含设计思想的案例集。书籍《关于设计的思考》里面就囊括不少企业品牌设计，但这方面的设计属于品牌系统发展的初级阶段，比如以标识为主，系统性方面欠佳，但这本书经过若干年的发酵足以让他赢得市场信任与认可，敢为人先往往能赢得一个新跑道的红利。当他自行创业后，很快收到不少美国大企业的的品牌形象设计委托，比如 IBM、西屋电器（the Westinghouse Electric Corporation）、联邦快递（United Parcel Service）、美国广播公司（American BroadcastingCompany）等，这些案例都获得客户与社会的一致好评。保罗的品牌设计我们以 IBM 为例讲述一下，其实互联网上有很多文章讲述这段故事，但大部分存在年份混淆问题，史太浓本次讲述以保罗·兰德美国官网的资料为准。首先要说明的是，当时 IBM 的主营业务是商业机械，同时已经在电脑生产领域占领了重要优势。IBM 的标志在保罗手上一共设计修改过三次，第一次在 1956 年，保罗将其标识字体进一步优化，字体原型来自德国设计师乔治·川普（Georg Trump）一款名为“城市媒介”（City Medium）带有粗厚装饰性的典雅字体。IBM1956 年时期的设计保罗设计的这款 logo 有一个重要应用特点，就是基本形象不变，但是具有多种变化形式，比如描边的、实心的、描边粗细不同的，带有方框底色的，带有方框底色反白的等等。保罗的说法是允许不同部门根据需要自由使用，我们如今做 VI 对于 logo 多组合已经习以为常，但当时这样的想法是先进的，而且要把握变化的“程度”难度很大，标志一成不变或者胡乱改变都会产生严重的品牌设计“翻车”问题。跟这个标志配套的还有一本“简便使用规范手册”，比如字体的使用有规范，logo 用在不同版式上有示范效果图等，册子是不断更新丰富的，到了 1960 年代发展成《IBM 设计指南》，这样的手册就等于现代 VI 手册的基本形态了。IBM 品牌物料保罗这样的设计考虑有效控制了企业日常设计中的“乱作业”，为 IBM 品牌在全球推广中产生了良好且深远的作用。第二次修改是 1965 年，在原 logo 基础上切分为 13 道“杠”（正负图形），第三次修改是 1970 年，将 13 道“杠”改为 8 道，其中原因碍于篇幅就不探讨了，大家可以自行了解。IBM 标志的变化可以肯定的一点是，保罗的品牌设计看上去似乎平平无奇，甚至有人会认为丑，但其实都有着极具说服力的底层逻辑，而且能解决一些大的问题。这方面大家可以在互联网上检索乔布斯委托其设计“Next”品牌时候的相关视频，视频中保罗有着幽默干练的说案口才，而史太浓印象最深刻的其实是乔布斯的一段相关回忆：保罗跟乔布斯说：设计的专业问题是我考虑的，而设计完成后是否使用是你们考虑的，费用一分钱都不能少。乔布斯身穿带有 Next 标志的 T 恤今天的故事讲到这里，感谢各位，下期再会！用一篇文章，帮你掌握美国平面设计史在 20 世纪 30 年代时候“图形传达系统“传到美国，对美国地区的平面设计产生很大促进，我们今天的话题就需要将镜头移到美国。阅读文章 > 欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/paul-rand-3
用户 信息 气味 编者按：用户是怎么判断点击A链接而不是点击B链接？这个事情背后的逻辑又是怎么帮助设计师更好地设计链接？用「技巧」骗点击的「标题党」为什么是一笔不划算的买卖？信息气味理论就是这背后的答案。下面这篇文章出自用户体验/交互设计领域的权威 NNGroup，一起来看吧：互联网本质上是借助又一个的超链接连接到一起的。但是，当用户看到一堆链接和按钮的时候，他们会下意识点击哪个？答案是，「信息气味」决定用户的选择。就像美食会吸引老饕一样，「气味对」的链接会更容易吸引用户点击跳转。而「信息气味」就是「信息觅食理论」当中，最核心的概念，而这个概念非常清晰地解释了用户在网上如何同潜在的信息源进行交互，并且从中找到满足自身需求信息。简而言之，用户是怎样衡量这些链接「提供答案的可能性」，并且预测「如果跳转了那么多久能够获得答案」。那么对于信息气味，可以这样定义：信息气味是用户对于信息源的不完全估计，而评估的佐证则来源于这个信息源的外观。在网上，信息的来源通常是以网页链接的形式存在的，当用户考虑是否要点击这个链接的时候，链接所附带的标签、概述、上下文环境，甚至其他的背景信息（比如是谁推荐的），都会影响到这个信息源「散发出的气味」，这也决定这个页面是否会被用户选中，并且点击。将我们日常获取信息的方式和捕猎觅食来进行对比把。比如说，获取食物的区域是草原，那么觅食者（比如人类）在提枪打猎之前，还会考虑到一些额外的因素（比如之前狩猎失败的经历），即便这次要捕猎的猎物非常吸引人，也有可能因为之前的经历而感觉艰难，甚至会认为此次狩猎是不成功。通常而言，信息气味通常会涉及到四个概念：「实际来源」(网页或者草原)，「实际外观」（猎物或者连接呈现出来的外观和气味）。然后，就是它的「实际价值」（直到获取之后才能判断出猎物或者网页的实际价值）以及「预估价值」(事先评估预测的价值，并由此决定是否要点击或者狩猎)。接下来，我们详细剖析一下每个因素。构成信息气味的要素我们之前已经看到的，信息气味大体上由2部分构成：「用户看到的部分」（页面上已经给出的信息）和「用户已知的信息」。前者很大程度上是又设计师所直接决定的，而后者则由设计师在过去借助品牌和其他因素来塑造「感知价值」，借此间接控制。用户可见的部分链接标签文本这应该是信息气味当中哦功能最重要的部分了，链接的标签文本应该足够清晰明确，如果名称过于晦涩和模糊，用户可能会错过一个优质的信息来源。如果这个文本，和用户的目标高度相关，那么对于用户而言它的信息气味就足够高，用户也有很大可能性点击它。如果它用了目标受众不理解的词汇，那么它的信息气味会变低，这也是为什么我们有必要规避行话、属于和过于复杂的词汇，并且为所有的用户提供足够易于理解的提示。上面是思科的网站，其中的标题就是一个标准的反面案例，NGFW 代表了下一代防火墙，是思科对于自家防火墙技术的别称，AnyConnect 则是一种 VPN 服务，Duo 则是一种多因素身份验证服务……注释：在 UX 设计当中，我们会使用「这个标签信息气味低」这个表述来描述某个链接的标签文本，让人很难猜出其背后的内容到底是什么。而当一个链接的标签文本可以较为清晰地表述其背后的内容的时候，会使用「链接信息气味很高」这样的描述。不过这个表述是有针对性的，看同一篇文章的用户可能会有不同的目标和需求，对于一部分用户有较高信息气味的链接，可能对于另外一部分用户而言，信息气味很低。但是无论如何，一个好的标签文本的描述总是相对准确有价值的，它至少帮助用户规避了问题，不至于点击链接之后感到失望。链接的附带内容通常，链接总会附带一个简短的说明或者摘要文本和缩略图 ，它们存在的目的是向用户更加全面地展示。即使用户可能不会阅读全部的文本，但是依然可以在快速的扫读过程中，了解到其中的信息和线索，而这些附带的内容就是增加链接信息气味的组成部分。这意味着2件事情：1、文章的摘要文本应当能够传达出链接背后文章的要点，能够辅助链接传递信息。糟糕的摘要内容对于网站而言，是浪费位置，对于用户而言是浪费时间，因为网站无法正确向用户传达文章的价值。正如你在上面思科网站的案例中看到的，摘要内容对于晦涩的标题链接毫无帮助。2、与链接相关联的图片内容应该是具有描述性的，能够传达链接背后文章的属性、类别、内容。很多网站会选择与网站内容关联性较低的图片。比如 utterhealth.org 网站所选取的图片和内容就是低关联度的，仅仅具有装饰性。当然，即使选择了相关的图片，也不总能达到效果，因为这还存在一个相关度的问题。这一问题可以追溯到 1970 年代 Eleanor Rosch 的研究。比如，鸡属于鸟类，但是使用鸡来作为一篇鸟类文章的标题，效果不如使用知更鸟的图片，因为知更鸟的图片更容易让人联想到整个鸟类。因此，在选取图片素材的时候，不要将美观和方便作为唯一标准。在 Costco.com 的网站上，咖啡和甜味剂这个分类所用的图片，不具备代表性，所以除非用户使用搜索引擎或者恰巧看到，才有可能找到这个类别的产品。链接所在的上下文环境通常，页面中的内容会影响用户的感知方式。比如，当你正在寻找「圣诞节餐具」相关的内容，那么当这个词出现在 HarryandDavid.com 和 Williams-Sonoma.com 这两个网站上的时候，你会发现在 Williams-Sonoma.com 上，这些链接内容的信息气味会明显更浓郁一些，因为页面上不仅能够知道这些关键词，而且能够找到其他圣诞相关的物品。相比之下，HarryandDavid.com 的信息气味明显会低很多。在 HarryandDavid.com 这个网站上，从页面文本/链接到图片内容，都使得圣诞餐具相关的信息气味较低。相反在 Williams-Sonoma.com 上，各种图片和链接都围绕着餐具，明显信息气味会更浓郁。尽管上下文环境是一个强有力的提示，但是设计师经常会过分依赖它，从而带来一些别的错误。特别是在小屏幕上，上下文环境不总是可见的，有的时候可能是用户页面滚动太快，或者被别的元素盖住了，因此最好还是老老实实的做好分类和链接标签文本，而不是靠上下文环境来提供提示。在移动端上， Williams-Sonoma.com 的分类标签相对更难找到「圣诞节」的词，可见的上下问环境要比桌面端差很多，而 HarryandDavid.com 则使用了「圣诞礼物」这样的词汇，更方便用户找到相关类别。另外一个常见的错误，则是没能及时提供上下文提示。我们经常能看到网站的着陆页没有文字，就一张超大的图片，也许其中包含了高相关的信息，但是较少的文本使得绝大多数这类页面很难让用户觉得自己走在正确的道路上。所以用户不再费心寻找信息，觉得页面没有探索的价值，然后做出决策——直接离开页面。PosturePillow 这个着陆页确实有公司的名称和 LOGO，图片和产品（枕头）也确实高度相关，但是对于用户而言，这些信息是远远不够的，用户过来甚至不知道要点击哪里。上下文环境的影响还和位置相关，比如侧边栏上显示的信息通常会更容易被忽略——用户很清楚侧边栏上出现的图文有大概率是广告，因此即使在侧边栏上提供有效信息，依然可能会失去相关度。用户知道的部分信息气味的另外一个组成部分，是用户对于这个品牌过去的认知的积累——无论是用户亲身经历的、看过的内容，还是通过网络了解的到，抑或是借助朋友口耳相传听闻的信息。和直接看到的信息不同，这部分属于先验知识：熟悉品牌并信任它。如果您已经了解 Williams Sonoma 并且之前可能和这个品牌进行过互动，比如买过东西，那么即使没有其他的上下文信息，你也将能轻松理解其网站上的「圣诞节」代表什么产品。又或者，如果您过去用过思科的产品，并且有过很好的体验，那么你可以明白点击的链接的含义，即使链接标签的描述性不是很强。熟悉这一领域。如果有本科生去申请大学，那么他可能知道所谓的通用数据集的（其中包含大学发布的有关每年入学本科生的统计数据——详细说明考试成绩范围、GPA 以及不同的录取标准等），而这些信息通常位于大学网站的托管金融相关信息的部分。所以，对于那些熟悉这套体系的人而言，比如财务副校长办公室的链接标签，可能具有很高的信息气味，但对于第一次听说公共数据集的人来说，这个链接名称可能没有太大的意义。通用数据集包含有关录取新生的 统计数据以及有关录取标准的信息，通常托管在大学网站的财务部分，如上面加州大学伯克利分校（顶部）和加州理工学院（底部）的网站所示。但是，对大学招生一无所知的人将无法获得此类背景信息。社会觅食理论：口耳相传和推荐的逻辑社会觅食理论是信息觅食理论的延伸，它解释了人际关系网络如何协作，人们是如何获取信息的。这些人际关系网络可以是有组织的（比如科学家借助网络社区或者论坛在一起研究相同的问题）或临时的（比如维基百科的内容贡献者、亚马逊产品评论区的评论者、协作标记系统上的标记者）。这个理论探讨的是，当人们寻找信息或与信息进行交互的时候，他们会为其他人留下关于各种信息源的痕迹，这些痕迹能有效地增加其他用户的信息气味。假定你正在亚马逊上寻找直发器，你选择一个用户评论并且通读了整篇，然后有个评论说，这种直发器很好，但不如另一种。然后你返回搜索结果页，然后搜索第二个产品的信息，通常会让您倾向于点击它并将它纳入考虑范围内，即使它比第一个更昂贵。那是因为该产品现在带有额外的信息气味，而这种信息气味是由第一个直发器的评论者提供的。为何时间一久点击诱饵就失效了现在你已经了解了信息气味各个不同组成部分，你可能会想通过游戏来吸引用户访问网站，即使这可能并不完全适合用户的需求。（这种方法通常是在点击量这类等虚荣指标驱动下产生的）也许你手头有一篇无聊的文章，然后打算想一个与实际内容不匹配、但是蹭了流量的有趣标题。这种方法从长远来看可能是适得其反的。这种方式骗到的点击量，从长远来看，消耗的是用户的信任。是的，你会得到你的点击，但与此同时，你会耗尽访问者的信任。这就像狼来了的故事一样。用户被一次又一次地欺骗，学乖了。更糟糕的是，有的用户甚至没有亲身「被骗」，但是他们可能在别的评论里面看到抱怨，这意味着这个链接在他们身上甚至骗不到一次点击。另一方面，如果品牌足够强大，用户足够信任，就有更多的犯错空间（但是其实空间本身也不大，因为犯错是一定会侵蚀品牌价值，甚至一次犯错就能葬送整个品牌）。但是基本上，如果你能提高用户对于网站内容的期望，同时借助标签文本、图像来辅助内容，并且网站确实有他们想要的东西……那么起码用户会偶尔对于网站内容的不足予以原谅。延伸阅读：从 4 个角度，聊聊长尾效应是如何帮助产品进行提升的编者按：长尾效应不是一个陌生的词汇。阅读文章 > Facebook 被上亿人指责的背后，可能是因为坎贝尔定律编者按：从 KPI 到 北极星指标，设计和产品团队都非常着迷这种杀手级关键性指标。阅读文章 > 资深设计师是怎样用「帕累托原则」做设计决策的？编者按：这篇文章出自设计和用户体验设计机构 NNGroup，作者为 Evan Sunwall，主要探讨的是「帕累托原则」也就是我们所熟悉的 80/20 原则。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/information-scent
品牌 小米 黄金 作为用研同学，经常接到品牌研究的相关需求，例如期望通过研究了解目前业务的“品牌力”或“品牌心智”，而其中“品牌”是一个大家经常谈论，但是每个人的理解可能又各不相同的概念和工具，到底应该如何了解品牌？品牌的沟通有没有什么基本法则可以依循？我们又该如何评估一个品牌是否发挥预期的功能？通过这篇文章，我们将通过黄金圈模型一起探索这些问题的答案。品牌排行常胜军在当今商业环境中，经常可以看到许多市场研究机构或是权威媒体发布的品牌排行榜，不难发现其中有些品牌总是能在不同的榜单排名中都占有一席之地，这些品牌一般被认为拥有一定的市场地位，通过品牌的号召力不断获取商业回报。但在查看榜单的同时相信大家也会非常好奇，世界上海内外成千上万个品牌，为什么是这些品牌入选，为什么有些品牌能激励人心，带来持续的转化与用户忠诚，他们做对了那些事情，可以获得巨大的成功，以下我们试着拆解一些品牌的做法，尝试从中探寻品牌成功的秘密。成功品牌的秘诀国内外成功的品牌很多，如果讨论到消费性电子，我们经常会想到一个品牌——小米。有稍微关注小米品牌动向的同学，相信不难发现2020年和2021年，小米的创办人雷军先生都做了年度演讲，如果更仔细一点去看这两年的演讲，会发现和之前几年年度产品发布会的内容结构上产生了很大的不同。对于小米发布会，很多人最有印象的一句话相信会是——“不服跑个分？”，也就是通过跑分数据的对比来展现自家产品的优势。而这两年，一上场竟然先跟我们谈起了梦想。——“我的梦想，我的选择”。感觉和产品好像没什么直接关系，所以我们不妨先往下看完这两年的演讲内容，尝试去了解这个巨大转变背后的底层逻辑，最后再回来审视这两年的年度演讲对于品牌建设和管理有什么启发。雷先生说他的梦想是“让世界上每个人都能享受科技带来的美好生活”，白话点说就是他相信通过科技的力量可以为每个人带来更好的生活，这也是小米正在做的事。那这个梦想具体要怎么实现呢？怎么让全世界每个人都能享受到科技带来的美好生活呢？相信不少人听过小米主打的极致性价比，用雷先生的话说就是“感动人心、价格厚道的好产品”，也就是说小米实现梦想的方法是通过做出让大家买得起的产品来达成。但是再下一步我们就会想问，这样的产品具体要怎么做出来呢？他认为做好产品首先必须找到最好的人才，并且用互联网的思维打造手机产品。而当时创业的时候，他认为互联网行业最厉害的公司是谷歌，因此就决定要从谷歌寻找最顶尖的人才。他马上开始约谷歌的工程师和他们聊创业计划，希望邀请他们加入小米，但是从第一个聊到第十个，每位工程师都婉拒了加入小米的邀请，他们认为当时的小米在手机领域缺乏经验，也没有行业巨头的支持，对于这个创业计划普遍并不看好。但是雷先生失望之余依然没有放弃，终于在和第十一位谷歌工程师聊了好几个小时之后，说服对方加入小米，一起打造手机产品。雷先生就用这样锲而不舍的态度成功组建了初始团队开始研发产品。有了人只是第一步，第二步就是产品的打造了，雷先生说小米在产品上也卯足了全力，每一次新产品的迭代都是一次巨大的投入——“我们投入10亿人民币，相当于重新创业，不惜代价死磕体验，并且要细心打磨所有细节，而最终我们又成功做出了一款产品，这个产品就是小米10，那你要不要买一台？”一直看到了这里我们忽然发现，雷先生从自己的梦想和小米的使命开头，又说了找最好的人做好产品的过程细节与方法，最终才亮出产品。这个三段论内容和一个经典模型——黄金圈的叙事逻辑是完全契合的，通过讲述第一步WHY：我们为什么存在、第二步HOW：我们是如何做到、第三步WHAT：我们是做什么的，建构黄金圈Golden Circle的沟通逻辑。如何用经典的「黄金圈法则」，帮你快速完成需求分析？前言西蒙·斯涅克在他的《从“为什么”开始》一书中提出了“黄金圈法则”的概念。阅读文章 > 至于这套沟通方法为什么有效，其实也是有理论支撑的。提出黄金圈模型的是知名商业作家 Simon Sinek，他认为最能创造消费者忠诚的品牌都遵循黄金圈的沟通模式，先从品牌的理念出发，通过感性的方式和消费建立连接，再通过理性沟通具体的专业能力和方法，最终才推导出解决方案，也就是产品。为什么这样沟通会有用，我们可以将人脑的功能区和黄金圈模型做个横向对照，人脑是由内层的脑边缘系统（Limbic Brain）和外层的新皮质（Neocortex）所组成的，其中脑边缘系统负责人的情感、信任和忠诚，掌管控制决策，而新皮质负责理性分析和语言能力，但并不是决策的核心。而黄金圈从感性的品牌使命出发，正是从掌管决策核心的脑边缘系统开始进行沟通，然后逐步往外完成整个沟通的过程，消费者在了解品牌及商品信息的过程中每一步都能被说服，因此促成了最终的购买和品牌忠诚。我们又尝试去拆解了几个国内外受欢迎的品牌，比如底下的奈飞、多芬和农夫山泉，发现都符合黄金圈模型的思维，显示对于品牌在建构消费者长期的喜爱和忠诚度方面是很好的一个参考框架。没有万能的框架虽然我们前面讨论了很多不同品牌的营销沟通内容都能找到黄金圈模型的痕迹，但是也并不代表这个模型就是一个万能公式，任何品牌只要套用了这个方法去沟通就都能成功。实际上就拿我们前面讨论过的小米品牌来举例，小米也是一直到近一两年才开始沟通创始人的梦想和品牌的价值使命，比如 2021 年小米 11 的 slogan 是“相信美好,轻装上阵”，但如果回到初代小米，当时的 slogan 可是“全球主频最快的智能手机，为发烧而生”，说明在此之前小米这个品牌一直沟通的重点都放在黄金圈当中的 HOW 和 WHAT 的层面，而小米这些年的成功也反映了在当时的手机市场仍然存在技术进步的巨大空间，通过诉求技术的差距可以和其他品牌做出差异化，因此简单直白的讲出自己和行业的技术差距就可以有效争取到消费者。但随着手机品牌之间技术差距不再明显，这时候小米选择切入品牌理念的层面，诉诸科技带来美好生活的品牌理念来形成和竞争对手的差异，打造出品牌心智的差异化，进一步吸引认同这个价值的消费者。综上所述，没有一个模型是万能的，但是我们可以从不同的思维模型中提炼思路，结合目前品牌所处市场阶段和竞争情况，提出最合适的发展路径，如此才能成就品牌的长远发展。后续大家也可以通过今天介绍的黄金圈模型去梳理看看自己认识或是喜欢品牌的营销沟通内容具体在沟通哪一个阶段的诉求，以后再次看到各个不同品牌的市场营销事活动或内容时，就可以通过这个模型快速理解品牌的沟通策略，建立自己的品牌运营思维框架。讲不清楚设计方案？试试高手都在用的黄金圈法则！每次见到别人讲设计时，说得头头是道。阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/brand-building-logic
表情 缩略图 画师 农历虎年越来越近，家中挂起的条条腊肉，街边装饰的串串红灯笼，都让过年的氛围越来越浓，大家想放假的心情是不是也越来越迫不及待了呢？别急，放假前先收下小编特意为大家准备虎年“hú”利吧！周围的一切都带上了年味，大家日常交流必不可少的表情包自然也要跟上步伐啦！优设大课堂手绘讲师小光老师的「年啊虎」表情包已经在微信上架，一套 16 只高质量小老虎，形态各异，可爱又吉利，可以说是春节必备表情包了！感兴趣的小伙伴在微信表情搜索“年啊虎”就可以免费下载使用了~小光老师的「年啊虎」微信表情包作为优设大课堂的资深插画讲师，小光老师拥有扎实的绘画功底及多样的画风。他在武汉疫情期间创作的插画《百毒不侵，诸邪莫近》被央视网、新华网等各大官网转发点赞，腾讯、安踏等大品牌也都邀请他进行合作；奥运期间创作的各种生动可爱的奥运人物形象更是多次被运动员本人翻牌，受到诸多关注。想看小光老师更多作品可以关注小红书@插画师小光sir，微博@插画师小光sir，约稿商务合作加微信：guangsir6666小光老师在微信已经上架了 3 套可爱且精致的表情包，今天为大家介绍的「年啊虎」就是其中之一。之前有很多小伙伴表示对微信表情的上传审核过程有疑问，借「年啊虎」上架，小光老师特意为大家准备了微信表情包上架全攻略， 详细讲解微信表情开放平台上传及审核的要求和注意事项，一起来看看吧！微信表情制作规范微信表情开放平台接受静态表情及动态表情的投稿，投稿形式接受单个表情及表情专辑，表情专辑只能是 16 个或 24 个表情一组。所提交的表情必须为设计者原创，或者拥有版权。表情也要生动有趣，适合在聊天中使用。上传一套表情包可不是只做十几张表情图就可以了，还有很多其他素材需要提供。除了表情主图外，还需要提供表情缩略图、详情页横幅、封面图、聊天面板图标，想开通赞赏功能还需要提供赞赏引导图。不同素材的规格要求都不相同，下面一并为大家介绍。1. 表情主图表情主图是最终在聊天界面发送的图片，数量只能是 16 个或 24 个，尺寸为 240*240px，文件不大于 500KB，格式必须为 GIF。同一套表情主图须全部是动态或全部是静态，动态表情需设置为永久循环播放。需要注意的是表情包里的形象轮廓要有 2px 的白色描边，以避免表情包最终呈现时会有边缘锯齿。另外形象不能与边缘相切，配图的文字识别性要高。这些要求平台虽然没有明确规定，但是在制作的时候一定要注意。2. 表情缩略图表情缩略图是在聊天页和详情页展示的静态小图，数量需与表情主图一致。单图表情包的缩略图尺寸为 240*240px，表情包专辑的缩略图尺寸为 120*120px。单个文件都不能大于 200KB，格式必须为 PNG。注意缩略图不能有白色描边哦！3. 详情页横幅详情页横幅是点击进入整套表情详情页时展示的图片，数量 1 张。尺寸为 750*400px，文件不大于 500KB，格式为 PNG 或 JPEG。注意选取的图片不能为透明底，背景色不要用白色或接近白色的颜色，也不要带任何文字。4. 表情封面图表情封面图是每套表情在表情首页展示的代表图片，一定要选择能凸显表情包特色的形象。数量 1 张，尺寸为 240*240px，文件不大于 500KB，格式必须为 PNG。需要是透明底，也是不能有白色描边。5. 聊天面板图标聊天面板图标是指表情包下载成功后，在聊天页表情列表中展示的图标。数量 1 张，尺寸为 50*50px，文件不大于 100KB，格式必须为 PNG。图标需是透明底，不能有白色描边。6. 赞赏引导图微信表情有赞赏功能，开通即可接受打赏。需要开通的小伙伴可以做 2 张赞赏引导图，2 张图片用处不同，尺寸不同，可以加上文字进行引导。如果最终上传的文件中没有赞赏引导图，会被默认为不开通赞赏功能哦。表情包上传审核准备按规定准备好各类素材后，就可以开始进行整理打包啦。素材命名示例1. 命名规范图片按用途分别命名，表情主图与缩略图数量较多，则分别用文件夹收纳。表情包主图与缩略图必须要按数字编号进行命名，且缩略图要与其对应的主图命名一致。若表情主图按顺序命名为：01, 02, 03 ……，则表情缩略图命名也应按顺序为：01, 02, 03 ……。表情主图与缩略图命名示例2. 艺术家主页在上传表情包审核时，也需要准备好自己的相关信息与资料，以及个人艺术家主页所需要的素材。这些素材的要求没有表情图那么多那么严格，大家按微信表情开放平台官方给出的要求上传就可以了。微信官方发布的艺术家主页所需的素材及规范审核注意事项所有的图片素材准备好之后，就可以按照官网上的指引上传了。上传审核之前一定要仔细检查各项素材的规格是否符合官方要求！否则一旦有一小处不合要求被驳回，修改后又需要重新开始等待审核，非常浪费时间哦。表情包提交后需要 1-2 周的时间才会有官方的审核结果，关注微信表情开放平台公众账号可以了解最新的进展。如果比较急或者很长时间没有得到官方回复的话，大家可以主动发邮件到官方邮箱 wxsticker@tencent.com 询问进度，一般都会较快得到反馈。以上就是小光老师为大家准备的微信表情包上传全攻略，是不是超全面超贴心！有上传想法的小伙伴们赶快试试吧！不懂的地方可以在评论中提出，小编会及时为大家解答。喜欢这期攻略的小伙伴记得点赞收藏，大家热情越高，小编就越有机会请更多优秀的设计师和插画师为大家分享专业有用的知识哦~如何设计微信红包封面？从零开始教你定制微信红包封面关于我：优设百万人气插画师 / 知名IP商业画师 / Wacom大赛评委 / 擅长IP形象、潮流插画、分镜设计、爆款漫画等。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/wechat-emoji-design
用户 提示 输入框 前言键盘输入相对于点击选择来说，是一种操作成本很高的动作。输入格式错误、输入内容超出范围、内容删除方式（是否需要一键清空），都是值得探讨的点。本文将分类讨论关于文本框输入超出限制时的一些状况和思考。基础篇：「这个控件叫什么」系列之输入框/文本框/Text fields@龙爪槐守望者 ：Text fields（输入框/文本框）是一个历史悠久而经典的控件，当光标位于输入框时，用户可以在其中输入或复制粘贴文本、数字等内容。阅读文章 > 什么场景下需要/不需要设定输入限制？为什么？短文本场景：需要进行输入限制（如常见的账号、密码、标题等）原因分析：认知层面：减少浏览时的认知和记忆负担语义层面：比如商品名，本质是形容词+名词的结构，理应不会太长阅读层面：移动端屏幕空间有限，用户注意力难以集中，不必要的长文本根本不会被读展示层面：简单粗暴，文字太长会放不下长文本场景：需要分类讨论，有限制和无限制都有可能。有输入限制的原因：可能是为了营造一种更轻量的阅读和表达体验。如微博之于博客。避免过度描述，读者的注意力不够支撑，意义不大。无输入限制的原因：无法预测用户将要输入的信息量，因此不设限制，让用户畅所欲言。用户输入的信息与业务密切相关，如商品评价会对商品成交有显著影响，因此不应该限制用户的点评。如果不需要输入限制，有哪些交互方案可选？不论是单行输入或是多行输入，输入框的高度都不发生变化。常见于搜索模块和点评模块。随着输入内容的增加，输入框的高度也相应增加。由于键盘占据一定高度，因此要设定输入框高度的最大值。如果需要输入限制，有哪些交互方案？直接无法继续输入内容，无提示。见于微信的设置备注与设置名字。当输入量濒临极值时，出现高亮的字数提示，在不打断用户的输入流程的情况下，用较为安静的方式提示用户。当输入量超出最大值时，可以考虑用：toast 提示，告知用户已经超出字数（抖音）用高亮文案告知用户，已经超出范围，需要删除部分内容（脉脉）当用户点击行动点后，方才提示用户字数超标（朋友圈）三种方式的强调程度：高亮文字 < toast < 对话框分段提示微博采用了分段的形式进行提示：正常范围，字数弱提示超出 140 字，字数高亮字数来到第二档位，提示转为头条文章超出字数上限，点击发布后，会有对话框提示总结虽是非常细小的交互点，同样需要仔细思考，把场景分析清楚。让设计更加有理有据。感谢阅读。欢迎关注作者微信公众号：Change Design本篇来源：优设网原文地址：https://www.uisdc.com/text-box-input-restriction
上图 自己的 来源 竞品分析，成本低又容易实施，可能是大家日常工作中最常见的调研分析方法了。我帮大家点评作品集看过很多竞品分析，还上过竞品分析的网课。然而有一个反复出现的问题，尤其是那种套模板做出来的竞争分析难以避免的：把竞品分析做成了分析竞品。感觉只要找几个竞品，把视觉、布局、信息架构、操作流程……统统分析一遍。没有方法框架、也没有行动目的，最后更是没有为项目提供什么有价值的信息。跟写作业一样，只要字数够多，“老师”就不会给低分……这样做竞品分析未必能对项目本身提供什么帮助，关键是费力不讨好，很难以此获得领导和团队的认可。好端端的脑力工作，被硬生生地扭转成了“计件模式”体力劳作，有意思吗？其实竞品分析是一件很有意义的事情，尤其是在竞争激烈的赛道，可以说是知己知彼百战不殆的关键所在！那究竟要怎么做，才能做出有价值的竞品分析呢？我总结了四个关键点给大家参考：主动挑选竞品我做竞品分析的第一步，肯定是挑选竞品。道理都懂，但是很多人并不会特别上心，大多是听别人说 XX 值得参考，就去看看。或者到网上大概搜一下关键词，搜到几个靠前的就纳入考量。这种都不能算是有效的主动挑选，只能说是道听途说。真正有效的主动挑选，一定要是：1. 有目的确定符合哪些条件可以作为竞品，还可以先划定范围。例如视频类 APP：首先就得区分长视频还是短视频然后就还可以明确一下，内容是购买的节目，还是用户自制内容如果竞品够多，可以进一步细分到内容题材……你可以写出来，为竞品预先划分几个级别，优先参考最高级别的。2. 大范围至少要从全国市场寻找，更大一点的可以看全球范围。而且不能只看主流产品，不知名的小众产品里也可能有自己的特色。搜寻的方式不建议直接百度关键词（太多广告而且缺乏数据），可以去应用商店看分类排名、查看相关行业报告或者数据平台。3. 有筛选按照上面那种大范围挑选，肯定会找到非常多个竞品，不可能全都分析了。所以把他们收集后，就要按照一定的规则进行排名，然后根据自己的时间精力挑选前几名进行详细的竞品分析。如果说你通过应用商店、行业报告或者数据平台收集到的竞品，那多半可以说渠道足够的数据来进行筛选的。上图来源：不试用竞品，也能做竞品调研甚至有些信息平台，已经帮你搞定了：上图来源：不试用竞品，也能做竞品调研实在没数据，你还可以看看用户评论：上图来源：不试用竞品，也能做竞品调研总之，大范围挑选竞品的过程中，你几乎可以不用亲自上手试用，并没有想象中那么麻烦。不要什么都分析有些人喜欢对着模板做竞品分析，感觉什么都要分析，但又没有精力……于是最后只好填一堆自己都不确定有没有用的内容。每个项目和产品的情况不同，所以好的竞品分析根本就没有模板可以参考。很多课程为了搞出一套竞品分析模板，往里面填充一大堆可有可无的版块，看似高大上，其实根本不实用，还浪费时间。我建议大家开始着手分析之前，先想一想自己究竟想要获取哪些信息。怎么想？可以这样试试：1. 你想知道的地方让你现在直接上手出方案，你会在哪些地方最不确定？如果想不出来，就直接上手画个线框图试试，很快就会发现很多地方有多种方法不确定怎么选择。例如，使用哪种流式布局：上图来源：一篇文章帮你分清流式布局 – 瀑布流、Feed 流、卡片流、列表流2. 团队有争议的地方团队在讨论方案时，哪些地方争议最大？如果会上没有讨论到相关内容，就可以主动提出来，看看让大家设想产品定位、功能模块、操作流程这些大面上的决策时，是否有分歧（十有八九会有）。例如，导航栏怎么选择：上图来源：用左导航还是顶导航？B 端必看！3. 竞品有差异的地方竞品之间哪里的差异最大？如果想不起来有什么差异，就可以快速上手试一试，主流程/大版块即可。例如，商品展示放什么信息：上图来源：APP 越来越像，交互设计价值在哪？4. 各家特色做竞品分析，只要前三个点抓住，已经差不多了。但是考虑到每个产品可能有一些独特之处也值得学习，所以如果遇到了也不用忽视。因为每家不一样，所以没必要拉通对比了，单独记下各自的特色即可。例如 ClubHouse 的功能不多界面简洁，很有特色：上图来源：Clubhouse 火到喊停，复制到国内有戏吗？一定要拉通对比我建议竞品分析尽量用表格的形式，这样才能很好的看到全貌。最好是把特性列出来，在每个格子打勾或者评分，这样能够快速看出哪个竞品的哪一部分值得参考。我知识星球里的往期训练营作业象限图也是一种好的展示方式，不过只能容纳 2 个维度，不好把控：如果内容比较多不好整理，也可以在格子里写字，不过文字太多的话建议划重点。上图来源：站酷公开作品集如果内容很多，当然也可以一个竞品一个竞品的写，但这个可以放在对比表格的后面。千万不要一上来就直接进入细节，那样就真的是分析竞品，而不是竞品分析了。要得出结论有些竞品分析虽然深入了解了别家的产品，但是对自家产品怎么做，还是没概念……忙活了一大圈，结果连竞品分析的初衷都给忘了呢？竞品分析一定要写结论，而且结论要立足于自家产品，能给项目的未来方向指明方向的。如果自己都想不明白，可以尝试把自己的产品放在竞品对比的表格里，同时思考一下自身的优势和局限性究竟在哪：上图来源：Venngage不过，这样做很容易一不小心就“过度自信”，感觉自己分分钟可以超越竞品了。但是开始规划迭代、讨论开发周期的时候，你就会发现这也做不了那也做不了……也许那时才算真正找到了自己的定位吧。万字干货！4 大模块帮你完整掌握竞品分析互联网行业，竞品分析已不仅仅是产品经理的工作内容，对于 UI 设计师来说系统地分析竞品并且做出有理有据地分析已经成为必不可少的技能了。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/product-marketing-research
色相 明度 色彩 赶在年前将这篇关于“配色”的设计解析整理了出来，分享给大家，希望对大家有帮助。在平时的设计创作中，色彩搭配是很基础且重要的。那如何才能让自己成为了一个会搭配的设计师呢？除了日常的审美和创作积累，其实掌握好色彩基础和搭配原理才是让自己设计配色提升的第一步。下面就带大家由浅入深全面了解一下吧！本文主要围绕四个方面进行讲解：色彩的基础知识1. 色彩模式目前实际工作中比较常见的的几种色彩模式有如下几种：CMYK、RGB、HSB、HSL。CMYK：印刷四色模式是彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨，共计四种颜色混合叠加，形成所谓“全彩印刷”。主要应用于平面印刷。RGB：RGB 色彩模式（也翻译为“红绿蓝”）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。HSB 又称 HSV，表示一种颜色模式：在 HSB 模式中，H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度 HSB 模式对应的媒介是人眼。HSB 模式中 S 和 B 呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽。HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。是运用最广的颜色系统之一。2. 色值实际软件设计应用中通用的两种色值表述法：HEX 表示法（#xxxxxx）和 RGB（X，X，X）表示法：根据不同的色彩模式，HSB、HSL 也使用和 RGB 同样的表示方法，如下图选择了一个颜色，用不同色值和模式的下表达色值书写样式。HEX 表示法(#XXXXXX)又称十六进制法，十六进制颜色代码保存 0 到 9 之间的数字值以及从 A 到 F 的字母值表示 10-15 数字，十六进制颜色代码是 6 位颜色代码，这串 6 位数的代码，实际上使用三组 2 位十六进制数表示了 RGB 的色值。RGB 表示红、绿、蓝三个通道的颜色，三个通道颜色的参数范围值为“0-255”。更深入的知识可网上查阅相关资料，文章不做详细赘述。HSB 模式和 HSL 模式是在 RGB 色彩模式的基础上衍生出来的。HSB 是 H（Hue：色相）、S（Saturation：饱和度）、B（Brightness：明度），参数范围值分别是“0-360”、“0-100”、“0-100”。HSL 是（Hue：色相）、S（Saturation：饱和度）、Lightness（亮度），参数范围值分别是“0-360”、“0-100”、“0-100”。Hue（色相）的取值范围是色环上 0-360 的圆心角度。但 L（Lightness：亮度）与 B（Brightness：明度）分别被认为是「颜色中白色的量」和「颜色中光线的量」。如下图：这两种模式更适合软件开发应用，所以设计师一般使用的都是 HSB 模式设计视觉图，HSL 更适用于技术开发人员。所以设计师需要在同步设计页面时知会技术人员。以免让颜色有误差。配色工具与标准1. 色相环色相环是辅助设计配色的一大利器，一般我们选择 24 色相环作为颜色标准。色相环的概念是基于 HSB 的色彩模式下就行分析讲解；如下图我们以 H（色相）为 350 度为起点，以 15 度递增创立 24 色相环，（保持 S 饱和度：80，B 明度 100 参数不变）根据色相环角度范围，可以将色相环的色彩分为：同色相下颜色梯度变化(H 为 0，改变 S 饱和度和 B 明度)，同类色，邻近色，类似色，中差色，对比色，互补色，映射属性分暖色、冷色、中性色「同色相色」：是指 H（色相）一致，通过改变 S（饱和度）与 B（明度）变化产生的颜色。「同类色」：指色相性质相同，但色度有深浅之分。（是色相环中 15夹角内的颜色）「类似色」：也就是相似色。在色环上 90内相邻接的色统称为类似色，例如红－红橙－橙、黄－黄绿－绿、青－青紫－紫等均为类似色。类似色由于色相对比不强。「邻近色」：色相环中相距 60 度，或者相隔三个位置以内的两色，为邻近色关系，属于对比效果的色组。色相彼此近似，冷暖性质一致，色调统一和谐、感情特性一致。如：红色与黄橙色、蓝色与黄绿色等。「中差色」：色相环中 90 度的配色，在视觉上是有很大的配色张力效果，是非常个性化的配色方式。在 24 色相上作任选一色；与此色相邻之色为邻色；「对比色」：是指色相环上相距 120 度到 180 度之间的两种颜色。「互补色」：色相环中成 180角的两种颜色。按照色彩的映射关系分为暖色、中性色、冷色，以上图色相环饱和度和明度参数为例，通过 5递增展示。2. 色立体除了色相上的变化，颜色还有明度和纯度上的变化，对于颜色的影响也至关重要。这三个词汇的概念如下：色相 Hue：也称色调，是指色彩的相貌；纯度 Saturation：也称饱和度，是指色彩的鲜艳程度；明度 Brightness：也称亮度，是指颜色的明暗程度；色相、纯度、明度三者构成了色立体的概念，让色相环由二维变成了三维的概念。3. 拾色器拾色器是设计软件经常会使用的调色工具，我们建立一个基于 S（饱和度）与 B（明度）的平面坐标系，如下图：将拾色器纵轴方向三等分可以将色彩分为高中低三大调，其中高调再细分为“白色调、粉色调、明色调、鲜色调”四色调；中调再细分为“灰色调、深色调”两色调；低调为“黑色调”。如下图：3. 色彩对比度我们参照网页无障碍设计规范，可以先了解关于设计色彩对比度的一些概念：如下：什么是对比度 ？对比度是两种颜色之间的亮度或颜色差异。对比度的比值越低，它们之间的差异越小。为了确保尽可能多的人可以使用您的产品，对比度需要符合 WCAG 的 AA 级 与 AAA 级 标准。WCAG 的 AA 级 要求小文本与背景的对比度至少为 4.5：1，大文本与背景的对比度至少为 3：1。WCAG 的 AAA 级 要求小文本与背景的对比度至少为 7：1，大文本与背景的对比度为 4.5：1。小文本指字号在 19px 以下的粗体文本类型，或者是字号在 24px 以下的常规文本类型。大文本指字号至少是 19px 以上，字重为粗体的文本类型，或者字号是 24px 以上的常规体文本。下方截图是字节设计体系中的关于对比度设计的应用工具展示，你可以随机选择或者互调背景和文字色，进行对比度检测，实时查看结果。参考网址： https://arco.design/palette/wcag不合格案例：合格案例：配色的设计应用1. 色彩分类和选择设计应用中选取是非常重要的，那根据设计应用，色彩主要可以分为主色、辅助色、中性色等。主色主色一般应用产品的品牌色，通过颜色提升用户对品牌的认识，传递价值。关于主色的选取，我们可以先根据一组产品截图进行了解，通过获取图中产品的主色再结合颜色在拾色器上的分布理解。通过上述案例产品主色调在拾色器上的分布，会发现大多数产品主色都会在右上方色域进行选择。根据产品的需要传递的品牌特征，确认相关颜色色相之后，调整色彩的饱和度和明度，避免使用过低或过高的饱和度和明度，以保证用户在识别颜色会比较舒服、适宜，同时还能吸引他们的注意力。辅助色色相环中的颜色角度相差越大，颜色的对比越强，视觉差异也越大。所以用于搭配的辅助色应满足以下两个条件：有区分：尽量避免所选辅助色在视觉上与品牌色差距不大，导致用户对品牌色产品误解；不突兀：根据色彩原理来说，互补色是反差最大的颜色，但可能会有些突兀。所以我们选择互补色的邻近色，对比色作为辅助色。辅助色可以在色相环的规则标准下根据实际特定的功能场景来选择应用。如下图通过 HSB 模式，色值（350，80，100）为基色创立色相环，做辅助色的选取分析（24 色相环选基色-6 色相环选择辅助色-校正辅助色的步骤），仅作参考。如下左图支付宝的理财模块，顶部背景图使用品牌基色，金刚区图标选择同类色，保持视觉上的统一。右图汽车之家底部有两个 cta 按钮，但是使用基色蓝突出主要功能“获取底价”，旁边的按钮使用类似色进行弱化。再比如下图产品例子：左图马蜂窝的酒店订购页面，使用基色、对比色、同类色，基色和同类色用于主要功能按钮，对比色用于提示入住情况。右图 soul 底部按钮使用多种邻近色、对比色表达不同的功能。中性色中性色包含一系列灰黑色，用于页面中的内容文字、分割线、边框，相关背景，中性色的定义还需要考虑深色背景以及浅色背景的差异。如下图所示：页面设计中可以通过在中性色增加色相，正常添加蓝色色相，HSB 色彩模式中，在曲线的轨迹中选择对应的色值，得出不同层级的高级灰。腾讯-TDesign 设计体系中提及了带有品牌色倾向的中性色是如何计算的相关信息，它通过使用了 RGB 混色模型，经过多次的尝试最终确定了品牌色的混合比例为 20%，运用规则同普通中性色一致。大厂出品！腾讯开源企业级设计体系 TDesignTDesign 是来自腾讯内部近 300 名设计师与开发者共同打造，经由 500+ 项目使用、验证和锤炼过的企业级设计体系， 秉承包容、多元、进化、连接的价值观，TDesign 期望与用户、行业及合作伙伴等一起打造具有竞争力的产品体验。阅读文章 > 2. 大厂色彩体系阿里体系关于色彩模块主要介绍了三大部分：a. 色彩模型，b. 系统级色彩体系（基础色板，中性色板、数据可视化色板，色板生成工具，代码中使用色板），c. 产品级色彩体系（品牌色应用，功能色，中性色）。网址： https://ant.design/docs/spec/colors-cn字节体系关于色彩模块主要介绍了两大部分：a. 色彩体系（基础色板，添加色板，色板导出），b. 色彩对比度，c. 色彩探索（待开发）。网址： https://arco.design/palette/list字节跳动全新发布！ArcoDesign 设计系统正式开源https://v.youku.com/v_show/id_XNTgxNjA2OTQwNA==.html?spm=a2hcb.profile.app.5~5!2~5~5!3~5!2~5~5~AArcoDesign 是什么？阅读文章 > 腾讯体系关于色彩模块主要介绍了两大部分：a. TDesign 设计体系（主题色、功能色、中性色、带有品牌色倾向的中性色，扩展色），b. 应用指南（UI 设计指南，数据可视化指南）。网址： https://tdesign.tencent.com/design/color#header-12配色案例解析1. 渐变知识分析渐变色从属性上看，可以按照方向，长短，呈现不同的表现形式，在保证属性不变，改变渐变的长度，渐变越长，色彩过度越平缓，渐变越短，色彩过度越紧凑，如下图：渐变色从样式上看，可以按照线性，径向，角度、对称，如下图：按照色彩色相数量的不同，可以分为：中性色渐变，单色渐变，多色渐变，如下图：按照色彩的明度的和饱和度不同，可以分为高明度、低明度；高饱和度、低饱和度，如下图：2. 渐变配色案例这里案例介绍通过一张海报设计，使用不同的渐变和配色方式进行创作，设计视觉展示如下：渐变方式：同色渐变渐变方式：多色渐变+色相环六色分类3. 实战页面案例如下页面案例通过色相环选择不同的基色，通过色调六大分类再结合渐变类型进行配色的效果展示。渐变方式+弥散渐变（基色/同类色）渐变方式+弥散渐变（基色/类似色）渐变方式+弥散渐变（基色/邻近色）渐变方式+弥散渐变（基色/中差色）渐变方式+弥散渐变（基色/对比色）渐变方式+弥散渐变（基色/互补色）总结关于配色技巧的分享总结到此就结束了，感谢大家的阅览，希望能帮助大家对配色有更全面的认识！UI 设计视觉指南-配色篇就算完结了，咱们下篇文章见！想做好UI配色？只需要这三步！一套产品色彩需要有哪几种色彩：品牌色+提醒类型颜色（成功、错误、警告）+中性黑白灰颜色（各种字体、背景、分割线颜色等）那么用到的色彩类型： 品牌色 品牌黑 内容底色 全局底色 分割底色 图标色 文字链接可点击颜色 提示信息 错误提示 错误提升阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/3-color-matching-steps
影片 就能 格式 本文要推荐「Hitomi Downloader」是一个强大的影片下载器，除了下载影片也能从各种网站下载图片、影片、音乐或文字内容，具有简单、干净的用户界面，本身以 yt-dlp 做为基础（youtube-dl 的分支），支持超过 1200 种网络服务，非常强大！缺点是只提供 Windows 版本。Hitomi Downloader 操作方法很简单，只要将影片网页的网址复制、贴上，选择要下载的格式即可进行下载，具有基本的下载加速、限速、多线程等功能，也支持 BitTorrent、Magnet 协议和 M3U8、MPD 格式，像是常用的 YouTube、Facebook、Instagram、Niconico 都能够下载，有兴趣的朋友可先下载，然后参考接下来的操作教学吧！Hitomi Downloader网站链接：https://github.com/KurtBestor/Hitomi-Downloader使用教学开启 Hitomi Downloader 的 GitHub 页面，找到「Download」链结取得最新版本，一般使用者只需要下载包含 GUI 的 .zip 格式，解压缩后执行就能使用。开启 Hitomi Downloader 主画面如下图，最上方是贴上影片网址的字段，贴上后点选右侧下载就能取得影音文件，中间是下载的任务排程。在选项里还能调整保存路径、格式、同时下载的最大任务数或是各种网络服务的选项，若遇到无法顺利下载的问题可先从偏好设定进行调整设定。将影片页面的网址复制、贴上 Hitomi Downloader 会自动辨识，点选右侧的「下载」按钮将任务加入排程，有些服务还能选择要下载 MP4 影片或是只有 MP3 纯音频文件。下载任务开始时会显示预览图、标题、完成百分比，也会标示目前的下载速度、剩余时间和档案大小等信息，Hitomi Downloader 单次可处理多个下载任务。下载完成后会有一段时间转换格式，等待转换完成使用者就会取得文件。在下载项目点选右侧选项就能打开文件、在浏览器中查看、复制网址、打开文件夹、删除等等操作，我的习惯是打开文件所在的文件夹、确认下载的影片有无正确储存。将网络影片透过 Hitomi Downloader 下载后保存为 .MP4 或 .MP3 格式，就能用影音播放软件播放，在没有网络的环境下也能正常开启，如果有要储存网络影片内容需求可试试这款免费的下载工具。值得一试的三个理由：Hitomi Downloader 是以 yt-dlp 作为基础的下载工具界面干净、操作方式简单，支持超过 1200+ 网络服务支持 BitTorrent、Magnet 协议和 M3U8、MPD 格式输入网址就能批量下载网站图片的在线神器「Image Extractor」如果想要下载网页里出现的图片，最简单的方法就是在图片按下右键选择「另存图片」，相信大家都熟悉这个方法，下载的图片数量较多，一个一个保存很浪费时间，这时候就使用图片下载工具辅助吧！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hitomi-downloader
错觉 视觉 角形 俗话说“耳听为虚，眼见为实”，但….有时候眼睛也会欺骗大脑。先看点有意思的东西吧，下图是网络上一张引起强烈争议的 gif 图像，这两个圆圈到底是不是在移动？会动的圆圈上下滑动页面的同时看下图，就能看见“音浪”在晃~~赫林错觉图中共有 12 个黑点，欢迎能同时看到所有黑点的同学评论区自证~赫尔曼栅格错觉事实情况是，“圆圈”要比“竖线”更高，也许尺子才能告诉你真相。缪勒-里尔幻觉实不相瞒，左右两个色块的颜色其实是一样的。同时对比错觉实践出真理，原来眼睛真的在骗我。贾斯特罗幻觉以上现象通常称之为“视错觉”，它象是眼睛跟我们开的一个玩笑，而我们往往还乐于接受这些假象。其实“视错觉”现象的背后有很多理论解释，感兴趣的同学可以搜寻公开资料了解。其中有一个重要的科学原理——格式塔原理（Gestalt是一个德国词，意为图像或形式）。格式塔原理解释了人们如何以视觉感知物体，以及图像的结构、视角、大小等要素是如何影响我们的视觉的。近万字干货！带你全面了解格式塔原则好的设计师理解心理学在视觉感知中的强大作用。阅读文章 > 原理与应用据说在 1910 年的某天，心理学家 Max Wertheimer 看到一个铁路交叉道口的信号灯交替闪烁，产生了这么一个错觉：他觉得这些信号灯是在一个圆周之内运动，事实上，这些信号灯只是按预定的时间间隔闪烁而已。这个视觉与现实的差异触发了 Wertheimer 的灵感，并形成了一套完整理论。下面我们就来简单了解一下它的几个重要特性与设计应用。1. 轮廓&延续感当辨认一样物体时，我们倾向于首先辨别它的轮廓，然后将这个轮廓归类为已知的经验或事物。在此之后，我们才会去注意到这件物体的细节及各个组成部分。在下图中，观察者会首先辨认出一条斑点狗，而不是首先认出它的头、腿、耳、嘴等细节部位之后再在脑中组合成一条狗的样子。一只正在溜达的狗子与之类似，当用户的目光沿着一系列物体移动时，脑中会形成一个逐渐增强的“定势”。下图中，观察者会看到一条直线和一条曲线而不是一条弯曲的黑线和另一条弯曲的红线。在视觉感知中，目光的延续性已经超过了颜色造成的差异。交错的直线和曲线在界面设计中，轮廓感和目光动线往往比细节更重要，如果用户根本就辨认不出图像之间的关系，那么这个界面设计得再华丽也是失败的。卡片结构常常在任务型表单设计中被使用，它能带给用户更清晰的步骤感知，并快速识别每个模块的信息类型。卡片式结构经典的 T 形结构被广泛运用于导航、菜单类设计，对于复杂信息归类有很好的效果。T 形构图2. 平衡错觉有时候图形位置会欺骗你的眼睛，尤其是那些具有复杂几何以及比例比不一致或不对称的特殊图形。比如将三角形完全居中的放置在容器内看起来也会像是发生了偏移。会出现这种现象的原因是由于三角形分割错觉的影响。如下图当三角形质心与容器中心相重合的时候看起来会更“居中”。三角形分割错觉在进行排版或者字体设计的时候，往往更多的会依赖于直觉，而不是参数和逻辑，如果仅仅是从尺寸数值上保持一致，也会使一个整体当中的不同个体显得不一样大，因此我们需要对同一整体下的个体尺寸进行调整，已经达到光学平衡。如下图中在没有对个体进行单独调整时所有字母看上去并不平衡。视觉平衡调整淘宝图标在设计时会将图形形态定义出一个相对模糊的范围，然后进行尺寸、位置的微调，确保图形的“质心”相对于容器居中，从而让所有图标在同等尺寸下视觉感受一致。淘宝图标设计基础规则3. 视觉补全我们的大脑往往会在接收到碎片化信息之后会自动把缺失的部分进行补全。下图中的图形在事实上是不完整的，但并不妨碍我们看到一个球体和一个柱状体。事实“缺失”的图形这种现象原理被广泛应用在 logo、广告等设计中，利用“负空间”给与“完整”图形所不能带来的视觉冲击感和想像空间。Federal Express 的标志如今仍然被认为是最经典的 logo 设计之一，发现里面的“负形”空间了么？Federal Express Logo著名的 WWF（世界自然基金会）熊猫徽标。WWF logo配合故事演绎，可以产生更具内涵的意境。29CM logoKFC 将产品与对应的行为进行了巧妙地结合。KFC 广告Koleston Naturals 是以“天然染色”为推广定位的染发剂产品。设计师将女性的长发和五官镂空，通过镂空处可以看到海和天际线，随着日出日落可以看到长发颜色随自然而变。巧妙的将产品的“天然染色”诉求和大自然结合。Koleston Naturals 染发剂广告与视频的丰富表现性相比，静态海报对于展现更深层次意境的时候比较局限，利用负形空间表现藏于表面之下的含义是一个比较不错的手法。多重含义海报在其他领域格式塔的设计理论很多时候会被应用在比如工业、建筑等设计领域，常常是各路大师们的惯用手法。火爆网红打卡界的成都太古里裸眼 3D 大屏。成都太古里裸眼 3D 广告屏放进去的红酒居然消失了。Pinetti Wine Rack就算移动观察角度，也还是会一直被这只小恐龙注视。裸眼 3D 小恐龙当盛有调料的时会出现立体效果的味碟，满满的惊喜。what should cialis cost曾经风靡一时的手机小游戏，充分利用了视错觉构建的矛盾世界。纪念碑谷游戏截图对视错觉感兴趣的小伙伴还可以去线下场馆实地体验，Museum of Illusions 幻觉艺术博物馆短短 3 年时间风靡全球 19 个国家在纽约、柏林、迪拜等多个城市排名 TOP5 的“明星博物馆”，据说上海也有开哦~Museum of Illusions 幻觉艺术博物馆写在最后视错觉的相关理论非常多，在设计上的应用可以说是存在于生活的方方面面，它既能帮助设计师避免表达与认知发生偏差，也能在创意领域中发挥非常大的作用。进阶学习！视觉设计中的11个经典的视错觉现象主物质界面（译者）：写这篇文章目的，是帮助大家理解这些让人抓狂的效果背后潜藏的原理。阅读文章 > 欢迎关注「淘宝设计」公众号：本篇来源：优设网原文地址：https://www.uisdc.com/visual-illusion
铰链 手机 屏幕 大家有没有感觉到，最近关于折叠屏的新闻越来越多了。虽然我周围没见到什么人买折叠屏，但架不住厂商热情高涨啊。全球各大厂商几乎都在拼命钻研折叠屏手机，而且几乎每发布一款都有技术革新。根据面板供应链市场研究机构 DSCC 的数据，2021 年第三季度折叠屏手机迎来了爆发性的销量成长，除了比前一季度增加了 215%，出货量更是达到 260 万台。虽然这点数据比起全球 2.66 亿的手机总销量来说不算什么，但未来的事情谁又说得准呢？随着折叠屏越来越火，作为一个做过好几年手机 APP 的设计师，我内心隐隐有些不安。如果折叠屏手机真的普及了，恐怕会给 UI 和交互设计带来很大的变化。到时候，稍微讲究一点的 APP 都要补充很多适配规则，甚至可能需要重新设计布局架构，因为做不做折叠屏的适配，对体验和视觉效果的影响真的很明显。例如，下图就是 Google Due 为折叠屏做适配的真实案例： 做好适配后，折叠屏看起来酷炫，优势展露无遗。如果不做适配，折叠屏不但显得毫无优势，你还会觉得中间那条缝十分碍眼。为了把折叠屏的优势发挥出来，设计师们可以操心的地方多了去了。苹果现在是没有折叠屏手机，所以想要了解折叠屏适配设计的话，最好是去看看 Android 系统—— Google 确实做了一番研究。最新版的 Material Design 设计系统中，有专门针对折叠屏适配的研究，我今天就以此为基础，给大家捋一捋：触摸范围页面分割铰链弹窗触摸范围折叠屏的手机屏幕更大，触摸范围肯定也不一样。非折叠屏手机以单手操作为主，但是折叠屏手机如果展开，就不可能单手操作了，以双手为主。上图来源：Material You上面三个区域中，3 号区需要手指弯曲较大，1 号区需要手指尽力，2 号区是操作起来最舒适的。顶部，尤其是中间那一部分，手指很难触达，避免放置常用操作。页面分割首先，有的屏幕是原来手机的尺寸，从中间对折的，有的还没有 90 的状态，要么折叠要么展开。这种还比较好办，因为大部分时间都是展开使用，不太需要额外的适配设计。比较麻烦的是双屏尺寸的折叠屏，因为这种屏幕会经常使用展开 90 的桌面模式。最简单的适配方式是下图这种单列适配，适合上下翻折，但这种就对桌面模式很不友好。这种不太适合左右翻折，否则中间容易看到一条竖直折痕。如果是左右翻折，最好是考虑这种左右布局了，更大效率地利用 2 倍的屏幕空间。但是这种左右布局也会有风险，折叠屏的展开宽度毕竟不及平板设备，也要考虑分成两列之后空间够不够用。桌面模式可能是看视频或打字的常用模式，也要考虑如何快速切换布局：铰链上面那么多模式，已经很让人汗颜，但折叠屏的复杂性还不止如此。因为硬件限制，折叠屏中间都会存在一个铰链。各大厂商都在努力抹平铰链造成的视觉影响，但用久了几乎没有哪家不出现凹痕的。那个小凹痕平时也没什么，但如果图片或文字段落跨越那道铰链，就难保不看出问题。退一万步说，就算凹痕小到看不出来，铰链依旧会给交互造成影响。因为铰链上的触感肯定不怎么好，重要的信息和按钮都最好避开那道杠。更何况，还可能存在铰链处触控问题，甚至屏幕分段的问题。弹窗前面讲了为什么铰链的存在会给 APP 设计造成很大影响，这里就要说影响最大的一个组件了。弹窗是不能直接用以前的样式了，否则刚好卡在铰链那个地方。Material You 的解决办法是，让折叠屏的弹窗出现在屏幕一侧。哪怕是完全展开状态，也不能把弹窗放在中间，因为你无法确定用户的这个折叠屏，是不是真的无缝。总结今天这篇文章的内容有没有用，主要还是取决于折叠屏会不会普及。就我个人而言，如果要买折叠屏，估计主要奔着尝鲜去，对用户体验这块其实并没有什么指望。但是以后的事情真不好说，不知道大家怎么看？如何设计折叠屏？来看这份设计指南！最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/flexible-screen
图形 具象 画面 图形在版面构成中，占有很大的比重，也有这样一说：一幅图片胜于千字。但这并非文字表现力减弱了，而是因为图片能使本来平淡的信息变成强而有力的视觉画面。图形能有效地利用的视觉效果吸引读者的注意力，猎取读者的好奇心，使读者被图形吸引，进而将视线引至文字。这种瞬间产生的强烈的“注目效果”，只有图形可以实现。具象图像一般指的是还原真实的摄影图片，具有直观传递信息的特点，是人们最易于接受的图形形式，也更符合大部分的商业设计目的。运用具象图形来传达信息，容易从视觉上激发人们的兴趣与欲求，增强画面的表现力和说服力。尤其是一些具有漂亮外观的产品，常运用真实的图片通过精美的设计制作给人带来赏心悦目的感受。抽象图形常常是具象图形的概括与提炼，将丰富深刻的内容潜藏于简洁的外形里，让读者的想象力去填补和联想。抽象图形简洁凝练的形式美和强烈鲜明的视觉效果，较之具象图形具有更强的创意性和艺术感。绘画图形是指利用一切绘画手段创造的富有个性的图形，比如水墨、版画、插画等，可以通过独特的绘画风格，营造出优美而富有想象力的画面，更艺术化的传达画面信息。通过数字艺术处理，将不同的图像融洽地合成处理，或使用 3D 建模搭建场景等手段，都可以创作出各种创意十足、视觉新颖的数字图形。中国历来讲究书画同源，文字本身就具有图形之美，在保留其可读性的基础上，进行图形化设计，可以增强视觉效果的同时更便于记忆。在缺少图形素材的情况下，将文字图形化出现在版面编排中，使其成为版面的主体，可以形成别具一格的版面构成形式。图形在版式设计中给人最直观的感受，是不可缺的重要组成部分，好的图形能使本来平淡的信息变成强而有力的视觉画面。在使用图形时要遵循以下原则：图形的清晰度直接关系到设计的品质，清晰的图形能让画面更精致美观；而清晰度不够的图形，不仅辨识度会下降，品质感也会变差。所以应用图形素材时首先要满足最基本清晰度条件。特别是印刷使用到的图片，分辨率至少达到 300dip 以上，才能保证印刷品丰富的细节与清晰度。美观的图形具有多种多样的表现形式，如新颖的构图、别出心裁的视角、独特的光影、丰富的层次感、创新的配色、强烈的视觉冲击力等等，更容易让人眼前一亮。使用摄影图片与数字合成表现形式，图形具有独特的光影、丰富的层次感，很好的突出画面中核心元素产品，营造出时尚高端的氛围感。图形采用别出心裁的视角，运用打破常规构图处理，给人一种不同寻常的视觉体验，很好的吸引用户的注意力。图形还要考虑与版面风格的一致性，选择符合产品特色、且贴近设计主题的配图。如与产品相关的配图应用中，产品宣传类的目的，应该以展示产品外观为主，尽量选择能够直观清晰展示全貌的具象图片。如偏文艺、展览宣传海报则可以使用抽象图形、绘画图形、文字图形来呈现，具有更强的创意性和艺术感。其设计中出现的元素可以让对应的人群细细观看，慢慢品味。每种图形有着各自的优势和局限，左图使用具象图形的人物摄影图片，更能更直观的传递出“女子国乐团的音乐会”的主题，右图采用绘画图形青花元素来呈现，能给观众有更多的想象空间，也比较有艺术感。因此，在版式设计的过程中，图形的表现方式有时会同时出现或以互为融合的方式出现。设计时应根据不同的创意与对象采用不同的表现方式。选择好图形后，还要考虑图形主体是否明确？是否能清晰表达核心信息的内容？图形在画面中的位置、大小、角度是否合适性？如果不合适，则需要对图形进行二次加工。这些问题我们在下期文章中详细讲解，下期见！如何选到设计感强的配图？我总结了这7个实用方法在设计中，判断一张图是否好看的时候，你通常会从哪些角度去分析？阅读文章 > 欢迎关注作者的微信公众号：「艺海拾贝Design」本篇来源：优设网原文地址：https://www.uisdc.com/graphics-introduction
表格 单元格 宽度 又到了 B 端干货分享的环节了，今天我们来分享的是 B 端项目复杂组件中出现频率最高（没有之一）的——表格组件。往期回顾：超详细！总监出品的B端设计规范指南（一）：布局在 C 端设计中，不管是给车载客户端、手机客户端、电脑客户端设计界面，都有比较具体的规范需要我们学习和遵守。阅读文章 > 超详细！总监出品的B端设计规范指南（二）：字体[link https://www.uisdc.com/b-side-design-specification]第二篇，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。阅读文章 > 超详细！总监出品的B端设计规范指南（三）：配色B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。阅读文章 > 超详细！总监出品的B端设计规范指南（四）：控件第四篇我们全面认识一下B端的控件设计。阅读文章 > 超详细！总监出品的B端设计规范指南（五）：控件下面，就回到我们之前停摆的控件讲解，继续认识控件有关设计的内容。阅读文章 > B 端设计指南（六）：数据图表怎么设计？基本的控件单元完成后，下面就要开始介绍 B 端设计的另一座大山，图表的设计了。阅读文章 > 掌握表格的设计，就掌握 B 端设计的半壁江山，我们赶紧开始吧！1. 表格是什么，为什么重要？表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰地罗列出来。表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。2. 表格的主要构成模块表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。第 1，搜索栏，主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。第 2，表头栏，每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。通常，表头的设计会和下方列表设计有一定的区分，标头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来做区分。第 3，列表，则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。常规 B 端项目表格都会限制单页列表的行数，极少使用无限滚动加载的模式。因为很多列表的数据有成千上万条，加载带来的系统性能消耗较大，且无法有效根据序列精准定位指定数据对象。第 4，多选和操作栏，如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的操作选项放进操作栏中。第 5，翻页器，则是切换列表页数的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。表格的响应式规则比较细碎，我根据下面的顺序展开解释：表格的总宽响应表格的最小宽度单元格的响应逻辑内容的响应逻辑1. 表格的总宽响应表格的响应主要是宽度上的响应，整个表格的宽度区域随父集元素的放大而放大。比如父级元素左右内边距为 20px，则表格整体宽度保持和父级 20px 的左右间距。2. 表格的最小宽度在上方逻辑下，表格可以无限延长。但是，反之它却不能无限的缩短，你不可能做一个只有 10px，20px 的表格。过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。最小的宽度可以结合前端栅格系统使用的 Breakpoint （断点）来制定，如 SM：576px，或 MD：768px。如果不了解栅格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 560-640px，当然，不管怎么定，一定要提前和前端沟通，确定尺寸方案。当表格内容少的时候，最小宽度只是相对较大宽度窄了一点而已。而当表格内容过多，最小宽度无论如何也不够放的情况，那么就会使用横向滚动的交互形式来隐藏超出内容。3. 单元格的响应逻辑单元格响应这是整个表格最复杂的一环，横向内容会超出最小宽度的情况，就是由单元格规则决定的。首先，单元格本身也有最小宽度，原因和前面一样，1px、10px 宽的单元格没有存在的意义。所以可以根据需要，制定多个等级的最小单元格宽度，应用在不同的数据类型中。假设表格中包含了 20 个表头，分别使用了 10 个最小 24px 和 10 个最小 80 px 的，那么单元格的总宽最小就是 240+800 = 1040px。所以当父级整个表格视图小于 1040px 的时候，内容就会不够显示从而触发左右滚动的条件。当上级表格宽度大于单元格最小总和时，那么单元格也就会随之变宽。最简单的响应逻辑，就是为单元格宽设置百分比。比如 5 个单元格分别是父级宽度的 10%、10%、10%、20%、30%、20% ，那么在父级 1000px 的时候它们分别是 100px、100px、100px、200px、300px、200px。只要确保百分比的总和是 100%，不管你单元格是比例均分（5 个单元格每个 20%宽），还是独立制定（上面案例），单元格宽都是等比缩放的状态。虽然好理解，但这种初级的做法带来的问题也很多，那就是部分单元格没有被 ”放大“ 的需求。比如常出现在第一列的多选框，或者部分标签单元格、固定操作按钮单元格。于是，为了预留给有需要的单元格更多的空间，提升体验，就会对这些单元格实施定宽的方式，剩下的单元格继续使用等比，只是计算的方法要减去定宽元素。比如还是一个占比 20% 的单元格，在包含 2 个 48px 定宽单元格的 1000px 表格中，实际宽为：（1000px – 2*48） * 20% = 180px4. 内容的响应逻辑作为单元格的子级，内容也可以独立定义响应的规则。主要包含 3 种情况：无响应隐藏多余换行显示无响应就是显示的内容是固定的，比如多选框、缩略图、单按钮等单元格内容，它们没有大小变动的必要。隐藏多余，则是主要应用在文本内容上，当单元格宽度小于当前文本所需宽度时，就会把多余的文字进行省略，这种做法适合应用在一些原本就不是太重要的信息上。比如原本是 ”上海徐家汇南丹路天主教堂一楼“ 变成 ”上海徐家汇南丹路天…“，之后再通过鼠标悬浮弹出文字气泡框的方式显示所有文本。而换行显示，则是文本或多标签状态下，一行不够显示就换行的做法。除非一开始单行行高预留了多行显示的高度，否则多行内容就会撑高单元格。表格的响应式也就先解释到这里，制定表格的响应逻辑需要从底层认识它们的层级和响应规则，然后再和开发沟通如何制定合理的方案。随着经验的积累，实战经验丰富的 B 端设计师，就会在前期的规范环节制定出完整的表格响应逻辑，应用到前端框架开发和后续的设计，而不是做到哪定到哪。今天的分享就到这里结束，响应式解释还是太繁琐了，我也只能写到这个分上了，能理解多少要看大家的造化了！目前想做一篇响应式规则的浓缩短视频，大家要想看，记得在下面留言~下篇再贱！如何设计B端表格？这篇近5000字的干货帮你完全掌握！表格浅谈，多多指教数据查看让我们先来回顾一下表格的基本构成，最上面的为表头，横为行，纵为列，内容区每一组展示数据区域为单元格。阅读文章 > 欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/b-end-form-design-application
落霞与孤鹜
在路上
张大湿
表哥
飞翔的企鹅
