Project Description

设计师的可视化Web工具

并不是每个设计师都懂得如何使用代码,这里有些工具可以快速帮助设计师可视化的进行Web制作。很多时候,开发周期来不及,大家可以使用如下方法直接帮助前端实现效果并且使用。

Hype

这是目前最简单的方式之一;我们先使用Hype直接制作动画,做完之后,导出HTML文件,可以让前端直接引用。

先看一下Hype做的效果,这是2016年,OnePlus3的时候,下面这个仅仅只是Demo。

 

使用方法简介

1、使用Hyep制作页面,就和做设计稿和Demo一样,制作完成后导出H5;

 

 2、找到刚刚导出HTML文件,使用文本编辑器或者Dreamweaver之类的工具打开,找到下图中的那三行代码;

 

下面这个Youtube视频,完整的讲述了如何引用出去。

 3、将那三行代码引用到站点之中,并上传素材文件到对应路径。

于是,前端不需要另外制作,就可以使用你的效果了。下图是其官网的说明。

 

Slider Revolution

这个方法和使用Hype的方法一致,但是可实现的效果更加复杂。我们可以制作一个依据滚动进行元素变化的效果。就是类似那种文件流专题页。制作完成之后,前端直接引用即可。

可以去看下他的官网(访问官网),就是用Silder Revolutionhttps实现的文件流形式的交互效果。

 

使用方法简介

1、在本地电脑配置好Wordpress环境,个人推荐MAMP,傻瓜式配置;

 

 2、登陆本地你的Wordpress后台,安装Slider Revolution。个人建议可以上某宝拍一个Slider Revolution插件进行安装

 

 3、找到左边的工具栏的Slider Revolution,点击进入,你就可以开始制作了Demo了。界面看起来是不是很设计软件的样子?

我们看下,右边是全局和元素属性编辑区,下面是动画轨迹;顶部状态栏可以添加元素和调整。

 4、制作完成后,可以导出或者复制简码使用。

 

下图展示了导出为html。

其官网也展示了可以支持的方式。

几个小工具推荐

SVG

直接导入SVG生成动画,可以控制颜色、字号、时间、曲线。访问Svgartista.前端可以直接使用其CODE,我一般是直接把SVG文件和该网站发给前端,他们可以自行处理,你告诉他时间和曲线规则即可。

 

贝塞尔曲线工具

各类的贝塞尔曲线;访问Easing functions;你可以调整曲线得到值和简单的代码,访问Cubic-bezier.

勾搭我们

探索更多

一些专业名词解释:情绪版、可用性....

先给大家来一段专业名词:可用性测试、人种志、情绪板、故事板、应用流、用户画像,是不是看到就很懵了。 让我给大家快速普及下这些知识。 设计调研、用户研究、可用性测试是啥? 任何设计,都离不开研究类的工作,让我们清晰方向、了解用户目标、做好用户画像和分析用户行为、做Demo进行可用性测试。很多人将这一切统称为用研。 实际上,这里有三个阶段:方向调研、用户研究、可用性测试。下图是三者之间的差异描述。 用户体验设计、交互设计、视觉UI设计如何区分? 想必这里很多人又模糊了,到底这些事什么设计??如果我们将设计岗位拆解的非常细的话,应该是这样的: · 用户体验设计师-做规划的人 UX负责调研和用研工作,同时也涵盖一部分可用性测试(主要是已有产品)。其产出物交付给交互设计师。 · 交互设计师-设计房子的人 IXD产出流程、框架、信息结构、制作demo进行可用性测试(主要是设计中的产品),其产出物交付给视觉设计,有时候也需要动效设计师参与。 · 视觉UI设计师-装饰房子的人 Visual/UI负责设计视觉画面,设计UI组件、颜色等美学性工作,其产出物交付给开发人员。

Read More »