《UI界面设计》教学课件.pptx

UI界面设计;;;;;;;;;;;;13;14;;;UI即UserInterface用户界面的简称。

泛指用户的操作界面，它既包含了用户界面的视觉表现，又涵盖了软件人机交互与操作逻辑。

;苹果公司的第一代MAC电脑操作系统system1.0已经具有了桌面、窗口、图标、光标、菜单和卷动栏目等项目;UI发展;2010年苹果手机将UI炒出了新的热度，伴随着互联网加的深入，市场对UI设计师的需求可谓呈现井喷之势;UI界面设计;;;UI设计师;UI设计;

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

;AI中建立参考线复用;参考线的建立;参考线的建立;参考线的建立;;长物体变饱满倾斜增加体量感;;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.框架式构图：框架式构图能增加画面的纵向对比和装饰效果，产生深度