排版设计海报：信息设计让视觉传达更清晰有效

二十世纪七十年代时, 于英国伦敦, 有位平面设计师叫特格拉姆, 他头一回使用了“信息设计”这个术语。

那时运用该术语的意图仅仅是为了与传统的, 平面设计以及产品设计等平行设计专业, 做出区分。自那时候开始, 信息设计就切实地从平面设计里脱离出来, 被大规模应用于其他领域。

信息设计的主旨是什么？

进行的是能够产生有效作用的信息传递, 跟倡导那种有着精美特质的艺术表现的平面设计, 确立了并非相同的发展趋向, 是不同的发展走向, 是不一样的发展路径。

运用对于信息图表设计的基础认知, 借助从信息的收集筛选、应用情景构思方式、视觉表现, 再到信息图表的设计模式、 制作流程等这些方法, 设计出契合阅读顺序, 能让观众清晰且有效阅读的设计方案。这种准确、形象、快捷的传达方式已然展现出信息设计方法独特的优势。

3. 信息设计的意义

信息层级的排列, 会对视觉方面的美观度产生影响, 也会对人们检索信息时的效率造成影响, 特别是针对B端的复杂场景而言, 我们不但要考虑清晰地传递业务价值, 合理划分信息层级也是提升产品体验的关键部分, 良好的信息层级意味着更优的使用体验。

二、信息设计的基本思路1. 用户如何获取信息？

想一想, 要是我们打算去购得一部手机, 那我们会经由怎样的方式去买到手机呢?

第一, 我们会去收集那些相关手机的信息, 举例说, 先是前往网上搜寻最新的手机信息, 这其中包括向朋友去询问, 或者平常自己就已然有想好的品牌机型, 而后, 我们的大脑将会把这些信息组合到一块儿, 从而得出购买何种品牌以及何种型号的判断。最终, 我们于一堆信息里, 筛选提取出有效的信息, 进而以此来指导自己接下来的行动。

由此可见，我们获取信息的步骤：

血糖7.0以上，不管几天，几月，几年，就用这个方法调理！

知柠信息咨询 . 广告x

因此，我们在信息设计时可以借鉴以下基本思路。

1）根据自己的经验与用户需求收集尽可能全面的信息。

2）分析信息池中哪部分信息是用户最关注的。

可是, 一旦产品的目标用户并非仅止于一类, 那我们就得思索多谋划以契合各异的用户对于信息的需求。比如说, 于电商平台搜寻商品时, 我们既能借助店铺搜索或者商品搜索来达成, 又能够凭借天猫所给予的商品目录树直接寻觅。

3）想着怎样进行信息呈现, 身为设计师的人更得思索怎样去呈现信息方可让用户更易于接受以及理解, 唯有会安排信息, 才会有打造出一款受用户喜爱的用户产品的可能性。

2. 如何分析判断用户行为？

要检测页面设计有无效果这件事, 需要我们对用户行为展开分析。并且, 我们能够把用户浏览页面的行为划分成三个层次。

核心行为层, 指的是用户最先关注此页面核心要点, 进而触发的用户首要且核心的行为, 它对应着信息分层里的重点核心层。了解行为层, 指的是用户心里产生了解的意愿, 然后持续了解内容的行为, 其对应信息分层的次要辅助层。查看更多行为层, 指的是用户接收信息之后去寻求更多信息的行为, 像是行动按钮、文字链接等交互行为, 它对应信息分层的详细信息层。

所以呀, 要是页面设计质量处于较高水准, 并且信息层级能够精准无误地传达出来, 那么用户的行为层次原本应该会刚好与页面的信息层次达成对应, 这也算是我们用以开展页面设计质量检测的标准当中的一项了。

三、如何做好信息设计

由于针对使用体验而言信息层级设计是比较关键的, 所以如何去做好页面的信息层级设计就显得特别重要了。

我察觉到网络上的资料同样是优劣不一, 所查找到的资料大体上都在阐述排版设计的四个基本设计原则, 亲密原则, 对齐原则, 对比原则, 还有重复原则。

即便这四个方法具备一定效用, 然而在遭遇复杂层级排版状况之际, 依旧会产生困惑之态。基于此, 我就页面排版展开了更进一步的探索以及思考, 今日我们来谈谈剔除上面四大设计原则之外的方法:

1. 信息设计的前置处理

平时, 我们极易被忽视的一点, 是信息的前置处理。我曾碰到某些信息极为复杂, 致使排版极为艰难, 多次反复修改设计, 可总是不满意, 然而却遗漏了这些信息是否真切地被需求。

本质而言, 信息前置处理就是判定我们当下要呈现的信息是否必要, 这是日常工作里时常碰到的情景, 像有时产品给我们诸多信息, 或许只是其全部展开罢了, 所以设计时不能直接着手, 得依据当前页面的业务场景来判定, 明确每个信息的合理性, 分两个步骤来判定:

当下存在于页面里的全部信息, 真的都有必要留存吗, 要是将一些信息拿掉的话, 会不会产生影响。当前这些信息的关键程度究竟如何, 对于某些不太重要的信息, 能不能借助隐藏、移动之类的办法来呈现。

对于上述两个问题进行确认, 这会对后续的信息设计排版产生直接影响。所以, 我们需要在源头, 也就是要去和产品或者业务进行沟通。具体而言, 要弄清楚该信息呈现的缘由, 还要明确其必要性。通过这样做, 能够帮助我们最终将信息层级梳理清楚。

那么如何进行信息前置的处理呢？

在开展面向 B 端产品的信息设计工作时, 能够依据“简约四策略”来予以设计。

由英国易用性专家协会主席贾尔斯•科尔伯恩(Giles Colbore）所著的《简约至上》一书, 对简约的四策略进行了详细讲解, 其策略分别为删除, 组织, 隐藏以及转移。

肝囊肿的源头已找到，烟酒排末位，第一名很多人天天都在做！

喜供网络科技 . 广告x

1）删除

使界面上不重要的内容以及元素被删掉, 这一行为称作删除, 只把对用户而言重要的内容留存下来。如此一来, 设计师于设计界面之时, 不但能够只专心于重要的事情, 而且也有益于用户全神贯注地去达成目标。设计的目的在于专门把可以使用的信息集中起来, 把那些分散用户精力的信息去除掉, 经由这样的方式为用户给予价值。

在进行删除操作时, 我们务必要牢记, 千万别随意去删。因为删除信息这件事, 是极其考验判断信息重要程度的那种本领的，毕竟一旦删了本不该被删除的信息, 就会给用户带来不好的体验, 这一点要清楚。

那么，如何判断哪些信息可以删除呢？

① 从用户使用场景考虑

某些信息的展示与否, 不会对用户产生实质性的决定影响, 反倒会干扰用户的多余资讯, 这种情况下便可考虑予以删除。

② 从产品目标考虑

从产品目标方面去考量, 存在一些信息, 它们对于产品目标并未起到具有实质性意义的决定作用, 将这一类信息予以删除, 仅仅留下对用户而言属于重要的信息, 这些信息能够助力用户去做决策或者开展下一步的操作。

2）组织

组织, 意味着针对确定下来的信息, 实施有层次的整理行为。要是我们对于筛选出来的重要信息, 不开展有序的整理工作, 那在用户使用过程里, 就会致使其觉得极为复杂, 进而抓不住重点。

信息组织的要求是, 以产品定位以及用户需求作为线索, 一开始琢磨信息展示的主题, 此外再理会信息的分类方式, 像时间、颜色、大小、字母等, 最终把松散的信息给予组织, 而且保证信息之间界限清晰明确。

右图进行了信息组织，明显会比左图看上去体验更好

重要程度不同的信息, 决定了我们根据其情况划分, 哪些要选为主体, 哪些要当作次要辅助信息, 哪些甚至能够收起或者省略。

3）隐藏

隐藏是指将用户不常用的信息隐藏起来，在用户需要时才出现。

但是，我们要注意隐藏策略的使用方式。

首先, 存在这样一种情况, 隐藏和删除有所不同, 被删除的那些信息, 是用户并不需要的、属于多余范畴的, 然而, 被隐藏的那些信息, 却是用户所需要的, 只不过是相对来说不那么经常会用到罢了。

其次, 当进行设计信息隐藏这类操作时, 务必要周全地思索把隐藏这种方式应用起来会不会给用户造成并非必要且多出来的困扰。比如说, 假使在实施信息隐藏这个行为的时候没有给予用户理应具备的提示, 那么用户就会极难察觉到该信息。

成功的隐藏是什么呢？

首先，彻底隐藏需要隐藏的信息，只在合适的时机出现相关内容。

其次，能在界面中给出细微的提示，让用户顺利地找到隐藏信息。

最后, 提示需处于用户的视线范围以内, 若是超出了用户的视线范围, 哪怕提示极为明显, 用户也无法看见。

于B端这些产品的设计之中, 存在着一个始终持续的争论方面的话题, 即表格操作栏究竟需不需要进行 hiding这个动作呀。

有关这个话题, 有一部分人觉得不应当进行隐藏, 其缘由是若隐藏了操作栏, 那么用户就会觉得表格数据是无法进行操作的。另外一部分人则觉得应当隐藏, 原因是要是把每条数据都将操作栏展示出来, 就会感觉实在太过多余了。

电脑怎么清理C盘？简单几步，让你的电脑焕然一新！

笔者认为这需要仔细分析，不能一概而论：

第一种情况, 存在需要隐藏操作栏的情形, 具体是, 当表格列数众多, 并且已经出现横向滚动条, 再者操作栏的功能不常被使用时, 这种情况下可将操作栏隐藏。还有, 当用户把鼠标移动到数据行上面的时候, 操作栏的功能便会显示出来。第二种情况, 存在不需要隐藏操作栏的情形, 具体是, 当表格操作栏的各项功能都较为重要, 而且一旦用户操作频率较高, 这种情况下就无需隐藏操作栏。因为此时隐藏会致使用户在操作过程中不够直接。另外, 当表格列数很多, 已经出现横向滚动条, 然而操作栏的部分功能很常被使用时, 这部分常用的功能就不必隐藏。当用户将鼠标移到数据行上，就会显示操作栏中不常用的功能。

4）转移

转移就是将合适的信息放到合适的地方。

比方说, 我俩在搞一个B端产品注册界面的设计, 期望用户除了填账号、密码、验证码之外, 还让用户填生日信息。起因是产品经理指望在用户生日那时给用户发生日祝福, 好让他们体会产品的温暖。打算在做用户分层之际, 靠年龄分层。然而, 生日信息搁注册界面明显不合适, 这时候能把生日信息填写步骤挪到用户注册完后去做。

比如, 在用户达成注册这一行为之际, 系统能够予以温馨的提示呈现, 对用户表明 “你已经完成了注册之事宜, 要是你写入了生日相关内容, 那待到生日来临之时, 你将会收到神秘且独特的礼物”。

需留意, B端产品经理于设计界面信息转移之际, 得明晰该信息被转移的缘由, 要是盲目去进行转移, 反倒会致使用户于恰当位置难觅合适信息, 进而使用户获取信息的效率遭受降低。

信息设计的前置信息处理被确定妥当之后, 便来到属于设计师的主场, 也就是信息的排版设计环节。

2. 如何信息分层设计

在页面信息量比较大的情况下, 设计师要充分知晓了解产品功能以及用户所需要的, 对页面当中的内容予以划分, 明确各个部分内容的优先级, 进而建立起信息层级。

凭借产品设计的视角, 我们一向能够, 把页面信息, 划分成3个层次:

1）重点核心层（吸引用户）

是指定位于用户于短暂的三到五秒之内快速浏览页面的情况之后, 所能吸引其注意力的堪称核心的那部分内容。此一部分属于页面核心所在之功能, 属页面最有意愿着重向用户呈现的内容, 务必做到数量极简且质量上乘, 于设计环节是需要作为重点突出予以展示操作的。

2）次要辅助层（帮助理解）

当用户被重点核心信息所吸引, 进而在页面之中停留三至五分钟, 就会去阅读与之相关的、有助于了解核心内容的辅助信息, 像是说明信息或者其他相关功能, 这部分信息是比较重要的, 然而却不需要强化展示。

3）详细信息层

具体是说那更多的信息, 或者是补充性质的信息, 详细信息层会借助更多的交互方式去将信息予以展示, 这一部分信息并非是极为重要的, 可同样也是需要进行展示的。

肝囊肿人群必看：每天坚持一件小事，囊肿慢慢消散！

知柠咨询 . 广告x

3. 信息设计的排版处理

B端产品的业务具备相当的复杂性, 其页面所涵盖的内容数量也会相对较多, 在此情形下, 信息的有效组织显得尤为关键重要。信息设计并非是单纯简单的内容堆砌那么轻易, 而是需要依据用户所处的场景以及相应需求来做出针对性的优化处理措施, 进而构建起具备有效性的信息层级架构以此来助力用户去理解业务所包含的具体内容。

总结出以下五种方法来帮助我们更合理地进行信息设计：

1）信息分组

信息分组作为极为常用的一种设计形式, 它具备把复杂信息予以打散再重新组合的能力, 能够聚合那些相似的信息, 还能分割存在差异化的信息, 这对降低信息的复杂性存在助力, 进而帮助用户迅速进行信息定位以及浏览相关内容, 并且以此来降低页面整体所具有的复杂度。常用的分组方式存在三种, 分别为间距, 分割线以及卡片。

上海到重庆游轮价格表出炉，亲身体验长江壮丽风光！

以信息复杂度为依据, 能更好地挑选分割方法, 致使界面的呈现清楚确切。

优先选用留白分隔, 因其复杂程度低下, 能使视觉清爽且无干扰。当留白效果不明显之际, 建议采用分割线, 如此能让信息层次更清晰且屏效高。若需进一步强化条目本身的边界感, 可采用卡片, 这般能够强化条目信息的视觉层次以及可操作性。

2）组件拆分

让用户面对繁杂的信息内容之际, 极易萌生出退缩的情绪, 而组件乃是当下大部分设计师于开展信息排布之时必定会用到的部分，其涵盖了:

层级结构呈树形时, 面对那些具备关联性的多个不同层级实在相当适配, 可以把繁杂的层级脉络予以收拢, 如此一来便能显著减低相关资讯的复杂程度。存有多且彼此关联薄弱的繁复信息采取呈现于表格结构, 不过使用这般呈现形式绝对不可随意滥用, 务必要依据我们实际的场景状况谨慎甄别挑担选取。采取把复杂的内容按照先后顺序予以步步分解, 将用户原本聚焦于页面内容的注意力转移至后续步骤的进展幅度或者速度上面, 如此能够极大地削减去用户内心可能产生的压力。除此之外带有节点的信息页面同样能够给予用户助力好使他们对于相关业务的流程具备更佳的理解。表格标签, 更适宜于同级别的数据, 针对同类型的结构而言, 能够更为出色地把页面予以拆分, 进而使得当前页面变得更加简洁。

3）页面整体布局设计

经由对布局设计方式进行改变, 我们能够借由拆分布局, 把多层结构的样式控制在三层以内。此处底层逻辑在于, 当碰到相对较为复杂的逻辑时, 我们能够思索通过改变结构来削减其复杂度, 如下所示:

客厅不装电视，现在流行这样设计！

4）信息融合

我们能够借助信息融合的形式, 去减弱它对层级的影响, 信息融合从本质上来说, 就是把某两种层级信息, 经由不同的组合方式, 使其融入到同一个层级当中。

实施B端布局期间, 信息融入的运用颇为频繁。比如说那最常见的标题、搜索以及按钮, 诸如此类, 皆被放置到同一行上面。如此一来, 不但能够节约视觉方面的空间, 况且还可以降低信息层级的复杂程度。

然而, 于开展信息融入的进程当中, 我们所需留意的是: 要是置于同一层级会致使理解方面产生误解之际, 此时切莫采用该方案。举例来说, 搜索框的位置状况, 放置于哪一层级决定了与之相对应的搜索范围大小。

5）信息弱化

其原则是信息弱化, 即把某些超出层级的状况予以弱化, 比如说存在5个层级, 然而它把功能筛选巧妙地融入当下的结构里, 致使即便超过3层, 我们也不会认为它格外复杂, 请看如下所示, 销氪平台针对数据以及视图切换行实施了弱化, 尽管仍旧存在4种层级, 可从视觉感知这个层面而言, 不会感觉到视觉方面的凌乱。

中年家庭：安装10kw光伏发电成本详细解析

我们能够借助上述5种方案, 即信息分组, 组件拆分, 更改布局, 信息融入, 信息弱化, 把大部分层级过分繁多的、复杂繁杂的信息予以简化, 进而使得我们最终的页面呈现不会过于复杂, 更易于被用户所理解。

四、常见的信息设计技巧1. 减少页面元素设计

有别于C端产品, B端产品更注重效率, 就如同奥卡姆剃刀原则所讲的“如无必要, 勿增实体”一样。

页面内容得是以简洁作为主要特点, 要防备无关的要素去构成信息干扰。然而设计师更为感性, 会担忧设计太过平淡, 于是会在界面里头添加各种各样的视觉元素, 可这样反而会增添用户的认知成本。

体验设计这个行业是需要创新的, 然而B端产品设计却要更为谨慎, 要做到尊重用户的习惯, 要达成完整表达业务逻辑性这一要求, 要实现保证内容的可理解性这一目标, 这些都是设计师必须去关注的。

2. 卡片是用线框还是背景

在你打算借助卡片去对信息予以分组之际, 你可曾产生过究竟是选用线框卡片, 还是背景色填充这种纠结? 历经了多次这般的纠结, 以及多次的设计对比之后, 我发觉分组方式实际上也内含着一定规范:

1）取决于卡片的数量

如果卡片少，用色块；

父母房产过户子女要交多少税费?2026新规已出!

虽说卡片数量众多之时, 线框之用颇为可取不过, 然当数目持续攀升, 达至过多之境, 不妨一试线性设计, 其能令页面展呈以更为洁静安谧及清涤明朗之态, 反观色块设计, 却会导致页面予人以更为凝重厚实之感啊。

2）取决于页面的视觉重心

当你面对的页面之中, 到处都是线框之时, 你能够借助带有色块的卡片, 以此达成突出页面重心的功效, 进而使得整个页面不会显得那般单调, 你能够看到如下这幅图的示例, 右侧的那个页面相对而言会更加稳重一些。

3. 底色用灰色块还是彩色块

着手进行色块操作之际, 常常会陷入纠结, 究竟是选用灰色的底色, 还是采用彩色的底色来开展。如此一来, 这两者之间究竟是否存在界限方面的区分, 我们又应当在什么时候去运用这两种色彩。

住养老院一个月的费用清单，看看您是否负担得起！

可以看出目前这两种颜色的运用更多的是功能上的区分：

那种具备彩色的背景, 会更适宜应用于那种「旨在引发用户注意的界面」, 像是某些具有功能引导作用或者带有营销性质的页面。从其表现出的性质方面来讲, 会显得更为突出重要。而灰色类的背景呢, 会更适合用于那种「借助灰色背景以区分层级关系」或者一些带有微弱提示性质的信息。从其呈现的表现形式方面讲来, 会显得更轻型一些。4. 可视化设计。

某些特定场景之中, 内容页面能够借由可视化展示助力用户理解信息, 像常见的身份证图片上传之类, 好多用户难以区分正面反面, 借助图片可视化提示, 利于用户更优地理解信息。

五、最后

无数次, 我们目之所及的出色界面设计, 并非因其初始便简易, 而是借由我们契合逻辑的信息层级把控, 使得终了呈现之际显得不太繁杂, 这着实是设计师于实际工作之时需予以重点留意的一处要点, 亦是我认定的设计师的关键价值所在。

要是在文中存在着出现不严谨情况以及错误之处, 期望大家能够予以指正, 期望大家能够多多进行点赞以及评论此举以起到鼓励作用, 最终对于您的耐心阅读表达感谢。

参考资料：

《B端思维 - 产品经理的自我修炼》, 张静晨所著, 其中提到B端产品信息设计的3个原则（子牧UXD）, 而陈睿婷指出, 若想做好信息设计, 首先要回答这5个问题。

继续浏览有关 信息设计排版设计 的文章