赞助商
立即赞助

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

交互设计3年前 (2021)发布 流光
2.2K 0 0

@C7210 :继续上期主题,即 2017 年 WWDC 之「基础设计原理」设分会,演讲人 Apple Evangelist 团队的 Mike Stern。当中,我们了解了导航与反馈,错过的朋友不妨回看。今天的话题聚焦于「可见性」与「一致性」。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

可见性-Visibility

可见性「反馈」有着密切的关。如果无法被人所见,再好的反馈机制都是徒劳的。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

清晰可见的内容素界面控件可以极大地提升计的易用性。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

想想,可见性对于汽车来说有多重要。仪表盘的息密度极高,通过文字、数字、指针、指示灯、状标识等形式,将当前的状警示息一目了然地呈现在你的面前。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

所有这些息都是直可见的。纵使在知上有些密集,但对于驾车来说却非常必要,因为你无需转头甚至是转身去其地方寻找这些息,它都一览无余地呈现在你面前。如果为了简洁而将一部息默认隐藏起来,或是置于其位置,导致重要的息被忽略,那车辆的易用性和安全性都将遭受损害。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

对于 app 来说也是同理。例如在「邮件」中,未读徽标提供了非常有用的状息。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

如果将这些徽标隐藏起来,界面的复杂度会有所降低,上去的确会整洁一些。然而这会极大地破坏易用性,因为人将不得不进入一个个邮件详情页当中进行确认,才能获取本由徽标提供的状息,这的互动非常低效且乏味。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

因此,要将重要的状息呈现在尽可能高的息层当中,使人无需付出额外成本即可一目了然地获取。

再看看时钟 app 的 tab 栏。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

如果将所这些导航项隐藏到汉堡单当中,那么人们将很难一目了然发时钟 app 所提供的其他实用功能。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

不过显然,可见性当中也存权衡的问题,因过高的信息密度及界面复杂度会降低人们获取信息制决策的速度,特别当人们还不那么熟悉产品的时候。因此,我们通常需结合其他因素通盘考虑。

一致性-Consistency

舟车劳顿,我已不及入住酒店了。不过趁家都还车,我们还一极其重的设原理需行讨论,这就一致性。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

简言之,一致性的主旨于通过相似的设方式满足相似的设需求。

果你曾开车,么你应该熟悉汽车内部的各种通用的指示符号,例门锁、车窗、燃、车灯、电池、机等等。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

同样,你也对一系列通用术语的定义指掌,例驻车、前进、倒档等等。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

汽车设计的一致还现在各种控件的局当中,例刹车在左,门在右。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

一致极大地提升车辆的易用。反之,破坏通用规则的设计方式将严重损害驾乘验。所有的汽车应遵守着同一套设计规则,包括标识与术语定义,控件局等等。受益高度一致的设计,我们无需在每次驾驶不同车辆的时重新进行学习。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

一致原理看上去显而易见,而践来却并非易。你必须始终有意识地考虑到一原则,并且理应该与怎样的标准持一致。你需要面地考虑到当人们打开你的 app 时,他们的预期是怎样的。预期,在很大程度上能和他们以往使用其他 app 的经验有关。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

么你该何人们使用其他 app 的情况?确很难,人们能使用各种类型的 app,你无从晓。但既 app 同属相同的系统平台,么你也应该关注平台身的设计惯例,譬图标与词条的定义,导航系统的设计模式,包括典型的任务流程等等。

关于这个话题,我来为各位举个最典型例子。在 iOS ,我们使用下图所示图标来表「动」意思,而在多数时候,「动」所指代是「分享」功能。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

很多 app 会使用不图标来代表这为,如下图所示。这个图标确实很常见,特是在网页或其他平台。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

这是个很棒图标,它本身设计没有任何问题。问题在于这个图标于 iOS 平台用户来说并不符合认知习惯。很多设计师为了保持多平台致性而选择在 iOS 使用这个图标。初衷是好,于 iOS 来说却并正确设计决策。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

从目标受众度考虑问题,采用他们最熟识设计,这才是上策。长此以往,你 app 于用户来说会变越发友好与易用。

当然,我们总会有冲做一些打破规则的事情。而且坦来讲,这绝非坏事。我们总该尝试的想法,否则何谈创。但对于图标、本这类简单的设计元素而言,谓的「创」在更多的时候只会给人们成必要的麻烦。因此,除非你有足够强大的由,否则依照规则进行设计,确保与平台之间的一致性,才是上策。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

于一致性,我还有最后一点需要强调,即「一致性」。你的 app 仅需要与在的系统平台保持设计一致性,同时在 app ,视觉格及行为模式需要保持统一,例如每个界面当中同一种类的设计元素都应该有着一致的外观,app 全到的字体及颜色应该有着明确的数量与规则。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

一致性可升 app 的整体性与聚性。当有元素都和谐有序地整合在一处,整体体验将得到升。

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

作为设计师,遵从一致性的设计原需要我们具备良好的自我控制与约束。大大小小每一个设计决策都需要意图明确。

欢迎关注作者的公众号:「Beforweb」

图解WWDC 设计分会:基础设计原理 – 可见性与一致性

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@C7210 :图文版 WWDC,由 Apple 的设计师 Cas Lemmens 为我们讲解如何面向 Apple 生态体系中的多种设备进行设计。上周话题聚...
WWDC
一年一度的WWDC ,对于苹果用户的吸引力仅次于每年9月的新品发布会。作为一场开发者大会,除了与会的媒体和一部分忠实粉丝之...
IOS
@C7210 :继续上期主题,即 WWDC 之「基础设计原理」设计分会,演讲人是 Apple 设计布道者团队的 Mike Stern 老师。在上期当...
WWDC
@C7210 :之前做过两期 WWDC 设计分会全图文,关于 iOS 13 设计特性,错过的朋友不妨回看。今天翻出 2017 年的一场重要的分会...
WWDC
今天是「跨平台设计」的最后一篇。说起来,这种图文形式的 WWDC 分会解析也将要完成三个系列了,对我而言像是吃了三顿大餐,...
C7210
今天我们主要从用户体验的部分原则来看闲鱼,主要以产品视觉设计四大原则、交互设计十大可用性原则、情感化设计来看闲鱼,今...
产品
昨天立了Flag 要更新关于WWDC的文章,但是一把年纪,熬夜艰辛,只能起床之后再更文章了。 WWDC19 可能是最近几年最令人激动...
2019设计趋势
@C7210 :在今年 WWDC 期间看到一些设计方面的分会视频,便萌生出要做这样的中文图文版本。其实过去每年的 DC 分会都有几场不...
beforweb