UI設(shè)計(jì)這樣激發(fā)靈感

　　如果操作正確，則一頁(yè)格式可為您的用戶(hù)提供簡(jiǎn)單但功能豐富的體驗(yàn)，而無(wú)需瀏覽頁(yè)面和鏈接。本文AAA教育的武老師就對(duì)UI設(shè)計(jì)靈感激發(fā)進(jìn)行分享講解。
 

　　前提很簡(jiǎn)單：將網(wǎng)站的所有(或大部分)資產(chǎn)(從文本到圖形再到導(dǎo)航按鈕)都保留在單個(gè)頁(yè)面上。希望用戶(hù)上下滾動(dòng)(或使用導(dǎo)航按鈕)來(lái)查看您的網(wǎng)站。
 

　　我們想向您展示一頁(yè)網(wǎng)站的更多出色示例，以幫助啟發(fā)您自己的設(shè)計(jì)，然后為您提供一些在InVision Studio中構(gòu)建自己的優(yōu)秀技巧。
 

　　10個(gè)迷人的單頁(yè)網(wǎng)站，激發(fā)您自己的靈感
 

　　以下是一頁(yè)網(wǎng)站的10個(gè)出色示例。使用它們來(lái)激發(fā)您自己的設(shè)計(jì)，或者干脆討價(jià)還價(jià)。
 

　　1. Balsoy
 

　　Balsoy利用頂部的固定菜單欄來(lái)幫助用戶(hù)輕松瀏覽其精簡(jiǎn)的一頁(yè)網(wǎng)站。當(dāng)用戶(hù)向下滾動(dòng)時(shí)，將向他們顯示提供有關(guān)其產(chǎn)品的信息的部分。每個(gè)部分都通過(guò)滑動(dòng)動(dòng)畫(huà)過(guò)渡到下一個(gè)，這使它保持了樂(lè)趣。
 

　　2.史詩(shī)
 

　　Epic為您提供來(lái)自才華橫溢的作家的真實(shí)，引人入勝的故事-它們?nèi)匡@示在一頁(yè)的網(wǎng)站上。使用頁(yè)面頂部的錨點(diǎn)鏈接，用戶(hù)可以通過(guò)單擊按鈕或向下滾動(dòng)來(lái)找到所需的確切信息。
 

　　每個(gè)故事都帶有生動(dòng)的圖形和簡(jiǎn)短但引人入勝的簡(jiǎn)介。布局簡(jiǎn)單，允許用戶(hù)滾動(dòng)瀏覽并選擇故事，例如數(shù)字圖書(shū)館。盡管每個(gè)故事都是其自己的子頁(yè)面，但我們確實(shí)將其作為一個(gè)示例，將網(wǎng)站的大部分內(nèi)容放在該單個(gè)易于瀏覽的頁(yè)面上。UI設(shè)計(jì)圖形。
 

　　3.最后一滴
 

　　每個(gè)最后一滴都是由Waterwise的人們提供給您的單頁(yè)網(wǎng)站，這是一家總部位于英國(guó)的非營(yíng)利性組織，致力于向人們宣傳用水量及其減少用水量的重要性。當(dāng)用戶(hù)向下滾動(dòng)時(shí)，他們將經(jīng)歷一天的典型英國(guó)公民生活，以及每天消耗的大量水。
 

　　該網(wǎng)站使用動(dòng)畫(huà)和獨(dú)特的滾動(dòng)技術(shù)來(lái)吸引游客，并向他們展示減少用水的重要性。這是一頁(yè)紙上非常有創(chuàng)意的作品，并提供了令人難忘的教育經(jīng)歷。
 

　　4.伊恩·恩德斯
 

　　伊恩·恩德斯(Ian Enders)是一位軟件工程師，也是一個(gè)精彩的一頁(yè)網(wǎng)站的創(chuàng)建者。
 

　　無(wú)需滾動(dòng)即可了解Enders的生活101。在第17行的末尾，所有您需要了解的內(nèi)容都已闡明：他編碼，他有經(jīng)驗(yàn)，他有簡(jiǎn)歷，而且他(用他自己的話(huà)來(lái)說(shuō))是“鉤針編織的老人”。
 

　　5.憤怒的熊
 

　　設(shè)計(jì)公司Angry Bear使用了一個(gè)漂亮的以自然為主題的一頁(yè)網(wǎng)頁(yè)，包括左側(cè)的浮動(dòng)漢堡包菜單(或者h(yuǎn)amBEARger菜單?好吧，我會(huì)停下來(lái)……)，以便于瀏覽整個(gè)頁(yè)面。
 

　　設(shè)計(jì)用戶(hù)UI/UX設(shè)計(jì)元素和創(chuàng)造力時(shí)會(huì)感覺(jué)到深度和范圍，當(dāng)他們向下滾動(dòng)瀑布進(jìn)入下方的森林時(shí)。
 

　　6.牧師的危險(xiǎn)
 

　　Reverend Danger是來(lái)自同名數(shù)字代理商的有趣且互動(dòng)的單頁(yè)網(wǎng)站。
 

　　使用頂部的滾動(dòng)條，用戶(hù)可以在兩種不同的主題之間進(jìn)行選擇，以體驗(yàn)他們的網(wǎng)站體驗(yàn)：尊敬，更加被動(dòng)和平靜。和Danger，以獲得更暴力和動(dòng)作片的體驗(yàn)。一種非常有趣的為一頁(yè)網(wǎng)站加香料的方法。

        7.指骨
 

　　Knucklebones成立于2016年，是一個(gè)專(zhuān)門(mén)針對(duì)舊游戲的較新網(wǎng)站。該網(wǎng)站專(zhuān)門(mén)針對(duì)Kickstarter產(chǎn)品，該產(chǎn)品基于古老的指節(jié)骨游戲(千斤頂?shù)那吧?。
 

　　當(dāng)用戶(hù)向下滾動(dòng)時(shí)，網(wǎng)站會(huì)為用戶(hù)提供他們可能需要播放的所有信息，并以易于遵循的格式展示規(guī)則。
 

　　指關(guān)節(jié)規(guī)則該網(wǎng)站還提供了各種軟件包，用戶(hù)可以在其中購(gòu)買(mǎi)游戲。
 

　　頂部的固定導(dǎo)航欄可幫助用戶(hù)瀏覽一頁(yè)網(wǎng)站，而無(wú)需不斷滾動(dòng)

        8.休息

　　剩下的就是一個(gè)很好的例子，說(shuō)明一頁(yè)網(wǎng)站也可以用于電子商務(wù)。網(wǎng)頁(yè)簡(jiǎn)短而甜美，通過(guò)出色的圖像和良好的復(fù)制效果，為用戶(hù)提供了他們所需的有關(guān)產(chǎn)品的一切信息，同時(shí)通過(guò)視覺(jué)上表達(dá)的三個(gè)簡(jiǎn)單購(gòu)買(mǎi)選項(xiàng)，為用戶(hù)提供了有關(guān)如何自行購(gòu)買(mǎi)產(chǎn)品的選項(xiàng)。
 

　　休息的購(gòu)買(mǎi)選項(xiàng)頂部的兩個(gè)導(dǎo)航按鈕也是一個(gè)加號(hào)，可幫助您瀏覽網(wǎng)站，而不必不斷滾動(dòng)瀏覽。
 

　　9.喬恩·菲利普斯
 

　　并非每個(gè)一頁(yè)的網(wǎng)站都需要成為錨鏈接和動(dòng)畫(huà)。用戶(hù)界面設(shè)計(jì)師喬恩·菲利普斯(Jon Phillips)憑借他的個(gè)人網(wǎng)站，為我們提供了這份清單上最斯巴達(dá)式的單頁(yè)網(wǎng)站。此頁(yè)面無(wú)需滾動(dòng)，因?yàn)樗皇且粋€(gè)簡(jiǎn)單的頁(yè)面，帶有他的名字以及聯(lián)系人按鈕的前面和中間。
 

　　在底部，您將找到標(biāo)準(zhǔn)的常規(guī)社交圖標(biāo)按鈕，這些按鈕將用戶(hù)發(fā)送到他的社交媒體帳戶(hù)，僅此而已。你找到他了
 

　　10.我們不是塑料的
 

　　我們不是塑料人，是位于柏林的UX工程師和創(chuàng)意技術(shù)人員RolandLösslein的另一種自我。該頁(yè)面分為多個(gè)部分。每個(gè)部分為用戶(hù)提供了他們可能想了解Roland的不同信息。
 

　　這包括：
 

　　羅蘭的簡(jiǎn)短傳記背景
 

　　他作為UX工程師的工作摘錄，UI/UX網(wǎng)頁(yè)模型。
 

　　他獲得的獎(jiǎng)項(xiàng)
 

　　他在Medium上撰寫(xiě)的博客文章
 

　　該設(shè)計(jì)是最小的，僅向用戶(hù)提供他們可能希望從Roland獲得的東西，僅此而已。
 

　　建立一頁(yè)網(wǎng)站的提示
 

　　既然您已經(jīng)看到了一些很棒的單頁(yè)網(wǎng)站示例，那么讓我們看一下構(gòu)建自己的網(wǎng)站時(shí)要考慮的主要因素。
 

　　他們是：
 

　　可行的目標(biāo)
 

　　強(qiáng)大的CTA
 

　　易于到達(dá)的導(dǎo)航按鈕
 

　　1.確定可行的目標(biāo)
 

　　在考慮建立一個(gè)一頁(yè)網(wǎng)站之前，您應(yīng)該做的第一件事就是問(wèn)自己：“我的目標(biāo)是什么?”
 

　　這是創(chuàng)建任何網(wǎng)站(無(wú)論是否一頁(yè))的最關(guān)鍵方面之一。準(zhǔn)確了解您網(wǎng)站的目標(biāo)是幫助您正確地決定要對(duì)網(wǎng)站進(jìn)行的操作。
 

　　它甚至可以幫助您意識(shí)到不應(yīng)該建立一個(gè)一頁(yè)的網(wǎng)站。
 

　　例如，如果您有一家攝影業(yè)務(wù)，并且想要一個(gè)既能展示您的作品集又能每月預(yù)訂新線(xiàn)索的網(wǎng)站，則您不需要大量的訂單-只需出色的視覺(jué)效果即可。您絕對(duì)可以創(chuàng)建一個(gè)出色而有效的一頁(yè)網(wǎng)站。
 

　　但是，如果您有一個(gè)網(wǎng)上學(xué)習(xí)業(yè)務(wù)，向人們教授攝影的所有不同方面，并且您有關(guān)于該主題的多門(mén)課程，那么您將要?jiǎng)?chuàng)建一個(gè)具有更多頁(yè)面的更傳統(tǒng)的網(wǎng)站。這是因?yàn)槟鷮⑿枰臻g來(lái)專(zhuān)用于您的不同產(chǎn)品和資產(chǎn)，甚至是博客，這會(huì)使一頁(yè)感到非常擁擠。
 

　　無(wú)論您停留在多少頁(yè)面上，您都應(yīng)該將網(wǎng)站的目標(biāo)作為“北極星”用于您的所有網(wǎng)頁(yè)設(shè)計(jì)決策，包括諸如要包含的元素，將要采取的行動(dòng)呼吁以及如何使用等內(nèi)容。導(dǎo)航元素將看起來(lái)。
 

　　因此，問(wèn)問(wèn)自己：“我的目標(biāo)是什么?我的品牌的目標(biāo)是什么?我想用我的網(wǎng)站完成什么?” 只有回答這些問(wèn)題，您才能決定如何訪(fǎng)問(wèn)一頁(yè)的網(wǎng)站。
 

　　有關(guān)良好設(shè)計(jì)目標(biāo)設(shè)定的更多信息，請(qǐng)查看以下主題的文章：
 

　　觀看：為什么成功的秘訣是設(shè)定正確的目標(biāo)
 

　　如何衡量工作的影響
 

　　為成功建立設(shè)計(jì)系統(tǒng)
 

　　2.形成強(qiáng)有力的行動(dòng)號(hào)召
 

　　每個(gè)一頁(yè)的網(wǎng)站都需要明確的號(hào)召性用語(yǔ)。沒(méi)有用戶(hù)，用戶(hù)一進(jìn)入網(wǎng)站便不知道該怎么做，這意味著潛在客戶(hù)減少，參與度降低，轉(zhuǎn)化次數(shù)減少。
 

　　您如何提出這些CTAs?回到您的目標(biāo)。
 

　　您想讓讀者注冊(cè)您的電子郵件列表嗎?確保在頁(yè)面頂部有一個(gè)可以輕松收集電子郵件信息的位置(或至少一個(gè)錨定按鈕)。
 

　　您是否希望讀者與您聯(lián)系以獲取報(bào)價(jià)?將讀者定向到您網(wǎng)站上的聯(lián)系人框。
 

　　您是否希望潛在客戶(hù)查看您的最新項(xiàng)目?確保在易于訪(fǎng)問(wèn)的地方具有指向這些項(xiàng)目的錨鏈接
 

　　您是否希望人們?cè)谏缃幻襟w上與您建立聯(lián)系?有固定的按鈕可以引導(dǎo)您的社交渠道。
 

　　這是良好的用戶(hù)研究發(fā)揮作用的地方。通過(guò)了解與您的網(wǎng)站進(jìn)行交互的人員，您將能夠使自己沉浸在用戶(hù)的目標(biāo)和痛點(diǎn)中。當(dāng)您這樣做時(shí)，他們實(shí)際上會(huì)告訴您他們想從副本中聽(tīng)到什么。
 

　　例如，假設(shè)您經(jīng)營(yíng)一家健身教練公司，并且希望您的用戶(hù)注冊(cè)咨詢(xún)會(huì)議。與一些客戶(hù)交談后，您經(jīng)常聽(tīng)到他們告訴您他們真的想在夏天之前得到六塊腹肌。
 

　　現(xiàn)在，您可以開(kāi)始集體討論有效的CTA。例如，“注冊(cè)免費(fèi)的咨詢(xún)會(huì)議，討論到夏天如何獲得六塊腹肌!”
 

　　您所要做的就是說(shuō)出目標(biāo)用戶(hù)的語(yǔ)言。
 

　　3.建立易于到達(dá)的導(dǎo)航元素
 

　　無(wú)論您在頁(yè)面的哪個(gè)部分，都要確保頁(yè)面易于瀏覽至關(guān)重要。
 

　　您可以采用許多不同的方法。我建議一些：
 

　　定位文字。錨文本是一段文本上的鏈接，可將您帶到網(wǎng)頁(yè)上的預(yù)定位置。它們?cè)跒g覽網(wǎng)頁(yè)時(shí)非常方便-此外，當(dāng)您使用它們時(shí)，它們可以為您提供SEO提升。雙贏！
 

　　想更多地了解錨文本？閱讀有關(guān)主題的此Ahrefs帖子。
 

　　維基百科錨文本頁(yè)面上的錨文本示例！固定導(dǎo)航。在用戶(hù)向上或向下滾動(dòng)頁(yè)面時(shí)，使它們具有導(dǎo)航元素(如按鈕或側(cè)欄)既方便又有用(請(qǐng)參見(jiàn)上方的Balsoy)。如果您的一頁(yè)網(wǎng)站很長(zhǎng)且包含很多內(nèi)容，則尤其如此。
 

　　修復(fù)了搜索引擎日記中的導(dǎo)航欄保持簡(jiǎn)短。您可能會(huì)覺(jué)得導(dǎo)航元素過(guò)于分散注意力。在這種情況下，您可以使事情簡(jiǎn)單，并確保您的一頁(yè)網(wǎng)站簡(jiǎn)短。這將確保他們獲得所需的所有信息，而不必滾動(dòng)太遠(yuǎn)。

        這篇文章的內(nèi)容你學(xué)到了嗎，靈感是設(shè)計(jì)師重要的靈魂，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~