B端产品若何进行页面设计？

序言

在日常的设计事情中，拿到产品给的原型或者需求清单，剖析完用户和任务流程后不知道该如何下手，或者不知道如何系统地开展设计事情，再或者不知道如何做出符合用户和业务目标的设计方案。

有的时候流程和业务都不在话下，但是到了详细的页面设计就会捉襟见肘。
如何勾引用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。

在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了60%的冲动购物。
宜家的动线设计将用户与各种商品区进行了有效的串联，在刻意设计的路线上，商家填满了各种家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。
从动线展示图中我们可以看到，一条“清晰明了”的曲线勾引用户提高，同时还会供应一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。

在全体宜家阛阓的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小舆图、地面标识、能干的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。

这与我们的页面设计有着异曲同工之妙，将阛阓的商品陈设和页面中的信息组织放在一起我们可以创造，都在向消费者或用户通报一种建媾和方向。
以是，在页面设计我更乐意称之为页面框架或者页面信息设计，便是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上便是在与用户沟通互换，使得页面易学易用。

有一个针言是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道便是设计师所搭建的页面框架。
经由设计师的合理剖析和设计，利用看不见的设计手段和看得见的表现办法，给予用户明确的“提示”，帮助用户迅速的完成任务。

一、如何做进行页面框架设计

前面对页面框架设计有了一定的理解，那么若何才能设计出好的页面，该当利用什么方法，采取什么流程。

在《信息架构-超越Web设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合办法，为用户创造他们所熟习的环境。
根据日常的事情经历，将“如何做”这个过程分成了以下四个步骤。

1. 理解业务

在动手进行整体页面设计之前，必要的设计事情便是进行切实的业务剖析，理解我们要做什么，为了什么做。

在辛旭日的交互设计五要素中强调了，交互设计的工具是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，末了达成了他的目标。

那么如何让用户产生更有利于目标实现的行为，在设计之前先理解一下这些业务要素。

1.1 用户

大略来说便是利用我们平台的人。
在一些B端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。

管理者：我希望能够看到团队中所有人的事情进度。

普通员工：我希望能快速的完本钱身的任务。

这两种角色的诉求都是用户需求，剖析阶段须要做好用户分层，在后面的目标拆解中就可以得到更明确的方向。

1.2 场景

对付用户提出的反馈或者见地，要切实考虑运用处景，辨别用户供应的是需求还是方案。

比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台便是这么做的。
接到这个反馈，我的第一反应便是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有韶光做这个。
找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件须要本地保存后才能上传，很未便利。
我向她供应了我们目前平台要履行的方案：

可以直接在描述的富文本中编辑保存；可以不才个迭代将要实现的备注中直接粘贴上传附件。
听了我的阐明后，他表示这两个方案都可以，不须要页面的随意上传了。
以是在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。

详细如何去理解我们的用户场景，除了业务或者产品经理的阐述和解释，其余我们在前期进行竞品剖析的时候也是不错的机遇，由于在相似业务场景中，不同平台之间的表现办法不会涌现太大差异，相称于设计思考前置，由方案倒推了需求。
不过还是建议以详细业务详细剖析为主，毕竟每个公司的事情办法是不同的。

1.3 目标

对付设计师而言，目标便是这次设计的目的是什么、办理什么问题、创造什么代价，利用某些设计谋略手段，对未来一段韶光内所要达成的预期结果。
设计的目标是要寄托于业务，虔诚于用户。
一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。

业务提出了今年我们要在去年的根本上，提升用户满意度15%

那么设计就该当去剖析低满意度背后的缘故原由是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件利用等问题。

当我们确定好影响满意度的成分之后，可以对个中一个成分提出设计目标：缩短用户完成某个任务的韶光20%，以此来聚焦用户操作流程的低效问题。

设计目标是在理解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为详细的设计要素的过程。

1.4 媒介

用户产生交互行为的最大媒介便是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。
而组件并非是大略的平铺，而是要做的设计目标的辅导下，选择得当的组件和表现办法，利用户看到页面时，快速的产生恰当的行为。

1.5 行为

在界面中中用户紧张的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑若何的触发形式能利用户最低本钱、最顺畅地完成行为。
当然行为并不是伶仃存在的，它须要多个动作和媒介，以及视觉行动等共同构成。
而如何让用户产生恰当的行为，须要功能信息显性化的设计。

2. 组织信息

组织信息是页面设计的主要组成部分，我们看到的页面信息都是整洁的，每个整洁的背后又暗含了分外的组织关系。
对付业务剖析或者需求文档所得到的业务信息须要设计师进行下一步的精加工，首先要理解当前所处页面的紧张功能是什么，其次是明确功能信息并进行相应的剖析，得到可以搬运罗列的功能块。

《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理办法。

2.1 明确信息

通过业务理解，明确当前页面将要进行哪些操作或者该当具备哪些功能点。

以上图所展示的大略需求为例。
从当前页面中我们可以看到，这是一个任务管理的模块页面。
在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。
而这些信息的来源便是上面我们剖析的业务场景，这只是经由整理之后的。

2.2 罗列信息

明确了业务信息之后，相对应的我们要将我们页面布局所须要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。

对付刚才的信息我们可以大略的罗列如下：

创建A、创建B、创建C、修正、删除、标题、筛选状态、关键词筛选、数据列表

2.3 导入不雅观点，确定关系

确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给干系信息找到恰当的位置。

以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。
可以分为三类：操作、筛选和数据展示。

如果我们对个别的信息再进行授予不雅观点，还能涌现新的关系。
如果从业务利用频率进行不雅观点导入，那么任务A、B、C的利用频率依次降落，末了可以确定的优先级关系便是创建A>B>C。
在任务页面中，创建类的操作优先级要明显高于编辑类，以是“创建”>“编辑”。
操作和筛选作为数据产生和查找的工具，须要放在更显眼的位置以更随意马虎被创造。

以上是对展示页面的大略信息进行的处理，对付一些表单页面我们也可以采取相应的策略。
通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采纳相对应的设计办法。
针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的利用。

当然组织信息的末了产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。
组织信息是继理解业务之后的信息处理和洗濯的步骤，也是业务场景以及设计目标的运用，可以为后面页面布局供应更有针对性的建议。

其余，我们还可以理解一些常规的信息组织办法。

2.4 常见的组织办法

常见的组织办法可以分为精确分类和模糊分类。

精确分类将信息分成定义明确和互斥的区域，采纳的是客不雅观态度。
如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类办法好掩护。
字母顺序、韶光顺序、地理位置等都属于精确分类。

比如App中的城市选择，便是采纳的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。

模糊分类将信息分成禁绝确定义的种类，采纳的是主不雅观态度。
受困于人的主不雅观性和分类标准的模糊性，因此很难设计和掩护。
但是在一些场景中，模糊分类却更主要和有用。
主题、任务、受众、隐喻导向等属于模糊分类。
上面操作按钮的分类便是采取了任务导向，将按钮分成了创建和编辑两个部分。

京东商城的左侧商品分类采取的便是模糊分类。

稠浊方案是在B端产品中常见的办法，能灵巧的处理页面信息，应对不同用户和信息的场景差异。
在Ant design的范例页面中，左侧菜单采取了模糊分类（主题），而表格信息采取的是精准分类（韶光倒序）。

3. 组件选择

组件的选择是信息可视化的第一步，是为信息探求相应容器载体的过程。

3.1 导航

导航存在的浸染是任何奉告用户他在哪里，他能去什么地方以及如何到达那里的办法。
常见的导航可分为：

全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。

页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。

返回导航：常见的组件有面包屑、返回按钮等。

友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。

其他导航：常见的有步骤条、分页器等。

3.2 标签

标签常日是向用户显示组织系统和导航系统最明显的办法，例如全站导航系统相匹配的笔墨标签：主页、搜索等。

标签分笔墨标签和图形标签：

笔墨标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的办法，以是笔墨标签的选择要常见并且易于理解，选择行业中的通用用法。
比如在协同工具的领域，一些最紧张业务单元的命名，无外乎项目、需求、任务、毛病、迭代等，纵然是新涌现的平台，也会默认去遵照这个行业命名。
由于在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教诲的本钱，降落平台的利用效率。

图形标签在页面设计中，作为笔墨标签的补充，会更形象的传达信息。
紧张运用的地方的是图标。
图形的利用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考本钱。
在Iconfont上搜索“返回”，检索的结果都是相似的箭头，纵然有设计师会做一些样式调度，但是都离不开箭头这个符号，由于这已经形成了深刻的用户心智。

还有图文类的软件，我们可以看到他们上面展示的笔墨和标签都是相似的，大家都在做一些微调，但是都在遵照最初Office给用户形成的符号认知。
以是针对新的平台产品，除了调研用户对标签的利用习气之外，还可以参考竞品的利用现状，这属于行业的隐形共享资源。

3.3 搜索

搜索系统是用户快速探求信息的工具，搜索系统的利用要根据页面信息的内容量和场景哀求进行配置选择。

常见的组件可以分为：

输入类筛选：输入类筛选须要用户输入一定的文本关键词，筛选出对应的数据；选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直不雅观选择；分页筛选：分页Tabs类似于平铺类筛选，都是将待选项平铺出来；高等筛选：高等筛选的判断关系较多，一样平常会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、即是、不即是等）、筛选值和添加。

以上是阐述了对页面构造设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的利用解释，这里不再描述。

4. 页面布局

页面布局是页面设计的末了一步，是功能信息布局的关键，是为用户搭建易于创造的流程节点。

4.1 选载体

首先根据当前的业务的场景特点，先选择信息的承载办法。

目前有三种办法：页面、对话框、抽屉。

页面：信息承载量最大，适宜信息浏览、数量级较大的创建和展示；对话框：信息承载量小于页面，流程中断性较强，适宜轻量级的信息创建、处理和展示；抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。

在详细的利用过程中：

如果信息量较大，有组合办法比较繁芜的信息创建和展示，考虑利用页面；如果信息与触发页面有较强的关联性，考虑利用抽屉；如果信息与触发页面有较弱的关联性，须要聚焦当前任务，考虑利用对话框或页面。

4.2 分区域

在确定好利用的承载办法之后，要对基本的大块信息区域进行划分。

首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。
因此要放在非常显眼且稳定的地方。

以一开始展示的需求页面为例，根据F型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。
在大厂的范例页面中我们也可以看到相应的实践。
顶部和左侧比较，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。

其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更随意马虎创造的固定位置，根据F模型，放在信息展示区的顶部。
这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。

按照本文的阐述，选载体和分区域略显啰嗦，在实际的事情中，每每导航等框架组件的选择与分区域同时进行，以是，我们一样平常可以从以下方面迅速开始：

如果是老平台，只是做部分功能扩展，须要按照原来的页面框架设计进行新的功能设计，保持界面的同等性。
如果是新的页面，可以参考竞品的页面，由于他们的处理办法已经经由市场和用户的考验，具有一定的可靠性。
参考各大厂规范的范例页面，这些页面是他们内部设计师经由多次谈论才上线对外，运用处景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟习。

4.3 调布局

在划分好区域之后，须要对页面中的组件布局进行调度。
比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了添补和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据利用频率高低进行相应的排序。
同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空缺，可以将筛选类组件右对齐。

在B端产品中常见的表单页面中，根据Ant design的繁芜度模型，从页面信息的繁芜度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更随意马虎理解和查找的内容模块布局。
个中步骤分组一样平常用在创建页面，Tab分组一样平常用在展示页面。

在详细的组件布局中，还须要考虑组件的对齐办法、尺寸、位置等，这些都须要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。
如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会创造做左对齐的办法比较常见，由于在一屏内它的信息承载量是最大的，屏效比最高。

4.4 建议

4.4.1 设计理论的运用

设计理论和原则是古人在实践的根本上总结出来的规律和方法，虽然设计趋势会发生变革，但是信息的通报事理短期内是相对稳定的。
通过理论的运用，勾引用户关注页面架构的焦点，就可以达到信息通报的目的。

a、视觉动线理论

F型视觉动线模型是尼尔森于2006年提出的，模型中指出，用户常用习气办法是：扫描。
在信息浏览过程中，遵照最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，常日情形下便形成大体的F型。

Z型视觉动线模型也是尼尔森对用户的浏览习气进行研究后得出的结论，一样平常会用在门户类、笔墨类网站，Z布局运用很大略，将主要的信息元素放到Z形上面，用户扫描过程中会沿着这条路径获取信息。
但是Z形也有弱点，用户很随意马虎会受其他显眼的元素吸引，以是在布局的时候，要掌握好这些元素。

b、交互设计四策略

删除：

将产品中可有可无或者没有利用频率的功能删除，利用户能聚焦在核心流程上，减少信息滋扰和产品掩护本钱。
在详细的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种办法即可，叠加利用反而耗费产品的简洁感，给用户增加视觉包袱。

面对种类和数量浩瀚的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。
刚才上面的操作关系便是分类的一种，面对逐一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。
还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的同等性。

隐蔽：

将高频的功能和信息应时适地的展示，其他的则进行合理隐蔽，也是为了页面聚焦，减少视觉包袱，保持页面简洁。
像表格中的操作按钮，一样平常情形下都会将用户将会利用的两个高频按钮放在表面，其他的放在更多中；其余，按钮的利用还有一定的勾引性，比如从平台角度讲，希望用户的数据越来越多，以是不是很希望用户删除或注销，以是这类按钮都会放在架构设计的末端。

转移：

一样平常情形下是将繁芜进行转移，将用户的重复或繁芜操作，交给后台处理，增加任务处理效率。

c、格式塔生理学

格式塔生理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉方向，从而快速的辨别。

在这里紧张说一下这四个原则：

靠近性原则：在人们的视觉感想熏染中，会习气于将彼此靠近的元素算作一个整体。
元素之间的间隔越小，解释彼此的关系越近，当然，这个原则也是反过来用，如果想让人感想熏染到两个元素不是一个整体或种别，那么把他们的间隔拉大即可。

购物APP的卡片浏览模式，图片下的标签与图片的间隔差异，可以让人轻易的区分出，图片和标签的整体关系。
我们在划分区域的时候，一样平常内容区中导航区、数据展示和操作可以通过间隔来划分，使页面归类感更强，提高信息获取效率。

相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量浩瀚的元素，可以根据样式分成多少组合。
比如形状、大小、颜色、方向等都是视觉判断的维度。
与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。

在美团APP的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。

闭合性原则：人们的视觉会主动将不完全的图形补全，形成一个完全的整体。
人类的感知是完全的、闭合的。

IBM的logo是闭合原则运用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母IBM。

主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素每每会被人们认为是主体，会将底部元素当作背景。

比如对话框的利用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户通报信息。

4.2 遵照用户习气

在产品调研前期，我们须要对用户习气有全面的认识，比如当前用户日常常用的软件是什么，基本的事情流程，具有什么业务习气。
这些采集信息将会在详细的页面布局中给我们带来非常大的辅导浸染。
如果说设计之初对用户是未知的或者刻意差异化，那么用户利用和理解平台有可能会带来额外的本钱。

遵照用户习气，大略来说，便是让用户一眼就能知道平台该当怎么用，不须要思考就能理解平台所供应图形和措辞。
当然，对付一些繁芜的流程，还须要建立恰当的帮助系统。

这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的推敲和考虑，对前面的一些内容再做出调度，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情形快速实践的，并没有标准答案。
以上是作者自己根据日常的事情经历复盘整理，如果有其他的补充分享，欢迎一起互换。

参考：

https://ant.design/docs/spec/form-page-cnhttps://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeawhttps://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ

本文由 @聿来体验条记 原创发布于大家都是产品经理，未经作者容许，禁止转载。

题图来自Unsplash，基于CC0协议。

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。