资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

网页设计的精髓

来源:常德网站设计 | 2020.08.16

 一个简单的主题网站,可谓麻雀虽小,五脏俱全,虽只涉及首页、索引页和内容页这种所谓「三个页面」设计思想,但却集合了简单 Web 设计之精髓。

网页设计的精髓

首页涉及美工设计、用户交互以及内容布局等,主要版块则有导航区域、推荐内容、最新内容、热点内容、日期索引、来源索引、标签索引等,除此还有友情链接、广告区域和版权信息等,其中像导航区域、版本信息等整站风格保持一致。

索引页在美工设计和样式上和首页风格一致,布局则比较清晰,除了导航区域和版权信息区域外,还将保留诸如标签索引、热门图片等,主要内容区域则用于展现该分类的最终内容页链接,并且支持分页链接。

内容页依照整体网站设计风格同样保持一致,同样保留导航区域和版权信息,主要突出内容区域,通常包括标题、时间、来源、正文、附件、标签等信息,除此还有和相关链接区域,一般用于放置热点内容、推荐内容以及根据标签匹配的相关内容。

当然,这「三个页面」除了应该预留各种广告区域等相关版块外,对索引页的目录命名、内容页的文件命名等也应该定出统一规则,包括按年月日命名子目录存诸结构等,静态化输出。

一、网页基本布局  要寻找网页设计

的步骤并不难。我建议大家没事儿时多做些折纸练习:随手拿起一张A4复印纸,然后根据自己的心

情好坏,或平行、或斜向、或选择任意角度将纸片折叠几次,再把纸平摊在面前,纸上呈现出来的折痕没准儿就是一种

相当不错的网页布局呢!当然,网页设计师还是要尽量熟悉那些典型网页的基本布局方式,以根据客户的需要选择使用

二、网页链接的深度、广度和耦合程度

超级链接是网站设计中最重要的信息组织方式,也是整个Web世界的精髓所在。但糟糕的链接设计——比如过于泛滥和随意的超级链接——很可能会让冲浪者迷失在充斥着信息碎片的海洋里。如果将网站首页视为链接层次中的第一级,那么,由首页中的超级链接得到的,在信息内容上具有从属关系的站内页面就是网页链接层次中的第二级;从每个第二级页面又可以继续得出第三级网页;依此类推,我们多半可以得到一个完整的树形链接结构。在这个树形链接结构中,整棵树的层数可以被称为(站内)网页链接的深度,页面最多的一层中包含的页面总数可以被称为(站内)网页链接的广度。一般说来,一个网站的链接深度和广度最好有一个合适的均衡关系,深度过大的网站不利于冲浪者快速获取相关信息,广度过大的网站则容易让冲浪者在无数并列的超级链接面前不知所措。

三、网页中的留白

留白并不特指网页中的白色区域。事实上,网页中凡是没有前景元素干扰的视觉区域都可以被称为留白。横向通栏的留白可以让网页拥有一种水平的流动感;纵向的留白可以平衡文字、导航栏等视觉元素在水平方向的作用力;标题区域的大面积留白可以突出公司名称或网页标题信息;正文区域内的大面积留白既可以丰富页面布局的内涵,也可以缓解冲浪者在阅读时可能产生的视觉疲劳。

四、用“原型法”细化网站设计需求

用DW在最短的时间内搭出一个可以浏览、跳转的网站,然后与客户一起体验并评估这个网站原形的架构、流程、布局、配色、文字等不同层面。

五、网页空间的秩序及运动趋势

网页空间的秩序是网页中所有视觉元素相互作用的结果。分析某个特定网页空间的秩序时,最好把视觉元素抽象为“点”、“线”、“面”三大类,然后分别考察每一类元素之间以及不同类型元素之间的相互作用。在网站设计师眼中,每一个视觉元素都可以被看成是“力”的源泉。不同视觉元素释放出来的“力”的方向和大小不同。一个向右倾斜的三角形可以同时释放出类似“重力”的垂直作用力和向右的水平作用力。视觉元素和视觉元素通过“力”相互作用,共同影响着整个网页的空间秩序。

六、 网页空间中的视觉导向

每个网页都是一个神奇的视觉空间。像我们熟悉的四维时空一样,网页空间也有深度、广度和时间流逝的感觉,甚至还会在设计元素引发的“力”的作用下产生运动或扭曲。


12年
建站经验

多一份参考,总有益处

联系万讯互动,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

咨询热线:18692386458