UI设计学习笔记
1.概念
用户界面(User Interface)是对用户与系统之间进行交互所采用的方式、途径、内容、布局及结构的总称，用户界面也叫人机界面、人机接口、人机输入输出或人机交互界面等。
2.用户界面设计的原则
用户界面设计应该遵循合理、有效、安全的原则。
合理性指的是在用户界面设计过程中应该尽量做到全面、系统、客观、美观和协调。
有效性指用户界面设计应该做到界面友好、操作方便、快速高效、一致规范、灵活适应。
安全性是指设计的用户界面保证系统的数据、操作和功能被可靠使用的能力。
它包括使用权限的设置、检测、保护和修改，对错误的诊断、报告、纠正和保
护，以及对输入数据的正确性检查、报告和纠错等方面的能力。
1)
3.交互需求分析
交互需求分析的主要工作是收集、分析、整理信息系统和用户之间所存在的人机交互处理的需要和内容，可以分析用例图和顺序图中参与者与系统交互的内容，并用对话设计的形式描述出来。
4.界面分布分析
界面分布分析的工作是从总体上确定信息系统中各节点的类型、构成和分布情况，设计的所有用户界面将来就要分布在这些节点上。
5.交互方式分析
确定信息系统各个节点所采用的人机交互方式，有联机和脱机两种方式。
6.交互流程分析
人机交互过程的顺序程式
7.输入输出设备分析
设备性能会加强或制约输入输出效果。
8.用户分析
用户分为外行型、初学型、熟练型和专家型四类，根据不同的用户类型进行界面设计。
9.屏幕界面设计的准则
一致性：按键、窗口格式、彩、界面布局等在整个系统中始终应该保持一致。
框体颜 外边框 输入框 按钮 登陆界面 蓝，淡，40%灰，淡，30%线条，淡，50%灰白，80% 主界面 线条，淡，50%灰，淡，30%线条，淡，50%灰白，80% 子界面 线条，淡，50%灰，淡，30%线条，淡，50%灰白，80% 文字部分 标题文字 输入框文字 菜单文字 帮助文字 字体 微软雅黑加粗微软雅黑 微软雅黑 微软雅黑 大小 小四 五号 五号 五号
颜 黑 灰，50% 黑 黑
为熟练用户提供快捷键：快捷键能够提高系统的操作速度。
提供有效反馈：系统应该对用户的每一个操作都给出反馈信息，以让用户了解系统对用户操作的确认。
设计完整的对话过程：系统设计的每一个对话过程都应该是完整的，有开始、中间处理和结束部分。
ui网页界面设计
提供简单的错误处理机制：用户在操作过程中会经常出现输入数据、按键、操作顺序反馈确认等错误，界面设计必须提供对用户错误的处理功能，并能够检查、提示、
纠正用户出现的常见错误。
允许撤消动作：对用户的一些错误或试探性动作应该允许用户在操作过程中自动撤除，这符合人们日常试探性和往复性的工作习惯。
提供控制的内部轨迹：人有一种控制局势和工作的潜在要求。
减少短期记忆负担：通过信息提示、反馈等方式减轻对人记忆信息的要求。 10.窗口及控件
11.产品设计—交互界面：少即是多
技术人员总希望将每个需要的不需要的功能都铺在面板上让用户看到。而好的产品总是让用户看不到技术的存在。‐‐Pony。
12.交互设计
把自己想象成一个迟钝、挑剔、易怒的傻瓜来使用产品，抓主要矛盾，重点关注最常使用的交互点，照顾用户习惯
13.制定规范，维持统一
文字使用要规范，语法，大小，颜，大小写都需要注意
能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话
每个概念都只有唯一一种表达。如”VIP”的概念
能用一种字体颜的，不多用一种颜
能用一种字体大小的，不多用一种大小
14.视觉设计—重点突出
每个页面（板块）只有一块视觉重点。并且，突出重点，不让用户去。
15.按钮设计
一般有三种状态效果：默认状态，点击时状态和不能点击时状态。按按钮应具备乘法的图示效果，应能够让使用者产生功能关联反应，组内按钮应该风格统一，功能差异大的按钮应该有所区别。
16.确认删除：为避免错误的删除动作可能造成的损失，在键入删除命令后，必须进行确认，
然后才执行删除操作。例如，可以用 Deleteyousure? [Y／N] 来确认。
17.提供复原 (Undo)：应允许用户恢复输入以前的状态。这在编辑和修改错误的操作经常
用到。
18.提示输入的范围：应当显示有效回答的集合及其范围。例如，显示“在1～10之间输入
打折扣量”。
19.遵循对比原则。
打算在应用软件中使用颜，要确保屏幕的可读性。最好的方法是遵循对比原则：在浅背景上使用深文字，在深背景上使用浅文字。蓝文字以白为背景很容易读，但以红为背景很难辨认。问题出在蓝与红之间没有足够反差，而蓝与白之间则反差很大。
20.灰掉而不是移走。在某些时刻，用户经常只能访问应用软件的某些功能。在删除一个对
象之前，要先选中它，由此加深用户的心理模型，软件应当用删除按钮及(或)菜单项去做一些事。按钮应当移去还是灰掉?灰掉它，决不能移走!当用户不该使用时就灰掉它，可使用户对如何使用应用软件建立精确的心理模型。如果仅仅移走一个小部件或菜单项，而不是灰掉它，用户很难建立精确的心理模型，因为用户只知道当前可用的，而不知道什么是不可用的。
21.屏幕不能拥挤。拥挤的屏幕让人难以理解，因而难以使用。实验结果(Mayhew，1992
年)显示屏幕总体盖度不应超过40％，而分组中屏幕盖度不应超过62％。
22.在操作焦点处打开窗口。当用户双击一个对象显示其编辑／详情屏幕，用户的注意力亦
集中于此。因而在此处而不是其它地方打开窗口才有意义。
23.美观与协调性细则：
1)：长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。
2)：布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间。
3)：按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。
4)：按钮的大小要与界面的大小和空间要协调。
5)：避免空旷的界面上放置很大的按钮。
6)：放置完控件后界面不应有很大的空缺位置。
7)：字体的大小要与界面的大小比例协调， 通常使用的字体中宋体9-12较
为美观，很少使用超过12号的字体。
8)：前景与背景搭配合理协调，反差不宜太大，最好少用深，如大红、
大绿等。常用考虑使用Windows界面调。
9)：如果使用其他颜，主要柔和，具有亲和力与磁力，坚决杜绝刺目的
颜。
10)大型系统常用的主有"E1E1E1"、"EFEFEF"、"C0C0C0"等。
11)：界面风格要保持一致，字的大小、颜、字体要相同，除非是需要艺
术处理或有特殊要求的地方。
12)：如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体
而缩放；切忌只放大窗体而忽略控件的缩放。
13)：对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。
14)：通常父窗体支持缩放时，子窗体没有必要缩放。
15)：如果能给用户提供自定义界面风格则更好，由用户自己选择颜、字
体等。
24.独特性：如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符
合以上规范的情况下，设计具有自己独特风格的界面尤为重要。一个软件其实真正打动人的往往在一些细节、小的方面。
1)：启动界面上应有单位介绍或产品介绍，并有自己的图标。
2)：主界面，最好是大多数界面上要有公司图标。
3)：登录界面上要有本产品的标志，同时包含公司图标。
4)：帮助菜单的“关于”中应有版权和产品信息。
5)：公司的系列产品要保持一直的界面风格，如背景、字体、菜单排列方
式、图标、安装过程、按钮用语等应该大体一致。
25.UI设计准则理解《认知与设计》
1)经验，环境和目标则对感知产生影响，故在设计时要避免歧义，保持一致性和理解
目标
2)格式塔原理：人类视觉是整体的，我们的视觉系统自动对视觉输入构建结构，并且
在神经层面上感知形状、图形和物体，则不是只看到互不相连的边、线和区域。
接近性：物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。
互相靠近的物体（相对于其他物体）看起来属于一组，而那些距离较远的就不
是。根据接近性原理，可以通过拉近某些对象之间的距离，拉开与其他对象的
距离使它们在视觉上成为一组，而不需要分组框或者可见的边界，这一方式可
以养活用户界面上的视觉凌乱感。
相似性：如果其他因素相同，那么相似的物体看起来归属于一组。
连续性：我们的视觉倾向于感知连续的形式而不是离散的碎片。
封闭性：我们的视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
对称性：我们倾向于将复杂的场景分解从而降低复杂度。我们的视觉区域中的信息有不止一个可能的解析，但我们的视觉会自动组织并解析数据，从而简化
这些数据并赋予他们对称性。
主体/背景：我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余的是背景。
共同命运：一起运动的物体被感知为属于一组或者是相关的一组。
3)对注意力、开关、思考以及行动的限制
我们专注于目标而很少注意使用的工具：Don not make me think。
我们使用外部帮助来记录正在做的事情：交互系统应该分别标识出哪些是用户已经完成哪些是用户还没完成的。
我们跟着“气味”靠近目标：设计者们需要理解用户每次在做时目标可能是什
么，并保证软件为用户的每个重要目标提供选项，并清晰地标识出各个目标所
对应的选项。
我们偏好熟悉的路径：人们知道自己的注意力有限，并相应地行动。要实现某个目标，只要可能，尤其
是在有时间压力的情况下，我们都会采用熟悉的路径，
而不是探索新路径。
我们的思考周期：目标，执行，评估
目标：提供完成软件为用户所设计的目标需要的清晰路径，包括起始。
执行：软件中的概念（对象和动作）应该基于任务而不是如何实现，不要逼迫
用户去搞清楚软件里的对象和动作是如何对应到要执行的任务的，在每个需要
为实现目标做选择的节点上提供清晰的信息气味。
评估：向用户提供进度反馈和状态信息。能让用户离开那些不能帮助实现目标
的操作。
完成任务的主要目标之后，我们经常忘记做收尾工作
要避免这样的失误，交互系统可以也应该设计成能对还没做彻底的速与做出提
醒，某些情况下，系统甚至可以自己完成扫尾工作。
4)识别容易，回忆很难
看到和选择比回忆和输入要容易
对用户显示可选项并让他们从中选择，则不是强迫用户回忆出他们的选项再告
诉电脑。
尽可能使用图像来表达功能
人们能够快速识别图像，而且对图像的识别也触发了对相关信息的回忆。故当
前的用户界面经常用图像来表达功能。
越多有用的功能，应该越可见
5)
26.使用恰当的颜：
可根据工业标准，可选取黄，绿体现环保，暮表现时尚，紫表现浪漫，淡可以使人无可替代，暗做背景使人不觉得累。
遵循对比原则：在浅背景上使用深文字，深背景上使用浅文字，蓝文字以白背景容易识别，而在红背景上则不晚分辨，杜绝使用对比强烈，让人产生
憎恶感觉的颜。整个界面彩尽量少使用类别不同的颜。
27.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。