必威国际

详细解析网页设计中的视频应用技巧,浅谈如何用动态影像提升网页魅力

九月 25th, 2019  |  摄影专区

科技越发达、人类越懒惰。当我们在信息大爆炸的网络中疲倦于文字和图片,动态影像通常令人为之振奋。UGC短视频社区的红火,说明用户渐渐喜爱自产视频记录和表达;即时通讯软件功能从单一的发送文字到加入音视频,用户的交流方式正在改变。网页上以动态影像传达信息,从技术上早已不是难题。如何围绕主题,让其形式追随传播的内容,运用动态影像使得网页更具魅力才是我们今天要讲的。

在网页设计中使用更多的视频,被认为是2014年的一大设计趋势。当然有一些人会坚持大量使用文本/内容,他们认为内容是网站的根基,其他人则认为需要打破传统,因为访客的好奇心是不会满足于单一的内容铺陈的,需要为访客的好奇心制造惊喜。

图片 1

A.关注内容,迅速带入

无论如何,视频增多文本减少的网站在过去的几个月里层出不穷。这样的解决方案有其优缺点,但是至少它引爆了人们的激情。只有时间能证明一切。

题图:来自Google-UX of AI

视频,是最直观的信息传达方式,大大减少了文字的阅读成本,适用于短时间内讲清楚一件事,有利于传播分享。先从基于用户内容的创意众筹平台说起,Kickstarter相信,一个好的创意,透过适当的沟通,可以快速地广为流传。随着观众对视频表达的青睐,视频成为项目创意的主流曝光方式,大多数创意者选择深情并茂演说,使得idea本身更具说服力和感染力。Kickstarter每年都会选取年度最佳项目,制作网站的年度集锦宣传专题页,提高网站平台的品牌魅力。专题页先飞入提纲挈领的slogan和几则关键数据来撑满浏览器,缓解网页加载时间,让大视频背景动态影像得以流畅切换播放。年度项目以动态影像方式把新用户迅速带入内容,了解平台理念。

这里收集了一些新的网页设计的例子,它们带来了更多的视觉冲击,感受下。

每月设计清单,专注于互联网设计领域内容,汇总精选每月设计师需要了解的互联网设计动态。分为热点资讯、软件工具、设计经验、案例研究、网站推荐、深度思考等栏目。

图片 2

案例合辑Manaz Productions

Tips:链接中大部分国外文章来自medium的在墙外

→Kickstarter年度集锦

该网站毫不犹豫地提供了大量视频而故意削弱了文本量,其实并不奇怪,因为这个公司就是视频制作商,着陆页凸显自己视频制作技巧是很有必要的。

软件工具

  • FontRapid:支持直接在
    Sketch 上制作 OpenType 字体的插件。

    图片 3

    FontRapid

  • Reduce
    App
    :压缩 Sketch 文件软件,之前一个 Sketch
    Cleaner
    也不错,不过要收费,这个免费的 Reduce App 可以尝试一下。

  • Barrel
    Herd:Sketch
    文件转PPT / Keynote 工具(转完是 pptx 格式,keynote
    可打开)。但其规则是将位图和文字元素转换为 ppt
    上可编辑的内容,其余内容统统忽略,包括背景,比较粗暴。

    图片 4

    Barrel Herd

  • Timeline for
    Sketch:为
    Sketch 加入时间轴功能的插件,用于制作动效或动画,但是需要付费。

  • Sketch
    Icons:Sketch
    生成动态图标库的插件。/
    插件介绍

  • Design+Code 发布的 iOS 11 UI
    Kit:适用于
    Sketch,综合全面,适配 iPhone X。/ 另 Facebook 的 iOS 11 UI
    Kit

B. 序曲铺垫,身临其境

图片 5

设计经验

  • 从零开始设计一个 Sketch
    文件压缩软件:文章讲述
    Reduce App 的制作过程,一个 Sketch
    文件压缩软件,包含其创作缘由、原型、设计过程等等。

    图片 6

    Reduce设计

  • Google Clips 智能相机的 AI
    用户体验研究:讲述
    Google Clips 的设计理念和设计过程,以及如何去训练其中的AI。

  • 设计 Sketch 到 PPT 工作流优化工具 Barrel
    Herd:讲述了
    Sketch 转 PPT 工具的诞生,优化了以往设计师在 Sketch 上设计 PPT
    然后导一张张图片插入 keynote 的工作流。

  • 设计Apple
    Emoji:难以想象当初08年第一版
    Apple 的 emoji
    表情出自实习生之手,作者在即将10周年之际,回忆当时的创作过程及和导师
    Raymond 的情谊。

    图片 7

    Apple Emoji

  • 拖放UI设计模式:以
    Clarity 为例讲解拖放 UI 的设计。

  • 设计师未来指南:在技术进步的今天,设计师如何为未来做准备。

  • 用速记法捕捉绘画创意:在设计中,运用速写中技法快速捕捉视觉创意。

  • 游戏开箱/卡包的用户体验:如何让用户获得开包抽橙的快感,文章分析了目前各大游戏开箱开卡包的交互体验。

    图片 8

    炉石传说开卡包动画

  • 数据后台产品中的“过度设计”:以数据后台为例总结的一些过度设计经验。

  • 网站设计综合指南:从视觉表现到功能设计,全面的网页设计指南。/
    译文

文字和图像还不足够身临其境?用视频创造场景感,增强用户的真实体验。Eleks公司创意制作的Google
Glass概念网站是这么做的,网页前加上一段动态影像序曲,呈现沉浸式的场景。戴上Google
Glass,通过主观镜头让用户把真实生活想象成电子游戏世界,给足用户脑补画面。序曲过后,在动态影像中加入鼠标互动,通过慢慢引导有重点的把技术信息等内容阐述清楚。增强体验的同时,也不失为提高网站停留时间的有效途径。

Startup Framework

网站推荐

  • 2017年回顾系列:CodePen 榜单
    2017
    / Codrops 网页效果
    2017
    / Dribbble 2017
    回顾
    / Sketch
    2017
    / Framer
    2017
    /
    国外博主年终总结收集

  • unDraw:收集开源矢量图案的网站。

  • Uneo工作室的3D虚拟面试体验:将工作室的一些有趣的人物虚拟化,设计有趣的对话内容,结合
    three.js 技术流畅的 3D渲染页面,十分有趣。

    图片 9

    Uneo 3D Interview

  • Laws of
    UX:一系列交互原则的介绍,配合极简风格的插图。

  • Adele:设计系统/规范库,收集了目前各大公司公开的设计系统。

  • Colorwise:收集
    Product Hunt 上赞数最多的产品的配色网站。

图片 10

网站和其产品的描述是一致的,包含着各种复杂而专业的图像。Web页面里包含了大量的解释:视频、图片,相比传统的文本更具说服力。

深度思考

  • 设计简化思维:随着技术创新和功能迭代,产品会变得日益复杂,而复杂的设计会增加用户使用成本,如何作简化就显得尤为重要。

以上 2018年1月份 的设计清单 由 shengbanx 整理。
欢迎关注 DesignerNews 专题。

题图:The UX of
AI

→ Google Glass Experiment-Real-Life Digital Game

图片 11

C. 一条好线索,影像碎片蒙太奇

The Barstow

影像碎片也足以撑起一个有趣的小视频,首先需要寻找一条好线索。先举个小栗子,Google今年的国际妇女节Doodle选择动态影像突破常规的艺术插画形式,点亮搜索首页。这枚视频Doodle以世界各地的妇女的一个笑容、一句地方语祝福拼贴出一支影像串烧。亲民的路人形象与平民式镜头感拉近了用户距离,视频欢快的小节奏配乐格外小清新,令人感到简单轻松、贴近生活。

网站页面被切成上下两个部分,每个部分都有一段视频。两部分在给用户带来舒适心情的同时也为其带来了适当的导航。

图片 12

图片 13

→Google Doodle-国际妇女节(最近形势你懂的,自备梯子。)

Apple 30 Years

影像碎片的节奏与想要传达何种情感紧密相关,怎么形成节奏感?把相似镜头感的影像碎片,以一致画面运动速度组织起来,就能构成特有的秩序。NISSIN(日清食品)在进入官网前加入了动态影像,通过特写慢镜头把日清食品、食材和人物满足的表情组织起来,以5秒一个片段切换和慢镜头内容形成快慢对比。视频开头的动态影像可以设置烹饪倒计时时间,作为线索,点题速食,并加入新鲜食物的画面让人产生等待日清速食的美好体验,唤醒用户的味觉,带着好心情进入官网。

苹果公司为其忠实的用户们赋予了一个干净的、现代的、先进的30年历史回顾。页面包含了很多有趣和迷人的视频,有效地反应了本质。

图片 14

图片 15

→NISSINGroup

Garmin

寻找一条好线索串起碎片化影像,可使得整个创意表现的丰厚完整。再举个财大气粗的栗子,年初的Mac30年专题页企划,彰显了Apple品牌的磅礴气势。同一时间,不同时区,使用Apple设备创造奇迹。摄制团队在五大洲不同时区选取15个拍摄地点,以洛杉矶的摄影棚为指挥中心,同一时间用iPhone5s拍摄素材,记录世界各地的人使用Apple产品所做的超乎想像的片刻。由于同一时间拍摄与指挥中心的实时沟通和影像同步,Mac30年视频在几天时间内制作完成。从整个记录与制作团队的使用设备到被记录的内容,紧锁主题,强有力传达Apple的品牌承诺:将科技的创造力赋予每个人。

是一个广告网站,在最好的光照条件下巧妙地展示了产品。该网站做到了文本和图片完美的融合,它们互相支持相辅相成。

图片 16

图片 17

→Mac 30-years

Happy

图片 18

乍一看这是一个非常常规的网站,然而它用了一个非常创新的方法来吸引用户的注意力。网站为游客们提供了24小时的流行趋势视频游览,良好地展示了它们的产品。

→Mac 30-years behind-the-scenes Story

图片 19

标签:, , , , , , , , , , , , , , ,

Your Comments

近期评论

    功能


    网站地图xml地图