
提到工具型網站,我們首先會有個疑問:年夜千收集網站眾生,事實什么樣的網站才算是工具型網站?它的特征是什么,與其他網站有什么分歧? 年夜網上搜索相關信息,體味到關于該名辭書具體詮釋并沒有明晰的說法。
為了便利后續的研究,在此先連系之前同窗們的研究成不美觀,綜合清算一下,供給工具型網站的界說版本,供參考:
——所謂工具型網站,顧名思義就是修建在互聯網上的工具,是指為輔佐人們完成某一特定規模的方針需求而供給的、具有必然操作流程、以完成該方針使命為首要目的、基于收集應用的工具手段。
它的首要特征在于:
– 以完成一項或多項使命為目的
Fork——配圖創蚵瞠品牌形象加分
– 注重操作流程指導
– 強調快速完成使命
– 非完成方針的獨一手段,只是協助用戶更高效完成該方針
同時,良多工具型網站還出格配備一個自力門戶,該門戶以信息揭示為主,用來專門介紹工具的價值、動態等,并供給登錄或下載進口。因為這種門戶與工具頁指向的高度一體性,我們也將它歸納到工具型網站典型疇中來,稱之為工具型網站門戶(或工具性網站首頁)。
為了輔佐我們對工具型網站形成更直不美觀的概念,可以按照網軍功能將網站區分為內答應網站和工具型網站。關于工具型網站與內答應網站的對比區別,已有同窗作了較具體的闡述(如想進一步體味可查看相關文章),在此不贅述。
提到招行人們會想到向日葵,提到騰訊人們會想到企鵝,提到Mailchimp人們會想到郵遞員monkey,此刻提到Fork,人們應該會想到這位可愛的坐在劃子上拿叉的老漁夫了。也許它的logo不起眼,可是有了這個代言人的陪襯,這個工具,其實讓人難忘了。如不美觀你再細心翻看一下,會發此刻幾個內頁中,都有與這個年夜海主題相聯系關系的插圖設計。看到這些,即使你是一路人,會不會好奇到禁不住點download濫暌姑用?
典型的工具性網站有: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。

作為工具型網站,工具自己帶給用戶的價值當然能抉擇網站的成敗,但門戶亦像是產物的櫥窗,吸引訪客快速體味產物的用途、價值,并進而使用。是以門戶的成功與否,也對網站有著主要的影響。若何在色彩、結構、或配圖方面闡揚創意,讓門戶盡量吸引眼球,獲得訪客的青睞,是視覺設計師們的一年夜課題。而下面的Ford,在配圖創意方面算是一個典型,它顯著的情景式設計的特點,讓人面前一亮。
值得一提的是,該門戶頁面框架上使用了風行的響應式web設計模式,在瀏覽器縮放、手機訪謁時均有版式微調,浮現了視覺傳達的完整性。

關于工具型網站門戶的體驗設計,小伊萬同窗對此有較深切的研究,參考此處。