DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網站不是炫技場,設計要為內容服務
網站不是炫技場,設計要為內容服務
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:不讓用戶思考過多的網頁設計思路.

以前經常吃公司旁邊的食堂,人多,排隊。夏天的時候,我們總要找一個靠窗口通風好的地方坐,沒有空調只有風扇,風扇很多,開關都集中在一個地方,應該是方便操作人員統一管理,有時自己頭上的風扇沒開,當我要去開這個風扇時,麻煩來了,很多排的風扇開關,到底哪個是我頭上的呢?

生活中有很多總讓我們感覺莫名其妙,或者停下來需要思考的情況,有時不得不求助,到了互聯網上,可能很多情況發生了也沒什麼求助的方法,只能自己猜,不猜了就只好關掉。

網頁上每項內容都有可能迫使我們停下來,進行不必要的思考。比如內容信息看不懂,操作功能不明確。例如,文案。常見的罪魁禍首是那些很酷或者自以為很聰明的名字、帶有營銷傾向的名字、和具體公司有關的名字以及生僻的技術名詞。(Don’t Make Me Think第一章)

當我們訪問Web的時候,每個問號(讓用戶不明白的地方)都會加重我們的認知負擔,把我們的注意力從要完成的任務上拉開。這種干擾也許很輕微,但它們會累積起來, 有時候這樣的干擾不用太多,就足以讓我們抓狂。況且,人們通常不喜歡苦苦思索背後的原理。建造網站的人沒有讓它們明白易懂(而且容易使用)會讓我們對這個網站以及網站的發布者失去信心。


按用戶心智模型去設計產品,下面列出一大堆訪問者在訪問網站時不應該花時間思考的事,例如:

• 我在什麼位置?

• 我該從哪裡開始?

• 他們把××放在什麼地方了?

• 這個頁面上最重要的是什麼?

• 為什麼他們給它取這個名字?


不讓用戶思考過多,原則上就是設計符合用戶心智模型。大致可以從下面幾個方面來講:

1文案:需要讓人容易理解,快速記憶。根據不同產品定位,找到恰當的切入點,文案過長或者使用用戶不理解的情景,如技術用詞,營銷用詞等,都會使人不知所雲。

省略多余的文案,比如過分修飾,歡迎語,多余指示性語句,這些羅嗦的詞語會影響用戶對關鍵信息的閱讀理解和判斷,必須干掉。

2圖形:好的圖形表達是優於文字的,但是圖形沒有把內容表示明確,反而適得其反,給用戶造成理解上的困擾。

很多情況下,我們好像都很喜歡做一些很炫的icon來表達某些內容,這些是會起到吸引性,但要記住一點,你的圖形是不是很好的闡釋了內容,如果做不到,那就去掉吧。不如放大標題來的更好。
每個網站需要有它的獨特性來吸引用戶,但表達這些獨特性的元素,例如圖形,一定不能對用戶理解內容產生干擾。很重要的一點,我們設計是要表達什麼,為了什麼,怎樣更好的幫助用戶來理解這些表達,是我們一定要做到的。

網站不是炫技場,設計要為內容服務。

3信息:信息其實是文案、圖形等形式的混合體。信息之間,是否建立了相應的關聯度,不相關聯的信息之間是否產生了干擾。

大量的信息是否進行了合理的分類,以減輕用戶的尋找時間。信息分類處理上,有個深廣度問題,廣度站點因為層級少,可以讓用戶不需要點擊過多就可以到達底層;深度站點需要點擊更多次,但它在每一層次上可以做到讓人的思考最小化。關於信息的深廣度,詳細見這裡。
所以,有效合理的信息分類可以幫助用戶快速准確浏覽和完成任務。

4引導:通過菜單,導航,面包屑等手段有效引導用戶行為路徑,讓用戶方便去他想去的地方,回他想回的地方。

在路邊,我們希望有路牌指示;在雜志上,我們希望前面有目錄,在每頁我們還希望有頁碼,在網站設計中,我們引導好用戶需要浏覽的內容;在用戶需要的時候給予網站工具來方便完成任務,在這點上,很多時候我們總是希望上新功能,把功能做的突出,殊不知用戶是不是也這樣想,他到底在這裡需要什麼。

5操作方式:充分順應用戶的心理思維,來設計功能的操作,可以使用戶快速上手。

汽車方向盤往左打,汽車就往左開;插排電源按下去燈亮;相關內容旁邊放置相關操作,操作尖頭朝下說明有下拉內容,等等。這些操作方式都是要符合用戶心智模型的。

6一致性:設計在同產品(甚至同類產品)中保持一致性,可以大大降低用戶理解成本,使用戶快速上手,增加用戶的使用率。

這裡的一致性包括顏色,形狀,內容,操作方式。比如紅綠燈如果各地都不一樣,外地人來了豈不會導致交通混亂。同一個網站也應該有這樣的一致性,有些都可以保持行業的一致性,比如頁面上使用一樣的翻頁等,既可以降低制作成本,又對用戶的使用有良好的認知幫助。到一定程度,也會提升一個品牌的認知,比如阿迪達斯到處使用的三道槓。

下面看個例子:這個是某期寶貝傳奇的宣傳頁面,進來以後甚是讓人看不懂!沒有很好的根據用戶心裡預知和相關內容的合理放置來設計。這只是一個活動,如果是一個長期產品,用戶接受程度可想而知。

我們都知道別讓我思考最經典的頁面是google首頁:logo起到網站認知作用,搜索框緊跟logo並最大化使其最容易被使用,其他信息按歸類放置,並根據等級高低依次減弱。雖然大多產品都有其他商業性需求考慮,但設計師不能被這些沖昏頭腦,機械性的表現內容。多花心思把繁雜信息理清楚,要知道,設計師都不是很清楚信息的關系,用戶就更不會明白。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved