作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Merehan Elamrosy
验证专家 在设计
14 的经验

Merehan是一名产品设计师,他为教育设计功能和视觉上吸引人的用户界面, 管理, 健康, 运输, SaaS, 电子商务公司. 她曾为多个欧盟资助项目主持设计研讨会,并在欧洲顶尖大学举办设计思维讲座.

专业知识

以前的角色

产品设计师
分享

2021年9月, 短视频应用TikTok成为全球下载量最大的应用, 与 6.56亿次下载. 这款应用的成功有很多因素, 但可以说最重要的是它的功能界面. 将看似混乱的全屏视频框成一个整洁的网格,用户可以毫不费力地浏览到他们想要的内容. 通过遵循功能性设计方法,TikTok消除了不必要的摩擦,减少了 认知负荷,并为用户创造了一种秩序感.

对于设计师来说,美学与功能是一个由来已久的难题, 因为两者都是基本概念 用户体验设计. 虽然一个视觉上吸引人的界面可以帮助用户在情感上与产品建立联系,并产生初步影响 用户参与, 无缝的用户体验直接影响用户执行任务和从产品中获得所需内容的容易程度. 在理想的情况下, 美学和功能将在数字设计中无缝融合, 但情况并非总是如此. 经常, 用户需求和行业特定市场规则等因素将设计师拉向一个或另一个方向.

在过去的14年里,我们一直在努力打造用户友好的、视觉上吸引人的数字体验——最近的一次是Web3音乐分享 手机应用程序-我理解这种困境. 根据我的经验, 虽然美学对于吸引用户和创造积极的第一印象非常重要, 它们不应该以牺牲功能为代价, 没有它,数字产品就会缺乏目的和实用性. 但这并不意味着美学不会占据中心地位. 让我们讨论一下.

UX设计过程中的美学

视觉上令人愉悦的UX设计是指创造具有吸引力的用户体验, 引人入胜的, 和愉快的. 这种方法包括实现 平面设计原则color、排版、空白、图像和视觉反馈来制作视觉构图. 这种方法旨在提高用户满意度, 让用户在情感上与产品建立联系, 传达一个可识别和令人难忘的品牌形象.

美观的用户体验设计的主要元素包括和谐的色彩, 高质量的图像, 平衡的空白, 可读的字体, 和其他人.

美学对数字产品的整体用户体验有多种影响. 首先, 一个视觉上有吸引力的界面可以创造一个积极的初始印象, 吸引用户并鼓励进一步探索. A 开创性的研究 麻省理工学院的一组神经科学家发现,大脑在几毫秒内处理视觉信息. 当用户第一次与网站或应用程序交互时, 直接的视觉冲击会显著影响他们的感知.

此外, 始终如一地应用美学元素有助于塑造和强化品牌形象,使其令人难忘. 一个独特和视觉上一致的网站有助于创造持久的印象和信任感, 让用户更有可能回访.

除了, 用户通常认为美观的设计是可用和高效的, 即使客观上并非如此, 根据… 开创性的研究 ATM接口. 研究人员要求参与者与不同设计的自动取款机互动,发现参与者认为设计更美观的自动取款机更容易使用——尽管所有机器的功能都差不多. 这让研究人员得出结论,审美吸引力对感知可用性有积极影响.

用户体验设计的功能方法

功能指的是产品或系统工作得有多好,以及用户实现目标的容易程度. 数字设计的功能考虑包括以用户为中心、可用性和可访问性. 以用户为中心是一种将用户或客户置于产品开发中心的理念. 可用性是指界面布局和导航系统的易用性. 无障碍是指确保不同经验水平和能力的用户都能访问网站或平台.

功能性用户体验设计的主要元素包括一致性, 简单, 工作效率, 视觉层次结构, 和其他人.

功能性UX设计优先考虑增强可用性的特性, 简化任务, 删除不相关的元素, 它是否是一个让人分心的图标, 复杂的导航结构, 或者不必要的动画. 这种方法减少了可能压倒用户并导致他们放弃产品的认知负荷. 如果实现正确,这种设计策略可以提升 用户保留 和客户满意度,并帮助界面适应不断发展的技术.

美学和. 功能:选择设计方法

理想情况下,设计师应该平衡美学和功能设计. 这种终极平衡的一个经典例子就是苹果的iPhone. 界面的时尚设计,直观性,和创新的功能,如 空投 若要与附近的苹果设备共享文件,请继续将其与其他设备分开.

美学和功能对于成功的数字设计都是必不可少的. 所以当设计师被拉向一个或另一个方向,以满足用户需求或市场规则, 他们应该遵循哪种设计方法?

何时优先考虑美学

专注于视觉内容或营销的行业往往倾向于美学优先的设计过程. 电子商务公司, 例如, 通常优先考虑美学设计,因为第一印象和品牌认知度有助于他们的成功. 在线时尚和化妆品零售商ASOS就是一个美观的用户界面的好例子.

ASOS的桌面网站,有呼叫操作按钮,可以购买两个类别:Trending Denim和Topshop.
ASOS使用明亮的彩色图形和干净的白色背景来增强其视觉吸引力和用户导航的便利性. (ASOS)

该平台在白色背景上对比了彩色明亮的图形元素. 这种对比通过在页面元素之间创建一定程度的分离,并将读者的眼睛从一个地方引导到另一个地方,从而帮助用户在视觉上吸收内容, 使整个阅读过程感觉自然和线性.

该品牌还投资了高质量的形象来展示其产品. 在传统的实体店,顾客可以亲自看到和检查产品质量. 没有这种物理交互,在线产品图像是用户的主要参考点. 高质量的照片 尽可能逼真地模仿店内体验. 清晰和详细的图像也给买家信心,帮助他们做出更明智的购买决定.

除了 在线时装在美国,美学在许多其他行业中发挥着重要作用. Duolingo有一个有趣的界面和一个卡通吉祥物,吸引了儿童和成人, 并体现了品牌的 :让学习语言变得有趣和普遍. 此外, 大胆的颜色和鲜明的图标帮助用户区分课程和模块, 并跟踪他们的进展. 的美学设计 芬蒂美 包括引人入胜的图像, 翻转动画, 以及引人注目的视频,以突出产品,为美容和护肤品牌的购物者创造引人注目的体验.

然而,仅就美学而言 不能保持用户粘性. 成功的产品还依赖于丰富的功能和可用性最佳实践,例如直观 搜索导航 系统和无缝的结帐流程. 例如, 来帮助导航大约85,000种产品, ASOS的移动用户可以使用该平台的 风格匹配功能 拍照或上传图片,并在ASOS上搜索类似产品. 这个可视化搜索工具提供了个性化和可访问的购物体验, 特别是对于那些努力用语言表达他们想要的东西,但可以很容易地在视觉上识别它的用户. Duolingo采用了游戏化的元素,比如点数, 水平, 条纹, 并提供奖励以激励用户继续学习. 除了视觉上吸引人的界面, 芬蒂美提供的功能包括虚拟试穿,以找到合适的粉底,以及预约美容专家的选择.

什么时候关注功能

在处理复杂的工作流时,设计师通常会优先考虑功能,因为这种方法有助于简化和减少用户完成任务必须采取的步骤. 这种精简几乎总是与技术相关的产品和服务的要求. 谷歌的主页——以及用户可以输入搜索查询的单一输入框——是一个终极的例子 简约 消除干扰的设计,将用户的注意力集中在手头的任务上.

改善功能和用户体验的另一个有效特性是简单的行动召唤(CTA),它有助于快速跟踪用户到他们想去的地方. 例如,如果用户访问他们的“草稿” & 的文件夹,但没有正在进行的草稿, 一个简短的建议和CTA提示他们开始一个新的消息.

显示在“草稿”上的空状态 & sent” page of Slack’s desktop application.
而不是呈现一个没有提示的空白屏幕, Slack草稿页面的空白状态鼓励用户采取具体行动. (Slack Technologies, LLC)

在医疗保健领域, 航空航天, 汽车工业, 为了满足严格的法规和标准,功能通常优先于美观, 最小化系统故障的风险, 把安全放在首位. 医疗信息 本质上很难破译,所以清晰才是王道. 可访问性也是关键, 功能性设计方法可以帮助确保数字医疗保健产品对每个人都可用, 包括数字读写能力有限和有视觉障碍的用户.

有很多方法 提高可访问性 和功能, 例如实现用户友好的信息架构,以及为菜单项和导航按钮应用简单的语言. Medisafe, 一个药丸监护和跟踪平台入围了美国最具价值数字治疗奖 路透社活动制药奖项 美国 在2022年,是数字健康领域优秀功能设计的一个例子.

Medisafe用户智能手机锁屏上的剂量提醒通知.
Medisafe的用户会在智能手机的锁屏屏幕上提示他们在设定的时间服药. (Medisafe)

Medisafe应用程序通过创新的通知系统强调了功能和可用性,用户可以在智能手机的锁屏上标记服用的剂量. 当他们收到通知时, 他们只需按住它,打开提醒,并标记剂量完成.

功能设计案例研究:优先考虑可用性和用户需求

每个项目都不一样. 以下是我在设计过程中优先考虑功能的例子:

我最近领导了一个项目,设计一个去中心化的音乐分享应用程序的界面. 我们的目标是提供一个透明的, 目的导向, 以及用户中心产品, 与不断发展的对分散音乐共享的期望保持一致 Web3时代. 为了实现这一目标,我们专注于开发基本且易于访问的功能.

我们希望确保主屏幕优先考虑关键用户操作, 比如搜索音乐, 浏览播放列表, 访问个人资料信息. 因此,我们设计了一个用户音乐库的全景视图, 分享歌曲, 参与指标.

除了, 我们增加了一个个性化的分类系统和丰富的搜索功能,以确保用户可以毫不费力地发现和管理他们的音乐. 使之成为可能, 我们为艺术家设计了一种方法,让他们直接策划自己的流派分类,更真实地代表他们的音乐,而不是仅仅依靠学习算法. 我们还引入了高级搜索过滤器,允许用户根据他们想要体验的心情或情感来浏览音乐, 以及类型, 艺术家, 和关键字. 这些功能对于让我们的分散式音乐应用的用户更好地控制他们的音乐偏好至关重要.

无论项目的重点是美学还是功能, 设计师的最终目标应该是为用户创造积极而有意义的体验. 通过集中精力设计易于操作的关键功能,而不是 设计美学,我们提供了一个高度可用的、面向用户的界面. 我们的客户对结果很满意,并将很快推出MVP,以便艺术家和听众可以 测试 该应用程序的测试版.

实现无缝用户体验的正确平衡

通过了解用户需求和特定行业的市场法规, 设计师可以创造超越预期的数字体验,并增强用户体验. 某些行业, 比如医疗保健或金融, 由于应用程序的关键性质,通常优先考虑功能和可用性. 其他部门, 比如网上零售, 更强调视觉上的吸引力设计,以创造积极的第一印象和信任感和专业精神.

确保产品正常运行是至关重要的, 因为是功能决定了产品的有用性. 然而, 一个成功的数字产品是一个在视觉上吸引人的设计和用户友好之间取得适当平衡的产品, 功能体验.

了解基本知识

  • 美学设计和功能设计的区别是什么?

    美学设计和功能设计方法之间存在明显的差异. 美学侧重于视觉吸引力,并帮助用户在情感上与产品建立联系. 功能关注于可用性, 实用性, 以及产品或系统有效实现其预期目的的性能.

  • 功能高于美学意味着什么?

    功能重于美学是一种设计原则,优先考虑功能和可用性,而不是视觉吸引力或装饰元素. 它提出,主要的焦点应该是使产品或系统有效地工作,以实现其预期的目的, 而不是强调它的视觉吸引力.

  • 你如何在设计中平衡美学和功能?

    为了在设计中平衡美学和功能,从指挥开始 用户研究 了解你的目标受众的需求. 然后,定义包含功能和美学的清晰设计目标. 确定什么功能是必不可少的,以及美学如何在不影响可用性的情况下增强用户体验.

聘请Toptal这方面的专家.
现在雇佣
Merehan Elamrosy

Merehan Elamrosy

验证专家 在设计
14 的经验

西班牙巴塞罗那

自2022年8月3日成为会员

作者简介

Merehan是一名产品设计师,他为教育设计功能和视觉上吸引人的用户界面, 管理, 健康, 运输, SaaS, 电子商务公司. 她曾为多个欧盟资助项目主持设计研讨会,并在欧洲顶尖大学举办设计思维讲座.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前的角色

产品设计师

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.