什么是UI
要学习UI，先要了解什么是UI，这个概念大家打开度娘搜一下，概念就有了。发展至今，UI这个词语从流行到现在，大家都经常听着，但是很多人分不清这些概念而混淆。请允许我引用一段百度的解释：UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。
导航，按钮，进度条，开关等等，基本都属于UI的范畴，也是我们日常生活中最常见的UI，从互联网的页面导航，到各种下载按钮，点击按钮，或者手机上的WIFI开关，这些各式各样的人机交互，都是UI设计，跟人的生活离不开。
我们这大多数人是从平面设计转的思想去做UI，会走入一个误区，我们的页面有时候做的很精美，但是却很难去使用，客户看到视觉部分觉得很炫目，很有所谓的设计感，但是当真正使用的时候，感受却不那么友好。遇到的问题也是也是比较多的。
用户不知道这个是什么东西，有什么作用?
用户不知道通过这个按钮或者界面，能达成怎样的目的?
当用户有兴趣去尝试的时候，却不知怎么样开始?
当用户开始后，怎么进行下一步，没有明确的提示?
用户不想使用的时候，怎么快速退出?
用户每个操作，是否会有心理上的愉悦，或者只是觉得很枯燥?
什么是UE
通过以上的一些提问，我们提出一个概念。在使用软件，或者打开这个页面的时候，我们推崇效率，但是这个过程如果能让用户感到愉悦，同时又不会觉得效率低下，着就是这就是UED（用户体验设计）的事情了。好的用户体验，能让你的设计变得有个性化，从众多同类产品头脱颖而出。
通过以上的一些提问，我们提出一个概念。在使用软件，或者打开这个页面的时候，我们推崇效率，但是这个过程如果能让用户感到愉悦，同时又不会觉得效率低下，着就是这就是UED（用户体验设计）的事情了。好的用户体验，能让你的设计变得有个性化，从众多同类产品头脱颖而出。
要做出优秀的用户体验设计，我们要定位使用者，使用环境，使用方式并且最终为用户而去设计。所以界面设计要和用户研究紧密结合，是一个不断为使用者提供满意的视觉设计和操作体验的过程。
开始进入我们今天的主题，科学的UI必定有一套科学开发流程。
我学习UI的时间也不长，不过略有心得，这里为大家稍微说下。
一个通用的界面设计大体分为五个步骤，
①了解需求
②做出原型
③视觉前端开发
④测试优化
⑤用户验证
了解需求
首先要了解需求方需要做一个什么样的东西，有什么功能。然后就是对用户进行需求分析，你的目标用户是什么人群，有什么样的使用习惯，什么样的使用环境等等。任何一个要数的改变都会让你的设计做出相应的更改。
除此之外，我们还要了解同类型的产品。大家的功能一样，我们就要做得比他更好，才有存在价值。从单纯的界面美学说哪个好，哪个不好，不是一个客观的评价。我们婉转点说就是，要做出更适合我们最终用户的，就是最好的。
做出原型
当前期工作调查好之后，我们就要输出各阶段所需要的产品原型了，可以是一个简单的线框图，或者框架需求示意图。要同时满足需求方和用户的各种解决方案。包括任务流和简单的页面交互。组织评审和讨论。确认一个具体的方案线框图和必要的说明文档。如果有确切的需要，可以配合用户调研，进行可用性测试。我们都知道，所以问题发现得越早，对我们开发者越好。改稿这种事情不是大家所期望的。
要做的事情：
1：根据需求，画出框架图，跟需求方对框架图进行评估
2：平衡需求方、用户、实现技术、设计等各方的需求，做出优先级，分好主次。
3：发现问题后，最好有个多解决方案。
4：线框图要做科学点，别把设计和制作前端给坑了；线框图要做科学点，别把设计和制作前端给坑了；这个很重要，所以要说两遍。
视觉前端开发
根据需求方的品牌形象，定位用户设计界面。视觉前端的开发，我们要跟需求方不断沟通协调确认。避免做好出来，才给需求方，最后才发现不是他想要的。这个阶段需要跟设计者讲解需求，帮助他们准确的时间客户需求。
要做的事情：
1：根据产品定位，找下市面上有没有类似的设计风格，找出差异点，进行设计风格的确认
2：开始准备素材，进行设计
3：设计的过程不断跟需求方沟通确认需求，对交互设计进行改进
4：和前端开发人员讲解设计要点。设计也不能把前端给坑了。
测试优化
产品做出来之后，观测核心数据变化，进行可用性测试和用户体验调研，优化版本，修正BUG。这一步通常是比较劳心的，因为整个产品的原型已经制作出来，如果这个时候发现大的缺陷，改起来就比较费时费力。
要做的事情：
1：把自己当成用户，换位思考，去使用产品，尽量发现不足
2：把自己当成用户，换位思考，去使用产品，尽量发现不足
用户验证
测试改正的产品，我们最终可以把它推向市场。但是这个时候，设计并没有结束，我们还需要用户的反馈，专业的设计师应该在产品上市后，去了解最终效果，看看用户使用的最终感想，为以后的设计产品累计跟多好的经验。
1.清晰是第一目标
清晰是界面第一位也是最重要的目标。只有清楚的知道你设计的界面是什么，明白为什么要用它，理解界面是如何帮助他们交互的，预测用它会发生什么。人们才可能高效的利用它。模糊和迷惑的界面使得用户连疑问的机会都没有。清晰的界面带给用户自信引导用户更深层次的使用。一个复杂凌乱的界面不如分割成多个清晰的界面。
2.界面是为了交互而存在的
界面是为了人与世界交互而存在的。它帮助我们理解交互，引导我们使用，将我们和世界联系在一起，使我们能够使用各种服务。界面设计不是艺术创作。界面不是漂亮的风景画。界面的功能可以被测量。最好的界面不仅仅有其功能更重要的是启发，唤起，强化我们和世界的关系。
3.不惜一切保持注意力
我们生活在一个嘈杂的世界。现在很难在一个没有什么东西打扰你或分散你的注意力的地方安静的阅读了。注意力很宝贵。不要让你的设计被干扰注意力的垃圾围绕。记住什么是你的界面最重要的东西。如果用户在阅读先让他们完成阅读再展现广告。尊重注意力不仅会让你的用户感到快乐还会使你的界面更有效。当使用是终极目标，那么注意力就是必要条件，要不惜一起保持它。
4.保持用户的控制力
人类在当他们觉得一切都在掌控中是最舒服。糟糕的软件使人不舒服，强迫用户进入无计划的交互操作，令人迷惑的过程和出乎意料的结果。经常监测系统状态，描述因果关系，无时无刻不洞察用户期望以保持用户控制力。没有显而易见操作方式，再简单的操作方式都要让用户了解。
5.直接操作是最好的
最好的界面是我们可以像使用现实世界的东西一样操作的界面。然而，并不是所有的操作方式都有现实的参照，我们设计的界面越来越多的是帮助用户与各种信息化的东西交互。界面很容易过度设计，按钮、图像、选项、窗口、附件等等使我们止于操作UI组件而忽略重要的目的。相反，努力接近直接操作的原始目标，尽可能少的留下设计的痕迹，尽可能多的使用人类自然手势。理想的界面设计是使用户可以仅用注意力就可以直接操作的轻量的设计。
6.一个界面一个主要动作
我们设计的每一个界面都应该提供用户真正价值的唯一的动作。这样使用户更易于学习、使用。如果一个界面不止一个主要动作很快会令人迷惑。就像一篇文章要有一个主题。保持次要动作在主要动作之后，就像一篇文章的重点并不是因为可以在Twitter上分享而是可以被人阅读和理解。
7.提供一个自然的下一步
很少有仅一步的交互操作，所以你要为你的每个界面设计下一步交互操作。设想下一步应该是怎样的再设计出来。就像我们谈话一样，先抛出一个话题再把它引向深入。不要让用户做完你设计的操作后陷于迷茫。提供一个自然的下一步帮助用户完成目标。
8.形式追随功能
符合用户预期的行为会使用户感到舒服。不管是人，动物，物体还是软件保持与预期一样的行为会让人觉得与其有良好的关系。为此设计元素应该保持行为和外观的一致预期。也就是说，用户可以仅凭界面元素的外观就可以预测它会有什么样的功能。如果有一个按钮的外形就应该有按钮的功能。
9.一致性问题
按照上一原则来说，不同功能的界面元素外形也应该不一样。那么一样功能的界面元素在外形上应该保持一致。这两者一样重要。当应该使用不同的视觉处理时，设计新手往往为了在努力保持一致而模糊差异使用相同的视觉处理。
10.清晰的视觉层次会更好
一个界面上的视觉元素如果有清晰的视觉秩序的话，那么它就会形成良好的视觉层次。也就是说，用户每次看到同样的元素会有同样的秩序。孱弱的视觉层次会让用户不知道该看哪最终感到困惑和混乱。在多变的情况下很难保持清晰的视觉层次，因为视觉重心是相对的，如过所有的东西都是重点那就没有重点了。如果一个单一的视觉重心元素要加到界面中去，设计师应该重新布局视觉元素以达到合理的视觉层次。遗憾的是，大多数人并没有意识到清晰的视觉层次会使你的设计更好。
11.合理的组织以减少认知负荷
合理的组织可以以少胜多。理清设计中各种内容的关系，可以帮助用户更好更快的理解你的界面。相同的元素放置在一起，用位置和方向显示自然的关系。合理的组织元素可以减少用户的认知负荷，应为你已经帮他理清各种元素的关系了。不要强迫用户去认知，用你的设计自然的展现。
12.用色彩来强调，但是不要毫无变化
物体的颜色会随着光照的变化而变化。正午和黄昏时树的颜色会有很大的不同。正如现实世界多彩的颜色一样，界面上的颜色也不应该一成不变。颜色可以强调引导用户的注意力，但是不应该是唯一不同的东西。给长时间的阅读的界面加上点淡淡或者亚光的背景色，减少原始颜色的饱和度。当然，只要对你的用户是适合的，增加鲜艳的颜色也未尝不可。
13.逐步展现
每个界面只展示必要的信息，如果要让用户做出选择，请给用户足够多的信息，在随后的界面展示细节。避免过分解释或者一次展示所有东西的趋势。可能的话，按需要逐步展示信息。这样会使你的设计更清晰。
14.帮助用户进入情境
理想的界面是不需要额外的帮助的，因为界面本身可以引导用户学习和使用。现实情况下可采用情境内的帮助，并且只在需要时展示。让用户在帮助中寻找他们想要的答案是把负担加在用户身上。在需要的时候内建帮助很好，只要确保不阻碍熟练用户的使用就可以了。
15.初始状态是个关键点
对一个界面的第一印象十分重要，却经常被设计师忽视。为了更好的帮助用户上手，我们应该用心设计什么都没发生的初始状态。初始状态不应该是白板一块，它应该用户以提示和引导。绝大部分对界面的误解发生在初始情境，一旦用户掌握了规则，他们离成功就不远了。
16.看不见的设计最伟大
好设计的奇特特性就是用户不会感觉到它是被精心设计的。原因之一就是成功的设计会使用户专注于自己的目标而忽略界面。完成目的之后的满足感使他们不需要考虑其他的。对于设计者来说这很残酷，因为我们的好设计却得不到任何夸奖。但是伟大的设计师满足于好用的设计并且知道满意的用户经常会很安静。
17.按其他设计准则来做
视觉、平面、字体、广告、信息架构，所有这些领域的设计准则都可以用来指导界面设计。不要轻视这些准则，从它们中汲取营养。寻找其他未触及的领域，想想我们可以从出版，编程，装帧甚至滑板，消防，空手道中学到什么。
18.界面因被使用而存在
大多数准则归结为一点：界面被用户使用就是成功的。就像漂亮的椅子坐着不舒服一样，用户不用再漂亮的设计也是失败的。因此，界面设计更多的是创造舒适的使用环境而不是创造一个值得使用的艺术品。界面仅仅满足设计者的审美是不够的，它必须是可用的。
** 点击"图片"按钮, 显示大图
需求分析:
问：&1.点击图片之后就放大图片的功能的步骤是什么？
1>创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面
2>需要把“图片按钮”, 放置在coverView的前面
3>将图片按钮放大
4>将这些操作放在block动画当中。
问：&2.黑色半透明的背景图片是一个什么控件？点击灰色背景后需要做哪些操作？
解析：是一个按钮，因为需要监听点击事件做事情。
1. 让"图片按钮"通过动画的方式回到原来的位置
2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除
* 实现思路（步骤）:
1> 添加一个"阴影"按钮, 因为该"阴影"要实现点击, 所以用"按钮”。 设置半透明 来作为蒙版
2> 然后再把"头像按钮"显示在"阴影”上面。 这个属性可以让这张图片任何时候都是显示在最上面:
3> 通过动画的方式改变"头像按钮"的frame(位置和尺寸)变成大图效果。
** 注意: 如果图片没有变大, 检查是否没有取消"自动布局(Auto Layout)"
选中图片—>点击文件属性—>Interface Buider Document—>去到"Use Auto Layout”的勾
**再来实现 点击"遮罩阴影", 回到小图的功能
# -—>这里是因为后面也要给蒙版创建点击事件,然而蒙版是临时创建的,外部方法还不能直接访问,所以这里可以先在外部定义一个全局属性,然后在蒙版创建后赋值给这个属性,这样就可以在方法中操作调用了
//定义临时蒙版的属性,最后把创建的临时蒙版赋值给这个属性
@property(nonatomic,weak)UIButton *tempMengBanView;
###注意:这里使用的是weak弱引用, 这样用的原因是,在下面把这个按钮添加到了根视图,已经间接的强引用了(addSubview就表示强引用),所以这里不需要再用强引用,
需求分析:
蒙版的点击事件之后,我们需要做什么:
1> 通过动画慢慢将"遮罩阴影"的透明度变为0
2> 通过动画慢慢将"头像图片"的frame修改为原来的位置
3> 在动画执行完毕后, 移除"遮罩阴影”
//ViewController.m//01_猜图游戏#import"ViewController.h"#import"DXQuestion.h"@interfaceViewController ()
@property (nonatomic, strong) NSArray*questions;//记录icon button的原始的frame@property (nonatomic, assign) CGRect iconFrame;@property (nonatomic, weak) UIButton*coverView;@end@implementationViewController
//点击了大图按钮- (IBAction)didClickShowBigImageButton:(UIButton *)sender {//0. 记录 btnIcon 的frameself.iconFrame =self.btnIcon.frame;//1. 创建一个和屏幕一样大小的半透明UIView, 用来遮盖整个界面UIButton *coverView =[[UIButton alloc] init];
coverView.backgroundColor=[UIColor blackColor];
coverView.alpha=0.0;
coverView.frame=self.view.bounds;//为半透明背景添加一个单击事件[coverView addTarget:self action:@selector(didClickCoverView:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:coverView];
self.coverView=coverView;//需要把"头像按钮", 放置在coverView的前面[self.view bringSubviewToFront:self.btnIcon];//2. 讲头像按钮（图片按钮）放大CGFloat iconW =self.view.bounds.size.width;
CGFloat iconH=iconW;
CGFloat iconX=0;
CGFloat iconY= (self.view.bounds.size.height - iconH) *0.5;
[UIView animateWithDuration:0.5animations:^{
coverView.alpha=0.6;
self.btnIcon.frame=CGRectMake(iconX, iconY, iconW, iconH);
}];
}//点击了"半透明背景"按钮- (void)didClickCoverView:(UIButton *)sender {//1. 让"头像按钮"通过动画的方式回到原来的位置[UIView animateWithDuration:0.5animations:^{
self.btnIcon.frame=self.iconFrame;//2. 让"半透明背景"通过动画的方式透明度变成0, 然后从父容器中移除self.coverView.alpha =0.0;
} completion:^(BOOL finished) {
[self.coverView removeFromSuperview];
}];
}//点击了下一题按钮- (IBAction)didClickNextQuestionButton:(UIButton *)sender {//1. 切换题目的显示[self nextQuestion];
}//点击了中间的图片按钮- (IBAction)didClickIconButton:(UIButton *)sender {//根据是否已经创建了coverView, 来决定是应该放大还是缩小if(self.coverView ==nil) {//放大[self didClickShowBigImageButton:nil];
}else{//缩小[self didClickCoverView:self.coverView];
}
}
这样整个过程就完成了,
