VI设计报告.docx
《VI设计报告.docx》由会员分享，可在线阅读，更多相关《VI设计报告.docx（9页珍藏版）》请在冰豆网上搜索。
VI设计报告
青岛大学
本科课程设计
题目：
UI设计
学院：
电子信息学院
专业：
电子信息工程
2017年9月15日
一、设计任务
UI设计：
1.设计软件学习
2.图标和logo设计
3.web页面设计
二、课程知识点详解
1.PS基本概念和操作：
（1）平面设计
平面设计/视觉传达：
以视觉为导向，通过图像来传递信息的一门艺术。
原则：
信息传达清晰准确；画面效果美观。
包含：
海报招贴、书籍画册排版、VI（VisualIdentity）设计/企业形象设计等等。
软件：
Photoshop（PS）illustrator（Ai）corelDRAW（cdr）indesign（ID）
（2）Photoshop
AdobePhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件。
Photoshop主要处理以像素所构成的数字图像。
版本：
1990——2003Photoshop1.0——Photoshop8.0（CS）
早期的Photoshop版本。
2003——2013PhotoshopCS——PhotoshopCS6
成熟期的Photoshop版本，确立了在位图处理领域的核心地位。
2014——2017PhotoshopCC2014——PhotoshopCC2017
Photoshop标准版，着重加强了UI开发功能。
（3）位图和矢量图
位图:
亦称为点阵图像或绘制图像，是由称作像素（图片元素）的单个点组成的。
如：
建筑立面马赛克拼图。
常见文件格式：
jpg/jpegpnggiftiffJpg图俗称“勾图”。
互联网上我们看到的图片全是位图。
矢量图:
矢量图也称之为为向量图，是图形学中基于数学方程的几何图形，由边线和填色组成。
如：
圆的数学公式：
（x-a）²+（y-b）²=r²。
常见文件格式：
aiepscdr。
矢量图一般作为图片的制作源文件或者印刷喷绘的源文件。
2.PS界面介绍
图1-1
包括菜单栏、工具栏、属性栏、浮动面板、工作区。
可以选择更改屏幕模式：
使用tab键或f键。
还包括两种模式：
标准模式或全屏模式（大师模式）。
（1）打开图片的方式
文件（菜单）——>打开（ctrl+O）
拖拽
右击——>打开方式
修改图片的默认打开方式右击——>属性
（2）新建文件/画布（ctrl+N）
像素：
是构成数码影像的基本单元点
图片尺寸：
是指图像的长和宽，单位是mm、cm、英寸······等长度单位
分辨率：
是指单位长度内包含的像素点的数量，它的单位通常为像素/英寸（ppi或dpi，区别于平时所说的手机屏幕分辨率）
右击图片——>属性——>详细信息
图片总像素=（长*分辨率）*（宽*分辨率）
图片总像素=横向像素数*纵向像素数
尺寸一定的情况下，分辨率越大总像素数越多。
颜色模式：
RGBCMYK
位深度：
8位2的8次方例：
从纯黑到纯白有256（2的8次方）个色阶
保存和另存为：
PSDjpg/jpegpng（可以保存透明底图片）gif（可保存动态图片）
（3）图层介绍
移动工具：
V
图层面板：
F7
新建图层：
ctrl+shift+N
点击图层面板新建按钮
复制图层ctrl+J
拖拽目标图层至新建图层按钮
按住alt用移动工具拖动图层
删除图层：
delete或者backspace右击——>删除图层
点击或者拖拽目标图层至删除按钮
显示/隐藏图层：
锁定
编组
链接
合并图层ctrl+E
盖印图层ctrl+shif+alt+E
图层顺序：
向上/下移动1层ctrl+【/】
直接移动到顶/底ctrl+shift+【/】
用鼠标拖动图层到合适的位置
（4）历史记录
历史记录面板窗口（菜单）——>历史记录
后退ctrl+Z
连续后退ctrl+alt+Z（注：
与qq热键冲突）
修改默认历史记录步数
编辑（菜单）——>首选项——>性能——>历史记录状态
（5）自定义暂存盘
图1-2
在运行PhotoShop的时候，会产生一个photoshop临时文件，会占用大量的内存空间，如果内存满了临时文件会暂时存放在暂存盘。
更改暂存盘的位置（默认是C盘），方法如下：
编辑---》首选项---》性能——》暂存盘（选一个相对较大的盘符）。
（6）自定义快捷键（建议使用默认快捷键）
编辑——》键盘快捷键
（7）基本选取工具介绍
工具箱：
窗口（菜单栏）—>工具
选区概念：
蚂蚁线选区隐藏（ctrl+H）
选区布尔运算：
加选shit，减选ctrl，交叉选ctrl+alt
取消选择：
ctrl+D选择（菜单）——>取消选择
全选：
ctrl+A选择（菜单）——>全部选择
反选：
ctrl+shit+I选择（菜单）——>反选
自由变换：
ctrl+T编辑（菜单）——>自由变换
填充颜色：
填充背景色ctrl+delete；填充前景色alt+delete；编辑——>填充shif+f5（前景色/背景色/内容识别）
内容识别：
PS会根据填充区域周围的环境计算填充的内容（常用于修图）
裁切工具：
（可以修改画布大小）
图像大小ctrl+alt+i画布大小ctrl+alt+c
吸管工具：
吸取颜色，吸取额颜色会显示为前景色
简单抠图：
选框套索魔棒
载入选区ctrl+点击图层缩略图
原位复制ctrl+J
（8）简单修图：
修补工具组和图章工具组
仿制图章工具和修复画笔工具要按住alt定义取样点
3.iOS图标设计规范
（1）图标设计：
本质上是对现实事物的抽象和概括，以图形语言表达出来，让信息的传递更加简洁优美。
（2）图标设计的原则：
可识别性/共性、美观性、差异性/原创性
技术点：
概括总结能力、造型能力、色彩搭配能
图标类别：
拟物化图标扁平化图标剪影图标线性图标
（3）扁平化设计：
扁平化概念的核心意义是：
去除冗余、厚重和繁杂的装饰效果（投影、渐变、纹理、立体等）。
让“信息”本身重新作为核心被凸显出来。
强调了抽象、极简和符号化特征。
1.图标设计流程
第一步：
寻找隐喻（一类事物的共性或者特点）
图2-1
第二步：
抽象概括图像
图2-2
第三步：
确定风格
图2-3
第四步：
调整细节
第五步：
场景测试
由于屏幕分辨率和使用场景和背景的不同，我们需要让设计好的图标再各个环境中做到最好的兼容性。
三、学习效果展示
1、图标和logo设计效果：
图3-1
图3-2
图3-3
2、web页面设计效果:
图3-4
图3-5
4、设计课程体悟
通过本次课程，我了解了UI设计的基本内容，熟悉了UI设计师的基本职能分类，主要分为图形设计、交互设计、用户测试/研究等方面，具体掌握了图标和logo的设计、web页面设计的基本流程，强化了对课程的认识。
升级会员 