论移动端产品细节的重要性.docxVIP

论移动端产品细节的重要性 不管是APP还是Web端界面设计，我们最常见的元素应该就是表单了，表单几乎是每一款数字产品都不可或缺的组成部分，也是设计师必须要亲身经历的设计组件之一，它的作用无可替代。 表单是提升用户体验的一个核心点，但在视觉呈现的时候，大部分都忽视了它的体验。对于一个设计师来说，就需要根据实际情况在设计中进行灵活调整，设计出符合用户预期的表单。 不仅能带给用户操作效率上的提升，节约时间成本；还能避免错误出现，在体验过程中心情更加的愉悦。 下面用Bee Express实际项目案例来带你全面了解表单设计： 一、什么是表单 在我们的现实生活中，从小到大都在和表单打交道，从我们在学习使用的作业本、学校篮球场里的线条、班级里面每个小组区域的划分；再到楼层及墙面阻隔、超市里面的货架、马路上的斑马线等。 虽然这些潜在的表单没有明确的标识，但对我们已经形成了条件反射，也有了深刻的记忆。它们随时都在告诉我们，在哪个区域可以做什么？需要注意什么？以及行动之后的结果反馈。 表单在产品中主要负责数据采集的功能，用来搜集和呈现一些数据、信息和特定的字段，大部分涉及到数据采集功能的模块，我们都可以称其为表单。 范畴极为广泛，应用情况牵涉到方方面面，可以被灵活运用于多种功能模块中。 表单并不是表格，是最为常见的页面模块， 比如登录网站填写信息、购物填写地址、填写调查问卷、修改个人中心信息时……都是在和表单发生互动。 表单是由多种元素组成，最常用的元素就那么几个。在设计过程中，设计师需要合理组织这些元素，帮助用户在填写表单时，轻松愉快的完成。 二、Bee express项目表单存在的问题 Bee Express主要经营的是快递、速递柜业务，前期主要经营泰国市场，所有APP/网页的视觉语言定为中文、英文、泰文三种。 那么我们设计的界面就需要去考虑在表达同一个信息时，中、英、泰三文不同长度的占比，需要预留足够的位置以供所有译文显示完整。 同时也碰到了诸多问题，在设计之前，基本就是以中文为主，组织好视觉语言后是没有办法随时提供英、泰两文的；即使提供了，也会碰到一些比较尴尬问题。 下面我就以表单为主，将存在的问题列举部分。 从上面的实例，我们能看出来，在中文正常的情况下，翻译英/泰文时候，很多问题就显现出来： 标签左对齐的方式在英、泰两文状态下，显的不够友好，参差不齐造成视觉有些混乱； 英文翻译在超过3个单词或某个单词过长时，就会出现重叠/覆盖的情况； 泰文都是非常碎小的单个符号，在标签过长时，无法确定从哪里折行以确保词组不会脱节； 输入的部分信息因横向距离过短，造成显示不全而自动省略，给用户带来记忆负担； 因视觉的混乱，导致可操作性很差，易用性过低。 上面只是根据展示的单个页面列举的部分问题，其实在其他各种类型的表单里，还有更多可改进及优化的空间。 比如：完成的先后顺序、合适的输入格式、下拉还是弹窗、状态反馈、操作按钮、如何简化以及分页等，都需要设计师去细心的打磨，以便于用户高效、愉快的完成表单内容。 三、表单的组成结构与类型. 1. 表单的组合元素 表单的目的、内容、大小长度等虽然各不相同，但基本元素比较固定，在进行布局和交互设计的时候，这些元素有着较高设计要求。合理组织这些元素有助于用户轻松完成表单填写，在产品上需要高效、显著且有良好的可访问性。 表单主要有以下几部分组成： 标签：告诉用户这里应该输入的元素是什么，如：姓名、电话、地址； 输入域：可交互的输入区域，如：文本框、选项框、下拉选择、文件上传； 占位符：占位符是对标签进行额外的信息描述，如：输入信息的范例、填写帮助； 前导图标（可选）：描述文本所需的输入类型和特征，如：登录的账号、密码、验证码； 后缀图标（可选）：对输入内容进行控制，如：下拉的展开与收起、清空； 帮助（可选）：提供表单内容的注释或辅助类容，如：说明、注意事项； 反馈（可选）：告知用户当前操作可能或已出现的问题，如：提交成功、错误提示、网络问题； 键盘（可选）：在文本编辑时需要使用键盘，如：设备系统键盘、应用内置键盘； 动作按钮：动作按钮是在表单的结尾，如：提交、下一步、清空所有信息。 2. 选择合理的对齐方式 常见的对齐的方式有三种，左对齐、右对齐和顶对齐。不同的对齐方式都有各自的优点和缺点，我们需要根据项目实际情况来选择最合适的对齐方式。 1）标签左对齐 优点：左对齐有足够的垂直空间，可以充分利用，而且便于信息的扩展。 缺点：?需要更多的横向空间，主要由标签的字数决定，需要刻意控制，否则会显得参差不齐。与输入字段关联性弱，完成速度最慢，导致加长用户完成表单的时间，增加用户的时间成本。 从上面的实例，Bee Express项目在中文/英文/泰文状态下，不适合标签左对齐的方式。 2）标签右对齐 优点：标签到输入框的间距是固