网页设计技巧:3步提升网页品质

网页设计技巧:3步提升网页品质

网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质,特别是活动或专题页面的视觉效果,请学习网页设计师必须知道的设计技巧:减法、分块、加法。

网页设计技巧:3步提升网页品质

1.减法

网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的,这便是我们在网页设计方法中提到的特征。

2.分块

在功能划分前,进行网页分区前所要做的信息消化。比如我们希望一个更大的洗浴间,或者希望将客厅娱乐与卧室一体化,这时候我们可以在房子的基本大轮廓内,结合管道的基本设置进行空间的重新划分。分块的这个步骤主要是解决功能性问题。满足功能需要才使我们一切行为变得有意义。

3.加法

与分块解决的功能性问题相比较起来,加法解决的则是填充和装饰的问题。在做完分区并完善好了基础装修之后,我们就可以陆续将我们的生活用品搬进房子,配置家电、沙发什么的。这也正如我们网页设计中的内容填充。如果时间和金钱充裕我们可以购买符合自己个性的装饰物,调整灯光气氛等,让我们的生活环境看起来更有情趣也正如使我们的网页看起来更生动一样。它是一种锦上添花,它可以为你的视觉加分,但切忌过于繁重而影响到了功能的使用,必竟家不是博物馆,网页信息传播才是最重要的。

设计案例:

网页设计技巧:3步提升网页品质

1、减法

网页设计技巧:3步提升网页品质

原图

为了不使形态干扰到网页内容的表现,通常情况下,我们会先对物的形态进行简化,使其在保留特征的同时更适合之后内容的安置。简化的步骤有两个1.特征的提练,如案例中的棒球,它的特征有两个,一个是圆形的轮廓代表是一个球体,另一个是红色的缝线,代表它是一个棒球而非足球或篮球。

网页设计技巧:3步提升网页品质

2.审查删除重复的描述。特征提炼后,在保留棒球特征的情况下,我们选择去掉其中一根缝线,为信息腾出更多可操作的空间。 网页设计技巧:3步提升网页品质

2、分块

分块也便根据物的形态对网页的信息内容进行规划。主要有三个关键点。
1.对信息进行消化。在充分的理解信息对之后的排版和信息调整有很大的帮助。这时也可以和需求方进行沟通对信息进行微调或收纳。
2.在吃透信息后,我们就可以开始正式的分块,分块是一个逐层深入由粗到细的过程。
3.分块完成后,我们结合造型进行一定的信息和造型微调。

网页设计技巧:3步提升网页品质

3、加法

进行加法前,网页大致的雏形已经出来了,之后加法的工作主要有四个。
1.具体内容的填充
2.气氛和视觉的补充,让整体效果更真实,如前景的人物添加始棒球的主题更明确,运动感更强。
3.特征的还原和细节补充。不得不承认信息高于装饰。在确保信息的完整性后,我们在不干扰信息呈现的情况下还原一些原来删去的细节,如背景缝线的还原,选择了低透明低饱合的浅灰色,让棒球更真实。

网页设计技巧:3步提升网页品质

当我们浏览这个页面时,强视觉冲击力的棒球大效果映入眼帘。简单的视觉扫描我们便立刻了解了这个专题的核心主题。结构清晰、主题明确,视觉强烈。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3277.html

(0)
江山如画的头像江山如画管理团队
6个免费PHP CMS内容管理系统推荐—做内类型网站首选
上一篇 2019年2月16日 下午9:42
网站前端开发常用工具大全-web设计师必备
下一篇 2019年2月21日 上午11:49

99%的人还看了以下文章

  • 从零开始做APP界面设计一:iOS 界面设计规范

    从零开始做APP界面设计一:iOS 界面设计规范从零开始做APP界面设计一:iOS 界面设计规范从零开始做APP界面设计一:iOS 界面设计规范从零开始做APP界面设计一:iOS 界面设计规范

    准备整理一套APP界面设计教程,可能会花费一段时间,请持续关注。 首先开篇我们介绍APP 界面设计,也就是新手最常遇到的问题:尺寸。 我们以iPhone 7为例讲解iOS 界面设计规范。 一、APP 界面设计工具 做APP 界面设计用的最多的就是PS和AI了,如果你是Mac用户,可以尝试一下Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度…

    2018年4月20日 网页设计
    7.8K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    14.6K0
  • 左侧固定,右侧自适应布局的两种实现方法

    左侧固定,右侧自适应布局效果图 很多页面,特别是网站后台管理页面,不少采用左右布局。本文讲解左侧固定,右侧自适应布局的两种实现方法。 左侧固定200px宽,右侧自适应,中间间隔10px。 HTML: <div class=”parent”> <div class=”side”></div> <div class=”m…

    2019年3月10日
    11.7K0
  • 6个技巧让你的版面设计的脱颖而出!

    优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。

    2018年10月2日
    9.9K0
  • 网页设计常用色彩搭配表《配色表》

    该配色表将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主,配以其他色相或者同色相的,应用对比和调和的方法,并按照从轻快到浓烈的顺序排序。 按色相的搭配分类 红色、橙色、 黄色、 黄绿色、 绿色、 青绿色、 蓝色、 蓝紫色、 紫色、 紫红色 按印象的搭配分类 柔和、明亮、温柔柔和、洁净、爽朗可爱、快乐、有趣活泼、快乐、有趣运动型、轻快轻快、华丽…

    2018年2月5日
    13.9K0

发表回复

登录后才能评论