對(duì)齊與間距，無(wú)非左右上下的關(guān)系，怎樣才能讓符合用戶(hù)的視覺(jué)感知呢?蕓蕓眾生，紅塵滾滾，有幸讓他(她)瞄上一眼，留下個(gè)“很舒服”的第一印象，非常重要

　　而且在實(shí)際設(shè)計(jì)的流程中，如果經(jīng)常因?yàn)槟睦餂](méi)對(duì)齊被批，會(huì)影響整個(gè)團(tuán)隊(duì)效率，你在團(tuán)隊(duì)中信任度也會(huì)降低。不要迷信什么大神了，還是把自己當(dāng)前水平該掌握的基礎(chǔ)知識(shí)，拿到手，更靠譜。

　　說(shuō)的玄乎點(diǎn)是設(shè)計(jì)師的態(tài)度，說(shuō)大白話(huà)就是基礎(chǔ)不牢固，還總要建高樓。好，不念經(jīng)了，說(shuō)基礎(chǔ)，希望能發(fā)揮點(diǎn)作用。

一、基礎(chǔ)操作方式

　　工欲善其事，必先利其器。

　　利用參考線(xiàn)對(duì)齊。在Photoshop的【編輯】-【選項(xiàng)】菜單中可以設(shè)置合適的網(wǎng)格尺寸。

　　在設(shè)計(jì)前期將界面進(jìn)行設(shè)置框架參考線(xiàn)，通過(guò)參考線(xiàn)將按鈕、文字、圖形對(duì)齊。

　　PS參考線(xiàn)小插件-GuideGuide

　　這是一個(gè)非常便捷的畫(huà)參考線(xiàn)的工具，讓你節(jié)省了時(shí)間去算參考線(xiàn)。在插件你可以輸入一些數(shù)字，GuideGuide可以通過(guò)你設(shè)定的單位自動(dòng)劃分號(hào)好網(wǎng)格。這個(gè)軟件最強(qiáng)大的地方就是：可以通過(guò)畫(huà)布中選區(qū)的大小生成對(duì)應(yīng)的網(wǎng)格參考線(xiàn)。真是畫(huà)參考線(xiàn)的神器也!

　　界面中常用對(duì)齊形式

　　對(duì)齊三大招：齊行、居左、居中。(貌似初一就學(xué)過(guò)，干活卻老忘)

　　齊行式：運(yùn)用在閱讀性文本中，比較長(zhǎng)的文本段。一般用在詳情頁(yè)中。(圖：貓眼電議)

　　居左式：這種用的比較多，常常運(yùn)用在APP的設(shè)計(jì)中，列表信息展示等。這種對(duì)齊方式比較容易閱讀，能很好的區(qū)分主次文本的層次。(圖：淘寶)

　　居中式：主要使用在信息流式的文本表現(xiàn)方式中。(圖QQ音樂(lè))

二、解構(gòu)分析

　　有對(duì)齊的意識(shí)，也進(jìn)行對(duì)齊，但為什么不夠高大上呢?設(shè)計(jì)出來(lái)的效果怪怪的……

　　一般設(shè)計(jì)師會(huì)這樣設(shè)計(jì)，大感覺(jué)上也沒(méi)有什么問(wèn)題。(下圖)

　　其實(shí)對(duì)齊也是有規(guī)律的，善于發(fā)現(xiàn)設(shè)計(jì)中的聯(lián)系。

　　我們來(lái)看一下其他幾個(gè)用戶(hù)體驗(yàn)不錯(cuò)的輸入框設(shè)計(jì)，憑啥就這么舒服呢?和大家解構(gòu)一下它們的設(shè)計(jì)。

　　小米的登錄頁(yè)。

　　在小米的登錄頁(yè)設(shè)計(jì)中，主標(biāo)題與副標(biāo)題進(jìn)行了左對(duì)齊。

　　輸入框提示文字與輸入框基于中心線(xiàn)對(duì)齊，讓提示信息和輸入框看起來(lái)更為整體舒服。

　　內(nèi)容劃分明確，明確了哪些是需要輸入的，哪些只是描述。

　　蘋(píng)果的登錄頁(yè)

　　在蘋(píng)果的登錄頁(yè)面中更為講究，標(biāo)題和輸入框利用了不同對(duì)齊方式拉開(kāi)了層次。

　　請(qǐng)登錄標(biāo)題和取消按鈕是左對(duì)齊的，而輸入框與提示文字則是居中對(duì)齊的。

　　將用戶(hù)的視線(xiàn)引入到了輸入框的上面，從而加強(qiáng)了提示文字與輸入框之間的關(guān)系，并用大間距拉開(kāi)了標(biāo)題和內(nèi)文的層次。

　　在對(duì)齊的方式里我們找到了規(guī)律，層級(jí)關(guān)系，框框框!

　　通過(guò)對(duì)其方式來(lái)區(qū)分內(nèi)容的層級(jí)關(guān)系，這就是隱形對(duì)齊框的作用。將信息層級(jí)通過(guò)這種方式羅列在用戶(hù)眼前。讓用戶(hù)最近視角展示產(chǎn)品的核心信息。提煉出用戶(hù)在場(chǎng)景中最為關(guān)注的訴求，解決用戶(hù)的問(wèn)題。

　　對(duì)齊也是有層次的。有左對(duì)齊、右對(duì)齊、居中對(duì)齊。(都懂都懂，就是用不好)左對(duì)齊和右對(duì)齊主要是對(duì)屏幕內(nèi)容的規(guī)整性，居中對(duì)齊則是對(duì)內(nèi)容文本的劃分。

三、常用間距

　　將框框框融入到APP界面中，將主要的，用戶(hù)想找的內(nèi)容突出出來(lái)。

　　在設(shè)計(jì)中一般間距設(shè)定的大小單位10px，這樣更容易統(tǒng)一整個(gè)畫(huà)面的一致性。

　　在界面中常用間距來(lái)劃分內(nèi)容的層級(jí)關(guān)系，讓內(nèi)容與導(dǎo)航取分出來(lái)。

　　在導(dǎo)航上的左右間距是20px，而在內(nèi)容列表信息程序時(shí)左右間距調(diào)整到了30px。

　　通過(guò)這種方式區(qū)分了上下層級(jí)的關(guān)系。

　　那么在主文本信息中還將上下間距統(tǒng)一一致都設(shè)定為30px，使整個(gè)內(nèi)容的邊框看起來(lái)更為整體舒服。

　　我們常會(huì)設(shè)計(jì)到雙行文字的列表，QQ的設(shè)計(jì)是120px，隨著設(shè)備屏幕的變大，更加注重了頁(yè)面的留白。為了加強(qiáng)內(nèi)容的突出性。我在設(shè)計(jì)中高度設(shè)定為130px

　　再往深的走，界面中還會(huì)有其他的信息。如時(shí)間、消息氣泡等。它們的對(duì)齊模式會(huì)根據(jù)字號(hào)大小進(jìn)行控制。

　　為了保證內(nèi)容閱讀的舒適性，字號(hào)大小不一致的文本我們還會(huì)用到居中對(duì)齊的方式(比如，上圖中的主標(biāo)題和時(shí)間的對(duì)齊方式)，讓內(nèi)容顯得更為規(guī)整。

　　總之，以?xún)?nèi)容為中心的設(shè)計(jì)能讓用戶(hù)快速找到想要的。使用正確的對(duì)齊和間距，能讓界面更為整齊，信息更為明確。

網(wǎng)站題目：基礎(chǔ)小科普！聊聊界面中常用的對(duì)齊形式
鏈接URL：http://chinadenli.net/news/160901.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、云服務(wù)器、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、網(wǎng)站維護(hù)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)