14 周 界面设计版式与布局

关重要的作用。
2 .功能操作型界面
以功能操作为主的界面主要是引导用户操作，所以常见的布局主要有 上下分割型、左右分割型、中轴型等。
左图是一个注册页面，采用了中轴型的构图，清晰地展现了操作项和注册流 程。右图采用了上下分割的版面构成，上面为图片展示，下面部分为选项和 操作，结构非常清晰。
谢谢聆听！
中轴型布局，即图片和文 字按垂直方向排列，引导 用户从上往下浏览，结构 层次非常清晰。
Biblioteka Baidu

2）以品牌传递为主
对于以品牌传递为主的界面，更适合采用满版型、重心型、自由型等布局 样式
面满 ，版 视型 觉是 效用 果图 直片 观充 而满 强整 烈个
版
3）以提高浏览效率为主
对于注重提高浏览效率为主的界面，通常界面中包含了较大的信 息量，这类应用中比较典型的是新闻、资讯以及图库等app的界面， 我们在设计时可以借鉴骨骼型的板式，骨骼型是一种规范、理性 的分割方法
虽然在移动应用中是以用户的操作和使用体验为主， 优秀的版式布局可以为用 户创造良好的阅读和使用体验。
一、版式设计在移动界面中的应用
版式设计的常见布局有十三种：骨骼型，满版型、上下分割型、左右分割型、中轴型、 曲线型、倾斜型、对称型、重心型、三角型、并置型、自由型、四角型等。
这些布局在平面设计中应用非常广泛，而移动界面的设计与平面设计最大的不同在于 其功能性、可操作性和可交互性，版式的选择也是基于产品的功能特性、目标用户、 使用场景等因素。
常见的骨骼有：竖向通栏、双栏、三栏、四栏等。通过图文的混 合编排呈现理性而严谨的感觉，在信息的传递更为快速、清晰。
竖向分栏的布局，模块化的结构使得信息的展现整洁和严谨
三栏的布局，把图片以这种瀑布流的形式展现 给用户，方便用户快速浏览。但是由于平级的 信息，很难区分主次，而人的视线很难在同一 时间聚焦在两个或者两个以上的事物上，所以 通过图片错路排列，使得画面更为活泼
版式设计 在移动界面设计中的应用
start
前 言
随着信息和技术的发展，手机屏幕越来越大，界面开始承载越来越多的信息，繁 复的界面装饰细节，让界面显得越发臃肿。
版面的构成是信息传播的桥梁，发挥版面元素中各自的特点和功能，会使整个版 面完成从视觉到内容的完善性和美观性，从而更快、更准确的传递信息，所以版 式设计一直以来广泛应用在广告、招贴、杂志等平面设计中。
4）以信息展示为主
以信息展示为主的界面，比较常见的有记录型、天气类等app，这 类app界面更强调信息的直观性。在这类app中应用的较多的布局 有满版型、上下分割、左右分割、中轴型、对称型、自由型等。
左图的运动记录界面信息量比较上，采用了中轴型布局，而右图的天气app 信息量比较大，采用了满版型布局。合理的布局选择对于信息的展示有至
移动界面按照其产品功能可以分为两大类：信息展示型界面和功能操作型界面。
1/信息展示型界面
我们常见的以阅读和传递信息为主的界面有：新闻、天气、阅读、购物、音乐、食谱、 健康等app的某些界面，另外还有新手引导页也是比较常见的以传递信息为主的页面。
1）以浏览引导为主 以浏览引导为主的界面在布局上会有一个明确的主线，而在常见的版式 布局中上下分割型、左右分割型、中轴型、曲线型等布局在图文的排版 上对于用户会有一个潜在的引导提示，因此应用比较广泛