您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

基礎科普!重復與突變在產品設計中的應用

重復可以使畫面秩序化、劃一化,形成協調、富有節奏感的視覺結果,更加有利于人們增強對畫面的記憶。

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

在平面設計中,重復構成是常用的一種構成方法,通過重復可以使畫面達到協調、同一的視覺結果,并能增強給人的印象,也可以達到一種有規律的節奏感和情勢美感。

排版的四大原則:對比、對齊、親密性、重復,重復在排版中也占有了一席之地,可見它在設計中分量是不可小覷的。

格式塔原理:接近性、相似性、延續性、封閉性、對稱性、主體/背景、共同運動,格式塔原理中的對稱性就是重復的一種體現體例;格式塔原理中的相似性算是重復中自帶的一種突變。

1. 重復

重復是設計中最基本的情勢。在統一設計中,雷同的形象出現過兩次或兩次以上就形成了重復。

在產品設計中重復的元素有大小、外形、配色、間距、組件、圓角值;在交互層面重復的元素有位移(方向)、旋轉、縮放、不透明度、雷同屬性交互要同等。

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

重復配色

在 app store 的網頁中使用了雷同的顏色進行提示,方便用戶快速查找和點擊,團體的藍色又給人理性的感覺,看到付費app 的好評數可以看出是由于產品好才保舉你進行理性消耗。

重復大小

INS 主頁第一排頭像雷同大小進行重復排列,與內容的人物頭像有大小對比之分;INS 搜索頁采用了九宮格布局,為了重復中有轉變它把右邊的四個方格合并成一個內容展示區域,保舉好的熱門視頻。

重復間距

Airbnb 界面中的間距特別很是規范,首頁大體采用了谷歌里面的8px 原則,每個間距之間的規范許多1:2的比例關系。好的比例規范會給界面帶來簡潔大氣的感覺。

重復組件

(如圖標注)INS 界面中用了同一組件,雷同的圓角和高度規范又給畫面增長了同一性和連貫性。

2. 突變

在雷同的形象重復出現時,嘗試去改變某一形象的外形、顏色、大小、不透明度等來雄厚畫面時我們稱之為突變。

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

在產品設計中我們運用的突變的目的很簡單就是為了讓其更加凸起,多用于區分當前狀況、選中狀況和默認狀況。

banner輪播

banner輪播圖上面的提醒狀況會根據當前狀況和默認狀況進行區分,把當前狀況進行轉變從而進行凸顯出來。

導航欄分類

導航欄分類上面的提醒狀況也是根據當前狀況和默認狀況進行區分,把當前狀況進行轉變從而進行凸顯出來。

按鈕

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

但是在許多 windows體系中,卸載軟件時會跟你玩筆墨游戲,會用非、否、不是等誘導你作出錯誤的判斷。

feed流

feed流是產品中持續更新并呈現給用戶內容的信息流。feed流在產品顯現情勢有列表、瀑布流、卡片情勢。

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

3. 節奏感

多少元素排列可以形成節奏感,一樣平常來說是3個或3個以上,兩個你不能說是節奏感只能說它是重復。當3個或3個以上劃一的排列就會形成一種節奏感。

左右滑動

(如圖來自uistar)界面中三個書籍劃一的排列在一路,可以通過左右滑動來獲取更多的書籍。在使用左右滑動結果時,應考慮元素的數量,盡量不要超過10個以上。

列表頁

(如圖來自uistar)列表網頁劃一的排列在一路有肯定的節奏感,通過改變 icon 的配色來雄厚畫面。

4. 韻律

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

最美有物

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

圖表

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

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個作品都是通過色彩按照紅橙黃綠青藍紫規律運用到界面中的背景和列表中,增長了畫面的雄厚感和韻律感。

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

界面動效中重要分成當前狀況動效轉變和轉場動效轉變,界面中的元素a1對b1、a2對b2、a3對b3信息對等,能幫助界面做出很有韻律感的動效。

二、總結

重復可以使畫面秩序化、劃一化,形成協調、富有節奏感的視覺結果,更加有利于人們增強對畫面的記憶。

重復、突變、節奏感、韻律幾種不同的體例都是存在于產品當中的,幾種不同的美感可以同時存在的,只不過它適應不同人群的審美能力,審美能力高一點的更喜好一些轉變,審美能力相對基礎更喜好簡單的重復。

所以畫面中賡續出現同樣的元素這叫重復,而在許多重復里面忽然出現一個轉變這叫突變,雷同元素劃一的排列在一路這叫節奏感,而這些元素在排列的過程中有外形、顏色、大小、不透明度等轉變就形成了一種韻律感。

參考文獻:

  • 《平面設計》 呼博、張瑋、李甜
  • 《寫給大家看的設計書》 Robin Williams

迎接關注作者的微信公眾號:水手哥學設計



[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
本文地址:http://www.9254975.live/Tutorial/di4161.html
超周全的「交互規則說明」基礎科普
如何選擇UI 界面布局樣式?來看丁香園設計師的總結!
圖趣網微信
建議反饋
×
股票软件下载排名