如今我们的生活，到处都是大幅图像广告，纷扰喧闹的各类短视频与直播。这是一个快节奏时代，我们更倾向阅读图像。为什么我们偏爱图像视觉超过文字？从人类进化角度来看，原始时代的祖先通过五感感知着这个世界，其中通过视觉来感知判断生活，其他四感辅助之。即使后面我们发明了文字，但发展至今，对图像的本能吸引力依旧强烈。因为在我们认知的潜意识里图像相较于文字更能让我们快速轻松理解并记忆。
图像如此重要，设计作品中当然也必不可少。因为图片，它能一定程度上决定画面基调；引导视觉流程；调剂平衡多段文字信息的枯燥性，让阅读变得轻松容易。
在UI设计中，我们经常需要把设计输出物拿给产品经理或者其他有设计决断力的人看，UI设计中图片使用的好与坏，能很大程度上影响着决策者的感知，以及你的设计过稿率。
如下左图：商品视角、调性、细节，都没有右图来的统一、有质感。单看这两张图，会让用户有这样的心理感知：左图感觉像山寨盗版商城；右图则会认为是严肃官方认证商城。所以，在同样页面布局下，不同的图片使用与处理，能让UI页面的品质有较大的感知差异。
图片的使用如此重要。那么，我们在正式做UI设计前，首先需要弄清楚图片在页面的占比情况以及后续图片的支撑来源问题。
在构思UI页面阶段，首先需要了解以下两个问题：1.图片区域占比问题；2.图片来源问题。当页面图片占比多，且让用户自定义，那么需要预估到APP上线后设计可控率会降低。换句话说，实际上线效果会不尽人意。如下图：由于淘宝和网易严选平台属性不同，在图片品控上就有着不同的视觉感受。当然，不是说淘宝做的不好，而是当一个平台集纳不同的店铺，不同调性的产品类型，即使有图片规范，也难如统一品类、调性的产品来的统一。
弄清图片内容的可控性问题后，开始进入设计环节，那么我们该如何选择图片？
在不同的场合有恰当合适的场景搭配，是十分基础且重要的事情。在UI设计中，任何一个部分的设计以及元素运用都需要为产品服务。图片也不例外。如果你是厨房类APP，头图选用小清新感的图片，就显得不够合适，带有环境食材元素的图片才更让用户有共鸣。
2.是否能清晰表达产品核心内容？
图片是否主体明确？能一眼正确无误的传达核心内容？会不会因为其他元素元素抢了主体视觉，找不到视觉重点？
3.是否美观、有品质、让人想拥有？
图片是否能表达美好生活以及美好品质的向往？光影关系是否自然？图片是否高清有细节？
当明白图片如何选择后，还想和你分享一些冷门且重要的图片过稿小技巧。记下来，将大大提升你的设计过稿率。
漂亮图片有很多，如果我们都以漂亮为基准，找出来的图片也会形色各异。由于用户的实际使用场景是：浏览一个完整APP，统一风格调性比美更重要。如果商品角度不一样；饱和度高低不同；抽象与具象等，都会形成产品不统一，用户视觉不适应等问题。
有时我们为了赶时间，直接用图片填充插件，让图片区域自动填充。但我还是想要给到你这样一个建议：一个专业且成熟的设计师，即使是设计初稿，也不能随便拿张图，凑合一下。任何时候的汇报，都需要有着处女座对于事物的完美要求，过自己这关。因为任何时候你的表达与表现，都形成了你在别人心目中专不专业的看法，从而影响着后续的设计话语权问题。如下图都是商城陈列页面，右侧的图片给出上线的实际效果，更贴合产品，方便设计决策者给出建议方向，或做出决策。
我们都是视觉动物，不管你是否愿意承认：我们常常通过视觉表象，才决定是否愿意去更深入的了解某个东西。
设计就是在做产品视觉表象的表达，我们需要尽可能使用贴切的，漂亮的图片。让UI视觉看起来更加美观，让用户愿意停留，认可以及信赖平台。
转自：站酷-丘丘的设计笔记
我把整体分为了三个部分
1.空洞的设计方法（因为大多数的人对设计的方法论都处在一个看了、学了、但是用不上的阶段，主要是讲在我分享的内容中可能会用到的一些设计理论和方法）
2.很一般的设计流程（这个优化设计的流程其实千千万，最重要的还是和真实的项目相结合，每一个点都值得拿出来写一个长篇大论，有机会具体来说说）
3.不成熟的实际应用（设计流程大多复杂而冗长，对于处在初创期或者发展期的产品来说，可能并没有那么长的时间线来实践，这一点也是我想和设计同行一起探讨的问题）
“奥卡姆剃刀原理”是设计师们耳熟能详的一个理论，即“如无必要，勿增实体”，在UI\UX设计中，我的理解是，如果能够在用户的行为路径上和交互方式做出优化，就不要增加新的功能。
这个理论会贯穿在整个产品设计流程中。
用户体验五要素，是我们在学生时代就会听到的一个理论，但其实对于五要素真的对应着什么，意味着什么，可能并没有一个确切的概念。
我说说我的理解：
这五个要素，从战略层到表现层，是一个从抽象到具象的过程，是一个易用产品背后必不可少的东西。
战略层：用户需求、产品目标——就是说在使用完这个产品之后，能不能很好的满足了用户的需求，达没达成做这个产品的目的。
范围层：在产品定位明确的情况下，我们要有什么样的功能和内容——具体需求
结构层：各页面、功能的联系，用户通过一个什么样的路径、什么样的层级关系完成一个流程
架构层：按钮、控件、图片、文本区域的布局，用户对页面的整体感知
表现层：长什么样，颜色啊、风格啊等等）
所谓KANO模型，它和接下来要说的消极选择、NUF评估筛选都可以理解成为一个需求筛选的方法，他们都能够帮助设计师在众多需求当中，找到最合适和最合理的那个。
KANO模型中，我们可以把需求或者说创意点分成5个属性
1.魅力/惊喜属性
用户意想不到，如果没有这个功能用户可能感知不到，但是做了这个功能，用户会非常惊喜和满意。（我们有没有这样的功能？首页tab bar动效）
2.期望/期待属性
做了这个功能，用户满意度会提升，否则反之，会降低
3.必备/必要属性
一个产品的有效性功能，最基本的功能。如果做了用户满意度不会提升，觉得理所当然，但是如果没有，满意度会大幅下降。
4.无差异因素
做和不做对用户的影响并不大，用户也不太在意。
5.反相/错误因素
你不做还好，一旦做了用户反而会反感，降低满意度。
对于一个产品，最重要的即是必要属性和期望属性。
消极选择其实是我们在生活当中也用得到的筛选方法，简单来说就是：当我们想到的两个idea都能用来解决一个问题，那么我们要选这两个当中实现成本低的那个或者说“性价比”最高的那个。
NUF评估筛选相比前两种方法，就显得稍微繁复一点，用起来可能并不如前两种方法更容易。
它其实是，在新颖、使用、可行三个维度，对我们要筛选的点进行打分，再根据分值进行筛选。
用起来其实比较消耗时间。
我把这一部分分成了4个步骤，分别是：桌面研究，用户研究、概念提炼、设计方案
产品深度使用，提问并分析（比如素养课页面，有多少卡片类型，有多少内容分类？哪些课程点击率比较高，为什么？等等）-同类产品分析-用户体验诊断，舒适体验和不是体验-确定设计方向，产品定位、改版（优化）目的、用户群体、价值点）（确定大致设计方向，提出假设，如：经过我们上述的研究和分析，发现丰富、高质量的内容和清晰的布局，能够让用户有浏览和互动欲望，从而达到转化目的
我们一般通过定量问卷和定性访谈来从用户那里获得想要的信息点以得出用户画像和验证我们前期的假设
在做访谈之前，要明确的就是我们要得到什么，或者说我们要访谈用户的哪些方面
即：用户习惯的研究、用户行为模式的研究、用户行为动机的研究
在设置问题时，要明确每个问题的背后我们关注的点在哪里，不可能在不相干问题中浪费时间。
通过前面的两个阶段，我们已经可以得到很多东西了：完整清晰的用户画像、同理心地图、As is 旅程图。我们通过这些东西，找到我们可以优化、可以提升用户体验的地方，即机会点，然后利用我们之前提到的筛选方法，进行创意决策。
（同理心地图）
（As is 旅程图 来自：池喜太厚）
通过前面完整的研究和决策，在此阶段，得出交互设计方案、UI设计方案等等
这一部分是我想和大家探讨的，前面所说的设计流程，多数时候在实际工作当中应用起来并不容易，这也是很多设计师对设计方法嗤之以鼻的原因，觉得设计方法都是玄学，胡说胡有理，这里我也说说我的一些思考。
在我们日常的工作当中要把上述的所有流程都走到，所有设计方法都应用，显然是不现实的。而且，在产品的不同阶段，优化和迭代的驱动力是不同的。在初创和成长阶段，一般为问题驱动，在成熟期，一般为价值驱动。
也就是说，平时的工作可能是一个，发现问题到解决问题的过程，我们需要把成熟的方法和流程进行拆分，进行小部分流程的应用，这样也能够让我们得出一个合理的设计方案。
转自：站酷-鹿爷不是咸鱼
保持好奇，巧妙融合，追求卓越，自然而然
在网上找UX汽车相关的材料和文章是相当困难的。（学习君说：表示相当赞同：（ ）尽管有关移动和台式设备UX的信息太多，但要获得关于HMI（人机交互）原理的见识似乎要困难得多。为什么？
我的回答是，与为手持设备和计算机进行设计相比，这可能是一门利基学科，再加上汽车屏幕出现的时间不长。当然，车辆上的用户体验不仅仅是屏幕，只有旋钮和物理按钮时已经是用户体验了，但是在这种知识上也没有太多分享。
但是，主要原因可能是缺乏标准化。如果您现在看一下市场，您会发现有太多不同的方法和解决方案（满足相同的需求），很难提出一套共享的规则。屏幕可以是横向或纵向屏幕，可以是直角或倾斜角度，可以是一个或2个或3个或更多，超宽或更大的正方形，仪表板上的高度或膝盖以下的高度，等等。与这种混乱相比，我们在手机上拥有的屏幕尺寸数量似乎是在开玩笑。
另一个原因是所有车载系统都需要非常全面的测试。用户在可能致命的情况下与这些对象进行交互。因此，测试必须绝对优先。搞砸移动应用程序上的按钮的位置或大小可能会带来麻烦，但在汽车操作系统上这样做（我不是说“信息娱乐”，因为在这一点上，它是一个简化的术语）会造成生命损失。上面提到的缺乏标准化使得很难将先前测试的结果用于其他系统并在其他系统上重用。
各种研究表明，黑暗的UI在汽车环境中是最安全的选择。深色界面可减少干扰和眩光，但是，存在一个组件，从暗模式切换为亮模式可能有助于提高可读性，这就是导航图。在几乎所有导航系统中，地图都会自动从暗切换为亮，反之亦然。
Android Auto
文字应略读，因此所有的号召性用语，菜单和所有文字通常都应保持最少。除非是在不运动的情况下阅读的文本，否则任何文本都不应排在两行或更多行上。
眼睛到中央显示器的平均距离约为60厘米/ 24英寸。该数字只是根据市场上最常见的配置进行的平均测量，但是同样，由于没有适当的标准，因此该距离可能会有很大差异。
假定此措施为有效基准，则在运动情况下字体的最小尺寸为5.3 / 6毫米（不同的研究表明最佳做法略有不同）。考虑到1mm为6.299 dp（@ 160dpi），则文本应为34/38像素高，用于应该在行驶时读取的文本。
应该只有一个主要动作，而第二个动作则尽可能少。同样，我们希望用户快速浏览并一眼就能找到所需的内容。
（美国）美国国家公路交通安全管理局（NHTSA）指南指出，驾驶员应该能够在1.5秒的一系列扫视中完成一项任务，并且花在离开道路上的累积时间不超过12秒。
Apple CarPlay — phone call: 1 primary CTA
自从诞生以来，车载操作系统已超越了信息娱乐功能。通过镜像智能手机甚至系统内部的镜像，我们可以访问多种功能，例如消息传递，日历和提醒，流视频等等。但是，用户在使用这些系统时要寻找的主要功能是3：
音乐/播客/有声读物
导航
拨打/接听电话
这三个主要功能在驾驶时应该比其他功能更醒目且易于使用。
图标优于文本标签，但图标的含义必须绝对清楚，不能解释误解。图标标签的字体大小可以小于第3点指示的最小字体大小。
Porsche Panamera UI
驾驶情况下的理想对比度至少应为7：1，因此绝大多数系统都将白色（或浅灰色）变成黑色（或深灰色）。
对于行驶中未使用/读取的组件，最小值应为4.5：1。
旋钮和物理按钮的性能仍然优于GUI组件，这是由于其具有肌肉内存映射功能，触摸屏上的可视元素要求驾驶员每次查看屏幕。但是，数字接口的灵活性毋庸置疑，世界正在朝这个方向发展。尽管大多数（如果不是全部）现代触摸屏都支持各种类型的交互，例如您的常规平板电脑，但由于易于执行，因此它们是首选的：
单点
向左/向右/向上/向下滑动
滚动（带有捕捉）
应避免使用其他更复杂的手势，例如触摸和按住，双击，捏合，多点触摸手势，或者在非运动情况下使用。
关于滚动的注意事项：在列表或卡片上自由滚动不是理想的选择。垂直和水平滚动动作均应具有捕捉效果，以始终将滚动项锁定在同一位置
Scroll with snapping on the left, free on the right
非接触手势是许多OEM尝试的新事物。目前，这项技术似乎还远远不够完美，但是除此之外，在这种情况下使用的手势通常并没有真正令人难忘和自然。
虽然语音控制似乎是理想的选择，但根据研究，在某些情况下，精神工作量可能会超出预期。在VUI并不是真正的“对话式”的较早系统上，情况更是如此，诸如Google Assistant或Siri之类的现代助手对信息较长的字符串的理解程度更高，从而减少了用语表达命令的精力。
但是，我们应该考虑不能选择说话的情况，例如，当婴儿在后座上睡觉或某人有言语障碍时，并提供一种安全，可视/触觉的方式来执行所有动作。
与移动设备甚至与带有台式计算机和椅子的办公室设置不同，在汽车中，座椅相对于屏幕呈固定角度，屏幕也固定在适当的位置。因此，必须考虑屏幕的可达性及其可读性。考虑到左侧的驾驶员，屏幕右侧的元素将导致可读性和可访问性降低（当然，在方向盘位于右侧的汽车中会发生相反的情况）。
避免使用重影按钮，辅助功能应非常清晰可见。主要行动和次要行动均应清晰可辨
Tesla Model 3 UI
当然，这也不意味着丑陋（不幸的是，那里有一些丑陋的车载体验）。但是，在为车载屏幕设计时，您必须考虑告别微妙的色调，细腻的对比度，笔触细腻的图标，浅色字体，细小的文字……
极简主义受到欢迎，但它是由更少的可见组件组成的极简主义。
正如本文开头所述，这些原则只是经验法则，不能以任何方式跳过严格的测试。但是，如果您是第一次使用智能手机和计算机的UX来接触汽车的HMI，那么这可能是您开始着手涉足这一复杂学科的起点。
菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。
关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：
在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。
以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。
1. 让按钮更大一些
我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。
其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。
举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。
那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。
我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。
2. 让相关联的信息内容距离更近
这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。
在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。
3. 界面的边界会让用户操作更加精准和容易
在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。
这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。
除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。
但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。
简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。
在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。
转自：站酷-鹿爷不是咸鱼
他们是“最美逆行者”
前几天，当大家打开百度首页时，可能发现了一些小变化：搜索框上方不再是熟悉的红蓝标志，而是展现出了一系列人物形象。
这些人物都是一直奋战在抗击新冠肺炎疫情一线的“最美逆行者”——我们想用这样的方式，向他们致敬。
2月9日-2月10日，致敬抗疫医护人员
2月11日-2月12日，致敬抗疫志愿者
2月13日-2月14日，致敬抗疫建设者
2月15日-2月16日，致敬抗疫专家组
2月17日-2月18日，致敬抗疫解放军
当大家点击这些 Doodle 图片时，会进入相关的战“疫”专题内容页，在这里可以实时了解抗疫英雄的资讯动态。
医护人员、志愿者、建设者、专家组、解放军，他们用坚定的信念和坚毅的身躯，为这场战斗筑起了最坚固的防线，守护着无数人的生命安全。我们向这些英雄致敬！
此前，我们向广大网友发起了“抗疫英雄系列 Doodle”征集活动，希望各界设计师用手中的画笔为抗疫英雄们创作特别的百度 Doodle，让更多人看见疫情中的勇气与希望。
最终，五组致敬 Doodle 在百度首页上线。除此之外，我们还收到了26幅来自百度网友投稿的设计作品。谢谢大家的用心创作！
一起来欣赏吧!
蔡依彤
林文煌
刘昱
轻抚淡抹素人妆
相超
蔡依彤
林文煌
麦芽
董一孛
林文煌
刘昱
姚思思
赵会娟
不将就
李小兰
李钰
林文煌
孙红花
陶泽崧
严安琪
张晶
冯胜方
高旭
林文煌
杨晓婧
张晶
在这场疫情狙击战中，不论是什么角色、什么岗位，都能贡献自己独特的力量。而这些精美的 Doodle 设计作品，正向人们传达了必胜的信心和能量。我们衷心感谢所有设计师的用心创作.
除了通过百度 Doodle 为抗疫工作鼓劲，我们还运用技术的力量，专为疫情防控研发了各种产品和服务，希望为大家带来实用有效的帮助，为战“疫”贡献一份力量。
我们成立了3亿元的疫情及公共卫生安全攻坚专项基金，用于支持新型冠状病毒等新疾病的治愈药物筛选、研发等一系列抗击疫情工作。
我们上线了“拒绝野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子狸”、“穿山甲”、“豪猪”、“狍子”、“蛇”、“野猪”等关键词时，大家都能看到“不可食用”的警告。
从百度“问医生”免费在线咨询，到新冠肺炎智能自测工具；从“疫情小区”地图，到患者同乘查询；从免费开放智能外呼平台，到 AI 体温检测落地北京清河火车站……百度一直在行动。
当所有的决心、爱心和信心汇聚在一起，我们知道，阴霾和灰暗一定会被驱散，春暖花开的日子一定会到来。众志成城，我们共渡难关！
转自：站酷-百度BMD
探索全球顶尖设计好物
大部分人今年过年基本的生活状态如下
如大家所知疫情紧急，
我们虽心系前线却无力支援，
尽量避开人群不出门也算为国家做了些许贡献。
但是宅家除了刷短视频玩游戏，
作为设计师的童鞋们，
咋能不趁此长假好好充实自己呢
（学技能估计太难了），
在此推荐几部经典的设计片，
娱乐的同时，也丰富下自己的设计知识。
01
《Abstract: The Art of Design》
《抽象：设计的艺术》
这是由Netflix公司出品的一部文化创意纪录片，
豆瓣评分高达9.4，纪录片总共8集，
每一集都探访一位全球顶尖的设计师，
涉及插画、建筑、汽车、摄影、平面、室内、场景、球鞋等领域，
用独特的拍摄叙述手法展示设计师的创作过程，
揭开世界设计师非凡创意的艺术理念。
此片由《连线》杂志的主编Scott Dadich 创作并担纲制片，并由奥斯卡最佳纪录片导演Morgan Neville和Elizabeth Chai Vasarhelyi执导，
每一集都可以欣赏到电影画面般的浸入感。
02
《The Genius of Design》
《设计天赋》
此片是BBC英国广播公司
播出的一系列关于产品设计纪录片，
一共包括五集，每集60分钟，
通过采访各知名设计师及相关的设计评论者，
讲述产品设计的历史和未来。
不管你喜欢Dieter Rams的隐忍
还是Phillipe Stark的奔放，
每个从事产品设计工作的朋友都能从这部纪录片得到一些启发。
03
《Modern Masters》
《现代艺术大师》
此片由BBC英国广播公司
推出的一档电视系列节目，
总共4集，分别介绍了20世纪四位重要的艺术大师：
安迪·沃霍尔（Andy Warhol）、马蒂斯（Henri Matisse）、毕加索（Pablo Picasso）和达利（Salvador Dali）的工作与生活。
通过走访四位艺术家们生前的居所、
艺廊及博物馆等地，
向观众展示了他们伟大的艺术贡献以及惊人的后世影响力。
你会发现，麦当娜的专辑封面、米菲兔的文具、
甚至是你家的沙发和电话，也许就来源于这四位大师的创作……
04
《Simon Schama's Power of Art》
《艺术的力量》
此片是由BBC英国广播公司推出年度纪录片，
总共8集。
讲述卡拉瓦乔、贝尼尼、伦勃朗、雅克、透纳、梵高、毕加索以及罗斯科八位艺术家的生平。
该系列结合了戏剧化的重塑、壮观的摄影技术，
以及Simon Schama独特而富有个性化的叙事，
全面剖析艺术大师们孕育和诞生艺术品时扣人心弦的故事。
这部纪录片荣获国际艾美奖最佳艺术节目、
2007年第60届英国电影电视艺术学院奖最佳摄影纪实类等多项国际大奖。
05
《Design for Life》
《创意生活》
这是一档BBC真人秀设计师比赛节目，共6集。
国际知名设计师Phillipe Starck
寻找英国最有前途的新人设计师。
通过全国选拔，
12名怀抱热情与梦想的设计师来到到巴黎史塔克设计学院学习，
他们的目标是把自己的设计思路变成真实的产品。
Phillipe Starck设计了一系列任务，
挑战设计师们的才华创意，但最后的赢家只有一个，
走到最后的人将获得和世界顶尖设计师一起工作的机会，
准备面试的设计师们更要好好看一看喔。
06
《Objectified》
《设计面面观》
这是一部以工业设计为主题的长篇独立纪录片。
展示了创造工业产品流程的实录片断，
并记录了与世界顶尖设计师们的交谈与讨论。
采访到的设计师们包括：
纽约现代艺术馆馆长Paola Antonelli，
慕尼黑BMW首席设计师Chris Bangle，
巴黎兄弟设计组合Ronan & Erwan Bouroullec，
美国明尼阿波利斯市Walker艺术中心平面设计师Andrew Blauvelt等世界最具影响力的设计师。
导演Gary Hustwit用洞察深切的镜头
记录了这些在我们身边随处可见的工业设计产品，
看似稀松平常的设计背后，
却是设计师们倾尽全力的良苦用心。
作为从事工业设计的童鞋来说，
自己的专业领域能被拍成纪录片也是一件感到自豪的事。
07
《Urbanized》
《城市化》
Gary Hustwit 纪录片设计三部曲的最后一部，
着重记录一座城市的规划与设计，
突出了致力于解决城市问题和提出对策的世界顶尖建筑师、规划师、决策者等人。
世界上一半以上的人口生活在城市地区，
到2050年这个比例将变为75%以上。
虽然一些城市正在经历爆炸式的增长，
但其他一些城市却处在正在压缩的过程中。
在住房、流动性、公共空间、民众参与、经济发展和环境政策之间取得平衡的挑战正迅速成为一个普遍关注的问题。
中国的城市化进程也是如此，
因此观看该片，会有更深刻的体会。
08
《我在故宫修文物》
由中国中央电视台出品的一部三集文物修复类纪录片，纪录故宫里稀世珍奇文物的修复过程和修复者的生活故事，
把工匠精神这件严肃的事讲得细腻、
温软且富有人情味。
该片是一部内蕴优裕的纪录片，
在一个个对于文物修复师而言的稀松日常里，
我们能够看到比修复钟表、青铜器、木器、古琴更多的东西。
片中提到一句“修复文物是穿越古今与千百年前进行对话的特殊职业和生命体验”，
在故宫神秘的身影下，这似乎更令人感到惊艳。
作为中国设计师，更应好好观看，
正所谓，民族的，才是世界的。
09
《デザインあ》
《啊！设计》
《啊！设计》是NHK一档经典设计节目，
每一集邀请重量级设计师讲述设计的秘诀，
深泽直人、仲条正义、祖父江慎、伊东丰雄，柴田文江……
虽是面向儿童，但视角独特、充满对思维的启发，
赞叹日本设计教育的同时也让我们反思。
这部片放到大学设计系的课程都不为过，
因为很多一些基本的设计常识，
即使已经就业的童鞋可能都不了解，
值得设计师好好观看。
10
《夢と狂気の王国》
《梦与狂想的王国》
该片为日本的一部纪录片，
由砂田麻美执导，探秘吉卜力手绘动画创作过程，
展现了宫崎骏、高畑勋、铃木敏夫，
三位老人以及新时代年轻人对动画的执着与热爱。
关于宫崎骏、吉卜力的纪录片已经很多了。
《梦与狂想的王国》则是选取了宫崎骏创作封笔之作《起风了》和高畑勋创作《辉夜姬物语》的这段时间为记录对象，
着力表现了两人的友谊历史和之后的创作分歧。
宫崎骏乘坐火车去看自己的试片会。
看完后，他走上台只说了一句话，
“对不起，生平第一次看自己的电影哭了。”
相信看完后，大家都会想再刷一遍宫崎骏的电影。
这10部纪录片，都是设计片中的经典，
可以收藏起来反复的观看，
每个设计阶段都会有不一样的感悟。
片子通过搜索都可以找到片源，
找不到的可以在后台回复（纪录片），
会推送片源链接。
最后希望大家身体健健康康的，
祝福祖国早日抗疫胜利，加油！
文中涉及到的所有工具与插件，考虑到部分小伙伴可能下载外网资源太慢，我已将相关插件全部打包整理完毕，可在公众号中领取！
如期而至，这是标签栏控件总结的第二期。
这一期我们来聊一聊标签栏中的关键元素——图标。在此之前，如果你还没有了解标签栏的平台规范，可以回顾：《没弄懂标签栏之前，先不谈用户体验》
图标其实存在于界面中的许多地方，但因为这一期主要分析标签栏，所以我会借标签栏中较主流的图标样式，总结一套图标制作与落地方法。这些方法在图标制作过程中都是相通的，大家可以举一反三。
图标具体样式风格的定义是非常主观的，网络上也流传着许多的教程教大家如何设计五花八门的图标，所以在这里我就不再赘述了。我主要来总结一下基础的标签栏图标一般有哪些样式变化。
我调研了诸多的应用程序，发现主流的APP标签栏样式变化，大致分为以下五种。其中最占比最多的是“由线型转面型”。
调研的应用程序中，所有使用到线性图标的应用程序，都将描边粗细限制在1pt-2pt之间。
上一期我们讲到，iOS定义了一套标签栏图标的尺寸规范。
iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。
那么为什么iOS会根据不同的图标形状给出不同的图标尺寸呢？因为50px*50px的正方形比50px*50px的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）
于是我们看到许多平台都推出了图标辅助网格规范。其实如果遵从“面积相等”原理，理论上所有的图标网格都应该由下面这一套推理公式得出（以Material Design 标准图标网格为例）：
但实际情况是，不同平台的图标辅助网格规范建议尺寸都有一定的差异。原因就在于，虽然有时候我们参考“面积相等”原则对图标视觉尺寸进行了规范，但项目落地后发现视觉上可能还是有一些不协调，所以最终设计师还是会凭借自己的主观判断再进行微调。
记住：好的设计作品是理性的设计理论与设计师本身感性的碰撞结果，二者缺一不可。
iOS规定标签栏图标的输出尺寸统一为31pt*28pt；Material Design规定标签栏图标的输出尺寸统一为24dp*24dp。
但我们发现，在借助了图标网格解决了图标视觉大小的问题之后，每一个不同形状的图标，尺寸其实是不同的。为了方便前端落地，我们在输出切图文件时，要保持每一个图标文件的输出尺寸是相同的。该怎么办呢？
于是我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生，所以我们称这个区域为“安全边距”。
对于安全边距的规定：Material Design全平台规定图标的安全间距统一2dp；iOS则根据不同的图标使用场景给出的不同的图标网格和图标安全间距。
标签栏的图标一般分为静态图标和动态图标两种。
静态图标的实现方法相对容易，可以与前端沟通确定本次项目交付的标签栏图标文件是采用位图还是矢量图。如果是位图建议交付.png格式文件；如果是矢量图建议交付.svg格式文件。
使用位图时请注意以下两点：
1）不同项目环境输出的切图套数不同
· 交付iOS原生的标签栏图标切图需要 @1x/@2x/@3x 三种倍率的切图文件；
· 交付Android原生的标签栏图标切图需要 @1.5x/@2x/@3x/@4x 四种倍率的切图文件（@0.75x和@1x切图层分别用于ldpi和mdpi分辨率设备，但这些设备现在几乎已退出市场，所以可不考虑，但最终视项目真实需求确定。）；
· 交付web项目的切图需要试情况而定，一般常用 @2x 切图，因为@2x向下适配@1x、向上适配@3x，都不会产生太大的图片失真。但有时候前端小哥会要求用到其他倍率切图，所以最终以具体需求而定。
请注意：这里我所提到的倍率全都是“绝对倍率”，这个概念非常关键。
“绝对倍率”指的是：以上所有的倍率都是针对 @1x 设计稿下的输出倍率尺寸。而当你使用@2x作图时，为了保证“绝对倍率”不变，你的切图输出倍率就应该设置为 @0.5x/@1x/@1.5x 。
如果你在@2x下作图，却依然保持输出 @1x/@2x/@3x 的切图，那你输出的文件尺寸最终其实是 @2x/@4x/@6x。
有一点绕的话，我们以Sketch导出位图切图为例：
所以如果你日常使用的是Sketch，也是用Sketch原生导出工具，那你的切图预设应该根据你的作图尺寸而定，见下表：
如果你日常使用的是PS，用Cutterman切图，那么Cutterman会自动识别你当前的画板，然后根据它的宽（横屏情况下是高）来设定它的基准分辨率。那么你在任何情况下输出 @1x/@2x/@3x 的切图，其实都是“绝对倍率”，不用像Sketch当中一样换算。前提是“设置当前画布为：Auto（自动识别）”。
假设你在@2x下作图，执意不管不顾“绝对倍率”，又忘了交代前端人员手动处理切图尺寸的话，那你所有的切图尺寸实际都是设计稿所需图标尺寸的2倍。就算前端小哥帮你手动处理了切图尺寸，每一张切图所包含的像素信息，都比项目真实所需的要多很多，完全就是在徒增所需切图文件的大小。
2）注意切图文件大小
切记，公司的线上项目中，用户从服务器下载的每一单位的流量都是要公司花钱的，所以许多项目管理者都是很在意控制线上文件大小的。于是压缩切图是UI必备的技能之一。
虽然图标的文件大小一般只有几KB，但是项目大了难免积少成多，所以在真实项目中，不管任何切图我都会手动压缩一次。
这里推荐一个压缩.png文件大小，但几乎不会产生失真的免费网站 tinypng。
位图切图会面临交付的倍率图过多、容易失真、文件大小难控制等问题，但对于矢量图，这些问题都得到了解决。目前.svg矢量图落地也在项目中越来越流行了。UI可以在Sketch或Ai中制作。
一般与前端人员对接有在线图标库对接与本地文件对接两种。
在线矢量图标库有很多，国内比较流行的是阿里巴巴矢量图标库-iconfont；本地对接就是直接将文件发送给前端人员，他们会自行进行项目文件的管理与调用。
如果.svg切图输出后，与设计稿中样式不符，请注意排查以下三点：
1、svg不支持渐变颜色填充；
2、svg不支持描边，请将所有的描边轮廓化。Sketch中可通过“图层-轮廓化”（快捷键⌥⌘O）；Ai中可通过“对象－路径－轮廓化描边”；
3、要确保一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。
为了提升用户体验和产品趣味性，动效微交互的标签栏图标也越来越流行了。
动效在前端落地的方法其实有很多：
· 前端代码直接实现：代码是很强大的，但通常用代码直接写复杂动效会很浪费项目时间。简单维度的动效如位移、透明度、大小变化等可以借助代码，但复杂动效就不要去打扰前端小哥了；
· 直接刚gif：这已经是老旧技术时代的动画解决方案了，文件大且请求文件也需要时间，有时候无法给用户及时的触控反馈。再者它是位图的原因，在高分辨率屏幕上缩放容易失真。
· png序列帧：我们知道，动画是一张一张的静态图交替变化形成的。如果将每一帧动画都拆分成一张图片，就有了png序列帧。所以一套动画的png序列帧往往非常多，文件大小自然就变大了。所以后来也有团队引进了雪碧图的方式，但文件大小依然不乐观。并且同样是位图的原因，高分辨率屏幕容易失真。
· Facebook Pop/Rebound/Keyframes：Facebook Pop/Rebound是Facebook给iOS和Android提供的常用动画预设，是较早将动效代码化的开源技术方案，但动画效果预设只有弹簧/衰减等一些简单样式。后来Facebook又推出了Keyframes，允许设计师自己在Ae中自定义动画并导出，然后交付给前端人员。
· Lottie动画：和Facebook Keyframes相同，都是结合Ae输出动画代码。但是Lottie更厉害的地方在于，它比起Facebook Keyframes来支持的Ae样式更多，例如蒙版、遮罩、修剪路径等等。
所以综上所述，落地标签栏动态图标，目前最可行的还是Lottie动画。
Lottie是Airbnb开源的一个跨平台动画库。表现层面它是一张图片，但实现的方式是通过代码，所以它是矢量的。很花式的动画也可以把文件大小做到非常小。
UI与前端对接是通过交付一个json代码文件。
如果这是你第一次接触Lottie，再好不过的体验方法就是玩一玩阿里提供的一站式动画平台：犸良动画 。它最底层采用的技术就是Lottie，只是被阿里二次封装了许多预设的动画效果，你可以自定义其中的元素与参数，然后试着导出你的第一个json文件~
接下来是简单粗暴的UI与前端对接实现Lottie动画落地的全步骤参考。在此之前，想要全方位了解Lottie的相关信息，请参阅Lottie官方说明文档。
· 步骤一：安装Ae和bodymovin
制作Lottie动画，首先你必需两个工具：Ae和bodymovin插件。
Ae版本要求为Ae CC2014。又因为据很多设计师反馈，目前bodymovin在汉化后的Ae中使用会出现诸多问题，所以后面的教程都是基于Ae英文版。如果你汉化了Ae，最好在需要制作Lottie动画时取消汉化。
然后获取bodymovin。bodymovin插件更新至今，版本已非常多，并不一定版就适用于你当前的项目，因为前端使用的bodymovin解析包可能无法解析你用版bodymovin插件输出的json文件。
一旦确定使用Lottie，前端人员会在GitHub查询Lottie相关文档的，所以UI只需要配合前端确定一下合适的bodymovin插件版本就可以了。最终走查时，一定要确保当前bodymovin输出的动画在项目所需要运行的所有环境中可运行，才说明UI使用的bodymovin插件和前端使用的bodymovin解析包版本是兼容的。
获取了bodymovin后，将bodymovin拖入到ZXP Installer中，ZXP Installer会自动识别插件安装到Ae。
安装完成后，就可以在AE的“窗口-扩展”中看到bodymovin啦~
· 步骤二：将Sketch或Ai中的文件导入Ae
如果你技术娴熟，当然也可以直接在Ae中绘制图案动画。但如果你还是习惯先在其他软件中绘制好基础图案，再到Ae中制作动画，那你需要了解如何将图案导入Ae。
Ai和Ae都是Adobe旗下的工具，所以Ae是可以完美解析.ai文件的，如果你是使用Ai作图，可直接存储为.ai文件，再在Ae中打开。
如果你使用的是Sketch，可以先导出为.svg，再用Ai打开该.svg文件，转换存储格式为.ai，最后到Ae中打开。
当然，Sketch还有直接和Ae对接的插件，AEUX（前身Sketch2AE）。需要在Sketch和Ae中同时安装AEUX插件，Sketch负责传送，Ae负责接收。具体的使用方法可以在官网教程中查看，我就不再赘述了。
·步骤三：制作动效并输出
和静态图标同理，为了保证落地时图标视觉大小一致，一组动效图标输出的文件尺寸应该是相同的。所以在你制作动画之前需要确定合成文件的尺寸。Lottie官方建议：因为Lottie输出的是矢量动画，所以建议以@1x输出动效，前端人员在任何屏幕上放大并不会失真。
在制作之前请务必详细阅读Lottie所支持的Ae参数文档，以免辛苦做出的动效，前端无法解析。特别提醒：原生环境中bodymovin是不支持解析Ae表达式的。
完成制作动效后，就可以通过bodymovin导出动效了。
·步骤四：预览与交付
导出完成后在你的目的地文件夹中将存在一个.json文档，如果你的动效中还使用了位图，系统还会自动生成一个images文件夹。这些都是你需要交付给与你对接的前端开发人员的文件。
.json文件中记录的动效代码UI不需要过多关心，但是其中两个信息你是一定要了解的。它们是你与前端对接沟通和获悉文件信息的一些关键参数。
UI自检动效或其他相关人员需要预览动效的时候，可以用LottieFiles，拖入.json文件即可预览。iOS和Android还可以下载LottieFiles APP，扫描预览页中的二维码即可在移动端预览。
整个制作图标的流程我已经全部整理出来了。首先要注意图标的规范，然后制作位图、矢量、动效图标时的注意点，我几乎把我在真实项目中踩过的坑都告诉大家了。剩下的创造性的环节就交给你了！
转自：站酷-UCD耍家
保持好奇，巧妙融合，追求卓越，自然而然
蓝蓝设计的小编 http://www.lanlanwork.com
