腾讯的设计规范
VI设计参考-腾讯-QQVIP
Created byISUX Brand Center2016. 10QQ VIP Brand BookQQ 会员品牌书This guideline contains basic principles and examples that are needed to maintain the consistency of QQ VIP’s brand identity, from the primary logo, color, graphic device, imagery through to the typographic style. It shows you what these key elements are and how to apply them correctly and consistently throughout the various applications. It is essential that the key elements should be applied correctly and consistently. However, there is enough flexibility to always produce fresh, creative and differentiated communication pieces. It is not essential to use every element on every item of communication, but to deliver a strong brand message without compromising the brand identity.本规范手册包含的品牌基本原则和使用案例，通过基本标志、品牌色、图形设计以及图像排版风格，以保持“QQ 会员”的品牌视觉识别统一性。
腾讯设计规范
腾讯设计规范腾讯设计规范是腾讯公司为提升产品设计质量和用户体验而制定的一系列设计原则和规范。
这些规范包括了界面设计、交互设计、视觉设计、字体规范、颜色规范等方面的内容。
下面将分别介绍这些规范的主要内容。
界面设计规范：1. 界面风格统一：腾讯产品中的界面风格应该保持统一，让用户在不同产品间切换时能够轻松适应。
2. 界面简洁明了：界面上的元素应该精简，减少不必要的干扰，提高用户的操作效率。
3. 按钮一致性：按钮的位置、样式和交互逻辑应该保持一致，方便用户学习和使用。
4. 信息层次清晰：界面中的信息应该按照重要性和关联性进行合理的分组和展示，帮助用户快速获取需要的信息。
交互设计规范：1. 用户反馈及时：在用户进行操作后，系统应该及时给予反馈，告诉用户操作结果和进展情况。
2. 交互逻辑清晰：用户在使用产品时能够清晰地知道下一步该做什么，降低用户的学习成本。
3. 异常处理友好：当用户遇到错误或异常情况时，系统应该给予友好的提示和指导，帮助用户解决问题。
4. 操作便捷高效：用户在进行交互操作时，界面上的元素应该设计合理，方便用户的操作。
视觉设计规范：1. 色彩搭配协调：腾讯产品的色彩搭配应该符合品牌形象，同时保证界面的可读性和舒适性。
2. 图标及按钮设计：图标和按钮应该简洁明了，符合用户的直观认知，方便用户的操作。
3. 字体大小合适：界面上的文字应该具有合适的字体大小和行间距，确保用户能够舒适的阅读。
4. 视觉焦点突出：界面中的重点信息和操作元素应该通过颜色、大小等视觉手段来突出，引导用户关注。
字体规范：1. 主要字体：腾讯产品中的主要字体应该统一，具有良好的可读性和美观度。
2. 字体大小：不同场景下的字体大小应该根据用户需求和实际情况进行调整，确保用户能够清晰地阅读。
3. 字间距和行间距：腾讯产品中的字间距和行间距应该符合用户的习惯和阅读需求，提高阅读体验。
4. 字体颜色：腾讯产品中的字体颜色应该与背景色形成明显对比，确保文字的可读性。
微信公众平台运营规范
微信公众平台运营规范一、前言公众平台是一个为个人、企业、组织提供服务的社交媒体平台，为了维护平台的正常运营秩序，保障用户的合法权益，特制定本运营规范。
二、规范内容1、账号注册2、1账号注册需按照公众平台的指引进行操作，提供真实有效的注册信息。
3、2账号注册后需在24小时内完成认证，否则账号将被自动注销。
4、3账号名称应简洁明了，具有辨识度，不得侵犯他人权益。
5、内容发布6、1内容应积极向上，符合社会公德和法律法规。
7、2不得发布违法违纪、低俗、恶意攻击、虚假信息等不良内容。
8、3图片、视频等多媒体素材应清晰可辨，不侵犯他人版权。
9、4文章篇幅适中，排版清晰，避免出现错别字、语法错误等问题。
10、互动管理11、1对于用户的留言、评论等互动信息，应尽快回复，保持良好的互动氛围。
12、2不得对用户进行恶意攻击、辱骂等不良行为。
13、3对于涉及敏感话题的互动，应谨慎对待，避免引起不良反响。
14、账号管理15、1运营者应妥善保管账号密码，不得泄露给第三方。
16、2运营者应按照公众平台的规则进行操作，不得使用违规手段提升账号权重。
17、3运营者应定期对账号进行备份，避免意外情况导致数据丢失。
18、数据监控与分析19、1运营者应对发布的文章、互动信息等进行数据监控和分析，以便优化运营策略。
20、2数据监控和分析应遵循公众平台的规则和指引，不得使用非法手段获取数据。
21、违规处理22、1对于违反本规范的账号，公众平台将视情节轻重采取相应的处理措施，包括但不限于禁言、封号等。
23、2对于涉嫌违法的行为，将移交相关部门进行处理。
三、附则本运营规范由公众平台制定并解释，如有未尽事宜，以公众平台的最新规定为准。
微信公众平台运营规范_微信营销运营规范公众平台运营规范一、引言公众平台是生态系统中的重要组成部分，为企业、组织和个人提供了一个广阔的社交媒体营销平台。
为了维护公众平台的健康秩序，保障用户和企业的合法权益，特制定本运营规范。
腾讯设计规范
font-family:Helvetica,Arial,simsun;
各主要网站字体使用情况
五、文字的编排与设计
5．文字链接：
文字链接形式丌得超过3种颜色（觃定其中一种为主链接色）。 显性链接：
火龙果 整理
大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时丌显示下划线，光标经过时才显示下划线。
火龙果 整理
特殊情况 1 . 信息量戒图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
一、网页宽度
丌同浏觅器，丌同分辨率下网页第一屏最大可规区域：
• 页脚信息按照从上到下的排列次序为:
火龙果 整理
1、内部导航
2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ©” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO
• 各链接间隔统一使用”| ”
• 建议采用12号字， 禁止使用加粗字体
火龙果 整理
有效可视区域（单位：Px）
一 二 600 432（+168） 452（+148） 417(+183) 461(+139) 1024 1003（+21） 1003（+21） 1007(+17) 1005(+19) 768 600（+168） 620（+148） 585(+183) 629(+139) 1280 1259（+21） 1259（+21） 1263(+17) 1261(+19) 三 1024 856（+168） 876（+148） 841(+183) 885(+139)
2012年腾讯大湘网广告素材规范
腾讯大湘网2012年广告素材规范一、前言目的为规范大湘网客户端、网站平台上所有对外发布的网络广告的广告素材，确保大湘网平台对外发布广告更有据可依，同时符合腾讯用户体验感要求，特制定本规范。
二、适用范围1）本规范适用于大湘网所有客户端、网站平台上所有对外发布的网络广告。
2）所有广告代理商需自觉遵守本规范，依据本规范设计制作相关广告素材；3）总代公司媒介组需按照本规范对广告素材进行初审通过后再提交给大湘网，最终由大湘网广告接审部确定；三、名词解释规范中涉及名词，均作以下统一定义。
1）客户端：指迷你首页和tips冠名图片;2）广告：包含但不限于大湘网网站中的文字广告、图片广告、动画广告、视频广告等;3）信息内容：包含但不限于文字、图片、音频、视频等。
四、总体原则——符合国家广告法——符合社会道德标准以及腾讯企业文化；——避免对用户造成骚扰和困惑；——禁止产生任何欺骗用户的体验。
五、详细规范六、素材设计6. 1 整体要求1）不得出现过于直白的销售信息（如只有企业LOGO、电话和网址等，而不包含其他任何内容）；2）不得仅有文字而没有其他内容，文字尺寸不得超过广告尺寸的1/3；3）文字不能占满整个广告图片的区域，图片的四周都要留些空隙；4）广告语不得使用生僻词汇、新词、错字、语病、易产生歧义的字词等；广告语带有强烈恶搞意味；5）不得使用过多花哨字符，不得出现火星文、恶搞以及低俗词语；6）不得使用容易让用户误以为是腾讯大湘网自身产品的相关文字，如：每日焦点、辩论、热点阅读、推荐等7) 不得使用必看，必读，必点等绝对词语。
8）不得使用含有引导性质的文字，如：点击咨询、点击报名、点击预约、点击了解详情等9）不得使用色情、隐晦、暴露的图片；10）禁止词汇：任何情况下绝对不许出现露点、激凸、凸点、裙底、底裤、熟女、欲女、酥胸、乳沟、翘乳、巨胸、巨乳、双乳、露乳、露胸、乳房、波霸、爆乳、露臀、丰臀、翘臀、劈腿、湿身、泄春光、露春光、喷血、AV、女优、欲女、淫妇、淫娃、荡妇、手淫、意淫、性爱、奸淫、真空、淫荡、自慰等包含但不限于以上有涉性行为或人体性器官的词汇。
腾讯绩效考核_0
2、被考核者如对考核结果存有异议，有权在接到通知的10日之内，向集团人事部提出申诉（不接受口头申诉）；
3、集团人事部通过调查和协调，在10日之内，对申诉提出处理建议，并将事实认定结果和申诉处理意见反馈给申诉双方当事人和所在部门负责人或分管高管，并监督落实；
三、绩效管理执行综述
第六条考核对象
集团总部的考核对象为所有员工，总裁的考核方法由董事会根据经营目标与计划完成情况另行确定；
第七条考核周期
集团总部的考核周期分为三类，即：
1、月度考核：适用于集团总部所有员工，一般于次月10日前完成。
2、季度考核：适用于集团总部所有员工，于每年1、4、7、10月的15日前完成上季考核工作。
3.1.5行为指标
行为指标由与员工的KPi密切相关的一组或若干组行为要项及工作标准组成。
3.2绩效指标确定原则
3.2.1确定目标责任书时，不得出现重复列项。在同一级组织中，同类指标之间存在直接因果关系时，只取上一层的指标。
3.2.4绩效指标的内容、衡量方法和评价方法必须客观明确。
3.3绩效指标确定的一般程序
3、绩效管理必须建立制度化、规范化的双向沟通机制。各部门负责人作为人事管理第一责任人，有帮助下属提升能力与完成管理任务的责任。
4、在绩效管理中，突出绩效考核对公司绩效改进的关键作用。绩效考核以KPi为基础，以业绩衡量标准/工作结果对员工行为结果进行考核；绩效考核以目标为导向，依靠绩效目标的牵引和拉动促使员工实现绩效目标；绩效考核强调主管和员工的共同参与，强调沟通和绩效辅导。
3、目标在公司经营情况发生调整时，可根据实际情况进行修订。
篇二：腾讯公司绩效管理制度(2)
QQ设计规范
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。 • 对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。
二、文本框设计规范
1.基础规范
• 文本框 a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于130个像素 高度不得低于18个像素 • 帮助信息 a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输入关键词”这样的提示不应出现.
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、页面修饰
1。简单，不需要繁杂的修饰
一、页面修饰
3. 透明效果
二、个性皮肤
QQ首页个性皮肤：
二、个性皮肤
其他产品个性表现：
建议使用：
五、文字的编排
深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
表情包制作的规范说明-腾讯
2013腾讯原创表情设计大赛作品设计制作规范一、原创表情设计要求1.设计1个或1组原创表情形象（1组原创表情形象的角色总数不超过3个），形象创造的风格不限，但要求具有鲜明的性格、固定的色彩搭配。
2.基于上述原创形象创作1套表情作品——1)每套表情作品应包括至少20个表情；2)其中10个表情需表达指定内容：“笑”、“哭”、“赞”、“汗”、“怒”、“问好”、“道别”、“亲亲”、“疑问”、“抠鼻”；3)除上述指定内容外，其余表情的内容由作者自由发挥创意；4)整套表情可以为动态，也可以为静态，但动态、静态表情不可混合出现在同1套作品中。
二、表情制作规范注：以下是提交到腾讯原创表情平台的所有表情作品需遵守的制作规范，请仔细阅读。
1.表情尺寸规范（每个表情都需包括以下2种尺寸）1)手机端表情尺寸为200*200px；2)PC端表情尺寸为100*100px。
2.表情格式规范1)动态表情格式为GIF，每个表情大小不超过30k；2)静态表情格式为PNG_24，每个表情大小不超过20k。
3.表情背景规范1)动、静态表情均为透明背景；2)背景需尽量简单，若不得不出现复杂背景，应注意色块明朗，并避免方型背景；3)区分表情与背景时，使用不规则线框，尽量避免主体内容被表情边框直线切割。
4.表情线条规范1)表情线条需尽量粗细均匀、干净连贯、避免渐变；2)表情的最外延需有完整的白色描边（#ffffff），100*100px的表情外延需2-4px描边，200*200px表情外延需3-5px描边。
5.表情内容规范1)表情内容需准确表达情绪、动作或意图，必要时可搭配适量文字辅助表意；2)表情的配色方案不宜过多，应尽量采用纯色块填充，可配搭高光和阴影色块表达光影关系，避免大面积渐变；3)GIF格式动态表情中的人物动作应为2-4个连续、流畅的动作，播放时长尽量限制在3秒内，由于表情详情页默认抓取GIF第一帧作为预览图，故GIF第一帧内容不能为空白。
产品经理必知：UED设计流程与原则
产品经理必知：UED设计流程与原则UED设计流程在各个公司之间可能存在不同，国内的设计师在知乎社区上讨论了各自公司(包括腾讯、百度等)的UED设计原则、流程等，其中的经验值得读者借鉴。
来自腾讯的交互设计师eviliu强调设计流程主要考虑两方面的问题：一是设计原则从何而来，二是如何配合设计的上下游团队。
就设计原则来说，从四个方面进行了阐述：始终将用户体验放在第一位——在设计流程中将用户体验融入其中，将其贯穿于设计的始末，使用户体验的结论能够直接影响到设计的方向。
同时设计过程中通过展开脑暴、竞品分析、焦点小组等方式对设计需求进行深入的挖掘，需求从何而来，为什么会有这样的需求，准确把握设计的方向。
细化分工——在设计流程中，将设计任务分解为用研、交互、视觉，各个角色职责明确并相互配合，在各领域有专业的表现。
引入专家设计师和项目PM——专家设计师通过设计评审，将自己的设计理念传达给设计师，引导设计方向，把控整体项目的质量。
项目PM对项目进度、需求任务、设计人力的把控，保证设计工作有条不紊的展开，并最终完成项目目标。
设计规范的建立——设计项目完成后，设计师对设计内容进行规范文件的梳理，保证设计理念的沉淀以及风格的统一。
就“如何配合设计的上下游团队”，eviliu认为应该从以下几个方面来采取措施：参与产品的前期规划——把握产品的规划与目标是后期设计工作展开的重要依据。
产品与项目PM接洽，需求排期——通过对设计需求进行排期配合产品开发的节奏，保证项目的顺畅。
体验走查和可用性测试——设计完成，跟进开发实现，实现输出中，进行体验走查和可用性测试，保证设计实现的质量和是否否和用户的预期。
除此之外，流程的实施也是必须要重点关注的：有效的管理工具——好的管理工具能够帮助团队规范化管理。
我们为自己量身打造了一系列工具来提高设计管理效率，如Prowork工具，能提供项目流程、工作任务、文档等一系列线上管理。
还有TAPD、UID等一系列工具。
腾讯编码规范
腾讯集团管理标准GL/YF 014-2007V1.0-L1C++编码规范2007-10-25发布2007-10-25实施———————————————————————————————————腾讯集团发布前言本标准系公司首次发布实施，主要针对公司所有软件产品源代码范围的C和C++编码风格，对C和C++文件的版式、注释、标识符命名、可读性、变量、结构、函数和过程等方面均作出规范，以保障公司项目代码的易维护性和编码安全性。
本标准由研发管理部、即时通信产品部共同制定。
本标准主要起草人：Junjun(张莉珺)、qingming(王清明)、tracy(周银燕)本标准主要审核人：anwenfeng(冯文信)、 paulinesong(宋虹漫)、ericlin（林松）、stevezheng(郑全战) 、echouzhou(周立)、polo(陈广域)、leon（郭凯天）本标准批准人：jeffxiong(熊明华) 、charles(陈一丹)、tony（张志东）、ponyma（马化腾）本标准首次发布日期：2007年10月25日本标准发送部门：公司各部门C++编码规范1 目的为形成公司统一的C++编码风格，以保障公司项目代码的易维护性和编码安全性，特制定本规范。
2 适用范围本标准适用于腾讯集团（含分公司等各级分支机构）所有使用C和C++作为开发语言的软件产品。
本标准中“腾讯集团”是指腾讯控股有限公司、其附属公司、及为会计而综合入账的公司，包括但不限于腾讯控股有限公司、深圳市腾讯计算机系统有限公司、腾讯科技（深圳）有限公司、腾讯科技（北京）有限公司、深圳市世纪凯旋科技有限公司、时代朝阳科技（深圳）有限公司、腾讯数码（深圳）有限公司、深圳市财付通科技有限公司。
3 总体原则所有使用C和C++作为开发语言的软件产品都须遵照本规范的内容进行编码。
4 程序的版式4.1规则：程序块要采用缩进风格编写，缩进的空格数为4个。
说明：由开发工具自动生成的代码可能不一致，但如果开发工具可以配置，则应该统一配置缩进为4个空格。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。
六、整齐的概念和应用
类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。
火龙果 整理
屏幕
IE6.0 IE7.0 Firefox2.0 Opera9.0
800 779（+21） 779（+21） 783(+17) 781(+19)
说明： 比如1024×768下IE7.0的可视面积是（1024-21）×（768-148） 综合上面所有的数据，结论如下： 最保守的一屏大小是IE6下800×600：779×432 最广泛使用的一屏大小是IE6下1024×768 ：1003×600
火龙果 整理
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，与腾讯网首页统一尺寸。
• 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO
•同一个web产品中搜索的位置和表现形式尽量保持一致
二、搜索框设计规范
2. 应用场景
火龙果 整理
强表现方式：
• 加大搜索框的显示，输入框内采用大字体（14号） • 突出搜索button的表现，更直观，更有点击欲
• 位置放在页头的中间并明显标示
五、文字的编排与设计
Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:
火龙果 整理
应用案例
五、文字的编排与设计
CSS书写规范
火龙果 整理
火龙果 整理
因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。
建议使用：
五、文字的编排与设计
深蓝色
火龙果 整理
当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有
2．文字颜色： • 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色 • 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。
五、文字的编排与设计
• 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。 灰黑色 当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。 当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。
火龙果 整理
• 不要使用按钮作长句广告： 错误案例：
• 腾讯网避免出现企鹅形象广告
可参考《广告、营销消息与营销邮件体验规范》
五、文字的编排与设计
总体原则：提高文字的辨识性和页面的易读性
1. 文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。
火龙果 整理
Web设计规范
CDC WUI 2008/10/29
V1.3
目录
一、 基础规范
01 网页宽度
02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
六、整齐的概念和应用
• “豆腐块”四周应该空留均匀适当的间隔
火龙果 整理
七、模块化表现
设计准则：同一个网站表现： • 单线 • 3-5个像素的圆角 • 内边修饰 ……..
火龙果 整理
八、页脚信息
Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐 缺点:大写I与小写L无法区分 下划线:
火龙果 整理
Tahoma字体 优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L 缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐 下划线:
font-family:Helvetica,Arial,simsun;
各主要网站字体使用情况
五、文字的编排与设计
5．文字链接：
文字链接形式不得超过3种颜色（规定其中一种为主链接色）。 显性链接：
火龙果 整理
大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。
火龙果 整理
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
一、网页宽度
不同浏览器，不同分辨率下网页第一屏最大可视区域：
英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近 系统自带并能与汉字匹配的点阵字比较:
五、文字的编排与设计
• 搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标，而不能采用其他元素。
二、搜索框设计规范
c. 搜索button规范文字为“搜索”避免采用其他描述。比如：
火龙果 整理
d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况： 文字形式： 搭配使用： 图形形式：
• 对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。
六、整齐的概念和应用
• 首页上摘要无须空格。
火龙果 整理
内容正文应该空两格。
• 页脚信息按照从上到下的排列次序为:
火龙果 整理
1、内部导航
2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ©” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO
• 各链接间隔统一使用”| ”
• 建议采用12号字， 禁止使用加粗字体
一、页面修饰
3. 透明效果
火龙果 整理
二、个性皮肤
QQ首页个性皮肤：
火龙果 整理
二、个性皮肤
其他产品个性表现：
火龙果 整理
二、个性皮肤
Hummer个性皮肤：
火龙果 整理
二、个性皮肤
QQPlay个性皮肤：
• 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。
• 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示
三、页码设计规范
目录
一、 基础规范
01 网页宽度
02 搜索框设计规范 • 基础规范 • 应用场景 03 页码设计规范 • 普通页码翻页 • 小型页码翻页 04 广告设计规范 05 文字的编排与设计 • 文字大小 • 文字颜色 • 文字行距 • 英文字体规范 • 文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息
火龙果 整理
有效可视区域（单位：Px）
一 二 600 432（+168） 452（+148） 417(+183) 461(+139) 1024 1003（+21） 1003（+21） 1007(+17) 1005(+19) 768 600（+168） 620（+148） 585(+183) 629(+139) 1280 1259（+21） 1259（+21） 1263(+17) 1261(+19) 三 1024 856（+168） 876（+148） 841(+183) 885(+139)
二、搜索框设计规范
1.基础规范
• 文本框 a. 搜索框文本框的长度应适中，至少应提供显示10个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于130个像素 高度不得低于18个像素 • 帮助信息
火龙果 整理
a. 帮助信息一般包括三块内容：限定标签提示、标示性文字、热门关键词提示等， b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字” 可设置灰色(#cccccc)显示，点击输入框后提示文字消失。提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有 真正帮助的提示，”请输入关键词”这样的提示不应出现.
2. 小型页码翻页的表现方法： • 链接页码为简明独立，不加任何修饰的数字形式 • 链接颜色由当前页面设计决定 • 数字大小建议为12-14px ,以易于点击为原则.