搜索
从用户的角度进行产品设计信息咨询部翟天骄2010.08.312whatwhyhow如果一个产品很难用，我就不会经常使用如果一个产品我不需要，我就不会用Focusontheuser,andallelsewillfollow.以用户为中心，其他一切纷至沓来。不同的人不同的理解不同的需求不同的设计不同的设计不同的效果心理模型表现模型实现模型容易使用，体验良好记忆负担，体验较差最好的技术是消失在生活当中的技术8whatwhyhow以用户为中心的Web设计的流程和用户体验的要素“AJAX之父”的JesseJamesGarrett在2000年提出产品设计•市场调研•需求分析•详细设计研发发产品（软件、网站）建房子土木工程师装修设计师建筑设计师程序设计ＵＩ设计交互设计——《软件设计的艺术》TerryWinograd(2004年度的ACM人机交互院士)名称解释•UI（userinterfacedesigner）:用户界面设计人员•UE（UserExperience）：用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。•UCD（UserCenteredDesign）：“以用户为中心的设计12whatwhyhow设计者怎么想需求集合功能集合出水写字保护笔芯的笔盖颜色墨水易擦墨水产品写字长久的写字标识不同内容写新的内容用户能当发簪变形金刚？？？要了解人，从而了解用户，更要习惯站在用户的角度看问题。他们要“随时随地变成用户”产品功能重排口碑相传的产品设计之道–核心能力和速度–交互体贴细致，视觉简洁清爽–高端用户的关注–如何在良好口碑下持续增加功能要了解人，从而了解用户，更要习惯站在用户的角度看问题。他们要“随时随地变成用户”产品规划的流程定义产品规划流程对市场走势及客户需求进行分析，创建合理的市场细分规则，对要投资和取得领先地位的细分市场进行选择和优先级排序，从而制定可执行的业务计划，并驱动新产品包的开发。过程交付件对应产品阶段用户需求收集产品候选概念用户需求分析和PK阶段市场分析市场评估报告制定规划产品路标规划书制定综合FeatureList和规划PPT例撰写策划产品需求规格说明书产品需求说明书例制定业务计划产品业务计划书开发阶段？用户需求分析法（例：QQ秀）要素细分项目对应腾讯产品的元素$价格设计、可生产性、技术、原材料、生产、供应商、制造、元件、人力成本、管理费用、装备付费Item的价格/包月价格A安全/质量行销、销售、渠道、分配、交货期、广告、配置、定价、客户定制客服/投诉的响应P性能功能、吸引力、规格、功率、速度、容量、适应性、多功能、尺寸用得爽不爽P包装风格、尺寸、数量、几何设计、模块性、体系结构、界面、机械结构、同一性、图形、包含的/不包含的页面好看不好看E易用用户友好、操纵控制、显示、人类工程学、培训、文档、帮助系统、人为因素、接口、操作UI（界面操作性）A可获得性可靠性、质量、安全性、误差极限、完整性、强度、适应性、动态特性、负荷量、冗余Q币购买/充值渠道L生命周期成本寿命、正常运行/停工时间、保险、责任、可维护性、服务、备件、移植通道、标准化、基础设施、运转成本、安装成本Item有效期S社会接受程度间接影响、顾问、采购代理商、标准组织、政府、社会认可程度、法律关系、政治、股东、管理层、工人、工作场所同龄人认可度/流行度如何排定产品功能的优先级各个功能本身并无“优先级”可言，对一支笔来说，“写字”和“当作发簪”这两个需求是平等的。但是产品在不同的阶段有不同的目标和不同的现实情况，这就成为判定产品功能优先级的唯一标准。产品阶段首要目标功能侧重点$APPEALS新产品上线吸引新用户、快速占领目标市场“好用、方便、便宜”（注意，“便宜”实际上是运营的范畴）$价格、E易用、A可获得性平台期留住用户、稳定收入内容翻新、满足细分用户群的需求（例子：高露洁牙膏、飘柔洗发水）P包装、A安全/质量、P性能产品更新换代保留旧产品精髓，加入新的创意元素“时尚、创新、新新人类的需求”（例子：Swatch）S社会接受、L生命周期成本市场分析用户分析需求分析小案例：用户需求优先级排序QQ发布第一个版本时，有以下用户需求：卡通头像QQ表情聊天记录管理器看谁在线上安全性传文件很小的.exe文件视频聊天室语音反应速度快请从中选出最重要的三项，发布QQ1.0。？别让我思考(Don’tMakeMeThink)网站可用性三大定律人们使用WEB的几个事实1.不是阅读，而是扫描①总是很忙②不必阅读所有的内容③善于扫描2.不做最佳选择，而是满意即可①总是很忙碌②如同消防员3.不追根究底，而是勉强应付①如果发现某个东西能用，我们会一直用它注意力是有限的过多的内容。。。Krug可用性三大定律1.别让我思考(Don'tmakemethink)2.要点击多少次都没关系，只要每次点击都是无须思考，明确无误的选择。3.去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。Krug可用性第一定律1.别让我思考(Don'tmakemethink)a)网页应该设计得不言而喻b)网页避免强迫用户思考的地方c)如果做不到一切不言而喻，起码做到让页面自我解释Krug可用性第二定律2.要点击多少次都没关系，只要每次点击都是无须思考，明确无误的选择。a)用户的挫折感限度不取决于到达相关网页所需要的点击数而是点击的困难程度。b)经验准则：一次需要思考的点击等于三次无须思考的点击。例子去掉每个页面上一半的文字，然后把剩下的文字再去掉一半。a)有力的文字都是简洁的。b)必须消灭欢迎词，必须消灭指示性文字。可用性实践中需要注意的问题1.导航条(页头，页尾，页内)2.主页3.团队中可用性的讨论可用性实践中需要注意的问题1.导航条①作用a)帮助找到想要的，告诉我们如何使用网站b)给人固定的感觉c)告诉我们身在何处②注意事项导航条设计时需要注意a)网站的每一页(表单可能例外)都需要导航b)次级导航都应该有返回首页的链接c)页面名称应该醒目(自我解释)d)要提供简洁，没有无关选项的搜索框优秀的导航条示例:Amazon,Builder.com.cnAmazon.COM导航条Builder.com.cn导航条可用性实践中需要注意的问题2.主页①主页的作用②主页需要额外考虑的问题可用性实践中需要注意的问题3.团队中可用性的讨论a)现状：无休止的信仰大战b)本质：浪费时间c)关键：没有什么所谓的普通用户d)唯一改变的方法：用户体验测试团队中可用性的讨论可用性最佳实践•提供增大网页字体的选项(国内网站…)•为每张图片增加ALT文本•用户不可能在一个界面中接受过多信息，而且信息量和页面长度不是正比关系交互设计—Don'tmakemethink•“返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中的“玉柱”，也定义了邮箱的交互风格。•帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入框内的内容select上，这样就可以直接打入而不用清除了•光标定位：之前的点回复时光标focus到正文的问题改好了,但却没有注意到点转发时光标,反而应是在收件人处而不是正文处,因为一般总要填写转发人,而回复(包括回复全部)则是直接输入内容.交互设计—符合用户习惯与预期•类Outlook客户端操作，但比它做得更优秀•先字母排序，再优先显示最近联系人，减少键盘操作。这么细的体验，但一旦用上，就觉得别的同类产品很粗糙了！交互设计—符合用户习惯与预期•兼容客户端邮件菜单习惯•在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右键则不能。•不要随意去掉用户正在使用的功能•原来mail在做出了“HTML方式查看”后，去掉了“打开”功能•符合用户预期，点击其他地方，WEBQQ的浮动窗口隐藏到固定位置交互设计—适时的提醒•没必要的提醒不需要出现•而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀（当未读邮件过多时，提示删除历史邮件）•数字和字母帐号不同方式；图片验证旁提示“不区分大小写”，细节中体现体贴;修改前修改后交互设计—操作便利•鼠标响应区域的大小，灵敏度和精确度，直接影响操作体验•示例：QQMail，业务导航区，QQ音乐•QQ影音的快捷播放按钮：最初的设计改为方形扩大点击区域，考虑性能去掉按钮显示最初的设计优化后最后•鼠标动作需要精确的判断，捕捉用户意图（如：QQ影音的鼠标左键点击的精确判断）•左键单击画面可以移动窗口•没有移动窗口时左键弹起才暂停画面，移动范围少于一定数值算暂停•右键菜单出现后的左击画面不执行暂停，视为取消右键菜单视觉设计—制定规范，维持统一•文字使用要规范，语法，大小，颜色，大小写都需要注意•能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话•每个概念都只有唯一一种表达。如”VIP”的概念•能用一种字体颜色的，不多用一种颜色•能用一种字体大小的，不多用一种大小–用标准组件•能用标准控件的，不自己画控件（一个button，就有focused,selected,up/down,enabled/disabled,tab顺序等多种状态要画和处理，不容易的，而且要考虑浏览器兼容）•能用文字的，不用图片（加图片是要申请的）•保持尽可能少的格式式样•维持统一•就算字体和行间距等小细节都应该关注到•英文字体Tahoma视觉设计—重点突出•每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去找。•原来的设计排版不对，有一横条的压着的情况黄色块就不能加框，视觉会很繁杂看着不舒服，句号也是多余的•原来方案目前方案·Pony：在设置了独立密码的情况下,当登陆到需要输入独立密码时,总是先出来输入框,此时已可输入,我经常是立刻输入,但打了几个字母后上面,才瞬间出现上面的黄色提醒请输入独立保护密码,而会导致输入框位置立刻下压,比较影响输入.最好能改一改html里的结构,能够快速让人立刻输入(越快越好)的基础上,其他显示的可以慢些load到但不应影响其他部件的改变.总结：需要关注的用户体验•交互设计–Don'tmakemethink–符合用户习惯与预期–做适时的提醒–不强迫用户–选择最佳方案–操作便利•视觉设计–传播产品理念–大气成熟，干净整洁，工具化–规范与统一–重点突出–防止不恰当的低龄化•产品设计–口碑传播–少即是多–兼容性–无所不用其极–关注性能和速度–抓住高端用户–大气的设计–满足用户个性化需求–寻求差异•运营–不稳定会“功亏一篑”–跟踪用户定位问题–抗灾容灾能力如何关注–把自己想象成一个迟钝、挑剔、易怒的傻瓜来使用产品–抓主要矛盾，重点关注最常使用的交互点–产品经理有前台和后台技术背景，有助于设计的判断和平衡–擅长体会和学习业界优秀交互案例–觉关注和决策行动，决定准确和快一秒–键盘少敲一下，鼠标易于点选，鼠标少移一段，操作形成定势–照顾用户习惯–如何把新功能引入参考推荐著作：•《Don’tmakemethink》•《InformationArchitecturefortheWorldWideWeb》推荐工具：结构化内容：MindjetMindManage原型设计：AxureRP谢谢，欢迎交流电话：87167362飞秋群：2536172943