moqu79
GitHub
Родитель
e8f6f6c039
Коммит
4ecc75b1b8
|
|
@ -13,7 +13,9 @@
|
|||
简洁性是设计中的一个重要原则，它指的是设计应该尽可能简单，不要过度设计或添加不必要的元素。简洁的设计可以使用户更容易理解和使用产品，同时也可以提高设计的效率和质量。在设计中，可以通过减少不必要的元素、使用简单的布局和颜色、避免过度修饰等方式来实现简洁性原则。
|
||||
如今我们可以从很多成功的设计上找到简洁设计的成功案例，例如苹果和谷歌的设计，这些都是受到全世界用户普遍欢迎的产品设计。究其深层次的原因，是因为这些设计提供了理想的信噪比。用户界面的本质是一个沟通渠道，在互联网时代，大量的人机交互、信息的创造传达与接收都是通过这个渠道发生的。作为信号，在传递的过程中，强度会逐渐递减，无关信息的占比会增加，信息的沟通有效会逐渐降低。
|
||||
一个具有简洁性的优秀设计可以把无用的噪声减小到最小，把有用的信息占比提到最大。简洁的设计往往可以让用户专注于信息本身。落到具体的日常设计当中，就是将不必要的图表、色彩、符号、线条、阴影等信息尽量减少。举一个例子，作为行业风向标的苹果在推出 iOS 7 （如图9-5所示）之前设计风格一直保持拟物设计，但是在 iOS 7 发布之后却主推了扁平设计，引领了设计的潮流从拟物到扁平的巨大转变。拟物设计强调真实感和物理感，通常使用阴影、纹理和渐变等效果来模拟真实世界中的物体。而扁平设计则更注重简洁和现代感，通常使用简单的形状、明亮的颜色和清晰的线条来创造简洁的外观。扁平设计因为相比更加简洁、更加高信噪比的特征，使得信息在小屏幕上的可读性和易用性都得到了提升。
|
||||
|
||||
|
||||
|
||||
|
||||
图9-5 Apple iOS 7截屏，图片来源：https://en.wikipedia.org/wiki/IOS_7
|
||||
|
||||
9.5.2 一致性
|
||||
|
|
@ -24,12 +26,16 @@
|
|||
• 外部一致性：在不同产品之间，相似的元素和功能应具有相似的行为和外观，以便用户能够更容易地从一个产品转移到另一个产品。
|
||||
如果设计中的元素不一致，用户可能会感到困惑和不舒适，从而影响他们的使用体验。此外，一致性还可以帮助用户更快地学习和记忆产品的使用方式，提高他们的效率。在设计中保持一致性可以让用户更容易地理解和使用产品，提高用户的满意度和忠诚度。
|
||||
设计的一致性指的是通过某些视觉特征关联起来的元素，相较于未关联起来的元素，具有更强的关联性。以图9-6为视觉关联性的案例，比如由一个圆点组成的简单矩阵，当共同区域或线条垂直地链接着圆点时，他们会被视为列，如果水平连接而成就会被视为行。
|
||||
|
||||
|
||||
<img width="432" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/5252d629-73a4-40de-91c2-7d844fedb122">
|
||||
|
||||
图9-6 视觉关联性案例
|
||||
|
||||
在用户界面的设计过程中，我们会把不同的信息归集成一个个模块，使得人们更容易队信息进行处理和记忆。举个例子，微软的产品线众多，但是最终这些产品呈现给用户的感觉却是一致的，这种一致性意味着用户在使用微软的某个产品的体验和同系列的产品类似，这样当用户习惯了某个产品的交互之后也就非常容易将这套交互思维模型迁移到其他产品上，降低了学习的成本。具体来说，微软推出了 Fluent Design system，在不久之前还对外发布了 Fluent 2。
|
||||
Fluent Design System 是微软的设计语言，它提供了一套一致的设计原则和组件，使得不同的应用程序和服务可以保持一致的外观和感觉。Fluent Design System 的设计原则包括：深度、光影、材料、运动、缩放和无缝。这些原则旨在创造一个自然、直观和美观的用户体验。Fluent Design System 提供了一些设计元素和组件，例如 Acrylic Material、Reveal Highlight、Connected Animations 等，这些元素和组件可以帮助设计师和开发人员创建一致的设计。Fluent Design System 还提供了一些工具和资源，例如设计指南、图标库、代码示例等，这些工具和资源可以帮助设计师和开发人员更轻松地使用 Fluent Design System。
|
||||
|
||||
|
||||
|
||||
|
||||
图9-7 微软 fluent design 案例，图片来源：https://en.wikipedia.org/wiki/Fluent_Design_System
|
||||
|
||||
9.5.3 对齐
|
||||
|
|
@ -44,7 +50,9 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
• 网站上的导航栏通常对齐到屏幕的顶部，这有助于创建秩序和组织感，并且还使用户更容易在网站上找到他们的方向。
|
||||
• 通常将呼叫操作的按钮对齐到屏幕的中心。这有助于吸引用户对按钮的注意力，并且还使用户更容易点击按钮。
|
||||
• 网页上的文本通常对齐到左边或右。
|
||||
|
||||
|
||||
<img width="432" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/78a6cacc-cc77-417c-9dad-213d8328d78e">
|
||||
|
||||
图9-8 腾讯网主页，图片来源：www.qq.com
|
||||
|
||||
9.5.4 容错性
|
||||
|
|
@ -58,11 +66,14 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
举个例子，在许多网站和应用程序中，用户需要填写表单来提交信息，如注册账户、填写调查问卷或购买商品。为了提高设计的容错性，可以在用户输入数据时进行实时验证，确保数据符合预期的格式和要求。例如，在用户注册微软账户时，可能需要输入电子邮件地址。设计师可以在表单中添加实时验证功能，当用户输入不符合电子邮件格式的文本时，立即显示错误提示。这样，用户可以在提交表单之前纠正错误，避免因提交无效数据而导致的挫败感和时间浪费。
|
||||
再举一个设计容错性的例子是图9-9中 Word 的自动保存功能。在许多文本编辑器和在线应用程序中，用户可能会在编辑文档时遇到意外情况，如电脑死机、浏览器崩溃或意外关闭。为了提高设计的容错性，Word中添加自动保存功能，定期将用户的更改保存到本地或云端。这样，即使用户遇到意外情况，他们也可以在重新打开应用程序时恢复到之前的编辑状态，避免因为丢失未保存的更改而导致的挫败感和时间浪费。
|
||||
|
||||
|
||||
<img width="424" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/fc91233b-2de5-45c9-b1e0-2e0205c44336">
|
||||
|
||||
图9-9 微软 Office word 顶部导航工具栏，图片来源：微软Office word截图
|
||||
|
||||
另一个设计容错性的例子是图9-10中微软的拼音输入法。在中文输入法中，用户通过输入拼音来输入汉字。由于拼音具有一定的模糊性，同一个拼音可能对应多个汉字。为了提高设计的容错性，输入法会根据用户输入的拼音提供多个候选汉字供用户选择。例如，当用户输入 "shi" 时，输入法可能会提供如下候选汉字：是、师、市、室等。用户可以从这些候选汉字中选择正确的汉字，从而避免因输入错误而导致的沟通障碍。这种设计可以在用户输入拼音时提供更多的容错性，提高输入效率和准确性。
|
||||
|
||||
|
||||
<img width="422" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/8369d446-be9e-41e1-8fbf-540bbe286462">
|
||||
|
||||
图9-10 微软输入法，图片来源：微软Windows 11 输入法截图
|
||||
|
||||
9.5.5 反馈
|
||||
|
|
@ -70,7 +81,9 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
一个设计反馈的例子是图9-11所示的进度条。当用户执行一个可能需要一段时间才能完成的操作（如文件下载、软件安装或大型数据处理）时，进度条可以显示任务的完成进度。这种视觉反馈使用户了解任务的进行情况，有助于管理他们的期望，并给他们信心任务正在进行中。进度条可以是确定的（显示具体的百分比）或不确定的（仅显示任务正在进行，但没有具体的进度信息）。
|
||||
设计反馈的另一个例子是按钮点击效果。当用户点击一个按钮时，按钮可能会改变颜色、形状或大小，以表明已经被点击。这种视觉反馈有助于用户确认他们的操作已被系统识别，从而提高用户体验。
|
||||
这种设计可以让用户了解任务的完成情况，减少焦虑感，并帮助用户决定是否继续等待或执行其他操作。进度条是一种有效的反馈机制，可以提高用户体验。
|
||||
|
||||
|
||||
|
||||
|
||||
图9-11 Fluent 加载进度条，图片来源：fluent2.microsoft.design/components/web/react/progressbar/usage
|
||||
|
||||
9.5.6 可发现性
|
||||
|
|
@ -91,12 +104,15 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
14) 个性化和定制：允许用户根据自己的喜好和需求定制界面，从而提高产品的可发现性和易用性。
|
||||
在一些流行产品中我们可以看到应用这些原则的具体实例：
|
||||
• 如图9-12所示，微软必应搜索引擎中的“搜索”栏清晰地标记并位于页面顶部。这使得用户能够轻松地找到并使用搜索功能，无论他们对界面有多熟悉。
|
||||
|
||||
图9-13 微软必应搜索结果页，图片来源：微软Bing： www.bing.com
|
||||
|
||||
<img width="362" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/6e786fd5-fa7e-4da8-90ed-6e9c6b1480c3">
|
||||
图9-12 微软必应搜索结果页，图片来源：微软Bing： www.bing.com
|
||||
|
||||
• Microsoft Office 中的“帮助”按钮始终可以从顶部菜单栏访问。这使得用户可以轻松地找到帮助文档，无论他们正在使用哪个Office应用程序。
|
||||
|
||||
图9-14 微软 Word 帮助按钮，图片来源：微软Word
|
||||
|
||||
<img width="432" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/7b944a0c-6db6-4700-ab2a-a92ff643de67">
|
||||
|
||||
图9-13 微软 Word 帮助按钮，图片来源：微软Word
|
||||
|
||||
9.5.7 亲密性原则
|
||||
亲密性原则是设计原则之一，它强调在设计中考虑元素之间的关系，使它们看起来更紧密、有序和和谐。亲密性原则可以通过将相关的元素放在一起、使用相似的颜色、形状或大小以及保持一致的间距来实现。这有助于提高设计的可读性和视觉吸
|
||||
|
|
@ -107,10 +123,11 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
4) 对齐：将元素对齐可以增强设计的整体感，使其看起来更有序和专业。
|
||||
5) 使用视觉层次结构：通过使用不同的字体大小、颜色和粗细，可以创建视觉层次结构，有助于引导用户的注意力和理解。
|
||||
遵循亲密性原则有助于提高设计的可读性和视觉吸引力，使用户更容易地理解和使用设计。谈到亲密性设计原则，就不得不提格式塔设计原理：
|
||||
格式塔心理学（Gestalt psychology）是一种心理学流派，它强调人类对整体的感知和理解。格式塔心理学起源于20世纪初的德国，由马克斯·韦尔特海默、沃尔夫冈·科勒和库尔特·科夫卡等心理学家创立。这一理论对认知心理学、人类因素工程学和设计领域产生了深远影响。它的核心原则是“整体大于部分之和”，意味着人们在感知和理解事物时，会自然地将各个部分组织成一个有意义的整体。这种整体感知的过程受到一些组织原则的指导，如接近性、相似性、连续性、封闭性和命运共同体等。这些原则解释了人们如何将视觉、听觉和其他感知信息组织成有意义的模式和结构。图9-15举了一个封闭性的案例，通过正负形的设计由若干个缺角的圆组成了一个矩形。
|
||||
格式塔心理学（Gestalt psychology）是一种心理学流派，它强调人类对整体的感知和理解。格式塔心理学起源于20世纪初的德国，由马克斯·韦尔特海默、沃尔夫冈·科勒和库尔特·科夫卡等心理学家创立。这一理论对认知心理学、人类因素工程学和设计领域产生了深远影响。它的核心原则是“整体大于部分之和”，意味着人们在感知和理解事物时，会自然地将各个部分组织成一个有意义的整体。这种整体感知的过程受到一些组织原则的指导，如接近性、相似性、连续性、封闭性和命运共同体等。这些原则解释了人们如何将视觉、听觉和其他感知信息组织成有意义的模式和结构。图9-14举了一个封闭性的案例，通过正负形的设计由若干个缺角的圆组成了一个矩形。
|
||||
|
||||
|
||||
图9-15 封闭性设计案例
|
||||
<img width="432" alt="image" src="https://github.com/microsoft/ai-edu/assets/9515276/2a475454-e33b-442d-bb1f-dfff4ba21695">
|
||||
|
||||
图9-14 封闭性设计案例
|
||||
|
||||
除此之外，格式塔心理学的一些关键组织原则包括了：
|
||||
1) 接近性：物体在空间或时间上彼此接近的倾向被认为是一组。
|
||||
|
|
@ -131,9 +148,11 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
3) 运动和运动心理学：在运动和运动心理学领域，格式塔原则可以帮助我们理解运动员如何将视觉、听觉和其他感知信息组织成有意义的模式，从而提高运动表现。
|
||||
4) 社会心理学：在社会心理学领域，格式塔原则可以帮助我们理解人们如何将社会信息组织成有意义的模式，从而影响我们的行为和决策。
|
||||
这些应用表明，格式塔心理学的原则在许多领域都具有广泛的实用价值，可以帮助我们更好地理解和解决各种问题。另一个关于格式塔原理应用于用户体验设计的例子是相似性原则。在设计用户界面时，相似性原则可以帮助我们通过使用相似的视觉元素（如颜色、形状或大小）来表示相关的功能或信息。例如，在一个导航菜单中，我们可以使用相同的颜色和字体样式来表示属于同一类别的菜单项。这样，用户可以更容易地识别和理解这些菜单项之间的关系，从而提高用户体验。
|
||||
举个例子，如图9-16所示，在百度首页当中，我们会发现相似的元素彼此之间的距离是更接近的，并且不同属性的元素之间的间距会大于相似属性的元素，从而在设计视觉上提供给用户成组的感受，传递了一种内在的逻辑关系。
|
||||
|
||||
图9-16百度首页，图片来源： www.baidu.com
|
||||
举个例子，如图9-15所示，在百度首页当中，我们会发现相似的元素彼此之间的距离是更接近的，并且不同属性的元素之间的间距会大于相似属性的元素，从而在设计视觉上提供给用户成组的感受，传递了一种内在的逻辑关系。
|
||||
|
||||
|
||||
|
||||
图9-15百度首页，图片来源： www.baidu.com
|
||||
|
||||
9.5.8 报错处理
|
||||
设计报错页面的原因是为了提供更好的用户体验。当用户遇到问题时，报错页面可以清晰地告知用户发生了什么错误，以及如何解决这个问题。这有助于减少用户的挫败感，提高用户在应用程序或网站中的满意度。同时，一个易于理解且有用的报错页面可以减少用户对客户支持的依赖，降低客户支持成本。
|
||||
|
|
@ -154,20 +173,28 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
• 错误的上下文：例如，在用户输入错误信息后出现的错误消息应与用户尝试访问不存在的页面后出现的错误消息不同。
|
||||
再举几个报错的例子：
|
||||
• 登录密码报错：如图9-17所示，错误状态可以显示一条消息， “密码错误”或“请输入8位密码或者包含至少1个数字或特殊字符的密法”。通过给予反馈引导用户输入正确的密码。
|
||||
|
||||
图9-17登陆密码报错，图片出处 ：uxplanet.org
|
||||
|
||||
• 表单无法提交：错误状态可以显示一条消息，如“请填写所有必填字段”或“提交表单时出错”。也可以如图9-18所示显示一个红色区域提醒。
|
||||
|
||||
图9-18 表单提交报错，图片出处 ：smashingmagazine.com & stackexchange
|
||||
|
||||
|
||||
图9-16 登陆密码报错，图片出处 ：uxplanet.org
|
||||
|
||||
• 表单无法提交：错误状态可以显示一条消息，如“请填写所有必填字段”或“提交表单时出错”。也可以如图9-18所示显示一个带有红色X的纸张图标，或者一个指向帮助填写表单的页面的链接。
|
||||
|
||||
|
||||
|
||||
图9-17 表单提交报错，图片出处 ：smashingmagazine.com & stackexchange
|
||||
|
||||
• 无法加载的网站：错误状态可以显示一条消息，如“无法加载网站”或“请检查您的互联网连接”。或者一个指向帮助解决网站加载问题的页面的链接。
|
||||
|
||||
图9-19 页面加载报错，图片出处：smashingmagazine.com, Natalie Kirejczyk
|
||||
|
||||
|
||||
|
||||
图9-18 页面加载报错，图片出处：smashingmagazine.com, Natalie Kirejczyk
|
||||
|
||||
• 无法正常工作的游戏：错误状态可以显示一条消息，如“无法启动游戏”或“请稍后重试”。也可以显示一个带有红色X的游戏机图标，或者一个指向帮助解决游戏加载问题的页面的链接。
|
||||
|
||||
图9-20游戏加载报错 图片出处：pencilandpaper.io
|
||||
|
||||
|
||||
|
||||
图9-19 游戏加载报错 图片出处：pencilandpaper.io
|
||||
|
||||
如我们所看到的，设计错误状态有很多不同的方法。最佳方法取决于特定的应用程序或网站、目标受众和期望的效果。
|
||||
|
||||
|
|
@ -191,11 +218,17 @@ Fluent Design System 是微软的设计语言，它提供了一套一致的设
|
|||
• 与用户测试空状态：设计好空状态后，最好与用户测试，看看他们对其的反应。这将帮助您发现空状态的潜在问题并进行必要的调整。
|
||||
举几个空状态的例子：
|
||||
• 社交媒体信息流没有帖子的情况：空状态可以显示消息，如“暂无帖子”或“开始分享您的想法。”它还可以显示一个人看着手机的图片，或者一个链接到热门话题页面的链接。
|
||||
|
||||
图9-21空内容 图片出处：vandasta.com
|
||||
|
||||
|
||||
|
||||
图9-20 空内容 图片出处：vandasta.com
|
||||
• 待办事项列表为空的情况：空状态可以显示消息，如“您没有任务”或“立即添加任务。”它还可以显示一个已勾选几项的清单图片，或者一个链接到如何创建待办事项列表技巧页面的链接。
|
||||
|
||||
图9-22 空列表 图片出处：userguiding.com
|
||||
|
||||
|
||||
|
||||
图9-21 空列表 图片出处：userguiding.com
|
||||
• 联系人列表为空的情况：空状态可以显示消息，如“您的联系人列表为空”或“立即添加联系人。”它还可以显示一个电话簿的图片，或者一个链接到如何添加联系人技巧页面的按钮。
|
||||
|
||||
图9-23空列表 图片出处：hongkiat.com
|
||||
|
||||
![Uploading image.png…]()
|
||||
|
||||
图9-22空列表 图片出处：hongkiat.com
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче