單頁網站設計案例:非常棒的使用者介面細節設計

來源:互聯網
上載者:User

文章描述:本文中我們來看一些精彩的單頁網站設計,它遠比你想象要流行。在你欣賞這些網站的外觀的同時,不妨點擊訪問,體驗一下網站中這些非常棒的使用者介面細節。

不是每個網站都要很複雜或包含很多頁內容資訊,有時候一個頁面就足夠了。不過你打算用一個頁面來建立網站,並不意味著它會很輕鬆。開發一個單頁網站布局所需要的思考與規劃,不比某些更加複雜的網站少。它需要將所有相同的基礎元素整合成一個更大的網站,還要讓人看起來印象深刻,你得照著預期進行並且懷揣明確的目標。

有數不清的酷炫招式可以協助你充分設計好單頁網站。特別為您介紹一下,並推薦相關的熱門文章:)

視覺差滾動:滾動特效是單頁設計中最盛行”花招”中的一個。輕彈滑鼠,使用者無需點擊或從歡迎頁面跳轉就能來到一個新頁面。這種效果可以激勵使用者繼續滾動、閱讀、與網站互動,看看接下來會出現什麼(你可以在之前的文章中學習更多關於視覺差滾動的知識)。

本文中我們來看一些精彩的單頁網站設計,它遠比你想象要流行。在你欣賞這些網站的外觀的同時,不妨點擊訪問,體驗一下網站中這些非常棒的使用者介面細節。

什麼是單頁設計?

creatance

單頁網站建立在單個視窗中,單頁網站的概念更多基於滾動而非點擊(儘管點擊也沒有被禁止)來瀏覽和通讀網站與它的內容。

一個單頁網站可以簡單到像一頁紙,恰好吻合瀏覽器視窗且不需要滾動。但它並非總是如此。單頁網站可以滾動(當然也別把網頁設計得太長,這非常重要,使用者會受不了)。

簡單來說,單頁網站是不包含網域名稱內的連結並且所有內容都在主介面的網站。

為什麼選擇單頁設計?

lostphoneexperiment

單頁網站設計有很多注意事項,它並不適合每個項目,它流行的使用場合:上線前的APP預告、帶有email註冊表單的網站、作品集展示工具、引導使用者跳轉的網站、簡單展示產品和資訊的公司網站。

單頁網站通常設計得很贊,因為它們只有一次機會——第一印象——來從雜亂的視覺景觀中吸引使用者注意力。

這類頁面通常都適用於不具備豐富內容的網站:售賣單個產品的網站,用來推銷另一個網站、APP或商品的網站,小型作品集或簡單的資訊。

既然這類網頁的設計通常都高度視覺化,文字就得儘可能保持精簡。單頁網站同時也需要一個清晰易懂的使用者介面,使用者才能準確知道他們可以用這個網站來做什麼

懷揣目標

Itrackmytime

Myowncorks

Fajnechlopaki

Fuunnyfacescamera

開始設計單頁網站時要有清晰的目標。你想讓使用者在你的網站上做什嗎?他們瀏覽時候應該接收到什麼資訊?

比如說,如果你在預告你一個APP,你可能想要使用者提供email地址,這樣你可以在發布時告知他們。如果你在出售一套UI工具,你的目標就是將訪問量轉化為銷量,其他行為可能包括:填寫表單、觀看視頻、轉到其他網站,或以上都有。

在開始設計之前,瞭解你想要使用者做什麼,並且自始至終反覆強調。

通往成功的設計秘訣

Thinkbear

Fk-agency

既然你已經瞭解自己想讓網站幹什麼,遵從下面的幾條秘訣,然後踏上發布之路吧。

一、創造第一印象。你只有唯一的機會來增加新使用者。你的網站得通過視覺吸引來迅速告訴使用者他們為何來這;
二、保持專註。記住你的目標,去除所有礙事的小花樣、設計項目和文案;
三、使用鮮明的視覺風格。無論純色、圖片或漂亮的照片,選擇一種很棒的視覺表現,並且大張旗鼓地使用它;
四、開發一個清晰的導航。儘管你可能會懷疑你需要導航幹什麼——它畢竟只是個單頁網站——任何一個包含許多目錄、表單和各種形式連結的網站都需要清晰的導航。用來告訴使用者不同按鈕的用途(尤其他打算下載或購買你的產品)。即便是擁有少量內容的網站,也需要包含一個清晰易懂的指引來發揮作用;
五、精心組織。你絕對沒法在單頁設計的版面(或空間)中說清楚你的全部所想。信守什麼是重要的,並將所有東西根據重要性層級排個序。撰寫簡單清晰的文案,不斷編輯直到措辭簡潔明了、切中要害;

設計時玩得開心!

酷炫的花樣和效果

Fifteen

Infomaticapp

Onemore

Pixelstadium

結論

和其他類型的設計”花招”或趨勢相比,單頁網站只有在你內容專為它定製時才有效,這種風格最適合內容有限且視覺鮮明的網站。

原文地址:designmodo  譯文地址:colachan  譯者:@十萬個為什麽



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。