编辑导语:随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,而在界面的设计上,扁平、简约的设计理念成为如今设计师们所推崇的理念。版面的构成是信息传播的桥梁,本篇文章作者为我们分享了如何在界面中应用版式布局的干货,一起来看。
一、前言
随着信息和技术的发展,手机屏幕越来越大,界面开始承载越来越多的信息,繁复的界面装饰细节,让界面显得越发臃肿,人们开始更多的关注界面的内容和功能,信息框架呈现出扁平化的趋势,在设计风格上,设计师们也不再追求3d、拟物化的设计,而是越来越崇尚扁平、简约的设计理念。
版面的构成是信息传播的桥梁,发挥版面元素中各自的特点和功能,会使整个版面完成从视觉到内容的完善性和美观性,从而更快、更准确的传递信息,所以版式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。
虽然在移动应用中是以用户的操作和使用体验为主,但随着扁平化潮流袭来,我们不再通过细腻的质感和光影提升界面的品质,拉开界面的层次,那我们靠什么来吸引我们的用户,为用户创造良好的阅读和使用体验呢?
二、版式设计在移动界面中的应用版式设计的常见布局有十三种:骨骼型,满版型、上下分割型、左右分割型、中轴型、曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等。
这些布局在平面设计中应用非常广泛,而移动界面的设计与平面设计最大的不同在于其功能性、可操作性和可交互性,版式的选择也是基于产品的功能特性、目标用户、使用场景等因素。
移动界面按照其产品功能可以分为两大类:信息展示型界面和功能操作型界面。
1. 信息展示型界面我们常见的以阅读和传递信息为主的界面有:新闻、天气、阅读、购物、音乐、食谱、健康等app的某些界面,另外还有新手引导页也是比较常见的以传递信息为主的页面。而这些app又基于其不同的功能特点,界面的板式也有各自的特点。
(1)以浏览引导为主
以浏览引导为主的界面在布局上会有一个明确的主线,而在常见的版式布局中上下分割型、左右分割型、中轴型、曲线型等布局在图文的排版上对于用户会有一个潜在的引导提示,因此应用比较广泛。下面的两个图片,虽然是不同的场景和功能,但都采用中轴型布局,即图片和文字按垂直方向排列,引导用户从上往下浏览,结构层次非常清晰。
(2)以品牌传递为主
对于以品牌传递为主的界面,更适合采用满版型、重心型、自由型等布局样式。
满版型是用图片充满整个版面,视觉效果直观而强烈。下面两个界面即是采用了满版型的布局,利用全屏的图片和简洁的文案传递出产品的气质和理念,同时给人大方、舒展的感觉。
(3)以提高浏览效率为主
对于注重提高浏览效率为主的界面,通常界面中包含了较大的信息量,如何把信息快速、准确的传递给用户,避免用的烦躁和困扰?这类应用中比较典型的是新闻、资讯以及图库等app的界面,我们在设计时可以借鉴骨骼型的板式,骨骼型是一种规范、理性的分割方法,在杂志排版中我们常见的骨骼有:竖向通栏、双栏、三栏、四栏等。通过图文的混合编排呈现理性而严谨的感觉,在信息的传递更为快速、清晰。
下面的左图是一个新闻app,采用竖向分栏的布局,模块化的结构使得信息的展现整洁和严谨。右图是一个图片展示app,则采用了三栏的布局,把图片以这种瀑布流的形式展现给用户,方便用户快速浏览。但是由于平级的信息,很难区分主次,而人的视线很难在同一时间聚焦在两个或者两个以上的事物上,所以通过图片错路排列,使得画面更为活泼。
(4)以信息展示为主
以信息展示为主的界面,比较常见的有记录型、天气类等app,这类app界面更强调信息的直观性。在这类app中应用的较多的布局有满版型、上下分割、左右分割、中轴型、对称型、自由型等。
下面的两个图例虽然都以信息的展示为主,但因界面的信息量、app的功能特性因素的影响,左图的运动记录界面信息量比较上,采用了中轴型布局,而右图的天气app信息量比较大,采用了满版型布局。合理的布局选择对于信息的展示有至关重要的作用。
2. 功能操作型界面
以功能操作为主的界面主要是引导用户操作,所以常见的布局主要有上下分割型、左右分割型、中轴型等。
下面的左图是一个注册页面,btn采用了中轴型的构图,清晰地展现了操作项和注册流程。右图采用了上下分割的版面构成,上面为图片展示,下面部分为选项和操作,结构非常清晰。
三、结语
在扁平化的潮流下,很多产品也借鉴了杂志排版的一些方式,为用户带来了良好的阅读和使用体验。我在上面的示例中也只是列举了一些个人认为比较典型和有意思的布局,而针对不同功能的app,选择适合的版式构图类型,大胆的结合板式设计的一些经典的形式,也许能为我们的设计拓展新的思路。公众号:西瓜的设计
本文由 @西瓜的设计 原创发布于人人都是产品经理;未经许可,禁止转载
题图来自 Unsplash,基于CC0协议
几种常用的界面布局(教你在界面中应用版式布局)
2024-11-22 06:35:24 作者:移位的情感 网址:https://m.xinb2b.cn/know/wxp172120.html
- 河南科技大学二本录取专业有哪些(河南科技大学有7个专业出现缺额)
- 2024-11-22河南科技大学有7个专业出现缺额河南科技大学简称“河科大”,位于洛阳这所高校在河南省的高校中排名靠前,实力雄厚,也被很多人认为是最有可能冲击新一轮双一流的河南高校在河南的高校中,基本上排在第三的位置上从2022年的高考录取情况来看,。
- 天刀是哪一年公测的(天刀到底讲了一个什么样的故事)
- 2024-11-22天刀到底讲了一个什么样的故事 虽然文案再三强调天刀“不讲复杂的故事,只讲复杂的人”,但贯穿游戏历程的冗长剧情并不是那么容易消化,再加上随等级断续的分章结构,难免令人暗自困惑:天刀到底在讲一个什么样的故事呢? 像所有武侠小说描。
- 怀孕穿防辐射服有什么好处(孕妇防辐射服如何做检测)
- 2024-11-22孕妇防辐射服如何做检测当孕妇购买了一件孕妇防辐射服之后,对于孕妇防辐射服的性能检测也就成了一件非常重要的事情毕竟,孕妇在购买一件防辐射服以后,是需要穿很长时间的那么,当孕妇买回了一件孕妇防辐射服以后,孕妇防辐射服怎样检测呢。
- 阳光玫瑰葡萄绿的好还是红的(阳光玫瑰甜蜜蓝宝石)
- 2024-11-22阳光玫瑰甜蜜蓝宝石葡萄想必不陌生,水果市场上随处可见,其种类也是五花八门从最开始的有籽葡萄,直至现在,无籽葡萄也在慢慢的在市场上普及,当然,无籽葡萄也渐渐开始受到人们的青睐,就像软籽石榴一样,谁不想体验一把那种大快朵颐。
- 今年的福布斯富豪排名榜(福布斯发布美国富豪榜)
- 2024-11-22福布斯发布美国富豪榜【大河财立方消息】10月5日,据福布斯官微消息,福布斯发布了最新的2021年度美国富豪榜榜单显示,贝索斯以2010亿美元的财富额居首,黑石苏世民、华纳音乐老板挤进前20贝索斯的个人净资产在过去一年里增。
- 新能源汽车电机控制器的使用方法(新能源汽车驱动电机及控制器PPT)
- 2024-11-22新能源汽车驱动电机及控制器PPT拆车邦拆车邦是专业汽车配件供应链平台,建立二手汽配件及零部件再制造,帮助用户提供大而全的拆车件、再制造等产业链上下游环节,。
- 成都情侣抠门(男朋友抠门能交往吗)
- 2024-11-22男朋友抠门能交往吗男朋友抠门能交往吗?陆琪,爱情保卫战情感导师,《潜伏在办公室》,《爱情基因》等畅销书作者男朋友抠门能继续交往吗?首先第一个看你抠不抠门,如果你抠门可以继续交往如果你不抠门不能交往,因为这是一个价值观的。
- tl wdr5600是多少兆
- 2024-11-22tl wdr5600是多少兆tl-wdr5600是百M路由器,支持百M带宽,最大支持传输速率为883Mbps的带宽tl-wdr5600网络标准为IEEE802.11a、IEEE802.11ac、IEEE802.11n、IEEE8。
- 穿成校草的炮灰cp(在学校做大佬的日子)
- 2024-11-22在学校做大佬的日子①《在学校做大佬的日子》②《如花美眷》③《星际种菜美食直播日常》④《将军夫人要和离》⑤《当贤妻独得盛宠》⑥《穿成替身后我红爆娱乐圈》⑦《朕为皇后捂马甲》⑧《偷吻春光》⑨《不驯的美貌》每日推荐甜文,欢迎。
- 小眼睛小脸戴眼镜适合什么发型(小眼睛又怎么样)
- 2024-11-22小眼睛又怎么样每一个不完美都有不同的选择,修饰出最适合你的,最美的才是最重要的事;其实选择发型不光要根据脸型来判断,还要根据五官和气质来选择,当然,你要是拥有一个完美的脸部比列,任何发型任你选择,当然,大部分平常的。
- 为什么讨厌吧唧嘴的声音(讨厌吧唧嘴的声音吗)
- 2024-11-22讨厌吧唧嘴的声音吗吃饭的时候,听到“吧唧吧唧”的声音,你开心吗?健康君就不喜欢周围人吃饭吧唧嘴的声音虽然总被父母规范用餐礼仪,但下一秒,就会被他们吧唧嘴的声音打扰......虽然厌恶这种声音只是个人好恶可是,最近伦敦大。
- 杭州塘栖莫家桥环境污染(杭州这个村突然涌入8000人)
- 2024-11-22杭州这个村突然涌入8000人周末两天,杭州余杭径山镇四岭村村民小高“暴晒”了两天站在村口道路上指挥交通“我们就纳闷了,这么多人哪里来的?”小高和工作人员挨个问,你们是从哪里知道我们村有鱼鳞坝的?“十个开车来的游客,有八个都说是刷。