- Objective: - Breadcrumb: # 概念阐释 **UI**：user interface 用户界面是用户与设备交互的界面; - 早期的电脑只有命令行操作界面，这要求操作者必须是具有技术技能的人。1980 年引入了图形用户界面 GUI - 1983 年在 Lisa 上实现，1984 年在 Macintosh 上使用 **UX**：User Experience 用户体验 ![A Venn diagram of the intersection of three circles: Context, User, and System, with User Experience (UX) at the center.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/what-are-ui-ux-design/ux-venn-diagram.svg) # 实例 # 相关内容 ## UI设计原则关注于视觉元素 - **Layout**: 元素在屏幕上的显示位置？ - **Colors**: 使用什么调色板，这些颜色唤起什么情感？ - **Typography**: 使用什么字体，它们传达什么信息？ - **Interaction design**: 元素如何响应用户交互？ - **Brand identity**: 如何将所有视觉元素结合在一起来代表品牌的愿景？ - **Responsiveness and usability**: 界面是否易于在不同设备上使用？ - **Accessibility and inclusivity**: 界面是否适合所有人？ - **Front-end development**: 为接口提供动力的代码和技术骨干是什么？ ## UX关注于用户 - **User journey 用户旅程**：围绕使用产品的整个过程，从要解决的问题到解决方案的影响。 - **User research 用户研究**：定性和定量研究，将用户置于设计过程的中心。 - **Deliverables 可交付成果** - 角色：示例和目标用户的摘要，通常基于用户研究的综合。 - 旅程地图：与实现与产品或设计相关的特定目标相关的用户操作的时间线。 - 故事板：按时间顺序描绘用户故事的一系列面板（通常类似于漫画书）。 - 原型：设计的迭代模型、草图或 **[[wireframe 线框]]** ，用于收集反馈并为最终设计提供信息。 ## UI和UX的5个元素 ![The Five Elements of UX Design, from concrete to abstract: Surface, Skeleton, Structure, Scope, and Strategy, with UX design encompassing the entire process, and UI design focused on the Surface.](https://static-assets.codecademy.com/Courses/intro-to-ui-and-ux/key-methodologies/five-elements-of-ux-design.svg) - **strategy 战略**：这个产品想要==解决什么问题==？该层是模型中最抽象的层，它同时考虑==用户需求和业务目标==。 - **Scope范围**：==为了解决问题而创建的产品是什么？==在这一层中，团队定义==功能需求（要构建哪些功能）和内容需求（要包括的书面和视觉信息）==。 - **Structure结构**：==设计是如何组织的以及交互如何进行？==这一层包括信息架构（内容的结构和组织）和交互设计（产品的交互体验）。 - **Skeleton骨骼**：==wireframes==.信息是如何呈现和安排的？这一层开始考虑==界面设计（界面元素的设计）、导航设计（用户如何在系统中移动）和信息设计（呈现信息以方便理解）。此阶段的常见输出是一组线框。== - **Surface表面（UI部分）**：用户对产品的外观和感觉如何？这个阶段强调视觉设计，例如使用什么颜色和字体，并且是 ==UI== 设计处于前沿和中心的阶段（尽管它不限于表面）。 # 参考资料 [What are UI and UX Design?](https://www.codecademy.com/courses/intro-to-ui-ux/articles/what-are-ui-and-ux-design)