如何设计网站风格(怎样设计网站或网页)

如何设计网站风格,怎样设计网站或网页

内容导航：

网站风格怎样设计更美观

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

常见的几种网站设计风格

网站设计风格与色彩是什么

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

1.
研究品牌首先，你需要对品牌展开研究，理解其含义，了解品牌背后的意义，与公司团队进行沟通，并了解公司的愿景、使命和价值观。为了保证你所编写的风格指南能够在视觉和情感上正确彰显出公司形象，一定要深入挖掘品牌。作为一名设计师，如果你不会写代码，那么可以打开Photoshop，给文档拟定一个标题，并对文档的性质和用途进行一下简短的说明。如果你会写代码，那么最好使用预编程的资源创建一个html文档，以便在后期直接使用。2.
限定字体根据Oliver
Reichenstein的理论，Web设计中95%的工作量都集中在字体上。字体的重要意义在于其是访客和网站之间最为关键的沟通工具之一。确定层级次序并提供对应的说明。首先是标题样式：h1、h2、h3、h4、h5和h6。然后是正文文案：粗体和斜体等变化。考虑一下需要用于小型链接、简介文字等内容的自定义文案。提供字体系列、粗细和颜色等。Style
Guides by Zech Nelson3.
调色板人类能够感知不同的颜色并将色调与自己所熟知的品牌相互联系起来，神奇吧！举例来说，一提到可口可乐，你一定会首先想到红色。首先在风格指南中设定网站内使用最多的主色调，主色应该包含不多于三种阴影。但是在有的情况下，你可能还需要使用二级甚至三级颜色来呈现用户界面，因此不要忘了对这些颜色进行设定。另外还需要加入白色、灰色和黑色等中性颜色以便让主品牌颜色更加突出。Guest
Center color palette by Chloe Park4.
语言这里所说的语言实际上就是指文案。如前所述，在开始编写风格指南之前你已经对品牌进行了研究，而且发现目标品牌的风格是年轻、潮流。那么如果没有现成的文案语言方向，你就需要进行设定。在这方面，你可以提供一个示例来表现语言必须既专业又有趣，同时还要热情。例如，你可以说“貌似你碰到了网上广为流传的404错误”来取代死气沉沉的“出现404错误”。这样的语言能表现出网站并不具有太强的商业气息。有时候亮点就隐藏于细微之处。5.
图标图形标记已有几千年的历史，在文字和语言出现之前就已经存在。在项目中善用图标能够让访客一眼就明白当前的情况以及下面将要出现什么情况。另外，恰当的图标相比色调、文案和图形更能够体现出目标内容的背景。在使用图标时，要想想目标受众是谁，他们的宗教和背景情况如何，切勿造成他们的误解。还要说的是，仔细思考品牌及其所代表的价值，千万别犯在大型银行网站上使用手绘风格图标这种错误。Iconfinder
是帮助你寻找图标的最佳工具NounProject 使用图标打造出了通俗易懂的视觉语言6.
图片图片比千言万语更有说服力。你所使用的图片一定要能够代表网站的风格和方向。再强调一遍，一定要仔细考虑品牌的价值和公司的使命。例如，某个有关水源慈善的网站使用极具冲击力且情感强烈的慈善类图片呼吁人们思考拥有水、食物、电力和教育等生活必需品是多么幸运。可以免费获取图片的不错网站：10个值得设计师收藏的高清照片设计素材网站7.
表单表单是网站或web应用表现其交互和动态性，并让用户能够输入数据以便你后期处理并开展相关工作的关键所在。务必要构建起一套层级体系并收纳一切可能来自表单的反馈——主动反馈、鼠标悬浮反馈并加入错误、警告和成功提示（包括密码强度太弱、邮件地址无效或简单的“邮件已发送”消息）。8.
按钮按钮是颜色、表单和语言的组合。你可以依靠上面介绍的且已经创建好的资源，使用不同的设计方案打造外观统一的功能性按钮。9.
空间调整空间调整为什么也要收录在风格指南里？实际上空间调整是风格指南当中非常重要的一个部分。在对空间调整方式进行界定时，可以采用规定网格布局的方式，也可以对标题、按钮、图片、表单等元素之间的空间距离进行分门别类的规定。空间调整的重要意义在于其能够给各个元素提供更多的表现空间，空间使用的协调一致能够让网站看起来更加整齐、专业。10.
注意事项最后要说的是：把注意事项这一节做成常见问题解答的形式，展现出最常见的错误类型，并给出预期结果作为参考示例。

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

一、首先从功能与设计目标来看，
H5专网页主要有以下4大类型：1.活动运营型为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。
与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。
从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
2.品牌宣传型不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。
在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
3.产品介绍型聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。
精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。
用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
二．形式为功能服务在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。
如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。
1.简单图文简单图文是早期最典型的H5专题页形式。
“图”的形式千变万化，可以是照片、插画、GIF等。
通过翻页等简单的交互操作，起到类似幻灯片的传播效果。
考验的是高质量的内容本身和讲故事的能力。
2.礼物/贺卡/邀请函每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。
既然是礼物，那创意和制作便是重要的加分项。
3.问答/评分/测试问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。
一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
4.游戏从
“围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。
品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
三．为设计加分的4个要点一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。
在这里总结出以下的设计要点：1.细节与统一要成就高品质的用户体验，必须考虑到细节与整体的统一性。
复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
2.紧跟热点，利用话题效应想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
3.讲个好故事，引发情感共鸣不论H5的形式如何多变，有价值的内容始终是第一位的。
在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
4.合理运用技术，打造流畅的互动体验随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。
相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
结语随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。
简约风格。
这类风格是比较常见的类型，其实简约风格是比较抽象的一个概念，简单的来说，页面设计比较单一，主体色彩不会太过明显，主要突出的就是功能性。
像我们常用的一些搜索页面就属于这类风格，虽然看上去很简单，但是却很方便，实用性更强。
这类风格的网页只需要简单的添加一些品牌相关信息，或者是logo，就可以满足日常的需要，这也适合一些对网页设计要求不高的企业选择。
交互风格。
大多数的网站设计公司都会推荐大家使用这样的交互风格，主要是增加了留言或者在线互动的版块，因为我们建立网站的主要目的还是在于推广，如果能够直接和目标群体交流，不管是对企业形象还是对产品营销都有一个很好的推进作用。
尤其是一些电子商务性质的企业或公司一定要做好这方面的准备，交互类型的网站也应该成为这类公司的首选。
炫酷、特效风格。
很多宣传型的网站可以在网页上增加很多的特效，进而来增大网站的宣传效果，在视觉效果上吸引更多的客户。
但是要告知大家一点，这类特效需要使用较大的空间，设计也比较麻烦，收费必然会很高，比如弹出对话框或者是播放视频、动画等，都需要准备好材料，而且过多的特殊效果对于网站的后期优化也是不利的。
简约风格。
这类风格是比较常见的类型，其实简约风格是比较抽象的一个概念，简单的来说，页面设计比较单一，主体色彩不会太过明显，主要突出的就是功能性。
像我们常用的一些搜索页面就属于这类风格，虽然看上去很简单，但是却很方便，实用性更强。
这类风格的网页只需要简单的添加一些品牌相关信息，或者是logo，就可以满足日常的需要，这也适合一些对网页设计要求不高的企业选择。
交互风格。
大多数的网站设计公司都会推荐大家使用这样的交互风格，主要是增加了留言或者在线互动的版块，因为我们建立网站的主要目的还是在于推广，如果能够直接和目标群体交流，不管是对企业形象还是对产品营销都有一个很好的推进作用。
尤其是一些电子商务性质的企业或公司一定要做好这方面的准备，交互类型的网站也应该成为这类公司的首选。
炫酷、特效风格。
很多宣传型的网站可以在网页上增加很多的特效，进而来增大网站的宣传效果，在视觉效果上吸引更多的客户。
但是要告知大家一点，这类特效需要使用较大的空间，设计也比较麻烦，收费必然会很高，比如弹出对话框或者是播放视频、动画等，都需要准备好材料，而且过多的特殊效果对于网站的后期优化也是不利的。

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

极简风：

越少，越经典“这是不少设计大师遵循的设计风格。

“好的设计是尽可能少的设计”这条原则也同样适用于网页设计中。

除非必要的信息，页面中每增加一个元素，都会引起用户过多的小，甚至成为用户完成目标任务的阻碍。

极简设计的好处就在于它能最大化节约用户的时间成本。

无边框风：

这里的边框是指任何类型的装饰性容器。

通过去掉装饰性的容器，加强基本内容的设计感。

提升图片质量和排版布局，从而改变整体因无装饰性容器的视觉表现。

插画风：除了使用大量图片作为背景或主体元素外，

图形插画的运用也是一种很好的方式。

网页Banner可以运用插画来表达网站主题，同时加上插画图标的点缀，使网页看起来清新有趣，加强网站本身的独特性。

扁平风:

扁平化设计可以说是时下最常用的网页设计风格了，它弱化了材质、渐变、阴影，去除了冗余信息的图形元素、排版。这种风格设计可以使画面显得更加平滑，提升了网站内容信息的视觉层级，更加方便用户快速寻找自己需要的内容。同时扁平化的界面能更好实现不同尺寸的转化。这也是现在互联网公司较长采用的一种风格。

3D风格:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境，而是那些运用少量3D效果使整个网页显得更加灵动，通过扁平化的基础上，添加一些生动的非扁平元素，给网站带来了原本缺乏的纵深感，同时提升主体视觉吸引力。

纵向分割:

这里所说的3D风格不是纯粹的使人感到身在其中的3D坏境，而是那些运用少量3D效果使整个网页显得更加灵动，通过扁平化的基础上，添加一些生动的非扁平元素，给网站带来了原本缺乏的纵深感，同时提升主体视觉吸引力。

四、网站设计风格与色彩是什么

答：随着网络的日益普及，网络正以一种前所未有的冲击力影响着人们的生活，越来越多的人开始借助网络进行工作、交流、学习等活动。当人们通过浏览器进入互联网这个虚拟世界时，进入眼帘的是各种各样的网页，如何设计出一个创意新颖、设计精美、结构合理的网站，来吸引众多的人关注自己的网站，成为网站设计者日益关心的问题。一、网站设计的风格“风格”是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语）、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素。风格是有人性的，不管是色彩、技术、文字、布局，还是交互方式，只要能由此让浏览者明确分辨出这是本网站独有的，这就形成了网站的“风格”。一般都要求：清纯简洁，主题鲜明，内容编排得当合理、有一定的艺术感，美观、实用，相关链接正常，能体现网站的基本功能，可以从以下几个方面来为网站设计一个独特的风格。1.网站标志(LOGO)LOGO是指网站的标志，标志可以是中文、英文字母，也可以是符号、图案等。标志的设计创意应当来自网站的名称和内容。比如：网站内有代表性的人物、动物、植物，可以用它们作为设计的蓝本，加以卡通化或者艺术化；专业网站可以以本专业有代表的物品作为标志。最常用和最简单的方式是用自己网站的英文名称作标志，采用不同的字体、字母的变形、字母的组合可以很容易制作好自己的标志。2.网站色彩网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。颜色搭配是体现风格的关键。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。例如IBM的深蓝色，肯德基的红色条型。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。一般以白色和黑色的背景网页最好做，颜色搭配最方便；亮色与暗色配合，最容易突出画面，如黑与白，红与黑，黄与紫；而近似的颜色的搭配，能给一种柔和的感觉，如墨蓝与淡蓝，深绿与浅绿。最好能给主页定一个主色调，不要搞得花花绿绿的。3.设计网站字体和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵，选择更贴切的字体。需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的计算机里没有安装特别字体，他看到的只能是乱码，那么辛苦的设计制作便付之东流了。4.使用精炼有效的语言现代生活节奏加快，人们往往没有时间看大块文章。为了节约时间，在单位时间内获取最大量的信息，人们需要精练的信息，即信息精品，要用信息语言来表达信息内容。所谓信息语言是指以下公式：信息=基本事实＋数据描述＋专家观点。信息语言摒弃一切广告性词句、文学性修饰词句，不欢迎一切关于意义、重要性的过分渲染。尽量采用数字说话，欢迎定量描述，反对过多的定性描述，特别是无法形成准确概念的定性描述。用信息语言描述，任何信息都应该有出处，有时间，分类准确。当然，应当满足信息的时效性、准确性、完整性、精练性等固有的特点。在此特别注意的是，不要出现错别字、病句。5.设计网站宣传语网站的宣传语也可以说是网站的精神、主题与中心，或者是网站的目标，用一句话或者一个词来高度概括。用富有气势的话或词语来概括网站，进行对外宣传，可以收到比较好的结果。二、网站设计的色彩搭配打开一个网站，给用户留下第一印象的既不是网站的丰富内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决与设计者对色彩的运用和搭配，因此专业人士把色彩制作成色系表，根据这些色系让网站也有其自身的色系，网站的色系是浏览者整体的视觉观感，若一个网站色系能有一致性，不仅会使网站看起来美观，更能让浏览者对内容不易混淆，增加了浏览的简洁与方便。而网站的色系更能衬托出网站的主题，若色系能与主题合理搭配，将会增加浏览者的易读性。网站的色系包含了网页的底色、文字字型、图片的色系、颜色等等，这不单只是将颜色搭配得当就算完美，还要配合每个内容，及网站主题.1.网页的底色网页的底色是整个网站风格的重要指针。举例来说，以黑色作为背景颜色的网页，因黑色本对人的视觉上会造成黯淡的感觉，若是拿来用作活泼的儿童网站，就是不适合了。因为小孩子是天真无邪的、活泼的、有朝气的，与黑色的沉稳、黯淡，很难联想在一起。当然，每个人的审美观不同，可能也会对颜色的代表性看法不同，但既然网站不是只写给自己看的，就应该要注意到大部分人可能会有的观点，然后以众人居多的观点出发，来设计网页。2.文字字型文字字型上的设计，最好的网站是以所有浏览者都能看到的字型为主。常会看到有许多网站要求浏览者须自行下载某种字型，才能达到最佳浏览效果，这是种非常奇怪的行为。毕竟浏览者只是来找资料或是来看网站的内容，不可能会因为这种“为达最佳浏览效果”，而自行下载所需要的字型。当所要求的字型若不下载，并不会影响到网站内容上的浏览与不便，那么对浏览者的要求就微乎其微不可能发生任何作用。这么一来，对于网页设计者来说，无非是非常可惜的，因为当初的设计风格却未能让浏览者一窥全貌，岂不是白费心思的吗？3.图片的色系以色彩学简单的区分，色系可分为冷色系与暖色系，再详细一点的区分，又可分出各种颜色的色系，而色系的区分，就在于主观浏览意识上的差异了。如何将图片的色系与网站整体色系相对应，就是比较困难的地方了。要绘制一张图并非易事，要绘制一张符合自己网页风格的图，更是困难重重。大部分的网页制作者，并不大可能驾轻就熟的使用影像处理软件或绘图软件，于是乎，网页素材的网站就开始盛行了。当然，不会使用绘图软件并不代表网页就不能设计的很出色，若是能将网络上的素材资源妥善利用，网站也是可以走出自己的风格的。而该怎么选择适合自己网站的图片，就是门很大的学问了。以图片内容来说，能切合网站主题最好，若不能，也别差异太多。以颜色来说，若一个网页是蓝色的底色，但整个网页的图片却乱七八糟，各种颜色纷纷出笼，更糟的是，蓝色是属于冷色系的颜色，若以蓝色为底的网页，却尽都是大红色、橘色的图片，那将会使整张网页看起来就像垃圾堆，杂乱无章。所以，可以简单的归纳出，网页与图档的颜色，色系一致或是视觉效果一致，将会使网页看起来更为美观且有自己的风格。4.网页的颜色网页的颜色，并非单一就图文件、文字颜色、或是底色为主，而是以浏览者的角度来观看，整体网页看上去是偏向哪种色系。常常见到许多网站虽然色系搭配的很好，但却是没有自己的风格。以目前流行的柔色系、粉色系网站来说，就是失了自己独到的风格。因为使用粉色系的网站，不外乎都有相同的特点，文字颜色浅，底色也以浅色系为主，这样除了没有自己的风格外，看起来既不大方也难登大雅之堂。以各大搜寻网站来说，根本不会做这样的设计，因为文字颜色淡，加上底色浅，对浏览者来说，阅读上非常吃力，所以这样的设计风格也应尽量避免。一个有自己风格，且阅读起来舒适大方的网页，并不可能一次就写好，而是需要经过不厌其烦的修正、调色，才能达到最佳浏览效果的。三、网页的美化设计1.使用CSS优化网页外观使用CSS来获得对整个站点所有WEB页面的外观控制。设置页边空白，页面填充，边界，颜色和背景。对任意网页元素设置字体大小及改变字体外观。创建动态活动链接。创建CSS风格的完全兼容的网页。CSS的主要好处就在于，你不用去修改网页文件，只要修改这个页面连接的CSS文件，就可以实现不同的显示效果，包括底色、背景图片、文字大小、颜色、边框……等等。网站的版面、布局要求，不能占用较大的边幅放栏目图片，正文的位置不能少，图片与文章的搭配要平衡，过多使用大图片，大大增加了传输流量，影响了网站浏览者阅读的速度，要优化网页就尽可能使用CSS实现，灵活地使用CSS，可以使页面精致漂亮而又不会占用过多的系统资源，所以很有必要花些时间研究一下。2.用表格美化页面布局表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。