每個(gè)人都知道沒(méi)有第二次機(jī)會(huì)給人留下印象。在數(shù)字產(chǎn)品領(lǐng)域，這一永恒的真理在激烈的競(jìng)爭(zhēng)和令人難以置信的多樣性中發(fā)揮了作用。毫無(wú)疑問(wèn)，網(wǎng)頁(yè)或移動(dòng)屏幕的某些區(qū)域在這方面特別重要和有效。今天我們將更深入地討論其中一個(gè)：網(wǎng)站的標(biāo)題。
我們簡(jiǎn)要概述了UI/UX詞匯表問(wèn)題中的標(biāo)題，重點(diǎn)是web設(shè)計(jì)術(shù)語(yǔ)。今天，讓我們來(lái)看看這個(gè)主題，并討論標(biāo)題的功能和設(shè)計(jì)建議。此外，我們將展示一系列的網(wǎng)頁(yè)設(shè)計(jì)概念，并將不同的方法應(yīng)用于標(biāo)題設(shè)計(jì)。
在頁(yè)面布局中，標(biāo)題是頁(yè)面的上部（頂部）。這是頁(yè)面的戰(zhàn)略部分，人們?cè)诮榻B網(wǎng)站的秒鐘滾動(dòng)頁(yè)面之前看到的區(qū)域。通過(guò)標(biāo)記邀請(qǐng)的方式，標(biāo)題應(yīng)該提供有關(guān)數(shù)字產(chǎn)品的核心信息，以便用戶(hù)可以在幾秒鐘內(nèi)掃描它。從設(shè)計(jì)的角度看，標(biāo)題也是一個(gè)廣闊的創(chuàng)意設(shè)計(jì)解決方案領(lǐng)域，應(yīng)該是有吸引力的、簡(jiǎn)潔的和有用的。標(biāo)題通常被稱(chēng)為“站點(diǎn)菜單”，在站點(diǎn)布局中被定位為導(dǎo)航的關(guān)鍵元素。
這個(gè)概念展示了在線(xiàn)書(shū)店銷(xiāo)售漫畫(huà)的主頁(yè)。頂部水平區(qū)域aka title顯示徽標(biāo)字母，顯示站點(diǎn)名稱(chēng)和核心導(dǎo)航：指向項(xiàng)目目錄的鏈接、新鮮和特價(jià)商品、博客、動(dòng)作圖、購(gòu)物車(chē)典型的電子商務(wù)站點(diǎn)圖標(biāo)和搜索圖標(biāo)。
標(biāo)題可以包含各種有意義的布局元素，例如：
這并不意味著所有提到的元素都應(yīng)該包含在頁(yè)面標(biāo)題中：在這種情況下，標(biāo)題部分被信息重載的風(fēng)險(xiǎn)很高。對(duì)象越吸引用戶(hù)的注意力，就越難集中在重要的對(duì)象上。根據(jù)設(shè)計(jì)任務(wù)，設(shè)計(jì)師（有時(shí)與營(yíng)銷(xiāo)一起）決定重要的戰(zhàn)略選擇，并從列表中選擇或添加其他選項(xiàng)。
讓我們看幾個(gè)例子，看看在一個(gè)特定網(wǎng)站的標(biāo)題中放置了哪些元素設(shè)計(jì)器。
這是室內(nèi)設(shè)計(jì)工作室的網(wǎng)站。頁(yè)面的上半部分顯示在滾動(dòng)過(guò)程中始終保留在視覺(jué)感知區(qū)域的粘性標(biāo)題。分為兩個(gè)區(qū)塊：左側(cè)為品牌標(biāo)識(shí)，右側(cè)為互動(dòng)區(qū)，包含“產(chǎn)品”、“工作室”、“按下”等多個(gè)信息區(qū)塊的鏈接，以及標(biāo)有“商店”的呼叫短語(yǔ)按鈕的形狀。標(biāo)題的中心部分使用一個(gè)負(fù)空間來(lái)視覺(jué)上分隔這兩個(gè)塊。
這是另一個(gè)標(biāo)題設(shè)計(jì)稍有不同的網(wǎng)頁(yè)示例。這次是圍繞中心建造的，包括標(biāo)志和品牌名稱(chēng)。左右兩邊是平衡的，有兩個(gè)鏈接，每個(gè)鏈接允許用戶(hù)快速掃描并移動(dòng)到他們感興趣的信息塊。
首先要考慮的是眼睛掃描模型，它顯示用戶(hù)如何在秒與網(wǎng)頁(yè)交互。這一重要的用戶(hù)研究領(lǐng)域得到了尼爾森諾曼集團(tuán)的大力支持，尼爾森諾曼集團(tuán)為設(shè)計(jì)師和可用性提供了對(duì)用戶(hù)行為和交互的更好理解。
簡(jiǎn)言之，當(dāng)人們?cè)L問(wèn)網(wǎng)站時(shí)，尤其是次訪(fǎng)問(wèn)時(shí)，他們不會(huì)仔細(xì)而詳細(xì)地瀏覽網(wǎng)頁(yè)上的所有內(nèi)容：他們會(huì)掃描網(wǎng)頁(yè)，找到吸引他們注意力的鉤子，并說(shuō)服他們?cè)诰W(wǎng)站上花些時(shí)間。收集眼球運(yùn)動(dòng)跟蹤數(shù)據(jù)的不同實(shí)驗(yàn)表明，有幾種典型的模型，訪(fǎng)問(wèn)者通常會(huì)瀏覽網(wǎng)站。在下面的常見(jiàn)模型中，您將找到z模式、zig zag模式和f模式。讓我們看看他們的計(jì)劃是什么。
Z模式對(duì)于信息呈現(xiàn)統(tǒng)一、視覺(jué)層次弱的網(wǎng)頁(yè)來(lái)說(shuō)是非常典型的。從該方案可以看出，它確定了四個(gè)活動(dòng)區(qū)——其中兩個(gè)穿過(guò)典型的航向區(qū)。
另一種方案是zig-zag版本，這對(duì)于具有內(nèi)容塊可視分區(qū)的頁(yè)面來(lái)說(shuō)是典型的。類(lèi)似地，讀者的眼睛從左上角向右移動(dòng)，然后移動(dòng)到整個(gè)頁(yè)面的右上角，掃描初始交互區(qū)域中的信息。