如何将视错觉运用到UI设计界面中?

   如何将视错觉运用到UI设计界面中?

  视觉原理在当下红火的机械视觉中是必不可少的,那么在我们日常工作的UI产品设计中又有什么可能性的呢?今天,时间财富网小编从「视错觉」这个角度,探索下如何运用在UI上。
  视错觉历史
  古希腊哲学家亚里士多德的《灵魂论》里阐述了人类五感:视觉、触觉、味觉、嗅觉和听觉。我们视觉设计师暂时无法在长方形盒子(泛指各种电子设备)内设计味觉、嗅觉和听觉,而对于触觉,说到底,我们始终在与这个长方形盒子接触,但是无法通过对设计内物体的真实触摸而得到感觉,实际伸出手探寻或步行而感受到距离等,去比较大小、距离等进行认知。因为这个客观存在,也更加需要我们视觉设计师运用视觉原理与技法让用户更容易与机器进行交互。因为这样的认识, 我思考了以下这些可能性:
  一. 蓬佐错觉-Line
  蓬佐错觉是有关长短的视错觉。自从意大利心理学家马里奥·蓬佐(Mario Ponzo,1882~1960)发表了相关论文后,这一视错觉便被称为蓬佐错觉,但在这之前,它就早已被人们所熟知。
  上图上下并列的两条横线,上面的看起来比下面的长。有一种观点认为这是因为横线外侧的斜线使大脑觉得有纵深感,认为上面的线更远一些。长度相同的线段,位于远处的应该更长一些,因此上面的横线会让人觉得比下面的短。
  手机屏幕的边界就如蓬佐错觉中外侧斜线,分割线与边界的距离就能让人对间隔中左右信息产生或长或短的感受,易读性也成为考量的一点。在App设计中,全局规范考虑是非常重要的,满足了单个页面的视觉需要是远远不够的。前端开发害怕的是没有逻辑规则的不同,只要定义好功能规范,即使在不同界面使用不同线长短也不是大问题。
  简言之,在定义Line长短时,我们可以更多思考为什么要留边距、留多少合适、为什么确定这样的长短、是否有逻辑可循、考虑过全局性了吗、是否与品牌相合、是否能传达出视觉故事等等。
  二. 艾宾浩斯错觉-Space
  赫尔曼·艾宾浩斯(Hermann Ebbinghaus)是著名的研究人类记忆的心理学家,出生于德国,任职波兰布雷斯劳大学教授。他主要研究人类如何进行持续性记忆的(题外话:艾宾浩斯记忆曲线非常有名)。上图是他发现的视错觉图。位于中间的两个橘黄色的圆大小相同,但是看起来右侧的明显偏大。右侧橘黄色圆的四周是小圆,所以看起来比实际的大,而左侧的橘黄色圆周围是大圆,因此它看起来比实际的要略小。
  艾宾浩斯错觉在实际应用中非常广泛,利用我们身边的东西,进行排列组合,就可以确认发现视错觉。艾宾浩斯错觉加上德勃夫错觉(Joseph Delboeuf illusion)和万辛克(Dr.Brian Wansink)、薛尔特·梵·依特森博士(Dr.Koert van Ittersum)的研究证实,人们的进食量会被盘子的大小与颜色所影响,也就是说,我们会被这些视错觉而影响真实行为。
  三.卡尼莎三角–Iconography & Texture
  盖塔诺·卡尼莎(Gaetano Kanizsa,1913~1993)是意大利心理学家。他在意大利的里雅斯特建立了「心理学研究所」,为意大利心理学研究做出了巨大贡献。
  在卡尼莎发现的视错觉中,最有名的是发表于1955年大家所熟知的下面的「卡尼莎三角」。这个视错觉表明我们的大脑把实际上不存在的三角形轮廓线画了出来。我们把根本不存在的轮廓线称为「主观轮廓」。
  四. 冯·贝措尔德效应–Color
  在太阳照射的光波中,可见光是非常狭小的,我们只能看到区间在400-700nm的波长。
  在了解色彩视错觉前,我们需要知道什么是色彩。在学习什么是色彩时,有一个理论让我非常诧异——色彩是大脑的感觉。感觉?什么!我看到的花花世界都是感觉?
  接着,我来转述一下为什么说色彩是大脑的感觉。光照射到苹果上,而苹果表面只反射特定波长的光,其他光会被吸收,所反射的特定波长的红光被人收入眼帘,那么感觉就是红色。
  现代科学表明,由于不同对象反射光的波长不一样,人类才能感受到各种各样的色彩。而且,映入眼帘的光北视网膜细胞转换成信号,通过神经传达给大脑,至此才第一次有「是红色」的感觉。但是,有时候对相同波长的光也会有不同的色彩感觉,那就是视错觉。
  也就是说,在日常生活中,如衣服上看到的色彩,并非色彩本身,而是吸收波长后再反射的色彩,染料本身的颜色未必是最终我们看到的颜色,其中的原理如同上面那个苹果的光学反应。
  通常我们定义App色彩调性有几种常用类型:无色彩、单一主色、主次色彩搭配。色彩视错觉的色彩搭配让我想到了MD的色彩Guild-line,在不同色彩环境中无论哪种类型,都能通过周围色彩来影响主色,并让周围色帮助你表达App的情感。
t016fcd0d67e05b88d3.jpg
  关于UI设计师必看的面试经验和技巧
  很多UI设计师找不到自己的定位,或者说不清楚自己的能力所对应的价值,在面试时容易栽跟头,所以这次来说说有关UI设计面试的一些经验和技巧。以下是时间财富网小编为大家整理的关于UI设计师必看的5个面试经验和技巧,欢迎大家阅读,我们经常可以在脉脉的匿名区,或者QQ群还有知乎等平台上面发现一类朋友:我面试了10几家公司了,都等了半个月了还没有回复,现在UI市场饱和了吗,工作也太难找了吧!,这都找了两个月了。
  这里要说一下,之所以没有公司发你offer,本质原因就是你的能力和公司要求的岗位不匹配。
  接下来,看一组数据:波士顿咨询指出,截止2013年,世界设计师人数为9000万,而中国设计师人数就有1700万,互联网设计师的占比就有50%以上。UI设计在2000年的时候就在中国开始发展,2009年苹果公司正式把iPhone带入中国,移动UI开始红火,在2012-2015年这几年发展的最为迅速,各种培训班纷纷出炉,口号是毕业包工作,月薪6k+,这对于刚毕业的学生和转行的朋友们无疑是一根救命稻草,加上当时许许多多的公司高薪聘请一些学过点规范但只会用PS的UI设计师,导致整个UI市场的供不应求,培训班大量的崛起,流水线式的培训“UI设计师”。我们已经发现,2015年下半年开始UI市场的泡沫开始消散,但是依旧许许多多的人趋之若鹜,以为培训完就能拿高薪,我们都知道数量多的时候,质量决定价值,所以你还找不到工作是因为你的价值还不够高。
  那么讲这么多,我们如何顺利拿下面试这个终极副本:
  1. 优秀的作品(顶级的装备)
  2. 优秀的逻辑和表达能力(操作,手速)
  3. 优秀抗压及任务分解能力(应变能力)
  4. 优秀的IQ和EQ
  5. 彩蛋问题(运气)
  优秀的作品
  首先,请带上你认为你做的最优秀的2-3个左右的作品,当然是优秀的都可以带,但是请不要将陈年过气的作品都带上,第一,如果面试官问你你回答不出来,你也只能说一句这是很早以前做的,当时可能考虑的不周到,还不是给自己减分?第二,不成熟的作品拿出来会让面试官觉得你不够”聪明”。
  其次,可能面试官会把你的效果图和最终上线产品的页面相比较,为什么?这是看你的执行力与推动能力,也看看你是不是一个对自己项目负责的人。当然效果图和上线图有差距是由很多因素决定的,不一定效果图好看,落地图一般,就说明这个人能力不行,还是要综合来看的。
 
  手机UI设计规范以及注意事项
  手机已经成为我们生活中不可缺少的一部分了,在与手机共同生活的每一天里,我们只顾着玩弄手机,却不曾对其研究过,了解过,其实手机也有他们的规范,下面时间财富网小编就来说一说手机UI设计规范 以及他的注意事项。
  最常用的Photoshop、Ai和一些3D软件是制作的常用工具,在最终输入时会需要一些模拟程序以及平台程序的支持,不过在GUI设计阶段可以暂不考虑尺寸:建议选择240x320大小的屏幕尺寸进行设计,自由度和发挥空间会大一点概念:设计的概念是设计中尤其重要的部分,敢于尝试新颖的交互模型和GUI视觉元素是设计的重要工作。
  一、什么是Mobile GUI设计
  简单来说Mobile GUI设计就是手持设备的图形用户界面设计,狭义上来看是手机和PPC,广义上可以推广至手机,移动电视,车载系统,手持游戏机,MP3,GPS等一切手持移动设备。
  Mobile GUI的设计基于对手持设备产品的使用特性的理解,对用户的研究和对界面使用情景的深入研究。GUI的设计分为平台内置和主题设计部分,前者需要专业的design house根据厂家的实际产品进行设计分析后进行整体设计,后者则可以经由任何用户进行自主设计,当然后者的设计限制和平台限制都比较大。目前索爱和三星以及Nokia的S60平台支持用户的Theme自定义设计。
  设计研究的流程为:产品特性--用户心理--市场背景--图形设计策略--设计检验--实际设计投放二、界面基本要素
  手机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,目前较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。
  在更新颖的交互操作和与手机Id设计的整体结合上,韩系手机作的比较好,而在可用性和体验难度上,欧系手机则比较优秀。
  三、设计注意事项
  尺寸问题: 128x160, 176x220, 240x320 象素尺寸是目前较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由。
  色彩问题:由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节。
  可实现性问题:受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。
  通过了解了手机UI设计规范 以及他的注意事项,我们也知道了手机大概的设计,知道这些,有助于我们使用手机甚至是保护手机,使我们能安全的使用他。