你是否曾經(jīng)因?yàn)橐豢預(yù)PP給你的第一印象很糟糕，就因此卸載了它？如果你有過這種經(jīng)歷，你自己設(shè)計(jì)的產(chǎn)品也可能會(huì)面臨同樣的遭遇，除非你能用一個(gè)殺手級(jí)的主頁設(shè)計(jì)去挽回即將流失的用戶。

甚至更大的公司也難以將新用戶轉(zhuǎn)變?yōu)橹艺\(chéng)的移動(dòng)用戶。雖然這也取決于其他各種原因（如目標(biāo)），但主頁總是優(yōu)先考慮。

那么，是什么關(guān)鍵特性和屬性使主頁成功呢？

設(shè)計(jì)一個(gè)能讓用戶停留更長(zhǎng)時(shí)間的屏幕并不是一件難做的事，而創(chuàng)造一些能吸引用戶的東西，可能會(huì)讓任務(wù)變得更艱巨，但我們能預(yù)估出這個(gè)嗎?

我們是如何選擇出5大應(yīng)用主頁的？

要找到如何創(chuàng)建用戶友好的應(yīng)用程序登錄頁面，并轉(zhuǎn)化成大眾需求。

從邏輯上講，似乎可以找到成功的應(yīng)用程序，并對(duì)其進(jìn)行分析，但請(qǐng)保持謹(jǐn)慎!

選擇真正有競(jìng)爭(zhēng)力的應(yīng)用，例如：Facebook 在其同類服務(wù)中沒有競(jìng)爭(zhēng)對(duì)手。這意味著他們可以嘗試獨(dú)特的技術(shù)，而不會(huì)有用戶流失給競(jìng)爭(zhēng)對(duì)手的風(fēng)險(xiǎn)。通過研究與競(jìng)爭(zhēng)對(duì)手競(jìng)爭(zhēng)激烈的流行應(yīng)用程序，我們看到了不斷的、永無止境的用戶爭(zhēng)奪戰(zhàn)所帶來的解決方案。

此外，每個(gè)應(yīng)用程序都有自己的不同之處：我們不會(huì)為同一個(gè)問題找到兩個(gè)相同的解決方案。

找出哪些設(shè)計(jì)解決方案促進(jìn)了轉(zhuǎn)換也需要一些推論。我們將保持它的簡(jiǎn)單，并看看在他們的領(lǐng)域占主導(dǎo)地位的應(yīng)用程序。然后，我們將嘗試突出他們的最佳解決方案，以定義完美的應(yīng)用程序主頁的關(guān)鍵需求。

REVOLUT：給用戶呈現(xiàn)他們真正想看的內(nèi)容

當(dāng)我第一眼看到 Revolut 的主頁時(shí)，我能看到所有我想看到的信息。

似乎這么說不太有說服力（畢竟主頁呈現(xiàn)的信息確實(shí)不少，當(dāng)然會(huì)覺得什么都能看到），但是我想強(qiáng)調(diào)的是：我之所以喜歡這個(gè)應(yīng)用而不是其他應(yīng)用的最重要的原因就是，我能第一眼就知道我得余額，能在第一時(shí)間看見我上次的消費(fèi)記錄。

當(dāng)我們打開一個(gè)應(yīng)用的時(shí)候，就應(yīng)該是這樣：一根指頭都不用動(dòng)，就能看到我想要的東西。同時(shí)，次要的功能在界面上也能迅速找到和使用，只需輕輕的點(diǎn)擊和滑動(dòng)就能實(shí)現(xiàn)我的需求——比如：我只需要輕輕的下滑一下就能看到完整的歷史交易記錄，而在這個(gè)時(shí)候，按月份查看的切換Tab會(huì)出現(xiàn)。這樣做不僅僅節(jié)省了屏幕空間，提高了利用率，還能讓用戶感知到這個(gè)切換功能的存在，非常高明的做法。

更加值得稱贊的是，每個(gè)功能都完美的處于它們應(yīng)該存在的地方，例如：“充值”和“提現(xiàn)”按鈕，我覺得他們應(yīng)該挨著“余額”，以便于我操作，結(jié)果真的它們就在那。所以，這樣的設(shè)計(jì)避免了我去浪費(fèi)時(shí)間尋找它們?cè)谀摹慕怄i屏幕到打開 Revolut 實(shí)現(xiàn)我的需求，這中間的過程一氣呵成沒有任何阻礙，我一直都在做我想做的事。

TRIPADVISOR：讓你的應(yīng)用更加友善

在UX Studio，我們給那些擁有五花八門各種功能的應(yīng)用取了個(gè)外號(hào)——星際驅(qū)逐艦。這些巨大又沉重的功能在很多情況下并沒什么問題，功能也很正常。但是，在新手或首次使用者的眼里，還是喜歡更輕量、更有親和感的東西。

這就是應(yīng)用體量過大的“肥胖癥”，功能越多就越會(huì)讓用戶迷失，不知道做什么。因此，不論你的應(yīng)用體量多大，都應(yīng)該讓功能更加清晰，可用性更高。

TripAdvisor就做得挺好，但同時(shí)它也是一個(gè)功能很多的大型應(yīng)用。你可以搜索酒店、旅游景點(diǎn)，預(yù)訂餐館的位置，寫評(píng)論，做星級(jí)評(píng)價(jià)，分享照片等等。對(duì)了，它還有個(gè)論壇。

也許你會(huì)覺得用戶看到這么多功能可能會(huì)感到恐慌然后關(guān)掉應(yīng)用，但是實(shí)際上并沒有，這就要提到這個(gè)主頁設(shè)計(jì)的精妙之處了，也是關(guān)鍵所在——設(shè)計(jì)者將那些功能組織排列成一種看上去像常見的社交信息流的的樣子，只不過多了點(diǎn)額外的小東西在上面。

我們完全可以把應(yīng)用做得更友好，把功能整合成組放在那些我們熟悉常用的功能邊上，這樣我們的應(yīng)用就是一個(gè)又熟悉又方便的工具，而不是一把什么功能都有的巨大瑞士軍刀（里面還有迷宮）。

Airbnb：興奮槍

當(dāng)我想去國(guó)外度假的時(shí)候，打開 Airbnb，不知不覺就在它的主頁上花費(fèi)了好幾個(gè)小時(shí)。盡管不是連續(xù)瀏覽，但是它一直在給我建議，讓我無法決定。我將它這種方式稱之為“興奮槍”。

研究表明：較少的選擇會(huì)讓我們更愉悅一些。

從理論和技術(shù)上講，無限信息流（Airbnb 是房屋清單）會(huì)讓決策變得更加困難。盡管如此，它還是成功的抓住了我的心思，我使用它瀏覽了幾十分鐘而沒有關(guān)閉。更加有意思的是，我不會(huì)因?yàn)樗o我呈現(xiàn)的信息太多而覺得它不好，相反我會(huì)怪自己花了這么多時(shí)間還沒有做好決定。

所以，它們的策略就是：用精心挑選的優(yōu)質(zhì)內(nèi)容來淹沒用戶，如果再將這些內(nèi)容中最重要的東西再提煉出來，并且配上一張漂亮的圖片。用戶并不會(huì)因此不快，也不會(huì)超出用戶預(yù)期，只會(huì)保持用戶不停的瀏覽下去。

DUOLINGO——讓你的主頁獨(dú)特和有吸引力

毫無疑問，每個(gè)自學(xué)語言的人都知道 Duolingo 這款應(yīng)用。

2年前我就關(guān)注過這款應(yīng)用，直到上個(gè)月我再次打開它時(shí)，發(fā)現(xiàn)開發(fā)者又在原本獨(dú)特的設(shè)計(jì)中又加了更多有趣的內(nèi)容，這令我十分驚喜。頁面上每個(gè)元素都像一件小小精致的藝術(shù)品，然后它們又聚在一起組成了一幅美妙的景象。說實(shí)話，它再次激勵(lì)我去重溫那些早被我拋在腦后的荷蘭語知識(shí)。我只能承認(rèn)是它的設(shè)計(jì)征服了我。

Duolingo 還做了另外一個(gè)巧妙的設(shè)計(jì)。主頁給我呈現(xiàn)了一個(gè)視覺上的“冒險(xiǎn)任務(wù)”——一個(gè)游戲化的設(shè)計(jì)，我能看到所有我面對(duì)的冒險(xiǎn)任務(wù)，這就導(dǎo)致我想去研究“升級(jí)”技能。

這個(gè)主頁讓學(xué)習(xí)語言（一件非常抽象和困難的事情），變得易于量化學(xué)習(xí)成果，這就讓學(xué)習(xí)語言這件事變得更加簡(jiǎn)單易上手。當(dāng)然不是所有應(yīng)用都適合采用這種方式，但讓主頁能跟用戶產(chǎn)生聯(lián)動(dòng)肯定會(huì)更加吸引用戶。

WOLT——給用戶制造驚喜

作為一名設(shè)計(jì)師，我總是渴望做出高水準(zhǔn)的設(shè)計(jì)。我也希望在設(shè)計(jì)作品時(shí)不會(huì)被外界束縛，但是我們還是要面對(duì)代碼的實(shí)現(xiàn)難度和技術(shù)邊界。

然而，食品配送公司 Wolt 卻突破了我所說的那些限制，并創(chuàng)造了一些獨(dú)一無二的設(shè)計(jì)。地圖淡入淡出的效果，精美的插圖與服務(wù)信息匹配的方式，以及隱藏的城市選擇器彈框，都讓這個(gè)應(yīng)用的主頁脫穎而出。

把 Wolt 作為我選擇的最后一個(gè)范例還有一個(gè)原因，它的主頁展示了它能做些什么，并且完美的將信息分組、定位。與此同時(shí)，它也提供了無限的信息流去吸引你瀏覽，讓你沉浸其中。

對(duì)于頭一次使用這些應(yīng)用的用戶，以上的這些設(shè)計(jì)理念肯定會(huì)讓他們驚掉下巴，并且用戶再次使用它們的幾率也很大（比如我，肯定會(huì)再次使用）。所以，我們這一課的意義就出來了：把這些“規(guī)則”深深的記在腦海里，去醞釀成熟，當(dāng)你再去設(shè)計(jì)一個(gè)主頁的時(shí)候，完美的設(shè)計(jì)則會(huì)呼之欲出。

原作者 | Sándor Zelenka

原文地址 | https://uxstudioteam.com/ux-blog/category/ux-design-methods/

編譯者 | 莫莫 上海-用戶體驗(yàn)設(shè)計(jì)師（微信ID：D_emon）

編輯整理 | 三分設(shè)翻譯小組

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議