️️耗时一周,肝了一个超丝滑的卡盒小程序

前言

先看看成品效果:
在这里插入图片描述

在上个月,我出于提升自己的英语造句能力的目的,想要找一个阅读或者练习造句类的英语学习 APP,但是最终找了几个 APP 不是不太好用就是要付费。于是我转换思路,找到了一本书,叫《365天英语口语大全》
在这里插入图片描述

书中的每一个章节就是十几段的对话,其中包含了日常生活几乎所有场景的对话,我希望自己能够做到一看到中文,就能够快速的说出恰当的英文句子,从而提升自己的造句能力。

但是我把书放在我的电纸书上看不太方便,我看中英文得来回几页翻着看。所以我想找一个软件,可以将文章分段落,然后可以先将英文遮盖住只看中文,等我自己先尝试造句后再查看正确的英文。

基于我的需求,我觉得那种学习卡片类的 APP 比较适合我,于是我就去苹果商店看了一下,下载了 “闪卡速记” 和 ”闪卡“ 两个 APP 体验了下。
在这里插入图片描述

闪卡速记 APP 的使用体验是有点别扭,很多按钮设计的好小,点击后没有反馈效果,而且操作逻辑感觉怪怪的,核心的学习页面底下有一排功能,但是每一个是我用的上的,又常驻在那里看着心烦。虽然有很多 AI 相关的功能,但是我根本用不上,我尝试用来导入文章生成卡片,但是 AI 有点傻,总是没法很好的生成。

一些体验上的问题我给官方微信号留言了,不过也没回我,我就没接着用了
在这里插入图片描述

闪卡 APP 倒是很不错, UI 很清爽,交互动画也很不错而且支持 Web 端本地导入卡片,我可以用 AI 将文章整理后直接导入成卡片,降低了我很多的制卡时间,非会员的话限制卡盒数量,会员是 48 一年,138 永久,其实不贵,我也开了一年支持下。

后面用了一阵子后,思来想去最终我决定自己也尝试做一个学习卡盒工具,这种轻量化的工具很适合做成小程序,恰好我也很熟悉做小程序,难得有个有用有趣的点子,就开始整理需求了。

我的核心需求是能够实现创建多个卡盒,卡盒中可以有多个卡片,每个卡片有正反两面用于翻面学习,其余就是交互要尽量丝滑流畅,不要太多页面进进出出,打断使用体验。

简单梳理需求后,我就直接开工了!

卡盒小程序有哪些功能

下面给大家介绍一下我做了哪些功能,以及它们的交互设计

添加卡盒

在这里插入图片描述

在首页的右下角,有一个常驻的添加按钮,点击就直接添加一个卡盒,卡盒中默认有一张卡片,卡盒添加的时候会从右侧滑入,并且滚动到新卡盒的位置。

编辑卡盒

在这里插入图片描述

长按卡盒进入编辑模式,可以为卡盒重命名或删除卡盒,卡盒重命名的时候直接在卡盒内进行编辑,点击空白处就保存了。

删除卡盒

在这里插入图片描述

删除卡盒需要在编辑模式下长按删除按钮,之所以设计为长按是为了避免一点到就直接误删除了,弹一个确认框又感觉有点打断当前操作,所以选择了这个交互方式。卡盒删除后会从右侧离开列表。

展开卡盒

在这里插入图片描述

点击卡盒就可以展开查看卡盒中的卡片,展开的时候还会滚动到卡盒对应的位置,展开时会有卡片弹出的效果,此时卡盒中的卡片就全部展示出来了,卡盒的底下还会有一个操作栏,操作栏会固定在屏幕底部,方便你在滚动到卡盒的任意位置都去收起卡盒。

点击收起卡盒卡片会回到原本堆叠的状态,整个效果还是挺丝滑的,这也是我实现这个卡盒小程序最早做的一个功能 Demo。

添加卡片

在这里插入图片描述

点击操作栏中的添加卡片就会在卡盒的后面添加一张新卡,新卡片有默认的名字。

大卡片学习模式

在这里插入图片描述

在卡盒打开的情况下,再次点击卡片就进入大卡片学习模式,此时卡片变成了类似轮播图的展示方式,你可以左右滚动切换卡片,点击卡片就可以翻面查看背面的内容。其他的卡盒会暂时隐藏,避免横向滚动的时候还会纵向滚动。

在点击返回卡盒退出大卡片模式的时候,卡片是从卡盒哪里打开的,还会回到原本打开的位置,不会因为高度变化就需要重新滚动,整体使用体验也不会割裂。

但是这个模式后续可能还是会移动到单独的页面中,手动实现的滑动效果还是不如轮播图,而且为了处理滚动做的特殊处理太多了,后续拓展其他功能会很麻烦,为了效果有点舍本逐末了,后续更新后再给大家看新效果。

编辑卡片

在这里插入图片描述

卡片和卡盒的编辑逻辑都一样,在卡盒打开后,长按就可以进入编辑模式,在内容编辑模式中左上角可以切换正反面,编辑完成后点击右上角完成就保存了。在大卡片模式下长按也可以进入卡片编辑模式。

导入卡片

在这里插入图片描述

导入卡片功能是我自己在使用其他卡盒 APP 的时候发现的一个刚需功能,能够基于某种规则去批量导入卡片会大大简化 APP 间数据迁移的工作量。

这个功能我觉得做的很不错,展开卡盒后点击操作栏中的更多按钮,点击底部弹出的操作栏中导入卡片按钮就进入了导入卡片的表单页面。在表单里我们可以填写两个解析规则:

  • 卡片间的分隔符:默认为换行符 \n
  • 卡片正反面的分隔符:默认为 Tab 符号 \t

然后将你需要导入的内容粘贴进去,就可以根据规则将长段的文本解析成卡片了。有了这样一个功能,我们可以将很多内容让 AI 进行整理输出为固定格式后直接导入成卡片,像我示例中的内容就是使用 Gemini 进行整理后输出的,我日常学习时导入的英文对话文案也是用 AI 去整理的。
在这里插入图片描述

实现过程中的心得

这个小程序的功能虽然不多,但是加起来还是做了接近七天的时间,主要时间都是花都是在交互优化方面,自己的想法总是反复横跳,想要实现更好的交互效果。

其次小程序的坑还是不少的,如果有写过小程序的应该懂这种感受。受限于微信小程序的运行环境,我的动画效果实现的磕磕绊绊,没法像 web 端那样用上各种 Dom 的操作。而且虽然用的是 UNIAPP,但也不能使用 Vue 里提供的 TransitionTransition-Group 组件去很方便的实现动画效果,很多状态都得手动延迟,再动画执行完成后再进行变更,导致代码也没法很干净。其实心中还有更激进的动画效果想实现的,比如每张卡片的动画根据顺序略微延迟执行,展开合起卡盒时使用更复杂的弹簧动画,但是有些效果加上之后比较卡顿,只能碍于现实因素做些取舍。

导入卡片的功能我原本以为会很麻烦,最后发现动画效果并不多,而且是单独的一个页面,结果几个小时就做好了,反倒是卡片的展开关闭,我原以为简单的通过加 transition 再改变卡片位置,让动画自己渲染就好了,结果卡片展开时的各种位置变化,容器高度变化导致卡片偏移,卡片的层级高度等等犄角旮旯的问题调了好久。

做自己的东西其实效率并不高,明明今天想好需要实现一个功能,但是用着用着发现一些小问题又去做额外优化了,但是这也是做自己的东西爽的一点,没有固定的 Deadline,可以把一些自己在意的地方疯狂打磨,。目前实现的效果我还是很满意的,平时不学习我都拿出来戳一戳解压一下。

下一步的计划

目前小程序还在一个很初期的阶段,我还要自己深度的使用一下,把 bug 尽量排一排,然后还有一些待办的特性,大家有好的建议也可以评论区留言一下:

  1. 实现卡盒和卡片的拖拽排序
  2. 支持更多自定义设置,例如大卡片模式的排版,字体大小等等
  3. 实现卡盒内容导出分享
  4. 目前所有的数据都是本地存储,后续考虑实现数据同步到云端
  5. 可能会考虑一些商业化的方式

这篇文章先介绍一下我的小程序整体功能和设计,后续我会把如何实现一个这样的小程序详细写一篇文章,肯定会是一篇很长很干货的文章,欢迎大家关注~

如果大家觉得文章写的不错希望能点个赞支持一下,respect~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929477.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

初学者微服务Nocos快速了解使用

Windows安装部署nacos 1.Windows启动nacos服务 下载nacos安装包:下载地址(需要梯子访问):https://github.com/alibaba/nacos/releases 2.解压安装包,不要将nacos放置在中文路径下 3.在bin目录下双击startup.cmd文件 4.…

Qt Quick 开发基础 + 实战(持续更新中…)

最近更新日期:2024/12/5 目录 一、Qt Quick简介 1.3 新建Qt Quick Application工程 1.3.1 导入Qt资源文件 1.3.2 设置应用图标(Windows系统) 二、QML 2.2 import 2.2.1 import模块 2.2.2 import代码文件 2.3 属性:proper…

jmeter基础07_组件的层级

课程大纲 1. 优先级/执行顺序(一般情况) 同级组件:按组件先后顺序执行。如:同一层的线程组、同一层的http请求。 上下级组件:先执行外层(上级),再执行内层(下级&#xff…

Spring Cloud gateway 路由规则

Spring Cloud gateway 路由规则 文章目录 Spring Cloud gateway 路由规则一、路由常用属性解析1.1 示例配置1.2 属性解析 二、问题分析,springCloud微服务中没有任何路由配置,网关为什么能根据请求转发到相应的业务服务的2.1 开启,用于启用通…

一、理论基础-PSI

之前参加了隐语第2期,对隐语SecretFlow框架有了大致的了解,这次参加隐语第4期,学习下PSI和PIR。 一、PSI定义 首先介绍PSI的定义,PSI(隐私集合求交,Private Set Intersection即PSI)是安全多方计算&#x…

ZLMediaKit+wvp (ffmpeg+obs)推拉流测试

这里使用了两种方式: ffmpeg命令和 OBS OBS推流在网上找了些基本没有说明白的, 在ZLMediaKit的issues中看到了一个好大哥的提问在此记录一下 使用OBS推流,rtmp,报鉴权失败 推流 1. ffmpeg命令推流 官方说明文档地址: 推流规则 rtsp://192.168.1.4:10554…

K8S,StatefulSet

有状态应用 Deployment实际上并不足以覆盖所有的应用编排问题? 分布式应用,它的多个实例之间,往往有依赖关系,比如:主从关系、主备关系。 还有就是数据存储类应用,它的多个实例,往往都会在本地…

openEuler 知:安装系统

文章目录 前言图形化安装文本方式安装 前言 本文只介绍安装过程中需要特别注意的地方,常规的内容需要参考其它文档。 图形化安装 自定义分区: 说明:anaconda 默认分区,在 OSNAME.conf 中进行了配置,openEuler 默认根…

打通Vue3+Flask(python3)+Mysql-实现简单数据交互

一、需要准备的工具 下载python3,Vscode,pycharm(这里用的社区版),phpstudy_pro,Node.js(建议下载长期支持版本,版本不宜过低,比如18,20),Vue.js…

SpringBoot的validation参数校验

文章目录 前言一、引入validation 依赖二、validation中的注解说明 (1)Validated(2)Valid(3)NotNull(4)NotBlank(5)NotEmpty(6)Patte…

Webhook应用指南:借助mc工具实现智能自动化

欢迎来到我的博客,代码的世界里,每一行都是一个故事 🎏:你只管努力,剩下的交给时间 🏠 :小破站 Webhook应用指南:借助mc工具实现智能自动化 前言Webhook 基础知识什么是 Webhook&…

【全网最新】若依管理系统基于SpringBoot的前后端分离版本配置部署

目录 提前准备: 下载源代码 设置依赖 设置后台连接信息 运行后台 运行前端 安装npm依赖 启动前端 登录网页客户端 提前准备: 1、安装mysql 5以上就可以。 2、安装redis. 3、安装npm npm下载地址:https://nodejs.org/dist/v22.12…

科学演进:现代视角下的亚里士多德理论100例

科学演进:现代视角下的亚里士多德理论100例 引言 亚里士多德(Aristotle),公元前384年出生于希腊北部的斯塔吉拉,是古希腊最杰出的哲学家、科学家和教育家之一。他不仅是柏拉图的学生,深入学习了柏拉图的理…

98.【C语言】数据结构之队列

目录 1.定义 2.队头和队尾 3.示意图 4.实现队列 两种解决方法 1.使用双向带头循环链表 2.为单向链表再定义一个尾指针tail 操作队列的函数 初始化函数QueueInit 插入函数QueuePush 删除函数QueuePop 写法1 注意 写法2 计算队列大小函数QueueSize 销毁函数Queu…

SQL项目实战与综合应用——项目设计与需求分析

项目设计与需求分析是软件开发过程中的核心环节,尤其在涉及数据库的应用时,良好的设计将直接影响到项目的可扩展性、性能和维护性。本文将深入探讨数据库设计的最佳实践,结合 C 与 SQL 的实际应用场景,涵盖项目需求收集、数据库设…

TCP的“可靠性”(下)——三次握手四次挥手

目录 建立连接(三次握手)为啥要进行握手??意义何在??常见面试题:为啥必须是三次握手? 断开连接(四次挥手)三次握手和四次挥手的相同点和不同点连接过程中涉及…

煤矿 35kV 变电站 3 套巡检机器人 “上岗”,力破供电瓶颈

近日,杭州旗晟智能科技与甘肃陈家沟煤矿35kV变电站配电室的三套智能巡检机器人线下测试顺利完成,并成功交付使用,这为陈家沟煤矿的电力运维工作注入了全新的活力与强大的技术支撑。 一、项目背景 甘肃陈家沟煤矿35kV变电站于2024年3月13日动…

【AI系统】推理参数

推理参数 本文将介绍 AI 模型网络参数方面的一些基本概念,以及硬件相关的性能指标,为后面让大家更了解模型轻量化做初步准备。值得让人思考的是,随着深度学习的发展,神经网络被广泛应用于各种领域,模型性能的提高同时…

列表| 习题+思维导图

列表习题 1. 已知列表xlist(range(9)),那么执行语句del x[:2]之后,x的值为(D) A.[1,3,5,7,9] B.[1,3,5,7] C.[0,1,3&a…

在freeBSD上开启IPSec内核功能

我使用的版本strongSwan 6.0.0, FreeBSD 14.1-RELEASE, amd64 背景 在freeBSD上配置strongSwan,启动charon时,一直遇到如下错误: unable to set IPSEC_POLICY on socket: Protocol not available过程 此前查阅的某个文档说 freeBSD已经默…