浅谈《暗黑黎明》与《太极熊猫》UI与UE的分析对比

>>>  創業先鋒 眾人拾柴火焰高  >>> 簡體     傳統

  今天在和数值讨论《暗黑黎明》和《太极熊猫》UI设计时,发现他对UI非常不感冒,觉得这2款产品属不同风格,UI设计都该是现在这样,不分伯仲。而我个人对这2款产品的感觉很强烈,想分享下《暗黑黎明》的UIUE,感觉很值得我们学习。


   在通过玩了这2款游戏的时候,明显感觉UIUE如果花了心思,给新手造成的困扰和麻烦就少。新手在完成我们设置的引导任务以后会很快忘记一些操作过的步骤,他们是通过重复点击UI加深强化印象。如果UI布局混乱,新手弄懂游戏的时间就长,重要性很值得思虑。


  视觉设计:


  Jeff Johnson提出过一些例子,给大家参考。UI设计师的工作应该包括:


  • 在一个程序中,将命令的数量从数百个减少到48个。

  • 将菜单层次从23个减少到11个。

  • 将完成一个任务的鼠标动作减少一半。

  • 整合菜单中的命令,将不一致的动词变为通用的短语。

  • 重写用专业术语表达的提示信息,使其变成简练的、和任务相关的通俗语言。


  下图是《暗黑黎明》界面:



  整个界面,UI比较少,点开图标没有出现二级菜单。每个功能图标,带有多重玩法。


  右下角图标9个,常用的图标7个:


  • 技能:人物属性、技能调整、职业技能

  • 联盟:好友、神殿、阵营、家族

  • 佣兵:装备图鉴、契约兑换、我的佣兵、佣兵酒馆

  • 锻造:镶嵌、冲星、解封、精炼

  • 背包:点开背包,左边显示人物界面,右面显示背包。

  • 副本:组队、精英、单人

  • 活动:竞技、晚餐、世界BOSS、商城、赏金、邪龙历练、天使祈福、首位女神、扫荡卷领取。

  • 其中锻造、技能、联盟、佣兵的分类功能,都出现在右边,也很符合人们用右手点击的习惯。


  核心玩法佣兵和精炼,佣兵大家不熟悉不做介绍,可以看看精炼界面,玩法类似我们的强化(精炼等级=玩家等级)用的非常多,下图能够看到唯一的按钮就是精炼,玩家只需要点击精炼就可以,引导非常简单。红色的小点,用来提示可精炼的装备,滑动选择目标。



  镶嵌,界面同样只有一个按钮“镶嵌”。当装备可以镶嵌的时候,镶嵌2字就会出现红点。选择红点装备,第二排出现该装备当前镶嵌情况,点击+ 好,选择宝石,点击镶嵌完成。



  《暗黑黎明》UI经过了精细的设计和布局,不懂游戏的美术无法完成这样的工作。UI设计是策划提前做好准备工作,将各个功能进行协调简化,放置一处。每一个图标,都包含多项近似的功能,非常合理。


  比如:人物界面,与背包界面放置在一起,点开背包就能看到人物装备,很方便,不需要单独设计一个UI。


  比如:好友、家族、阵营界面,大部分游戏都喜欢单独拿出来,凸显他的重要性。《暗黑黎明》将他们放置一处,感觉很实用。原因很简单,社交玩法初期的时候,玩家不会太常用,第一天玩家会忙着升级,等到了卡机阶段,玩家开始注重,在这个时候引导他们习惯点击各个图标,能够通过接触熟悉联盟里面包含了好友、家族、阵营三个功能。时间大概1-3天,能够完全熟知。


  活动图标的设计,非常符合手游的特点,里面聚集了很多小玩法,只需要点击对应任务就能自动走到NPC处参与对应的任务。有效的减少了图标数量,同时界面可以领取活跃奖励,又少了一个图标。



  《太极熊猫》的图标做法比较普遍,每一项新功能就增加一个图标。所以造成了1级图标和2级图标,加起来24个。没有很好的对各种功能做布局。



  图标多了,新手会对每一项图标的点击次数会分散,每一项功能的熟悉花的时间更长。图标多了,玩家想找到游戏的核心玩法也不是一件容易的事情。


  总结:


  《太极熊猫》和《暗黑黎明》从图标的视觉表现上,风格不同,不分好坏。


  然后从用户体验上而言,《暗黑黎明》足以秒杀太极熊猫。


  借用人家的话:UI设计和视觉设计其实是两种不同的行为。从事这两种工作也要求不同的能力。


  视觉设计师擅长的是艺术,形象地表达功能。为产品创建自己的风格,同时配合相关的显示设备和图形合理安排信息,让用户能够轻松愉快地完成功能。


UI设计师擅长分析和理解用户的需求,让信息的架构更加合理。尽可能简化使用难度,同时找出用户使用产品时哪里会遇到问题。虽然现在越来越倾向于由不同背景的人来完成UI设计和测试,但是不管由谁来设计,一个吸引眼球、激情四射、光彩照人、充满灵魂的视觉设计并不等于就是一个易学易用的设计。



GameRes游资网 2015-08-23 08:43:51

[新一篇] 創業后才發現的“五個事實”:自由、自知、孤獨、恐懼和希望

[舊一篇] 什么樣的網絡小說IP有價值?
回頂部
寫評論


評論集


暫無評論。

稱謂:

内容:

驗證:


返回列表