優(yōu)秀網(wǎng)頁UI設(shè)計深度解析

1、創(chuàng)想設(shè)計學(xué)院 官網(wǎng)：優(yōu)秀網(wǎng)頁UI設(shè)計深度解析在今天這樣一個互聯(lián)網(wǎng)+時代，絕大多數(shù)企業(yè)都意識到通過線上資訊來吸引更多的潛在客戶是多么的重要。這些潛在客戶對你的公司及產(chǎn)品印象的好壞，很大程度上取決于你在網(wǎng)站設(shè)計上投入精力的多少。所以花時間構(gòu)思一個好的網(wǎng)站設(shè)計，特別是主頁部分的設(shè)計非常關(guān)鍵。用戶點擊完搜索結(jié)果后首先跳轉(zhuǎn)到的頁面就是該網(wǎng)站的主頁，主頁直接影響到訪客對該公司及其產(chǎn)品的第一印象，所以必須把這個頁面盡可能設(shè)計得友好且抓人眼球。在欣賞這20個優(yōu)秀的主頁設(shè)計之前，我們先來介紹一下現(xiàn)代主頁設(shè)計應(yīng)包含的基本要素。有效介紹你的公司的能力一個主頁最重要的部分在于它能否有效地吸引訪客的注意力。所以關(guān)鍵在于

2、，你的主頁能否在幾秒鐘內(nèi)解答訪客心中的三大疑問：§ 1.這是個什么性質(zhì)的公司？§ 2.這個公司具體是做什么的？§ 3.和競爭對手比，你的優(yōu)勢在哪？如果你的主頁能夠準(zhǔn)確清晰地回答這三個問題，那么訪問者就能在了解你的公司的基礎(chǔ)上有把握地購買你的產(chǎn)品及服務(wù)。許多企業(yè)有其獨特的標(biāo)語或簡短的口號，用以凸顯其價值主張（UVP）。他們通過簡練的語言傳達(dá)出公司理念，與訪客建立起一種聯(lián)系。所以這些標(biāo)語經(jīng)常出現(xiàn)在主頁上，并大量地用于公司的品牌營銷策略。自適應(yīng)、簡約的設(shè)計訪問者會通過PC、平板電腦或智能手機(jī)等設(shè)備登入你的網(wǎng)站。隨著全球移動普及率的不斷提高，最新的數(shù)據(jù)顯示將近60的網(wǎng)站流

3、量是移動設(shè)備提供的。為了確保你的網(wǎng)站有更好的用戶體驗，在頁面設(shè)計時考慮其自適應(yīng)性很關(guān)鍵。自適應(yīng)設(shè)計意味著無論通過什么設(shè)備接入你的網(wǎng)站，用戶的體驗是相同的或非常相似的。首先，導(dǎo)航要設(shè)計的方便，使得用戶可以快速瀏覽不同的頁面；其次，功能需要類似，這樣用戶無需切換設(shè)備即可訪問網(wǎng)站的全部功能；最后，設(shè)計要簡單，這樣才能確保你的設(shè)計在不同尺寸的屏幕上都可以清晰地傳達(dá)。一個風(fēng)格一致且響應(yīng)及時的網(wǎng)站將有助于保持品牌的知名度，為訪問者跨平臺與公司保持聯(lián)系提供方便。動態(tài)感，互動性和聯(lián)系性人們更傾向于記住那些能調(diào)動他們情緒的事情。將這個竅門應(yīng)用到你的主頁設(shè)計上可以為訪問者創(chuàng)造一種非凡的體驗。一個動態(tài)主頁可以讓訪客

4、保持心情愉悅，在使用的過程也更容易留下深刻的印象。而充分利用變化的插圖、動畫、視頻或迷你游戲可以增強開發(fā)者和用戶之間的互動性。在頁眉和頁腳加迷你動畫這樣的小細(xì)節(jié)，也是提高用戶體驗的不錯選擇。動態(tài)布局可以讓訪客了解你的整體想法。虛擬現(xiàn)實或360°場景漫游頁面可以更立體地向用戶展示公司業(yè)務(wù)及其產(chǎn)品，達(dá)到鞏固其與品牌之間聯(lián)系的效果。定期更新主頁內(nèi)容、及時反映客戶所需或分享公司的最新動態(tài)，這些都是使網(wǎng)站保持活力并與訪客加強聯(lián)系的方式。IBM.com提供了很多動態(tài)主頁布局的案例。換言之，在設(shè)計和布局主頁時采用動態(tài)方式可以加深你與用戶之間的合作，為他們提供有趣而又獨特的體驗，這樣他們就會時不時地

5、上你的網(wǎng)站逛逛啦！簡單、流暢的導(dǎo)航整個網(wǎng)站的使用過程應(yīng)該是很流暢的。如果訪客在訪問網(wǎng)站過程中產(chǎn)生了挫敗感，那么這種負(fù)面情緒將會極大地影響你們之間的關(guān)系。一個巧妙且直觀的主頁設(shè)計首先應(yīng)該使用簡單的導(dǎo)航，通過顏色和對比度等視覺分隔手段來打造易于識別的菜單。其次，不同頁面標(biāo)簽之間應(yīng)具有合理的邏輯關(guān)系，這樣用戶才能快速找到導(dǎo)航選項卡或按鈕的位置。確保訪問者知道自己在網(wǎng)站所處的位置也是非常重要的，因此選定之后產(chǎn)生一些視覺變化（如：突出顯示，對比度或顏色更改）可以帶來不一樣的效果。一個優(yōu)秀的主頁設(shè)計可以使訪問者在不同頁面和分屏之間輕松游藝，時刻保持與用戶的緊密聯(lián)系，以激起他們繼續(xù)訪問的欲望。適當(dāng)加入號召性

6、用語你的主頁有人訪問了！這是一個很好的開始，但你要怎么留住他們呢？許多現(xiàn)代主頁通過具體的號召性用語（CTA）吸引訪客注意，例如“立即注冊”、“加入我們”、“免費試用”、“立即訂閱”等等，這里有一些可以增加點擊率的CTA示例網(wǎng)頁應(yīng)該致力于吸引目標(biāo)用戶的注意力，引導(dǎo)其進(jìn)一步了解公司，找到自己想要的信息，留下聯(lián)系方式，或以其他方式與公司進(jìn)行聯(lián)系。恰到好處的CTA可以引導(dǎo)訪問者在你預(yù)期的路徑上瀏覽，這樣原本只起到宣傳手冊作用的主頁將從變?yōu)閺娪辛Φ匿N售引擎。和時代標(biāo)準(zhǔn)保持一致就在不久之前，設(shè)計的世界還是相當(dāng)平靜、封閉和對稱的。隨著平面設(shè)計技術(shù)的日趨成熟，設(shè)計師們變得越來越大膽，開始挑戰(zhàn)既有規(guī)則并采用創(chuàng)新

7、性更強的設(shè)計。現(xiàn)在，我們已經(jīng)看到越來越多的不對稱的網(wǎng)站布局，因為設(shè)計師們已厭倦完美平衡的世界，那有時意味著單調(diào)、無聊和教條。采用極簡主義手段構(gòu)建框架，并在定位元素和色板選擇上加入更多創(chuàng)意，設(shè)計師們通過玩轉(zhuǎn)設(shè)計創(chuàng)造振奮人心的新標(biāo)準(zhǔn)。盡管如此，大多數(shù)現(xiàn)代網(wǎng)站通常還是由以下部分組成：§ 創(chuàng)意的布局§ 相關(guān)CTA用語§ 巧妙運用的留白§ 令人愉悅的配色§ 合適的字體元素§ 高互動性、大片式用戶體驗§ 悅耳的背景音樂總的來說，主頁關(guān)系到訪問者對你公司的第一印象，所以它必須能有效地介紹你的公司及產(chǎn)品。你還需要考慮到設(shè)計的適應(yīng)性，同時確保

8、該頁面是動態(tài)的、有吸引力的、易于瀏覽地，這樣用戶才會更愿意去注冊。根據(jù)需要更新你的主頁和網(wǎng)站，保持你線上內(nèi)容的話題性和有效性，這樣你的網(wǎng)站一定會有很高的回訪率！介紹完一個優(yōu)秀的主頁所需的理論部分，下面讓我們來看看20個頂級的首頁設(shè)計實例，分析這些理論在實踐中是如何進(jìn)行運作的。1.PLEX.TV這個設(shè)計好在哪？§ 資料豐富，但簡潔。利用視頻和滑動客戶推薦頁等互動方式，利用最少的文字成功描述了產(chǎn)品的內(nèi)容。§ 通過以內(nèi)容為主的方式讓用戶獲取產(chǎn)品的具體信息，如這款產(chǎn)品可以在哪里使用、如何使用以及如何開始使用。§ 用戶提示語的合理放置。頁面設(shè)計和布局不僅適用于新用戶，也為想

9、添加更多設(shè)備的老用戶提供方便。UI設(shè)計2.SLACK這個設(shè)計好在哪？§ 簡單的主頁，豐富的口號。§ 沒有不必要的動畫或過分裝飾分散用戶的注意力。消息清楚且切中要害。§ 整體設(shè)計與應(yīng)用程序的外觀保持一致，使整個品牌具有連續(xù)性。§ 即使有很多的內(nèi)容，導(dǎo)航依舊清晰簡單。UI設(shè)計3.Dropbox這個設(shè)計好在哪？§ 干凈、簡單的設(shè)計，變幻多端的布局。§ 吸引人的搞笑手繪，有效推銷產(chǎn)品的語言。§ 一個強有力的標(biāo)語，充分描述了產(chǎn)品功能：“隨時隨地，與人分享”。小貼士：Dropbox是一個著名的品牌，該公司目前主要致力于推廣他們新的文檔創(chuàng)

10、建工具Paper 。Paper的主頁被分割成三個色塊，分別代表的產(chǎn)品的三個不同部分：業(yè)務(wù)解決方案，文檔工具和經(jīng)典應(yīng)用。簡約、清晰的設(shè)計與Dropbox的其他品牌相一致，但功能強大到獨樹一幟。UI設(shè)計4.STORYTRAIL這個設(shè)計好在哪？§ 現(xiàn)代元素設(shè)計和易于操作的導(dǎo)航。§ 將其功能清楚地展示在首頁，便于訪客了解。§ 通過毫無違和感的動畫體現(xiàn)其特性。§ 文字伴隨流暢的動畫效果出現(xiàn)和消失，讓訪客產(chǎn)生一種參與感，想繼續(xù)往下瀏覽。UI設(shè)計5.MEETTHEGREEK這個設(shè)計好在哪？背景視頻有兩個目的：吸引訪客的注意力，創(chuàng)造有趣的體驗。§ 餐廳在主頁設(shè)

11、置了這樣的一個主人公角色，成功取悅了用戶，與用戶建立起緊密的情感聯(lián)系，讓他們有進(jìn)一步探索的欲望。§ 柔和的顏色和簡單的字體讓訪客產(chǎn)生一種好像在與主人公交談的感覺。§ 友好的設(shè)計和簡單的導(dǎo)航與背景視頻融為一體。§ 點擊菜單欄時，屏幕會分割成兩部分。這樣訪客在瀏覽相關(guān)信息的時，視頻也在屏幕另一邊同步播放。§ 主頁設(shè)計讓人充滿積極的能量，并自然而然地產(chǎn)生一種“內(nèi)部”視角。UI設(shè)計6.FORHONOR這個設(shè)計好在哪？§ 主頁設(shè)計使用戶一步步沉浸到游戲世界。§ 有一套優(yōu)秀的字體與之完美配合。§ 沖擊劍的音效渲染了整體氛圍。§

12、 與用戶的微交互遵循著簡單的規(guī)則：觸發(fā) -> 規(guī)則 ->反饋 ->循環(huán)模型。微交互是一個無休止的循環(huán)。UI設(shè)計7.ENJOY-AIIA這個設(shè)計好在哪？§ 簡約、明亮、醒目的設(shè)計。§ 合適的字體組合。§ 清晰可視化的操作按鈕在體現(xiàn)品牌特性的同時，與用戶形成互動。§ 在不影響整體風(fēng)格、保持品牌認(rèn)知度的前提下，每個頁面通過個性化方式向用戶展示不一樣的東西。UI設(shè)計8 TRELLO這個設(shè)計好在哪？§ 主頁設(shè)計明確指出Trello不同于那些老掉牙的任務(wù)管理程序。§ 給出一個強有力的口號：“讓你的事情井井有條”，并通過簡短的圖文

13、解釋Trello是如何做到這一點的。§ 時尚的圖標(biāo)元素（如萌萌的哈士奇）讓用戶對該品牌有一個好的印象 。§ 風(fēng)格化logo提示相應(yīng)的服務(wù)。這些小細(xì)節(jié)會給訪問者留下深刻的印象。§ 明亮的顏色組合巧妙地傳達(dá)出他們提供的服務(wù)兼具趣味性和專業(yè)性。UI設(shè)計9.SOUNDCLOUD這個設(shè)計好在哪？§ 個性、明亮、大膽的頁面設(shè)計。§ 以跳躍的顏色突出關(guān)鍵元素，提示訪客注意。§ 通過單一的主頁就能同時吸引到作曲家和聽眾的注意。§ 簡短但準(zhǔn)確的口號反映該應(yīng)用的宗旨。§ 訪問者不用離開頁面就可以體驗相應(yīng)的服務(wù)，享受頂級音樂帶來的樂趣。

14、UI設(shè)計10.IGEGROUP這個設(shè)計好在哪？§ 該網(wǎng)站有著明亮的顏色和簡單的形式。§ 簡約的布局和難以置信的排版將用戶目光輕松鎖定在關(guān)鍵位置。§ 主屏的背景動畫帶動了情緒，在展現(xiàn)公司成就的同時，讓訪客注意到該公司的業(yè)務(wù)能力。§ 放置在頁面的一角的小巧獎杯圖標(biāo)展示了其獲得的榮譽，在增加價值和信任感的同時，激發(fā)訪客的好奇心。§ 動畫流暢，響應(yīng)及時。§ 時尚的視差滾動效果與充滿現(xiàn)代感的分屏畫面完美契合。§ 加載動畫保持該公司的風(fēng)格。UI設(shè)計11.SAGMEISTERWALSH這個設(shè)計好在哪？§ 這是最具創(chuàng)意的主頁設(shè)計之

15、一，通過靈活的導(dǎo)航選項卡展現(xiàn)在線網(wǎng)絡(luò)攝像機(jī)拍攝的特性。你可以隨意點擊地板上或標(biāo)語上的任何元素。§ 你可以觀察現(xiàn)在辦公室里的人在做什么。§ 導(dǎo)航標(biāo)簽字體美觀，頁腳中也出現(xiàn)了相應(yīng)的導(dǎo)航。§ 時下最流行的長滾動頁面。§ 該公司大膽地展示了一個容易記住的標(biāo)志，這與他們的品牌相吻合，也與行業(yè)相關(guān)。UI設(shè)計12.POTTERMORE這個設(shè)計好在哪？§ 使用低面設(shè)計產(chǎn)生視差。§ 在按鈕、文本、窗口彈出方式等細(xì)節(jié)處使用動畫效果。§ 互動感十足的主頁搭配著夢幻般的音樂。§ 干凈的設(shè)計，沒有一點冗余元素。§ 光標(biāo)的移動帶來意

16、想不到的效果。§ 易操作的導(dǎo)航。UI設(shè)計13. 2050.EARTH這個設(shè)計好在哪？§ 給人留下深刻視覺印象的360°交互式設(shè)計。§ 直觀、逼真的界面。§ 強大的視覺效果激起訪客進(jìn)一步探索的好奇心。§ 讓訪客沉浸于未來世界的背景音樂。§ 視頻和圖形的巧妙運用抓人眼球，使訪客流連忘返。UI設(shè)計14.TIPCOW這個設(shè)計好在哪？§ 所有相關(guān)服務(wù)都在主頁上突出顯示。§ 充滿流行元素且契合主題的視頻。§ 時尚的配色。§ 滾動頁面配合吸引人的標(biāo)題以及合適的的CTA按鈕。§ 角落中突出顯

17、示的“注冊”按鈕可以輕松找到。將重點放在社交網(wǎng)絡(luò)上，讓粉絲有機(jī)會和他們最喜愛的樂隊零距離交流。UI設(shè)計15.MATCHA這個設(shè)計好在哪？§ 優(yōu)雅、輕盈、干凈的設(shè)計。§ 絕佳的配色和字體組合（Playfair Display和Montserrat字體）。§ 公司使命及其優(yōu)勢清晰展示。§ 簡單時尚的菜單欄被突出顯示。UI設(shè)計16.SUBSIGN這個設(shè)計好在哪？§ 首先映入眼簾的一個簡單到不能再簡單的口號，卻以絕對的力量描述了該公司的是做什么的。§ 所有導(dǎo)航標(biāo)簽都配合著超贊的動畫。§ 突出顯示的CTA按鈕被靜態(tài)地放置在右上角，這樣

18、無論用戶處在什么頁面，都能快速的完成注冊。§ 用戶友好，導(dǎo)航簡單。UI設(shè)計17.ILIKETOFU這個設(shè)計好在哪？§ 明亮的設(shè)計，淡出的動畫捕捉用戶的注意力。§ 產(chǎn)品及其主要特點一目了然。§ 創(chuàng)意的加載頁面。§ 簡單、精致的導(dǎo)航。UI設(shè)計18.STUDIOLOVELOCK這個設(shè)計好在哪？§ 這是一個極具時尚感的不對稱平面顏色設(shè)計案例。§ 大號、加粗的字體和易于閱讀的排版使導(dǎo)航菜單更清晰、有效，同時也有助于填補空間。§ 簡單卻用心的動畫。§ 導(dǎo)航標(biāo)簽別致的放置方式。§ 對公司使命和優(yōu)勢的清晰描述。19.JACQUICO這個設(shè)計好在哪？