UI界面
关于UI界面的一些摘录
1.8个技巧助你排出好看的版式
2.交互设计中持续关注的五个问题
3.UI 设计——细节决定成败
一、加载动画存在的意义
众所周知，app服务器在加载数据的时候需要用户等待一段时间，为了缓解用户等待过程中的焦虑情绪，设计者可以采用加载动画的方式来缓解用户的等待时间，使整个等待过程变得更加友好、流畅。
一个好的加载动画分为两个层次，第一个层次是满足用户的基本心理预期，缓解等待的焦虑；第二个层次是要给出用户一定的惊喜，甚至让用户对加载动画抱有期待、好奇的心理。
这里我们暂时先只讨论第一个层次的内容，因为这已经能够满足大多数app的需求了，至于如何做出让用户惊喜的加载动画（如饿了么、京东的加载动画），我们可以另外讨论。
二、加载动画的使用场景
查阅大量关于加载的资料后，发现很多教程与文章都是从样式的维度来分类的，今天我们换个维度，从使用场景出发，来打造属于我们自己的加载动画设计体系。
加载动画的常见使用场景一共分为以下5种：
1.下拉刷新加载
2.切换新页面数据加载
3.页面上拉加载
4.页面局部加载
5.启动页加载
8个技巧助你排出好看的版式
一、使用长线
利用长线排版这个技巧应该很多人都用过，但是它并没有想象的那么简单，如果运用得不恰当，不但不会好看，还会显得很死板。长线在排版中的使用一般是为了满足以下几个需求。
1.区隔信息
即利用长线条把版面里不同类型的信息区分开，你可以根据实际情况来选择使用虚线还是实线，觉得黑白线单调的话也可以给它点颜色瞧瞧，使用长线区隔信息可以使其看起来更清晰，更方便受众阅读，同时还可以起到规整的作用，使版面不至于太凌乱。
▲如果一个版面内的信息层级关系很多，我们可以同时使用细线和粗线来进行划分。
▲上图使用的是红色虚线，使用虚线会显得没那么生硬。
2.装饰
我们在排版时经常会遇到这样的情况，信息并不是很多，也不适合加图片，所以整个版面容易显得单调和平淡，这时我们可以利用长线来丰富版面，在增加美感的同时还能增加设计感。
▲斜线经常被当做剪刀用，俗称“一剪没”。
▲上图文字顶部增加的直线使该排版看起来更专业。
二、使用短线
短线的功能和长线大同小异，虽然没有长线用得那么普遍，但有时候更好用，特别是在网页设计、UI设计、名片设计中，我们能经常看到短线的身影。短线的用法有如下几种：
1.区隔信息
利用短线区隔信息比长线要更灵活一点，不会造成太规矩的效果，而且虽然是短线，但是受众经常会脑补把它延长。
▲当然，有时候是因为信息比较短，所以用短线更合适。
2.装饰
短线也是可以用来装饰的，把短线放在文字信息的前面、或者相对应的留白区域，再选择合适的颜色，可以有效丰富版面。
3.归类
就是用一条短线把一部分信息归为一类，一般采用竖线。把文字左对齐或右对齐，然后在对齐的一面加一条长于或等于这段文字的直线，跟大括号的用法差不多，但是要更好看一些，在信息类别比较多的版面中很实用，如下图：
▲在目录中使用短线是最合适不过的了。
三、使用色块
使用色块进行排版也很是实用的一项技巧，而且容易营造时尚的感觉，经常被用在画册和网页设计当中，色块在版式中的主要用途有以下几个：
1.划分区域
在画册或网页设计中，可以用色块来划分区域，一个色块承载一块信息，使该色块内的内容与其他信息区别开来，如果色块较多时最好让它们形成一定的节奏感，比如呈统一或渐变效果。
▲色块在划分区域的同时还能把一些看起来比较零散的信息组合起来。
2.突出重点
突出重点信息的方式有很多，把它放在色块中也是一种不错的方法，文字和色块要使用对比色。
▲上图的色块是为了凸现标题。
3.分离背景
当我们在图片上排文字的时候，由于图片的明暗关系不是太平均，所以会影响文字的阅读性，这时在文字底部增加色块是一个不错的方法，如果把背景图调成黑白，再使用颜色鲜艳的色块效果会更好。
4.丰富设计形式（装饰）
色块本身就是具有强烈设计感的元素，所以我们可以用色块来进行构图，比如用几个色块组合成一个图形，或者通过色彩搭配制造对比，都可以做出很漂亮且有特色的设计。
四、使用线框
线框和色块的用法有很多相同的地方，但区别也不小，首先线框没有色块那么有视觉冲击力，其次，因为线框的框内是没有颜色的，所以更适合把图片也一同框起来了，而色块主要用来承载文字信息。线框主要的用法有以下3种：
1.信息分组
用线框来把版面内的信息进行分组，跟色块的用法是同样的意思，这里就不多说了，直接看例子吧。
2.信息组织
零散的信息可能会造成版面混乱，用线框把临近的信息框在一起是一个有效的解决办法。
3.装饰
根据版面尺寸、设计元素，合理的使用线框可以使作品更有设计感和美感，如：用图片贯穿线框，塑造一种突破束缚的感觉，或者把线框直接作为版面边缘的装饰线条花边等。
▲在卡片的设计中用细线框装饰在边缘，有点小小的文艺气息。
六、文本绕排
即把文字绕着图片的外轮廓进行排版，这种手法在画册、杂志或报纸的排版中比较多见，因为文字要足够多才能达到效果，使用文本绕排时，图片要用异形效果才会比较好，而且图片要尽量大一点，此方法最适合创造视觉冲击。
七、对齐
因为对齐排版能够制造一种稳定、整洁、统一的感觉，最重要的是便于阅读，所以，几乎是在任何版式中都要用到该技巧。看似很简单的技巧，其实里面也大有学问，有很多优秀的设计作品中都暗藏了很多对齐的玄机，但是过份的强调对齐也会让版面显得很死板，于是有些设计师就喜欢故意制造凌乱，结果总是弄巧成拙。
▲跟我一起唱：左对齐、右对齐、上对其、下对齐、左右对齐、居中对齐。
八、文叠图
跟使用色块不同的是，文叠图不需要其他元素的辅助，而是直接把文字叠在图片上，所以必须要保持文字的可识别性。而且不要把所有文字都放在图片内，而是只放一部分，与图片形成交叉的关系。这种排版的优势在于对比效果强烈，且让文字与图片形成了紧密的互动，不会有各自孤立的感觉。
▲整齐的文字与矩形的图片交叉叠加，既平稳协调又有种冲破束缚的感觉。
在交互设计过程中，你需要持续关注的五个问题
在沟通需求与完成交互稿的过程中，有以下问题要确认并持续关注：
一、明确目标用户
二、使用场景
三、 业务逻辑
在这个人人都是产品经理的年代，交互设计也是很多人都能做的。但是，能做不代表能够做好。对于产品经理提出的需求，最佳的解决方案就呈现在用户对产品的操作过程中，即产品的业务逻辑。
业务逻辑，简单来说就是在怎么做事（how to do）。比如你想买一件衣服，从搜索、到确定付款、再到售后服务，在整个目标活动下的整个动作流程，可以说是业务逻辑。
理清业务逻辑有助于实事求是的整理出产品的功能流程，避免陷入先入为主以及自以为的误区。俗话说，隔行如隔山。对于不同的行业，其所具有的行业规则、术语、硬件设备信息、技术实现逻辑等都是不同的。充分了解产品的业务逻辑，不仅仅能够更好的理解产品背后的需求，同时能够更好的与团队成员、甚至是甲方更好的沟通，也能更好的完成交互设计。
四、页面重点元素
如图，个人信息、账单预览以及安全信息是页面的重点元素，因此在页面布局上进行了特异处理，与下面的已开通服务列表形成视觉上重点与次要元素的对比，包括增大元素面积、图形化处理、色彩特异处理等。
五、 数据量
数据量是页面中变动量最大的元素。不同的数据量对页面的显示、功能、布局都有很大的影响。当数据为空时，页面就是特殊页面，需要考虑是页面错误，还是数据为零，并针对不同的情况进行恰当的提示；当页面数据量过少时，要考虑页面太空的视觉影响；当页面数据量太多时，要考虑分页、筛选、搜索等功能的添加，以满足用户查看数据的需求。
交互设计的工作是构建一个和谐、高效、统一的产品体系，所有的思考、设计都应该以提高整个产品体系的用户体验为前提。因此，认真对待交互设计过程中的每一个设计环节、每一个问题，是提高交互稿质量的基石。过程中的问题很多，需要我们持续关注并解决。
细节决定成败
视觉反馈
反馈在我们制定设计规范时经常会被忽视，但它的存在实际上有效的梳理了产品的整个交互流程。交互设计其实可以看成是设计人与物(app或网站)之间的对话。如果没有任何反馈，就相当于聊天时的你滔滔不绝，但对方却一言不发，两人之间毫无互动。从产品的角度而言，如果没有反馈，用户则无法得知当下发生了什么，也无从确定自己操作的结果，更不必提要进行下一步的操作。所以说无反馈，不交互。
良好的交互设计应该确保用户的每一次操作都能得到视觉反馈，无论成功与否，这会让用户体会到使用产品期间的一种安全感——一切尽在自己的掌控之中。视觉反馈的目的就是通过一种可视化、简洁的形式向用户展示操作的结果以及当前系统所处的状态。
我们在手机上进行点击、滑动等操作时，按钮、控件和其他交互元素通过改变自身形态做出响应，为我们提供反馈。这种反馈模式会拉近用户与产品之间的距离，因为用户可以容易的感受到自己在同屏幕中的元素进行直接真实的互动。
功能性动画可以让用户及时获知状态的变更。
加载动画向用户展示系统的实时状态，使用户能够快速了解目前发生了什么。
留白
留白（或负空间）是指页面中设计师没有放置任何元素的区域。留白不代表一定要使用白色，而是预留出一定空间来组织页面空间中的其余元素。虽然很多人认为留白纯粹属于浪费宝贵的空间，但不可否认留白依旧是UI设计中的一个重要元素。
提升页面可读性
使用留白主要是受限于人类短暂的记忆力，我们的短期记忆可以容纳的信息极少（在未经复述的条件下，大部分信息在短期记忆中保持的时间很短，通常在5－20秒，最长不超过1分钟）。用户看到一个页面，如果里面展示的信息过多，用户就会处理不过来。使用留白就可以减少当前页面中元素的数目，提升页面的可读性。
吸引用户注意力
用户的注意力是宝贵的资源，应该得到合理的分配。我遇到过很多客户，他们说这里要使用大红色突出，那里要放大字体吸引用户注意。在他们的设想中，页面里的任何一个元素都要强调出来，但是殊不知页面中视觉重点有且只有一个，过多的给予对于用户来说其实是一种负担。少即是多，这是互联网时代的信条。
建立层级关系
根据交互设计中的接近法则：当对象之间距离太近时，用户潜意识中会认为它们是相似的。我们可以通过使用留白来建立不同元素之间的层级关系。例如，下图中几乎每一个人都会看到两组点，而不是16个点。
对信息进行整合分组会提升内容的可读性。下图中右表格将15个字段分成3组。同样数量的内容，但用户的印象却大不相同。
