UDN-企业互联网技术人气社区

板块导航

浏览  : 1030
回复  : 0

[技术讨论] HOT!|热门移动端输入交互

[复制链接]
闪电侠的头像 楼主
                        数十万互联网从业者的共同关注!译者:可乐橙


本文中,UXPin – 用户体验设计应用的Chris Bank会讨论用户输入设计模式的重要性,还有来自时下最热门移动应用的具体案例——更多案例和超过45种移动端设计模式,都在UXPin的免费电子书《2014移动UI设计模式》中有提到。
记住上面几项目标,以下设计模式,在本文中都有详细讨论,在我们的电子书《2014移动UI设计模式》中还有更深入的探讨:
  • 智能键盘
  • 默认值和自动补全
  • 直接进入(或者说“快速登录”)
  • 操作栏
  • 社交账号登录
  • 大按钮
  • 滑动操作
  • 通知
  • 隐藏式控件
  • 扩展式输入框
  • 撤销
1.智能键盘
Facebook Paper, Android通讯录
问题
用户点按进入应用某个输入区块,在他们键入时要提供与数据相关的键盘。这样免去他们在字母与数字键盘间切换,不用寻找所需的按钮,或者多一步操作来激活键盘。这不仅为了用户方便,也可作为一种指示,注明用户应该输入什么类型的数据。因此移动平台的输入框可以高亮显示,这增加了灵活性,决定了哪些按钮应该突出显示。

56f2bda0c7ce1261d25b38bfc78002f3.jpg
用户想要快速完成操作。
解决方案
另一种方式是保存用户上次输入的信息,当用户输入或搜索时,展现这些最近使用的选项。例如,Flightboard在搜索框下面列出了之前使用过的地理位置,让用户免于再次输入。多数地图或导航应用也采用了这种模式,搜索方位时自动输入用户当前位置,减少用户点按次数。因为这是最常发生的情况。
直接进入(或者说“快速登录”)
用户想在做决定前尝试一下。
解决方案
记住,用户同时只能做一件事,他们没有足够时间尝试每个新产品。随着应用越来越细分化,在培育用户之前,找到高质量用户或领袖用户愈发重要——他们可能会讨厌你的产品,或者迅速意识到这不是他们要的。向用户索要账号注册信息比较困难,低的注册转化率会与注册用户数相互抵消。从积极方面来看,让用户直接体验产品,他们更容易被吸引,这取决于首次体验时能探索多深。这比引导页的UI模式更有效,我们会在下次讲到那些。因为它直接呈现在用户面前,而不是告诉用户如何使用。

ad744400c375f4b2f31c9dd0d65d95d9.jpg

Facebook Paper, Behance
问题
在应用的操作栏(用iOS术语叫“toolbar”)提供重要操作的快速入口。尽管导航栏主宰着网页和早期的移动应用设计,其他一些模式的使用,诸如抽屉菜单、滑动侧边栏、链接集合、按钮变换、垂直的基于内容的导航等,造就了更简洁的应用界面,让人关注主要和次要操作项,忽略副导航。这些应用的常用操作,就是搜索、分享和创建新内容。固定菜单不仅让用户更加熟悉UI,也去除了杂乱,聚焦于用户相关的重要操作。
5. 社交账号登录
Beats Music, Flipboard
问题
整合社交媒体注册可以让用户通过已有账号登录。这意味着他们要少操心一组用户名/密码,同时你也不必太担心密码安全。Facebook、Twitter和Google是最主要的OAuth登录提供方,你可以依据平台和目标用户,整合其中所有或部分到应用中,用户不必再设置一个未来可能不会用到的独立账号。使用这种登录注册模式也能为你提供用户的一些基本数据(他们使用时自动输入的数据),不强迫他们在刚刚下载的陌生应用中输入详细信息,始终保持注册流程的简捷。这个简单的功能可以极大提升用户体验,毫无疑问这种模式是众望所归。
6.大按钮
用户想立刻知道他们该采取哪个操作。
解决方案

8df60e47be2d6ddfbef4458c2fa7b746.jpg
用户想关注具体内容。
解决方案

8a7ebb8e57fadbe17682ce7848b2e17f.jpg
用户想知道新动态或操作,他们要瞄一眼
解决方案

b6c9249521ef3e569beea7c757667cb4.jpg

用户要在应用中快速激活次要控件,还有那些只与特定区域或内容相关的控件。
解决方案
Uber是这种设计模式的又一个案例。选择座驾类型后,通过点按滑动按钮,Uber会在预订座驾和费用估算间切换。这是简单却重要的UI设计模式,我每次试着呼叫座驾,又不想被Uber的溢价剥削时,都会为此会心一笑。Snapchat和Facebook Messenger中,在任何朋友上左滑,都能及时触发相应功能。
10.扩展式输入框
YouTube
问题
将控件设计成点按展开式的。这能在用户不需要时隐藏多数控件。例如YouTube和Facebook把搜索栏藏在一个图标里面,用户点按时搜索栏才展开,节省了屏幕空间。
11.撤销
Gmail, Chrome
问题
提供一个简便的方法让用户撤销操作,不要在操作前提醒他们确认。有些由于意外或匆忙而产生的操作,会导致不便或数据损失,例如删除邮件或编辑文字。用户可能在不知道结果的情况下会完成一项操作,宽容的UI会让他们尝试,这更加友好有吸引力。撤销功能对高级用户也很有用,他们会赞赏这种操控感。UI不会在操作过程中反复阻拦他们,询问是否确定。确认对话框用来解释当前状况时很有用,但用户真正看见操作结果后才能理解其中含义。为避免如此,最好去掉它们,并提供一种弥补错误的防护措施。
获取用户的输入
要深入了解热门公司如何运用新的和现有输入设计模式,学习超过45种其他的模式,请看UXPin的新电子书,《2014移动UI设计模式》。取其精华去其糟粕——要进行适当调整来解决实际问题,当然最重要的也是解决用户的问题。

45435067c1e5a516c7b99194c47539a9.jpg





                    
a950d06f598958db2dcd1b72b524bf32.jpg
d3ca499114b050c40e3440e041be9467.jpg
da55c92e9a42be6111e7cec208d934c7.jpg
8efca9dec182512f85332977a03e2580.jpg
44aa94d1591b6473c4d21a1dc9c50642.jpg
ca03e6d9ec9a9e52fe323a48cad6b039.jpg

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部