除了H5，设计师还需关注哪些科技动态？
作者：JZ多媒体解决方案 微信公众号
这年头，做一个设计师还真不容易，不仅要关注设计趋势，还要时刻关注科技动向，技术驱动的设计变革时时刻刻发生在我们身边。那除了H5，设计师还需关注哪些科技动态？以下是笔者整理的几个值得关注的科技发展动向，供设计师们参考，这里谈的不是未来科幻，是实实在在已实现的迹象，虽然还未普及，也有些看似和设计无关，但或许影响到未来的格局，未来几年在多个领域注定是会出现大的变革，也会出现新的发展契机，我们也一直在关注和思考，Epub360除了提供H5设计工具，未来还能做些什么？5年之后的手机与今天完全不同——Apple一、后移动互联网时代移动计算中心的多样化移动互联网时代最具代表的是智能手机的普及，2007年随着iphone的推出，开启了智能手机的时代，同时，随着移动优先的超级社交App的发展，加速了以智能手机为计算中心的移动互联网格局的形成，对于交互设计行业来讲，也带来了基于触屏交互的App交互设计，以及兼顾桌面、平板、手机的响应式设计趋势。未来，移动互联网的终端仅仅是智能手机吗？，移动设计还仅仅围绕手机屏幕的尺寸吗？就像Apple的观点，『5年之后的手机与今天完全不同』，或许以后连手机这个词也会消失，语音通话的功能逐渐会成为移动智能终端的一个小的应用功能。智能手表或许会成为新的移动计算中心智能手表近一两年得到快速发展，Apple推出了Apple Watch及Watch OS、谷歌推出的Android Wear操作系统， 三星推出的Gear S系列智能手表及Tizen操作系统，Moto推出的Moto360，华为也推出了huawei watch，HTC也即将推出自家品牌的智能手表。从销售数据来看，目前各家的智能手表还远远未成为公司的核心产品，但为何近期频频发力智能手表？Apple也传出近期招募上千工程师投入智能手表产品研发，谷歌也传出会研发自己的智能手表。这些巨头仅仅是为了完善自己的产品线？或许，是为了抢占继智能手机之外新的移动计算中心。目前智能手机的芯片计算能力，足以和以往的桌面电脑芯片抗衡，同样，随着未来智能手表的芯片技术发展，也会承担核心的计算能力，智能手表的便携性以及承载更多的私人健康数据，配合扩展的显示终端，会具有更强的使用粘性。VR、AR在巨头和资本的推动下得以快速发展，头盔及智能眼镜会成为新的消费级智能终端。关于VR（虚拟现实）、AR（增强现实）的报道近期可能都被刷过屏，这里不做VR/AR的科普，不了解的可以自行搜索。2016被公认为VR元年，据高盛分析师分析，2025年VR/AR市场规模乐观估计将达到1820 亿美元， VR/AR 的 9 大应用领域分别为视频游戏、事件直播、视频娱乐、医疗保健、房地产、零售、教育、工程和军事。互联网巨头前几年已开始布局此领域，谷歌、阿里参与投资的Magic leap，Facebook 斥资20亿美元收购Oculus ，微软推出的Holoens 全息眼镜，Sony推出PlayStation VR，Htc 表示未来也将公司核心业务转为VR领域，并推出Vive vr产品。三星也基于Oculus推出Gear VR产品。日，据英国《金融时报》报道，Facebook宣布成立数百人的“社交虚拟现实（SocialVR）团队”，正式开启了将核心社交网络融入到虚拟现实中的历程。2015年年底，腾讯 Tencent VR开发者沙龙北京站召开。腾讯首次公布了Tencent VR生态，包括VR设备信息、VR SDK组件以及VR开发者分成、分级、支持等一系列计划详细信息。同时腾讯也表明了自己对VR的态度，软件与硬件都会做，其中VR设备是必须做，VR设备有别于此前的产品，集成了信息收集、用户体验，平台、入口等多方面，认为VR的未来是硬件+软件。二、智能硬件快速普及，信息交互无处不在。越来越多的生活物品开始智能化，烤箱已可以联网，通过网络将菜谱的参数输入到烤箱进行食品烘焙，喝水的杯子，已可以进行水温显示及健康喝水提醒，体重秤已可以显示身体的多项指标并通过App进行健康分析及指导。一个床头灯也可以根据心情随意调整氛围灯光并进行睡眠监测。。。我们也欣喜的发现，越来越多的智能产品是由跨界设计师主导进行产品设计和研发。补充信息：eSIM（eSIM是替代实体SIM卡的可编程电子装置）的规格刚获全球移动通信系统协会（GSMA）的认可，可以应用到智能手表、平板和健身追踪器等的设备。三星Gear S2智能手表是全球首款eSIM智能设备。eSIM的确认，将对智能硬件、物联网以及通讯行业带来深远的影响。三、数据互联，带来的应用间协作更为广泛。Slack整合了多个应用接口，可以统一在一个App里进行信息聚合和交流，短短一年便已估值30亿美金。bt.tn，一款实体与互联网连接器。是基于网络连接的智能按钮，你可以很方便地将它与电子设备、社交网络、互联网服务，甚至只要你想得到与网络有关的东西，都可以通过它链接到这一个简单的按钮。Amazon推出的Dash Button 是一个实体按钮，可真正实现一键下单，将现实世界与网络应用一键相连。Dash Button 展示出了未来家庭的一面，这也是现实与数字世界之间奇妙的交互与融合。iphone有个健康应用，除了支持iphone、apple watch的健康数据外，其实是一个健康数据的统一交换枢纽，第三方应用在授权的前提下可以进行数据的读写，可方便进行数据共享和应用协作，这也是操作系统级别的数据交换中心。当前每个应用都会产生大量数据，我们相信，未来一定会出现更多的操作系统级别以及第三方商业平台来连接不同的应用数据，解决数据孤岛，更好地进行应用协作。四、人工智能已离现实不远。估计很多人前段时间都调戏过微软的小冰，同时也看到了谷歌的人工智能阿尔法击败了欧洲围棋冠军樊麾的新闻，人工智能引起了大众的极大关注。人工智能经过多年的发展，除了科研、企业应用领域外，一定会产生消费级的产品应用，至少会影响到未来的信息输入、交互模式以及信息检索、处理、反馈模式，会对众多领域产生深远影响。五、无线充电技术的发展，让我们不受电池容量的束缚。CES 2016 上出现了一款全新无线充电产品——来自 Ossia 公司的 Cota 无线充电基站。使用时被充电设备并不需要放在一个固定位置，目前可实现半径3 米范围之内定向对设备进行充电。来自华盛顿大学的研究人员发明了一种新技术，可以通过路由器的Wi-Fi信号为智能手机充电。而通过路由器Wi-Fi信号充电的最长有效距离为28英尺（约为8.53米），并且在充电 的过程中仍然可以正常访问互联网。未来，一旦这项技术变得更加成熟，并且FCC放宽Wi-Fi路由输出功率的话，那么未来用Wi-Fi信号为手机充电，彻底摆脱移动电源和线缆的话，我们的生活将变得更方便。六、科技的发展，对于设计领域有何影响？科技发展一定会带来应用创新，一定会带来新的机遇与挑战，未来科技的发展，对于设计领域，特别是产品和交互设计会带来哪些影响？以下谈谈笔者的看法。设计领域拓展及设计方法、流程的演进。科技的发展带来了新的应用场景，交互模式也由鼠标、触屏延展到形体、位置传感及语音交互，如何利用新科技进行行业领域的设计创新及构建新的设计系统、设计流程，将是最需要着手解决的问题，先知先觉的设计师及设计机构一定会有更好的发展机遇。新的设计工具的诞生VR/AR以及形体交互方式带来了新的设计开发壁垒，一定会有第三方公司推出可视化的工具提高设计效率，当然，我们Epub360也会努力推出更好的设计工具来满足未来的设计需求。全新的多屏幕适配。未来数字媒体内容，由于显示终端的多样性，会带来多屏幕适配的难题，工具可以解决适配效率，最难的是构建适配的设计思想。3D设计人才会更加紧缺设计师是时候需要恶补下3D设计技能了。交互式全景视频会最先得到发展相对于VR/AR而言，交互式全景视频的技术门槛要低很多，或许会是最先得到快速发展的领域。早期的内容变现将更加容易新的技术及终端设备的发展，都会缺少优质的内容，设计师除了提供设计服务外，也可尝试进行内容设计变现。场景化、社交化的交互设计挑战VR、AR的全景沉浸式体验，内容的交互要结合用户的形体交互及传感器感知，并需考虑社交化的特点，会对设计师带来新的挑战。跨界的设计创业越来越多结合众筹及越来越通畅的渠道平台，以设计驱动，结合新科技的智能产品设计创业会越来越多。总之，未来已来，或许很多设计师原有的功课还没补完，便要投入适应新的变化当中，设计师注定是个苦逼的行业，时时刻刻要面对难以把控的变化，但，这不也正是设计的乐趣吗？同时也期待派友们跟帖评论，除了H5，分享你认为作为设计师应关注哪些科技动态！注：本文作者陈建峰（Jason）为Epub360创始人、产品总监2016，H5的春天到了吗？3月5日深圳沙龙：新媒体时代，如何让HR主动“勾搭”你想在4天内速成H5设计？快来参加JZ-H5杀手训练营！
相关微信文章：
相关推荐：
本网站所有内容均采集自网络，如有侵权麻烦邮箱联系删除。搜索&|&search
哎呦不错，这样的H5页面是如何设计的?时间：03-26&&&&&&
&&&&& 要说的是---哎呦不错，这样的H5页面是如何设计的?你不围观，她也不围观，后悔药可没那么多啊!呵呵!经验分享你自己要不要吸收，自己思量吧!
　　直入主题：“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。
　　一、功能与目标
　　首先从功能与设计目标来看， H5专题页主要有以下4大类型：
　　1.活动运营型
　　为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
　　大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“哎呦不错，这个页面有点diao噢”的心情点击了分享。
　　2.品牌宣传型
　　不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
　　伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。
　　3.产品介绍型
　　聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
　　这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
　　4.总结报告型
　　自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
　　《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。
　　二.形式为功能服务
　　在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的H5专题页表现形式：
　　1.简单图文
　　简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
　　滴滴打车这个案例就是典型的简单图文型H5专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。
　　也有不甘平淡的精彩案例。在除夕夜全国人民疯狂抢红包的时刻，微信推出了《从此看尽中国人的名与利》这样一个专题页。第一眼就被镇住了，好亲切的RMB~每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻画，带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案，在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。
　　2.礼物/贺卡/邀请函
　　每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
　　AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机，镜头从水晶球外不断摇晃推近，渐渐走进水晶球的微观世界里。通过手机环顾四周，可以360度欣赏水晶球里的全景，摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友，相信一定会惊艳到对方。这个H5页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，给用户带来了完美的互动体验，值得细细品味。
　　Evernote在过年期间也别出心裁地推出语音贺卡，通过公众号引导用户对其发送一条语音消息，然后把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以Evernote品牌色为主，同时蕴含着一丝优雅的年味，十分讨巧。
　　3.问答/评分/测试
　　问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
　　与本文开头一样也是大众点评的项目，这次是为姜文的电影《一步之遥》做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝(一定要扫一扫体验下!)。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。
　　4.游戏
　　Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。
　　三.为设计加分的4个要点
　　一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
　　1.细节与统一
　　要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代;幽默调侃的调调，那文案措辞就不能过于严肃;打情感内容牌的，动效就不能过于花哨。
　　大众点评姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效，无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
　　尤其关注“分享提示”这个细节设计，比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的。再贴几个精彩案例：
　　紧跟热点，利用话题效应
　　想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
　　天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆，同时《全民COS武媚娘》的H5互动页也第一时间上线，操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众又推广了产品。
　　网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页，放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相。一时间被疯狂转发，网易娱乐也算是顺势自我宣传了一把。
　　3.讲个好故事，引发情感共鸣
　　不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
　　LEVI’S新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围。最后引出“这个新年，把压力和束缚打包扔掉，用新鲜的眼光感受生活，一起活出趣”的品牌推广slogan，代入感极强的故事无疑是驱动分享的源动力。
　　4.合理运用技术，打造流畅的互动体验
　　随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果，相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
　　典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合，在滑动过程中营造出一种丰富的视差滚动效果，单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。
　　蒙特总结：随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。未来必将涌现更多优秀的H5页面，让我们拭目以待。
　　　　蒙特，英文：Mountor，全称：杭州蒙特信息技术有限公司。蒙特是专注于互联网移动互联网技术研发、销售、服务于一体的高新技术企业。我们秉着客户第一的理念，真诚地为各行业、各平台每一位客户提供最专业最贴心的高品质服务，同时提供免费的专业平台规划建议。您的企业利用互联网、移动互联网持续蓬勃发展、蒸蒸日上，是蒙特人最大的成功!
　　蒙特成立于日，自成立以来，蒙特不断创新研发，已成长磨砺了16年，拥有11个软件项目著作权，服务于政府、国企、上市公司、中高端企业等上万家客户。其中10年以上的客户有5000多家，蒙特服务过的众多客户，对蒙特皆留下了深刻的印象和良好的建站口碑。
　　作为高端品牌专业网建行业的领导者，主要提供、、、、、微信公众号托管代运营、等互联网专业性服务。蒙特积极吸纳杭州地区的高校人才资源优势，不断充实自身设计与技术力量，以求为客户带来最满意的视觉体验与最安全的网站保障。蒙特现有团队121人，均为本科以上学历，其中有27名党员和16名预备党员。
　　蒙特旗下子公司——杭州汉博专注于为客户提供因特网接入(全省21家接入商之一)、网站报修、网站安全检测、网站安全加固、网站推广、网站运营、域名注册、网站备案等网站服务，汉博有望成为全省第三家为经营性网站提供安全检测和加固的服务商，为您的企业平台健康发展保驾护航!
& 杭州蒙特信息技术有限公司版权所有
Mountor、蒙特是Ｍountor Corp.的注册商标。经营许可证编号：&
技术支持：
&专业构筑品质网站
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由蒙特提供
由杭州汉博提供
由杭州汉博提供
由杭州汉博提供
由杭州汉博提供
提供网站备案
更新时间：日
咨询热线：1此页面上的内容需要较新版本的 Adobe Flash Player。
此页面上的内容需要较新版本的 Adobe Flash Player。刷屏传播的H5方向：H5产品设计思路
这一个月忙翻，好久不更新。闺蜜从运营转产品，撒花庆祝。那天被问到H5设计的问题，正好前一段时间也想一个H5的产品宣介方案，当时调研了几个。
调研的时候梳理了一下易于传播的微信H5方向，一直藏在印象笔记。正好闺蜜需要，本来想邮件share给她，但一忙又忘了，今天check简书，就想还不如发出来。
1、利益触发与活动类
如分享XX参与抽奖，关注公共号分享到朋友圈截图领取PPT模板下载码，分享到朋友圈获取微信直播分享机会等。类似于这种利益触发的机制与活动，分享了才能进行下一步，很多人还是愿意关注+分享的，尽管分享后一段时间删除的可能性比较大，但还是会出现刷屏的效果。
2、内容共鸣类
案例：快看漫画的产品宣介，“对不起，我只过1%的生活”和中央电视台的“家和万事兴”，尤其是“家和万事兴”，在对的时间推给用户对的东西，按手印、显示第几位等小细节提升用户参与感。
3、数据类、大全类，有收藏欲望
很多人都是把微信朋友圈当做收藏夹来用的，看到有收藏欲望的文章就会转发到朋友圈，比如XX大全，最全的XX知识/工具，有了XX就够了，XX行业年度报告。再如互联网金融产品的消费账单分享，可以整个用户数据记录，满足用户私人数据需求，再加以超越XX%的用户，满足用户的秀优越心理。
4、好玩的游戏，且得到数据反馈
如神经猫、全民找XX、杜蕾斯-一夜N次郎等好玩的游戏去年也刷屏不少，这些游戏多用时间控制提升用户的刺激紧张感，辅以数据反馈超越了XX人，让用户有分享欲，有的用户为了刷出漂亮的数据，甚至玩个N次。依据这个，当时我们做了“测单词、知工资”H5小游戏，寓教于乐，PV很不错。
5、人人参与
一起来画鸡、一起来画圆等。
6、技术亮点&互动体验
百度智呼吸、手机秒变空气检测器、Burberry，“一辆懂你的车，在寻找一位懂TA的人”尤其赞，模拟驾驶体验，展示产品性能。
暂时就想到这么多，欢迎大家补充。
那几天想H5宣介方案和宣传片剧本的时候，意识到自己懂的太少了，突然很想去再读个广告和编导，学无止境！
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章