技术开发 频道

Web开发趋势热议:Web设计从细节做起

        【IT168 技术】Web开发是一个指代网页或网站编写过程的广义术语。网页使用 HTML、CSS 和 JavaScript编写。这些页面可能是类似于文档的简单文本和图形。页面也可以是交互式的,或显示变化的信息。编写交互式服务器页面略微复杂一些,但却可以实现更丰富的网站。如今的大多数页面都是交互式的,并提供了购物车、动态可视化甚至复杂的社交网络等现代在线服务。

  通俗的说,Web开发就是我们说的做网站.它分为网页部分,和逻辑部分也就是我们说的前台与后台.前台负责与用户的交互,显示数据.用到HTML显示数据,CSS控制样式,JS编写复杂交互。后台编写处理这些逻辑的程序.可以用C#、Java、VB和PHP等语言.正所谓集思广益,我为大家整理了一下关于Web开发的趋势热议,以及如何做好Web设计。

  现在身居美国专注于HTML5领域的开发者@尤小右在其微博中谈到了最近Web开发的几个思想趋势,包括全部JavaScript化、自动实时同步等。两天内用HTML5实现Clear大部分功能的@尤小右,在自己的微博上提到“Web开发的几个思想趋势:1. 全部JavaScript;2. 前后端打通,或者后端完全抽象化;3. 自动实时同步。近来值得关注的例子有Meteor.js、Derby.js、Firebase(backend-as-a-service),以及Yahoo前段时间开源的Mojito。另外还可以参考Asana的Lunascript。”

  也有一些朋友提出了反对意见,@limodou:

  如果是JavaScript的天下我倒是不这么想。因为Web开发可不只是前端,像后端也未必就要JS一统天下。Web开发的概念还是很广的。以Node.js为代表的新兴开发模式的确很Cool,不过别的语言或框架未必就不行,特别是对一些传统的业务模式。如果把它们的一些好的想法在其它框架实现也不错。

  @黄智KG则提到JavaScript繁荣背后,可能带来的混乱现象:

  如何规范化JavaScript开发很重要啊,JavaScript这两年出现很多框架和库,大有前几年服务端MVC框架井喷之势。但繁荣的同时,这么多轮子,就显得有点混乱了,这么多框架,谁能成为类似JQuery在DOM操作领域一样的江湖地位呢?

  Web设计的最基本原则是,通过有效的方法更好的组织和规划用户所能浏览到的信息。这样做的目的是获得用户的好感,并且使用户得到方便。例如,我们通常说的好的导航, 应该是具有明确含义的连接名称,基于逻辑的按钮组合,优秀的充满质感的表现;好的页面应该有语意清晰的标题,一致的导航元素,降低视觉疲劳的颜色组合,清晰明朗的文字编排。一个站点的外观是最先被注意到的,而这个特征几乎在任何设计类工作中体现出来。对于想从事Web设计的人员而言,最成功的设计会给人以整洁感,无论是排版、字体、对比和颜色等这样的小细节都会对网站的整体效果起到立竿见影的作用。

  一、排列

  整洁的设计的第一关键就在于对齐,包括水平和垂直对齐。随随便便地排列网页元素的话是无法创作出整齐、一致的感觉的。这也是你的网站是否专业、优秀的关键。良好的排列会让你的网站看起来更有层次感。


 


  向网站添加图像和文字时要注意网页元素是如何在页面上排列的。每个项目的顶部是否在一条直线上?或者项目的底部是否在一条直线上?


 


${PageNumber}

 


▲▲

  当然,你也需要注意垂直排列。保证元素的宽度保持一致,要特别注意元素之间的空白处,元素之间的空间应该保持相同。注意不同宽度的漂亮的照片是如何在Jux上的网格中排列的,间隔让不同宽度和形状的图片排列地非常完美。

  在你配合网格设计网站能够更简单并且快速地达到良好的设计效果。使用何种类型或大小的网格才能工作得最好并没有硬性规定,但是使用合适网格能够帮你在脑海中形成一个比较完善的映象。

  所以在你建设网站时最好使用网格来排列网页元素。你可以使用一个纵横分布的网格和分栏,使用自己创建的网格,或者下载一个优秀的模板。

  二、对比

  网站中的某些元素可能会因为图像或颜色或文字比其它的更吸引人的注意力。有效地规划和使用这样的对比能让你控制哪儿更受注意。你可以在设计中使用颜色、文本和不同比重来保证网站的对比。确定网站哪儿更需要注意,在那里建立大的对比。

  创造对比的一个最简单的方法是通过颜色。当你确定了背景和文本颜色之后使用完全不同的颜色能够强调网站的部分来突出重点。注意doberman网站的抽象化设计,该网站(不考虑图片元素)只使用基本黑色和白色的配色方案,但使用了鲜艳的黄色来强调,和黑白的背景形成强烈对比,对眼睛造成极大的冲击。此外,网站还使用了蓝色来强调别的关键地方。

  你还可以其它方法来制造对比,比如不同大小或者比重的字体也可以用来制造差异感。

  三、字体

  字体可能是建设网站时最难抉择的部分之一。为了保持设计的整洁性,注意千万不要选择过多的字体种类。即使你的项目再复杂,也会被过多的字体种类给毁掉。

  但是你可以使用各种字体的变种。不同大小、比重和颜色字体,能够在增加多样性的同时又保证了一致性。一般来说,不应该使用超过两种字体来进行排版。简单的排版可以帮助建立秩序便于阅读。

  当你计划如何使用每种字体的尺寸和比重时,想想整个网站元素的相似之处。使用一个字体、类型、大小和颜色来装饰标题,给副标题使用相同的字体,但是不同的大小、颜色或者比重。再给内容文字使用第三种类型、颜色或者大小的字体。注意使用类来定义元素样式,保证网站各网页之间的一致性。

  四、颜色

  和字体一样,使用一定种类的颜色能够完善设计,而调色板对于取色是非常有帮助的。注意记录每个颜色的具体混合,在整个网站中使用同一个颜色的缓冲颜色。同一类元素之间则一定要使用相同的颜色,因为这里哪怕出现一点点的差异都会使网站显得非常不协调。

  记下你使用的所有的颜色,增加比重和特效来突出不同。比如Netlife Research就在整个网站中始终使用同一种颜色以及它的变种,使得整个网站保持了良好的一致性。当然,你也不是一定要使用如此简单的设计,但是你在设计时一定要在脑海里谨记这一原则。

  五、一致性

  所有细节中最重要的一点就是一致性,网站中的所有元素必须在视觉和感觉上保持相当高的一致性。logo、header和banner不需要花哨,保证导航栏里的文字一致,同一类文字等元素使用相同或相似的颜色。调色板和网格对于网站设计都是很有用的。

  千里之堤溃于蚁穴!在你的网站快完工时注意检查所有的小部件是否还有问题。在完成设计后建立一个检查列表来检查框架:

  1. 垂直对象对齐;

  2. 水平对象对齐;

  3. 需要强调的元素很突出;

  4. 字体数目;

  5. 字体大小一致;

  6. 字体颜色种类;

  7. 适当的色彩搭配;

  8. 页眉和页脚等元素的一致性。

  总之,对于从事软件开发的您来说,改变不是一件坏事,反而是一件好事。毕竟,正是软件的日益变化才使得钞票流入了口袋,弄得你忙得不可开交,不是吗?当然,作为代价,作为工程师的你,必须能时刻适应这种变化的节奏,兼顾Web开发和设计细节。

 


 


 



0
相关文章