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