編輯導(dǎo)語：界面作為人與機中間的信息傳遞媒介，是我們交互設(shè)計中關(guān)注的重中之重。那如何才能做好界面設(shè)計呢？作者從粘性標(biāo)題和界面排版分享了自己的想法，我們一起來看看吧。

總是被唯美的設(shè)計界面吸引，是不是苦惱自己為什么做不出那樣的效果？粘性標(biāo)題，界面設(shè)計的小秘訣這次一股腦告訴你！

一、粘性標(biāo)題

粘性標(biāo)題（或持久標(biāo)題）是設(shè)計行業(yè)一種常見標(biāo)題模式，用于在用戶向下滾動頁面時將網(wǎng)站或應(yīng)用程序的標(biāo)題保持在屏幕上的同一位置。

這種標(biāo)題模式的另一個版本是部分粘性標(biāo)題，一旦用戶開始向上滾動，它就會重新出現(xiàn)在頁面頂部。

如果使用得當(dāng)，粘性標(biāo)題可以讓用戶快速訪問導(dǎo)航、搜索程序?qū)Ш皆兀鵁o需向上滾動到頁面頂部。它們增加了標(biāo)題中元素的可發(fā)現(xiàn)性以及用戶利用它們的機會。

Accenture 的桌面站點使用包含站點導(dǎo)航、搜索和實用程序?qū)Ш降恼承詷?biāo)題。當(dāng)用戶滾動時，標(biāo)題保持原位。

但是，如果實施不當(dāng)，粘性標(biāo)題會令人討厭、分散注意力并阻礙頁面內(nèi)容。

5個Tips，讓你的粘性標(biāo)題設(shè)計可以真正幫助到用戶，不讓他們心煩。

1. 保持較小尺寸，最大化內(nèi)容與瀏覽器的比率

粘性標(biāo)題本身會占用屏幕上可用于內(nèi)容的空間，因此充分利用空間非常重要。鑒于屏幕尺寸較小，這一因素在移動設(shè)備上顯得更為重要。

想要確保內(nèi)容與瀏覽器的比例最大化，以便粘性標(biāo)題占用最少的空間，而且仍提供適當(dāng)?shù)目勺x文本和可點擊的目標(biāo)。

在觸摸屏設(shè)備上，確保所有點擊目標(biāo)最小為 1cm × 1 cm，所有文本大約為 16pt（取決于x-高度和字體中字體的整體獨特性），同時仍然保持適當(dāng)?shù)拿缹W(xué)設(shè)計。

在桌面上，雖然有更多的空間可以使用，如果只是為了使徽標(biāo)盡可能大一些，仍然不建議在標(biāo)題中使用過多的空像素。

同樣，從標(biāo)題元素的可讀文本大小開始，從那里最小化垂直高度。

左：紐約客的粘性標(biāo)題在 iPhone 11 Pro 上，內(nèi)容與標(biāo)題的比例為 13:1，這是一個合理的空間權(quán)衡。（注意：這個計算不包括瀏覽器的 URL 欄或 iOS 狀態(tài)欄，兩者都消耗像素，但不在網(wǎng)站設(shè)計者的控制范圍內(nèi)。）

右：Lollar Pickups 的內(nèi)容與瀏覽器的比例僅為 2:1在同一臺設(shè)備上，帶有過大的半透明徽標(biāo)標(biāo)題，無法與內(nèi)容形成足夠的對比度，并且頁面底部不必要的重復(fù)標(biāo)簽欄也很礙事。

2. 內(nèi)容對比很重要

為粘性標(biāo)題選擇合適的背景顏色，需要考慮頁面上各處的標(biāo)題和內(nèi)容之間是否有足夠的視覺差異。

由于標(biāo)題將出現(xiàn)在頁面上每個點的頂部，因此它與背景具有足夠的視覺對比以使其醒目、可讀并且要使懸停在其上的內(nèi)容進行清楚地區(qū)分。任何展開的子菜單或下拉菜單也應(yīng)與背景清楚地分開。

因此，粘性標(biāo)題必須是不透明的顏色，與主要內(nèi)容區(qū)域的背景不同。

盡管半透明的粘性標(biāo)題旨在使更多的頁面內(nèi)容可見，但這些標(biāo)題導(dǎo)致的低對比度使半可見的內(nèi)容難以閱讀，并且經(jīng)常分散用戶的注意力。

3. 保持動作最小、自然和反應(yīng)靈敏

動畫對于用戶來說通常具有破壞性、容易分散注意力，所以盡量不要將它用于粘性標(biāo)題。在用戶滾動時簡單地將標(biāo)題保持在適當(dāng)?shù)奈恢谩?/p>

有兩種情況可能需要動畫：

1. 縮小大的標(biāo)題區(qū)域
2. 或部分持久的標(biāo)題（更多關(guān)于這個主題的內(nèi)容在下面的tip4 中）

雖然通常不建議使用非常大的標(biāo)題區(qū)域，但偶爾會考慮與用戶體驗，要求在頁面頂部使用大徽標(biāo)；當(dāng)用戶滾動時，徽標(biāo)會縮小，就像下面的 Michigan.gov 示例一樣。

這個動畫應(yīng)該是快速、流暢和即時的。標(biāo)題應(yīng)該以典型的滾動速度縮小，并且不應(yīng)該消失、跳躍或以其他方式驚嚇到用戶。

當(dāng)用戶滾動鼠標(biāo)時，Michigan.gov 的粘性標(biāo)題會縮小，但會以突然的方式縮小，消失片刻，然后突然重新出現(xiàn)。

粘性標(biāo)題也應(yīng)該留在瀏覽器窗口頂部或側(cè)面的固定位置，而不是在延遲后快速定位（這種模式稱為“跟蹤者菜單”）。

4. 考慮部分持久的標(biāo)題

部分持久的標(biāo)題最常出現(xiàn)在移動網(wǎng)站上，在某些情況下，它提供了兩全其美的優(yōu)點：可以從頁面上的任何位置輕松訪問的標(biāo)題，但在閱讀和向下滾動頁面時會不太明顯。

這種風(fēng)格效果一般。部分持久的標(biāo)題假定任何的向上滾動都表明用戶想要訪問標(biāo)題。

在許多情況下這是對的，但在某些情況下則不然——例如，用戶可能只是想重讀前一段。在這種情況下，與部分持久標(biāo)題相關(guān)聯(lián)的動畫可能會分散用戶的注意力。

這就是為什么動畫應(yīng)該不顯眼，既不能太早也不能太慢。感覺像是由用戶手動滾動到視圖中，但實際上是由用戶向上滾動幾個像素觸發(fā)的，即如果用戶停止向上滾動，標(biāo)題應(yīng)繼續(xù)完全以動畫形式進入視圖。大約300-400毫秒長的滑入動畫將保留這種自然的感覺，且不分散注意力。

CB2 有一個部分持久的標(biāo)頭。向下滾動會觸發(fā)標(biāo)題以動畫方式移出視圖，向上滾動會觸發(fā)標(biāo)題以動畫方式返回視圖。

動畫的速度類似于用戶的自然滾動速度，因此不會過于分散注意力或突兀。用戶必須在任一方向滾動多個像素才能觸發(fā)動畫，因此不會感覺過于敏感，也不太可能被不穩(wěn)定的手意外觸發(fā)。

5. 考慮是否需要一個粘性標(biāo)題

要考慮的最后一個方面是粘性標(biāo)題是否真的需要。

最終，通過使用粘性標(biāo)題，可以在網(wǎng)站的每個頁面上放棄一些屏幕空間。而且，如果粘性標(biāo)題對你的用戶沒有幫助，那么您對其設(shè)計所做的任何其他優(yōu)化都沒有實際意義。

• 通過以下幾個問題可以對粘性標(biāo)題進行成本效益分析，來決定是否要在你的設(shè)計中加入粘性標(biāo)題：
• 您的標(biāo)題將包含哪些類型的元素？主導(dǎo)航？實用導(dǎo)航？一個標(biāo)志？
• 這些元素是否可能經(jīng)?；蛟跁h期間的任何時候都需要？

例如，如果您的標(biāo)題中有一個登錄按鈕，您的用戶是否可能會登錄您網(wǎng)站的任何頁面？

如果您的主要導(dǎo)航類別在標(biāo)題中，用戶會在一次會話期間從一個類別跳到下一個類別，還是更有可能他們整個時間都停留在一個類別中？

此類問題的答案將因站點類型及其支持的任務(wù)和內(nèi)容而異。

二、界面排版

精美的網(wǎng)頁及界面設(shè)計可以讓我們一下就注意到，但是我們通常很難說出為什么這些設(shè)計看起來那么舒適。接下來分析三種用戶界面設(shè)計并討論使它們具有吸引力的視覺設(shè)計原則。

1. 排版和間距

第一個例子來自Medium.com。這種設(shè)計利用網(wǎng)格、空白和排版系統(tǒng)來創(chuàng)造舒適而美麗的閱讀體驗。

Medium 的設(shè)計很簡單，但很有吸引力。周到的排版系統(tǒng)、間距和一致的左對齊使用戶易于閱讀，同時附加信息顯示在視覺上有凝聚力的側(cè)邊欄中。

該設(shè)計使用 3 列網(wǎng)格。每個文本元素都與網(wǎng)格線對齊。左側(cè)邊欄中的圖標(biāo)之間使用一致的填充單位（垂直空白分隔元素），而雙重相同單位用于分隔分組。小寫字母區(qū)分了WRITTEN BY 的標(biāo)題，超寬敞的前導(dǎo)使設(shè)計感覺通風(fēng)且易于使用。

1）對齊到網(wǎng)格

首先，有一個列網(wǎng)格（上圖中的粉紅色線）。列網(wǎng)格提供對象對齊的垂直錨定線。

由于側(cè)邊欄內(nèi)容與最左邊的網(wǎng)格線左對齊，所以設(shè)計看起來很清晰，側(cè)邊欄內(nèi)容很容易瀏覽。文章文本也與列網(wǎng)格線左對齊。在你的設(shè)計中，設(shè)置一個列網(wǎng)格并使不同頁面和元素的對齊方式保持一致。

2）排版差異

Medium 使用同一字體系列中的不同字體樣式（小寫字母、粗體、斜體、下劃線）和顏色的細微變化（黑色與灰色）來區(qū)分不同類型的內(nèi)容。

雖然太多的多樣性會破壞一致性并使設(shè)計看起來很隨意，但 Medium 的變體是一致且有目的的。

例如，WRITTEN BY中的小寫字母表示它是一個節(jié)標(biāo)題。根據(jù)經(jīng)驗，確定排版系統(tǒng)并將你的設(shè)計限制在 1-2 種字體；使用相同的類型變體即斜體、粗體、字母。

3）字距調(diào)整和跟蹤調(diào)整

設(shè)計師要考慮字體之間由于其特殊形狀而產(chǎn)生的尷尬間距。字距調(diào)整通常應(yīng)用于較大的文字類型，如標(biāo)題，其中空格更明顯。

間隙通常出現(xiàn)在形成一個角度的字母周圍，如 W、Y、V 或 T。雖然大多數(shù)字體系列會自動調(diào)整字距調(diào)整，但也要考慮手動調(diào)整大標(biāo)題或字母之間的明顯間距。

總的來說，這些設(shè)計細節(jié)使設(shè)計美觀，同時實現(xiàn)了網(wǎng)頁的主要目的——易于閱讀。

2. 層次結(jié)構(gòu)和顏色

第二個例子來自維生素公司Ritual.com。這種設(shè)計使用層次結(jié)構(gòu)、顏色和圖像來創(chuàng)造有吸引力的視覺體驗。

Ritual 的設(shè)計利用比例和顏色來創(chuàng)建頁面層次結(jié)構(gòu)

此設(shè)計以 3 條錨線為中心內(nèi)容。每個產(chǎn)品的標(biāo)題、圖像、描述和按鈕都以其中一行為中心。調(diào)色板是有限的——由原藍色和黃色制成。這種類型的調(diào)色板允許內(nèi)容（藍色）和號召性用語（黃色）之間形成鮮明對比。

1）精致調(diào)色板

僅限于兩種基本顏色：藍色和黃色，經(jīng)典互補色。

所選擇的特定藍色和黃色有助于提高設(shè)計的吸引力——黃色不太亮，藍色足夠暗，可以在白色背景上閱讀。

如果黃色和藍色是主要顏色（青色和熒光筆黃色），那么設(shè)計看起來更像是 90年代初期的網(wǎng)站設(shè)計。

在為你的設(shè)計選擇色調(diào)時，請切換不同的顏色，看看哪些顏色搭配起來看起來不錯。遠離熒光色，從原色稍微調(diào)整顏色將會優(yōu)化你的顏色選擇。例如，上面的屏幕截圖已被更改（如下）以展示。

這張經(jīng)過修改的圖像不僅讓設(shè)計看起來不那么精致，而且黃色按鈕變得更難閱讀。

我們喜歡使用Adobe Color來獲得調(diào)色板靈感。如果你喜歡另一個網(wǎng)站上的顏色，請試著找出為什么——是特定的顏色組合、色調(diào)還是飽和度？

通過將調(diào)色板限制為幾種顏色，可以將重點放在設(shè)計上，因為要考慮的元素很少，所以干擾更少。該設(shè)計將創(chuàng)造更強大的品牌代表性。

清晰的視覺層次，視覺層次結(jié)構(gòu)引導(dǎo)眼睛并指示重要的頁面元素。

在這個例子中，眼睛首先吸引到最大的排版元素大標(biāo)題。然后我們的注意力轉(zhuǎn)移到黃色圖像和添加到購物車按鈕上。

標(biāo)題中的混合排版處理：“Essential for women ”，是為了強調(diào)產(chǎn)品的重要性以及它們是為女性定制的事實。

在您自己的設(shè)計中，混合類型處理時，請務(wù)必：

① 在一個標(biāo)題中最多使用兩種不同的字體處理方式

對最重要的詞使用粗體或下劃線，對次要的詞使用斜體。少即是多——例如，如果“women”也有下劃線，設(shè)計就會顯得隨意。它將與“Essential”的大膽處理競爭并破壞閱讀等級。

② 保持頁面樣式一致

由于“Essential”在此標(biāo)題中以粗體顯示，因此應(yīng)在“Essential for man ”類別登錄頁面上以粗體顯示。閱讀標(biāo)題后，我們的注意力轉(zhuǎn)移到大型產(chǎn)品圖片和黃色的“添加到購物車”按鈕上。

③ 使用高質(zhì)量的圖像

圖像可以為產(chǎn)品描述添加有價值的信息。照片的直接風(fēng)格，沒有多余的雜亂來分散產(chǎn)品注意力，也會影響整體視覺設(shè)計。

圖像背景與產(chǎn)品的背景無縫融合，使頁面看起來很精致。設(shè)計中的照片應(yīng)該幫助用戶直觀地理解產(chǎn)品或概念，而不僅僅是裝飾。

為了提升設(shè)計美感，可以讓圖像將它們的背景顏色與其周圍空間的背景顏色相匹配來融入設(shè)計的其余部分。

3. 一致性

第三個例子來自Spotify移動應(yīng)用程序。這種設(shè)計有效地利用了視覺處理的一致性，在整個應(yīng)用程序中創(chuàng)造了一個有凝聚力的聆聽體驗。

Spotify 應(yīng)用程序使用自定義圖稿、顏色和間距的一致性來創(chuàng)建凝聚力，同時保持應(yīng)用程序多個區(qū)域的清晰度。

視覺一致性是 Spotify 精美外觀的主要貢獻者。有對齊、排版和填充的一致性，以及流派藝術(shù)作品的一致性。這種一致性的一個例外是流行播放列表和下方圖塊（中間屏幕）之間的間距，這與Classic Rock和下方圖塊（右屏幕）之間的間距不匹配。理想情況下，這兩個地方的間距也應(yīng)該保持一致。間距清楚地建立了分組，而顏色區(qū)分流派。

1）一致的視覺處理

當(dāng)視覺元素不一致或零星使用時，設(shè)計將看起來很不專業(yè)且缺乏修飾。在Spotify 中，許多視覺元素在應(yīng)用程序的不同區(qū)域保持一致。

1. 在所有應(yīng)用程序屏幕上，列之間的間距大小都相同。
2. 在流派中，頂部網(wǎng)格線和排版處理保持一致。雖然漸變顏色因流派而異，但仍保持一致的色調(diào)和飽和度。
3. 每個類別都有一個帶有自定義藝術(shù)品的磁貼。雖然每個類別都有特定的顏色和圖形，但圖塊在布局和層次結(jié)構(gòu)上是一致的。

例如，每個類別的名稱（例如，搜索屏幕上的流行、搖滾）在每個圖塊上的位置相同。磁貼中的圖像（即專輯封面）始終在右側(cè)，從磁貼上滲出。這些細節(jié)使整體設(shè)計感覺有凝聚力。

在你的設(shè)計中，應(yīng)該致力于創(chuàng)建一個視覺系統(tǒng)。例如，使網(wǎng)頁周圍的元素間距相同或相同單位的倍數(shù)。

例如，如果標(biāo)題和正文之間的基本間距為 5px，則可以使用 2 個基本間距單位來分隔不同的部分，等等。

2）創(chuàng)建分組的空間

相似元素周圍的間距有助于建立組。在我們的示例中，流派（流行和搖滾）中的內(nèi)容塊之間的最小空間表示它們屬于同一目錄。

在設(shè)計中創(chuàng)建分組時，標(biāo)題與其內(nèi)容之間使用更少的空間，并在組之間使用更多空間。

三、總結(jié)

粘性標(biāo)題是網(wǎng)站的積極補充，但前提是它們真正需要為用戶提供服務(wù)。

如果粘性標(biāo)題確實為用戶提供了價值，那么請確保其盡可能小，與背景具有高對比度，不使用無意義的動畫，不模糊內(nèi)容，并且不會分散用戶的注意力。

設(shè)計不是偶然的。設(shè)計中的每一個決定都應(yīng)該有意識地輸出，最好有視覺設(shè)計系統(tǒng)的支持。雖然沒有什么可以解釋設(shè)計是否好看，但遵循一些原則會增加它的可能性：

• 將排版和其他圖形元素與網(wǎng)格對齊。將每個元素錨定到網(wǎng)格系統(tǒng)中的一條線上。
• 建立清晰的層次結(jié)構(gòu)和調(diào)色板。確定您的設(shè)計中最重要的內(nèi)容，并有意識地對其應(yīng)用特定的視覺處理（大小、顏色、位置），以便用戶首先看到它。
• 保持一致。定義清晰的視覺規(guī)則并在整個設(shè)計中始終如一地應(yīng)用它們。

正是這些設(shè)計原則的應(yīng)用共同使設(shè)計變得美觀并有助于提供有用的體驗。

作者：Kiki；公眾號：空兩格

原文鏈接：https://mp.weixin.qq.com/s/DRB_5bTuWCzULPesnn34Pw

本文由 @Kiki 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議