對網站改版的一些思考

對網站改版的一些思考

對網站改版的一些思考,觀點,晚安野貓子,原創文章站酷網,中國設計師互動平台。

文章關鍵詞

信息架構、設計目標、走查

(閱讀本文需15分鐘)

 

 

一、項目背景

(有點囉嗦,嫌長可以跳過)

 

前陣子接了一個活,是對惠州的政府類型網站進行UI改版。設計是附贈的,主要的合同當時並不是以設計為主,但是還差這項工作就要完成驗收了。這個工作去年就做過一次優化,當時還有去惠州政府參加會議有講述是怎麼思考的,甲方也挺認可對網站修改的意見。但因為開發不是由我們公司負責,技術聽到我的建議都是一直在反駁我,很明顯他們也不想增加工作量吧。

 

這一年的時間,我再看到這個網站時已經有了不同的看法和思考方式。之前主要是一些表面的感受,這個網站除了不夠美觀比較老舊,還有一些明顯的問題。但是這次我嘗試了使用信息架構圖去還原整個網站,我發現了一些根本性的問題。於是發現這個問題後我很快就跟領導溝通。我說這個網站如果只是改樣式,解決不了它存在的問題,修改的程度也很有限,大概也只能從3分改到4、5分的樣子;但是如果改結構,不亞於重新改版,畢竟也是4、5年前的網站設計,對於我們投入成本必然會增加。

 

於是我先整理了一份文檔去描述問題,由於不是由我當面主講。是由一個不懂產品開發的妹紙去講,我需要用非常通俗的語言去給她講述為什麼要這麼修改。把她講明白了,她在會議上再跟那邊的領導講。後來妹紙跟我說,領導聽到了很滿意,決定要大改! ! !

 

我覺得能把你的東西用很簡單易懂跟一個小白講明白,本身也是一件非常有意思的事情。我們做設計不就是這樣,讓用戶能明白我們的產品是乾嘛的,怎麼用。在極力想讓我的同事明白,這篇文檔,我寫的很簡單易懂直白,這樣客戶也能聽懂我想要表達的意思。再和她溝通講述時,我嘗試了很多方式,所以我對整個網站模塊又有了新的認知。

 

好了,囉嗦完畢。正文。

 

二、網站模塊剖析

1.網站的定義

一般對網站的定義,是功能的集合。由頂部導航+首頁(重要功能模塊)+搜索+子級頁面組成。

undefined

2.核心——頂部導航

我認為,網站最核心的就是它的信息架構——頂部導航。當網站褪去它的外殼,就是它在支撐整個網站。它決定了用戶到達每個目標的路徑長短。如果這裡沒有做好,用戶就不能在這裡發現網站有什麼。除非用戶像我一樣,去建一個信息架構圖。但那樣就本末倒置了,我們應該審視信息架構圖,去佈局設計界面,去讓用戶快速獲取整個網站有什麼。

 

設計目標:

•導航清晰——文字含義清晰,分類明確

•完整——包含網頁全部功能

•簡單易懂——使用更簡潔易懂的文字

走查一:


導航功能設計是否能讓用戶在非常短時間了解網頁的全部功能,或者快速找到想要的功能。


 

優化前vs優化後:

1.重新將導航內容合理分類,使之更簡潔,分類明確。

2.點擊一級分類標籤,展示二級標籤內容,可以快速告訴用戶這個模塊下有什麼功能,縮短用戶路徑;

3.重要功能可以提供簡短文字介紹,幫助用戶理解功能模塊;

4.還可以添加一下熱門標籤,幫助用戶快速識別熱門服務;

5.信用服務大廳模塊,增加簡易文字描述,使功能標籤更易懂。

3.亮點——首頁(重要功能模塊)

重要功能模塊是首頁重要的組成部分。可根據板塊重要性從上而下排列,因為用戶瀏覽是從上至下的。在這裡可以展示你想要告訴用戶的,或者網站的主要功能模塊,或者用戶最常用的功能。

設計目標:

•信息等級——根據重要等級從上而下排列

•可視化——根據模塊內容特性,使內容更好展示

•風格定位——符合品牌調性

走查二:

首頁功能模塊視覺傳達效果是否與其板塊的重要性保持一致。

4.體驗——搜索功能

搜索是不用去導航裡找目標的最快方式。也是在海量信息中快速檢索到匹配信息的方式。如何幫助用戶快速精確到結果是搜索的最重要目標。

 

設計目標:

•簡單易用——容易使用

•精確結果——能夠快速匹配結果

走查三:

搜索功能是否能幫助用戶快速且精準找到想要的信息。

我們可以看到,搜索結果非常多。搜索結果沒有具備篩選功能(例如文章類型、發布部門、發佈時間等),用戶不能通過模糊搜索的情況下,用戶無法從大量的模糊搜索結果中更精確找到自己需要的信息或服務。

 

5.可視化——子級頁面

根據內容級功能可視化展示,同樣需要考慮信息等級。按重要程度去設計。

設計目標:

•信息等級——根據重要等級佈局

•可視化——根據板塊內容特性,使內容更好展示

走查四:

子級頁面視覺傳達效果是否與其功能的重要性保持一致

 

 

(原文鏈接附上https://shimo.im/docs/RDqvPTPwTtDXXt6Y

 

三、案例展示

設計改版方案如下:

undefined

undefined

 

 

四、總結

 

依此類推,app與網站也是一樣的。它的核心也是信息架構,當你不知道怎樣去優化現有的產品時,把它的架構圖整理一下,很多問題就會暴露出來。對於每個模塊的設計目標也有了明確的方向,這樣在完成設計的時候不會容易陷入個人喜好,有更多設計理論支撐。

 

嘗試建立設計目標,建立屬於自己的走查。回顧一下本文的設計走查:

•走查一:導航功能設計是否能讓用戶在非常短時間了解網頁的全部功能,或者快速找到想要的功能。

•走查二:首頁功能模塊視覺傳達效果是否與其模塊的重要性保持一致。

•走查三:搜索功能是否能幫助用戶快速且精準找到想要的信息。

•走查四:子級頁面視覺傳達效果是否與其功能的重要性保持一致。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。