UI设计中可借鉴平面设计技巧(版式设计1)

UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现在我们的UI设计提供哪些参考呢,我们能从中借鉴的技巧有哪些?今天就从版式设计说起。


UI设计是随着智能设备的飞速发展、互联网行业的发展以及农林牧渔传统行业的急于转向而兴起。主要是企业对移动设备交互界面的重视。在企业越来越重视界面设计的今天。传统的平面设计能为现在我们的UI设计提供哪些参考呢,我们能从中借鉴的技巧有哪些?今天就从版式设计说起。

UI设计中可借鉴平面设计技巧(版式设计1)

版式设计

在UI设计中版式设计不言而喻是非常重要的。版式设计就如同盖房子先要搭好框架一样。一款APP视觉呈现是不是符合商业性并兼具审美。其中的版式设计是其核心。而在平面设计中版式设计也是一个作品的核心。平面设计长时间的发展积淀了相当多实用的技巧和方法。

一、形势方法

版式设计中形势方法指的是、画面的表现方法和原理。说白了就是画面要出什么效果就用什么表现手法而已。平面设计中形势方法可以分为。虚空留白、比例适度、对比调和、变化统一、变异秩序、节奏韵律、重复交错、对称均衡等。今天我们举例分析一下前四个。

1、虚空留白(适合现在极简设计风格)

这种版式设计主要是突出主题,给人以轻松愉悦的感觉。适合文艺范的和有逼格的app界面使用,能够营造出高品质的界面风格。但是如果一旦运用不得当容易出现界面空或单调的感觉。

UI设计中可借鉴平面设计技巧(版式设计1)

2、比例适度(协调UI中各部分内容)

平面设计中所说的比例适度主要是整体和部分的协调,采用合理的比例方法,如:黄金比例、等差等比。去协调各部分的关系使各部分要素产生联系。在UI版面布局中正是需要调节和有机的组合各要素在有限的界面里的合理性。

UI设计中可借鉴平面设计技巧(版式设计1)

3、对比调和(UI中信息层级的表现)

对比调和在平面设计中是经常用到的,整体版面要调和,局部版面要对比。对比是强调主次关系。对比调和用到UI设计中可以做到设计内容在主次关系的层级化。在统一调和的界面里又充满了对比的小情调。这正是平面不平之所在,也是一个优秀的界面所必备的。

UI设计中可借鉴平面设计技巧(版式设计1)

4、变化与统一(是UI突破同质化的一种方法)

变化与统一是形式美法则的总则。是其他方法方式的一个总结。变化所说的就是在设计中要有所创新不能总墨守成规,统一是设计要做到视觉上的愉悦而不是虽然有局部吸引人的眼球但是整体一看却是辣眼睛。变化和统一也许是突破现在APP同质化的一种方法。在现在APP同质化严重的情况下我们能做到APP的风格统一又不墨守成规寻求变化才是营造自己风格的一种方法。

UI设计中可借鉴平面设计技巧(版式设计1)

这些平面设计里的形式美法则在UI设计中同样受用。这些表面形式在做banner图构图和创意上也特别有用。

二、版式设计基本类型

版式设计的基本类型有特别多。我们这里着重分析其中对UI设计最有帮助的骨骼型、左右分割、曲线型、满版型这几个基本类型。

1、骨骼型(类似网格构图)

这里说的骨骼型就是在版式构图中,进行横竖向的分栏。能容严格按照分栏排列。版面效果沉稳厚重,井然有序,如果横竖分栏交叉排列还可制造灵动活泼的版面气氛。非常类似网格构图的方法。在UI设计中也很受用,可以很好的规范个元素的位置。(如果你对目前的界面设计一筹莫展,不妨可以试试这种方法)

UI设计中可借鉴平面设计技巧(版式设计1)

2、左右分割型(瀑布流)

左右分割不外乎就是把版面左右分开在配之以图文。在UI中的应用是随着扁平化卡片化的兴起,在移动端界面尺寸的限制下,开始进行了信息的分割处理。横向的卡片式布局使得一屏内所看到的信息受到了极大的限制(不利于用户体验,卡片式并非万能)。所以就应用的左右分割的布局。左右分割有利于信息的呈现,可以与瀑布流结合。

UI设计中可借鉴平面设计技巧(版式设计1)

3、曲线型(UI方向1)

曲线型主要表现的是韵律和节奏,可能符合一部分小众APP设计界面设计,充满了特色和戏剧性。我觉得有特色的界面设计是这些小众APP的设计核心。可以利用另类的小众的设计做吸引。

UI设计中可借鉴平面设计技巧(版式设计1)

4、满版型(UI方向2)

满版设计在平面设计中主要表达大方、舒展的设计风格。在UI移动端界面设计中寸土寸金。现在的扁平化,极简设计风格都在留白提升逼格。但是未来极简设计终将过去,我们面对的还是海量信息。

UI设计中可借鉴平面设计技巧(版式设计1)

结束语

版式设计是平面设计的一部分,也应该是UI设计的一部分。这里仅仅是说出了版式设计的一点点内容,部分的形式美法则和版式设计的基本类型。还有很多很多对UI设计有利的点没有发掘。站在巨人的肩上可以看的更远,平面设计就是我们前进的加速剂。

 

本文由 @彪形大汉 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23190/

(0)
CatherineCatherine
上一篇 2017-05-04 10:05
下一篇 2017-05-04 12:06

相关推荐

  • 你家的产品是不是什么都做?那他该不该做交互设计?

    在BAT这样的大公司中,很多产品经理是不会去做交互设计的,因为分工很细,有专门的交互设计师来负责交互。而另一种普遍的现象,在很多中小公司,是没有交互设计师这样的岗位的,交互设计工作是由产品经理来代为执行…

    2015-07-14
  • “空状态的设计“值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。 不要被空状态的…

    2015-08-17
  • 微信黑科技”红包照片“今日仅限一天体验速去!!

    就在刚才,微信偷偷发布了黑科技,说不清是照片红包还是红包照片,反正平日里的发朋友圈的照相机图标已经变成了香槟金,点击后会出现发照片红包的选项,发布之后朋友需要支付红包才可以打开。   快去试试?

    2016-01-26
  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • 新一轮文案大比拼即将到来

    #微博桌面美图##奶茶妹妹# #奶茶刘强东分手# #苏宁易购5亿年货红包疯抢# #axure##Axure##干货分享#  我只想说 呵呵!!偷笑偷笑偷笑偷笑

    2015-01-08
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • Axure绘制专题页原型

    专题策划对于SEM至关重要,如果策划及文案都搞定了,接下来如何与设计进行沟通呢,这篇文章我们一起聊聊专题页原型绘制的话题。一、Axure界面介绍Axure的使用极其简单,只需要几个拖拽动作就可以基本搞定。接下来我们实际上手用学历教育的例子,带大家一起来看看。绘制这个原型可以分为两步,首先是手机的绘制,然后是文案内容的绘制。左侧面板(快捷键:Ctrl+Shift+[),主要是元件库,将需要用到的元件,直接拖拽就可以。右侧面板(快捷键:Ct...

    2018-03-04
  • 无论屏幕多大,拇指驱动的重要性不会递减

    本文着重介绍了为什么大拇指非常重要,通过我们如何抓住不同大小的屏幕来说明“拇指规则”。

    2017-05-28
  • 用户体验才是真正的“一句顶一万句” 安徽燕之坊食品公司用勤哲软件实现生产、经营和管理数据的互联互通

    统计数据显示,截止2017年底,国内食品工业企业超过4万家,主营业务收入占全国工业的比重十分之一强。在实施制造强国战略和推进健康中国建设中,食品工业作为传统的“以食为天”的民生产业占据着不可或缺的重要位置。当前,食品行业在实现快速发展的过程中,面对城乡居民安全、多样、健康、营养、方便的食品消费需求时,与其他行业一样面临着转型、升级的动能和压力。尤其是在食品质量安全水平和高品质食品有效供给方面,利用现代信息技术创新消除安全和质量隐患等领域...

    2018-02-13
  • 教育产品组件化交互设计的实践与思考

    作者:王媛媛   组件化设计,就是设计模块化,组件可复用。是以通用化的视角审视模块设计,根据业务方需求支持多个产品的接入与使用。在线教育领域内,题目是线上线下教学场景内校验学习的一种基本方式,同时,题目…

    交互专题 2017-11-13