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

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

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

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

优设私房课免费学

价值178元热销课程

作品集指导

优设设计专家语音在线指导

开通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

没有更多内容了

热门频道

设计灵感

支持与服务

优设微博

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

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

微信号：扫码添加

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

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

每天官微五分钟

一年萌新变大神

扫码关注

1000W

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

优优教程网

优设大课堂

设计师导航

优设训练营