设为首页 - 加入收藏
广告 1000x90
您的当前位置:主页 > 资源 > 设计理论 > 正文

B 端产品如何进行页面设计?

来源:未知 编辑:天选资讯 时间:2023-02-11

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

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

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

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

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

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

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

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

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

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

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

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

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

  可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后,他表示这两个方案都可以,不需要页面的随意上传了。所以在真实的项目中,要找到真实的需求场景,而不是被用户牵着鼻子走。

  具体如何去了解我们的用户场景,除了业务或者产品经理的阐述和解释,另外我们在前期进行竞品分析的时候也是不错的时机,因为在相似业务场景中,不同平台之间的表现方式不会出现太大差异,相当于设计思考前置,由方案倒推了需求。不过还是建议以具体业务具体分析为主,毕竟每个公司的工作方式是不同的。

  对于设计师而言,目标就是这次设计的目的是什么、解决什么问题、创造什么价值,利用某些设计策略手段,对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务,忠实于用户。一个平台的每次升级侧重点不一样,但是业务和体验是要同时考虑到的。

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

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

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

  用户产生交互行为的最大媒介就是我们的页面,细化一下颗粒度,就会落到我们每一个页面组件上面。而组件并非是简单的平铺,而是要做的设计目标的指导下,选择合适的组件和表现方式,使用户看到页面时,快速的产生恰当的行为。

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

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

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

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

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

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

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

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

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

  精确分类将信息分成定义明确和互斥的区域,采取的是客观态度。如果用户通过已知的明确信息,可以迅速的找到相应的位置,并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。

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

  导航存在的作用是任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式。常见的导航可分为:

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

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

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

  标签通常是向用户显示组织系统和导航系统最明显的方式,例如全站导航系统相匹配的文字标签:主页、搜索等。

  文字标签涉及到页面中所有功能的文案命名,例如标题、导航、按钮、链接、索引词、提示等,这是用户理解信息最直接的方式,所以文字标签的选择要常见并且易于理解,选择行业中的通用用法。比如在协同工具的领域,一些最主要业务单元的命名,无外乎项目、需求、任务、缺陷、迭代等,即使是新出现的平台,也会默认去遵循这个行业命名。因为在业务的发展过程中,这些标签已经成为了协同领域中相互共识的点,如果为了强差异化,反而会增加用户教育的成本,降低平台的使用效率。

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

  高级筛选:高级筛选的判断关系较多,一般会包括筛选条件、筛选关系(且、或)、筛选类型(包含、不包含、等于、不等于等)、筛选值和添加。

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

  页面布局是页面设计的最后一步,是功能信息布局的关键,是为用户搭建易于发现的流程节点。

  对话框:信息承载量小于页面,流程中断性较强,适合轻量级的信息创建、处理和展示;

  如果信息与触发页面有较弱的关联性,需要聚焦当前任务,考虑使用对线 分区域

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

  设计理论和原则是前人在实践的基础上总结出来的规律和方法,虽然设计趋势会发生变化,但是信息的传递原理短期内是相对稳定的。通过理论的应用,引导用户关注页面架构的焦点,就可以达到信息传递的目的。

  F型视觉动线年提出的,模型中指出,用户常用习惯方式是:扫描。在信息浏览过程中,遵循最省力的路径来浏览内容,直至找到想要的信息,因此前几行左侧内容看得多,而右侧内容和页面靠后部分便看得少,通常情况下便形成大体的F型。

  将产品中可有可无或者没有使用频率的功能删除,使用户能聚焦在核心流程上,减少信息干扰和产品维护成本。在具体的设计中,还包括不必要的装饰元素,比如分割,空间分割和线分割保留一种方式即可,叠加使用反而耗费产品的简洁感,给用户增加视觉负担。

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

  将高频的功能和信息适时适地的展示,其他的则进行合理隐藏,也是为了页面聚焦,减少视觉负担,保持页面简洁。像表格中的操作按钮,一般情况下都会将用户将会使用的两个高频按钮放在外面,其他的放在更多中;另外,按钮的使用还有一定的引导性,比如从平台角度讲,希望用户的数据越来越多,所以不是很希望用户删除或注销,所以这类按钮都会放在架构设计的末端。

  一般情况下是将复杂进行转移,将用户的重复或复杂操作,交给后台处理,增加任务处理效率。

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

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

相关推荐:

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

织梦模板大全 dedecms.codesdq 联系QQ:121673232 邮箱:121673232@qq.com

Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

Top