编辑导语:随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,而在界面的设计上,扁平、简约的设计理念成为如今设计师们所推崇的理念。版面的构成是信息传播的桥梁,本篇文章作者为我们分享了如何在界面中应用版式布局的干货,一起来看。
一、前言
随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,繁复的界面装饰细节,让界面显得越发臃肿,人们开始更多的关注界面的内容和功能,信息框架呈现出扁平化的趋势,在设计风格上,设计师们也不再追求3d、拟物化的设计,而是越来越崇尚扁平、简约的设计理念。
版面的构成是信息传播的桥梁,发挥版面元素中各自的特点和功能,会使整个版面完成从视觉到内容的完善性和美观性,从而更快、更准确的传递信息,所以版式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。
虽然在移动应用中是以用户的操作和使用体验为主,但随着扁平化潮流袭来,我们不再通过细腻的质感和光影提升界面的品质,拉开界面的层次,那我们靠什么来吸引我们的用户,为用户创造良好的阅读和使用体验呢?
二、版式设计在移动界面中的应用版式设计的常见布局有十三种:骨骼型,满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等。
这些布局在平面设计中应用非常广泛,而移动界面的设计与平面设计最大的不同在于其功能性、可操作性和可交互性,版式的选择也是基于产品的功能特性、目标用户、使用场景等因素。
移动界面按照其产品功能可以分为两大类:信息展示型界面和功能操作型界面。
1. 信息展示型界面我们常见的以阅读和传递信息为主的界面有:新闻、天气、阅读、购物、音乐、食谱、健康等app的某些界面,另外还有新手引导页也是比较常见的以传递信息为主的页面。而这些app又基于其不同的功能特点,界面的板式也有各自的特点。
(1)以浏览引导为主
以浏览引导为主的界面在布局上会有一个明确的主线,而在常见的版式布局中上下分割型、左右分割型、中轴型、曲线型等布局在图文的排版上对于用户会有一个潜在的引导提示,因此应用比较广泛。下面的两个图片,虽然是不同的场景和功能,但都采用中轴型布局,即图片和文字按垂直方向排列,引导用户从上往下浏览,结构层次非常清晰。
(2)以品牌传递为主
对于以品牌传递为主的界面,更适合采用满版型、重心型、自由型等布局样式。
满版型是用图片充满整个版面,视觉效果直观而强烈。下面两个界面即是采用了满版型的布局,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。
(3)以提高浏览效率为主
对于注重提高浏览效率为主的界面,通常界面中包含了较大的信息量,如何把信息快速、准确的传递给用户,避免用的烦躁和困扰?这类应用中比较典型的是新闻、资讯以及图库等app的界面,我们在设计时可以借鉴骨骼型的板式,骨骼型是一种规范、理性的分割方法,在杂志排版中我们常见的骨骼有:竖向通栏、双栏、三栏、四栏等。通过图文的混合编排呈现理性而严谨的感觉,在信息的传递更为快速、清晰。
下面的左图是一个新闻app,采用竖向分栏的布局,模块化的结构使得信息的展现整洁和严谨。右图是一个图片展示app,则采用了三栏的布局,把图片以这种瀑布流的形式展现给用户,方便用户快速浏览。但是由于平级的信息,很难区分主次,而人的视线很难在同一时间聚焦在两个或者两个以上的事物上,所以通过图片错路排列,使得画面更为活泼。
(4)以信息展示为主
以信息展示为主的界面,比较常见的有记录型、天气类等app,这类app界面更强调信息的直观性。在这类app中应用的较多的布局有满版型、上下分割、左右分割、中轴型、对称型、自由型等。
下面的两个图例虽然都以信息的展示为主,但因界面的信息量、app的功能特性因素的影响,左图的运动记录界面信息量比较上,采用了中轴型布局,而右图的天气app信息量比较大,采用了满版型布局。合理的布局选择对于信息的展示有至关重要的作用。
2. 功能操作型界面
以功能操作为主的界面主要是引导用户操作,所以常见的布局主要有上下分割型、左右分割型、中轴型等。
下面的左图是一个注册页面,btn采用了中轴型的构图,清晰地展现了操作项和注册流程。右图采用了上下分割的版面构成,上面为图片展示,下面部分为选项和操作,结构非常清晰。
三、结语
在扁平化的潮流下,很多产品也借鉴了杂志排版的一些方式,为用户带来了良好的阅读和使用体验。我在上面的示例中也只是列举了一些个人认为比较典型和有意思的布局,而针对不同功能的app,选择适合的版式构图类型,大胆的结合板式设计的一些经典的形式,也许能为我们的设计拓展新的思路。公众号:西瓜的设计
本文由 @西瓜的设计 原创发布于人人都是产品经理;未经许可,禁止转载
题图来自 Unsplash,基于CC0协议
几种常用的界面布局(教你在界面中应用版式布局)
2024-11-05 08:20:18 作者:移位的情感 网址:https://m.xinb2b.cn/know/wxp172120.html
- 学生总是不完成作业怎么办(学生总是写不完作业)
- 2024-11-06学生总是写不完作业学生写作业拖沓,磨蹭这是一个常见的现象,也在困扰着很多家长朋友,对于这个问题,应该怎么办呢仔细分析其原因可以归纳为一下七个方面一、学习没有规划,习惯差在写作业之前没有任何准备,做作业时不能专心,一会少。
- 电脑蓝屏怎么修复(电脑蓝屏修复方法)
- 2024-11-06电脑蓝屏修复方法如果电脑只是偶尔出现蓝屏,我们可以通过重启电脑来尝试解决问题当然如果是因为之前安装硬件时所产生的问题,建议重新插拔硬件或安装最新版硬件驱动另外,由于硬件驱动安装不当,或程序兼容性等原因而导致系统蓝屏现。
- lol黑色玫瑰主播资源(演员轻松月入几千)
- 2024-11-06演员轻松月入几千说到英雄联盟的演员、导演,那几乎是无法避免的,游戏排位也被这些人搞的乌烟瘴气,但官方一直在打击,今天官方又将1735个演员账号封停并公示,其中艾欧尼亚482个,比尔吉沃特148个,德玛西亚118个,黑。
- 苹果macbook pro更多信息(新一代MacBookPro有望到来)
- 2024-11-06新一代MacBookPro有望到来IT之家1月17日消息,目前,苹果商店B2B页面已经进入维护状态,预示着即将有新品上架不过,普通零售页面仍处于正常状态,似乎没有变化根据此前爆料消息,苹果有望在今晚发布MacBookPro和Macmi。
- 欢天喜地七仙女七位男主角(欢天喜地七仙女男演员现状)
- 2024-11-06欢天喜地七仙女男演员现状小时候,很喜欢一部电视剧,叫《欢天喜地七仙女》,里面的七位美丽动人的仙女就不用多说了,今天来说一下对应的七位男主角一、刘冬——食神这个人最熟悉的就是《李小龙传奇》里的木村和《战狼》里的分队长因为从小学。
- 香蜜沉沉烬如霜锦觅成亲成功(香蜜沉沉烬如霜第一次双修上线)
- 2024-11-06香蜜沉沉烬如霜第一次双修上线[闽南网]香蜜沉沉烬如霜第一次双修上线电视剧双修后锦觅怀孕了吗在《香蜜沉沉烬如霜》这部电视剧中的最新剧情里,大家期待的双修终于来临,润玉也被打击的不小,【香蜜沉沉烬如霜双修是什么意思双修是行房事的意思。
- 六爻空亡代表什么意义(六爻中所提到的空亡)
- 2024-11-06六爻中所提到的空亡空亡又叫旬空、用天干地支相配合六十天为一个周期,循环不已依天干从甲到癸为一旬,六十天就有六旬,由于天干数十个,地支数十二个,每一旬天干地支相配总有两个地支落空,这两落空地支的就是旬空或空亡例:甲乙丙丁。
- 鲁科版高中化学必修二全册教案(鲁科版高中化学必修二3)
- 2024-11-06鲁科版高中化学必修二3第二节元素周期律第3课时教学目标:https://www.renjiaoshe.com/jiaocai/1155.html(一)知识与技能1、掌握元素周期表和元素周期律的应用2、了解周期表中金属元素、。
- 低位放量滞涨一个月(放量滞涨要小心哦)
- 2024-11-06放量滞涨要小心哦今天市场放出了一个天量,半天交易结束,成交额就突破10,000亿,这种局面可以说几年都没有见过,可是最终指数涨跌不一甚至三大指数有过同时算率的情况,在这种情况下指数没有大幅上涨,量能释放的这么大,这就。
- 鱼肉怎么做吃起来q弹(鱼肉这做法真香)
- 2024-11-06鱼肉这做法真香鱼肉是一个非常不错的食材,不管怎么做都是一道美味下饭的美食我个人最喜欢的就是吃鱼肉了,高蛋白低脂肪,味道还好,关键是价格还不高一般会吃鱼的人都很会做鱼,我就是这样的人不敢说什么做法都会,但是起码大部分。
- 什么什么要牢记(这些内容要牢记)
- 2024-11-06这些内容要牢记1.当前我市疫情防控形势复杂严峻,要保持高度警惕2.坚决做到“早防早控、联防联控、群防群控、严防严控”3.中高风险地区及中高风险地区所在城市的低风险地区入(返)漳人员应第一时间主动向所在村(居)委会报。
- 为人强势但能力惊人的三大星座:四大星座与人为善
- 2024-11-06为人强势但能力惊人的三大星座:四大星座与人为善摩羯座摩羯座的人善于分析和研究,振作精神,对自己要求很高,具有雄才伟辩的气质,有敏锐的洞察力,自我牺牲和帮助他人的牺牲精神你是爱挑剔、善分析与实际的,摩羯座的人内心单纯,总以为天底下都是好人,有强烈的。