Apple 網頁排版在 Keynote 中的仿製

原始網頁：（不同平台和瀏覽器，視覺效果效果可能有差異）

Apple - 配備 Retina 顯示屏的 iPad mini （2013-12-15 尚有效）

如圖：

1 是蘋果官網在 Mac 下 Safari 的顯示截圖。

2、3、4 我是在 Keynote 中的仿製。

在 Keynote 中通常實現的效果：第 4 個。

1. 「像素增至…」一行跟上一行是物理居中，而非視覺居中。加上下面介紹文字的也居左，導致重心偏左；

2. 英文未做字元壓縮，加上中英文之間的 1/2 全形空格，閱讀起來感覺有中斷的感覺，較為生分。

只使用 Keynote，能做到「最好」的效果：第 3 個。

1. 遺憾：（嘗試）使用了跟蘋果設計當中很類似的細體英文（不過沒找到類似並和中文字重很搭的）；
2. 遺憾：標題中的數字和英文使用了 Keynote 自帶的「字元間距」調解，不過壓縮到 -7% 左右，就不能再壓縮了；
3. 下面介紹的文字當中的英文和數字，通過同時壓縮英文和數字的「字元間距」大概 -2% 左右，獲得了很接近蘋果官網的效果；
4. 上面的兩行標題，採取了視覺對齊。第二行效果類似標點懸掛後居中效果。

用 InDesign 後能實現的比較滿意的效果：第 2 個。

1. 除了頂部標題，下面的介紹文字做了跟 3 一樣處理。因為實現效果的字體本機也有，間距也合適，英文也有適合壓縮，效果已很接近；
2. 兩行標題的文字是在 ID 中完成後導出 PNG 貼過來的。數字和英文做到了理想中的「比例邊距」，大概是 90%；
3. （放棄）使用細體英文（因為練習這個，最終不是為了做網頁，而是為了 Keynote 放映，細體字體驗太差，不適合）；
4. 標題中，對所選用的字體，做了 102% 的「水平縮放」，以感覺更「穩」和與原設計更接近。

總結：

1. 整體比較難的還是標題行的處理。下面的文字蘋果也是原生通過瀏覽器實現的。試了一下，不同平台和瀏覽器都能獲得差不多的效果。而標題行，蘋果通過將（估計也是 ID ）做好的圖片放在網頁上保證最終所有人看到的效果都相同；

2. Keynote 的文字排版還是比較渣的，「字元間距」調整到一定值就不出效果了（不知道考量是什麼），同時文字沒辦法實現「水平縮放」，當然更別說「標點懸掛」後的「文字」對齊了；
3. 不要濫用 Keynote 的物理居中，視覺居中更重要；
4. 通過調整合適的行距和壓縮英文及數字的「字元間距」還是有辦法讓較長段的文字更連貫和易讀的。

PDF 效果查看：Apple 網頁排版在 Keynote 中的仿製.pdf_免費高速下載

推薦閱讀：