赞助商
立即赞助

超全面!高手总结的18条交互设计原则(二)

交互设计3年前 (2021)发布 流光
1.9K 0 0

这是一套较系统的交互设计原则,我将会结合一些案例行讲解,希望收获。

此书属于作者博客分享,并未成书版,总结于14年,在阅读翻译过程中发现很多案例及原则已经过时,因此结合当的互联产和潮的交互设计原则对其行了补充。内交互设起较晚,我杭州曾结识过第一中央院的交互设专业毕业学姐,那内第一届交互设专业毕业,且终学姐从事的运营设。

因此国交互设计领域的发展,既要依托大厂优秀设计团队的成长与分享,要依靠外大环境愈发重视交互的趋势的形成。虽然职划分目前仍没有一个定论,是独立划分交互设计师,还是 UI 晋升产设计师、UED设计师?但有一个准则却是大概可达成共识的,那就是,产经职愈发向务层倾斜,懂得在战略层务向屋建瓴筹备战略的产经,为企创更多的值。而交互逻辑信息架构等交互设计领域的职必然分发来,由中游的设计师来负责,即在座的各位。有压但是一条康庄大道,共勉。

超全面!高手总结的18条交互设计原则(二)

超全面!高手总结的18条交互设计原则(二)

一、可发现性

1. 隐藏复杂性的行为可能会导致增加复杂性

计尝隐藏一些素控件以使得界面更加轻盈简洁,或者希望减少多余素对用户的干扰,使用户聚焦于核心任。这种做法是没有错的,且多用于移动端产品,如阅读类app,为造沉浸式阅读体验而隐藏操作栏。

超全面!高手总结的18条交互设计原则(二)

但在执行这一计要考虑需要隐藏的内容是否会对用户造成困扰,在这享一个案例。

微信扫扫功能将手电筒隐藏,过判断扫描内容情况来调取手电筒功能。这个设计本身没有,结合用户场景在最恰时触发,在其余场景隐藏以保证界简洁。这个设计实上犯了个较大原则性误——用户自治(上篇文章有讲到),品设计者太过自信于识效率,自信于代码精湛,而没有在广泛实场景进大量测试。导致用户法按照自己意愿执操作,大大降低效率并引发用户反感。

使用时会出的问题:我晚急切的扫码骑车,打微信扫一扫后它需很时间(时超过十秒)判我处于黑暗场景,然后出轻触照亮的按钮,点击按钮手电筒会打。(时候只略微暗一些,但二维码无法被识别功的,手电筒的判断也无法实)此间我只能,因扫一扫功能占用了手电筒,因此即便我手动去启手电筒,也会显示此功能已被占用。很多人也出过类似的状况。

超全面!高手总结的18条交互设计原则(二)

2. 使用新手引导(功能引导)告知用户使用新功能

永远不要认为用户是高级用户,品设计者不能主观臆想用户很容易理解你所设计功能,主观想法没有实测试数据可靠,这是准则。

当产品迭后应对新增的功能行解释必的引导,否则这些功能对用户隐形不可用的。版本迭新,设者一般会主动行引导宣传,如常用的屏引导,遮罩功能引导。对于一些极小的功能增添或改动,也应当提供必的明。

3. 必控件必内始终可见

实用户体验目标需一核的任务径,用户依照这径完其核任务并达目标。例如我需购买一件 T恤,用户需淘宝下单以完这目标。反映界面中,需用户提供购买按钮、付款按钮必控件,同时当然也需展示商品价格、商品尺寸必信息。

反观京东分商的购界面是没有直接购这一按钮的,而是替换为入购物车。从体验角讲这是一个错误的设计,户需要执行入购物车 – 进入购物车 – 结算步操作,和单独的立即购按钮相,效率低,容易成流失。但从务角讲,入购物车容易触发户购多件商的欲望,另外单件商足99元无法享受包邮,要额外付邮,这一点容易对户购物体验构成阻碍,原参照面的解释。因此产设计要综合体验务各方面的因素,没有绝对的准则,只有绝对的适合。

超全面!高手总结的18条交互设计原则(二)

4. 通过用户测试判断界面的可发性

用户测试能够帮产品发否关键元素被隐藏从降低体验。用户测试一种极好的用户研究策略,如果设人员足够精力完问卷或访谈专业调研作的话,可以考虑寻找身的用户行简单测试,优于埋苦。

二、提高用户效率

1. 从提高用户工作效率出发,而不是提高效率

虽然提高工作效率貌似必然提升用户工作效率,实则相反。这里作者举例,输入电话号码这用户为,从效率度设计,最好输入连串十几位数,而从用户度讲,为避免输而导致效率低下及经济损失,应将数几位隔开。而很多时候,力成本比成本要高多,此论从体验度是从业务收入度,都应以为本进设计。

2. 提高软件效率需要从系统架构入手而不是表设计

可以理解为:交互设计于提高软件工作效率有着更要作用,相比信息设计视觉设计等。引申到现代品设计流程,要求品经理和交互设计师在品设计前期应该将更多时花费在用户调研,数据分析,以及信息架构上,而不是流于表交互稿,八原则八用来进前期数据理和研究分析,而剩余百分十时用来完成交互稿构即可。

这已被腾讯网易厂设团队提到过多次的设方法,即实际设稿的产出时间应当整产品设流程中占用短的,多的时间应当用于调研分析架构,明确业务目标用户体验目标后,以目标导向展设,可以避免反复修改问题,从提高产品设的效率。

3. 异常信息应当由专业人员编写

使用产品过程中不可避免会出一些异常状态、错误提示。这些提示文案应当由专业人员编写,其内需包括:

  • 解释什么是;
  • 告诉用户如何处理它。

超全面!高手总结的18条交互设计原则(二)

三、可探索的路径

概括来说就是清晰易用的导航。

1. 为用户提供核心工路径但也允许用户以自己的方式探索产品

不要强用户按照预先设置的方式使用产品,允许用户自己探索(针对想要主动探索和现的用户)但同时一定要提供一个最快捷高效的工路径,以满新用户的需求。以滴滴为例,强工具类产品以提供核心服务为主,应当证所有用户能够迅速现验目标:打车并抵达目的地。其他次要功能或者运营需求应当不影响一核心工路径。

超全面!高手总结的18条交互设计原则(二)

2. 供稳定的home项,使户随时可到自己的页

home 项的设计应当符合行标准,如淘宝 tab栏的第一项,如 PC产左上角的 logo,都属于 home 路径,且早已培养好户习惯,设计师可直接复这一规则,而应重设计 home 的样式或位置。

在此基础上,移动端 home 选项有很运营机和验机,浏览 feed流很久,点击 home 键回到顶部就是一个很惊艳的验点。

3. 使行动逆

使大部分操逆意味着用户以以自己的方式工又不造成损失。此原则应当灵活运用,逆的成应当结合产品来设计。例填写表单重新输,加购物车删除,付款取消订单,他们的成应当是依次递增的。

表是纯体验向的西,计人员更关注其填写效率,因此其可逆操作成本应当降最低。购物和付款相关可逆操作是和业挂钩的,计人员应当考虑成本,考虑如何阻止用户执行逆操作从而提高转化率付款率,减少取消订的比率。因此触的商类产品,下后去寻找取消订或退款需要花费一定间。

所以原则可以正使用也可以反使用,大家不要局限思维,需要培养业务观。

4. 始终允许撤销

如我们在编辑文章等为时可以过 command+Z 撤销文。此撤销不于动可逆,是更加便捷成本更低交互。例如微信聊天提供撤销操作,撤销后会提供新编辑选项,此撤销提高用户编辑效率,是个体验优化。

四、费茨定律

距离越长,所用时越长,目标越大,所用时越短。

1. 将大象用于希望用户执功能,如CTA按钮。将小象用于不希望用户执功能或希望用户要考虑功能

超全面!高手总结的18条交互设计原则(二)

2. 获取个目标需要的成是获取每个目标的成的总和

因此在使用费茨定律时,不仅要考虑距离和大小,还要减少用户需要考虑的目标的数量。即提供更少的选择以帮用户更快的完成决策。

五、人机界面对象

即界面中的视或互元素。

超全面!高手总结的18条交互设计原则(二)

1. 人机界面对象应当有一个标准的操作方式

如 button 触发点击的操作,滑触发滑的操作。

2. 人机界面对象具有标准的结果行为

如 mac系统中,垃圾桶并是真的将件删除,而是将储存在垃圾桶中, 只有倾倒废纸篓才将件彻删除。

3. 当希望户同的方式进行交互的时候,应当使对象

一般情况,我们应当在产使的控件样式和交互方式,如点击,滑,双击等,同平台要入乡随俗,iOS平台左滑唤操作控件,而卓则是长按唤,特殊情况如务需要,或考虑开发成本,双端合一一稿设计时可适当打破规则,而有时为了满足同平台的户习惯,我们需要供两种样式的操作方式。如在小程序平台,无法判断他是iOS还是卓的户,就无法仅供一种交互样式来满足有户。

六、降低延迟(用户等待时间)

1. 尽可能使用多线程将延迟推送到后台

尽保证用户待程时可以继续完其他作或浏览其他内。如传视频后不必原页面待,可以浏览其他信息。

2. 优化用户延迟体验

通过50毫秒内的视觉或者听觉反馈确认所按钮点击,避免多次点击的陷阱。(网速卡时,人们通常会多次点击按钮,后台应避免多次发送请求从导致卡顿)

3. 待时需告知用户,信息尽完整,如具体待时间

加载样式多样,应当选取合产品及场景的样式。程度较重的如全屏加载,轻度加载如微信 button 加载样式。

超全面!高手总结的18条交互设计原则(二)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

任何一名设计师应该都会接触到运营活动页,产品落地页此类需求。而这些落地页设计需求的业务目标衡量标准都相当明确——即转化...
交互设计
读者提问: 呆总,为什么微信群红包不即时显示当前领取状态,而需要用户点击后才可查看呢? 呆呆:每个人对于这个问题的...
交互设计
现在阅读微软1998年的用户界面,就像发掘古墓一样。设计人员和开发者为整个 Windows 系统和应用程序准备了长达381页的引导内...
ui设计
弹窗现在越来越成为了个磨人的小妖精。 早年我们受够了太多不明错误弹窗的骚扰,现在又却要承受各种广告弹窗的轰炸。 我...
ui设计
编者按:随着亚马逊、小米、阿里巴巴等大公司都推出了智能语音产品,如何为这类以语音交互为核心的智能产品做设计也成了一个...
交互设计
二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作。从用户流程图中我们不难...
二次确认
因为各行各业里,都有自己独有的内容维度去组织对用户的信任感。因此下面列举一些通用的方法: 信息透明 将代表自身最真实的...
产品
二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作。从用户流程图中我们不难...
二次确认