产品诉求(诉求书模板)

本文将从信息层面带你了解界面设计过程中简单的底层逻辑。我们可以围绕这个逻辑来安排我们的页面,让设计思路和布局变得更加清晰合理。个人认为我已经有效解决了我的大部分

本文将从信息层面带你了解界面设计过程中简单的底层逻辑。我们可以围绕这个逻辑来安排我们的页面,让设计思路和布局变得更加清晰合理。个人认为我已经有效解决了我的大部分排版问题,希望能帮到你~

产品诉求(诉求书模板)插图一、为什么要提高接口信息识别效率?(为什么)界面设计的好坏会直接影响用户的体验。很多时候,我们往往直接拿到竞品的页面,运输到自己的产品上,而没有考虑到自己产品的特点和业务。

这种做法理论上不会让自己的页面出错。但是很多人往往忽略了一点,那就是别人设计的出发点是什么,是否与自己产品的业务流程相匹配。如果不理解这些仓促的设计,时间久了就会养成一个坏习惯,导致思维的刺激和知识的沉淀不足。当我们需要专门设计创意的时候,会遇到很多困难。

如果是新的领域,前期可以进行适当的处理参考,但是一定要知道别人的设计思维点,了解背后的原因,在头脑中沉淀成自己的知识储备。

1. 信息大爆炸

60年来,人类社会的数据呈爆炸式增长。2008年,人类创造了近十亿张可存储数据的DVD,相当于人类过去5000年创造的数据总和。在过去的两年里,研究机构的预测信息每18个月就会翻一番,而在过去的20年里,研究机构的预测信息每73天就会翻一番。

产品诉求(诉求书模板)插图(1)2.人类的生理在信息爆炸的时代是有限的,但人类进化的速度是缓慢的。我们现在的大脑和250万年前的原始人没有太大区别。

我们的大脑每秒接收大约4000万个感官信息输入,但意识一次可以注意到其中的大约40个,其中短期工作记忆只能处理4个1。

因为现代信息数据的爆炸,大部分产品的结构越来越臃肿,而人类的处理能力有限,所以设计什么信息以什么形式呈现的信息层次就显得非常重要。

产品诉求(诉求书模板)插图(2)作为设计师,我们有必要根据自己产品的业务方向、用户的行为和特点、信息环境,选择合适的信息,以合适的方式进行组织和呈现,使用户更容易获取和理解信息,完成信息组织和交流的功能。

二、如何提高界面信息识别效率?(How)1. 信息分类

相关信息需要分类。无论是什么类型的产品模块,都要在设计中做好信息分层。当两个内容元素相关时,它们应该作为一个整体呈现给用户。

产品诉求(诉求书模板)插图(3)2.等级分化(1)等级的数量应接近“3”

信息层是影响页面信息传递效率的重要因素之一,因此如何做好信息层的工作尤为重要。大多数在线材料都是围绕对比、对齐、亲密和重复这四个基本原则来解释的。

不可否认,这四种方法对信息层次的排列起到了很大的作用,也是我们非常熟悉的。但是它的阐述过于宽泛,在我们实际工作中面对复杂的层次排版时,还是比较迷茫,很难直接有效的使用。

于是我收集整理了优秀的案例。

通过对网上页面和概念的整体研究,发现它们遵循的是排版原则,有一个简单的规律:主要内容的层次控制在三级左右。

如下图所示:

产品诉求(诉求书模板)插图(4)产品诉求(诉求书模板)插图(5)

可以发现,三层左右的层级是最容易被用户识别的,且视觉上不易混乱。三层往后,随着层级越多其复杂性会成比增加。可以发现三层左右的层次最容易被用户识别,视觉上也不容易混淆。三层之后,复杂度会随着层数的增加而成比例增加。

比如,我们来看下面两个例子。左侧层次没有重构区分,使得层次复杂,导致用户识别效率低。但实际上我们只需要对信息进行分类,控制好层级的数量,瞬间变得简单易懂。

产品诉求(诉求书模板)插图(6)所以我们在开始设计之前需要思考一个逻辑:尽量把自己的内容层次控制在三层左右,这三层之间有明显的对比关系。

产品诉求(诉求书模板)插图(7)有些朋友看到这个肯定会问。这个道理大家都懂,但是在实际工作中,大部分人获取的信息多到根本无法保持在三层之内。别急,本文的重点当然不是告诉你这么简单的道理,而是面对复杂的层次结构,我们应该如何控制它的层次表现,才能在最终的呈现中保持在三个层次左右,让用户更高效的获取信息。

(2)源头筛选处理

来源选择的关键在于,在接手复杂信息时,我们首先需要从来源做出一级判断,才能知道信息是否真的需要。这也是我们大多数人容易忽视的一点。当然,这也不能完全怪我们,因为通常需求一般都是在给我们的时候总结出来的。好一点的话,有交接文件,有时候甚至需求到我们手里的时候,已经交接过好几次了,交接人可能不知道说什么,导致很难知道深层原因。

来源筛选的本质是判断我们目前想要呈现的信息是否有必要。

比如有时候产品给了我们很多信息,但我们不一定全部接受,而是通过当前页面的业务场景来判断。确定每个信息的合理性,从而决定某些元素是否可以删除,提高整体信息设计的一致性。

这个过程要求我们思考以下两点:

此信息真的是页面中的必要信息吗,如果去掉是否会产生直接影响:比如当打开高德地图的时候,在你浏览地图时,界面只呈现强关联功能模块。只有当你上划进入二级页面时,其它相关功能才会展现,这些都是按照用户的使用场景来进行对应的呈现。当前信息的重要程度是怎样的,对于某些不重要的信息是否可以通过隐藏的方式展现:当你拿到一堆信息,信息的重要程度就决定了我们需要将哪些信息作为主体,哪些信息作为次要辅助信息,哪些信息甚至可以收起或者省略。比如当你使用语雀创建文档时,编辑和浏览永远是最关注的,而跳转入口等都是次要信息,将其隐藏反而提高效率。产品诉求(诉求书模板)插图(8)产品诉求(诉求书模板)插图(9)

上述两个问题的确认,会影响我们对后面的信息排布。因此我们需要在源头,比如去和产品或者业务沟通,弄清楚该信息呈现的缘由以及必要性,这样能够帮助我们最后理清楚信息层级。以上两个问题的确认会影响我们对后续信息的整理。所以,我们需要在源头上与产品或商家进行沟通,比如,找出这种信息呈现的原因和必要性,可以帮助我们最终了解信息层面。

(3)减少排列的复杂性。

信息整理的本质是通过我们对信息整理的主观组织重构,将复杂的层级控制在三层左右的区间内。从而确保我们页面的简单性、规律性和可识别性。

通过对当前实践的总结,合理安排信息层级的方法大致可以分为:分组、构件、组织、整合、弱化。

①信息分组

分组信息是每个人在设计时都能想到的一种形式。分组可以整合复杂的信息,从而降低整体的复杂性,理清线索。

常见的分组方式有三种:间隔、分割线、卡片。

产品诉求(诉求书模板)插图(10)那么这三种方式有区别吗?

VIVO的设计团队曾就此问题做过用户调查,但结果显示,如果纯粹从用户角度出发,对其变化的感知很小。但这三种分割方式会影响我们在呈现信息时的整体视觉感知,所以我们可以根据当前信息的复杂程度制定以下规则:

复杂度较低时,优先采用留白分割,视觉清爽五干扰;当留白分割效果不明显时,可引入线性分割,让层次更清晰且保证屏效;需要进一步强化信息之间的边界感,可引入卡片样式,强化层次和可操作性。产品诉求(诉求书模板)插图(11)②使用组件拆分。

其实组件是目前大多数设计师整理信息的必备部分,所以这部分设计师的熟练程度也是最高的。本文想强调的是,目前这些组件在我们的信息层级划分中起着重要的作用:树形结构、表格结构、step bar和tab。

树形结构。对于有关联性的多层级非常适合,可以将复杂的层级结构进行收拢,从而能够显著降低信息的复杂度。表格结构。对于信息多且关联性不大的复杂信息,可以聚合到表格来进行呈现,但表格的呈现方式不宜滥用,需要根据我们场景来进行选择。步骤条。步骤条则对场景要求非常明确,我们可以将多个场景通过分步的形式进行呈现,从而减少当前页面的复杂度。选项卡。选项卡更适合与同级的数据,对于同类型的结构可以更好地将页面进行拆分,从而让当前页面更简洁。产品诉求(诉求书模板)插图(12)③柔性组织

通过调整组织方式,可以通过拆分布局,将多层结构的风格控制在三层。

举个简单的例子:

从图中可以看到,左边有很多层次,尤其是两个标签页的叠加,视觉上会显得有些凌乱。我们可以通过将第二层选项卡的布局从自上而下的结构更改为左右结构来直观地简化层次结构:

产品诉求(诉求书模板)插图(13)当然,以上只是一个简单的例子。这里的底层逻辑是,当我们遇到相对复杂的逻辑时,可以改变结构,使其交互逻辑更加清晰,从而降低其复杂度。

产品诉求(诉求书模板)插图(14)④巧妙整合

我们可以用信息整合的形式来削弱其对层级的影响。信息集成本质上是将一定的两个层次的信息通过不同的组合整合到同一层次。例如,让我们看看下面的例子。在产品设计中,按钮和查询项通过分割排列在一起,从而成为同一层级,有效降低了页面的复杂度。

产品诉求(诉求书模板)插图(15)我们在做B端布局的时候,这种信息整合的方法用的比较多。例如,我们最常见的标题、搜索和按钮都放在同一行。这样既可以节省视觉空间空,又可以降低信息层次的复杂度。

但是在信息整合的过程中,我们需要注意的是:如果放在同一个层面,会造成误解,所以此时不要采用这个方案。比如搜索框的位置,放在哪一级,就决定了相应的搜索范围。

⑤信息弱化

信息弱化的原理是将超出层面的部分弱化。

比如图中有五个层次,但它巧妙地将功能筛选融入到当前的结构中,这样即使超过三个层次,我们也不会觉得特别复杂。

产品诉求(诉求书模板)插图(16)很多时候我们觉得信息混乱的原因是页面元素太多,花里胡哨的太多。

比如工作中的小卡,就是利用信息弱化来降低画面的复杂度:

产品诉求(诉求书模板)插图(17)所以我们需要学会对信息进行分级,弱化不重要的信息,这样整体呈现会好很多。

但是不可否认的是,还是会有比较复杂的页面,即使减少了,层次还是会太多。所以这个时候就要记住是不是一开始就要把所有的信息从源头上追溯。

(4)突出热点。

当模块有按钮、文字链、图片条目等接下来需要操作的关键元素时,需要突出显示,帮助用户快速定位目标。

图中的“了解更多”通过高亮文字处理,让用户通过颜色快速定位入口,不影响用户正常阅读。如果用色块按钮来高亮,模块就多余了,太让人应接不暇。

产品诉求(诉求书模板)插图(18)3.可视性当产品要求用户分多步完成任务时,应该显示系统进度,让用户知道自己的动作在界面的什么位置。

比如下图的房屋装修信息填写过程中,用户面对这样的多流程任务往往耐心不高。我们可以在设计时添加一个系统状态进度条,随时提醒用户当前节点。还有注册登录、信息完善等更多场景。对于这种方法的应用场景,都是为了让用户达到一种可预测的交互状态,提升用户体验。

产品诉求(诉求书模板)插图(19)4.跟随视觉移动线。在设计内容复杂的网页时,我们建议根据产品需求和用户目标合理放置元素,以达到目标。另一方面,符合眼球运动规律的浏览顺序可以防止用户视觉疲劳,每个视觉点停顿时的元素都不一样,从而提高用户体验。

产品诉求(诉求书模板)插图(20)5.合理加粗字体在设计大面积文字排版时,要注意字体粗细,这决定了我们的设计是否易读。

无论是标题还是内容,字体过重或过轻,都会降低文字的基本识别度。而且当文字信息过多时,如果长时间专注于文字识别,很容易产生视觉疲劳。

在设计UI界面时,无论是长文本字体还是模块元素字体,都要注意字体的轻重,在保证基本识别度的同时优化视觉重心,保证用户在阅读时不容易疲劳。

产品诉求(诉求书模板)插图(21)6.哪个更重要?当界面中有多个入口时,我们可以优先考虑这些入口,以突出核心功能。用户浏览界面的动作是以泛扫的形式,这意味着我们需要弱化无关信息,既保证了界面的基本美观,又有良好的体验。

产品诉求(诉求书模板)插图(22)作者:CKin。记事本,在一个未知的世界里,做某些事情

本文由@ ckin.notepad原创发布,大家都是产品经理。未经许可,禁止复制。

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

此观点仅代表作者本人,大家都是产品经理。平台只提供信息存储空服务。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

作者:美站资讯,如若转载,请注明出处:https://www.meizw.com/n/114935.html

发表回复

登录后才能评论