别具一格:运用网页设计中的方块元素-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝33
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:235回复:0

别具一格:运用网页设计中的方块元素

楼主#
更多 发布于:2016-06-09 23:42



 运用方块布局的意图是什么?
或许这对你而言有点哲学和理论化,咱们来看看他人选择方块布局的因素。(趁便提一句,我所指的方块也包含矩形,有些事例也运用矩形。)运用这种元素有两大因素。首要也是最首要的,它有助于安排内容。其次,它也能创造特别的款式。它们是展现心里巴望和需求的完美元素。
看看Dennis Adelmann的著作集,清楚明了,方块元素被用来安排摆放他的著作。这是安排摆放恣意数量内容的简略途径,让事物坚持简练。
Dennisadelmann




不过再看看We Love
Noise这个网站,它就彻底不相同!是的,处处都是方块,移动鼠标时还有个风趣的动画作用。不过除了安排内容之外,你会发现方块元素也成为了计划个性的一部分。它是这种个性要害的决定性元素。
Welovenoise




如何用好它们?
我不觉得运用方块元素是什么难事。尤其是页面,自从诞生之初就开始运用方块形状来计划界面。但是你若想更有效地运用它,请遵从以下几个过程。
拟定期望达到的方针
根据你所要达到的方针,页面和区块会有很大的不相同。一旦你断定了,方块元素就能协助你完结方针。你是用它来安排内容?仍是想为页面增加一点乐趣?
看看Paper and
Paint。他们运用方块元素坚持页面井井有条,并且突出了页面特有的流动性。跟着鼠标向下翻滚,每个方块中的不相同内容都在进行着视觉差翻滚——这是个十分酷的作用——每个方块都向你讲述共同的故事,会聚成全部页面。这些方块元素的作用,即是坚持各部分对齐,构成一种整洁的时髦,一起也为各个页面营建不相同的故事空气。
Paperandpaint




Anthonyjohngroup




Anthony John
Group运用方块来展现他们创造的各个项目,还有要害的公司信息,比方“暗地团队”。主页的计划与构建很棒,但也联系严密。很明显,他们致力于创造像这个页面相同高雅的高端建筑计划,假如没有这些方块,可达不到这么的作用。
运用方块来安排内容
已然了解了你所寻求的方针——尽管那简直即是结合现有的信息——你会接触到内容安排的。你得把内容编成目录。要如安在各个方块中安排信息——某些方块内容会比别的的更多吗?这对安排内容很有协助,你会来回耍弄,看看哪些有用哪些没用,发现哪些内容太多,哪些内容太少。我确保这不是什么高明窍门,实际上它不太需求凭直觉,大多时分都很简略——坐下往来不断完结它即是了。
Blocklevel




留意到上面这个网站没有,Block Level,方块和方块中的图标即是全部了,只有图标。这即是我所指的安排内容,Block
Level的计划者故意在每个方块中只留下一个图标。下一步即是要考虑如何将调整过的内容放在令人愉悦的计划中,这正是咱们下面要讲的。
调整这些方块,或许爽性不动它!
已然安排内容的作业让你了解一组组信息看起来是什么样,你就要考虑应当怎么处理这些方块。这是让你打磨内容块巨细的一步,也许你期望它们都坚持一致——又或许你决定让它们参差杂乱排布。这仍是得取决于你的具体方针。
从Nedd中能够看出,方块元素都十分无穷,它们有着近似的宽度和持平的高度,让网站看起来井井有条。我期望你留意的是,尽管这是倾向于内容安排的用法,网站的款式仍然十分风趣轻捷,这首要得益于它的色彩、矢量元素、圆形的使用、字体等等。
Nedd




另一方面,咱们还有像Banana
Café这么元素散乱的网站——假如你想,也能够这么优美地乱序摆放。这个网站看起来也很好玩,得益于它的字体、色彩的选用等等。方块的这种特别用法其实没什么,只是一种特定的计划手法。
Bananacafe




装点款式
有千万种计划办法,能够为你下个项目中的方块元素创造特别个性。你能够将它们与别的元素自由组合,比方圆形,或许选用贯穿一直的矩形或正方形来营建网站的视觉焦点。最终两个例子中,你会再次才智如何将方块杰出地使用于计划中,期望对你有所启示,并能在你下个项目中发挥作用。
Janfinnesand




Jan
Finnesand用了全屏的宽度与高度来放置方块,每一块都有特别作用,大多展现了他以往的项目事例。充溢全部浏览器窗口的方块造就了一件十分酷的计划。
Thenewdesignproject




这家公司无处不必方块!主页上能够看到,他们也展现不相同的事例。通过不相同尺寸的正方形引导用户视线。我最喜欢的一点是,他们用两个正方形来组成一张更大的图像,但每一张都指向一个共同的项目——我觉得这很帅。







优质IT资源分享社区为你提供此文。
本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客