从业五六年的经验直说，这些软件好用到爆

01afd1620905bf11013f01cdf7fc0d.png

017f4e620905c111013e8cd09b42b3.png

01911b5a3a71f1a801201a1f662808.png

闲暇作品

016af762b2cd7f0002c45e3721cbe3.png

六款交互软件，推荐给你们

012f2b5c617df4a801203d226963b1.png

vlog App原创概念设计

Principle教程（二）：静态、拖拽、滚动、翻页（附源文件）

对相同命名的组，重新命名。最后在预览里进行交互，发现显示正常了。

01f1c7584d8173a801219c770b5280.gif

014f325cda81e9a801214168645073.png

UI交互

011e4d5ac3446ea8012062e33f80aa.png

探味app

微信uikit-sketch-微信原生样式设计库-微信设计组件-微信企业-微信号公众号网页设计组件

0167be570b51ad32f8751b3f337f7f.png

01bf4b574a981932f875a4291a24c0.gif

Edate

做UI设计工作，除了好好学习并实践，这些软件也不能少

01eac76226c0b511013e8cd038d9ac.png

将做好的sketch文件导进Principle。（有源文件可以下载）

0148a8584d79bfa8012060c8f467c6.png

Principle教程（三）：联动视图的运用

时间节点在“0”的位置时，选择绿色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“340”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，右边的绿色卡片消失，向左边移动时，绿色卡片会渐变出现。

01e72258568ae3a8012060c86cc7bf.gif

选择青色形状图层，打开联动视图，点击X轴栏下的“+”号图标，选择“Opacity”（透明度），在时间节点“0”的时候，检查器里的透明度改为“0”，鼠标拖动时间节点到-340的位置将检查器里的透明度改为“100”，最终的预览效果是，当蓝色卡片在中间时，左边的青色卡片消失，向右边移动时，青色卡片会渐变出现。备注：鼠标移到时间节点区域上，按住键盘空格键+鼠标点击可以左右拖动时间线区域。

01844258568a05a8012060c8125a33.gif

大厂设计师们都在使用的设计工具，早下班美美哒

Sketch<br>Sketch是一款UI设计软件，他的软件界面主打清爽大方简洁的风格，在国内拥有一定数量的粉丝，在国外更是拥有大量的粉丝，尤其是像FACEBOOK这样大型公司也深深信赖这Sketch。Sketch也提供实时协作功能，你可以随时随地和你的团队同事一起工作。他还支持700多种扩展插件，让你随心所欲定制你的工作流程，完成做动画交互效果。<br><br>

01fd4262218bdf11013e8cd0b170ea.jpg

时间节点在-340的位置时，选择蓝色形状图层，然后在联动视图里点击X轴栏下的“+”号图标，选择“Opacity”（透明度），把检查器里的透明度改为“0”，然后拖动时间线到节点“0”的位置时，检查器里的透明度改为“100”，最终的预览效果是，当青色卡片在中间时，右边的蓝色卡片消失，向左边移动时，蓝色卡片会渐变出现。

01fab758568acca8012060c868f959.gif

01495b5dde6955a80120686bf3655a.png

广味早茶app-餐饮

Principle教程（四）：动效视图的运用（附源文件）

制作文字的依次出现效果。依次选择和调整动效视图里的Text4、3、2、Text,把整个蓝色条拖动到上图中对应的时间点上。这个时候已经完成整个效果的制作，可以通过游览窗口查看整个动画。

010f41585fe5aea801219c77e6deb8.png

选中文字组，选用检查器里的Scroll(滚动)功能，然后对Clip Sublayers打钩，再进行编辑。

01f09f584d7d84a801219c77f05bde.gif

01b5fb5dde9cafa80120686b728549.png

低保真练习

0149f9584d7c11a8012060c8c36f74.gif

选中3个色块编组后（编组快捷键和sketch里一样），选用检查器里的Page(翻页)功能进行编辑。

0110c0584d7d2fa801219c77d95ae6.gif

01d84f5925865ea801216a3ee7e3b4.png

第三天@交互40天#设置2级

01e49e58dc7b6da801219c776d0472.jpg

护慧云课堂原型图

01219b59df41d7a801204463298cca.jpg

8只小猪分享式旅游 / Travel App

sketch绘制3枚锤子图标 | 附sketch源文件

0139fb58a15273a801219c7770c91a.jpg

制作动画的转场效果。选择Artboard 1,点击事件触发器（闪电图标）选择Auto，拖到Artboard 2上。

0157d0585fe469a801219c77f15d89.png

激活动效视图。打开工具栏的Animate,下方出现动效视图窗口，此时的窗口是空的，这时点击两个画板上方的箭头图标，激活视图。