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

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

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

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

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

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

字號規范之后，接下來再來說說排版結構。

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

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

比如像下面這樣：

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

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

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

1、居中對齊排版

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

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

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

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

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

2、居左、居右對齊排版

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

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

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

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

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

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

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

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

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

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

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

下面我簡單的排了一下：

最終是這樣的：

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

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

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

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

如下圖所示：

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

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

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

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

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

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

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

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

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

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

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

作者：老張

轉載請注明：學UI網》深度剖析：如何做好詳情頁文字排版？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司