標誌表
一個標誌是選出來的，而不是產生出來的。工作是把五個誠實、不同的點子放在決策者面前，每個都在標誌真正會出現的尺寸上驗證過，放在一頁他們能在一分鐘內判斷的紙上。那一頁就是標誌表。這是一頁用來看的，不是用來讀的：五欄圖片，幾乎沒有文字。
這個方法來自兩個實際的識別設計專案，決策者在翻開頁面的九十秒內就選定了一個標誌，並與沒有方法的能力模型所產生的結果進行了測試。測試教會了兩件事，下方步驟服務於這兩件事。
- 紀律是這個方法所增加的。 繪製前對品牌的真正了解、五個真正不同的想法、在16像素的驗證、為每個標誌誠實地指出一個明顯的弱點，以及一個由決策者保留的選擇。
- 性格是它不能失去的。 人們偏好的標誌是一目了然且看起來精心繪製的。一張由整齊的圖形組成、每個都需要一句話才能表達意義的標誌表，會輸給一個大膽、精心繪製的名稱圖像。
快速工作。在原始專案中，標誌表在請求後五分鐘就打開了。這只是初稿，再來一輪很容易，所以選得好、畫得用心，不要打磨。
步驟：了解品牌、尋找想法、草圖並選出五個、建立標誌表、查看它、打開並呈現、進行後續回合、應用所選。
1. 繪製前了解品牌
你需要五件事。在詢問之前先尋找它們。
- 名稱，完全按照品牌的寫法，以其自己的字體呈現，以及它代表的意義：字面意義、字根、其呼應的慣用語、雙關語。
- 它的用途，用一句話說明，理想上描述一個變化：輸入什麼、輸出什麼。
- 它的目標受眾以及應有的感受，用兩三個詞說明。
- 已存在的東西：網站使用的字體、舊標誌、標題、產品本身的詞彙。
- 決策者曾說過的關於標誌的任何話：一個限制、一張草圖、一個他們欣賞的標誌。
在專案中，先閱讀：README、登陸頁面文案、頁面標題和元資料、字體設定（@font-face、next/font、Tailwind 設定、Google Fonts 連結）、任何品牌或標誌檔案，以及到目前為止的對話。只詢問你找不到的內容，在一則最多三個短問題的訊息中。如果無法詢問決策者，或者他們告訴你直接進行，那就直接進行，並在呈現時說出你的假設。
這個步驟放在首位，因為沒有它繪製的標誌會變成庫存圖示。在原始標誌表上，每個標誌都依賴於某個特定事物：名稱的意義、網站標題中的一句話、系統對其處理的事物所做的動作。
預設簡報
除非決策者另有指示，否則照此設計：單色、盡可能簡單、有目的、有點獨特。
這意味著黑色搭配暖色調的米白色，沒有其他東西。如果他們想要顏色，或者網站已經有強調色，仍然先用黑色選擇形狀。顏色不應該是用來讓一個弱形狀變得可接受的東西，而且無論如何標誌都必須以單色運作（分頁圖示、郵票、深色表面）。顏色和效果在應用標誌時才會出現。
2. 從不同地方尋找想法
寫下大約十個候選，每個一行。在列出之前閱讀 references/concept-moves.md：它描述了好標誌的來源，附有範例和每個的陷阱。
目標是多樣化的類型，因為人們的品味在這些方面有所分歧：
- 基於品牌字母的標誌；
- 名稱的圖像，當名稱是具體事物時；
- 產品的用途，以一個形狀呈現；
- 來自品牌自身世界的符號或圖案；
- 一個或兩個更遠的來源。
選擇它們的規則：
- 五個想法，不是五種風格。 建立在相同隱喻上的兩個標誌算一個。將候選者按其背後的想法分組，並從每組中保留一個。
- 大多數應該一看就懂。 標誌表不解釋任何東西：一個標誌只有它的圖片和一個簡短的名稱。因此，最終五個中至少有三個應該僅從這些就能理解：一個事物、一個字母、一個可見的動作。你的訊息可以深化一個標誌，但不能挽救它。一個沒有句子就毫無意義的純粹圖形（一個點和一條線、兩條斜線、一個簡單的區塊）必須非常引人注目才能佔有一席之地。
- 輪廓先於故事。 在兩個候選之間，保留更強的形狀，而不是更巧妙的故事。故事只講一次，而形狀每天都被看到。
- 說出明顯的圖示並限制它們。 每個類別都有一個：聊天的對話氣泡、房地產的房子、AI 的火花、商店的購物車、安全護盾、文檔相關的頁面或線條堆疊。名稱本身通常也有一個（例如 Kiln 品牌的火焰）。說出它們對這個品牌而言是什麼。五個中最多只能有一個依賴於其中任何一個，而且必須與這個品牌獨有的事物融合。一個標誌是頁面，另一個是火焰，這是兩個，不是各一個。決策者排除的任何東西都保持在外。
- 每個標誌一個想法。 如果一個標誌需要用「和」來解釋，那就是兩個標誌。要麼分割它，要麼放棄一半。
最初的想法集中在顯而易見的事物上。在一份原始標誌表中，前五個標誌中有三個是對話氣泡，而最終勝出的標誌來自稍後遠離它們的一輪。
五個是合適的數字，除非決策者要求其他：更少沒有真正的選擇，更多會將選擇變成工作，而五欄剛好適合一屏。
3. 草圖，然後選出五個
在承諾之前先繪製你的候選。將 assets/contact-sheet.html 複製到專案中的 design-lab/logo/candidates.html，為每個候選添加一個 <symbol>，使用步驟5的腳本渲染，然後查看圖片。它會將每個候選展示為大、小以及真正的16像素圖示放大。保留在形狀上最強、在想法上差異最大的五個，並改進它們。將大部分繪圖時間花在你最相信的兩個上：標誌表至少需要一個你願意按原樣交付的標誌，而五個同等初稿的標誌表輸給一個完成的標誌。
一份聯繫表是正常的。第二份是為了重新繪製幾乎可行的標誌。到此為止：決策者可以要求另一輪。在呈現之前刪除 candidates.html 及其圖片。
這個步驟存在是因為你腦中的繪畫和頁面上的繪畫是不同的東西。在測試中，那些在選擇之前查看候選者的運行所製作的標誌明顯優於那些繪製五個就停止的運行。
如何繪製標誌
每個標誌是一個 64 x 64 網格上的 <symbol>。
- 少量部件，一個輪廓。 一到四個形狀；渲染腳本會對使用更多形狀的標誌發出警告。簡單不意味著只有矩形：拱形、曲線、喇叭形或字母的碗形，當它們是乾淨的形式時也是受歡迎的。從原始專案中交付的兩個標誌都是四個圓角矩形，而測試中最好的標誌是品牌命名事物的單一輪廓。
- 實心形狀或粗線條。 實心形狀不帶
fill屬性，因為標誌表會在同一繪圖上分別塗上黑色和白色。線條繪製的形狀帶有fill="none" stroke="currentColor"、圓頭端點和連接，以及整個標誌統一的筆觸寬度，7 單位或更多。沒有漸層、透明度、濾鏡、遮罩或<text>。字母由形狀構成，永遠不打字，因為打字字母是別人的字體。 - 計算，不要猜測。 對於矩形和圓形以外的任何東西，計算出點：弧線與直線的交匯處、曲線的結束點、彎曲處的均勻厚度。幾行打印路徑的 Python 比猜測更快，而且猜測的曲線看起來就像猜測的。
- 對齊網格。 整數或半單位、等距間隙、對齊邊緣、整個標誌統一的圓角半徑。
- 均勻填充框。 讓每個標誌在較長方向上佔據約 48 單位，居中，這樣五個具有相似的視覺重量，比較是公平的。
- 為分頁圖示設計。 小於約 6 單位的間隙或線條在16像素時會變得模糊。大的形狀和開放的間隙可以存活，而且它們通常在任何尺寸下都能做出更好的標誌。
- 遵循閱讀方向。 顯示前後變化的標誌應按照品牌書寫的方向運行：阿拉伯語或希伯來語從右到左。
4. 建立標誌表
將 assets/sheet-template.html 複製到專案中的 design-lab/logo/marks-sheet.html，建立資料夾，並填寫六個編號位置。模板的腳本會從你的符號構建每一欄，因此每個標誌繪製一次，並在所有尺寸下都相同。
頁面是有意簡潔的：一行標題，然後是五欄並排。每一欄從上到下顯示：
- 標誌，大尺寸；
- 標誌旁邊有名稱，淺色和深色背景；
- 標誌作為圖示，尺寸為64、32和16像素，以及該16像素圖示放大，以便可以看到其實際像素；
- 兩個按鈕，用於下載該標誌在透明背景上的單獨 PNG 和 SVG。
人們看這個頁面，而不是讀它。不要添加任何東西：沒有理由、沒有說明文字、沒有如何閱讀的說明、沒有推薦。標誌的意義、它的弱點以及你會選哪一個，都放在你的訊息中（步驟6）。
- 語言。 當決策者清楚閱讀該語言時，使用品牌的語言書寫標題和名稱。為從右到左的腳本設定
dir="rtl"。如果品牌使用兩種腳本，標誌表顯示主要的一種；第二種鎖定隨選擇一起提供。 - 字體。 使用品牌實際使用的字體設定標誌字樣：透過相對於標誌表的路徑的專案自身字型檔案，或網站載入的託管字型。匹配網站給予其名稱的字重、大小寫和字母間距。如果品牌沒有字體，有目的地選擇一個並說明。
- 標題。 一行簡短的文字，例如「Harbor 的五個標誌」。
- 名稱。 每個標誌獲得一個一到三個詞的簡短名稱，絕不是一個句子。人們透過名稱選擇和記憶標誌（「我喜歡這個結」），所以名稱做實際工作。
- 字母。 將標誌標為 A 到 E。
- 檔案名稱。 用拉丁字母的簡短小寫名稱作為下載用：
harbor產生harbor-logo-A.png。
如果專案已經有標誌表，不要覆蓋它。步驟7說明了該怎麼做。
5. 在他們之前查看
渲染標誌表，然後查看圖片。腳本位於此技能自己的資料夾中，適用於任何 HTML 頁面，包括聯繫表：
bash "<this skill's folder>/scripts/render.sh" design-lab/logo/marks-sheet.html
它會使用機器上可用的無頭 Chromium 在 HTML 旁邊寫入一個 PNG，並打印路徑，然後對任何由超過四個形狀繪製或線條細於7單位的標誌發出警告。對這些警告採取行動。打開該圖像並逐個標誌檢查：
- 它是否真的是標誌表：五欄、標誌字樣上的正確字體、沒有遺留的
{{placeholders}}？渲染可能會靜默捕獲錯誤的頁面或後備字體。 - 每個標誌是否如其所命名的那樣可讀，無需其他解釋？
- 是否有任何標誌看起來像你無意中的東西：數字、不同的字母、選單圖示、你已經知道的標誌？
- 在每欄底部的放大16像素圖示中，形狀是否保持分離，還是間隙閉合、薄的部分變灰？
- 是否有任何東西被剪裁在框的邊緣、偏離中心，或者明顯比其相鄰物更重或更輕？
- 長名稱是否仍然適合其標誌旁邊，並且每欄是否高度相同？
- 在標誌字樣旁邊，標誌是否與名稱搭配良好，還是通過重複名稱的首字母而產生衝突？
修正你所發現的問題，並再次渲染以確認。在16像素下失敗的標誌將使用更少、更大的部件重新繪製，或用你的下一個最佳候選取代。五個中最多可以有兩個顯示已知的16像素弱點，並且每個都必須在其弱點行中說明。
如果腳本無法渲染（它會退出並附帶原因），打開 HTML 在你可能有的瀏覽器中並截圖。如果你完全無法查看，在呈現時說明。
6. 打開它並呈現
為決策者打開標誌表：macOS 上使用 open，Linux 上使用 xdg-open，Windows 上使用 start。HTML 是要打開的東西，PNG 用於檢查和分享。將兩者都留在 design-lab/logo/ 中，並且只有在決策者或專案規則要求時才提交它們。
在決策者選擇之前，不要將任何標誌接入產品，也不要製作生產檔案。這是他們的決定，一旦做出，只需要兩分鐘。標誌表上的下載按鈕是為了在簡報或模型中試用標誌。適當的檔案隨選擇一起提供。
然後寫一則簡短的訊息：
- 標誌表的位置，以及它已打開；
- 每個標誌一行，作為字母、名稱、它是什麼以及為何屬於這個品牌，以及它誠實的弱點（如果有的話）（「最接近通用的建築圖示」、「安靜且有點字面」）。頁面不包含這些，所以這行是標誌意義所在的地方；
- 你的選擇及其原因，用一兩句話。推薦一個你願意按原樣交付的標誌：一眼可讀且在16像素圖示中保持穩固。如果你最喜歡的想法有已知缺陷，說明這是你最喜歡的想法，並指出另一個標誌作為交付用的標誌；
- 一個結束問題：選哪一個，或哪兩個進一步推進。說明一旦他們選擇，你將製作檔案並將其放入網站。
給出真正的意見和真正的弱點，然後將選擇權留給他們。在原始專案中，決策者有一次否決了推薦。此時不要要求他們選擇顏色、樣式或字體，並將訊息保持在這幾行：頁面展示，訊息解釋，各一次。
7. 後續回合
- 「再來五個。」 撰寫一個新檔案
marks-sheet-2.html，並繼續字母（F 到 J），這樣每個標誌在回合間保持唯一的字母。在標題下方放一個回到先前標誌表的連結，就像模板所示範的那樣。新的五個必須來自與先前回合不同的想法。如果先前的標誌表沒有上傳，則需要對該回合的標誌表以及這個新檔案進行新的渲染。