知识库 App 的首页在基础版上做了两处关键升级新增快捷操作区提供高频功能入口笔记本卡片加了阴影和内边距提升视觉层次。这两处改动不大但直接影响用户的第一印象和操作效率。完整效果一、首页的区块演进版本区块变化基础版Header 统计卡片 笔记本 最近笔记4 个区块优化版Header 统计卡片 笔记本 快捷操作 最近笔记5 个区块快捷操作区插在笔记本和最近笔记之间——用户浏览完笔记本分类后看到快捷入口再看到具体笔记。这个位置符合分类→操作→内容的浏览逻辑。二、快捷操作区的 Action BuilderBuilderAction(icon:string,label:string,color:string){Column(){Text(icon).fontSize(20).width(44).height(44).borderRadius(14).backgroundColor(color12).textAlign(TextAlign.Center)Text(label).fontSize(10).fontColor(T2).margin({top:4})}.layoutWeight(1).onClick((){if(label写笔记)router.pushUrl({url:pages/NoteEditor,params:{}asRecordstring,Object})elseif(label标签管理)router.pushUrl({url:pages/ProfilePage})})}三个参数的设计参数作用例子iconemoji 图标label功能名称写笔记color背景色#6C5CE7color 只用于背景色的 7% 透明度color 12。图标本身是 emoji 不受 color 影响color 只控制底部色块。四个操作项各有不同颜色——紫色/绿色/橙色/红色——视觉上区分不同功能。和 Stat Builder 的结构对比// Stat图标 数字 标签三行BuilderStat(icon,value,label){Column(){Text(icon);Text(value);Text(label)}}// Action图标 标签两行BuilderAction(icon,label,color){Column(){Text(icon);Text(label)}}Action 比 Stat 少一行——没有数字。Stat 展示统计数据需要数字Action 是功能入口只需要图标和名称。两个 Builder 结构相似但职责不同。四个操作项的路由目标操作颜色路由目标参数写笔记#6C5CE7 紫NoteEditor无新建模式标签管理#00B894 绿ProfilePage无导出数据#FF9F43 橙无纯展示数据统计#FF6B6B 红无纯展示四个操作只有两个有实际路由——导出数据和数据统计是占位。这是原型阶段的常见做法先放入口占位后续逐步实现功能。如果去掉占位项快捷操作区只剩两个按钮视觉上太单薄。踩坑记录最初标签管理跳转到 TagFilterPage但 TagFilterPage 是标签筛选页不是管理页。改成跳转 ProfilePage个人中心的标签云更接近管理的概念。三、笔记本卡片的视觉升级基础版 vs 优化版// 基础版白色背景 无阴影.backgroundColor(CW).borderRadius(14)// 优化版白色背景 阴影 内边距增加.backgroundColor(CW).borderRadius(14).shadow({radius:2,color:rgba(0,0,0,0.02),offsetY:1})阴影参数的含义参数值效果radius2模糊半径 2px阴影边缘柔和colorrgba(0,0,0,0.02)2% 黑色透明度几乎不可见offsetY1阴影向下偏移 1px2% 透明度的阴影——用户几乎看不到阴影本身但能感知到卡片浮在背景上。这是微阴影micro shadow的设计理念不明显的阴影比明显的阴影更高级。图标背景色的透明度Text(nb.icon).fontSize(22).width(40).height(40).borderRadius(12).backgroundColor(nb.color15)nb.color 15是 8% 透明度0x152121/255≈8%。比笔记卡片的 7%0x12稍深——因为笔记本卡片是独立的白色卡片图标背景需要更明显的颜色来区分四个笔记本。四个笔记本的配色笔记本颜色图标背景工作#FF6B6B 红8% 红色学习#6C5CE7 紫8% 紫色生活#00B894 绿8% 绿色灵感#FF9F43 橙8% 橙色笔记本卡片的信息结构Column白色卡片 阴影 ├→ Row图标容器 │ └→ Text(nb.icon) 22px emoji 40×40 彩色背景 ├→ Text(nb.name) 13px 粗体 └→ Text(nb.noteCount) 10px 灰色 3 篇笔记三行信息——图标最重要22px名称次之13px数量最弱10px。视觉层次清晰用户先看到图标识别笔记本再看到名称确认最后看到数量了解规模。四、快捷操作区的布局Row({space:10}){this.Action(,写笔记,A)this.Action(️,标签管理,#00B894)this.Action(,导出数据,#FF9F43)this.Action(,数据统计,#FF6B6B)}.width(100%).padding({left:16,right:16}).margin({bottom:18})Row({ space: 10 }) 四等分宽度——和统计卡片、笔记本卡片用同样的布局方式。layoutWeight(1)让每个 Action 均分剩余宽度。四个按钮等宽等距视觉上整齐。和统计卡片的布局一致性区块布局方式子项数量间距统计卡片Row({ space: 10 }) layoutWeight(1)3 个10px笔记本Row({ space: 10 }) layoutWeight(1)4 个10px快捷操作Row({ space: 10 }) layoutWeight(1)4 个10px三个区块用完全相同的布局模式——Row space:10 layoutWeight(1)。这种一致性让用户浏览首页时有节奏感——每个区块的宽度分配和间距都一样视觉上不会突兀。五、 按钮的设计Row(){Text().fontSize(28).fontColor(A).fontWeight(FontWeight.Lighter)}.width(42).height(42).borderRadius(21).backgroundColor(A12).justifyContent(FlexAlign.Center).onClick((){router.pushUrl({url:pages/NoteEditor,params:{}asRecordstring,Object})})42×42 的圆形按钮28px 的 号。borderRadius(21) 42/2 正圆。fontWeight(FontWeight.Lighter)让 号笔画更细——和 Bold 的标题形成对比视觉上更轻盈。A 12是 7% 紫色背景——和统计卡片的背景色一致。整个首页的浅紫色背景都用同一个透明度0x12保持视觉统一。和笔记本图标的对比元素尺寸背景色文字 按钮42×427% 紫色 号28px笔记本图标40×408% 对应颜色emoji22px按钮比笔记本图标稍大——因为它是首页最重要的操作入口需要更显眼。六、笔记本区域的标题栏Row(){Text(笔记本).fontSize(17).fontWeight(FontWeight.Bold).fontColor(T1)Blank()Text(查看全部 ›).fontSize(12).fontColor(A)}.width(100%).padding({left:16,right:16}).margin({bottom:8})“查看全部 ›” 是一个可点击的链接——虽然当前没有实际路由。和快捷操作的导出数据数据统计一样是占位设计。点击后理论上应该跳转到显示所有笔记本的页面但当前只有 4 个笔记本一屏能看完不需要单独的列表页。Blank()让笔记本和查看全部 › 分别靠左和靠右。这是 ArkTS 里实现两端对齐的标准方式——Blank 占据中间剩余空间。七、整体嵌套结构Stack(Alignment.Bottom) 页面容器 ├→ Scroll 可滚动内容 │ └→ Column 垂直排列 │ ├→ Row (Header) 标题 按钮 │ ├→ Row Builder Stat × 3 统计卡片 │ ├→ Row 标题栏 Row ForEach 笔记本卡片 │ ├→ Row Builder Action × 4 快捷操作新增 │ ├→ Row 标题栏 Column ForEach 最近笔记 │ └→ Blank(80) 底部导航栏预留 └→ Row Builder Nav × 4 底部导航栏嵌套深度 4 层——和基础版一样。快捷操作区没有增加嵌套深度——它是一个独立的 Row直接放在 Column 里。各区块的 margin-bottom 统一区块margin-bottomHeader16px统计卡片16px笔记本标题栏8px笔记本卡片18px快捷操作18px最近笔记标题栏8px标题栏和内容之间用 8px区块之间用 16-18px。两种间距区分了标题-内容的紧密关系和区块-区块的松散关系。八、颜色系统的统一首页的颜色常量和整个 App 保持一致常量值用途A#6C5CE7主色按钮、标签、进度条BG#F8F7FE页面背景CW#FFFFFF卡片背景T1#1E1B2E标题文字T2#888888说明文字T3#BBBBBB辅助文字所有浅色背景都用常量 127% 透明度。统计卡片、按钮、笔记图标背景都用同一个透明度。这种一致性让用户感知到这些元素属于同一个系统。快捷操作的四个颜色是例外——每个操作用不同颜色。紫色/绿色/橙色/红色 四色区分功能但每个颜色都加了12后缀保持 7% 透明度。颜色不同但透明度一致——变化中有统一。