ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 7、页面设计: # 流程:选择页面类型--创建一个新页面--装修该新页面。 # 1、创建新页面操作流程: ## (1)点击“设计发布”--“页面设计”,可点击编辑设计原有页面,也可以点击“立即创建”设计新页面。 ![](https://box.kancloud.cn/89dcb05d9a60f5bc1f1493ed877ca830_488x470.png) ## 点击“立即创建”可选择创建页面类型,各个页面类型如下: ![](https://box.kancloud.cn/40f0b17f96a846d47b3351ec56f30d36_371x248.png) ## 各页面类型包含板块如下: ## 页面类型①商城首页: ## 默认板块(从上到下):搜索框、图片轮播、公告、按钮、商品组。 ![](https://box.kancloud.cn/52fd4f3580431ee96d06e5db70a8fae9_592x807.png) ## 页面类型②自定义页面(无默认板块,可自由设计) ![](https://box.kancloud.cn/fb710a51d4fec9ea313ce945b520f33e_599x719.png) ## 页面类型③商品详情(该页面下图红框部分板块只能添加一个) ![](https://box.kancloud.cn/40a876354a703a884bf666676ea87bdd_585x192.png) ![](https://box.kancloud.cn/00e63d9eaecd5c09474e9b132e8706e9_579x716.png) ## 页面类型④会员中心 ## 默认板块(从上到下):会员信息、绑定手机、列表导航、图标组、列表导航。 ![](https://box.kancloud.cn/e04da9f95f5a138e06a560042402b4fb_590x721.png) ## 页面类型⑤课程页面(无默认板块,可自由设计) ![](https://box.kancloud.cn/160161b443b9f5dd5845817cfd476f98_620x831.png) ## 页面类型⑥整点秒杀(该页面下图红框部分板块只能添加一个) ![](https://box.kancloud.cn/19f0085b7a58773a14aafd647ba4af6a_628x747.png) # 2、装修页面流程: ## 创建页面成功后,选择相应页面点击编辑--选择相应板块--根据需要设计板块内容--设计完成点击“保持页面”。 ![](https://box.kancloud.cn/0b62f4f7bd5d501f5f4de0996f78cbe3_1681x546.png) ## (1)可在图示①预览页面点击需要设计的板块,在图示②页面设计相应内容,图示③区域可添加相应板块,具体板块效果可通过添加查看①预览页面决定是否留存,需要则在②区域设计内容,不需要可在①区域点击删除板块。 ![](https://box.kancloud.cn/520c6f3ee70767dfc2b2fdd48dca7a8d_790x795.png) ![](https://box.kancloud.cn/236084a61d6a3b678a382a72c89d57ea_673x397.png) ## 亿企拼学院案例: ![](https://box.kancloud.cn/3bbae57ce69a9d954843edebd59ba84c_778x802.png) ## **各个板块效果示意图:** ## 1. 公告:可发布公告、新闻等 ![](https://box.kancloud.cn/6f207f11f92ba3409d77d5d612e4bd35_611x299.png) ## 2. 商品组:可批量添加商品,可修改商品及样式 ![](https://box.kancloud.cn/9692ac2773f2128c765d132673318736_599x493.png) ![](https://box.kancloud.cn/4f6eb46ff84322ef73d54716f67fb9bf_603x683.png) ## 3. 课程组:与商品组类似,可批量添加视频/课程,可修改视频/课程及样式 ![](https://box.kancloud.cn/725cce065fa986df97a41ba4e6911445_597x422.png) ![](https://box.kancloud.cn/f6b58a37fcf8a0e750e28e1772c6f309_592x579.png) ## 4. 搜索框:可根据需要设置搜索框提示语、样式等。 ![](https://box.kancloud.cn/f441b4be1d8a6aa31cb765a1411a12a8_597x298.png) ## 5. 固定搜索框:固定在顶部的搜索框,装修设计时需根据注意事项做相应调整。 ![](https://box.kancloud.cn/fe9de5e97aa5b08b2ffc24269d234cb8_599x628.png) ## 6. 图片展播:可用于促销活动商品展播。 ## 可设置背景颜色、上下间距、左右间距、显示方式、每行数量、上下标题颜色、上下标题对齐方式、图片及连接。 ![](https://box.kancloud.cn/c9c0b4bd119c82ec111b0ecff98fd32f_589x591.png) ## 7. 图标组:可用于个人中心导航栏设置。 ## 可设置每行图标数量、背景颜色、图标颜色、文字颜色、角标背景颜色、可在图标库选择图标、图标文字及连接。 ![](https://box.kancloud.cn/da1e9d9662936fb3342a52f3e56ccec2_580x584.png) ## 8. 音频播放:可添加音频。可设置音频显示播放样式、标题文字、副标题文字、音频图片、背景颜色、标题颜色、副标题颜色、是否循环播放、暂停后播放设置。 ![](https://box.kancloud.cn/1a4e2f6017dfde4ed674d5f7812326d2_598x538.png) ## 9. 版权:版权页面设计 ![](https://box.kancloud.cn/d4dfb6e0044276c4c60bab7f7f4e6474_590x321.png) ## 10. 视频组:视频显示页面设计 ## 可选择不同尺寸显示(具体尺寸建议参考上传视频尺寸选择)、视频封面、视频地址(可选择本地视频上传或复制腾讯视频链接)。 ![](https://box.kancloud.cn/231a736d9ac57a8d1688fd9c22b12d16_595x255.png) ## 11. 列表导航:可根据需要插入相应链接,如线下活动报名、商品促销、最新动态等。 ## 可设置一个或多个链接、顶部边距、背景颜色、图标颜色、文字颜色、图标、文字、链接都可以自定义。 ![](https://box.kancloud.cn/bd29ff1935ab8e4a213539c7f6c85953_601x474.png) ## 列表导航案例:亿企拼学院线下活动报名链接 ![](https://box.kancloud.cn/ff996b383e55ec705a05ac43b620a9f5_351x643.png) ## 12. 富文本:可通过大量文字编辑活动、公告等。 ![](https://box.kancloud.cn/915423faf04bf8b031b1019654a73bad_604x493.png) ## 13. 标题栏:可通过标题吸引用户点击链接查看活动或购买商品等。 ![](https://box.kancloud.cn/08fdc4c85c0bc88b1b800c1a33d8d324_598x263.png) ## 14. 辅助线:方便划分页面不同板块。 ## 可根据装修需求设置背景颜色、线条颜色、线条样式等。 ![](https://box.kancloud.cn/e700a0f139cba36fbe1600441857e47a_599x174.png) ## 15. 辅助空白:根据需要设置不同颜色留白。装修需要留白可点击添加,可调整颜色、高度。 ![](https://box.kancloud.cn/59e774205512eaed0b511f6972091737_610x124.png) ## 16. 按钮组:可用于设计导航按钮,背景颜色、按钮形状、显示方式、按钮文字、按钮链接地址、按钮个数都可以根据需要设置。 ![](https://box.kancloud.cn/41635fc45ef0f926fc863525e02c53b4_594x490.png) ## 17. 按钮组2:可用于个人中心导航设置,顶部边距、背景颜色、图标、文字、链接都可以根据需要设置。该按钮组最多设置三个。 ![](https://box.kancloud.cn/fe084ddb8065f32c4ba76a784b38062b_600x436.png) ## 18. 单图组:通过一个产品或活动图,引导用户点击了解详情或参与活动等。 ![](https://box.kancloud.cn/ac1149902c0827d0ede0858e3e259825_598x370.png) ## 亿企拼学院案例:课程首图链接课程。 ![](https://box.kancloud.cn/fde2dbf077697d2df4a183ee07f5b5dd_362x659.png) ## 19. 图片轮播:页面轮播图设置,可设置图片切换按钮形状及颜色、设置图片数量及连接。 ![](https://box.kancloud.cn/61aa7e3f4790306b5587cf056d12acba_601x292.png) ## 20. 图片橱窗:可用于设置推荐商品、热卖产品、优惠活动入口等。 ## 可设置图片整体上下边距、图片左右边距、背景颜色、布局方式、图片及连接。 ![](https://box.kancloud.cn/07c3a7262833d64feceaf39a478b1f92_610x540.png) ## 21. 优惠券组:可在商城首页、商品页添加优惠券促进用户购买。 ## 可设置整体上下边距、左右边距、背景颜色、布局样式、优惠券名称、价值、使用条件、色调。 ![](https://box.kancloud.cn/729308be241a995837d4f44bd53be133_606x530.png) ## 22. 选项卡:可用作设计导航栏、分类栏。 ## 可设置样式、背景颜色、文字颜色、激活背景颜色、激活文字颜色、选项卡文字及连接。 ![](https://box.kancloud.cn/073bc5e4f1b2f67ac2c9809a735af58a_605x559.png) ## 23. 秒杀组:秒杀商品页面设计 ![](https://box.kancloud.cn/c628c1a983adae8d41edb86c6efe941a_593x414.png) ## 24. 商品详情页(24-32为商品详情页独有板块):底部导航为商品详情页默认板块,不能删除。 ## 可设置背景、图标、文字、角标、购物车、购买按钮颜色,购物车按钮与购买文字处于同一位置,只能二选一,可根据不同商品进行相应设置。 ![](https://box.kancloud.cn/87e6af3244160805f0d366c52ccab287_596x438.png) ## 25. 商品图:可放商品主图,可设置轮播按钮形状、按钮位置、按钮颜色、左右边距、底部边距、透明度。 ![](https://box.kancloud.cn/3eba5eb6dd64b37e04aa5b0cbdad3e58_617x267.png) ## 26. 秒杀条:可设置秒杀活动情况显示,可设置显示颜色。 ![](https://box.kancloud.cn/72bc00db843524731de076a51ac34ed7_605x99.png) ## 27. 商品信息:信息系统自动读取商品信息,可设置显示方式、颜色、分享文字及链接等。 ![](https://box.kancloud.cn/83cb041fe19cd3039980a7fedcfed2ea_592x556.png) ## 28. 营销信息:商品可享受优惠的营销活动显示区域。 ![](https://box.kancloud.cn/b473ca069565560ac38ea0b987d3a2eb_598x291.png) ## 29. 商品规格:商品可选规格。 ![](https://box.kancloud.cn/15d76389cdb9ea70a367bde85313e986_609x178.png) ## 30. 相关套餐:商品可组合成套餐出售,增加成交量。 ![](https://box.kancloud.cn/3d5a267cc264a1c35368d723679d9bde_605x203.png) ## 31. 店铺信息:店铺信息、店铺首页入口。 ![](https://box.kancloud.cn/b0ed739fae7d08b7492dd140d4eb3e18_597x313.png) ## 32. 购买可见:购买可见显示区域,可通过该区域设置商品或服务自动发货内容,如资料链接、邀请码、邀请函、体验名额等。 ![](https://box.kancloud.cn/6209e94a698e0ff3dd121765b679fa72_614x213.png) ## 33. 商品评价:商品评价显示区域(后台可设置虚拟评价) ![](https://box.kancloud.cn/439f22cc3226129aea3d89f077b09450_601x238.png) ## 虚拟评价添加流程:“商品商城”--“评价管理” ![](https://box.kancloud.cn/264c27fa0af88bf79993f7bb9f8326f5_649x525.png) ## 34. 会员信息:会员信息显示区域 ## 可设置样式、颜色、等级说明链接、按钮设置。 ![](https://box.kancloud.cn/5ddf5e5b82287e6b6bc69d5eae150754_592x346.png) ## 35. 绑定手机:绑定手机区域,用户点击可绑定手机。 ![](https://box.kancloud.cn/3bb9805d7345f3c570e86b753a71aa43_605x363.png) ## 36. 待使用商品 :可核销商品,购买后未核销则为待使用商品。 ## 可设置样式、文字、颜色。 ![](https://box.kancloud.cn/73135fcd9a8ef11b164bba36142ed386_598x191.png) ## 37. 秒杀时间段:默认为整点。 ![](https://box.kancloud.cn/f57f3b7df3cf92cdd61a02a1f72f49cd_238x87.png) ## 38. 秒杀会场:秒杀商品分类导航。 ![](https://box.kancloud.cn/6b8890cfca1eb8d4ce41ff8e35987735_244x128.png) ## 39. 秒杀广告:秒杀商品广告,可通过促销低价图片吸引用户点击购买。 ![](https://box.kancloud.cn/7e54865584079c3d485fc1014b25786d_613x294.png) ## 40. 秒杀商品:正在秒杀中的商品秒杀情况展示区域。 ![](https://box.kancloud.cn/d7663356ca8d25d214a6308f7c6c4d76_243x280.png)