网站网店装修论文

黄河水利职业技术学院毕业设计 论文 共 14 页 第 1 页 和茶网和茶网 装修 美化设计装修 美化设计 作者姓名 王旭涛 黄河水利职业技术学院 河南 开封 475003 摘要 摘要 正所谓三分长相七分打扮 网店的页面就像是附着了店主灵魂的销售员 网店的美化如同实体店的装修一样 让买家从视觉上和心理上感觉到店主对店铺的用 心 并且能够最大限度的提升店铺的形象 有利于网店品牌的形成 提高游览量 增 加顾客在你的网店停留时间 漂亮恰当的网店装修 给顾客带来美感 顾客浏览网页 时不易疲劳 自然顾客会细心察看你的网页 好的商品在诱人的装饰品的衬托下 会 使人更加不愿意拒绝 有利于促进成交 关键词 关键词 网店装饰 茶叶商城 店铺美化 一 课题分析以及准备工作 一 本课题设计分析 和茶网 电子商务交易平台是由福建和茶网络科技有限公司搭建 的各类优质茶产品专业交易平台 整合全国各个名优茶产地的优质茶产品 面向全球客户进行销售 该平台现已成为全球用户购买茶叶 茶具等茶产 品的首选平台 随着网络市场的细化 出现了越来越多的非综合类商城 如 京东商城 梦芭莎服装 凡客商城 等 和茶网拥有自己独特 的电子商城 但是作为 茶叶 的销售者 商城没有应有的独特性 这 在竞争激烈的电子商务时代是很不利的 所以需要自己独特的风格 在这 个背景下 我决定在现有的 和茶网 基础上对其装饰 美化 二 使用软件 Photoshop 主要处理以像素所构成的数字图像 使用其众多的编修与绘 图工具 可以更有效的进行图片编辑工作 EPSnap 是一个完全免费并且功能强大的绿色屏幕抓图工具 使用简 单方便 提供全屏捕捉 窗口或控件捕捉 扩展窗口捕捉 区域捕捉 滚 动窗口捕捉 细小元素捕捉 超长网页捕捉 特殊捕捉 视频或游戏 等 强大功能 支持使用 鼠标手势或快捷键启动捕捉 支持 自动保存 可选 择多种保存格式 黄河水利职业技术学院毕业设计 论文 共 14 页 第 2 页 二 对原网页的分析 无论装饰 美化什么样网页 都必须要深刻分析了解原来网页的优缺点 只有这样才能保证不偏离主题 附原网页 图 1 原网页全图 图 1 一 原网页不足之处 1 导航 原网页导航图 2 黄河水利职业技术学院毕业设计 论文 共 14 页 第 3 页 首先 和茶网 是中国最大的出售茶叶的网站之一 本应品牌齐全 内 容丰富 而本网站只将中国出名的茶叶放到导航栏上面 没有做到分类齐全 让顾客浏览困难 不能有效的节省时间 并且茶小类与大类放置一块 所以 本模块必须改正 本人查阅资料 该区域可以按照茶叶颜色的分类填写 如 绿茶 红茶 等 附图 2 2 热门分类 原网页提示图 3 在原网页中 该模块的功能不亚于导航栏 个人认为这样摆放不仅浪费 了宝贵的首页上部空间 而且还没有起到应有的作用 因为导航栏上面展示 了中国几大品牌的茶叶 而这个热门分类里面虽然对茶有了一个分类 但是 没有和导航栏的内容起到一个很好的反应 反而倒是盖过了导航栏的某些功 能 所以本区域也必须改正 不过本模块的解释作用还是很好的一部分 有 助于导购 可以留下来 个人建议 改而不去 附图 3 3 banner 细节处理不当 黄河水利职业技术学院毕业设计 论文 共 14 页 第 4 页 原网页 banner 图 4 可以看出 在不同分辨率的电脑上面显示的效果是不一样的 所以在制 作的时候必须注意细节 避免造成访问者不便 附图 4 4 首页篇幅太长 可以看出基本所有信息都可以在首页上面得到 每个区域的销售信息都 展示在了首页 访问者一般就不会再去浏览其他页面 并且过长的页面还都 是用图片填充着 这样会严重影响网页打开速度 建议简短首页面 附图 1 5 和茶相关信息 原网页信息图 5 这类信息出现在网上商城里面是十分不应该的 并且还占据在首页位置 所以直接去掉即可 附图 5 二 原网页可取之处 1 会员登录 购买物品信息栏 黄河水利职业技术学院毕业设计 论文 共 14 页 第 5 页 原网页会员信息图 6 无论是哪一个 B2C 的网站 会员以及选中物品信息都不会占据太多的空 间 在这一点本网站做法很值得提倡 所以这一块不用较大改动 附图 6 2 搜索模块以及热门商品 原网页搜索图 7 这一模块有助于访问者快速找到自己需要的商品以及相关帮助 并且热 门提示环节更能吸引浏览者的眼光 本区域不用太大变更 如果整体需要的 话 把本模块更换位置即可 不能去掉 附图 7 3 商品活动模块 原网页商品图 8 这个地方时本网站亮点之一 这样做的好处就是大大节省了宝贵的首页 空间 不仅新商品罗列清楚 还将活动展示在访问者面前 本区域也不需要 更改 稍微修改一下 UI 即可 附图 8 4 指引模块 原网页指引图 9 黄河水利职业技术学院毕业设计 论文 共 14 页 第 6 页 在原网页中 此模块与上面重复出现 但是在装饰的时侯 这个小模块 可以起到很大的帮助 可以发挥很大的作用 附图 9 三 构思设计及制定装饰步骤 一 设计的指导思想 1 取其精华 去其糟粕 这是本次设计中最重要的一点思想 在这个思想的指导下我仔细研究了 原网站 将原网站的优缺点分析透彻 一一罗列出来进行改造与继承 2 博览群网 择善采之 浏览众多网站 将其他网站优点一一采纳 将这些优点合理运用在一块 不能出现 买椟还珠 的情况 花哨的界面脱离本体 3 贯穿主题 突出重点 内容紧扣设计主题 茶知识 茶文化等全部围绕主题走 颜色紧扣设计 主题 合理运用色彩搭配 设计简约大气 突出品牌感 合理优化 UI 使 界面美观 做好贯穿主题带来的结果就是突出重点 将与其他网购网站区别 开来 4 妥当工具 按照计划 预先善其事 必先利其器 依据开题报告的计划 有计划有顺序的进行 设计 二 美化网页的步骤 1 明确主题 紧扣所装饰网站的主题 否则一切都是白做 网站主题就是网站所包含 内容的一个客观体现 2 搜集材料 明确了网站的主题以后 就要围绕主题搜集材料 当然了 搜集的范围 要广一点 不能太局限了 3 规划网页 对一个已有网站的装饰 首先要了解原网站哪里不合理 哪里需要更改 然后需要了解相关类型成功的网站 选择成功网站亮点 结合需要装饰网站 黄河水利职业技术学院毕业设计 论文 共 14 页 第 7 页 主题 统一规划 一个网站装饰设计得成功与否 很大程度上取决于上面三 者的合理搭配 网站规划包含的内容很多 如网站的结构 栏目的设置 网 站的风格 颜色搭配 版面布局 文字图片的运用等 只有在制作网页之前 把这些方面都考虑到了 制作出来的网页才能有个性 有特色 具有吸引力 4 制作网页 依据步骤对原来网站进行装饰 合理结合多个工具 结合开题报告分层 次合理的进行制作 三 装饰网页的要点 1 页面内容翔实 网络是虚拟的 而网站往往体现的是现实世界中的一个实体 如公司或 个人 如何把这些实体的元素通过虚拟的网络空间来展现出来 并且引起浏 览者的注意呢 只有那些极富特色 内容翔实 浏览顺畅 效果独特的网页 才能使人驻足观看 及使用 功能和服务容于网站之中 从而达到网站的特 定目的 2 视觉效果新颖 网页形象要不落俗套 要重点突出一个 新 字 这个原则要求我们要 结合自身的实际情况创作出一个独特的网站 我们在设计网页时 要尽量做 到 少 而 精 又必须突出 新 把内容的独特的元素 如名称 标 志 标准字体 标准色等等 通过这些元素的合理应用 来实现网站形象与 个性的塑造提高视觉效果 3 栏目布局明确 一个网站有很多的页面和主题 链接 这就需要注意其流畅的导向性 要做到使页面合理流畅 环环相扣 可信安全 这几点是一个优秀网站的精 神所在 也是吸引力的来源 强调要注意把网站内容的层次性和空间性突出 显示出来 使人一眼就能看出你的网站重点突出 结构分明 4 特殊字体慎用 在 photoshop 中虽然可以使用任意字体 但是当页面上传至网络空间中 文字是非图片形式可编辑的时候 你不能预测你的访问者在他们的计算机上 将看到什么 也许在你的计算机里看起来相当好的网页 在另一个不同的平 台上看起来可能就会变形走样 所以要避免你所选择的字体在访问者的计算 黄河水利职业技术学院毕业设计 论文 共 14 页 第 8 页 机上不能显示 特殊字体要慎用 四 美化效果及构思实现 一 最终效果 最终效果图基调紧扣原网站 茶 的主题 将主色调设计成 绿 淡绿 色 部分区域会是叶黄色 一些促销区域使用醒目的红色 为了使浏览者看 着舒服 商品部分保持了白色 米黄色 功能模块部分按照计划都摆放到了指定位置 并在制作的过程中增添了 许多新奇小饰品 最终效果图如下 黄河水利职业技术学院毕业设计 论文 共 14 页 第 9 页 最终效果图 10 二 各功能模块实现 1 会员模块 黄河水利职业技术学院毕业设计 论文 共 14 页 第 10 页 效果图会员 11 本网站是购物类型的网站 会员功能没有必要占据较大的篇幅 只需要 简单但是功能必须要强大 我将会员板块放到了网页最顶端 这样既节省空 间 又能起到一目了然的作用 新网叶主题是绿色 为了起到醒目的作用 我将字体设为黑色 文中彩色 CD 是网站中自动播放音乐的 模块中购物车 是下载 其余部分均由个人完成 其中竖线 丨 是搜狗打字法输入 2 导航模块 效果图导航图 12 1 导航栏分为 10 个子栏目 分别是首页 绿茶 红茶 白茶 黑茶 花茶 乌龙茶 特色茶 精品茶具 进口红酒 2 世界茶种主要分为这几大类 之所以改变了原网站将中国知名茶 品放到了这个地方 是因为这样做的好处就是层次明了 结构清晰 避免了 给人重复雷同的感觉 3 版模块特效使鼠标放在上面会稍微改变形状 做法是 建立新图 层 a 使其颜色与导航栏下部一样 其他鼠标没有触及的到地方均是图层 b 两种图层都经过蒙版化处理 然后再建立新图层输入导航标题 c 就完 成了导航上面的部分 下面几点就是利用 层 比较简单就不一一叙述 3 滚动图片模块 1 展示部分 本模块主要使用与各大品牌的商品促销及重大活动 共 5 张滚动图片 这个模块有效地起到提示作用 能让访问者率先点击该图片进入相关活动专 区 另外在一些重大活动的时候还可以更换成活动的内容 限于篇幅仅举例 黄河水利职业技术学院毕业设计 论文 共 14 页 第 11 页 一张图片 本图片从原网站截图获得 效果商品图 13 2 提示部分 除此之外本模块还有一个小提示板块 该模块主要功能是对访问者进行 详解 解释 导航 模块里面出现的几种茶叶 能够让顾客能准确的找到商 品 节省顾客时间 效果导购图 14 做法如下 首先建立图层 a 选取颜色 R241 G241 B241 小三角部分 为网上素材 右上角红色区域利用 b 多次处理可得到 汉字均为输入 c 右 边 更多 字样系原网页所截取 黄河水利职业技术学院毕业设计 论文 共 14 页 第 12 页 4 商品销售模块 去除了原网站将商品集中摆放在首页的缺点 并结合了原网站在商品区 域的可取之处 本模块改动成分页式 只将新产品 热销产品 特价产品 清仓产品放到醒目位置 这些商品附带链接 顾客点击之后会自动进入到相 关区域 这样不仅可以节省访问速度 还可以优化网站 以避免出现人多时 打不开页面的情况 效果商品图 15 效果商品图 16 本模块中用图均由原网页截取获得 其中鼠标特效部分与上面一样 首先建 黄河水利职业技术学院毕业设计 论文 共 14 页 第 13 页 立层 a 中间用到 b c d 等知识 5 帮助模块 效果帮助图 17 作为网上商城 除了商品不能使顾客满意而导致销量不高的重要原因外 顾客不知道怎么操作是销量不高的首要原因 所以本模块对网购新手有很大 的帮助作用 本模块还有客服 可以更好的提供帮助 本模块除了色调不同 之外 其他的基本与原网站相同 图中汉字经过处理 过程如下 建立文字 图层 a 对文字使用 投影 先关知识 具体数据 b 既可以得到图中效果 四 美化效果评述 看到最终效果图的那一刻 自己还是挺自豪的 辛苦了那么多天 经过 多次与老师 同学的交流 删改多次最终有了现在的成果 期间犯了很多错 误当然同样有很多收获 下面是我设计期间所犯错误的总结与收获 一 总结 1 了解原网站 不管去改变什么事情 都需要对原来的事物了解的非常清楚 否则盲目 黄河水利职业技术学院毕业设计 论文 共 14 页 第 14 页 开展活动 只会南辕北辙 对于本次课题刚开始我就犯了这样的错误 后来 通过与指导老师的交流 我改正了这个错误 在深刻了解原网站的基础上我 得知我需要一个什么样的效果 以及在这个目标下我寻找类似网站的优点 以及所需要的素材 2 寻找材料 寻找材料的时候不能把眼光放得太窄 刚开始我只把眼光放到 茶叶 这个行业的网站中 但是几天我发现根本就没有找到用处很大的信息 后来 我研究了 梦芭莎 凡客 等的网站 并从中得到启发 3 合理排版 首页上面需要什么样的信息 什么信息不能出现在首页上面 这个问题 原来没有考虑过 到着手做效果图的时候才发现这是个大问题 合理的排版 会让人产生清爽的感觉 可以达到快速浏览的效果 但缺乏合理结构的首页 会使浏览非常困难 会导致流量的下降 这个过程中我访问了大量的 B2C 网站 力求做到最大优化 4 重点突出 在数以千计万计的网站中怎样才能让访问者记住你的网站 网站的个性 是必不可缺少的元素 真正的个性是网站主题的突出 本网站是 茶叶 必须依据这个特点将主题发挥的淋漓尽致 切记出现服装 电器 综合一个 基调 5 注重细节 在用 PS 设计的过程中 不可避免出现某些小瑕疵 但是如果不注意的 话 会让访问者对网站产生非常不好的印象 所以必须仔细观察 做到完美 6 换位思考 在制作的过程中 我经常会让身边的同学观察效果图 力求做到从同 访问者的眼中观察网站 自己作为设计者 我自己也经常站在旁观者的角度 出发 揣摩该网站 从浏览者的角度思考网页的所有元素 力求最大限度的 改良网页元素以适合浏览 二 收获 1 在整