重庆美拓设计培训学校
  Home About Contact US
关于美拓 About 课程设置 Course 师出有名 Teacher 新闻中心 News 学员作品 Works 就业保障 Employment 教学环境 Environment 联络前往 Contact to
 
品牌管理+视觉研究+设计教育 Expand international Media
1
2
3
4
地址:重庆市南岸区南坪西路2号浪高凯悦商务楼(南坪百盛旁) 报名热线:023-62628780 http://www.meituo123.com
美拓观点
行业新闻
设计大赛
美拓答疑
就业新闻
最新通知 [全部]
·美拓设计培训机构2013年开 [01-30]
·美拓室内寒假班开课通知 [01-29]
·美拓设计2013年春节放假通 [01-23]
·美拓室内设计201303期白班 [01-21]
·美拓201302期晚班CAD培训开 [01-15]
·美拓平面白班201301期开课 [01-08]
·美拓岁末优惠大比拼,预定 [01-07]
·美拓设计12月3号开课通知! [11-28]
·白班开班通知 [11-12]
美拓答疑 [全部]
·在重庆美拓学习室内设计培 [06-29]
·21、学设计必须要先学画画 [06-04]
·20、我想报白班,但是现在 [05-23]
·19、美拓报室内设计班有什 [05-17]
·18、我想报名,但是我是否 [05-17]
·17、我对设计不是很了解, [05-17]
·16、如果学不会,可以继续 [05-17]
·15、网页设计师的前景怎么 [05-17]
·14、如何缴纳学费? [05-17]
新闻中心 News 美拓首页 > 新闻中心

简洁至上的Web设计创意技巧

浏览:81次 编辑:admin 来自: 时间:2013-01-16 11:28:13

简洁风格的创意组成要素

固定宽度的页面布局结构

花时间观察一些简洁风格的网站,你会发现它们当中的绝大多数都有用到经过良好规划的网格布局系统。如果哪位朋友对网格布局还不大了解的话,可以设想一下,在着手进行实际的视觉设计工作之前,使用辅助线将页面划分为若干等宽的列,通过这种方式对页面结构及元素的布局进行更精准的规划。网格布局可以使设计方案当中的信息结构更加清晰,在视觉上具有强烈的节奏感与一致性。创意广告设计

固定宽度的网格布局结构可以为页面带来秩序与效率。举个例子,虽然Creative Review当中的页面布局会根据内容类型的不同而有所区别,但我们能够感受到的浏览体验却是相当连贯的,因为这些页面都是基于同一套网格布局框架进行设计的。下图展示了他家的首页和About页面:


对于在线杂志或报纸一类需要呈现大量内容的网站来说,要打造简洁的页面设计方案则更加困难。不过英国的卫报(The Guardian)以及一些同类型的在线报纸站点倒是向我们展示了通过固定宽度的网格布局实现简洁设计方案的可行性:


配色有些许凶残么——译者C7210注。

如果不使用固定宽度的布局方式来组织这些内容,几乎可以说,首页将会乱的一塌糊涂。然而,在网格布局的帮助下,模块之间的留白及层次关系都相当清晰,整个内容结构的健壮性得到了提升。

下面两篇文章(英文)可以帮助你更好的理解与实践网格布局的概念:

A Brief Look at Grid-Based Layouts in Web Design创意广告设计
The 960 Grid System Made Easy
也不是什么新概念了,国产好文章也蛮多,有欲求的同学可自行觅食——译者C7210注。

良好的文字排印

良好的文字排印方案往往可以对简洁风格的页面设计起到事半功倍的推进作用。

对字体数量的限制是这其中的一个关键因素。如果在同一套设计方案当中运用了过多的字体,它们彼此之间就会产生视觉上的竞争与冲突,这无疑会使页面变得凌乱不堪,用户的阅读连贯性也会受到极大的破坏。

看看那些设计优秀的网站,你会发现它们通常只会用到一到两种字体,并在此基础上通过不同的字号、字色、粗细、间距等属性来体现出内容的层次结构。

在这方面,纽约时报(The New York Times)与The Mavenist都是不错的例子。

这两个站点用到的字体都不超过两种,但它们的设计方案都比较充分地利用了字体各方面的属性特质,使得整个页面当中的信息层次非常鲜明。

除了字体以外,行间距(line-height)也是文字排印方案当中的一个关键性因素。使行与行之间保持足够的空间,文字段落就能变得更加易读,当用户阅读到一行文字的末尾时,也可以很轻松的将目光转向下一行开头的位置。我们可以在样式表当中通过line-height属性对行间距进行调整。

此外,对于每一行当中的文字来说,字间距(letter-spacing)也是我们需要考虑到的细节问题。合理的字间距可以为文字带来更好的呼吸感。

关于文字排印,也有些不错的文章(英文)推荐一看:

A Basic Look at Typography in Web Design
CSS Typography: The Basics
CSS Typography: Techniques and Best Practices
CSS Typography: Examples and Tools
简化的配色方案

在印刷领域,设计方案所用到的颜色数量通常会受到各种现实问题的限制,譬如项目的预算只允许设计师使用两种颜色来设计海报。类似这样的情况是很常见的,设计师们时常会因为这些局限而感到相当的闹不住。

而Web设计领域当中却不存在这类问题,如今,多数显示设备所支持的颜色数量都庞大的不亦乐乎。从技术上讲,我们可以随心所欲地打造各种花里胡哨五彩缤纷的设计方案,然而这样的实践方式显然会与简洁至上的设计目标背道而驰。很多经典的案例当中只会用到两种颜色, 即某个明度的灰色外加一种有彩色。其中的有彩色会用在最为关键的页面元素上,例如重要的链接或页头当中的交互对象。从某种角度来说这种极简的配色方案具有一石二鸟的作用,一方面,它无疑会对简洁视觉风格的构建起到至关重要的作用,同时,这类方案还能有效的提高页面元素之间的对比度,使那些重要元素得到最大程度的突出。

AisleOne的配色方案称得上是这方面的典范:

Fuzzco则更为极端的只用到一种颜色:

好么?我个人持保留意见——译者C7210注。

另外一些成功的简洁设计方案当中,虽然用到的颜色数量会超过两种,但整体的配色风格依然趋向于保守,而且用到的颜色多数是比较中性的。我们来看看Solo:

正如文字排印方式与信息传达效果之间的关联作用,配色同样不仅是选取一些好看的颜色那么简单,优秀的配色方案可以通过正确的视觉基调将网站当中的内容更加有效地呈现出来。以Notologist为例,明亮、互补的颜色搭配使得内容信息及它们之间的关联得到了非常自然的体现,页面整体风格非常简洁直白,同时又不失活力。

但我不喜欢这个页面中的黑色导航——译者C7210注。

一致的图片样式

如果同一个网站当中的图片(照片、插画、图表等)样式差别很大,你会觉得焦虑么?反正我会。

对于内容当中有可能包含很多图片的网站或页面来说,要落实简洁至上的设计思路,其中最关键的一点就是要通过和谐统一的样式风格将这些视觉元素呈现出来。

举例来说,IBM的智能星球运动(Smarter Planet campaign)涉及到多个方面的主题,与其相关的印刷品、插画、图表、人机互动素材等都遵从着同一套方案标准,包括几何框架、线条风格、色彩饱和度等。无论是在网站,还是在平面媒体中,相关主题的视觉表现形式都具有高度的一致性。

 

在Protein中,艺术家们的照片并不是统一拍摄的,但从视觉效果上看,无论构图、景深还是光影等方面,这些照片都具有相似的表现。图片个体之间在视觉上的一致性,可以使页面体现出良好的整体感。

不过在很多情况下,我们确实难以对页面里的图片表现形式进行有效的管理。一方面,用户上传的图片是难以控制的,另外,对于新闻网站或博客来说,也不可能因为表现形式的问题而舍弃具有重要内容价值的图片。另外,客户也未必有预算去支持图表或插图的重新绘制,设计师必须利用现有资源办事儿。在这类情况当中,可以试着通过边框或类似的元素对图片进行修饰,这样做至少可以为图片增添一种统一的视觉属性。

设计思路与技巧

先复杂,后简化

在页面设计的过程中,我们必然要将各种界面元素一点点的放置在页面里。为了打造简洁的设计方案,很多设计师通常会在这种时候有所顾忌,下不去手。这会导致整个流程当中缺乏必要的探索性,而且最终的设计方案往往会让人感到苍白与空洞,而非简洁。大家多多少少应该都有所体会,如果运气好的话,探索过程中的那些happy accident往往能带来预想不到的惊艳效果。

所以,我们不妨试试先复杂,后简化的思路。在设计流程初期,不要对界面元素的数量进行刻意的限制,同时尽量多尝试一些不同的布局方案,直到需求所需的内容及功能元素全部就位,然后开始简化工作。

问一问自己,“有哪些元素是真正需要放在这个地方的?”,试着移除一些辅助性的元素,观察局部或整体页面结构是否因此而受到破坏,如果没有,那么扔掉蛮好。创意广告设计

上一篇:“合理性”规则会成为阻碍设计师前行的绊脚石 下一篇:直觉对于设计的重要性
Copyright © 2012-2020 Meituo training CO.,Ltd. 版权所有©2012-2020 重庆市美拓设计中心 渝ICP备12002083号-1
网站地图
在线咨询 点击这里与IT在线管理人员通话或留言点击这里与IT在线管理人员通话或留言点击这里与IT在线管理人员通话或留言CLOSE