UI学习总结

作者：李哲定 时间：2019年6月18日
ICON设计：

这是李老师布置的第一次大作业，也就是制作九个 ICON，制作好了后再来将其展示，随后我找了一张紫色的banner图片，然后我再把它分截为2个部分，把它们分别放置到上和下这样就起到一个呼应效果，之后我就再顶部的banner里面放置了一些日文和英文放上去，因为有灯光效果这样看上去才像开场白，这样就会秤砣出这个banner中间不会太空荡荡的，然后再使用文字工具写上主题，之后再用矩形工具制作2个小矩形放置再主题的左和右，然后再把之前制作好的九个ICON放上来展示，一排三个这样来排，排好之后再到IC1ON的下方写上ICON的功能，注意不要贴的紧前后一定要设置好字间距的距离，然后再写上设计说明：灵感来源于手机特色壁纸，从中来提取小猫咪头部元素和手机里面的一些基本功能，之后再通过自己的思想更结合一些相关功能，最后通过不断的尝试，最后才制作成型，然后再不断的试颜色才到达想要的效果。随后再展现出制作ICON运营到的颜色，之后再提取出4个小猫咪的外部形状，分别把它们填上白色（ffffff），粉色（f4c6ac），红色（c51b1b），黑色（000000）然后再设置描边参数成0.75pt，之后再把它们分别放置再左和右然后对齐就可了，随后再展示设计原理，设计原理就是一个ICON分别拆开再等于，就和如图一样首先把一个下载ICON跟如图一样拆开之后再加上最后再等于合并，最后把谢谢观看翻译成英文放置到底部之后对齐。这就是李老师步骤的第二次大作业，制作一张食品官网，那就先开始说起制作食品的过程吧，一开始做的这个食品网站更现在如图这个截然不同的，开始的视频网站排版分工也不明确，字体和字体大小都不统一，图片也是歪歪扭扭的不整齐。然后交上去之后老师说这里有问题那里有问题没有给过关。
食品网站设计：

随后就跟我说我这个食品网站轮播这里的跳转箭头和这5个椭圆其中选取一个去掉不用，因为这2个代表的涵义都是跳转所以叫我去掉一个（这也是我第一次改动），然后我就去把这个跳转箭头去掉了，留下5个椭圆放置再轮播的下方这样还起到一个交互效果，要是这个banner跳转到该页面椭圆就会随着它的变动而变成红色不在当前的页面就变成白色效果，依次这样交互循环效果。

然后我又去交，老师又没给过，她说顶部栏那个交互首页下面的横线太贴字体了而且长度还超过了字体，还有北京那里小三角形太贴着这个字体了还比较大（这是我第二次改动），然后我又回去改我把它们的间距和大小调了一下感觉差不多就可以了随后我自己又检查了一遍自认为没有问题之后我又去交了。

然后还是没有给过，随后说我这个蛋糕专区丶巧克力专区丶曲奇饼干专区把它们的英文翻译放到下面中文放置到英文的上面，而且英文字体的长度不要过度的超过中午字体，叫我把字体与字体直接的字间距和上下的距离调一下不要太贴的紧这样的话会给人一种压迫感（这是我第三次改动），然后又拿回来改，专区那里的字间距缩放到正100把英文字体缩放到负100然后再把中文和英文互换一下位置把中午放置到上面把英文放置到下面，然后又把物品下面的名称和价格的字间距和行间距给调节了一下，随后我又自己检查了一遍发现图片和字体都没有居中，然后我就把标尺线拉出来对准中心间位置这样就起到一个居中效果，随后我把图片和字体全部左右对齐和居中。

然后我又发现一开始这个蛋糕系列丶巧克力系列丶饼干系列全部都是贴着的没有一点距离感而且还大小不一样，从整体来看这里就感觉太乱了没有吸引力还不好看，然后我就拉标尺线到这里来把它们全部统一缩小，缩小之后再利用标尺线起到一个居中的效果再把左右的距离调试好就可以了，改好之后就感觉没有一开始那样的单调和距离感了看上去就比较有创意性和吸引力。

然后我真的以为接近完美的作品感觉没有任何瑕疵了，我又去交了，然而还是没有过关，老师说这个关于我们这里可以用一个矩形圈住这个区域不然就感觉太空了，然后老师还说我这个了解更多这里可以做一个类似于交互的效果，然后我又回来改（第四次改动），随后我就先改这个了解更多这里然后使用矩形工具圈住它就感觉可以到达一个点击的样子，然后再使用矩形工具把关于我们这块区域圈出来就显得不是那么的空荡荡了。

最后我有认真的参考了一些其他的网站来和我的对比，我发现我这个网站的底部栏内容一点多摆放位置不是很协调，然后我就把底部栏的字体和LOGO全部居中，没用的删减有用的内容放置到上面来，最后再把前后之间的距离调节了一下感觉合适就可以了，这样一来就比较简约清新就好比如国外网站的欧美风格类型了。（最后我去交就过关了）