手機(jī)UI視覺設(shè)計(jì)構(gòu)圖的基本法則

1、.手機(jī)UI視覺設(shè)計(jì)構(gòu)圖的基本法則蘋果手機(jī)的UI視覺設(shè)計(jì)構(gòu)圖都是我們值得去學(xué)習(xí)的好案例。這節(jié)課主要講解UI視覺設(shè)計(jì)構(gòu)圖的基本原則。1、什么是構(gòu)圖？構(gòu)圖就是有限的畫面中，將各種元素進(jìn)行合理地布局和安排，使圖形和文字在畫面中達(dá)到最佳位置，產(chǎn)生最優(yōu)視覺效果。構(gòu)圖是整個(gè)畫面的骨架，決定了視覺營(yíng)銷界面是否準(zhǔn)確的表達(dá)主題，吸引用戶注意。2、構(gòu)圖的四項(xiàng)基本法則分別為：均衡、對(duì)比、律動(dòng)、視點(diǎn)今天跟大家分享的主要從APP引導(dǎo)頁(yè)設(shè)計(jì)，APPbanner圖設(shè)計(jì)說(shuō)起，這四項(xiàng)基本視覺構(gòu)圖法則適合偏平面設(shè)計(jì)。當(dāng)然這也是大家學(xué)習(xí)APP ui設(shè)計(jì)的基本理論知識(shí)。當(dāng)然一個(gè)完整的引導(dǎo)頁(yè)界面包含：主題圖、背景渲染圖、文字、點(diǎn)綴圖以及

2、動(dòng)畫元素組成。第一條構(gòu)圖法則：均衡各元素在布局上保持視覺重量的平衡和勻稱，從而使視覺界面具有平衡感和穩(wěn)定性。堆成是均衡的一種極端情況，平衡感和穩(wěn)定性很強(qiáng)，適合表現(xiàn)但局限性較大、缺乏變化。視覺構(gòu)圖的理論模型圖如下：第二條構(gòu)圖法則：對(duì)比在視覺界面中通過大小對(duì)比、字體大小、粗細(xì)對(duì)比、疏密對(duì)比、曲直對(duì)比等形式來(lái)突出和強(qiáng)化主題，引起用戶關(guān)注。視覺構(gòu)圖的理論模型圖如下：第三條構(gòu)圖法則：律動(dòng)可以理解為有節(jié)奏、規(guī)律、跳躍、動(dòng)感等元素。起引導(dǎo)用戶的視覺軌跡的作用。研究表明，畫面右上角最能吸引人的關(guān)注，而左下角對(duì)人的吸引力最小。律動(dòng)能給人視覺上富有規(guī)律的節(jié)奏效果，進(jìn)而吸引用戶了解APP界面內(nèi)容。視覺構(gòu)圖的理論模型

3、圖如下：第四條構(gòu)圖法則：視點(diǎn)即 視覺的中心點(diǎn)或者是視覺焦點(diǎn) 跟我們拍照的時(shí)候，需要頂一個(gè)焦點(diǎn)。也是視覺傳達(dá)要素的核心點(diǎn)。視點(diǎn)：即畫面的視覺中心。構(gòu)圖的視覺中心一定是界面最重要的內(nèi)容，也是必須讓用戶了解的內(nèi)容。視覺中心常常在畫面中八分之五的地方，以此為基礎(chǔ)進(jìn)行視點(diǎn)構(gòu)圖，能更突出地表現(xiàn)視覺主題，并將用戶的注意力集中到主要內(nèi)容上。視覺構(gòu)圖的理論模型圖如下：所以，均衡、對(duì)比、律動(dòng)、視點(diǎn)就是UI視覺設(shè)計(jì)構(gòu)圖的四項(xiàng)基本法則，大家必須會(huì)充分理解和會(huì)使用。希望下面的5個(gè)視覺設(shè)計(jì)基本表現(xiàn)手法，值得大家好好的理解和使用。 秩序法：均衡、對(duì)稱、擴(kuò)大縮小、平行位移等有秩序有節(jié)奏地構(gòu)圖，制造形式美。 對(duì)比法：色彩、形狀等的對(duì)比，給人鮮明生動(dòng)的視覺印象。 元素法：強(qiáng)化點(diǎn)、線、面構(gòu)圖元素，創(chuàng)造視覺交響，寓多樣性于個(gè)性之中。 矛盾空間法：顛倒、錯(cuò)位、鏡像，在空間上構(gòu)成特殊性，產(chǎn)生一種無(wú)限可能、無(wú)限發(fā)展、無(wú)