经典案例推广高端H5电商设计公司了解价格
QQ联系
微信联系
手机联系
QQ联系
微信联系
手机联系

案例 | 响应式网页设计排版需要注意什么?

发布时间:2019-09-09
发布者:eidea
浏览次数:234
有研究报告证实,75%的用户承认自己会通过一个公司的网站来评价该公司的声誉。由此可见,优秀的响应式网页排版对于公司的形象和转换率有重要作用。那么,网页必须以有吸引力的,高效的方式呈现信息。问题是,目前有很多不同类型的移动设备,而网页排版必须符合所有这些平台的规范。下面小编会给大家分享几个响应式网站案例来具体分析。

那么,我们究竟该如何实现最佳的网页排版效果呢?

1. 突出显示标题
响应式案例分析:
请注意这个网站中优雅的连字。这些优美的字体如果用于网页标题中的话,无疑会为访客带来更为卓越的用户体验。


网页排版的一个特点就是标题在版式中占据突出位置。别致的标题能吸引用户在你的网站停留更久。为了实现这一点,你可以利用字形(glyphs)和连字(ligatures)技巧创造外观更独特的标题。

连字指的是看起来似乎是连接在一起的字母。例如,单词“fish”中的f和i在某种字体里可能联成一体(fi)。通过浏览器的字体设置功能或借助“文本渲染——优化清晰度”(Text Rendering- OptimiseLegibility)特性, 你可以轻松地实现连字效果。火狐浏览器已经设置了默认的连字符。在某些字体中使用特定的连字组合效果能为你的网页版式增加美感和风格。在网页排版软件的Text, Type 或Open Type目录中,一般都可以开启或关闭连字效果。当合适的字母相邻出现时,这些软件会自动为它们设置连字效果。

2. 在响应式排版中,调节行宽十分重要
响应式案例分析:
网站suite 将没行文本的字符数限定为75个。正如你能看到的,页面中的文本看起来十分优美,能让用户怀着兴趣一直读下去。


必须对网页中的行宽(line length )进行调节,因为字体的行宽与排版的响应程度息息相关。响应式设计也包括在不同尺寸的屏幕上字体所发生的自适应式改变。所以调整字体的行宽是必须的。

理想的行宽为每行文本中字符数量在45-47之间,包含空格和标点。最长的限度我45-85个字符。这是对人们的阅读习惯和眼动规律做出研究后得出的结论。根据这一结论,有专家建议网页内容采用左对齐的排版方式,因为人的视线在阅读时一般会按照从左至右的方式在水平方向上运动。

3.与字体的物理属性相关的因素会影响字体在设计中的灵活度

响应式案例分析:

借助 Superpolator 和FlowType.js之类的工具,只需拖动滑块,你便能清楚地看到响应式排版的作用。



响应式排版可能会受制于影响字形的因素。这些因素包括字重,字宽,笔画对比,字体高度,光学尺寸等等。这些因素的些微变化都会影响站点的观感。当然,现在已经有了不少的工具可以让设计师部分地修正这些限制。

响应式排版的操作需要在实践中不断完善。通过对媒介查询(media queries)知识的学习和对不同屏幕尺寸的设备进行测试,你将会逐步掌握响应式排版的要点。现在你已经知道了要达到最好的响应式排版效果需遵循哪些原则,今后便可以将这些原则贯彻到自己的设计中。

网站案例欣赏

品壹装饰

H5创意型企业官网

比音勒芬

响应式集团官网

柯翌咨询

H5创意型企业官网