美文网首页@产品
02表单《移动应用UI设计模式(第2版)》交互设计读书笔记

02表单《移动应用UI设计模式(第2版)》交互设计读书笔记

作者: 设计小胖 | 来源:发表于2020-02-17 16:55 被阅读0次

    ☝登录表单

    一些应用把:账号输入框、密码输入框、登录按钮、忘记密码、注册按钮 设计在一个页面

    一些应用先让你选登录还是注册,选了之后进入下一个页面进行输入表单。

    应有隐藏密码/显示密码的按钮。

    一些应用:在引导页一直显示登录注册按钮。

    可采用标签导航。tab1登录 tab2注册

    第三方登录

    金融领域流行的登录模式:只需要输入密码。用户身份在安装应用时即可得到验证。

    不一定使用应用的第一步就是登录。让他先用,等到想要购买/收藏等时再叫他去登录。

    ☝注册表单

    可采用灰色提示文本,但开始输入后用户可能忘了这要输入的是什么。可用小气泡悬浮。

    实时反馈。在我输入完账号或者邮箱就告诉我是否已被注册。不能只说错误了,要告诉用户该怎么做

    注册表单要简短,表单长度最好在一屏之内,操作按钮要放在可视范围内。清楚地说明输入要求,可利用实时反馈加快注册过程,并让用户了解当前状况。要考虑到所有用户的使用情况。

    Dropbox漂亮的解决方案:一旦识别出我的邮箱已存在,它会推测我是想登录而不是注册。因为我很可能需要找回密码的指引,所以它会预先在找回密码的页面填好我的邮箱地址,这样我只需点击“发送”即可等待恢复账号了。

    ☝个性化注册表单(选择感兴趣的领域/查找通讯录朋友之类)

    常用的是宫格布局(陈列馆式),点击选中的交互。

    ☝多步骤表单

    在网页端,多步骤注册过程经常使用进程栏(process bar)1指示用户他们所处的位置,并提示下一步操作。在标题显示,与进度条(progress bar)区别。用在手机上缺点的太拥挤了。

    解决方案:在页脚或页头显示第几步(1/3)之类。减少文字描述。

    ☝结账表单

    技巧1:同时提供登录、注册和客人用户选项

    你完全可以在用户完成支付后提示他们去创建账号。

    技巧2:简化流程

    弃用进程栏,把分屏步骤融合进一个结账页。用层级导航。

    技巧3:提供省时的快捷方式

    银行卡扫描得到卡号。

    技巧5:忘掉网页端

    ☝计算表单

    体重。税款。虽然这些表单可以采用自定义控件和布局,但是遵循基本的设计规范以保证表单的易读性依然十分重要。对齐方式、标签、字体、按钮位置、对比及颜色,这些全部都是影响移动表单易用性的因素。

    数据实时可视化。图表等。

    ☝搜索表单(添加筛选条件)

    实时显示有多少条结果。

    “最近搜索”小功能

    一边输入一边自动提示

    ☝长表单

    一屏滚动比分页好。下一步按钮和返回按钮放在哪? ios和安卓建议顶部操作栏,window phone建议底部。

    🤓我的想法

    在阅读这部分内容时,不断回忆起参与并负责UXUI的一个记账app项目中的登录注册和录入账目表单。

    登录注册想到记住账号和密码的现代人痛点,直接设计成用手机号接收验证码,这样一来不必区分登录or注册,也不需要找回密码的操作。也放置了第三方登录。在流程上和架构上都比较简洁。这是我身为设计者的想法。个人打开一个应用,对注册真的没耐心。不过站在公司业务的角度上,免去繁杂的注册步骤是否对公司留存用户资料有一定影响?项目是课内作业,或许还是缺少商业角度的考量。

    但是录入账目的设计,当时纠结了很久。基于产品特点的缘故,账目的录入算是多步骤表单的设计。我在顶部放置了进程栏,分为两步。返回和保存按钮放置在顶部的左右上角。第一步用一个页面,采用了层级导航设计,需要强调推荐录入的信息采用了输入框。第二步主要是复选控件,底部有实时反馈提示。因为进程栏不能放太多文字,当时在信息设计上也改了好几次,担心表意不明。现在想想,当时的一个败笔应该是下一步按钮。在第一步的时候放置在顶部右上角,后又担心不明显,在表单下方也添加了一个,然后进程栏(当时我称为tab导航)也是可以点击切换到下一步。

    但是否真的如作者所说,用户不需要进程栏,仅仅一个one of three steps的提示就足够了?也许文字过长或者表意不明的时候,宁可不要,但能说清楚且设计简洁的话,也未尝不可。

    一屏滚动真的比分页好吗?以前我认为“是的”。但前几日填写了一位师姐的调查问卷,平时都是一屏滚动,又臭又长。但师姐的问卷分了页,竟然惊喜地给了我一种减轻任务负担的心理?大的任务,化整为零也是一种思路?此外,那份问卷的下一步在后面加上(1/3)应该会更好。

    但当我浏览网页的微博时,我就感受到分页带来的困扰。我浏览信息流就图一个爽,它还老需要我费神去点击下一页?为何如此?

    相关文章

      网友评论

        本文标题:02表单《移动应用UI设计模式(第2版)》交互设计读书笔记

        本文链接:https://www.haomeiwen.com/subject/ytgbfhtx.html