這份規範只管「在路上」畫面上的紙張、印刷與手感。功能、寄送規則、資料格式都不在這裡改。
整體要像一張放在書桌上的郵局表格:暖紙、墨線、橡皮章、輕微顆粒。不要像一款圓角、玻璃、海軍藍按鈕的應用程式。
| 角色 | 色值 | 用在哪裡 |
|---|---|---|
| 書桌 | #d9c4a4 |
頁面外圍,像牛皮紙桌墊 |
| 紙張 | #f7f1e4 |
畫面本體、卡片、表單 |
| 紙張亮邊 | #fffaf2 |
紙張內側的一道高光 |
| 正文墨色 | #2a211c |
標題與內文。放在紙張上要清楚可讀 |
| 次要墨色 | #5c4636 |
說明、路線、較小的字。不要再用冷灰藍 |
| 郵戳墨 | #6e342e |
郵戳、主要動作、警告 |
| 印刷線 | rgba(110, 52, 46, 0.45) |
框線、分隔、表格虛線 |
| 鋼筆墨水 | #1c3148 |
只出現在信紙上的筆跡,不是按鈕顏色 |
| 航空郵簡藍 | #3d4f6f |
只用於收件人紙標的紅藍斜條,成對出現 |
不要把填滿的海軍藍 #243e68 當主按鈕,也不要用冷灰 #f4f7f8 當畫面底。
文字對比:正文墨色與次要墨色都直接寫在紙張上,不靠半透明白字。郵戳墨上的字用 #f3eadc,不要用純白發光。
全站用「Noto Serif TC」,沒有載入時依序退到 Songti TC、PMingLiU。這是印刷體,不是手寫字體;手寫只發生在信紙的筆跡上。
0.08em 到 0.16em,像鉛字,不要縮到負字距底紋只用程式畫的向量雜訊:可縮放向量圖裡的 feTurbulence(fractalNoise),再壓成很淡的暖色。不要用另外繪製或生成的圖片檔。
顆粒要輕。說明文字下面仍然要讀得清楚,不能讓雜訊吃掉筆畫。
地圖沿用同一層顆粒,疊在已經做舊的地圖圖磚上。
按鈕不是膠囊。圓角最多約 2 像素,或用郵戳那種略圓的印章輪廓,不要用 999px 把按鈕收成藥丸。
兩種框:
主要動作(抽收件人、寄給朋友、寄出、確認寄出、寫給這位、拆信、已收到)用橡皮章。旁邊的次要動作(先不寄、儲存草稿、換一位、檢舉、封鎖)用紙標籤。
點擊範圍至少高 48 像素,寬度跟著內容,但並排時要能用拇指按到。返回一類的圖示按鈕至少 44 乘 44 像素,外框是方形印刷框,不是圓形浮起按鈕。
時間不要用大號等寬數字配細進度條的方式呈現。
傾斜不要超過大約 12 度,否則直式手機上的字會難讀。
紙放在紙上,只用很短的接觸陰影:一道內側亮邊,加上 1 到 2 像素的暖色硬邊。不要用大範圍模糊的藍灰色漂浮陰影,也不要玻璃擬態的背景模糊。
動畫要像紙或章在動。
| 動作 | 時間 | 做法 |
|---|---|---|
| 按下按鈕 | 80 到 120 毫秒 | 向下 1 到 2 像素,不要彈簧回彈,不要放大縮小 |
| 換一個畫面 | 約 420 毫秒 | 紙張落下並停住,傾斜不超過 0.4 度 |
| 寄出、拆信 | 維持現有儀式 | 蓋戳、投入郵筒、撕條、掀封口,這些已經是實體物件 |
系統若要求減少動效,換頁與按下的位移關掉。寄出與拆信的儀式本來就會在減少動效時直接跳過或停住,這點維持不變。
寫信畫面下方的工具維持現有三個動作:上傳照片、復原、清除。外觀改成一盒文具:照片角、吸墨紙、橡皮擦,都是紙標籤。旁邊用一滴色塊標出信紙上的藍黑墨,表示現在這枝筆的墨色。
不在這次加上換筆、換色或另一種橡皮擦模式。那些會改到信紙上存下來的筆跡。
這些畫面用同一套紙,不另起一種介面。
#f7f1e4,外圍 #d9c4a4,郵戳墨 #6e342e,顆粒用 feTurbulence。不另外貼照片,也不把朋友的名字或信面放上去。畫面寬度維持手機直式欄位。卡片、收件人、日期戳、文具盒、暱稱和朋友的稱呼都要在大約 360 像素寬時排得下,字不重疊,日期戳不蓋住名字。標題旁的「我的信箱」「郵戳護照」「我的地區」放不下時換到下一行,每一個仍然至少高 44 像素。首頁底部「抽一位隨機收件人」和「寄給一位朋友」並排,字可以換行,高度至少 48 像素。