1. <form id='VJjI73'></form>
        <bdo id='VJjI73'><sup id='VJjI73'><div id='VJjI73'><bdo id='VJjI73'></bdo></div></sup></bdo>

          • 首页 > 网页教程 > 设计分享 > 版式设计:不一样的网页布局之“方块布局”

            版式设计:不一样的网页布局之“方块布局”

            时间:2018-06-01    作者:徐尤熙   来源:知乎网

            使用方块布局的目的是什么?

            或许这对你而言有点哲学和理论化,我们来看看别人选择方块布局的原因。(顺便提一句,我所指的方块也包括矩形,有些案例也使用矩形。)使用这种元素有两大原因。首先也是最重要的,它有助于组织内容。其次,它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。

            看看Dennis Adelmann的作品集,显而易见,方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径,让事物保持简洁。

            Dennisadelmann

            不过再看看We Love Noise这个网站,它就完全不同!是的,到处都是方块,移动鼠标时还有个有趣的动画效果。不过除了组织内容之外,你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。

            Welovenoise

            怎样用好它们?

            我不觉得使用方块元素是什么难事。尤其是网页,自从诞生之初就开始使用方块形状来设计界面。但是你若想更有效地使用它,请遵循以下几个步骤。

            制定希望达成的目标

            根据你所要达成的目标,页面和区块会有很大的不同。一旦你确定了,方块元素就能帮助你完成目标。你是用它来组织内容?还是想为页面增添一点乐趣?

            看看Paper and Paint。他们使用方块元素保持页面井井有条,并且突出了页面特有的流动性。随着鼠标向下滚动,每个方块中的不同内容都在进行着视觉差滚动——这是个非常酷的效果——每个方块都向你讲述独特的故事,汇聚成整个页面。这些方块元素的作用,就是保持各部分对齐,形成一种整洁的时尚,同时也为各个页面营造不同的故事氛围。

            Paperandpaint

            Anthonyjohngroup

            Anthony John Group使用方块来展示他们创作的各个项目,还有关键的公司信息,比如“幕后团队”。主页的规划与构建很棒,但也结合紧密。很明显,他们致力于创造像这个页面一样优雅的高端建筑设计,如果没有这些方块,可达不到这样的效果。

            相关推荐
            富有灵感和创意的web布局及交互设计赏析
            网站专题页面的视觉设计及结构布局要点分享
            在网页设计中如何应用黄金分割比例?
            平面设计中关于控制视觉层次的设计方法
            网页设计中创新式布局与交互设计思考
            网页设计教程:扔掉黄金比例吧 网页布局还能这样做的!
            如何以Web布局创新提升网站的用户体验?
            布局专攻文!如何搞定响应式网页布局设计?
            从这5个维度入手,让你的网页设计脱颖而出
            布局太死板?6个小技巧让你的网页设计活力十足!
            网页设计的「开放式布局」是怎么样的?
            如何让网站首页设计得极具吸引力?
            移动终端全新界面设计语言“Metro”简析
            淘宝品牌名店的BANNER广告设计评价及分析(2)
            优秀排版设计的8条建议
            版式设计:深入浅出学会网格系统的应用
            如何学会版式设计中的主要元素提取?
            文字排版设计:如何设计出吸引视线的标题?
            如何用超大字体元素应用在设计作品集类的网站?
            分享:设计法则之恐惧留白 Horror Vacui
            什么是“整体网页设计”?整体网页设计工作原理
            CSS酷站网页水平条经典设计欣赏
            欧美CSS酷站网页背景设计之光影特效赏析
            酷站欣赏之欧美棕色调网站设计案例赏析
            如何基于心理学设计的目的来制作受用户欢迎的网页
            二十款网页图文混排设计样式欣赏
            黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
            35套精美绚丽的创意酷站设计欣赏
            网页设计的文字色彩与可读性分析
            如何掌握网页广告字体设计的技巧
            40款超个性粗糙纸张纹理风格的CSS酷站欣赏
            15款富有创意的的html电子名片设计欣赏
            国外49款创意型404错误网页欣赏(附演示网址)
            手绘风格的15款超级漂亮网站欣赏
            网易频道页面的改版过程分享
            网页设计师必备的13款国外CSS酷站参考画廊

            精彩推荐

            热门教程