勤学教育网合作机构> > 南昌天琥设计培训欢迎您!

在网页设计上的技巧

南昌天琥设计培训logo
来源:南昌天琥设计培训

2021-08-23|已帮助:2762

进入 >

网页设计上的技巧

在以往我们浏览网页都喜欢翻页,然后一页一页的浏览,但是随着移动端的发展,人们慢慢更倾向于滚动浏览,上下滚动浏览。下面介绍在网页设计上的技巧,希望为大家带来帮助。

在网页设计上的技巧

技巧一、采用动画效果来展示变化。

随着人们欣赏水平的提高,人们越来越喜欢带有动感的图片,这大大增加了图片的效果也增加网页设计师的难度。不同时间的车型随着时间的变化而变化,背景图片也会随之变化,这种变化会驱使用户滚动浏览,因为人人都有好奇心,人们都好奇接下来会发生什么。在目前这种视觉差滚动和时间轴的搭配下,用户可以来回浏览,感觉很好玩,很有意思。

技巧二、鼓励用户滚动浏览。

在以往我们浏览网页都喜欢翻页,然后一页一页的浏览,但是随着移动端的发展,人们慢慢更倾向于滚动浏览,上下滚动浏览。

视觉差的有效利用,用户更喜欢来回滚动浏览,因为同处于一个页面上,只要手指上下轻轻滑动一下,就能很好的视觉效果,滚动浏览页面,让用户更好的参与其中。许多采用视觉差滚动的网页就在首页言明通过闪动的光标来回滚动,吸引用户的注意,并且鼓励用户滚动浏览。现在流行的H5页面就是一个很好的例子,H5页面只能上下了,来回滚动,根本无法翻页,这样的页面看上去更加直观,更加有趣。

技巧三、运动和色彩。

在网页设计中,让不同的内容和色彩融合在一起,用来展示不同的项目和元素,颜色的变化和互动组合在一起,用交互来出发,产生一种全新的体验。

多变的色彩是吸引人的最佳工具,色彩在吸引用户的注意力上有很好的效果。

技巧四、让信息更容易被消化。

设计师在设计网页中,把更加庞大和复杂的信息或者大块信息,分割成小分,让人更加易读,也更加容易被消化,当设计随着页面运动元素,视觉差就会非常有用。

如上述是一个订餐网页的设计风格,设计者按照一般的阅读习惯和订餐方式,将菜单划分为单独的模块,动画很简单,背景鱼起到了很好地装饰作用。让用户在浏览的时候,更加方便的浏览订餐信息。

技巧五、营造一种视觉奇观。

越来越成熟的3D设计技术让卡通接近现实的设计元素设计成本更加低廉,设计师通过合理的素材搭配,借助动效和不同的设计技巧来展现不同的视觉效果。

当用户在浏览时候,如上图,因为元素间的不同的运动速度而产生仿真的体验,这样的设计是教育性的,也是冒险的,这也是网页设计的一种革新,但是它确实创造了前所未有的体验,令人难忘。

让网页设计的漂亮的技巧有哪些

一、版面编排

网页设计首先涉及到的是页面的版面编排问题。"版面编排"实际上就是中国古代画论中的"经营位置"。网页作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示给观众,不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。必须根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体,展现给广大的观众。

1.主次分明,中心突出。在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。

2.大小搭配,相互呼应。较长的文章或标题,不要编排在一起,要有一定的距离,同样,较短的文章,也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。

3.图文并茂,相得益彰。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使网页有丰富的内容。

二、线条和形状

文字、标题、图片等的组合,会在页面上形成各种各样的线条和形状。这些线条与形状的组合,构成了网页的总体艺术效果。必须注意艺术地搭配好这些线条和形状,才能增强页面的艺术魅力。

1.直线(矩形)的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐,所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的网页题材。

2.曲线(弧形)的应用。曲线的效果是流动、活跃,具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快,富有活力的视觉效果。一般应用于青春、活泼的网页题材。

3.曲、直线(矩形、弧形)的综合应用。把以上两种线条和形状结合起来运用,可以大大丰富网页的表现力,使页面呈现更加丰富多彩的艺术效果。这种形式的网页,适应的范围更大,各种主题的网页都可以应用。但是,在页面的编排处理上,难度也会相应大一些,处理得不好会产生凌乱的效果。最简单的途径是,在一个页面上以一种线条(形状)为主,只在局部的范围内适当用一些其它线条(形状)。

三、色彩处理

色彩是人的视觉最敏感的东西。网页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是"总体协调,局部对比",也就是:网页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据网页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的网页具有深刻的艺术内涵,从而提升网页的文化品位。下面介绍几种常用的配色方案:

1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使网页呈现温馨、和煦、热情的氛围。

2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使网页呈现宁静、清凉、高雅的氛围。

3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。

这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。当然,对比色调如果用得不好,会适得其反,产生俗气、刺眼的不良效果。这就要把握"大调和,小对比"这一个重要原则,即总体的色调应该是统一和谐的,局部的地方可以有一些小的强烈对比。

最后,还要考虑网页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是"高调"和"低调"。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为"明度变化"。有些网页,底色是黑的,但文字也选用了较深的色彩,由于色彩的明度比较接近,读者在阅览时,眼睛就会感觉很吃力,影响阅读效果。

网页排版设计的一些小技巧

一、减少不同类型字体的使用

使用超过3种不同的字体让网站看起来没有结构且不专业。记住,太多的尺寸类型和风格也可能破坏任何布局。

为了防止这种情况,尝试将字体数量限制在最小限度

一般来说,将字体数量限制在最小限度(两个很充足,通常一个就足够了),并粘贴相同的字体到整个网站。如果使用多个字体,请确保字体系基于字符宽度互相补充。以下面的字体组合为例。

Georgia和Verdana(左)的组合具有相似的价值,配对的很和谐。比较与Baskerville和Impact(右)的配对,其中大大加重的Impact使与其对应的衬线字体没有光彩。

在网页设计上的技巧

确保字体系基于字符宽度互相补充

二、使用标准字体

字体的嵌入服务(如Google Web Fonts或Typekit))可以为你的设计提供新鲜的和意想不到的许多有趣的字体。它们也非常容易使用。以Google为例:

1. 选择任何字体,如Open Sans

2. 在HTML文档的中生成代码并粘贴。

3. 完成!

实际上,这种方法有一个很严重的问题:因为用户更熟悉标准字体,因此可以更快地读取它们。

除非你的网站对于自定义字体(如对品牌宣传或创建沉浸式体验)非常有吸引力,否则通常最好使用系统字体。最安全的方法是用一个系统的字体:Arial,Calibri,Trebuchet等。记住,好的排版可以吸引读者到内容中去,而不是排版本身。

三、限制行的长度

每行拥有适当的字符数量是让文本具有可读性的关键。它不是你的设计,决定你的文本的宽度,它应该是一个可读性的问题。考虑Baymard Institute关于可读性和行的长度的建议:

“如果你想有一个好的阅读体验,应该每行约60个字符。每行拥有适当的字符数量是让你的文本具有可读性的关键。”

如果行太短,视线必须经常返回,这就会打破读者的节奏。如果一行文字太长,用户的视线将很难专注于文本。图片来源:MaterialDesign

对于移动设备,应该每行30-40个字符。以下是在移动设备上查看的两个网站的示例。第一个是使用每行50-75个字符(打印和桌面的每行最佳字符数),而第二个使是用最佳的30-40个字符。

在网页设计中,可以通过使用em或像素限制文本的宽度来实现每行最佳数量的字符。

四、选择一个能在各种尺寸中工作的字体

用户会从具有不同屏幕尺寸和分辨率的设备访问你的网站。大多数用户界面需要各种大小的文本元素(按钮复制,字段标签,章节标题等)。选择一个能够在多种尺寸和重量上运行良好的字体以保持每个尺寸的可读性和可用性是非常重要。

确保你说选择的字体在较小的屏幕上清晰可辨!尝试避免使用草书的字体,例如Vivaldi(在下面的示例中):虽然它们很漂亮,但它们很难阅读。

Vivaldi字体很难以在小屏幕上阅读

五、使用可区分字母的字体

许多字体让相似的字形很容易混淆,特别是与“i”和“L”(如下图所示)以及在字母间距较小的空间中,例如当“r”和“n”看起来像“M”。因此,在选择你的排版时,请务必在不同的文本环境中检查你的排版,以确保不会为用户造成问题。

网页简约风设计思路

设计师在进行简约风格网页设计时,也需要牢记一些简单的设计思路,简化整个设计过程

首先,先复杂,再逐个简化

为了防止漏掉某些设计元素或功能,设计师可以通过先将所有需要的设计一一添加到界面中,然后再逐个根据需要简化的思路,准确而稳步的进行优化。

当然,为对比前后效果,也可使用Mockplus将它们快速的制作成交互原型,逐个测试修改前后界面设计的实用性和有效性。而且其提供的8种预览和分享方式,对于设计师根据需要,及时收集设计反馈和建议,作用也不容小觑。

其次,注意微调

简约设计风格,一定程度上讲,就是设计师细节设计的优化和竞争,所以,一定要注意网页界面细节的微调,再微调。

然后,注意把握全局

注意细节的同时,也不要忘记整体网页或软件应用在色彩,主题以及功能等方面的全局统一性。太过独立的页面设计,对于软件或网页页面的连贯性,以及用户使用时的流畅性,非常不利。所以,设计过程中,注意把握全局进行设计,做到胸有成足。

最后,原型测试必不可少

无论设计师的设计如何新颖独特,抑或简约直观,如若无法得到用户的认可,一切都只是纸上谈兵。所以,设计师在设计的同时,也需要选择优质好用的原型工具(比如功能强大的Mockplus),及时地将简约的网页设计转化成交互性原型,测试其实际效用和可行性。

以上是南昌天琥设计培训整理的在网页设计上的技巧全部内容。

热门推荐

更多
勤学培训网 网页设计学习网 在网页设计上的技巧