《数字创意设计》课件5　数字APP 界面设计.pptx

数字创意设计职业教育传媒艺术类专业新形态教材主编王嵋徐江

目录数字APP界面设计05动漫人物造型设计01产品外观创意设计02平面图形创意设计03场景概念设计04

数字APP界面设计05

工作项目13APP-Banner设计Banner在UI里表现为横幅的广告版块。它的存在是信息传播的需要，为了配合某个运营活动而做的一个面向用户的展示内容什么叫Banner？为什么要做Banner？Banner的宽高设定根据应用里设定的位置进行设计。Banner的大小如何设定？

怎样设计Banner？不同的构图方式可以传递给人不同的感觉气质，必须根据产品、主题、素材，梳理出视觉层级，选择合适的构图方式。无论是哪一种构图形式，都要注意平衡和各种元素的呼应制约，达到画面和谐。01调查了解设计对象和消费目标对象，设计需要的是有目的和完整的调查。前期调查03此阶段处于各种信息分类和归纳的关键时期，会产生较多的创意想法，草图能够在记录灵感的同时传达多种方案的可能性。草图阶段02根据设计主题，在整体界面大分割的基础上进行初步分析、研究，同时提出多种设计方案，再根据前期调研确定Banner的版式类型。设计构思阶段04对设计草图作全面的分析比较，从优选择最理想的方案，通过平面设计软件，根据形式美法则进一步酝酿，使设计形象逐步具体化。视觉表现阶段

认真阅读任务书和“引导问题”中的知识点，经过前期调查了解设计对象是某款功能饮料，该饮料以“提神抗疲劳”为品牌利益点，目前需要将新的IP形象宣传通过在移动端的APP上进行宣传展示。设计构思草图绘制。任务拆分

工作项目14APP顶部导航栏设计导航栏是用来帮助用户定位、导航、操作的基础组件；既负责告知用户当前所在位置，又负责连通页面跳转路径，允许用户在不同层级的界面之间来去自如，同时还承载了针对当前页面全局性的操作。导航栏有什么作用？导航栏样式分为通栏和非通栏。导航栏的设计样式有哪些？

如何做好导航栏？一级导航有哪些信誉好的足球投注网站框内的文字一般做成28像素，图标的文字做成18像素，二级导航文字会明显变大一些，比如说标题文字，在两倍图750×1334像素的作图尺寸下，设计师会把它做成36像素。文字的字号01会有背景、文字和放大镜的图标在框面，和文字和图标相比会更加集中一些。有哪些信誉好的足球投注网站框02体现出整个界面的紧凑感，并且具有良好的呼吸感，在界面里保持元素与元素之间留白，用户阅读起来会更加舒服流畅一些。留白03

前期调查调查是了解classin项目和目标对象的过程，设计需要的是有目的和完整的调查。目标对象调研分析03项目背景的调研与整理02理解任务书01设计构思阶段根据前期调研，确定顶部导航栏的样式。030201设计主题的定位与分设计风格定位导航栏样式选择

由于设计构思阶段处于各种信息分类和归纳的关键时期，会产生较多的想法和分歧，草图能够在记录灵感的同时还能传达多种方案的可能性。构思草图阶段2铅笔、蜡笔、水彩、曲尺、草图纸等。工具手绘。方式1

视觉表现阶段由于设计构思阶段处于各种信息分类和归纳的关键时期，会产生较多的想法和分歧，草图能够在记录灵感的同时还能传达多种方案的可能性。APP导航栏整体调整，按照尺寸规范，突出主体，均衡画面各APP导航栏元素组合APP导航栏构成元素设计APP导航栏色彩搭配

一般根据标签数量多少决定，标签数量在3～5个之间是比较合适的。这里总结了3种常见的布局方式：屏幕等分、减去左右间距后等分、图标左右间距相等。Tab栏常见布局样式工作项目15APP底部Tab栏设计市面上使用比较多的样式。计算方法：列宽=屏幕宽度/标签个数。标签之间相对紧凑。多用在标签数量为3个的情况，因为用屏幕等分方式的图标看起来会比较散，所以可以采用这种方法。有些特殊情况，标签数量会大于5个，如果继续放在一起会降低视觉美观度和操作体验。那么就要根据产品需要必须置于底部，可以选择将重要标签露出，其他标签放在里面。屏幕等分减去左右间距后等分其他布局图标左右间距相等

背景样式01最为常见的背景样式，它能够更好地突出标签内容，同时不会让底部显得过重。可以使用白色加投影或者底部加浅灰色分隔线的方式将其和内容区分开。白色或浅灰在前2年比较流行，多用在iOS中，给人时尚的感觉，不过会耗费大量资源，目前使用比较少。02毛玻璃黑色背景往往用于一些特殊类型的APP，如运动、股票等，渲染氛围。03黑色采用透明背景可以让用户视觉更聚焦于内容本身,但这种方式会导致标签信息展示较弱，所以透明背景多用在以内容为主的APP中，如抖音。04透明背景

1图标+文字最常见的标签展示样式，用图标吸引人的眼球，配合文字说明更能凸显图标标签栏。3图标+文字+驼式按钮这种