最专业的代练平台开发!

资讯热点
如何将复杂的逻辑和信息转化为简单的界面体验?

发布时间:2020-6-25 分类: 行业资讯

交互设计师的具体工作是什么?在这里,我将通过如何将复杂的逻辑问题转换为易于理解的界面语言,为您提供设计产品的工作流程的具体说明。

交互设计者通常接收更详细的思维导图,其中包括功能模块,功能点和一些功能场景的详细描述。它还涉及程序实现的一些背景逻辑。以界面语言的形式呈现这些复杂的文本消息是设计者的基本品质。下面我将解释如何有效地将大脑和背景逻辑转换为界面语言。

首先,解释什么是界面语言。界面语言是人机交互的媒介。它可以帮助人们从图像的界面信息中组织逻辑,完成与界面的交互,最终达到使用目的。

良好的界面语言可以为用户节省阅读信息和学习的过程。这就像一个考试问题。复杂而冗长的表达将隐藏许多关键信息并误导候选人以增加难度。相反,它很容易理解。设计师的工作是将用户视为白色候选人,向用户呈现最简单,最易理解的信息和操作路径,从而缩短用户的思考时间。

下面我将以组管理软件的“组发送功能”为例,详细描述如何用简单的界面语言表达复杂的产品逻辑。首先,让我解释一下群发函数的背景:一般来说,社区运营商需要在社区和朋友圈中传播一些信息,如广告,行业信息,群组公告等,因为团体和朋友比较大。操作一个接一个地效率太低,因此需要一个可以批量操作的功能模块来帮助他们实现目标。

根据用户使用场景,总结组的过程主要分为四个主要模块:筛选对象过程,编辑过程,发送过程和历史记录。并且这四个模块需要形成闭环,例如,可以编辑历史记录并再次发送以防止用户泄漏和发送错误。除了集团的及时需求外,对定时组的需求也很紧迫。定时组发送有助于在非工作时间及时推送信息。

用户进程修饰

首先,我们收集用户使用要求并总结用户操作方案:

场景1:创建多条信息(消息组)并同时将它们发送给多个朋友和多个组对象;

场景2:将发送任务设置为定时任务;

场景3:将另一组新消息重新发送到上一批对象;

场景4:快速将同一组消息发送到另一批对象;

场景5:在发送过程中发现错误,修改内容后需要修改剩余的人员;

场景6:当发送对象太多时,需要一个漫长的过程来防止中间发生程序或网络问题,允许用户手动启动和暂停;

以下是用户使用方案后的流程图:

分析用户行为

由于场景数量众多,操作分支复杂,有必要注意在设计过程中分析用户的行为操作,分层用户行为,以及为下一个界面设计做准备。

核心行为:我们首先剥离最重要的用户使用场景,例如群发消息的主要过程:选择对象

创建内容

开始发送;

理解行为:补充核心行为,例如发送过程中的过程行为和传输完成后的记录视图;

附加行为:主要是意外操作场景,例如用户操作错误或程序错误的补救程序,类似于上述场景5和6.

通过上述分析,交互式文档的输出需要清楚地标记层次结构,这需要重要的显示,哪些信息可以被削弱。交互式草稿可以通过划分颜色和块来显示页面的信息级别。值得注意的是,我们的主要流程应该避免使用多个跳转和弹出窗口,这会导致用户在复杂路径中迷路。还有必要避免页面不清楚,并且信息在页面内大量堆叠。

页面布局

1.建立视觉层次的方法

良好的视觉层次结构将帮助用户提高获取和理解信息的效率,一般来说,可以从以下要素中获取:

1)位置

在正常情况下,人眼对左上和中间的观察效果最好,其次是右上角,左下角和右下角。当然,这也与写作习惯和文化因素有关。此外,大多数人的眼睛在水平方向上移动得更快更容易,因此左右注意力的差异小于上下注意力的差异。

如果设计师想要体现并排的关系,最好安排左右,如果你想打开间隙,顶部和底部的布置会更加突出。当然,这也应该根据实际情况来考虑。例如,如果信息太长太复杂,它将采用上下列表的形式,同一级别的重要功能操作大多是水平排列的。

另外,在上下关系中,用户首先要注意上层内容。例如,网页设计中第一个屏幕上的信息将高于第二个和第三个屏幕级别。因此,在功能模块的布局中,尽可能水平地布置相同级别的功能。方式。

至于以下两个模块的布局,第二个布局用户不会有意识地认为前两个或三个功能选项卡更重要,而功能越低,越重要。

2)尺寸

重要的元素需要更大,并且可以通过拉开尺寸间隙来突出显示。例如,以下QQ音乐的界面设计使用图像的大小划分来抢夺用户的视线,从而实现视觉层次的划分。

3)距离

这里必须提到格式塔理论,或者它可以简单地理解为接近原则:

当人们感知复杂的物体时,他们会有意识或无意识地将近物体纳入有组织的系统,而不仅仅是物体的集合,这是格式塔原则的基础。

格式塔原则适用于不同层面的认知,有些是明确的,有些是隐性的,但最有趣的部分是视觉部分,即设计师用这个原则创造的设计。 。你可以看到左下方的图片,我们自然会在视觉上对元素进行分组,这就是接近原则的魅力所在。

通过研究和验证,接近原理的接近度通过颜色和形状的近似更容易识别,右下图像是一个很好的认证。正确使用邻近原则使用户更容易访问信息和感知内容。很多时候,用户还没有准备好花时间学习复杂的界面,可以快速感知和识别的信息,以及更好的用户保留。

4)颜色

交互式设计中使用的颜色较少。 Metropolis使用灰色阴影来表示层次结构,然后使用颜色系统突出显示重要的功能按钮。交互设计者的颜色应用只需要达到清晰界面水平的目的。太多花哨的颜色会干扰逻辑的表达并误导UI设计师的感知。

2.建立可视化层次结构的实例应用程序

回到这个设计实例“ldquo;组功能],在我们对用户行为进行分层划分后,我们就可以开始进入页面布局了。除了使用一些理论方法,我们还需要做一些实际的场景。深入分析。通过组合上述用户过程,我粗略地将页面分成以下三个块:选择对象区域,编辑消息组区域和组记录记录区域。我直观地对页面进行了分层划分:

1)第一级信息吸引用户:假设用户只在短时间内停留在当前页面上。第一级页面必须小而精确,允许用户快速了解页面信息。在设计中,有必要强调模块的主要过程。功能;

批量模块的第一级信息是引导用户完成核心行为:选择对象

创建内容

开始发送

这是一个漫长的操作过程,并没有强大的分步。例如,用户可以首先选择发送对象或首先选择要发送的内容。设计人员必须通过界面语言有效地引导用户完成操作。但是,它不能限制用户的操作习惯和行为。最优的界面布局在明确的分层划分的前提下支持多种操作场景。这是批量处理的界面设计:

2)对辅助信息的补充理解:解释一级信息,提取精华内容,帮助用户在最短的时间内理解信息;

批量模块的组记录和相关操作可以在界面上相对弱化,并且仅当用户在特定场景中时才成为视觉焦点。例如,可以有针对性地分别查看和操作发送,计划任务和发送完成记录中的任务。

另一个注意事项:当多个发送任务排队时,用户将忽略浏览后发送的任务,这将混淆队列中的任务。在这里,我将实时发送任务,视觉焦点将帮助用户理解。任务的进展。

3)3级信息以理解细节:1级和2级信息已得到很好的解释,3级信息得到补充,更多用作显示或门户以提供跳转功能。

批量模块的三个级别的信息是相对隐藏的,并且仅在特殊情况下启用。弹出窗口用于完成操作。例如,可以批量删除发送记录,并且每个消息组可以查看特定的发送对象,复制内容等。

 摘要

与纯理论文章相比,本文更倾向于实践干货。当设计师获得功能要求时,他们无法盲目地开始设计。他们需要经过上述分析和归纳,并深化用户对更复杂功能的使用场景。软件,设计阶段需要反复考虑页面布局和功能按钮的布局,使用多种方法建立可视化层次结构来指导设计。最后,我希望这篇文章可以帮助每个人,也欢迎所有不理解和不理解的人留言。

本文最初由@ UX-ICY发布。未经许可,禁止复制。

该地图来自unsplash,基于CC0协议

« 对于快速发展的品牌,谁是最受欢迎的电子商务平台? | 在不同的运营阶段,B端产品应该采用什么样的技巧? »