做我們做任何設(shè)計(jì)都離不開大小與重復(fù)的運(yùn)用，這樣能使我們的設(shè)計(jì)更加理性和科學(xué)，經(jīng)得起推敲，那么我們一起來探討下如何在產(chǎn)品設(shè)計(jì)中運(yùn)用這一方法

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

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

如上圖所示，我們保持剛的大小，把a(bǔ)的透明度改變下，視覺重量是不是發(fā)生了變化？WHY？

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

如上圖所示，如果兩個(gè)球大小一樣呢？還是b球會(huì)更吸引我們的眼球，因?yàn)閎球有色光輝第一進(jìn)入我們眼球

我們?cè)诋a(chǎn)品設(shè)計(jì)中如何運(yùn)用這些原理

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

看個(gè)例子：

重復(fù)在產(chǎn)品設(shè)計(jì)中的運(yùn)用

重復(fù)？有沒有人打了個(gè)問號(hào)，看到這個(gè)標(biāo)題，之前我寫了一篇文章叫一致性原則，當(dāng)中有順帶提了下重復(fù)，當(dāng)時(shí)說的不太詳細(xì)，今天再來仔細(xì)重溫下。

重復(fù)的重要性，能使產(chǎn)品的設(shè)計(jì)更加有節(jié)奏和高品質(zhì)，為什么這樣說，我們能重復(fù)的原子單位有很多，顏色，間距，大小，組件，圓角值，功能屬性等等，交互層面能重復(fù)交互操作多頁面間相同屬性交互要一致

實(shí)例展示

重復(fù)間距

上圖設(shè)計(jì)我一共就用了 3 個(gè)間距。

特殊例子驗(yàn)證：

字里行間在首頁的板塊設(shè)計(jì)比較松散，雖然也重復(fù)運(yùn)用了間距，但是沒有節(jié)奏。圖片比例也比較奇怪，多行段落文字顯得比較松散。

結(jié)果：

重復(fù)組件樣式（截圖來至網(wǎng)易蝸牛讀書）

上面截圖標(biāo)注出來的地方，控件倒角一致，形成一個(gè)隱形的視覺基因

下面是反面例子（截圖來至UC頭條）

UC頭條的底部圖標(biāo)設(shè)計(jì)非常圓潤(rùn)，圖標(biāo)設(shè)計(jì)師延續(xù)了品牌 LOGO 鹿的圓潤(rùn)線條。這里里面的設(shè)計(jì)語言就和底部圖標(biāo)有沖突，大部分按鈕設(shè)計(jì)無圓角，尖銳的輪廓（1、3），極少數(shù)按鈕帶有圓角即圖上標(biāo)出來的 2

4和5欄目圖文樣式的圓角值也是不一致的，整體設(shè)計(jì)不知道想要傳達(dá)什么樣的設(shè)計(jì)語言。

在仔細(xì)去觀察下 某蝸牛讀書的 的產(chǎn)品設(shè)計(jì)，設(shè)計(jì)語言從圖片圓角到按鈕，標(biāo)簽，圖標(biāo)設(shè)計(jì)都是帶有圓角幅度和他們產(chǎn)品logo氣息性格相符合。

重復(fù)顏色

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

相同屬性顏色一致，比如上面來至 IOS 系統(tǒng)軟件界面截圖，可點(diǎn)擊地方顏色一致，IOS在這方面的設(shè)計(jì)確實(shí)是非常棒的，控制的比較好。

總結(jié)

在做界面設(shè)計(jì)時(shí)候需要注意的點(diǎn)：

• 學(xué)會(huì)運(yùn)用大小來區(qū)分層級(jí)，在大小一致的情況下通過其他方式來區(qū)分信息層級(jí)，如顏色，降低透明度，加粗等等；
• 重復(fù)在產(chǎn)品設(shè)計(jì)中的運(yùn)用可以延伸到顏色，間距，大小，組件，圓角值，功能屬性等等。

相關(guān)閱讀

下面都是與這些理論相關(guān)的設(shè)計(jì)文章，掌握了就是一套體系知識(shí)：

（1）如何用網(wǎng)格系統(tǒng)設(shè)計(jì)出大師般的APP界面

（2）提升產(chǎn)品UX體驗(yàn)的一些排版設(shè)計(jì)原則

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

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

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