几种常用的界面布局(教你在界面中应用版式布局)
几种常用的界面布局(教你在界面中应用版式布局)
2024-11-22 10:33:38  作者:移位的情感  网址:https://m.xinb2b.cn/life/wxp172120.html

编辑导语:随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,而在界面的设计上,扁平、简约的设计理念成为如今设计师们所推崇的理念。版面的构成是信息传播的桥梁,本篇文章作者为我们分享了如何在界面中应用版式布局的干货,一起来看。


一、前言

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

版面的构成是信息传播的桥梁,发挥版面元素中各自的特点和功能,会使整个版面完成从视觉到内容的完善性和美观性,从而更快、更准确的传递信息,所以版式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。

虽然在移动应用中是以用户的操作和使用体验为主,但随着扁平化潮流袭来,我们不再通过细腻的质感和光影提升界面的品质,拉开界面的层次,那我们靠什么来吸引我们的用户,为用户创造良好的阅读和使用体验呢?

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

版式设计的常见布局有十三种:骨骼型,满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等。

这些布局在平面设计中应用非常广泛,而移动界面的设计与平面设计最大的不同在于其功能性、可操作性和可交互性,版式的选择也是基于产品的功能特性、目标用户、使用场景等因素。


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

1. 信息展示型界面

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


(1)以浏览引导为主

以浏览引导为主的界面在布局上会有一个明确的主线,而在常见的版式布局中上下分割型、左右分割型、中轴型、曲线型等布局在图文的排版上对于用户会有一个潜在的引导提示,因此应用比较广泛。下面的两个图片,虽然是不同的场景和功能,但都采用中轴型布局,即图片和文字按垂直方向排列,引导用户从上往下浏览,结构层次非常清晰。


(2)以品牌传递为主

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

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


(3)以提高浏览效率为主

对于注重提高浏览效率为主的界面,通常界面中包含了较大的信息量,如何把信息快速、准确的传递给用户,避免用的烦躁和困扰?这类应用中比较典型的是新闻、资讯以及图库等app的界面,我们在设计时可以借鉴骨骼型的板式,骨骼型是一种规范、理性的分割方法,在杂志排版中我们常见的骨骼有:竖向通栏、双栏、三栏、四栏等。通过图文的混合编排呈现理性而严谨的感觉,在信息的传递更为快速、清晰。

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


(4)以信息展示为主

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

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


2. 功能操作型界面

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

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


三、结语

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

本文由 @西瓜的设计 原创发布于人人都是产品经理;未经许可,禁止转载

题图来自 Unsplash,基于CC0协议

  • ug编程怎么用2d草图编程(看过的最详细编程步骤)
  • 2024-11-22看过的最详细编程步骤【领取方式】大家觉得内容不错的小伙伴可以转发关注收藏哦!我是粥粥老师需要模具编程、车床编程、汽车模具编程、铸造编程、产品编程、汽配、零件编程、造型、逆向、模具设计、电极设计、四轴、五轴、UG、POWE。
  • 上海本地青年钢琴家(这位从上海走出去的00后钢琴新秀)
  • 2024-11-22这位从上海走出去的00后钢琴新秀2000年出生于北京,五岁时随家人移居上海,15岁去国离乡前往加拿大求学,今年20岁的钢琴新秀谢凌飞,如今已在北美钢琴赛事和演奏舞台展露头角2019年,他获得第18届波兰肖邦国际钢琴比赛加拿大赛区头奖。
  • 大气压强的计算方法和过程(9.3大气压强知识梳理03)
  • 2024-11-229.3大气压强知识梳理03欢迎来到【胡子物理】,让孩子学习物理不再吃力!知识回顾大气压强客观存在大气压强的大小1×10^5Pa气压计测量大气压的仪器叫做气压计在托里拆利实验的基础上,在玻璃管旁立一个刻度尺,读出水银柱的高度,并。
  • 让风雨随风散去(让风继续吹不忍远离)
  • 2024-11-22让风继续吹不忍远离17年前的愚人节,有人给大家开了个“真玩笑”,让一个绚丽的生命戛然而止17年后,每每议论起他,都忘不掉他《霸王别姬》中或是自我释放般的尽情表演在这个特殊的日子里,将回顾这部经典电影记忆文章加上他的名字。
  • 为什么戏曲一开始就不能停
  • 2024-11-22为什么戏曲一开始就不能停因为古代迷信的说法,唱戏的话就必须要唱到观众离开为止,他们认为哪怕凡人不听,也有鬼神在听所以唱戏不能停老祖宗说过:戏一旦开始,即使台下没有人,也一定要唱完八方听客,一方凡人,七方鬼神一旦定下了就不能停。
  • 绍兴鉴湖风景区简介(以绍兴鉴湖为命题)
  • 2024-11-22以绍兴鉴湖为命题“本次竞赛对于柯桥、对鉴湖的品牌塑造都是一次‘超越性’的实践从内部视角到外部视野,从硬件设施到软件配套,从专业技术到公众参与,都集思广益鉴湖格局新规划,共塑鉴湖多元包容的美好新愿景”昨天,为期两天的「。
  • 文竹开花寓意什么
  • 2024-11-22文竹开花寓意什么  文竹开花的寓意是平安、吉祥文竹属于观叶植物,开花比较少见,如果是养殖的文竹开花了,就是一种好兆头,会给人带来好的运气,保佑家人平安,带来吉祥文竹的花语象征着永恒和对朋友纯洁的心,情谊永不变,还象征。
  • 《观沧海》阅读题及答案 古文阅读观沧海
  • 2024-11-22《观沧海》阅读题及答案 古文阅读观沧海观沧海(东临碣石)全文阅读:作者:曹操东临碣石,以观沧海水何澹澹,山岛竦峙树木丛生,百草丰茂秋风萧瑟,洪波涌起日月之行,若出其中;星汉灿烂,若出其里幸甚至哉,歌以咏志观沧海(东临碣石)全文翻译:东行登。
  • 傻春演员表(讲述了什么故事呢)
  • 2024-11-22讲述了什么故事呢《傻春》演员表:陶红饰赵素春;孔琳饰赵素眠;毛晓彤饰赵素不;吕丽萍饰许敏容;张蓓蓓饰赵素不;郑奇饰赵素觉;魏小军饰赵素晓;杨舒婷饰赵素处;郭晋东饰宝成;许歌饰刘茜《傻春》是由金英马影视文化股份有限公司。
  • 金字塔的十大未解之谜(几千年至今未能解答的那些金字塔谜团)
  • 2024-11-22几千年至今未能解答的那些金字塔谜团金字塔是古埃及文明的最大遗产之一,也是人类历史上最神秘的建筑之一虽然人们已经在过去数千年中不断研究金字塔,但至今仍有很多谜团待解技术难题首先,金字塔的建筑技术是如何实现的仍然是一个谜团在那个时代,埃及。
  • 邪恶天才2世界统治结局(世界统治前期缺钱解决方法介绍)
  • 2024-11-22世界统治前期缺钱解决方法介绍《邪恶天才2:世界统治》中的钱是非常重要的,尤其是前期,想要赚钱没什么门路,很多玩家都不太清楚前期缺钱应该怎么解决,其实如果没有钱的话可以去做任务,在一些区域基地能刷出奖励超高的任务前期缺钱解决方法介。
  • 讲笑话大全(有什么笑话故事)
  • 2024-11-22有什么笑话故事自然课老师问:为什么人死后身体是冷的?没人回答老师又问:没人知道吗?这时,教室后面有人说:那是因为心静自然凉医生问病人是怎么骨折的,病人说,我觉得鞋里有沙子,就扶着电线杆抖鞋,有个混蛋经过那里以为我触。