网页设计细节处理
页脚和页头的设计有所区别,它并不需要跟页头的导航栏或者BANNER图设计那样过多的注重交互性以及个性化,反而是简洁有力的页脚更加有利于用户体验。下面介绍网页设计细节处理,希望可以为您带来帮助。
1、网页设计细节处理之不要过于复杂。
页脚和页头的设计有所区别,它并不需要跟页头的导航栏或者BANNER图设计那样过多的注重交互性以及个性化,反而是简洁有力的页脚更加有利于用户体验。通常采用极少的色彩元素并和网站整体风格一致,尽量避免图片背景形式,如需让内容显得丰富些,就选择图标和文字结合的形式来展现,且内容也不宜过多,应简洁。
2、网页设计细节处理之必要的信息不能少。
在浏览网站时,可以发现,大多数网站的页脚包含了企业简单业务介绍,联系信息,版权保护以及其它关联网站等等,当用户在网站上没有发现明显的联系方式,他们基本上都会把网页拉到页脚寻找信息,能让他们快速找到目标内容可以减少网站跳出率。
3、网页设计细节处理之合理安排链接。
页脚内容对排布和分类要求较高,毕竟所占据的网站板块区域较小,因此要遵循以简洁明了的形式展示最直接和全面的内容,无论是网站基本内容的目录,还是联系方式,有或者是友情链接,最好进行组织分类,通常情况下,这些内容都是以概括的形式展示,更多详细内容以链接跳转的形式,对此要合理安排好链接,保证好用户体验,以防出现死链或者空链。
4、网页设计细节处理之避免头重脚轻。
有些网站在建设的过程中并没有明确的页脚概念,往往把页头做得很耀眼,但是整站往下拉,却没有页脚的踪影,又或者是将页脚看作最次要的一部分,所使用的字体小,内容粗略,且没有将文字与背景对比度考虑在内等等,无形中就造成了用户不愉快的阅读体验,按照用户的浏览习惯,从网站页头浏览下来,体验效果都还不错,但一到页脚就一头雾水,这种头重脚轻的现象就造成了用户不好的印象。
5、网页设计细节处理之去掉冗余的装饰。
有些网站设计认为页脚的信息内容过于简单则需要强调重点,但是往往这些“强调”会成为页脚设计中的累赘,譬如给链接加上下划线,字体采用特殊效果等等,事实上更多的是造成网站页面的杂乱,因此这些冗余的装饰最好统统去掉,干净整洁反而是一种美。
6、网页设计细节处理之充分利用空间的同时注意留白。
网站页脚的设计是在有限的空间内展示最精辟的内容,对于这部分的空间要充分利用起来,对要使用的图标,文字,图片等内容进行排版设计,但在安排这些元素的同时要懂得留白,避免出现密密麻麻的内容扎堆情况,否则影响网站美观的同时也产生了用户阅读困扰。
网页设计细节总结
字符
字符是页面中不可缺少的部分,页面上最重要的部分。所以这部分细节是最基础的,也是最不可忽视的。网页上80%的信息是以文字形式传达的,任何网页元素都无法替代文字的作用。网页中文字设计的好坏会直接影响到整个页面的视觉传达效果。
字号
字号的选择是根据功能需要而定的,字越大给浏览者的视觉冲击力越强,一般用于标题或其他需要强调的地方。小字整体性强,页面易产生多个中心,缺乏美感,时间略长,浏览者易产生视觉疲劳。最适合网页的字体大小为12磅,如果在一个页面内容较多,通常可以用9磅的字号,随着互联网飞速的发展,在内容较多的情况下10.5磅字号逐渐替代了9磅字号。游戏行业本身侧重于视觉传达,在官网及专题里文字都不会像门户类页面那么多,所以常规情
字体
不同的字体有不同的性格表现,严肃、幽默、力量、柔软等等。网页中比较常用的中文字体有宋体、黑体、楷体、隶书等。根据不同的页面主题可以选择不同性格的字体搭配。
标题字体的选用对整个页面的编排起着重要的作用。字体选择、字体特效到位,不仅会突出页面主题,而且还会烘托整个页面的气氛。
主标题用毛笔字体,副标题选择用了方正楷体简体与主标题进行搭配,突显游戏武侠风格特点,导航文字选用了与副标题相同字体,内容用微软雅黑字体。整个页面一共选用了三种字体。
主标题字体微变型,副标题选用了微软雅黑细体。
样式
文字的样式主要包括常规、粗体、斜体等。正文中的文字宜采用常规样式,标题宜采用加粗或斜体样式。合理的运用文字样式,将更有利于文字的视觉传达,更有利于浏览者的阅读。
间距
文字的间距分为横向间距和纵向间距即”字距””行距”。正文与标题的字距应该通篇保持一致,字距太大或太小都会导致可读性受到影响。行距的常规比例为10:12即用字10点,则行距12点。除了对于可读性的影响,行距本身也是具有很强表现力的设计语言,有意识地加宽或缩窄行距,能够体现独特的审美意趣。
颜色
颜色的运用对于整个文案的表达会产生很大的影响。使用不同颜色的文字可以使想要强调的部分更加引人注目。色彩可以使得文本不受位置的局限,加强或者减弱文本的表现强度,使页面文本的浏览产生视觉导向。
排版
文字的对齐方式一般分为四种:左对齐、右对齐、居中对齐和两端对齐,其中左对齐和两端对齐最为常用,因为这两种对齐方式比较符合人们的阅读方式。
文字的排布方向主要有三种:横排、竖排和斜排,其中以横排为主,横排文字群体比较适合人们的阅读习惯。
留白
留白可以给人带来心理上的轻松与快乐,也可以给人带来紧张与节奏。元素之间的留白不能太大这是基本的原则,留白过多,页面会变得零碎。
网页设计是以传达页面信息为主要目的的,留白更多的是服务和服从于网页的可用性。无数的可用性研究证实了一个事实:在Web中,用户对网页信息是进行浏览,而不是阅读。简洁明快、富于美感的页面更具有可浏览性,可使用户获得更加良好的浏览体验。
留白空间不一定要是白色的。指的是任何与背景相同的空间。所以它可以是白色、黑色,其他纹理等。
大面积的有色范围
如在页面设计中只放置极少的必要元素,背景则用大面积的单纯色彩渲染,利用单纯色彩的力量来突出和烘托网页上的主要元素。边导航与主题内容的留白划分。
网页设计中常用到的设计细节
一、像素的衬线
在页面的顶端,你能看到一条1个像素比背景颜色略浅的水平线将纯色的背景和带有材质的背景分隔开,如下图:
而如果没有这条衬线会是怎样的一个效果,我们也来看看。
实际上,网页设计中,使用到衬线的例子非常普遍。例如下面的这个例子中,你会在包围着”The Dorchester Hotel”文字的黑色边框的顶部向下1个像素发现一条灰色的衬线。
而在下面这个设计好的按钮中,绿色和黄色边框顶部向下1个像素也能看到一条颜色更浅的线条,而这条衬线制作的更为精细,因为它应用了蒙版,从顶部向下你会发现这条衬线渐渐隐去了。另外,在”Add To Cart”和”$9.99〃两个文字之间的分隔线实际上是两条线,左边颜色深一些,右边颜色浅一些,这样就能产生线条的凹陷效果。
之所以要使用衬线,是为了体现物体在2D效果上的立体感,而立体感的体现必须要有阴影和高光。阴影我们通常使用图层样式来实现,而高光效果的实现,最常用的技巧之一就是使用衬线了。上面的三个例子的衬线都在物体的顶部,说明光线是从上向下照射的,高光处于物体的顶部。而如果光下从下向上照射的话,高光就应该在底部了,那我们就应该将衬线放置于物体的下方。所以在衬线的使用上,我们始终要问自己这几个问题,”我在这里使用了衬线,那么光源在哪里?”"如果光源在这里的话,阴影应该出现在什么位置?”完成了这两个回答,设计出来的物体的立体感才能更加真实。
二、细微的材质
Redux主题真是解释背景材质的绝佳案例。因为在整个页面中,从上至下使用了三种不同的材质作为页面的背景。上面的深蓝色部分应用的是坑坑洼洼凹凸不平的材质,中间黑色部分应用的是纺织布的材质,而底部应用的是杂色的材质。当然,这三种材质都是非常细微的,但是效果确是非常出众的。实际上,过于醒目和复杂的背景材质不仅不能为设计增色,反而由于分散读者的注意力而是整个设计品质降低。所以最好的策略就是让你的背景材质保持细微而柔和。
三、柔和的渐变
是不是下面图片上的文字框有一种鼓出来的感觉,对,那正是渐变带给我们的效果。试想一下,如果单单是白色的文字框放置于页面上,一定没有添加了渐变让我们感受到更多的趣味性。
另外,在页面的左右边缘部分也应到了从纯色背景到材质背景的渐变,这样会让深蓝色凹凸不平的背景材质出现的更加自然。在渐变的使用中需要注意的是,除某些特殊情况外,不要使用太过强的渐变,不论是色向上还是亮度上还是饱和度上都不可跨度太过强。因为这样强烈的过度根本不带真实感,给人一种很不舒适的感觉。
四、微妙的阴影
注意观察Redux暗色背景上的浅色文字,你会发现它们都被添加上了投影效果。现在我们可以使用CSS3中的text-shadow属性来完成文字的投影设计,代替了在Photoshop中完成此项工作。而且使用CSS3来给文字添加阴影自由度更高,在浏览器支持的情况下,你可以给任意文字添加你想要的阴影效果。当然IE8以下版本的浏览器是不支持此项属性的,这是我们在设计中需要注意的地方。另外,和前面提到的其它设计细节一样,阴影的效果也要足够柔和,不可过于强烈,不然很容易让整个设计看起来有一种脏脏的感觉,显得不够精致。
网页设计需要注意哪些
1、网页设计初级制作阶段
网页设计制作之前,首先需要网站的规划人员运用设计软件对网页进行制作,设计师需根据企业的需求,要求文案制定相应的企业宣传推广方案,在网页设计的过程中,做好企业品牌宣传,这不仅能更好的展现企业的形象,还能扩大企业品牌宣传,这个就是网页设计中至关重要的一点。
2、网页设计制作之前充分收集材料
前期的主题和结构规划,有必要初步根据收集的材料满足用户的需求。收集到的材料一般包括:文本、图片、动静、动画、视频等,一同,通过书本、报纸、杂志、网络等途径办法寻找必要的材料。制作精美的网页设计和切合主题的文案,能大大提高企业文化的宣传和用户的浏览。
3、确定网站页面设计的主题
制作一个网页,最重要的是选择一个好的网页内容,一般是选择自己的内容规划。需求留意的是:规划主题的选择有必要要有自己的特色,可以在许多深圳网页制作的页面崭露头角。
4、网页设计制作完成后需进行测试
从网页设计初步规划到网站页面设计的制作结束,需求以上一系列的底子进程。这些底子进程结束之后,还需求对规划的网页制作页面进行全面的检验,包括内容页面的规划是否是合理的,科学的,对网页链接根据实际情况做恰当调整。