浅析网站界面设计类型

网站界面设计公司爱上设计指出,目前更多的各种各样网页构成了网站,当我们在茫茫网络中点动鼠标时,一幅幅美妙的网页就会出现在我们眼前,对于我们浏览的网页,是否精彩,是否出色,它又与哪些因素有关呢?这就是本文我要说的问题。其中,色彩的搭配、文字的变化、图片的处理等,这些当然是不可忽略的因素,除了这些,还有一个非常重要的因素——网页界面的布局。下面就有关网页界面布局谈论一下。
网页界面布局类型
网页界面布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型,下面分别论述。

操作方法

  • 01

    1、“国”字型: 也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站界面上的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。

  • 02

    2、拐角型: 这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种界面设计类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。

  • 03

    3、标题正文型: 这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或注册页面等就是这种类。

  • 04

    4、左右框架型: 这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些企业网站也喜欢采用。这种类型结构非常清晰,一目了然。

  • 05

    5、上下框架型: 与上面类似,区别仅仅在于是一种上下分为两页的框架。

  • 06

    6、综合框架型: 上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。

  • 07

    7、封面型: 这种类型基本上是出现在一些网站的首页,大部分为一些精美的界面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。

  • 08

    8、Flash型: 其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

  • 09

    9、变化型: 即上面几种设计类型的结合与变化,比如一些网站在视觉上是很接近拐角型的,但所实现的功能的实质是那种上、左、右结构的综合框架型。

  • 10

    关于第一屏的界面设计 所谓第一屏,是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢?其实这是未知的。一般来讲,在800*600的屏幕显示模式(这也是最常用的)下,在IE安装后默认的状态(即工具栏地址栏等没有改变)下,IE窗口内能看到的部分为778px*435px,一般来讲,我们以这个大小为标准就行了,毕竟,在无法适合所有人的情况下,我们只能为大多数考虑了。

  • 11

    有关导航栏的位置 导航栏能让我们在浏览时容易的到达不同的页面,是网页设计元素非常重要的部分,所以导航栏一定要清晰、醒目,一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会小于上面所说的435px,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。

  • 12

    什么样的界面布局是最好? 这是初学者可能会问的问题。其实这要具体情况具体分析的:比如如果内容非常多,就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;那几种框架结构的一个共同特点就是浏览方便,速度快,但结构变化不灵活;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash大大丰富了网页的界面,但是它不能表达过多的文字信息。还没有提到的就是变化型了,我只是想把这个留给读者了,因为,只有不断的变化才会提高,才会不断丰富我们的网页设计。

(0)

相关推荐

  • 揭开隐喻设计面纱-界面隐喻类型与隐喻设计方法

    隐喻设计是一种常用却很少有人提及的概念,人们往往身在其中却不知究竟为何物. 简单说,隐喻设计它可以将现实生活中用户熟悉的事物以多种形式映射到界面中,从而使用户不熟悉的概念.陌生且复杂的操作等变得熟悉与 ...

  • VR界面设计实践指南

    小编:@C7210 VR硬件设备正爆发式发展,做为UI设计师在此领域的跟进也需时时,以下这篇是关于VR界面设计的实践指南,希望对你有帮助. 一篇VR实践指导文章.Smashing Magazine好久 ...

  • 界面设计中的那些版式-图版篇

    小编话:界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容.当然除了留白还有什么方法让界面高大上和达到一定的视觉效果呢?让我们跟着作者@王铎( ...

  • 如何开始VR界面设计?

    作为UI或 UX 设计师,向 VR世界迈出第一步可能让你心生胆怯别害怕!跟着我们一起设计一个简单界面,你会发现起步其实很简单- 对许多设计师而言,虚拟王国还是未知的领土.在过去几年里,我们见证了 VR ...

  • 如何在界面设计中使用留白

    留白是一个活跃的元素,而不是被动的背景.它是界面设计中最宝贵的资源,页面上的留白,虽然经常被忽视,但它跟UI元素所占用的空间一样重要. 01 .认识留白 在介绍如何使用留白提升用户体验之前,我们需要先 ...

  • 【作业】MUJI风格界面设计(临摹)

    看着咱们网站童鞋现在做作业,交作业的越来越多,交的越来越勤,男神给大家布置,点评作业也越来越有劲啦!那么今天的作业 我相信大家是不会让我失望的哦!好了,今天的作业就是MUJI风格界面设计(临摹).大家 ...

  • 2014移动界面设计风向(你不知道的秘密)

    刚看到这篇文章的时候小编顿时怒火中烧--这不是抄袭女神@elya妞,的<2014让人印象深刻的7种Mobile UI设计语言>吗?!仔细看完之后,发现作者不光分析了视觉方面,更综合了产品交 ...

  • UI界面设计交互动效欣赏

    小编:今天给大家带来的是由line25分享的UI界面设计交互动效欣赏.GIF动画已经越来越流行,能够很快速的展示设计效果,准确的传递人机之间的交互.在你来我往之间构成好的用户体验.今天的22个优秀的动 ...

  • 32个扁平风格网站UI设计

    小编:今天来带大家欣赏学习一下扁平风格网站的设计.扁平风格就是去除冗余.厚重和繁杂的装饰效果,让"信息"本身重新作为核心被凸显出来.扁平风使UI界面变得更加干净整齐,使用起来格外简 ...