移动端UI界面设计

1 初识移动端界面设计
7.登录界面的人性化 不管么样的软件，在登录界面都要有自己的特色。让用户等待是一个糟糕的行为。因此在用户等待过
程中，出现一些特殊的界面，让用户在看界面中慢慢忘记等待时间。这样用户并不会出现反感，反而因为 这种界面愿意等待一会。
1.1.2PDA及车载移动设备界面的设计特点
1、PDA（Personal Digital Assistant），又称为掌上电脑，可以帮助我们完成在移动中工作、学 习、娱乐等。PDA具有内容优先，为触摸而设计，流畅性，多通道设计，易学性，为中断而设计以及智能 有爱的界面设计特点。
3.设计分工 移动终端的设计是由团队共同完成。用户体验研究师，主要是为项目的总体性体验做决策的；交互设
计师，负责整个项目的交互流程，输出各阶段所需的产品原型，组织评审和讨论会，输出一个确认版的线 框图以及交互说明文档；视觉设计师（Graphic UI designer），简称GUI负责各种界面的视觉设计，根据 品牌形象及用户定位设计界面，完善交互设计，准确无误的实现视觉效果的设计；前端设计师，通过代码 保证产品功能最终实现，为设计提供有力保障。
1 初识移动端界面设计
5.好看的背景图片 在一个应用中背景图片可能就是伴随用户使用该应用的整个过程，它的重要性要超过开始画面。在平
面设计中，和谐、有效的图底关系可以让整个构图活跃起来，从而增强视觉冲击力和感染力。如图1-15、 图1-16所示。
6.优秀的排版布局 版面设计是对图像和文字等设计元素在空间中的安排，可以看作是内容在局部排版上的细化。 Windows Phone 的视图控制通过一种叫做“全景视图”的方式展开，如图1-17所示。实际上，4个视图
1 初识移动端界面设计
2.以简洁为主
通常手机网站在用户下载和浏览时要比PC端网站的速度慢，页面东西太复杂，会耗掉用户等 待网站加载的耐心，尤其是导航栏要简短清晰，能够快速地指引用户浏览网站的深层信息。对于 网站内容来说，简洁突出重点即可。
图1-1 简洁明了的操作界面 3.避免使用弹出窗口
无论是出于方便用户联系网站客服还是做些小广告的目的，都要尽可能避免弹出窗口的应用，添加这些窗 口，必然会影响用户体验，阻碍用户浏览网站的视线，进而占用用户流量，引起反感而放弃对网站的继续访问。
1 初识移动端界面设计
状态栏：即信号、运营商、电量等显示手机状态的区域，其高度为：40px 。 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px 。 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px。 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px。 （常见尺寸设置如图1-5、图1-6所示。）
3.字体 Android 上拉丁字母字体为： Droid Sans ，中文为：Droid Sans Fallback，是谷歌自己的字体，
与微软雅黑很像。
1 初识移动端界面设计
1.2.3Windows平台和设计的基本规范
Windows Phone(简称为WP)是微软于2010年10月21日正式发布的一款手机操作系统，采用了一种称为 Metro的用户界面(UI)，提倡回归传统的阅读体验，呈现的是动态悬浮功能的图标，可以上下滑动，并且图 标之间可以进行合并和互换顺序，最终达到自己爱好标准，另一大特点就是流畅的触摸手势操作，内容代 替布局的设计理念使得排版非常重要。如图1-12、图1-13所示对比效果。
1 初识移动端界面设计
1.2三大主流平台与设计规范
相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？下 面分别从iOS、Android和Windows移动设备的三大主流系统软件来认识移动设备的主流平台和设计的基本 规范。
1.2.1 ios平台与设计基本规范
1.尺寸及分辨率 iOS界面尺寸分为：320*480、640*960、640*1136三类；ipad界面尺寸为：1024*768、2048*1536，
①内容优先：界面布局应以内容为核心，提供符合用户期望的内容。 ②为触摸而设计：界面的交互系统以自然手势为基础建构，符合人体工学并保持一致性； ③转换输入方式：使用各种手机的设备特性和设计手段，减少在应用内的文字输入； ④多通道设计：发挥设备的多通道特性、协同的多通道界面和交互，让用户更有真实感和沉浸感； ⑤易学性：保持界面架构简单、明了，导航设计清晰易理解，操作简单可见，通过界面元素的表意和 界面提供的线索就能让用户清楚地知道其操作方式；
1.1移动端界面设计的特点
1.1 移动 端界面 设计的 特点
随着科技的发展，移动设备已经成为用户体验移动网络的重要媒介。 作为软件的界面是软件与用户交互的 最直接的层面，因此界面设计的视觉呈现效果决定用户对软件的第一印象。好的界面设计能够引导用户自己完成 相应的操作，起到良好的向导的作用。而现代移动设备的便携性与轻便性，决定移动界面也必须应具有自己的特 点。 1.1.1 手机移动端界面设计
Windows的元素有：桌面、图标、我的电脑、我的文档、网上邻居、回收站、Intenet explorer5.0、 开始菜单、任务栏。Windows中通常采用1366*768的尺寸，以此为例简单介绍一下这些元素的尺寸。
1 初识移动端界面设计
桌面高度：728px 任务栏高度为：40px 图标高度为：35px 开始菜单高度：698px Windows的界面设计较为扁平化，win8依旧在使用隐喻和模仿的手段增强每一块 “功能可见性”，没 有了精致繁复的细节，取代的是简练概况的扁平化趋势。 3.字体 字体是文字显示和打印的外观形式，它包括了文字的字样、风格和尺寸等方面的属性。 4.好的动态开始画面 开始画面是用户认识一个应用的开始，如果有一个好的开始画面可以给用户留下一个很好的印象， 如 图1-14所示Windows 8.1斗鱼启动画面。
个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中， 应用的内存消耗也不会过高。 2.界面组成元素
Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。Android中通常采用的 720*1280的尺寸设计，下面简单介绍在这个尺寸下这些元素的尺寸。
3.字体 在iPhone 界面上所采用的字体分中英文两种，其中英文为： HelveticaNeue ；对于中文的运用则根
据操作系统变化而变化，在Mac操作系统下采用的是黑体-简，在Win操作系统下采用的是华文黑体，所有字 体都采用双数字号。
1 初识移动端界面设计
4. 内部设计 （1）所有能点击的图片不得小于44px（Retina需要88px） （2）单独存在的部件必须是双数尺寸 （3）两倍图以@2x作为命名后缀 （4）充分考虑每个控制按钮在4种状态，如图1-7所示下的样式。
1 初识移动端界面设计
安卓8.0已经正式推出了，代号奥利奥(Oreo)，APP支持应用角标功能，不过并非数字，而是随着图标 颜色自适应的纯色圆形图案，如图1-10所示。在Pixel默认Launcher下，长按可显示详情，二级菜单支持向 左滑动来忽略通知。YouTube、Play Music已经支持画中画功能，可以实现应用第一浮层置顶，如图1-11所 示。
1.2.2 Android平台与设计基本规范 Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板
电脑，由Google公司和开放手机联盟领导及开发（图1-8）。
1 初识移动端界面设计
1.Android界面尺寸： 480*800、720*1280、1080*1920，Android比iPhone界面的尺寸要多 ，在设计时建议取用720*1280这
1 初识移动端界面设计
状态栏高度为：50px 导航栏高度为：96px 主菜单栏高度为：96px 内容区域高度为：1038px(1280-50-96-96=1038) Android一段时间内生产的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏 一样的：96px；Android为了在界面上区别于iOS，从Android4.0开始提出的一套HOLO的UI风格（图1-9）， 一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这 样的方式解决了现在很多手机去除实体键后在屏幕中显示而出现的双底栏的尴尬情景。
单位：像素72dpi，在设计时候并不需要每个尺寸都设计一套，一般采用640*960或者640*1136的尺寸来 设计。以iphone6和plus为例，有很多人采用iphone6即640*960的尺寸来设计，当然也可使用640×1136 的尺寸，对plus做单独的修改适配。 2.界面组成元素
iPhone的App界面一般由四个元素组成，分别是：状态栏(menu)、内容区域(content)。
1.1.3移动界面设计应注意的问题 1. 了解目标平台
目前移动终端设备的种类和型号繁多，了解目标平台的相关数据尤为重要。
1 初识移动端界面设计
2.采用一致的界面风格 一致的界面风格对用户来说很直观，不必要的差异常常会让用户感到不适应，应当尽量保持整个设计
的一致性。因此确立风格并且绘制草图十分重要（图1-4）。
5.网站操作简单化 对于新页面的打开方式，最好采用当前页面显示的方式来设计，以免新窗口造成网站资源占用的负担，
设置让用户快速找到页面出口进行跳转，避免不断地进行返回操作。
6.设置交互式的互动行为 用户在移动客户端都喜欢进行留言，分享功能。现在比较流行的微信公众号，往往一篇帖子都会造成
几千人的持续浏览、点赞或者分享内容，粉丝喜欢中这种参与行为，因为这种圈子拉动粉丝在持续发酵中， 用户慢慢都会舍不得离开。
移动端UI设计
目录
1 初识移动端界面设计 2 色彩在移动的界面中的应用
4 移动端界面设计的基础
5
不同的界面风格
3 移动端界面板式设计的原则
6
综合案例
1 初识移动端界面设计
1 初识移动端界面设计
本章将对移动端界面设计进行初步的阐述：包括移动端界面设计的特点、三大主流平台的设计原则、移动 端界面的尺寸标准、移动端界面色彩搭配原则、移动界面设计草图设计流程与各项准备工作，使读者较清晰的 了解移动界面的设计与制作。
1 初识移动端界面设计
4.手机网站图片要适配设置 从手机端浏览网站毕竟不如PC端灵活自如，虽然网站设计技术可以解决网站适应屏幕的问题，网站图
片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式（图1-2），而不 是用户点击单张图片的缩放模式，当然，手机网站使用的图片应该力求精准。
1 初识移动端界面设计
⑥为中断而设计：考虑应用的使用情境，确保在各个产出中断的情境下，让用户恢复之前的操作，保 持用户的劳动付出；
⑦智能有爱：给用户提供让他感到惊喜有趣的、智能高效的、贴心的设计。 2、如果说传统的车载界面体验非常糟糕，我想没人会否认。在科技如此发达的现代，我们的车载系 统仍与90年代所差不远。界面大多简陋，且有很多用不到的功能，需要的却又很难找到。 但也有一些车载设备功能分区明显，具有合理的菜单设置以及简约的设计风格，如图1-3所示。
手机交互界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则，简单归纳以下几点。
1.视觉效果很重要
任何一个设计都需要考虑视觉效果，人们大都喜欢美得东西，愿意在静静中享受这种美的感觉，因此，视觉 化元素就要体现出美的东西，因此许多移动端都会添加动画功能，或者一种情感交互功能，目的是给人们在视觉 上体现出不同画面感和兴趣感，提高关注度。
1.Windows界面尺寸： 800*600、1024*768、1280*600、1280*720、1280*768、1300*768、1366*768。Windows相比Android尺
寸要更多样化，在设计中推荐使用1366*768这个尺寸，相对而言显示更为舒适清晰，图片的显示也更适中 。 2.界面组成元素