认识达内从这里开始

电商详情页设计是大多数ui设计师在日常工作中都会遇到的一个设计需求，而本文我们就通过案例分析来简单了解一下，电商详情页设计方法都有哪些。

从实现难度来看，没有很复杂的设计手法让你望而却步，整体来看实现起来都不算难，明白原理之后，只需多加练习就可以。

那么该有同学问了：

为什么我看完之后还是不会?

所以说，简单的场景一样可以做出很有层次感的焦海报，场景的复杂与否和终的视觉效果没有直接关系。通过设计手法表现出场景元素间的明暗变化在详情页设计中用到的非常多。

简而言之就是：营造明暗变化。

什么是光就不解释了，生活中随处可见：灯光、日光、月光……并且物理老师也告诉我们：同种均匀介质中，光是沿直线传播的!

无论是在设计，还是现实生活中，我们通常会把光与影放在一起说，即光影，两者密不可分，有光就要有影，有明就要有暗。

只是体现光影、明暗关系，就足以让设计作品变得丰富、有层次感，比如现实生活中的汽车：

在详情页设计中，光影并不是越复杂越好，反而越实用的越简单。

注意：在详情页设计中，一般情况下不会用到直观的光源，大多都是拟定光源位置，一但光源位置确定，画面中的所有元素(包括背景)都要遵循：靠近光源的位置亮，远离光源的位置暗。

那么如果光源位置确定，应该在背景上如何体现?

其实做起来很简单，就是通过渐变叠加实现的，相比纯色底，这种渐变的背景是不是更实用?

在详情页设计中，一些有模特的场景图，大部分都使用渐变的背景，下面看两个案例：

渐变的背景增加了整体的层次感，模拟了一个设计上的环境感，而且模特的形象因此也更加立体，作品整体也不显单调。

产品特写或者局部放大时，渐变背景用到的也很多!

一、产品即是场景

详情页设计，核心还是产品，很多时候产品素材本身通过修图，明暗变化就很强，这时就可以完全依靠产品素材，做好背景处理及文字排版就可以了。

看似很简单，实则很考验设计功底，渐变的背景用的恰到好处，模拟了一种有光源的视觉变化，从而提升了画面整体的视觉层次感。简洁大气的作品也更易于大众接受。

二、搭建小场景

搭建小场景在详情页设计中也是非常实用的，为什么要说小场景呢?小不是代表体积小，而是场景要简约，无需特别复杂，简约并不意味着简单，重点是要有层次感、把控好整体的明暗变化和光影。

看似简单的场景，对设计功底的考验一点也不少，小场景设计中，如何体现光影是非常重要的。

说完基础的小场景，我们继续往下延伸。很多产品的详情页设计都用到了更真实的使用或者摆放场景，目的是让用户更加直观的了解产品，视觉上更有代入感。

在偏真实的小场景设计中，对于光的表现还可以再丰富，比如现实生活中的窗户格、植物、阳光等等，都是对光的一种加强体现，在详情页中都非常实用，它能起到加强光感、赋予整体环境感的作用，并且对提升作品层次感有很大帮助。下面我们看下在设计中的使用。

不管是哪种表现形式，其目的都是在营造一种光影的环境感，提升作品整体视觉变化强度，避免单调!也让产品更贴合现实，易于解读和表达。

光赋予了作品环境感，视觉上的明暗的变化使得作品给人的感觉丰富有层次。对于详情页中的小场景搭建，前后遮挡用到的很多，根据实际情况选择合适的遮挡物即可。

在详情页设计中，对于光的表现形式远不至于文中所说到的，这里只是为大家提供一些实用的设计思路。不妨找一些不错的详情设计，对应着本文内容，自己再验证、总结一下，这样印象会更深刻。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。