APP界面设计文章及欣赏

超全干货!五个方面帮你掌握标签栏设计

博博

快速迭代的产品存在着同质化趋向,如何做出差异性?如何将品牌精神向外传达?如何在有限的时间内,满足产品需求的同时带给用户更好的

体验感,进而体现设计的价值呢?静态画面动起来或许是个不错的选择!

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计


作者:多点MP

转载请注明:优设网

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

魏华的微信.png

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

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

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


想优化 UI 作品,这14个设计细节一定要检查到位!

博博


Hi,我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容,用户体验就是建立在坚实的界面设计基础之上的。所以,如果你想要在 UI 设计上提升能力,应该多去思考界面设计背后的原因。

想优化 UI 作品,这14个设计细节一定要检查到位!

今天会跟大家分享一些被广泛运用的界面设计规则,它们能快速使得你的界面设计更干净、高效。


文案要易于理解


用更容易让用户理解(说人话)的引导文案,提升使用体验。

(彩云注:下面 2 个案例中,左侧的“购物车”和“库存 2”太过于术语化,右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候,也一定要注意界面中的文案,尤其是说明文字,控件文字等等,这个点经常容易被忽略。)

想优化 UI 作品,这14个设计细节一定要检查到位!

垂直对齐易于扫视


良好的对齐方式,可以增强内容的可读性,让用户的视线更容易扫描。

(彩云注:左侧的“之”字形视动线比较难阅读,且不够专业;右侧的垂直对齐增强了可读性,也让设计看起来更加统一,能够快速的提升设计细节。)

想优化 UI 作品,这14个设计细节一定要检查到位!

给选项加图标


使用图标、动画作为标签,有助于更轻松地理解内容,它使界面看起来更加理性和丰富,能瞬间抓住用户的眼球。

(彩云注:左侧的导航相较于右边,很难第一时间准确识别它的意思,增加图标后不仅更快看清,视觉上也更加美观。)

想优化 UI 作品,这14个设计细节一定要检查到位!

大段内容要拆分


大段的长句会让内容变得难以阅读。为了获得好的体验和 UI,应该注意拆分内容,并使用项目符号突出关键点,利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。

(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)

想优化 UI 作品,这14个设计细节一定要检查到位!

流程增加进度条


进度条帮助用户追踪流程,它也能使查看上下步骤更加容易。线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。

(彩云注:左边的表单 UI 不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)

想优化 UI 作品,这14个设计细节一定要检查到位!

错误提示要明确


错误提示一定要明确,易于理解,方便用户进行下一步的操作。如果用户不理解界面上出现的错误,用户就会感到很失望,可能会放弃接下来的流程。在 UI 设计时,在正确的地方用通俗的语言说明问题,以避免歧义,这一点非常重要。

(彩云注:我常常遇到各种出错,但出现的提示太过于术语化,也没有提示在正确的地方让我非常苦恼。)

想优化 UI 作品,这14个设计细节一定要检查到位!

按钮要正确合理


从菲茨定律(Fitt’s Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。

(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用好色彩心理学


颜色是 UI 中不可缺少的部分,它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。

(彩云注:左侧的蓝色按钮颜色并不符合用户对于删除的心理预期,右侧的红色按钮对用户的心理预期有危险和警告,用红色代表删除能够让用户集中注意力关注这一特殊的操作。)

想优化 UI 作品,这14个设计细节一定要检查到位!

单列更易保持关注度


用单列展示内容,能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时,将所有信息垂直对齐时,能更好的保持用户关注度。

想优化 UI 作品,这14个设计细节一定要检查到位!

优先社交媒体账号登录


当用户准备登录或注册你平台的时候,把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号,能很好地增加点击率。

想优化 UI 作品,这14个设计细节一定要检查到位!

选择状态要清晰


在用户做选择的时候,需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

(彩云注:左侧的问题在于选中状态不清晰且选项的颜色过于丰富,右侧的选中状态清晰且选项颜色只有 2 种,选中和非选中,体验会更好。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用留白分组


如果想给信息分组,使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素,空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。

想优化 UI 作品,这14个设计细节一定要检查到位!

控件样式保持一致


保持设计的一致性,能够降低功能复杂度并让用户更快决策,一致性设计让用户更快熟悉操作而不需要太多思考。(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

想优化 UI 作品,这14个设计细节一定要检查到位!

搜索中的占位符要用好


在搜索输入栏添加适当的占位符,提示用户可以在平台上搜索和找到的内容,这样可以提供用户参考并带来更好的用户体验。

想优化 UI 作品,这14个设计细节一定要检查到位!

总结


以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则,这些点虽然基础,但却经常被人忽略。


作者:彩云Sky¹

转载请注明:优设网

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

魏华的微信.png

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

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

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



手机及小程序界面设计之十:超详细解读:UI导航设计不仅仅指的是导航栏

博博

编者按:其实网页或者App中的导航(Navigation)这个概念远不止我们熟悉的导航栏,而是一个更加广的交互概念:引导用户和产品进行有效的交互,实现用户的目标。本文将详细地介绍界面的导航设计

一个网页或App产品要想有很好的可用性(usability),需要做好的最基本的一点是导航的设计或者说引导用户的设计。如果用户在使用一个网站或者App的时候找不到自己的处在什么位置或者该怎么去到想要的页面,那么视觉效果再怎么有创意或者抓人眼球都无法弥补产品的缺陷。无论你的产品想满足用户什么需求,让用户知道产品当下的状态和每一步操作之后的结果是对用户最基本的尊重。

超详细解读:UI导航设计不仅仅指的是导航栏


导航


首先,让我们弄清楚导航这个概念。最基本的含义就是在我们的现实世界中,当我们从一个地方到另一个地方,需要一些引导和指示。英文中Navigation这个词来源于拉丁文,原意就是:操纵船只在海上航行。所以导航就是能够帮助我们到达目的地的行为。导航的其他意思都是建立在这个原意的基础上。

所以回到UX/UI设计上,导航毫无疑问是可用性的一个要点。它可以定义为一系列引导用户成功地与产品互动并且实现他们目标的动作组合或者技巧组合。 用户带着他们的期望和目标来使用你的网站或者产品,作为设计师的你需要给他们提供实现他们目标的最好操作流程。因此当你的导航设计得非常高效,用户体验能得到极大的提升。

在你刚开始设计你的界面时,就要思考怎么设计一个有效的无缝衔接的导航。通过一些可交互的元素,比如按钮(buttons),开关(switches),链接(links),标签(tabs),条(bas),菜单(menus),区域(fields),让用户在不同的界面之间进行切换。

我们工作室的设计思路是,在界面设计的早期就全面地思考导航的设计,包括界面的布局,页面间如何切换,导航元素的放置和具体功能。并且通过低保真原型来进行验证,保证用户能清楚地理解所有重要的操作。如果跳过这一步,设计将有巨大的风险,其他事情有可能到头来都白干了。所以无论,对用户还是客户还是设计团队来讲,做好这最基础的部分是非常有好处的。

超详细解读:UI导航设计不仅仅指的是导航栏


菜单(Menu)


菜单是我们最熟悉的具备导航功能的元素,它向用户展示了界面的所有重要选项。基本上,它可以是用动词命名的一系列指令,用户可以用它来指示系统做出动作,像保存,删除等;它也可以是一个用名词命名的目录,用来代表不同内容的集合。

在界面设计中菜单可以放在不同的位置(侧边菜单,顶部菜单,底部菜单等),拥有不同的交互和视觉形式(下拉菜单,上拉菜单,滑动菜单等)。要想设计好菜单的位置、交互和视觉形式,设计师需要经过全面的用户调查,包括目标用户的预期和要求、接受能力和使用情境。好的菜单设计能让用户更快地实现他们的目标,为用户体验打下坚实的基础。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

这是一个博客APP的界面设计,采用了侧边菜单以及目录的形式,文字直接说明内容,再加上图标来做为辅助的视觉说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ludmila Shevchenko

这个UI概念设计的例子很好的运用了颜色作为标记,这是一种很有效的导航技巧:每个分类的背景色使用了和目录相同的的颜色,这样目录和内容有着非常强的相关性,用户能自然地将他们联系起来。


行为召唤(CTA)


CTA是用户行为召唤的简称(call to action)。CTA简单来说就是指设计师通过设计,刺激用户去做出一些行动。相应的,CTA元素就是指那些能刺激用户做出行动的交互元素。典型的CTA元素是按钮,标签或者链接。

不管在什么界面,CTA元素都是高效的交互行为的核心,极大的关系到产品的可用性和导航有效性。如果CTA元素的设计不到位的话,用户会产生困惑并且得费劲地去尝试。产品的转化率和用户体验都会大打折扣。这就是为什么CTA元素特别值得注意。无论什么样的界面,它都必须是最瞩目的元素之一,用来直接地告诉用户怎么用这个产品。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Eugene Cameel

一些CTA元素直接用图标形式而没有任何文字说明,但只适用于大家都熟知其含义的图标,比如听筒图标和信封图标。上图这个例子中,这个听筒图标就是这个界面中一个焦点,是一个典型的CTA元素,引导用户快速地实现他们的目标。不需要任何文字说明,用户也能懂点击这个图标的结果。

但是,如果一个图标的含义不是那么明显或者可能造成误解,最好还是加上文字说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tania Bashkatova

上面这个例子是一个关于制作海鲜的网站的着陆页(Landing page)。页面的标题let’s cook还有食材照片是一个CTA,但不是一个可交互的CTA。可交互的CTA是下面这个红色按钮,用户点击这个按钮能看到更多关于不同主题和菜谱的信息。 抓人眼球的颜色强调了页面的视觉层级关系,把用户的注意力拉到关键的交互区域中。


条(Bar)


条(Bar)指的是界面中一组用户可以点击的元素,用来快速与产品进行互动,或者还能让用户知道事件的进程。

标签条(Bar)

最基本的条是标签条(Tab bars),常出现在APP界面的底部,让用户能在APP的不同模块间快速切换。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

载入条(Loading bar)

载入条是用来告知某个动作的进展,用户可以通过时间、百分比或者其他信息了解整个过程。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

进度条(Progress bar)

给用户提供反馈,让他们了解事件的进度,比如说计划的事情完成了多少。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Valentyn Khenkin


按钮(Button)


按钮应该是用得最多的元素了。按钮能让用户在对系统发出指令后得到恰当的反馈。用户通过按钮对系统下命令,跟系统进行交互从而实现他们某个目标,比如发送邮件,买一个东西,下载文件,播放音乐等等这样的指令。按钮之所以那么的常用和对用户那么友好,是因为按钮很好地模仿了人和真实世界里跟物品的交互。

现如今的UI按钮有不计其数的设计样式,能满足很多的设计需求。按钮典型的用途是表明这个地方是可点击,因此需要具有非常高的视觉识别,有着特定的形状还有文字说明它能实现什么动作。设计师通常需要花不少时间好好考虑怎么让按钮很好地融合界面的风格,同时又能在视觉上跳脱出来。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

以下是在APP和网页设计中常用的几种具备附加功能的按钮。

汉堡按钮

汉堡按钮隐藏着一个菜单。当用户点击他们的时候,能把菜单调出来。有这个名字是因为它是由三条水平线组成的,看起来就像是汉堡的形式。它是一个典型的交互元素,也是颇具争议的元素。

大多数用户知道点击这个按钮能展开一个菜单,所以不需要额外的说明。汉堡菜单极大地节省了界面的空间,能让界面看起来更简洁,也为其他重要的界面元素腾出了必要的空间。它同时非常适合响应式设计,通过隐藏菜单让整个设计更统一,界面能在不同设备间保持一致。尽管它因为一些缺点而饱受争议,但因为这极大的好处,它目前仍然被广泛的使用。关于这个元素的主要诟病是,对于一些对界面不太熟悉的用户来说,这个比较抽象的设计元素可能会让他们产生困惑。所以,在决定使用汉堡菜单前,应该调查一下目标用户的接受程度和他们的需求。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

上图这个概念设计就是用了汉堡按钮把菜单隐藏了起来,从而实现一个简洁的页面布局和视觉效果。

加号按钮(Plus button)

一般通过这个按钮,用户可以实现添加某个内容的动作,比如添加新的联系人,状态,笔记,位置等所有用户在产品里能做的基本动作。有时候,点击这个按钮会出现新的窗口。有时候还会出现一些选项供用户进行选择添加什么内容,这取决于是什么产品。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh

上面这个例子就是用户在点击加号按钮后出现了可以选择添加的内容(图片,视频,文字),在选择了之后才会弹出添加内容的窗口。尽管这个操作可能增加一些额外的交互动作,但因为给予了用户选择空间,所以还是对用户很友好的一种设计。

分享按钮(Share Button)

分享按钮顾名思义就是能让用户把内容分享到他们的社交平台账号上。大多数情况下,这个按钮都是用社交平台的Logo作为视觉形象,这样非常易于识别和认知。


开关(Switch)


同样,这也是一个用户非常好理解的元素,在界面中用得也非常多。因为它很好地模仿了现实世界里人们熟悉的开关概念。关于这个元素的设计,特别要注意的是开和关的状态在视觉上要差别非常明显。这样能避免用户花时间去研究怎样是开怎样是关。很多种的形式对比或者切换动画都可以解决这个问题,从而设计出很好的用户体验。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio

这个案例是来自一款闹钟应用Toonie。动画效果让交互变得更流畅和自然,同时整个控件颜色的改变和滑动元素形态的变化让用户能够轻易地识别出开关的状态。如果你想了解整个App的案例研究,可以到来源查看。


选择器(Picker)


也很好理解,就是让用户在一些选项里选出目标选项。通常包含一个可滑动的列表,上面是一列数值,比如小时,分钟,日期,度量,币种等等。通过滑动列表,用户可以选定想要的数值。这个元素广泛地应用在有时间设定这个功能的界面设计上。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 来源:Tubikstudio


复选框(Checkbox)


复选框是可以用来同时标记多个特定的内容。同样的,也是借用了我们在现实世界里熟悉的概念。我们在考试的时候,或者填调查问卷的时候会在选项前的小方框里涂上颜色作为选中的标记。和开关一样,复选框同样用得很多,主要在设置页面设计里。不过,复选框还有另外一个用得比较多的地方,那就是含有任务管理,待办事项,时间记录等类似功能的App或者网页。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

上面这个是一个待办事项App的概念设计。用户点击复选框后,表示这个内容已经完成。字体变粗的同时颜色发生了改变,这样就非常明显地把这个已完成的任务和其他未完成的任务区分开来。

界面的导航(Navigation)是用户体验设计的核心之一。毫无疑问,如果你看不到路, 你就去不了你的目的地。用户现在正面对着越来越多的网站和APP产品。越来越多的选择会让用户期望这些产品具备符合他们使用习惯的导航设计。


图标(Icons)


图标可以定义为一个象征着某个概念或物体的视觉形象,有着加强与受众沟通的目的。会和文字结合一起使用,将想要传达给受众的信息表现出来。在界面设计中,图标通常是象形符号或表意文字,对可用性和成功的人机交互有重要意义 。

毫无疑问,图标的其中一个重要作用是可以有效地替代文字描述。因为比起文字,用户对图片的理解速度更快,所以这个特点能极大提升用户体验,增强产品的导航和对用户的引导。但是,需要注意,即使是轻微的歧义或者误解都会导致糟糕的用户体验。所以在设计图标的时候要做必要的测试,根据目标用户平衡好文字和图标的使用。最有效的方式是同时使用图标和文字,这样大部分用户都不会有问题。电商APP或者网站最常使用这样的形式来给用户足够的信息,让他们能轻松快速地浏览。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

根据图标的功能,我们可以将它们分为一下几类:

交互式图标(interactive icons)

这类图标具备交互功能。他们是可点击的,能回应用户的要求,触发图标代表的动作。这种图标告知用户按钮、控件或者其他界面交互元素的功能或者特点。在大多数情况下,这类图标的意义明确,不需要文字辅助说明。

超详细解读:UI导航设计不仅仅指的是导航栏

△ Tab Bar

超详细解读:UI导航设计不仅仅指的是导航栏

△ 菜单概念设计

说明性图标(clarifying icons)

起到说明作用的图标,设计师用它来表示某一个特点或者内容的种类。它有时候不属于界面布局的元素或者并不具备直接的交互功能。经常和文字结合使用。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Tubik

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

娱乐性和装饰性图标(entertaining and decorative icons)

这类图标注重抓人眼球的视觉效果并非功能,通常用在节日或者特别款的场景。他们能有效地吸引用户的注意力,增强视觉冲击力。

复活节和春天主题的图标:

超详细解读:UI导航设计不仅仅指的是导航栏

△ 图片作者:Arthur Avakyan

APP图标(app icons)

在各个平台上可交互的品牌标志,展示品牌和产品的形象。最常见的就是我们手机界面上每一个App的图标,上面通常是品牌和产品的Logo。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Arthur Avakyan

网页图标(favicons)

就是我们经常在网址栏或者书签里看到的URL前面的那个小图标,也是代表着产品或者品牌的形象。能让用户在浏览网页时给他们快速的视觉提示。

超详细解读:UI导航设计不仅仅指的是导航栏


搜索区域(Search Field)


搜索区域又常常被称作搜索框(search box)或者搜索条(search bar),代表着用户可以在这个区域内输入想要搜索的内容。它是那些有着很多内容的网站或APP的核心导航元素,像博客,电商,新闻等产品。设计得好的搜索框能让用户轻松地找到想要的信息。因为它能帮助用户省去很多时间和精力,所以它是一个对用户特别友好的界面元素。

它的设计形式有很多种,可以是标签的形态,也可以是引导输入的一条线或者简单的一个搜索图标。大多数情况下搜索框的图标是一个放大镜的样式。基本上所有的用户都懂得这个图标的含义,所以能实现非常直观的导航设计。想要在这个图标上做文章的话,要好好测试一下,因为改得不好的话会严重影响交互和界面的可用性。搜索框还可以加入提供候选项的下拉菜单或者自动填补内容的功能。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Ernest Asanov

另外需要注意的一点是搜索框控件在界面中的位置。在网页设计中,搜索框经常出现在网页的顶部。这是一个很恰当的设计,因为通常网页的顶部区域具有很高的可见性,用户打开网页就看到了,不需要再花时间去找到这个控件。举个反面例子,如果一个电商网站因为搜索框的设计有问题,导致用户没办法快速方便地找到想买的东西,网站销售表现会受到极大的影响。因为现在很多网站都将搜索框放在网页的顶部,所以用户也养成了在那里找到搜索框的习惯。

至于App界面的话,要视具体情况而定,设计师可能面临更多的限制。如果是一个有着大量内容的APP,而且搜索是核心功能之一的话,那么一般放在一个显眼的标签条(tab bar)上。如果搜索并不是核心功能,那么可以把它藏到菜单里或者只在需要的用到的地方显示或者时刻显示出来。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Sergey Valiukh


标签(Tag)


标签是一个标有关键词的可交互元素。标签其实是给用户提供快速通道的元数据,用户可以通过它快速导航到与关键词相关的所有内容。除了网页或者App本身带有的标签,在很多情况下用户也可以自己创建标签。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Design4users

标签这个界面元素被广泛地应用在用户原创内容平台(UGC)的界面设计里。当用户上传图片、状态到社交网络的时候,可以加上关键词作为标签。上图就展示博客网站Design4Users运用了标签来加强网站的内容导航。通过点击某个标签,能切换到带着这个标签的所有内容的页面。标签是友好的搜索引擎优化(SEO-friendly)技巧,能提高用户搜索内容的成功率。

超详细解读:UI导航设计不仅仅指的是导航栏

△ 作者:Unsplash

再举一个例子,上图是图片素材网站Unsplash的界面。当用户想要下载图片时,可以输入描述图片的关键词作为标签。通过这样的形式帮助用户有效地找到想要的图片。我们还可以注意到,输入框内加入了引导用户进行操作的说明,这样更进一步地提高了产品的可用性。设计的细节真的很重要。总而言之,标签是一种用户可以自行创造的导航元素,拉近了界面和目标用户之间的距离。

全面地设计好整个界面的导航不是一件容易的事,需要一些心理学、交互模式、用户测试的基础知识,还需要在项目的早期思考清楚网站或者App的信息架构。但是做好这一点的话,能够让你的产品很好地帮助用户解决他们的问题,给优秀的用户体验打下坚实的基础,让他们对你的产品产生越来越大的粘性。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!



手机及小程序界面设计之九:手机端表格设计:我整理了一套循序渐进的处理方法

博博

Z Yuhan:对于手机端的表格设计,本文将为你提供了一些思考方向,希望能够带给你启发。

表格似乎和移动设备很难融合,强行贴上还真有些毁三观。即便是想方设法地避免,也总会有这样那样的原因,而不得不同时面对它们的时候。

其实有很多方法可以优化手机端的表格,但是可能不一定每一种都适合你遇到的情况,所以我整理了一套循序渐进的处理方法。


一. 整理信息


假设你在设计一款类似微信聊天群的功能,PM给你一张「成员信息表」,并要求你把它放在群成员管理界面上。这张表格里的信息的排列方式也许非常随便,看起来让人摸不着头脑。

手机端表格设计:我整理了一套循序渐进的处理方法

△ 组员信息表

首先你需要弄清楚这张表格摆出来的意义是什么。假设这张表格是为了「让群主查看并管理成员」,那么你就能分析得出:

  • 「头像和昵称」是基本信息,用来分辨成员身份。
  • 「活跃度」肯定是用来进行成员管理的主要依据,最好以此进行排序,其次“加入时间”也是重要的辅助信息。
  • 「是否为好友」可能对群主本人也是较为在意的信息。
  • 「性别和位置」在通常情况下并不重要。
  • 「ID和个性签名」对成员管理和查看几乎没有什么帮助。

按照重要程度摆放各信息,并合理排序后,表格看起来就更好理解了:

手机端表格设计:我整理了一套循序渐进的处理方法

△ 整理后的组员信息表


二. 界面整合


如果你的情况不允许对表格对形式进行变动,那么可能就真的要用手机端展示表格了。

在确保文字能够看清的情况下,表格很有可能横向展示不全,所以滑动难以避免。以下两点可以优化表格的滑动体验:

  • 将第一列基本信息固定不动,只滑动其余辅助信息。
  • 让用户能够看到展示了多少信息,还有多少是隐藏的。

这样,复杂的表格至少能够从表面上融入手机界面了:

手机端表格设计:我整理了一套循序渐进的处理方法


三. 优化细节


再仔细看看这张表格,即便不做大的调整,还是有很多地方可以通过微调来改善体验:

  • 「ID和个性签名」这种对于实际场景(管理和查看成员列表)没有帮助的信息可以去掉。
  • 「性别」信息可以使用符号、颜色等方式简化。
  • 「好友」数量不多,所以可以用标签的形式。
  • 「活跃度」和「加入时间」用户可能在管理成员过程中需要进行正向和负向排序。

优化后,表格看起来更简单了:

手机端表格设计:我整理了一套循序渐进的处理方法


四. 信息设计


手机的窄屏对于表格来说总不是最佳选择,所以如果可能的话,还是避免使用这种形式。

一个人在同一时间的注意力是有限的,大多数情况并不需要像传统印刷品那样,完整列出所有信息。重新思考真实的使用场景和用户心理,你会发现并不需要一次性把所有东西都扔出来。

如果你想要像微信那样,用头像+昵称这种形式,也许很容易被给你表格的人反驳:

手机端表格设计:我整理了一套循序渐进的处理方法

你可以筛选出相对有用的信息提供给用户,并用更有意义的方式整理出来:

  • 「头像和昵称」依旧是不变的基本信息。
  • 「活跃度」是群主进行成员管理的主要依据。
  • 「加入时间」是成员管理的辅助信息,但是时间长短可能比加入日期更加一目了然。
  • 当成员数量较多时,自定义排序依旧重要。

于是原本臃肿的表格可以被整合重新设计成完全不一样的轻便形式:

手机端表格设计:我整理了一套循序渐进的处理方法


总结


本文提供了一些思考方向希望能够带给你启发,以后遇到类似问题,不要老老实实地把表格原封不动地贴到手机上了。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






手机及小程序界面设计之八:如何适配iPhone X?来看看实战案例复盘!

博博


如何适配iPhone X?来看滴滴出行的实战案例复盘!

滴滴出行在 iPhone X 发售前就针对其操作特性进行了界面适配,保障了 iPhone X 用户的全面屏操作。现在 iPhone X 的适配结果已经得到了良好的用户反馈,由此我们梳理了移动端界面 iPhone X 的适配方案,并从整个适配过程中探索到万变不离其宗的适配方法,为后续不断更新的多尺寸屏幕提供更好更快的适配思路。


整篇文章分四个章节


  • iPhone X 系统特性
  • 界面常用元素适配方案
  • 「去边界化」设计
  • 「去边界化」设计的应用


iPhone X 操作特性

 

iPhone X 是苹果公司十周年推出的重点产品,无论外观还是技术都有着革命性的创新。让我们先来回顾下 iPhone X 在界面使用体验上都有哪些操作特性。

如果你对 iPhone X 还不够了解,可以看看这些 :

1. 屏幕变长

因大部分设计师都用 iPhone 8 来做设计稿,所以我们用 iPhone 8 与 iPhone X 做对比。

iPhone 6、iPhone 6s、iPhone 7 与 iPhone 8 屏幕分辨率一致。

iPhone X 使用了 5.8 英寸高分辨率、大圆角显示屏。iPhone X 与 iPhone 8 的显示屏宽度一致都是 375pt ,高度上 iPhone X 高出 145pt,可以在垂直空间多展示约 20% 的画面。

iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同,使用 @3x 的图像,界面内容由手机硬件遮罩成带圆角和传感器(顶部齐刘海)的形状。所以界面设计时 iPhone X 和 iPhone 8 的设计宽度可以通用 375pt,而实际 iPhone X 的屏幕像素为 375pt×812pt (1125×2436px),且切图使用 @3x 图片。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

乔布斯曾说,手持设备最理想的屏幕尺寸是3.5寸,这是因为单手操作时3.5寸屏幕基本能做到大拇指无障碍全覆盖。但随着人们对手机功能多样化的需求,主流屏幕远大于3.5寸。

iPhone X 是 5.8 寸,屏幕已经超越了绝大多数用户的拇指覆盖范围,这就导致左上和右下角的单手操作不够方便。很多基于 F 型流动视线设计的 App,通常会将重要的功能入口置于左上角,在 iPhone X 上,视线优先和拇指操作未必可以同时满足,这就要求设计师们对操作盲区的功能进行多重考量,评估是否要针对 iPhone X 做出位置调整。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

2. 异形状态栏(齐刘海)

iPhone 8 屏幕状态栏高 20pt,iPhone X 状态栏高 44pt 并有齐刘海形状遮罩。状态栏位置显示的信息,在 iPhone X 上受齐刘海遮罩影响,需要特殊考虑展示效果,甚至重新设计信息展示方式避让状态栏,以便保持各屏幕展示效果的统一。

苹果官方不建议采用隐藏或遮挡状态栏的设计,相对 iPhone 8 ,iPhone X 有更高的纵向显示空间足够展示更多的内容,且状态栏显示了对用户有用的信息,除非隐藏状态栏能带来更大的收益,否则还是建议保留。

3. 增加主屏幕指示条

iPhone X 屏幕最底部设置了主屏幕指示条,用户可从屏幕底端使用滑动手势进入主屏幕或切换应用。这些系统的全局操作会优先于App应用的操作。在设计用户沉浸式的产品如视频、游戏时,可以适当的隐藏主屏幕指示条。

主屏幕指示条下方的内容仍是可点击操作的,但要避免在屏幕最底部设置重要操作内容,且要避免使用与指示条相冲突的操作手势。主屏幕指示条只有黑白两种颜色,会根据指示条底部背景自动切换。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

4. 设置安全区

从 iOS 11 开始,苹果引入了安全区域的概念。在 iPhone 8 等屏幕上,安全区域默认是除了状态栏以外的屏幕范围。在 iPhone X 上,安全区域默认是除去顶部状态栏以及底部主屏幕指示条周边的范围。

遵照系统安全区的概念进行设计和开发,大多数使用系统标准UI元素(如导航栏、表单、内容集)的应用程序会自动适应设备的新外形,不需手动调整,这样会大量节省开发人员的工作量。所以在这里提倡大家遵照系统提倡的方式进行开发布局,不仅方便 iPhone X 的适配工作,也方便后续 iOS 系统更新以及界面元素的自动匹配。

固定在屏幕上展示的内容应始终在安全区域内,如顶导、底部tab栏等。垂直滚动的内容,如列表,图片流,需要一直延伸到底部,也就是会在安全区之外展示,这样才能确保提供全面屏操作体验。

如何适配iPhone X?来看滴滴出行的实战案例复盘!


常用元素适配方案


正是因为 iPhone X 有着许多操作特性,我们的设计方案必须针对 iPhone X 进行适配。以下是针对常见界面元素整理的通用适配规则。

1. 吸顶元素

对于吸顶元素的适配原则是:避让状态栏,内容区吸附于安全区顶部,状态栏背景颜色根据吸顶元素进行调整。

  • 顶部导航栏:导航栏直接平移到安全区顶部即可,iPhone X 状态栏高度自动适配,状态栏底色与iPhone 8 时保持统一。
  • 顶部通知:通知区域平移至安全区域,通知背景向上加高 44pt,状态栏内容保持在最上层展示。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

2. 吸底元素

吸底元素的适配原则是:内容平移至安全区底部,界面背景层元素(界面背景色、背景图片、全屏地图等)充满屏幕,主屏幕指示条下方区域与吸底元素颜色协调。

  • 吸底tab栏、选择器、对话输入框等:信息内容平移至安全区域底部,主屏幕指示条下方填充相应背景色。
  • 吸底按钮:信息内容平移至安全区域底部,界面底部背景填充相应背景色,按钮可点击区域不变。
  • 底部扩展信息:有些信息位于底部隐藏状态,需展开显示,由于 iPhone X 屏幕较长,且安全区域未撑满屏幕,所以会露出原本隐藏的信息。这时候通常会采用形状遮罩遮盖隐藏信息,或对底部隐藏信息的位置进行特殊调整。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

3. 信息流

信息流从主屏幕指示条下方穿过,撑满屏幕显示,滑动浏览信息不受影响。主屏幕指示条下方内容仍可点击,此区域滑动手势优先触发系统操作。信息流最底部内容要保障在安全区内。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

4. 全屏元素

全屏元素多为图片、视频、游戏画面、全屏地图等信息,适配规则是:全屏元素在 iPhone X 上仍要保持充满屏幕的状态,要保证图像信息比例正确不变形,并接受硬件传感器齐刘海和圆角遮罩。

  • 全屏图片:因全屏图片在 iPhone X 上仍要保持全屏的话,会被裁剪掉图片信息,所以要根据画面具体元素进行选择,是充满屏幕裁剪图片,还是在空白区域填充色块(系统默认填充黑色)。App 开屏图片直接调取 iPhone 8 Plus 在 iPhone X 展示会被裁剪,所以最好是单独出图适配,图片尺寸为 375pt×812pt (1125×2436px @3x)。

因 iPhone X 与 iPhone 8 Plus 都使用@3x图片,所以开屏图片不做单独适配的话可以调取 iPhone 8 Plus 图片裁剪使用。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  • 全屏阅读模式:当需要沉浸式阅读的时候,我们会采用隐藏状态栏的形式,将屏幕全部用于展示信息,但是这种形式在iPhone X 上因为齐刘海的原因效果并不理想。所以在 iPhone X 上建议保留顶部状态栏,信息在顶部安全区内展示,状态栏的底色可以根据信息内容进行调整。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

5. 左右布局元素

最典型的左右布局就是抽屉导航,抽屉拉出后,如果信息卡片和主屏幕指示条交错叠加,就会稍显信息混乱,建议抽屉导航的宽度根据主屏幕指示条的位置进行调整,完整露出或完全遮挡指示条。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

6. 居中元素

居中元素在适配中的影响较小,对话框、Toast 提示等均不需单独适配。

  • 对话框:对话框为全局居中的元素,不受四周元素的影响,在 iPhone X 上不需单独适配,保障对话框的背景充满屏幕即可。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  • 缺省页:因顶部状态栏是不建议遮挡的部分,所以顶部加上顶导距离会很高,这样就导致整体界面稍有重心下移的感觉。尤其在缺省图形居中的界面,重心下移的感觉更为明显,这种情况下建议对界面元素进行单独适配调整,以便达到视觉平衡。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

以上的适配规则基本可以满足所有场景的基础适配需求。当然还有很多特殊场景,不需要特意保持 iPhone 8 和 iPhone X 展现效果的一致性,这种情况就需要单独设计方案,不是通用规则能满足的了。

滴滴出行针对内部产品做了一套适配指南,几十页满满的适配方案说明,尽可能详尽的将普适规则与特殊规则运用场景举例说明。设计平台将此适配指南发放到各业务部门,由业务方产出自己各功能场景下的适配方案。

在此过程中我们发现,即使规则已经很详尽,Webapp、H5页面等多场景下仍有一些不清楚如何适配,或不能通用适配规则的情况,需要设计平台持续跟进,讲解规则走查适配效果。

造成这种情况的原因大多是因为界面设计的时候没有充分考虑其后期延展,导致多屏幕下不能保持统一样式,无法通用适配规则。这让我们开始思考如何设计界面才能包容多屏幕的展现。


「去边界化」设计


设备屏幕在不断更新,适配需求就是持续的无尽的,iPhone 从 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ,屏幕尺寸不断在变化,甚至屏幕的形状边界也在变化,更不用说安卓系统各种各样的屏幕尺寸及屏幕形状。例如,夏普AQUOS S2。

设计界面时,如果对市面的主流屏幕挨个设计是有极其高的时间成本的,那怎么才能让适配更从容,不必紧张的跟随手机厂商的发售脚步?是否有提高适配效率的方法?适配可否是一劳永逸的?需要适配的元素有没有一些共性……

带着这些问题不断的思考总结,我们形成了一套自己的设计理念,能够让适配这件事情以一抵百,万变不离其宗,这就是「去边界化」设计。

「去边界化」设计,是指在设计之初把边界限制去掉,定义好界面元素的特性及层级关系后,再套用到屏幕边框之中。与常规设计的区别在于,让内容成为独立且完整的组合体,再根据设定好的变化规则组合到不同的边界中去。这样保障了内容的最大适用程度,且保障各屏幕展示规则的统一性。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

目前我们最常做还是手机界面,未来VR、AR 成熟起来,我们所设计的界面就会更大,甚至会大到无形。运用「去边界化」设计,可以让我们更好的适应未来。

另外回到手机界面,我们完成一个设计方案后,也可以运用“去边界化”的方式检查界面元素是否在多屏幕适配上存在问题,减少不必要的适配工作量。

其大无外,其小无内,在界面设计上,我们也需要突破界限,精益求精,让每一个元素都丰富而完整。


「去边界化」设计的应用


1. 定义元素特性

这里的元素特性,除了元素本身的基础功能及操作方式外,从三个角度进行思考,延展性、吸附性、流动性。

这里我们以同倍率,不同尺寸的屏幕适配为例,省略倍率换算方便我们更简单的了解「去边界化」设计。

  • 延展性:延展性指元素是否会在不同尺寸屏幕进行尺寸变化。定义元素的延展属性是适配的基础,确定什么元素大小可变,什么元素大小不可变,才能让适配方案清晰统一。

如下图中,图片、卡片、背景、列表、按钮 等元素可随着屏幕进行延展变化,而icon、文字等为固定大小不会随着屏幕进行变化。

延展变化又可分为:等比延展、横向延展、全部延展。

通常图片、视频元素使用等比延展,保障画面比例统一不变形;列表、按钮 等多采用横向延展,信息量不变高度无需变化;卡片、背景等多根据其承载信息和屏幕背景尺寸进行调整,长宽均跟随变化。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  • 吸附性:界面中的元素都不是独立存在的,每个元素都和其它某个元素存在一定联系,所以定义好元素之间的吸附关系,方便后续元素的重新组合。

如下图,button 吸附于界面(或安全区)底部,适配到其它屏幕依然保持与界面(或安全区)底部的吸附性。而下图中的toast 提示为界面居中元素,也就是它的吸附性就是界面的中心,适配到其它屏幕仍保持这一吸附属性。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

  • 流动性:流动性将元素比作水,依附与一个容器内展示,根据容器的尺寸变化而变化。多为文字流、图片流等信息元素所具备。

针对流动性的元素主要是定义其容器的延展性和吸附性,流动元素本身大小不变,位置形态上跟随容器进行变化。当然还要考虑元素过多超出容器后的显示方案,是被截断还是省略等等。

如下图,文字图片流在信息容器内进行流动展示。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

2. 组织信息结构

从平面维度思考元素关系可以理解为元素间的吸附性,但界面元素不总是在同一个平面上,App 界面通常分为 背景层 、内容层 、操作层 、状态层 ,这些层级在高度上是相互叠加的。

决定元素层级的因素主要是其表达内容的主次关系,重要而紧急元素在最上方,不重要不紧急的元素在最下方。将界面从平面维度填充为立体维度让产品功能更丰富,更贴近人们真实的立体世界,也就更符合用户的认知和操作逻辑。

无论界面的边界如何变化,元素间的层级结构一旦定下是不会随边界变化而改变的。建立元素的纵向层级关系,便于在不同场景保持统一的元素优先级。

在「去边界化」设计中,除了元素自身特性(延展性、吸附性、流动性)清晰,元素间的组合层级关系必须排布合理、逻辑清晰,才能让整个产品层级统一,多屏幕展现层级统一。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

3. 元素组件化

我们有讲到界面中所有的元素都不是独立的,有时某几个元素组合表达同一个功能,关系非常紧密,甚至可以捆绑移动,我们把这些功能密切相关的元素进行封装,看做一个完整的大元素,这就是我们常说的组件。

组件化的特点就是详尽每个元素的操作反馈、延展方案、显示容器、极限情况等等场景,然后定义元素与元素之间的吸附关系,操作联动,使其成为一个完整的操作场景。

说到组件化设计,这有一篇必看好文:《进阶必读!可能是最全面的组件化开发与设计指南》

组件还可以根据功能需求与其它元素自由组合,使得组件可以不断复用,大大提升设计效率,及适配效率。

组件化的意义有很多,可以方便设计元素的复用,方便开发组件的复用,减少代码及元素冗余,方便设计方案的修改等等。横向组件化之于「去边界化」设计,主要是在确立了元素特性及层级关系后,以整合元素成为组件的方式提升设计及适配效率。

如何适配iPhone X?来看滴滴出行的实战案例复盘!

以上就是「去边界化」设计理念,包括定义元素三大特性:延展性、吸附性、流动性,然后确定信息的横纵向层级关系,横向功能关系紧密的元素可进行组件化处理。这样整个界面的元素都是层级清晰且不依靠边界的,这时再给界面套用一个屏幕边框就非常有依据了,且能保障所有适配界面具有统一性。

梳理清楚设计理念之后,还需要将上述原则梳理形成设计规范,同步至团队所有成员,以达到团队共识保障最终的效果呈现。

4. 制定设计规范

以规矩为方圆则成,以尺寸量长短则得,设计规范可以帮助设计师快速认知元素特性及使用规则,工作中快速复用通用元素,提升设计效率,且可以通过规范说明对新功能寻求设计指导和参考。

规范的贯彻执行,可以保持产品设计语言与品牌形象的统一,保障在不断更新迭代中产品体验不走样。统一的使用体验可以保障用户流畅的使用产品,快速识别产品功能,简单高效进行操作。此外通过规范说明,可以实现开发人员与设计师的高效沟通,另外,将组件开发形成设计组件库,可以提升开发效率,方便代码的复用。

在「去边界化」的设计理念中设计规范也是不可缺少的环节,把定义好的元素特性和确定的组织结构总结成设计规范,是把理论层面上的探索转换成实践指导。

以上就是完整的「去边界化」设计理念在实际工作中的应用:从定义应用中元素的延展性、吸附性和流动性,到把零散的信息元素组成横向、纵向有序的结构,并把上述特性和结构形成设计规范在设计、开发团队中应用推广。


总结 


从苹果发布会开始,滴滴设计团队内部就开始进行着iPhone X的适配工作。了解iPhone X的操作特性、探究滴滴出行应用的适配规范、上线后跟踪反馈等,适配只是一个很小的工作需求,但也可以做的很大,做的很多,我们希望抱着这种极致执行的态度做好每一件事情。

从这次的适配工作中我们不仅看到了 iPhone X ,还看到了未来不断会出现的新产品、新系统等,我们不满足于一次次被动的适配,更希望可以主动的应对变化,所以我们摸索出了「去边界化」设计理念,希望这个理念能对大家的设计工作有所启发,让我们为未来做好准备。

作者:滴滴出行CDX - 张瑨

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






手机及小程序界面设计之七:基础科普!超全面的 UI 元素尺寸设置指南(上)

博博

一、基础规则


1. 官方规范

对于刚开始思考 UI 元素尺寸的新人,通常第一反应都是去看官方规范,新人都以为官方设计规范的作用就是告诉你们元素的大小和怎么设置,只要看完了就能懂得如何设计 iOS 或 Android 应用。而实际上,这些规范并不能帮助你们解决这个问题,因为设计规范涵盖的内容远远比这些复杂。

我们想要搞清楚 iOS 和 Android 官方元素的具体尺寸,最好的方法就是去下载它们的官方 UI-Kits,如下图的安卓组件库所示。

基础科普!超全面的 UI 元素尺寸设置指南(上)

官方不会提供一个列表,逐一罗列每个元素的长宽和其它参数,所以想弄明白,要自己在这两套素材库中选中元素查看。如下图这个按钮,我们就能看见它的参数值。

免费获取 →  iOS 11设计规范发布了,来下载官方源文件!

基础科普!超全面的 UI 元素尺寸设置指南(上)

在初期,我们想要设计出严格符合官方规范的设计,就可以严格照搬官方的元素设置。但是,即使官方的源文件包含的元素字体已经非常多了,在实际设计过程中,还是会出现它们无法覆盖的设计类型,需要依靠我们自己设置。

还有如字体的应用,官方源文件使用的语言是英文,光是官方应用的两种 SF 字体,就包含了十几种字重,所以我们可以看见文字应用面板中密密麻麻的字体类型。在真实的中文设计场景下,我们是不可能照搬这种规范的。

基础科普!超全面的 UI 元素尺寸设置指南(上)

新人要明白,官方的规范,只是一种建议,我们可以选择遵守也可以选择不遵守。如果一味的照搬这些内容,我们是无法设计出有趣个性化的设计的,比如下面这几款已经看不到 「 iOS 设计 」的应用。

基础科普!超全面的 UI 元素尺寸设置指南(上)

官方的参数决定我们设计的下限,当你不知道该怎么做,或者设计的目标就是以系统原生的体验和视觉为准,那么照搬就行了。后面的文章要说的,就是脱离开这些束缚,正确自定义 UI 元素的尺寸。

2. 尺寸设置原则

UI 和平面不一样的地方,就是极其关注元素属性的具体数值。平面的排版无论是海报或画册,使用百分比、目测的形式就足以让我们做出很多优秀的作品,无需紧盯着其中出现的每个元素的长宽高数值。而 UI 的设计中,无论字体、图标还是按钮,都需要我们严谨地定义它们的长宽高,如下图设计一个按钮的操作。

基础科普!超全面的 UI 元素尺寸设置指南(上)

这么做的原因是因为在电子屏幕中,图像的呈现是由屏幕中的像素点来完成的,像素点是最小的显示单位,一个点只能显示一个颜色,所以如果设置了带有小数点的数值,那么这个元素的边缘就会虚化。所以为了避免这种事情出现,我们就得用整数来定义元素的长和宽。

基础科普!超全面的 UI 元素尺寸设置指南(上)

这当中还涉及到不少比较复杂的屏幕显示原理问题,尤其是和像素倍率相关的基础知识,我会在另外的文章里分享,后面文章所有的长度单位默认以 PT 为准,即 XD 和 Sketch 默认画布的单位,PS 中设计需要在这个基础上乘以2。

只有分隔线,是唯一可以不使用整数的例外,因为 1pt 的分隔线看起来会非常粗,一点也不精致,感兴趣的同学可以自己在 Sketch 或 XD 中画个列表然后用 1pt 的线条做分隔,再导出到手机里观看效果。即使是官方应用,也主要使用 0.5pt 的线条做分隔。

基础科普!超全面的 UI 元素尺寸设置指南(上)

无论在 iOS 或 Android 的规范中,也都提到过使用 8 x 8 的网格做辅助,这导致网上有很多片面的文章会反复强调对元素的尺寸使用 8 的倍数。

  • iOS:使用 8px 网格系统,网格系统可以让线条和图像内容在所有尺寸上保持清晰,无需太多的修饰和锐化。将图形边界对齐到网格上,减少按比例缩小图像时出现的半像素和内容模糊的情况。
  • Android:所有组件都与间隔为 8dp 的基准网格对齐。排版/文字与间隔为 4dp 的基准网格对齐。在工具中的图标同样与间隔为 4dp 的基准网格对齐。

实际上,我们在真实的设计环境中,建议大家使用 4 的倍数作为一般元素的尺寸倍率即可,如 8、12、16、20、24等,它的好处我会在后面的文章中做说明。如果发现 4 的倍数无法满足某些特定的需要,如多 4pt 太大,少 4pt 太小,那么我们就可以使用一般的偶数如18、22、26等。

以上就是我们一开始要建立的元素尺寸原则,精简完即:

  • 使用整数,只有分隔线可以使用 0.5 的小数;
  • 使用 4 的倍数,根据实际情况可以切换成一般偶数。

有了这样的原则,并养成习惯,我们就能在每次设计前对元素尺寸有个大致判断,然后再根据需要按 4 的倍数调整,如下面设计注册登录页面的输入框作为案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

开始我使用 280 宽,44 高的尺寸,但是觉得有点僵硬,太正式了。这时候反思认为应该是输入框太矮导致的,所以高度上改成 44+(4×2)=52 。这时候又觉得太高了,实际输入内容也没那么宽,于是再对高减 4,宽减 40,获取最终结果。

所以,因为这样的操作原则,决定了 UI 元素的尺寸不是凭感觉用鼠标拖拽出来的(拖动效率太低),而是在元素的属性栏中填入它们的数值。UI 的设计过程就是一个不停键入参数和调整参数的过程。

3. 总结

以上就是对与 UI 元素尺寸定义的第一部分,因为要讲清楚需要花的篇幅太长,所以我会将后面具体的案例讲解拆成 4 部分,分别由控件、文字、图标、组件部分组成。


二、控件尺寸定义


这里要声明,在我的语系中,控件指的是在界面中最基本的交互单位,如按钮、滑块、开关、分页器等,更复杂的如动态卡片,功能快速入口等,就归入组件中,便于我们理解。

下面,会根据前面定义的规范,分别讲解控件应该使用的尺寸范围:

1. 按钮

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮是界面交互操作中使用最频繁的元素了,当然按钮呈现的形式也多种多样,比如可以是文字、图片、图标、卡通形象等等。在这里,我们只聚焦于矩形的基础按钮。

在进入具体参数的讲解前,要先理解按钮实际上是所有控件中最复杂的一个,并不是因为在设计样式上的复杂,而是因为按钮承载了最多的产品诉求,权重差异极大,例如看下面的案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

在上图中,可以点击的东西不少,我们就说外观是标准样式的按钮,就有 9 个。而这里面,权重最高的必然是 「加入购物车」。权重最低的,应该是前往新品页。

定义按钮尺寸,我们首先要知道的是,按钮在界面或整个应用中的权重,尺寸和权重是成正比关系的。当然,颜色也是对重要性表现的关键因素,不过不在这里展开。

按钮高度

当我们设计按钮时,优先要从高度入手,再去定义宽。为了便于新手理解,我首先从高度上来匹配权重,分成高、中、低三类:

  • 高权重:40-56pt
  • 中权重:24-40pt
  • 低权重:12-24pt

高权重的按钮,类似登录页的注册、登录,购物详情页的购买,流程页中的下一步,它的最小高度应该从 40pt 开始递增,低于这个大小,那么这个按钮就很难在这个页面起到视觉支撑,因为感觉太细了。

基础科普!超全面的 UI 元素尺寸设置指南(上)

中权重的按钮,类似个人主页的关注、点赞、评论按钮等。这个层级的按钮依旧有比较高频的交互次数,我们必须得保证它易于点击。24pt 是在我经验中便于点击最小的尺寸了。这种按钮通常是组件的一部分,不像层级最高的按钮常常是处于一个孤立的空间,所以高度如果超出 40pt,就会对当前模块产生直观的破坏。

基础科普!超全面的 UI 元素尺寸设置指南(上)

低权重的按钮,就类似查看更多、标签、详情等类型,相对于按钮的交互属性,这类按钮具备更多的提示属性,只要让用户能看见,又不需要太显眼。尺寸不大于 24pt,能容纳内部文字或图形元素即可。

基础科普!超全面的 UI 元素尺寸设置指南(上)

使用上面这种方法,在页面中根据权重定尺寸就可以了。还需要注意的是,不同尺寸的按钮之间,高度的差距不要小于 4 ,否则差异太小不仅拉不开层次,还容易使视觉感受变差。

按钮宽度

主流的按钮都是横向的长方形,正方形也有,但是不能变成纵向的矩形。

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮的宽度主要和内容挂钩,内容数量越多,按钮自然也就越宽。唯一的例外,只有高权重的按钮,可以无视内容的数量。因为它们需要更多的区域,往往都是撑满屏幕内容区域或全屏的,可以特殊处理。

普通按钮,左右间距距离内容过多,就会让按钮看起来非常的不协调。所以我们要根据内容来设置按钮左右的宽,最大宽度应该小于内容距离上下的 2 倍。

基础科普!超全面的 UI 元素尺寸设置指南(上)

按钮圆角

按钮尺寸还有最后一个属性,就是按钮的圆角设置了。矩形的边角有三种类型,即直角矩形、圆角矩形、半圆矩形。

基础科普!超全面的 UI 元素尺寸设置指南(上)

为矩形设置圆角,是为了让按钮看起来有一定的圆润感不会显得太尖锐,这种圆角的数值赋予要适当,只要超出了一定的范畴,就会对视觉的和谐产生影响,我习惯称呼为——半圆不圆,如下图右侧的错误案例。

基础科普!超全面的 UI 元素尺寸设置指南(上)

所以,我们在设计圆角的过程中,一定要仔细感受圆角在画面中的和谐性。而圆角的设置范围,不大于高度的 1/4。例如,一个24pt的圆角矩形,圆角的尺寸就应该不大于 6pt,如上图的效果。

以上就是按钮相关尺寸定义的说明,当然,在真实的设计需求中可能遇到很多无法满足的情况,这就需要大家多做尝试了。

2. 输入框

基础科普!超全面的 UI 元素尺寸设置指南(上)

输入框也是我们比较常用的元素之一,它和按钮有非常接近的外形。最常见的就是登录页账号密码输入框,以及首页上方的搜索栏了。

输入框的使用高度尺寸,常规在 36-56pt 之间。低于 36pt 时则输入框看起来会非常拥挤,比如我用下面学生的案例做个演示。

基础科普!超全面的 UI 元素尺寸设置指南(上)

3. 步进器

基础科普!超全面的 UI 元素尺寸设置指南(上)

常见的步进器,就是输入框和按钮的结合。左右有两个用来增加数量的按钮,中间是允许我们直接键入数字的输入框。在尺寸上,它也介于两者之间,高度在 28 – 40 之间。下面我再用学员的作业做次演示,当低于 28 以后,就会发现在屏幕中的占比实在太小了。

基础科普!超全面的 UI 元素尺寸设置指南(上)

步进器中常见的错误,是在我们设置圆角外框时,绘制左右两个按钮,并没有合理的减去内侧的圆角,这是绝对不应该忽略的细节。

基础科普!超全面的 UI 元素尺寸设置指南(上)

4. 下拉菜单

基础科普!超全面的 UI 元素尺寸设置指南(上)

下拉菜单要注意包含多种状态,默认、展开和选中。默认状态与输入框类似,主流的高度也使用 36-56pt。但是,当菜单展开后,下方多出来的选项菜单,就值得注意了。

菜单的宽度正常情况下与默认状态相同,而高度根据里面包含的选项数量决定。单行选项,高度是不大于默认的选项框的。新手很容易在弹出菜单中设定过小的高度,使整个控件看起来会非常的别扭。

5. 开关

基础科普!超全面的 UI 元素尺寸设置指南(上)

开关也是按钮的一种形式,通常出现在设置页的列表中,上方就是它主流的几种样式。在设计开关的时候,要先确定一个矩形区域,高度使用 24-32pt,宽度则用 1:2 的比例。如高度使用 28pt,那么宽大致可以使用 56pt。之后再将细节填入。

6. 滑块

基础科普!超全面的 UI 元素尺寸设置指南(上)

滑块形式接近开关,通常在中间有一个操作节点,下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。

节点如果做的太小,不仅会显得难看,而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下面的横线,宽度由所在内容区域的宽决定,高度一般在1-4pt 之间。

7. 指示器

基础科普!超全面的 UI 元素尺寸设置指南(上)

指示器用来展示元素序列,虽然在 APP 中没有太重要的作用,但既然我们加进去,就要让它看起来和谐。大多数人在定义指示器时,不是太大,就是太小,可以只从后面提供的尺寸中选择,就能保证指示器的尺寸不会出错。

指示器主要是圆形和矩形两种形式:

  • 圆形:8、10、12
  • 矩形:14×2、16×2、20×3
8. 提示红点

基础科普!超全面的 UI 元素尺寸设置指南(上)

提示红点也是大多数应用会使用的一个控件,它的大小应该在 24-32pt 之间。作为一个圆形,这个控件设计起来很容易,但设计师往往忽略一件事,那就是如果中间的数值超过 10 变成 2 位以后,要怎么处理。

在设计这样的元素时,我们要用一个矩形元素来表现,即画一个正方形,然后将圆角设成最大,那它看上去就是一个圆形。那么每增加一位字符,我们就需要为这个矩形增加该字符的宽度,可以用左右间距判断。

因为相同字号下,不同英文、数字的宽度都是不一样的,我们要根据实际输入的内容所增加的宽度,去增加圆点的宽度。

基础科普!超全面的 UI 元素尺寸设置指南(上)

9. 分页控件

基础科普!超全面的 UI 元素尺寸设置指南(上)

最后一个控件,就是分页控件了,安卓中的 Tabs。这个元素在设计时也受到排版空间的影响,较为宽松的排版风格,高度就比较大,若拥挤则反之。

下面是高度:

  • 高权重:40-48
  • 低权重:28-36

分页控件主要应用在头部和页面中部的组件中,如下方的案例:

基础科普!超全面的 UI 元素尺寸设置指南(上)

虽然很多时候分页器是没有背景色的,但是背景矩形是必须画出来的,即隐藏填充和描边,这样我们就可以通过垂直居中的方式,来确定中间文字的位置。

基础科普!超全面的 UI 元素尺寸设置指南(上)

一个完整的分页控件,里面会包含两个或以上的选项,所以定义每个选项的宽也是必要的。通常,我们有两种定义方法,一种是选项少时,直接进行均分显示,另一种是选项较多,采取定宽模式,宽度最小建议在 64pt 以上,才不会显得过度拥挤。

基础科普!超全面的 UI 元素尺寸设置指南(上)

分页控件选项处于选中状态时,有的设计是修改背景色,有的是修改文字属性,但今天最常见的就是加入下划线。这个元素如果定义得不好,会让整个控件看起来非常粗糙,它需要在样式中能起到画龙点睛的作用。

基础科普!超全面的 UI 元素尺寸设置指南(上)

下划线分为两种,一种是贴在控件底部的,另一种是在文字下方悬浮的。两种方式线条应该使用的高度都应该不大于 2pt。宽度的定义,第一种和每个选项背景区域相等,第二种则可以在 8-16pt 间(小于文字总宽)。下面是正确设计效果:

基础科普!超全面的 UI 元素尺寸设置指南(上)

10. 总结

前面说到了不少元素的尺寸,那么真实应用的效果会如何呢?下面我就用原型的方式,不考虑样式与色彩将它们组合到完整的页面中去。

基础科普!超全面的 UI 元素尺寸设置指南(上)

可以看到,模块大小很均衡,看上去不会觉得哪些地方太大或太小,只要稍加填充样式,那么就可以变成完整的设计稿了。

这些参数虽然不能覆盖所有特殊的状况和需求,但至少可以保证这些控件不会被设计得很奇怪。当你们没有对于特殊化风格设计的控制能力时,就先学会正确的使用上面的这些参数吧。

作者:超人的电话亭

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

博博

简介说明


1. 理论表述

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。

让设计更有说服力的20条经典原则:菲茨定律

2. 研究背景

1954 年,Paul Morris Fitts 根据信息类比提出一个假设,该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数,却给了后来的交互研究人员极大的启发。

我们现在经常看到的 Shannon 公式(即上面那个公式)是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」,该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础,它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系:因为以 2 为底的指数函数是递增函数,所以,T 与 D 正相关(D 越大 T 越大),而与 W 负相关(W 越大 T 越小)。


设计案例


人们做出一个移动指针的操作通常需要两步:

  • 将指针快速移动至目标大致所在的区域;
  • 精细调节指针的位置以达到可点击的区域。

菲茨定律所包含的两点内容:

  • 指针当前位置与目标间的距离 D 越长,所需时间越长;
  • 目标的宽度 W 越大,所需时间越短。

让设计更有说服力的20条经典原则:菲茨定律

综合两者来看,菲茨定律中的 D 在第一步中起更为明显的作用,而 W 则主要影响第二步。所以菲茨定律所带给我们的启示,主要也是从这两方面入手。

1. 需要连续操作的控件尽可能接近

案例1:系统右键菜单,微信弹出菜单

让设计更有说服力的20条经典原则:菲茨定律

最典型的例子就是菜单,无论是 PC/Mac 中的右键菜单还是微信聊天页里面的加号键都遵循着这一原则。作为用户,点击这类按钮之后一定会有后续的任务和操作,所以这些任务都被安排在了距离所点击区域更近的菜单中。

案例2:夸克和 Safari 的 url 输入框位置比较

让设计更有说服力的20条经典原则:菲茨定律

另外一个例子是浏览器的搜索栏输入框,现在已经有一些浏览器(比如简单搜索、夸克)会将输入框以及一些其他更常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的话底部的输入框操作起来更方便,也更快。

2. 可点击的按钮尽可能大

这一点在现今的 APP 中做得已经非常到位了。

案例3:哈罗出行

让设计更有说服力的20条经典原则:菲茨定律

作为哈罗单车租用操作的入口,页面中的「开锁」按钮做得足够大,用户可以轻易快速地点击到这个使用频率最大的按钮。登录(也就是开始)按钮也是一样的道理。

3. 边角的利用

还有一个比较特殊的就是对于边角的利用,无论是在 Windows 还是在 MacOS 中,边角总是有一些比较重要的操作,比如 Windows 的「开始菜单」(在左下角),MacOS 的 Dock 栏(在底部)以及顶部状态栏,包括 Mac 特有的触发角。

案例4:MacOS 触发角设置

让设计更有说服力的20条经典原则:菲茨定律

为什么微软和苹果不约而同地选择了在屏幕最边角放置这些权重相当之高的组件或者操作呢?在硬件设备中边角是一个极其特殊的存在,由于指针再怎么移动都不可能超越屏幕边界,只能停留在边界上,所以边界对于用户的操作来说是「无限可触发」的,这有什么意义呢?这意味着对于隐性存在的目标来说,W 趋于无限大。

让设计更有说服力的20条经典原则:菲茨定律

既然 W 趋于无限大,根据公式时间 T 就趋于常量 a。

让设计更有说服力的20条经典原则:菲茨定律

结论就是无论指针距离目标物多远,所需要花费的时间都已经达到了理论的最小值,轻松且高效。而在移动 APP 中同样有边角的应用,比如最近拿了 Google Play 设计大奖的 Drops。

案例5:Drops

让设计更有说服力的20条经典原则:菲茨定律

创新的交互将屏幕底边充分的利用了起来,只要将单词移到底部,就代表用户已经记住这个单词了。注意整个底部都是可以触发的,而不仅仅是脑袋那个圆形区域。本来「移动」这个操作对于「按钮」来说更加繁琐,但是在 Drop 的应用场景下这样的移动反而没有觉得麻烦,滑起来相当带劲。

4. 菲茨定律的逆向应用

菲茨定律给我们的启示通常都是正向的,都是以缩短用户的操作时间为主要目标,但也有一些场景需要反其道而行之。比如如果遇到需要用户谨慎的操作时,可以逆向运用菲茨定律,增加操作的复杂度。

案例6:iPhone 关机和微信删除聊天窗

让设计更有说服力的20条经典原则:菲茨定律

iPhone 的滑动关机延长了用户关机操作的时间,以提醒用户此操作为不可逆,需要谨慎操作。微信也是同理,甚至还缩小了删除按钮的大小,以达到警示的目的。

另一个典型就是弹出窗口的关闭按钮。

案例7:Luckin Coffee 的弹出窗

让设计更有说服力的20条经典原则:菲茨定律

弹出窗口里一般都包含了开发商的推广、广告、运营活动等等,所以开发商会希望用户花尽量多的时间去注意到它们的内容,这时候鸡贼的开发商会把关闭按钮做得又小又远(远离视觉中心),让用户花更多的时间去寻找和点击它们,效果拔群。


注意事项


注意点1:D 不能过分短

过分短的间距不仅无法提升操作效率,反而会造成视觉压力从而降低用户体验。

反面案例1:唯物魔改版

让设计更有说服力的20条经典原则:菲茨定律

按照菲茨定律魔改的唯物登录页面,理应操作得更迅捷方便,然而实际上除了视觉上造成额外的拥挤感、破坏画面负空间构成之外,我尝试着点了一下觉得十分逼仄挤手,所以过度缩减按钮间的间距并不合理。

注意点2:W 不能过分大

大尺寸的点击目标确实能够有效地降低用户操作成本,但是过分大的目标也会很直接地破坏画面的平衡,浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系,当按钮已经足够大时,再增大就没有什么体验上的提升了,如下图所示。

让设计更有说服力的20条经典原则:菲茨定律

反面案例2:KEEP 魔改版

让设计更有说服力的20条经典原则:菲茨定律

与唯物类似,当按钮大到一定程度之后,会对画面造成恐怖的破坏效果。


总结


  • 尽可能缩短连续操作所相关按钮的间距,尽可能做大需要频繁点击的按钮(但都不要太过分)。
  • 注意屏幕四边和四角在交互中的价值。
  • 逆向运用菲茨定律以延长用户在当前页面的时间,或对用户的下一步操作发出警示。

作者:超人的电话亭

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






手机及小程序界面设计之五:连高手都容易忽略的9个 iOS 与 Android 间的交互差异

博博

现在大多数的 PM /交互/ UI 设计师,在设计产品的时候都是以 iOS 为基准 思考产品上的各种功能逻辑、交互状态,而很容易忽略了某些功能在 Android 里并不能「一稿适应两端」,部分产品差异在安卓上是不一样的。

所以本文就讲下 Android 和 iOS 9大产品/交互差异,希望你在日后的产品设计时,可以考虑到更多层面的知识点。


虚拟商品、支付规则和方式的不同


支付规则

对在于一些虚拟商品的支付上,如 vip 会员、xx币,xx豆。iOS 和 Android 就存在不同的支付规则:Android 基本无限制,无抽成。而 iOS 限制比较多,而且要抽成大约 30% 的手续费。

举个例子:同样充值 30 元,Android 端会得到 300 金币,而在 iOS 中,只有 210 金币。正因这个抽成规则的不同(没办法,这是苹果硬性规定的),才会出现各种平台的虚拟货币,在 Android 和 iOS 中的充值比例是不一样的,如快手:

连高手都容易忽略的9个 iOS 与 Android 间的交互差异所以对于虚拟商品在 iOS 端的抽成规则,在产品设计时一定得考虑清楚,因为这关系产品的商业和盈利模式。通常有 2 种解决思路:

A. 让用户承担 30% 的抽成:

同样的价格,iOS 用户得到的商品少些

如同样充值 30 元,Android 端会得到 300 金币,而在 iOS 中,只有 210 金币。像快抖音、陌陌等各种货币充值。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异同样的商品,iOS 用户支付更高的费用

如 3 个月的 vip 会员,Android 端定价是 58 元,iOS 端则可以设为 68 元。如优酷、腾讯视频的 vip 会员价格。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异B. 公司自己承担 30% 的抽成:

如 iOS 端充值 30 元,公司实收 21 元,但 iOS 用户能得到和 Android 一样的 300 个金币。(理论上是有这个解决思路,但现实中很少有公司去实现,毕竟抽成成本就摆在那里)

另外还需要注意的是:因为抽成规则的不同,对于同一个 ID 的账户余额,在 Android 和 iOS 端中是不能通用的。因此在产品设计时需要将这点告知用户,预防用户犯错、以及恶意刷币。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

支付方式

Android 由于开源的特性,因此对接的都是第三方支付平台,如微信支付、支付宝、银联卡等。 而 iOS 出于系统的封闭性和安全性考虑,只能调用苹果自己的支付系统:登录 Apple ID ,然后用授权的支付方式(支付宝、银联卡)进行付款。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异



状态栏交互的不同


「状态栏」也就是我们手机界面最顶部的电池栏,它除了可以在不同背景里切换颜色外,在交互的触发上,Android 和 iOS 中也各不相同。

iOS :用户在 Y 轴滚动了很长内容时,点击状态栏可以快速回到初始位置。

Android :无论用户滚动了多长内容,都是点击无任何效果。

虽然这一交互差异是 iOS 专有的,但它却启发我们一个新的设计思路:在必要的时候,状态栏可以为产品承载新的交互状态。如网易的 LOFTER( iOS 端),用户离开音乐播放界面时,状态栏就用于显示音乐信息和操作入口,方便用户在浏览其他内容时可以快速关闭音乐,极大提升了用户的操作效率。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


下载方式和状态的不同


这种大多应用于运营的「拉新」场景,为了能让新用户得到好处(红包、优惠券、更好看的内容等)。通常会让新用户下载产品 APP 领取。而由于 Android 与 iOS 的下载方式不同,会带来不同的交互状态和产品逻辑。

Android :可以在当前页面(后台)下载,也可以在应用商店下载;过程中可以显示进度,且允许用户暂停下载;下载完成后调起安装页面,用户可以取消安装,也可以自动安装……正因为 Android 下载软件的各种便捷性,所以才会带来各种交互状态:未下载、下载中、暂停中、已下载但未安装、已安装。这些都是交互设计师需要特别注意的,每个不同的状态背后都会不同的产品逻辑。

iOS :只能跳转到 App Store 里下载,所有下载流程和状态都是在那完成的,可以脱离开活动页面,相比于 Android 的下载方式就简单很多。跳转的方式可以是全屏幕,也可以是半屏。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


软件更新方式的不同


Android :由于安卓的开源特性,当有新版本时都会提示用户更新,且每个产品内部都带有「版本更新」入口。而更新的方式可分 2 种:

  • 引导更新:弹出提示让用户更新 APP ,用户点击「更新」按钮前往应用商店更新、或者在当前页面更新并显示下载进度。
  • 强制更新:也是先提示用户更新,只不过用户点击「更新」按钮,即调起软件安装页面。(前提是产品已在用户处于 wifi 模式下,将安装包已下载完成)

连高手都容易忽略的9个 iOS 与 Android 间的交互差异iOS :而 iOS 端出于对用户体验的考虑,是禁止向用户提示版本更新信息的。这也是为什么绝大部分的 iOS 产品,都是没有「版本更新」入口的原因(像 QQ 、支付宝、百度网盘等大厂产品)。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

即使有,点击了也直接跳转到 App Store 查看版本情况。且下载渠道都固定在 App Store 里。理所应当的,软件的更新方式也只能在 App Store 里进行,无法做到与 Android 一样后台下载、后台更新。


文字发送指令位置的不同


在手机键盘里输入文字时,iOS 由于系统的限制,对文字的发送指令只能在键盘上来完成,因此 iOS 用户的交互操作都全部集中在键盘右下角。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

而 Android 端就灵活很多,不仅可以在键盘上执行发送指令,也可以在输入栏/搜索栏周边新增操作入口。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


退出浮层列表的不同


长按一张图片后,都会弹出一个列表浮层,因为 iOS 手机只有一个「Home 键」 而已,为方便用户退出浮层才增加了「取消」入口。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异而 Android 手机本来就有「返回」虚拟键,安卓用户的退出/返回行为都习惯于通过虚拟键触发,所以多做一个「取消」的意义性不大。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


删除方式的不同


iOS 端一直教育着用户使用「左滑」删除列表信息,所有的删除功能都是支持「左滑」来实现的。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

而 Android 系统大部分只能通过「长按」来触发编辑状态,其中就包括了删除功能。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

不过现在也有极少数的产品,正在逐渐打破这两端间的「删减」界限,比如网易邮箱(Android)就做到了左滑删除信息。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


消息推送机制的不同


当我们第一次打开产品、允许了获取消息通知的权限后,所有的信息传输都会基于服务器进行推送。而两端在这块的推送机制又有所不同:

iOS :所有新信息都会实时推送到你的手机里,即使你关闭了软件,还是一样会收到提示。就算是你处于断网状态,信息也会先储存于苹果服务器,等你联网时再一次性把收到的信息推送给你。既释放手机内存,又不会让用户遗漏有新消息。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

Android :而安卓则不同,你若退出了产品,数据的推送只有等你再次打开产品时,才会通知你有多少新信息。虽然减少了对用户的干扰性,但也增加了服务器数据储存的压力,还容易耽误用户接收新消息。


复制文字后,剪切板状态的不同


也就是我们手机的搜狗输入法键盘,在微信聊天内、手机短信里复制了一段内容后,由于 Android 与 iOS 的平台特性差异,会给两端用户带来不同的交互差异。

iOS :复制完文字后,打开输入法键盘会显示来自剪切板的文字内容。用户只需点击,即可将文字复制在搜索栏、输入栏等需要文字填写的操作区域里,无需触发「粘贴」操作。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

Android :而有些安卓机(如小米/锤子/乐视等),无论你复制了什么信息(文字、数字、网址等),都很难实现输入法里的「剪切板」功能。用户需要触发「粘贴」功能,才能输入刚刚的复制内容。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

而对于特定的信息类型:如网址。用户复制网址往往都带有极强的目标性、搜索性,一些浏览器产品会预判用户这一操作行为,将复制的网址前置展示出来,以抵消 Android 端对于复制文字带来的系统限制。如 QQ 浏览器(安卓端)就有 2 种解法方法:

方法1:利用安卓系统的消息权限,在手机界面的顶部弹出网址栏提示,无论是在微信还是短信中,复制网址后都能快速地触达目标。

方法2:复制网址后打开搜索功能,会将网址自动定位并粘贴到搜索栏中,便于用户查询。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

而 UC 和百度也有类似的解决办法:将复制后的广泛信息(文字/数字/网址/邮箱地址等等)嵌入在搜索框下方,用户点击就能搜索。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异

这也是一种妥当的解决方法,因为用户可复制的信息类型特别广泛、目标不是很清晰。无法准确判断出用户一定会有搜索诉求。所以才将复制后的信息放在搜索框下面,而不是自动粘贴到搜索框中,既考虑了用户目标,又兼顾了操作效率。


总结


以上就是 Android 与 iOS 的差异总结,若有描述得不当请多指教!下面是总结文件。

连高手都容易忽略的9个 iOS 与 Android 间的交互差异


作者:土拨鼠

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!







手机及小程序界面设计之四:手机屏幕越来越大,UX设计师面临哪些挑战?

博博

@布莱恩臣 :iPhone X 在 2017 年上市以来,全面屏手机就开始逐渐普及。iPhone 8 的 4.7 寸屏幕到目前最新机型 iPhone 11 的 6.1 寸屏幕,以及 Pro Max 系列的 6.5 寸,各种各样的刘海屏、水滴屏、挖孔屏、折叠屏等等屏幕方式随之出现,物理 Home 键都被舍弃改成虚拟按键,甚至是没有虚拟按键的手势滑动操作。

手机屏幕越来越大,UX设计师面临哪些挑战?

而这些手机都有一个共同的特点,就是屏幕尺寸越来越大。屏幕尺寸变大后,手握手机的方式和界面交互操作方式也随之改变,那对于设计而言,是否也应该随之进行改变呢?


拇指的操作范围


想单手点击屏幕的操作,需要手足够灵活进行一轮操作才能够到屏幕上方,过程中稍有不慎,手机随时会砸地上。作者的手机屏幕已经修了几次,差不多赶上一台二手机的价格了。

在 2013 年,国外设计师 Steven Hoober 发表了一篇《手机界面设计》的研究报告中,对一千三百名手机使用者进行量化研究数据:

手机屏幕越来越大,UX设计师面临哪些挑战?

据当时研究的数据可以看出,有近半的用户是单手使用手机(现在肯定不止)。当用户单手操作的时候,实际拇指可以触摸到的区域是如下图这样的。绿色区域是拇指的正常操作区域,黄色区域是拇指能触碰到的最大限度范围,红色区域是触摸比较困难的区域。

手机屏幕越来越大,UX设计师面临哪些挑战?

然而这份研究报告的数据是在 2013 年发布,当时还没有全面屏的出现,如果把上面研究结论的区域,套用到如今的手机屏幕尺寸上,顶部的红色区域会占更大比例。以 iPhone 11 尺寸比例作为参考,如下图:

手机屏幕越来越大,UX设计师面临哪些挑战?

拇指可操作范围大约在 3 分之 2 的区域,可见想要触碰到红色区域是有一定难度的。也正是因为这份报告只适合当时的手机市场情况,在当今已经不适用了,因此需要重新去考虑如何为大屏幕手机进行界面设计。


为拇指区域设计


根据 2020 年手机UX设计趋势,大屏幕设计将会成为热点。根据数据报告中有说明,2018 年 10 月使用大屏手机的用户比例是16.3%,到 2019 年 12 月,该数据已经上升到 41%,并且会在未来更多新机型的出现中持续上涨。

那随着大屏幕手机的普及,就意味着设计师在设计界面的时候,要为大屏幕手机的使用场景进行界面调整,避免用户难以使用的体验问题。以下是我整理的一些设计建议方案:

1. 头部区域设计更高

通过将标题栏的信息区域放大,尽量把主要操作内容向拇指区域靠近。

手机屏幕越来越大,UX设计师面临哪些挑战?

手机屏幕越来越大,UX设计师面临哪些挑战?

2. 常用导航与操作居于底部

比起导航栏放在顶部,更适合大屏幕手机的方式是将导航和重要操作尽量往屏幕底部放置。

手机屏幕越来越大,UX设计师面临哪些挑战?

3. 手势操作页面切换与返回

抖音和 Instagram story 等短视频应用界面都是通过手势滑动屏幕的方式,对页面进行切换,操作的学习成本很低,而且主要操作也在屏幕底部。这种操作方式也会在今年越来越多地被使用。

手机屏幕越来越大,UX设计师面临哪些挑战?

4. 提示弹窗从底部升起

常用的弹窗,很多是设计在屏幕中间弹出,为了适配大屏幕,不妨尝试从底部弹出,关键选项都能轻松选择,提高转化率。

手机屏幕越来越大,UX设计师面临哪些挑战?

5. 使用大卡片

屏幕尺寸变大以后,使用整张大卡片可以让用户浏览内容更专注,大面积的配图和留白,也能提高用户的点击欲望。

手机屏幕越来越大,UX设计师面临哪些挑战?

除此以外,作为手机厂商,在发布大屏幕手机的时候,就有对界面操作做了一些对应系统级的设计调整,比如界面下拉悬停,键盘单手模式,屏幕边缘滑动返回等等。


总结


大屏幕尺寸已经是趋势,屏幕大意味着内容可以更大限度地得到展示,有利于产品提供更多的服务,不再纠结首屏无法展示完主要内容。在这个信息爆炸的时代,用户也不再满足于小屏幕的浏览方式。可以说,大屏幕已经是无法改变的趋势。与其担心问题到来,设计师更应该思考如何去适应产品的快速迭代,不断更新自己的设计思维模型,更全面思考问题,产出更合理、体验更好的设计方案。

希望本文内容可以对你有所启发。

作者:布莱恩臣

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!






手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

博博

简介说明


1. 理论表述

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。

让设计更有说服力的20条经典原则:菲茨定律

2. 研究背景

1954 年,Paul Morris Fitts 根据信息类比提出一个假设,该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数,却给了后来的交互研究人员极大的启发。

我们现在经常看到的 Shannon 公式(即上面那个公式)是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」,该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础,它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系:因为以 2 为底的指数函数是递增函数,所以,T 与 D 正相关(D 越大 T 越大),而与 W 负相关(W 越大 T 越小)。


设计案例


人们做出一个移动指针的操作通常需要两步:

  • 将指针快速移动至目标大致所在的区域;
  • 精细调节指针的位置以达到可点击的区域。

菲茨定律所包含的两点内容:

  • 指针当前位置与目标间的距离 D 越长,所需时间越长;
  • 目标的宽度 W 越大,所需时间越短。

让设计更有说服力的20条经典原则:菲茨定律

综合两者来看,菲茨定律中的 D 在第一步中起更为明显的作用,而 W 则主要影响第二步。所以菲茨定律所带给我们的启示,主要也是从这两方面入手。

1. 需要连续操作的控件尽可能接近

案例1:系统右键菜单,微信弹出菜单

让设计更有说服力的20条经典原则:菲茨定律

最典型的例子就是菜单,无论是 PC/Mac 中的右键菜单还是微信聊天页里面的加号键都遵循着这一原则。作为用户,点击这类按钮之后一定会有后续的任务和操作,所以这些任务都被安排在了距离所点击区域更近的菜单中。

案例2:夸克和 Safari 的 url 输入框位置比较

让设计更有说服力的20条经典原则:菲茨定律

另外一个例子是浏览器的搜索栏输入框,现在已经有一些浏览器(比如简单搜索、夸克)会将输入框以及一些其他更常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的话底部的输入框操作起来更方便,也更快。

2. 可点击的按钮尽可能大

这一点在现今的 APP 中做得已经非常到位了。

案例3:哈罗出行

让设计更有说服力的20条经典原则:菲茨定律

作为哈罗单车租用操作的入口,页面中的「开锁」按钮做得足够大,用户可以轻易快速地点击到这个使用频率最大的按钮。登录(也就是开始)按钮也是一样的道理。

3. 边角的利用

还有一个比较特殊的就是对于边角的利用,无论是在 Windows 还是在 MacOS 中,边角总是有一些比较重要的操作,比如 Windows 的「开始菜单」(在左下角),MacOS 的 Dock 栏(在底部)以及顶部状态栏,包括 Mac 特有的触发角。

案例4:MacOS 触发角设置

让设计更有说服力的20条经典原则:菲茨定律

为什么微软和苹果不约而同地选择了在屏幕最边角放置这些权重相当之高的组件或者操作呢?在硬件设备中边角是一个极其特殊的存在,由于指针再怎么移动都不可能超越屏幕边界,只能停留在边界上,所以边界对于用户的操作来说是「无限可触发」的,这有什么意义呢?这意味着对于隐性存在的目标来说,W 趋于无限大。

让设计更有说服力的20条经典原则:菲茨定律

既然 W 趋于无限大,根据公式时间 T 就趋于常量 a。

让设计更有说服力的20条经典原则:菲茨定律

结论就是无论指针距离目标物多远,所需要花费的时间都已经达到了理论的最小值,轻松且高效。而在移动 APP 中同样有边角的应用,比如最近拿了 Google Play 设计大奖的 Drops。

案例5:Drops

让设计更有说服力的20条经典原则:菲茨定律

创新的交互将屏幕底边充分的利用了起来,只要将单词移到底部,就代表用户已经记住这个单词了。注意整个底部都是可以触发的,而不仅仅是脑袋那个圆形区域。本来「移动」这个操作对于「按钮」来说更加繁琐,但是在 Drop 的应用场景下这样的移动反而没有觉得麻烦,滑起来相当带劲。

4. 菲茨定律的逆向应用

菲茨定律给我们的启示通常都是正向的,都是以缩短用户的操作时间为主要目标,但也有一些场景需要反其道而行之。比如如果遇到需要用户谨慎的操作时,可以逆向运用菲茨定律,增加操作的复杂度。

案例6:iPhone 关机和微信删除聊天窗

让设计更有说服力的20条经典原则:菲茨定律

iPhone 的滑动关机延长了用户关机操作的时间,以提醒用户此操作为不可逆,需要谨慎操作。微信也是同理,甚至还缩小了删除按钮的大小,以达到警示的目的。

另一个典型就是弹出窗口的关闭按钮。

案例7:Luckin Coffee 的弹出窗

让设计更有说服力的20条经典原则:菲茨定律

弹出窗口里一般都包含了开发商的推广、广告、运营活动等等,所以开发商会希望用户花尽量多的时间去注意到它们的内容,这时候鸡贼的开发商会把关闭按钮做得又小又远(远离视觉中心),让用户花更多的时间去寻找和点击它们,效果拔群。


注意事项


注意点1:D 不能过分短

过分短的间距不仅无法提升操作效率,反而会造成视觉压力从而降低用户体验。

反面案例1:唯物魔改版

让设计更有说服力的20条经典原则:菲茨定律

按照菲茨定律魔改的唯物登录页面,理应操作得更迅捷方便,然而实际上除了视觉上造成额外的拥挤感、破坏画面负空间构成之外,我尝试着点了一下觉得十分逼仄挤手,所以过度缩减按钮间的间距并不合理。

注意点2:W 不能过分大

大尺寸的点击目标确实能够有效地降低用户操作成本,但是过分大的目标也会很直接地破坏画面的平衡,浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系,当按钮已经足够大时,再增大就没有什么体验上的提升了,如下图所示。

让设计更有说服力的20条经典原则:菲茨定律

反面案例2:KEEP 魔改版

让设计更有说服力的20条经典原则:菲茨定律

与唯物类似,当按钮大到一定程度之后,会对画面造成恐怖的破坏效果。


总结


  • 尽可能缩短连续操作所相关按钮的间距,尽可能做大需要频繁点击的按钮(但都不要太过分)。
  • 注意屏幕四边和四角在交互中的价值。
  • 逆向运用菲茨定律以延长用户在当前页面的时间,或对用户的下一步操作发出警示。

参考资料

  1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
  2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
  3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
  4. Mr汤进er. (2017). 产品设计法则:菲茨定律(费茨法则)/ Fitts’ Law.
  5. bozhongtao (2012). 菲茨定律与互联网设计 Fitts’Law.


作者:超人的电话亭

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!












日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档