响应式线框图示例,作者:Leigh Howells

TG Data Set: A collection for training AI models.
Post Reply
Bappy10
Posts: 788
Joined: Sat Dec 21, 2024 5:31 am

响应式线框图示例,作者:Leigh Howells

Post by Bappy10 »

Howells 给出了一个非常好的(简化的)示例,说明了响应式设计的线框图应该如何工作:


左侧的示例是三列桌面页面布局。如果您以非常基本的方式将该页面转换为移动页面,您会得到中间的图像,号召性用语位于最底部。豪厄尔认为,更好的替代方案是右侧的示例:号召性用语紧随主要内容之后,仅在其后提供支持信息。这就是我之前所说的内容编排。但还有更多,因为在这个例子中,豪厄尔(有意识或无意识)假设所有设备的内容相同。我认为这可以做得更好。

4. 内容编排:移动、隐藏、删除、优先级排序,以及……?
内容编排在响应式网站(当然还有响应式内联网)的线框图和内容制作中发 希腊赌博数据 挥着重要作用。 Sean Tubridy 在 BrainTraffic.com 上广受阅读并广受好评的文章“内容策略和响应式设计”中写道,当您从大型桌面转移到小型设备时,网站内容可能会发生什么变化。他提到了三件事:

它会发生变化,就像上面 Leigh Howells 的中间例子一样。
它是隐藏的,例如通过折叠段落并使副标题可点击。
它正在消失——许多设计师和开发人员认为这是一个大罪,但仍然如此。
在对 Tubridy 文章的回应中,加拿大作家兼策略师 Brandon Webber 指出还有一点:“当内容从桌面移动到移动设备时发生的第四件事是优先级可以改变……”在桌面上可能不是高优先级的项目在移动设备上可能具有更高的优先级(例如,用户步行),我认为良好的响应式设计会注意到这一点。 ” 这也是豪厄尔斯在他的例子(上图)中所展示的。
Post Reply