分解IOS设计的三大原则——清晰、遵从、深度

在iOS的三大基本设计原则，清晰、遵从、深度中，无外乎都强调设计的合理性，这三个词也是本文的关键。

“我们观看世界的视角与感受世界的方法可能有千万种，只要能够下意识地将这些角度和感受方法运用到日常生活中，就是设计。”原研哉说的这句话听起来很容易，但是深入实践起来，却发现自己掌握的不过冰山一角而已。

在iOS的三大基本设计原则，清晰、遵从、深度中，无外乎都强调设计的合理性，这三个词也是本文的关键。

清晰Clarity -視党展

所谓清晰就是在整个系统中，文字在每一个尺寸都要是清晰易读的，图标精确而清晰，装饰精巧而适合，使得用户更易理解功能。负空间、颜色、字体、图形和界面元素巧妙突出重要内容并传达交互性。

设计要点1:颜色

UI设计早期是比较推崇高级灰的，因为早期的UI设计师多是从平面设计转过来的。但是这种高级灰的颜色会使得我们的界面显得不是特别的清晰，这就违背了IOS设计原则之一的清晰(如左图)。

所以为了保证色彩的辨识度，尽量多用-些高纯度的颜色(如右图)，我们应该尽量避免过多低纯度颜色在界面设计中的使用。同时，也要关注色盲人群的体验。

（注意:高级灰不是灰色，是指纯度不高的颜色。肉黄、青苹果、粉色、春日青、粉红这些颜色锦楚离级灰色。灰色也属于高级灰的一种，所以高级灰并不单指灰色-种。）

设计要点2:排版

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，此乃贯穿设计的四大原则。

正如左图当中，①同一模块下文字与文字之间没有遵循对齐原则，文字大小不统一;②按钮与按钮、按钮与信息模块亲密关系不够清晰;所以总体给人排版比较混乱的感觉，用户体验较差。

再看右图，①图标风格颜色统- – .，遵循重复原则;②同-种类功能入口集中排布遵循亲密原则;③此模块为此页面最重要的模块，全部信息采用居中对齐，与其他模块形成对比突出重点，同时遵循对齐原则;④此模块下文字全部左对齐，遵循对齐原则。

遵从Deference-交互层

遵从指的是整个页面的交互，用一句话来表述就是:从哪里来回哪里去。流畅的动画和清晰美观的界面可以帮助人们了解和与内容交互，而不应该(因为太过花哨)干扰到用户的使用。内容通常充满整个屏幕，而半透明和模糊常常暗示有更多内容。

比如ios自带的一些转场交互，以设置页面为例，点击设置图标的一瞬间，会有一个由小及大的动画效果，让用户清楚的知道自己点开的是设置页面。

点击通知，通知页面从右侧向左划入，遵循从哪里来回哪里去的原则，返回的时候又从左向右滑回去。

深度Depth-结构层

使用不同的视觉层级和真实的运动效果来传达层次的感觉，赋予界面活力，并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用户产生喜悦感、更方便了解功能，还能使用户关注到额外内容。在对内容进行导航时，层级的转场效果提供一种有深度的感觉。

如下图:一个界面大体可以分为主任务层(最高层级)、底板层(中间层级)、背景层(最低层级)

如图：有小提琴照片的为产品页面的主元素，白色为其底版色。深色页面在小提琴的页面之下，从而可以实现小提琴页面可以盖住深色页面的交互效果。凸显产品在z轴层级的层次区分。

总结:

视觉层-清晰:从文本到图标都应该是<清晰>易读的，巧妙地突出重点且表达不同的可交互性(入口在哪)。

交互层-遵从:去<遵从>清晰流畅的动态效果易于用户理解内容并进行交互(我正去向去哪)。

结构层-深度:从视觉上的动态效果让用户理解结构层的<深度>，从始至终掌握当前所在位置(我现在在哪)。

当然IOS的三大规范不同的人也会有不同的理解，欢迎提出宝贵意见。

原文链接：https://www.ui.cn/detail/457822.html