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

前言

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

在上个月,我出于提升自己的英语造句能力的目的,想要找一个阅读或者练习造句类的英语学习 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~

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

aardio - 汉字笔顺处理 - json转sqlite转png

本代码需要最新版 godking.conn 库,请自行下载! 如果没有安装 odbc for sqlite 驱动,可以使用 godking.conn.driver.sqlite3.install() 安装。 也可以在此下载自行安装:http://www.chengxu.online/show.asp?softid267 1、将js…

Pick:一款安全易用的密码管理器

Pick:一款安全易用的密码管理器 pick A secure and easy-to-use CLI password manager for macOS and Linux 项目地址: https://gitcode.com/gh_mirrors/pick/pick 在当今数字化时代,密码管理已成为每个人不可或缺的一部分。为了保护您的在线账户…

C/C++当中的内存对齐

一:为什么要存在内存对齐 对与计算机而言,一次性可以取出处理的单元大小为字,在32位系统下,一次性可以取出4个字节,而在64位系统下,一次性可以取出8个字节,而一个地址对应一个内存单元&#xff…

Elasticsearch ILM 故障排除:常见问题及修复

作者:来自 Elastic Stef Nestor 大家好!我们的 Elasticsearch 团队正在不断改进我们的索引生命周期管理 (index Lifecycle Management - ILM) 功能。当我第一次加入 Elastic Support 时,我通过我们的使用 ILM 实现自动滚动教程快速上手。在帮…

VBA信息获取与处理第四个专题第二节:将工作表数据写入VBA数组

《VBA信息获取与处理》教程(版权10178984)是我推出第六套教程,目前已经是第一版修订了。这套教程定位于最高级,是学完初级,中级后的教程。这部教程给大家讲解的内容有:跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互…

C# 命名空间(Namespace)

文章目录 前言一、命名空间的定义与使用基础(一)定义语法与规则(二)调用命名空间内元素 二、using 关键字三、嵌套命名空间 前言 命名空间(Namespace)在于提供一种清晰、高效的方式,将一组名称与…

数字图像处理内容详解

1.对比度 最大亮度 / 最小亮度 2.邻域 m邻接:对于像素p和q,如果p和q四临接,或p和q八临接且两者的四邻域的交集为空 通路:如果俩点全部是K邻接(K代表4,8,m),则说明存在K…

流媒体之linux下离线部署FFmpeg 和 SRS

前言 用户对网络做了限制,只能访问指定的网址,和没网没啥区别,导致无法连接外网,无法获取安装包,还有一些编译需要的开源工具 用户需要用平台查看库房的海康摄像头实时监控,只能在库房里一台纯净的ubantu…

【鸿蒙生态崛起】开发者如何把握机遇,应对挑战,打造卓越应用体验?

文章目录 每日一句正能量前言鸿蒙简析鸿蒙生态的认知和了解鸿蒙生态的崛起分析 鸿蒙生态下开发时遇到的挑战开发工具不完善技术难度生态竞争抓住机遇、应对挑战 鸿蒙生态未来的发展趋势1. 全场景智慧生活的推动者2. 技术创新的引领者3. 开放合作的倡导者对鸿蒙生态和开发者的建…

MySQL 主从同步一致性详解

MySQL主从同步是一种数据复制技术,它允许数据从一个数据库服务器(主服务器)自动同步到一个或多个数据库服务器(从服务器)。这种技术主要用于实现读写分离、提升数据库性能、容灾恢复以及数据冗余备份等目的。下面将详细…

第30天:安全开发-JS 应用NodeJS 指南原型链污染Express 框架功能实现审计0

时间轴: 演示案例: 环境搭建-NodeJS-解析安装&库安装 功能实现-NodeJS-数据库&文件&执行 安全问题-NodeJS-注入&RCE&原型链 案例分析-NodeJS-CTF 题目&源码审计 开发指南-NodeJS-安全 SecGuide 项目、 环境搭建-NodeJ…

Linux:network:wireshark:IO图尖峰实例

从下图可以看出来,这个尖峰还是很明显,比平均值大出不少。这个图是之前发生问题时的一个例子,放到这里做为参考。 在看峰值的时候,需要注意,时间间隔单位,一秒的间隔和100毫秒的间隔看到的信息可能不一样,比如上图,按照100毫秒展示差距很大,平均不到200,峰值到了70…

MySQL——数据类型

一、常见的数据类型及分类 其中上述的数值类型包含了整形和浮点型,文本、二进制类型主要是字符串类型。 整数类型(Integer Types): TINYINT:范围为-128到127或0到255(无符号),用于…

在Docker中部署禅道,亲测可用

1、确保centos中已安装docker docker -v 2、启动docker systemctl start docker 3、可设置docker开机启动 systemctl enable docker.service 4、获取最新版禅道开源版镜像 docker pull idoop/zentao 5、运行镜像生成禅道容器【创建 /data/www /data/data 目录】 doc…

【CSS in Depth 2 精译_065】第四部分:CSS 视觉增强技术 + 第 11 章 颜色与对比概述 + 11.1 通过对比进行交流

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 ✔️ 11.1.1 模式的建立 ✔️11.1.2 还原设计稿 ✔️ 11.2 颜色的定义 文章目录 第四部分 视觉增强技术 Visual e…

中建海龙:科技创新引领建筑业革新,铸就行业影响力

在建筑业这个古老而又充满活力的行业中,中建海龙科技有限公司(以下简称“中建海龙”)凭借其卓越的科技实力和一系列荣誉奖项,正逐步确立其在建筑工业化领域的领导地位,并对整个行业产生了深远影响。 中建海龙自成立以来…

【CDH国产化替代案例】全面简化架构,降低成本,大幅提升数据处理效率

友情链接: 【数据处理效率提升实践】ArgoDB如何助力企业全面实现数据处理效率最大化?【最新案例】ArgoDB新功能之读写分离,助力某医药集团打造高效数据中心,消除传统方案的灵活性限制,确保响应时间的可预测性【指标查…

Electron + Vue 简单实现窗口程序(Windows)从零到一

前言 想做一个桌面应用程序,一直没有找到简单快速可上手的框架。刚好有点前端的底子,就发现了Electron。关于Electron的介绍,请移步 https://www.electronjs.org/ 查阅。 简单来说,引用官网的话,Electron是一个使用 …

Ansible 运维工具

安装 apt install ansible /etc/ansible/hosts , 指定密码或密钥访问分组机器 [k8s_masters] master0.c0.k8s.sb[k8s_nodes] node0.c0.k8s.sb node1.c0.k8s.sb[k8s:children] k8s_masters k8s_nodes[k8s_masters:vars] ansible_ssh_usersbadmin ansible_ssh_pass"***&q…

Leetcode经典题5--轮转数组

题目描述 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 输入输出示例 : 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右…