响应式 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

响应式话题

用7大章节，帮你从零开始学会栅格系统

UI

用7大章节，帮你从零开始学会栅格系统

本文用7个章节，从栅格的定义到栅格的应用、制定等多个方面，帮你掌握栅格系统的运用。

2022/07/21

万字干货！从4个方面完整解析栅格设计

UI

万字干货！从4个方面完整解析栅格设计

本文主要介绍等距栅格，从概念、结构和设计上更有效解决栅格问题。

2021/11/11

优设网的大屏适配经验！开启4K新视界

9图 1/5

优设网的大屏适配经验！开启4K新视界

想做响应式测试？试试这个超好用的在线测试神器！

神器推荐

想做响应式测试？试试这个超好用的在线测试神器！

本文介绍的神器可以协助开发者测试网页在移动设备、平板电脑的呈现效果，内建一些常见设备的屏幕尺寸比例，也可自订大小或横向显示。

2021/07/16

响应式神器

B 端响应式界面应该怎么做？这篇教程超详细！

UI

B 端响应式界面应该怎么做？这篇教程超详细！

本文从B端的响应式概念、响应式规则解析和响应式使用建议三个方面，帮你完整掌握B端响应式界面设计。

2021/01/27

响应式界面

用一篇文章，帮你看懂网页响应式布局原理

UI

用一篇文章，帮你看懂网页响应式布局原理

本文从响应式页面是什么、响应式布局的规则、响应式的设计流程三个方面，帮你彻底掌握网页的响应式设计原理。

2020/08/20

响应式布局

腾讯出品！超实用的响应式设计技巧

UI

腾讯出品！超实用的响应式设计技巧

本文梳理了响应式设计的方法流程，记录问题与思考，帮助以后类似的项目开展更快。

2020/07/30

响应式设计

这份上万字的指南，帮你学会用栅格系统构建响应式设计

UI

这份上万字的指南，帮你学会用栅格系统构建响应式设计

在响应式设计中使用栅格系统是非常重要的，但实际项目中栅格系统到底怎么样运用呢？用一篇万字干货帮你掌握，如何利用栅格系统构建优秀的响应式设计。（文末附作者绘制的 5 套栅格系统库福利~）

2020/04/02

响应式设计

可能是最容易看懂的响应式知识科普

网页

可能是最容易看懂的响应式知识科普

本篇文章希望能通过简单明了的文字及图文介绍，对我们设计响应式网站时经常会出现的问题进行清晰的说明。

2019/11/19

响应式设计

超全面总结！如何利用栅格系统做响应式设计？

UI

超全面总结！如何利用栅格系统做响应式设计？

@UX-BOY ：本文主要与大家分享如何利用栅格系统完成后台页面响应式设计，介绍响应式设计的思路与方法。一、什么是响应式？按照本人自己的理解，响应式就是通过合理的设计方案配合规范的技术实现策略，使同一个 Web页面在各个终端（设备）不同分辨率屏幕上都能有最佳的用户体验。

2018/10/04

响应式设计

基础小科普！3种国内外最常见的响应式栅格

教程

基础小科普！3种国内外最常见的响应式栅格

Z Yuhan : 我曾经很推崇 Material Design 的响应式栅格系统，花了不少时间去理解那几张复杂的图表和几张酷炫的动态示意。可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：那两张英文图表对艺术背景的设计师来说真的很难理解。你设计的产品很有可能比 Material Design 的预期更加复杂。

2017/11/27

响应式布局

这些响应式网页测试工具确保你的设计万无一失

前端开发

这些响应式网页测试工具确保你的设计万无一失

响应式设计几乎是当代网页设计的基础构成之一。在实际设计和开发的过程中，想要让网站按照设计响应不同尺寸屏幕，设计师和前端需要花费相当的时间来进行测试和优化。所以，今天我们搜集了7款功能强大的响应式页面测试工具，下面就一一介绍一下。

2017/10/25

响应式网页设计

超全面！移动端响应式的7种UI布局解析

教程

超全面！移动端响应式的7种UI布局解析

Tony（作者）：响应式 UI能够使我们设计的元素在任何大小屏幕尺寸能够灵活适配，保证布局和体验的一致性。毫无疑问，响应 UI 设计对于现今碎片化的屏幕是非常重要的，它能使我们在最小的资源的情况下完成设计适配，它的工作原理通过断点系统来判断读取布局方式，断点其实就是媒体查询值。比如我们平时做的 Phone 和 Pad 的适配就是通过设定断点来让程序读取对应的布局（断点设定可以根据屏幕分辨率或者屏幕尺寸），今天就和大家聊聊一些常用的响应式 UI 模式常用的布局模式流线布局等比缩放拓展布局分栏布局流动布...

2017/09/04

响应式布局

跨屏幕的响应式设计，你需要这样来设计用户体验

教程

跨屏幕的响应式设计，你需要这样来设计用户体验

现在的响应式的设计已经很成熟了，一整套设计方案，小到智能手表的屏幕，大到电视显示屏，还兼顾到更普遍存在的智能手机、平板和电脑屏幕。在很多人看来，跨屏幕的响应式设计，只是一套内容调整大小就可以“适配”了，但实际上，它所牵涉到的因素非常的复杂：设计师需要通过设计让内容在不同的平台上体验最大化，确保让用户在任何一个屏幕上看到内容的时候，会觉得这些内容就是为这个平台而设计的，而不是单纯的缩放而来。这种无缝的体验，才是跨屏幕设计的真正难点所在。

2017/07/04

响应式设计

神器两连发！开源动画库Lottie+Sketch新版响应式缩放功能详解

神器推荐

神器两连发！开源动画库Lottie+Sketch新版响应式缩放功能详解

编者按：今天推荐两个设计神器，一个是Airbnb 发布的开源动画库 Lottie，帮你轻松让动效落地。一个是Sketch 44 新版的编组缩放功能详解，为设计师提供更高效直观的控制能力，一起来提高效率！Sketch 44 新版响应式缩放功能详解Sketch 44 对编组缩放功能（Group Resizing）进行了升级。

2017/06/25

教程

未来大趋势——响应式图标

说实话，第一次听到“响应式图标”我也觉得怪怪的，正如不久之前，人们为了让图标字体更适合不同设备，而更改它们的大小一样，但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天，我们就来八一八，这到底什么个什么玩意儿。推荐阅读：《想学响应式设计？

2013/12/19

不藏不掖着，响应式网页大揭秘来了！

网页

不藏不掖着，响应式网页大揭秘来了！

如果你不熟悉响应式设计，这篇特意制作了超多动图，可以帮你轻松看懂，基础差也不怕。

2013/11/10

响应式布局

干货！23套全新的免费HTML5网页模版

酷站推荐

干货！23套全新的免费HTML5网页模版

@Gaoyoungor 目前互联网上存在很多专业的高质量HTML5模版，并且是免费的，如果你熟悉编程的话，只需要研究一下它们的代码就可以学到很多便捷的操作和新的技术。在今天的文章当中我不是列出一长串可用模版的列表，而是精挑细选出高质量的响应式HTML5模版。更重要的是，它们都是免费的，所以我希望能有几个模版能满足的你的需求，能够运用于你的项目当中。

2013/07/31

没有更多文章了

大家都在看

职场规划

文章 412

版式设计

文章 248

设计干货

文章 158

AI教程

文章 130

入门

文章 162

设计圈干货

文章 188

网页设计

文章 966

海报设计

文章 320

设计流程

文章 154

热门频道

设计专题

热门设计知识精挑细选

细节猎人

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

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

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

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

微信号：uisdc411

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

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

每天官微五分钟

一年萌新变大神

扫码关注

1000W

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

优优教程网

优设大课堂

设计师导航

优设训练营