HarmonyOS 小游戏《对战五子棋》开发第27篇 - 模式选择与UI布局

第一印象很重要——首页是用户对游戏的第一眼首页截图Index页面结构EntryComponentstruct Index{build(){Column(){// 顶部标题区域 (35%高度)Column(){Text(五子棋).fontSize(56).fontWeight(FontWeight.Bold)Text(Gomoku).fontSize(18).fontColor(#999999)}.height(35%)// 模式选择按钮 (居中)Column({space:24}){// 双人对战按钮Button(){...}.backgroundColor(#4A90D9).onClick((){router.pushUrl({url:pages/TwoPlayerPage});})// 人机闯关按钮Button(){...}.backgroundColor(#E8913C).onClick((){router.pushUrl({url:pages/AIBattlePage});})}// 底部信息 (15%高度)Column(){Text(选择模式开始游戏)}.height(15%)}.backgroundColor(#F5F0E8)}}布局分析┌─────────────────────────┐ │ │ ← 35% 标题区 │ 五子棋 │ │ Gomoku │ │ │ ├─────────────────────────┤ │ │ │ ┌───────────────────┐ │ ← 按钮区 │ │ ⚔ 双人对战 │ │ │ └───────────────────┘ │ │ ┌───────────────────┐ │ │ │ 人机闯关 │ │ │ └───────────────────┘ │ │ │ ├─────────────────────────┤ │ 选择模式开始游戏 │ ← 15% 底部信息 └─────────────────────────┘百分比高度布局Column(){Column(){/* 标题 */}.height(35%)Column(){/* 按钮 */}// 自适应高度Column(){/* 底部 */}.height(15%)}.height(100%)标题占35%、底部占15%按钮区域自动占据剩余50%。这种百分比布局在不同屏幕尺寸下都能保持比例。按钮设计Button(){Row({space:16}){Text(⚔).fontSize(36)Column(){Text(双人对战).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#FFFFFF)Text(与好友面对面切磋).fontSize(14).fontColor(#FFFFFFCC)// 80%不透明度.margin({top:4})}.alignItems(HorizontalAlign.Start)}.width(100%).padding({left:24,right:24,top:20,bottom:20})}.type(ButtonType.Capsule).width(80%).height(90).backgroundColor(#4A90D9)设计要点图标文字Row布局emoji图标在左文字在右主副标题Column布局大标题小描述胶囊形状ButtonType.Capsule圆角按钮80%宽度两侧留出边距固定高度90vp按钮大小一致颜色语义// 双人对战蓝色社交、友好.backgroundColor(#4A90D9)// 人机闯关橙色挑战、竞技.backgroundColor(#E8913C)不同颜色帮助用户快速区分模式。文字层级五子棋 → fontSize(56), Bold ← 主标题 Gomoku → fontSize(18), #999999 ← 副标题 双人对战 → fontSize(22), Bold ← 按钮标题 与好友切磋 → fontSize(14), #FFFFFFCC ← 按钮描述 选择模式 → fontSize(14), #AAAAAA ← 底部提示字号层级56 22 18 14形成清晰的视觉层次。justifyContent居中Column(){/* 标题 */}.justifyContent(FlexAlign.Center)// 垂直居中Column({space:24}){/* 按钮 */}.justifyContent(FlexAlign.Center)// 垂直居中justifyContent(FlexAlign.Center)让子元素在主轴垂直方向上居中。总结Index首页的设计要点百分比布局35%/50%/15%三段式按钮设计图标主副标题胶囊形状颜色语义蓝色社交、橙色挑战文字层级56/22/18/14四级字号居中布局justifyContent实现垂直居中首页虽然简单但布局、配色、字号层级都经过精心设计给用户良好的第一印象。