移动端web设计尺寸_移动端表单表格设计指南

@木槿425 授权发布

https://www.zcool.com.cn/article/ZMTE2MTc4NA==.html

-------------------------------------------

感谢大家对黑马家族的支持，今天给大家推荐一篇关于移动端表单设计原则与技巧的文章，希望对你有所帮助！

 正文

B端产品上表单、表格也许复杂的很令人厌烦，但它们是富含数据的文件中至关重要的构成元素，并且值得我们进行细致的设计思考。通过设计更高效、清晰、易于使用的表单、表格，能使用户在使用表单表格时快速分析理解大量数据的体验，提高办公效率。于是本文将分享出个人对表单设计原则与技巧，以下观点是个人观点，如若有更好的方法欢迎提出。

优化信息框架

旧版中TAB选项表形式单一，实际使用过程中长时间单一的选项样式会使用户产生视觉疲劳，降低体验快感。为了提升产品敏感度，修改为按钮图标文字式瓷片卡，增加用户紧迫感和对产品详情的了解欲望。 对于产品分类表单展示从视觉上进行了调整，主要体现在层级关系、亲密关系。目的是让用户表单填写过程中区分层级按钮，分类按钮颜色降低透明度，从视觉层级上更舒服，更精致。操作按钮放在右边更符合用户行为操作习惯，同时当多种产品分类表单时减少户在行动时的困惑和犹豫，确保用户在表单填写过程中的流畅体验，从而实现最终商业上的交易成就。 在旧版表单中分类按钮都用了纯色，按钮位置不统一，按钮本是辅助用户快速做出选项的，但在这个场景中却干扰了视觉。按钮降低透明度帮助用户预先区分出主要行动和次要行动，通过视觉语言强调主要按钮，弱化次要按钮，引导用户进行选择。修改“投保地址”减少手动输入，提供用户的历史输入项 在选项列表中，“是”“否”是选按钮必须是互斥的，这意味着当选择一个选项时，之前已选中的选项会被反选。因为有互斥的存在，选项内容只的两个，所以这一场景中用开关按钮更简洁。 旧版前资料上传列表，第一眼看到的是满屏文件夹，而这些并不能帮助用户进行浏览或操作，反而会造成视觉干扰。改版后对文件图标大小，缩略图尺寸，以及标题信息大小，进行整体调整，从而提升浏览效率。 调整文件图标占比，突显更为重要的标题信息。优化标题，时间信息文字比减弱，标题更明显，提升文件浏览查找效率。缩略图缩小排列与文件形式保持统一，视觉层级浏览理舒适。文件信息列表层级依次为：图标 > 标题 > 时间 。 在资料上传中文件与图存在着两种删除交互方式，给用户造成了困扰操作。改版后将图片与文件的删除操作展示形式统一，同时添加资料上传资料可全部清除功能，给用户减少了单独删除操作。 询价表单是销售人员最高频的路径，针对这个场景，视觉设计必须服从功能设计优先&