← 返回笔记列表

竖屏战斗区与操作区怎么分

2026-04-02 · UI

竖屏 9:16 正式参考:上部战斗区、底部操作区
竖屏 9:16 设定稿:战斗区约占 75%~80%,底部操作区约占 20%~25%。

手机竖着玩时,拇指常停在下半屏。如果我把血条、技能、背包入口全糊在画面中间, 战斗再好看也看不清,点起来也烦。所以竖屏 9:16 的占屏比例,我一开始就写死—— 也方便告诉 AI / Agent:别擅自改战斗 HUD 布局。

我的拆法

底部操作区金边 HUD 裁切
底部操作区:技能与导航集中,少挡战斗。
厚金镶边圆形 UI 框
圆形金镶边语言(HP/MP / 底栏 medallion 同款)。
  • 战斗区大约占屏幕 75%~80%,先保证角色、怪物、掉落可读。
  • 底部操作区大约 20%~25%,技能与导航集中在这里。
  • 左侧只放必要状态:自己的血蓝、关键增益;队员块另排,不要塞满次要条。
  • 边框统一用暗色金属/石材 + 厚金镶边语言,圆形和方形各有规矩,避免每做一个面板换一套描边。

做完才发现的事

UI 不是「能点就行」。遮挡、误触、信息密度都会直接影响战斗手感。 我宁可少显示几条次要信息,也要保证关键信息在打斗时一眼找得到。