編輯導(dǎo)讀：好的設(shè)計(jì)原則是可以很容易被大眾學(xué)習(xí)和實(shí)踐的，本文作者從自身工作經(jīng)驗(yàn)出發(fā)，為我們分享了一些立馬就能用到的設(shè)計(jì)小技巧并分別進(jìn)行了介紹分析，希望能夠給你帶來(lái)一定的啟發(fā)。

上大學(xué)的時(shí)候，幾乎所有的設(shè)計(jì)專(zhuān)業(yè)都要先學(xué)習(xí)平面構(gòu)成，里面的設(shè)計(jì)原則是所有設(shè)計(jì)的基礎(chǔ)。體驗(yàn)設(shè)計(jì)亦是如此，今天我將分享一些我曾學(xué)過(guò)，并且仍在使用的幾個(gè)細(xì)微知識(shí)點(diǎn)。不同于那些常掛在嘴邊的大道理，而是一些實(shí)用的小技巧。希望你在讀完后會(huì)和我一樣，學(xué)以致用～

01 重力

重力適用于任何現(xiàn)實(shí)存在的對(duì)象，在體驗(yàn)設(shè)計(jì)中也是如此。

雖然在視覺(jué)中重力并不像現(xiàn)實(shí)生活中那樣是一種真正的力量將二維物體向下拉。但是我們已經(jīng)被深深的影響，所以在看視覺(jué)作品時(shí)我們也有相同的感受。以下面的圖片為例，你是不是總擔(dān)心上面的球會(huì)突然掉下來(lái)而感覺(jué)不舒服？

再看下這張相反的呢？

這種構(gòu)圖看著就會(huì)舒服很多，更像是一個(gè)物體停留在頁(yè)面底部，沉穩(wěn)且平靜。

看下重力在產(chǎn)品界面中的運(yùn)用。懸浮按鈕一般都是固定在界面下方（中間或者右側(cè)），如果將它放在上面會(huì)是怎樣的效果？是不是突然感覺(jué)到頭重腳輕？這就是重力感知對(duì)我們的影響。

02 閱讀習(xí)慣

現(xiàn)在我們閱讀的習(xí)慣是從左到右，從上到下。所以往往左側(cè)的對(duì)象會(huì)被視為進(jìn)入，而右側(cè)的對(duì)象被視為離開(kāi)。

如圖，還是這個(gè)球。因?yàn)槲覀儚淖蟮接议喿x，所以感覺(jué)這個(gè)球在緩緩進(jìn)入到畫(huà)面。相反下面的球感覺(jué)像是在退出畫(huà)面。

同理，因?yàn)槲覀兪菑淖蟮接摇纳系较麻喿x，所以我們自然也是會(huì)先看到左上角的物體，然后才會(huì)移到右下角：

相應(yīng)的在體驗(yàn)設(shè)計(jì)中我們肯定也要遵循這種原則，譬如支付寶和美團(tuán)的首頁(yè)頭部，往往將最重要且高頻的四個(gè)功能放在上面；再比如產(chǎn)品金剛區(qū)icon的排布，也是將最重要的入口放在左上角。作為用戶(hù)，你也應(yīng)該是先看第一個(gè)icon。

03 視覺(jué)張力

“張力”是一種抽象的東西。從物理學(xué)的角度講“張力”包含著能量，具有運(yùn)動(dòng)的特征，從生命科學(xué)的角度來(lái)講“張力”則是生命的象征。

而視覺(jué)設(shè)計(jì)的“張力”則是一種抽象的力量，它雖然不能像物理中的“張力”那樣顯示于儀器，但卻可以被人們所感知，并且傳達(dá)某種信息或者情感。

圖1這個(gè)球，周?chē)邢嗟鹊目臻g（力），圓靜靜地位于中心，就不存在張力；如果將它移離了中心（圖2），由于四面的空間（力）不再相等，該空間現(xiàn)在處于活動(dòng)狀態(tài)，從而建立了緊張氛圍，球似乎被推向右邊；在圖3中，將球移到了更靠近右側(cè)的位置，隨著球和邊緣之間的距離減小，張力會(huì)增加，直到球接觸邊緣的時(shí)刻為止。

在體驗(yàn)設(shè)計(jì)中也是如此。如下圖，全部居中的內(nèi)容會(huì)讓界面顯得缺乏力量，雖然這樣放也不會(huì)有錯(cuò)，但就是感覺(jué)缺點(diǎn)什么。如果把這種居中狀態(tài)打破，界面就變得具有“張力”，也多了一絲小細(xì)節(jié)。

04 空白空間

空白空間（也稱(chēng)為“負(fù)空間”）是版式中保留為空白的區(qū)域。空白空間是頁(yè)面上所有對(duì)象的呼吸空間。它不僅可以定義對(duì)象的界限，還可以按照格式塔原理在內(nèi)容之間建立必要的聯(lián)系，給設(shè)計(jì)帶來(lái)呼吸感，還可以幫助突出特定內(nèi)容或特定部分。

在UI設(shè)計(jì)中，對(duì)空白空間的把控直接影響到設(shè)計(jì)的質(zhì)量，如下圖，如果控制不好空白空間的度，整體就顯得比較臃腫、透氣感差，對(duì)使用者在視覺(jué)上也會(huì)造成困擾。

05 視覺(jué)平衡

老話說(shuō)“眼見(jiàn)為實(shí)”，但是眼睛看到的一定都是真實(shí)的么?其實(shí)不然，事實(shí)上我們經(jīng)常被自己的眼睛“欺騙”。所以，作為設(shè)計(jì)師一定要先練就一副像素眼，才能用作品“欺騙”用戶(hù)的眼睛。

比如常見(jiàn)的播放按鈕，如果直接將三角形和背景的圓居中對(duì)齊，在理論上是正確的，但在視覺(jué)上看著就很奇怪；如果我們給他加一個(gè)外切圓輔助，然后再與背景的圓對(duì)齊，這樣在視覺(jué)上就可以達(dá)成平衡。

當(dāng)我們?cè)谧隹ㄆ皆O(shè)計(jì)的時(shí)候，通常會(huì)遇到如下情況：卡片外文字一般要與卡片邊緣對(duì)齊，但是與卡片內(nèi)文字就會(huì)產(chǎn)生錯(cuò)位。如果我們將卡片效果做重，這樣卡片就會(huì)和內(nèi)部?jī)?nèi)容形成一個(gè)整體，從而與外部文字對(duì)齊會(huì)更加自然。

06 結(jié)語(yǔ)

以上講的這些視覺(jué)原理適用于任何領(lǐng)域的設(shè)計(jì)中，它們簡(jiǎn)單明了地體現(xiàn)了我們的大腦和眼睛是如何感知視覺(jué)信息的。而作為設(shè)計(jì)師，我們也要依據(jù)這些原理來(lái)指導(dǎo)我們的設(shè)計(jì)，這樣才能做出用戶(hù)體驗(yàn)優(yōu)秀的產(chǎn)品。

作者：崔琦偉，視覺(jué)設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶(hù)體驗(yàn)設(shè)計(jì)中心（微信公眾號(hào)@58UXD），作者@崔琦偉

題圖來(lái)自 Unsplash，基于CC0協(xié)議。