【网易云课堂】从ios界面设计原则看设计

不知道平时做iOS端界面设计的同学有没有一些困惑，就是在做完一个自己还挺满意的界面时给身边的人看，总是会听到不同的声音，褒贬参半，这种时候是相信自己的审美？还是听取别人的建议？或是把各种方案糅合在一起？或许可以从iOS的界面设计原则的角度来看一下自己的视觉稿。

ios界面设计原则中最先阐述的就是以下三条：

清晰（Clarity）：纵观整个系统，任何尺寸的文字都清晰易读，图标精确易懂，恰当且微妙的修饰，聚焦于功能，一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

遵从（Deference）：流畅的动效和清爽美观的界面有助于用户理解内容并与之交互，而不会干扰用户。当前内容占据整屏时，半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化，从而突出内容

进深（Depth）：清楚的视觉层和生动的动效表达了层次结构，赋予了活力，并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感，让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时，流畅的过渡提供一种纵深感。

可见这三条原则是我们在做ios产品时最基本的也是最重要的原则。其中清晰原则放在了第一条，则是重中之重，现在我们可以先根据这些原则审视下面这些产品的界面。

1.清晰&遵从

最左侧图片为“单读”app中二级类目选择页，旁边是同类型产品“片刻”的二级类目选择页，他们采取的设计表现形式很相似（都是在图片上覆盖半透明效果再叠上文字信息），但是给人的视觉感受却大相径庭。

左侧页面的标题字号大小舒适，字体也有别于其他同类型产品，增强了品牌辨识度，并且类目之间分隔清晰，不会给人凌乱感。

中间页面的类目分隔感较弱，紧贴在一起稍显凌乱，而且标题与辅助文字都过小，识别度较差，再加上此页面在iphone 7p设备上

都需要滚动6屏左右的长度，令人倍感焦躁。

在ios界面设计的三大基本原则之下，主要以动效、品牌化、颜色、布局和字体5个方面作为设计的着力点和出发点。以下将逐个进行介绍：

1. 品牌化

a. 优秀的app通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。

b. 不要让品牌化阻碍了优秀的应用设计。保证它是直观的、易于导航的、易用的并且以内容为中心的。

c. 内容比品牌化更重要。不要为了增加品牌曝光就牺牲了用来浏览内容的空间。

2.颜色

a. 在iOS，颜色能够暗示可交互性、增加活力以及提供视觉的连续性。保证这些颜色无论是单独还是组合、在浅色背景还是深色背景上都看起来很棒。

b. 考虑在app中统一使用一种关键色来暗示交互性。避免给可交互和不可交互的元素使用相同的颜色。否则用户就很难知道到底哪里是可点击的。

c. 在多种光线条件下测试你的app的颜色方案。以求在大多数的使用场景下提供最好的视觉体验。

d. 使用足够的颜色对比度。避免图标和文字跟背景分不开

3. 布局

a. 内容是你的最高使命。一般来说，具有相似功能的元素应该看起来相似。

b. 利用视觉权重和平衡来表示重要性。大的对象能够抓住人的眼球，也更易于点击，一般来说，把首要的对象放在屏幕的上半部分并且放在偏左的位置 ——处于从左往右的阅读环境时。

c. 缩进和对齐还可以表明多组内容之间的关系。

d. 为可交互元素提供足够的空间。尽量让所有控件都有不小于44pt x 44pt的点击区域。

4. 字体

iOS的系统字体英文是San Francisco［SF UI Text （用于19p及以下大小的文本）和SF UI Display（用于20p及以上大小的文本）］中文为苹方。此款字体较之前的Helvetica和黑体-简整体显得更为圆润，让阅读变得更加容易，这对于大屏趋势来说显得更为重要。

以上是对ios设计原则的粗浅的研究，纵观ios近几年的产品迭代，越来越注重效率，甚至会因此而折损视觉效果，设计师很难单纯从视觉角度提升产品的整体品质，更多的要在交互逻辑上下功夫，这将是接下来对ui设计师最大的考验。最后我想说的是：用户的需求是感性的，我们在做产品时要经常换位思考，多方权衡，不应生搬硬套这套原则。

ios还提供了更多的界面设计原则，比如ui控件、扩展、技术、资源等（此文中引荐的话原版均为英文，翻译拙略，请英文好的童鞋移步至此https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles）。