鑽石舞台

↓關注 UI范 · 每天看新鮮設計乾貨↓

說到文字排版，大家應該都不陌生，對於設計師來說，這一直都是老生常談的話題了，我也寫過很多次關於文字排版的文章。

對於商業設計來說，文字是設計作品中最直觀的信息載體，對於整個設計環節是至關重要的，所以文字排版工作既是設計工作的基礎，又是核心。

在行業內卷如此嚴重的情況下，很多設計師都在追求技法而忽略了文字編排的重要性，最終會降低作品的商業價值。

說回電商設計工作，尤其是近幾年，產品詳情頁被各大店鋪所重視，所以也讓「如何做好電商詳情頁？」成為行業內的熱門話題。

一款優秀的商品詳情頁，除了畫面的設計技法之外，文字排版也很重要，這也是為什麼商業設計都是以圖文結合形式展示的原因。

那麼如何做好詳情頁文字排版呢？

排版的目的是幫助用戶整理信息，提升閱讀效率，所以我們需要給文字分組、劃分層級關係。

文字最重要的屬性是可讀性，且不管排版形式如何，首先要讓用戶看清、看懂，然後才要談排版形式、美觀、協調、設計感等等。

現在的電商詳情頁，用戶使用場景幾乎都來自於手機端，文字小了會看不清，文字大了又會過於粗暴、缺少精緻感，所以主副標題文字的大小應該在什麼範圍，才能兼顧可讀性和設計美感呢？

我以6.5英寸屏幕的P50 pro手機為例，經過多次對比實驗得出一個可以參考的字號範圍：主標題：50-80px、副標題：26-36px。

當文字大小控制在上述範圍內，更利於詳情頁的文字信息表達，當然這組數據並非絕對，有一定的局限性，所以僅供大家參考。

同時為了嚴謹，我又結合眾多案例進行驗證，得出的結論也是基本都符合。

字號規範之後，接下來再來說說排版結構。

詳情頁的文字排版結構相對來說並不複雜，常見的對齊方式就三種，即居中對齊、左對齊、右對齊。

這也是最基礎的文字對齊方式，但在實際工作中，我們一般還會用到線條、英文、圖案等裝飾元素，對整體排版豐富美化，平衡、增加其節奏感和設計感。

比如像下面這樣：

你會發現不管怎麼美化豐富，其基礎排版結構、對齊方式還是沒有變化。所以我們能在這三種基礎的排版結構上，變化出很多種不同的視覺呈現形式。

那麼接下來具體說說如何做好排版。

設計中的每個元素在視覺上都具有一定的「分量感」，所以當需要文字排版時，我們可以根據畫面重心來選擇排版形式，這也是工作中很常用的文字排版思路。

居中對齊排版

正如上面所說的那樣，居中對齊的排版重心更穩，自然也更適合用在相對平穩的構圖，比如：

如上圖所示，不管產品如何擺放，只要畫面重心始終相對平穩，居中對齊的排版就很好用，也是最不容易犯錯的，看幾組案例：

做個案例，下面這張圖本身構圖就相對穩定，又沒有其他元素干擾文字排版。

那麼只需要加上文案，做好對齊，一張詳情頁海報就做好了。

說完居中對齊排版，再來說說左右對齊排版，居左和居右本質上沒太大區別，無非就是我們習慣的閱讀方式是從左往右，出於用戶習慣的原則，左對齊相對而言用到的會多一些。

居左、居右對齊排版

一般情況下，當畫面重心不平穩時，我們會考慮通過文字排版、裝飾元素等來平衡，所以這時候就會用到居左、居右對齊排版。

如上圖所示，當畫面重心偏向一側時，根據情況選擇居左或居右對齊排版就變得順理成章，比如下面幾個案例：

在設計工作中，僅依據重心排版雖然很常用也好用，但如果都按照重心原則排版，那麼形式上難免過於單一，而且也有些許局限性。

比如你也能看到一些案例，即便文字排版前的畫面重心相對穩定時，並沒有按照上述所說的重心原則，一定要用居中排版的形式。

那麼我們還可以依據什麼來做好詳情頁的文字排版呢？

因為電商詳情頁的使用場景更偏向手機端，而且現在都是按照手機一屏的尺寸為單位劃分模塊，所以圖文的形式大多數情況下都是上下結構。

因此受其結構的特質影響，詳情頁排版相對而言並不複雜，不像首頁、海報、平面類設計那樣，需要太多的板式結構，所以很少會出現故意營造畫面重心不穩，用作突出強調的。

這也是我在翻閱大量優秀的詳情頁案例中驗證後得到的結論。

在詳情頁文字排版的過程中，畫面重心並不是影響排版結構的唯一因素，還會受畫面結構、每一屏尺寸、文字可閱讀性、整體布局等等的影響。

比如用下面這張圖，雖然圖中兩個產品的長短不同，但兩個產品所占的直覺比重是差不多的，所以整體的視覺重心是相對平穩的。

可如果將這張場景圖做詳情頁首圖，即便是重心相對平穩，文案也不再合適用居中排版的形式做，因為受到了圖片本身結構的影響。

下面我簡單的排了一下：

最終是這樣的：

所以就出現了相對平穩原則。

理解起來很簡單，就是利用英文、線條、圖標、數字等裝飾元素或必要排版元素平衡畫面，營造視覺上的相對平穩即可。

原則上來說，相對平穩原則適用於絕大部分詳情頁的文字排版工作。

這就能解釋為什麼重心明明很平穩，有很多詳情頁案例中的文案不用居中對齊也能做的很出彩的原因：「他們做到了視覺上的相對平穩。」

如下圖所示：

視覺相對平穩是允許存在偏差的，並不是像對稱式構圖那樣要求那麼絕對，設計有很強的主觀性，也不像數學那麼嚴謹，看起來差不多就行。

當然，你也能看到一些豎向排版，或不規則的排版，但核心思想是共通的，就是視覺上的相對平穩。

設計的魅力在於不確定性，沒有一成不變的解決方案，詳情頁排版同樣如此，不管是依據重心原則還是相對平穩原則做排版，都只是為大家提供設計理論依據。

比如下面這個案例：如下圖將產品簡單的擺放好。

初步的詳情頁海報構圖就出來了，很多人的第一直覺就是居中排版，因為畢竟這麼構圖整體重心是穩的，比如像下面這樣：

一個簡單的海報雛形就有了，可能你會感覺有點太平了、還有點空，那麼我們可以加點光影元素豐富一下畫面，再稍微調下整體的顏色，如下圖：

這個海報的確很簡單，但感覺還不錯，如果按照相對平穩原則，換個排版形式是不是也可以：

不同的排版結構給人的感受也不一樣，兩者沒有對錯，至於你會選擇用哪一種，這就取決於你對整體規劃和自己的主觀感受了。

設計理論固然重要，但設計師的主觀感受也很重要，所以我們除了要學好理論知識外，還要提升自己的審美。

補充：本文以詳情頁首圖排版為切入點，詳情頁中其他模塊同理。

好了，就寫這麼多吧，下次再見！

1招！幫你搞定插畫設計！

為什麼我10秒做了好幾張漂亮的背景圖！

點擊「在看」每天看新鮮設計乾貨↓↓