恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
以微知著看交互-手游物品框
0.0°
2019-09-19 原创文章 经验/观点 举报 849 1 2 0

一些在工作中总结的经验,希望能帮到刚入行没有头绪的同学,如有错误,还望指正~

现居杭州,如有意向可M我

物品框的定义

   物品框是手游中相当重要而又普遍出现的一种控件,它是游戏中人物、材料、武器等拥有多种属性的集合体的承载物,围绕着物品框展开的设计是多方面的,我们需要关注承载信息的优先级、与各界面的兼容性、还有物品之间的影响等,这中间涉及到诸多交互规则的运用以及落地实现。


物品框的常见形式
- 角色
   角色框是物品框中较为重要的类型,角色是游戏养成要素中不可或缺的一环,所以在设计角色框时,我们需要优先展现它的内容物(角色),并且展现符合场合的信息:
   1)获得时:优先展示立绘、稀有度等决定玩家兴奋点的要素
   2)察看时:优先展示分类要素,例如稀有度、星级、类型、等级等,需要让玩家最快了解到角色间的不同
   3)特殊场合:优先展示特殊性,如编队时的占用态、物品类型(槽位等)等,通常出现在玩家拥有明确的需求指向时出现的界面中

- 材料
   材料指的是带有养成要素的物品,可以辅助角色成长或者辅助战斗的一些物品,它们对于自己形象的展示需求不强(类似于阴阳师的魂守),更需要表达自己的作用(星级、等级、类型等)
- 物品
   这里的物品框指的是一般物品(家具、代币、素材等),它们没有等级与星级,可能只有稀有度Image title

物品框底框样式
- 矩形
   最常见的物品框底板,视内容物可以改变长宽比,中规中矩的选择,适合多个排列,信息的承载量一般,多集中于底边与左右上角
- 菱形
   菱形是一种表现较好的形状,但是承载的信息量较少,相较于矩形,它不能在左右上角摆设物品信息,所以多用于物品陈列与角色展示(明日方舟与七日之都)
- 六边形
   较少出现的形状,但是承载的信息量较大,同面积下占用空间少,可以同级展示多个信息;虽然较为少见,但不失为一种另辟蹊径,而且一些想法从开发的嘴里说出来你就莫名觉得可行
- 圆形
   类似于菱形,但是信息承载性稍好,适合做溢出式设计Image title

PS:这里的图形长宽均为100像素,可以看出同尺寸下各形状的表现力均有不同,但是实际运用在开发上的尺寸是占用面积,所以选择适合的形状合理的分配信息非常重要

设计样式
- 溢出式设计
   内部信息可以溢出边框,依托边框可以拓展展示面积,效果也较好
- 模块化设计
   类似于APP的卡片式设计,可以承载大量信息展示,但是无法做单个设计Image title

- 信息的多元化承载
   物品框上的信息是多元化的,根据信息内容我们可以通过图形、数字、文字甚至光效来表达(下图左一二表达同样信息)
   但是我们要注意信息的层级,数字适合于展示如等级这类重要信息,图形可以表示简单只有几种层级的概念,例如角色类型,超出数字与图形表达极限的信息会被玩家排斥,甚至出现无法理解的情况
- 拓展式展示
   类似于阴阳师式神系统中的框体拓展展示,通过框体的变形来提示玩家增多的信息来自何处,不失为解决鸡肋信息的一种方法Image title

设计流程
1)观察场景
   对适用场景的观察,对需求的解析,策划对你说我们要在角色界面放几个角色框,但你直接做一个矩形框,适配上自己游戏的立绘尺寸,然后加上数值。虽然没问题,但是这就够了吗?
   完全参照策划的数值提案,你可能会得到类似于明日方舟的难以理解的角色框Image title

2)适合场景的设计
   我们对物品框的运用场景需要合理分析,一个角色列表,是否需要如此多的信息呢?
   首先角色的识别放在首位,名称+立绘;再接着是筛选的信息是必须存在,例如等级、稀有度、类型等。
   除非拥有和方舟一样的极其优秀的UI,否则不建议把信息全部放在框体上。

3)交互态的设计
   不同的场景需要不同的交互态,对交互态的说明需要详细且有序

   星级:星级存在三种状态,已升星、可升星、不可用(当前情况下不可升星)Image title

   类型:类型在各游戏中的表达都不同,但是基本上都是以角标小图标的形式展现在角色框上Image title

   强化等级:各类游戏的强化等级也不同,如明日方舟的潜能、阴阳师的突破等,有些使用数字,有些使用图标。

   稀有度:各游戏基本相同,使用不同颜色的底框或是不同颜色的字母表示Image title

   角色状态:根据游戏的不同,角色会有锁定状态与提醒态
   锁定态:锁定态/常态
   提醒态:新获得/角色内可操作Image title

   交互态:物品框在游戏界面中应用主要涉及到通用态、选中态和禁用态三类Image title

选中态时通常有这两种情况:
1.通常选中态

当列表中仅能选中一个道具时使用,仅做选中框处理
2.多重选中态
当列表中能同时选中数个道具时使用,在通常选中态的基础上需要做显示选中数量
在开发过程中需要约定好最多选中的数量,当达到多选上限时,所有其他物品框变为禁用态,试图继续选择弹出对应toast“超出上限,不能继续选中材料”等相应提示文本
禁用态时分为两种情况:
1.普通禁用态
在不符合选中条件的情况下,物品框置灰,点击弹出对应场景toast
2.特殊禁用态
在特殊情况下(各游戏情况不同,当该物品出现被占用的情况),框内做文本提示(示例为LOCK),点击出对应toast“该物品正处于LOCK状态”


列表逻辑:Image title

全局规则:
被占用的物品应该置于最后或者不予显示
没有筛选功能的界面不遵循列表逻辑

示例(以阴阳师为例)
替换界面:默认类型-星级-等级,降序
强化界面:默认类型-星级-等级,升序


常见问题
   在游戏开发的过程中,我们时常会遇到以下几种有关物品栏的问题
- 层级不对
   物品框往往需要承载许多信息,受表现形式的影响,有时可能会出现重叠的情况,我们需要按照优先级与表现形式来决定信息层级
- 信息过多
   视物品框承载的信息,一个20*20像素的矩形区域内可能会包含稀有度、等级、名称、icon、熟练度(升阶)、星级等信息,我们需要对他们的表现方式做一定的限定
- 表现欠佳
   物品框的表现不仅仅局限于同一个物品,在游戏开发的过程中,很多地方我们会复用同一物品框,在这一过程中物品框会有同一区域重复出现、放大展示特殊处理的情况出现,此时物品框的表现力就会受到较大的考验Image title

物品框的UI提升
      物品栏的UI可以很大程度上的提升界面的观感,在我的工作经验中,交互与GUI对界面的影响是互补而又相对的,极其完善的功能架构可以优化玩家操作体验,而优秀的UI又可以化腐朽为神奇。在已经挤满内容的空间里,一个设计良好的包装可以使界面完美承载甚至多承载一种信息而不突兀Image title


阴阳师-式神
   阴阳师的式神栏设计非常完善,它承载了等级、锁定状态、觉醒标志、星级、皮肤标志、式神稀有度
   当式神等级达到满级后,等级会变成一个满字,这是一个加分项,既表达了等级已满的意思,又增加了界面的统一性,非常符合养成界面的基调Image title

阴阳师-御魂
   阴阳师的御魂系统中所包含的信息量可谓相当复杂,玩家需要根据御魂位置组合出最高星级、强化等级、御魂类型配对的阵容,而我们可以看到在阴阳师三次迭代后的界面,整体简洁而又高效Image title

更新:2019-09-19

收藏

1人已收藏

年少的镜子

弃我去者,昨日之日不可留。

  • 5

    作品

  • 0

    粉丝

  • 4

    关注

  • 系统后台设计
  • 加载动效练习
  • 学·生 校园APP设计思路展示
  • 【临摹】书中城堡

    猜你喜欢

      2019-09-19 原创文章 经验/观点 举报 849 1 2 0

      以微知著看交互-手游物品框

      0.0°

      你确定要举报以微知著看交互-手游物品框

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年09月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录