如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

重復可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強對畫面的記憶。

一、設計中的重復是什么？

在平面設計中，重復構成是常用的一種構成方法，通過重復可以使畫面達到和諧、統(tǒng)一的視覺效果，并能加強給人的印象，也可以達到一種有規(guī)律的節(jié)奏感和形式美感。

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

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

1. 重復

重復是設計中最基本的形式。在同一設計中，相同的形象出現(xiàn)過兩次或兩次以上就形成了重復。

在產(chǎn)品設計中重復的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復的元素有位移（方向）、旋轉、縮放、不透明度、相同屬性交互要一致。

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

重復配色

在 app store 的頁面中使用了相同的顏色進行提醒，方便用戶快速查找和點擊，整體的藍色又給人理性的感覺，看到付費app 的好評數(shù)可以看出是因為產(chǎn)品好才推薦你進行理性消費。

重復大小

INS 主頁第一排頭像相同大小進行重復排列，與內容的人物頭像有大小對比之分；INS 搜索頁采用了九宮格布局，為了重復中有變化它把右邊的四個方格合并成一個內容展示區(qū)域，推薦好的熱門視頻。

重復間距

Airbnb 界面中的間距非常規(guī)范，首頁大體采用了谷歌里面的8px 原則，每個間距之間的規(guī)范很多1:2的比例關系。好的比例規(guī)范會給界面帶來簡潔大氣的感覺。

重復組件

（如圖標注）INS 界面中用了統(tǒng)一組件，相同的圓角和高度規(guī)范又給畫面增加了統(tǒng)一性和連貫性。

2. 突變

在相同的形象重復出現(xiàn)時，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時我們稱之為突變。

格式塔原理中的相似性也是重復中突變的一種形式。

在產(chǎn)品設計中我們運用的突變的目的很簡單就是為了讓其更加突出，多用于區(qū)分當前狀態(tài)、選中狀態(tài)和默認狀態(tài)。

banner輪播

banner輪播圖上面的提示狀態(tài)會根據(jù)當前狀態(tài)和默認狀態(tài)進行區(qū)分，把當前狀態(tài)進行變化從而進行凸顯出來。

導航欄分類

導航欄分類上面的提示狀態(tài)也是根據(jù)當前狀態(tài)和默認狀態(tài)進行區(qū)分，把當前狀態(tài)進行變化從而進行凸顯出來。

按鈕

在登錄注冊頁面中，我們會通過大的色塊凸顯登錄按鈕，引導用戶快速登錄進入到 app 里面。也減少了用戶的思考過程，符合大腦的惰性。

但是在很多 windows系統(tǒng)中，卸載軟件時會跟你玩文字游戲，會用非、否、不是等誘導你作出錯誤的判斷。

feed流

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

站酷首頁 feed流里面會把內容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點是推作品，當文章出現(xiàn)時通過改變文章的排版進行區(qū)分，重復里面又帶有變化。

3. 節(jié)奏感

多少元素排列可以形成節(jié)奏感，一般來說是3個或3個以上，兩個你不能說是節(jié)奏感只能說它是重復。當3個或3個以上整齊的排列就會形成一種節(jié)奏感。

左右滑動

（如圖來自uistar）界面中三個書籍整齊的排列在一起，可以通過左右滑動來獲取更多的書籍。在使用左右滑動效果時，應考慮元素的數(shù)量，盡量不要超過10個以上。

列表頁

（如圖來自uistar）列表頁面整齊的排列在一起有一定的節(jié)奏感，通過改變 icon 的配色來豐富畫面。

4. 韻律

元素在排列的過程中有形狀、顏色、大小、不透明度等有規(guī)律的變化就形成了一種韻律感。在動效上主要還是通過位移、放大縮小、旋轉、不透明等變化來制作界面動畫。

最美有物

最美有物app 的畫報界面中，通過改變每個界面的大小比例有序的排列在一起，通過上下滑動可以快速瀏覽標題，進行查找翻閱，整個過程很流暢，整個界面有流動性和韻律感。

圖表

圖表在設計的時候通過不同顏色來區(qū)分不同的時間段，線條錯落有致的排列增加了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個作品都是通過色彩按照紅橙黃綠青藍紫規(guī)律運用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。

重復在動效中如何運用才會有韻律感？

界面動效中主要分成當前狀態(tài)動效變化和轉場動效變化，界面中的元素a1對b1、a2對b2、a3對b3信息對等，能幫助界面做出很有韻律感的動效。

二、總結

重復可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強對畫面的記憶。

重復、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當中的，幾種不同的美感可以同時存在的，只不過它適應不同人群的審美能力，審美能力高一點的更喜歡一些變化，審美能力相對基礎更喜歡簡單的重復。

所以畫面中不斷出現(xiàn)同樣的元素這叫重復，而在很多重復里面突然出現(xiàn)一個變化這叫突變，相同元素整齊的排列在一起這叫節(jié)奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。

藍藍設計( bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。