移动UI设计学习总结

以下是我阅读书本得到的一些知识方面的总结：

*UI设计常识**

1.手机界面的构成被分为几个标准的信息区域：状态栏**，标题区，功能操作区，导航栏。**

2.APP运行在手机操作系统的软件环境中，其UI设计应该基于这个
应用平台的整体风格，这样有利于产品的整合。

3.手机界面效果的规范性：APP UI的色彩及风格与系统界面统一，即APP总体的色彩应该接近或者类似系统界面的总体色调，

4.手机界面效果的个性化：基于软件本身特征和用途所考虑。

5.Android操作系统：

a.APP UI设计的基本原则是拥有漂亮的界面，设计者可以设计精心的动画效果或者及时的音效给用户带来更加愉悦的使用体验。

b.可以通过直接触屏操作APP中的对象，这样有助于降低用户完成任务时的认真难度进一步提高用户对APP的满意度。

c.设计者应该尽量使用图片来表达信息，因为图片比文字更容易理解，更加吸引用户注意力。

6.苹果iOS系统：

a.便捷的操作：iOS操作系统中的APP应用通常具有漂亮的外观和程式化的梯度，操作非常便捷。

b.清晰明朗的结构，直观的导航控制：应该尽量将所有的导航操作都安排在一个分层格式中，使用户可以随时看到当前的位置。

c.设计当前标记和后退按钮：便于用户及时了解自己所出的位置，清楚每一个界面的主要功能和特点，并且可以快速退出当前界面，返回APP主界面。

7.微软Windows Phone系统：
它采用Metro风格的用户界面，设计原则是优雅，美观，现代，简约，完全平面化。

8.APP UI设计的流程分析：

a.分析阶段：需求分析，用户场景模拟，竞品分析等等。

b.设计阶段：采用面向场景，面向事件，面向对象的设计方法。

c.调研阶段：邀请各方人士对几套设计方案进行评定，优胜劣汰，选取用户体验最好的方案。

d.验证与改进阶段：对APP的界面和功能进行评估，以确定其是否满足需求，并对不足之处进行改进。

界面的布局

1.正确的布局：

a.竖向排列：常用来展示功能目录，产品类别等并列元素，列表的长度可以无限向下延伸，用户可以通过上下滑动屏幕查看更多的内容。

b.横向排列布局：在元素数量较少的移动UI中，特别适合采用横向排列来进行布局，横向排列布局主要是横向展示各种并列元素，用户可以左右滑动手机屏幕或者点击左右箭头按钮来查看更多的内容，但这种方式需要用户进行主动探索，体验性一般。

c.九宫格排列布局

d.弹出框式布局：弹出框中可以隐藏很多内容，在用户需要的时候可以通过点击相应的按钮将其显示出来，主要作用是节省手机的屏幕空间。

e.热门标签布局：在移动UI设计中，搜索界面和分类界面通常会采用热门标签的布局方式，这种布局方式使得界面更加的语义化。

f.侧边栏式布局：可以通过纵向排列切换项解决栏目个数的问题，但是这些“抽屉”中的栏目却不能和主体内容同时出现在屏幕上，侧边栏式布局分为两种，一种是列表式布局，另一种是图标卡片式布局。

g.陈列馆式布局:主要是采用“图片+文字”的形式来排列APP中的各种元素，它可以很好地展现实时内容。它可以分为网格布局模式和轮盘布局模式。
网格布局模式：虽然视觉效果比较普通，但其结构清晰，功能分布十分明朗。
轮盘布局模式：用户可以是用手指来转动轮盘，以实现不同的功能，它可以给用户带来耳目一新的感觉。

h.分段菜单式布局：它主要采用“文字+下拉箭头”的方式来排列界面中的各种元素，可以在某个按钮中隐藏更多的功能，让界面简约而不简单。

i.转盘式布局：很多手机抽奖游戏经常采用这种布局方式。

j.导航栏置底式布局：例如手机淘宝，在其界面的底部有五个清晰的导航按钮，用户可以点击不同的按钮切换至相应的界面，操作十分便捷。

k.超级菜单式布局：用户只需要左右滑动屏幕，即可切换查看不同的类别，操作的连续性非常强，用户体验也很流畅。

l.导航栏置顶式布局

2.图标信息布局的设计方法：其可以让APP显得更加商务化，但是其也有优缺点，优点是图标要素显示完整，标题区比较突出，用户可以从上到下进行阅读，体验比较顺畅，缺点是虽然标题区突出，但是由于标题过多，造成单个标题不够突出，并且信息量太多而APP空间有限，难以展示所有数据。

3.界面细节的设计方法：当内容创新较为困难时，在细节上精益求精就成为APP能够出类拔萃的主要方式，通过细节的完美程度获得用户的好感。

有三个最关键的细节：

适当借鉴：始终保持适当借鉴可以从别人的APP运作中获得一些想法，同时将自身的创意融入其中，打造差异制胜的效果。
界面运作：在细节上使APP保持良好的一致性运作模式，通过培养用户的使用习惯，来降低获得核心用户的直接成本。
界面布局：界面布局要多借鉴佳作，了解大众对于优秀布局的定义，从而在借鉴别人的同时保持个人创新。

4.移动UI的布局规则：

a.统一的logo位置

b.合理的内容排列次序：当界面中展示的信息内容比较多时，应该尽量按照先后次序进行合理排序，将所有重要的选项或内容放在主界面中，将用户最常用，最喜欢的功能排在前面，将一些比较少用但又很重要的功能排在后面，将一些可有可无的功能放入隐藏菜单中。

c.突出的APP重要条目：布局时应该将APP的一些重要条目放在界面的突出位置，对于一些比较重要的信息，应该在APP界面中的醒目位置进行展示，使用户能够及时看到。

d.适当的界面长度：如果某些APP的内容过长，最好在界面中的某个固定位置设置“返回顶部”按钮或者“内容列表”菜单按钮，让用户可以一键回到页面顶部的特定位置。
对于专门设置的一些导航菜单，界面应尽可能的短小，让用户一眼就可以看完其中的内容。

把握UI的视觉特色

1.打造简洁与抽象美感：通过点，线，面等基本形状的元素构成，再加上纯净的色彩搭配，可使界面更加整洁，有条理，给用户带来赏心悦目的感觉。

2.营造趣味视觉画面：采用别出心裁的个性化排版设计，以赢得更多用户的青睐。

3.塑造华丽视觉效果：通过饱和的色彩和精美的质感来营造炫酷的整体视觉感受。

4.把握色彩的使用特点：对颜色的使用应该与APP以及其主题相契合。

提升UI的文字设计

1.字体设计合理：经过艺术设计的字体可以使APP UI中的信息更形象，更具有美感，在设计中，设计者必须让界面中的文字准确地被用户识别。

2.突出字体的层次：比如，可以用不同大小写字母搭配的界面文字。

3.不同字体大小的文字表示：不同字体大小的文字组合在一起，
可以更清晰地表达文字信息，更有助于用户快速抓住文字的重点，进而达到更吸引眼球的目的。

4.掌握文字间距：过于紧密的文字间距可能会带给用户更多地紧迫感，而过于稀疏的文字间距则会使文字显得断断续续，缺少连贯性，因此，在设计时，一定要把握好文字之间的间距。

5.合理使用文字的颜色设计：在文字内容中穿插不同的颜色或者增强文字与背景之间的颜色对比，使界面中的文字具有更强的表达能力，帮助用户更快的理解文字信息和浏览操作。

熟知移动UI中的按钮组件

1.常规按钮设计：其风格可以个性化，但他们最终都要用于确认，提交等功能的实现，不过通常情况下，按钮要和APP品牌保持统一的色彩和视觉风格。

2.编辑输入框设计

3.开关按钮设计：通常情况下，打开时为彩色，关闭时显示为灰色。

4.浏览模式设计：一般使用网格式浏览，图标呈网格式排列，这样的表示方法较为直观。

5.警告框设计

6.导航栏设计：导航栏左边按钮一般用于“返回”“取消”等操作，右侧按钮具有“搜索”“添加”等作用。

7.页面切换设计：在APP界面底部用于不同页面切换的组件。