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

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

相关文章

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性,它们用于控制元素周围的空白区域,本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中,去除a标签(超链接)的下划线的几种方法,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧... 在 css 中,去除a标签(超链接)的下划线主要有以下几种方法:使用text-decoration属性通用选择器设置:使用a标签选择器,将tex

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目