方案 面试官 模型 信心满满面试，结果却不尽如人意？和面试官聊的很开心，可最终没有被录用？想知道面试官心中对“优秀”的定义，却奈何没有渠道？不装了！今天就告诉你们，面试官眼中的优秀设计师什么样！为此，我们采访了工作 7 年资深设计师、3 位数面试场次、大小厂候选人阅人无数的面试官，倾情总结了如下心里话，希望能对面试官心中的“优秀”进行描摹。也让我们了解一下，那些你觉很好但其实是坑的表现本质。面试官眼里的优秀，是什么？免责声明：不同公司的能力模型不尽相同，以下内容不能覆盖全局或者被所有人认同，本文不具有任何参考意义。面试官：“招聘要求嘛，肯定希望候选人完美。但今天透露一些真心话，多的不要求，只要你能达成以下 3 点，绝对跪下求你入职！”（微笑.jpg）一、核心竞争力：“会思考”据面试官透露，“会思考”不仅是面试环节鉴别设计师能否通过面试的黄金标准，也代表了该位设计师的成长潜力。在全栈设计师大势所趋的背景下，更要求设计师对产品和体验有足够的认知，能判断设计方案能否达成目标。1. 假装的思考① 忽略方案产出的过程：不管是日常工作还是晋级答辩，推理方案是如何产出的、以及推断方案的可能效果，应该是整个工作中的核心。尤其在作品中，提出问题马上接方案，更像是“照着产品的方案画一遍”，那设计师作为体验的把控人便没有发挥作用，久而久之不仅损害了产品功能体验，本身的岗位价值也会受到质疑。面试官 OS：怎么来的？依据是啥？为什么是 A 不是 B？不会是产品原型的精加工版吧？② 模型和调研结果与方案无逻辑关联：很多同学认为只要在推理中加入模型就万事大吉，于是经常出现模型调研堆砌，但模型结论和方案毫无关联的情况。模型也好、调研方法也罢，都是前人帮我们总结的、可以解决某类问题的思路，所以用之前要明确这个模型能否帮助我们产出方案，而不是方案产出之后再去拉个模型来装作“有思考”。面试官 OS：甚至某些同学的作品里，小小一个体验功能迭代都要放上 SWOT 分析，不知道的以为是上市公司竞调…2. 真正的思考了解产品背景和功能现状，有清晰的解决问题思路；有的放矢的利用调研和模型工具，能把分析应用在后续设计方案中；能与别人深入讨论思路或方案的可能性。3. 面试官真心话“哪怕堆砌再多的调研和模型，是不是真的思考，聊一下就会暴露。即便平日工作中需求紧急，还是建议花点时间复盘思考，一旦开始思考，思考的成本就会越来越小，但进步会越来越快。”更多设计模型：设计高手都在用的双钻模型和5E体验模型，看完这篇立刻学会！编者按：设计模型中最常见的2个：双钻模型和5E体验模型，看完这篇帮你掌握！阅读文章 > 二、脱颖而出：“会验证”本质是“会思考”的延伸。在方案完成后，知道除了最终的产品或运营目标数据外，能通过设计方案设计埋点和计算方案，获取到能印证设计效果的数据。1. 假装的验证① 看最终数据，不看过程数据：除简单的功能设计外，比较复杂的功能、大型活动都建议对过程数据进行追踪。因为过程数据距离设计表现更近，通过对过程数据的分析，也可以发现设计、策略等的问题或优秀经验。所以有经验的设计师，不仅会看目标数据的表现，也会自觉去发现哪里还有可提升的点、或是因为哪些设计、策略达成了目标数据。② 无法从数据分析出设计观点：可以通过 AB 测选出方案，但仅限于选出方案，没有得出可迁移性的结论，比如类似的场景和用户，可以注重哪些方向的设计，或用那种设计策略效果更好。虽然设计多种方案进行测试可以精准解决问题，但实际工作中并没有那么多时间或资源都进行 AB 测，此时能通过思考获得可迁移性的结论，就会大大提升之后的工作效率。面试官 OS：多出方案一个个测试但得不出可迁移性的结论，和“用战术的勤劳难以弥补战略的失误”道理是一样的，也是一种偷懒。2. 真正的验证可以依据设计方案，拆分出与方案相关的数据，通过过程数据了解到设计效果和迭代方向。不会做设计方向的数据分析？推荐看看下文：凭什么说设计方案有用？先掌握基础的数据分析思路！“凭什么说你的方案有效果？阅读文章 > 3. 面试官真心话“说实话，很多高阶设计师都达不到，主要是大家习惯了依靠产品或运营做分析了，希望大家可以尝试从设计角度做数据分析，这也能积累推断方案数据效果的经验。”三、决定上限：“会沟通”虽然放在第三点，但是很重要！很重要！很重要！是个又基础，但上限极高的能力，不同的职场位置要求也不一，初阶也许只要求能讲清楚思路和方案，中阶能推动设计发起的项目落地，后期能带领团队发挥更大的效能。1. 假装的沟通① “天王老子来了，也是我对！”：（大佬和老板们可以忽略这条）不能说坚持自己的想法不对，但坚持需要方法。如果不管对方什么需求、处于什么阶段，只从自身角度去推动方案落地，时间长了也距离失业不远了。更有设计师嘴上好好好，手上依然该怎样怎样，不知道的以为设计师买下了甲方公司。面试官 OS：那种特别坚持自己的方案、又说不出所以然的应聘者，不知道的还以为甲方派来考验我的。② 词不达意，讲话没重点逻辑，啰嗦：（用作品就能让人拜倒的大佬可以忽略！）非常致命，非常致命，非常致命！相信我，差的表达会毁掉一个优秀方案的。面试官 OS：遇到讲不清楚的，直接就想挂掉算了。每听 20 分钟或言之无物、或逻辑混乱的方案介绍，就需要 20 分钟的大悲咒来治愈。2. 真正的沟通① 倾听需求，融合体验和商业目标提供可行的方案选择。② 做有效果的“坚持”：如果甲方真的很想尝试你不看好的方案，在讲清楚你认为的利弊后，就可以等上线结果了。结果好，你刷新了认知；结果不好，甲方可能会想起你的“忠告”，转头来信任你。③ 开放心态，吸收观点：设计本质还是融合性的学科或岗位，欢迎讨论和迭代，不仅能获得好的创意，也能赢得好的声誉。④ 语言准确有效，如果能生动有趣就更好了。当然，“说服”的方式不止一种嘛~欢迎留言分享，也可以看看这篇：4个沟通技巧，让最难搞的合作方关系好到请我吃饭！在经历了与合作方「愤怒嘲讽爆发转变面对和解」这6个阶段后，我提炼了4个对我帮助很大的职场沟通技巧。阅读文章 > 3. 面试官真心话“说句扎心的，沟通能力并不会自然的随专业年限增长。排除坑位有限的情况，职位和年限不匹配更可能发生在沟通能力较弱的设计师身上。”四、给读到最后的你其实以上这些看起来都很基础，但从实际工作或面试来看，能都做到优秀的同学极少。或许是淹没在需求中无法抽身反思，或许是发现问题但无法提升，希望今天的分享能为你带来一点点收获。反过来说，面试有一定技巧，但这背后支撑你表现的核心竞争力还是来自于长期对于自己的经营，例如复盘-思考-沉淀-沟通-主动推进-长期主义的刻意练习，这些不是上一两个培训班，找一两个领路人短期就可以解决的，不可否认这些在关键时刻助推你开窍的价值，但千万别忽视了日常自我的项目积累。设计师的能力越来越是个综合体，“愿天下有志者皆得归属”呀～面试官这里还有一些肺腑之言：“也许有怎样一份工作是缘分所致，但能拥有怎样的能力确可以自我把握。希望正在面试的你、工作疲惫的你，都能得偿所愿，在工作中收获更好的自己~顺便，其实还有一些实操型的技巧真的不好写出来啊，不如来 58 面个试吧~嘻嘻”欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/3-interview-skills
用户 屏幕 座舱 Hi 大家好，在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》（书名待定）的撰写工作已接近尾声，和大家商议后，在此我来提前共享书中的部分初稿，希望能对读者有所帮助，以下进入正文。更多车载交互类设计干货：HMI设计干货！滑动和点击哪个更不容易让司机分心？车载触摸屏与手机/平板电脑最大的区别之一是使用场景 —— 车载触摸屏可在汽车驾驶使用。阅读文章 > 笔者还记得在 2019 年，大家都在讨论未来的座舱只有一个屏幕还是屏幕的数量越来越多，从当前来看后者是大多数车企选择的答案。为什么？为副驾和后排乘客增加屏幕的确有助于提升乘坐体验，不过当前更重要的原因是车辆增加屏幕的成本并不高，但它能给这辆车带来一定的溢价和利润空间，同时能让整个座舱更显科技感与豪华感，所以车企都会选择在自己的中高端车型上设置多个屏幕。那么，未来座舱内是否还会有更多的屏幕？这些屏幕究竟用来做什么？这两个问题成为车企当前思考的问题，以下是笔者的一些看法。HUD、仪表盘、中控屏、车控屏、副驾屏甚至是方向盘屏都是我们在以往车型中所看到的，常见组合可以参考以下不同屏幕的布局演变方式。在多屏交互上，很多车企都会关注屏幕之间的信息切换，包括仪表盘和中控之间的信息切换，例如几何汽车允许驾驶员通过三指左滑的形式将中控的地图信息切换到仪表盘上；以及中控和副驾屏之间的信息切换，例如小鹏 G9 允许用户无论在主屏或者副屏观看电影时，都可以通过两指滑动分享屏幕。除了以上常见的屏幕，透明 A 柱和电子后视镜两种新屏幕在未来都有可能成为各个车型的配置选项。透明 A 柱的作用是避免驾驶员在行车过程中视野被 A 柱部分遮挡，而电子后视镜相比传统光学后视镜能做到防水、防雾、防污和夜视能力，同时电子后视镜的屏幕摆放位置在车内，驾驶员需要扭头获取信息的难度明显降低。除此之外，当透明 A 柱及电子后视镜和 ADAS 联动显示增强现实信息，在一定程度上能和 HUD 在空间和方位上互补，为驾驶员带来更丰富的车外环境信息显示。以上都属于座舱内部的屏幕，而手机、智能手表甚至 AR 眼镜等设备属于用户随身携带的屏幕，车企和手机终端设备厂商都在相互探索不同屏幕之间的交互方式有哪些，例如苹果在 WWDC 2022 上发布的最新一代 Carplay，它允许用户的 iPhone 应用和信息直接显示在汽车多个屏幕上，打破了手机和车辆数据的交互隔阂。那么智能座舱的多屏交互该如何设计？目前工业界和学术界都没有一个明确的答案。笔者认为智能座舱多屏交互是一个很前沿的领域，指导我们向前探索的最好方法是从其他领域参考和吸取一些可用的原则，并对此进行合适的改造，以下是笔者通过大量的观察和分析总结出来的 5 条设计原则：一、0-3 步内完成绝大部分的多屏交互和设置提出这条原则主要有两点的考量。一是从安全、高效的角度出发，我们不希望用户在驾驶过程中还需要多步的操作才能将当前屏幕的信息流转到另外一个屏幕上，目前多个厂商实现的通过多指滑动分享数据也是同一个道理。二是参考了苹果在跨设备交互上的做法，笔者在过往发现苹果绝大部分的跨设备交互都能在 3 步内完成，这也是为什么苹果用户高度依赖苹果生态的原因之一。要实现该原则，那么用户随身携带的手机、手表和车载系统需要无缝、实时地连接在一起，否则用户使用时需要的连接步骤会远大于 3 步，这时需要手机厂商和车企有更深的配合和联动。在手机和车载系统联动上，笔者以问界 M7 的鸿蒙系统作为参考案例。当用户的手机和车载系统都登录了华为账号，用户上车后无需任何操作两台设备已经互联一起，这时用户可以通过“打开应用列表”-“切换到手机应用列表”两步操作直接在中控大屏上访问手机上的应用，这种高效、直接、无感的交互方式值得每一位从业人员去学习和探索。二、多屏之间的交互过程需要符合用户的预期当座舱内屏幕越来越多，用户对于每个屏幕的详细作用需要一定的认知和理解过程，在这过程中用户很有可能按照过往经验以及所处环境对其进行理解，例如使用鸿蒙系统的用户不一定了解苹果的 Carplay 系统。另外，每一块屏幕的分工应该是明确且能根据用户和车辆状态而动态变化的，例如当车辆左后方即将出现危险，应当使用左侧的电子后视镜而不是通过中控来提示驾驶员；在驾驶过程中车载系统应当避免显示无关要紧的信息，尤其是车辆处于高速驾驶或者驾驶员处于高负荷的状态下。众所周知，国内绝大部分车型的仪表盘属于 QNX 系统，中控的系统有 Android、鸿蒙、Linux 等等，绝大部分用户的手机设备属于 Android、iOS 或者鸿蒙系统，每个系统之间的交互细节和表现都需要人为重新定义好，定义不好极有可能引起用户的突兀或者不解。例如用户上车后，车载系统直接和副驾的手机系统建立了连接，而不是和主驾的手机进行互联；驾驶过程中，中控不断显示手机的消息推送以及在多人场合下直接显示视频通话请求的推送.......这些明显都是不好的预期。那么什么是好的或者不好的用户预期？这部分需要读者多以用户为中心的角度进行思考、设计和测试才能知道。三、信息的交互需要符合当前屏幕的使用体验当中控信息显示在仪表盘或者 HUD 时，第一我们应当遵循仪表盘和 HUD 的设计规范，这时响应式设计能起到较大的帮助。第二我们需要关注信息的交互方式，我们不可能让用户通过触控仪表盘的方式对此信息进行交互，也不可能在仪表盘或者 HUD 上显示文本框并让用户通过文本输入法进行输入。每一块屏幕有各自的交互行为，笔者认为这些交互行为可以分为 4 种情况，它们分别是：瞥一眼、轻交互、中等交互和沉浸式交互，每一种交互行为承载的信息量大小以及需要的注意力和时间会依次增加。以手机的消息推送为例，只需要用户注意一下就能完成的任务都能认为是“瞥一眼”；如果用户需要关闭这条推送可以等待几秒或者将其往上推，而这种只需要 1-2 步操作会定义为“轻交互”。在驾驶过程中，HUD、仪表盘、电子后视镜以及透明 A 柱需要承载的信息应该尽可能符合“瞥一眼”的原则，如果需要交互则允许用户通过方向盘按键、语音等方式一步完成。如果读者想不到合理的设计方法，可以参考智能手表操作系统的设计原则和规范。“中等交互”更多是指需要若干步骤才能完成的任务，例如用户在手机上回复短信；而“沉浸式交互”可以理解为用户在手机上全神贯注地看视频或者玩游戏。很明显“中等交互”和“沉浸式交互”不应该影响正在手动驾驶的驾驶员，但有些“中等交互”确实需要驾驶员在驾驶过程实施，例如中途切换导航规划。在过往我们会将这些信息和交互全部显示在中控上，其实我们也可以通过仪表盘和方向盘的方式承载和交互信息，这时候方向盘是否有可能出现一个屏幕将成为车厂讨论的问题。笔者认为，从手机和车载系统融合的角度来看，方向盘屏幕在一定程度上比中控屏幕更好地完成“中等交互”，例如驾驶过程中用户可以在方向盘屏幕操纵地图和完成多项设置步骤。当每块屏幕都有了自己的交互定义，手机信息如何合理显示在多个屏幕上将成为问题。这里有两种方法供读者参考，第一种是赋予每一个屏幕不同的参照，例如仪表盘可以参考智能手表，它只呈现简单的内容或者消息推送，用户需要查看则去中控查看（这时中控相当于智能手机）。第二种是重构每一款服务和应用，让内容可以根据规则动态显示在相应的屏幕上，例如以下表格中微信会结合 OBD 数据、车内人物数量等参数动态调整自己的信息显示和交互策略（这属于笔者遐想的方案），不过这种方法需要手机厂商和车企的深度参与才能实现。无论是哪种方法，我们都应该尽可能让当前信息的交互符合当前屏幕的使用体验以及符合用户的预期。四、信息的显示策略应当根据场景和用户状态动态调整智能座舱的每个屏幕都有自己的职责，信息的显示策略应当基于每块屏幕的职责而定制，例如驾驶信息更多呈现在 HUD 和仪表盘上，娱乐信息更多显示在中控屏上，外界环境信息更多显示在 HUD、电子后视镜和透明 A 柱上。但是信息的呈现不应该一成不变，因为在驾驶过程中，所处环境和驾驶水平都会影响驾驶员的认知负荷，结合多重资源理论和耶德定律可知，每个感官通道都有自己的负荷容量，当接收的信息越多，认知负荷越高，越容易引起人的分心甚至紧张。因此信息在哪显示、什么时候显示需要读者重点关注。显示策略的动态调整也要关注用户的个人设备，因为个人设备也有责任避免用户分心或者认知负荷过载的情况发生。以智能手表为例，智能手表是很好的身体状况监测器，当智能手表检测到驾驶员身体出现异常，这时最好的提示方法是通过仪表盘以及扬声器进行反馈，而不是让用户抬手去看手表上的信息，因为这有可能造成风险。同理，手机信息也应当根据座舱每个屏幕的特性，以及场景和用户状态的变化去动态调整自己的显示策略，具体可参考上述笔者提供的微信案例。五、隐私的保护在于预防而非补救每个人都有自己的一点小秘密，当驾驶员的手机信息直接暴露在公共空间中容易造成隐私泄露，因此如何保护隐私在智能座舱中是不可忽略的问题。笔者认为，由 Ann Cavoukian 博士撰写的 Privacy By Design 7 项原则中可被智能座舱重点参考的设计原则是：主动而非被动；预防而非补救。简而言之，隐私设计是关注事前而非事后。随着人数和双方关系的变化，智能座舱会从个人空间转化为公共空间，将手机中涉及隐私的信息直接映射到中控屏幕或者通过扬声器播放是不合适的。为了避免用户隐私的泄露，笔者有以下设计建议：个人设备和公用设备互联时需要身份认证校验，校验手段包括人脸识别，声纹识别、设备位置定位等等。所有涉及隐私的跨设备交互能力需要用户了解和并允许关闭，尤其个人新设备首次进入设备群后。假设在未来同账号下的个人设备都可以直连到座舱的屏幕上，设备首次连接时应该询问用户是否将短信等隐私信息推送到屏幕上，同时也允许用户设置一系列的信息同步选项。根据车内人数和空间位置合理呈现信息。在智能座舱中副驾和后排乘客较难观察到仪表盘、HUD 上的内容，因此涉及驾驶员的隐私信息可以优先显示在仪表盘、HUD 上。在多人乘坐的场景下，我们需要重点关注声音的播放，因为这容易引起隐私的泄露。上述的微信案例也是考虑到这些细节。最后，由于智能座舱多屏交互跟场景变化、用户意图、驾驶状态等多个因素有关，而且这项工作在业界和学术界仍处于初期阶段，笔者建议读者多从人因工程和以用户为中心的角度进行思考和设计。这次内容更新到这，下期再见。欢迎关注作者的微信公众号：「薛志荣」本篇来源：优设网原文地址：https://www.uisdc.com/cockpit-multi-screen-interactive-design
路易斯 建筑 孟加拉 过去「设计大师启示录」系列里我们曾谈过著名的大器晚成者密斯凡德罗（Mies van der Rohe），本次跟大家谈另一位将板凳几乎坐穿的大器晚成者：路易斯康（Louis Kahn）。“少即是多”是我说的：顶尖设计师密斯凡德罗如果要问设计师一句最适合装逼的话，相信大部分人都会说「少即是多（Less is More）」，甚至有一次我听一名企业主说了出来，可见这句话的影响力。阅读文章 > 路易斯康作为建筑师，其大众名声不完全因为建筑作品，更多来自 2003 年其私生子拍摄的纪录片《我的建筑师》在 2004 年获得过奥斯卡最佳纪录片奖的提名。纪录片《我的建筑师》海报这个影片虽然从建筑话题出发，但有更多关于亲情、爱情与友情的思考。拍摄过程也像是路易斯康儿子的救赎之旅，建议大家找来看看，如果眼浅，可以好好哭一下。大家通过影片了解到路易斯康的专业成就与其备受争议的私人生活，还有潦倒的财务状况之间所形成的不和谐时，就有了大众媒体热爱追逐的传播性。路易斯康久而久之，他的故事对比同时代其它优秀建筑师流传得更广。比如他有三个不同伴侣的家庭，彼此地理位置相隔不超过 10 公里，但居然在他离世的葬礼上才知道对方存在。如果不是精于时间管理，那么就是三个女人彼此之间装糊涂，那就更厉害了。另外虽然他名满美国，但离世时候竟然处于破产状态，债务高达 40 万美元（约等于如今 1200 万人民币）。路易斯康在朋友眼中显得神秘我们不管讲述哪一位大师的人生故事，应该尽量克制太多文学化吹嘘，要以冷静平视的态度讲述，才能让大家客观了解到大师的贡献与局限性。学会将大师视为平常人，才能真正从其身上学习到有用的东西。一、俄罗斯的犹太人路易斯康如果按辈分划分，属于现代主义建筑的第二代人物，跟他同一梯队的还有贝聿铭、埃罗·沙里宁（EeroSaarinen）、丹下健三等人，但路易斯康的年纪比他们要大 10-20 岁。归纳同一梯队是因为路易斯康实在成名太晚，年过五旬才浮出水面，六十之后才算闯出大名，此为后话，按下不表。1901 年时候，路易斯康出生于俄罗斯奥舍尔 Osel（如今属于爱沙尼亚）一个贫穷的犹太家庭，原名为伊策莱布·施穆洛夫斯基（Leiser-Itze Schmalowski）。如今爱沙尼亚的奥舍尔三岁时候因为玩煤炉，不慎烧伤了脸，此后一生他都带着明显伤疤，看起来像白癜风斑点。懂事后他曾一度感到深度的自卑，母亲却告诉他这是上帝意旨，长大后他会因此成为一位伟人，母亲的话明显治愈了他。小时候未受伤前的路易斯康1906 年时候路易斯康跟随家人移民美国，家庭环境依旧一般，住在费城的廉价公寓里。小时候路易斯康就很喜欢绘画，可惜家里穷得买不起画笔，但没难到他，他通过烧焦树枝制作木炭棒来进行绘画。路易斯康小时候的绘画除了绘画他还善于弹奏钢琴，当然并非进过什么兴趣班，而是曾有一位女士送过他们家一架旧钢琴。路易斯康凭借自学掌握了演奏，怎么学我就不清楚了，后来还用此技能为当时的无声电影配乐，赚取生活费，可见其聪明程度。1914 年后他们家顺利获得美国国籍，1920 年路易斯康则考上著名的“宾夕法尼亚大学建筑学院”，师从法国建筑师保罗菲利普（Paul Philippe Cret）。保罗菲利普1924 年毕业后的路易斯康做过一段时间绘图员，赚到一些小钱后就像过去谈过的大部分大师一样到欧洲旅行，目的是看不同的历史著名建筑。在此期间他接触到欧洲正在兴起的现代主义建筑运动，因此对柯布西耶的设计思想非常倾倒，此后我们也会从他的作品中看到柯布西耶（Le Corbusier）那种粗野主义的影子。柯布西耶的粗野主义风格建筑作品他设计出 300 万人的城市：顶尖设计师勒 · 柯布西耶现代建筑当中最著名的大师有 4 位，俗称「建筑界 F4」，四位大师之所以能并驾齐驱并非因为什么共同之处，反而是因为各自的贡献独当一面并旗鼓相当，好比香港流行四大天王，能具体说谁最厉害吗？阅读文章 > 1929 年回到美国后，路易斯康在老师保罗菲利普的工作室先混着，开始自己操刀设计项目，并且在第二年正式成家，妻子名为爱丝特(Esther)。路易斯康与其正室成家后若干年他在妻子鼓励下开始建立独立事业，1935 年正式创业，建立路易斯康设计事务所，时年 34 岁。开始创业的路易斯康事务所此后路易斯康的设计事业发展一般，长达 15 年时间里主要设计住宅，并且以现代主义风格为主，很长一段时期都没有形成自身风格，这个过程路易斯康充满煎熬与困惑。路易斯康早期不知名的住宅设计如果大家一直有看史太浓的「设计大师启示录」会清楚过去我们谈过一个现象，就是建筑师能成大名普遍都依靠公共建筑项目，所以机会很重要，把握住机会则更重要。路易斯康一直等到 52 岁才碰上机会。二、成名之作路易斯康开始被业内熟知的作品是 1952 年-1954 年建成的“耶鲁大学艺术博物馆”，这个作品他开始逐渐摸到了一种个人风格，就是尝试将古典建筑里的宏伟感移植到现代主义中。耶鲁大学艺术博物馆这得益于他 1951 年一场意大利之旅，当时他在罗马看了大量庞大古建筑，被穿越时空的历史厚重感深深打动。他思考这些建筑永恒的光辉源自什么，那一刻忽然开窍，开始形成以现代手法驾驭古典主义的建筑风格。意大利之旅中路易斯康的绘画记录耶鲁大学艺术博物馆属于一次改建工程，其整体是个现代主义的玻璃幕墙外壳，特色之处是路易斯康用米黄色粗糙外墙作为大楼其中一个立面，这样跟另一侧旧楼不至于硬生生切割，形成一种庄严感，符合博物馆气质。通过一面墙完成了新旧之间的交接建筑内部除了有大量采用粗野主义风格的混泥土墙或者砖墙之外，就是三角菱形的顶部，三角元素一直是他喜爱的几何型，往后的建筑经常出现。耶鲁大学艺术博物馆内部这个艺术博物馆属于路易斯康打开局面的作品，真正让他成大名，开始拥有国际名声的其实是 1960 年到 1965 年期间设计的“里查兹医学研究中心大楼”。里查兹医学研究中心大楼此楼属于宾夕法尼亚大学，也就是路易斯康的母校，他成名后受邀回到母校担任建筑学院教授，在此期间设计出这个作品。如果大家留意，发现路易斯康的建筑都有一种结构上的美，假设将他的建筑拆解，里面会有意想不到，多层次的丰富结构。里查兹医学研究中心大楼结构这是种人造物的美，也是格罗皮乌斯及柯布西耶那种“机械美学”，而路易斯康还要在机械美的基础上叠加古典质感，往后他的作品基本都没离开这些要素。里查兹医学大楼有别于当时比较单一的国际主义，虽然整体很简洁，但不会极端到密斯那种玻璃盒子的程度，所以我们会看到围着大楼竖起来的超大方形“柱子”。里查兹医学研究中心大楼著名“塔筒”这些“柱子”其实也是空间，称为“塔筒”，这里头就有了路易斯康著名的“主仆空间”建筑理念。意思是在一个建筑里，无论大小，应该有主次之分，次要的就是附属性服务空间，这些空间包括楼梯、电梯、出入口通道、通风排气管道等。在里查兹医学大楼里，这些功能空间就被路易斯康统一集中到“塔筒”里，最后形成特别的外观，正是“功能决定形式”。据说在此楼工作的很多人并不满意这样的设计，感觉使用不方便，通风不好等。里查兹医学研究中心大楼内部这种业界叫好而用户不埋单的设计在历史上也多了去，而且发生在不少大师身上，比如弗兰克赖特的流水别墅(Fallingwater)，因为地形与天气问题会水淹，长期不能住人，维护也超费钱。赖特的流水别墅关于赖特的详细介绍：被誉为“20世纪米开朗基罗”的设计师，为何让甲方闻风丧胆？在史太浓的《设计师长寿榜》上，排名第六的弗兰克·劳埃德·赖特（FrankLloyd Wright）是一个大人物。阅读文章 > 再比如密斯那个惹上官司的范斯沃斯住宅(Farnsworth House)，以及勒柯布西耶那个被居民拒绝入住的马赛公寓（Unité d‘habitation）等。柯布西耶的马赛公寓不管如何，里查兹医学大楼让路易斯康声名远播，不同的项目机会开始接纷至沓来，接下来看看路易斯康的巅峰之作。三、巅峰之作关于巅峰之作并没有公认答案，但路易斯康似乎知道自己将会不久于人世一般，几乎全部代表作都集中在人生的最后十年，每个项目都可圈可点。比如萨尔克生物研究院（Salk Institute for Biological Studies）、埃克塞特学院图书馆（Phillips Exeter Academy Library）、金贝尔艺术博物馆（Kimbell Art Museum）等。萨尔克生物研究院埃克塞特学院图书馆金贝尔艺术博物馆以上每个项目被认为是其巅峰作品其实都有理能依，但如果必须抉择，我希望跟大家聊一聊其在孟加拉设计的国会大厦，原因有两个。孟加拉国会大厦其一是感觉路易斯康在这个作品当中完全放开了所有专业领域法则与商业市场的羁绊，其二是这个作品最能代表路易斯康惯于创造“永恒建筑”这样的追求。孟加拉国会大厦在他离世多年才建好，但基本按照其想法实现，在设计国会大夏的过程中路易斯康三（表示 n 次）易其稿，一次又一次推翻方案，时间长达 12 年，他最后就死于往返孟美两国途中的车站。孟加拉国会大厦内部这个项目也属于路易斯康承接过最大的设计建筑工程，其整体包含议会大楼、国会成员宿舍、医院、图书馆、学校、气象站以及热带疾病研究中心所构成，是个超大型综合建筑。孟加拉国会大厦俯瞰图孟加拉国会大厦属于很典型的粗野主义，不管外墙还是内部都是清一色的裸色混泥土，在一些墙面拼接位置则贴上白色大理石，起到画龙点睛的装饰效果。孟加拉国会大厦正面该项目建筑期间爆发了孟加拉国（原东巴基斯坦）独立战争，很多大型建筑都被炸毁，但已经完成主体的国会大厦却幸免于难，此事江湖上流传两个说法。其一是巴基斯坦空军经过的时候以为这里已经炸过，这成为建筑界调侃粗野主义风格时候经常会说的段子，其二则是空军以为这是一个宏伟的古典建筑，所以没炸。远看确实像已经炸过可见路易斯康的设计无论你懂不懂，都能感受到古典建筑那种恢弘气质，这也是他去世后被理论家反复研究的其中重要原因。过去我们谈过安藤忠雄的故事，安藤的偶像也是柯布西耶，但如何将柯布西耶风格与时俱进的运用，路易斯康是安藤忠雄的学习对象，安藤的风格里也有康的影子。自学成才的建筑鬼才：日本顶尖设计师安藤忠雄（上）不知不觉，安藤忠雄已经年纪八旬，这位日本建筑师在中国享有很高知名度，其最新落成的作品恰好在中国顺德，名为「和美术馆」，坦白而言，这个馆从名字、建筑设计、平面视觉风格而言都极为日式，当前大家已经可以从搜索引擎检索到官网，进去的时候假设不看中文，基本认为这是一个日本网站。阅读文章 > 自学成才的建筑鬼才：日本顶尖设计师安藤忠雄（下）上集已经聊过安藤忠雄如何从一个打拳击的懵懂少年进入建筑设计行业，并且成功完成自己的处女成名作——住吉的长屋。阅读文章 > 前面谈过，路易斯康的建筑常常有结构美，孟加拉国会大厦的建筑模型如果进行动画拆解，大家会被震撼，这些繁复却利落，具有功能性的结构是如何被路易斯康构思出来的呢？。模型方式还原国会大厦结构国会大夏内部精彩的结构这些结构涉及很多采光通风方面的考虑，比方国会大厦外部会看到不少大型几何孔洞，有圆形、矩形、三角形，除了带来设计形式感之外，更多是为了实现功能与照顾人的体验。国会大厦外墙这个项目是路易斯康设计语言的综合体现，除了在专业与艺术角度获得大家共鸣，在当地也非常受人民欢迎，这一点让此建筑显得更加伟大。四、结案陈词很多朋友在听路易斯康的故事时都好奇为何他会负债那么高？有一个说法是因为他太过于热爱建筑设计工作，很多同行都将其形容为艺术家，有时候他为了达到自己想要的效果不惜与甲方叫板或者中途搁置项目。路易斯康第一位情人非常漂亮由此导致很多项目都出现亏损或者不盈利，长期入不敷出，加上成名实在太晚，久而久之就陷入无法抽离的债务危机。今天的故事讲到这里，希望大家可以从设计或者人生经营角度获得自己的启发。感谢各位，我们下期再会！欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/louis-kahn
噪点 降噪 效果 最近在项目中用 OC 渲染玻璃或者室内场景渲染时，经常会发现画面有噪点的情况，碰到疑难杂症是我最开心的一件事，又可以学到新东西了。所以，利用午休时间专门去研究了下这里的问题。我研究的方式包括看 OC 官方文档和刷 Youtube 和 B 站。今天就把我研究的解决方案和大家分享下，包括 4 种降噪方法和 4 种提升渲染速度的方法。因为有时候在渲染这种发光和玻璃材质的时候，不仅有噪点还很卡，干脆一起解决了。如果你用 OC 渲染有噪点又卡的话，相信今天的文章会对你有帮助，记得收藏分享给身边的同事吧。更多C4D相关技巧：这10个常用的C4D技巧，帮我提升了10倍设计效率（附教程）Hi，我是彩云。阅读文章 > 先看问题，我遇到的噪点情况：① 玻璃材质透光过来会这种亮噪点② 投影和边缘有噪点，一般在玻璃材质中发生的情况比较多我的解决办法有 4 个一、降低 GIGI 的作用是让光线充分的曝光，而如果你设置的太高会导致光线过于聚集，有溢出从而出现光噪点的情况，也就是渲染时经常能看到的那种亮晶晶的斑点。解决的办法就是改低，我一般是给到 10，当然如果还有溢出，给到 1 都行。不过也要看，太低的时候可能会导致部分区域光线不够，又容易导致照不亮，所以也要视你渲染的情况而定。但清楚了原理就知道怎么调了。官方文档里也有说明，通过改变数值来增减能量，也可以调整上面那个焦散模糊，一般把默认值改到 0.35 效果比较好。二、调整移除高亮像素在 OC 的相机设置里，有这个叫移除高亮像素（hot pixel removal ），在官方文档中有说明是在渲染期间移除掉高亮的单个像素，使其和周边像素融合。这就意味着它能处理的噪点比较有限，少量噪点情况比较合适，不适合解决大面积的噪点。它通常与 GI 配合使用，如果 GI 改到较低的时候还不能修复问题，就适当改低这里的参数，一般 0.5-1 之间。但官方也建议不要过度使用，因为它其实是属于后期处理，类似于 PS 后期模糊。改到太低的时候，会使得画面变得模糊，一般通过调低 GI 就可以达到效果。三、使用表面亮度当选择使用发光材质作为灯光时，也容易发生噪点的情况，尤其是室内场景渲染。可以尝试在材质里面勾选“表面亮度”，这个功能是会使得模型的发光更符合真实物理精度的发光表现，也能降低一定的噪点。当你勾选表面亮度时，发光可能会瞬间暗下来，不用担心，把能量值（power）调高就好了。可以解决一些由于自发光所造成的噪点四、打开 AI 降噪功能在 OC 摄像机中打开 AI 降噪功能，在 OC4.0 以上版本才有，是专门针对渲染噪点开发的功能，很好用，叫 Spectral AI denoiser。我给大家详细解释这里的功能使用。翻译下几个设置：① Enable启用 AI 降噪功能。如果启用了 OC 摄像机标签里打开了 AI 降噪会覆盖掉 OC 设置中的降噪设置，需要注意一下。② Denosie volumes在一些有体积雾存在的场景里打灯，经常会有噪点出现，勾选这个可以很有效的去除。③ 最小降噪采样 min denoiser samples可以开到最大 120，这个参数的意义是最终采样的区域，这个数值调大会选择更大的一些区域进行降噪，提高效果会更好一些，因为一些较大噪点只有在采样较大时才能被模糊掉。注意，如果你勾选了完成时才降噪的话，那么这里的参数会不生效。④ 最大降噪采样 max denoiser interval一般不改，使用默认值 20 就好。在亮部和暗部对比非常强烈的时候，可以适当改低一些。⑤ 混合 blend是将原图和降噪图进行混合，数值越大叠加原图的部分就越多，一般给 0.1 即可。太小的话，模糊更多会丢失部分原图细节，改太大的话，可能噪点又会被叠加回来。（根据采样值大小改变，一般视情况而定）如果你想在渲染过程中就看到降噪的效果，记得把这个勾去掉，默认是渲染完成后才能看到降噪效果，我一般是不勾选。在渲染输出时，需要在输出设置那里要勾上 use denoised beauty pass，开启后期优化组，勾选 AI 降噪，不然出图的时候不会识别在摄像机中设置的降噪效果另外，在渲染玻璃材质和发光材质的时候经常会遇到渲染很卡很慢的情况，所以再分享几个小秘密，可以让 OC 用起来更顺滑，渲染速度更快。2 大难题，咱们今天一并解决了。1. 调低采样值当你把智能降噪和使用全部 GPU 打开时，采样可以给到比较低，比如 500 就够。当你渲染大图，比如 4K 图时，用这种办法挺好用的，渲染图尺寸很小时，比如 2K 图可能效果不是太好，这种尺寸我一般会给到 5000。但如果你渲染动画的话，一般给到 800 就可以，速度快效果还 OK。2. 开高平衡采样和最大采样这个在官方文档中有提到，使用更多的内存和显存，以达到最佳渲染效果。因为大家的电脑配置已经提升了很多，其实这个默认值是针对很低端的电脑，所以建议打到最大。3. 勾选自适应采样因为渲染时有噪点一般发生在阴影面和一些角落的地方，开启这个自适应采样后，会把渲染的能力更加智能，提升难渲染处的渲染能力，这样也能使得渲染速度更快。相当于把渲染效率用到极致。只要开启就好，渲染参数一般不用动。4. 把 OC 预览窗口中的选项采样改到最大当我们转动摄像机时，有时候画面容易卡，可以把 Sub sampling 改高，这个在官方文档里也有说明。意思就是说，默认情况下是 None，它在移动的时候也是保持采样为 1x1 的最小采样精度，这样其实很没必要。我们需要减小这种过程精度，把移动时的采样改成 4x4，这就类似于 AE 中预览选择跳帧预览一样的道理，会加快中间渲染预览的速度。不用担心渲染质量，因为当你移动停止时，它的渲染又会自动恢复最小精度，质量不会变。在社群里经常看到有些同学渲染一张静态图都要好几个小时，其实我看了下，画面复杂度并不高，抛开电脑配置低的原因，由于设置不当的原因白白浪费了大量的时间，太可惜了。总结通过以上的一些操作，基本上就解决了常见的噪点和卡顿问题。磨刀不误砍柴工，花点时间研究下背后的原理之后就不会自己瞎捣鼓了。你发现没有？很多问题都可以在 OC 的 help 中找到解决方案，官方这份文档已经讲的足够清晰了，如果你遇到问题，首先应该去查文档，然后再是去找教程，这样效率会高很多。如果你还有别的疑问，欢迎评论区留言交流。如果你有学到，记得分享到你的朋友圈哦~欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/oc-skills
效果 对称 生成器 大家好，这里是和你们聊设计的花生~科技风一直都是 PPT 设计中比较热门的风格，而想做好科技感，除了合适的配色，自然也少不了各种具有形式美的抽象几何图案。今天就为大家推荐 5 个高质量的科技风背景生成工具，用它们可以一键生成色彩绚烂、形式精致、甚至是具有动态效果的科技感背景，如放射线、粒子、波浪、几何立体、光效等。且这些工具都是免费的，打开即用，可以极大提升我们的工作效率。简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 一、Design tools网址直达： https://wangyasai.github.io/designtools.html （使用梯子速度更快）Design tools 是由数据可视化设计师 @赛亚大人 开发的神器站，包含粒子、波浪、放射线等多个元素生成器，且都是动态效果，科技感十足。每个生成器都有大小、颜色、样式、速度等多个参数可供调节，因此样式变化非常丰富。生成的效果可以下载为 PNG 透明底格式，也可用使用录屏工具将其保存为动态背景。pbkDesigntools 里的工具合集使用 THE MATRIXS 生成的效果图使用 PLAY A BALL 生成的效果图免费好用！自媒体时代设计师必备的5款Gif制作工具大家好，我是和你们聊设计的花生 ~身处自媒体时代，我们每个设计师都可以作为内容创作者在微博、小红书、知乎、朋友圈这些地方分享自己的经验和想法，而无论是写设计教程，还是制作表情包，Gif 动图都是一种极佳的信息传递媒介，它比静态图片更详细生动的展示步骤和细节，也比视频更轻便直观，因此应阅读文章 > 二、Bg Painter网址直达： http://bg-painter.com/Bg Painter 是一个集合了 30 种酷炫背景生成器的网站，开发者是中国设计师徐方烨。使用 Bg Painter 我们可以生成网格渐变、放射线、粒子或线条图案的背景，每种图案还可以调节成不同的样式和颜色。最终结果可以保存为 PNG 图片，也可以使用 Gif 录制工具将具有动态的效果保存为动态背景。Bg Painter 里的工具合集网格渐变生成效果科幻粒子生成效果三、Fffuel网址直达： https://fffuel.co/Fffuel 是一个集合了二十多种图案背景生成器的网站，其中效果最好的是几何线性图案，包含各种不同的样式和渐变效果。每种图案样式都有非常大的调整空间，线条粗细、密度、颜色、组合样式都可以修改。下载格式为 SVG，导入 Ai 后可以再次进行修改或重新组合。Fffuel 里的工具合集使用 gggyrate 生成线条样式，导入 Ai 后调整所得的效果使用 cccoil 生成线条样式，导入 Ai 后调整所得的效果未来科技感怎么做？快来看这5个顶尖灵感参考（附免费教程）大家好，我是和你们聊设计的花生~具有未来科技感的设计风格在高新科技、科幻游戏、潮流综艺等领域非常受欢迎，包括前段时间备受瞩目的哈工大录取通知书，也是运用了这种科技感的设计风格。阅读文章 > 四、Silk网址直达： http://weavesilk.com/详细介绍： https://uiiiuiii.com/software/204185.htmlSilk 是一个交互光效生成器，在屏幕上滑动鼠标，就能生成如丝绸般流畅绚丽的光效图案。笔画会以镜像对称或者中心螺旋对称的方式呈现，这也使得生成的图案具有秩序美感，随便几笔生成的效果也有非常华丽，但也可以关闭对称选项。光效的颜色及对称倍数可以修改，最终效果可以保存为 PNG 格式的图片。艺术家使用 Silk 生成的关系图案，图片来源于网络。未开启镜像对称和螺旋对称，对称倍数为 0 的效果展示未开启镜像对称和螺旋对称，对称倍数为 5 的效果展示五、Fluid Simulation网址直达： https://paveldogreat.github.io/WebGL-Fluid-Simulation/具体介绍： https://www.uisdc.com/fluid-simulationFluid Simulation 是一款在线流体效果模拟器，滑动鼠标就能在界面上生成类似于彩色油墨在水中喷涌扩散的效果。与上面介绍过的生成器一样，流体的色彩、扩散样式、速度等参数都可以修调整，形成的效果也是千变万化。按 P 键可以将动效定格，点击「take screenshot」可以保存为图片，勾选「transparent」则可以保存为透明底图片。Fluid Simulation 的多色流体效果Fluid Simulation 的单色流体效果设计博主@Simon_阿文使用 Fluid Simulation 生成素材制作的 PPT 页面以上就是今天为大家推荐的 5 个科技感背景生成神器，希望对大家的设计有帮助~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：PPT超全自学指南（14）：进击的版式之Logo页处理和科技风拆解进击的版式简而言之就是分享一些我观察PPT设计作品的方法，从整体到细节都会讲到。阅读文章 > 照片没有氛围感？快来试试这款打光修图的神器「Relight」大家好这里是和你们聊设计的花生~在人像摄影中，灯光设置是非常重要重要的一环，好的打光能丰富画面层次，提升整体情绪氛围。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/5-background-generator
元素 页面 视窗 写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。X 轴指水平方向上的轴线，Y 轴指竖直方向上的轴线，以及 Z 轴指在三维空间中垂直于视窗平面的轴线。当设计 B 端界面时，让元素沿着这三个轴进行布局，既能理清我们的设计思路，页面的元素也能展示得更有逻辑。本文围绕这三个轴，来看看在 B 端界面的三维空间里，都有哪些设计规律。更多B端设计干货：5000字干货！超全面的B端设计指南：消息通知消息通知在我们设计的过程当中非常重要，因为它作为系统与用户之间沟通的桥梁，能够帮助我们提示用户：“目前的操作状态、系统的公告、用户之间的互动内容”，而不同的消息内容，我们需要使用不同的消息通知组件来进行反馈，比如用户与用户之间的互动应该采取什么互动方式？阅读文章 > 一、X 轴的布局与适应B 端界面在 PC 视窗下展示，范围更大，如常见的分辨率尺寸有 1280x1024、1440x900、1920x1080 等，且浏览器还支持动态拖拽改变视窗宽度。所以 B 端界面在 X 轴上应该更注重内容的延展和适配，合理利用横向增长的空间。根据这一特点，在这一部分中，我们分业务场景来探讨都有哪些典型布局，并针对每一种布局给出合适的适配方式。B 端典型的业务场景，可大致分为表格、图表、表单、卡片、文字详情五大类页面。这几类界面在 X 轴上排列的方式为单栏型、双栏型、多栏型。如果有侧导航，则在页面最左侧增加侧导航即可，内容区的布局不受影响。1. 单栏型表格、图表，这类需要较大展示空间的场景，一般一个页面只有一栏，不再在横向空间进行切割。当视窗横向拉伸时，也为了预览更多的内容，表格和图表进行横向拉伸，保持撑满视窗的状态。2. 双栏型表单、文字详情类的页面，采用双栏结构的概率较大。因为表单页除了表单本身的内容外，往往还有右侧的辅助说明面板，或者是预览面板。文字详情页的右侧也经常出现其它阅读内容的推荐列表。当这两类页面视窗在横向拉伸时，适应的方式通常有两种。① 主模块宽度拉伸，始终撑满视窗，副模块宽度固定。如果主模块每行内容都比较多，推荐使用这种方式，能更大化地浏览主模块的内容，减少不必要的换行。但缺点是，由于内容本身如表单项、详情文字等在 X 轴上占用的空间不多，他们所在的模块横向拉伸后，会出现很多留白。② 各模块保持宽度固定并居中展示，不跟随视窗伸缩而变化。如果主模块每行内容不多，又需要频繁的左右对照，推荐使用这种方式。3. 多栏型多栏型页面一般用于数据看板、媒体卡片(视频/图片)的展示。因为这类业务场景，卡片数量多，无法简单地将页面进行区块的分割，所以以卡片为单元来填充页面。当视窗横向拉伸时，这里也会出现 2 种适应的方式。① 数据看板类页面，每个卡片等比拉伸（也可仅横向拉伸），列数不增加，让图表能展示地更清晰。② 媒体卡类页面，卡片需要设定一个最佳展示的宽度如 w，当视窗拉宽时，卡片等比放大。当页面拉宽到能增加一列宽度为 w 的卡片时，所有卡片宽度都恢复到 w，增加一列。上述说了这么多适配的规则，当然我们也可以给视窗设定一个统一的适配上限，避免当视窗非常宽时，页面的元素过于左右分离，反而不方便浏览。比如我们可以设置当视窗宽度＞1920px 后，页面元素就不再跟随撑满，达到内容区宽度上限值，居中展示在界面中。二、Y 轴的空间利用B 端界面，面对复杂的信息，我们往往会面对两类问题，如何承载大量的信息，如何区分强弱主次。这就涉及到页面 Y 轴的空间利用了。这里我们提供 4 个小办法来解决上面的问题。当出现大量信息时，应该注重 Y 轴空间的扩展，合理搭配翻页、加载等逻辑。当希望对页面元素区分强弱时，可以搭配滚动吸顶、局部折叠等交互，有序展示更多信息。1. 如何承载大量信息① 替换型对于表格类页面，为了方便快速查找所需信息，采用分页器的方式展示更多的数据内容，即把当前页内容做替换。即页面 Y 轴的高度是固定的，仅做内容的变更。② 向下延展型对于瀑布流类页面，由于数据量大，且没有快速定位的诉求，使用无限加载的方式，向下加载更多的数据，这种类型的页面 Y 轴可无限延展。2. 如何区分强弱主次① 强-滚动吸顶当页面滚动到某个位置，需要去强调一些导航性质的内容时，我们可以使用滚动吸顶的交互，即当把这个元素（如标题）滚动至当前视窗的顶部时，发生吸顶事件，始终停留在页面中，该元素所引领的模块在其下方滚动浏览。当把这个模块滚动完，吸顶交互失效。这样即能临时性地强调某些内容，还不会影响其它模块在 Y 轴上的展示。② 弱-局部展开对于表单类页面，若在某个选项下还存在二级内容，则在初始展示时，优先突出主选项本身，当选中后再展开二级内容。这样即能节省首屏空间，也能顺应使用者的学习、使用心智，在合适的时机展示细节内容。三、Z 轴的叠加顺序说完 X 轴、Y 轴的布局设计，我们最后来看看 Z 轴。这里，我们需要把视角从二维平面转为三维空间，比如吸顶的导航，菜单浮层，模态弹窗这些都属于出现在 Z 轴上的元素，他们之间可以进行层层叠加和嵌套，于是会出现叠加冲突的场景，导致发生错误的遮挡现象。所以 Z 轴设计的关键点在于不同元素的叠加排序设计。那么怎样才能有一个贯穿全局的合理排序，让元素们能乖乖排在自己的队列中呢？此处，我们将页面的所有可能出现的元素按照 Z 轴的特点归类到三大区间里。每个区间内给出相应元素的排序顺序指导，并配合动态计算的逻辑，Z 轴上的元素就能整齐地叠加起来啦。1. 基础区间展示类-页面中默认就存在的、不会对其它元素造成遮挡的元素（表单、表格、文字、按钮、图表、图片等）。固定类-固定在页面某处的元素，滑动页面时会对 a 的元素产生遮挡（如吸顶导航、固定表头/列、锚点、返回顶部按钮等）。浮层类-由 a 中的元素触发出的、指向该元素的临时浮层元素。会对 a 以及固定元素产生遮挡。临时浮层之间的 z 轴层级遵守触发的时间先后顺序，若临时浮层可以同时存在在界面中，则后触发的层级更高（下拉浮层、气泡）。2. 模态区间模态层-由基础区间的元素触发的，覆盖整个视窗的模态元素，当该元素出现后，至于基础区间所有元素层级之上，基础区间的所有功能无法交互。(抽屉、对话框和全屏预览等)临时浮层-在模态元素上出现的临时浮层，计算高度时，可把 d 层想象成基础区间的 c 层。（下拉浮层、气泡等）第二层模态层-在 d 出现之后出现的覆盖整个视窗的模态元素。不特指第二层，也可以是第三、或更多。模态区间内，多个模态层可进行叠加（即上文的 f），叠加时一样需要遵守触发时间的先后顺序，后触发的层级更高出现在更上层。但是我们也应注意，模态层不能叠加太多，会导致当前页面覆盖过多内容，一般最多用到两层模态层就能满足大部分场景了。3. 顶层区间全局层-全局的、不被模态元素遮挡的元素。可以常驻在页面中，也可临时出现。临时层-由 g 触发出的临时浮层最高层-始终动态高于当前页面所有层的元素（比较典型的是 Toast 组件）。四、写在最后到这里，我们就浅谈完关于 B 端界面的 X、Y、Z 轴上的设计特点了，虽然是一些高度抽象的内容，真正按照业务需求执行设计的时候，遇到的界面一定比我们这里谈论的更复杂，但是只要我们清楚底层的空间布局、适应方式、扩展手段和叠加逻辑，再复杂的界面无非就是规则的嵌套，希望这篇文章能带给大家一些小小的启发。欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/xyz-design
内容 瀑布 网格 编者按：本文从组件介绍、使用场景、设计要点、样式拓展4个方面，帮你快速熟悉UI组件中的瀑布流设计。往期组件科普：UI组件应用指南！标题栏设计方式详解编者按：本文从标题栏的组件介绍、设计要点、使用场景、样式拓展四个方面，帮你掌握UI组件中的标题栏设计。阅读文章 > 一、组件介绍瀑布流 (Waterfall Layout)，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。所以我们可以总结出瀑布流的两个最核心的时间特征：无限加载内容等宽不等高二、使用场景瀑布流因其视觉特征，多用在以多种比例图片/视频为主体的内容流中，最典型的例子莫过于花瓣、Pinterest，这类图片采集网站使用瀑布流可以更有效地利用页面空间并充分展示图片内容而不裁切，同时让用户的浏览体验更加沉浸，错落的图片也相对更容易形成有效的视觉引导，引导用户不断向下浏览。以及另外一类以小红书、淘宝为代表的强内容展示 APP，在布局内容时不约而同地使用瀑布流，其核心原因即在于其强视觉引导的特性。三、设计要点1. 列宽的制定逻辑对于等宽的网格列表来说，我们只需要去关注它们之间的间距是多少，这样更方便不同宽度设备的适配，网格会自动扣除间距并适配网格宽度，而不必设计师一一去定义。例如，我们只需定义两列网格的左右边距均为 20pt，间距 12pt。那么不管是在 12/13/14 的 390 宽度中，还是在 ProMax 的 428 宽度中，布局都会固定住这三个数值，并自动适配列宽，列宽的数值具体是多少，并不需要我们关注。这也正是两列网格通用的适配逻辑。2. 内容的布局瀑布流有三种内容布局形式。① 图片等高在图片等高的情况下，能造成网格高度错落的原因只有文案。文案的长短不一、是否有标签等因素，会造成每个网格中的文案部分出现高度差异，从而形成网格错落。但因为文案通常不会超过两行，这种高度的差值往往是固定且非常有限的，也就是说更容易在下方某些地方回归对齐。所以这种布局更容易把控视觉秩序，但会因为强制图片等比例导致内容的不完整，除非限制用户上传图片的比例。② 根据图片比例自由变化这是一种完全不限制图片比例的形式，网格的高度不仅由图片影响，也由文案影响。几乎不可能做到在下方某处重新对齐，所以视觉上往往更加混乱，偶尔会出现极长或极短的网格，导致视觉权重出现非意图的倾向。③ 根据有限图片比例变化这种形式的意思是说，在用户上传图片时就限制图片在有限的几种比例之内，所以尽管网格高度同样由图片和文案共同影响，但却将高度差值限制在了相对有限的范围内。现在大多数电商 APP 采用的便是这种布局形式。3. 内容的类型瀑布流发展至今，对于内容类型也有许多 App 根据实际项目需求做出了自己的探索。相较于单一的内容类型，因为内容构成更复杂、需求更多元，更多大型 App 会偏向选用多类型内容混合的形式掺进瀑布流里，在达到功能需求的同时，减轻单一性内容对用户浏览时的信息疲劳。具体来说，内容类型分成两个大类，主内容和运营内容。主内容主内容根据 App 类型的不同，包括但不限于图片、视频、动态、商品，主内容依然是瀑布流中占比最多的内容类型。在一个页面内可以使用一种主内容，也可以多种混合。在多种主内容混合时，设计形式上通常并不会有太大的区别，只会在同一设计框架下，增改该内容类型特有的信息。运营内容针对 App 不断扩大的运营需要，更多 App 会在瀑布流中插入运营内容。例如，淘宝会在瀑布流最开始的左上角放置一个小型的轮播组件，左上角则是主推的与拼多多抗衡的百亿补贴功能入口。以及马蜂窝，在顶部放置一个两列宽的轮播推荐位。这些都是很不错的根据自身需要改造瀑布流的实践。三、样式拓展1. 站酷站酷的瀑布流会在中途插入一组视觉上差异较大、与主内容类型相干性也较低的推荐设计师用户，因为站酷瀑布流内容类型较为单一，这么做可以用来调节单一内容类型对浏览造成的视觉压力。2. 马蜂窝马蜂窝的瀑布流样式差异化做得相当大，不管是纵向对比(与同页面其他卡片)还是横向对比(与其他 App 瀑布流)，设计都显得非常大胆前卫，所以马蜂窝的卡片样式有比较好的参考性。3. 其他瀑布流样式结尾瀑布流的组件就介绍到这，后续所有有关组件的介绍都会同步更新。欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/waterfall-layout
用户 球迷 数据 2022 卡塔尔世界杯已经拉开帷幕，相信大家从这周开始，都已经陷入四年一次的狂热的足球氛围中。那你有听过懂球帝这款足球 APP 吗？作为国内用户规模和影响力最大的足球社区，据官方统计，懂球帝在全国足球迷中的渗透率高达 83%，甚至有这样一句口号——十个足球迷，八个用懂球帝。本期设计大侦探，全面拆解体育行业的独角兽懂球帝，看看一款足球类APP是如何设计的！往期拆解：万字拆解！樊登读书产品设计全方位深度解析编者按：本文从产品画像、读书服务、内容服务、会员服务等多个方面，完整拆解樊登读书的产品设计。阅读文章 > 一、导读1. 内容结构全文 8517 字，分为五个部分，分别是导读、产品画像、内容服务、变现服务和设计总结，你可以通过下面的思维导图对本文内容结构有全面的了解。2. 适合人群第一类，UI/交互设计师，可以跳出执行层，去思考懂球帝的产品设计策略，提升产品分析能力；第二类，产品经理/运营，通过全面的产品设计拆解、策略推导，获取产品设计参考；第三类，体育产品行业从业者，通过对懂球帝的全面拆解，获取竞品设计参考。3. 分析模型我们主要运用三种模型对产品的功能、设计进行拆解，由于没有权威的官方数据，所以我们更多以推导的形式去思考懂球帝为什么这样设计。第一个，增长模型。由戴夫·麦克卢尔提出，包含用户获取、用户激活、用户留存、获取收入、用户推荐，分别对应用户生命周期中的 5 个重要环节，主要用于分析产品的功能价值。第二个，上瘾模型。由尼尔·法埃尔提出，通过对上千种习惯类产品的调研，总结出一款产品如果要让用户习惯、上瘾，可以按照触发、行动、多变的酬赏和投入四个步骤去设计，主要用于分析产品的功能价值和推导产品的策略设计。万字读书笔记！产品设计宝典《上瘾》全面解读！（上）为什么人们每天都会刷朋友圈、刷抖音，而且一刷就是几个小时，根本停不下来？阅读文章 > 万字读书笔记！产品设计宝典《上瘾》全面解读（下）《上瘾》这本书从大量的实验案例调研中，总结出那些让用户上瘾的产品设计原则，最后提炼出了一个让用户上瘾的模型，读完以后，真的恍然大悟，原来习惯类的产品需要这么设计。阅读文章 > 第三个，社会心理学。主要结合西奥迪尼的社会心理学《影响力》六大说服力原则——互惠、承诺和一致、社会认同、喜好、权威和稀缺，去推导产品设计的用户心理设计，主要用于推导产品的策略设计。二、产品画像1. 产品介绍懂球帝是一款体育类 APP，首个版本发布于 2013 年 12 月 5 日，根据易观千帆 2022 年 8 月的最新数据，懂球帝月活跃用户人数 301.8 万。懂球帝持有中超、德甲、足协杯等赛事直播版权，靠着多年的积累，吸引了众多国内外豪门俱乐部、足球媒体和运动员在懂球帝开通官方懂球号，目前是全国用户规模和影响力最大的足球内容平台和社区。2. 商业模式① 客户细分懂球帝的客户群体主要以足球迷为主，年龄区间在 24-35 岁，男性居多。据官方数据，在足球球迷群体中，懂球帝 APP 的渗透率高达 83%。从这些数据可以看得出来，懂球帝是一个覆盖大众足球用户群体的产品，不仅为用户提供专业的足球资讯、直播、竞彩和游戏等服务，还满足了很多小众用户群体的需求，比如球星卡交易、赛事举办曝光等。② 价值主张懂球帝以懂足球，更懂你为价值主张。③ 渠道通路懂球帝主要通过网络媒体平台进行拉新引流，比如微信、微博（56.6 万）、抖音（110 万粉丝）、知乎和小红书（3.7 万）等平台，其次还会通过赞助线下足球比赛活动进行宣传，比如懂球帝足球星火公益计划等，还有会直接投入广告进行宣传，比如在世界杯、欧洲杯、欧洲五大联赛投入广告，邀请世界巨星为产品代言等。④ 客户关系懂球帝主要通过社区、圈子和粉丝群等方式和用户建立紧密的关系。⑤ 收入来源懂球帝的收入来源主要通过会员 VIP、商城、竞彩、游戏和广告等方式实现营收。⑥ 核心资源懂球帝在足球领域深耕已有十年，无论是技术、数据、资源、口碑还是球迷用户，都已经有了非常夯实的积累。⑦ 关键业务懂球帝的核心业务包含足球资讯、球迷社区、体育彩票、比赛直播、球星卡交易和游戏等。⑧ 重要合作伙伴第一类，体育行业的知识创作者，通过签约合作的形式为平台输出高质量的内容，比如专栏和懂彩帝；第二类，体育运动员、解说员及具有一定名气的体育从业者，通过在懂球帝建立懂球号和球迷进行深入的沟通，提高个人知名度和影响力；第三类，体育机构和俱乐部，比如亚足联、欧洲各大联赛豪门俱乐部均在懂球帝开通了懂球号，和中国地区的球迷第一时间进行交流互动，提高球队知名度和影响力。⑨ 成本结构作为一个互联网产品公司，懂球帝的成本开销主要是产品运营和开发人力等成本。3. 用户画像懂球帝的用户群体主要以男性用户居多，占比 75.55%；从年龄分布看，以 31-35 岁的用户群体最多，占比 39.55%，其次为 24 到 30 岁的用户，占比 33.21%；从用户消费能力看，懂球帝的中等及中高消费者占比 67.11%；从地域分布看，三线城市用户最多，占比 21.62%，新一线城市占比 23.05%，二线城市占比 19.39%，一线城市仅占 12.42%，其中广东省最多，山东和四川省位居前三。4. 信息结构懂球帝的一级菜单包含首页、比赛、主队、发现、数据和用户中心。「首页」采用千人千面的信息流方式，根据用户的兴趣、标签和浏览记录推荐新闻，其中包含了头条、精选、快讯、游戏等热门栏目；「比赛」主要为球迷提供最新足球、篮球比赛的体育赛事直播，球迷可在直播间和专家进行互动；「主队」是为球迷设置自己喜欢的球队，当球队开启比赛时，会第一时间通知球迷；「数据」主要为球迷提供各大主流联赛的当季的联赛排名、积分、射手榜和赛程等数据；「用户中心」设计成抽屉导航，聚合了懂球帝整个产品其他功能的入口，比如赛事、公益足球、系统设置等功能。从信息结构看，懂球帝的产品功能并不复杂。5. 重要迭代记录根据七麦数据统计，懂球帝 APP 首个版本发布于 2013 年 12 月 5 日，截止到 11 月 20 日，APP 版本已经更新至 V7.8.8 版本，近一年版本更新次数为 17 次。版本重要迭代记录2015 年 1 月，发布 V3.0 版本，全新 UI，球员球队资料页改版，新增实时聊天室、订阅等功能；2016 年 2 月，发布 V4.1.1 版本，Slogan 为「足球迷神器（足球、直播、新闻、足彩、足球论坛社区）」；2016 年 7 月，发布 V4.6 版本，上线商品搜索功能，方便用户购买装备；2017 年 1 月，发布 V5.1 版本，圈子功能改版，新增 Twins 功能（球员 twitter 和 ins 动态）2018 年 4 月，发布 V5.9.9 版本，新增球队数据页，为用户提供丰富的足球数据；2019 年 1 月，发布 V7.0 版本，全新 UI，提供舒适的阅读体验，新增世界功能；2020 年 3 月，发布 V7.3.5 版本，上线球队球员人气榜功能，支持用户为喜欢的球队球员打榜；2020 年 7 月，发布 V7.4.2 版本，Slogan 升级为「不只是一个足球 APP」；2021 年 9 月，发布 V7.6.6 版本，上线会员连续包月服务；6. 产品生命周期根据易观千帆 2022 年 8 月数据，懂球帝月活跃用户人数 301.80 万。官方数据公布目前懂球帝下载量超过 1.5 亿次，注册用户 4000 万，在足球迷群体中，懂球帝用户渗透率超过 82%，是国内最大的足球聚合平台。懂球帝目前在 2016 年就拿到了 C 轮融资，明年即将年满的十周岁的懂球帝，目前处于产品生命周期的成熟期，当下聚焦于商业变现的探索和创新。7. 竞争图谱截止到 2022 年 11 月 21 日，懂球帝 APP 在苹果的 APP Store 应用市场，体育分类排名第 11，腾讯体育位居第一，月活跃用户人数 1,205.75 万；在体育彩票分类，懂球帝位居第一，是中国体育彩票月活跃用户人数的 3 倍；在体育资讯分类，虎扑以 555.25 万月活跃用户人数排名第一，懂球帝位居第二。三、内容服务「内容服务」是产品实现用户留存的关键方式。作为一个足球媒体，懂球帝不仅覆盖了欧洲五大主流联赛，还包含中超、中甲、电竞等联赛资讯，为球迷提供了丰富的内容。作为一个社区，懂球帝以 UGC 用户生产内容模式，吸引了全国众多足球爱好者和创作者加入了平台，并设计了圈子（球迷可根据自己的喜好加入不同的圈子，比如皇马球迷圈、梅西球迷圈）等栏目，为全国球迷提供了一个创作、交流和娱乐的足球平台。其次懂球帝利用自身强大的技术资源能力，为用户提供每日足球/篮球比赛的直播，满足众多球迷无法观看比赛或需要付费支付观看的痛点。懂球帝还提供了非常强大的数据查询功能，球迷可以在「数据」栏目查询到当季各大联赛最新的赛程、排名和射手榜等信息。1. 内容频道作为一个足球媒体社区，懂球帝的内容频道主要分为以下几类。按联赛分，有欧洲五大联赛（英超、西甲、德甲、意甲和法甲）还有中超和中甲联赛；按内容长短分，有「快讯」（提供每天最新的足球资讯）；按内容质量分，有「精选」和「深度」；按兴趣分，有「关注」和「头条」；按传播形式，有「视频」；其次还有电竞和彩经等栏目。从内容频道设计分类看，懂球帝的内容非常夯实，可以满足不同球迷们的需求，但是内容设计的创新度有一定缺失，比较中规中矩。① 头条「头条」作为懂球帝的首页，采用千人千面的信息流形式为用户推荐足球资讯。头部的轮播主要以当日或当周热点赛事或活动为主，轮播下方内容为当日热点比赛预告或比分，方便球迷第一时间获取比赛数据。从第一屏开始，平台主要结合用户的个人兴趣、标签和主队（球迷群体一般会选择一个主队，比如廖尔摩斯是阿森纳球迷，就会把阿森纳设置为自己的主队）进行个性化资讯推荐。新闻详情页足球社区是一个充满了爱恨交织的大江湖，比如皇马和巴萨、AC 米兰和国际米兰的球迷往往水火不容，所以往往在足球新闻的评论区，会非常闹热，甚至形成独特的球迷文化。从懂球帝的内容详情页可以看出，懂球帝的用户活跃度非常高，一篇头条的新闻评论数有上百条评论，甚至单条评论还支持多人评论、点赞、分享和举报，非常热闹。用户主页「用户主页」主要指用户的个人主页，主要包含发表、评论、关注和粉丝四个内容。用户之间可进行相互关注，但不支持发送私信或其他互动方式，无法进行建立更深的关系链接。② 精选「精选」主要按资讯的热度来设计，从上至下分为今日赛事、战报、12 小时热门、24 小时热门和今日推荐五个部分。这个栏目的设计有利于让球迷看到过去 24 小时的热门新闻，避免因为个性化推送错过当天重要新闻。③ 圈子「圈子」就像贴吧，用户可自行加入喜欢的圈子和其他用户一起交流。懂球帝的圈子非常丰富，有按俱乐部、国家队和球星分类建立的圈子，也有根据用户兴趣爱好建立的圈子。从官方数据看，足球彩票圈子发帖数超过 1000 万，一支欧洲明星球队的圈子发帖数均在 100 万以上，可以看出用户活跃度非常高。圈子的设计，本质就是细分用户，让有共同爱好的球迷相聚在一起，从而建立用户关系，最终提高用户留存率。2. 懂球号懂球帝是一个 UGC 内容模式的球迷社区，社区内容主要由用户创作。懂球号分为企业机构和个人自媒体两种类型，企业机构主要针对国内外俱乐部和足球媒体机构，个人自媒体主要针对球员教练以及热爱足球创作的的球迷群体。懂球号的认证分为两种，第一种是个人认证标识，黄 V，主要针对在业内有一定知名度的记者、球员、KOL 和优秀创作者；第二种是团体认证标识，蓝 V，主要针对各大俱乐部、媒体和有公众影响力的团体。懂球号作为一个知识创作平台，创作者通过写作获取流量曝光也可以获得收益，以此形成内容创作闭环，为社区提供专业的资讯内容。从官方公布数据看，目前懂球帝已经吸引了众多知名俱乐部开通了懂球号，包括亚足联、欧洲五大联赛众多豪门球队和中国男女足，可谓星光熠熠，具有很大的号召力。3. 比赛「比赛」这个栏目，主要为球迷们提供各大足球联赛的比赛预告和直播。从赛事分类看，懂球帝几乎包含了世界足坛所有主流和非主流联赛，从最热门的欧洲五大联赛到巴甲、阿超、墨超这些南美联赛，都有比赛播放源和精准的数据。① 直播间直播间分为直播君、球迷直播间和专家直播间。「直播君」就是官方的直播间，由懂球帝官方负责解说。「球迷直播间」就是球迷们一起聊天看球，这就像在 B 站看视频弹幕一样，非常热闹，属于独特的懂球帝看球文化。「专家直播间」加入了很多足彩内容，首先完全由懂球帝的足彩专家负责解说比赛，其次在比赛中会向球迷推送自己的竞彩方案，用户需要购买专家锦囊或开通红单会员才能观看，对付费用户的激活有很大帮助。② 数据赛况「赛况」就是记录一场比赛的真实数据，包含比赛动态（GIF 动图）、高评分球员、进攻心率图、技术统计和完整事件。阵容「阵容」记录了整场比赛运动员的详细数据，包括出场时间、进球数、射门数、跑动距离和比赛评分等。③ 竞彩情报「情报」是付费服务，用户需要开通小红单会员（懂球帝足彩会员服务，售价每月 588 元）以后才能查看。从内容设计看，非常丰富，包含专家方案、欧亚对比、高斯大小球、会员专享情报、得失球时间分布、必发冷热分布和必发大注倾向等内容。这是懂球帝的核心优质内容，通过直播看球的场景，提升用户开通 VIP 的激活率。分析「分析」内容包含猜胜负（球迷竞猜数据）、大数据锦囊（付费服务）、近期战绩、未来三场、综合实力（包含近 10 场战绩、场均进球等）、场面控制（控球率等）、双方特征（射门进球效率、射门次数等）、角球、半全场（近 10 场半场进球数平均值）和事件统计（犯规次数和红黄牌）。专家「专家」主要指懂球帝彩票板块的足彩专家，这是懂球帝足彩内容的核心创作团队，他们通过对比赛的分析输出精准的投注方案，用户需要购买才能查看。指数「指数」是指欧亚各大博彩公司对当场比赛竞彩赔率的数据，这个栏目为用户提供更多全面的投注参考。4. 数据数据分为欧洲足球、亚洲足球、美洲足球、非洲足球、全球足球、篮球和电竞 7 大类，几乎覆盖了全球所有足球联赛。积分主要查看当前联赛的积分排行榜，包含胜平负场次和进失球等数据。球员榜的数据非常精细，几乎可以查询到一个球员的所有比赛数据，从射手榜、助攻榜、关键传球、射门、越位、传球再到拦截、成功过人、抢断和解围，应有尽有。球队榜和球员榜也很相似，颗粒度非常细，从进球数、控球率到扑救点球数、领先情况下丢分数据都包含了。赛程主要提供当前联赛的比赛进程，方便球迷查询。懂球帝还为球迷提供过往赛季数据查询的功能，甚至可追溯到1986~87赛季的数据。这就像一座足球博物馆，球迷可以查询过往赛季各大联赛、各支球队的详细数据，非常方便。如此专业强大的数据服务，也能提升球迷对产品的满意度，提高用户留存率。① 球队主页「球队主页」包含球队当前战绩、动态、赛程、数据、球员、圈子、资料和转会 8 个内容模块。「动态」就是把球队的新闻资讯汇总，方便球迷可以看到和俱乐部相关的所有新闻。「赛程」展示球队当前赛季的比赛记录，懂球帝还提供了一个历史赛季查询的功能，最高可追溯到1920赛季，跨度超过100年。「数据」主要展示当前赛季球队的联赛数据，包括进攻、组织、防守、关键球员等数据，懂球帝统计了近10个赛季的球队数据，非常完善。「球员」主要展示球队当前的球员信息，包含出场数量、进球数、助攻数以及合同到期时间。「圈子」关联了球队的球迷圈，用户可以在圈子发帖，和其他球迷一起交流。「资料」展示了球队的历史资料，数据非常丰富，包括历任主教练、队史纪录（进球、出场记录）、荣誉记录（联赛冠军、杯赛冠军等）。「转会」就是统计球队的球员转出和转入记录，包含球员转入转出的去向以及转会费，懂球帝统计了近10个赛季的数据转会记录。② 球员主页「球员主页」就是展示球员的详细信息，主要包含球员的动态、数据、能力值和资料。「数据」统计了球员整个职业生涯在联赛、杯赛以及国家队的数据，包括出场时间、进球数、助攻数、射门次数等，非常全面。「能力值」就是对当前球员的能力评估，包括速度、射门、力量、防守、传球和盘带等；「资料」统计了当前球员职业生涯中的所有荣誉，包括基础资料、球员身价变化、转会记录、俱乐部生涯以及个人荣誉。「球星卡」是一个竞拍交易的版块，球迷可以出售和当前球星相关联的等物品。5. 赛事服务「赛事服务」面向的用户人群主要是拥有举办体育比赛活动组织能力的机构或球迷团体，但由于赛事规模或资金的缘故，无法获取更高的曝光以及获取专业的技术设备。懂球帝从技术、数据、直播以及流量四个维度为用户提供专业完善的服务，吸引全国各地的体育爱好者加入懂球帝，实现用户拉新（已经单独设计直播君 APP 运营），提高知名度。目前该服务官方显示为免费，满足条件的用户都可以免费申请。① 赛事详情页「赛事详情页」包含了赛程、积分榜、球队榜、球员榜和参与球队等内容，有效帮助赛事举办方实现精准的数据化统计，方便球迷查询。6. 公益足球「懂球帝公益」在 2016 年开始运营，在 2021 年升级为「懂球帝足球星火公益计划」。这个活动的主要目的是为贫困地区和专项足球小学的学生提供爱心足球，在帮助他们快乐健康成长的同时，也扩大了中国足球的青少年基础。目前 APP 显示已向 916 所学校捐赠足球 14441 个，其次公益版块显示正在全新升级，暂停捐款。四、变现服务懂球帝在商业变现的形式设计上，主要通过体育彩票版块切入。通过「彩经」版块，招募了众多足彩 KOL 组成了懂彩帝专家团，以撰写比赛分析向用户销售竞彩情报。用户不仅可以直接购买，也可以开通懂球帝的小红单会员和红单会员，获得专业可靠的竞彩方案。其次，懂球帝还有球星卡、周边商城和游戏三个变现业务。1. 彩经「彩经」就是体育彩票，作为体育产品最重要的变现服务之一，懂球帝的彩经版块包含了足球、篮球、电竞和数字彩四种类型。从页面内容结构看，从上至下主要分为热门专家直播、金刚区、专家和足彩情报。① 懂彩帝「懂彩帝」就是懂球帝官方的专家团，包含了足球、篮球和电竞的各种竞彩专家。竞彩专家主要通过对赛事的分析，以撰写竞彩情报向用户销售。懂彩帝的专家库非常完善，从欧洲主流联赛到中超、中甲、美职联这些联赛，都有不同的专家针对对应的联赛研究分析。其次懂彩帝还设计了三个排行榜，非常有趣，不仅可以吸引粉丝关注，还能利用攀比心理，倒逼专家写出更精准的投注方案，分别为命中榜（推荐的方案命中率）、连红榜（连续推荐命中的比赛场次）和回报榜（通过购买专家方案获取的回报排行）。② 专家主页「专家主页」主要包含专家资料、命中率数据趋势图和在售方案三块内容。用户可以关注专家，成为他的粉丝，还可以购买真爱卡（虚拟货币）加入专家的粉丝团，成为他的忠实粉丝；其次通过命中率趋势图可以查看专家近期的竞彩命中趋势；「在售方案」就是专家最新的竞彩方案，用户可直接购买查看。2. 球星卡「球星卡」作为一种实物珍藏品，近两年在国内市场非常火热，由于其独有的稀缺性和投资属性，所以催生了球星卡的拍卖模式。从懂球帝关于球星卡科普的文章可以看出，一张稀有的球星卡售价可以超过百万美元，在美国每年的球星卡成交额高达上亿美元。球星卡版块主要包含每日截标卡推荐、牛卡博物馆、圈子、数据库和商品等内容。球星卡采用拍卖的形式进行销售，商家设置竞拍底价以后，在截止时间内出价最高者胜出。3. 商城懂球帝的商城主要包含运动休闲、配件和足球周边三大类服务，商城的设计比较简单，除了分类，就是商品信息流，用户可直接加入购物车购买。4. 游戏中心游戏是体育产品的最重要的变现方式之一，懂球帝的游戏中心包含了电竞、足球、篮球、休闲挂机和魔幻修仙等游戏，以小程序的形式游戏，非常方便。5. 付费会员懂球帝的会员主要分为三种类型，分别是小红单会员、红单会员和 D+会员。① 小红单会员小红单会员售价 588 元每月，主要针对足彩的用户，主要权益包含专家方案解锁、专家方案公布、每月神券、冷门提前预警、关键情报推送、高斯大小球模型、必发冷热分布、深度数据分析、欧亚大盘对比、昵称红名、入场广播、红单会员标识和会员免广告 13 种会员权益。② 红单会员红单会员售价 1998 元，主要针对足彩用户，和小红单会员特权相比，增加了专家方案折扣（9 折）、免费大数据锦囊（每月 2 次）、会员专属圈子三个服务。③ D+会员D+会员属于平台的基础会员，售价 19 元每月，可享受免广告特权、极致画质、尊贵身份和炫彩名牌 4 种特权服务。五、设计总结1. 商业层从懂球帝的商业模式看，懂球帝的盈利模式比较单一。除了传统的线上广告收入，盈利模式主要围绕体育彩票设计，比如懂彩帝专家团以及小红单和红单会员等。而体育彩票这块，由于国家的政策等原因，懂彩帝更像一个知识付费服务，只是向球迷销售投注方案。另外体育彩票服务也容易导致球迷购买了方案去境外网站 Du 球，触及国家的红线区。对于马上年满 10 周岁的懂球帝来说，对商业模式的设计还需要拓展和创新。2. 内容层懂球帝这个产品，在内容设计方面，其实比较中规中矩，缺乏创新。作为一个足球媒体，懂球帝欠缺有深度、特色、个性化的内容栏目，虽然依靠 UGC 内容模式可以降低大量人力成本，但在内容深度的缺失就很难让懂球帝拥有核心竞争力。其次在整个产品的功能、内容以及结构的设计上，也看不到太多的亮点。比如周边商城，就只是最简单直接的商品销售，而如果你有看过樊登读书的商城设计，你就会发现同是各自行业的独角兽，懂球帝的产品设计创新力就太弱了。3. 体验层体验层包含产品的交互、视觉以及用户在使用产品整个过程中的操作体验。从交互和视觉看，懂球帝的产品设计不够精细，比如像「比赛」版块，无论是内容布局，还是字体大小、颜色，在视觉上给人的感觉比较粗糙。还有彩经版块，金刚区的图标都是模糊的，整个版块的设计显得杂乱又廉价。其次在产品的使用中，广告实在太多，而用户屏蔽广告的方式除了花钱开通 D+会员，只有通过观看其他广告获取免广告卡才能屏蔽，这样的设计，让人略失所望。4. 运营层懂球帝在用户运营方面的功能设计得比较浅，整个产品只设计了一个任务中心，内容也比较常规，用户通过签到或者做任务可以领取金币（金币可以兑换成现金提现，5 万金币可以兑换 5 元），其他的功能就再也没有了。相比脉脉和樊登读书这些具有丰富用户福利的产品，懂球帝和站酷很像，其实我也是懂球帝的老用户（注册时间超过 7 年），但迄今为止并没有看到任何官方粉丝交流群，也无法和平台建立任何链接，甚至在球迷圈，即便我关注了同是阿森纳的球迷朋友，也无法建立更深的链接。参考文献易观千帆 - 懂球帝/虎扑/腾讯体育 APP 数据分析七麦网-懂球帝迭代记录懂球帝官网2017 年中国互联网体育服务行业研究报告欢迎关注作者微信公众号：「设计大侦探」本篇来源：优设网原文地址：https://www.uisdc.com/dongqiudi
是一个 字体 你可以 编者按：这是设计师 Shantanu Kumar 所创建了一份设计素材清单，其中包含 11 个比较有价值的设计素材平台，它们能够让你在做平面设计的时候更快、更好，而且保持较低的预算。下面具体看看吧：众所周知，作为一名平面设计师，在做视觉传达的时候需要替品牌承担大量的挑战性的任务。为了满足客户的期望，设计师需要兼顾调研员、视觉叙事者和视觉设计师等多个角色。在调研搜集整理阶段，你绝大多数的工作其实是利用手头的现有资源和素材（比如字体、图片、样机和图标等）快速创建概念，并且将你的想法落地下来。是否擅长筛选素材是决定你的设计是否优秀的关键。更重要的是，设计素材的好坏，也直接决定了你是否有足够多的时间将注意力集中在项目最具挑战性的部分。如果你必须从零开始创建素材，那么你的项目上所需要投入的时间会更长。这也是为什么我会整理这么一个优质设计素材列表，你可以基于这些素材来更快实现你想要的设计效果。1、Fontbrief 字体平台https://www.fontbrief.com/fontbriefFont Brief 让你可以找到理想的字体，这个平台是由平面设计师 Victor Bartis 和艺术总监 Christian Costea 所搭建起来的，他们精心筛选了一波极具风格和个性的字体，希望做排印和平面设计和品牌设计的设计师能够从中收益。2、Velvetyne 字体平台http://velvetyne.fr/从 2010 年开始，Velvetyne Type Foundry 就一直在分发免费开源的字体，Velvetyne 所筛选的字体通常素质相当过硬，有着较强的美学价值，并且极具时尚感，对于平面设计师而言，它是不可多得的时尚设计试验场。3、配色工具 Color Lisahttp://colorlisa.com/每次在设计师会在设计项目上投入大量的时间来选择合适的配色方案，而 Color Lisa 可以从一些标志性的艺术家的的配色当中汲取灵感，其中内置了大量这样的配色方案，你可以根据你喜欢的艺术家和作品来筛选配色方案。4、Control 图库https://control.rocks/Control 提供了 108 幅可以进行深入定制的扁平风格插画，并且每幅插画都有 AI、Figma 和 Sketch 对应的矢量文件下载，并且提供 PNG 格式下载。这套插画图库并非完全免费的，但是提供免费试用。5、Open Peeps 图库https://www.openpeeps.com/Open Peeps 是一个足够简单，但是也足够优秀的插图素材解决方案，它提供一系列的手绘插图，可以用于产品、运营、海报、用户流程和故事板等常见的场景，这些角色插画千差万别，但是又个性十足。6、设计系统检查清单https://www.designsystemchecklist.com/这个网站是一个设计专家团队的协作成果，他们深入钻研了设计系统，并且耗费了大量的来测试和实战，并且最终确定了设计系统所涉及到的要点，最终输出了这样的一套检查清单，方便你能够制作出更好的设计系统。7、样机之家https://houseofmockups.com/这是一个由 Shillington Education 的创意总监 Anthony Wood 所创立的再现社区，名为 House of Mockup。Shillington 是一个独一无二的设计训练营，他们提供设计培训，遍布美国、欧洲和澳大利亚，而 House of Mockups 也是他们所输出的样机素材平台。8、Lordicon 图标https://lordicon.com/你会在 Lordicon 看到一系列素质令人惊叹的优质图标，既有静态的也有动态的，它们有着庞大的内容库，而且有近乎无限的排列组合的可能性。每个图标都有 Gif、Svg、Eps和 Png 的格式，你可以直接下载，也可以使用 HTML 代码直接调用嵌入到你的实战项目当中去。9、图库 Offsethttps://www.offset.com/Offset 是一个由 ShutterStock 所运营的高素质图片素材网站，他们是专门提供适用于商业项目和内容平台的高素质、免版税（注意不是免费）的图片素材。他们对图片素质要求超级高，这也意味着仅仅只有世界一流的摄影师才能为 Offset 提供图片内容。Offset 的每张图片都经过精心挑选，并且检查过质量。10、Dieline 设计博客https://thedieline.com/如果你对于包装设计、平面设计都非常感兴趣，那么你可以关注一下 Dieline，它会快速更新最热的包装设计的资讯和案例。他们的目标是创建一个面向全球包装设计和平面设计的内容平台。11、AIGA：关注设计https://eyeondesign.aiga.org/Eye on design 这个是美国平面艺术协会和 AIGA 的设计专家运营的一个博客，内容涉及到设计的方方面面，包含字体排印、界面设计、用户体验、品牌等主题，其中包含了大量精心挑选的内容和有见地的信息。本篇来源：优设网原文地址：https://www.uisdc.com/11-unheard-graphic-design-resources
信息 用户 需求 一、复杂系统的交互我是做 B 端系统的交互，干这行的朋友都知道 B 端系统很复杂，对用户搜寻信息、完成任务的能力有很高的要求，使用这种系统也往往不像你刷抖音、逛淘宝一样轻松。针对如此复杂的业务情况，我时常会感觉当前我们“交互设计”或者“体验设计”这一行的行业知识基础还是不太扎实。我们大家都知道，“交互设计”作为一个极为应用性的方向，就像一张桌子，桌面上的东西是具体的界面设计知识，比如控件设计、页面排版，而桌子的四条腿则是心理学/社会学/人因学/信息科学等等稍微偏向于基础研究的学科。因此本周我找了一本信息科学领域对信息搜寻行为的入门级读物，从别的学科切入交互设计，看一看对我们的日常工作有没有什么启发。实际上信息科学和交互设计很有渊源，比如我们现在在使用的“信息架构”这个概念就和信息科学有千丝万缕的联系。而且信息科学的最初的研究领域就是研究图书馆或者公司组织这种大型数据库的，正好跟 B 端设计师的工作范围不谋而合，所以读下来的确感觉还挺有启发。今天我就摘录其中“用户信息需求分析”一节，结合我的个人感受写一点东西。“信息”的定义在学界是复杂多变的，甚至到今天也并没有形成一致的定义。在香农那个年代对信息的定义是“降低事物的不确定性”，在此基础上结合实验衍生出了我们熟悉的费茨定律。但这个定义明显不怎么考虑人的主观因素，也不太符合直觉，是一个很费脑子的定义。用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 很明显学术界也有很多人有类似的看法，因此信息科学这个经过本世纪的发展，从一开始的只侧重于信息系统的构建，到今天也加入了很多心理学/社会学的视角和研究方法，和我们设计今日“以用户为中心”的核心思路也是有些类似的。在这些不同的视角下，作者归纳出了 4 种对“信息”定义和用户信息诉求的不同理解方式，下面我把它简写为 3 种。不同的研究者从不同的角度解释了“为什么我们的用户需要信息，他们对信息的诉求有什么差异，这种需求的差异又会形成什么样的行为差异”这个困扰我们交互设计师的问题。虽然他们作为研究者的思路是比较抽象的，但归纳出来的方式其实的确都能在我们的工作中找到一些现实依据，也是一个很妙的事情。二、用户为了获得答案而寻找信息罗伯特·泰勒在 1968 发表了一篇对用户（人）的信息需求的讨论。他坐在图书咨询台旁边观察来来往往的咨询者，发现每个人的咨询行为都很不一样，而且这种不一样似乎可以被分成成几类或者几种阶段。第一类阶段的信息需求无法用言语解释清楚，用户只能表达一种“模糊的不满”，一种对信息“脱口而出的无意识的诉求（Visceral need）”。第二类需求则是有意识的，但用户还是不能很有条理地说清楚自己到底要找什么，他们的陈述往往是模棱两可并且颠三倒四的。第三类需求终于逐渐结构化，用户可以用言语表达出自己要问什么问题、找什么东西，但用户不知道上哪里去找，也不知道自己应该找谁。比如这个信息可能出现在哪个系统里？我应该找综合咨询处的工作人员问，还是应该找哪个图书区的专员问？最终，第四类需求是高度结构化的，持有这类需求的用户很清楚系统会反馈给他们什么样的数据，只是不知道自己应该怎样与系统交互（比如输入什么样的词句），才能更好地匹配到自己想要获得的信息。他对这种现象举了个例子。比如一个读者来图书馆的实际目的是为了了解不同哲学家对一个哲学概念的不同见解，但因为他个人的特质、他对图书馆系统的了解、他的过往经历等等因素，他无法将这个问题非常结构性的表达出来，比如“你能用你的图书系统帮我搜索一下含有某哲学概念的哲学书籍能在哪个架子上找到吗？”。相反，他会来图书馆问一些非常宏大的、没头没脑的问题，比如“你们有哲学书吗？”他期望的不是图书管理员跟他说“对，我们有哲学书”，而是希望图书管理员帮他澄清问题、进一步的缩小检索范围，比如“你想找哪类型哲学书呢？”这个视角在 B 端设计中的价值主要是提醒我们需要对用户能力做正确的预估，以及一定要为用户搭建稳定的概念模型。从用户能力来说，虽然书中这一节并没有提到造成这种需求差异的原因，但根据我的经验，用户本身的受教育程度、思维方式、使用复杂产品的经验都会造成类似的信息需求的差异。我觉得业内一个特别不好的倾向是总把 B 端产品理解为“高能力用户的产品”或者“专家用户的产品”，但实际上 B 端产品的用户根据行业的不同，涵盖的情况相当广泛，也不乏上文说的那样“说不清楚自己要找什么”的情况出现。从概念模型的角度上来说，B 端产品可能因为各种各样的原因，有非常多的互相毫无联系的子系统。这就会让用户（特别是新用户）对“我能看到什么信息、我可以获得什么样的服务”毫无概念。在这种对系统整体边界没概念的状态下，用户也就总是停留在第三类需求的状态下，信息获取的效率很低。比如钉钉/飞书企业版都提供了一个“集成不同系统，在飞书上建立信息门户”的功能。简单来说就是公司购买这些企业版软件后，可以把自己的一大堆乱七八糟的邮箱/数据看板/后台等等以信息展示或者功能入口的形式“挂”到上面去，在聊天软件上形成一个企业门户。为啥要搞一个所谓“门户”呢？从信息获取的角度上来说，也是因为这些散落在各处的服务需要用一个集合入口去让用户对企业所有服务形成整体概念，从而更可能提高信息需求的结构化程度。从“这东西有没有？我该上哪找？”过渡到“怎么找更快？”三、用户为了降低不确定性而寻找信息一听到“不确定性 uncertainty”这个东西就知道又是香农那一套了，但是今天我们不再讲费茨定律，而是聊一聊用户在努力降低信息不确定性时的心理感受。查尔斯 · 阿特金在 1973 年将“信息需求”定义为“个人对重要的环境对象的当前不确定性水平与他期望状态之间的差异”。简单来讲，就是我们的用户对自己当前知识的评估，和他认为的理想状态的对比。比如一个用户自认为自己完全不会弄一个复杂的申请流程，并且他认为自己的岗位应该对这个申请流程特别熟悉，他就会受这种落差和自己的动力驱使，去不停的查找这个流程的相关知识和细节。这个过程中往往伴随着很高程度的焦虑，并且因为知识的搜索本质上是无穷无尽，精益求精的，因此这个用户何时停下检索更多的取决于他的动机有多强。比如这个学习者是个产品经理，在弄清楚了申请流程，他下一步可能还想弄清楚为什么要搞这么多步骤，每一步是为了什么，再下一步想弄清楚这个申请流程的迭代过程……研究者还发现，我们了解信息的动机往往不像我们经常做设计分析时那样理性、清晰、目标明确。也就是说，很多时候用户希望了解信息并不是因为他们想要用这些信息去分析啥，而是受“模糊的不安感，一种知识空白的感觉”所驱使，这是一种感性的情感需求。读到这里我的第一感受就是，这太体现情感化设计的重要性了。在我们的交互设计中，人对信息的理性需求往往被高估。比如我做表单或者做大表格的时候总是会去问用户“这个信息为什么对你很重要？”、“你要用这个信息去干嘛呢？”但实际上用户需要的可能并不是事无巨细的、机械式的信息透传，而是一种“对整体情况的理解”、一种“了解信息的安全感”，在这种安全感中，用户不会过高的预估自己掌握信息的必要性（因为他假设自己了解全局、他假设系统不会坑他）。虽然基础的信息透传还是必要的，但假如我们的用户没那么焦虑，是不是也就不必要持续进行地毯式的信息搜寻行为，生怕遗漏一丝细节？当然这种所谓的“情感化”不仅仅是指画多几个表情包或者写几句暖心文案。放在交互设计师面前的难题是，我们如何通过设计的形式去缓解用户的信息焦虑，为他们创造一个“不需要太专业也可以轻松使用我们 B 端软件”的概念与环境？视觉上的设计是一方面，但框架层及以上还有更多可探索的空间。四、用户为了构建意义而寻找信息这个研究很有意思，持这种观点的研究者认为我们生活中的信息存在不连续性，而这种不连续性就造成了用户认知的鸿沟或者裂隙。用户需要根据自己的诉求、动用自己的经验、寻找各种信息，并且不断尝试对信息进行归类、比较，最终内化信息，填补自己认知上的的“裂隙”。这个理论横跨了数个学科，实在是有点抽象，但好在作者在 93 年在咱们交互设计相关的会议上发表了一篇文章，举例详解用户的这种类似构建信息架构的意义构建过程，所以其实咱们看他的例子也能差不多理解。接下来我就为大家讲解一下。这个研究者在 1989 年观察了施乐（Xerox）公司的一个公司内部培训课程开发流程。当时施乐有几十种不同型号的打印机和扫描仪，每台打印机都有 10-20 份文件记录，每份记录从 30-300 页不等。因为这些记录内容都没有结构化，所以这个内培小组之前的课程都是基于某几种特定的打印机类型研发的，不好推广到所有的打印/扫描仪。举个例子，就像九阳有一大堆不同型号的豆浆机和破壁机，每个的功能和参数都有一些不同。有的有免滤豆渣功能、有的有加热烹煮功能，有的转速高、有的转速低，有的底部是塑料做的，有的是陶瓷做的。都不一样，也没人画个大表格归类一下。因此，内培部之前的课程研发只针对某款特殊的“免滤豆渣豆浆机”开发，讲这部机器转速如何、烹煮功能怎么用，有什么设计缺陷要注意等等。假如九阳的销售业务员都这样一个个机器挨个学，那显然效率太慢了，所以内培部门想了一个招：将机器分几个大类，先让销售们对我们九阳的产品建立一个大概认知，后续好深入。把学习流程模块化，比如有 3 种机器都有“烹煮功能”，那咱们就专门开一节课讲解咱们这个功能使用场景是啥、主要怎么用、对应的该如何维护等等，这样学起来就快多了。并且模块化/结构化的信息也能更好地支持对豆浆机/破壁机的分类。但是对于施乐的内培部门来说，打印机的参数巨多，分类方式也很多。面对如此复杂的情况，他们应该如何做到合理分类、模块化这两件事呢？换句话说，他们怎样从这些一盘散沙的信息中构建意义？研究者发现，这分成 3 个核心阶段：抓特征、抓差异：课程的开发者会从这些零散的打印机说明文件中总结出一些代表性特征，比如“底座制作工艺”这个特征可能包含了“陶瓷、塑料”找到特征对应的具体案例：也就是尝试把文件中的一些相关的信息点放到具体特征中，比如我看见这个豆浆机的文件里有描述它的“底部由金属构成”，那我就给它归成“底部制作工艺：金属”。在这个过程中逐渐形成整个信息框架。对特征进行增删：那些没有具体案例的、和案例不匹配的特征会被删除或者修改。比如我找到好几台豆浆机的制作工艺是“全体金属，底座橡皮包边”，那么“底部制作工艺”这个分类好像就不太能容纳这种案例，我可能会把“底部制作工艺”这种特征/分类调整为“制作工艺”，下面有两个子分类“一体制作”和“分体制作”。用户就是在在自上向下的“特征找案例”和自下向上的“抓特征、抓差异”过程之间不同的循环迭代，最终建立起一套比较稳定的体系，从而建立意义和逻辑。这个过程会充满了不确定性，随时会对特征进行修改。简单来说，用户完成任务的时间=建立概念的时间+真正去进行操作或者产出的时间。在这个循环过程中，施乐的打印机课程研发小组一共迭代了 4 版不同的教学架构。最后选择了第四种。为什么第四种更好？根据作者的陈述，是因为这样表示出了一种递归结构，有利于构建全局性的信息编码（可以理解为全局的标签系统），后续可以进行自动化的聚类分析。这里我们就不展开了，以后再聊。从这个视角来看用户的信息诉求或者意义构建行为，其实有两个特别有意思的点：施乐这个构建课程的过程其实极其类似我们交互设计师搞信息架构的流程。这个模型非常强调用户花在“理解清楚事情全貌”这件事上的时间，而不像菲茨定律一样极端强调用户花在具体操作上的时间。首先从信息架构的角度来说，虽然一开始信息架构：超越 web 的什么什么那本书就有提到“自上而下”、“自下而上”地构建产品的组织系统这么一回事，但是他只是轻轻的掠过了这两个概念，具体的提炼过程比较语焉不详。在这个案例里我们可以清晰的看到施乐这帮人是如何将“自下而上的聚类提炼”和“自上而下的分类归纳”这两个行为循环往复的做，从而产出一个比较稳定的、可以涵盖大多数信息的框架。那么我们作为交互设计师做信息架构的价值就是帮助用户省略到这个“咀嚼信息”的过程，让他直接跟着我们的思路走就能“消化信息”。从用户花的时间的这个角度来讲，我们在做设计的时候，特别是做 B 端设计的时候，很多产品经理往往希望你能把所有能展示的东西全部铺开给用户，好像提升信息的展示速度就等于用户对信息的获取效率提高了。从这个视角来看，完全不是这么一回事。你东一榔头西一棒子的提供给用户大量信息，其实就是给用户的“意义构建”提供了一个巨大的难题，他需要在这个页面上“抓特征差异”，然后“抓案例”来验证自己的思路，还要不断修改自己对这一摊子事物的抽象理解模型，然后才能真正进行操作。这个视角在我来看是对菲茨定律的一个挺好的补充。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/user-information-requirements
用户 视觉 的是 我们在面试过程中，总会遇到面试官主观评判我们的设计作品丑，然后我们很慌慌张张在表现层的维度去辩解，导致越讲越乱，面试结束后不断地自我否定，怀疑自己的能力，开始自我 PUA。面试官在不了解产品的背景、业务、目标、用户等各种因素的情况下，贸然给出“你的作品有点儿丑”的结论，这时不要慌张，也不要试图去跟他探讨美与丑的问题。比如去解释用的什么色彩、运用了什么手法/技法，讨论这些没有任何意义，因为面试官不是设计师，无法保证在同一个频道上做到感同身受，设计不应该以主观的美丑来作为评判设计方案好坏的唯一标准。更多面试技巧：有这3个特质的设计师，阅人无数的大厂面试官都跪求你入职！信心满满面试，结果却不尽如人意？阅读文章 > 一、透过表象看本质1. 分析美与丑的本质是什么美与丑是极具个性化的，它本质上是根据每个人的背景、所处环境、认知、喜好，审美会产生较大的差异，所以我们在设计时，重点要聚焦在具体的人身上做用户分析和洞察，做用户喜欢的“东西”。这样在得知美与丑的本质后，就不要试图从表现层去沟通，要降维打击，站在更高的视角，从用户、产品、业务甚至战略等维度去沟通。举例：目标用户分别为：40 岁、30 岁、20 岁的三类人群，且背景各不相同，所以视觉、交互都会有极大的差异化；如果 40 岁的用户，你的视觉炫酷新颖，用户反而不接受，尽管视觉很好。2. 设计只在视觉中自嗨会带来什么问题假设我们的用户是政府背景，人均 45 岁左右，产品的设计风格紧跟当下时势，视觉呈现很炫酷，表面上视觉是很不错，但真的是符合产品定位、用户认知和使用场景吗？根据用户背景和年龄段儿，我们可以判断出他们所处的环境和办事风格是严谨的，用户每天大量时间都在使用一些传统的办公软件，由此判断出用户认知是有限的，他们对于新鲜的设计风格和新颖的交互方式接受程度有限，所以上述酷炫吊炸天的方案并不适合用户；当我们把酷炫吊炸天的方案交付给客户时，很大可能会面临一次次的打回修改，而客户也提不出具体建议，只会提一些“感觉不对”“这里大点儿”“这个移到那边儿试试”这种非常抽象的词语，明明设计的很漂亮，为什么会这样呢？因为我们只是站在设计的角度去做设计，跟用户没有任何关系。最终结果导致从开发到设计整个流程反复修改，不仅身心折磨还影响整体的项目进度。所以我们认为“好”的东西，用户不一定喜欢，因为你并没有做以人为本、以用户为本的设计，只是在自己的世界里自嗨，我们并不是用户，也无法做到真正的同理心。二、拼多多、京东、淘宝举例1. 设计底层逻辑分析你觉得拼多多的设计丑吗，京东、淘宝、拼多多同为电商类的头部产品，而这三款产品的设计风格却截然不同。其中最具代表性的就是拼多多，与其它两家对比简直就是土的掉渣；如果拼多多的设计风格改为像其它两家一样，那它是否还符合产品特征和目标用户呢？显然是不符合的，拼多多面对的是下沉市场，这部分目标用户的认知和心智差异化较为明显，所以设计风格、icon 元素就很接地气，尤其营销的视觉设计更是拿捏用户心理。而京东面向的是具有消费能力的品质用户，所以整体设计方案都对相对简约、克制。2. 小结要追溯设计方案是否满足产品特征，定位是否准确、是否解决了用户诉求、视觉是否符合用户认知和心智；将所有的底层逻辑串联后，在回到表现层进行评判。通过一些举例沟通后，最后在落到我们作品的表现层，为何采用这样的方案，视觉为何这样呈现等等，这样我们的设计才是有理有据的。3. 设计来源于生活比如我们要开一家平价餐馆，明明卖实惠的大碗菜，门头却设计的富丽堂皇，起了一个高贵优雅名字；你的目标用户看到不敢进，非目标用户被门头吸引进来后，发现挂着羊头卖狗肉，走了就再也不来了，最终关门大吉。这个道理和设计显然是一样的逻辑。三、最后1. 设计不应该以主观的美丑来作为评判设计方案好坏的唯一标准设计没有绝对的美丑，只有合不合适，设计开始前应该从战略层向上一层层递进，最后将用户进行关联，找到合适的视觉和交互方案；当我们把设计底层的逻辑向面试官阐述后，最终落到视觉上，这样才会被认可和理解；以后在遇到面试官主观的评判你作品丑的时候，记得怼回去！关于用户体验五要素：如何高级且不露神色把「用户体验五要素」用到你的作品集里？AJAX 之父 Jesse James Garrett 在 2007 年出版了一本名为《用户体验要素》的书，提出了从 5 个要素自下而上的建设用户体验。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/interview-skills-3
模型 方法论 意愿 设计师如何提高转化率？本文通过超多的增长设计实验，结合一个投入过亿的项目，总结了一个万能好用的DE公式，帮你快速提高设计转化。更多提高转化的方法：转化率翻5倍！资深设计师需要学会的「分层设计」今天为大家带来一个关于到家精选服务下单转化的项目总结。阅读文章 > 阿吉站在讲台上，开心的像个孩子。三年前，正是凭借这个公式，他收获了年度优秀项目、年度优秀员工，高绩效、升职、加薪，一切顺理成章。如今，作为团队leader，他希望这一方法论能继续传承下去，帮助到更多的小伙伴。一、基础概念及示例Convert 转化：用户完成业务期望的操作/任务；Desire 意愿：操作/任务意愿，包含需要、欲望、动机；Efficient 效率：操作/任务效率，用户完成的一个任务所需要的操作步骤；如完成购买所需步骤、get到核心信息的时间；举一个小例子。下图是智能高考志愿的需求原型。我们用DE模型分析下有什么问题。针对意愿问题，正向意愿继续放大和增强，负向意愿的问题要避免或削弱；针对效率问题，信息的获取效率要提；而看到预测的结果的效率也要提高；可以从原有的10步流程：选标签（科目1）选标签（科目2）选标签（科目3）激活输入（总分）输入确认输入激活输入（语数英分数）输入确认输入“一键分析能上大学”按钮看到分析的结果[end]优化为3步：激活输入->输入总分->确认预测->看到分析的结果[end]->完善各科分数->查看更精准的分析结果根据以上策略输出交互原型，对比感受下。我们找用户对上图两个原型做了简单问卷投票，结果也是优化后的完胜。二、DE模型如何推演而来有别于上期分享的GSSM模型，DE模型并不是直接从理论而来，是从多次的实验结论总结抽象得出，过程比较复杂，这里就不过多赘述了，作为一个了解项分享给大家。如何清晰量化设计价值？试试这个超实用的GSSM模型！编者按：本文通过实战案例，帮你掌握一个能量化设计价值的GSSM模型。阅读文章 > 最初，我们疯狂做了超多的增长实验（因数据保密模糊处理）：把收集到的有效策略分类和归纳：期间学习了不少理论书籍和论文：通过理论启发，把所有策略抽象为两类：最终，得到了DE模型：转化 = 意愿 效率综上，DE模型只是策略的高度概括，实际工作中，不能单看模型本身，还是要结合具体的策略来用，加入策略的DE模型才是完全体（如下图）。有了完全体的模型，接下来咱们聊聊是如何实现5倍提升的。三、如何实现5倍提升1. 业务背景利用精品低价课，通过外部渠道（微信朋友圈、抖音、今日头条、快手等）拉新。项目为期4个月，投入过亿。详细见下图：OK，开始优化。1）用DE分析问题，尝试对应策略；2）方案及数据结论具体数据非常敏感，用字母不影响提升率计算；以下数据均在严格A/B测下得出；真实实验并非按页面顺序进行；我们把整体链路拆成3部分来讲。① 数学详情页->选完时间详情页意愿+效率优化选择时间效率优化该部分优化后转化率：a% -> 1.57a%②③④⑤登录->支付完成支付完成后再填写地址小程序一键登录订单页体现价值+弹层化该部分优化后转化率：b% -> 2.34b%⑤⑥⑦⑧⑨⑩ 整体导流英语流程订单页体现价值+弹层化该部分优化后转化率：c% -> 1.37c%最终整体链路的转化率：abc% -> 5.03abc%，5倍达成！四、为什么不是福格模型在分享过程中，很多人都会提到福格模型。福格模型这么火，而且有知名学者背书，为什么不直接使用用呐？实际上，在构建完DE模型半年后，福格模型开始火遍设计圈，我也是从同事分享中学到，并且意外的发现，和DE模型有着异曲同工之妙。无非是最终呈现的维度不同（如下图）不使用福格模型有几个原因：设计师那该死的清高。不多说，设计师应该都懂；福格模型最初是用于学习教育领域，DE模型是以消费心理学、消费行为学为基础，更贴近互联网业务；实际工作中不好用、门槛高。我也曾尝试像团队推广福格模型，但在分享过程中，单动机、能力、提示这三个词，就有很多版本的解释。更不要说再把理论转译为设计策略。这也是坚持使用DE最主要的原因。以上观点并无踩一捧一，是基于自己身边圈子得出的结论，仅供参考。如果你觉得福格模型顺手，也恭喜你找到了适合自己的。如何提高设计转化？先学会经典的「福格模型」日常工作中我们经常要考虑如何吸引用户转化。阅读文章 > 最后我想说，无论DE模型还是福格模型，都是对“人如何思考和行动”的高度概括，对“人”的洞察才是方法论的底层逻辑，在追求设计捷径的过程中，切不可被方法论表象迷惑，揭开表层，触达“人心”，你也能创造属于自己的方法论。欢迎关注作者公众号：本篇来源：优设网原文地址：https://www.uisdc.com/de-model
地图 缩放 数据 引言如今人们出行都离不开手机，都通过手机接触过互联网地图，手机地图凭借着可手势直观操作、地图可快速迭代、信息可实时更新的优势，形成了成熟的地图交互体验。在解析手机地图的体验设计前，让我们先看看地图的发展历程。可视化地图设计指南：4个地图素材下载网站+矢量地图制作方法本文给大家分享4个地理数据下载网站，以及 json 数据转换成矢量文件的方法。阅读文章 > 一、地图的发展地图拥有着古老的历史，记录了人类对世界认知的演进过程，经历过泥板、壁画、羊皮、纸张等载体，依据使用和文化需要拥有着丰富多样的美术形式。不同时期、材质、美术形式的地图见证人们认识世界的过程。随着照相机和飞机的发展，出现了航空摄影测量技术，让地图的测绘精准度达到顶峰。交通、旅游、印刷业的发展，让纸媒地图开始融入人们的生活，地图的平面设计更是百花齐放，有具体也有抽象，让地图兼顾功能、美感、有趣。再随着卫星影像、瓦片地图技术和互联网的发展，人们可以日常地使用电子地图。受限于网络速度的限制，矢量地图应运而生，在特定范围显示相应的矢量瓦片信息，让互联网地图的形状趋向统一化。iPhone 革命性的触屏体验，通过手势与地图进行直观自然的交互体验，结合内置 GPS、陀螺仪传感器，小蓝点成为地图定位的通用标志，激发更多地图的功能和创意。二、手机地图的创新体验手机地图继承了互联网电子地图的可快速迭代、信息可实时更新的优势，结合触屏手势操作后，大大的提升了地图展示信息的维度。电子地图从工具逐步被引入到各种垂类服务和社交娱乐中，这些场景也不断丰富和完善着地图的信息。手势交互让地图从移动到缩放都高效地动起来，激励人们探索更广的区域。更革命性的是让地图从平面到立体之间的顺滑转换，帮助人们更好的映射到真实世界。可视化信息是互联网地图的主要优势之一，将数据转化为可视化图形，归类在不同的数据层，可以单个或多个层级叠加在地图上展示，传达位置上的数据。底图是手机地图的基础，通常就是地图本身，它承托着上面的可视化信息。随着地图可更自由地缩放，地图本身的内容不断细化和归类，在不同的缩放层级下，展示符合用户查看场景的核心内容。三、手势交互：全方位呈现地图立面触屏手势交互有别于摇杆、鼠标、触控笔等物理外设的控制方式，让用户在小小的屏幕对大范围的地图有更随心所欲的操作，让原本受矢量图形限制的地图有了更多层次、更丰富立面的信息呈现方式。1. 单指拖动拖动是地图最基本的阅读操作，一般以用户的定位为初始中心点，用户可以有目的有方向地查看附近的地点。2. 单指划动当用户想快速翻阅时会拨走要略过的内容，划动模拟了这一行为。地图被划动后也会模拟物理世界以一定的摩擦力停下，向用户展示地图的新区域，是比拖动要快速的浏览方式。3. 双指拖动缩放物理控件只能让地图根据屏幕中心进行缩放，而触屏缩放能让地图根据两个指尖的中心点缩放，并同时位移，符合用户空间操控认知。4. 双指划动缩放划动缩放和划动一样，让用户以更轻量的手势加速的缩放地图，并以一定的摩擦力减速停止，让用户快速找到目标位置。5. 单指快捷缩放为了让用户能单手并可控地缩放地图，不少地图都设计了自己独有的缩放方式。zenly，通过屏幕两侧的边缘，直接完成地图的最大和最小缩放跨度。snapchat 拖动右侧边可缘唤起缩放滑块，并使用 emoji 来表达距离，充满幽默感。腾讯地图，通过划动右侧的滑块，实现单手顺滑地缩放，滑块也支持划动手势。百度地图，通过点击一个缩放控件，让地图以当前中心点进行分段缩放。6. 无限循环的地图地球是圆的，可以无限巡航，一些应用将缩到最小的世界地图做循环处理，以呼应地球的循环转动体验。7. 方向视角切换在陌生的环境用户未必能分得清楚南北方向，利用手机的陀螺仪，可以告知用户正在面向的方向。定位按钮的二次点击，将地图从南北向转到用户面向的方向，有助于用户二次确认自己的定位。更多地图使用了 2D/3D 视角的切换方式，2D 是南北向的标准地图，3D 是用户面向方向的地图，帮助用户更直观地对应物理空间。8. 旋转方向可通过双指或陀螺仪旋转地图，地图上的文字也做出相应调整，保持水平、沿道路方向调整，以保证可读性。3D 的旋转也一样，在保持水平和沿道路方向的同时，文字保持垂直。当缩小到足够远时，用户面向的方向意义就不大了，苹果在缩小到一定范围时，将地图回弹保持南北向。9. 双指拖动调整视角地图 3D 视角也支持自由调节，通过双指平行的上下滑动，可以平顺调整 3D 视图鸟瞰的角度。在地图的最低视角做回弹处理，生动不呆板。远近也能影响鸟瞰的视角变化，视角越低越接近平视，拉进时有俯冲的感觉。四、可视化信息：生动呈现地图动态数据从古代开始，人们就已经懂得通过绘制山脉、河流、海洋、建筑等对重要位置信息进行标记，地图本身就是一个信息可视化工具。 互联网地图最大的优势，就是能提供实时的信息数据。将数据标记在相应位置的坐标上，并分别归类在不同的层级，叠加在地图上查看。地图的常用数据形式可大致分为：点、线、面、热力图等，一个地图可同时唤起多种类型、多个图层的信息内容。1. 点数据点数据是单个地理坐标上的标记，代表该位置上的信息，是地图上最常用的数据信息。地图通过不同的小图标来区分位置类型，使用频率越高的样式越简洁，地标建筑做形象化图形标识。聚合图在地图上呈现也是点数据，它实质是显示一定区域内的信息聚合，但不强调具体的区域。聚合图可以避免因为该区域的点数据过多，在地图上信息过于密集。百度的充电桩地图就是以区域聚合充电桩数量，根据缩放调整数据的聚合。腾讯地图的文博地图也是聚合图，并根据文物的类型做了快速筛选。2. 线数据线数据在地图上呈现为线性，一般都沿着可行道路展示信息。导航路线是最常用的线数据，它提供具体行驶路线方案，并实时展示线路行驶的进度与方向。也有粗略表示进度的线路数据，如快递的物流进度路线就不需要具体的实际线路，只需要示意大致进程。街景地图则仅展示有全景图的道路范围，不提供进度与方向。3. 面数据面数据要展示地图上的具体区域，疫情环境下出现了区域风控需求，需通过了面数据画出区域范围。疫情地图采用了聚合图、面区块两种数据形式。zenly 使用了反向的面数据，根据用户的行走记录，将用户走过的范围擦亮，用户未走过的地方是一块彩色的平面，充满娱乐感。4. 热力图热力图以特殊的高亮梯度显示地图上区域的热度，热力图的数据不会指向地图上具体的位置，它能呈现热度变化的趋势。百度地图用热力图直观展示地区上的拥挤程度。高德地图的空气质量地图，使用聚合图作为空气质量评分，热力图作为空气质量范围。snapchat 使用热力图来表现该区域用户发布动态的热度，引导用户发现内容，由于热力图不指向具体位置，能更好的保护用户隐私。热力图并不局限于面，路线也可以反映道路的热度。Strava 利用用户的骑行数据，生成光点线路的热力图，可以看出哪些是热门的骑行线路和必经地点。路况也是一种线性的热力图，路况使用按段测量的方式，热力值的梯度相对跳跃。5. 让数据动起来地图是安静的，但真实世界是忙碌的，让数据动起来，给地图增添更多情感化设计，缓解用户的等待压力。忙碌的商家外卖小哥端午节雨中送餐公交努力奔来五、底图：为更好呈现信息的色彩系统手机地图的底图最常使用矢量瓦片地图，因为数据体积小，在互联网环境下读取速度快。矢量地图用几何图形来表达区域，不展示具体细节，因此需要通过颜色去传达不同区域的属性或功能。人们对于颜色和环境是能建立一定的联想的，如绿色想到大自然，蓝色想到水，红色想到警示。根据人们对色彩的联想，给矢量地图中不同属性的区域进行配色，帮助用户理解地图。谷歌地图就曾经为不同类型的信息标记出 700 多种颜色，最后简化为 25 个颜色，形成了地图的色彩系统。工具类地图应用以地图为核心基础，对矢量图形有最全面的归类，因而拥有最丰富的配色系统。由于人们对区域功能的颜色联想是相似的，各地图厂商的标准地图的配色都很接近。地图用色素雅，才能让多个颜色能和谐的同时存在，降低用户的视觉疲劳，并能突出地图上的信息图层，让用户聚焦所关心的数据。而一些垂直场景的应用，地图区域功能的描述相对次要，通常会对地图的用色进行大幅度精简。以打车应用为例，地图用色少且色调相近，突出核心的打车状态信息颜色，同时体现应用的品牌特色。不少运用地图的概念设计中，会更极致的使用单色系地图，仅突出数据信息的颜色，充满未来感。六、未来的地图随着网络速度的提升，手机硬件的升级，顺应 AR/VR 技术的发展，地图逐步进入 3D 和全真时代。苹果地图在现有的地图的 3D 视图下，已对地标建筑赋予更多细节，并在夜间模式模拟了灯光效果。3D 地图就像是虚拟世界中的基础建设一样，苹果地图添加精细地标模型后，同时应用到 Carplay 的导航中，在驾驶时可直观看到与现实世界对应的 3D 地标。谷歌更是提出“沉浸式视图”的高保真 3D 地图，使用图像还原一座城市的面貌，为浏览一座城市提供了几乎真实的鸟瞰视角。同时全真模拟日照和天气系统，和现实一样模拟东升西落的光线方向，模拟晚上和雨天下的城市面貌。随着地图的立体全真化，地图的数据也将向空间延伸。相对全真地图而言，人们本身就身置真实的地图场景中，未来借助 AR 设备，人们无需对照地图即可完成导航。结语地图历来是人们借助艺术的手法，以极具想象力的方式对世界进行再现，它遵循科学测量的法则，使用几何的线条和形状对地球的进行抽象化。地图反映了制作者对世界的认知，而现代的科学技术让地图呈现尽可能客观。但地图并非单纯地呈现地球，而是呈现人们眼中的世界，它寄托着人们对美好生活的想象，更好的认识、探索和规划世界。欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/map-design-history
用户 情绪 产品 你一定也发现了，在这个时代下只要处在同一赛道的产品，大多数免不了日趋同质化，不论是功能还是形式、内容还是算法。就拿内容型产品来举例：去掉颜色，以下四个产品的首页，你能分得清谁是谁吗？虽然可以做品牌差异化，但很多产品在招牌打响前，也会经历相当漫长的一段成长期。而在大家都卷的分不清谁是谁的时候，通过趣味性来建立情感链接倒是一个独辟蹊径的狠招。之前在团队有幸负责过一次产品趣味性的探索，虽未全部落地，但沉淀了不少经验。今天，我将这些经验以文章的方式分享给你，希望对你有所启发。更多趣味性设计干货：如何增加儿童产品中的趣味性？用多个实战案例告诉你！大家常说儿童产品首先要有趣，孩子如果不感兴趣，其他的努力都是徒劳。阅读文章 > 一、为什么产品需要趣味性1. 符合本能需求马斯洛的“需求层次理论”（Hierarchy of Needs）你一定听过。这个理论提出人类的需求状态是持续不断的，一段时间内，个人的动机或许可以获得暂时性的满足。但从人的成长角度来看，人类的需求永远不会止步于一个阶段。类似的还有亚伦·瓦尔特基于此提出的需求层次理论——有用的、可靠的、可用的、愉悦的。在满足了温饱阶段后，自然会需要情感的满足。尤其现在这个相对严峻、内卷成风的时代下，大家都渴望在上了一天班之后，自己用的产品可以给自己解压，而不只是个单纯的冷血工具。2. 影响用户行为产品传达趣味性的信息，那么这些信息便更容易被用户接受、甚至激发兴趣。正如用户关系和精准化运营的先驱——史蒂文·贝莱格姆的那句话：“趣味是设计产品中最人类化，最直接，最能引起人们兴趣的因素。”根据艾达模型这个经典理论，一旦用户对某件事产生兴趣后，则更容易促成他的决策、乃至最后行为的发生。毕竟我们绝大多数的决策并非源自理性。另外，《疯传》这本书提及过一个重要的概念：情绪唤醒。当情绪唤醒度较高时，往往会更容易激发用户的分享行为（比如愉悦、惊喜这样的正面情绪，当然也会包括愤怒、恐惧这样的负面情绪）。而产品所呈现的趣味性，很大程度上更容易引发用户的高唤醒情绪，从而主动采取一些产品希望他实施的行为。3. 缓解负面情绪使用一款产品的过程中，必然会出现不够正向的反馈，比如 404、断网、填写格式错误、输入隐私信息等等。一旦超出了用户的容忍能力，很容易造成行为中断甚至流失。但此时如果通过一种趣味性的方式呈现，很大程度上可以缓解用户的负面情绪。比如 readme 的登录页面，当你输入密码时，猫头鹰捂住双眼，很好得缓解了用户的不安全感。再比如饿了么，恶劣天气下会实时记录当前的天气状态，通过同理心的触发也可以缓解用户等待时产生的焦虑。4. 实现情感链接对应诺曼在《情感化设计》中的「反思层」，通过品牌差异、独有内涵等方式来唤起用户深层的记忆和情感，产生情感共鸣，从而形成认知，建立起深厚的情感链接，以让用户越来越忠实于产品。此时产品作用更多的是作为一个承担情感的载体。我们旅游时经常会购买一些貌似没什么实用性的纪念品，明信片、木雕、徽章等等，可能最多只能放在房间当装饰。但是纪念品的关键意义，在于承载着旅游时的记忆。类似的还有单机游戏发售时，除了标准版外，往往会同步发售包含手办、美术设定集等物品的豪华版，同样用来承载玩家的情怀。最典型的例子，就是 Google 的 Doodle 设计，在不同的节日、纪念日、或者缅怀一些先驱、艺术家时，会投入很高的成本起设计各种趣味性的插画 logo，丰富有趣，而且很多时候可以支持互动游戏。比如 18 年的万圣节，就做了一个有趣的多人对战的小游戏。Doodle 不仅是 Google 文化、价值观的象征，也通过这种趣味性的创意让用户实现更深层次的情感交流，建立情感纽带并增加粘性，不会轻易得流失到其他替代品中。二、趣味性是什么关于这个概念，有三条相对客观专业的说法。德国古典哲学创始人康德《实用人类学》中，指出趣味性是人类由于受到外部环境的影响而对客观事物产生的直接的感性反应，不具有普遍性和必然性。通俗来讲是人们对身边的事物感到新奇、有趣、有意思，从而心理产生愉悦的变化。另外，康德在《判断力批判》也指出，趣味是指主体以积极主动的姿态，在超功利的层次上对某一对象表现出喜爱和愉悦的情绪状态。《汉语词典》将趣味释义为：使人感到愉快，能引起兴趣的特性。看似各不相同，但根据这三个概念提炼下，可以发现他们都是在融入一种正向的情绪加以解释。那么，趣味性背后的情绪到底是什么？三、趣味性背后的情绪情绪这东西千变万化，为了避免主观臆断的不准确，我搜罗了关于情绪的研究资料，目前相对权威的有三个：plutchik 情绪轮、日本感性工学、诺曼的三层理论。后两者未对情绪进行指标的定义，所以这里只聚焦在情绪轮上。情绪轮由罗伯特·普洛特契克开创，这个理论指出人类的基本情绪一共由 8 种，生气、厌恶、恐惧、悲伤、期待、愉悦、意外和信任。撇去那些负面情绪，能够符合趣味性带来的情绪基本就三种：愉悦、期待和意外。为了为产品所用，就需要提炼出更具象的特征。下面，我通过脑暴的方式对每类情绪进行发散联想。1. 关于愉悦感联想了大量可以引发愉悦情绪的事物，比如可爱的猫猫、各类好玩的表情包、毛绒玩具、影视作品里那些会突然说话的动物、解压神器等等。我发现这些事物，一般具备了以下特征；会给予我们即时反馈拟人化，比如带有人类才有的表情，或者是人类的动作语言柔软的、毛茸茸的、圆润的、有温度的会动的、解压的2. 关于期待感联想了大量可以引发期待情绪的事物，比如被买爆的泡泡玛特盲盒，商家售卖的福袋，各种诸如掷骰子、老虎机的随机性游戏，各类抽奖活动，一些游戏开局 roll 属性点的环节（比如金 2、河洛等游戏，当年玩的时候我惊讶得发现我居然能 roll 上一整天）这些事物大致会带有这些特征：未知的、神秘的满足人类的好奇心的对结果能满怀希望的随机的正向奖赏只需要一步简单到发指的操作（打开容器、拉动拉杆、点击按钮等等），不需要任何的行动门槛，也没有等待时间3. 关于惊喜感比如《设计中的设计》这本书中提到的出入境的印章案例、一兰拉面碗底的细节、电影或者游戏中突然出现的彩蛋、iPhone 第一代的发布现场、突然发现的世外桃源、突袭的生日惊喜等等。这些事物大致会带有这些特征：超出原有预期的未提前告知的正向结果的产生共鸣的那么，这些特征又该如何更具象得落地成策略，产品中又是如何利用这些策略，引导用户产生这些情绪的呢？下面，我将基于这三类维度，并结合大量的大厂案例来为一步步你抽丝剥茧。四、如何制造愉悦感1. 关于拟人化基于上面的挖掘，我发现能引发愉悦感的一个明显特征，就是拟人化，这个非常有意思。克利福德·纳斯在《the man who lied to his laptop》这本书中提出过一个观点：人们对待电脑的方式，与我们在与他人交流时使用的社会规范是一致的。我们对电脑的反应，就好像它们是人类一样。也正因此，很多原本没有生命体征的物体，一旦被赋予了拟人形象，就容易被大家所接纳、引发愉悦。做一下细分的话，拟人化基本涵盖了三个方面：语言、形象和表情。① 拟人化的语言人对于具体的拟人形象更容易产生情感，其中便包含拟人化的口吻。使用这种口吻与用户交流，而非冷冰冰的设备语言，就可以提升产品温度，引导用户对产品产生正向情感，关于这块我总结了两方面。一方面，文案尽量得接地气、轻松。拿京东这款产品举例，文案从口吻上都会采用一种很轻松、接地气的拟人语气，来拉近和用户间的距离。比如在引导词后加入“哦~”“~”这种轻松的语气词。另外，「京东问答」版块的引导词：传统产品是“添加问答”，是不是平平无奇。但京东使用了“我来助你一臂之力~”QQ 浏览器的评论暗提示，也不是传统的“写评论”“输入评论”，而是像日常聊天那样“我来说两句”，非常接地气、生活化。知乎直接套用了流行语，诙谐的同时引导用户注意言论。另一方面，人类富有情绪变化，所以一旦用户触发了某个正面/负面行为，就可以给与情绪反馈。在用户完成商品评价后，京东不仅仅是很传统得反馈“评价成功”，而是又加入了“感谢您！”的感谢词。看似加了三个字，但行动过后的正向感激反馈，和我们日常生活中受到正向反馈一样，被唤起正向的愉悦情绪。并愿意继续这个行为。知乎的圈子业务，在用户完成签到后，反馈完成的基础上，使用了正向的情感反馈“ 我就知道你会再来看我”，仿佛是一位关系不错的老朋友，来唤起用户正向情绪。另外，知乎在改版后，回答收到赞也不仅仅是“点赞成功”这类冷冰冰的机器语言，而是“已收到你的喜欢，谢谢！”并且配以作者头像，非常形象得传出对对方对我们的感谢反馈。这种正向反馈，相比”点赞成功“更有效得唤起正向情绪，形成正向激励。当然，用户的消极行为也可以产生情绪反馈。比如现在很多产品的取关反馈，不是传统的“确认”“取消”，而是用“残忍取关”和“给个机会”这种融入情感的文案来做挽留，就好像真的有个活生生的人，在被你否定后反馈给你的情绪，请求你再给个机会。有趣的同时一定程度上也可以唤醒用户的同情。（虽然这种做法过于业务导向，且有绑架用户的嫌疑）② 拟人化的形象人对于具体的拟人形象更容易产生情感。因此，树立一个拟人化的品牌形象（也就是我们常说的 IP），可以使用户对产品快速建立情感联系，也可以强化品牌感知。比如优酷的猴子、高德地图的老鹰、钉钉的燕子、linefriends 等等。比如京东的这只狗子，兜底页、缺省页、启动页，都做了狗这个拟人形象的贯穿。如果你记得没错的话，形象改版之前这只狗还是四脚坐地上的，但改版后就两脚着地了。这同样是通过更拟人的形象来赋予「人格」，以此提升愉悦感，拉近距离。再比如夸克甚至单独新增了底 tab 入口，通过 3d 品牌形象，实现与用户的智能交流。另外，卡片和语音搜索都做了形象贯穿，后者还使用了形象的眼睛，来通过眼睛的变化进行情感交流。③ 拟人化的表情一段文字在加入了表情后，我们就能迅速了解到对方的情绪（比如我们日常的聊天）。因此表情这一招，也可以用以加深用户与产品的情感交流。它可以和语音、形象灵活结合使用。通过全面的拟人化，来大幅提升用户对产品的形象感知，促进用户情感的产生、加深用户和产品的情感链接。比如用语言输入，当系统未识别清楚时，传统的方案可能是一个错误图标加上「未识别声音，请再试一遍」的文案，但夸克中则使用了品牌形象的双眼来传达失落的表情，并结合了拟人化的语言。同样做法的还有百度的未开麦提示、段子头图，快速传达产品的情绪，和用户情感交流。另外，闲鱼设置昵称时，正在输入时、以及超出了限定字数，右侧的形象表情也会发生变化。除了拟人化能引发愉悦外，还有一个很容易被忽略的要素同样能起到作用——动画反馈。2. 动画反馈提起动画的作用，我们更多人首先想到的可能是强引导、注意力吸引，但动画同样能触发用户愉悦。比如动画更加贴近现实，或者结合拟人化的特征时。① 贴近现实最典型的就是苹果 App Store 从卡片到详情页的转场过渡，点按的预备动作、卡片的放大展开、缓出的曲线、转场完成的惯性等等，都很贴近现实物理世界的运动规律。而这种自然的丝滑也更能引发用户的愉悦。② 结合拟人化比如知乎的加载动画，结合了拟人化的特征，让这个过程变得格外有趣。刘看山奋笔疾书的动作也很符合知乎这款产品的定位。五、如何制造期待感1. 随机给与内容根据我们对期待感的脑暴，发现能触发这种情绪最典型的特征，就是随机性。在产品中，则可以通过随机给予用户有价值的内容来引发用户的关注。结果的不确定使过程充满神秘，这种状态让用户兴奋和满怀期待，不会轻易离开。比如网易新闻在进行新闻加载的操作时，会在加载动画上加入一个随机的小贴士。内容大致有三类：黄历、名言和一句话新闻。而且这些内容完全是随机出现，这种刷新过程好像在开盲盒，你无法预知会给你什么内容，非常有趣。而且它们入口深，不干扰；内容对用户也具有价值。同样的还有丁香医生。在首页每次下来刷新后，都会出现不一样的健康类的小贴士。随机性很强，富有趣味。而且可以很好得满足求知欲。雪球的个人页上，上划时也会随机给一条关于投资、市场的名言和网友的热门观点。2. 随机性游戏把现实生活中的游戏搬到了手机，同样能激发用户的好奇和期待。比如微信读书的翻牌子、摇一摇、老虎机。还有天猫的翻牌子。六、如何制造惊喜感格雷戈里·伯恩斯曾做个关于脑部区域的研究，发现大脑不仅探寻未知，而且实际上还渴望未知。相比那些已知的日常惯例，新鲜新颖的事物更容易引人注意。所以提供一些以往没有过的、出乎意料的事物或互动，不但能引起注意力，而且也会带来惊喜感。产品中的惊喜感设计，可以说是使用瞬间能够触达我们内心的一种短暂性愉悦，一个体验的峰值。根据对惊喜感的挖掘，一个典型的特征就是超出预期，并且未提前预料。比如 Figma 使用过程中，团队成员和你同时长按鼠标，并且靠在一起后，就可与触发击掌的动画彩蛋，非常有意思。比如京东在五星好评后，会放烟花庆祝。比如很多内容型产品，在详情页长按点赞按钮后，会触发全屏的「爆赞」动画。再比如用户生日当天，通过启动页、弹窗等场景送上生日祝福等等。这些能够超出用户预期的细节，即便多么细枝末节、出现频率多低，但只要能够被触发，都可能因为惊喜感而生成情绪峰值，加深用户和产品的情感链接。最后以上，便是趣味性背后的情绪挖掘和案例讲解。作为设计师，我们在工作中总是强调以用户为中心，通过不断的调研、跟访、可用性测试来了解、分类用户，但更多的结果可能只是让产品不断得贴合用户的心智、符合预期。但如何增加粘度、建立深层链接，就需要通过趣味性这种情感化表达方式，来为用户制造愉悦、期待甚至惊喜。正像诺曼在「情感与设计」中说的那样，每个产品都需要令人更放松、更愉悦的设计，以此来增强产品的适用性。希望这篇文章能对你有所启发。我是设计师 Andrew，我们下期再见。参考资料：唐纳德·诺曼：设计心理学 3——情感化设计可风：APP 界面如何打造情感化设计？罗闪闪：「情感化设计」界面如何拨动你的小心弦？Tarun Kohli：The Why and How of Emotional Design腾讯 ISUX：产品细节中的情感化设计欢迎关注作者微信公众号：「Andrew的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/design-for-fun
字体 英文 元素 大家好，我是和你们聊设计的花生~之前为大家推荐过各种风格和类型的免费英文字体，适合不同的设计主题。其实英文字体除了作为正文或标题传递信息外，也可以作为“图形”装饰在画面中，增加画面的设计感和视觉张力。英文字体作为装饰元素在画报中的应用一般来说比较粗重的英文字体都可以放大作为装饰元素使用，但是比起常规的字体，具有设计感的字体更能提升质感。今天就为大家推荐 6 款我精心整理的英文字体，它们各有特色，视觉吸引力十足。适合放在个性潮流海报中作为装饰元素使用，也可以用于 Logo、作品集和 VI 设计，一起来看看吧~往期字体推荐:海报如何更有力量感？加上这个元素准没错！（附素材下载）大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到海报设计中，可以营造浪漫优雅的氛围。阅读文章 > 一、FacónFacón 是一款全大写的无衬线字体，由 Alejo Bergmann 设计并免费分享给所有人使用。字形粗黑，特点是字形断裂并带有尖锐突出的斜刺，像是被利刃快速划过后带出的痕迹。再加上字形向右微微倾斜，使得字体整体带有一种速度感和力量感，外形极具张力。二、Rubik GlitchGlitch 意味“故障”，而 Rubik Glitch 正是一款自带故障风特效的字体。字形厚重，带有参差不齐的粗糙短刺，以模拟电子屏幕故障后的显示效果，有种复古赛博朋克的感觉，适合科幻机能风主题的设计。同时我觉得它的外形也有些像水中的倒影。5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 三、Libre Barcode 39 Extended Text之前为大家推荐海报设计中常用的装饰元素时，就提到过条形码，当时给大家推荐的方法是直接从在线网站上下载素材。最近我发现了一款专门制作条形码的字体，每个字母和数字都有对应的形状，安装后输入任意内容就能自动生成对应的条形码，且尺寸和颜色可以随时修改，比使用在线网站更为方便快捷。简单又实用！5种设计师必学的海报设计装饰元素（二）大家好，这里是和你们聊设计的花生~上一期的文章发出后受到很多小伙伴的欢迎，那今天继续为大家带来 5 种海报常用装饰元素设计的小技巧，本期的元素分别是：环绕文字、黑白方格、条形码、进度条(能量条)和文字警戒带。阅读文章 > 四、KounstructKounstruct 是一款高度图形化的英文字体，字母都是由直线构成，没有曲线和圆角，给人坚硬敦实的感觉。虽然辨识度较低，但是装饰性很高，特别是字母紧密排列在一起的时，可以形成特殊的图案纹理。五、ModulordModulord 也是一款图形化程度很高的字体，看起来像是由各不相同的矩形块堆叠而成，类似于像素字体但是更为概括简洁。字形抽象，因此适用于大尺寸的标题而非正文，但单个字母或者数字很适合放大作为主视觉元素使用。六、RonRon 是一款具有未来科技感的字体，字体笔画在转折处做了断开处理，仿佛是由一个个不同的小部件组装起来的。字体线条中等粗细，在断开处做了圆角处理，外形规整但负空间灵活透气，排版效果舒适，给人简洁、中性、沉稳之感。好啦以上就是今天为大家推荐的 6 款各具特色的免费可商用英文字体，希望对大家的设计有帮助~ 字体安装包都准备好了，下载方式见文章开头和结尾的链接。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：免费可商用！优设鲨鱼菲特健康体来啦！双 11 刚刚过去，作为电商设计师的你是不是已经开始准备双 12 的视觉稿了？阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 6款个性英文字体安装包740KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/6-trendy-english-font
作品集 封面 案例 最近看了一圈 新发布的一些作品集，本身质量先不提，光是封面的做法，就让我觉得对治疗低血压有神奇的疗效……鉴于封面对于作品集的作用，以及作品集本身的重要性，我打算单独输出几篇针对它的专题分享，帮助大家做出 “正常” 的作品集封面。今天这篇先从反面案例开始说起，通过这些总结来帮助大家刷新对封面设计的认识，然后再在下一篇分享封面设计的相关思路。更多作品集设计干货：设计师工作需求很琐碎，作品集没大项目怎么办？编者按；平时工作太过琐碎，没有遇到大项目，感觉设计作品集里没东西可以展示？阅读文章 > 一、照片的错误应用第一个要讲的，就是封面中个人照片的错误应用。因为这阵子直播课程中正好看到一份非常有代表性的案例，所以必须先从它开始说起，案例见下图。不知道大家看完有什么样的感受，至少我看到的第一反映，就是它像一份地产、保险、4S 店的销售应聘简历……不是说在封面放自己照片不行，反而我非常建议这么做，但第一照片不能这么拍，第二展示不能这么“小气”。作为设计师，一定不要穿廉价的职业装拍照，因为那在国内的环境下是一线销售的标准装扮。一定想穿西服，也要走偏休闲、定制的款式，但你确定自己驾驭得住（总之就是不建议）？要放自己的照片那就一定要自然，有审美趣味，比如下面这些案例。什么？你说自己不是靓仔美女？这恰恰是审美趣味表现的途径之一，并不是长得好看才能有好的照片，这一方面考验摄影师的功力，另一方面反映你自我的审美要求。比如下面这些长相并不凸出的照片案例：Nigo色部义昭一定不要整得过于花哨，“前卫”过头风险太大，不是匹配的行业的话是很难有好的反馈的。比如过于杀马特、赛博朋克、末日废土，或者干脆拿个武士刀的中二都市机能……觉得实在没有合适的，对长相也自卑得抠脚（是得纠正），大不了不放也没关系。但绝对不要因为觉得自己不行，然后就放个老外的照片。这在我这边收到过的简历和网上看到的案例中也非常普遍，比如下面这些真实案例。觉得自己不行，所以放个鬼佬的照片就行了？这是一个非常离谱的思路，我一直没办法理解这是怎么想的。设计师的作品集就是简历，简历里放照片一方面是有必要的，另一方面可以很好的提升整体的可信度，能带来一些正面的影响。虽然最终关注的是作品质量，不放加分拿不到，但起码不要在这种地方呈现自杀性负分操作。二、字体使用混乱第二种，就是字体应用混乱，不仅使用的字体类型超出合理的范畴，而且很多字体风格明显不搭但强行应用，比如下面这些案例。字放的多，在平面海报设计是很常见，但这需要明确的排版思路支撑，以及对字体类型的合理搭配。尤其在字体选择和参数应用上，存在大量的细节需要关注。比如多数特殊字体正负形的比例很失衡，非常不适合作为大标题。非标题性英文几乎都有字间距手动控制的需要，防止浏览效果太离散。英文数字的字号字重往往需要独立调节才能和中文形成合理的搭配……很多 UI 设计师对排版的理解仅仅是把字放进画布里，随便改改参数，而并没有真正理解背后的应用逻辑。所以导致他们即时直接照抄一些优秀的版式，做出来的设计还是很奇怪。而且想要把画面塞得越满，效果也就越差。封面不是字数越多，字体越特殊，排得越满越好，而是要在非必要的情况下给出足够的留白，塑造舒适的空间感。重申一遍，不是挤满元素的做法不行，而是要做那种设计就得有对应的驾驭能力，不要在你自己没有想清楚的情况下乱抄，这样不仅做起来没简约留白多的设计容易，效果也不会更好。同时，中文的应用上我只建议使用标准的黑体类型，如普惠、旗黑、兰亭、鸿蒙、MiSans、OPPO Sans 等，不要去用一些风格太强烈的字体。尤其是一些免费的标题体，它们大多是针对互联网运营场景开发的营销字体，只会让你的封面产生一股廉价又浓郁的互联网营销风……三、使用奇怪的3D元素因为对平面认识的匮乏，很多人在设计的时候想放主体元素，就会找插画或者 3D 元素。但往往这些素材的质量非常差，根本无法作为一份设计作品集的封面主体元素，比如下面案例。还有一种情况，就是有一些人用了一些比较不错的素材，然后立马有一大群人跟着一起用，导致同类素材泛滥。比如下面的 3D 胖手，用我在招聘中的学员讲的话就是，10 份作品集一半里有这个东西。3D 和插画实际上和 UI 项目并没有太大的关系，要放也要证明自己有专业的输出能力，而不是放一些低质量作品、素材，在第一页告诉观看者你 3D 或插画能力是不及格的。完全不建议在方面出现这些元素，最多使用一些科技化的、没有复杂轮廓的渲染元素，来提供相关氛围。四、烂大街模板的使用经常在这几个网站看作品集的话，应该下面这些案例没少看，都是我从不同作品集里截图出来的。很多人以为的作品集就是买个模板，改改字，或者演都不演一个字没动就完稿，这是没有意义的。这种直接套模板的方式满屏输出着 “敷衍” 的态度。可以直接给一个定论，直接买网上模板，还是完全跟着教程做，或者直接模仿已经是大路货的封面，是没有任何前途的，对于专业的，经验丰富的设计团队来讲，看到封面就可以关掉了，没有往下看的必要！五、矩形元素滥用套娃还有个特别奇怪，或者说不应该发生的，就是很多封面喜欢“套娃”，在里面画矩形框，比如下面这种。我们正常在电脑上看一份作品集，就是弹窗模式下查看，它本来就有个外部窗口。然后再这个窗口内，再强行画一个窗口，只会让整体的展示更局促、小气、业余。这和前面说的问题类似，封面一定要做好空间的管理，减少这种不必要的分割，通过留白来提升页面的展示效果。六、流行风格的滥用UI 圈子每一阵子会流行一种平面风格，原因是 UI 设计师整体的平面水平不足，所以总是要在某些优秀案例问世后一窝蜂的“致敬”。日常练习没关系，但作为作品集带有个人印记的内容上，完全不建议大家模仿流行的风格。即使你觉得别人做出来的效果好，但只要用的人多，就绝对不要去跟风。比如这两年比较流行的酸性风格、真空包装袋、毛玻璃等。这种直接跟风的做法也非常容易拉低整体的分值，尤其成熟的设计团队会觉得套用烂大街风格，那么该设计师毫无个人积累和个性，会抗拒接收这样的作品集。建议所有在做作品集的同学，在国内互联网上看到别人的作品集，尤其是高热度的，还是很多人都那么做的东西，直接放弃和他们做一样的风格，因为那种不是第一批做的跟风者，是吃不到螃蟹的，徒增反感。七、没有原则的色彩应用还有色彩的问题，很多封面的用色处于没有理由的激进，完全没有专业设计师作品集该有专业感和稳重，让人觉得非常的浮夸。或者缺乏主色，颜色呈现得很混乱，没有办法构建一个完整的画册视觉观感。封面的色彩应用一定要控制色彩数量，不要想着做成五彩斑斓的黑，或者使用了一些国潮、赛博朋克才会用的激进霓虹配色。我们的作品集是 UI 作品集，不是平面、品牌、电商作品集，而且只有面向这些潮流领域的设计师作品集才有场景做成这个样子，尤其是 B 端设计师这么做只会让人觉得非常不稳重不专业！确保你的封面有主体的颜色，且除了图片的用色数量尽量控制在 3 种以内，才能体现稳重和秩序。封面的配色是要在后面的展示页面中有关联的，所以尽量在完成整体设计后再回过来做出调整，可以比较好的保证整体的统一性，提升观看者体验。八、用力过猛虎头蛇尾很多人也意识到作品集封面的重要性，所以会花很多精力去处理它。确实有一部分作品集的封面完成度是不错的，也感觉出来花了非常大的精力，但后续的内容完全跟不上封面的质量……这个就不找图例了，需要大家自己在网站列表中看那些封面做的特别吸引人的作品集，点击进去完整看一遍感受一下，就会发现有很多作品集实际内容不尽如人意。如果封面一开始投入的精力过多，拉起了我们的期待值，那么面试者就会对后续的内容有较高的期望。但如果后面的内容页面设计明显出现断层，那么这个失望的情绪就会被放大。以及因为这种落差，会认为封面是不是你直接抄了优秀的作品不是自己完成的。一定要记得封面是作品集整体的一部分，而不是一个独立设计的作品，在投入的精力中必须确保前后内容的统一和一致性。结尾以上就是关于作品集封面常见问题的总结了，建议大家多在相关网站多浏览作品集的列表，体会下收简历的人的心情。你们就会明白，大多数设计师找不到工作不是没有原因的，很多人的作品集从封面看到的那刻起，就可以直接关了，压根没必要往下看！作品集是需要很认真和严肃对待的东西，但是很明显很多人没有想明白，所以不要光抱怨外部环境，好好从作品集出发作出优化吧！我会在后续更新封面设计的相关思路，敬请期待！我们下篇再贱～欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/cover-of-portfolio
指示灯 都是 设计师 本文是 HMI 常见的问题解答，也包含了许多基础知识，大家要做好笔记噢。更多车载设计知识请看专题 https://www.uisdc.com/zt/hmi-design一、“HMI”设计到底是什么？HMI 是“人机界面的缩写”，HMI 人机界面是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可接受形式之间的转换。肯定会有人问 HMI 和 UI 有什么区别呀？从本质上来讲，HMI 与 UI 其实都是用户界面的意思，只是 HMI 一般特指工业机器的用户界面，比如车载屏幕、数控机器的操作界面，这些工业设备有个特点就是体积更大、更厚重。而我们说的 UI，通常指的是电脑、手机、电视这种居家数码设备的用户界面，其体积相对更加轻巧。现在其实蛮注重用户体验这一块的，之前我有去研究过 HCI 这个专业，HCI 指的就是人机交互领域的，是一门研究系统与用户之间的交互关系的学问，这个专业包含了很多学科：计算机科学（教你写代码的）、心理学（了解用户，做出更好的体验）、社会学（就是研究社会行为与人类群体的社会科学）、图形设计（就是我们很熟悉的设计方面知识）、最后还有一个工业设计（造型和机械设计）。如果有想出国留学学习人机交互类的话，强力推荐去性价比高的荷兰，学费和生活费都比其他留学地方少，像荷兰代尔夫特理工大学学费一年 1.5 万欧元，其他北欧国家基本都是 2.5-3W 欧，如果你家里可以支持的话，去美国的卡内基梅隆大学、华盛顿大学、密歇根大学，美国的人机交互专业在世界都是靠前排名的，英国的皇家艺术学院、伦敦艺术大学、布鲁内尔大学也都不错。为什么不推荐德国、意大利、日本呢，他们都属于小语种，其次德国和意大利不接受转专业学生，需要结合你的 GPA 来选择学校，留学篇幅今天就先讲到，如果有很感兴趣小伙伴，请留言，我可以再出一篇留学方面的帖子。二、HMI市场行情怎么样？我经常被问的最多的问题就是，HMI 这个赛道如何？市场行情怎么样？说句扎心的话，每个行业都缺少优秀的人才，在各行各业无一例外，实力很强的人不会担心自己的路，其实也没什么大不了的，重新选择一个赛道给自己一个证明的机会，做事情请果断一些，别纠结到最后什么也做不了。HMI 还算蓝海，没有 C 端和 B 端竞争那么激烈，不过再过个 2 年就不好说了，我是 19 年进入的 HMI 行业，当时我是跨行业进来的，那个时候还是蛮好进的，现在已经要求必须有车载项目经验了，再往后会更加的难，所以大家要把握住机会赶紧入坑。因为 HMI 设计的门槛相对来说，还是比其他设计要高一些的，所以如果你打算换赛道，需要慎重的考虑清楚，说一句很负责任的话：“一旦选择了，请你一定要坚持下去” ，如果能够把一个事业变成自己喜欢、并且有兴趣干的事情，我觉得超级棒。就拿我来说吧，刚开始进入车载行业的时候我也是新手，工作的前三个月我每天也是很迷茫干些基础的事情，熟悉工作流程等等，再到后来同时管理多项目，并且尝试总结复盘项目，这也是我开始写作的源头，想着如何复盘自己做东西，我也不知道我自己到底能坚持多久写作，但就在写完第一篇之后我发现自己还是蛮喜欢写作的过程，可以从写作过程中还能学习新的知识点，找到自己的知识盲区。最近几年新能源一直保持迅速的增长趋势，造车的新势力越来越多，再到老牌车企的转型、国外汽车品牌的外企、并且汽车供应商也有越来越多（这边的供应商指的就是乙方类型的公司）。HMI 市场行情怎么样，就直接能反映出的就是 HMI 就业大环境，他们都是紧密结合的。我们需要借助招聘平台看一下数据，拿上海来举例，HMI 设计师平均薪资是高于其他行业设计师的，有着车载项目工作经验的设计 1-3 年内，薪资基本上都是 20K 以上，上不封顶，薪资确实还是蛮诱人的。除了薪资，大家肯定还想知道自己所在的城市有哪些车企，上海、北京的车企相对起来比其他城市多，上海有蔚来、特斯拉、上汽、奇瑞、还有外企雷诺、宝马、还有一些车企的分部门。北京有理想、一汽、小米、滴滴，还有大众等知名的车企。其他城市相对较少，广州有小鹏、深圳有比亚迪、百度，武汉的东风、杭州吉利研究院、东北的大连、长春都会有老牌车企，喜欢吃螺蛳粉的同学可以考虑去柳州，那边有五菱。像南京、重庆、保定也都会有车企子公司和分部、还会有一些供应商团队。所以建议大家选择第一梯队：上海、北京，第二梯队：深圳、广州、杭州，其他城市为第三梯队，如果不想在大城市卷的话，老家要是也有车企的分部，可以选择回老家工作。三、HMI 设计和 UI 设计区别？我们从这四点出发去思考：环境因素不同、界面承载的设备、交互原则不同、视觉方面差异。1. 环境因素不同：首先是环境因素不同，APP UI 设计可能更倾向于操作体验，而车载 HMI 设计更在意的点是主驾驶的安全驾驶，所以这两者使用的环境不同，侧重点也不一样。2. 界面承载的设备：UI 界面承载的设备不一样，车载屏幕有很多种类，并且不同的车型有多种分辨率，相对移动端分辨率而言还是要多出一些的，而且还有很复杂的运算规则，根据车载屏幕的 PPi 计算出设计图需要多大才合适。3. 交互原则不同：车载端和移动端不同的点在于，车载端考虑的第一要素就是安全性的问题，任何一个交互设计都会影响到安全驾驶，其次就是车载端反馈要及时，比如我车辆发出警报，胎压不足，不能等一段时间才反馈出来，这样会引发一系列车辆安全问题，而移动端可以放缓一些，这就是他们之间的差别，还有交互方式的不同，车载端有触摸、语音、物理按键、还有手势交互，不过这方面运用现在还是比较少的。4. 视觉方面差异：视觉方面就比较多了，比如颜色运用，因为在驾驶过程中，主驾驶需要看中控屏幕上的内容，不能太费力，因此文字和底图的颜色对比度要高，要能够让用户很清晰的可以看到。接下来就是点击的操作热区，一般车载端的需要操作点击的区域都会比移动端大，因为在驾驶过程中，用户有的时候需要盲操，所以增加热区面积，是为了提高完成任务的成功率。车载端不能设计过于花哨的设计，容易吸引用户的注意力，从而引发安全事故，所以千万别搞的花里胡哨。最后再提一点，就是内容排布的问题，需要操作的按钮尽可能的要靠近主驾驶的位置，有一些国家主驾驶是右边的，所以在做海外版本的时候，要先调研一下当地的情况。页面层级不要过高，如果隐藏的很深的话用户无法找到，进行操作。在驾驶过程中如果花费很久时间来找的话，体验感是很差的。四、还要坚持 C 端、B 端嘛？我们该如何选择自己未来要走的路？假设心里的场景：啊呀，我作品集都做了，找了很久的工作都还没找到，我到底适不适合做设计，不做设计我能干啥呢？一度怀疑自己，否定自己，这一类还算好的，起码人家作品集都做了，也准备面试的准备工作，就怕啥也没有，什么也没准备，还想跳槽换工作的。总结这类人的问题点：遇到困难不知道如何解决，甚至想逃避问题，想着要不我换一个行业试试，说不定就可行了呢，什么我都想接触一下试试看，我想和你说的是，如果你不学会如何解决问题，那么大概率你换到别的行业别的赛道也是没办法解决的，因为你的第一反应是选择逃避，当然也有同学是尝试去挖掘出现问题的根本原因是什么，然后去解决它，如果你真的努力的解决了，最后还是没办法上岸的话，你再换赛道，说实话现在行情一年不如一年了。最后给大家建议：主要看你们自己喜欢那个行业，对于这个行业感兴趣，有了兴趣才会认真的做好每一件事情，答应我别做一个没有感情的设计输出机器，这也是我不愿意看到的，工作中肯定会有一些很基础的任务，大家都会去抱怨，好费时间不想做，这类的事情它的占比不能很多，不然你真的就成了机器人操作手了。如果你发现一直没有成长，就得反思一下，是自己没有找对学习的方法，还是在这家公司一只做着边缘化的工作，导致自己浪费了大把时间，如果是后者，请尽快做作品集换工作，那第一种的呢？学习这件事情，还是要找到适合自己节奏的步伐，真的！过来人的经验就是两个字“坚持”，为什么这么说呢？不能一上来我现在就要好好学习，第一天就熬夜干的到凌晨 2、3 点，第二天就不想干了，好累啊！今天休息一天，明天继续，给自己找借口就来了，到了第三天可能就忘记了前一天自己说要做的事情，朋友一喊来上号打游戏了三排上星，然后打完游戏之后就非常懊恼，没错这些也都是我之前经历过的，所以我明白大家当时的心情。因此给自己制定一个合理的学习计划是非常非常重要的，规定自己什么时间内做什么事情，也可以搭配做完今天的事情奖励自己玩一个小时游戏。后面如果真的专注做一个事情，可能就不会去想奶头乐了，我们要学会延迟满足。其次就是要一直不断的提高自己学习的效率，前期我写一篇文章需要 1 个半月，现在快的话 2 个星期就好了。所以，你在某个领域有所成就的话，那就请继续往前，别轻易换赛道，换赛道意味着你就得从 0 开始。如果真的想换赛道，请你一定要提前熟悉这个赛道、并且有着计划的学习，不要打无准备的仗，不然你会输的很惨。五、HMI 设计师需要那些能力？HMI 设计师需要具备哪些能力？需要哪些技能和工作的任职要求？让我们看一下招聘平台。想做设计管理者的：是需要有带过团队，并且负责过量产的 0-1 的项目搭建过程需要对一个车辆系统以及硬件的了解需要对设计流行趋势的分析、以及竞品分析，还需要负责产品前期的概念视觉设计需要负责整个车载系统的视觉规范、参与设计流程优化过程，版本迭代、完善 HMI 车机系统要有丰富的解决方案能力，以及多个项目处理的能力通过业务需求、用户研究、数据分析、行业趋势，能够主导产品的整体的体验方案想做到领导层，英语是一个必备项，这个超级加分现阶段你的定位如果是先做一个设计师的话：除了上面管理的内容，其他技能项你都需要具备有，比如车载系统设计的提案能力，系统的组件库和设计规范搭建的工作，以及前期对于竞品的视觉分析等等内容。如果对 UE 和动效感兴趣的小伙伴们，大家按照这种方式可以去自己查询一下。六、HMI 需要设计那些内容？在视觉方面，HMI 设计师需要设计哪些内容？这边也顺带把车载有哪些屏幕都统统讲一遍吧，我们 HMI 设计师需要设计的车载屏幕有 HUD、仪表盘、中控、副驾驶娱乐屏幕，扶手屏（这块屏幕一般是做空调模块的调节）、还有后排的娱乐屏幕。HUD 这块的内容相对很多，可以单独拿出来讲，我就简单介绍一下。仪表盘：仪表盘里面承载的内容会比较多，非常重要的信息：车速、转速、油量、水温、气压（卡车）、电池（电动车）。主要信息有：菜单类的（显示模式、驾驶信息、车辆信息、娱乐系统、维修保养、仪表设置）等。这边指示灯要重点讲一下：指示灯分为三类指示、警示、故障这三大类。指示灯一般有灯光信号灯、转向信号灯、驻车灯，它们的作用就是提示车辆各功能的状况；第二类警示灯，具有警示功能的，例如燃油指示灯、车门状态指示灯、安全带指示灯等，一般警示灯在驾驶员进行相应动作后会熄灭。第三类是故障指示灯，也是最重要的指示灯，例如发电机故障指示灯、ABS 故障指示灯、变速箱故障指示灯等。这些故障指示灯平时很少会点亮，或者在起动发动机时，会点亮片刻后熄灭，如果故障指示灯常亮，并且伴有警告声，表明车辆已经出现故障或者异常。千万不要小看故障指示灯，如果忽视不管，很有可能损坏车辆，严重危及行车安全。如果故障指示灯常亮，需要立刻进行检修。仪表盘次要信息有：时间、温度、行程等等。中控：中控屏幕承载整车系统最多的功能模块，我可以给大家列举出常用的一些功能，导航、电话、多媒体（包含了音乐、电台），音乐分为在线音乐类，比如 QQ、网易云、酷我音乐等，还有本地 USB 音乐、蓝牙音乐等。电台也是分为本地的 FM、AM 电台、在线电台例如喜马拉雅和蜻蜓 FM，都是经常使用的，还有设置选项、车辆设置、负一屏、360 倒车，后续我会将这些模块的设计进行拆解出来，逐一的给大家介绍中控屏幕是如何设计的。娱乐屏：副驾驶和后排的娱乐屏幕基本都是以娱乐为主，像音乐、电台、视频类、有的甚至有游戏类，这类的设计就不需要考虑驾驶因素了，这个就设计电视 TV 有点相似。后排娱乐屏幕并不是很多，一般中高端车型才会有，像奔驰、理想 L9、岚图梦想家、全新宝马 7 系。扶手屏：扶手屏幕，大多数都是以空调功能为主，可以调节温度、风量，其他的功能比如吹风模式等等。七、HMI 工作流程是怎么样子？HMI 工作流程和其他设计工作流程其实是基本一致的，整车系统的设计到落地发布，至少要半年时间，甚至多的需要长达一年的时间，如何做好项目管理也是我现在正在努力的方向。我们来看下这个流程：在产品初期的时候和公司高层确认项目的基本需求，以及项目的时间规划，最后再到人力分配的考量，这些都要有过实际项目经验才能知晓的，不然你真的一点都不知道咋做，HMI 的项目和其他移动端还是有很大不同点的，时间周期上肯定是远超过的。确认好项目基础内容，我们需要做的是对竞品的一个分析，从功能、交互、视觉各方面去拆解，并做好竞品分析的文档。接下来就是产品经理确认好整车系统的功能点，并输出相对应的 PRD 文档，接下来要拉上交互设计师 / UI 设计师 / 研发来评审，最终评审通过确认好，再输出给交互设计师。交互设计师根据产品经理的 PRD 文档，输出对应系统模块的交互逻辑图，并且也要挖掘新的交互方式，来提高用户整体的体验感，当交互设计师完成交互稿后需拉上前面一波人继续评审交互设计稿，通过之后就输出 UI 设计师。UI 设计师在产品初期项目组讨论好系统大方向的时候，其实就可以进行 UI 风格的定义，多整车系统方案设计的推导，将推导的多个方案，先设计内容进行小的评审会议后，再拉上项目高层最后确认用那一个方案。当方案确认好后，整车系统 UI 界面就开始输出了，输出过程中设计规范、组件库的搭建都要进行，这些内容都是跟着项目进程不断添加的，每一个模块输出 UI 效果图，都需要拉上设计内部人员确认，设计无误之后，再开始对接研发。将设计稿做好对接工作后，需交给研发，对页面进行开发。研发输出好之后，将安装包打版本，放进车机中去，紧跟着测试要进行系统功能、交互逻辑、视觉还原、交互体验的测试，将有问题的内容，提出 bug 并给到相对应的人去修改，当然我们 UI 设计也需要进行 UI 走查，因为 UI 方面还是设计师比较专业，能够发现问题。在项目过程中，我们经常也会遇到产品的需求变更、交互逻辑变更、以及视觉的设计优化等，问题全部都解决，车载系统能够正常跑通整个流程，就准备开新车发布会了，在发布会中展示车载系统的功能。当项目接近尾声，整个项目组都要进行对各自领域的复盘，我设计师也需要，后续就是车载系统 OTA 升级迭代了，每次 OTA 推送都会有新的功能点，或者是针对具体的某一个功能点优化。八、工作中如何相互配合？工作中配合方面呢，我有一些小心得，每一家公司工作配合可能都不一样，就像有的公司用飞书办公、有的用钉钉。我们公司是使用的飞书，用了 2 年多感觉还真的不错，不管是写文档、还是项目管理的排期都能很快上手。我们用的设计软件不一样，管理的方式也不一样，Figma 是可以同时多人操作，文件都是在云端上，这样会方便很多，但有的公司没有用这款软件怎么办呢？我们是用苹果云端实时同步的，文件是一个共享的状态，这个好处就是文件再也用传来传去了，直接复制下来，我这边为什么会提到复制呢，因为云端实时操作只能是一个人，如果出现多个人他就会出错，他会让你确认保存那个版本，所以内容需求修改文件的是，需要先沟通一下，如果有人在操作，你就把这个文件复制到本地来修改，修改好后再对其进行更新。我们一开始和研发对接是用插件，因为蓝湖需要跟公司申请费用才能使用，后来等费用审批下来后，我们整个部门也换上了蓝湖，上传蓝湖之后也方便研发、测试查看。这边还有一个小心得，就是如何快速响应车载视觉走查的修改，当 UI 走查的时候会出现一些需要修改的地方，我们如何做到快速验证呢，因为平板的大小和我们车机差不多大，我们将修改好后的效果图都导出图片放到车辆中控的位置，对其进行设计验证，如果没有问题我们再将修改好后的设计图对接研发，如果不这样做，可能会出现一个问题需要反复调整多次。九、如何培养自己 HMI 学习计划？先从收集车载素材开始。这边肯定会有人问，这些素材在哪里收集？查找输入的关键词是什么？如果你真的想入这一行，那么就算你每天在忙，也得挤出 45 分钟出来来收集素材，积累自己素材库，提高自己的眼界。收集这些素材还必须要分析它的设计优点和不足的地方，如果就一直收集不去反思的话，为了完成任务而去做，那么一开始你就别做。大家熟知的设计网站我就不介绍了，搜索的关键词如上图。可以去官方网站去搜索企业官网，还有就是去汽车之家之类的平台网站，找落地产品的效果图，最后一种就是去 4S 店去预约试驾，还有上海、北京这些地方定期都会举办车展，举办车展的这几天，你就玩命的拍，找几个小伙伴一起，大家去拍不同车，因为车展上面的车实在太多了。如何学习车载相关知识呢？首先你得下载好头部车企的App，比如小鹏汽车、理想汽车、蔚来汽车，这些车企都会有社区这一块内容，里面有很多可以补充你很多缺乏的知识，有的还有视频讲解车的基础操作等内容，这个是一定要下载的。头部的车企不仅要下载他们的 APP，微信公众号也要关注，因为他们会定期发送推文，抖音也要关注这一类的车企。新出行这款 APP 我强烈推荐，大家现在就可以去下载，这个是我私藏的宝藏 App。基础知识，肯定离不开看专业的文章，但 HMI 设计类的文章现在还是比少的，知乎还有几位大佬他们写是很专业的，可能和设计方面相关的知识会比较少，但是他们文章写相当专业，读不懂的话，你们就继续百度查找不懂的点。我已经把这些学习的资源都告诉小伙伴们了，那学习任务计划 大家是不是可以安排上来了。十、推荐的 HMI 相关书籍HMI 设计相关的书籍不是很多，我比较推荐这两本。第一本强力推荐购买，这里面包含了很多 HMI 的知识，里面有讲交互设计概论、基础认知心理学、决策制定与情景意识、多模态交互、心理负荷、驾驶分神与疲劳、交互界面与用户体验、交互设计理论、设计流程、设计方法、设计与测评、自动驾驶中的人因问题、驾驶模拟器的应用、行为研究方法，前面和大家提到 HCI 的专业，这本书基本包含很多内容了。第二本的话买的价值没有第一本大，因为第二本，只有第二章、第三章、第十章，对我们还有些用处，其余章节都是讲的是专业技术比如灯光显示、座椅调节、还有内外饰智能控制技术，这些都是硬件设计的知识。文章中如有不足之处，欢迎补充交流，我们下期见。下期文章预告：苹果 Carpaly 车机系统分析本篇来源：优设网原文地址：https://www.uisdc.com/hmi-talk
微软 神器 腾讯 注意看，这个男人叫小帅。经常刷短视频的设计师一定听过这句话，在AI绘画大行其道前，AI配音就已经渗透进大家的日常生活了。无论是电影解说还是知识科普，这个一模一样的音色总会重复响起。目前市面上有哪些免费的AI配音神器？今天这篇文章，给大家介绍4款AI配音神器，如果你想成为设计领域的视频创作者，但不想让别人知道你的声音，这篇文章就别忘记收藏咯。更多AI神器 https://www.uisdc.com/zt/ai-draw一、微软文本转语音网站链接：https://azure.microsoft.com/zh-cn/products/cognitive-services/text-to-speech/文本转语音是微软Azure服务的免费功能之一，别看免费，但功能极为强大，完全可以媲美人声。它支持超过140种语言，仅是中文就可以生成普通话、粤语、台语、四川话、东北话等9种类型。除此以外，还可以挑选不同的人物和情绪，语速和音调也可以自由调整。你甚至可以调整 SSML（语音合成标记语言），以控制文本不同部分的声音效果。注：SSML 可以微调音节、发音、语速、音量等，让人声更真实。详细教程可以看官方的文档，在此不赘述：https://learn.microsoft.com/zh-cn/azure来看视频演示效果（记得点开右下角的声音）：是不是仿佛看到了电影解说？不过微软官网访问速度较慢，想注册 Azure 需要Visa/万事达信用卡，导致很多人以为用不了。其实网页版的试用功能已经够用了，打开网页版后下拉，看到试用界面，粘贴文字后选择需要的语言和声音，QQ录屏后通过剪映、PR等剪辑工具导出音频即可。如果你之前用过油猴，也可以安装「音视频通用下载器」脚本直接下载音频。脚本链接：https://greasyfork.org/zh-CN/scripts/382057国内有很多公司用微软的功能开发软件收费赚钱，大家别轻易被骗。注：油猴是一款谷歌浏览器插件，能通过安装脚本实现「微博/百度等网页样式优化」、「豆瓣页面自动搜寻资源」等上万种功能。如果大家对油猴插件感兴趣，可以评论留言，人多的话之后再出一期油猴脚本推荐。二、剪映下载链接：https://lv.ulikecam.com/剪映是抖音推出的视频剪辑工具，也有文字转语音功能。打开剪映，将视频文件拖入到时间线，右键 - 识别字幕/歌词，会自动生成字幕，点击字幕后可以看到右上角有个朗读选项，里面包含了41种配音，除了2个需要开通会员才能用，别的都可以直接用。当然，也可以自己打字让AI朗读，视频演示效果（记得点开右下角的声音）：三、腾讯智影网站链接：https://zenvideo.qq.com/腾讯智影是一个视频创作工具，拥有视频剪辑、文本配音、数字人播报、字幕识别、文章转视频、广告配音等功能。文本配音功能也有100多种配音类型可选，相比微软，腾讯智影的介绍更接地气，比如「抖音最火」「喊麦风格」等，部分配音需要开通会员才能享有，每日有5次免费额度，使用频率不高的同学够用了。广告配音也是一个十分亮眼的功能，可以生成不同广告风格的配音，比如汽车、商场促销、酒类等领域。四、Ondoku网站链接：https://ondoku3.com/zh-hans/相对于微软、抖音和腾讯，这款在线配音工具更像是机器朗读。唯一的优点是注册后前5000字是免费的，且在线朗读后可以直接下载。总结一下，如果是高频用户，建议还是用剪映/微软。如果不想要烂大街的配音，也可以试试腾讯。更多AI神器：手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > 人工智能快速出图！盘点 4 款大厂出品的 AI 绘画神器大家好，我是和你们聊设计的花生~在 6 月份的时候我写了一篇有关 AI 图像工具的文章，为大家盘点了当时热门的 4 款人工智能图像生成工具，分别是 Disco Difussion、Dall·E 2、Midjounery 和 Tiamat。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/4-ai-voice-acting-software
工具 干货 样机 大家好，这是 11 月的第 5 波设计干货合集！这次合集里有几个比较有意思的实用工具，随机网站样式生成工具可以事半功倍地解决网页设计师的「比稿需求」，而创意交互动画设计工具 Piggy 则特别适合创意表达，另外还有高素质的 iPhone 14 Pro 样机试用 Demo 下载，另外两款图形素材生成工具也相当好用。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第四波！2022年11月精选实用设计干货合集大家好，11 月的第 4 波设计干货合集来了！阅读文章 > 下面我们具体看看这一期的干货：1、随机网站多样式生成服务https://shuffle.dev/alternatives有时候「随机生成」并不是坏事，很多时候随机出来的结果超乎预期的不错。这个名为 Shuffle 的服务相当给力，它可以根据你添加的组件和模块，一次随机出几十种不同的样式，你可以在它的帮助下，快速生成多个网站设计的方案，提供给客户，即使是再挑剔的客户，也多少能够在几十个方案里面选到一个贴合他需求的设计吧？2、高素质 iPhone 14 Pro 样机https://iphone-mockups.wannathis.one/在明年 9 月发布 iPhone 15 之前，你可以安安心心地使用 iPhone 14 Pro 的样机来展示你的设计。这个网站提供多款高素质的 iPhone 14 Pro 的样机，不过这套样机整体是付费的，好在提供免费的 Demo 下载，如果有需求不妨先下载样机看看效果。3、免费六边形图案生成工具https://more.graphics/hexagon-pattern这个名为 Hexagon Pattern 的服务能够生成各种不同配色、不同纹理的六边形纹理，生成图案之后，可以导出为 PNG 和 JPEG 格式的素材。图案本身可以自己定义，也可以让系统随机生成，背景色的选取也很简单，图形细节也都是可以自定义的，感兴趣的同学可以自己试试。4、霓虹发光效果图形素材生成工具https://fffuel.co/nnneon这应该是图形素材生成平台 fffuel 旗下新增的工具，它可以快速生成带有霓虹发光效果的图形素材，不仅图形本身可选，而且其中的色彩和发光效果都可以自定义设置，最重要的是，生成的是 SVG 格式的矢量素材，可以轻松无损地使用在不同的场合。5、创意交互动画视频设计工具 Piggyhttps://piggy.to/如你所见，Piggy 是一个移动端应用，它内置了大量的视觉元素、模板和动画效果，你可以使用它生成交互式的演示文稿，也可以应用到网页当中，你可以毫不拘束地使用它来创建动画和演示效果。完成之后，可以使用链接分享出来，也可以透过社交帐号分享。不过需要注意的是，下载 APP 的时候需要使用国区以外的帐号。6、易用的本地截图分享工具https://www.webremarks.com/目前很多同学还是习惯于使用系统自带的截图工具和QQ截图，不过有一些新的截图工具同样值得尝试。这款本地截屏 APP 兼容 Windows 和 Mac 两个平台，可以直接在软件商店中下载，它提供比原生截图工具更多功能，轻松标注，支持一键直接分享。7、Canva 可用的文本转图像的插件https://www.canva.com/apps/text-to-image随着文本转图像的人工智能技术越来越成熟，很多经典的设计工具中也有了类似的插件，而现在要说到的这个插件就是给 Canva 用的，如果你是 Canva 用户，可以使用这个插件快速生成你想要的图片素材。本篇来源：优设网原文地址：https://www.uisdc.com/2022-11-design-resources-vol5
滤镜 模型 图像 大家好，这里是和你们聊设计的花生。最近看到很多与 AI 绘画有关的新闻，非常有意思，今天我们就一起看看最近 AI 绘画有哪些新的发展吧~最近比较明显的感受是 AI 绘画越来越贴近我们每个人的生活，而最直接的表现就是最近在网络上火起来的抖音“AI 绘画”滤镜。将自己的照片上传后只需几秒钟的时间，滤镜就能将其自动转换为对应的二次元动漫风。抖音的“AI 绘画”滤镜生成的效果图上面是我自己上传图片后生成的一些效果图，可以看出虽然这个 AI 绘画滤镜并不能将人物的动作、服饰或者面部特征精准还原，但整体效果还是挺不错的——人体比例、五官以及服装造型的细节还是非常准确的，色彩唯美，光影的刻画也非常到位。但是仔细观察还是会发现一些问题，比较明显的一点就是不能准确呈现手的形态，这也是目前大部分 AI 绘画模型都存在的一个显著缺陷。于是我又多上传了几张不同类型的人物照片，发现这个 AI 绘画滤镜在处理单人照片时效果是最好，如果上传的图片里有多个人物重叠或紧密贴合，AI 似乎并不能准确识别；而对于猫、眼镜或者人物手持的小道具，这个 AI 滤镜则会直接选择“忽视”；甚至还会出现性别错误、画风崩坏等问题。抖音的“AI 绘画”滤镜生成的效果图但这些问题并没有引起不满，反而有很多用户将自己的原图和牛头不对马嘴的效果图分享出来，引来网友的广泛围观转发，因 AI 程序缺陷导致的反差令人忍俊不禁，大家纷纷表示这不该叫“人工智能绘画”而该叫“人工智障绘画”。也许是看重“AI 绘画”带有的娱乐性和话题性，QQ 也推出了一个人工智能绘画小程序“AI 画匠”，也是将人像照片上传后就能自动生成对应的二次元动漫风插画。我用相同的图片试了一下，发现与抖音的“AI 绘画”滤镜相比，“AI 画匠”的生成时间虽然稍微久一些，但是生成的效果更为惊艳——人物更偏写实，色彩更加绚丽，画面也更加精致。对于猫这样的非人对象也可以识别并转换，就是爪子部分的细节有些失真。QQ 人工智能绘画小程序“AI 画匠”效果图当然了“AI 画匠”也存在一些与“AI 绘画”滤镜相似的问题，但我觉得也不必细究。毕竟程序原本设定的处理目标就是单人自拍照，对于多人照片以及非人对象的处理效果自然没有那么好。大家如果想得到好的转换效果，就上传标准的单人照片，并且尽量不要有猫、狗等非人对象入境，最好把手隐藏起来；如果是纯粹图一乐，就想看看能有多离谱的效果，那就随意啦。QQ 人工智能绘画小程序“AI 画匠”效果图除了越来越接近人们的工作和生活外,我们熟悉的一些 AI 绘画工具在性能上也有了很大的进步和提升。了解有关文本-图像 AI 模型的信息：人工智能快速出图！盘点 4 款人气超高的 AI 绘画神器大家好，我是和你们聊设计的花生~有关注 AI 绘画领域的小伙伴可能注意到，国内已经出现了能直接使用中文提示词生成 AI 图像的工具了，这就进一步降低了我们进入 AI 绘画世界的门槛，对设计师和创意工作者来说无疑是好消息。阅读文章 > 有关注过 AI 绘画工具的小伙伴应该的知道 Midjourney，它与 Disco Diffusion 和 DALL·E 2 同为最早一批的文本-图像生成模型，且生成图像的质量非常不错，拥有很多的忠实用户。最近，Midjourney 更新了其 V4 模型，在输入文本描述的末尾加上“-v4”即可启用。新模型在文本信息的理解、生成图像的细节精度、以及场景构图上都有了极大的提升。不论是写实厚涂、风格插画、还是材质渲染都有惊人表现，甚至能生成设计草图、人物三视图、游戏元素等，特别是在生成如照片般真实的图像时，可以达到以假乱真的地步。画面比例也由原来的仅支持 1:1 拓展为支持 2:3 及 3:2。Ralph Nas 使用 Midjourney V4 模型生成的图像，精度很高，材质细节也非常逼真。图片来源： https://pixexid.comWilliam Vaughan 使用 Midjourney V4 模型生成的人物设计三视图。图片来源：Midjourney 官方社区SavvyBeans 使用 Midjourney V4 模型为游戏设计的一系列风格一致的人物。图片来源：Midjourney 官方社区Deadlydav 使用 Midjourney V4 模型生成的拟人动物形象。图片来源：Midjourney 官方社区evncmpbell 使用 Midjourney V4 模型生成的场景原画，气势恢弘。图片来源：Midjourney 官方社区Adoink 使用 Midjourney V4 模型生成的 2:3 人物海报。图片来源：Midjourney 官方社区官方表示 Midjourney V4 目前仍处于 alpha 阶段，并会继续改进 v4 模型在图片分辨率、清晰度、画面比例方面的问题。Midjourney 的生成服务托管在 Discord 服务器上，想深入了解的小伙伴可以戳下面的链接：手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > 此外，Midjourney 还与 Spellbrush 合作推出了一款新的绘画工具 Niji·journey，专门生成二次元动漫风插画。生成的图像在人物设计、色彩、构成及光影都达到了很高的水平，甚至让初级画师都难以企及，让人不禁感叹 AI 绘画的强大与神奇。Niji·journey 推特官方发出的效果图。但它目前存在一个比较严重的问题——数据集侵权。训练Niji·journey 的生成模型需要收集大量的二次元动漫风图片作为数据，但这种画风的发展时间并不长，很多优秀的画师目前仍然在世，如果擅自使用这些画师的作品作为训练数据就会存在侵权问题，而且目前Niji·journey 生成的一些插画风格已经被网友指出与知名画师高度相似。官方也表示目前使用Niji·journey 的生成图像不能被商用，大家如果有机会可以体验，需要注意规避相关方面的风险。推特用户 @8co28 使用 Niji·journey 生成的二次元图像。Niji·journey 已经开启了内测，大家可以去官网加入等候名单：Niji·journey 官网： https://nijijourney.com/zh/Niji·journey 官方 Twitter： https://twitter.com/nijijourneyNiji·journey 相关问题解答： https://weibo.com/7310345883/MgHy6jvBt以上就是今天和大家分享的有关 AI 绘画的内容，有没有小伙伴已经体验过相关的工具呢？欢迎在评论区分享你的经验和感受 ~ 喜欢的小伙伴记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~相关推荐：一小时1200张图！当电商设计师把AI画画加入实战，效果太炸了！编者按：AI画画一直是2022年的热门话题，但至今仍鲜有实战案例。阅读文章 > 免费开放！人人都能轻松上手的AI绘画工具DreamStudio大家好，我是和你们聊设计的花生~之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/ai-draw
在路上
张大湿
落霞与孤鹜
飞翔的企鹅
表哥
