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

相关推荐

  • 如果想做好产品,你懂人性心理吗?

    来源:市场部 作者:IT精英 众所周知,产品研发的过程除了必备的资源配给外,都离不开人的参与,需要有客户,需求分析人员,开发人员,测试人员等角色参与其中,才能使一个产品研发的过程顺利开展。既然离不开人的…

    2014-09-21
  • 蓝鸽集团2018校园招聘,多岗位,提供食宿,年薪8-20万!

    蓝鸽集团是一家专业从事语言教育技术的高科技. 集团化企业。目前拥有5个子公司. 1个研究院. 3个科技园。在全国30多个省. 市. 自治区设立了200多个分支机构,现有员工1000余名,是我国语言教育技术行业的龙头企业和第一品牌。蓝鸽在2006年与广东省电视台合作承办了国家级“英语辅导”电视台。2008年被认定为国家级高新技术企业。2013年经国务院批准设立博士后工作站。2015年第一个研制成功了具有物联网功能的智能化多媒体教室。201...

    2018-04-08
  • 体验的情感之谈

    来源:Johny Holland Magazin 当体验设计的范畴在不断延展的时候,也正是其面临着一种设计挑战的时候,即体验设计师希望给用户传递一种可独立于情境或频道、具有相关性(延续性)和一致性(稳定性)的设计。 如同在…

    交互设计 2015-10-20
  • 从构图、字体、配色和装饰来分析:为何网易云和虾米APP的banner设计如此好看?

    小白想进阶成为高手,学会发现高手作品的优点是关键。今天这篇从构图、字体、配色和装饰四大Banner 关键要素教你如何发掘高手作品中的优点。

    2017-05-11
  • 艺术留学 | 交互设计在未来会多火?

    交互设计是什么?对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小公司和外包公司,没有设计决策权,专门配给...

    2018-04-01
  • 苹果设计主管乔纳森:从乔布斯身上学会专注

    发布者: GUImobile 新浪科技讯 北京时间10月11日早间消息,在近期于旧金山举行的“名利场新成就峰会”上,苹果设计高级副总裁乔纳桑·艾维(Jonathan Ive)表示,乔布斯是他一生中遇到过的最专注的人。 艾维表示:“这种…

    2014-10-15
  • 功能确定之后,如何做好UCD概念设计?

      功能和数据都确定下来了,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。 如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓…

    2016-02-20
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23
  • 在交互设计过程中,你需要持续关注的五个问题

    认真对待交互设计过程中的每一个设计环节、每一个问题,是提高交互稿质量的基石。过程中的问题很多,需要我们持续关注并解决。

    2017-05-02