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