菜单优设网 - UISDC

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题直播

每年36场重磅嘉宾主题直播

独家优惠

星球会员可享书籍软硬件最低优惠

优设私房课

大咖出品易学易懂高品质小课

法务咨询

免费咨询版权/劳动相关法律问题

开通VIP

领取更多设计师实用特权

投稿

网页布局话题

首页
设计文章
网页布局

UI 2.4w

用一篇5000+的干货，帮你了解常用的Web产品设计布局

本文通过带你了解和对比常用的布局方式，帮你学会选择适合自身产品的布局实现方式。

2021/05/07

酷家乐UED

网页 5.8w

用一篇文章，带你了解12种常见的网页布局设计

网页布局在很大程度上决定了网站的访问者将如何与网页内容进行交互。这里将介绍12个常见的网页布局形式，例如卡片式、分屏布局、网格布局……一起来看看吧！

2020-11-20

土拨鼠

UI 7.3w

大厂高手出品！中台组件设计指南：系统布局

本文将为大家分享 Web 端的系统布局，从基本布局初识、网格、布局模块到栅格进行完整链路内容整合，并以简单易懂的案例与大家进行探讨。

2019-12-19

土拨鼠

网页 7.6w

超实用！36种网页首屏布局大放送！

超实用！36种网页首屏布局，大家可以根据自己的需要选择哦。

2019-10-17

土拨鼠

教程 7.1w

布局怎么做到不单调而有层次？来看高手的9个技巧

简单布局怎么做到不单调而有层次？看看设计师 Czékmány Zoltán 的9个技巧。「如何给作品营造层次感」《平面作品太单调？

2018-09-03

程远

网页 3.0w

你了解风靡网页设计领域的「开放式布局」嘛？

如果你看过《梦想改造家》这样的家装类的节目，会发现主持人和室内设计师最常提到的概念可能就是“开放式布局”了。其实这个概念不仅仅在家装领域流行，在网页设计领域，也逐渐开始流行起来。开放式布局其实是一种有趣且功能强大的视觉设计模式，可以帮助用户更好地浏览网页，还能合理的规避杂乱的信息。

2018-01-18

陈子木

2018设计趋势

教程 3.8w

布局太死板？6个小技巧让你的网页设计活力十足！

Landy：大家都知道做网页设计有栅格，有纵向栅格也有横向栅格，栅格提供内容布局的规范，让信息组织更有条理，我们在栅格规范内做设计，上下左右、垂直居中对齐，横平竖直、方方正正的看着舒服，信息布局清晰易读，表面看没什么问题，但经常会有那么点死板，缺少点活力。如何在视觉设计中突破页面布局的“格”，让设计更具特点与众不同，下面通过几个小技巧来解决页面布局中死板的问题。延伸古词中“满园春色关不住，一枝红杏出墙来”，就是这个感觉，让主体内容不局限于页面的条条框框之内，适当的延伸出去，横跨两个模块，不仅能够打破...

2017-08-17

程远

教程 5.9w

无从下手？也许你该从这五种经典网页布局开始设计

编者按：不得不说，网页设计绝对是有套路的！网页布局虽然千变万化，但是如果你仔细观察，会发现有一些布局适用范畴相当广，经久不衰。今天的文章，我们就来聊一下5种经典的网页布局。

2016-08-26

陈子木

优秀网页设计

教程 1.5w

腾讯设计实战！聊聊响应式Web布局的概念和实践方法

Fufu ：今年腾讯ISUX官网进行了全站响应式，在项目过程中有技术沉淀，也有不少的思考，也就有了今天这篇文章，内容围绕四个方面，响应式的概念，实践方法，一些案例，以及一些看法。写在前面去年上半年，我开始着手推动项目中响应式设计的落地。以官网优化需求为契机，主动去做了响应式的页面设计，也说服了产品、设计和开发的相关同事一起把它上线落实，但不幸的是，由于各种方面的原因，比如，生搬硬套的PC模块，无差异化的设计使得移动端阅读不佳，导航兼容性有限等等原因，上线几个月后又悄然下线。

2016-07-22

程远

优秀网页设计

前端开发 1.8w

前端福利！帮你搞定复杂网页布局的Flexbox相关工具

编者按：在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想制作一个复杂的多列布局，要做的众多浏览器的兼容一致那还是很复杂的。

2016-04-18

陈子木

教程 4.0w

设计基础功！腾讯高手教你靠谱的布局设定方法

温总：本文不适合采用天才设计（Genius Design）方法的人士。有一种「奇怪的」现象会经常的看到：「很多设计师没有办法清楚的跟其他人解释他们是如何设计的，越细致的地方可能越是如此。比如，这个菜单的宽度为什么是200px？

2015-12-09

程远

教程 12.7w

最佳比例的秘密！教你如何在设计中充分运用黄金比例

吉萨金字塔、蒙娜丽莎、Twitter和百事可乐有什么共同点？答案很简单，它们的设计都遵循了黄金比例。作为一个常见的数学比例，黄金比例实际上是从自然界中总结并发现的，用于设计中的时候能赋予作品更多的设计美感，赏心悦目。

2015-11-08

陈子木

教程 3.4w

版式设计入门篇！四个超实用的网页设计构图原则

编者按：四个经典构图原则帮你入门版式设计！今天聊一聊常见的几类构图方式：对称平衡、不对称平衡、水平平衡以及垂直平衡，有分析有案例，强烈推荐学习，来感受下 >>>手把手带你掌握构图：《他山之石可攻玉！教你用摄影三分法来优化网页设计》《跨领域技巧！

2015-01-30

程远

教程 3.0w

基础小科普！聊聊两种最常见的网页布局设计模式

编者按：网页布局有哪些作用？如何设计网页布局？今天@飞屋睿UIdesign 给同学们科普下这方面的知识，选用优秀的案例分析，一针见血的特点总结，通俗易懂，好学好用，刻不容缓感受下 >>>@飞屋睿UIdesign ：从今天开始，我们也来聊聊UI设计。

2015-01-08

程远

酷站推荐 1.8w

顶尖案例来帮忙！将网站布局玩出创意有哪些方法？

编者按：布局在某种程度上是网站整体气质的代言人，优秀的布局让人眼前一亮，顶尖的布局让人好奇心大发，不停探索，如果你也看惯了稀松平常毫无亮点的网站，今天推荐的这组网站绝对有必要来感受下，会有惊喜呦。@网秦UEC ：布局是网站的基石。其作用是指引用户浏览网站各组成部分、指明关键内容。

2014-12-17

程远

教程 2.7w

先忘记栅格吧！你应掌握的11个创新布局技法

越来越多的网页设计师开始知道，进行布局设计时需要用到栅格线。但是对于老手来说，栅格线不是唯一的可选项，这些老手经验丰富，基础扎实，他们懂得怎样去创新，懂得用新颖的设计完成目标。条条大路通罗马，他们会凭借自己的感觉去摸索成功的方式，而最终的效果却更出彩。

2013-11-01

ranger

教程 1.5w

大设计时代：针对超大网页布局的一些思考和建议

对于有些设计项目来说，老套的设计模式并不奏效，你需要设计的大点，要比以往设计的元素还要大，因此就非常适合采用超大网页布局。无论是采用大块大块的背景照片还是背景视频，超大网页布局的效果非常显著：极具视觉冲击力，吸引用户注意力。但是超大网页布局有什么诀窍呢？

2013-09-20

ranger

优秀网页设计

教程 2.8w

巧用色块布局，让你的网站与众不同！

Metro UI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身，而不是冗余的界面元素。显示下一个界面的部分元素的功能上的作用主要是提示用户”这儿有更多信息”。同时在视觉效果方面，这有助于形成一种身临其境的感觉。

2013-05-03

兔子

平面 1.6w

10个增强Web字体排版的jquery插件

虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展，但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握。还好有一系列的强大功能jquery插件帮助我们解决这个问题。这篇文章详细介绍了近10个最流行的Web字体版式插件，它们允许我们润色字体版式并创造出更多超级酷的效果。

2013-03-18

阿麦

教程 1.2w

我讨厌现在让人窒息的网页布局

排版与内容之间的关系如何？前者是后者的表现形式，但往往能够决定读者对待内容的态度。几年前，在“用户体验”还没那么流行的时候，有人开始研究网页的“阅读体验”。

2013-03-11

Roc 优设

教程 4.1w

WEB设计中的排版

首先谈一下“Metro”——由微软公司开发内部名称为“ typography-based design language”（基于排版的设计语言）。Metro是基于瑞士平面设计的设计原则（清晰，真实，美观），来源于交通指示牌。生活中人们行色匆匆，更需要提供快速，简洁，直接，明确的设计。

2013-01-17

Roc 优设

没有更多文章了

大家都在看

产品设计

文章 410

壹周速读

文章 122

ps技巧

文章 636

优设大课堂

文章 127

干货合集

文章 165

职场规划

文章 354

设计师干货

文章 217

字体设计

文章 328

设计师职场

文章 662

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

行业新闻

行业大事小事全知道

设计话题

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：uisdc123

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注