您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

全面解析设计的四大基本原则

原创文章 分类: 经验/观点 版权:
11149 160 231 9
更新于:2019-02-27
69.1
首页推荐

设计的四大基本原则,相信设计师们都不陌生,也一定都在自己的设计中多多少少运用到了。可能有的设计师运用到了,也不见?#20204;?#26224;的理解设计四大基本原则,所以今天小梓主要以 “设计的四大基本原则是什么?#20445;?#22914;何更好的运用设计的四大基本原则” 为主题来写这篇文章。


Image title


亲密性

亲密性原则是指:将相关的项组织在一起,移动这些项,使它们的物理位置相互靠近,这样一来,相关的项将被看作凝聚为一体的一个组,而不再是一堆彼此无关的片段。当然了,如果某些信息项或组彼此之间并无关联,这些元素就不应存在很近的亲密性(即不应靠近)。这样就能为用户提供一个直观的提示,使用户马上了解页面的组织和内容。

总结:亲密性意味着关联,在一个页面上,物理位置的接近就意味着存在关联 (实际生活中也是如此) 。就像两个很靠近的人走在大街上,你会认为他们认识,反之,两个相距甚远的人,你会认为他们不认识...

举例:下图1左边的排版中每一个内容都?#25512;?#20182;的内容间距相同,看不出它们之间有什么关系。而图1右边的排版缩小了标题与内容之间的间距,加大了组与组之间的间距,从而使得标题与内容之间的关系更加清晰,同时空间感也更强。

下图2左边的排版中数字看起来像一个单独的单元,与内容无关。而图2右边的排版缩小了数字与内容之间的间距,使它们靠的更近了,这样一来,我们很容易就发现了它们之间的关系。

Image title


对齐

对齐原则是指:任何元素都不能在页面上随意安放,每一项?#21152;?#24403;与页面上的某个内容存在某种视觉联系。如果页面上的一些项是对齐的,这会得到一个更内聚的单元。即使对齐的元素物理位置是彼此分离的,但在你眼里(以及在你的心里)它们之间也会有一条看不见的线把彼此连在一起。不知道大家有没有听过一句话,整齐即是美。

现在的对齐方式分为:左对齐、右对齐、左右对齐、居中对齐。

总结:对齐意味着有条理,页面最好只使用一种对齐方式。

举例:下图1左边的排版中既有居中对齐、左对齐、还有右对齐、整体显得非常杂乱,不知从何看起。而图1右边的排版统一使用了右对齐的方式,整体看上去非常舒适有条理。

下图2左边的排版中有三种对齐方式 (标题剧中对齐,文本左对齐,?#35745;?#21491;对齐),并且文本与?#35745;?#19978;下没有对齐,整体关系不够明确。而图2右边的排版统一使用左对齐,并且文本与?#35745;?#19978;下对齐,使得整个排版井然?#34892;頡?/p>

Image title


重复

重复原则是指:设计的某些方面需要在整个作品中重复。重复元素可能是一种粗字体、一条粗线、某个项目符号、颜色、设计要素、某?#25351;?#24335;、空间关系等。读者能看到的任何方面都可以作为重复元素。你在工作中肯定已经用过重复。例如,所有标题都设置为相同的大小和粗细,项目中的每个列表都使用相同的项目符号,这些都是重复的例子。

总结:可以把重复认为是“一致性”。不过重复还不只是自然的一致,这是一种统一设计各个部分的有意识的行为,就如我们为每个项目所做的设计规范,就是为了使项目更加的统一。

举例:下图1每一?#25991;?#23481;的标题、文本、还有圆形符号都是重复元素,使得整个页面非常具有组织性与连续性。

下图2的头部采用了深色的背景填充,如果没有底部重复的深色小色块,整个页面就不会有这么强的连续性,所以在页面中连续性也是非常关键的,尤其是有多个页面的时候。

Image title


?#21592;?/span>

?#21592;?#21407;则是指:页面上的不同元素之间要有?#21592;?#25928;果,达到吸引用户的?#21592;?#25928;果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。?#21592;?#19981;仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并且制造焦点。可以采用多种方式产生?#21592;取?span style="color: #BDC3C7;">如大字体与小字体的?#21592;齲?#32454;线与粗线的?#21592;齲?#20919;色与暖色的?#21592;齲?#24179;滑材质与粗糙材质的?#21592;齲?#38388;隔很宽的文本行与紧凑在一起的文本行形成?#21592;齲?#23567;?#35745;?#19982;大?#35745;?#30340;?#21592;?..

总结:要想实现?#34892;?#30340;?#21592;齲员?#23601;必须强烈,千万不要畏畏缩缩。

举例:下图1左边的排版中标题与文字的?#21592;?#27604;较轻微,中规中矩。而图1右边的排版中把标题颜色换成了红色,就与文字的?#21592;?#38750;常明显,让人一眼就注意到了标题。

下图2左边的排版也是?#21592;?#19981;够强烈,没有抓住眼球。而图2右边的排版则截然不同,只是换了一个黑色的背景色就抓住了人的眼球,再加上红色的标题,白色的副标题、浅灰色的文本,使得整个页面的层级非常分明且突出。

Image title


Image title


在设计页面的时候,我们往往采用的不止一种基本原则,而是四种基本原则都会用到。要知道,一个好的页面设计,亲密性、对齐、重复和?#21592;齲?#24448;往都是相辅相成的,而不是孤立存在的。

前面已经总结了设计的四大基本原则是什么,接下来主要以举例的形式来让大家更好的运用四大基本原则,举例涉及平面及UI等。


APP设计

下图是我们常见的App Store里面的两个页面,第一个搜索的页面尽管它非常的简洁,没什么太多的内容,但它的设计里面同样运用了四大基本原则。而第二个App的页面虽然复杂一些,但同样也是运用了四大基本原则,尤其是重复与亲密性。

Image title

网页设计

下图是一个企业官网,采用了比较多的?#21592;取?#23545;齐、重复和亲密性。相比较移动端App而言,网页运用的四大基本原则更?#29992;?#26174;,让人更容易察觉,因为它的空间大,内容多。

Image title


平面设计

下图是两张活动海报,一个是设计展的海报,一个是七夕的海报。它们共同的特点除了都采用了四大基本原则,还有一个很明显的特点就是,它们标题与内容的?#21592;?#38750;常强烈,很吸引眼球。同时重复的元素也让整个设计更加的完整一致。

Image title

总结:以上?#30452;?#36890;过App设计、网页设计及平面设计的角度举例,无非是想告诉大家设计的四大基本原则运用是非常广泛的,并不仅仅局限于某?#20013;?#24335;的设计。举例最主要还是起一个举一反三、抛砖引玉的作用,更多的还是希望大家在设计中多观察、多思考、多实践。

对了,以上举例内容中,因为怕显示的特别杂乱,所以可能还?#34892;?#22810;没有框选出来的对齐、重复、?#21592;?#21450;亲密性的地方,大?#20063;?#35201;纠结哦。希望大家看完都能有收获吧!



微信公众号:小梓的设计笔记

小梓儿

微信公众号:小梓的设计笔记

229粉丝/3关注

?#19979;?#35782;途当仁不让lv.1首页新秀收藏家lv.2原创小生
2018-作品合集中英文字体的分类与运用

小梓儿

小梓儿

微信公众号:小梓的设计笔记

?#19979;?#35782;途当仁不让lv.1首页新秀收藏家lv.2原创小生

扫描二维码
去?#21482;?#31471;查看海报

小梓儿

TA已经获得7?#22534;?#31456;啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

广西福彩官网