设计沉思录|设计师应该了解的响应式知识

响应式布局这个名词相信大部分设计师都不陌生,也能清楚知道它的基本呈现效果。但具体操作及与开发人员协作时,可能会遇到很多问题。寻找资料时发现大多数教程都是针对前端开发工程师打造的,并伴随着许多晦涩难懂的专业名词,让人难以理解。 本篇文章希望能通过简单明了的文字及图文介绍,对我们设计响应式网站时经常会出现的问题进行清晰的说…

响应式布局这个名词相信大部分设计师都不陌生,也能清楚知道它的基本呈现效果。但具体操作及与开发人员协作时,可能会遇到很多问题。寻找资料时发现大多数教程都是针对前端开发工程师打造的,并伴随着许多晦涩难懂的专业名词,让人难以理解。

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

场景一提问:自适应与响应式都是什么,又有什么区别?

设计沉思录|设计师应该了解的响应式知识

A:很多人会对响应式布局和自适应式布局产生混淆,确实他们的原理是非常相似的,都是检测设备,根据不同的设备采用不同的css。

至于他们的区别,有个很简单的方法:同一个页面在不同尺寸的屏幕上访问时,看网址是否一样,只有一个网址为响应式,有多个不同的网址为自适应。另外的区分点是:是否需要一对一的设计界面,是则为自适应。

例如下图:

设计沉思录|设计师应该了解的响应式知识

上图中为响应式与自适应的区别

那么,自适应与响应式如何选择用哪个呢?

A:如果页面功能不多,用户交互少,不需要经常升级,响应式设计从运营的难易和维护的便利性考虑会更好,只要搞定网页端,其他的也都搞定了。如果从页面个性化多功能方面考虑,自适应设计更合适,因为这样可以更好的为用户提供功能全面,用户体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站,用户量较大的网站选择自适应更合适。

场景二提问:做响应式页面的条件是什么呢?

设计沉思录|设计师应该了解的响应式知识

A:响应式可以响应的前提有两点:

  • 页面布局具有规律性,必须建立灵活的网格基础,元素宽高可用百分比代替固定数值;
  • 网页图片必须是可伸缩的(页面中图片不固定宽/高)。
  • 这两点也是栅格系统本身的典型特点,所以利用栅格系统进行响应式的设计是顺理成章的,也比较高效快捷,所以响应式与栅格化天生一对好搭档。

    网格是创建一个设计精良网站的关键。在《秩序之美-网页中的网格设计》一书中,他解释成功设计的目的是“在混沌中创造秩序”。现在比较流行的8点栅格,就是结合基准网格(8pt)和纵向栅格进行设计。

    设计沉思录|设计师应该了解的响应式知识

    那么使用8点栅格进行设计的价值是什么呢?

    • 对于设计师:提升效率、减少决策、同时让元素之间保持一种协调的节奏。
    • 对于团队:设计师和前端工程师之间更容易达成默契,前端可以较轻松地用肉眼丈量8的倍数,而不是趴在那一个一个数像素。
    • 对于用户:这让他们信赖的品牌得以保持高质量的一致性体验。并且在自己的设备上也不会出现模糊的半像素偏移。

    场景三提问:常见的动态布局方式有哪些呢

    设计沉思录|设计师应该了解的响应式知识

    A:包括固定布局、流体布局、混合布局、响应式布局。

    设计沉思录|设计师应该了解的响应式知识

    设计沉思录|设计师应该了解的响应式知识

    另外,布局响应式时,模块结构如何变化呢,简单介绍几种常见的变化形式:

    布局不变,模块内容左右伸缩(见下图)

    设计沉思录|设计师应该了解的响应式知识

    这个页面的响应效果比较简单,就是等比缩放就好。

    布局不变,模块内容换行平铺(见下图)

    设计沉思录|设计师应该了解的响应式知识

    有的时候为了节省页面空间,将模块进行了平铺设计。

    布局不变,模块内容增加减少(见下图)

    设计沉思录|设计师应该了解的响应式知识

    最常见的的响应效果:

    布局改变,模块位置变换(见下图)

    设计沉思录|设计师应该了解的响应式知识

    本身为左右布局的页面,发生响应时左边的导航挪到了上部,位置发生了变化。

    布局改变,模块内容数量改变(见下图)

    设计沉思录|设计师应该了解的响应式知识

    这是一个比较特殊的灵活布局的网站,发生响应时,模块进行了隐藏删减处理。

    场景四提问:何谓媒体查询?何谓断点?

    设计沉思录|设计师应该了解的响应式知识

    A:这里有一个新名词,媒体查询(media query),其实是实现断点的一种方法,是前端工程师用简单的方法,来获取不同设备的特征,例如设备的宽度/高度,窗口的宽度/高度,设备的手持方向,分辨率等。

    这里又一个名词来了:断点,用浏览器打开一个响应式网站,检查元素,右上角会显示视窗当前的分辨率,慢慢缩小视窗的宽度,找到页面布局的变化点,就是我们上面说到的断点或者次断点。

    设计沉思录|设计师应该了解的响应式知识

    上图中每条线代表一个断点,那么应该如何选择断点?

    断点的设置一定是基于页面具体内容,并参考网站用户的设备分辨率数据。设计过程中在一定区间内拉升或压缩,已经无法用相同的布局内容时,必须改变内容展现方式时,而产生的关键尺寸的节点。请参考文章上结构模块变化参考图。

    需要注意的是,在选择断点时,不应选择将断点设置为与某些常见设备宽度相同,而是应该确保常见设备宽度能够很简单地落入到某一设计范围之内。可以在各类设备上对设计进行测试并以此来调整断点。

    那么完全不考虑设备吗?

    不是的,设备仍然很重要,只是不应首先考虑它们。在一开始最好是不要只考虑页面设计在特定设备上的显示效果,而是应该从更通用的访问设备,比如手机尺寸、平板电脑尺寸及桌面显示器尺寸去考虑它。

    在设计中遇到的其他问题

    Q:如何解决icon放大造成的变形及模糊问题?

    A:当你的产品做成响应式设计的时候,可能会遇到图标在适应屏幕尺寸的时候拉伸或挤压变形导致模糊,这个时候可以将图标做成字体。

    它的优点在于:

    1. Icon是矢量的,可以自由适应各种尺寸大小,不会模糊;

    2. 占用空间很小,250个图标的字体只有不到300K;

    3. Icon Font可控性更高,可以用代码去控制大小、颜色、透明度、特效等;

    4.兼容性高,甚至是低版本ie浏览器。

    Q:设计稿要怎么设计,要做几套?

    A:设计几套取决于这个网站你会设置几个断点,而设置多少个断点由网站的内容决定,设计师需要根据网站的实际内容找到合适的断点,设法避免列间空白太宽或太窄的情况。

    参考文献:

    • 9 basic principles of responsive web design
    • 《学习响应式设计》

    版权声明:本文(即:原文链接:https://www.wenwenbk.com/wen/20180.html )内容由互联网用户自发投稿贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 630367839@qq.com 举报,一经查实,本站将立刻删除。

    (0)
    上一篇 2022-07-16 06:26:01
    下一篇 2022-07-16 06:26:26

    相关推荐

    • “细节”在原型交互设计中的助推力

      导语:交互设计以用户体验为基础,需要考虑用户的背景、使用经验以及在操作过程中的感受,在构想及设计原型交互的时候,我们不免的可能会犯下一些错误,最后等到产品试用的时候,才意识到别扭拗“手”,那么怎样的才可以尽量的避免这样的问题发生呢?文章对我们设计原型及交互的时候要注意的一些问题进行了分析探讨,一起来看看~ 一、原型交互…

    • 12个案例告诉你:交互设计的决策要素有哪些?

      同样的功能,每个APP的设计方案却并不相同。为什么?影响交互设计的决策因素有哪些?本文作者结合实际案例对此进行了分析探究,与大家分享。 大家在把玩各种App的时候,应该经常会发现:同样的功能,每个App做出的产品设计方案却不一样。这是为什么呢?如此多种不同的方案,哪一种更好呢?我们该如何比较呢? 这些问题转换过来就是:…

      2022-07-12
      36
    • 像苹果Google一样做设计语言,带你了解全流程(上)

      总结规范一款设计语言的意义很明确,那就是解决团队内部的统一性与效率问题,并通过统一的设计语言打造统一的品牌符号形象,捕捉用户认知与记忆点。那么我们又该如何总结出自己的设计语言呢?笔者将为大家做详细的分享。 大家是如何定义一套设计语言的呢? 设计语言,貌似很火的一个词,设计团队都在做设计规范,好像没有就是不够专业,UED…

      2022-07-15 工作
      31
    • 产品设计方案撰写指南(一):结构设计

      作者打算用一系列文章来有重点的介绍产品设计方案的几大板块,不只是和大家探讨应该套用怎样的模板,更重要的是帮助大家理解产品设计时应该注意的要点。需要时刻记住,文档是为产品服务的,我们是产品经理而不是文档经理。今天所讲主要围绕“结构设计”进行~ 又到年底啦,年度总结你准备好了没?复盘2019年,你的收获有多少,成长有多少?…

      2022-07-16
      27
    • 从Google出发,聊聊未来产品设计趋势

      本文作者分析了Google搜索产品的多个方面,从中提取了一些可能是未来产品设计的趋势和方向。希望对你有所启发。 自21年前发布之日起,Google搜索就一直是卓越产品设计的成功案例。 在过去的20年里,Google通过致力于实现其雄心勃勃的目标——「组织世界各地的信息,并使其普遍可访问和具有实用性。」——超越了所有竞争…

      2022-07-11 运营管理
      25
    • 如何设计出色的深色主题界面?

      文章分享了作者为应用设计深色主题的心得和经验,希望对您设计深色主题的界面有所帮助。 深色主题是应用界面设计的最新趋势。MacOS去年推出了深色主题模式后,Android和iOS也紧随其后,推出了各自的深色主题模式。 曾经罕见的深色主题现已受到大众的广泛期待。 如果设计得当,深色主题可以带来诸多好处,可以缓解视疲劳,弱光…

      2022-07-16 工作
      37
    • 46条表单设计的宝贵经验,与你分享

      本文从420万表单用户的使用经验中进行了提取,列举了大量在设计表单时可以参考的建议,以及一些需要避免的问题,供大家一同参考和学习。 您最近填写过在线表单了吗? 答案应该是肯定的。根据最近的研究,84%的人每周至少会填写一份线上表单。 虽然你可能没有感受到,但在线填表单已经成为我们生活中不可或缺的一部分了。 其实,几乎每…

      2022-07-16
      24
    • 界面设计:设计没亮点怎么办?

      想要你的设计有亮点,你需要“记录”。本文作者梳理了自己记录的趣设计整合,对其中的亮点进行解读,与大家分享。 大家是否有过这样的经历,老板天天催稿,辛辛苦苦通宵加班做的界面“被骂是垃圾”、“界面大平了”、“和竞品太像了”、“界面没亮点”,这段时间出现严重的自我怀疑,“我真的是做设计的料吗?“ 首先我们应该相信能做好设计,…

      2022-07-16 工作
      27
    • 移动App如何设计广告位?从这4个角度出发

      文章主要围绕移动App上广告位如何设计进行了分析探讨,作者从4个角度对这个问题进行了解答,与大家分享。 记得当年面试商业产品经理时,面试官拿着手机问我,你会选择在手机系统里哪个位置设计广告位做变现? 我当时完全是个商业化小白,对这个问题没有什么概念,就指着主页的天气、日历说这些位置都可以啊。现在想想真是蒙昧无知。 本文…

      2022-07-16 工作
      23
    • 功能分析之如何设计搜索入口

      搜索入口相当于用户搜索流程的第一步,在设计上不同品类设计方案也不尽相同,今天我们来聊一下搜索入口都有哪几种设计方案? 公众号:桃浪产品日记 不知道大家有没有注意到一点,当我们去商场时,一进门总是能看到一个叫做服务台的区域,一旦在商场里有什么疑问,当我看到服务台三个字,就知道,可以去那里咨询; 那么用户使用app的时候也…

      2022-07-15 运营管理
      32