小程序移动端设计UI(一)预约小程序——东方仙盟练气期

代码

.service-list {display: flex;flex-direction: column;gap: 12px;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 180px;grid-template-rows: 140px;gap: 8px;}.service-item {background-color: #fff;border-radius: 10px;padding: 15px;box-shadow: 0 2px 6px rgba(255,107,129,0.15);display: inline-block;width:30%;}

  .service-item {width:30%;}

新样式

代码

  .service-list {display: flex;flex-direction: column;gap: 12px;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 180px;grid-template-rows: 140px;gap: 8px;}.service-item {background-color: #fff;border-radius: 10px;padding: 15px;box-shadow: 0 2px 6px rgba(255,107,129,0.15);display: inline-block;/*  width:30%;*/}

二列

在东方仙盟的修仙世界里，练气期弟子们开始接触各种基础的修仙技艺，努力为自己的修仙之路打下坚实基础。对于初学者而言，手机小程序的 UI 设计就如同练气期修炼的一门基础法术，需要耐心钻研和反复练习。现在，让我们以未来广发 1 店预约小程序的 UI 设计为例，开启这场如同练气期修炼般的奇妙旅程。

整体布局：构建修仙 “洞府” 框架

整个小程序的布局就像是东方仙盟练气期弟子精心打造的修炼洞府，各个部分都有其独特的功能和作用。页面从上至下分为顶部头图、服务列表、底部导航三个主要区域，就如同洞府中的不同空间，各司其职，为用户提供便捷的预约服务体验。

顶部头图：洞府的神秘入口

顶部头图区域是小程序给用户的第一印象，如同洞府那气势恢宏的入口。它以一张精美的美容美发店铺头图为背景，占据了页面的显著位置，让用户一眼就能感受到店铺的风格与氛围。店铺名称 “未来广发 1 店” 则醒目地展示在头图中央，仿佛是洞府入口处那块刻有洞府名号的巨石，清晰地告诉用户这里是何处。这一区域通过设置相对定位和绝对定位，以及使用 overflow: hidden 来确保图片的展示效果，就如同练气期弟子精心布置洞府入口，让其既美观又有序。

服务列表：洞府内的法术秘籍阁

服务列表区域是小程序的核心部分，犹如洞府中存放法术秘籍的阁楼，为用户展示各种美容美发服务项目。在这里，我们使用了 display: grid 布局，这对于初学者来说是一个强大而又需要熟练掌握的 “法术”。

grid-template-columns 属性设置了列的布局方式，代码中先设置为 repeat(3, 1fr)，尝试以三列的形式展示服务项目，使页面看起来更加紧凑和丰富，仿佛阁楼上整齐排列的秘籍。但之后又设置为 repeat(2, 1fr)，这可能是在实际设计过程中，发现两列的布局更适合手机屏幕的尺寸，能让每个服务项目展示得更清晰，用户操作起来更加方便，就像练气期弟子在修炼过程中不断调整法术的施展方式，以达到最佳效果。

grid-template-rows 属性设置了行高为 180px，确保每个服务项目在垂直方向上有足够的空间展示其内容，包括服务名称、描述、价格和预约按钮，如同秘籍阁中每本秘籍都有足够的空间记录法术的详细信息。每个服务项目作为一个独立的 “秘籍单元”，使用 service-item 类进行样式设置，背景为白色，带有圆角和阴影，就像一本本装帧精美的秘籍等待用户去探索。

底部导航：洞府的传送法阵

底部导航区域如同洞府中的传送法阵，方便用户在不同功能页面之间快速切换。通过固定定位将其放置在页面底部，无论用户在页面的什么位置操作，都能轻松访问。导航栏由四个图标和文字组成，分别对应首页、预约、商城和我的页面，就像法阵上的不同符文，指引着用户前往不同的功能空间。每个导航项通过 nav-item 类设置样式，当用户点击某个导航项时，页面会根据其 data-url 属性跳转到相应的页面，仿佛启动了传送法阵，将用户瞬间传送到目的地。

样式设计：为洞府增添神秘色彩

在样式设计方面，就如同练气期弟子运用灵力为洞府点缀各种奇妙的装饰，让其更具魅力。

色彩搭配：营造修仙氛围

整个页面以浅粉红背景（#fff0f5）为主色调，给人一种温馨、舒适的感觉，仿佛置身于充满灵气的修仙之地。标题使用深粉红（#e63946）和粉红（#ff6b81）作为强调色，突出重点信息，就像洞府中闪耀着神秘光芒的法宝，吸引用户的注意力。按钮采用粉红（#ff6b81）作为背景色，鼠标悬停时加深为深粉红（#e63946），既符合整体色彩风格，又通过颜色变化给予用户操作反馈，如同修仙者施展法术时光芒的闪烁，引导用户进行操作。

文字样式：清晰传达信息

文字样式简洁明了，不同部分使用不同的字体大小、颜色和粗细来区分层次。服务名称用较大且加粗的字体展示，让用户一眼就能识别服务内容；服务描述和价格则使用相对较小的字体，提供辅助信息，就像秘籍中对法术的详细说明和注意事项，帮助用户更好地了解服务项目。

对于东方仙盟练气期的初学者来说，手机小程序的 UI 设计是一个充满挑战但又极具乐趣的过程。通过精心构建布局和设计样式，就像在修炼过程中不断打磨自己的法术技巧，最终打造出一个功能与美观兼具的 “数字洞府”，为用户提供优质的预约服务体验。在这个过程中，熟练掌握 display: grid 等布局方式，就如同熟练掌握一门重要的基础法术，是迈向更高层次 UI 设计的关键一步。

阿雪技术观

让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量

Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.