1、使用一個(gè)可以令人印象深刻的圖像

一個(gè)能夠震撼人的圖像總能在第一時(shí)間給人留下一個(gè)好的印象。無論你是選擇照片、視頻、動(dòng)畫還是其他的一些“藝術(shù)”元素，每個(gè)網(wǎng)站的首屏內(nèi)容都應(yīng)該包含用戶能夠理解并記住的圖像。

首屏圖不僅僅是一張漂亮的圖片，它是通向頁面上所有內(nèi)容的入口，甚至可能在內(nèi)容的設(shè)計(jì)上更深入。

一張單獨(dú)的圖像是一個(gè)很好的開始，但是你必須將它與其他元素組合在一起才能真正充分地利用內(nèi)容。其他可能出現(xiàn)在首屏中的元素包括:

· 文本或標(biāo)題；

· Logo或品牌標(biāo)識；

· 按鈕或呼吁行動(dòng)元素；

· 導(dǎo)航元素；

· 搜索

在圖像的選擇上，盡量選擇清晰、高分辨率的圖像，并在設(shè)計(jì)上賦予文本或按鈕等其他元素大量的對比度。人們更喜歡看到實(shí)質(zhì)性的東西，比如在品牌上，用戶更希望看到帶有模特人物的圖像，所以，如果可能的話，可以考慮向人們展示你的產(chǎn)品或服務(wù)。

2、合并導(dǎo)航元素

沒有理由認(rèn)為首屏的內(nèi)容和導(dǎo)航是兩個(gè)相互獨(dú)立的元素，其實(shí)它們通常都是同一個(gè)視覺概念的一部分。無論你喜歡一個(gè)完整的菜單導(dǎo)航，還是類似漢堡包導(dǎo)航這樣的隱藏彈出型導(dǎo)航，導(dǎo)航元素都應(yīng)該是首屏計(jì)劃的一部分。

當(dāng)你在考慮頭部和導(dǎo)航時(shí)，考慮一個(gè)跟隨或合并的導(dǎo)航模式。即使用戶離開了主導(dǎo)航，他們?nèi)匀豢梢酝ㄟ^這些元素很快找到站點(diǎn)的其他入口，而不影響任何視覺和功能。

首屏導(dǎo)航元素所起到的作用或功能有一些可能是你意想不到的。因?yàn)檫@些通常的表現(xiàn)是較小的文本或圖標(biāo)，它可以幫助在首屏中建立層次結(jié)構(gòu)，向用戶展示如何與設(shè)計(jì)交互。

3、創(chuàng)建獨(dú)特的消息模式

僅僅在首屏展示一個(gè)漂亮的圖像是遠(yuǎn)遠(yuǎn)不夠的。你需要讓用戶明白它在說什么，或者它承載了哪些信息？

你需要充分的考慮首批內(nèi)容的信息需要怎么和用戶之間建立聯(lián)系和溝通渠道。

· 它是否能夠告訴他們接下來該做什么，或者從頁面的內(nèi)容中他們能獲得什么期待的內(nèi)容？

· 所有的元素是否都傳達(dá)了一個(gè)簡單易懂，并且統(tǒng)一的信息？

· 它可以引導(dǎo)用戶在頁面上采取行動(dòng)嗎？或者在哪里點(diǎn)擊進(jìn)入下一步？

確保在你的網(wǎng)站設(shè)計(jì)的首屏內(nèi)容的構(gòu)建中組合多個(gè)元素，以單個(gè)消息創(chuàng)建整體效果。

4、使用超大的排版字體

比通常使用的更大號的字體是增加標(biāo)題視覺表現(xiàn)的好方法。即使這些單詞可能就只是簡單的位置標(biāo)識符，在用戶開始閱讀其他信息之前，使用粗體的大號字體可以幫助用戶關(guān)注到這些內(nèi)容。

雖然這在排版上可能會(huì)有一些難度和不同，但盡量堅(jiān)持兩個(gè)基本的排版方式：

· 比起在其他頁面使用這項(xiàng)技巧，我們更傾向與在首頁使用，其實(shí)很簡單，首頁負(fù)責(zé)印象，內(nèi)頁負(fù)責(zé)內(nèi)容。

· 為了保持頁面的統(tǒng)一性和風(fēng)格，在其他頁面上都需要有一個(gè)一致但盡量簡單的視覺元素。

5、考慮閱讀模式

根據(jù)尼爾森諾曼集團(tuán)(Nielsen Norman Group)的研究，在網(wǎng)站上進(jìn)行閱讀往往會(huì)遵循三種不同的眼球運(yùn)動(dòng)模式。然后，所有這些閱讀模式都被調(diào)整，以解釋用戶在閱讀時(shí)所關(guān)注的任務(wù)，簡單來說，這是一個(gè)可視化流程中的相關(guān)部分的分組。

這兩項(xiàng)研究對用戶如何查看和消化內(nèi)容都至關(guān)重要，因?yàn)樗鼈兛梢詭椭懔私庠?a href="http://redsoil1982.com.cn/" target="_blank">網(wǎng)站設(shè)計(jì)中如何以及在哪里放置元素或內(nèi)容，特別是在首屏頁面中。

首先，你可以思考一下這些基本的模式:

· F模式：用戶首先會(huì)先閱讀位居頂部的內(nèi)容，然后再閱讀頁面中間部分的內(nèi)容，最后以F型垂直向下。

· Gutenberg Diagram模式：閱讀從左至右被區(qū)分為四個(gè)活躍的區(qū)域。從左至右依次為兩個(gè)水平的止點(diǎn)，然后從右上方到左下方。

· Z模式：眼球的運(yùn)動(dòng)從左到右來回移動(dòng)，從頂部到底部，形成多個(gè)z形閱讀路徑。

根據(jù)上面的閱讀模式，當(dāng)你在考慮放置元素時(shí)（尤其是關(guān)鍵元素），你要同時(shí)思考如何才能激發(fā)用戶產(chǎn)生最強(qiáng)烈的與之發(fā)生交互的可能性。然后想一下用戶最可能在哪里查看下一步，基于他們剛剛消化的內(nèi)容和相關(guān)的操作。

6、包括一個(gè)可點(diǎn)擊的元素

你的網(wǎng)站首屏保有互動(dòng)性嗎？它是否包括可點(diǎn)擊的元素來鼓勵(lì)用戶參與到這些主題中？

標(biāo)題可以是調(diào)用動(dòng)作按鈕的好位置，也可以是簡單的操作，如電子郵件地址收集表單。但是，不要因此就放置過多可點(diǎn)擊或觸發(fā)的元素，只需一個(gè)簡單的單動(dòng)作元素就可以在這個(gè)網(wǎng)頁設(shè)計(jì)中發(fā)揮作用。

不確定標(biāo)題應(yīng)該包含什么元素？考慮使用一個(gè)在整個(gè)設(shè)計(jì)中都始終如一的按鈕(非常像導(dǎo)航)操作。體驗(yàn)按鈕，購物車按鈕或其他用戶最有可能用到的按鈕都是很好的選擇。

7、使用簡單的圖層

如何將上面所提到的所有元素都聚合在首屏內(nèi)容中呢？竅門是通過簡單的分層。最好的首屏設(shè)計(jì)往往看起來很簡單。它遵循設(shè)計(jì)理論的規(guī)則，使用一個(gè)主導(dǎo)元素來吸引用戶，并幫助他們達(dá)到可執(zhí)行的目標(biāo)。

分層對象是實(shí)現(xiàn)此目的的一種方法。

簡單的分層不僅可以幫助你為每個(gè)元素創(chuàng)建不同的空間，而且還可以為用戶提供可視化的焦點(diǎn)。他們知道從哪里開始設(shè)計(jì)，哪些元素值得他們注意，哪些元素可以被瀏覽。

第一次嘗試可能并不總是成功的。多次調(diào)整和測試常常需要?jiǎng)?chuàng)建一組元素，這些元素能夠有效地協(xié)同工作，并在頁面的頂部讓用戶感到驚奇。

總結(jié)

雖然創(chuàng)建首頁通常是設(shè)計(jì)過程中最前沿的部分，但這一部分在內(nèi)部頁面同樣重要，不過我們經(jīng)常在實(shí)際的工作中丟失這一點(diǎn)。“內(nèi)部”頁面的內(nèi)容需要盡可能和主頁一樣重要，因?yàn)楹芏嘤脩舳紝⑼ㄟ^搜索來訪問你的網(wǎng)站設(shè)計(jì)，而不是通過輸入U(xiǎn)RL。

獨(dú)立思考兩種內(nèi)容類型，并共同實(shí)現(xiàn)設(shè)計(jì)的和諧、統(tǒng)一和可視化，當(dāng)用戶在實(shí)際的操作和瀏覽過程中，他們會(huì)產(chǎn)生這種視覺效果。

分享標(biāo)題：網(wǎng)站設(shè)計(jì)的7個(gè)技巧幫助你創(chuàng)意首屏內(nèi)容
當(dāng)前URL：http://redsoil1982.com.cn/news/138631.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)