在日新月異的科技浪潮沖刷下，我們的生活發(fā)生著翻天覆地的變化。無線端購物無疑是這個(gè)變化浪潮里的一大主力，只需有一臺(tái)智能手機(jī)，無論在何時(shí)何地，都能實(shí)現(xiàn)網(wǎng)上購物。在這大環(huán)境下，無線端的競爭越演越烈。在這競爭中，一個(gè)優(yōu)秀易懂的無線端頁面，無疑能讓我們?cè)诟偁幹性黾右槐h利的兵器。

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

一.提煉文字信息

在我們制作無線端頁面的時(shí)候，照搬PC端所有的信息明顯是不現(xiàn)實(shí)的。把PC端的詳情照搬到無線端：

1. 文字多的話，文字會(huì)被縮放得很小很小，大部分文字都會(huì)處以一個(gè)看不清的狀態(tài)。

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

3. 產(chǎn)品的表述及頁面的視覺效果會(huì)受到很大程度的影響。

從而無線端頁面的用戶體驗(yàn)，導(dǎo)致我們的無線端點(diǎn)擊轉(zhuǎn)化下降，甚至影響我們整個(gè)品牌的形象。那我們?cè)撊绾伟裀C的信息表達(dá)到無線端呢?我們可以對(duì)文字進(jìn)行提煉概括

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

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

二.合理布局+優(yōu)化文字排版方式

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

1.文字周圍不宜有過多的裝飾，以免導(dǎo)致畫面過于復(fù)雜，影響閱讀;

2.文字呈現(xiàn)位置不宜空間不宜過于狹窄;

3.文字與背景的需有較強(qiáng)的對(duì)比度，否則易讀性就會(huì)受到很大的影響。用戶閱讀文字賣點(diǎn)時(shí)就會(huì)顯得很困難，甚至?xí)苯雍雎缘粑淖帧?/p>

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

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

三.設(shè)置適合的行距

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

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

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

那么怎樣的行距，才能讓用戶閱讀得最舒適，最適合我們的無線端頁面文字呢?一般，我們?cè)谠O(shè)置行距時(shí)，可以以字號(hào)作為基數(shù)，而由于無線端的空間有限，行距的大小設(shè)置在字號(hào)的1.2~1.5倍為宜。在這個(gè)比例下，文字的易讀性會(huì)大大提升，讓用戶看的舒適的同時(shí)，能清晰表達(dá)出我們的賣點(diǎn)。例如，我們的字號(hào)是18號(hào)字，那么我們的行距設(shè)置為21~22號(hào)字是最合適的，

四.選擇合適的字體

字體一般能分為襯線體和無襯線體。襯線簡單來說是指文字結(jié)構(gòu)之外的裝飾性筆畫，有襯線的字體叫襯線體，而沒有襯線的字體則叫無襯線體。如下圖，我們可以發(fā)現(xiàn)，將圓圈里類似的筆畫全部去掉，是不會(huì)影響文字意思的表達(dá)的，那么這些筆畫就叫做襯線。

例如我們常見的英文字體 Times、Times New Roman 中文字體中的方正大標(biāo)宋等字體等就屬于襯線字,而像Arial、helvetica 方正蘭亭黑體 方正大黑體等就屬于無襯線字。

那么，在我們選擇無線端字體的時(shí)候，則需注意這兩種字體的選擇，襯線字的裝飾性比較好，風(fēng)格也相對(duì)強(qiáng)烈，但如果文字字號(hào)較小的話，會(huì)導(dǎo)致文字辨識(shí)度變低，影響閱讀。因此，我們?cè)谧鑫淖謽?biāo)題和一些單純裝飾性文字的時(shí)候，我們可以按照風(fēng)格適當(dāng)選擇襯線字。但需要注意的是，在做文字標(biāo)題的時(shí)候，因?yàn)閮?nèi)容較為主要，則不建議使用一些太復(fù)雜的襯線字體。

而我們?cè)谧稣f明性及介紹性文字等字號(hào)較小卻是產(chǎn)品的詳細(xì)介紹的時(shí)候，我們應(yīng)選擇一些如方正蘭亭黑體，黑體等簡約的無襯線體，使得文字在小的同時(shí)，不影響文字的易讀性，方便用戶閱讀。通過襯線與無襯線字的結(jié)合，我們就可以很輕松的完成一個(gè)表述清晰，畫面優(yōu)美的無線端頁面。

五.選擇適合的文字狀態(tài)

每一種字體，至少都有一種適合自己的最佳狀態(tài)，這個(gè)狀態(tài)包括字體的字號(hào)和消除鋸齒的選項(xiàng).

其中，在Photoshop CS6之前的版本里消除鋸齒選項(xiàng)一般分為：無，銳利，犀利，渾厚，平滑。而CS6之后，增加了：window和window LCD兩項(xiàng)。

在最佳狀態(tài)下是最清晰的，鋸齒也是最少的。而字體在不合適的狀態(tài)的情況下，字體的外觀與易讀性也會(huì)受到一定的影響。顯而易見，在最佳狀態(tài)下，文字是最清晰易讀的。那么怎么找到最佳狀態(tài)，我們可以通過對(duì)字體進(jìn)行縮放。

字體使用是設(shè)計(jì)師們終其一生都在精雕細(xì)琢的事，每一個(gè)字體，每一個(gè)頁面都是一個(gè)新的挑戰(zhàn)，沒有一成不變的規(guī)律。但是，相信通過這次分享，相信能對(duì)大家的無線端文字應(yīng)用上起到一定的啟發(fā)作用。我們要增加無線端的用戶體驗(yàn)，增加點(diǎn)擊轉(zhuǎn)化率。我們只需謹(jǐn)記：1.精煉的文字，2. 合理布局和優(yōu)化文字排版方式，3. 舒適的行距間隔 4.選用適合的字體，5.處于最佳狀態(tài)，平順無鋸齒的文字， 這幾點(diǎn)。相信大家一定能讓你在無線端上呈現(xiàn)出優(yōu)美的文字排版。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺(tái),是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來源： 淘寶技巧：無線端文字如何布局及優(yōu)化