规划“学设计吧”电子商务网站.pptx

规划“学设计吧”网站 SAMPLE 项目三：线框图的应用——规划一个电商网站 任务描述——分析电子商务网站结构 1 技术引进——完成电子商务网站线框图 2 新手试炼——电子商务网站会员页面设计 3 4 规划“学设计吧”电子商务网站 任务实施——设计电子商务网站 1 任务描述——分析电子商务网站结构 ABOUT ME 该项目为视频教程网站，用户注册为会员后，通过付费的方式购买单节课程或成为网站VIP观看全部视频。按照网站内容，将网站分为首页、在线课程、书籍光盘和图文教程4个栏目， ABOUT ME 首页中主要用来显示必威体育精装版发布或指定的视频、书籍和教程。让浏览者第一时间看到网站必威体育精装版更新和最想推广的内容。同时用户可以通过首页中的各种链接，快速到达想要了解的内容。 首页 ABOUT ME 该页面中采用罗列的方式，展示网站中的各类在线课程。通过建立分类链接，便于用户查找想要观看的课程视频。 在线课程 ABOUT ME 该页面与在线课程表现形式一致，采用罗列的方式将图书展示给用户。为了便于查找，将书籍按照行业和软件进行了分类。 书籍光盘 ABOUT ME 该页面主要以图片和文字的形式向用户展示设计相关知识。同样也对相关内容进行了分类，用户可以以行业和软件进行查找。 图文教程 2 技术引进——完成电子商务网站线框图 在开始设计制作页面前，通常会先绘制网站原型的线框图，帮助设计师平衡保真度和速度。绘制的时候不用在意细节，一定要表达出设计思想，不要漏掉任何重要的部分。 首页面内容较多，包含大量的图片和文字。为了保证各功能的独立性，还要便于用户浏览，页面采用了中轴线的布局方式，将图形、文字以水平或垂直的方式排列，给人稳定、平静、含蓄的感觉。 3 任务实施——设计电子商务网站 ABOUT ME 该页面是一个培训类网站，故可以选择代表科技的蓝色和代表教育的绿色作为主色，但考虑网站中的视频教程多为互联网类的教材，所以排除了绿色，选择了蓝色作为主色。但蓝色颜色过于深沉，与设计行业多姿多彩的寓意相违背，所以提高蓝色的明度，选择较为活泼清新的青色作为网站的主色， 确定主色 ABOUT ME 主色确定后，接下来确定辅色。通常情况可以选择同色搭配、临色搭配和补色搭配三种方式。 同色搭配可以实现风格整体风格一致的效果，但对比不强烈。临色搭配可以实现丰富的层次感，但对于需要突出的内容表现不足。 确定辅色 ABOUT ME 页面中的文本，通常都是要黑色或者白色。标题文字或重点突出文字使用辅色。纯黑的文字过于生硬，故页面中使用深灰色作为文本的颜色。 文本颜色 完成设计 主页设计稿 二级页设计稿 完成设计 项目页设计稿 详情页设计稿 4 新手试炼——电子商务网站会员页面设计 ABOUT ME 会员系统页面与整个页面风格保持一致。会员系统是网站中最重要的功能，也是网站正常运营的保障。一般设计的较为简洁，主题明确，避免受到其他内容影响。接下来读者根据前面所学内容设计会员页面。