现代网络应用中的UI设计-CH1

1.1 什么是用户界面

说道UI 大家肯定有不陌生，最起码，这两个英文字母还是认识的，所谓UI----user  interface,用户界面。

用户界面设计，并不仅仅考虑如何摆放按钮和菜单，更重要的是考虑应用或设备如何与用户互动，更多的时候是考虑产品与多个用户之间的互动；

这就意味着，用户界面设计不仅要做出出色的产品外观，还要做出好的产品。

那么，什么因素能造就一个伟大的用户界面呢？

 

所有伟大的产品，大都具备下面这8个品质或特点：

1.清晰 

　　使用文字，流程图，层级图，图标等元素，避免用户对界面产生困惑。清晰的界面是不需要使用手册的，同时，还能确保用户在使用过程中减少犯错。

2.简洁

　　如果界面上，充斥了太多的东西，要找到想要的东西是有困难的，用户使用起来，体验也不好。让界面同时具备简洁和清晰，正是设计伟大界面的挑战所在。

3. 熟悉

　　　　人们总是倾向于熟悉的东西，哪怕是一个按钮。

4.响应性

　　　　意味着两件事情：1，响应必须迅速，一个良好的界面不应该让人感到迟缓；2.界面应该提醒用户发生了什么事，用户的请求是否被成功的处理，让用户及时了解反馈信息。

5.一致性

　　让整个应用程序保持界面的一致性是非常重要的，这能够让用户识别出使用的模式。

6.美学性

　　好的界面会让用户工作起来更开心。

7.高效性

　　时间就是金钱，一个伟大的界面应当通过快捷键或者快捷菜单或者良好的设计来帮助用户提高工作效率。

8.容错性

　　每个人都会犯错，一个好的用户界面不应当用户的错误而惩罚用户，而应该总是为用户提供犯错之后的补救方法。

 

1.2  可视界面设计

　　可视界面设计就是让用户能够在他们的电子设备屏幕上看到你的界面的无力表现的过程。可视界面设计的主要目的是通过精心制作的可视界面，让用户理解应用程序的用途以及操作方法。

可视界面设计由一系列过程组成。选择合适的类型，对其每个元素，将不同的元素以一种有意义的方式组合起来，用户界面中不同的功能和特性 借此专递给了用户。

下面是可视界面设计的一些主要元素：

1.2.1. 布局和定位

　　布局规定了所有可视元素的结构。通过元素之间的距离，还确定了元素之间的层级和相互关系。

1.2.2 形状和尺寸

　　形状通常用来区分元素。例如，改变图标的外形，能够使他横快，更容易的辨认出来。

1.2.3 颜色

　　一种颜色在与它对比强烈的背景色下，是能够吸引人的注意的。不同的颜色可以表示不同的意义。想一下红绿灯。

1.2.4　对比

　　一个元素周围的黑暗或者明亮将会对元素界面上的可用性产生影响，这其实就是对比度在起作用。比如，白色背景中的黑色文本就比灰色文本更容易辨认和阅读。调低一些元素的对比度，将它们融入到背景中，用户就能区分出重要元素和次要元素。

1.2.5 材质

　　在交互设计中，有一个概念叫Afforandance. 它是一种能够让用户明白如何使用东西的一种特质。举个栗子，以大厅的门，进去的一面往往有个把手，在另一面装一个平坦的挡板。人们看到它的时候自然就知道什么时候拉，什么时候推，也就是，所见即所得。

 

1.3 制作有效用户界面的实用技巧

使用空白来构建联系。

使用圆角来定义边界。

用颜色来表达含义。

引导用户的注意力。

使用阴影。

强调核心的动作。

使用块状链接提高效率。

用动词做标签。

输入时，自动聚焦／重新聚焦。

使用加载指示器

使用按钮状态提高响应性。

撤销操作

还原操作

适度使用对话框。