2015-4-16 用心設(shè)計
藍藍設(shè)計( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
來源：莫貝網(wǎng)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
對齊與間距，無非左右上下的關(guān)系，怎樣才能讓符合用戶的視覺感知呢？蕓蕓眾生，紅塵滾滾，有幸讓他（她）瞄上一眼，留下個“很舒服”的第一印象，非常重要。
而且在實際設(shè)計的流程中，如果經(jīng)常因為哪里沒對齊被批，會影響整個團隊效率，你在團隊中信任度也會降低。不要迷信什么大神了，還是把自己當(dāng)前水平該掌握的基礎(chǔ)知識，拿到手，更靠譜。
說的玄乎點是設(shè)計師的態(tài)度，說大白話就是基礎(chǔ)不牢固，還總要建高樓。好，不念經(jīng)了，說基礎(chǔ)，希望能發(fā)揮點作用。
一.基礎(chǔ)操作方式
利用參考線對齊在Photoshop的【編輯】-【首選項】菜單中可以設(shè)置合適的網(wǎng)格尺寸。
在設(shè)計前期將界面進行設(shè)置框架參考線，通過參考線將按鈕、文字、圖形對齊。
PS參考線小插件-GuideGuide
這是一個非常便捷的畫參考線的工具，讓你節(jié)省了時間去算參考線。在插件你可以輸入一些數(shù)字，GuideGuide可以通過你設(shè)定的單位自動劃分號好 網(wǎng)格。這個軟件最強大的地方就是：可以通過畫布中選區(qū)的大小生成對應(yīng)的網(wǎng)格參考線。真是畫參考線的神器也！使用教 程：http://jingyan.baidu.com/article/3052f5a1ddd91097f21f8610.html
界面中常用對齊形式
對齊三大招：齊行、居左、居中。（貌似初一就學(xué)過，干活卻老忘）
齊行式：運用在閱讀性文本中，比較長的文本段。一般用在詳情頁中。（圖：貓眼電議）
居左式：這種用的比較多，常常運用在APP的設(shè)計中，列表信息展示等。這種對齊方式比較容易閱讀，能很好的區(qū)分主次文本的層次。（圖：淘寶）
居中式：主要使用在信息流式的文本表現(xiàn)方式中。（圖QQ音樂）
二.解構(gòu)分析
有對齊的意識，也進行對齊，但為什么不夠高大上呢？設(shè)計出來的效果怪怪的……
一般設(shè)計師會這樣設(shè)計，大感覺上也沒有什么問題。（下圖）
其實對齊也是有規(guī)律的，善于發(fā)現(xiàn)設(shè)計中的聯(lián)系。
我們來看一下其他幾個用戶體驗不錯的輸入框設(shè)計，憑啥就這么舒服呢？和大家解構(gòu)一下它們的設(shè)計。
小米的登錄頁
在小米的登錄頁設(shè)計中，主標(biāo)題與副標(biāo)題進行了左對齊。
輸入框提示文字與輸入框基于中心線對齊，讓提示信息和輸入框看起來更為整體舒服。
內(nèi)容劃分明確，明確了哪些是需要輸入的，哪些只是描述。
蘋果的登錄頁
在蘋果的登錄頁面中更為講究，標(biāo)題和輸入框利用了不同對齊方式拉開了層次。
請登錄標(biāo)題和取消按鈕是左對齊的，而輸入框與提示文字則是居中對齊的。
將用戶的視線引入到了輸入框的上面，從而加強了提示文字與輸入框之間的關(guān)系，并用大間距拉開了標(biāo)題和內(nèi)文的層次。
在對齊的方式里我們找到了規(guī)律，層級關(guān)系,框框框！
通過對其方式來區(qū)分內(nèi)容的層級關(guān)系，這就是隱形對齊框的作用。將信息層級通過這種方式羅列在用戶眼前。讓用戶最近視角展示產(chǎn)品的核心信息。提煉出用戶在場景中最為關(guān)注的訴求，解決用戶的問題。
對齊也是有層次的。有左對齊、右對齊、居中對齊。（都懂都懂，就是用不好）左對齊和右對齊主要是對屏幕內(nèi)容的規(guī)整性，居中對齊則是對內(nèi)容文本的劃分。
三.常用間距
將框框框融入到APP界面中，將主要的，用戶想找的內(nèi)容突出出來。
在設(shè)計中一般間距設(shè)定的大小單位10px，這樣更容易統(tǒng)一整個畫面的一致性。
在界面中常用間距來劃分內(nèi)容的層級關(guān)系，讓內(nèi)容與導(dǎo)航取分出來。
在導(dǎo)航上的左右間距是20px，
而在內(nèi)容列表信息程序時左右間距調(diào)整到了30px。
通過這種方式區(qū)分了上下層級的關(guān)系。
那么在主文本信息中還將上下間距統(tǒng)一一致都設(shè)定為30px，使整個內(nèi)容的邊框看起來更為整體舒服。
我們常會設(shè)計到雙行文字的列表，QQ的設(shè)計是120px，隨著設(shè)備屏幕的變大，更加注重了頁面的留白。為了加強內(nèi)容的突出性。我在設(shè)計中高度設(shè)定為130px
再往深的走，界面中還會有其他的信息。如時間、消息氣泡等。它們的對齊模式會根據(jù)字號大小進行控制。
為了保證內(nèi)容閱讀的舒適性，字號大小不一致的文本我們還會用到居中對齊的方式（比如，上圖中的主標(biāo)題和時間的對齊方式），讓內(nèi)容顯得更為規(guī)整。
總之，以內(nèi)容為中心的設(shè)計能讓用戶快速找到想要的。使用正確的對齊和間距，能讓界面更為整齊，信息更為明確。
今天就到這里，休息休息，休息一大會兒，然后多看多分析，多交流。
快分享給需要的人吧，讓我們一起努力，一起進步~
藍藍設(shè)計的小編 http://www.chinatradebeam.com