实用干货!聊聊3种最常见的响应式设计问题

2015/04/30 8692

3-responsive-design-disasters-1

@十萬個為什麽 :本文重点讨论设计师遇到最多的3个响应式设计问题,也会提供一些规避错误的策略 >>>

响应式设计方法对开发者非常有用,因为它使我们的内容在各种设备上广为传播。不用保留几个独立版本的网站,也可以摒除诸如缩放和流式布局这些方法的弊端。

缩放、流式布局与响应式

这些术语容易造成混淆,设计师常常错误地交替互用。实际上,每个都是布局技巧的显著进化过程,像技术演进那样逐一显现。

缩放布局,旨在相对缩放每一个元素。它们会随着窗口大小变化动态缩放内容,就这方面而言,它们是响应式的。布局本身保持静止,通过改变每一个元素来保持一致的表现。

scale

上图:不同分辨率下缩放布局的例子,这种设计为了统一牺牲了易读性。

流式布局就不一样,因为它们随着窗口尺寸缩放容器元素。通过em这类相对单位可以做到这点,克服了缩小文字的问题。用户主动缩放时,设计就被破坏了。

fluid

上图:不同分辨率下流式布局的例子,这种设计为了易读性牺牲了统一。

响应式设计不会缩放任何东西。相反,它会根据窗口尺寸决定显示哪些内容。

responsive

上图:不同分辨率下响应式布局的例子。

灾祸1:菜单折行

如果在页面顶部使用了导航栏,当页面展现在小屏幕上时,响应式设计通常会把它“掰”成更紧凑的格式,但这并非总是有效,如果显示区域比断点更宽,又不足以在一行显示所有菜单项的话。结果会导致菜单的折行。

wrap_menu

有些方法可以解决这个问题。其一,减少导航栏中横排菜单项的数量,将它们分门别类。然后选中某类时,你可以通过下拉菜单来显示子类。

其二,减少断点的数值。应该以导航栏开始出问题的实际数值为准,而非具体设备尺寸。

其三,不同设备使用不同方式,例如滑动抽屉。

灾祸2:使用固定宽度图片

内容区域通常都随窗口尺寸变化。所以当固定宽度图片超出显示区域时,图片就被裁剪了。

scroll

上图:糟糕的固定宽度图片例子,它太大了。于是出现了滚动条,内容被推到屏幕之外。

通过给图片设定相对单位,可以避免这个问题。或者使用支持响应式的框架(比如Bootstrap),使用响应式图片class名来控制(例如 class=”img-responsive”)。

resize

上图:同样的元素,用响应式图片class名的方式,滚动条就不见了。

灾祸3:元素的扭曲

这有点晦涩难懂,但本质上,布局显示在小窗口上的时候,所有未经处理的列都会以行的形式呈现。这是个问题,因为内容的扭曲会不经意地改变设计的层级。

wrap

上图:列变成了行,扭曲了内容。

解决方法显而易见,但令人惊奇的是,仍有很多人在纠结它:只要明确地设定元素的宽度、高度、内边距。如果它移出所处位置,盖住了其他元素,可以通过将它包裹在div容器中,设置外边距,迫使它回到原本的地方。

规划有助于避免问题

本文只讨论了3种最普遍遇到的响应式设计灾祸,还有很多其他途径会毁了一个好的设计。预防错误并不难。现代浏览器都有内置的响应式布局测试,好好规划设计,多做测试。

【优设四月免费神器推荐】

 终于等到你!功能强大难以想象:
《免费了!切图标记外挂神器ASSISTOR PS深入解读(上)》
《免费了!切图标记外挂神器ASSISTOR PS深入解读(下)》

已经有设计师用上了我会说?
《SKETCH神助攻!无代码做动效神器HYPE3入门教程》

两枚功能精悍的神器:
《设计神器两枚!随机生成用户头像的PS插件+布局神器SHOELACE》

原文地址:webdesignerdepot
译文地址: colachan

uisdc-tuweia-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量94万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/3-responsive-design-disasters

素材 界面设计 交互设计师 好文 UI 设计流程 转场动效 用户体验设计 设计师专访 设计师 排版布局 扁平化设计 素材下载 视觉设计 职场 设计规范 产品设计 配色 web前端开发 设计趋势 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里