亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

寫在最開始

說到UI，大家肯定都不陌生，User Interface 的縮寫，她是一個產(chǎn)品或者一個APP的外表，或者說外殼。作為一名UI設(shè)計(jì)師，我會把自己的每一個設(shè)計(jì)當(dāng)成自己的“孩子”，因?yàn)樗衅と猓樱?，有血脈（設(shè)計(jì)DNA），但是隨著越來越多的孩子降生于世，我發(fā)現(xiàn)她們還需要一樣?xùn)|西才能真正的“Run”起來，這就是我今天想聊的主題：UI的骨骼。

寫給身為UI設(shè)計(jì)者的你

這是一個陌生的詞匯，但是我相信，很多設(shè)計(jì)者已經(jīng)注意到了“骨骼”的存在并且開始為自己的“孩子”創(chuàng)建骨骼。有了“骨骼”，我們的設(shè)計(jì)就會變得“健壯”，她能夠適應(yīng)不同類型的設(shè)備和不同的使用場景（大屏幕或者小屏幕、豎屏或者橫屏以及需要動態(tài)調(diào)整的界面）。簡單說，“UI骨骼”就是設(shè)計(jì)UI的適配，但是我將要從“開發(fā)者”的角度”用“設(shè)計(jì)者”能懂的語言去探討這一話題，幫助尚未應(yīng)用骨骼進(jìn)行設(shè)計(jì)的同學(xué)了解它，也幫助正在應(yīng)用骨骼的同學(xué)更加系統(tǒng)化地學(xué)習(xí)它。

也許會有人說，這些難道不應(yīng)該是程序員該考慮的事情嗎？但是自己的孩子自己最清楚她的性格和氣質(zhì)，作為爹媽應(yīng)該既關(guān)心她是不是漂亮又要關(guān)心她是不是健康，如果她只是存在于設(shè)計(jì)軟件里的仙女，一到了用戶手里就變成丑女，這可不是爹媽想看到的結(jié)果。

所以希望將來我們在設(shè)計(jì)或評價一個UI設(shè)計(jì)的時候，不僅僅包括視覺效果、創(chuàng)意、情感化、統(tǒng)一性、獨(dú)特性、易用性和交互層面的創(chuàng)新，還包括UI設(shè)計(jì)的“健壯性”。廢話少說，直接進(jìn)入正題。

揭開骨骼的面紗

因?yàn)槲腋瞄LAndroid開發(fā)，故文章中的例子一般用Android系統(tǒng)或者Android APP來展示，但是“骨骼”本身與開發(fā)平臺是無關(guān)的，即便是傳統(tǒng)的windows桌面程序也適用，當(dāng)然如果你曾經(jīng)學(xué)習(xí)過Html和Css這樣的前端開發(fā)語言，也會幫助理解“骨骼”概念。

在開啟【開發(fā)者模式】中的【顯示布局邊界】后，屏幕上就會顯示出每個界面的布局結(jié)構(gòu)，這就是“骨骼”。從下圖中，我們很容易看出這個設(shè)置列表中每個UI元素的關(guān)系和適配的邏輯。骨骼和血肉是共生共存的，完整的視覺設(shè)計(jì)是不需要與程序員溝通適配邏輯的，一份標(biāo)注即可。我將在后面通過例子為大家進(jìn)行講解如何做到這一點(diǎn)。

可以發(fā)現(xiàn)這樣一個規(guī)律，我們設(shè)計(jì)的UI控件周圍都有一個“框框”，這就是骨骼的“單位”-盒子（box），首先讓我們先來聊聊“盒子（box）”，然后你會對“骨骼”有更加清晰的了解。

剛才簡單地介紹了box的一些基本的屬性，學(xué)過Html語言的同學(xué)一定知道：這就是經(jīng)典的盒式模型。今天我們先不過多糾結(jié)具體的技術(shù)細(xì)節(jié)，因?yàn)榻酉聛淼暮荛L一段時間，我會在更多的分享中慢慢幫助大家去了解。

應(yīng)用到設(shè)計(jì)流程中

應(yīng)用UI骨骼，不僅需要我們學(xué)習(xí)盒式模型的技術(shù)細(xì)節(jié)，逐步把握骨骼的構(gòu)造方法，還需要我們花費(fèi)一些時間去研究已有的成熟經(jīng)驗(yàn)?，F(xiàn)在讓我們來看看Android Material Design設(shè)計(jì)規(guī)范里的一些截圖。

注意觀察，會發(fā)現(xiàn)第一張圖里少了一些關(guān)鍵尺寸，比如三個導(dǎo)航按鈕的寬度值。這里應(yīng)用了“屏幕等分原則”，單個按鈕的寬度=屏幕寬度/3。那有人又要問了：“為什么橫屏情況下，卻沒有等分？”這是一個設(shè)計(jì)問題，在屏幕比例較寬的極端情況下（別以為沒有這樣的設(shè)備，有人見過智能車機(jī)的后視鏡界面嗎？）。“設(shè)計(jì)美觀性”和“移動距離更小的交互體驗(yàn)”都需要我們?yōu)閁I元素設(shè)置最大值，當(dāng)元素大于某數(shù)值，那么就不再變大。UI骨骼的設(shè)計(jì)也需要我們經(jīng)?？紤]這些極限值。

再看一下iOS的appStore的界面設(shè)計(jì)，與剛才的情況是一致的。

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

進(jìn)行一下對比

下面我使用一個經(jīng)典的“宮格界面”來簡述如何采用UI骨骼來進(jìn)行設(shè)計(jì)。

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

UI骨骼常用的布局屬性

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

講講我的設(shè)計(jì)習(xí)慣

我一般在設(shè)計(jì)的初期就會根據(jù)已經(jīng)成型的界面進(jìn)行骨骼的搭建。一邊設(shè)計(jì)視覺效果，一邊完善骨骼的結(jié)構(gòu)，因?yàn)殚_發(fā)實(shí)現(xiàn)會有一些特殊需要：比如6倍關(guān)系，骨骼作為一個非常好的參考系幫我減少了標(biāo)注過程調(diào)整元素尺寸和間距的冗余工作量。最重要的是，一開始就考慮骨骼的結(jié)構(gòu)，就不會在開發(fā)無法實(shí)現(xiàn)或者實(shí)現(xiàn)成本過高的情況下對布局進(jìn)行過大改動。這是一種“磨刀不誤砍柴功”的好方法，推薦給每個UI設(shè)計(jì)者。

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

關(guān)于我自己

我叫邊洪冰，網(wǎng)名bingxueling，06年進(jìn)入大學(xué)，學(xué)習(xí)“計(jì)算機(jī)科學(xué)與技術(shù)”專業(yè)， 本來畢業(yè)就是搞C++、Java或者.net的程序員。然而，07年開始接觸“軟件美化”，09年與iconfans（UI中國前身）中國隊(duì)一起征戰(zhàn)“GUIC”大賽并得了一個小獎，10年初進(jìn)入eico開始工作，后來還供職過360、百度和搜狗。我始終堅(jiān)信，“UI設(shè)計(jì)”是一門“科學(xué)”，所以我想和大家聊更多的科學(xué)話題，比如Android開發(fā)平臺里的設(shè)計(jì)規(guī)則、比如程序員如何進(jìn)行UI的控件化、再比如PS的字號跟開發(fā)使用的數(shù)值是什么關(guān)系，最后我還會教給大家一點(diǎn)Android開發(fā)的知識。

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

求關(guān)注以及相關(guān)資料

關(guān)注UI設(shè)計(jì)科學(xué)派微信訂閱號（微信搜索“UIDesignScience”），提前了解下期內(nèi)容。希望有越來越多的UI設(shè)計(jì)師跟我一起研究“UI設(shè)計(jì)中的科學(xué)性問題”，發(fā)現(xiàn)UI設(shè)計(jì)的科學(xué)之美與邏輯之美。

相關(guān)資料
字體的研究•上篇：同一字號，PS和開發(fā)效果是否一樣？如何獲取文字的真實(shí)高度和寬度？
字體的研究•下篇：如何標(biāo)注設(shè)計(jì)稿中的行間距？設(shè)計(jì)中常用的字號有哪些？