首页

交互设计之尼尔森的十大可用性原则

丽洁

系统应该在合适的时间内通过适当的反馈,始终让用户了解正在发生的事情——尼尔森


自我理解:用户无论在界面上做什么,都应该及时告知他发生了什么或者进展到什么程度。可以理解为人与人的沟通,界面需要及时告诉我们做了什么,现在是什么情况。


a.  这种告知应该是及时的。

加载任务在互联网中是最常见的,在加载过程中应当及时传达加载过程,减少用户的心理等待时间。在外部加载总时间无法优化的时候,使用何种方式能有更好的用户体验是设计时需要考虑的。

undefined

undefined

undefined


b.  应当告知用户你在哪里

你的界面需要引导用户来操作,即作为用户应该清楚的明白我在什么位置,我下一步可以去做什么操作。

现在app的很多设计基础包括顶部的导航分栏和底部的tab bar都是为了告诉用户他在哪里。

在做一些概念设计时候,如果单纯是为了更好的视觉效果,就对这些基础分栏进行大刀阔斧的设计,最终导致了好看是好看,可是用户都不知道这页面是干什么的结果,很明显是违背了最基本的交互原则 状态可见原则。

undefined


c.  应当告知用户事情怎么样了

用户在你的界面是要做什么事情,这是你在设计之前应该思考的问题。

如何把用户要做的这件事情更好的呈现给用户,反馈给用户以及有哪些信息需要反馈给用户都是你要从交互的角度思考的,这包括过去发生的信息和即将发生的信息,也包括正向反馈和负向反馈。(这种操作是否成功了?这种操作进展到什么程度了?如果这样操作会有什么后果?点击之后会达到什么页面?这里是否可以点击?)


很多概念性的设计很酷,从交互的角度上来看也是因为界面对信息进行了很好的反馈,比如下面的设计就是对登山的信息进行了很直观的反馈。(来自设计设计师anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的环境里面,不同的界面也有不同的外部环境。尽量保证界面在自己产品定义的风格里面,如果有机会还原真实世界的状态也很好。


a.  根据用户制定产品语言

在制定产品语言时,要了解产品的用户人群,使用相对应的用户群体所熟悉的文字语言 图形语言  板式结构  配色方法。要让我们的用户觉得这个产品很符合自己,而不是让一个老大爷去滑滑梯的感觉。一般来讲即便是同一产品,在国内外的产品语言也是有所不同的。

a. 模拟真实环境

产品在一些展示上模仿现实世界的样子,可以让用户快速接受,并感受到真实易懂。不仅仅局限于静态外观的模仿,还包括模拟真实物品的动态效果 声音等 都能给用户良好的使用体验

很多逼真的动效也是来自真实世界的映照。比如下面的可乐瓶的晃动就和真实世界很接近,让用户有很强的代入感。(作品来自设计师dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:为了不让用户进入一个错误的场景或者结果,对于一些特殊操作应该给予撤回重做,让用户能够充分的确定接下来的行为。

a.  返回到原始状态

可以理解为悔棋,即已经发生的行为返回到原始的页面状态,这个条件的设置也应该有一些条件的限制,不能一直无限返回。





自我理解:君子常常言行一致,好的产品也是一样。保持为一个统一的整体,包括产品内部和产品外部,也包括线上和线下。


a.  与竞品保持一致

很多人讲现在的同一类产品的同质化现象严重,其背后也是有一定原因的。相同或相似产品的用户习惯保持一致,即意味着用户需要更少的时间去学习甚至不需要学习。从产品设计上讲,用户使用越方便易用,产品设计的越成功。和相关主流竞品做出比较大差异化设计时候,虽然摆脱了同质化的问题,但是很多常规操作却需要用户重新学习,这样带来的后果很有可能就是用户流失。所以,没有充分的理由,请与竞品保持一致。



b.  请建立一套完整的规范

一套完整的规范包括组件 色彩 间距  版块结构 等。规范可以让你的产品一致性更强,你要让用户能够对你的产品产生一定的规范性印象,当他看到一张页面就能联想到这是什么产品。

undefined


c.  请保持产品迭代的一致性

现在随着互联网市场的不断稳定,很多产品进入了稳定的迭代期。但是在迭代期也应该以保持产品语言 用户使用习惯的一致性为一大重要原则,版本的迭代也应该逐步进行,不要急功近利。尽量保持原有的设计元素一致性,新功能的创新也尽量不要损害原有用户的使用体验。


自我理解:再发生错误之前采取措施来避免。


a. 引导用户,不要让错误出现。

很多app迭代更新之后会有操作指引,目的就是为了让用户学习,减少错误操作。很多引导页也有相类似的功能。


b. 给予提示,尤其是用户在做一些重要操作的时候

一些重要的敏感操作,产品通过二次询问得到用户的确认,




自我理解:能让你的软件产品来记住,就不要让你的用户来记。尽可能的在设计产品的时候,不要让用户去记忆,把用户当傻瓜。

a 记住用户的使用操作记录

这个记录不单单是在某一设备上,一般来讲都是跨设备进行同步。用户在使用的时候不用来回调整,体验感是很强。

 


b  让用户选择信息而不是填写

填写是一件成本极大的事情,很多用户不愿意在这上面花费时间。所以产品在设计的时候要尽量让用户去选,而不是去写。

undefined

c 自动读取

思考产品一些功能的使用场景,有没有自动智能化的需要。即不用问候产品使用者,自动提供解决方案。注意,这里讲的是提供方案,不是解决方案。提供大多数的解决方案,可以节省使用者的交互步骤或者浏览时间等,也是易用性高的表现。

d 提供适量的信息

其实另外一个交互定律法则(以后会讲)其实提到了选择的数量,移动端的选项一般不会超过五个,超过五个用户的头脑就会混乱。所以要考虑信息的摆放位置在哪里,一方面是需求决定的,另一方面也应该控制每一个选项的数量,不要让用户感到焦虑。


自我理解:一般来讲产品的用户群体是多样化,用户的使用熟悉度也是有差别的。要照顾到绝大多数用户群体的使用体验,所谓的高频是每一个用户群体比较常使用。


a.  设置快捷/重复入口

讲产品常用或者主打的功能放在产品容易操作的位置或者重复出现,用户可以高效的完成自己的需求。

一般来讲用户的使用频率越高越要放在操作热区和表面,反之亦然。

b.  用户自定义常用功能

照顾到不同用户对于某些功能的需求不同,对产品的部分功能进行用户自定义化操作,提高用户使用的灵活性。


c.  给用户默认选项

将用户经常使用的选项作为默认,减少用户操作时间,达到灵活高效的目的。像淘宝都会设置默认的收货地址,每次下单不用每次都输入,十分高效。(当然也有翻车的时候)



自我理解:互联网用户阅读产品的一个很重要的特点就是快。即不是来阅读不是来看,而是扫一眼。所以要求页面上的内容能够清晰可见,方便用户快速捕捉到自己喜欢阅读的信息,减少不必要的干扰,简洁高效。

a.  清晰的板块划分

把页面内容的优先级别进行分级,清晰的板块划分将会引导用户操作。还可以将页面的主推内容向用户展示,避免用户分不清重点。


b.  减少视觉噪音

注意页面的主角是谁,在平面设计中也有相同的概念。不要让背景或者装饰哗众取宠,而影响主要信息的传递,视觉设计是来辅助业务表达的。如果核心需求没有传递好,那就会单纯地成为一件艺术品,而不是设计作品。所以在设计过程中,要权衡视觉点,减少不必要的噪音干扰。


c. 严格遵守设计的四大基本原则:亲密  对比  重复   对齐

落实到界面上包括间距 字号 字重 版式节奏 。其实看到看到很多界面做的不精彩不优美,就是基础性的原则就没有完全落实贯彻。这里就不举例,基本所有的设计都要遵守的原则,很重要,很重要,很重要。


undefined


自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。


a.  提供清晰地说明和解决方案

考虑到可能会达到的错误界面。在发生的错误结果上,使用明确清晰的语言告知错误的原因,并给予解决方案。

自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。这一部分其实主要进行一些说明,让用户操作方便,相当于使用说明书。

a.  无需文档

进行新页面的设计尽量直观清晰,符合用户习惯,无需引导即可使用。

b.  一次性提示

改版引导或者新功能引导给予一定的提示

c.  常驻性提示

对于产品的操作性功能或者操作必须注意到的问题,产品需要进行一定说明

d.  帮助文档

用来解释一些常见问题。



文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2022设计作品精选 | 数据可视化

seo达人


展示一:

图片

[png 到 jpg 输出图像]

[优化输出图像]

[优化输出图像]

图片

[优化输出图像]

[优化输出图像]

图片

[优化输出图像]

[优化输出图像]

[png 到 jpg 输出图像]

 

[优化输出图像]

 

 

展示二:

图片

[优化输出图像]

图片

图片

图片

 

 

展示三:

图片

图片

图片

图片

图片

图片

图片

图片

[png 到 jpg 输出图像]

图片

 

 

展示四:

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

 

展示五:

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:黑马家族(公众号)
 
作者:黑马青年
 

转载请注明:学UI网》2022设计作品精选 | 数据可视化

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



超实用的12个UI设计法则,大神都在用!

之晨

想要制作一个漂亮,可用和高效的UI不是一件容易的事情,这不仅需要设计师有一定的审美能力,更需要花费大量的时间,并且在设计的过程中还要不断进行修订和调整,直到自己和你的客户满意。这个过程我自己也曾经感受过很多次。 

今天老王将跟大家分享快速提升UI水平的8个技巧,通过一些易于实践的小技巧来进行简单的视觉调整,从而改善你要创建的视觉效果,希望能为你在设计项目中提供帮助。

10大交互设计原则,大厂都在用

之晨

本文讲述交互设计用的最多的原则——尼尔森十大可用性原则。

手把手教你撰写交互设计文档(保姆级教程)

之晨

前言:为什么要写交互设计文档?交互设计文档有什么用?


第一,交互设计师的交互设计文档就好像UI设计师的PSD文件一样用于保存记录自己的设计思路,但交互设计师负责的任务不仅仅停留在页面当中,还包括产品的需求分析、用户画像、竞品分析、产品数据分析、用户交互逻辑等等..我们都可以写在交互设计文档中做记录,为我们的交互设计提供依据。(其实就是避免开发怼你问你设计依据是啥,你就马上把分析摆他脸上,避免尴尬)


第二点是交互设计师作为产品的上游(一般开发流程是产品经理负责收集需求给予交互设计师进行交互设计,撰写交互设计文档,然后文档评审通过后,UI同学负责UI设计,接着提供前端同学进行界面开发,后端同学则根据交互稿搭建框架和业务逻辑,开发完成后进行测试,反馈测试结果,如此循环,因此交互设计师一般处于产品线的上游阶段),撰写一份标准和规范的交互设计文档是非常重要的,因为我们需要利用交互设计文档去表达我们的设计思路,通过交互文档我们可以让UI同学知道页面需要给用户表达什么情绪,达到怎样的目的,告诉前端同学页面跳转逻辑以及交互模块怎么写,帮助后端同学清晰搭建后台框架与数据库以及产品业务逻辑是怎么样的,最后测试童鞋还会拿着你的交互稿进行单元测试,编写测试用例,所以只有我们先把文档写好了,才能避免后面产品开发出现问题。


第三点也是最重要的一点就是未来我们用于跳槽加薪面试作品。内行看门道,外行看热闹,如果你面试交互设计师的时候还是带着一条长长的JPG或者是网上千篇一律排版的PDF作品集,在面试官眼中显得不入行(或许你会遇到性格好的面试官,毕竟千人千面,面试特别看人),因为专业的交互设计师在平时工作中为了避免干扰UI同学设计,只会使用黑白灰做交互稿,也很少做成一条长长的PNG或JPG,我们可以适当包装作品集,但如果过度了会让人觉得不落地,或许只停留在刚入行阶段,所以在技术面试,我们可以拿着我们的交互设计文档跟面试官叙述产品从需求层面怎样思考完成交互设计的,解决了用户什么痛点,最后取得了什么样的成果,得到了怎样的数据,我相信成功几率会大很多。(PS:用交互设计文档进行面试前请注意把公司机密信息做脱敏处理,避免发生纠纷)


1、交互文档包含什么内容?以及怎样撰写交互文档?


说了那么多,那究竟交互设计文档包含哪些内容?


一般来讲,一个基础、规范的交互设计文档应该包含文档封面、更新文档、设计说明文档、业务流程图、交互原型、垃圾桶等模块,当然了,这些模块也不是永恒不变的,有些是必须要,有些是选择性添加的,至于这些模块有什么功能和怎样进行撰写,这篇文章会逐一分享给大家~


(说明:作者比较习惯使用Axure软件撰写交互设计文档,大家可以根据自身爱好或者公司规定进行选择(例如sketch、figma、PS等等..都是可以的)。这里要引用一句话:软件仅仅是工具,并不能限制我们的思维,好的工具能让我们走得更快但不能使我们走得更远——沃·兹基硕德。


1.1、文档封面(必须)


文档封面就相当于一本书的封面一样,用于记录产品名称、版本号、日期以及文档负责人(这样开发童鞋就能精准找到你进行撕X),只要能展示以上信息,其他信息(例如产品经理是谁等..)可以自行添加。


1.2、更新日志(必须)


以前我都习惯把更新日志放到产品文档后面,但是随着工作时间变久,我发现开发童鞋在SVN上打开设计文档后第一时间就是查看更新日志,所以后来把这一页提了上来。(是的,设计文档也是需要跟产品一样不断优化迭代的)


更新日志主要用于记录产品迭代修改的内容,让开发同学快速了解这次迭代修改了什么内容,他需要做哪些工作。我的更新日志特别简单,就只有日期、变更内容、所在页面以及备注四个字段,这里唯一注意的是,日期必须是最新修改的内容放在上面,以前的日期在下面,很多同学每次迭代的时候会在下面列进行内容添加,这样开发同学每次都必须滚到最下面查看信息,大哥,你是交互设计师,专业一点好吗。


1.3、产品项目背景(必须)


产品项目背景是一个项目的核心关键,告诉所有的团队成员我们要做一个什么样的产品,需要创造什么样的价值,就好比我们写作文时的中心句,时刻提醒着我们要不忘初心,为团队成员开发项目指明方向。


前段时间有个同学来问我,他们本来是刚开始是做校园教育系统的,但是随着产品慢慢迭代,功能逐渐强大了,最近老板希望在系统中加上财务功能,本来用户学习成本就高,如果再加上去会不会适得其反?虽然我不知道那位同学的老板产品战略是啥,背后是怎样思考的,但是在我看来这样的行为就不能是不忘初心,这顶多能算不忘出薪吧。(拒绝谐音梗从我做起)


好了,至于里面产品背景、产品目标以及定位的内容应该如何撰写?对,我抄的。一般情况下,这些内容我们都能够在项目立项文档或者在招投标书上就能找到,我们不用亲自写(但可以加以设计),再不行也能找到产品经理去了解。


或者你会说,小公司既没有立项、也没有招投标书,产品经理也是你,那该怎么办?那么你就得发挥出自己当年高考的作文水平,积极了解清楚产品背景定位,努力完成这一部分,因为信息的传递是有消耗性的,只有我们作为产品的上游做好了,才能为团队成员后面的努力提供方向。



1.4、产品需求(必须)


产品需求列表用于记录产品需要做哪些【功能点】,这些功能点我们一般能在产品经理或者项目经理上获得,我们收集需求后需要对其按照重要程度P0、P1、P2等级进行分类,我分类的原则是KANO法则(不知道的同学可以百度),P0等级是非做不可的需求,例如像微信的聊天,淘宝的支付功能等,P1是锦上添花的需求,时间紧迫的话可以下次再做的,例如微信的语音、视频聊天等..,排到最后Pn就是一些不必要可做可不做,就算做了也没太大影响的功能,就可以与领导层商讨是否确认要做。(例如炸屎,你们现在还有人炸屎吗?什么?炸屎你都不知道?那当我没说)


1.5、用户画像(可选)


所谓知己知彼百战不殆,通过用户画像我们可以快速了解产品目标用户群体特征,分析目标用户群体的期望、需求、动机等,再根据用户场景去进行设计,有了用户画像的支撑,能避免我们在设计过程中出现一些不必要的因素,例如我们目标用户是中老年人的话,那么按钮、字体就应该适当的放大、排版简单明了,而针对青少年就可以偏个性化风格设计。


当然,如果是小公司的话可能没有那么多的资源去做用户的调研,在这里分享一下我当年在创业公司经常使用的一种快速获取用户画像的方法,既快速又特别专业。


这里需要借助一个网站:艾瑞数据(https://index.iresearch.com.cn),打开后选择自己产品的类型(例如学习教育类),网站会把该类型的产品按照用户数量从高到低展示给你,然后我们选择一个差不多的竞品点击去查看他们的用户特征,最后Ctrl C+Ctrl V到我们的文档中,完成。


1.6、竞品分析(可选)


竞品分析相信大家都特别熟悉,我之前的文章也教过大家怎么进行详细的竞品分析,这里就不细讲了,虽然在交互文档中竞品分析可做可不做,但是在产品初期阶段我们如果认真做竞品分析的话能够快速了解产品业务、熟悉用户的使用习惯,同时当我们在做交互原型的时候能提供快速借(cao)鉴(xi),因此有条件的同学还是建议尽量做一下。


1.7、数据分析(可选)


数据分析时交互设计师必不可少的一项技能,也是验证设计成果的重要因素。如果缺少了数据分析而单凭个人主观因素的话,我们难以说明设计效果的好坏,毕竟现实中会出现各种意想不到的情况。


 所谓“无对比,不分析”,一般数据分析都是通过数值进行对比,去查看数据相对是上升、下降、还是持平,是否跟当初设计预期的一样,对于初期的产品会更关注产品的一些DAU(日活数)、GMV(成交总额)、以及支付人数等,因为这些数据的增减是直接影响到整个产品的存活,如果产品的DAU不断下降的话,那你就要马上查找原因,及时调整,避免恶性循环。


一般情况下,像日活数那些简单的数据可以直接问后台同学就能获得,而用户某些环节的存活率、转化率等就需要利用【数据埋点】,市场上也有很多第三方做数据埋点的,例如神策数据、Growing IO等,这里就不展开说了,但是面试的时候你能说出这些就会显得很专业。


1.8、信息架构(必须)


信息架构属于用户体验的结构层,就像产品的骨架一样,而信息架构设计就是对产品信息进行构架、归类的设计,信息架构能够防止我们对产品功能点遗漏,同时也可以通过产品大体的信息架构观察出产品设计是否合理。


一般来说(干货来了),产品架构分支可以分为度和层,而好产品的信息架构在广度和层度都是恰到好处,下面我举两个反例大家就懂了:


  1.产品架构的广度太广(不懂的看下图):信息架构的广度太广意味着页面的承载信息量特别的多,没有侧重点,这样用户点进页面后会思考很久而不知所措,最经典的就是某某宝和某同城,新用户进入到首页真的模棱两可。


    2.产品架构的层太深:信息架构的层太深会导致另外一个问题就是页面非常的多,要找到一些功能的话操作非常的困难,最常见的就是某些视频的取消会员流程(包括当年的ofo退费),你们是不是为了退费或者取消某APP会员百度过很多次?(反过来思考,如果某些功能你不想被用户发现,但是又必不可少的话应如何设计,你懂得)


1.9、业务流程图(可选)


绘制业务流程图的目的就是:梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务,直接做设计,但是作为交互设计师了解产品业务是非常重要的,因为不了解业务你就无法完成交互设计,优化业务场景。


举个例子:在教育考试系统中一般流程是:教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束,看这一些列的流程,因为关联特别多,如果对业务不熟悉的话设计起来会非常的不便,如果前期因为业务流程不熟悉而设计出错误的交互稿的话,后面就会特别麻烦。


那么如何去绘制完整的业务流程:


  1. 如果你的产品经理比较专业的话,可能会直接给你一个现成的业务流程图,那样就能省事很多。

  2. 要是没有产品经理的话,最直接的就是问用户,这里介绍我最常用的方法就是“一听二问三确认”。一听:先听客户代表或者业务方的介绍。听得过程中,不打断对方,以最简单的方式勾出主体脉络,即基本要素中的角色、活动、协作关系梳理出即可。二问:完成上一步后,就可以进行提问了。主要是沿着流程进行发问,重点放在分支、产物关系上。看看是否存在分支的情况,各协作之间是否有交付物。一边问,一边修正。三确认:最后一步就是自己讲一遍流程,和客户代表或者业务专家进行最后的确认。


1.10、交互原型(必须)


几乎可以说,上面所有的东西都是为了完成交互原型做铺垫的,我相信对大家来讲交互原型都非常熟悉,但是给大家分享几个经常犯错的点。


【1】页面尽量只采用黑白灰配色,避免干扰UI同学设计。这是大家经常犯错的一个点,毕竟很多同学以前是UI出身,做交互稿时也顺便配配色,这样会非常影响UI同学设计的(不在其位不谋其政,你做UI的时候也不希望有人在旁边指指点点吧),所以我们做交互稿时只采用黑白灰就够了,灰度大小就代表信息的重要程度,简洁规范即可。


【2】页面的跳转用连线表示其实就很方便了,真正厉害的人不会到处炫技。有些同学在交互稿上各种跳转、动态面板、中继器等花里胡哨一大堆,这样开发同学看起来特别的难受,所以很多时候用连线的方式表示往往是最简单明了的。


【3】如果涉及到多端设计(IOS、Andriod、PC端)的话,除非产品非常庞大,不然就放在同一个设计文档中,避免以后评审还要弄多个文件。


【4】创建一个适合自己的组件库,在日常设计中,80%的控件是可以重复利用的,做一个合适的组件库能节省大量时间(我整理了工作多年的B端以及移动端常用的组件,你们需要也可以分享给你们)。


1.11、垃圾桶(可选)


做交互文档时垃圾桶就相当于后悔药,因为一些页面如果删掉保存后是不能还原了的,因此在改稿时如果一些暂时不需要的页面可以丢到垃圾桶中,避免到最后用回以前的方案时重新再做浪费时间。


最后总结


好啦,文章分享的内容比较多,但是并不是每一部分都非做不可,文档也并不是绝对的规范,每一家公司交互设计师的职责可能都不太相同,所以大家可以根据自身需求因地制宜,曾经有人说过,设计的本质并不是把简单的事情做复杂,而是把复杂的事情做简单,所以我希望有一天你们能把交互设计文档做到很简单,而把产品做得非常好,然后跟我分享经验,这才是我写文章的初心。


文章来源:站酷 作者:北沐而川

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


移动端交互控件规范总结:弹窗(二)

之晨

以下内容主要以 iOS 官方设计指南和网络上的相关文章为参考,但同时也包含个人理解与思考,并非绝对、唯一的标准。

交互设计|产品细节体验笔记

之晨

随着互联网行业的发展,每一个软件背后都有一个优秀的项目团队和公司,腾讯或是阿里巴巴,他们旗下的APP我们也耳熟能详,但是关于每个软件的细节之处我们应该大多数都没有关注到,每个产品的人性化设计为我们增加了方面,想要了解和学习的崽崽们可以看看哦!

交互体验思考|产品体验

之晨


本文大纲

一、好的收藏体验这么做

二、互动信息隐私的保护

三、确定按钮放左边or右边?

四、手机实体键分布的合理性

五、静音键存在的必要性

六、经典的旋钮式交互



表单篇 | 掌握基本原则,帮你设计出更优质的表单!

之晨

表单是UI设计中很常见的元素,不管是PC端还是移动端,表单几乎是无法规避的UI控件,用户可以通过表单完成线上购物、信息交换、文章订阅等任务,使用范畴极为广泛且牵扯到方方面面。

2021-2022 设计趋势 · 数字未来篇

seo达人


背景

回顾互联网发展历程,从桌面端拨号上网到高速5G的移动互联网,随时随地互联互通对现实生活的影响力也逐步提升,虚拟与现实的距离也逐渐缩小。未来数字世界在沉浸感、参与度、永续性等方面对体验提出了更高的要求。本文将从虚拟世界的视角,对设计挑战和机遇进行总结和预测。

概述

电影《头号玩家》里的“绿洲”描绘了一个庞大的虚拟数字世界,在这里人们用数字化身来控制、并相互竞争以提高自己的地位,这被视为未来虚拟世界该有的样子。不过目前落地概念是由Roblox在招股书里描述的8个关键词:身份,朋友,沉浸感,多样性,低延迟,随地,经济,文明。我们尝试把这8个词提炼5个虚拟世界的设计趋势,分别展开论述。

2021-2022 设计趋势ISUX报告·数字未来篇

一、虚拟世界人物:数字替身(Avatar)设计

数字替身(avatar)是用户在虚拟世界中的化身。它可以代表用户的位置方向、运动状态和姿势,是用户在虚拟世界的交互载体。avatar的设计有追求品牌塑造和技术突破的趋势。

1.1 形象多样化,追求品牌风格化

在avatar形象设计方面,当前大火的Roblox和Horizon worlds的设计非常有特点。Roblox基于多面体建模,显得不够精致。而Horizon worlds的人物直接没有下半身,一群上半身人物在空中悬浮游走。但从另一个角度来讲,这也许正是他们品牌风格的记忆点。

2021-2022 设计趋势ISUX报告·数字未来篇

Roblox的avatar形象

2021-2022 设计趋势ISUX报告·数字未来篇

Horizon worlds的avatar形象还有一些时尚品牌借助avatar穿戴自己的产品,以次来凸显品牌调性。著名奢侈品牌Gucci就与虚拟形象科技公司 Genies 合作,允许用户创建自己的个性化虚拟形象进行穿搭售卖。

2021-2022 设计趋势ISUX报告·数字未来篇

Avatar的不同呈现形态的根据“卡通感-写实感”、“儿童化-成人化”这两组维度,可以得到视觉特征定位图。其中第四象限是虚拟世界avatar形象超写实化的一个重要的发展方向。

2021-2022 设计趋势ISUX报告·数字未来篇

1.2 从指尖驱动到自然驱动

Avatar是用户在虚拟世界的替身,长久以来玩家依赖于“指尖”去控制自己avatar,比如前后左右移动方向,跑跳等动作。这需要一定的学习和转化成成本,这对用户的沉浸感带来一定的损耗。苹果Memoji是对表情AR技术的应用,TrueDepth相机硬件可以通过你的脸驱动Memoji的嘴巴、眼睛、头部和舌头。

你可以在FaceTime通话中与Memoji重叠,Memoji的嘴唇也能够与你的声音同步。统计表明,用户之间的信息或FaceTime对话越来越多的由文本或视频转向由虚拟avatar进行。

2021-2022 设计趋势ISUX报告·数字未来篇

Memoji脸部驱动的虚拟头套除了avatar的面部表情外,整个肢体也可以被现实人体通过动作捕捉技术来驱动。近期,美国广播公司Fox推出了全球首档虚拟人物歌唱比赛《Alter Ego》。节目中的虚拟形象可以设定不同的肤色、身体体型和性别。参赛选手可以自由设定他们认为最能代表自己内在,或最能引起观众注意的虚拟形象。然后使用动作捕捉技术,由自己的身体驱动虚拟形象进行表演。‍

2021-2022 设计趋势ISUX报告·数字未来篇

《Alter Ego》全身驱动虚拟‍形象在虚拟世界中,让每个人都能够拥有理想中的Avatar是未来的一种时尚,也是作为设计师的机会。

1.3 数字人的高仿真高智能趋势

作为虚拟世界里的NPC,数字人是智能化的独立avatar。在“外貌”方面数字人也会逐渐往高写实的方向发展。而在“精神”方面,依托AI机器学习算法和大数据,数字人的对话质量也与真人相差无几。服务应用的数字客服、游戏中的超级NPC,都可以以假乱真,表现甚至优于真人。这对设计师的智能化交互设计能力提出了更高的要求。

2021-2022 设计趋势ISUX报告·数字未来篇

UNEEQ公司基于知识计算和语音合成提供的数字人对话产品

二、虚拟世界空间:从界面设计到“界体”设计

在虚拟世界的概念下,界面(interface)设计师讲逐渐升级为“界体“(interbody)设计师。设计师的工作效率和发挥空间将会被大大扩展。

2.1 空间3D建模更加普及

虚拟世界基于VR/AR等可穿戴设备,可以实现整个身体与“界体”的交互。这将会大大简化建模步骤和时间成本,帮助设计师在沉浸式的体验中完成设计构想,释放创造力。而目前主流的通过手指对电子屏幕界面进行点触的交互模式将会被取代。皇家艺术学院研发推出的Gravity Sketch是一款支持在3D空间中建模型的工具。

沉浸式VR体验,让设计师可以将自己提前以客户的视角在虚拟场景中按真实的比例直观感受并调整设计。这个工具已经应用到了汽车和工业设计、服装设计、建筑设计等行业。借助Gravity Sketch,福特汽车公司已将汽车内外饰设计阶段的概念开发时间从四个月缩短至仅20小时。

2021-2022 设计趋势ISUX报告·数字未来篇

△福特汽车用Gravity Sketch设计汽车

2021-2022 设计趋势ISUX报告·数字未来篇

服装设计的运用

2021-2022 设计趋势ISUX报告·数字未来篇

Gravity Sketch在建筑上的运用使用VR Gravity Sketch主要优点之一,就是能够帮助设计师更好地理解比例。同时Gravity Sketch在灵活性方面具有非常好的潜力,弥补了2D绘制和3D建模之间的空白。等技术更成熟些,相信Gravity Sketch 会有更大的可能。

2.2 数字孪生向高等级发展

虚拟世界不仅仅局限于在形态和环境方面的复刻。它应当是平行于真实世界的互联互通的“平行宇宙”。数字孪生通过为现实的建筑物在数字世界里锚定虚拟建筑实现互联互通。数字孪生也像自动驾驶一样分为几个等级。

终极形态的数字孪生,是真正意义上的平行世界。目前,数字孪生的进展正在向更高等级发展。最近发布的第四代万达广场“慧云4.0”介绍到:数字化运维管理平台,融合了BIM、数字孪生、Iot、大数据、人工智能、5G等技术,实现了对商业广场消费场景、运维服务和资产的管理。

2021-2022 设计趋势ISUX报告·数字未来篇

举一个温度报警的例子:传感器发现故障,收集信息并发出警报,同步反馈至管理平台。管理平台定位设备位置、显示影响区域及对应的环境参数,同步现场视频,显示设备连接管网。操作人员,处理报警信息,下发维修工单。现场维修人员收到工单信息,可通过电脑、手机、平板等方式进行远程查看及操控设备,实现快速检修。

3.3 数字空间的智能化发展趋势

虚拟世界的空间也会在数字孪生的基础上朝着智能化的方向发展,就像数字人可以完成自我进化和成长一样,这就是数字空间的智能化发展趋势。百度AIR智能交通系统定位于路端的“自动驾驶系统”。

跟传统的道路信息化设备强调软硬件结合不同,这是一套可在数据驱动下自学习进化的系统,应用L4级自动驾驶级别的感知预测规划技术,让路端交通基础设施实现数字化、智能化和网联化升级。在AIR智能道路系统加持下,自动驾驶将更快落地。

2021-2022 设计趋势ISUX报告·数字未来篇

百度AIR智能交通系统

三、虚拟世界交互方式:更丰富和自然

随着交互设计的发展,虚拟世界中中的交互方式会越来越趋向丰富和自然。就像点触交互逐渐替代按键交互一样,眼控、语音、手势等自然交互也一定会逐渐替代点触交互成为主流。

3.1眼控交互:更人性、更直觉

简单来讲,眼控交互开发的原理就是在开发引擎中,将视线范围设置为一条射线状或圆锥状物体,和VR/AR中的各种物体进行碰撞检测,当程序一旦检测到碰撞,则视为用户的视线落到了这个物体上,由此进行眼控交互。

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的环境中相比于其他交互来说,眼球追踪门槛低无需复杂外设,受环境影响小,应用场景几乎无限制,更为重要的是眼控交互非常人性化,眼动交互非常符合人的直觉。比如在应用中想要隐藏菜单功能,需要通过其他的交互方式刻意发出指令隐藏和调用菜单,而眼控交互可以非常自然,当注视点偏离,菜单会自动隐藏。

2021-2022 设计趋势ISUX报告·数字未来篇

又比如在射击游戏中,可以体验真实的眼球锁定目标进行打击的快感。

2021-2022 设计趋势ISUX报告·数字未来篇

尽管目前存在实时渲染、眩晕、米达斯接触等等技术问题的限制,但随着软硬件技术的升级迭代,用户体验正在逐渐完善,眼控交互一定是未来的交互趋势。

3.2 语音交互:更自然、更便捷

语音交互作为更趋近于人与人之间最自然的交流方式,近些年有许多发展的突破点。在虚拟世界发展主线上,语音交互趋向更自然、更人性化、更个性化。从GUI到VUI,不依赖触摸屏的输入,出现无导航、无按钮、无菜单界面。

过去反人类的一些沟通方式慢慢被“调教”。此外,多人会话场景下的技术方案日渐增多。Google的智能语音助手可实现连续对话,可以打电话给饭店或理发店等商家帮你预约,目前,Google Duplex可以跨app完成帮你租车、回复消息、找照片分享给好友、写邮件等一系列任务。

2021-2022 设计趋势ISUX报告·数字未来篇

Google智能语音助手语音识别可让你感觉自己仿佛就是故事的一部分。能够与内容进行真实的对话将会大大地提升沉浸感。在 VR 领域内,语音交互更可能替代现有固化的 UI 界面。只需要通过简单的语音交流就能完成繁复的操作,无需再去点击屏幕上放置好的浮动界面图标,这样的设计或许才是未来虚拟世界玩家所需要的。

2021-2022 设计趋势ISUX报告·数字未来篇

《Starship Commander》语音VR游戏

3.3 手势交互:更自由、更灵活

借助能够感知深度信息的摄像头,手机可以更好地读懂用户的手势语言。2019年国内外手机厂商的发布大会上,LG手机G8 ThinQ以及华为发布Mate30系列推出的隔空手势,可实现一些简单的诸如滑动、切歌、截屏等效果。

2021-2022 设计趋势ISUX报告·数字未来篇

在VR应用中,目前还需要手柄设备进行控制交互。但就像触屏手机终将取代按键手机一样,VR手势交互取代手柄按键交互将成为未来趋势。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

下面是微软hololens尝试的一些可以更自然地与我们日常生活中使用的某些手势匹配的命令:

  • 选择:通过用食指指向,捏以创建光线,将鼠标悬停在上面,将手/手指移到形状中。
  • 确认:通过竖起大拇指,确定的手势,点头。
  • 取消:拇指向下,通过摇动否定,交叉双手。
  • 删除:通过丢弃,轻弹,挥舞。

未来虚拟世界的人机交互方式一定是多种自然交互的混合,我们称之为“多模交互”。用户可以通过声音、肢体语言、信息载体(文字、图片、音频、视频)、环境等多个通道与计算机进行交流。混合 GUI、VUI、手势、体感等多种交互方式,更加自然和充分的模拟人与人之间的交互方式。

四、虚拟世界感知体验:更临场和沉浸

在现实世界中,人类通过视觉、听觉、触觉、嗅觉和味觉感知真实的世界。同样在虚拟世界中,要做到沉浸感和临场感需要在感知层面缩小物理世界和虚拟世界之间的差距。五种感官中,视觉、听觉和触觉所占比例最大,虚拟世界的虚拟体验也主要集中在前三种。

2021-2022 设计趋势ISUX报告·数字未来篇

人类感知外界信息的途径

4.1 视觉:裸眼真实面对面

虚拟世界在感知层面最先要突破的就是视觉层面的极度真实感,毕竟这占据着人类信息感知83%的压倒性比例。谷歌Starline是一个软硬件结合的技术项目,目的是实现远方的人们之间的面对面交流。Starline使用摄像头捕获用户,进行虚拟世界的三维重建。通过实时数据压缩和传输,最后使用一种光场显示系统,让用户可以在裸眼状态下感受面对面的真实感。

2021-2022 设计趋势ISUX报告·数字未来篇

4.2 听觉:置身空间环绕声场

虚拟世界的临场感仅靠视觉是远远不够的。为了实现更逼真的效果,还原人耳的听觉效果、塑造360度的空间音频体验可以被认为是还原临场的关键。声音的临场感来源于真实世界的听觉环境:我们时刻都被声音笼罩,无论我们是否有意识地倾听。这种无处不在的声音能够提供重要的位置和空间线索,对于声音的感知能够提供给我们在特定情况下的位置信息。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

在虚拟世界的架构中,声音能够通过空间音效来呈现,以还原现实的声音效果,声音融入故事情节,并将虚拟空间从平面感扩展到三维的立体感。3D的空间音频创造出比单独的视觉效果更广阔的认知领域,让用户完全沉浸在音效空间之中。

举个例子,当你在雷雨中,传统的游戏音效让你仅仅感受到雷声在你身边,但在虚拟世界世界里,雷声从天上传来,雨声喧嚣不绝,你还能够听到雨滴落在地面和头顶的声音。这样逼真的音效有助于让游戏玩家沉浸在更熟悉的情景中。

4.3 触觉:在空气中感受触摸

在PC和手机已经非常普遍的现在,人们感受过游戏中的震动特效,或者手机静音时的嗡嗡声。但这些触觉震动对虚拟世界来说还过于简单,无法复制触摸真实世界对象并与之交互的丰富感觉。

因此想要将虚拟空间打造为“现实环境”,触觉也是关键的感官之一。我们无时无刻不在触摸物品,而虚拟世界里的触觉反馈是一种力的反馈,能够将虚拟接触转换为物理的感知。这是一种特殊的触觉反馈形式,通过技术,简单的穿戴设备就可以让身体感受到不同层次的触觉。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

目前,可用于各种应用的薄型触觉手套和热显示器已经逐渐问世。即由硅胶和电极制成的柔软、灵活的人造皮肤,通过自我监控以提供准确的信息,使用微电流技术将逼真的触摸感受反馈给用户。这种手套能够通过上百个力反馈点来感受虚拟物体的形状、纹理和运动、尺寸、重量、冲击力,甚至温度。

五、虚拟世界产品玩法延伸

虚拟世界奉行“开放共创”的理念,并受到加密技术的支持。这在产品玩法和数字资产领域也带来新的发展方向,值得设计师关注。

5.1 游戏和社交更高度的融合

虚拟世界产品领域,游戏和社交是主要的突破口。社交的内容是游戏,游戏是特定情境内的社交。因此,社交游戏化是将社交通过游戏的方式来展现,让用户在玩游戏的过程中进行社交。

而社交游戏化则是通过将游戏的机制融入社交系统中,从而让用户在社交的过程中,有游戏般的体验。游戏和社交的的高度融合是未来虚拟世界产品发展的重要趋势。以《Roblox》为代表的开放世界游戏与传统的MMO(大型多人在线游戏)相比,最大的不同点在于更加开放的社交生态。

作为游戏UGC创作平台,在这里玩家可以开发自己的游戏,也可以玩别人开发的游戏建立了稳定的虚拟世界社交关系。以人气较高的《Adopt Me!》为例。《Adopt Me!》的玩法是玩家扮演家长或者孩子,选择收养孩子或是被收养,整体玩下来形式类似过家家。玩家可以购买手推车、妆发等各式各样的付费道具装扮自己。这是一种更加沉浸和开放的社交模式。

2021-2022 设计趋势ISUX报告·数字未来篇

微软旗下公司开发的《我的世界》是一款和《Roblox》画风非常相似的开放世界游戏。2020年加州大学伯克利分校还在《我的世界》里举行了虚拟的毕业典礼,包含了现实流程中的校长致辞、学位授予、抛礼帽等。

2021-2022 设计趋势ISUX报告·数字未来篇

年轻新世代更青睐于轻松、趣味娱乐的社交类游戏,通过小游戏+语音互动等方式来制造丰富和封闭的娱乐场景,释放社交压力的同时增加趣味性和沉浸感。

2021-2022 设计趋势ISUX报告·数字未来篇

5.2 加密潮牌和艺术收藏崛起

和元宇宙一起走红的还有NFT。NFT全称为非同质化代币,简单来说,他具有唯一性和不可拆分性,这使得它可以和现实世界中的一些商品绑定。NFT 流动性高可随时交易以及鉴别,独一无二的艺术创作使其具备收藏属性,加密处理使得其难以复制仿造,最终成就了它的稀缺和价值。

前不久,Nike 宣布收购了仅仅成立两年的虚拟运动品牌 RTFKT。RTFKT 这个名字因为与英文「artifact(人造物)」发音相似而来,同时这个名字也代表着其品牌理念。有人这样评价 RTFKT:如果在你小的时候曾想拥有一双 AirJordan 的话,那么当你的孩子出生他会想要一双 RTFKT。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

无聊猿猴被很多 NFT 玩家认为是在 CryptoPunk 之后最成功的 NFT 收藏品项目,甚至部分用户认为它比 CryptoPunk 还要成功。无聊猿游艇俱乐部(Bored Ape Yacht Club)简称BAYC,是一个基于以太坊的NFT集合,包含10,000只独特的无聊猿(Bored Apes)。每只无聊猿都有一系列特征,这些特征由170多个特征以编程方式生成,包括表情、服装、头饰等。

2021-2022 设计趋势ISUX报告·数字未来篇

前不久,adidas 三叶草宣布与 Bored Ape、The Sandbox、Coinbase 合作,正式进军“元宇宙”,加入 NFT 世界!

2021-2022 设计趋势ISUX报告·数字未来篇

几周前虚拟艺术创作团体RTFKT Studios 与村上隆合作推出的「cloneX」系列发售。

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

2021-2022 设计趋势ISUX报告·数字未来篇

5.3 设计版权得到更好的保护和增值

加密艺术家和设计师可以利用NFT创造出独一无二的数字艺术品,助力设计版权增值。鹅厂23周年,腾讯公司为员工发放了 23 周年纪念版NFT“数字藏品”,由腾讯旗下NFT交易平台「幻核」团队设计发行,腾讯旗下联盟链“至信链”提供链上存证。

该系列NFT以QQ企鹅形象为基础,进行了IP衍化,每一个形象都各不相同,每只QQ企鹅共有6个自定义部分,每个部位随机展现不同元素并组合成独有形象,共发行72000枚。其中有1000枚彩蛋款特殊造型“致敬”名人:李小龙、卓别林、诸葛亮、牛顿、爱因斯坦等等。

2021-2022 设计趋势ISUX报告·数字未来篇

近日,京东也正式上线「灵稀」数字藏品交易平台,该平台所有数字藏品将由京东云提供的区块链技术服务京东智臻链进行唯一标识。目前国内布局数字藏品交易平台的科技巨头已经有三家:蚂蚁旗下的「鲸探」、京东的「灵稀」以及腾讯旗下的「幻核」。除了后者是独立APP,前两者均为小程序。

2021-2022 设计趋势ISUX报告·数字未来篇

六、总结

虚拟世界时代将是一个以“设计”驱动的时代,设计师们将成为虚拟世界里的造梦师。面对虚拟世界的机会和挑战,设计师责无旁贷。正如《人类简史》提到过的,“想象”是人类能一步步发展到今天的关键。我们无法确定未来世界的具体样貌,亦无法确定虚拟世界是否会到来,但虚拟世界的丰富将是必然,未来亦会有更多的设计师参与建设。

 

作者:腾讯ISUX,微信公众号: 腾讯ISUX

本文由 @ 腾讯ISUX 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档