07 颜色和字体

手机游戏用户体验基础之:07 颜色和字体。本篇分为颜色、字体两部分;尤其要注意交互元素和非交互元素的颜色使用。

1、选择一种颜色来表达交互和状态

1)考虑选择一种颜色来表达交互和状态。
2)交互元素和非交互元素避免使用同一种颜色。
3)不要让颜色分散用户的注意力,通常让颜色起到微妙增强的作用。
例:看下面两张图的对比
20131023_yanseheziti_yansejiaohu
[左图]互动元素的颜色超过4种,界面上的操作重点不明显,整体感觉混乱。
[右图]基本用红色来表达互动颜色,主要操作重点突出。

2、关注色盲

20131023_yanseheziti_semang

关注色盲,在同一个界面中不要使用红色和绿色来区分同一个元素的状态。

3、注意不同环境下的颜色对比

注意不同环境下的颜色对比,尤其注意在室外较强时,所用颜色能很好的区分清楚。
例:下图为在强光下的效果,有些设计不好的图标已经分辨不出了。
20131023_yanseheziti_huanjing

4、研究不同国家如何使用颜色 

花时间研究不同国家如何使用颜色,不要违拗当地文化。

5、同种内容保持字体样式的统一

20131023_yanseheziti_zitiyizhi
[左图]为字体一致性的正确用法;[右图]为错误用法。

6、字体始终清晰可辨

20131023_yanseheziti_zitiqingxi
1)文本不小于22PX。
2)标题和正文使用相同的字体样式,标题应加粗以示区别。
3)在同一种内容的表现上,保持文本样式的一致性。
4)考虑用户设置字体大小时,是否随之调整界面布局。

例:图示中,标题和正文区分明显。

 

 

 

 

06 动画

手机游戏用户体验基础之:06 动画。动画作为沟通方式有其得天独厚的优势,表达更生动、有趣。但是动画滥用会造成效率降低和情感浪费。

1、动画的优势

20131023_donghua_youshi
动画的优势:

1)有趣
2)反馈更生动
3)操纵感更强

常用于:
1)沟通状态
2)提供有用的反馈
3)增强可被操作的意识
4)可视化体现行为的结果。

例:左图提示操作的动画,非常生动、易懂。

.

.

2、保证动画的流畅性

谨慎添加动画,尤其是在游戏技术效率不高的时候。主要集中在一些重要的效果上。

动画滥用:
1)阻碍游戏的流畅性
2)降低性能
3)分散用户的注意力

例:[下图]技能的发动就是一个非常重要的效果。
20131023_donghua_liuchang

3、要比系统的动画漂亮

确保您设计的动画比ios系统动画更漂亮。
(如果有已经占据市场的竞品,应该比竞品更漂亮)

4、动画的一致性原则

1)避免和ios系统的动画表意相冲突
2)在按类型定义动画之后,以后对应的地方要贯彻动画的一致性。

例:[下图]显示技能名称的形式这里就很一致。(注意:不同技能效果肯定越有差别越好,这里是技能名称显示的动画方式一致。)
20131023_donghua_yizhixing

5、避免过多的沟通和反馈

20131023_daohang_guoduogoutong
过多无意义的动画会阻碍游戏的“流”,影响游戏性,使用户不胜其扰。

例:图中小熊的动画负面影响了主要内容的阅读,还好这里的动画幅度很小。
.
.
.
.
.
.
.
.
.
.
.

05 交互方式

手机游戏用户体验基础之:05 交互方式。本篇文档主要介绍ios系统的基本交互方式,并阐述ios上的交互放在手机游戏上的应用。

1、ios7标准手势
(图片动画来自苹果ios设计指南)

ios7shoushi_dian
,点击屏幕或指定元素。是最常用、最简单的操作;
常用于:
1)触发事件的基础性操作
2)选中
.

 ios7shoushi_tuodong
拖动
,按住要移动的元素,从一个位置移动到另一个位置。
常用于:
1)滚动
2)平移
3)把元素移动到固定位置。

ios7shoushi_huadong
滑动
,按住屏幕快速滑动。
常用于:
1)快速滚动
2)快速平移。
.

ios7shoushi_qingsao
轻扫
,用一个手指按在屏幕上轻轻移动。
常用于:
1)上一屏/下一屏的内容切换
2)显示隐藏的/拆分的视图
3)列表中显示删除按钮

ios7shoushi_shuangji
双击
,连续点击两下。
常用于:
1)以点击位置为中心,放大内容或图片。(如果已经放到最大则是缩小)
.
.

ios7shoushi_nie
,两个手指按住两个点,捏近或捏开。
常用于:
1)捏近时缩小,捏开时放大。
.
.

ios7shoushi_an
按住
,一个手指按住某个点不放。
常用于:
1)编辑或选择文本
2)在大视图中标记一个位置
.

ios7shoushi_yao
,抓住手机摇晃。
常用于:
1)撤销或重做动作
2)有些游戏用于背包的整理
.

 2、手势运用要点

20131023_daohang_shoushiyaodian
1)避免用标准手势定义一个其他行为。
2)避免自创新的手势来替代标准手势,或者学习需要很高的成本。
3)复杂的手势可以作为快捷键使用,单不能作为唯一的一个方式。
4)游戏中在创新手势时,考虑便捷性和游戏性。(一般不推荐创造新手势)
.
.

 3、交互式元素有可触摸感

1)定义一个的颜色,暗示用户这个颜色是互动用的。养成用户一看到这个颜色的元素就认为是可触摸的。
2)一个界面只有一种(或一个)最突出的操作。

例:PokoPang 定义红色为可操作主要颜色。界面中只有 START为最突出的操作。
20131023_daohang_chumogan

4、 更容易的输入信息

1)很容易的让用户去选择,而不是输入。
2)适当的从ios获得用户信息。比如利用用户的通讯录、照片、手机号码等。例如:不少游戏利用用户手机号码快速登录。
3)如果必须输入,分布多步进行,而不是一次性输入,这样用户会感觉有进展,而不是停滞。

例:日期的输入方式,可以通过上下滑动选择。
20131023_daohang_bimianshuru

多步输入反例:

20131023_daohang_shurufanli

多步输入正例:

20131023_daohang_shuruzhengli

如果必须输入,分布多步进行,而不是一次性输入,这样用户会感觉有进展,而不是停滞,操作也会更流畅。

5、避免反馈免疫

1)最好把反馈整合到界面中,使得反馈不会打断当前游戏。
2)避免不必要的提示,没用的提示多了用户很快就学会忽略各种提示。

例:尽量避免使用确认框,使用多了用户就不会再阅读提示内容了。
20131023_daohang_fankuimianyi

6、避免UI元素的不一致性

1)定义一个可操作的主色,并且保持在任何界面一致。
2)所有元素的样式,如果重复出现,保持样式一致。(尽量避免额外定义,不但造成认知问题,还会造成资源浪费和冗余)

例:[下图]界面中的互动元素的颜色超过4种,显得很杂乱。
20131023_daohang_uiyizhixing

04 模态形式

手机游戏用户体验基础之:04 模态形式。没有足够的理由,请不要使用模态形式;毕竟模式形式打断了游戏的沉浸状态,本篇简述在哪些情况下可以使用模态形式。

模态形式使用要点:

20131023_motai
1)保持操作简单、尺寸尽量小。
2)始终提供一个明显的方式退出。
3)如果是多层模态结构,确保用户理解发生了什么,在什么位置。
4)弹出警告提示时,必须有足够的理解打断用户。
5)是否接收通知,尊重用户的喜好。

 

03 导航

手机游戏用户体验基础之:03 导航。本篇主要介绍常见的3种导航形式,并简述导航使用需要注意的要点。

1、导航形式1:扁平结构

20131022_ios_game_daohang01

2、导航形式2:分级结构

20131022_ios_game_daohang02

3-1、导航形式3:内容或体验驱动(例1)

20131022_ios_game_daohang03_1

3-2、导航形式3:内容或体验驱动(例2)

20131022_ios_game_daohang03_2

4、导航设计要点

20131022_ios_game_daohang04
1)提供一个主页界面,从此出发可以到达所有界面。
2)一个事情尽量只提供一种导航形式,避免因导航形式复杂造成界面结构过于复杂(或导航位置混乱)
3)总是明确下一个目的地。
4)使用一个标签显示一个内容分类。
5)始终提供一个明显的方式来退出模态界面。