微信小程序小白前端入门学习记录-友邻小程序(一)

2023-10-14 13:20

本文主要是介绍微信小程序小白前端入门学习记录-友邻小程序(一),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

此项目在作品集中的封面 这是在5月至7月间进行的从交互设计作业衍生一个项目,想解决独属于租户间的沟通问题。

首先我本科专业是工业设计,但是本科的教育时常令我感到困惑。

我在课外学习板绘和手绘的时候,最常听到的话就是,很多时候并不是因为你不会画,而是因为你根本就不理解要画的物体,举个例子,如果你并不知道人体结构,只是按照儿童画将其简单地将人体分为简单的几何体,那由你的认知所反映出的画作必然是幼稚简单的(当然毕加索在后期的画作也体现了艺术的追求是没有统一论调的),作为艺术家,必然要掌握人体,光影,材质,色彩甚至心理学(诸如格式塔)等等的知识,你所拥有的知识越多,你的作品内涵便越深,越有味道。这一点同样可以推及到其他领域。
曾经炫技式的板绘作品,但是对产品的理解不深,其实有很多错误,只是看起来像回事
在学校里时,书本统一的论调就是设计师要高瞻远瞩,要全面考虑问题,要发现问题解决问题,其所站的位置是非常高的,老师们也并不执着教授于各种技法,一再强调设计思维,所以一群学设计的孩子在涉世未深的情况下利用建模软件和渲染软件提出自己各种奇思妙想,这没有什么不好,但是我时常觉得这不过一场游戏,因为所做的作品往往因为深挖不够而显得幼稚,我觉得我们不该执着与奇思妙想,而更应该用很长的周期去深掘一个小设计,一步步积累,才有机会触及真正的大设计,书本里提到的设计。

马原中,对于实践与认识的有很多论述,实践与认识往往是脱离不开的。我在学习交互设计时,如果不需要产出实际的产品,即使使用了交互设计的设计方法,获益又有几何呢?在本科学习阶段缺乏实践的机会(其实也有一些模型制作的课程),这该是许多设计学生面临的问题。所以我一直希望参与一些项目去达成目标,但是由于认识到这点比较迟,相关项目也不好找,所以时值大三,遗憾很多,但是亡羊补牢,犹为不晚。

此外,我本来是工业设计的学生,我们本科是更多地学习工程材料,工程力学,数字化产品设计等与制造业相关的知识的,不过制造业行业壁垒深,考虑的东西也多,我此前参加机械设计创新大赛,光是烧掉的银子就令人肉疼,如果开不出发票还得自己担。程序的初级开发,一台电脑就足以实现目的,顶多去租个服务器(对于每个刚入行的机械设计师会烧掉老板多少多少银子的事也略有耳闻)。正好,一直以来都对于程序员所做的事情有一定的好奇,就打算学习web开发,微信小程序算是简单的,就作为我梦想的入口吧。

为什么用户只靠简单的点触就能达到目的?我一直好奇这个问题,不过我在探寻的过程中,得到的答案并不完整,在理清了产品原型,进行了交互设计和UI设计后,技术方面只使用了HTML,CSS,Javascript以及一些简单的数据库设计的知识来解决问题,还因为微信小程序提供的接口,云数据库和云函数省去了不少麻烦事。

但即使是不完整甚至有可能错误的答案,我也有了一些认知,如果说UX设计师所做的事是将事先告知程序员数据要摆放在哪里,UI设计师告知数据要以怎样的视觉元素呈现,那么程序员所做的事情就是让数据以合理的形态各就其位,这其中包括对数据的处理,对流程的优化等等的事情。

除此以外,我也清晰地认识到,曾以为像魔法一样的互联网产品其实也是数据可视化的一个分支。纵使UI和UX设计师规划得再好,如果数据对用户的价值不高,那么这个产品就会向用户露出原本的模样,显得苍白无力,产品本来是多维的,但是在这种时候变成了一张张页面,一本不想去翻看的书,这是对产品的降维打击。同样的,在数据排布杂乱无序,视觉效果令人不忍卒读时,数据显现不出其价值,同样的事也会发生。

项目介绍

对于项目的背景,作品集中有大段的描述,放一个故事板来简单地解释一下
要解决什么样的问题 项目的主打的第一功能是室友匹配测试,作品集里未曾介绍是如何实现的,算是一个很大的漏洞,我想在这里解释一下,我也有查询心理测试的资料,想制作一份逻辑完满的测试,可个人能力有限。

有兴趣的人可以从知乎问题 心理测试题是如何设计的?中找到答案

所以匹配度测试也只是噱头,友邻要做的是

1.让用户在室友招募时,对彼此的情况信息有一个快速的了解;

2.旁敲侧击地提醒用户如何与人交往,合租时要注意哪些问题;这点可以从部分测试题中看出来,与其说是测试,不如说是价值观的输出。

如果用户能够参与进来,一起补充这样一份测试题,在保证其题量不会多至惹人厌烦的情况下,能否代替合租前的约法三章呢?成为每位合租新人的教学材料?或者被纳入租房相关app的一部分?

项目主打的第二功能就是关于招募信息的管理,非常庸常,不做过多介绍。

用户流程图

主要功能的流程图

低保真线框图

1
2

设计稿

UI设计稿

页面前端代码梳理

不久前还发现在自己的手机上可以正常使用的小程序,在他人的手机上出现了一些问题,所以在考虑对一些页面的代码进行复盘。还有很奇怪的就是,这个项目快完成了,我对所学的内容就感到越不真切,这再次让我感觉复盘的重要性,然而也算到了大三这个关键的时间节点,文章或许会时不时地更新。

我的学习路线是这样的,首先在B站上学习了Js,Html,Css,然后以七月老师的旧岛小程序为教程学习了前端开发所需要的进阶知识后就开始敲代码,没有来得及去接触一些框架。

所以值得一提,我的代码水平很是有限,参考了无数CSDN的文章,我记得我的浏览器有一次打开了200多个页面,全是在遇阻时查询的资料。

文章的第一次更新就到这里为止好了,希望能给跟我一样的小白提供一些帮助。

这篇关于微信小程序小白前端入门学习记录-友邻小程序(一)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/210768

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

Python UV安装、升级、卸载详细步骤记录

《PythonUV安装、升级、卸载详细步骤记录》:本文主要介绍PythonUV安装、升级、卸载的详细步骤,uv是Astral推出的下一代Python包与项目管理器,主打单一可执行文件、极致性能... 目录安装检查升级设置自动补全卸载UV 命令总结 官方文档详见:https://docs.astral.sh/

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

统一返回JsonResult踩坑的记录

《统一返回JsonResult踩坑的记录》:本文主要介绍统一返回JsonResult踩坑的记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录统一返回jsonResult踩坑定义了一个统一返回类在使用时,JsonResult没有get/set方法时响应总结统一返回

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,:本文主要介绍Go学习记录之runtime包的... 目录前言:一、runtime包内容学习1、作用:① Goroutine和并发控制:② 垃圾回收:③ 栈和

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行