• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 整洁漂亮的网页设计的4项原则

整洁漂亮的网页设计的4项原则

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含整洁,漂亮,网页设计等相关知识,佚名 希望在学习及工作中可以帮助到您

本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。

1.反差效果

好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

图片反差

当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。嗯,我的意思就是,比如:

The Invoice Machine

这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。

 

Instabox

 

当你眼睛看到这个页面的时候,首先你会注意到什么?最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样,它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。

颜色反差

恰到好处地使用少量颜色,是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色,也可以在一张图片或插图的颜色里面应用。

Fatburgr

 

这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。

I Love Typography

 

一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果,那让人觉得多惊奇啊!我喜欢他们所用的字体,也喜欢他们良好的青色和深灰色搭配。

字体反差

如果你想通过字体来产生反差效果,就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆,并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果,或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的,如果你将两种外形差别明显的两种字体排在一块,就会对它们带来的视觉冲击效果感到惊奇。把一个 san serif 字体和一个手写字体放在一起就是一个例子。

Fixie Consulting

 

哇噻,我真的非常喜欢这个网站上使用的排版和颜色。注意看他们标语的大小和笔画。页面上洒水效果和少量蓝色的使用,都让我非常欣赏。

2.重复原则

跟web设计相比,重复原则在书本设计中应用得更加普遍,不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯,还能提升品牌。在web设计中,可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。看看下面这些例子吧。

Ten24 Media

 

Ten24 Media 在头部和脚部都使用了很有创意的插画。

Silverback

 

这个网站绝对是超赞的!我绝对可以在前面“反差原则”部分就可以把它作为一个

您可能想查找下面的文章:

  • 整洁漂亮的网页设计的4项原则

相关文章

  • 2018-08-23用这个方法,让你的设计方案轻松通过! 
  • 2018-08-23如何用另一个角度做设计?来看Airbnb 这个创新方法!
  • 2018-08-23哈哈哈!设计师专用表情包合集(二)
  • 2018-08-23设计师如何评估工作量?来看腾讯设计师的总结!
  • 2018-08-23信息杂乱无章?教你构建合理的视觉层次!
  • 2018-08-23为什么我们都应该学会组件化设计思维?
  • 2018-08-23这些设计规则不是用来遵守,而是用来打破的
  • 2018-08-23从上亿人使用的阿里收藏夹迭代过程,总结视觉设计师应该拥有的体验思维
  • 2018-08-23网站要上线了,问问自己这15个问题再做决定
  • 2018-08-23为吸引用户而存在:界面中CTA按钮的设计有何讲究

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 省时高效!苹果官方的设计流程和实用工具推荐
    • 实战案例!滴滴试驾商业B端App 项目设计经验总结
    • 掌握这6个关键点,你也能制作出系统而专业的设计指南
    • Uber 设计师:新人和大牛的差距到底在哪里?
    • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
    • element.style内联样式的修改方法教程
    • 10分钟看懂谷歌语音交互设计规范都讲了些什么
    • Fluent Design
    • 新手建站入门教程帖⑦:做一个漂亮的网站就这么简单
    • 对背景图定位中background-position属性的自我理解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有