高级ued总监讲述 iOS、Android 设计规范(万字详解带案例)

一、两个角度

我从两个角度来看遵守设计规范带来的收益:

一方面,用户长期使用某个平台的系统后积累了很多对应的习惯,如果设计的产品遵循了这些习惯,用户用起来会更顺畅,体验好是一个产品的竞争力;

另外一方面,每个平台的设计规范背后都有源文件、技术支持和代码可以借鉴复用,这样可以提高设计和开发的效率,能更敏捷的应对市场和用户需求的变化,自然也就更有可能在商业社会里成功。

△ 两个角度

但是这两个角度并非在任何条件下都成立,假如你开发的产品之前有一个非常知名的竞品偏偏用了和平台设计规范相反的做法,这时候你的产品抄袭竞品的规范,竞品的用户被你吸引过来之后毫无使用障碍,这可能比盲目的遵守平台设计规范带来更大的收益。

虽然每个平台规范后面有各种源文件代码可以参考,但是如果要完全遵守 iOS 和 Android 规范,细节的差异特别多,需要招聘更多的设计师和研发工程师来处理,甚至连商业转化率在不同平台都会不稳定,这种成本提升和商业营收变动,收益还抵不过亏损。

到底如何遵守设计规范才能获得最大收益?怎么样遵守规范?我总结了四个层次来思考和执行。

二、规范四层次模型

我将 iOS、Android 规范中的所有特性划分到四个层次中,并采取不同的策略来决定是不是遵守它。

△ 规范四层次模型

三、限制层

所谓限制层,即 iOS、Android 限定完全不能更改的机制。比如 Android 导航栏的三大金刚键,你不可能把 App 做得按 back 前进到下一页,或者在 iOS 上按下 home 键不回到桌面,这是系统限定死的只能完全遵守。

限制其实也意味着机会,每个平台都有自己独特的特性,运用得当能产生更大的收益,比如 Android 的通知栏,一些音乐App 可把播放控制按钮常驻通知栏中,方便用户操作。

△ Android通知栏常驻

四、习惯层

习惯层是指用户长期使用该系统后产生的一些习惯,处于习惯层的特性可以想办法以比较小的代价去遵守,或者同时兼容两种风格。

例如想删除列表中的某一条,iOS 用户通常向左滑动,而 Android 用户习惯长按。整个 App 所有没有多选功能的列表都可以遵循这条原则去开发。

△ 列表单条目操作差异

对于有下一页的列表,Android 没有任何指示,iOS 则有一个向右的箭头,可以根据 iOS 规范兼容 Android,这样可见性更好,也不用专门再设计另外一套图。

△ 统一列表下一页指示器风格

五、通用层

iOS 和 Android 每次更新都会借鉴对方的优秀特性,因此很多地方操作习惯上差不多。比如 Android 不再固执的推荐你用 Drawer(抽屉导航),而是规范中加入了底部 Tab,虽然两个平台给的视觉样式有些差别,但 Tab bar 内在的交互逻辑已经一致,因此处在通用层的特性无需顾虑统一成一种。

六、塑造层

讲一个从朋友那听到的小故事:一款录音App,除中国以外的用户都是点击开始录音,而中国用户绝大部分都是长按,因为中国用户录音习惯被微信这个国民 App 给「塑造」了。

△ #论微信的使用时长习惯培养# ​​​​

因此用户操作 App 的习惯除了来自系统本身的规则,还受到用户常用 App 的二次影响。除了好好学习 iOS 和 Android 的设计规范,多多研究用户常用的 App 也是一件很重要的事情。

这四个层次越底层违反带来的代价就越大,当然只要有足够的利益代替违反规范带来的损失,除了限制层其他层的特性都可以违反,有不少突然火起来的创意游戏就是很好的案例。

六、One more thing

这篇文章每个层次我都只举了一例,这不符合我「具备可操作性的经验」的写文宗旨。

Skeleton Screen(加载占位图)是近年流行的加载控件,通常表现形式是在界面上待加载区域填充灰色的占位图,与线框图的效果非常相似。Skeleton Screen本质上是界面加载过程中的过渡效果。

Facebook的Skeleton Screen

Facebook的Skeleton Screen

Skeleton Screen的由来

Launch Screen(启动屏幕)

当你启动一个App时,需要从手机存储器和网络加载所需的控件和多数据,由于手机性能和网络状况的差异,加载需要等待无法避免。

为了解决等待加载过程中出现白屏或者界面闪烁造成的割裂感,iOS规范中规定把界面控件框架的轮廓做成静态图片用于Launch Screen(在Google的Material design规范里被称作Placeholder UI),把Launch Screen放在用户点击启动App之后和App真正正常启动完成之间做过渡,从而消灭白屏和界面闪烁,给用户一种App启动很快的错觉。(然而国内的App不遵循iOS规范,在Launch Screen里放广告,这又是另外一个商业话题了)

Launch Screen

Launch Screen

非控件轮廓区域的内容变动很大,以上图浏览器为例,Launch Screen仅仅显示工具栏和地址栏,网页内容区域留下了大量空白,显然这不是最好的界面加载过渡方案。

Progress Indicator(进度指示器)

如果Launch Screen持续时间有点长,刚好用户又盯着Launch Screen大量空白的内容区域,可能会认为App出BUG了——虽然App后台正在辛劳的加载最新的数据。因此我们需要使用Progress Indicator来告知用户目前正在加载。

Progress Indicator分为Activity Indicator(活动指示器)和Progress Bar(进度条)两种,前者就是我们非常熟悉的“菊花转”。

Activity Indicator和Progress Bar

Activity Indicator和Progress Bar

有了富含动效的Progress Indicator,用户就知道我们的App并没有出BUG,而是在辛勤的加载数据,再过不久就能正常的显示内容了。

Progress Indicator设计出发点是好的,但是带给用户的体验未必优秀。Progress Indicator的出现就意味着需要等待,当用户注意力集中在Progress Indicator时,就好像学生盯着下课前五分钟的钟表,滴答滴答,时间似乎变得更慢了。我们当然不愿意让用户望着Progress Indicator产生焦躁的情绪。

Skeleton Screen应运而生

如果我们能在加载前把内容的大概轮廓预先展现出来,然后再逐步的加载真正的内容,这样既用户一种内容正在逐渐加载即将呈现的期待,降低了焦躁情绪,又使得界面加载的过程变得更顺畅,感官上会觉得比其他加载方式更快。这就是Skeleton Screen!

Skeleton Screen与Activity Indicator对比 图片来源:https://disciullodesign.wordpress.com/2015/03/13/animation-and-the-user-experience/

Skeleton Screen与Activity Indicator对比

图片来源:https://disciullodesign.wordpress.com/2015/03/13/animation-and-the-user-experience/

Skeleton Screen这个概念最早出自Google产品总监,《Web表单设计》作者,Luke Wroblewski于2013年9月17日发表的博文《Mobile Design Details: Avoid The Spinner》里。(博文地址:http://www.lukew.com/ff/entry.asp?1797 )
目前国内有简书、领英、新浪微博头条文章页采用这个加载方案。国外有Facebook iOS版、Medium、WordPress App、Slack等产品采用。相信以后会有更多的App和网页会使用Skeleton Screen。

如何使用

适用于布局排版固定的内容区域

Skeleton Screen所展现的是内容的大概轮廓,如果内容布局和排版不是固定的,那么轮廓和内容布局的巨大差异,不仅不能给用户顺畅和期待感,反倒会造成落差。因此Skeleton Screen适用于布局排版固定的内容区域,例如列表、文章、个人信息。注意:如果内容区域有空页面的情况,也不建议使用Skeleton Screen。

建议配合其他加载技术一起使用

用户的网络环境是复杂的,如果加载持续时间很久,单凭Skeleton Screen起不到流畅过渡的效果,建议配合懒加载(先文字后图片)、逐条加载、预加载等技术,以达到更出色的体验。

就是这个四层次模型的铺垫,在之后的文章中,我会把 iOS 和 Android 的所有控件、特性归类到这个模型中,给出系统的解决方案,让大家看到了就能马上运用到工作中,快速设计和开发出同时满足 iOS、Android 平台用户习惯的 App。

Text fields(输入框/文本框)是一个历史悠久而经典的控件,当光标位于输入框时,用户可以在其中输入或复制粘贴文本、数字等内容。输入框虽然看上去简单,但需要考虑的细节也不少,本文将向你介绍输入框的相关组成部分和注意事项。

Text fields的相关组成部分

Text fields的相关组成部分

标题 / 输入框标签(Label)

Label是一个控件或一组相关控件的名称或标题,与Text field成对出现时表示输入框的标题或者内容,对于常见的主题有时也用图标代替Label。在表单中为了标明输入框是必填的,通常在Label旁边添加一个星号“*”。

文字Label、图标Label、带星号的Label

文字Label、图标Label、带星号的Label

Label与Text fields的对齐方式

Label和Text fields的排版对用户浏览和使用有很大影响,一般来说可以把Label与Text fields对齐方式划分为4种。

顶端对齐

Label和Text field垂直左对齐排列,用户只需依次向下浏览,因此浏览和填写的效率是4个对齐方式中最好的,而且占用屏幕横向空间少,即使Label特别长也能很好的显示(这对支持多国语言的软件特别有用,因为有些语言比英文还要长很多)。但这种对齐方式会占用过多的屏幕高度,此外应当注意每组Label和Text field与其他组的间距,以免密密麻麻降低可读性。

顶端对齐

顶端对齐

水平右对齐

Label和Text field水平显示,Label右对齐。占用的屏幕高度减小,但是由于Label长短不一时显得层次不齐,因此用户浏览效率会比垂直顶端对齐低。

水平右对齐

水平右对齐

水平左对齐

这种对齐方式利于用户浏览Label,但是Label和Text field的距离较远,用户从左往右浏览的时间会变得更长。可将某些短Label通过增加字符间距的方式使之更易读。当然,时间长也不是坏事,对于有陌生数据和需要谨慎填写内容反倒是能让用户减少出错的可能。

水平左对齐

水平左对齐

内嵌Label

Text field内嵌Label是最节省空间的做法,为了让Label和真正输入的内容做区分通常会把Label颜色调淡并且在最后加“…”,实际上是把Placeholder text当做Label。内嵌Label浏览效率上和顶端对齐不相上下,但是一旦用户在Text field输入内容后,Label就看不到了,因此只适合Label特别短或者搜索框、账号密码输入框等用户非常熟知的情况。

内嵌Label

内嵌Label

Float Label(浮动标签)

设计师Matt D Smith在内嵌Label的基础上发明了一种新颖的交互模式Float Label( https://dribbble.com/shots/1254439–GIF-Float-Label-Form-Interaction ):当用户在Text field中输入内容以后,内嵌Label会浮动到Text field上方,成为顶端对齐。这种方式兼具内嵌Label和顶端对齐的优点,目前已经成为Material Design里Text field默认风格。

Float Label

Float Label

这种模式也有缺点,Label显示过小,对于小屏幕和视力不佳的用户来说不是个好方案。此外,Label侵占了原本Placeholder text的空间,对于一些用户陌生的Text field来说需要额外的空间放提示和说明。

占位符文本/提示语(Placeholder text / Hint text)

Placeholder text是Text field没有内容时出现的灰色文字,当用户输入内容后将会消失,因此只能展示一些比较简短的信息。通常使用Placeholder text作为输入指引(例如:“请点击输入评论”)或者表明输入的限制和示例(例如:“年/月/日”)。很多电商产品搜索框会把Placeholder text用于热门商品促销。

淘宝App的搜索框Placeholder text

淘宝App的搜索框Placeholder text

iOS有一个特性,在软键盘上方显示Placeholder text,这样即使在输入过程中也能提示用户正确的规则,且输入过程中用户视线停留在软键盘上不用转移。

在键盘上方显示Placeholder text

在键盘上方显示Placeholder text

辅助说明/额外说明/帮助文字( Helper text)

如果Text field的输入规则或者注意事项比较复杂,建议在Text field附近(一般是下面)添加Helper text进行额外说明。Helper text也可以用Tooltips或者Popover的形式来呈现。

MailChimp给密码输入框的Helper text加入了互动:输入框的复杂规则拆分成多个简单的条件,每当用户输入的内容满足一个条件,会给予相应的反馈,告知用户已满足这个条件,这样就把复杂的任务拆分得简单,用户输入不易出错。
MailChimpMailChimp

初始默认值(Default value)

输入框内默认预留的字符,获取焦点后不消失,用户可以删除或者修改这些字符。好的初始默认值能减少用户的输入负担。例如地图App路线导航功能的起点输入框Default value是用户的当前位置,用户只需输入目的地即可开始导航,提高了效率。

 起点Default value是用户当前位置

起点Default value是用户当前位置

输入限制

文本类型多种多样、长短不一,但是计算机能接受的文本是有限的,业务方通常对文本类型也有要求。例如手机号码肯定是数字,如果输入其他内容会报错。为了减少用户出错的可能性,维护计算机系统安全稳定,必须对Text field进行一些输入限制,例如最短最常能输入多少个字符;是否能输入emoj表情符号等特殊字符;前后的空格是否过滤;能否支持从剪贴板粘贴等等。

此外要考虑如果用户的输入超出限制或出错,应当如何给予用户合适的反馈,帮助用户将内容修改正确。

自动获取焦点(Autofocus)

当用户点击Text field,光标出现弹出软键盘,表示该Text field已获取焦点,此时用户就能输入或者修改内容了。对于主要任务就是填写表单的页面,可以在用户进入该页面后,自动获取焦点。如果页面有多个Text field,当用户填写完一个后,自动获取下一个的焦点,这样操作会更流畅。

输入方式

Text field的主流输入方式是键盘,使用适当的软键盘布局有助于用户提高输入效率,降低出错的可能性。关于软键盘布局等特性。

除键盘外,合理运用其他输入方式能提升输入效率。例如语音输入、GPS定位、拍照识别文字、文字自动联想、与其他输入类控件配合等。

淘宝App的Text field提供了非常丰富的输入方式

淘宝App的Text field提供了非常丰富的输入方式

字数限制展示

对于需要字数限制的Text field,目前有2种字数限制展示风格:

  • 「当前已经输入的字数/字的最大长度」
  • 一直显示「当前已经输入的字数」,达到最大字数限制后会提示超出长度。

这两种方式给用户带来的感受是不一样的,例如发微博和回复微博的Text area(文本区域/多行文本输入区)字数限制提示由原来「当前已经输入的字数/140字」,改为「输入130字以后显示剩余可输入的字符数量」,这样做的好处是用户不会在刚开始输入时因为看到字数限制而刻意控制输入字数打断心流造成情绪不畅或者降低输入动机,也许能提高发微博和评论的活跃 ​​​​。

微博改版前后

微博改版前后

快速清除按钮(Clear button)

对于手机软键盘来说,连续多次点击delete键删除多个字符比物理键盘体验要差得多,因此对于有修改内容需求的Text field可在右侧放一个Clear button,点击即可一键清空Text field中的所有内容。

Clear button出现时机有4种:1)获取焦点时才出现。2)有内容时就出现,即使没有获取焦点。这种适合搜索框,点击Clear button后清空内容再自动获取焦点,一气呵成,直接进行下次搜索。3)一直出现。4)没有明显的Clear button,但是按一次软键盘的delete键直接清空所有内容。通常密码输入框出错后会用这种。

密码输入框和可见性切换图标

在PC时代,电脑屏幕比较大,如果密码直接明文显示,容易被旁观者偷窥窃取,因此用星号“*”或“•”隐藏真实的密码。移动时代密码输入框也密文显示就值得斟酌了,首先手机屏幕比较小,不易被旁观窃取。其次不法分子观察软键盘按键顺序就可以窃取密码,不需要去看密码输入框。

另外密文显示给用户输入和检查带来很大麻烦。国外有数据显示,采用密码默认明文显示,通过可见性图标(Invisibility icon/Visibility icon)切换明文/密文,能明显提高转化率,而且不会降低安全性。(详细请阅读:http://www.uisdc.com/should-login-show-password )

多行输入框的最大行高

根据Text field可以输入的行数,可分为单行文本框(Single-line text field)和多行文本框(Multi-line text field),由于手机的屏幕比较小,建议给多行文本框限制一个最大行高,如果达到最大行高,输入框内的文本可通过滚动条滑动。为了方便拇指滚动,建议最大行高大于5行。

多行输入框的最大行高

多行输入框的最大行高

原创文章,作者:海阁,如若转载,请注明出处:http://www.pm28.com/1480.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息