UI的基本理念原则 - 新手小白看这个就够了

首先，UI是什么呢？

UI 是 User Interface（用户界面）的缩写，它是人与计算机系统、软件应用、电子设备等进行交互的媒介。UI 设计主要聚焦于用户和界面之间的交互部分，包括界面的外观、布局、操作方式等各个方面，目的是让用户能够方便、高效、愉悦地使用产品。

一、以用户为中心（User - Centered Design）

（一）了解用户需求

  1. 用户调研

• 问卷调查：通过设计一系列问题，收集大量用户对产品功能、界面风格、操作习惯等方面的反馈。例如，询问用户对现有应用的满意度、希望增加的功能等。
• 用户访谈：与用户进行一对一或小组形式的交流，深入了解他们的使用场景、期望和痛点。比如，针对一款音乐播放应用，询问用户在不同场景（如运动、工作、休闲）下对音乐推荐和播放功能的需求。
• 观察法：观察用户在自然状态下使用类似产品的行为。例如，观察用户在使用购物应用时，如何查找商品、比较价格和完成购买。

   2.用户画像构建

• 基本信息：包括年龄、性别、职业、地域等。例如，为一款旅行应用构建的用户画像可能有 “25 - 35 岁的年轻上班族，喜欢在节假日出游”。
• 行为习惯：如用户使用产品的频率、时间、场景等。以阅读应用为例，用户可能是 “每天晚上睡前使用，阅读时长约 30 分钟，偏好小说类”。
• 目标和期望：明确用户使用产品想要达到的目的。对于健身应用，用户目标可能是 “通过应用制定个性化的健身计划，记录健身数据并看到健身效果”。
• 痛点和障碍：了解用户在使用过程中遇到的问题。比如，在使用文件管理应用时，用户可能觉得文件分类不够清晰，查找文件困难。

（二）考虑用户体验

1.易用性设计

• 操作简单：减少用户的操作步骤 ，简化复杂的操作流程。例如：在注册页面只保留必要的信息，避免过多的信息收集让用户感到繁琐复杂。
• 界面易懂：使用清晰明了的图标、标签和提示信息，让用户一眼就能理解。
• 信息易获取：合理布局信息，确保用户能够快速找到他们需要的内容。例如，在新闻APP中，通过分类和搜索功能，方便用户查找感兴趣的新闻。

2.可访问性设计

• 视觉障碍考虑：提供图像的替代文字描述（alt标签）确保文字与背景颜色有足够的对比度，方便视力不好的用户使用时也能清晰可见。
• 肢体障碍考虑：使用操作区域足够大，方便肢体活动不便的用户点击。考虑单手操作的便利性，例如将重要的操作按钮放在屏幕下方，方便用户大拇指操作。

（三）符合用户认知和习惯

• 遵循用户的心里模型：用户在长期使用各种产品的过程中形成了一定的心里模型，设计师要了解这些心里模型，在设计中遵循。例如，在大多数APP中，用户习惯通过点击按钮来操作，那么在新的UI设计中，按钮的功能和操作方式应符合这种预期。
• 考虑文化差异和通用设计原则：不同文化背景的用户可能对颜色、图标、文字等元素有不同的理解。如在西方文化中红色代表危险和停止，在东方文化中，红色也有喜庆的含义。同时要遵循通用设计的原则，如可读性原则，确保文字排版便于用户阅读。

二、可视化设计（Visual Design）

（一）排版与布局

1.页面布局类型

• 对称布局：以中轴线为准，两边元素对称，有稳定平衡感。
• 非对称布局：通过元素大小、位置等差异、创造出动态、富有变化的视觉效果。
• 网格布局：把页面分成等距网格，元素放网格里，整齐有序，像新闻 APP 文章列表页，方便浏览内容。

2.视觉流程引导

• 线性引导：通过元素的排列顺序引导用户呈直线移动。如在注册表单中，按照从上到下的顺序排列信息输入框。
• 曲线引导：使用弧形或不规则线条来引导视线，使视觉路径更加柔和自然。在一些创意类界面设计中会用到。
• 焦点引导：将重要元素放在视觉焦点位置（中心、黄金分割线等），吸引用户首先关注重要内容。如：海报宣传类产品，将关键卖点放在中心位置。

（二）图形与图标

1.图形设计要点

• 简洁性：去除多余细节，用简单线条、形状表达概念。
• 准确性：确保图形能够准确传达信息。如在地图应用中，地图图形要准确的展示地理位置和路线。
• 创意性：通过独特的创意来吸引用户的注意力。

2.图标设计要点

• 易识别性：设计简单易懂的图标。
• 风格一致性：在整个产品中保持图标风格统一，包括形状、颜色等。
• 适配性：考虑图标在不同设备和屏幕分辨率下的显示效果。

（三）色彩理论

1.色彩搭配原则

• 互补色：互补色在色轮上相对，如红色和绿色，蓝色和黄色。这种搭配能产生强烈的视觉冲击力，用于需要突出重点或营造活泼氛围的设计。
• 邻近色：在色轮上相邻。如红色、橙色、黄色，这种搭配能营造出和谐、自然的视觉效果，常用于温馨、舒适氛围的设计。
• 单色：使用同一颜色不同深浅或饱和度变化。这种搭配简洁、统一，能突出质感和层次。在一些高端品牌中常见，如不同深灰色来构建界面。

2.色彩情感传达

• 积极情感：明亮的色彩（红色、橙色、黄色）通常表达热情、活力、快乐。例如在社交应用点赞按钮上使用红色，激发用户的积极情绪。
• 消极情感：较暗的色彩（黑色、深蓝色、深灰色）传达严肃、深沉、神秘的情感。例如在金融应用中，用深蓝色背景来体现专业稳重的感觉。
• 中性情感：白色、米色、淡灰色等中性色给人干净、平和、简洁的感觉。常用于背景颜色，为其他元素提供良好的衬托。

三、交互设计（Interaction Design）

（一）操作反馈

1.视觉反馈

• 状态变化：当用户操作按钮（点击、悬停）时按钮的颜色、形状等变化。
• 动画：通过简短的动画来展示操作的结果。如删除文件后，文件图标以动画形式消失，让用户直观的看到操作成功
• 加载：在数据加载中，通过进度条、旋转等方式告知用户系统在工作，在应用启动内容加载时避免用户以为系统无响应/缓解等待的焦急感。

2.听觉反馈

• 操作音效：为用户的操作添加适当的音效，增加交互趣味性和真实感。如游戏应用中，点击按钮发出的音效。
• 系统音效：对于重要的系统提示，使用特定的音效来引起注意，但要注意音效不要过于嘈杂频繁，避免引起用户反感。

3.触觉反馈（移动设备）

        震动反馈：用户进行重要操作时，设备震动给予反馈。如在支付成功时，手机震动一下，让用户确认操作完成。

（二）交互模式

1.常见交互模式

• 点击交互：最基本的交互动作，用于执行命令、打开链接、切换页面等。
• 滑动交互：用于浏览内容（列表、图片）、切换页面。例如在相册中，左右滑动查看不同图片
• 拖拽交互：用于移动元素、调整顺序等。

2.交互一致性

• 操作方式：在整个应用或系统中，相同的操作动作产生相同的结果。例如，在所有页面中，向上滑动都用于刷新内容。
• 反馈方式：对于相同类型操作，反馈的效果保持一致，如所有按钮点击后视觉反馈都是颜色变深。

（三）导航设计

1.导航类型

• 底部导航栏：将主要的功能模块放在屏幕底部，方便用户单手操作、快速切换。
• 侧边导航栏：将导航栏放置屏幕侧边，适合功能较多的应用，可以是展开式或隐藏式，节省屏幕空间。
• 分层式导航：通过主菜单和子菜单的形式，将功能按照层级关系组织起来。适合内容丰富、结构复杂的系统。例如电商类

2.导航提示与引导

• 引导提示：对于新用户或复杂导航功能提供引导提示。如新手教程、操作提示等。
• 面包屑：用于显示用户当前的位置和路径，方便用户返回上一级或更高级别的页面。多用于网站中。

四、一致性与标准化原则（Consistency and Standardization）

（一）界面元素一致性

1.视觉元素

• 颜色：整个UI中相同功能或类型元素颜色相同，如警告框统一底色，主要操作按钮统一品牌色。
• 图标风格：图标在形状、线条、填充方式上统一，相同含义图标在各页面一致。
• 字体样式：UI使用的字体类型一致，不同文本类型可通过字号、字重区分，相同级文本在不同页面要保持一致

2.功能元素

• 按钮设计：按钮的大小、形状、交互效果在整个应用中保持统一。
• 输入框设计：输入框外观、提示文字格式和位置保持一致。

（二）操作行为一致

1.操作反馈一致性

• 视觉反馈：相同操作的视觉反馈形式相同，如点击元素颜色和动画变化及时长强度一致。
• 听觉反馈：相同类型操作有相同音效
• 触觉反馈：类似操作的触觉反馈相同

2.操作结果一致性

• 相同操作相同结果：在UI中，相同操作结果相同。
• 相似功能操作相似：功能相似，操作的流程和结果相似。

（三）遵循设计规范

1.平台设计规范

• ios设计规范：遵循苹果官方设计指南，包括界面元素尺寸、交互模式、动效设计等规范。
• Android设计规范：遵循谷歌的Material Design等规范，如卡片式布局、色彩系统、动画和交互设计等规范。

2.行业通用规范与品牌规范

• 行业通用规范：不同类型应用有通用设计规范，如金融类金额显示、社交类好友列表展示，需要遵循。
• 品牌自身规范：为特定品牌设计要遵循其视觉识别系统，包括品牌颜色、标志、字体等。