蘋果手機(jī)的UI視覺設(shè)計構(gòu)圖都是我們值得去學(xué)習(xí)的好案例。

這節(jié)課主要講解UI視覺設(shè)計構(gòu)圖的基本原則。

1、什么是構(gòu)圖？

構(gòu)圖就是有限的畫面中，將各種元素進(jìn)行合理地布局和安排，使圖形和文字在畫面中達(dá)到最佳位置，產(chǎn)生最優(yōu)視覺效果。

構(gòu)圖是整個畫面的骨架，決定了視覺營銷界面是否準(zhǔn)確的表達(dá)主題，吸引用戶注重。

2、構(gòu)圖的四項基本法則—分別為：均衡、對比、律動、視點

今天跟大家分享的主要從APP指導(dǎo)頁設(shè)計，APPbanner圖設(shè)計說起，這四項基本視覺構(gòu)圖法則適合偏平面設(shè)計。當(dāng)然這也是大家學(xué)習(xí)APP ui設(shè)計的基本理論知識。

當(dāng)然一個完整的指導(dǎo)頁界面包含：主題圖、背景渲染圖、文字、點綴圖以及動畫元素組成。

第一條構(gòu)圖法則：均衡

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

各元素在布局上保持視覺重量的平衡和勻稱，從而使視覺界面具有平衡感和穩(wěn)定性。堆成是均衡的一種極端情況，平衡感和穩(wěn)定性很強(qiáng)，適合體現(xiàn)但局限性較大、缺乏轉(zhuǎn)變。

視覺構(gòu)圖的理論模型圖如下：

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

第二條構(gòu)圖法則：對比

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

在視覺界面中通過大小對比、字體大小、粗細(xì)對比、疏密對比、曲直對比等形式來凸起和強(qiáng)化主題，引起用戶關(guān)注。

視覺構(gòu)圖的理論模型圖如下：

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

第三條構(gòu)圖法則：律動

可以理解為有節(jié)奏、規(guī)律、跳躍、動感等元素。

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

起指導(dǎo)用戶的視覺軌跡的作用。研究注解，畫面右上角最能吸引人的關(guān)注，而左下角對人的吸引力最小。律動能給人視覺上富有規(guī)律的節(jié)奏效果，進(jìn)而吸引用戶了解APP界面內(nèi)容。

視覺構(gòu)圖的理論模型圖如下：

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

第四條構(gòu)圖法則：視點

即 ?視覺的中間點或者是視覺焦點 ?跟我們拍照的時候，需要頂一個焦點。也是視覺傳達(dá)要素的核心點。

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

視點：即畫面的視覺中間。構(gòu)圖的視覺中間一定是界面最主要的內(nèi)容，也是必須讓用戶了解的內(nèi)容。視覺中間常常在畫面中八分之五的地方，以此為基礎(chǔ)進(jìn)行視點構(gòu)圖，能更凸起地體現(xiàn)視覺主題，并將用戶的注重力集中到主要內(nèi)容上。

視覺構(gòu)圖的理論模型圖如下：

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

所以，均衡、對比、律動、視點就是UI視覺設(shè)計構(gòu)圖的四項基本法則，大家必須會充分理解和會使用。

希望下面的5個視覺設(shè)計基本體現(xiàn)手法，值得大家好好的理解和使用。

① 秩序法：均衡、對稱、擴(kuò)大縮小、平行位移等有秩序有節(jié)奏地構(gòu)圖，制造形式美。

② 對比法：色彩、外形等的對比，給人鮮明生動的視覺印象。

③ 元素法：強(qiáng)化點、線、面構(gòu)圖元素，創(chuàng)造視覺交響，寓多樣性于個性之中。

④ 矛盾空間法：顛倒、錯位、鏡像，在空間上構(gòu)成特殊性，產(chǎn)生一種無限可能、無限發(fā)展、無限趣味的空間感。

⑤ 共形法：巧妙嵌合邊緣形態(tài)，重疊共用，互生互補(bǔ)，變幻相生，給人新穎奇特，別開生面之感。

網(wǎng)站建設(shè)專家中科服網(wǎng)絡(luò)（jbbxhf.cn）,專注于高端品牌網(wǎng)站建設(shè)的解決方案，為您提供專業(yè)、安全的企業(yè)展示網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)站認(rèn)證、網(wǎng)絡(luò)營銷、并提供一站式互聯(lián)網(wǎng)基礎(chǔ)服務(wù)。7×24小時專業(yè)技術(shù)支持,互聯(lián)網(wǎng)用戶服務(wù)的選擇。