每個人都知道沒有第二次機會給人留下印象。在數(shù)字產品領域，這一永恒的真理在激烈的競爭和令人難以置信的多樣性中發(fā)揮了作用。毫無疑問，網(wǎng)頁或移動屏幕的某些區(qū)域在這方面特別重要和有效。今天我們將更深入地討論其中一個：網(wǎng)站的標題。

我們簡要概述了UI/UX詞匯表問題中的標題，重點是web設計術語。今天，讓我們來看看這個主題，并討論標題的功能和設計建議。此外，我們將展示一系列的網(wǎng)頁設計概念，并將不同的方法應用于標題設計。

在頁面布局中，標題是頁面的上部（頂部）。這是頁面的戰(zhàn)略部分，人們在介紹網(wǎng)站的秒鐘滾動頁面之前看到的區(qū)域。通過標記邀請的方式，標題應該提供有關數(shù)字產品的核心信息，以便用戶可以在幾秒鐘內掃描它。從設計的角度看，標題也是一個廣闊的創(chuàng)意設計解決方案領域，應該是有吸引力的、簡潔的和有用的。標題通常被稱為“站點菜單”，在站點布局中被定位為導航的關鍵元素。

這個概念展示了在線書店銷售漫畫的主頁。頂部水平區(qū)域aka title顯示徽標字母，顯示站點名稱和核心導航：指向項目目錄的鏈接、新鮮和特價商品、博客、動作圖、購物車典型的電子商務站點圖標和搜索圖標。

標題可以包含各種有意義的布局元素，例如：

這并不意味著所有提到的元素都應該包含在頁面標題中：在這種情況下，標題部分被信息重載的風險很高。對象越吸引用戶的注意力，就越難集中在重要的對象上。根據(jù)設計任務，設計師（有時與營銷一起）決定重要的戰(zhàn)略選擇，并從列表中選擇或添加其他選項。

讓我們看幾個例子，看看在一個特定網(wǎng)站的標題中放置了哪些元素設計器。

這是室內設計工作室的網(wǎng)站。頁面的上半部分顯示在滾動過程中始終保留在視覺感知區(qū)域的粘性標題。分為兩個區(qū)塊：左側為品牌標識，右側為互動區(qū)，包含“產品”、“工作室”、“按下”等多個信息區(qū)塊的鏈接，以及標有“商店”的呼叫短語按鈕的形狀。標題的中心部分使用一個負空間來視覺上分隔這兩個塊。

這是另一個標題設計稍有不同的網(wǎng)頁示例。這次是圍繞中心建造的，包括標志和品牌名稱。左右兩邊是平衡的，有兩個鏈接，每個鏈接允許用戶快速掃描并移動到他們感興趣的信息塊。

首先要考慮的是眼睛掃描模型，它顯示用戶如何在秒與網(wǎng)頁交互。這一重要的用戶研究領域得到了尼爾森諾曼集團的大力支持，尼爾森諾曼集團為設計師和可用性提供了對用戶行為和交互的更好理解。

簡言之，當人們訪問網(wǎng)站時，尤其是次訪問時，他們不會仔細而詳細地瀏覽網(wǎng)頁上的所有內容：他們會掃描網(wǎng)頁，找到吸引他們注意力的鉤子，并說服他們在網(wǎng)站上花些時間。收集眼球運動跟蹤數(shù)據(jù)的不同實驗表明，有幾種典型的模型，訪問者通常會瀏覽網(wǎng)站。在下面的常見模型中，您將找到z模式、zig zag模式和f模式。讓我們看看他們的計劃是什么。

Z模式對于信息呈現(xiàn)統(tǒng)一、視覺層次弱的網(wǎng)頁來說是非常典型的。從該方案可以看出，它確定了四個活動區(qū)——其中兩個穿過典型的航向區(qū)。

另一種方案是zig-zag版本，這對于具有內容塊可視分區(qū)的頁面來說是典型的。類似地，讀者的眼睛從左上角向右移動，然后移動到整個頁面的右上角，掃描初始交互區(qū)域中的信息。