专栏首页无原型不设计网页设计排版中哪些元素最重要?

网页设计排版中哪些元素最重要?

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能够决定你浏览量多少的关键因素,但事实上,页面的排版也是一门非常大的学问。俗话说“红花还需绿叶衬”,其实我觉得两者之间没有轻重之分,是相得益彰的关系。没有绿叶的陪衬,又怎能显出红花的娇贵呢?一个好的网站设计,不仅要求质量好的内容,还必须有整洁干净的页面排版,才能真正地达到良好的用户体验。

网页设计排版VS平面设计排版

网页设计中的排版和平面设计的排版有着很多相似,但又有很多不同。我认为平面设计排版是网页设计排版的基础,在一些文字、图片的排版方面,它们遵循的原则基本是相同的。但是,网页设计排版又会涉及交互性的功能还有动态的效果。所以排版的时候不仅要考虑文字图片等的静态效果,还要考虑一些动态的视觉效果。所以,这么多种元素要呈现在固定大小的页面上,要考虑的情况自然就比平面设计多得多。那么下面我们讨论一下一些在网页设计排版中设计师们注意的一些元素。

1.文字

虽然有时候可能一个页面的文字没有几个,但你可千万别小瞧文字的作用。字体的选择,字体的大小、间距以及多种字体如何自然地搭配都是决定你设计的关键因素。在同一个页面有限的文字区域内你所用到的字体样式绝对不止一种,甚至会有三四种,这是为了打破单一字体给用户带来的单调感。字体的搭配是将两种或更多字体通过合理的排版达到最佳效果的过程。对于很多初学者来说,他们觉得选择只用选择漂亮字体就够了,事实上,选择漂亮的字体并不难,如何让它们完美地搭配在一起,相得益彰,这才是应该好好下功夫的地方。

2.图片

图片可以说是一个网站的核心了,许多设计师都会把大量的精力放在图片设计上,因为很多用户在浏览网页的时候停留的时间不会太久,更不会花太多时间阅读你的内容。这个时候,一张好看的图片就能够快速有效地抓住用户的眼球。大家所熟知的苹果公司官网大部分都是这样的套路,直接将产品的图片呈现在大家面前,没有过多的赘述,反而会让用户觉得简洁明了。

3.交互

交互设计在网页设计中有着相当好的势头,那么在设计交互的时候,必定会涉及到许多的页面、组件。由于这么多的组件元素要排列在同一个页面上,要考虑的情况也就多了许多。在做交互设计之前,你必须站在用户的角度考虑,菜单导航应该在哪个地方最清晰可见?组件应该通过什么样的方式展现用户才会觉得方便?组件和组件之间要怎样排布才会不影响用户的视觉效果?这就要求网页设计师有一个流畅的原型设计过程,通过借助一些原型设计工具(AxureMockplus, Justinmind等)来设计出合理、带来良好用户体验的交互设计。

4.视频和动画

如果一个网页只有文字和图片这样静态的元素,难免少了一些生气。现如今,视频和动画的制作成本很低,网络传播性强,与社交媒体网站的兼容性好,甚至在一定程度上,视频和动画传播的有效信息比文本还要多。于是,在网页设计排版中,视频和动画也会被设计师们加入其中。但要注意的是,视频或者和动画设计在同一个版面上不能出现太多,最好一到两处就可以,否则会让用户感到眼花缭乱,甚至它们会喧宾夺主,导致顾客找不到你产品的重点。

说了这么多理论,我想给大家举三个具有代表性的优秀网页版面设计案例:

1.Webydo

Webydo本身就是一个帮助网站设计自由职业者和代理机构的网站,它拥有内置的CMS和托管,可以更快地创建网站并开展业务。我觉得它们的网页设计非常有趣,它们直接将整个页面模拟为我们常见的设计工具页面,明确地传达出了网站主题,也能够准确地吸引目标客户。

2.CALEO

CALEO是一部独立的男性出版物,它们的官网页面是很多设计师在实际设计中都会参考的,像这样的时尚网站,大多都会选择用许多图片作为重点,但他们很好地解决如何将它们合理排版,不会造成杂乱的视觉效果,图片之间一定的间距和图片尺寸的大小都有一定的合理规划。

3.Foreign Policy

我个人非常中意这个网页设计的原因是它将手绘风格完美地融入了页面设计中,小清新的配色和一目了然的导航菜单排版也是他的亮点之处。此外他们在许多细微的地方都运用了动态效果,让你在浏览时处处都有小惊喜。

小结:

所谓最好的设计,就是在整个网页中,你的设计浑然一体,没有突兀的地方,也没有不恰当的结合。成功的排版可以让页面的逻辑性更加明确,让用户产生良好的体验,成功地将用户引导到他们需要的信息上。虽然说设计师最主要的工作是把页面做的漂亮从而创造良好的视觉效果,但是也要关注网页的可操作性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 创意网页排版设计和教程分享,打造 “视”不可挡的网页设计

    网页中超过95%以上的信息都是通过文字的形式呈现。 然而,页面文字并非毫无章法的随意呈现。事实上,更具可读性、视觉效果以及独特排版和布局的网页文本设计,更能吸引...

    奔跑的小鹿
  • 5个范例告诉你什么是自适应网页设计

    移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?自适应网页设计的出现很好的解...

    奔跑的小鹿
  • 干货!2018年你值得一看的网页设计作品集赏析

    网页设计作品集对网页设计师而言,既是网页门面,也是个人专业素养的体现。那么在作品集设计上万不能掉以轻心。无论是制作一份简约大方还是极具表现力的精良作品集,设计师...

    奔跑的小鹿
  • OTT IPTV类播放管理软件技术功能分享

    随着OTT IPTV类软件的一代又一代更迭,运营商和用户对这类软件的需求功能也是逐渐提升。举例来说,视频播放中的广告功能,早期的一般都只是一个开机图片。现在随着...

    IPTV OTT
  • JavaWeb12-JSP, EL表达式,JSTL标签

    JSP & EL & JSTL 一.JSP 1. jsp回顾 jsp作用 jsp全称java server pages(java服务器页面),本质是一个serv...

    Java帮帮
  • Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于《Google官方网页载入速度检测工具PageSpeed Insights 使用教程》一文中PageSpeed Insigh...

    Jeff
  • Tinkphp彩色标签Tags实现方法

    Tinkphp彩色标签Tags的实现方法 我们浏览网页时经常看到眩目的彩色标签,而且每刷新一下浏览器,都会更新为不同的颜,是不是很“惊艳”?现在来看一下它在Th...

    96php.cn
  • TP中利用workman获取实时数据

    最新在项目当中需要实现数据的实时更新,于是利用workman简单的实现了对数据的实时获取。

    北溟有鱼QAQ
  • 识别App数据造假渠道的分析方法

    俗话说,有钱能使鬼推磨。为了保障下载量、使用量,企业通常会在 App 推广中投巨资给第三方渠道,用于引流买量。但在这一过程中,内鬼、羊毛党、刷量中介总会趁虚而入...

    走在河边的小鹿
  • 中国烧鹅系列:利用烧鹅自动获得反弹SHELL

    烧鹅是RadioWar基于Teensy++ 2.0 AT90USB1286芯片设计的USB Rubber Ducky类开发板,外观看起来很像USB Rubber...

    FB客服

扫码关注云+社区

领取腾讯云代金券