UE Design | 您所在的位置:网站首页 › 用户交互设计原则有哪些 › UE Design |
在日常工作中,我们或许会遇到这样的情景: 说不清楚交互设计师和 UI 设计师的区别,被人觉得交互设计师就只有审稿或在产品经理出的原型基础上完善优化的份了;面对很多成熟的交互组件库和界面框架,觉得交互设计师难有用武之地;设计评审理不清思路和理由说服对方,甚至当有人问我们交互设计师究竟是做什么的时候,却说不太清楚...... 大家对交互设计还是会存在认知上的误区,本文会对以上种种问题作出的回应。小编将从认知、思维、方法和工具四个方面详细阐述交互设计,帮助大家更深刻地理解什么是交互设计,意识到交互设计的价值与重要性;同时,掌握一套通用的设计思维和方法,适应 C 端和 B 端数字产品的交互工作。![]() ![]() 交互设计师在工作中接到的设计项目通常可分为两类。一类是体验优化类项目,另一类则是新产品或改版项目。体验优化型的项目,一般是产品日常版本迭代,属于常规项目。新产品或改版项目出现的频率比低,但非常重要,往往需要一定的竞品分析或调研工作。 交互设计师在对接这两类项目时,要主要关注需求分析、用户研究、信息架构、流程设计、信息设计、原型设计、文案、数据分析、竞品分析 9 个方面。其中,需求分析最为重要,它包括用户需求和产品需求的分析,需求分析是从用户提出的需求出发,找到用户内心的真实需求,进而转化为产品需求的过程。用户需求是用户自己以为的需求或需要,产品需求是经过我们分析后挖掘到的用户的真实需求,并转化为产品解决方案。此外,一般需要从商业、用户、技术三个方面考虑,洞察需求的合理性。 交互设计研究方向 产品、交互和 UI 的区别 用户体验五要素是入门交互设计必备的基础模型,通过用户体验五要素可以直观清晰地知道产品经理、交互设计师和 UI 设计师工作的侧重点和区别。 ![]() 首先,产经经理主要侧重于战略层和范围层。 具体思考产品目标和用户需求,通过对用户需求的洞察,提出产品解决方案,将用户需求转化为产品需求,即功能规格和内容需求,产品经理更多思考产品的商业价值和满足业务需求。 其次,交互设计师主要侧重于产品的结构层和框架层。重点是行为设计和逻辑层面,权衡用户价值和商业价值,侧重产品用户体验,提出更有效的设计解决方案。根据用户体验五要素模型可知,产品主要分为功能型产品和信息型产品,不同类型的产品,交互设计的侧重点也不同。对于功能类型产品,侧重功能交互设计和界面设计,而对于信息类型产品,则侧重信息架构和导航设计。最后,UI 设计师主要负责产品表现层,以用户为中心,围绕产品和交互设计的目标展开视觉设计。UI 设计师偏向于感知设计,通过对比、视觉一致性、配色、排版、字体、字号、图形符号等设计手法赋予产品良好的外观体验和视觉感知,提升产品的视觉体验。简而言之,设计师更注重创意及逻辑,设计目标更加纯粹,能够更多地考虑用户,设计方法更专业。产品经理会站在产品全局视角考虑问题,侧重商业目标。![]() ![]() ![]() ![]() 设计思维的转变 综上所述,本文阐述的是以用户为中心,以增长为导向,提升产品价值的用户思维和增长思维。其中,产品价值包括用户价值、商业价值、品牌价值以及产品核心竞争力等。用户思维主要总结为 6 个方面,分别是用户动线、距离、用户习惯、防呆、优先级和场景。用户思维 Part 1. 用户动线 用户动线,指用户使用互联网产品的行为轨迹,即用户行为路径设计。常见的用户动线设计方法有视觉引导用户注意力、小红点消息提示引导用户、页面切换动效、暗示更多内容、留白、F 型视线运动等。首先,通过视觉色彩和区块大小对比引导用户注意力。例如,美图秀秀首页底部导航设计,中间的加号按钮使用红色色块体现,放在底部导航中间位置,并增大了展示和点击区域。当用户关注导航区域时,会优先被引导至加号入口。小编认为这样设计的目的是体现此入口的重要性,具体跟美图秀秀的产品定位有很大关系。美图秀秀前期的产品定位是做一款免费使用的拍照工具,用户用完即走,但它目前在进行产品商业化转型,所以产品重新定位为以工具为基础,做图片社区,目的是希望增加用户留存,便于产品商业化。天猫(左)、京东(右)切换动效 其四,暗示更多内容。当某个板块超出屏幕可视区域时,需露出部分内容,以暗示用户还有更多内容。在移动端界面设计中,由于界面可视区域有限,所以需要拓展可视界面区域,通常水平展示更多内容时使用左滑查看更多,默认展示 2 个半或 3 个半的内容,暗示用户界面右侧有更多信息。由于界面首屏内容一般会有更多的曝光机会,页面越长,用户没耐心继续向下访问,因此为了暗示用户向下继续浏览,通常将首屏底部内容展示一半。京东(左)、京东家电(右) 其五,留白。留白的界面处理方式,会暗示用户浏览信息的顺序。例如,下图所示的 B 端表单采用两列布局。水平方向和垂直方向表单间距一致时,用户会不知道该按行浏览还是按列浏览。当把两列表单的行间距留白调大,用户默认会按行浏览表单填写。 Google 搜索结果页 了解用户行为轨迹,可以为界面优化提供科学依据。对于电商产品而言,通过科学分析用户视线停留时间及次数,可以精准把握商品的市场反馈。下图是通过眼球追踪仪了解到用户浏览信息的轨迹。Part 2. 距离 距离,是指界面元素离用户手指或鼠标的距离远近。费茨定律指出目标越大,指向越快;目标越近,指向也越快。还是以美图秀秀首页为例,界面上半部分的相机、拼图、美化图片等工具入口设计的点击区域足够大,且入口之间保留足够的间距,用户点击工具入口更快更精准。一般移动端距离用户手指最近且容易操作的区域是界面底部区域,所以使用频率高的全局导航会优先考虑放在界面底部。美图秀秀首页 Part 3. 用户习惯 在界面设计中,保留用户已有的产品使用习惯,可以有效降低用户的学习成本。一般成长期或成熟期的产品在规划改版时,会衡量新老用户的比重以及改版的价值,不会频繁轻易改版,频繁改版会影响老用户使用习惯,导致用户流失。如果改版的价值高于用户使用习惯,而用户不想尝试改变已有当使用习惯,可以通过激励措施引导用户。例如,通讯社交产品微信,已经培养了用户使用通讯社交产品的习惯,所以后来支付宝新增的通讯产品-朋友,其界面设计和交互操作方式基本和微信的聊天界面一致,这一设计决策是考虑到大量用户在使用微信时形成了用户习惯。微信(左)、支付宝(右)聊天界面 Part 4. 防呆 防止用户误操作并可快速恢复,避免用户在操作界面时出错,这是一种防呆设计。常见的防呆设计方法有增加必要的限制、操作流程优化、及时反馈、容错设计。首先,设计必要的限制。当用户填写表单信息时,增加必要的设计限制,可以有效减少用户填写表单的出错情况,减少用户成功填写表单的时间,提升效率。下图分别是 PC 端携程旅游和同程旅游添加乘客信息的交互设计,携程旅游添加身份证信息时允许用户输入中文字符,但身份证只能是数字或字母组成,所以允许用户输入中文字符是无效的。而同程旅游考虑到了身份证号码的特殊性,限制不可输入中文字符,同时放大展示已输入证件号码,视觉上六个数字为一组,保留间距,方便用户边输入边核对,用户体验更好,更多地考虑了用户操作场景。 携程旅游(左)、同程旅游(右)添加身份证号码交互 其二,操作逻辑。通过改变操作流程,可以有效解决因流程设计导致的用户痛点。比如,在使用 ATM 机取钱时,经常取完钱后直接离开,忘记取卡,导致银行卡被锁定,找回银行卡比较麻烦。针对这个问题,中国光大银行和平安银行改变了 ATM 机取钱流程,先退卡再取钱,通过优化流程,解决用户银行卡被锁定的痛点。中国光大银行 ATM 机(左)、平安银行 ATM 机(右)取钱场景 其三,及时反馈。界面要及时响应用户的操作并提供反馈。同程旅游PC端添加身份证件号码时,当用户输入字符,光标离开文本框后即刻校验该字段,及时告知用户当前所填信息是否正确。同程旅游添加证件号码 移动端场景比较复杂,如断网时,不仅要给出反馈,还应提供解决方案。例如网易云音乐无网络场景设计,首先会提示用户无网络,将部分功能置灰,同时展示已缓存的数据和界面框架,满足用户的核心需求-听歌。无网络或网络弱时,提供给用户可行的解决方案可以有效帮助用户重新连接网络,保证用户体验流畅。网易云音乐无网络状态 再比如,网易新闻、今日头条、腾讯新闻等内容型产品的设计,用户点击过的内容入口会置灰,把已读和未读内容区分开,避免用户查看重复信息,这是通过视觉方式处理的及时反馈。内容型产品 其四,容错设计。主要目的是防止用户误操作而导致用户数据丢失。删除重要数据信息时,需提供二次确认。同样是同程旅游订单填写页面,未填写信息时,点击返回则直接返回,若已填写订单信息,离开页面时会提供二次确认,一旦离开,则当前页面的数据信息不会保留,给用户一次确认离开的机会。这样做一是促进完成订单增加订单转化率,二是考虑到误操作的可能。同程旅游-订单填写 Part 5. 优先级 优先级,又称之为“层次或层级”。层次分明的产品界面可以帮助用户一眼抓住最关注和最重要的信息,并快速决策。产品、交互和视觉都有优先级之分。产品和交互所谓的优先级分为内容、功能、流程、场景和用户。内容上区分主要信息和次要信息,功能上区分主要功能、次要功能、基础功能,考虑功能价值和使用频率,流程上分产品主流程和分支流程,场景则考虑用户主要的使用场景,而用户方面则需考虑产品的目标用户、目标用户中的核心用户(能带来收入的目标用户群体),产品是为大多数目标用户设计的。交互优先级 视觉的优先级分为对比、颜色、区块大小、文字大小等,优先级明确的视觉设计可以让整体排版布局更加富有层次,让内容的可读性得到明显的提升。举个例子,支付宝中的余额宝主页和京东金融主页设计思路都是先给出结论,帮助用户快速决策,因此重要的信息都是收益信息,这是用户最关注的信息,所以视觉上采用大色块的高优先级方式展示,且位置放在首屏第一个板块,用户一眼可以看到与自己利益强相关的信息。余额宝(左)、京东金融(右) Part 6. 场景 场景是设计思维中很重要的一部分。设计是解决用户在具体不同场景下遇到的问题,这里的“场景”有两层指向,一是用户在现实生活中的真实场景,二是用户使用某产品时的场景。首先,用户在真实场景下的设计思考。比如用户在昏暗环境下使用摩拜扫码用车,摩拜提供的手电筒功能会根据环境光线强弱自动开启手电筒,考虑了用户真实使用场景。在灰暗环境下使用摩拜扫码用车 再看苹果手机来电显示界面设计,用户未使用手机时和使用中的电话接听界面设计不同。用户未使用手机时,接听界面交互是通过滑动接听,增加接听电话操作成本,防止用户误操作拒接电话或接听电话,因为用户未使用手机的场景很多,手机放在口袋或包里,可能会因为运动等因素误操作。而用户正在使用手机中则是直接展示拒绝和接听按钮,如果用户未使用手机时的界面也是这样,误操作的几率会非常大,当有重要人士或亲密朋友来电话,误操作拒接会引起不必要的麻烦。这是基于用户在不同场景下需求不同而做的设计。 在不同场景下用苹果手机接听电话的界面 第二,基于用户使用产品时的场景设计。美团外卖首页根据用户每天吃饭的时间点,分早晨、中午、晚上、夜宵共四个时间段,基于 LBS 地理位置在不同的时间段分别为用户提供不同好店,精准为用户推荐好店,解决用户吃的问题。这是基于场景考虑的设计。增长思维 用户思维是交互设计最基础的设计思维,此外,增长思维也同样重要。混沌大学李善友教授曾说过“作为一个企业,第一重要的事情是增长。”对于互联网上市公司而言,业务营收的高速增长可以提高公司估值,对于企业投资者而言,则可以提高投资回报率。从 2018 年以来,比较有影响力的设计大会,比如产品经理大会,有一半的演讲者都在讲增长,可见,增长已是必然趋势。既然大家都在讲增长,增长是 KPI 指标吗?作为设计师,该如何助力业务和产品增长呢?据小编了解,国内最早的增长概念来自于范冰的《增长黑客》这本书,而增长概念起初来源于美国硅谷。增长并不是 KPI 指标,KPI 只是短期阶段性指标,且更多的可能是一些虚荣指标,产品经理为了达到 KPI 指标而牺牲用户体验是常有的事情,那么什么是增长呢?Part 1. 什么是增长 产品进入成长期阶段,产品主要的目标是确定产品差异化定位,抢占市场并迅速占领用户心智; 在成熟期阶段,需重点考虑产品如何进行商业化变现,以及如何提升商业价值。上面介绍过的美图秀秀 APP 已经是成熟期的产品了,所以产品也在进行商业化转型。从企业战略层的视角看,有了增长意识后,我们需要尽早在产品成熟期阶段思考如何提升产品增长,否则当产品进入衰退期再考虑产品增长是比较困难的事情,市场竞争激烈。 比如美团,最早持续给企业带来高速营收增长的业务线是美食,在产品成长期阶段对标的是大众点评,解决的是用户本地生活吃饭的需求。后来在原有业务线基础上不断探索,逐渐分化出来多条新的业务助力企业增长,比如电影演出、酒店旅游、美团外卖、出行(打车、摩拜单车、火车票、机票)、美容美发生活服务等等。 现在发展比较成熟的业务线是美团外卖,已成为美团第二条成功助力企业营收增长的重要业务线,为什么美团会有多条成功的能带来增长的业务,这和企业的创新分不开。 所以,产品增长如何实现呢? Part 2. 如何实现增长从业务角度看,需要业务创新实现营收增长,就要深入洞察用户并挖掘还没被满足的需求。从产品角度看,需要通过数据体现增长,前面提到了云计算的快速发展使得产品获取数据非常地容易,所以通过数据分析可以由数据驱动业务增长,找到能提升业务目标的解决方案,不断优化产品体验。常用的增长方法是 AARRR 用户转化漏斗增长模型,具体先后顺序分别是获客、激活、留存、增加收入、推荐传播。但是,AARRR 用户转化漏斗增长模型更适用于成长期和成熟期的产品,并不适合用于探索期产品。探索期产品最重要的是用户留存,是要验证产品方向,是不太需要花巨大成本推广产品先获取客户的,而是要先考虑用户留存、后激活沉睡用户,再考虑产品获客的事情,用户留存可以体现产品的价值,验证用户需求。![]() 基于场景目标导向设计法 基于场景的目标导向设计法是指:特定类型用户(who)在某时间(when)某地点(where)、遇到什么(what)时,有怎样的诉求(want),会通过什么手段(how)来满足其诉求,简称 5W1H 法则。 ![]() 交互设计流程 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() (部分配图来源于网络,侵删) |
CopyRight 2018-2019 实验室设备网 版权所有 |