广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

如何提高网页设计的功力、美感和排版?
发布日期:2024-10-29 08:55:46 浏览次数: 822 来源:SODO

我们在做工业、交互、视觉相关项目的时候会经常遇到界面的设计比如产品上有个显示屏比如手机APP的界面再比如传统网页,这些其实都会用到版式设计的相关知识那么如何提高网页设计的功力呢


首先,网页的功能性是不同的,为了能够展示网页不同的信息,自然设计的初衷也会不一样。网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。

但是无论如何,万变不离其宗的是,好的网页设计是需要好的功能、好的信息架构、好的视觉效果、以及其他方面共同作用的。比如在界面中找不到相应的功能,找不到怎么点或者点哪里,没有快捷方便的跳转,视觉上页面信息紊乱,这些无疑都是相当糟糕的网页设计,甚至可以说是硬伤。前两条隶属于交互专业的范畴,我们不做过多讨论,最后一条视觉效果隶属于视觉传达方向,今天主要说说视觉上我们需要注意什么。

· 文字 Typography

在网页上阅读文字,和在现实生活中阅读纸张上的文字是截然不同的体验。实体纸张上阅读文字,我们经常会使用到衬线体,下图中红色部分就是衬线部分,起到装饰性作用。

图片来源google

一般来讲,衬线体的笔画是横向细、竖向粗,粗细的对比产生了方向上的引导性,也就是书写笔画的起笔落笔引导着视线,使文字本身产生一定的节奏感。

它的起源是罗马石刻文字、楔形文字,根据书法走向刻刀产生的起刀落刀形成衬线,后来又出现了钢笔书法。但是这样的文字使用到网页界面中就会出现问题,由于屏幕像素的关系,笔画一会粗、一会细,会拉低辨识度,容易看不清。这种情况下,无衬线体就占据了绝对优势,减少了多余的设计,线条粗细变化少,所以具有更高的辨识度,更加现代。

· 图像 Image

图像在网页中如果出现,一般来讲会是以主视觉效果出现的,也就是图像作为第一视觉落脚点的可能性会大一些。那么为了对比出图片的视觉冲击力,通常我们会调整图片的大小、颜色、形状等等。

图片来源google

例如抠图、局部去色,制作虚焦,都是比较常见的修图手法,搭配图形进行页面中的穿插,很容易丰富视觉效果。 需要特别注意的是,页面不可过度装饰,否则会干扰视觉,拉低功能性的展现。

· 图形 Shape

视觉传达中会应用到的基础图形有点、线、面、空间、纹理。不管是真实世界还是应用于网页设计中,这是都是经常看到的,只是在呈现形式上的不同,是堆叠、是相交、还是平行式的排列,而传达出的语言也是不一样的,观者的感受也就不一样。

图形在应用时,需要注意它们视觉上的统一性,例如颜色的统一、形状的统一、点线面的统一,出现过的元素反复使用,这样可以使页面具有形式感,不会毫无设计逻辑。

图片来源google

· 颜色 Color

图片来源google

网页设计很独特的一点是页面的高度可能会很长,所以在同一界面内,素材的色彩调性需要更加一致,否则在浏览过程中会感受到明显的割裂感。颜色是有三要素的,而颜色的统一往往不只在于色相上,在饱和度和明度上也需要注意,色彩饱和度越高,越容易形成強劲有力、充满朝气的印象;色彩饱和度越低,越容易形成成熟稳重的印象。色彩明度越高,越清爽干净、充满活力;色彩明度越低,越神秘沉稳。

图片来源google

同时,颜色是有具有情绪倾向的,我们想表达调性可以通过颜色来实现,而这也就是我们常说的色彩心理学。

· 构图 Layout

刚才我们提到网页设计很独特的一点是页面的高度可能会很长,所以在页面构图上的要求也相对更高,需要观察整体版式,注意观者视线,以确保视觉引导的走向不单一,并且保证正确的阅读顺序,否则要不然看上去很呆板、要不然就很乱。在构图时,并不是排满了才叫排完,需要刻意制作版式的留白空间,以达到舒缓视觉的目的。

图片来源google

构图的目的不仅仅是为了视觉上的美观和谐,也需要为逻辑服务,通过版式设计创造层级,有效的使观者提取页面中的信息,提高信息传递的通畅性。版式设计中的四个构成要点分别是对齐、对比、重复、亲密。通过以上四点,有效整合页面信息,将重要的内容衬托出来,让观者过目难忘。

最后推荐给大家一个可以快速培养审美的网页设计的网站https://dribbble.com

END

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!