-
让品牌有温度、有情感
专注品牌策划15年
小程序首页设计（小程序页面制作）
发布时间：2023-03-13 13:24:35
稿源：
创意岭 阅读：
945
问大家
大家好！今天让创意岭的小编来大家介绍下关于小程序首页设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
ChatGPT国内免费在线使用，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等
只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端
本文目录:
一、二、支付宝小程序前端样式的设计.acss样式详解
在视频中已经说过了，小程序的设计思想和原生app的设计思想颇为相似，基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由 样式来决定的 。我们知道在web开发中样式是在css文件中规定的，叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css，在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。
那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。 上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的，让我们一一看看
第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米，在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看，LED屏幕上一个一个的发光二极管可以想象为像素。
我们知道手机屏幕有大有小，就拿iPhone来说，iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比：
加入有一个160px宽度的红色矩形在这两种手机中的位置如下：
rpx（responsive pixel）可以根据屏幕宽度进行自适应。如何自适应呢？看下边的分析：
看下图：
在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式，而第三方库的样式是保存在第三方包中的，我们不可能全部复制到我们的.acss文件中，那最好的办法就是导入了。在样式表中导入其他外联样式表。
当然仍旧支持内联样式和class属性制定样式类，如
选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是：
※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用；
※ 不能使用属性选择器，例如,以下写法不被支持：
我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器，就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如：
可以通过 page 元素选择器来设置页面容器的样式，比如页面背景色:
在你想改变页面容器的页面中定义该样式也可以，全局定义也可以，例如我想将test这个页面的页面容器背景设置为蓝色，就可以再pages目录下的test目录下找到test.acss在其中定义page的样式
下节是视图层讲解，如果有任何问题可以再下方给我留言或者发邮件到 weiyongqiang@weiyongqiang.com 我在收到邮件后会回复。
二、如何设计一个小程序
第一：在开始设计之前，请熟读微信小程序的官方文档
可能很多人会说，第一点这不是废话吗？作为小程序的开发者肯定需要读完官方文档再来设计啊，但笔者这里要强调的是熟读，根据笔者自己的经验，很多PM在开发之前只是把微信提供的官方文档粗略的过了一遍就去设计产品了，并没有Get到其中的精髓。笔者认为小程序官方文档里边的内容，不仅仅是为了让大家统一标准去设计小程序，更多的是为了拉新甚至增加用户的留存率，具体请大家熟读官方文档，这里就不详细说明啦！
第二：注重新用户引导，不要轻易打破用户已经养成的使用习惯
很多PM在设计的时候可能会忽略这一点，认为很多用户已经被市场教育的足够聪明了，但是忽略了，很多人接触我们的产品可能是首先是先接触到我们的小程序，然后感觉小程序好用，最后才下载的APP。这一前一后就足以说明新用户引导的重要性了，尤其是用户在第一次登录小程序的时候，引导的内容一定要足够醒目，这也是提升用户体验的关键因素，做小程序尽量要减少复杂或者特殊的交互模式的设计，笔者建议还是保留用户已经在APP上养成的习惯，除非必要否则不必要做轻易的创新。必要时可以进行足够的引导。
第三：小程序用户路径必须单一
为什说小程序的用户路径必须单一呢？因为很多中小型企业在企业发展初期，并没有足够的流量渠道支持，那么最好留存用户的方法是什么呢？就是把核心功能设计完美，让用户使用小程序能高效的解决问题，不要做大而全，要做小而精，把APP上一些功能模块该砍掉就砍掉，有些功能该弱化就弱化，一切以用户能高效快速解决问题为出发点设计，如果有必要甚至可以把APP上多个业务线上的功能模块拆分成多个小程序来设计(很多企业已经开始做小程序矩阵了)，功能简化足够专注，才能让用户有更优质的产品体验。
第四：尽量减少页面跳转
笔者认为这是做小程序很重要的一点，因为小程序本身的特点就是即用即走，很多用户使用小程序就是为了能快速解决问题，如果小程序内页面层级过多，会增加用户的学习和使用成本。能放到一个页面就放在一个页面，让用户始终清楚自己在小程序内的位置，增加用户使用产品的安全感。比如最近疫情期间大家使用的“北京健康宝”小程序，所有功能模块都集中在一个页面展现。用户打开“健康宝”就能快速定位自己需要的功能，从而做到快速配合防疫检查。
三、ios 系统怎么把微信小程序添加到桌面
ios 系统把微信小程序添加到桌面的方法如下：
1、在微信里点击打开小程序。
2、进入小程序后，点击想要添加桌面的小程序。
3、进入指定的小程序后，点击右上角的图标。
4、在弹出的对话窗内点击“添加桌面”。
5、然后返回手机桌面就可以看到已经添加到桌面了。
四、小程序制作软件
一、知晓云
知晓云是爱范儿旗下继知晓程序（minapp.com，媒体和小程序商店）后又一个基于微信生态的核心产品。
是国内第一个专注于微信小程序开发的BaaS（Backend as a Service）产品，它可以让开发者更快、更轻松地做出优美、稳定的小程序，且不失灵活性。
二、微信官方小程序开发工具
作为官方小程序开发工具，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。因为是官方工具所以微信官方小程序开发工具有着其他第三方平台不可比拟的天然优势。
三、Coolsite360
CoolSite360推出的小程序编辑器，可以帮助设计师无需编写wxml以及wxss代码，通过小程序可视化编辑器就可快速设计小程序交互UI。使用小程序编辑器设计的页面，可以方便地在微信及浏览器上预览，便于前期的原型展示分享。设计好的页面，可以一键导出符合小程序标准的代码，可直接进行功能开发。
四、即速应用
严格来说，即速应用不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的小白，一定会爱上即速应用这款工具的。
以上就是关于小程序首页设计相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
如何做一个自己的微信小程序（如何做一个自己的微信小程序账号）
个人可以开网店吗-怎么办理（个人可以开网店吗-怎么办理手续）
赣公网安备 50019002502384号
