AO3 News

Post Header

Published:
2016-01-10 00:10:23 UTC
Original:
Upcoming layout improvements for different screen sizes
Tags:

2011年重新设计 Archive of Our Own - AO3 (AO3 再创作组织)时, 考虑到大部分读者是通过台式设备来登陆我们的网站,我们根据大屏幕的需求来设计网站的布局与界面。过去的四年带来了很多变化,现在,大部分在线流量来自小屏幕设备,比如平板电脑或手机。因此,我们将会根据现状对网站布局与界面加以调整。

目前, AO3根据您浏览器窗口的像素宽度来决定展示哪一种页面。假如您是通过640像素或以下宽度的浏览器窗口来访问我们的网站,您会看到单栏的布局。除此之外,您会看到默认页面。然而我们的默认页面是为大屏幕而设计的,所以假如您的浏览器窗口宽度介于640 和1024像素之间,有筛选功能的个人中心页面布局可能看起来并不理想。

 一位用户的作品页、个人中心、作品和筛选排版成三栏,因屏幕大小的原因,部分筛选功能被裁出图片。

很快,我们将会加一个新的断点来帮助之前在使用有缺陷版本AO3网页的用户。结果将会是默认版和手机版之间的折中页面版本:个人中心将会出现在主要内容的上方,即主导航的下方,但是筛选始终会出现在页面的右侧。

 一位用户的作品页,个人中心在上方显示,主要内容和筛选排版成两栏。

同时,我们将会停止使用像素来决定断点而是用一个叫做Em 相对长度单元。 Em 单元基于字体大小,利用它们来设定我们的断点表示:假如您有更改过浏览器的默认字体大小,AO3页面显示将会变得比以前合理。比如在谷歌浏览器里把字体设定为Very Large (非常大)会切断筛选文字并使作品信息显得非常细长,即便您是使用1024像素宽的浏览窗口来访问AO3:

 一位用户的作品页, 浏览窗口字体设定为 Very Large (非常大),个人中心、主要内容和筛选排版成三栏,筛选几乎完全消失了。

一旦我们添加新的断点,个人中心将会出现在网页的上方,使筛选和作品信息有更多的空间并提升页面的浏览性能:

 一位用户的作品页, 浏览窗口字体设定为 Very Large (非常大)。个人中心现在出现在页面的上方,主要内容和筛选排版成两栏。

新的 42em62em 断点将可以在界面中使用。任何使用现有的 640px 断点界面将会被自动转换到新的42em设定。

这些断点并不对应某一个特别电子设备的尺寸——电子设备的多样化证明这样的方法并不现实——它们基于当AO3默认页面布局开始遇到问题的时候。我们意识到对于那些决定重做界面设计的创作者来说这种设计并不理想,但是对于大部分的界面使用者来说该变化是有利的。同时,我们正在研究未来能够让您在任何浏览AO3的设备上操作的可个性化设置的断点。

假如您有任何问题或遇到技术困难,请 联系我们的支持委员会志愿者, 他们会很乐意帮助您!

这份新闻贴是由OTW志愿译者翻译而来。想了解我们的工作,请查看transformativeworks.org上的翻译委员会页面