移动端下拉菜单交互设计

摘自IAMUE

1.层级菜单，以iOS为代表

外露设置名称和默认项，将全部选项放在下一个页面

优点：节约垂直空间；兼容单选、多选等多种情况；可容纳的选项较多

缺点：操作繁琐，没有滑动返回时大屏幕操作困难

2.弹窗设计，以Android为代表

使用Alertialog作为载体承载选项，单选时点击选项关闭弹窗，多选时点击完成关闭弹窗。

优点：少数选项时比层级更加简单易用

缺点：选项内容一旦过多，弹窗就不适用

3.下拉菜单

类似PC端的下拉菜单，使用效果尚可，但是感官奇怪

4.滑动选择器

选项在当前界面出现挤开其他内容，选择后自动收起

避免进入新的层级，选项为连续的日期或者数字时表现良好，但是选项一旦过多并且无明显的连续关系则不应该使用

5.平铺内容

选项较短如性别选择，移动端较少见

大屏到小屏

移动端和pc端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，pc端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。

因此，如果你要为一个pc端网站做一个移动端app， 首先要做的就是信息架构的重构。 pc端有足够的空间可以把所有的功能直接展示给用户，而移动端只能展示一些主要的功能，一些次要的功能需要放在下一层级。

移动端用户使用环境更加的复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。 这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在pc端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞的满满当当，容易让用户焦虑。

一个页面可以完成的任务现在要跳转好几个页面，增加了操作步骤。用户害怕“内容多”，难道不害怕“步骤多”吗？不害怕，因为页面内容量是用户一眼就可以看出来的，用户无法立刻感知这个任务有多少步骤。 因为无知，所以无畏。 等到用户知道这个任务步骤数的时候，整个任务都已经完成了。

鼠标的操作更加精准，因此移动端界面中元素的尺寸和间距比pc端的大。

1）场景化

在一个页面中，虽然内容很多，但是用户真正感兴趣并且会与之交互的内容很少。 如果我们可以获知用户在特定的场景下对于某个内容诉求很高，那么我们突出展示；反之如果诉求很低的话，我们可以隐藏。

2）关联化

我们需要梳理信息之间的关联性，将相互关联的信息整合在一起，进而减少页面中信息量。

手机App为生活带来巨大便利，多种多样的移动表单设计形式进入我们的工作与生活。表单是移动应用中与用户产生最多交互的地方，包括：用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。

一个优秀的表单设计有助于提升产品用户体验，提高转化率，达到更好的营销效果。

每个表单都有特定的目的，或吸引注册，或达成交易。考虑不周或错误设计会导致用户流失或交易失败。

学习表单设设计，需要先了解表单设计的基本原则，避免做表单时进入雷区。

表单设计基本原则

1. 逻辑清晰

表单是产品与用户沟通的语言，和对话一样，表单应当符合逻辑，帮助双方完成交流。

  2. 尽量使用单列设计

多列表单容易让用户漏填，无法集中精力完成填写。单列表单填写路径单一、直接、相比更为高效。 

3. 减少输入

表单越长越复杂，用户完成表单的意愿越低（尤其在移动端产品中）。最大限度减少输入字段，使表单完成更快速，尤其向用户索取大量信息时，更要注意表单简洁。

4. 提供合适的输入方式

输入“账号、密码，邮箱，昵称”时应提供不同键盘，减少输入错误，帮助用户快速完成填写。 

5. 避免把标签当占位符使用

有一种设计模式是让标签作为占位符置于输入框中，用户点击输入时自动消失。这种设计比较简约，但用户输入时容易忘记需要输入的字段是什么，从而产生问题。

优秀案例：移动端表单设计 

↘Dropbox by Sam Atmore

交互设计分析 ：

Sam的登陆/注册表单中，登陆、注册逻辑非常清晰。

1.使用单列二选一表单设计。用户使用App前，只需要二选一随标签提示进行下一步操作。就是误操作也可以用滑动回到另一选项。

2.登陆、注册页面的主按钮明确，有强引导作用。 

↘Location Switching - by Nimasha Perera

交互设计分析：关键词“智能自动填充选项”

表单设计融入更多自动化元素。如：自动定位功能，根据当前位置智能填充信息。省去用户地理位置选择操作，货币转化操作，省时省力

↘Form Validation - by Emmanuel Torres

交互设计分析 ：关键词“明显可见的提示信息”

用户登陆、注册过程，理想状态是完成信息填写并提交。

但实际操作中错误不可避免，表单设计要考虑有辨识度的信息提示，实时提醒用户填写错误。而不是全部完成后再告诉他。

拆解表单组件样式

表单的主要特点是引导用户填写信息，设计上应考虑主要信息内容如何引导用户浏览。表单中的信息内容包括：

1) 输入字段： 包括文本字段、密码字段、复选框、单选按钮、滑块和其他需要用户输入的字段；

2) 字段标签： 说明用户输入字段的含义，如文本框前的“你的姓名”；

3) 外观和结构： 包括字段顺序、表单在界面中的样式及不同字段间逻辑关系；

4) 动作按钮： 至少有一个操作按钮（如提交按钮）；

5) 反馈信息： 将操作结果通知用户。如：“谢谢，表单提交成功！”、“你提供的数字不正确”。

l主流表单样式

↘上标题下提示内容的表单

优点：标题、提示内容可以很长，预览速度快，可以加功能按钮（如附件和照片添加）。

缺点：占据垂直空间较大。

多用于信息内容填写和维修工单信息填写，可以减少页面跳转。

↘左标题右内容（左右对齐）

优点：常用组件，前端可以直接套用，节省垂直空间，引导用户视觉左右移动，增加用户思考时间，对关键信息填写更加安全。

缺点：相比上下结构表单，用户视觉移动距离增加,行数量多，视觉会很乱。

适用于通用表单填写场景。

↘左标题右内容（全部居左对齐）

优点：强暗示可输入，视觉浏览速度快。

缺点：标题字段数量不能太过长短不一，会导致视觉不均衡。

主要适用场景：适合金额数字类和身份信息填写。

↘归类标题表单（内容归属一类）

将同类表单项合成小组内容，帮助用户分类理解填写内容。符合格式塔原理的相似性和封闭性原理。

多用于详情信息展示。

↘仅提示内容表单

优点：信息少，不需要思考。

缺点：当内容一多很容易出现用户“不知道产品要做什么”的困惑（表单无标题）。

用于登录页或内容较少，如修改手机号/修改姓名/填写备注等。

拆解表单组件交互

表单交互主要有两个目标：引导操作和反馈。

交互操作时，表单有3个交互阶段：输入前、输入中、输入后

↘输入前

引导用户输入内容，如：密码设置场景

输入框在默认状态提示文案引导用户输入相应的内容；或输入框外有提示，仅支持字母、数字、某某符号输入

↘输入中

点击输入框弹出键盘，光标闪烁，定位用户当前位置。

表单内容一般有字符数量限制，输入过程中超过字符限制实时报错提示。

如下图：聚焦请输入原密码时,线段颜色明显加重，做为输入中提示。

↘输入后

web端

输入框失焦即判断输入信息是否符合规则，不合规则报错提示。例如：

玩家用户名重复提醒，密码首字母没有大写，密码长度不符合要求；

输入成功则成功反馈，例如：

输入框右侧图标点亮

移动端

输入所有内容，不即刻做规则判断，先激活按钮。例如：

发布、完成、下一步按钮激活

用户点击操作按钮再进行输入信息合规判断。

案例：提升用户体验和客户转化的最佳表单设计

填写表单对于用户来说是一道槛，下面就来看一看提升用户体验和客户转化的注册、登录表单中最佳设计模式时应注意哪些设计、交互细节：

1.说明注册价值

用户最不想做的事就是注册。用明确的价值说明能激发注册行为。表达的价值主张：在这里，连接世界。

2.设置醒目登陆输入框

直接显示输入框，而不是设置“登录”链接给用户增加一次点击。

3.允许使用第三方账号注册、登录

允许用户使用现有的第三方帐户登录产品能给用户带来便利，记很多密码是令人头痛的问题。

4.用户名采用邮箱或手机号码

使用电子邮件、手机号码作为用户名比起一个新名字让用户轻松很多，因为新起的用户名往往已被占用。

5.登录、注册功能区分明显

登录（Sign in/Login）、注册（Register/Sign up）链接放在一起，很容易使用户混淆，尽可能将两者区别表达

6.高亮显示输入框，允许记住用户登录信息

用户在输入框输入内容时，文本框高亮显示提示正在该框内工作。允许该表单记住本人登录信息。

7.允许用户查看密码

密码总是以圆点显示，不能确认输入的密码是否正确，允许密码明文显示是充满人性的设计。

8.必要的信息提示

输入错误的信息提示，还包括一些重要的注意事项提示，例如以下三个表单：

9.显示密码强壮程度

10.少使用下拉选项

表单中某项目里只有3-4个参数要选择，不要使用下拉框更有利于用户体验。不要要求用户重复填写Email地址。

---