11個在排版/網頁布局中的常見錯誤

這篇文章的目的是幫助設計者們和顧客們去理解好的排版技巧的重要性,當避免一些常見的錯誤的時候。請記住這些錯誤的大部分是主觀的以及在項目、目標或環境能夠被改變的

工具/原料

電腦
百度瀏覽器

方法/步驟

沒有足夠的行間距(leading)

行間距/leading能改善整頁中文字塊的閱讀效果,這樣做是為了當讀者閱讀下一行的時候不會找不到他們的位置。太小文字可能引起一種受壓迫感。記住不同的字體需要不同的行間距這很重要。或多或少需要改變版本的高度。

沒有足夠的字間距(tracking)

字間距/tracking是被應用在一組文字上,它陰止了文字間的部分重疊。特別是在列印期間。它跟行間距有的類似,它也可能在文字的流量和文字的密度以及重量方面改善或妨礙可讀性。

不要混淆字間距和字間距調整

字間距用於一組文字,而字間距調整應用了兩個文字之間,標題、所有CAPS的文字和logo的效果處理。建站公司海淘科技它能幫助在不同的尺寸上閱讀。不要受限於你的設計軟體的默認設計中。它同樣適合於上述第1和第2條。

每行文字太多

閱讀許多行文字會引起眼睛的疲勞,在從一行到另一行時讀者不得不經常移動他們的眼睛和頭部,我已經研究了各種來源認為每行文字保持文字在50 - 60個字符以下。

太多的字體和字體重量混合在一塊

在一頁面上有太多的字體可能會使注意力不集中和不能溝通(缺乏統一)。在每個項目中試著去使字體選擇在三個或三個以下。太多重字體可能會引起讀者感覺得這張個頁面中找不到重點,這可能會使讀者錯過一些重要的東西。

在長篇幅材料中沒有使用有襯線字體

襯線字體使用在篇幅較長的資料中是被人熟知的,如書籍和雜誌,可持續更長一段時間。此外,它還可以幫助我們的眼睛應對疲勞,我們大家都知道我們需要眼睛!儘管如些,襯線字體仍然是比較好的選擇。

過度使用居中文字

使用居中文字創建了一個鋸齒狀,並打破文字的外觀-非常適合溝通!在大多數情況下可能會被視為業餘設計者。但可將它在那些喜帖使用。。

大量複製

通常情況下,設計師和非設計師將使用12點字體來拷貝內容。更小(甚至略小)的字體尺寸創建一個更專業、現代的外觀。大量複製可能很無聊-認為是一本兒童讀物的字體大小的。很無聊? 。..除非您要的就是這種效果。

注意到在電腦顯示器上察看文字和印刷出的效果是不同的,這也很重要。在大多數情況下,輸入在螢幕上文字外觀較小,不太清晰。此外,大多數印表機會建議您不要使用小於7點的字體,因為它可能會導致可讀性問題。

不知道什麼是網格系統

作為一個印刷愛好者,到目前為止,了解網格已經成為我已經學最好的事情之一。它是建立明確和使您的字體和布局更具凝聚力的基礎。

在長篇幅材料中沒有使用有襯線字體

襯線字體使用在篇幅較長的資料中是被人熟知的,如書籍和雜誌,可持續更長一段時間。此外,它還可以幫助我們的眼睛應對疲勞,我們大家都知道我們需要眼睛!儘管如些,襯線字體仍然是比較好的選擇。

沒有足夠的行間距(leading)

行間距/leading能改善整頁中文字塊的閱讀效果,這樣做是為了當讀者閱讀下一行的時候不會找不到他們的位置.太小文字可能引起一種受壓迫感。記住不同的字體需要不同的行間距這很重要。或多或少需要改變版本的高度.

削減了文字的注意力在50%以下

像上述情況,這也增加眼部的壓力,並阻礙可讀性。文字在背景在迷失了。而且列印出來後看到的效果會比在螢幕上看到還要差。突顯你的文字,這將節省您的時間,金錢和為你用在印刷頭痛上的阿司匹林藥片。

每行文字太多

閱讀許多行文字會引起眼睛的疲勞,在從一行到另一行時讀者不得不經常移動他們的眼睛和頭部,我已經研究了各種來源認為每行文字保持文字在50 - 60個字符以下。

通欄布局

這種布局方式讓視線不再受到方框的限制,比起上面的布局方式,自然多了些大氣、開闊的味道來。另外,主視覺部分還可以靈活處理,既可以向上拓展到logo和導航的頂部位置,也可以向下拓展到內容區域,這種布局方式也是非常常見的布局方式。

導航在主視覺下方的布局

這種雖然不多,但也時不時能看到,導航放在banner下面的好處是可以彌補banner中設計素材截斷的缺點,讓設計看上去完整、自然。所以說布局的方式受到多方面因素的影響,不僅考慮到信息內容所占據的空間,還包括你手頭現有的素材。

左中右布局

這種布局方式不常見到,但卻是非常富有新鮮感的布局方式,如果你已經做膩歪了水平分割的設計,嘗試一下這種布局也未嘗不是一種好的選擇。

環繞式布局

這種布局方式看上去更加靈活,banner區域相對較小,就可以在頁面放置更多的信息內容。

注意事項

上面的網站布局方式只是一些常見的企業類網站頁面布局,布局的方式還有更多。實際上,布局就像是擺積木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原則即可,並沒有規定一定要怎麼布局,或者這種布局方式要比那種更好,只能說某種布局方式更為合適某個頁面而已。所以,大家多做嘗試,從你手頭正在做的項目開始,嘗試一下不同的布局方式,給你的設計增加一些創意和新鮮感。
原作者:http://www.haitaoit....

相關文章

  1. 在網頁布局中如何製作圖片列表?

    在網頁布局中如何製作圖片列表? 方法/步驟 1.經常會在網頁上看到如下的效果: 基本上都是圖片在上,標題在下,然後滑鼠移動到上邊有個樣式的變化,而且整個圖片和標題都可以點擊的. 2. 準備一張240* ...
  2. 詳解CSS網頁布局中默認字體樣式

    瀏覽器默認的樣式往往在不同的瀏覽器.不同的語言版本甚至不同的系統版本都有不同的設置,這就導致如 果直接利用默認樣式的頁面在各個瀏覽器下顯示非常不一致,於是就有了類似YUI的reset之類用來儘量重寫瀏 ...
  3. 關於網頁布局中的一些問題

    網頁布局或多或少會存在問題,而且是各種各樣的問題,層出不窮,那該怎麼解決呢? 工具/原料 任意一個瀏覽器 Dreamweaver布局工具 方法/步驟 啟動Dreamweaver 編輯代碼後按F12調試 ...
  4. 快速電商自動排版網頁布局ps神器插件_安裝教程

    首先我們需要下載"淘寶電商店招海報排版PS擴展面板",支持CC2015以上版本軟體,下面我們來演示一下安裝教程. 工具/原料 Adobe Photoshop CC 2018 淘寶電 ...
  5. 素描靜物|怎樣避免素描靜物中的常見錯誤

    全面了解和熟悉素描的各種表現技術,學會和掌握素描的三種表現手段,能在規定的時間內獨立完成多物體.多物種的素描作業. 為了幫助大家更好地完成素描的靜物寫生課程,現在我們將這一階段容易出現的錯誤及解決的辦 ...
  6. VC中的常見錯誤提示解釋

    在C語言中的常見錯誤提示解釋 工具/原料 電腦 VC軟體 方法/步驟 1. error C2001: newline in constant 編號:C2001 直譯:在常量中出現了換行. 錯誤分析: ...
  7. 網頁設計的十個常見錯誤

    良好的網頁設計是件很難實現的事情.一個好的網頁設計,不僅吸引眼球,也是實用的.直觀的.層級簡單卻足夠複雜到保持用戶的興趣.字體.色彩.空白與內容間的完美平衡可以構成一個非常好看的設計,你的用戶也會再次 ...
  8. 路由器設置中的常見錯誤匯總

    一.重新分配路由時忽略過濾,當為路由器重新分配路由的時候,需要啟動路由過濾功能,以刪除那些可能造成迴路的路徑.因此,如果不應用路由過濾策略的話,通常會導致錯誤.  但是,要對於一個規模很大的網絡而且沒 ...
  9. 室內裝飾裝修中的常見錯誤

    在家庭裝修前最好到同戶型的鄰居家轉轉,看看人家是怎麼設計的,吸取別人的經驗和教訓,這點很重要,它對你會有很多啟發,因為同戶型最好比較,別人後悔遺憾的地方你就可以不做. 家裝時最好讓樓上的住戶率先開工. ...
  10. 高考數學中的常見錯誤分享

    一.集合與函數 1.進行集合的交.並.補運算時,不要忘了全集和空集的特殊情況,不要忘記了藉助數軸和文氏圖進行求解. 2.在應用條件時,易A忽略是空集的情況 3.你會用補集的思想解決有關問題嗎? 4.簡 ...
  11. AutoCAD繪圖作業中的常見錯誤

    本文總結了作者在學習AutoCAD過程中常常遇到的一些錯誤,難免有一些不足之處,希望大家互相學習,多多交流. 方法/步驟 兩個距離比較近的孔之間沒有打剖面線 一些箭頭沒有打在正確的位置上 裝配好的螺栓 ...
  12. 翻譯中的常見錯誤舉例和分析

    1  大家仔細看看,下面的圖片中有錯誤嗎? 聰明的你,肯定看到了吧,最後的雙引號,方向錯啦! 這就是翻譯過程中或是寫作過程中,我們用電腦打字經常出現的問題,因此,作為文字工作者,組要密切注意.一定要仔 ...
  13. 運動中跑步常見錯誤方式有哪幾種?

    跑步是我們經常選擇的鍛鍊方式,可以增強我們的肺活量,還可以增加我們的體質,但是跑步中我們應該注意一下細節,鍛鍊身體固然重要,但是我們在鍛鍊身體的同時,應也該注意我們身體的細節,那麼常見的錯誤有哪些呢, ...
  14. Excel2007中的常見錯誤值

    核心提示:出現錯誤時通常有一些錯誤值,各個錯誤值代表不同的含義,每個錯誤值都有不同的原因和解決方法. 方法/步驟 ####錯誤 此錯誤表示列不夠寬,或者使用了負日期或時間. 當列寬不足以顯示內容時,可 ...
  15. CAD繪圖作業中的常見錯誤以及解決辦法

    CAD繪圖作業中的常見的錯誤有哪些?本文總結了作者在學習AutoCAD過程中常常遇到的一些錯誤,難免有一些不足之處,希望大家互相學習,需要的朋友可以參考下 方法/步驟 本文總結了作者在學習AutoCA ...
  16. 怎樣避免6個攝影中的常見錯誤

    本文將向你介紹六個會令照片落入俗套的常見錯誤,以及如何避免它們.大部分便攜相機和所有單眼相機都通過半按快門鎖定對焦.你應該掌握先鎖定焦點,然後平移相機改變構圖的方法.這會令你的照片更有創意. 工具/原 ...
  17. 網頁設計中排版與布局小基礎

    有些人始終認為,網頁最主要是內容,不需要再搞些門面上的東西,還拿出MUD來比喻.可是,紅花還需要綠葉陪襯.想想,若MUD不只是單純的文本,還有畫面出來,那麼,它所吸引的何止現在的這些MUD迷呢?那麼, ...
  18. 網頁設計中文字排版設計的技巧

    談到到網頁設計中的排版,這是可個大學問.網站上每一個元素都能影響瀏覽,排版設計的好與壞絕對能考驗一個設計師的基本功底,而短短的一篇文章並不能將排版介紹清楚,本文就先主要分享網站主題部分文字的排版,後期 ...
  19. 網頁製作中 div標籤無法正常排版

    使用div標籤排版時,可能無法與自己想像的進行排版,如果遇到這樣的問題,解決方法如下 方法/步驟 檢查你是否使用了style樣式,如果確定使用,那麼檢查你是否使用了 clear:both; 這個參數, ...
  20. 網頁設計中CSS布局調試的十個有效的方法

    在網站設計中CSS布局是很重要的局部.所以下面是我們的網站設計人員給你的一些方法. 1.利用border屬性確定出錯元素的布局特性 錯誤原因即水落石出.使用float屬性布局一不小心就會出錯.這時為元 ...