网页设计风格是不是越简单越好 网页设计师如何形成自己的设计风格

作者&投稿:在卸 (若有异议请与网页底部的电邮联系)

简洁,不等于简单。这与弹琴是一个道理,你也许有能力弹得很快,但你并不需要在所有地方都弹得这么快。在很多时候,让速度慢下来反而比弹得飞快要来的更加困难。实际上,味道往往最能体现在从容自然、舒缓平淡的韵律当中。接下来进入原文作者人格;我发现自己在很大程度上就是一Dummy System来着。

简洁的Web页面设计风格是当前圈子当中的风潮之一。在本文中,我们首先将对这类风格当中的那些最具代表性的组成要素进行分析,随后,我(英文原文作者)还会向各位分享一些工作中的实战技巧。

简洁风格的创意组成要素

  固定宽度的页面布局结构

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

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

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

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

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

  ● A Brief Look at Grid-Based Layouts in Web Design

  ● The 960 Grid System Made Easy

  也不是什么新概念了,国产好文章也蛮多,有欲求的同学可自行觅食——译者C7210注。

  良好的文字排印

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

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

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

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

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

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

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

  一致的图片样式

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

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

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

  设计思路与技巧

  先复杂,后简化

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

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

  微调,再微调

  道上的朋友们觉得我总是喜欢没完没了的折腾设计方案,我真心觉得这种评价是对我的赞扬。

  在我看来,设计流程从来没有真正结束的时候,我们总是可以将方案朝着正确的方向再推进一点。说正经的,在这方面,问问那些和我合作过的设计师或实习生,他们会告诉你,跟着我干是多么苦逼的一件事儿。我估计也是,当我让他们在一些阴影的细节上修改了12次以上的时候,基本没人会觉得有意思了。

  正像我们在前文当中了解到的,“简洁”是由界面布局、文字排印、配色方案、元素外观等多方面要素协同构成的综合体验效应。所以,在整个流程中,花费大量时间在每个方面的细节当中进行纠结是必需的,这能怪我么?这里增大点行间距,那里的外边距减小两像素,把边框线的颜色由#EEE改为#DDD...这样的改动听上去并不重要,但当所有这些微调共同作用在页面整体上时,细微的差别所累加起来的综合效应就会变得非常明显。

  所以,微调吧,然后再微调些些。很多时候,在一个细节当中的调整还会引发另外一处的修改需求,有时甚至会对整个设计方案的方向造成影响。不怕,耐心些,简洁至上的设计目标需要我们付出的绝不会像最终成品看上去的那么简单轻松。

  大局观

  我前半辈子主要是一名印刷设计师。说是印刷,其实自己做了很多打印工作,因为每天在工作当中都会反反复复地将各种稿件打印出来并钉到墙上。久而久之,几面墙上都钉满了各种视觉方案的打印稿。

  在改行做Web设计之后,我果断不打印了,因为我觉得最终产品只会上上线而已,完全不会涉及到出版印刷一类的问题。于是在很长一段时间内,几个墙面都是空空如也的。不过慢慢的我却开始怀念起过去的日子了。将项目当中的设计稿一张张的打印出来并钉到墙上,这种简单直白的组织方式其实可以给我们带来一种很明显的大局观,使我们能够站在全局的层面上对页面进行观察和评审,并有可能发现更多可以被简化的细节元素。

  相比之下,在Photoshop或Illustrator中通过切换图层来对比视觉稿的方式就会让我们的视野受到很大的局限。所以我建议各位好好利用一下纸张及墙面,通过这种方式来发现不同页面的设计方案在一致性等方面的缺陷,去除有可能影响到简洁方案的不和谐因素。



简单不等于简约,不知道有没有听过这句话“简约而不简单”
简约风格是比较常见的类型,其实简约风格是比较抽象的一个概念,简单的来说,页面设计比较单一,主体色彩不会太过明显,主要突出的就是功能性。像我们常用的一些搜索页面就属于这类风格,虽然看上去很简单,但是却很方便,实用性更强。

交互风格。大多数的网站设计公司都会推荐大家使用这样的交互风格,主要是增加了留言或者在线互动的版块,因为我们建立网站的主要目的还是在于推广,如果能够直接和目标群体交流,不管是对企业形象还是对产品营销都有一个很好的推进作用。尤其是一些电子商务性质的企业或公司一定要做好这方面的准备,交互类型的网站也应该成为这类公司的首选。
炫酷、特效风格。很多宣传型的网站可以在网页上增加很多的特效,进而来增大网站的宣传效果,在视觉效果上吸引更多的客户。但是要告知大家一点,这类特效需要使用较大的空间,设计也比较麻烦,收费必然会很高,比如弹出对话框或者是播放视频、动画等,都需要准备好材料,而且过多的特殊效果对于网站的后期优化也是不利的。

现在扁平化越来越流行了,简洁却不简单

不是简单,而是简洁风格

网站设计风格主要体现在哪几个方面~

【网站设计】1.网站标志(LOGO)LOGO是指网站的标志,标志可以是中文、英文字母,也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如:网站内有代表性的人物、动物、植物,可以用它们作为设计的蓝本,加以卡通化或者艺术化;专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志,采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。

2.色彩的运用网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。颜色搭配是体现风格的关键。“标准色彩”是指能体现网站形象和延伸内涵的色彩,要用于网站的标志、标题、主菜单和主色块,给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。例如IBM的深蓝色,肯德基的红色条型。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。一般以白色和黑色的背景网页最好做,颜色搭配最方便;亮色与暗色配合,最容易突出画面,如黑与白,红与黑,黄与紫;而近似的颜色的搭配,能给一种柔和的感觉,如墨蓝与淡蓝,深绿与浅绿。最好能给主页定一个主色调,不要搞得花花绿绿的。

3.网站字体准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵,选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的计算机里没有安装特别字体,他看到的只能是乱码,那么辛苦的设计制作便付之东流了。

4.语言表达形式现代生活节奏加快,人们往往没有时间看大块文章。为了节约时间,在单位时间内获取最大量的信息,人们需要精练的信息,即信息精品,要用信息语言来表达信息内容。所谓信息语言是指以下公式:信息=基本事实+数据描述+专家观点。信息语言摒弃一切广告性词句、文学性修饰词句,不欢迎一切关于意义、重要性的过分渲染。尽量采用数字说话,欢迎定量描述,反对过多的定性描述,特别是无法形成准确概念的定性描述。用信息语言描述,任何信息都应该有出处,有时间,分类准确。当然,应当满足信息的时效性、准确性、完整性、精练性等固有的特点。在此特别注意的是,不要出现错别字、病句。

要学会创新,只是创新才能进步,作为设计师还应该具有广泛的知识面,历史、社会、人文、时尚、音乐、艺术等等,这些看似不相关的东西,其实是最考验设计师素质的要素。而越是专业的设计师,其知识面越广泛,雄厚的知识基础才是你今后职业发展前途中成功关键。
风格一词在词典解释是“气度、作风;具体到网页基础上,风格就是在运用自己所拥有审美及看待事物的出发点再利用软件加于表现出来,从而形成自己独特的设计形式。
二十一世纪是国内网络高速发达的一年,网页也是各有千秋,但设计师的地位却没有得到提升,使网页设计还是停留在一个低层次水平上重复。另外由于设计师之间相互“借鉴”,使许多页面在结构和功能上都极其相似。这样直接后果是网页行业不景气,例如在按钮或者是导航设置上,有些设计师在处理上设计得很不方便,一味追求漂亮,而偏离了主要因素-实用。同样在一些用色不规范或者是其它元素的应用限制了设计师作用发挥,造成了如此的僵化模式。所以在这个新时代,急切呼唤具有自己风格的设计师来作出一些更好更方便的作品来。
当今互联网行业的现状有吞没网页设计师个性趋势, 但是同样这个时代也是一个追求形式上创新和开拓的时代。每一个有理想的设计师都有理由在这样的状况下运用自己能力来开辟自己独特一片。那么作为一个设计师应该怎样做才能体现自己风格呢?首先这种风格不能背离人们的现实太远,这个现实就是人们习惯了的布局,虽然可能经过长期努力可能会使这种局面得以改观,但是在目前的情况下如果一味的追求自己的风格而脱离用户,也是一种不可取的风格,作为一名设计师首先应该还是要考虑用户良好使用,一切为方便用户出发,网页设计师也一样也要站在客户和浏览者立场来设计,如果自己的作品在很多方面同目前已形成的习惯和编排方式大不相同,那么习惯于上网的用户使用起来就会感到很不方便,这样得不到用户喜爱,这样设计出来的作品是失败的。当然由于自己习惯、修养以及其它因素的作用,这个风格体现的方式大相径庭,例如有些设计师喜欢现代主义风格,喜欢它简洁、实用、追求功能上的严谨。但是另外一些人喜欢追求视觉上的新奇、愉悦,所以反映到设计上就是一种装饰化、流行化的风格。
当然,如果一名网页设计师的作品总停留在一个水平或者一种风格上不变化,就等于死亡,作为一名设计师在工作中要接触到各式各样的网页设计,在这个过程中要能够形成并保持自己风格固然可贵,但是如果想取得更大成绩就必须要赢得一种超越,在自己设计最熟悉风格的基础上能够寻求突破,这才是更难能可贵。如何实现自己风格的突破不是一件容易的事情,这需要设计师本身具有不断开拓进取精神,在自己实践过程中不断完善自己,不断充实自己,不能将自己锁定在一个方面,要不断尝试不同艺术风格,以期找到自己风格变化的突破口,多学习更多传统、现代的方法,吸收一些长处,在自己工作实践中反映出来,这样就更能使自己设计风格的突破变得更加容易,也会使自己在这个方面变得更加得心应手,当然在具体功能上进行实践也是非常必要。
总之,只有在不断探索和实践中总结经验,提高自己同时树立起自己独特理念,才能够形成自己的风格,开辟出设计新天地。

用户界面设计的风格有哪些?
答:1、用户界面设计的风格——平的风格 近年来,用户界面设计的风格变得越来越简单和直接。平面设计可以产生“让内容自己说话”的想法。在平面用户界面中,有两个层次的设计:界面包含显示上下文的元素;内层是一个平坦的、坚实的背景色。因为一个平面UI可以很容易地改变形状而不改变里面...

极简主义风格好不好?装修的注意事项有哪些?
答:1.减去不必要的装饰,让空间更具有层次感所谓极简主义风格,意思就是装修的风格比较简约大方,设计元素并不复杂,给人一种纯净文雅的感觉。所以在装修的时候,一定不要用太过复杂的装饰,只留下必要的家具即可,越简单越好。需要注意的是,灯具选择最简单的就可以,并不需要特别复杂的吊灯,否则容易藏灰...

详情页设计的六个标准
答:整个详情页排版 怎么对图片和文案内容进行排版设置,要检测咱们平时积累下来的规划的水平。越是简约大气的页面,元素务必不要太多,清新舒适的页面多留白,参阅优秀事例,多多学习和学习。修正定稿 把制造好的首稿输出为JPG或PNG格式,一起保留源文件格式,给团队成员进行阅稿审阅,如不契合要求,进行部分...

网页风格设计从哪些方面考虑
答:网页风格设计分类扁平化设计扁平化设计可以说是时下最常用的网页设计风格了,它弱化了材质、渐变、阴影,去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑,提升了网站内容信息的视觉层级,更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。3D风格这里所说的3D风格不是...

”关于我们”页面设计
答:选择走肾的设计技巧,挑个或现代或简约的匹配自家品牌的风格,用最走心的方式展现自己的团队,这就够了。 听起来玄乎,不如看看别人家的案例来的直观。 严格的色彩搭配和醒目的色调选取,使得Rook 的“关于我们”页面的设计看起来简单而突出。醒目的金色贯穿整个设计,从LOGO到图像、排版都保持着一致性。 在图片和成员...

简单网站制作同样蕴含细节
答:要注意细节,避免在细节处不严谨。网络的特色就是方便,随时随地都能够与世界建立起联系,策划的活动在网页细节和流程也应符合这特性。尽量少让人做填写和频繁点击,操作越简单越好。公司客户在网站的建设时不要光注重外表。企业的网站就是公司的第名片,在已经完成了简单构建之后要注重网站页面设计,一个...

简约风格室内设计说明
答:否则会影响整体装饰效果。2、简约风格室内设计时,要注意颜色,简约风格采用的色彩不可过多,会让人产生无序感,也让空间感显得压抑。可采用一两种明快的颜色,如黑白灰,简单有品位,再加一些装饰画或织物的点缀,可让整体空间看起来耐看、和谐,永久不易过时。3、简约风格室内设计,注重实用和灵活性。

简约风格设计说明
答:每一个细小的局部和装饰,都要深思熟虑. 在施工上更要求精工细作. 是一种不容易达到的效果.简约风格也是土巴兔上最受欢迎的设计风格。现代家庭简约装修风格有以下含义:1、简约不等于简单,它是经过深思熟虑后经过创新得出的设计和思路的延展,不是简单的“堆砌”和平淡的“摆放”,不像有些设计师粗浅的...

设计上简单与简约的区别是什么
答:什么东西都不能随便放,家里那么多东西都搁哪啊?总不能想外国一样随手摆大街上,二手卖掉吧.家还是以自然为好.而办公空间可以重点考虑简约的风格.但如果档次不要求太高,还是奔简单使劲吧,简单就省钱,最后在稍微做点装饰也就可以了.现代风格:1.功能主义特征。强调功能为设计的中心和目的,而不再以形式...

现代极简装修风格,有什么优势呢?
答:现代极简装修风格的优势主要体现在以下几个方面:1.简约而不简单:现代极简风格追求的是简单、明了的设计,没有过多的装饰和冗余的元素,使得空间更加纯净、开阔。同时,通过巧妙的布局和细节处理,营造出舒适、高品质的居住环境。2.时尚与现代感:现代极简风格紧跟时尚潮流,强调空间的现代感和时尚感。这...