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

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

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

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

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

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

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

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

是邀請(qǐng)?jiān)L問者來(lái)查看您的作品集嗎？

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

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

一些用戶對(duì)頁(yè)面加載速度非常敏感（有很多用戶是過(guò)度敏感的?。┮虼耍赡軙?huì)選擇避免會(huì)降低頁(yè)面加載速度的特效（比如視差）。

Bistro Agency

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

Be Moving 3

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

Think Pixel Lab

讓這個(gè)頁(yè)面的插圖生動(dòng)起來(lái)的小動(dòng)畫項(xiàng)目不會(huì)減慢任何東西的速度。

Be Product 2

有時(shí)候，是頁(yè)面的新鮮感才會(huì)帶來(lái)銷量。

Sheerlink

這里有一個(gè)例子，大圖像和滑動(dòng)面板將吸引用戶。

Be App 4

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

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

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

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

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

Dangerous Robot

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

Be Tea 3

這是一個(gè)精心組織的好例子。

Hello Alfred

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

Be Cakes

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

Mercedes-Benz

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

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

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

Chris Connolly

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

WeShootBottles、com

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

Be Dietician 2

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

Dribble's Year in Review

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

Nasal Drops

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

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

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

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

Sergio Pedercini

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

Be Game

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

Be Landing 2

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

Brainflop

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

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

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

Be Hairdresser

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

The Art of Texture

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

Pyrismic

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

Reneza

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

Wrapping It Up

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

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