UI规范&UI指南&UI组件交互设计

UI规范&UI指南&UI组件交互设计（精选15篇）

篇1：UI规范&UI指南&UI组件交互设计

在我回家之前收到了一个朋友的邮件，我们有过简短的讨论，

今天在整理本月邮件时发现这个邮件可以公布在BLOG上，也许会引发一些话题和收获。

Vinny 致 我

引用自

抱歉，可能我们正在做着没有意义的事情，但是在我们还没有得出一个结论的时候，大家都还抱着一些幻想和期待!

附件是我纪录他们讨论的截图!期待您的回复：)

附件：

白鸦 致 Vinny

引用自

其实很早一起我们就谈论这个问题，

很多人把类似的“UI组件”“UI控件”叫做“UI规范”， 后来我们讨论的结果是：叫做“UI指南”比较合适。

因为“规范”是虚的!“指南”是用来指导和提高工作效率的…

我觉得如下几点需要说明：

1、不管是叫“UI控件”还是叫做“UI指南”，它都不应该和“直接产品易用性”扯上直接的关系。 它顶多只是“项目管理”或者是“产品开发”的一个“效率管理”范围。 只是一种“工作方法”而已。

2、千万不能为了“让产品开发的资源库中多几个G的资料”而搞这些东西， 为了规范而规范只能劳民伤财!

3、这种“UI指南”做好了做实用了确实会对产品的开发乃至整个产品的规范有很大的作用，某些程度上说也是提高和规范UI的一个重要方面。

4、做这样的东西不同的产品应该有不同的办法，“没有通用的易用性/可用性”。

5、一个长久的产品确实很有必要具备这样东西， 因为真正的项目不只是一个项目应该是一个产品 甚至应该说是一个品牌。

所以这样的东西也很有必要。

6、不要说“作出来这样完成的系统指南成本太高，我们不去考虑”! 其实完全可以“先计划一下，慢慢去做起来”。

不要想一口吃个胖子，也不要一点事情都不作。

也许你开始作了就会发现：“慢慢积累，点滴去做，很快就有成绩出来了”。

先做起来…

7、另外扯一个话题“没有行业规范”，

所谓的行业规范应该是同行企业之前慢慢形成的一种通用习惯。

在这个商业社会上，如果谁说他的东西是“行业规范”，那么他一定有很多另外的目的….

8、如果做了这个东西，一定是要长期维护的。 最主要的是“开发者用着方便”。

9、其实我更关注“用户情感设计指南”，比这种“用户界面应用指南”要有意思。 最近太忙，有时间写篇BLOG解释一下这个。

参考：

www.uicom.net/blog/article.asp?id=95

www.uicom.net/blog/article.asp?id=169

Vinny 致 我

引用自

谢谢您的见解，还有个棘手的事，各个角色争执不下——原型问题

以下是两个角色的观点，我也为之困惑：

UI：UI需要BA(业务分析师)，提供一个明晰的业务流，来完成整个原型设计;

BA：完成需求分析后，再接着完成原型(比如visio)，以及页面流(体现小部分交互样式)。

先前，原型和交互通常是UI根据BA的需求说明书来思考完成。但问题在于需求说明书的业务场景是所有角色(或权限)的全集，相关的细业务流是模糊的，这样通常导致UI输出的页面流不够完善、业务需求反复修改!

目前由BA取代需求、原型和交互这部分工作，我的UI同事认为这样会忽略可用性的问题，造成不好的用户体验，以及产品价值。

·其实就我们的业务特点而言，用户是有着相对的特殊性，我的疑惑：要照顾到特殊性就非得忽律对可用性的重视么?!

·BA认为UI所须做的是不参与项目工作，而是来规范和评估他们的原型结果，BA承担原型和交互其间问题你怎么看?!

·您认为下面这个流程有什么是可以省的?或有什么地方存在意识上的缺陷?

用户研究-分析需求-可用性设计-出原型-用户沟通迭代-gui设计-code

白鸦 致 Vinny

引用自

我这两天在家做手术，没有太多时间回答你的问题。

暂时我只能说：你的看法和观点有点片面，********

等我身体恢复后请提醒我，我应该可以给你完整的回复。

起码可以肯定一点：在这里流程不是最重要的，重要是的协作方法。

sorry 。。

来自：uicom.net/blog/?p=365

篇2：UI规范&UI指南&UI组件交互设计

我们再来看看制定UI设计规范的目的是什么?

在我看来,制定UI设计规范对公司来说,是为了公司产品风格的延续性,一致性,使设计更加产品化,杜绝了一家公司设计出来的产品,五花八门,除了Copyright之外,没有一个地方看得出是一家公司的产品.对UI设计师来说是更容易让后来的UI设计师快速的了解公司的设计风格,产品风格,快速的融入团队.缩短磨合时间.

那么根据这个目的,来制定属于公司的UI设计规范,通常我会通过以下这些界面要素来加以描述

1.字体/行距

2.主色系

3.板式布局

4.页头页尾

5.图片文件大小

基本上,我认为有这些已经够了.看到许多公司制定的规范,还包括按钮啊,边框阿,背景图阿,一看就晕了,就拿按钮来说吧,能规范的吗?如果是要吸引用户注册,我是不是得把注册设计得很大很突出?常规的登录按钮能这样吗?在制定规范的同时,还要牢记一点,规范并不是一层不变的,规范是需要慢慢积累,慢慢完善的,在没找到更好的规范之前,一定要严格执行,在找到更好的规范后,应该立刻修订.而不是因为规范两个字就觉得这东西是圣经了.

还有一点必须说的就是,往往规范的制定,都是把握在设计总监,经理手里,所以通常会带有一定的主观性,必须强调的是,一份好的规范,最好是经过大家一起协商,探讨制定出来的,而不是一个人说得算的.

篇3：移动天气系统UI设计

移动应用项目的生命周期起始于产品的创意策划,成功的移动应用自创意阶段就应充分各项准备工作严格遵循企业的设计流程,这需要我们在确定项目的同时,能够冷静地分析自己的设想,理性定位自己的市场目标和产品用户,深入地了解你所面对的用户群体,针对他们的需求、习惯和欲望,做有价值的、能触动人心的应用。

1 前期准备阶段

移动天气应用是指通过移动通信网络将客户的移动设备与天气信息后台数据接口进行连接,客户通过手机客户端的方式发出查询指令,在手机界面上直接查看各种天气状况的新业务系统。本系统的优越性主要优点是快捷方便,信息指数丰富。用户能够利用移动天气APP实时查看自己所需的各种天气信息,免去了打开电脑进行查询或是按指定时间收听广播的限制。

随着技术的发展和各种软件的丰富,现在的用户对于天气软件的需求除了信息查询功能外,更多地去关注软件的用户界面是否美观舒心、简单易用和个性化,因此软件的UI设计变得越来越重要,直接关系着一款软件是否能够从众多软件中脱颖而出被用户所接受,能否给公司带来盈利。

设计软件产品首先要对使用者,使用环境,使用方式的需求进行分析,明确什么人用,什么地方用,如何用这三方面因素,设计者软件要考虑不同类别用户都各有不同的特点和需求。因此在对移动天气进行需求分析时先对功能需求进行分类,分析不同人群在不同情况下的需求差异。比如,移动天气APP首先应具有基本天气信息的查询功能,如当前和未来的天气情况、温度、湿度、日出日落等信息;还应具有一些特色的可选增值业务,如定位功能、城市选择对比、出行提示、穿衣指数以及当前人民关注极高的污染指数等。除此之外还需要了解同类竞争产品,分析同类产品的用户下载量和评价,只有取其精华去其糟粕,做出真正被用户需要和喜爱而又有自身独特个性的产品。

根据以上分析,我们首先使用头脑风暴法对移动天气的创意进行行了了研研究究,,得得到到了了如如下下图图所所示示的的功功能能树树形形图图。。

2 原型草图阶段

在使用“头脑风暴”结束后,我们得到了若干个创意思路和设计灵感,但是这些创意还是抽象的概念和词汇,下一步我们把它们具体化,变成直观的设计效果---原型草图。

我们设计原型草图通常需要进行两个步骤,它们分别是“手绘”的原型草图和使用原型工具和原型设计软件设计的原型草图。根据我们分析得到的树形图,明确了产品的定位、结合竞争产品的分析资料确认了本产品的设计意义和用户关注的重点功能。通过对产品功能需求进行归纳整理,将产品的功能按照其重要性和逻辑性进行排列分组,设计出几种不同风格的UI产品界面效果。此阶段的设计应包括界面的数量、逻辑关系和组织关系、操作方法、各界面的展示效果,控件使用情况、对用户的操作引导等。

3 高保真原型图设计

原型草图方案确认后,我们应再使用原型设计工具将手绘草图在计算机上进行实现,设计出一套完整的可模拟的产品原型。通过此高保真原型图我们能够看到软件实现后的基本效果,模拟体验到软件的操作逻辑。

UIDesigner,简称“UID”,是腾讯CDC(用户研究与体验设计部)团队研发的一款针对交互设计师、产品经理、程序开发工程师的软件界面原型设计的工具。它拥有强大的模板和预制功能,具有团队协作、整合设计流程、版本管理、快速原型等特性,拥有强大的模板和预制功能,能够快速地搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗,有效提高设计效率。

4 导航设计

为了防止用户在使用移动应用时迷失在界面中,无法返回到自己出发的界面里,科学而合理的导航设计可以帮助用户迅速而准确的找到“回家的路”。通常情况下,IOS平台常用的导航模式为平铺导航、标签导航和树形结构导航,安卓平台大致分为标签和树形导航。但不论针对哪一种平台进行设计,我们都应该遵循扁平化的设计原则,简化导航的层次不要超过四层。

5 图标设计和启动画面设计

无论我们的设计工作多么艰辛和漫长,现在都快接近尾声了,而图标设计是整个应用设计过程中真正的重点,也是对设计师考验的最大一关了,也是平面设计里难度最大的一门学问。图标设计和标志设计有很大区别,一个是讲究直观和隐喻,一个是追求象征和抽象,但是它们的可识别性和符号化的特点,以及对设计师图形造型能力的高标准要求是相同的。

图标设计形式美不是关键,能不能准确地被识别是设计的第一目标。要求:一目了然、内涵明确、符合大众经验判断,使用户迅速判断出含义。同时进行图标设计时必须要遵守各个平台的设计规范。

启动图标是移动应用给用户的第一印象,我们的目标就是要建立完美的第一印象。

6 验证和改进

UI设计的好与坏最终的裁判是用户,使用者感受的好与坏才是最重要的,因为UI最终就是为用户设计的。我们可以将设计好的高保真原型分发给一些目标用户进行体验,收集这些体验者的感受和建议,进行分析整理后就可以得到目标用户最喜欢的方案。后期我们就要根据用户的喜好和建议对产品进行下一步修改了,力求将我们的UI设计做到细致精细,功能清晰,使用便捷,界面时尚。改正以后的方案经过开发环节,我们可以上线把其推向市场,继续收集用户反馈,为以后的升级版本积累经验资料。

7 盈利模式思索

对于企业而言,最终的目的是开发产品获取利润。移动天气APP如何能实现盈利呢?经过分析移动天气APP的也很容易实现盈利,主要方法有如下几种:

1)流量。我们的应用适用于互联网行业的“用户=流量=金钱”的公式,移动天气是影响到人们日常生活工作的重要应用,我们的产品只要被用户接受和使用就有足够的流量,利用这些流量使用广告类、增值服务类、购物类、流量分成等都可以实现流量变现,给企业带来丰厚的回报。

2)个性化定制。目前的很多应用都有其个性化定制方案,这也是一个非常好的盈利机会。比如我们的用户可根据自己的喜好定制适合自己的信息,获取这些信息享受特有功能是需要额外付费的。

3)物联网功能。随着科技的快速发展,智能家居将会普及,通过天气APP的温度、天气、空气指数预测,紫外线字数等功能,可以控制家庭的空调、加湿器等电器设备的开关,保证家庭环境的清新,也是将来必不可少的市场机遇。

8 总结

在移动天气APP应用的生命周期中,UI设计师应遵守企业规范,严格按照UI设计流程,做好充分的市场调研和产品对比,分析移动天气产品的特点和功能,完成每个环节的职责,确保每个流程准确有效地得到执行,从而提高产品的可用性,提升产品质量。

摘要：UI设计即用户界面设计,主要目的是提高应用软件的用户体验满意度。UI设计的成败直接关系着软件的成败和生命力。该文主要讲述移动天气应用APP系统用户研究和界面的设计过程,内容包括用户研究,交互设计及界面设计三个部分。

篇4：UI规范&UI指南&UI组件交互设计

国内对于UI设计还是一个逐渐发展和成长的过程，企业对于UI设计的认识大都停留在界面的美工，平面设计上。我们经常会看到有些公司的招聘广告上面写着：招聘界面美工、界面美术设计师等等。国内市场不严谨的将UI设计的理解放在美术的设计方面，认为UI设计师从事的不过是些描边画线的工作与网络的制作设计无关，缺少网络界面与用户之间相互交流的互动性；另一方面在软件的应用开发过程里还严重存在只注重技术的开发而不注重界面设计图形应用的问题。

UI设计的交互功能与应用

UI设计真正的价值又体现在哪里呢？对于UI设计的交互性功能，它是UI设计所要发展的一个必经过程。我们以现在商业手机为例，当手机成为信息时代不可或缺的一部分时，几乎很多与生活息息相关的重要活动都会通过它来完成，随着不断的推崇出新，大家并不会为了手机的故障而舍弃现有手机，而是在发现新上市的手机所拥有的强大的娱乐，游戏，信息功能。这些功能从界面的设计与使用的操作上都更新颖更具有人性化，以及它卓越的外观。而技术层面上的信号、待机时间、寿命等方面早已成为各种手机所共有的特色。商家在推出新款手机的时候往往把创意卖点以及竞争力放在推出游戏、APP、摄像头、应用软件的开发上。而这些卖点都成为产品的美观、个性、易用、易学、人性化的主体开发元素。每一种类别我们都要为它设计精美的图标与图像使用界面。一种具有视觉观赏性的图形化界面与合理易用的交互方式给我们的商品乃至企业带来莫大的经济效益，它为用户提供了一个全新的展示及使用空间。所以在现在的网络软件开发的年代我们更注重的是软件的开发和应用，而核心技术慢慢成为基本要素，可比性不如前者。

UI设计的社会价值与发展前景

现阶段我们不得不承认在很多领域都与西方发达国家有较大的差距，软件产品开发的核心问题是以人为本。提高软件UI设计师在软件应用以及设计能力是我们首要解决的关键问题，我们不能将眼光仅仅停留在平面化的设计层面，而要注重软件的界面风格设计以及图标的创新设计，界面版式的编排设计等等。然而各院校还没有为UI设计设立一个专业的学科环境，在网站的建设和使用当中也没有重视起来，而最关键在于没有提供一个良好的学习与交流的环境。虽然现在已经有一些专业的设计交流网站，分类介绍工业设计、平面设计、服装设计、绘画艺术、多媒体flash等，可是UI设计却一直没有得到人们的关注，它被归类在数码设计或者平面网页设计的范畴中，这种极其匮乏的资源对培养优秀的设计师，给他们提供一个良好的学习创作环境还远远不够，我们必须为此建立一个资源丰富、信息快捷、设计水平一流、专业权威的UI设计学习与交流的空间，才能不断地去适应渐渐成熟的UI市场和设计师团队的需要。

市场经济的发展给我们带来一个竞争空间，而我们如何去竞争，这就需要不断的开发新的技术从而来提高产品的竞争力度，抢占市场，开拓产品的市场环境。早在2000年国内就有了UI设计，但那时的UI设计正处在萌芽阶段，当时被大多数人当做平面设计来处理，而这种设计形式主要体现在静态网页页面设计上，后来随着软件的不断开发和更新，随着flash二维动画应用越来越广泛，一部分从事UI设计的设计师们开始去思考网络的互动性。在进入2002年一些企业将网站的开发设计的重心放在了UI设计上，这是UI部门渐渐的从软件编码团队里分离出来，逐渐成立以针对软件产品的图形设计师和交互设计师的行业。从2004年以后随着新兴电子技术的开发生产，智能手机及电脑附加软件，MP3等大量产品上市，ID设计就和UI设计越来越紧密了，UI设计也开始被提升到一个新的高度和重视程度。2005-2015年国内的UI设计已经相对成熟了，有了专门的职业分工也出现了很多不错的UI一线设计师与UI设计交流组织。

视觉界面的设计

首先我们要理解什么样的用户界面才是出色的用户界面，我们的设计要具备哪些品质才能算得上出色的界面设计。

1.直观清晰；通过使用流程图、文字、图标、层级图、等元素，避免用户接触模糊、无条理的信息，在使用的过程中减少无用功。

2.简明有序；为了有好的用户体验感，可以在所有的元素上添加浮动框的说明或是标签来实现，但处理不好又会导致界面拥挤。如果在我们的电脑屏幕上同时充斥太多的元素，视觉关系就混乱了，用户也会觉得困难乏味。所以保持界面的简洁和清晰成为了UI设计的挑战。

3.共鸣；在用户使用界面的过程中，总会碰到一些似曾相识的感觉，即使是第一次使用，其中的有些元素我们也会感觉很熟悉。在设计的过程中，使用一些现实生活中公认的意象能够更好地帮助用户理解。

4.用户体验感；良好的界面不应该让人有极好的体验感。应该及时从各方面提醒用户发生了什么变化，用户的输入是否成功地处理。让用户了解这些信息反馈，并且告知用户您的请求已被成功受理。

5.统一性；在整个应用程序中保持界面的统一完整非常重要，它能够让用户识别出使用的模式。一旦用户学会界面中某个部分的操作就会应用自如。

对于一个好的界面来说，它应该具备：非常好看的设计构思、具有创新的界面、毫无挑剔的结构、全智能化的后台处理系统、以及非常优秀的内容以及优良而快捷的交互性。

篇5：ui交互设计培训： 血液在沸腾

千锋UI培训 血液在沸腾

我读的是电子信息科学与技术专业，在毕业后考虑了很多工作，不管是本专业的还是其他专业的都去尝试过，但是并不理想，只能用那句理想很丰满，现实很骨感，确实是的，像我们刚毕业的，也不是名牌大学毕业的，想出来找个工作，还想拿高薪，真的太难了，我也听从过父母的建议去考公务员什么的，人太多，真的是万里挑一，而且现在的公务员福利也没有以前好了，所以也是很难。

我在多次徘徊和挣扎中，终于找到了一个方向，我们一个班的几个朋友来千锋培训已经毕业了，而且很快找到了工作，工资很诱人，千锋教育

千锋教育-中国IT职业教育领先品牌

我仔细想了想，确实是，现在是互联网时代，我们为什么不走在科技的前端，为什么不去学习热门的网络技术，所以我没有犹豫，直接来千锋学习UI设计了，刚开始对UI一点不懂，虽然大学也用过PS但只知道皮毛，对其他的设计软件知道的更少，千锋的学习环境很好，来参加培训的学生都很刻苦，自习到很晚才回去，所以学习氛围很好，我学的也很投入，千锋老师的热心指导和助教们的积极辅导，我们进步神速，很快从一无所知的菜鸟慢慢的变成了对设计领域略知一二的设计师，虽然学习过程也有很多困难，经历了很多的挫折，但正是这些挫折也让我们变得越来越强大，越来越能承担挫折。现在想到自己和同学们加班的作图的场景还特别的佩服自己，也感觉自己的血液在沸腾。

千锋教育

千锋教育-中国IT职业教育领先品牌

一转眼已经工作大半个月了，回想一路走过来的历程我是满怀感激，所以我在这里真心的感谢推荐我来千锋的朋友，真心得感谢教我的孙老师以及和我一起在千锋奋斗的伙伴，谢谢你们的指导和帮助。

最后我想对那些想找到工作的，想拿高薪的，想改变自己命运的朋友们，找到自己的方向不要犹豫，并勇敢的坚持下去。

篇6：UI规范&UI指南&UI组件交互设计

但是Redpoint VC 的Tomasz Tunguz有截然相反的看法。他在The Fastest User Interface一文中指出，SamLessin 只要考虑到一点就知道自己错了：速度。

语音输入要比文字输入来得快。BarbaraBlackburn拥有打字速度最快的世界纪录，也就每分钟212 个单词，而说话速度最快的世界纪录得主Steve Woodmore 每分钟可以说637 个单词。也就是说，在人类自身的极限上，语音要比文字快3 倍。而正常的普通人，打字速度大概在30-40个单词/ 分钟，说话速度大概在120 个单词/ 分钟，依然是 3 倍关系。可见，这一比率关系是比较稳定的。

当然有同学要说Tomasz Tunguz 耍赖了，因为打字速度可以基本转化为UI 交互速度，说话说多快就不见得UI 交互能多快了吧，机器还要翻译语音的时间呢，

但我想指出的是，我们的讨论是基于未来的UI发展，未来的语音技术会大面积减小语音转化为交互的时间，而文字输入几乎已经没有多少可以提升的空间了。

Tomasz 认为正是因为速度的原因，我们更习惯给别人打电话而不是发邮件。他尝试学习Dvorak来改进打字的速度，但发邮件比起打电话还是慢太多了。也因此，语音邮件看起来似乎更有吸引力，更方便，也更人性化。

他还指出，Siri和谷歌语音搜索的成功也是受益于语音的速度。使用语音搜索时，每日搜索量将达到惊人的数以亿计。直接说“导航到 XXX”或者“查询旧金山的天气情况”毕竟要比在狭小的键盘上一个一个的打字来得快得多。

至于公共场所的语音问题，Tomasz认为，我们事实上早就习惯了这一点。因为电话早已发明了一百多年了。声音去噪技术和社会道德意识让声音保真和隐私问题不再难以解决。

对于语音，真正的挑战其实是编辑问题。文字的再编辑很直观、很容易，语音如果想进行修正和再编辑，难度就高得多。如果再编辑的内容过多的话，语音结合键盘和鼠标或许是个好方式，起码会比单纯使用键盘来得快。

篇7：UI规范&UI指南&UI组件交互设计

1. 当前手机平台的争锋

为了占领移动互联网的制高点，当前的几大IT巨头都以手机平台为基础展开争夺，占领移动平台就是占领了用户的移动桌面，也就为自身的移动服务争取到了最佳位置。

微软公司推出windows phone 7, 曝光了windows 8;苹果公司也开了iOS 5的发布会;谷歌的Android 3.0的发布，Android 2.4 的若隐若现等等;大家都在努力提升平台体验。另外，惠普的Web OS、黑莓公司也都在研制和发布新平台，也引起了业内人士的极大关注。

从当前市场占有率和未来的发展趋势看，客户端适配上，主要还是考虑iOS ，Windows，Android三个系统为主，其他的系统在国内还难占据主流，这里不解释。Android手机的增长最快;iOS手机在国内的占有量也增长很快，利好消息也不断，电信、移动都在谈;Windows主要看与Nokia的未来合作，前景不小。

因此，在本文中，简单的介绍一下这三个主流平台的交互特性，以帮助刚从事客户端交互设计的同行们更快地了解它们的基本特性，为能开发出更好体验的客户端提供便利。

2. 各个平台的特点及优势

1)平台的硬件特性

a)平台的按键

手机按键是系统自带的，平台也会把按键的功能带入到系统的客户端应用中，他也天然地与用户操作相融合。

手机按键一般分为两类，功能键和导航键。功能键被指派为特定的功能，用户按了后，触发对应的功能，一般与屏幕内容关系不大，如拍照键，只是启动拍照，在其他的客户端中基本无效。

另一类是导航键，被赋予了特定的逻辑规则，她的操作与屏幕有一个逻辑映射的关系，但操作与操作对象分离，用户按键后，在屏幕中得到对应的反馈。如【Back】映射为返回前一页，点击【Back】后，屏幕的内容返回到上一页。

功能键能直接启动功能，它本身对交互的影响不是很大。而导航键则是交互设计的重要组成部分。主要应该注意以下几点：

(1)客户端的交互导航设计应该支持平台的导航按键的操作。不管你是否已经在屏幕中有虚拟按钮代替了按键已有的功能，也应该支持系统按键的导航逻辑。

(2)客户端用到了平台的功能键对应的功能，应该支持功能键的操作。如，在客户端中需要调节音量，则应该支持系统音量的按键来控制。

(3)所有客户端对按键的操作都必须保持一致，不要随意互用。

b)平台的屏幕适配

由于不同平台的开放程度很不一样，不同的平台产品对于屏幕的大小的设计很不一样，有些只有很少的尺寸分布;有些有很多不同的尺寸，这给适配带来了很多问题和麻烦。屏幕适配设计参见我之前的博文。

c)平台支持的其他硬件：传感器，屏幕特性等

iPhone 推出来后，迅速风靡全球，创造了一个革新的时代(也有人说iPhone本身不是革命，但是他创造了一次革命)，除了设计本身外，几个传感器的合理使用也立下了汗马功劳。主要包括，重力加速度传感器、陀螺仪、接近传感器、电子罗盘等。这些传感器在不同的情景下，创造了很多独特的体验，极大的增强了手机的可玩性。

不同的平台或是手机会支持不同的传感器，在界面设计时，也需要考虑它们在不同平台上支持的普及程度，以及不支持的时，能提供的相关代替设计方案。

2)平台的界面特性

a)应用入口形式

应用程序的启动入口是指用户启动程序的交互界面及操作形式。不同的平台上，对于启动入口操作和界面也有较大的区别，这是展示平台特性的第一印象。同时，不同平台及手机公司为了使品牌形象更加突出也会在这里多做文章。

从交互特性上看，应用程序的启动入口主要有以下几个特征和注意点：

b)页面基本结构

页面的基本结构布局，决定了手机界面的主要风格，在不同的平台上为了表现出设计的差异和风格，在界面布局上都有所不同。但是，总的来说还是没有与iOS有何本质的不同，主要在形式上略微的不同。

iOS：

Android：

Windows Phone7：

Android 的手机厂商都更改了原生系统的界面，不同Android手机在界面的展示上多有不同。在Android客户端的设计上，本身有不少都是从iOS上直接移植了界面，导致了它的更多不同。但是不管怎么样，界面上操作和导航逻辑要符合平台本身的特征。

在框架的设计上，我是倾向于把最核心的操作放在底部，方便用户的单手操作，

iOS的设计把导航按钮方在左上角，远离大拇指的操作区域，就是容易造成用户脱手“甩机”，也影响操作效率。

c)主要导航特性：

导航作为一个平台的主要交互特性之一，不同平台之间也存在较大的差异。iOS在设计上逻辑严密，所有的应用自成一体、浑然天成;相比之下，Android像是由iOS和android设计师杂交的产物，在不同的应用上导航系统混乱，不太成体系;Windows Phone 7 的导航在界面展示上，标题采用全景图的形式，真是另辟蹊径，自成体系。

在这里主要讲一下不同平台下的导航按键、title和Tab、返回逻辑、退出程序几个小点。

d)菜单及操作形式

这几个代表当前最高水平的移动平台，都是以手指触摸为基础的直接操作界面。iOS只提供了直接操作的方式;Android和Win Phone 7 还增加了几个硬键按钮配合操作，但总体也是以直接操作为主。几个平台都有菜单操作，但是展示的形式不同，但也在相互的借鉴。

由于手机屏幕较小，一屏内容往往显示一个对象或信息单元，toolbar的操作正是对这个单元进行操作的。如果是对单元内的对象操作，更多的设计都是在界面中直接设置操作对象(如屏幕内的操作按钮)。

e)信息提示

信息提示方式，各个平台之间也都在相互学习。信息list作为Android系统的最核心的设计优势，现在iOS5也开始应用。同时许多Android手机及锁屏应用在锁屏界面与提示信息间做更多地权衡，使用户能更快地处理信息，提升效率。

各个平台都提供了对话框的形式，只是在叫法上略有不同，如alert，popup，dialog，raw notification等，其主要的交互操作没有区别，都是对话框的基本操作形式。也有一些变异的反馈提示框，如android系统提供的快速消失的反馈提示，做成轻量级的，对用户干扰也减到更少。

Android系统提供的状态栏的消息提示机制，是处理多应用push信息的一个十分创新的设计，可以说是android系统的最佳设计。用户可以在任何界面中，快速的向下拨动状态栏呼出信息list，也可以再向上拨动手指收起提示信息。但是，在最近看到的iOS5上也看到了它的更新特性中，这一点就赫然在列。所以，有好的特性，不同的平台也会相互学习。

iOS上也有它的创新提示，就是在程序图标上来进行新消息数量的提示，这在后面的几个平台上都有应用，只是不同的平台上，表现形式略微不同，就是视觉上微创新。

Windows Phone 7 提供了tile形式的提示信息显示方式，那只是样式上的不同，在设计的本质上，差异不大。

具体可以参见钟磊的博文，《手机系统消息通知设计的整理和分析》

3. 移动应用在多平台适配的原则

一个产品的规划，很少会仅局限于某一个平台，都会进行跨平台的适配。那应该如何进行适配呢?

这里主要有两个观点，以设备为中心来设计还是以应用为中心来设计;以设备为中心的设计师认为，应用界面应该与设备的设计规范保持一致，让用户快速上手，不觉得陌生。以应用为中心的设计师认为，保持所有的平台上的一致性，同时，很多多平台的应用开发工具也是为开发人员提供了多平台界面移植的便利，但是对用户体验是否好，却有待思考。

在多平台适配中遵循如下原则

1)客户端的设计规范应该以平台规范为基础

2)在多平台中，应保持统一的品牌标识，包括logo，视觉风格，核心功能点等等。

3)更多地与平台的特性相融合，运用平台提供的特色功能，来减少用户的输入或者其他体验提升点。如拍照输入，传感器的使用等。

每个平台都需要注意的问题有：

1)移动的特性决定了手机信号的强弱不均，如何处理在弱信号下的设计?

2)需要考虑在断网情况下，如何快速恢复中断?

3)如何设计手机推送的问题?

4)如何尽量避免手机的固有限制，如屏幕小，输入不方便，电源紧张等?

5)如何尽量通过手机的特有特性来提升体验，如各类传感器，声音提示等?

4. 后记

当我从3月份拟好提纲写这几篇文章到现在，不过短短几个月时间，各大公司的移动平台就都推出了新的版本，对平台特性总结的速度有些赶不上平台更新的速度。

从本质上说，iOS是一个开创性的设计，也引发了客户端的高潮，其他的平台还没有脱离iOS的痕迹，虽然各大公司都在努力创新，形成自己的风格，但是还远没有到开创、革命的程度。

除了这三大平台外，Blackberry，Palm WebOS也都在发布新品，体验也不逊色与三大平台，在客户端的设计上，非常值得大家更多地研究一二，说不定哪天主流平台就把他们的有点给抄了，你也是在为你的新设计做知识储备。

篇8：UI规范&UI指南&UI组件交互设计

关键词：传统文化理念UI交互设计能力培养和提高

引言

我国传统文化是世界文化中的宝贵资源，其在现代科技中的应用展示的是一种沉淀的、底蕴浓厚的文化形象。UI交互设计与传统文化的融合是特殊文化背景支持下的人机互交的一种形式，对提高大众的审美情趣和艺术感知能力有很大的作用，同时更加完善了用户界面使用的方便性、简约性和人性化，有效的促进了UI交互设计水平的提高。

1.传统文化理念与UI交互设计

UI设计是用户界面设计的简称，其包含了人机互交设计、界面美观设计等方面，在人们复杂、忙碌的生活当中，人们对于UI设计的简约、美观、舒适的要求在不断的提高，这就对UI交互设计者的文化感知能力、情感体验能力及创新能力提出了更高要求。一方面，UI交互设计不仅包含了平面设计部分，对动画、声音等也有一定的要求，设计者要全面的体会这种综合艺术形式，在视觉、听觉等方面带给使用者完美的感受。另一方面，随着3G时代的到来，手机在我国使用普遍性、广泛性日益突出，手机功能的日益丰富，也使人机交流、用户界面美观性需要不断的改革创新，才能更好的引导使用者感受、体验、应用手机的各种功能。一直以来，我们借鉴和吸收外国UI设计的理念、方式已不能满足中国用户的使用要求，在UI交互设计中加入中国元素，使用户体会一种温暖、新意和舒适感，同时确保用户使用的效率和操作的流畅性。传统文化是我国人们千百年来思想、情感的沉淀和文化体验体会，例如民间艺术、神话故事、儒家文化、道家思想等等，其中有太多适合UI设计应用的元素，设计成功的关键是设计者对于传统文化应用的选择和创新应用。

2.传统文化在UI交互设计中的应用和对UI设计能力的培养

UI设计体现了一定的价值观和审美观，在我国教育改革的不断深入中，大众对于外来文化及传统文化的审美观日益趋于理性化，我国传统文化在各行业中得到了广泛的应用并受到普遍的赞扬。例如服装设计中的旗袍、青花瓷等元素的應用，受到了客户广泛的喜爱和好评好评。UI交互设计也是如此，用户的体验是UI设计成功的重点衡量标准，因此UI交互设计的设计师一定要坚定自己的设计理念，在文化加工、创作中探索大众习惯、大众艺术，实现设计作品与大众价值观、审美观的日渐一致。以中国传统理念为基础设计UI交互界面，首先，要对中国的传统文化又深入的理解和体会，才能设计出优秀的作品。例如：利用我国的传统神话故事进行UI交互设计，先要对设计的思路进行整理，结合神话故事传说进行创作。如《牛郎织女》故事的凄美、感人，加以适当的音乐形式能给人以震撼之美。在这个故事中，如我们选择“鹊桥相会”这一内容，传递一种真情感天动地的思想和一种执着、幸福之美，就较为符合大众对该文化的体验和感知。其次，要重视传统文化应用的广泛性和合理性，不要将创作的方向集中于一点。例如在短消息图标设计中，可以采用祥云的设计理念，利用象征和比喻的手法进行设计创作。也可利用“飞鸽传书”、“飞鸿传信”等理念进行UI设计创作。还可加入近现代文化元素，例如“鸡毛信”等。总之，打破狭窄文化思路的约束，大胆的进行创新和传统文化理念的应用，能有效的促进UI交互设计效果的提高。再次，重视传统文化应用的适当性和文化的创造性。在UI交互设计中，传统文化的应用和加工都很重要，例如皮影、京剧脸谱等在UI交互设计中的应用都很广泛、也很成功。但在传统文化应用中也有很多不成功的例子，主要是设计者对文化的理解太过浮浅，设计思想局限于某一文化意识中难以自拔。例如，设计者追捧中西文化的结合，在设计中过分计较中西元素的搭配，反而容易使作品表现的不伦不类。总之，UI交互设计是个动态的过程，对于文化的理解决定了文化应用的合理性，是设计作品成功与否的关键，设计者一定要对各种文化又较深入的了解和认知，并能不断的拓展思维，打开思路，不局于某种形式，才能在传统理念下成功的进行UI交互设计，提高UI交互设计的能力和水准。

3.利用传统文化理念提高UI交互设计能力的思考

在传统文化理念背景下，要提高UI交互设计的能力，第一，要广泛看。中华文化博大精深，只有不断的、广泛的在其中吸收文化元素、文化精髓，才能不断的提升UI交互设计的能力。第二，要会想，一方面要想的深入，另一方面要想的广泛，只有思想在纵横方面不断的拓展才能使传统文化理念更为清晰，才能使传统的元素与现代元素达成统一。第三，要会说，语言是人与人沟通的重要媒介，是人思想传递的主要方式。UI交互设计融合了文化与设计的思想、意识，设计者需要利用语言将自己的设计观点和想法表达出来，才能得到广泛的理解和用户的认可。第四，善于做，将自己的思想变为现实是UI交互设计的关键，不经历这一过程，思想永远也只是设计者自身拥有的一种抽象的东西，只有通过做才能使其变为现实。此外，还要重视用户对设计作品的反馈，在用户使用效果的反馈中不断的进行改进完善，对提高UI交互设计水平极为关键。

4.结语

UI交互设计既要重视人机互动的直接性、简洁性，也要兼顾用户界面的美观性、艺术性，最大程度的使用户在使用过程中享受到方便、简洁、舒适、美观的感觉，不断的提高用户对UI交互设计作品的满意度，就是我们利用传统文化理念进行UI设计的主要目标。

参考文献：

[1]彭华.浅析中国传统元素在手机UI界面设计中的应用[J].中国电子商务，2013（04）：74-74.

[2]郭晓雯，关湃.智能手机UI设计中体现中国式交流的应用研究[J].艺术科技，2013（08）：263-263.

[3]张毅.民间皮影艺术与现代手机UI设计的融合研究[J].轻功科技，2012（09）：107-108.

篇9：iOS平台UI设计基础规范

一、UI的控件概述：

1、框架UI的元素分为4类：

A：栏：状态栏目和导航栏的结合体;

B：内容视图：应用显示的内容信息，包括相关的交互行为，例如滚屏、插入、删除等操作进行排序;

C：控制元素：产品行为或显示的信息;

D：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。

2、框架UI的尺寸：

3、图标icon的尺寸：

二、UI的布局概述：

1、可点击对象的区域：尺寸不要小于44*44px;

2、将重要的内容和功能放在权重高的位置，将重要的元素放在前半屏比较好，对于阅读习惯从 左到右的用户来说，更贴近屏幕左侧位置容易引起关注的;

3、利用视觉表现形式的权重和平衡，尺寸较大的元素具有更高的权重，对于尺寸较小的元素来 说，更能吸引目光，看上去更加重要;

三、UI的模态情景概述：

1、模态：一种用来承载特定内容、功能或体验的模式，有其自身的优缺点。它可以帮助用户完 成某些任务，或在不受干扰的情况下获取信息，但会暂时性的强迫用户停止与应用其他部分 的互动;

2、保持模态任务的简单、简短、易聚焦：不要将模态视图打造的好像是嵌在应用当中的迷你应用;

3、始终提供一种明显而安全的退出方式：要确保用户在退出模态视图时，能够对接下来要发生的 事情有明确的认知;

4、使用警告框来传递那些必不可少的重要信息，通常还要提供可执行的功能选项。

四、UI的手势交互概述：

A：通过点击(tap)：按压或选择一个对象;

B：通过拖拽：滚屏或移动对象(将从界面的一边移动到另一边);

C：通过滑动(flick)：快速滚屏或移动对象;

D：通过一个手指轻扫(swipe)：可展现更多内容，例如：列表的删除按钮，从界面顶端展开通知中心;

E：通过双击(double tap)：可将内容放大置于屏幕中间，主要是放大和缩小的转换;

F：通过双指涨开(pinch open)或闭合(pinch close)：对内容进行放大或缩小;

G：通过长按(touch and hold)：在可编辑或可选择的文字上显示放大镜，用来定位光标;

H：通过摇晃(shake)机身可执行撤销或重做的操作，

五、UI的动画概述：

1、漂亮而精致的动画效果遍布于ios各处，它们使应用体验更具动态性，更加吸引人，精细而恰 当的动画效果可以：

A：传达状态

B：增强用户对于直接操作的感知

C：通过视觉化的 方式向用户呈现操作结果

2、尽可能与ios内置的应用的动画模式保持一致：人们已经习惯内置应用当中各种精妙的动 画效果，实际上，用户往往会将内置应用当中的动效看作一种体验的标准，例如切换视图时的平滑过渡效果，切换横竖屏时的流畅反馈，或是能表现出各种物理效果的滚屏动画等等，这些 都逐渐成为了人们预期当中的一部分。

六、UI的字体概述：

1、字体是ios7设计的关键，大多数操作都是点击文字或点击图标，按钮也会有，但是占的比重很小;

2、苹果的默认字体是Helvetica Nenu，一种纤细简单的文字，但那不是你唯一的选择;

3、Ios7的字号稍微加大了，主要由于它的用途，而且文字之间的层级关系至关重要，利用颜色 和不同的粗细，来保持文字的布局和UI元素的清晰易懂。

4、苹果字体规格说明：

A：导航栏标题：medium 34px;

B：按钮和表头：light 34px

C：表格标签：Regular 28px;

篇10：UI规范&UI指南&UI组件交互设计

Metro UI 推出来的时候，对比其他系统的图标海洋，确实让人眼前一亮，活动格窗取代图标，内容取代形式，微软的宣言是让智能手机用户有更高的效率得处理事务，而不是专注于智能手机本身，

但果真如此吗？在我看来，Metro UI 设计得的最初目的是简洁，最后产生的结果却不一定是简洁。

细线

Metro UI 中的一大特色就是内容的无边框设计，通过间隔和字体使内容产生自发性质的分隔，而不必通过边框等介质。在展示少量内容时，简洁的特性可以很好的体现，但在处理大量内容时，却会表现出“拥挤”。由于没有分割线，不同的内容之间只能通过留白来分隔，导致文字积压，挤占了屏幕的表现空间，进一步造成了内容的“拥挤”。

以设定中“关于本机”选项为例，iOS 的细线分隔显得更明快，获取信息更清楚容易。细线是最简单的内容区分的形式，Metro UI 对这区分形式的舍弃导致整个屏幕上只有孤零零的文字，直接发现有用信息困难。

细线的分隔也是一种更人性化的暗示，它让内容看上去更像一个按钮，暗示着可以按下并激发新的内容。而Metro UI 中的内容则会让人疑惑这是单纯的文字还是可以继续点击查看。Metro UI 的功能性暗示更加不明确。

颜色与图标

Metro UI 在颜色的应用上既激进又保守，激进的是它可以把界面弄得五彩斑斓，保守的是在应用内的界面不着一墨，

从上图看，Metro UI 的邮件界面上只有单纯的文字，缺乏色彩，所有内容的分隔都是通过字体和空白来完成。这样的结果是信息同质化，很难区分信息。界面没有将有价值的信息第一时间呈现出来，因此当面对这样的界面时，需要更多的集中精力去寻找信息。这和做 PPT 时将所有的文字堆砌起来而不进行有效的信息归类并无区别。

而 iOS 除了字体还有不同的颜色来表现不同性质的信息，同时也有小图标来表现相同信息的数目。各种要素各司其职，将信息表达得直观明确。

活动格窗

活动格窗是Metro UI 呈现给用户的第一特色，它不仅是一个快速启动的按钮，同时也是一个信息更新的展示板，微软宣传这样的设计可以更好的将信息第一时间呈现给用户。

但问题是，活动格窗的面积太小了，只能显示简介性质的数字，小图标表等等，缺少好的信息预览功能，这样的通知系统展现给用户的结果就是“知道有这么回事，但不知道究竟是怎么回事。”用户依然是茫然的。有价值的信息被淹没，用户没有能够便捷地获取有用信息。

简洁的目的不是复杂

Metro UI 是一个形式上简洁的系统，导致的是一个复杂的用户体验。与其相标榜的相反，用户需要花更多的时间在屏幕上才能仔细甄别什么是有用的信息。Metro UI 为了简洁，大多数时候忽视了内容的表现形式，比如细线这种最简单区分内容的形式。Metro UI 在颜色上也有奇怪的特性，屏幕永远处在斑斓和全无的两极，内容的表现形式非常单一。

篇11：UI设计师必学的设计规范

设计规范的层次

粗分成 3 个层面：公司、产品线、单一产品。包含视觉、品牌、用户体验等。

设计规范的目的 量化指标

确定一般可用性原则和审美常识下的避免犯错的方法，以及一旦出现错误后的补救方案。

确认设计关键点

获得该设计规范针对范围内的关键点，包括设计方向和设计元素，以通过项目设计的过程，达到团队成员的更加密切的配合效果。它是一份检验文件，记录过程中的错误，留作以后的经验。并在此可以做出项目和产品设计的里程碑。

规范设计原则

这个原则有可能是针对单个项目的，也有可能是整个设计团队的指导原则，这个原则要被反复强调，反复实施，团队人员要共同为这个原则负责。

简单来说就是：告诉你这些组件可以怎么用、用在哪里、有什么样的限制、怎么验收。

以上取自 设计规范(Design Code / Design Specifications)

产品组成

产品的组成大约可以拆分成 页面 > 组件 > 元素 > 图(影片)、文字、icon、窗体、互动 等。

各元素都可能需要制定 色彩、透明度、尺寸、间距、文件格式、质量、风格 等。

互动包含 手势操作、过场动画、特效、音效、震动 等。

先将各个产品拆到最小单位，再进行分类整理，通常就是那几种分类方式。参考现有的设计规范会更容易理解。

别人家的设计规范

我又把 Google design guidelines(自备梯子)掏出来了，这份应该是目前最流行、写得详细的一份设计规范。可以从里面分析设计规范要包含哪些内容。

从左方的选单中可以看到这份文件包含：总览、动画、风格、布局、组合组件、图片、易用性、资源。点开后还有更详细的分类，之后才会是内文部份。

每一个组件或元素都会包含

元素意义

使用规则、限制

运用场合、时机，与其原因

和同质元素间的一制性(新制规则)

组合运用

各种状态

平台差异性

正确示范、错误示范

元素意义

这个元素有什么的功能、对用户来说有什么帮助、呈现什么信息等等。

使用规则、限制，与其原因

要怎么使用这项元素、使用这项元素需要注意什么事情?为什么?

运用场合、时机

什么情况下会使用到这项元素?它会出现在什么地方?

和同质元素间的一致性(新制规则)

若现有同质元素不敷使用、需另制新款时，必须符合哪些规定以求风格一致?(如icon)

组合运用

当元素和其他组件混合使用，会有什么限制?是否有特例情况?

各种状态

若元素会因操作或其他原因呈现不同样貌状况时，规则为何?

平台差异性

若产品发布于各种平台上，该元素是否会有不同的情况?

正确示范、错误示范

除了正确示范外，将常见的错误一并标示可以降低出错虑、节省来回修改的时间。不仅只有文字之外，最好附上图片甚至动画说明。

制作文件的规范

只要是「文件」都有它的规范存在，即使是 Style Guideline。制作这份文件也有它的规则存在。

阶层

分类

顺序

视觉

维护人员

阶层

你的产品可拆分成几个阶层?阶层的规则是什么?如果不懂的话先套用 Google Design 的分类，之后就知道怎么创健自己产品的阶层。

分类

即使分了阶层，也会有各式各样的元素待整理，比如按钮。同性质的放在一起或是同个区块才会用到的方在一起，要看你的产品适合套用什么样的分类规则。

顺序

最重要信息的放最醒目的地方，这次改版才加入的新规则也可放在最醒目的地方。这份文件要用什么规则排序目录需要好好思考。

视觉

这份文件的排版、色彩、字体字型、内容一致性、档案发布的格式等等，都会影响到使用者是否能快速找到他想看的章节。

维护人员

规范不是做好了就算，每过一段时间就需要检查改版。需要明确订定编修人员，并建立改版审核机制「要在什么情况下才能变动此文件的内容」，确保此文件的稳定和可信。

结论

篇12：有待设计的Android UI

但Android上就不一样了，Android 4.x之前，Google 对应用开发市场没有一个统一和严格的标准，导致Android应用良莠不齐。但Android 4.0之后，Google 开始重视UI设计了，并于去年一月份推出了Android Design 官方指导网站，提供了比较完整的指导方案和大量Android 模块。

到目前为止，Android Design 诞生已经一年有余，这中间也出现了很多按照Android Design设计的优秀App。但相比于大部分App（尤其是国内和官方日益分裂的Android市场），有类Holo主题的Android Design App还是极少数的。大部分都是将iOS上的那套UI直接搬过来，不仅体验、交互有很大的问题，同时在Android 4.x的系统下也显得丑陋不堪。

Android、iOS、WP这三个系统平台的设计语言和理念完全不同。iOS是将其拟物化风格不断地放大，尽可能的模拟现实生活和模仿用户最自然的交互方式，并在其优质的屏幕和触摸体验下尽量的把学习成本降到最低。Win8和WP则是采用名为Modern的贴片风格，将所有外在形式的东西尽可能的压缩，把内容凸显出来，以扁平化的设计理念让内容的布局和呈现都实现了一种质的突破。虽然其简陋的界面和稍有复杂的手势操作会让学习和适应成本升高，但其突破性的设计理念仍然吸引了业内大量的借鉴和模仿。

而Android 的设计又和上面两个完全不同。从内容表现形式上来看，Android 偏向于Win8的扁平化风格，但它又在细节之处运用了很多仿真的效果。比如在按钮、键盘或卡片分层上，都会有一到两排的像素差异，做出高光和立体的效果；而在设置界面的控制按钮上，也会上下使用一排和周边融合的像素来实现立体感，让用户觉得这是一个真实的滑块；Android 4.x 大量使用黑色、蓝色和浅灰色，也让整个界面看起来没有Win8扁平化那样乍眼。可以说，Android Design 在拟物和极简之间找到了一个微妙的平衡，恰到好处的同时又把机器人的Geek风格表达的淋漓尽致。

篇13：UI规范&UI指南&UI组件交互设计

曾经看到有的公司同时有以上 3 种或两种职位，不知道具体有什么区别?

[用户体验设计师、UI 设计师和交互设计师有何区别？]

篇14：浅淡UI设计和UI设计前景

信息时代的软件与互联网产品靠什么吸引用户？今天的用户早已不满足于简单界面功能的使用而更注重情感体验。与之相应，近几年，一个新兴的名词在设计领域悄然而生，以之命名的诸多部门相继成立，与之相关的专业也在各大院校应运而生，这个词就是“UI”。那么，什么叫UI设计？什么是UI设计师？他们就业前景怎么样？

目前在国内UI设计还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI设计的理解还停留在美术设计方面，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI设计仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。

UI即用户界面设计，也称人机界面，最普遍的应用是在软件开发中，主要是指程序的用户操作界面的设计，随着Web应用的普及，UI也应用在了Web的用户界面规划上了。网站用户界面（W UI）要经过规划、美术设计、制作几个过程。简而言之，UI一般指网站界面、软件界面、手机应用界面等所有图形用户界面的设计，手机操作系统、游戏操作系统、各种网站网页的界面设计，也属于UI设计范畴。

但专业、顶尖的UI设计师不仅仅局限在网页、APP应用程序上的界面设计，更应掌握人机交互的技能。以用户体验为基础进行的人机交互设计，能考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且高效使用产品。交互设计的目的是使产品让用户能简单使用。

以Iphone手机的锁屏界面为例。设计师除了要考虑界面的整体美观，还要让人不阅读说明书的情况下，知道如何去操作，一眼便能找到开机的按钮并且知道去移动，当移动滑块，机器会发生什么样的变化，并让操作者确定已经成功。滑块移动到一半放手，又会是什么样的变化。整个人与机器的交流过程便是人机交互。

篇15：UI设计教程UI设计色彩之道

随着移动界面设计的飞速发展，流行的设计风格也在不断变化，一个好的UI设计会给用户带来深刻的记忆、好用易用的体验。从UI设计的版式、信息层级、图片、色彩等视觉方面的运用，直接影响到用户对App的最初感觉，而在这些内容中，色彩的搭配方案是至关重要的，产品整体的定位、风格调性都需 要通过颜色，给用户带来感官上的刺激，从而产生共鸣。色彩是移动设计最重要的因素之一，并且有自己的流行趋势。色彩是第一印象的所在，具有关键的作用。

一、色彩基本概念

色谱

把一条连续彩虹中的“可视光”分解成从蓝到红的色谱

色环

通过把两种或两种以上的颜色混合在一起，就可以得到一种特殊的颜色。从本质上讲，色环就是色谱可以看到的颜色所形成的线性连续环。

三原色

三原色是能够按照一些数量规定合成其他任何一种颜色的基色。

三原色：红、绿、蓝

色彩三原色：红、黄、蓝

色光三原色：红、绿、蓝

喷墨打印机的墨盒。四种墨色：蓝绿（青）色、红紫（洋红）色、黄色和黑色。

颜色的不同是由于电脑用的是正色，而打印机用的是负色。显示器发出的是彩色光，而纸上的墨则吸收灯光发出的颜色。

邻近色

邻近色是已给出的颜色之外的任何一种颜色。如果从橙色开始，它的两种邻近色应该选择红和黄。

用邻近色的颜色主题可以实现色彩的融洽与融合。

互补色

互补色是色环中的直接位置相对的颜色。如果想使色彩强烈突出的话，选择互补色。

分离补色

分离补色由两到三种颜色组成。选择一种颜色，它的补色在色环的另一面。可以使用补色那一边的一种或多种颜色。邻近色作为背景，补色作为文本色。在这种方式下，背景色之间完全地融合在一起，不会招来人们特别明显的注意，并且能够使文字突出出来。

组色

组色是色环上距离相等的任意三种颜色。组色被用作一个色彩主题时，会对浏览者造成紧张的情绪。因为三种颜色形成对比。

在UI设计中，如果界面中颜色比较多，可以调整色彩的明度及饱和度，或者运用黑色、白色、灰色等颜色作为过渡，降低页面色彩的冲击感。

二、色彩搭配技巧

不同的色彩——不同的心理感受----色彩同主题相适合

红色---热情，活力

绿色---宁静，希望

橙色---轻快，时尚

黄色---明度高

蓝色---凉爽，清新，专业

白色---洁白，纯真

黑色---深沉

灰色---中庸

三、色彩与心理

暖色

暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。

暖色调会让人产生的心理效应包括：

1、温度感   暖色会让人觉得温度较高

2、空间感   暖色会产生膨胀效应，会有向外突出的感觉

3、暖色更容易唤起食欲

4、暖色在较为饱和时，会给人刺激的感觉，有提神的作用，但是如果较为柔和，反而会具有让人感觉安心的作用

冷色

冷色来自于蓝色色调，

比如蓝色、青色和绿色。

冷色调会让人产生的心理效应包括：

1、温度感   冷色会让人觉得温度较低，较为凉爽

2、空间感   冷色会产生收缩效应，会有后退的感觉

3、冷色会让人更冷静，身心放松，具有催眠的效应

UI设计中，不同行业的App会对色彩有不同的要求

食品行业多用红色、橙色等暖色，更能唤起食欲。黄绿色与紫色会抑制食欲。

巧用颜色的识别性设计UI

所谓颜色的识别性，是指在众多颜色中，容易与其它颜色区别开的性质。重要的功能，颜色辨识度要高。

诱目性的运用

所谓颜色的诱目性，是指颜色引起人们注意的程度。诱目性越高的颜色越容易引起人们注意。彩色比无彩 目性高，饱和度高的颜色比饱和度低的诱目性高，暖色比冷 目性高。诱目性最高的是红色。将希望用户点击的内容使用诱目性更高的颜色，是一种聪明的设计

合理使用颜色

我们在设计UI时，也许会希望使用更新颖的配色，但是要合理。例如，绿色代表着安全、通行、准许的意思，可以让人感到轻松，缓解压力，所以绿色通常用于开始按钮和下载按钮，还有成功提示页面。灰色的按钮一般情况下，都会代表着禁用状态，因此尽量不要将可以正常点击的按钮设计为纯灰色背景，会让用户产生困惑。

四、配色与行业

在实际进行UI配色选择时，应该根据App的行业分类，客户的需求等进行选择。不同的颜色会给人不同的感觉，冷色调会给人专业的感觉，暖色调则更适合营销等。

游戏界面配色：

游戏界面多选用鲜艳、饱和度高的色彩，这样的配色娱乐感较强，可以给人轻松欢快的感觉。

娱乐类App界面配色：

娱乐类App界面颜色较为多样，与具体内容有关。深灰色的背景色运用较多，因为搭配较为方便，而且可以给人一种高端大气上档次的赶脚。

购物类App界面配色

暖色调较为吸引注意力，而且能刺激人们的购买欲望，因此购物类App多采用暖色调。

新闻类App界面配色

新闻类App的配色也较为多样，但有一个共性是，因为新闻类App界面上的文字图片都比较多，因此多采用白色或浅灰色背景，给人一种较为干净整洁的感觉。下图最后一个App是一个国外的新闻类App，采用了黑色背景。各位看官们可以自行揣摩其中的奥妙。

商业类App界面配色：

商业类App的配色由于其行业不同，也会有不同的选择。很多公司的App会选择自己公司VI形象的颜色作为App配色，这样的配色效果更具有企业的整体性。

五、小结

UI设计中色彩使用的技巧：

黑白灰最适合配颜色

调整颜色的饱和度和明度，可以让颜色给人全新的感受

用一个色系中的色彩是最安全的方式

不要将所有颜色都用到，尽量控制在三种色彩以内。