精簡畫面
第一個畫面就是任務,只畫一次,以工作的寬度呈現。第二句話、第二個數字或第二個面板必須透過改變使用者接下來要做的動作來證明其存在的價值。
這項技能管轄的是程式碼代理預設會發出的畫面模板:指標英雄、解釋性副標題、均等卡片、被壓縮的居中欄位,以及偽裝成儀表板的列表。它不掌管任務邏輯、表單或無障礙性。這些仍屬於 ux-best-practices。它不挑選視覺識別。如果已有設計系統,請使用它。不要為了套用這項技能而重新設計產品樣式。
在宣告畫面完成之前,請執行 references/tells.md 中的檢查清單。比對到項目表示需要刪除裝飾或移動該事實。刪除使用者仍需要的功能,且未留下任何存取路徑,就是一個失敗的畫面。
開始繪製前
從你面前的產品中,為這個畫面命名其任務。不要借用先前專案的任務、名詞或動詞。
將畫面與其任務匹配:
- 在現有表面的單一操作 → 一個按鈕。不要建立一個頁面。
- 使用者會操作的一個列表 → 就是那個列表。
- 他們會閱讀或編輯的一筆記錄 → 就是那筆記錄。
- 他們來檢查的一個數值 → 就是那個數值。
主要控制項使用任務的動詞。「新增」、「編輯」和「刪除」只有在它們本身是任務時才是主要控制項。「開啟」不是一個任務動詞。次要操作應保持低調,且不位於第一個閱讀聚類中。
其餘內容的位置
按需取用表示一個有使用者可預測名稱的位置。摘要、歷史記錄、一組總計或一個少用的工具會獲得一個面板、第二個檢視或一個安靜的欄位。建立那個位置。不要因為某個事實不允許成為英雄卡片就將它刪除。
以內部內容的名稱來命名該位置。「資料」、「更多」和「資訊」都不是名稱。如果上一個畫面有某項功能,而這個畫面沒有任何方式可以到達它,則此畫面尚未完成。
一個分頁或第二個檢視是不同的任務,而不是同一組卡片的第二份副本。不要在第一個畫面上放置一個其唯一目的是隱藏儀表板的控制項。如果該面板需要一個隱藏按鈕,它原本就不該在第一個畫面上。
產品具有外殼
當產品有多個區域時,這些區域位於一個持久的側邊導航中。將它們分組。標記當前區域。當某個項目上的計數是使用者會處理的待辦事項時,才放上該計數。頁面只是一個區域。它不應承載產品的其餘部分,也不應因為容納不下而刪除其他區域。
同一個區域的少數幾個模式是標題下方的分頁,以模式名稱命名。同一個列表的少數幾個穩定檢視(含計數)則與列表放在一起。它們不是四個下拉選單,也不是第二個側邊欄。
全域搜尋屬於外殼。此列表的搜尋屬於該列表。該區域的主要操作位於工作開始的地方。次要工具保持在外殼中,保持低調。
一個長目錄顯示一個視窗以及一個檢視其餘內容的誠實方式。它不傾倒每一行,也不將其餘內容藏在一個未命名的控制項後面。
個性來自於構圖
使用產品已有的字體、強調色和密度。如果產品沒有,則使用一種中性文字字體和一種強調色。強調色標記活躍的導航項目和主要操作。幾乎所有其他東西都是中性的。
完成度來自於對齊、清晰的欄位排列、淡化的次要文字,以及當前位置一目了然。一個顯示字體、漸層或新的調色板無法修復結構錯誤的頁面。不要為了讓產品看起來有設計感而重新設計樣式。
第一個畫面包含的內容
只有這個任務現在需要的東西。順序、狀態和動詞遵循任務。它們不是固定的佈局。
- 當使用者必須對項目執行操作時,顯示項目和操作。只有當任務是完成工作時,才把未完成的工作放在最前面。目錄保持使用者要求的順序。
- 當使用者必須閱讀或比較時,顯示該閱讀內容。只有當比較是任務時,幾個可比較的度量值可以放在一個緊湊的行中。每個度量值都帶有一個真實的比較(前期、目標或一個誠實的空值)。只有當數列存在時,才能使用迷你圖或圖表。圖說不重複數字。卡片上的徽章不取代比較。如果整個任務就是一個度量值,則該度量值只出現一次,而不是作為三個裝飾的同級項目。
- 當任務是單一操作時,畫面就是那個操作。
- 一個狀態詞只有在它改變使用者接下來要做的動作時才出現。一個詞,而且必須是真實的。對部分完成的工作使用成功樣式是一種謊言。部分完成就是部分完成。
計數只允許出現一次,小小的,放在它所計數的東西旁邊,並且只有在它會改變下一個動作時才使用。當數字本身不是工作時,大於工作的數字就是虛榮。兩個意義不同但看起來像一對的大數字是一個虛假的韻腳。保留決定下一次點擊的那一個事實。
離開第一個畫面的內容
額外的總計、圖表、歷史記錄、空白欄位、少用的篩選器、解釋,以及一個編輯每個欄位的表單。它們會移至上述的名稱位置。它們不會消失,也不會全部傾倒到物件中作為每個列操作的代價。
當總計、圖表或歷史記錄本身就是任務時,才將其保留在第一個畫面上。不要為了讓頁面看起來簡潔而將任務降級為一個揭露區塊。
管理員不是試算表
當任務是管理一個集合時,列就是物件加上操作。名稱是最粗重的文字。任務動詞在該列上。使用者會比較的欄位保留。對於大多數列來說是空白的欄位,以及使用者很少比較的欄位,不要設為欄位。
試算表的失敗是:每個屬性都設為一個欄位、缺少資料的地方使用虛線、每個值上都有複製圖示、名稱下方貼著類別,以及一個只會開啟記錄的單一按鈕。使用全寬來添加這些欄位與狹窄儀表板的錯誤相同。寬度屬於識別和操作。
一列讀起來像一個物件。名稱最強。一個狀態或金額安靜地位於末端。第二行是使用者會掃描的預覽,以淡化方式呈現,而不是一疊標籤。進入記錄的方式是該列本身或一個最終提示,並且它不取代任務動詞。
當使用者正在管理列表時,移除項目是一個列表操作。將它保留在該列上,命名並保持低調,如果必須將其從主要操作中移開,則放在該列的選單中。不要強制進入詳情畫面只是為了刪除。使用物件的名稱進行確認,並說明是記錄消失還是其所指向的內容消失。只有當刪除不常見且比管理列表更危險時,才將其保留在該列之外。然後,詳情畫面持有它,但任務動詞仍在該列上。
構圖
- 一個權重。 瞇眼看。有一個聚類比較重,而那個聚類就是任務。均等的卡片、均等的徽章和均等的頁首按鈕意味著沒有焦點。在添加任何東西之前,先修正權重。
- 工作區的全寬。 工具、表格、佇列或控制台使用外殼旁邊的內容區域。不要將它包裹在
max-w-4xl、max-w-6xl、max-w-7xl或一個在資料侷促時留下寬闊空白邊距的居中狹窄欄位中。僅對預期有人閱讀的散文(約 65–75 個字元)限制行長。 - 沒有重複說明頁面的頁面裝飾。 一個標題,位置或物件的名稱。上方沒有小型大寫的眉題。沒有定義標題的副標題(「圖書館 — 你的圖書館所在之處」)。沒有重複產品名稱的徽章放在標題旁邊。僅當標題尚未說明的某個事實,且該事實會改變動作時,才允許使用第二行。
- 沒有操作說明行。 「點擊一個晶片即可立即篩選」表示該控制項看起來不像一個控制項。修正控制項並刪除該句子。不要吹噓某個互動是即時的。
- 透過位置而非方框進行分組。 鄰近性和一個標題。卡片用於使用者會掃描為一個單位的重複物件,或用於真正的邊界(模態框、可拖曳圖塊)。統計數據、篩選條和表格不應各自獲得一個卡片。永遠不要有卡片中的卡片。一個七項的列表不應變成七個大卡片。
- 一個大部分是空白的欄位不是欄位。 收起它。虛線不是資料。缺少的必要值絕不能看起來像選填的空白。當它會改變動作時顯示這個缺口。當它不會時則省略它。
- 不要三重編碼。 一個分數、一個百分比和一個進度條,對於兩個項目來說是同一個事實的三次表示。當使用者必須完成項目時,優先顯示已命名的、可勾選的項目。無法一眼區分的進度條(50% 對比 67% 的三分之二)不應該存在。
- 不要裝飾列。 當名稱已經存在時加上字母組合圖塊、每個名稱下方重複的類別、永久存在的複製圖示、藥丸形狀加上進度條加上百分比。複製和其他罕見操作應在聚焦時出現。列的高度與其資料相同。
- 破壞性操作保持低調、命名且可觸及。 一個未標示的垃圾桶圖示貼在唯一的按鈕上是誤點。一個僅在「開啟」後才出現的刪除按鈕也是。請遵循上述的管理員規則。
- 篩選器要爭取它們的位置。 當列表長到掃描失敗時,搜尋和篩選器才會出現。偽裝成篩選器的排序(例如「名稱 A–Z」旁邊是「狀態(全部)」)就是排序。一個匹配數為零的篩選晶片不是真實篩選器的同級項目。
- 沒有填充物件。 不要為了讓佈局看起來有內容而發明一行、一個桶或一個樣本記錄。不要顯示一個被截斷或不確定的值,就好像它已經被確認一樣。
當管理員模板出現時
反射動作是:頁首堆疊、一行指標卡片、晶片、一個篩選條、一個有條紋的表格,以及「編輯」加「刪除」。僅在實際任務就是如此時才使用它。否則:
- 一個標題。位置或物件的名稱。
- 任務本身,以內容寬度呈現。一個列表、一筆記錄、一個數值或一個單一操作。不是一個替代佇列。
- 重複說明任務的裝飾從第一個畫面移除。
- 除非任務本身,否則總計和歷史記錄移至一個命名位置。它們不會被刪除。
不要
- 不要為一個只是按鈕的任務添加儀表板。
- 不要將一個閱讀內容、一筆記錄或一個單一操作變成一個未完成物件的佇列。
- 不要用副標題來教使用者如何使用畫面。
- 不要在章節、卡片或頁面上使用「眉題 + 標題 + 輔助句子」的字體預設組合。
- 不要以非任務的指標開頭。
- 不要將一個侷促的工具放在廣闊空白邊距的海洋中居中。
- 不要讓每個區域都變成一個卡片。
- 不要對未完成的工作使用成功顏色。
- 不要為同一個概念賦予多個名稱,除非差異會改變動作。選擇一個詞。
- 不要發佈一個使用者無法在一秒內指出下一次點擊位置或他們來閱讀的內容的畫面。
- 不要因為畫面擁擠就刪除其功能。移動次要內容。將任務需要的內容保留在表面上。
- 不要將管理員變成一個只有「開啟」動作的資料庫網格。
- 不要將產品的每個區域都放在一個頁面上,也不要因為頁面要精簡就刪除這些區域。給它們側邊欄。
- 不要為了製造個性而發明字體或調色板。修好外殼、列和強調色。