干货分享功能至上的扁平化界面设计

扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。

扁平化的设计,尤其是手机的系统直接体现在:更少的按钮和选项,这样使得UI界面变得更加干净整齐,使用起来格外简洁,从而带给用户更加良好的操作体验。因为可以更加简单直接地将信息和事物的工作方式展示出来,所以可以有效减少认知障碍的产生。

优点

1.降低移动设备的硬件需求,延长待机时间;

2.可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生;

3.随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既繁琐又费时。设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。扁平化设计更简约,条理清晰,最重要的一点是,更好的适应性。

设计趋势

越来越多的网站设计已在UI上走扁平式设计的路线。谈到设计,无论是一个网站还是一个应用程序,扁平化和极简的设计正在成为新的趋势。人们正在原来一直很受欢迎的skeuomorphism设计(模仿实物纹理),苹果推出iOS时许多设计师都采用它。

但随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,网站设计正朝着更加扁平化的设计,你可以一次保证在所有的屏幕尺寸上它会很好看。

由于拟物化界面的过度装饰,忽略了对信息进行有效规划,使用户产生视觉负担。其次,拟物化设计跨平台呈现时有限的兼容性,在很大程度上限制了自身的发展,与日益增长的用户需求和当下快速迭代的技术是背道而驰的。

设计技巧

对于设计师来说,如果你观察微软的WindowsPhone的平台,你可能会发现一个特别的现象:那就是难看的应用不多,但令人印象深刻的应用也不多。应用很有统一感,但是很难张扬个性,以至于有的开发者感叹,它们看起来都是一个样子。设计师JohnnyHolland将Metro语言比作是包豪斯风格,并且指出,“因为去除了装饰,使得个性化的空间很小”,这可能给人以“缺乏生命力”的感觉,所以要想设计做出好的扁平化设计,也是非常需要技巧的。

简单的设计元素

扁平化完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。

强调字体的使用

字体是排版中很重要的一部分,它需要和其他元素相辅相成,想想看,一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子,无衬线字体家族庞大分支众多,其中有些字体会在特殊得情景下会有意想不到得效果。但注意,过犹不及,不要使用那些极为生僻的字体,因为保不齐它就把你带进坑里了。

功能性扁平化表现形式

交互设计的主要目的:始终是清楚地向用户传达信息并提供易用的界面。扁平化设计将功能性与视觉化相互结合形成,符合人们心理的高效率可操作界面。

扁平化界面设计遵从少即是多的设计原则,除去了界面多余的装饰效果,其简洁和大胆的视觉表现形式,与以往的界面设计有着本质上的区别,更是对当代年轻用户情感需求的捕捉和反馈。

①首先是图标,扁平化图标设计是对以往传统图标设计的抽象化和平面化,其舍弃了多余阴影、高光、投影,采用符号性极强的视觉图形,经过高度提炼的图标,具有更强的标示性,而且有效地提高了信息传达的准确性和快捷性。

②再是字体,强调功能性的扁平化设计突破常规的字体和字号,在简洁的界面中采用超大字号和新颖的无衬线字形,突出关键信息,同时为文本内容创建良好的次序和节奏。

③然后是版面,传统印刷排版风格被引进扁平化设计中,将超大字号的标题,亮丽的色彩和合理的信息,都精密按照逻辑性的栅格系统排版。另外,通过独特的留白手段不仅为用户流出思考空间,更是无形之中使内容本身更加醒目。

扁平化界面信息架构

①信息组织结构优化界面布局。界面设计应最大化地帮助用户快速、直接地完成操作,获取有效信息。而多层级菜单和页面切换増加了中间层的诜项操作,打断用户的本来查询路线甚至造成“迷航”现象。扁平化界面设计信息组织结构以“广而扁”的鱼网状形式,体现信息的横向维度。

减少或取消中间层级的信息类目从而缩短用户访问信息路径,帮助用户减少负担,在最短的时间内快速锁定信息目标。同时从用户需求出发,对多样化界面模块进行信息透明化管理,无须切换画面,用户即可在一个界面同时掌握多个不同子模块的信息变化,实现多重数据查看,为用户提供更加直观的界面导航,提高信息访问效率。

②多样化导航扩大隐形面积。由于手机等移动设备的屏幕尺寸较小和设备功能相对较低的缘故,大多采用多层级纵向界面分,但若要实现“广而扁”的扁平化设计,则要另辟途径突破界面面积限制,扁平化设计利用多样化导航方式开辟新的隐形畀面。

例如:扁平化设计利用特殊的“环景界面”设计,翻转方格设计、折纸式翻页等手段增加界面的隐形面积。“环景界面设计”是利用界面设计元素的连续产生界面延伸感,通过横向滑动,在二维的空间内展示多种类型、多种来源的信息内容,更加灵活的用户推送更多的信息。

扁平化设计不仅仅是一种视觉风格的改变,更是一种设计语言和思维方式的演化。扁平化的界面设计建立在用户认知心理的基础上,用清晰的信息呈现方式、直接的界面操作、简洁的视觉画面将信息,直截了当的传递给用户。优秀的界面设计必须具备满足人们轻松流畅的界面操作要求。

本文版权归原作者所有,如有侵权请来信告知

扫码


转载请注明:http://www.shamoyongshi.net/zzbx/6145.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了