第14周学习笔记

 Adobe XD :

• 任务：自主学习系统小程序页面开发

• 完成情况：共计18个页面及交互

• 技能学习情况：

      1、通过组件状态交互完成单页面连续动画

          (1)选中要交互的图层，在右侧操作面板找到组件，点击加号制作组件（ctrl+k），对组件的默认状态（交互前状态）编辑。

      （2）点击右侧加号选择新建状态，编辑新的状态（交互后状态）。

    （3）切换到原型页面，选择默认状态，新建一个交互，在目标部分选择刚才新建的状态，并选择交互类型为自动制作动画，更改到合适的持续时间以确保交互的动画效果。

  

      2、利用 UI 套件（如按钮、表单元素、标题、图标等内容）简化设计

        （1）获取 UI 套件

• 要访问 Adobe XD 中的 UI 套件，请选择“File”（文件）>“Get UI Kits”（获取 UI 套件）(Mac OS)，或者点击应用程序左上角中的“汉堡”菜单，然后选择“Get UI Kits”（获取 UI 套件）(Windows)。此时将显示菜单，里面提供了多种 UI 套件。
• 选择其中一个套件（例如“Wireframes”（线框）），将在默认浏览器中打开一个网页，可以在这里下载套件。

        （2）利用 UI 套件内容

• 下载好 UI 套件后，打开 UI 套件的 XD 文件“Wireframes”（线框）UI 套件包含两个 XD 文件，一个用于网页设计，一个用于移动应用程序设计。可以将 UI 套件中的内容复制粘贴到文档中。

     3、启用 3D 变换

        （1）要启用 3D 变换，选择所需的对象并单击“属性检查器”中的 3D 变换 

 图标。

        （2）变换部分中会出现新对象控件，并且可在所选对象的中心使用线框 

 图标。将  图标向左、向右、向顶部、向底部移动。

        （3）可以在“属性检查器”中修改轴值，或旋转线框 

 图标以沿轴旋转对象。

    4、使用 Adobe XD 中的叠加功能，在不必复制画板的情况下模拟 App 中的互动。

        （1）打开样本文件或使用您自己的文件。首先打开一个包含一个源画板和一个叠加画板的设计。在该设计中，我们创建了这样一个画板：前面一个弹出菜单，后面是应用了背景模糊的矩形。背景模糊将柔化应用叠加的每个下层画板，抓住用户的注意力。

 

        （2）切换到“Prototype”（原型）模式，将画板或对象连接到叠加画板。尝试不同的“Transition”（过渡）设置，找到您喜欢的动画效果。使用桌面预览功能来预览效果。

        （3）根据需要，将多个不同的画板或对象连接到叠加上。

  

• 总结与反思：

        本周在做小程序页面时,使用组件状态完成也面交互较多，但完成第一部分交互后进入下一个页面时，可能会新加入一部分图层和组件，为保证交互动画的连贯性，应当在第一次新建组件和状态时就包含未来整个动画中有可能用到的组件，否则只能为了后续的连贯删除之前的状态重新编辑。从而导致工作量增大，浪费多余时间。故未来在使用这一功能时，应当提前计划好一个动画索要使用的所有图层和组件，分配好页面，避免做无用功。

        在注重页面效果的同时，应当考虑到用户的使用效果，部分页面虽然美观，但用户使用起来不一定很方便。在自查自己做平时，应当以使用者的视角去考察，及时发现问题。

---

PS：

1、照片编辑技巧    

1、裁剪和拉直 

您可以使用裁剪工具修剪边缘、更改照片的形状和大小，并将弯曲的海岸线或地平线拉直。

    2、改善光线和颜色

使用调整图层增加照片亮度并改善照片颜色。 

    3、  移除不想要的内容

使用“Spot Healing Brush Tool”（污点修复画笔工具）和“Patch Tool”（修补工具）轻松移除不想要的内容。   

    4、添加创意效果

将照片转换为黑白照片，添加复古色调，并使用“Tilt-Shift”（倾斜偏移）模糊滤镜添加模糊效果。

    5、   锐化和保存

使用锐化滤镜对照片进行最后润色。然后将锐化后的照片保存为 PSD 格式，以保留图层，便于未来编辑。要通过电子邮件在线分享照片，请另外保存一份 JPEG 副本。

    6、裁剪和拉直照片改善构图

        （1）创建裁剪边框

• 在工具面板中选择裁剪工具。照片周围将出现一个裁剪边框。

        （2）在选项栏中选择裁剪选项

1. 请取消“Delete Cropped Pixels”（删除已裁剪像素）选项，以便恢复裁减掉的任何区域。
2. 选中“Content-Aware”（内容识别）选项，Photoshop 将自动使用相匹配的内容填充裁剪部分周围的透明区域。

        （3）设置裁剪大小和形状

1. 拖动裁剪边框的边缘，设置裁剪区域的大小和形状。
2. 如果希望裁剪后的照片与原始照片拥有相同的比例，请按住 Shift 键，从边框一角拖动鼠标。

        （4）在裁剪边框中调整照片位置

• 在裁剪边框内点击并拖动照片，调整照片位置。边框之外的部分将被裁掉。

        （5）拉直照片

• 如果照片中的水平或竖直内容不平或不直，请在裁剪边框某一角的外侧点击并拖动鼠标，旋转照片，直到其变平变直。
  或者在选项栏中选择拉直工具，在照片中沿着该内容（例如地平线）拖动鼠标画一条直线。
  完成后，点击选项栏中的对勾接受更改。

        （6）对裁剪进行更改

• 如果想要对裁剪进行更改，请选择裁剪工具并在图像中点击鼠标，查看裁减掉的区域。重复以上步骤重新进行裁剪。

2、PS设计技巧

    1、了解图层

图层是所有 Photoshop 设计的基本要素。要制作这个分层设计，首先要对原始图稿创建新图层，并叠加图片。在此过程中，将熟悉“Layers”（图层）面板，并了解图层使用的基本知识。

    2、利用图层蒙版合成图片

您可以使用图层蒙版灵活合成图片。图层蒙版可以隐藏图层的特定部分，显示下面图层的内容。在这个设计中，使用图层蒙版，用一张图片上的云朵替换另一张图片中沉闷的天空，并使其余部分相互融合。

    3、添加文本和效果

在您的设计中添加文本。然后用创意图层效果装饰文本，制作独特外观。了解如何使用“Type”（文字）图层，并使用 Typekit 获取丰富字体。

    4、加入矢量图形

Photoshop 不仅仅适用于处理照片。您还可以在 Photoshop 中自定义形状，并放置在 Adobe Illustrator 中制作的徽标，进一步改善您的设计。您可以根据喜好，对这些矢量图形进行缩放和编辑。

    5、导出并保存设计

请以 PSD 格式保存设计，以便保留图层和效果，供日后编辑。然后，保存或导出副本留做他用。保存 PDF 副本用于分享，并使用 Photoshop 的“Export”（导出）功能，以适用于网页的格式导出所有或部分设计。

 C语言：

• 计划：数组、字符串、指针

• 进度：一维、二维数组、字符数组和字符串

• 具体内容：

数组是构造数据类型之一

• 数组： 有序数据的集合,用数组名标识
• 元素： 属同一数据类型,用数组名和下标确定

一维数组的定义

定义方式：

 

一维数组的引用
1、数组必须先定义，后使用。
2、只能逐个引用数组元素，不能一次引用整个数组。
3、数组元素表示形式： 数组名[下标] ,下标可以是常量或整型表达式
。

一维数组的初始化
说明：
1、数组不初始化，其元素值为随机数。
2、对static数组元素不赋初值，系统会自动赋以0值。

3、只给部分数组元素赋初值。

4、当全部数组元素赋初值时，可不指定数组长度。

二维数组的定义

定义方式：　

数组元素的存放顺序
1、原因： 内存是一维的
2、二维数组： 按行序优先
3、多维数组： 最右下标变化最快
数组a[m][n]，m行n列，共m*n个元素

这些元素占用m*n个单元，每个单元的大小取决于
元素的类型。

任意元素a[i][j]在数组中的位置计算公式为：

i×n＋j （从0开始）

a——数组的起始地址；a[0]——0行0列元素的地址。

二维数组元素的引用
形式： 数组名[下标][下标]

二维数组元素的初始化
1、分行初始化
2、按元素排列顺序初始化

字符串
字符串及其结束标志

（1）、无字符串变量，用字符数组处理字符串。
（2）、字符串结束标志：‘\0’。

字符串的输入输出
输入:

用scanf函数
（1）.输入单个字符：％c 需用循环语句
（2）.输入字符串：%s scanf(“%s”,str);
用gets函数：gets(str);
输出:

用printf函数
（1）.输出单个字符：％c 需用循环语句
（2）.输出字符串：%s printf(“%s”,str);
用puts函数：puts(str);

常用的字符串处理函数： 加粗样式包含在头文件 string.h

字符串输出函数puts

格式： puts(字符数组)
功能： 向显示器输出字符串（输出完，换行）
说明： 字符数组必须以‘\0’结束

字符串输入函数gets

格式： gets(字符数组)
功能： 从键盘输入一以回车结束的字符串放入字符数组中，并自动加‘\0’
说明： 输入串长度应小于字符数组维数

字符串连接函数strcat

格式： strcat(字符数组1,字符数组2)
功能： 把字符数组2连到字符数组1后面
返值： 返回字符数组1的首地址
说明：
1、字符数组1必须足够大
2、连接前,两串均以‘\0’结束;连接后,串1的‘\0’取消, 新串最后加‘\0’

字符串拷贝函数strcpy

格式： strcpy(字符数组1,字符串2)
功能： 将字符串2，拷贝到字符数组1中去
返值： 返回字符数组1的首地址
说明：
1、字符数组1必须足够大
2、拷贝时‘\0’一同拷贝
3、不能使用赋值语句为一个字符数组赋值

 总结：

        数组方面，还有多为数组有待学习，字符串中许多字符串函数要刻意记住。本周计划中指针部分学习较少，在笔记中并未记录，指针在c语言基础中比重很大，在下周学习计划中，要及时补上指针内容，打好基础。

我眼中的设计组组长

        身为设计组的一员，不论这一身份背后的个人，单论设计组组长这一身份，我理想中的组长只需要在设计专业方面能给我们一些技术支持和好的建议，同时能严格要求我们，认真负责的督促我们完成平时的任务。

        早在这一身份之前我就认识了我们的组长，他和我理想中的设计组长几乎如出一辙，但同时他会关心组员的个人学习情况，不仅是设计组组长，在xd和Ps的学习方面给我们提出意见，同时也以学长这一身份，给组员分享了许多学习经验。

        组长在每次作品考核时都会根据我们的个人情况，给出针对性的意见。同时，本人在设计时经常缺乏灵感，希望组长能在每次考核任务完成后，给予一些示范模板以供我们学习。

---