当前位置: 首页 > 设计资讯 > 行业资讯 > 正文

iOS平面设计演变历程

2018-12-26 1778 0

虽然平面设计在过去的5年中已经变得普及,但在iOS 7之前并不常见。正是这种转变塑造了设计领域。但是说它没有进化会是不准确的。iOS设计适应了更大的屏幕。最开始的是超现实设计的最终对立面,平面设计现在更加微妙,让位于渐变,阴影和卡片。

iOS的演变

让我们从头开始,看看下面的图片。在左边,一个超现实的设计,也称为Skeuomorphic。引入强有力的比喻是有效的,因为在2007年,很少有人熟悉你的口袋里有一台超级计算机。在中间,我们摆脱了所有的装饰品,有利于平面色彩,漂亮的排版和高分辨率的内容。由于我们大多数人对技术越来越熟悉,因此不再需要用厚重的装饰来装饰我们的设计。在右边,iOS 11的屏幕标题更加大胆,因此更具可读性。由于屏幕较高,现在看到底部导航(称为Tab栏)更为常见。今天的设计师必须根据多种分辨率和像素密度调整其布局。好消息是我们有更好的工具,比如Sketch和Xcode,为我们准备这些现代技术。

 

大标题

iOS 11比以往任何时候都要回归其根源。大胆的字体无处不在。标题大而黑。由于屏幕现在大约是它们的两倍,所以拥有大型标题才有意义。大字体的另一个原因是可访问性。每天有数十亿人使用来自所有年龄段的手机,因此尽可能使内容清晰可读非常重要。辅助功能允许用户为支持它的应用程序设置非常大的字体。在iOS 11中,所有Apple的股票应用程序都支持该选项。由于这个原因,你会发现用户现在正在期待它。 

更大的屏幕意味着更多的内容空间。在更大的iPhone之前,摆脱任何容器并为内容提供最大空间是有意义的。但是对于iPhone X和8,情况已经不再如此。我们可以通过包含状态,导航和标签栏来简化导航,并使用卡片作为更好地组织部分的方式。带圆角的卡片是使内容看起来更具触感和平易近人的好方法。您可以使用模糊背景和阴影来为设计添加深度和上下文。

 

iOS设计的状态

设计现在变得更加简单,使我们能够专注于动画和功能,而不是复杂的视觉细节。在iOS 7之前,我花了很大一部分时间设计复杂的纹理,如木头,皮革和铬。今天,我花了相同的时间在动画和代码上。它不再是关于静态设计,而是如何让它变得活跃,让我们的用户更深层次地参与其中。这也是我写这本书不仅仅是视觉设计的原因。从技术角度来看,动画和代码从未如此重要或可行。这就是为什么我们几乎每周都能看到一个新的原型设计工具和编码框架。设计变得非常广泛,但同时又与许多学科相互联系。

我多次被问到如何开始设计以及成为更好的设计师的捷径。虽然没有灵丹妙药,但是有一些关于iOS设计的技巧和规则会影响你的普遍设计方式。

即使您正在为完全不同的平台进行设计,仍然存在相同的设计概念,您可以应用与在Web和打印中学到的相同的技术。iOS是一个设计可追溯到其根源的平台。它看起来像一本现代杂志,有漂亮的排版和简单的布局。您将在本书中学到的内容将为您在任何地方设计最佳产品的过程中提供卓越的服务。

核心哲学

让我们回顾一下基础知识。iOS由3种核心理念驱动:尊重,清晰和深度。受这些设计原则的启发,我将其意义分解为可操作的项目,这些项目比指南中解释的更简单,更直观。

尊重

你的内容应该是英雄,其他一切都是次要的。使用补充它的元素,避免分散与您的内容竞争的视觉效果。例如,使用漂亮的动画,从一个屏幕优雅地过渡到另一个屏幕,从而确保用户不会迷路。模糊背景保留用户所在位置的上下文,同时允许专注于前端内容。如果有疑问,请从提供的模板开始,然后从那里开始工作。

简化

您的用户界面应该被剥离到核心美学。每次添加元素时,请问自己:这是必要的吗?除非您的应用程序是游戏或特定主题,否则请使用重质感,3D效果和多重阴影。相反,专注于功能色彩,和谐渐变和漂亮的排版。 

最大化内容

内容应该填满整个屏幕,为其内部元素提供最大的空间。避免使用嵌套容器并最大化滚动区域,以便为交互留出更多空间。

 

颜色

使用突出的颜色来显示元素是可插拔的还是突出显示的。选择正确的颜色和中性色调可以决定您的设计。蓝色是按钮和状态的安全选择。此外,建议将黑色文本的白色或浅灰色背景作为起点。这提供了出色的对比度,非常适合阅读。 

排版是内容

由于用户界面的简化和对内容的关注,您的排版将占据屏幕的50-90%。因此,选择漂亮的字体并将其重量,线高和颜色设置为视觉上令人愉悦并且最适合于以任何尺寸阅读是至关重要的。默认的旧金山字体是推荐选项,因为它是为易读性而设计的。Apple在其所有应用中都使用它。 

负空间

使用负空格将焦点放在内容上。你看的越少,你就越能同时关注一些事情。负间距给出了呼吸空间。不要用太多的结构或不需要的视觉元素来压倒你的屏幕。如果有疑问,请使用Xcode中的默认边距。Apple通常使用8 pt到16 pt的利润率。 

明晰

让事情变得明显。按钮应该是不言自明的,排版应该是大而可读的舒适距离。您的内容应清楚地指明您的应用的内容。例如,如果它是一个咖啡应用程序,那么你应该被提醒咖啡豆,浓咖啡和咖啡的棕色。

使文本可读

标题应该是大而且对比鲜明的。字幕应简短,易于浏览。身体文本应该是间隔良好的,每行不要太长,以避免阅读疲劳。

正文文本的最小尺寸也应为11pt。最佳阅读尺寸为17pt至19 pt。屏幕标题的大小应为34磅或更多,而标题应设置为20磅到30磅。将文本与其他元素对齐以使其易于扫描。最后,在浅色背景下使用黑色或深灰色以获得最佳对比度。

 

使用明显的图标

图标不应含糊不清; 他们应该清楚地表明符号的含义。只要有可能,请在图标旁边使用文字。使用图标后,请勿在其他地方重复使用同一图标的其他变体,因为这会让您的用户感到困惑。同样,不要使用诸如“返回”或“提交”之类的通用文本,而应具体为:“返回主页”或“注册新帐户”。设计清晰,矢量化的图标,使其易于适应不同的屏幕密度。确保您的资产适用于1x,2x(视网膜)和3x(超视网膜)屏幕。 

描述性屏幕

每个页面都应该清楚地解释它的作用。应该有最少的品牌,由标签栏中的清晰屏幕标题和突出显示的状态取代。对图像的选择要慎重,以最好地代表各个部分。 

颜色的含义

颜色有[含义]。明智地使用红色,绿色,蓝色和中性色调分别表示破坏性动作,肯定动作,链接和非活动状态。通过将这些颜色用于不同目的,避免混淆用户。例如,不要在指示“删除”的按钮上使用绿色。 

触摸设计

按钮应该很容易点击。它们的尺寸应在30-60pt之间。最佳尺寸为44pt。在极少数情况下,对于文本中的链接设置为22pt,但要小心使用,因为它们变得难以点击。甚至文本按钮具有至少一个可点击区域30pt。打开图片时,请确保包括捏合缩放功能,并利用滑动手势轻松导航到单手前面的屏幕。 

景观模式

用户经常在横向使用iPad和更大的iPhone。在该模式下,应用程序将显示没有状态栏以及较小的导航和标签栏。有时,它会在左侧显示一个额外的菜单,类似于您在iPad上找到的菜单。自适应布局是一种根据屏幕大小调整布局大小的方法,现在已成为惯例。由于Xcode中的自动布局和大小类,基于设备方向修改布局相当容易。因此,不要害怕在您的设计中支持这一点。 

深度

也许最难理解的部分是深度。这是一个非常抽象的概念,但同时又非常强大和独特。深度是一切都应该是上下文和过渡的想法。在现实生活中,当你从一个房间走到另一个房间时,你会感觉到进步和距离。这样你就不会迷路。同样的概念应该应用于用户界面。

对人们的漠不关心以及他们生活的现实实际上是设计中唯一的主要罪恶。 - 迪特尔公羊队
过渡界面

iOS最令人兴奋和独特的方面之一是动画。每个屏幕都从一个屏幕转换到另一个 主屏幕放大到一个文件夹,然后放大到一个应用程序。动画过去很难执行,但是由于Xcode 9,它们比以往更容易使用。实际上,您将在Swift章节中学习这些技术。

模糊的背景

保持后台UI的上下文不应影响内容的清晰度。模糊背景不仅可以保持其自然色彩,还可以将焦点带到前景。模糊不是一项发明,它已经存在于现实生活中; 当你专注于某事时,其他一切都会变得模糊。

你认为人们想要什么,乘以十是你应该创造的。在人们的脑海中,任何不足的东西都不会持续超过一天。做得对,它会持续一生。
动画

动画不仅可以从一个屏幕转换到另一个屏幕,还可以为您的设计增添趣味性和愉悦感。它使一个本来会被忽略的元素变得重要。通知更加明显,当背景下雨倾盆时,天气会更好理解。

虽然鼓励动画,但它们不应该过头。他们不应该分散用户对内容的注意力或让他们晕车。无偿的,有力的动画可能会让您的用户感到无法抗拒。相反,当用户操纵内容时,可以将其发现,或者使用它们优雅地将注意力引导到登机过程。

最后,要证明动画的演示方式是现实的。从底部滑动的模式应该被解除回到屏幕的底部。这样,用户就可以欣赏元素的物理性,即使它们是数字的。


 

手势

随着更大的屏幕的引入,后退按钮现在太高,拇指很容易到达。因此,虽然不如可见按钮明显,但手势可以是已经可见的交互的扩展。它使高级用户更容易。我们都成为了超级用户,这就是为什么我们需要更少的视觉线索和更多有用的功能。

3D触控

3D Touch允许人们快速访问应用内外的选项。将3D Touch视为Mac上的键盘快捷键 - 它们使人们能够更快地完成重复任务。您必须设计快捷方式,以提高高级用户的工作效率。但就像键盘快捷键一样,基本功能不应该是3D Touch独有的。没有它,您的用户必须能够正常操作您的应用程序。

例如,用户可以强制按下应用程序图标以查找常用项目。在应用程序内部,可以偷看邮件,并且可以在进入全屏之前偷看链接。

声音

声音在应用程序中使用最少,但是当它们被播放时,它们可以将平凡的任务转变为真正有益的体验。人们可以识别您的应用,甚至无需在有意义的地方看到它,例如推送通知。当声音给人留下正确的印象时,你会以最小的努力赢得很多。

好的设计是普遍的。你不需要用大词来解释或过度补偿它。人们只是得到它。
进一步阅读

Apple编写的高级重要读物。它始终保持最新,并且功能列表非常详尽。我建议至少浏览它,只读取你需要的部分,因为它非常详细。 


 


20
评论区(0)
正在加载评论...
相关推荐