一、什么是 Linear 風設(shè)計？

依舊是多圖長文一篇，請酌情閱讀。

設(shè)計師都是視覺動物，廢話不多說，上圖：

這是指一種在大面積暗色背景下，使用漸變、模糊、動態(tài)流光、極細描邊、微噪點、外發(fā)光以及莊重的無襯線字體，外加流暢克制的微動效來組織和修飾界面元素的網(wǎng)頁設(shè)計風格。

其獨特又神秘的鋒利質(zhì)感，就是為了體現(xiàn)界面所承載產(chǎn)品的專業(yè)感。這種風格早已在國外設(shè)計圈流行多時，很多產(chǎn)品也都紛紛推出了 Linear 設(shè)計風格的網(wǎng)頁。

大家可能在各種概念設(shè)計稿上見過 Linear 設(shè)計的影子，只是叫不出它的名字，或者并不知道這種風格源自于同名的一款 SaaS 軟件。

二、Linear 首先是一個產(chǎn)品

老規(guī)矩，先從產(chǎn)品背景講起，如果你只對設(shè)計部分感興趣，也可以跳到下一節(jié)。但適當了解一下產(chǎn)品背景，會對掌握 Linear 設(shè)計風格更有幫助。

1. 為誰設(shè)計

"Linear 的設(shè)計風格是為了符合軟件工程師對于「專業(yè)」的要求。黑色背景、灰色 Inter 無襯線字體、一個紫色漸變圓形 logo，基于大多數(shù)工程師都很喜歡的暗色編程環(huán)境，最大限度的減少設(shè)備能耗和視覺疲勞。"

以上出自 Linear 的 CEO （前 Airbnb 的首席設(shè)計師） Karri Saarinen 的一段訪談。他很好的解釋了 Linear 的設(shè)計初衷，也道出了 Linear 其實是一款專門針對軟件開發(fā)的協(xié)同管理的工具，目標用戶主要是軟件開發(fā)工程師和設(shè)計師。

Linear 應(yīng)用局部圖

Karri Saarinen 十分推崇 Apple 的設(shè)計美學和產(chǎn)品標準。Apple 對于設(shè)計的不懈追求，嚴格的成品把控，都深深啟發(fā)著他們這一代人。他希望 Linear 的產(chǎn)品設(shè)計將來也可以與 Apple 比肩。

國內(nèi)互聯(lián)網(wǎng)刻板印象之一就是：程序員或工程師都是格子衫加兜帽衣，不善言辭，也沒有審美要求。

那為什么一款主打技術(shù)受眾的軟件需要把自己的設(shè)計去跟 Apple 對標？難道是因為國外的開發(fā)者更懂時尚？

其實無關(guān)國內(nèi)外，優(yōu)秀的開發(fā)者都是對設(shè)計很敏感的，要說有哪個開發(fā)者代碼寫得很棒，但對設(shè)計卻毫不在意，這我是不信的。像 Linear 這樣一款重視美學和追求極致體驗的協(xié)作工具，就是為他們量身打造。

當然，要與 Apple 比肩，聽起來是有些狂妄！Linear 的各種產(chǎn)品標語更是傲氣沖天，比如「Linear 是構(gòu)建產(chǎn)品的更好方式」「與你以往使用過的任何工具都不同」「只為世界上最好的產(chǎn)品團隊提供支持」等等。

不過了解下 Linear 的發(fā)展路徑，感覺他們「狂」一點倒也不是不行。

2. 發(fā)展之路

Linear 創(chuàng)立于 2019 年 4 月，由 Karri Saarinen、Jori Lallo、Tuomas Artman 三位芬蘭籍創(chuàng)始人在美國聯(lián)合創(chuàng)辦。產(chǎn)品一經(jīng)發(fā)布就大受關(guān)注，短短兩個月，其內(nèi)測候補名單上就擁有了 10000 名用戶。

Linear 三位聯(lián)合創(chuàng)始人

Linear 的前身是 Lallo 和 Saarinen 在舊金山開發(fā)的協(xié)作書簽系統(tǒng) Kippt，后來被知名加密貨幣交易公司 Coinbase 收購，Saarinen 和 Lallo 也在 2014 年加入了該公司并分別擔任設(shè)計主管和軟件工程師，只是他們都未等到 Coinbase 上市就已離開去創(chuàng)業(yè)。

2019 年 11 月，紅杉為 Linear 領(lǐng)投了 420 萬美元種子輪融資；2020 年 12 月，紅杉再次領(lǐng)跑并為 Linear 籌集了 1300 萬美元的 A 輪 融資。

從 2021 年實現(xiàn)盈利到 2023 年，Linear 的銀行現(xiàn)金已高于種子輪加 A 輪 融資的總額。目前已擁有數(shù)千家客戶，包括初創(chuàng)團隊和企業(yè)級用戶。

3. 產(chǎn)品形態(tài)

Linear 有網(wǎng)頁版和桌面端應(yīng)用，可以跨平臺同步使用，不限于 Mac、Windows 和手機、平板等移動設(shè)備。暫時不支持 Linux 桌面端，但可以使用網(wǎng)頁版。

雖然沒有移動端應(yīng)用，不過最近加入的設(shè)計師 Alex Cornell 就是專門負責 App 設(shè)計的，想必也是在規(guī)劃中了。

當然，Linear 的設(shè)計重心還是在于打磨桌面端體驗，畢竟 B 端 產(chǎn)品主要使用場景并不在移動端。

另外，Linear 也支持離線模式，無需做任何額外操作，不用擔心斷網(wǎng)數(shù)據(jù)丟失。數(shù)據(jù)存儲方面，使用的是谷歌云加密服務(wù)，服務(wù)器在美國。

應(yīng)用下載頁

4. 功能特色

Linear 的服務(wù)市場主要面向北美和歐洲，服務(wù)器在國外，在國內(nèi)幾乎沒有使用場景。

畢竟國內(nèi)也有不少項目協(xié)同工具，中小團隊用 Teambition、Worktile 或者 Tower 足夠了，要求不高的用石墨、語雀、飛書、Notion 這類文檔工具也都可以 cover 日常需求。大廠更不必說，出于數(shù)據(jù)安全考量，基本都使用內(nèi)部自研系統(tǒng)。

所以這里，我們不花太多篇幅來探討 Linear 的功能細則，了解一下即可。

既然叫 Linear，那么產(chǎn)品肯定就是要強調(diào)線性解決方案的。敏捷開發(fā)已經(jīng)過時，Linear 打造的是現(xiàn)代軟件開發(fā)的新標準。

首先，一切操作都可以通過鍵盤組合鍵來進行，內(nèi)置全局命令菜單，50ms 的實時同步速度，內(nèi)置專為現(xiàn)代化軟件團隊打造的工作流。

其次，可以快速創(chuàng)建任務(wù)并在上下文中討論問題，可以無縫切換列表和看板視圖并支持自定義，支持周期管理和跨團隊 roadmap 規(guī)劃。

再者，集成了專業(yè)開發(fā)組件并能聯(lián)動各大代碼、數(shù)據(jù)、設(shè)計平臺，任務(wù)可無縫銜接，使軟件開發(fā)實現(xiàn)自動化。

最后，Linear 還提供了設(shè)計精美的高級報告和分析功能，支持數(shù)據(jù)導出。

官網(wǎng)有詳細介紹和演示，這里不一一展開講述了。

不過，我們倒是可以通過 Linear 的「Roadmap」設(shè)計來感受一下其功能考究程度。

Linear 的 roadmap 不光設(shè)計得很漂亮，還非常靈活實用。你可以在 timeline 上隨意拖動任務(wù)條來調(diào)整優(yōu)先級，也可以通過拖拽任務(wù)條來改變?nèi)掌诳缍?。此外，系統(tǒng)內(nèi)置的各種任務(wù)狀態(tài)和屬性圖標也非常精致。

Roadmap

另外，Linear 還有一個類似 Apple 人機交互指南的使用準則：「Linear Method」，不同于使用文檔，更偏重理念性，感興趣也可以去看看。

Linear Method

5. 定價策略

大多數(shù) SaaS 軟件都會提供免費版本，Linear 也不例外。

只是不同于其他產(chǎn)品會對免費版本做各種功能閹割。Linear 的免費版和收費版差別主要在管理權(quán)限上，免費用戶也可以使用其大部分核心功能，團隊成員數(shù)同樣沒有上限。

具體收費：標準版可按月支付：8 美元/月，適合成員人數(shù)在 50 人以下；超過 50 人，建議選擇升級版，按年計費：14 美元/月。

另外，客戶訂閱費用的 1% 會通過 Stripe Climate 捐出，用于助力新興除碳技術(shù)的發(fā)展，幫助去除大氣層中的二氧化碳。所以也是一家很有環(huán)保意識的企業(yè)了！

6. 設(shè)計團隊

Linear 背后是一個僅 30 人的小型創(chuàng)業(yè)團隊，團隊成員分布于各個國家，全部遠程協(xié)作。

雖然 CEO 自己也是設(shè)計師出身，但目前已經(jīng)不再負責設(shè)計執(zhí)行。設(shè)計團隊現(xiàn)由三名專職設(shè)計師組成，負責網(wǎng)頁和桌面端的是：首席設(shè)計師 Adrien Griveau 和設(shè)計師 Edgar Ambartsoumian。

另一位是新加入的移動端設(shè)計師 Alex Cornell，曾是一位在 YouTube 上活躍過的音樂人，他入職后的第一個項目是做數(shù)據(jù)功能宣傳視頻，精致流暢的動畫結(jié)合特制的音效，視聽體驗非常美妙，這部分后面會再具體講到。

不同于我們之前了解的 Bento 和 Arc 那種花活很多的團隊風格，Linear 的團隊氣質(zhì)和他們的產(chǎn)品如出一轍：嚴謹沉穩(wěn)但又很獨特。

其獨特在招聘啟示上就可以窺見一二，比如設(shè)計師的 JD 里要求必須討厭「A/B 測試」，比如工程師招聘時警告說自己的團隊規(guī)模超小但素質(zhì)極高。

另外還有一個很獨特的地方就是：Linear 的設(shè)計師不對設(shè)計稿進行圖層命名。按說初級設(shè)計師往往被教育最多的就是：圖層一定要命名好，以方便與他人對接。

Linear 設(shè)計文件圖層截圖

從上圖這張公開的設(shè)計稿里我們可以看到，設(shè)計師不僅不命名圖層，在 Figma 里甚至不會對元素做框架化和組件化處理，都是簡單粗暴的編組、編組、再編組。這又很不符合我們的 Figma 使用認知。是不是覺得能做出一流設(shè)計的團隊竟然會這么「不專業(yè)」？

團隊的解釋是：Linear 的設(shè)計稿并不在設(shè)計師之間對接，專人專項，設(shè)計稿只和開發(fā)人員對接。這在網(wǎng)上一度引起爭議，有些設(shè)計師表示這很不專業(yè)，有些則認為設(shè)計稿落地結(jié)果更重要，不用太在意形式。

但老實講，如果對接時拿到圖層結(jié)構(gòu)混亂，命名不規(guī)范的設(shè)計文件，確實會很頭大。國內(nèi)設(shè)計團隊大部分都做不到專人專項，一份設(shè)計稿可能要在不同設(shè)計師之間經(jīng)手多次，Linear 這種習慣咱就不學了！

7. Linear 和 Arc

讀過我文章的朋友，都知道 Arc 這款瀏覽器。與 Arc 一樣，Linear 也是優(yōu)先考慮鍵盤操作的，在 Linear 應(yīng)用中大部分操作都可以完全用快捷鍵來進行，這能大大提升操作效率，也很符合開發(fā)者的工作習慣。

去年 3 月份，Linear 應(yīng)用程序也集成了 Arc，支持在 Arc 瀏覽器命令欄鍵入直接創(chuàng)建 Linear 任務(wù)。其官網(wǎng)更新日志中毫不掩飾對 Arc 的推崇，稱其和 Linear 一樣，速度極快、設(shè)計精美！可謂是英雄惜英雄了。

三、Linear 還是一種設(shè)計風格

"我們一直想把 Linear 設(shè)計得很漂亮的原因之一是：如果你有一個漂亮的項目管理工具，那么任何東西都可以變得漂亮。"

這是 Linear 的聯(lián)合創(chuàng)始人 Tuomas Artman 對"項目管理工具為何要如此注重視覺設(shè)計"的解釋。

Linear 稱其設(shè)計是像素級，高精度，優(yōu)雅 UI 和一流性能的絕佳組合。倒也不覺得這算夸大其詞，因為無論官網(wǎng)還是應(yīng)用界面，都挑不出任何設(shè)計細節(jié)問題。

查看其官網(wǎng) CSS 樣式會發(fā)現(xiàn)：界面上的漸變背景，發(fā)光特效甚至噪點效果都是代碼實現(xiàn)；位圖切圖也采用了體積更小的 WebP 格式，矢量圖形則完全采用 SVG 格式，能用代碼實現(xiàn)的就不用切圖；代碼層面大量應(yīng)用了 mask-image 屬性和 radial-gradient 以及 linear-gradient 等漸變函數(shù)；此外還有大量的常規(guī)動效和交互動效。

這樣的實現(xiàn)策略，很大程度上規(guī)避了切圖所帶來的細節(jié)問題，但對產(chǎn)品性能又會是不小的考驗，需要有技術(shù)團隊的認可和鼎力支持才行。不然，想把這種風格的設(shè)計應(yīng)用在交互層面上，是很難單靠設(shè)計師自己去推進的。

圖中星空背景由 SVG 切圖結(jié)合代碼來實現(xiàn)

下面就通過一些界面展示圖，來直觀感受 Linear 的設(shè)計風格：

1. 官網(wǎng)界面展示

產(chǎn)品展示頁局部圖

招聘頁面主視覺

自述頁面

這個由首席設(shè)計師 Griveau 操刀的自述頁面，主插圖復刻了 iMac 的前身 Macintosh 的外觀樣式，內(nèi)容展示結(jié)合視差滾動創(chuàng)意十足。

實時數(shù)據(jù)服務(wù)頁面

網(wǎng)頁地址： https://linear.app/features/insights

這個頁面配上聲音，瀏覽體驗太美妙了，要使用 Chrome 或 Arc 打開，別的瀏覽器可能無法播放。內(nèi)嵌視頻就是前面提到過的新晉設(shè)計師 Alex Cornell 來到 Linear 后的首秀，動畫大部分在 AE 中完成，視頻后期用 Premiere 剪輯，Alex 說自己大概制作了將近 100 多個小時的動畫。

2. 應(yīng)用界面展示

Linear 應(yīng)用內(nèi)工作臺樣式，彈出的浮層，背景都做了半透模糊處理。

Linear 應(yīng)用內(nèi)截圖

Linear 系統(tǒng)還內(nèi)置了至少 8 款界面皮膚供用戶選擇。

用戶也可以自定義主題，可以在開源網(wǎng)站 linear.style 上查找更多主題。

但主題不能多端同步，而且只能設(shè)置自己在使用的應(yīng)用程序皮膚，團隊成員看到的還是他自己的主題樣式。

3. 活動界面展示

Linear 去年年終推出了項目總結(jié)活動頁，用戶不僅可以預(yù)覽到 Linear 的年終總結(jié)數(shù)據(jù)，還可以一鍵生成自己團隊的項目總結(jié)。

Hero Image 的動效不是一整個 gif 動圖或者視頻，而是在靜態(tài)切圖上疊加了一層動態(tài)點陣濾鏡，打造了一種做舊失真的故障風視效。

滾動視差交互結(jié)合精美的可視化數(shù)據(jù)表，體驗超級贊。數(shù)據(jù)圖形全部采用 SVG 格式，點擊按鈕還可以復制完整圖片。

四、拆解 Linear 式設(shè)計思路

看到這里，我們已經(jīng)很了解 Linear 式設(shè)計風格了。

光說不練假把式，請設(shè)計師打開 Figma，來一起拆解下 Linear 的設(shè)計思路（需要具備 Figma 操作基礎(chǔ)）。

我們先來學習下 Linear 是怎么做多色漸變?nèi)诤媳尘暗模?

第一步：新建一個矩形，給它添加 angular（角度漸變 ），按你喜歡的色值來添加。

第二步：編輯 angular 的色值，你可以調(diào)整手柄來選擇漸變的角度。

第三步：給這個矩形添加圖層模糊屬性，參數(shù)可隨意設(shè)定。

第四步：給矩形添加 mask。

第五步：復制一層漸變矩形，按你喜歡的風格選擇圖層疊加樣式，并適當調(diào)整不透明度。

第六步：調(diào)整復制層的 angular 手柄來調(diào)整兩層漸變?nèi)诤系男Ч?，并適當調(diào)整圖片角度。

OK，一個專屬于你的多色漸變?nèi)诤媳尘罢Q生了！

小試牛刀，感覺如何，簡單不？

趁熱打鐵，我們再來挑戰(zhàn)復刻一下 Linear 舊版官網(wǎng) Hero Image 里的應(yīng)用圖標：

查看樣式會發(fā)現(xiàn)，此圖標只在頂層貼了張 SVG 格式的鏤空 logo，其他都是用代碼實現(xiàn)，一共分為 4 層。

舊圖標結(jié)構(gòu)圖

下面，打開 Figma 繼續(xù)跟我操作：

第一步：新建一個圓角矩形描邊框，這里有一個關(guān)于設(shè)置 iOS 級別平滑圓角的小 tip，操作見以下動圖演示。

第二步：添加漸變色和模糊值，我們前面已經(jīng)做好了一張漸變圖，可以直接復制它的屬性過來。

第三步：添加一個等比例圓形，復制漸變和模糊值

第四步：復制矩形框，添加填充色，復制漸變和模糊值。

第五步：放上鏤空 logo，完成！

打開舊版官網(wǎng)，我們還能看到應(yīng)用圖標下會出現(xiàn)類似電影開場的激光動效，其實他們一開始只想做一個點亮圖標的簡單動效，考慮到是首次發(fā)布，要留下記憶點，就采用了更顯著的效果。

網(wǎng)頁地址： https://linear.app/releases/2020-12

舊版官網(wǎng)動畫截圖

另外這版官網(wǎng)從設(shè)計構(gòu)想到實施，只用了一周時間，執(zhí)行力和完成度之高也是讓人佩服。

現(xiàn)在的官網(wǎng) Hero Image 使用入口按鈕取代了應(yīng)用圖標的位置。這是因為，一方面他們不想靠太多的視效來干擾用戶瀏覽官網(wǎng)，還是以實用為先。另一方面知名度和市場既然已經(jīng)打開，找來官網(wǎng)的大部分人都是想要快速進行注冊和使用，還是要以效率為先。

五、Linear 式網(wǎng)頁制作實操

最近正好跟 Framer 官方教程學了 Linear 官網(wǎng)的流光小動效。

趁熱打鐵，再來復刻一下（需要具備 Framer 軟件基礎(chǔ)）。

可以先在 Figma 里設(shè)計完成界面，再通過 Figma to Html with Framer（插件加鏈接） 插件導入到 Framer 里制作，使其成為真正可交互的網(wǎng)頁，全程零代碼。

篇幅原因省略界面制作部分，源文件和插件貼在文末，可以在 Framer 里打開跟我一起做：

Framer 內(nèi)界面全貌

第一步：緊貼截圖右上角，新建一個寬 100px，高 1px 的矩形；布局選擇 absolute （絕對定位）；填充色選擇橫向漸變，色值區(qū)間：#5E6AD2，0%～#6875E8，80%。

第二步：選中矩形，在右側(cè)屬性欄點擊 effect（效果）；在彈出菜單里點選 loop（循環(huán)）；選擇 delay（延遲）3 秒，為每次的循環(huán)增加一個緩沖時間；scale（比例） 設(shè)為 1。

第三步：矩形需要向右水平移動，所以我們需要設(shè)置 offset （移動路徑）的 X 軸坐標參數(shù)，可以邊點擊步進器向上箭頭邊進行預(yù)覽，順勢給矩形敲定一個合理的退場位置。

第四步：更改矩形的 opacity（不透明度），好讓它以淡出的形式退場。這里直接把 opacity 的參數(shù)改為 0 即可。

第五步：然后設(shè)置 transition（過渡動效），緩動選擇 ease out（緩出），把動畫播放時長改為 1.5s。

預(yù)覽一下，動畫每隔 3s 播放一次，播放一次耗時 1.5s。

第六步：因為我們需要做出流光沿截圖外邊緣滑動的效果，所以在截圖的縱向上也需要添加一段漸變矩形。

可以直接復制橫向矩形，再把寬高參數(shù)對調(diào)，然后因為是向下移動，所以要設(shè)置 offset （移動路徑）的 Y 軸坐標參數(shù)。

因為要制造流動的感覺，所以兩段漸變不能同步進行，所以把 Delay 的時間改小一些，比如改成 2。其他操作都一樣，篇幅原因，這里就不重復了

然后點擊右上角藍色「Publish」按鈕，更新一下，發(fā)布完成！

現(xiàn)在你已經(jīng)做了一個真實的 Linear 風格的網(wǎng)頁了，去瀏覽器里看一看效果吧。

操作十分簡單，但效果卻非常顯著，小小流光動效大大提升了頁面質(zhì)感。

好啦，到這里，你已經(jīng)會做 Linear 式設(shè)計了，那就愉快地應(yīng)用到設(shè)計工作當中吧，相信一定會為你的作品錦上添花的。

六、還有哪些 Linear 風產(chǎn)品？

采用 Linear 設(shè)計風格的網(wǎng)站和應(yīng)用其實都有一個專屬的名稱叫做：Linears。

下面就來看看都有哪些不錯的 Linears 值得我們學習借鑒！

1. Raycast

首推 Raycast，一款我自己在用的 Mac 上的效率工具，類似 Mac 原生的 Spotlight，聽名字都知道它也是 Linear 那掛的。Raycast 有強大的插件社區(qū)，目前產(chǎn)品也已接入 AI 功能，正在內(nèi)測中。

Raycast 官網(wǎng)

Raycast 的設(shè)計也是自成一派，每打通一個應(yīng)用就會為其重設(shè)計一款 Raycast 風格的應(yīng)用圖標（猶記得當年錘子手機也是這么干，時光啊?。?，包括當時給 Arc 設(shè)計的這個圖標一放出來，也是立馬就被刷屏了！

Raycast 的官網(wǎng)設(shè)計文件可以在 Figma 里打開來看一下細節(jié)：

切換到輪廓模式，可以看到設(shè)計圖是相當復雜的，層級很多。

2. Cron

Cron 是一款連續(xù)兩年獲得 Product Hunt 金貓獎的日歷應(yīng)用，號稱是為專業(yè)人士和團隊打造的下一代日歷。也是我自己在用的產(chǎn)品，用戶體驗不錯，網(wǎng)頁端使用需要在官網(wǎng)申請候補。

Cron 官網(wǎng)

這款應(yīng)用目前已經(jīng)被 Notion 收購了，跟 Arc 也是好基友（數(shù)數(shù) Arc 到底有多少好基友），最近 Arc 瀏覽器的固定標簽也支持了對 Cron 進行預(yù)覽。

Notion 發(fā)推曬自己的好基友

3. FEY

一個投資管理桌面應(yīng)用程序，官網(wǎng)做得也很有質(zhì)感，背后團隊是 Narative，一個遠程協(xié)作的獨立工作室。

Narative 團隊官網(wǎng)

4. Linears.art

一個專門搜集 Linears 的網(wǎng)站，需要更多靈感可以去逛逛。

總結(jié)一下

來復習一下，前面我們了解了 Linear 這款產(chǎn)品，一起拆解了 Linear 的設(shè)計思路，并對其設(shè)計進行了復刻實操，最后又欣賞了一些 Linear 風格的產(chǎn)品。

既然學習了 Linear 的設(shè)計風格，也更應(yīng)該學習其背后先進的產(chǎn)品理念。

Linear 的 CEO 認為，當下軟件市場競爭激烈，所有的產(chǎn)品團隊實際上都是邊沖刺邊工作的，大家都在追求增長，幾乎沒有精力去打磨設(shè)計，造成產(chǎn)品同質(zhì)化嚴重又毫無生氣。

反過來，無法在功能上提供太多實用價值的產(chǎn)品，又會通過堆砌各種有趣的設(shè)計元素來轉(zhuǎn)移注意力，造成過度設(shè)計，給用戶的操作鋪滿障礙，讓人不知所措。

如何兼顧設(shè)計體驗與實用性是創(chuàng)新型產(chǎn)品必須去考慮的事情。Linear 給很多產(chǎn)品都打了樣，也幫很多初創(chuàng)產(chǎn)品樹立了信心。

這里再插播一下，前段時間硅谷銀行危機導致很多初創(chuàng)公司受到影響，Linear 則自發(fā)向初創(chuàng)公司（即使不是 Linear 的客戶）無償提供借款，以幫助他們臨時過渡，格局之大也的確值得稱道。

也許做一款設(shè)計精美、性能卓越、有格局講格調(diào)，又能平衡好產(chǎn)品體驗和商業(yè)價值的產(chǎn)品。并不在于雇傭多少人分多少組，不在于講多少 PPT 和開多少會，更不在于打不打卡坐不坐班，甚至不在于設(shè)計稿要不要給圖層命名。

只要做這件事的人都是專業(yè)的，就足夠了！

學習資料：

提醒一下，互聯(lián)網(wǎng)產(chǎn)品迭代快，所以文章內(nèi)容具有時效性。僅能保證文章發(fā)出時，相關(guān)內(nèi)容和圖片都是最新的，非必要不對內(nèi)容進行更新。若對產(chǎn)品感興趣建議收藏以下地址，篩選了學習資料一并貼出，請自行拓展閱讀。

Linear 相關(guān)資料

1. Linear 官網(wǎng)
2. Linear 舊版官網(wǎng)
3. 幫助文檔
4. 使用準則
5. 有趣的自述文件
6. 實時數(shù)據(jù)服務(wù)頁面
7. 設(shè)計精美的活動頁面
8. 年度總結(jié)活動頁面
9. YouTube 賬號
10. CEO 講述設(shè)計對初創(chuàng)公司的重要性
11. 針對 Linear 創(chuàng)始人的訪談

Linear 風格網(wǎng)站

1. Raycast 官網(wǎng)
2. Cron 官網(wǎng)
3. FEY 官網(wǎng)
4. Linears.art

Framer 相關(guān)資料

1. Framer 官方教程
2. Figma to HTML with Framer 插件
3. 文中的 Framer 設(shè)計文件
4. 文中的 Framer 動效官方教程

文中涉及圖片格式和 CSS 屬性

WebP：

1. https://developers.google.com/speed/webp?hl=zh-cn
2. https://developer.mozilla.org/zh-CN/docs/Web/Media/Formats/Image_types
3. https://github.com/Bulandent/blog/issues/17

SVG：

1. https://flaviocopes.com/svg/
2. https://developer.mozilla.org/zh-CN/docs/Web/SVG

蒙版屬性：

1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image
2. https://css-tricks.com/clipping-masking-css/

漸變函數(shù)：

1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

噪點效果：

1. https://juejin.cn/post/7130053304113889311

作者：Micoxx