Alibaba Cloud Design - 官网设计体系

{"menus":[{"title":"关于网站设计体系","detail":{"title":"Alibaba Cloud","subtitle":"Portal Design System","detail":[{"text":"阿里云官网作为用户了解阿里云的首站门户以及核心的流量分发、转化区域，在体验建设层面，我们也秉承高质、高效、标准化的体验建设思路。"}],"headerImg":"https://img.alicdn.com/imgextra/i1/O1CN018sFLhX1MtNdVyqX0e_!!6000000001492-2-tps-1920-1008.png","content":[{"miniTitle":"诞生于Aliyun.com的设计体系","infoList":[{"list":[{"text":"通过对用户需求的深度挖掘及用户分层链路分析及视觉品牌创意建设打造高质量的用户感知及行为动线；通过对网站规范、组件化的建设形成高效的设计支撑；通过对体验维度的细分及科学性的健康度评估治理打造标准化的体验管理。"}]}]},{"miniTitle":"关于规范","infoList":[{"miniTitle":"中国站设计规范","list":[{"text":"中国站设计规范是我们多年来基于中国站设计的实践而诞生的规范，其中包含了：视觉与布局、基础组件、场景与模式和设计协作。"}]},{"miniTitle":"营销设计规范","list":[{"text":"多年来，我们在不断尝试属于与计算行业的营销语言，不同于真实世界热闹的氛围，我们的营销是有很强秩序并且贯穿着云产品的透出。在这里，我们会详细的总结阿里云的营销设计体系。"}]}]},{"miniTitle":"最佳实践","infoList":[{"miniTitle":"阿里云首页改版","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01aZe86h1IsgZUbVeEs_!!6000000000949-0-tps-1920-422.jpg","url":"https://mp.weixin.qq.com/s/bntPjROWz8XqUvDBL6h-kA"}]}]},{"miniTitle":"阿里云双十一","list":[{"imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01sPOlSI1o9rVyov1IO_!!6000000005183-0-tps-1922-422.jpg","url":"https://mp.weixin.qq.com/s/gNBls0y3aCtGGllWKQLtkQ"}]}]}]}]}},{"title":"了解规范","key":"about-aliyun.com","detail":{"title":"About Alibaba Cloud","subtitle":"Website","content":[{"miniTitle":"代表性设计","infoList":[{"miniTitle":"阿里云首页改版","list":[{"text":"作为设计语言应用的最佳实践，阿里云首页改版灵活的应用了「虚实-望其虚握其事」、「秩序-秩序是生命之匙」、「几何-充满想象的几何」、「运动-运动体现智能」四大设计观点的关键词，体现了阿里云技术的领先性和设计的独特点，并成为首页改版视觉升级的核心观点，给以风格的指引和设计的推导。","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01NBcJlC1dKQsU2ozIo_!!6000000003717-0-tps-1920-422.jpg"}]}]},{"miniTitle":"阿里云营销体系","list":[{"text":"如何体现阿里云数智世界的营销氛围？阿里云营销体系在进化设计语言核心设计观点「秩序」「虚实」「几何」「运动」的基础上，大量使用了云产品形象和进化质感，从而从风格层到元素层，由内而外的营造出阿里云独特的营销语言。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01n0v0vC1pt2BerdQ7t_!!6000000005417-0-tps-1922-422.jpg"}],"imgLineSize":"1"}]}]},{"miniTitle":"更多应用","infoList":[{"list":[]}]}],"detail":[{"text":"阿里云设计语言，是基于阿里云计算领域创建的全新语言体系。"},{"text":"语言作为一项沟通的基础要素，特别是在云计算世界中，我们致力于将虚拟的云概念产品形象化体系化语言化。作为连接真实世界和虚拟世界桥梁作用的阿里云设计语言，是以智者品牌为原型，符合阿里云的数字世界特征-领先的技术、广阔的知识、 惠普的能力和社会责任感。从宏观到微观，从识别体系到分子拆解，从产品形象到材料质感，所有的元素都源自“虚实”“几何”“秩序”“运动”的4个设计观点，来帮助虚拟的云上世界产品概念更具统一识别力。"},{"text":" 我们的目标服务群体，是需要一致性体验的用户和提升开发效能的开发者群体。作为中国首个提出的云计算设计语言，品牌领先的同时，也拉近了大数据和用户的距离。"}]},"children":[{"title":"中国站设计规范","detail":{"title":"中国站设计规范","subtitle":"","content":[{"miniTitle":"设计师使用指南","infoList":[{"miniTitle":"1.选择合适的页面框架","list":[{"text":"查阅规范中导航2.0这一章来为你的页面找到合适的框架。"}]},{"miniTitle":"2.使用官方组件库"}]},{"miniTitle":"相关规范","infoList":[{"miniTitle":"视觉规范：","list":[{"text":"《阿里云官网视觉规范》（更新于2021-5-6）"}]}]}]}},{"title":"使用Kitchen同步最新组件","detail":{"title":"使用Kitchen同步最新组件","subtitle":"","detail":[{"text":"阿里云设计中心使用Kitchen来管理官网设计规范组件，你可以按照以下方式安装Kitchen内网版工具，使用到最新的官网控件及模块组件，快速搭建符合你需求的规范页面。"}],"content":[{"miniTitle":"1、下载安装Kitchen插件","infoList":[{"miniTitle":"1-1 下载","list":[{"text":"访问Kitchen官网https://kitchen.antfin-inc.com/，下载Kitchen3插件。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0116kDNd1EbVFe24zNN_!!6000000000370-2-tps-2752-1418.png"}]}]},{"miniTitle":"1-2 安装","list":[{"text":"下载解压后，双击所下载的“.sketchplugin”文件完成安装，安装后可在Sketch导航的“插件”中找到","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01i289Mp1ia4U9lc8QM_!!6000000004428-2-tps-1898-876.png"}]}]}]},{"miniTitle":"2、从Kitchen VIP中导入Library","infoList":[{"list":[{"text":"安装成功后，打开工具栏，加载“阿里云设计系统”","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01VouCkU1jz5jqaMAui_!!6000000004618-2-tps-2306-1160.png"}],"imgLineSize":"1"}]}]},{"miniTitle":"3、使用Library","infoList":[{"list":[{"text":"添加成功后，可在工具栏中看到不同的组件、图标、区块、插画库，直接拖拽至画板使用","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01dP15ud1t7BH5ZSitY_!!6000000005854-2-tps-949-1494.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01coxnEg294vApwoMc4_!!6000000008015-2-tps-949-1494.png"}],"imgLineSize":"2"}]}]}]}}]},{"title":"视觉与布局","children":[{"title":"导航2.0","detail":{"title":"导航2.0","subtitle":"","content":[{"miniTitle":"整体介绍","infoList":[{"list":[{"text":"基于2020首页改版，导航样式也有所更新。阿里云导航为全局公共模块，请避免出现如下情况："},{"text":"• 不使用导航。"},{"text":"• 擅自对导航进行内容增删或样式变更。"},{"text":"阿里云母版分为以下五种："},{"text":"• 首页大导航"},{"text":"• 活动页小导航"},{"text":"• 子站点导航"},{"text":"• buy导航"},{"text":"母版选择的判断标准如下：示意为交互稿，具体标准参考视觉稿"}]}]},{"miniTitle":"首页大导航","infoList":[{"list":[{"text":"适用：官网、产品、解决方案、公告、合作伙伴与生态、域名、帮助文档、支持与服务"}]},{"list":[{"text":"包含最完整的导航项，其中包括公共区域的搜索、站点切换、侧边服务域、控制台、文档、备案入口，同时包含全站站点入口导航，状态包括登录前、登录后状态。"}]},{"miniTitle":"登陆前","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01yd63aQ1HEYFbMdbe6_!!6000000000726-2-tps-3000-248.png","title":""}]}]},{"miniTitle":"登陆后","list":[{"text":"根据用户服务域的消息状态，头像也会有不同的状态展示。消息状态内容为（等待服务域确认）：账号消息、权益消息、产品控制台产品告警、服务工单提示","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01xGeGyL1aRM1NsUeI3_!!6000000003326-2-tps-2146-238.png"}]}]},{"miniTitle":"下拉展开","list":[{"listChildren":[{"title":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01cCcBDS1QWG6XK05AQ_!!6000000001983-2-tps-2113-764.png","detail":"站点切换下拉"}]},{"title":"用户服务域展开","detail":"参考服务域交互"},{"title":"导航搜索下拉","detail":"","imgLineSize":"1","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1598600100613-ec8a095f-16b0-4975-bbfd-c422828d7141.png","detail":"Hover状态"}]},{"detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1598600142854-f121cd3f-3e76-4df0-81f4-fe32286b0867.png","detail":"输入状态"}]},{"title":"导航栏下拉","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01JtIE141CYB8xqiAgj_!!6000000000092-2-tps-1927-1005.png"}]}]}]},{"miniTitle":"使用情况","list":[{"text":"带默认热搜词展示：仅在官网首页适用；不带默认热搜词展示：除首页、活动页面、buy流程页面及特殊子站点页面之外，其他所有全站频道页均使用此类型导航（含产品详情页、解决方案等）。"}]}]},{"miniTitle":"活动页小导航","infoList":[{"list":[{"text":"适用：只在promotion域名下的活动页面使用，包含基础的站点切换、搜索、个人信息、购物车、文档、备案、控制台、登录入口。"},{"text":""}]},{"miniTitle":"默认导航","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01BE7mYc1pKgUQCnc1P_!!6000000005342-2-tps-2014-117.png"}]}]},{"miniTitle":"带子导航样式","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01JtIE141CYB8xqiAgj_!!6000000000092-2-tps-1927-1005.png"}]}]}]},{"miniTitle":"特殊子站点导航","infoList":[{"list":[{"text":"适用：企业应用中心、云市场、支持与服务、聆听、阿里云开放平台、云栖号（待定）、云大使、开发者社区、MVP、天池、阿里云大学、阿里云创新中心、备案、合作伙伴赋能平台、云栖社区"},{"text":"只在特殊子站点有特殊定制导航需求时使用，必须经过规范小组讨论评审后才可以新增定制设计，严禁各频道、子站点自行特殊设计。"},{"text":"搜索：主搜索可选择是否配置；若在主搜索有特殊样式需求，必须按照规范进行设计，经过规范小组评审后才可上线"},{"text":"旧版规范点此了解 https://yuque.antfin-inc.com/acd/acd_design/subnav"}]},{"miniTitle":"导航固定配置：","list":[{"listChildren":[{"title":"基本导航","detail":"固定内容：子站点名称（除天池可放logo外其他均为文字）、侧边服务域、控制台、文档、备案入口，状态包括登录前、登录后状态 可配置项：主搜索、站点切换","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01YHIMv31b7USR9WZoF_!!6000000003418-2-tps-1870-151.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01ibANVs25jRkzmKfR8_!!6000000007562-2-tps-1879-221.png"}],"imgLineSize":"1","number":"01"},{"title":"带标签导航","detail":"固定内容：详见基本导航、类目切换&标注（英文全大写字段）、下拉二级菜单面板（一列展示和有二级分类展示） 可配置项：可自定义区","number":"02","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600312762821-2783fa1b-ea9d-48ce-9821-ab805ac3b00e.png","title":"类目切换&标注"},{"title":"下拉二级菜单面板","detail":"一列展示（开发者社区、阿里云大学、云栖社区）","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01ibANVs25jRkzmKfR8_!!6000000007562-2-tps-1879-221.png"},{"detail":"有二级分类展示（企业应用中心、开发者社区、合作伙伴赋能平台）","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01TWtA2S1dlSFaJwWXT_!!6000000003776-2-tps-2341-640.png","title":"下拉二级菜单面板"},{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600312973660-ea6b5b4d-876b-4c2c-80dd-cd8b4e97046c.png","title":"可自定义区","detail":"广告位，高度限定，宽度自由，可与其他自定义功能并用。"},{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600393447031-84b387ea-6455-44b6-883c-f9f0f3ca1dfe.png","title":"子站点搜索、按钮类功能、文字链接、下拉面板","detail":"同一导航下只能有一种搜索：主搜或子站点搜索且子导航建议不使用icon。"}],"imgLineSize":"1"}]}]},{"miniTitle":"具体场景：","list":[{"listChildren":[{"title":"企业应用中心（导航下拉，动效广告位）","detail":"固定内容：带标签导航、搜索。可配置项：自定义区（发布需求按钮、动效广告位）","imgLineSize":"1","number":"01","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600310715156-37113ee7-e34a-435f-ac1a-40f6ed95f4c8.png"}]},{"title":"","detail":"","imgLineSize":"1","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600321974461-96e8af73-389b-4799-b712-a699a434acce.png","detail":"导航和页面模块区分，【产品分类】hover内容做展开面板处理，原产品分类红框内容下移至页面，为页面模块内容","title":"新版"}]},{"title":"","detail":"","imgLineSize":"1","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01sCBwaO1yMMTySBA9r_!!6000000006564-2-tps-2542-1026.png","detail":"","title":"旧版"}]},{"title":"云市场（搜索定制）","detail":"固定内容：带标签导航、云市场专用搜索（建议在主搜位置，但专有云市场搜索池，不与主搜重复）、购物车 可配置项：自定义区（发布需求按钮、买家中心、卖家中心下拉菜单）","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600310701812-caddfa65-7fd3-41c9-9315-ea63ea111b62.png"}],"number":"02"},{"title":"","detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600321437539-5146d1a8-2018-4496-b07a-f5d41ee4e5a5.png","detail":"导航和页面模块区分，【云市场分类】原本就无hover内容。原云市场分类红框内容下移至页面，为页面模块内容","title":"新版"}]},{"title":"","detail":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01l8QJp11g4Lp9X6MKC_!!6000000004088-2-tps-2468-1224.png","detail":"","title":"旧版"}]},{"title":"天池（独立账号体系，禁用topbar右侧账号，支持站点切换，显示LOGO）","detail":"固定内容：带标签导航、禁用服务域、显示logo","number":"03","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01YDy6BP1Q0CNebMK52_!!6000000001913-2-tps-2173-253.png"}]},{"title":"","detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600397954660-c6c3e8c4-79ac-414f-a109-e52126b3ff7a.png","detail":"可配置项：自定义区（消息管理链接）、登录注册在子导航（状态分为登录前和登录后）","title":"新版"}]},{"title":"","detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600311641767-314365bc-170b-4f7a-86f9-2b6b4c88d27b.png","title":"旧版"}]},{"title":"阿里云大学（定制搜索框、下拉选择）","detail":"固定内容：带标签导航、禁用搜索、购物车。可配置项：自定义区（定制搜索框、下拉菜单）","number":"04","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600320602413-0c468095-f1d6-4b6b-b647-25a00aa25edf.png","title":"新版"}]},{"detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600311837362-e615083d-a1af-4784-9c86-c0395b71d2d8.png","title":"旧版","detail":"有两个搜索"}]},{"title":"创新中心（下拉选择）","detail":"固定内容：带标签导航、搜索、购物车；可配置项：自定义区（下拉菜单）。","number":"05","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600312127242-983dcf19-5bd6-41d6-a017-64851f1fe3e3.png","title":"新版"}]},{"detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600311859714-8e328f22-453c-408c-bb25-1fbdf074650d.png","title":"旧版"}]},{"title":"开发者社区（下拉选择、自定义功能）","detail":"固定内容：带标签导航、购物车；可配置项：自定义区（下拉菜单）","number":"06","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600313433850-694a74e9-dbfe-4c1e-93df-3d0750bae70d.png","title":"新版"}]},{"detail":"","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1600312283532-fe6dc8cd-341c-4970-9c81-fad8fd0a27fd.png","title":"旧版"}]}]}]}]},{"miniTitle":"buy导航","infoList":[{"list":[{"text":"适用：只用于各种产品在通用购买链路中的导航使用，如选配页面、订单确认页面、支付页面、下单成功页面、购物车、成本计算器、产品价格等"},{"text":"包含基础的站点切换、个人信息、购物车、文档、备案、控制台、，同时包含全站站点入口导航，状态包括登录前、登录后状态。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2020/png/226859/1598601612827-c1d06b19-4e34-4d5a-b0cf-8e641063e03e.png"}]}]}]}],"detail":[]}},{"title":"响应式设计规范","detail":{"title":"阿里云国内站官网响应式方案","subtitle":"","content":[{"infoList":[{"list":[{"text":"• 1680px以上：有效区宽度1440px（即内容宽度为1440px)，显示PC头尾，头尾单位PX"},{"text":"• 1440px~1680px： 有效区宽度1280px（即内容宽度为1280px），显示PC头尾"},{"text":"• 1280px~1440px： 有效区宽度为1200px（即内容宽度为1200px），显示PC头尾"},{"text":"• 768px~1280px： 内容宽度为1200px，此时会出现滚动条，显示PC头尾"},{"text":"• 768px（包括768px）以下： 宽度为100%，显示H5头尾","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2021/png/26363/1620286125456-97ef5b23-7d3c-4483-82ea-09e619976ad2.png#alt=响应式图片.png","detail":"更新于2021-5-6"}]}]}]},{"miniTitle":"设计方法","infoList":[{"miniTitle":"使用Sketch建立栅格系统","list":[{"text":"进入Sketch，在右上角工具栏打开view-Layout Settings","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01iLOC7e22CWR8frdLn_!!6000000007084-2-tps-1385-870.png"}],"imgLineSize":"2"},{"text":"PC端栅格选择如下："},{"text":"PC端页面宽度为1440px，内容区宽度为1200px，左右安全边距10px，实际内容区为1180px，内容区栅格为24栏，栏款为30px,栏间距为20px。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN013VgXbf1GFdZdT7wHn_!!6000000000593-2-tps-1920-782.png"}]},{"text":"H5端栅格选择如下："},{"text":"移动端页面宽度为375px，内容区为355px，所有内容保证在内容区范围内，内容区栅格为24栏，栏款为10px，栏间距为5px。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01nVkrWj1DjuuVd9RPi_!!6000000000253-2-tps-1967-925.png","detail":"在H5端设计中，可根据需求调整栏间距。"}],"imgLineSize":"1"}]},{"miniTitle":"弹性布局与混合布局","list":[{"infoImgList":[{"imgUrl":"https://tpsservice-files-inner.cn-hangzhou.oss-cdn.aliyun-inc.com/images/resources/8909392df6a18466d7cfb73421460193-1094-880.png","title":"弹性布局","detail":"以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。"},{"imgUrl":"https://tpsservice-files-inner.cn-hangzhou.oss-cdn.aliyun-inc.com/images/resources/68eba4d748cc7b7e8045964b7bb2e755-1094-880.png","title":"混合布局","detail":"同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素和百分比两种单位作为页面单位。"}],"imgLineSize":"2"},{"listChildren":[{"title":"如何选择布局模式？","detail":"当你设计的页面为通栏、等分结构时，请选择弹性布局模式，并按照栅格对页面进行等分设计，避免过多特殊尺寸。当你设计的页面为非等分的多栏结构，需要采用混合布局的实现方式，页面可以用定宽和百分比混合构成。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/f71cc00a-dc9a-4cdd-bb79-7e5af59c1e9f.png#alt=f71cc00a-dc9a-4cdd-bb79-7e5af59c1e9f.png"}]}]}]},{"miniTitle":"响应式设计基本五式","list":[{"text":"在阿里云官网响应式设计中，绝大多数从PC端到移动端界面的设计变化，都可以概括为5个字：缩藏移裁改。为了方便记忆，大家可以记作：“说唱异材GAI”","infoImgList":[],"imgLineSize":"2"},{"text":"如果概括的来说明这5种变化，大概如下图所示：","listChildren":[{"number":"","detail":"• 缩：对页面中元素的尺寸/长宽/字号等属性进行缩放，但不改变元素本身的信息。"},{"number":"","detail":"• 藏：隐藏页面中的部分元素不予展示。"},{"number":"","detail":"• 移：移动页面元素，如通过改变页面元素所占栅格，将左右布局变为上下平铺布局。"},{"number":"","detail":"• 裁：裁切页面元素，通常应用在banner和图片设计中。"},{"number":"","detail":"• 改：改变页面导航/结构/组件/样式，如将卡片变为手风琴样式。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/e1bf112a-12d7-4aba-9384-910bea2265ab.png#alt=e1bf112a-12d7-4aba-9384-910bea2265ab.png"},{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/fd343569-2757-419b-bbcc-7d1595e01a71.png#alt=fd343569-2757-419b-bbcc-7d1595e01a71.png"}],"imgLineSize":"2"}]},{"listChildren":[{"title":"第一式：缩","detail":"缩：对页面中元素的尺寸/长宽/字号等属性进行缩放，但不改变元素本身的信息。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/65c69902-b54d-40a8-8378-0f8142291164.png#alt=65c69902-b54d-40a8-8378-0f8142291164.png"},{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/22e30d95-9842-4e1b-bcc8-cafeb9a59256.png#alt=22e30d95-9842-4e1b-bcc8-cafeb9a59256.png"}],"imgLineSize":"2"},{"title":"第二式：藏","detail":"藏：隐藏页面中的部分元素不予展示。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/8c5cb5d0-7253-485b-8988-02d5ac027704.png#alt=8c5cb5d0-7253-485b-8988-02d5ac027704.png","detail":"在响应式之后，隐藏了详细说明的字段。"}]},{"title":"第三式：移","detail":"移：移动页面元素，如通过改变页面元素所占栅格，将左右布局变为上下平铺布局。下列实例中，都通过简单的栅格变化，将左右结构转化为上下结构实现页面响应","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/eb6707ff-9298-49d3-973a-3227a71628ee.png#alt=eb6707ff-9298-49d3-973a-3227a71628ee.png"},{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/6832e55d-5ca2-4265-9e4d-b0d94229d979.png#alt=6832e55d-5ca2-4265-9e4d-b0d94229d979.png"},{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/09619edc-ad0d-4efe-b701-1e036c5aee20.png#alt=09619edc-ad0d-4efe-b701-1e036c5aee20.png"},{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/09619edc-ad0d-4efe-b701-1e036c5aee20.png#alt=09619edc-ad0d-4efe-b701-1e036c5aee20.png"}],"imgLineSize":"2"},{"title":"第四式：裁","detail":"裁：裁切页面元素，通常应用在banner和图片设计中。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/bc98a1db-39b7-4fe4-b1ac-61d813ba80cb.png#alt=bc98a1db-39b7-4fe4-b1ac-61d813ba80cb.png","detail":"IBM官网中，当页面尺寸发生变化时，BANNER图片被裁剪。"}]},{"title":"第五式：改","detail":"改：改变页面导航/结构/组件/样式，如将卡片变为手风琴样式。"},{"detail":"下图中，通过将PC端的左侧TAB组件，修改为手风琴组件来实现页面响应式。手机端以滑动手势为主要的浏览交互行为，对页面高度的敏感性较PC端较低，因此在卡片模块较少时，可以在手机端可以更多使用平铺的方式。而在卡片内信息比较复杂或卡片过多时，可以采用手风琴或者横向TAB切换等方式进行筛选。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/aaa3cc63-ac6a-47d5-a418-ec645e92d227.png#alt=aaa3cc63-ac6a-47d5-a418-ec645e92d227.png"}]}]}]},{"miniTitle":"响应式的复合连招设计法","list":[{"text":"和任何一个武功一样，响应式设计在具体实战中都不可能只使用一个招式，而是针对不同需求的页面和不同形式的页面内容，多种招式组合使用。"},{"text":"以下就是腾讯云和阿里云官网中，针对不同业务场景的连招使用实例：","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/1a6bc6b5-7012-4a1f-a193-217202806dee.png#alt=1a6bc6b5-7012-4a1f-a193-217202806dee.png","detail":"缩小了架构图大小，缩小了TAB组件的左右内间距,隐藏不需要的二级架构图切换，只显示主架构图。"}]},{"listChildren":[{"detail":"","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/db55e6b0-0198-46f8-9d13-4b6953520955.png#alt=db55e6b0-0198-46f8-9d13-4b6953520955.png","detail":"缩小文字区宽度，文字折行，由左右TAB更改为手风琴模式。"}]}]},{"listChildren":[{"detail":"","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/38b5b7fa-ee6e-4e25-b980-f5381ea6545e.png#alt=38b5b7fa-ee6e-4e25-b980-f5381ea6545e.png","detail":"隐藏了左侧架构图，改变右侧组件为手风琴。"}]}]},{"listChildren":[{"detail":"","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/4b010d08-c63d-4c7c-9fbf-ee481d87e714.png#alt=4b010d08-c63d-4c7c-9fbf-ee481d87e714.png","detail":"缩小了logo尺寸，隐藏了hover出现的公司说明模块，隐藏了第二帧公司，只显示四个公司logo，由4列变为2列布局。"}]}]},{"listChildren":[{"detail":"","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/28d2a624-e373-481a-a316-b630673da493.png#alt=28d2a624-e373-481a-a316-b630673da493.png","detail":"缩小了logo尺寸，隐藏了公司介绍部分，公司名称移动至logo下方，左侧tab导航更改为顶部下拉导航。"}]}]},{"listChildren":[{"title":"更多案例","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/81140cb4-05e3-41bb-bfa3-b899610bd3cc.png#alt=81140cb4-05e3-41bb-bfa3-b899610bd3cc.png"}]},{"infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/a0892812-1d54-4443-9bdf-57266cebe567.png#alt=a0892812-1d54-4443-9bdf-57266cebe567.png"}]},{"infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/4306bab2-f3c6-4309-8e1f-9ff0d5903fb1.png#alt=4306bab2-f3c6-4309-8e1f-9ff0d5903fb1.png"}]},{"infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/f4cf8034-3571-443e-ac42-b65afd19ad9e.png#alt=f4cf8034-3571-443e-ac42-b65afd19ad9e.png"}]},{"infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/29b4caed-c43f-4dc5-882b-2a7ae54744ea.png#alt=29b4caed-c43f-4dc5-882b-2a7ae54744ea.png"}]}]}]}]},{"miniTitle":"工具与资源","infoList":[{"miniTitle":"响应式设计标注规范","list":[{"text":"在进行响应式设计后，请在文件中按照标注规范，对元素的变化状态进行说明。若元素只有简单移动变化，可以不另外单独输出H5视觉稿，但依然需要在文档中进行文字描述，并和前端进行逐一沟通。"},{"text":"标注规范示例如下：","listChildren":[],"infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/8e9cee4330bc0a8a.png#align=center&alt=image.png&width=1875"}]},{"text":"单个视频卡片在PC端中占6个栅格，响应到移动端时占12个栅格。 文字描述响应到移动端时显示不全时用省略号显示。 浏览人数响应到移动端时自动消失。 二维码响应到移动端时自动消失。"}]}]}]}},{"title":"测量与单位","detail":{"title":"测量与单位","subtitle":"","detail":[{"text":"间距：页面内布局间、模块间、模块内的各部件距离"}],"content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"所有组件距离基于一定基准线X设定尺寸和距离，不允许非整数倍的尺寸出现"},{"text":"例：当一定基准线为4时，如果模块与模块之间，模块内边距不允许出现6，9，11等非4的倍数存在。"},{"text":"最小单列高度需大于44px（最小点击区域）"}]}]},{"miniTitle":"样式","infoList":[{"list":[{"text":"所有组件依据4px基线网格移动且所有组件基于4的倍数设定尺寸和距离，不允许6，9，11这类尺寸的出现","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Q6pO2n1fr4KvT01t9_!!6000000004059-2-tps-2484-198.png"}],"imgLineSize":"1"}]}]}]}},{"title":"栅格","detail":{"title":"栅格","subtitle":"","content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"1、栅格数（Number of columns，下简称N）为24格。"},{"text":"2、设1200px为断点，分辨率≥1200px时，内容区宽度（Content width，下简称W）为1180px"},{"text":"3、内容区宽度W=1180px时，格宽（Column width，下简称C）=30px，格间距（Gutter width，下简称G）为20px"}]}]},{"miniTitle":"PC端","infoList":[{"list":[{"text":"内容区宽度W=1180px，栅格数N=24","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01PjK9ob1Ck5RV12ujs_!!6000000000118-2-tps-1230-450.png"}]}]}]},{"miniTitle":"应用规则","infoList":[{"list":[{"text":"实际页面的卡片或内容分区应用时，可按通栏（1180px）、两栏（580px）、三栏（380px）、四栏（280px）、六栏（180px，慎用）几种布局进行合理应用。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01iavfhg1DDOmxLhBLc_!!6000000000182-2-tps-1230-890.png"}]}]}]}]}},{"title":"字体","detail":{"title":"字体","subtitle":"","detail":[{"text":"为阿里云网站全局设定统一的字体规范，有助于提高文字辨识性和页面易读性，并在视觉上达到统一和整体。针对不同平台的字体设定，能保证在各个操作系统下都有最佳展示效果。"}],"content":[{"miniTitle":"字体家族","infoList":[{"list":[{"text":"选择与当前平台最为匹配的字体。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN011Pkjh41RcxVyIGSV4_!!6000000002133-2-tps-849-217.png","detail":"在MacOS与iOS平台下，使用Helvetica作为西文字体，使用苹方（PingFang）作为中文字体。"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01hCNwUi1Yd8z5tMK0i_!!6000000003081-2-tps-849-217.png","detail":"在Windows平台下，使用Arial作为西文字体，使用微软雅黑（Microsoft YaHei）作为中文字体。"}],"imgLineSize":"2"}]}]},{"miniTitle":"字号","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01UWcM6E1tq45ROOAlr_!!6000000005952-2-tps-2416-1384.png"}]}]}]},{"miniTitle":"文本色值","infoList":[{"list":[{"text":"页面上不允许出现大量的三级或以上的文本颜色，应该注意区分主次。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01TYOrqM1QmHy1JTJOe_!!6000000002018-2-tps-1024-720.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"链接颜色","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01dbPKQA1RuoxZ9DbRe_!!6000000002172-2-tps-1360-318.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"示例","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01g7iWPk22oXJLZXIsS_!!6000000007167-2-tps-2342-1722.png"}]}]}]}]}},{"title":"颜色","detail":{"title":"颜色","subtitle":"","detail":[{"text":"色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。阿里云色彩体系以基础色为核心进行品牌层的表达，另外通过对基础色的推导而衍生出场景色，以达到不同场景使用中信息传递、动作指引、交互反馈，及强化和凸现某一个元素的功能性目的。"}],"content":[{"miniTitle":"品牌色","infoList":[{"list":[{"text":"阿里云基础品牌色，用于体现阿里云智能产品特性的最直观的视觉元素之一，主要应用场景包括关键行动点、操作状态、文字颜色等等。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01OU0X9A1vxy9ptkI79_!!6000000006240-2-tps-668-356.png","title":"品牌色","detail":"色值#FF6A00"}],"imgLineSize":"3"}]}]},{"miniTitle":"中立色","infoList":[{"list":[{"text":"阿里云饱和度低的灰色，用于界面设计中的字体、边框、背景色、分割线等。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN017dB9Qk1WC0HbOjc9r_!!6000000002751-2-tps-668-356.png","detail":"色值#181818","title":"中立色"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01WsBxCE1G046kvI5yq_!!6000000000559-2-tps-668-356.png","title":"中立色","detail":"色值#FFFFFF"}],"imgLineSize":"3"}]}]},{"miniTitle":"功能色","infoList":[{"list":[{"text":"阿里云功能色，用于表示重要的文字链及成功、出错、提醒等重要状态，功能色的使用应遵循用户对色彩的基本感知，不给用户带来太多干扰。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN0146bone1gU00Dx9XQG_!!6000000004144-2-tps-668-356.png","title":"功能色","detail":"色值#1890FF"},{"title":"功能色","detail":"色值#F15533","imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01v01P2y1o0harYfGIR_!!6000000005163-2-tps-668-356.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"色彩应用逻辑","infoList":[{"miniTitle":"","list":[{"text":"阿里云色彩体系通过在基础色HSL的L值进行递增或递减来衍生不同场景颜色。以下图为例，Nomal情况下特定元素色值为品牌色FF6A00（H20 S100 L50），当鼠标Hover时，对应颜色L值增加5为FF791A（H20 S100 L55），当鼠标Click时，对应颜色L值减少5为E65F00（H20 S100 L45）。涉及三方协作中组件需要用到其他平台品牌色的情况，可以依品牌色逻辑类推。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01DeF9ch1SwU0u96bUs_!!6000000002311-2-tps-2520-1264.png"}]}]}]},{"miniTitle":"色彩应用规范","infoList":[{"list":[{"text":"通过定义不同明度的品牌色、中立色、功能色在文本、线条及填充中的应用规则，确保在不同场景中都能通过一致的色彩体现阿里云智能的整体品牌。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/png/16689/1561686525112-a9b6e5f5-90aa-4518-ba19-dab9c6e57d5a.png#alt=中立色form.png"}]},{"infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/png/16689/1561686532029-31ee8b32-b536-485c-a8e0-0703f21a5cd9.png#alt=品牌色form.png"}]},{"infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/png/16689/1561686538972-0a1bf0d5-0cec-4d76-9fb9-8b18d9ca4191.png#alt=功能色form.png"}]}]}]},{"miniTitle":"通用图表类配色","infoList":[{"list":[{"text":"用于在用户中心等前台场景中涉及到图表类配色的应用，可视实际情况灵活应用在图表中。","listChildren":[{"title":"色板总览","detail":"在实际图表使用场景中，优先选择前8个色板，如多于8个时再从次要选择中挑选。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01dtCFDH1gkwerKJDa9_!!6000000004181-2-tps-1640-228.png"}]},{"title":"明度阶梯","detail":"在单色图表应用时，可依据实际使用情况进行明度变化做选择。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01N6DW341vooEhcOsUa_!!6000000006220-2-tps-840-840.png"}],"imgLineSize":"2"}]}]}]}]}},{"title":"阴影","detail":{"title":"阴影","subtitle":"","detail":[{"text":"阴影的使用可以让用户对信息架构的理解更加简单，同时能够提升页面设计品质。"}],"content":[{"miniTitle":"样式","infoList":[{"list":[{"text":"阴影有大、中、小三种不同的投影值，视实际页面中操作区大小灵活使用。Shadow 1多用于下拉组件、导航等组件中的阴影表达；Shadow 2多用于大卡片的hover状态；Shadow 3多于用带深色蒙版的模态弹窗的阴影表达。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01JR0FN41EnPY41WnKT_!!6000000000396-2-tps-733-327.png","detail":""}],"imgLineSize":"2"}]}]}]}},{"title":"通用功能图标","detail":{"title":"通用功能图标","content":[{"miniTitle":"图标","infoList":[{"list":[{"text":"图标是 UI 设计中不可缺少的组成，图标可以一目了然地传达信息、提供互动性、并引起用户对重要信息的关注。在企业级应用设计中，图标在界面设计中往往只占了非常小的比重，在调用时也会被缩到很小的尺寸，在图形素材极度丰富且便于获取的互联网时代，产品设计体系中实现一套美观、一致、易用、便于延展的图标体系往往被设计师不小心忽略。图标虽小，但一套优质的图标体系对设计质量的影响不容忽视，图标从细节上反映了产品设计的一致性，以及一个团队对于细节的追求。"}]}]},{"miniTitle":"设计规范","infoList":[{"miniTitle":"基础网格","list":[{"text":"ACD 大网站图标使用 32px*32px 的基础网格进行绘制，使用等比缩小的方式得到不同尺寸的图标。根据大网站的常用文字字号（中英文正文14px，16px），建议使用的图标大小为 32*32、24*24、20*20、16*16。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557227754924-93132b41-9e32-4935-8c3b-f1f54825a18e.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"出血位","list":[{"text":"图标使用 2px 的出血位。在设计中使用出血位可以预防某些图标在应用时出现边缘被切掉的风险，同时在设计过程中，也有助于设计师把握不同图标间的视觉平衡，为视觉平衡留下调整的余地。除非有特殊必要，在设计中应避免将图形设计延展到出血位内。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557228580939-661ab4c5-02d5-45fd-9f3f-45d92b0b0923.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"轮廓线","list":[{"text":"对于不同轮廓线的图标，设置了基本的比例尺寸。轮廓线提供了图标的基本形状及比例尺寸，有助于设计师把握不同图标之间的视觉大小平衡。如有需要，可以将图形适当延伸出/缩进至轮廓线。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557231029143-18037b2c-8388-43c9-ab86-4a1a791dc214.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"设计风格","list":[{"text":"ACD 大网站设计风格为轻科技，图标在设计时使用较为硬朗利落的线条，避免使用太过明显的圆角。图标的线条粗细为2px，点的直径不小于2px，斜线角度从0°到90°以15°为一个区间递增。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557286609375-fb087f28-d0be-420a-9ebe-d137eebc0eb0.jpeg?x-oss-process=image/resize,w_1500"}]},{"infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557284656004-14b5c09e-1e6c-4436-8b15-72c5e4e0d4ac.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"对齐方式","list":[{"text":"图标在视觉上应保持重心一致，不要完全使用软件内自带的绝对居中功能，有时候设计师需要通过手动调整来达到视觉上的居中。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557286012662-b807230f-b2c5-484b-ab5f-1823fe467cd7.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"尺寸","list":[{"text":"根据常用的文字字号，我们对图标的尺寸进行了设定，分别为 32*32、24*24、20*20 和 16*16。20px 的图标与14px 的中文苹方字体/英文 Roboto 搭配最合适，16px 的图标与 12px 的中文苹方字体/英文 Roboto 搭配最合适。32px 和 24px 的图标如果有需要也可以使用。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557226279198-66b4e1f4-bd06-4e5f-8f73-1a1a3e6f04d2.jpeg?x-oss-process=image/resize,w_1500"}]},{"infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557286434195-dde89032-f117-4d38-b9d7-9af3a805084b.jpeg?x-oss-process=image/resize,w_1500"}]},{"infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557220210792-d6d4bcbc-baa0-4ee9-befc-66efdca0d41d.jpeg?x-oss-process=image/resize,w_1500"}]}]},{"miniTitle":"输出","list":[{"text":"在完成设计后，保持图形的整洁，删掉不需要的节点，合并图形，对小数点进行走查。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557288495573-c7310b52-6ae8-44b6-9f9e-518005b5e45a.jpeg?x-oss-process=image/resize,w_1500"}]}]}]},{"miniTitle":"Sketch Library","infoList":[{"list":[{"text":"下载图标库并启用，在 Sketch 中直接拖拽使用图标。","listChildren":[{"number":"","title":"安装","detail":"下载ACD图标库到本地，在“Sketch > 首选项”中添加组件库。📎ACD UI Kit Icons.sketch","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557388136451-513086ee-60c6-4ba1-a8b2-d8c15c3d2e6b.jpeg?x-oss-process=image/resize,w_1500"}]},{"title":"使用","detail":"按照规范进行使用，14px的文案搭配20px的图标，16px的文案搭配24px的图标，如果有需求，可以使用大号图标。 请不要随意缩放图标尺寸。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557388089865-a91a035b-6deb-4220-bf3f-26d56aa1f7b9.jpeg?x-oss-process=image/resize,w_1500"}]}]}]}]},{"miniTitle":"图标库附录","infoList":[{"list":[{"text":"ACD UI Kit 图标库附录（版本号 2019.5.6），持续补充更新中。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/jpeg/26363/1557145057610-ea3c22fa-96d4-4463-b8d2-1e7152d9ed1e.jpeg?x-oss-process=image/resize,w_1500"}]}]}]}]}}],"detail":{"title":"111","subtitle":"111"}},{"title":"基础组件","children":[{"title":"按钮","detail":{"title":"按钮","subtitle":"","content":[{"miniTitle":"按钮类型","infoList":[{"miniTitle":"常规按钮类型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01i56dm41T4j8rI3gI1_!!6000000002329-2-tps-1684-246.png"}]},{"listChildren":[{"title":"主按钮","detail":"最常使用的按钮类型，如无特殊要求均使用此类按钮。","number":"01"},{"title":"副按钮","detail":"副按钮通常搭配主按钮一起使用，多用于按钮组中两个行动点同样重要但强调优先级有区分的情况，如“立即购买（主按钮”、“管理控制台（副按钮）”","number":"02"},{"title":"次级按钮","detail":"通常和主按钮一起搭配使用，多用于弹窗场景中按钮组有主次/强弱引导操作的情况，如“下一步（主按钮）”、“关闭（次级按钮）”。","number":"03"},{"title":"反白按钮","detail":"反白按钮常用于在深色底上。","number":"04"},{"title":"带图标按钮","detail":"通常用于需要和普通按钮强烈区分的特殊场景。","number":"05"}]}]}]},{"miniTitle":"按钮状态","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01pCJBEx1DJLwEOItal_!!6000000000195-2-tps-1398-1008.png"}],"imgLineSize":"1"}]}]},{"miniTitle":"按钮尺寸","infoList":[{"miniTitle":"默认尺寸","list":[{"text":"默认按钮尺寸如下图，按钮的长度由按钮内文字数量决定撑开，最多不超过6个字符。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01UCwZnW1pppQ9jdzkb_!!6000000005410-2-tps-530-266.png","detail":"Hero"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01TF60IZ1WZMTy2KNFt_!!6000000002802-2-tps-530-266.png","detail":"Large"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01v1IIWL1rjXD4HyfIc_!!6000000005667-2-tps-530-266.png","detail":"Nomal"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01JnXJKY1NmnYtBELa5_!!6000000001613-2-tps-530-266.png","detail":"Small"}],"imgLineSize":"4"}]},{"miniTitle":"定宽使用","list":[{"text":"当场景需要对按钮定宽时，如活动页或者卡片内按钮，可以添加特定类将按钮设置定宽，或设置最小宽度。"}]},{"miniTitle":"百分比宽度使用","list":[{"text":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01zjInCF1bPLuC4jTn4_!!6000000003457-2-tps-680-760.png","detail":"多用于响应式卡片中，按钮宽度为父元素100%宽度。"}],"imgLineSize":"3"}]}]},{"miniTitle":"常见场景","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN016bnoIp1Q7z74EGuHN_!!6000000001930-2-tps-724-132.png","detail":"弹窗按钮组"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01KM3gVa1pByxsKB0dA_!!6000000005323-2-tps-724-132.png","detail":"banner按钮组"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01l5gRrA21P3f68bSgq_!!6000000006976-2-tps-724-132.png","detail":"购买按钮组"}],"imgLineSize":"3"}]}]}]}},{"title":"选项卡","detail":{"title":"选项卡","subtitle":"","detail":[{"text":"将内容依据用户可理解的逻辑进行分类，让用户可以在有限的区域内浏览多个同层级内容，（而不必跳转页面）。"},{"text":"根据使用场景及触发控件的类型，可以分为以下几种样式："},{"text":"普通选项卡/Tab-Bar"},{"text":"包裹型/TAB-wraped"},{"text":"胶囊型/TAB-Capsule"},{"text":"文字型/  TAB -Text"}],"content":[{"miniTitle":"普通选项卡","infoList":[{"list":[{"text":"引领整页面的内容，起导航的作用","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01hqphc41CMjF81iUY6_!!6000000000067-2-tps-2520-500.png"}]}]}]},{"miniTitle":"页面内部区域选项卡","infoList":[{"list":[{"text":"方便切换区域内容","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01wgAeFG1Ry1jZcZ4wx_!!6000000002179-2-tps-2516-320.png"}]}]}]},{"miniTitle":"胶囊型/TAB-Capsule","infoList":[{"list":[{"text":"在实际业务中经常和表格结合使用，让用户快速切换对应内容","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01EaJduh290nbloLkO2_!!6000000008006-2-tps-716-448.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"文字型","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01kLtUdK1hduBWqgS4H_!!6000000004301-2-tps-2520-388.png"}]}]}]},{"miniTitle":"纵向结构","infoList":[{"list":[{"text":"用于分类较多的选项","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN0105wHNa28KfAgLJjt8_!!6000000007914-2-tps-2480-726.png"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01S1fbhs1vOheuzSGG2_!!6000000006163-2-tps-2480-726.png"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01L6jD9M1orpXMtw0sa_!!6000000005279-2-tps-2480-726.png"}]}]}]},{"miniTitle":"特殊选项卡","infoList":[{"list":[{"text":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01ROoKbj1qQvVKmEKUU_!!6000000005491-2-tps-1240-320.png"}]}]}]}]}},{"title":"锚点","detail":{"title":"锚点","subtitle":"","detail":[{"text":"当页面太长的时候，方便定位到页面不同的区块内容，一般用于页面滚动到二屏以下时固定悬停在浏览器顶部使用。"}],"content":[{"miniTitle":"带按钮","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01SW6hND27wOBA8HW6W_!!6000000007861-2-tps-3000-232.png"}]}]}]},{"miniTitle":"不带按钮","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01kHfjfR1X3acfESopM_!!6000000002868-2-tps-3000-232.png"}]}]}]}]}},{"title":"文本框","detail":{"title":"文本框","subtitle":"","detail":[{"text":"用于输入和显示文本的控件。包含单行及多行，文本框具有编辑功能（选择、剪切、复制、黏贴），也可结合选择器一起使用。"}],"content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"• 需有光标显示要输入文字的位置。"},{"text":"• 文本框高度应满足输入内容的要求，宽度不宜太宽，以免内容过长影响阅读，支持键盘焦点和密码输入。"},{"text":"• 输入前提示：内容相关的补充说明（如输入的格式、字数限制等）。"},{"text":"• 输入中提示：若输入信息有限定，则需在接收用户输入时，进行实时编辑检查。"},{"text":"• 验证后反馈：显示输入正确、错误或必填等反馈说明。"}]}]},{"miniTitle":"类型","infoList":[{"miniTitle":"输入型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01l3Hx3I1E3bwXCpDLE_!!6000000000296-2-tps-822-192.png"}],"imgLineSize":"3"}]},{"miniTitle":"输入加选择型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01d7cAEk1RKdfnOzyU3_!!6000000002093-2-tps-750-192.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"样式","infoList":[{"miniTitle":"大小","list":[{"text":"目前规定了输入框的四种尺寸高度：S7=28px、S9=36px、S10=40px，宽度建议不超过720px。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01hLTPLW1Mr5elettw1_!!6000000001487-2-tps-840-392.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"状态","infoList":[{"miniTitle":"输入型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01ztjDB81wT75c38lJF_!!6000000006308-2-tps-1140-864.png"}],"imgLineSize":"2"}]},{"miniTitle":"输入加选择型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01rYsGr223AyiaIDd5h_!!6000000007216-2-tps-914-752.png"}],"imgLineSize":"3"}]}]}]}},{"title":"选择器","detail":{"title":"选择器","subtitle":"","detail":[{"text":"帮助用户从一个预定的集合中进行选择或输入的控件。"}],"content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"• 如果两个相互排斥的选项，如“我同意”和“我不同意”，请将其合并使用单个复选框“我同意”。"},{"text":"• 如果两个相互排斥的选项，如“开”和“关“，可使用切换开关。"},{"text":"• 若选项数大于5或需在表格中展现时，请使用下拉框。"}]}]},{"miniTitle":"样式","infoList":[{"miniTitle":"复选框","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01vFPQfS1W9FuI2yqeJ_!!6000000002745-2-tps-748-316.png"}],"imgLineSize":"3"}]},{"miniTitle":"单选框","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01lQb7x01a0n31q1Kab_!!6000000003268-2-tps-750-316.png"}],"imgLineSize":"3"}]},{"miniTitle":"数量选择器","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01gR0MRr1kJFAB1bm1Y_!!6000000004662-2-tps-524-676.png"}],"imgLineSize":"3"}]},{"miniTitle":"下拉选择","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01HGTMia1egFMaIqcEh_!!6000000003900-2-tps-1570-1182.png"}],"imgLineSize":"2"}]},{"miniTitle":"下拉多选型","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN018utHLZ1zFmPGKA3l9_!!6000000006685-2-tps-706-994.png"}],"imgLineSize":"3"}]},{"miniTitle":"按钮式选择器","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01Kw8S4D27WjzzzZKgl_!!6000000007805-2-tps-778-448.png"}],"imgLineSize":"3"}]}]}]}},{"title":"模态弹窗","detail":{"title":"模态弹窗","subtitle":"","detail":[],"content":[{"miniTitle":"弹窗组成","infoList":[{"list":[{"text":"普通弹窗分两大类：提示类（图1）和展示/提交类（图2/3）。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01UiDJSB1Ea83tlOFJF_!!6000000000367-2-tps-1080-612.png","detail":"图1"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01P3IfiM1vdojNwI9Vk_!!6000000006196-2-tps-1080-612.png","detail":"图2"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01QARLVj1KGn28mjy7W_!!6000000001137-2-tps-1080-612.png","detail":"图3"}],"imgLineSize":"3"},{"text":"弹窗由背景蒙版+弹窗主体组成。","listChildren":[{"number":"01","title":"蒙板","detail":"起遮罩作用，点击蒙版不会关闭弹窗。遮罩颜色#000000，透明度50%。","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/png/16689/1562133770392-5039fbe5-7c7a-4727-ba5e-0e59abc5fdef.png"}]},{"number":"02","title":"弹窗标题","detail":"必须填写标题（8个字以内）；提示类弹窗不需要在标题后添加标点符号；展示/提交类弹窗若不确定标题名称可统一使用‘温馨提示’代替。"},{"number":"03","title":"内容区域","detail":"内容区可含文本、表单、下拉框、图片等样式。正文字号为14px；对话框的内容要尽量用自然的语言描述（用那些用户熟知的文字，词汇和概念来描述），而不是用一些特殊的系统语言或者晦涩的语言来描述；文案尽量少用语气词，例如：哦，哟，么么哒等，减少口语化语言；内容区可根据需要对文案进行加粗、增加文字链的操作。但应避免过多文字链出现在同一个弹框内；内容区域要使用明晰的问题和选项。"},{"number":"04","title":"操作按钮","detail":"按钮字数限制在12个字以内。可按需使用2、1个或无操作按钮样式；当屏幕≥768px时：统一位于右下角，主操作按钮位于右侧，次要操作按钮位于左侧；当屏幕＜768px时：操作按钮居中；按钮的文案避免当前用户读到的是模棱两可的选项内容。必须细化、明确选项内容，用户通过标题或者按钮上的文字就能理解内容。"},{"number":"05","title":"特殊弹窗","detail":"特殊弹窗包括：视频弹窗、进度操作（前台暂无）、新功能引导类"}]}]}]},{"miniTitle":"弹窗尺寸","infoList":[{"list":[{"text":"弹窗有3个宽度尺寸：480px，680px，按85%屏幕宽度；弹窗的size随终端大小而改变。"}]},{"miniTitle":"1.屏幕＞768px","list":[{"text":"","listChildren":[{"title":"弹窗尺寸","detail":"当小弹窗的最大高度600px不足以容纳全部文案，则使用大弹窗。 大弹窗的最小高度为270px，若文案较长，大弹窗的高度可根据文案长度调整，最大不得超过600px；","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01sRG7771wAKqoJFF2d_!!6000000006267-2-tps-1060-520.png","detail":"小弹窗width：480px，min-height:210px"}],"imgLineSize":"3"},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01VrJtsn1uY26yVutKh_!!6000000006048-2-tps-1460-640.png","detail":"大弹窗：width:680px，min-height:270px"}],"imgLineSize":"2"},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01Ruf8Nm1PWt25BAMiJ_!!6000000001849-2-tps-1460-1300.png","detail":"大弹窗，文案达到弹窗最大高度max-height:600px，出现滚动条"}],"imgLineSize":"2"}]}]},{"miniTitle":"2.564px≤屏幕≤768px","list":[{"text":"所有弹窗宽度为480px，高度按屏幕百分比计算，且最大高度不超过600px。"}]},{"miniTitle":"3.屏幕＜564px","list":[{"text":"","listChildren":[{"title":"弹窗尺寸选择标准","detail":"若屏幕是移动端尺寸，无论大弹窗还是小弹窗都采用百分比宽度的模式，最小宽度为300px，最大高度为410px。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01JxTIuM1nonIQTNURr_!!6000000005137-2-tps-700-904.png","detail":"移动端大弹窗"}],"imgLineSize":"3"},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01DKN1B51LsdNJaKEqW_!!6000000001355-2-tps-700-520.png"}],"imgLineSize":"3"}]}]}]},{"miniTitle":"弹窗类型","infoList":[{"miniTitle":"提示类","list":[{"text":"对用户操作提供4类结果反馈：info、success、error、warning。","listChildren":[{"title":"结果反馈","detail":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01O1LAvT27PPf6vEkgL_!!6000000007789-2-tps-1080-492.png","detail":"2个buttons的场景"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN010329VF1ONtduDc4yY_!!6000000001694-2-tps-1080-492.png","detail":"1个buttons的场景"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01as4AzJ1IqqzKaVCPd_!!6000000000945-2-tps-1080-492.png","detail":"无buttons的场景"}],"number":"01","imgLineSize":"3"}]},{"text":"默认3s后关闭，此处可以根据场景需要更改关闭时间。"},{"text":"何时使用？提示操作为成功／失败。"},{"listChildren":[{"title":"状态提示","detail":"提示用户当前状态并提供后续引导，没有具体弹窗标题","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01H7ZRgj1aqXo1bfGP5_!!6000000003381-2-tps-1080-492.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01kmdZDG1I7VmCvMmnS_!!6000000000846-2-tps-1480-696.png"}],"number":"02","imgLineSize":"2"}]},{"text":"何时使用？当前状态／操作缺少前置条件（例如未登录／未认证），引导用户去操作。"}]},{"miniTitle":"展示/提交类","list":[{"listChildren":[{"title":"信息展示","detail":"信息展示类的弹窗一般只用一个按钮（蓝色），放置于弹窗右下角。","infoImgList":[{"detail":"使用小弹窗的场景","imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01pfeeLF1Gvm0eOz11A_!!6000000000685-2-tps-1060-520.png"}],"number":"01","imgLineSize":"3"},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01VrJtsn1uY26yVutKh_!!6000000006048-2-tps-1460-640.png","detail":"使用大弹窗的场景"}],"imgLineSize":"2"},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01Ruf8Nm1PWt25BAMiJ_!!6000000001849-2-tps-1460-1300.png"}],"imgLineSize":"2"}]},{"text":"何时使用？使用于信息解释类等文案，例如活动规则，套餐规则，详情等。"},{"listChildren":[{"title":"信息提交","detail":"统一使用主按钮放置于弹窗右下角。弹窗内容与弹窗标题左对齐。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01QARLVj1KGn28mjy7W_!!6000000001137-2-tps-1080-612.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01BNWBFM1MysO6gsmwU_!!6000000001504-2-tps-1080-612.png"}],"number":"02","imgLineSize":"2"},{"detail":"何时使用？需要用户输入信息完成操作，例如设置昵称，输入验证码等。"}]}]}]},{"miniTitle":"特殊弹窗","infoList":[{"miniTitle":"1.新功能引导","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01SY5WYe1SOahooq8NV_!!6000000002237-2-tps-1080-692.png"}],"imgLineSize":"2"},{"text":"何时使用？重大新功能发布需要用户知晓的场景（前台尽量少用）"}]},{"miniTitle":"2.视频弹窗","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01wssMfd1GiwvBFRHFh_!!6000000000657-2-tps-1656-984.png"}]},{"text":"何时使用？当视频没有单独落地页的时候，可使用视频弹窗。视频主体内容区域（不包括进度条和关闭按钮）宽度为768px；高度为576px。"}]},{"miniTitle":"3.进度操作（前台暂缺）","list":[{"text":"何时使用？弹窗中也可有进度操作，但注意避免弹窗再弹窗。弹窗大小，width:680px; max-height:600px。"},{"text":""}]}]}]}},{"title":"提示与反馈","detail":{"title":"提示与反馈","subtitle":"","detail":[{"text":"提示与反馈信息是用来告诉用户需要知道什么、采取什么样行动的内容，通常最直接的展现方式是使用文字"}],"content":[{"miniTitle":"分类","infoList":[{"list":[{"text":"• 提示"},{"text":"• 新消息提示"},{"text":"• 反馈"},{"text":"• 气泡"}]}]},{"miniTitle":"规则","infoList":[{"list":[{"text":"依照特性可分为4大类：帮助、成功、错误"},{"text":"• 帮助：用于帮助用户做决策的、提示用户进行正常操作以及通知用户的信息。例如：如有什么疑问，请到文档中心查看详情。"},{"text":"• 成功：用于提示用户的操作已成功。例如：恭喜您，已经通过实名认证。"},{"text":"• 错误：用于提示用户操作错误，警告错误，需要用户知道并采取行动的信息。例如：很遗憾，您的企业认证没有通过。"}]}]},{"miniTitle":"样式","infoList":[{"miniTitle":"提示","list":[{"listChildren":[{"title":"重要提示","detail":"用于页面内重要级别优先的提示，提示信息需要时可选择关闭。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN011FgYE51VBiQ2gpt7L_!!6000000002615-2-tps-960-192.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01In7VFY1cUg7lrXMfM_!!6000000003604-2-tps-960-192.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01seRoXq1VTZrhhWujo_!!6000000002654-2-tps-960-192.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01N8idqj20cVgC3fQrM_!!6000000006870-2-tps-960-192.png"}],"imgLineSize":"4"},{"title":"普通提示","detail":"用于页面内中重要性级别不高，文案较多的提示","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01k74KBy1GNQIyxOutN_!!6000000000610-2-tps-1720-272.png"}]}]}]}]},{"miniTitle":"新消息提示","infoList":[{"list":[{"text":"在有新消息时、新讯息，或者app、插件、功能模块可以更新、升级时，使用这个提示样式。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01hr2o4924k4gMGxNCU_!!6000000007428-2-tps-1718-204.png"}]}]}]},{"miniTitle":"反馈","infoList":[{"miniTitle":"弹框反馈","list":[{"text":"关闭按钮可根据实际情况选择是否出现。"},{"text":"不可关闭：通过一个操作引发的反馈浮层位于页面中心,反馈消息持续1.5秒后自动消失. 用户在反馈层出现时不可进行任何的操作。"},{"text":"可关闭：通过一个操作引发的反馈浮层位于页面中心,反馈内容可通过确认或关闭按钮进行关闭. 用户在反馈层出现时不可进行任何的操作，用于重要的反馈","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01mgPqqD1dSg0rUiLy5_!!6000000003735-2-tps-1080-492.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01sYpTk826XMvY2wpTc_!!6000000007671-2-tps-1080-492.png"}],"imgLineSize":"2"}]},{"miniTitle":"页面反馈","list":[{"text":"用于在页面中进行结果提示，反馈出现需要跟随操作点（可多点），反馈信息尽可能简洁。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01Nl6Fpv1EpF8AkBQc4_!!6000000000400-2-tps-2720-1100.png"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01EKXfBz1t1gWRR2msg_!!6000000005842-2-tps-2720-1100.png"}]}]}]},{"miniTitle":"气泡","infoList":[{"list":[{"text":"用于精确地描述被指向的对象，例如图标、图形、链接等，避免总是将描述文本显示在屏幕上，避免总是将文本显示在图片上 交互形式："},{"text":"1、可交互的提示，需要通过hover或点击，才能显示出现"},{"text":"2、不可交互的提示只有一种状态－默认状态","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01KoM4s01jQk28xccbi_!!6000000004543-2-tps-1928-776.png"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN0197GfXU1w5IUhnjghF_!!6000000006256-2-tps-892-492.png"}],"imgLineSize":"2"}]}]}]}},{"title":"通知消息","detail":{"title":"通知消息","subtitle":"","content":[{"miniTitle":"只有title","infoList":[{"list":[{"text":"1.对用户操作提供简单的结果反馈，有成功、警告和错误三种类型。"},{"text":"2.出现在页面右上角，默认显示2s并自动消失（时长可自定义）。"},{"text":"3.根据应用场景选择带icon或者不带icon的样式。"},{"text":"4.默认有“X”按钮。"},{"text":"5.最小宽度为320px；高度为44px。"},{"text":"6.属于轻量级不打扰用户操作的提示方式。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01z9jJk21RqF04e0cHb_!!6000000002162-2-tps-760-464.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"title+content","infoList":[{"list":[{"text":"1.信息提醒反馈，反馈信息相对较多，通过标题+详细描述的形式展现。"},{"text":"2.根据应用场景选择带icon或者不带icon的样式。"},{"text":"3.默认有“X”按钮。"},{"text":"4.可以存在操作按钮，例如“我知道了”，也可以不设置操作按钮。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01V0iUw01M5urT6oSnh_!!6000000001384-2-tps-1000-450.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01hCCKvR20gdF7O71HP_!!6000000006879-2-tps-1000-450.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01Dhr4XY1EqcK0eA4LG_!!6000000000403-2-tps-1000-450.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01eiUecs1KTc7dm4iyD_!!6000000001165-2-tps-1000-450.png"}],"imgLineSize":"4"}]}]},{"miniTitle":"消息展示动效","infoList":[{"miniTitle":"","list":[{"text":"","listChildren":[{"number":"01","title":"移入函数","detail":"300ms cubic-bezier(0.0, 0.0, 0.2, 1);"},{"number":"02","title":"移入方法","detail":"整体从右侧屏幕滑动出现"},{"number":"03","title":"停留时长","detail":"默认4s后，自动移出消失"},{"number":"04","detail":"默认不消失","title":"可选"},{"number":"05","title":"移出函数","detail":"100ms cubic-bezier(0.4, 0.0, 1, 1);"},{"number":"06","title":"移出方法","detail":"渐消，背景容器高度变为0，透明度由1变为0，文案高度由Y变为Y-10"}]}]}]},{"miniTitle":"loading类","infoList":[{"list":[{"text":"对用户操作提供加载中的反馈。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01SrwPHU1WKFPgs7rZS_!!6000000002769-2-tps-520-208.png"}],"imgLineSize":"4"},{"text":"何时使用？当系统需要加载时。","imgLineSize":"1"}]}]}]}},{"title":"下拉菜单","detail":{"title":"下拉菜单","subtitle":"","detail":[{"text":"当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应命令。"}],"content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"• 在网页端最常以下拉选择菜单形式展现"},{"text":"• 菜单列表选项按照逻辑顺序排序，优先显示用户最常用的推荐选项"},{"text":"• 下拉菜单内容需保持单行并尽量完整显示，展开的下拉面板宽度需等于或大于下拉框宽度"},{"text":"• 在列表中，若选项数少于5个时，可考虑使用单选按钮"}]}]},{"miniTitle":"样式","infoList":[{"miniTitle":"单项选择","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01WVqDvf243wF3TkG3R_!!6000000007336-2-tps-520-588.png"}],"imgLineSize":"4"}]},{"miniTitle":"级联选择","list":[{"listChildren":[{"title":"样式1  主菜单与子菜单分体，鼠标hover展开子级","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01DmFWNQ1WgEQIzSU2W_!!6000000002817-2-tps-918-588.png"}],"imgLineSize":"3"},{"title":"样式2  子级菜单长与主场单连体，过长时可采用滚动条","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01NRcDMP1a2AEru3FMO_!!6000000003271-2-tps-920-648.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"多项选择的菜单","list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01lAlTFR2723ShwkfNw_!!6000000007738-2-tps-520-728.png"}],"imgLineSize":"4"}]}]}]}},{"title":"翻页器","detail":{"title":"翻页器","subtitle":"","detail":[{"text":"必有功能点："},{"text":"1、显示当前所在页码，首页、末页一直显示"},{"text":"2、上一页、下一页跳转"},{"text":"可选功能点："},{"text":"1、页面较多时，输入框直接跳转"},{"text":"2、显示总条数"},{"text":"3、选择每页显示条数"}],"content":[{"miniTitle":"规则","infoList":[{"list":[{"text":"• 共有多少页，显示在最后一个页码上"},{"text":"• 去掉了首页、末页单独按钮，直接点击页码即可"},{"text":"• 上一页下一页按钮，一直都在，不可点时置灰"},{"text":"• 页码输入框，如果输入数字＞最大值，跳转至最后一页；如果输入数字＜1，跳转至首页"},{"text":"• 除了基础版中的页码、首页末页、跳转，其他的可选功能点，都需开发成可选态，设计师在使用时可以选择可选功能点是否出现"}]}]},{"miniTitle":"基础","infoList":[{"list":[{"text":"• 最简版，不用显示有多少条"},{"text":"• 超过7页时，出现“...”"},{"text":"• 点击“...”时，可以快速切换","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN018Iv0XL1cL3oC6bjzY_!!6000000003583-2-tps-998-408.png"}],"imgLineSize":"2"},{"text":"何时使用？"},{"text":"建议数量＜1000时"}]}]},{"miniTitle":"带总条数","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01358WOb1ETiW2Lp4kd_!!6000000000353-2-tps-1190-380.png"}],"imgLineSize":"2"},{"text":"何时使用？"},{"text":"建议数量＜1000时"}]}]},{"miniTitle":"完整版","infoList":[{"list":[{"text":"• 可选范围：10、20、50"},{"text":"• 完整版，一直都有跳转输入框","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01JrCUZd25VFTdOknRX_!!6000000007531-2-tps-1276-180.png"}],"imgLineSize":"2"},{"text":"何时使用？"},{"text":"建议数量＞1000时"}]}]},{"miniTitle":"迷你","infoList":[{"list":[{"text":"何时使用？"},{"text":"大表格中嵌入小表格的时候可以使用","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01Cg0lt01toEVPSBuvT_!!6000000005948-2-tps-1100-344.png"}],"imgLineSize":"2"}]}]}]}},{"title":"表单","detail":{"title":"表单","subtitle":"","content":[{"miniTitle":"单行输入框 Input","infoList":[{"miniTitle":"表单控件尺寸","list":[{"text":"高度："},{"text":"控件高度继承单个组件规范，如输入框和按钮规范。"},{"text":"默认高度为 M = 32px。S = 28px，L = 36px。"},{"text":"宽度："},{"text":"通过Col栅格来控制宽度"}]}]},{"miniTitle":"输入型input（不带字数限制）","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01x0R6do291G0IEMS8C_!!6000000008007-2-tps-1076-752.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"输入型input（带字数限制）","infoList":[{"list":[{"text":"一种特殊输入框，在input内部最右侧展示当前字符数和限制字符数，当用户输入成果限制字符数时触发报错提示。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01LjzxZb1e4EUO9ptiS_!!6000000003817-2-tps-996-752.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"输入框带后置文字时（如单位）","infoList":[{"list":[{"text":"在涉及金额、带宽等需要单位的输入框时，在通用表单中可以使用将单位放置在输入框右侧的设计。","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01elZnkR1HMKypdLJwL_!!6000000000743-2-tps-788-752.png"}],"imgLineSize":"3"}]}]},{"miniTitle":"多行输入表单","infoList":[{"list":[{"text":"在需要输入大量文本内容时使用","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01dZz0gN1E9Z5ZNn6h8_!!6000000000309-2-tps-1236-2480.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"下拉菜单 Select","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN012TYwp81nQyhZGuddl_!!6000000005085-2-tps-940-660.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"上传 Upload","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01GqsJl41yht62i75Ue_!!6000000006611-2-tps-1008-890.png"}],"imgLineSize":"2"}]}]},{"miniTitle":"纯展示型","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01z0wLoW1YmlImu8G64_!!6000000003102-2-tps-656-452.png"}],"imgLineSize":"4"}]}]}]}}],"detail":{"title":"11","subtitle":"11"}},{"title":"场景与模式","children":[{"title":"图文Z字形模块排列","detail":{"title":"图文Z字形模块排列","detail":[{"text":"配图与文字结合，以Z字形穿插排列"}],"content":[{"miniTitle":"以产品详情页为例","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01bBCaNG281QXLWJpew_!!6000000007872-2-tps-2880-2232.png"}]}]}]}]}},{"title":"图文卡片","detail":{"title":"图文卡片","detail":[{"text":"图文卡片包含图片、标题、描述性文案三个必选元素，行动点为可选项。卡片没有行动点时，无hover效果。以下为详情页通用图文卡片样式，如有特殊情况，可以进行定制化设计。"}],"content":[{"miniTitle":"图文卡片样式A（以产品详情页为例）","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0154UESg1SWpprMJFuh_!!6000000002255-2-tps-2880-2198.png"}]}]}]},{"miniTitle":"图文卡片样式B","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01RDx8DZ227wTc1Q0wi_!!6000000007074-2-tps-2880-2198.png"}]}]}]}]}},{"title":"客户案例模块","detail":{"title":"客户案例模块","detail":[{"text":"客户案例包括纯logo展示、logo+文字的组合、logo+文字+其他信息透传的组合方式。"}],"content":[{"miniTitle":"以产品详情页为例","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01QJabVj1t9veQuVgfD_!!6000000005860-2-tps-2880-1118.png"}]}]}]}]}},{"title":"交叉推荐","detail":{"title":"交叉推荐","detail":[{"text":"相关产品交叉推荐模块。"}],"content":[{"miniTitle":"以产品详情页为例","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01sdv5dW1O5ZngSYJgC_!!6000000001654-2-tps-2880-1138.png"}]}]}]}]}},{"title":"应用场景架构","detail":{"title":"应用场景架构","detail":[{"text":"用于产品详情页或解决方案页面。由tab、架构图、详情、相关产品组成。"}],"content":[{"miniTitle":"应用场景完整版（以产品详情页为例）","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01J0kxD121tHneItNwM_!!6000000007042-2-tps-2880-1744.png"}]},{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01xVUm0K1OSTbTMKbPe_!!6000000001704-2-tps-2880-1930.png"}]}]}]},{"miniTitle":"应用场景拓展版","infoList":[{"list":[{"text":"Tab功能可隐藏，功能/优势以逐条形式陈列","infoImgList":[{"imgUrl":"https://intranetproxy.alipay.com/skylark/lark/0/2019/png/16689/1561708190388-709d6de6-1d49-4699-9e13-db46a1d6e012.png"}]}]}]}]}},{"title":"使用流程","detail":{"title":"使用流程","detail":[{"text":"使用流程由图片、箭头、标题、描述文案组成，其中描述文案为非必填项。"}],"content":[{"miniTitle":"","infoList":[{"list":[{"infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01huBXoS1rxH5tPnP7p_!!6000000005697-2-tps-2880-1376.png"}]}]}]}]}},{"title":"商品卡片","detail":{"title":"商品卡片","content":[{"miniTitle":"无线","infoList":[{"miniTitle":"移动端卡片布局规则","list":[{"text":"移动端实际内容343px内，布局规则遵循以4为最小的单位的原则。卡片分栏有2种，栏距12px，界面和屏幕左右间距16px","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN012RLAQ61CU3a25FqlN_!!6000000000083-2-tps-890-558.png"}],"imgLineSize":"3"}]},{"miniTitle":"内容布局规则","list":[{"text":"1.卡片由产品名称及描述、选择配置/产品优势、价格、行动按钮、营销标签组成。完整的卡片需要以下五大部分，也可以根据运营/产品需求对卡片部分卡片模块进行组合和定制化设计"},{"text":"2.移动端空间有限，在C1卡片上不可使用组合按钮，如有使用组合按钮场景，请选择C2卡片","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN019KhzFe1lYBhdbpDQ0_!!6000000004830-2-tps-784-744.png"}],"imgLineSize":"3"},{"listChildren":[{"title":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01knPvEo1GIqLVbK7bc_!!6000000000600-2-tps-808-742.png","detail":"A+B1+C+D"}],"imgLineSize":"3"},{"title":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01IV9kEg1FJvfT7d95Q_!!6000000000467-2-tps-1540-500.png","detail":"定制卡片"}],"imgLineSize":"2"},{"title":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01koZlCb1grMCUjRc50_!!6000000004195-2-tps-2644-798.png","detail":"A+B1+B2+C+D"}]}]}]},{"miniTitle":"标注","list":[{"listChildren":[{"title":"A产品名称及描述","detail":"C1卡片：标题长度建议8个汉字以内，描述24个汉字以内；C2卡片：标题长度建议16个汉字以内，描述24个汉字以内；标题文字加粗16px，颜色＃181818；描述文字常规12px，颜色 # 999999；卡片背景在大促情况下可定制设计 ","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01FieSs627cEkj463dH_!!6000000007817-2-tps-1202-358.png"}],"number":"01","imgLineSize":"2"},{"title":"B1产品配置","detail":"C1卡片：配置主标长度建议8个汉字以内，副标5个汉字以内；C2卡片：配置主标长度建议12个汉字以内，副标8个汉字以内；主标常规12px，颜色＃181818；副标常规12px，颜色 # 999999","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01eXMqHN1e59HRZHvqc_!!6000000003819-2-tps-1640-376.png"}],"imgLineSize":"2","number":"02"},{"title":"B2产品优势","detail":"C1 优势文字长度建议8个汉字以内；C2 优势文字长度建议22个汉字以内；常规12px，颜色 # 999999","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01cVdT5p1yl5rtjFZuX_!!6000000006618-2-tps-810-512.png"}],"number":"03","imgLineSize":"2"},{"title":"C价格及营销标签","detail":"内容标签文字常规12px，颜色 # 999999，大促情况下可跟随卡片主色定制；省价/原价文字常规12px，颜色 # 999999；价格除￥、.00字符，文字加粗20px，颜色 # FF6A00","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN014eZPih1CUVyacCuwe_!!6000000000084-2-tps-1896-490.png"}],"number":"04"},{"title":"D1单一按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01w9U4Vj1P37HxZeosc_!!6000000001784-2-tps-412-160.png","detail":"Normal; fill:FF6A00 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01EcWNOK1banoCD0L2i_!!6000000003482-2-tps-412-160.png","detail":"Hover; fill:FF791A 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01IoNQEX1hhZLyptkwT_!!6000000004309-2-tps-412-160.png","detail":"Click; fill:#E65F00 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Dd4hdz1glP3PE8e9h_!!6000000004182-2-tps-412-160.png","detail":"Disalbe; fill:#D8D8D8 100%"}],"number":"05","imgLineSize":"4"},{"title":"D2组合按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01a0OQiT2049yKfS6OY_!!6000000006795-2-tps-806-1068.png"}],"number":"06","imgLineSize":"3"},{"title":"D2定制按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01LiEBHE1sVcnV0pAhT_!!6000000005772-2-tps-812-640.png"}],"number":"07","imgLineSize":"3"},{"title":"E标签","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0135whFd1qmuW0JGCxw_!!6000000005539-2-tps-1052-208.png"}],"number":"08","imgLineSize":"2"}]}]}]},{"miniTitle":"PC","infoList":[{"miniTitle":"卡片布局规则","list":[{"text":"PC端实际内容1180px内，卡片分栏有4种尺寸，分别是1180px、580px、380px、280px，栏距20px。标注适用于卡片宽280、380的情况，按钮高40固定，特殊情况按钮可定制化","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01HYzUXL1x4fZBG8Zjp_!!6000000006390-2-tps-2480-734.png"}],"imgLineSize":"1"}]},{"miniTitle":"内容布局规则","list":[{"text":"卡片由产品名称及描述、选择配置/产品优势、价格、行动按钮、营销标签组成。完整的卡片需要以下五大部分，也可以根据运营/产品需求对卡片部分卡片模块进行组合和定制化设计","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01UkDLKg1ZUjKHag2G0_!!6000000003198-2-tps-998-916.png"}],"imgLineSize":"3"},{"listChildren":[{"title":"","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01aiRbKH1atkZoJuiSk_!!6000000003388-2-tps-680-912.png","detail":"A+B1+C+D"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01gflP4f1zPr7Onywoc_!!6000000006707-2-tps-680-912.png","detail":" A+B1+B2+C+D"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01NSGF7d1k8Ff1Y8Lxw_!!6000000004638-2-tps-680-912.png","detail":" A+B2+C+D"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01URsrfp24KstqSpQbs_!!6000000007373-2-tps-680-912.png","detail":"A+B1+C+D"}],"imgLineSize":"4"}]}]},{"miniTitle":"标注（宽280/380）","list":[{"listChildren":[{"title":"A产品名称及描述","detail":"宽280卡片：标题长度建议11个汉字以内，描述30个汉字以内；宽380卡片：标题长度建议16个汉字以内，描述40个汉字以内；标题文字加粗20px，颜色＃181818；描述文字常规14px，颜色 # 999999; 卡片背景在大促情况下可定制设计","number":"01","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01UtPbCD1GgCXs52Tqi_!!6000000000651-2-tps-1594-368.png"}],"imgLineSize":"2"},{"title":"B1产品配置","detail":"宽280卡片;配置主标长度建议8个汉字以内，副标5个汉字以内；宽380卡片：配置主标长度建议12个汉字以内，副标8个汉字以内；主标常规16px，颜色＃181818；副标常规12px，颜色 # 999999 ;配置分栏可以卡片宽280（或380）二等分、三等分、四等分，文字左间距为20/15、20/15/10、20/15/15/10","number":"02","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01h0iLnw1L70BYmf15v_!!6000000001251-2-tps-1640-694.png"}],"imgLineSize":"2"},{"title":"B2产品优势","detail":"宽280产品优势/配置文字长度建议17个汉字以内;宽880产品优势/配置文字长度建议22个汉字以内;常规12px，颜色 # 999999 ","number":"03","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN013tBw0A1txqp33QjQU_!!6000000005969-2-tps-880-538.png"}],"imgLineSize":"2"},{"title":"C价格及营销标签","detail":"内容标签文字常规12px，颜色 # 999999，大促情况下可跟随卡片主色定制;省价/原价文字常规12px，内容标签12px，颜色 # 999999;价格除￥、.00字符，文字加粗30px，颜色 # FF6A00","number":"04","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01T0sxvf1ilWO7eMqpv_!!6000000004453-2-tps-2178-488.png"}]},{"title":"D1单一按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01TeR0ks28PF8BIn3ot_!!6000000007924-2-tps-640-160.png","detail":"Normal; fill:FF6A00 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01MUHQEz1OoSbvFXttN_!!6000000001752-2-tps-640-160.png","detail":"Hover; fill:FF791A 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i3/O1CN01B4ZIXD1eSVTy20yl4_!!6000000003870-2-tps-640-160.png","detail":"Click; fill:#E65F00 100%"},{"imgUrl":"https://img.alicdn.com/imgextra/i2/O1CN01Mcx8DC23h2RWwYnrl_!!6000000007286-2-tps-640-160.png","detail":"Disalbe; fill:#D8D8D8 100%"}],"number":"05","imgLineSize":"4"},{"title":"D2组合按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN01a0OQiT2049yKfS6OY_!!6000000006795-2-tps-806-1068.png"}],"number":"06","imgLineSize":"3"},{"title":"D2定制按钮","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01KQplQz1KqVva0ahRW_!!6000000001215-2-tps-880-640.png"}],"number":"07","imgLineSize":"3"},{"title":"E标签","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN0135whFd1qmuW0JGCxw_!!6000000005539-2-tps-1052-208.png"}],"number":"08","imgLineSize":"3"}]}]}]}]}}]},{"title":"设计协作Collaboration","children":[{"title":"设计文件命名","detail":{"title":"设计文件命名","content":[{"infoList":[{"list":[{"text":"在规范的工作流中，设计文件的规范化命名是一个非常细节，但能够极大提高自己和团队工作效率和幸福感的工作方式。"},{"text":"过去在视觉稿的设计中，经常为了省事，所有的图层都是随意乱放的，没有先后顺序和分组概念。如果实在看不下去了，就命名为一个个group，然后文件中就是一个个嵌套的“group”。就像下图一样：","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/25030/552cd36a6815eeb9.png#alt=552cd36a6815eeb9.png&width=300"}],"imgLineSize":"3"},{"text":"但实际上，是项目过程中、在组件沉淀时、在设计稿的修改中、在设计交接中、在和前端的沟通过程中，这种无序混乱的设计方式会浪费大量的时间。那我们要怎么规范化的给Sketch文件命名和整理文件图层呢？"},{"listChildren":[{"title":"Sketch文件规范化命名","detail":"你可以将你的文件命名为项目名_修改日期。比如在7月7日做的阿里云官网首页，它的命名就是阿里云官网首页_2017.07.07","number":"01"},{"title":"Sketch画板（Artboard）命名","detail":"少数设计师容易忽视给画板命名，这样会导致在规范导出时，读者很难快速找到对应页面。应该规范化的命名会按照页面的内容和逻辑顺序对页面进行排序","infoImgList":[{"imgUrl":"https://img.alicdn.com/imgextra/i4/O1CN01Xwo4GD1X8AaL1mSaU_!!6000000002878-2-tps-412-434.png"},{"imgUrl":"https://img.alicdn.com/imgextra/i1/O1CN013knAjO21nKeRqLmR4_!!6000000007029-2-tps-412-434.png"}],"number":"02","imgLineSize":"3"},{"title":"Sketch图层命名","detail":"Layer的命名，其实是涉及到单个Artboard的图层的整理方式。整理思路是，按照页面的内容先分几个大块，组成大的文件夹，然后再在每个文件夹下面将图层顺序排列好，按照图层内容进行命名。大文件夹和layer的命名尽量以文件夹内容和layer内容为依据，如下图导航的整理方式。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/25030/dba09ebfee4da5f9.png#alt=dba09ebfee4da5f9.png"}],"number":"03","imgLineSize":"2"},{"detail":"其中还涉及到icon的命名方式，icon最完整的命名方式为“模-类别-功能-状态”，比方说上图中的放大镜一样的search icon，它就可以用search_icon_input_gray，来表述，当然如果整个方案中只有一个这样的icon的话，觉得累赘也可以直接命名为icon_search。依情况而定，可以灵活变通。常用的模块、类别、状态如下图。","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/25030/7ccc1b91feca4f47.png#alt=7ccc1b91feca4f47.png"}],"imgLineSize":"2"},{"title":"Symbol组件的命名方式","detail":"symbol（组件）的出现大大提高了设计师使用sketch的效率，以前改一个颜色需要全局修改的任务现在一键全部搞定。没有使用过sketch的童鞋可以先去尝试一下。而symbol的命名如果规范好了，也会给自己带来很大的便利。一是在插入symbol的时候找起来特别方便，二是在导出图片的时候会自动分类成文件夹归纳好。如下图。","number":"04","infoImgList":[{"imgUrl":"https://private-alipayobjects.alipay.com/alipay-rmsdeploy-image/skylark/png/25030/af2936fc6b362a64.png#alt=af2936fc6b362a64.png"}],"imgLineSize":"2"},{"detail":"symbol在命名的时候会用“/”隔开去进行分类，比方说“icons/general/bringsensorclose”，意思就是在“icon”文件夹下建了一个子文件夹“general”，在“general”下有个icon名字叫bringsensorclose。导出后图片会按照这样的规则进行排列。并且在整理symbol的页面时，也需要遵循Artboard的文件的整理方式，即将同一个类别的symbol放在一起。"}]}]}]}]}}]}],"isShowEnType":"false","copyrightInfo":{"title":"阿里云设计中心","desc":"Alibaba Cloud Design 以“计算设计”为核心设计哲学，依托于阿里巴巴的设计愿景，让商业美而简单，让技术美而纯粹。","copyright":"Last updated 2021/05/06      Copyright © 2021 Alibaba Cloud Design","links":[{"title":"常用链接","list":[{"name":"阿里云官网","url":"https://www.aliyun.com/"},{"name":"阿里巴巴招聘","url":"https://talent.alibaba.com/"},{"name":"阿里巴巴设计","url":"https://www.alibabadesign.com/"}]},{"title":"相关资源","list":[{"name":"阿里云控制台设计","url":"https://xconsole.cloud/"},{"name":"阿里云品牌设计","url":"https://www.aliyun.com/about/branddesign"}]}]}}