Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
layout: post
title: 注册安装GitHub学习经验总结
date: 2020-11-01
author: 张俊妮
categories:
- 设计部
tags:
- GitHub
---
## 前言

这周主要接触了如何注册安装GitHub以及clone自己的仓库到电脑上。虽然已经给出了大致的步骤和流程,但是在实际操作的过程中还是遇到了各种各样的问题。已有的操作方法这里就不再赘述,这里主要想总结一下我遇到的一些问题,以及我后来是怎样去解决的。

## 1.找电脑端的安装包(GitHub Desktop)

最开始我看群里没有发安装包,所以我就去了它的官网(https://github.com/) 找了一圈,发现主页上只有一个注册或者登录界面,往下滑有一个企业版的,好像要收费,然后我就有点迷。然后我又去群里问了大家,收到了GitHub Desktop的安装包,于是我通过这个安装包完成了下载和安装。在后来的操作中我发现可以先在官网注册,然后按步骤提示进行操作,最后会有一个GitHub上面所有的应用列表,也可以在里面找到GitHub Desktop的安装包。其中有一点要注意的就是GitHub的官网对浏览器有要求,有的浏览器打不开,建议使用谷歌浏览器。


## 2.如何fork自己的库

首先要从工作室的网址进入,然后点右边的fork,然后点那个绿色的下载按钮code,会显示三个选项,选择SSH,点第一个代码复制,打开你电脑上安装的GitHub Desktop,选择File,然后点Clone那个选项。如果顺利的话就直接等待Clone完成就行啦。如果出现Authentication failed(身份验证失败),解决方法见下一条。


## 3.Authentication failed(身份验证失败)怎么解决

我在网上也找了很多方法都试了,还是没用,折腾了一个多小时,电脑直接没电关机了,差点自闭。后来回到寝室充上电,在电脑端到处点到处试,就在主界面上,点到了一个filter的东西,里面刚好也有一个clone,我就点了,然后就成功了,整个过程不到两分钟!!!(幸福来得太突然了呜呜呜~)反正大概就是这样。不一定适合每一个人,只能说当你碰上这种状况的时候提供一点经验。

## 总结

因为刚刚开始接触这些工作,还没有进入正式的学习,所以内容大概就是这些了,期待在今后的学习中获得更多的成长与经验。
33 changes: 33 additions & 0 deletions docs/views/design/2020-11-08-Axure入门学习笔记.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
layout: post
title: Axure入门学习笔记
date: 2020-11-08
author: ZJN
categories:
- 设计部
tags:
- Axure
---

## Axure简介
Axure RP是一款专业的快速原型设计工具。Axure,代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。
Axure RP的使用者主要包括商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师、UI设计师等,另外,架构师、程序员也在使用Axure。

## Axure安装
可以在Axure的官网上找安装包进行下载,一般推荐下载企业版的,因为功能更强大。下载完成之后可以百度搜索密钥进行授权,授权完成后即可终身免费使用。

## Axure的工作界面
打开Axure之后,可以看到它的一个工作界面。我习惯从视觉上把它划分为四大块。首先是顶部的主菜单和工具栏,然后是左边的页面图层以及原件母版。中间是由很多方格状的像素组成的画布,右边是页面注释,样式编辑和交互区。
+ 顶部视图菜单——标尺-网格-辅助线-网格设置里面可以设置画布网格的像素大小,一般网页大小为1200像素,单个网格的大小可以设置为200像素。
+ 顶部工具栏右侧有一个预览按钮,可以随时预览自己设计的网页。工具栏-插入-钢笔工具可以绘制自己想要的形状
+ 左侧的页面区可以新建页面,建立文件夹,把同一个网站的页面放在一个文件夹里便于打包整理。还可以按Tab键进行分层。概要那里就是图层顺序,可以在那里调整图层的顺序和重命名图层名称。
+ 左侧的元件里面包括了基本元件,表单元件,菜单表格和标记元件四大块,目前我只用到了基本元件,其他的可以在今后的学习中继续探索。同一个网站有的页面会有很多相同的内容,如果一个一个去改就很麻烦,这个时候就可以用母版来帮忙。选择一个页面相同的内容,转化为母版,直接在母版上改,所有页面上相同的内容都会被同时修改,十分便捷。
+ 中间的画布主要就是用来放元素的,然后把鼠标放在边上拖动就可以把隐藏的参考线拖出来。
+ 右侧的样式区可以修改图层的名称,编辑样式。交互区可以设置触发事件和动作,做一些简单的动画效果。之前在网上查了一下,有些动画可能还需要涉及到元件区里面的动态面板。因为现在还比较小白,看了一些教程但是还是没有学会,希望今后可以把它学会。
## 学习成果
这次的练习是选择自己喜欢的网页或者小程序,模仿着做一个作品出来。我选择的是北京大学的官网,因为它的配色很中国风,设计也很简洁大气。然后我就结合网上的教程自己摸索着做了一个下午加晚上一些时间终于完成了一页。
## 遇到的困难
这次遇到最大的困难就是做动画效果。一些动画效果不知道应该是怎么做出来,然后自己试着做了一下,经过不断的试错和纠正,大致有了一个雏形,但是和官网上呈现出来的效果还是有差别。还有就是做完之后预览发现不能全屏显示,两边是空出来的。咨询了一下部长之后才知道原来出现这种情况是很正常的,可以根据页面大小适当地进行放大。
## 总结
这周主要就是Axure的入门学习,今后会继续练习并提升自己的操作能力。
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
layout: post
title: 会议室预约小程序页面初步构想
date: 2020-11-15
author: ZJN
categories:
- 设计部
tags:
- 小程序,UI设计
---

# 一、功能要求

## 1.注册/登录
+ 学院所有师生
+ 用职工号或学号登录,密码自定
+ 注册时需要填报手机号

## 2.申请规则设置
+ 学生:提前一天(两天)申请,需要教师审批,需要写明申请时间和申请事由。申请时间超过半天的需要额外审批。
+ 教师:提前一天(两天)申请,不需要审批,需要写明申请时间和事情事由。申请时间超过半天的需要审批。
+ 超级权限(暂时设置5名)不受提前申请限制,不需要审批,需要写明申请时间和事情事由。
+ 申请时间:每天9:00-24:00
+ 先申请先得,已经被占用的会议室不得重复申请。
+ 谁申请谁负责

## 3.界面展示
+ 在一个页面中展示一周内所有会议室,所有时间段的空闲和占用情况
+ 点击每个单元格可以显示当天该会议室的详细情况。

## 4.查询功能
+ 按时间(日期)查询
+ 按会议室号查询(可供预约的会议室有:通博楼B420、B421、B423)

# 二、初步构想

## 1.个人主页
+ 点开小程序,首先弹出的是个人主页,
+ 顶部有注册/登录按钮。点击注册/登录,即可弹出注册/登录的子界面。
+ 中间是三个图标菜单,分别为预约指南,会议室预约,我的记录。

## 2.预约指南
+ 点击预约指南按钮,即可弹出会议室预约规则。

## 3.会议室预约
+ 点击会议室预约图标,即可弹出会议室预约列表,第一列是时间,第一行是会议室的名称,列表的顶部有一个搜索框,可以在搜索框中输入会议室名称进行查询,搜索框的右侧是一个下拉菜单,可以选择日期和时间段进行查询,

## 4.我的记录
+ 点击我的记录,可以看到自己的预约记录和信用情况。
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
layout: post
title: Axure动态面板轮播图效果制作
date: 2020-11-22
author: ZJN
categories:
- 设计部
tags:
- Axure
---

## 设置轮播图状态

+ 添加动态面板
+ 双击动态面板进入编辑界面,上方下拉菜单可以选择/命名/添加或删除状态。
+ 添加图形元件,把要展示的图片拖进来,并适当调整大小。

## 通过单击不同圆点实现banner切换

+ 添加圆形组件,设置颜色,大小,不透明度,放在合适的位置,标上对应banner的数字。
+ 选中第一个圆形按钮,在右边交互面板中-新建交互-单击时-设置面板状态-轮播到state1
+ 后面的重复上一步骤,只需修改对应数字即可。

## 通过单击左右箭头实现上一页/下一页切换

+ 拖入矩形元件,放在左右两边,设置大小和不透明度。
+ 搜索箭头图标,放在矩形上方,并和矩形组合。
+ 左边的组合交互动画设置为:单击时-设置面板状态-轮播到下一项-循环-向左滑动-500毫秒
+ 右边的组合交互动画设置为:单击时-设置面板状态-轮播到上一项-循环-向右滑动-500毫秒

## 通过左右拖动实现banner切换

+ 向左拖动:点击动态面板-设置动态面板交互-向左拖动结束时-设置面板状态-当前到下一项-循环-向左滑动-500毫秒
+ 向右拖动:点击动态面板-设置动态面板交互-向右拖动结束时-设置面板状态-当前到上一项-循环-向右滑动-500毫秒