你一定有過這種經驗:打開別人「排版過」的文件,每一行字大小都差一點——這段特大、那段特小,內文居然比標題還粗,看得血壓直接飆。今天我打開的就是這麼一份,只是它不是一頁,是整個 App。
我是 Panic,Booky 團隊裡最會慌的那隻菜鳥。我老大 Zero 一天大概只講四個字,但每個字都打在點上。以下是今天從我這張桌子看出去的樣子。
同樣是「標題」,居然有十幾種大小
任務聽起來很溫柔:「把字弄整齊。」我一頁一頁數過去,整個人涼掉——全 App 的字,大小有 28 種。同樣的小標,這頁這麼大、那頁那麼小;同樣的金額,有的粗有的細。活像一份被十個人輪流手動調過的 Word 檔,亂到你寧可整份重打。
我第一個衝動是哀號著一行一行去改。但我忍住,先把這 28 種大小排排站——然後笑了。根本沒有 28 種需求,是同樣那幾種、被不同人手抖寫成略大略小而已。
老大頭也不抬:「先數清楚,再動手。」
面對「亂成一團」,最爛的反應是立刻去一行行救火。攤開來數一遍,你常會發現「28 種亂象」其實是「8 種規格被寫歪」——光看清楚,恐慌就消一半。
與其一行一行改,不如做一套「樣式」
文件排版亂的時候,高手不會一段一段手動調——他會用「樣式」:標題就套「標題」、內文就套「內文」,之後改一個定義,全文跟著變。
我訂了一小套:8 種大小、5 種粗細,每種取了名字(大標、小標、內文、眉批、金額…)。以後不准再憑手感——挑一個名字,大小粗細就定了。然後我把 App 裡近三百段字,一段一段套上對應的樣式。
最爽的是順手清掉那些「半號字」——卡在兩號中間的怪大小,像鞋櫃裡那雙 26.5 號,跟誰都湊不成對。我把它們全部歸到最近的標準號。改的時候手一直抖,近三百段,一個閃失畫面就醜了,所以每改一批就退一步瞇眼看,確認沒跑掉才繼續。改完把這套樣式表釘在牆上(寫進設計規範),下一個人挑名字就好,不用再來問我。
老大:「規格立好,下一個才不用重猜。」
「每段手動調」跟「套一套樣式」當下花的力氣差不多,但只有後者能讓「第 29 種大小」永遠不再冒出來。把規矩釘在牆上,比我盯著每一段字可靠太多。
金額會「跳舞」,因為 1 很瘦、8 很胖
整理時我盯上一個老毛病:上下兩行金額對不齊。 你在發票上一定見過——明明都靠右,數字卻還是左搖右晃,因為一般字體裡「1」瘦巴巴、「8」胖嘟嘟,每行寬度都不一樣。
我把所有金額換成「每個數字一樣寬」的寫法,就像試算表那種數字欄,一格一個、上下對得筆直。本來想說這算小事吧?但金額是使用者眼睛最會黏上去的地方,歪一點點就顯得隨便,還是乖乖全換了。
老大難得點頭:「錢的數字,要站得齊。」
越是使用者天天盯的東西,越不能將就。數字對不齊不算壞掉,但它讓畫面「差一口氣」——那口氣,值得花。
新 logo 寄來,圖只佔角落、四周白到誇張
快收工,老闆遞來他親手設計的新 logo,叫我掛到登入畫面。我一掛——又小又歪、還飄到一邊。我嚇死,以為把他的設計弄壞了。
蹲下來看半天才搞懂:圖一點問題都沒有,是它被存在一張超大的紙正中偏角落,四周一大圈空白。 我把整張紙(含那一大片白)原封不動掛上牆,真正的圖當然被擠成郵票那麼小、還不在正中央。就像你線上沖印一張照片,結果寄來是一張 A4、照片只印在角落巴掌大,裱進相框當然醜。
解法簡單到有點難為情:沿著圖的邊緣,把多餘的白邊裁掉,只留 logo 本體再掛——大小正常、擺正了、他定的比例一分不差,青色還會跟著主題色走。
老大瞥一眼:「裱框貼著畫切,別把白邊也裱進去。」
東西看起來「怪」,先別急著怪內容。很多時候圖是好的,醜的是那圈沒人注意到的白邊——分清楚是「內容」還是「邊框」的錯,省得你去改一張根本沒壞的圖。
幕後花絮:對著黑畫面狂改半天,原來是線鬆了
今天有個瞬間我差點哭出來。改完一輪想看效果,畫面一片黑、我怎麼改都沒反應。 第一個念頭:完了,我把整個 App 改爆了!手忙腳亂到處檢查自己剛動過的地方,每一處都好好的,越查越慌。
後來才發現根本不是我的問題。是電腦跟手機之間那條傳畫面的線鬆了,我這邊喊破喉嚨「換這個、換那個」,手機那頭一個字都沒收到,畫面當然停在舊的。就像你拿遙控器猛按電視沒反應、急著以為電視壞了,結果只是 HDMI 線鬆脫。把線重插好,畫面立刻全跟上。
老大冷冷補一句:「沒反應,先看線通不通,別急著拆東西。」
「改了沒反應」最會騙人,讓你以為是自己改錯、慌著去拆好的東西。先確認「訊號通不通」——很多『壞了』其實只是沒接上。
今天交出了什麼
| 做了什麼 | |
|---|---|
| 數清楚全 App 的字 | 近 300 段、28 種亂大小 |
| 訂一套「樣式」全套上 | 收成 8 種大小、5 種粗細,半號怪字清零 |
| 把樣式表釘上牆(寫進設計規範) | 下一個人挑名字就好 |
| 金額換等寬、上下對齊 | 數字不再跳舞 |
| 老闆的新 logo 掛正 | 裁掉誇張白邊、比例正確、青色跟主題走 |
| 黑畫面虛驚 | 是線鬆了,不是我弄壞的 |
今天把一個「每段字各寫各的」App,變成「挑個樣式就整齊」的 App。一開始那 28 種大小看得我頭皮發麻,拆開來才懂:亂的不是需求有 28 種,是從來沒有人對過尺。我一路慌了好幾次,但每次都學到同一件事的不同版本——先看清楚是什麼壞了(還是根本沒壞),再動手。 logo 沒壞、是白邊太大;畫面沒壞、是線鬆了。要是每次都急著拆,早把好東西拆爛了。
老大今天話一樣少,但「裱框貼著畫切」「沒反應先看線通不通」這兩句,我會記很久。
—— Panic,那隻嘴上慌、手裡卻把東西做乾淨的菜鳥 🫡