依舊是多圖長文一篇，請酌情閱讀。
設計師都是視覺動物，廢話不多說，上圖：
這是指一種在大面積暗色背景下，使用漸變、模糊、動態流光、極細描邊、微噪點、外發光以及莊重的無襯線字體，外加流暢克制的微動效來組織和修飾界面元素的網頁設計風格。
其獨特又神秘的鋒利質感，就是為了體現界面所承載產品的專業感。這種風格早已在國外設計圈流行多時，很多產品也都紛紛推出了 Linear 設計風格的網頁。
大家可能在各種概念設計稿上見過 Linear 設計的影子，只是叫不出它的名字，或者并不知道這種風格源自于同名的一款 SaaS 軟件。
更多設計風格科普：
老規矩，先從產品背景講起，如果你只對設計部分感興趣，也可以跳到下一節。但適當了解一下產品背景，會對掌握 Linear 設計風格更有幫助。
1. 為誰設計
“Linear 的設計風格是為了符合軟件工程師對于「專業」的要求。黑色背景、灰色 Inter 無襯線字體、一個紫色漸變圓形 logo，基于大多數工程師都很喜歡的暗色編程環境，最大限度的減少設備能耗和視覺疲勞。”
以上出自 Linear 的 CEO （前 Airbnb 的首席設計師） Karri Saarinen 的一段訪談。他很好的解釋了 Linear 的設計初衷，也道出了 Linear 其實是一款專門針對軟件開發的協同管理的工具，目標用戶主要是軟件開發工程師和設計師。
Linear 應用局部圖
Karri Saarinen 十分推崇 Apple 的設計美學和產品標準。Apple 對于設計的不懈追求，嚴格的成品把控，都深深啟發著他們這一代人。他希望 Linear 的產品設計將來也可以與 Apple 比肩。
國內互聯網刻板印象之一就是：程序員或工程師都是格子衫加兜帽衣，不善言辭，也沒有審美要求。
那為什么一款主打技術受眾的軟件需要把自己的設計去跟 Apple 對標？難道是因為國外的開發者更懂時尚？
其實無關國內外，優秀的開發者都是對設計很敏感的，要說有哪個開發者代碼寫得很棒，但對設計卻毫不在意，這我是不信的。像 Linear 這樣一款重視美學和追求極致體驗的協作工具，就是為他們量身打造。
當然，要與 Apple 比肩，聽起來是有些狂妄！Linear 的各種產品標語更是傲氣沖天，比如「Linear 是構建產品的更好方式」「與你以往使用過的任何工具都不同」「只為世界上最好的產品團隊提供支持」等等。
不過了解下 Linear 的發展路徑，感覺他們「狂」一點倒也不是不行。
2. 發展之路
Linear 創立于 2019 年 4 月，由 Karri Saarinen、Jori Lallo、Tuomas Artman 三位芬蘭籍創始人在美國聯合創辦。產品一經發布就大受關注，短短兩個月，其內測候補名單上就擁有了 10000 名用戶。
Linear 三位聯合創始人
Linear 的前身是 Lallo 和 Saarinen 在舊金山開發的協作書簽系統 Kippt，后來被知名加密貨幣交易公司 Coinbase 收購，Saarinen 和 Lallo 也在 2014 年加入了該公司并分別擔任設計主管和軟件工程師，只是他們都未等到 Coinbase 上市就已離開去創業。
2019 年 11 月，紅杉為 Linear 領投了 420 萬美元種子輪融資；2020 年 12 月，紅杉再次領跑并為 Linear 籌集了 1300 萬美元的 A 輪 融資。
從 2021 年實現盈利到 2023 年，Linear 的銀行現金已高于種子輪加 A 輪 融資的總額。目前已擁有數千家客戶，包括初創團隊和企業級用戶。
3. 產品形態
Linear 有網頁版和桌面端應用，可以跨平臺同步使用，不限于 Mac、Windows 和手機、平板等移動設備。暫時不支持 Linux 桌面端，但可以使用網頁版。
雖然沒有移動端應用，不過最近加入的設計師 Alex Cornell 就是專門負責 App 設計的，想必也是在規劃中了。
當然，Linear 的設計重心還是在于打磨桌面端體驗，畢竟 B 端 產品主要使用場景并不在移動端。
另外，Linear 也支持離線模式，無需做任何額外操作，不用擔心斷網數據丟失。數據存儲方面，使用的是谷歌云加密服務，服務器在美國。
應用下載頁
4. 功能特色
Linear 的服務市場主要面向北美和歐洲，服務器在國外，在國內幾乎沒有使用場景。
畢竟國內也有不少項目協同工具，中小團隊用 Teambition、Worktile 或者 Tower 足夠了，要求不高的用石墨、語雀、飛書、Notion 這類文檔工具也都可以 cover 日常需求。大廠更不必說，出于數據安全考量，基本都使用內部自研系統。
所以這里，我們不花太多篇幅來探討 Linear 的功能細則，了解一下即可。
既然叫 Linear，那么產品肯定就是要強調線性解決方案的。敏捷開發已經過時，Linear 打造的是現代軟件開發的新標準。
首先，一切操作都可以通過鍵盤組合鍵來進行，內置全局命令菜單，50ms 的實時同步速度，內置專為現代化軟件團隊打造的工作流。
其次，可以快速創建任務并在上下文中討論問題，可以無縫切換列表和看板視圖并支持自定義，支持周期管理和跨團隊 roadmap 規劃。
再者，集成了專業開發組件并能聯動各大代碼、數據、設計平臺，任務可無縫銜接，使軟件開發實現自動化。
最后，Linear 還提供了設計精美的高級報告和分析功能，支持數據導出。
官網有詳細介紹和演示，這里不一一展開講述了。
不過，我們倒是可以通過 Linear 的「Roadmap」設計來感受一下其功能考究程度。
Linear 的 roadmap 不光設計得很漂亮，還非常靈活實用。你可以在 timeline 上隨意拖動任務條來調整優先級，也可以通過拖拽任務條來改變日期跨度。此外，系統內置的各種任務狀態和屬性圖標也非常精致。
Roadmap
另外，Linear 還有一個類似 Apple 人機交互指南的使用準則：「Linear Method」，不同于使用文檔，更偏重理念性，感興趣也可以去看看。
Linear Method
5. 定價策略
大多數 SaaS 軟件都會提供免費版本，Linear 也不例外。
只是不同于其他產品會對免費版本做各種功能閹割。Linear 的免費版和收費版差別主要在管理權限上，免費用戶也可以使用其大部分核心功能，團隊成員數同樣沒有上限。
具體收費：標準版可按月支付：8 美元/月，適合成員人數在 50 人以下；超過 50 人，建議選擇升級版，按年計費：14 美元/月。
另外，客戶訂閱費用的 1% 會通過 Stripe Climate 捐出，用于助力新興除碳技術的發展，幫助去除大氣層中的二氧化碳。所以也是一家很有環保意識的企業了！
6. 設計團隊
Linear 背后是一個僅 30 人的小型創業團隊，團隊成員分布于各個國家，全部遠程協作。
雖然 CEO 自己也是設計師出身，但目前已經不再負責設計執行。設計團隊現由三名專職設計師組成，負責網頁和桌面端的是：首席設計師 Adrien Griveau 和設計師 Edgar Ambartsoumian。
另一位是新加入的移動端設計師 Alex Cornell，曾是一位在 YouTube 上活躍過的音樂人，他入職后的第一個項目是做數據功能宣傳視頻，精致流暢的動畫結合特制的音效，視聽體驗非常美妙，這部分后面會再具體講到。
不同于我們之前了解的 Bento 和 Arc 那種花活很多的團隊風格，Linear 的團隊氣質和他們的產品如出一轍：嚴謹沉穩但又很獨特。
其獨特在招聘啟示上就可以窺見一二，比如設計師的 JD 里要求必須討厭「A/B 測試」，比如工程師招聘時警告說自己的團隊規模超小但素質極高。
另外還有一個很獨特的地方就是：Linear 的設計師不對設計稿進行圖層命名。按說初級設計師往往被教育最多的就是：圖層一定要命名好，以方便與他人對接。
Linear 設計文件圖層截圖
從上圖這張公開的設計稿里我們可以看到，設計師不僅不命名圖層，在 Figma 里甚至不會對元素做框架化和組件化處理，都是簡單粗暴的編組、編組、再編組。這又很不符合我們的 Figma 使用認知。是不是覺得能做出一流設計的團隊竟然會這么「不專業」？
團隊的解釋是：Linear 的設計稿并不在設計師之間對接，專人專項，設計稿只和開發人員對接。這在網上一度引起爭議，有些設計師表示這很不專業，有些則認為設計稿落地結果更重要，不用太在意形式。
但老實講，如果對接時拿到圖層結構混亂，命名不規范的設計文件，確實會很頭大。國內設計團隊大部分都做不到專人專項，一份設計稿可能要在不同設計師之間經手多次，Linear 這種習慣咱就不學了！
7. Linear 和 Arc
讀過我文章的朋友，都知道 Arc 這款瀏覽器。與 Arc 一樣，Linear 也是優先考慮鍵盤操作的，在 Linear 應用中大部分操作都可以完全用快捷鍵來進行，這能大大提升操作效率，也很符合開發者的工作習慣。
去年 3 月份，Linear 應用程序也集成了 Arc，支持在 Arc 瀏覽器命令欄鍵入直接創建 Linear 任務。其官網更新日志中毫不掩飾對 Arc 的推崇，稱其和 Linear 一樣，速度極快、設計精美！可謂是英雄惜英雄了。
“我們一直想把 Linear 設計得很漂亮的原因之一是：如果你有一個漂亮的項目管理工具，那么任何東西都可以變得漂亮?！?/p>
這是 Linear 的聯合創始人 Tuomas Artman 對”項目管理工具為何要如此注重視覺設計“的解釋。
Linear 稱其設計是像素級，高精度，優雅 UI 和一流性能的絕佳組合。倒也不覺得這算夸大其詞，因為無論官網還是應用界面，都挑不出任何設計細節問題。
查看其官網 CSS 樣式會發現：界面上的漸變背景，發光特效甚至噪點效果都是代碼實現；位圖切圖也采用了體積更小的 WebP 格式，矢量圖形則完全采用 SVG 格式，能用代碼實現的就不用切圖；代碼層面大量應用了 mask-image 屬性和 radial-gradient 以及 linear-gradient 等漸變函數；此外還有大量的常規動效和交互動效。
這樣的實現策略，很大程度上規避了切圖所帶來的細節問題，但對產品性能又會是不小的考驗，需要有技術團隊的認可和鼎力支持才行。不然，想把這種風格的設計應用在交互層面上，是很難單靠設計師自己去推進的。
圖中星空背景由 SVG 切圖結合代碼來實現
下面就通過一些界面展示圖，來直觀感受 Linear 的設計風格：
1. 官網界面展示
產品展示頁局部圖
頁面交互動效
頁面常態動效
招聘頁面主視覺
自述頁面
這個由首席設計師 Griveau 操刀的自述頁面，主插圖復刻了 iMac 的前身 Macintosh 的外觀樣式，內容展示結合視差滾動創意十足。
實時數據服務頁面
網頁地址： https://linear.app/features/insights
這個頁面配上聲音，瀏覽體驗太美妙了，要使用 Chrome 或 Arc 打開，別的瀏覽器可能無法播放。內嵌視頻就是前面提到過的新晉設計師 Alex Cornell 來到 Linear 后的首秀，動畫大部分在 AE 中完成，視頻后期用 Premiere 剪輯，Alex 說自己大概制作了將近 100 多個小時的動畫。
2. 應用界面展示
Linear 應用內工作臺樣式，彈出的浮層，背景都做了半透模糊處理。
Linear 應用內截圖
Linear 系統還內置了至少 8 款界面皮膚供用戶選擇。
用戶也可以自定義主題，可以在開源網站 linear.style 上查找更多主題。
但主題不能多端同步，而且只能設置自己在使用的應用程序皮膚，團隊成員看到的還是他自己的主題樣式。
3. 活動界面展示
Linear 去年年終推出了項目總結活動頁，用戶不僅可以預覽到 Linear 的年終總結數據，還可以一鍵生成自己團隊的項目總結。
Hero Image 的動效不是一整個 gif 動圖或者視頻，而是在靜態切圖上疊加了一層動態點陣濾鏡，打造了一種做舊失真的故障風視效。
滾動視差交互結合精美的可視化數據表，體驗超級贊。數據圖形全部采用 SVG 格式，點擊按鈕還可以復制完整圖片。
看到這里，我們已經很了解 Linear 式設計風格了。
光說不練假把式，請設計師打開 Figma，來一起拆解下 Linear 的設計思路（需要具備 Figma 操作基礎）。
我們先來學習下 Linear 是怎么做多色漸變融合背景的：
第一步：新建一個矩形，給它添加 angular（角度漸變 ），按你喜歡的色值來添加。
第二步：編輯 angular 的色值，你可以調整手柄來選擇漸變的角度。
第三步：給這個矩形添加圖層模糊屬性，參數可隨意設定。
第四步：給矩形添加 mask。
第五步：復制一層漸變矩形，按你喜歡的風格選擇圖層疊加樣式，并適當調整不透明度。
第六步：調整復制層的 angular 手柄來調整兩層漸變融合的效果，并適當調整圖片角度。
OK，一個專屬于你的多色漸變融合背景誕生了！
小試牛刀，感覺如何，簡單不？
趁熱打鐵，我們再來挑戰復刻一下 Linear 舊版官網 Hero Image 里的應用圖標：
查看樣式會發現，此圖標只在頂層貼了張 SVG 格式的鏤空 logo，其他都是用代碼實現，一共分為 4 層。
舊圖標結構圖
下面，打開 Figma 繼續跟我操作：
第一步：新建一個圓角矩形描邊框，這里有一個關于設置 iOS 級別平滑圓角的小 tip，操作見以下動圖演示。
第二步：添加漸變色和模糊值，我們前面已經做好了一張漸變圖，可以直接復制它的屬性過來。
第三步：添加一個等比例圓形，復制漸變和模糊值
第四步：復制矩形框，添加填充色，復制漸變和模糊值。
第五步：放上鏤空 logo，完成！
打開舊版官網，我們還能看到應用圖標下會出現類似電影開場的激光動效，其實他們一開始只想做一個點亮圖標的簡單動效，考慮到是首次發布，要留下記憶點，就采用了更顯著的效果。
網頁地址： https://linear.app/releases/2020-12
舊版官網動畫截圖
另外這版官網從設計構想到實施，只用了一周時間，執行力和完成度之高也是讓人佩服。
現在的官網 Hero Image 使用入口按鈕取代了應用圖標的位置。這是因為，一方面他們不想靠太多的視效來干擾用戶瀏覽官網，還是以實用為先。另一方面知名度和市場既然已經打開，找來官網的大部分人都是想要快速進行注冊和使用，還是要以效率為先。
最近正好跟 Framer 官方教程學了 Linear 官網的流光小動效。
趁熱打鐵，再來復刻一下（需要具備 Framer 軟件基礎）。
可以先在 Figma 里設計完成界面，再通過 Figma to HTML with Framer（插件加鏈接） 插件導入到 Framer 里制作，使其成為真正可交互的網頁，全程零代碼。
篇幅原因省略界面制作部分，源文件和插件貼在文末，可以在 Framer 里打開跟我一起做：
Framer 內界面全貌
第一步：緊貼截圖右上角，新建一個寬 100px，高 1px 的矩形；布局選擇 absolute （絕對定位）；填充色選擇橫向漸變，色值區間：#5E6AD2，0%～#6875E8，80%。
第二步：選中矩形，在右側屬性欄點擊 effect（效果）；在彈出菜單里點選 loop（循環）；選擇 delay（延遲）3 秒，為每次的循環增加一個緩沖時間；scale（比例） 設為 1。
第三步：矩形需要向右水平移動，所以我們需要設置 offset （移動路徑）的 X 軸坐標參數，可以邊點擊步進器向上箭頭邊進行預覽，順勢給矩形敲定一個合理的退場位置。
第四步：更改矩形的 opacity（不透明度），好讓它以淡出的形式退場。這里直接把 opacity 的參數改為 0 即可。
第五步：然后設置 transition（過渡動效），緩動選擇 ease out（緩出），把動畫播放時長改為 1.5s。
預覽一下，動畫每隔 3s 播放一次，播放一次耗時 1.5s。
第六步：因為我們需要做出流光沿截圖外邊緣滑動的效果，所以在截圖的縱向上也需要添加一段漸變矩形。
可以直接復制橫向矩形，再把寬高參數對調，然后因為是向下移動，所以要設置 offset （移動路徑）的 Y 軸坐標參數。
因為要制造流動的感覺，所以兩段漸變不能同步進行，所以把 Delay 的時間改小一些，比如改成 2。其他操作都一樣，篇幅原因，這里就不重復了
然后點擊右上角藍色「Publish」按鈕，更新一下，發布完成！
現在你已經做了一個真實的 Linear 風格的網頁了，去瀏覽器里看一看效果吧。
操作十分簡單，但效果卻非常顯著，小小流光動效大大提升了頁面質感。
好啦，到這里，你已經會做 Linear 式設計了，那就愉快地應用到設計工作當中吧，相信一定會為你的作品錦上添花的。
采用 Linear 設計風格的網站和應用其實都有一個專屬的名稱叫做：Linears。
下面就來看看都有哪些不錯的 Linears 值得我們學習借鑒！
1. Raycast
首推 Raycast，一款我自己在用的 Mac 上的效率工具，類似 Mac 原生的 Spotlight，聽名字都知道它也是 Linear 那掛的。Raycast 有強大的插件社區，目前產品也已接入 AI 功能，正在內測中。
Raycast 官網
Raycast 的設計也是自成一派，每打通一個應用就會為其重設計一款 Raycast 風格的應用圖標（猶記得當年錘子手機也是這么干，時光?。。?，包括當時給 Arc 設計的這個圖標一放出來，也是立馬就被刷屏了！
Raycast 的官網設計文件可以在 Figma 里打開來看一下細節：
切換到輪廓模式，可以看到設計圖是相當復雜的，層級很多。
2. Cron
Cron 是一款連續兩年獲得 Product Hunt 金貓獎的日歷應用，號稱是為專業人士和團隊打造的下一代日歷。也是我自己在用的產品，用戶體驗不錯，網頁端使用需要在官網申請候補。
Cron 官網
這款應用目前已經被 Notion 收購了，跟 Arc 也是好基友（數數 Arc 到底有多少好基友），最近 Arc 瀏覽器的固定標簽也支持了對 Cron 進行預覽。
Notion 發推曬自己的好基友
3. FEY
一個投資管理桌面應用程序，官網做得也很有質感，背后團隊是 Narative，一個遠程協作的獨立工作室。
Narative 團隊官網
4. Linears.art
一個專門搜集 Linears 的網站，需要更多靈感可以去逛逛。
來復習一下，前面我們了解了 Linear 這款產品，一起拆解了 Linear 的設計思路，并對其設計進行了復刻實操，最后又欣賞了一些 Linear 風格的產品。
既然學習了 Linear 的設計風格，也更應該學習其背后先進的產品理念。
Linear 的 CEO 認為，當下軟件市場競爭激烈，所有的產品團隊實際上都是邊沖刺邊工作的，大家都在追求增長，幾乎沒有精力去打磨設計，造成產品同質化嚴重又毫無生氣。
反過來，無法在功能上提供太多實用價值的產品，又會通過堆砌各種有趣的設計元素來轉移注意力，造成過度設計，給用戶的操作鋪滿障礙，讓人不知所措。
如何兼顧設計體驗與實用性是創新型產品必須去考慮的事情。Linear 給很多產品都打了樣，也幫很多初創產品樹立了信心。
這里再插播一下，前段時間硅谷銀行危機導致很多初創公司受到影響，Linear 則自發向初創公司（即使不是 Linear 的客戶）無償提供借款，以幫助他們臨時過渡，格局之大也的確值得稱道。
也許做一款設計精美、性能卓越、有格局講格調，又能平衡好產品體驗和商業價值的產品。并不在于雇傭多少人分多少組，不在于講多少 PPT 和開多少會，更不在于打不打卡坐不坐班，甚至不在于設計稿要不要給圖層命名。
只要做這件事的人都是專業的，就足夠了！
學習資料：
提醒一下，互聯網產品迭代快，所以文章內容具有時效性。僅能保證文章發出時，相關內容和圖片都是最新的，非必要不對內容進行更新。若對產品感興趣建議收藏以下地址，篩選了學習資料一并貼出，請自行拓展閱讀。
Linear 相關資料
- Linear 官網
- Linear 舊版官網
- 幫助文檔
- 使用準則
- 有趣的自述文件
- 實時數據服務頁面
- 設計精美的活動頁面
- 年度總結活動頁面
- YouTube 賬號
- CEO 講述設計對初創公司的重要性
- 針對 Linear 創始人的訪談
Linear 風格網站
Framer 相關資料
文中涉及圖片格式和 CSS 屬性
WebP：
- https://developers.google.com/speed/webp?hl=zh-cn
- https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types
- https://github.com/Bulandent/blog/issues/17
SVG：
蒙版屬性：
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
- https://css-tricks.com/clipping-masking-css/
漸變函數：
噪點效果：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 Micoxx