新闻中心 LAST NEWS

讲讲自适应网页设计有什么特点

  在响应式网页设计的时代,每种设计样式都要找到得以同时适应电脑版与手机版的解决方案。在响应式网页的考量下,不见得都可以继续使用。设计师们要找出同时可以符合响应式网页设计规范,又能具体呈现不同网页设计风格的作法。我们来看看有哪些成熟的响应式网页设计案例,能让你的客户在手机上顺利浏览,同时增进网站流量。
  采用汉堡选单做为自适应网页手机版选单
  汉堡选单目前已作为响应式(自适应)选单的设计模式,IBM官网则进一步将它发展成电脑版和手机版共用的选单样式,并保留电脑版的主选单,使电脑版和手机版的操作习惯一致。
  下拉选单在电脑版和自适应网页手机版能相通
  过去网站次要选单经常采用左选单的方式来设计,在响应式的时代,GE官网直接将这些网站次要选单直接在主选单上以下拉选单的方式呈现。如此的规划,可让使用者在电脑版选单和手机版选单,看到一致性的选项。
  采用自适应全幅背景呈现大屏幕的观赏效果
  全幅背景是目前比较流行的响应式网页设计模式,不论内容是图片切换(slider)、影片或单色色块。由于大背景主要是透过width:100%让画面尺寸自动贴合屏幕尺寸,一来在电脑或行动设备都可以贴齐边界,二来大背景可以呈现大屏幕的观赏效果,因此成为受欢迎的响应式网页设计样式之一。
  文章列表以自适应卡片清单方式呈现
  卡片式列表应该算是响应式时代典型的设计样式。卡片式的设计可以在电脑版和手机版自由切换,与手机APP清单的浏览模式相近,可清楚呈现每个图片,点选范围也变大了,许多列表的样式也都直接采用卡片式设计。
  可因应屏幕尺寸自由变化的自适应全屏幕相册
  全屏幕相册可直接侦测屏幕宽高来自动调整图片呈现的尺寸,不像嵌入网页的相册,需顾虑网页上其他元素相对的位置。
  可因应手机尺寸改为单边呈现的自适应时间轴版面
  时间轴是适合用来呈现历史记录概念的设计,经常用在企业历史沿革。响应式(自适应)的时间轴可用来在电脑版和手机版呈现时序概念。
2021/06/21 14:31:35 125 次