网页图标的设计原则有哪些 网页图标设计规范

鲜亮明快的色彩搭配能够为应用图标带来更多的关注度，艳丽的色彩搭配正在成为一个潮流，越来越多的应用图标选择了非常艳丽的色彩搭配。下面介绍网页图标的设计原则有哪些，希望对您有帮助。

1.独特的设计语言

现在应用市场上的应用图标数量十分惊人，要想在数以万计并且很多图标造型十分相近。要想在众多的应用图表中脱颖而出，设计师在设计图标时就必须强调应用图标的独特性，突出产品的核心特征和属性。独特的设计语言才会让应用图标在数以万计的应用图标中脱颖而出，让用户形成深刻的印象。

2.简洁的设计形式

应用图标在手机屏幕的显示尺寸仅为120*120px，这个尺寸是最重要的设计尺寸。并且很多地方的图标显示会比这个尺寸更加小。所以在设计图标的时候就要非常注重图形的简洁，避免在小尺寸展示时候不清晰不能被识别的情况。同时简洁的图形设计形式也会提升图标的设计品质。

3.准确的产品属性传达

应用图标代表的是一个产品的属性和功能作用。一个高品质的应用图标应该能够让用户在第一眼就能够感知到这个应用的属性和功能。例如拍照的产品就是比较典型的一类。这类产品基本都采用了拍照图标作为应用图标设计的主要元素。这样的设计方式能够准确快速的传达产品属性。另外图标设计应当高度提炼产品特色找到最能代表产品属性的图形元素，并对这个元素进行突出设计。

4.统一的设计规范

为了更好的统一应用图标的设计样式，苹果公司专门精心设计了ios图标栅格作为设计参考。它能让设计师设计的图标和ios系统的图标风格保持一致，保证用户手机屏幕上的应用图标风格的一致性。应用图标整体风格的统一，不会让用户感觉到桌面的凌乱，这样才能营出造良好的用户体验。

5.品牌形象的延续

移动互联网的兴盛是PC互联网的延续，在pc互联网时代已经崛起了诸多知名的互联网品牌。例如我们耳熟能详的百度、网易、搜狐等品牌，它们已经建立起非常强大品牌印象和品牌影响力，并具有超强的品牌识别度。所以在设计应用图标的时候应当充分的利用已有的品牌形象加以运用。让品牌的深厚积淀继续发挥作用并且让品牌形象延续从而赋予品牌更强的生命力。

6.避免使用照片

在应用图标设计中应该尽量避免直接使用照片作为图标使用。因为照片缩小后会丧失很多细节，导致图标内容不能被识别。另外由于图标缩小后图片质量会受到很大影响，极大的影响了应用图标的品质。所以设计是应当尽量避免直接使用照片作为应用图标。

7.艳丽的色彩

鲜亮明快的色彩搭配能够为应用图标带来更多的关注度。艳丽的色彩搭配正在成为一个潮流，越来越多的应用图标选择了非常艳丽的色彩搭配。其中对比色和互补色的渐变搭配是最有代表性的设计手法。无论是纯色的色彩运用或者是渐变色的色彩运用。

8.多场景测试

在设计应用图标的时候也要考虑到应用图标的展示场景，避免图标不能完美展示的情况。应用图标不仅仅是展示在各种尺寸的手机屏幕上，也会在应用市场、设置栏、手机状态栏等多处进行展示。在不同场景下应用图标需要根据需求做相对应的设计优化，例如应用图标在状态栏展示的时候就应当适当的为应用图标做一些简化处理去掉不必要的装饰元素，以保证在超小尺寸场景下图标也能清晰展示。反过来如果在大尺寸的场景下进行展示，也应该适当的添加一些设计细节，来保证应用图标的品质。避免给用户带来简单粗糙的视觉印象。

9.避免使用大量文字

在应用市场上也常常能看到一些为了传达产品信息而大量使用文字作为应用图标的产品。这种应用图标的设计手法粗暴简单，由于文字太多所以只能在有限的空间内将文字缩小展示，导致应用图标看起来拥挤用户也很难看清楚信息。大量使用文字的另一个致命的后果是会大大降低应用图标的设计美感，不仅不能使用户产生好的印象反而会招致用户的反感。

当下的网站建设随着网络商业繁荣发展得到了更多的企业需求，所以刺激着网站建设发展，而在影响网站建设过程中网站的标志设计很是重要，要想打造一流的网站标志设计原则有哪些呢?还是听一听专业人士分析吧。

一、符合人们的认知规律

我们的网站要想更好的吸引客户网站标志设计很是重要，首先这个标志设计一定要符合浏览者的认知规律，如果连浏览者的认知度都不熟悉那不可能赢得人们的支持，并且充分的考虑人们的审美度和审美心理，这些都是吸引浏览者的重要因素。

二、要做到主题突出

网站标志设计原则中不仅仅是为了多一个标志，而是通过这个标志更好的突出网站，让人们更好的认识网站，有效的提升网站的知名度和影响力，所以这个网站标志设计必须与众不同，更有新意，一定要主题突出，通过标志主题能够更好的认识到网站的性质，能够更好的满足需求。

三、一定要引人注目

网站的标志一定程度上体现的是网站知名度和影响力，所以网站的标志一定要引人注目，而如何引人注目成为了更多的设计者备受关注的问题，采用独到的设计理念、新颖的设计手法这些都很是重要，独到效果是能够让更多的浏览者更容易识别、辨认、记忆。

四、突出实用性原则

标志设计不是为了艺术展示，更是通过这个艺术作品来更好的达到应有的社会价值，也就是通过标志能够吸引更多的客户的加入，从而有效的提升网站的知名度和影响力，发展壮大企业实力。

设计有一些原则是共通的，不管是产品设计、平面设计、还是服装设计，设计的形式美法则都是通用的。今天跟大家分享对齐原则在网页当中的运用。对齐，是很重要却很容易被遗忘的一点。有四大原则：对比、重复、对齐、和亲密性。书中提出：任何东西都不能在页面上随意摆放，每个元素都应当与页面上的另一个元素有着某种视觉联系。这样能建立一种清晰、精巧而且清爽的外观。那就开始今天的网页设计中对齐原则课程之旅。

视觉上遵从保持尺寸和边缘的一致性。

对齐可以让一个网站页面看起来比较规范整齐。对齐一般有三种方式：左对齐、居中对齐、右对齐。

在网页当中运用比较多的是居中对齐和左对齐，大篇幅的右对齐可读性上比较差，所以出现的频率不高，小部分的出现还是有的。不管是哪种方式的对齐，网页中对齐后的文本一定要考虑可读性的问题，千万不要本末倒置。

对齐在网页中的运用无非还是上面那三种对齐方式，正常情况下我们要注意的对齐有这些：元素的对齐、文字的对齐、图片的对齐、区块布局的对齐。

1、元素对齐

元素的对齐指的是网页中的一些按钮、图标、搜索框等网页中的元素统一采用一种对齐方式对齐。

用主页来举例，可以看到图标部分都是居左对齐的，元素上的对齐分布让整个界面看起来整齐简洁，内容划分也变得比较明确，可读性强，方便浏览者浏览。

一个网页当中，会有很多元素，而元素的对齐可以让整个界面变得井然有序，元素过于随意摆放没有规律，会让界面杂乱无章。

2、文字的对齐

文字的对齐方式也不外乎上面三种，左对齐是最常见的，居中对齐常出现在文章详情的标题部分，右对齐文字出现的频率小一点，不会以大篇幅出现，大部分在登陆注册或是产品详情界面中常见。

左对齐的方式适合人们的阅读习惯，在网页中也比较常见，这里不多讲了。

居中对齐是进几年随着html5流行起来，越来越多设计师用居中对齐作为一些区块内容展示的方式。

可以看到，苹果官网在产品介绍页面，文字用得比较多的是这种居中对齐。这样的对齐方式有个好处就是让浏览者的视线集中在该区块内容上，其次从样式上的不对称感可以增加界面的层次感和设计感。但是文字居中对齐不适用于文字内容太多的区块。

右对齐常见到的是在一些小的细节中，比如登陆注册界面、底部导航区块等，仔细看看还是可以发现有一些地方用到了右对齐。

3、图片的对齐

图片对齐也不外乎上面说的三种方式，图片对齐好处理一些，主要根据网页想表达的内容去做对齐，以达到好的视觉展示效果。所以在不同的情况下，可以采用不同的对齐方式。

4、区块布局的对齐

上面讲的小元素对齐重要，那大的区块对齐也很重要。视觉上的对齐，可以让浏览者快速的浏览到相应的内容。小元素不对齐会显得乱，大区块不对齐会让整个界面没有秩序感。

说到区块的对齐，不得不提的栅格系统，栅格系统可以让一个网站看起来有秩序感。很多人不喜欢栅格系统，觉得限制他们自己的创意。

事实上，栅格的运用可以很灵活，分多少栏全看设计师的设计。

因此可见，对齐也是有层次的，不同层次内容可以采用不同的对齐方式。

对齐相比较之前的其他设计原则来说，会比较简单也好理解，但是在具体的实践过程中，还需要设计师们去思考和设计。对齐，不仅可以在信息层级上一致，而且会更有气势。

总之，在做网站的时候要以内容为主旨，界面设计一定是要方便用户快速找到他们想要的。其次使用正确的对齐方式，让界面更为整齐，信息更为明确。

每个人都喜欢单页面设计。这种设计趋势就像某种化学反应，迅速地传遍四周，并且一直在增长，许多网站都开始采用单页面的设计方式。很久以前，单页面不会让你为之骄傲。它们只是单纯地传递信息的“名片”而已，显得廉价、无趣。但现在作为设计趋势的单页面完全不同了。它从设计中移除了杂乱的元素，保留简洁但又不失美丽的用户界面以及简明能让人关注的内容。从用户体验的角度来讲，单页面设计既有好处也有坏处，但用户喜欢浏览这些网站，这已经是需要考虑的事情了。

虽然没有证据，但一些专家在争论单页面站点比传统的多页面配合导航的站点有更高的转换率。我能找到的研究案例只有37signals。研究证明单页面相对于老式的多页面注册率高出37.5%。

单页面设计最大的挑战就是让用户保持滚动。用高清图片、醒目的颜色和漂亮的字体来抓住用户的注意力，但也不总是有足够的能力挑起用户的兴趣。通过一些A/B测试和用户数据分析，你就能找到通往用户心中的路。接下来就一起看看能让单页面网站更加友好的几个小技巧吧。

1.将内容分割成小块

当你只有一个页面来展示你的故事的时候，不要让用户淹没在大量信息中就显得至关重要了。不要害怕使用折叠和多区域显示内容。让信息和媒体元素从头至尾地保持简洁凝练。更重要的是，单网页的内容应该有逻辑连续性和一定的顺序(发生的事件--原因--怎样发展的--地点--时间)

另一个让用户遵从你的引导的方法就是同时使用图片视觉和文本内容。讲故事是一种强有力的传递内容的方式，同时也是内容营销的趋势。它将平凡小事融入到信息中，使其更加贴近用户的生活。这可不代表你需要雇佣一个小说家。只需要多注意内容的情态表达以及尝试将东西写得更人性化。

2.为快速访问设计非传统的导航

单网页通常只有滚动，有时甚至是无止尽的滚动。就像潜入了深邃的海洋，不知道你会走多远。保持用户有迹可循的安全性：将滚动和传统的导航系统结合起来。普遍的做法是在页面顶部设置固定的导航条，不管滚动多久它都保持在顶端。这种方式也增加了易用性。固定导航条相比传统的面包屑导航更具有可视性和交互性。

如果你的单网页站点很长，那么拥有“回到顶部”按钮和垂直滚动条就变得很有意义，它可以让用户快速回到顶端和访问网页的其他区域。

3.强烈的行动引导

如果你问一个数字营销商人在转换中最有影响力的因素是什么，答案几乎可以确定就是行动引导。好的行动引导不能说完成全部工作，也至少完成了一半的工作。我敢说所有为了特定目标而设计的网站都适用这个原则，不管是移动应用下载，订单签订，演示请求，邮箱注册或者更简单的联系方式的提交。无论什么目的，行动引导的质量决定机遇。

单网页成为设计焦点使其在行动引导方面做得更好。在单网页中，少量的文本和多媒体元素不会使用户脱离主要目标。同时，通过良好的叙述引导用户浏览网页一直到重点信息区域，在那应放上强烈的行动引导标识。

再强调一次，安排一些A/B测试来决定哪种引导才是最适合网站的，因为有时候微小的改变，如：颜色、位置、措辞都会带来意想不到的变化。

4.保持简单，不是单调

传统的多页面网站很漂亮是因为它有一个设计主题以及很多可用的内页面模版。设计单页面站点更具有挑战性同时有更多创造性的空间。随着近期CSS3，HTML5和Javascript的发展，使开发简单但吸引人的网站拥有了无限的可能性。添加一些小动画和漂亮的、流畅的过渡都只是细节问题，但不要忘记好的用户体验并不只是细节。

只是不要被CSS的魔力吸引而变得忘乎所以，不要让跳动、浮动、摇晃的元素充满整个网页。

5.保持轻巧

单网页站点的一个缺点是加载时间慢。当只有一个页面传送内容的时候，通常站点会变得很沉重，需要更多时间来加载。接着上一点来说，就是不要在网页上使用太多不必要的动画和其他会严重影响加载速度的设计元素。节省用户的时间是你的首要工作。缓慢的加载速度也会影响你的网站优化，很明显，网站优化可不是单页面网站的最大压力源。对于你来说，需要更多的精力和努力让网站能被Google蜘蛛捕获。

单网页设计在吸引和引导用户方面是很强大的。但十分依赖商业类型和网站目的。通常，单网页设计最适用于单响应式的站点，如应用下载，单个物品购买，捐赠等等。但不要被常规所限制，毕竟这都是别人的经验不一定适合你。