響應式網站的一個特點是:一張圖片通常會配上幾個字或者一句話。在設計的時候,就有一個問題需要處理——
字體與圖片的位置關系,設計師是如何處理的呢?
根據我們的觀察,不同的設計師對字體和圖片位置關系的處理辦法是不一樣,不過,如下幾個辦法是通用的。字體大小處理
通常來說,很多圖片都是有主體物體的,就是圖片中呈現的主要物體,在這種情況下,使用的字體不應該大于主體物。如果有的圖片沒有主體物,使用的字體大小也應該考慮到用戶的辨認,不宜過大或者過小,不少設計師常用14px或12px的字體。字體所處位置處理
大多數的圖片都是有視覺焦點的,通常來說,字體應該處于圖片的視覺焦點橫豎軸線上,如果,字體較少,可以直接放在視覺焦點上。例如,蘋果官網上,幾乎所有的字體都位于產品圖視覺焦點的數軸線上方。也有的圖片沒有明顯的視覺焦點,對于這類圖片,文字可以直接放置在圖片中央為宜。字體與圖片邊緣的距離
如果圖片中有主體物,字體與圖片邊緣的距離,應該與主體物邊緣的距離相等或者差不多。這樣設計的好處是,在視覺上,將字體與圖片的主體物處于并列的狀態,一文一圖,整個畫面看起來較為協調。字體與圖片線條的關系
如果圖片中有明細物體線條,例如,圖片中有河水的流向等等,也就是說,圖片中主體物是有明確的線條的,對于這類圖片,設計師可以采取兩種辦法。一種辦法是字體的排版可以與線條平行。還有的設計師可能會采用另一種辦法,讓字體的排版與主體物線條靠近。這兩種辦法設計出來的作品,都不會有突兀之感。字體面與主體物面有交叉
如果字體較多,會形成一個字體面,而如果圖片中有主體物,也會形成一個主題面,兩個面之間,好能夠形成面與面之間的交叉。這樣的視覺呈現,不會讓字體或者主體物顯得孤立,兩者之間會給人有聯系的感覺。
在元素較為簡單的圖片中,單純使用漢字,會更加凸顯出畫面的單調。設計師會采取這樣一種處理辦法,就是增加數字、英文字體的使用,將數字、英文、漢字搭配起來,讓整個單調的畫面豐滿和豐富。在一些慶典或者周年慶的網頁設計中,數字往往被突出顯示,配以文字說明,畫面沖擊感十足。書法字體與網站風格
漢字的變化范圍遠遠超過英文,這也使得漢字字體是可以與網站的風格進行搭配的。例如,一個做古典家具的英文網站,英文字體在怎么變化,可能也無法傳達出古典、傳統的概念和意境,但是如果使用書法字體,古典的已經躍然紙上。
不難看出,網站中單單是一個字體的設計,學問就非常之深、非常之大,這也足以看出,
網站設計是一個“做到老、學到老”的職業,任何一個網站設計師,概莫能外。
當前標題:網頁設計中字體與圖片的位置關系處理
URL網址:http://m.newbst.com/news32/247032.html
成都網站建設公司_創新互聯,為您提供面包屑導航、微信小程序、品牌網站設計、手機網站建設、虛擬主機、網站內鏈
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯