UX设计说 五分钟了解交互设计
0202_基础理论,五分钟全面了解,2,图形设计,3,交互设计(Interaction design),这节课给大家带来交互设计,4,UI设计(User interface design),UI 设计为什么要有理性的交互设计？,2010年左右，炫酷写实的设计成为了潮流、但这正是用户所需要的吗？,此设计来自网络，鸣谢,7,此设计来自网络，鸣谢,8,QQ音乐UI,实际上这些炫酷写实的界面带给用户的并不是更加优质的体验，而是增加了学习成本，和开发者的效率 把这些写实的改变为歌词或者英文翻译才是用户更加需要的,用户更需要解决实际问题的设计,10,当今UI设计师的能力要求,交互设计做什么？,产品UI 架构设计,Interaction Design,13,百度视频MY APP,电视剧TV play,下载Download,电影Film,分类查找Classification,综艺Variety show,搜索Search,猜你喜欢Guess you,个人中心Personal Center,排行榜Ranking List,发现Discover,达人推荐People recommend,播放器player,短视频Short video,游戏Game Center,产品架构图绘制树状图,14,百度视频MY APP,热门HOT,功能Funtion,电视剧TV play,下载Download,电影Film,分类查找Classification,综艺Variety show,搜索Search,猜你喜欢Guess you,个人中心Personal Center,排行榜Ranking List,发现Discover,达人推荐People recommend,播放器player,短视频Short video,游戏Game Center,产品架构图绘制树状图,15,模块 细节,功能细节图绘制鱼骨图,UI 风格设计（UI style）,Interaction Design,此设计来自网络，鸣谢,此设计来自网络，鸣谢,此设计来自网络，鸣谢,此设计来自网络，鸣谢,UI 框架选择,Interaction Design,下面给大家讲解一下APP框架的知识,极简式（单一内容）,优点:1、操作简单明确，无需思考2、更容易接受和上手,翻页式（多页内容）,优点:1、单页面内容整体性强2、线性浏览方式有方向感缺点:1、不适合展示过多页面2、只能顺序查看相应页面3、后面内容无预知，且容易忽略。,宫格式（较多入口）,优点:1、清晰展现各入口2、容易记住各入口位置，方便快速找到用户操作更便捷缺点:1、无法在多入口间灵活跳转，不适合任务操作2、容易形成更深的路径3.数量有限，翻页展现率太低,上导航,优点:1、架构简单轻便，配合手势切换方便2、标签入口一目了然，无需跳转页面（感官）3、对垂直向下浏览任务不割裂缺点:1、顶部区域有限，相比底部需要更小的空间2、点击区域高度较小，且不方便单手点击3、手势只能挨个滑动操作,下导航（4-5大类分支内容）,优点:入口内容一目了然各入口间频繁跳转不会迷失缺点:繁重，割裂标签首页浏览,舵式,优点:突出重要且操作频繁的入口，用户操作更便捷缺点:同标签式，标签个数有一定的限制,抽屉侧边栏（1个重点其它次要内容）,优点:1、节省页面空间，突出主要页面，使用户聚焦2、弱化隐藏必不可少但不常用信息缺点:1、适用范围小：不需要频繁切换内容的应用2、抽屉中入口隐蔽，切换成本太大3、文案表意务必要清晰,隐藏式,优点:1、灵活2、展示方式有意思（path）3、扩展更多的功能和入口缺点:1、入口隐藏必须唤起2、对入口功能的可见性要求高缺点：1、不适合展示过多页面2、不能跳跃性地查看间隔的页面，只能按顺序查 看相邻的页面3、由于各页面内容结构相似，容易忽略后面的内容,32,线框原型图,产品线框图原型,简单快捷的构建产品框架原型，用于快速实验想法和快速修改迭代，最终成型的线框图原型将用于全员讨论及视觉稿设计的基础。,实际工作中，交互设计师大多是在画原型图,下面带大家学习一下优秀的线框原型图,33,此图来自网络，鸣谢,34,35,原型图绘制方法1黑白灰色块,重要元素用80%黑,次要元素用40%黑,一般元素用60%黑,其它区域用白色,此图来自网络，鸣谢,36,原型图绘制方法2黑白灰+高保真图形,重要元素用80%黑,图形文字均采用高保真形态（去色）,其它区域用白色米色,重要元素用60%黑,此图来自网络，鸣谢,37,原型图绘制方法3黑白灰突出色高保真图形,重要元素用突出色彩表达,次要元素用40%黑,全部图形采用高保真模拟,黑色衬底突出原型,此图来自网络，鸣谢,此图来自网络，鸣谢,39,此图来自网络，鸣谢,40,此图来自网络，鸣谢,41,交互流程图绘制,交互流程图绘制,交互设计是面向过程的设计，所以需要描述清楚产品整体使用流程及相应的情况。使用交互文档进行描述是很好的方式，交互文档将作为技术开发，测试及设计人员进行全面的界面设计的依据。,42,Step1: 整体编号流程细节,对模块进行编号,底部对界面信息及要点进行说明,细节说明,流程进行用线连接,标题,局部功能流程,Step2:局部功能流程说明,点击后流程进行示意,细节说明示意,44,细节放大图,多情况状态图,界面信息说明,Step3:多情况多状态说明,45,表示包含关系,点击弹出按钮,吸引用户注意,文字闪烁效果,百度传课百度UE讲堂,上面只是简单的给大家讲解一下交互设计，要向更深入学习，可以看这几节课,49,下节课带给大家的是：,50,超 哥,该文档的版权为百度UE讲堂所有，如需转载请标明出处。,
