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