网页设计技巧: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)
江山如画的头像江山如画管理团队
上一篇 2019年2月16日 下午9:42
下一篇 2019年2月21日 上午11:49

99%的人还看了以下文章

  • 9种常用的排版小技巧

    分享优秀网页设计发布的9种常用的排版小技巧,不同氛围的文字排版组合,演绎不同的版面风格。 ​​​​

    2020年4月4日 网页设计
    4.7K0
  • 网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    8.3K0
  • 这篇设计配色干货,0基础也能让你做出好作品

    配色一直是设计圈子里的热门话题,是我们作为设计师必须要掌握的一门重要技能,通过色彩可以向用户传递不同层面的视觉信息,所以不同的色彩也都被人们赋予了不同的含义。比如:红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹;而蓝色、淡蓝色等冷色系颜色,会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合,往往能做到 1+1>2 的视觉效果。 色彩的特征…

    2020年2月18日 网页设计
    4.0K0
  • Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

    网页的布局与规划 本次网页制作的效果图如上图所示,分析一下该图,我们不难发现,图片大致分为以下几个部分: 1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片; 2、内容部分又可分为侧边栏、主体内容; 3、底部,包括一些版权信息。 有了以上的分析,我们就可以很容易的布局了,我们设计层如下图: 根据上图,我再画了一个实际的页面布局图,说明一下层的…

    2018年7月31日
    10.3K0
  • 两天入门React+ Node,全栈工程师培训教程(精)

    两天入门React+Node(全栈工程师培训教程),教程内容完整、脉络清晰、通俗易懂,能帮助初学者看清技术路径,快速入门。所有内容都配有 Demo 和操作指导。

    2018年2月13日
    2.8K0

发表回复

登录后才能评论