移动端页面设计课件（移动端界面网站设计）

移动端设计模式——常见的几种导航形式

下面介绍移动端几种常见导航形式。标签式导航（也叫Tab导航）大多数app会选择标签式导航，标签式导航结构如下图所示。底部标签导航是iOS页面布局中比较推崇的一种导航方式。而顶部标签式导航是安卓常用的导航模式，它可以避免导航与底部虚拟按钮之间发生冲突，引起误操作。

APP 标签式导航——最常见、最保险 标签导航位于页面底部，通常包含5个标签是比较合适的数量。这种导航是非常常见的，如果你的应用需要用户频繁的在不同分页切换，可以采用这种导航。它的缺点是会占用一定高度的空间。 App 抽屉式导航——适合信息层级多的界面设计 抽屉式导航常常与标签导航结合使用。

目前，移动端界面的一级导航设计主要有几种：底部布局的标签导航；顶部布局的标签导航；舵式导航；4抽屉式导航；宫格式导航；等等。二级导航设计常见的有：分段式导航；底部+顶部布局的标签导航；列表导航；图标式导航；下拉菜单式导航等。

列表式导航也是一种十分常见的导航模式，纯粹的列表导航很少见，一般都是搭配着别的导航模式一起使用，大多作为二级导航。列表中可以放置图片、标题或者详情文字等来展示信息，列表本身是一个传达信息效率很高的载体，因此使用列表的时候要注意，每个列表所占的屏幕空间，以及每屏能显示多少条列表等。

主要导航模式——第三种：选项卡式 选项卡式导航，在不同的操作系统有不同的表现和规则。所以在设计时需要为不同的操作系统专门定义选项卡的位置。 Ios、webOS和Blackberry（黑莓）系列都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作。

标签导航 （标签导航位于页面底部 ，标签的分类最好在5个以内，比如微博、微信、淘宝）优点：清楚当前所在的入口位置；直接展现最重要入口的内容信息。缺点：功能入口过多时，该模式显得笨重不实用。

移动端H5页面的设计稿尺寸(上)

经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。

H5页面设计尺寸的规范是根据手机屏幕尺寸来制定的，主要目的是确保页面内容在不同手机上都能完整呈现。手机屏幕尺寸和比例不一，因此设计时需要考虑内容的优先级，将重要的元素放在安全区内，比如背景图和关键文字信息。而边缘部分则划分为出血区，这部分内容可以被裁剪或用于遮挡手机背景。

尚界H5的尺寸通常指的是在移动端网页设计中的适配规范。以下是具体细节：视口宽度：主流移动设备屏幕宽度集中在375px（iPhone 6/7/8）至414px（iPhone 6/7/8 Plus）之间，设计时常以375px为基准宽度进行布局。

你好 手机像素尺寸，现在市场上大部分是：720*1280px，当然，还有680*1008；苹果的不知道。五六尺寸是：360*640 建议以：720*1280px为准来设计手机版面，ps：避免做到手机上以后图片失真。

一般安全区内框的尺寸是375X603PX，但在制作上又是另外一回事了，作铺满内框的图要按照这个尺寸的2倍大小去做。出血区也就是外框尺寸是422X748PX，作铺满外框的图要按照这个尺寸的2倍大小去做。这个你可以参考下意派Epub360的画布标准，这个工具是专业级的H5工具。

网页尺寸的设计标准因设备类型而异，主要分为PC端和移动端两大类：PC端网页的设计尺寸 标准设计稿尺寸：宽度通常为1920px，高度则建议最小为1080px。这一尺寸能够适配大多数PC显示器的分辨率，确保网页内容在不同设备上都能良好展示。

UI中的H5页面如何设计?

1、在设计过程中，需不断添加细节、按钮、背景质感等，以营造整体氛围感。这些细节共同构成了一个良好的页面体验。注意色彩搭配、字体选择、图标设计等细节元素，确保整体风格的统一和美观。优化与测试 完成设计后，需进行多次预览和测试，确保页面在不同设备和浏览器上的兼容性和显示效果。

2、H5页面设计应遵循以下设计规范： 响应式设计 确保页面在不同设备上（如手机、平板、电脑）均能良好显示，使用百分比、视口单位（vw、vh）等布局方法，使页面元素适应不同屏幕尺寸。 视觉设计 色彩：选择合适的色彩搭配，保持整体风格一致，避免过于花哨。

3、自己设计，自己完成方式描述：这种方式需要企业内部的员工自行完成H5专题页面的设计。首先，需要产品经理或运营经理制作原型图，然后UI设计师根据原型图进行UI设计，最后由技术人员完成页面的开发。优点：能够完全按照企业的需求和想法进行定制，具有较高的灵活性和个性化。

4、明确页面的需求和目标，这是制作H5页面的第一步。进行结构设计、UI设计和交互设计，确保页面在视觉和功能上都满足用户需求。设计完成后，还需进行调试和优化，确保H5页面在各种设备和浏览器上都能良好地展示和运行。遵循标准：遵循W3C标准编写H5页面至关重要，以确保页面的质量和可访问性。

移动页面如何设计

侧边栏导航通过滑动手势或菜单按钮唤出，适用于功能较多、信息层级较深的应用（如Gmail、YouTube）。其优势在于可隐藏次要功能，释放主界面空间，同时支持个性化功能定制。设计时需确保手势触发逻辑清晰，避免用户误操作。宫格式导航将功能或内容按网格排列，每个方格代表一个模块，适用于电商类应用、社交平台及内容密集型应用。

手机端网页可以用个PS进行设计和切图，最后用div CSS html5 JS完成。

移动端页面设计：适配屏幕特性，强化视觉体验分辨率适配与内容精简移动端屏幕尺寸有限，需优先保证内容清晰展示且避免冗余。设计前需明确目标用户设备的主流分辨率范围（如iOS/Android常见尺寸），采用响应式布局或自适应设计，确保不同设备下页面结构稳定。

按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone4s，大一点的6plus也不会过于空旷。不过在切图的时候要注意，由于iPhone6plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

让你的整个网页都适合在移动端上浏览 相比在移动端上直接操作桌面版网页，经过适配的移动网页会大大方便用户的操作使用。将主操作按钮设计得更友好 手机用户很容易忽视手机界面上的元素，所以主操作按钮要放在显要位置。

界面设计尺寸及栏高度 主流iOS设备尺寸 iPhone SE（4英寸）iPhone 6s/7/8（7英寸）iPhone 6s/7/8 Plus（5英寸）iPhone X（8英寸）这些设备均采用Retina视网膜屏幕，其中iPhone 6s/7/8 Plus和iPhone X采用3倍率分辨率，其他设备采用2倍率分辨率。

图解iPhoneX移动端UI适配设计

1、针对iPhone X的设计，我们首先要选择合适的屏幕分辨率。虽然官方文档中标注的是@1x分辨率，但考虑到设计师的工作效率和输出质量，建议选择@2x分辨率为标准，即以750*1334px进行视觉设计。向下兼容：通过微调宽度与高度，可以向下兼容窄屏640*1136px的设备，输出@2x资源包。

2、启动App 对于一些老项目，在启动图上，可能没有采用xib或者SB进行适配的，所以可能会出现如图一，这样导致整个项目运行就会不能完全贴合。图一 解决办法，在项目设置里面直接用LaunchScreen.xib或者LaunchScreen.storyboard进行配置启动图，这样项目就会完整显示了。如图二 图二 程序进到程序的首页。

3、注意：在进行iphonex设计的时候我们依然可以采用熟悉的iphone7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

4、也就是说像下图左侧的尝试用黑栏让刘海区域融为一体，或者用黑栏突出底部的HOme唤出滑条都是苹果认为错误的UI设计方案。苹果称大部分应用标准的系统UI元素的应用都会自动适应iPhone X的全新显示区域，背景元素将自动延展覆盖这些区域。

5、手机UI界面的常规尺寸因设备和操作系统不同而有所差异。iPhone设备的UI设计尺寸包括iPhone13proMax的428×926dp，iPhone6/7/8的375×667pt，以及iPhoneX/Xs/11Pro的375×812pt。这些尺寸通常以点（pt）或密度无关像素（dp）为单位。