handwritten-letter

紙本郵局視覺規範

這份規範只管「在路上」畫面上的紙張、印刷與手感。功能、寄送規則、資料格式都不在這裡改。

整體要像一張放在書桌上的郵局表格:暖紙、墨線、橡皮章、輕微顆粒。不要像一款圓角、玻璃、海軍藍按鈕的應用程式。

顏色

角色 色值 用在哪裡
書桌 #d9c4a4 頁面外圍,像牛皮紙桌墊
紙張 #f7f1e4 畫面本體、卡片、表單
紙張亮邊 #fffaf2 紙張內側的一道高光
正文墨色 #2a211c 標題與內文。放在紙張上要清楚可讀
次要墨色 #5c4636 說明、路線、較小的字。不要再用冷灰藍
郵戳墨 #6e342e 郵戳、主要動作、警告
印刷線 rgba(110, 52, 46, 0.45) 框線、分隔、表格虛線
鋼筆墨水 #1c3148 只出現在信紙上的筆跡,不是按鈕顏色
航空郵簡藍 #3d4f6f 只用於收件人紙標的紅藍斜條,成對出現

不要把填滿的海軍藍 #243e68 當主按鈕,也不要用冷灰 #f4f7f8 當畫面底。

文字對比:正文墨色與次要墨色都直接寫在紙張上,不靠半透明白字。郵戳墨上的字用 #f3eadc,不要用純白發光。

字體

全站用「Noto Serif TC」,沒有載入時依序退到 Songti TC、PMingLiU。這是印刷體,不是手寫字體;手寫只發生在信紙的筆跡上。

紙張

底紋只用程式畫的向量雜訊:可縮放向量圖裡的 feTurbulence(fractalNoise),再壓成很淡的暖色。不要用另外繪製或生成的圖片檔。

顆粒要輕。說明文字下面仍然要讀得清楚,不能讓雜訊吃掉筆畫。

地圖沿用同一層顆粒,疊在已經做舊的地圖圖磚上。

印刷框與按鈕

按鈕不是膠囊。圓角最多約 2 像素,或用郵戳那種略圓的印章輪廓,不要用 999px 把按鈕收成藥丸。

兩種框:

主要動作(抽收件人、寄給朋友、寄出、確認寄出、寫給這位、拆信、已收到)用橡皮章。旁邊的次要動作(先不寄、儲存草稿、換一位、檢舉、封鎖)用紙標籤。

點擊範圍至少高 48 像素,寬度跟著內容,但並排時要能用拇指按到。返回一類的圖示按鈕至少 44 乘 44 像素,外框是方形印刷框,不是圓形浮起按鈕。

郵戳與時間

時間不要用大號等寬數字配細進度條的方式呈現。

傾斜不要超過大約 12 度,否則直式手機上的字會難讀。

陰影

紙放在紙上,只用很短的接觸陰影:一道內側亮邊,加上 1 到 2 像素的暖色硬邊。不要用大範圍模糊的藍灰色漂浮陰影,也不要玻璃擬態的背景模糊。

動畫節奏

動畫要像紙或章在動。

動作 時間 做法
按下按鈕 80 到 120 毫秒 向下 1 到 2 像素,不要彈簧回彈,不要放大縮小
換一個畫面 約 420 毫秒 紙張落下並停住,傾斜不超過 0.4 度
寄出、拆信 維持現有儀式 蓋戳、投入郵筒、撕條、掀封口,這些已經是實體物件

系統若要求減少動效,換頁與按下的位移關掉。寄出與拆信的儀式本來就會在減少動效時直接跳過或停住,這點維持不變。

文具盒

寫信畫面下方的工具維持現有三個動作:上傳照片、復原、清除。外觀改成一盒文具:照片角、吸墨紙、橡皮擦,都是紙標籤。旁邊用一滴色塊標出信紙上的藍黑墨,表示現在這枝筆的墨色。

不在這次加上換筆、換色或另一種橡皮擦模式。那些會改到信紙上存下來的筆跡。

暱稱、信箱、檢舉與寄給朋友

這些畫面用同一套紙,不另起一種介面。

手機直式

畫面寬度維持手機直式欄位。卡片、收件人、日期戳、文具盒、暱稱和朋友的稱呼都要在大約 360 像素寬時排得下,字不重疊,日期戳不蓋住名字。標題旁的「我的信箱」「郵戳護照」「我的地區」放不下時換到下一行,每一個仍然至少高 44 像素。首頁底部「抽一位隨機收件人」和「寄給一位朋友」並排,字可以換行,高度至少 48 像素。