Jym好😘，我是珑墨，今天给大家分享 【设计】结束前端噩梦：你需要懂点 UI/UX 设计 ，嘎嘎的😍，看下面。
都Tmd2024年了！前端不懂点UI/UX都不足以和产品/设计扯皮！！！😂
了解用户界面设计原则、用户体验和用户友好型设计是前端人的一项优势，这个也是作为一名有点‘姿色’的开发人必然去了解的。 开发过程中可以预测潜在问题并确保解决这些问题，以避恶心反复改、重新设计和与设计团队的摩擦。这一优势意味着产品开发团队可以以更快的速度、更少的错误和更低的成本交付高质量的产品。
一 、关键要点
- 首先咱们应该熟悉 UI 术语，例如视觉层次、一致性、对比度、对齐、色差、色温、接近度等，这将使咱们对良好的 UI 更加敏感。
- 了解排版、颜色、网格系统等规则也可能对咱们有好处。
- 如果设计要为开发人员提供 UI 建议，应该会提到，了解 UX 设计流程中的步骤，以及可用于创建以用户为中心的设计的各种框架至关重要。
这里推荐下这个无尿点的工具， UXPin Merge 是一款对开发人员友好的设计工具，可使用组件库存储库中的代码组件来设计布局。无需设计师即可创建精美的布局，首先使用代码进行设计，无需担心将 UI 转换为真实内容。尝试 UXPin Merge – 快速 UI 原型设计工具，利用 React 库的强大功能并在几分钟内构建功能性。
二、用户体验和 UI 一致性对开发的重要性
开发可能希望主要关注其工作的技术方面，不想和心烦的 "沙x" 设计扯皮。但是，了解用户体验和用户界面一致性对于数字产品的成功至关重要，这其实是开发应该要了解的。
用户体验不佳的最严重后果之一是用户流失，用户操作后一顿骂骂咧咧，注销掉就走了。当开发团队优先考虑短期利益（例如敏捷开发，快速部署）而不是长期考虑（例如可用性和可维护性）时，累积的技术债务（屎山代码、性能、架构问题）会导致维护成本增加、开发速度降低以及产品质量整体下降。
用户友好的产品对于用户满意度、参与度和留存率至关重要。精心设计的用户界面可以满足用户的需求和期望，是留住用户还是放弃用户的关键。通过理解和实施良好的UI 设计原则，开发人员可以创建不仅具有视觉吸引力而且直观、高效的产品。
当我们了解 UI 设计原则和用户体验时，可以更有效地与设计团队协作和沟通。这种相互理解促进了更具凝聚力和效率的产品开发流程，确保设计和开发目标保持一致。
三、必知基本产品设计原则
-
层次结构是指按重要性顺序排列设计元素，引导用户的注意力通过界面。例如，使用较大的字体作为标题，较小的字体作为正文，可以帮助用户轻松区分不同的部分。
-
对比涉及使用不同的颜色、大小或形状来区分元素并使其脱颖而出。例如，对号性用语按钮，使用大胆的颜色有助于它们在背景中脱颖而出并吸引用户的注意力。
-
一致性意味着在整个界面中保持统一的外观和感觉，包括颜色、字体和设计元素。例如，在整个应用程序中使用相同的按钮样式和颜色可确保一致且可预测的用户体验。
-
对齐是指元素相对于彼此或共同基线的放置，以营造一种秩序感和视觉和谐感。例如，垂直对齐表单标签和输入字段可使表单看起来井然有序且易于阅读。
-
接近性是将相关元素分组以建立关系的原则。例如，将标签直接放在其对应的输入字段上方或旁边，有助于用户了解哪个标签属于哪个字段。
-
平衡是指在布局中均匀分布元素，使用对称或不对称来创造视觉稳定性。例如，两列布局具有相等的列宽和相似的内容量，可以创建一个平衡且视觉上有吸引力的界面。
-
可用性 和可访问性侧重于让您的界面易于使用和理解，而可访问性则确保残障人士能够访问您的产品并与之互动。例如，提供清晰的导航、描述性标签并遵守颜色对比标准可以提高可用性和可访问性。
四、关键的 UI 设计术语和概念
1. 排版
排版是 UI 设计的一个重要方面，它涉及选择和组织字体、大小和间距，以创建具有视觉吸引力且易于阅读的界面。对于前端开发人员来说，了解排版意味着考虑字体选择、层次结构和易读性等因素，以确保文本具有视觉吸引力、有效地传达内容并支持整体用户体验。
2. 调色板和理论
色彩理论是研究颜色如何相互作用和影响以及它们如何唤起情感和感知的学科。在 UI 设计中，颜色有助于引导用户的注意力、传达信息并创造连贯的视觉体验。
咱们前端应该了解色彩理论的基础知识，例如色轮、色彩和谐和色彩心理学，以创建支持所需用户体验的视觉吸引力的界面。
3. 设计过程阶段
UX 设计流程是 UX 团队用来完成项目的逐步迭代方法。
这些步骤因产品和组织而异👀：
-
发现： 在此阶段，设计师和开发人员收集有关项目需求、用户需求和业务目标的信息。
-
定义： 收集见解后，团队定义项目的范围、目标和用户角色。
-
构思： 在这个创作阶段，设计集思广益，探索多种设计概念和想法。
-
设计： 设计根据所选概念创建用户界面的详细模型和原型。
-
原型： 设计构建外观和功能与最终产品相似的高保真原型。
-
测试： 设计团队与最终用户和利益相关者一起测试原型，以迭代反馈并增强设计。
-
设计交接： 设计向开发提供线框、模型、原型、文档和资产以供开发。
-
UX 审核： 设计团队评估发布情况以确保其符合设计规范并且不会引入可用性问题。
4. 网格系统
网格系统提供结构化布局，以一致且合乎逻辑的方式组织设计元素。它们有助于保持整个界面的对齐、平衡和比例。
前端可以利用网格系统来开发结构良好的布局，这些布局易于导航、创建平衡并有效利用屏幕空间，最终增强用户体验。
5. 响应式设计
响应式设计可确保界面自动适应不同的屏幕尺寸和设备，为用户提供最佳的观看和交互体验。虽然大多数前端人都熟悉响应式设计技术，例如流体网格、灵活图像和媒体查询，但了解这些概念如何影响可用性和可访问性至关重要，以确保用户界面支持所有用户。
6. 用户流程和导航
用户流程描述了用户在界面中完成任务或实现目标所采取的步骤。有效的用户流程和导航结构可引导用户轻松高效地完成这些步骤。
前端必须理解并实现清晰直观的导航系统，考虑架构、面包屑和菜单设计等因素，以确保无缝和愉快的用户体验。
7. 设计模式和组件
设计模式是解决常见 UI 设计难题的可重复使用的解决方案，而组件是界面的构建块，例如按钮、输入字段和卡片。咱们应该熟悉标准设计模式以及这些 UI 元素解决的可用性案例。这种理解将有助于我们了解在解决可用性问题时应应用的正确 UI 模式。
8. UI 设计中的 UX 指标
UX 指标是可衡量的值，有助于评估用户界面的有效性和质量。常见的 UX 指标包括定量指标，例如页面加载时间和任务完成时间，以及定性指标，例如用户满意度和感知易用性。这一点我觉的前端必须了解和跟踪相关的 UX 指标，以做出数据驱动的设计决策，并不断优化和改善用户体验。
五、做出明智的设计决策
1. 设计师和开发人员之间合作的重要性
设计和开发人员之间的有效协作对于创建成功的用户界面至关重要。这种合作关系简化了设计交接流程，确保双方清楚地了解项目的目标和要求。例如，密切合作可以创建一个界面，将设计的愿景准确地转化为代码，从而实现满足审美和功能期望的无缝用户体验。
2. 了解设计反馈循环
设计反馈循环是一个迭代过程，包括实施设计变更、收集用户反馈以及根据该反馈进行进一步改进。
例如，在实现新功能后，开发人员可以通过调查或可用性测试向设计团队征求用户反馈，并进行必要的 UI 调整，从而实现更加以用户为中心的设计。
3. 平衡美观与功能
在美观性和功能性之间取得适当的平衡对于创建成功的用户界面至关重要。虽然视觉上吸引人的设计会给人留下积极的印象并增强品牌认知度，但它们不应损害可用性或可访问性。
例如，一个具有非常规导航元素的视觉震撼的网站最初可能会给用户留下深刻的印象，但如果它不直观，他们就会因糟糕的用户体验而感到沮丧地离开该网站。
4. 通过设计系统提高 UI 一致性
设计系统通过提供标准化的指南、组件和模式来帮助提高 UI 一致性。我们可以利用设计系统来确保其用户界面保持连贯的视觉设计语言并遵循既定的最佳实践，从而实现更高效的开发流程和更好的用户体验。
例如，设计系统可以通过可重复使用的代码防止按钮样式或导航元素的不一致，从而使用户更容易理解和与界面交互，同时简化开发人员的工作流程。
😎今天就到这了，反正作为前端人，横向的扩展我觉得必须得了解产品和设计方面的知识！！！Are you ok??
