iOS10的人机界面设计指南:哪些设计趋势值得我们注意

在Clarity(清晰)原则中，增加了一段解释：留白、色彩、字体、图形和界面元素要强调重要内容并且对交互进行指引。

我们抽取一下其中的关键字，内容、留白、色彩、字体、界面元素，从描述来看，界面的内容将成为Apple关注的重点，其他关键字都是为内容的传达而服务的。但是，具体到底是怎么实施的呢?

实际上在WWDC 2016大会上展示的Apple Music已经告诉了我们答案：

图7 Apple Music改版

答案就是：加大字号！加粗字体！加多留白！减少页面的视觉层级！

另外还有……加大控件!!!在锁屏播放界面中，播放和音量的控件都被明显放大了，并且控件之间的间距也被加大了，大大降低了被误触的概率。

图8 锁屏播放改版

以及给重要控件赋予色彩。新的控制中心的按钮都有了不同的颜色，从而让他们具有更明显的区分度以及视觉注意度，同样的，按钮也被加大了不少，Night Shift、AirPlay和AirDrop更是被独立了出来。

图9 Control Center改版

这样的优化出现在更多的界面中，再以新版的地图为例：

首先是控件位置的变化，原来的“开始”从底部移动到了规划路线的右侧，变的更加明显并且与路线本身产生更强的关联性;集中在顶部的操作也全部被移动到了底部，在大屏手机下的用户操作变的更加便捷，手指不用上下来回移动也能完成所有的操作了。

然后是控件形式的变化，原来的“开始”由纯文字Label变成了一个绿色的按钮，对用户产生了更强的视觉指引，还有个细节就是文案也由原来的「Start(开始)」 变成了 「Go(出发)」

图10 Apple Map改版

这些改进具有一些共同点：

1. 通过对字体大小和粗细的调整以及更多的留白来帮助用户理解界面的层级架构，取代了之前使用平面元素的分割和分层来构建界面架构的方式，从而让界面变的更加扁平，内容更加突出。另外，让具有一定程度视觉障碍的用户(色盲/色弱/老年人)也能够无障碍的使用。

2. 放大按钮的尺寸、改变按钮的布局、赋予按钮不同的色彩来提高用户对可操作内容的认知，降低点击操作的难度，使界面与用户的交互行为变的更友好。引用Apple在它的Accessibility Guideline(无障碍指南)中的描述就是「You view what you can do」 和「We make it easy to push all the right buttons」

当然，这些变化解决了一些问题，但是带来了一些新的问题，比如在Apple Music中，内容展示效率的下降，原来能够展示6张专辑的界面，现在只能放下3张。不过目前发布的仍然是Beta版，不知道在正式版中是否会Fix这些问题。

但是，「The biggest iOS release ever」，iOS 10名至实归

比Apple Music做的更早更彻底的Airbnb

似乎不光是Apple一家在试图进行这样的改进，这种趋势已经开始蔓延。比如Airbnb在今年4月份上线的新设计，几乎完全舍弃了原来以图片衬底为主的设计，换成了大面积的留白和加粗加大的文字，底tab的高度也加高了不少，当然，按钮也加大了一圈。

全新的设计去掉了任何可能会给用户带来视觉干扰的东西，变的极度的纯粹。

图11 Airbnb改版

本人的好友JJ-Ying也在前段时间的博文「后扁平化时代」的 i18n 和 L10n中详细的分析了Airbnb的这次改版，引用文章内一个有趣的描述Airbnb的新设计是「比交互稿还交互稿」，不过他在文中更多关注的问题是：在这样的趋势下，字体设计与产品品牌的关系以及在进行本地化与国际化设计时设计师所遇到的挑战，感兴趣的同学可以点上面的链接阅读。

另外一个搭上这班车的公司就是Instagram

几乎是紧接着Airbnb的步伐Instagram就发布了他们的新LOGO和新设计。对于褒贬不一的新LOGO我们暂且放在一边，主要还是看看UI的变化：

Ins去掉了头栏和底栏的颜色，通过加粗文字的方式来区分内容结构，取代了之前通过给文字添加颜色的方式(如：用户昵称、获赞数)。

图12 Instagram改版

Ins的设计总监Ian在Medium上对于这次改版的说明是：“我们的新icon已经足够colorful了(确实非常colorful……)，所以我们更希望App内的颜色是来自于用户上传的照片和视频而不是App本身，然后我们就把影响用户内容展现的干扰给干掉了。”

结语

总结成一句话来形容这股趋势就是「大而简，简而精」。

在这股趋势下，未来的设计将更注重产品的内容和操作体验，降低其他因素对用户使用上的干扰，这对设计师来说，是不小的挑战，因为越简单的东西越难设计，特别是如何在界面设计中去把握「大」和「简」的程度以及如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标，这是我们在未来需要不断考虑、探索和解决的问题。

最新评论