恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
浅谈ToB产品体验优化-信息结构化思考
0.0°
2017-08-08 原创文章 经验/观点 举报 6969 185 108 5

引言:此文是近期途牛UED内部纷享会的一次设计师演讲主题,有感于近期做的一些B端项目,设计师对信息结构的一些想法...不足之处还请大家交流指导.


有的时候我们在做项目的过程中经常会遇到以下两个问题:

1、为什么刚线上的界面短时间内需要大改,有时甚至是推翻了重来?

2、为什么总感觉原型有什么不舒服的地方?


这时候很有可能是页面的信息架构出现了问题!

任何产品都有信息结构,简单或复杂...信息架构是产品的骨骼.


下面我们从两种维度来解析下信息架构的层次:

一、轻重纬度

此维度是从产品架构的轻重来划分的,一般的对To C重体验的服务性APP都是轻架构,对ToB重功能的基本是重架构。


轻架构的产品简单明了,并不给用户带来太多的学习成本,可用且效率高,优点是轻松愉悦,能被用户共感感知;而重架构的产品则较为严谨,有一定的学习成本,用户群体较为聚焦,优点是交互结构完整,缺点是设计师对全局的把握度需要增高。


Image title


二、导向纬度

此维度的分类依据是用户的使用场景,以及用户使用目的。


主要分为任务导向型及浏览导向型:

任务导向型的产品,如我们的ToB产品招客宝业务,对于快速完成任务的诉求较高,如果在此过程中用户需要靠浏览、靠猜来使用产品特性完成任务,必然会引起用户的反感,继而降低产品的使用率。


浏览导向型的产品,如虾米音乐、微信这类ToC产品如果不是任务导向,那很有可能就是用户在无聊,需要时才会进入浏览,使用的场景较为碎片化,因而对于内容的丰富度要求则会相对变高。

Image title


下面,是前段时间为公司广告竞价平台——招客宝的设计经历,来详细描述一样如何组织信息,如何设计信息架构?


招客宝业务是途牛今年新推出的广告位推广平台,其目标用户主要针对产品经理或供应商。前期我们通过功能分类,对内容进行信息分组,了解用户动线,归纳出相对独立的3个信息单元即:竞拍、上架、推广。


Image title


如何梳理这三个模块的架构?这其中的方法论既有有从上到下的(决策型功能梳理),也有从下到上(内容整合型功能梳理)。在实际的项目过程中,两种方法一般都是结合在一起使用的,既有老板一拍脑袋决定的功能,也有用户调研画像后产生的功能,具体放在什么位置,和产品业务的逻辑流程有关。


下面是我们简单的罗列做招客宝的流程:

Step1. 信息架构流程梳理

绘制主流程其实在后台设计中不可或缺,因为一个好用的后台,必须有良好的信息反馈机制,如果设计者不摸清用户的使用流程,哪里出错应该有提醒,哪里应该跳出说明提示这些交互就无法完成,所以,在设计后台的时候和产品经理详细确定了每个步骤的流程。

招客宝产品作为一个重架构任务导向型的产品,用户角色的专业度较高,他们往往有着明确的目的来寻找自己想要的功能模块,所以如何高效的完成操作任务是我们需要关注的问题。


Image title

Image title

Image title


Step2. 视觉布局

而当信息结构划分完成,接下来就是视觉布局的事了。

1)视觉动线引导

首页我们根据框架体系绘制出首页的草图(左图),其次,搭建960栅格系统确定每个模块的位置、大小(右图)。在设计模块功能性布局的时候,我们依据视觉动线的原则从左到右,从上到下的原则,划分功能模块的主次。

Image title

下图为不同的视觉动线适合不同分类的网页布局,主流的观点一般F型布局适合内容为主的网页,比如之前做过的评价页等;

Image title


而Z型布局比较适合这种不以文本为中心的网页(比如这个项目的首页)。

视觉动线tips:1. 用户不读取整个页面,他们只是扫描  2.头两段/标题应传达最重要的信息。

Image title



2)简化表单操作

而对于招客宝这类对于表单依赖度更高的B端产品,表单在整体的设计中也是不可或缺的。

在之前的项目中,我们或多或少都接触过表单的设计,一个好的表单应该尽量减少很多惹眼的视觉化元素,因为这样会妨碍用户对表单所提问题的理解,所以在此次项目设计中,我们建议每页只做一件事。

Image title


16年我们在设计笛风分销平台的APP设计工作中,涉及到了设计一个计算表单,这是一个核对表单类型组合而成的一个多步骤表单,(下图一)将选择团期,出游价格人数都收在一个弹出页面的手风琴面板中,(下图2)是一个长页面包括了团期详情,价格&优惠、联系人信息、游客信息等模块,这样的长表单一旦用户填错了数据很难发现,修改也很苦难,因此分拆成几步会是个不错的方法。

Image title




所以实际在应用到招客宝平台的设计时遇到一个登录的场景。由于招客宝的用户较为特殊,需要增加了用户选择身份的过程;在一开始的原型中,项目经理本打算将两种身份登录做在一个界面中,然而身份1产品经理用的是用户名和密码登录,而身份2供应商则链接到NBooking的登录页登录,这是两个完全不同的交互模式。在这个登录表单中应该只包括少量的信息输入:用户名、密码、操作按钮、密码帮助等选项。经过讨论,简化操作流程,最终决定将登录分为两步:第一步只解决身份识别,第二步再根据身份的不同选择不同的登录页。

Image title



(图2为产品经理登录的界面)

Image title


(表单设计中的操作优化)


Step3. 搭建规范

在界面设计完成后及时将界面中的控件提取出来制成组件表,不仅可以审视相同控件尺寸风格是否在视觉上一致,也能方便平台二期的功能扩展及设计师间高效沟通,也能为后续的业务拓展营造一个统一的品牌调性。

Image title


总结:

当设计师做完一个产品设计项目需求,可以回头想想这个产品信息架构你做了什么样的创新、调整等,产生了什么价值 ?


不要仅仅拘泥于做界面元素的规范、设计细节等问题解决。
因为信息架构,是设计大局观的最好练功秘籍。


Image title


更新:2017-08-08

收藏

185人已收藏

途牛UED

设计是无言的服务,说的真好!

  • 48

    作品

  • 6753

    粉丝

  • 3

    关注

  • B端产品设计实录——途牛商旅全案塑造
  • 官宣!《设计驱动力》正式上市!
  • 途牛新设计探索解析
  • 海报小程序设计如何联动社群营销

    猜你喜欢

      2017-08-08 原创文章 经验/观点 举报 6969 185 108 5

      浅谈ToB产品体验优化-信息结构化思考

      0.0°

      你确定要举报浅谈ToB产品体验优化-信息结构化思考

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      108
      185
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录