在日常工作中的设计工作中,常常拿到产品的原型图不知道如何下手,业务与流程都基本没问题,真正到了页面设计时就会卡住。那么,B端产品如何进行页面设计?作者总结了一些思路,希望对你有所启发。

设计b端产品的心得 B端产品如何进行页面设计(1)

前言

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

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

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

设计b端产品的心得 B端产品如何进行页面设计(2)

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

这与我们的页面设计有着异曲同工之妙,将商场的商品陈设和页面中的信息组织放在一起我们可以发现,都在向消费者或用户传递一种建议和方向。所以,在页面设计我更愿意称之为页面框架或者页面信息设计,就是将该页面的内容信息通过一定的框架组织起来,然后呈现出来,实际上就是在与用户沟通交流,使得页面易学易用。

设计b端产品的心得 B端产品如何进行页面设计(3)

有一个成语是“明修栈道,暗渡陈仓”,而我们要做的是“暗修栈道,明渡陈仓”,所谓的栈道就是设计师所搭建的页面框架。经过设计师的合理分析和设计,使用看不见的设计手段和看得见的表现方式,给予用户明确的“提示”,帮助用户迅速的完成任务。

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

前面对页面框架设计有了一定的了解,那么怎样才能设计出好的页面,应该运用什么方法,采用什么流程。

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

设计b端产品的心得 B端产品如何进行页面设计(4)

1. 了解业务

在着手进行整体页面设计之前,必要的设计工作就是进行切实的业务分析,了解我们要做什么,为了什么做。

设计b端产品的心得 B端产品如何进行页面设计(5)

在辛向阳的交互设计五要素中强调了,交互设计的对象是行为,他们之间的联系可以概括为:用户在某个场景下通过某种媒介产生行为,最后达成了他的目标

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

1.1 用户

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

管理者:我希望能够看到团队中所有人的工作进度。

普通员工:我希望能快速的完成自己的任务。

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

1.2 场景

对于用户提出的反馈或者意见,要切实考虑应用场景,辨别用户提供的是需求还是方案。

比如上个月用户提到一个需求,希望在某某页面中,复制粘贴就可以上传图片,某某平台就是这么做的。接到这个反馈,我的第一反应就是你在“教我做设计?”(开玩笑