“私塾”网页界面设计文案

李健伟(运城学院,山西 运城 044000)

一、产品风格定义

“私塾”网页设计理念是体验至上，以人为本，以提高用户的体验为核心，不断改进工作，跟踪用户的本质需求，提供热情的服务和超期望的产品。在功能设计上，对于点击按钮的反馈做出了元素设计。体验至上，就是在满足网页本身的功能需求时，还要在视觉上有良好的体验。“私塾”网站整体风格既凸显扁平化设计风格的潮流，又具有浓郁的教育元素。

一款优秀的产品往往体现在功能和界面两个方面，功能可以带给用户良好的用户体验，但是吸引用户眼球的往往是界面的美观和设计风格，用户在第一时间进入网页界面时，最先给用户反馈的是视觉效果，其次是用户体验，好的产品最具视觉效果，也是最具有吸引用户的一个关键点。排版、用色和细节刻画均可使每个页面都能够拥有良好的视觉效果。所以，在每一个页面中都进行了深层次的排版，主要排版方式有列表式、宫格式、卡片式等等，都具有美化页面的效果。

二、图标设计

进入“私塾”企业，第一页便是企业的首页，最顶端“私塾”两个字体直接表达了企业的名称，字体运用的是微软雅黑，蓝色加粗效果，表现出整个企业浓郁的教育元素。

企业站主要以视觉效果为主，在不缺视觉效果方面增添一些功能型图标和当今比较流行的扁平化图标可以带来更深层次的视觉效果体验。首先每张页面都有精心设计的banner图，图上的“一对一在线教育平台”九个大字运用微软雅黑设计，且两个“1”都做了加粗、倾斜的效果来体现企业的一对一教育风格。页面的“more”按钮进行了着重的设计，渐变色的关系以及字体的镂空和描边都能够突出按钮的视觉效果，另外加以弥散投影，更加突出按钮的可点击效果。每一个页面都由板块拼接而成，且每一个板块都对应其相应的功能，并加以小标题注释。板块之间的距离都经过精准的计算，不会给用户产生错论感。小标题也经过多层修改和修饰，每一个板块都运用同一个标题设计，给人一种吻合感。

三、色彩设计

在界面设计中，色彩的搭配及用色是设计中的重中之重，一个有气质的项目作品，主要看的是色彩的运用。首先从视觉出发，选择了饱和度较高的色彩做为主色时，要考虑因为颜色面积过多而造成的视觉疲劳。所以企业站以蓝色为主色调、绿色为辅助色，外加橙色作为界面的点缀颜色。蓝色是永恒的象征，它沉稳的特性，具有理智，准确的意象，作为企业的主色调，可以给用户在视觉上带来安静、祥和的视觉效果，给学生营造一种平心静气的学习环境。绿色作为辅助色，可使界面具有活力、生动感。外加橙色作为点缀，冷暖对比色是自然平衡的规律，可以使作品非常的出彩，不显单调。

四、版式设计

“私塾”网站的界面整体采用了列表式、宫格式和卡片式的排版方法。图标与文字相结合，不仅增加了页面的趣味性，而且节省了空间，使整个页面看起来更加的舒适。

网站首页体现的是一个企业的门面，是企业最主要的信息交流界面，也是网站项目设计中最重要的部分。一款成功的项目，首页一定是最吸引用户的地方，它可以让浏览者在第一时间领略到企业的特色所在，也能够让用户在第一时间了解企业文化和企业信息。

首页的最顶部是导航栏，分为企业首页、关于我们、企业动态、实训案例、教师团队和联系我们，每一个按钮都可以跳转到相应页面，而且我把导航栏设置为固定式导航，这样有便于用户在下拉后依然可以点击导航栏的每一个按钮来跳转页面。

“关于我们”界面引用图文排版的方式，页面主要内容包括有关于我们、文化历史和企业服务。页面顶部依然是固定式导航栏，banner下方标有页面跳转指向，可以减少用户记忆，让用户一目了然的知道自己所在的页面。底部精心设计的分页导航，运用描边来凸显跳转的页面以及跳转按钮，页面所在的导航，运用填充加描边来凸显，可以让用户更直白的看到页面跳转的数量。

“企业动态”界面，页面大部分都以图片的形式展示，界面运用宫格式布局将图片一一呈现在界面上，在这里，用户不仅可以时刻关注我们企业的动态，而且可以点击教学视频下方的每一个视频科目来进行学习。每一个科目都设计了鼠标悬停效果，弥散投影加描边恰到好处的融合，给用户产生不一样的视觉效果，使平淡无奇的课程列表，瞬间增添几分活力。

“教学课程”界面，运用列表式布局将整个页面铺满，每张卡片都运用了弥散投影，并且统一左边文字右边图案，整体视觉干净整齐，每张卡片的最左边都标有阿拉伯数字，在视觉上，给用户一种顺序感，满足用户从上到下的观看体验。

“师资力量”是每一位学生及家长密切关注的点，为了吸引更多的用户，把师资力量单独放在一个页面，具体且详细的介绍了公司的每一位教师及学校的师资，并且还配有每一位老师的授课视频。页面整体采用宫格式布局，可圈可点的字体设计及大胆的用色，更加突出每一处的与众不同。

“联系我们”界面，界面最大的特点便是在页面中间放置了一个站点地图，站点地图上方标有公司的地址、电话及公司名称，用户可以通过此页面看到我们公司的详细地址，站点地图中有一个似放大镜一样的两个圆，这是为了放大公司附近的地图路线及周边明显的建筑物，便于用户更容易找见我们公司。