高水準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)需掌握文字圖片協(xié)調(diào)
2012/2/1 22:19:04來(lái)源:互聯(lián)網(wǎng)
高水準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)--本文將結(jié)合站酷網(wǎng)給大家介紹網(wǎng)頁(yè)設(shè)計(jì)的高水準(zhǔn)設(shè)計(jì)原則;用戶瀏覽網(wǎng)站是按照“F”型的視覺(jué)路線。我們看任何東西都是從上往下的,最頂部左上角的位置是最明顯的,也是最先被看到,這一點(diǎn)已經(jīng)被現(xiàn)在所有的網(wǎng)站都運(yùn)用上了,大家通常把公司的LOGO,網(wǎng)站的名稱放在這個(gè)位置。接下來(lái)看到的是中間區(qū)域左邊的一部分,這個(gè)區(qū)域大多數(shù)電商站喜于放產(chǎn)品欄目,以便用戶查找。最后就是底部?jī)?nèi)容部分的。了解了這個(gè)規(guī)律,當(dāng)我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候就知道怎么樣做內(nèi)容,怎么樣讓內(nèi)容搭配圖片,做到協(xié)調(diào)統(tǒng)一。
文字和圖片的統(tǒng)一,就是形式和內(nèi)容的統(tǒng)一
文字口號(hào)是引起注意的元素之一,配加一個(gè)亮色調(diào)的按鈕圖標(biāo),瞬間讓頁(yè)面充滿活力,美感,給到瀏覽者豐富的視覺(jué)體驗(yàn)。
如圖一:上下配有粉紅色圖標(biāo),位置上形成斜度視角,同有標(biāo)明提醒作用,整體感觀達(dá)到協(xié)調(diào)統(tǒng)一效果。
如圖二:底圖4個(gè)小圖標(biāo)按鈕,搭配文字,每一個(gè)圖標(biāo)圖片形象表達(dá)了贊它,收藏,分享,舉報(bào)的意義,規(guī)律而生動(dòng),這個(gè)就是文字和圖片的統(tǒng)一,也就是形式和內(nèi)容的統(tǒng)一。
讓文字飛
利用段落、加粗、斜體、引用、下劃線或者字母大小寫(xiě)搭配一些圖形狀……,這些都能讓文字部分更有視覺(jué)沖擊力,對(duì)文字進(jìn)行創(chuàng)意的編排更有利于瀏覽者閱讀。當(dāng)然,能也讓你認(rèn)為是重要的文字 加以強(qiáng)調(diào)。
圖:文字和圖片的搭配,使得表述的內(nèi)容更加有意義,加深瀏覽者的印象。類似這樣的設(shè)計(jì)是最容易讓用戶接受和記住的。
正確取用圖片
一般用戶對(duì)圖片都是一視而過(guò)的,當(dāng)我們?cè)诟呒?jí)水準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中如何使用圖片?讓圖片來(lái)渲染頁(yè)面,保證整體頁(yè)面的美感呢?選定圖片要確保它們不雜亂,圖片內(nèi)容要正確對(duì)應(yīng)文字主題,顏色搭配要合理,被人理解,不要過(guò)于花哨。無(wú)論是圖片的大小,風(fēng)格都應(yīng)當(dāng)配合好文字板塊,使整體的頁(yè)面效果協(xié)調(diào)有層次感。
字融合圖片,圖片修飾文字。圖片融合文字,文字修飾圖片。
任何的頁(yè)面設(shè)計(jì)是都是文字和圖片搭配而成的。文字融入了圖片做搭配,便富有了文字生命力,而圖片加之對(duì)應(yīng)內(nèi)容才能便構(gòu)成了一道優(yōu)美的旋律音符。整個(gè)網(wǎng)頁(yè)就是活的了,能與用戶交流,共通。網(wǎng)頁(yè)的整體美感就是來(lái)源于形式和內(nèi)容的統(tǒng)一。
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/di1025.html
本文地址:http://m.pkvc.cn/tutorial/di1025.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏
最熱門(mén)的教程