软件界面设计复习文档

《软件界面设计复习文档》由会员分享，可在线阅读，更多相关《软件界面设计复习文档（8页珍藏版）》请在金锄头文库上搜索。

1、1. 人机界面、用户界面、软件界面、UI 界面、web 界面、app 界面的概念。1. 软件界面：软件中面向操作者而专门设计的用于操作者使用及反馈信息的指令部分。2. 用户界面：软件的人际交互、操作逻辑、界面美观的整体设计。3. UI 界面：用户的操作界面，UI 主要指界面的样式、美观程度。4. 人机界面：是人与计算机之间传递、交换信息的媒介或对访接口，是计算机系统的重要组成部分。5. web 界面：可以在浏览器下看到的软件界面 。6. APP 界面：手机的分辨率合手机的大小尺寸。2. 了解软件界面设计的过程。1. 功能性需求搜集；2. 用户分析；3. 信息构建；4. 原型；5. 可用性测试；

2、6. 图形界面设计。3. 为什么要进行用户调研？可以通过哪些方法进行调研？1. 用户调研的目的是为人机交互系统的分析、设计提供数据，使设计出的人际交互系统更适于各类用户的使用。2. 调研方式：工作观察和情景访谈 调查问卷 用户模型/人物角色 焦点小组/焦点团体/焦点群众。4. 用户的行为模式有哪些？安全探索、及时满足、满意即可、中途变卦、延后选择、递增构建、习惯、小片时间、空间记忆、前瞻记忆、简化重复工作、只支持键盘、旁人建议、个性化推荐5. 掌握信息架构的概念作用以及信息架构的方式。1. 概念：是在信息环境中、影响系统组织、导览及分类标签的组合结构，这是将架构和设计学运用在数位环境中的一门学

3、问。2. 作用：满足用户需求、满足从产品目标3. 方式：架构设计 决定组织方式 归类6. 信息架构受到哪些因素的影响。1. 用户层面的考虑：用户的理解能力，用户的熟悉程度，目标内容的使用频率2. 产品层面的考虑：产品你的核心价值，产品的主线功能7. 好的信息架构具备的特点。1. 与产品目标和用户需求相对应2. 具有一定的延展性3. 保证分类的标准的一致性，相关性和独立性4. 有效的平衡信息架构的“广度” ， “深度”5. 使用用户语言，同时避免语义歧义或不解。8. 掌握信息架构中相关的设计模式以及特点。主题、搜索、浏览模式 新闻流 图片管理器 信息板 多级帮助 向导 设置编辑器 可选视图 多工

4、作空间 画布加调色板工具9. 掌握内容导航设计中的相关模式以及特点。A：按内容组织导航：1.菜单(主导航） 【菜单常用做网站的主导航，一般位于网站上方，用户可以从主导航找到目标内容。一般由超文本组成的一行链接。如 http:/ 。一般大量用在网站首页；2.目录导航；【通常位于处理没有层级关系的信息，网页目录通常按主题类别提供网页的链接。类别的标题通常按照字母顺序排列，主要标题经常以较大字体显示，次要标题链接位于下方，如果网站提供相当数量的内容或服务，而这些内容和服务之间不存在直接联系，大部分内容都属于并列关系。而整理出它们之间的关系是很难的事情】3.网站地图：【它概括了整个网站的结构，并提供给

5、用户自上而下的导航途径，使用网站地图，用户可以直接跳转到地图列出的任意页面。可以采用不同的颜色来表示不同的网站区域。与目录导航不同的是，网站地图提供的是一个完整的层次结构，而不是某个分类目录】B：路径导航：面包屑导航；分步导航；分页导航；树状导航；滚动列表；图标导航；C：预览式导航（图像导航）：内容预览导航；自动翻页；D：地图导航：10. 页面布局的概念以及进行页面布局的方法。概念：对页面元素进行规划、组织、排版方法：合理的视觉层次 合理的视觉流11. 掌握视觉层次的概念以及构建出合理的视觉层次的方法。概念：对用户扫描页面的时候能够进行视线跟踪作用：跟踪读者视线 正确的次序扫描 引导视线12.

6、 视觉流的概念以及视觉流的作用。概念：在二维平面上利用颜色的变化、符号的大小，线划的粗细对视觉的不同刺激而产生的远近不同层次的视觉效果作用：看出该页面所要表达的信息结构呈现各项页面的相对重要性以及之间的关系13. 创建良好视觉流的方法。大小：较大的物体具有更大的吸引力、最小的元素因该是最不重要的。颜色：醒目，强烈对比的颜色，体现个性、更精炼的层次感、感情上的吸引力对齐：体现出元素的组织以及元素之间的关系紧密与留白：整体感、将元素彼此分开并且创建下级的层次。14. 掌握格式塔原则以及格式塔的作用。1. 原则：行不止于一般的形状，还包括由知觉活动组织成的经验中的整体，中文又译作“完形” 。他认为整

7、体决定部分的性质， ，而部分依从于整体。2. 作用：指导如何在有限的空间里向用户传达更加丰富的信息；帮助设计师去设计一个架构或页面内的从属关系，还可以设计页面中需要用户特别注意到的模块元素，制造一些具有深刻印象的平衡和牢固；让用户更轻易的解读界面。15. 掌握页面布局的相关模式以及模式特点。模式：1. 视觉框架 2. 中央舞台 3. 对等网格 4. 带标题的区域 5. 模态 Tab 6. 手风可收起面板 8. 可移动的面板 9. 右/左对齐 10. 对角线平衡 11. 响应式展开 12. 响应式允许 13. 流体布局A:视觉框架的模式特点：使用相同的基本布局、颜色、格式方案设计页面，但是会让设

8、计足够灵活来处理不 同的页面内容B：中央舞台模式特点：最重要的 UI 部分在页面或窗口占据最大的尺寸。辅助工具和内容放在周围的小面板上C：对等网格模式特点：以网格或矩阵的方式排列内容元素；每个元素使用相同的模板；每个元素的视觉重量相仿D：带标题的区域模式特点：一个页面或窗口要显示的信息不止一个或 可以划分成几个部分。给每个部分一个醒目的标题；给每个部分进行视觉上的区分。每个部分都排列在页面或窗口。E:模态 tab 模式特点：将内容的不同模块组织成一个小型的 Tab， 这样可以每次只看到一个模块。用户单击 Tab 来查看不同的模块内容F：手风琴模式特点：将不同的内容模块放到一组顺序排列的面板中。

9、这些面板每一个都可以关闭、打开，互不干扰G：可收起面板模式特点：将次要内容和可选内容放到用户能自己打 开、自己收起的面板里。H：可移动面板模式特点：将页面上的内容模块组织到几个不同的区 块里，每一个都可以独立打开或关闭。用户可以随意在界面上放置这些模块，也 可以移动它们。I：左右对齐模式特点：在设计一个两栏的表单或表格时，让左边 的标签右对齐，右边的元素左对齐；J：对角线平衡模式特点：用一种不对称的方式布置页面。通过将视觉重量放在页面左上角和右下角 来使页面保持平衡。K：响应式展开模式特点：通过用户的具体操作，逐步显示更多的界 面，来引导用户完成一系列步骤。L：响应式允许模式特点：页面初始展示

10、时，页面上的大部分元素是不能操作的，随着用户的动作，逐步允许 用户操作这些元素。M：流体布局模式特点：当用户调整窗口大小时，相应的调整页面元素的大小和位置，让页面一直保持填满 的状态。16. 列表的使用场景、信息架构、解决方案。列表的使用场景：获取概览；逐项浏览；查找特定列表；排序或过滤；重新安排、添加和删除或重新分类列表项列表信息架构：长度；分组；列表项类型；交互；动态行为解决方案：当用户从列表中选择一项时，应该如何显示该项的细节信息；如何显示有太多图像的信息列表；如何管理一个非常长的列表；如何显示一个分类或层级进行组织的列表。17. 掌握列表中相关的设计模式以及各个模式的相关特点。1. 双

11、面板模式的特点：在界面中放置两个并列的面板，在一侧的面板中显示用户可以进行选择的列表，在另一侧的面板中显示被选择的内容2. 单窗口深入的特点：在一个独立的窗口中显示一个列表或列表项的菜单，当用户从列表中选择一个列表项时，在该窗口中显示信息或内容，替换整个列表3. 列表嵌入的特点：将列表在一个纵栏中以多行的形式显示。当用户选择某一项时，就在列表中打开该项的细节信息。允许各个列表项可以独立的打开和关闭。4. 缩略图网格的特点：将由吸引人的图形化对象组成的列表放入一个由缩略图组成的“小型多行”网格中，用户可以选择一个或多个缩略图来查看或管理这些列表项5. 传送带的特点：将由吸引人的图形化对象组成的列

12、表放入一个水平放置的带状或拱形区域中，并允许用户向前/向后滚动或甩动图片缩略图来查看他们。可以放大位于中央的列表项。6. 分页的特点：采用分页的形式将一个长列表进行分割，每次只加载一个页面。为用户提供访问整个的导航下一页、前一页、首页和末页7. 条目跳转的特点：当用户键入列表项的名字时，在表格或者树中直接跳转到对应的列表项并选中该项。8. 字母表滚动的特点：在一个以字母表排序的列表中沿着滚动条显示字母队列。9. 级联列表的特点：通过在每一个层级中显示可供选择的列表项来表示一个多层级结构。10. 树表的特点:将列表项的分类字段按表格的列进行放置，在第一列中用逐渐大纲的形式来展示树形结构。11.

13、斑马行12. 新列表行18. 掌握动作与命令中的相关设计模式与特点。模式及特点：1. 按钮组的特点：将相关的动作组织成一组按钮，彼此水平或垂直对齐，并采用相似的视觉设计，如果动作超过三个或四个，可以多分几组2. 悬浮工具的特点：紧挨着对象放置可对该对象执行操作的按钮和其他动作，但在鼠标没有掠过对象之前不要显示它们。3. 动作面板的特点：不是使用菜单，而是在一个 UI 面板上采用华丽的组织方式来显示一组相关的动作，并且总是可见的。4. 突出完成按钮的特点：把完成一项事务的按钮放在视觉流的末尾，加大尺寸并为它提供一个合适的标签。5. 智能菜单项的特点：动态改变菜单的标签，以便适时地在调用之前显示其

14、功能。6. 预览的特点：在用户执行某个动作之前，为其显示执行结果的预览或结果。7. 进度提示的特点：需要很长时间才能完成的操作中为用户显示该操作当前的进度。8. 可取消性的特点：提供某种方式快速取消一个耗时的操作，而没有什么负面的影响。9. 多级撤销的特点： 提供一种方式可以很容易撤销用户所撤销用户所执行的一系列操作。10. 命令历史的特点：当用户执行一系列冗长而复杂的操作时，不管是用图形界面还是命令行的方式，希望有一个效率较高的界面支持这种时间很长而且经常重复的工作11. 宏的特点：使用宏命令可以帮助用户加快工作，通过减少命令个数和需要进行的动作来完成某项任务，减少了手指滑动、疏忽、遗漏，以

15、及类似的错误。19. 信息图形的概念。是指数据、信息或知识的可视化表现形式20. 信息图形的意义。主要应用于必须要有一个清楚准确的解释或表达复杂且大量的信息；“信息图形”是一个很大的范围，包括各种各样的图表、图形、地图、表格、树状图、时间线、以及示意图；数据可能很多，或者很少、很集中。21. 创建良好的信息图形交互的方式以及意义。1. 方式：组织模型，前摄变量，导航与浏览，排序和重新排序，搜索和过滤，实际数据。2. 意义：组织数据，直观展示数据和数据间的关系，让用户能够进一步了解这些数据。22. 掌握信息图形中的相关设计模式以及特点。1. 总览加细节的特点：在放大的详细视图旁边放置一个总览图。

16、当用户在总览图上圈出一个视野的时候，详细视图里将显示该视野范围里的内容。2. 数据提示的特点：当鼠标滑过图形上一个兴趣点时，把该点的数据显示在一个工具提示或其他某种浮动的窗口上。3. 数据焦点的特点：当鼠标掠过图表上的兴趣点时，高亮数据的切片并模糊其他剩余的数据。4. 径向表的特点：将表格或列显示为一个圆形而不是一个行列方阵。在数据项之间画出经过圆形内部的连线。5. 多 Y 值图的特点：把多个图表的线段堆积起来，一个接一个地从上到下摆放在相同的面板里，让它们共享一个 x 轴。6. 动态查询的特点： 即时和交互地提供过滤数据集的方式。采用容易使用的标准控件，比如滑块和复选框来定义数据要显示的范围。只要用户调整了这些控件的值，显示结果也立即随之调整。7. 数据刷的特点： 让用户在一个视图里选择数据，然后在另一个视图里同步显示这些选中的数据。8. 局部缩放的特点： 在一个密集的页面上显示所有数据，其中有很多个小的数据项。当鼠标移动时，页面会局部变形，鼠标位置的数据项会变大，变