移动端手机界面视觉疲劳分析

    本篇论文目录导航：

【题目】视觉传达设计中视觉疲劳问题探析 
【第一章】基于视觉疲劳的视觉传达优化设计探究绪论 
【第二章】视觉的解说 
【3.1】视觉的色彩疲劳 
【3.2】视觉的形象疲劳 
【3.3  3.4】视觉的心理疲劳 
【4.1】web端网页视觉疲劳分析 
【4.2】移动端手机界面视觉疲劳分析 
【4.3  4.4】传统视觉传达设计领域视觉疲劳分析 
【第五章】视觉传达设计领域缓解视觉疲劳的方法 
【第六章】眼与心的互动-寻找视觉舒适感与设计的平衡 
【结论/参考文献】视觉传达中缓解视觉疲劳的设计研究结论与参考文献

　　4.2 移动端手机界面视觉疲劳分析

　　4.2.1 多类型手机系统界面分析

　　随着智能手机的普及，我们用于移动端的界面操作也越来越多。虽然策划优雅的用户体验以及调整每一种交互是很重要的，但是也不能忘记使这一切成为用户眼前的实际像素。我们谈论手机操作系统的视觉设计，即手机系统的实际外观。

　　一个优秀的应用程序需要把很多学科相融合在一起，操作系统也是一样，但我坚持认为视觉设计是其中最为重要的部分。要谈移动设备上的应用界面，我们就先从最基本的手机操作系统开始。

　　首先，我们先来分析一下之前讨论最热的写实感向扁平化过度的 IOS 操作系统。以 IOS6 到 IOS7 的对比来阐明。当 IOS7 刚刚出现的时候，众说纷纭，褒贬不一，IOS7 的视觉界面扁平化可以说是引领了手机 ui 的一个新潮流，具有跨时代的意义。大家的争论和褒贬多半也源自前面理论部分说到的审美疲劳，说的通俗就是新旧的关系。过去熟悉的体验会对当下的感受产生影响，熟悉的东西让人习惯却也产生厌倦，而陌生的东西唤起新鲜感，却让人不知所措。这也是我前文所提到的视觉的心理疲劳，已经熟悉的事物被我们所淘汰有时候原因往往并不归咎于这个事物本身，而是出现的新生事物与过往产生了对比。所谓的新鲜感，是前后对比的差异得来的，对视觉而言，大量重复的信息会成为多余的信息，导致心理厌倦。俗话说：物极必反。当 IOS 系统写实化的表现形式，逼真的界面效果，夸张的光晕结合已经达到了心理疲劳的程度时，IOS7 简洁扁平的设计风格便应运而生了。

　　从视觉界面的角度，理性的分析，IOS7 系统的主屏幕是当时争论最多的一个地方，特别是新的扁平化桌面图标，毫无立体感。主屏幕是一个桌面的移动器，我们经常打开使用它，但是并不会一直盯着主屏幕看。IOS7的主屏幕明显比IOS6的明亮、简单，图标间的间距变宽，单个图标的像素也变大。文字标签的字体变大的同时，间距拉开变得更易读。IOS7 牺牲了边界，换取了图标的易读性，突出图标的内容。（图 78）舍弃了边界的 IOS7 依靠色彩、间距来实现交互和信息的分割，界面整洁又清新，（图 79）在内容上强调了美学和概念性，功能、装饰只出现在必要的地方。（图 80）整体 IOS7 的扁平化风格界面的色调相比 IOS6 来说更明亮一些，透气，间隔无处不在，界面颜色更统一，界面元素和风格更均衡。（图 81）当把整个界面色块化，就会发现 IOS7 整体明亮的风格占 70%,其余30%的暗色是实用型的风格。

　　扁平化设计舍弃了复杂的装饰设计，回归了设计的本质。力求简单，直击信息内容本身，之前的光影效果、阴影、边缘、写实将退出视觉舞台。视觉上将不再被精致的图标过分吸引，造成视觉上的集中和紧张，而是将打起 12 分注意的视觉回归到信息内容本身，尽可能的放松，没有繁复的装饰吸引。

　　安卓系统一直是与苹果的 IOS 系统并行的系统，可以说发展也是十分迅速的，在多类型手机上都可以运用，现在中国市场上，安卓系统的手机居多。不过，近年来国产手机行业的迅猛发展，小米、锤子等国产手机使用的人数也在增多。

　　安卓系统的图标目前仍然延续自己的风格，没有过于写实，也没有朝特别扁平化的方向发展。（图 82）首页屏幕和菜单屏幕是分开的，主背景色以黑色为主。总体视觉风格是比较多彩的，也有很多与 IOS 系统有区别的功能。

　　从图标的设计角度来说，最新的 Android4.4 中的图标已经有往扁平方向发展的趋势，在这里不能说扁平化的风格一定好，但是确实更加简洁。Android 主菜单界面的图标较小，间距大，但是在黑色背景上，颜色的跳跃感太强，视觉冲击力过大。我们再看锤子手机的 ROM 图标（图 83）一直保持自己的风格，没有趋之若鹜地采用扁平化设计，将拟物化进行了下去，不过整体感觉非常简洁，与众不同的九宫格设计，没有背景图案，没有桌面感。罗永浩曾经说过：“在老婆孩子的合影上堆放几十个图标简直不能理解！”不过，这样一来很多消费者可选择的条件变少了，因为有相当一部分消费者喜欢桌面放上个性化的照片或者图片，.

　　虽然菜单主屏背景也是采用深色设计，但给人的感觉并不像 Android 界面跳跃感那么强，相对颜色较稳定。ROM 的九宫格、十六宫格、三十六宫格将将主屏幕完全自定义化，用户自行选择图标大小。

　　再说 windows8 的系统（图 84），彩色块，绚丽的动画效果，漂亮的图示给人的冲击绝不是传统 Windows 桌面图标可以比拟的。同时大尺度的图标也让寻找应用程序更加方便。靠文字大小的对比变化来完成的分块信息，都让我们耳目一新。但是不得不说，每一个信息条目的彩色块与黑色背景相对比颜色过于鲜艳，在视觉冲击的同时或多或少的造成了视觉疲劳。

　　总得来说，锤子手机整体颜色设置相对于 IOS7 来说没有那么清爽，但是买锤子手机的人依然是络绎不绝，win8 操作系统过于先进，无论是色彩还是操作上都令人有小小的不适感，但是当时的诺基亚 windows phone 依然卖的不错。这也说明了界面风格是否适应人的视觉是一个方面，还有另外一方面是不同人群的不同喜好。年龄不同、生活环境、教育程度甚至是性别等等方方面面的原因促使人们的不同选择和喜好。单从视觉疲劳的角度来分析是一种观点，但是并不能把所有人的想法和感觉考虑在内。

　　4.2.2 手机界面的阅读疲劳

　　随着现代化网络出版、多媒体的出现和发展，普通书本上的阅读已经逐渐不能满足人们的需求。手持设备的不断更新，功能的不断增强，手持设备阅读已经成为我们每天生活中的必须活动。使用电子设备时间越长，反而使得人们更倾向于纸质的阅读，但是纸质书携带起来很不方便，在黑暗环境下又不便于阅读，所以标榜像书一样质感的 Kindle 受到大家的欢迎，不仅是因为屏幕质感，还有光度调节和可容纳一千本书的海量存储。在科技越来越发达的今天，人们还是倾向于进行电子阅读，用手机更是首选，无论在路上、地铁上、饭桌上无时不刻都有人低着头，把弄着手机。如今不断增加的字体及整合版面的需求，“易读性”成为了现代媒体的主要问题。然而手机有电子显示屏幕，是一种向外发光的设备，使用时间过长都会造成视觉疲劳，尤其在黑暗的环境下使用手机，更会对眼睛产生刺激。正因为如此，我们设计者要更加重视起来手机设备的阅读舒适性，互联网 95%的信息都是书面语言，我们必须优雅的处理这种丰富的资源。在手机上，我们使用的阅读量最高的莫过于新闻类的软件。每天早上起床来，吃早餐的时候或是上班路上，手机新闻是大部分人一定打开的应用。现在的新闻类应用基本都是由各大新闻网站下开发的，基本上都避免了造成视觉疲劳的设计。但是对比之下还是会有细微的差别。我们选择搜狐新闻、网易新闻、凤凰新闻和ZAKER 这四款使用率最高的新闻应用（图 85）。在页面的布局上，搜狐、网易和凤凰是基本相同的，并且这三款应用在底色的选择上都没有使用纯白色，而选择了有一定灰度的颜色。分别是：R:246 G:245 B:245 R:246 G:245 B:244 ,凤凰新闻的底色稍微比前两个深一些 R:236 G:236 B:235而 ZAKER 的底色是纯白色，无色相。淡灰色的底色缓解了文字与底色的对比。在发光的屏幕上，以底色白色反光最为严重，在阅读量较多的文字时，选择反光不强烈的颜色可减轻屏幕对眼睛的刺激。

　　在列表分布中，前三者是列表式，左图右文字，ZAKER 则与其他不同，分块对称式的分布。从阅读的角度来讲，这两种排列方式都可以，一种是循序阅读，而 ZAKER 则是将标题黑字的字体微微放大，让人注意到主次。从列表文字的易读性来说，网易新闻是最佳，搜狐新闻标题的字号适中，小标题的字号有点小，与标题的大小不协调，不利于人的阅读。而凤凰新闻没有小字介绍部分，只有主标题，使得界面感觉没有网易有层次感。ZAKER 的小字相比标题来说更加小，人眼极有可能忽略掉，视力好的年轻人看着比较吃力，老者更甚。在字体颜色的选择上，搜狐、网易和凤凰都没有选择纯黑色，都选择了相较黑色而言浅一些的深灰色。字体颜色的选择，目的与背景颜色相同，都是为了缓解视觉疲劳，ZAKER则使用纯黑色。

　　在新闻正文部分（图 86）我们可以看到四款软件的不同差异。首先从颜色上，ZAKER 在正文阅读中彻底败下阵来，黑白对比的强烈，不适宜长时阅读，字号的选择微大，但是却不见行距拉宽，没有其他三款明显的视觉引导节奏。其余三款中，应属凤凰新闻最为舒适，正文与背景对比柔和，行距拉开，并且段落中有视觉停顿点，相比较其他两款略胜一筹。

　　这几款新闻类型的应用都是做的相对优秀的，接下来我们来关注一下阅读类应用使人视觉疲劳的应用。一款叫友阅的应用，（图 87）图书列表页的文字大小不一，层次不清。标题、书文介绍、其他，这三类信息排列不明确，尤其是颜色的选择上，更是让人不解。书籍介绍页，信息层次十分混乱，文字大小排列不一，完全没有视觉节奏和停顿。每层信息的间距不讲究，可点击的文字放大变色为了吸引注意，但是影响了视觉效果。文章内页字体偏大，并且在每行折句后，标点符号居然在句前，十分不符合阅读习惯。更有甚者，虽不是阅读类的软件，但是内部有大段的文字信息，（图 88）绿野网的行程介绍页，页面颜色的问题，在后面色彩疲劳位置着重介绍。单从文字排列和文字的颜色的角度，已经让人无法直视。

　　在书刊阅读类的应用中网易云阅读做的还算不错（图 89），无论是字体选择，排版、颜色选择都令人比较舒适。另外在书籍的列架的设计上，一些国外的书籍阅读软件做的比较出色，例如 Banipal（图 90） .在大段文字的舒适程度上“一个ONE”也不错。

　　4.2.3 手机界面的视觉噪声

　　手机界面的视觉噪声其实和网页中是视觉干扰类似，之所以没有选择视觉干扰这个说法，是因为手机的屏幕较小，在人的视觉范围内完全可以涵盖。即便是一些视觉上的干扰，也不会影响人们的正常使用，所以我们称它为视觉噪声比较恰当。界面上的视觉噪声一般是由过多的视觉元素造成的，在手机界面上，由于空间的限制，我们日常用到的应用中鲜有十分繁多控件或元素导致眼花缭乱的状态。

　　普通应用中造成使用干扰的多半是手机的弹出广告。手机弹出广告与网页中的弹窗广告相似，在使用手机过程中，弹出会滚动的广告是让人十分懊恼的事情，手机屏幕不大，一不小心就容易点出下载页面或者广告页面（图 91），造成使用的困扰。常见的广告弹框躲在应用下方，也有在页面上方的弹框，一般较少。在手机游戏中，广告弹框有时会在打开游戏时出现在屏幕中间（图 92 图 93）。

　　还有一种视觉噪声是存在于这样一种状态，即页面无主次，也就是前面所说的过多的视觉元素[8].一款名为芝麻客的应用，被网友推荐为冷门但好玩的应用。但从首页的界面设计语言来说，却真的有它冷门的道理。在手机应用中，信息分块式表达是非常好的一种设计手法，但是芝麻客的首页（图 94），虽然采用分块式，却使用繁多的视觉元素充斥着每个信息块，导致信息不能直接的表达，分块信息变得无意义，这是比较典型的视觉噪声。再有较为典型的就属一些游戏类 APP 了，继“找你妹”之后，App Store 中就衍生出很多类似风格的游戏作品。

　　一款叫做史上最抓狂的游戏，真的让人的视觉“抓狂”.点开应用的瞬间就弹出一个大大的广告（图 95），将广告关闭后，紧接着弹出小广告，在屏幕下方不断的滚动。杂乱的视觉元素和颜色充斥着整个屏幕，伴随着怪叫着的背景音乐，名副其实的视觉和听觉的双重噪声。游戏界面控件的位置摆放也比较杂乱，整个视觉设计叫用户无所适从。有些时候，苹果 IOS 系统自带的消息提示小红圈，也是页面中无形的视觉噪声，有一些视觉敏感的人会想方设法把它们消掉，但也有神经大条的人对它们视而不见。

　　一般来说，界面应该使用简单的几何形状和最小的轮廓（个别游戏除外）。

　　颜色的数量也要严格控制。视觉上过分装饰、混乱或者过多的屏幕都会加重用户的负荷，产生“信息焦虑”的情绪，这将影响用户的速度、理解能力和任务的完成。

　　4.2.4 手机界面的色彩疲劳

　　在大多数视觉界面上，颜色是一个重要的方面。现在彩色液晶显示屏无处不在，颜色也是视觉设计和信息设计的有效工具。它具有很强的效果，但也容易被滥用。颜色作为界面视觉语言的一部分，向用户传达信息。对于多数应用程序，颜色的使用要吝惜。恰当的使用颜色可以让重要的物体引起人们的注意、暗示关系，并可以传达其他信息和状态。如果不小心，颜色在界面中就会被滥用。

　　一个界面加入一种颜色可以大幅度减少搜索时间，增加额外更多颜色仍然可以提升这种效力[9].但是增至 7 种或者更多种颜色时，视觉搜索功能显着退化。

　　这个数字与我们的短期记忆有关，我们短期记忆只能存储有限信息。因而当有太多颜色时，我们的大脑不得不花费额外的时间记住每种颜色的意义，这样降低了我们大脑的处理速度。在旅游应用（图 96）去哪网的首页就是这样的问题。

　　高度饱和的颜色在手机界面上也要慎用，高度饱和的颜色看起来会更加鲜艳，从而吸引更多的注意力。在较小的地方适当的运用饱和适中的颜色可以有效的吸引用户的眼球，但这种做法应该保守使用。（图 97）Poptile 游戏中的界面就是高饱和度的粉色，长时间看会产生色彩的疲劳错觉。Labyrinth（图 98）的游戏内页也出现同样的问题，不同的是在黑色背景下的高彩度图形，在游戏过程中彩度还会更高，甚至有发光效果，很容易造成视觉疲劳。还有一些应用启动页，在选择颜色时也要注意画面滑动时产生的视觉效果，色彩饱和度太高，同时两个颜色不在一个色系，瞬间转换很容易造成眼花。在网页色彩中，着重强调了红色，在手机界面也是如此，可口可乐的应用（图 99），红色应用饱和度很高，对视觉造成一定的刺激。但是却也明确的记住可口可乐，起到了品牌效应。

　　在互补色的使用上，我们要尽量避免两种互补色在高饱和度的情况下，放置在一起，否则会头昏眼花。将红色字体放置在高饱和度的蓝背景下，文字很难正确辨识。所以两个相等色块在一起时也要慎用，游戏 poplite（图 100 图 101）中，屏幕中央的红蓝色块，在游戏界面中游弋，是游戏的主题，长时间观看后就会产生眼花。

　　还有一种情况，即色彩的对比度问题，（图 102）购物应用蘑菇街中就出现这样的问题。菜单栏分块色彩用色较多，每一栏菜单的文字颜色都不相同。如果图形颜色与背景颜色只是色相不同，饱和度无差别，视觉就比较难辨认。相比较而言，tell 这款应用（图 103 图 104），同样运用多色，明度也差不多，但效果却大不一样。如果有可能，应该尽量避免在彩色背景上使用彩色的文本。

　　4.2.5 手机游戏类的负荷疲劳

　　通常情况下，考虑设计中的负荷问题时，设计者都想要减少负荷，特别是认知负荷和视觉负荷，让产品更加易用，但有时也会想要增加负荷。比如，要吸引用户注意力的话就要增加视觉信息，加入图片、动画和视频，因此负荷就会变多。

　　有意增加视觉负荷的最好例子就是游戏。游戏是通过增加负荷数量来提升挑战难度的。有的游戏需要玩家思考，因此需要大量的认知负荷：有的游戏需要玩家在屏幕上寻找物品，因此需要大量的视觉负荷。有的游戏需要玩家用键盘或别的设备来瞄准并射击敌人，因此需要大量的动作负荷。许多游戏不只增加了一种负荷，有的游戏同时具有视觉和行动的挑战难度。

　　最近火热的益智类游戏 2048,第一版的设计界面十分简洁清晰（图 105），橘色调为主，饱和度不是很高，视觉观感很舒服，只是有脑力的负荷。但是，最近新出的几个版本，颜色搭配大不如前，（图 106 图 107）没有统一的色调方向，颜色层级变化也不是在同一色系逐一变化，并且加了阴影装饰不如从前简洁，在游戏的过程中不纯粹，增加了视觉负荷，易造成视觉疲劳。

　　前几年风靡的“找你妹”也是认知负荷和视觉负荷的双重体现（图 108）。“找你妹”是一个按指定要求寻找对应物体的游戏应用。主体物的颜色设置上多为蓝色和红色，饱和度不高，并且没有突出的颜色。但是正因为所有物体的颜色相同为寻找增加了难度。随着级数升高，计时加快，容易造成心理压力。但是通关的失败会刺激人的好胜心，继续玩下去。视觉查找加上记忆物品的双重负荷，增加了视觉疲劳感，更有甚者，新闻报道称，一男子整夜不睡通关找你妹，第二天视力模糊甚至出现眼盲，不得不去就医。还有一些消除游戏，例如 pop sta（r图 109），画面的颜色饱和度很高，背景为暗色，强烈对比下使得前景物体更加明亮，再寻找相同色消除时，视觉要滑过多种颜色，造成视觉疲劳。还有一些找不同的软件，多是此类问题。因此，有些手机游戏可以适当的玩，最好不要长时间的玩，以免造成视觉疲劳引起眼疾。

　　4.2.6 针对特定人群的专题类手机应用辩证分析

　　设计产品时，考虑到用户的想法，结果往往事半功倍。网站是设计给大众化的访客，然而手机应用则不同，有一些特定的人群需要小众类型的 APP.针对特定人群时，我们就不能用大众设计的标尺来衡量小众的设计。

　　儿童和老年人都喜欢单纯的、高纯度的鲜艳色彩，这是相对稳定的生理和心理特征，可能与视觉功能的成熟或衰减有关。从儿童画的色彩特点显而易见，这个特点在一些画家晚年作品的色彩变化中也可以看出。考虑到不同人群对色彩有不同的心理适应性，在针对特定人群设计 APP 时应该有所选择。

　　前文我们说过色彩彩度、饱和度过高会引起视觉疲劳的问题。但在为儿童设计的 APP 中，我们就要抛下这一原则，选用色彩鲜艳，饱和度高的颜色进行设计。例如 reader,是一款交小孩识字的应用，在中国的小朋友可以用来学习英语。

　　reader 里面的色彩运用丰富，并且有十分可爱的卡通形象和动画。是十分适合儿童的一款应用。还有一款国外的 what's next（图 110），在高饱和度高明度的蓝色上面，运用着同饱和度的彩色图形，这与我们提出的色彩疲劳问题相悖了，那是因为受众不同，视觉感受也不尽相同。

　　在前文的阅读疲劳中我们也曾提到，应用内的字号大小，不宜过大或过小，容易造成阅读中的视觉疲劳。但是这一论点，在专为老人设计的 APP 中又不成立了。懒人听书这个 APP 是专为老人设计的一款读书软件，里面的列表字体是普通字体的 2-3 倍。也正是这样充分体察老年人感受的设计，得到了广泛的认可。

　　老人用的（图 111）计步器或测量血压的应用多设计成大图大字最为直观的页面。

　　老人普遍讨厌点击，跳转，喜欢直观的信息传达。有时，针对男性和女性的不同应用设计都应有不同的区别，例如（图 112）女性应用“大姨妈”色调向女性靠拢，应用内的设计都是女性喜欢的小巧精致的视觉元素。

　　其实，在手机应用的设计中，我们的辩证思维体现在目标用户上，针对不同的特定人群，调整不同的设计方案，做一个隐形的设计师，了解用户的视觉需要和想法才是最重要的。