如何选择电子宠物屏幕布局:复古 LCD 还是现代混合风?
对于电子宠物界面,当核心体验能够融入一组极简且易于识别的像素场景及少数操作时,请选择复古 LCD 布局。当玩家需要阅读多变的详情、浏览多项活动,或在不同尺寸的屏幕上使用该界面时,请选择现代混合风布局。如果两者兼顾同样重要,可保持宠物场景具有明显的像素灵感风格,同时在其周围的自适应界面中放置清晰易读的状态与控件。决策时,先将最常见的任务映射到屏幕上,然后在支持的最小尺寸下测试该任务。
这两种风格在实际应用中的含义
复古 LCD 布局将显示屏视为一个紧凑的舞台。宠物、少数几个状态符号以及少量的控件共享一个固定的视觉画框。像素艺术、有限的调色板以及对可见信息的刻意克制,营造出鲜明的视觉风格。当核心交互循环很简单时,这种风格非常有效:看到宠物、了解其即时状态、选择一项操作。
现代混合风保留了一部分带框的像素化呈现方式,但为辅助信息提供了更大的空间。宠物依然可以作为视觉焦点,而标签、菜单、设置和次要详情则采用可缩放的文本和常规界面控件。它还可以随着空间的变化重新排列元素。响应式界面通常会重新定位、调整大小或重排内容以适应不同的窗口尺寸,而不是统一放大每个元素(微软响应式设计指南)。
应将“混合风”视为一种设计选择,而不是所有设备或功能都能自动运作的保证。这种布局仍需明确决定哪些内容保持常驻、哪些内容收纳到菜单中,以及在可用空间紧张时的表现形式。
从玩家重复执行的任务入手
将玩家最频繁执行的任务写成一个简短的序列:例如,察觉需求、打开相关操作、执行该操作并确认结果。在显示画框内勾勒出该序列的草图。如果该序列能够在没有微小标签、重叠符号或反复切换菜单的情况下清晰可见,那么复古 LCD 构图可能就足够了。
接下来,列出一目了然即可理解的信息,以及可以留待详情视图展示的信息。宠物的姿态和几个清晰的指示符适合放在主屏幕上;较长的描述、收藏或配置选项则可能更适合放在混合风界面的辅助面板中。这种划分是设计层面的推断,而非绝对规则:正确的归类取决于游戏中的实际活动和词汇表。
请计算有意义的选择数量,而不是装饰性图标的数量。五个各自会打开另一个菜单的图标,可能比三个带有标签的操作带来更多的操作负担。如果玩家必须反复进出嵌套菜单才能完成核心任务,那么在增加更多屏幕装饰之前,应先增加空间或简化任务。
当限制有助于强化体验时,选择复古 LCD
当像素艺术是预期外观的核心、宠物在小尺寸下依然清晰可辨、且常规操作少到可以直接展示或直接触达时,复古布局是非常契合的选择。其受限的舞台可以让宠物及其状态呈现出浑然一体的质感。它还为设计划定了清晰的边界:次要系统若不经过权衡取舍,就无法挤占主场景。
检查关键状态是否无需依赖细微的颜色变化即可区分。除了颜色之外,还要利用辨识度高的形状、姿态、标签或图案。在灰度模式下以及按实际渲染尺寸测试屏幕。在设计画布上放大时看起来很迷人的精灵图(sprite),在实际发布的布局中可能会变成一团模糊的像素点。
如果每增加一个新功能就需要多一个小状态图标或缩写,这种风格就不再适用了。如果玩家需要对照图例才能看懂主屏幕,或者为了给日益膨胀的仪表盘腾出空间而不得不缩小宠物,那么这个紧凑的画框可能就已经不堪重负了。
当信息或屏幕尺寸多变时,选择混合风
当宠物场景需要与易读的状态文本、多种活动选项或详情视图并存时,混合风布局十分实用。它还能更有效地响应不同的窗口尺寸:微软的指南指出,可以在更大的屏幕上将单列界面重排为多列,并在更小的窗口中减少显示的元数据。请有选择性地应用该原则:额外的空间可以展示有用的细节,但不应让宠物与多个同样醒目的面板竞争注意力。
首先定义小屏幕下的排布方式。保留宠物、最重要的状态和主要操作立即可用;将次要信息移入命名清晰的面板或菜单中。对于较宽的屏幕,可展示辅助详情或在场景旁放置列表。保持操作的顺序和名称一致,以免布局的改变让相同的任务感觉像是换了一套系统。
切勿直接将整个复古构图等比放大直到填满大显示屏。这可能会留下尴尬的留白,或使控件之间的距离过远而难以操作。相反,应决定哪些部分应该扩展,哪些部分应保持独立紧凑的场景,以及哪些附加信息能真正带来帮助。Material Design 的布局指南同样将布局描述为可根据输入、设备和屏幕元素进行自适应,并具有响应式的边距、列和区域(理解布局)。
使用快速决策评分表
根据当前设计,对以下每项陈述评估为“是”、“部分符合”或“否”。这是一份实用检查清单,并非经过验证的评分工具。
- 主要的宠物互动任务可以通过一组紧凑的可见选项来完成。
- 在预期的最小显示尺寸下,宠物及其重要状态依然清晰。
- 在核心交互过程中,大部分辅助信息都是可看可不看的。
- 界面需要在不同屏幕尺寸上呈现显著不同数量的信息。
- 玩家需要的标签或描述文字如果放在复古画框内会显得十分拥挤。
- 宠物场景应与菜单及状态详情在视觉上保持明显的区分。
前三项如果大多为“是”,则倾向于优先选择复古布局。如果需要多变的信息或易读的标签项回答为“是”,则倾向于混合风。如果答案参半,可以制作一个混合风原型:设有一个固定的像素艺术宠物窗口,以及一个独立的、更简洁的状态与操作区域。这样既能保留场景特色,又能让辅助界面具备自适应能力。
在最终定稿前制作原型并验证选择
为每个重点方案构建一个具有代表性的屏幕,使用相同的宠物、状态和任务。界面中应包含信息量最大的常规状态,而不仅仅是最整洁的待机画面。邀请几位不熟悉该草图的人,让他们辨认宠物的当前状态并完成核心任务。注意他们在哪里产生了迟疑、误读了符号或忽略了某个操作;根据观察到的问题来调整布局,而不是想当然地认为风格本身能解决这些问题。
在最小目标尺寸、较宽尺寸以及文本放大的情况下(如果界面支持)进行测试。如果是通过键盘操作的体验,请检查键盘焦点,确保玩家在不同控件间切换时焦点依然清晰可见。对于指针操作的 Web 界面,WCAG 2.2 在其 AA 级标准中规定了 24×24 CSS 像素的最小目标尺寸(有明确的例外情况);在其 AAA 级的焦点外观(Focus Appearance)标准中,还规定了 3:1 的对比度以及焦点指示符的最小面积(W3C WCAG 2.2 概述)。这些准则是很有价值的检验参考,但它们并不能直接决定哪种视觉风格适合这款游戏。
最后,确认文本在场景背景下依然清晰易读,选定与未选定的控件外观有明显区别,并且在没有颜色的情况下屏幕依然能传达其视觉层级。如果复古模型通过了这些检查,并能直接支持高频重复的任务,请保留其克制的特性。如果它一再迫使标签挤在一起或导致操作被隐藏,请改用混合风,并在最能发挥价值的地方保留复古质感:宠物场景、画框,或一组熟悉的视觉提示。
