UI设计-—创意表达与实践教学课件2-2.ppt

1、写实图标的绘制写实图标，以拟物为基础进行图形创意，强调图标极强的真实感与质感表现。拟物化设计是为了模拟真实的物理世界。通常，这需要设计的在线应用的形式看起来像真实世界的变体，比如像电子合成器软件，做的像键盘。这种界面的设计方式，在过去几年的界面设计风格中占据了主导的地位。但是写实图标并不是画得跟照片一样，而是让创造的图标比较逼真，又超越真实，比如圆形的蜡烛台、木质的便签条、发光质感的信封等。一组写实图标设计绘制立体写实图标主要包括以下8个要素：Perspective（透视）Light Source（光源）Shadows（阴影）Color&Saturation（颜色和饱和度）Size Requi

2、rements（尺寸要求）Detail（细节-纹理质感）Icon Development（图标流程）UI Context Examples（用户界面）注意：一般绘制系统图标时，先画一个512px最大尺寸的，然后其他大于32px尺寸直接缩小。从大尺寸到小尺寸，图标要一样清楚。大尺寸图标意味着很多细节，绘制小图标时省略不需要的细节，在16px或12px等尺寸时使用正视，去掉复杂的细节，变得更简洁，只要能看出隐喻即可。【写实图标绘制要素】成套系统写实图标绘制写实图标的流程大致如下：1、尽量找具有参考价值的照片和图片。2、归纳出造型重点、提炼颜色、纹理细节。3、有重点性的夸张造型和构图表现。4、概念草

3、稿3-20张，各个角度，各种组合。5、勾轮廓线填充固有色暗部阴影高光叠纹理扣细节环境色添加。6、包装发布（加上漂亮的背景色）。【写实图标绘制注意事项】写实相机图标过程图【绘制写实皮包图标实例】自定义磨砂纹理图案绘制背景底图绘制皮包底面绘制皮包底面第二层绘制皮包中间矩形线绘制皮包中间矩形线绘制皮包中间线细节皮包中间线细节完成绘制皮包下部皮革形状添加皮包下部皮革机理添加皮包下部皮革机理添加皮包下部皮革缝线效果细化皮包下部皮革部分皮包中间皮革部分绘制皮包盖形状绘制皮包盖形状绘制皮包盖缝线绘制皮包盖缝线绘制皮包盖细节绘制皮包带形状绘制皮包带缝线绘制皮包带上的圆孔绘制皮包带横扣形状绘制皮包带横扣皮质纹理

4、绘制皮包带横扣上的圆扣绘制皮包带横扣上的圆扣完成圆扣及绘制皮包带横扣上的金属扣图层蒙版隐藏被遮挡部分金属扣部分完成写实皮包图标完成稿扁平化图标的绘制平化设计从其字面含义上理解是指设计的整体效果趋向于扁平、无立体感。扁平化设计的核心是在设计中摒弃高光、阴影、纹理和渐变等装饰性效果，通过符号化或简化的图形设计元素来表现。在扁平化设计中去除了冗余的效果和交互，其交互核心在于突出功能本身的使用。扁平化金融图标设计【扁平化设计的概念】1、快速而高效 快速运转的现代社会，时间就是金钱，信息的更新之快是互联网时代需要有效高效地传递信息。这是扁平化设计出现一个重要的基因，也是很多交互设计为什么选择扁平化设计的

5、原因之一。扁平化手机操作界面设计【扁平化设计的优点】2、信息突出 在扁平化设计中可以通过颜色的对比、大小不同的字号，让设计中重要的信息放在首要位置，不重要的元素有所弱化。这样的设计让使用者可以很容易地将注意力集中在产品和信息上，而不会被设计界面中其他的视觉元素所干扰，从而突出核心信息和操作，这些都能够增强设计的可读性。扁平化蔬菜图标设计 3、简洁清晰 简洁的设计总是让人喜爱的。在一个设计简洁、逻辑清晰的界面中，用户不仅能够很快找到自己所需要的内容，而且能够在使用过程中减少误操作，从而提高用户体验。如图2-122所示，这三张手机界面采用干净利索的版面设计，没有过多的不必要元素。简洁清晰的手机界面

6、设计 4、方便修改 很多设计都需要定期进行改版或者信息更新，从而保持新鲜感。使用扁平化设计，可以在最短的时间对设计内容进行更新与修改，甚至只需要更新下颜色值就可以让画面焕然一新，大大地节约了项目时间和成本。不同的色彩方案网站更新1、常规基础图标。不添加任何的渐变、阴影、高光等体现图标透视感的图形元素，而是通过极其简约的基本形状图形、符号等表现图标主题。【扁平化图标的常用设计技法】2、为剪影图标加底。3、彩色拼贴图标。4、折纸风格图标。5、长投影图标。6、透明质感图标。7、渐变伪扁平轻质感图标。以实例给读者完成当下最热门的四种扁平化表现手法：常规扁平化、长投影、投影式、渐变式。【绘制四种扁平化风格的播放器图标实例】新建文档并设置背景色设置参考线绘制圆矩形绘制白色圆环常规扁平图标完成绘制长投影基本形完善三角形的长投影完善圆环的长投影长投影图标绘制完成添加渐变叠加图层样式渐变式图标完成图投影式图标完成图四种扁平化风格的播放器图标完成【绘制扁平化相机图标实例】新建文档并绘制圆角矩形为圆角矩形添加图层样式 绘制镜头部分 绘制相机顶部与红点 扁平化相机图标完成图Thanks