第8章-UI的输出与交互设计课件.pptx

1、Sketch Sketch 网站网站UIUI设计设计（微课版）主讲老师：主讲老师：08 08 UIUI的输出与交换设计的输出与交换设计UI的输出与交互设计的输出与交互设计Sketch网站UI设计目录目录03Sketch插件的按照与使用插件的按照与使用02UI设计的交互设计的交互01UI图像的输出图像的输出UI的输出与交互设计的输出与交互设计Sketch网站UI设计UI图像的输出UI的输出与交互设计的输出与交互设计Sketch网站UI设计适配设备适配设备适配安卓设备适配安卓设备目前市面上在售的安卓设备有两千多种，要做到适配所有的设备看似是不可能的。但是，虽然安卓设备众多，但大部分的屏幕的长宽比是

2、16：9。UI的输出与交互设计的输出与交互设计Sketch网站UI设计适配设备适配设备适配适配iOS设备设备iOS设备相比安卓设备就少的多了，iPhone 4/4s的宽和iPhone 5/5s/5c一致，而iPhone 5/5s/5c、iPhone 6、iPhonte7、iPhonte8以及iPhone 8 Plus的长度比一致。用户可以iPhone 6为基准进行设计，然后根据iPhone 5以及iPhone 8 Plus分别进行适配。UI的输出与交互设计的输出与交互设计Sketch网站UI设计导出图层导出图层如果用户想要导出文件，可以从执行“共享导出”命令，或者直接单击工具栏中的导出按钮。S

3、ketch的画布是无限的，所以导出文件时，用户需要告诉 Sketch具体导出文件的哪个部分。UI的输出与交互设计的输出与交互设计Sketch网站UI设计导出和切片导出和切片如果用户只想导出一个图层，可以直接在检查器中实现。先选中图层或组，然后单击检查器底端的 Make Exportable。用户会发现检查器立即显示出用户将要导出一张原尺寸的图片，没有前缀，并且默认为PNG格式。UI的输出与交互设计的输出与交互设计Sketch网站UI设计切片工具切片工具切片切片切片是将画布中的特定区域导出为一个文件。一个 Sketch文件中可以有无数个切片，每个切片都能导出不同的文件。图层切片图层切片在 Ske

4、tch当中，切片被视为普通图层。这么做会有很多好处，比如说用户可以把想要导出的多个图层编组形成一整个切片，当用户移动这个组的时候，切片也会跟着移动。UI的输出与交互设计的输出与交互设计Sketch网站UI设计操作案例操作案例为切片重命名为切片重命名UI的输出与交互设计的输出与交互设计Sketch网站UI设计UI设计的交互UI的输出与交互设计的输出与交互设计Sketch网站UI设计了解移动设备的手势了解移动设备的手势点击滑动双击拖动长按旋转双指缩放UI的输出与交互设计的输出与交互设计Sketch网站UI设计了解交互动效设计的注意事项了解交互动效设计的注意事项控制持续时间控制持续时间移动交互动效和

5、普通的动画不同，用户使用程序的母的不是为了欣赏动画，过长动效会给用户带来不便。因此，所有的动效应该在瞬间完成。不过动效也不能太短，太短的动效会让用户无法察觉。符合预期符合预期一般来说，合理的动效时用户可以预料到的，例如滑动菜单，弹出面板等。如果滑出的方向或者弹出的方向不对，都会给用户带来困扰。考虑系统考虑系统目前最常见的系统是iOS和安卓系统。这两个系统中都包含了大量的动效。用户通常已经对系统中自带的动效很熟悉了。为了保持视觉一致性，在设计动效时，尽可能采用与系统动效类似的效果，这样既可以减少制作难度，又可以提升用户体验。动效一致性动效一致性UI的输出与交互设计的输出与交互设计Sketch网站

6、UI设计了解交互动效设计的注意事项了解交互动效设计的注意事项在同一款应用程序中，表示相同功能的动效应该相同。这样可以使用户在熟悉应用后看到动效就会了解操作。而且一致的动效可以让软件整体风格统一。考虑用户的耐心考虑用户的耐心一些程序需要有加载的过程，这个过程通常都比较长，会严重影响用户的耐心。可以通过设计一个简单有趣的动效来分散用户的注意力，。例如软件启动和页面加载时。考虑整体考虑整体动效存在的意义是更好的为程序服务。一款运行流畅的应用比花哨的应用要重要的多。而且过多的动效会导致更多的资源消耗。而且一个动效通常需要大量的代码，会浪费大量的开发时间，所以，只有合理的应用动效，考虑整个产品的整体才是

7、正确的。模拟现实模拟现实在设计动效时，要尽可能地模拟现实世界。这样才会给用户带来共鸣，对用户产生影响。UI的输出与交互设计的输出与交互设计Sketch网站UI设计了解交互动效设计的注意事项了解交互动效设计的注意事项引导用户引导用户好的动效一定会让用户直观的感受到接下来的步骤，并可以指引用户完成操作。同时可以让用户清晰的感觉刀不同页面之间的联系。层次感层次感在交互动效设计时，要对每一个元素的运动规律和顺序充分思考。使得整个动画过程平滑流畅。元素运动的规律应该是有层次和逻辑的。UI的输出与交互设计的输出与交互设计Sketch网站UI设计使用使用Xcode模拟交互效果模拟交互效果Xcode是苹果公司

8、为开发者提供的集成开发环境，可构建适用于苹果iPad、iPhone以及Mac设备的应用程序。在应用程序的创建、测 试、优 化 以 及 提 交 至 A p p Store的过程中，Xcode为开发者提供了用以管理整个开发工作流的工具UI的输出与交互设计的输出与交互设计Sketch网站UI设计Sketch插件的安装与使用UI的输出与交互设计的输出与交互设计Sketch网站UI设计实用的插件实用的插件Content generator该插件可以自动填充类型图片、姓名、联系方式等信息，避免手动输入带来的不便。Rename it使用这个插件可以批量修改图形的名称。例如选中所有矩形，单击Rename it插件，将其命名为“%N”，即可得到一串倒序排列的矩形命名。UI的输出与交互设计的输出与交互设计Sketch网站UI设计实用的插件实用的插件Sketch Measure这个插件可以在坐上上添加图形尺寸、距离、颜色和文本属性的标注，并会自动把附件编组，方便用户修改和管理。Icon stamper这个款插件可以一键生成iOS多种图标尺寸。用户只需要做一个最大的图标，这个插件可以帮助用户生成一套各种尺寸的图标，然后一次性导出。谢谢观赏！