5個關(guān)鍵元素可以決定你的設(shè)計(jì)成敗

乍一看，設(shè)計(jì)一個只有一頁的網(wǎng)站設(shè)計(jì)似乎在直覺上很容易，特別是與構(gòu)建多頁的網(wǎng)站設(shè)計(jì)相比。設(shè)計(jì)一個頁面的工作量是設(shè)計(jì)三個頁面的三分之一，對吧？

實(shí)際上，設(shè)計(jì)單頁網(wǎng)站通常要困難得多。你面臨的挑戰(zhàn)是必須在一個頁面上獲得所有必要的信息。同時(shí)，您需要確保頁面具有視覺吸引力和用戶友好性。

這個設(shè)計(jì)單頁網(wǎng)站的指南圍繞著5個關(guān)鍵元素，這取決于您如何考慮它們，它們可以成就或破壞您的設(shè)計(jì)。

在概述這些關(guān)鍵元素時(shí)，同時(shí)會提供示例的網(wǎng)站設(shè)計(jì)。它們將舉例說明它們的重要性。

1、目標(biāo)：確定并理解你的網(wǎng)站的目標(biāo)，并為之努力

你可能無法完全理解你的網(wǎng)站想要達(dá)到的效果，那么，繼續(xù)進(jìn)行它的設(shè)計(jì)就沒有什么意義了。它需要有一個單一的目標(biāo)，您的設(shè)計(jì)需要帶領(lǐng)用戶踏上實(shí)現(xiàn)該目標(biāo)的旅程，并做出相應(yīng)的響應(yīng)。

目標(biāo)是推廣還是銷售？

是邀請?jiān)L問者來查看您的作品集嗎？

你打算宣布一項(xiàng)活動還是一系列活動？

一旦你確定了目標(biāo)，你就幾乎完成了一半。但你仍然需要考慮你需要做什么，在訪問者點(diǎn)擊CTA按鈕之前，您需要避免讓他們離開頁面。

一些用戶對頁面加載速度非常敏感（有很多用戶是過度敏感的?。┮虼?，您可能會選擇避免會降低頁面加載速度的特效（比如視差）。

Bistro Agency

本網(wǎng)站的互動效果是以上折疊，他們不妨礙其加載速度。

Be Moving 3

動態(tài)圖像會影響加載速度，這個BeTheme預(yù)構(gòu)建的單頁導(dǎo)航具有靜態(tài)圖像的特性，該圖像具有動態(tài)的外觀。

Think Pixel Lab

讓這個頁面的插圖生動起來的小動畫項(xiàng)目不會減慢任何東西的速度。

Be Product 2

有時(shí)候，是頁面的新鮮感才會帶來銷量。

Sheerlink

這里有一個例子，大圖像和滑動面板將吸引用戶。

Be App 4

你不需要一篇詳細(xì)的技術(shù)論文來推廣一個應(yīng)用程序，而一個很酷的視覺展示就可以達(dá)到目的。

2、將其保持在最低限度并使其易于閱讀

單屏網(wǎng)頁以笨重的文本塊或讀起來像一本書為特點(diǎn)，可以吸引訪問者一秒鐘。有時(shí)，在他們?nèi)e的地方之前甚至更少。文本要簡短，并且要有很好的行距，剝?nèi)バ畔⒌木A。

依靠醒目的標(biāo)題、簡短的段落和項(xiàng)目符號列表來表達(dá)你的觀點(diǎn)。

以下是幾個值得收藏的例子，供日后參考：

Dangerous Robot

這個例子展示了一個單頁網(wǎng)站是多么的有趣。

Be Tea 3

這是一個精心組織的好例子。

Hello Alfred

基本信息是最重要的，使用項(xiàng)目符號列表有助于使消息盡可能地簡單明了。

Be Cakes

這個預(yù)先建立的網(wǎng)站說明了當(dāng)大的有吸引力的圖片和合理放置的文字段落在一起時(shí)，是如何幫助銷售的。

Mercedes-Benz

當(dāng)一輛車有奔馳車那么高時(shí)，高質(zhì)量的圖片和少量的文字就足夠了。

3、視覺效果：確定正確的模式，明智地使用消極的空間

知道大多數(shù)人是如何瀏覽頁面是有幫助的，人們傾向于以F模式閱讀文本，以Z模式掃描圖像。當(dāng)您混合元素時(shí)，請記住這一點(diǎn)。你希望信息的自然流動朝著你的目標(biāo)，明智地使用空白是有幫助的。

Chris Connolly

在這個例子中，空白的使用是平靜的，并提供了一種秩序感。

WeShootBottles、com

在這里，一個極具創(chuàng)意的設(shè)計(jì)被潑灑在白色的畫布上。

Be Dietician 2

這個預(yù)先構(gòu)建的單頁尋呼機(jī)中的空白會讓不同的部分出現(xiàn)在您面前，需要您的注意。

Dribble's Year in Review

最大限度地有效地使用幾種不同的設(shè)計(jì)原則是一個挑戰(zhàn)，但這是可以做到的。

Nasal Drops

對一個尋呼機(jī)來說，這不是一個特別令人興奮的話題，不是嗎？這種巧妙地使用幻燈片、空白和動畫的方法實(shí)際上成功地使單頁滴鼻劑令人興奮。

4、導(dǎo)航：讓它很容易導(dǎo)航和娛樂滾動

當(dāng)你有一個長形式的單頁網(wǎng)站時(shí)，你必須密切關(guān)注你如何管理導(dǎo)航。根據(jù)您的方法，您可以將訪問者鎖定在頁面中，也可以將他們趕出頁面。

替代導(dǎo)航是這里的關(guān)鍵，水平粘貼菜單或側(cè)邊欄菜單都是例子。你的目標(biāo)應(yīng)該是讓用戶只需點(diǎn)擊一下就能跳到他們想去的地方，而不是滾動鼠標(biāo)。自動滾動鏈接使訪問者能夠看到頁面進(jìn)行滾動，這是另一種方法。

Sergio Pedercini

這個設(shè)計(jì)師的網(wǎng)站有3個不同的自動滾動鏈接。

Be Game

Be游戲的導(dǎo)航體驗(yàn)有些與眾不同，甚至有點(diǎn)娛樂性。

Be Landing 2

在這個示例中，顏色方案、布局結(jié)構(gòu)以及如何使用3個鼠標(biāo)卷軸掃描頁面都非常突出。

Brainflop

這些人真的想幫助你快速瀏覽他們的網(wǎng)站通過提供一個菜單在頂部和一個在左側(cè)。

5、行動的召喚：確定正確的CTA，毫不猶豫地使用它

單頁尋呼機(jī)的好處在于它的目標(biāo)是讓人們采取單一行動，這通常需要使用一個CTA按鈕。但是，您也可能會銷售一些產(chǎn)品或服務(wù)。然后，您可能希望在每個主要部分的末尾放置一個CTA按鈕。

Be Hairdresser

在Be理發(fā)師預(yù)建的網(wǎng)站上，一個CTA按鈕在折疊上方，一個在菜單中。

The Art of Texture

放在折疊上方的兩個CTA按鈕可以讓用戶選擇他們想看到的內(nèi)容。

Pyrismic

Pyrismic站點(diǎn)使用一個簡單的帶有粗體CTA按鈕的可選表單。

Reneza

這個站點(diǎn)不會在CTA按鈕的使用上浪費(fèi)時(shí)間，但是，它們的使用是明智的；并有合適的顏色和文字大小的選擇。

Wrapping It Up

現(xiàn)在你知道了5個關(guān)鍵的單頁網(wǎng)站元素，只是和他們一起練習(xí)，直到他們習(xí)慣為止。

乍一看可能很簡單，一旦你開始將它們混合在一個尋呼機(jī)中，并試圖做到一致性，你會發(fā)現(xiàn)這是一個相當(dāng)大的挑戰(zhàn)。