VI设计项目式教程（第3版）（微课版）课件 项目15、16 移动端App界面设计 三彩马创意文化公司App界面设计、VI手册编制“中国结艺”VI手册编制

项目15移动端App界面设计——三彩马创意文化公司App界面设计VI设计项目式教程第3版｜微课版高等院校艺术设计精品系列教材15.1项目描述15.2项目目标15.3知识讲解15.4项目分解目录Content15.5作品欣赏小结15.1项目描述深入了解移动端App应用界面设计的特性，从启动页、引导页、首页、登录页等组成部分和功能方面，完成App界面的设计。本项目选择三彩马创意文化公司App界面设计作为实训内容，读者需根据项目内容完成项目目标。15.1项目描述15.2项目目标15.3知识讲解15.4项目分解目录Content15.5作品欣赏小结15.2项目目标123能够熟练应用软件进行界面设计，并能够根据客户需求与企业文化进行界面设计。培养读者的平面设计能力和形象概括能力。知识目标技能目标素质目标了解界面设计的意义、作用和艺术特点，掌握界面设计的基础知识15.1项目描述15.2项目目标15.3知识讲解15.4项目分解目录Content15.5作品欣赏小结15.3知识讲解1．启动页启动页是用户打开App时看到的第一个界面，它们通常很简洁，往往是一个Logo、App的名称或者是这个产品的一句宣传语。▲App名称启动页▲App名称启动页+宣传语15.3知识讲解2．引导页引导页一般用于首次打开App时展示。引导页通常情况下用于操作引导或活动，目的是传递给用户App更新的重要功能、引导用户了解产品的主要功能、宣传近期的重大活动等，为用户提供美的享受的同时达到宣传的目的。引导页通常会根据产品特征及节日、促销活动等进行变化。▲根据促销活动设计的不同主题的引导页▲宣传产品特征的引导页15.3知识讲解首页是展示App内容和性质的第一个界面，是用户与App产生交互的主要界面，每个手机App都会在这部分展示自己的风格特点。首页的设计取决于产品的类型、产品的核心功能、产品调性、产品版本等。首页包含各种各样常见的重要组件，通常会设置导航栏让用户根据需要访问不同的单元模块。

▲上部应用导航模块，下部推荐资源3．首页▲卡片宫格式界面布局适用于功能众多、各模块相对独立的App15.3知识讲解登录页是保存用户信息的界面，可以为用户提供最有效的数据信息。登录页设计的主要任务是保证用户登录信息录入的流畅性，引导用户顺利进入App。4．登录页登录页设计15.1项目描述15.2项目目标15.3知识讲解15.4项目分解目录Content15.5作品欣赏小结15.4项目分解“三彩马创意文化公司”以销售唐三彩文化产品，展示唐三彩艺术作品为主要运营模式，旨在推广唐三彩文化的传承与技艺的创新发展。此次项目是针对公司App做界面设计，设计时要充分考虑唐朝文化的特点，从色彩、造型、内容上展现唐三彩的艺术特征，另要满足青年受众的喜好，力求符合现在设计潮流，做好唐三彩的传承、保护与发展。15.4项目分解任务1启动页设计启动页是用户对App的最先感知部分,决定着用户是否进入App，是用户对App的第一印象，影响着用户对产品的整体感受。本任务主要针对手机启动页进行设计。设计要点用户为了使用App的某一项功能，在启动页停留时间极短，在最短的时间内把产品核心内容告知用户是启动页设计的要点。15.4项目分解任务实施12上网或查阅书籍搜集移动端手机的类型、尺寸等资料。根据手机尺寸，使用Illustrator进行计算机绘制。15.4项目分解第一步绘制手机轮廓。第二步绘制和添加标志和宣传语，并进行整体修饰。15.4项目分解任务2引导页设计引导页设计决定了App的设计风格，是用户在首次安装并打开App后，呈现给用户的“说明书”。引导页应摒弃所有多余的设计，用干净的界面及有力的宣传语体现本App是真实可信的媒体平台。设计要点引导页的作用是让用户了解这个App的主要功能、操作方式并迅速上手。因此引导页以展示应用的主要功能与特点为主，通常设置3至5张图片即可。15.4项目分解任务实施12确定手机类型、尺寸和引导页模板。根据引导页模板，使用Illustrator进行计算机绘制。11.4项目分解第一步绘制手机轮廓。第二步添加相关内容，调整标志组合形式，进行版式设计和整体修饰15.4项目分解任务3首页设计首页内容要简单明了，一目了然，重在宣传核心内容。设计要点用户所需的所有数据内容按主次合理安排，重要条目要始终显示，并位于页面的顶端中间位置。导航消息、提示、通知等重要信息位于屏幕中容易找到的位置。App的导航一般采用底部导航的形式，菜单数目4～5个最佳。主页的长度不宜过长，采用上下滚屏的形式，但滚屏不宜过长(最长4个整屏)。各条目合理分类于各模块内，并运用标题将各区域进行清晰划分，文本区域之间还应留有足够的间隔。按照操作习惯，一级导航放置在左侧面板。15.4项目分解任务实施12确定手机类型、尺寸和首页模板。根据首页模板，使用Illustrator进行计算机绘制。15.4项目分解第一步绘制手机轮廓。第二步添加相关内容，调整标志组合形式，进行版式设计和整体修饰。15.4项目分解任务4登录页设计大多数App都要求用户注册和登录个人账户，登录页设计应该简洁清晰，方便填写注册信息。设计要点登录页是App中最常展示的界面之一，是用于用户输入个人信息的界面。登录页内容设计应简洁、清晰，使用户能快速完成操作。15.4项目分解任务实施12确定手机类型、尺寸和登录页模板。根据登录页模板，使用Illustrator进行计算机绘制。15.4项目分解第一步绘制手机轮廓。第二步添加相关内容，确定登录页的版式设计与标志的组合形式后，进行整体调整11.1项目描述11.2项目目标11.3知识讲解11.4项目分解目录Content11.5作品欣赏小结11.5作品欣赏11.5作品欣赏小结本项目旨在使读者熟悉移动端App启动页、引导页、首页、登录页设计的知识，掌握设计的方法与技巧，使读者能够运用所学知识根据App宣传主体的风格来完成各类界面的设计。项目16VI手册编制——“中国结艺”VI手册编制VI设计项目式教程第3版｜微课版高等院校艺术设计精品系列教材16.1项目描述16.2项目目标16.3知识讲解16.4项目分解目录Content小结16.1项目描述VI手册的组成内容部分需要设计师根据企业理念高度概括地说明手册的内容，基础系统部分包括企业标志设计诠释、公司名称标准字体设计、公司名称组合形式、企业辅助色和辅助图形等内容；应用系统部分包括企业标志设计在不同区域的标准或设计样本，以及每一个应用项目的规格及施工标准。本项目选择“中国结艺”为实训内容，学生需根据项目要求完成VI手册内容的编排。16.1项目描述16.2项目目标16.3知识讲解16.4项目分解目录Content小结16.2项目目标123能够结合计算机软件编排手册内容，并能够进行后期制作，能在规定时间内完成VI手册的印刷装订。培养学生对VI手册整体设计的把握程度。知识目标技能目标素质目标了解VI手册的编制原则、编制形式，并结合企业理念的要求，制定企业形象宣传的规范标准。16.1项目描述16.2项目目标16.3知识讲解16.4项目分解目录Content小结16.3知识讲解一、VI手册的编制原则123VI设计，必须以标志为核心，从开发VI设计系统做起，将基础要素设计定型、规范，再将之运用于应用项目中，并结合不同的项目特点进行设计。一般应先选择具有代表性的应用项目范例，将它们规范化并制成企业识别手册，这样就可以以手册为标准，相近的应用设计项目参照执行，以便企业形象的规范和统一。严格遵守VI手册内的规定，在具体使用过程中，还要注意创造力的发挥。16.3知识讲解1．单册编制二、VI手册编制形式将基本要素系统和应用要素系统项目，按一定的次序进行编制并装订成一册，采用活页形式，以便修正、替换或增补。▲小太阳教育科技公司VI手册16.3知识讲解依照基本要素系统和应用要素系统项目的不同，或者企业内部机构的不同（如分公司），分开编制，各自装订成册，通常采用活页形式，以便修正、替换或增补。2．分册编制日本长崎制铁VI手册设计16.3知识讲解因为VI手册是根据企业经营的内容而定的，随着企业经营或服务的内容不断增加，VI手册的内容可以不断充实。另外，VI手册做成活页或分册的另一个原因就是使用方便，可以任意取出需要的部分，使用后再放回去。▲奥斯陆申办2022年冬奥会VI手册设计16.1项目描述16.2项目目标16.3知识讲解16.4项目分解目录Content小结16.4项目分解“中国结艺”是一家以销售中国结为主的特色店铺。为突出中国结的形象特征，标志设计以中国结为主体形象，搭配中国红的主体颜色。设计时要体现出我国传统意味的典雅、喜庆，还要结合现代生活的简约、时尚等特点，同时注意排版的统一性和主色调与标准色的统一。16.4项目分解任务1VI手册封面、封底设计设计要点设计VI手册封面和封底部分时需要考虑标志设计中标准色、辅助图形部分，使其与VI手册形成统一的整体。16.4项目分解任务实施1.在Illustrator中设定尺寸，宽度420mm，高度285mm。16.4项目分解2.根据企业理念，选用标志设计基础系统部分中的标准色或辅助图形等内容，作为VI手册封面和封底中的底图部分。16.4项目分解3.根据标准色设计的封面与封底，最终效果如下。16.4项目分解任务2

VI手册内页设计1.标志设计基础系统内页设计，主要传达企业标志设计规范。因此，内容需明确，排版需整齐富有节奏性，方便实施。2.标志设计应用系统内页设计，以突显效果图为目的的编排设计。设计要点16.4项目分解任务实施中国结艺VI手册总目录设计▲16.4项目分解中国结艺VI手册A