在日新月異的科技浪潮沖刷下,我們的生活發生著翻天覆地的變化。無線端購物無疑是這個變化浪潮里的一大主力,只需有一臺智能手機,無論在何時何地,都能實現網上購物。在這大環境下,無線端的競爭越演越烈。在這競爭中,一個優秀易懂的無線端頁面,無疑能讓我們在競爭中增加一柄鋒利的兵器。
但是,無線端有別于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號字是最合適的,如下圖:
四、選擇合適的字體
字體一般能分為襯線體和無襯線體。襯線簡單來說是指文字結構之外的裝飾性筆畫,有襯線的字體叫襯線體,而沒有襯線的字體則叫無襯線體。如下圖,我們可以發現,將圓圈里類似的筆畫全部去掉,是不會影響文字意思的表達的,那么這些筆畫就叫做襯線。
調整前 調整后
例如我們常見的英文字體 Times、Times New Roman中文字體中的方正大標宋等字體等就屬于襯線字,而像Arial、helvetica方正蘭亭黑體 方正大黑體等就屬于無襯線字。
那么,在我們選擇無線端字體的時候,則需注意這兩種字體的選擇,襯線字的裝飾性比較好,風格也相對強烈,但如果文字字號較小的話,會導致文字辨識度變低,影響閱讀。因此,我們在做文字標題和一些單純裝飾性文字的時候,我們可以按照風格適當選擇襯線字。但需要注意的是,在做文字標題的時候,因為內容較為主要,則不建議使用一些太復雜的襯線字體。
而我們在做說明性及介紹性文字等字號較小卻是產品的詳細介紹的時候,我們應選擇一些如方正蘭亭黑體,黑體等簡約的無襯線體,使得文字在小的同時,不影響文字的易讀性,方便用戶閱讀。通過襯線與無襯線字的結合,我們就可以很輕松的完成一個表述清晰,畫面優美的無線端頁面。
五、選擇適合的文字狀態
每一種字體,至少都有一種適合自己的最佳狀態,這個狀態包括字體的字號和消除鋸齒的選項.
其中,在Photoshop CS6之前的版本里消除鋸齒選項一般分為:無,銳利,犀利,渾厚,平滑。而CS6之后,增加了:window和windowLCD兩項。
在最佳狀態下是最清晰的,鋸齒也是最少的。而字體在不合適的狀態的情況下,字體的外觀與易讀性也會受到一定的影響。顯而易見,在最佳狀態下,文字是最清晰易讀的。那么怎么找到最佳狀態,我們可以通過對字體進行縮放。
字體使用是設計師們終其一生都在精雕細琢的事,每一個字體,每一個頁面都是一個新的挑戰,沒有一成不變的規律。但是,相信通過這次分享,相信能對大家的無線端文字應用上起到一定的啟發作用。我們要增加無線端的用戶體驗,增加點擊轉化率。我們只需謹記:1.精煉的文字,2. 合理布局和優化文字排版方式,3. 舒適的行距間隔 4.選用適合的字體,5.處于最佳狀態,平順無鋸齒的文字, 這幾點。相信大家一定能讓你在無線端上呈現出優美的文字排版。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 無線端文字應用技巧