介面設計標準

书书书书君發表於2024-11-17

--本篇導航--

說明

C端、B端設計的有很多現成的元件和設計規範，設計和開發都可以用的，如Ant Design，Element, Vant，iOS官方設計規範。如果設計團隊比較大或者專案大的話，最好是按設計規範來進行。（我這邊就我一個人沒幹過設計，沒有專業的設計人員。自己有做過設計規範但開發不執行於是棄了）

每家公司的設計規範都是不一樣的，所以配色、字型字號、圖示樣式、描邊圓角投影等樣式等，都是不一樣的，但定好後直接套用現成的元件，交付溝通都非常高效省事。

APP部分

如果把握不準，可以去看看大廠的設計規範，看看他們的字型、色板、控制元件、元件這些規範。

我不是專業學設計的，都是自己瞎學的。拿不準的一些設計，可以看看現有的APP、軟體的介面，看看他們是怎麼做的。

介面大小

APP介面設計都是採用iOS的，以前是iPone6(一倍圖 375×667px)，現在大屏手機出來後，可以用iPhoneX(一倍圖 375×812px)，安卓系統則是據此適配。

我的電腦都是Windows系統的，蘋果系統的蘋方字型我安裝了也沒用，所以字型就只能自定了。電腦預設的微軟雅黑是不能商用的，只能用其他如思源、阿里巴巴普惠體、鴻蒙、MiSans等來代替，所以設計圖多少會和開發的效果有出入。

我用的設計軟體，從XD換到即時設計，起碼不用藍湖和設計獅做分享，向開發做交付也方便。但國產的每次更新或多或少會出現一些問題，但協作倒是沒什麼問題。

補充一個：Pixso的白板工具也挺好用的，思維導圖、表格、批註這些非常好用，和Xmind差不多，但樣式更美觀。

圖示

以下是在一倍圖下，頂部搜尋欄、頁面標題、底部導航欄、TAB頁的圖示的一些參考。

圖示需要在視覺上統一，尤其是線性圖示。所以自己做圖示的時候要注意。

如果是線上找的圖示，如在阿里的iconfont別人提供的一般都是不一樣的，IconPark的裡面圖示可以改線粗細，但圖示相較少一點。當然，也有其他的圖示庫，如Phosphor Icons、iconify、iconmonstr、Flaticon、iconstore、pictogram2等。

圖示繪製可以參考iOS出的圖示規範。

文字圖示

圖示本質上就是一個可以點選的按鈕，在去除圖形後可以用文字代替，就是很多的文字按鈕。這些文字按鈕是以純文字、字+線框、字+底色填充，背景是矩形、圓角矩形，顏色為純色、漸變，是否有投影等，則由具體情況而定。

一般按鈕都有幾個常規的狀態：預設狀態、點選/長按狀態、禁用狀態。電腦端則更多，還有懸停狀態、已點選過狀態。這些也是由實際需要而定。以下是Element Plus設計規範中的按鈕說明。

卡片

很多圖+字的排版卡片，涉及到排版，則會有從左到右、從左上到右下、從上到下的排版，為了凸顯重點的卡片，可能還會設計不同階次的顏色、飽和度、背景色的區別。這部分可以多看看購物平臺的APP主頁展示。

底部導航欄

底部導航欄需要按APP的重要功能，入口來設計個數,再根據個數來進行排版。

標籤欄內的標籤數量為3~5個。

APP的上架圖大小，後臺是會提示要提供多少解析度大小的圖，這裡就不提了，反正開發會提供的。

電腦上的軟體客戶端、網頁後臺、網頁，現在都會要求自動識別裝置做自適應的，或識別介面大小做介面響應。於是有固定佈局、流式佈局、自適應佈局、響應式佈局。

介面大小

目前網頁的螢幕寬度常見的有1920px、1440px、1366px、1080px，高度不限，安全可視寬度為980~1200px。

不同裝置的系統字型是不一樣的，但大部分使用者使用的依舊是Windows，所以網頁設計一般採用預設的微軟雅黑作為基礎字型。

網頁設計中的中文字型最小字號控制在 12px，純英文或數字文字最小字號則在 9px 左右。
標題和大數字：16-20px，Bold 正文、小標題：14-16px，Regular 註釋、小段文字：12-13px，Light。
釋英文、數字：9-11px
計過程中無論中英文，只使用細體（Light）、常規（Regular）、粗體（Bold）三種字重即可。
頁中，字型的用色只能用純色(主色、輔助色、中性色)，避免在 B 端使用漸變性字色。
同時，網頁的色彩只使用 RGB 模式，並且用 16 進位制程式碼來指向具體的色彩，也就是色彩皮膚中常見的 #FFFFFF 的符號。
主色品牌用色
輔助色
功能擁塞、氛圍色、點綴色
中性色
灰度用色、文字色、背景色
段間距：即段落之間的區域，透過增加留白來提升閱讀體驗。文字的行高一般設為字高的1.5~2倍之間為好，過小則顯擁擠，過大則顯空蕩，違反親密性原則。避免在 B 端設計中多段文字使用一個文字框，將每段獨立成一個文字框的設計，能最大化開發的效率。

柵格佈局

柵格可以將頁面等分，可以做橫豎方向的柵格，繪製的時候，可以將各個元素看成是矩形沿著柵格進行排布。