首页

顶部导航栏设计样式汇总

鹤鹤

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助自己和小伙伴们更好地理解导航栏这个组件。

顶部导航栏作为我们使用APP时每天都要遇到的组件,出镜频率极高,看似简单,其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助大家更好地理解导航栏这个组件。


一、常规导航栏

所谓常规导航栏,主要是指固定在状态栏下,能清晰分辨出的一行导航栏,主要由操作图标、标题、搜索框、背景等组成,大致分成三种,分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏。


1.简单标题导航栏

简单标题导航栏常见于二级详情界面或导航简单的一级界面,主要由操作图标与标题组成,如下图:

(以下涉及的尺寸大小都是二倍图下的设计大小)

该类型的导航标题的大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景色多采用白色或APP主题色。并且很多APP为了保证整体界面的简洁,还会去除导航栏底部分割线,仅采用白色作为背景。


2.搜索框导航栏

常规搜索框导航栏是在简单标题导航栏的基础上,增加了一个搜索框,一般去除了导航标题。如下图:

搜索框的宽度随导航栏中操作图标的多少决定,搜索框高度多采用56~60px,搜索框中的图标设计尺寸多采用32px(为了减少切图尺寸,也可采用48px的切图大小)。

 

在摆放图标时,采用左右间距等分,距离搜索框的间距与边距相等,看起来会更舒适。如下图所示:


3.Tab/分段控件导航栏

Tab左右切换顶部导航栏与分段控件顶部导航栏,都是顶部有多个标题切换的导航栏样式,分为选中标题与未选中标题,如下图:


分段控件顶部导航栏一般有2~5个可选项,且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项),并且可以左右滑动切换,选中样式也比较丰富,常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题),如下图:



二、通栏导航栏

通栏导航栏与常规导航栏的构成基本没有区别,最大的不同是,通栏导航栏的背景层一般与下方的模块打通了,在视觉上看起来更为统一,还能一定程度上节约界面空间。如下图:

通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中(多伴随着背景处理),有些也会放在顶部通栏Banner上,节省空间的同时减少割裂感。


通栏导航栏的背景处理方式一般有三种

1.特殊背景处理:与下方模块整体风格保持一致,多采用与下方一致的图片背景;

2.颜色、渐变背景:采用纯色或是渐变背景,常见于卡片风格的界面;

3.黑色透明渐变蒙层:采用一层渐变蒙层,常见于图片Banner上,保证导航栏文字的可识别性。




三、大标题导航栏

自ios11发布后,大标题风格的导航栏便开始流行起来,尤其是飞机稿总能看见大标题导航栏的影子。普通的导航栏在二倍图下高度只有88px,标题字号为36px,而大标题导航栏在二倍图下高度足足有192px,标题字号为68px。


但并不是所有APP都适合使用大标题导航栏,并且即便使用大标题导航栏,整个APP中也不会全部使用,使用中界面向上滑动也会切换成正常状态的导航栏或直接隐去导航栏,便于内容的查看。

 

有些APP也会折中使用,在常规88PX(二倍图)导航栏高度下,放大字号,隐去分割线,使标题看起来更大。



使用大标题导航栏,你需要考虑以下两点:

1.是否需要帮助用户快速确认所处位置(多为产品页面重复性多,或是功能单一的APP);

2.APP整体风格是否偏向简约大气。

大标题导航栏总给人一种高逼格的感觉,这也是为什么飞机稿喜欢使用大标题,但却没见国内的电商APP使用。



四、小程序导航栏

微信的小程序导航栏,在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,微信配置了一深一浅两种风格。

 

从APP转换到小程序时,要注意调整APP的顶部导航栏的位置以及搜索框的大小,避免被Titlebar遮挡,如下图:

上图中,豌豆公主的顶部导航栏整体下移,并且减小了搜索框的高度,提高屏幕的利用率。


五、划重点

·常规导航栏主要包括简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏通栏导航栏

 

·通栏导航栏要注意导航背景的处理,常用的有特殊背景处理、颜色渐变背景、黑色透明渐变蒙层

 

·大标题导航栏使界面整体更有逼格,但不是所有APP都适合的,要根据情况合理使用

 

·微信小程序导航栏在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,从APP换到小程序时要注意重新调整导航栏

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务



css高级选择器和基本选择器

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

ID选择器>类选择器>标签选择器
行内样式>内部样式>外部样式
*结构伪类选择器 一旦设置 不管在行内还是在后面重新设置,都没办法改变
*结构伪类选择器设置奇偶行以及从第三行开始变色如何实现
nth-cild(2N+3)表示从第三行开始的奇数行
同理 nth-child(2N+4)表示从第四行开始的偶数行
nth-cild(2N+5)表示从第五行开始的奇数行
*设置前三个:
p:nth-child(-n+3){
background-color: #b3d4fc;
}
*使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置

注意
child 跟子选择器没有关系,可以是子选择,也可以是后代选择 由层次选择器 (如table tr)来控制

1.层次选择器
table td 后代选择器 td包含在table里
div>p子选择器 p是div的子元素
p1+p p1后面一个兄弟p变化 是对p进行处理 p1不变 而且只是下面相邻的变化 上面相邻不变化
p1~p p1后面所有兄弟p变化 p1不变
2.结构伪类选择器
P:first-child 作为父元素的第一个子元素得元素 p
P:last-child 作为父元素的最后一个子元素得元素 p
P a :nth-child(n) p中第n个a元素 (even)(odd)
p:first-of-type 必须是p元素 不是子元素也行
p a:nth-of-type(n)
必须是a元素 不是a的子元素也行
3.属性选择器
a[id] a标签中含有id的
a[id=111] a标签中的id=111的
a[href*=http] a标签中包含href属性 且都包含http
a[href&=png] a标签中包含href属性 且最后以png结尾
a[href^=http://] a标签中包含href属性且以http://开头
1.层次选择器

*相邻兄弟选择器,只对后面的兄弟有作用,对前面的兄弟没效果。
*相邻兄弟选择器,E+F E不会产生效果效果

2.结构伪类选择器


使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置

注意
child 跟子选择器没有关系,可以是子选择,也可以是后代选择 由层次选择器 (如table tr)来控制
设置前三个:
p:nth-child(-n+3){
background-color: #b3d4fc;
}
3.属性选择器

举例:
a[href=^http]{backgroud-color:red}

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

想做大数据可视化?来看高手的实战案例!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在大数据时代,数字化转型已经成为行业迫切的需求。2016-2018年金融、医疗、政府、安全等行业在大数据方向上的投入持续增加,大数据可视化的需求呈现爆发式增长,相关产品也纷纷推出:阿里 DataV 的「双十一的天猫可视化大屏」、360的数博会企业安全大屏、帆软的 BI系统。面对井喷式的市场需求和部门业务在 To G、To B 的拓展需求,需要快速储备大数据可视化的能力,作为一个 To C 的设计团队面临的挑战和责任都是巨大的。

(编者注:由于本文动图太大,将近100M,为了不影响移动端读者的阅读体验,本文图片都是静态截图,动图文章链接戳:https://docs.qq.com/doc

一、项目背景

在过去一年中,潘洛斯(Penrose)团队参与了「灵鲲」态势感知系统、「麒麟」系统、「鹰眼」反电话诈骗系统等14个大数据可视化产品的设计。随着产品不断的探索和迭代,积累了一些行之有效的大数据可视化设计的心得和方法。基于「灵鲲」这个案例,分享一下我们在大数据可视化方向的设计和思考,希望能够给对大数据可视化感兴趣的同学提供一些思路。

「灵鲲」是 MIG 安全云部门与潘洛斯(Penrose)团队合作的,基于潘洛斯大数据可视化引擎衍生出的一款金融风险监控可视化产品。应北京与深圳金融办的需求,搭建灵鲲金融风险态势感知系统,实现事中风险控制,减少网络欺诈损失。

着手设计之前,我们需要了解:大数据市场规模和各行业投入有多大, 政企客户的大数据可视化产品的痛点是什么?对比深耕多年的竞品,我们设计的突破口在哪?——挖掘我们的机遇和发力点。

二、我们的客户,目标群体

数据显示,2017年中国大数据产业规模为4700亿元。随着一系列政策的出台,大数据国家战略正在加速落地,大数据行业将持续增长,预计2018年中国大数据产业规模将达到6200亿元,增幅达32%。需求层面,预计2020年大数据应用市场需求中,仅政府需求就占比35%,另外包括医疗、交通、金融等多个行业在大数据和信息化建设投入也将持续增加。

除了旺盛的需求以外,我们还注意到很多政企内部数据基础很好,以宜昌为例,宜昌智慧办汇集了来自32个部门、60个系统的大量详尽的实施城市数据。与这些政企单位合作,易形成行业灯塔,便于规模复制。另外,针对大数据可视化,目前政企已不满足于「面子工程」,更多的希望大数据可视化与 AI 结合,呈现更复杂多样的数据,以辅助决策。

基于以上的市场潜在规模的考察和典型客户研究,在进行「灵鲲」产品能力规划时,我们主要考虑以下三类使用场景: 政府机构决策、展会展台及参观视察。

在金融局等相关政府机构的日常工作中,决策层和相关工作人员会基于实时金融平台数据,针对日常事务或紧急事件进行决策管理,监控大厅也就应运而生。基于这种工作方式,我们可以发现潘洛斯的产品特性非常契合监控大厅的使用场景。在监控大厅中,用户是通过两种不同的信息界面进行工作的,分别是综合数据可视化大屏(总屏)以及工作人员独立使用的电脑屏幕(分屏)。其中,在总屏上,呈现的内容通常是一些对于决策者来说至关重要的信息:正在发生的事件的状态和可能趋势(发生了什么)、值得注意的风险(需要团队做什么)以及风险的处理进度(团队做的怎么样);而在分屏上,主要为工作人员提供数据分析及风险事件处理功能,帮助团队对事件迅速作出响应,协作。

不同于工作场景,灵鲲产品在展会中展台的主要受众是参会人士,除了一般民众外,更有价值的观众主要来自于媒体和潜在客户等。所以在这个场景中展示的内容与实际工作中的数据可视化内容有一定的区别,更多的是对产品能力的展示、产品的宣传以及社会价值的呈现。如何直观的呈现产品的能力,并使观众快速获得有价值的信息并留下深刻印象非常重要。这也决定了在这个场景中,用户不仅包括观众,也包括演讲者。我们需要考虑如何通过控制端让讲演者而流畅的完成产品介绍。

在金融局等政府机构,经常会有上级领导视察参观的接待活动。这些来访的贵宾往往希望了解关于机构更全面和具体的信息,包括但不限于工作流程、工作成绩等,所以我们认为这个场景综合了以上两种场景的主要特点。这里的用户包括来访人员,演示人员以及工作人员,展示的内容也往往不局限于金融风险大数据的可视化,还会包括工作方式和流程本身。

三、行业竞品对比,反观自身发力点

通过对阿里 DataV,AntV、360、帆软的大数据可视化产品的体验,我们从产品呈现、产品体验、产品技术、部署方式和商业模式几个维度的横向对比。阿里的技术对可视化效果的局限性很大,优点是产品实现模板化、系统实时可交互,用户可以快速搭建自己的可视化产品;360产品可视化呈现3D化,数据呈现效果和数据感知度较2D更优,但是系统非实时可交互,而且搭建周期长,成本较高;帆软的可视化是传统报表型,可视化效果呈现缺乏竞争力。

经过对比,我们不难发现3D化数据呈现能力和数据感知度是最高的。但是局限于目前的技术,项目成本高、研发周期长、难以满足业务的发展速度。

四、我们的机遇和挑战

基于市场需求和竞品分析,我们从以下三个方面分别分析了产品的机会和突破点:

  • 可视化:数据和场景的呈现3D化,满足更多维度的数据呈现,支持云+本地实时大数据呈现能力;
  • 产品化:场景、组件、数据、图表全部实现可云端动态更新和配置的模块化,降低维护成本、提高服用率、缩短项目周期,无缝打包接入业务数据,提供丰富可自定义的可扩展接口;
  • 大数据+AI:基于公司多领域多业务线的大数据融合以及 AI 能力提供丰富的基于时间、空间、数据的预测预警、统计表达能力。
1. 产品架构规划

基于对灵鲲态势感知系统的使用场景、用户需求以及机会点的考虑,我们规划了未来产品的整体架构,包括大屏端、云端、客户管理端、小屏端以及虚屏端。大屏端基于本地端引擎进行大数据可视化呈现。客户管理端包括报表和配置管理等工具,帮助用户进行分析数据和策略管理。小屏端主要考虑操作控制和移动办公等移动使用场景,提供大屏控制、移动审批、监管、公众号等功能。以上三个端由云端拉取和更新数据。虚屏则提供差异化的大数据可视化体验,如增强现实等新奇有趣的玩法。由于大屏端在我们的规划里是态势感知系统的核心,且落地到合作方的模块,以下分享的内容将主要围绕大屏的内容设计展开,未来如果产品规划中的其他模块陆续上线,我们再做分享。

2. 大屏内容设计

本地端引擎

早期我们设计的「麒麟」系统、「鹰眼」反电话诈骗系统在对外在大屏上展示主要是通过 web 端的方式去实现,虽然适配性尚可,但很多设计效果无法完全还原。我们也尝试性用 webGL 和 three.js 的方式把设计效果再做进一步提升,但迫于研发周期和实际性能的压力,最后也只能作罢。中期我们尝试使用3D工具输出视频的方式做过一些过渡,输出效果是没有问题,但如果在展会上遇到媒体采访,事情就会变得异常尴尬。媒体会询问展示内容的真实性,数据的实效性,甚至采访的时候需要停留在某一个画面,我方参会人员配合起来非常麻烦。后来我们也研究过竞品使用的工具,例如 Ventuz,工具最终输出的效果是不错,但是界面、操作极其复杂,相关教程和素材在网络上极少,授权费用也相当昂贵。最终经过我们内部商讨和研究,也请教了一些 IEG 专家的意见,决定使用游戏引擎作为本地端的显示引擎。

Unity 和 Unreal 我们也纠结过许久,甚至 Unity 上我们也出过可交互的 Demo,但最终选择了 Unreal 的原因主要有以下几个点:

  • 基于前面我们提到的产品架构,我们的核心是在大屏,而大屏部署主要依赖 PC 做为计算平台,相较于 Unity,Unreal 在 PC 端的技术积累要更加深厚,实时渲染出来的光影效果和质感表现要更稳定于 Unity 的输出;
  • Unreal 自带蓝图-可视化脚本系统,这对于设计团队出身,零代码开发经验的我们来说上手、学习起来更快更方便;
  • 线上有大量的视频教程,各种插件和美术素材也比Unity更丰富;
  • 有《蝙蝠侠:阿卡姆骑士》、《最终幻想15》和《绝地求生》这些3A沙盘游戏作为先例,Unreal 对于大规模的场景渲染能力是可被预期的,而 Unity 目前还没有可以拿得出手的案例。

色彩基调

为了打造灵鲲产品的可视化,在竞品中脱颖而出,我们从产品功能、用户、愿景三个维度发散,提炼出设计指南的关键词:智能、直观、未来,塑造独特的大数据可视化风格体系。

灵鲲金融态势感知系统内容架构分为数据维度和场景维度,数据是核心,场景是大数据呈现的承载体;场景使用具有金属质感的深青灰,符合理性的、冷静的、智能化产品的个性;数据色彩使用透明、发光、具有未来感的高亮色,和场景形成强对比,使数据更为突显、更具吸引力;为了强化客户对于风险的感知,通过颜色区分数据的风险等级,更直观的传达数据的含义。如:高风险的使用红色,红色让人联想到危险、警报。

呈现方式

在现有的产品和传统认知中,大数据产品内容是各种样式的图形和图表,主要以平面为主。我们从游戏、科幻电影中收集了一轮大数据可视化内容相关的案例,从视觉维度上看,主要有这几个特点:一、具有很强的空间感,支持多种数据同屏呈现,可交叉分析对比,承载性强;二、高精度的模型和材质,丰富的粒子、动效,更加贴近现实的光影呈现;三、互动性强,可交互,实时演算。

从大数据可视化的内容维度上看,梳理的3D架构,主要包括:数据维度>基础建设>交通运输>行政分区>自然条件。

数据维度层是最核心的部分,位于场景上方最突出的位置,能够更清晰的展示风险数据的分布、量级;行政区域和交通层是城市场景最基础的数据维度,方便用户进行区域的数据对比和分析;基础建设层包括城市的建筑、标志性建筑、照明、桥梁、等,还原城市独特风貌;通过突出城市的标志性建筑,强化城市、区域的识别性,辅助数据传达;自然条件层包括地形、河流、植被、展示真实的环境特征,用户更有代入感。

△ 北京场景

△ 鸟瞰视角、漫游视角自由切换,满足全局、街道、建筑的不同颗粒度的数据呈现,方便用户进行纵向的数据对比。

△ 场景整体风格图

数据表现

灵鲲的3D数据样式有柱状图和散点图。如何把司空见惯的数据样式,设计出产品的个性,是我们重点要解决的问题。为了体现大数据的力量感,使用科幻电影中的聚合能量、发光的能量石作为柱状图的主图形;同时把数据采集、融合、分析的过程具象为动态粒子网络,作为辅助图形。数据图形和结构中都融合了品牌 DNA 的三角图形,数据样式更具有品牌的个性。

△ 柱状图

△ 散点图

预见未来的功能创新

时间线:3D的维度基础上,我们增加了时间的维度,通过拖动时间线查看不同时间点的数据的变化趋势,由此对未来数据进行预测。为了强化用户对于时间感知,设计了白天和晚上两种风格,白天和夜晚随着时间变化而变化。

天气系统:天气是未来数据分析极其重要的一个因子,它会直接影响交通(例如人流、物流、航空)、医疗(例如疾病传播、医院就诊)等领域。所以我们设计了通用的天气系统组件,呈现实时天气情况,以辅助用户进行数据分析。

控制端:符合大屏使用场景和用户操作习惯,同时小屏控制端支持更复杂更精准的操作。

组件库搭建

为了提升产品搭建的效率,降低了研发周期和成本,产品功能模块实现了组件化,分为3D场景组件、3D数据组件、2D数据组件。任何一位设计师都可以根据产品需求,搭配组件模块,快速搭建大数据可视化产品。

数据内容的包装

通过该产品,一方面能够辅助金融局等政府机构领导把控整体金融平台风险、辅助做出平台整改指导决策意见,展示金融工作成绩;另一方面体现出腾讯大数据能力和公司的社会责任;最后,通过从更长远的眼光去包装产品,打造智慧监管标杆产品,从而推动与政府客户更深入广泛的合作。具体内容通过以下两条线进行组织:

横线:各个监管维度

灵鲲金融风险态势感知系统专注于呈现金融风险数据的呈现,主要分为公司层面和用户层面,综合体现潜在的风险趋势和实际影响的范围。除了灵鲲用于监管金融数据,整个监管平台还负责展示包括政治、生态、电信、消费在内的多个监管维度,这些维度与金融监管维度为同一个内容层级。我们考虑到腾讯的大数据能力可以帮助更多城市综合管理者了解整个网络社会的全局性风险,所以每个维度都是智慧监管必不可少的一部分,并且每个维度之间的横向交叉对比能够使智慧监管平台发挥出更大的社会价值。

纵线:监管颗粒度

灵鲲系统中观众可以从全局数据一直下钻到个体数据,实现不同颗粒度的监管目的。

具体来讲,全国的安全风险最终是以加权平均后的指数形式体现出来;再到具体的省份和城市,内容细化到具体风险事件的发生情况,如电信安全监管维度,呈现电信诈骗使用的伪基站的位置,以及发送诈骗短信的数量等;最后细化到城市中的机构和建筑,呈现具体机构的运行情况和具体高风险企业所在建筑进行实时监控。

3. 产品演示视频

https://v.qq.com/x/page/d0742kep4k1.html

结语

潘洛斯团队是基于 DNA 设计中心下的大数据可视化团队,成员来自于 MIG 安全和医疗部门,早期专注于 To C 端的产品设计,过去一年里随着公司战略的变化和部门业务方向的变化,我们逐渐开始把产品设计的重心和思考放在了 To B、To G 领域,不断做着尝试和探索。以前做 To C 的时候我们关注的更多是 DAU、转化率、日活、满意度这些和产品体验相关联的指标,满足绝大多数互联网用户的诉求是我们首要去解决的问题。现在做 To B、To G 领域的设计,我们更多思考的是如何包装我们现有的业务能力,能够通过更加简单、直接、有效的方式触达给我们的客户,让他们更容易理解像腾讯这样拥有海量数据和算法能力的互联网公司如何帮助他们进一步提升他们的业务效率和产出,给这个社会创造更多的价值,这也是腾讯多年来想要承担的社会责任之一。

文章来源:优设

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

微信小程序动画之点击效果

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

微信小程序动画之点击效果

代码:
js:

// pages/test/test.js
Page({
  containerTap: function (res) {
    var that = this
    var x = res.touches[0].pageX;
    var y = res.touches[0].pageY + 85;
    this.setData({
      rippleStyle: ''
    });
    setTimeout(function () {
      that.setData({
        rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
      });
    }, 200)
  },
})


wxml:

<view class="ripple" style="{{rippleStyle}}"></view>
<view class="container" bindtouchstart="containerTap"></view>

wxss:

page{height:100%}
.container{
    width:100%;
    height:100%;
    overflow: hidden
}
.ripple {
    background-color:aquamarine;
    border-radius: 100%;
    height:10px;
    width:10px;
    margin-top: -90px;
    position: absolute;
    
    overflow: hidden
}
@-webkit-keyframes ripple {
    100% {
    webkit-transform: scale(12);
    transform: scale(12);
    background-color: transparent;
    }
}

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

可视化数据大屏应该如何设计

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

2018年如自己所愿,终于有机会可以尝试下数据大屏的可视化设计,但是想象总归是美好的,新手上岗第一次总是那么不太如意,陌生而又熟悉着。在做过几次尝试后,自己又私下里翻阅了一些关于数据大屏方面的设计文章,好的设计图片。有很多不足,也有很多刚开始做的时候没有注意到的点,这次整理作品,也顺便把大概的设计流程整理了一下。给自己的一个复盘总结,也是一次设计分享。

可视化数据大屏应该如何设计可视化数据大屏应该如何设计



可视化数据大屏应该如何设计

文章来源:UI中国

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

ECMAScript6学习笔记

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

这周萌芽决定好好学习一下ES6,感兴趣的小伙伴们来一起学习吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移动端、Node.js

编译转换

1.在线转换(browser.js)
2.提前编译

ES6新特性
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.promise(串行化异步交互)
7.generator(把同步拆分为异步)
8.模块化(ES6自带模块化)

变量
var
1.可以重复声明
2.无法限制修改
3.没有块级作用域(没有语法块!)

let 不能重复声明(变量,可以修改)
const 不能重复声明(常量,不能修改)

块级作用域,let在外部无法调用

函数
箭头函数 =>

function show(){
//这是我们平常的函数
}
let show=()=>{
//箭头函数
}
//区别不大,把function省略掉换成箭头,主要就是为了方便,可传参

1.如果只有一个参数,()可以省去。

 let show=a=>{
        return a*2
    }

2.如果只有一个return,{}可以省略

   let show=a=>a*2;
   let arr = [15,2,37,11,67,4,6]; //排序
  
   arr.sort((n1,n2)=>{
        return n1-n2;
    })
    
    arr.sort((n1,n2)=> n1-n2 );
    console.log(arr)


函数的参数
1.参数扩展/展开
2.默认参数

参数的扩展
1.收集参数

 function arrData(a,b,...args) {
        alert(a);
        alert(b);
        alert(args);
    }
    *注意:Rest Parameter必须是最后一个(除其他语言)
1

2.展开数组

    arrData(...arr);       //等价于 arrData(1,2,3);
1
这仨点儿【…】代表把数组内容掏出来放这。

默认参数

//jQuery中的默认参数
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);

//ES6默认传参
   function showOne(a,b=10,c=5) {
        console.log(a,b,c)
    }

解构赋值
1.左右两边解构必须一样
2.右边必须是个合法的东西
3.声明和赋值不能分开(必须在一句话里完成)

    let  [one,two,three] = [10,20,30];
    let  {one1,two2,three3} = {a:10,b:20,c:30};

数组
map 映射(一个对一个。传几个返回几个)

let result = arr.map(function (item) {
    return item*2;
});//简写一下
let result = arr.map(item=>item*2 );

//判断考试成绩
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');

reduce 汇总(算个总数,算个平均数)

//tmp:上次求和总和,为两两相加,如果之前没有结果则为传进来的数组的第一个数。
//itme:当前的数。
//index:执行的次数。

   let result = arr.reduce(function (tmp, item, index) {
       return tmp + item;
    });
    //简写
    arr.reduce((tmp, item, index)=>tmp + item);

filter 过滤器(筛选掉不需要的)

 let result = arr.filter(item=>{
        if (item%2 == 0){
            return true;
        } else {
            return false;
        }
    });
    
 //简写
let result = arr.filter(item=>item%2 == 0);
       
//***萌芽在这里提一下!json和之前的item都不是固定的,可以随便命名。意思都是当前的值!

 let arrProce = [
        {title:'男士衬衫',price:75},
        {title:'女士包包',price:5000},
        {title:'男士包包',price:20},
        {title:'女士鞋',price:2500}
    ];
    let result = arrProce.filter(jsom=>json.price >= 2000);
    console.log(result);

forEach循环(迭代)

   arr.forEach((item,index)=>{
        alert(index+":"+item)
    })

字符串
1.多了俩新方法
startsWith(); //判断开头,返回布尔类型
endWith(); //判断结尾,返回布尔类型

let str='hello,world!'
str.startsWith('h')
str.endWith('!')      //返回true

2.字符串模板
字符串连接
2.1直接把东西塞进字符串里面 ${东西}
2.2可以折行

<h1>${title}</h1>
<p>${content}</p>

ES6的面向对象
1.class关键字,构造器和类分开啦。
2.class里面直接加方法。

    class User{
        constructor(name,password){   //构造器
            this.name = name;
            this.password = password;
        }

        showName(){
            alert(this.name);
        }
        showPass(){
           alert(this.password);
        }
    }

    var user = new User('萌芽子','123456');
    user.showName();
    user.showPass();

继承

    class VipUser extends User{
        constructor(name,password,age){
        super(name,password);          //super 超类
        this.age = age;
        }
        showAge(){
            alert(this.age)
        }
    }
    var user = new VipUser('萌芽子','123456','18岁');
    user.showName();
    user.showPass();
    user.showAge();

不得不说作为一只JAVA汪,这种写法真得劲!

面向对象的应用
React
1.组件化(class)
2.JSX(JSXbabelbrowser.js)
JSX属于JS的扩展版

class Test extends React.Component{
 constructor(...args){
 super(...args);
 }
render(){
return <li>{this.props.str}</li>         //props:属性
}
}

window.onload = function(){
let oDiv = document.getElementById('div1');

ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界!"></Item>
</ul>
oDiv
);
};


打卡,下次就学这个了!===============

json
1.JSON对象

JSON.stringify() json转字符串

 let json = {a:10, b:20};//JSON.stringify   字符串化
    let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
    str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
    alert(str)
1
2
3
4
JSON.parse() 字符串转json

    let str = '{"a":12,"b":20,"c":"可乐"}';
    let json = JSON.parse(str);
    console.log(json);

2.简写
在新版的ES6当中名字一样的键(key)和值(value)可以只写一个。

    let a = 12;
    let b = 5;
    let json = {a,b,c:21};

简化了JSON中的方法。

 let json ={
        a:12,
        showJson(){
            alert(this.a);
        }
    };
    json.showJson();

json的标准写法:
1.只能用双引号
2.所有的名字都必须用引号包起来(所有的key都必须是双引号)

{a:12,b:5}     × 错误的写法
{"a":"萌萌萌","b":"芽子"}     √ 正确的写法
1
2
Promise(承诺)
异步:操作之间没啥关系,同时进行多个操作
同步:同时只能做一件事
优缺点:
异步:代码更复杂
同步:代码简单
Promise——消除异步操作
*用同步一样的方式来书写异步代码;

    let p = new Promise(function (resolve,reject) {
        //异步代码
        //resolve——成功
        //reject——失败
    })

-----------------------------------------访问我们的arr.txt文件,这里用到了jQuery的ajax就不详细介绍了。
  let p = new Promise(function (resolve, reject) {
        //异步代码
        //resolve——成功
        //reject——失败
        $.ajax({
            url: 'arr.txt',
            dataType: 'json',
            success(arr) {
                resolve(arr);
            }, error(err) {
                reject(err);
            }
        })
    });
    //结果
    p.then(function (arr) {
        alert('成功啦' + arr)
    }, function (err) {
        alert('失败了' + err)
        console.log(err)
    });
-----------------------------------------------多个请求地址
  Promise.all([p1,p2]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一个失败了');
    });
    ----------------------------再简化
    function createPromise(url){
    return new Promise(function (resolve, reject) {
            $.ajax({
                url,
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                }, error(err) {
                    reject(err);
                }
            })
        });
    }
  Promise.all([
        createPromise('arr.txt'),
        createPromise('json.txt')
    ]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一个失败了');
    });
----------------------完美写法
 Promise.all([
        $.ajax({url:'arr.txt',dataType:'json'}),
        $.ajax({url:'json.txt',dataType:'json'})
    ]).then(function (results) {
        let [arr,json] = results;
        alert("成功了");
        console.log(arr,json)
    },function () {
        alert("失败了")
    })

我们有了promise之后的异步:

 Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
   //对了
    },err=> {
   //错了
    })

Promise.all (必须全部成功)
Promise.race(同事读多个数据,即使失败也没关系)

generator(生成器)
普通函数 - 一路到底执行不可中断
generator函数 - 可中断

 function * show() {
        alert('a');
        yield;//暂时放弃执行
        alert('b');
    }
    let genObj = show();
    genObj.next();
    genObj.next();

yield
yield传参

  function * show(num1,num2) {
        alert(`${num1},${num2}`);//es6
        alert('a');
       let a = yield;//暂时放弃执行
        console.log(a);
        alert('b');
    }
    let genObj = show(99,88);
    genObj.next(12);//第一个next无法给yield传参的,废的
    genObj.next(5);

yield返回

  function *show() {
        alert('a');
        yield 12;
        alert('b');
        return 55;
    }

    let gen = show();
    let res1 = gen.next();
    console.log(res1);      //{value: 12, done: false}
    let res2 = gen.next();
    console.log(res2);//{value: undefined, done: true}  加了return  {value: 55, done: true}



还没做的菜叫函数参数,过程是yield之前函数里面的东西,干净的菜,切好的菜是中间过程也就是yield,最终我们将它返回出去!不得不说这图很生动。
异步操作
1.回调

$.ajax({
    url:'url',
    dataType:'json',
    success(data){
        $.ajax({
            url:'xxx',
            dataType: 'json',
            success(data) {
                //完事儿了
            },error(err) {
                alert('错了')
            }
        })
    },error(){
        alert('失败')
    }
})

2.Promise

Promise.all([
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'})
    ]).then(results=>{
        //完事儿
    },err=>{
        //错误的
    })

3.generator

runner(function  *(){
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
})
1
2
3
4
5
generator(不能用=>函数)
逻辑判断下非常好用。
Promise:一次读一堆。
generator:逻辑性。

runner(function *(){
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
      }
//生成...
}
})

总结
1.变量:
var:能重复声明、函数级
let: 严格的,不能重复声明,块级,变量
const:严格的,不能重复声明,块级,常量

2.箭头函数
2.1方便
i.如果只有一个参数,()可以省
ii.如果只有一个return,{}可以省
2.2修正了this
this相对正常点

3.参数扩展
…能收集
…能扩展
默认参数

4.数组方法
map 映射
reduce 汇总
filter 过滤
forEach 循环

5.字符串
starsWith/endWith
字符串模板:${a}xxx{b}

6.Promise
封装异步操作
Promise.all([]);

7.generator
function *show(){
yield
}

8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串

9.解构赋值
let [a,b,c] = [12,5,8];
左右结构一样,右边是个合法的东西,连生命带赋值一次完成。

10.面向对象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
继承
class Test2 extends Test(){
constructor(){
super();
}
}

谈谈ES7和ES8
1.数组includes
数组是否包含某个东西

2.数组 keys/values/entries
for…in(循环数组)
对于数组来讲循环的是下标
对于json循环的是key

for…of(循环迭代器)
对于数组循环的是值
不能用于JSON,json并不是迭代器

keys = >所有的key拿出来 0,1,2,3…
values =>所有的values拿出来 23,5,8,1…
entries =>所有的键值对拿出来 {key:0,value:a}

let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);

预览版,目前极大多数浏览器都不支持,以后可能会支持,了解一下就好。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

都 2019 年了还不懂「设计语言」?看完这篇你就学会了!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

数字化经济日益发达的现阶段,数字化产品作为线上触点,也就逐渐成为服务中的标配,它更像一个服务员通过屏幕与用户发生对话。在这场对话中,好的设计应该像一门语言,能够承载起传达与沟通的工具属性。

为什么我们需要设计语言系统(DLS)

我们也可以见到,越来越多的设计团队都会构建一套属于自己产品的设计语言系统。对于团队内部,它的意义在于通过系统化的设计规则,来控制产品长期迭代的熵值,以及提升团队的协同效率,同时,设计师有机会从重复的劳动中解放出来,投入更多精力到探讨问题本质实现价值创新。就好像在石器时代,祖先们记录事件或表达情感的混乱程度,远远高于现代人,关键在于是否拥有一套成熟的语言系统。

对于外部用户,设计语言系统可以让产品在不同终端、不同场景中的表现保持一致性,也有机会通过植入品牌基因的方式形成视觉锤,提升产品的识别度以及消费者对品牌的认知。就好像,我们可以通过「猪鼻」车头识别出那是宝马,通过「青蛙眼」车灯知道那是保时捷,是因为这些汽车品牌通过长期保持某个「一致性」的表现,形成一套高识别度的设计语言来表达「这就是我」。

界面设计的语言属性

在这里我们将借助语言学的角度,来探讨数字化产品界面设计语言系统的构建。在语言的应用中,我们通常会涉及语法、语素、语句、语境、语气等维度,通过不同的组合达成应景的表达与适时的沟通。

1. 语法

设计原则,可以理解为设计语言中的语法,是构建设计语言系统的起点,用于传达品牌主张或设计理念,它将指引业务设计执行的方向。

制定设计原则时,首先研究用户特性,聚焦产品核心价值,然后通过脑暴等形式选择有特点的维度,结合用户体验与品牌属性将其视觉化,最后用简要的语言归纳出来。

例如 Airbnb 的设计原则简单归纳为几点:

  • 统一性:每一块设计,都是更大整体中的一部分,因此必须站在更大范围的角度上,给予系统积极正面的贡献。设计功能不应该是孤立的,也不能是离群的。
  • 普遍性:Airbnb 在全世界使用,用户更是一个全球性的社区。我们的产品和可视化语言应该受到用户欢迎,同时也要易于访问。
  • 标志性:我们专注于设计和功能,因此在这两方面,我们要既大胆又清晰。
  • 对话性:呼吸对生命如此重要,我们要把同样的设计理念融入到产品里面,通过更容易理解的方式与我们的用户进行交流、沟通。

2. 语素

视觉基础是构成设计语言的最小单位,就像语素是语言中最小的音义结合体。在原子设计理论中,它属于最小粒度的元素,通常包括:颜色、字体、图标、网格等。

3. 语句

组件就像由若干个语素组成的语句,比如一个基础按钮,通常就是由颜色、字体、边距等元素组成。而我们平时所说的组件库,其实就是一部词典,其中包含了设计系统中所需的基础组件与用法,在界面设计中也具有较高的通用性。

4. 语义

符号是语言的载体,但符号本身没有意义,只有被赋予含义的符号才能够被使用,这时候语言就转化为信息,而语言的含义就是语义。在视觉传达设计中也一样,使用的图标或图形,需具备正确的语义属性。如果商场导视设计中非要使用「裙子」图标来代表「男厕」入口,如此混淆语义挑战公众认知,那就等着被投诉吧。

5. 语境

这里说的语境包含 3 个维度:一是流程意义上的上下文,二是产品属性中的语境,三是用户当下所处的环境。

当设计需要对上下文进行特别处理时,有可能对话的层级次序是受限于屏幕稀缺性,通常可采用 Z-Depth 叠加(Material Design属性)、步骤条、元素关联转场动效等方式。举个常见的例子,当用户发起一个删除数据的请求时,界面会弹出一个二次确认的模态会话,用户点击确认之后才会执行删除操作。

过去很长一段时间,数字产品设计圈内热衷于讨论的两种风格类型:隐喻(拟物化)与抽象(扁平化),时至今日可以说扁平化的风格在应用数量上压倒拟物化风格。然而,我依旧认为设计的风格策略取决于产品属性中的语境,这也是如今 iOS 人机界面设计规范所提倡的,它不再像早前的规则片面拒绝隐喻设计,而是鼓励设计师将用户在现实中最为熟悉的视觉样式,即操作方法映射与界面设计之中,苹果官方的 Garageband 就是一个很有说服力的例子。

针对用户当下所处的环境来适配界面语境,常见通过界面换肤的手法来实现,比如微信读书等阅读应用为用户提供白天模式或黑夜模式的选择。用户所处的外部环境因素可以很大程度上决定界面语言的应用,就好像在菜市场买东西要靠吼,在图书馆借书仅需要用肢体语言便能达成。

△ 如上,微信读书针对外部环境因素的自定义「语境」

6. 语气

交互界面通常需要使用说明或提示文案来指导用户完成操作,大多数情况下都是使用第二人称,就像在与用户对话,从以用户为中心的角度上讲,建议保持谦逊、友善的语气,尽可能避免使用晦涩的专业术语,谨慎使用带有强烈情感属性的感叹号,或过于口语化的语言。另外,语气的拿捏也将直接影响到与用户的距离感,以及当下的应景度。

  • 正确示例:使用检索可以快速搜索任务。
  • 不良示例:你一定会爱上方便快捷的检索功能!

7. 语速

语速在这里指的是界面的信息密度,在不同的场合对语速的控制能够提升接受者的体验,视觉设计也同样需要注意把握间距与留白,网格系统在这里可以起到「节拍器」的作用,借助节拍器可以让设计更具节奏感。而交互意义上的语速,更多体现在操作路径的长度,以及动效的速率。

△  如上,富途证券在产品介绍与盘中交易2个不同场景下的「语速」

8. 响度

其实就好像我们说话可以通过音量大小来控制信息的可感知程度,希望接受者听清楚的就说大声一点。汤姆奥斯本(Tom Osborne)的视觉响度指南(visual loudness guide)是一个如何系统地处理按钮和链接的例子,它们不是单独列出,而是作为一个套件呈现,并且根据每个元素的视觉冲击力会相应的拥有一个「响度」值。我们在构建设计语言系统时,也同样需要设置梯级「响度」的按钮、字重等组件来满足不同场景的表达需求。

△ Tom Osborne的视觉响度指南

设计语言系统的生态性

1. 基因遗传

同一个语系下的语言,无论是经过了朝代更迭,还是地域的迁徙,一定会保留一些固有的特性,这就是语言系统本身具有基因遗传的生态特性。

一套成熟的设计语言系统,也同样对产品设计表现着基因级别的底层影响力:在「代际」遗传上,体现在经久不衰的坚持。比如 Burberry 的格子纹理,无论是在哪一年的产品款式上,都不会丢失这个属性。在「同辈」影响上,通常体现在不同终端场景下产品表现的一致性,或是兄弟产品的相似程度。

2. 动态进化

设计语言系统不是一份静态的组件库与规范文档,而是一个动态的且能自我进化的系统。它的动态进化属性基于 3 个契机:

  • 设计师基于可复用组件的设计系统构建产品功能设计时,可省下更多的时间,转移到设计系统上的优化;
  • 随着产品发展,设计师将会遇到更多特殊需求,从而也会创建新的设计模式来解决问题,而这些新的设计模式也将同时反哺设计系统,不断提升系统的完善程度;
  • 设计系统中可复用组件等的规模化应用,便于设计单元缺陷的暴露,这也将为系统单元优化提供优胜劣汰的方向。

3. 开放兼容

语言同时具备工具属性与文化属性,开放兼容对一门语言的意义在于被更多人接受、应用。

当前谷歌、苹果、微软、阿里巴巴等大型企业推出了开源的设计语言,这些成熟的设计体系其实承载着大量的项目实践与经验总结,对其他企业也有较大的借鉴价值。同时,对于平台级企业,开放统一的数字语言,让不同地域、不同类型的项目得以在共同的规则下发展、共生,这对于平台生态无疑是利好的。

设计语言作为工具来说,需具备普适性,在文化层面上也需具备兼容度──在满足企业自身品牌与业务需求之上,应该尽可能规避因宗教、民俗等因素带来的冲突。

举个例子,在法国和比利时,人们都厌恶墨绿色,因为二战期间两国饱受德国纳粹侵略之苦,而纳粹的军服是墨绿色的。那么,面向这两个国家用户的设计上,便应该避免使用墨绿的元素。这时,设计语言系统中组件元素的丰富程度,很大程度决定了设计表现的选择空间与可能性。

就好像,在美国街头询问公共厕所时,老美可能听不懂 WC,那就用他们听得懂的 Restroom 吧。这里想表达的是,你的语言系统中「词汇」越丰富,越能兼容不同文化背景下的表达。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

微信小程序之卡片层叠滑动效果

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

微信小程序之卡片层叠滑动效果

代码:
js:

// index/gun/jsSwiper2/jsSwiper2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    startX: 0,
    endX: 0,
    iCenter: 3,
    datas: [{
      id: 1,
      zIndex: 2,
      opacity: 0.2,
      left: 40,
      iamge: "../../images/1.jpg",
      animation: null
    },
    {
      id: 2,
      zIndex: 4,
      opacity: 0.4,
      left: 80,
      iamge: "../../images/2.jpg",
      animation: null
    },
    {
      id: 3,
      zIndex: 6,
      opacity: 0.6,
      left: 120,
      iamge: "../../images/3.jpg",
      animation: null
    },
    {
      id: 4,
      zIndex: 8,
      opacity: 1,
      left: 160,
      iamge: "../../images/4.jpg",
      animation: null
    },
    {
      id: 5,
      zIndex: 6,
      opacity: 0.6,
      left: 200,
      iamge: "../../images/5.jpg",
      animation: null
    },
    {
      id: 6,
      zIndex: 4,
      opacity: 0.4,
      left: 240,
      iamge: "../../images/6.jpg",
      animation: null
    },
    {
      id: 7,
      zIndex: 2,
      opacity: 0.2,
      left: 280,
      iamge: "../../images/7.jpg",
      animation: null
    },
    ],
    order: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.__set__();
    this.move();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  move: function () {
    var datas = this.data.datas;
    /*图片分布*/
    for (var i = 0; i < datas.length; i++) {
      var data = datas[i];
      var animation = wx.createAnimation({
        duration: 200
      });
      animation.translateX(data.left).step();
      this.setData({
        ["datas[" + i + "].animation"]: animation.export(),
        ["datas[" + i + "].zIndex"]: data.zIndex,
        ["datas[" + i + "].opacity"]: data.opacity,
      })
    }
  },
  /**左箭头 */
  left: function () {
    //
    var last = this.data.datas.pop(); //获取数组的最后一个
    this.data.datas.unshift(last);//放到数组的第一个
    var orderFirst = this.data.order.shift();
    this.data.order.push(orderFirst);
    this.move();
  },
  /** */
  right: function () {
    var first = this.data.datas.shift(); //获取数组的第一个
    this.data.datas.push(first);//放到数组的最后一个位置
    var orderLast = this.data.order.pop();
    this.data.order.unshift(orderLast);
    this.move();
  },
  /**点击某项 */
  choose: function (e) {
    var that = this;
    var id = e.currentTarget.dataset.id;
    var order = that.data.order;
    var index = 0;
    for (var i = 0; i < order.length; i++) {
      if (id == order[i]) {
        index = i;
        break;
      }
    }
    if (index < that.data.iCenter) {
      for (var i = 0; i < that.data.iCenter - index; i++) {
        this.data.datas.push(this.data.datas.shift()); //获取第一个放到最后一个
        this.data.order.unshift(this.data.order.pop());
        // this.right()  
      }
    } else if (index > that.data.iCenter) {
      for (var i = 0; i < index - that.data.iCenter; i++) {
        this.data.datas.unshift(this.data.datas.pop()); //获取最后一个放到第一个
        this.data.order.push(this.data.order.shift());
        // this.left();
      }
    }
    this.move();
  },
  /**新的排列复制到新的数组中 */
  __set__: function () {
    var that = this;
    var order = that.data.order;
    var datas = that.data.datas;
    for (var i = 0; i < datas.length; i++) {
      that.setData({
        ["order[" + i + "]"]: datas[i].id
      })
    }
  },
  //手指触发开始移动
  moveStart: function (e) {
    console.log(e);
    var startX = e.changedTouches[0].pageX;
    this.setData({
      startX: startX
    });
  },
  //手指触摸后移动完成触发事件
  moveItem: function (e) {
    console.log(e);
    var that = this;
    var endX = e.changedTouches[0].pageX;
    this.setData({
      endX: endX
    });
    //计算手指触摸偏移剧距离
    var moveX = this.data.startX - this.data.endX;
    //向左移动
    if (moveX > 20) {
      this.left();
    }
    if (moveX < -20) {
      this.right();
    }
  },
})


wxml:

<view class="teachers_banner">
  <view class="container clearfix teachers_b">
    <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>

      <block wx:for="{{datas}}">
        <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};" bindtap="choose" data-id="{{item.id}}">
          <image src="{{item.iamge}}"></image>
        </li>
      </block>

    </view>
  </view>
</view>

wxss:

.teachers_banner {
  width: 100%;
  height: 650px;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.teachers_b {
  position: relative;
  margin-top: 80px;
}

#slide {
  margin: 0 auto;
  width: 100%;
  height: 350px;
  position: relative;
}

image {
  width: 400rpx;
  height: 550rpx;
}

#slide li {
  position: absolute;
  width: 400rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
  overflow: hidden;
  box-shadow: 0 0 20px #1d374d;
}

#slide li img {
  width: 100%;
  height: 100%;
}

.slide_right {
  padding: 40px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.slide_right dl {
  padding-top: 10px;
}

.arrow .prev, .arrow .next {
  position: absolute;
  width: 50px;
  top: 38%;
  z-index: 9;
  font: 700 96px 'simsun';
  opacity: 0.3;
  color: #fff;
  cursor: pointer;
}

效果:
1.左右滑动时,向相应方向移动一个卡片位置;
2.点击某一项时,将点击项位置移动到中间位置;

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务



新经济品牌如何不用广告建立品牌?

涛涛


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在建立品牌的过程中,广告和公关各有其使用边界,企业家不关心用不用广告,关心如何找到适合自己的营销方法。


对于广告,大家已经比较熟悉,今天我们重点分析公关建立品牌的方法。


 

一、新经济品牌比传统品牌有更大的公关潜力



新经济品牌往往比传统品牌有更大的公关潜力。昨天潘轲老师讲到,无人机将是5G时代的现象级产品。那么,无人机会制造出什么社会热点呢?


比如说,无人机会送饭,飞上来给你送饭。


到时会出现争议:


一是饭掉下去怎么办?谁负责?二是飞机送饭时能不能开摄像头?会不会顺带拍一下邻居家的窗户?推出无人机送货第一款高空坠落险的是谁?

而且,高楼的窗户开启是有角度限制的,怎么拿饭?一定会出现玻璃窗改造设计,第一个高楼玻璃窗改造品牌是谁?

第一个根据无人机送货需求设计的建筑品牌是谁?这个新品类可能叫“无人机友好建筑”,房间都带无人机着陆设施,像航母的飞机着陆装卸平台,第一栋无人机友好建筑将是重磅新闻。

在无人机友好建筑普及之前,不能走窗户,怎么外卖到户?无人机要坐电梯还是走消防梯?能允许无人机坐电梯吗?如果能坐,无人机“坐”哪里?


一架有教养的无人机,高度显然不能位于裙子以下,如果在肩膀以下,也容易和人发生碰撞,最好的位置应该是人头顶上。到时大家在电梯里,可能看到无人机区间,抬头向上,几架无人机呼呼地转。

在无人机手臂和电梯直接通信普及之前,无人机怎么按电梯?我们是否应该帮助无人机按电梯,就像帮助老人、小孩一样?

无人机还可以摘菜,既然能摘菜,就能偷菜,就能偷钱包,无人机安全问题将大幅上升。

可能有人用弹弓击打恶意无人机,也有黑客用程序和网络捕捉无人机。

当然,无人机赛事也会推广开来,成为大众喜爱观看的运动,正如汽车赛事一样。

比如针对无人机复杂空域飞行的速度竞赛和花式竞赛,针对无人机续航能力的拉力赛,针对无人机视觉效果的艺术挑战赛等等。无人机界的F1、达喀尔、勒芒就会随之而生。

考虑到竞赛无人机的价格可能低于赛车,这项运动门槛更低。


无人机当然也可以送人,无人机民航也会出现。第一家无人机民航公司会是谁?送的第一位顾客是谁?

当然,专业的无人机渠道、无人机导购品牌、无人机售后服务、改装服务也会出现。这里面,既蕴含了众多新品类发展的机遇,也将出现大量新闻。

而新闻潜力意味着,企业家要优先用公关,激发新闻效应,借助免费的新闻传播来建立品牌。

 

那,到底怎么用公关建立品牌呢?跟大家分享一下我们的探索历程。


第一个,什么是公关?


越了解工具,越会使用它。我们对公关的理解,决定了对它的运用。


上海的第一财经电视台,曾经邀请上海交大的公关教授魏武挥和原GE公关总监李国威老师进行过一次辩论。

辩题之一是“公关的基本目的就是发稿和灭稿。”请问,你们公司的公关是这样的吗?你认同吗?


我们不认同。就像战士确实需要卧倒和射击,但你不能说战士的基本目的就是卧倒和射击。为什么卧倒?为什么射击?能不能不卧倒、不射击,达到目标?


凡事要学就学最高标杆,要奔珠峰去练爬山。我们的标杆选美国公关之父爱德华·伯内斯。

1930年代,美国几大书商找到他,请他用公关帮助书商卖书。各位,你如果是伯内斯,会如何用公关帮助书商卖书?

我们会打新书排行榜、请名人推荐、拍卖版权、做图书路演、签名售书、建立读者社群、一万人一起读书,罗辑思维推《薛兆丰经济学讲义》,在菜市场办了一场特别新书发布会,等等。


我们要学习伯内斯,就要模拟他的思维方式。在这个项目中,伯内斯的思维由几个关键问题串起来:


1.美国人什么时候买书最多?注意,是买书,不是读书。回答是:房间里有空书柜的时候。就像某老总新办公室装修,10米长的空书柜,要填满,直接买3000本。

2.如何让美国人家里有书架呢?谁能够做到?装修公司、建筑公司能够做到,尤其是设计师能够做到。小设计师看大设计师的,大设计师能影响设计趋势。


大家去美国旅行,可以发现很多1930年代的别墅,都有嵌入式书柜,嵌入式书柜换不掉,只能买书。


伯内斯这个案例对我们震动很大。以前我们做奥运项目,和央视等各大媒体合作,做一堆报道和简报,感觉自己很厉害。

现在看来,都是幻觉。连自己国家的书架都没改变过,算什么公关高手?

伯内斯的做法,称为“The Big Think”,翻译成中文,可叫“大局思考”。大局思考的局有多大呢?全社会那么大。


大局思考要求我们:把眼睛从自己品牌上抬起来,站在高空看地球,从社会系统角度,找到能够帮助自己品牌发展的社会动力,再有效嫁接这种动力。



二、企业公关和品牌公关的关系是什么?



《升级定位》讲商业模式二分法,分为企业商业模式和品牌商业模式。


企业商业模式解决组织和企业利益相关方的关系,如政府、媒体、投资人、员工等;

品牌商业模式解决品牌及其利益相关方的关系,主要是“品牌-顾客-竞品”这个三角形。


把伯内斯公关的“大局思考”和商业模式二分法结合起来,我们看到一个什么画面?在这个画面中间,是品牌商业模式三角“品牌-顾客-竞品”,顾客在上面,下面是品牌和竞品。

这个三角形的外面,环绕着一个巨大的环形,其上半部分是外部利益相关者——政府、社区、公众、媒体、资本;其下半部分是内部利益相关者——员工、供应链和渠道。


在这里,企业公关和品牌公关的关系是什么?——企业公关是品牌公关的外部环境,品牌公关是企业公关的成果。

这个图画出来,像什么?像眼睛。中间是瞳孔,是我们聚焦的方向;外面是上眼睑和下眼睑。

要打开上下眼皮,才能见天地、见众生,才能在天地和众生之间重新看见自己。所以,我们把这个叫“公关眼”模型。


要打开“公关眼”,关键是看明白三点:


① 世界很大,企业很小。

② 企业是企业家的中心,但不是社会的中心。既要对自己的企业充满宗教般的热情,也要认识到自己的企业不过是社会系统中极微小的一部分。

③ 企业要坚定使命,围绕建立品牌这个中心,系统寻找和调动社会动力,赢得支持,帮助自己发展。

 

所以,我们注意到刚才先锋电器李总的分享,当先锋电器“取暖专家”的战略确定之后,想要赢得谁的支持?先要从内部做起来,说服经销商和员工对我们的事业充满热情。

外部环境可以影响我们,政府的态度、公众的态度、资本、行业的经营环境,环境的合作伙伴、上下游的经销商都会影响我们。

所以从企业内部来看,中间的那个三角形无比重要,但是我们视角拉到整个社会,如果社会是银河系,企业就是一个小小的星球。

 

在这里,广告、公关有个巨大不同:广告直接通过媒体影响顾客;公关则努力借助社会能量,影响目标人群。


在商业实践中,公关和广告既有相互重叠、相互替代的区域,也有相互差异、各有所长的区域,还有相互转化、相互支撑的方式。

说公关、广告相互替代,是因为它们都可以向目标人群传递信息,至于这个信息是电梯里看到,还是微信群里看到,是次要的。

说公关和广告相互差异、各有所长,是因为广告有公关难以实现的可控性、可复制性等长处,而公关也有广告难以拥有的关注度、可信度和关联度。


比如,我们2017年,在定位之父杰克·特劳特先生逝世的时候,和定位学习网一起,发起了“纪念特劳特烛光读书会”,全国13个城市的定位爱好者参加。

在特劳特先生的小型葬礼上,邓德隆先生把这些照片给特劳特夫人过目,特劳特夫人特意委托邓总向参与纪念活动的定位爱好者表达感谢。

这样的纪念活动,便是公关——表达我们对定位之父感恩缅怀的活动,这是广告难以完全表达的。


说公关和广告相互转化,是因为广告可以做出公关效应,称之为广告公关化;公关也可以做成广告效果,直接给卖点,称之为公关广告化。


广告公关化,要求把广告做成新闻。南都的“天下无三”广告,神州专车上线的“Beat U”广告,甚至分众电梯海报的“仅售1199元3条的围栏男士内裤”,都制造了话题。


公关广告化,则要在新闻或话题中,传递品牌名称,甚至传递产品图片,顾客利益点等等。

比如,某面包车品牌在强手如云的上海车展上,曾把自己的广告语做成了新华社报道的导语。



三、公关、战略和定位的关系


 

了解了公关是什么,广告和公关的关系,接下来我们看看公关、战略和定位的关系。

和大家分享一下我们曲折的探索历程,这个历程分为四个阶段,简称为“公关四阶”。

 

第一阶,制造热点


相信很多人接触公关,热点话题、热点事件是一个重要入口。公关圈的人,热衷于制造热点,包括我们自己一度也丧心病狂地想制造热点。


比如说,有个网络推手叫立二拆四,他们制作了系列的热点事件,从“别针换别墅”,到“我把下半生交给网络”等等,最后搞了“后海和尚搞船震”,最后这个团队进去了。


9年前,我太太去我们办公室,一路嘟嘟囔囔说,现在年轻人太不像话了,高考毕业就买钻戒私定终身。我一看照片,两位校服男女生,手拉手站在柜台前,柜台上有个logo——“I Do”。

我说,你看看那边那个男同事,是不是眼熟?——她看过去,哦?竟然是校服男生(的扮演者)。

这个项目是当时合伙人做的,但它给我带来反思:公关如果策划新闻、策划话题,连自己家人都绕进去了,这样的公关可以持续吗?值得持续吗?


大家来看看这几个事情是不是策划的。第一,2017年维密秀,奚梦瑶摔倒,维密秀的百度指数飞涨到60多万,翻了50倍。请问,是策划的吗?

策划不策划,需要验证。如果是自然事故,对于维密秀这样级别的赛事,犯错误者按道理会怎样?会被开除。

奚梦瑶被开除了吗?当时维密CEO发推特,怎么说?好样的,加油!这像是对犯错员工说的话么?


比语言更说明问题的是行为。2018年,维密秀严格的选拔开始了,请问谁免试入选了?——奚梦瑶。

在老何看来,维密官方对奚梦瑶的态度,不像是对失误员工的处置,反倒是对冒受伤危险摔倒勇士的奖励。想想奚梦瑶那么高个子,摔倒风险多么大?为了热点,辛苦了。


不光模特,总裁也辛苦。VIVO手机在水立方开新品发布会,总裁上台时掉水里了,主持人何炅赶紧圆场——“遇水则发!”各位,请问这是策划的,还是自然的?

首先,如果总裁不掉水里,老何可能和很多人一样,不知道这件事,此事对VIVO有利而非有害。

其次,判断总裁是不是故意掉水里,要讲证据。比如,回看录像,总裁出水后是不是把手机交给助理去处理。


商界领导一般自己拿手机,如果故意落水,事先把手机交给他人概率更高。

手机厂商就此打住了吗?不。酷派ivvi发布会,CEO吊威亚出场的时候,挂半空中了!各位,是策划的还是自然的?

这件事我们问过酷派内部人,他说那天确实是出现了意外——原计划是吊10分钟,后台出了故障,结果吊了20分钟。

就定位圈来说,喜棉儿童排汗睡衣创始人贾总,在里斯品类战略大会的舞台上,当众撕衣服。衣服一撕,淘宝流量翻5倍,而且翻完之后稳定在5倍附近。

你看,为了品牌,为了热点,创始人和总裁是不是很拼?


那,追求热点的方法是什么呢?我们用的模型叫“策划三要素”。


传播力=内容指数X媒介指数X转化指数。


其中,内容指数主要涉及传播主题、传播环境和传播对象,分别概括为:基础口碑(主体自带流量)、社会热点(传播环境流量)和公众体验(对传播对象的激发程度)。


内容指数=基础口碑X社会热点X公众体验。


对基础口碑、社会热点、公众体验,可以进一步细分。基础口碑分为自己口碑和借用他人口碑,自己口碑=关注者的数量X质量。

自己的关注度不够,怎么办?和自带流量的明星、大V合作,借助知名的赛事、栏目、影视剧等等。

在公众体验上,分为情感体验和互动体验。内容的情感体验越深,越能够吸引公众参与互动,其传播力就越强。

在情感体验上,方法是“情感配方”。其基本原理是,虽然人的感情看起来非常复杂,但是每种情感类型可以分解为几个简单要素,你汇聚相关要素,就会产生特定的情感类型。


比如产生愤怒,需要四个要素:第一,发生了一件意外的事情;第二,结果是我们不想要的;第三,造成的原因是别人;第四,这个人可以不这么干。四个条件具备,就会产生愤怒。

例如,我们让人拿一个盘子给我们,结果他把盘子掉地上,我们会生气。但如果拿盘子的是家里老人,平时手就哆嗦,情绪就倾向于谅解。


找到情感合成的要素后,就可以制定内容模板。


比如我们知道“内容和形式的反差”会带来幽默感,就可以用这个方式来制造一系列视频,比如用最正式的形式——“新闻联播”,加上最草根的内容,就会产生喜感。这种方法也被网络传播大量运用。

我们把这种根据传播目标,分解传播模板,批量制作传播内容的内容生产方式,叫“内容工厂”。


福特发明了流水线生产汽车,把汽车成本降低到原来的十分之一。在内容生产上,也可以通过工厂化运作,大规模降低成本,提率。

内容生产出来后,可以用评分模板来给内容评分,给基础口碑、社会热点和公众体验分别打分,然后算总分。

每个品牌可以摸索评分规律,最后对内容传播力进行量化,多少分以上才可以出街,多少分以下要重新修订内容。

 

第二阶,追求植入


制造热点是第一阶,我们看看这些大家都熟悉的热点事件。比如,“4小时逃离北上广”,“只要心中有沙,哪里都是马尔代夫”,“斯巴达三百勇士北京游行”,“大黄鸭进大陆”。这四个热点事件很多人听说过,请问,这些热点事件背后的品牌是谁呢?

我们在不同场合做过调查,知道品牌的人在5%到10%。那么,对于很多不知道品牌的而言,这些传播能量是不是有一部分没有发挥作用?所以,公关不绑定品牌,多少会免费娱乐大众。

如何绑定?方法是“三重植入”,这是我们探索第二个阶段的目标。


植入是有标准的,把植入分为三个层级,最底层的是“表层植入”,它的定义是:品牌和事件一起出现,但在传播过程中品牌和事件可以分离。

比如你们品牌邀请了周杰伦来现场,媒体在传播时会称呼你为“某品牌”,把画面上你的logo打成马赛克。

表层植入的上一层,是“内核植入”,定义是:品牌和事件一起出现,在传播过程中品牌和事件不可以分离。


最高层级是“词植入”,是指品牌名称植入到词媒体中,只要提及事件名称,品牌就得以曝光。


比如某汽车品牌做了一场“百名网红直播新车上市”,这个是表层植入,因为可以不提这个汽车品牌的名字。像在世界杯赛场周边摆一圈广告牌,表层植入。

再看内核植入。浙江有个网红景点,饭蒸岩。它的故事是,有一位女驴友,爱上了一位男驴友,就用绳索垂下悬崖,在岩壁上画下男驴友的头像示爱。

这个植入,品牌和事件可以分离吗?不能。不仅不能,每次媒体传播这张岩石的图片,就是在帮助这个景区曝光它们的认知产品。


让产品成为新闻主角,便是公关广告化,把公关做成直接讲卖点的广告。岩画事件之所以有趣,在于它不仅曝光了物理卖点,还创造了情感价值——有网友表示,这个事件让TA又重新相信了爱情。

 

再看词植入,把品牌名植入到词媒体里。比如抖音刷出了一个视频“吃垮海底捞”,你一说起这个事件,海底捞的品牌名就曝光了。


当然,在十五年前,论坛上曾经有个热点事件,叫“吃垮必胜客”,两者的策划逻辑基本相同,只是平台从论坛换到了抖音。张家界的“飞越天门山”,凡客的“凡客体”,都属于词植入。

 

三重植入,怎么运用呢?


首先,尽量避免表层植入。要在事件策划或事件合作中,寻找更深层植入的方法。

其次,尽量做到内核植入。其方法是,把品牌、产品、代言人,变成新闻要素之一即可。

最后,尝试词植入。其方法是,自己用带有品牌名的词组、短语,为传播事件命名,并促成名字被大众采用。


各位,做到词植入,传播就一定会成功吗?我们接着看。

 

第三阶:支撑定位。

 

上面讲到一个词植入的案例——“凡客体”。凡客体是2010年的热点,也屡屡被评为2010年十大营销案例,排名前三甚至第一。

从制造热点、品牌植入上来看,凡客体都是成功的,但凡客体对品牌、对业务是否有帮助?帮助多大?

一开始人们知道凡客,是因为凡客衬衫。凡客体里面,韩寒穿的是T恤。

从价格来看,凡客衬衫便宜的80-100元,高一点的100-200元。在十年前,算是中档价格。而T恤多少钱?29块。

也就是说,凡客体传播的品类和价格,都和顾客既有认知发生着冲突。这也意味着,凡客体传播越广泛,原有的品牌认知会就越稀释,越模糊,进而影响老顾客的购买意愿。


现实中,凡客的情况怎么样呢?2010年凡客体大火,2011年末,凡客的库存达到14.45亿元,总亏损近6亿元,一路从11000人裁员到300人。

凡客体告诉我们,战略方向如果不对,传播能量越强,越南辕北辙,越努力离目标越遥远。违背战略,破坏顾客认知的公关,对品牌反而是有害的。

比如说,罗辑思维投资Papi酱很多人知道,拍卖Papi酱首条广告也是行业热点,但罗辑思维CEO脱不花却随后反思“投资Papi酱是我们最大的耻辱”。


为什么呢?因为违背了公司的战略。随后,罗辑思维也原价退出了投资。

反之,则是每一次传播都在支撑战略,支撑顾客对品牌的认知,也即支持定位。

比如,无论是做3万米高空极限跳伞,还是做张家界翼装飞行大赛,红牛在每一个极限活动中,都会强调“能量”两个字,不断向顾客认知点上累加资源。

 

公关怎么支撑战略,支撑定位呢?

 

首先,是把品类价值和品类特性表达出来,品类事件化。比如今天的电梯领导者奥的斯,奥的斯先生发明了“安全电梯”,首次亮相就引发了轰动。

1853年,纽约世界博览会上,奥的斯先生策划了一个戏剧性的事件。他把电梯升到半空中,然后用斧头砍断了电梯缆绳,在围观众人的一片惊呼声中,奥的斯电梯自行锁死,停止滑落。

公关还可以把特性事件化,变成品牌资产。比如说,有一款七座家用车,其特性是“安全、舒适”。

传播难点在于,这款车的C-NCAP碰撞星级和安全气囊数上,并不占优势。公关如何支撑其特性呢?

仔细想想,一家三代坐在车里,谁的安全更受关注?儿童。如何体现儿童安全呢?有没有儿童安全碰撞测试?答案是没有。没有怎么办?开创。


所以,这个品牌做了中国首场儿童安全碰撞测试,成为新车上市的信任状和新闻点。


在支撑品类特性时,不得不提到一个经典公关案例。2005年之前,基本上很少人喝过普洱茶,北京马连道茶城几千家茶叶店,据说只有一家卖普洱茶。

2005年5月,活动发起人胡明方先生,组织了120匹马,从云南出发,历经5个多月,于10月10日进入北京。马帮进京,成了当年最热门的新闻事件之一。

马帮进京体现了普洱茶什么特性?发酵,而且是富有戏剧性的“马背发酵”。马帮驮进京的马背发酵普洱茶,达官贵人争着求购,一茶难求。


 所以,公关要重点思考如何表达品类价值,用戏剧化、事件化的方式表达出来,最好占据某种独特的表达形式,使之成为品牌的专用配称,成为长期的品牌资产。

 

第四阶段:赢得支持


那是不是支撑定位,公关就算做到顶峰了呢?


比如,当美团进军打车市场时,滴滴程维接受《财新》杂志访谈,表示“尔要战,便战。”这篇报道当然体现了滴滴在打车市场的领导地位,但是否有效,是否对滴滴有利呢?

不仅如此,滴滴公关还攻击“美团补贴扰乱行业秩序”,双方线下竞争和线上公关战一起打响。

对滴滴的公关,美团怎么回复的?美团的回复是“人民需要两个打车软件”,“打破垄断才是终局”,与“人民”结盟,激发公众对滴滴的反对。

 

各位,公关的目标仅仅是传播吗?公关不仅要传播,要支撑定位,还要为品牌赢得支持。

无论多么重大的传播项目,即便如北京2008奥运会,一旦结束,大多数人就迅速遗忘。传播就像刮风,过去了就过去了。

但是如果我们能够通过公关,通过传播和沟通,赢得对方发自内心的支持,影响力就会像种树一样持久。各位企业家,如何赢得支持?这是公关中至关重要的事情。


所以,第四阶,我们要“赢得支持”


这两天的华为事件,是一个典型的热点。但你们品牌希望摊上这样的热点吗?多半不希望。热点事件对品牌有利有弊。不光华为这次的危机如此,各种策划热点的品牌,其实都有可能被热点伤害——如果不能赢得支持的话。

赢得支持比传播更重要。传播不能赢得支持,就是在树立敌人。注意看这次任总的讲话,把敌人搞得少少的,只有少数美国政客。朋友呢?多多的。美国公司是朋友,欧洲更是朋友,亚洲是兄弟,中国是自己人。对所有国内企业,无论你造车还是做手机,都不批评,都理解,以和为贵。


任总的危机公关,举重若轻,其中透露的示弱、求和的智慧,正是赢得支持的关键。

赢得支持,首先要求企业家有使命,有使命才有感召力,你对全社会有价值,全社会都会成为你的力量来源。

如果你有使命,又很强大,别人什么感觉?点赞。有使命,又相对使命能力不足,大家才会想要支持你。正亦如此,广告示强,公关要懂得示弱。因为示弱,才能给别人帮助你的接口。


我们看一个超年长网红——故宫的故事。上一任故宫博物院院长单霁翔先生问:国家领导来故宫视察,怎么报告?

“我们的经验是,越是主要领导来的时候,我们一定要给他看最不好的地方,看什么地方呢?看那些荒草凄凄的地方,看那些霉味扑鼻的地方,这样领导的责任心油然而生,就给我们解决很多问题,屡屡得逞。”

所以省领导到你们公司,看完后不是说“李总,你真棒!”而是问——“缺多少钱?需要什么政策?”这样的问题最好。


刚刚我们介绍了探索公关建立品牌的四个阶段,简称“公关四阶”。华为的公关,便是第四阶,是在赢得支持指导下,被动应对热点的做法。

任总一方面展示了华为的使命、价值,同时展示了华为人的不容易——加班加点、宁愿无薪也要奋斗,同时又一直被美国打压。这样的使命和示弱,有利于华为赢得更多的同情,更多的认同,更多的支持。


注意,公关四阶不是割裂的:不是有了植入,就不要热点;有了定位,就不要植入;有了支持,就不要定位;而是向前兼容的,是要在赢得支持的前提下,思考支撑定位、植入品牌、制造热点。而这,也正是华为此次危机公关的印证和启发。



四、新经济品牌做公关有何不同?



接下来,我们问自己一个问题:新经济品牌做公关,和其他品牌有什么不同?这种不同,使得新经济品牌更适合用公关打造品牌。

这种不同是,新经济品牌常常开创新品类,而开创新品类意味着填补空白,意味着新闻性,意味着有机会赢得免费的媒体报道。

开创新品类,叠加新经济品牌更高的社会关注度,为公关打开了更广阔的空间 。


比如,罗辑思维在微信出现时,就是一个新事物,60秒的语音形式引发了关注。

不仅如此,罗辑思维在有意识地开创新品类:有跨年晚会,没有跨年演讲,和深圳卫视合作做跨年演讲;

有发布会,没有知识发布会,那做一个“001号知识发布会”;有例会,有直播,没有例会直播,罗辑思维开创了例会直播。

就连脱不花生孩子,还做了一个“猜生男生女”的互动。


事实上,每一种媒介形态出现,背后都蕴含着开创传播领域新品类的机会。

比如百雀羚的一镜到底长图文,开创了一种新的表现形式,这种形式,会激发话题效应,进而加乘传播能量和传播效果。

最后,各位打造品牌时,如何综合使用公关和广告呢?


这里是我们讲的4种典型形势的公关广告协同方式。


1. 品类成熟,兵力优势:这时广告为主,拖对手打广告战,做大品类。

2.品类成熟,兵力劣势:慎用大广告,要注意领导者的反应。

3. 品类不成熟,兵力优势:公关为主,局部广告。

4.品类不成熟,兵力劣势:公关为主,大广告=大风险。


品类成熟,兵力优势的情况:


比如二手车网络交易,有现成的消费习惯,二手车交易网接受度高,瓜子也拥有强大的融资能力。

所以瓜子以打广告为核心手段,自己打广告,吸引同行一起打,迅速提升二手车交易网的品类势能,做大品类规模。


品类成熟,兵力劣势的情况:


比如简一大理石瓷砖,相对于东鹏和诺贝尔等品牌,简一规模较小。

其大广告建立品牌是否能奏效,要看领导品牌如何反应。如果领导品牌了解定位理论防御战的打法,用数倍兵力优势,迅速跟进和覆盖,情况就会发生改变。


品类不成熟,兵力优势的情况:


常见于拥有丰富资源的公司开发新业务,推出新品牌。这种情况下,企业过早使用广告,可能浪费部分资源,但不至影响生存。如能用精益创业方法,对验证期的关键环节进行一一验证,建立增长模型,费用会花得更有效。


品类不成熟,兵力劣势的情况:


比如有个每条400块的男士内裤品牌,刚刚创立,就通过大广告建立品牌。这种打法就比较凶险。

在完成战略验证期必须的价值验证和交付验证之前,要谨慎通过大广告等重资金的增长方式,过早刺激增长。

对于新经济品牌而言,品类创新常常带来新闻价值,通过媒体、公众口碑的方式传递出去。

过早打大广告,会影响口碑价值。比如,你跟朋友介绍一家新发现的餐厅,结果朋友说,早知道了,电梯里都有。什么感觉?

品类发展的早期人群,需要一种我知你不知的信息优势,这种优势会提高其价值感,促进人们的自发和主动传播。


各位,两条腿走路总比一条腿要快,要好。企业建立品牌,也要综合运用广告和公关两条腿。

广告善于直接向顾客传递购买理由,信息可控,但费用全部需要企业自己投入。公关可以赢得外部力量的支持,一起做大品类,但需要与外部沟通、合作。


最后,祝各位迈开双腿,在打造品牌的路上跑起来! 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务


前端 之 jQuery

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

文章目录
jQuery
jQuery的安装:
jQuery 语法
选择器
基本选择器:
层级选择器
基本筛选器
样式操作
表单筛选器
遍历方法
jQuery链式操作
jQuery 事件
$(document).ready()
click()
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()
focus()
blur()
input()
取消标签默认的事件
事件冒泡
事件委托
jQuery自带的动画效果
jQuery
jQuery的字面意思其实就是JavaScript和查询(Query),即用于辅助开发JavaScript的库。jQuery 极大地简化了 JavaScript 编程,jQuery使用户可以更加方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,而且方便地为网站提供AJAX交互。

实例找到div标签并给div标签设置为红色

原生js操作
var d1Ele = document.getElementById('d1');
d1Ele.style.color = 'red';
jQuery操作
$('#d1').css('color','blue');
1
2
3
4
5
jQuery的安装:
您可以从网页中添加 jQuery

1、从官网http://jquery.com/download/下载 jQuery 库

里面分为:Production version(用于实际的网站中,已被精简和压缩)和Development version(用于测试和开发,未压缩,是可读的代码),一般使用Production version压缩版本的。

2、从 CDN 中载入 jQuery, 如从 Google 或 百度 中加载 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
或者
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
或者
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.js"></script>
1
2
3
4
5
一定要先导入后使用

jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

$(selector).action()
1
美元符号定义 jQuery
选择符(selector)“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
选择器
jQuery 选择器可以对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找HTML 元素。它基于已经存在的 CSS 选择器外,还有一些自定义的选择器。

基本选择器:
ID选择器、类名选择器、标签选择器、组合选择器

选择器 实例 选取
* $("*") 所有元素
#id $("#d1") id=“d1” 的元素
.class $(".name") class=“name” 的所有元素
.class , .class $(".name,.password") class 为 “name” 或 “password” 的所有元素
*element $(“span”) 所有 <span> 元素
el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素
提出注意点,原生DOM查找和jQuery查找出来的结果区别DOM对象与jQuery对象
DOM对象与jQuery对象互相转换
$('#d1')[0]
var d1Ele = document.getElementById('d1');
$(d1Ele)
1
2
3
4
层级选择器
选择器 实例 选取
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素
parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素
element + next $(“div + p”) 每个 <div> 元素相邻的下一个 <p> 元素
element ~ siblings $(“div ~ p”) <div> 元素同级的所有 <p> 元素
基本筛选器
选择器 实例 选取
:first $(“p:first”) 第一个 <p> 元素
:last $(“p:last”) 最后一个 <p> 元素
:even $(“tr:even”) 所有偶数 <tr> 元素
:odd $(“tr:odd”) 所有奇数 <tr> 元素
:gt(nu) $(“ul li:gt(3)”) 列举 index 大于 3 的元素
:lt(nu) $(“ul li:lt(3)”) 列举 index 小于 3 的元素
:eq(nu) $(“ul li:eq(3)”) 列举 index 等于 3 的元素
:not(selector) $(“input:not(:empty)”) 所有不为空的输入元素
:has(element) $(“div:has(a)”) 返回拥有一个或多个元素在其内的所有元素
/用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')

最后一个has的玩法需要写个三个div:一个空div、一个儿子有a标签、一个儿子没有a,孙子有a标签
$('div:has(a)')
输出:
k.fn.init(3) [div, div#d2, div#d3, prevObject: k.fn.init(1)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
样式操作
方法 描述
addClass() 向被选元素添加一个或多个类名
after() 在被选元素后插入内容
append() 在被选元素的结尾插入内容
appendTo() 在被选元素的结尾插入 HTML 元素
attr() 设置或返回被选元素的属性/值
before() 在被选元素前插入内容
clone() 生成被选元素的副本
css() 为被选元素设置或返回一个或多个样式属性
detach() 移除被选元素(保留数据和事件)
empty() 从被选元素移除所有子节点和内容
hasClass() 检查被选元素是否包含指定的 class 名称
height() 设置或返回被选元素的高度
html() 设置或返回被选元素的内容
innerHeight() 返回元素的高度(包含 padding,不包含 border)
innerWidth() 返回元素的宽度(包含 padding,不包含 border)
insertAfter() 在被选元素后插入 HTML 元素
insertBefore() 在被选元素前插入 HTML 元素
offset() 设置或返回被选元素的偏移坐标(相对于文档)
offsetParent() 返回第一个定位的祖先元素
outerHeight() 返回元素的高度(包含 padding 和 border)
outerWidth() 返回元素的宽度(包含 padding 和 border)
position() 返回元素的位置(相对于父元素)
prepend() 在被选元素的开头插入内容
prependTo() 在被选元素的开头插入 HTML 元素
prop() 设置或返回被选元素的属性/值
remove() 移除被选元素(包含数据和事件)
removeAttr() 从被选元素移除一个或多个属性
removeClass() 从被选元素移除一个或多个类
removeProp() 移除通过 prop() 方法设置的属性
replaceAll() 把被选元素替换为新的 HTML 元素
replaceWith() 把被选元素替换为新的内容
scrollLeft() 设置或返回被选元素的水平滚动条位置
scrollTop() 设置或返回被选元素的垂直滚动条位置
text() 设置或返回被选元素的文本内容
toggleClass() 在被选元素中添加/移除一个或多个类之间切换
unwrap() 移除被选元素的父元素
val() 设置或返回被选元素的属性值(针对表单元素)
width() 设置或返回被选元素的宽度
常用实例:

三级菜单展示

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
1
直接操作css属性

// 两个参数设置属性
$('#p1').css('font-size','24px')
// 一个参数获取属性
$('#p1').css('font-size')

// 一次设置多个属性
$('#p1').css({"border":"1px solid black","color":"blue"})
1
2
3
4
5
6
7
位置操作

// 不加参数获取位置参数
$(".c3").offset()
// 加参数设置位置参数
$(".c3").offset({top:284,left:400})

// position只能获取值,不能设置值

// scrollTop获取当前滚动条偏移量
$('window').scrollTop();
$('window').scrollTop(0);  // 设置滚动条偏移量
1
2
3
4
5
6
7
8
9
10
文本操作

text() html() 不加参数获取值,加参数设置值
val() 不加参数获取值,加参数设置值
1
2
属性操作

// 获取文本属性
$('#d1').attr('s1')  // 获取属性值
$('#d1').attr('s1','haha')  // 设置属性值
$('#d1').attr({'num':50,'taidi':'gay'})  // 设置多个属性
$('#d1').removeAttr('taidi')  // 删除一个属性

// 获取check与radio标签的checked属性
$('#i1').prop('checked')
$('#i1').prop('checked',true)
1
2
3
4
5
6
7
8
9
文档处理

// 标签内部尾部追加元素
$('#d1').append(pEle)
$pEle.appendTo($('#d1'))

// 标签内部头部添加元素
$('#d1').prepend(pEle)
$pEle.prependTo($('#d1'))

// 标签外部下面添加元素
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 标签外部上面添加元素
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 替换标签
replaceWith()  // 什么被什么替换
replaceAll()  // 拿什么替换什么

// 克隆事例
<button id="b2">屠龙宝刀,点击就送</button>
// clone方法加参数true,克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);  // true参数
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
表单筛选器
选择器 实例 选取
:input $(":input") 所有 input 元素
:text $(":text") 所有带有 type=“text” 的 input 元素
:password $(":password") 所有带有 type=“password” 的 input 元素
:checkbox $(":checkbox") 所有带有 type=“checkbox” 的 input 元素
:submit $(":submit") 所有带有 type=“submit” 的 input 元素
:reset $(":reset") 所有带有 type=“reset” 的 input 元素
:button $(":button") 所有带有 type=“button” 的 input 元素
:image $(":image") 所有带有 type=“image” 的 input 元素
:file $(":file") 所有带有 type=“file” 的 input 元素
:enabled $(":enabled") 所有启用的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有选定的 input 元素
:checked $(":checked") 所有选中的 input 元素
// 针对表单内的标签
$('input[type="text"]')
// 简化写法
$(':text')

// 找到所有被选中的checkbox
$(':checkbox')  // 注意select框中默认selected标签也会被找到
$('input:checkbox')
1
2
3
4
5
6
7
8
遍历方法
方法 描述
add() 把元素添加到匹配元素的集合中
children() 返回被选元素的所有直接子元素
closest() 返回被选元素的第一个祖先元素
contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
each() 为每个匹配元素执行函数
filter() 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素
find() 返回被选元素的后代元素
first() 返回被选元素的第一个元素
is() 根据选择器/元素/jQuery 对象检查匹配元素集合,如果存在至少一个匹配元素,则返回 true
last() 返回被选元素的最后一个元素
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素
not() 从匹配元素集合中移除元素
offsetParent() 返回第一个定位的父元素
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 返回介于两个给定参数之间的所有祖先元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素
siblings() 返回被选元素的所有同级元素 Returns all sibling elements of the selected element
slice() 把匹配元素集合缩减为指定范围的子集
each() 方法为每个匹配元素规定要运行的函数。
$.each(array,function(index){
  console.log(array[index])
})
$.each(array,function(){
  console.log(this);
})
// 支持简写
$divEles.each(function(){
  console.log(this)  // 标签对象
})
1
2
3
4
5
6
7
8
9
10
11
jQuery链式操作
python代码诠释链式调用,其实就是在调用方法之后讲对象再次返回

<div>
<p>p1</p>
<p>p2</p>
</div>
$('div>p').first().addclass('c1').next().addclass('c2');
1
2
3
4
5
jQuery 事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。为了防止网页还没加载完,js代码就已经执行,通常利用下面两种方式来书写js代码。

$(document).ready(function(){
// 在这里写你的JS代码...
})

网页最后
$(function(){
// 在这里写你的代码
})
1
2
3
4
5
6
7
8
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。

在下面的实例中,当点击事件在某个<p> 元素上触发时,隐藏当前的 <p> 元素:

$("p").click(function(){ 
  $(this).hide(); 
});
1
2
3
dblclick()
当双击元素时,会发生 dblclick 事件。

$("p").dblclick(function(){ 
  $(this).hide(); 
});
1
2
3
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。

$("#p1").mouseenter(function(){ 
  alert("鼠标经过了!"); 
});
1
2
3
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。

$("#p1").mouseleave(function(){ 
  alert("鼠标离开了!"); 
});
1
2
3
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

$("#p1").mousedown(function(){ 
  alert("鼠标按下!"); 
});
1
2
3
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。

ouseup(function(){ 
  alert("鼠标松开!"); 
});
1
2
3
hover()
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。

$("#p1").hover(function(){ 
  alert("你的光标悬停!"); 
  }, 
  function(){ 
  alert("你的光标已经离开!"); 
});
1
2
3
4
5
6
focus()
当元素获得焦点时,发生 focus 事件。

$("input").focus(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
blur()
当元素失去焦点时,发生 blur 事件。

$("input").blur(function(){ 
  $(this).css("background-color","#eee"); 
});
1
2
3
input()
input实时监听,输入内容时发生 input 事件

 $('#i1').on('input',function () {
        console.log($(this).val())
    });
1
2
3
取消标签默认的事件
利用preventDefault()
$('input').click(function (e) {
        alert(123);
        e.preventDefault();  
    });
直接返回false
$('input').click(function (e) {
        alert(123);
        return false;
    });
  
1
2
3
4
5
6
7
8
9
10
11
事件冒泡
iv>p>span  // 三者均绑定点击事件
$("span").click(function (e) {
        alert("span");
        e.stopPropagation();  // 阻止事件冒泡
    });
1
2
3
4
5
事件委托
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
    $('body').on('click','button',function () {
        alert(123)
    })
</script>
1
2
3
4
5
6
7
jQuery自带的动画效果
下面的表格列出了用于创建动画效果的 jQuery 方法。

方法 描述
delay() 对被选元素的所有排队函数(仍未运行)设置延迟
dequeue() 移除下一个排队函数,然后执行函数
fadeIn() 逐渐改变被选元素的不透明度,从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度,从可见到隐藏
fadeTo() 把被选元素逐渐改变至给定的不透明度
fadeToggle() 在 fadeIn() 和 fadeOut() 方法之间进行切换
finish() 对被选元素停止、移除并完成所有排队动画
hide() 隐藏被选元素
queue() 显示被选元素的排队函数
show() 显示被选元素
slideDown() 通过调整高度来滑动显示被选元素
slideToggle() slideUp() 和 slideDown() 方法之间的切换
slideUp() 通过调整高度来滑动隐藏被选元素
stop() 停止被选元素上当前正在运行的动画
toggle() hide() 和 show() 方法之间的切换
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档