网页设计框架布局代码_网页设计中的分屏切割布局法

e884b49f07db7bfd6d57ccc4f089cceb.png

今天和大家聊的是一种关于网页设计中的视觉呈现方法,一般我们称之为“分屏布局”,是一种常见的网页设计排版方式,将页面分割为均等或者不均等的两部分,这种方式的好处就是可以将文字信息和图像元素进行更有效的布局区分,让信息更有条理,人们更容易阅读,同时这样做的目的也是为了让画面的视觉更吸引人,加强视觉记忆。这种方式主要运用于网页的首屏设计,从事相关工作的设计师可以从中寻找一下设计灵感,灵活运用到自己的工作中去。

da01313224df6a1a76f4963c302b13ea.png

e230514541c769cdc9aee0cdedff9718.png

fff0f11a957bfe9ff8a3914df178bd84.png

c31830e97b5b10c035e5fdd0b4f0b79d.png

3e068cb63d64913dd04e521f55c15937.png

上面这一组分屏布局作品就很有代表性,它的切割性很明确,将页面分为两个部分,一边是文案信息,另一边则是和文案相关的图像元素,整个布局让信息传达很明确,也让页面显得很有条理,对于登录注册的页面也是很有效果的设计方法。

28d77251be7c1bd9d2d02c9df68e3da9.png

e5e60c615929aa8057e23ff003477b70.png

0e8956025664541f8e9efb7fa16e5a0e.png

345bc766f9be6b9804cfbdc69aefe124.png

464dbe87dbc62dc6f159e94cc618b026.png

6b1838bab8d36b3bdfc45cb01a6ede5e.png

16fb0d85651a3cafea6e761e4473cb59.png

653efbbf0f250be07c8bee4af007a52e.png

f99d97e4dbc0acd5903e560d62163178.png

ece625f5ae898be01705b13f9aec8a2d.png

以上的页面同样使用了这种方法,保证了阅读性和逻辑性的平衡,也确保了信息传达的有效性和视觉美感,分屏布局是考验设计师对视觉和信息平衡性把握水准的很好的标杆,使用这种方式也有助于提升设计师的页面布局水平。
这组以漫威角色为主题的页面设计,也采用分屏设计,色彩更为浓烈,将人物形象和文案信息分开布局,很容易就吸引到了受众的视线,达到传播效果。

499969c381592fee27b441aea7e01a81.png

ccaec8ef6109b38ba31901d15d8a897a.png

dff0ff9194b12f0e4a140345f5e97654.png

451d661e3c6b155c5d22f9b639cd9816.png

在电商领域,也有很多这种分屏布局的出现,比较集中在比较高端的品牌产品的banner设计上,用分屏的视觉特点去提升品牌的调性,这也是不错的选择。

1944aeb45fd35f74dcb85786457a6227.png

ce4ef8fa14e1d0d891a4191fe82e9d19.png

ec56b36ff2a0898e1807d2ed705eb468.png

be2ba76f3661ec3e95daff9abbeebf03.png

7509c46114ff791704a6801ab956eac8.png

a275ced6ef3336f2fc1411e078832fea.png

其实分屏布局的表现不仅仅局限于明确的块面分割感,在一些比较个性的网页设计中,你虽然看不到明显的分屏界限,但它依然是存在着隐藏的分屏边界。下面这些案例可以说明分屏布局的隐藏边界同样可以起到分隔画面的作用。下面的案例中,文案组合可以看作一个整体,图像又是另一个整体,通过文案的边缘空隙以及合理的留白空间,我们可以看到整个页面也是被分为了两个部分,那个隐藏的边界虽然看不到,但依然起到了核心的分屏作用。其实这种分割也就是我们常说的左右布局法,只有真正理解了分屏布局的概念,才能不局限于单一的表现形式,让画面布局更灵活。

a9f0c5cd9ec21322886d8f29a983a858.png

9cc16fda9d82bc31fdd79486da5b6a03.png

7cf1e72f5cb75da08f8b44aa2737bcd0.png

d720547e4d560a2075335aa851497c94.png

04bf25cbd8f957c0b5849a8acd5f20b8.png

fc807414e51943e65f58ec83f975bc1a.png

00784f63570b3d7d32fe0836dc963674.png

总结:

分屏布局是一种排版布局的方式,它具有明确的视觉分割目的和清晰的视觉逻辑结构,虽然看似比较简单,就是分两部分来设计,但是其实并不容易,这背后的逻辑性并不是一朝一夕可以掌握的,在文案编排和排版布局进行的过程中,要通过很多次不同的组合尝试,才能达到令人满意的结果,这就对设计师的整体把控能力提出了更高要求,照葫芦画瓢肯定是不行的,上面的众多案例,如果仅仅是知道了它的形式,而不理解它的背后逻辑,事实上还是无法真正做出好作品,当你只有空洞的外形时,就会发现整体上是无法长时间站住脚的。但是练习也是必要的,只有你先把握了形式的感觉,才能用思考后的逻辑去合理填充,可以说两者相辅相成,缺一不可,这种形式不妨多尝试一下,很有好处,祝大家学有所得,加油!

想要学习更多PS和设计技巧的小伙伴请关注我的PS专栏和账号~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/476456.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 第 24 场双周赛(326/1898,前17.2%)

文章目录1. 比赛结果2. 题目1. LeetCode 5372. 逐步求和得到正数的最小值 easy2. LeetCode 5373. 和为 K 的最少斐波那契数字数目 medium3. LeetCode 5374. 长度为 n 的开心字符串中字典序第 k 小的字符串 medium4. LeetCode 5375. 恢复数组 hard1. 比赛结果 做出来了 1、2、3…

货物与产品的区别_超市货架和仓储式货架有什么区别?

在生活中,超市货架和仓储货架咱们都叫货架,这样导致了很多客户都认为货架不就是超市里面摆货的那个货架吗?其实,虽然两种都叫货架,两者之间都有存储功能,但还有其它的区别。仓库货架注重的是存储量和承重量…

详细解析Java中抽象类和接口的区别

详细解析Java中抽象类和接口的区别 在Java语言中, abstract class 和interface 是支持抽象类定 义的两种机制。正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力。abstract class和interface之间在对于抽象类定义的支持方面具有很大的相似性&a…

LeetCode 1417. 重新格式化字符串

1. 题目 给你一个混合了数字和字母的字符串 s,其中的字母均为小写英文字母。 请你将该字符串重新格式化,使得任意两个相邻字符的类型都不同。 也就是说,字母后面应该跟着数字,而数字后面应该跟着字母。 请你返回 重新格式化后 …

[分享]天轰穿VS2005视频教程

谈到学习,虽然有很多很多人有自己一套的自学方法. 但有时候,有个好的老师来教,一个好的拍档一同促进也是十分重要的. 就在一个星期前我偶然在Google上点入了天轰穿的blog 发现里面的VS2005视频教程对于一些新学.net的朋友是在是太有帮助了 从基础到高级应用都能够涉及到,实在是…

svn忽略指定文件夹下的文件_管理SteamLibrary文件夹下的acf文件

管理SteamLibrary文件夹下的acf文件众所周知,steam中下载的游戏会在SteamLibrarysteamappscommon文件夹下创建一个以游戏名称为名的文件夹用来存放文件,并在SteamLibrarysteamapps文件夹下创建一个acf文件,里面储存着游戏的一些信息&#xff…

LeetCode 1418. 点菜展示表(哈希map)

1. 题目 给你一个数组 orders,表示客户在餐厅中完成的订单,确切地说, orders[i][customerNamei,tableNumberi,foodItemi] ,其中 customerNamei 是客户的姓名,tableNumberi 是客户所在餐桌的桌号,而 foodIt…

深入分析驴子系列(2)

在 BOOL CemuleApp::InitInstance() 函数 的 672行(VERIFY( (m_hTimer ::SetTimer(NULL, NULL, 300, StartupTimer)) ! NULL ); ) 启动一个定时器 在该定时器的 执行函数( void CALLBACK CemuleDlg::StartupTimer(HWND /*hwnd*/, UINT /*uiM…

python现在时间 命令_Python3 - 时间处理与定时任务

1.计算明天和昨天的日期#! /usr/bin/env python#codingutf-8# 获取今天、昨天和明天的日期# 引入datetime模块import datetime#计算今天的时间today datetime.date.today()#计算昨天的时间yesterday today - datetime.timedelta(days 1)#计算明天的时间tomorrow today dat…

LeetCode 1419. 数青蛙(脑洞题)

1. 题目 给你一个字符串 croakOfFrogs,它表示不同青蛙发出的蛙鸣声(字符串 “croak” )的组合。 由于同一时间可以有多只青蛙呱呱作响,所以 croakOfFrogs 中会混合多个 “croak” 。 请你返回模拟字符串中所有蛙鸣所需不同青蛙的…

MYSQL性能优化(转)

MySQL 服务器调优 最近帮人维护一个DZ论坛,总结如下几个调优技巧,让 MySQL 服务器飞速运行有 3 种方法可以加快 MySQL 服务器的运行速度,效率从低到高依次为:1.替换有问题的硬件。2.对 MySQL 进程的设置进行调优。3.对查询进行优化…

python报IndentationError: unexpected indent的解决方法.

问题描述: python语言对缩进非常敏感,一般都是四个空格 一个tab,但是很多时候我们会忽视这个问题。导致两者混用或者少写空格容易出现这样的问题。问题解决:找到指定代码行,重新书写!下面的with open则是明…

termux配置python安装kali_安卓安装kali linux之Termux

解决安装kali无模组问题步骤1.获取root环境需要下载proot直接在命令行里输入pkg install proot,下完以后输入命令termux-chroot获取root环境2.获取git ,因为需要在github上下载atilo,atilo的作用是atilo是github上的一个开源工具,…

LeetCode 466. 统计重复个数(循环节)

1. 题目 由 n 个连接的字符串 s 组成字符串 S,记作 S [s,n]。例如,["abc",3]“abcabcabc”。 如果我们可以从 s2 中删除某些字符使其变为 s1,则称字符串 s1 可以从字符串 s2 获得。例如,根据定义,“abc”…

aspnet_regsql

aspnet_regsql 使SQL支持会话状态 aspnet_regsql -S localhost -U sa -P password -ssadd -sstype p 其中:-sstype有三个值:t,p,c(详细说明可使用 aspnet_regsql -? 命令查看) 使数据库支持SQL Server高速缓存禁用功能 aspnet_regsql -S localhost -U …

AcWing之找出数组中重复的数字

题目 给定一个长度为 n 的整数数组 nums,数组中所有的数字都在 0∼n−1 的范围内。 数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。 请找出数组中任意一个重复的数字。 注意:如果某些数字不在 0…

python绘制数字23_Python 画数码数字8

import turtlesize 10line 40# 拿出笔pen turtle.Pen()pen.pensize(size)pen.pencolor("blue")turtle.tracer(False) # 不跟踪动画pen.penup()pen.forward(size)pen.pendown()pen.forward(line)pen.penup()pen.forward(size)pen.pendown()pen.left(90)pen.penup()…

LeetCode 303. 区域和检索 - 数组不可变(前缀和)

1. 题目 给定一个整数数组 nums,求出数组从索引 i 到 j (i ≤ j) 范围内元素的总和,包含 i, j 两点。 示例: 给定 nums [-2, 0, 3, -5, 2, -1],求和函数为 sumRange() sumRange(0, 2) -> 1 sumRange(2, 5) -> -1 sumRang…

timer控件的使用

拖拉过去后,双击timer,进入timer2_Tick事件,写入代码后, 改timer属性 interval为1 enabled为true 转载于:https://www.cnblogs.com/zzh1236/archive/2008/12/17/1356435.html

AcWing之找出不改变数组找到重复的数字

题目 给定一个长度为 n1 的数组nums,数组中所有的数均在 1∼n 的范围内,其中 n≥1。请找出数组中任意一个重复的数,但不能修改输入的数组。样例 给定 nums [2, 3, 5, 4, 3, 2, 6, 7]。 返回 2 或 3。思考题: 如果只能使用 O(1) …