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

相关推荐

  • 5分钟,带你掌握20个表格设计技巧

    译者Jimmy:貌似翻译项目走上了正轨,应该能保持一周更行一篇,或者两周更新一篇的节奏。:)这次翻译的是一篇关于数据报表的文章,对于没有设计过报表的设计师来说,应该很有用!文章标题有所修改。原因自然是为了点击量啦~ 哈哈~

    2017-04-30
  • 如何让你的设计方向不跑偏:Vision in Design方法解析

    作者:肖又歌( frog 交互设计师)   很多时候,在设计项目的初期,设计团队只有一个设计的大方向和一些关键词,但是整理不出来思路。抑或是脑子里已经有一个新的点子,但是论据不足,无法充分支持设计的合理性。这…

    交互专题 2017-08-07
  • 《2017中国设计行业价格报告》——交互设计

    《2017中国设计行业价格报告》——交互设计创意点亮生活设计美好人生创意设计一个有温度有格调的公众号合作、投稿:cda-zj@vip.163.com微信:13777850472微博:@浙江省创意设计协会

    2018-02-14
  • 升级篇:利用品牌基因法进行图标设计

    图标设计如何具有品牌性?这可能是设计师工作中经常会遇到的问题。但很多新人也许并不了解什么是品牌性,更不知道如何将品牌性融入到图标当中,不过没关系,看了这篇文章你就不会那么困惑了!

    2017-05-04
  • 交互设计就业前景怎么样?

    交互设计师/用户体验师 5年内22倍增长需求。在我几年前选择交互设计这个专业的时候还没有什么人知道是什么。还是蛮有趣的,就是想尽一切办法让用户满意。国内以前只有浙江大学才有这个专业,现在应该很多大学都有了…

    交互专题 2016-10-25
  • 透视Pad用户与使用行为

      随着Pad的普及,人们如何使用Pad、有哪几类典型用户成为值得深入研究的问题。针对这些问题,ISUX北京设计中心于近期开展了Pad用户基础调研,综合日记卡记录、观察法、深度访谈、问卷调查等多种研究方法对Pad的使…

    2014-12-02
  • 视觉设计-文字编排的易读性

    在视觉设计工作中,大家总习惯将重点放在图标和色彩上。但实际上,作为一个阅读类app,思考如何让文章更易于阅读是和图形、色彩处理同等甚至更为重要。 在设计工作中,如果有100个人就会有100种设计理论,我认为并…

    2014-09-08
  • 各国货币简称及符号

      欧元,英镑,澳元,人民币,马来西亚币,印尼,新加坡币,新西兰,越南,韩币,泰铢,菲律宾,日元,美金等等货币的简称与符号,标准符号。 中国 人民币:元 Renminbi Yuan RMB¥ CNY 1CNY=10 jao (角)1 j…

    交互设计WiKi 2015-09-15
  • 实例分析:室内地图交互体验分析

    因为做室内定位项目,需要涉及到室内地图相关功能,故分析、探寻高德地图、百度地图APP的室内地图设计逻辑,以为项目借鉴。本文从室内地图展示,室内地图与导航栏的对应两方面来分析对比,并针对部分内容提出相关建议。

    2017-05-09
  • 网友吐槽,各种“小玩具”用户体验很失败!

    据说关注了「没完没了官方」很多人丁丁变大了女票更黏人了一夜3次也不累了好像前几天曼曼更新的那篇硅胶娃娃一样大家一定也经常听说各种小玩具但是真正体验过的其实很少今天曼曼总结了一些网友的用后评价(来源:某博,某宝评价,某圈)『蝴蝶』听到这个名字,应该都很陌生大概就是一种带振动摩擦感的小东西配有蓝牙功能是为了在户外制造情调用的大概就是女生提前塞进去到了户外通过蓝牙控制振动从而达到一种刺激感实际上内.裤和小妹妹之间的空隙很小根本放不了这个玩意儿...

    2018-03-14