【干货】游戏界面设计 (二)结构设计

频道:游戏专题 日期: 浏览:8

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

关联阅读:游戏界面设计 (一)核心设计

把界面的方向问题考虑清楚之后,我们正式展开界面设计的首要步骤:结构设计,

界面结构含有横向结构,此横向结构是二维平面里信息的区域划分;还含有纵向结构,该纵向结构是多个横向结构的堆叠。横向和纵向结构二者构成了界面的骨架;而各类信息是附着于这个骨架的血肉。

游戏界面设计纵向结构_游戏界面设计横向结构_游戏专题页面设计

一、横向结构

玩家所感知到的关于信息秩序以及逻辑关系,为横向结构,它体现成了一个界面里信息大致的排布位置,涉及两种表现形式,一种是【全屏】形式另一种体现为【弹窗】。

承载更大信息的是全屏,全屏之时表现力以及操作体验皆达至拉满的程度。可全屏会对主界面行遮挡之事,若是连续出现全屏情况便会递增界面认知之负担 。出现弹出窗口的局势,则在更为适宜呈现轻度表现方式、适合那种呈现需要存在连续视觉方面的加以认知再融入快速操作反应的相关必要情况下。不同类型的游戏 在用到全屏或者窗口的配比上情况存在差异,大多数所呈现出来的状态是采取混用的情形。于从事设计界面结构工作时在众多表现形式之中抉择重点的全屏或者窗口往往列为首个步骤 。,

然而,无关采取哪种方式,此结构处于横向上时对应信息类型都能够被划分为三个区域,其一为标题区,其二为页签区,其三为功能区。

1.1标题区

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

对纵向结构来说,将所有别的界面连接起来的中心位置被称作【主界面】,其余界面被视作主界面的子集,甭管去到何种界面均最终能够回来至主界面,这构成界面结构得以存在根基,然而承担与主界面互相联系任务的区块被咱们划分为标题区 。

标题区有着主要功能,分别有告诉玩家所在位置,概括当前界面的内容,切换当下界面的层级,查看或者执行现在这个界面的公共任务,对应着三大组件,即为标题文字、层级切换与公共行为。

1.1.1标题文字

横向结构涉及整个界面的概括内容,这等同于 0 级页签,纵向结构是关于所处位置展开阐述的表达,多数的界面标题分布定在了标题区或者其中间部位,还有相当小部分的对提示内容有要求信息匮乏不够的单纯的功能简便具备相应特征的界面,其标题位置可以设置在功能区 。

1.1.2层级切换

关于部件部分是涉及至纵向阶级阶层之操作管理情况了,此乃面向标题区域范畴最为关键重要突出关键之主体最为关键之功能啦具体而言最为主要意义颇为重大之分类涵盖有第一个分类是【关闭】选项 ,第二个分类是【返回】选项范畴 ,第三个所涉及到的分类呈现为【跳转】这一个领域情况呀。

(1)关闭与返回

在这三种组件里面,绝大部分游戏标题区域仅仅使用关闭或者退回去的操作,就能够满足标题地区的基础性要求,这两种操作结合混合使用的情况也是较为常见的,然而全都采用这两种操作的情况极为鲜见。

运用【返回】作用的界面,玩家于认知方面甚是明晰,子功能返往系统界面,最终返向主界面,这非常契合层级之间内在关系的解说,加之返程界面绝大多数是全屏,信息得以铺展的空间宏大,这落成了占据主导地位游戏通常采用的处理办法,。(处于这一张图片贴近观者左侧的部位存有此种境况呈现出来)

游戏界面设计纵向结构_游戏界面设计横向结构_游戏专题页面设计

但返回体系时那个界面呀,属于全屏互切情形,要是层级数量变多了之后呢,这就给玩家呀,形成一项对记忆前后界面的挑战啦。

为达成层级认知的便利,【关闭】体系得以构建——使子功能以窗口的样式呈现,系统界面依旧留存全屏的样式,二者的返回途径均转换为右上角的闭合。(上图右侧)

关闭具备 “终止” 的那种意味,如此这般去操作,不仅在同样程度上契合界面逻辑这种情况,并且玩家可透过子功能以及遮罩得以见到系统界面的诸多信息,对于此种状况也促使玩家构建起清晰的层级认知 。

(这里a的语义不太明确,我按照自己理解对内容进行了补充性改写,你可以根据实际需求调整 。) 的标点符号、字母、数字和中文表述形式,除了标点符号和一些惯用的英文缩写词以外,均全部使用中文表述形式来代替!

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

(b)窗口所呈现的界面信息存在局限,这对于展示而言是不利的。(c)当有两个或者超过两个带有关闭功能的全屏界面相互叠加起来的时候,相较于带有返回功能的全屏界面,其逻辑性显得更为薄弱,在理解方面会产生一定的违和感觉。

现在依旧还存在着一部分游戏,会将【关闭】以及【主界面】,还有【返回】一同放在标题区域之内,借由来达成便捷化的界面体验。然而作为界面而言,“可实现同样的目的且提供给玩家两种不一样的方法”也是难免会进一步增加玩家用于思考两者选项后做出抉择的时间数额啦。当然喽还能够去依照项目实际所需要的方向或者内容,从而进行具有选择性的使用是完全可以的哟。

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

《永远的七日之都》标题区中,左上角为返回,右上角为关闭

(2)跳转

跳转界面功能在互联网产品中比较常见,比如面包屑导航。

面包屑虽说看上去清晰且便利爱游戏app官方入口最新版本爱游戏app入口官网首页,然而对于游乐产品来讲,在设计时其单个系统纵向层级相对较少,并且玩家也不存在需要去记忆前后界面之间关联的情况,所以这么做就是不被推荐的 。

游戏产品系统数量繁杂众多,为节省时间不通过主界面进行相互跳转,这是实实在在的需求。相较于返回主界面与回到主界面同时出现,跳转按钮尽管既增添了界面具有的冗余度,然而在功能方面却比仅仅只是回到主界面更强。

要是游戏里面层级数目过于繁多,那份推荐便是提示可以试着去借助快捷方式来跳转到别样系统,事实上当下这样也已然算是更多游戏普遍配置,相关案例展示如下:

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

《明日方舟》界面跳转

(3)关闭/返回与确定/取消的区别

非所有界面皆具标题区,如结果类提示界面(似强化成功等情状),标题文字、对界面层级之控制皆置于功能区。且功能区所引发的界面层级切换行为,与标题区之情形略有差别。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

系统里面的子功能,它的尽头呀,就是两种情况,要么是那种独立存在呢但和系统方面的联系较薄弱的附属子相关的功能,要么就是和系统关系并不最为靠近,会跳转到系统外部去所涉及的功能。附属功能呢,它因为在功能上同整个系统真正的主要部分,也就是主干,在联系程度上稍微有那么一点距离。而外部功能它自身啊,根本上就不属于系统的主干部分。既然它有返回系统这样的情况,用返回这个行为的话,从合适性角度来讲会显得不是那么恰当。所以呢,对于这两种功能,也就是这这两种子功能的那种情况里涉及的功能,使用关闭作为操作方式会让人们感觉更方便、更合适一些。

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

但是这二者的界面并非功能尽头,另有结果提示页面与决策提示窗口,它们在系统层级关系里是最靠外的 。这类提示的界面显示要玩家对其内容作出反映之后,也就是玩家对游戏自主决策后才确定 。玩家点击右上角关闭,实际意思是对当前内容忽略,等于拒绝作出反应,这和提示界面设立目标相冲突 。所以这类界面关闭,其显示优先级低于点击任意位置关闭的取消或确定。

假若把取消以及关闭放置到一块儿,要么是应用于并非重要内容的确认方面,目的是给玩家们提供便捷的操作办法,通常轻点窗口之外的位置也能够将窗口予以关闭;要么是让取消和关闭这两者在意义层面全方位趋于等同之处,并且能够使玩家们知晓这样的一种状况。

1.1.3公共行为

同样存在着需求以及行为,某些将整体进行了覆盖,此等也适配放置至标题区域,若比如资源状况,有全局搜索,另外还有全局筛选包括游戏说明等。涵盖范围延展以至于整个界面的全局类行为,是适合放置于标题区域的 。

不过资源货币这般常用功能源于外部,那是便捷的小功能呀,鉴于它的存在能够省去繁杂的资源兑换操作故而被玩家接纳,依照此思路来说呢,实际上那外力系统的提示或者功能均有安置在此标题栏的潜力。

1.2页签区

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

页签实质是将界面树状从属结构做展现,于表现方面看,页签进行切换之时会使某个面板的状态发生改变。针对策划来讲,梳理页签乃是一回对功能呈现予以重新整理的契机,其导致的效果会直接对玩家针对系统结构的认知产生影响。

页签所处的位置,鉴于页签以及附属界面具超强关联性,要求放置在会发生改变的页面附近,人的视觉线规律呈现为源起左上倾向右下运动状。所以,属于页签的受高度认可并值得重点展示的位置处在左右两边以及上方。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

页签的极端情况举例

从图能够知道,从属结构的界面必然会自然而然地形成不同等级别的页签,除去最高界面层级那部分的标题区,次级的页签能够对别的界面和页签的显示作出改变,我们把这类页签称作“一级页签”,依照同样的道理依次类推可以得到二级、三级以及更多层级的页签。

1.2.1侧边页签

对于该系统,除了标题之外,那些对概念以及功能存在很大区分的内容,会使用侧边页签来进行区分,而这样的侧边页签同样也是可以称作一级页签的。

在页签区范围来讲,侧边页签的那样堪称黄金般宝贵重要的位置是处在与页签之区域相关的左右两侧的地方哟,特别是呢当中左侧占据更为居多明显显著突出的状况的呀,不但不仅只是具备携带方便快捷能够轻易快速地实施点击的便利之为,而且愈发越发还能更加契合符合人体自然而然本身固有的本身天然形成的视觉方面的规律情形喽(还有注意喔要是针对纵向这种屏幕规格样式的游戏的话呢,那肯定是以其顶部部分以及底部部分作为黄金位置所在哒) 。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

《黑潮之上》区分功能的一级页签在左侧,主流的做法

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

《和平精英》一级页签为右侧,整体界面思路从右到左

1.2.2垂直页签

区别于功能各异的其他设计样式功能的特点,展示内容差异不算过大的设置内容概念区分区别度不显著之间的差异,在移动智能手机以垂直页面屏幕左右横向宽幅的摆放位置模式方向上可以采用垂直方向的页签系统,这样一种功能样式的页签通常多见于信息结构框架组织部分之下的层级中的下一层级的二级页签,其在显示区域的占据位置范围为页面的标题区域范围之下的地方,以及页签所占区域内容顶部最向上的地方或底部最向下的地方,在智能手机开启水平翻转摆放下其横向距离较长范围内,于对类别数值参数较多,还需要经常有对信息内容进行切换更换状态的系统所拥有的结构状态呈现形式的显示情景中显示模式进行这样信息展示更加特别适宜恰当。

关于部分界面,像是窗口形式的独立商城界面以及活动类界面,鉴于分类概念相似,也就是它们都是 XX 商城或者是 XX 活动,并且分类的数量不少,所以使用垂直页签当作一级页签是更为适宜的。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

底部页签情形较局限,虽说操作舒适,对界面美观有益,然而底部位置属于阅读末尾之处,通常来讲放置操作类按钮较好,它作为页签在概念方面能被接受但并非十分被推荐。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

1.2.3筛选框与折叠页签

设置三级以及比三级更高层级页签之时,要特别慎重对待,界面之中页签数量越多,那就表明从属结构越发复杂,这是不利于进行阅读理解以及内容展示的,界面对应的页签数量应当尽量设法控制在三级范围之内。

就是为了能够减小页签的等级层次方面的情况,除了针对内容进行调整操作之外,其实还有页签收纳这种方式,以及折叠页签这另外的一种方式 。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

《一人之下》的旧版商城,其向左的折叠地方有显示签名类型,点击它以后会跳出拉动下面第二个级别的另一个个页签收放内容爱游戏最新官网登录入口,看上去给节约下空间啦了,只可惜反复频繁的做屏幕滑动与这些页签收开放下等,这些行为方式将会大大影响实际操作能有着舒适感觉呢。句号

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

若采用像《王牌战士》那样,点击之后弹出位于右侧的二级页签这种方式来进行操作,会更具便捷性,不过却会遮挡住一部分的显示。 ,

若存在三级或高于三级的页签,且选项数量繁杂,要是其具备可以探寻的分类规律,那就能够纳入筛选框之中,点击之后会弹出下拉框开展选择。此类形式对界面进行简洁显示有益处然则操作显得繁杂。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

1.3功能区

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

功能区为发生实际系统交互之所。这般界面较标题区以及页签区而言规则感更欠缺,能够更为自由地去安排系统信息。然而自由并不意味着是混乱,对于功能区的信息依旧能够予以合理规划,从而达成最佳呈现效果。

我把功能区信息进行了划分,划分为四大类,这四大类分别是,信息原件,再就是执行元件,还有装饰元件,另外是混合元件。

1.3.1信息元件

系统规则展示里存在着一个核心,那是信息元件,它是那个界面最为重要的展示主体,并会为玩家呈现决策依据,这些信息元件呈现面貌多种多样,文字、图片、复合等都无不在内 其视觉层级高度高视觉,面积巨大如同天地间旷野

有不同的展示主体存在于不同系统,角色系统的主体是角色列表或者角色详情,所谓福利界面的主体是奖励道具等,这是依据系统需求来确定的。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

《猎手之王》活动界面,有信息元件,其为活跃度奖励,还有任务,这些占据了右侧绝大多数版面。

1.3.2执行元件

(1)按逻辑划分

玩家可针对之做出反应的一部分即为执行元件,常见存在按钮,还有这选中框,另一滑动区域和诸多可交互部分等可,其位置一般放置于信息元件之下或者放在信息元件之右侧,致使玩家阅读完了信息之后进而再作出反应。

执行元件可以按照逻辑分类为:

执行;切换 ;选中 ;跳转 (内部/外部) 等。

这些逻辑,基本都存在对应的特殊符号。在界面信息数量不多的状况下,并且按钮文字带有阅读压力,这种情形时,于按钮上面的文字之前增添符号,是个较为不错的选择。

但要是按钮表示的涵义相对简单平常,鉴于界面整洁的思虑来衡量,仅展现文字同样是主流的选用趋向。历经进一步简化学的头脑下,于辅助用途占据偏重重要部分通常程度的能力导入口范围,所存在的代表按钮也能够是只顾去显露出代表意义的符号状态形态行为体现展现呈现表达陈述诉说描绘刻画。

(2)按重要度划分

执行元件,于界面的当中,所处地位有所差异,引致视觉强烈程度呈现为不同,当其作为通用类元件之时,务必要跟UI敲定好规范,。

在一级决策类按钮方面,其通常是关乎游戏核心相关系统的执行的,这种相关的按钮呢,其需要做到的是尽可能地达成显眼这一要求,比如说要做成大尺寸的样子咯,并且在颜色方面要和背景色相对开来,另外呢也需要特效辅助等手段来提升显眼程度 。

那有一类二级的辅助决策类按钮,是辅佐实现主要决策之际所用之按钮,跟一级按钮较量视觉而言,它更显弱化倾向。然而啦,其样式通常关联上一级按钮比如说好比跳跃转变之类,还有领取,二级确认弹窗之中那个分确定与给够取消等状况。此场景下,按钮的风格与一级按钮有着紧密联系,在特定层级中发挥明确但相对有限的作用,以辅助主要按钮完成整套动作,达成决策过程某些细分层面的互动与确认,比如响应信息跳转,分配获取实体或数据之操作动作并且针对窗口消息进行确认或否决的行为。

界面上,三级附属类按钮有适用之处,其用于非常用功能,用于附属功能,用于便捷功能,像详情tips,像选择数量按钮,有提示面板按钮的情况,还有一键勾选框这类 。

1.3.3装饰元件

装饰元件见于角色立绘,亦常见于 UI 底纹,更存在于 UI 特效以及场景原画等。它以静态来呈现或者是采用动态予以展现。尽管它重要程度并非那么足够突出,但其本身也是能够去承载一部分信息成分的。并且其具图形化状况下有着丰富色彩的装饰相关信息,会使得大脑注意力被快速吸引过来。所以装饰元件主要是具有以下这些作用:

(1)毗邻于信息元件,帮助玩家快速注意到关键信息。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

《猎手之王》的培养界面里,当前等级的相关信息,是用红色的旗帜去进行装饰的,其置身在呈现灰色色调的界面当中,显得格外突出 。

(2)强化界面预设的情绪。

胜利/失败等结果界面最为典型,分别提供积极/偏消极情绪。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

界面有福利和付费类型的,也常常会出现,对付费行为进行操作时,会针对这一行为进行调整,让玩家能对付费行为充满正面性的好感看法观念,并且他们把方式更换为在更倾向选择中的塑造强度达到超高明显的角色展示来完成对奖励感以及引导的行为塑造。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

(3)增强界面美观度。

装饰元件基本的作用,在合理范围内往界面填充装饰物,

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

《DNF手游》的UI底板,填充着处于流动状态之中的特效背景,以此使得界面维持简单且朴素的状态,与此同时防止出现死板又缺乏趣味性以及特色的状况。

(4)帮助塑造情境化界面,或加强展现游戏世界观。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

《和平精英》,其物品奖励,背景图和游戏信息被包装成情况各不相同及特点、性质多样的复杂作战任务,以增强那样真实投身进入其中的感觉呢。,

要留意,装饰元件的呈现方式存在区别(像立绘呀,场景这类),而这却不能简单地就等于装饰元件本身 。要是有哪一个图标呀,或者立绘之类的,在界面里当作某个主体的视觉呈现给展现出来之时,它属于信息元件,可不是装饰元件 。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

这类案例,在充值界面中,尤为常见,当展示的主体,一般和,信息元件,没有过于直接的联系时,才能够叫做装饰元件,需要注意区分。

1.3.4混合元件

把以上三种元件加以组合以后得到的元件之中,拥有一种叫混合元件的家伙 ,那种元素是针对有效进行压缩了界面信息量的一种方式 进行表述而言出来滴,那 其中提及与描述这个信息压缩方式就是它们是这类所谓的有混合元件的家伙滴行事、运行之类的方式及作用啦 关于这类混合了三种元件的家伙往往呢 采取的是闭合的一种视觉印象 把拥有不同作用的元件给结合到一起时所呈现出来的结果 。

(1)信息+执行

届满标题+返回按钮

信息栏+跳转按钮

(2)信息+装饰

将关键信息予以美化包装,以此来方便凸显关键信息,在下图所举示例榜单里排列在前三位的信息之中增添了装饰加工。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

(3)执行+装饰

这种太常见了,各种特色或拟物的按钮。

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

《炉石传说》的,界面的按钮为,竟然和背景巧妙自然地融为一体啦,就,如同,在一个盒子里头,进行那种,玩桌游的模式一般哦 。

二、纵向结构

纵向结构呈现的是不同界面层级叠放一处的状态 , 对于堆叠起来的各个界面层级此番我们必须做恰当的规划,其存在主要具备两个目的:其一为由之避免各个界面引致遮挡碰撞现 , 像譬如当提示层级恰巧覆盖主界面此种会致使引导行 ;另一是要确保能使玩家清晰领悟界面其结构并塑造出快捷便利的界面的使用体验 。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

我个人认为合理的叠加层级示范如下:

主界面 → 普通游戏功能界面(可叠加)→ 引导层

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

存在分层情况在普通功能界面内部,是这样的层级走向,先呈UI背景底板,而后进入3D模型部分情况之下进展到普通UI元件,朝着推进方向随后接上UI特效 。

→ 具有主动弹出特性的功能呈现界面 → 处于浮动状态的信息层面区域 → 面向全盘的用以通知或展示的弹窗层级结构 。

具有主动弹出式特点的功能界面,能够于纵向结构里进行插队操作,可直接呈现于最顶层位置。部分游戏当中或许存在此类功能,例如签到功能,提醒提示功能以及强制性显示的运营活动类功能等皆归属此列,然而就整体层级体验予以考量之时,其表现得有些糟糕差劲,此类功能通常情况下 需要玩家以手动方式加以关闭,并且放置之时需将其置于引导环节之上,以此避免让引导内容遇到卡住的状况问题 。

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

存在着信息如获得信息浮动框、成就提示窗等这般能够具备进行展开隐藏能力进而能够实行出现显现有如提示消息所构成这样一类内容以显示之,这类就由这种提示消息以浮动的状态而当作展示了,其基本特性表现往往为在交互方面通常情形下不具备可进行交互的特点,在于时间方面需历经几秒就会发生自然让那些已经显示存在消失结果自然就以消除此情况了,不过此种情况在显示这样一个环节呈现高度这种地位优势情况,则能产生一种将各个功能界面进行覆盖遮挡在这样一种结果。

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

关于游戏整体运行状态予以体现的全局性提示或者弹窗,其于顶层显示,大多需加遮罩以作聚集便利,此类一是游戏性能/退出弹窗,二是网络状况/游戏报错提示 。

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

三、结构优化

归纳来说,先前所述内容指出,游戏界面结构包含横向和纵向这两大类情形,在横向架构里面,采取的是分区手段,把信息相应的定位以有秩序的方式大体显示布置于同一界面范围之处,纵向架构方面,则是会把多个所属种类为横向样式的界面凭借既定顺序接连罗列排列整合予以编排于一处 。

在开展规划界面结构这项工作时,要历经全屏或者窗口的那种抉择,还要面临返回或者封闭体系的那种选择,通用页签区以及功能区的位置同样需要去规划等。确定有了界面结构的通用规则以后,能对信息的一致规范化表示营造良好有利于意义条件,从而使用户降低认知困难的程度,用户接触学习知识的成本亦能得以下降,获得益处。

但是仅仅只是规划了结构这一行为仍远远不足够,倘若想要使得前来游玩的玩家们感受到界面结构是具备良好使用体验的,那么不外乎就是需要对两点进行优化处理:一是要看清究竟界面呈现出怎样的状态,二是要努力减少层级而避免繁复。

3.1看清横向界面

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

玩家于界面中停留,会先有认知,而后产生行为,要确保界面清晰易懂,这为首要目的,假若不然,若无可耐之玩性将会疾速离去流失并且不会存在以界面而论之些许作为。所以啊我认定这可以清晰展现的界面构造对比之便易操作略微具有重要性。

3.1.1平面策略(色调/拟物/页签规则)

玩家一旦进入界面,就会按习惯去寻觅视觉焦点与父子关连,借以察觉界面架构,而后裁定阅读先后顺序,恰巧平面设计之中不少的美术技法能够辅助玩家领会上述内容。

(1)区域色调

玩家对层级的判断会受界面颜色饱和度以及灰度的影响,一般来讲,在自然世界里,基于光线作用,灰度偏向白色能够用来表示“更近”的物体,而愈黑的地方离玩家“越远”,所以,偏向白色的部分越利于表示更深层级的界面,而且还能够用以表示视觉层面更加重要的区域 。

因此想要表示界面上父子层级包含关系,可用色块帮助玩家理解。

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

左图呈现的是信息经拼凑却未处理之后得到的结果,其整体状态非常平,从中无法看出进度条同培养之间存在的关系。右图是在对齐的基础之上,运用深色以及浅色的色块来区分视觉层级有着先后之分的关系,让玩家更易于理解进度条为下面三个培养的统计加和所致。倘若二者运用的是同一种色相而不同的灰阶,分开的效果才会更佳 。

左图是信息拼凑未处理的结果,整体很平,看不出进度条与培养的关系。右图在对齐基础上用深色浅色色块区分视觉层级先后关系,玩家更容易懂进度条是下面三个培养的统计之和。如果二者用的是同色相不同灰阶,区分效果会更好

比如一个例子,这样的色调用法,同样可以被运用朝着标题区域以及页签区域这个地方,有益于玩家借此非常轻松容易清楚搞透去得知认识晓畅明白界面的整体结构情况。

游戏界面设计纵向结构_游戏界面设计横向结构_游戏专题页面设计

在《黑潮之上》里头,通用弹窗呢,标题区域用的是那种同样的深色系列之色块,再说那一级页签区域亦是用着那种深色系列的色块,而功能区域用的乃是白色方块,并且呀,还在原有的基础上做得更好地把标题页签区的一部分给稍微缩小了些,从而塑造出呈现出一种堆叠这样一种关系,如此这般既能凸显出内容,而且还能保证解释结构不耽误不影响,这显然是归属于非常出色优秀优异绝佳的结构优化设计呀。

(2)模拟实物

企图展现界面语序,除去抽象方式,实体相互的堆叠态势,例如书页、页签、地图这般的关系能天然使玩家明晰层级关系,于第五章展示设计之际能够予以思量。

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

另外,游戏里将现实中现存的事物开展运用充当包装形式,多数情况下它以很多不同事例展现过程中将相应教学成本降低为绝对意义上的零,实现了界面于教学方面没有成本添加等情况,其中最为熟悉常见最为普遍典型典型地出现在手机界面的这个事物包装方面,玩家对于手机界面的使用方式方法是尤为特别非常熟悉的。

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

游戏界面设计横向结构_游戏界面设计纵向结构_游戏专题页面设计

(3)页签摆放规则

当多个页签放置在一起的时候,要是不加以区分的话,就会影响玩家对于层级的判断,为了把同一个界面之中谁是一级页是谁是二本页签区分开来,一般存在两种处理的方法,一种用来说的就是像图片标注显示的情景条件,可以让一二级页签各自占有独立并且互不影响、不同的展现位置,一个放在页面侧边,另一个去放在处于页面的上下两端处展现情况,可以使读者用户易于去知道明白左侧位置放置的应为一级使用标识页,位于上层位置安排着二级用的识别项。

游戏界面设计纵向结构_游戏界面设计横向结构_游戏专题页面设计

要是期盼一二级书签放置于同一侧时不叫用户弄不清,那么一般采用以特定元素区分方式的解决办法予以达成该诉求譬如通过展现形态、赋予颜色特征,或突出特定尺寸进行效果显见分晓使得观者明了之意减少玩家为此陷入判断偏差的可能,比如目前所给出的此项视觉表现内容的图里使用多形式关联构成样式其中含有以文字的多样诠释形态伴随特别赋予区分属性的图标呈现状况产生对于划分分类以做表明归属目的时显著实现认知清晰便利实现理解直观的效用这效果被观察衡量评估断定结果结论为展现优质可观可不费神费脑便分辨理解可谓相当具备成效值得推许值得应用值得借鉴值得继续沿用。

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

3.1.2界面动效

和美术稍微存在差异 ,策划目光里的动效 ,对于引领玩家目光的走向 ,给予玩家助力去明白界面结构 ,有着更大的推动作用 ,而美观以及衔接 ,是隶属于连带性质的 。

存在具体的应用方法,诸如渐隐、滑动、弹跳、面积放缩等情况,较之于这些,动效师会有的经验更多一点儿。身为策划而言只打算表示,有关动效的顺序,通常一般系按照界面结构顺序来操作践行的,先是会出现那般的内容主体或父层级物体或者页签,之后才会出现子层级物体与其它附属区域这般状态的等等,一般玩家只要加以留意大都能够知晓界面结构究竟会展现彰显变作怎样的形态样子。动效的顺序相对来看显得具备较之大一些的那种自由特性属性性质,也能够先把那一类别体现凸显呈现出无关乎关键性重要紧急次要大小的地方构成部件部分部位片段组件区域,最后才去展现揭示呈现出需要重点加以予以额外专注留意关注的主体形态式样样子主要内容核心成分因素要素部分部件细节关键点点。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

《忘川风华录》副本界面首先展示的是页签和附属功能

游戏界面设计纵向结构_游戏专题页面设计_游戏界面设计横向结构

一段时间之后,内容主体的一个附属备份进入的通道,以及有关章节的称呼,会如同呈现出一个空间方位造型样子可以站立得稳当并突起来的硬纸板那般,树立起来 。

重点表现所在地区域,势必要动用和倚靠动效以及各种不同类型特效,将其一并予以凸显与着重阐述,若能与声效相互契合搭配,那呈现效果将会更出色。并且,要于时间把控方面严格遵循标准要求,绝对杜绝玩家出现等待超出合理范围时间过长之类的情况发生。

3.1.3牵引界面

把一个主体物跟界面实行绑定,切换界面之际主体物的视角会改变,主体物的形态也会改变,利用主体物的这种变化以供玩家记忆界面内容,发挥类似页签指示器的作用,含有这种方式的界面被称作牵引界面。

牵引界面,最常用的方式,就是和人物部位相连,像装备部位的不同强化等等,比起普通页签效果要直观得多,并且有助于游戏世界观设定的代入。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

《崩三》选角界面中点击不同养成面板会伴随角色摄像机视角移动

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

除外在视线切换行为发生之外,角色自身存有的形体状态也将会出现产生变化,圣痕所具有特征明晰显著烙印于留存表现角色忧伤情状相关之处,并且与位于从属位置右侧方向涉及信息构建起了相连接洽状态 。

这里要举一个反例,要是仅仅是随角色视角进行切换,然而形态并没有发生改变,那么牵引的作用就会大幅减弱。 ,

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

《战双帕弥什》培养界面里,角色只是进行视角切换,不存在额外动作,也没有其他物体产生辅助效果,牵引界面最具精髓性的地方没能得以发挥出来——

3.2减少纵向层级

对玩家而言 ,让其记性纵向结构 是极为困难的 ,除掉上文叙述的 “金字塔原则 ” 能让玩家瞧见更低层面的界面是啥之外的情况 ,所残留要着手干的就是在实际层面或者在感知层面尽可能缩减层级 。

3.2.1父子层级界面

处理子界面显示于父界面时运用得方法,会被称作父子层级界面,其呈现状况在于,既不弹出全新界面(窗口子界面或者对父界面起到覆盖作用的全屏子界面),而是将父界面某区域的显示予以改变。

游戏专题页面设计_游戏界面设计纵向结构_游戏界面设计横向结构

《一人之下》伙伴列表中每个卡片槽都是子界面的入口

游戏专题页面设计_游戏界面设计横向结构_游戏界面设计纵向结构

能够瞧见子界面将父界面的列表区域给覆盖了,且存在处于左上角的、专门用于返回上一层父界面的按钮,右上角依旧是用于关闭整个界面的按钮 。

在一定程度上,采用这种方法能够让界面层级得以减少,可有效避免有频繁的界面切换情况发生,所以在各类游戏界面里被广泛运用。不过,要留意这类方法同样会致使横向结构的复杂度有所增加,此时需借助动效以及界面效果,进而让玩家认识到这属于一个子界面的范畴。与此同时,还是要对父子层级界面与切换,以及页签之间出现的区别予以关注。

3.2.2抽屉界面

抽屉界面,是将实际上具备父子关系的界面,借助中间物,采用滑动方式来构建联系,如此能使玩家在感受方面维持恰似仅有一个界面的体验。

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

《街霸:对决》的伙伴系统里,父界面会呈现显示列表以及中间角色这二者,玩家点击【提升】,界面会朝向右侧整体发生滑动变化最终到达子界面也就是伙伴培养界面

游戏界面设计纵向结构_游戏界面设计横向结构_游戏专题页面设计

有左右滑动效果与之相配合,中间还有角色存在着这样的设定,在诸多玩家想法以及思索见解里呀,可以被认为那俩各异的的界面乃是处在同一个量级层次那里啦。接着当用手单击去敲点而致行动回返界面这个操作过程得以形成后整个就会进而发生滑动现象向左侧那里更广大众多而父亲类存在的有伴伙伴一列表单方面而去挺进呢:此表单乃是指有着众多个个人所匹配伙伴一同汇集成的集合哦。 :此表单乃是指有着众多个个人所匹配伙伴一同汇(

可以说,此方法实际上并未真正减少界面层级,然而,在玩家的感知层面,鉴于中间物以及动效皆是切实存在着的情形,那样会把有着父子关系的界面视作是处于同一个层级,进而构建起清晰的关于界面的认知,一方面来说,其优点表现在使玩家可以容忍数量更多的界面信息加层级,不利的一面则是依旧没能将不够便捷的操作问题加以解决 。

实际上优化界面还有一些小技巧,囿于篇幅就不展开来讲了。

四、本章知识框架

游戏界面设计横向结构_游戏专题页面设计_游戏界面设计纵向结构

确认了信息大致所处方位,而后规划整个界面架构,接下来可就这些方面细细研讨:信息分类做更细致的划分,梳理信息相互关联及所占据的空间地势,掌握信息适时呈现的时机节点,还要考虑应以怎样的方式处理信息去削减玩家理解花费成本等事项。下一章会着手搭建出一个在功能方面具备可用性的界面。敬请满怀期待。

网友留言(0)

评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。