響應(yīng)式網(wǎng)站設(shè)計(jì)(RWD)已是現(xiàn)在網(wǎng)站不可或缺之理念。只是,網(wǎng)站文案隨屏幕解析度切換的閱讀體驗(yàn),全都靠網(wǎng)站設(shè)計(jì)公司的技術(shù),就可以克服了嗎?
網(wǎng)站設(shè)計(jì)公司:「當(dāng)然沒問題!」「只要把文案準(zhǔn)備好,程式判斷過目前瀏覽設(shè)備的寬度后,就會(huì)自動(dòng)幫你斷行
了!」
客戶:「等等,文案那個(gè)『了!』可以不要換行嗎?這樣看起來很怪,可不可以幫我斷行在『自動(dòng)』兩個(gè)字前面?」
網(wǎng)站設(shè)計(jì)公司:「可以啊,先跟我說一下你現(xiàn)在視窗的解析度,再來是,若使用者用更大或更小的屏幕瀏覽,可能會(huì)看起來怪怪的喔?」
客戶:「……那我該怎么辦?」
內(nèi)容為水的口號(hào),是不是一古腦把文章倒進(jìn)去網(wǎng)站框架,就解決了。但伴隨而來的美感、閱讀體驗(yàn),如何克服,才能讓RWD 的精髓不只是隨便喊喊呢?
網(wǎng)站文案應(yīng)與網(wǎng)站設(shè)計(jì)并進(jìn)
現(xiàn)代人瀏覽網(wǎng)站,絕大多數(shù)情況是用掃視完成的,爭(zhēng)取使用者注意力,讓他們停下來,愿意花寶貴的時(shí)間「閱讀」您的文案,往往是最重要的第一步。
在CTK Pro之前的介紹里,已經(jīng)提過許多網(wǎng)站文案的訣竅,并且說明過網(wǎng)站文案為何如此重要。這里想跟大家提到的是:「網(wǎng)站文案,若能越早確定版本,對(duì)網(wǎng)站設(shè)計(jì)開發(fā)整個(gè)的流程,有決定性的影響。」
在吸引使用者目光的大前提下,文案的編排、如何呈現(xiàn)、乍看下是否平衡、美觀、第一眼的感覺、標(biāo)題用幾個(gè)字等,反而與文章內(nèi)容一樣重要。
下面列出13個(gè)和網(wǎng)站設(shè)計(jì)有關(guān)的文案構(gòu)想:
?什么時(shí)候這段文字可能會(huì)換行,會(huì)有幾個(gè)文字區(qū)塊
?常見的解析度下,大約有幾行
?中文/英文并用的文章,兩邊對(duì)齊會(huì)不會(huì)有問題?
?標(biāo)題文字看起來是否等比例,會(huì)不會(huì)因?yàn)樽謹(jǐn)?shù)補(bǔ)同造成視覺效果與設(shè)計(jì)不同?
?同層級(jí)的標(biāo)題字?jǐn)?shù)是否要差不多?
?若此處要顯示作者/日期/價(jià)格等資訊時(shí),格式應(yīng)為
?滑鼠移過的特效要為,指引使用者的作用在?手機(jī)版應(yīng)如何變化?
?文章的摘要要顯示幾行(才會(huì)與截圖等高),解析度變換又如何?
?文章字懂抓取資訊(獎(jiǎng)項(xiàng)/標(biāo)簽等),會(huì)不會(huì)有特別常的資訊,造成跑版?
?若此處標(biāo)題/文字超級(jí)長(zhǎng),顯示出來會(huì)?
?是否設(shè)定此處強(qiáng)制換行,手機(jī)版換行會(huì)不會(huì)……用意為何?
?選單內(nèi)的文字有多少字為佳?
? Logo?/品牌名稱,若在狹窄屏幕中,是否有別的顯示方式
MEDIUM 的閱讀體驗(yàn)
Medium 身為自媒體主流平臺(tái),其閱讀體驗(yàn)強(qiáng)調(diào)的是文章的內(nèi)容,透過左右兩邊大量留白,去除不必要的側(cè)欄等其他功能,讓訪客可以專注在理解、處理內(nèi)文。
Medium 文章中區(qū)塊固定為680px,左右兩邊有24px 的padding;為了滿足圖文并茂的需求,圖片格式除了與文章同寬,也有滿版、1032px 的樣式選擇。透過Medium 此簡(jiǎn)潔、固定的樣式,讓使用者在閱覽平臺(tái)時(shí),有相當(dāng)一致的體驗(yàn),也奠定了Medium 在「內(nèi)容網(wǎng)站」蔚為主流的地位。
不過,這樣的設(shè)計(jì)與RWD 變化,是不是真適合企業(yè)端的靜態(tài)網(wǎng)站,或其他頁(yè)面,又是另個(gè)值得思考的問題。
RWD 靜態(tài)頁(yè)面的文案設(shè)計(jì)
相比于內(nèi)容頁(yè)面,靜態(tài)頁(yè)面因?yàn)椴恍璩38鼊?dòng),更可以針對(duì)網(wǎng)站設(shè)計(jì)去調(diào)整內(nèi)容文案。
想讓你的服務(wù)介紹文字看起來差不多多,不會(huì)導(dǎo)致網(wǎng)站不平衡?標(biāo)題的字?jǐn)?shù)在設(shè)計(jì)時(shí),就依照需求調(diào)整,并可以調(diào)整大小。因應(yīng)中英文多語系網(wǎng)站,文案上英文或中文內(nèi)容有所調(diào)整等等,都是可行的作法。
WORDPRESS 網(wǎng)站的文案編輯方式
相比于用其他方式蓋的網(wǎng)站,WordPress 網(wǎng)站另一特色就是后臺(tái)相當(dāng)靈活應(yīng)用,真的想在部分地方改變文案的顯示方式,也可透過編輯器來修改。
一般編輯器中有分「段落」、「強(qiáng)制換行」兩種。一般輸入(enter)就會(huì)在文章中換「段落」,一般會(huì)有段落間的間距;若僅想要「換行」顯示,從后臺(tái)編輯可以試著按shift + enter 來達(dá)成。