导航:首页 > 万维百科 > 网站风格设计

网站风格设计

发布时间:2020-08-03 15:07:26

1、常见的几种网站设计风格

网站建设中网页布局大致可分为:“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,以下分别论述:

1、国字类型:也被称为同字型,顶部是网站的标题、横幅广告条,然后是网站的主体内容个,而左右分别是一些比较小的内容条,中间就是主要内容,最底部是网站的一些基本信息、联系方式、版权声明等。这也是现在网上见到的差不多最多的一种结构类型;

2、拐角型:这种类型其实与国字型很相近的,只是在形式上不一样,最上面的部分是网站的标题以及网站的横幅广告条,一种很常见的类型是最上面是标题及广告,左侧是导航链接;

3、标题正文类型:上面是网站的标题,或者是类似的东西,接着就是网站的正文内容,例如是一些文章或者是注册登录页面;

4、左右框架类型:这是一种左右为分别两页的框架结构,一般布局是:左边是导航链接,最上面有时是一个小的标题或标致,而右面就是主要内容,最常使用是论坛网站,企业网站中的内页有很多是采用这种布局方式的;这种类型的布局的特点是结构清晰明了;

5、上下框架类型:与左右框架类型类似,只是这种类型是上下两页的框架;

6、综合框架类型:其实就是左右框架类型和上下框架类型的结合体;

7、封面型:这种类型基本上是出现在一些网站的首页,多是精美平面结合小动画,再加几个简单链接或仅是一个“进入”链接或无任何提示;

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

9、变化型:即上面几种类型的结合与变化,但所实现的功能的实质是那种上、左、右结构的综合框架型;

2、网站风格有哪些?

网站简单的可以分为:功能型和展示型
功能型:网站在美工设计上可能不适合大块图片,在数据功能上比较强,比如:搜索、会员注册。一般企业网、购物网、大型门户、交友网等。
展示型:追求视觉上的美丽,对功能要求不高,在美工上、设计上要有强烈的视觉感。这种网站一般属于:美容业、女性用品、服饰等。

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

网站简单的可以分为:功能型和展示型

功能型:网站在美工设计上可能不适合大块图片,在数据功能上比较强,比如:搜索、会员注册。一般企业网、购物网、大型门户、交友网等。

展示型:追求视觉上的美丽,对功能要求不高,在美工上、设计上要有强烈的视觉感。这种网站一般属于:美容业、女性用品、服饰等。
可以是企业展示网站、企业宣传网站、门户网站、电子商务、社交交友、综合型网站等等。
1、将你的标志logo,尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语!

4、相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!

二、网页色彩的搭配  

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:  

1、不要将所有颜色都用到,尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

现在是眼球经济时代,什么都要靠包装。你的网站设计的不好看,也无法引起用户的兴趣。我想谁都不喜欢看那些乱七八糟的网站,进去之后看不到网站主题,看不到主要内容,也找不到我们想要的信息。成功网站的第一步,就是从设计开始做起。
一、确定网站的整体风格
网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站,在这里,提供给大家一些参考经验:
1、将你的标志logo,尽可能的放在每个页面上最突出的位置。

2、突出你的标准色彩。

3、总结一句能反映贵站精髓的宣传标语!

4、相同类型的图像采用相同效果。

二、网页色彩的搭配  

无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。在此告诉大家一些网页配色时的小技巧。

1、用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。

2、用两种色彩。先选定一种色彩,然后选择它的对比色。

3、用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。

在网页配色中,还要切记一些误区:  

1、不要将所有颜色都用到,尽量控制在三至五种色彩以内。

2、背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

4、网站制作风格一般可分几种?

(1) 时尚类:适用于「精品、时尚、饭店旅馆、服饰、婚纱…等产业」需要特别注重视觉效果的行业别。时尚风格类型的设计特色呈现出简约、精致、高质感。线条的运用上大致用弧度表现,比较少使用线条。另外照片的运用上建议使用高解析度、饱和度高、鲜明对比色为主,较能表现出高质感的感觉。 (2) 科技类:故名思义,此类型一般适用于「高科技、机械、电子、多媒体…等产业」。科技类型大多使用大量动画特效、多媒体音效及线条并结合主打商品或服务,来传达企业之高科技技术和专业度。 (3) 商业类:商业网站制作适用于任何类型的企业,为目前最多数类型的网站。此类型网的风格偏向简单且网站动线明确为主,不做过度华丽的版面设计或使用过多的动画,以增加网站浏览速度进而提高搜寻排名。 (4) 古典风:商用于企业形象或主要商品风格偏向「中国风或欧洲古典风」的企业。这重类型的网站设计将以复古风格结合的花纹底图或图藤效果来表现柔美复古感。若是属于中国风的网站,通常在设计上会使用一些毛笔字和印章烙印的图片来传达中国文化。 (5) 普普风:适用于主要客群为年轻族群的企业。因普普风格的网站在设计上会较为活泼有创意,使用大量几何图形构成鲜明活泼的版面,因此在颜色的使用上也会较多元化。 (6) 休闲风:适用于「休闲农场、观光景点、户外餐厅…等企业」。此类型的网页设计大多会使用户外的素材,如蓝天白云、天空、树木、绿地等等…来营造出休闲的风格。 (7) 活泼型:适用于「主题乐园、童装、学校…等客群以幼童或年轻人为主的企业」。

5、一般网站设计的风格规范有哪些内容

大多数设计模板有两个部分:
文字标准
视觉标准

这两个标准,是同等重要的,都是整体风格规范的一部分。把元素结合在一起将建立一个整体形象。每一个品牌或企业网站都有自己与众不同的地方。选择一个色调和风格,同步运用在字体和视觉画面的效果上,把你的网站和用户融为一体。
建立网站整理形象的时候,也正是品牌需求考虑到用户和相关利益的人对此有何种期望的时候。是否被期待?是否有关联,是否愿意在这样的网站上进行浏览使用等交互行为?
语言风格

虽然我们将主要精力集中于网站风格规范的视觉方面,但语言风格是非常重要的,是整体网站的一部分,也是你与用户“交谈”的方式。语言风格是正式还是轻松的?是冗长或更简洁的?
用同样的方式为网站格式写你的风格规范。这将有助于提示你的团队知道网站的初步设想,以及如何运用语言风格去协助于品牌标识。
语言风格是与每一位用户沟通使用的。返回到MailChimp,我们通过他的品牌语言风格的塑造上全面审视。注意到公司谈论及它的吉祥物,举个例子:“Freddie是我们的吉祥物。我们不需要使用他与我们的logo组合。Freddie的脸右侧面的,他的表情一直是眨着眼睛的。”
“准则”及用途

你的风格规范应该是你设计的“剧本”。(可能是比“规范”听起来更通俗易懂?)
它应该概括了如何以及何时使用的字体、颜色和所有其他设计元素类型,让人更容易理解。包括:
调色板,包括标准色和可适用的色彩
排版,可适用的字体、字号、缩进、行间距跳转
LOGO,包括尺寸和位置
图标或元素样式(包括分享按钮等)
拼写,选项和格式风格(应该遵循哪种编辑格式? APA格式?AP格式?或其他?)
照片格式,包括颜色、裁剪尺寸和视觉效果
SEO信息,如ALT标签和关键词
电网标准(适用于网络或打印)
间距方面的考虑(是否设计的太松或太紧)
反馈接触信息(可以向团队成员提问或建议的)
简单而具体的概念

这可能是最困难的部分,你需要明白这些信息,并将其烂熟于心,理解成简单、具体、可操作性强的概念:
当涉及到风格规范不能走极端,只是一个视觉参考,而通过这种方式去设计。
组合相关内容,并快速相关联,比如页面的颜色、已经跳转进入另一页的图形和照片等。
为可以显示的内容举一些相似的例子,不需要解释的部分用占位符。
尽可能地提供细节,色彩样式,例如,包括RGB(或HEX )和CMYK值等,使颜色可以规范使用。
打破部分常用的元素案例去设计。
片段和实例

无论你的设计风格规范是用于印刷还是数字使用或基于Web的文档,应该包含有用的工具。部分有用的元素品牌案例做得到也可能做不到,但他可以很容易把重点放在你想看到的品牌视觉上。
然后,创建一个易操作的目录。创建原型组(或一组常见的元素,这取决于你使用的软件) 。保存在一个常用的位置,使其容易操作并且生成容易修改的文件。
为参与该项目的每个人提供基于云端软件的工具列表。(这包括链接、用户名等基本信息。)确保所有字体包、logo和图像文件是在一个常用的位置,所有的使用者都知道他们在哪里。 (在另一个地方保留备份,以防原文件、作品丢失。)
创建代码片段,易于复制并粘贴到项目主列表。这样不用每次重建,常见的元素需要被分享在一个每个人都可以访问的共享位置。
最后一步是进化优化。每件事情都可能会变,而且必然要经历蜕变。
执行风格规范

最后,最大的问题是“如何让人们遵循风格规范呢?”按照以上这些列出的内容,你已经有一个很好的方式拥有了设计的轮廓,具有了简单、具体的概念。
风格规范是很容易被追随的,就像你写的网站一样。语言是简单的和不生僻的,可以让人们去追随这些准则。
风格规范应该留下足够的设计空间对于其灵活性和实际制作上。就像你的品牌,在一定范围内,可以帮助团队成员发挥他们设计的创造力,也同时创造新的东西。风格规范的所有者也是如此,这是指批准、更新和变化设计风格规范的人,并能回答有关设计决策问题的所有人。这个“所有者”可以是个人团队,或者更大组织的规模。

6、设计一个商业网站应该具有哪些风格特征?

网络营销的角度看,现在的企业网站设计水平并不高。网站是企业的理念体现,是网络营销的基础。在网站的设计中,既要考虑的商业性,又考虑到艺术性,网站是商业性和艺术性的结合,同时网站也是一个企业文化的载体,通过视觉的元素,承接企业的文化和企业的品牌,好的网站设计,有助于企业树立好的社会形象,也能比其他的传播媒体更好的更直观的展示企业的产品和服务。所以这些网站不仅是商业性和艺术性,它也是一个企业文化和品牌的载体。只有提高到这样的高度,才能把网站设计好。

好的企业网站是个什么样子?首先看商业性,就是直接为企业推广提供的服务,有很多的技术专家在做这方面的工作。为了完成企业商业目的进行的设计就是商业性设计,包括商业性的功能设计,栏目设计,页面设计等。和商业性相对应的就是艺术性,浏览者的是否获得愉快的体验,国内的网站在这方面客观说都做得不是很好。艺术性要求怎么更好地传达一个信息,怎样让受众更好的接触信息,怎样给受众创造一个愉悦的视觉环境,留住受众视线等。比如,有些飞来飞来的广告,不是留住大家的视觉,而是干扰大家的视觉。视觉被干扰以后,思路就没了,当然也没有什么愉悦感。

我们从商业性和艺术性两个维度把网站分为六大类。第一类是资讯性的网站;第二交易类网站;第三资讯和展示类的网站,第四交易展示类,比如说泉州这个网博会的这个网站,可以认为是交易展示类网站;第五是展示和体验类;第六就是展示类,纯粹的视觉冲击。从第一到第六,越讲究网站的艺术性,反过来,越讲究网站的商业性。网站的设计是商业性和艺术性结合的。举一个例子,选国内外资讯性的网站,一个是国内瑞丽杂志的网站,第二个是美国“Seventeen”17岁的网站,也被认为美国最好的面向女孩的网站。这两个都是面向女孩的网站,都以粉红为基调,粉红就是女性的象征。可是国内这个资讯的网站太拥挤,把所以的信息都写在脸上,美国这个网站就比较的有意思,做搭配的结构很合理,它有动态色彩具体一系列的搭配都很合理。第二交易类的网站,在网上可以卖东西,这是美国纽约的一家百货公司做的网站,做得很好,很清晰,做服装交易的,你可以看到,很漂亮。下面四个企业网站的代表,可以划入资讯展示类的网站,第一家衫衫西服的网站,第二家是福建著名企业七匹狼的网站,第三家是雅戈尔的网站;第四家是意大利一个著名的服装品牌贝纳通的网站。这四个网站,你们看一下,哪个好,可能不需要我说,显然,贝纳通公司的网站既清新又漂亮,特别是小女孩看完后立即产生购买的欲望,七匹狼网站红黄相接,太土了,一看就觉得有浓厚帝王气息;衫衫网站又艺术化太强了,看上去很浪漫,但是浏览者不知所云,让人看了这个商业性网站不知道在干什么。杉杉的网站可能要“脱亚入欧”,摆脱中国企业的网站土形象,来个洋的,可是又太浪漫了。而雅戈尔是用企业模型做的而不是实景让人感觉这个企业好像是在造假。

接下来是展示和体验类的网站,这是迪斯尼的网站,颜色做得不好看,我们说一个网站的颜色一般不要超过五种,超过五种就乱了。但是迪斯尼由于是给小孩的网站,所以可以超过5种颜色,一般成人的网站不要超过五种。这个是既展示产品,又提供的企业,迪斯尼也是做得很好。最后一个是展示类的网站,展示类的网站就是展示我们这个企业的作品的,现在举的东易日盛是一家装修公司,它把它做装修的作品全部展示在网上,东易日盛负责人告诉我,他35%的定单来自互联网。因为做装修的人家里都有电脑,装修之前,先到互联网看一下,35%的定单来自于互联网,这个对公司的设计完全是艺术化的。

我们刚才举这些的网站例子,都是从设计开始,反复修改体验才能达到的。所以网站的设计,不是找两个会计算机的技术员,在那鼓捣两三天,那个网站就叫商业网站,还差得还很远。任何一个网站,都要经过局部的非常详细的雕塑,让观众有一个愉悦的感觉,看得很舒服,这才是最重要的,才能达到商务的目的。

7、简述网页设计的风格有哪些

从网络营销的角度看,现在的企业网站设计水平并不高。网站是企业的理念体现,是网络营销的基础。在网站的设计中,既要考虑的商业性,又考虑到艺术性,网站是商业性和艺术性的结合,同时网站也是一个企业文化的载体,通过视觉的元素,承接企业的文化和企业的品牌,好的网站设计,有助于企业树立好的社会形象,也能比其他的传播媒体更好的更直观的展示企业的产品和服务。所以这些网站不仅是商业性和艺术性,它也是一个企业文化和品牌的载体。只有提高到这样的高度,才能把网站设计好。

8、目前比较流行的网站设计风格有哪些

就是HTML5+CSS3技术制作的网站,比较美观、好看,自适应,页面效果非常华丽

9、网站风格主要包括哪些

中国互联网的发展始于上世纪80年代末,随着近30年的发展,互联网已经深入千家万户,时刻在改变着人们的生活。而网站建设行业是互联网的第一道门,今天,我想和大家探讨一下各国网站建设的风格和思路,举例欧美、日韩、中国的区别,供大家参考。

中国的网站建设行业是从上世纪90年代初开始的,第一批做网站的公司基本上都做的不错,随着几十年的沉淀,行业的技术已经趋于成熟,而设计在不断的提升,这是网站建设行业的进步。那么,中国网站建设公司在设计网站的时候通常是什么风格呢?

中国网站建设的风格:网站建设是企业形象包装的基础,中国人自古以来,喜欢玩概念论,譬如说:做网站要力求高端、大气、上档次;低调、奢华、有内涵。区区六个词,难倒一大片设计师,简单明了的说就是简洁大气。尤其是网站的企业文化包装的虚虚实实,实实虚虚,让国外用户看的头晕目眩。在中国,网站建设的风格主要是宣传企业文化和服务,再者是产品。

欧美网站建设的风格:我见过许多欧美网站,有些是创意型的,但是通俗的网站都是以展示产品为主,很直截了当的把产品铺满在首页,让用户进入网站可以在第一时间浏览到所以重点产品,简单明了。因为欧美用户的思维和国人不太一样,譬如在与人沟通问题上,欧美人喜欢先总结后陈述,而中国人喜欢先陈述再总结,这是两种完全不一样的思维模式。所以,在网站建设方面,欧美的网站都是比较直观的,不会绕来绕去。

日韩网站建设的风格:日韩网站设计都非常新颖,用韩国人的话叫很卡哇伊。不缺乏浪漫的色彩。在网站建设思维模式上,日韩的网站和中国、欧美都是不同的。日韩的网站喜欢以视觉吸引用户,不管是做什么行业的网站,看日韩的网站,总会有很多创意的成本在里面,不是像国内网站千遍一律的模式,他们力求新颖、动感。这点真的值得国内网站设计公司学习。

以上是我个人对不同地域不同国家网站建设的风格,表达了一些我的看法,也希望可以和更多同行朋友一起交流,让中国的网站设计水平能达到国际水平,现阶段,国内富有创意的网站十分少有,希望在未来的发展中,国内的网站设计水平能够飞速发展。

10、网站风格怎样设计更美观

1. 研究品牌

首先,你需要对品牌展开研究,理解其含义,了解品牌背后的意义,与公司团队进行沟通,并了解公司的愿景、使命和价值观。为了保证你所编写的风格指南能够在视觉和情感上正确彰显出公司形象,一定要深入挖掘品牌。

作为一名设计师,如果你不会写代码,那么可以打开Photoshop,给文档拟定一个标题,并对文档的性质和用途进行一下简短的说明。

如果你会写代码,那么最好使用预编程的资源创建一个html文档,以便在后期直接使用。

2. 限定字体

根据Oliver Reichenstein的理论,Web设计中95%的工作量都集中在字体上。

字体的重要意义在于其是访客和网站之间最为关键的沟通工具之一。

确定层级次序并提供对应的说明。首先是标题样式:h1、h2、h3、h4、h5和h6。然后是正文文案:粗体和斜体等变化。考虑一下需要用于小型链接、简介文字等内容的自定义文案。提供字体系列、粗细和颜色等。

Style Guides by Zech Nelson

3. 调色板

人类能够感知不同的颜色并将色调与自己所熟知的品牌相互联系起来,神奇吧!举例来说,一提到可口可乐,你一定会首先想到红色。

首先在风格指南中设定网站内使用最多的主色调,主色应该包含不多于三种阴影。但是在有的情况下,你可能还需要使用二级甚至三级颜色来呈现用户界面,因此不要忘了对这些颜色进行设定。另外还需要加入白色、灰色和黑色等中性颜色以便让主品牌颜色更加突出。

Guest Center color palette by Chloe Park

4. 语言

这里所说的语言实际上就是指文案。如前所述,在开始编写风格指南之前你已经对品牌进行了研究,而且发现目标品牌的风格是年轻、潮流。那么如果没有现成的文案语言方向,你就需要进行设定。在这方面,你可以提供一个示例来表现语言必须既专业又有趣,同时还要热情。例如,你可以说“貌似你碰到了网上广为流传的404错误”来取代死气沉沉的“出现404错误”。这样的语言能表现出网站并不具有太强的商业气息。有时候亮点就隐藏于细微之处。

5. 图标

图形标记已有几千年的历史,在文字和语言出现之前就已经存在。在项目中善用图标能够让访客一眼就明白当前的情况以及下面将要出现什么情况。另外,恰当的图标相比色调、文案和图形更能够体现出目标内容的背景。在使用图标时,要想想目标受众是谁,他们的宗教和背景情况如何,切勿造成他们的误解。还要说的是,仔细思考品牌及其所代表的价值,千万别犯在大型银行网站上使用手绘风格图标这种错误。

Iconfinder 是帮助你寻找图标的最佳工具

NounProject 使用图标打造出了通俗易懂的视觉语言

6. 图片

图片比千言万语更有说服力。你所使用的图片一定要能够代表网站的风格和方向。再强调一遍,一定要仔细考虑品牌的价值和公司的使命。例如,某个有关水源慈善的网站使用极具冲击力且情感强烈的慈善类图片呼吁人们思考拥有水、食物、电力和教育等生活必需品是多么幸运。

可以免费获取图片的不错网站:10个值得设计师收藏的高清照片设计素材网站

7. 表单

表单是网站或web应用表现其交互和动态性,并让用户能够输入数据以便你后期处理并开展相关工作的关键所在。

务必要构建起一套层级体系并收纳一切可能来自表单的反馈——主动反馈、鼠标悬浮反馈并加入错误、警告和成功提示(包括密码强度太弱、邮件地址无效或简单的“邮件已发送”消息)。

8. 按钮

按钮是颜色、表单和语言的组合。你可以依靠上面介绍的且已经创建好的资源,使用不同的设计方案打造外观统一的功能性按钮。

9. 空间调整

空间调整为什么也要收录在风格指南里?实际上空间调整是风格指南当中非常重要的一个部分。在对空间调整方式进行界定时,可以采用规定网格布局的方式,也可以对标题、按钮、图片、表单等元素之间的空间距离进行分门别类的规定。

空间调整的重要意义在于其能够给各个元素提供更多的表现空间,空间使用的协调一致能够让网站看起来更加整齐、专业。

10. 注意事项

最后要说的是:把注意事项这一节做成常见问题解答的形式,展现出最常见的错误类型,并给出预期结果作为参考示例。

与网站风格设计相关的知识