• 投诉邮箱:liumeng@lexicx.com
  • 免费咨询电话:4001180686
  • 微信客服
    扫码咨询客服

如何又快又好地设计b端产品的表单?

设计B端内容比较常见形式表格,简要说下表格操作任务:对已经建立的方案可以进行启用/停用,并且对未启用的方案进行修改/删除,已启用的方案只有查看功能;


11


在业务需求的类似的场景下,建立新方案可通过新建或是复制已有的方案。因为是将操作细节内容分享出来,就是对数据处理,通过增、删、改、查四类方法,筛选出使用者需要的数据内容。拿到需求说明,罗列出有几项任务:

第一步是重组布局:从页面布局上进行分层组织,分层组织也是界面布局的重点。

定义每一块区域,每一个模块中,只有唯一的一个优先级最高的操作功能,优先级最高也就是用户最关心的,最首要考虑的;

通过查询模块的查询条件,可即选即得,实时刷新数据。

1·数据新增—新建/复制新建是与表格紧密联系,新建数据有两种形式:模态框浮层:新建数据容量小,保存后,弹窗自动消失,新增数据及时传给父级页面,且自动刷新置顶新一条数据。(模态层和父级页面同属一个页面)

跳转页:一般是新建数据复杂,且量大,操作复杂,才会采用另起新页,但这个也有弊端,新增的数据需要用到本页的信息,如果另起新页,数据同步可能不一致。

复制:在选中条数据的状态处于 [已启用] 状态下,可激活【复制】功能;且复制只能针对一条数据;误操作选中多条进行复制会弹窗提醒用户,只可复制一条,因为在[已启用]状态下也会激活【停用】功能,所以在单/多选方式中采用多选控件

2·数据操作—启用/停用两个互斥功能都可进行批量操作,即使在错操作的基础上多选了几项数据,在用户确认的模态框也只做记录,展示用户选择的记录,不对操作结果产生影响。

数据删除依据业务的需要,本身单条数据的详细信息较多,因此只能允许对单条数据删除,不能批量操作。

4·数据修改和新增数据内容一致,不同的地方就是编辑是对已写入的数据进行修改,其他一致。不管是新增的数据还是修改的数据,数据量都很大,那么可以预见下,后期可考虑在编辑页面补充一个【暂存】功能

5·刷新

6·总结

工作中所要处理的页面内容,不会像设计稿那样好看,饱满。数据层次不齐,也不会顺顺当当的进行,总有各种各样的需求发生,伴随各种各样的细节需要调整优化,设计能做的就是抓住每一个槽点,磨平它,和产品和开发朋友们协调处理。以功能为主导,考虑技术的实现方案、考虑多个需求的优先级。

返回顶部