乌尔 黑山 包豪斯 1933 年包豪斯被纳粹政府正式关闭，但所谓“人在灯就在”，包豪斯培养出来的优秀学员并没有放弃对现代设计的探索。但在当时紧张的政治气氛中，大部分包豪斯重要成员选择了先移民海外避避风头。这个过程中，实用主义的美国成为主要接收国，不但接收，还非常珍惜与重用相关人员，为日后国际主义在美国崛起埋下关键伏笔。关于包豪斯设计学院：揭秘！影响设计史百年的包豪斯学院，是如何教学生的？编者按：包豪斯学院是如何教书育人的？阅读文章 > 一、进入美国的包豪斯1937 年时候，包豪斯创始人格罗皮乌斯接受美国邀请，在哈佛大学建立设计研究院，担任教授与院长。用一篇超全面文章，帮你了解包豪斯创始人的前世今生适逢今年是包豪斯诞生100周年，我们来谈谈包豪斯背后那个男人，就是创始人——瓦尔特·格罗皮乌斯先生（Walter Gropius）。阅读文章 > 远渡美国的格罗皮乌斯1930 年代，美国大学大多数师生都曾通过多种途径的阅读（包豪斯丛书发挥了巨大宣传作用）而知晓欧洲现代主义的发展情况及包豪斯这所最具代表性的学院。所以格罗皮乌斯的到来受到美国大部分同行及师生的热烈欢迎。随后马塞尔·布劳耶（Marcel Lajos Breuer）也紧随其后一起在哈佛任教，著名华人建筑师贝聿铭就是他们这个时期的一名学生。（此故事已收录在「设计大师启示录」）现代主义最后的设计大师：华人之光贝聿铭（上）随着史太浓「大师列传」的发表，蛮多朋友私信给我们提出自己希望看到的大师，其中有一位频率特别高，而他恰好也在我们的讲述计划内，就是今天的主人公，被我们称为华人之光老爷子的贝聿铭先生。阅读文章 > 现代主义最后的设计大师：华人之光贝聿铭（下）贝聿铭曾是包豪斯创始人格罗比乌斯的学生，也是唯一作为华人跻身于现代设计大师行列的，而且被誉为「现代主义的最后一位大师」。阅读文章 > 马塞尔·布劳耶与贝聿铭课外时间的聚会格罗皮乌斯刚刚开始在哈佛推行基础设计类课程时其实遭受了不少阻力，因为任何改革都难免触碰到利益所得者，这个群体通常被称为“保守派”。但随着课程试行获得良好效果，很快受到学生欢迎从而冲破了这种阻力，并且哈佛这样的实践很快引起美国其它设计学院的效仿。格罗皮乌斯醉心于设计教育的研究随着影响扩散，格罗皮乌斯将包豪斯的教学理念成功在美国本土化，成为美国设计教育改革的核心力量。其功能主义理念特别强调将形式、材料和家庭日用物品的结构做出改变以适用工业化程序，设计出更标准化、更好用，更便宜的产品，为大众带来了实际好处。如此一来非常符合讲究实用主义及高度商业化的美国社会，受到政府、企业跟教育界重视，因此格罗皮乌斯等于将在德国没有实现的目标在美国完成了。除了格罗皮乌斯，包豪斯第三任校长密斯凡德罗则到了美国芝加哥的阿摩尔理工学院（Armour Institute of Technology）。密斯凡德罗就是在美国封神的这是美国一所著名的老建筑学院，密斯在此为其组建了设计学院。在美国的密斯因为其风格符合社会发展需求，如鱼得水大展拳脚，不但改变了美国建筑格局，还逐渐被拓展为一种全球风潮，就是国际主义。（故事详见「设计大师启示录」）。“少即是多”是我说的：顶尖设计师密斯凡德罗如果要问设计师一句最适合装逼的话，相信大部分人都会说「少即是多（Less is More）」，甚至有一次我听一名企业主说了出来，可见这句话的影响力。阅读文章 > 除了两位校长，包豪斯的重要导师莫霍里·纳吉（Laszlo Moholy Nagy）则在 1937 年到芝加哥尝试成立“新包豪斯”，办学原则跟德国包豪斯完全一致，但属于一个私立学院。莫霍里·纳吉是包豪斯很重要的成员无奈一年之后因为资金支持者撤出而关闭，所以没有产生太多影响。而另一位导师约瑟夫·艾尔伯斯（Josef. Albers）则在 1933 年去了著名的“黑山学院”（Black Mountain College），担任艺术系主任。约瑟夫·艾尔伯斯及其色彩作品艾尔伯斯在黑山呆了足足 16 年，包豪斯的理念因此在这里找到一种延续，所以黑山学院也有深刻的包豪斯烙印，格罗皮乌斯也曾在夏季班到此客串教学。二、神秘的黑山学院黑山学院 1933 年在美国的北卡罗莱那州（North Carolina）一个小城艾什韦尔成立，位置偏远，规模很小，最多人的时候据闻只有 60 人。神秘的黑山学院这所学校跟我们传统理解的学校非常不一样，关于其资料非常少，学校没有明确的运作管理者，背后的资金支持者是谁也没有记录。而且好像也没有什么学生从这里毕业的说法，所以显得很神秘与独特。这所神秘学院却汇聚了美国 20 世纪上半叶差不多一半的先锋艺术家，有绘画、音乐、设计、雕塑、舞蹈、诗歌等，几乎涵盖每种艺术。黑山学院的学生来自包豪斯的艾尔伯斯正是设计门类的代表者，艾尔伯斯的色彩理论研究给大家带来一股新风，色彩玻璃的创作手法也启发了后来的“波普艺术”大师劳森伯格的拼贴艺术。在黑山学院上课的艾尔伯斯所以黑山学院更像一个艺术家自由聚合的场所，彼此相互交流学习与创作。黑山后来出现了很多艺术领域的大人物，比方先锋派古典音乐作曲家约翰·凯奇（John Milton Cage Jr）。他在黑山完成了第一次“偶发艺术”创作，这就是后来的行为艺术，其著名创作是《4 分 33 秒》，演奏过程全程静默，4 分 33 秒站起来跟大家鞠躬，说：“感谢大家，我刚才已经成功演奏完了 4 分 33 秒。“然后下台。约翰·凯奇黑山学院其实只保留了包豪斯一部分血脉，并不等于是包豪斯的分支，只能说包豪斯文化有非常强悍的植入能力。而格罗皮乌斯曾在学院夏季课程时候到此授课，让其与包豪斯的关联获得进一步加深。格罗皮乌斯在黑山学院-右 41957 年时候黑山学院因为办学经费问题完全关闭，一共存在了 24 年，培养出一批充满奇思妙想并勇于践行的艺术家，对现代艺术世界产生了持久深刻的影响，关于他们与黑山学院的故事一直在流传。三、乌尔姆诞生真正比较完整延续包豪斯精神与体系的学院是成立于 1955 年，位于西德的乌尔姆学院（Hochschule für Gestaltung，Ulm）。在西德建立的乌尔姆学院其第一任校长正是毕业自包豪斯德绍时期的学生马克斯·比尔（Max Bill）。比尔是瑞士人，1927 年到 1929 年期间在包豪斯学习建筑，毕业后成立过自己的建筑事务所。设计中的马克斯·比尔他的建筑作品分别在 1936 年及 1951 年的意大利米兰三年展中获奖，也曾自己多次策展。在包豪斯解散后的 10 多年里，比尔内心一直希望有机会建立一所全新的包豪斯形式学院。这个机会出现在 20 世纪 50 年代，当时因为包豪斯解散，现代主义在德国的发展戛然而止。而美国却因为包豪斯豪华阵容的移民而在工业、产品、建筑上有了非同凡响的发展，所以德国政府坐不住了，首先在 1951 年成立了“德国设计师协会”，希望发展出美国那种初具规模的“国际主义”。以密斯为首的美国国际主义风格这种希望终究还是要回到教育层面，二战后的德国本来就被美国钳制，美国希望西德可以在工业方面有长足进步，而这一切都离不开设计。所以 1955 年美国最高指挥部联合西德政府拨出相关资金，推行“乌尔姆计划”，正式成立“乌尔姆设计学院”（Hochschule für Gestaltung，Ulm），后面简称乌尔姆学院。乌尔姆学院的开学典礼可谓热闹非凡，包豪斯创始人格罗皮乌斯及包豪斯前身学院“魏玛工艺美术学院”的创始人亨利·凡·德·威尔德（Henry Van de Velde）都到了现场并发表讲话。格罗皮乌斯现身乌尔姆学院开学典礼威尔德甚至认为，这所学院对欧洲的重要性将超过前面两所曾经存在的学院，典礼上还汇聚了政界、商界、艺术界及科学界的名流，乌尔姆学院一下子就成为当时文化前沿的关注对象。四、乌尔姆学院的发展乌尔姆学院跟包豪斯很像的一点就是同样只有三任校长，而且每一位校长都代表了一个时期，所以说组织领导者就代表了组织风格，如果老板作风代表了企业作风一般。马克斯·比尔在乌尔姆学院担任校长仅仅三年（1955-1957），这三年也是乌尔姆最包豪斯的三年。比尔为乌尔姆学院倾注了很多心力首先教员队伍中就有不少包豪斯元老，比方约翰·伊顿，艾尔伯斯（已经离开了黑山学院）等。所以这个时期的乌尔姆有包豪斯一样的“基础课”，目的是为了强化学员知觉能力及基本造型能力。可以理解为是对美的感受力与对美的表现力，最简单例子就是手绘能力，等同设计的语言能力。乌尔姆学院的教室比尔在设计上是典型的功能主义者，从他为乌尔姆设计的冷峻校舍就可以感受到。校舍完全摒除曲线，方形与直角是最基本的元素，没有任何情感与主观痕迹，内部亦是如此，连地毯与墙饰都没有，感受不到任何温馨与舒适。晚间的乌尔姆学院教学楼所以现代主义风格发展到极致也容易被人诟病，感觉缺乏人文关环。另外典型的作品还有“乌尔姆凳”，这个凳子结构简单，无任何装饰，具备有普通椅子、床头柜和工作椅多种功能，模糊了工作与休闲之间的界限，仍旧是熟悉的构成主义与风格派混合的包豪斯风格。乌尔姆凳但乌尔姆所在的时代毕竟情况不同了，工业与科技在高速发展，所以比尔沿袭包豪斯的这一套让其它年轻老师颇有微词。其他老师希望学院可以更多关注科技领域，多将理科思维融入设计，因为工业化生产成熟后，设计成为一种如何更好服务于生产的重要手段。而包豪斯的思维似乎首先从艺术出发， 然后得到一个应用形式，而那时候大家已经有了应该从任务设定出发，再结合当前制造技术进行设计这样的新思路。1954 年加入乌尔姆学院的阿根廷教员马尔多纳多（Tomas Maldonado）是反对者之首，他主张乌尔姆的教学思路要面向科学与现代量产技术。课堂上的马尔多纳多其实这类关于设计该侧重艺术还是应用的争论可以追溯到 1914 年时候制造同盟的威尔德与穆特修斯之争，最后一般都是倾向应用者获胜，而马尔多纳多确实占了上风。比尔在 1957 年辞去校长一职，马尔多纳多继任，比尔的离职标志着乌尔姆开始摆脱包豪斯影响，走出乌尔姆自己的模式。这种模式就是“科技融合设计”，马尔多纳多认为设计是刺激消费的重要手段，而且设计师应该跟市场没有距离，工业设计不再是艺术，而设计师也不再是艺术家，设计应该成为一种产品管理与系统分析的科学化运作，听上去感觉这有让设计走上另一种极端的可能。课堂上的马尔多纳多所以 1958 年的乌尔姆居然首先取消了色彩课程，引入了更多科学相关课程，比方数学、生理学、感知理论、人机工程学等，俨然变成一个理工学院的感觉。不过这个时期的乌尔姆确实也设计出不少能有效市场化的优秀产品，比方跟德国布劳恩公司的拉姆斯合作开发的“SK4”收音机，造型简洁时尚，用色平衡中性，材料新颖，打破了收音机笨重老成的印象，受到市场欢迎。“SK4”收音机到了 1961 年时候，连基础课也被取消，此时的乌尔姆学院已经基本没有过去包豪斯的任何影子，走出了自身一种现代主义设计教学路线。而到了 1962 年，德国著名的平面设计大师，同为乌尔姆创始人之一的奥托·艾舍（Otl Aicher）出任校长，他 10 年后设计了慕尼黑奥运会的整体视觉，被公认为至今最经典的奥运会视觉系统。奥托·艾舍及其设计的奥运视觉符号他继续带领乌尔姆走“科技融合设计”的路线，而且曾多次公开表达反对外界将乌尔姆视为包豪斯的延续，他认为包豪斯主要接受了过去的艺术思潮影响，并不符合如今的的市场。最后乌尔姆的极端科学路线也遭受外部舆论攻击，到了 1968 年 12 月因为没有经费支持且拒绝与邻近工程学院合并而最终解散。今天分享到此结束，感谢各位，下期再会！欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/bauhaus-design-development
需求 边界 功能 引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。这种经营模式下，公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足，那些为了提升体验满意度而做的努力就很容易有结果，设计师基本不用太过担心投入的成本。但很多公司面向的客户形态无法做到这种理想状态，这些公司对外交付的版本一般都是基于主线版本的定制化版本。为了效益，客户当然越多越好，交付肯定越快越好，这就意味着评审交互设计师输出的交互设计方案时，体验至上不再是首肯的目标，按时交付才是。所以支撑外包项目的时候，交互设计师如果没有边界感，输出的交互设计方案在后面的评审阶段将会被不断推翻，无法落地。前面虽然说了标准化产品维护过程中设计师不用过多考虑实现成本，但标准化产品也会有迭代周期，在一个有限的迭代周期内，也同样需要考虑边界问题按时完成版本迭代任务。那么交互设计师支撑外包项目或版本迭代项目时都需要有哪些边界感呢？今天我们来谈谈需求边界和技术边界。更多兆日UCD干货：4000字干货！9个方法帮你掌握UX文案写作相比美观的视觉设计，清晰的文案在界面呈现中同为重要，好的文案不止赋予产品更好的体验，也能够拉近用户与产品的距离，优化文案也常作为可用性测试后改良产品用户体验的落脚点。阅读文章 > 一、需求边界1. 什么是需求边界需求边界是指在一个明确的目标或产品版本中，为交付具有规定特性与功能的产品、服务或成果而必须完成的有限工作范围。该范围可控，不会在外力驱使下随意更改。2. 为什么要有需求边界试想，如果项目经理对客户的需求来者不拒，会有什么后果？项目无法按时交付，造成亏损。如果在开发阶段，需求依然充满变数，会有什么后果？开发人员可能会暴走继而影响团队士气。如果提前定义好需求边界，就等于给下游制定了明确的工作目标，也利于项目排期和进度把控，从而避免出现上述问题。3. 如何找到需求边界① 如何找到项目中的需求边界项目在启动阶段，对外需要一份正式的合同来确立合作关系，对组织内部一般都会有《项目工作说明书》《商业论证》《项目章程》等文件来建立内部协议拉通内部目标。其中，《项目章程》会对整个项目的需求范围做出最原始的定义，一般包含概括性的项目描述、项目产品描述及项目的总体范围要求，此时定义的需求颗粒度最大。就比如，某银行项目在此阶段的需求就是“上线企业 OA 产品”，这就明确了需求边界，我们要做企业 OA，而不是做企业网银。如果项目进行到一半，客户忽然要求我们做企业网银产品，那完全可以拒绝，因为超出了需求边界。（不过站在商业角度，遇到这种情况商务员应该会无比激动，因为来年的 kpi 在向他招手。）接着，在项目规划阶段最重要的前置工作就是进行项目范围管理，项目成员需要收集需求、定义范围、创建 WBS（工作结构分解）。这个阶段的 WBS 就是为了打造项目章程中定义的最终产品、服务或成果而进行的需求细化。此时，定义的范围就可以作为我们进行交互设计工作的指导性文件。（因为在这个阶段不细化需求和分解任务，就无法进行准确合理的项目时间管理、成本管理等的规划工作）。接着上面的例子，项目启动阶段，《项目章程》里定义的需求边界为“上线企业 OA 产品”，接着在项目规划阶段，就需要跟客户沟通确认具体的《功能清单》（见图 1-1，此文件是项目管理过程中非常重要的文件，如果没有此文件，项目监控过程将无法进行）。比如说我方通用解决方案里该产品是包含 18 个功能，但客户可能只需要其中 15 个，然后还要补充几个我方通用解决方案里没有的定制化功能。这个功能清单就是需求边界，也是我们开展交互设计工作的立足点。《功能清单》示例如果设计师在设计过程中为了提升体验而增加了额外的功能，比如说客户的需求是对发票拍照存档，交互设计方案中拍完照还能 OCR 识别发票信息，这个设计方案就超出了需求边界。单纯站在体验的角度上看，真是个很棒的点子，但站在项目管理的角度上看，这是“愚蠢”的，要知道，项目经理时刻担心项目进度不可控，一定不会让需求蔓延。但如果评审交互设计方案时是客户提出了增加发票 OCR 识别的功能，设计师了解需求边界的话就不会一口答应导致后面落子悔棋的尴尬局面。（如果客户提出了任何非交互设计的变更提议，我们都不要一口答应，可以说会后跟项目组讨论下再给您答复。）我们也可以了解一些项目经理针对需求变更的处理技巧：需重新评估需求的变动成本，跟客户说明，修改合同；寻找其他简单易实现的方案替代；告知用户在下一迭代版本中进行规划。当然，也会有特殊情况，为了维护客户关系或者按投入结算或者有什么需要达到的 kpi，项目对时间和成本没有特别要求，对需求变更有很好的包容度，那我们可以尽情发挥我们的设计才能，而不用受需求边界的约束。② 如何找到小迭代需求的需求边界上面讲项目规划阶段的《功能清单》就可以当作项目的需求边界，但是一般这份功能清单中的功能颗粒度较大，还是需要把一个个功能看成一个个需求，分别进行业务需求、用户需求、功能需求的剖析和拆解。另外，公司标准化产品的维护过程中，需求往往是市场声音或是公司上层产品规划策略亦或是专家走查的待优化问题，这时候如果没有专门的需求分析师或产品经理，交互设计师接收到的往往不是拆解后的业务需求、用户需求、功能需求，而是“一句话需求”。我们如何找到这种需求的边界呢？我们先了解几个概念：业务需求、用户需求、功能需求。业务需求描述的是用户为什么需要这个产品，用户需求描述的是用户使用该产品必须要完成的任务，功能需求描述的是开发人员必须实现的软件功能。下面举个例子来说明 3 个维度的需求，真正的需求边界就会浮出水面。某个项目的《功能清单》中，有一个“码上付”的功能，进行客户调研时，客户说“因为当前系统跟另一个系统无法进行数据交互，所以在当前系统不知道用户有没有申请成功，希望点了码上付申请弹出一个弹窗，提示用户不要重复申请。”按照客户的需求描述，方案如图 1-2：客户描述的方案该方案违背了交互设计的“防错原则”，增加了用户的“试错成本”，那必须按照客户的要求做吗？再次分析客户的描述，可以发现客户描述的是功能需求而非业务需求。运用需求分析方法和技巧挖掘它的上层需求（因篇幅有限不再讲述分析过程），可以得出以下结论，业务需求是：“防止用户重复提交码上付申请”。接着分析，能满足以上业务需求的用户需求是：1.用户申请成功后不能再进行申请操作（系统阻断用户的重复申请行为）；2.用户能看到“请勿重复申请”的文字提示（靠提示让用户自主停止重复申请行为）。这些用户需求对应的功能需求是：用户提交过申请后，将“码上付”入口置灰禁用，并在入口处打上标签“已申请”，如果申请成功该入口就一直置灰禁用，如果申请不成功该入口需要变为启用状态以便用户再次申请。但是客户的描述给出了技术边界（后面会详细讲解此概念）：当前系统跟另一个系统无法进行数据交互，所以当前系统不知道用户有没有申请成功，这就导致上面分析的用户需求的第 1 点是无法满足的，除非我们要求客户去改造关联系统而且客户愿意配合，否则我们只能去修改用户需求：让用户看到“请勿重复申请”的文字提示。靠用户自己规避重复操作行为。用户需求一旦修改，对应的功能需求也会随之变化：在申请码上付的按钮附近给出醒目提示“如果您已申请过码上付，请勿重复申请”。最后的交互设计方案如图 1-3：修改后的方案通过以上案例分析，我们可以把业务需求、用户需求、功能需求抽象为依次耦合并依次包含的关系。用户需求和功能需求可能会根据技术边界或其他约束而改变，但业务需求不会改变，也就是说小迭代需求的业务需求才是真正的需求边界。从图 1-4 可以看到，一开始设计师输出的方案肯定是满足业务需求的前提下，用户体验最好的方案，但有些用户需求+功能需求组合超越了技术边界和其他边界。我们评审设计稿的过程，其实就是不断将用户需求+功能需求修正到各种边界内的过程。（业务需求一般是在描述需要解决的问题，至于如何解决，就是交互设计师可以发挥的空间。如果业务需求都变了，那就是需求变更，需要走需求变更申请流程。）备注：以上案例将业务需求描述为“防止用户重复提交码上付申请”而不是“阻止用户重复提交码上付申请”，大家可以思考一下有何不同？用户需求+功能需求修正前后对比二、技术边界1. 什么是技术边界技术边界是指在现有技术水平可以被实施运用的有限范围。2. 设计师为什么要了解技术边界一个合格的交互设计师，能灵活运用各种交互设计方法输出体验最佳的概念方案是基本要求，但只站在体验最佳角度考虑问题所出的设计方案会是最终方案吗？显然经常不是。为什么会出现这种情况？除了一开始的需求不清晰不准确导致评审交互设计方案时还需要不断反向修正需求的原因，还有一大部分原因是体验最佳的方案无法用现有技术条件实现且重新开发成本太大。设计方案评审的过程，其实就是一拨需求干系人在不断寻找业务需求、技术边界、最佳体验之间的安全区（见图 2-1）的过程。如果交互设计师能熟悉技术边界，一开始输出的方案就往安全区里靠近，会大大缩短设计周期，否则只能一遍又一遍被按在地上摩擦。安全区示意3. 如何获知技术边界① 新产品项目的技术边界新产品项目的技术边界受制于上面提到的《功能清单》，比如设计的过程中，设计师觉得界面上展示一下头像会使信息更具识别度，这时候就需要去查阅功能清单中有没有上传头像的功能，如果没有该功能项目经理也不允许增加该功能，我们只能修改设计方案：去掉头像或者改用通用头像。其他更细节的边界几乎是无法提前预知的，只能在设计方案评审阶段或开发阶段暴露出来，反向修正设计方案。因此，设计师支撑新产品项目，一定要提前熟知功能清单，有的放矢。② 已有产品升级项目的技术边界如果是旧产品的升级项目，技术边界相对就多一些，因为要考虑现有系统的兼容性和现有技术的复用性。设计师动手前要体验产品，浏览客户提供的产品资料、用户手册等，尽可能多地提前预知和确认技术边界，这样可以减少设计方案的修改次数，提高效率。还有一些明显的技术边界，在需求沟通阶段就能暴露出来，比如上面的案例中，客户一开始就提出“两个系统目前无法进行数据交互”这个技术边界，但还有一些边界只能边沟通边发现。比如设计师觉得通用头像区分性别更具情感化，所以设计方案中女性用粉色通用头像，男性用蓝色通用头像，评审的时候就需要询问客户系统能不能区分性别，如果没有又无法增加该功能，我们只能修改设计方案：所有人员用同一个颜色的通用头像。如果评审时没有确认此细节，开发实现的时候就会找设计师沟通，影响开发进度。③ 界面结构体现出来的技术边界界面结构能反映技术边界。如果已经确认是在现有的技术能力范围内补充新功能，那设计师就需要分析已有同类功能的界面结构，以免随意变更界面结构导致新功能界面结构无法跟已有同类功能界面结构匹配，加大变更成本。举例说明，某银行要上线公司的一套主线产品，且要增加一个功能模块，该功能模块的审批流程需要复用基线产品的技术。一开始考虑用户可能出于催办等目的，需要在表单申请界面看到完整的审批流程，所以设计新功能模块时，将审批流程平铺显示在了申请表单页面上（见图 ）。基于交互经验输出的方案中间多次设计评审会也未提及这样设计有何不妥，最后开发做到这里，查看原有功能申请表单页的代码，发现同类功能的实现逻辑是将审批流程显示在了弹窗里（见图 2-3，显示在弹窗里而非当前页面上的历史原因是为了不破坏原有表单的界面结构）。现有实现的样式开发急轰轰来找设计师：“你这个界面实现不了啊”、“我们之前是这么实现的啊”、“要改也是主线产品改，但肯定来不及呀”，项目经理也急轰轰来找设计师：“按照现有技术实现的方式改下交互设计方案吧”、“项目交付时间快到了，别发散了啊”，在多重压力下设计师就得硬着头皮按照弹窗的样式，把所有表单申请页面全部改一遍（不改干净，新加入项目的开发人员会思考半天，然后来问你：这里为什么跟其他页面不一样，是有什么考虑吗？或是碰到“直男”开发，真的就按错误的交互界面实现）。按照现有实现修正后的方案如果对已有产品不熟悉，对已有的界面结构不熟悉，类似的情况会经常发生，这无疑增加了时间成本和沟通成本，是项目大忌。所以，设计师一定要会识别界面结构体现出来的技术边界。三、其他边界“国家制度、法律法规、行业标准”也是设计工作的重要边界。比如，理财产品界面一定要打上“市场有风险，投资需谨慎”的提示字样，不可用高回报高收益宣传口号诱导用户；再比如，保险产品宣传时必须明示是保险产品，且不得与银行储蓄、基金、国债等进行收益比较。硬件设备的操作方式也是设计工作的重要边界，比如说使用遥控器操作的终端界面，要特别考虑遥控器操作的局限性，不可让用户输入大段文字，可通过手机扫码填写的方式替代；再比如，操作触摸屏时，不能像操作 pc 一样出现右击操作。还有，设计规范也是设计工作的重要边界，如果不考虑设计规范一致性，会增加用户的学习成本。除了上面展开讨论的需求边界和技术边界，还有后面提到的“制度法规”、“硬件设备”、“设计规范”，还有很多因素共同决定最终的交互设计方案。设计师可以在平时的工作中培养自己洞察边界的能力，以便输出更加成熟的方案。四、如何在各种边界内做出好设计1. 须具备需求分析的能力设计师接收到需求之后，要能判断接收到的是不是业务需求，最好把业务需求用自己的语言描述出来拿给需求方确认。（如果团队分工明确，一般产品经理会把基于各种边界条件分析好的业务需求和用户需求给到设计师。如果团队无此角色，就得靠设计师自己识别。）就像前面提到的例子，如果业务需求是“阻止用户重复提交码上付申请”，而不是“防止用户重复提交码上付申请”，那性质就不一样了，阻止是不允许用户重复提交，那就得逼着客户和开发调整技术边界。但客户实际的意图是提醒用户最好不要重复提交，但允许重复提交。确认好业务需求，如果时间充裕，可以先不考虑技术边界，输出一个体验最佳的方案，然后再根据自己已知的不可抗力约束逐渐修正方案，如果时间紧张，这一过程可以在脑海里构思，直接输出修正后的方案组织评审。2. 具有洞察边界的能力但又有打破边界的勇气考虑各种约束久了，我有时候设计方案首先考虑的是开发能不能实现，好不好实现，这真的大错特错。设计师需要有技术边界感，但不能让技术边界感凌驾于体验设计之上，否则交互设计师就失去了存在的意义。例如，之前提到的发票 OCR 识别功能为例，应客户要求，要在主线产品的发票夹功能基础上增加发票 OCR 识别的子功能，该需求还要内化成主线功能。其中添加发票的界面，原来的界面结构是左图所示，页面的主体信息是发票照片的预览图像，加入发票 OCR 识别功能后，我考虑到万一将来有些客户不上发票 OCR 识别功能，或者识别不出信息的情况下，还是得按 4-1 左图展示，所以基于新旧系统和无数据场景的兼容性，我没有改变原有的界面结构，只是在预览图下面增加了识别信息的展示区域，即 右图展示。不破坏原有界面结构输出方案（左图为原有页面）但对用户来说，识别出来的发票信息才是他重点关注的内容，预览图只是个辅助信息，按照这个心智模型，首屏的主体信息应该是识别出来的发票信息，但上面的方案，首屏的主体信息是预览图。后来 UI 同事在进行视觉设计的时候，询问了开发能不能改变预览图的样式，得到开发负责人同意后，UI 同事按照信息层级关系优化页面（见 4-2 左图），而且跟开发沟通增加了一个扩展功能：没有成功识别到信息场景下和没有上线发票 OCR 识别功能的场景下，预置几个各种发票类型都会有的主要信息字段，让用户自动填入，见 4-2 右图（原有的发票夹功能，只有一个备注字段）。当我还在考虑开发尽量少改动时，UI 同事打破边界的勇气和灵活变通的智慧深深地给我上了一课。扩张边界后输出的方案3. 总结这篇文章讲了交互设计应具备的几个边界感，希望能帮助设计师快速输出安全区内方案以缩短评审修改周期，但请切记不可完全被边界束缚住手脚。交互设计师仍要站在体验最佳的立场，去争取扩张技术边界和其他边界，给设计打造更大的安全区和发挥空间。扩张边界后的安全区示意欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/sense-of-boundary
视频 技术 工具 大家好，这里是和你们聊设计的花生~之前和大家聊过不少 AI 图像生成工具，有的可以根据文本生成图像，有的则是将 AI 技术运用到图像处理中，让扣除背景、消除画面元素成为非常轻松快速的事情，大大提升了设计师的工作效率。既然 AI 技术在图片处理的应用上如此成熟，那如果用到视频的剪辑制作上会有什么效果呢？借助 AI 技术的快速消除图像内容比如在视频里实现一键抠图，将人物从背景中分离出来，进行背景更换或者插入文字图层：或者在视频里实现快速修图，用画笔一抹，就能去除视频中不需要的部分：甚至在视频里也用上 Ai 生成性技术，输入一段话，就能将原来的物体变成另一个新的物体：其实这些 AI 技术在视频制作中应用的并非想象，也不是特效，而是真的有公司将其变为了现实。下面就是“一键去除画面元素”技术在视频制作中的实现过程：在线视频制作工具 Runway 的操作界面这些神奇的视频处理功能都是一家名为 Runway 的公司开发的。Runway 是国外一家在线视频剪辑制作网站，成立于 2018 年。它有非常完善的在线视频处理技术，更重要的是公司团队一直在积极地将生成性 AI 技术应用到视频内容制作中，致力于降低视频创作的门槛，帮助人们轻松制作出内容强大且富有创意的视频内容。Runway 官网： https://runwayml.com/Runway 官网展示的 30 多个 AI 魔法工具Runway 目前已经开发了 30 多个 AI 魔法工具，其中一部分是将 AI 图像生成技术内置。比如我们熟悉的根据文本生成图像、根据图像生成风格化变体、图像延展外绘、根据文本生成 3D 贴图纹理、视频局部无损放大等技术，在 Runway 内都可以实现。Runway 内置的图像无限外延功能另一部分则是令人惊喜的视频处理魔法，除了我们前面提到的 3 种功能，Runway 还开发了包括动态追踪，智能调色、智能慢镜头、平滑插帧及一键模糊人脸等功能。“动态追踪”即通过 AI 技术识别视频中物体的运动轨迹，然后为其附上文字或者其他元素，这些元素会自动跟随物体一起运动，不用手动设置轨迹。“智能调色”功能利用 AI 技术自动分析画面的色彩等级，然后依据文本描述的内容对视频相应的色调调整，处理速度很快，上色效果也非常和谐。除了视频处理工具，Runway 也将 AI 技术与音频处理结合起来，开发出了自动生成文字稿、一键去除空白音频及智能去除背景杂音等工具。Runway 的研究团队目前还在开发一种名为 Soundify 的音效系统，该系统利用 AI 技术先识别视频内容，然后为之生成准确高质量的音频，且自动对齐音频与视频的进度，以解决传统视频制作过程中寻找合适音频困难、精准对齐音频与视频耗时的问题。Runway 的野心当然不止于此。有了图像、视频与音频等一系列 AI 工具作为基础，Runway 还推出了 "文本生成视频 "技术并发布了一段演示视频。从视频中可以看出，Runway 的 "文本生成视频 "技术包括：通过输入文本指令实现导入视频素材、调色及消除视频中的选中对象；通过文本生成各种图像；通过文本描述添加文字及动效、扣取人物及替换背景等。我们也可以看出视频当中的很多功能都是我们前面介绍过的。目前 "文本生成视频 "技术还没有公开，想体验的小伙伴可以申请加入等待名单： https://runwayml.com/text-to-video/当然了，这么好的工具肯定不是免费的。新用户注册 runway 后可以享受 3 次免费的视频制作额度，但 30 多项 AI 工具只能使用其中 3 个，并且只能导出 720P 的视频文件。对国内用户来说需要搭梯子才能只用，并且最好使用 Chrome 或 Edge 浏览器打开，不然容易崩溃。所以目前只能期待国内的视频制作软件可以努努力，早日推出与 runway 类似的功能。此外 Runway 还举办了首届 AI 电影节，号召全球艺术家使用最新的 AI 技术制作 1-10 分钟的创意影片，优胜者将获得最高 10000 美元的奖励。目前电影节正处于接受投稿的阶段，最终获奖结果会在 2 月份公布，到时候再和大家一起看看有哪些有意思的作品。AI 电影节官网： https://aiff.runwayml.com/Runway 的 AI 电影节官网公布的 AI 影片片段以上就是为今天和大家分享的有关 AI 技术在视频制作中应用，大家对此有什么看法和期待呢？欢迎在评论区分享。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：Google、Meta又放大招！用嘴做视频的时代也要来了大家好，这里是和你们聊设计的花生~近段时间 AI 工具发展势头越发迅猛，在为大家介绍过的 AI 模型中，DALLE·2 和 Midjourney 在文本生成图像的质量和精准度上有了大幅度优化提升，后起之秀 Stable Diffusion 则将 AI 模型的操作门槛降低到普通人都能轻阅读文章 > 2023年，让这20款AI工具帮你更高效地完成工作~2023年，让这20款AI工具帮你更高效的完成工作~大家好，这里是和你们聊设计的花生~2022年是AI技术大发展的一年，我都快记不清为大家推荐多少种AI工具了。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/runway
用户 提示 微软 编者按：基于 AI 的各种产品越来越多，这些 AI 大都依托提示词来生成内容，那么这些产品和服务当中的提示词要如何安置，如何设计？资深设计师基于微软出品的 Microsoft Designer 产品的设计，梳理出了 6 个设计原则，下面是正文：Microsoft Paint 我一直在接触，当我听到 Microsoft Designer 发布的时候，我就开始为此感到兴奋了。微软这种体量的公司开始认真地使用 AI 技术的时候，它真的会让 AI 惠及用户。不仅仅是 Microsoft Designer，他们还将各种 AI 相关的技术应用到其他产品线当中。比如微软的 Bing 搜索引擎也加入了 Image Creator 的功能。微软正在通过引导用户编写文本提示信息，让用户借此获得视觉内容，开始适应新的计算机运作方式。「编写文本提示词是一门艺术，借此可以从 ChatGPT、Dall-E2 和 Midjourney 获得你想要的视觉内容。」如果你曾经尝试过这类文本转图片的人工智能服务，那么你应该知道这类服务的不可预测性。生成需要正确风格的图像，可能需要很长时间的尝试，而为了让 AI 按照需求运作所进行的反复试验则被称为「提示词设计」和「提示词工程」。手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > AI 产品的提示词设计原则AI 生成服务的不可预测性并非无法优化，有时候对提示词进行调整就能获得不一样的结果。我观察到 Microsoft Designer 会指引用户调整提示词，以获得更加可靠的内容输出，降低时间和算力上的浪费。微软、Dall-E2 和用户首先，了解所涉及到的技术和受众很有必要。Microsoft Designer 在 AI 技术上并不是微软自身的新技术，而是基于 OpenAI 出品的 Dall-E2 的产品：关于Dall-E2的介绍：10秒出图，以假乱真！设计师「用嘴修图」的愿望要成真了？大家好，我是和你们聊设计的花生~之前给大家推荐了 AI 图画生成器 Disco Difussion，它可以根据文本提示自动生成恢弘奇幻的艺术，非常适合作为艺术创作的灵感来源。阅读文章 > Microsoft Designer 本身是一种面向营销和运营人员用来创建社交媒体内容的工具，它更像是拥有人工智能加持的 Canva，和 Figma 或者其他的 UI 设计类工具有着巨大的差别。除了 Microsoft Designer 之外，微软顺道推出的 Bing Image Creator 也采用了类似的技术，它类似 Bing 的图像搜索，但是实际上获得的图片是基于描述使用 AI 生成的。以下是微软引导新用户使用提示词生成 AI 图像的一些设计原则。1、熟悉原则：提供熟悉的上下文环境人们经常将新事物存在的风险和不确定性联系起来，而人工智能图片生成服务就很符合这种特征。「人类天生就喜欢熟悉的事物，无论是文字、产品还是体验。」为了让大家更加熟悉，Microsoft Designer 将 AI 图片生成器生成图片作为一个选项提供出来，和其他的图片上传选项摆放在一起：用户可以选择：从设备直接上传从手机上传打开媒体库用 AI 生成图片AI 和熟悉的上传内容摆放在一起，自然融入到大家熟悉的流程当中，让人感觉 AI 和我们日常操作没有太多区别。「与其一头扎入算法当中，不如想象如今的用户是如何完成日常的操作的。」而在 Bing Image Creator 当中，AI 的运用方式则有所不同，它更接近用户日常使用 Bing 搜索引擎一样，唯一的区别在于，原本搜索栏所需要的填写的是AI 提示词，而 AI 生成图片的呈现方式则类似于 Bing 搜索图片的界面，整个体验无缝地和 Bing 搜索引擎的内容呈现保持一致。2、透明原则：AI 并非魔法有许多工具在用户实际使用过程中，压根没有提到他们生成内容的时候用到了 AI 技术，有时候用户需要通过其他的渠道或者深入挖掘调研才能知道相关的信息。Microsoft Designer 在你创建内容的醒目位置，运用工具提示的方式来告知用户他们所使用的技术细节：尽管对于用户而言，DALL-E2 是一个陌生的专业术语，但是后面紧跟着详细的解释，而不是将 AI 本身模糊化让它听起来像「魔法」一样。这段描述还可以传达出微软对于 AI 技术在道德层面上的理解和关注，并且会尽量清晰地展示背后的内容。「如今，太多人将人工智能（AI）视作为另外一种神奇的技术，对于它的工作原理知之甚少。」最后，将这些信息置于工具提示控件当中，也是尽量让技术术语不妨碍用户的正常使用，但是由于呈现样式会很清晰地同普通控件以及界面其他内容区分开，因此不会对用户造成可访问性上的障碍。3、道德原则：强调 AI 的道德性作为新生事物，AI 的不确定性让它很容易被不道德地使用。怎么使用才是道德的，这当中有很多模糊的地方，因为当下每天都会有新的用例出现，很多艺术创作者仍然会因为风格被盗用而感到愤怒，但是 AI 的艺术图片生成的速度从未放缓。「为了防止 DALL-E2 在 Designer 和 Image Creator 中生成的结果不合理，我们正在和开发 DALL-E2 的 OpenAI 一起采取措施优化，并根据需求改进我们生成图片的方法。」而在用户这一端，Microsoft Designer 的程序会在工具提示当中多次提示用户，如果生成的结果不合理、不符合预期的时候，让用户尽量提供反馈来帮助系统优化结果，以期后续给用户更好的结果：Bing Image Creator 当中，也采用了类似的策略，每个 AI 生成的图片附近都会有说明性的工具提示，其中会包含相关的道德规范，以及常见问题的相关回答：4、解释原则：告知用户结果的来源解决了道德问题之后，根据 AI 用户体验设计原则，AI 程序应该能够让用户追溯到它原始的数据点，或者让用户以某种方式了解图片内容生成的方法，以提高内容的可信度。「如果你是从多个来源聚合数据，那么请将它们分解开来让用户可以重现这个结果。这些信息应该作为用户流程中的一部分，并且通过一致的 UI 界面呈现出来。——《UX of AI》」绝大多数的 AI 汪中，从 OpenAI 的 DALL-E2 到 Prompt Hero 这样的 AI 灵感素材网站，都会在图片内容上公开展示每个图片的原始来源。Microsoft Designer 以相同的方式来解释来源，当你悬停在任何一个 AI 生成的图片上的时候，它会以工具提示的方式展示来源：这些 AI 生成图的原始来源，会呈现在界面的右侧，同时会使用文本「我们使用您的描述内容和 AI 为您设计出这些图片」，借此来陈述设计的来源。不过，Microsoft Designer 并没有展示具体的创建图片的数据点，也没有详细解释 AI 的工作方式，这可能和 DALL-E2 的工作方式有关系，它无法实现。另外，作为一个商业产品，太过细致的内容可能超出了范畴。5、引导原则：为用户提供建议AI 提示词对于很多用户而言可能会比较陌生，因为提示词文本需要符合 AI 处理信息的逻辑。OpenAI 甚至提供了「最佳实践快速指南」，而GPT-3 的经验则是：对所需要的背景、结果、长度、格式、风格尽可能进行具体详细的描述详细阐明所需要输出的格式从 zero-shot 开始，然后尝试 few-shot，如果两者都无效，再进行微调用户第一次撰写 AI 提示词文本的时候，可能会感觉非常陌生，而 Microsoft Designer 选择了最直接的策略，就是使用自动建议来辅助用户：和前面提到的熟悉原则类似，结合我们的搜索习惯，搜索建议文本也是我们所熟悉的东西。另外，这也意味着，后台必然是有着大量的用例来支撑这些自动建议文本。6、掌控原则：让用户掌握主动权尽管引导用户有帮助，但是依然要让用户拥有掌控权，按照他们的方式来进行创建。所以，产品本身不要完全依靠人工智能，允许用户选择跳过一些步骤，让用户选择符合他们需求的流程，让 AI 和用户协作，而不是让 AI 来接管一切。比如，当 AI 不符合用户需求的时候，用户依然可以选择自己事先准备的图像来继续设计。在 Microsoft Designer 当中，AI 生成的图片组当中始终有取消的选项，同时「从空白画布开始创建」的选项始终存在：这意味着用户即使完全不使用 AI 功能，依然可以借助自己准备的素材完整地创建出整套的营销内容和图片。结语尽管我确实想将上述的设计策略视作为一组设计法则，但是实际上它们更像是一套可供遵循的概念和范例，但是它们确实可以帮助你设计 AI 产品，这些案例和方法让你可以无需重新造轮子。人工智能技术确实在快速发展，但是此时的应用类型和场合依然有限，随着各种工具逐步发展，这些设计方法和用例会进一步完善。关于 AI 的 UX 设计，Lennart Ziburski 撰写了精彩的入门技巧，而本文也从中汲取了不少营养。本篇来源：优设网原文地址：https://www.uisdc.com/ai-prompt-design-principles
用户 内容 品牌 一、项目背景威睿能源是吉利旗下，一家专业从事新能源汽车动力电池、电机电控驱动系统、充电系统、储能系统的研发、制造、销售与售后服务的新能源科技公司。旧版威睿官网存在框架不合理、内容混乱、无法实时维护和品牌感弱等问题。威睿能源希望与极氪用户体验中心（ZED）合作对其官网改版，让用户更加全面了解的公司的品牌和产品。更多极氪文章：未来趋势！如何用数字孪生打造汽车工厂大屏？今年上半年我国新能源汽车销量达到乘用车总销量 25 %，同比增长 1.2 倍。阅读文章 > 二、目标归纳经过与业务方的多次讨论和分析，我们对威睿官网的改版诉求达成共识：建立信赖。搭建全新的官网框架内容和设计，让用户更全面的了解公司向用户传递专业、安全、可信赖的感知；提供用户和企业的沟通渠道，减少获客成本，提高潜在客户的留存和转化；高效曝光。使品牌产品能够快速在线上曝光与迭代，提高公司产品热度，减少广告营销成本；建立可及时维护更新内容的管理后台，方便高效的自主操作即时发布；理念透传。提高威睿的品牌辨识度，传递高技术/高品质/高安全的品牌理念及价值观；建立品牌影响力，感知客户，服务客户，成就客户；在此基础上，我们从框架、内容、视觉三个维度制定设计目标和策略。重新制定清晰合理的框架结构，呈现直观有效的信息传达、探索一致新颖的设计语言。三、框架制定要让网站框架清晰合理就必须对用户的诉求进行分析，经过体量和角色两个维度研究，我们确定框架主要服务于寻找和决策长期合作为目的的大企业客户决策者。在与业务协调确认内容素材，同时结合核心用户的诉需求，根据重要度、关系、次序进行信息的归纳与分析后，确认整个网站的信息架构。对于核心的首页，我们依据营销中的引入、成长、成熟、转化模型。首屏通过企业品牌理念对用户视觉进行冲击，吸引用户继续浏览。再通过产品矩阵、技术实力、成功案例和行业背书让用户对威睿的能力实力全面了解产生信任。通过前三步层层递进的宣导使潜在客户产生初步合作意向后，最后自然给出联系方式完成转化。四、内容设计新能源工业产品技术规格复杂，如果按产品资料直接平铺，大量文字无处安放，用户阅读费力。所以搭建一个高效，可扩展的内容结构尤为重要。为此我们对内容进行排序，精简、合并产品页模块，减少因内容迭代导致的楼层堆栈。提升高价值信息的展示优先级，让用户更容易发现有利于转化的内容。通过小标签、数值的提炼等方式，为大量内容划分层次，提升用户获取或理解业务关键内容的效率。并且用规则的阵列布局，营造有序严谨的官网形象，同时也满足平台和各业务的发展和扩展需求。增加更丰富的信息纬度，过去以表格、图文呈现的技术信息，现在以图文视频动效等方式展示信息，提升用户对内容的视觉聚焦。五、视觉表现确定视觉风格之前，我们结合品牌调性、产品特色和用户需求，整理情绪版，得到 2 个设计关键词——秩序感、空间感。秩序感充满规律和条理，新能源工业产品属于高科技行业，而科技正是人类从自然中发现和研究出的规律秩序。界面的秩序感能带来视觉冲击和人们对科技产品实用美的欣赏。网页设计呈现用户的屏幕上是二维平面，如果能创作中具有立体感和深度感的视觉空间，突破平面信息传递的限制，更能从多维度体现威睿的品牌和产品实力。空间感正是塑造意境氛围强化呈现效果的关键。六、秩序感为了让使用不同屏幕的用户访问网站时都有舒适的界面效果，我们通过对不同断点下栅格的宽度、模块、元素进行调整，保证页面布局的一致性，以达到最佳的页面展示效果。框架布局是体系化视觉设计的起点，我们受包豪斯无装饰和极简理念的启发，采用模块化结构去排布图文信息，统一规整理性。字体板式可以帮助创建清晰的层级结构，组织信息，高效清晰的呈现设计和内容。形成一套规范体系，沿用与其他门户网站项目中，在视觉上达到统一和整体。色彩体系按照品牌书中的颜色指导进行的设计，主要使用了白色和浅灰作为主色调，运用在页面背景中，电光绿作为主识别色，沙黄作为点缀色。强调品牌特性，增强用户记忆。七、空间感采用精致极简、有层次和空间感的三维图形为主视觉元素，契合威睿电力技术研发制造公司高科技、品质强、可靠安全的特性，给用户传递科技感、未来感。从品牌 logo 中提取元素创造代表电力的能量魔方，加上 VRMET 的基座，表达威睿公司电池、电机、电控系统强有力的研发制造能力。以核心主图为视觉聚焦点，辅助代表能量传输的绿色输送轨道向其他代表电力系统的的模块连接，底部用错落有致的图形代表平台，包罗整个威睿生态产品。统一的材质刻画极简纯粹、轻盈剔透的视觉效果。我们制定出统一有序的 3D 模型栅格、空间角度、长宽比例，快速搭建简化的几何图形，通过对图形的有机组合形成新的图形元素。提升风格一致性和搭建效率。设计可复用的通用场景底座，在核心区域搭建代表模块语义的核心图形，快速形成主页面 banner。以此标准化的分层组合手法，可快速搭建多个子页面，高效且体系化。结合实际的场景和概念语意，快速创造对应的虚实结合的图形主体物，搭建丰富的 3D 素材库，复用性强、延展性强、提升设计效能。总结此次威睿官网升级不仅搭建了全新的网站，更是建立了全新的科技感强、高品质、安全稳定的品牌形象，助力威睿品牌行业影响力的提升。强大的三维动效能力，可搭建空间感强且可交互工厂实景，应用于官网、数字可视化大屏、线下空间场景等，共同助力威睿品牌成为行业标杆。欢迎访问全新改版后的威睿官网：https://www.vremt.com/关注极氪 ZED 公众号，了解新能源汽车行业的体验设计干货。本篇来源：优设网原文地址：https://www.uisdc.com/vremt-website-design
表单 用户 标签 前言表单是我们生活中常见的信息添加、录入的方式之一，如何进行表单的设计也是 B 端设计师的必修课。身边别的部门的同事常常会说：表单不就是几个输入框，几个组件组成的东西么，挺简单的，有什么好设计的。但通常情况下，越是简单的东西，要思考的点却越多，想要把一个表单做好也是一件不容易的事情。生活中，大多数人都不喜欢表单，比如前段时间有一些许久没有联系过的朋友让我帮忙填写一下调查问卷，作为一个热心市民的我，自然是选择点开链接帮忙填写；一鼓作气填了一段时间后，看着剩下的问题，我不耐烦的放弃了填写这个调查问卷。所以作为设计师，我们应该“由内而外”而不是“由外而内”的去设计表单，如何让表单变得更容易让人接受也是设计师应该考虑的问题。更多兆日UCD的干货：6000字干货！3个优秀交互设计师应该具备的边界感引言售卖软件服务的公司，最理想的状态就是开发一套通用的解决方案或产品，而几乎不用接收任何定制化需求（定制化需求大多会被内化成通用产品的新功能）。阅读文章 > 一、什么是表单表单是一种用于信息添加、录入的页面类型。是连接用户与数据库的桥梁，通过引导用户进行信息的填写，从而提交数据给后台。在用户填写提交时，还需要对用户输入内容进行校验与反馈，保证用户信息填写的完整度。填写表单是一件麻烦事，当我们想做的是投票、网上购物或者添加好友之前，总是会有表单防碍着我们。正因为多数人不喜欢填写表单，所以在做表单设计时，我们的首要目标是让人们迅速轻松的完成填写，同时获得系统和用户想要的东西。二、如何进行表单设计1. 表单拆分基础表单中会有以下六个元素：1. 标签：标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解；还有一部分是告知用户哪些是必填项。2. 占位提示：直接展示在输入项中，采用弱提示文本对所需信息描述，当用户输入信息时即消失。3. 校验：对输入项进行验证，并给出反馈提示，如：用户未填写，格式错误、内容错误等4. 基础组件：可交互输入的区域，是构成表单的核心内容，主要有：输入框、单（复）选框、上传、时间选择器、开关……5. 提示：描述该输入项需要的输入类型，如：上传的文件类型6. 按钮：用户完成输入后，点击按钮进行提交、进入下一步等，按钮一般是跟随的最后一个输入项后面，若输入项超出一屏显示，建议将按钮悬浮固定在底部。当我们开始制作某一表单的时候，我们需要强迫自己思考一下每个元素的 UI 问题：这个元素是什么类型的？如何处理其他这类东西？元素之间有什么关系？通过合并相同类别元素或者扩展该元素和其他元素之间的关系，能否简化设计？2. 表单录入模式表单根据录入模式可以分为：单步表单、分步表单和高级表单① 单步表单：单步录入指的是在一个页面即可完成内容输入。使用于内容较少，结构简单的场景，我们常见的登录页就是典型的单步表单。② 分步表单：内容较多、录入内容的方式差异较大的情况且业务本身具有流程化特性，一般通过添加分步导航展示内容。常见的例如银行转账，修改密码等等。③ 高级表单（分组表单）：高级表单（分组表单）：主要用于需要一次性录入大批量数据的场景。高级表单与分步表单有点类似，都是为了减轻用户填写压力，将填写内容进行分块。不同的点在于，分步表单的流程化明显，后一步填写的内容都是基于前一步来填写、是前一步反馈。3. 表单的页面框架表单的页面框架指的是承载着整个表单页的页面框架，即：整页式（新页面）、弹窗式、侧边栏式。因为其页面面积大小不一样，所以使用情境有所不同。整页式（新页面）：最常用方式，适用于绝大部分的表单，可以支持构建复杂的表单。弹窗式：通过小面积的弹窗进行轻量化的编辑，方便快速进行增、删、改、查；输入项较少，一般不会有滚动条。侧边栏式：与弹窗式相似，通过小面积的侧边栏进行编辑；可承载比弹窗更复杂一些的表单内容，可以有滚动条。我们在选择页面框架时通常需要综合以下三个因素去考虑：内容数量 ：内容如果较多不适合使用弹窗式与原页面关联程度 ：需与原页面关联强建议使用弹窗式、侧边栏式表单的复杂程度： 一般高级表单、分组表单、分步骤表单、有表格聚合的表单、联动表单等都建议采用整页式的框架来展现。4. 表单的排列方式① 布局方式在制作表单的时候分成两种排列方式：单列布局和多列布局。我们可以通过以下几个因素去考虑使用什么布局：1. 在输入项不多的情况下，建议采用单列布局，因为单列布局，用户填写的路径就是从上至下的一条直线，十分符合用户的视觉动线，能够提高用户浏览与填写的效率。2. 多列布局的表单会导致用户的视觉路径变长，用户需以 “Z” 字形的视觉动线扫描表单，会提高浏览与填写的效率，并且多列表单容易造成用户填写时的混乱，易填错，体验差。但是有时部分业务诉求和某些特性的场景要求，会需要在有限的空间上放入更多的控件来收集用户的信息，这时就不得不使用多列布局的样式，因为多列能够省纵向空间。单列布局优势：视觉路径清晰，填写效率高，体验好；劣势：垂直空间占用率高。建议使用场景：表单内容较少的情况下使用单列布局多列布局优势：省空间，能够放置更多的控件；劣势：视觉路径模糊，填写成本高，填写易出错。建议使用场景：关联性强的填写项横向排放，且将该列中最重要填写项的放于最左侧。② 标签对齐方式标签的对齐方式有：左对齐、右对齐和顶对齐，除了需要考虑单列式布局还是多列式布局，还有我们也需要考虑标签的对齐方式。马泰奥·彭佐在 2006 年 7 月对表单的每种对齐方式做过眼动测试研究，根据研究结论做出以下分析：顶对齐标签：研究中，从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍，后者需要 500 毫秒；比右对齐标签方式快 2 倍，后者高达 240 秒。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。优势：眼动测试中移动速度最快，最有利于提高用户填写表单的效率。标签字数相比于左右对齐标签可容纳更多字数。劣势：纵向空间占用率高，对于小屏用户不太友好（设计前需要考虑用户使用场景以及使用设备）建议使用场景：希望用户快速完成表单；对标签的扩展性高，有国际化需求（中文转英文，英文会比较长）；更适用于弹窗式、侧边栏式布局。右对齐标签：如果要尽量减少表单占用垂直屏幕空间，右对齐能提供快速完成时间。研究中，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。优势：标签和输入框位置紧密，更方便填写劣势：右对齐的布局会造成标签的左侧不齐，影响快速阅读表单的效率问题；如果增加填写项标题字数过多，整体的表单页都需要修改，右对齐灵活性低。建议使用场景：适用于需要填写效率但受到屏幕垂直面积限制的页面。更适用于整页式布局。左对齐标签：在顶、右、左三种方案中，左对齐表单填写速度最慢。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。在研究中，典型扫视时间为 500 毫秒，很长说明用户经历了沉重的认知压力。优势：易浏览标签；占用纵向空间较少劣势：标签和输入框距离较大，表单填写效率低建议使用场景：需要让用户认真思考后填写的页面；更适用于整页式布局输入字段上方的粗体标签在顶对齐的情况下，设计师可能会想：如果我们将标签进行加重，这增加了它们的视觉重量，并将它们带到了布局的最前面，这样说是不是可以让用户更好的去完成表单的填写呢？但事实却和设想相反：粗体标签反而增加了用户填写的负担。粗体标签导致从标签移动到输入字段的扫视时间增加了近 60% ，从没有粗体标签的 50 毫秒到有粗体标签的 80 毫秒，更突出的标签没有明显优势。粗体标签更难让用户阅读和感知——可能是因为粗体文本和输入字段的相邻粗边框之间存在更多的视觉混淆。小结标签位置：单从效率角度看，顶对齐>右对齐>左对齐，但是根据应用场景，效率快并不是我们选择标签对齐方式的唯一的指标。在大多数情况下，将标签放在输入字段上方效果更好，顶对齐的情况下标签的扩展性更高，且用户不会被迫分开查看标签和输入字段。需要注意在视觉上将下一个输入字段的标签与前一个输入字段分开。粗体标签：阅读粗体标签对用户来说有点困难，因此最好使用纯文本标签。但是，当使用粗体标签时，可能希望将输入字段设置为没有粗边框。三、表单校验形式1. 什么是表单的校验为了让用户准确的填写表单，在用户填写表单中/填写表单后，常常会增加我们常说的“反馈提示“，针对反馈信息的准确性，我们会采用两种校验形式：前端校验和后端校验。① 前端校验：主要负责校验输入的内容格式是否正确；例如常见的手机号格式是否正确、密码格式是否符合要求。② 后端校验：与数据库相关，主要负责校验输入内容是否正确；例如常见的手机号是否存在，密码是否正确。③ 校验触发条件：用户输入时进行校验（例如：注册输入密码时，实时显示密码强度）用户输入完成失去焦点时进行校验（例如：注册重复输入密码时，密码与前一次输入的是否一致）用户输入完成点击操作按钮时进行校验（例如：注册点击提交时进行校验，手机号已被注册所以未通过注册）④ 报错方式：即时报错输入完成后点击 提交/下一步/保存 等操作后报错2. 校验形式根据不同的校验触发条件和报错方式，我们可以组合成以下几种校验形式：① 输入时即时验证，即时报错用户在输入的过程中进行实时验证，输入框处于聚焦时开始提示，随着输入的过程，符合要求后已与用户通过验证的反馈。例如在注册阿里云账号时，设置密码需要满足三个条件，这里采取了即时验证。优点：可以实时告知用户表单的填写时候符合规范缺点：实时验证会使用户分散注意力，也有可能会引起用户的反感使用场景：注册时需要设置密码，通过密码不同的组成，时判断密码的强度，比如纯数字密码符合最低安全要求密码，但增加大些字母和小写字母后就形成了更安全的密码② 失去焦点后即时报错用户在输入完成后进行验证，输入框失去聚焦后（即用户点击输入框以外的位置后）与用户进行反馈。例如在注册网易邮箱时，填写完毕后即时报错。优点：为用户修改错误节省时间、避免出现很多错误需要改正的情况。缺点：如果输入有误，用户需要多一步操作，点击会有错误的输入框进行修改。使用场景：注册用户名时，取消聚焦后会反馈用户名是否可用，不可用的情况下是被注册还是格式有问题。③ 操作后（保存/提交/下一步）后全部报错用户完成表单填写后，点击操作按钮（保存/提交/下一步），系统将表单统一上传到后端数据库中进行对比后集中与用户进行反馈。优点：减少对用户的打扰，减少后端服务器压力，提高效率缺点：用户只能点击按钮后才可以得到反馈，不能及时修改；若表单过长，用户返回修改的路径也将增加。使用场景：登录账号是判断密码是否正确最后说说表单是后台最常见的场景之一，所以表单设计是 B 端产品最重要的部分之一。表单的设计是需要产品经理和设计师共同解决的难题。表单需要注意的点还有很多，我们在设计表单的同时，不仅要考虑上述的这些问题，还得“由内而外”的考虑表单为什么这么做，在用户录入信息时能降本提效才是我们应该做的。更多表单设计干货：想把表单的用户体验做到极致？我总结了这5个细节！Hi，我是彩云。阅读文章 > 把表单体验做到极致！11个表单设计的高效技巧大家好，这里是设计夹，今天为大家分享的是「表单设计」。阅读文章 > 欢迎关注团队微信公众号：兆日 UCD本篇来源：优设网原文地址：https://www.uisdc.com/web-form-design-2
数据 图表 关系 可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。往期干货：如何做好视觉可视化设计？我总结了这72种图表类型视觉学习者（Visual learner）是那些用图像进行思考的人[1]，这些人将脑中的画面转述成词语去与他人进行沟通。阅读文章 > 一、为什么要数据可视化数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律。关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。1. 选择适合的图表数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。① 分析数据关系根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。构成关系构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。关键词：“占比、比例、百分比”比较关系比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。关键词：“增减、升降、涨跌、波动”分布关系利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。常用图表：散点图、热力图、雷达图等关键词：“随着……而变化、A/B之间的相关性、交/并集”等关联与流转流转关系是 B 端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。常用图表：关系图、桑基图、漏斗图、进度图等关键词：“流程步骤、留存、转化、关系”② 分析数据特征按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。变量特征分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。连续型数据：指在一定区间内可以任意取值的数据叫连续数据，其数值是连续不断的。如身高、体重等带有时间因素变量的数据等，通常用折线图体现变化趋势。离散型数据：指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据，用柱图表现更加体现变量的特征。维度特征多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类根据分析视角选择图表：对于多维度变量的数据我们需要明确分析的视角，去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据，如需要全局视角查看个班的综合素质，推荐使用雷达图；对比单科成绩的变化分布，则推荐使用堆积图。层级特征多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：矩形树图：突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小，它以面积的形式突出展现各个子层级节点的占比，可帮助用户看到数据的层次结构以及各层级之间的关系。例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。旭日图：突出细分层级关系。由多个圆环图嵌套而成，也称为径向树图，它既能像饼图一样表现局部和整体的占比，又能像矩形树图一样表现层级关系。常用于细分分析方法，将事物从大到小进行拆解。每个级别的数据通过 1 个圆环表示，离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效，而矩形树图适合比较相对大小。流程特征流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。2. 强化视觉层次选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。① 强化数据特性使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差趋势易感知：折线图数值如过于平均导致趋势平缓，有时候无法体现偏差；在强调数据趋势的场景下，推荐用动态取值范围让波动保持在一定范围内，放大波动占比更突出趋势。展示更准确：柱状图依靠柱体面积体现最终数值，使用动态范围截断将会导致数据解读不完整；始终将 y 轴从 0 开始，才能更准确的反映柱图中的值。② 色彩视觉传达除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。我们在之前的文章里有介绍过图表的取色模型，通过调整颜色 HSL 值的区间，可以得到以下三种意图色板：定性型-分类色板：用于区分不同的类型，又称为无序色板。适合区分没有内在顺序的类别定量分歧型-发散色板：通过两边互补色来体现，具有明亮的中间值，然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值定量顺序型-顺序色板：从亮到暗或相反的渐变。适合可视化从低到高的数字。那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。定性型：使用色调来进行分类数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：选取尽量少的色调：取色时无需使用整个色环，使用邻近色或互补色的取色方式显得更加专业。色板适度明暗交替：一些视障人士无法区分色相，主要靠颜色的明暗差异来识别，通过饱和度和暗度的调整，创造明暗交替的色板。定量型：使用深浅色板强调内在顺序如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。顺序色板-选择合适的插值：根据数据的分布情况选择不同的的插值断点，突出数据的差异。如以下案例中，根据统计学概念设定不同的取值区间，左侧示例使用的是平均线性差值，反映的是数据的集中趋势；右侧示例使用的是中位数插值，能更好的体现数据分布的形态。发散色板-关注对比色的识别性：尽量避免红绿配色，如需使用绿色，偏黄或偏蓝的绿色更易分辨，对视障人士也更加友好。3. 图表中的响应式设计B 端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。① 布局框架适配在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。② 图表元素适配要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。信息浮层：在图表中，信息卡元素是传达信息内容的重要组件，在网页端中悬浮展示，通常会占据很大空间；图表适配移动端后，信息浮层改动到图表上方常驻显示，并跟随手指的滑动变化响应数值，完整展示信息的同时也避免了页面抖动。坐标轴标签：过长的坐标标签在适配过程中会产生重叠，而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配，避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配，精简空间避免堆叠。③ 极值适配因 B 端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。缩放和平移：在数据范围过多时增加取值范围的缩略轴组件，通过限制展示范围让数据量显示可控。互动切换视图：如果折线的类别过多且无法省略的，建议分组查看。默认状态仅当前组折线高亮，其他数据以浅色显示，通过切换的方式查看其他组别的信息。悬浮鼠标高亮：在分类过多不好分辨时，可使用悬浮高亮的交互方式突出相关联的数据组。还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。结语数据可视化在 B 端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。* 以上图表中均为虚拟数据，仅作为案例参考8000 字深度长文！B端数据可视化设计指南（信息图表篇）在如今的工作中（尤其是 B 端）越来越多的会开始出现数据可视化的身影，对于一部分小伙伴来说这个概念是较为陌生的，面对这道无形之中提升的“门槛”我们常常会表现的手足无措。阅读文章 > 想做好数据可视化？先掌握常见 5 类图表的特点和设计细节“数据可视化的目的，是要对数据进行可视化处理，以能够明确地、有效地传递信息。阅读文章 > 欢迎关注作者的微信公众号：「百度MEUX」本篇来源：优设网原文地址：https://www.uisdc.com/visual-chart
软件 网站 都是 大家好，这里是和你们聊设计的花生~做设计或者日常学习娱乐我们都离不开各种软件，如果这款软件是免费的就更棒了。今天就为大家介绍一个超强大的相似软件推荐网站 AlternativeTo，它收录了 10 万多个替代软件，涵盖办公、设计、娱乐、编程、效率工具等各个领域，非常适合用来寻找一款软件的免费平替。往期回顾：Similarsites超好用！一键搜索相似网站的神器大家好，这里为大家推荐神器的花生~不知道大家有没有和我一样的经历：经常访问的网站很不错，那如何找到类似的网站；之前收藏的网站突然打不开，不得不重新寻找新的替代网站；或是想找的资源在这个网站里没有，想看看有没有类似的网站能找到。阅读文章 > AlternativeTo网站直达： https://alternativeto.net/ （可直接访问，搭梯子浏览速度更快）AlternativeTo 是一个免费的相似软件资源推荐网站，由瑞典人 Ola 和 Markus 创立，无需注册打开即用。网站上的资源收集自世界各地网友的投稿推荐，目前共收录了 10 万多个替代软件， 各种办公、设计、视频、音乐、游戏软件和效率工具都可以在上面找到同类型的替代，而且无论是在线网站、Windows、Mac、Linux 还是 Android、iPhone 和 ipad 都有对应的推荐。AlternativeTo 网站首页网站的显示语言是英语，搜索框在右上角，我们在搜索的时候也要输入英文，觉得英文浏览不方便的小伙伴可以使用具有网页翻译功能的浏览器打开。网站首页展示了「被最多次寻找替代品的软件」、「被查看最多次的软件」和「精选推荐」等版块，其中很多都是我们熟悉的，比如 Z-Library、网飞、Ps、Microsoft Office、Youtube 等，还有最近大热的 ChatGPT、Midjourney 等 AI 工具。AlternativeTo 内被最多次寻找替代品的软件以 Ps 为例，点击进入“PS 的替代软件界面”后，主要呈现两部分的内容，一部分是关于 Ps 软件本身的介绍，另一部分是所有可替代 Ps 的软件名单。说实话打开之前我都不知道 Ps 能有 200 多个替代软件，太夸张了。不过我们也不用每个都看，因为软件是根据用户点赞数进行排序的，点赞的人数越多排名越靠前，一般看排名前 10 的软件就够了。AlternativeTo 对替代软件有非常细致的介绍，信息量比较大，我们可以通过以下方式快速判断一款软件是否符合自己的需求：看软件标签：替代软件名称下面会有一连串的描述标签，可以帮助我们快速了解这款软件是不是免费的，支持哪些平台设备。看界面截图：替代软件简介右侧是软件界面的截图，点击后可以查看大图，这样我们就知道它的操作界面是不是符合我们一贯的操作习惯。看用户评价：用户评价最能直接反应软件最大的优点和缺点，评论区右上角还有筛选器，可以查看所有负面评价或最新评价。快速浏览后如果你觉得这款软件比较符合自己的要求，可以点击名称进入软件详情页，里面会提供软件的官网访问链接或下载链接，以及关于该替代软件的替代软件，非常方便。以上就是相似软件推荐网站 AlternativeTo 的相关介绍，我在网站里翻看了几个常用软件的替代推荐，都是非常靠谱的，而且很多都是免费开源的。以后大家无论是找设计软件还是影视音乐软件的平替可以上去搜搜看，也可以投稿推荐自己觉得好用的相似软件。网站直达： https://alternativeto.net/ （可直接访问，搭梯子浏览速度更快）喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~推荐阅读：想用网页版Photoshop？这2个免费在线工具就很不错！大家好，我是和你们聊设计的花生~昨天一则关于“Photoshop 网页版免费”的消息冲上热搜，大概内容是 Adobe 开始在加拿大试行网页版 Photoshop 的免费使用，位于加拿大的用户可以通过免费的 Adobe 账户访问其网页版。阅读文章 > 5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！（二）大家好，我是和你们聊设计的花生。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/alternativeto
视觉 布局 权益 设计团队如何赋能业务，提升用户体验的同时，助力业务达成目标？接下来通过「PLUS 未开通会员｜首屏｜体验设计升级」项目进行整体复盘。往期案例：京东APP 9.0 是如何改版设计的？收下这份官方的完整复盘！2020 年未过半，我们就看了许多从前从未见过的人和事，体验了许多从前从未想过的经历。阅读文章 > 一、前期分析1. 项目背景PLUS未开通会员项目的背景有以下几个关键点：未开通会员频道"首屏"做为开卡转化的核心阵地，80%的流量集中在首屏，却没有很好的发挥首屏价值。PLUS 长期沉淀已有更多卡种，在主频道内没有呈现。未开通频道长时间未做视觉升级，因此需要进行体验设计优化，从而提升开卡效率。2. 业务诉求① 首先明确核心诉求在于提升频道首屏的开卡率② 接下来拆解诉求频道外露多卡种权益组织形式重构交互视觉体验升级优化开卡链路基于以上这几点去促使用户更快决策，助推到业务核心诉求从而提升首屏开卡率。3. 现状分析明确业务诉求后，相应对频道页面的现状进行分析，整合来看有以下 6 点。卡种选择单一且无核心价值传递会员权益形式表达不清晰，撩拨感弱权益露出无权重差异转化链路层级长联名卡视觉样式老旧且框架较高与正式开卡页面视觉风格不统一二、设计预研对自身问题有了拆解后，接下来对淘系、零售、O2O 相关竞品进行调研， 提炼竞品的一些相关优势策略点。正所谓“他山之石可以攻玉”。并且罗列归纳了竞品的几种布局方式因此，基于对自身现状的分析，和对竞品的分析，我们将本次体验设计升级的策略主要锚定在 权益表达、结算链路、结构布局、卡种展示 四个关键点。三、设计推演设计推演拆分为发散和收缩两个部分。1. 飞机稿发散发散阶段围绕 结构布局 和 卡种展示 进行发散.① 结构布局发散了 包裹式布局 和 分段式布局② 针对卡种展示，分别发散了 传统 tab 切换 和 卡片轮播 以及 卡种场景化探索。③ 由于有多种卡种，因此在卡种发散的过程中针对于 不同卡种的用户感知，也进行了相应的探索。比如 强感知 的皮肤颜色切换、卡面图形切换，次强感知 的标签样式区分。强感知 的皮肤颜色切换强感知 的卡面图形切换次强感知 的标签样式区分2. 收缩-策略推演最后的方案收缩落地，我们主要围绕前面提及的四个方向进行策略拆解，首先是权益展示。1）权益展示分为三个点：① 是进行主次权益的权重差异，助力用户决策。② 会员权益显性露出，强化关键信息，以及 sku 的轮播露出，打造强撩拨感。③ 最后组件化输出模块，后台灵活配置上传，节省开发成本。2）结算链路① 摒弃了以往全页面跳转形式，采用浮层收银台的方式，减少用户在页面间跳转带来的迷失感，从而达到简化支付路径的目的。② 其次视觉整体优化。保证视觉一致性传递。3）结构布局① 整体采用分段式布局结构、使模块更聚焦，提升首屏的秩序感② 分层展示便于开发还原。 「前期 UI 评审阶段和开发做好沟通，便于开发判断使用什么实现方式，从而做到又快又好的还原设计稿（皆大欢喜）」4）卡种展示① 多卡种滑动保证卡种外露的同时 引导用户操作。② 卡面微动效，强化 PLUS 的 品牌心智和用户感知。③ 卡面氛围，最终采用 3D 打造的效果，彰显 plus 品牌的尊贵感知，助力用户决策。并且拓充氛围坑位的运营属性，可配置氛围延展 plus 会员卡的情感化表达。④卡面上进行不同卡种 slgan 的透传，进行价值传递，进一步助力决策，比如京典卡：开通享 12 大特权，省钱又省心； 免费试用：开通享 8 大特权，免费试用 30 天；0 元开通：开通享 12 大特权，多用多省少用不亏。⑤ 联名卡整体视觉减负。四、数据验证本次首屏设计体验升级，在组内同学、产品和开发的共同的努力下，最终测试上线，通过测试版本追踪数据，我们也得到了相应正向的反馈（这里就不放数据啦）。大厂实战！京东内容助手从想法到落地的完整设计复盘本文主要讲述了作者作为京东内容助手 APP 产品一号位以来，从 0-1 开始做一款 APP 的比较有代表性的经历和总结思考，为读者朋友们提供参考和建议。阅读文章 > 京东 11.11 的视觉体系是如何建立与推动的？来看完整复盘！京东每次集团大促都会有无数的问题等待我们去解决，在此给大家分享一下京东运营设计团队关于双 11 项目的复盘总结，希望共同探讨，一起学习进步视觉定位每次遇到集团大促，我们视觉团队都会倍感压力，不仅仅来自于运营团队业务要求的压力，也来自于年轻群体的购物趋势变化非常快，审美要求也越来越阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/jd-plus-redesign
合集 干货 网站 大家好，这是 2023 年第一期干货素材合集！这期干货合集对于 UI 和 UX 设计师可能会更有吸引力，深色模式网站范例合集、SaaS 着陆页设计合集还有真实产品 UI 界面设计图库，这些都是 UI 和 UX 设计师日常设计的时候会用得上的好东西，另外，这次我还找到了设计工具快捷键合集网站以及一个全新的图片清晰度提升服务，不过我个人最喜欢的，还是搜索垂直网络社区的搜索引擎和顶尖图库图片搜索引擎。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第四波！2022年12月精选实用设计干货合集大家好，这有可能是 2022 年最后一期干货素材合集了！阅读文章 > 下面我们具体看看这一期的干货：1、基于 AI 的图片清晰度提升服务https://letsenhance.io/Let’s Enhance 是一个基于机器学习的照片清晰度提升服务，它可以在不损失照片素质的前提之下，最高将图片放大 16 倍，同时还可以借助算法提升照片的锐度，算法还能够帮你针对效果不好的照片修复细节，处理欠曝和过曝等光线问题。Let‘s Enhance 提供免费试用，对于高清图片有需求的可以尝试订阅他们的服务。2、深色模式网站设计范例合集https://www.darkmodedesign.com/如今绝大多的 APP 都已经适配了深色模式，很多新的网站也开始有针对性地设计深色模式了。这些深色模式的网站大都在配色和设计上更为克制，并且支持在深色模式和浅色模式之间切换，有很多值得学习的地方。这个名为 Darkmodedesign 的网站是由设计师 Cai Cardenas 所创建，网站也都是由他亲手挑选，有需求的同学可以收藏一下。3、垂直网络社区搜索引擎https://thehiveindex.com/现在很多资源、内容和技巧都需要去网络社区当中寻找，虽然 Reddit 这种百度贴吧式的社区里啥主题都有，但是真正细分而精准的社区相反不是那么容易找到。这个名为 Hive Index 的网站就专门搜集整合了这些垂直的小型社区，其中仅设计社区就搜集了70个。如果你正想寻找某些小型的专业的社区，不妨用这个网站来搜索一下。4、SaaS 着陆设计大合集https://saaslandingpage.com/SaaS 类的产品和服务在页面设计上有很多相通的地方，这个网站汇集了全球范围内最顶级的 SaaS 服务的着陆页设计，给你作为参考。即使你本身所设计的并不是 SaaS 类的网站，也可以从这些素质极高的网站中汲取一些设计灵感。5、顶尖图库素材搜索引擎https://www.everypixel.com/Everypixel 是一个图库聚合搜索引擎，它直接连接了 50 多个目前最顶级的图库，你可以透过它直接搜索搜索这些图库当中的图片，不过，EveryPixel 使用神经网络算法，将过时的图片和优质的图片区分开来，它还支持以图搜图，内置丰富的筛选功能，还支持付费图片在线比价，甚至可以按照作者来搜索。6、设计工具快捷键合集https://shortcuts.design/虽然有的同学可能会直接买个带快捷键列表的鼠标垫来方便查询，但是鼠标垫不可能摆满所有设计工具的快捷键。这个名为 Design Shortcuts 的网站将目前绝大多数的主流设计工具的快捷键都梳理总结了下来，在快捷键这件事情上，可能会比鼠标垫要实用一点。7、真实产品的 UI 界面设计图库https://designvault.io/做 UI 和 UX 的同学对于这类 UI 素材库应该还是有较强需求的，Design Vault 将常见的 APP 全部都截图，然后按照功能和界面属性进行了详细的分类，打开网站首页之后，你可以直接从各个界面控件和功能页面的分类进去查看不同 APP 的设计，也可以直接浏览刚刚被收录的最新 APP 的设计。本篇来源：优设网原文地址：https://www.uisdc.com/2023-1-design-resources-vol1
色彩 亮度 自定义 色彩体系的推导其实有很多文章有详细的介绍了，这一篇主要粗浅的梳理了整体流程经验，补充一下技术方法与色彩模型的差异。相关干货：如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 前言：本文粗浅阐述色板生成、检验与应用的流程方法，包括主流的基准色选取、演算方法、补充色彩空间底层差异、以及 Tokens 结构。好了，那就开始吧~一、取色1. 主色：从产品或品牌主色开始注：以个人项目主色为案例，前期产品色是基于 HSB 色彩模型选取的主色配色：品牌/产品所要传递的调性以拾取 24 色为例：H 360/24=15递进，Brand Blue H218。配色原则方法：1、基于品牌传递调性；2、基于邻近色、对比色、互补色。配色种类：自定义（6、8、12、16...）2. 检验：主色保持视觉感官一致保持视觉感官一致，适宜长时间浏览阅读。矫正饱和度 S 与亮度 B，HSB（brightness）的亮度一致不能保证视觉感知一致，需引入 Photoshop 图像灰度模式或者 Lab 色彩空间下的亮度 L（Lightness）来检验。在保证主色色彩主观感受舒适下，以品牌色亮度为基准，亮度过渡尽量平缓，矫正过于跳跃的色彩主色，才能衍生出接近视觉感官一致的全色系色板。二、延展演算 1.0：透明叠色操作性快捷，色彩过渡平均。假设不以纯白纯黑作为起点与终点，就需要确定最小起点值 95%(自定义)，确定 11 色(自定义)，白色步幅为 n=5(自定义)，黑色步幅为 n=5(自定义)，得出 95%/n=19%。演算 2.0：等序差值操作性容易，有规律推算 S 值与 B 值。同样假设不以纯白纯黑作为起点与终点，就需要确定最小起点 Smin=5%(自定义)；Smax=100%(自定义)；Bmax=100%(自定义)；Bmin=20%(自定义)，浅色步幅为 n=5(自定义)，深色步幅为 n=5(自定义)。如果把调色板看成是一个二维坐标轴，我们有主色坐标、深色坐标与浅色坐标，三个坐标点之间进行均值计算，一次衍生步幅坐标点。通过此规律，那么就可以利用 Numbers 表格搭建简单演算工具，依靠公式修改基准色 S 值与 B 值，演算延展出完整的深浅色板。演算 3.0：曲线拟合依赖曲线函数，多种过渡变化。色彩过渡缓和在直线的基础之上，引入线段曲率与点速度，也可以使用常用的曲线函数：EaseIn；EaseOut；EaseInOut 等。曲线色彩梯度自行推导难度相对较大，需要依赖工具生成。三、检验1. 检验色板：视觉感官的一致性亮度当然除了亮度检验，还需要做 WCAG 2.1 标准下的对比度检验。相比于直线生成的色板，曲线函数的优势能生成亮度一致性更接近的色板，但是仍然无法完全解决这个问题，那么是不是问题出在色彩模型下呢？2. 两类色彩模型的底层差异追求亮度一致的视觉感知体验，目前在软件层面涉及到色彩部分，几乎都是以 RGB 或者 RGB 的色彩模型衍生出来的色彩空间。RGB 的原理发光元件通过三色光叠加，是一种基于计算机显示技术发展而来的色彩模型。其实对发光元件而言的亮度与人眼感知的亮度是存在非常大的差异。那么基于人眼测定的色彩模型就有像 Lab、HCL 以及最新的谷歌 HCT，常用的 Photoshop 图像灰度模式与 Lab 中的 L 都是基于人眼测定的亮度 Lightness 通道。下图可以直观感受基于两种色彩模型差异，虽然都是相同的亮度 Lightness，但是视觉感官体验上的舒适性差异明显。在这里补充色彩模型差异，主要原因是软件产品服务对象是人本身，所选用色彩模型应尽量贴近人眼感知层面的色彩模型。基于 HSL、HSB 生成的色彩，同样可以通过换算关系，转换成 Lab、HCL，但是由于色域范围不一致，色彩会存在不兼容的情况。换算关系：sRGB(HSL/HSB) linearRGB CIEXyz CIELab CIELch， 在 W3C（15. Sample code for color conversions）文档中有给出具体转换公式代码。四、应用工具资源对比度检测 Color.review WCAG2.1： https://color.review/透明度叠加工具 Tint and Shade Generator： https://maketintsandshades.com/直线等分亮度工具 chroma.js palette helper： https://gka.github.io/palettes色彩曲线工具 ColorBox by Lyft Design（搭梯子使用）： https://lyft-colorbox.herokuapp.com/色板生成工具基于 HSL/HSBEva Design System: Deep learning color generator： https://colors.eva.design/ColorBox： https://colorbox.io/基于 HCLAtmos - Create UI color palettes with ease： https://app.atmos.style/Colorpicker for data： http://tristen.ca/hcl-picker基于 HCTMaterial Theme Builder： https://material-foundation.github.ioFigma 插件(Color Space: First plugin with HCT)： https://www.figma.com来源参考：使用 Chroma.js 掌握多色调色阶： https://www.vis4.net/blogRe-approaching Color： https://design.lyft.com/re-approaching-colorDesigning Systematic Colors： https://uxplanet.org/designing-systematic-colors关于 HCL 颜色的一些笔记： https://segmentfault.com/a/1190000023056925产品配色 2.0：使用 HCL 色彩空间替代 HSL 生成配色： https://jessieji.com/2020/hcl-instead-of-hslThe Science of Color & Design： https://material.io/blog/science-of-color-designDesign tokens： https://m3.material.io/foundations/design-tokens/overviewW3C： https://www.w3.org/TR/css-color-4/#color-conversion-code更多色彩体系干货：配色找不到感觉？这个PCCS色彩体系帮你从根本上解决（三）大家好，我是和你聊设计的花生~之前向大家介绍了 PCCS（日本色彩研究所配色体系），它是目前全世界最常用的色彩体系之一，能帮助我们了解色彩要如何使用才更方便，以及如何搭配色彩才更和谐更好看。阅读文章 > 如何设计B端色彩体系？3个步骤帮你掌握起来！编者按：B端设计的色彩体系如何构建？阅读文章 > 欢迎关注「JellyDesign」的小程序：本篇来源：优设网原文地址：https://www.uisdc.com/color-system
认知 自己的 目标 如果你有午睡的习惯，你会发现如果中午不趴那么一会儿，一下午的脑子都是不清醒的。如果你有迷茫的习惯，最终你也会发现，无论处在人生哪个阶段，都有数不清的“迷茫”和“瓶颈”在等着你守着你。也许没准儿哪一天，这些迷茫不再以迷茫的面貌出现，它换了一个更酷的名字，灰犀牛。上周给团队做了关于职业规划的分享，我现场做了个小的调研。结果并不出人意料：几乎没有人认为自己拥有清晰的职业规划，同时，约有 30%的设计师认为自己作为设计师最多只能工作到 35 岁。对大部分人来讲，一生中三分之二的时间在工作，职场是一个个人自我实现的舞台。保持适当的求生欲与危机感，有意识的准备自己职业发展的 Plan B，应该是每个职场人的必修课。设计师们也应该重视自己的职业规划，有了更清晰的目标，才能在为老板工作的同时，也为自己工作，为自己的未来工作。本文从实用角度，以互联网行业的设计从业者为例，结合我自己作为职场老鸟的血泪经验，梳理了进行自我职业规划的方法和步骤，希望大家可以建立一个正确的认知，打开职业生涯发展的新思路。往期同类文章推荐：深度分析设计师能力模型（一） ： 从心理学角度聊聊职业规划很早之前写了一篇《设计师晋升述职和能力模型》的文章，很多小伙伴给我留言或者私信，问了很多问题，也跟我探讨了自己的设计师职业规划和职场困惑。阅读文章 > 一、认知自我职业规划的核心根本问题是认知问题，认知问题的处理首先需要从认知自我开始。成为自己，成为如所其是的自己，是每个人无论在工作还是生活中的首要目标。全球最有影响力的生涯发展研究者舒波，提出的职业发展拱门，也将“自我”的构筑放在了拱门最顶端、最中间的位置。所以说，了解自己，正确的认知自己是做好职业规划的第一步。成为自己，成就自我，是职业生涯规划的最终目标。那么如何认知自己呢，我觉得可以从以下 4 个纬度来进行。1. 职业性格一个人的性格或人格在成人之后已经定型，几乎是无法改变的了。所以了解自己的性格，正确的认知自己的性格，是一个非常基础的事情。比方说一个人非常内向，我们不应该把注意力都集中在内向有哪些缺点，拼命改掉这些缺点，努力变得更外向的人差不多。而是应该洞察自己，认知自己，了解自己性格中的长处和短处是什么，不断放大自己的长处，学习一些技巧来弥补自己的短处。心理学上会有很多方法和量表，比如 MBTI、九型人格、大五人格这些测试工具都可以帮助我们认知自己。2. 职业兴趣林语堂说，“先有痴，而后有成”。自己喜欢做的事情，自己天生对某些事情的热爱，往往是我们做事情的原动力。很多目标感强的人，在学生时代就有了相对明确的目标，这往往得益于比较成熟的职业兴趣与职业启蒙。相信大多数工作几年之后的同学，也会比较确定自己的职业兴趣。喜欢什么，不喜欢什么。如果对这一点仍然存在疑问的，可以结合“霍兰德职业兴趣测试”来做判断。3. 能力结构为了帮助大家更好的进行设计师的能力结构认知，我结合设计师的岗位胜任力模型整理了一个素质评估模型。我们可以首先看一下专业素质和通用素质的部分，基本上作为设计师我们有六项能力是需要不断提升，也是被不断评估的。分别是：专业技能、项目管理、洞察创新、协作能力、执行力、解决问题的能力。我们可以通过这个结构化的东西来自评自己的能力结构，哪些方面得分较高，哪些方面得分较低。从而对自己的能力结构有一个全面的认知。4. 职业价值观简单的说，我们作为一个人，在工作中自己最看重的是什么，我到底是觉得赚更多的钱最重要，还是获得更多的工作成就感更重要，抑或还是有融洽舒适的同事关系更重要，这都是我们的职业价值观。职业价值观相对于上面的三点相对更加隐性，但其实对于职业规划而言是最为重要的。舒波提供的职业价值观自测量表，将职业价值观划分成 15 种类型，分别是美的追求、安全稳定、工作环境、智能激发、独立自主、多样变化、经济报酬、管理权力、帮助他人、生活方式、创造发明、上级关系、同事关系、成就满足、名誉地位。无论你对了解自己有多高的自信，还是非常建议自测一下。二、认知环境对外部环境的认知，也同样重要的决定了我们能不能做好职业规划。对于设计师来讲，需要考虑两个领域的现状和趋势，一个是设计的专业领域，一个是就职公司所在的行业领域。嗯，这的确是一个很伤脑筋的问题，不过我们在职场上很多关键的选择都与对这个问题的认知程度强相关。遇到问题时抓瞎，问问这个，问问那个，还是不知道该怎么选，这样的情况可能是因为对环境缺乏认知。在设计思想同质化、设计方法透明化、设计工具傻瓜化的今天，设计师作为一个职业，有着明显的低门槛、低天花板的现象。低门槛让设计技法的重要性变得越来越弱，设计思维的重要性越来越得以凸显。想法远大于技法。这是好事。科技的发展释放了设计师更多的头脑和时间，设计方法和设计理念的同质化加速了设计师的成长速度，从而使得年轻的设计师可以得到快速晋升。同时，快速晋升的同学也逐渐看清了自己在这个领域里的天花板。天花板与瓶颈的本质不同：瓶颈说的是过程，而天花板说的是终结。所以这意味着互联网行业的设计人才在进行着快速的迭代，快速的新陈代谢。这也许是一种耸人听闻的说法，但愿如此。我们再看一下行业环境。显而易见的是，设计师除了是设计师之外，还是自己所在行业的从业者。而设计师和程序员这样的职业，跨行业跳槽相对比较容易，所以我们也经常面临对行业的选择。也许我们有一些途径可以获知很多信息，帮助我们做选择和判断。不过最近发生的一些事情，充分显示了大环境的不确定性。2021 年之前，也许没有人能想象奥运会在疫情下召开，全世界的人一起看的奥运直播，直播画面全部是都 2020，而今年是 2021 年；也没有人能想象在线教育行业以双减政策的出台而整体塌方，一夜之间新东方等教育机构的市值缩水近 7000 亿；也几乎没有局中人可以获知滴滴上市后面临的审查。这就是不确定性。三、设定 1 个大目标和 1 个小目标认知环境是一个难度较高的事情，并且我们掌握的信息永远是片面的，我们的认知也永远是不全面的。如果我们要做职业生涯规划，不需要等到对自我和环境的认知非常胸有成竹之后再进行目标设定。并且因为我们认知的局限性，我们设定的大目标往往只能是一个模糊的、不够具体的目标。所以首先我们要做的，是设定一个哪怕是模糊的长远目标，结合你所有关于职业状态的美好想象，大胆的设想它，并把它写下来。然后围绕这个大目标，我们设定一个近期就能尝试实现的小目标。小目标的设定周期可以是一个月，两个月，或者半年。不要太长，也不要太短。比方说，小莉的职业理想是成为一个万众瞩目的、多金的网络红人，那么他可能就需要从打造第一个关于自己的爆款短视频开始。小目标要与大目标要有强关联。达利欧 通往成功的 5 步流程四、立即行动有了目标，就需要尽快动起来。如果不去行动，会在迷茫中继续蹉跎度日，最后陷入一个毫无动力的死循环。有了目标，需要立即行动。对，要立即行动，不是 1 年后，不是 2 个月后，也不是 2 周后。当然并不是说你要抛下现在手里的一切，重新开始，而是说应该围绕目标先做一些尽可能的低成本的尝试。这种尝试性的行动，其实是在验证目标的可行性。行动是目标规划的一部分，只有先动起来，才能促使自己在对规划中的内容做进一步的了解、形成更笃定的认知和判断，从而真正实现职业生涯规划的价值。在行动的过程中总结经验，修正目标，并重复做尝试进行。以上。更多职场干货：艰难求职季，腾讯设计师是如何做职业规划的？2020 年真的是一个开局不利的一年，如果有的选择，可能很多人都想重新开启这一年吧。阅读文章 > 2020年陷入迷茫？帮你做好职业规划的9个实用经验！最近和很多设计师朋友交流发现各个阶段的设计师都对自己的职业规划比较迷茫，我最近也思考了挺久，梳理出这篇文章和大家一起共勉。阅读文章 > 欢迎关注作者微信公众号：「柴林的设计笔记」本篇来源：优设网原文地址：https://www.uisdc.com/4-step-plan-for-your-career
干货 样机 这是 大家好，这是 12 月的第 3 波设计干货合集！这次合集里有移动端 AI 图片生成服务，有基于 AI 的独特节日贺卡生成服务，此外还有独特的抽象 3D 图形素材，有针对特定事件和功能的在线网站搭建工具，以及高素质的 Macbook Pro 样机。当然，在此之前记得看看往期干货中有没有你感兴趣的素材：第二波！2022年12月精选实用设计干货合集大家好，这是 12 月的第 2 波设计干货合集！阅读文章 > 下面我们具体看看这一期的干货：1、Linear 式设计风格网站合集https://www.linears.art/Linear 是一个在设计和细节上都非常考究的设计和开发平台，它提供了一套苹果式的设计美学体系，而采用了 Linear 式设计风格的网站和产品则被称为 Linears，这个名为 Linears.art 的网站就专门搜集了采用这一设计风格的网站和 APP，如果你也偏好 Linear 的设计风格，那么这里的内容都是颇为不错的灵感来源。2、移动端 AI 图片生成 APP DRAIhttps://apps.apple.com/us/app/drai-ai-image-generator/id1643729769DRAI 同样是基于咱们熟悉的 Stable Diffusion 开发而来的应用，不过它被制作成 iOS 平台的应用。使用它来生成数字艺术品的方法很简单，你可以给予一个简单的描述之后，选择你偏好的风格；你也可以上传一张照片，然后告诉它你希望基于这种照片进行哪些修改。DRAI 提供的玩法很自由，你可以通过排列组合创造出很多有趣的作品。堪比艺术家！被疯狂安利的 AI 插画神器 Disco Diffusion 有多强？大家好，我是和你们聊设计的花生~有关注「神器挖掘机」阿文（微博 @Simon_阿文 ）的朋友，可能已经了解到他最近正在疯狂安利一款 AI 绘画神器——Disco Diffusion。阅读文章 > 3、AI 生成独特节日贺卡的服务https://designstripe.com/ai-cards这是 Designstripe 出品的一款工具，在人工智能的帮助下，将你的需求和描述转化为一组有着独特插画的贺卡，你需要做的就是紧跟着流程填写内容，就能生成专属贺卡。4、包含独特纹理的抽象3D形状素材https://bloom.craftwork.design/Bloom 是一个包含 450+ 抽象 3D 元素的大合集，这些 抽象 3D 元素大都被设计的非常风格化，规整而充满调性，你可以轻松地把它应用到不同的场合，而且无论是静态还是动态，用起来效果都颇为不错。这套素材有专门的 Figma 库 和 Blender 库，方便你在设计的时候直接调用。整套素材是收费的，但是提供免费试用的小样。5、免费的在线网站搭建工具 Flyahhttps://www.flyah.co/如今的建站工具也做的越来越智能，越来越方便了。很多工具为了提供尽可能多的功能，会提供大量的模板和无意义的插件，甚至定价策略都看得人头疼，而 Flyah 则不同，它保留了简单易用的拖拽是编辑功能，但是大胆地选择了以事件为中心的页面设计，内置的模板也基本上是为了服务不同事件而设置的，设计有格调，功能够集中，感兴趣的同学可以上手试试。6、高素质 Macbook Pro Figma 样机https://macbook-mockups.wannathis.one/这是一套素质超高的 Macbook Pro 样机，这波样机超级有格调，整套样机是付费的，但是对于特定的品牌和项目而言，应该是值得的。这套样机可以直接在 Figma 当中编辑，同时还有免费的 Demo 下载试用。7、免费创建高素质图表的工具https://www.image-charts.com/如果你需要创建漂亮又规整的图表，那么使用 Image Charts 2.0 可以相当轻松的做到这一点，不过它能做到的还不只是这些，它还可以通过自定义的 API 和 Zapier 以及 Make 集成到一起，让你的数据图表可以和任何数据源集成到一起，也能让你的图表动态的嵌入到网站、邮件等不同的场合。本篇来源：优设网原文地址：https://www.uisdc.com/2022-12-design-resources-vol3
图像 提示 模型 大家好，这里是和你们聊设计的花生~之前为大家推荐了一款上手非常容易的 AI 图像生成工具 Dream Studio，它操作界面简单易懂，非常适合刚接触 AI 图像生成工具的新手。最近又出现了一个新的同类型的 AI 图像生成神器 Dreamlike.art，操作界面同样好用且图像质量极高，即使是小白也能轻松生成精美的图像，效果可以跟上 Midjourney 的 V4 模型了。最最重要的是目前可以免费，使用一起来看看吧~Dream Studio 介绍：免费开放！人人都能轻松上手的AI绘画工具DreamStudio大家好，我是和你们聊设计的花生~之前为大家介绍了初代 AI 图像生成器 Disco Difussion、Dall·E 2、Midjounery，国产 AI 图像生成器 Tiamat，以及 4 款由谷歌、微软等大厂推出的 AI 图像生成器 Imagen、Parti、Make-A-Sce阅读文章 > Dreamlike.art官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0使用指南： https://dreamlike.art/guidesDreamlike.art 的功能包括根据文本生成图像、根据图像生成新图像和图像变体，以及通过放大和面部优化来增强图像内容。我用 Dreamlike.art 生的人物图像，质量相当不错用户@ScourgeHH 用照片生成的图像，图片来源：官方 Discord 社区除了输入文本提示，Dreamlike.art 的操作界面上有很多可以调节的参数，比如：负面提示：输入后图像可以不包含有关负面提示词内容；指导量表：控制生成图像与文本提示的紧密程度，值越高图像与提示的贴合度越高；注意力控制：在提示中使用 （） 会增加 AI 模型对括号内单词/短语的注意力，而 [] 会减少注意力，注意力的增加意味着该单词/短语将更多地影响生成的图像。步骤：控制图像迭代次数， 步骤越多结果就越好，但在大多数情况下 30 步足够了。有了这些可调节的参数，我们就能对画面进行细微的调整并准确控制生成效果。即使对这些概念都不太熟悉也不用担心，官方在指南里对每一个参数的概念和调节方法都做了详细的介绍，甚至还写了一篇文章教我们如何利用最近爆火的 AI 聊天机器人 ChatGPT 生成优质的文本提示，想深入了解 AI 提示词写作技巧的小伙伴可以详细阅读官方指南，当然直接使用系统默认的参数设置也能得到不错的效果。地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？大家好，这里是和你们聊设计的花生~前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。阅读文章 > Dreamlike.art 的另一个神奇之处是它有很 5 个不同的风格模型：Dreamlike Diffusion、Dreamlike Photoreal、Stable Diffusion 1.5、Anime Diffusion (Eimis)和 Openjourney Diffusion。其中 Photoreal 可以生成如照片般真实的图像，Anime Diffusion 是二次元画风模型，大家在使用的时候可以多做尝试，找到符合自己需求的模型。Dreamlike.art 内置的的 5 个模型Dreamlike.art 的图像生成速度很快，10 秒左右就能生成 5 张高质量图像。将鼠标悬浮在图像之上可以进行进一步的操作，比如下载、收藏、生成变体、画面升级加强等。Dreamlike.art 官网上说其功能永久免费，但是这个免费并非是无限制的。每个新用户的账户上会有 100 学分，用于免费生成图像。如果余额低于 100 积分且用户在过去 48 小时内在线，官方会每小时在余额中添加 1 个积分。如果有用户在访问你的个人资料或帖子后创建了帐户，你的账户也可以获得 100 个积分。此外参加官方日常举办的日常挑战也可以获得积分奖励，最佳作者可以获得 3000 积分。官方活动举办社区： https://discord.com/invite/QyGR2FxsKU （需搭梯子）官方 discord 社区内的每日主题挑战界面很多想使用 AI 绘画工具的小伙伴刻可能都感觉写英文提示词是比较困难的事情，这里给大家推荐 2 个超好用的提示词网站 PromptHero 和 urania.ai，搭配翻译软件使用可以慢慢掌握如何写出好的文本提示词。PromptHero 里收录了海量 AI 生成的图像及其文本提示词，并分为建筑、3D、二次元、照片风等多个门类，大家可以在其中翻找符合自己要求的图像，复制其提示词并做一些修改，就能得到相似的结果，给你一秒变大神的惊喜感。urania.ai 则收录了多位知名艺术家的风格在 AI 图像生成模型中的效果图，在提示词中加入该艺术家的名字就能形成对应的效果。PromptHero 官网： https://prompthero.com/ ( 使用梯子速度更快)urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)以上就是今天为大家推荐的 AI 绘画神器 Dreamlike.art，非常适合想了解 AI 绘画工具的小伙伴。喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~Dreamlike.art 官网直达： https://dreamlike.art/create （使用梯子速度更快，需注册账号）模型地址： https://huggingface.co/dreamlike-art/dreamlike-diffusion-1.0使用指南： https://dreamlike.art/guidesPromptHero 官网： https://prompthero.com/ (使用梯子速度更快)urania.ai： https://www.urania.ai/top-sd-artists (使用梯子速度更快)推荐阅读：字节、腾讯也玩起AI绘画了，效果还非常不错！大家好，这里是和你们聊设计的花生。阅读文章 > 手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结AI画画，无疑是当下最火热的话题之一。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/dreamlike-art
声音 环境 画板 我最近入手了 VR 设备，体验大大超出预期，难怪老罗觉得 VR 是下一代硬件平台，我觉得还真的有可能。在 VR 中有很多新奇的交互体验，视觉冲击感强，所以我对 VR 设计具体怎么做，充满好奇。不管你将来做不做 VR 设计，其实都应该了解一下，作为设计的广度，拓展下知识面也是必要的，万一哪天就要做了呢？就像多年前的 UI 设计一样，所以这篇文章值得点赞收藏。之前也有写过 VR 相关文章，结合起来看效果会更好。同样超干货，值得一读。用一篇超全面的文章，让你掌握VR设计的基础知识本文旨在向不了解 VR 设计的人介绍一些基础概念（资料来源于谷歌和一些其他机构）。阅读文章 > VR 应用具有非常直观的 UI 界面，与可穿戴设备、手机、平板、PC 上的应用类似，使得大众能够使用 VR。想出新颖的交互会比较有趣，但它却增加了用户的学习曲线。类似于 2D 界面，VR 设计师会用大小、对比和颜色设计出界面层次结构。在 VR 里，大小取决于用户和内容之间的距离，因此了解内容的大小和适当的观看距离至关重要。比如，知道要设计多大的字体是很棘手的，但幸运的是，在现实世界中有很多先例。在为 VR 设计内容时，对印刷设计（广告牌、海报、书籍）也需要类似的思考，对 VR 设计有借鉴意义。考虑下你现在是如何与一个触摸屏进行互动。我们必须慢慢去学习理解许多模式，比如滑动、捏缩放，长按出现更多选项。这些在做 VR 设计时也必须要去考虑好。我相信随着越来越多的设计师进入 VR 领域，将会有更多的想法来创建和打造新的 UI 模式，从而帮助行业向前发展。一、视野视野，或任何给定时间可观察环境的范围，是设计 VR 界面时非常重要的一个方面。更宽的视野，用户在体验过程中的沉浸感就更强。有 2 种类型的 FOV 共同作用形成人类视觉。单眼 FOV 描述的是我们一只眼睛的视野。对于一只健康的眼睛，单眼 FOV 的视野水平在 170-175，包括从瞳孔到鼻子的角度。鼻前视野 FOV 通常为 50-65，对于鼻子较大的人来说较小，而从瞳孔到头部一侧的视野为颞 FOV，其较宽，通常为 100-110。二、新建 Figma 文件1. 画板当做 VR 设计时，我使用的画板尺寸为 3600x1800（360 度），然后我绘制出完美的 FOV 区域来集中主要设计。2. 消失点在透视理论中有一个消失点的概念，这个概念在 VR 设计中很有用，因为它能帮助设计师在设计软件中创建一个便于感知深度和距离的参考。我总结了一种在我的设计中创建消失点的方法，通过在一个圆内以 10-15 度的角度画分隔线。之后，我将线条引入画板，并拉伸线条，直到它在框架内。完成后，将以连续间隔的直线放到画板中。（彩云注：这个方法也很适合用到画透视线中）3. 选择主题并丰富背景一旦消失点画好了，主要的参考线已经变明朗了，接下来就取决于你想如何在环境中发挥创造力。大多数时候，我使用渐变来创建天空和陆地等效果，然后添加了气泡、结构或使用形状的建筑物，这为环境添加了很多细节，使其感觉更 3D 逼真。4. 设计 UI到这一步的时候，你可以基于产品目标开始设计 UI 了。在设计 VR 时，对比是最重要的，因此，尽量减少文本和背景周围的颜色。通常，背景一般是半透明，在 UI 设计中一个白色背景最好适配深色环境，而对于深色背景最好适配白色环境。按钮通常包括两种形式，主要按钮和次要按钮，颜色保持简单同样是最好的。5. 布局与桌面和手机的传统 UI 设计不同，在 VR 或者 AR 中，嵌套导航保持在同一环境中，而界面框架利用了环境中可用的巨大空间。只有当有新的游戏场景可供探索时，环境才会发生变化。其他时候，也可以实现弹出窗口，新层叠加在旧 UI 之上。6. 使用 XR 工具创建曲面 UI仅用 Figma 就可以了，设计工具这块原来就足够了，有一种快速简单的方法来设计原型 3D，VR，AR 界面。有一个插件叫 3D UI Generator，能够自动缩放和调整任何图形，画板以创建 3D 界面和环境。它支持旋转、斜切、缩放、远近、FOV、曲面程度和等距视图。在 Figma 上可以安装 3D for XR： https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR7. 声音用户体验虽然在使用网页或 APP 时，声音往往很烦人，但它是 VR 开发不可或缺的一部分。考虑通感现象，其中一种感觉的刺激导致另一种感觉自动触发。例如，你闻到一些东西，就会产生味觉错觉。这也适用于声音。由于 VR 中仍然缺乏触觉反馈，因此当用户触摸物体时，声音是提供反馈的一种很好的方式。3D 声音（又称 Holophonic 声音）仍处于起步阶段，但将对我们体验 VR 的方式产生变革。我们都习惯于立体声，它提供来自两个声道（左/右）的声音，但全音可以让我们分辨声音是来自上方、下方还是后方。想想当你在外面听到飞机的声音，你凭直觉向上看，对吗？在 VR 中拥有这种声音体验将使用户真正身临其境。三、总结这是 VR 设计最基本的底层原理。这几篇 VR 相关文章一起看完，总算让 VR 中的设计不再神秘了。元宇宙是未来发展一大趋势，不少人都想上这趟车，VR 设计就是最靠近这一趋势的领域之一，VR 设计师这个岗位在将来会越来越紧缺。更多VR好文：Facebook设计师：从VR设计实战中总结的5个设计思路@C7210 ：本文来自 Facebook VR 团队的设计师 Gabriel Valdivia，为我们讲述了Facebook 360这款备受关注的新产品诞生背后的一些设计思考与经验心得。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/vr-design
插画 用户 风格 漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。如今插画独特的属性魅力，造就了其在设计中的新趋势。 鲁迅先生曾经说过：“在书本里边的插图，装饰了书籍，增加了读者兴趣，而这种无形的力量是文字所不及的。”更多设计史科普：用一篇文章，帮你掌握美国平面设计史在 20 世纪 30 年代时候“图形传达系统“传到美国，对美国地区的平面设计产生很大促进，我们今天的话题就需要将镜头移到美国。阅读文章 > 一、插画的源起发展将其划分为五个时间节点，分别为源起，开端，探索，发展，变化。 在漫长的时间线里插画随着时代、文明、科技的变化，以不同的创作形式传递创作者的思想。插画的源起，要从公元前 15000 年阿尔塔米拉洞穴彩色野牛头绘画说起，其次重要的是埃及的《死者之书》，这是公元前 332 年发现的纸钞草绘画作品，为什么说很重要呢？因为它是最早以插画形式完整展示的叙事性内容。死者之书也称为“通往光明之书”。段落是依照死者生平而撰写的，对其中画面感兴趣的也可以看看最近漫威新上映的英雄剧集《月光骑士》，里面后三集的一些情节和死亡之书有契合之处～，比如男主两个人格（马克和史蒂文）的心脏再和天平秤量的时候，因心脏都不完整无法在天平上保持平衡。这一设定死者之书中也有绘制，这源于古埃及神话：当一个人去世后，为了证明自己无罪，用玛特的羽毛和死者的心脏称量，如果心脏比羽毛轻即为无罪。反之则有罪。（Ma’at 玛特）「古埃及真理和正义的女神，其象征物为鸵鸟羽毛。」1. 插画的开端公元 5-15 世纪为插画的开端，这里主要着眼于两处，一是中国隋唐五代时期出现的为印制而雕刻成版的版画，这也是世界上发现最早的版画记录，二是欧洲，此时欧洲插画主要应用于宗教领域。呈现形式为刺绣和手抄本.2. 插画的探索15-17 世纪，插画进入了探索阶段，下图第一幅作品—火之圣母是欧洲记载最早的版画。1440年从欧洲的角度而言标志着插画艺术的真正开始，缘由为德国人古腾堡发明和建造第一台活字印刷机，由此插图版画在书籍中广泛运用。16 世纪文艺复兴时期，德国画家丢勒，使得欧洲木刻达到了顶峰。17 世纪巴洛克时期的鲁本斯对于木刻进行再次探索。3. 插画的发展18-19 世纪属于插画的发展阶段，这里首先提及英国 18 世纪的三位画家，分别是：威廉霍加斯、托马斯比维克、詹姆斯吉尔雷。第一幅《堕落过程》为霍加斯的系列作品，一共有 8 副，记录了伦敦社会中一位年轻绅士的腐败以及最终毁灭，讽刺当时英国贵族奢侈糜烂的生活。整个系列也被称之为叙事插画最伟大的成就之一。第二幅为《四足动物史》，作者比维克一生都在为伊索寓言绘制插画。最后一幅作品描绘的是英国首相威廉皮特和拿破仑瓜分全球，作者吉尔雷，他的蚀刻版画因其尖刻的政治讽刺而闻名。比如说现在的微博大 V 乌合麒麟他的绘画作品也多为社论和政治讽刺，最为大家所了解的是孟晚舟女士回国这张作品，在推特和 ins 上能看到很多相关社论插图，以下几张。发展阶段，纵观日本和中国仍然偏爱木版印刷，并且保持极简主义。葛饰北斋，是这一时期中最有成就的。简约清晰的线条以及全彩制图使他打破了木版绘画的局限性。代表作为《富岳三十六景》。此外在发展阶段必须要提及三次技术革新。第一次是 18 世纪平版印刷机的发明，在整个印刷过程中，可以在印刷运行中单独添加色彩以获得全彩效果。第二次技术革新是摄影技术的发明，1826 年尼埃普斯拍摄了现存最早的照片，但实际上 1839 年由其合伙人达盖尔才真正发明了摄影技术，这对古典艺术，写实类肖像画产生了一定的冲击，但由于最初的摄影技术只能拍摄黑白照片，所以对于彩色插图而言并有有形成太多的冲击。第三次革新为 19 世纪中叶，报纸在整个欧洲兴起。插画的叙事性为新闻增加戏剧性。由此出第一个标志性的漫画人物 Aly Sloper「盟友斯洛珀」诞生，围绕盟友斯洛珀塑造了很多新闻事件插图。4. 插画的变化20 世纪插画到了不断变化的阶段。从两个角度去看，一是变化的主要原因，二是不同风格的原因。接下来重点看一下有哪些插画风格在变化阶段应运而生。① 复古怀旧浪漫主要代表人物有 拉克姆 和 杜拉克 以及浪漫的乡村主义 波特（细致的水彩插图）波特笔下的兔子后期改编为电影，就是大家所熟知的《彼得兔》② 漫画的革新改变漫画形式为「乔治赫里曼」。在他的创作中，线条松散。构图上运用时间和空间的概念，表现出超现实的视觉幽默。上图《疯狂的凯特》通过洞的不同方向，以及夜晚白天来表达空间和时间的变化。到了六七十年代，比利时插画家 愛弗米倫，他的风格更为时髦犀利。③ 战争宣传海报一战期间，插画被应用到战争中，比如招募男性士兵、保护妇女儿童。二战期间，插画主题多为压迫犹太人，以及美化德国的民族主义。④ 装饰现代主义要提及四位著名的插画师。首先第一位新艺术运动的代表人物 穆夏，他抛弃传统装饰风格，使用大量自然元素作为装饰，优美的曲线来描绘女性。从小提琴手到顶尖插画师：穆夏大神炼成记上一回我们聊了 “维也纳分离派”这群叛逆青年的故事，其中著名的象征主义画家古斯塔夫跟建筑师霍夫曼两人的设计风格是此流派的风格基因，主要特点是简约的几何化构图以及富有象征意味的装饰图形。阅读文章 > 第二位 比亚兹莱 他的画风受日本浮世绘等风格的影响，具有强烈的个人风格，尤其是对线条的出色运用和黑白画的创造性成就。第三位 卡桑德尔，第二次工业革命以后，人民对现代性发展有了广泛的接受，卡桑德尔在他的作品中，打破了几何边界的界限，并且有较强的设计感。第四位是被誉为“发明了现代杂志设计的整个构想”的 克里斯蒂安 ，他为当时的《星期六晚邮报》制作了三百多个封面。1967 年嬉皮文化到来。由时代音乐及地下生活方式的影响而创作的色彩鲜艳的的迷幻图像（看起来像是一场对装饰艺术风格的革命），但是并没有转化为主流，到七十年代初，就几乎销声匿迹。⑤ 极简主义美学代表风格为萨普拉卡特风格，这种风格的先驱 霍尔温，作品中较少的几何形体、醒目的字母、形状最大简化等，对极简主义美学和海报化做到了很好的探索。⑥ 电影和动画真人电影和动画电影诞生于维多利亚时代晚期。到了 20 年代，它们已经主宰了娱乐界，此时摄影技术还没有很完善，所以制作海报的几乎都是插画。代表作品《大都会》《爵士歌手》。展示了插画在电影海报中的妙用。20 年代，第一位动画明星「猫菲利克斯」诞生，实际上后来很多的 IP 动画形象都有参考其模版绘制，包括米老鼠、猫和老鼠。1937 年：迪士尼，发行了第一部彩色长篇动画《白雪公主》此时除了动画师，还有数百名的概念艺术家、角色设计师。1938 年最初创造的超人形象登场——动画也向全新的流行艺术发展。⑦ 儿童绘本1928 年儿童插画家 万达加格 出版的《数百万只猫》被公认为是第一本（绘本）。打破了原有图书文字排版和插图之间的关系，取而代之的是更多的由有趣的插图，文字只是为了支撑图像。但此时儿童绘本并没有被更多用户接受和理解。一直到 1963 年 森达克 创作的《野生动物在哪里》强化了儿童绘本在用户心中的心智，这也是儿童绘本的里程碑。⑧ 超现实主义幽默第二次世界大战以后，插画师 阿兹巴舍夫，创作的图形风格惊人，在机器上显示出明显的人为属性，有超现实的黑色幽默。⑨ 奇幻画派六七十年代，摄影逐渐取代插画成为媒体视觉表达的主要方式，比如杂志的封面多为摄影拍摄，但由于摄影不能拍摄不存在的东西，所以幻想艺术蓬勃发展（科幻小说、漫画、儿童绘本）奇幻画派的先驱 弗雷泽塔 创作了很多肌肉发达的英雄，已及奇幻元素。当代游戏概念艺术都受到他的 影响。⑩ 数字艺术80 年代个人电脑革命兴起——数字技术发展迅速。 设备也不断更新比如：手绘版、iPad。综上所述可以发现，插画风格是多样的，而背后的原因，除了插画师本人的经历、喜好、价值观等主观原因，更多的是受时代背景、流行文化、社会环境、历史事件、以及绘画技法、等客观因素的影响，才慢慢演化为当下自由、多元、包容的插画创作氛围。二、商业插画被广泛应用的原因从六个方面来看，分别是商业插画的概念、应用场景、应用背景、插画本身的优势、市场和用户需求。艺术创作没有目的性，但是商业插画的目的性非常强。商业业插画一般承接了用户和市场的需求，深受当下的流行文化影响。插画的应用场景有很多，归类来看分为以下六种：从四个角度看插画的应用背景：商业化的发展及视觉文化传播方式的广泛应用人的思维模式从语言文字为主的理性主义形式转变成以图像为主的感性主义形式文化形态的传播方式从语言文字的生产、传播、消费转变成视觉图像的创作、传播和消费信息时代的不断发展，电脑等电子设备已经成为时代发展的标志插画本身的优势有几点：从市场需求的角度来看，市场需要通过插画广告刺激消费，提高经济效益，其次强化宣传提升品牌传达：从用户需求的角度来看，互联网信息时代，用户在接收复杂繁多的广告信息的同时，需要更好的视觉体验来提高审美，其次用户也希望从中产生一定的情感共鸣，获取到情绪价值。三、插画在 UI 设计中的优势和应用场景优势有以下6点：1. 信息可读性与高记忆点从用户角度来当前界面，可以简洁直观的通过插画 get 到花不同的钱可以享受到的不同服务。2. 叙事性激发用户交互美国的 Mailchimp 网页端用插画的方式，引导用户认识产品并如何使用产品，更好激发了用户进行交互操作。3. 强化品牌识别通过 IP 的插画设计，不断夯实品牌的用户心智。4. 强化界面的美型提，升用户审美5. 插画的定制感与独特感增强用户的分享欲望6. 建立信任插画的表达方式更能与用户拉近距离建立信任。插画在 UI 设计中的应用场景，分别有以下这些：1. 新手引导比如转转知乎在新手引导时都选择插画的表现形式，提升用户对产品的好感度，已及降低对产品的学习成本。2. 新功能提示降低用户学习成本，拉近与用户之间的距离～3. 品牌宣传Goole 的 web 端每逢节日便会有围绕 goole logo 来进行节日主题插画的创作，很好强化品牌的用户心智。4. 登录页众多产品都在登录页使用插画的表达形式，更容易于用户产生情感连接达到品牌触达。5. 插画组件Ant Design、自如都构建了自己的插画组件，有助于统一的视觉风格传递。6. IP 设计这可以很好的赋予品牌生命力，提升品牌的温度，更好的触达用户。7. 奖励机制和榜单在一些奖励交互动作时，通过插画形式传达正向反馈，提升用户情绪价值。8. H5 的主题分享最近几年产品都会有年度报告，很多都以插画的形式表现，插画的定制感与独特感增强用户的分享欲望，用户通过分享建立自己的社交货币，满足用户的社交需要。从插画的发展、商业插画、UI 设计中插画的应用三条脉络做了简单梳理。希望对您了解插画应用插画有一定的帮助。感谢浏览～Thanks与《小王子》作者合作出书：顶尖黄书插画师奥布里·比尔兹利上一回我们讲述了法国新艺术风格的代表设计师穆夏，他以绘画见长，成长阶段遇到不少贵人，最后练成自己独步天下的画风，至今仍然有不少品牌会以致敬方式复兴这种风格。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/history-of-illustration
情绪 工作 需求 经常听朋友们抱怨“上班如上坟”，我自己也是如此，但随着工龄的增长，我的“上坟感”无论从频率还是时长上都显著减少了，究其原因更多是心态和沟通能力上的成长。今年看了两本讲述职场的书，分别是李诞的《脱口秀工作手册》和杨天真的《把自己当回事》，今天想结合书中的部分观点，分享几个让工作变“简单”的小技巧，希望能帮大家减轻上班的“痛感”。降低焦虑干货+1：设计师职场焦虑怎么办？我总结了这4个方面！前言：越来越频繁的听到同龄人对工作前途的焦虑，30+的年龄在互联网公司就算你是 leader 或者专家级的岗位，失业后再次找工作的过程也是非常坎坷。阅读文章 > 一、可以有情绪吗常被教育“有情绪”=“不专业”，但我想，我们中的大部分人都无法将情绪与工作完全剥离。情绪无非来自一些工作阻力、压力或沟通时的冲突，既然不可避免有情绪，那不妨掌握一些面对情绪的方法：1. 处理情绪一旦发现自己有情绪了，不妨先暂停。如果是源于沟通产生的冲突，可以先记下双方分歧点，各自再回去找找资料，想想解决办法，约个下次同步进度的时间。如果是工作压力，就买点好吃的，睡个好觉，和朋友抱怨抱怨，看看工作之外的事物。先保护好自己的情绪，才能更好地投入工作。2. 表达情绪暂停重启后无非两种情况，若是一时冲动，就继续投入工作，如果仍然觉得这件事不对，那就好好表达。可以和领导或合作方说，你认为这件事情哪里不应该是这样的，这样做让你不适/委屈/难过，怎么做的话你觉得会更好，如果你不知道该怎么处理，也可以直接问：“我不知道该怎么做好，但我想解决这个问题，你有什么建议吗？”。如果你实在是情绪到达极点了，虽然不建议，但偶尔通过生气、哭闹释放出来或许也能解决问题。李诞在手册中说，在新人时期，生气、哭、都没有问题，你表达了情绪，其实也是在向领导和合作方表示你对工作的认真，对问题的重视。3. 不能一直拿情绪当武器虽说要表达情绪，但在表达的时候要切忌拿情绪当武器。如果你说“要这样我就不干了”很可能可以解决当下的问题，但这种解决方式一需要依靠对方的共情力，二对你沟通能力的提升没有任何帮助。别人可以因为认可你的态度或同情你的遭遇，妥协一次，但不可能次次依靠态度解决问题。况且，当你把情绪当武器时，也会伤害自己，如果你只能通过生气推进工作，那你的工作最后会只剩下生气。更好的方式是厘清原因，如果是表达问题，通过理性客观的说服替代情绪武器，如果是环境问题，可以对流程提出优化建议，靠流程来解决。4. 情绪不是被操控的杨天真在书说到：“如果有个人过来对你说：‘你控制不了自己的情绪，就说明你还不够成熟。’那么我会认为这个人根本就不懂得沟通”。所言极是，懂得沟通的人都明白只有情绪稳定才能更好地推进工作。情绪是被保护的不是被操控的。我们说不要拿情绪当武器，其实也是在保护对方的情绪。如果一份工作需要你不断地压抑自己或用情绪做武器，而对方完全不在乎你的情绪，或指责你不会控制情绪而不去解决情绪背后的问题，那说明你处在非常恶劣的职场环境中，接下来该做什么我就不多说了。二、主动沟通，保持客观上文我无数次提到沟通，但具体要怎么沟通呢？我发现即使是工作了很久的朋友，也经常陷入：遇到不公 难受/生气 找朋友吐槽 被建议去沟通 不敢沟通 不了了之 遇到不公 难受/生气...这样的死循环中。为什么不敢沟通，无非就是怕关系闹僵、怕暴露问题、怕意见冲突。然而我想说的是，意见冲突是工作的必然，关系问题可以通过沟通技巧解决，而暴露问题是解决问题的最好方式之一。1. 意见冲突职场分工一定有它的合理性，既然我们做这份工作，拿这份钱，就是要说在这个岗位上该说的话的。岗位分工就是这样，需要多方的声音来对冲，方案都是在磨合的过程中产生的。而且也需要每个人为了这个岗位需要坚持的“执念”发声，才能达到最好的解法。只要表达清晰客观，这种冲突就是好的。至于在意见冲突的情况下如何表达，不妨想清楚这几个问题：设计依据是什么？设计方案对用户有什么好处，对产品有什么好处？对方的工作诉求是什么？他的权利范围和边界在哪里？他是否有决策权？他所提出的要求是在他的工作范围之内还是之外？如果我不能满足他目前的要求，我有什么备选方案可以提供？2. 暴露问题很少有项目能一帆风顺地进行，遇到磕磕绊绊的时候，年轻的朋友总是习惯独自处理好，假装无事发生，做好了的情况下事倍功半，做不好的情况下就成了背锅侠。更好的处理方式其实是及时汇报：当前的进度到哪了？遇到的困难是什么？接下去打算怎么解决？既能让领导知道项目的困难程度，也能及时纠正解决思路，保证项目如期完成。如果是上线后才发现的问题，汇报方式也是分三步：造成这个错误的原因是什么？我的解决方案是什么？我用什么方法让这个错误以后不再发生？诚然，我们可能会面对能力的质疑或问题的指责，但及时沟通暴露问题既是分摊责任也是更快解决问题的方式。只要你提前找好解决方案，这些问题都会是你项目经验上的闪光点。3. 保持客观如果是遇到“人”的原因受了委屈不敢沟通，一个最简单的办法就是提事不提人。比如与你合作项目的设计师偷懒又不听劝导致你必须付出额外的工作，你可以这样反馈：这个项目设计人手有点不足，我已经尽力在加班赶进度了，但我担心这样下去可能会影响上线计划，是否可以多派个人手。这样既表明了自己最近持续加班的情况，暴露了上线风险，申请了人力，又没有指责同事。同理可以适用于其他职场关系的场景，核心就是客观，不说负面话，提事不提人。一些职场成功学总是会建议大家在职场中保持真诚，但不得不说真诚是需要超高的情商加持的，如果无法保证自己的真诚不被误解、不误伤他人，可以试试保持客观。三、接受有意义的失败当然，沟通不能解决所有的问题，总有沟通失败的时候，这时我会建议你放平心态，顺其自然。1. 理论是持续发展的虽说设计有一些既成的理论，诸如要保持一致性，标签应该是那样，面板应该是这样。但事实上规范是人定的，理论是总结出来的，拉长时间线看，理论是会发展的，规范是可以被讨论的。举个例子，以前我接收到的理论是 action sheet 和 activity view 是两个不一样的组件，面板不能叠加面板，而随着发展，action sheet 和 activity view 的边界开始变得模糊，苹果系统也开始出现了面板叠加面板的交互。坚持已有的规范或理论，或许能产出设计上定义的正确方案，但如果“设计正确”并不被当前阶段认可，适当的接受“创新”也未尝不可，在碰撞过程中我们或许就能触碰到原则的边界，理解规则定义的原因，探索现存规则的局限性，这些都能帮助你对专业有更深的理解。2. 重要的是经验而不是这个需求很多朋友会担心，这个需求做不好，会影响以后整理作品集，也无法展示自己的能力。其实大可不必这么焦虑，按每两周做一个需求来算，我们一年会做 26 个需求，其中只有 2-3 个需求能被我们放入作品集，加上我们和面试官之间存在着信息差，完全可以摘取出最好的 2-3 个需求，利用信息差整理出一份出色的作品集。我们做设计的目的不单单是把当前这个需求做好，更重要的是通过做这个需求磨练自己，成为一个优秀的设计师。适当地接受有意义的失败，当你明白原来这样做会造成那样的结果，这样是合适的而那样是行不通的，你就会成为一个什么需求都能兜得住的设计师，就能把每个需求都做好，甚至可以把做得有瑕疵的需求以完美的方式表达出来，也能回答上所有的质疑。3. 这只是一份工作很多人会瞎操心业务或公司的死活，觉得自己这个按钮没做好这个需求明天没上线这个业务就被我搞砸了，大可不必！这只是一份工作，关注自己，你要成就的是你这个人，不要把自己和公司的命运绑在一起，公司和业务的好坏应该由拿着这份工资的人担这份责任。甚至这个需求都不属于你个人，不要过多地干涉，你要做的是通过完成公司的项目实现自我成长。你是且只是自己事业的第一负责人，不要把自我成长的责任强加在公司上，更不要瞎揽壮大公司的责任。欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/3-career-skills
内容 年终总结 工作 2022 马上就要过去，又到了写年终总结的节点。那些跃升飞快的职场达人，早就掌握了年终总结开挂技能。如果你在年终总结中还有以下问题：不能让给上级留下清晰的印象；不清楚如何有效地组织和呈现一年的工作；不知道怎么能将年终总结写出彩；总结效率很低、输出过程很痛苦……那么这篇文章就是为你量身定做。你将获得一套年终总结的万能公式，它能帮助你高效地完成工作梳理，有条理、有重点、有亮点、有计划地完成总结输出。模板参考：不知道如何写年终总结？收下这份速成攻略（附实用模板）想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…阅读文章 > 一、年终总结的意义在落笔之前我们首先要明确：为什么要写年终总结？很多同学容易把总结这事儿当成负担，觉得平时也有周会和月会总结，为什么还要专门花大力气做年终总结呢？其实可以从两点看它的价值。对于我们自身，年终总结可以帮助我们复盘这一年都做了什么事情、有什么亮点与不足、有哪些成长等，为我们今后的进步指明方向。而上级通过你的总结，可以更清晰地了解我们的能力和对于团队的价值，也为日后升职加薪提供了依据。此外，如果你想获取某些方面的资源、获得领导的支持，年终总结也是一个非常不错的契机。对于团队，年终总结不仅能够系统性地向上级和团队成员展示你在这一年/半年内的工作内容，而且这些内容也能够在一定程度上反映你所在业务/项目的整体情况，比如所在阶段、核心项目、重点方向、未来计划等等。了解这些信息，对于团队后续的资源配置和工作重心都具有十分重要的意义。二、总结内容的准备总结输出的内核，是丰满充分的内容，也就是我们一年的工作产出。而一年产生的工作内容体量相对庞大，里面有大型的重点项目，也有工作琐事，有体现你创新能力的，也有体现你的协同组织能力的……如何把大体量又各有特点的内容高效有序地整理出来呢？可以使用「纵横整理法」。1. 「纵」罗列纵坐标是你做过所有事情的罗列，我们可以按照时间的维度去梳理做过的事情。大部分设计团队/设计师平时都有写周报/月报的要求/习惯，我们就可以直接在此基础上查缺补漏，可以节省很多时间。梳理完成后，把这些内容按照输出形式进行分类，如：项目、研究、活动、分享等。2. 「横」梳理横坐标是各个内容的属性标注，这一步对形成整体结构具有至关重要的作用。这里的属性包含但不限于以下这些：① 事件维度_基础信息包括事件本身的重要性、周期、上线/完成效果、突出亮点等。② 事件维度_参与信息包括你的参与程度、个人价值/贡献、运用了哪些设计方法等。③ 个人维度_能力提升看看哪些工作内容，让你的以下能力有明显的提升/突出的表现，包括：专业能力、沟通能力、创新能力、统筹组织能力、管理能力、影响力、人际关系（与合作部门形成融洽/高效的合作机制，有效避免/化解矛盾等）等。3. 「炼」提炼与归纳通过以上梳理，一年工作内容就以非常直观的方式展现在我们眼前了。因为年终总结需要在较短的时间内做到有效传达，所以我们必须要把精力放在「有价值」的内容上，这时候就需要我们提炼出高价值度的内容，过滤/弱化掉价值度没那么高的内容。上一步梳理工作内容属性，能帮助我们轻易地评估出哪些是高价值的（如重度参与的/设计价值体现度高的/能集中体现个人某些能力的项目 1、研究 1、活动 1、分享 1）以及价值度低的（如参与程度低的/各方面都表现平平的项目 3、活动 2）内容。其次，结合自己的角色对专业产出进行分类，确定需要总结汇报的项目都被分类进相应的版块；最后，对版块进行排序，可以以项目为主线体现多个维度的价值，也可以以业务目标/团队目标为主线，用不同的项目来体现。为了方便理解，我们以 2021 商业服务设计（半年）总结案例为例展开。首先，整体内容有一个大的分类，包括：服务生态搭建、设计研究、工具产研等。其次，每一个分类下面都罗列出了详细的工作项，同时又用色块重点标注出了价值度高也就是会重点展开的内容，这样既能展现出充足的工作量，又做到了有主次有重点。三、总结的思路与框架最后的总结输出，我们需要一个整体框架把这些内容进行组织和包装。对应开头讲的总结的意义，我们可以分成三个部分：取得的成绩以及经验、总结的教训及不足、未来的计划。1. 「成绩与经验」这部分内容延续上面提炼的结果，对每个项目进行细节阐述，如项目背景、分析的过程、设计的目标、解决的问题、设计的亮点、项目最终的价值等等；其次，项目结束后要主动收集相应的数据信息，以最具信度的形式，具象化设计的价值。另外，善于总结设计方法，对于重点项目能形成一套完整的设计解决方法论，可以复用给更多的设计师，为你的总结增加亮点。2. 「不足与教训」百科对于“工作总结”的定义：把一个时间段的工作进行一次全面系统的总检查、总评价、总分析、总研究，并分析成绩的不足，从而得出引以为戒的经验。也就是说，剖析不足也是总结的关键部分。这部分内容可以从两个方面展开：① 未达成的工作目标对标我们的 KPI 或 OKR，看看哪些工作目标没有完成。如果有未完成的内容，就需要说清楚现在进行到了什么程度，没有完成的原因是什么。② 未实现的个人目标设计之路是一条发展变化着的职业道路，它要求我们不断完善自己的个人能力模型，因此很多设计师都在会年初制定个人发展目标，年底审视自己和目标的差距。如果目标实现情况不理想，则需要分析差距在哪儿，具体原因是什么。最后，针对总结出的两方面不足，分析出改进的办法，并在下一步计划中明确具体的实施方案。3. 「未来计划」未来计划在整个总结中起到承上启下的关键作用，主要包括三个方面：① 前提：贴合公司发展目标和方向。公司的发展是个人发展的前提和保障，拥抱变化，紧跟大方向，个人的计划才有实现的可能。② 关键：要结合总结的成绩和不足，针对性地制定未来的计划。做得好的不骄傲，吸取经验做大做强。把重点放在暴露出短板上，正视它，补齐它。③ 细节：需列举这些目标下具体的操作方法和需要得到的支持。计划不能只写方向，要写具体的执行步骤和排期，最好有可量化的标准。比如你想在新的一年提升个人的团队影响力，那么计划可以这么写：未来半年完成至少 2 场大/中型分享+至少 2 篇专业发文+组织 1 场团队活动。四、小结想要有条理、有重点、有亮点、有计划地完成总结输出，只需要两步：第一步：通过「纵横总结法」高效有序地整理一年所做工作，并进行提炼和归纳。第二步：按照成绩（按照项目分类）+不足（对标工作和个人目标）+计划（有前提、有关键、有细节）的结构呈现总结内容。番外：所有的方法和思路都只是帮你规避基础的坑，让你的总结达到平均分，如果你想有一个更突出更出色的成果，那除此之外，你需要在每一步上以及内容上，整理出更让人印象深刻的设计成果或者思维方式，这个就来自于这一年你是否真的设计有果了。最后，祝你顺利完成年终总结，对未来更有把握和信心。更多年终总结的方法：设计师如何写好年终总结？我总结了4个维度！2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。阅读文章 > 因为我这样写设计总结，所以又被总监表扬了！！很多同学都苦恼，自己虽然专业方面还可以，但经常写不好总结，不善于表达，从而错失了很多机会。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/year-end-summary-4
组件 场景 业务 在 B 类业务里，服务多产品、多角色、体验复杂，设计师该如何做好体验标准化，保障基础体验一致性？下面我将从实战案例同大家分享。更多B端设计干货：B端设计太复杂？掌握这三步帮你理清设计思路！写在最前B 端界面的元素众多，视窗范围大，布局设计多种多样，为了简化布局思维，我们通常给界面添加三个方向上的轴-X、Y、Z。阅读文章 > 一、业务背景以我们 CCO 体验设计团队为例，主要服务阿里体系的消费者、商家、经济体等业务领域。随着业务不断扩大、用户角色多、体验复杂、设计师人力有限、定制化需求不断增加，设计面临严峻挑战。业务多：30 多个产品应用角色多：覆盖消费者、客服小二、服务管理、业务运营、中台管理、客户 6 大类用户群体。体验复杂：设计师需兼顾用户和客户两个视角。从组织上，85% 设计师纵向支撑业务，15% 设计师横向做标准化，反哺业务设计师。标准化实质解决的问题是保障基础体验一致性。二、标准化怎么做核心通过页面梳理、抽象、分发、衡量，保障基础体验一致性。三、案例实战以数据可视化场景为例，讲述如何做标准化。1. 业务现状共有 11 个应用，涉及 89 个页面。2. 问题体验不一致：各个工作台页面架构、组件、样式野蛮生长，缺少规范导致体验不统一。低效：部分场景缺失，组件重复建设，大量定制；沟通协同内耗大，成本高。3. 策略体验统一：框架、组件、样式。提效：代码化、工具、交付机制。4. 体验统一包括框架、组件、样式。① 框架现有页面收集用户场景分析：页面归类：结合用户看数内容（例：概览、分析、详情）和交互形态（例：平铺、下钻），对页面进行归类。通过统计高频复用形态，确定典型布局。② 组件页面结构分析组件的收敛，需要先对页面分析，确定模块层内容。例：模块包含页头、筛选、图表、表格。模块层分类横向收集全部业务，将模块层分类。细分模块扩展形态，放到对应的篓子里。模块专项治理接下来，需要对每一个模块进行专项治理。比如图表模块，再拆再抽象成指标、图表、单选、多选 4 类场景。场景里再对主体和变体（也就是扩展形态）分类。③ 样式确定优化内容围绕视觉凌乱，要做的便是完善设计语言。设计师需要结合自身技术底层，补充缺失规范。例如布局、色板、字体、动效。确定组件范围通过统计高频复用组件，确定需要梳理的组件范围。布局图例位置：线上有 9 种，通过从业务场景按阅读顺序划分，最终收敛成 2 种。组件高度：真实线上情况，只能看 2 个指标，高度规范缺失。需要根据用户分辨率调研，提炼典型分辨率。比如用户是 win 系统，包含菜单栏、任务栏等默认高度，再减去本身页面页头等默认高度，得到 3 档。确定组件建议默认行高 240px。轴标签旋转角度：现状有顺/逆时针两种，通过分析标签类型，结合阅读顺序、轴与标签亲密度，确定默认角度为顺时针。色板通过场景梳理，确定不同组件使用的色板类型及缺失色板。补充语义色板：从业务里抽象 2 类场景，指标和柱/饼/环场景，定义颜色。例如带正面语义，用绿色，比如升、已到岗、正常。带负面语义，用红色，比如降、旷工、失败。字体结合自身业务场景问题，从场景、版权、风格、识别、极值共 5 个维度选择字体。举例场景一，纵向数据场景里，将市面上数据竞品用到的字体都横向铺开尝试，做排除法。比如 din 没版权，苹方非等宽字体，普惠 102 识别性弱。举例场景二，在核心数据呈现中，helvetica 品牌风格弱，普惠在 1 亿以上极值过宽。最终我们根据自身业务场景特征，用普惠和普惠 102，运用在对应场景里。并同前端提炼规则。动效首先，需要确定动效价值，明确动效需要解决的问题。这里围绕舒适度、活力、层级、反馈来讲。通过动效场景链路分析，确定优化范围。加载动效：围绕让用户认知过程更为自然。通过组件横向梳理、抽象图形、组合样式的思路，输出方案。比如这里共梳理 17 种组件类型，抽象成 9 类，包括点、线、面、饼、环、柱、文本、图标、词云，再进行组合产出方案。出场动效：通过业务分析、提炼场景、优化效果。比如这里共提炼 3 类场景，有通用、监控、舆情。围绕过渡不自然、卡顿、缺少情感化表达来优化效果。浏览动效：通过提炼场景，来强化元素之间的层级与空间关系。比如单个组件、联动、下钻场景下，围绕点击感知弱、重点不突出、缺少悬停态来优化效果。沉淀速度参数：将优化动效场景的速度参数，同前端约定规则沉淀组件库。5. 提效包含代码化提效、工具提效、机制提效。整体思路从设计组内到技术产研的提效过程。提效面向用户依次是：组件设计师、业务设计师、前端、产品。搭建目前还在进行中，这里主要从交付-工具-代码化来分析。交付内容业务设计师：sketch/figma 物料 (样式、组件、区块、模板、规则 )业务设计师：kitchen 工具（样式、组件、区块、模板）组件工程师：组件规范/组件官网交付机制新需求：通过评估复用性、抽象、内审、沉淀物料。现有业务：通过页面梳理归类、抽象、内审、沉淀物料。6. 衡量从物理到行为层，包括样式、组件、框架、组件交互 共 4 个维度。通过一致性评分衡量标准化覆盖的好坏。四、总结回归课程，在 B 类业务里，服务多个产品、多用户角色、体验复杂的场景下，在定制化+标准化团队阵型里，标准化实质解决的问题是保障 60 分基础体验一致性。总结：B 端体验标准化包括物料的产出、交付以及衡量标准。产出：包括框架、组件、样式的收敛来梳理、抽象页面。交付：面向 2 类用户群体，业务设计，需交付物料和工具。组件工程师，代码化需提供组件规范，组件线上化需助力组件官网的建设。衡量：一致性评分包括样式、组件、框架及组件交互。欢迎关注作者的微信公众号：「AlibabaDesign」本篇来源：优设网原文地址：https://www.uisdc.com/experience-standardization
平面设计 作品 网站 大家好，这里是和你们聊设计的花生~今天给大家推荐一个收录了自 1880 年至今 140 年间平面设计海报的宝藏网站「Design Reviewed」 ，通过它既可以了解平面设计发展历史，也能从不同时期的作品中获得创作灵感，一起来看看吧~往期回顾：创意满满！超7000张海报的灵感网站Typo/graphic Posters大家好我是花生~ 今天向大家推荐一个专注于文字排版和抽象图形类的海报的设计灵感网站 Typo/graphic Posters。阅读文章 > Design Reviewed官网直达： https://designreviewed.com/官方推特： https://twitter.com/DesignReviewed官方 Instagram： https://www.instagram.com/designreviewed/Design Reviewed 是英国平面设计师 Matt Lamont 创办的个人公益网站。出于对平面设计的热爱，十几年来 Matt Lamont 一直在自费收集不同时期的平面设计资料并将它们数字化 ，致力于以此方式保存平面设计的历史，并记录上个世纪庞大视觉文化，于是便有了 Design Reviewed 这个网站。网站收录了 1880 年之今 140 年间的平面设计作品。点击网站顶部的“archive（档案）”选项，可以以每 10 年一辑的间隔查看这些作品，其中以 1950-2000 年间的作品最为丰富。按年代一一看下来可以清楚的感受到不同年代之前设计风格的变化，非常有意思。Design Reviewed 内收藏的不同年代的作品（部分）除了按年代筛选，网站内的作品还按用途进行划分，如书籍、杂志、邮票、包装标签、海报、唱片等，还有现在非常少见的、充满年代感的火柴盒包装。单击进入作品的详情页可以看到作品的高清大图，以及它的设计日期、出处、设计者、尺寸等详细信息。从这些作品中我们不仅可以看到平面设计的风格变化，也能在一定程度上感受到不同年代插画风格的发展史。看完了作品，我们还可以看看站内的采访及 Matt Lamont 对特定作品或书籍的解读。非常推荐看看他和其他优秀设计师的对谈，从中我们可以了解设计师的成长历程、受到了什么样的影响、以及一些具有借鉴意义的设计经验，对设计师本身的发展具有启发意义。Design Reviewed 收录的采访内容（部分）以上就是今天为大家推荐的平面设计灵感网站 Design Reviewed，它的特色在于：收录了 1880 年代-2020 年代 140 年间的平面设计作品，帮助我们了解平面设计发展历史站内资料都是高清大图，类型风格多样，可以获取源源不断的设计灵感官网直达： https://designreviewed.com/官方推特： https://twitter.com/DesignReviewed （需搭梯子）官方 Instagram： https://www.instagram.com/designreviewed/ （需搭梯子）Design Reviewed 的官方推特和 Instagram 每天会同步更新多张网站内作品，喜欢从媒体中获取设计灵感的小伙伴可以顺手关注一下~喜欢本期推荐的话记得点赞收藏，也可以转发给身边有需要朋友 。如果你有关于本文或者设计的疑问，可以在评论区提出，我会第一时间为大家解答 ~本篇来源：优设网原文地址：https://www.uisdc.com/design-reviewed
表哥
飞翔的企鹅
在路上
落霞与孤鹜
