网络前端设计培训班优秀学生共享网页设计的构成与规范

发布时间:2020-07-31 11:32:00

随着互联网的发展,任何企业、电子商务或任何活动都离不开网页的展示,因此网页的设计就显得尤为重要,这是给客户留下的第一印象。网页的内容只不过是图片和文章。对于网页设计的技巧、规范和注意事项,上海市专科学校网页前端设计培训班的老师和大家进行了一次聊天。

随着互联网的发展,任何企业、电子商务或任何活动都离不开网页的展示,因此网页的设计就显得尤为重要,这是给客户留下的第一印象。网页的内容只不过是图片和文章。对于网页设计的技巧、规范和注意事项,哈尔滨平面设计培训学校网页前端设计培训班的老师和大家进行了一次聊天。

一、 文本

网页中最重要的元素是文本,特别是门户和企业网页。如果一个网页没有文本,就像一道没有盐的菜,它是无趣的,甚至网页也不想表达任何东西,那么文本的规范是非常重要的。中英文通用性最强,基本规格如下:

1、字体:中文常用宋体、Microsoft YaHei、黑体,其中黑体常用作导航或标题,英文常用宋体、Helvetica、Verdana、Georgia、times无衬线;

2、字体大小:中文最小字体大小为12px,英文最小字体大小为9px。不过,建议从10px开始,因为网页的字体大小通常是双倍;

3、风格:宋体的12px和14px通常设置为无,宋体的其他字体大小和其他字体通常平滑;

4、粗体:大块的阅读文本不适合粗体,粗体文本通常适合导航、标题或强调文字。

二,图片

网页的第二个重要元素是图片,特别是电子商务和特殊网页。图片完全符合人类懒散的阅读方式。你一眼就能知道主题是什么或者产品是什么。这是文字无法比拟的,网页的美丽取决于图片。图片建议如下:

1、一级和二级:也就是说,我们需要混合大小,甚至最简单的电子商务列表页面,并在底部有侧边栏或不同大小的产品推荐图来衬托,避免繁琐的浏览和视觉中和。

2、尺寸:一些广告图片会更大一些,以增强视觉冲击力,特别是主题页的页眉。建议不要超过一个屏幕。不同分辨率的电脑屏幕大小不同。一般来说,800像素是最常见的。

三、图标

网页必须用图标装饰。只有文本是干的,所以图标相对简单。注意以下几点:

1、图标的大小、材质、透视图、颜色和样式应统一。例如,如果使用线风,则将使用所有线风。例如,以下两组样式是不同的

2、图标不容易太大。通常,大多数图标都放在标题旁边。图标的大小与相邻文本的大小相同。如果尺寸较大,请尝试对齐它们,如中心对齐、顶部对齐、底部对齐等

四、边界

在网页中,除了在强调和交互时突出当前边框的效果外,大部分边框的作用只是起到分割模块和排版整齐的作用,所以边框应该被淡化。如果颜色太重,线条太粗或边框太多,会给人视觉效果差,在屏幕上感觉线条饱满,而忽略网页的主体。要点如下:

1、宽度:边框宽度为1px

2、颜色:一般边框颜色以CCCCCC为主,也可采用浅色

3、重复:在同一模块中,如果已经有背景色或边框,也就是说布局明显整齐,不要重叠边框

4、距离:当有边框时,内容应该与边框稍微分开,即内外边距应该是

五、间距

在网页中设置间距就像用标点符号写文章一样。它需要人们有喘息的时间。设置间距应该基于模块的大小,就像语句之间的逗号和段落之间的句点一样。例如,大模块之间的间距大于小模块之间的间距,也可以反映主次关系。注意以下几点:

1、太小不好:如果整个网页间距太小,会给你很拥挤的感觉,看起来很累。有时,一些特殊版式模块的间距比较小,比如底部,图片和图片靠得很近,但是文字和边缘比较牢固,也就是说图片没有外缘,但是有内缘:

2、太大是不好的:如果模块之间有很长的距离,页面的内容就不会是满的、空的,也不想继续往下看,所以一般来说,10px和30px之间的差距大多是。

六、颜色匹配

网页设计也是设计。既然是设计,就离不开配色。网页设计的色彩搭配与其他颜色相似,既不太花哨,也不太单调

1、类型:在三种类型中,至少需要一个主色调。主音是从哪里来的?可根据网页内容确定,logo颜色可作为主色,相似颜色或对比色可作为辅助色,其他颜色可替换为黑白和灰色,主题页可适当打开。

2、明度饱和度:除了一个小范围的强调或互动,你可以选择一个更高的颜色饱和度。在其他情况下,特别是对于大背景色,你应该尽量使用饱和度过高的颜色。如果长时间观察,可以降低饱和度,调节明度。特殊页面可以适当打开。

七、排版

网页的布局就像一个导游,让游客可以有目的地或理性地往下走。因此,布局必须清晰有序,只有做到以下两点

1、整洁:对于普通的网页来说,只要是整洁的,即使你的设计不是很有特色,也一定是一个不烦人的手稿,其中的间距是均匀的,主次分明,比如:整体是上下对齐的,间距是均匀的,所以比较规则:

2、无序有序:对于特殊的网页,设计可能有些夸张,需要无序有序,比如以序号、标题、行等为导向