手机交互界面策划书

⑴ 手机界面设计的三大原则

移动APP里面的每一个UI界面都是这个App的门面，尤其是主界面，看上去干净整洁清爽宜人容易操作，那么你的App就成功了一半。这也反映出了你这个开发团队的基本审美素质和设计理念。

图片

我们都知道，设计一套完整的APP UI界面其实是比较复杂的，从需求分析到市场定位，从草稿到拟方案，从创意元素的组合到想法沉淀，从设计规范到突破传统，从纸上到电脑上，从个人到团队，或者从团队到个人，从素材收集到素材处理，从0思路到偶然等等，其实设计一个APP会碰到太多太多的问题，

所以要求我们移动APP设计者必须按照下面的三大准则和八项标准来设计。

【手机APPUI界面设计】三大准则：

（1）不乱用颜色。一个页面内不要超过3种颜色

（2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？

（3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。

图片

【手机APPUI界面设计】八项交互标准：

1.色彩舒适度

一个第一眼看上去就杂七杂八色彩，或者完全没有主次之分的简洁，或者看上去就没有视觉舒适度的饱和度或者明暗度不搭调的色彩，我想它已经没法继续长久看下去了。因为人第一眼看到的，就是一个事物的颜色，才是形状。

2.文字的主次

任何设计作品都要传达信息传达思想，如果一套设计中字体乱啪啪，文字大小和文字粗细，间距行距都没有一个“主次逻辑”，我很难挖掘到自己想要的信息，不论设计是酷炫复杂的还是简洁清爽的，光能展现信息时远远不够的，信息文字的每一个细节，都决定了一个设计要传达的思想主次，记住，你是要引导别人去看，而不是别人引导你去设计。这世上没有一个真正定死的文字标准，但是最基本的，至少让别人看清你的文字是写的什么吧，所以，文字之间的不同色彩，也是能让文字主次突出的方面

3.信息可读性

有了文字基础，处理好每个模块的布局，色块，插图，背景等方面，会让你的信息有较强的可读性。别跟着你的爱好走：我喜欢酷炫，我喜欢简洁，我喜欢优雅，我喜欢二货。把设计作品中你最想传达的信息传达出去，就算某些信息被别人忽略了，你依然是成功的。如果用户连看都不想看，连最基本的信息都没法传达，那作品的任何风格，都只是口头吹嘘。你要定好你的目标用户，你想吃遍全中国乃至全世界，全行业？除非，没有除非了。

4.UI识别性

这一点在图标上味道非常浓，不论你这一点在图标上味道非常浓，不论你设计的是扁平化还是拟物化还是梵高风格，不一定要3秒看出图标的意思，也要让人欣赏这个图标美感的同时，大概“心里知道”，这个图标要传达个什么。一个网站banner的设计，一个页面的导航设计，都要考虑到识别性，你想传达这个图像的什么内涵？你这个图形的意图是什么？都是设计者需要考虑的。

图片

5.交互性与易用性

上面的工作都做得差不多了，剩下的就是使用了。不论是手机主题还是网站设计还是APP还是游戏，要让别人快速上手，能玩，能用，甚至用的简单，玩的简单，就算你采用银河系都没有的酷炫交互，或者采用地球上已经濒临灭绝的土逼设计，达到方便使用的优良品质，你的作品再牛逼到没法看，也有牛逼的地方能看。

6.思想，生活的传达

作品是什么样，一般能从另一个层面看出一些设计师对生活对工作对感情的态度和状态，所以别小看一个作品的力量，它可能就是传达你自己真实内心的一个媒介，可能你并未发现，但是旁观者已经发现你了。

所以说，融入生活得设计是比较难的，同时，也是最容易的，你是否把你最粗心最让人厌倦的一面暴露到设计作品中？是否把你最细致入微最耐人寻味的一面传达到用户心里？一张图就可以看出（当然这不代表全部啊，某些设计师的作品看几天你也看不出他是什么人过着什么生活的）

7.微小的细节和微小的创意

别说这个东西就是你创造的，因为上帝比你创造的还早。UI设计中一根线，一像素，色彩饱和度的细微差别，一个小渐变，一个字体的选择，画布的大小，用笔的粗细，这些小细节，虽然不是人人都能说得出，但是能第一眼“看在心里，感觉到骨子里”，所以就算不说，细节也是能让任何人第一时间感觉到的，别忽视每一个小细节，它说不定就是你成功的堡垒，也是一有机会就让你失败的利箭。

细节中，你就能诞生一些微小的创意，小创意创造大创意，没有细节，何谈创意？那就只是纸上谈兵，口说无凭。

8.生活中表现手法的引用

一个简单的视差，一个简单的坠落，一个简单的玻璃破碎，一个简单的树叶飘落，一张纸简单的角度摆设，一盆植物简单的远近拍摄，这些东西，都能创造你无穷的表现手法，当然，这也是比较难的，能将生活融入设计，是需要积攒的，不是一两天能体会到的。

⑵ 手机界面设计的主要内容

自然的人机交互方式向三维、多通道交互的方向发展，其设计原则是发掘用户在人机交互方面的不同需求，注重人的因素，以达到让用户享受人机交流的愉悦体验。手机交互设计将不同的交互体验进行综合，给智能手机的发展带来转变。 1、需求讲解
通过整理需求阶段的输出物向开发、测试、UI等进行讲解，使产品相关人员对产品的需求有一个清晰的理解。需求讲解会进行产品定位和方向的介绍与讨论，并对一些细节展开具体实现的研究分析。
2、原型设计
原型演示仅仅只是产品设计师表现想法的手段，但对模拟用户真实体验与产品可用性测试具有非常重要的作用。在原型中修改一些重要的的交互行为或布局等所花费时间成本较少，通常一个人就能对原型进行构建和维护，不会打断其他进度。原型设计能够在表现层将设计合成一个逻辑整体，能展现出未来交互的软件蓝图、功能和效果，获得较真实的感受，通过设计团队的不断讨论修改的基础上完善未来的设计思路。FaceUI就是这样深度了解用户需求后，使用Axure、Visio等工具形成交互文档与客户沟通，以确保之后的设计稿引导出良好的用户体验。
3、可用性测试
以用户为中心的设计注重用户体验，因此可用性测试就变得十分重要。可用性测试主要目的是：1.保证对用户体验有正确的预估；2.认识用户的真实期望和目的；3.在功能核心还能够以低廉成本加以修改的时候对设计进行修正；4.保证功能核心同人机界面之间的协调工作，减少BUG。在设计—测试—修改这个反复循环的流程中，可用性测试及时为该循环提供了可量化的指标。 一款手机应用或系统首先是通过界面将整体性格传递给用户，体现了界面上风格营造的氛围，属于产品的一种性格。视觉设计的姿态决定了用户对产品的观点、兴趣，乃至后面的使用情况。手机界面的视觉设计可以帮助产品的感性部分找到更多的共性，或者规避一些用户的可能抵触点。
1、风格确定
根据界面的总体风格的策划思路，结合界面其他元素的需要，对手机界面的整体风格进行考虑，以保证图标和整体效果的融合。风格鲜明的设计是手机界面设计的重要工作。目前，无论是引领风尚的iphone，还是市场新宠samsung，都推崇极简扁平化风格。
2、图标设计
图标功能：在图形设计之前，图标非常重要，图标的功能是我们进行图标造型设计的标准和依托。设计图标的目的是实用和美观，同时要考虑图标的隐喻性，它代表的意思必须是用户可知的、熟知的。
图标造型：图标一般先用illustrator进行绘制，然后photoshop做图标设计的后期效果处理。所有界面上同级、同类的图标要保证表现形式的统一，避免用户视觉上的紊乱。
3、色彩调配
由于手机本身的限制，在色彩的还原程度上有一定限制，因此在选用色彩时要根据使用的屏幕进行调节，方法就是将设计好的效果图导入相应的手机中，用该手机自带的图片浏览软件进行全屏效果查看或者请求开发人员帮助。

⑶ （转）设计一个语音交互界面(Voice User Interface)

此文为Medium上的一篇文章，搬运过来供自己和大家学习下。原文链接

https://medium.com/@xuuuwj/%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA%E8%AF%AD%E9%9F%B3%E4%BA%A4%E4%BA%92%E7%95%8C%E9%9D%A2-voice-user-interface-1-6364d4529a28

去年11月第一次接触VUI Design以来，已有三个多月，期间凭着网上的资料(主要是google designguideline\eros.com\设计师手记\论文)以及自己的UX知识，我尝试设计了三个项目： 一个买书的skill 、一款智能音箱语音交互游戏、 一个关于中国电信100M宽带业务的微信咨 询机器人 ，前两个项目做到原型为止，最后一个已经在微信公众号后台实现。但这三个项目的重点都被放在conversation design上，并不能算完整意义上的VUI。

本月刚刚读完  Cathy Pearl 的《语音用户界面设计》(《Designing Voice User Interface》) 和《Voice User Interface Design》(By Michael H. Cohen, James P. Giangola, Jennifer Balogh)，书中完整地讨论了VUI设计的基本原则、重要的技术模块以及用户测试等问题，帮助勾画出了一张比较完整的VUI Design全景图。

在接下来的文章中，我会尝试用一个happy path串连起由0到1设计一个语音交互界面的过程，希望能定义好每个小框架中的设计问题，然后把它们变作一种肌肉记忆。

By the way， 因为说话这件事情太本能了，所以我觉得设计VUI困难的一点在于怎样从用户思维中跳出来，让自己重新回到设计师的角色上：）

语音界面的优势主要体现在三个方面：一是速度，包括输入更方便、入口更浅、学习负担更小等；二是共时，比如允许多任务同时进行；三是探索性，更能激发用户的好奇心，提升用户体验。不过同时，也不要忘记语音交流是非常受场景、技术及用户习惯限制的一件事。

可以参考 Google-fit-quiz 里的问题，来验证VUI究竟是不是你的最佳选择。

在回答之前，我们需要先了解：1.用户进行语音交互的方式有哪些，2.VUI系统内部是如何运作的。

The Nielson Norman Group 将语音交互总结为以下屏幕优先、纯语音和语音优先三种模式：

📱 Screen-first Interaction（屏幕优先）:  Here, we start with an application designed primarily for screen, and voice controls are added afterwards to enhance the experience.（设计一个以屏幕显示为主的App, 为了提升用户体验，会加一些语音元素）

🗣  Voice-only Interaction（只有语音交互）:  Here there is no screen at all, and input and output is based on sound, such as a smart speaker.（VUI设备没有屏幕，输入和输出都要声音，比如智能扬声器）

💬 Voice-first Interaction（语音优先）:  This is where an app designed primarily for voice is enhanced through the addition of a screen to output information.（以语音为主要交互方式的App，输出信息在屏幕上显示，通过这种方式提升App体验）

屏幕优先 的情况下，最典型的代表就是手机语音助手，用户不仅可以通过语音，还可以通过键入、手势来进行操作，系统回复的内容也包含了语音、文本、图片、列表、链接等等。

纯语音交互 的代表之一是智能音箱，用户通过“唤醒”词，比如“ Alexa”，来开启VUI交互；另一个代表是电话客服，也就是交互式语音应答(Interactive Voice Response, IVR)，它可以通过电话线路理解人们的请求并指引用户完成相应的任务，比如预定机票、查询话费等。

可以把对话系统看作人机翻译机，接收人类的自然语言并把它翻译成计算机能懂的结构化语言，以便进行信息匹配与加工，最终再以自然语言的形式反馈给说话者，完成一次“沟通”。“沟通”的本质是通过对最优解的一步步预测，以生成一个匹配概率尽可能高的反馈，需要计算能力、算法与数据的背后支持。

具体情况如下图所示：

当用户对系统讲话(utterance)，系统会首先通过 语音识别(ASR) ①接收并解析语音，识别器可以提供多个可能的结果，即N-best list，从中为接收到的语音匹配最相似的词串文本(recognition hypothesis)，然后反馈给下一个自然 语言理解(NLU) ②模块。

理解自然语言，即系统通过对词法、句法、语义的分析，识别(identify)用户的意图(intent)或者用户言语所涉及的领域(domain)、实体(entities)，生成一个结构化的 语义表示*， 包括语言类型(陈述需求，询问属性，否定，选择疑问，等等)和条件信息(有什么条件、值是多少)。比如，“帮我查深圳的天气”这句话对应的语义表示为“inform(occasion=天气，location=深圳)”，其中“inform”代表“陈述需求”，括号里面的内容我们称之为slot-value pair。关于计算机是如何理解自然语言的，可以点击 这里 详细了解。

语义表示生成之后被转交给 对话管理器(DM) ③，由对话管理器来决定答复给用户什么以及怎样答复。

对话管理器是对话系统中很关键的一个模块，连结着一个或多个 知识库(Knowledge Base, KB) ④。通常包括：a.对话状态跟踪(dialogue state tracking)，比如追踪执行用户意图所需的信息是否完整；b.对话策略(dialogue policy)，即根据当前的状态 决策 下一步应该采取的最优动作，比如，是直接调用知识库(knowledge base)内容提供结果、询问特定限制条件、澄清或确认需求、还是开启相关的某个软件呢。

不同的对话系统，goal-driven system(比如任务型、问答型)和open-domain system(比如闲聊型)，对话管理器的任务、知识库内容也不同。

任务型对话的场景相对复杂，通常会与用户进行多伦对话，需要参数化请求并通过slots filling的形式持续跟踪对话，直到识别出用户意图、特征词、slot-value pairs，即系系统要执行的动作的类型和操作参数。

问答型则不需要考虑复杂的对话逻辑，通常一轮对话就可以解决，重点在于语义解析与实体匹配。

闲聊型包括检索模式和生成模式，检索式是利用网络中已有的大量对话语料来构建索引，从索引中查找可能的候选回复，而生成式则直接从大量的人人的对话中学习对话模型，然后利用对话模型“创作”回复。

对话管理器会根据当前的对话状态生成一个预期回复(intended response)，然后进入 自然语言生成(NLG) ⑤- 文本转语音(TTS) ⑥环节，把结构化的预期回复改造成自然语言，最终呈现给用户。

常见的说法是“系统形象(system persona)”，相当于产品的前端，即系统通过的①语音特征，语气、语调、音色、节奏等。你可以选择使用合成(synthesized)声音，也可以选择录制的(recorded)声音；

②话术，编写问候语、特殊应答、提示语等时的用词、长短句这些，来展现与品牌相符的性格特质，比如亲切or正式，主动or顺从。

一个好的system persona能够很自然地成为你编写对话时的参考条件：“在这种情况下，这个persona会说什么或做什么？”

VUI的交互方式与对话内容很难彻底分开讨论，但做这种尝试，有助于跳出用户视角，走进“黑盒子”中。

我倾向于将“交互方式”看作《Voice User Interface Design》中所言的“High-level design”，而将“对话内容”看作“Detailed design”。

“High-level design”关心的是怎样推动对话流畅地进行，让用户知晓系统的状态、任务进度等以便操作，比如系统在聆听、在期待收到指令、已离线等，可以理解为GUI中的弹窗、动效、视觉反馈等。

同时也为系统设计更好的规则，以便它做出更好的决策，比如在什么情况下需要向用户确认请求，可以理解为GUI设计中看不见的菱形判断框。

这些问题主要涉及到以下：

①对话模式设计

A.命令-控制式(command and control)，即用户想要说话时必须先唤醒系统，方式可以是使用唤醒词、手势触摸或者按键。一轮对话完毕，用户须再次唤醒系统以开启下一轮对话。

B.对话式，即在一段封闭的对话期间，比如完成某项特定的任务时，用户不必每一回合都唤醒系统，而是自然地进行话轮转换，在轮到用户说话时系统自动开启麦克风。

C.混合式，即命控式与对话式的结合，系统向用户提供明显的状态切换标识，比如使用声音标志(earcon)以表示某个状态的开始与结束。

②对话策略(dialog strategy)设计

包括：

A.对话框架设计，即对话组织策略

《Designing Voice User Interface》一书把对话框架分为：a.定向对话(directed dialog)，即系统主导对话，向用户询问非常具体的问题，以期望获得同样具体的答案；b.菜单层级结构(menu hierarchy)，即系统向用户提供一系列选择，一旦用户完成了菜单a的选择，系统会继续提供菜单b，直到完成用户的请求；c.混合推动(mixed-initiative)，即定向对话与菜单层级相混合，系统询问用户问题，也允许用户通过提供额外的信息来引导对话。

B.对话修补策略

技术并不完美，识别器可能还没有准备好接受呼叫者的话语，或者没有接收到说话者的语音，也可能响应时间太长 。用户也常常会突然扭转话题，或者提供太多信息。因此在正向推动对话之外，系统也必须配备处理这些情况的策略，以减少前功尽弃的概率。

a.错误恢复

可能出现的错误有以下四种：

·未检测到语音

·检测到语音，但没有识别

·正确识别语音，但无法处理

·部分语音识别错误

·延迟

一般有两种方法来处理这些情况，明确地说出来，最好能增加更多的细节让用户明白现在的状况，比如“抱歉，我没听懂，请说出您所在的城市和区域名称”，或者什么也不做。如何选择要取决于VUI系统的交互模式与用户场景。

b.万能指令

比如“帮助”、“停止”、“请重复一遍”、“退出”等等。设计时不仅要考虑用户可能的需要，也要考虑用户会怎样表达这些需要。

③条件阈值(threshold)设计

每个应用程序都会定义系统能承受的最大错误，对话系统也不例外，尤其是上文对交互流程的描述也向我们清晰地展示了，从用户、到技术模块、再到数据资源，VUI的运行充满了不确定性。

《Designing Voice User Interface》 一书建议我们考虑设置三种阈值：单个对话状态中的最大连续错误数（特定于状态的错误计数），全局计算的最大错误数，以及最大错误确认数。

牢记这一点便很容易理解Detailed design需要做什么，即深入到单条对话中，详细设计对话流程、辅助提示、以及异常情况处理方案。包括：

①对话设计

设计对话流程很像写剧本，即什么样的角色在什么情况下应该说什么话，不同之处在于对话系统的情节和部分角色是写定的。

各大平台上，Google、Amazon、Microsoft，都有对话设计的相关指导，可以通过 这篇汇总文章 来进一步了解。

②提示列表(prompt lists)

回想一下，人与人之间的沟通也要建立在共同知识的基础上，与机器对话也是一样。让用户了解系统能做什么、不能做什么、怎么做是对的等等，才能够实现高效率的对话。

这一点可以通过设计提示列表(prompt lists)来辅助实现，提示类型包括：

A.初始提示，

B.错误提示,

C.帮助提示，

D.特殊应答等等

提示的形式有多种，语音、文本、图像，甚至声音，都可以。

比如图中Google assistant采用带有文字的按钮来告诉我它能识别屏幕上的内容，而我只需点击或者说出指令即可；右边的两张图里，Google通过[视觉元素变换+“进入对话”“离开对话”的文字提示+音效(earcon)]来隐喻游戏的开始与结束。

Google在designguideline for Google assistant里总结了 他们运用在提示语(prompt)中的不同元素(types of conversational components) ，是一份非常好的参考。

设计过程其实与一般产品并无大异，需要考虑：

1). 用户研究结果。 包括用例、使用场景 、用户语言模式与心理模式等。可以参考博主@Lu的设计手记 《语音理财案例分析》 。

2). 业务场景与目标。 主要是据此确定功能列表、功能优先级、交互方式等。推荐网络AI社区的 《酒店语音助手实例教程》 。

特殊的是，人工智能产品的形态多种多样，设计师必须对于产品所依附的硬件设备、产品背后的数据与技术支持有所了解，以确定产品边界、发现设计机会、持续优化用户体验。因此也需要考虑：

3). 技术与硬件基础。

比如设备联网程度，ASR引擎是否允许你设置N-best列表、自定义语音终止超时的时长，系统的负载量等。

4). 数据资源。

比如当前资源是否能满足该功能，哪些数据会影响系统响应时间等。

人们往往通过语音识别准确度来评估应用程序的运行效果，这也许是最糟糕的度量方式。一个应用程序能达到90%的识别准确度，同时自动实现85%的业务呼叫；另一个应用程序达到97%的识别准确度，且自动实现40%的业务呼叫，前者就一定比后者更差或更好吗？

——《如何构建语音识别应用》( Bruce Balentine, David Morgen)

评估涉及到三个问题：

1.如何定义成功

需要与开发人员、客户共同完成，以方便确定哪些状态是可以衡量的，哪些不可以。尽可能将成功状态具体化、数字化。

以下使一些成功标准的示例：

·60%想要预定酒店的用户最终完成了预定。

·85%的用户在1个月内至少完成了20天的每日健康记录。

·播放歌曲的错误率低于15%。

——《语音用户界面设计》Cathy Pearl

2.可以通过什么来衡量

A.任务完成率

B.用户(在何处)(因为什么)流失率

C.使用时长

D.语音打断情况

E.高频异常情况

……

*如果不思考原因，以上所有衡量结果都不可用

3.如何获得衡量数据

A.在早期建立记录日志

B.转录用户呼叫记录

……

参考资料：

《语音用户界面设计》Cathy Pearl

《Voice User Interface Design》Michael H. Cohen, James P. Giangola, Jennifer Balogh

网络AI社区

Google Design Guideline

Cortana Dev Center

Nielsen Norman Group

https://voiceprinciples.com/

《周耀明：自然语言对话引擎》

机器之心

⑷ APP界面设计思路是怎样的

注重人机交互

人在操作手机时，主要以人的意识为主体，手机起到辅助作用。设计师应考虑到人与手机的各自特点，使得两者之间相互协调，从而使工作条件达到最优。在使用手机的过程中应尽量减少人的计算和记忆负担，从而有效地提高对手机的使用效率。

颜色搭配方案

色彩是APP界面设计中的重中之重，这关乎是否能够正确表现出产品气质和定位。主色决定了手机APP界面的整体设计风格，这个主色代表了产品的文化方向，同时也向用户传达了产品的情感。

在设计线框图之前，研发团队的每个人就应明确产品的定位，提炼出最贴切产品的主色。许多手机APP界面的主色都是选择了此款APP应用图标的主色，在不同界面中主色的面积会发生大小变化，可能会有同色系渐变界面，也可能出现同色的系功能图标，但主色的视觉效果依然是占主导地位的。

界面设计原则

①保证功能性和实用性。我们在对手机APP 界面进行设计时，需要考虑APP本身的使用特点，保证大多数用户都能获得使用体验，保证APP功能的合理性，这样的界面会使得用户操作更加方便流畅，也能相应地减少手机的运算负担。

②内涵丰富，寓意明确。设计时应在有限的二维空间中调整图形、文字、按键、符号等元素的位置关系和比例大小，增加对界面内容表达的准确性和界面操控的灵活性。

③图形简洁，易识别。设计师应考虑界面中的点、线、面的构成，界面既要做到简洁并具有概括性，使用户能更容易理解和接受;又要做到内容丰富，不让人感觉单调乏味。

以上就是APP界面设计思路分享，与传统PC桌面不同，手机屏幕的尺寸更加小巧操作，方式也已触控为主，APP界面设计不但要保证APP功能的完整性和合理性，又要保证APP的功能性和实用性，在保证其拥有流畅的操作感受的同时，满足人们的审美需求。

⑸ 策划007-App界面交互设计规范

在上篇 《策划006-APP界面设计风格》 确定下来后，产品经理（兼交互设计）还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前，拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧！

APP设计规范指对APP界面进行风格统一，对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要，约定设计规范可以减少产品、设计、前端的沟通成本；可以使界面设计整洁、统一，减少界面元素的重复设计；可以减少设计素材，控制安装包的大小。

APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

页面布局和交互规范上建议安卓、ios尽量统一，这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议，安卓和ios分别做专门的设计当然更好。在中小型项目来看，设计资源紧张的话可以考虑安卓和ios用同一个稿子，分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。

推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范：

安卓（720*1280px）：界面预览图、界面坐标图、标准界面的图标png文件

IOS（640*1136px）：界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

PS：界面坐标图指在设计已定稿的界面预览图上标注：界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

标准色规范：重要、一般、弱。标准色重要：重要颜色中一般不超过3种，这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon；而黑色用于重要级文字信息比如标题、正文等。标准色一般：都是相近的颜色，而且要比重要颜色弱，普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱：普遍用于背景色和不需要显眼的边角信息。

文字是APP主要信息的表现，尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式，用户使用APP也觉得毫无疲劳感，这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小，标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要：大字号普遍用于大标题、top导航，较小字号用在分割模块的标题上。标准字一般：主要用在大多数文字，比如正文。标准字弱：普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。

APP界面要给人简洁整齐，条理清晰感，依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距，或者固定某些界面元素的间距，让其他空间留空拉伸。为了满足屏幕分辨率较大的设备，有时甚至需要改变APP界面的页面布局。

五、弹层规范

弹层规范要注意分别设计安卓和ios的弹层，比如ios大多操作弹层由底部弹出，而安卓直接显示操作再页面中央，这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发；提示性弹层：弱提示性的应用系统的token飘字提示即可；需要强提示可以使用取消、确定的模块弹层；更强提示而且弹层需要承载一定操作的使用强引导弹层，右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

页面loading动画是APP界面必不可少的元素，增加loading可以给用户明确的反馈功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。

图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式：如安卓需要720*1280px标准页面的png图标格式；ios需要3个尺寸320*（1-3）倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态：如常态、选中态、点击态等。

按钮规范按状态分有：常态、点击态、不可点击态。按钮规范因不同功能和场景需要，设计不同的样式和颜色，在尺寸上也分有：长、中、短；而且按不同手机平台长中短尺寸也注意有所不同。

页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。

......

...

设计规范主要由设计童鞋来梳理，但必须要与前端开发、产品经理达成共识，严格遵守约定的规范，否则这个设计规范就毫无意义了。在制定设计规范过程中，产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范，保证设计规范考虑的更切合实际、更全面、更完整。

⑹ 以“吃鸡”手游为例，讲解如何进行游戏交互界面设计

本文首发于腾讯开发者平台（GAD）： http://gad.qq.com/article/detail/37659

我们使用以下流程，设计一款游戏的交互界面：

游戏界面不同于应用，同屏的元素特别多，我之前的文章里介绍到，可以用“分组”、“相关元素贴近”的方式，将繁多的元素整合，提高界面的可读性。

以上我们采用的是“平面”的组织方法，还有一种“立体”的组织方法，让我们安排和设计界面时更有条理，还不容易遗漏需求。

“吃鸡”手游界面，我们将其分成了以下层级，大家也可以按照喜好安排界面UI的分组：

排序是以“从底层到高层”的方式，例如第1层是放在最下面，其次是第2层，当层级之间的元素有重叠时，高层的元素遮挡低层的元素。

整理好了纵向的层级，我们就可以开始平面的规划。

这里，我就先以猪场的《终结者》为例，看看如何一步步地规划。

显而易见，红色热区颜色，越深越容易点击，适合放置最重要的操作。
根据这个原理，我们将需要放置的元素一个个地置入界面，从功能区域，然后再一步步细化。

市面上大部分射击手游基本都采用了这个设计，这个习惯也是从游戏机手柄上沿袭而来的。
此外，屏幕的两个牛角（左上角和右上角）也是比较可以舒服点击的区域。但是，“牛角区”适合“快速响应”，不太适合“精细点击”，如果此处同时存在2个或2个以上不同触控区域的功能，就会造成一些麻烦，下文也会介绍到。

除了移动和射击，但还有很多次级操作（例如：换弹药、调整身姿、狙击开镜等），作为重要的操作组成部分，要进入这两个区分“分一杯羹”。所以，我们为此特别划分了几个“特殊功能区”。另外，HP的显示
从设计的角度来看，不应该在此处置入过多细小的功能按钮，但这两块地方是手机上唯一的可以进行快速且精细点击的区域，这也是一种折中和妥协。

到这一步，我们已经完成了界面上几乎所有可以点击区域的规划了，其他位置都不太适合加入需要手指点击的功能或按钮了。

不同的场景下，显示的操作按钮也不同，有以下几个场景：

具体的细化在下文正式开始绘制原型图时介绍。

除了“操作”以外，显示的“信息”也很重要。
第2层特效层、第3层HUB层、第5层辅助信息层，这三层共同承担展示信息的任务，通过多种样式的反馈，可以让玩家快速了解当前游戏情况，得到很多游戏层无法获得的信息。

首先我们来看第5层辅助信息层，包含的内容有：

准星用于调整行动方向、观察周围和射击瞄准，非常重要，一般放置在界面正中心。
另外，几个需要操作时间的使用状态，也放在这个位置：

此外，辅助信息层里，还有一些文字的提示，如下图：

这两个层级是“附着”在游戏层上的，如果说游戏层是“真实”世界的话，这两个层级就是真实世界的抽象延伸，用于辅助我们获取由于感官局限（手机）而不能获取的信息。

有下列几个二级菜单：

游戏层：纯游戏画面，装备体现在人物模型上。

系统UI层：非游戏部分的UI，大部分游戏通用。

至此，几个层级的各自需求已经整理好了，就可以开始绘制正式的原型图绘图工作。

缕清了界面的层级，我们的原型绘制工作也会游刃有余。
建议大家在绘制的时候，采用“场景导入”的方法，就是假设实际在什么样的游戏环境下，相应的按钮应该如何排放。

“吃鸡”的大致游戏脉络为：

主要的核心是“生存”，为了生存，我们可以选择武装自己（搜房舔尸，获得更好的装备、充足补给）、杀人（观察、射击）、躲避杀戮（隐蔽、逃跑）、躲避毒圈（找圈、找掩体、开车、疾奔等）。

hit and run，打和跑。我们来看要如何实现打和跑：

控制视角区域，用于控制射击的准星的X轴、Y轴移动，人物的身位转向绑定准星的X轴。

其实界面的左右控制的不是同一个平面，如下图：

以上帝视角俯视着看，我们就能知道人物是如何“走”的：

向左、向右、向后分别执行左右平移、后退操作，但无法切换成跑步。
当触控区域在上图黄色范围内，进行前进动作（或侧前），中心圆点超过虚线范围后，可以变为跑步姿态。

加入了切换跳、蹲、趴三个动作，并在左边额外增加了一个射击按钮。

早期版本的跳、蹲、趴是一摞放在右边的，看起来很规整。但实际上，我们叠加上红色热区会发现，“趴”按钮所在的区域已经泛白，说明此按钮不是这么好点击了。所幸后面的及时修复了这个问题，及时调整了“趴”的位置。

由于射击按钮和控制视角区域重合，右手大拇指只有一根，那就无法像鼠标一样，无法实现精确定位的同时开枪射击了，这也是目前手游吃鸡最为被诟病的地方。

目前手机FPS游戏有下面几种操作方式：

这种方法，左手不用承担任何射击任务，可以自由行动；右手需要承担定位、射击两项任务。这也是PC的经典FPS操作方式，左手键盘右手鼠标，可以完全胜任。但是在手机上，右手需要多次的定位-射击-再定位-再射击，不甚其烦。

左手保持不变，右手变成了“射击同时定位”。这种方法也叫“追射”，准星咬着目标不放，优点是身体移动的同时可保持火力持续，反应速度快、灵活。

缺点也一样明显，“水龙头打开了就难关了”。AK等后坐力强的枪械，前几发子弹准度极高，但持续连射后弹道就飘忽不定，一般高手是采用连射3-4发，停片刻，再连射……但问题是：停顿的片刻间，松开手指后，射击按钮已经弹回原来位置，手指需要再次“寻找”射击按钮的位置，并再次定位，这片刻时间极其关键；同时，在高压力的对抗下，失误率提高，甚至会出现多次点不到射击按钮的情况，后果很严重。

相当于上一个方法——定位同时射击的“威力加强版”。右手完成定位后，不用“寻找”射击按钮，直接按压屏幕就可以射击，也可以边定位边射击，几乎可以做到和鼠标一样快。

但就这样也存在一个问题，按压的力度不好把握，时常会出现不小心“走火”，或是想射击时按得太轻了。
针对这个问题，我的想法是：

一旦3D-touch的手感被调制最优后，就完全可以去掉右手的射击按钮，让手机右侧变成一块“触控板”。

由于“吃鸡”的特点，各种“伏地魔”、“桥头收费站”、“卡毒圈”的玩法，使得“定点射击”也有了很大的价值：

定点射击的方式放弃了移动，将开枪的任务交给了左手（屏幕左边的射击按钮），右手全力负责定位，实现“精准爆头”、“远距离追射”，深受广大狙击手的喜爱。

号称最快的狙击方法，按住射击键不放开（开镜）、移动手指定位，松开手指（射击）。
速度快、定位准。但容错低，且只能单发，适合威力大（可以一击必杀）的狙击武器。

为了让大家能够开心地在手机吃鸡，大厂们使劲解数，努力提高玩家的体验，
现在“吃鸡”手游大热之际，各大外设厂商都纷纷推出各种“吃鸡专用”手柄。以个人之见：就和《王者荣耀》一样，手游要的就是不需要任何外设，玩家宁愿忍受着各种不便，也不要抱着一个累赘的手柄。

真的要有一个专用的外设，我觉得只要加一个“扳机键”专门用于射击就可以了：

有了“扳机键”，就可以实现边移动边瞄准边射击了，虽然还是比不上手柄，但手感已经UP很多了。扳机键可以整合到手机壳上，又方便携带。

除了射击和移动，操作区还有几个重要的按钮：

此次加入的按钮较多，所以在原型图内对按钮加入灰度显示其重要程度：

按钮上还有几个小细节，当手上持有多种类型的手雷或血包时，有一个小箭头可以进行切换：

显示负重程度：

分别放的是：武器管理和地图查看。

武器管理这一块区域按钮太过于密集，我们来看这个区域承载的功能以及重要程度：

除了1、2两个查看需求外，这块区域密集了5个可点击区域，某些按钮还承载了2个功能（换弹和换枪），所以导致此处误点率极高。
最主要的操作还是两个——换枪、换弹

保证两个核心操作的体验，另外的功能和按钮靠边站（放置到更深层级或隐藏），而不是和核心功能抢位置增加误点几率，体验可能会更好。

到这里，我们介绍完了操作UI层的所有界面，另外几个层级也可以用类似的方法，一步步地拆解、分析。

本文对当前已有交互设计的点评和分析，思考不周，欢迎大家批评指正。

“吃鸡”就是大厂游戏，其他小厂是鸡汤都喝不上。不做“吃鸡”，但研究“吃鸡”却依然有意义。

现象级游戏就是值得研究的，很多人也是由于操作等原因“看衰”手机版的吃鸡。但是，“吃鸡成为下一款国民级手游”的说法被越多越多人认同，我们“看”大厂们如何在如此限制多多的手机上给大家带来良好的“吃鸡体验”，同时也可以借鉴和学习。

⑺ 手机app开发怎样设计出简洁实用的交互界面

简单易用，在交互设计培训里面没办法给一个明确的公式或者结论。因为每个用户的使用习惯都是不一样的。对于简单这个名词，每个人的程度都是不一样的。所以，在APP开发界面设计上，交互设计中只能根据大多数用户的习惯以及设计的常理进行解释和定义。因此，我们在UI交互设计上，想要实现用户人认为简单易用APP开发界面设计，就需要遵循用户习惯和社会常理。

⑻ 如何做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界面设计作品必然是要经过不断升级、重复迭代的。

⑼ 手机应用软件的界面设计是什么

1、手机应用软件的界面设计——“高可用性”设计将击败“简单”设计

智能手机用户的数量已经扩大到一个非常边缘的群体，而且数量非常大。它们没有界面交互或隐喻的一般概念。如果他们尽可能直接和非破坏性地传达信息，可用性和“简单性”的设计冲突。

在汉堡菜单和材料设计中，生产按钮是最大的问题。

2、手机应用软件的界面设计——平面设计和游戏设计的灵感会影响到应用交互/内容的设计

平面2.0设计:虽然整体感觉还是“平坦”的，但是阴影、渐变和其他细节会更加丰富。

精美的插图和图形更为常见，它们直接影响应用程序本身的质量。

更多的字体选择和杂志风格的排版。

3、手机应用软件的界面设计——智能通知将成为新的“应用home”

事实证明，苹果手表等智能手表的核心价值在于“通知”。通知已经成为用户与应用程序交互最直接的方式，尤其是在每个人都拥有大量应用程序、注意力资源稀缺、启动一款应用程序不容易(或者不方便，就像Apple Watch那样)的情况下。

通知的形式将更“聪明”,不是小广告推送的形式,还是以产品的形式居民,但接近“手表”屏幕大小,随需应变,交互和界面相对完整(甚至用手机而不是看),用户甚至可以享受应用程序,而无需打开应用程序提供的所有功能。

环球网校小编为大家整理的《越来越多的ui设计师，开始学习手机应用软件的界面设计要求》到这里就结束了，如果你希望能将这篇文章灵活应用，还需多加练习，如果你还想学习更多有关UI设计的技巧或知识，也可以点击本站其他文章进行学习。