平行空间大事记暨官网上线历程

关于我们

如果你不了解平行空间,建议先看看我们的团队官网:www.parallelspace.cn

温馨提示:用不同屏幕宽度的设备浏览页面,会有不一样的显示效果喔~

官网效果展示

iPhone 上的效果:

iPhone 效果展示

iPad 上的效果:

iPad 效果展示

普通桌面电脑上的效果:

普通桌面电脑效果展示

大屏桌面电脑上的效果:

大屏桌面电脑效果展示

官网登上爱范儿 MindStore

官网上线后,我试着给爱范儿 MindStore 提交“产品”,没想到第二天团队官网就出现在了 MindStore 首页,排在第三位,仅次于秀米和智能婴儿车。详情戳这里:Parallel Space on MindStore

一支无名团队凭借一个单页静态官网,登上了 MindStore,我个人觉得是官网的颜值打动了负责审核的工作人员了。

当时的截图:

平行空间登上 MindStore

Timeline 回顾

本来这篇博文应该纯粹记录官网上线历程的,但是发现团队成立后并没有做过大事记,遂一并记录吧:

  • 2015 年 5 月,平行空间团队成立。那会儿频繁的会议,密集的工作安排,压得人有点喘不过气来。期间,平行空间招新工作顺利完成,团队注入新鲜血液;制定了 2015 下半年计划;
  • 2015 年 6 月,零零散散的一些技术研发和维护工作,以及团队整顿工作;
  • 2015 年 7 月上旬,学期末,以团队名义第一次参加比赛——“第二届‘恺炬杯’惠州创新创业大赛暨首届仲恺高新区 APP 设计大赛”(参赛经历有限,优秀奖,但也确实总结了些经验教训);
  • 2015 年 7 月中下旬,暑假在家,各有各的事儿;
  • 2015 年 8 月,按计划提前一个月回校,协同工作;
  • 2015 年 9 月,开学推广活动,转化效果正常;
  • 2015 年 10 月,由于上课、实习等种种原因,部分产品开发周期被迫延长……但官网于 11 日如期上线;中下旬比较平静,主要是团队内部建设;
  • 2015 年 11 月上旬,也就是这三天,光棍节“派 TT”活动,效果很棒!

进入正题:技术理解+官网上线

计划 ≠ 实际?

从 5 月份制定计划,7 月份暑假在家真正开始着手这件事儿,到 10 月 11 日正式上线。这时间跨度足足有 3 个月。然而,正如你所看到的一样,官网只有一个页面。对,还是一个静态页面。可能有人想吐槽了:这么简单的东西我半天就可以搞定!你居然花了 3 个月?而且,这东西谈何技术栈!

且慢,请允许我娓娓道来……

真相只有一个

事情是这样的:真正做这个官网页面,我花了两天用于设计、两天空闲时间用于编码(由于完美主义情节和强迫症,也确实是稍微慢了一点点)。而其余时间,都在升级对前端的认知,学习前端知识,筛选工具,做技术选型的工作。

对前端稍微了解的小伙伴都应该知道:一个简单的前端项目,既可以用最简单的原生方法进行开发和维护,又可以用复杂的工程化手段进行开发+优化+维护,甚至可以针对目前的主流设备,做到页内图片、页面排版 1:1 近乎完美还原……

那么,对于一个完美主义者和报废设计师,如何平衡项目开发周期和项目还原度,变得尤为难以抉择。然而,从严格意义上看,这是我第一个“对外可见”的项目(以前的项目都是微信公众号内 Webview 小功能页面)。所以这一次,我决定发挥我的完美主义主观能动性 O(∩_∩)O哈哈~

不谈设计

虽然官网颜值确实很高,但是今天我不打算谈论这个。

只谈技术与理解

说说什么是“H5”

“H5”这个说法其实相当的“蛋疼”。依稀记得,我是在刘健亮的微信公众号上看到这个说法。当时还迟疑了下,“H5”是什么鬼……后来才知道,“微信运营们”把在微信朋友圈里传播的那种酷炫、能滑动的 Bling Bling 的页面集合叫“H5”。

HTML5 表示受到了一万点伤害……

按照我的个人理解简单解释一下:

HTMLW3C 定义的一种用于组织网页结构和内容的超文本标记语言。HTML5 是 HTML 的第五个版本,新增了很多新特性,为构建适合移动设备的网页、网站等提供了标准上的支持。

而所谓的“H5”其实算是各大公司、组织,甚至是个人的“产品”。其很大一部分目的在于宣传、推广和传达理念、思想等,更合适的叫法应该是:XX 产品 Campaign、XX 产品宣传落地页、XX 宣传文案……

而这些 Bling Bling 的页面,除了依赖 HTML5 这门标记语言,还至少需要 CSS3JavaScript 来实现动画效果和交互效果。

所以说,“H5”是一类集合了至少三种技术的宣传推广文案,或市场营销部(运营人员)为传达某种理念和思想而做的 Campaign 方案。

为什么要扯 HTML5?

主要是想为不懂前端的童鞋们,消除几个疑惑:

  1. 不要以为 HTML5 是很新鲜的东西,一点都不新鲜了。恰巧是微信朋友圈的强传播属性,导致所谓“H5”火了之后,HTML5 这种形式的宣传页知名度大了而已,谓之“普及了”;
  2. 现在的网页、网站几乎都是基于 HTML5 开发的了(部分无良技术外包除外);
  3. 有些网站在电脑上打开的“外观”与在移动设备上打开的“外观”不一样,那是因为借助了 HTML5+CSS3+JavaScript,针对不同设备进行了不一样的展示,本质上还是同一个网站。当然,像百度这样的大公司,某些对设备很敏感的服务,确实存在多个不同的版本。例如“百度地图”网页版,至少有 PC 版和移动版两个版本,分别是不同的网站。只是针对不同的设备,加载不同版本的网站,其背后的数据其实是一致的。
  4. HTML5 和 CSS3 的出现,使得开发一个能同时适配 PC 和移动设备的网站变得更加便利。这为网站跨平台提供了基础,而且跨平台后的网站可用性和易用性得到了保障。

文章开头的温馨提示里就提到,平行空间官网能针对不同的设备宽度,展现不一样的样式。你猜对了,平行空间官网确实使用了 HTML5 和 CSS3。然而,这不是今天的重点。

重点来了:官网技术栈

平行空间官网源码已在 Github 开源,戳我快速进入>>

  • HTML5、Bootstrap Grid System(网格布局系统)、LESS、jQuery;
  • 基于 Gulp 构建工具的 Workflow:微信朋友圈广告工作流 WxMoment-Workflow(由微信团队维护的开源项目);
  • 中文字体子集化方案:Font-Spider 的 Gulp 插件 gulp-font-spider

尽管 WxMoment-Workflow 在整个项目的开发过程中,扮演着极其重要的角色(当然,也因为最近 Node.js 社区大跃进式的版本升级,导致 WxMoment-Workflow 这个拥有诸多插件依赖的工作流变得可用性极其低,很多时候能否成功安装完全靠运气)。但是,今天的主角却是 Font-Spider

藏好主角,先来聊聊中文字体

中文字体界之殇

一个网站要传达信息,除了文字、图片、语音、视频等几种媒介外,就目前而言,并没有太多其他的方式方法。而文字作为其中最基础也是运用最多的一类媒介,如何让其表现得更美观和优雅,更适合长时间阅读,无论是字体界,还是网页重构圈以及前端开发圈,都做了很多努力和尝试。

先是,中文字体界慢慢地出现了越来越多针对电子显示屏进行优化的中文字体,例如 Adobe 和 Google 共同设计并开源的思源黑体,以及柯熾堅老师三年磨一剑的信黑体,还有苹果去年推出的在自家全系列产品里都用上了的苹方……

平面设计师都知道,中文字体界是多么缺乏优秀的中文字体,以致于设计稿中经常只会出现那么一两种无衬线体,无非就是微软雅黑、方正系列、造字工房系列……

问:为何中文字体界缺优秀字体?是中国缺字体设计师?国外情况如何?

答:原因主要有两个。

  1. 优秀的字体设计师确实少;

  2. 源远流长的中华文化积攒下来的中文字型太多了!基本字型就有几千个,良心字体设计师还需要设计常用字以外的生僻字,多则上万,最多两万+。而英文字体,只需要设计 26 个英文字母+有限的标点符号,自然简单快捷多了。

意思就是:一套合格的中文字体,必须要设计几千个常用字字型和标点符号。良心字体设计师为了满足一些用户的生僻字使用需求,还需要设计生僻字的字型。其复杂程度,非英文字体所能企及。工作量大的同时,中文字体字型还比英文字母字型复杂得多,还需要各种各样的设计思考与讲究。

中文字体于网页使用之殇

中文字体设计,除了工作量大、字型复杂、考究设计功力外,还有一个巨大的 bug,也是“得益于”字型太多:设计出来的字体文件相当巨大!

动辄大于 2M 的字体文件,若像英文字体一样应用于网页中,是极其浪费流量且影响网站加载速度的行为。因此,绝大部分中文网站,都使用浏览器默认字体来展示自己网页内的文字内容,并没有针对性地进行中文字体的选择和优化。

然而,浏览器默认字体设置,取决于用户自己的电脑内安装了什么字体+浏览器设置了什么字体。例如,自从 Windows Vista 操作系统起,微软默认使用微软雅黑作为系统字体,而大部分浏览器,却默认使用宋体(中易宋体)作为默认字体,导致了本来网站能用微软雅黑来显示,却偏偏被浏览器给“宋体”了。

还有另一种情况是:网站设置了使用的字体,而电脑内并没有安装该字体,导致显示效果不佳。例如 Windows XP 并没有自带微软雅黑字体,而很多网站默认使用微软雅黑作为网站无衬线体的默认字体,导致 XP 用户自动降级使用 XP 内默认的 Arial 字体来显示无衬线字体。

上有政策,下有对策

针对上面第二种情况,聪明的 W3C 给出了一个标准,并将其添加到了 CSS3 中:@font-face

@font-face 的作用简单来说就是:允许网页重构师、前端开发工程师在网页内嵌入并使用网络上的字体,而不仅仅局限于只能使用自己电脑内的字体。

这意味着:如果一个网站想要使用一种特别而又不常见的字体,并且希望网站在所有用户的电子设备中都展示一样的文字效果,那么,只需要借助 CSS3 的 @font-face 定义好需要使用的字体在网络中的地址即可。这个地址,既可以是第三方字体服务提供商提供的地址,也可以是自己服务器中的字体文件的地址。

从而实现了:用户的设备无需安装该字体,只需要网页加载完毕,网站即可使用该字体来显示文字内容的初衷。

有了这项标准,中文字体在网页中“能不能”使用的问题解决了,而“好不好”使用的问题,谁来解决?

主角登场:中文字体子集化方案

前文说到,中文字体普遍文件体积很大,那么有什么方法可以让字体文件体积变小吗?真心有!那就是:中文字体子集化方案

顾名思义,子集就是从父集或者全集中攫取的部分元素再次组合而成的集合。这是数学上的概念。而中文字体子集化方案,意思就是:从文件体积大的中文字体中,攫取出需要使用的部分字型,再合成为一个新的、文件体积相对比较小的字体文件的方案,或者是把没有使用过的字型从字体文件中剔除,从而形成文件体积相对较小的字体文件的方案。

据我所知,目前国内中文字体子集化方案有两个:一是由百度 FEX 前端研发部开发并开源的 Fontmin,二是基于 Fontmin 二次开发并开源的 Font-Spider

两者都是基于 Node.js 平台的纯 JavaScript 解决方案,使用方法都很简单,请参照各自官网。然而,在我的试用过程中,也发现了一些缺点:

  1. 支持格式不够广泛。目前只支持 .ttf 文件格式,对于常用的 .otf 格式反倒不支持,这给找字体文件提出了很高的要求,甚至有时候可能需要去购买字体才能拿到某些商用字体的 .ttf 格式文件;
  2. 子集化后的字体文件体积也相当可观。平行空间官网单个页面里,大约有 800 个字型,子集化后的字体文件大小约为 90KB(其中 .svg 格式文件达到 240+KB),相当于一张高分辨率图片的体积。这对于访问量大的网站而已,也是一笔不小的流量费开销;
  3. 只适用于静态页面。虽说两个方案都依靠在 Node.js 社区,能实现无缝跨平台。可是对于大型网站、动态网站这类字型无比多、内容需要动态生成的网站而言,中文字体子集化方案显得毫无必要、相当无奈:
    • 毫无必要:可以剔除的字型很少——因为网站大,内容多,自然字型需求也多;
    • 相当无奈:动态网站的内容都是服务器实时生成的(即使不是实时,也是有时间要求的,不能拖延,只能提前),也自然要求子集化字体文件能实时生成。可是,从我的使用中得知,一个字体文件要进行子集化运算,是相当耗时的。当时,每次用 Gulp 构建子集化字体时,都需要 30 秒时间。这么长的耗时,对用户而言是无法接受的。对网站运营者而言,实时生成子集化字体是相当耗费服务器处理能力的。

问:鉴于中文字体子集化方案还有这么多缺点,那么目前业内普遍是怎么做的呢?

答:首先,没有什么“业内怎么做”的说法,因为业内这么做的,屈指可数……

中文字体 @font-face 使用先驱(不是先烈)——苹果官网,使用的是一个 0.97MB 大小的 PingHei-Light 字体。应该是一个特别定制版本,去掉了生僻字,只留下基本字型中的基本字型。

而国内官网做得也不错的锤子科技官网,我记得在坚果手机发布之前,使用的好像是方正悠黑字体;刚刚想再去确认一遍,发现已经沦落到要么使用图片代替字体,要么使用微软雅黑的地步了。

所以说,对于访问量巨大的网站而言,在网页中使用优秀的中文字体,也是极其需要勇气的决定!

官网的开发细节

单页静态页面,无论是布局,还是代码都相当简单,也没有复杂功能。然而,最耗时的依然是不同设备间的适配工作。

平行空间官网充分调动了我的完美主义主观能动性——是的,官网适配了除了 Apple Watch 外的所有苹果设备,还有主流手机、平板、PC,以及部分 Linux 系统也有中文字体的优化;针对每款 Retina 设备都准备了 @2x 二倍图。

为此,专门总结了一份分辨率查询表以作备忘:

设备类型 Bootstrap 响应点
Phone 手机 <768px
Tablet 平板 768px~992px
Computer 普通电脑 992px~1200px
Large Screen 大屏电脑 >1200px
机型 屏幕尺寸 CSS Pixel 是否 Retina
iPhone 4/4s 3.5 320x480 @2x
iPhone 5/5s/5c 4 320x568 @2x
iPhone 6/6s 4.7 375x627 @2x
iPhone 6 Plus/6s Plus 5.5 414x736 @3x
MacBook Air 11 1366x768 No
MacBook Air 13 1440x900 No
MacBook Pro 13 1280x800 @2x
MacBook Pro 15 1440x900 @2x
MacBook 12 1152x720 @2x
iMac 21.5 1920x1080 No
iMac 27 2560x1440 No
iMac 4K 21.5 2048x1152 @2x
iMac 5K 27 2560x1440 @2x

由此可见,Bootstrap 并不能很好地对 iMac 系列一体机进行完美适配,因为 1200px 的响应点无论是距离 1920px 还是 2560px,都有点远。为此,需要人工对照 iMac 几款机型分辨率和是否为 Retina 屏幕,一一设置媒体查询(Media Query),增加针对 iMac 的响应点。

// 针对 iMac 21 寸,需要 1920px 宽度的背景图片
@media only screen and ( min-width: 1920px )

// 针对 iMac 27 寸,需要 2560px 宽度的背景图片
@media only screen and ( min-width: 2560px )

// 针对 iMac 4K,需要 4096px 宽度的背景图片,与下面比较接近,可取中间值,保留一份即可
@media only screen and ( min-width: 2048px ) and ( min-resolution: 2dppx ),
@media only screen and ( min-width: 2048px ) and ( min-device-pixel-ratio: 2 )

// 针对 iMac 5K,需要 5120px 宽度的背景图片,与上面比较接近,可取中间值,保留一份即可
@media only screen and ( min-width: 2560px ) and ( min-resolution: 2dppx ),
@media only screen and ( min-width: 2560px ) and ( min-device-pixel-ratio: 2 )

全平台兼容的 @font-family

OS X El Capitan 的发布,带来了苹果新一代字体:中文字体的苹方、西文字体的San Francisco那么,能兼容目前所有平台的网页字体是如何设置的呢?

这里提供一个方案:

html, body {  
    font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Microhei", "Microsoft Yahei", Arial, sans-serif;
}

稍微解释一下:

San Francisco 放首位,用于检测操作系统是否为最新的 El Capitan,否则退而求其次,使用Helvetica Neue(苹果设备目前就这两种默认西文字体)。Lucida Grande 主要用于适配 Ubuntu 系统的西文字体,Windows 系统并不自带此字体,所以并不会 fallback 到 Windows 上来。Segoe UI 是自 Windows Vista 操作系统以来的默认 Windows 西文字体。

接着到中文字体部分:PingFang SC 放首位,依然为了适配苹果设备,否则退而求其次,使用Hiragino Sans GB(冬青黑体。之前 OS X 默认中文字体);Heiti SC 主要是为了适配 iOS9 之前版本的 iOS 系统机型。WenQuanYi Microhei(文泉驿微黑) 是某些 Linux 系列操作系统的默认中文字体。Microsoft Yahei 是自 Windows Vista 以来 Windows 默认中文字体。最后的 Arialsans-serif 是最后一道 fallback,用于 Windows XP 以及完全没有以上中文字体的操作系统使用。

如果在项目中使用了字体子集化方案,可以在微软雅黑之前放入自定义字体。对于苹果系统,建议保持其系统默认字体设置,不强制使用自定义字体;对于 Windows、android,建议能使用自定义字体即使用。

共同进步

若有错误之处,欢迎指出,我们共同进步!

Loyalsoldier

死飞,设计,编码,音乐……美物都值得善待。