UI的骨骼?始章

UI的骨骼和血肉是共生共存的，完整的視覺設計是不需要與程序員溝通的適配邏輯的，一份標註即可。

寫在最開始

說到UI，大家肯定都不陌生，User Interface 的縮寫，她是一個產品或者一個APP的外表，或者說外殼。作為一名UI設計師，我會把自己的每一個設計當成自己的「孩子」，因為她有皮肉（模樣），有血脈（設計DNA），但是隨著越來越多的孩子降生於世，我發現她們還需要一樣東西才能真正的「Run」起來，這就是我今天想聊的主題：UI的骨骼。

寫給身為UI設計者的

這是一個陌生的辭彙，但是我相信，很多設計者已經注意到了「骨骼」的存在並且開始為自己的「孩子」創建骨骼。有了「骨骼」，我們的設計就會變得「健壯」，她能夠適應不同類型的設備和不同的使用場景（大屏幕或者小屏幕、豎屏或者橫屏以及需要動態調整的界面）。簡單說，「UI骨骼」就是設計UI的適配，但是我將要從「開發者」的角度」用「設計者」能懂的語言去探討這一話題，幫助尚未應用骨骼進行設計的同學了解它，也幫助正在應用骨骼的同學更加系統化地學習它。

也許會有人說，這些難道不應該是程序員該考慮的事情嗎？但是自己的孩子自己最清楚她的性格和氣質，作為爹媽應該既關心她是不是漂亮又要關心她是不是健康，如果她只是存在於設計軟體里的仙女，一到了用戶手裡就變成醜女，這可不是爹媽想看到的結果。

所以希望將來我們在設計或評價一個UI設計的時候，不僅僅包括視覺效果、創意、情感化、統一性、獨特性、易用性和交互層面的創新，還包括UI設計的「健壯性」。廢話少說，直接進入正題。

揭開骨骼的面紗

因為我更擅長Android開發，故文章中的例子一般用Android系統或者Android APP來展示，但是「骨骼」本身與開發平台是無關的，即便是傳統的windows桌面程序也適用，當然如果你曾經學習過Html和Css這樣的前端開發語言，也會幫助理解「骨骼」概念。

在開啟【開發者模式】中的【顯示布局邊界】後，屏幕上就會顯示出每個界面的布局結構，這就是「骨骼」。從下圖中，我們很容易看出這個設置列表中每個UI元素的關係和適配的邏輯。骨骼和血肉是共生共存的，完整的視覺設計是不需要與程序員溝通適配邏輯的，一份標註即可。我將在後面通過例子為大家進行講解如何做到這一點。

可以發現這樣一個規律，我們設計的UI控制項周圍都有一個「框框」，這就是骨骼的「單位」-盒子（box），首先讓我們先來聊聊「盒子（box）」，然後你會對「骨骼」有更加清晰的了解。

剛才簡單地介紹了box的一些基本的屬性，學過Html語言的同學一定知道：這就是經典的盒式模型。今天我們先不過多糾結具體的技術細節，因為接下來的很長一段時間，我會在更多的分享中慢慢幫助大家去了解。

應用到設計流程中

應用UI骨骼，不僅需要我們學習盒式模型的技術細節，逐步把握骨骼的構造方法，還需要我們花費一些時間去研究已有的成熟經驗。現在讓我們來看看Android Material Design設計規範里的一些截圖。

注意觀察，會發現第一張圖裡少了一些關鍵尺寸，比如三個導航按鈕的寬度值。這裡應用了「屏幕等分原則」，單個按鈕的寬度=屏幕寬度/3。那有人又要問了：「為什麼橫屏情況下，卻沒有等分？」這是一個設計問題，在屏幕比例較寬的極端情況下（別以為沒有這樣的設備，有人見過智能車機的後視鏡界面嗎？）。「設計美觀性」和「移動距離更小的交互體驗」都需要我們為UI元素設置最大值，當元素大於某數值，那麼就不再變大。UI骨骼的設計也需要我們經常考慮這些極限值。

再看一下iOS的appStore的界面設計，與剛才的情況是一致的。

講到這裡，大家是否能夠get到此話題的中心思想了呢？UI設計，並不是一個靜態的圖畫，而是一個能夠適應各種環境，能伸能屈的血肉之軀，我們作為設計師，應該從一開始就考慮到這個產品的使用環境，在設計流程中就考慮UI骨骼的搭建，所以UI設計應該是：皮肉（視覺效果）+ 內骨骼（適配邏輯）+ 血脈（設計DNA）。

進行一下對比

下面我使用一個經典的「宮格界面」來簡述如何採用UI骨骼來進行設計。

有些設計師會採用左側的方式行進標註，思考這樣一個問題：如果到了屏幕點數更少的機器上（比如480X800的hdpi機器），這個界面怎麼適配？有人可能不知道480的機器少了多少點而無法回答；有人會花費很多時間描述這些數值在更小的屏幕時如何變化。其實，一個完整的UI設計會自行適配，右側是一個應用了骨骼的對比方案（實際工作的標註要複雜一些，會針對極限情況做優化），不需要太多言語就說明了適配邏輯。再一次證明：血肉與骨骼是共生共存的，而不需要一份尺寸標註+一份適配邏輯說明。

UI骨骼常用的布局屬性

在Android的開發平台中，提供了幾種布局模式，比如線性布局、相對位置布局等，每種模式都有相當多的屬性，用他們可以搭建各種各樣的布局。下面是我用設計的語言翻譯的一些屬性名稱。暫時不要糾結太多的技術細節，針對開發模式的知識，我會慢慢在後續的文章中進行講解。

講講我的設計習慣

我一般在設計的初期就會根據已經成型的界面進行骨骼的搭建。一邊設計視覺效果，一邊完善骨骼的結構，因為開發實現會有一些特殊需要：比如6倍關係，骨骼作為一個非常好的參考系幫我減少了標註過程調整元素尺寸和間距的冗餘工作量。最重要的是，一開始就考慮骨骼的結構，就不會在開發無法實現或者實現成本過高的情況下對布局進行過大改動。這是一種「磨刀不誤砍柴功」的好方法，推薦給每個UI設計者。

上面是我寫的一個手電筒APP（工作太忙了，設置頁面還未開發完，囧）。我首先把整個界面按照一定比例分成了上下兩部分，上部分水平/垂直居中放置logo；下部分包括一個power按鈕和一個switch開關，兩個控制項組垂直保持固定間距，然後兩個控制項整體水平/垂直居中放置在下部分。

關於我自己

我叫邊洪冰，網名bingxueling，06年進入大學，學習「計算機科學與技術」專業， 本來畢業就是搞C++、Java或者.net的程序員。然而，07年開始接觸「軟體美化」，09年與iconfans（UI中國前身）中國隊一起征戰「GUIC」大賽並得了一個小獎，10年初進入eico開始工作，後來還供職過360、百度和搜狗。我始終堅信，「UI設計」是一門「科學」，所以我想和大家聊更多的科學話題，比如Android開發平台里的設計規則、比如程序員如何進行UI的控制項化、再比如PS的字型大小跟開發使用的數值是什麼關係，最後我還會教給大家一點Android開發的知識。

好啦，今天的分享就這麼多，若對UI的骨骼有疑問，歡迎大家在UI設計科學派訂閱號或UI中國給我留言，也可以把你們在UI設計過程中遇到的開發問題反饋給我。今天只是引出話題，希望將來能把更多UI骨骼的知識分享給中國的每一位UI設計師。

求關注以及相關資料

相關資料

字體的研究?下篇：如何標註設計稿中的行間距？設計中常用的字型大小有哪些？

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！