版式在移动界面中的应用

   一.前言

  随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,繁复的界面装饰细节,让界面显得越发臃肿,人们开始更多的关注界面的内容和功能,信息框架呈现出扁平化的趋势,在设计风格上,设计师们也不再追求3d、拟物化的设计,而是越来越崇尚扁平、简约的设计理念。

  版面的构成是信息传播的桥梁,发挥版面元素中各自的特点和功能,会使整个版面完成从视觉到内容的完善性和美观性,从而更快、更准确的传递信息,所以版式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。虽然在移动应用中是以用户的操作和使用体验为主,但随着扁平化潮流袭来,我们不再通过细腻的质感和光影提升界面的品质,拉开界面的层次,那我们靠什么来吸引我们的用户,为用户创造良好的阅读和使用体验呢?

  二、版式设计在移动界面中的应用

  版式设计的常见布局有十三种:骨骼型,满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等。这些布局在平面设计中应用非常广泛,而移动界面的设计与平面设计最大的不同在于其功能性、可操作性和可交互性,版式的选择也是基于产品的功能特性、目标用户、使用场景等因素。

  移动界面按照其产品功能可以分为两大类:信息展示型界面和功能操作型界面。

  1.信息展示型界面

  我们常见的以阅读和传递信息为主的界面有:新闻、天气、阅读、购物、音乐、食谱、健康等app的某些界面,另外还有新手引导页也是比较常见的以传递信息为主的页面。而这些app又基于其不同的功能特点,界面的板式也有各自的特点。

  1)以浏览引导为主

  以浏览引导为主的界面在布局上会有一个明确的主线,而在常见的版式布局中上下分割型、左右分割型、中轴型、曲线型等布局在图文的排版上对于用户会有一个潜在的引导提示,因此应用比较广泛。

  下面的两个图片,虽然是不同的场景和功能,但都采用中轴型布局,即图片和文字按垂直方向排列,引导用户从上往下浏览,结构层次非常清晰。


  2)以品牌传递为主

  对于以品牌传递为主的界面,更适合采用满版型、重心型、自由型等布局样式。

  满版型是用图片充满整个版面,视觉效果直观而强烈。下面两个界面即是采用了满版型的布局,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。


  3)以提高浏览效率为主

  对于注重提高浏览效率为主的界面,通常界面中包含了较大的信息量,如何把信息快速、准确的传递给用户,避免用的烦躁和困扰?

  这类应用中比较典型的是新闻、资讯以及图库等app的界面,我们在设计时可以借鉴骨骼型的板式,骨骼型是一种规范、理性的分割方法,在杂志排版中我们常见的骨骼有:竖向通栏、双栏、三栏、四栏等。通过图文的混合编排呈现理性而严谨的感觉,在信息的传递更为快速、清晰。

  下面的左图是一个新闻app,采用竖向分栏的布局,模块化的结构使得信息的展现整洁和严谨。右图是一个图片展示app,则采用了三栏的布局,把图片以这种瀑布流的形式展现给用户,方便用户快速浏览。但是由于平级的信息,很难区分主次,而人的视线很难在同一时间聚焦在两个或者两个以上的事物上,所以通过图片错路排列,使得画面更为活泼。


  4)以信息展示为主

  以信息展示为主的界面,比较常见的有记录型、天气类等app,这类app界面更强调信息的直观性。在这类app中应用的较多的布局有满版型、上下分割、左右分割、中轴型、对称型、自由型等。

  下面的两个图例虽然都以信息的展示为主,但因界面的信息量、app的功能特性因素的影响,左图的运动记录界面信息量比较上,采用了中轴型布局,而右图的天气app信息量比较大,采用了满版型布局。合理的布局选择对于信息的展示有至关重要的作用。


  2 .功能操作型界面

  以功能操作为主的界面主要是引导用户操作,所以常见的布局主要有上下分割型、左右分割型、中轴型等。

  下面的左图是一个注册页面,btn采用了中轴型的构图,清晰地展现了操作项和注册流程。右图采用了上下分割的版面构成,上面为图片展示,下面部分为选项和操作,结构非常清晰。


  三、结语

  在扁平化的潮流下,很多产品也借鉴了杂志排版的一些方式,为用户带来了良好的阅读和使用体验。我在上面的示例中也只是列举了一些个人认为比较典型和有意思的布局,而针对不同功能的app,选择适合的版式构图类型,大胆的结合板式设计的一些经典的形式,也许能为我们的设计拓展新的思路。

时间: 2024-10-03 13:53:37

版式在移动界面中的应用的相关文章

移动端界面中的版式设计原理(下)

  上篇教程:<超实用!移动端界面中的版式设计原理(上)> 4. 留白的艺术 不单单是文字和图片需要设计,留白也是构成页面排版必不可少的因素.所有的白都是"有目的的留白",带有明确的目的来控制页面的空间构成. 常见的手法有几种,第一通过留白来减轻页面带给用户的负担. 首屏对一个应用来说十分重要,因此一些比较复杂的应用首评都堆积了大量的入口.如果无节制的添加,页面中包含的内容太多时,会给人一种页面狭窄的感觉,给用户带来强烈的压迫感,所以元素太多有时候反而不是好事.留白能使页面

移动端界面中的版式设计原理(上)

  "我总觉得页面不太好看但是我又说不出来","我不懂设计,但是我就是觉得不协调","你觉得这好看?你的审美要加强啊"这些听着熟悉的话往往是产品和设计产生矛盾的开端.还有一种评价叫说不出哪里好也说不出哪里不好,相信很多人也有过感同身受的无奈. 其实设计本身就是一门理性的学科,审美因人而异,只有言之有理的设计才能够说服别人.当设计师拿到产品的原型开始做设计时,如果只是单纯的按照原型进行而不考虑任何规则,那么很多时候就会产生一些不协调的结果.设计完之

泛泛而谈界面中的斑马纹设计

大家好,我叫斑马纹 列表中使用两种相同的样式但颜色不同的背景,来间隔显示的内容. 当然这个释义我是借鉴<designing interfaces>来的,略有不同.我肯定承认这是一本神作,不过看了当下很多界面以及自身平时的设计之后,发现实际情况中使用的斑马纹在原来基础上通过视觉的处理有了扩展,不仅仅是一深一浅单纯颜色的配合使用. 图一:最正宗的斑马纹应用 图二:斑马纹的延伸 – 内容高度不一致的应用 图三:斑马纹的延伸 – 增加线条的分割 图四:斑马纹的延伸 – 仅使用分割线 图五:斑马纹的延伸

为什么需要在移动界面中注意隐喻设计

文章描述:是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 界面是什么? 是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身.它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.一个简单的问题,

交互设计实例:手机界面中常用的导航方式

文章描述:手机界面常用导航设计分析. 所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 现在在哪儿 以前去过哪儿 将

为什么CAD界面中显示问号乱码

你曾经遇到过AutoCAD界面中显示"?"的问题吗?这是由于输入法设置导致的! 笔者就在前几天遇到了这种问题,根据我使用AutoCAD的经验,一般碰到这个问题都是字体不匹配的原因,下面就请和我一起来分析解决这个问题. 如下图,在CAD的[任务栏]里和弹出的[选项]对话框里显示的都是"?",这种情况很少见. 回忆昨天,使用正常,在昨天到发现出现这种问题之间,由于计算机中了病毒,就重新ghost了一个以前的操作系统.之后就是装了一些常用的软件,没有什么大的比较错误的操作

编写自己的IDE:如何在图形界面中实时捕获控制台程序的标准输出

编写自己的"IDE"-- 如何在图形界面中实时捕获控制台程序的标准输出. IDE是集成开发环境(Integrated Development Environment)的简称.印象里有很多出色的IDE,比如JBuilder和Kylix,比如Visual Studio.不知大家是否留意过,大多数IDE本身只提供代码编辑.工程管理等人机交互功能,我们在IDE中编译代码.调试程序时,IDE需要调用命令行的编译器.调试器完成相应的操作.例如,使用Visual Studio编译C++程序时,我们会

用VC++在单文档界面中创建多视图

一个单文档界面中存在多个视图,并且可以根据需要进行视图的动态切换,这是当前比较流行的界面风格,它可以满足许多用户在操作和显示方面的需要.这种界面风格的主要代表软件是Outlook Express.而用VC++实现这种风格的界面有一定难度,笔者就这个问题进行了研究,并归纳总结出两种实现方法(这些代码都在VC++ 6.0下调试通过),使用时关键注意步骤和实现思路,不必拘泥于代码的形式. 方法一:静态创建切换法 步骤描述: 1.在窗口显示之前先将需要切换的所有的视图对象创建好,除首先显示的视图以外,其

Win8系统Metro界面中的QQ帐号注销方法

首先在社交应用登入后,可以使用右键或由屏幕外侧由上向下(或由下向上)滑入调出AppBar,可以看到"注销"选项,点击注销即可,例如QQ应用. 少数社交应用可以通过点击头像修改在线状态实现注销,例如QQ应用 极少数社交应用在AppBar和在线状态中无法设置"注销"选项时,用户需要查看一级界面中的"设置"选项下的"注销"选项,然后点击注销即可,例如微博