移动端的用户体验设计移动端的用户体验设计Part1.如何设计?Part2.聊聊微博Part3.不得不说的用户研究Part4.交互设计师存在的价值Part5.设计师的知识储备Part6.一些推荐ContentsPart1.如何设计?移动端的用户体验设计设计准则和设计方法移动端的用户体验设计AlanCooper:除非有更好的选择,否则就遵从标准。许多设计准则都基于人类心理学:人们如何感知、学习、推理、记忆,以及把意图转换为行动。Part1.如何设计?|设计准则“”移动端的用户体验设计一致性,相似从而有预期交互逻辑的一致性元素的一致性语言的一致性信息架构的一致性视觉的一致性Part1.如何设计?|设计准则–一致性移动端的用户体验设计Part1.如何设计?|设计准则–一致性应用内部的一致性移动端的用户体验设计Part1.如何设计?|设计准则–一致性系统间的一致性移动端的用户体验设计Part1.如何设计?|设计准则–一致性平台间的一致性移动端的用户体验设计菲茨定律(费茨法则)定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的D与W),用数学公式表达为时间T=a+blog2(D/W+1)。Part1.如何设计?|设计准则–七大定律(1)•按钮等可点击对象需要合理的大小尺寸。•屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。•出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置移动端的用户体验设计席克定律定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。Part1.如何设计?|设计准则–七大定律(2)移动端的用户体验设计Part1.如何设计?|设计准则–七大定律(2)摘自“席克定律”移动端的用户体验设计神奇数字7±2法则人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了5-9项信息后人类的头脑就开始出错。Part1.如何设计?|设计准则–七大定律(3)移动端的用户体验设计接近法则当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。Part1.如何设计?|设计准则–七大定律(4)移动端的用户体验设计Part1.如何设计?|设计准则–七大定律(4)移动端的用户体验设计泰思勒定律(复杂性守恒定律)该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方Part1.如何设计?|设计准则–七大定律(5)移动端的用户体验设计防错原则防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。Part1.如何设计?|设计准则–七大定律(6)移动端的用户体验设计奥卡姆剃刀原理(简单有效原理)“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。Part1.如何设计?|设计准则–七大定律(7)移动端的用户体验设计Part1.如何设计?|移动端设计准则为触摸而设计考虑操作中断尽量少的文字输入一个界面一个主要操作提供自然而然的下一步操作界面外观遵循用户行为为触摸而设计界面的交互系统以自然手势为基础建构,符合人体工学并保持一致性。移动端的用户体验设计Part1.如何设计?|移动端设计准则考虑操作中断考虑应用的使用情境,确保在各个产出中断的情境下,让用户恢复之前的操作,保持用户的劳动付出。移动端的用户体验设计Part1.如何设计?|移动端设计准则尽量少的文字输入虚拟键盘空间限制,手指点击容易造成误触移动端的用户体验设计Part1.如何设计?|移动端设计准则Part2.聊聊微博移动端的用户体验设计Part2.聊聊微博移动端的用户体验设计n个项目组和无数个事业部Part2.聊聊微博移动端的用户体验设计之前之后Part2.聊聊微博移动端的用户体验设计Part2.聊聊微博移动端的用户体验设计移动端的用户体验设计Part2.聊聊微博上线版本Part2.聊聊微博移动端的用户体验设计Part2.聊聊微博移动端的用户体验设计Part2.聊聊微博移动端的用户体验设计3.0的相册选图界面仅支持单图选择由旧至新,由上至下选择单张照片后添加至发布器单张照片即一个触区需返回前一页面选择调用的系统相册Part2.聊聊微博移动端的用户体验设计3.5改版,重构图片选择界面支持多图(最多9张)由新至旧的排列在选择图片的同时,支持拍摄新照片勾选照片时显示排序数字勾选后加至下方的已选栏,允许取消选择Part2.聊聊微博移动端的用户体验设计4.6支持相册筛选和图片预览去掉相册界面,改为顶导筛选将一行3张图片改为4张单张图片上变为双触区:勾选和预览去掉数字排序,降低干扰增加原图功能Part2.聊聊微博移动端的用户体验设计单手操作:49%(67%,33%)一手拿,一手操作:36%双手操作:15%由此可见,大部分的人更喜欢单手操作Part2.聊聊微博|用户如何使用手机?移动端的用户体验设计Part2.聊聊微博|用户如何使用手机?移动端的用户体验设计绿色:用户最容易触摸黄色:较容易触摸红色:最难触摸,死角左手的单手操作正好相反。Part2.聊聊微博|用户如何使用手机?移动端的用户体验设计Part2.聊聊微博|可视化编辑移动端的用户体验设计Part2.聊聊微博|工作流程移动端的用户体验设计39理解、发散、决策、制作原型、验证Part2.聊聊微博|设计流程移动端的用户体验设计达到高响应度冗余信息的折叠平滑清晰的动画效果增加趣味性,提高愉悦感尊重用户习惯界面美观度……Part2.聊聊微博|如何提升移动端的用户体验?移动端的用户体验设计41视频转码或图片上传:预处理,缩短等待时间Part2.聊聊微博|如何提升移动端的用户体验?-高响应度移动端的用户体验设计42内容加载:先出现界面的框架结构,逐级显示内容前一级的信息代入或利用缓存,减少界面空白(如微博正文)Part2.聊聊微博|如何提升移动端的用户体验?-高响应度移动端的用户体验设计43信息发布:预占位,条件允许时自动发出。点触反馈:利用界面间跳转的时间差,预加载Part2.聊聊微博|如何提升移动端的用户体验?-高响应度移动端的用户体验设计信息布局:同类信息的归类和整理冗余信息的归属,要么删除要么折叠适度留白,减轻视觉疲劳Part2.聊聊微博|如何提升移动端的用户体验?-信息设计移动端的用户体验设计动效应该是:有意义的符合现实运动规律的能够开发和实现的一到两个让人愉悦的小细节任何和动作结合的动画效果都不要超过0.5-1秒Part2.聊聊微博|如何提升移动端的用户体验?-动效移动端的用户体验设计Part2.聊聊微博|如何提升移动端的用户体验?-动效移动端的用户体验设计Part2.聊聊微博|如何提升移动端的用户体验?-动效移动端的用户体验设计好的产品关注功能,优秀的产品关注情感Part2.聊聊微博|如何提升移动端的用户体验?-趣味性移动端的用户体验设计“”尊重用户习惯。让人熟悉的设计,使用起来也会更顺手。Part2.聊聊微博|如何提升移动端的用户体验?-习惯移动端的用户体验设计美观主要是通过视觉层面传达给用户的信息。通常来讲,用户会认为好看的东西更实用。Part2.聊聊微博|如何提升移动端的用户体验?-美观移动端的用户体验设计换位思考,把自己当作一名普通用户•人如何观察•人如何阅读•人如何记忆•人如何思考•人的动机来源•人是社会性动物•人如何感知•人会犯错•人如何决策Part2.聊聊微博|如何提升移动端的用户体验?-思考移动端的用户体验设计Part3.不得不说的用户研究移动端的用户体验设计用户研究是以用户为中心的设计流程中的第一步。它是一种理解用户,将他们的目标、需求与商业宗旨相匹配的理想方法用户研究微博PC端商业微博移动端周边产品品牌……Part3.不得不说的用户研究移动端的用户体验设计问卷调查、用户访谈、可用性测试、远程可用性测试、眼动追踪、经验性评估……Part4.交互设计师存在的价值移动端的用户体验设计产品经理≠交互设计师视觉设计师≠交互设计师Part4.交互设计师存在的价值移动端的用户体验设计对需求进行重新评估和分析需求是否合理?用户是否需要?经过分析找到真实的需求。福特,马,车梳理结构,设计界面交互设计师加入后,设计过程会变得更加轻松。好的设计师可以用较短的时间提供出优秀的解决方案。Part4.交互设计师存在的价值移动端的用户体验设计提高设计质量,提升效率经过一定时间的积累后,UE通常会输出一份产品通用的设计规范文档,用来规范后续的设计和开发。它能够提高产品的一致性,并且提升工作效率。Part4.交互设计师存在的价值移动端的用户体验设计推动项目进行,跟进并保证质量从立项开始,交互设计师除了产出设计文档以外,还会持续跟进视觉、开发、测试一系列过程,反复校验已实现的细节。同时还会跟进后续的用户反馈,持续改进产品的用户体验。Part4.交互设计师存在的价值移动端的用户体验设计交互设计是个跨学科专业。心理学是其中很重要的一部分。知识储备包括:设计资源、设计方法、常识、思维Part5.设计师的知识储备移动端的用户体验设计专业书籍微博知乎36氪专业网站站酷Dirbbble花瓣体验新app参加画展等1.提升专业度2.快速获取有效信息3.培养视觉眼界4.启发思维设计方法、设计思维和设计趋势Part5.设计师的知识储备|浏览和收集移动端的用户体验设计Part5.设计师的知识储备|浏览和收集移动端的用户体验设计Part5.设计师的知识储备|浏览和收集移动端的用户体验设计Part5.设计师的知识储备|浏览和收集移动端的用户体验设计①风格统一②尽量少的元素和文字信息,一页讲一件事③不超过5页④有明确的入口,允许跳出⑤显示点状提示,告知用户当前位置Part5.设计师的知识储备|浏览和收集移动端的用户体验设计归纳和总结,将收集的内容整理为素材或提炼出设计方法Part5.设计师的知识储备|消化和沉淀移动端的用户体验设计Part6.一些推荐移动端的用户体验设计67感谢你的时间!结束