小程序前端怎么设计？拆解8种类型的页面重点

最近在做社群的小程序，开始研究小程序的前端制作。页面怎么布局、内容怎么排、按钮放在哪里，这些都需要一点点梳理。

为了给自己的小程序找参考，我先开始研究各类小程序。商城要帮助用户选商品、下订单，预约服务要让用户选时间、查名额，社群则要方便成员浏览内容、发布和交流。用户进来做的事情不同，页面需要突出的东西也不同。

做前端设计，先弄清楚自己做的是哪一类小程序。 下面按8种常见类型，结合快递100、国博、优衣库、小宇宙、星巴克、影视飓风、WorkBuddy和兔小巢，看看各自的页面突出什么，布局和交互有哪些重点。

---

01. 工具服务型｜快递100：先找到办事入口

工具服务型处理一件明确的事情，例如查件、寄件、报修、缴费。用户带着目的进来，页面首先要帮助他找到对应入口，然后完成操作、确认结果。

寄件入口：先选任务，再选场景

快递100的“寄快递”页面，先把基本任务放到最醒目的位置。中部最大的一张卡片，把“寄快递”和“寄大件”并列；下面再按场景分成批量寄件、网购退货、同城急送、国际／港澳台等入口。先选基本任务，再找具体场景，页面用面积和分组表达了两层优先级。

每个入口都有图标、名称和一句短说明。“网购退货”下面写“免填退货地址”，解释了这个入口对用户的价值；“寄大件”下面写“5kg+大件”，提供选择依据。说明文字应该帮助分流，不能每个入口都写一句相似的口号。

顶部优惠问卷占了较大面积，视觉上甚至先于寄件任务。运营活动可以吸引注意，但做自己的工具页面时，需要控制它的高度，让常用任务尽量出现在用户打开后的第一屏。

进入填写页，布局如何变化？

填写页把寄件人和收件人放在同一张卡片里，用“寄”“收”区分角色；地址簿、文本导入、粘贴地址和图片识别提供不同的信息复用入口。这里的设计重点变成减少输入和避免填反。 姓名、电话与地址集中在同一区域，方便填写后核对。

下面依次是物品信息、上门取件／服务点自寄、快递公司与希望上门时间。报价卡把公司、起步价、续重和预计送达排在一起，方便按价格或时效比较。但卡片中的“￥4.00起”与底部“预计：--元”表达不同含义：信息尚未填完时，总价暂不显示，起步价则用“起”字标明。

前端设计重点

• 视觉顺序：主要任务 → 选择依据 → 次要服务 → 运营信息。主入口通过位置、面积和清楚的文案突出，避免每张卡片都使用同样强的颜色。

• 布局方式：入口页可以用两列宫格分流；填写页切换为按步骤排列的单列表单。不同任务的页面不必沿用同一套宫格布局。

• 信息输入：真正进入寄件流程后，收寄地址、物品信息等字段应按填写顺序组织，能复用的信息减少重复输入。

• 操作反馈：下单后说明当前到了哪一步，并给出订单查询入口。“预约取件成功”和“快递员已取件”应分别表达。

认识一个名词：功能宫格。 把多个入口按固定列数排列，常见为两列、三列或四列。快递100这张图用了两列场景卡片；它适合并列选择，入口一多，就需要进一步分类。

这一类的判断标准：用户能不能迅速找到入口，把事情办完。

02. 预约服务型｜国家博物馆：把选择顺序和名额说清楚

预约服务型把一次服务安排在未来的时间，例如参观、挂号、订场地。日期、时段和可用名额会限制选择，页面必须解释这些限制。

首页看展览，预约页按顺序选择

国博首页先用大幅展览图片建立兴趣，随后放出“参观预约”等五个入口，再向下展示当前展览。首页同时承担了解展览和进入服务的工作。 大图负责内容吸引，预约入口负责承接已经有明确参观计划的人。

进入预约服务系统后，页面明显变得克制：先选入馆日期，再选展览，最后选时段。没有先选日期时，展览区域提示“请先选择入馆日期”；时段区域则提示先选择日期和展览。它把字段之间的依赖关系直接写在了页面上。

日期格子里的“已约满”很关键，让用户在填写更多信息前知道名额限制。不过，图中不少日期都使用灰色底，只有部分有文字状态。设计自己的预约系统时，最好明确区分约满、未开放、已过期和可选，避免让用户猜灰色代表什么。

底部把“预约记录”和“个人预约”放在一起：一个服务正在预约的人，一个服务已经预约的人。流程结束后，还要方便用户回来找到记录。

前端设计重点

• 视觉顺序：可约日期 → 可选服务／展览 → 时段与名额 → 确认操作。用户要先判断有没有可用选择，再补充个人资料。

• 布局方式：日期网格和时段选项分区展示，已选结果留在对应区域。固定底部主按钮时，要为正文预留底部空间。

• 可用状态：可选、已选、约满、未开放、已过期用文字和样式共同区分；选择后仍要检查实时可用性。颜色承担辅助识别，不让用户只凭灰色猜状态。

• 依赖关系：修改上一步后，下游选择应更新或清空，并说明原因，防止留下无效组合。

• 预约结果：成功后集中显示时间、地点、人员等必要信息，并保留查询、取消或修改入口，具体能力按业务规则设计。

认识一个名词：空状态。 某一区域暂时没有内容时，显示原因和下一步。这张图中的“请先选择入馆日期”就是有指引作用的空状态。

这一类的判断标准：用户是否清楚能不能约、按什么顺序约、约完去哪里查。

03. 零售电商型｜优衣库：从找商品到确认购买条件

零售电商型围绕选购商品展开。用户可能随便逛，也可能已经知道要买什么；这两种进入方式需要不同的页面支持。

首页逛活动，分类页找商品

优衣库首页用大面积品牌红和“十一出行特惠购”承接节日促销。活动日期、主题和赠品信息很醒目，适合让没有明确目标的人先产生购买兴趣。顶部搜索和购物车仍保留位置，底部也能进入分类，给目的明确的人提供直接路径。

分类页切换成大面积白底，按三列展示服装图片。上方先分女装、男装、童装、婴幼儿装，再在当前人群下按外套、裤装、衬衫、内衣等品类选择。人群和品类是两个不同的分类维度，分两层处理比塞进一个长列表更清楚。

图片帮助识别衣服，标签负责准确命名。这里也能看到排版的实际难点：有些类目只需一行，有些会换成两行。自己的分类页应统一图片区域、文字行数和格子高度，避免标签长短让整页显得参差。

首页的大促画面会把商品分类推到更低位置。这是运营曝光与找货效率之间的取舍，应该根据页面目标决定，而不是把所有商城都做成同样的大海报首页。

商品列表和规格页，重点又是什么？

进入外套列表，顶部出现尺码、颜色、价格等筛选，下面给出“90件”和排序入口。用户先缩小范围，再浏览商品。双列商品卡把模特图、颜色、适用人群、尺码范围、名称、价格和评分放在一起，减少为了查看基本信息而反复进入详情的次数。

大图适合看穿着效果，价格和规格支持比较。长商品名会换行，做自己的商品卡时，应预留标题区域，让同一行的价格和操作仍容易对照；不要只把两张商品图排齐，就认为整张卡片已经对齐。

进入487517款的详情页，依次显示颜色、XS到3XL的尺码、尺码助手与配送选择。快递配送、门店自提、门店急送被放在同一区域，说明零售电商也有门店与履约条件。餐饮点单的区别在于具体门店供餐、即时制作与取餐；不能简单用“有没有自提”区分两类。

颜色和尺码分别排列，“尺码助手”放在选择区域附近；“登录后可查看尺码推荐”交代了推荐功能的使用条件。设计这类页面时，已选、缺货和不可选需要清楚区分，购买按钮旁应容易核对当前组合与费用。

前端设计重点

• 视觉顺序：找货入口 → 商品信息 → 购买条件 → 下单。活动页可以突出主题；分类页与商品列表应给找货、比较留出更多空间。

• 布局方式：服装分类适合图片宫格；需要比较的商品列表统一图幅、文字和价格区域。图片驱动的选购可以用双列，长名称或复杂参数更适合单列，应按内容选择。

• 找货路径：活动、分类、搜索各自承担不同任务，明确目标的用户应能直达商品。

• 商品比较：列表里图片、名称、价格的位置保持一致；详情里重点处理规格、库存和购买条件。

• 下单确认：购买前看清金额和收取货方式，购买后能查订单、处理售后。

认识一个名词：分类标签 Tabs。 同一区域里切换内容范围的选项，如上方的女装、男装。它与底部切换首页、会员、分类等主要模块的 TabBar 用途不同。

认识一个名词：SKU。 商品库存管理中的具体销售单元。一件衣服的不同颜色、尺码组合，通常对应不同SKU；界面需要明确当前组合及其价格、库存等购买条件。

这一类的判断标准：用户是否容易找到合适商品，并得到足够信息作出购买决定。

04. 内容消费型｜小宇宙：从发现节目到持续收听

内容消费型服务于阅读、收听和观看。小宇宙把这个过程分成发现页、节目页和单集详情：先吸引用户选择内容，再提供节目结构和播放控制。

发现页：大卡片与单列榜单各有什么作用？

发现页上方用横向大卡展示“编辑精选”，封面和标题占据主要面积；下面的“最热榜”“锋芒榜”改为单列，按序号、封面、单集标题、节目名和播放入口组织内容。精选卡片适合建立兴趣，单列榜单适合连续扫读和比较标题。

这组页面采用白底、黑色正文与蓝色操作点缀，节目封面提供主要色彩。内容消费型不必把整页做成同一种强色，稳定的文字层级可以让不同风格的封面共存。

榜单标题较长，单列能给它留下更多横向空间。标题下的节目名交代来源，右侧播放按钮靠近对应条目，让用户发现内容后就能开始听。列表中部分标题或节目名有省略，自己的页面应同时提供进入详情的路径，方便看完整信息。

节目与单集：先理解结构，再处理播放

节目页上方显示节目封面、名称、主播和订阅信息，再用“单集更新／节目详情”切换内容。单集列表给出标题、摘要、时长、发布时间及播放入口。节目是一组内容，单集是一次具体收听的对象，这两层需要用名称、封面和返回路径区分。

进入单集详情，标题、节目名和“26分钟”帮助用户判断在听什么、需要多长时间；下面的说明按00:00、02:10等时间戳组织。长音频有了内容线索，用户在收听前也能了解话题顺序。 时间与话题并排呈现，给长音频增加了清楚的内容目录。

节目页与单集页底部都显示迷你播放器，保留当前单集、已播／总时长和暂停按钮。这种布局把浏览位置与当前播放状态同时保留下来。详情页还有一组较大的分享与播放控制，设计时应明确它和底部播放器的职责，避免用户不清楚两个按钮控制的是不是同一条音频。

前端设计重点

• 视觉顺序：推荐页突出内容吸引与选择依据，详情页突出标题、来源、时长和阅读／播放操作。每一层有自己的主要任务。

• 布局方式：封面推荐可以用大卡片，长标题列表更适合单列；正文保持稳定边距、行距和段间距。节目、单集、章节等结构分别表达。

• 播放状态：当前内容与播放／暂停状态容易识别；迷你播放器和固定操作区要给正文留出底部空间。加载、失败与重试需要明确反馈。

• 内容定位：标题、摘要、来源与时长帮助选择，时间戳可作为长内容的导航线索；定位入口要有清楚的操作反馈。

• 找回内容：历史记录、订阅或继续收听路径按业务安排。长音频还要考虑中断后如何继续，让用户容易找到上次的位置。

认识一个名词：迷你播放器。 页面中的紧凑播放控制区，用少量空间保留当前内容和播放状态，方便用户在浏览其他内容时继续操作。

这一类的判断标准：用户能否发现内容、判断是否值得听，并在浏览中保持对播放的控制。

05. 餐饮点单型｜星巴克：先确认在哪里、怎么拿到

奶茶店、咖啡店、快餐店的点单系统，都可以放在这一类。它属于交易服务的一个分支，主要流程是确定门店和用餐方式 → 选餐品与规格 → 核对付款 → 制作、取餐或送达。

餐饮点单有几个特别强的约束：餐品由具体门店供应，选择可能受库存和营业状态影响，商品通常需要即时制作，完成付款后用户还要知道什么时候、在哪里拿到。这些条件会直接改变页面的优先级。

从首页进入菜单：先确定服务情境

首页把“啡快”“专星送”等服务并列。“啡快”对应在线点单、到店取，“专星送”对应外送；地址、服务范围与门店菜单会限制选择。 进入菜单后，当前门店和“即刻取单”显示在顶部，用户可以先核对在哪里拿、什么时候拿。

菜单采用左侧分类、右侧餐品列表。分类帮助在较多餐品中切换，商品区保留图片、名称、价格和选购入口；底部购物车汇总金额并给出结算入口。顶部活动横幅和会员优惠占了较大面积，自己设计时要评估这些内容会不会让普通餐品和点单操作过晚出现。

规格页：选择结果与优惠条件一起看

美式咖啡规格页将数量、杯型分组，355ml中杯、473ml大杯、592ml超大杯并列，大杯用浅绿底和绿色文字表达选中。杯型名称与容量放在一起，能帮助用户理解差别，而不只凭“大杯”两个字猜大小。

底部同时出现“￥30加购”和带“玉星会员专享月卡优惠”的￥21入口。两个金额需要连同条件阅读，不能把会员价直接写成所有人的售价。自己的点单页应清楚解释普通购买、优惠购买，以及优惠是否需要额外开卡。

付款前：把取餐选择与金额核对放到一起

确认付款页先显示当前门店，再并列“即刻取单”和“预约取单”。即刻取单旁显示“1–6分钟领取”，用预计等待时间帮助用户判断取餐安排。预约取餐在这里是点单流程中的一种取餐安排。

订单卡片列出餐品、规格、数量和金额。套餐￥67与美式￥30合计￥97，底部按钮也显示支付￥97。月卡￥15.9另列为可选项，旁边的圆圈未选中；“用卡可省￥29.1”放在月卡旁，当前支付金额仍为￥97。

结算页应让用户看清自己选了什么、将付多少，以及额外优惠是否有条件。 固定付款区让下一步容易找到，正文仍需保留足够空间，避免底部餐品或规则被遮住。

前端设计重点

• 视觉顺序：先核对门店或地址、用餐方式，再选餐品；规格、数量和实付金额在提交前集中确认。促销提示不应遮挡这些关键信息。

• 菜单布局：分类较多时可以用左侧分类、右侧餐品列表；菜单较短时单列也合适。图片、名称、价格和售罄提示保持一致的位置，加入购物车后的数量容易看见。

• 规格与结算：奶茶常见的杯型、冰量、甜度、加料按组排列，用清楚的选中状态表达选择。底部固定购物车数量、金额和结算入口，并给正文留出空间，避免遮住最后一项。

• 订单状态：付款、接单、制作、可取餐、配送中、完成分别表达；可取消时间和改错方式按业务规则提示。星巴克官方说明中，啡快付款提交后无法修改订餐内容，开始制作后也不能取消，因此提交前的核对尤其重要。

奶茶店点单还有哪些分支？

到店自取突出门店、预计等待和取餐凭证；扫码堂食突出桌号、已点餐品与上餐状态；外送突出地址、配送范围、费用和预计送达时间；预约取餐增加日期、时段和预约规则。多种方式共存时，切换方式后要重新核对门店、可售商品与金额。

认识一个名词：履约。 商家按订单完成制作、取餐或配送的过程。付款成功以后，页面还要帮助用户确认服务如何完成。

这一类的判断标准：用户是否选对门店和餐品、看清费用，并顺利拿到餐。

06. 教育学习型｜影视飓风：找到课程，也要方便开始学

教育学习型可以继续分成课程学习、背单词、题目练习等分支。课程学习需要把知识按章节组织，让用户知道从哪里开始、当前学到哪里，以及下次回来如何接着学。影视飓风小程序中的“飓风课堂”，把找课、选课和学习安排在不同区域。

首页在突出什么？

首页先放一张AI视频创作活动横幅，下面是“我的课程”，再往下是“课程广场”。已有课程的学习与其他课程的选购被分成两个区域。 “我的课程”给出课程名称、学习进度0%和“去学习”按钮；“课程广场”则用双列卡片展示封面、课程名称、标签、课时和价格。

这两个区域适合采用不同排版。“我的课程”的横向卡片把封面与进度、操作并排，方便进入学习；“课程广场”的双列排列方便同时浏览多个选择，文字和价格位置应保持一致。课程名称有不同的换行长度，设计时需要给标题预留空间，避免挤乱课时与价格的排列。

顶部活动横幅占了较大面积。对于经常回来学习的用户，设计自己的页面时可以评估是否把“我的课程”进一步前置；对于首次找课的用户，再突出课程介绍与选购信息。底部“兑换课程”也保留了独立入口。

进入学习页后，页面重点如何变化？

进入学习页，顶部是视频区域，接着显示课程名称、上线时间与学习进度，再往下是导学课和按单元分组的课时。单元标题旁给出课时数量；每张课时卡片提供名称和时长，让用户在选择前了解内容与时间成本。

导学课卡片使用红框、红字，与其他灰底卡片形成区别，突出当前选中项。“视频 → 课程信息与进度 → 单元 → 课时”的层级，把观看内容和课程结构联系起来。 这也是课程学习需要专门设计的地方：用户既要看当前视频，也要找到前后课时。

页面中还显示“AI跟练室”的领取入口。自己设计时，练习工具、资料和邀请活动应有明确的用途与去向，安排在不干扰课时选择的位置。课程名称与学习进度放在目录上方，帮助用户理解当前所在的课程。

前端设计重点

• 视觉顺序：首页帮助找到自己的课程与学习入口；学习页突出当前内容、所在章节、进度和下一步。课程推广与日常学习分别确定优先级。

• 布局方式：课程广场用统一卡片承载选课信息；学习页按单元分组。长课时名称可以采用单列目录，较短名称可以采用矩阵，选中和完成状态都应有明确表达。

• 进度与找回：区分整门课程和单个课时的进度，写清完成条件；用户退出回来后容易找到上次位置。学习进度用于说明流程完成情况，掌握程度需要练习或其他评估来判断。

• 播放与异常：加载、暂停、播放失败有清楚反馈，切换课时和返回路径容易发现。

认识一个名词：课程目录。 把内容按课程、单元、课时组织起来的导航。它帮助用户选择当前内容、理解前后关系；当前选中、未学、已学等状态也可以在这里表达。

这一类的判断标准：用户是否容易找到课程、进入学习、理解进度，并再次回来继续。

07. AI任务型｜WorkBuddy：先帮用户把需求说出来

AI任务型通过自然语言接收需求，帮助处理文档、数据或其他工作任务。用户往往知道想得到什么，但未必知道系统能怎么帮忙。

首页用任务建议引导输入

WorkBuddy的任务首页在欢迎语下给出四个任务建议：数据分析及可视化、文档处理、做幻灯片、制作工作台。示例任务把抽象能力写成了用户可以提出的需求。 “换一换”则让首页可以提供更多提示，不必一次展示所有能力。

底部输入框写着“发消息或按住说话”，让文字和语音两种发起方式保持可见。中部的留白主要用来介绍能力和引导首次输入；一旦进入任务，页面还需要承担展示执行过程和结果的工作。

底部导航分为任务、专家、资料库、定时任务和更多，为对话任务、资料和自动化等工作模块安排了位置。

完成以后：通知和产物各承担什么任务？

微信里的“任务完成提醒”列出任务名称、开始与结束时间，并提供“进入小程序查看”。它是小程序外的通知卡片，负责告诉用户任务有了结果，并把用户带回对应任务。

小程序内，“全部产物”底部弹层按文件列出名称、类型、大小和操作图标，包含Markdown文档、PPTX演示文稿和图片，底部还有“批量操作”。一次任务可能交付多种文件，结果页需要帮助用户识别主要交付物和配套材料。 对年终总结PPT任务，演示文稿应容易找到，长文件名的完整查看方式也应明确。

文件操作图标靠近对应条目，批量操作放在列表底部。设计自己的结果页时，可以用明确的动作名称或首次使用提示解释图标，让用户知道下一步怎么使用文件。

背景对话区还露出英文系统占位文字与ToolSearch。面向用户的界面，应把过程信息转成可理解的任务进展，异常则说明影响与下一步。产物列表、过程记录和用户提示需要分层呈现，避免技术日志淹没主要结果。

前端设计重点

• 视觉顺序：首次使用突出能力示例和输入；任务进行时突出进展与待补充信息；完成后突出可使用的结果与修改入口。

• 布局方式：输入区域容易到达，键盘弹出时仍能操作；较长结果按标题、步骤、文件等结构展示。涉及分析与文件处理时，可用结果卡片承载产物。

• 发起任务：提供具体示例、容易发现的输入入口，以及必要的材料添加入口。

• 执行状态：任务发出后区分等待、处理中、需要补充信息、失败和完成，让用户知道当前情况和下一步。

• 结果使用：根据结果类型提供预览、修改、保存或导出方式，帮助用户从对话进入实际工作。

认识一个名词：任务建议。 把系统能做的事写成一条可尝试的用户请求，用来降低首次使用时的表达难度。它比单独罗列模型、算法等技术名词更容易理解。

这一类的判断标准：用户能否发起任务、理解进度，并拿到可继续使用的结果。

08. 社区互动型｜兔小巢：让发言、讨论和处理状态联系起来

社区互动型围绕成员发布、回应和参与展开，可以分成兴趣讨论、作品分享、打卡互助、反馈交流等分支。兔小巢属于反馈交流社区：成员提出问题和需求，其他人参与讨论或投票，团队通过回应与状态让反馈有后续。

同样有内容列表，社区还要表达谁在说什么、哪些人回应、如何参与；反馈社区进一步需要说明问题处于什么阶段。它与小宇宙这样的内容消费页面，主流程与信息优先级不同。

首页：帮助内容与用户发言如何共存？

首页先显示社区介绍与更新日志，再把接入使用、产品配置、Android、iOS等常见问题入口集中排列。下方“用户说”提供默认、最新、好问题三个内容范围，帖子用头像、作者与正文组织，置顶标记让欢迎与规则更容易发现。

已整理的帮助内容和成员贡献的讨论分区呈现，能让用户分别找到查答案与提问题的路径。 成员列表适合单列，给正文和身份留出空间；帮助入口则适合短标签卡片，方便直接选择。

蓝色“我要发言”悬浮在列表与底部导航上方，参与入口很容易发现。不过它也覆盖了部分帖子文字，设计自己的社区时，需要检查滚动位置与正文底部留白，让帖子始终有机会完整展示。

功能投票：参与热度和处理进展如何区分？

功能投票页先区分“进行中／已完成”，在进行中区域显示“待处理”；每条需求则列出标题、赞同数、讨论数与阅读数。状态帮助理解团队处理进度，互动数字帮助判断关注与参与程度，两类信息有不同含义。

左侧票数按钮与需求标题并排，讨论和阅读作为次一级文字，让用户可以先看懂提议，再决定是否参与。赞同多不等于已经采纳，讨论多也不等于已经完成。 页面中的引导文案说明参与可能影响优先级，具体是否开发、何时交付仍需团队回应与状态说明。

发言页：先说清发什么，再帮助表达

编辑页先用“提建议／我想要”区分表达目的，再显示问题分类和功能投票关联入口，正文输入区提供表情、图片与0／500字数提示。发布操作与内容输入在同一张卡片里，填写顺序比较集中。

QQ字段单独放在正文卡片下面。如果自己的社区也需要联系信息，应解释用途与是否必填，把公开讨论内容和联系字段区分清楚。

输入区的占位文案“每次交流都是灵感的开始”偏鼓励表达；如果需要收到可处理的反馈，可以增加简短示例，例如发生了什么、希望怎样改进。简短模板能帮助成员组织反馈，长度要与实际任务匹配。

前端设计重点

• 视觉顺序：先看清讨论或需求，再了解作者、互动和处理状态，参与入口保持容易发现。状态与热度分别表达。

• 布局方式：成员内容用单列信息流，帮助与分类可以用短卡片；详情区分原帖、评论和回复，长评论避免过度缩进。

• 参与方便：发布前明确用途、分类与可填写内容；提供适度模板、字数和附件反馈，必要联系字段解释清楚。

• 回应与找回：区分回复对象与团队回应，让通知带回对应讨论；对于反馈型社区，还要设计待处理、处理中、完成等业务状态与说明。

• 管理与异常：空列表、发布失败、重复内容和内容管理各有可理解的反馈，保留草稿或重试方式，按实际规则处理。

认识一个名词：信息流 Feed。 持续排列的内容列表，可以按时间、关注或推荐规则组织。社区信息流还需要成员身份、互动关系和内容管理；反馈社区可进一步关联问题状态。

这一类的判断标准：成员是否容易表达需求、参与讨论，并理解回应与处理进展。

---

通用模块｜星巴克会员：资产、门槛与使用入口

星巴克既有点单入口，也有“星会员”页；优衣库底部同样有会员入口。同一类主流程可以配置不同会员方案，同一个会员模块也能支持多类主流程。 因此，会员更适合单独讨论其模块规范。

星巴克会员页里，账户显示0.6星星，活动写着1星参与；下面还有“花星星”和“赚星星”两条路径。设计重点是把账户资产、使用条件和行动入口放在一起：还有多少、能做什么、还差多少、哪里查看规则。对于日常查券和兑换，也要保留容易找到的路径。

登录、搜索、支付、优惠券和通知也可以这样处理：先定义模块的共用规则，再结合所在页面的主要任务安排位置和优先级。

八种类型，优先解决的事情有什么不同？

• 工具服务关注办完任务；

• 预约服务关注时间和名额；

• 零售电商关注选购决策；

• 内容消费关注找到并消费内容；

• 餐饮点单关注门店、规格与取餐；

• 教育学习关注课程结构、学习入口和进度；

• AI任务关注任务执行与结果；

• 社区互动关注成员参与和回应。

一个小程序可以同时拥有几种模块。国博有展览内容和预约服务，优衣库有商城和会员，星巴克有消费入口和权益页面。做自己的小程序时，可以逐页判断主要任务，再确定入口、信息和状态的优先级。

对正在做的社群小程序，也可以用同样的方法拆开：资讯页帮助成员找内容，成员页帮助认识彼此，发布页帮助贡献内容，回复和通知帮助交流继续。先明确每一页服务哪件事，再制定相应的布局、组件和反馈规范。

下一篇继续解释实现这些页面时会遇到的名字：微信原生小程序的页面结构是 WXML，样式文件是 WXSS，行为逻辑通常由 JavaScript 或 TypeScript 编写。 CSS 是网页样式语言；WXSS 在它的基础上做了小程序相关扩展。把这些名词和页面设计放在一起，才知道每一层负责什么。

---

关于作者

Punk｜中科大管理学硕士｜AI提示词、AI小白教程｜Punk系列Skills作者｜3个月赚了8位数｜Learn in Public｜FDE文章浏览量240w｜@AdrianPunk115