B端页面设计有感

时间：2023-08-10 00:33:01 | 来源：网站运营

时间：2023-08-10 00:33:01 来源：网站运营

B端页面设计有感：在工作中，一般图文并茂的C端界面相对容易做得出彩，也较容易找到同类型的参考。但枯燥的B端页面则会感觉无从下手；在最近一年的工作中接触到很多B端的页面设计需求， 过程中遇到过很多坑，也有些自己在视觉层面的思考和总结，所以打算写下来分享；


原因

页面干巴巴的原因一般为：页面元素几乎都是文本信息和操作按钮。

而这种情况又是业务性质决定的，或者没有交互设计介入，什么信息都要展示，塞得密密麻麻，这就导致了本身信息难以处理；C端界面要做得出彩很大程度要靠精致的图标、banner之类的图像类表现；而在B端界面则没有那么多图像类的元素给设计师发挥，很难发挥；


B 端页面设计思考

在多个项目以及多个产品经理的折磨下，尤其做完一个商家后台系统后，逐渐明白到设计其实与cooking 类似，我们不可能做到每道菜都色、香、味俱全，不同口味不同目标做出来的菜也不一样；B端页面就类似健身餐，功能优先，味道其次； 我们不能为了好吃而在健身餐里面加各种糖份、酱料，这是违背初衷的；但我们可以在可用的食材里面在做不同的搭配，做到味道层次、色彩丰富；

扯远了……回到界面设计，B端的界面设计同样都是要以功能优先，满足信息层级的表达之后才到界面好看这个次要的需求，功能>美观；不过我在很久后才明白，这两者其实不冲突的，也不是前后关系；其实处理信息层级和美化界面是可以同步思考的，只需要确保功能>美观的优先级（不要为了好看而弱化功能），但设计步骤不需要分开；


OK，下面说在一些具体的设计方法


交互层面

如果没有专业的交互设计介入，那么请了解好需求背景以及页面逻辑。因为产品经理不是全能的，他们在画原型图的时候更多的是思考业务逻辑，很容易忽略界面交互不合理的地方，例如密密麻麻的信息、不合理的分组、甚至相互冲突的操作……

了解页面逻辑会让你了解每个界面元素存在的理由，以及它们之间的关系；在了解的前提下，对界面的设计自然就会更加的从容，而不仅仅是给原型图上个色；

例如步骤非常繁琐的页面，我们可以尝试在交互逻辑上做减法，将多个操作按照先后顺序分解到不同的页面处理。

信息密密麻麻的页面就将信息层级梳理清楚，根据优先级将信息做重要次要展示，折叠，二级页面或删除。




视觉层面

• 提炼图像元素

一般有两种，图标与辅助画面；当然增加图像类的前提是功能优先，不要为了美观而颠倒优先级；

适当地添加图标会达到很好的视觉引导效果，以及点缀画面的作用；比如多个不同的信息分组里面，图标会起到视觉引导的作用，让用户很清晰地知道信息的分组，以及降低阅读文字的疲倦感；

辅助画面是指添加一些具象的画面，来帮助用户快速理解当前页面的功能；例如一大段描述类的文本，在开头添加一个具体的辅助画面会让画面更加的美观以及也能让迅速了解当前页；

在平面设计里面有个概念叫做“图版率”，当页面全都是文本的时候，图版率为0%，反之100%； 如果图版率为0，那么页面阅读是非常疲倦的，在这个时代已经很少有人能够拿起一本全是字的书来看了，何况B端页面相当于功能书…… 所以在保证功能优先的前提适当增加图像元素吧。

• 增加画面层级

在不适合增加图像元素的情况下，可以考虑增加文本的层级，以及用卡片划分信息的分组；在某种程度上，这有点抽象图像化的概念（大字号、卡片都有些图像化）；

根据内容的优先级合理地划分文本的大小、颜色层级可以便于理解内容层级，也起到分组的作用，同时页面也会更加的美观；但文本的字号与颜色的层级都不易过多，而且要统一，例如可点击、置灰颜色全局统一;

还有卡片设计是非常适合用在B端页面，它可以起到信息分组、界面美观的作用；但要注意一点是在原生界面里面尽量少加大量重复的投影，例如一个卡片列表页面，每个卡片都有投影的话页面可能会出现卡顿情况，最好是靠颜色区分上下层级，像淘宝的个人页面；

还有一个划分页面层级的方法是颜色区分，例如页面头部一般可以用颜色作为背景加上大标题，这样可以达到页面层级划分的目的，同样也有些抽象图像化，间接增加了图版率；

• 关注视觉细节

UI与视觉有一个大区别在于：动态与静态；

我们在设计海报时候更像画画，静态、整体地处理整个视觉效果；但 UI 则会关注信息的优先级，按钮、文本不同的状态样式等，动态地考虑页面元素。以至于很容易过于关注功能层面的而忽略视觉效果；或许我们也应该在满足交互以及信息层级的情况下，要静态看待页面有哪些视觉层面的不足；

而往往我们只能在现有的元素上做细微调整（尤其是缺乏图像类元素时），所以细节就尤为重要；在扁平化成为主流的今天，很多时候我们会尽量少用投影、描边等元素，一起从简；但这些在B端页面其实蛮重要的，这些细节可以轻易做到信息分组而又不干扰功能，不要为了简洁而简洁；




PS. 此文更多的是视觉层面的思考，非宏观层面的B端设计，再高的设计层面应该关注设计组件化以及驱动业务，还在学习中，希望之后有所输出；


End，感谢阅读；