网店UI设计参考

文字版面：

对齐：任何东西都不能在页面上随意安放，每一个元素都应当与页面中的另一个元素有着视觉上的联系。这样，才能建立一种清新，精巧，清爽的外观。

对比：页面上的元素应避免他们太相似，例如字体、颜色、大小、线宽、形状、空间等，要让他们之间截然不同，才能引入注目，才能使读者快速的看到这个页面。

重复：让有相同属性的元素在整个作品中重复出现。可重复颜色，形状，材质，空间关系，线宽，字体，大小和图片。即增加条理性，还可加强统一性。

亲密：彼此相关的元素应靠在一起，归位一个组。如果多个元素之间存在相关性，那么它们就可以成为一个视觉单元，而不是多个单一的个体组成页面，这样有助于将信息进行归类，减少混乱，为读者提供清晰的结构。

 

1.亲密性

对元素的归类组合，将页面中所需要出现的元素按某种逻辑进行划分归类，对于同一组合内的元素在物理位置上赋予其更近的距离，而不同组合之间的物理位置显然要更远。（留白）

对于同类元素，存在很近距离的亲密性，那么它们将成为一个视觉单元，而不是孤立的元素，整个过程应该有开始-路径-结束，一个合理的过程。

（轨迹路线图）

 

2.对齐

页面上只能有一种对齐方式（左对齐或右对齐），不要混合使用。

每个元素要找对与之对齐的元素。

 

3.重复

对形状，颜色或某些数值进行重复，重复会将不同页面连接形成一个整体。

（保持一致性）

但要避免过多的重复一个元素，适当的改变它的展现形式。

 

4.对比

通过视觉上的强烈差异化来增强页面的效果，增强可读性。

 

版面构图：

1 根据版面率调整页面效果 设计师最好将版面以最大化显示

2 让杂乱的图片井然有序

   利用网格系统将版面整齐呈现，再将页面进行等分

  等分后，根据表现的主题不同将主体放大显示，

  最后，图片可以倾斜的方式，让版面更加柔和，亲切。

 

3 让琐碎的元素变得有条理

    为图片添加不同的底色色块方式来使画面整洁，既可以区分，又有统一性。 或者为图片添加形状，可以增加趣味性。

 4 按照阅读顺序引导视线移到方向

 5 让插画令人印象更深刻

6 统一各元素之间的间隔

  图片和图片，文字和文字之间的间隔都应该相同，看起来才整齐。

 

图片构成：

将主要的内容空间放大，将不重要的内容空间缩小

1.用距离传达出图片的心情

  根据图片拍摄的主体，比如人，如果是特写，图片占比例可以大些，如果是远景拍摄，可以顺其自然的缩小空间，这样能更好的展示空间和现场状况，衬托主体的亲切，唤起主观的情感意识。

2. 通过留白突出版面设计感

   当主体放大，相对于不重要的空间，可以适当留白，不用填充满，但图片和主体应该适当的用图形进行版面排版，避免版面的散乱。

   常见：三角形（透视） 网格（整齐，稳重）

3.采用抠图去掉背景，突出主体

去掉拍摄的背景，利用纯白或其他背景，可以突出主体的效果。

4.多图展现

如果一个页面要表现丰富感和不同类别的分类信息，可以将素材放进相同形状的图形元素中。

5.增加画面活跃感

  可以将画面中的线条变为虚线。特别是婴幼儿产品。

6.页面有节奏，错落有致

  大小，缩放比例，排列错开，但是高度/宽度要有一方一致，错落有致的进行放置，在理论中寻求变化。

7.传达连续性的画面

 添加线条或者底图方式，将有连续的图片关联起来。

8.自然的引导读者视线

 比如利用人的视线，来引导整个页面的视觉顺序。

9.将图片放到足够大

 为表现某种产品质感时，可以将图片放大到最大，给人一种安心感。

10.使用图片解释方式

 比如对大小，或者产品的性能（弹性）等可用适当的动作来诠释。

11.用辅助元素增加图片表现力

  动感，科技特效展现。

12. 图片与文字恰当配合，文案的作用

    主要是阐述产品特性的主题。