收藏本站 关于我们

Web制作教程01:怎么循环利用你的设计素材?(原创文章)

发布时间:2017-05-25 09:31:17   来源:PS教程   人气:0

前言:这里该有个滑动提示——哦。   游戏最好有个排行榜——你怎么不早说?你怎么不早说?   这设计看起来不够高大上啊——换套设计,很多逻辑要重做

\

这里该有个滑动提示——哦。

游戏最好有个排行榜——你怎么不早说?你怎么不早说?

这设计看起来不够高大上啊——换套设计,很多逻辑要重做啊亲!


有什么方法可以循环利用你的设计素材,节省你大量的时间吗?


接下来,谈一谈如何利用iH5的“小模块”功能,实现Web素材、功能的复用。



【工具】

www.iH5.cn(3.0版本)



一、小模块是什么?


\


常用组件:文本、矢量图(SVG)、时间轴、轨迹、数组、F(x)函数


温馨提示:虽然小模块是独立的,你依旧可以设置点击某个符合要求的菜单项,会触发什么交互。

 

3、动态数据类

 

前面用到的小模块,都属于在后台“固化”的内容,一旦涉及动态数据,就更能显它的神通了。

 

\

By 周莜视界

 

常用组件:文本、矢量图(SVG)、数组、数据表、计数器、F(x)函数


温馨提示:图表绘制一般需要代码,所以制作上有一定门槛;数据的动态变化,可以通过更新与输出数据表的内容,并结合二维数组的绑定功能实现。

 

4、其他应用

 

从上面的各种应用,你会发现小模块就是模式化的物件

 

我们做H5,用的一镜到底、720度全景、跑马灯等手法,统统都是模式。小模块也差不多,所以你可以参考一些现成的模式,给设计或交互带来灵感。

 

下面推荐几个参考设计模式的好去处——

 

\

移动模式参考:日历、留言、导航、注释、空集、列表、时间线、画集等各种移动设备的模式……

http://www.mobile-patterns.com/

 

    Pttrns:书籍、浏览、日历、卡片、表格、登录、空集等各种移动设备平台的模式,可根据苹果/安卓、平板/手机/手表等进行分类。

    https://pttrns.com/(需VPN代理访问)

     

      移动灵感:移动设备的动效设计集合,有丰富的效果预览。https://inspirationmobile.tumblr.com/(需VPN代理访问)

       

        Pinterest:针对某一个APP的设计模式整理,类型比较丰富。

        https://www.pinterest.com/search/pins/?q=mobile&patterns(需VPN代理访问)



        二、3步,做一个属于你的小模块

         

        下面以比较简单的开关触发器为例,说明小模块的使用方法。

         

        1、确定功能


        \

         

        简单吧?

         

        你肯定也看出来了,既然这些参数是和iH5的组件功能挂钩的,它的类型肯定非常多样化,包括数值、内容、颜色、数据组等等,拓展性极强。



        三、为什么要有复用思维?

         

        最后,简单讨论一下使用小模块的两个必要性:

         

        1、节约生命

         

        你只需要花点时间把过去做的、以后想做的东西打包成小模块,就能方便你未来修改或再使用同类型的H5,可以节省很多时间。

         

        2、提高性能

         

        当你把可以重复利用的图片资源打包成小模块,在同一个案例中多次使用,还有利于降低整个H5的体积,显著减小文件的大小。



改需求不可怕,没有应对改需求的方法才可怕。

本文来自PS教程网www.46PS.com,转载请注明!关键词:WEBFLASHFLASH教


PS教程