基礎(chǔ)科普！重復(fù)與突變?cè)诋a(chǎn)品設(shè)計(jì)中的應(yīng)用

重復(fù)可以使畫面秩序化、劃一化，形成協(xié)調(diào)、富有節(jié)奏感的視覺結(jié)果，更加有利于人們?cè)鰪?qiáng)對(duì)畫面的記憶。

一、設(shè)計(jì)中的重復(fù)是什么？

在平面設(shè)計(jì)中，重復(fù)構(gòu)成是常用的一種構(gòu)成方法，通過重復(fù)可以使畫面達(dá)到協(xié)調(diào)、同一的視覺結(jié)果，并能增強(qiáng)給人的印象，也可以達(dá)到一種有規(guī)律的節(jié)奏感和情勢(shì)美感。

排版的四大原則：對(duì)比、對(duì)齊、親密性、重復(fù)，重復(fù)在排版中也占有了一席之地，可見它在設(shè)計(jì)中分量是不可小覷的。

格式塔原理：接近性、相似性、延續(xù)性、封閉性、對(duì)稱性、主體/背景、共同運(yùn)動(dòng)，格式塔原理中的對(duì)稱性就是重復(fù)的一種體現(xiàn)體例；格式塔原理中的相似性算是重復(fù)中自帶的一種突變。

1. 重復(fù)

重復(fù)是設(shè)計(jì)中最基本的情勢(shì)。在統(tǒng)一設(shè)計(jì)中，雷同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。

在產(chǎn)品設(shè)計(jì)中重復(fù)的元素有大小、外形、配色、間距、組件、圓角值；在交互層面重復(fù)的元素有位移（方向）、旋轉(zhuǎn)、縮放、不透明度、雷同屬性交互要同等。

在產(chǎn)品設(shè)計(jì)的前期設(shè)計(jì)師必要輸出界面設(shè)計(jì)，為了方便下流前端工程師更好的規(guī)范和適配，也要保證產(chǎn)品后期上線產(chǎn)品視覺稿的高度還原，這就要求設(shè)計(jì)師輸出一整套產(chǎn)品的視覺和交互規(guī)范。

重復(fù)配色

在 app store 的網(wǎng)頁中使用了雷同的顏色進(jìn)行提示，方便用戶快速查找和點(diǎn)擊，團(tuán)體的藍(lán)色又給人理性的感覺，看到付費(fèi)app 的好評(píng)數(shù)可以看出是由于產(chǎn)品好才保舉你進(jìn)行理性消耗。

重復(fù)大小

INS 主頁第一排頭像雷同大小進(jìn)行重復(fù)排列，與內(nèi)容的人物頭像有大小對(duì)比之分；INS 搜索頁采用了九宮格布局，為了重復(fù)中有轉(zhuǎn)變它把右邊的四個(gè)方格合并成一個(gè)內(nèi)容展示區(qū)域，保舉好的熱門視頻。

重復(fù)間距

Airbnb 界面中的間距特別很是規(guī)范，首頁大體采用了谷歌里面的8px 原則，每個(gè)間距之間的規(guī)范許多1:2的比例關(guān)系。好的比例規(guī)范會(huì)給界面帶來簡(jiǎn)潔大氣的感覺。

重復(fù)組件

（如圖標(biāo)注）INS 界面中用了同一組件，雷同的圓角和高度規(guī)范又給畫面增長(zhǎng)了同一性和連貫性。

2. 突變

在雷同的形象重復(fù)出現(xiàn)時(shí)，嘗試去改變某一形象的外形、顏色、大小、不透明度等來雄厚畫面時(shí)我們稱之為突變。

格式塔原理中的相似性也是重復(fù)中突變的一種情勢(shì)。

在產(chǎn)品設(shè)計(jì)中我們運(yùn)用的突變的目的很簡(jiǎn)單就是為了讓其更加凸起，多用于區(qū)分當(dāng)前狀況、選中狀況和默認(rèn)狀況。

banner輪播

banner輪播圖上面的提醒狀況會(huì)根據(jù)當(dāng)前狀況和默認(rèn)狀況進(jìn)行區(qū)分，把當(dāng)前狀況進(jìn)行轉(zhuǎn)變從而進(jìn)行凸顯出來。

導(dǎo)航欄分類

導(dǎo)航欄分類上面的提醒狀況也是根據(jù)當(dāng)前狀況和默認(rèn)狀況進(jìn)行區(qū)分，把當(dāng)前狀況進(jìn)行轉(zhuǎn)變從而進(jìn)行凸顯出來。

按鈕

在登錄注冊(cè)網(wǎng)頁中，我們會(huì)通過大的色塊凸顯登錄按鈕，指導(dǎo)用戶快速登錄進(jìn)入到 app 里面。也削減了用戶的思考過程，吻合大腦的惰性。

但是在許多 windows體系中，卸載軟件時(shí)會(huì)跟你玩筆墨游戲，會(huì)用非、否、不是等誘導(dǎo)你作出錯(cuò)誤的判斷。

feed流

feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品顯現(xiàn)情勢(shì)有列表、瀑布流、卡片情勢(shì)。

站酷首頁 feed流里面會(huì)把內(nèi)容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點(diǎn)是推作品，當(dāng)文章出現(xiàn)時(shí)通過改變文章的排版進(jìn)行區(qū)分，重復(fù)里面又帶有轉(zhuǎn)變。

3. 節(jié)奏感

多少元素排列可以形成節(jié)奏感，一樣平常來說是3個(gè)或3個(gè)以上，兩個(gè)你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個(gè)或3個(gè)以上劃一的排列就會(huì)形成一種節(jié)奏感。

左右滑動(dòng)

（如圖來自u(píng)istar）界面中三個(gè)書籍劃一的排列在一路，可以通過左右滑動(dòng)來獲取更多的書籍。在使用左右滑動(dòng)結(jié)果時(shí)，應(yīng)考慮元素的數(shù)量，盡量不要超過10個(gè)以上。

列表頁

（如圖來自u(píng)istar）列表網(wǎng)頁劃一的排列在一路有肯定的節(jié)奏感，通過改變 icon 的配色來雄厚畫面。

4. 韻律

元素在排列的過程中有外形、顏色、大小、不透明度等有規(guī)律的轉(zhuǎn)變就形成了一種韻律感。在動(dòng)效上重要照舊通過位移、放大縮小、旋轉(zhuǎn)、不透明等轉(zhuǎn)變來制作界面動(dòng)畫。

最美有物

最美有物app 的畫報(bào)界面中，通過改變每個(gè)界面的大小比例有序的排列在一路，通過上下滑動(dòng)可以快速欣賞題目，進(jìn)行查找翻閱，整個(gè)過程很流暢，整個(gè)界面有流動(dòng)性和韻律感。

圖表

圖表在設(shè)計(jì)的時(shí)候通過不同顏色來區(qū)分不同的時(shí)間段，線條錯(cuò)落有致的排列增長(zhǎng)了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個(gè)作品都是通過色彩按照紅橙黃綠青藍(lán)紫規(guī)律運(yùn)用到界面中的背景和列表中，增長(zhǎng)了畫面的雄厚感和韻律感。

重復(fù)在動(dòng)效中如何運(yùn)用才會(huì)有韻律感？

界面動(dòng)效中重要分成當(dāng)前狀況動(dòng)效轉(zhuǎn)變和轉(zhuǎn)場(chǎng)動(dòng)效轉(zhuǎn)變，界面中的元素a1對(duì)b1、a2對(duì)b2、a3對(duì)b3信息對(duì)等，能幫助界面做出很有韻律感的動(dòng)效。

二、總結(jié)

重復(fù)可以使畫面秩序化、劃一化，形成協(xié)調(diào)、富有節(jié)奏感的視覺結(jié)果，更加有利于人們?cè)鰪?qiáng)對(duì)畫面的記憶。

重復(fù)、突變、節(jié)奏感、韻律幾種不同的體例都是存在于產(chǎn)品當(dāng)中的，幾種不同的美感可以同時(shí)存在的，只不過它適應(yīng)不同人群的審美能力，審美能力高一點(diǎn)的更喜好一些轉(zhuǎn)變，審美能力相對(duì)基礎(chǔ)更喜好簡(jiǎn)單的重復(fù)。

所以畫面中賡續(xù)出現(xiàn)同樣的元素這叫重復(fù)，而在許多重復(fù)里面忽然出現(xiàn)一個(gè)轉(zhuǎn)變這叫突變，雷同元素劃一的排列在一路這叫節(jié)奏感，而這些元素在排列的過程中有外形、顏色、大小、不透明度等轉(zhuǎn)變就形成了一種韻律感。

參考文獻(xiàn)：

• 《平面設(shè)計(jì)》 呼博、張瑋、李甜
• 《寫給大家看的設(shè)計(jì)書》 Robin Williams

迎接關(guān)注作者的微信公眾號(hào)：水手哥學(xué)設(shè)計(jì)