UI界面设计的常用方法

UI界面设计的常用方法

一、UI界面设计中的设计方法

1.方法与方法

方法是指在任何一个领域中的行为方式〃它是用以达到某一目的的手段的总和。 方法论是以方法为研究对象〃并形成独立的科学。

2.认识论和设计方法

我国传统文化中蕴含的设计观念和方法:“天人合一”,指的天时、地气、材美、工巧〃合四为良。

设计方法学的关键是针对设计条件的集合〃寻找最佳的解决方案。

3.UI界面设计中实用的设计方法

（1）.心智图法又称为思维导图法 （2）.情境化设计法 （3）.现代设计方法

二、UI界面设计中实用的构成方法

1.什么是构成

构成就是将造型要素按照一定的原则组成具有美好形象和色彩的一种新的形体。 2.形式美法则

形式美的概念有广义和狭义之分。广义的说〃形式美就是作品外在形式所独有的审美

特征〃因而形式美表现为具体的美的形式。狭义说〃形式美包含两个方面〃一是指构成作品外在形式的物质材料的自然属性〃二是指这些物质 材料的组合规律。

形式美法则：

1、变化和统一 2、对称与均衡 3、节奏与韵律 4、联想与意境

5、调和与对比 6、反复与连续 7、统觉与错觉 8、适应与照应

3.构成的思维方式

1、重复构成 2、近似构成 3、渐变构成 4、发射构成

5、特异构成 6、对比构成 7、密集构成 8、自由构成

三、UI界面设计中实用的色彩搭配技巧

1.色彩的基本理论

17世纪中叶〃英国物理学家牛顿发现在他的实验室中将太阳通过一个三角形的棱镜后〃分为红橙黄绿青蓝紫等明亮的光谱〃然后创建了色彩的理性研究。牛顿的发现〃是色彩研究走上了一个正式的科学道路。

1、色彩的三属性：色相、明度和纯度并成为色彩的三属性。

2、色彩的冷与暖：冷色和暖色是一种色彩感觉。冷色和暖色没有绝对的区分〃色彩在比较中才存在冷暖。

3、色环：色环其实就是将光谱中的色彩〃按照一定的顺序依次排列起〃首尾相连〃首尾为红色和紫色〃组成环形〃构成了色环。在色环中分原色、间色、类似色、互补色。

2.色彩搭配法

1、无彩色与有彩色的布局对比 2、色彩全局统一〃细节凸显 3、面积对比法则〃用色

彩划分视觉区域 4、渐变法则〃空间导向法 5、留白法则 6、顺应色彩象征与联想的原则 7、顺应文化时代特征的原则

四、UI界面设计风格 1.扁平化

1、拒绝特效 2、界面元素 3、优化排版 4、如何配色 5、最简单的交互方案

6、拟扁平化与长投影

2.拟物化

如果说扁平化设计是2D的〃只有X、Y轴、颜色、形状、布局。那么拟物化设计则是

有深度的〃多出一个Z轴〃还多出一个纹理和质感。

3.卡通化

广义上泛指对所表现的对象不使用写实和传统手法〃而运用归纳、夸张、变形等方式

处理的一切实用类视觉作品。

五、PhotoshopCC 中图层的应用

1.图层类别

Photoshop里的图层大致有：背景图层〃普通图层〃文字图层、调整图层〃填充图层、 3D层、视频层。

2.图层的基础操作

1、图层的含义：图层是用于放置图像的透明画布〃所看见得任何文件都是一个或多个图层上图像的叠加。

2、图层的基本操作：新建图层-删除图层-图层显示与隐藏-图层顺序-图层链接-图层不透明度与填充-图层锁定模式 3、图层的移动、复制、变换

3.图层样式

1、添加图层样式 2、拷贝、粘贴、清楚图层样式 3、转化图层样式为普通图层 4.混合模式

混合模式是PS最强大的功能之一〃它决定了当前图像中的像素如何与底层图像中的像素混合〃使用混合模式可以轻松地制作出许多特殊的效果〃但是要真正掌握它却不是一件容易的事。

5.Photoshop中的蒙版

1、Photoshop蒙版的作用 2、图层蒙版的创建 3、图层蒙版的停用、启用 4、图层蒙版 的编辑 5、蒙版的类型

6.渐变工具

使用“渐变工具”可以创建多种颜色间的逐渐混合。实际上就是在图像中或者图像的某一部分区域填入一种具有多种颜色过渡的混合模式。这个混合模式可以是从前景色到背景色的过渡〃也可以是前景色与透明背景间的相互过渡货者是其他颜色的相互过渡。

1、渐变下拉列表框：在此下拉列表框中显示渐变颜色的预览效果图。单击其右侧的倒三角形〃可以打开渐变下的拉面板〃在其中可以选择一种渐变颜色进行填充。将鼠标指针移动到“渐变下拉面板”的渐变颜色上〃会提示该渐变的颜色的名称。

2、渐变类型：选择“渐变工具”后会有5种渐变类型可供选择。分别是“线性渐变” 、“径向渐变”、“角度渐变”、对称渐变、“菱形渐变”。这5种渐变类型可以完成5种不同效果的渐变填充效果〃其中默认的是“线性渐变” 3、模式：选项渐变的混合模式 4、不透明度：

5、反向：勾选后〃填充后的渐变颜色刚好与用户设置的渐变颜色相反 6、仿色：勾选后〃可以用递色法来表现中间色调〃使用渐变效果更加平衡、 7、透明区域：勾选后〃将打开透明蒙板功能〃使渐变填充可以应用透明设置。