专栏名称: 超人的电话亭
只分享有价值的设计经验。
目录
相关文章推荐
字体设计  ·  第一波阵容重磅公布 ·  2 天前  
始室  ·  首发 . Vellum Studio 极简与古典 ·  2 天前  
始室  ·  首发 . Vellum Studio 极简与古典 ·  2 天前  
庞门正道  ·  老板，他只画了一根线就完稿了！ ·  4 天前  
庞门正道  ·  当男人爱上化妆，不得了！ ·  5 天前  
极市平台  ·  Self-Attention & ... ·  6 天前  
极市平台  ·  Self-Attention & ... ·  6 天前  
51好读  ›  专栏  ›  超人的电话亭

原来B端组件还能这么改版

超人的电话亭  · 公众号  · 设计  · 2024-11-18 22:38

正文

今天演示的是一个正式课程中讲到的组件案例，因为时间关系不会课上全部做完，所以再做个额外的分享，把设计的思路和细节展示清楚。


设计分析

这次改版的对象是一个采购流程中的物料表单，用于填写所需采购物料的具体参数、明细，下面是原设计的样式。
在进行复杂组件交互设计之前，首先要对它的内容做一些具体的分析。
组件的基本认识：
  • 组件功能：用于添加需要采购的物料清单，并填写每个物料的对应信息
  • 业务目标：让审批和采购员对具体采购内容有清晰的认识

  • 物料要求：根据项目要求，往往会添加数十个物料，且物料差异极大

组件的核心操作：
  • 物料的数量可以增加和删除
  • 填写好的物料可以复制出新的进行编辑
  • 物料中包含很多信息是选择不用填写

组件的字段信息：

组件的问题分析：

  1. 展示内容不全，需要一直左右滑动视图区域
  2. 表格形式意义不大，参数上下对比需求不多
  3. 表格内的表单缺乏引导性，必填项、选择、不可填没有示意
  4. 物料参数的填写会根据物料类型有一定的差异不用全填

设计的难点总结：

  • 数据量较多，如何进行有效展示
  • 要填写信息也多，如何提高填写效率
  • 可填写信息能相互影响，如何呈现
前期的分析对于任何复杂组件设计都是必要的，为后续设计的开展提供必要的目标指引，也是对设计好的方案进行基本检查（可用、完整）的必要条件。
一些细节的操作的问题太多就不截图了，可以直接看后续的改动说明。


设计实践

对复杂组件的设计也是总分总的模式，首先确定交互框架和大概形式，然后再梳理控件细节。
再框架层面，组件包含三种模式：
  1. 初始空状态
  2. 添加物料编辑模式
  3. 查看校对模式
在调整中，我认为原有的表格模式是没有价值的，首先需要看全，所以将每个物料的展示用卡片列表的模式进行改动。
同时，每添加一个物料要编辑的信息不少，且表单和展示会有比较大的差异，所以区分编辑和查看模式，也可以让编辑状态更加专注、高效。
下面是对框架的基本改动：
空状态：新增和批量操作上下都放，适应出现数十条物料时顶部和底部距离很远的情况。
添加/编辑模式：每次新增物料使用单独的面板，根据填写的信息进行大类的划分，部分次要信息可以隐藏，需要使用的话再通过按钮添加，也为了满足后续一系列字段更改、添加的可能。
查看模式：使用卡片化的设计，对信息进行聚合，便于浏览和检查。
有了基础的框架，然后就可以开始具体的设计了，而重点先从添加的表单面板开始。
首先是解决第一个字段物料编号的交互问题，有一部分物料是后台预设过的，才会生成编码，原设计中编码的操作就是从后台的物料库中选择预设物料，并自动填充预设信息。
所以，我们可以先把添加物料区分成两种模式，“选择预设”或者“自定义”。而这个选择没理由直接做成交互步骤，所以我的处理是打开后默认就是自定义模式，而添加选择物料按钮，如果点击按钮完成选择就是预设模式，没有则是自定义模式。
然后添加下面的表单控件，首先预设模式和自定义模式的定义是有区别的，因为预设物料的部分信息不可编辑，所以控件需要提供可编辑和不可编辑的模式。
另外属性的编辑也有选择和输入两种模式，原设计中大量使用弹窗来进行品类、属性的选择，但除了预设物料外这些弹窗太“重”，因为选择的对象数量和信息量不多，所以统一替换带有搜索的下拉菜单。同时，每个信息分类点击添加按钮也可以快速选择要添加的属性。
通过对上面这些内容的定义，完成添加物料的两个模式的表单。
之后，开始查看模式的物料卡片。因为我们将物料信息分成了三个大类，所以卡片的主要区域也分成3个大区。
然后，再根据每个区域会有的内容进行填充，因为不同物料包含的属性不同，所以卡片要支持比较灵活的内容布局形式。
到这里，基本的改动也就完成了，剩下的就是输出交互意图，使用连线和相关说明完成对应的交互文档就结束了。
因为是正课的演示补充，不是纯分享，所以内容后面才会做完就不分享出来了，交互应该怎么做可以看前面做过的分享。
https://mp.weixin.qq.com/s/NSE6tmwFkYImBieoyElUiw
可以再根据结果对比，和原版有哪些区别，带来哪些提升。


结尾

还是那句话，交互的设计是根据对需求的理解给出的解决方案，而方案只有合适的，没有“完美的”，只要你对需求分析做的够全面，你就能自己检查方案的可用性，别人帮不了你。
而交互方案要解决的是核心的问题，而不是应对一些鸡毛蒜皮、毫无意义的抬杠，思路清晰才能应对评审或者面试的考验！

我们下篇再贱~
B 端产品设计全能班招生中，课程介绍：B端开启硬核变强 | 课程再次更新，来课程找我变强，等你们了~

推荐文章
字体设计  ·  第一波阵容重磅公布
2 天前
始室  ·  首发 . Vellum Studio 极简与古典
2 天前
始室  ·  首发 . Vellum Studio 极简与古典
2 天前
庞门正道  ·  老板，他只画了一根线就完稿了！
4 天前
庞门正道  ·  当男人爱上化妆，不得了！
5 天前
极市平台  ·  Self-Attention & Transformer完全指南：像Transformer的创作者一样思考
6 天前
极市平台  ·  Self-Attention & Transformer完全指南：像Transformer的创作者一样思考
6 天前
小学数学  ·  小学生计算粗心的10大原因，不改还会继续错！
7 年前
学生时代  ·  好了电灯泡一点都不好做
7 年前
环球资讯+  ·  （听故事）亡命金三角的国民党6万残军之谜(上)
7 年前
第一电动汽车网  ·  从济南展锂电的全面爆发，看天能电池的远见卓识
7 年前
广东台今日关注  ·  手机可以随时随地看《今日关注》啦！
7 年前
Sov5搜索   ·   小百科   ·   移动版
51好读 - 好文章就要读起来!