05.03 排版|如何改造微信音频播放器?

<table><tbody>

除了干货,其它什么也没有

职场

数据

新媒体

设计

极客

/<tbody>/<table>

新媒体高级排版定制:021 37218818

之前我们在《超高颜值图文排版完全指南》中谈到,高端企业品牌对新媒体排版有极其严苛的追求。落到细节层面,既包括《中文排版指南(有点变态)》中对文字段落的规范,又包括《公众号如何强行群发图片?》中对推送效果的偏执,甚至对有些企业公众号来说,音频播放器都想强行改变……

可以实现吗?JZ 告诉你,可以。

初阶:字体与比例

就音频模块而言,微信图文本身提供的样式并不丑,很多时候你可以稍做改造,获得更好的视觉效果。例如这篇文章《收藏|100 首必听巴赫,你听过几首?》,可以发现模块尺寸和模块内字体发生了变化▼

排版|如何改造微信音频播放器?

这种改造方法比较简单,在《教你改变微信图文的字体!》我们已经介绍过具体方法。

高阶:眼见不为实

“眼见不为实”是设计学中的一个普遍现象,例如在我们发布的《英语六级听力真题|2017-06》这篇逆天的交互图文中,最顶端的音频播放器通常会让读者大吃一惊▼

排版|如何改造微信音频播放器?

没错,只需点击顶部的的「耳机」小图标,四六级的听力居然就开始了。那么微信的播放器真的被改造了吗?并不是。就设计思路而言,我们的交互目标是当用户触击到相关区域时,手机播放出音频。所以我们完全可以通过CSS 布局,先加载一张准备好的图片作为虚假的播放器,再将真实的播放器载入。但是接下去,我们将真实播放器的<code><opacity>/<code>调整到 0,再将其通过<code><margin>/<code>移动到虚假播放器之上。

你可以点击下方小程序卡片,查看更清楚的代码实现方式。这是 JZ 微信公众平台新绑定的一款小工具,可以快速创建高亮代码,并且分享给好友,方便读者们在工作中快速探讨代码问题。

更多高级排版学习

JZ 即将在广州开课了!

欢迎报名 5 月 19 日、20 日在广州由 SVG AttributeName 白名单开创者计老师和大神玩家 GL 共同亲自主讲的,第七期顶尖排版术与创意新媒体广告设计课。拥有《2018热点新媒体日历》的学员可以立减 ¥300 学费。更多基于 SVG 的高端微信图文我们将于近期持续展示。

排版|如何改造微信音频播放器?

培训时间

5月19日、20日全天

(另含23日晚一次线上基础拉平课)

培训地点

广州 · 金润国际大厦

场地支持

排版|如何改造微信音频播放器?

培训基本内容

新媒体视觉识别系统

字体、配色、制图、版式

创意排版设计思维

动画代码技术实操

行业经典排版案例复盘

(包含苏宁、京东、滴滴等案例代码复盘)

报名费用(含发票)

¥1499

(已购《2018新媒体热点日历》用户立减 ¥300)

课程咨询

021-37218818

往期回顾

关于 GL

自从 GL 参与过 JZ 在北方某地的多次公开课后,他一跃跨入新媒体圈成为 SVG AttributeName 图文交互设计大神,现在是 JZ 的新媒体创意首席讲师。

近期他还和 JZ 共同设计了《2018热点新媒体日历》,也在著名的第三方排版编辑器 iPaiban 开发了大量共享样式。

如果你的企业有定制需求,可以先查看《案例分类》,或致电:(021)37218818

版权信息提示:由于近期各公众号以及第三方排版器抄袭严重,GL 已通过出版社对所有图文创意和排版以及代码逻辑进行著作权固定,任何抄袭、对抗行为将在未来特定时间由出版社统一巨额索赔,好自为之。

-END-

定制咨询:021 37218818

其他你会感兴趣的内容

回复 排版阅读互联网文案排版教程

回复 标题了解优质标题的酝酿方法

回复 配图学习图片素材的搭配方法

回复 H 5开启移动营销技术学习课

回复 广告看更多行业广告知识大全

H5、平面、视频等数字营销服务请致电

TEL:(021)3721 8818

客户案例:APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基(湖南) | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际|第一太平戴维斯|德国莱茵|盖茨基金会|追星集团

抱歉,除了干货,其他什么也没有。


分享到:


相關文章: