正如數(shù)學(xué)，設(shè)計(jì)是一門(mén)理性的科學(xué)，言之有理的設(shè)計(jì)才能說(shuō)服別人，無(wú)論是平面設(shè)計(jì)也好，網(wǎng)頁(yè)UI設(shè)計(jì)也好，PPT設(shè)計(jì)更是，PPT設(shè)計(jì)更講究邏輯，講究溝通的有效性，讓聽(tīng)眾盡可能快地理解和記住你的信息。設(shè)計(jì)師理性的，那么也是有據(jù)可依的，pptfans小編覺(jué)得這篇文章比較適合做PPT多年，但一直做不好排版工作的各位。
“我總覺(jué)得頁(yè)面不太好看但是我又說(shuō)不出來(lái)”
“我不懂設(shè)計(jì)，但是我就是覺(jué)得不協(xié)調(diào)”
“你覺(jué)得這好看？你的審美要加強(qiáng)啊”
這些聽(tīng)著熟悉的話(huà)往往是產(chǎn)品和設(shè)計(jì)產(chǎn)生矛盾的開(kāi)端。還有一種評(píng)價(jià)叫說(shuō)不出哪里好也說(shuō)不出哪里不好，相信很多人也有過(guò)感同身受的無(wú)奈。
其實(shí)設(shè)計(jì)本身就是一門(mén)理性的學(xué)科，審美因人而異，只有言之有理的設(shè)計(jì)才能夠說(shuō)服別人。當(dāng)設(shè)計(jì)師拿到產(chǎn)品的原型開(kāi)始做設(shè)計(jì)時(shí)，如果只是單純的按照原型進(jìn)行而不考慮任何規(guī)則，那么很多時(shí)候就會(huì)產(chǎn)生一些不協(xié)調(diào)的結(jié)果。設(shè)計(jì)完之后產(chǎn)品不滿(mǎn)意，自己也不滿(mǎn)意。在UI設(shè)計(jì)中其實(shí)也存在大量的版式設(shè)計(jì)原理，如果產(chǎn)品和設(shè)計(jì)都能對(duì)版式設(shè)計(jì)有一定的了解，那么設(shè)計(jì)師拿到原型的時(shí)候，評(píng)審設(shè)計(jì)輸出稿的時(shí)候大家都能更好地理解對(duì)方的設(shè)計(jì)。以下我總結(jié)了幾種常見(jiàn)的版式設(shè)計(jì)原理，是工作當(dāng)中做出良好視覺(jué)效果的前提。
信息的排布
對(duì)任何信息進(jìn)行排布的時(shí)候，首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比，貫穿設(shè)計(jì)的四大原則。
對(duì)齊除了能建立一種清晰精巧的外觀(guān)，還能方便開(kāi)發(fā)的實(shí)現(xiàn)?；趶淖笊现劣蚁碌拈喿x習(xí)慣，移動(dòng)端界面中內(nèi)容的排布通常使用左對(duì)齊和居中對(duì)齊，表單填寫(xiě)的輸入項(xiàng)使用右對(duì)齊。
設(shè)計(jì)和做其他事情一樣，也要有輕重緩急之分，不要讓用戶(hù)去找重點(diǎn)/需要注意的地方，應(yīng)該讓用戶(hù)流暢地接收到我們想要傳達(dá)的重要的信息。重復(fù)和對(duì)比是一套組合拳，讓設(shè)計(jì)中的視覺(jué)元素在整個(gè)設(shè)計(jì)中重復(fù)出現(xiàn)既能增加條理性也可以加強(qiáng)統(tǒng)一性，降低用戶(hù)認(rèn)知的難度。那么在需要突出重點(diǎn)的時(shí)候就可以使用對(duì)比的手法，例如圖片大小的不同或者顏色的不同表示強(qiáng)調(diào)，讓用戶(hù)直觀(guān)地感受到最重要的信息。
在排布復(fù)雜信息的時(shí)候，如果沒(méi)有規(guī)則地排布那么文本的可讀性就會(huì)降低。組織信息可以根據(jù)親密性的原則，把彼此相關(guān)的信息靠近，歸組在一起。如果多個(gè)項(xiàng)相互之間存在很近的親密性，它們就會(huì)成為一個(gè)視覺(jué)單元，而不是多個(gè)孤立的元素。這有助于減少混亂，為讀者提供清晰的結(jié)構(gòu)。
在設(shè)計(jì)表達(dá)的時(shí)候，一定要考慮內(nèi)容的易讀性。適當(dāng)使用圖形可以增加易讀性和設(shè)計(jì)感，而且圖形的理解比文字更高效。那些用文字方式表現(xiàn)時(shí)顯得冗長(zhǎng)的說(shuō)明，一旦換成可視化的表現(xiàn)方式也會(huì)變得簡(jiǎn)明清晰，可視化的圖形可以將說(shuō)明/標(biāo)題/數(shù)值這種比較生硬的內(nèi)容，以比較柔和的方式呈現(xiàn)出來(lái)。
圖片的使用
app的頁(yè)面結(jié)構(gòu)和文本確定之后，就要開(kāi)始安排圖標(biāo)/按鈕/圖片的安排了，這時(shí)頁(yè)面也就從單純文本的“閱讀”型結(jié)構(gòu)調(diào)整為“觀(guān)看”型結(jié)構(gòu)，對(duì)于頁(yè)面的易讀性以及頁(yè)面整體的效果會(huì)產(chǎn)生巨大的影響。頁(yè)面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會(huì)給人一種寧?kù)o典雅、高級(jí)的感覺(jué)。提升圖版率會(huì)有充滿(mǎn)活力，使畫(huà)面有富有感染力的效果。
實(shí)際中也跟選取圖片的元素/色調(diào)/表達(dá)出來(lái)的情感有關(guān)系，合適的圖片也能散發(fā)出整個(gè)應(yīng)用的氣質(zhì)，直接傳達(dá)給人“高級(jí)”，“平民化”，“友好”等不同的感覺(jué)。
在內(nèi)容比較少但是又想提高版面率的話(huà)可以采用一些色塊，或者抽象化模擬現(xiàn)實(shí)存在的物件，例如電影票，書(shū)本紙張，優(yōu)惠券，便簽等的效果，使界面更友好也降低空洞的感覺(jué)。通過(guò)這種方式也可以改變頁(yè)面所呈現(xiàn)出的視覺(jué)感受，只是這種方法最多改變頁(yè)面的色調(diào)/質(zhì)感，并不能改改變“閱讀”內(nèi)容的比例，這點(diǎn)是需要注意的。
顏色的使用
不同的顏色可以帶給用戶(hù)不同的感覺(jué)，這點(diǎn)應(yīng)該是常識(shí)。在移動(dòng)端界面中通常需要選取主色，標(biāo)準(zhǔn)色，點(diǎn)晴色。移動(dòng)端與網(wǎng)頁(yè)端稍微不同，主色雖然是決定了畫(huà)面風(fēng)格的色彩但是往往不會(huì)被大面積的使用。通常在導(dǎo)航欄/部分按鈕/icon/特殊頁(yè)面等地方出現(xiàn)，會(huì)有點(diǎn)晴，定調(diào)的作用。統(tǒng)一的主色調(diào)也能讓用戶(hù)找到品牌感的歸屬，例如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等等。標(biāo)準(zhǔn)色指的是整套移動(dòng)界面的色彩規(guī)范，確定文本/線(xiàn)段/圖標(biāo)/背景等等的顏色。點(diǎn)晴色通常會(huì)用在標(biāo)題文本/按鈕/icon等地方，通常起強(qiáng)調(diào)和引導(dǎo)閱讀的作用。
主色在選擇上可能不止一個(gè)，點(diǎn)睛色通常也由兩三個(gè)顏色組成，標(biāo)準(zhǔn)色更是一套從強(qiáng)到弱的標(biāo)準(zhǔn)群，那么在點(diǎn)晴色與主色，主色與主色之間的選擇上便有不同的方法。第一種是鄰近色配色(色相環(huán)上鄰近的顏色)，這種方法比較常用因?yàn)樯嗳岷瓦^(guò)渡也非常自然。
第二種是同色系配色(色相一致，飽和度不同)，主色和點(diǎn)晴色都在統(tǒng)一的色相上，給用戶(hù)一種一致化的感受。
第三種是點(diǎn)亮色配色，主色用相對(duì)沉穩(wěn)的顏色，點(diǎn)晴色采用一個(gè)高亮的顏色，起帶動(dòng)頁(yè)面氣氛，強(qiáng)調(diào)重點(diǎn)的作用。
第四種是中性色配色，用一些中性的色彩為基調(diào)搭配，弱化干擾。這種方法在移動(dòng)端是最常見(jiàn)的方法。
還有一些漸變，明暗調(diào)對(duì)比，多色搭配等方法在這里不一一說(shuō)明，你感受一下。
留白的藝術(shù)
不單單是文字和圖片需要設(shè)計(jì)，留白也是構(gòu)成頁(yè)面排版必不可少的因素。所有的白都是“有目的的留白”，帶有明確的目的來(lái)控制頁(yè)面的空間構(gòu)成。
常見(jiàn)的手法有幾種，第一通過(guò)留白來(lái)減輕頁(yè)面帶給用戶(hù)的負(fù)擔(dān)。首屏對(duì)一個(gè)應(yīng)用來(lái)說(shuō)十分重要，因此一些比較復(fù)雜的應(yīng)用首評(píng)都堆積了大量的入口。如果無(wú)節(jié)制的添加，頁(yè)面中包含的內(nèi)容太多時(shí)，會(huì)給人一種頁(yè)面狹窄的感覺(jué)，給用戶(hù)帶來(lái)強(qiáng)烈的壓迫感，所以元素太多有時(shí)候反而不是好事。留白能使頁(yè)面的空間感更強(qiáng)，視線(xiàn)更開(kāi)闊，通過(guò)留白來(lái)減輕頁(yè)面的壓迫感，使用戶(hù)進(jìn)入一種輕松的氛圍。
第二通過(guò)留白區(qū)分元素的存在，弱化元素與元素之間的阻隔。表單項(xiàng)與表單項(xiàng)之間，按鈕與按鈕之間，段落與段落之間這種有聯(lián)系但又需要區(qū)分的元素用留白的方式可以輕易造成一種視覺(jué)上的識(shí)別，同時(shí)也能給用戶(hù)一種干凈整潔的感覺(jué)。
第三通過(guò)留白有目的的突出表達(dá)的重點(diǎn)?！霸O(shè)計(jì)包含著對(duì)差異的控制。不斷重復(fù)相同的工作使我懂得，重要的是要限制那些差異，只保留那些最關(guān)鍵的。”這句話(huà)出自原拓哉的“白”一書(shū)中，通過(guò)留白去限制頁(yè)面中的差異使內(nèi)容突出是最簡(jiǎn)單自然的表達(dá)方式。減少頁(yè)面的元素以及雜亂的色彩，讓用戶(hù)可以快速聚焦到產(chǎn)品本身，這種方法在電商類(lèi)的應(yīng)用上被大量的使用。
第四留白賦予頁(yè)面構(gòu)成產(chǎn)生不同的變化。版式設(shè)計(jì)中要有節(jié)奏感，這也是我一直強(qiáng)調(diào)了。傳統(tǒng)雜志在每一頁(yè)翻開(kāi)都會(huì)有不同的視覺(jué)感受，我認(rèn)為在app內(nèi)很多板塊之間的也是可以局部去突出個(gè)性或特點(diǎn)的。留白可以賦予頁(yè)面輕重緩急的變化，也可以營(yíng)造出不同的視覺(jué)氛圍，通過(guò)留白去改變版式再配合四大原則可以產(chǎn)生出不同的效果。
值得注意的是，留白不是一定要用白色去填充界面，而是營(yíng)造出一種空間與距離的感覺(jué)，自然與舒適境界。
視覺(jué)心理的靈活運(yùn)用
在觀(guān)看事物時(shí)，往往會(huì)產(chǎn)生一些不同的視覺(jué)心理，例如兩個(gè)等寬的正方形和圓形放在一起，你一定會(huì)覺(jué)得正方形更寬。在版式設(shè)計(jì)中同樣大量運(yùn)用這些科學(xué)視覺(jué)方法對(duì)用戶(hù)進(jìn)行視覺(jué)上的引導(dǎo)，也能讓設(shè)計(jì)師快速找到一些排版布局的方法。
(via 版式設(shè)計(jì)原理)
首先最常見(jiàn)方法是的是靈活運(yùn)用黃金分割比，文本與線(xiàn)段的間隔，圖片的長(zhǎng)寬比等地方都可以通過(guò)黃金分割比快速的設(shè)定。比如通欄高度的設(shè)定等等。
在界面排布中，往往圓角和圓形比直角更容易讓人接受，更加親切。直角通常用在需要更全面展示的地方，例如用戶(hù)的照片，唱片封面，藝術(shù)作品，商品展示等地方。在個(gè)人類(lèi)的feed或者頭像，板塊的樣式等使用圓角會(huì)有更好的效果。
在全局頁(yè)面的排版中也要避免單調(diào)，增加節(jié)奏感。在上文我也提到過(guò)排版要有輕重緩急之分，這樣讓用戶(hù)在觀(guān)看的過(guò)程中不會(huì)感到冗長(zhǎng)，無(wú)趣。
圖片也是有不同的色調(diào)的，通過(guò)蒙版的方法可以控制這種色調(diào)。如果選擇比較明亮的色調(diào)可以減輕這種對(duì)用戶(hù)的壓迫感，選擇比較暗的色調(diào)可以讓整個(gè)畫(huà)面更沉穩(wěn)，內(nèi)容顯示更為清晰。
沒(méi)有設(shè)計(jì)的設(shè)計(jì)
最后這段不是版式設(shè)計(jì)原理，更像是一種設(shè)計(jì)的心境。古人在寫(xiě)詩(shī)的時(shí)候有一種手法叫白描，原拓哉也曾強(qiáng)調(diào)“最美的設(shè)計(jì)是虛無(wú)”，在界面設(shè)計(jì)中同樣追求一種“讓用戶(hù)感受不到設(shè)計(jì)”的境界。每一條線(xiàn)/每一行文字/每一個(gè)按鈕的存在都是都有它存在的理由。它不加無(wú)意義的修飾、不須陪村和烘托，讓用戶(hù)更關(guān)注內(nèi)容的主體，弱化對(duì)視覺(jué)的認(rèn)知。甚至于用戶(hù)在滑動(dòng)時(shí)看到一個(gè)按鈕或一行文字也感覺(jué)這是理所當(dāng)然的存在?！捌刑岜緹o(wú)樹(shù)，明鏡亦非臺(tái)”，做設(shè)計(jì)和做人一樣，一切有為法皆如夢(mèng)幻泡影，不要注重形式才能明心見(jiàn)性。
圖中的例子在某些地方處理得也不是那么自然，但是我認(rèn)為以上的例子是有向“讓用戶(hù)感知不到設(shè)計(jì)”的方向上走的，沒(méi)有完美的設(shè)計(jì)，只有努力變的更好的設(shè)計(jì)。最后，做好設(shè)計(jì)非一朝一夕，理解設(shè)計(jì)也非一朝一夕，希望各位善于發(fā)現(xiàn)美，也善于理解美。更多請(qǐng)點(diǎn)擊作者頭像，關(guān)注作者的知乎專(zhuān)欄:遇見(jiàn)產(chǎn)品。與你分享更多的產(chǎn)品與設(shè)計(jì)。
本文由來(lái)自?@justinlam(知乎id:justinlam) 原創(chuàng)
鄂公網(wǎng)安備 42050602000108號(hào)