模块解读

项目说明

全栈策划与开发岗位特点：从业人员用一两年时间熟悉某领域后，学习效能随着经验增长而不断提升，能够游刃有余地应对全流程业务。

全栈策划与开发岗位出现的背景和必要性：运营理论快速发展；工具越来越多样化；产品越来越趋同，运营的重要性日渐突出。

全栈策划与开发岗位的要求：全流程掌握、全业务熟悉，了解运营边界的多面手；运营不再是具体职责，而是工作内容，以项目组的形式生存。

新媒体营销全栈：指同时具备新媒体运营、短视频运营、短视频电商直播、社群运营、活动策划运营能力。

全媒体设计全栈：指同时具备UI设计、电商设计、平面设计、新媒体传播介质设计（长图、H5、海报、新媒体文案视频封面、插图）、视频拍摄剪辑、直播场景设计、网页设计（界面、代码前端）能力。

而本模块的全媒体产品全栈策划与开发主要针对全媒体产品进行调研、数据分析、创意构思、策划、设计制作、平台运营等技能，并且能够运用这些技能独立完成产品开发运营全流程。

项目目标

· 掌握品牌标志设计的方法

· 掌握新媒体界面排版的方法

· 掌握信息长图设计与制作的方法

· 掌握H5（HTML5）页面创意设计的技巧

知识补充

（1）品牌标志

①品牌起源

在中世纪的欧洲，手工艺匠人用打烙印的方法，在自己的手工艺品上烙下标记，以便顾客识别产品的产地和生产者，这就产生了最初的商标，并以此为消费者提供担保，同时向生产者提供法律保护。

在中国春秋战国时期，商品交换促成城市和集市的发展，也相继出现行商和坐商。坐商就是早期的商店，以布帘或木板为招牌，书写“字号”以区隔其他商家，这就是中国最早的商业品牌概念。宋朝刘家功夫针铺的“白兔”包装图案基本上具备了品牌商标的特征。目前，中国现存一大批拥有世代传承的产品、技艺或服务的“老字号”，其品牌是数百年商业和手工业竞争中留下的瑰宝，被称为“中华老字号”（图 2-1、图 2-2）。

②品牌的概念

1955 年奥美广告公司的创始人、著名的广告大师大卫·奥格威从广告传播的角度首次提出了品牌形象理论。他认为“品牌是整体形象而不是细微的产品差异”。1994 年著名营销学家菲利普·科特勒对品牌的概念进行了新的界定：“品牌是销售者向购买者长期提供的一组特定的特点、利益和服务。”这个定义比较全面、完整地阐述了品牌概念的内涵。

③品牌标志的作用

据心理学家分析，人们的信息 85%是从视觉中获得的，因此，建立良好的品牌视觉形象是品牌具有竞争力的第一步。标志（logotype）对公司来说，具有识别和推广的作用，形象的徽标可以让消费者记住公司形象和品牌文化。标志作为企业CIS（企业形象统一战略）战略中最主要部分，在企业形象传递过程中，是应用最广泛、出现频率最高，也是最关键的元素（图 2-3—图 2-7）。

（2）新媒体广告界面

新媒体广告是指建立在数字化技术平台上的、区别于传统媒体的、具有多种传播形式与内容形态的并且可以不断更新的全新媒体介质的广告。新媒体广告类型较多，本模块重点介绍微信广告、短视频App广告、微博广告和QQ广告。

①新媒体广告类型

· 微信广告

微信自营的广告始于微信运行 4 周年的 2015 年 1 月 21 日，第一条是署名为“微信团队”的用户发布的6张带字的图片。这条朋友圈广告的右上角有“推广”两个字，点开左上角的链接后会出现一个图片，上面写着“广告是生活的一部分”。该广告是微信广告的自我宣传，也成为微信的一种盈利模式（图 2-8）。

微信广告又分为微信公众号广告、微信朋友圈广告和微信小程序广告。

微信公众号广告：微信公众号广告常以公众号文章内容的形式在公众号文章中部、底部、视频贴片广告三个广告位进行展示（图 2-9）。

微信朋友圈广告：该类广告的展现位置是在微信朋友圈的信息流中，包括微信朋友圈全幅式卡片广告、微信朋友圈选择式卡片广告、微信朋友圈基础式卡片广告、微信朋友圈常规式广告（图 2-10）。

微信小程序广告：微信小程序广告即是投放在小程序广告位中的广告，其类型主要可分为微信小程序激励式视频广告、微信小程序横幅广告（Banner）和微信小程序插屏广告（图 2-11）。

· 短视频App广告

短视频App广告是以短视频App，如抖音、秒拍等短视频软件为平台，继传统视频广告之后的一种新型广告形式。与传统的长视频广告相比，短视频广告的最大特点就是时间短、节奏快，并且能够在互联网新媒体平台上进行实时分享和无缝对接，有着非常独特的优势，营销效果佳、互动性强、能满足移动时代的碎片化需求、覆盖面广。如小米在抖音上发布了“小米 10 记录向往的生活”话题活动（图 2-12）。

· 微博广告

新浪微博是目前国内较大的社交媒体平台，主要通过明星入驻吸引众多网民注册。微博广告种类多，包括开屏广告、信息流广告、板块植入、关键词搜索、KOL动态广告等类型（图 2-13）。具有互动性强、易于精准投放等优势。

· QQ广告

手机QQ广告：包括QQ看点信息流广告、QQ看点底部大图广告、QQ购物号广告、QQ天气广告等（图 2-14）。

QQ空间广告：包括图文卡片广告、视频故事广告、沉浸视频流广告、多图轮播广告、随心互动广告等。

②新媒体广告界面版式

新媒体广告界面的版式设计就是在有限的版面空间上，将文字、图片、符号、动画、按钮等视觉元素进行艺术处理和组合排列，使它们生成具有传播力和影响力的内容并进行传播。从功能上来说，新媒体广告界面可以分为两大类：一类是信息展示型界面，另一类是功能操作型界面。

· 信息展示型界面

信息展示型界面按照其不同特性，主要分为以浏览引导为主、以品牌传递为主、以提高浏览效率为主、以信息展示为主的界面。

以浏览引导为主的界面：由于浏览引导界面以引导用户的视线为主，因此会有一条很明显的引导主线。最适合这种界面的类型为上下分割型、左右分割型、中轴型以及曲线型（图 2-15）。

以品牌传递为主的界面：以品牌传递为主的界面需要突出品牌特点，让人的视线集中在品牌形象上，版面设计中满版型、中心型和自由型的布局比较适合这类应用界面（图 2-16）。

以提高浏览效率为主的界面：这类界面需要一条非常清晰的主线把大量的信息进行分类，让用户更容易阅读。骨骼型版面设计比较符合这类型的排版方式，它能够对信息进行很好的分类梳理、分区展示，让用户能够快速抓住信息（图 2-17）。

以信息展示为主的界面：这类界面最重要的是将信息直观地展示在用户面前，让用户能够快速、直观地获取信息。能够较好满足这类信息的版面设计主要有上下分割型、中轴型、自由型、骨骼型以及对称型（图 2-18）。

· 功能操作型界面

功能操作型界面需要用户进行操作，以使用户能够高效地获取他们想要的功能。在版面设计中，比较适合功能操作型界面的版式构成的类型有：水平分割、垂直分割、水平—垂直分割等。

水平分割，强调了水平线的作用，使页面具有安定、平静的感觉，观众的视线在左右移动中捕捉视觉信息，符合人们的视觉习惯。水平分割又分为：水平均匀分割、水平不均匀分割、水平多次分割和水平变化分割。

水平均匀分割是将页面分割成上下相等的两部分。上半部用作视觉表现调动兴趣，下半部用来解释说明（图 2-19）。

水平不均匀分割是将页面分割成上下不相等的两部分。一般来说，如果在上半部安置标题或导航，则面积较小，如果在上半部安置图片或主体形象，则面积适当加大（图 2-20）。

水平多次分割是将页面沿水平分割成大小不等的几个部分。多次分割有助于不同信息的归类（图 2-21）。

水平变化分割是在分割的基础上进行变化，同时与斜线、弧线相结合，避免了页面的死板，产生运动和速度感（图 2-22）。

垂直分割，则强调了垂直线的作用，使页面具有坚硬、理智、冷静和秩序的感觉。垂直分割又分为：垂直均匀分割、垂直不均匀分割、垂直多次分割和垂直变化分割。

垂直均匀分割是把页面分割为左右相等的两部分。当左右两部分形成强弱对比时，会造成视觉心理的不平衡。这时，可将分割线作部分或全部的弱化处理，或在分割处加入其他元素，使左右部分的过渡自然而和谐（图 2-23）。

垂直不均匀分割是把页面分割为左右不相等的两部分。左边的视觉注意度较高，因而放置标志、导航信息、主体形象等（图 2-24）。

垂直多次分割是把页面沿垂直方向分割成大小不等的几部分（图 2-25）。

垂直变化分割是将分割进行特异性处理，获得耳目一新的效果（图 2-26）。

水平—垂直分割，在页面中将水平与垂直分割交叉使用，其对比关系更强烈，较之单一分割更为丰富、实用、灵活（图 2-27）。

（3）信息长图的类别与排版

信息长图是近年来在新媒体广告中运用较多的一种类型，这类广告以交互折叠的形式减少信息图长度，通过添加音视频和动画让信息图更加生动，大大拓展了信息图类的应用场景。

①信息长图的类别

信息长图分为折叠信息的信息图、横向滚动信息图、动态信息图和融媒体信息图。

· 折叠信息的信息图

折叠信息的信息图是将长图信息通过交互折叠的方式将大段信息隐藏起来，这种交互形式可以增加内容可读性、趣味性，有助于赋予受众沉浸感、代入感，让受众直观地了解和获取信息（图 2-28）。

· 横向滚动信息图

横向滚动信息图是将特定信息图内容进行横向布局的一种类型。这种信息图主要用于需可视化的区域较大的信息内容（图 2-29）。

· 动态信息图

动态信息图是在长图信息中加入了动画的元素，动画可以让信息图变得更加生动活泼（图 2-30）。

· 融媒体信息图

融媒体信息图是在静态的信息长图中添加动画、音频、视频等多种媒体形式，进一步丰富和拓展了信息图的形式和应用场景（图 2-31）。

②信息长图的排版方法

· 重复元素的布局

重复是为了让视觉形成统一，可以是对字体、颜色、大小、空间、形式、框架的重复，当然，它并非简单地复制同样的元素，而是按照一定的规律，在页面中产生连续的变化。

· F形布局

F形布局是一种十分传统但又非常科学的布局方式。我们看一个页面，通常情况下是先看左上角（如logo、导航、标题等），然后从左往右看水平方向的内容，再从上往下浏览整个页面，由此便形成一个F状的视觉路径。

· Z形布局

Z形布局是页面布局中经典的排版方式。当我们浏览一个页面时，眼球会左右移动进行阅读，同时也会从上往下阅读，由此形成一个左右移动的Z形路径。

· 卡片式布局

卡片式布局是栅格系统下引申出来的一种布局方式，也叫容器风格设计，是把文字、图片等信息元素集中划分在一个卡片中，通过卡片的累积形成一个完整而又简洁规范的页面，通常用于电商（如淘宝、京东）、平台网站（如站酷、优酷）等信息量大而复杂的页面之中。

（4）H5（HTML5）页面创意与策划

HTML的英文全称为Hyper Text Markup Language，中文名称为超文本标记语言，是一种语言标准。HTML5 是对HTML标准的第五次修订，简称H5。H5 的本质是基于HTML5 语言标准开发的网页。

随着当今互联网技术的发展以及用户需求的不断提高，HTML5 广告作为新媒体的新兴产物，因其低成本、跨时空、便捷、即时的特点得到广告主及用户的青睐。随着移动端硬件的升级，这些特性也得到了进一步凸显。HTML5广告在未来会被广泛使用，在技术与形式上也会不断更新发展。

①HTML5广告分类

运营活动类：这类HTML5 广告是占比最多、最常见的，多运用于电子邀请函、贺卡、小游戏、企业活动等方面，形式新颖且多样化，内容丰富且具有多媒体特性。

宣传品牌类：这类HTML5 广告页面相当于是一个品牌的微官网，主要是为了塑造品牌的良好形象，让更多用户熟知并了解品牌，向用户传达品牌文化、塑造品牌形象。

介绍产品功能类：这类HTML5 广告主要是将内容集中在介绍产品的功能属性上，聚焦于产品的卖点及优势，借助HTML5 多维感官的特性将产品的功能最大程度地传达给用户，让用户熟知产品，激发用户的购买欲望从而产生相应的购买行为。

应用数据类：这类HTML5 广告是以用户的使用行为数据为基础，具有个性化色彩，例如网易云、QQ音乐的年度音乐总结、支付宝的年度账单等。用户基于社会因素和心理因素，更愿意将这类H5 转发至朋友圈。

②HTML5广告的设计要点

· 明确广告主的需求

首先，设计师要明确广告主想发布的网页广告属于哪一类型；其次是了解广告主所投放广告的目标受众群体的具体分类，并以此思考H5 的方式；最后明确广告主对产品与服务的价值定位需求，这也关系到广告的传播效果。

· 开发合适的互动机制

互动目的是从受众者的角度，思考受众者在情景互动中想要获得的信息或体验需求。互动内容是互动中最为重要的部分，应重点突出受众者最感兴趣和关心的信息，加强互动创意设计的规则性、情节性和趣味性。合理地选择互动的媒介，如以快捷、新颖为目的的互动广告可以选择手机互动广告；在数字电视上比较适合投放咨询式的互动广告；网络上适合投放浮动广告以及文本链接式的互动广告。

· 打造体验式的设计

受众者在互动中所呈现出来的状态就是体验，通过这种体验给受众者留下深刻的印象，由此而产生广告效果。因此，设计者要从受众者的角度出发，围绕情景和氛围进行设计，使其在互动中得到情感体验和感官刺激，同时给受众者足够的产品品质及特性的信息（图 2-32）。