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

UI界面设计USERINTERFACE项目2移动端App界面设计实训任务2.1手机界面设计基础规范画画App界面的

COMPONENTSOFTHEINTERFACE状态栏标签栏主显示区导航栏手机界面规范App界面控件规范界面规范文字参数手机界面基础手机界面基础AB字号中文：思源黑体

英文：robot

偶数单位24pt,28pt,36pt等字体：App安卓界面中文字参数（1）打开【PS】，新建【1080*1920】的画布，并划分出【状态栏】、【标签栏】、【导航栏】，如图所示App安卓界面制作步骤-1（2）给【状态栏】和【标签栏】填充颜色，并绘制【状态栏】和【标签栏】的内容，如图所示。App安卓界面制作步骤-2（3）将广告图片和功能图标【复制】到Banner区域。（4）添加【主显示区】的其它元素。（5）绘制【导航栏】按钮和图标。App安卓界面制作步骤-31.重要性：色彩往往给人以鲜明的第一印象。2.色彩三属性:色相、明度、纯度3.色彩情感和视觉感受4.配色方案：同种色、同类色、邻近色、对比色等5.色彩策略实训任务2.2UI配色方案

色彩是一个品牌给人的第一印象。营销界有个著名的“7秒定律”，即消费者在7秒内就可以确定是否有购买商品的意愿。如果第一眼没有被吸引住就很难对产品有进一步了解的欲望。而在这短短7秒内，色彩的决定因素占到67%。大部分初次接触产品的消费者会在90秒内决定是否购买，而这个评估中62%-90%是基于颜色。“7秒定律”色彩重要性色彩三属性——色相、明度、纯度色彩情感和视觉感受色彩是富于情感的色彩情感和视觉感受红色黄色色彩情感和视觉感受蓝色绿色色彩情感和视觉感受橙色紫色色彩情感和视觉感受黑色灰色色彩情感和视觉感受咖啡色金属色实训任务2.3App顶部导航栏设计

画画导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。手机界面导航手机界面导航画画App导航栏作用？导航栏是用来帮助用户定位、导航、操作的基础组件;首页导航栏就是一级导航栏，由首页导航栏中点开的界面就是二级页面。手机界面导航整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部分主要用来放置文字标题或者搜索，接下里展开分析左中右三部分的构成。一级导航栏中间经常能看到搜索框，然后搜索框左右两边放置其他的控件。当导航栏的内容太多，比如有文字标题、头像、按钮等控件，搜索栏和这些控件可能无法并排放置时，可以将搜索栏横向拉长，放在下一行单独展示。现在淘宝App首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独作为一行。我们在使用产品的过程中会发现，App的导航栏或多或少都存在一些设计上的差异。二级导航常见的还有在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展示更多的信息。手机界面导航画画导航栏设计样式？导航栏样式分为通栏和非通栏，通栏就是通到页面最顶部的通栏。非通栏的设计是整个导航栏跟整Banner之间有明显分界。我们可以结合站在产品和用户客户的角度来看，思考整个导航栏。我们把导航栏做成通栏的时候，Banner更加细腻的，导航栏上的功能入口,比如扫一扫啊，搜索啊，包括消息视觉层面上变得更加弱了。手机界面导航手机界面导航App导航栏设计注意事项文字、搜索框和图标的大小尺寸与距离合理文字图标搜索框手机界面导航画画App导航栏文字字号文字字号，一级导航搜索框内的文字一般28像素，图标的文字18像素；二级导航标题文字，在两倍图750乘1334的作图尺寸下，我们会把它做成36像素；文字层级间隔大于4像素；手机界面导航画画手机界面导航画画App导航栏搜索框

手机界面导航画画App导航栏元素间距

Banner就是海报、招贴，直译通栏广告图2-8Banner效果图2-9Banner效果实训任务2.4App-Banner设计首先，我们要清楚我们的设计目的不论你做的多么漂亮，多么炫酷，多么华丽，多么￥#@……没用！设计是为了信息传达！用户高效得到信息才是设计的初衷2秒原则互联网上的广告图，只有2秒的生存时间。要么被忽视，要么被关闭，要么被点击。so...在2秒内把你想要说的事情说完！特别对于商城类的，用户没时间看你的大作，只是来买东西而已。Banner的结构2.2.2Banner的结构图2-10Banner的结构1.商品层—商品的清晰度图片质量对于网站的影响是很大的，特别是电商类的网站，图片要足够的清晰。要做到最基本的不变形、不模糊、不失真2.2.2Banner的结构图2-11商品清晰度图2-12商品鲜艳度2.商品层—展示角度我们一些设计总想创新，走不寻常路。但是不是什么时候都适合不寻常例如电水壶，永远都是正侧面，因为经过长时间的验证，这个角度是最容易辨认产品本身和最佳的视觉效果。其他角度的叫“闹着玩”！图2-13商品角度3.商品层—抠图问题有清晰轮廓的产品，可以做抠图处理轮廓不是很清晰或者不是很美观的产品，可保留角版处理图2-14抠图图2-15抠图4.文案层—视觉清晰度产品清晰，文案清晰，背景简洁属于高效的信息传达去色后，文案要很背景拉开明度距离，否则文字容易被阅读图2-16视觉清晰度图2-17视觉清晰度现在很多文案策划老嫌说的不够严谨，导致文案文字超级长，我们可以采用分段去做；当然也可以跟策划谈谈人生。文案不要超过8个字图2-19文案图2-20文案如果一个背景颜色足够深，那么写浅色字是比较好的，如果一个背景颜色足够的浅，写深色字是比较好的一个颜色不要同时出现黑色和白色（深色和亮色）图2-21文案颜色图2-22文案颜色搭配5.文案层—逻辑清晰度符合人类内心原欲的文案，往往更容易驱动人类行为。从众：已卖出100000件好奇：神奇手膜，神奇脚模利益：错过今天再等一年恐惧：消灭你家99.9%的细菌自我：这个表有点贵，但是很帅/我们不卖便宜的，只卖好的搞笑：老板不在，全场乱卖/美工辞职了，老板自己来网络流行语在电商上还是很受用的，比如任性，醉了，100块钱都不给我，洪荒之力之类文案核心是了解人性本身，而不是单纯了解你需要推销的本体。如果碰到什么新春特卖，型男必备，春游必备，新款上架，直接把运营或者文案策划掐死就行了。图文不符或者文案不清晰的广告，只能让用户望而却步图2-23图文相符真正的好文案，会击中你内心最薄的那层需求图2-24好文案图2-25好文案6.背景层—背景层分解图2-26Banner的背景层图2-27Banner的背景层1.垂直构图：可以充分显示产品和主体的高大与深度，因此多应用于单薄细长的产品。2.2.3Banner的构图图2-28垂直构图垂直构图图2-29垂直构图2.平衡式构图：平衡式构图可以给人一种完美、满足的感觉，常用于地产设计、茶具设计等。图2-30平衡式构图图2-31平衡式构图3.斜线/放射线构图：斜线具有运动、流动的感觉，常用在运动装备、细长的文具等产品上。图2-32放射线构图图2-33放射线构图图2-34放射线构图图2-35放射线构图4.对角线构图：巧妙利用了对角线的长度优势，使画面动感、活泼，达到吸引视线、突出主体、均衡视觉的效果。图2-36对角线构图图2-37对角线构图5.框架式构图：框架式构图能增加画面的纵向对比和装饰效果，产生深度感。图2-38框架式构图图2-39框架式构图6.九宫格构图：九宫格中的四个交叉点是放置主体的最佳位置，这种构图方式更符合人们的视觉习惯，使主体自然成为视觉中心。即突出了主体，又平衡了画面。图2-40九宫格构图图2-41九宫格构图64画画底部导航栏可以说是现在最流行的导航控件了，微信、支付宝、淘宝、网易云音乐等等，各种类型的APP都有应用。作用是为了做好内容分类，节省屏幕空间，等需要的时候更容易被人找到!实训任务2.5App底部Tab栏设计底部Tab栏是什么？WHATISIT?65手机界面Tab栏设计Tab常见布局根据Banner的位置和主题，选择以下构图屏幕等分减去左右间距后等分图标左右间距手机界面底部Tab栏屏幕等分：技术实现比较简单，市面上使用比较多的样式。计算方法：列宽=屏幕宽度/标签个数。手机界面底部Tab栏减去左右间距后等分：标签之间相对紧凑。手机界面底部Tab栏图标左右间距相等：多用在标签数量为3个的情况，因为用屏幕等分方式图标看起来会比较散，所以可以采用这种方法。69手机界面Tab栏设计Tab背景样式常见样式白色或浅灰黑色毛玻璃透明背景手机界面底部Tab栏白色或浅灰：最为常见的背景样式，它能够更好的突出标签内容，同时不会让底部显得过重。可以使用白色加投影或者底部加浅灰色分隔线的方式将其和内容区分开。手机界面底部Tab栏黑色背景：黑色背景往往用于一些特殊类型的APP，如运动、股票等，渲染氛围。手机界面底部Tab栏毛玻璃：在前2年比较流行，多用在IOS中，给人时尚的感觉，不过会耗费大量资源，目前使用的比较少。手机界面底部Tab栏透明背景：采用透明背景，可以让用户视觉更聚焦于内容本身。但这种方式会导致标签信息展示较弱，所以透明背景多用在内容为主的APP中，如抖音。手机界面Tab栏设计Tab栏展现方式常见样式图标+文字纯图标图标+文字+驼式按钮纯文字手机界面底部Tab栏图标+文字：最常见的标签展示样式，用图标吸引人的眼球，配合文字说明，更能凸显图标标签栏。手机界面底部Tab栏纯图标：采用纯图标样式比较简洁，但识别性较低，一般适用于小众产品中，如花瓣、Pinterest，这2个产品是设计分享类平台，用户群体比较小众且目标用户是互联网从业人员，对这些图标含义较为熟悉，采用这种方式会显得产品比较有气质。手机界面底部Tab栏图标+文字+驼式按钮：这种标签栏样式常见于社区类APP中，采用驼式按钮来突出功能点，引导用户发布内容。如闲鱼PP，点击加号按钮就可发布闲置，调动用户积极性。手机界面底部Tab栏纯文字：采用这种方式能够更直观的让用户进行操作，遵循简单易用的原则。但样式比较单一，适合用户群体跨度较大但产品，多用于直播类、内容类、简单工具类APP中，例如小红书、百度翻译。实训任务2.6移动端界面视觉流程设计画画视觉流程是什么？WHATISIT?视觉流程是通过设计引导使用者的眼睛，通俗的讲就是先看到什么，再看到什么，也就是视觉浏览的顺序。什么是视觉流程？引导使用者的眼睛,首先看到其次看到再其次看到......————————————————————————视觉中心次重点再其次信息点......画画为什么进行视觉流程梳理？WHYDOYOUDOIT?一个好的设计不仅仅是好看，更重要的是做出一个正确的设计，解决实际问题，将信息展示清楚。清晰的展示信息这是非常重要的一个设计理念。手机界面视觉流程如何理解清晰展示信息？HOWDOYOUDOIT?我么可以根据主题和甲方要求，按照信息重要性，着手进行视觉信息的依次梳理。在整个视信息按照重要性的等级排列觉的表现中，有最重要的信息，也有相对次要的信息，如果把这些出来，那么就是有层级。如果我们在做设计之前对信息的层级关系首先做梳理，然后再去设计，这样设计的作品就会产生极好的视觉流程。手机界面视觉流程表现视觉层级梳理信息层级遵循视觉习惯？首先我们要指导人类视觉习惯遵循从左往右、从上到下的轨迹。我们的界面设计要遵循视觉习惯来安排，将重对比法则要的信息放到视觉中心的位置，按照视觉规律来布局各种层级信息。手机界面视觉流程视觉习惯:遵循从左往右、从上到下的轨迹视觉习惯:页面上部比下部更引人注目视觉习惯:页面往往是左边比右边更引人注目信息元素的位置Position视觉流程赏析/遵循对比法则？对比主要分为：大小对比、粗细对比、色彩对比、明度对比。运用对比的法则，来展现各种层级的信息。手机界面视觉流程遵循对比法则遵循图片、图标和文字吸引度？我们需要了解文字、图片和图标的吸引度也是不同的。通常来说，三者的吸引度从大到小排列是图片>图标>文字。手机界面视觉流程吸引度：图片>图标>文字视觉流程清晰如何引导使用者的眼睛：信息元素的位置Position图片文字的吸引度Colour色彩Colour对比：大小粗细