UI設計這樣激發(fā)靈感

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

　　前提很簡單：將網站的所有(或大部分)資產(從文本到圖形再到導航按鈕)都保留在單個頁面上。希望用戶上下滾動(或使用導航按鈕)來查看您的網站。
 

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

　　10個迷人的單頁網站，激發(fā)您自己的靈感
 

　　以下是一頁網站的10個出色示例。使用它們來激發(fā)您自己的設計，或者干脆討價還價。
 

　　1. Balsoy
 

　　Balsoy利用頂部的固定菜單欄來幫助用戶輕松瀏覽其精簡的一頁網站。當用戶向下滾動時，將向他們顯示提供有關其產品的信息的部分。每個部分都通過滑動動畫過渡到下一個，這使它保持了樂趣。
 

　　2.史詩
 

　　Epic為您提供來自才華橫溢的作家的真實，引人入勝的故事-它們全部顯示在一頁的網站上。使用頁面頂部的錨點鏈接，用戶可以通過單擊按鈕或向下滾動來找到所需的確切信息。
 

　　每個故事都帶有生動的圖形和簡短但引人入勝的簡介。布局簡單，允許用戶滾動瀏覽并選擇故事，例如數字圖書館。盡管每個故事都是其自己的子頁面，但我們確實將其作為一個示例，將網站的大部分內容放在該單個易于瀏覽的頁面上。UI設計圖形。
 

　　3.最后一滴
 

　　每個最后一滴都是由Waterwise的人們提供給您的單頁網站，這是一家總部位于英國的非營利性組織，致力于向人們宣傳用水量及其減少用水量的重要性。當用戶向下滾動時，他們將經歷一天的典型英國公民生活，以及每天消耗的大量水。
 

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

　　4.伊恩·恩德斯
 

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

　　無需滾動即可了解Enders的生活101。在第17行的末尾，所有您需要了解的內容都已闡明：他編碼，他有經驗，他有簡歷，而且他(用他自己的話來說)是“鉤針編織的老人”。
 

　　5.憤怒的熊
 

　　設計公司Angry Bear使用了一個漂亮的以自然為主題的一頁網頁，包括左側的浮動漢堡包菜單(或者hamBEARger菜單?好吧，我會停下來……)，以便于瀏覽整個頁面。
 

　　設計用戶UI/UX設計元素和創(chuàng)造力時會感覺到深度和范圍，當他們向下滾動瀑布進入下方的森林時。
 

　　6.牧師的危險
 

　　Reverend Danger是來自同名數字代理商的有趣且互動的單頁網站。
 

　　使用頂部的滾動條，用戶可以在兩種不同的主題之間進行選擇，以體驗他們的網站體驗：尊敬，更加被動和平靜。和Danger，以獲得更暴力和動作片的體驗。一種非常有趣的為一頁網站加香料的方法。

        7.指骨
 

　　Knucklebones成立于2016年，是一個專門針對舊游戲的較新網站。該網站專門針對Kickstarter產品，該產品基于古老的指節(jié)骨游戲(千斤頂的前身)。
 

　　當用戶向下滾動時，網站會為用戶提供他們可能需要播放的所有信息，并以易于遵循的格式展示規(guī)則。
 

　　指關節(jié)規(guī)則該網站還提供了各種軟件包，用戶可以在其中購買游戲。
 

　　頂部的固定導航欄可幫助用戶瀏覽一頁網站，而無需不斷滾動

        8.休息

　　剩下的就是一個很好的例子，說明一頁網站也可以用于電子商務。網頁簡短而甜美，通過出色的圖像和良好的復制效果，為用戶提供了他們所需的有關產品的一切信息，同時通過視覺上表達的三個簡單購買選項，為用戶提供了有關如何自行購買產品的選項。
 

　　休息的購買選項頂部的兩個導航按鈕也是一個加號，可幫助您瀏覽網站，而不必不斷滾動瀏覽。
 

　　9.喬恩·菲利普斯
 

　　并非每個一頁的網站都需要成為錨鏈接和動畫。用戶界面設計師喬恩·菲利普斯(Jon Phillips)憑借他的個人網站，為我們提供了這份清單上最斯巴達式的單頁網站。此頁面無需滾動，因為它只是一個簡單的頁面，帶有他的名字以及聯系人按鈕的前面和中間。
 

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

　　10.我們不是塑料的
 

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

　　這包括：
 

　　羅蘭的簡短傳記背景
 

　　他作為UX工程師的工作摘錄，UI/UX網頁模型。
 

　　他獲得的獎項
 

　　他在Medium上撰寫的博客文章
 

　　該設計是最小的，僅向用戶提供他們可能希望從Roland獲得的東西，僅此而已。
 

　　建立一頁網站的提示
 

　　既然您已經看到了一些很棒的單頁網站示例，那么讓我們看一下構建自己的網站時要考慮的主要因素。
 

　　他們是：
 

　　可行的目標
 

　　強大的CTA
 

　　易于到達的導航按鈕
 

　　1.確定可行的目標
 

　　在考慮建立一個一頁網站之前，您應該做的第一件事就是問自己：“我的目標是什么?”
 

　　這是創(chuàng)建任何網站(無論是否一頁)的最關鍵方面之一。準確了解您網站的目標是幫助您正確地決定要對網站進行的操作。
 

　　它甚至可以幫助您意識到不應該建立一個一頁的網站。
 

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

　　但是，如果您有一個網上學習業(yè)務，向人們教授攝影的所有不同方面，并且您有關于該主題的多門課程，那么您將要創(chuàng)建一個具有更多頁面的更傳統的網站。這是因為您將需要空間來專用于您的不同產品和資產，甚至是博客，這會使一頁感到非常擁擠。
 

　　無論您停留在多少頁面上，您都應該將網站的目標作為“北極星”用于您的所有網頁設計決策，包括諸如要包含的元素，將要采取的行動呼吁以及如何使用等內容。導航元素將看起來。
 

　　因此，問問自己：“我的目標是什么?我的品牌的目標是什么?我想用我的網站完成什么?” 只有回答這些問題，您才能決定如何訪問一頁的網站。
 

　　有關良好設計目標設定的更多信息，請查看以下主題的文章：
 

　　觀看：為什么成功的秘訣是設定正確的目標
 

　　如何衡量工作的影響
 

　　為成功建立設計系統
 

　　2.形成強有力的行動號召
 

　　每個一頁的網站都需要明確的號召性用語。沒有用戶，用戶一進入網站便不知道該怎么做，這意味著潛在客戶減少，參與度降低，轉化次數減少。
 

　　您如何提出這些CTAs?回到您的目標。
 

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

　　您是否希望讀者與您聯系以獲取報價?將讀者定向到您網站上的聯系人框。
 

　　您是否希望潛在客戶查看您的最新項目?確保在易于訪問的地方具有指向這些項目的錨鏈接
 

　　您是否希望人們在社交媒體上與您建立聯系?有固定的按鈕可以引導您的社交渠道。
 

　　這是良好的用戶研究發(fā)揮作用的地方。通過了解與您的網站進行交互的人員，您將能夠使自己沉浸在用戶的目標和痛點中。當您這樣做時，他們實際上會告訴您他們想從副本中聽到什么。
 

　　例如，假設您經營一家健身教練公司，并且希望您的用戶注冊咨詢會議。與一些客戶交談后，您經常聽到他們告訴您他們真的想在夏天之前得到六塊腹肌。
 

　　現在，您可以開始集體討論有效的CTA。例如，“注冊免費的咨詢會議，討論到夏天如何獲得六塊腹肌!”
 

　　您所要做的就是說出目標用戶的語言。
 

　　3.建立易于到達的導航元素
 

　　無論您在頁面的哪個部分，都要確保頁面易于瀏覽至關重要。
 

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

　　定位文字。錨文本是一段文本上的鏈接，可將您帶到網頁上的預定位置。它們在瀏覽網頁時非常方便-此外，當您使用它們時，它們可以為您提供SEO提升。雙贏！
 

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

　　維基百科錨文本頁面上的錨文本示例！固定導航。在用戶向上或向下滾動頁面時，使它們具有導航元素(如按鈕或側欄)既方便又有用(請參見上方的Balsoy)。如果您的一頁網站很長且包含很多內容，則尤其如此。
 

　　修復了搜索引擎日記中的導航欄保持簡短。您可能會覺得導航元素過于分散注意力。在這種情況下，您可以使事情簡單，并確保您的一頁網站簡短。這將確保他們獲得所需的所有信息，而不必滾動太遠。

        這篇文章的內容你學到了嗎，靈感是設計師重要的靈魂，更多資訊請持續(xù)關注AAA教育~