正文

但是，無線端有別于PC端，它的可編輯空間比PC端小很多很多，如天貓PC端首頁可編輯空間最大寬度可達1920px, 而無線端的首頁可編輯空間只有608px。PC端詳情頁可編輯空間達790px，無線端的只有480px，且總體大小限制在1.5M以內。如此有限的空間，加上我們無線購物時環境光通常比較微弱。文字的應用遇到了較大的挑戰，我們得在有限的空間里，塞進我們清晰產品圖，清晰文字賣點，清晰活動信息，清晰產品內容等等，同時我們又屬于考慮到用戶體驗，通過頁面引導客戶了解清晰我們的產品，這給不少設計師帶來了許多煩惱，下面，我就為大家分享下，在無線端文字應用的一些技巧

一． 提煉文字信息

大麥電商發現，在我們制作無線端頁面的時候，照搬PC端所有的信息明顯是不現實的。把PC端的詳情照搬到無線端：

1. 文字多的話，文字會被縮放得很小很小，大部分文字都會處以一個看不清的狀態。

2. PC端的詳情較為復雜，暫且不說能否滿足無線端1.5M的這個要求，就是滿足了，加載速度也會受到一定程度的影響。

3. 產品的表述及頁面的視覺效果會受到很大程度的影響。

從而無線端頁面的用戶體驗，導致我們的無線端點擊轉化下降，甚至影響我們整個品牌的形象。那我們該如何把PC的信息表達到無線端呢？我們可以對文字進行提煉概括

方法一，將一些形容性的，裝飾性的文字刪除或者精簡，保留能表達主要內容的文字，從而達到提煉的效果。例如：

調整前 調整后

方法二，從這段文字中提煉出簡短的一句話，作為這段文字的標題，然后再稍微精煉下這段文字，用以作為對標題的詳細闡述與裝飾。

例如：

調整前 調整后

二． 合理布局+優化文字排版方式

大麥電商發現，將文字提煉好后，接下來我們從布局出發，充分的做好畫面布局，合理利用每一塊空間，在文字排版上多花心思，讓文字信息帶給客戶一個舒適的視覺體驗。無線端用戶使用的屏幕比PC端的小很多，文字信息也相對較小。在排版時我們需要注意：

1.文字周圍不宜有過多的裝飾，以免導致畫面過于復雜，影響閱讀；

2.文字呈現位置不宜空間不宜過于狹窄；

3.文字與背景的需有較強的對比度，否則易讀性就會受到很大的影響。用戶閱讀文字賣點時就會顯得很困難，甚至會直接忽略掉文字。

以下是一些不合理布局的例子：

一個好的排版布局，可以增加頁面的整體美觀，使文字更加易讀，為用戶帶來更好的體驗。常見的一些較好的布局排版方式有：通過左圖右文，左文右圖，以文字作為主體產品為裝飾等方式。通過這些排版方式，使得文字更為清晰易讀，跟圖片也結合得更為緊密。讓用戶有一個舒適的視覺體驗，增加點擊轉化率。如下：

三． 設置適合的行距

行距就是每一行文字的距離，它同樣跟我們閱讀時的視覺體驗息息相關。特別是在文字較小的情況下，一個適合的行距顯得尤為重要。

1.當行距太緊湊的時候，用戶閱讀的時候很容易就會跳到下一行，也很難從行尾掃視到下一行的行首，影響文字的易讀性。

2.行距太寬的時候，每一行文字就形成一個單獨的段落，而空白的文字行距就變成了阻斷文字的視覺斷流，使整段文字失去了連貫性。

（錯誤例子）

那么怎樣的行距，才能讓用戶閱讀得最舒適，最適合我們的無線端頁面文字呢？一般，我們在設置行距時，可以以字號作為基數，而由于無線端的空間有限，行距的大小設置在字號的1.2~1.5倍為宜。在這個比例下，文字的易讀性會大大提升，讓用戶看的舒適的同時，能清晰表達出我們的賣點。例如，我們的字號是18號字，那么我們的行距設置為21~22號字是最合適的，如下圖：