复选框 表单 按钮 在 web 表单设计中，我们会经常遇到在开关、单选、复选框三个组件的选择使用上纠结，特别是只有两种状态下，比如开启/关闭、启用/关闭、显示/隐藏、同意/不同意、默认/自定义….我们发现使用 Switch 开关、Radio 单选和 Checkbox 复选这三个组件好像也都是可以的，这时应该选择哪个组件更合适呢？本文主要探讨这三个组件的基本特点，以及在 web 表单设计中，这三个组件使用上有什么区别，以及常见的场景如何去选择。文章概览Switch 开关 • 它就像是灭霸的响指1. 简要了解开关开关作为仿照物理开关的映射，提供了两种最为简单、直接的对立选项，比如开/关、启动/禁用等。它就像生活中控制灯泡的开关，点击灯泡立即亮起。所以它的意符也必须明确，不然用户都不知道，即将要启动/关闭什么。2. 开关组件的特点1）对象标签名称须传达清晰，能够让用户能够明确感知操作后的动作开启或关闭什么；2）主体标签信息和按钮是分离的，两个视觉焦点；3）一般点击后会立即反馈；4）没有 hovering 效果，有动作效果，更适合手指操作；5）非 W3C 组织官方 html 标记，极端情况不支持 Javascript。3. 苹果公司对开关组件的设计规范苹果的「Human Interface Guidelines」有着这么一份对于开关组件的使用规范定义，我们不妨可以借鉴。1) 避免使用开关控制局部细节或者次要的设置。开关的视觉权重比较高，所以用它控制内容较多更为合适，比如可以将它作为总开关打开或关闭一组设置。2) 通常不要用开关替代复选框。如果我们的规范中定义了复选框，则尽可能保持一致的使用规范。4. 开关使用场景举例通过上述对开关组件特点，结合苹果组件的规范，我们基本可以梳理出以下几条主要使用场景：1）开关的标签意符需传达清晰和单选、复选框不一样的是，因为开关主体的信息和按钮是分离的。用户在点击开关按钮前，必须清晰告知用户点击后会发生什么，甚至有时我们需要通过增加副标题来加以说明。2）一般只为立即生效的场景使用开关按钮在表单填写时，往往最终会有「提交」按钮作为结束态，开关作为表单字段的填写，用户点击后并不能够立即生效，而是需要再次点击「提交」按钮。3）有风险，需着重提醒用户开关的视觉权重较高，在复杂的表单信息中，它能够很快吸引到用户的注意力，并能够给用户以视觉提醒。4）避免大面积使用开关，使用它控制局部细节或者次要设置开关在视觉感知上它和按钮上有些接近，所以尽可能避免在表单中大量使用开关来控制局部层级内容，这时推荐使用复选框来替代开关作为局部。5）把它作为高层级内容控制或信息设置把它用来作为总控制来显示更高层级内容，避免 web 表单中大面积的使用开关按钮，会和其他的基本组件造成视觉干扰。这样可以既凸显其重要性，又能提升用户浏览表单的效率。5. 小结开关按钮就像是灭霸的戒指，视觉突出且反应快。用户浏览表单、填写内容组之间，一般不需要很强的视觉差异。如果填写的表单信息之间对比差异过大，开关往往给用户造成过大的视觉干扰，反而阻碍用户浏览表单的效率。Checkbox 复选框 • 它是一个机器小能手1. 简要了解复选框让用户在两个布尔值之间进行选择，勾选后和未勾选表示“是/否、要/不要、开启/关闭…” 等问题。以下内容主要讨论单个复选框的使用情况。2. 复选框的特点1）为了便于用户快速理解，一般复选框的标签内容是一句话，不会用逗号去作隔开。2）作为单选状态时，操作对象和标签主体内容视觉焦点是不分开的，选择后就知道它被选中了。3）可直接表示标签内容的开启、关闭。3. 场景举例分析1) 用户基本清楚会发生什么，使用复选框如果使用开关或者单选框，我们会发现视觉干扰特别严重，一般表单内容不需要特别去强调每一个字段的开启状态。当然如果排版限制，我们也是可以将复选框放到标签的右侧（放右侧复选框需对齐）。2）表单中的复选框生效，需要配合提交按钮一般情况下，表单填写中，复选框不会像开关点击后立即生效，它需要配合提交按钮生效。所以用户在提交前可查看他们填写的表单，更有助于在信息防错。（Ps. 在设置页，复选框可单独作为设置且立即生效。）复选框的主体标签信息和复选按钮在一起，特别是对于批量填写或设置一批字段，使用复选框效率更高。3）用复选框来控制表单局部细节如上述，如果控制对象的功能是表单的一个局部，或信息内容不是很多，用户也清楚知道选择后会是什么，这时候复选框更适合。这时我们不需要过重的给用户强调什么，用复选框会比使用开关让整个表单的结构内容更清晰。4. 小结复选框就像是一个机器小能手，它的应用拓展性比开关更强，它既可以作为层级内容使用，又可以作为设置项，点击后并立即生效。在表单中，作为局部、或者细节内容控制，使用复选框更合适。它也不会像单选按钮阅读有信息阻断的问题，不会像开关有强视觉干扰，它会让我们的视觉焦点更集中表单信息上。Radio 单选按钮 • 白天不懂夜的黑1. 简要了解单选按钮单选按钮最早的设计模型，来源于收音机切换频道的按键，当我们按下其中一个，其他的按钮就会被弹出，按下的那个按钮就成为了选中的状态。单选按钮可谓是泾渭分明，有你不能有我。2. 单选按钮的特点单选按钮的优点是，将所有信息条件暴露给到用户，它不像开关在使用上带有去猜测、探索的必要。1）每个选择都非常直观，如果希望用户阅读完所有选项，用它再好不过了。2）拓展性更强，相较于开关、复选框的布尔值，单选能承载两个或两个以上选择。3）必须提供默认值，且默认值可以承载内容。3. 场景举例分析1）需要让用户明确知道两者的区别，甚至需要强调两个选项的不同如果采用复选框，用户需要在两个差距较大的选项中去作思考。2）开启/关闭的单选状态，使用复选框复选框对于绝大多数用户都是非常清楚，使用复选框在空间、视觉焦点更是更集中的，所以如果只针对开启/关闭的状态，推荐使用复选框。3）每个选项都关联内容时，使用单选按钮我们知道，如果默认选项设计的好，会让很多人保持选择默认选项。下图这个案例，如果采用复选框或者开关，用户就不得不去探索思考开启后是什么，还要担心理解开启/关闭后带来的影响，而对于绝大多数用户来说，这边的报名设置系统默认内容无需改动。需注意给用户提供的默认选择，一定要是安全、方便的选项。4）较长需隐藏拆分的内容情况，使用单选按钮在表单设计中，如果遇到的内容需要重新组织或者拆分时，选择使用单选按钮。这样不仅能够做到表单信息简洁，也能够提高用户的浏览效率。5）垂直排列单选，信息阅读更佳如果字段名称较长，需要添加副标题加以说明，这时单选按钮承载的信息较多，使用垂直排列让用户有一致的起始阅读线，眼球转动幅度最小，信息获取体验更佳。如果标签文字较少，也可以横排不至于占用太多的垂直空间。4. 小结单选按钮就是白天和黑夜，互不干扰的条件，希望用户阅读完这两个选项，使用单选按钮再好不过了，考虑到单选按钮提供的默认选项，提供的要是绝大多数用户需要的，且是安全方便的，如果单选按钮标签文字过多，在排版时垂直排列拓展性更强，阅读体验更佳。全文总结开关更像是一个灭霸的戒指闪闪发光，不过在表单结构、各种控件内容较多，需要页面清晰、避免过多的视觉突出，所以尽量避免让无数个戒指闪亮中表单中。复选框它更像是一个机器小能手，适用和拓展性极强，即可以单独作为设置，不用配合其他提交按钮，也可以作为表单填写的一部分。当我们犹豫使用哪个组件时，选择它一般不会错。单选按钮就像是白天和黑夜，完全不见彼此。单选条件承载的信息也较多，如果希望用户对比感知到两者信息的不同，那么使用单选按钮。最后理论永远只是指导实践的一部分，上述内容可能只是在用户认知和易用性之间，找到一个相对平衡的点，具体的使用场景情况，还是要具体问题具体分析。参考文献Nielsen Norman GroupHuman Interface Guidelines用单选还是多选？这篇全面总结给你答案！本期文章主要研究单选和多选控件的设计细节，虽然是很常见的控件设计，但是也是有非常多需要注意的地方。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/switch-checkbox-radio
字体 西文 拉丁文 因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。同样开放免费商用，可以用在一些视频的制作之类的，具体还有什么好玩的玩法大家自己去发现吧！老样子，祝你用的开心！往期字体回顾：免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 不认识字体？送你这份英文字体风格辨识指南在我刚成为设计师的时候，分辨字体风格对我来说是最难的事情之一。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL Changer13.79KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-changer
页面 类别 产品 编者按：这篇来自nngroup 的文章探讨的是如今的现代电商类网站（以及其他复杂的网站中）导航设计的问题，对比了传统的导航模式和混合式导航的使用场景和实际优劣，为设计这类网站提供了一个相对完整的设计思路：具有大量库存商品，或是涉及复杂产品的网站，通常会提供产品类别页面，或者是产品列表页面。 类别页面就像是特定产品类别的主页。他们可能不提供完整的产品列表，但可能会展示一些产品并提供产品子类别的链接。这种页面本质上是用户在进入产品列表页面的过程中经过的一个中间步骤，让用户不用一下子面对海量的分类信息。Eddie Bauer 在其全局导航中， WOMEN 链接将用户带到了这个传统的类别页面。这些页面通常包含产品照片和营销内容，以及促销子类别（例如SHOP FLANNEL 和 SHOP FLEECE ）的链接。类别页面通常提供以下组合：类别的描述、解释及其包含的内容带有描述和代表性图像的子类别菜单推销该类别中的特色产品并非所有产品都需要专门的类别页面。 不过这种情况有时候会让用户非常恼火，因为用户需要通过额外的步骤才能查看特定类别的产品。许多网站完全省略了类别页面，而是将用户直接引导到产品列表页面，在那里他们可以借助过滤筛选的方式来浏览产品。Bonobos 网站上的 Pants & Jeans 链接不是类别页面，而是将用户直接带到产品的列表页面。这种方法通常效果很好，因为它尽快向客户展示了他们可选的选择。虽然本文偏向于电商网站中的类别页面的探讨，但实际上这些页面也用于其他类型的网站，特别是新闻资讯和教育类的网站。这些建议也可能适用于这些情况，但最好根据领域对你的设计进行测试，以防你的用户需求与购物型用户的需求不同。何时使用类别页面如果您的电商网站所涉及的产品非常复杂，以至于您的许多客户需要经过学习之后才会使用，才能正确地过滤和比较产品，那么类别页面就是一个好主意了 。此外，具有 大类别和大量子类别的网站，有时会提供某种类型的独立类别页面，以帮助用户找到有意义的起点。不过，你可以决定让特定的产品具有类别页面，而其他的则不具有独立的类别页面。例如，Lululemon 主打的健身服装产品（大多不需要分类页面），同时也销售一种名为 MIRROR 的昂贵的家庭健身产品，后者需要更详细的解释，因此有自己的分类页面。Lululemon 为其复杂的家庭健身产品 MIRROR 提供了一个单独的类别页面，但并未为其所有产品类别使用类别页面。阐释复杂产品类别页面可以对电子产品等复杂产品起到解释作用 。如果用户还不了解产品选项，他们可能还没有准备好单击单个产品。与随机点击不同的产品相比，类别页面为他们提供了一种更有效地了解各种潜在相关产品功能的途径。例如，智能手表通常会有不同的功能和价格范围，著名智能手表品牌 Fossil 在自己的网站提供了一个类别页面，列出了不同类型的智能手表，并提供「立即购买」、「了解更多」 以及「比较」的选项。Fossil 的 智能手表分类页面解释了不同型号的智能手表的功能和性能差异子类别的特征购物型用户可能不需要通过网站来学习服装或食品等熟悉商品的内容和知识。然而，一个拥有大量产品和内容，并组织成许多子类别的网站，仍然可以从类别页面中受益——尤其当子类别页面可以通过独特的图文清楚地介绍产品的时候。这比一长串标签文本更容易方便用户了解产品，此外它还可以为国外的购物者提供帮助。REI 销售用于各种户外活动的许多产品，从皮划艇到登山用具。如果点击网站的全局导航中Camp & Hike 链接之后，页面跳转到一个包含所有露营产品的列表面，用户可能会不知所措，而且无趣。相反，REI 让链接指向到一个传统的类别页面，而不是列表，这个页面包括：子类别 (帐篷, 睡袋 , 远足)该类别中最受欢迎的品牌（Osprey、YETI）与类别相关的季节性信息（寒冷天气徒步旅行）建议（如何选择睡垫、食物储存和处理的技巧）REI 使用传统的类别页面来帮助购物者在庞大的 Camp & Hike 类别中找到适合自己的产品。不要强迫客户浏览类别页面如果你的网站确实提供了传统的类别页面，请同样为用户提供了避免进入这些页面的简单方法，并在他们愿意时，也能直接转到产品列表页面。为你的站点的全局导航，提供指向子类别产品的列表页面（比如使用超大导航 Megamenu ），以及指向传统类别页面的链接。可能还需要确保搜索结果始终指向产品选项，而不是将购物者引导到类别页面。在我们的研究中，Zappos 会将某些搜索结果指向到以品牌为中心的类别页面，而不是链接到该品牌的产品。在用户测试的时候，一位参与者看到孩子后很生气，因为搜索她最喜欢的品牌 Sam Edelman 时，她进入了一个具有促销感的传统类别页面，而不是指向她要的产品。对她来说，这感觉像是一个不必要的额外步骤。「当我进入 Sam Edelman 时，我想看到结果。我不希望打开一个品牌的分类页面。」当用户在 Zappos.com 上搜索「sam edelman」时，她很恼火地看到一个没有列出任何单个产品的品牌类别页面。当用户搜索时，他们希望立即看到结果。混合：在产品列表页面上提供类别信息 为了避免传统的类别页面的缺陷，并提供对产品列表的快速访问，许多电商网站现在在主产品列表页面中，结合混用了少量的类别有页面的设计——例如简短的描述性内容，或简短的子类别菜单。在女士紧身裤 产品列表页面上，Lululemon 包含了一些传统会在类别页面上显示的元素：营销内容（蓝绿色框标注的区域）和对不同紧身裤样式的解释，以及指向这些子类别的链接（以黄色框标注的区域）。这种混合呈现方法效果很好，因为对描述或子类别菜单感兴趣的用户可以暂停并阅读它，而不感兴趣的用户可以简单地跳过，直接快速访问实际的产品列表。说明内容一些电商网站在 产品 Banner 旁边加入营销的内容和元素，这些元素传达有用的信息而不会减慢用户的速度，就像传统的类别页面一样。高级珠宝零售商 VRAI 使用混合式设计，在一些产品列表页面中包含类别页面样式元素。它的一个产品列表页面当中，圆形订婚戒指页面中，包含了带有价格的产品列表，以及解释性的内容。顶部的文字描述了此类产品的一般特征。侧面板提供了有关该类别中所有产品共有特征的说明，以及更多详细信息。在这个列表页面中，VRAI 包含了促销内容（以蓝绿色框标注）和说明性内容（以黄色框标注）。其中所呈现的图文内容是典型的传统类别页面的特征（没有产品列表）。子导航一些零售类的网站不使用类别页面，而是提供指向产品列表页面上的子类别的导航链接。这些链接（这是最初发明类别页面的原因之一）让用户轻松浏览网站的产品库存。例如，Ann Taylor 的 裤子 列表页面显示了不同款式裤子的类别，并提供指向该子类别的链接。这些内容直接显示在产品列表上方，帮助用户了解可用类别项目，并且直接导航到这些类别。Ann Taylor 的网站在 裤子 的列表页面的顶部，加入了不同裤子款式和合身度的说明和图片，以便用户了解其中的差异。结语尽管类别页面可以提供有用的上下文信息，但它们也同样为用户增加了一个额外的跳转步骤，用户必须先浏览它们，才能看到实际的产品。当类别页面上的内容没有帮助时，用户可能会对它们做出负面的反应。因此，仅在真正需要时才使用传统类别页面非常重要，而通常用于复杂产品或有许多子类别的网站，在这种情况下，还得允许用户通过全局导航中的产品子类别链接，来跳过它们。延伸阅读：顶部导航 vs 侧边导航，到底哪种更好用？桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题，如今这也是 B 端设计中绕不开的一个设计问题。阅读文章 > 如何设计出体验更好的 UI 底部导航栏？编者按：设计 UI 底部导航栏可以说是绝大多数 UI 项目当中必然会遭遇的设计内容，而这篇来自设计师 Vikalp Kaushik 的文章详细梳理了底部导航栏的最佳实践：导航在 UI 界面当中是相当常见、直接影响用户体验的基础组件。阅读文章 > 尼尔森团队出品！让用户沉迷产品的3个心理要素编者按：这篇文章出自于用户体验设计领域的专业机构 NNGroup，他们从心理学和认知科学的角度入手，基于「自我决定论」重新梳理了驱动用户的3个核心心理需求，结合实际的设计案例进行了演示和解读：在 Nielsen Norman Group，我们倾向于说用户不是懒惰的，而是高效的。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/category-pages
图片 比例 用户 前言在 UI 设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。在这个快节奏的时代，相比文字，图像的传达效率会更快、更高、更有助于用户轻松理解及记忆。配图用的好，往往能起到决定画面基调、流程引导、视觉平衡等关键作用，所以，在同等样式的布局下，因图片的使用及处理方式的不同，界面的品质也会存在较大的差异。本篇文章将介绍一些在 UI 设计中配图的基础知识，帮助大家在图片列表、背景处理、图文混排、头图等相关界面设计无从下手时提供灵感，在选择图片、后续处理时如何做到有规律可循带来一些思路。本期大纲了解 UI 设计中的图片图片的使用及处理方法图片样式效果图片处理小技巧总结了解 UI 设计中的图片1. 为什么要重视图片在文字出现之前，人们都是靠看到的图像来理解信息内容，即便后来文字能表达出很丰富的内容，图示也不可少，试想一下，当别人拿着密密麻麻的数据给你看时，能看的头皮发麻，你更希望有一张清晰的图表，但并不能说明别人的数据不清晰。所以，图像相比文字能更具说服力、更容易传达信息，使读者产生共鸣、震撼内心，让人看了一目了然，能直观的与人产生互动。当说到 UI 设计中的图片非常重要时，并不是说文字就一定比图片弱，好的文字也能带给我们无限的遐想，只能说在更大的概率上图片和文字哪个更吸引人，所以我更倾向于观赏图片，然后感受到带来的美好。但是，如果非要问我选择哪一个时，我只能说“只有小孩子才做选择题，我（设计师）全都要”，图片可以表达出丰富的内容，再用文字言简意赅，是一个非常完美的组合。2. 常用的图片格式图片有多种格式，如 JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在 UI 设计中，最常用的无非 JPG、GIF、PNG 三种。JPG：目前为止使用最多的图片格式，兼容各大操作系统浏览器及编辑软件，非常方便被打开和处理，但不能显示透明底，压缩后会失去一部分原始信息。PNG：如需编辑，PNG 应该算是所有图片格式中的最佳选择，支持无损压缩及透明底，但针对需要高保真的复杂图片，压缩后的文件较大，且有少数的浏览器不支持。GIF：动效图片，支持透明底及无损压缩，通常由视频格式的内容转换而来，但对色彩有非常严格的要求，数量最多不超过 256 种，相比前面两种，GIF 格式的文件更大。图片的使用及处理方法1. 图片的使用比例在移动端 UI 设计中，我归纳了最常用的几个图片比例，分别是 1:1、3:2、4:3、16:9 四种，这些比例都是源于最早的胶片摄影及现代相机的传感器演变而来。当我们不知如何选择比例时，首先需清楚的了解界面图片的应用场景、来源用户以及图片比例背后的缘由，否则将很难把控，下面将针对这几个比例作具体分析。1:1 比例因为相机结构的原因，早期最传统的 120 胶片画幅就是正方形（6*6cm），即 1：1 的比例，此比例更容易的将构图规整，使其最大程度的突出照片主体。在如今的电商 APP 中，商品图片绝大多数都遵循了 1：1 的比例，不管横向还是纵向都能将信息进行完整化的展示，且方便多场景、页面的适配。另外，用户头像也都使用了这一比例。3:2 比例起初 135 胶卷的比例就是 3：2，主要是因相机取景框的大小而决定。在移动端，这一比例使用也比较广泛，例如新闻、旅游类型产品，在拍照之后无需裁剪等处理，直接上传使用，非常方便。4:3 比例随着摄影的发展，小/微型相机出现而诞生 4：3比例，且移动设备发展迅速，在非专业摄影的情况下，手机能很大程度上代替单反并成为主流拍照设备，目前市场上主流手机的拍摄尺寸基本都为4：3比例。相比3：2的图片，4：3图片占比更大，能最大化显示图片以突出重点信息。16:9 比例根据人体工程学的研究，人眼视野范围的比例约为 16：9 的长方形，所以电视、显示器及投影范围的设计都是基于这个黄金比例。线上产品不用多说，影视类型的产品均采用 16：9 的尺寸，例如爱奇艺、优酷、腾讯视频等，到目前为止，这个比例在设定上还没出现过问题。在上述 4 个尺寸中，最容易混淆的是 3：2 和 4：3，如果不清楚如何选择，请根据产品目标定位，看看到底是以内容为主导还是图片为主导。例如：资讯类型产品很注重标题文案，即会使用上文下图、左文右图的版式，选择 3：2 作为封面，以降低图片的视觉重量；旅游、租房类产品，则可使用 4：3 的图片，以传达更多信息。这种选择方式虽然不是绝对，但当我们陷入两难的困境时，可作为参考依据帮助快速决策。2. 图片的使用场景单图布局全屏：具有很强的视觉冲击力，非常适合用于传播行业属性及品牌调性。单图全屏布局处理灵活，可整体突出、局部特写或加纯色不透明度纹理/遮罩，对图片细节、构图等有较高的质量要求，一般用于登录、启动引导、产品介绍背景等页面。卡片：以单张图片作为视觉引导，宽高不固定，但占据界面大部分区域及重要位置，主要突出产品调性和成为吸引用户的流量入口，促使用户与其产生交互行为。常用于产品详情页头图、推荐页、专题入口等。图文列表在图文列表界面，很多时候，我们都在想一个问题，到底是选择左图右文、左文右图还是上图下文？所以我们首先要明白 F 式（从上到下、从左到右）浏览布局，这也跟人眼的浏览习惯相吻合，然后确定图、文信息内容的权重，根据优先级将重要的信息放在关键位置。单列组合左文右图：以文字为主、图片为辅，主要强调文字信息，且图片与标题的关联性不是很大，能减少图片对文字的干扰，对图片的质量要求不高，很多新闻、资讯类产品都是选用这种方式布局。左图右文：在图片内容优先于文本内容的情况下，采用左图右文的方式，更强调以图片直观的传达内容、吸引用户的视线，对图片的质量要求高于左文右图，一般是电商、旅游类产品的最佳之选。上图下文：一行只显示一张图片，大多采用横图，同屏一般不超过两个内容，用户需要从图片中获取大量信息，对图片的质量要求很高，大多有专门的人员审核，以完成对图片的品质的把控。这种方式很占用界面的纵向空间，部分租房类、艺术类产品会选用此种方式。双列组合并排：相同高度的比例控制，是较为经典图文布局，相比单列，同屏可展示更多的图片内容且空间利用率更高，能同时向用户传达更多信息。错位：图片高度自适应（瀑布流），在限制宽度的条件下，高度自由发挥，让图片得到更多的舒展，利用率更高。双列错位的排版方式增加了版式的趣味性，可缓解用户在长时间浏览下的视觉疲劳，需要注意的是宽高比例不要太大、成跳跃式的变化，否则可能导致视觉混乱，且低高度的图片信息很容易被忽略。多图组合规则：3 张或以上的规则的图片组合很常见，主要用图片列表来引导用户查看更多，通常利用单排左右滑动或九宫格的方式呈现。例如旅游、租房、影视类产品，包括手机相册、社交圈子等。不规则：多图不规则比例并不常见，因移动端设备可视宽度有限，容易导致混乱的错觉。艺术、拼图类产品看到的居多，另外，部分社交类产品为了展示不同远近距离的层级关系也会用到这种排版方式。3. 图片操作的交互手势图片常见的手势操为：滑动、点击、双指缩放，除此之外，还有很多针对所有元素都可以操作的交互手势，这里就不多说了，下面单独对图片手势作出介绍。滑动上下滑动：通常在图文列表或单张图片内容超过一屏的情况下，通过上下滑动查看更多信息。左右滑动：为了拓展更多内容，多用于相同等级的图片列表或大图切换，在页面列表中会将无法同时展示的图片呈现一部分或以数量作为提示，引导用户探索以发现更多。点击/长按单击：单击可查看图片，从缩略图到详情或大图的切换操作；双击：针对图片本身进行某些操作，比如喜欢、点赞等，另外，部分图片通过双击进行一定比例的放大缩小。长按：调出图片的部分属性信息、下载图片等进行下一步操作。双指缩放当我们需要查看图片的某些局部信息或细节时，就会使用双指（开合）缩放的交互手势。图片样式效果1. 图片遮罩因图片的色彩变化不规则，为了保证图片上层文字的可读性，通常会在文字区域加一个纯色遮罩，也可设置不透明度的渐变效果，使遮罩跟图片的过渡更加协调，提升视觉美观度。2. 毛玻璃（背景模糊）毛玻璃效果通常出现在应用的 2、3 级页面，对应用性能会有一定的消耗，一般使用封面图片进行大幅度的高斯模糊作为背景使用，可在上层加上一定透明度的蒙层配合使用，透明度数值根据不同的图片色彩及使用场景适当的调整。毛玻璃效果既能满足文字内容的清晰呈现，又能提供场景氛围并提升界面的品质感与神秘感，我们最熟悉的当属音乐播放页面的背景模糊效果了。3. 抠图+纯色背景组合对于自营平台，内容较为固定的商品页面，可将商品抠图后自定义背景，让界面的整体设计风格可控，延展性更高。不适配平台类型应用，因为会让商家产生较高的运营成本。4. 圆角设定图片圆角值设定，能体现出不同的产品属性及气质。例如：直角比较硬朗，给人高冷、力量的感觉，小圆角传达出安全、专业的属性，而大圆角显得活泼、可爱，更有亲和力。5. 图片出界图片出界常用于运营设计，例如图片轮播、胶囊 banner、专题页等，另外，经抠图处理过的图片也可用在商品详情页顶部图示。这种效果能有效避免呆板，营造出画面氛围，制造出更强烈的视觉冲击力。图片处理小技巧1. 符合产品气质UI 设计中，任何一个设计思路、想法及效果样式都是为产品而服务，图片也不例外，需要根据不同的场景进行合理搭配，好的配图更能与用户产生共鸣。2. 切合主体，表达产品核心内容配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。3. 风格统一图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。常见的控制方向有图片类型（位图/插画/形状）、视角（平视/仰视/俯视）、商品背景（简约/复杂/纯色）、呈现区域（堆积/局部/特写）、构图（中心/水平线/对称/对角线…）等。另外，还有很多抽象的方式但并不是绝对的，我们都可以尝试从不同的角度去调整，力求让所有图片达到最佳视觉效果。4. 颜色丰富因人的天性即向往美好、品质（非物质化）生活，固品质感的配图更容易吸引用户的注意力，让人想要拥有的感觉，如果色彩不够饱满，不管风格是多么统一，也达不到良好的用户体验。在选好图片后，可对色相、饱和度、亮度稍加调整，以确保色彩饱满、丰富。5. 设计稿需呈现上线的实际效果有时候做设计为了方便，整个界面的图片直接复用同一张，即便设计的再好，也可能隐藏着不易察觉的瑕疵。需要说明的是，一个成熟且专业的设计师，首先要对自己负责，然后才是设计，即便是初稿，在即将呈现给大家或汇报前，一定要给出上线后最真实的效果，这样方便他人贴合实际给出一些方向性的建议，帮助自己更好的决策。经处理过的实际配图能体现整体效果，方便找出图片以外的设计缺陷，例如版式、字体大小、层级关系等问题。6. 文件大小处理静态图片常用的无非 PNG、JPG 这两种格式，文件较大的图片会影响打开页面或刷新时的速度，本地图片更会增加应用包的大小。从设计稿中导出图片时需要控制文件大小，如无特别（超大图）情况，切勿主动降低图片质量后再导出，否则会影响界面整体的视觉美观度。这里推荐一个线上无损智能压缩神器： https://tinypng.com ，仅限 PNG、JPG、WEBP 格式的图片。上图可以看出，图片在压缩了76%后，由1.4MB变成了332KB，肉眼很难看出（查看大图）质量上的损失。7. 倍率切图切图不像以前那么麻烦，同一张图片需要手动导出多套规范，现在只需在软件（或安装插件）标记好切图，上传到类似蓝湖、摹客等第三方线上应用，分享给团队成员即可各自下载 web、Android、iOS 对应的多套规范制图。设计师在设计过程中，一定要按照规范的最大极限保留原图，以 iOS 系统@1x 规范设计稿为例，如果图片的宽度是 100px，那么导入软件中的图片宽度至少要在 300 以上，然后再进行缩小（PS 中需转为智能对象），如果低于 300px，开发在导出@3x 的图片就会失真，可能会因损失像素而出现模糊的情况。总结文章中所介绍的图片使用方法及处理技巧，并非最好、唯一的答案，但在你没有更好的方法之前，多多少少能从中得到启发。UI 中图片设计的本质在于自身的专业能力，然后用自己的视觉产出和设计手段去吸引、打动用户，从而为产品带来利益，也能体现出设计价值。不得不承认，人们很多时候都是通过视觉表象决定是否需要深入了解、拥有某一件事/物，设计师就是在做视觉表象的表达，如果图片用的好，不仅能让你的设计更加出彩，还有一定几率转化用户，形成商业价值。下篇「弹窗」文章再见。如何选到设计感强的配图？我总结了这7个实用方法在设计中，判断一张图是否好看的时候，你通常会从哪些角度去分析？阅读文章 > 欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/ui-photo-guide
课程 速写 人体 之前我们出过一篇文章，向大家推荐了知名 CG 艺术网站 Artstation 旗下的教育品牌 Artstation Learning。2022 年初 Artstation Learning 宣布站内课程全部开放，永久免费供所有人学习。这些课程都是由优秀专业的艺术家负责教授，质量极高。新年重磅！Artstation 大师级艺术课程全部免费开放2022 年已经开始了，总结完过去一年的收获与成长，新的学习提升计划也该提上日程了，不知道大家今年又给自己定了几个设计「小目标」呢？阅读文章 > 今天再向大家推荐5门 Artstation Learning 上优质实用的宝藏课程，内容涉及 Blender 和 Procreate 入门教程、人体动态速写及原画场景设计入门，一起来看看吧。Blender 雕刻工具入门《Intro to Sculpting in Blender》「课程传送门」： https://www.artstation.com/learning/courses作为一款免费开源的 3D 图形软件，Blender 以其功能全面，操作便捷受到越来越多的关注，相关的入门教程也越来越多。Artstation Learning 上的课程《Intro to Sculpting in Blender》就是专门介绍 Blender 雕刻工具及其应用的。课程导师是南非自由 3D 艺术家 Rico Cilliers，他拥有 8 年的行业工作经验，负责过《荒原 3》、《神降》和《清道夫》等游戏项目。在《Intro to Sculpting in Blender》中，Rico 详细讲解了如何将一堆立方体雕刻成逼真的岩石，通过实际案例来介绍雕刻工具的功能及使用方法。他还介绍了如何利用插件创建自定义笔刷来减少重复操作，提高工作效率。更多 Blender 教程：从准备入门到跨过门槛：3D神器Blender 教程来了！@嘉文钱：大家好，我又来了我发现最近的几次更新，都是因为我开始熟练了新的「玩具」比如上次的 Procreate以及这一次的 3D 制作神器「搅拌机」为什么我要学做 3D？阅读文章 > 人体动态速写：《Sketching Characters with Energy》「课程传送门」： https://www.artstation.com/learning/courses画人体的时候，把握好比例只是初步，想将人体画得鲜活有神韵就需要知道如何刻画出人体的动态。Joel Dos Reis Viegas 在他的课程 《Sketching Characters with Energy》中就分享了他充满活力的人物速写方法。Joel Dos Reis Viegas 是一名概念艺术家，在游戏和电影行业工作了十多年。他参与过的项目有《哥斯拉》《蝙蝠侠：阿卡姆系列》《使命召唤》《火影忍者》等，目前正在为育碧公司的新项目《Roller Champions》做艺术指导，有深厚的人物设计功力。在《Sketching Characters with Energy》中，Joel 通过凭记忆绘制人体速写，来展示如何利用观察和基本知识释放创造力，演示如何利用基础形式、视角和动态线使人体绘画具有动感。除此之外 Joel 还展示了从观察、立体塑造到上色的一整套角色设计流程。课程一共有 11 小节，适合想在人体结构速写上进一步提升的小伙伴。原画场景设计入门:《Environment Design》「课程传送门」： https://www.artstation.com/learning/courses《Environment Design》是由加拿大自由概念艺术家和插画师 Grady Frederick 创建的系列课程，他担任过游戏及电影动画的原画师，创作经验丰富，作品以恢弘场景和奇特幻想著称。Grady Frederick 在 Artstation 上的一些创作分享《Environment Design》一共 3 部分，分别讲述在场景设计中如何用图形起稿、如何进一步细化和完成最终画面，内容基础细致，步骤完整，非常适合初学者。Grady Frederick 的课程主页《Environment Design》课程目录Procreate 绘画教程《Character Illustration in Procreate》「课程传送门」： https://www.artstation.com/learning/courses《Character Illustration in Procreate》是 Amber Aki Huang 创建的课程。Aki 主要从事角色设计和视觉开发，用于电影和电视的前期开发和制作，服务过梦工厂、Netlix、Supercell 等公司。课程内容不用过多介绍，就是一个实实在在地教你如何在 Procreate 中进行插画创作。画布创建-构思-草稿-细化-上色-调整润色-输出，流程完整清晰，想学 Procreate 插画创作的小伙伴快去看看吧！关于 Procreate 再向大家推荐一个课程《Illuminating a 2D Illustration in Procreate》，教授如何在插画中制造光感，也是一个非常基础实用的课程。「课程传送门」：https://www.artstation.com/learning/coursesArtstation Learning 上的优质课程非常多，以上介绍的是其中的一小部分，想找免费学习资源的小伙伴可以自己进行更多的探索哦~本篇来源：优设网原文地址：https://www.uisdc.com/artstation-course
字体 这款 西文 LL DEtechno 这款字体灵感来源于每天听的 Minimal Techno，Techno 音乐简单直给的特点也体现在了这款字的基础字形中。加入可变特性的目的是想让这款字体可玩性更强，正好最近在研究可变，所以挑选了扭曲和故障两种风格进行字体的延展细化，给自己找找事儿干，同时增加这款字的可玩性。这款字适合更应用于标题，不推荐在正文中使用。同样这款字供各位免费使用，愿诸君用得开心，变形拉杆玩得痛快！附件下载！往期字体回顾：免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 免费可商用！免费西文可变字体 LL Changer 打包下载因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。阅读文章 > 快收藏！15 款 UI 设计常用的等宽英文字体当界面按钮中字体样式发生变化时，整个界面也会发生很大的变化，甚至可以说是杂乱。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL DEtechno145.84KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/ll-detechno
灵感 色彩 颜色 提到设计灵感网站，Pinterest、花瓣、Behance、Dribbble 这些大家都非常熟悉了。今天向大家推荐一个有强大颜色搜索功能、灵感分类更全面好用的灵感社区 Designspiration，看看它的特点及它强大的色彩搜索功能如何帮助我们更好地进行设计。Designspiration 的网站主页便捷的功能分区Designspiration 会让用户在注册时预先设置 5 个领域偏好，然后按照用户偏好在主页上进行个性化推荐。但是用户并非只能这样被动的接受推送，Designspiration 在用户主页上和 Home 并列设置了 Popular、Everthing、Topic 几个分区。在 Popular 可以看到近期最受大家欢迎和专注的灵感创意；在 Everthing 中可以浏览网站涉及到的所有设计灵感，突破当初设置好的偏好限制，帮助大家更好地拓展视野；Topic 中则可以看到网站按不同主题收录的灵感创意，各类主题应有尽有，让用户更自由、更有针对性的寻找创意。超强大的色彩检索功能Designspiration 设立的重点之一就是构建独有新奇的色彩工具，这也是他区别于其他灵感网站的特色所在。1. 指定配色搜索Designspiration 在主页搜索栏右侧有一个调色盘小图标，点击后就是一个颜色面板。我们可以在颜色面板上任意选择至多 5 种颜色，然后就可以搜索以这种配色为主的所有灵感。在搜索栏选择配色指定配色搜索结果2. 色彩关联搜索点进一个灵感详情页，我们会发现右边有一个小色环和一组配色，是网站根据此灵感的配色自动生成的。点击色环，我们会得到的所有类似配色的灵感。我们还可以更改原有配色中的一种颜色，得到全新的推荐。如果直接点击色环右边单独的颜色，就会得到色号及同类色推荐。Designspiration 这种强大的色彩搜索功能可以帮助我们快速找到想要色系的灵感参考，还可以当做一个实时色卡开使用，对于想找配色参考、提高配色审美能力的设计师来说算是一种魔法工具了。针对性极强的关联搜索除了上面说到的色彩关联搜索，Designspiration 的灵感注释标签也是可以进行关联搜索的。只要点击灵感详情页右侧标签，就可以立刻得到同类灵感推荐。再次总结一下 Designspiration 的特点：强大的色彩搜索功能，可以通过指定配色找灵感，也可以自动生成灵感的配色并进行同类推荐，可以当做一个实时色卡工具使用。贴心智能的关联搜索设置，只要你对灵感的其中一个点感兴趣，马上就能在同页面找到可以跳转的标签，不用回到主页重新搜索。以上就是推荐的全部内容，感兴趣的小伙伴快去 Designspiration 动手试试吧~「Designspiration 官网」 https://www.designspiration.com/配色找不到感觉？这个PCCS色彩体系帮你从根本上解决！可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/designspiration
字体 西文 这款 可以留着 2022 年的万圣节用，附件提供字体下载！免费可商用！趣味像素字体 LL PixelFun 开放下载！LL PixelFun 是一款像素字体，为了增加字体的可玩度加入自由合字的特性输入以下单词：bird boat chicken clock coffee computer cow dog face fast file glasses heart home key lock low阅读文章 > 免费可商用！西文等宽字体 LL BLACK MATRIX 2.0开放下载！LL Black Matrix 是一款由针式打印机字体延伸而来的等宽拉丁文字体。阅读文章 > 免费可商用！免费西文可变字体 LL Changer 打包下载因为对可变字体很感兴趣，所以有了 LL Changer 这款衬线变非衬线字体的一个小实验。阅读文章 > 免费可商用！西文可变字体 LL DEtechno 打包下载LL DEtechno 这款字体灵感来源于每天听的 Minimal Techno，Techno 音乐简单直给的特点也体现在了这款字的基础字形中。阅读文章 > 用一篇文章，帮你全面认识哥特风英文字体（附下载包）对于设计师而言，熟知各种字体的特征和使用方法可以说是基本功，除了了解各种经典的中文字体之外，对经典英文字体的理解和使用也是非常重要的。阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 LL MGothic135.94KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/gothic-free-font
用户 优惠券 感官 感谢大家对黑马家族感官体验日记栏目的关注和支持，本栏目皆在为大家带来优秀的设计解决方案和不一样的设计思维。希望每一期的分享都能开启你对于设计的全新认知，提高设计思维和变通能力。下面就和黑马哥一起来看看本期的感官体验总结吧！本期内容涉及优惠券设计、轮播图设计、微动效技巧、刷新的情感化设计、春节主题和冬奥主题等等。不一样的优惠券叠加设计优惠券在电商购物场景中运用普遍，如何提高优惠券的关注度和使用率是至关重要的探索。特别是在多个优惠券叠加的场景中，如何在交互层面和视觉引导层面进行突破，作为设计师来说都在不断尝试新的解决方案。最近发现得物（毒）将多个优惠券设计成左右滑动的动效形式，方便用户关注到更多不一样的优惠券。将有效期设计成失效的倒计时，营造时间紧迫感，提高用户的关注度和优惠券的使用率。突出品牌感的轮播 Banner 设计轮播图在产品设计中较为普遍，以推广营销活动为主。除了在 Banner 设计本身进行创意发挥以外，在 UI 布局层面也是设计师探索的方向。得物（毒）在最近的一次新年活动中，利用品牌展示和轮播 Banner 相结合进行布局呈现，不仅突出活动主题，也强化了活动品牌的曝光度。除了自动轮播之外，也可以点击品牌卡片切换，操作也是非常便利。Banner 底部卡片的展示也能让用户在当前视野中浏览到其他品牌，提高了更多品牌的曝光度。多种分类下的轮播设计单轮播设计较为普遍，当我们遇到按照不同类别轮播类别的内容时，如何处理好类别的样式和轮播的呈现方式呢？相信这个设计解决方案是一个不错的思路。网易云音乐 APP 播客栏目中，随心听 FM 除了卡片轮播以外，下方设计了音乐类别的选择，模拟调频场景设计，操作不仅非常便利，感官体验也是非常不错的。背景颜色也会随着类别切换进行微变化，带给用户非常自然的视觉过渡。通过手势拖拽隐藏红点提示红点效应从强迫症已经开始过渡到治愈期，不过针对信息列表较多的部分，红点提示太多也是非常干扰用户体验的。在 MOMO 陌陌 APP 消息栏目中，如果你觉得红点提示消息过多时，可以通过拖拽红点隐藏显示，无需挨个删除或者阅读。配合微动效的设计表现，带给用户非常流畅自然的操作体验，借助手势交互的设计提升用户体验。这个功能最早是手机QQ设计团队创造的，设计过程见：背后的故事！手机QQ的一键消除红点功能是怎么诞生的？腾讯社交用户体验设计部 YU：人类似乎天生对不对称、不和谐的事物有厌烦心理，并且想要去纠正这些“错误”，简而言之就是大家平时所说的“强迫症”。阅读文章 > 右滑手势探索新的世界手势交互设计在产品中逐渐得到应用，可以在有限的空间里面探索更多的互动体验，带给用户更加便利的操作体验。最近研究手势交互的时候，发现 MOMO 陌陌 APP 首页右滑即可开启新功能，探索新的世界，吸引用户前往这个小宇宙去探索。刷新设计的情感化表达把简单的功能做到极致，把重复的动作做到更有情感化。想要抓住用户的情感共鸣，就要在细微之处带给用户更有情感化的体验。喜马拉雅 APP 在下拉刷新时，不是固定的文案提示，针对这个动作设置了不一样的文案提示。每一次刷新都会展示不一样的文案，让用户感受到这是一个有温度的产品，情感化设计的表达提高了用户的情感共鸣。融入春节元素的金刚区设计春节元素融入到 UI 设计中近期出现了很多案例，在金刚区图标设计中的表现尤为突出，带给用户情感化的场景代入感。自如 APP 就将春节中的元素融入到金刚区的图标设计中，带来的感官体验也是非常不错的。运用到的元素涉及鞭炮、福字、元宝、红包、糖葫芦等等，结合中国红营造出浓厚的春节氛围。醒目的引导提示设计针对新业务或者新功能的新手引导设计，有助于提高用户对于内容的熟悉度，也能降低摸索学习的成本。记账城市 APP 在打开应用时，会在底部弹出新增的一些功能或者交互玩法。通过俏皮可爱的卡通形象以对话式的形式传递内容，降低了用户的学习成本，一目了然且不会形成对主功能区域的干扰。用设计为北京冬奥会加油最近比较热门的话题就是北京冬奥会了，各大品牌都在不同的渠道通过各种形式进行曝光，借助营销策划或者单纯的加油祝贺，为北京冬奥会的举办增添色彩。高德地图 APP 在地图主页添加火炬元素突出冬奥主题，点击会展开“点燃昂扬斗志，中国队加油”。保持当前结构的基础上，通过元素的添加达到主题的突出，既不干扰用户操作，也能通过情感化的设计与用户产生共鸣。游戏化的签到积分设计签到挣积分获取相应的奖励，在产品中较为常见，特别是电商类产品。随着这种形式的普及，起初的新鲜感逐渐减少，有差异和创意的表达方式才能吸引用户的关注度。得物（毒）结合游戏化的形式表达签到和领取积分的设计，通过积分换取优惠券和礼品等。积分采用极光的形式表达，不足的情况下可以通过“找极光”获取，激发用户的参与度。小结从感官体验的角度体验产品，总结了在 UI 设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！第八波！快速提升 UI 设计效果的 6 个小技巧编者按：在进行 UI 设计的时候，很多小技巧能够恰到好处地提升界面的设计视觉效果、用户体验。阅读文章 > 欢迎关注作者的微信公众号：「黑马家族」本篇来源：优设网原文地址：https://www.uisdc.com/ui-design-skills
用户 操作 信息 老龄化社会已经到来，如何让中老年群体更好地使用互联网产品是当今的热门话题。猫眼演出设计团队负责的一个 B 端项目的使用人群需覆盖到中老年用户，也属于适老化的涵盖范畴。在前期调研和设计环节中，我们收集了一些相关的文献及案例，并且结合项目实践有所思考和沉淀，在这里与大家分享。普适的适老化设计理念世界卫生组织根据现代人生命状况，提出了人生阶段年龄的新划分。45~59 岁为中年人；60~74 岁为年轻老年人；75~89 岁为老年人；90 岁以上为长寿老人。[1]随着年龄的增长，人们的身体机能、心理状态、认知能力等都会出现衰退的情况。适老化设计是无障碍设计中的一种。无障碍设计于 1974 年由联合国组织提出，设计中需要充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者（如残疾人、老年人）的使用需求。[2]目前互联网产品中大多数的适老化设计，主要是集中在 C 端。针对不同障碍（视觉、肢体、听觉、认知障碍）[3]，目前普适的适老化设计原则有：1. “强烈“好于“柔和”针对视觉障碍，常见做法有增大字体大小，使用非衬线体字体，提高颜色对比度等。相比原版的 App，百度大字版 App 和支付宝长辈模式修改了 UI 界面，每个功能模块都用了明亮的大色块、加大字体的设计。2. 善用“辅助”和“替代”针对听觉障碍，常见的做法有通过视觉辅助，将声音转化成文字、扩大音量、降低语速等。Google 安卓系统推出了 Live Caption 功能，可自动将手机上播放的内容转换成字幕。Live Transcribe-「Sound Notification 声音通知」功能，可识别特定声音（比如烟雾警报器、婴儿啼哭、敲门声等），并转化成文字及视觉符号推送至手机，方便听障用户辨别生活当中一些重要的声音信号。3. “点击”好于“滑动”针对肢体障碍，减少页面信息的密度，避免使用过小的按钮以及复杂的交互手势。有研究表明，老年群体在操作时难以瞄准物体，在浏览图片时，由于视力衰退导致无法对焦，他们会不断地用两只手指放大/缩小并反复点击屏幕。[4]平安银行 App 关怀模式采用卡片拼接的设计方式，将间距放大，保证每个信息有更大的展示空间，同时也放大按钮点击热区，提高操作的准确率。4. “具象”好于“抽象”针对认知障碍，避免使用不易识别的图标，尽可能配有图标或图片，简化信息内容。有研究表明，文字+图标为主的设计有助于提升老年新手用户对新 ATM 使用的学习效率和记忆。[5]滴滴 App 关怀模式针对老年人进行功能精简，满足高优先级核心诉求，首页只放「一键打车」，操作简单，大字、无广告。B端产品引入适老化设计也值得深思在很多行业中，中老年人因为拥有丰富的经验在岗位上更具竞争优势，譬如教师、医生、律师、会计等职业，工作年限长、经验足是优势，可以提供更好的服务。他们既会使用 C 端产品，也有使用 B 端产品的场景。随着时代变迁，2015 年世界卫生组织提出了“健康老龄化”理念[6]，倡导改变过去“老了就要退出社会生活”的消极认识。从“老有所依”到“老有所为”，很多的 B 端场景都覆盖了中老年用户，如何提升中老年用户的办公用户体验是重要课题。另外我们看下 C 端与 B 端的主要差别：C 端 App 中时常将简单作为适老设计宣传点。追求简单有一部分原因是，C 端用户是在自己的场域操作且几乎无时间压力。而 B 端产品却相反，业务逻辑复杂，用户要长时间使用而且要求效率。B 端面向企业定制化，针对特定人群、情景，使得在适老化设计中要解决的问题更清晰。适老化设计在POS中的应用留意生活中的零售行业，如餐厅、商场、药局、便利店的服务人员，往往能看到中老年人的身影。POS 系统是 B 端场景中使用率最高的产品之一，POS 系统的英文全名为 Point of Sale，中文名为销售时点信息系统。[7]它由硬件与软件组成，根据产业和店面类型的不同，会有功能上的差异。最近团队参与了一个改造 POS 系统的项目，使用人群覆盖到了中老年用户，提升他们的办公用户体验是其中一个产品目标。本次项目主要是 POS 界面的更新，完整的 POS 体验不仅有软件本身，有更大的部分在于实体环境与设备，例如：结账区的控件、店面的摆设、扫描枪，读卡器等，而 POS 界面是连结上述元素的节点。在对 POS 系统进行改造时，我们是按照以下设计思路进行的：第 1 步:沿用旧系统规则与结构B 端系统背后往往由成熟的业务场景和复杂的业务逻辑构成。B 端系统往往不是一个从 0-1 全新的系统，而是存在一个被使用了很多年的系统。在这种情况下，企业服务的每个用户都是趋向于规避风险的。人们可能已经习惯了原有的解决方案（尽管不好用，但是大家都会用了），但新的方案如果不好用，他们的生产力反而会因为不知道如何使用新方案而降低。这就意味着在做 B 端设计时，现行的方案会产生很大的习惯引力。当设计师要引入一个新方案时，取消或改变某些功能及操作行为将有难度，不能霸道性更改，取代需要合理性。设计思路：梳理业务逻辑和功能模块：沿用旧系统规则与结构。制定框架：定稳定一致、拓展性强的信息框架与导航栏。统一专业术语：信息表达（文案）与原有系统尽可能保持一致。遵从使用者习惯：原系统中可能存在一些不够美观或不合常理但却实用的快捷入口及交互方式，可以整合优化后进行复用。第 2 步：理清主要用户与使用场景想要了解使用者的真实痛点，需从场景出发。第 3 步:用适老化设计原则去解决场景中的问题POS 使用场景有很多，这里列举 3 个常见的使用情境：可能存在的障碍：无法聚焦信息内容，难做到边看屏幕边与顾客交流。设计目标：确保信息在复杂的环境中，信息内容清晰可读。设计思路：1. 放大信息内容服务至上，POS 使用者在工作时需保持端庄热情的姿态，不能只专注看 POS 屏幕信息而不顾顾客。内容大小的确立由设备分辨率、环境灯光、字体、视距等因素决定，在复杂的现场环境中，信息内容要清晰易读。2. 色彩对比度符合 WCAG 标准参照 WCAG 有 AA 和 AAA 的对比度标准，界面中的信息与其背景间的关系对比度至少在 4.5:1 之上，保证信息易读性。WCAG 全称是 Web Content Accessibility Guidlines(网页内容无障碍指南)。这是一套由无障碍功能专家编辑的指南，有若干国家在其网络无障碍功能法律要求中明令必须使用这些指南。[8]一些设计插件可以帮助我们检验色彩对比度是否符合 WCAG 标准，给大家推荐 2 款：Sketch 插件 Cluse，Figma 插件 A11y-Color Contast Checker。3. 设计有意义的动画通过动效来表达静态视觉效果无法准确传达的信息，如反馈、引导下一步、状态表达等。好的动效与视觉设计是互补而成系统的。比如用动画来展示商品被加进购物车的状态，引导下一步操作。4. 加大点击热区提高使用者点击操作的准确率和速度。5. 一屏策略在这次的项目中存在一个场景，除了销售端服务员看到的屏幕，顾客也会有一个客显屏，即服务人员看到的界面，顾客也会看到。对于页面信息框架以及布局尽量“一屏”展示，确保双方的视线和注意力一致，便于沟通交流。但这时会有挑战：字放大、按钮放大，信息和功能在一屏上怎么放得下？解决思路：进行功能筛选，满足场景中高优先级核心诉求，提取核心功能展示。模块化展示每个信息，根据格式塔的视觉感知理论，做到聚焦用户视角。可能存在的障碍：在顾客的“催促”下，使用者也会着急，对事物表现出茫然的情绪，定位当前位置困难。设计目标：追求信息的有效表达和操作的直觉性与效率。设计思路：1. 避免使用不易识别的图标B 端系统中会有些功能很难用一个图标去表达其含义，此时文字+图标按钮优于纯图标按钮，能帮助 POS 使用者更好地理解语意并做出操作。2. 信息的呈现符合用户眼动规律，操作轨迹越短越好可运用古腾堡图表法 Diagonal Balance，它由 14 世纪西方活字印刷术的发明人约翰·古腾堡提出。他发现人们视觉阅读规律，左上角是视觉第一落点区，右下角是视觉最终落点区，右上角和左下角都是一个视觉落盲点，大多数情况容易被忽略。[9]用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 在进行信息排布时，可根据用户习惯性的眼动规律，将最重要的信息放在左上角，右上角和左下角添加辅助元素，右下角作为整个视觉落点可以展示重要操作。可能存在的障碍：百忙之中，应变能力下降，容易发生误操作的情况。设计目标：预防不当行为，提升容错率，反馈要及时有效且清晰。设计思路：1. 通过二次确认避免误操作在产品设计时，要把各种可能性考虑进去，通过模态对话框让用户二次确认来避免误操作行为。当有重要操作时需告知用户处理结果，状态反馈信息采用的颜色需要遵守用户对色彩的基本认知，如红色代表警示，黄色代表警告、绿色代表成功等。上述举例的设计原则是启发但不是限制，每个设计提案最后都要经过用户调研，看是否符合使用者的使用习惯，是否真能解决业务与工作中的痛点。附上总结图：其实设计到后面会发现，起初为了方便中老年用户使用 POS 运用的设计原则，最终都能给多数人带来很大便利。这是因为我们每个人在某些时候都会遇到各种临时的无障碍需求。结语适老化设计，不仅仅只是为中老年群体做设计，更是一种新的设计思维方式，去挖掘更多普适的场景痛点，来指导我们做方案设计。市面上很多适老化设计方法为 B 端产品提供了借鉴，但 B 端产品不能为了适老而适老，理清相关工作情境和要解决的问题很重要；不能霸道性更改，取代需要合理性，因为 B 端产品现行的方案会产生很大的习惯引力。以上是近期对 B 端引入适老化设计的一些思考和沉淀，是开始，也将继续，适老化设计还有很多值得深究和验证的内容。如何做好G端可视化中的适老化设计？我总结了10个注意点！前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体阅读文章 > 参考文献：[1] Cherry K E, Hawley K S, Jackson E M, et al. Pictorial superiority effects in oldest-old people[J]. Memory, 2008, 16(7): 728-741.[2] Persson H, Åhman H, Yngling A A, et al. Universal design, inclusive design, accessible design, design for all: different concepts—one goal? On the concept of accessibility—historical, methodological and philosophical aspects[J]. Universal Access in the Information Society, 2015, 14(4): 505-526.[3] Vanderheiden G, Tobias J. Barriers, incentives and facilitators for adoption of universal design practices by consumer product manufacturers[C]//Proceedings of the Human Factors and Ergonomics Society Annual Meeting. Sage CA: Los Angeles, CA: SAGE Publications, 1998, 42(6): 584-588.[4] Wang M H, Liu S F. Study on Innovative Gestures Applicable to the Elderly[C]//International Conference on Human-Computer Interaction. Springer, Cham, 2020: 200-211[5] Huang H, Yang M, Yang C, et al. User performance effects with graphical icons and training for elderly novice users: A case study on automatic teller machines[J]. Applied ergonomics, 2019, 78: 62-69.[6] 世界卫生组织网站. 世界卫生组织发布《关于老龄化与健康的全球报告》[J]. 中国卫生政策研究, 2015, 8(11):1.[7] Rahman M, Ripon S. Elicitation and modeling non-functional requirements-a POS case study[J]. arXiv preprint arXiv:1403.1936, 2014.[8] Web Content Accessibility Guidelines (WCAG) Overview[EB/OL].[9] Gutenberg Diagram — Why you should know it and use it[EB/OL].本篇来源：优设网原文地址：https://www.uisdc.com/b-end-elderly-design
彩色 比色 纯度 配色是海报设计的重点之一。看多了优秀海报中精妙和谐的配色，自己对配色的想法也很多，但是动手时却又担心把握不好对不对？今天向大家推荐一些只有 2-3 种颜色搭配在一起的海报，简单好看，在对配色没有把握的时候很有借鉴意义。黑白灰搭配黑白灰属于无彩色， 黑+白或者黑+白+灰都是非常经典的的配色组合。由于颜色单纯，这样的配色组合可以很好的突出文字主题，并营造庄重内敛的氛围感。虽然这种配色不易出错，但对字体和元素的排版有较高的要求，一定要有秩序感。文字或者元素的设计要有特点才能出彩，非常考验设计师对画面空间元素层次的把握。除了直接用黑白灰，还有一种方法是将图片或者元素去色，通过调整灰阶突出图片重点，搭配文字排版进行设计。这种方法可以统一画面氛围，有效提高整体质感。什么时候将照片处理成黑白比较合适？来看高手的分析！调成彩色还是黑白？阅读文章 > 无彩色+高纯度有彩色（小面积）在无彩色之上搭配小面积高纯度有彩色是一种得到协调配色的有效方法。小面积的用色不会破坏画面整体的调性，而高纯度的鲜明色调可以赋予大面积无彩色活力，打破纯无彩色的单调呆滞，使画面有生气。这种小面积的高纯度色彩可以是画面的主体元素、标题，或者单纯作为一种装饰的色块。无彩色+低纯度有彩色（大面积）低纯度有色彩搭配无彩色也是一种非常容易获得和谐配色的方式。由于低纯度的颜色温和不扎眼，可以大面积使用，配合主题表达出朴素雅致或者宁静自然的感觉。为了丰富画面的层次与质感，可以使用切割形状、添加渐变、叠加噪点纹理等方式对有彩色部分进行处理。无彩色+对比色想要制作能吸引注意力的海报，使用对比色是非常好的选择。这里提到的对比主要是色相对比，色彩在色环上距离较远（大于 120）。使用对比色的配色方案时，为了提高画面的可读性和透气感，需要搭配使用无彩色。对比色的色彩强度不一定都要很高，为了符合主题调性，可以适当降低纯度或者透明度 。对比色运用的另一种思路是统一色调。即在 PS 中先将图片转换成灰度模式，然后只用一种颜色对其重新上色，搭配对比色的文字或元素进行排版。这种设计方法在人物海报设计上应用极广，想要了解具体设计方法的小伙伴可以用这个双色调神器：神器集大成者！自动LOGO 设计、一键双色调、配色方案全都有！@短腿僵尸木：从2016年开始，双色调（Duotone） 设计就一天比一天流行， 这种风格的设计看起来非常惊艳，充满活力还十分时髦。阅读文章 > 无彩色+近似色近似色由于在色相环上距离较近，具有天然的亲近感，搭配在一起不会突兀。需要注意的是近似色在一起容易出现区分不明显的情况，要通过调节明度或者纯度来保证色彩的分界，才会有好的视觉效果。以上就是用有限颜色进行色彩搭配的海报设计推荐，小伙伴们看完有没有 get 到新技巧呢？拍一张照片，就能设计成一幅海报！嗯，久违的《拍一张照片，就是一幅海报》系列文章终于又来了，有一种重新归来的感觉，哈哈～不过还是先事先说明一下，这个系列作品纯属是我的自娱自乐系列，偏商业的也好，偏艺术的也好，中文、日文、英文风格的也好，任意风格都有可能会出现，这主要取决于我当时的喜好和随处的状态。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/poster-color
游戏 内容 用户 背景数字营销是指借助于互联网营销方式，帮助业务方和消费者建立触达渠道，实现业务的商业目标达成。按业务类型分为线下产品的数字广告和数字内容（APP、影音、动漫、游戏等）线上推广分发。本文主要聚焦在数字内容线上推广分发上，尝试从用户获取渠道、体验方式、内容感知、新技术带来的变化等几个方面，为相关从业者梳理数字内容流行的营销方式，以期提供一些启发和借鉴。往期回顾:腾讯出品！2021-2022设计趋势报告：社交APP篇前言人是群居动物，不论以何种方式，人和人都在社交。阅读文章 > 腾讯 ISUX 出品！2021-2022设计趋势报告：日系潮玩篇潮流玩具最初起源于日本，盛行于美国、香港，又叫艺术家玩具或设计师玩具，是玩具与艺术摆件融合的产物。阅读文章 > 腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 近年来用户内容消费呈碎片化、视频化，多元化趋势。短视频内容强势崛起，这种方式可以让用户更轻松、更深度消费内容。在各类营销类型中，短视频逐渐成为推广的重要方式，不仅在实体产品电商领域，日益成为重要的销售方式，在数字产品的推广上，也发挥越来越重要的作用。漫威在短视频平台注册虚构报社账号宣传《蜘蛛侠：英雄无归》电影，获得海量关注和点赞。说唱歌手 Lil Nas X 用《Old Town Road》做 BGM 在短视频平台发起的牛仔挑战（#Yeehaw challenge），使这首歌曲通过短视频成为了全球爆款。这首歌在美国地区的流媒体播放量超过了 25 亿次，在 Billboard 排行榜保持了 19 周的冠军。美国创作型歌手兼唱片制作人 Charlie Puth 尝试在短视频平台上发布一些旋律，发起了标签挑战 #writethelyrics，邀请粉丝们为旋律填词，这个标签累计视频观看量达到 38 亿次。在游戏领域，短视频/直播内容也正成为分发重要形式。短视频巨头已深入游戏腹地，2020 年移动游戏用户与短视频用户重合率达 82.5%，近六成移动游戏用户会用短视频主动搜索游戏内容。短视频在和游戏内容结合上有先天优势，消费门槛低，体验更沉浸，同时也可以快速获取其他玩家的感受。除此外，对于游戏制作和发行方来说，这里也是通过内容创作获取用户的良好渠道。游戏依托赛事直播、KOL 直播，聚集了大量高质玩家，相较于传统分发方式，直播具备互动性、真实性、及时性等三大特点。KOL 主播可以将游戏最直观的展现在玩家面前，更可以利用高人气迅速提升游戏热度。Facebook gaming 现在采用直播 feeds 的方式进行游戏的推广，使玩家对游戏体验感受更直观。黑客帝国 4 在官网为用户提供了一段可交互的宣传视频，根据用户的选择不同，触发不同类型结局。让用户更有代入感和掌控感。有种“我”开启了一段故事，也更容易带来体验上的惊喜感。洛杉矶流行艺术家 BIIANCO 为其单曲 That’s what friends are for 制作了互动音乐视频，以互动游戏的方式让观众进行多次选择，探索属于自己的故事。在游戏类内容宣传上，为让玩家更直接、更低成本的体验到游戏的玩法和特点。借助 2D、3D 以及交互视频素材高度还原游戏的真实场景，音效、视觉、玩法互动与游戏本身无异，将原有的游戏体验前置，让用户在短暂的广告展示时间中快速明白游戏的核心机制。2021 年音频内容呈爆炸式增长，播客这种很早就有的形式，在今年焕发了蓬勃生机。因为疫情原因，音频内容呈爆发式增长，相较于其他数字内容表达方式，音频覆盖了更多互动场景，用户可以在通勤、运动和打扫房子的时候在车里播放。21 年初热播的《流金岁月》不仅霸屏热播热榜，更首次将营销可能性转化到“看不见的”声音领域，最终联手十多家播客参与多方面讨论了女性、友谊、成长等话题，精细化传播，也让更多电台参与创作讨论，最终“我的「流金岁月」”主题内容实现了全平台百万级的总播放量。Beats 就联合播客《大内密谈》推出了一档名为「一首歌的诞生」的系列节目，主播相征会在节目中和各位音乐聊一聊他们的某一首歌从谱曲、写词到录制的全过程。2021 年，《大内密谈》连续 7 年获得 Apple Podcasts 年度精选播，拥有 400 多万忠实听众，单期节目收听量超过 400 万次。影音、游戏联动明星、品牌、知名 IP、传统文化产业、线下活动等等具有影响力的合作方进行战略合作，扩大双方影响力。如英雄联盟和 LV 的跨界联动，这款由 LV 设计的史上最昂贵、最奢侈的游戏皮肤，还未推出就捕获了无数 LOL 玩家的心，在让玩家兴奋不已之余，还引发了“这款皮肤究竟有多贵”的讨论。自 2017 年腾讯和敦煌研究院达成战略合作以来，王者荣耀飞天及九色鹿主题皮肤、QQ 音乐“古乐重声”音乐会、敦煌诗巾、“云游敦煌”小程序和敦煌动画剧陆续推出。三年间，累计超过 2.5 亿人次参与了“数字供养人”，超过 4000 万年轻人在王者荣耀中遇见了敦煌飞天，“云游敦煌”小程序目前已接待超过 3700 万人次线上游客，40 多万用户设计了自己专属的敦煌丝巾，24 万用户在腾讯公益平台为敦煌石窟保护项目捐款，15 万用户在线用声音演绎敦煌动画剧。《王者荣耀》是如何演绎敦煌第三季美学创意的？项目背景从 2018 年初识敦煌，以标志性符号“飞天”切入，带领用户认识敦煌，到 2020 年尝试在世界观中融入壁画中的故事与情感，讲述家喻户晓的敦煌九色鹿的故事，以爱守护。阅读文章 > 2021 年底热剧《风起洛阳》联动洛阳市文化单位正式发布“华夏古城宇宙”的全新概念，并宣布“华夏古城宇宙” 首发洛阳 IP 中的剧集《风起洛阳》、纪录片《神都洛阳》、动画片《风起洛阳之神机少年》，带领观众开启探索华夏文明的旅程。1）内容二创，形成粉丝传播文化影视剧宣发期，通过话题互动或设置传播内容，让用户创作内容进行传播，如《鱿鱼游戏》引发自发传播的抠糖挑战也引起更多受众注意激发用户观看。游戏也会在上线后逐步积攒口碑和玩家数量，官方在制作游戏时和后期推广上会提供一些方便传播的核心素材，由游戏粉丝玩家群体自发进行二次创作产生的 UGC 内容，也会引发大众关注。很多玩家会围绕游戏内容创作出新奇舞蹈、仿妆、COS、攻略、同人剪辑、漫画等，提供广泛的话题和讨论度。例如《CS：GO》，它通过一条开箱视频引爆短视频平台，打破了消费用户的圈层，从游戏用户到泛娱乐用户，最终令游戏内箱子的价格从 0.8 元涨至 2 元，极大地促进了消费。2）打造庆典活动，激发用户共情通过大型庆典活动，让用户共情，形成记忆共享，将志同道合的人聚在一起，形成文化传播。如英雄联盟每年都会举办盛大的全球总决赛开幕庆典，并加入一些让人印象深刻的游戏元素。相较于通过中心化推荐方式向用户展示广告内容，新的趋势是广告主利用用户社交关系链，在 facebook、微信、QQ 等社交平台进行分享传播。通过社交流量的传播内容，让受众觉得更贴近自己，也更可信。相较于其他数字内容，在游戏分发上私域流量日益重要，很多头部社交渠道在尝试如何更好的通过私域流量带动游戏分发。1）通过社交动态通知触达Facebook 游戏智能助手会在玩家的对手参与游戏后，通过 Facebook 与 Messenger 提示对方继续玩游戏，这种方式可以吸引玩家快速回归玩过的游戏；同时在首页好友动态中可以看到好友的游戏邀请动态和相关战绩，对游戏有较高的流量传播；游戏的高活玩家也可以通过邀请好友对战或分享游戏活动等方式进行裂变传播；2）线上社区深度触达Discord 建立起玩家之间互推、互鉴，玩家与开发者间直接互动的社区平台；社区内的种子玩家可以更直接地与开发者接触，让自己的声音被听到；同时他们也是优质的渠道传播者，将优质的讨论内容、游戏动态进行分享，让渠道转化效率更高；同时 Discord 可以创建「临时」游戏语音频道，可以让其他成员看到频道内成员正在玩的游戏；玩家也可以将游戏实况传输到服务器，在语音频道邀请朋友共同观看自己的游戏“现场直播”，让玩家的朋友在沙发上重现游戏的感觉；3）利用核心玩家作为推广资源触达游戏开发者利用多圈层 KOL 的优势，引导他们产出与游戏相关的 UGC，OGC 内容，形成话题热议，从而触达到目标用户，这种方式可以增强游戏影响力，甚至产生出圈的效果；比如 Youtube 通过扶持优秀的内容创作者，通过他们的粉丝圈或者社交关系进行游戏推广。2021 年初爆火出圈的社交产品 clubhouse，也是在早起利用名人明星和圈子的力量，通过采用邀请制的方式吸引了高质量的种子用户，带动 app 的影响力，提升其在世界产品和科技圈的热度。相较于传统的机器人客服，机器人进化出了新能力,在数字内容推广上展现新前景。在 Discord 中，由第三方机构提供各种数字内容服务能力的机器人，如将 Patchbot 机器人添加到频道后，可以将用户喜欢的游戏资讯/功能更新及时推送到频道中，让玩家获取信息更及时；在 Discord 和 Telegram 聊天群组中，有很多提供数字产品服务能力的机器人，为群中小伙伴定期推送和主动获取影音资源。随着元宇宙、区块链技术的火爆，数字内容也展现了不同以往的展示和推广方式。2021 作为元宇宙爆发年，向我们展示了未来的一角。通过虚实结合的互动体验，数字营销不再局限于单一的文字/画面，而是通过多体感的交互，让用户全方位的体验数字内容，为猎奇的互联网用户打开了数字营销新篇章。1）虚拟偶像成数字内容推广重要方式2021 年，随着元宇宙基建的推进和爆款案例的频出，虚拟偶像也迎来了新一波发展高潮，引得不少音乐公司纷纷入局。19 岁的加州虚拟网红 Lil Miquela 代表了 Z 时代的社群偶像，她在 instagram，youtube，discord 等平台分享自己的时尚穿搭，与名人或朋友的合影及生活想法，甚至她还在 Spotify 发布了自己的 15 首单曲。打造了跨平台的 Vmodel 身份。韩国虚拟模特 Rozy，不仅在社交网络分享自己的穿搭生活，还如同常人一样，营造看电影的真实体验，她的代言产品不仅涉及线下美妆，还为线上购物网站，电影等数字产品内容做宣传推广；下一个洛天依？6个超写实虚拟偶像产品分析编辑导读：洛天依、闪耀暖暖、虚拟 up 主，近些年，“纸片人”不断出现在大家的眼前，收获一批又一批的粉丝，成为青春永驻的“真偶像”。阅读文章 > 2）虚拟演唱会打造多感官音乐体验贾斯汀 比伯举行了一场由真实动作捕捉的线上虚拟演唱会，比伯在演唱《Peaches》、《Hold On》等人气单曲的同时，观看直播的观众可以根据场景与比伯进行线上互动：场景切换到田野时，观众可以点击不同颜色的花朵，让田野生出花朵形状的流光；切换到街头场景时，观众可以把聊天内容或爱心发送到比伯周围；这种虚拟演唱会的形式将全球的粉丝连接在一起，在虚拟场地形成万人互动的沉浸式音乐体验。宝可梦 25 周年，联合说唱歌手 Post Malone 推出了自己的虚拟音乐会，马龙在这次虚拟演唱中共演唱了《Psycho》、《Circles》、《Only Wanna Be With You》、《Congratulations》四首单曲，在虚拟世界中与知名宝可梦一起完成表演；也为新发售的《宝可梦：晶灿钻石/明亮珍珠》起到宣传作用；3）利用虚拟社区打造游戏/影视宣发新方式Decentraland 提供了去中心化的社交世界，用户可以创建自己的虚拟形象，在不同的游戏场馆进行切换，为游戏品牌起到了更好的宣传作用；同时 Dcentraland 提供了虚拟土地售卖，用户或开发者购买土地后，通过制作 3D 场景，发布自己设计的各种产品或服务，这些场景也可以使用 VR 终端来体验，用户或开发者可以发挥无限的想象力进行宣传创作。韩国剧集《鱿鱼游戏》热播后，剧集中的游戏关卡在罗布乐思公司的游戏社区被“1:1”还原，其中的游戏“1、2、3”木头人进入推荐排行榜，吸引了众多观众成为玩家，也让很多玩家去奈飞追剧，扩大了该影视资源的影响力。4）区块链及 NFT 技术赋予数字内容流通新方式伴随着区块链技术的发发展，有的游戏分发公司也在尝试通过区块链技术进行游戏发行。如 Ultra 试图打造一个基于区块链的游戏发行平台，通过通证经济实现更加合理的利益分配。对游戏玩家来说，可以在下载完成前就尽情享受新买的游戏，并在玩游戏时继续下载缺失的数据。玩家可以自主选择是否允许游戏内弹出广告，观看广告可获得通证奖励，邀请朋友、参与测试和策划游戏也可获得相应通证奖励。因此，游戏玩家既可以即时玩独家游戏，又可以通过多种方式赚取通证奖励。NFT 实现了虚拟物品的资产化与流通化，赋予了数字藏品/游戏/影音等内容的虚拟价值；艺术品数字资产化将拓展影视相关内容的产品链，因被赋予独特的价值，使得其可以通过交易完成变现。2021 年 10 月 11 日，王家卫首个 NFT 作品《花样年华——一刹那》以428.4万港元价格成交，同时创下王家卫个人作品与亚洲电影NFT作品拍卖价格新高。艺术家扎堆的「元宇宙」到底是什么？7000字帮你完全看懂！元宇宙是一个全新的数字世界，我们可以想象的任何东西都可以存在。阅读文章 > 总结伴随着用户数字内容消费习惯的变化，数字内容呈现方式、渠道和分发方式都在发生变化。可以看到在未来，数字内容制作方和发行方，需要为用户提供更多元的方式深度进行体验，同时承载数字内容的平台也逐步由传统的中心化渠道向私域流量转移。作为数字内容发行方，如何有效且长线输出高品质内容，构建内容壁垒，探索更有吸引力的表现形式、缩短和用户的沟通渠道，是未来需要深入思考的。参考文献《2021 数字营销趋势重磅出炉，来年的营销风向抢先看！》《2021，数字广告几个可见趋势》《元宇宙中的土地价值评估初探》-微信公众号“金牌估值”Facebook Gaming 博客 https://www.facebook.com/fbgaminghome/blog?type=develope《科技巨头布局元宇宙系列报告 》《虛擬網紅當道——「不是人」卻坐擁百萬粉絲！》欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/2022-design-trends-2
用户 形式 内容 搜索设计看似简单，展现形式上只有一个输入框和搜索按钮就可以了，但是里面隐藏了很多交互细节。最近工作中刚好有搜索相关的设计需求，今天就来总结下搜索中的交互细节设计。本文的主要内容包括：搜索的作用搜索栏的形式搜索设计的原则搜索的作用用户是懒惰的，不愿意花太多精力去记忆信息，“无脑刷”的抖音玩法让亿万用户乐在其中。因此产品设计时需要尽可能的降低用户的行为门槛，“千人千面”推荐机制越来越重要。但是搜索查询是用户主动行为，相对更有掌控感，始终都是产品设计中非常重要的方式。搜索主要是帮助用户从海量数据中快速找到想要浏览的内容，例如百度、谷歌等搜索引擎能够成为单独的产品，可以看出搜索在互联网时代具有极其重要的作用。主要包含以下两个方面：1. 降低用户的行为门槛搜索实现了简单的输入，快速输出，只要几个关键字就可以获得符合用户需求的内容，将原有的用户行为成本转移给系统，从而让购物消费更加快捷、轻松。而语音输入和拍照搜索进一步降低了用户行为门槛。2. 减少用户操作，缩短行为路径搜索功能可以帮助用户快速定位信息，从而提高了用户对内容的触达效率。例如当用户有明确的购物需求时，不需要一步步点击商品分类，选择商品类型、品牌等信息，就可以快速直达自己所需的商品。搜索的形式搜索栏是搜索功能的起点，内容不复杂，但是也有多种形式。我简单的将其分为完全形式、简化形式以及类搜索形式 3 种类型。1. 完全形式我们大多见到的搜索栏是由输入框和搜索按钮组成的，用户输入相关内容后，点击按钮或者回车就可以执行搜索了。在完全形式下，根据搜索范围的设定，又可以分为全量搜索和定向搜索两种形式。全量搜索就是直接对全平台内容执行搜索，在搜索结果中分类展示。例如腾讯云 Web 端搜索功能，用户只需要输入关键字进行模糊搜索就可以了。定向搜索则是用户可以预先设定搜索范围，可以减少后续用户的筛选操作。例如淘宝 Web 端搜索栏可以设定“宝贝、天猫、店铺”3 个搜索类别。微信搜索栏兼具了两者的功能，既可以直接输入关键词完成全平台内容搜索，也可以设定范围定向搜索。完全搜索栏包含了分类项、输入框、搜索按钮等形式，因此占据的页面空间也相对较大，更适合重搜索场景的产品。例如在电商移动端产品中，虽然页面寸土寸金，但是搜索栏仍然采用完全搜索栏形式，辅助关键词引导，可以更好的抓住用户视线。2. 简化形式简化形式主要用于弱搜索的场景中，通常只是用图标来告知用户存在搜索功能，更有利于页面空间布局。当然形式也是随着页面的不同而改变的。今日头条的首页都是采用了完全搜索栏的形式，进入到资讯详情页面时，用户的核心任务是查看页面信息，用户的搜索需求则变成了弱需求，只是提供了图标入口，能够满足用户的快捷操作即可。3. 类搜索形式如果用户没有直接的搜索需求，而是在浏览商品过程中，对某类型商品产生了兴趣，希望查看更多相似商品。电商平台专门增加了“查看相似”的功能，用户不需要输入任何内容，只需要点击按钮就可以查找相似商品，从而提高了用户的搜索效率。搜索的交互设计原则完整的搜索流程包含了各种细节。例如搜索栏的形式、光标停留、输入状态、异常数据、搜索结果、二次筛选等等。整个过程没有非常艰深的业务内容，主要是交互的细节设计，可以总结以下 3 个设计原则。1. 信息引导移动端产品中页面空间有限，搜索栏更多的是作为入口，通常会增加关键词引导用户点击。用户点击操作后会进入到专门的落地页面，里面平铺了各种搜索信息，例如搜索历史、推荐内容，甚至各类营销榜单等，方便用户快速操作的同时，增强的内容的曝光和引导性。而在 PC 端产品具有页面空间优势，用户的搜索过程完全是通过搜索栏完成的。为了做好用户引导，搜索栏中会增加历史搜索记录，下方增加推荐关键词，帮助用户快速完成搜索。同时也可以唤醒用户对某些商品的兴趣和记忆，从而挖掘用户潜在的搜索需求。2. 用户效率搜索是效率型操作，如何快速帮助用户完成输入、结果查询是最主要的设计目标。例如当光标停留时，搜索栏就会呈现各种已有信息，方便用户选择输入。用户输入过程中，搜索栏通常会展示关键词联想信息，方便用户快速选择相关内容。淘宝甚至给出了二级的商品标签，引导用户更准确的定义商品，从而提高搜索的准确率，最终更好的提升用户的购物效率。当关键词与内容不匹配时，反馈结果前置可以减少用户的后续操作。腾讯云搜索栏输入的关键词不符合内容时，并没有跳转到结果页面再给出信息反馈，而是直接在搜索栏中做出反馈，从而减少了用户的跳转次数。由于 PC 页面的展示空间更大，用户的行为成本相对更高，为了帮助用户实时搜索，首页内容滚动时还会增加吸顶搜索浮层，方便用户快速操作。3. 隐私保护搜索历史有利有弊，不经意间可能会泄露自己的隐私。为了打消用户的顾虑，搜索通常都会增加清除记录功能。而在今日头条中细化了隐私保护项，搜索历史不是简单的全部清空，而是可以单独删除，便于用户保留所需的内容。另外还增加了无痕搜索模式，避免用户搜索之后会忘记删除关键词的场景。写在最后设计就是细节不断打磨提升的过程。搜索中还有很多细节设计，例如关键词的视觉引导性、常搜选项置顶、搜索结果的二次筛选等等，今天就不一一讨论了，欢迎大家留言交流。如何做好浏览器搜索设计？我总结了这9个建议对于搜索，百度百科给出的基本解释是: 给予一定的条件后再寻求,搜查。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/3-search-design-principle
工艺美术 美国 赖特 前面我们讲述了英国的工艺美术运动情况，包括“三位大神”与“四大行会”。通过3位顶级大神，带你了解工艺美术运动史上一回我们谈过了现代设计诞生的社会与文化条件，而第一个被视为有现代设计特征的运动是 19 世纪下半叶在英国产生的“工艺美术运动”（The Arts & CraftsMovement）。阅读文章 > 本回我们的镜头切换到了北美洲的美国，话说当时工艺美术运动的各路人马都在竭力否定机械工业文明，排斥工业化批量生产。但在 19 世纪末工艺美术思潮得以从英国本土传播到欧洲甚至跨越大西洋去到美国却正得益于机械文明所创造的技术条件。19 世纪末的英国比方成熟的机械印刷术，海陆空三维立体的交通条件与工具等，如果没有这些基础难以想象这个艺术运动可以得到广泛传播。特色差异19 世纪末，工艺美术运动开始在英国慢慢淡化，因而在美国的展开如同一场接力跑，而且延续时间较长，一直去到 1915 年前后才结束。1910 年代的美国一些美国设计评论家认为这个设计思潮的苗头其实在 1878 年就已经在美国产生，而重要的转折发生于 1893 年芝加哥举办的“哥伦比亚世界博览会”（The Columbian World’s Fair, 1893）。1893 年芝加哥 “哥伦比亚世界博览会”在这场展览会上美国著名设计师弗兰克·劳埃德·赖特（详见下文）展出了具有典型“工艺美术”风格的家具设计，体现出美国设计师对工艺美术风格的美式探索。被誉为“20世纪米开朗基罗”的设计师，为何让甲方闻风丧胆？在史太浓的《设计师长寿榜》上，排名第六的弗兰克·劳埃德·赖特（FrankLloyd Wright）是一个大人物。阅读文章 > 其实这一年也刚好是他离开老板“摩天大楼之父”路易斯·沙利文（Louis Sullivan）开始创业的同一年。晚年惨淡的摩天大楼之父：顶尖建筑设计师路易斯·沙利文在过去的故事里，史太浓经常提到一句设计哲学：“形式追随功能”（Form follows function），并且在我自身设计工作中，一直信奉此话。阅读文章 > 赖特及其早期设计的家具纵观历史我们可以发现，艺术风格的迁徙都离不开关键人物，英国工艺美术运动当中几位著名设计师，比方阿什比、克莱恩、沃尔特·克朗都曾经多次造访过美国。当时美国才宣布独立 100 年左右，是个移民为主的国家，大量欧洲人在 19 世纪涌入美国，这些都成为工艺美术运动在美国形成的关键原因。除了英国设计师的造访及欧洲人迁徙，美国本土设计师也时常到欧洲参与交流学习，让彼此的艺术文化与设计理念产生有机交融。美国的工艺美术运动风格室内设计情况如同饮食文化的碰撞，比方在深圳大家可以尝到粤式川菜及湘菜，服务员问需要多辣还可以回复一句“广东辣”，可见存在都是合理。美国的领土幅员辽阔，所以工艺美术运动在美国呈现出一种多元化特征，比方东西岸的差异，还有印第安文化的结合等，并没有一种完全统一的设计哲学。但运动深度却比英国更为彻底，美国人加入了他们最擅长的商业化元素，任何风格去到美国人手上最后都会变作为经济发展而服务，这也是美国设计风格的一大特征。美国的工艺美术运动风格灯具美国的工艺美术运动集中在建筑、家具及灯具（因为白炽灯的发明与应用）、书刊这些范畴。另外美国工艺美术运动在设计宗旨与思想上虽然靠近英国，但表现形式上却没有太多英国人惯用的哥特风格，反而喜欢向东方国家，比方学习中国与日本的典雅风韵。美国的工艺美术运动风格家具所以我们需要补充说明，一种设计风格或者运动很多时候更重视思想与原则，而并非单纯的形式，这也是最困扰研究者的。关键人物美国有位著名作家叫阿尔伯特·哈伯德（ElebrtHubbard），他的代表作《把信送给加西亚》（A Message to Garcia ）1899 年出版后至今卖出 8 亿本，是全球最畅销书籍排行榜的第 6 名。书籍《把信送给加西亚》他同时也是一名喜欢动手的设计师与成功的出版商，他在 1894 年时候曾经到英国拜访年迈的威廉莫里斯，参观了莫里斯著名的科尔姆斯格特出版社（KelmscottPress），获得莫里斯面对面传道解惑的机会。莫里斯与哈伯德回国后他就成立自己的出版印刷公司，专注于出版推介工艺美术思想的书籍，书籍的制作也完全按照莫里斯的标准，印刷精美内容精致，受到美国市场的广泛喜爱。连莫里斯设计的一款英文字体也因此打入美国市场，成为出版社青睐的印刷字体，所以哈伯德成为将工艺美术平面风格引入美国的关键人物。莫里斯的字体设计为了表达对莫里斯的尊敬，他还曾经将自己设计的一张椅子命名为“莫里斯椅”，类似这样用作品命名致敬大师的事情在设计史当中其实屡屡发生，后面我们也会讲述相关例子。哈伯德设计的莫里斯椅拜访过莫里斯的美国设计师还有亨利·哈柏森·理查森（Henry Hobson Richardson），他是一名建筑设计师，曾经与莫里斯见过几次面。莫里斯与理查森经过深入交流，理查森成为莫里斯艺术风格的忠实迷弟，不但自己喜欢购买使用莫里斯设计的工艺品，还在美国进行大力推广。还有一位大家耳熟能详的美国作家，《野性的呼唤》作者杰克伦敦（Jack London）则是另一位英国工艺美术运动大神约翰拉斯金（John Ruskin）的迷弟。曾专门去英国感受工艺美术运动的相关工艺品，并且撰文介绍这个风格，他也属于当时美国推广工艺美术的著名人物之一。杰克伦敦在 19 世纪 90 年代，上回谈过的“艺术和手工艺展览协会”出版的介绍英国工艺美术运动最有影响力的刊物《工作室》也开始广泛传播到美国本土，给美国诸位探索中的设计师提供了强大的理论支持。要知道那个年代并没有互联网这回事，所以资讯本来就是值钱的，谁先掌握到最新设计风向谁就更有可能抢到商业先机。很快美国也开始出现工艺美术的专业期刊，名称为《手工艺人》（The Craftsman），创办人是美国著名家具设计师古斯塔夫·斯蒂克利（GustavStickley）。《手工艺人》他也曾多次到访英国，经过跟英国诸位工艺美术运动的主力设计师交流学习，他的体会是英国有特定的历史与社会背景，美国的情况则是不同的，不能直接将英式工艺美术生搬硬套。所以他的期刊致力于提倡发展美国式工艺美术风格，培养大家的创造力。古斯塔夫·斯蒂克利跟其它美国设计师一样，斯蒂克利并不反感工业机械，反而善于利用，比方他喜欢先将产品批量化制作，再用手工来加工艺术部分，产品销量也很不错，收入喜人。斯蒂克利的家具设计情况如同当代面对机器人将可能全面参与社会工作及生产时，大众表现出恐慌情绪，一些企业家却认为：机器人可以做的就让机器人做，机器人做不了的就人做，人类永远比机器人聪明。西岸大王赖特美国的工艺美术运动存在东西岸区别，东岸主要的代表人物就是前面谈及的哈伯特与斯蒂克利，而西岸就是美国著名建筑大师弗兰克·劳埃德·赖特（Frank LloydWright）。赖特在现代设计史中是一个很特殊的人物，因为他的设计生涯非常长，而且风格一直变。晚年赖特及他的后期作品他是美国工艺美术运动的主要代表人物之一，但一直活跃到国际主义时期，基本参与了每一个主流设计思潮并能做到完美适应，在设计史中戏份很重。1897 年时候西岸芝加哥成立了一个名为“艺术与手工艺协会”的组织，大家是否感觉似曾相识，其实跟英国的“艺术与手工艺展览协会”很接近。其创办人之一就是赖特，虽然赖特是以建筑师身份为人熟知，其实他的设计范围跟早期各位大咖一样，属于全栈型的。赖特设计的家具在美国工艺美术运动时期他主要的作品多数为家具、玻璃艺术品、灯具、餐具、织物寄银器等。他开创的“草原风格”派住宅其实也属于工艺美术时期的典型代表，设计特点是喜欢采用低矮、宽阔的倾斜屋顶，室内视野开放，强调水平线效果。建材主要使用石头、木料、粘土等就地取材的天然材料，与环境和谐统一，引领一阵风潮，代表作品有“马丁住宅“（Martin House，1904 年）。赖特设计的马丁住宅除了住宅，家具设计是赖特在美国工艺美术运动阶段的一大亮点，他设计出很多精致、讲究纵横线条装饰的椅子，造型质朴，结构简单，还喜欢采用中世纪特点的高靠背。赖特设计的高背椅很有个性这样的椅子其实跟格拉斯哥四人组也特别像。（详见「平面设计史」系列）用一篇超全面的文章，帮你了解艺术团体「格拉斯哥四人组」上回我们讲述了法国的没落贵族设计师图卢兹·劳特累克（Henri de Toulouse Lautrec）的故事，身体残疾的他虽然一生短暂，但其作品非常出色，是法国地区新艺术运动风格的引领者之一。阅读文章 > 1889 年他为自己伊利诺伊州的家设计了一个八角形书房，结构简单明了重视采光功能，借鉴了部分稳重典雅的东方元素，在家具设计上明显强烈的赖特个人风格。赖特设计的书房这种风格跟美国工艺美术运动融为一体，对比英国区显得较为简约大气，史太浓感觉这种风格已经贴近后来的现代主义，同时有厚重朴实的历史感，跟当时主要使用原木材料也密切相关。搞钱才是人间清醒工艺美术运动在美国存在一个矛盾，就是如何协调商业关系，毕竟工艺美术是强调手工艺的，而当时很多艺术元素确实是机械生产还无法实现，或者说效率低下。英国的工艺美术思潮显得更加理想主义，比方莫里斯可以为了贯彻自己的手工设计理念而节衣缩食（其实他不缺钱），这方面美国人很难做到，心态上也无法理解，他们更讲究实用主义以及追求物质富足。英国的工艺美术风格更加细腻用如今的话来说，就是“搞钱才是人间清醒”。另外英国跟美国在社会结构上存在差异，比方英国的艺术设计师们一部分在城市一部分在乡村，他们选择的自由度更大。假设觉得城市成本太高他们就回到乡村创作，销售给当地市场，而美国是高度商业化社会，设计师几乎都依存于城市，在城市他们的作品才能更有机会获得客户。美国工艺美术运动灯具设计综合这些原因注定工艺美术运动在美国的发展是不纯粹的，是一个结合了工业生产的折中结果。这个情况跟如今中国差不多，大部分优秀设计从业者都集中于北上广深。但随着互联网进一步发展，以及疫情发展的不稳定性，以后甲方乙方大部分将不需要通过实地见面来完成合作。当前以我们本身经营设计公司的经验来看，确实也有诸多甲方其实从合作都验收都并没有见面，所以设计师在选址上以后的自由度会更大一些。另外美国社会更强调合作与组织，跟英国喜欢“一人一个公司“的情况不同，美国的行会及公司制度在当时的世界上最领先。1910 年代的美国办公室但这种领先也表明环环相扣，设计与生产，市场与营销都是一个关系链，独善其身往往难以发展。因为美国社会这个特质，很多风格来到美国通常都会发展迅速而且应用得更为彻底。所以工艺美术运动风格也仅仅是作为一种商业元素风行于美国市场一个时间段，有继来者就被慢慢替代或者淡化。最后虽然工艺美术运动到了美国名头还是一样，但实质性的内容已经差异颇大，所以大家需要清楚的重点是美式工艺美术运动不是一个统一及集中性的设计运动，更像是一个在美国流行过的设计思潮。美国工艺美术运动产品资料后人为了方便概括这个思潮，称作“美国工艺美术运动”。谢谢各位，我们下期再会！欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/the-arts-and-crafts-movement-2
产品 代码 视觉 前言：在 2020 年，疫情最为严峻的时候，B 端这一领域得到了前所未有的关注，而那时，身为 B 端用户体验设计师的我，也曾总结过，当时 B 端设计的诸多趋势，比如：多端需求：即桌面端、平板端、移动端的设计形式设计中台：拥有更为统一的设计平台，与这两年讨论较多的设计资产相同，都是起到快速协作的作用随着 2022 年的到来，B 端行业又会迎来哪些新的机会？今天我们就从整个的 B 端入手，回顾一下 2021 年的设计形式，展望一下 2022 年的设计趋势。当然趋势完全是我自己个人主观理解，仅供参考，如有异议，以你为准~完整的趋势，我们会分为视觉趋势与产品趋势：视觉趋势：主要围绕设计当中的细节展开，比如图标、色彩、字体、插画等产品趋势：主要是了解不同的 B 端产品当中究竟有哪些发展形式，对于设计师又会产生何种影响？视觉趋势1. 3D 设计风格虽然 3D 化的视觉风格早已到来，但是在 B 端市场上，3D 风格在此之前依旧表现的十分克制。随着 C4D、Blender 这些 3D 建模软件的不断普及，再加上互联网上关于 3D 建模教程的增多，你会发现 3D 风格的视觉表现，是一个 B 端视觉设计师的基本要求。而 3D 风格用在 B 端软件当中，会有两个使用场景：图标因为在 B 端产品当中，图标本身就是非常难以去表现，比如“物联网，大数据”，许多抽象词汇很难通过一个具象的事物进行表达，而在企业官网当中，在视觉表现上的要求又十分的高。因此你会发现，在视觉风格上的选择，往往只有 3D 图标 + 插画这一条路。并且 3D 图标的使用场景不会太过于局限，也可以用于产品的工作台、运营营销工具箱等页面，因此 3D 图标的出现，它的应用场景也会相比之前要更加的广阔。可视化大屏大屏设计也在不断的“内卷”，因为传统的 2D 可视化大屏所搭建出来的大屏已经满足不了企业的野心， 像 DataV 腾讯云图 ，大家都在朝着 3D 风格，炫酷的方向进行延展，因此也就会导致 3D 的视觉风格需求激增，而 3D 建模仿佛就是大势所趋。2. 新拟态虽然新拟态是在前两年的产物。这个设计风格背后，遭到了很多设计师的质疑与排挤。但是随着这个风格的不断成熟，感觉它在 B 端视觉领域（特指的是官网 ），是非常受欢迎的，因为整体的风格，与官网的设计形式趋同。同时作为 B 端产品的官网，其实是更需要新拟态这种风格。因为电脑场景下鼠标光标对页面进行 Hover 操作给出的真实反馈，而使用了新拟态的官网按钮，给你的反馈非常真实。这里安利一下腾讯云的首页官网，大家就会发现在设计风格上大量的采取了新拟态元素，并且配合 3D 风格的图标，以及毛玻璃材质的设计，让它的设计瞬间加分不少。3. 开源的设计系统在去年，设计系统迎来了一波发展的高峰期，随着字节、腾讯，三大设计系统（Arco Design、TDesign、Semi Design）的开源，其实是给我们很多 B 端设计初学者，有了更加完整仔细的 B 端入门教程。比如 Arco Design 的组件用法 https://arco.design/docs/spec/link清晰的讲解了每一个组件的使用方式，以及注意事项，仔细阅读这里面的内容，其实就是 B 端设计的入门学习。而未来，国内的环境，开源的系统也会越来越多，大家可以针对这几大类不同的设计系统进行对比，或许会有一番收获。产品趋势4. 超级 app这里的超级 app 可能和大家潜意识里的支付宝、微信这些软件不太一样在 B 端行业，随着疫情的不断扩散、再加上两年时间的发展，很多 B 端产品的功能架构都出现了一个现象，产品的功能开始变得非常拥挤。因为 B 端软件的核心价值其实就是靠着一个又一个功能去累积，也就意味着随着 B 端产品的发展，功能模块在不断的累积，导致在设计层面，这样的现象变得更加严峻。你会发现左侧的导航菜单已经完全没有办法装下这些导航内容，而这一现象也反映在很多产品当中，比如我了解的飞书管理后台、薪人薪事 等等诸多 B 端产品，它们在整个导航内容上，已经增加到一级导航 15+ 、二级导航 40+ ，这无疑会开始对设计师的能力造成巨大考验。面对这一情况，许多导航菜单都将会迎来前所未有的挑战，最近也在深入研究导航菜单过多时的解决办法，发现了一些新的导航菜单设计方法，有机会咱们重新梳理一下导航菜单的内容，将 B 端设计指南文章进行更新。6000 字干货！B端产品的导航菜单设计5步法导航菜单对于用户的使用来说尤为重要，本文是我从实际工作出发，结合自身产品和过去经验对于导航进行的一次全面总结。阅读文章 > 低代码定制化低代码一直是我关注的一个领域，先给不明白低代码的同学简单科普一下。低代码，一种快速开发应用的软件，将通用、可重复利用的代码形成组件化的模块，通过图形化的界面来拖拽组件并形成应用。低代码能够实现只写少量代码或不写代码，类似用“乐高积木”的方式来开发。在国外有很多著名的低代码成功案例。Outsystems（国外非常出名的低代码平台）帮助施耐德电气在 20 个月内推出了 60 款应用程序，开发过程加速了两倍；在 2012 年即将推出 Model S 之际，特斯拉放弃了 SAP 的 ERP 产品（可以思考一下为什么），改用低代码开发平台 Mendix，用 25 个人四个月时间自建 ERP 系统。去年，低代码平台，也有很多新产品面世，其中就包含：因此你会发现，其实低代码就是在解决一件事，围绕着某一个业务场景，通过平台的持续完善优化。让所有的功能都能围绕这个业务展开，其中包括：权限、时间轴、流程、表单、公式等等，能够解决很多特殊的业务场景。而低代码会涉及到设计思路上的转变，以及低代码编辑器的出现，如何去设计如此复杂的配置流程，如何让用户能够快速上手，如果你能够有比较完整的思路，这些都会成为我们设计的新机会。行业细分随着互联网市场的不断发展，用户会越来越关注产品在自己行业的应用，比如 CRM，其实只是一个笼统的称呼，现在 CRM 市场又会分为 SCRM、运营 CRM，等诸多产品。SaaS 类的平台也出现了负责从虚拟主机和数据库层面入手的 iPaaS 以及从应用和数据层面入手的 aPaaS。即使是大家经常使用的 钉钉、企微、飞书，它们也在各自的领域有所擅长。因为 B 端产品，在底层逻辑上是不能允许趋同的产品出现，如果你和别人的产品一样，其实是没有办法在目前的市场上立足。因此你会发现，虽然产品形式都会比较相同，但是 B 端市场十分广阔，大家都在去寻找自己产品的差异化。当然市场是瞬息万变的，这里也只是简单聊聊我自己的看法，希望对你有所帮助。5000 字干货！超全面的B端设计规范总结不知不觉已经深耕在 B 端这个领域 3 年有余，很多人接触过 B 端后会觉得乏味，因为 B 端的设计在视觉上并没有 C 端那么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。阅读文章 > 欢迎关注作者的微信公众号：CE青年交互设计本篇来源：优设网原文地址：https://www.uisdc.com/2022-b-end-design-trends
图标 干货 合集 大家好，2月的第3波实用设计干货合集来了！这一波干货里应该有不少有趣的工具是你感兴趣的，比如仅需拖拽就能完成设计的交互设计平台，UI 展示性样机编辑器，实用性特别强的也有，字体和图标就不说了，还有推荐设计工具的平台。具体就往下看吧：1、无代码视频交互设计平台https://adventr.io/这个名为 Adventr 的工具其实是一个非常强大的无代码交互式流媒体内容编辑器，它让设计人员无需懂得代码，直接妥拽不同的流程和功能模块来实现各种各样的视觉效果，以前需要代码实现的功能，这次能够直接搞定了。这款工具是付费的，不过提供为期一个月的免费试用，值得上手体验一下哦。2、在 Canva 中访问300万 iconscout 图标https://iconscout.com/plugins/iconscout-for-canva这个是 iconscout 和 canva 合作的的一款插件，如果你日常会使用 Canva 设计各种素材和物料，那么可以装上这款 iconscout 所提供的插件，直接调用来自这一平台的超过 300 万图标。这类插件的好处在于，你无需离开当前的软件，就能获得高素质图标素材的支持。3、设计工具推荐平台 Toools Designhttps://www.toools.design/这个名为 Toools Design 的平台会专门推荐各种实用的设计工具和素材，网站本身会每周更新，值得一提的是，这个网站将各种类型的素材分门别类，方便你根据领域进行查询和筛选。4、开源免费图标合集 UI icons Linehttps://app.streamlinehq.com/icons/streamline-mini-line这是一组包含超过 1000 个高素质线性图标的素材合集，其中绝大多数的图标在设计之初，是基于 14×14 px 的像素网格来进行设计的，确保在低分辨率的屏幕上也有不俗的结果，同时它也可以导出矢量的版本。这套图标是开源免费的，并且遵循的是 CC 4.0的协议。5、展示性样机设计工具 UI Generatorhttps://uigenerator.org/有意思的事情是，并非所有的 UI 都是设计来「使用」的，在很多网页、APP 和 海报 以及Banner 当中，会使用一些展示性的 UI 样机来辅助呈现主题，这种样机如果重新设计工作量也不小，这个名为 UI Generator 的工具就是专门干这个事情的，它可以生成满足各种不同需求、贴合主题的 UI 界面样机，不求能用，但求能看。6、适用于云服务类产品的3D图标http://cloudicons.store/图标3D化似乎已经成了一个趋势，这个名为 Cloudtech 的服务提供一组总计 48 个可编辑的3D 图标，这项服务完全版是收费的，不过提供免费 Demo，如果其中正好有你看中的图标，不妨先试试看！7、快速构建网页组件的在线服务https://nimble-landing.vercel.app/Nimble 是一个在线的UI组件和代码编辑器，它提供一种更加便捷的可视化编程，来辅助你快速完成 UI 的设计和实现。目前 Nimble 支持 Tailwind CSS，你可以直接调用大量的 Tailwind CSS 资源，随后还会支持 bootstrap、bulma 以及 Material UI 等主流的 UI 组件库。8、复古加粗手写字体 Bald MontBald Mont 是一款带有强烈复古质感的字体，字体本身笔触较为柔和，但是带有立体的阴影，适合用于海报、Banner 等场合的标题文本。这款字体是免费的，但是仅供个人使用，你可以在文章开头和结尾的百度云链接中下载获得。9、免费 APP 图标设计素材这是一个名为 App Logo Icon Maker 的工具，或者说素材。它内置了 6800 + 的图标组合，让你可以在 Figma 当中快速创建出素质不错的 APP 图标。这波图标素材仅限个人使用，具体可以在文章开头结尾的百度云链接种获得。往期干货：第一波！2022年2月精选实用设计干货合集大家开工大吉！阅读文章 > 第二波！2022年2月精选实用设计干货合集大家好，2月的第2波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 2月干货第三波16m9q6v 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2-design-resources-vol3
纹样 冬奥会 传统 中国传统纹样历史悠久、种类丰富，是可以在各项设计中深入挖掘的宝藏。云雷纹、回纹、龙纹、凤纹、万字纹、寿字纹、唐草纹等纹样在现代设计中应用也非常广泛。第 24 届北京冬奥会中也出现了很多有关传统中式纹样的元素，向世界展示着中华传统文化的精致美妙。今天就和大家分享一下冬奥会中那些被创新使用的中式传统纹样，分析它们是用哪些方式来提炼优化的，帮助大家在之后的设计更好的运用。元素替换——冬奥会奖牌上的冰雪纹以中国古代同心圆玉璧为灵感设计的北京冬奥会和冬残奥会奖牌“同心”运用了两种传统中式纹样，一是代表吉祥如意的「祥云纹」，另一个则是与冬奥主题呼应的「冰雪纹」，而「冰雪纹」就是将传统「冰梅纹」中的梅花替换成雪花后得来的。「冰梅纹」又称「冰裂梅花纹」，是冰裂纹和梅花纹结合形成的一种纹样，寓意高洁美好，是古代服饰、瓷器、建筑中常见的纹样。「冰梅纹」中的“冰”贴合冬奥会的冰雪主题，将“梅”替换成雪花元素，使「冰梅纹」脱离了传统寓意的限制，升级成「冰雪纹」，展现了中国人民对冬奥会在京顺利圆满举办的美好祝福。元素简化提炼——颁奖礼服上的宝相花北京 2022 年冬奥会和冬残奥会颁奖礼服中有一套「唐花飞雪」，主要用于颁奖广场的颁奖仪式中，其中「唐花飞雪」中的“唐花”原型就是盛行于隋唐时期的「宝相花」。宝相花一般以某种花卉（如牡丹、莲花）为主体，中间镶嵌形状不同、大小粗细有别的其它花叶，尤其在花芯和花瓣基部，用圆珠作规则排列，富丽华美，故名宝相花。寓意圣洁、富贵和美满。传统的宝相花图案线条繁复华丽，令人眼花。如果不经提炼优化直接运用到设计之中就会显得突兀，也不符合现在的审美。为了避免这种问题，「唐花飞雪」的花纹在设计时对传统的宝相花纹样进行了提炼，最终简化成了由三种元素重复环绕构成的「唐花」，造型简洁优美，传达出包容开放，欢迎世界各国共同参与盛会的新态度。配色优化——引导员头上的虎头帽2022 年是农历虎年，作为最受人们喜爱的生肖之一，有关虎的元素也被应用到冬奥会之中，冬奥会开幕式上引导员头戴的虎头帽就是代表。虎头帽是传统的中国民间儿童服饰，象征远离邪魔病毒，保佑儿童健康成长。传统虎头帽以亮黄、红、绿等对比鲜明显眼的颜色作为主色，十分喜庆。冬奥会的虎头帽借鉴了传统虎头的纹样，但是完全放弃了传统的喜庆配色，改以蓝白为主，色同冰雪，清新可爱，更符合冬奥会的整体气质。解构重组——主火炬台上的联珠纹北京冬奥会开幕式上的独具匠心的点火仪式一定给大家留下了深刻的印象，那个由所有参赛国家引导牌共同构成的巨大雪花主火炬台也令人惊艳，让人想起李白的那句想象浪漫奇妙的诗句“燕山雪花大如席”。如果仔细看主火炬台的元素构成，我们就会发现他的结构和中国传统的「联珠纹」非常相似。或许主火炬台在设计的时候没有用直接借鉴「联珠纹」，但是这种相同元素间巧妙的重复构成形式，却对我们创新运用传统纹样有一定的借鉴意义。比如利用重复的形状边缘共同构成新的形状（六边形围绕成圆形），还有赋予简单元素新的含义（引导牌外形边缘融合了中国结的形状），也可以和上面提到的元素替换搭配使用，赋予更多贴合主题的内涵。所谓越是民族的就越是世界的，中式传统纹样魅力无穷，值得我们在设计中创新利用。结合新主题新理念对传统纹样进行提炼简化，优化配色，或者对其中的元素解构重组，都能让中式传统纹样更贴合你的设计主题，使作品中不断焕发新活力。涨姿势！设计师应该要了解的9种常见中国传统纹样设计师应该要了解的9种常见中国传统纹样，制作传统主题的海报、网页、PPT都能用到。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/winter-olympics-chinese-pattern
博物馆 作品 艺术 近几年，全球无数图书馆、美术馆和博物馆都逐渐将馆藏数字化，透过各种渠道开放到网络上，提供给需要的使用者在线浏览或下载使用，让我们不用亲自飞到几千公里外就能坐在计算机前仔细观赏，更重要的是有些素材可在下载后再利用，对于创作者来说也省去重新制作的时间。接下来，小福妹就带领大家一起“云”欣赏世界各地的艺术瑰宝！Gallerix网址： https://gallerix.asia世界名画档案馆 Gallerix 专门收集世界著名画家的作品，收集超过 4 万多名艺术家的近 16 多万幅作品，是一些资深大师在互联网上最完整的收藏品之一。在这座巨型虚拟博物馆里，作品按照画家进行分类，你可以方便地检索你想欣赏的名画。同时，网站也包括近代画家们的作品，完全可以称之为绘画界的博物馆。在这里我们可以发现过去的艺术家和当代的艺术家们找寻创作的灵感，感受画家的灵魂与心情、想象自己是在参观特列季亚科夫画廊、埃尔米塔日或俄罗斯博物馆，只要下载著名画家的作品就可以欣赏此画的现实性与高级艺术的色彩。纽约公共图书馆网址： https://digitalcollections.nypl.org纽约公共图书馆（New York Public Library, NYPL）是美国主要图书馆系统之一，和布鲁克林公共图书馆系统、皇后图书馆系统一起组成纽约市的三大公共图书馆系统。纽约公共图书馆总部的主体建筑位于第五大道，由于藏有《古腾堡圣经》和牛顿的《自然哲学的数学原理》，它被认为是世界著名的图书馆之一。该网站是纽约公共图书馆数字馆藏，是一个实时动态数据库，每天会及时更新资源，包括印刷品、艺术照片、地图、珍贵手稿、流媒体视频、文物资料等。该网站最近增强了对数字馆藏中所有公共领域物品的访问，20 多万张高像素素材支持关键词搜索，一共包含了超过 89 万图片素材，每个人都可以自由地使用这些资料。美国大都会博物馆网址： http://metmuseum.org/art/collection美国大都会艺术博物馆（Metropolitan Museum of Art）采取藏品数字化开放服务，任何人都可以免费下载约 375,000 件高分辨率无版权藏品，受到艺术爱好者的热烈欢迎。大都会博物馆通过提供无限制下载服务，加入了世界各地博物馆倡导开放内容运动的行列。大都会博物馆根据创作共用（Creative Commons Zero, or CC0）的授权条款公开无版权的艺术作品。CC0 指没有任何机构声称对涉及的作品拥有著作权。愛德華·馬奈（Édouard Manet）的作品《乘船》（Boating），画布油画，1874 年。(Metropolitan Museum of Art)该网站总的艺术品及其文物图片数量已经收录超过了 45 万张之多，其中有不少采用公众领域（Public Domain）授权方式释出，这意味着使用者可以搜索并免费下载，将素材使用于商业及非商业用途。除了以关键字进行搜索外，还能以艺术家、文化、材质、物件种类、地理位置、日期和年代筛选分类，公众领域授权的照片大约有 20 万张以上。如果你正在寻找灵感，或许可以到美国大都会博物馆 The Met 图库找找，应该能有收获。开启 The Met 网站，直接输入关键字进行搜索，如果想浏览所有内容，可直接点选搜索框最右侧的黑色箭头。将页面拖曳到最下方，除了可切换不同分页，还能选择在结果页面每一页显示多少内容，想在单一页面里显示更多照片，可从底下 Results per page 选择 20、50 或 100。要注意的是 The Met 并不是所有图片都是公众领域（Public Domain）授权，可从左侧的筛选功能选取「Public Domain Artworks」设定只显示公众领域图片，勾选后大约还会有超过二十万张的相片可以搜索浏览。那么要如何从 The Met 开放资料库下载这些图片呢？一样点选进入艺术品页面，下方会看到有个「Public Domain」标示，代表这件作品照片是采用公众领域授权，确认后点选旁边的下载按钮（如下图箭头所示）就能开启原图页面。最后，选择「另存图片」即可将它下载、保存使用。美国国家艺术馆网址： http://images.nga.gov美国国家艺术馆提供了包括梵高、莫奈等大师超过 5 万个艺术品图像，每幅图像均高达 4000 像素。这些作品的图像可以直接从该网站上的对象页面免费下载 Open Access 图像以用于任何用途，无论是商业还是非商业用途。NGA Images 旨在促进学习，享受和探索。美国国会图书馆网址：https://www.loc.gov/collections/japanese-fine-prints-pre-1915美国国会图书馆是世界上最大的图书馆之一，收藏超过 3200 万本书籍和其他印刷材料，涉及 470 种语言，以及 6100 万部手稿、100 万种美国政府出版物、100 万份全球各地出版的报纸、33000 种报纸集刊、50 万个微缩胶卷、12 万册漫画书、530 万张地图、600 万份乐谱、300 万个录音、1470 万份绘画、照片以及建筑图纸等。国会图书馆主馆之一托马斯•杰斐逊楼（照片：Carol M. Highsmith）国会图书馆也是北美最大的善本书收藏图书馆，包括独立宣言草稿、古腾堡圣经（Gutenberg Bible ）等。它是除中国大陆之外收藏中文图书最多的图书馆之一，中文收藏不但内容丰富，而且珍本、善本数量不少，内有 41 本《永乐大典》。为了让读者能够方便地利用如此庞大的图书资源，国会图书馆从 1994 年开始将馆藏资料数码化，称为“数码收藏与服务”（Digital Collections & Services），可以通过互联网查找使用。国会图书馆收藏的林肯信件原件，经扫描后上网供读者阅读研究（国会图书馆）美国会图书馆网站提供的检索方法还是比较丰富的，你可以按照艺术作品的年份、地区、创作者、类型等等来进行筛选，可免费下载，商用需获得第三方许可。“数码收藏与服务”主要注重将珍贵以及其他地方难得一见的资料上网，供读者使用，目前有几个大的分类项目，包括“美国历史与文化”、“历史性报纸”、“历史性声频纪录”、“表演艺术”、“绘画及摄影作品”、“退伍军人历史项目”、“美国立法资料”、“ 网站存档”等。数码书库除了方便读者、研究者使用外，还特别受到学校教师的欢迎，教师们可以通过互联网检索数码书库，查找到他们想要的文字、声像、音像资料，很方便制成教案并在课堂上演示使用。这个数码书库的网址是：http://memory.loc.gov/ammem/dli2/index.html 。盖蒂博物馆网址： http://www.getty.edu/art/collectionJ. Paul Getty 博物馆收藏了超过 10 万件的高清艺术品，从新石器时代到古希腊、罗马和伊特鲁里亚艺术时期的艺术品；欧洲艺术——包括从中世纪到二十世纪初的照明手稿、绘画、素描、雕塑和装饰艺术；还有从开始到现在的国际摄影作品等。该网站提供了公开免费下载的入口。A Lady with a Squirrel and a Starling (Anne Lovell?)，约 1526-28 年，小汉斯·霍尔拜因。面板油画，22 1/16 15 1/4 英寸。伦敦国家美术馆。1992 年由国家遗产纪念基金和艺术基金以及 J. Paul Getty Jnr 先生（通过伦敦国家美术馆的美国之友）捐款购买。© 伦敦国家美术馆USEUM网址： https://useum.orgUSEUM 是一个数字博物馆，展示了来自 8,000 位过去的著名艺术家和来自全球 106 个国家的近 2,000 位当代艺术家的 84,000 幅绘画，插图和素描。便于互联网用户和艺术爱好者发现各种时代和风格的作品。你可在网站的下载入门指南学习如何搜索下载艺术品。该网站由伦敦大学学院博士生 Foteini Valeonti（伦敦大学学院巴特利特高级空间分析中心和伦敦大学学院数字人文科学中心）建立。网站涵盖了从著名的经典杰作到来自世界各地的当代艺术家的所有内容。USEUM 是一个由用户贡献建立的众包艺术画廊，面向艺术家和艺术爱好者。艺术家包括来自伦敦大学学院斯莱德美术学院的学生，从事绘画、绘画或插图工作，可以在该平台上宣传他们的作品，从而接触到数以千计的艺术爱好者。他们还可以选择在几天内从 USEUM 商店中获利，该商店在全球范围内销售优质印刷品和产品。巴黎博物馆协会网址： http://parismuseescollections.paris.fr/fr巴黎博物馆协会提供超过 10 万张藏品图可免费商用（其中包含画作、装饰品、雕塑、照片等等）的浏览和下载功能。这些作品来自其管理的 14 间博物馆美术馆（其中包含我们所熟知的巴尔扎克之家、维克多雨果之家等知名博物馆），雨果、伦勃朗、莫奈等大师的作品都可以从这里找到。该协会表示，这些作品不仅可以用于私人和商业性活动，还使用者可以自行修改，并且不需要特别标注来源和出处。这也就是说，之后在遇到没有好想法的时候，就能从大师的作品中学习，既能汲取到灵感，又无需为引用大师作品而担忧侵权问题。不仅如此，该网站还支持根据色彩进行检索。其中的每一幅作品都提供了配色色标，简直就是为设计师量身定制，遇到好的作品还能顺带把配色也学习下来，也能应用到自己的设计当中，岂不是两全之美！网站搜索雨果的作品，有上千幅免版权免付费的雨果手稿原件高清大图，简直就是文学家的天堂（那些可能要做学术研究的小伙伴，这可都是第一手的素材）。偶尔拜读一下文学大家的手稿，或许更能感同身受大师写作时的情景，获得与标准印刷版不一样的阅读体验呢！网站开放下载素材里，值得一提的就是画家伦勃朗的作品，伦勃朗被称为荷兰历史上最伟大的画家，这些就不用我过多地赘述了。如果你是美术学习者或是艺术从业者，千万不要错过这些素材，300+伦勃朗高清素描、速写作品，放大图片细节清晰可见，用来临摹是最好不过（说不定能快速进阶）！这对于设计师、美术生、文学者等可都是免费的高质素材哦，而且再也不用怕侵权了，用作临摹、设计、灵感宝库可都是不二之选。强烈建议大家收藏起来，没事多走近一下大师，感受一下大师作品的洗礼也未尝不可呀！更多大师作品大家可以自行浏览，说不定你会发现不一样的新天地。Tips：进入图像搜索和下载页面后，记得在左侧搜索框勾选 Image librede driot seulement，才能筛选出免版权免付费的作品噢~梵高博物馆网址：https://vangoghmuseum.nl/zh/search/collection梵高博物馆（Van Gogh Museum）建成于 1973 年，是一座位于阿姆斯特丹博物馆广场的国立美术馆，主要收藏荷兰画家文森特·梵高（Vincent van Gogh）及其同时代画家作品。这是全球收藏梵高作品数量最多的一座博物馆，重要馆藏包括《向日葵》、《梵高自画像》、《盛开的杏花》等。《盛开的杏花》（Almond Blossom），梵高，1890 年该网站提供了艺术家、位置、年份、类型等分类，收集作品 4369 幅，可以方便的搜索查找需要的画作，可免费下载不可商用。芝加哥美术馆网址： https://www.artic.edu/collection作为美国第二大艺术馆，芝加哥美术馆收藏了五万四千余件艺术作品，包罗万象。您可以在这里探索美洲最精彩的印象派画作，莫内（Monet）、雷诺瓦（Renoir）、秀拉（Seurat）和梵谷（Van Gogh）的作品尽在其中。“现代之翼”（Modern Wing）外观从千禧公园沿着行人天桥徒步走到誉满全球的现代之翼（Modern Wing），就可以欣赏到现代和当代艺术的稀世经典。美术馆同时也是一所艺术高校，是众多才华横溢的艺术家摇篮。从千禧公园出发，经过一座特别的行人天桥，便可到达芝加哥美术馆并沿途欣赏美景。克劳德·莫奈，《干草垛（夏末）》布面油画，60100.5cm，1891 年芝加哥美术馆网站收藏来自各地文化和不同时代的非凡艺术品以及书籍，著作，参考资料和其他资源。提供 5 万多张高清世界名画所提供的图片分辨率一般在 3000px 左右，包含经典的梵高自画像、神奈川冲浪里、印象派等诸多画作，可直接下载，有免费可商用素材。荷兰国立博物馆网址：https://www.rijksmuseum.nl/nl/rijksstudio荷兰国家博物馆网站可免费下载数十万件高画质、高清晰度的艺术作品，网站里的图片皆可在注册帐户（免费）后自由下载，下载后的图片仅可使用于个人或学术用途，不可用于商业用途。在荷兰国家博物馆可搜索、查找许多馆藏作品，收录的作品以画作为主，也有其他早期历史收藏，通过数位方式为这些作品提供高清晰度的照片，尺寸可达 45004500 像素，无论是放大浏览细节或下载使用都没问题。如果你喜爱的艺术作品收藏在荷兰国家博物馆的话，可以试着通过搜索或任何方式找找看是否已经数位化。开启 Rijksmuseum 荷兰国家博物馆的「Rijksstudio」页面，可先从右上角的语言选项把页面调整为英文显示，可能会比较容易进行下面的操作。往下拖曳就能开始浏览，Rijksstudio 以艺术家、主题、类别等方式收录许多馆藏，在每一个主题里还会有详细说明与导览。开启作品的详情页，通过下方的放大、缩小和拖曳浏览细节，Rijksstudio 收录的高清晰度图片可以放大浏览检视无死角。下面这幅收藏是荷兰画家 Jan Vermeer 相当知名的油画作品「倒牛奶的女仆」，也是阿姆斯特丹国家博物馆的珍藏之一。如果要获取原图，点选下方「剪刀」后选择「Download this work」就能下载。在 Rijksstudio 可以收藏、下载或分享，不过必须要先注册 Rijksstudio 帐号，这个过程完全免费，点选「Sign up for your own Rijksstudio」进行注册。注册时可直接以 Facebook 帐号登入，或者使用一般 Email 方式建立帐号，注册时只需填入姓名、Email 和密码就能获取帐号，非常简单。登入后再回到 Rijksstudio 就会出现「Download Image」画面，点选按钮就能获取艺术作品的高清大图。使用时记得先了解荷兰国家博物馆对于数位馆藏的授权相关规定，简单来说，可以个人收藏或学术用，但不可用于商业用途。大英博物馆网址：https://sketchfab.com/britishmuseum大英博物馆免费开放许多文物 3D 模型，目前已经收录超过 200 个素材模块！开放于 Sketchfab 平台可自由检视或免费下载使用，这些素材采用的格式为 .obj，同时也有素材纹理，如果手边有 3D 打印装置应该可以直接打印出来，或是放入 3D 软件中进行编辑使用。收录于 Sketchfab 的 3D 模型素材都是可以免费下载，只要注册、登入即可，个人免费使用，使用于教学用途当然也没问题，只要标注出处即可，不过不得用于商业用途。开启大英博物馆位于 Sketchfab 的页面后，就能看到这两百多个 3D 模型素材，包括知名的法老头像、复活岛石像（Hoa Hakananai’a）、宙斯雕塑作品等等。点击上方的 Models 可以看到大英博物馆在 Sketchfab 网页中上传、共享的所有 3D 模型图像。点击任意 3D 模型，可以从 Sketchfab 网站中 720 度的全方位浏览，包括放大、缩小或是你要把文物整个翻过来看也没有问题。在 Sketchfab 里每个 3D 模型可能会被标记出一些位置，点击后可以查看更多深入说明，例如莱斯特大学（University of Leicester）在一处停车场底下发现理查三世（Richard III）遗骸，后来做成 3D 模块开放于 Sketchfab，除了可以全方位的旋转、放大缩小浏览外，还能点击每个标记位置查看更多细节说明，就象是在博物馆看导览一样。点击模块下方的蓝色「Download」按钮可以下载、获取原始档，不过下载前必须免费注册账户，当你按下下载按钮，会询问你需要什么格式，我随意点选一个会显示要下载原始格式（.obj）或 .gltf。注册账户或直接使用 Facebook 登入，再次回到 Sketchfab 页面后，点击下载按钮就会自动下载档案。下载时 Sketchfab 也会要求你加入来源和出处标示，以符合这项素材的授权规则，点击「Copy」就能快速复制网站给你的姓名标示。史密森协会网址： https://www.si.edu/openaccess在史密森协会官网你可以更轻松地访问网站上收藏的近 300 万个 2D 和 3D 数字产品，其中还包括史密森尼博物馆（Smithsonian）的 19 个博物馆、9 个研究中心、档案馆、国家动物园的图像和数据。维也纳艺术史博物馆网址： https://www.khm.at得益于金色大厅新年音乐会和电影《音乐之声》的加持，维也纳作为“音乐之都”的形象早已深入人心。其实，维也纳的艺术品收藏也是深藏不漏，虽然不如巴黎、伦敦、佛罗伦萨等地的博物馆名声响亮，但藏品质量绝对不输。维也纳艺术史博物馆（德语：Kunsthistorisches Museum）是一座位于维也纳玛利亚·特雷西亚广场的著名博物馆，设在戒指路旁富丽堂皇的大楼内，有一个圆满的八角形穹顶，是世界上藏品最丰富的美术和装饰艺术博物馆之一，收集数百年来的欧洲珍品，它以反映欧洲美术史的系列藏品享誉世界，是欧洲最著名的博物馆之一。艺术史博物馆有许多令人窒息的惊艳藏品，即便在全世界也属于排得上号的重要博物馆。这座由弗兰茨·约瑟夫皇帝修建的博物馆本身就是一座辉煌豪华的建筑物，与对面一模一样的建筑（自然史博物馆）相对而立。该馆于 1891 年开放，珍藏了哈布斯堡家族长达 600 余年统治期间的丰富藏品，涵盖从古埃及和古希腊到 18 世纪末的 2100 多件艺术品。博物馆的油画馆里收藏了丢勒、拉斐尔、伦勃朗、鲁本斯、提香、委拉斯开兹和维梅尔的作品，以及全球藏品最丰富的勃鲁盖尔作品。而在艺术珍宝馆部分（Kunstkammer Wien），更有来自异国他乡的珍奇艺术品，其中最耀眼的是本韦努托·切里尼（Benvenuto Cellini）打造的黄金盐罐。老彼得·勃鲁盖尔（Pieter Bruegel the Elder）在 1563 年创作的“巴别塔”也是这里的镇馆之宝。沃尔特斯艺术博物馆网址： https://art.thewalters.org沃尔特斯艺术博物馆（Walters Art Museum）位于马里兰州巴尔的摩的弗农眺望山，是一座于 1934 年成立和开放的公共艺术博物馆，拥有 19 世纪中叶建立的藏品。其中，中国藏品大约 580 件，拥有方便的搜索功能，允许公开下载、使用和编辑。沃尔特斯美术馆是世界上仅有的几个博物馆之一，从第三个千年开始呈现艺术的全景。到二十世纪初。数以千计的宝藏从木乃伊到武器和盔甲，从古老的主画到新艺术风格的首饰。沃尔特人的埃及，希腊，罗马，拜占庭，埃塞俄比亚和西方中世纪的艺术收藏品是全美最好的，博物馆拥有文艺复兴时期和亚洲艺术，以及壮观的手稿和稀有书籍储备。19 世纪法国绘画的每一个主要趋势都在收藏品中代表。博物馆的藏品大部分由主要的美国艺术和雕塑收藏家，Smarthistory 在线博物馆网址： https://smarthistory.orgSmarthistory 是由艺术史学家 Beth Harris 和 Steven Zucker 创建的用于研究艺术史的免费资源。它是一个独立的非营利组织，也是可汗艺术史学院的官方合作伙伴。该网站是一个在线艺术史多媒体展播平台，可以按照时代、风格、艺术家等多种方式浏览艺术作品，许多作品还配有视频解说。Smarthistory 于 2005 年开始作为音频指南系列在大都会艺术博物馆使用， 纽约市现代艺术博物馆，并作为学生在大学阶段学习艺术史入门课程的资源。除了专注于大学水平的艺术史课程外，Smarthistory 还支持由美国大学理事会开发的艺术史进阶先修课程和考试。Smarthistory 为构成 2017 年 AP 艺术史课程的 250 件艺术和建筑作品中的每件都提供了文章、视频、照片和指向其他资源的链接。Smarthistory 已发表了 880 多部视频和 2,000 多篇关于从旧石器时代到 21 世纪的艺术和文化史的文章，其中包括非洲、美洲、亚洲、欧洲和大洋洲的艺术。该网站文章由 200 多位艺术史学家、策展人和考古学家撰写，他们在他们的重点领域写作，并经过同行评审。视频是专家之间在原艺术或建筑作品前现场录制的无脚本对话。1. 沉浸式“云”看展随着互联网技术的迅猛发展，秀才不出门，不仅能知天下事，还能够游遍世界上知名的美术馆与博物馆。下面，小福妹就给大家介绍一个网站 Google Art Project，该网站里收录有世界各大博物馆的展览品，利用高解析度影像技术来保存世界知名艺术品，透过网路就能随时浏览和欣赏。让你不用花大钱搭飞机出国，又担心人太多而无法靠近想看的作品，除了高解析度欣赏艺术品以外，使用者还可以以街景方式来游览博物馆，以便从其他的角度来欣赏艺术品。在 Google Art Project 首页会随机展示艺术作品，透过滑鼠可以轻松放大或缩小局部范围，右边也会显示目前放大的位置在整个艺术品的哪个部分。图片透过 Google Art Project 的地图可以浏览目前已建立数位资料的博物馆或美术馆。台湾故宫博物院已有 18 个艺术品被收录到 Google Art Project 里。在 Google Art Project 内的艺术品都可以放大，查看每一个细致的小细节，例如下图可以看到毛公鼎上面刻的铭文。使用者可以直接在网站上以类似 Google 街景的方式来参观博物馆，左侧会显示收录的楼层和平面图，在这项计画内使用许多高解析度的照片，在浏览上更身历其境。Google Art Project 这项功能，不仅让人们更能贴近不同国家的艺术文化，而且不用花半毛钱就可以享受这项完全免费的工具，极富教育功能，或许有天 Google 也会把全世界的图书馆或图书资料通通数位化，有兴趣的话不妨上去看看！今天，小福妹就给大家介绍这么多啦，还有更多类型的开源数据库资源在后期会慢慢跟大家分享，敬请期待吧！欢迎大家转发，一起交流学习哦！在家也能看展览！收好这 3 个高质量的在线展览网站对于喜欢看展的设计师来说，由于疫情不能出门定是少了一项很大的乐趣。阅读文章 > 欢迎关注作者微信公众号：「福韵 网络情报研究」本篇来源：优设网原文地址：https://www.uisdc.com/16-museum
是一个 生成器 网站 大家好，我是零一，转眼又到了 2022 年，相信大家去年收藏夹里一定多了不少宝藏工具，快一起来分享一下吧~ 我先来！CSS 布局生成器Layout： https://layout.bradwoods.io/customize它是一个全功能的 CSS 和 JSX 生成器，用于使用 CSS Grid 布局语法生成不同种类的布局，任意修改 Grid 的属性，并且实时展示画面，生成对应代码。当然还有 Flex 布局（不过现在还不是很完善）RijuRiju： https://riju.codes/Riju 是一个继承了 224 种语言的在线代码运行平台，十分简洁，无广告，非常推荐WhirlWhirl： https://whirl.netlify.app/Whirl 是一个 CSS 动画库，与其它的动画库不一样，它集合了 108 种加载动画，简洁且独特，值得学习，所有的源代码也都能获取到！PikadayPikaday： https://pikaday.com/Pikaday 是一个日期选择器，无依赖、轻量（5k）、CSS 模块化，样式也很简约，我特别喜欢，令人意外的是，它在 Github 上竟然斩获了 7k+ StarTailwind ComponentsTailwind Components： https://tailwindcomponents.com/Tailwind Components 是一个 Tailwind UI 套件，这个网站是一个由社区贡献的各种 Tailwind 组件Tail-KitTail-Kit： https://www.tailwind-kit.com/Tail-Kit 是第一个非常棒的 Tailwind UI 组件库，它有超过 250 个开源组件，同时兼容 React、Vue 和 Angulartidy.jstidy.js： https://pbeshai.github.io/tidy/tidy.js 是一个用于处理数据相关的 JavaScript 库，它包括 70 多个不同类别的函数(整理、分组、数学、排序等等)party.jsparty.js： https://party.js.org/party.js 还蛮有意思的，你们应该见过很多博客网站，鼠标点击或拖动时会有很多炫酷的动效，这个库就是做这个的，你可以轻松地实现那些效果AI 去背景baseline： https://baseline.is/tools/background-remover/baseline 是一款免费的通过 AI 来去除图片背景的工具网站，支持 JPEG、PNG，最终会返回一个透明背景的 PNG 图片给你Layout patternsLayout patterns： https://web.dev/patterns/layout/Layout patterns 是 Google Developers 旗下开发者资源中新增的版块，里面列举了使用 CSS 构建布局 UI，现在列举了 11 种布局~ 后续应该还会持续增加，探索更多可能，建议收藏。*搭梯子访问。LowdefyLowdefy： https://lowdefy.com/Lowdefy 是一个开源的低代码框架，通过 YAML 来轻松构建 web 应用、管理面板、BI 仪表板、工作流和 CRUD 应用uncutuncut： https://uncut.wtf/uncut 是一个现代字体目录网站，重点是开源，可免费用于个人和商用，看了一下总共收录了 90 种字体，任君挑选~fetoolkitfetoolkit： https://www.fetoolkit.io/fetoolkit 是一个前端开发工具箱，收录了 20 多种编码、图片相关的工具，包括 CSS、JSON、图标、SVG、图像压缩、npm、regex 等工具Unicode ArrowsUnicode Arrows： https://unicodearrows.com/Unicode Arrows 是一个收录了各式各样的箭头相关的十六进制代码components AIcomponents AI： https://components.ai/components AI 是一个主题构建器，包括语法高亮生成器、渐变、阴影工具、SVG 图案生成器、动画背景等等，全部都可以在线调试，非常好用GlitterGlitter： https://wh0.github.io/glitter/Glitter 是一个荧光字体生成器，项目不复杂，但很好看，我们可以随意修改文本，最后导出 SVGIconduckIconduck： https://iconduck.com/Iconduck 是一个开源 icon 网站，拥有超过 100,000 个图标，可以通过关键字搜索，并且都可以在商业项目中使用pattern-generatorpattern-generator： https://doodad.dev/pattern-generator/pattern-generator 是一个帮助你生成背景图片的网站，就几十种图案可选，而且每种图案里的元素都可以通过交互按钮任意修改，最后可以导出 JPEG、PNG、SVG、CSS 背景代码，也支持退出后恢复上一次操作的内容buttons-generatorbuttons-generator： https://markodenic.com/tools/buttons-generator/buttons-generator 是一个包含了很多种交互形式以及样式的按钮的网站，大概有**120+**种，对于有自定义按钮需求的小伙伴可以作参考Coding FontsCoding Fonts： https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=darkCoding Fonts 是收集了 45 种代码字体的网站，大部分都是免费的，当然也有收费的，可以选个心仪的放到自己的编辑器里去（小声 bb 一句，我还是最喜欢 JetBrains Mono，免费又好看）svgreposvgrepo： https://www.svgrepo.com/svgrepo 是一个 SVG 图标库，坐拥 300,000 + 免费使用的 SVG 图标，大部分也都是可以商用的。网站支持搜索，无需登录即可收藏（可能是存的 localstorage）~maplibremaplibre： https://maplibre.org/maplibre 是一个 JavaScript 世界地图库，开箱即用，同时也支持了 IOS 和 Android 的 SDKDopefolioDopefolio： https://github.com/rammcodes/DopefolioDopefolio 是一个开箱即用的官网页面生成器，没有依赖一堆的三方开源库，全部是纯 HTML、CSS，所以 SEO 做的非常好，Lighthouse 分数也很高，同时支持页面响应式。有官网页面需求的小伙伴可以尝试使用家底都掏空了，希望对你们有所帮助。独乐乐不如众乐乐，如果你还有什么更推荐的网站或工具的话，可以在评论区留言~我是零一，分享技术，不止前端！下期见~CSS为什么这么难学？一定是你的方法不对！大家好，我是零一。阅读文章 > 欢迎关注作者微信公众号：「前端印象」本篇来源：优设网原文地址：https://www.uisdc.com/22-front-end-tool
主体 视觉 手法 今天看见周练群的小伙伴想找一个关于主体刻画强化的文章，正好咱们视研设还没更新过类似内容，本文给大家简单总结几个实用的方法，让大家学了以后可以马上尝试应用在工作练习里。好了话不多说下面开始今天的正文。主体刻画是有条件的，如果你的主视觉本身视觉性就非常好那就不需要特殊的手法再去加强，也就是说我们刻画是针对视觉性/视觉层级不那么丰富的主体而使用的手法。例如下面这个摄影主体，本身的视觉性就很好，就没必要我们再去强化了，只保证它的视觉能完美呈现即可。当然这个说法并不是绝对的，而是这样可以省事，你如果非想要强化可不是不可以。1. 重复重复重复重复重复永远是最简单的方法，但是重复不代表复制，比如可以同一个主体但是不同角度的，如果我们没有建模渲染的条件，可以通过移动，旋转，形变，缩放等等手法，让人看起来的机械复制感弱一些。也可以像这样，展示局部图或者是构成图，重复大家不要理解成一个东西重复出现，而是要理解成一个东西的多种展现。2. 整合统一这个图我们之前分析过，他的主体是点状的，所以特别需要一个色块去给他们链接成一个完整的主体，否则画面没有视觉落点，这是强化点状主体视觉性的一个手法。3. 实物结合手绘实物图结合手绘的手法几乎是一个百搭的手法，通过想象对主体进行二次改造，赋予其与原来完全不同的项目调性，同时还能让主体更加丰富有趣。4. 标题前后叠压非常简单好用常用的一个手法，可以有效的拉开空间感，但是要注意叠压的时候不要影响需要识别的信息，同时可以再适当的时候进行前后的穿插。当然这种小面积的叠压也可以，我个人挺喜欢这个设计的比较精致。这种手法我很推荐，把标题做成一个标题组然后不需要他识别就把它视为一个图形使用。5. 色块强调这种主体后面加个色块的形式更常见也更简单，效果却出奇的好，可以有效起到强调聚焦作用。6. 小破图这个需要判断照片允不允许做，可以让主体的局部伸出图片框，内外建立链接的同时还能让主体看起来更有层次感。7. 创建特征色在主体上的某一部分添加一个特征色，最好是有色和无色的对比像下图一样，然后在标题处也同样添加，这样能建立起他们之间的联系同时还能强化主体的视觉性。8. 路径强化利用主体本身或者靠近主体的留白空间又或者是项目需求进行元素放置，从而达到强化主体轮廓，聚焦主体形态融合等作用。9. 局部遮挡局部遮挡可以有效制造神秘感，同时增加阅读成本让人可以画更多的时间在观看上。这意味着不适合短平快的传播信息，一般用在展厅里或者艺术类比较多。10. 描边与装饰对主体进行描边或者相关的装饰添加可以有效增加主体的视觉层级，这个装饰添加是比较考验设计师的，一定要做到元素应用精准，形态上不干扰主视觉，造型上不干扰调性。今天讲到的主体强化思路仅仅只是一部分后续我也会持续更新更多的相关内容。我一直相信审美的提升靠的不是某个培训班或者什么小技巧，而是每天每时的长期积累，恭喜今天的你又进步了一些~有任何问题都可以扫下面的二维码加我好友，和我一起讨论交流设计。用4个平面小技巧，瞬间让视觉主体更突出！在日常的设计工作中，我们经常会碰到：「因为作品中视觉元素过多，导致整体视觉主体不够突显，使得画面杂乱、缺少主次关系、甚至有些轻浮」。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/10-subject-characterization-technique
表哥
在路上
飞翔的企鹅
张大湿
落霞与孤鹜
