展示类网站设计流程具体实操

来源：互联网 2024-10-25 16:03:14

符合网站主题、风格、调性、整体色调的素材，可以营造大气场气氛的摄影作品，或者适合做场景合成的高品质图片。

【例：设计汽车类展示网站主页】

设计要求：设计出一个车开在户外的场景，通过场景表现出该品牌汽车外观很酷、性能也很好，可以用于远途旅行，又能体现该品牌汽车高端的格调。

设计思路：用汽车的实物图结合一个公路背景的图，合成出一个大气场的汽车开在山区公路上的场景。背景素材要能和汽车风格相匹配，背景素材要有一定要有震撼力、视觉张力，整体色调低饱和度，调性为高端产品。主要突出汽车的主体，前后景处理要有虚实。

搜索素材：白天和夜晚的户外天空，城市和郊外的场景大图，找了几张霸气的素材，几张图都是高清高品质大图。

根据设计要求，挑出最符合场景合成的素材，从角度来说，背景角度要和和汽车的角度一致，比较符合要求的是图2和图3。网站主要突出的是汽车，而且要表现在山区开车，车的性能很棒，所以图3就更加贴合主题。

结合汽车的实物图片看，两张素材的色调都是偏冷色、低饱和度，而且两张图片的角度也非常贴合，拼到一起就特别合适，主题又很符合设计要求。

经过汽车和背景素材图片合成，我们便得到了一张汽车行驶在山区公路的图片。经过适当的调色、融合处理，设计出符合要求的汽车展示网站背景大图，这个场景既能体现出汽车霸气的外观又能表现汽车很棒的驾驶性能。

这样充满视觉张力的大图，加上一些简洁的导航和品牌说明文案，一个汽车展示类网站首页就很容易设计出来了。

B.精致的产品展示图

产品图尺寸尽量大一些，一定要足够精致，能够展现产品的各个细节。最好是纯色背景的大图，这样方便抠图使用，视觉角度奇特的产品照片会更具特色。

左图是戒指的高清原图素材，可以展现出产品的很多细节，而且背景是纯色的，这样的素材就很方便抠图使用。图片很清晰细节很多可以通过photoshop处理成右图的精致产品图，用在展示网站中也是非常出彩，完美的展现产品精美的外观和精致的细节，使受众群瞬间被产品吸引住视线。

产品图片的角度和造型摆放也很重要，选择奇特的角度更能吸引用户的视觉注意力，也能使产品展示更具视觉张力。试想音响的实物图片如果是平视角度，小音箱造型摆放是整齐的排成一列，视觉感受就会显得非常平庸。

产品素材图的多样性，产品图不光会用在首页大背景上，展示类网站会有很多图片展示区域、拼贴图片展示页，来展现产品。所以在选择产品图片的时候也要注意产品图的多样性，需要选择出不同角度的、不同构图的、不同背景的、不同摆放形态的图片。用在图片展示区域处可以根据视觉美观选择多样性的图片进行搭配排版。不同的产品图片相互的搭配碰撞，相信一定能够创造出更具设计感的视觉效果。

C.找一些可参考的网站

分析参考页面的构图方式、整体风格、色彩把控、细节处理。学习和借鉴好的设计方法、可以借鉴页面的色彩搭配、排版方式等。

整体页面的大风格、排版、色彩可以多做尝试，找出一种最符合主题的，表现力最强的来进行设计。

【例：耳机网站】找了一些同类型网站设计进行参考。

左图为找的参考网站，右图为分析网站构图和色调。

构图：两条对角线对画面进行分割的构图方式。

整体空间感：主体放在中间，突出主体，光感在中间位置，背景进行压暗处理，有主体、前景、背景、远景，层次感多，场景空间感强。

细节：前景动感的石头碎块，制造出放射状飞散的效果，使页面富有动感极具视觉张力。

左图为找的参考网站，右图为分析网站构图和色调。

构图：一侧放主体人物，一侧放文案的构图方式。

整体空间感：页面扁平化处理，没有过多的层次，主要突出产品，重点强化产品的使用，弱化其他元素。

色彩：色彩柔和，偏女性化。