經(jīng)驗(yàn)分享：打造優(yōu)秀工具型網(wǎng)站的3個(gè)大招！

如今工具型網(wǎng)站越來(lái)越多（58同城、云盤(pán)、產(chǎn)品首頁(yè)等），在不斷打磨細(xì)節(jié)的過(guò)程里，有童鞋總結(jié)了工具型網(wǎng)站的設(shè)計(jì)目標(biāo)和3種設(shè)計(jì)框架，全篇的思路非常值得學(xué)習(xí)，同學(xué)們除了學(xué)習(xí)專(zhuān)業(yè)知識(shí)，也可以看看作者解決問(wèn)題的邏輯，對(duì)職業(yè)發(fā)展會(huì)有幫助。

什么是工具型網(wǎng)站

我們先從wikipedia上了解三組概念：

工具：是指能夠方便人們完成工作的器具。

application：用來(lái)幫助用戶(hù)完成某個(gè)單獨(dú)的或是一組相關(guān)的工作的計(jì)算機(jī)軟件。

web application：指通過(guò)使用Web和Web瀏覽器技術(shù)，跨越網(wǎng)絡(luò)完成一個(gè)或多個(gè)任務(wù)的應(yīng)用程序，通常需要使用Web瀏覽器。

由此可見(jiàn)，應(yīng)用就是計(jì)算機(jī)領(lǐng)域的工具，工具型網(wǎng)站可定義為承載了一個(gè)或多個(gè)網(wǎng)頁(yè)應(yīng)用的網(wǎng)站。它專(zhuān)注于讓用戶(hù)完成一系列的任務(wù)，如注冊(cè)、支付等。

首頁(yè)的用戶(hù)需求

首頁(yè)的用戶(hù)大體說(shuō)來(lái)可分為三類(lèi)：不了解的新用戶(hù)、有興趣的新用戶(hù)、老用戶(hù)。

對(duì)于新用戶(hù)而言，他們勢(shì)必會(huì)問(wèn)到這些問(wèn)題：

• 我在這能做些什么？
• 這個(gè)網(wǎng)站能提供哪些對(duì)我很重要的東西？
• 對(duì)于已經(jīng)有興趣的用戶(hù)也會(huì)有些其他的疑問(wèn)：
• 我應(yīng)該怎么開(kāi)始？
• 我是否必須注冊(cè)？如果是，應(yīng)該怎樣注冊(cè)？

總得來(lái)說(shuō)，首頁(yè)應(yīng)該解答新用戶(hù)的疑惑并且?guī)椭麄冋业焦δ艿娜肟冢欢鴮?duì)于老用戶(hù)，則需要更明顯、快捷的登錄入口。

首頁(yè)的目標(biāo)

《designing for the social web》一書(shū)將用戶(hù)的使用分為幾個(gè)步驟：不了解——感興趣——第一次使用——常規(guī)使用——有情感。而首頁(yè)對(duì)于前面三個(gè)步驟至關(guān)重要！

這樣看來(lái)，首頁(yè)有兩個(gè)目標(biāo)：

1. 讓不了解的用戶(hù)了解網(wǎng)站并產(chǎn)生興趣，最終促成用戶(hù)使用。
2. 讓有興趣的用戶(hù)盡快開(kāi)始使用。

首頁(yè)的設(shè)計(jì)

在實(shí)際工作中我們會(huì)碰到幾種不同類(lèi)型的工具型網(wǎng)站，針對(duì)其網(wǎng)站內(nèi)容的不同，其首頁(yè)的表現(xiàn)形式也大不一樣。

集中應(yīng)用型

這類(lèi)網(wǎng)站本質(zhì)上是一組或者多組web app，功能多且相對(duì)簡(jiǎn)單，不會(huì)產(chǎn)生大量用戶(hù)數(shù)據(jù)。

1. 核心結(jié)構(gòu)

將使用最多的功能展示在首頁(yè)對(duì)于用戶(hù)來(lái)說(shuō)就是最快的入口。用戶(hù)通過(guò)logo、 banner、網(wǎng)站聲明等了解網(wǎng)站性質(zhì)，然后就是找到自己要的功能。

2. 注冊(cè)/登錄模塊

因?yàn)橛脩?hù)不想分散精力去記起用戶(hù)名和密碼，或者是他們太專(zhuān)注在自己要做的事情上，原則上只在必要時(shí)才讓用戶(hù)登錄。但如果大部分功能都需要先登錄，那么在首頁(yè)直接展示登錄表單是有必要的。

3. 案例

58同城有兩級(jí)目錄：城市目錄、功能目錄。用戶(hù)通過(guò)這兩級(jí)目錄很容易找到想要的功能。但使用這些功能大都不用注冊(cè)，所以首頁(yè)并沒(méi)有明顯的登錄模塊。

騰訊充值中心

首頁(yè)的核心模塊依舊在目錄結(jié)構(gòu)，用戶(hù)由此了解網(wǎng)站主要業(yè)務(wù)以及如何開(kāi)始自己的任務(wù)。

去除一些運(yùn)營(yíng)性需求，可以得到一個(gè)更加純粹的充值網(wǎng)站：

數(shù)據(jù)管理型

這類(lèi)網(wǎng)站本質(zhì)上一個(gè)大的Web app。功能流程復(fù)雜，會(huì)產(chǎn)生大量數(shù)據(jù)，往往承載了強(qiáng)大的數(shù)據(jù)管理功能。

1. 核心框架

為了方便用戶(hù)掌控及管理自己創(chuàng)建的內(nèi)容，首頁(yè)的策略一般會(huì)先引導(dǎo)用戶(hù)創(chuàng)建賬戶(hù)或下載客戶(hù)端（下載客戶(hù)端的下一步也是注冊(cè)），然后再開(kāi)始任務(wù)。為了說(shuō)服用戶(hù)開(kāi)始任務(wù)，它一般會(huì)包括以下幾個(gè)模塊：

價(jià)值聲明：說(shuō)明網(wǎng)站提供的功能及意義，快速打消訪問(wèn)者疑慮。

投入產(chǎn)出：告訴用戶(hù)能得到什么，使訪問(wèn)者對(duì)產(chǎn)品的使用有預(yù)期，并建立信心。

視頻介紹：讓用戶(hù)快速全面地了解網(wǎng)站。

權(quán)威推薦/典型用戶(hù)：讓用戶(hù)產(chǎn)生同理心，增強(qiáng)對(duì)產(chǎn)品的信賴(lài)。

行動(dòng)號(hào)召：當(dāng)訪問(wèn)者產(chǎn)生興趣時(shí)，適時(shí)地讓他們開(kāi)始使用。

這些模塊其實(shí)分三個(gè)等級(jí)層層深入地說(shuō)服用戶(hù)使用產(chǎn)品：

盡管列出了這些模塊，但實(shí)際情況中并不都必要，最終得看用戶(hù)對(duì)產(chǎn)品的信心。Evernote在等級(jí)一就能說(shuō)服用戶(hù)，dropbox的頁(yè)面則只有一個(gè)視頻介紹。

1. 注冊(cè)/登錄模塊

這類(lèi)網(wǎng)站注冊(cè)和登錄模塊都非常重要，一方面已注冊(cè)用戶(hù)數(shù)一般遠(yuǎn)遠(yuǎn)大于新用戶(hù)數(shù)，另一方面首頁(yè)很大一部分程度是為了注冊(cè)的，老用戶(hù)有固定的入口即可。但在首頁(yè)我們需要強(qiáng)調(diào)哪一個(gè)？

這個(gè)問(wèn)題更多地取決于產(chǎn)品的商業(yè)目標(biāo)。受產(chǎn)品策略的影響，同樣是擁有大量已注冊(cè)用戶(hù)且用戶(hù)登錄頻繁的產(chǎn)品，gmail的首頁(yè)強(qiáng)調(diào)登錄，而Facebook的首頁(yè)則強(qiáng)調(diào)注冊(cè)。我們也看到115網(wǎng)盤(pán)和華為網(wǎng)盤(pán)的首頁(yè)明顯就不同：

但無(wú)論如何，登錄模塊最好不要跳轉(zhuǎn)頁(yè)面，否則會(huì)增加老用戶(hù)的操作成本。

2. 案例

mailchimp

首頁(yè)包含價(jià)值聲明、投入產(chǎn)出、視頻介紹、典型用戶(hù)、行動(dòng)號(hào)召等模塊，極力說(shuō)服用戶(hù)開(kāi)始使用產(chǎn)品。

獨(dú)立操作型

這類(lèi)網(wǎng)站往往是一個(gè)幾步就能完成任務(wù)的小型Web app。

1. 核心框架

往往只有幾個(gè)簡(jiǎn)單的控件和操作說(shuō)明就能完成任務(wù)。由于使用成本不高，用戶(hù)也會(huì)很樂(lè)于嘗試使用。

2. 注冊(cè)/登錄

這類(lèi)網(wǎng)站一般不需要注冊(cè)或是簡(jiǎn)單的注冊(cè)，也可以將注冊(cè)需要的內(nèi)容貫穿在任務(wù)操作中從而摒棄注冊(cè)模塊。

3. 案例

Minus

用戶(hù)進(jìn)入頁(yè)面后能很快理解這是個(gè)分享類(lèi)網(wǎng)站，只要將圖片拖入到網(wǎng)頁(yè)中并填寫(xiě)資料即可開(kāi)始使用。

Senduit

簡(jiǎn)單的步驟指引告訴用戶(hù)網(wǎng)站的功能和操作方式，使用時(shí)無(wú)需注冊(cè)。

結(jié)語(yǔ)

網(wǎng)站的首頁(yè)需要回答用戶(hù)一些非常重要的問(wèn)題，才能讓新用戶(hù)愿意使用我們的產(chǎn)品。

本文主要探討了工具類(lèi)網(wǎng)站首頁(yè)的設(shè)計(jì)目標(biāo)以及三種設(shè)計(jì)框架。而在實(shí)際項(xiàng)目中還需對(duì)更具體的場(chǎng)景進(jìn)行分析、考慮運(yùn)營(yíng)性的需求、對(duì)單個(gè)模塊的交互進(jìn)行推敲，最終才能得到一個(gè)能吸引用戶(hù)、留住用戶(hù)的有效首頁(yè)。

特色網(wǎng)站打造全集合：
《打造完美婚禮網(wǎng)站的秘訣》
《推陳出新！政務(wù)網(wǎng)站的重設(shè)計(jì)》

原文地址：cdc.tencent

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量73萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：