H5想必各位并不陌生,今天整理出10个冷门却很实用,即开即用的“云端神器”这些基本都是基于HTML5,不过我今天所说H5和我们平常在朋友圈看到的婚礼形式、企业招聘等的推广H5不太一样,那种基本是最傻瓜式的在线制作就可以生成,没有趣味互动性,那今天就为广大的移动设计师推一期H5灵感参考、制作的在线神器,希望帮到大家,说实话是时候发发干货了!
一流H5设计参考神器
IMDB
IMDB这是一个H5制作参考网,平日里我们经常看电影评分资讯的IMDb其实是可供我们参照构图、设计风格等!这些海报远不止于宣传片,大多都是国际一流设计师的艺术结晶,用来作为构图以及设计风格的参照再合适不过了。
看完上面这些,精心制作的还原设计框架的动图,是不是瞬间觉得自己浪费了很多借鉴大师风范的机会啊?IMDb上的电影宣传海报跟我们手机界面相差不大,用来当做移动页面设计的绝佳参考来源。
神器网址:
http://www.imdb.com/?ref_=nv_home
界面设计与协作神器
FIGMA
在2015年底开始兴起的一款界面设计协作神器,图形设计功能强大、支持多人在线编辑与多人实时评论,用于开会或者研讨非常方便,也可以随意保存历史版本,简直堪称设计界的Google Docs。随便截几张操作动图让你感受一下
有网友说它像Photoshop,但其实它不具备图像处理功能,真正有得一拼的反而是Adobe Illustrator、Sketch,都支持复杂的钢笔锚点变化——但我们去下载AI也要接近1G内存吧?Sketch还只支持Mac系统呢!所以还是比较试用的!
强烈推荐尝试一下,支持导出jpg、png、svg等多种格式。
神器网址:https://www.figma.com
交互动效最全收录
ELASTICODE
如果设计动销时候没有灵感时可以参照Elasticode上各种丰富的交互动效,包括按钮的点击效果、页面切换/跳转、图文出现/消失、元素变换等效果。
优点:这些动效都着重在用户体验的交互上,并非飞机稿;你可以直接感受交互的过程。
神器网址:
http://www.elasticode.com/allapps.php
视觉炸裂的H5代码
CODEPEN
CODEPEN简而言之你得有一定编程基础、懂得如何在H5里面加代码的话,就可以用得到CODEPEN这个动效源码网站。因为它里面有非常多的视觉惊艳动效,并且大部分都附有HTML和CSS、JavaScript源码供我们使用。
神器网址:http://codepen.io/
HTML5+CSS3学习酷站
CODROPS
一个非常棒的HTML5+CSS3学习的酷站。 上面的很多前端酷炫效果都是我们经常看到的。 也是让我们里面想学的一些酷炫效果。 比如瀑布流效果、鼠标悬停效果、页面的动态交互效果、菜单动画效果、进度条加载效果等等。 应该说这个是酷站应有尽有。 唯一的缺点就是必须要翻译,不过这都不是事,晚上可以下载一些在线翻译插件,即可解决。 因为人家收录和收集的HTML5+CSS3资源都是国外的,都是国外一些优秀成熟的web前端技巧和HTML5技术。其实它里面有很多可以在线预览且兼具视觉化以及交互性的动效,一个彩蛋就是每个案例后面都附有相附的代码。
神器网址:http://tympanus.net/codrops/
H5音效神器
GAMEPIX
这是一个专业的国外HTML5游戏网站,整理了超全的音效,用于游戏背景音乐或音效下载等领域居多,时间长短不一,小到几秒大至几分钟的BGM,非常丰富,值得推荐。
这个合辑作了分类,FREE(免费)、FREE/PAID(半免费半收费)、PAID(收费)三种类型,免费的也照样很好用。
神器网址:
http://www.gamepix.com/blog/the-big-list-of-sound-and-music-assets-for-your-html5-game/
如果只需要针对游戏,那么建议你来Open Game Art找,更新快,更可贵的是音频格式比较全,大部分为热心网友上传。
神器网址:http://opengameart.org
专业的H5配色神器
COOLORS
在国内设计师可能用的比较多的是Adobe Kuler,因为他调色盘方便,方案也很多。当然你英文水平过4级话,可以尝试一下Coolors,他配色方案更强大,也支持上传图片进行取色。
它还有一个非常棒的优点:点击“Generate”(生成),会得到随机推荐的一套配色方案,你可以拖拽调换颜色位置,调出相近色阶列表,调整整体方案的色调、饱和度、亮度、冷暖度。
神器网址:https://coolors.co/app
素材最强压缩神器
智图
在移动页面素材压缩这块上,给大家推荐腾讯ISUX前端团队开发的智图图片压缩工具。他与周边的tinypng压缩神器相比较,压缩效果和效率会相对优化(注意:上传的文件上限是5MB)
优点:他可以转换为webp格式的图片(相比PNG和JPEG在不降低图片质量的同时,减少约三分之一的体积),可以控制图片输出质量,而且可以拖动设置条对比压缩前后的效果。
神器网址:http://zhitu.isux.us/
殿堂级H5制作工具
IH5
工欲善其事,必先利其器。在H5这块不得不提的就是iH5了,功能强大,还有制作教程非常方便,不是一般的在线H5可比拟的,上手需要一定的学习成本。
它最大的优势在于——抛弃代码,解放所有不会代码的设计师,让大家能快速实现自己的创意。
现如今你随便搜搜H5工程师的工资,月入1.5万到3万不等。那如果你借助好的工具,可以更快地做出工程师编程的效果呢?工资是不是也上来了?
免费视频教学,当然你也可以用iH5来接单也行,可参考行业闻名的设计师接单公式——[(你的月薪÷22天÷8小时)×私单预估小时数]×2倍——倍数高低在某种程度上,与你对闲余时间的珍惜程度成正比。
功能强大到让你不可思议——物理碰撞、时间轴动画、滑动时间轴、地理定位、数据库、720°全景...统统都有,而且使用上永久免费,直接甩其他H5同行某企秀、某展几条街不在话下!
就算你不会代码,也能做出这些牛掰的移动页面广告——
神器网址:www.ih5.cn
1秒生成静态演示图
PIACE IT
这个生成各种静态页面演示的样机,如果你又要做那种手握手机、或在电脑里显示界面的演示图,不必到处找素材P图了,操作示意如下:
挑模板-->上传图片-->截取图片尺寸-->完成!
每个演示用的模板上都附有标准尺寸,你也可以先在PS等软件处理好尺寸再上传,立即生成各种手拿iPhone、iMac,开着Macbook的图片,来演示你设计的静态图效果。
神器网址:https://placeit.net/
十大云端神器介绍完毕
所以...不点个在看么?(抱头痛哭中)
精品推荐
我要进群
VIP会员招募令
2019全新UI教程大礼包
14款超好用的PS神级插件
UI设计师如何无障碍的转型产品经理
对不起!我们需要一个懂交互的UI设计师
凭什么那个UI设计师起薪15K?
120G顶级C4D教程强势来袭
C4D高阶进阶教程强势来袭
C4D终极篇 | OC渲染高级教程强烈推荐
推荐700个国际顶尖C4D模型,堪称出图神器!
推荐900套国内外顶尖VIS设计大合集
100套全球500强VI手册【完整版】
超赞!110G平面4A设计教程【2019更新版】
关键词回复:
VIP、OC、神器、商用字体、UI学习 、面试技巧、Banner、样机下载、LOGO、C4D教程、转手绘、插画、名片、包装、字体下载、Eagle、2.5D、设计规范,创意合成,作品集模板、商务合作、转载、软件下载请回复相对应缩写(例如:PS)