文字类定制工具说明-20100511.pdfVIP

布丁网定制工具 文字类产品说明 2010年5月11日 第一版 说明文档撰写：牛磊 UI设计：牛磊 建议使用Flex开发 适用于：文字类定制工具中文简体、繁体版、英文模板使用 第一章 笔类定制工具 第一部分 产品布局 产品布局图示： ①产品基本信息区 ②辅助连接区 ④定制文字输入区 ⑦加入购物车按钮 ⑥效果预览按钮 ③刻字位置选择区 ⑤雕刻效果展示区 一、整体布局简述（位置、尺寸） 1、页头部分： A、页头高52px，宽100%；页头底色为不规则渐变见切图； B、辅助连接区②底框宽172px，高25px；距页面最上方显示，右侧距页头最右端15px； C、产品基本信息区①底框高25px；保持最右端距辅助链接区②15px； D、LOGO左端距页头最左端15px，与整个页头区域水平居中。 2、页头下方定制操作部分： A、整个定制操作去部分底图（见切图）平铺页面，宽、高均100%； B、刻字位置选择区③:宽180px，高300px；最上边距页头最下边15px,最左边距页面左侧 15px；底色为#ffffff；50%透明； C、定制文字输入区④：宽450px，高105px；最上边距页头最下边15px，最左边距刻字位置 选择区③右侧20px；50%透明； D、雕刻效果展示区⑤：宽450px，高175px；最上边距定制文字输入区④最下边20px，最左 边距刻字位置选择区③右侧20px；50%透明； E、效果预览按钮⑥：宽135px，高40px；最左边距雕刻效果展示区⑤20px，与雕刻效果展示 区⑤水平居中对齐； F、加入购物车按钮⑦：宽153px，高40px；最左边距定制文字输入区④20px，定制文字输入 区④水平居中对齐。 第二部分 各区域详细说明 一、产品基本信息区① 内容：产品基本信息区显示当前编辑产品的 1、产品名称；2、价格；3；详情按钮 功能： 1、价格：显示实际销售价格； 2、详情：点击详情，新开窗口，连接至当前产品详细介绍页。 样式： 1、底框：底色渐变，从上至下其实色为#6B6C6F结束色为#46474A；底框左右两端距文字左 右两端分别为10px；底框宽随文本长度变化。 2、文本：文本及超链颜色为#ffffff；超链移入颜色为#FF3300；超链点击后颜色为 #ffffff。 二、辅助链接区② 内容：辅助链接区包含 1、使用说明连接；2、意见反馈连接。 功能： 1、使用说明：点击后新开窗口，连接至当前所在定制工具帮助页面，需针对配置； 2、意见反馈：点击后新开窗口，连接至当前所在定制工具的意见反馈分类页面（此页面详 见意见反馈产品说明文档），需针对配置。 样式： 1、底框：底色为#151518；底框左右两端距文字左右两端分别为10px；底框正中用宽1px， 高12px，灰色#999999竖线分割； 2、文本和图标： 分割线左半边图标大小为宽12px，高16px；图标右侧距文字“使用说明”左侧3px；图标 和文字在边框左侧与分割线之间垂直和水平居中； 分割线右半边图标大小为宽16px，高16px；图标右侧距文字“意见反馈”左侧3px；图标 和文字在边框右侧与分割线之间垂直和水平居中； 文本超链颜色为#ffffff；超链移入颜色为#FF3300；超链点击后颜色为#ffffff。 三、刻字位置选择区③ 内容和功能： 1、此区域用于选择用户希望的刻字位置，笔类产 品的笔帽雕刻分为3个位置，分别为：笔夹正 背面居中（默认位置）、笔夹左侧居中、笔夹 右侧居中； 2、选择位置：鼠标点击三个位置中的其中一个位 置即选择在该位置上进行定制设计