編輯導語：介面作為人與機中間的資訊傳遞媒介，是我們互動設計中關注的重中之重。那如何才能做好介面設計呢？作者從粘性標題和介面排版分享了自己的想法，我們一起來看看吧。
總是被唯美的設計介面吸引，是不是苦惱自己為什麼做不出那樣的效果？粘性標題，介面設計的小秘訣這次一股腦告訴你！
一、粘性標題
粘性標題（或持久標題）是設計行業一種常見標題模式，用於在使用者向下滾動頁面時將網站或應用程式的標題保持在螢幕上的同一位置。
這種標題模式的另一個版本是部分粘性標題，一旦使用者開始向上滾動，它就會重新出現在頁面頂部。
如果使用得當，粘性標題可以讓使用者快速訪問導航、搜尋程式導航元素，而無需向上滾動到頁面頂部。它們增加了標題中元素的可發現性以及使用者利用它們的機會。
Accenture 的桌面站點使用包含站點導航、搜尋和實用程式導航的粘性標題。當用戶滾動時，標題保持原位。
但是，如果實施不當，粘性標題會令人討厭、分散注意力並阻礙頁面內容。
5個Tips，讓你的粘性標題設計可以真正幫助到使用者，不讓他們心煩。
1。 保持較小尺寸，最大化內容與瀏覽器的比率
粘性標題本身會佔用螢幕上可用於內容的空間，因此充分利用空間非常重要。鑑於螢幕尺寸較小，這一因素在移動裝置上顯得更為重要。
想要確保內容與瀏覽器的比例最大化，以便粘性標題佔用最少的空間，而且仍提供適當的可讀文字和可點選的目標。
在觸控式螢幕裝置上，確保所有點選目標最小為 1cm × 1 cm，所有文字大約為 16pt（取決於x-高度和字型中字型的整體獨特性），同時仍然保持適當的美學設計。
在桌面上，雖然有更多的空間可以使用，如果只是為了使徽標儘可能大一些，仍然不建議在標題中使用過多的空畫素。
同樣，從標題元素的可讀文字大小開始，從那裡最小化垂直高度。
左：紐約客的粘性標題在 iPhone 11 Pro 上，內容與標題的比例為 13：1，這是一個合理的空間權衡。（注意：這個計算不包括瀏覽器的 URL 欄或 iOS 狀態列，兩者都消耗畫素，但不在網站設計者的控制範圍內。）
右：Lollar Pickups 的內容與瀏覽器的比例僅為 2：1在同一臺裝置上，帶有過大的半透明徽標標題，無法與內容形成足夠的對比度，並且頁面底部不必要的重複標籤欄也很礙事。
2。 內容對比很重要
為粘性標題選擇合適的背景顏色，需要考慮頁面上各處的標題和內容之間是否有足夠的視覺差異。
由於標題將出現在頁面上每個點的頂部，因此它與背景具有足夠的視覺對比以使其醒目、可讀並且要使懸停在其上的內容進行清楚地區分。任何展開的子選單或下拉選單也應與背景清楚地分開。
因此，粘性標題必須是不透明的顏色，與主要內容區域的背景不同。
儘管半透明的粘性標題旨在使更多的頁面內容可見，但這些標題導致的低對比度使半可見的內容難以閱讀，並且經常分散使用者的注意力。
3。 保持動作最小、自然和反應靈敏
動畫對於使用者來說通常具有破壞性、容易分散注意力，所以儘量不要將它用於粘性標題。在使用者滾動時簡單地將標題保持在適當的位置。
有兩種情況可能需要動畫：
縮小大的標題區域
或部分持久的標題（更多關於這個主題的內容在下面的tip4 中）
雖然通常不建議使用非常大的標題區域，但偶爾會考慮與使用者體驗，要求在頁面頂部使用大徽標；當用戶滾動時，徽標會縮小，就像下面的 Michigan。gov 示例一樣。
這個動畫應該是快速、流暢和即時的。標題應該以典型的滾動速度縮小，並且不應該消失、跳躍或以其他方式驚嚇到使用者。
當用戶滾動滑鼠時，Michigan。gov 的粘性標題會縮小，但會以突然的方式縮小，消失片刻，然後突然重新出現。
粘性標題也應該留在瀏覽器視窗頂部或側面的固定位置，而不是在延遲後快速定位（這種模式稱為“跟蹤者選單”）。
4。 考慮部分持久的標題
部分持久的標題最常出現在移動網站上，在某些情況下，它提供了兩全其美的優點：可以從頁面上的任何位置輕鬆訪問的標題，但在閱讀和向下滾動頁面時會不太明顯。
這種風格效果一般。部分持久的標題假定任何的向上滾動都表明使用者想要訪問標題。
在許多情況下這是對的，但在某些情況下則不然——例如，使用者可能只是想重讀前一段。在這種情況下，與部分持久標題相關聯的動畫可能會分散使用者的注意力。
這就是為什麼動畫應該不顯眼，既不能太早也不能太慢。感覺像是由使用者手動滾動到檢視中，但實際上是由使用者向上滾動幾個畫素觸發的，即如果使用者停止向上滾動，標題應繼續完全以動畫形式進入檢視。大約300-400毫秒長的滑入動畫將保留這種自然的感覺，且不分散注意力。
CB2 有一個部分持久的標頭。向下滾動會觸發標題以動畫方式移出檢視，向上滾動會觸發標題以動畫方式返回檢視。
動畫的速度類似於使用者的自然滾動速度，因此不會過於分散注意力或突兀。使用者必須在任一方向滾動多個畫素才能觸發動畫，因此不會感覺過於敏感，也不太可能被不穩定的手意外觸發。
5。 考慮是否需要一個粘性標題
要考慮的最後一個方面是粘性標題是否真的需要。
最終，透過使用粘性標題，可以在網站的每個頁面上放棄一些螢幕空間。而且，如果粘性標題對你的使用者沒有幫助，那麼您對其設計所做的任何其他最佳化都沒有實際意義。
透過以下幾個問題可以對粘性標題進行成本效益分析，來決定是否要在你的設計中加入粘性標題：
您的標題將包含哪些型別的元素？主導航？實用導航？一個標誌？
這些元素是否可能經常或在會議期間的任何時候都需要？
例如，如果您的標題中有一個登入按鈕，您的使用者是否可能會登入您網站的任何頁面？
如果您的主要導航類別在標題中，使用者會在一次會話期間從一個類別跳到下一個類別，還是更有可能他們整個時間都停留在一個類別中？
此類問題的答案將因站點型別及其支援的任務和內容而異。
二、介面排版
精美的網頁及介面設計可以讓我們一下就注意到，但是我們通常很難說出為什麼這些設計看起來那麼舒適。接下來分析三種使用者介面設計並討論使它們具有吸引力的視覺設計原則。
1。 排版和間距
第一個例子來自Medium。com。這種設計利用網格、空白和排版系統來創造舒適而美麗的閱讀體驗。
Medium 的設計很簡單，但很有吸引力。周到的排版系統、間距和一致的左對齊使使用者易於閱讀，同時附加資訊顯示在視覺上有凝聚力的側邊欄中。
該設計使用 3 列網格。每個文字元素都與網格線對齊。左側邊欄中的圖示之間使用一致的填充單位（垂直空白分隔元素），而雙重相同單位用於分隔分組。小寫字母區分了WRITTEN BY 的標題，超寬敞的前導使設計感覺通風且易於使用。
1）對齊到網格
首先，有一個列網格（上圖中的粉紅色線）。列網格提供物件對齊的垂直錨定線。
由於側邊欄內容與最左邊的網格線左對齊，所以設計看起來很清晰，側邊欄內容很容易瀏覽。文章文字也與列網格線左對齊。在你的設計中，設定一個列網格並使不同頁面和元素的對齊方式保持一致。
2）排版差異
Medium 使用同一字體系列中的不同字型樣式（小寫字母、粗體、斜體、下劃線）和顏色的細微變化（黑色與灰色）來區分不同型別的內容。
雖然太多的多樣性會破壞一致性並使設計看起來很隨意，但 Medium 的變體是一致且有目的的。
例如，WRITTEN BY中的小寫字母表示它是一個節標題。根據經驗，確定排版系統並將你的設計限制在 1-2 種字型；使用相同的型別變體即斜體、粗體、字母。
3）字距調整和跟蹤調整
設計師要考慮字型之間由於其特殊形狀而產生的尷尬間距。字距調整通常應用於較大的文字型別，如標題，其中空格更明顯。
間隙通常出現在形成一個角度的字母周圍，如 W、Y、V 或 T。雖然大多數字體系列會自動調整字距調整，但也要考慮手動調整大標題或字母之間的明顯間距。
總的來說，這些設計細節使設計美觀，同時實現了網頁的主要目的——易於閱讀。
2。 層次結構和顏色
第二個例子來自維生素公司Ritual。com。這種設計使用層次結構、顏色和影象來創造有吸引力的視覺體驗。
Ritual 的設計利用比例和顏色來建立頁面層次結構
此設計以 3 條錨線為中心內容。每個產品的標題、影象、描述和按鈕都以其中一行為中心。調色盤是有限的——由原藍色和黃色製成。這種型別的調色盤允許內容（藍色）和號召性用語（黃色）之間形成鮮明對比。
1）精緻調色盤
僅限於兩種基本顏色：藍色和黃色，經典互補色。
所選擇的特定藍色和黃色有助於提高設計的吸引力——黃色不太亮，藍色足夠暗，可以在白色背景上閱讀。
如果黃色和藍色是主要顏色（青色和熒光筆黃色），那麼設計看起來更像是 90年代初期的網站設計。
在為你的設計選擇色調時，請切換不同的顏色，看看哪些顏色搭配起來看起來不錯。遠離熒光色，從原色稍微調整顏色將會最佳化你的顏色選擇。例如，上面的螢幕截圖已被更改（如下）以展示。
這張經過修改的影象不僅讓設計看起來不那麼精緻，而且黃色按鈕變得更難閱讀。
我們喜歡使用Adobe Color來獲得調色盤靈感。如果你喜歡另一個網站上的顏色，請試著找出為什麼——是特定的顏色組合、色調還是飽和度？
透過將調色盤限制為幾種顏色，可以將重點放在設計上，因為要考慮的元素很少，所以干擾更少。該設計將創造更強大的品牌代表性。
清晰的視覺層次，視覺層次結構引導眼睛並指示重要的頁面元素。
在這個例子中，眼睛首先吸引到最大的排版元素大標題。然後我們的注意力轉移到黃色影象和新增到購物車按鈕上。
標題中的混合排版處理：“Essential for women ”，是為了強調產品的重要性以及它們是為女性定製的事實。
在您自己的設計中，混合型別處理時，請務必：
在一個標題中最多使用兩種不同的字型處理方式
對最重要的詞使用粗體或下劃線，對次要的詞使用斜體。少即是多——例如，如果“women”也有下劃線，設計就會顯得隨意。它將與“Essential”的大膽處理競爭並破壞閱讀等級。
保持頁面樣式一致
由於“Essential”在此標題中以粗體顯示，因此應在“Essential for man ”類別登入頁面上以粗體顯示。閱讀標題後，我們的注意力轉移到大型產品圖片和黃色的“新增到購物車”按鈕上。
使用高質量的影象
影象可以為產品描述新增有價值的資訊。照片的直接風格，沒有多餘的雜亂來分散產品注意力，也會影響整體視覺設計。
影象背景與產品的背景無縫融合，使頁面看起來很精緻。設計中的照片應該幫助使用者直觀地理解產品或概念，而不僅僅是裝飾。
為了提升設計美感，可以讓影象將它們的背景顏色與其周圍空間的背景顏色相匹配來融入設計的其餘部分。
3。 一致性
第三個例子來自Spotify移動應用程式。這種設計有效地利用了視覺處理的一致性，在整個應用程式中創造了一個有凝聚力的聆聽體驗。
Spotify 應用程式使用自定義圖稿、顏色和間距的一致性來建立凝聚力，同時保持應用程式多個區域的清晰度。
視覺一致性是 Spotify 精美外觀的主要貢獻者。有對齊、排版和填充的一致性，以及流派藝術作品的一致性。這種一致性的一個例外是流行播放列表和下方圖塊（中間螢幕）之間的間距，這與Classic Rock和下方圖塊（右螢幕）之間的間距不匹配。理想情況下，這兩個地方的間距也應該保持一致。間距清楚地建立了分組，而顏色區分流派。
1）一致的視覺處理
當視覺元素不一致或零星使用時，設計將看起來很不專業且缺乏修飾。在Spotify 中，許多視覺元素在應用程式的不同區域保持一致。
在所有應用程式螢幕上，列之間的間距大小都相同。
在流派中，頂部網格線和排版處理保持一致。雖然漸變顏色因流派而異，但仍保持一致的色調和飽和度。
每個類別都有一個帶有自定義藝術品的磁貼。雖然每個類別都有特定的顏色和圖形，但圖塊在佈局和層次結構上是一致的。
例如，每個類別的名稱（例如，搜尋螢幕上的流行、搖滾）在每個圖塊上的位置相同。磁貼中的影象（即專輯封面）始終在右側，從磁貼上滲出。這些細節使整體設計感覺有凝聚力。
在你的設計中，應該致力於建立一個視覺系統。例如，使網頁周圍的元素間距相同或相同單位的倍數。
例如，如果標題和正文之間的基本間距為 5px，則可以使用 2 個基本間距單位來分隔不同的部分，等等。
2）建立分組的空間
相似元素周圍的間距有助於建立組。在我們的示例中，流派（流行和搖滾）中的內容塊之間的最小空間表示它們屬於同一目錄。
在設計中建立分組時，標題與其內容之間使用更少的空間，並在組之間使用更多空間。
三、總結
粘性標題是網站的積極補充，但前提是它們真正需要為使用者提供服務。
如果粘性標題確實為使用者提供了價值，那麼請確保其儘可能小，與背景具有高對比度，不使用無意義的動畫，不模糊內容，並且不會分散使用者的注意力。
設計不是偶然的。設計中的每一個決定都應該有意識地輸出，最好有視覺設計系統的支援。雖然沒有什麼可以解釋設計是否好看，但遵循一些原則會增加它的可能性：
將排版和其他圖形元素與網格對齊。將每個元素錨定到網格系統中的一條線上。
建立清晰的層次結構和調色盤。確定您的設計中最重要的內容，並有意識地對其應用特定的視覺處理（大小、顏色、位置），以便使用者首先看到它。
保持一致。定義清晰的視覺規則並在整個設計中始終如一地應用它們。
正是這些設計原則的應用共同使設計變得美觀並有助於提供有用的體驗。
作者：Kiki；公眾號：空兩格
本文由 @Kiki 授權釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議
