移动端app设计指南（移动端app设计规范）

如何从零开始设计一款漂亮的移动APP

我13岁时开始学习平面设计。我从网上课程学会了设计网站，并习惯于全天使用Photoshop和Affinity Designer进行设计。那些经历教会了我如何像设计师那样思考。

我设计和开发应用程序将近有一年时间了。我参加了麻省理工学院的一个项目，与一个团队合作开发Universeaty。 两个月前，我开始研究一个新的应用程序-Crypto Price Tracker，这款APP我会在1月28日发布。

在这篇文章中，我将配合实例说明我在从事应用程序设计时的一步一步的过程。这应该对任何想学习或改进数字设计技能的人有所帮助。设计并不是全部了解如何使用设计软件，这篇文章也不会教你如何使用软件。 *** 上有数以百计的优质教程资源可以教你学习如何使用设计软件。想做好设计，你需要理解你的产品，熟知它的特点和功能，以及在设计时始终将终端用户放在心里。这就是这篇文章的意义所在。

设计过程：

1.为每个页面创建一个用户流程图。

2.创建/绘制线框图。

3.选择设计图案和调色板。

4.创建模型。

5.创建一个动画应用程序原型，并要求人们对其进行测试并提供反馈。

6.给出最后调整确定的模型，并交由开发按原型编写代码。

我们正式开始吧!

用户流程图

之一步是想出在你的应用程序中想实现的功能。一旦你有了你的想法，设计一个用户流程图。用户流程图是用户通过app/网站进行访问的一个非常高级的表示。

通常，用户流程图由三种形状组成。

矩形用于表示页面。

方块用于表示决策(例如，点击登录按钮，向左滑动，缩放)。

箭头将页面和决策连接在一起。

用户流程图是非常有用的，因为它们给出了应用程序如何运作的良好逻辑思路。

下面是我在开始设计应用程序时绘制的用户流程图。

主界面的用户流程图。

线框图

一旦你完成了每个页面的用户流程图并设计了用户路线，你就可以开始为所有页面做线框图了。线框图在本质上是以低保真度形式表示你的应用程序外观。基本上是图像，标签，按钮，和其它元素的一个草图或一个轮廓，这些元素都会在页面上做好布局和定位。你的应用程序的草图会体现它是如何使用的。

我使用UI模板打印的模板来绘制线框图。 它既可以节省时间，而且给为我提供了一个很好的画布来绘图和做笔记。

下面是我绘制的一个线框图例子。

主界面的线框图。

绘制好线框图后，你可以使用一款名为Pop的应用程序，并使用该应用程序将草图拍照存档，再通过「连结」(link to)的功能，将一张张草图串联起来，就能直接在手机屏幕上展示原型实际运作的样子。

设计图案和颜色调色板

这是我最喜欢的部分。这就像逛街一样。有大量的设计图案和调色板可供选择。我可以去选择我喜欢的，并感受它们给我带来的视觉效果。

寻找设计图案的更佳平台是Mobile Patterns和Pttrns。想要找到好的调色板，你可以去“ Color Hunt”平台。

创建模型

这是当你最终使用设计软件的时候了。设计意义上的模型是以高保真的形式来表示你的应用程序。这就像你将来实际使用时进入这个应用程序，然后你从这里面做一些截图。它看起来应该很现实，非常像真实的东西。

有一些用于创建模型的设计软件和工具。我使用Affinity designer来创建模型。iOS设计中最常用的工具是Sketch。

下面是我早期设计APP中的一些实例。

我使用了各种各样的调色板来进行设计。

我给我的朋友分享了最初的模型，以获得他们的反馈。很多人似乎更喜欢黄金渐变和黑色背景。

我愿意接受更多的反馈并尝试新的建议!想获得更好的用户体验的 *** 是多与终端用户交流。当你与终端用户交谈时，你会发现用户有很多奇妙的想法，而不是去疯狂地翻阅Dribbble或Behance。

所以我重新设计了模型并删除了背景图，因为生成它们在技术上是一个耗时的过程，除此之外，它们还降低了可读性。下面就是我重新设计模型后的样子。

黄金渐变和黑色背景看起来非常不错!

我对这套颜色方案、标签栏上的图标和整体布局都非常满意。我继续按照相同的设计指南设计了其余的页面。这是一个漫长而有趣的过程!

一旦我的页面准备就绪，我就在Adobe XD上 *** 了一个原型，并请几个朋友进行使用并给出反馈。

经过最终的润色，下面是我确定的设计界面。

app界面设计要注意哪些方面？

之一点：了解你的目标客户群的心态

1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看电影，聊聊八卦之类)：

这类的解决方案是设计的app更好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是 我们尽更大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的 *** 和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器 POP 、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计 （2）分区或分类 （3）帮用户做决策 （4）提高交互创新设计 （5）让人有爽 *** 和新奇感 （6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年 APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1）. 设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2）. 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

效。

（3）. 并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4）. 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5）. 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的 *** 最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

APP界面设计有哪些注意事项

众所周知，每一种颜色带给用户的视觉感受也是不同的。现在人们对手机的依赖程度，就能看到手机中APP的发展前景，那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计，主要讲讲APP界面设计的色彩选择与搭配。移动端UI界面中通常是需要选取主色，标准色，点晴色。它们各自代表的含义：

主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。

标准色：指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。

点晴色：通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。

常见的移动端UI界面的颜色搭配设计方案有：

1、邻近色配色法则：(色相环上邻近的颜色)

换句话说就是：选取色相环上邻近的几种颜色来搭配设计。

2、同色系配色法则

主要是指同色系配色(色相一致，饱和度不同)的配色方案：

主色和点晴色都在统一的色相上，给用户一种一致化的感受。

第三种是点亮色配色法则

主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。

第四种是中性色配色法则

用一些中性的色彩为基调搭配，弱化干扰。这种 *** 在移动端是最常见的 *** 。

中性色彩搭配

由黑色、白色及由黑白调和的各种深浅不同的灰色系列，称为无彩色系，也称为中性色。中性色不属于冷色调也不属于暖色调。黑白灰是常用到的三大中性色。

第五种是渐变色与纯色配色法则

这种大胆的配色方案也是2017年值得关注的一个风向标。丝路说这也是2017年移动端APP设计的一个趋势。学会更大胆地使用色彩会是一个不错的选择。

移动应用程序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全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。