圖層的命名對於設計師來說一直都是困擾的問題，很多設計師應該都有接手過其他人的設計稿的經驗，加上現在都是線上協作，如果遇到一個亂七八糟的設計稿，應該會很想掐死前一個交接的設計師，收到這種檔案幾乎要重做，所以圖層命名與管理一直以來都很重要，但也是比較不會被重視的事情，許多新手設計師光要完成設計都很辛苦了，更何況在完成設計的同時還要對每個圖層進行管理與命名；但事實是，有經驗的介面設計師通常都會有好的圖層命名習慣，這也是評估設計師能力的一種方式。

圖層命名能說是設計師的基本職業修養，之前我在示範做設計檔案時，總有人好奇為什麼我總是可以快速的想到該怎麼命名，其實就是經驗的累積，尤其是前端切版的經驗，對我有很大的幫助，除了要熟悉不同的標籤語法，還要認識一些 css 的命名規則（naming convention），另外我也參考並閱讀一些官方釋出的設計文件，裡面的圖層命名方式，也可以為你帶來許多命名的想法與建議。

如果想要知道網頁的切版方式，可以認識一些 css 的命名流派， 像是 SMACSS、OOCSS、BEM… 等等，這些命名方式都有各自的優缺點，但如果要將其規則套用在圖層上，命名會太過於複雜，所以 css 的命名方式可以參考，但對於設計圖稿的圖層命名，只要熟記一些常用的詞綴就好，不一定要完全的追求太過嚴謹的命名方式。

我從過去的工作經驗得到的結論就是：

圖層命名簡單就好

我也曾經試著盡可能圖層命名看起來結構非常完整，甚至能夠符合開發的結構，事實上，當我們在使用 figma 的 varaint 功能時，的確就像在設計一個可以轉為程式的組件（components），而且當你的圖層整理的愈乾淨，你會更清楚你在設計怎麼樣的組件；但是否要符合開發上的命名要求？現在我的答案是：沒必要，因為接手設計稿的人往往是設計師，工程師也未必要照你的圖層結構去完成開發，所以圖層命名只要清楚、乾淨、架構簡單、方便維護就好，不要造成接手設計師的困擾，這是一個隨手的職業美德啊！

這邊我提供一些個人經驗，我認為圖層命名重點在於「有效」與「彈性」，有效是指能清楚的辨識圖層用途，彈性則是可以隨時變動並調整圖層結構，圖層命名這件事，應該要像河流順勢自然地流淌，無論遇到何種障礙，都能找到最佳的路徑，最終自然地注入大海。

所以在進行圖層命名時，有幾個方向可以思考：

• 命名格式
• 圖層的結構與用途
• 認識常用詞綴

命名格式

首先是圖層命名的格式（format），到底是要中文還是英文，英文是要大寫或是小寫，以個人這些年的經驗觀察下來，英文標題大寫（title case），會是比較常見且專業的方案。

能不能用中文命名圖層？…可以，但個人是不建議，因為有很多 UI 的組件（component）很難用中文描述，例如：accordion（手風琴？）、carousel（旋轉拍賣木馬？），加上用中文的話每個人的描述方式差異過大，但中文描述可用在頁面（page）或是畫面（screen）的描述，但如果是圖層或是組件，建議還是使用英文。

而標題大寫命名方式，就是每個字以大寫字母開頭，字與字之間隔著半形空格，而遇到冠詞或是介系詞則使用小寫字母開頭，這個方式常常使用在英文的標題，同時我觀察 figma 或是 sketch 裡所提供的各種官方樣版，大部的文件都是用標題大寫來命名圖層，優點是方便閱讀，但缺點就是命名時要切換大小寫。此外，圖層命名也可以與中線「-」、下底線「_」或其他符號「!@#$%^&*」連用，使用符號可以方便我們識別圖層，但有些情況需要注意，像是在 figma 的組件圖層中開頭使用了下底線「_」或點「.」代表組件僅在當下的文件使用，而斜線「/」代表分層，這些符號在 figma 中是預是保留符號，要特別注意。

結構與用途

一份乾淨的設計稿，通常結構要夠簡單，什麼是簡單？就是不應該有多餘的圖層，所以每一個圖層的存在都有它自己的用途，那通常圖層的用途是什麼，以個人的經驗來說，通常會有四個用途：

1. 識別物件
2. 識別類型與狀態
3. 分群
4. 排版

識別物件

在 figma 裡最小的單位就是一個物件，物件可能是：圓形、方形、三角形、或是 frame …等等。雖然軟體會自動產生命名，但自動產生的命名無法識別物件，所以我們要根據我們的需求或功能來命名物件，在介面設計領域常見的組件，大多是以功能來命名，例如：Navigation Bar、Tab Bar、Table、Footer、Input、Button…等等，這些就是用來識別物件的名稱，如果不知道如何命名組件，最快的方法就是去參考其他的組件資源庫（library），相信可以很快找到適合的名稱，以下推薦一些常用的資源庫：

• google material design
• apple HIG
• bootstrap
• ant design
• tailwind component
• daisy UI

識別類型與狀態

不管是圖層或是組件，類型（type）與狀態（state）是介面設計的一大難題，類型指的是這個組件的類別，通常會主要、次要之分，每一個組件可能有多種類型與狀態，例如按鈕（button） 常見會有 primary 與 secondary 的類型，而狀態（state）指的是就組件或圖層有多少種變化，button 就有 default、disable、active…等等多種變化；而通常只要圖層牽涉到多種類型或狀態，在使用的考量上，就會被轉為組件，因此這邊以組件命名為例。

遇去在沒有 variant 的功能前，一個組件有多少類型與狀態，那是一個指數型的結果，例如一個按鈕，有三種類型、三種狀態、三種尺寸、二種模式，那就等於要做出 3x3x3x2 = 54 種結果，也就是要做出 54 個按鈕，而實際的狀況遠過於此，所以狀態一直以來都是很麻煩的問題；而在 figma 的操作上，只是要熟悉 varaint 功能的人，都會知道圖層的命名會對應到 varaint 的屬性上，所以針對 variant ，最常使用的命名，就是類別與狀態，前面提到的按鈕命名 「Button Primary Default」 ，代表的就是 button「按鈕」、primary「主要的」、default「預設」，裡面 priramy 就是類型（type）而 default 就是狀態（state）；而這些類型與狀態的詞綴，重覆使用的機會很高，所以熟記的話也會幫助你更快的建立 varaint 的控制方式。

補充一點，如果狀態沒有主從之分，那使用順序的詞綴，其實也是一個可以被接受的做法。

分群

分群就是將物件群組（group），群組的目的在於將相似或重覆的元素放在一起，與其他物件或是物件群組要有所群隔，分群有時候也會用到一些排版的功能，在 figma 中常用的分群可以是直接 cmd + G，或是 cmd + option + G，差別在於後者是使用一個 frame，將物件群組在一起，使用 frame 群組物件就可以使用 frame 所提供的排版功能，這邊就不再綴述。
（我個人更喜歡使用 shift + A ，直接使用有auto layout 的 frame）

分群的命方式也有一些小技巧，例如二個 Button（按鈕）作為一個群組，就可以命名為「Button Group」，又或是 Item（項目），如果多個 Item 作為一群，也可以直接命名為「Items」。

排版

排版（layout）也可以做為圖層的命名方式，排版不外乎就是上、下、左、右（top、bottom、left、right），垂直（vertical）、水平（horizontal）…等等，上述提到的詞綴視為主要或是補充資訊作為圖層命名，例如一個包含圖片的資料訊列表，左邊為圖，中間為文字，右邊為可點擊提示的 icon，就可以分別使用 left、center、right，作為圖層命名，或是可能有兩個 Navigation，一個在上一個在下，就可以與物件名稱混搭：例如：Top Navigation、Bottom Navigation，亦或可能自帶固定（fixed）在畫面左則的選單面版 ：Menu Fixed at Left…等等，這些都可以算是以排版為用圖的命名方式。

常用詞綴

根據上面的四種圖層用圖，我整理了一些比較常用的詞綴，這些詞綴是組成圖層命名的單一詞彙，詞綴可以單獨或是相互組合，要怎組合就依當下的需求，通常會符合英文名詞片語的組合方式，例如：

Button Group (n+n)、Left Info (adj+n)、Actions at Bottom (n+介系詞+名詞)

當然還可以再依情況加上狀態，如果是組件同時要加上狀態，就要考慮是不是要組成 variant ，那圖命層的結構也會有所影響。

以下是我整理的常用詞綴：

• 表頁面元素（識別）
  header、body、container、section、article、post、nav、card、menu、footer、panel、post…
• 表資訊內容的（識別）
  heading、paragraph、content、title、subtitle、text、name、value、tips、helper、note、key、label、timestamp、caption、table、img（image）、ic（icon）、form、input、text fields、alert、…
• 表示屬性（識別）
  bg（background）、fg（foreground）、fill、light、dark、width、height
• 表狀態性的詞綴（識別）
  default、able、disable、active、hover、enable、press、hide、 show、open、close、collapsed、expand、loading…
• 表順序的詞綴（識別）
  1、2、3…、one、two、three…、1st、2nd、3rd…、leading、trailing、prefix、suffix、start、end
• 表示重要性的詞綴（識別）
  primary、secondary、tertiary、main、sub(subordinate)、accessory、warning、danger、success
• 表示個體或群體的詞綴（分群）
  group、col(column)、row、cell、item、single、multiple、line、block、collection、type、area
• 表位置或對齊方式的詞綴（排版）
  top、left、right、bottom、side、center、middle、vertical、horizontal、start、end、between、fixed、sticky

<不定期更新詞綴 2023/8/10>

結論

以上就是我對於圖層命名經驗上的想法與建議，詞綴的使用要花時間習慣，如果想要更深入了解，個人認為最好的方式就是自己嘗試網頁切版，透過切版才會知道設計與開發的差異，進而對於圖層命名也會有不同層次的理解；有好的圖層命名習慣，可以讓設計的協作、交接、維護更加順利，通過有效的命名，可以為設計文件建立組織結構，幫助他人理解設計意圖，並更容易進行後續的開發工作，至於會不會有一天我們終於不同再為圖層命名煩惱？我想真的那天到來，或許也不用再做介面設計了吧！

喜歡這篇文章或是覺得這篇文章對你有所幫助，歡迎使用街口抖內支持，讓我更有創作的動力，不然以後都只有ai 的文章能看了
https://rei0.netlify.app/