恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
全面解析设计的四大基本原则
0.0°
2019-02-27 原创文章 经验/观点 举报 6941 182 237 9

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


Image title


亲密性

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

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

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

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

Image title


对齐

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

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

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

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

下图2左边的排版中有三种对齐方式 (标题剧中对齐,文本左对齐,图片右对齐),并且文本与图片上下没有对齐,整体关系不够明确。而图2右边的排版统一使用左对齐,并且文本与图片上下对齐,使得整个排版井然有序。

Image title


重复

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

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

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

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

Image title


对比

对比原则是指:页面上的不同元素之间要有对比效果,达到吸引用户的对比效果。如果两个项不完全相同,就应当使之不同,而且应当是截然不同。对比不仅可以用来吸引眼球,还可以用来组织信息、清晰层级、在页面上指引读者,并且制造焦点。可以采用多种方式产生对比。如大字体与小字体的对比;细线与粗线的对比;冷色与暖色的对比;平滑材质与粗糙材质的对比;间隔很宽的文本行与紧凑在一起的文本行形成对比;小图片与大图片的对比...

总结:要想实现有效的对比,对比就必须强烈,千万不要畏畏缩缩。

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

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

Image title


Image title


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

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


APP设计

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

Image title

网页设计

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

Image title


平面设计

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

Image title

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

对了,以上举例内容中,因为怕显示的特别杂乱,所以可能还有许多没有框选出来的对齐、重复、对比及亲密性的地方,大家不要纠结哦。希望大家看完都能有收获吧!



微信公众号:小梓的设计酷

更新:2019-02-27

收藏

182人已收藏

小梓_xiaozi

微信公众号:小梓的设计酷

  • 26

    作品

  • 696

    粉丝

  • 3

    关注

  • 全面解析大厂APP的适老化设计
  • 如何做好海报设计?
  • 外国美术史与设计
  • 如何规范界面“文案”?

    猜你喜欢

      2019-02-27 原创文章 经验/观点 举报 6941 182 237 9

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

      0.0°

      你确定要举报全面解析设计的四大基本原则

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年10月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      237
      182
      9

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录