12.12周报

一.设计（XD）

1.滚动画板的设置

       单个页面的内容高度往往会超出一个显示屏的高度，即一个屏幕不能完全显示当前页面的内容，需要滚动鼠标滚轮才能查看全部内容。这种时候可以使用可滚动画板。

       可滚动画板的开启方式在XD设计模式下的属性检查其中，首先需要单击画板名称并选中画板，然后在属性检查器中会出现一个“滚动”的设置项（未选中画板时则不会出现），接着单击下拉框，有“无”和“垂直”两个选项可以选，选择“滚动”选项并开启滚动画板，会出现“视口高度”设置项（视口高度是指可显示区域的高度）。单击“视口高度”设置项后边的输入框，可根据设置理想的高度，并按回车键确认即可。同时，需要设置画板的高度大于视口的高度才可以进行滚动。设置画板的高度大于视口的高度后，画板中视口高度的位置会出现一条蓝色的虚线。

2.原型动画设计

          2.1滑动动画

         在原型模式下，在“交互设置”面板中设置“操作”为“过渡”，在“目标”中选择所要操作的画板，“动画”为“左滑”或者“右滑”。

          2.2缓动动画

         缓动指动画效果在执行时的速度变化，在XD中，单击“缓动”的设置项，预览时触发设置了交互链接的对象：选择“无”，匀速进行；选择“渐出”，开始时速度较快并逐渐减速；选择“渐入”，开始时速度较慢并逐渐加速；选择“渐出渐入”，开始时速度较慢做加速运动，到一半时间速度达到最快，然后再减速；选择“对齐”，开始时先应用“渐出”的效果，然后在结束的地方超出范围后再回来，类似于轻微的抖动；选择“卷紧”，效果相当于“对齐”倒过来；选择“弹跳”，在结束时有几次较大的抖动。

3.固定位置

          如果画板仅设置了滚动，则预览滚动页面时，页面中所有的元素都会随画板一起滚动。但在实际中，顶部菜单，底部导航等固定在页面中的底部或顶部，这种效果可以通过固定元素实现。

          固定元素需要在设计模式下使用，选中需要的元素，在属性检查器中可以看到“滚动时固定位置”的选项。

二.网页设计之网格系统

1.什么是网格系统

          网格系统是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，控制页面元素之间的对齐和比例关系，从而搭建出一个具有高度秩序性的页面框架，能科学的把设计元素合理又不失秩序的安排在页面中，如naver的shopping网站还有我们看到的很多海报，就是一个利用网格系统很好的例子

2.网格系统的分类

在整理网格体系的过程中，大概把网格系统分成3种类型

1、常规网格

2、渐进式网格

3、水槽式网格

2.1常规网格

       用途：用于海报、常规web类型网站、画册等内容相对简单的布局

       怎么定义每个小的网格比例？

一般每个网格的长宽比有以下几种，比较常用的有

6:9 4:6 8:13 12:18 = 0.618

1：√2 3:4 5:7 7:10 10:14 = 1.414

1：1

2.2渐进式网格

     多数用于web端大型推广页面、后台系统页面，这种例子比较多，最常见的就是我们经常看到的后台系统。

设定方式：

设定一个最小单位a，加固定个数，或者倍数剧增

1、3、5、7、9 +2得出

2、4、6、8、10 2的倍数

1 、5 、9 1+4 5+4 固定加数

2.3水槽式网格

多数用于APP、常规web页面，如官网、3栏式布局feed页面，那么什么叫水槽式网格系统呢？先来看下整个水槽式网格的组成部分。

（1）单元格

谷歌的大多数测量都是应用的8dp网格对齐，较小的组件（例如图标）可以与4dp网格对齐。

（2）外边距

外边距的选择，一般跟自己的项目希望传达给用户的感觉要一致，是高级舒适的？还是丰富紧凑型？无线和web一般要做不同边距，屏幕越大边距相对更大一些，有一些国外的网站一套设计体系能兼顾APP和web 两个端，比如instagram。

当然也要看整体设计要传达给用户的感觉是什么？来看2个实际的例子：爱彼迎的边距为48px，网易云音乐的为32px，设计师在选择边距的时候不仅要考虑设计风格还有每个页面的一致性，都是采用一套网格体系还是特殊页面可以单独定义，要提前考虑清楚。

（3）列和水槽

列和水槽，是在做设计之前要定义好，以京东结果页为例

3.如何测量一个APP的栅格

第一步：我们先下载一个sketch插件fusion，也可采用sketch中的布局，fusion更方便一些，安装上之后，导入我们需要测量的app截图

第二步：测量边距，如图所示，淘宝头购物车页面的边距是18px（750下）根据模块之间的划分，测量出水槽为24px

第三步：实验列宽的数量，多试几次，测出刚好卡到元素边缘的合适的数值，就成功测出一个app的栅格体系了

我们在设置网格系统的时候，切记要活学活用，布局时也可以在这个区域就行，不需要所用元素完全卡在网格线上。大的黄色圆圈在网格以内，设计人物的边缘则可以适当拓展出去，打破网格限制。所以在设计的时候也可以灵活运用网格体系，哪些元素可以利用网格体系，哪些可以打破网格体系，根据设计中遇到的实际情况定义。

4.利用网格体系的好处：

（1）更加理性的对待设计

不少设计师在做设计的时候依靠经验、对设计布局的敏感，或者基于竞品这样的角度去做，如果采用网格系统，一方面从理性的、可观的，具有数学美感的角度去做出的设计，也让设计更加有理有据，提高阅读体验

（2）提高协同的效率

一个公司里面，会有多个设计师协作，如果有一套成熟的网格体系的话，那么大家就不会每个设计师出一套自己认为合适的设计方案，而是在现有的框架下，更好、更快的完成设计任务，在效率和一致性上能更有保证

（3）减少决定时间

不管你是设计执行者，还是管理者，在设计时有时候就会纠结像素差，运用网格体系，能减少这样的决策时间，能让设计师在设计执行上更加明确，有迹可循，也不再纠结于几个像素，设计管理者也会更能提供有理有据的设计指导，让设计师更快速理解到设计原则，较少在反复推敲过程中浪费时间 。

三.前端网页设计

1.HTML的概念

（1）什么是HTML

概念：超文本标记性语言（Hyper Text Markup Language）

超级文本：文字，图片，视频，音频，设计样式。

标记性：<h1></h1>每一个标签都有自己的作用（需要记住每一个标志的作用）

（2）开发工具

HBuilder vsCode Idea

（3）HTML基本结构

网页文件的类型：XXX.html/xxx.htm

2.制作网页步骤

新建项目

新建html目录

新建html文件

书写body部分

ctrl+s保存好运行

右击检查

3.注释

（1）对程序的解释说明，不参与程序的执行。（<!--注释内容-->）

（2）快捷方式：ctrl+？

4.单标签和双标签

（1）标签的基本概念

单标签：<标签名>

双标签：<标签名></标签名>（成对存在，分别在开头和结尾）

标签的常用快捷方式：ctrl+A全选  ctrl+c复制  ctrl+v粘贴  ctrl+x剪切  ctrl+z撤销（返回上一步）  ctrl+s保存  ctrl+f选中

（2）标题标签：<!--标题标签h1_h6-->

                  从h1到h6依次减小，每个标签独占一行，没有第七个标签

                  html标签不区分大小写

（3）段落标签：<p></p>（双标签）

         段前段后保留一定的行间距，&nbsp;表示一个空格，在utf-8里面，一个汉字需要三个空格

（4）换行标签：<br> 

（5）分隔线标签：<hr>

（6）图片标签：<img src/>

           其中src表示图片的属性

           相对路径：从本文件的位置开始查找图片（..表示从某个文件夹里出来  /和./表示进入到文件夹）

           绝对路径：从盘符位置开始找图片（需要记事本新建文本找到D盘里的内容，软件不支持查找）