淘宝网设计规范&设计禁忌of421视觉设计规范of422淘宝北京UED岱岩视觉设计规范1.淘宝字体：中文：英文：of423淘宝北京UED
岱岩视觉设计规范2.淘宝网Logo使用规范：淘宝网主品牌Logo：of424淘宝北京UED岱岩视觉设计规范2.淘宝网Logo使
用规范：淘宝网频道Logo：主体+频道/类目/产品名淘宝字体+橙色+域名机票of425淘宝北京UED岱岩视觉设计规范2.淘宝网L
ogo使用规范：其他特殊业务：图形化/字体+个性化颜色+域名of426淘宝北京UED岱岩视觉设计规范3.栅格规范：什么是栅格系统
：of427淘宝北京UED岱岩视觉设计规范3.栅格规范：栅格系统的应用：12x80的应用24x40的应用16x60的
应用of428淘宝北京UED岱岩视觉设计规范3.栅格规范：淘宝网栅格系统：（40n）-10=W（50n）-10=Wof429
淘宝北京UED岱岩视觉设计规范3.栅格规范：建议使用的栅格结构：950宽度990宽度1907501907902407402307
10270670240540190270470190990950of4210淘宝北京UED岱岩视觉设计规范4.30%原则：5%
吊顶+10%头部+10%导航+5%底部导航+搜索of4211淘宝北京UED岱岩视觉设计规范4.30%原则：5%吊顶of4212
淘宝北京UED岱岩视觉设计规范4.30%原则：20%头部+导航of4213淘宝北京UED岱岩视觉设计规范4.30%原则：5
%底部of4214淘宝北京UED岱岩视觉设计规范5.Banner设计规范：文案标准字体使用体验一致色彩协调图片限制of4215
淘宝北京UED岱岩视觉设计规范5.Banner设计规范：文案标准简洁，阅读顺畅；少用英文，确保拼写正确；中文不可出现错别字；o
f4216淘宝北京UED岱岩视觉设计规范5.Banner设计规范：字体使用最多不超过3种字体；只能使用授权字体-方正字体；文字
清晰可读；of4217淘宝北京UED岱岩视觉设计规范5.Banner设计规范：体验一致设计形式与点击预期保持一致；of4218
淘宝北京UED岱岩视觉设计规范5.Banner设计规范：色彩协调明亮，干净，与整体页面协调；of4219淘宝北京UED岱岩视
觉设计规范5.Banner设计规范：图片限制选择切合主题的图片；不可使用有版权纠纷的图片和违禁图片（色情，反动等...）of42
20淘宝北京UED岱岩视觉设计规范6.常用控件介绍：表单分页面包屑斑马线步骤条加载中级联列表色彩图片文字留白BarTab弹出层
输入反馈of4221淘宝北京UED岱岩视觉设计规范6.常用控件介绍：色彩交易线主色交易线辅色商户平台主色商户平台辅色of422
2淘宝北京UED岱岩视觉设计规范6.常用控件介绍：图片商品图片使用基本原则：图片比例为1:1；广告位：参考栅格规则；of422
3淘宝北京UED岱岩视觉设计规范6.常用控件介绍：文字链接文字：文字大小：文本文字：深灰为基本文字颜色，当文字内容有主次等级时
，应用辅助颜色;of4224淘宝北京UED岱岩视觉设计规范6.常用控件介绍：留白1.板块间距留白为10px；2.板块与内容间距
留白为10px；3.内容单元与单元之间留白为10px；4.内容的间距为10px；注：以上原则从1到4优先等级从高到低，原则1、2必
须遵守，原则3、4可根据实际情况调整；of4225淘宝北京UED岱岩视觉设计规范6.常用控件介绍：Bar样式举例：of4226
淘宝北京UED岱岩视觉设计规范6.常用控件介绍：Tab样式举例：of4227淘宝北京UED岱岩视觉设计规范6.常用控件介绍
：弹出层样式举例：of4228淘宝北京UED岱岩视觉设计规范6.常用控件介绍：输入反馈of4229淘宝北京UED岱岩视觉设计
规范6.常用控件介绍：表单控件of4230淘宝北京UED岱岩视觉设计规范6.常用控件介绍：分页控件通用样式：适用场景：淘宝产
品的列表和搜索结果页面。小分页：适用场景：空间小、结构较紧密的列表页面。of4231淘宝北京UED岱岩视觉设计规范6.常用控件
介绍：面包屑样式举例：of4232淘宝北京UED岱岩视觉设计规范6.常用控件介绍：斑马线样式举例：of4233淘宝北京UED
岱岩视觉设计规范6.常用控件介绍：步骤条of4234淘宝北京UED岱岩视觉设计规范6.常用控件介绍：加载中适用场景：加载页面
、上传图片、文件时出现，从无内容到有内容的场景。样式举例：of4235淘宝北京UED岱岩视觉设计规范6.常用控件介绍：级联列表
of4236淘宝北京UED岱岩设计禁忌交互设计3大禁忌；推广设计基本禁忌6条；of4237淘宝北京UED岱岩设计禁忌—交互设计
3大禁忌1.页面信息拼写或内容错误：案例A：页面信息拼写错误：案例B：页面内容错误：of4238淘宝北京UED岱岩设计禁忌—交
互设计3大禁忌2.操作产生无效或错误反馈：案例A：由设计缺陷造成的链接无效或悬停无反应:由于整个交互操作范围超出了一屏，因此会让
用户感觉链接无效等错误发生：of4239淘宝北京UED岱岩设计禁忌—交互设计3大禁忌3.操作完成后与预期不符：案例A：如左右滚
动按钮操作后结果是上下滚动：of4240淘宝北京UED岱岩设计禁忌—推广设计基本禁忌推广设计基本禁忌1.合法。2.显示正常。3.
反馈明显且有效。4.贴合主题。5.控制体积和大小。6.拼写正确。of4241淘宝北京UED岱岩谢谢Thanksof4242淘宝北
京UED岱岩国有国法，家有家规；如果一个网站没有了设计规则，那么整个网站有可能会被设计的五花八门，千奇百怪，特别是大型的商业网站
更需要设计规范进行指导；中文字体是经过设计师手绘出来的；英文字体已经有了字体安装包；栅格系统英文为“gridsystems”，也
有人翻译为“网格系统”，是一种平面设计的方法与风格。如今，栅格系统也已经被运用到网页中。它以规则的网格阵列来指导和规范网页中的版面
布局以及信息分布。雅虎采用的栅格是40px；网易是60px；淘宝的栅格系统源于雅虎；淘宝的栅格系统是以40px的栅格为基础的；为了
顺应显示器宽度的发展，原有的950宽度和公式，逐渐将被990宽度取代；990宽度的栅格为50px；根据栅格和列数，我们可以得到一系
列的宽度数据；根据淘宝的栅格系统，我们可以制定出常用的页面布局结构；两栏式和三栏式可反转使用；至少有一列符合栅格宽度；之前的是20
%原则，新加入了导航和搜索区；全网吊顶承载着整个淘宝网对消费者公共核心部分，各业务线不得对内容形式进行更改；已有现成的公共文件，使
用时include调用即可；全站有活动时，可在吊顶区域增加通栏；各业务线应用时，不得对内容形式进行修改；淘宝业务线众多，各业务线根
据自己的特色制定了不同的Banner设计规范，但万变不离其宗：注意微软雅黑字体的使用；方正字体是淘宝唯一购买使用的授权字体；淘宝业
务线众多，各业务线根据自己的特色制定了不同的Banner设计规范，但万变不离其宗：前台交易以淘宝橙色为主；后台以蓝色为主；栅格规范
对广告位的应用；目前各自产品线根据自己的产品特性，自定义链接和文本文字的颜色；留白体现了一个页面的透气性，让用户在阅读的时候产生节
奏感；标题、title；在同一页面中，尽量使用统一样式的控件，降低用户的使用成本；通常在需要用户进行二次确认操作时使用；大斑马线和
小斑马线之分；40px，20px；淘宝搜索结果页也是斑马线的应用；菊花转~1.拼写错误；2.内容与标题不能对应；1.合法。没有版权
的字体、图片一律不能使用。2.显示正常。主流操作系统及浏览器下①，页面不得超过3处破裂或错开.①主流操作系统及浏览器是指：IE6
，IE7，IE8，及Windows系统下的Firefox/Chrome/Safari/Opera最新稳定版本。3.反馈明显且有效
。超文本链接,flash的互动，反馈明显；链接结果正确。4.贴合主题。商品为主的活动以商品为主;首屏的图片(FLASH)高度必须
少于500像素②,首屏必须②500像素是指在1024768分辨率下。能看到一部份商品.5.控制体积和大小。整体flash控制在500k以内，超过50k要加loading，页面的总体大小不得超过2M。6.拼写正确。标题和内容必须使用简体中文，英文、拼音、繁体只能做辅助装饰③,且保持拼写正确,不得用于导航和超文本链接;中文不得出现错别字。③除去诸如英文品牌或者其他固有名称。? |
|
