在日新月異的科技浪潮沖刷下，我們的生活發(fā)生著翻天覆地的變化。無(wú)線(xiàn)端購(gòu)物無(wú)疑是這個(gè)變化浪潮里的一大主力，只需有一臺(tái)智能手機(jī)，無(wú)論在何時(shí)何地，都能實(shí)現(xiàn)網(wǎng)上購(gòu)物。在這大環(huán)境下，無(wú)線(xiàn)端的競(jìng)爭(zhēng)越演越烈。在這競(jìng)爭(zhēng)中，一個(gè)優(yōu)秀易懂的無(wú)線(xiàn)端頁(yè)面，無(wú)疑能讓我們?cè)诟?jìng)爭(zhēng)中增加一柄鋒利的兵器。
調(diào)整前 調(diào)整后
調(diào)整前 調(diào)整后
但是，無(wú)線(xiàn)端有別于PC端，它的可編輯空間比PC端小很多很多，如天貓PC端首頁(yè)可編輯空間最大寬度可達(dá)1920px, 而無(wú)線(xiàn)端的首頁(yè)可編輯空間只有608px。PC端詳情頁(yè)可編輯空間達(dá)790px，無(wú)線(xiàn)端的只有480px，且總體大小限制在1.5M以?xún)?nèi)。如此有限的空間，加上我們無(wú)線(xiàn)購(gòu)物時(shí)環(huán)境光通常比較微弱。文字的應(yīng)用遇到了較大的挑戰(zhàn)，我們得在有限的空間里，塞進(jìn)我們清晰產(chǎn)品圖，清晰文字賣(mài)點(diǎn)，清晰活動(dòng)信息，清晰產(chǎn)品內(nèi)容等等，同時(shí)我們又屬于考慮到用戶(hù)體驗(yàn)，通過(guò)頁(yè)面引導(dǎo)客戶(hù)了解清晰我們的產(chǎn)品，這給不少設(shè)計(jì)師帶來(lái)了許多煩惱，下面，我就為大家分享下，在無(wú)線(xiàn)端文字應(yīng)用的一些技巧。
一、提煉文字信息
在我們制作無(wú)線(xiàn)端頁(yè)面的時(shí)候，照搬PC端所有的信息明顯是不現(xiàn)實(shí)的。把PC端的詳情照搬到無(wú)線(xiàn)端：
1. 文字多的話(huà)，文字會(huì)被縮放得很小很小，大部分文字都會(huì)處以一個(gè)看不清的狀態(tài)。
2. PC端的詳情較為復(fù)雜，暫且不說(shuō)能否滿(mǎn)足無(wú)線(xiàn)端1.5M的這個(gè)要求，就是滿(mǎn)足了，加載速度也會(huì)受到一定程度的影響。
3. 產(chǎn)品的表述及頁(yè)面的視覺(jué)效果會(huì)受到很大程度的影響。
從而無(wú)線(xiàn)端頁(yè)面的用戶(hù)體驗(yàn)，導(dǎo)致我們的無(wú)線(xiàn)端點(diǎn)擊轉(zhuǎn)化下降，甚至影響我們整個(gè)品牌的形象。那我們?cè)撊绾伟裀C的信息表達(dá)到無(wú)線(xiàn)端呢？我們可以對(duì)文字進(jìn)行提煉概括
方法一，將一些形容性的，裝飾性的文字刪除或者精簡(jiǎn)，保留能表達(dá)主要內(nèi)容的文字，從而達(dá)到提煉的效果。例如：
調(diào)整前 調(diào)整后方法二，從這段文字中提煉出簡(jiǎn)短的一句話(huà)，作為這段文字的標(biāo)題，然后再稍微精煉下這段文字，用以作為對(duì)標(biāo)題的詳細(xì)闡述與裝飾。
例如：
調(diào)整前 調(diào)整后二、合理布局+優(yōu)化文字排版方式
將文字提煉好后，接下來(lái)我們從布局出發(fā)，充分的做好畫(huà)面布局，合理利用每一塊空間，在文字排版上多花心思，讓文字信息帶給客戶(hù)一個(gè)舒適的視覺(jué)體驗(yàn)。無(wú)線(xiàn)端用戶(hù)使用的屏幕比PC端的小很多，文字信息也相對(duì)較小。
在排版時(shí)我們需要注意：
1.文字周?chē)灰擞羞^(guò)多的裝飾，以免導(dǎo)致畫(huà)面過(guò)于復(fù)雜，影響閱讀；
2.文字呈現(xiàn)位置不宜空間不宜過(guò)于狹窄；
3.文字與背景的需有較強(qiáng)的對(duì)比度，否則易讀性就會(huì)受到很大的影響。用戶(hù)閱讀文字賣(mài)點(diǎn)時(shí)就會(huì)顯得很困難，甚至?xí)苯雍雎缘粑淖帧?/div>
（錯(cuò)誤例子）
調(diào)整前 調(diào)整后
以下是一些不合理布局的例子：
一個(gè)好的排版布局，可以增加頁(yè)面的整體美觀，使文字更加易讀，為用戶(hù)帶來(lái)更好的體驗(yàn)。常見(jiàn)的一些較好的布局排版方式有：通過(guò)左圖右文，左文右圖，以文字作為主體產(chǎn)品為裝飾等方式。通過(guò)這些排版方式，使得文字更為清晰易讀，跟圖片也結(jié)合得更為緊密。讓用戶(hù)有一個(gè)舒適的視覺(jué)體驗(yàn)，增加點(diǎn)擊轉(zhuǎn)化率。如下：
三、設(shè)置適合的行距
行距就是每一行文字的距離，它同樣跟我們閱讀時(shí)的視覺(jué)體驗(yàn)息息相關(guān)。特別是在文字較小的情況下，一個(gè)適合的行距顯得尤為重要。
1.當(dāng)行距太緊湊的時(shí)候，用戶(hù)閱讀的時(shí)候很容易就會(huì)跳到下一行，也很難從行尾掃視到下一行的行首，影響文字的易讀性。
2.行距太寬的時(shí)候，每一行文字就形成一個(gè)單獨(dú)的段落，而空白的文字行距就變成了阻斷文字的視覺(jué)斷流，使整段文字失去了連貫性。
（錯(cuò)誤例子）那么怎樣的行距，才能讓用戶(hù)閱讀得最舒適，最適合我們的無(wú)線(xiàn)端頁(yè)面文字呢？一般，我們?cè)谠O(shè)置行距時(shí)，可以以字號(hào)作為基數(shù)，而由于無(wú)線(xiàn)端的空間有限，行距的大小設(shè)置在字號(hào)的1.2~1.5倍為宜。在這個(gè)比例下，文字的易讀性會(huì)大大提升，讓用戶(hù)看的舒適的同時(shí)，能清晰表達(dá)出我們的賣(mài)點(diǎn)。例如，我們的字號(hào)是18號(hào)字，那么我們的行距設(shè)置為21~22號(hào)字是最合適的，如下圖：
四、選擇合適的字體
字體一般能分為襯線(xiàn)體和無(wú)襯線(xiàn)體。襯線(xiàn)簡(jiǎn)單來(lái)說(shuō)是指文字結(jié)構(gòu)之外的裝飾性筆畫(huà)，有襯線(xiàn)的字體叫襯線(xiàn)體，而沒(méi)有襯線(xiàn)的字體則叫無(wú)襯線(xiàn)體。如下圖，我們可以發(fā)現(xiàn)，將圓圈里類(lèi)似的筆畫(huà)全部去掉，是不會(huì)影響文字意思的表達(dá)的，那么這些筆畫(huà)就叫做襯線(xiàn)。
調(diào)整前 調(diào)整后例如我們常見(jiàn)的英文字體 Times、Times New Roman中文字體中的方正大標(biāo)宋等字體等就屬于襯線(xiàn)字,而像Arial、helvetica方正蘭亭黑體 方正大黑體等就屬于無(wú)襯線(xiàn)字。
那么，在我們選擇無(wú)線(xiàn)端字體的時(shí)候，則需注意這兩種字體的選擇，襯線(xiàn)字的裝飾性比較好，風(fēng)格也相對(duì)強(qiáng)烈，但如果文字字號(hào)較小的話(huà)，會(huì)導(dǎo)致文字辨識(shí)度變低，影響閱讀。因此，我們?cè)谧鑫淖謽?biāo)題和一些單純裝飾性文字的時(shí)候，我們可以按照風(fēng)格適當(dāng)選擇襯線(xiàn)字。但需要注意的是，在做文字標(biāo)題的時(shí)候，因?yàn)閮?nèi)容較為主要，則不建議使用一些太復(fù)雜的襯線(xiàn)字體。
而我們?cè)谧稣f(shuō)明性及介紹性文字等字號(hào)較小卻是產(chǎn)品的詳細(xì)介紹的時(shí)候，我們應(yīng)選擇一些如方正蘭亭黑體，黑體等簡(jiǎn)約的無(wú)襯線(xiàn)體，使得文字在小的同時(shí)，不影響文字的易讀性，方便用戶(hù)閱讀。通過(guò)襯線(xiàn)與無(wú)襯線(xiàn)字的結(jié)合，我們就可以很輕松的完成一個(gè)表述清晰，畫(huà)面優(yōu)美的無(wú)線(xiàn)端頁(yè)面。
五、選擇適合的文字狀態(tài)
每一種字體，至少都有一種適合自己的最佳狀態(tài)，這個(gè)狀態(tài)包括字體的字號(hào)和消除鋸齒的選項(xiàng).
其中，在Photoshop CS6之前的版本里消除鋸齒選項(xiàng)一般分為：無(wú)，銳利，犀利，渾厚，平滑。而CS6之后，增加了：window和windowLCD兩項(xiàng)。
在最佳狀態(tài)下是最清晰的，鋸齒也是最少的。而字體在不合適的狀態(tài)的情況下，字體的外觀與易讀性也會(huì)受到一定的影響。顯而易見(jiàn)，在最佳狀態(tài)下，文字是最清晰易讀的。那么怎么找到最佳狀態(tài)，我們可以通過(guò)對(duì)字體進(jìn)行縮放。
字體使用是設(shè)計(jì)師們終其一生都在精雕細(xì)琢的事，每一個(gè)字體，每一個(gè)頁(yè)面都是一個(gè)新的挑戰(zhàn)，沒(méi)有一成不變的規(guī)律。但是，相信通過(guò)這次分享，相信能對(duì)大家的無(wú)線(xiàn)端文字應(yīng)用上起到一定的啟發(fā)作用。我們要增加無(wú)線(xiàn)端的用戶(hù)體驗(yàn)，增加點(diǎn)擊轉(zhuǎn)化率。我們只需謹(jǐn)記：1.精煉的文字，2. 合理布局和優(yōu)化文字排版方式，3. 舒適的行距間隔 4.選用適合的字體，5.處于最佳狀態(tài)，平順無(wú)鋸齒的文字， 這幾點(diǎn)。相信大家一定能讓你在無(wú)線(xiàn)端上呈現(xiàn)出優(yōu)美的文字排版。
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源： 無(wú)線(xiàn)端文字應(yīng)用技巧
分享與收藏：
網(wǎng)商學(xué)院搜索
告訴好友
關(guān)閉窗口
打印本文
本文關(guān)鍵字：
