在網站設計中有效使用微文本的6種方法

目前,網站設計的最大趨勢之一是使網站所承載的內容極簡化和微小化。「微小化」的文本元素已經成為一種流行趨勢,但這種設計趨勢,在設計領域同樣引發了一些爭論。

毫無疑問,小文本在大小和尺寸上可能會導致一些可讀性問題。但如果你用心並處理得當的話,小文本區塊實際上可以幫助你創建一個視覺焦點和重心,並將用戶吸引到設計的特定部分。

接下來,跟上思維,讓我們來看看這個微小的文本趨勢應該如何實現以及它將如何發揮作用,以幫助你獲得一些設計靈感。

方法/步驟

1.創建層次結構和組織感

儘管超大型文本隨著使用已經在設計領域打下一定的基礎,成為主頁和標題設計的主要選項。但是目前有一種趨勢——在瀏覽器或桌面的第一個屏上儘可能在保證視覺的基礎上提供更多的信息(原因之一可能是設備尺寸和解析度的不斷增加,給設計師更多的設計空間)。

這也就是「微小化」文本「橫空出世」的原因。字體的大小和比例的不同,使得排版有明顯的視覺流動感。通過使用一層很小的文本(通常使用14到16點的尺寸大小),你可以創建一個額外的焦點讓用戶聚焦。小文本,特別是與其他較大文本一起使用時,可以吸引用戶,因為它們是不同的,這在視覺上就形成了對比。

你可以看到,微小化的文本元素提供了關於項目的關鍵細節,而更大的文本則負責提供工作的描述。你需要觀察和注意這些周圍有大量空間和內容的微小文本元素是如何工作的。

2.形成風格

有時候,微小化文本信息的設計目的是為了引起你的注意或者讓你忍不住想看第二眼。

因為它的出現經常是出乎意料的,或者不同於用戶在其他網站上看到的,所以設計元素可以一下子就吸引用戶。

在它的網站設計上使用了一個超級小的標題,不過,它確實能夠讓你一下子注意到它。這個標題完全和X的頂點契合,創造出一種獨特的閱讀模式。即使是對交互動作的設計他們也儘量做到微小,它不會讓用戶感到不舒服,因為它感覺是故意的。

3.創建吸引人的導航

雖然現在的主流並且很多網站設計都取消了主頁的導航功能,但實際上它們只是變更了導航的表現形式,將他們替換為漢堡/隱藏的樣式菜單導航,使用小文本可以讓一些元素回到螢幕上,而不讓人覺得受到打擾。它是設計模式中的一個流程,從一個極端到下一個極端。

確實,在網頁設計的導航中使用小文本是一件很棘手的事情,因為它需要足夠大,以便可以被輕鬆閱讀和點擊。使用簡單的字體也是非常重要的,因為小文本對眼睛的適應來說可能有點困難。

它貌似對在主菜單欄中使用微小文本這個問題找到了一個很好的解決方案。在他的網頁設計的主導航中,你可以看到每個元素都有足夠的間距,有些甚至使用雙倍間距,並且在黑暗背景下,白色無襯線字體有助於可讀性。

4.展示空間

當頁面的視覺空間很大時,微小文本最有效。小元素和廣闊空間之間的反差是總是可以產生驚人的效果。不過,大量的小文本就不建議使用了,因為它們總歸在閱讀上並不是很好,所以要保持文本元素的簡潔。

微小文本的使用在最初你打算這麼做的時候就應該在你的思維中有一個特殊的目的性。在使用這個設計趨勢之前,你需要問問你自己:為什麼我要在這裡使用小文本呢?它對我的網站設計將有什麼貢獻或者意義呢?

如果你對這些問題沒有可靠的答案(當然「因為我樂意」不能算答案),那麼你應該考慮其他的問題,知道你確定它確實是你需要的。

5.當文本不是最重要的元素時

有時,需要展示的最重要的元素並不是文本,文本在視覺元素中可能只是次要的。

Freelance TV是一個很好的例子,說明如何使用小文本來幫助用戶,同時允許另一個元素作為設計的主要部分。對於這個項目,視頻是最重要的元素,你一樣就可以看出來,而小文本作為另一個元素,可以提供額外的信息,並鼓勵用戶進行訂閱或者註冊,不管它在主頁上的什麼位置出現。

6.創建一個可視元素

文本元素的主要作用是用來閱讀的,這很符合邏輯。

但有時候,將文本元素作為視覺元素的一部分,是否被閱讀的重要性就不那麼重要了(這需要前期的計劃和大量的討論,所以不要在你突發奇的時候就草率的使用這項技巧)。

HTML Burger的網站設計中使用了一系列的小文本圖層,將小文本用作描述大標題的視覺部分。在每個「Burger」包裝上都使用了小的文字,以創造出更酷的視覺元素。這是一個你可能不太常見的設計技巧和思路,在這種情況下,它是有影響力的(但這種技術很難實現;要小心行事)。

總結

使用微小文本,或者不使用,這可能是一個艱難的決定。雖然小文本的使用是有爭議的,但對於小字體的使用還是有適當的用處的。為了確保在你的設計中添加有效的小文本元素,你需要給它足夠的空間,使用一個高度可讀的字體,並使用其他的設計元素來對比或者提示用戶。

最後,如果你打算使用微小風格的文本內容在你的下一個設計項目時,當然,這是好事,但是我們也建議不要過多的使用它們。這不是一個能幫助你把更多的內容「塞進」你的設計的技術,它只在最合適的位置,賦予一個直接的目的性才能發揮它最大的效果。

相關文章

  1. 網站建設中如何更改微企點網頁名稱及SEO

    好的SEO能讓你的網站更好的被搜尋引擎的蜘蛛爬到,便於展示企業文化. 工具/原料 電腦 瀏覽器 方法/步驟 進入頁面及SEO設置頁面.每個頁面均可單獨修改名稱及連結,如圖所示: 設置SEO內容.用戶可 ...
  2. XHTML代碼在深圳網站設計中要注意的規範

    網站設計公司的技術人員都要非常清楚xhtml代碼的一些日常規範,以免犯低級錯誤:可擴展超文本置標語言xhtml表現方式與超文本置標語言xhtml類似:網站建設人員要從以下幾點注意XHTML代碼規範:博 ...
  3. 網站設計中經常會遇到的問題

    說起建設一個優質的網站那麼不可避免的問題就是網站的設計以及網頁的設計的問題.石家莊網站設計公司就來淺談一下在網站設計中經常會遇到的一些問題,也是使用客戶問到最多的問題 工具/原料 網際網路 網站設計 方 ...
  4. 關於網站設計中一些配色的技巧介紹

    大家在網站製作過程中,肯定遇到顏色的問題,今天就和大家談談網站設計中的配色技巧! 配色技巧 白色的色感光明,性格樸實.純潔.快樂.白色具有聖潔的不容侵犯性.如果在白色中加入其它任何色,都會影響其純潔性 ...
  5. 網站設計中拆分單元格的做法

    在利用表格做網站的時候經常會遇到合併及拆分單元格,對於新手學習做網站這個問題不是那麼簡單的.合併及拆分單元格可以再造一個比較特殊的表格出來.可行的方法是:選定要合併的單元格,然後單擊"Tab ...
  6. 談網站設計中的一些原則問題

    談網站設計中的一些原則問題 方法/步驟 一.主題鮮明        視覺設計表達的是一定的意圖和要求,有明確的主題.那麼就要求視覺設計不但要單純.簡練.清晰和精確,而且在強調藝術性的同時,更應該注重通 ...
  7. 網站設計中螢屏掃描線效果的繪製方法

    網站設計中螢屏掃描效果如果製作呢?網站建設專家互航科技高速你分為一下幾個步驟. 方法/步驟 一. 1. 選擇水平文字工具,網站建設中鍵入域名HEAVY METAL,轉換成光柵層,隨後,載入此層文本選區 ...
  8. 網站設計中的SEO意識

    網站建設就好比建房子,而網站一開始的設計就像是打地基.有一個好的地基,房子才能越發的鞏固,才能層次高.如果我們從一開始就對網站設計和布局開始了SEO優化,那是不是起到了事半功倍的效果呢.下面筆者就來具 ...
  9. 戶外網站設計中的誤區

    隨著網際網路的飛速發展,各行各業都面臨著從線下到線上的轉型,網站的應用基本上已經普及到了每一個企業組織,可是到現在為止,建設一個優秀的網站的難度並沒有減少.由於戶外俱樂部經營主體的特殊性,與一般的旅遊網 ...
  10. 網站設計中最常見的視頻格式

    在以前的文章里已經提到過,圖像和插圖是網站設計中非常重要的步驟.其原因有二,美學和實用性.使用的圖像和插圖網頁設計師將能夠在他們的設計包含兩個網站的本質特徵.呈現更好的效果展示給用戶,同時一個友好性的 ...
  11. 網頁設計中CSS布局調試的十個有效的方法

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

    小編致力於為大家奉獻最有效的經驗,讓大家能夠解決掉問題,但是大家也都知道,每個人遇到的情況都是不一樣的,大家在看小編經驗的同時,除了跟隨操作,也需要自己的思考,舉一反三的解決問題,這樣才會變得更加有內 ...
  13. 在word中選擇文本的幾種方法

    Word是大家常用的辦公軟體,但或許對於很多小夥伴來說也只是掌握了其一部分功能,比如說如何在word文檔中選擇文本呢?或許很多人只知道拖動滑鼠的方式,其實方法有很多,小編以word2010為例來做一介 ...
  14. Word文檔中選擇文本的幾種方法

    大家好,下面為大家介紹幾種Word中最常用的幾種選取文本的方式. 工具/原料 電腦 office辦公軟體 矩形選擇 打開要進行編輯的Word文檔. 按住鍵盤上的Alt鍵,在Word中拖出一個矩形選框, ...
  15. Word2016中設置頁面顯示比例的兩種方法

    在Word2016中,我們可以根據自己的需要對頁面的顯示比例進行調整,以更加方便的查看顯示效果.下面小編跟大家說一下,常用的兩種方法. 方法/步驟 首先我們打開一個新的word文檔. 然後在菜單欄中選 ...
  16. ZBrush教程ZBrush中如何撤銷和重做的兩種方法

    學習ZBrush的朋友你們知道如何撤銷和重做的兩種方法嗎嗎?一些方法經驗分享給大家,希望對學習ZBrush的朋友有更好的幫助;接著往下看. 工具/原料 ZBrush教程 ZBrush知識 方法/步驟 ...
  17. DXP中批量刪除滴淚的一種方法

    滴淚在PCB進行加工時有非常重要的保證意義,但是滴淚都是批量添加的,如何添加後,再進行批量去除呢?本經驗就是解決這個問題. 工具/原料 altium designer 16.0 電腦 1.滴淚的批量選 ...
  18. Word2010中設置圖片文字環繞的三種方法

    我們在Word2010編輯文檔的過程中,為了製作出比較專業的圖文並茂式的文檔,往往需要按照版式需求安排圖片位置.本篇經驗就來介紹一下設置圖片文字環繞從而靈活移動圖片位置的三種方法. 工具/原料 Wor ...
  19. Word 2007中給數字標識循環節的兩種方法

    使用Word 2007編輯試卷時,可以直接為相關的數字標識循環節,從而避免試卷列印出來後再手工標識.例如需要做一個0.356的循環小數,在3和6上標識循環節,這裡介紹兩種不同的方法: 步驟/方法 插入 ...
  20. Excel2007單元格中如何輸入多行文字(兩種方法)

    在Excel2007一個單元格中有時需要輸入多行文字,輸入[回車鍵]是不行的,會跳到下一單元格中.小編給大家分享兩種方法可以實現. 工具/原料 Excel2007 方法/步驟 如圖,如何在一個單元格讓 ...