走進(jìn)工具型網(wǎng)站——釋義及典型案例
來源:網(wǎng)站推廣 2012-06-06
它的主要特征在于:
– 以完成一項(xiàng)或多項(xiàng)任務(wù)為目的
– 注重操作流程引導(dǎo)
– 強(qiáng)調(diào)快速完成任務(wù)
– 非完成目標(biāo)的唯一手段,只是協(xié)助用戶更高效完成該目標(biāo)
同時(shí),很多工具型網(wǎng)站還特別配備一個(gè)獨(dú)立門戶,該門戶以信息展現(xiàn)為主,用來專門介紹工具的價(jià)值、動(dòng)態(tài)等,并提供登錄或下載入口
提到工具型網(wǎng)站,我們首先會(huì)有個(gè)疑問:大千網(wǎng)絡(luò)網(wǎng)站眾生,究竟什么樣的網(wǎng)站才算是工具型網(wǎng)站?它的特征是什么,與其他網(wǎng)站有什么不同? 從網(wǎng)上搜索相關(guān)信息,了解到關(guān)于該名詞的具體解釋并沒有明確的說法
為了方便后續(xù)的研究,在此先結(jié)合之前同學(xué)們的研究成果,綜合整理一下,提供工具型網(wǎng)站的定義版本,供參考:
——所謂工具型網(wǎng)站,顧名思義就是構(gòu)筑在互聯(lián)網(wǎng)上的工具,是指為幫助人們完成某一特定領(lǐng)域的目標(biāo)需求而提供的、具有一定操作流程、以完成該目標(biāo)任務(wù)為主要目的、基于網(wǎng)絡(luò)應(yīng)用的工具手段由于這種門戶與工具頁指向的高度一體性,我們也將它歸納到工具型網(wǎng)站的范疇中來,稱之為工具型網(wǎng)站門戶(或工具性網(wǎng)站首頁)
為了幫助我們對工具型網(wǎng)站形成更直觀的概念,可以根據(jù)網(wǎng)站功能將網(wǎng)站區(qū)分為內(nèi)容型網(wǎng)站和工具型網(wǎng)站關(guān)于工具型網(wǎng)站與內(nèi)容型網(wǎng)站的對比區(qū)別,已有同學(xué)作了較詳細(xì)的闡述(如想進(jìn)一步了解可查看相關(guān)文章),在此不贅述
典型的工具性網(wǎng)站有:Google系列(搜索、翻譯、文檔、閱讀器…)、財(cái)付通、支付寶、數(shù)據(jù)魔方、salesforce、xero、TA、DNSpod等;
典型的內(nèi)容型網(wǎng)站有:Sina、騰訊網(wǎng)、天涯論壇等
下面就從體驗(yàn)角度,介紹幾個(gè)我比較喜歡的工具型網(wǎng)站典型案例
Google——一致系王道
工具型網(wǎng)站,應(yīng)用最廣泛的應(yīng)該是我們非常熟悉的google系列產(chǎn)品了,如google搜索、翻譯、文檔等等,大部分都是隨著google搜索后逐漸推出的新工具這些工具給網(wǎng)民的互聯(lián)網(wǎng)生活提供了極大的便利
料想如此多的產(chǎn)品線,會(huì)很容易因?yàn)楣δ軐傩缘牟町惗a(chǎn)生不同的視覺風(fēng)格但是我們卻看到google在多產(chǎn)品體系下的視覺風(fēng)格,無論導(dǎo)航條、色彩體系、基本布局結(jié)構(gòu)等方面都非常統(tǒng)一,如所有背景層都是黑白灰色系、所有的新建功能都是醒目紅按鈕、所有功能菜單都居左等
這種一致性極大減少了用戶對新產(chǎn)品的認(rèn)知、學(xué)習(xí)成本,達(dá)到自來熟的境界~體現(xiàn)了google體驗(yàn)團(tuán)隊(duì)在品牌形象和體驗(yàn)規(guī)范方面強(qiáng)大的制定、執(zhí)行能力~
Xero——小清新卻很實(shí)用
下面這個(gè)Xero,是一個(gè)典型的小清新,我對它的喜愛,來自它的簡潔而不簡單,美麗卻不喧嘩,非常符合該網(wǎng)站的功能定位
Xero是一個(gè)功能比較全面的針對小型企業(yè)的記賬工具,產(chǎn)出包括現(xiàn)金簿,總賬,發(fā)票和報(bào)告作為一個(gè)記賬類工具網(wǎng)站,用戶最關(guān)心的訴求當(dāng)然是安全、準(zhǔn)確,所以Xero非常敏銳的在門戶和產(chǎn)品頁中統(tǒng)一使用了中亮度藍(lán)+綠色來表達(dá),同時(shí)配圖、結(jié)構(gòu)上橫平豎直,四平八穩(wěn),將安全、可信賴的氛圍營造到極致
在信息展示方面,Xero門戶中具有web2.0的典型特征,比如大量留白、大小字體的對比應(yīng)用等;而在產(chǎn)品頁中,則將各控件元素視覺盡量作減法,例如,表格不要縱線框、chart圖色彩統(tǒng)一、按鈕質(zhì)感簡化統(tǒng)一、所有的可點(diǎn)擊文字包括普鏈表頭頁簽等全部統(tǒng)一為藍(lán)色、等等,做這些的目的,就是為了讓大量的文字?jǐn)?shù)據(jù)信息不被多余的細(xì)節(jié)干擾,讓主題一目了然,幫助用戶在干凈、舒暢的環(huán)境中快速完成任務(wù)
該產(chǎn)品曾被Nielsen Norman Group列入10 Best Application Uis
Fork——配圖創(chuàng)意為品牌形象加分
作為工具型網(wǎng)站,工具本身帶給用戶的價(jià)值固然能決定網(wǎng)站的成敗,但門戶亦像是產(chǎn)品的櫥窗,吸引訪客快速了解產(chǎn)品的用途、價(jià)值,并進(jìn)而使用因此門戶的成功與否,也對網(wǎng)站有著重要的影響如何在色彩、布局、或配圖方面發(fā)揮創(chuàng)意,讓門戶盡量吸引眼球,獲得訪客的青睞,是視覺設(shè)計(jì)師們的一大課題而下面的Ford,在配圖創(chuàng)意方面算是一個(gè)典型,它顯著的情景式設(shè)計(jì)的特點(diǎn),讓人眼前一亮
提到招行人們會(huì)想到向日葵,提到騰訊人們會(huì)想到企鵝,提到Mailchimp人們會(huì)想到郵遞員monkey,現(xiàn)在提到Fork,人們應(yīng)該會(huì)想到這位可愛的坐在小船上拿叉的老漁夫了也許它的logo不起眼,但是有了這個(gè)代言人的襯托,這個(gè)工具,實(shí)在讓人難忘了如果你再仔細(xì)翻看一下,會(huì)發(fā)現(xiàn)在幾個(gè)內(nèi)頁中,都有與這個(gè)大海主題相關(guān)聯(lián)的插圖設(shè)計(jì)看到這些,即使你是一路人,會(huì)不會(huì)好奇到忍不住點(diǎn)download來用用?
值得一提的是,該門戶頁面框架上使用了流行的響應(yīng)式web設(shè)計(jì)模式,在瀏覽器縮放、手機(jī)訪問時(shí)均有版式微調(diào),體現(xiàn)了視覺傳達(dá)的完整性
關(guān)于工具型網(wǎng)站門戶的體驗(yàn)設(shè)計(jì),小伊萬同學(xué)對此有較深入的研究,參考此處
文章編輯: 365webcall在線咨詢工具(www.365webcall.com)
我的評論
| 登錄賬號： | 密碼： | 快速注冊 | 找回密碼 |  |
