UI大牛教你有時(shí)規(guī)則可以打破

設(shè)計(jì)是一門講究規(guī)則的科學(xué)。優(yōu)秀的設(shè)計(jì)通常依托于許多設(shè)計(jì)規(guī)則而存在，這些規(guī)則有的是設(shè)計(jì)師們多年來的經(jīng)驗(yàn)積累總結(jié)而來，有的源自于科學(xué)研究和大量的調(diào)研數(shù)據(jù)，還有一些規(guī)則則和潮流趨勢(shì)有所關(guān)聯(lián)。也正是因?yàn)檫@些規(guī)則來源各不相同，有一些規(guī)則其實(shí)是可以打破的。

隨著時(shí)間的推移，許多規(guī)則其實(shí)都隨著整個(gè)設(shè)計(jì)領(lǐng)域的潮流和趨勢(shì)而變化，規(guī)則不應(yīng)該是死物。設(shè)計(jì)的發(fā)展促使規(guī)則不斷變化，所以，今天的文章要談的就是現(xiàn)在你應(yīng)該打破的三個(gè)設(shè)計(jì)規(guī)則。

1、打破“網(wǎng)頁設(shè)計(jì)中只能使用非襯線字體”的規(guī)則

太多人跟你說過在網(wǎng)頁中只能使用非襯線體字體，而襯線體多被視作為紙媒和上一個(gè)時(shí)代的字體。這個(gè)規(guī)則該被打破了！

可讀性是否優(yōu)異是如今評(píng)判字體的一個(gè)新規(guī)范。無論是襯線體還是非襯線體，甚至手寫字體，都應(yīng)該被重新審視。選擇正確的字體，搭配合理的配色方案和合適的排版。

著名的 Nielsen Norman 集團(tuán)也有做過類似的調(diào)研，足以支撐我們之前的說法。Jakob Nielsen 在研究用戶體驗(yàn)的時(shí)候發(fā)現(xiàn)，如今越來越好的顯示屏，正在逐步改變網(wǎng)頁排版設(shè)計(jì)的規(guī)則。他的研究結(jié)論如下：

舊的排版規(guī)則其實(shí)很簡(jiǎn)單：堅(jiān)持使用非襯線體，因?yàn)橛?jì)算機(jī)屏幕太差，無法渲染出襯線體的細(xì)節(jié)，同樣尺寸下的正文字體如果選用襯線體會(huì)導(dǎo)致細(xì)節(jié)模糊走樣。

然而，現(xiàn)如今的屏幕像素密度都已經(jīng)很高了，這種局面下，非襯線體是否比襯線體擁有更高的可讀性，就兩說了。

從現(xiàn)在的實(shí)際體驗(yàn)上來看，同樣大小的襯線體字體和非襯線體字體之間的可讀性差異非常小。換句話來說，通常情況下，并沒有足夠的論據(jù)來說明一者一定優(yōu)于另外一者。不過，你可以根據(jù)網(wǎng)站的風(fēng)格和品牌的氣質(zhì)來選擇特定的字體，來營(yíng)造情緒和氛圍。

所以請(qǐng)打破“只使用非襯線體字體”這一規(guī)則吧。在考慮選擇哪種字體，并且判斷字體的可讀性的時(shí)候，需要注意下面的幾個(gè)問題：

• 字重選擇中等或者常規(guī)，超細(xì)和細(xì)體可能會(huì)比較難以辨認(rèn)。
• 堅(jiān)持使用X高度相同的字體搭配。字形瘦高的字體可能會(huì)有可讀性的問題。
• 文字間隔要合理且一致。不要過度使用連體字和花體字。
• 只有在意圖明確的情況下，才能在小塊的文本中使用華麗的字體。
• 在大塊的內(nèi)容中使用清晰易讀的襯線體字體或者非襯線體字體。

2、打破“遠(yuǎn)離大膽醒目的背景”的規(guī)則

在很長(zhǎng)一段時(shí)間內(nèi)，網(wǎng)頁背景似乎只能是白色或者淺灰。但是現(xiàn)在早就不這樣了！

大膽明亮的色彩同樣是可以用作網(wǎng)頁背景的，色彩能夠更好地營(yíng)造氛圍，給用戶以更為明確更好的第一印象，為設(shè)計(jì)定下基調(diào)，它打破了以往沉悶的設(shè)計(jì)模式。

更多的網(wǎng)站和品牌正在使用大膽的色彩來創(chuàng)造引人矚目的體驗(yàn)，很多時(shí)候，用戶也確實(shí)更加喜歡這樣的設(shè)計(jì)。

在這一規(guī)則中，另外一部分是“控制配色方案中色彩的數(shù)量”。對(duì)于一些獨(dú)特的品牌而言，控制配色數(shù)量是有必要的，不過在一些個(gè)人設(shè)計(jì)項(xiàng)目當(dāng)中，還是可以適當(dāng)?shù)淖鲆恍┨剿鞯摹?/span>

Material Design 中的配色系統(tǒng)涵蓋了許多明亮的色彩，不論是高雅還是俗氣的配色，都被統(tǒng)一到這套配色方案中了。越來越多的網(wǎng)站和品牌正在試圖統(tǒng)合更多的色彩到一套配色當(dāng)中，盡力創(chuàng)造更優(yōu)秀的用戶體驗(yàn)。而用戶好像也挺喜歡的。

不過，更多的時(shí)候，簡(jiǎn)單而一致的配色方案會(huì)更加有用。你并不一定非地為網(wǎng)頁加上色彩明亮的背景，但是你可以將這些明亮?xí)r尚的色彩以其他的方式加入到設(shè)計(jì)當(dāng)中：

• 考慮將色彩疊加到圖片上
• 讓標(biāo)題使用明亮的色彩來顯示
• 將中性色的背景更換成更加令人難忘的東西
• 為CTA按鈕和元素添加明亮的色彩
• 懸停到特定元素上時(shí)，讓其變?yōu)槊髁恋纳?，引人點(diǎn)擊

3、打破“維持對(duì)稱和平衡”的規(guī)則

在我設(shè)計(jì)生涯的早期階段，有許多經(jīng)驗(yàn)豐富的設(shè)計(jì)師都力圖推動(dòng)完美對(duì)稱的設(shè)計(jì)，力圖創(chuàng)造完美、和諧而平衡的設(shè)計(jì)，在現(xiàn)在看來，這一的規(guī)則死板而無趣。

不對(duì)稱的設(shè)計(jì)，能夠讓視覺更加引人入勝，也更容易吸引用戶的注意力。采用不對(duì)稱的設(shè)計(jì)相對(duì)而言更加省心，不需要為了對(duì)稱而精確拆分內(nèi)容，不需要為了平衡的布局而斤斤計(jì)較。

為了充分在設(shè)計(jì)當(dāng)中采用不對(duì)稱的設(shè)計(jì)，可以考慮使用下面的辦法來創(chuàng)造協(xié)調(diào)而流暢的視覺流：

• 讓元素和留白一一對(duì)應(yīng)，這樣的不對(duì)稱設(shè)計(jì)能夠讓主要的視覺內(nèi)容被留白襯托得更加突出。
• 有意識(shí)在人眼視覺運(yùn)動(dòng)軌跡上做文章。人在閱讀的時(shí)候通常都是從左往右，從上往下，所以較重的元素可以置于左邊。
• 使用色彩來創(chuàng)建視覺焦點(diǎn)。
• 將柵格上所有的內(nèi)容有條理得組織到一起。
• 注意平衡感，不對(duì)稱的設(shè)計(jì)雖然不對(duì)稱，但是應(yīng)該平衡，用戶應(yīng)該能夠輕松地瀏覽內(nèi)容，并且不會(huì)因此感到不適。

結(jié)語

打破設(shè)計(jì)規(guī)則是一件令人興奮的事情。不過哪些規(guī)則可以打破，哪些不能打破，這個(gè)是要深思熟慮的，否則會(huì)帶來災(zāi)難性的結(jié)果。

相關(guān)文章--《一般人不會(huì)，只有高級(jí)設(shè)計(jì)師才會(huì)的能力》