UI界面设计基础之构图与色彩搭配构图UI界面设计分四个阶段：构图，确定色系，编排，细节调整突出主体、主次分明、有层次感，赏心悦目。构图将表现主题的各个构成要素按照主次关系放置在画面相应的区域，形成良好的视觉感受。不同的主题，产品使用不同的构图形式有着内在规律，无论是摄影，平面广告、banner在构图上原理都是一致的。下面就以摄影和门户banner为例讲解几种常见的构图形式。常见的构图形式有：垂直构图，平衡式构图、斜线构图、放射线构图、九宫格构图。构图1、垂直构图垂直的线条象征着庄严、坚强、有支撑力，传达出一种永恒性。垂直的物体，也会给人一种秩序感和稳定感。这种方法充分体现景物的高度和深度。在自然界中很多物体、景色都具有竖线形状的结构，如：万木争荣的森林，参天大树，险峻的山石，飞泻的瀑布，摩天大楼等。设计上主要用于表现单薄细长的物体。如：服饰、灯管等构图垂直构图构图2、平衡式构图与垂直构图相似，给人安静，稳定，满足的情绪，画面结构完美无缺，安排巧妙，对应而平衡。摄影方面用于月夜，水面，夜景等设计方面常用于地产设计，水壶稳定类产品banner设计构图平衡式构图构图平衡式构图构图3、斜线构图可分为立式斜垂线和平式斜横线两种。应用广泛，能够非常好的表现空间物体的透视关系和纵深感。摄影方面表现运动，流动，倾斜，动荡，失衡，紧张，危险等场面。设计方面用于表现运动鞋，运动服，细长铅笔等产品对象构图斜线构图构图4、放射线构图以主体为核心，元素呈向四周扩散放射的构图形式。这种构图方式可使人的注意力集中到被摄主体，尔后又有开阔、舒展、扩散的作用。常用于需要突出主体而元素又多又复杂的场景，或是产品多而单一和画面比例严重失调的情况。构图放射线构图构图5、九宫格构图简单的说就是把主体放在四个焦点上(或者线上)，不要让主体在正中间就会很美。九宫格构图最适用的题材:人像、静物、风光构图九宫格构图色彩搭配“色彩搭配”这个概念是在20世纪末才开始传入中国的，对于大多数中国人只敢穿黑，白，灰，蓝来说，这无疑是一个莫大的惊喜。不到十年的时间，“色彩搭配”风靡中国的大江南北，指引着人们的穿着打扮，商业营销，城市规划，从此我们的世界五彩缤纷。色彩搭配的重要性色彩搭配色彩搭配的重要性色彩搭配色彩搭配的重要性色彩搭配原色可以合成其他颜色，而其他颜色不能分解出本来的色彩，我们通常说的三原色，即红、绿、蓝，可以混合出所有颜色，三种颜色同时相加为白色。色光三原色：R、G、B(红绿蓝）色料三原色：黄、品红、青，用于涂料印刷认识三原色色彩搭配色环暖色：暖色由红色调构成，如红色、橙色和黄色。这种颜色选择给人以温暖、舒适、有活力的感觉。这些颜色产生的视觉效果使其更贴近观众，并在页面上更显突出。冷色：冷色来自于蓝色调，如蓝色、青色和绿色。这些颜色使配色方案显得稳定和清爽。它们看起来还有远离观众的效果，所以适于做页面背景。色彩搭配色环相似色：是指在给定颜色旁边的颜色。如给出的是橙色，那么他的相似色就是红色和黄色，这种更接近自然的配色互补色（对比色）：是指色环上相互正对的，如果希望更鲜明的突出某种颜色，选择对比色效果是最好的色彩搭配色彩搭配什么是三色搭配原则？三色搭配原则是指一个设计作品中，颜色应保持在三种之内。三种，而不是三个(拥有独立色值算一个颜色)。我们随便打开一个网站，比如淘宝、阿里巴巴、京东、甚至苹果等，仔细检查里面的颜色就超过三个(链接、报错、提示、金额等)。只要保持主要颜色不超过三种即可。所以说，童鞋们，发挥你的想象大胆的用色吧，不要让限制的思想束缚你天马行空的创意!色彩搭配色彩搭配色彩搭配色彩搭配色彩搭配三色构成主色+辅助色+点睛色(主色调)约75%主色决定画面的风格趋向的色彩，或色彩群。主色并不一定只能有一个颜色，它还可以是一种色调，最好选择同色系或邻近色中的1-3个，只要能够保持协调就可以。辅助色(辅助图)约20%辅助色辅助主色，使画面更完美，更丰富，更显优势。辅助色不一定只能有一个颜色，也可以多色相辅助。点缀图案最好有1-2种，多了容易花哨，或者分散主题。点睛色(点睛图)约5%点缀色(点缀图)引导阅读，装饰画面，营造独特的画面风格。点缀色(图)也可以有1-3种，但要以一种为主，其它为辅，整体协调为妙。色彩搭配色彩搭配色彩搭配色彩搭配平时设计中的一些小技巧灰色是百搭色配色网站：http:/www.58pic.com/zhinengpeise/参考成功的作品的配色方案。从物体本身吸取颜色然后再拓展。THANK YOU