中后台产品的表单设计,看这一篇就够了(附原型规范)

中后台产品的表单设计,看这一篇就够了(附原型规范),第1张

中后台产品的表单设计,看这一篇就够了(附原型规范)

我相信一篇文章一定能帮助你在封闭的情况下对材料的形式构思。

媒介

是数据信息录入和信息提交的一般情况,在基于web和移动的终端中非常常见,但是由logo、输入、提交按钮等各种元素组成。

材料为 *** 作2服务。由于 *** 作庞大,表格往往呈现出字段名多、案例纯、专业能力强的特点,在立意上需要考虑大量内容。

本文经过自己项目经历的全过程,参考antd的内容,提炼出了一套适合中型素材的形态立意规范。这已经分享了,期待能给大家一些帮助。

从用户的角度看表单。

从开始挖到提交,用户为战而停的逻辑是什么?

1.形成团队检查

当用户已经看到一个表单时,需求是迅速的,上帝知道一些重要的情况。比如:表格是干什么用的?需要挖写一些专用工具?需要多长时间?当你对表格有了一定的理解后,开始终止下一步。

2、单项工程检查、挖掘、禁止

用户在开始挖写物品时,会经历一个检查、挖写、封禁的过程。

检查:哪个单项工程应该投入什么?怎么控制?外卖有什么要求?

Dig:在你已经了解了你想要写什么之后,尽可能方便地挖掘和写你的输入值。

审查:挖完写完,要检查挖的准确性。

3.团队禁令

每个单项工程挖完写完之后,团队又会封杀一遍。有没有漏挖?你挖错了吗?在团队封杀并确定准确无误后,再次提交。

4.提交,重新调整,提交才能赢。

由于后端开发判断的一些输入要求,第一次提交后,公司的输入可能不满足前置条件。这时再次调整需求,提交,提交歌曲获胜。

为用户设计表单

知道了用户的需求,每个人的需求就有了有目的的构思和对用户需求的陈述的变质。

1.以便更好地方便用户团队的检查。

1.逐步地

对于有更多字段名的表单,需求被生成为多个步骤。用户可以看到速度的数字、标题和指示。

2.整理

统一步伐中的相关字段名称可以包含在一个组中。经过全过程分割线识别的中间组选择,组题可以主要表现这种情况的内容。

3.字体设计

用户的视线从上到下。为了更好的易读性和美观,需求符号的左端对齐,输入区域的总宽度相同。

2.为了方便用户查、挖、写、禁个别项目。

1.文本识别

徽标对输入音符施加压力。设置徽标要求是为了帮助用户掌握输入和输出。

2.输入提醒。

当徽标不足以准确指示输入时,应使用输入提醒。输入大量墨水笔提醒压力。

常用的输入提醒方法

图中输入倡导、输入提示、输入帮助的提醒等级由强到强。但是,当强等级提醒足以表达提醒时,就没有必要使用强等级提醒。

3.高质量默认值

当某些输入值可以很大概率算出来时,建议为它们设置默认值。优质的默认节流用户的挖写时间。注意,默认值使用不当,很容易侵犯用户。

4.结构化布局

某些具有固定布局的输入值,如银行支票xyk号、身份z号、脚体号、货物d簧和百分比,在布局情况下是必需的。结构化布局可以阻止用户失败,也可以使页面更加美观,可读性更好。

5.可选挖掘/强制挖掘

表单的输入不仅有必需的字段名,还有可选的字段名。Must-borrow是可选的,当需求明确时会通知用户。但是接受减号*的方式暗示你必须挖,标记后减号可选的方式暗示你可以选择挖。

6.黑暗的暗示

利用一般的认知能力,强有力地给用户提示。例如,如果需要限制文本输入区的墨水笔数量,可以使用以下方法:在整个过程中,通过比较输入标识符的数量和数量限制来提示用户。

7.检查和反思

终止对用户输入值的验证,并获得响应。

检查内容:是否可以空,案例布局是否准确,是否符合 *** 作逻辑。

验证方法:前端开发验证一般使用正则表达式,后端开发验证需要考虑运算逻辑。

Check-in:前端开发检查一般采用即时检查和关键分离检查,后端开发检查已经提交。

反思案例:准确性、问题和警告(有风险但可以在整个过程中得到验证)

反映的方式:

输入四周的墨水和笔

标志上的浮动层

齐举反思

3.为了让用户团队更容易压制战的提交。

提交过时的后端开发验证,没有符合运营逻辑的内容需求,有反映的内容,方便用户准确定位调整。

表单经常应用部件。

往往应用组件的内容并不是正文的重要部分,也没有详细的解释。喜欢的用户请移步antd了解。

摘要

之前做了一个版本的表单标准,拿回来之后得到了很多反思,我在上面做了一些极端的工作。希望这个表单规范能在一定程度上启发大家,感谢大家的反映。

下一步计划会写在数据图表规范的内容中,主次会触及大数据可视化圈的内容。

这个下载地址:https://pan。百度search.com/s/1g70dmvlzudjbhijq9yjbca

这篇文章是由@Stream风本创作并发表的。我已经同意了,并劝阻拦截。

图片来自PEPEPEELS,据CC0和平谈判。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/777183.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-03
下一篇 2022-05-03

发表评论

登录后才能评论

评论列表(0条)

保存