在界面設(shè)計中，運用好大小和重復(fù)這兩個關(guān)鍵點對區(qū)分層級和打造品牌基因有著至關(guān)重要的作用。

我們做界面排版設(shè)計都離不開大小與重復(fù)的運用，每一個屬性里面都包含很多細(xì)小的分支，如果想要熟練使用起來是需要多做練習(xí)來掌握的。

那如何更加理性與科學(xué)運用它們，今天和大家一起來探討下如何在產(chǎn)品界面設(shè)計中巧妙的運用這個方法。

一、為什么大的物體更吸引眼球

如上圖所示：a球會比右邊b球更吸引我們?nèi)ラ喿x，大的物體視覺重量會比較大，我們眼球的視覺方向就自動轉(zhuǎn)向他。

如上圖所示：我們沿用剛才的圖片，然后只把a(bǔ)的透明度改變下，視覺重量是不是發(fā)生了變化？WHY？

當(dāng)我們把a 球的視覺重量降低后，那么即使 b球很小，他也會很吸引我們眼球，這是因為 b球視覺重量比較大。

如上圖所示：如果兩個球大小一樣呢？還是b球會更吸引我們眼睛去關(guān)注，因為b球有色光會第一時間進(jìn)入我們眼球。

二、如何運用這些原理

如上圖數(shù)字所示：他們的視覺重量依次排下來，最大的是序列 1 最小的是4，不重要的元素我們可以通過把它們縮小或者降低透明度來弱化他們。

下圖實際案例展示：

根據(jù)我們產(chǎn)品策略，內(nèi)容重要程度，來決定哪個元素視覺重量需要大一些。

三、重復(fù)在界面設(shè)計中的運用

重復(fù)的合理運用能夠讓界面布局更加有節(jié)奏，為什么這樣說？

因為在設(shè)計語言中，我們能重復(fù)的基礎(chǔ)元素有很多；品牌符號、顏色、間距、大小、分子組件、圓角值，光與角度等等，角度在圖標(biāo)繪制中運用比較多。

下面我會通過幾個案例講解如何重復(fù)運用這些元素。

1. 重復(fù)間距

上圖設(shè)計我一共就用了 3 個間距。一致的間距節(jié)奏能夠讓畫面更穩(wěn)，同事之間協(xié)同方便，便于開發(fā)還原。

線上案例優(yōu)化演示：

字里行間在首頁的板塊設(shè)計比較松散，雖然也重復(fù)運用了間距，但是間距缺乏有規(guī)律的節(jié)奏。

調(diào)整后圖如下：

2. 重復(fù)組件樣式

應(yīng)用：Pinterest

Pinterest設(shè)計中，控件有一致的圓形符號，形成一個顯性的視覺基因，大家注意觀察他們的各種按鈕控件（備注：可能有些人問，為啥圓角大小不一致呢？這個就涉及到參數(shù)化圓角值定義！如果還是不懂，后續(xù)的文章都會逐步講解）

應(yīng)用：Facebook

同樣我們可以在Facebook里面看到一致的視覺基因，圓角的大范圍重復(fù)運用。這里我就不圈出來了。我們可以思考，重復(fù)能讓設(shè)計更整體，重復(fù)能讓界面更具品牌感！

3. 重復(fù)顏色

它是什么？相同功能操作，所表達(dá)的視覺含義要一致。

應(yīng)用：appstore和備忘錄

相同屬性顏色一致，比如上面 IOS 系統(tǒng)軟件界面截圖，功能性圖標(biāo)顏色一致（可操作性），可點擊按鈕文字顏色一致。

當(dāng)然有些設(shè)計也有例外，這個需要根據(jù)場景去分析。IOS在這方面的設(shè)計確實是非常人性化，值得去研究學(xué)習(xí)。

4. 重復(fù)符號

符號重復(fù)一般是在圖標(biāo)繪制運用比較多，大家看下案例。

GM / OPEL的自適應(yīng)（響應(yīng)）圖標(biāo)系統(tǒng)。上圖我們可以看到圖標(biāo)繪制在某些細(xì)節(jié)保持一致的基因。

Bose的圖標(biāo)系統(tǒng)

5. 重復(fù)角度與線的粗細(xì)

角度和粗細(xì)的合理運用，對圖標(biāo)一致性與穩(wěn)定性非常大的幫助。

OnePlus圖標(biāo)系統(tǒng)

總結(jié)

在做界面設(shè)計時候需要注意的關(guān)鍵點：

1. 學(xué)會運用大小來區(qū)分層級，在大小一致的情況下，可通過其他方式來區(qū)分信息層級；如顏色、留白、或者明暗關(guān)系，粗細(xì)等等。
2. 在界面或者圖標(biāo)設(shè)計中重復(fù)運用某些元素；品牌符號、顏色、間距、大小、組件、圓角值、角度，光影功能屬性等等來做產(chǎn)品的品牌基因打造。

#專欄作家#

Tony，微信公眾號：洞見設(shè)計，人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計師。很樂意幫助年輕設(shè)計師成長，簡歷指導(dǎo)，每周分享最有價值的設(shè)計經(jīng)驗，擅長產(chǎn)品體驗設(shè)計，關(guān)注【洞見設(shè)計】后臺回復(fù)“彩蛋”領(lǐng)取設(shè)計資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議