整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
PConline 资讯】今天微软已经正式推送Windows 10正式版，部分用户已经收到了推送并升级成功，好些网友已经在用Win10系统看我们的文章了！
日常工作离不开窗口，尤其对于并行事务较多的桌面用户来说，没有一项好的窗口管理机制，简直寸步难行。相比之前的操作系统，Win10在这一点上改变巨大，提供了为数众多的窗口管理功能，能够方便地对各个窗口进行排列、分割、组合、调整等操作。接下来，小编就为大家列举几项比较常见的窗口管理功能，希望能对大家有所启发。
图01 Win10多窗口排列技巧
一. 按比例分屏
Aero Snap是Win7时代增加的一项窗口排列功能，俗称“分屏”。一个最简单例子，就是当你把窗口拖至屏幕两边时，系统会自动以1/2的比例完成排布。在Win10中，这样的热区被增加至七个，除了之前的左、上、右三个边框热区外，还增加了左上、左下、右上、右下四个边角热区以实现更为强大的1/4分屏。同时新分屏可以与之前的1/2分屏共同存在，具体效果如下图所示。
图02 Win10分屏热区示意图（蓝色：1/2分屏 红色：1/4分屏）
图03 一个窗口分屏结束后，Win10会自动询问用户另一侧打开哪个窗口，这项功能被称为“分屏助理”
二. 非比例分屏
虽然Snap Mode的使用非常方便，但过于固定的比例或许并不能每次都让人满意。比方说当你觉得左侧的浏览器窗口应该再大点儿的话，就应该手工调整一下窗口间的大小比例了。
在Win10中，一个比较人性化的改进就是调整后的尺寸可以被系统识别。比方说当你将一个窗口手工调大后（必须得是分屏模式），第二个窗口会自动利用剩余的空间进行填充。这样原本应该出现的留白或重叠部分就会自动整理完毕，高效的同时也省了用户很多事。
图04 当一个窗口被手工调整尺寸后，Win10会自动调整后续分屏窗口的默认比例，以便填满整个空白
三． 层叠与并排
如果要排列的窗口超过4个，分屏就显得有些不够用了，这时不妨试一试最传统的窗口排列法。具体方法是，右击任务栏空白处，然后选择“层叠窗口”、“并排显示窗口”、“堆叠显示窗口”。选择结束后，桌面上的窗口会瞬间变得有秩序起来，可以明显感觉到不像以前那么挡手了。最为关键的是，Modern应用也能使用这一功能，相比Win8或Win8.1是一个进步。
图05 更多窗口可使用传统的窗口排列功能
图06 “层叠窗口”效果
图07 “堆叠窗口”效果
图08 “并排窗口”效果（与“堆叠”最大的不同就是堆叠仅仅分成两列，其余窗口纵向排列）
四． 虚拟桌面
此外“虚拟桌面”也可看作是Win10中一项另类的窗口管理功能，因为它的意思很明确，放不下的窗口直接扔到其他“桌面”就行了！
图09 虚拟桌面视图
虚拟桌面的打开可以使用任务栏按钮，当然也可按下快捷键Win+Tab。按下按钮后，系统会自动展开一个桌面页，通过最右侧的“新建桌面”建立新桌面。当感觉到当前桌面不够用时，只要将多余窗口用鼠标拖至其他“桌面”即可，简单却很方便。
图10 “多余”的窗口可直接拖拽到其他桌面
写在最后
当然类似的技巧在Win10中还有很多，对于一款操作系统而言，Win10不仅仅对应于各类炫酷功能，简单高效也是它的一大看点。
页设计基础知识
1 网站
网站(Web Site)是一个存放网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。
1.2 网页
网页（Web Page）实际上是一个文件，网页里可以有文字、图像、声音及视频信息等。网页可以看成是一个单一体，是网站的一个元素。
平常我们所听说的“新浪”、“搜狐”、“网易”等，即是俗称的“网站”。而当我们访问这些网站的时候，最直接访问的就是“网页”了。这许许多多的网页则组成了整个站点，也就是网站。
1.3 首页
首页(Home page)，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点和汇总点。例如，当浏览者输入搜狐网站地址“www.sohu.com”后出现在第一个页面，即sohu网站的首页。
问题：首页和主页有区别吗？
通常网站为方便浏览者查找和分类浏览网站的信息，会将信息分类，并建立一个网页以放置网站信息的目录，即网站的主页。
并非所有的网站都将主页设置为首页，有的网站喜欢在首页放置一段进入动画，并将主页的链接放置在首页上，浏览者需要单击首页的链接进入主页。
1.4网页的表现形式
1.静态网页：客户端与服务器端不发生交互
访问者只能被动地浏览网站建设者提供的网页内容。其特点：
网页内容不会发生变化，除非网页设计者修改了网页的内容。不能实现和浏览网页的用户之间的交互。信息流向是单向的。
2.动态网页：客户端与服务器端要发生交互
动态网页是指浏览器可以和服务器数据库进行实时数据交流的交互网页，而不是加上了动画等效果的动感网页。动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。信息流向是双向的。
2.1 网站LOGO
1.通常网站为体现其特色与内涵，涉及并制作一个LOGO图像放置在网站的左上角或其他醒目的位置。
2.企业网站常常使用企业的标志或者注册商标。
3.一个设计优秀的LOGO可以给浏览者留下深刻的印象，为网站和企业形象宣传起到十分重要的作用。
2.2 导航条
导航条是网页的重要组成元素。设计的目的是将站点内的信息分类处理，然后放在网页中以帮助浏览者快速查找站内信息。
导航条的形式多种多样，包括文本导航条、图像导航条以及动画导航条等。
有些使用特殊技术（例如Flash、JavaScript、CSS）制作的导航条还可以具有下拉菜单的功能。
2.3 Banner
Banner的中文意思是横幅。Banner的内容通常为网页中的广告。
在网页布局中，大部分网页将Banner放置在与导航条相邻处，或者其他醒目的位置以吸引浏览者浏览。
2.4 内容版块
网页的内容版块是整个页面的组成部分。
设计人员可以通过该页面的栏目要求来设计不同版块，每个版块可以有一个标题内容，并且每个内容版块主要来显示不同文本信息。
2.5 版尾或版权版块
版尾，即页面最低端的版块。
这部分位置通常放置网页的版权信息，以及网页所有者、设计者的联系方式等。
有的网站也将网站的友情链接以及一些附属的导航条放置在这里。
3.1 文本
网页中的信息以文本为主。与图片相比，文字虽然不如图片那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。
3.2 图片
用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。
3.3 超链接
超链接在本质上属于一个网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。
超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
3.4 动画
在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。
网页中的动画主要有两种：GIF动画和Flash动画。其中GIF动画只能有256种颜色，主要用于简单动画和图标。
3.5 声音和视频
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。
很多浏览器不要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。
3.6 表格
在网页中表格用来控制网页中信息的布局方式。
包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。
3.7 表单
网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。
表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登录站点等。
3.8 其他常见元素
包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。
4.1 文本编辑器
不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写HTML。比如写字板、word等，但保存的时候必须保存为.html或.htm格式。
有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript、VBScript等多种语法的着色显示。
例如：Sublime text3、EmEditor、EditPlus、UltraEdit
4.2 Dreamweaver网页设计软件
这是现在使用最广泛的网页编辑工具之一。
Dreamweaver是Macromedia公司推出的网页编辑工具。
它是一个所见即所得网页编辑器，支持最新的DHTML（Dynamic HTML，动态HTML）和CSS标准。采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得非常简单。
另外还有Microsoft公司开发的FrontPage也是设计网页和管理网站的软件。除了所见即所得的编辑功能之外，也可以直接编辑HTML标记，让设计者可以轻松的编辑网页。
4.3 Photoshop图像处理软件
Photoshop是Adobe公司推出的功能强大的平面图像处理软件，Photoshop在图像编辑、桌面出版、网页图像编辑、广告设计、婚纱摄影等各行各业的广泛应用，它已成为许多涉及图像处理的行业的事实标准。
4.4 Flash动画设计软件
Flash是Macromedia公司开发的一款优秀的网页动画开发软件，从简单的动画到复杂的交互式Web应用程序，它使用户可以创建任何作品。通过添加图片、声音和视频，可以使Flash应用程序媒体丰富多彩。
Flash被称为“最灵活的前台”，其独特的编译方式和跨平台的能力，广泛的应用（软件、游戏、Web应用程序、多媒体娱乐等多方面），使之越来越成为一种重要的工具。
4.5 Fireworks网页图像处理软件
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，使用Fireworks都不仅可以轻松地制作出尺寸较小的图形、GIF动画。
如果将Photoshop比作全能的图像处理大师的话，Fireworks就是精于网页图像处理的专家。它在矢量图形的处理方面有其独特之处。
在Web应用方面，Fireworks是最早提供切片功能的图像处理软件。Fireworks支持在图像中绘制热区并直接生成网页文档，并且具备简单的GIF动画制作能力，同时支持将动画转换为Flash文件并嵌入到网络中播放。
5.1 CSS
CSS即层叠样式表（CascadingStyle Sheet）。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
HTML=内容
CSS=表现
CSS带来的好处：
CSS使页面载入更快；
CSS可以降低网站的流量费用；
CSS使设计师在修改设计时更有效率，而代价更低；
CSS使整个站点保持视觉的一致性；
5.2 JavaScript
JavaScript是由 Netscape公司开发的一种脚本语言，可以被嵌入HTML文件中，它是一种基于对象和事件驱动，并具有安全性能的脚本语言。
在HTML基础上，使用JavaScript可以开发交互式Web网页，可以回应使用者的需求事件而不需要通过网络来回传输资料。
简单地说，当用户输入一项信息时，不需要先将信息传给服务器处理，再传回来，而是可以直接被客户端的程序处理。
6.1 网页布局
网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：
1．分栏式结构
2．区域分布式结构
3．无框架局限式结构
分栏式布局
区域分布式布局
无框架局限式布局
6.2 导航设计
1.导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站的路标，有了它就不会在浏览网站时“迷路”。导航链接着各个页面，只要单击导航中的超级链接就能进入相应的页面。
2.导航设计的好坏，决定着用户是否能很方便地使用网站。导航设计应直观明确，最大限度地为用户使用考虑，尽可能使网页切换更便捷。导航的设计要符合整个网站的风格和要求，不同的网站会采用不同的导航方式。
3.一般来说，在网页的上端或左侧设置导航栏是比较普遍的方式。网站采用上端文字作为一级导航，左侧树状结构菜单作为二级导航。
让用户了解当前所处的位置；
4.让用户能根据走过的路径，确定下一步的前进方向和路径；
5.不需要浏览太多的页面才能找到需要的信息，让用户能快速而简捷地找到所需的信息，并以最佳的路径到达这些信息；
6.让用户使用网站遇到困难时，能寻求到解决困难的方法，找到最佳路径；
7.让用户清楚地了解整个网站的结构概况，产生整体性感知；
8.对使用频率不同的信息作有序处理。
7.1 页面配色
设计精美的网站都有其色调构成的总体倾向。以一种或几种临近颜色为主导，使网页全局呈现某种和谐、统一的色彩倾向。
运用色系。先根据网页主题，选定一种主色，然后调整透明度或饱和度，也就是将色彩变浅或加深，调配出新的色彩。这样的页面看起来色彩一致，有层次感；一般来说，适合于网页标准色的颜色有3大系：蓝色、黄/橙色和黑/灰/白色。
使用对比色。可以充分利用对比色进行设计，同时注意使用灰色调进行调和。这样的作品页面色彩丰富.
7.2 文字艺术
文字在版面中一般占有绝大部分空间，是网页信息的主要载体。处理好文字关系到网页设计的成败。字体的选择、字号的大小、文字的颜色、行与行的距离、段落与段落的安排，都需要认真考虑。好的文字设计会给网页增色不少。
7.3 实例分析
1．网站描述
这是一家航空公司的网站首页。界面设计给人现代、驿动的感觉，这与公司的风格相一致。导航设计简洁利落，很值得学习借鉴。
2．布局
网页布局采用的是比较常见的分栏式结构。A为网站的Logo所在的区域；B为网站主菜单所在的区域；C为搜索与其他公共功能所在的区域；D为网站的内容区域，主要由文字和图片组成；E为版权信息所在的区域。
3．配色
网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”。除此之外，网页文字的配色主要以白色和蓝色为主。快快
前，设计行业存在多种设计软件，在互联网产品设计领域，Sketch已经取代了PS成为主流的视觉设计软件，并有逐渐取代Axure来进行交互设计的趋势。然而，相对于交互原型工具Axure而言，sketch不支持交互动效设计，同时，导出的HTML文件的排序需要人为干预，不能自动体现页面的逻辑关系。因此，很多衔接sketch的软件完成动效设计的软件应运而生，包括Flinto、Principle。其中，Principle+Sketch被称为UI设计的黄金搭档。
相较于Flinto，Principle强大的动效预置，可以极大的减少动效设计的时间，并能完成出较为优质的动效设计。在效率为王的互联网产品时代，Principle确实是一款适合交互设计师使用的动效软件。
下面，我们就详细了解一下principle。
目前版本的Principle，就动效设计功能方面，相较于Axure、AE而言，要简单很多。它是一款主要用来衔接交互原型与动态效果呈现的动效制作软件，其功能可分为五大类，分别是基础功能、Create Component（组件）、Animate（时间轴）、Drivers（联动）以及页面动效。
主要功能
基础功能包括矩形、文字工具，导入功能，群组、Mirror、上/下一层。目前自定义工具仅支持矩形（快捷键R）和文字工具（快捷键T），因此在制作页面动效时，需要从sketch中导入或copy页面元素，来完成页面动效。在矩形工具的基础上，可以延伸出正方形、圆型、圆角矩形。
导入功能是衔接sketch的主要接口，每次只能导入已打开sketch文件的一个page页面中的元素。在导入sketch文件时，比较省事的做法是，在文件中新建一个page，作为导入素材的入口，同时，page可以重复导入，最新导入的页面（不同页面元素）会放到最后。Principle中的画板大小与最后一次的画板大小保持一致，因此导入的画板也要保持一致。
群组、上/下一层的功能操作与sketch一致。Mirror是用来在制作手机应用时，在手机端进行预览操作的功能，目前只支持Apple的产品连接。
组件（Create Component）与Axure中的元件库、sketch中的symbol类似，可以包含动效，支持在不同principle文件中进行复制、粘贴。这是一个实用的功能，如《动效设计-交互设计的最后一公里（一）》中的菜单动效、加载动效等，就可以制作成组件，在其他项目中可以作为动效控件加以应用，直接复制、粘贴即可。由此，可以推演提炼出动效设计控件，在版本迭代中可以在动效方面保持产品气质的延续性。
时间轴（Animate）是对AE时间轴的一种简化，不能进行K帧(此处有疑问者，请参考本系列文章《动效设计-交互设计的最后一公里（一）》），只能控制某一动效在时间维度上的起止位置以及持续时间。另外，元素的运动形式也可以在时间轴上进行设置调整，包括：默认、缓入、缓出、缓动、弹性、线性、无等七种运动形式，同时可以对前五种进行曲线调节。
运动形式及调节
联动（Drivices）是对时间轴功能的补充与扩展。Principle主要应用于制作移动端产品的交互、动效设计，相较于web页面，移动端设备主要是触屏操作，包括点击、拖动、滑动等，这些元素之间的关系是位置上的联动关系，而不是时间上的。
页面动效包括静态、拖拽、滚动、翻页四类。严格意义，页面动效并不是独立的功能，需要配合Drivices来使用。因此，在确定了滚动、拖拽、翻页以后，选择一个触发操作元素，在Drivices中，对其在不同位置的节点处K关键帧，同时，将联动元素在不同节点处的变化进行调整，进而形成位置关系上的联动。
相较于其他工具，Principle的优势还是比较明显。基于其优势，Principle在合适的动效设计上效率非常高，同时动效的质量也比较高。整体来说，Principle的优势如下：
犹如PS/AI与AE之间的关系，Principle与sketch之间存在着很多相似之处，包括页面布局及风格、快捷键等，很好的让交互设计与动效设计进行衔接，减少了动效工具的学习成本。sketch文件的导入可以实时进行，此时的sketch文件犹如动效设计阶段的组件，在动效设计过程中，需要哪一个页面，就可以将页面单独导入，减少了页面的复杂度。
Principle软件界面
源于Flash的补间动画几乎是所有动效工具的特点，也是保持动效流畅的主要环节。相较于其他工具的补间动画，Principle的补间动画是预设的，并且经过实际的实验验证，可以直接使用。如上文中所描述，principle的效果预设是隐藏在动效的时间轴上，在设置动效持续时长的同时，调整其运动样式与效果。另外，补间动画的形式与节奏会自动统一到整个动效设计中，即新建的动效预设与上一次的预设保持一致。
补间动画
如上图，制作出动画的起点与终点画面，在两个画面之间制动生成补间动画，通过调整补间动画的运动形态与样式，完成动效的制作。
熟悉keynote的小伙伴应该知道，其最大的亮点就是神奇移动。在Principle中，元素的运动变化原则与Keynote一致，即若两个画板中两个元素的命名一样，在画板切换过程中，则默认该元素从画板一的样式渐变到画板二的状态，包括颜色、位置、透明度、形状等，但前提是该元素是可编辑的，而不是图片。这种神奇移动的效果保证了动效的连续性与流畅性。
类似Keynote的”神奇移动”
对于变化的形式、速率以及时机可以在Animate中进行调节。
Animate是用来控制补间动画的节奏、形式、时间以及时机等，其控制较为粗糙，不如AE的时间细致。在神奇移动的案例中，元素的变化有长、高、旋转、透明度四种，在Animate中可以控制每种变化的开始时间（错帧）以及持续的时长，来控制动效效果。同时，其动效形式的预设与比较符合用户的心理预期，在动效节奏的调整上可以节省较多的时间。
Animate面板
类似Origami的事件管道拖拽该功能指的就是Drivice，这也是Principle在移动端产品设计中的优势所在。Animate是时间与元素变化效果之间的映射关系，那么，Drivices就是一个元素的坐标位置与其他元素变化效果的映射关系。这个面板在拖动等的操作中应用的极为广泛，可以逼真的模拟触控操作中的位置映射关系。
Drag的Drivice应用
在示例中，设置的滑块位置与矩形形状圆角大小、旋转的映射，实现滑动调节圆角大小与旋转的效果。
一个工具的优势较为明显，往往其缺点（限制）也较为突出，Principle也是一样。根据作者多个项目的时间经验，发现了以下较为突出的缺点：
1. Principle不太适合整体产品的动效设计。Principle的画板是横向顺序排列，用户不能自定义其位置，因此其画板数量不易过多，否则页面管理将会使人崩溃。Principle比较适合核心功能、局部页面或页面细节动动效设计。
2. 动效预设质量比较高，但自定义形式较弱。Principle的动效变化形式，包括颜色、大小、位置、透明度、形变（极少）等，这就限制了设计师对动效的修改与再创作。因此，Principle比较适合做转场类、入场类以及引导类动效，但是对于牵涉到复杂形变、效果的品牌与反馈类动效，就是Principle所鞭长莫及的了。
3. 对于Sketch导入的元素，有些是不能编辑的，包括文字、symbol以及有些群组。这就导致在这些元素的动效变化时，就需要在Principle中重新制作。
4. Principle中每一个画板相当于一个一个关键帧，对于已经完成的动效设计，在过程中新增关键帧（画板）会比较繁琐，需要删除两个关键帧之间的动效链接，然后新增一个画板，最后将新增画板与前后的画板进行链接，形成新的动效。这也是在Principle比较适合顺序K帧的原因。
5. Principle效果文件的导出仅支持GIF与mov格式的导出。其导出是对操作的录制，因此，对自动类型动画的录制开始的时机较难把握，如果有必要需要其他软件进行剪切编辑。
Principle的动效制作原理与AE不同，因此，其特点与应用技巧也略有差异。在长时间使用Principle以后，对于一些功能的特殊使用方式也有一些心得：
1. Principle动效中，元素属性的变化是通过不同属性节点之间形成补间动画形成的，Principle识别不同画板之间的元素是通过名称的一致性。名称一致，则该元素在两个画板之间会顺畅的形成补间动画（是可编辑元素），因此若下个页面中要出现某个元素，至少在上一个页面要存在该元素，否则就会违背动效设计的原则（有始有终、三不）。
2. Principle中每一个画板就是一个最小单位的节点关键帧，在制作动效时，将连接动效指向主画板（或自己），复制出新的画板，然后在新画板上进行动效元素的变化调整。这样可以保证每个画板中的元素名称保持一致。
3. 不要将sketch中的整个Page页面的画板一起导入Principle，这样画板的管理会造成极大的困扰。本人的做法是在sketch中新建一个页面，作为专门进行导入的入口，同时页面中的画板不易过多，最好有一个主页面，其他页面作为备用素材使用。
4. 对于透明的元素，Principle是不能作为动效链接的元素，因此在制作触控热区时不能将透明度降为零，可保持1% 的不透明度。但是，即使元素的透明度为零且不能作为链接元素，被该元素完全覆盖的其他元素也是不能作为链接元素，这时可以选中该元素，勾选touchable，就可以被点击到。
5. Principle中的旋转是以元素的物理中心为圆心进行旋转的。若要制作元素围绕一个点进行旋转时，可以以该点作为中心对称的点建一个同样的元素，并将二者进行群组，将其中一个的透明度改为零，这样群组的中心点就在旋转中心了。
6. principle中的群组是单独一个元素，其大小是可以自定义的，不是由群组的元素大小所确定的，并且群组可以作为一个元素进行链接对象制作动效。因此，在这种特性下，可以将群组作为热区使用或用来调整元素的旋转中心等。
其特点不止于此，有很多技巧等待你去发掘……
到目前为止，作者已经完成了若干线性加载动效控件的制作，如下图：
Loading
我们以其中一个案例的制作，结束本次对Principle的探讨。
加载动效
第一步：新建直径分别为9、7、5、3、1的圆形，圆形的直径要是连续的奇数或偶数，保证圆形能够绝对的居中对齐。
新建原型
第二步：将每个圆单独群组，并调整其群组的高度，分别为54、52、50、48、46，并将其进行居中对齐。上文中已经提起，群组的中心可以作为整体旋转中心，因此，最大的群组高度就是最终动效的直径。选择所有群组，将其左右居中对齐。
调整群组高度
第三步：选中画板，点击右侧出现的小闪电图标，选择最后一个指向画板1，产生一个新的画板，并选中画板2中的所有群组，修改旋转角度为360°。
起始画板样式
新画板
第四步：在Animate中修改每个动效条的长度为1s，根据半径，从大到小，以此错帧（0.2s）。动效条的长度决定了一个元素旋转一周的时长。错帧可以实现元素的跟随效果，错帧的时长控制了两两元素在运动过程中的距离，同时还受到整体时长的影响。
Antimate调节
第五步：按照第三步的方式，以第二个画板为基础，产生第三个画板，并将第三个画板中的其他元素全部删除，只保留半径最大的圆，修改其名称不与其他元素重名。如果没有第三个画板，直接指回第一个画板，画面中的元素会出现逆向的运动，即每个群组会将旋转角度变回0°，回到第一个画板的状态。
制作替身
第六步：选中最后一个画板，按照步骤三，将箭头指向第一个画板，即可完成该加载动效的制作。
形成闭环
整体上，整个动效的制作时间只有5分钟，效率远远高于AE，这正是Principle的优势所在。
另外，需要加载案例工程文件的童鞋，可以到百度云盘中下载：
链接：https://pan.baidu.com/s/17KWy1yEMRCKB4ip9-3T9ug
密码：d3j0
*请认真填写需求信息，我们会在24小时内与您取得联系。
