《ui界面设计》课件 项目2 移动端App界面设计.pptx

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九宫格构图;64;65;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;69;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;手机界面Tab栏设计;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;手机界面底部Tab栏;实训任务2.6移动端界面视觉流程设计;什么是视觉流程？;画画;如何理解清晰展示信息？

HOWDOYOUDOIT?;

;遵循视觉习惯？;视觉习惯:遵循从左往右、从上到下的轨迹;视觉习惯:页面上部比下部更引人注目;视觉习惯:页面往往是左边比右边更引人注目;信息元素的位置Position;视觉流程赏析;遵循对比法则？;遵循对比法则;遵循图片、图标和文字吸引度？;吸引度：图片图标文字;视觉流程清晰;视觉流程清晰;视觉的吸引度之图片和文字;视觉流程清晰;视觉流程清晰;对比Contrast;视觉流程清晰;;实训-APP界面视觉流程改版;手机界面视觉流程;手机界面视觉流程;THANKYOU!