這是25學堂第六篇關于小白自學APP設計教程啦。不知道大家有沒有一些關于移動UI視覺設計的收貨呢？如果還沒有，25學堂的老譚童鞋建議大家再去看下前面的五篇關于小白自學APP設計的文章。

第一篇：小白學習APP界面設計，從設計APP首頁開始

第二篇：小白學習APP設計教程：改正你的PS設計習慣

第三篇：小白學習APP設計：5步讓你設計出漂亮的APP

第四篇：小白學習APP設計之完整的APP設計流程解讀

第五篇：小白學APP設計：自學UI設計手冊與職業(yè)規(guī)劃

蘋果手機的UI視覺設計構圖都是我們值得去學習的好案例

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

1、什么是構圖？

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

構圖是整個畫面的骨架，決定了視覺營銷界面是否準確的表達主題，吸引用戶注意。

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

25學堂今天跟大家分享的主要從APP引導頁設計，APPbanner圖設計說起，這四項基本視覺構圖法則適合偏平面設計。當然這也是大家學習APP ui設計的基本理論知識。

當然一個完整的引導頁界面包含：主題圖、背景渲染圖、文字、點綴圖以及動畫元素組成。

第一條構圖法則：均衡

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

視覺構圖的理論模型圖如下：

第二條構圖法則：對比

在視覺界面中通過大小對比、字體大小、粗細對比、疏密對比、曲直對比等形式來突出和強化主題，引起用戶關注。

視覺構圖的理論模型圖如下：

第三條構圖法則：律動

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

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

視覺構圖的理論模型圖如下：

第四條構圖法則：視點

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

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

視覺構圖的理論模型圖如下：

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

最后，25學堂跟大家再來回顧一下一些常用的UI視覺設計的基本表現(xiàn)手法簡述：

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

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

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

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

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

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

非常感謝大家對于25學堂的支持和關注，顧分享這篇小白自學APP設計：UI視覺設計構圖的基本原則與大家共勉。