UI设计总结
-
平面设计基础
平面设计,是一种用“视觉”作为沟通和表现的方式,从点,线,面开始认识,再深入的去了解“平面构成”,“色彩构成”,“立体构成”等基础; -
UI理论
-
色彩搭配和版式设计
-
用户体验和逻辑
-
透视原理
-
设计规范
-
交互设计
人机交互和用户的体验 -
原型和架构设计
原型设计是和交互设计师和网站开发工程师沟通的工具,架构设计指的是大型软件系统各个方面的设计
第一章:PS基础
首先我们要去了解Photoshop的界面组成,如下图:
1. 顶部红色框为菜单栏,菜单栏可以调整部分功能的样式,比如字体的大小和颜色的改变或者加以特效等等一些功能
2. 左边蓝色框为工具栏,工具栏里面有着各式各样的工具可以使用,例如抠图工具,钢笔工具,油漆工具,修补工具等等一些工具
3. 右边上部分部为色板可以进行调整颜色,中间部分为属性可以调整样式,下部分为图层可以选取图层进行修改或者调整
第二章 :PS进阶
了解完PS的基本工具然后就是进一步的进阶学习PS工具的使用。使用PS来设计一个双11的Banner,成果如下图:
- 首先就是新建一个文件图层,根据市局情况而定,背景颜色为黄色根据个人喜欢什么颜色都行。
- 再新建个图层使用钢笔工具勾勒出波浪形状的帷幕
4. 输入文字进行一个排版,再放进一个天猫的logo,排好版之后新建图层样式选择描边来进行描边,然后再使用钢笔工具对描边的形状重新画一遍,使用菱角分明点。
5.复制几个文字图层向右下移然后进行合并图层做出一个阴影效果
6.然后再对双11图层使用渐变效果
7.下一步就是制作题目下方的矩形,给矩形加上阴影,再使用渐变填充颜色即可
8,输入文字,然后叠加上一个炫光素材,模式改为滤色
9.基本标题设计好之后就来制作背景的效果,就简单的加上些不规则形状素材,再叠加一个窗帘素材即可,再加上漂浮物就大功告成。
第三章:AI基础
同样就是了解Adobe Illustrator 软件的基本工具和区域,如图:
1. 红色框为菜单栏。
2. 蓝色框为工具栏
3. 绿色框为图层和路径查找器
.
第四章:AI进阶
使用AI软件来进行一个绘图,成果如下
- 先用钢笔工具把兔子的轮廓画出来,
- 再用路经查找器来选取对象进行填色
第五章:版式设计
这个封面运用了重度的留白,这是为了突出这本书册的主题而不去添加一些花里花俏的样式,因为版式设计就是为了去吸引读者而存在的只要封面能够吸引到读者即可。
如何的去设计一个版式,首先就要想好主题然后就是要面对的客户的需求是什么,然后就是想好设计的方向,内容布局。
第六章:Logo设计
Logo设计就是设计一个能表象征着自己的一个标志,有着一目了然的视觉传递效果。其意义就是代表着个人或者企业公司的一个形象。
个人的Logo可以进行一个个人的发挥去创作。
简单的创作方法就是输入文字然后再自己添加一些样式和特效或者添加一些有标志性的图标。
第七章:官网设计
官网就是它表示该网站专属主办者意志的体现,带有专用的权威的意思。
设计一个官网就要明确主办者的意志和主题是什么,然后再设计主办者风格和形象是什么,然后再进行一个排版和布局
第八章:Icon设计
ICON有 大特点
1. 可以缩放
2. 容易被认知
3. 拥有一贯性
4. 独一无二
5. 不通过语言说明
Icon就是可以用一个插画来传达出其意义的一个标志,在设计的时候首要就是确定icon的风格,还要想好运用的方面是用在页面还是手机,其次就是设计的内容要实用
第九章:后台网页设计
设计后台网页,首先要确定好设计的风格,然后考虑页面的交互设计和排版设计,还有就是要选好ICON的使用
第十章:设计品集