如(rú)今工(gōng)具型網站(zhàn)越γ∞×÷來(lái)越多(duō)（58同城(chéng)、雲盤、産品首頁等），在不(•↔bù)斷打磨細節的(de)過程裡(lǐ)，有(yǒu)童鞋總結了(le)工(gōn✔♦¶±g)具型網站(zhàn)的(de)設計(jì)目标和(hé)3種設計(jì)框架，全♠φ>×篇的(de)思路(lù)非常值得(de)學習(xí)，同學們除了σ♠≥ (le)學習(xí)專業(yè)知(zhī)識，也(yě)可(kě)以看(kΩ™'γàn)看(kàn)作(zuò)者解決問(wèn₩&δ)題的(de)邏輯，對(duì)職業(yè)發展會(huì)有(y  ǒu)幫助。
什(shén)麽是(shì)工(gōng‍✘ )具型網站(zhàn)

　　先誠科(kē)技(jì)先從(cóng)wikipe★δdia上(shàng)了(le)解三組概念：

　　工(gōng)具：是(shì)指能(néng)夠方便人(rén)們完成工(gōng♦γ)作(zuò)的(de)器(qì)具。

　　application：用(yòng)來(lái)幫助用(yòng)戶完成某個(gè)單獨α¥σ的(de)或是(shì)一(yī)組相(xiàng)關的(de)工(gōn§Ωε<g)作(zuò)的(de)計(jì)算(suàn)機(jī)軟件(jiàn)。

　　web application：指通(tōng)過使用(yòng)Web和(hé)Web浏覽器↑σ (qì)技(jì)術(shù)，跨越網絡完 ↓↓♦成一(yī)個(gè)或多(duō)個(gè)任務的(de)應用↓ $(yòng)程序，通(tōng)常需要(yào)使用(yòn§₽‍g)Web浏覽器(qì)。

　　由此可(kě)見(jiàn)，應用(yòng)就(jiù)是(sh≤★≥₽ì)計(jì)算(suàn)機(jī)領域的(de)工(gōng)具，工(gōng)具型網<±站(zhàn)可(kě)定義為(wèi)承載了(l ₩™e)一(yī)個(gè)或多(duō)個(gè)網頁應用(yòng)的(• ≈de)網站(zhàn)。它專注于讓用(yòng)戶完成一(yī)系列的(de)任務，如(r÷‍ú)注冊、支付等。
　　首頁的(de)用(yòng)戶需求

　　首頁的(de)用(yòng)戶大(dà)體(tǐ)說(sε≤↑huō)來(lái)可(kě)分(fēn)為(wèi)三類：不(bù)了(lγ&✘e)解的(de)新用(yòng)戶、有(yǒu)興趣的(≤$de)新用(yòng)戶、老(lǎo)用(yòng)戶。

　　對(duì)于新用(yòng)戶而言，他(tā)們勢必會(huì)∞ ♦問(wèn)到(dào)這(zhè)些(xiē)問(wèn)題： πε♣

　　總得(de)來(lái)說(shuō)，首頁£ ‍ 應該解答(dá)新用(yòng)戶的(de)疑"₩£惑并且幫助他(tā)們找到(dào)功能(néng)的(de)入口；而∑™≠₩對(duì)于老(lǎo)用(yòng)戶，則需要(‌↓yào)更明(míng)顯、快(kuài)捷的(de)登錄入口。
首頁的(de)目标

　　《designing for the social we★>πb》一(yī)書(shū)将用(yòng)戶的(de)使用(yòng)分(fēn) ♥γ為(wèi)幾個(gè)步驟：不(bù)了(le)解——感興趣——第一(yī)次↓₹ε使用(yòng)——常規使用(yòng)——有(yǒu)情感。而首頁對(du¶§ì)于前面三個(gè)步驟至關重要(yào)！

　　這(zhè)樣看(kàn)來(lái)，首頁有(yǒu)兩個(gè)目标：

    　　讓不(δ↕bù)了(le)解的(de)用(yòng)戶了(le)解網站(zhàn)并産生(shēng₽♣≥≠)興趣，最終促成用(yòng)戶使用(yòng)。
    　　讓有(yǒ&∑£u)興趣的(de)用(yòng)戶盡快(kuài)↑≈開(kāi)始使用(yòng)。

　　在實際工(gōng)作(zuò)中先誠科(kē)技(jì)™®÷©會(huì)碰到(dào)幾種不(bù)同類型的(de)工(gōng)具型網 ™≈站(zhàn)，針對(duì)其網站(zhàn)內(nèi)容的(de)不(b ∞ù)同，其首頁的(de)表現(xiàn)形式也(♠ε™yě)大(dà)不(bù)一(yī)樣。
集中應用(yòng)型

　　這(zhè)類網站(zhàn)本質上(shàng) &£是(shì)一(yī)組或者多(duō)組web aΩφpp，功能(néng)多(duō)且相(xiàng)對(duì)簡單，σδ€↑不(bù)會(huì)産生(shēng)大(dà)量用(yòng)戶數(sΩλ¥hù)據。

1. 核心結構

　　将使用(yòng)最多(duō)的(de)功能(néng)展示在首頁對(duì)于用≈π&(yòng)戶來(lái)說(shuō)就(jiù)₹Ω£✔是(shì)最快(kuài)的(de)入口。用(yòng)戶通(tōng)過logo、 bannδ✘÷er、網站(zhàn)聲明(míng)等了(le)解網站(zhàn)性質，然後就(j₹¥‍iù)是(shì)找到(dào)自(zì)己要(yào)的(de)功能(néng)。

2. 注冊/登錄模塊

　　因為(wèi)用(yòng)戶不(bù)想分(fēn)散 ≥ε精力去(qù)記起用(yòng)戶名和(hé)密碼，或者是(shì)他(€♠©★tā)們太專注在自(zì)己要(yào)做(zuò)的(de)事(shì≤∞ )情上(shàng)，原則上(shàng)÷↓隻在必要(yào)時(shí)才讓用(yòng)戶登錄。但(dππ✔↕àn)如(rú)果大(dà)部分(fēn)功能(néng)都(dōu)需要(yào)先登錄，那₹♣(nà)麽在首頁直接展示登錄表單是(shì)有(yǒu)必要(yào)的(de)。

3. 案例

　　58同城(chéng)有(yǒu)兩級目錄：城(chéng)市(shì)目錄、功能(¶£εnéng)目錄。用(yòng)戶通(tōng)過這(zhè)兩級目錄很(hěn)σ♠容易找到(dào)想要(yào)的(de)Ω→  功能(néng)。但(dàn)使用(yòng)這(zhè)些(xiē)功能(néng)大(dà) €都(dōu)不(bù)用(yòng)注冊，所以首頁并沒有(¥≈₩↓yǒu)明(míng)顯的(de)登錄模塊。

騰訊充值中心

　　首頁的(de)核心模塊依舊(jiù)在目π♣♥錄結構，用(yòng)戶由此了(le)解網站(γ♦¥ zhàn)主要(yào)業(yè)務以及如(rú)何開(kāi)♣↓α始自(zì)己的(de)任務。

　　去(qù)除一(yī)些(xiē)運•↔≠♣營性需求，可(kě)以得(de)到(dào)一(yī)個(gè)更加純粹的(de)充值網站(zh↑↔àn)：

數(shù)據管理(lǐ)型

　　這(zhè)類網站(zhàn)本質上(shàα¥&♥ng)一(yī)個(gè)大(dà)的(de)We'♠b app。功能(néng)流程複雜(zá)，會(huì)産生(shēng)大(dà× ←♥)量數(shù)據，往往承載了(le)強大(dà)的(de)數(shù)據管理(lǐ)£¶↑§功能(néng)。

1. 核心框架

　　為(wèi)了(le)方便用(yòng)戶掌控及管←↔✔δ理(lǐ)自(zì)己創建的(de)內(nèi)容，首頁的(∞‍φde)策略一(yī)般會(huì)先引導用(yòng)戶創建賬戶或下(xi'¥♥à)載客戶端（下(xià)載客戶端的(de)下(xià)一(yī)‍" 步也(yě)是(shì)注冊），然後再開(kāi)始任務。為(​£wèi)了(le)說(shuō)服用(yòng)戶開(kāi)始任務，它一(yī)般會(huì)↓$®包括以下(xià)幾個(gè)模塊：

　　價值聲明(míng)：說(shuō)&®<明(míng)網站(zhàn)提供的(de)功能(néng)及 €←意義，快(kuài)速打消訪問(wèn)者疑慮。

　　投入産出：告訴用(yòng)戶能(néng)得(d₹<e)到(dào)什(shén)麽，使訪問(wèn)者對(duì)産品→₹α>的(de)使用(yòng)有(yǒu)預期，并建立信心。

　　視(shì)頻(pín)介紹：讓用(yòng)戶快(k✔ε¥uài)速全面地(dì)了(le)解網站(zhàn)。

　　權威推薦/典型用(yòng)戶：讓用(yòng)戶産生(shēng)同理(lǐ)心，增強對α™×(duì)産品的(de)信賴。

　　行(xíng)動号召：當訪問(wèn)者産生(shēng)興趣時(shí)，适時(s≠♥hí)地(dì)讓他(tā)們開(kāi)始使用(yòng♠€♣)。

這(zhè)些(xiē)模塊其實分(fēn)三個(gè)等級層層深入地(dì)說(shuō)>✔服用(yòng)戶使用(yòng)産品：

　　盡管列出了(le)這(zhè)些(xiē)模塊，但(dàn)實際>♠₩ε情況中并不(bù)都(dōu)必要(yào)，最≤ 終得(de)看(kàn)用(yòng)戶對(duì)産 ¥品的(de)信心。Evernote在等級一(yī)就(jiù)能(néng)說(shuō)服用(y•πβ∑òng)戶，dropbox的(de)頁面則隻有(yǒu)一(yī)個(gè)視(shì)β‌頻(pín)介紹。

1. 注冊/登錄模塊

　　這(zhè)類網站(zhàn)注冊和(hé)登錄模塊都(dōu)非常重要(yàΩ←δγo)，一(yī)方面已注冊用(yòng)戶數(shù)一(yī)般遠±→↓ (yuǎn)遠(yuǎn)大(dà)于新用↔§♣γ(yòng)戶數(shù)，另一(yī)方面δ♦♥首頁很(hěn)大(dà)一(yī)部分(fēn)程度是(shì)為(wè$$$≤i)了(le)注冊的(de)，老(lǎo)用(yòng)戶有(yǒuδ•↓")固定的(de)入口即可(kě)。但(dàn)在首頁先★≠誠科(kē)技(jì)需要(yào)強調哪一(yī)個(gè)？

　　這(zhè)個(gè)問(wèn)題更多(duō)地(dì)取決于産☆£品的(de)商業(yè)目标。受産品策略的(de)影(ε>✘↔yǐng)響，同樣是(shì)擁有(yǒu ¶&γ)大(dà)量已注冊用(yòng)戶且用(yòng)戶登錄頻(pín)繁的(de)産品，gmai✘±l的(de)首頁強調登錄，而Facebook的(de)首頁則強調÷♠注冊。先誠科(kē)技(jì)也(yě)看(kàn)到(dào)115網盤和&₩→±(hé)華為(wèi)網盤的(de)首頁明(míng)顯就(jiù)不(bù)同：

　　但(dàn)無論如(rú)何，登錄模塊∑"最好(hǎo)不(bù)要(yào)跳(tiào)轉頁面，否則會(huì→€)增加老(lǎo)用(yòng)戶的(de)操作(zuò)成本。

2. 案例
　　首頁包含價值聲明(míng)、投入産出、視(shìφ±&)頻(pín)介紹、典型用(yòng)戶、行(xíng)動号召等模塊，極↑€力說(shuō)服用(yòng)戶開(kāi)始使用(yò<"'₹ng)産品。

1. 核心框架
　　往往隻有(yǒu)幾個(gè)簡單的(de)控件(jiàn)和(hé)操作(zu♥£±ò)說(shuō)明(míng)就(jiù)能(néng)完成任務♦δ↑®。由于使用(yòng)成本不(bù)高(gāo)，用(yòng)戶也€♣¶(yě)會(huì)很(hěn)樂(yuè)于嘗試使用(yòng)。

2. 注冊/登錄
　　這(zhè)類網站(zhàn)一(yī)般不(bù)需要(yào)注冊或是(s≈→£hì)簡單的(de)注冊，也(yě)可(‍™<<kě)以将注冊需要(yào)的(de)內(nèi)↔λ©容貫穿在任務操作(zuò)中從(cóng)而摒棄注冊模塊。

3. 案例
　　用(yòng)戶進入頁面後能(néng)很(hěn)快(kuài)理(lǐ)解這σ♣(zhè)是(shì)個(gè)分(fēn)享​✘✘類網站(zhàn)，隻要(yào)将圖片拖入到(d♥♣Ω¶ào)網頁中并填寫資料即可(kě)開(kāi)始使用(yòng)。簡單的(de)步驟指引告訴用™÷™(yòng)戶網站(zhàn)的(de)功能(néng)和(hé)操作(zuò)方式，使用(yòn→¶¥αg)時(shí)無需注冊。