我是如何做設計的

現在要做一個網站很快。挑一個模板、換上名字和頭像，一個下午就能上線。但也因為這樣，很多網站看起來大同小異。我覺得問題通常不在技術，而在於不知道自己要的是什麼：沒有一個自己的世界觀，就只能從別人的選項裡挑。

我對配色、字型都沒有太多概念，沒辦法用理論說明為什麼這樣好看。我比較確定的是兩件事。一是我很喜歡日本那種減法的美感：能拿掉的就拿掉，留下來的每一樣都有它的位置。二是一個畫面好不好，我最在意的是和不和諧。

也先說在前面：設計是主觀的。有些人就是喜歡簡單、直覺的介面，那也沒有錯，差別只在有多少人喜歡。下面是我的做法，不是唯一的答案。其中最重要的前提，是你自己要喜歡你做出來的東西。

先知道自己要什麼#

世界觀聽起來很大，但它的起點很小：你真正喜歡的東西是什麼。我選宇宙，是因為我對天文一直很有興趣，常常在翻天文書、看各種科普。喜歡的東西你才會願意一直挖下去，而後面每一步都需要你對它夠熟。

喜歡的東西還不是世界觀。要把它變成世界觀，我的做法是拿它來回答問題。每個網站都會遇到同一批問題，我把它們列出來，一題一題用宇宙回答：

能答完這張表，你就有一個世界觀了。它有兩個用法：

• 答不出來的東西，就是會「像貼上去的」東西。 一個按鈕、一個動畫、一張插圖，如果在你的世界裡說不出它是什麼，放上去多半就是格格不入。
• 最後一列跟前面一樣重要。 世界不只告訴你能做什麼，也告訴你不能做什麼，這是減法的第一步。做海王星主題時，有一版飛行的尾巴畫成一道道風線。風是行星大氣裡的東西，換頁卻發生在星星之間，所以整個拿掉。

世界觀不是一張濾鏡。決定了宇宙，不代表只能放星星，這個站上也有返回艙、太空梭的機械臂、地平線上的樹、電塔和六分儀，它們都說得出自己為什麼在這裡。

它也不需要寫實。這個世界是架空的，衛星旁邊會浮出字，一顆點可以在頁面之間飛來飛去。這就像看科幻電影，沒有人會因為太空船能超光速就出戲，讓人出戲的是那些小地方：一道光熄滅的方式不對，一個東西的質感跟周圍不一樣，一個動作沒有理由。所以我判斷的標準不是「真不真實」，而是「和不和諧」。真實的資料很有用，但它是拿來幫你做到和諧的，不是目的。

做出選擇，也接受代價#

世界觀定了之後，會有幾個大選擇決定整個站的樣子。我最大的一個，是把整個站做成 3D。

我認為宇宙的寬闊，用平面是展示不出來的。3D 的好處很直接：空間的立體感夠，細節也能雕得比平面深，一顆星可以有自轉、有傾角、有繞到背後被擋住的衛星。

代價也很清楚。它會犧牲一部分 UX，效能要花很多力氣去壓，而對一般讀者來說，一個會動、有深度的畫面，也比一頁乾淨的文字多了不少認知負擔。這是我自己選的，我不打算假裝它沒有代價。

我的做法是：核心不讓步，代價一項一項去補。

• 效能： 目標是讓人覺得「怎麼可以 3D 還順成這樣」，但前提是不掉品質。優化可以換做法，不能換掉畫面。
• 閱讀： 文章內頁加了一層底，讓背後的星星不要干擾字。
• 裝置： 沒有 GPU 的裝置會退回比較簡單的星空，功能都在，只是少了一些演出。

做任何大選擇都一樣：先想清楚你拿什麼換什麼，換了就認真去補，而不是做到一半又往回縮，兩邊都不像。

決定鏡頭：讀者站在哪裡#

選了 3D，就多了一件平面不太需要想的事：鏡頭擺在哪裡。我很在意角度和鏡頭，看電影時常常會想，這一幕是用什麼角度、什麼方式拍的。做網站時，我會先決定讀者站在哪裡，再決定他看到什麼。

• 每一頁先決定機位。 首頁是從土星北方斜斜往下看，大部分頁面是 3D 的仰角。
• 只有內容本身是平的，才用平的。 照片頁是照片牆，用平面比較好看。但不能每一頁都平，做到航行日誌時如果也是平面，一頁頁看下來就會疲乏。
• 鏡頭動的時候，背景要有視差。 遠的動得慢、近的動得快，看起來才是鏡頭在動，而不是頁面在背景上滑。
• 換頁像一個長鏡頭。 先對焦到那顆點，再跟拍，最後鏡頭停下、點還在動，才拍到它身後的軌跡。細節在上一篇寫過了。

鏡頭的位置，會直接改變一頁在講什麼。舊版的關於頁有一扇窗，放的是一顆藍色火球劃過夜空、落到地上的那一刻，那時讀者是站在地面上，看著一顆星墜落。翻新之後，墜落的換成了讀者自己：標題「坐穩了。」的句號就是那顆琥珀點，往下捲，它就跟著你一起往下掉，最後返回艙在「就此落下。」那一刻著地。素材幾乎一樣，只是鏡頭從地面搬到了墜落的那顆星上。

用減法收斂：只有點和線#

畫面上，我只留了兩種東西：點和線。「此站點」那一頁的副標我寫的是「此處無他，唯有黑夜、白墨與微光。」說的就是這件事。

字彙少的好處是，它會替你做決定：任何新東西進來，都得先說得出自己是點還是線，說不出來的，就不屬於這裡。你的站不一定要用點和線，換成方塊和格線、紙和摺痕都可以，重點是只選兩三種，每一頁、每一個元件都用它們組出來。點和線剛好是星空最誠實的樣子，星本來就是點，軌道、星軌、彗尾本來就是線，我不需要另外發明一套圖形語言。

減法也包括留白。首頁一進來只有土星和幾條線，五個分區平常只是軌道上的點，滑過去或輪到它亮起來時，才浮出名字。畫面上的東西少，讀者才會自己去探索，每一個出現的東西也才顯得重要。

顏色：先定角色，再挑顏色#

很多人配色是先挑幾個喜歡的顏色，再想要放哪裡。我反過來：先決定需要哪幾個「角色」，每個角色只有一個意思，最後才填顏色。

1. 紙不用純黑，墨不用純白。 純白在黑底上太刺眼，#F1ECE3 帶一點暖，比較像紙上的墨，長文讀久了眼睛比較不累。
2. 墨只有一個顏色，用透明度分層。 標題、內文、說明、線，全是同一個墨色的不同透明度，每一層都量過對比，內文至少要 4.5:1。
3. 只留一個訊號色，而且只給它一個意思。 我的琥珀色只代表「你在這裡」。它不需要大，也不需要閃，因為它是畫面上唯一有顏色的東西。
4. 警示色只在出錯時出現。 它跟訊號色要差得夠遠，不然刪除鈕會看起來像「你在這裡」。

減法在顏色上最難做，因為每個顏色單獨看都很好看。舊站的紫色和綠色連結全部拔掉，程式碼的語法高亮我也猶豫了很久，因為它會是全站極少數有顏色的地方。參雜的顏色一多，畫面就沒有主體了。

做多組配色時#

開源版可以換天體，我做了四組。做多組配色時，我多守了三件事：

• 紙和墨也跟著偏一點點。 海王星偏冷，參宿四偏暖。差別很小，但整站換過去，空氣的溫度會變。
• 主體不要上色。 海王星本來就是藍的，有一版連星球都偏藍了，跟站點的主題有點衝突，那顆點也不再特別。星球永遠是墨色，顏色只屬於那顆點。
• 訊號色要分得開。 它要跟自己的字色分得開，也要跟其他組分得開。我用色差（ΔE2000）量，組與組之間抓 20 以上才不會認錯。本來有一組月球，它的訊號色跟自己的字色只差 6，那顆點幾乎看不出來，最後換成了黑洞。

黑白測試#

最後一個檢查最簡單，也最有用：把顏色拿掉，東西還認得出來嗎？ 如果兩個東西只能靠顏色分辨，代表形狀沒做好。海王星一度看起來還是像土星，因為它用的是跟土星同一種筆觸，只多了一點藍。後來改用形狀分開：土星是斷續的刷痕和大片的環，海王星是平順的筆觸和暗斑，黑洞是空掉的陰影和吸積盤，參宿四是一團團的對流胞。

線：一種粗細，用亮度和虛實說話#

線的規則跟顏色一樣：先限制，再給意思。全站只有一種粗細，1px 的髮絲線。

粗細不能變，線要表達不同的意思，就只能靠亮度，和實線或點線：實線是已經發生的，點線是還沒到的。

規則定好之後，最好找一個地方真的用上它，不然它只是裝飾。我用在文章的目錄：目錄是一段星軌，讀過的部分是實線，還沒讀到的是點線，琥珀點就是正在讀的你。

要打破規則，就要有理由。我只有一條線是例外：點飛行時拖在身後的那道。白色的髮絲看不出那是光，所以它改用點的顏色、帶一層很淡的光暈。它可以有顏色，是因為它本來就是那顆點發出的光。

用接縫檢查每一個細節#

前面定的是規則，這一步是每天都在做的事。

翻新那段時間，最常讓我卡住的感覺是「像貼上去的」「硬接上去的」「不搭」。這些都是和諧被打破時的感覺，很模糊，很難改。後來我發現，它幾乎都是某一道「接縫」沒接好，而接縫只有幾種：

還有一個很好用的問題：它的下一步是什麼？ 設備頁的太空梭機械臂會把箱子拿起來，那箱子之後丟去哪了？一個東西如果只有「現在」，沒有前因後果，看久了就會假。

這些細節大部分人不會發現，單獨拿出來也都不重要。但一個站裡沒接好的地方一多，就會開始像拼起來的。反過來，一個一個接好之後，讀者就算說不出為什麼，也會覺得它是一個完整的地方。

說不出哪裡不對的時候#

上面那張表是事後整理出來的。實際做的時候，大部分時候我只會覺得「怪怪的」，很少能一句話說出問題在哪，更別說形容清楚。看得出不和諧，跟說得出為什麼不和諧，是兩種不同的能力，前者很吃美感的累積，沒辦法靠一張表速成。

這種時候，我會做三件事：

• 找真實的東西對照。 土星的條紋本來就是獨特的，刻線就照著真實的土星去描。北極六角形照卡西尼號的照片畫，裡面不是空的，而是一片雲和中央的風暴眼。舊版關於頁那顆藍色火球，是對照那段自拍影片，看光從暗到亮、再到落地的節奏。
• 看別人怎麼做。 翻新一開始，我花了不少時間看各種星空設計，因為我想要的是自己看到也會眼睛一亮的東西。目錄是看了 fumadocs 那篇專門講目錄設計的文章，它讓我知道目錄值得被當成一個獨立的設計來做。favicon 做不好，就去看大家的 favicon 都怎麼處理小尺寸。
• 把規格查清楚。 有些「怪」其實是事實沒搞懂。對比度和色差可以量，iPhone Duo 這種摺疊螢幕的尺寸和摺痕位置，Apple 有官方的規格可以查。

參考不是照抄。看完之後要回到自己的世界裡，用自己的字彙重畫一次：fumadocs 的目錄是直的，我的是一段星軌。

故事要放在讀者看得到的地方#

開源版的四顆天體，是我這套做法被考得最徹底的一次。查資料、照真實的故事畫，說穿了只是模仿，照著資料誰都做得出來。真正難的是怎麼把它放進來，而且放得合理，跟整個站和諧。故事做在讀者看不到的地方，等於沒做，放進來卻格格不入，比沒做還糟。

海王星第一版做完，換頁看起來跟土星幾乎一樣。因為多數換頁畫面是每一頁自己的收法和長法，主題能換的地方其實很少。所以我先列出讀者一定會看到的位置，再把故事一個一個放進去：

每一格放進去之前，我會用三個問題檢查。

在那個大小下讀得懂嗎#

故事縮到一顆點、一條線上，很容易變得太抽象。土星有一個很好的故事：卡西尼號最後在土星和環之間穿了 22 次。但照字面做成換頁，縮在一顆點上根本看不出意義，所以沒放。

黑洞的轉場也是這樣。第一版把時間膨脹、麵條化和重力波都放進換頁，做出來只看到一個圓形在飛來飛去，因為畫面上沒有黑洞，讀者不知道點為什麼這樣動。改成讓黑洞自己出場之後，才讀得懂：

海王星的彈弓也一樣。點繞過的那顆星一開始只是一個淡淡的小圓，看起來像雜訊。畫成一顆迷你的刻線海王星之後，一看就知道是繞過一顆星。故事裡的主角要看得見。

照實畫，還是畫得和諧#

真實不等於好讀，也不等於和諧，這時候要找一個能同時保住兩邊的做法。海王星的開場是 Adams 環上真的有的四段亮弧，長短不一，全擠在 40° 左右的範圍裡，當載入條很不好讀。切成四等分最好讀，但就跟海王星沒關係了。最後保留真實的長短比例，等比放大到繞滿一圈：

參宿四的表面也是。真實的照片只是一團模糊的光斑，照畫會很抽象，跟站上的刻線也對不上。所以保留刻線，讓線繞著一團團對流胞捲曲，看得出是一顆會翻騰的恆星就好。

跟其他幾組是同一套嗎#

參宿四是四顆裡最難的。它是一顆恆星，自己發光，沒有晨昏線，沒有環，土星和海王星能沿用的東西幾乎都要重找。光是開場就改了三次：

第一版縮在那麼小的範圍裡，就是一個標靶，讀不懂。第二版讀得懂了，但其他三顆的開場都是斜的、類 3D 的載入，只有它是平的，跟其他幾組不是同一套。第三版才同時過了三關：伴星沿著跟其他主題同傾角的斜軌道繞一圈，而這本身就是故事，天文學家最早是從參宿四亮度上一個約六年的長週期，推測有一顆伴星在繞它。

這一關也會反過來檢查舊的東西。做完參宿四，土星反而成了唯一沒有自己故事的一顆，表裡它那一欄首頁的三件事，都是那時候才補上的。

文案講故事，不講功能#

文字也是設計的一部分。每顆天體都有一句我寫的話，滑過頂欄的天體選單時，旁邊會出現它的故事。

一開始那段說明寫的是「換頁時點會怎樣」，這是在寫功能。我的原則是：說明故事，讓讀者自己聯想到畫面在演什麼。 讀者知道黑洞連光都會被拉回去，看到點逃出去時身後的光被拉回去，就懂了。

這裡是宇宙的禁區。 光到此折返，時間到此止步。 萬物墜入，再無歸途。 人類寫下的每一條定律，在此無一存活。

文字一樣適用減法。我討厭冗言贅字，也討厭童話故事那種說法，一句話能說完的就不寫兩句。

給別人用時，給預設，不給旋鈕#

如果你的設計要給別人用，例如開源成一套模板，最後要決定開放多少。

我的選擇是不開放自由調色。能選的是我做好的幾顆天體，每一顆的顏色、星球、轉場、文案都是整套調過的，能自由填的只有內容。給他們幾個精心做好的預設，讓他們在我的審美範圍內做選擇，既能保住整個站的質感，又讓每個人都有一點「這是我的」感覺。

這也是減法，只是拿掉的是旋鈕。前面每一步都是在讓東西彼此和諧，開放任意色碼，等於讓人隨手拆掉其中一塊。

從你自己的站開始#

整理成一份可以照著做的清單：

這些步驟能幫你把「哪裡怪怪的」拆開來，找到是哪一道接縫，但它們替代不了眼睛。看得出哪裡不和諧，需要時間養，而我知道的方法只有一個：多看真正好的東西，把它拆開來研究，再回頭看自己的。至於做出來的東西好不好，最後還是要回到你自己喜不喜歡。