欢迎来到ag视讯-ag视讯官网

新闻中心

当前位置:首页 > 新闻中心

ag视讯|怎样把复杂逻辑与信息,转化为简约的界面体验?

2021/02/23 16:15:27  浏览: 211次 来源:网络整理 作者:佚名

广告信息视觉层级梳理

交互设计师的工作具体是哪些?这里我通过实例的方法给你们具体讲讲设计一个产品的工作流程,怎样将复杂的逻辑问题转换为简单易懂的界面语言。

交互设计师通常收到的是一份较为详尽的思维导图,其中包括功能模块、功能点以及一些功能场景的详细说明,其中都会涉及一些程序实现方面的后台逻辑。把这种复杂的文字信息以界面语言的形式呈现在用户的眼前是一个设计师的基本素养,下面我就通过实例讲讲如何有效地把思维脑图和后台逻辑转化为界面语言。

首先阐明一下哪些是界面语言,界面语言是人机交流交互的介质,它可以帮助人们从形象的界面信息中组织逻辑,完成与界面的交互,最终达到使用目的。

好的界面语言可以节约用户读取信息和学习的过程,就好似试题,复杂繁琐的抒发会隐藏好多关键的信息因而欺骗考生降低难度,反之则简单易懂。而设计师的工作就是把用户当作小白考生,呈现给用户最简单最易懂的信息和操作路径,从而减短用户的思索时间。

下面我将用一个群管软件的“群发功能”作为实例详尽述说如何用简约的界面语言抒发复杂的产品逻辑。首先我给你们探讨一下群发功能的背景:一般情况下社群的运营者须要在社群和好友圈内散播一些信息,例如广告、行业信息、群公告等等,由于群和好友的数目较为庞大,逐条操作工作效率偏低,因此须要一个可以批量操作的功能模块帮助她们实现目的。

根据用户使用场景总结群发的流程主要分为四大大模块:筛选对象流程、编辑流程、发送流程、历史记录。并且四个模块须要产生闭环,例如历史记录可以再度编辑和发送,防止用户漏发和错发。除了及时群发的需求用户对定时群发的需求也太急切,定时群发可以便捷用户在非工作时间也能完成信息的及时推送。

用户流程梳理

首先我们收集用户的使用需求,归纳用户操作场景:

下面是经过用户使用场景研究后的流程图:

广告信息视觉层级梳理

分析用户的行为

由于场景较多,操作分支比较复杂,所以在设计过程中一定要注意剖析用户的行为操作,将用户行为分层,为接下来的界面设计做打算。

核心行为:我们把最主要的用户使用场景首先剥离下来,例如群发消息的主流程:选择对象创建内容开始发送;了解行为:针对核心行为的功能补充,例如在发送进程中的操作行为和发送完成后的记录查看等等;补充行为:主要是一些意外的操作场景广告信息视觉层级梳理,例如用户操作失误或则发生程序错误的补救流程,类似前面的场景五、六。

通过以上的那些剖析,交互文档的输出就须要清晰的标明出层级,哪些须要重要展示,哪些信息可以弱化。交互稿可以通过颜色和区块的界定来展示页面的信息层级。这里值得注意的是:我们的主流程要防止多次跳转和弹窗的使用,这样会导致用户在复杂路径中迷失;也须要防止页面主次不清,信息在页面内大量堆叠。

页面布局1、建立视觉层级的方式

好的视觉层级会帮助用户提升获取和理解信息的效率,一般来说会从以下几个元素来表现:

1)位置

一般情况下,人眼对左上和中部的观察最佳,依次是右上、左下和右下,当然这也与书写习惯和文化诱因有关。除此以外,大多数人的耳朵沿水平方向联通愈发快速和不易疲劳广告信息视觉层级梳理,因此左右关注度的差异要大于上下关注度的差异。

如果设计师想要彰显并列关系的时侯,左右排列会更佳,而想要拉开差别,上下排列更能突出。当然这也要按照实际情况来思忖,例如信息过长过分复杂都会采用上下述表的方式,而同级并列的重要功能操作多数采用纵向排列。

另外,在上下关系中,用户会优先关注下部内容,例如网页设计中首屏的信息会比第二、三屏层级要高,所以在功能模块的布局中,同级的功能的尽量采用纵向排列的方法。

就下边两个模块的布局形式,第二种布局用户会不自觉觉得上面两三个功能tab愈发重要,越往下的功能越次要。

广告信息视觉层级梳理

2)大小

重要的元素须要更大,可以通过拉开大小差别的手法突出重点。例如下边的QQ音乐的界面设计,使用图片的大小界定来抢劫用户的视线,从而达到视觉层级的界定。

广告信息视觉层级梳理

3)距离

这里不得不提格式塔理论,也可以简单理解为接近性原则:

人们在感知复杂的对象的时侯,会有意识或则无意识地将接近的物体列入到一个有组织的系统当中,而不是简单的视作为对象的集合,这是格式塔原理的基础。

格式塔原理会适用到不同层次的认知当中,有的是显性的,有的则是隐性的,但是最有趣的是可视化的部份,也就是设计师利用这些原理所创造下来的各类设计。可以看下边右侧的图片,我们会十分自然的将元素在视觉上做了分组,这就是接近性原则的魅力。

通过研究和验证,接近性原则中距离的接近,比起色调和形状的近似,更容易被人所认知,下侧下图就挺好的认证了这一观点。合理运用接近性原则才能使用户更轻松地获取信息,感知内容。很多时侯,用户并没有打算好耗费时间来学习复杂的界面,可以快速被感知和辨识的信息,能更好的留住用户。

广告信息视觉层级梳理

4)色彩

色彩在交互设计中应用较少,大都会采用灰色系的疏密来表现层级,然后采用一个彩色系来突出重要功能按键。交互设计师对色调的应用只须要达到界面层级清晰的目的,过于花哨的色调反倒会干扰逻辑的抒发,也会欺骗UI设计师的认知。

2、建立视觉层级的实例应用

回到此次的设计实例“群发功能”来聊聊,在对用户行为做了层级界定后,我们可以开始着手步入页面布局,除了要运用一些理论技巧以外,我们还须要进行一些实际场景的深入剖析。通过以上用户流程的梳理,我大致将页面分为以下三个区块:选择对象县、编辑消息组县和群发记录县。我在页面视觉上做了层级界定:

1)一级信息吸引用户:假设用户只会在当前页面逗留较短的时间,一级页面就必须少而精,能够使用户快速理解页面信息,在设计上就须要重点展示该模块的主流程功能;

群发模块的一级信息就是引导用户完成核心行为:选择对象创建内容开始发送

这是一个较长的操作流程,并且并没有太强的步骤界定,例如用户可以先选择发送对象也可以先创建要发送的内容,设计师要做的是有效地通过界面语言引导用户完成操作,却也不能限制用户的操作习惯和行为,最优的界面布局是在做到清晰层级的界定的前提下支持多种操作场景。下面是我针对群发主流程的界面设计:

广告信息视觉层级梳理

2)二级信息补充理解:针对一级信息进行解释,提炼精华内容,帮助用户在尽量短时间内理解信息;

群发模块的群发记录和相关操作可以在界面上相对弱化,只有当用户在特定的场景下才能成为视觉焦点。例如可以分别查看发送中的任务、定时任务和发送完成的记录,并且针对性的进行操作。

另注:当多个发送任务在排队时,用户在浏览后会忽视正在发送的任务,从而对排队中的任务形成蒙蔽,这里我将正在发送的任务实时置顶,视觉上的焦点会帮助用户理解任务的进度。

广告信息视觉层级梳理

3)三级信息了解详情:一级和二级信息早已挺好的解释,三级信息做补充,更多的做为一个展示或则入口,提供跳转功能。

群发模块的五级信息是相对隐藏的,只有在特殊场景下才能启用,这里采用了弹窗的方式来完成操作。例如可以批量删掉发送记录,每个消息组可以查看具体发送对象和复制内容等等。

广告信息视觉层级梳理

小结

相对于纯理论的的文章,这篇文章更偏向于实践干货,当设计师领到功能需求时不能盲目的着手设计,需要经过以上的剖析和归纳,深入用户的使用场景,对于较为复杂的功能软件,设计阶段须要反复掂量页面布局和功能按键的布局,利用多种构建视觉层级的方式来指导设计。最后希望这篇文章才能帮助到你们,大家有哪些不明白和不理解的地方也欢迎留言。

本文由 @UX-ICY 原创发布于人人都是产品总监。未经许可,禁止转载。

题图来自unsplash,基于CC0合同

给作者打赏,鼓励TA抓紧创作!

赞赏

5人打赏

广告信息视觉层级梳理

广告信息视觉层级梳理

广告信息视觉层级梳理

广告信息视觉层级梳理

广告信息视觉层级梳理

老王