相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

UI设计中如何设定精致的界面布局

鑫鑫设计发布于:2019-10-13 22:41 |原作者: 设计TNT|
鑫鑫设计
澳门特别行政区 澳门特别行政区 平面设计师
发私信 + 关注
简介: 本篇文章通过介绍UI中一些创新布局,带飞特网的UI设计学习者们掌握UI设计诀窍
版权申明:本文出自“设计TNT”原创,感谢“设计TNT”的原创文章分享!

前言

UI设计中如何设定精致的界面布局 飞特网 UI设计

前面已经完成这个系列的 "排版和图形"两篇文章,本周接着后面的 布局篇幅,我们知道布局的好坏直接影响产品美观度,不同形式的布局,给用户带来的感受是不一样的,产品也将会有不一样的性格,因为布局直接影响界面空间疏密程度,不同产品都有着不同空间,那么我们要如何做,才能更好的去布局,并且能在激烈的竞争中脱颖而出,现今大部分产品基本都是长得差不多,作为设计师更应该去多研究一些布局趋势,并能将其融汇在自家产品中。

FEVTE编注:更多经典SKETCH教程和SKETCH经验分享、作品交流请访问飞特网SKETCH教程栏目:https://www.fevte.com/plan/sketch/ 

为什么要重视布局

- 布局对界面设计来说十分重要,不仅是我们常说的在移动端或者web端的设计中,他在车载中、电视端UI或者VR设计同样有很大影响。我们知道界面设计中最关键的五大基础语言;形,色,字,质, ,其中 构(结构)即是我们所说的布局,五个维度之前已经和大家分享了 图形和字体篇,今天我们可以看下布局对界面设计的影响,以及我们该如何通过布局来使界面设计看起来更加有范,更有自己的视觉特征点在里面。

目前主流布局趋势是怎样的

-

前面在向大家介绍布局的重要性和他对界面设计的影响,那么如果我们需要做出一些比较有创新的布局来提高界面精致度,该如何去下手呢?我们可以通过观察目前主流一些趋势做法,了解国外设计师如何找到更有创意的方式来设计他们的布局 - 并将一些创意运用到界面设计中的,下面我们一起看下。

偏移与叠加网格布局

-

网格布局我相信大部分人都知道,很熟悉,那么今天所说的偏移叠加网格布局是什么样子的呢?其实就是我们在设计界面时候,把最底层基础网格搭建好后,上层的内容排版,通过错落叠加方式来布局,这种布局的优点是留白空间大,呼吸感强,图文错落交织一起,形式感增强。缺点是,运用的范围会小一些,承载内容少,一般Web端运用比较多。当然也有一些移动端设计个性化产品存在这样的布局 (Rover APP)可以去下载体验下。

UI设计中如何设定精致的界面布局 飞特网 UI设计

上图文字与图片交叠错落排版,图片与图片之间也是网格交错

UI设计中如何设定精致的界面布局 飞特网 UI设计

UI设计中如何设定精致的界面布局 飞特网 UI设计

上面移动端设计,设计师通过留出左侧空网格,整体内容往右侧偏移,导航相对内容来说做了差异化设计,并未进行偏移设计(看我上图红框部分)  。这样做的目的是因为,我们点击汉堡菜单的时候,本来整体就要往右侧移动,如果再继续移动,那么内容会显示不下,同时视觉效果并没有很好

UI设计中如何设定精致的界面布局 飞特网 UI设计

UI设计中如何设定精致的界面布局 飞特网 UI设计

半偏移网格布局,界面中并非所有的内容都偏移底层网格,而是部分模块这样去做,原因是内容多的情况下。

分屏布局

-

分屏布局,顾名思义就是将屏幕进行几种不同区域的划分,然后内容分布排版在里面,分屏布局解决的主要问题将屏幕大的设备进行合理划分空间设计,一般是在横屏运用比较多,比如PAD,或者WEB或者车机中控屏,下面一起看下分屏布局在实际设计中的具体表现

UI设计中如何设定精致的界面布局 飞特网 UI设计

UI设计中如何设定精致的界面布局 飞特网 UI设计

UI设计中如何设定精致的界面布局 飞特网 UI设计

上图界面设计采用了1/2分屏布局,将图片与内容文字进行区域划分,下图是将主文案摆放在分割区域中间(文字较少情况下可以这样去做)增强形式感。当然分屏布局可以有多重形式,列如,2/3,1/3,3/4等等,可以根据内容进行选择合适分屏

1234下一页
17

好评
12

差评

刚表态过的朋友 (29 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

鑫鑫设计
澳门特别行政区 澳门特别行政区 平面设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计