UI的输出与交互设计课件

Sketch网站UI设计（微课版）主讲老师：Sketch网站UI设计（微课版）主讲老师：08UI的输出与交换设计08UI的输出与交换设计目录03Sketch插件的按照与使用02UI设计的交互01UI图像的输出目录03Sketch插件的按照与使用02UI设计的交互01UUI图像的输出UI图像的输出适配设备——适配安卓设备目前市面上在售的安卓设备有两千多种，要做到适配所有的设备看似是不可能的。但是，虽然安卓设备众多，但大部分的屏幕的长宽比是16：9。适配设备——适配安卓设备目前市面上在售的安卓设备有两千多种，适配设备——适配iOS设备iOS设备相比安卓设备就少的多了，iPhone4/4s的宽和iPhone5/5s/5c一致，而iPhone5/5s/5c、iPhone6、iPhonte7、iPhonte8以及iPhone8Plus的长度比一致。用户可以iPhone6为基准进行设计，然后根据iPhone5以及iPhone8Plus分别进行适配。适配设备——适配iOS设备iOS设备相比安卓设备就少的多了，导出图层如果用户想要导出文件，可以从执行“共享>导出”命令，或者直接单击工具栏中的导出按钮。Sketch的画布是无限的，所以导出文件时，用户需要告诉Sketch具体导出文件的哪个部分。导出图层如果用户想要导出文件，可以从执行“共享>导出”命令，导出和切片如果用户只想导出一个图层，可以直接在检查器中实现。先选中图层或组，然后单击检查器底端的MakeExportable。用户会发现检查器立即显示出用户将要导出一张原尺寸的图片，没有前缀，并且默认为PNG格式。导出和切片如果用户只想导出一个图层，可以直接在检查器中实现。切片工具切片切片是将画布中的特定区域导出为一个文件。一个Sketch文件中可以有无数个切片，每个切片都能导出不同的文件。图层切片在Sketch当中，切片被视为普通图层。这么做会有很多好处，比如说用户可以把想要导出的多个图层编组形成一整个切片，当用户移动这个组的时候，切片也会跟着移动。切片工具切片操作案例——为切片重命名操作案例——为切片重命名UI设计的交互UI设计的交互了解移动设备的手势点击滑动双击拖动长按旋转双指缩放了解移动设备的手势点击滑动双击拖动长按旋转双指缩放了解交互动效设计的注意事项控制持续时间移动交互动效和普通的动画不同，用户使用程序的母的不是为了欣赏动画，过长动效会给用户带来不便。因此，所有的动效应该在瞬间完成。不过动效也不能太短，太短的动效会让用户无法察觉。符合预期一般来说，合理的动效时用户可以预料到的，例如滑动菜单，弹出面板等。如果滑出的方向或者弹出的方向不对，都会给用户带来困扰。考虑系统目前最常见的系统是iOS和安卓系统。这两个系统中都包含了大量的动效。用户通常已经对系统中自带的动效很熟悉了。为了保持视觉一致性，在设计动效时，尽可能采用与系统动效类似的效果，这样既可以减少制作难度，又可以提升用户体验。动效一致性了解交互动效设计的注意事项控制持续时间了解交互动效设计的注意事项在同一款应用程序中，表示相同功能的动效应该相同。这样可以使用户在熟悉应用后看到动效就会了解操作。而且一致的动效可以让软件整体风格统一。考虑用户的耐心一些程序需要有加载的过程，这个过程通常都比较长，会严重影响用户的耐心。可以通过设计一个简单有趣的动效来分散用户的注意力，。例如软件启动和页面加载时。考虑整体动效存在的意义是更好的为程序服务。一款运行流畅的应用比花哨的应用要重要的多。而且过多的动效会导致更多的资源消耗。而且一个动效通常需要大量的代码，会浪费大量的开发时间，所以，只有合理的应用动效，考虑整个产品的整体才是正确的。模拟现实在设计动效时，要尽可能地模拟现实世界。这样才会给用户带来共鸣，对用户产生影响。了解交互动效设计的注意事项在同一款应用程序中，表示相同功能的了解交互动效设计的注意事项引导用户好的动效一定会让用户直观的感受到接下来的步骤，并可以指引用户完成操作。同时可以让用户清晰的感觉刀不同页面之间的联系。层次感在交互动效设计时，要对每一个元素的运动规律和顺序充分思考。使得整个动画过程平滑流畅。元素运动的规律应该是有层次和逻辑的。了解交互动效设计的注意事项引导用户使用Xcode模拟交互效果Xcode是苹果公司为开发者提供的集成开发环境，可构建适用于苹果iPad、iPhone以及Mac设备的应用程序。在应用程序的创建、测试、优化以及提交至AppStore的过程中，Xcode为开发者提供了用以管理整个开发工作流的工具使用Xcode模拟交互效果Xcode是苹果公司为开发者提供的Sketch插件的安装与使用Sketch插件实用的插件Contentgenerator该插件可以自动填充类型图片、姓名、联系方式等信息，避免手动输入带来的不便。Renameit使用这个插件可以批量修改图形的名称。例如选中所有矩形，单击Renameit插件，将其命名为“%N”，即可得到一串倒序排列的矩形命名。实用的插件Contentgenerator实用的插件SketchMeasure这个插件可以在坐上上添加图形尺寸、距离、颜色和文本属性的标注，并会自动把附件编组，方便用户修改和管理。Iconstamper这个款插件可以一键生成iOS多种图标尺寸。用户只需要做一个最大的图标，这个插件可以帮助用户生成一套各种尺寸的图标，然后一次性导出。实用的插件SketchMeasure谢谢观赏！谢谢观赏！Sketch网站UI设计（微课版）主讲老师：Sketch网站UI设计（微课版）主讲老师：08UI的输出与交换设计08UI的输出与交换设计目录03Sketch插件的按照与使用02UI设计的交互01UI图像的输出目录03Sketch插件的按照与使用02UI设计的交互01UUI图像的输出UI图像的输出适配设备——适配安卓设备目前市面上在售的安卓设备有两千多种，要做到适配所有的设备看似是不可能的。但是，虽然安卓设备众多，但大部分的屏幕的长宽比是16：9。适配设备——适配安卓设备目前市面上在售的安卓设备有两千多种，适配设备——适配iOS设备iOS设备相比安卓设备就少的多了，iPhone4/4s的宽和iPhone5/5s/5c一致，而iPhone5/5s/5c、iPhone6、iPhonte7、iPhonte8以及iPhone8Plus的长度比一致。用户可以iPhone6为基准进行设计，然后根据iPhone5以及iPhone8Plus分别进行适配。适配设备——适配iOS设备iOS设备相比安卓设备就少的多了，导出图层如果用户想要导出文件，可以从执行“共享>导出”命令，或者直接单击工具栏中的导出按钮。Sketch的画布是无限的，所以导出文件时，用户需要告诉Sketch具体导出文件的哪个部分。导出图层如果用户想要导出文件，可以从执行“共享>导出”命令，导出和切片如果用户只想导出一个图层，可以直接在检查器中实现。先选中图层或组，然后单击检查器底端的MakeExportable。用户会发现检查器立即显示出用户将要导出一张原尺寸的图片，没有前缀，并且默认为PNG格式。导出和切片如果用户只想导出一个图层，可以直接在检查器中实现。切片工具切片切片是将画布中的特定区域导出为一个文件。一个Sketch文件中可以有无数个切片，每个切片都能导出不同的文件。图层切片在Sketch当中，切片被视为普通图层。这么做会有很多好处，比如说用户可以把想要导出的多个图层编组形成一整个切片，当用户移动这个组的时候，切片也会跟着移动。切片工具切片操作案例——为切片重命名操作案例——为切片重命名UI设计的交互UI设计的交互了解移动设备的手势点击滑动双击拖动长按旋转双指缩放了解移动设备的手势点击滑动双击拖动长按旋转双指缩放了解交互动效设计的注意事项控制持续时间移动交互动效和普通的动画不同，用户使用程序的母的不是为了欣赏动画，过长动效会给用户带来不便。因此，所有的动效应该在瞬间完成。不过动效也不能太短，太短的动效会让用户无法察觉。符合预期一般来说，合理的动效时用户可以预料到的，例如滑动菜单，弹出面板等。如果滑出的方向或者弹出的方向不对，都会给用户带来困扰。考虑系统目前最常见的系统是iOS和安卓系统。这两个系统中都包含了大量的动效。用户通常已经对系统中自带的动效很熟悉了。为了保持视觉一致性，在设计动效时，尽可能采用与系统动效类似的效果，这样既可以减少制作难度，又可以提升用户体验。动效一致性了解交互动效设计的注意事项控制持续时间了解交互动效设计的注意事项在同一款应用程序中，表示相同功能的动效应该相同。这样可以使用户在熟悉应用后看到动效就会了解操作。而且一致的动效可以让软件整体风格统一。考虑用户的耐心一些程序需要有加载的过程，这个过程通常都比较长，会严重影响用户的耐心。可以通过设计一个简单有趣的动效来分散用户的注意力，。例如软件启动和页面加载时。考虑整体动效存在的意义是更好的为程序服务。一款运行流畅的应用比花哨的应用要重要的多。而且过多的动效会导致更多的资源消耗。而且一个动效通常需要大量的代码，会浪费大量的开发时间，所以，只有合理的应用动效，考虑整个产品的整体才是正确的。模拟现实在设计动效时，要尽可能地模拟现实世界。这样才会给用户带来共鸣，对用户产生影响。了解交互动效设计的注意事项在同一款应用程序中，表示相同功能的了解交互动效设计的注意事项引导用户好的动效一定会让用户直观的感受到接下来的步骤，并可以指引用户完成操作。同时可以让用户清晰的感觉刀不同页面之间的联系。层次感在交互动效设计时，要对每一个元素的运动规律和顺序充分思考。使得整个动画过程平滑流畅。元素运动的规律应该是有层次和逻辑的。了解交互动效设计的注意事项引导用户使用Xcode模拟交互效果Xcode是苹果公司为开发者提供的集成开发环境，可构建适用于苹果iPad、iPhone以及Mac设备的应用程序。在应用程序的创建、测试、优化以及提交至AppStore的过程中，Xcode为开发者提供了用以管理整个开发工作流的工具使用Xcode模拟交互效果Xcode是苹果公司为开发者提供的Sketch插件的安装与使用Sketch插件实用的插件Contentgenerator该插件可以自动填充类型图片、姓名、联系方式等信息，避免手动输入带来的不便。Renameit使用这个插件可以批量修改图形的名称。例如选中所有矩形，单击Rename