3.2 设计手册

3.2.1主要内容类型

3.2.1.1导航

导航的作用包括：说明网站结构及当前位置，方便用户浏览；增加网站内链；增加页面关键词密度；

（1）顶部导航

• 一般展示网站完整结构。还包含企业logo、联系电话等功能元素。
• 效果图需包含展开折叠、鼠标悬浮效果、最大宽度/内容字数。（一级结构下，可以展示二级甚至三级内容）

（2）底部导航

• 一般只展示网站重点结构、及重点内容。
• 还包含完整企业名称、企业logo、地址、联系方式等。效果图需包含鼠标悬浮效果、最大宽度/内容字数。

（3）页面导航（子栏目较多）

一般用在页面左侧。效果图需包含鼠标悬浮效果、最大宽度/内容字数。 

（4）页面导航（子栏目不多）

一般用在页面中部。效果图需包含鼠标悬浮效果、最大宽度/内容字数。

（5）面包屑导航

一般在banner上方或下方；除首页外，每个页面都有；最后一级需高亮展示。 效果图需包含鼠标悬浮效果、最大宽度/内容字数。

3.2.1.2 搜索

一般在顶部导航内，主要元素包括搜索范围、搜索关键词等。效果图内需包含搜索框展开效果。

（1）文本

单页标题

用于单页内的版块标题，字体字号颜色需统一，间距需尽量一致，需确定最大宽度/字数溢出效果。

单页正文

用于单页正文容，字体、字号、颜色、行间距需统一。 （可以根据具体情况再做拆分，如主要内容、次要内容、链接内容等）

详情大标题

用于详情内容名称“标题”，一般位于详情头部，字体、字号、颜色、行间距需统一。

详情小标题

用于详情正文小节版块标题，位于详情页中部，字体、字号、颜色、行间距需统一。

详情正文

用于详情正文，字体、字号、颜色、行间距需统一。

（2）相关内容

是指可以在任何类型页面使用的、链接至模型详情页的内容;

可以展示的信息包括：详情标题、详情简介、发布时间、详情属性等。

效果图内：字体字号颜色需统一，间距需尽量一致，需确定最大宽度/字数溢出效果。需确定内容最大宽度/字数溢出效果。

按照详情有没有封面图，相关内容可以分为以下两种类型

封面图+详情标题

包括相关案例、相关解决方案、相关专题、相关配件、相关视频、相关图库、相关新闻、相关产品等。

特殊说明，相关图库：包含多个图片，需要和普通的封面图效果做区分。

特殊说明，相关视频：和普通封面图效果做区分，如展示播放按钮、视频时长等信息。

特殊说明，相关新闻：设计师可根据效果，采用有封面图和没有封面图两种形式。

只有详情标题

包括相关招聘、相关资料下载、相关问答等。其中

招聘的属性如：招聘人数、经验要求、截止时间等；

资料的属性如：资料格式、资料大小。

（3）列表内容

• 在模型列表和搜索列表展示的、链接至详情页的内容;

• 可以展示的信息包括：详情标题、详情简介、发布时间、属性等。

• 按照详情有没有封面图，列表内容也可以分为封面图+标题和仅标题两大类。具体类别及样式，一般和“相关内容”一样，也可以独立设计。

举例模型列表

举例搜索列表

3.2.1.3 翻页

用在模型列表和自定义列表页中。

设计效果需说明：当前页面最多显示多少页，超出如何展示；当前选中的页码效果

3.2.1.4 表单

表单标题和字段，可以根据页面内容自由确定；

效果图内：标题和字段类似的表单，设计效果尽量保持一致；表单字段，需要确定最大宽度和溢出效果；

除首页外，每个页面都有表单；

需要设计输入错误时提示效果（包括输入错误提示，必填项提示，提交后反馈提示）。

（1）普通表单

内容提交后无需在页面展示，关键因素只包括表单标题、字段、特殊效果提示。

（2）需验证手机号的表单

内容提交后需在页面展示的表单，包括评论、问答等，提交表单时需验证手机号

（3）评论表单

位于新闻详情页，专题详情页，图库详情页；提交评论需要输入姓名和内容，验证手机号；评论可回复；评论采用翻页形式展示全部。

（4）提交简历表单

位于招聘详情页，可以上传简历，支持不超过20MB的pdf文件。 

3.2.2 输出物规范

页面尺寸

• 首页宽度范围1920px以内（推荐尺寸：1200px、1440px、1680px）；
• 内页宽度固定为1200px。

icon

• 设计完成后整理所用图标并上传至iconfont ，查看图标制作上传教程；
• 通用icon可以使用通用主题包图标，查看五星云站主题包-通用icon
• 自己使用的icon需要自己上传至图标库，图标库命名规则为（五星主题包+名称）例：五星主题包-锅炉
• 审核通过后，icon图标库名称附在设计说明中。

交互

• 避免使用复杂交互，如弹窗；
• 移动端内容列表，使用翻页，不使用“下拉加载更多”；
• 避免使用可能引起误解的设计元素，如鼠标悬浮图片时显示加号等；
• 为表现按钮、链接、静态内容的差别，pc端按钮最好有滑动交互效果

内容

• 避免中英混排，中文主题包不使用无意义的纯填充的英文效果；
• 图片，不使用纯占位的图片，每个图片都有文字说明；
• 设计时考虑内容扩展，确定内容最佳宽度，以及超过宽度后的展示效果；
• 移动端模型列表，为展示完整内容，详情标题尽量使用双行展示；
• 每个页面包含1个h1标签，h1标签必须展示完整。

结构

• 页面宽度1920px，内容区域:1200px,（全屏设计首页可忽略此规范）;
• 底部带有五星云站技术支持图标；
• 面包屑导航:除首页外，每个页面都有面包屑导航，用来展示页面路径。

单页

不同内容区块间，使用有意义的短句标题，避免使用 【相关产品】等标题；

列表

• 可根据行业特点设计导航，如果分类数量少，比如新闻，可以使用单独设计的导航；
• 如果分类数量较多或无法确定，可使用侧栏导航，需支持三级分类；

详情

• 在产品详情、案例详情、解决方案详情页面中，如果内容过长，可增加锚点导航，保证用户了解当前内容主题、随时转化。

转化

• 转化元素包括：电话、在线客服（QQ、商务通）、其他信息（微信公众号、个人微信二维码）、表单。
• 设计师可以根据场景，设计转化元素。
• 内贸网站中，品牌>转化；外贸网站中，转化>品牌。

3.2.3 输出物及要求

• 格式：Mac系统输出sketch文件，Windows输出psd文件

• 图层和分组：命名和排列清晰易理解、方便查看

• 字体要求：Mac系统仅可使用PingFang SC系列；Windows系统仅可使用微软雅黑系列；图片（如Banner）中文字使用阿里巴巴普慧字体。

• 页面完整，符合行业说明文档的要求。

• 相同类型的内容，设计风格统一。

• 设计完成后整理所用图标并上传至iconfont

• 每个主题包包括四种色系效果。重点展示首页；其他页面涉及换色的图片，需单独切图展示。