400-611-9921
2019-04-24
2916
單頁網(wǎng)站設(shè)計!對于適合單個頁面的小規(guī)模網(wǎng)站,有一些幾乎是神奇的東西。它們可以優(yōu)雅,易于導(dǎo)航,并在封閉空間中提供最佳用戶體驗。
雖然有一段時間我們回避單頁網(wǎng)站,但用戶再次擁抱它們(謝謝,移動?。阋矐?yīng)該這樣做。
我們正在研究十個提示,想法,示例和建議,以幫助您為下一個網(wǎng)頁設(shè)計工作激發(fā)靈感。這可能是保持簡單的正確時機(jī),并采用單頁策略!
1.在“頁面”中思考
在設(shè)計單一的滾動網(wǎng)站設(shè)計時,請考慮“頁面”。
每個卷軸應(yīng)提供一個頁面式體驗,專注于單個元素。這為網(wǎng)站設(shè)計創(chuàng)造了獨特的組織和流程感。
Cote通過具有交替的淺色和深色(或完整照片)分色的“頁面”來完美地做到這一點。當(dāng)滾動一位內(nèi)容結(jié)束而下一位內(nèi)容開始時,用戶可視地知道。
2.更長頁面的時間線導(dǎo)航
對于單頁網(wǎng)站而言,它們并不總是很輕松。一些最好的單頁設(shè)計是更長滾動,更長格式的網(wǎng)站。
對于這些項目,請考慮時間軸導(dǎo)航,以便用戶始終知道他們在內(nèi)容流中的位置。如果有重新檢查的內(nèi)容,它可以很容易地跟蹤您的位置以及如何返回。
UV Hero使用高度可視化的時間線導(dǎo)航功能,可以顯示可見光譜中的每種顏色,因為它與設(shè)計中的內(nèi)容相關(guān)。最好的部分?您可以單擊任何顏色并向右跳到該內(nèi)容。
3.頁面導(dǎo)航
單頁網(wǎng)站不需要缺少常見的用戶界面元素,例如菜單,盡管很多人都認(rèn)為。
您仍然可以使用傳統(tǒng)外觀菜單(它可以幫助用戶流動和搜索)。不同之處在于菜單鏈接會跳轉(zhuǎn)到單頁設(shè)計的特定部分。對于喜歡以這種方式導(dǎo)航的用戶,他們甚至不知道你已經(jīng)創(chuàng)造了這個漂亮的技巧。
Happy Tools看起來像一個多頁面的網(wǎng)站,但它們都包含在一個頁面上。菜單工作得非常好,并為用戶提供導(dǎo)航選擇。
4.使其具有高度互動性
如果您希望用戶繼續(xù)滾動,交互式元素可以成為鼓勵該操作的技巧。
從視頻到視差效果到動畫或游戲化的觸摸,交互性可以鼓勵更多的移動和現(xiàn)場時間。單頁設(shè)計尤其如此。
Lobods具有愚蠢的風(fēng)格,具有充足的互動性。有懸停動畫,幻燈片和彈出元素以及滾動文本。它們以一種幫助用戶輕松瀏覽內(nèi)容的方式匯集在一起。(這種設(shè)計的另一個好處是它包含足夠的空間,以便更容易看到微妙的動作和交互。)
5.全屏在一個屏幕上
如果您沒有很多內(nèi)容,那么一頁式設(shè)計就可以在一個屏幕上提供良好的用戶體驗。
將此網(wǎng)站設(shè)計視為具有一些信息的大導(dǎo)航元素,然后是異地或聯(lián)系鏈接。它可以很好地用于即將推出的設(shè)計或簡單的投資組合登陸頁面。
Sylvain Theyssens為他們的投資組合設(shè)計做到了這一點。(它實際上有兩頁:一個可愛的“屏幕保護(hù)程序風(fēng)格”動畫,通過鼠標(biāo)移動變成主要設(shè)計。)頁面簡單,信息豐富,令人印象深刻。單屏設(shè)計為您提供了所需的一切,無需任何額外的阻礙。
6.即將推出設(shè)計
說到即將推出的網(wǎng)站,這是單頁設(shè)計的完美用途。
在大多數(shù)情況下,即將推出的頁面內(nèi)容不多 - 可能只是徽標(biāo)和介紹或聯(lián)系信息。在大多數(shù)情況下,這可以很好地適用于一個頁面,并且在主站點上線之前有效地利用用戶時間。
綠色變色龍就是這樣做的。one =頁面設(shè)計特別好,因為很酷的動畫和有趣的文本使用。它創(chuàng)造了一種期待感并喚起好奇心 - 這是你即將到來的頁面中你希望的東西。
7.有點時髦
如果你想嘗試一些有點不同或時髦的東西,單頁網(wǎng)站可以是一個很好的游樂場。一個不尋常的顯示器適用于較小的設(shè)計,因為你不會過度做“技巧”。
Rou Hun Fan使用專業(yè)字體和背景網(wǎng)格來突出他的信息,作品集和作品。創(chuàng)意展示和簡約風(fēng)格足以鼓勵滾動很短的時間,非常適合投資組合。
8.給用戶做點什么
為了保持參與并讓用戶對設(shè)計感興趣,請在單頁網(wǎng)站上給予他們很多幫助。
許多這些設(shè)計的一個失敗是它們只是長卷信息。用可點擊的元素,號召性用語和要做的事情來分解。這些元素不僅可以幫助您確定用戶對設(shè)計的要求(以及它們是否達(dá)到預(yù)期目標(biāo)),還可以幫助他們保持較長時間的互動。
Plethora打破了長卷的滾動,有大量的卡式按鈕來預(yù)訂旅行套餐。這些點擊交互中的每一個都用箭頭標(biāo)注,以創(chuàng)建一致的用戶體驗。
9.保持組織
將所有網(wǎng)站內(nèi)容放在一個頁面上,設(shè)計很容易失控。但它也可以為內(nèi)容創(chuàng)建一個有組織的畫布。
當(dāng)涉及到使用一個頁面時,緊密的網(wǎng)格和統(tǒng)一的結(jié)構(gòu)可能是您最好的工具。使用它們可以保持內(nèi)容的有序組織和分組,方便用戶瀏覽和理解。
Podcasts Repo通過完美的播客網(wǎng)格可以做到這一點。該網(wǎng)站足夠靈活,使用此網(wǎng)格和樣式可以根據(jù)需要增加到盡可能多的內(nèi)容項,而不會讓人不知所措。
10.明智地使用Space
對于較長滾動或單頁設(shè)計,最重要的設(shè)計考慮因素之一是空間的使用。內(nèi)容需要間隔開,以便明確建立內(nèi)容更改,識別操作,并且一切都易于閱讀。(請記住,過多的滾動可能會引起一定程度的眼睛疲勞。)
Werner的Nomenclature of Colors是一個單頁網(wǎng)站,內(nèi)容很多。該網(wǎng)站實際上是1821年的一本書的復(fù)制品。太空使這個設(shè)計工作。
具有清晰網(wǎng)格和大量空白區(qū)域的類別和子部分增強(qiáng)了可讀性和掃描性。這里有很多,但由于整個空間的使用,它感覺非常平易近人。
結(jié)論
單頁網(wǎng)站設(shè)計可以成為您打破一些較重的項目所需要的東西。這種風(fēng)格適用于從即將到來的網(wǎng)站到投資組合的任何事情。它適用于沒有大量內(nèi)容的任何網(wǎng)站。
本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技
標(biāo)簽:公司網(wǎng)站制作,廣州建設(shè)網(wǎng)站,官網(wǎng)建設(shè),網(wǎng)頁制作公司,建網(wǎng)站公司,企業(yè)建站,廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁設(shè)計公司,廣州網(wǎng)站設(shè)計公司,廣州企業(yè)網(wǎng)站建設(shè)
400-611-9921
020-29860991
地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F
業(yè)務(wù) QQ: 3561401262
E-mail: sales@zomsky.com