实拍一直是多媒体领域最常见也是最不可替代的呈现方式，在他的发展历程中这项技术也衍生出了不少有趣的风格和玩法，随着技术的进步，各种实拍新技术也是不停一直在影响着摄影师拍摄。
1.微距拍摄
微距，特别适合用来展示被摄物体的细节，比如小昆虫的五官，花蕊上的露水，冰霜上的晶体结构等等。您可以在摄影棚或室外环境中拍摄微观照片和视频，只要您充分放大被摄体即可。通常来讲人眼最近对焦距离是15cm，低于这个距离就看不清东西了，而专业的光学矫正镜头按照近距离拍摄进行设计可以拍摄出一个极端的近景视图，可以得到肉眼无法看到的细节。
△TOREAD探路者户外新品面料-「遇水搭桥」系列主题微距图拍摄
微距摄影是区别于常规摄影的一种特殊的摄影方法，这门拍摄技术带来的视感也非常的吸引人，但是往往这种特殊的拍摄手法却非常受限于硬件设备，正如我们前面所说的设备参数都是专门的微距镜头设计的。为了抓住这一点，让更多人知道这个有趣的拍摄手法，市面上也出现了越来越多不同的微距镜头给不同需求的摄影师使用。近两年比较经典的一个就是LAOWA24mm镜头，在于它独特的形状可以到达普通镜头无法企及的位置，机位更加独特。
2.升格拍摄
升格拍摄无疑是让视频表现提升几个档次的常用手段之一，电影的标准帧速率是24帧每秒，但是为了实现升格就需要一些技巧，比如拍摄的帧数高于24帧每秒，这就是我们常见的「慢动作」。现有的升格拍摄帧数基本上分为30帧，60帧，120帧，240帧，再往上则是影视和特殊拍摄会用到的了。由于肉眼观察高速运动物体是有限制的，在拍摄高速运动的物体的时候，利用升格将画面播放速度变慢便可以更好的观察到物体高速运动时的状态。
拍摄影片的时候在不同的环境之下也会利用升格烘托气氛，在我们看到的很多片子里面有紧张刺激的，煽情的，都会利用升格来烘托片子的气氛。由于相机技术的进步，拍摄变得比以往任何时候都更加容易。今天任何人都可以通过相机和高质量的麦克风轻松地成为vlogger拍摄出好看的旅拍视频，加上升格镜头在硬件技术的加持下可以快速的出效果，令这部分人群创作出更好的拍摄作品。
3.无人机航拍
如今技术发展，无人机的民用化推进，市面上各大厂商开始推出自己的航拍无人机，航拍也开始出现在了普通人的视野中，让普通人也可以在高空拍出想要的风景。加上如今4G和5G技术的发展，短视频的流行，令网络上的自媒体人也拥有了更好的展现自己作品的平台，这些拍摄技术的平民化让自媒体人们可以更好的发挥视频创作，而不会总是局限于技术。
4.高质量色彩呈现
如果你有自己拍摄视频，那或许有听说过LOG配置文件，LOG模式通常在专业和专业消费级相机中所配置的拍摄模式，LOG模式的颜色看起来非常平均，因为这样可以地减少截取捕获的高光或阴影。这使得输出的视频几乎没法直接使用，直到对其进行编辑。它的优点在于，以输出高比溶度的视频方式来调整颜色和对比度（即，对其进行分级）从而可以得到自己想要的视频颜色风格。
LOG指的是数学上的曲线函数，并不是一个独立的拍摄风格，而是风格用上了LOG函数转换，在这个模式下我们可以看到无论是明处或暗部LOG都将细节保留了下来，在这个基础之上调出我们想要的颜色方可得到一个更加清晰的图像。在数据图当中我们也可以看到log模式下所有的颜色数据都处于中间值，不会有过度夸张的位置，编辑之后的图像所有颜色的明暗都区分开来了，也形成了自己想要的色调。
实拍产业作为一个主流多媒体形式一直在发生着改变，随着科技的进步，曾经我们需要大费周章才能拍出来的效果，如今也越来越简单。各种新技术的出现不断地改变着人们拍摄的方式和形式，新的玩法也层出不穷并不断影响着其他的多媒体形式。未来实拍将会更加的简单平民化，让普通人也能拍出曾经大费周章才能做到效果。
纵观整个互联网设计行业发展史,计算机图形技术一直在影响着设计。
在计算机图形输出里，最终效果呈现靠的是图像渲染（Renderding），渲染又分离线渲染和实时渲染，以往字面上理解则是实时渲染，高质量则是离线渲染。下面介绍一下为了如何可以将两者结合实现高质量输出CG，视频动画。
Realtime-Render（实时渲染）：在虚拟世界的图形表现中，实时渲染占有很重要的地位。所谓实时渲染，就是图形数据的实时计算和输出。如果说实时渲染的概念对你很陌生，那如果用实时渲染领域中的一个重头戏来给你举例，相信你就不会有陌生的感觉：那就是游戏。游戏因为需要玩家去互动，因而对渲染的实时性有很高的要求。随着计算机图形技术的不断发展、硬件计算能力的不断升级，游戏实时渲染的画面逐渐从简陋走向逼近真实。
△Unrealengine4
△VisualASMRRockbyOnesal
△Unrealengine5
虚幻5
2020年5月13号,Unrealengine官网发布了UnrealEngine5并在Playstation5上运行进行展示Demo（「LumenintheLandofNanite」）
该演示展示了虚幻引擎5的两大全新核心技术：
Nanite
虚拟微多边形几何体可以让美术师们创建出人眼所能看到的一切几何体细节。Nanite虚拟几何体的出现意味着由数以亿计的多边形组成的影视级美术作品可以被直接导入虚幻引擎——无论是来自Zbrush的雕塑还是用摄影测量法扫描的CAD数据。Nanite几何体可以被实时流送和缩放，因此无需再考虑多边形数量预算、多边形内存预算或绘制次数预算了；也不用再将细节烘焙到法线贴图或手动编辑LOD，画面质量不会再有丝毫损失。
传统的模型资产做法–先是用Zbrush等雕刻软件又或者是3D扫描等数据模型–重新拓扑为高、中、底三种面数模型–展UV上材质–烘培法线、凹凸等贴图–导入游戏引擎中使用，那么为什么要做那么复杂呢？游戏引擎运行资源越大，可能会导致游戏的流程度和游戏体验不好，为了让玩家有流程的操作体验，通过高精度多边形几何体烘焙法线凹凸等贴图用在低精度多边形几何体上可以保留高模的细节从而节省运行资源提升游戏流畅度，Nanite完美解决了这个问题。
Lumen
Unreal5这两大功能可以说是克服了现阶段的难题让实时渲染更接近影视级渲染，然后简化了以前复杂的工作流程，让创造变得更简单了。这代表着以后只要涉及CG类的行业都会发展巨变。
2019年11月12日Quixel公司被EpicGame（Unreal的公司）收购并宣布Quixel旗下Bridge(材质管理软件)Mixer(材质编辑软件)Megascans(3D扫描资产)对所有Unrealengine用户免费，这一爆炸新闻。此前Quixel是靠卖高精度3D扫描资产盈利的。用Megascans的3D资产可以创造电影级4K-8K的真实画面，Unrealengine5的dome也是用的Megascans的资产，下面的案例（Rebirth）也是用的Megascans的资产。
△Rebirth
在没有免费开放Megascans的之前想要制作8K的3D扫描资产是非常困难的，需要大量的设备和人力支持，在网络上购买价格也不便宜导致普通个人用户是很难制作这样高精度的画面，这一消息让更多的自由职业者和个人艺术家加入了实时渲染的潮流趋势中。让4K创造不再那么困难。
MegascansEcosystem:GivingmorePowertoArtists(Megascans生态系统)
△AfterthemountainRain
来自中国的艺术家FisherDai（戴鑫祺）使用Megascans和Unrealengine4创造的4K个人作品。
△AfterthemountainRain(戴鑫祺)
2020年7月14日UnrealEngine官方发布一条宣传片（UnrealforallCreator）byTheMill,视频展示了UnrealEngine实时渲染在互联网、游戏、电影、电视、建筑、汽车等行业惊人的表现。
△UnrealforallCreatorsbyTheMill
△《Bloom》byHubertBlajer
△《Mostlywood》byNejcPolovsak
△《DigitalDesignDays2020titles》
R&D
△Manvsmachine《NostressTest》
△《Awebsitemakesitreal》
△LukasVojirR&Dshowreel
使用VR设备进行环境建模工作。
TheLochbyBoxfort
例如常见的3D的场景和镜头运动搭配2D的角色动画，使用非常流畅的镜头运动和丰富细致的3D场景，而视觉表现上保留传统2D动画的一些特性，两者结合形成的一种新奇动画语言，在未来还会继续流行。
△《PlusOneManifesto》ByMartijnHogenkamp
△《DisneyXDAndChildren’sHealth》ByBLIRPSTUDIO
△《企鹅诞生记》ByISUX
△《FuturoDarko》ByCraigFarquharson
5.影视手法的动态呈现
△《GogoroS3FutureFast》ByMIXCODESTUDIO
在充满了未来感科技感的3D大趋势下，颜色丢失，色调分离，质量损失的颗粒质感，低饱和低保真的画面呈现，也开始带来一种新的视觉感受。过往的动画风格与当下科技感、未来感的潮流碰撞又呈现了新的表现方式。这种风格应用在街头潮流的时尚产品的时候，跟以往60或80年代的复古元素相结合，使用新的设计语言去包装整合，能够强化产品的故事感，引起大家强烈的共鸣和代入感，激发大家头脑中那段美好回忆。
△《TheLegendofIQOO戦う！鉄拳》by茶山有鹿
△《MouseQ滑板俱乐部》ByISUX
△《ACEOFSPADES》byTonyBabel
△《Canofworms》byTonyBabel
7.更克制的色调与秩序感
在充斥着各式各样的新鲜元素的当下，节奏更快颜色更有吸引力，各类信息视觉都在捕捉你的视线。干净的色调、简单的视觉、真实的肌理、强调秩序感的动画的出现，使得人在视觉上获得了舒适的体验，很大程度上缓解了极速发展的时代所带给人们的焦虑。
△《BIC》byArtem‘Hinz’Yudin
△《MicrosoftSharePoint》
△《Beautyrest》byTendril
在当下许多海报等平面视觉都有了动态化表现的需求的情况下，动态视觉的加入打破了很多条框和颜色的禁忌，去掉了华丽的修饰性的元素，在内容的呈现上体现了更多的创意，画面中不断变化的图形排列、动态的3D图形和字体起到了非常吸睛的效果。在大量时尚品牌和艺术活动的宣发当中，画面结合强烈的撞色荧光色，以及波谱的拼贴艺术手法，能够更好的表达品牌传递的时尚感和新鲜感。
△CreativeCrew
△LeCantiche1320
△reed.be
△OlympicSportsWebsitebyDanielTan
近些年来各媒介手段和智能装置应用的兴起，人们已经不满足于单一的视觉感受。电子音乐与拟态三维全息投影相互配合，在不断变化的声光交互光影和空间场景中，能迅速把观众带入多个不同的全新场景的沉静式体验。
AR/VR
△FórumInternacionaldeGaia2019
△《JOURNEY》byNOHLAB
△《Teleport》ByPITCH
多媒体的设计趋势在未来会如何发展，我们拭目以待。
在这个项目中，主要任务是为旧金山最古老的玩具品牌Jeffrey’sToys设计一个全新的品牌电商网站。
新电商网站最主要的目的是吸引顾客前往线下店铺选购商品，同时也希望通过快递和门店自提的方式来完善线上销售流程，拓展消费群体。
该网站的主要业务目标包括：
1.用户画像
谁才是这个网站真正的用户？当我接到这个任务的时候，客户已经绘制出了3个用户画像，每个用户画像都有特定的需求和痛点。
△客户绘制的三个用户画像
基于三个用户画像，我确定了该网站要满足的用户需求，同时也考虑了Jeffrey’sToys的需求。
确定的主要需求是：
2.竞品分析
为了获得启发，我确定了3个主要竞品，特别是旧金山的精品玩具店；还有3个玩具零售市场的间接竞品。直接竞品我分析了包括AmbassadorToys、Amazon和TANTRUM。间接竞品分析了Lululemon、Ikea和CVS。竞品分析的目的是比较并找出这些电商网站的共同特征以及Jeffrey’sToys能够脱颖而出的潜在机会。
竞品分析最重要的收获是了解了不同的电商网站的商品选择模块以及网站整体的布局。这些信息有助于巩固我第二阶段的研究。
△比较直接竞品和间接竞品的特征
2.思维导图
在完成竞品分析之后，我把这个项目中用户的需求和客户的需求列成了长长的信息清单。之后我又通过思维导图来理清了在这个项目中用户的需求和客户的需求。思维导图帮助我将信息组织成更清晰的想法，同时在各个想法之间建立层次结构关系。
△用来理清信息和想法的思维导图
接下来我通过卡片分类法来构造网站的导航系统，卡片分类法是一种利用人们现有思维模型的研究技术。在构造导航系统时，我了解到94种商店中最畅销的商品库存信息。拥有如此庞大的商品库存，就很有必要通过清晰易懂的方式组织、分类库存信息，以便用户能够快速的找到他们想要的商品。
1.卡片分类
△卡片分类的初期阶段
开放式卡片分类：我要求9位参与调研的用户通过他们自己觉得合理的分类规则将94种商品分类，然后给每个类别加上他们认为能够准确描述该类别的标签。这样做的目的是对于网站潜在的商品分类方式及类别名称有一个大致的了解。
封闭式卡片分类：基于开放式卡片分类的结果，我从最常见的类别标签中创建了13个预定类别。然后，我进行了封闭式的卡片分类，我邀请了20位参与调研的用户将商品逐一分类到我之前预定的13种类别中。封闭式卡片分类有助于让我在进行设计之前能够清楚判断这些类别是否符合大部分网站用户的分类逻辑。
△通过卡片分类得到的13种商品类别
2.站点图
根据卡片分类以及竞品分析的结果，我绘制了网站的站点图来明确整个网站的框架结构。这是为了确保所有产品都放置在用户期望的位置，同时使购物体验更加直观。
△站点地图
3.系统架构图
为了对用户将会如何浏览网站有一个全面的概述，我绘制一张系统架构图。这样做的主要目的是为了了解网站应该给用户提供什么功能以及功能拓展的广度。我还通过系统架构图来探索电商网站和实体店铺之间的联系。
△系统架构图演示用户将会如何浏览网站
4.用户流程
我绘制的第一个用户流程是关于用户画像是Jenny的。Jenny最主要的目是为自己的孙子购买初级魔术玩具。Jenny的用户流程（如下图所示）表明了她是如何搜索初级魔术玩具，以及为了成功购买她可能采取的几种不同路径。
△Jenny的用户流程
△Debbie的用户流程
1.草稿
在我整理了前期获取的所有信息之后，我就开始着手设计网站。基于之前整理出来的用户流程图，我开始绘制几个主要页面的草图，同时快速思考出几个不同的网站布局方案。之后我邀请3个用户参与了用户调研，以验证这些方案是否同时满足客户和网站用户的需求。
△网站首页和品类页面的初稿
2.线框图
基于用户对草图的反馈和我个人的想法，我开始使用Figma来绘制线框图。整个过程中，根据优先级不同，优先考虑最能满足网站用户的功能。
△网站首页和产品详情页的线框图
1.主页
首页我尽可能的保持简洁，避免用户进入网站时被过多的信息干扰而不知所措。
首页放置了全局导航、辅助导航和搜索栏，方便用户快捷的找到自己想要的商品。首页还放置了新品推荐，因为新品推荐能够展示品牌丰富的库存，同时能为用户提供有用的购买建议。我想通过介绍Jeffrey’sToys丰富的历史来树立用户品牌联系，所以在首页我还放置了「关于我们」部分，用户点击还可跳转到具体的介绍页面查看更多关于品牌故事的信息。在页脚，我放置了其他的用户可能需要的信息。除此之外，我还将用户交流系统放在页脚，这样是为了获得用户想法并在店铺进行活动时通过用户参与提高店铺活动氛围。
2.商品类别页面
当用户点击商店按钮或者是某个类别之后，用户将会前往一个列出了该类别下所有商品的商品列表页。有个用户画像想要给他的孙子买一个合适他孙子年龄的玩具，所以页面需要一个品类筛选器，同时支持商品按照不同的属性例如年龄、价格和品牌分类也很重要。除此之外，我还通过面包屑导航来方便用户定位页面位置。
△商品类别页线框图
3.商品详情页
在商品详情页，我希望能够提供尽可能多的商品详情来确保这个商品是用户想要的。
△商品详情页线框图
4.购物车预览页
当用户点击「选好了」按钮或者是购物车按钮，用户将会进入到一个如下图所示的购物车预览页。这是结账下单流程的第一步，用户在购物车可以管理他们所选的商品，作出合适的调整。用户在下单时，可以选择到店自提或者是物流配送，设置到店自提是为了引导用户去Jeffrey’sToy的线下店铺，同时降低运输成本。
△购物车预览页线框图
5.结帐页面
△下单页
△订单查看页
6.其他画面
我还创建了一些其他页面，例如订单确认页面。订单确认页面明确告知用户结账流程已经完成了，用户还能在订单确认页查看有关订单的其他信息，以供参考。
除此之外我还创建了一个「关于页面」用来着重强调Jeffrey’sToys与其他电商网站例如亚马逊的区别。我还在这个页面介绍了Jeffrey’sToys长达60年的独特历史，以增强用户对于品牌传统、有趣和创意的商业价值的印象。
△订单确认页
△联系方式页
△公司介绍页
7.可用性测试
我邀请了4位用户进行可用性测试，为了让他们吻合用户画像中的用户特征，我指定了三种用户场景来让他们完成测试。这三种用户场景包括：
这些是我通过可用性测试得到的用户反馈：
△可用性测试得到的反馈
8.后续步骤
△首页
△商品分类页
△商品详情页
容易被忽视的图形，不仅能传达不同的情绪，也能提升视设计的品质感。
1图形是什么
2好的图形设计长什么样
提到图形设计，你脑海中对应到的第一个画面是什么？我们打开了某搜索器，检索了「图形」二字，这里的图形多集中于「几何图形、标志、矢量图形、图标」。
我们又搜集了一些不错的设计网站，搜索「图形设计」或「graphicdesign」，它的表现形式与应用范围都扩大了，海报、信息、插图、包装、图标、字体、摄影、标志、品牌，无所不在。
如果给图形下个定义，它主要指二维空间中可以用轮廓划分出的空间形状，设计中无处不在的表现手法。它与色彩、版式、字体等一样，在设计师的知识体系中处于相对重要的位置，但往往容易被忽视。
在优秀的设计作品中，图形可以作为主体、符号、辅助、信息等不同角色出现在设计的各个应用场景中，可以通过抽象的、具象的、平面的、空间的多样化表达手法，传达出不同风格的视觉表现力。
那么，好的图形是什么样的？我们可以从3个维度去感受好的图形设计作品：抽象、创意与风格。
抽象是对日常事物的提炼与概括，我们先来感受一下下面两组建筑，某搜索器中的「最丑建筑」和「知名建筑」之间的对比。可以很直观的感受到，抽象的图形与色彩可以传递更加丰富的情感。
我们可以看这个案例，1个点产生了多少可能性？这是美国一家大型连锁超市的logo，以这个点为原型，衍生出了各种解锁生活方式的海报。简单的点，发散出各种生活方式，一看就能够知道超市供应的各种商品。
设计的创意体现在哪儿呢？我们先看看那些脑洞大开的大师们是如何使用图形的。
第一位是福田繁雄大师，在他的年代没有人用这样的图形方式做设计，炮弹朝向炮筒里面，一张非常简洁的反战海报。他也特别擅长运用图形的异形同构。
第二位是瑞士的史蒂芬邦迪大师，这些是他为剧场设计的宣传海报。简单的人形搭配鲜血撕裂感的方式就可以把卡门剧情表达出来了。
再看网易云音乐与快手联合做的民谣音乐节H5，音乐的感觉一下就出来了。
很简单的图形运用，就能产生创意性的差距。
著名的可可香奈儿女士曾经说过，流行稍纵即逝，但风格永存。
从包豪斯开始，设计风格发展到今天已经是多元混合存在的，很多所谓流行不过是循环与往复。
即使是运用最简单的图形，也可以表达出不同的风格，甚至引领浪潮，为品牌传播加分。比如，下面这组图，你能猜的到是同一家公司的传播海报吗？
举个栗子，我们为「夏季青年音乐节」设计一张活动海报。
我们首先给主题做一个分析、把关键词拆解与排序后，视觉的重要程度依次是：音乐、夏季、青年、节日。
这些关键词让你最直观的感受是什么呢？
基于感受，我们可以尝试提取出基础的图形元素了。
色彩方面，我们也可以根据对应的元素去设置，最终我们提取出了这组图形元素。
这一步需要我们设计师发挥想象力了，为一组元素找到视觉上的联结关系。这也需要大家平时能去多看、多想、多练。
然后，我们为图形融合进更多的细节。
我们首先采取最简单的主体式构图方式，将想突出的图形最大化、成为视觉焦点，添加海报所需文字进行排版。
这种方式能够做出相对合格的图形海报，但我们可以用不同的版式与分割构图，去尝试更多的可能性。比如第三个海报，我们可以先建立不一样的版面分割、进行配色，然后再放入图形与文字进行排版，营造不同的画面感觉。
其他两组也可以用这种方式、进行不同尝试。
最后，我们可以整体上对比一下。
文字LOGO的设计经常会采用优质的经典字体作为基底，那么我们所熟悉的著名品牌会使用哪些经典字体？这些字体本身又有哪些特质，被这些品牌所选择？而设计师在设计的时候，又是如何借用这些字体的特质来凸显品牌的特征？这回借用一个LOGO「逆向工程」设计项目，盘点8款经典英文字体，以及一系列优秀的LOGO设计范例。
其实，以这种方式来重新解构这些令人熟悉的LOGO本身是一种非常有趣的尝试，给人的体验也颇为不同。但是回过头来说，这也证明了一件事情：即使是那些你感觉很熟悉的字体，同样可以借助一些并不复杂的方式，来制造出爆款设计，营造出令人过目不忘的独特视觉体验。
在这些品牌LOGO的文本字体当中，有很多大家非常非常熟悉的字体，它们在英文字体中的大众认知程度，完全不亚于「微软雅黑」在中文世界里的认知度。
Futura字体的灵感来自包豪斯运动，继承了包豪斯的设计理念，由设计师保罗伦纳1924年至1926年所创建。Futura不仅本身大获成功，而且成功催生了新的几何无衬线字体。
在国外的设计圈中，设计师私下经常调侃，在设计的时候尝试过很多不同的字体，最后总会用回Futura，于是有了「字体不决就用Futura」的调侃。当然，很品牌的LOGO设计是否几经修改重回Futura就很难说了，但是我还蛮认可这种说法的。
FedEx
Supreme
PayPal
Nike
RedBull
很多现代都使用Helvetica字体来作为设计的基底，借助基础的倾斜、色彩和装饰，在它现代和整饬的设计基础上，来营造独特品牌视觉特征和气质。
Target
Energizer
Post-it
TheNorthFace
CAT
Behance
Avenir是由AdrianFrutiger设计的一款无衬线字体，最初于1988年由莱诺字体公司发布。「Avenir」在法语当中是「未来」的意思，在某种意义上，它和Futura在精神内核上有所呼应。
和Helvetica一样，Avenir字体是为了「基本适合用在任何平面设计场合」的一种字体，同时，Frutiger先生也认为，无衬线字体是不应该有斜体的，所以他也仅仅只是为了商业需求，使用光学仪器制作了伪斜体的效果。
Avenir这款字体整体呈现出一种中性、去性格化的特点，是一种气质「透明」的字体。
Toyota
我们常说的AvantGarde字体完整的名称应该是ITCAvantGardeGothic，它原本是AvantGarde杂志的LOGO字体，由HerbLubalin所创建。
由于AvantGarde出色的几何特征，很多品牌LOGO在设计的时候都考虑并采用了这款字体。
Adidas
NewBalance
Durex
Gotham是一款2000年的时候为GQ所设计，并于2002年向公众开放的字体。它出现的地方很多，从可乐瓶、推特、Spotify、Netflix、Saks到纽约大学、翠贝卡电影节，这还不止，包括《柯南秀》和《周六夜现场》在内的电视剧、包括《盗梦空间》、《点球成金》、《可爱的骨头》和《月光男孩》在内的电影，都用到了这一字体。
编者按：在几年前，Gotham是一个小趋势。
Gotham原本的设计构思中，是要呈现出一种「新鲜和阳刚」的气息，不过真正投入使用的时候，才发现它的细体非常的具有女性的「优雅感」。Gotham在现代的品牌和LOGO设计中应用广泛，它兼顾了灵活和高级感，说是「可盐可甜」一点错都没有。
TikTok
Spotify
Discovery
Univers字体和Avenir同样出自设计师AdrianFrutiger之手，不过Univers是Frutiger的早期字体作品，它和Helvetica并称为「瑞士风格字体」，最初是作为一款照相排印字体所发布的。
Univers字体的字重控制和其他的字体不同，是按照数字来进行区分的，到现在Univers字体族当中所包含的变体已经非常之多了，多达44种，不同宽度、粗细变化的衍生字体使得它作为LOGO字体非常方便。
Alibaba
ebay
正如同你从下图看到的，Myriad字体就是Adobe的LOGO品牌用字，因为这款字体原本就是RobertSlimbach和CarolTwombly为Adobe定制的字体。不过，值得一提的是，Myriad字体的基底是Frutiger字体——而Frutiger、Univers、Avenir三款字体系出同门，都出自AdrianFrutiger之手。
和很多早期的非衬线体字体不同，Myriad从一开始就是为了数字化而设计的，字体家族内不同字重、样式的变化是动态的，通过不同的字母宽度调解平衡，给人温暖友好的感觉，而这一点也使得它在屏幕和印刷品上，显得更加协调和自然。
Adobe
Visa
Walmart
Monatype在设计Arial时，考虑到会在电脑上面使用，在字体及字距上都作了一些细微的调整和变动，以增加它在电脑屏幕上不同分辨率下的可读性。
Skype
Pxxxhub
在进行小程序项目启动，进行技术选型的时候，对市场上多个小程序框架进行了考虑:
团队成员mpvue、wepy、uni-app都有实际的项目经验,且根据Github上的star数还有issue,最后决定回到到使用原生开发。
虽然框架有些很成熟，有工程化和跨端的解决方案，也有实际的上线项目，但考虑到后续一些支撑性的问题(维护，文档，坑等)，在github上看了issue，有些已经没在维护了。
想着让项目持续迭代，不受第三方框架限制，保持稳健，最后决定使用原生，跟着官方的迭代升级，自己维护，引入前端工程化的思想，提高繁琐的流程以及开发效率。
图片资源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改动，容易有冲突，将scss文件传到服务器就好了).prettierrc.js(代码格式化风格配置)babel.config.jsjest.config.js(单元测试配置文件)webpack.compress.js(指定入口图片资源文件，将图片压缩编译到小程序的资源目录)webpack.config.js->(工程化入口文件,指定入口scss文件，监听文件变化，自动将scss编译为wxss)
.安装依赖npminstall或yarninstall.编译scss
npmrundev.压缩图片npmrunimg.单元测试npmruntest(生成测试报告)npmruntest:watch(监听测试文件改动—开发环境下使用)
执行npmrunimg将图片压缩到app/assets/img目录下,一张7k的图片变成5k，肉眼看不出有什么差别。
执行npmruncreate终端会提示选择页面还是组件,选择页面,按Enter键，输入页面的名称，会自动将4个文件创建到app/pages/xxx下。
执行npmruncreate终端会提示选择页面还是组件,选择组件,按Enter键，输入组件的名称，会自动将4个文件创建到app/components/xxx下。
工程化的初衷就是为了减少重复性的操作，提高编码的效率和乐趣。
JavaScript是弱类型语言，好处是灵活，坏处是太灵活(多人协作，维护别人写的代码就是很痛苦了)。
项目最主要的是稳健，可高度自定义拓展，不拘束于版本和地上那方，特别多人协作的团队，工程化能给团队带来更多的收益，后续也会考虑将TypeScript等其他好的方案引入项目。
但是，想要做到可靠、易用，系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法，结合了不少实用的案例，希望对你有所帮助。
1.1、让用户知道自己在哪
没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。
Google的底部导航栏设计
1.2、要经过多少步骤来完成任务
Selecto的调查问卷的设计
数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。
即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。
这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。
AliAli所设计的悬停点击动画
但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的
2.1、单击点赞按钮
Spreadlove,notviruses，作者CharlesPatterson
2.2、开关按钮
这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户
SwitcherXLIV,作者OlegFrolov
2.3、书签按钮微交互
这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。
Bookmarkinteraction，作者OlegFrolov
2.4、添加购物车微交互
在这种情况下，视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。
咖啡下单动效，作者NhatM.Tran
3.1、系统正忙于什么事情
当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。在用户等待的过程中，通常会实用无限加载的动效（一般使用在低于10s的操作中）：
对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候实用进度条会更好：
这些视觉反馈很大程度上降低了系统给人的不确定感。
对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。
Logo闪屏，作者GlebKuznetsov
3.2、内容加载
内容加载，作者GinnyWood
这种设计方式对于移动端和桌面端的设计同样适用：
界面骨架加载动效，作者ShaneDoyle
4.1、通知和提醒
AlekseiKipin设计的通知动效
4.2、提示用户采取行动
随着大众消费生活多元化和个性化的发展，卡通形象在当下社会的影响力变得越来越重要，它们活跃在各个文化领域中，特别是在商业中应用也越来越频繁。
在信息爆炸时代，大多数人对过量的文字信息容易产生排斥的心理，并渐渐乐于接受视觉图像形式的表达；而卡通形象由于其本身简洁的视觉形象，也成为了最理想的视觉传播符号之一。
先罗列几个比较有名的卡通形象
卡通形象一般分为具象动物类型和抽象类型两个方向。一提起动物类比较有名气的卡通形象（比如熊这种动物），你大概会先想到熊本熊、布朗熊、泰迪熊，还有韩国的倒霉熊……兔子类的就是兔斯基、找死兔、可妮兔、流氓兔，还有很早的兔八哥……太多太多。
熊本熊的特征比较明显，一身黑色加上两个红腮点，颜色上本身就给人很潮很时尚的感觉，体型略宽厚偏呆萌。很多女生会觉得它给人一种安全感，我的印象里它一直都是很憨厚的面瘫造型出现，特别是出现在GIF动图里大量真人穿着它的道具摔倒的画面（有了“智障熊”这个外号）比较搞笑，有点愣头愣脑。
流氓兔（MASHIMARO）是一只眯著眼的韩国兔子，随着无厘头文化的兴起，流氓兔调皮又带戏谑的个性通过原创者创作的网络动画形式呈现，其FLASH动画在亚洲乃至全球掀起不小的风潮。
还有监狱兔、兔斯基、兔八哥…这些耳熟能详的形象，这里不一一列举了。
以具象动物创作卡通形象既简单又挺难的，为什么简单？因为不用你去较劲脑汁再重新创造一个新的形象，具象动物（比如熊）就是那个样子。那为什么又很难？具象动物卡通形象太多了，不管你怎么去变着法儿努力画的不一样，但最后的效果可能还是会雷同，况且知名的具象动物IP形象又很多，所以不容易创作。
如何创作一个有特征的卡通形象
那么，今天主要是聊一聊我之前创作过的卡通形象当中的心得体会和一些过程稿。第一个例子是在创作浪小花时候，主要从微博品牌标志找切入点，提取LOGO的主要特征（就是图形头上的三个波浪，如下图），这也是比较能体现卡通形象与品牌之间关系的地方。
前期草图探索是比较漫长和煎熬的，（下图）这些是其中的一部分比较靠谱的草图，尽管只是三个波，但做了很多种不同的变化。比如可以像个公鸡冠一样长在头上，也可以帽子形式戴在头顶上，还可以长在后背上。
在创作形象时是先从PC端的动态表情（下图22px大小）开始的，也就是先从主要使用场景着手，所以做出来的表情利用好有限的展示活动区域，头身比例控制好，既要考虑形象的完整性，又要考虑动作展示能够看得最清楚，还要能突出这个不一样的品牌特征（脑袋上那三个波），这也是一个非常具有挑战性的案例。
到了手机移动端里，表情基本上是把PC上的表情一部分移植过去，不改变比例和动作情况下，尽可能丰富设计的细节。
这里要提的是形象颜色的选择，考虑要最贴近用户，不用微博那么重的红色，由于表情是最开始是用在PC网页版微博文字里，颜色太重就会看来视觉比较突兀，所以选了一个跟人的肤色很近的肉粉色（有点像小婴儿），这样表情用起来就比较具有亲和感。
而在设计微小米的时候选用了LOGO本身的颜色大红色，由于使用场景是手机端聊天对话里（下图），感觉不会那么影响阅读（其实我个人很喜欢这个红色，给人很喜庆的感觉）。
（下图）在确定这个形象之前的一些探索草图这里也发出来，而且这一次创作了三个形象，包括一个白胖子和一只小鸡，（有参考了Line的形象）希望能出一个小家族，这样后期延展运用也能玩起来。
在创作这个形象前，尝试了很多不同的形象（上图），最后采用了这个大红口袋娃娃：脸和身子是连在一起的，也看不到脖子，所以这个形象的特点也就在这里。另外，头上加了一个小揪儿。
（上图）这个是优化前的样子（头上是圆圆的揪儿），为了制作动态GIF时，让头上的小揪儿动起来更带感，就改成了（下图）这个样子，跳起来可以一甩一甩的。
在进行卡通形象提案之前，如果能花点心思做一个小小的场景（下图）也能给自己的方案加分。
每个形象都尝试一些动作变化，这样它们各自的性格就很容易把握了。比如，我会觉得（下图）红框那个表情延伸感觉很猥琐，不太适合这个形象，所以后面的表情延展尽量让微小米表现得更萌一些，避开这种很猥琐的感觉。(当然这些说起来都比较偏个人感受，只有作者自己可以体会到）
把这几个形象性格先摸透很有必要（来一张定妆的全家福）。
我个人比较满意（下图）这一组系列的扁平化风格，没有描线的感觉确实更轻快，偏小清新。
这些不一样的变化都是让这个形象看起来与众不同，让人先记住它，但最打动人的还是这个形象能否跟看到它的人产生互动和共鸣……这也是这个形象的灵魂和存在的意义。
这一个形象的创意点是借用大家都熟知的“小红帽”这个经典童话造型，让这个小人长着胡子，名字和形象就会形成一个心理和视觉的反差。
将自恋、贪吃、自大、邋遢……这些小人物的缺点赋予这个形象，这样一个活脱脱的“小屌丝”的形象可能就会给人很深的记忆。
毕竟生活中大部分人都有着这样那样的缺点，但都希望摆脱囧态，让自己变好的那分励志感。
我很喜欢画一些丑乖的东西，现在大家都审美疲劳了，可爱的东西都乏味了，反而更喜欢一些丑的可爱的形象。那么给这些形象加个厚嘴唇、小胡子什么的，反而很容易出效果。
好了，写到这里……下面的图大家自己发现亮点，自己感受脑补吧……总之，创作形象时还是要抓住大众的心理软肋，先打动自己再去感染别人。
在画卡通形象时候，我们往往很容易陷入两个难以跳出的区域：一个是容易画得偏低幼、低龄化；另一个就是表情动作偏呆板国企风。这是受我们从小周围接收的图像信息影响的，在还没有将练习探索的草图量形成一个质的提升之前，先有这种意识也很重要，这种意识会帮助你在以后摸索练习的时候注意到形象的头身比例，以及思路惯性的打破。
欢迎对品牌、插画和卡通形象感兴趣的朋友可以一起讨论、练习。
A.表达式开关B.表达式图表C.表达式关联器D.表达式语言菜单
由于AE里不同的属性的参数不同，常用的我们可以分为：数值（旋转/不透明度）、数组（位置/缩放）、布尔值（true代表真、false代表假/0代表假、1代表真）这三种形式来进行书写表达式。对于表达式AE也有很多内置的函数命令，直接可以在表达式语言菜单里面进行调用。
原理:
举例:
注意事项:
time只能赋予一维属性的数据。(位置属性可进行单独尺寸的分离，从而可单独设置X或Y上的time)
wiggle(freq,amp,octaves=1,amp_mult=0.5,t=time)
若在一维属性中，为位置属性添加wiggle(10,20)，则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添加n=wiggle(1,10);[n[0],n[0]]，则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。
可直接在现有属性上运行，包括任何关键帧
为每间隔多少数值来产生多少变化
若为图层1的旋转属性添加表达式index*5，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推；若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为(index-1)*5
若对位置属性添加表达式为value+100，则位置会在关键帧数值的基础上对X轴向右偏移100（正数向右侧，负数像左侧）；若想控制Y轴的位置属性，则可对位置属性进行单独尺寸的分割，从而可单独控制Y轴（正数向下，负数向上）
更多的使用场景是结合其他表达式一起应用
5.random表达式（随机表达式）
random(x,y)在数值x到y之间随机进行抽取，最小值为x，最大值为y
若为数字源文本添加表达式random(20)，则数据会随机改变，最大值不会超过20；
若为数字源文本添加表达式random(10,100)，则数据会在10<数值<100之间随机改变；若为数字源文本添加表达式seedRandom(5,timeless=false)，random(50)，则数据会在50以内随机改变（前面的5是种子数，如一张画面中需要多个相同区间的数值做随机变化，就要为他们添加不同的种子数，防止两者随机变化雷同）,若希望数字随机变化为整数则应添加表达式为Math.round(random(2,50))，表示在2和50之间随机改变无小数
随机表达式不仅局限于数据上的使用，其他属性也可以应用，若数值为整数Math的M要大写
以此类推
如下图gif
timeRemap*n，n以帧为单位
将图层设置为timeRemap*10，代表每隔10帧就抽掉1帧画面，(根据要抽取的速率决定)
见下图均以(time,0,3,131,1000)为例，若为数字的源文本属性添加此表达式可以制作出倒计时的效果n=linear(time,0,3,3,0)表示从0-3秒数字从3到0，希望数字为整体需添加Math.floor(）
倒计时的用法比较常用，整数M要大写
degreesToRadians(degrees)角度转为弧度（degrees度的变量或表达式）radiansToDegrees(radians)弧度转为角度（radians弧度的变量或表达式）
常用语数学中的一些计算sin，cos，tan，sec，csc，cot等
layer(index)中index是数值，按照编号检索图层；layer(name)中name是一个字符串，按照名称检索图层（若没有图层名称，则根据源名称）；layer(otherLayer,relIndex)中otherLayer表示图层对象，relIndex表示数值，检索属于图层对象的数值图层
marker.key(index)中index是数值；marker.key(name)中name是一个字符串
width表示返回合成宽度；height表示返回合成高度
[thisComp.width/2,thisComp.height/2]表示宽度和高度为合成的一半也就是居中的位置
param(name)中name表示字符串；param(index)表示数值
effect(“高斯模糊”).param(“模糊度”)效果控制点始终位于图层空间中
复制粘贴表达式使用就可以，amp表示振幅,freq表示频率,decay表示衰减（根据不同需求做不同的调整）
n=0;if(numKeys>0){
n=nearestKey(time).index;
if(key(n).time>time){n–;}}
if(n==0){t=0;}else{
t=time–key(n).time;}
if(n>0){
v=velocityAtTime(key(n).time–thisComp.frameDuration/10);
amp=.03;
freq=2.5;
decay=4.0;
value+v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述内容复制粘贴使用即可
注意:motion2脚本也带此功能，方法不唯一
k=500;a=8;b=30;x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根据不同情况调节kab的数值即可）
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
spd表示挤压拉伸的速度，maxDev表示挤压拉伸的大小，decay表示衰减
spd=20;maxDev=10;
decay=1;
t=time–inPoint;
offset=maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX=scale[0]+offset;scaleY=scale[1]–offset;
[scaleX,scaleY]
delay表示要延迟的帧数
为位置属性添加表达式delay=0.5;
d=delay*thisComp.frameDuration*(index–1);
thisComp.layer(1).position.valueAtTime(time–d)；
如想要实现不透明度拖尾需为不透明度属性添加表达式opacityFactor=.80;
Math.pow(opacityFactor,index–1)*100(调整好一个图层后复制多个)
使用教学
STEP1
开启Basicons从首页就能预览完整图标图案，这套图标特色是以非常精简、干净的线条绘制而成的图形，每个图案下方会有名称，应该能够很快速联想到图标代表的意思（否则就失去图标的意义…），可以稍微预览一下看看自己需要的图案有没有列在上面，依照说明，Basicons每周都会更新加入新的图案。
STEP2
从右侧的「Customize」自订选项可以调整图标尺寸、线条粗细，调整后会直接呈现于左侧。
STEP3
点选要下载的图标后再按下右侧的「Download」就能下载.svg图标格式（或是从上方点选DownloadAll将所有186个图标完整下载），如果想直接取用SVG原始码的话可点选「CopySVG」复制程式码。
除此之外，Basicons还有提供直接嵌入的JavaScript链结和原始码。
import导入模块、export导出模块可以直接在任何变量或者函数前面加上一个export关键字，就可以将它导出。在一个文件中：
exportconstsqrt=Math.sqrt;exportfunctionsquare(x){returnx*x;}exportfunctiondiag(x,y){returnsqrt(square(x)+square(y));}然后在另一个文件中这样引用：import{square,diag}from'lib';console.log(square(11));//121console.log(diag(4,3));