1.4 版式布局让界面有格调
在设计新媒体界面的过程中，可以通过制作美观、舒适的界面，达到吸引用户、提高浏览量与点击率的效果，而制作美观界面的关键之处就在于版式布局。本小节将重点讲述各类常见的布局方式与布局原则等内容。
1.4.1 竖排列表布局
由于手机屏幕大小有限，因此大部分的手机屏幕都是采用竖屏列表显示，这样可以在有限的屏幕上显示更多的内容。在竖排列表布局中，常用来展示功能目录、产品类别等并列元素，列表长度可以向下无限延伸，用户通过上下滑动屏幕可以查看更多内容，如图1-23所示。
图1-23 竖排列表布局
1.4.2 横排方块布局
由于智能手机的屏幕大小限度使得各种软件的工具栏无法完全显示，因此很多页面在工具栏区域采用横排方块的布局方式。
横排方块布局主要是横向展示各种并列元素，用户可以左右滑动手机屏幕来查看更多内容，如图1-24所示。
图1-24 横排方块布局
1.4.3 九宫格布局
九宫格最基本的表现其实就像是一个3行3列的表格。目前，非常多的小程序界面采用了九宫格的变体布局方式，如图1-25所示。
图1-25 九宫格布局
1.4.4 弹出框布局
在新媒体界面中，对话框通常是作为一种次要窗口，可以出现在界面的顶部、中间或底部等位置，其中包含了各种按钮和选项，通过它们可以完成特定命令或任务。
弹出框中可以包含很多内容，在用户需要的时候可以点击相应按钮将其显示出来，主要作用是可以节省手机的屏幕空间。在各类小程序中，多数的菜单、单选框、多选框、对话框等都是采用弹出框的布局方式，如图1-26所示。
图1-26 弹出框布局
1.4.5 热门标签布局
在新媒体界面设计中，某些元素较多的界面通常会采用热门标签的布局方式，让页面布局更语义化，使各种移动设备能够更加完美地展示软件界面，如图1-27所示。
图1-27 热门标签布局
1.4.6 抽屉式布局
抽屉式布局又可以称为侧边栏式布局，它主要是将功能菜单放置在界面的两侧（通常是左侧）。在操作时，用户可以像打开一个抽屉一样，将功能菜单从界面的侧边栏中抽出来，拉到手机屏幕中。
抽屉式布局分为以下两种模式。
（1）列表式：如“美团外卖”的小程序订餐界面中，就是采用左侧抽屉列表式布局模式，用户可以在左侧列表中选择外卖品类，在右侧列表中查看菜单，如图1-28所示。
图1-28 列表式抽屉布局
（2）图标卡片式：如“天天果园优选”的“分类”页面中，就是采用的就是右侧图标卡片抽屉式布局模式，用户在分类列表中选择相应的种类后，即可在右侧的菜单栏目中查看分类的具体内容，如图1-29所示。
图1-29 图标卡片式抽屉布局
1.4.7 分段菜单式布局
分段菜单式布局主要采用“文字＋下拉箭头”的方式来排列界面中的各种元素，设计者在某个按钮中隐藏更多的功能，让界面看起来简约却不简单。
如图1-30所示，在“美团外卖”小程序的美食界面中，就安排了4个分段菜单，点击相应的下拉箭头后，用户可以在展开的菜单中找到更多的功能。
图1-30 分段菜单式布局
1.4.8 底部导航栏布局
底部导航栏布局的设计比较方便，而且适合单手操作，很多设计师都会采用这种布局模式。
如图1-31所示，在同城旅游特价小程序的主界面底部，就有“首页”“分类”“商家”“购物车”以及“我的”5个导航按钮清晰。用户可以点击不同按钮切换至相应的页面，操作十分方便，功能分布也比较合理。
图1-31 底部导航栏布局
1.4.9 掌握图表信息布局设计方法
图表信息布局可以让界面显得更加商务范，这也是商业、金融类新媒体界面中最常见的布局方式。
布局优点｜图表要素显示完整，标题区比较突出，而且用户可以从上到下进行阅读，体验比较顺畅。
布局缺点｜ 虽然标题区突出，但由于标题过多，因此造成了单个标题不够突出，而且信息量太多而APP的空间却有限，难以展示所有数据。
例如，倍康H5界面采用了卡通形式做出了图表，并适当拟人化，运用会话框来说明倍康的相关数据，让人直接明了地看出倍康受欢迎的程度，如图1-32所示。
图1-32 倍康H5界面
专家指点
在新媒体界面中应用各种素材图像时，设计者可以适当地对图片进行一定的色彩或特效处理，使其在新媒体界面中的展示效果更加突出，为用户带来更好的视觉体验。如调整图像透明度、混合模式或者虚化图像等，都是一些不错的图像处理方式。
1.4.10 掌握界面细节设计方法
新媒体界面在细节设计上的完善，主要从以下方面入手，如图1-33所示。
图1-33 界面细节完善方法
当内容创新成为一件较为困难的事情时，着重细节设计就成为了新媒体界面能够力挽狂澜的主要方式，通过完美的细节获得用户的好感，从而提高浏览量与点击率。在以上所示的方面中，有3个细节最为关键，下面针对这3个细节进行深入分析。
1. 适当借鉴
随着新媒体的发展，各类界面的数量也逐渐增多，但大部分的界面功能比较单一，由于模仿导致独特的模式变得大众化，但适当借鉴确是一种明智的选择。
问题体现｜ 大部分的开发者都会去模仿其他应用界面的相关设计，但是被模仿的那些设计却并一定是最为优秀或独特的。
相关对策｜ 始终保持适当的借鉴，可以从别人的界面设计中获得一些想法，同时将自身的创意融入其中，打造出具体自身特点优势的界面。
2. 界面运作
在一个界面中，界面运作结果应当是保持一致的。这里的一致性主要是指形式上的一致，以界面中的列表框为例，如果用户双击其中的某项，使得某些结果发生，那么用户双击其他任何列表框中的同一项，都应该有同样的结果，这种结果就是一致性的体现。
保持界面运作结果的一致性对于新媒体的长期发展是有利的，尤其是培养用户的使用习惯，相关的分析如下。
问题体现｜ 追求创意的界面如果在运作的一致性上是不协调的，那么即使标新立异也可能无法得到用户的认可。
相关对策｜ 在细节上使界面保持良好的一致性运作模式，通过培养用户的使用习惯，可以降低获得核心用户的直接成本。
3. 界面布局
新媒体设计的特色体现往往就作用于界面布局，界面布局也是最能够直接展示特色的地方，具体的分析如下。
问题体现｜ 没有特色是各类新媒体界面普遍存在的问题，要想做到优异创新和差异制胜，不仅要求界面功能齐全，还要能从布局体现出新意。
相关对策｜ 界面布局需要多借鉴优秀作品，了解用户对于优秀布局的定义，从而在借鉴的同时保持创新。
1.4.11 新媒体界面的布局原则
在设计新媒体界面时，还需要掌握一些布局原则，以便为用户带来更好的视觉感受。
1. 内容的排列次序合理
当界面中展现的信息内容比较多时，应尽量按照先后次序进行合理排序，将重要的选项或内容放在主界面中，把用户最常用、最喜欢的功能排在前面，把一些比较少用但又很重要的功能排在后面，把一些可有可无的功能放入隐藏菜单中。
如图1-34所示，影匠摄影小程序的主界面会根据用户的喜好，将摄影风格分成几大类，比如外景风格、室内风格等，用户直接在主界面点击即可查看详情。
图1-34 影匠摄影小程序的主界面
2. 突出重要条目
某些界面有一些重要条目，在布局时应尽量将其放置在界面的突出位置，如顶端或者底部的中间位置处。
如图1-35所示，微博的主要功能就是发送微博，因此在底部导航栏中间位置放置了一个“＋”号按钮，点击该按钮后，即可看到文字、拍摄、相册、直播、光影秀、头条文章、签到、点评等导航按钮（此处也满足先后次序的原则），而且这里还采用了点聚式布局模式。
图1-35 微博界面
另外，对于一些比较重要的信息，如消息、提示、通知等，应在界面中的显目位置上进行展示，使用户可以快速查看。
3. 界面长度要适当
主页最好不宜过长，而且每个子界面的长度也要适当。当然，如果某些特别的界面内容过长，可以在界面中的某个固定位置设置一个“返回主界面”按钮或者“内容列表”菜单，让用户可以一键返回主界面或者到达某个特定内容的位置。
如图1-36所示，新华社小程序中由于有很多的新闻内容，信息量很大，在子页面的右下角设置了一个“返回主界面”按钮，方便正在浏览的用户进行相关操作。
图1-36 新华社小程序界面
对于专门设置的一些导航菜单，则页面应尽可能短小，要让用户一眼即可看完其中的内容。尤其要避免在导航菜单中使用滚屏，否则即使设计者花了很多心思在其中添加了很多功能，用户可能还没看完就没耐心继续往下翻了。