【愚公系列】《微信小程序与云开发从入门到实践》002-如何设计一款小程序

news/2024/12/17 0:48:23/
标题详情
作者简介愚公搬代码
头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。
博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎👍点赞、✍评论、⭐收藏

文章目录

  • 🚀前言
  • 🚀一、如何设计一款小程序
    • 🔎1.小程序的设计原则
      • 🦋1.1 友好礼貌
      • 🦋1.2 清晰明确
      • 🦋1.3 便捷优雅
      • 🦋1.4 统一稳定
    • 🔎2.小程序的适配原则
      • 🦋2.1 基本显示尺寸
      • 🦋2.2 利用PC端大屏优势
      • 🦋2.3 交互方式的差异


🚀前言

在移动互联网的浪潮中,小程序以其便捷、轻量和高效的特性,迅速成为用户日常生活中不可或缺的一部分。但要设计一款成功的小程序,光有创意和灵感是不够的,更需要系统的思考与周密的规划。如何从用户需求出发,构建出符合市场趋势的小程序,成为了开发者和企业主面临的重要课题。

本文将为您提供设计一款小程序的全面指南。我们将从需求分析、用户体验设计,到技术实现和上线推广等多个方面,逐步剖析设计过程中的关键要素。通过具体的案例分析和实践经验分享,我们希望能够帮助您在设计小程序时,避免常见的误区,提升设计的科学性和有效性。

无论您是小程序的开发者、设计师,还是希望了解小程序设计流程的创业者,这篇文章都将为您提供实用的策略和深入的见解。让我们一起探索如何将创意转化为实际应用,设计出一款既能满足用户需求,又具备市场竞争力的小程序吧!

🚀一、如何设计一款小程序

🔎1.小程序的设计原则

在设计一款小程序时,核心要点是“轻”和“快”。微信官方文档提供了一份详细的小程序设计指南,推荐所有小程序产品设计者和开发者阅读,指南网址为: https://developers.weixin99.com/miniprogram/design。

微信官方推荐的小程序设计原则主要包括以下几个方面:

🦋1.1 友好礼貌

概念:设计时应遵循“轻”的特性,不要设计过多无关的元素,以免干扰用户的使用体验。

应用

  • 首页应直接展示核心功能。例如,对于点餐类小程序,首页应展示菜单,让用户可以快速开始点餐,而不是展示广告或其他干扰元素。
  • 页面设计应突出重点,减少不必要的元素,交互流程要简短明确,避免在完整流程中出现干扰用户行为的内容。

🦋1.2 清晰明确

概念:用户进入小程序后,应明确当前页面的功能和位置,提供清晰的导航和反馈。

应用

  • 页面应有明确的标题和功能说明。
  • 提供返回按钮,确保用户可以轻松回到之前的页面,使用框架提供的导航组件。
  • 减少用户等待时间,对于无法避免的等待,应提供明确的加载提示。
  • 在出现异常或错误时,提供重试和退出选项,避免用户卡在当前页面。

🦋1.3 便捷优雅

概念小程序设计应适应移动设备的特点,减少用户输入,提升操作便捷性。

应用

  • 减少用户输入,优先使用选择代替输入。
  • 交互控件应布置合理,预留足够的缓冲距离,防止误操作。

🦋1.4 统一稳定

概念:保持与微信一致的设计风格,确保用户体验的连贯性和稳定性。

应用

  • 小程序的UI设计应与微信本身保持一致,避免风格突兀。
  • 小程序内部各页面的设计风格应统一,确保用户体验的无缝流畅。

通过遵循这些设计原则,可以有效提升小程序的用户体验,使其更加“轻”和“快”,从而满足用户的高效使用需求。

🔎2.小程序的适配原则

小程序主要运行在移动端设备的微信上,但目前PC版本的微信也已经支持打开和使用朋友分享的小程序。由于PC的屏幕比例和尺寸与移动端设备差异较大,为了确保用户在不同设备上都有良好的体验,适配工作是非常必要的。

🦋2.1 基本显示尺寸

在开发小程序时,如果未对PC端进行额外适配,默认情况下:

  • 竖屏小程序将总是以414x736的尺寸显示。
  • 横屏小程序将始终以768x1024的尺寸显示。

这种固定尺寸在PC端显示时,会显得页面内容被限制在一个小窗口中,没有充分利用PC端的大屏优势。

🦋2.2 利用PC端大屏优势

PC端屏幕相比移动端要大得多,这是一种优势,可以让用户在屏幕上看到更多内容。如果小程序不对这些空间进行利用,将会浪费展示资源。在进行PC端适配时,需遵循以下原则:

  • 合理布局:不能简单地将页面中的元素等比放大,尤其是图片,因为这样可能会导致分辨率降低,影响完整性和可读性。
  • 布局调整:根据屏幕尺寸适当修改布局方式,例如将单列布局转换为双列或多列布局,以充分利用屏幕空间。

🦋2.3 交互方式的差异

PC端和移动端的交互方式有很大不同。小程序框架默认将移动端的手势在PC端进行了相应的转换,例如:

  • 手指轻点手势转换为鼠标左键点击。
  • 手指长按手势转换为鼠标右键点击。
  • 手指拖曳手势转换为鼠标按住拖曳。

需要注意的是,某些手势在PC端是难以实现的,例如双指捏合、旋转等手势没有对应的操作方式。因此,在适配PC端时,这类手势要慎用。


http://www.ppmy.cn/news/1555720.html

相关文章

汽车保养系统+ssm

摘 要 由于APP软件在开发以及运营上面所需成本较高,而用户手机需要安装各种APP软件,因此占用用户过多的手机存储空间,导致用户手机运行缓慢,体验度比较差,进而导致用户会卸载非必要的APP,倒逼管理者必须改…

js 应用的几大原则 及 应用实例

文章目录 js 应用的几大原则vue3 中原则应用体现react 原则应用体现 js 应用的几大原则 单一职责原则(SRP) 解释:一个函数或者一个对象应该只有一个职责。这意味着函数应该只做一件事情并且把它做好。例如,一个函数只负责计算两个…

JAVA爬虫获取1688关键词接口

以下是使用Java爬虫获取1688关键词接口的详细步骤和示例代码: 一、获取API接口访问权限 要使用1688关键词接口,首先需要获取API的使用权限,并了解接口规范。以下是获取API接口的详细步骤: 注册账号:在1688平台注册一…

npm、yarn、pnpm三者的异同

这个表格将会说明一切: 特性npmyarnpnpm依赖管理方式扁平化管理,嵌套依赖树,可能重复安装扁平化管理喝符号链接,同版本只能安装一次基于硬链接喝符号链接的内容寻址存储安装速度最慢中等(并行安装)最快(得益于硬链接的复用)磁盘空…

舌头分割数据集labelme格式2557张1类别

数据集格式:labelme格式(不包含mask文件,仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数):2557 标注数量(json文件个数):2557 标注类别数:1 标注类别名称:["tongue"] 每个类别标注的框数&#xff1…

CSS文本属性

字间距 letter-spacing需要为合法的尺寸单位可以设置为负值,此时字间间距会比正常值小并重叠起来可以为10px、-4px、normal(正常字间距) div{letter-spacing: 10px;}行高 指的是行与行之间的间距,是一行的高度,不是行…

嵌入式跨平台工具链终极方案

嵌入式跨平台工具链终极方案 1. 解决烦人的编译,从编译器开始2. T0级别的代码编辑器IDE3. git linus之父开发神奇的分布式代码管理工具 我们从8051开始学习嵌入式,用过了不少IDE,比如经典的keil和IAR,但是这些IDE都不便宜&#xf…

ARM/Linux嵌入式面经(五三):奥比中光

文章目录 1、自我介绍2、pwm输入捕获定时器怎么工作的PWM输入捕获定时器的工作原理面试官可能追问的深入问题3、虚拟地址和物理地址4、C语言的staic、const、extern、strlen、32位计算机结构体对齐sizeofstaticconstexternstrlen32位计算机结构体对齐sizeof5、C++的多态、重载多…