移动端网页设计（移动端界面设计常识规范）

本文目录

• 移动端界面设计常识规范
• 移动端网页设计的原则有哪些

移动端界面设计常识规范

1.怎样规范设计移动端APP的UI
想要成为一个合格的APP开发UI设计师那就要跟紧移动时代的脚步，了解每一个UI设计师必须掌握的基本技巧才可以。

第一：要了解平台

正如同网页设计师需要了解HTML/CSS一样，作为移动端UI设计师的你应该了解移动端APP的架构。首先移动端设计的语言和网页设计的语言就不太一样，不同平台有着不同的编程语言和接口，移动端界面的构成也是无法使用CSS和标签来实现。

你需要深入阅读官方的开发文档，寻找更多有关APP的文档知识，明白APP的构成，编译方式，发布方式，了解设计的规则。这些东西不仅关系到你的应用开发好坏，还会影响系统的 稳定性，电池续航长短等多种因素。作为移动端UI设计师，你单了解简单的移动端设计是不够的。我们需要从长远的角度去思考问题。
第二：了解移动端的技术构成

对于一个UI设计师来说光了解平台的基本特征是不够的。接下来你需要了解它相关的技术构成：位置服务（wifi,GPS等），蓝牙（低功耗蓝牙技术），信号，前后摄像 头，麦克风，陀螺仪，位置传感器，加速度传感器，指纹扫描仪（iPhone 5s），眼动追踪技术，语音识别，人脸识别，等等等等。每一个新技术的背后以为着应用程序更多的可能性，交互设计、使用体验，甚至商业模式。

第三：发掘本地UI组件的开发潜质

每个移动操作系统中中总有着大量的本地UI组件，他们有着极大的自由度，方便你进行定制。你需求确切地知道他们的特征（尺寸，大小，功用），你可以为与你合作的开发者节省大量的工作时间。

第四：了解移动端的工作流程

安装SDK并运行，了解移动开发框架，比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境，因为这其中包含了移动开发所需的方方面面。

第五：了解移动端的界面模式

三大移动平台之间，有着相似之处，但是在深入探究他们的交互设计，会发现它们在理念上的巨大差异。作为一个设计师，你需要明白这些差异所在，以及它们是如何体现在实际案例中的。

不要只着眼于单一平台，三大平台都需要深入体验，每天至少都要把玩一下，并且最少要持续半年。在这个过程中，体会差异，并且将你觉得重要的、有代表性的、值得保存记录的界面截图留存。作为单一平台的狂热粉丝，你是做不好移动端UI设计师的。

第六：记录并解释你的UI设计

考虑到屏幕截图并不足以表现UI全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。
2.移动ui设计都有什么规则
原则一：内容优先

界面布局应以内容为核心，提供符合用户期望的内容。

原则二：为触摸而设计

界面的设计交互系统以自然手势为基础构建，符合人体工程学保存一致性。

原则三：转换输入方式

使用各种手机的设备特性和设计手段，减少在应用内的文字输入。

原则四：流畅性

保持应用交互的手指及手势的操作流、用户的注意流和界面反馈专场的流畅性。

原则五：多通道设计

发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感。

原则六：易学性

保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素表意的和界面提供的线索就能让用户清楚地知道其操作方式。

原则七：为中断而设计

考虑应用的使用情景，确保在各个产生出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。

原则八：智能有爱

给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。
3.怎样规范设计移动端APP的UI
怎样规范设计移动端APP的UI 规范目的/系统 1 遵循各平台的统一的界面规范，使最终设计出来的界面效果达到最理想状态 怎样规范设计移动端APP的UI 2 提高工作效率，UI/UE/开发编码三方人员相互之间协作更轻松，减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象 3 通过规范的方式来达到以用户为中心的目的，给用户呈现最佳效果和最优质的体验 4 目前使用最多的移动端操作系统平台有Android、IOS、Windows Phone 其他的操作系统包括BlackBerry 10、NokiaOS、Firefox 、Sailfish OS、Tizen、UbuntuTouch 怎样规范设计移动端APP的UI 设计尺寸/屏幕支持 1 IOS：宽度640PX 高度1136px 当然还需要自适应模式，以便以后的屏幕扩充需求。

IOS系统从iPhone4开始已经进入Retina（视网膜屏）时代，资源尺寸比例从原来的1X变为了2X。 2 Android：宽度720px 高度1280px 同样的设计成自适应模式，现在Android系统的屏幕也是越来越多样！ Android系统采用可自适应的屏幕支持，由于屏幕尺寸种类繁多，简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)四类 3 Web Mobile：宽度640px 高度960px 这个对于网页的浏览来说是最适合不过了的！ 细节模块（客户端/Web内嵌） 1 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，ios导航栏的ui图标格式为60px留白7px,Android系统的可以为：64px*48px留白8px 2 标签栏：让用户可以在不同子任务、视图、模式之间切换。

ios系统Tab Bar:98px Android系统Tab Bar:96px 3 工具栏：放置当前屏幕或者视图下对相关对象的操作按钮。 ios系统Tab Bar:88px Android系统Tab Bar:96px 4 为了能够让用户有更好更直观的体验，资源需要有各种状态。

5 列表：无论哪种形式列表，单行列表高度必须是用户手指接触的最佳值 ios系统Height 88px Android系统Height 96px 6 字体： IOS：默认字体 英文 HelveticalNeue 中文 黑体 Android：默认字体 Droidsans fallback 是谷歌自己的字体，与微软雅黑很像 7 字号：以下图IOS为例子 我的音乐：34 px 我的、淘歌、发现： 30 px Muxx 34 px 本地音乐 30 px 泡沫、邓紫棋 24px 8 桌面ICON： 根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。 9 细节模块（Web内嵌）：细节最为重要，只有好的内容和完美的细节才能吸引住浏览者的关注！所以在制作的过程中也需要更加的关注！ 转载。
4.手机UI设计有哪些规范
这是创想设计学院的回答。

手机UI的规范分为安卓和ios的，所以内容比较多。截几张图，iphone的，可以参考一下。 如果需要文档，可以加q群：527+963+152，找老师要文档即可。

希望能帮到你，谢谢。

移动端网页设计的原则有哪些

1、菜单简洁明了

在移动端网页设计中，因屏幕大小有限，无法设置过多内容，并且在移动设备或平板电脑中用户会厌烦滚动大型的菜单栏或点击数量众多的子菜单，因而菜单栏应简洁明了，有简练的产品、服务概述，这样会缩小用户的查找范围，对进一步信息进行点击或利用搜索功能筛选。

2、表单简短贴心

移动端网页设计时应考虑到用户时间，表单应简短贴心，在表单中诸如电话号码、卡片类型和发卡机构是可选项，用户可根据自身情况选择填写即可，以此来建立用户对网站的信任。比如表单只是用户用来订阅电子报，仅需登记用户姓名和邮箱即可;若是支付表单，应省略不必要字段，以此来增加网站安全度。

3、简化表单字段

设计表单时应考虑到表单字段数，减少用户输入字数;也要尽量将表单做的清晰明了，使必填项和可选项一目了然。而表单字段可以采用多种类型，如下拉式、复选框式以及日历式。同时在用户输入支付信息、物流信息以及预订行程时，这些类型的字段都能派的上用场，以及便于回头用户更便捷地应用自动填写功能，缩短购物过程，并为不愿注册账号的新用户提供访客支付选项。

4、通过行为召唤组件(CTAs)吸引用户眼球

行为召唤组件在移动网页中尤为重要，在设计移动网页时，尽可能将行为召唤组件放在最显眼的黄金位置，相比电脑端用户，会让移动端用户访问网站目的更加明确。同时在理想情况下，可以将行为召唤组件放置在页眉上方，用突出的颜色或字体显示，在合理范围内让它们更加醒目，并清晰地表达其内容。

5、提供用户所需的搜索结果

在设计时，应设置搜索功能，在搜索时在第一页就显示出用户所需的搜索结果，在搜索完成后，为用户再提供一些筛选条件，如价格、相关度、畅销商品等，以便用户筛选出最适合的结果。因为一些移动用户在访问网页时目的十分明确，很少在模糊菜单或一页又一页的商品间徘徊。

关于移动端网页设计的原则有哪些，环球青藤小编就和您分享到这里了。如果您对网站设计、页面排版、图像处理方面比较感兴趣，希望分享的这篇文章能够对您有所帮助。如若您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。