UI设计中扁平化理念应用

   UI设计中扁平化理念应用

  目前在中国,UI设计中扁平化的运用还是一个需要不断成长的设计领域,是随着智能电子产品的普及而诞生的一个正在成长的新型行业。在信息化高科技的时代,手机、平板电脑已成为我们生活中不可或缺的一部分,新媒体技术的成长使我们的生活更加便捷。
  1 扁平化设计的福音
  二次元的扁平化设计给我们带来更多福音。摒弃一切装饰效果,元素边界干净利落,完全的平面化,这就是扁平化的印象。它能够减少操作时的认知障碍,用简单直接的方式展示,创造出平面功能性的最大值。首先,中国电子科学技术软件的开发还存在一些弊端,就是交户界面的设计比较粗糙。由于大多数软件开发人员都只接受过生硬的计算机及软件知识的教育,而不具备艺术设计及审美,这就形成了其软件开发功能上比较强,用户界面交互方面比较弱势。有些软件开发人员把大量时间用于复杂的程序编写,而不去关注交互界面的设计,往往是事半功倍。其次,过于烦琐的交互界面设计。阴影、纹理、渐变、3D和各种装饰元素的使用,已不能使产品在使用功能上提升效率;而且随着网站和应用程序在许多平台涵盖了越来越多不同的屏幕尺寸,创建多个屏幕尺寸和分辨率的skeuomorphic设计既烦琐又费时,使得设计师的工作量更加烦琐,以至于让用户在操作过程中产生烦琐复杂感,从而降低了交互的使用效率。所以,简洁大方的交互界面设计自然能够引导用户,并且在最短时间内熟练使用。这就是平面功能最大化――UI扁平化设计。
  2扁平化的设计特点提升用户界面的功能性
  在设计领域,创造有用的东西是一个设计优秀的象征,但如果这种象征基于手机及平板的界面设计,它的实用度会受到很大的限制。所以要另辟蹊径,使平面化的界面最大限度地发挥其功能性价值。UI扁平化设计,一个通过交互界面设计来改造提高功能化的重要手段。使用户界面保持独一无二的创造力和平易近人的功能性,给用户舒适、方便快捷的使用体验。
  (1)去粗取精。简洁元素。UI界面的设计是连接人与机器的桥梁,按钮和图标则更是通往下一站的重要砝码。UI的扁平化设计采用简单的元素去设置用户界面,坚持简单的形状并且偏向每个形状的单独使用,因为其形状的边角已经体现最完美的曲率。明释义中的象形图形、语标符号,暗释义中表意图像、抽象符号这些按钮和图标表达方式的出现都是对复杂语义最简洁、最易理解的表述。也是经过反复证明的,且无异议、无障碍的通用符号,这种扁平化按钮和图标的运用,大大方便了设计师,且省去了不同国界,不同语言及地域的人们进行不同设计工作的障碍,简洁的扁平化按钮和图标,不仅仅让界面更加简洁美观,更使得操作功效大大的得到了提升。
  (2)去伪存真。去除装饰。把一切物象用平面二维化来进行设计是扁平化设计独一无二的标签。
  (3)由此及彼。秉承最简风格,在共性中寻找特性。最简风格是扁平化设计最简单但最行之有效的设计。避免了一些过于花哨和烦琐元素的加入,简洁的色块和文本也许还不能完全满足设计维度,但一个简洁自然的摄影或插画作品作为背景的加入,会增添意想不到的视觉效果。这种加入,且在适合设计整体的融洽性,令突出的主体可以包含轻微的梯度阴影,让用户有种似有的立体感,但这种微阴影的加入,并不会打破扁平化设计的二维特点。因为在二维世界里,一个微弱的效果可以增加设计的空间感,但整体的感受依然不受影响,更行之有效的引导了用户的视觉中心,帮助用户更正确的使用产品,功能表现可谓是锦上添花。
  (4)由表及里。注重文字及色彩。合适的字体及字号使用户阅读得更加舒适且有效率。在一个UI界面中,版面的大小是有限的,这使得版面内容的编排变得非常重要。最常见的字体是首先要考虑的,就如把一段高度美化的文本放置于UI界面中,这对用户来说,在阅读上会产生疲劳和反感,从而降低了阅读率和使用率。所以,字体应该简洁大方才能行之有效,无称线字体在现如今最受宠爱,因为它在信息量大的情况下依然可以使读者轻松阅读。
3321351.jpg
  UI设计中的色彩运用研究
  1 UI设计中色彩的功能
  色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用,可以归纳为以下几个方面。
  1)显示界面的整体架构
  一个UI界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个UI界面,看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏,按钮等构成元素,并显示出UI界面的逻辑架构。
  2)明确视觉层级关系
  UI设计中不同的内容属于不同的层级关系,如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系,还可以通过色彩间的强对比突出关键内容。
  3)营造界面整体风格
  UI界面虽然是个复杂的视觉图形系统,但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系,可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系,女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。
  2 UI色彩设计方案
  在进行UI设计时,要通过对产品及用户体验的分析确定明确的色彩搭配反感,形成“标准色彩规范”,在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号,方便设计师的设计稿的色彩统一。
  1)主色调
  主色用量基本占据全部用色的75%,基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律,可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。
  根据色彩在视觉中的能量值,一般主色倾向于选择饱和度高、明度低的色彩,往往会在在同一界面中占据较大的面积或明显的凸现于背景。
  2)辅助色
  辅助色起到辅助主色的作用,在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果;而用主色邻近色作为辅助色可以让界面有丰富的变化,产生活泼感;用主色调对比色作为辅助色可以让主色更为突出。
  3)装饰色
  占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别,一般在明度、饱和度上要有明显差异,一般会用明度或饱和度高的颜色。
 
  UI设计需要了解的十大准则
  格式化内容
  创建屏幕布局的时候,应该适适配iOS设备屏幕。用户应该一次看清主要内容,而无需缩放或水平滚动触摸控制尽量采用专门为触摸和手势设计的界面元素,这样可以使应用程序的交互更加轻松自然。
  命中目标
  设计可触控的控件的时候,尺寸不得小于44x44px,只有这样才能确保触摸的精度和命中率。
  字体尺寸
  文本中的文字尺寸不得小于11点,这样才能确保在常规距离下,无需缩放就可以清晰地阅读。
  对比度控制
  尽量确保文字色彩对比更明显,并且调整文字与背景的对比提高可读性。
  间距调整
  不要让文字出现重叠的状况。适当地增加行高和行间距,提高文字的易读性。
  高分辨率
  为所有图片资源提供高分辨率的版本。那些未曾@2x的图像在Retina屏幕上会出现模糊的状况。
  防止拉伸
  始终控制好图片的高宽比,可以缩放,但是一定要避免拉伸,这样可以避免失真。
  信息架构
  创建易于阅读易于调整的布局,确保界面内容的可调整性。
  保持对齐
  让文本图片按钮在界面上保持对齐,相似相关内容合理靠近,让用户更容易理解界面信息。
  简易性
  界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。
  用户语言
  界面中要使用能反应用户本身的语言,而不是游戏设计者的语言。
  记忆负担最小化
  人脑不是电脑,在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限,24小时内存在25%的遗忘率。所以对用户来说,浏览信息要比记忆更容易。
  一致性
  是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与游戏内容相一致。
  清楚
  在视觉效果上便于理解和使用。
  用户的熟悉程度
  用户可通过已掌握的知识来使用界面,但不应超出一般常识。
  从用户习惯考虑
  想用户所想,做用户所做。用户总是按照他们自己的方法理解和使用。
  通过比较两个不同世界(真实与虚拟)的事物,完成更好的设计。如:书籍对比竹简。
  排列
  一个有序的界面能让用户轻松的使用。
  安全性
  用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。
  灵活性
  简单来说就是要让用户方便的使用,但不同于上述。即互动多重性,不局限于单一的工具(包括鼠标、键盘或手柄、界面)。
  人性化
  高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统,即用户可依据自己的习惯定制界面,并能保存设置。