扁平化是近两年手机图标设计发展的一种趋势,因此作为一名全栈UI设计师,扁平化ui设计界面的方式以及扁平化ui图标设计特点还是非常熟悉的。今天就跟大家谈谈扁平化ui设计界面的方式以及扁平化ui图标设计特点,希望能对各位UI设计师的图标设计有所启迪和帮助。
扁平化ui设计界面的方式
色彩和形体
①通过色彩表达空间感。在拟物化的UI设计中,可以模拟材质和纹理来表现空间感,通过对不同的质感、纹理和颜色组合形成丰富多彩的界面视觉空间。但是扁平化UI的典型特征就是不使用材质和纹理,主要通过色彩对比来形成空间的深度。不同的色彩具有不同的属性,我们可以利用色彩的明度、纯度和色相对比来获取界面的空间感。
一般情况下,暖色、纯色、高明度色、集中色等具有前进的感觉;而冷色、浊色、低明度色、分散色等则具有后退的趋向。冷色调给人以后退的心理感受,暖色调给人以前进的心理感受。在黑背景上,亮色具有前进感,深色具有后退感;在白背景上,亮色具有后退感,深色具有前进感。
在其他条件相同的情况下,纯度越高的色彩越具有前进感;纯度越低的色彩越具有后退感。界面设计师可以利用色彩变化表现空间感的技巧来营造界面中更为真实丰富的空间效果。
②通过形体表达空间感。在拟物化UI设计中,界面框体和图标造型会大量应用透视来表现空间感和其三维属性。而在扁平化UI中则通过形体与形体之间的关系如大小的差别(近大远小),表现出空间上的距离感;或者以形体的重叠和覆盖使之产生前后和上下的空间感;放射状的阵列和疏密的利用也能营造空间和深度;还可以利用面的转折来表现空间感。
明暗关系
在界面设计的空间表现上,为了塑造出生动的空间感、层次感,明暗表现有着不可替代的重要作用。物体接受了光源,会产生投影,投影可在形象的前面或后面,表现出形象的轮廓、体积。投影的存在使形象更富于真实感,它是空间感的反映。
时下流行的扁平化长阴影设计,更强化了界面中阴影对空间的表现力和形式感,就像冬天傍晚时分,物体长长的投影一样,格外引人注目。这种45°比一般情况要长很多的投影效果在保持扁平化的同时更强调了空间的表达。当然,扁平化UI中阴影和渐变的应用需要遵循少量精炼的原则,在合适和重要的区域添加才能起到画龙点睛的作用。
动态图形
界面设计要求向用户传递信息过程中通过合理的空间表现或隐喻来呈现界面的层级结构和相互关系,将空间深度变化为能帮助传递一定信息的视觉表达元素,其存在意义的核心是“层次”和“秩序”。界面设计可以有效地利用动态图形,通过有组织,有目的的设计理念和设计手段,把时间与空间串联,结合现实中的三维空间及时间,从而扩大界面视觉语言的表现力。
动态过渡对空间的表达。在界面中动态的转场过渡越来越多的运用,常配合手势使界面对空间深度的隐喻更为深入和自然,同时也倾向于将信息扁平化。渐隐渐现相对于变形和三维翻转比较轻量;同样是移动,时间、速度、加速度、距离的不同组合造成的心理感受也会大不一样。
界面中全新的动画,也为界面带来“深度”和“活力”。界面的动态图形也通过创新表达空间的深度,这种创新不一定是颠覆性的,或许仅仅是基于以前的一些微小细节的变化。
空间的隐喻
隐喻是一个综合的手段:包括视觉层面的拟物、行为的模拟以及对整体概念的利用。在扁平化的UI中也通过这一方式营造了用户对于空间感受的心理真实。行为的隐喻来自真实世界,但不像拟物那样显而易见,它伴随着操作发生,自然而然。 在界面信息陈列有两种模式:
①同一空间毗邻陈列将信息同屏并列地显示出来,当然这样做取决于信息和功能的多少,也可以筛选主要的信息呈现。毗邻陈列提供了更直观的操作方式,加速了交互行为。
②另一种方式是沿时间线陈列,这种方法把功能、信息分割进不同深度的层级关系里,这么做能减少用户误操作的次数,同时便于在不同层级强化主要信息。
扁平UI对空间的隐喻,其目的还是为了高效的交互、良好的体验以及营造深度的沉浸感。而关于沉浸感,扁平和拟物有着不同的解释和目标。扁平化的沉浸感是沉浸在信息的海洋中,拟物化UI中我们可以认为那些承载信息的容器环境也是内容的一部分,其界面元素在视觉上做了不同程度的刻画,其沉浸感强调的是整体氛围的融合。
扁平化ui图标设计特点
扁平化是一种二维形态,这种设计的核心理念就是化繁为简,把一个事物尽可能用最简洁的方式表现出来,但简洁不等于简单。如果拟物化是西方的油画,注重写实,那扁平化就更像是中国风的水墨画,注重的是写意。尤其在移动设备上,能尽量多的在较小的屏幕空间显示内容而不显得臃肿,使人有干净整洁的感觉。
首先,扁平化的界面通常使用鲜艳、明亮的色块进行设计。形态方面,以圆、矩形等简单几何形态为主,界面按钮和选项也更少。扁平化风格中设计元素的减少,使色彩的使用更加规范,字体标准更加统一,使其形态与整体更加相适应,因此更加容易形成完整一致的模式,也整个界面简洁大方、充满现代感,呈现极简主义的设计理念。
其次,扁平化的界面提升系统效率,降低设计成本。拟物化风格在细节处理上占用大量数据,数据量的增加势必提升系统占用空间,降低运算速度。而扁平化风格由于设计元素、色彩的减少,摒弃了过多的装饰,使人机交互过程中效率得到提升,系统功耗减少,提高运算速度,延长待机时间。
最后减少体验者使用过程的心理负担。随着硬件设备性能的不断提升,体验者的操作内容和范围也不断增加,拟物化界面的点触样式更容易造成使用过程中的不便,增加体验者心理负担造成疲劳。而扁平化设计的模糊触控范围点触区域,使体验者在使用过程更加自如。
以上就是扁平化ui设计界面的方式以及扁平化ui图标设计特点的总结,希望对你能够帮助,在学习的过程需要多注重实践动手能力,只有自己动手了才能够真正了解到其中的一些细节。大家有了解更多关于UI设计学习方法、小技巧以及行业相关信息,都可以加V:913438879一起交流,我会把两年来的UI设计师工作经验和建议倾囊相授的。