前端-网站构建从零开始

  网站的搭建需要的不仅仅是代码,还需要网站搭建者有着清晰的思路与自己的想法。代码只是工具,想法才能决定一个网站的层次。本篇文章将介绍从零开始搭建网站的思路,不提供代码,只讲解方法。

  网站的核心是什么?信息的传递,利用传递的信息提供服务。过去人们用纸作为信息的传输媒介,随着互联网革命的到来,信息的主要传输媒介成为了电脑,手机等显示设备,而网站就是展示信息的舞台。

  因为我目前正在搭建一个关于电影,音乐,书籍这三种艺术呈现形式的网站,本文将结合这个实际用例讲解,为减少文章篇幅,本文将只讨论电影。

  一.信息的接受者与发送者都是人,所以我们搭建的第一步是了解哪些人会访问我们的网站。

  年龄阶段:网站的目标用户的年龄的主要分布区间是哪一个年龄段?网站的目标用户的主要身份/职业是什么?我的答案:爱好上文提到的三种艺术形式的人群基数是较大的,但是会上网搜索、了解最新相关资讯的主要是年龄位于20岁到35岁之间的用户,而位于这个年龄阶段之间很大部分用户为在校大学生,他们热爱分享自己的见闻,如果能把握好他们的兴奋点会对网站的发展有着很大的帮助。另外一部分主要用户为刚进入社会的年轻一代,他们是改革开放后第一批成长起来的一代人,对自己喜爱的东西愿意花时间与精力追求,是主要的消费群体,这一点可以从最近两年的电影院观众用户分布年龄段看出来。

  二.用户想从我的网站中获得什么信息?我的网站有什么功能可以吸引用户主动访问?我的答案:我的答案:我将电影分为过去,现在,将来三种。过去即旧电影,现在即正在上映的电影,将来即将上映的电影。结合这三种不同的电影类型,可以将用户的需求分为以下几点:(1)用户想知道最近院线上映的电影有哪些,我可以上这个网站了解一下,有到的电影话就买张票吧;(2)这些电影的质量怎么样,也许我可以参考一下这个网站的影评;(3)过去有什么好的电影值得我在空闲时间欣赏品味的,也许我可以上这个网站看看大家都有什么推荐的;(4)我有想看的旧电影,但是不知道在哪可以观看,这个网站是不是有收集好了的电影资源呢?也许我可以上网站找找看。

吸引用户主动访问的功能:(1)社区,喜欢同一部电影/演员的用户可以自己组建一个社区,与他人的不断的信息交流会增加用户访问网站的频率与时间;(2)积分制,积分积累到了一定数量后用户等级上升。这是很多网站增加用户访问频率的方法,但是就我个人而言积分的吸引力几乎为零,因为我没有感受到等级有什么用呀,我为什么还要提醒自己每天签到,好烦哟。。。我目前的想法是将积分转换为抽奖(3)随机推送制,用户打开网站页面后会接受到一个随机推送的消息,当然这些消息肯定是经过筛选的优良品种。这个机制主要是为了结合用户的兴奋点增加用户的停留时间,但是也不会引起用户的反感,很多APP的消息推送机制盲目的追求用户的停留时间,这反而会打扰到用户的正常使用,引起用户的反感,导致用户体验下降。

结合上面的分析我画出了以下的思维导图:

  三.确定了网站的功能后就是网站整体框架的构建了,整体框架的核心是用户体验,将网站提供的核心功能直观的展示给用户,让用户及时的找到其需要的信息。常见的网站框架如下图所示

  整体框架搭建好后可以利用线框图(wireframe)对网站有一个最简单的布局设计:

  初步设计时需要注意层次化模块化

  层次化(visual hierarchy):层次化通常是通过对比度来实现的,对比度又分为以下几个部分:图片的尺寸与字体的大小,图片的颜色与字体的颜色,字体的样式。很明显我通过改变这些属性成功的引起了你的注意。层次化设计时有的朋友会因为想突出的东西太多而导致最重要的元素没有与其他元素产生对比,最终最重要的元素跟其他普通元素也一起被埋没了,这一点要切记切记,不要贪心呀。

  模块化(group and similarity):常用的方法是留白,统一背景颜色,边框;

  属于同一个模块的元素之间空白较小,不同模块的元素之间空白较大;相同功能的元素具有统一的背景颜色;为相同功能的模块添加一个边框

四.网站的导航栏非常重要,就单独分析下:导航栏中的每一项必须精简、准确,比如“联系我们”精简成“联系”是极好的。导航的作用仅仅只是导航,不能将多余的功能强加给导航栏。每个导航栏的一般默认选项不能超过八个

原文地址:https://www.cnblogs.com/lflj/p/6293716.html