UI的输出与交互设计课件_第1页
UI的输出与交互设计课件_第2页
UI的输出与交互设计课件_第3页
UI的输出与交互设计课件_第4页
UI的输出与交互设计课件_第5页
已阅读5页,还剩35页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论