几种常用的界面布局(教你在界面中应用版式布局)
几种常用的界面布局(教你在界面中应用版式布局)
2024-11-06 05:01:57  作者:移位的情感  网址: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协议

  • 干萝卜丝炒粉条的做法(萝卜丝炒粉条的做法)
  • 2024-11-06萝卜丝炒粉条的做法做法步骤1、萝卜切丝,五花肉切小丁,木耳切丝,姜丝辣椒段备好;2、热锅热油煸萝卜丝出水汽后盛出备用;3、底油煸五花肉出油脂放姜丝辣椒段,烹料酒;4、加适量水,放入粉条、木耳丝,调盐、糖、酱油;5、将萝。
  • 马蓉带女儿被吐槽完整版(马蓉爸爸撬锁引热议)
  • 2024-11-06马蓉爸爸撬锁引热议今天热搜榜又被王宝强和马蓉霸占了,貌似从两人离婚之后,只要一方一有什么举动,就立即遭到网友们的热议,虽然两人在今年开年已经正式确定离婚,但关于离婚后双方的财产分割却依旧没有理清~​所以也就导致了昨天发。
  • 户户通全国通用版安装方法(想要免费安装户户通的请看)
  • 2024-11-06想要免费安装户户通的请看想要安装户户通的用户,请注意了,如果你所在地区属于有线电视网络未覆盖区域,可以咨询当地文广局是否有免费安装户户通的相关政策以下为某地文广局通知:通知按照省广播电视局和州文化广播电视和旅游局关于免费为有。
  • 短腿狗有哪些品种(哪些狗是短腿的)
  • 2024-11-06哪些狗是短腿的柯基犬,提到小短腿,就不得不提狗界新晋网红——柯基犬,柯基凭借它圆润的屁股和不能更短的四肢红透大江南北,成为养狗人士的新宠柯基自带的两大萌点一是屁股圆、手感好、弹性十足,二是腿短到连上楼都费劲,非常可。
  • word为什么不能删除部分内容(Word里面最难删的东西)
  • 2024-11-06Word里面最难删的东西在日常工作中,我们经常都会用到Word!用多了我们会发现,有时候Word可会作妖了!总是有乱七八糟的东西出现,而死活删不掉!不能忍了,我堂堂浪里小白龙,还治不了你?1、一键去除页眉横线woc!这个页眉。
  • 三才五格配置一览表(改斜归正的正确打开方式)
  • 2024-11-06改斜归正的正确打开方式不让宝宝做“偏见”小孩,家长需要多留心孩子的一些“小动作”,如果发现孩子爱愣神、歪头看东西、走路容易绊倒摔跤、户外或阳光下孩子会闭上一只眼睛、双眼位置不对称等症状时,就要提高警惕,孩子是不是有可能患有。
  • 今年第19号台风预计登陆哪里 今年第7号台风来了
  • 2024-11-06今年第19号台风预计登陆哪里 今年第7号台风来了今年第7号台风已经生成今天(8月9日)上午10时中央气象台发布台风蓝色预警上午10时,该台风中心位于海南省三沙市(西沙永兴岛)东偏南方向约50公里的南海中西部海面上,就是北纬16.7度、东经112.8。
  • 感谢文案(表达感谢的朋友圈文案)
  • 2024-11-06表达感谢的朋友圈文案用真诚经营爱情,用执着追求事业,用善良对待朋友,用平淡对待磨难,用虔诚祈盼幸福,用感恩回报人间,心随爱走,爱遂心愿,祝你感恩节快乐!感谢太阳赠与我们温暖,使数九不再严寒;感谢雨露给我们甘甜,使花朵更加。
  • 为什么人有那么多烦恼(人有那么多烦恼讲解)
  • 2024-11-06人有那么多烦恼讲解人有烦恼是很正常的,因为人成长了,会思考问题当面对不能解决的问题时就会感到烦恼烦恼主要来源于三个方面所处的社会有让我们不满意的地方,我们会觉得世界不公平,赋予自己的东西太少,别人又很优秀,因此我们会产。
  • 刀柄刀叶可分离(刻刀慢移密而不叠)
  • 2024-11-06刻刀慢移密而不叠【绝活看点】李锦文,“山西省工艺美术大师”深耕刻瓷工艺23年,他技艺娴熟、手法高超;其肖像作品中,黑釉盘上每一根线条都清晰异常、密而不叠他根据作品不同,选择不同“底盘”雕刻,展现独特魅力“叮—叮—叮”。
  • 沈石溪的作品(沈石溪简介)
  • 2024-11-06沈石溪简介沈石溪代表作品有:《猎狐》、《第七条猎狗》、《再被狐狸骗一次》、《狼王梦》、《白象家族》、《斑羚飞渡》、《最后一头战象》、《一只猎雕的遭遇》、《和乌鸦做邻居》、《野犬女皇》、《鸟奴》、《混血豺王》、《。
  • 周易中的断卦的意思(同而异的意思是求同存异吗)
  • 2024-11-06同而异的意思是求同存异吗《周易》第三十八卦:睽——小事,吉悔亡,丧马勿逐自复见恶人,无咎遇主于巷,无咎见舆曳,其牛掣;其人天且劓,无初有终睽孤,遇元夫,交孚厉,无咎厥宗噬肤,往,何咎?睽孤,见豕负涂,载鬼一车,先张之弧,后说。