移動端界面的版式設(shè)計原理

移動端界面的版式設(shè)計原理第1頁/共46頁我總覺得頁面不太好看但是我又說不出來你覺得這好看？你的審美要加強(qiáng)啊我不懂設(shè)計，但是我就是覺得不協(xié)調(diào)

說不出哪里好也說不出哪里不好第2頁/共46頁其實設(shè)計本身就是一門理性的學(xué)科，審美因人而異，只有言之有理的設(shè)計才能夠說服別人。當(dāng)設(shè)計師拿到產(chǎn)品的原型開始做設(shè)計時，如果只是單純的按照原型進(jìn)行而不考慮任何規(guī)則，那么很多時候就會產(chǎn)生一些不協(xié)調(diào)的結(jié)果。設(shè)計完之后產(chǎn)品不滿意，自己也不滿意。

第3頁/共46頁在UI設(shè)計中其實也存在大量的版式設(shè)計原理，如果產(chǎn)品和設(shè)計都能對版式設(shè)計有一定的了解，那么設(shè)計師拿到原型的時候，評審設(shè)計輸出稿的時候大家都能更好地理解對方的設(shè)計。以下我總結(jié)了幾種常見的版式設(shè)計原理，是工作當(dāng)中做出良好視覺效果的前提。第4頁/共46頁01信息的排布HOWTOMAKEABERUTIFULUI>?第5頁/共46頁對任何信息進(jìn)行排布的設(shè)計的四大原則對齊重復(fù)親密對比第6頁/共46頁對齊除了能建立一種清晰精巧的外觀，還能方便開發(fā)的實現(xiàn)?；趶淖笊现劣蚁碌拈喿x習(xí)慣，移動端界面中內(nèi)容的排布通常使用左對齊和居中對齊，表單填寫的輸入項用右對齊。第7頁/共46頁設(shè)計和做其他事情一樣，也要有輕重緩急之分，不要讓用戶去找重點/需要注意的地方，應(yīng)該讓用戶流暢地接收到我們想要傳達(dá)的重要的信息。

第8頁/共46頁重復(fù)和對比是一套組合拳，讓設(shè)計中的視覺元素在整個設(shè)計中重復(fù)出現(xiàn)既能增加條理性也可以加強(qiáng)統(tǒng)一性，降低用戶認(rèn)知的難度。那么在需要突出重點的時候就可以使用對比的手法，例如圖片大小的不同或者顏色的不同表示強(qiáng)調(diào)，讓用戶直觀地感受到最重要的信息。第9頁/共46頁在排布復(fù)雜信息的時候，如果沒有規(guī)則地排布那么文本的可讀性就會降低。組織信息可以根據(jù)親密性的原則，把彼此相關(guān)的信息靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于減少混亂，為讀者提供清晰的結(jié)構(gòu)。第10頁/共46頁在設(shè)計表達(dá)的時候，一定要考慮內(nèi)容的易讀性。適當(dāng)使用圖形可以增加易讀性和設(shè)計感，而且圖形的理解比文字更高效。

那些用文字方式表現(xiàn)時顯得冗長的說明，一旦換成可視化的表現(xiàn)方式也會變得簡明清晰，可視化的圖形可以將說明/標(biāo)題/數(shù)值這種比較生硬的內(nèi)容，以比較柔和的方式呈現(xiàn)出來。第11頁/共46頁02圖片的使用HOWTOUSEPICTURE>?第12頁/共46頁App的頁面結(jié)構(gòu)和文本確定之后，就要開始安排圖標(biāo)/按鈕/圖片的安排了，這時頁面也就從單純文本的“閱讀”型結(jié)構(gòu)調(diào)整為“觀看”型結(jié)構(gòu)，對于頁面的易讀性以及頁面整體的效果會產(chǎn)生巨大的影響。第13頁/共46頁頁面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會給人一種寧靜典雅、高級的感覺。提升圖版率會有充滿活力，使畫面有富有感染力的效果。實際中也跟選取圖片的元素/色調(diào)/表達(dá)出來的情感有關(guān)系，合適的圖片也能散發(fā)出整個應(yīng)用的氣質(zhì)，直接傳達(dá)給人“高級”，“平民化”，“友好”等不同的感覺。第14頁/共46頁在內(nèi)容比較少但是又想提高版面率的話可以采用一些色塊，或者抽象化模擬現(xiàn)實存在的物件，例如電影票，書本紙張，優(yōu)惠券，便簽等的效果，使界面更友好也降低空洞的感覺。通過這種方式也可以改變頁面所呈現(xiàn)出的視覺感受，只是這種方法最多改變頁面的色調(diào)/質(zhì)感，并不能改改變“閱讀”內(nèi)容的比例，這點是需要注意的。第15頁/共46頁第16頁/共46頁03顏色的使用HOWTOUSECOLOR>?第17頁/共46頁不同的顏色可以帶給用戶不同的感覺，這點應(yīng)該是常識。在移動端界面中通常需要選取主色，標(biāo)準(zhǔn)色，點晴色。移動端與網(wǎng)頁端稍微不同，主色雖然是決定了畫面風(fēng)格的色彩但是往往不會被大面積的使用。

通常在導(dǎo)航欄/部分按鈕/icon/特殊頁面等地方出現(xiàn)，會有點晴，定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶找到品牌感的歸屬，例如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等等。標(biāo)準(zhǔn)色指的是整套移動界面的色彩規(guī)范，確定文本/線段/圖標(biāo)/背景等等的顏色。點晴色通常會用在標(biāo)題文本/按鈕/icon等地方，通常起強(qiáng)調(diào)和引導(dǎo)閱讀的作用。

主色在選擇上可能不止一個，點睛色通常也由兩三個顏色組成，標(biāo)準(zhǔn)色更是一套從強(qiáng)到弱的標(biāo)準(zhǔn)群，那么在點晴色與主色，主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環(huán)上鄰近的顏色)，這種方法比較常用因為色相柔和過渡也非常自然。第18頁/共46頁第19頁/共46頁第二種是同色系配色(色相一致，飽和度不同)，主色和點晴色都在統(tǒng)一的色相上，給用戶一種一致化的感受。

第20頁/共46頁第三種是點亮色配色，主色用相對沉穩(wěn)的顏色，點晴色采用一個高亮的顏色，起帶動頁面氣氛，強(qiáng)調(diào)重點的作用。第21頁/共46頁第四種是中性色配色，用一些中性的色彩為基調(diào)搭配，弱化干擾。這種方法在移動端是最常見的方法。第22頁/共46頁還有一些漸變，明暗調(diào)對比，多色搭配等方法在這里不一一說明，你感受一下。第23頁/共46頁04留白的使用HOWTOUSEWHITECOLOR>?第24頁/共46頁不單單是文字和圖片需要設(shè)計，留白也是構(gòu)成頁面排版必不可少的因素。所有的白都是“有目的的留白”，帶有明確的目的來控制頁面的空間構(gòu)成。

常見的手法有幾種，第一通過留白來減輕頁面帶給用戶的負(fù)擔(dān)。

首屏對一個應(yīng)用來說十分重要，因此一些比較復(fù)雜的應(yīng)用首評都堆積了大量的入口。如果無節(jié)制的添加，頁面中包含的內(nèi)容太多時，會給人一種頁面狹窄的感覺，給用戶帶來強(qiáng)烈的壓迫感，所以元素太多有時候反而不是好事。留白能使頁面的空間感更強(qiáng)，視線更開闊，通過留白來減輕頁面的壓迫感，使用戶進(jìn)入一種輕松的氛圍。第25頁/共46頁第26頁/共46頁第二通過留白區(qū)分元素的存在，弱化元素與元素之間的阻隔。表單項與表單項之間，按鈕與按鈕之間，段落與段落之間這種有聯(lián)系但又需要區(qū)分的元素用留白的方式可以輕易造成一種視覺上的識別，同時也能給用戶一種干凈整潔的感覺。第27頁/共46頁第三通過留白有目的的突出表達(dá)的重點。“設(shè)計包含著對差異的控制。

不斷重復(fù)相同的工作使我懂得，重要的是要限制那些差異，只保留那些最關(guān)鍵的?！边@句話出自原拓哉的“白”一書中，通過留白去限制頁面中的差異使內(nèi)容突出是最簡單自然的表達(dá)方式。減少頁面的元素以及雜亂的色彩，讓用戶可以快速聚焦到產(chǎn)品本身，這種方法在電商類的應(yīng)用上被大量的使用第28頁/共46頁第29頁/共46頁第四留白賦予頁面構(gòu)成產(chǎn)生不同的變化。版式設(shè)計中要有節(jié)奏感，這也是我一直強(qiáng)調(diào)了。傳統(tǒng)雜志在每一頁翻開都會有不同的視覺感受，我認(rèn)為在app內(nèi)很多板塊之間的也是可以局部去突出個性或特點的。

留白可以賦予頁面輕重緩急的變化，也可以營造出不同的視覺氛圍，通過留白去改變版式再配合四大原則可以產(chǎn)生出不同的效果。第30頁/共46頁留白不是一定要用白色去填充界面，而是營造出一種空間與距離的感覺，自然與舒適境界第31頁/共46頁05視覺心理的運(yùn)用HOWTOUSEPHD>?第32頁/共46頁在觀看事物時，往往會產(chǎn)生一些不同的視覺心理，例如兩個等寬的正方形和圓形放在一起，你一定會覺得正方形更寬。在版式設(shè)計中同樣大量運(yùn)用這些科學(xué)視覺方法對用戶進(jìn)行視覺上的引導(dǎo)，也能讓設(shè)計師快速找到一些排版布局的方法。第33頁/共46頁首先最常見方法是的是靈活運(yùn)用黃金分割比，文本與線段的間隔，圖片的長寬比等地方都可以通過黃金分割比快速的設(shè)定。比如通欄高度的設(shè)定等等。第34頁/共46頁在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。直角通常用在需要更全面展示的地方，例如用戶的照片，唱片封面，藝術(shù)作品，商品展示等地方。在個人類的feed或者頭像，板塊的樣式等使用圓角會有更好的效果。第35頁/共46頁第36頁/共46頁第37頁/共46頁在全局頁面的排版中也要避免單調(diào)，增加節(jié)奏感。

在上文我也提到過排版要有輕重緩急之分，這樣讓用戶在觀看的過程中不會感到冗長，無趣。第38頁/共46頁第39頁/共46頁圖片也是有不同的色調(diào)的，通過蒙版的方法可以控制這種色調(diào)。如果選擇比較明亮的色調(diào)可以減輕這種對用戶的壓迫感，選擇比較暗的色調(diào)可以讓整個畫面更沉穩(wěn)，內(nèi)容顯示更為清晰。

第40頁/共46頁06去設(shè)計化~NODESIGN>?第41頁/共46頁最后這段不是版式設(shè)計原理，更像是一種設(shè)計的心境。

古人在寫詩的時候有一種手法叫白描，原拓哉也曾強(qiáng)調(diào)“最美的設(shè)計是虛無”，在界面設(shè)計中同樣追求一種“讓用戶感受不到設(shè)計”的境界。每一條線/每一行文字/每一個按鈕的存在都是都有它存在的理由。

它不加無意義的修飾、不須陪村和烘托，讓用戶更關(guān)注內(nèi)容的主體，弱化對視覺的認(rèn)知。甚至于用戶在滑動時看到一個按鈕或一行文字也感覺這是理所當(dāng)然的存在?！捌刑岜緹o樹，明鏡亦非臺”，做設(shè)計和做人一樣，一切有為法皆如夢幻泡影，不要注重形式才能明心見性。第42頁/共46