第四章 移动端界面版式设计（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 4 移动端界面版式设计 4 移动端界面版式设计 4.1移动端界面常见版式 随着信息化程度的提高，界面内容的综合性也越来越强，怎样才能把界面建设好呢？首先，在设计前要对制作对象进行整体地构造，包括文字的排版、色彩的设计、图片的规划、表格的布局……。其次，就是对每个页面要合理地编排和布局，也就是这里所说的版面布局。版面布局是一种能够让浏览者清楚、容易地理解作品传达信息的方式，也是一种将不同介质上的不同元素巧妙的排列方式。最后，就是要正确看待移动端内容，不能把所有的界面都用固定样式进行制作，而是要根据具体的内容来安排所制作的界面版面格式。 所谓的布局是指将界面看成报纸、杂志或者某个门面进行布局、整理和排版。虽然今天的移动端布局是千变万化的，但依然有规律可循。合理的布局设计可以使界面井然有序，用户可以快捷、便利地找到所需信息，并进行相应的操作，产品的交互和信息的传递都能顺畅通达。下面来看看移动端界面设计中常用到的布局。 4 列表是最常用的布局之一，适用于含信息量或文字较多的页面，便于在一个页面上展示同一个级别的分类模块。图4-1所示的微信首页就是典型的列表版式。目前，智能手机通常采用竖屏显示，而文字是横向排列，因此横向列表居多，纵向列表较少。列表版式在视觉上整齐美观，信息明确、方便用户查找选择、机动性强、触发性强，如图4-2、图4-3所示。 移动端界面版式设计 4.1.1列表式布局 4 宫格，顾名思义有分格的含义，在展现形式上，是分割成相应的格子，每一宫格内包含相同的元素，例如：（缩略）图片、标题文字、详情等。通过单击宫格，可跳转到下一级页面（详情页）。优点是宫格的尺寸和数量可以根据页面内容灵活调整，通常采用九宫格排列（图4-4九宫格版式）。宫格式页面便于方便快速查找和最大限度展示图片；缺点是菜单之间的跳转往往需要回到最初页面，如图4-5、图4-6所示。 移动端界面版式设计 4.1.2.宫格式布局 4 卡片通常是指页面中包含一定图片或文本信息长方形，其通常作为查看更多详细信息的一个入口，如图4-7所示。因为其样式看起来如同真实世界中的卡片一样，由此而得名。卡片式设计可以应用于各种环境，在占用较少屏幕空间的情况下将信息有组织的划分到不同的区域中，有助于快速浏览，让用户更快地找到其感兴趣的部分，如图4-8、图4-9所示。 移动端界面版式设计 4.1.3卡片式布局 4 瀑布流式布局，是比较流行的一种页面布局方式，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，如图4-10所示。页面瀑布流的加载方式避免了用户单击翻页的操作。页面定宽而不定高的设计让页面区别于传统的页面布局，巧妙地利用视线的流动，既缓解了视觉疲劳，同时给人信息量庞大的感觉。这种页面版式常见于短视频、新闻类App，如图4-11、图4-12所示。 移动端界面版式设计 4.1.4瀑布流式布局 4 多面板，适合分类和内容都比较多的页面。多面板页面优点是可以使用户对内容及分类进行整体了解，减少整体跳转的层级；缺点则是页面比较拥挤，信息量较大，容易产生视觉疲劳。如图4-13～图4-15所示。 移动端界面版式设计 4.1.5 多面板布局 4 旋转木马式也称为轮播式，页面只重点展示一个对象，但可以通过滑动按顺序查看更多内容，如图4-16所示。这种版式单页面内容展示性强，容易吸引用户聚焦，线性的浏览方式有顺畅感、方向感，但受屏幕宽度限制，可显示的数量有限，同时不能跳跃性地查看间隔的内容，只能按顺序查看相邻的页面，如图4-17所示。 移动端界面版式设计 4.1.6旋转木马式布局 4 弹出框很常见，也属于布局设计的一种。弹出框把内容隐藏，仅在需要的时候