解剖學一般是針對某些器官的分開和分離。用戶界面也可以一樣被分解。從創(chuàng)立之初，用戶界面也會隨著設計師對用戶的不斷了解而成長，他們也會死亡，為更適合的模式提供更多的空間，所以，如果UI設計一個組織，那他即應該可以被解剖。

每個數(shù)位的屏幕元素，我們看到是由四個部分組成：顏色，字體，排版和圖標。當然在UI界面，聲音，深度和動效也是有的，但是都沒有前面的四個重要。沒有一個UI元素可以脫離前面四個元素存在。如果能在設計過程中盡早的定義這些模塊，那么就有機會創(chuàng)造更好的界面和交互體驗，而且整體能從屬于一個大的目的-品牌定位。

來看看下面的例子，對一個簡單的按鈕進行解剖。

想看看他們是如何組合發(fā)揮作用的嗎？

現(xiàn)在添加了他們的網(wǎng)格系統(tǒng)，讓其無論在什么屏幕下，都能給我們一個靈活的，響應的方法去適應？

我使用的是8點網(wǎng)格系統(tǒng)，就是運用8的倍數(shù)去定義每一個塊體和內(nèi)部元素：尺寸，Padding和Margin。他將給你一個更有凝聚力的布局，Elliot Dahl的文章里有很好的提到這一點，8點網(wǎng)格：https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

當你打開最喜歡的app，會發(fā)現(xiàn)整個UI中的這四要素，這些程序員來編寫這個頁面時，都會遵循一個CSS的樣式。這很重要，因為大部分設計師都不知道這個重要的事實，最終給到開發(fā)者不一致的設計文檔。這樣導致了不一致的UI，頁面是一種分散的體驗。

總是換位思考，設想開發(fā)同學會準確的參照你給的東西進行編碼。所以如果界面出現(xiàn)問題，那可能就是設計師的錯。

所有的前端開發(fā)人員，需要在他們的代碼中標記處Padding，Margins，F(xiàn)ont-size，F(xiàn)ont-weight，color，background-color等等。如果你的系統(tǒng)中有對這些有著明確的定義，那么對于開發(fā)同學來說是會有著很大的幫助。我用一個叫做Design Token的方法來幫我處理這個過程，然后我組成一個SASS文件，如果你不熟悉，一個前端開發(fā)同學可以幫助你。你可以在這里了解更多：https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

總之，嘗試用一個框架開始撰寫你的UI，讓你的UI界面可擴展，可以變換參數(shù)（色調(diào)，排版風格，圖標），但是你應該始終有一個框架，這個框架就是設計系統(tǒng)。

設計系統(tǒng)，是一個由動態(tài)指南構成的產(chǎn)品，用于傳達一個統(tǒng)一的UX體系和設計目標，提升各類輸出物的和諧度。

原文地址：https://medium.muz.li/the-anatomy-of-all-digital-interfaces-11d43f55eaf