您的位置: 首頁 > 藝術設計 > 設計理論 > 網頁核心內容對視覺表現的影響
回到列表 淺析平面與網頁設計的差異性
 網頁核心內容對視覺表現的影響

作者:飛魚的聲納 時間: 2012-06-26 文檔類型:合作網站提供 來自:飛魚的聲納

“對信息的優化和提煉永遠都是設計的第一步。”這是百度聯盟用戶體驗中心Banner上的一句話。在自己做網頁設計的過程中,越來越對這樣的概括有了切身的體會和想法。當然,這句精煉的句子其實包含了非常多的內容,我個人認為,至少包括這四個方面:一、從網站的整個訴求來講,網頁上需要放置哪些信息才能更好的實現網站的訴求?哪些信息是需要保留的?而哪些信息是需要放置在其他頁面甚至干脆舍棄掉的?二、對于已經確定放置于頁面的信息,如何更好的撰寫文字、挑選圖片才能達成功能性和視覺上美觀的完美統一?三、區分信息的重要程度,哪些是重要的,需要著重表現的?而哪些是次要一些的信息?四、區分出信息的主次后,在布局、色彩、尺寸上,即在視覺上如何更好的突出和表現?

這四個部分的每一部分幾乎都有討論不完的話題,那么在這篇文章中我只就第四個方面,也就是網頁上核心內容和視覺表現的關系來梳理和概括一下自己在這方面的一些理解,盡量的將我所考慮到的內容都寫出來,同時舉一些具體的案例來說明我的觀點,便于大家更好地理解。

一、核心內容對于頁面布局的影響

下圖是一個提供WordPress網站建設的公司,在它的主頁上從上到下可以看到這樣幾部分信息:導航、Logo、口號、作品展示、選擇我們的理由、聯系表單、日志列表、郵件訂閱、Twitter信息以及版權信息。其中的第一視覺無疑是公司的口號和作品展示,這就是此網站主頁上的核心內容。因為作為一個網站建設公司來講,直觀的讓客戶知道你是干什么的?干的怎么樣?應該是客戶最想要了解的內容。那么對于核心內容,在視覺上做了哪些考慮呢?

我們可以看到,在宣傳口號上設計師給”wordpress”這個詞應用了非常大的文字尺寸,并且顏色上和其他文字區別開,使用了較深的灰色,強調本公司是建設專門以wordpress為后臺的網站。在宣傳口號的下方的作品展示圖的尺寸很大,寬度達到了540像素,而整個的設計寬度是1000像素,在主頁上這樣大尺寸的展示圖能夠非常清晰而直接的讓客戶看到作品的原貌,從而對于公司的制作水準有了一個直觀的印象。而這樣的大尺寸的作品展示其實已經隱約的決定了整個網站的布局。想想看,在屏幕的左上方區域擺放上一個寬540像素,高460像素的矩形之后,接下來的區域該放置哪些信息,其實就像是擺放積木一樣,按照重要程度挨個放置就行了。當然這并非是唯一的布局方式,但是無論何種布局方式,我們的想法都應該在功能性的考慮的范圍內進行。所以創意我們可以有,但是要明白和天馬行空的純創意的區別。

580th_layout.jpg

如果上面的頁面布局仍然讓人覺得中規中矩的話,下面的一個酒店的主頁的布局也許會讓我們感覺有些新意。可以看到,此設計的背景用了大幅的食物圖片,導航和主內容區只占到整個頁面高度的三分之一,讓背景的圖片大面積的呈現出來,和上面的設計一樣,這樣布局的目的并非單純是為了標新立異或者是為了視覺上的美觀,而是該酒店的特色也許就在于餐飲方面,所以為了對核心內容進行突出,在布局上做了相應的考慮。再下面的一張餐廳也在主視覺部分強調了美味的食物,但兩者采用了完全不同的布局方式,雖然各自有信息架構方面的獨特考慮,但是也不妨將它們看作同樣一種核心內容的兩種不同的創意方式。

580th_hotel.jpg

th_01index4-580.png

二、核心內容對于色彩方案的影響

Lofter是網易提供的輕博客服務,其中的信息類型主要有四類:即:圖片、音樂、文字、視頻。關于Lofer的模板設計,木偶同學在《LOFTER輕博模板設計》一文中對主要展示圖片的模板的有如下設計方面的考慮,”該模板通常是為了滿足攝影用戶,圖片展示面積要夠大,夠爽;模板首頁一屏能看多圖;背景要暗,突顯當前圖片;邊框的設計讓圖片更突出,或讓圖片更精美。”通過分析和理解此設計思路,我們能夠發現,其中的圖片展示面積要夠大,也就是我們上面提到的布局方面的考慮,而背景要暗即是我們這里要討論的對于色彩方案的影響。

從木偶同學的完成作品中我們可以看到,按照設計思路做出來的灰色的背景平靜而低調,和白色的圖片邊框和背景形成鮮明的對比,而灰白的色彩方案和色彩多變的圖片不會沖突,無論圖片怎么變化都能和灰色和白色百搭,所以彩色的圖片在白色的背景和邊框的映襯下更加搶眼,讓照片這樣重要的信息在視覺方面得到了充分的表達。

580th_lofter.jpg

另外的一個例子來自于韓國的搜索引擎服務網站Naver。liuman0722在《高效的設計可視化》一文中針對Naver的設計寫到”韓國著名門戶/搜索引擎網站Naver旗下的Naver Shopping,其產品定位即提供商品的搜索服務,通過搜索商品名稱,可以按照商品類別列出幾乎韓國所有的大型電子商務網站提供的該商品鏈接。所以在界面上,用強對比色調突出搜索功能和導航區(頁面左上角的綠色區域)。通過視覺化引導,讓用戶專注于核心內容,聚焦用戶視線的焦點,在白色為主色調的頁面,視線會先看到強色調的部分,所以也可以用強色調來突出核心內容,讓用戶的視覺聚焦在那里。”

580th_color.png

所有的視覺設計都是圍繞信息來做的,我們必須首先梳理好了信息的內容和結構,才能知道應該在哪里施以重墨,在哪里點到為止。反過來,很多的設計思路和想法可以說本身已經暗含在信息中了,比如我們上面提到的布局和色彩方案。只要提煉和優化好了信息,怎么來做其實在梳理信息的過程中就漸漸的明晰了。

本文鏈接:http://www.ditdrb.tw/design/doc/2012/8781.asp 

出處:飛魚的聲納
責任編輯:bluehearts

相關文章 更多相關鏈接
設計方舟第一站之細節
淺談網頁設計中的色彩理論
柵格系統延續美學
再設計Redesign
關于邊框和底色的那一些小事(一)
作者文章
強質感高光風格網頁表現手法總結
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
國外創意名片設計欣賞
情感化界面
線下項目工作流程(歸納篇)
線下項目工作流程(分析篇)
簡約而不簡單-Practise平面設計
培養用戶的使用習慣
優秀名片設計
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾
分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特