《ui界面设计》课件全套 项目1--4 UI图标设计 ---网页UI界面设计.pptx

UI界面设计;;;;;不可点击的展示图标可点击的按钮图标;网页图标;;图标的设计原则;保持相同的大小与间距；方圆处理;;;图标风格参考;手绘风格图标;彩绘风格图标;像素风格图标;扁平化图标;扁平化中的色块;网页图标;网页图标;;;;;参数设置与参考线的绘制;参数设置与参考线的绘制;参数设置与参考线的绘制;;图标复杂规范参考线;参考线的使用;;图标简单规范参考线;;;;PS中绘制图标的简单规范1;PS中绘制图标的简单规范2;PS中绘制图标的简单规范3;;画一个44×44的正方形，颜色调为灰色，描边选择0.25pt（在此补充一个知识点，72ppi下的1pt是等于1px的，具体请自行百度），然后然后画一个42×42的正方形居于其中。这个42×42的界线为安全界线，图标不要画超过这个界线，避免在切图的时候贴边切，导致图标出现不自然的边界。上图详细展示画参考线的步骤。

;AI中建立参考线复用;参考线的建立;参考线的建立;参考线的建立;;长物体变饱满倾斜增加体量感;;THANKYOU!;UI界面设计;;实训任务2.1手机界面设计基础规范;手机界面规范;手机界面基础;手机界面基础;;（1）打开【PS】，新建【1080*1920】的画布，并划分出【状态栏】、【标签栏】、【导航栏】，如图所示;（2）给【状态栏】和【标签栏】填充颜色，并绘制【状态栏】和【标签栏】的内容，如图所示。

;（3）将广告图片和功能图标【复制】到Banner区域。

（4）添加【主显示区】的其它元素。

（5）绘制【导航栏】按钮和图标。

;

;;色彩重要性;色彩三属性——色相、明度、纯度;色彩情感和视觉感受;色彩情感和视觉感受;色彩情感和视觉感受;色彩情感和视觉感受;色彩情感和视觉感受;色彩情感和视觉感受;;手机界面导航;;手机界面导航;整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部分主要用来放置文字标题或者有哪些信誉好的足球投注网站，接下里展开分析左中右三部分的构成。;一级导航栏中间经常能看到有哪些信誉好的足球投注网站框，然后有哪些信誉好的足球投注网站框左右两边放置其他的控件。当导航栏的内容太多，比如有文字标题、头像、按钮等控件，有哪些信誉好的足球投注网站栏和这些控件可能无法并排放置时，可以将有哪些信誉好的足球投注网站栏横向拉长，放在下一行单独???示。现在淘宝App首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独作为一行。;我们在使用产品的过程中会发现，App的导航栏或多或少都存在一些设计上的差异。二级导航常见的还有在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展示更多的信息。;;手机界面导航;手机界面导航;;手机界面导航;手机界面导航;手机界面导航;Banner就是海报、招贴，直译通栏广告;首先，我们要清楚我们的设计目的;特别对于商城类的，用户没时间看你的大作，只是来买东西而已。;Banner的结构;2.2.2Banner的结构;1.商品层—商品的清晰度;2.商品层—展示角度;3.商品层—抠图问题;4.文案层—视觉清晰度;现在很多文案策划老嫌说的不够严谨，导致文案文字超级长，我们可以采用分段去做；当然也可以跟策划谈谈人生。;如果一个背景颜色足够深，那么写浅色字是比较好的，如果一个背景颜色足够的浅，写深色字是比较好的;图2-22文案颜色搭配;5.文案层—逻辑清晰度;图文不符或者文案不清晰的广告，只能让用户望而却步;真正的好文案，会击中你内心最薄的那层需求;6.背景层—背景层分解;图2-27Banner的背景层;1.垂直构图：可以充分显示产品和主体的高大与深度，因此多应用于单薄细长的产品。;垂直构图;2.平衡式构图：平衡式构图可以给人一种完美、满足的感觉，常用于地产设计、茶具设计等。;图2-31平衡式构图;3.斜线/放射线构图：斜线具有运动、流动的感觉，常用在运动装备、细长的文具等产品上。;图2-34放射线构图;4.对角线构图：巧妙利用了对角线的长度优势，使画面动感、活泼，达到吸引视线、突出主体、均衡视觉的效果。;图2-37对角线构图;5.框架式构图：框架式构图能增加画面的纵向对比和装饰效果，产生深度感。;图2-39框架式构图;6.九宫格构图：九宫格中的四个交叉点是放置主体的最佳位置，这种构图方式更符合人们的视觉习惯，使主体自然成为视觉中心。即突出了主体，又平衡了画面。;图2-41九宫格构图;112;113;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;117;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;手机界面Tab栏设计;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab