如何引导用户在页面中迅速的完成任务流程？

那么，B端产品如何进行页面设计？一、如何做进行页面框架设计在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采

在日常设计工作中，经常拿到产品原型却不知如何下手。 业务和流程基本没问题，但是到了页面设计的时候就卡住了。 那么，B端产品的页面该如何设计呢？ 笔者总结了一些想法，希望对大家有所启发。

前言

在日常的设计工作中，拿到产品提供的原型或者需求清单，在对用户和任务流程进行分析后网站设计，不知道如何开始，或者不知道如何系统地开展设计工作，或者我不知道如何制作满足用户和任务需求的产品。 为业务目标设计解决方案。

有时候流程和业务都不是问题，但是到了具体的页面设计时，就捉襟见肘了。 我们看看有没有办法引导用户快速完成页面上的任务流程。

在一二线城市，相信很多人都去过宜家。 有媒体统计显示，宜家迷宫般的动线设计创造了60%的冲动购买。 宜家的动线设计有效地将用户与各个产品领域连接起来。 精心设计的路线上，商户摆满了各种家居用品。 用户从入口到出口的途中冲动购物率较高。 可能的。 从驱动线路显示中，我们可以看到一条“清晰”的曲线引导用户前进，也为用户穿梭提供了一些捷径。 这就像页面上的友好链接，帮助快速到达目的地。

在整个宜家商场的设计中，我们可以看到，这条清晰但却不存在的线条给商家带来了巨大的好处。 这种设计表达离不开实际现有的悬挂路标、迷你地图、地面标志、醒目的产品名称、价格标签和专门设计的产品堆积起来，当然还有一些消费者手册。

这和我们的页面设计类似。 将商场内的商品展示和页面上的信息组织放在一起，我们可以发现它们都在向消费者或用户传达一种建议和方向。 因此，在页面设计中，我更喜欢称之为页面框架或者页面信息设计，意思是通过一定的框架来组织页面的内容信息，然后呈现出来。 事实上，它是在与用户沟通，使页面易于学习和使用。 。

有句成语叫“暗修栈道，暗渡陈仓”，而我们要做的就是“暗修栈道，暗渡陈仓”。 所谓栈道，就是设计者搭建的页面框架。 经过设计师的合理分析和设计，用隐形的设计方法和看得见的表达方式，给用户明确的“提示”，帮助用户快速完成任务。

1.如何设计页框

现在我们对页面框架设计有了一定的了解，那么我们怎样才能设计出一个好的页面，应该使用什么方法，应该采用什么流程呢？

在《信息架构——超越网页设计》一书中，作者将“如何去做”解释为：设计相应的信息粒度和组合方式，创建一个用户熟悉的环境。 根据日常工作经验，“怎么做”的过程分为以下四个步骤。

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 常用组织方法

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

精确分类采用客观方法，将信息划分为明确定义且相互排斥的区域。 如果用户使用已知且明确的信息，就可以快速找到相应的位置，而且这种分类方法易于维护。 字母顺序、时间顺序、地理位置等都是精确分类的例子。

例如，应用程序中的城市选择是基于字母顺序分类的。 用户可以根据目标城市的首字母快速定位到相应位置。

模糊分类将信息划分为不精确定义的类别，并采用主观方法。 受制于人的主观性和分类标准的模糊性，导致设计和维护困难。 但在某些场景下，模糊分类更为重要和有用。 主题、任务、受众、隐喻取向等都属于模糊分类。 上述操作按钮的分类采用任务导向，将按钮分为创建和编辑两部分。

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

混合方案是B端产品中常见的方法，可以灵活处理页面信息，应对不同用户和信息的场景差异。 在典型的 Ant 页面中，左侧菜单采用模糊分类（主题），而表格信息则采用精确分类（时间倒序）。

3、元件选择

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

3.1 导航

导航是告诉用户他在哪里、他可以去哪里以及如何到达那里的任何方式。 常见的导航可以分为：

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

页内导航：根据当前业务场景配置的导航。 常见的组件有页眉、树形控件、锚点、返回顶部、旋转门等。

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

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

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

3.2 标签

标签通常是向用户显示组织和导航系统的最明显方式，例如与站点范围的导航系统相匹配的文本标签：主页、搜索等。