这次给大家带来的UI设计干货是移动端UI视觉分隔设计的常用技巧，学UI设计的同学都知道，移动端UI设计需要有效的理解用户与程序的交互关系，包括视觉元素与功能操作等都需要大家格外注意的。
想了解更多UI设计，可以关注我们的精品课程哦~
移动端UI视觉分隔设计的常用技巧：
传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果，但是它们在移动端UI上有着致命的缺陷：占用空间
许多app应用程序并不复杂的布局，那么一看的话,觉得还可以设计的,但是当你真正开始设计一个原型应用程序,会发现它并不那么简单。看别人已经完成设计可能会觉得很容易,但当自己动手特定元素的选择和设计是很容易落入陷阱,这时间来理解它的难度不在于多少工作量,设计师常常陷入细节建造监狱,这是它的难度。
UI交互动效的设计原则
在互联网发明之前，动画就已经所处可见了，可能你需要穷尽毕生之力才能学会如何将动画做得绚丽辉煌。然而，在互联网中实现动画效果自有其独特的限制和挑战。为了实现流畅的 60 帧的动画效果，每一帧都需要在 16 毫秒内完成渲染!时间很短，所以我们需要找到最高效的方法去渲染每一帧内容，从而实现流畅的表现。
1、除了透明度(Opacity)和切换(Transform)，不要改变任何属性!
即便你觉得可行，那也别冲动!动画中百分之八十的优化会用到这项基本原则，即使是在移动端也一样。你或许以前听过这个原则，这不是我提出来的，但是很少有人去遵守。这跟“管住嘴迈开腿”一样，建议很好却也最容易被忽略。对已经习惯了这种思路的人来说这非常简单，但是对那些习惯用传统的 CSS 属性去做动画的人来说，这会是一次质的飞跃。
比如，你想让某个元素小，你可以使用 transform：scale()，而不是改变宽度;如果你想移动它，你可以使用简单的transform：translateX 或者 transform：translateY，从而替代乱糟糟的外补白(margin)或者内补白(padding)?—?那些需要重建每一帧的页面布局。
2.分隔线的替代方案
系统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果，但是它们在移动端UI上有着致命的缺陷：占用空间。的确，一条线能有多占空间呢?但是实际上，往往一屏需要分隔的内容会很多，分隔线一点也不少。如果参考传统的用法，一个界面元素较多的移动端页面上可能会充满了分隔线构成的视觉噪音。值得注意的是，现在用户越来越倾向于简约的界面，这也使得如今的UI设计会尽可能多的剥离次要元素，而仅保留基本元素。这种转变背后真正的重点，是设计重心向着内容和功能转移，这样的设计自然而然地会让界面看起来更加简洁。
传统的分界线在桌面的UI设计中有着长远的历史，设计的最终所展示的效果也是不错的,但是它们在移动端用户界面有一个致命缺陷:占用空间。确实,一条线可以占空间?但事实上,很多内容往往需要一个屏幕空间,分界线往往是不能够少的。如果参考传统用法,移动终端界面元素更多页面可能充满了视觉噪声成分的分界线。
3.内嵌分隔线
联分离线和全出血位分割线是不同的,它一般是用来区分相关要展现的内容,如不信联系人列表的一部分,通常用作视觉线索,为了方便用户浏览大量相关内容,当用户浏览时,他们将作为路标,方便用户快速翻页浏览。视觉上,全出血分界线是不同的,他们通常是有点短,并将留一些空间用来区别其他的元素,如在联系人列表的第一个字母。
