关于科技感的UI
科技感
<b>“科技感”是什么?</b>
直观地说，“科技感”就是让人看上去觉得是未来的、高科技的产物的风格。
那么怎么样才能营造出这种感觉呢？
可以来从人的感受来分析。在分析设计创意的时候，我们一般会用头脑风暴的方式找到自己需要的素材。
我们来试一下：由“未来”、“高科技”出发，我们能想到什么？
经过简短的思考想出了以下事物：太空 机器人 全息投影 透明屏幕 ……
然而关注点在于UI设计，而不是为一个科技感的海报，banner之类设计品找素材。
那么我们需要从这些事物中抽象出一些东西。
这个抽象出来的东西就是：距离感。
太空，机器人，屏幕等等，往往会给人一种冰冷，有距离的感觉，
而我们感受到的正是我们生活的世界和未来世界的距离，“科技感”也就由此产生。
基于“距离感”这个概念，下面来看哪些设计元素可以提升用户界面的科技感。
<b>颜色</b>
科技感所需求的色调一般以冷色为主，因为冷色，诸如蓝色，青色正是冰冷的颜色，大面积的冷色调和深色很容易营造出距离感。
<b>质感和光感</b>
能让人产生距离感的质感，需要避免描绘我们在现实世界能看到的肌理。
很容易想到，这个质感可以是：半透明。
科幻电影中经常出现全息投影的画面，而这些投影多半是半透明的。
现实世界中，我们很难看到半透明的人或者物，这就营造出了科技感。
半透明经常和发光一并使用，以增强这种效果。
<b>形状和字体</b>
同样按照距离感的概念，简单的几何图形，比如圆环，线，矩形等的复合，也可以营造科技感。
选用的字体多为线条硬朗的无衬线字体，这些字体在一般出版物中可能不太常见，也体现了距离感。
体验设计
<b>动效滚动</b>
超链接是互联网的双刃剑，当你点击链接时，你可以在互联网中任意遨游，随心所欲。
可是过度自由好吗？不见得，比方说你在浏览一款精美的产品页面，然后你点击了一下页面中的链接，突然导入了一款令人毛骨悚然的木偶商店页面。这就是超链接的弊端，有时候的页面转换太突然，缺少过度，让用户一时不能接受。
我们可以看看书籍的用户体验：故事发展一般是线性的，每一章都和上文有所联系。想要阅读第二章，必须先阅读第一章，以便大致了解书中的环境与人物关系。如果你”跳章”阅读，不可避免的会错过一些关键剧情，因此无法理解有些内容。
在网页设计中，同理，尤其是那种内容比较大，页面比较长得网站，这种情况经常无意识的发生：用户会错过之前的某些关键内容，而且又缺少提示，因此很难理解当前内容，通过添加动效滚动，可以修正这一问题。
掌握动效设计！让用户体验设计更加智能动态
再来和这种设计比较一下：
掌握动效设计！让用户体验设计更加智能动态 第一种动效，锚链接的”名称”会有从左向右移动的行为。这样进行”跳章”时，用户便能做好心理准备。因为从”Home”移动到了”Contact”，用户便能了解，从主页转到了联系方式页面。而如果突然转变，毫无过度的动效，用户很难理解发生了什么。
注意：界面的突然改变会让用户难以适应，千万不要这么设计这不符合用户的预期。要满足用户的预期，同时合理的引导。
<b>状态切换</b>
正如上面提到的那样，突然改变，毫无过渡，这样的局面用户是无法接受的，我们需要让界面动态一点，达成圆滑的过度。动效能够帮助用户理解界面之间的转换。我们可以字面的想一下，突然往往不自然，因为太快了，而且现实世界中万物的运转也都是缓慢、协调、自然的，很少有突兀的改变。我们再来看看切换菜单。这个”加号”有效的引起了行为召唤，用户会忍不住点击，点击后便侧拉出另外一个界面。这时加号会旋转45度，变成”叉号”，再点一下便回到原页面。很协调的设计，也符合用户显示生活中的预期：加号是添加，叉号是删除。
掌握动效设计！让用户体验设计更加智能动态
这种简单的过度，需要图标承载更多的意义。设计师首先需要掌握用户心理，知晓用户的预期，然后选择合适的图标，在细节上狠下功夫。结果呢？看看上面这个小动图，这种切换模式非常的友好，而且让用户对信息层级有了更深刻的认识。同时，图标能够有效的引导用户操作。
注意：你的页面元素在各个状态下都要易于理解。
<b>下拉填表、评论动效</b>
很多网站的填表和评论设计的并不好。为何？因为有时候你只想评论，结果跳转至其他页面，填写了一大堆不相干的个人信息后才能评论。非常烦人。
为了鼓励用户评论，增加网站的互动性，我们可以设计一些下拉评论动效。这样用户不用切换界面，而且只需填写最基本的个人信息即可。可以看看下面这个New York Times的网站：
掌握动效设计！让用户体验设计更加智能动态
但其实我们可以更进一步，这种设计还有个不便之处：用户若想评论，还需要拉到页面最低端进行评论。应该满足用户随时随地评论的需求。可通过下面的动效实现。
掌握动效设计！让用户体验设计更加智能动态 可以把这个评论域固定在顶部，然后根据用户需求，选择是否动效显示。
这样，就能减少评论时的界面繁杂感，让人感觉你是诚心诚意邀请用户评论。而第一种方法需要拉到页底，加之惯例是由上到下自动载入最新评论，如果一篇文章的评论很多，用户若想评论，必定要经历痛苦的翻页。这就是这个办法解决的问题。
注意： 有些UI组件可以简化成最基本的形式，当用户需要时通过动效来进行拓展。
<b>基于情景的消隐</b>
基于情景的消隐
这是iOS上的Chrome，有着基于情景的消隐动效。
当向下滚动时，导航控件自动消隐。用户向上滚动时，导航控件出现。优设哥发现这一点上，腾讯网的新闻详情页已经采用了。案例围观地址（上下滚动鼠标滑轮，注意页面顶部导航的变化） 。这种方法既能提高浏览体验、也拓展了有限的浏览空间。这对于空间限制较大的移动设备来说，尤为重要。
用户会快速扫描内容，略过不感兴趣的内容。当用户停止快速浏览时，说明上面或者当前有用户感兴趣的内容，为了便于导航，导航控件再次出现。这是一种动态的界面。
注意： 基于情景的消隐，目的在于提高用户的注意力以及节省屏幕空间。
<b>可接受的转换</b>
iOS_Lockscreen-500-final
可接受性的概念来自认知学理论，主要面向引导用户这一问题。用户界面需要一种可接受性——软件界面能够自然、合乎用户情理的完成转换。
我们可在iOS的照相应用中发展这种UX理论。
比如说解锁涟漪效果，便说明操作有效。这给用户以提示，用户便能接受下一步的转换。然而在iOS7中，苹果移除了这一特性，因为用户已经全盘习惯、熟知了这种操作，用户已经适应了这种转换，因此动效作为”引导”已经没有存在的必要。我想这大概就是扁平取代拟物的原因——之前iOS的拟物隐喻众人熟知，已无引导用户的必要。但是还是要赞一下曾经的涟漪效果，用户引导效果非常棒。
注意: 赋予元素高可接受性，能为用户指明操作方法。
