很明顯,WordPress 單頁網站比多頁網站更容易構建。事實上,要讓一個單頁的頁面既有友好的多使用者體驗又具有視覺吸引力往往要困難得多。
通常,一個單頁多頁面切換 WordPress 網站設計比一個多頁面站點需要花費更多時間。挑戰在於,要把您想傳遞的內容都展示在頁面上,您需要做大量的計劃。當然,您可以隨心所欲地建立一個頁面,但是大多數訪問者也許在第三次滾動之後就會放棄。更好地構建 WordPress 單頁網站的指南圍繞 5 個關鍵元素展開。
1 、目標: 確定網站的目標並朝著這個目標努力
在您明白您的網站的目標之前,就匆忙開始您的設計是沒有意義的。基於 WordPress 外貿獨立站網站建設目標,您將能夠更好地計劃它的結構。您應該尋找可能導致訪問者快速退出的原因。這甚至可能發生在訪客點選網站行動按鈕之前,比如說網站載入速度過慢。一個單頁的網站需要把多使用者的注意力引向一個單一的目標; 這可能是:
●銷售產品
●展示作品集
●匯出活動
Bistro Agency(http://www.bistroagency.cz/work/skoda-4×4/web/#4×4)
該網站的摺疊切換產品的互動效果並沒有減慢其載入速度。
Be Moving 網站(https://themes.muffingroup.com/)
這個 WordPress 單頁網站的特點是將靜態影像展示成動態的。
Sheerlink(https://sheerlink.audio/)
這個網站也是一個很好的例子,說明了大型影像和滑動切換面板在吸引多使用者方面所扮演的重要角色。
2 、文字: 儘量簡化,讓它易於閱讀
在 WordPress 單頁網站中,在頁面上方填滿文字,很少有多使用者會費心向下滾動頁面。相反,您需要透過強調粗體標題將文字數量保持在最低限度,您可以搭配簡短的段落和專案列表。避免在頁面的任何地方使用大段文字。將文字分成幾個部分,並將它們整合到視覺效果中。您可以透過多種手段,使文字有趣和容易理解。
Hello Alfred(https://www.helloalfred.com/)
網站導航位於網站的上方,簡潔突出的標題和正文有助於核心資訊的傳遞。
Mercedes-Benz(https://www.mercedes-benz.com/en/mercedes-benz/vehicles/passenger-cars/eqc/the-eqc/)
當汽車品牌達到了賓士這個品牌的高度,多關注高質量的影像,極簡化文字就足夠了。該網站的 360°旋轉背景也讓汽車更加真實形象,可以讓多使用者多角度觀察它。
3 、視覺效果: 識別正確的模式,巧妙地使用負空間
人們傾向於以 F 模式閱讀文字,而以 Z 模式檢視影像。因此,正確放置文字和影像以保持平衡的視覺流是有必要的。在這個區域中,大量使用留白有助於分隔各個部分。您可以使文字易於閱讀,讓人們參與其中。
Dribbble’s Year in Review(https://dribbble.com/year/2022/)
本例子中,設計者運用幾個不同的設計原則,以最大限度地創造一個醒目的視覺主題。
Nasal Drops(https://en.soplyam.net/)
該推廣頁面可能主題不是特別突出。但是由於巧妙地使用了幻燈片、留白和動畫,設計打破了常規,畫面看起來還是很新穎。