设计中的逆向工程:讲解成熟设计的魅力

什么是逆向工程?

就是将成品设计反向推算出设计制作过程,获取设计者的设计思路,最终为你所用!

1、逆向工程之构图布局篇

好,首先让我们来看看鬼子国的网页布局

设计中的逆向工程:讲解成熟设计的魅力

通过严格、细腻、整齐的分割布局,使页面上不同的形状标志之前有了彼此对齐的联系,不各自为战,对产品图片角度进行强制同意,达到了杂而不乱的效果。通过各元素大小、颜色的对比使之页面不过于呆板!并以固定的格式不断重复,还有最重要的一点:质感与空间感。

设计中的逆向工程:讲解成熟设计的魅力

能看出来哪个产品被整体所排斥吗?

设计中的逆向工程:讲解成熟设计的魅力

相同的透视感、纵深感,柔和的明暗交界,使不同的产品之前有了联系,整体协调。

设计中的逆向工程:讲解成熟设计的魅力

 

总结:

设计师的思路是:通过严格、精细的排版和经过细腻处理的产品图片 来展现该品牌的专业和不可代替。

再来看看棒子国的服装网站设计……

设计中的逆向工程:讲解成熟设计的魅力

采用倍数单元格框架布局

设计中的逆向工程:讲解成熟设计的魅力

如此布局的好处有:

1. 通过CSS样式实现网页在不同宽度的显示器上能够灵活变换, 达到自适应宽度。

2. 大小、颜色对比,适应横竖不同产品的展示,渲染活泼的气氛。

3. 主次分明重要的部分放置在黄金分割线的位置上,如:

设计中的逆向工程:讲解成熟设计的魅力

设计中的逆向工程:讲解成熟设计的魅力

使用白色和灰色模块分隔出其他彩色模块使整个页面足够透气 另外色彩之间也相互联系,使页面统一。

设计中的逆向工程:讲解成熟设计的魅力

内页将色彩应用到了极致!在大的、占据主导地位的蓝色背景上 小面积的红、绿、黄色块相互对比、相互联系,形成了缤纷活泼 的气氛……

设计中的逆向工程:讲解成熟设计的魅力

如果把中间的红色换成黄色,是不是感觉断链子了呢?

设计中的逆向工程:讲解成熟设计的魅力

2、逆向工程之点、线、面

相对,相对而言,没有1+1=3那么的绝对。

设计中的逆向工程:讲解成熟设计的魅力

左图A:层层环形环绕着中心点,赋予画面浓浓的感情。色彩符合可以的卡通形象……

右图B:字体、构图都含有近似弧形的元素,使之画面更加整体、更加和谐。进而符合“美梦”的意境……

设计中的逆向工程:讲解成熟设计的魅力

左图A:众多的点,采取集中的方式排版,产生一种紧张热闹的气氛。有规律的围绕着主题,是主次分明。

右图B:去掉点整体显得冷清、不饱满……

设计中的逆向工程:讲解成熟设计的魅力

左图A:将众多的点聚集在一起,打造局促、紧密的设计版面。

右图B:堆积起来的5字令人印象深刻……

线

设计中的逆向工程:讲解成熟设计的魅力

左图A:细线给人细腻和柔和的感觉。

右图B:短线使人紧张、局促,也有细腻的感觉。

设计中的逆向工程:讲解成熟设计的魅力

左图A:引导视觉的粗线构建出空间感。

右图B:线与点结合突出点的存在。

设计中的逆向工程:讲解成熟设计的魅力

左图A:多种元素构成严谨的面,给人一种亲和力,拉近画面和浏览者的之间的距离。

右图B:由手绘风格构成的自由形态的面,给人随性洒脱的感觉。



属性标签:

欢迎留言

页面生成消耗的时间 0.449 秒,此页面一共查询了 113 次数据库!缓存时间:2020-11-24 04:00:33你的IP为:18.234.255.5