網(wǎng)頁(yè)設(shè)計(jì)--極簡(jiǎn)的引導(dǎo)頁(yè)面

申請(qǐng)免費(fèi)試用、咨詢電話：400-8352-114

2013年10月7日由卡羅爾K |5評(píng)論

網(wǎng)頁(yè)設(shè)計(jì)師在過(guò)去的幾年中已經(jīng)逐漸意識(shí)到，搞亂我們的設(shè)計(jì)非必需元素，不是一個(gè)好主意。毫無(wú)意義的照片，質(zhì)感垃圾背景，令人費(fèi)解的導(dǎo)航系統(tǒng)，社會(huì)共享按鈕，博客崗位部件，和其他類型的頁(yè)面膨脹過(guò)度的設(shè)計(jì)元素，從我們的網(wǎng)頁(yè)設(shè)計(jì)的核心目標(biāo)轉(zhuǎn)移了人們的注意力。因此，現(xiàn)在更多地不是增加更多的東西和更多的選擇，我們很多人都選擇減少我們的設(shè)計(jì) ，使其展現(xiàn)最基本的形式。在視覺(jué)上比他們的前輩更簡(jiǎn)單，給人們的感覺(jué)卻更深刻。

簡(jiǎn)約的頁(yè)面幾例

為了確保我們?cè)谕豁?yè)上，讓我們趕緊看看一些成功的Web應(yīng)用程序的引導(dǎo)頁(yè)面：

郵箱

TinyLetter

Dropbox的

IFTTT

請(qǐng)注意，上面的應(yīng)用程序是相當(dāng)復(fù)雜的，他們能完成他們的用戶創(chuàng)新和復(fù)雜的事情。

然而值得注意的是，他們沒(méi)有一個(gè)同樣復(fù)雜的引導(dǎo)頁(yè)面。

讓我們研究這些很好的例子的簡(jiǎn)約的引導(dǎo)頁(yè)面，并從中獲得他們的設(shè)計(jì)模式，技巧和思想。

簡(jiǎn)約的引導(dǎo)頁(yè)面：大思路

你會(huì)立發(fā)現(xiàn)有關(guān)簡(jiǎn)約的引導(dǎo)頁(yè)面只有一個(gè)是他們的首要目標(biāo)。

無(wú)論是點(diǎn)擊一個(gè)注冊(cè)按鈕或Web表單中輸入您的電子郵件地址，或下載到您的電腦上的東西，在這個(gè)頁(yè)面上只有一個(gè)良好定義引導(dǎo)頁(yè)面的網(wǎng)頁(yè)設(shè)計(jì)師希望她的用戶采取的行動(dòng)。

約的引導(dǎo)頁(yè)面沒(méi)有復(fù)雜的導(dǎo)航菜單， 你通常不會(huì)對(duì)他們的社會(huì)化媒體按鈕找到一個(gè)巨大的數(shù)組。缺乏裝飾的照片，其唯一目的是填補(bǔ)空白的空間。

每一個(gè)設(shè)計(jì)元素，精心選擇。

一切戰(zhàn)略是用來(lái)支持和加強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)師想要的網(wǎng)站訪問(wèn)者采取行動(dòng)。

引導(dǎo)頁(yè)案例研究：Dropbox的

Dropbox的網(wǎng)站是一個(gè)逐步簡(jiǎn)約的設(shè)計(jì)，演示的概念有一個(gè)引導(dǎo)頁(yè)面只有一個(gè)主要目標(biāo)的一個(gè)很好的例子。

Dropbox的引導(dǎo)頁(yè)面只有一個(gè)主呼叫行動(dòng)，這是很容易發(fā)現(xiàn)，因?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)的主要目標(biāo)是讓網(wǎng)站的訪問(wèn)者點(diǎn)擊注冊(cè)按鈕。

在網(wǎng)頁(yè)上Sign up按鈕是最有特色的元素。 。

是的，有次要的Dropbox的引導(dǎo)頁(yè)面訪問(wèn)者可以采?。?a href=http://52tianma.cn/xiazai/ target=_blank class=infotextkey>下載軟件，請(qǐng)登錄（如果你已經(jīng)是一個(gè)Dropbox的用戶），或了解更多關(guān)于Dropbox的替代行動(dòng)。 然而，這些替代行動(dòng)電話設(shè)計(jì)的方式，并不妨礙首要目標(biāo)是讓網(wǎng)站的訪問(wèn)者點(diǎn)擊Sign up按鈕 。

在柔和的時(shí)尚設(shè)計(jì)刪除所有非必需的元素。 例如：

• 站點(diǎn)的名稱（ 保管箱 ）甚至不顯示在目標(biāo)網(wǎng)頁(yè)上，甚至應(yīng)用程序的名稱被證明是一種非必需的元素。
• Dropbox的解釋如何工作的，他們用一個(gè)簡(jiǎn)單的例子，雙提請(qǐng)您注意向Sign up按鈕 。
• 標(biāo)語(yǔ)（ 你的東西，任何地方 ）是短期和簡(jiǎn)單。

Dropbox的著陸頁(yè)網(wǎng)站訪問(wèn)者采取什么樣的行動(dòng)就是了，做一個(gè)自信，果斷的選擇，然后將其設(shè)計(jì)的方式，強(qiáng)調(diào)在該行動(dòng)。

著陸頁(yè)案例研究：郵箱

郵箱 ，一個(gè)應(yīng)用程序，幫助用戶有效地處理在移動(dòng)設(shè)備上的電子郵件，向我們展示了一個(gè)偉大的簡(jiǎn)約著陸頁(yè)面設(shè)計(jì)的另一個(gè)例子。

主要?jiǎng)幼魇且粋€(gè)大的，獨(dú)特設(shè)計(jì)的按鈕點(diǎn)擊標(biāo)記在蘋(píng)果App Store中的應(yīng)用程序 ，使用戶郵箱頁(yè)面。

有力地說(shuō)明了什么樣的郵箱是一個(gè)簡(jiǎn)單的產(chǎn)品中的主呼叫行動(dòng)的權(quán)利（產(chǎn)品，打開(kāi)一個(gè)視頻的時(shí)候點(diǎn)擊）截圖。

另類的動(dòng)作出現(xiàn)在網(wǎng)站的導(dǎo)航菜單，但不再?gòu)?qiáng)調(diào)視覺(jué)導(dǎo)航菜單。

著陸頁(yè)案例研究：因果報(bào)應(yīng)

是一個(gè)美麗的簡(jiǎn)約引導(dǎo)頁(yè)面的另一個(gè)很好的例子。

這個(gè)著陸頁(yè)所需的主要行動(dòng)是點(diǎn)擊“ 立即購(gòu)買”按鈕。 主要?jiǎng)幼黠@示兩次：一次在中間的布局，和其他的頂部。 呼叫動(dòng)作按鈕都是綠色的，相同的標(biāo)記，看上去很相似，它們之間創(chuàng)建連接。

次要的替代行動(dòng)用戶可以點(diǎn)擊“ 了解更多 ”按鈕。 正如你可以看到， 了解更多 “按鈕的透明度降低了它的視覺(jué)重量，所以它不偷的注意力從主買現(xiàn)在號(hào)召性動(dòng)作按鈕旁邊。

以上的呼叫動(dòng)作按鈕的簡(jiǎn)短描述簡(jiǎn)潔封裝噶的獨(dú)特的價(jià)值主張：一個(gè)社會(huì)共享的WiFi連接。

高清晰度的背景照片是有意義的，圖為產(chǎn)品看起來(lái)像什么，并給你一個(gè)想法，關(guān)于尺寸的產(chǎn)品（手拿著產(chǎn)品是一個(gè)有用的上下文暗示）。

簡(jiǎn)約的著陸頁(yè)的基本元件

您可能會(huì)看到現(xiàn)在中反復(fù)出現(xiàn)的設(shè)計(jì)模式。 簡(jiǎn)約主義的引導(dǎo)頁(yè)面有三個(gè)主要組成部分：

1. 主要?jiǎng)幼?/li>
2. 產(chǎn)品/服務(wù)的說(shuō)明
3. 另類動(dòng)作/秒

當(dāng)我們?nèi)サ较乱粋€(gè)部分的這篇文章，我們通過(guò)幾個(gè)例子，記住保持這三個(gè)組成部分。

簡(jiǎn)約的著陸頁(yè)的設(shè)計(jì)技巧

下面是一些技巧和思路的基礎(chǔ)上重復(fù)出現(xiàn)的圖案，我們已經(jīng)看到在簡(jiǎn)約的引導(dǎo)頁(yè)面。

專注于創(chuàng)建一個(gè)良好的視覺(jué)層次

為了提醒大家注意一個(gè)引導(dǎo)頁(yè)面的最重要的部分，視覺(jué)層次組成。

視覺(jué)層次是刻意安排的元素在設(shè)計(jì)中，最重要的元素是第一次見(jiàn)到。

一些影響一個(gè)引導(dǎo)頁(yè)面的層次結(jié)構(gòu)，在視覺(jué)設(shè)計(jì)元素的位置的主要特點(diǎn)是：

1. 大?。?/strong>更大的元素是更高層次的。
2. 在網(wǎng)頁(yè)中的位置：對(duì)于大多數(shù)網(wǎng)站的頂部和左側(cè)的一個(gè)網(wǎng)頁(yè)的元素層次結(jié)構(gòu)中較高。
3. 色彩的對(duì)比：一個(gè)特定的元素和背景之間的對(duì)比度更強(qiáng)，以及作為其他元素之間的接近，會(huì)導(dǎo)致在視覺(jué)上層次到較高的位置。
4. 視覺(jué)的復(fù)雜性：相比周圍的元素給出了一個(gè)更復(fù)雜的審美元素更強(qiáng)的視覺(jué)重量。
5. 空白：多個(gè)空格周圍的元素，賦予了它更強(qiáng)的視覺(jué)重量。