首页

简单又不简单的“设置”场景设计

鹤鹤

一、随处可见的齿轮


以一个小小的齿轮(或者扳手)形象登场,“设置”在几乎所有产品中都是不可回避的模块,他允许用户在弹性范围内自定义产品,来更好地适应实际需求。

在一些产品团队的眼里,“设置”或许是一件非常简单的事情,因为大多设置模块的使用频次低,无关核心业务。所以当内容看似非常简单明确时,“设置”甚至会不经设计,由开发直接上手就干。但这样简单处理的结果被摆到用户面前时,各种糟糕的体验就纷至沓来了。找不到设置入口、不知道该如何设置的用户吐槽屡见不鲜。所以说,“设置”,说简单也不简单


下面我们就从用户场景出发,深入挖掘设计逻辑,重新认识这个随处可见的小齿轮。




二、“设置”的用户场景


调研发现,不同性质、体量的产品,“设置”模块的功能设计存在着不小的差异。

ToC产品一般会提供关于用户自身使用习惯的设置,如界面语言、皮肤主题等。而对于ToB产品来说,除了部分与ToC产品重叠的用户个性化设置内容外,往往还有作用于整个平台、全体用户的系统设置权限,当然他们的可见用户并不是全体成员。


从上述对功能的简单描述可以初见,“设置”模块的目标用户也不会是一成不变的

拿我们日常高频使用的浏览器产品来说,设置是开放给全体用户的功能模块,但它的使用频次很低,如一些关于性能、证书的配置,即使是浏览器的熟练使用者也可能对它很陌生。也就是说,哪怕是产品的高级用户,也可能是“设置”模块的新手用户。

而以技术导向的工具型产品为典例,繁杂的系统设置是产品为了满足不同客户间、复杂多变的业务规格,在系统中留出的弹性空间。在这个需求场景中,与产品对话的用户一般是系统管理员或技术支持人员等,他们对系统方方面面的经验认知都很充足,甚至系统设置就是其主要工作模块。所以,对于这类用户场景下的“设置”模块,“高效操作、成功结果”是至关重要的设计目标。因为高级用户往往不追求很强的互动性,更希望跳过流程和步骤,直接切入功能得到理想结果。


面向不同的目标用户,自然有不同的设计逻辑,本文接下来的内容,或有共同之处,但更侧重于面向第二种情况的思考。




三、“设置”的设计逻辑


思考“设置”的用户场景,使得设计逻辑的探讨更加有据可依。简单来看,“设置”的设计可以从三个环节切入:

  • 设置前:如何向用户展示设置内容

  • 设置中:如何设计用户的输入交互

  • 设置后:如何保存生效或发生错误的处理


接下来我也将从这三个环节发散思考,从信息架构、展示编辑、默认值、帮助说明以及保存等多个方面来谈谈我对“设置”的一些看法。



(1)做好内容的信息架构

成熟的“设置”模块,必然拥有良好的信息架构。这不仅是指“设置”内部的导航设计,同时也包括“设置”在整个产品的层级安排。这些导航、层级的确定,则会受内容信息体量、功能重要程度等影响。

首先,在“设置”内部规划一个合理且清晰的导航,需要在信息的深度和广度之间做好平衡。平衡架构的天然敌人少不了信息量冗杂这个令人头疼的问题。无论是在单个层级中内容过多,还是层级本身过多,都会给用户的快速定位带来考验。而通过调研发现,如Google、Salesforce等产品都选择在复杂的“设置”模块引入了全局搜索来帮助用户缓解查找某一功能的压力。

信息量冗杂带来的考验还有那些零散的、彼此关联不强的设置项。对他们的架构安排,很容易因为不知道怎么组织,便一股脑地塞进诸如“通用”、“高级”等的模糊分类中,不过这可谓是十足的懒人设计。想要搞定这些难搞的信息,设计者需要对设置内容有更深入的研究和理解,搞清楚它改变了什么、会影响什么以及后续是否会拓展更多关联设置,等等。

还有一个值得思考的细节:对于丰富多样的设置项来说,是将他们散落到直接影响的功能模块中合适,还是汇总于一个设置模块中更合适呢?或许在不同的场景里答案并不一致,我觉得这需要综合考虑该设置项的放权角色、配置频率、配置影响等因素。



(2)设置内容的展示与编辑

完成“设置”模块的基本架构后,就该将目光投向那些具体的设置项了。就常见的设置内容而言,根据其适合的展示形式进行简单的抽象,主要分为以下两种:

1、适合以表单形式组织的内容:一般是具有独立影响又拥有相同特征标签的单条数据被整合到一个分组下进行展示与配置

2、适合以表格形式组织的内容:一般是具有相同固定结构的数据集需要进行统一管理,包括组层面的增删等

为每一个内容选择最合适的展示形式(当然也并不仅是上述两种),这个选择大多时候并不困难,因为“设置”场景的目标导向往往比较明确、直接。当然也不排除部分复杂场景的存在,这就需要我们多花些心思,以用户更易理解的展示形式完成功能性的表达。

在“设置”模块,展示与编辑的联系非常紧密。直接编辑和解锁后编辑的选择,主要取决于用户进入页面的常规诉求是查看确认还是编辑修改,以及这些设置内容的改动容错性是否良好,等等。



(3)默认值与帮助说明里的用户体验

在本文讨论的“设置”场景中,每一个更改都可能对整个平台乃至全体用户产生影响。通过调研,我们发现多数用户对于默认值的沿用性不低。故,对于那些需要默认值的设置项,选择一个合适的默认值是值得审慎对待的问题。

了解用户习惯和业务需求是解题的关键。什么样的默认值最贴合用户的使用习惯,什么样的默认值能以最佳状态满足业务需求。例如,我们的堡垒机产品一般将日志保留时间的默认值设为365天,便是考虑到了用户习惯与产品性能的微妙平衡。

除了默认值的设计,恰到好处的帮助说明也可以让设置的用户体验变得更好。

我时常看到“设计的目标应该是完全删除说明文字”之类的论述,这好像正契合了简约至上、不要让用户思考等当下流行的宗旨。但,正如尼尔森十大原则的最后一条“人性化帮助原则”也指出,帮助和使用文档是有必要的。

结合“设置”的自身的特点:这是一个对产品进行底层配置(相对其他模块而言)的控制模块,对用户的认知与学习能力有着不低的门槛要求。也就是说,设置的内容对于用户是有一定难度的。我们需要更多考虑内容的帮助说明是否充足,不要想当然觉得用户能够理解。

所以,不难想象,设置模块的说明概率会远高于产品的主体功能模块。进一步探究帮助说明的设计:从形式来说,它可以是文案、配图甚至是一个视频讲解;从强度来说,它可以一次性出现、常驻于页面或是直接跳转帮助文档等。大多数用户并不希望在设置模块获得探索的乐趣,所以无论如何设计,帮助其快速完成任务是我们在设计“设置”时非常重要的一个追求。



(4)二次提交与即时生效

“保存了吗”这不仅是每个设计师在电脑卡机时候会问自己的问题,也是用户在完成一系列配置操作后的疑惑。这就牵扯到了设置何时生效的问题。最常见的交互方案有两种:

1、每一项配置都即时生效

2、整个表单统一提交后生效

那么,哪一种方式更好?我继续尝试从业务需求和用户习惯两个方面入手:

“设置”模块的操作往往牵一发而动全身,试错成本其实是非常大的。之前听产品经理说过一个银行客户因为修改了某个小小配置项,而造成了巨大实际损失的例子。所以,在这样一个控制中枢般地位的模块中,即时生效的选用必须谨慎评估操作风险,减少用户轻易出错的机会。

同时,由于即时生效和表单提交这两种交互方式都非常常见,用户天然存在一种认知压力,也就是上面提到的“保存了吗”的不确定。所以,我们需要通过设计,让用户快速且准确地知道当前页面采用的是何种保存交互。

从调研和自身经验得出,以下几点都是比较好的思路:

1、实时的操作反馈可以帮助用户判断是否生效

2、尽量控制设置内容在一屏以内,这样无论是否设计统一提交的按钮(或者更改后出现),用户都可以轻易感知

3、将统一提交的按钮以悬浮方式明显地驻于页面底部,减轻内容超出一屏时的认知压力

4、慎重处理如开关、按钮、滑块等带有很强“即时生效”隐喻的控件




四、简单也不简单的“设置”


对于很多产品产品而言,“设置”是点击率不高的辅助模块。由开发人员直接上手,设置项很容易就变成机器语言的直译、迭代顺序下的铺陈,而用户是否可以接受这种简单粗暴的处理,就成了阿甘手中的那盒巧克力。

从关于“设置”的论述以小见大,哪怕是看似简单的角落,也存在着不简单的设计逻辑。我一直觉得,设计对于商业的价值在于推动沟通,即保证产品与用户的对话“时刻”流畅。所以,不要草率处置那些不起眼的边缘模块或简单功能的设计。

文章来源:站酷 作者:齐治设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

用户体验设计的自动化正在靠近

seo达人



据Google技术总监RayKurzweil的所说:到2029年,电脑很可能会比人类更聪明,UX的未来也将变得更加自动化。人工智能和机器学习等最新科技已经可以支持需要人类参与的、非线性的、逻辑复杂的任务,技术创新正在改变人们的生活方式。例如科技创业型公司不仅为自动驾驶提供相关建议,甚至可以为节目表演提供更加智能的建议。

在我们创建和使用复杂产品的过程中,自动化发挥着日益重要的作用,我们可以感知到,自动化将在UX用户体验设计的未来发挥巨大的作用。用户体验设计的自动化很可能是接下来影响UX设计整个行业的一件大事 – 无论是优化设计反馈流程,还是改变和精简产品团队的运作方式,自动化都会起到重要作用。自动化正在不断增强我们创造引人注目的产品的能力。

 

设计自动化:迅速将概念转化为高保真原型

通常,UX设计师绘制用户体验地图和信息架构图,并在产品设计的过程中进行用户研究工作。在设计过程中,设计师的典型输出包括:手绘草图,如图一所示。还有流程图、架构图、不同保真度的线框图,如图2所示。这些交付物中的某些-尤其是高保证原型,可能需要花费几周甚至几个月的时间进行绘制。大一般情况下,在设计过程没有完全完成之前,开发人员不会进入开发过程中,因为设计稿为后续的开发提供了指导方向。

图1 低保真用户界面草图

 

图2 低保真用户界面草图

 

因此,我们需要找到优化整个可用性测试流程的新方法,以提高设计的有效性和效率,最终实现更快的信息反馈并缩短验证周期。通过应用自动化技术,如果能够快速的创建低保真线框图,同时生成高保真界面,那么就可以在更短的时间内创建产品的界面,并将更多的时间与精力用于用户研究,最终可以加快提升用户体验的每个环节。

 

自动化蕴含着无尽的机会

Airbnb开创了自动化用户体验的设计流程,成为自动化设计的先驱。在他们的文章“手绘草图界面”中,Airbnb的设计技术主管Benjamin Wilkins和Airbnb的设计技术专家Jon Gold,演示了如何使用专用相机设备和软件实时制作低保真草图和高保真视觉原型,例如图3和4。Airbnb的视觉设计团队最终接受了自动化产出的视觉图并对视觉效果进行调整,事实证明通过创建原型以获得快速反馈和验证设计方案的速度是非常高效的。

图3 Airbnb设计

 

图4 Airbnb的迭代设计

 

“我们将代码作为设计工具去投资。通过代码来处理包括界面布局和设计展示、逻辑和数据等内容的展示。有助于缩小工程师和设计师之间的距离,以及缩短视觉图与线上效果图之间的距离 ”。- Airbnb设计负责人 Alex Schleifer

自动化设计有什么重要意义呢?自动化不是令人印象深刻的相机设备,而是能够引发巨大兴趣的机器学习。它凸显了利用机器学习的无尽机会,优化了产品设计流程,并且能够提供越来越多的价值。未来,只需通过与Siri,Google智能助理或Slack嵌入式机器人交谈就可以设计用户原型界面。“嗨,DesignBot, call to action按钮使用标题蓝色。”正如Airbnb团队所证明的,这一切都是有可能的。

 

利用“设计自动化”创造更好的产品

随着即将到来的自动化设计技术,这对您的团队意味着什么呢?为了为您的团队做好迎接设计自动化的准备,您可以通过以下几种方法无缝地过渡到自动化设计的未来。

 

视觉与品牌设计团队

自动化设计的未来在很大程度上依赖于开发强大的可视化语言,以支持多样的设计组件和设计规范。这确保了跨设备、跨平台的产品都能拥有一致的品牌体验。现在可以花时间准备这些可视化语言,确保它们能够准确描述您的品牌。

 

产品负责人和产品经理

花一些时间去研究并开发加快设计过程的新方法。从创新方法入手,简化产品构思和原型制作过程。如果你不这样做,你的竞争对手当然会。自动化设计不应该成为创意的瓶颈,产品面向的是用户,加快设计过程可以更好地为用户服务。

“测试想法所需的时间应该为零 ”。- Airbnb设计主管 Benjamin Wilkins

 

UX设计师

在日常工作流程中开始使用新技术。不要将自动化视为对创意的威胁,而应将其视为利用创新技术来增强专业知识的机会,通过自动化构建更好的产品。通过减少耗时、重复性任务的时间,可以将更多的时间和资源用来进行用户研究,概念测试或用户验证。这所有事情完全是关乎用户体验的。

 

设计自动化即将到来

在过去几年中,机器学习和AI在改变整个行业的运营方式和业务方式方面发挥越来越重要的作用。由于越来越复杂的流程变得自动化,我们必须专注地去研究自动化与UX设计之间的交叉点,为设计自动化未来的到来做好准备。

虽然自动化不会在一夜之间发生,但像Airbnb这样有远见的公司正在探索在未来成为主流的新型工作方式。由于他们的探索与研究,我们能够更好地评估自动化带来的机会与影响,并了解如何更好地利用这些创新来改进我们的工作方式。无论是个人技能的提升还是设计团队的流程优化,自动化设计的潜力都是巨大的。

 

译者总结

在了解了自动化设计相关的内容后,笔者将现有的产品上线流程与应用自动化设计的产品上线流程进行对比,如图5所示:

图5 应用自动化设计的前后流程对比

 

传统的产品上线流程

需求产出,待需求评审没有问题即进入交互设计阶段(包括初期草图方案绘制,主界面绘制以及完整的交互界面与交互说明撰写),交互设计基本完成后进入视觉设计阶段,同时前端可进入开发阶段;在进行交互设计的同时,后端同步提供接口。开发完成后进入测试阶段,测试没有问题产品可发布上线。上线后收集用户反馈,进入下一轮的产品迭代中。

 

自动化的产品上线流程

需求产出,待需求评审没有问题即进入交互设计阶段,交互阶段草图绘制完成后即可通过自动化技术将草图转化为高保真原型界面(视觉再进行相应调整即可),减少交互、视觉与前端开发的工作量。待前后端开发完成后进入测试阶段,测试没有问题产品可发布上线。上线后收集用户反馈,进入下一轮的产品迭代中。

为了便于理解自动化技术,译者简单总结一下自动化技术的实现原理:自动化技术依赖前端强大的可视化语言,需要强大的前端组件库来识别草图中的占位符含义。例如,当在草图中绘制一个占位符时,通过智能化技术自动识别该占位符在产品中所代表的组件,进而生成高保真的用户界面。因此,可以迅速看到产品从草图阶段到上线后的效果图,也便于对设计方案进行及时更正。

 

结合两种流程对比,译者结合自身工作经历总结了应用自动化设计的三点优势:

(1)迅速验证多种设计方案

在项目迭代周期紧张的情况下,设计师缺少额外的时间和精力来设计多种方案,更无法验证哪种设计方案能更好地解决用户需求。精益设计时代,很难对每次的设计方案进行可用性测试。而自动化设计过程中,可以直接将设计草图转换为可点击的高保真原型界面,交互设计师有更多时间和精力来绘制多种设计方案并利用高保真界面进行用户测试,从而迅速调整设计方案使其能更精准的帮助用户解决痛点,从而提升用户体验。

 

(2)提前开发节点,缩短项目周期

原有的开发流程中,在需求明确之后,后端可以同步开发某些接口,而前端开发需要等完整的交互界面绘制完成后才能进入开发阶段,这导致项目周期很难缩短。自动化设计在交互设计师完成草图后前端开发即可进入开发阶段,将开发节点提前至操作阶段,可以明显缩短项目周期,提高产品迭代效率。

 

(3)迅速验证需求是否被满足

笔者在工作过程中发现,B端产品的用户在交互评审的过程中会否定自己的需求。产品经理收集需求的过程中,用户提出想要满足A需求。在A需求的设计方案完成后,用户看到设计界面时经常会提出自己想要实现的需求并非如此。

即,由于B端产品的专业性特殊性,用户在未看到设计界面之前并不清楚自己的需求是否得到满足。

因此,利用自动化设计可以迅速将需求转化为设计界面以进行用户测试,快速试错以明确用户的需求是否真正得到满足。

 

封面作者:Paul Olek

原文地址:网易UEDC(公众号)

作者:仉长娟

转载请注明:学UI网》用户体验设计的自动化正在靠近

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在不同屏幕和设备上创建用户体验设计的8个步骤

seo达人


1. 确定核心用户体验

每个产品都有核心的用户体验,这基本上是它存在的原因。它解决了人们所面临的问题,而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验,就要问自己一个问题:“客户需要完成哪些最常见和最重要的任务?”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如,Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何,此功能都能在每个设备上正常工作实现这一目的。

Image title

                             预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源: Techcrunch

 

2. 定义产品的设备组

尽管存在大量不同屏幕尺寸的设备,但绝对不能定位各个设备,可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是:

移动手机

平板电脑

台式电脑

智能电视

智能手表

Image title

不同的设备组在不同的上下文中提供不同的服务:用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如,手机主要用于微任务,并且具有较短的用户会话。平板电脑主要用于内容消费,目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。

 

3. 适应每个上下文使用的体验

确定产品的核心用户体验后,选择一组你希望支持的设备组,你需要调整每个组的体验(对于每个上下文的使用)。上下文的设计在不同设备组设计时尤为重要。

第一,并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景,并设计适合每个场景的体验。例如,通常移动用户比电脑用户想要的不同于产品。以 Evernote为例,可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化:

Image title

                           用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。

 

而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的:

Image title

Evernote了解移动环境:它利用设备功能,并提供快速保存想法的方式(添加文本笔记,捕获照片或设置提醒)。

 

第二,不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入(移动手机和智能手机)的设备时,设计师会犯的几个常见错误包括:

小的点击目标。点击目标(如CTA按钮)必须具有足够大的尺寸。通常至少7毫米是足够的,但最好使用10mm触摸目标尺寸。

Image title

                                      图片来源:UXMag

 

将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距,因为间距有助于分离控件,并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。

Image title

                                                                                      按钮之间的间距

使用悬停状态。但在触摸屏上,没有“悬停”。

 

4. 最小屏幕设计

历史上,设计师一直从事大屏幕到小屏幕的设计工作,这意味着第一个也是主要设计是为了完整的电脑桌面视图(它具有最多的功能)。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时,我们通常面临“厨房水槽”问题:许多功能被添加到产品中,特别是当涉及多个利益相关者时。这并不奇怪,,当你有很多不动产时,添加功能是比较容易。实践经验清楚地表明,最好使用移动方法进行设计,并通过与用户相关的最小屏幕创建应用程序。

当你首先设计相关屏幕的最小尺寸时,它会强制你决定最重要的。一段时间后,你将采用同样的方法仔细选择产品的其他版本,无论是电脑桌面设备,平板电脑还是电视。

Image title

在大多数情况下,手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要,那么你将需要考虑具有更小分辨率的微型屏幕。

 

5. 不要忘记大屏幕

想想大屏幕以及小屏幕,给大屏幕和小屏幕提供同样的注意力:

不只是缩小设计,使其适合那些大屏幕。充分利用你可以使用的额外空间。

Image title

                                                                                           图片来源:Wikipedia

 

确保图像不会因为屏幕尺寸的放大而失去质量。

Image title

                                                左:低质量图像。右:正确的分辨率。

 

考虑大屏幕细节。每个设备组都有自己的不同。例如,电视屏幕的设计被称为“设计10英尺体验”,因为从沙发的距离来看,与电脑桌面屏幕相比,屏幕上元素的明显尺寸明显更小。

Image title

                                                                 电视的用户界面元素应大于电脑桌面。图片来源:Samsung

 

6. 提供一致的体验

一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何,一致的用户体验是成功的全通道用户体验的关键组成部分之一:

对未来与产品的交互设定期望,并建立用户信心。

一致的体验使得你的产品在其他设备上与用户的交互更容易。

你可以将它们视为相同体验的方面,而不是将设计定制到越来越多的屏幕和设备中。例如,Google搜索应用在所有设备上提供相同的搜索体验。

Image title

                                                 当设计和功能一致时,用户可以在他们选择的设备上更快更有效地完成任务。

 

7. 创造无缝体验

跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动,完成任务,或当他们从设备转移到另一设备时,他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备,环境的变化或上下文的变化,并且可以依赖于设备良好的功能性和独立于设备的易用性。

Image title

                  大多数人如何走过他们的一天,他们访问的主要屏幕。图片来源:Intercom

 

根据使用情况,你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例:你可以在Mac上设置播放列表,并在iPhone上即时播放,也可以开始听iPhone上的歌曲,当你转到电脑桌面时,你将被拍摄回到你在iPhone上。

Image title

                                                                  Apple Music可以很好地处理多个设备的同步。

 

8. 测试你的设计

在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试,你可以在发布之前发现用户体验的问题并解决它。

 

结论

在设计多个屏幕和设备时,最好的策略是保持最终的用户体验。作为用户体验设计师,你必须评估产品的使用时间,位置和方式,以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕,用户都希望在各种设备之间获得流畅的体验。

 

原文地址:Adobe Blog

译文地址:UI中国

作者:Nick Babich

译者:SKYUI

 

转载请注明:学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用户体验设计定义&详细案例

seo达人


一个设计的存活或死亡依赖于它适应人类的行为和认知限制的能力。

 

一、什么是用户体验?

用户体验(User Experience,简称UE/UX)这个词是在上世纪90年代中期,由用户体验设计师 唐纳德·诺曼(Donald Norman)所提出和推广。

定义:用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受,包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

 

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度,即用户能否用产品完成他的任务,效率如何,主观感受怎样,实际上是从用户角度所看到的产品质量,是产品用户体验的核心,不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

 

01 易学性

指的是用户学习如何与产品进行交互,以实现目标所花费的时间和精力,即用户能否在初次使用产品时完成简单的任务或实现用户目标。

 

02 效率

用户在使用产品一段时间后,能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例,用户能否快速的下载想要的东西,在同一系列中,可以快速下载更多的相关内容。

 

03 可记忆性

我们常说互联网是有记忆的,好的产品体验是帮助用户去记忆。用户在体验中,要对一些有意识、无意识的行为进行记忆是一个比较大的负担,如果在一些环节通过系统能帮用户记录,会降低用户的负担。比如在搜索、历史记录、浏览记录等。

 

04 容错性

用户在使用产品时,发生错误后,能否快速帮助用户识别和纠正错误,帮助用户从错误中恢复的能力。如常见的注册登录,当用户属于邮箱格式不对的时候,给出提示,并且告知错在哪里。如果提示语只是:”请输入正确的邮箱” 用户可能会疑惑,错在哪里。

 

05 满意度

满意度指的是用户与设计互动产生的愉悦程度,可以是用户使用产品时流畅的交互和优秀的视觉设计,也可以是用户在产品中得到的满足感。比如sir语音交互,王者荣耀等级(满足感)

 

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能,例如P图类软件,用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

 

07 个性化

在满足实用性的基础上 针对用户提供不同场景下的功能定制,如美图秀秀,在提供图片美化的同时,针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

 

08 可预测性

用户能够预测到下一步操作或者整个流程的交互,将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

 

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

 

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上,这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件,最常使用的就是播放/暂停,上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中,这就是功能可见性。

 

02 状态可见性

当信息或者列表过多时区分状态的展示,将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来,会极大地破坏易用性,因为人们将不得不进入一个个邮件详情页当中进行确认,才能获取到原本由徽标提供的状态信息,这样的互动非常低效且乏味。

 

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤,后面还有多少步骤,完整清晰的流程展示。如果将这些信息隐藏起来,用户会困惑当前进行到哪一步,接下来还有多少步骤。

 

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素(如滚动条、命令按钮和图标等)的设计必须能够为用户提供足够清楚的建议,让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么,以及如何与它们进行交互行为(点击、长按、滑动 等)

 

五、反馈

给用户及时、恰当的反馈,是体验设计中非常重要的一项原则;对每个用户的操作都应该有恰当的系统反馈(包含视觉、听觉、触觉)。

 

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

 

02 动作连接性

当用户产生某个动作时,给予相对应的连接反馈。如大概用户点击某个按钮时,按钮默认的外观与点击后的外观发生变化,结合现实世界的开关去思考(按下 开灯)动作与反馈是连接的,即时的。

 

六、希克定律

希克定律,是1951年由威廉·埃德蒙·希克首先提出的,认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多,做出选择所花的时间就越多,当面临选择的数量增加,做出决定的时间也会跟着增加。

 

如京东筛选,在搜索结果页会将筛选条件收起,因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单,并且做好归类,用户能够更迅速的作出决定。

 

七、费茨定律

费茨定律,是1954 年 由保罗.菲茨首次提出,在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

 

  • T:代表完成移动所需的平均时间
  • A:代表光标开始/停止时间
  • B:代表光标移动速度
  • D:代表从起点到目标中心的距离
  • W:代表目标的尺寸

简单来说就是指:随着目标的距离增加,移动到目标的时间更长,并且随着目标的尺寸减小,选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能,占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

 

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中,所以我们在进行产品设计的过程中,会将常用/重要的操作放置在屏幕边缘处,便于用户操作。

 

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由 乔治·米勒 所提出的,根据乔治·米勒的研究,人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

 

由于人类的大脑处理信息的能力有限,大脑会将复杂信息划分成 块 和小的单元。如:京东和每日优鲜的分类处理。

 

人类短期的记忆一般一次只能记住5-9个,所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

 

九、复杂守恒定律

复杂守恒定律是1984年由 拉里·泰斯勒 所提出的,也称作泰斯勒定律。认为每一个产品设计的过程中,都有其固有的复杂性,存在着一个临界点,超过了这个点产品设计的过程就不能再简化了,你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中,会尽量的简化界面。当功能过多时进行一个整合的处理,跳转或者滑动操作。如查看更多或者常见的汉堡导航。

 

十、新乡重夫:防错原则

新乡重夫认为遗忘有两种:一种是疏漏,另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;比如常见的信息输入状态,未输入置灰不可点,输入变为可点击状态。

 

微信拍一拍:微信在出了拍一拍功能之后,很多时候点击头像的时候会不小心拍到别人,现在的拍一拍是可以撤销的,在客户端鼠标悬浮上就可以进行撤回,移动端长按出现撤回弹窗,两分钟内有效。

 

微信朋友圈动态:点击返回图标会出现的弹窗,避免误操作。利用防错原则,可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

 

十一、奥卡姆剃刀原理

奥卡姆剃刀 定律 :它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 (William of Occam,约1285年至1349年)提出。 这个 原理 称为“如无必要,勿增实体 ”,即“ 简单有效原理 ”

 

01、只放置必要的元素

不必要的元素会降低设计的效率,不管是实体、视觉或者认知上,多余的设计元素,有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息,可以用「更多信息」来实现。如夸克浏览器,首页只放置重要功能 搜索 和几个整合内容的图标入口。

 

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件,在播放音乐之后进入其他的tab,在上面都会悬浮播放/暂停的区域。都能够随时操作。

 

03、“老人”规则

就是产品的易用性,如果年纪大点的人,也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验,简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内,并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

 

04、减少“段落”个数

页面的使用率,当你想要在一屏新增很多内容时,页面的布局就会变得拥挤和区域变小,容易过于干扰用户做出选择,重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口;uc浏览器首页内容过多,当用户想要使用搜索功能时很容易被其他内容干扰。

 

05、给予更少的选项

前面说到的希克定律说到,当选择的数量越多,用户做决定的时间就更长。做过多的决定也是一种压力,在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示,马蜂窝根据产品属性放置了6个重要的功能入口,便于用户更快的去选择所想要的功能。

 

十二、设计和艺术的区别是什么?

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是:艺术抛出问题,而设计解决问题。

我们设想一个场景,当你在艺术展厅站在一副名画面前,你所思考的是什么?是惊叹画家的画技还是整个画面给你的感觉是一种故事,你会不会思考艺术家在作画时的心情,处境,为什么要这么去画?想表达怎么样的情感?

 

然后我们再设想一个场景,同样在艺术展厅,你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧?因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

设计和艺术的区别,如果有更好的答案,欢迎评论区留下你的看法。码字不易,请给个小小的赞鼓励一下

 

原文地址: 站酷

作者:左眼右舍

 转载请注明:学UI网》用户体验设计定义&详细案例

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



用户体验设计法则应该怎么用?来看看这些应用原理!

seo达人


1、菲茨定

图片

选中目标所需时间与移动距离长短和目标面积大小有关。(与距离负相关,与面积正相关)

 

现实中的应

图片

在商场中寻找洗手间取决于标志的大小及步行的距离。为了满足这两个标准,标志设计得更大、更容易接近。

 

设计应用

图片

▲ 左侧页面的CTA按钮很小,没有突出显示,与表单的其他元素基本上没有区分;右侧页面CTA按钮尺寸很大,能让用户清晰识别。

 

2、希克定律

图片

决策所需要花费的时间随着选择的数量和复杂性增加而增加。

 

现实中的应

图片

与餐厅相比,快餐店的菜单选项有限。因此顾客点餐速度更快,门店提供的服务也更快。

 

设计应用

图片

▲ 在Whatsapp上转发消息时,会在“最近聊天”列表上方看到“经常联系”的3个好友。这对用户来说是一种简单的交互,帮助用户节省操作时间。

 

3、共域定律

图片

被一个显而易见的边框包围起来的多个元素,被视为一个群组。(从属于格式塔理论)

 

现实中的应用

图片

在服装店中,衣服按照类型被分到不同的架子上来展示,即使对这家服装店一无所知,顾客也会将一个货架内的商品关联成相似的东西。

 

设计应用

图片

▲ 过滤器被封闭在产品页面之外的单独区域中,因此可以清楚地识别左右两部分的差异。

 

4、雅各布定律

图片

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的使用方式。

 

现实中的应用

图片

假设家中的阳台是一扇推拉门,我们可能希望酒店的阳台门也以同样的方式操作。因此如果酒店有一个滑动门,我们可能会下意识地先去推门。

 

设计应用

图片

▲ 以上是国外知名的电商网站导航栏设计,这几个网站导航栏中显示的信息及其结构都非常相似:左侧是品牌标志,中间为搜索栏,右侧为其他选项(购物车/个人账户)。

 

5、系列位置效应

图片

用户更容易记住系列中出现的第一项(首因效应)和最后一项(近因效应)。

 

现实中的应用

图片

我们通常更容易记住某个电话号码的前4位或后3位,这条法则也是银行卡号被分成4组数字的原因。

 

设计应用

图片

▲ 在亚马逊主页上,网站的第一部分总是显示最重要的内容:导航包含logo、搜索和其他重要功能;轮播图通过图形设计吸引用户的目光,引导新的交易或优惠。

 

6、冯·雷斯托夫效应

图片

又称隔离效应。当存在多个相似物体时,与众不同的物体最容易被记住。

 

现实中的应用

图片

在商场购物时,相较于普通装饰的门店,我们更有可能记住或将注意力转移到具有霓虹灯效果的门店上。

 

设计应用

图片

▲ App上有新消息时,会在图标上用红点显示,这样的提示更清晰和突出,从而吸引用户的注意力,引导用户点击并查看消息。

 

7、审美可用性效应

图片

用户通常认为漂亮的设计更易用。

 

现实中的应用

图片

当参观汽车展厅时,我们通常会对汽车精美的展示感到惊叹,并立即对这个品牌产生积极的印象。

 

设计应用

图片

▲ 在爱彼迎上,我们住在陌生人的房子里,因此建立双方的信任是必要的。当访问像爱彼迎这样干净简洁的网站时,我们会下意识地信任这个产品,也确保了用户对品牌的信任。

 

8、峰终定律

图片

人们评论体验优劣,大多基于峰值和结束时的感受,而不是所有环节的平均值。

 

现实中的应用

图片

在足球比赛中,整场的观看体验将根据比赛结束(谁获胜)和比赛高潮(谁进球最多/比赛中最激动人心的时刻)来判断。

 

设计应用

图片

▲ 在夜晚非常饥饿的时候,我们使用订餐App选择食物时,却被告知付款失败。这时候App界面设计的再好看也无关紧要,订餐失败就是从这次体验中收获的结果。

 


 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》用户体验设计法则应该怎么用?来看看这些应用原理!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


Figma自动布局赋能B端设计

周周

排版布局可以响应式的随设计师对内容的增删改而自动调整,无需手动修改徒增成本,进而大大提升工作效率。

交互规范制定指南

周周

浏览了许多关于“设计规范”的文章,发现很多都是在针对通用流程和视觉方面在整理,关于交互层面的内容比较少。基于此,结合最近项目中沉淀的实际案例,以及参考了不少行业通用的设计规范,总结了一篇关于搭建交互规范的流程、框架、要点。希望能够帮助大家更好的沉淀交互规范。

B端产品设计规范

周周

整理了一套B端设计规范,包括色彩规范、字体规范、图标规范、布局栅格、组件规范。

产品体验增长中的3个核心招式

周周

本文将以「产品与用户之间的信任」为出发点,从产品体验的角度,对比产品体验层面的差异化,为大家提供设计思路,助力产品数据的增长,设计出既好看又好用的产品界面。

超全面的UI界面字体选取与使用指南

纯纯

最初的图形界面

文字和排版可以追溯到五千年前,而图形化界面仅仅只有40年的历史。最关键的转折点出现在1973年的施乐,最早的图形化界面出现在了他们的Alto电脑上,而这个设计就是现如今图形化界面设计的基础。在Alto 的界面诞生后的10年里,几乎是它一家独大,并且它也被大家视作为数字技术的未来。

绝对专业!超全面的UI界面字体选取与使用指南

早期的Alto 在80年代进化为著名的施乐之星,而施乐的这个设计方案也成为了第一个商用的操作系统图形化界面。

绝对专业!超全面的UI界面字体选取与使用指南

不过不论是Alto 还是施乐之星,都没能真正意义上崛起。不过施乐的图形化界面最终深深的影响了苹果和微软的道路,比尔盖茨和乔布斯先后在施乐的研发中心观摩了施乐之星的运作,而乔布斯更是在1984年先人一步发布了著名的Macintosh 系统,也就是后来我们所熟知的Mac OS。

绝对专业!超全面的UI界面字体选取与使用指南

Macintosh 的发布不仅仅意味着相对成熟的GUI的出现,而且它为大众带来了真正意义上的自定义字体的功能。这款系统内置了许多以著名城市命名的字体,也正是在此之后才有越来越多的著名字体的数字版本在数字平台上发布并应用。

绝对专业!超全面的UI界面字体选取与使用指南

仔细观察这些早期的字体,我们能够发现,虽然已经是图形化的界面,但是其中绝大多数的界面元素都还是以纯文本的形式而存在,它们以一种奇妙的方式被整合到一个界面当中。循着界面的发展历程沿路看过来,不难发现,文本和排版几乎是贯穿始终的主线,它是一个不容忽视的核心类别。

文本即界面

界面中的每一个文字、每一个字符都很重要。好的文本是好的设计。文本是最根本的界面,是我们设计师来塑造和打磨这些信息。

看看下面的天气界面的设计,想象一下将所有界面元素都摆在桌上会是什么样的效果:无非就是两张图,几个图标和一大堆文本。

绝对专业!超全面的UI界面字体选取与使用指南

作为设计师,工作并不是将一堆随机的内容和元素排布在屏幕上,让它们看起来够漂亮就行了。真实的情况是,我们要从最核心的内容和文本开始着手,然后从这里着手细化,并完善出其他的部分。这就是我们工作的核心。

文本的清晰度同样扮演着关键性的角色。如果我们的大脑花费一两秒钟单纯只是分辨一个字形,那么清晰度上的微小差异是无伤大雅的。可是当它们组合成为大段的文本,不同的字母组合构成不同的词汇、段落的时候,清晰度的影响就更大了,排版的重要性也显得更加明显了。

当然,影响界面设计的文本属性还有很多,比如平衡性,定位和层次结构,但是好的文案和排版的影响至少占据整体影响的95%。

在伟大的设计师眼里,文本不仅承载内容,而且可以构成界面。
– Oliver Reichenstein

我们如何阅读

既然屏幕上的文本显示是如此的重要,那么我们应当先了解人们是如何阅读的,而文本显示又是如何影响我们设计决策的。

读过Billy Whited 的文章《Setting Type for User Interface》之后,让我对于文本阅读的效率有了更深的认知。一个少于20个字母的独立单词放在句子中会更快被理解,而单独放置的时候我们需要耗费更长的时间来识别。

其实这个研究结果也表明我们阅读较长句子的时候,并非是逐个单词地阅读,而是跳跃着阅读功能性的词汇,我们将这种阅读方式称为离散跳跃式阅读,俗称扫视。

绝对专业!超全面的UI界面字体选取与使用指南

扫视让我们的阅读能力更强,我们甚至会跳过短的功能性词汇。

我们应当记住这一关键特征,因为我们的界面中所承载的词汇大多是孤立的单词。简单说来,界面是无法利用扫视这种方式来获取信息的。

总的来说,单词在阅读中发挥着无比重要的作用,无论是作为内容还是作为界面元素,均是如此。无疑,选择合适的字体就相当重要了。

绝对专业!超全面的UI界面字体选取与使用指南

过去,人们常常认为眼睛和大脑是通过单词的外轮廓(Bouma Shape)来识别单词,当然,后来的研究证明这个想法是错的,单词的可读性和易读性的影响因素不止是外轮廓,字母本身的形态、细节和清晰度同样深入的影响着它的识别度。

是什么让字母清晰可读?

其实这个问题一开始并不是那么好回答。阅读很大程度上依赖于我们的习惯,越常见的内容对我们而言越容易识别。这样一来,我们就不那么容易判断让字母清晰易读的影响因素了。为了了解这一点,我们需要将句子分割为单词,分解单词为字母,在字母中查看细节。

早在2008年,维多利亚大学心理学系根据测试结果得出结论,大写和小写的拉丁文字母是最容易识别的,也最易于阅读。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究有趣的地方在于,它揭示了一个事实:每个字母延伸出来的线性端点是最易于识别的地方,也是每个字母的特点所在。

绝对专业!超全面的UI界面字体选取与使用指南

上面的图片标识出了这些最易于识别的部分。每一款字体在这些部分应当设计为最通用、最为人所熟悉的样式,同样的,它们也应该强调每个字母的差异。

在2010年的时候,另一项由 Sofie Beier 和 Kevin Larson 开启了一个新的研究项目,这项研究专注于测试经常被误读的字母和字符的识别度。

绝对专业!超全面的UI界面字体选取与使用指南

这项研究表明,在相同的字体和相同的尺寸、相同字重的情况下,有些字体或者变体的细节确实比其他的更加清晰、更易于识别。这项研究的结果说明,纤细的字体加粗之后识别度效果会明显会增强,而字母的X高度如果能够占据上伸区或者下探区的空间,识别度会更好。

绝对专业!超全面的UI界面字体选取与使用指南

为了更好的理解字体的清晰度的概念,你可以下载我所开发的这款工具 Legibility APP 来测试不同字体在模糊、炫光等多种不同情况下的清晰度和辨识度。这是一款处于测试阶段的工具,可以在Chrmoe、Opera和Safari 中运行。

UI中的字体使用

理解了用户阅读的方式和字体可读性的影响因素之后,我们应当开始了解UI中的字体的几个关键因素。下面是UI中字体使用的10个关键因素。

1、可读性

可读性是UI中字体所需考虑的首要因素。字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被用户轻松辨别出差异。许多经典的字体,甚至包括 Helvetica ,都没办法清晰分辨 字母 i 的大写形态 I,和大写字母 L的小写形态 l,这在界面设计中无疑是有影响的。

绝对专业!超全面的UI界面字体选取与使用指南

上图中,左边的字体为 Source Sans Pro , 右边为 Helvetica,无疑对于 Illiterate 这个词Helvetica 字体下前三个字母完全无法分辨。有部分用户也同意Helvetica 并不适合作为UI界面的显示字体而存在,因为这款字体终究是为平面印刷显示而设计的,并非为屏幕而生。

在iOS 7 时代,苹果短暂地将 Helvetica 作为系统的主要显示字体的时候,曾对特定的用户群体造成过信息识别的困扰。这也最终催生了我们现在所看到的苹果官方字体 San Francisco。旧金山是为UI界面而生的字体,它的x高度比Helvetica 更高,字母间距更宽,字母间的识别度更高。

绝对专业!超全面的UI界面字体选取与使用指南

2、适度

一款理想的UI界面所用的字体,不应当过于“显眼”,而该是悄无声息,“隐型”的。当用户在试图完成某项任务的时候,字体不应当给用户以“出戏”或者“显眼”的感觉,也就是说,字体不应当超出用户的认知负荷,而内容和信息才应该成为真正的关注点。

绝对专业!超全面的UI界面字体选取与使用指南

3、灵活

给UI界面使用的字体应当具有灵活性。我们曾经为 Medium 做过用户体验设计,作为一个网页博客平台,我们很难去控制用户的能力、内容、浏览器、屏幕尺寸、网络带宽和连接速度,包括输入法。

所以我们最终为它所选取的字体应当支持大量不同的内容,在不同的尺寸下拥有良好的识别度,能够兼容不同的设备,尤其是在小屏幕上。Sans serifs 字体就是专门为小尺寸低分辨率屏幕而定制的。

绝对专业!超全面的UI界面字体选取与使用指南

4、x高度的上限

x高度的参考标准是小写字母x的高度,同等尺寸下,x高度更大的字体更易于识别。不过x高度也不是越大越好,当x高度超过一定限度的时候,小写字母n和小写字母h就很难分辨了,这一点应当注意。

绝对专业!超全面的UI界面字体选取与使用指南

5、更大宽高比

字母的宽度和高度的比例也是相当重要的一个属性。宽度和高度比例越高,字母在小屏幕上的识别度就越高。

绝对专业!超全面的UI界面字体选取与使用指南

6、宽松的字间距

字母之间的间距和字母内部的空间同样是影响字母可读的因素。字母间距太小同样会影响整体的可读性,而好的显示字体会更好的控制字母间距,确保单词在视觉上的“透气性”,甚至可以营造出一种韵律感。

不过字间距不是越宽松越好,太过宽松会让整个单词看起来过于松散。有一个值得参考的标准,就是字母之间的间距应当比字母内的开口缝隙略小一点。

绝对专业!超全面的UI界面字体选取与使用指南

7、低笔触对比度

许多字体不同的笔画粗细不同,而对于UI界面而言,笔触间的对比度越小识别度越好。较大的笔触对比度下,字体在小尺寸屏幕上,较细的笔画会难于分辨。

绝对专业!超全面的UI界面字体选取与使用指南

8、OpenType 功能

OpenType 功能对于字体而言是相当重要的。支持OpenType的字体拥有更大的灵活性,对于不同的语言和特殊的字符有着更为优良的兼容性。

绝对专业!超全面的UI界面字体选取与使用指南

9、备用字体

接下来要说的情况可能大家多少都碰到过。网页在完全加载出来之前,部分内容因为字体没有加载而无法显示。

绝对专业!超全面的UI界面字体选取与使用指南

其实这可以通过先加载本地字体,显示内容,等网页字体加载好了之后再行替换,以达到无阻塞显示。这种方法的缺陷是需要预先设定一个可调用的本地备用字体。

绝对专业!超全面的UI界面字体选取与使用指南

10、Hinting

Hinting 指的是为了字体为了保证最大的可读性而针对显示器状况进行调整的过程。Hinting 可以通过匹配显示器的像素栅格让字体显示更加清晰,降低误读的可能性。

这项技术最初是由苹果公司所提出的,不过因为TrueType 字体技术的出现,Hinting 正在消失。

绝对专业!超全面的UI界面字体选取与使用指南

未来

随着新的UI标准、排版技术的提升,字体技术也在不断的进步,在不远的未来,字体会从传感器获得信息,更好的兼容不同的环境、随着亮度、设备、距离而进行智能化的调整,甚至复杂而庞大的中文字体,也可能作为灵活的网页字体而存在。

绝对专业!超全面的UI界面字体选取与使用指南

字体会让我们的工作更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

让界面交互更快,更加触手可及

绝对专业!超全面的UI界面字体选取与使用指南

让UI更加易用

绝对专业!超全面的UI界面字体选取与使用指南

更加便捷

绝对专业!超全面的UI界面字体选取与使用指南

也更加清晰而高效





文章来源:优设  作者:陈子木

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档