焦点图样式规则.docx

首页图片样式规范V1.0一 焦点图Okbuy首页焦点图部分为一块990*350px的纯图片区域。在遵循了构图色彩平衡的基本规范的情况下，可以按照运营需求有多种展现组合方式。1 布局规则目前我们新版上线后，首页会同目前线上内容保持基本一致，采用的是三幅构图样式。左侧为4张焦点图轮播，焦点图尺寸为730*350px；右上尺寸为260*150px，右下尺寸为260*200px。焦点图区域的多种布局样式：（系统开发中） A. 全幅构图B. 三幅构图C. 四幅构图D. 五幅构图2 色彩比重A. 整个区域色彩比重要注意平衡，避免全部为重色或者全为浅色，注意整个区域的色彩平衡： B禁止全重色表现。3 常用字体推荐 （注：以下字体仅做推荐使用，不需要一定使用以下字体）A. 中文方正细圆简体微软雅黑方正粗雅宋_GBK方正兰亭特黑简体B. 英文、数字Helvetica Neue UltralightGill Sans - LightDidot BoldFranklin Gothic BookHPFutura Book BoldHPFutura MediumStymie Light BTCalibri BoldCentury Gothic Bold4 在整个焦点图区域，除了每小块图片有独立的样式以外，整个区域与需要在视觉上看起来整体协调。主要体现为：A 整体风格符合所表现的产品的特性。例如女鞋表现出时尚、商务男鞋表现出品质等。B 网站焦点图的常用样式，例如折扣/新品/促销等，需要分别保持一致，让用户有较高的识别性。C 专题活动相关图片设计主题突出。 除非特殊的样式需求，应尽量避免:A. 同等范围大小的补色的出现。B. 商品的颜色与底色颜色过于相同，导致商品不突出。C. 同样大小的平级区域内，图片内商品与其他图片效果的样式相差太多。D. 单纯的为了视觉冲击而采用品质低劣的表现手法。整个区域应该尽量表现好乐买品牌的专业与品质。5 部分图片参考：（注：以下样式仅做参考使用）二 正在促销 / 新款上架正在促销/新品上架 的商品展示区域分别都由5张商品图片，图片尺寸为150*150px，白底（#ffffff ） 。图片内容由商品图片与商品Logo组成。商品图片最大范围不超过140*140px，Logo最大范围不超过60*30px。重要提示：由于商品以及商品Logo差异较大，规范中的数值仅表示最大范围。所有图片以展示的美观；同类商品的统一为最主要基准。三 分类1 Banner分类Banner部分为一块宽度为978px的纯图片区域。在遵循了构图色彩平衡的基本规范的情况下，可以按照运营需求有多种展现组合方式。每块区域的图片样式必须保持一致，例如同为圆角图片（圆角图片的情况下，四个角的底色为# f0f0f0）或者同为直角图片。重要提示：不管何种组合方式，必须保证整块图片宽度和为978px。组合方式实例：A 两幅构图B 三幅构图（圆角图片）实例2 商品排列分类的商品排列区域由7张商品图片组成，图片尺寸为135*135px，白底（#ffffff ） 。图片内容由商品图片与商品Logo组成。商品图片最大范围不超过125*125px，Logo最大范围不超过