恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网页设计排版中哪些元素最重要?
0.0°
2017-09-06 原创文章 经验/观点 举报 1278 1 3 0

在网页设计排版中设计师们注意的一些元素。

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


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


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


1.文字


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


Image title



2.图片


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


Image title



3.交互


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


4.视频和动画


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


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


1.Webydo


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


Image title



2.CALEO


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


Image title



3.Foreign Policy


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


Image title



小结:


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

更新:2017-09-06

收藏

1人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识
相关标签

    猜你喜欢

      2017-09-06 原创文章 经验/观点 举报 1278 1 3 0

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

      0.0°

      你确定要举报网页设计排版中哪些元素最重要?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录