判断B2B外贸网站做的是否成功的一个重要标准就是询盘数量，询盘来访者就是潜在的客户，而这一切的前提是设计能让用户高效地获取网站中的信息。信息的高效获取来自合理的视觉引导，也就是信息阅读的优先级安排，其底层原理来自以点、线、面为界面设计的原则。

点线面这三者都是相对存在的，点拉长了就是线，线变宽了就是面，这三者是可以相互转换的。

点、线、面这三种形态存在于所有的B2B外贸网站设计元素中，不论是哪种元素都可以用点、线、面来表示，点可以是文字、图形、短线、一个色块等等任何形式。比如下面products板块中，一张卡片可以看作一个点，但相对于卡片中的产品图标，我们又可以将它看作是面，如果这个卡片和多个卡片一起组成产品列表，那么我们也可以将产品列表看成线。

下面，我将分为点、线和面三大板块，来讲述每类形态基于自身维度所拥有的特性，并如何通过存在、变化在B2B网站设计中发挥着各自的作用，实现合理高效的视觉引导。

当一个点独立存在时，点的向心性协助它成为视觉焦点。此时点主要起到定位的作用。

比如，图标本身可以用来表意，而独立、精致的特性让它很适合作为点元素来处理。B2B外贸网站带有图标的板块中，在不存在卡片的情况下，可以把图标看作点元素，每个图标以其所具备的向心性帮助我们迅速地聚焦到它所在的位置，让阅读变得轻快而富有节奏。

点是自由、精致的，它不会像线那样有向两端延伸的特性，这意味着它可以进行各种形式、规则的排列组合以契合版面。

点化线

在这种分布形式下，点在B2B外贸网站中通常以图标或者卡片的形式进行横向及纵向排列，并且倾向于线的引导性进行视线引导。

点的横向排列通常见于Testimonials、why choose us、team等板块中。由于点本身对用户注意力的聚焦，点沿着横向方向进行排列时，用户视线便倾向于朝对应的方向移动。

B2B外贸网站中，点的众向排列一般做成图文列表布局，常用于team、FAQ、优势、产品列表等板块中。

从视觉动线上看，图文列表布局的动线属于F型浏览模式，即用户首先落点于左侧的定位点，再由左向右进行阅读，接着再垂直扫视，当定位到兴趣点后继续由左至右阅读。这种动线符合人类自然的阅读模式。

并且在由上至下的视线迁移中，用户的注意力势必随着路径的拉长而逐步递减。

这种递减效应让列表式布局更适合基于板块功能特点及用户习惯以某种规律排序。一是人物、优势点、产品等基于重要性的先后规律排序；二是由于点众向排列图文列表布局的弱化图片强化文字说明的特点，不易通过外观区分的产品使用图文列表布局展示效果会更好。

点化面

在这种分布形式下，点（产品图）在B2B外贸网站中常常还横向排列在产品列表中，作为一个个快捷入口存在，形成网格式布局。当然，网格布局也常用于图片画廊、图标、卡片等板块。这个布局下的点集合倾向于面元素，界面在这个布局下呈现出富有观赏性的视觉张力，吸引用户眼球，而且网格式的布局引导用户视线均匀迁移，便于视觉区分。

从视觉动线上看，网格布局倾向于Z型浏览模式。用户视觉动线通常由左至右、再由上至下进行，并可以“雨露均沾”地在数个点上均匀迁移，注意力递减效应不会像列表布局那么强烈。因此，网格布局非常适合进行不同信息的辨识和区分。

线条是一种简单、轻盈的存在，可以看作是点受外驱力作用下的运动轨迹。它从维度上来说属于一维，不同的外驱力结合使得线可以沿着任意方向自由延伸，从而让它拥有了高效的引导性、分割性和造型性。

线可沿任意方向延伸的特点让它具备了很强的引导性，在B2B网站设计中常见于公司介绍时间线、步骤等板块。

很多时候，B2B网站界面中仅仅以留白进行分隔时，很容易造成信息无法被明确划分，这时我们往往需要引入分割线的形式进行辅助。常用于询盘表单和产品详情页表单说明等。

线本身可以沿任意方向自由延伸，形成一条曲线、折线、螺旋线等等。而当线的首尾相连时，便可以勾画出面。

由于线的闭合性所形成的面是一具没有量感的空壳，同时本身轻盈的特性让其更加轻量、通透，因此在B2B网站中常用于一些信息模块的造型，比如幽灵按钮、线性图标、信息展示框等。

相比于面性按钮和图标，量感的缺失让幽灵图标无法在辨识性上胜出，但是在其它地方也各有所长。

面可以看作是线的运动轨迹，可以由一个闭合的线生成，也可以由点、线强化自身而来。当点、线通过强化自身的面积、宽度后，和面的界限开始模糊，从而具备了面本身的性质。

比如B2B外贸网站中让人印象深刻的大标题，便是由通过增加每个点的面积（增加每个字的字号），以及笔画的线宽（增加每个字的字重）来趋向于面，以营造出饱满、冲击的视觉张力。

面二维的属性让它可以向四周无限扩张自己的领土，这个优势让面可以轻松承载各类信息，并且也让它具备了绝佳的视觉张力。

在一个点线面同时存在的画面中，人眼优先注意到的必定是拥有绝对视觉张力的面元素。这意味着面拥有着远胜于前两者的辨识性，或者说，在一部各类元素参演的戏剧里，面更擅长主角。

比如在一个放置了文字的界面中，我们希望其中一段比较重要的文字完全和其他文字区分开，也就意味着这段文字需要进行对比。

我们可以对这段文字加粗、加入颜色等等，这的确能做出一些明显的变化。但是仅仅是对字体本身的强化，一旦界面需要划分层级，就会显得很“平”，造成信息关系的暧昧。

不过，当加入一层色块充当文字背景后，便可以制造出极为明朗的层次关系。一方面，这段文字神奇得与其他信息迅速孤立开来，另外，有面作为“靠山”让它变得稍微与众不同，并且相比其他文字能被更快地注意到。

面的这种强力属性在B2B外贸网站设计中被用到了方方面面，比如按钮和图标。

对于按钮，面的辨识性为它的层级使用提供了更多可能。

如下图，按钮从样式上来看大致有六种样式，深色、浅色、浅灰色、幽灵、文字和图标按钮，其中面性按钮就占了一半。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户迅速注意到它。因此面性按钮相对对应更高的层级。

当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以强烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、浅灰色等样式。

面无限延展的属性让它可以承载各类信息。包括文字、图片或视频元素，亦或是元素自由组合所形成的信息单元。

并且我们仅加深界面的背景色，就可以基于面的分割性，实现区域的划分。

卡片式设计

卡片在我们生活中随处可见，信件、名片、便利贴、甚至是我们的手机屏幕，它们从形态来说都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。

相比原本平铺直叙的信息，卡片式设计通过以下优点让其风靡设计界——

1.更高效的获取信息

每张卡片都是一个独立的面。从面的辨识性上说，独立和聚焦的特点让卡片与其他内容形成天然的断层，更易形成视觉焦点。

从面的分割性上说，卡片通过牺牲屏幕空间（四周的块外距）的方式让区域的分割更为明确，清晰的层次关系便于用户迅速辨识和获取信息。

2.更多的交互动效

卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。

我们可以通过鼠标左右滑动、展开折叠解锁横向更多的空间。

3.更舒适的视觉观感

当然，卡片并不是通用的，原本可以靠留白或分割线分割的信息，如果为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且浪费空间。

卡片的嵌套和分割

产品的功能并非完全互相剥离的，很多时候存在包含和平行的关系。

这两类关系分别可以以卡片的嵌套和分割进行处理。前者通过卡片堆砌表达信息的包含关系，而后者则通过视觉分割所形成的点击域传达信息的平行关系。

最后

点、线、面理论并不像格式塔、尼尔森可用性法则等方法论那样，为设计者提供切实可行的具体指导，它更类似一种内敛的全局观，帮助设计师抛开颜色、质感等额外手段，从宏观的角度以点、线和面的方式将所有的设计元素抽象化处理，让原本杂乱无序的万象有章可循。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。