兰亭妙微ui设计公司分享:移动端底部导航栏(Tab Bar)是 App 最核心的导航组件,大量海外成熟产品沉淀了很多可复用的设计思路。本文结合海外头部案例,拆解底部导航栏的底层逻辑与落地技巧,帮设计师理清设计思路,规避常见体验坑点。
在正式学习设计方法之前,先思考两个核心问题,做设计不要上来就直接套用 Tab Bar:
市面上微信、淘宝、美团等大量 App 都在用底部导航,但Tab Bar 并不是所有应用的标配。
像系统日历、计算器、Uber / 滴滴这类产品,就没有使用底部 Tab 栏。是否采用底部导航,要结合产品业务场景、信息架构综合判断,不要盲目跟风主流产品。
底部导航栏的核心价值,是降低用户跳转成本,实现页面之间快速切换。借助 Tab Bar,用户可以一键直达核心模块,提升整体操作效率。
明确这两个前提后,下面结合案例分享 8 个可落地的设计技巧:
底部导航栏的空间十分有限,切忌堆砌过多功能标签,造成导航臃肿混乱。优先放置用户高频访问的模块,搜索这类高频操作,非常适合收纳到底部导航,加速内容检索。
案例 Spotify Spotify 的底部导航仅保留四大核心入口:首页浏览、搜索发现、个人音乐库、会员专区。首页负责内容消费,搜索用来挖掘新歌与播客,音乐库存放收藏歌单,会员入口便于用户完成付费转化,全部都是音乐播放器场景下最高频的能力。
行业主流 App 的底部导航普遍设置 4‑5 个标签。这个数量既能覆盖核心业务,也保证按钮点击热区充足,避免标签过多导致按钮过小、误触率升高。 同时导航栏可以承载轻量状态提示,比如消息红点、数字角标,直观向用户推送状态。
案例 Pinterest Pinterest 底部仅设置 4 个标签,按钮尺寸充足,点击容错率高。消息标签搭配数字角标,实时提示未读消息;搜索常驻底部,用户可以在信息流和搜索结果之间无缝来回切换。
底部标签分为两种常用形式:图标搭配文字、纯图标。
案例:宜家 App & YouTube 宜家 App 使用纯图标导航,主页、分类、个人中心的图标符号大众认知度高,即便没有文字,用户也能快速理解含义。 反观 YouTube,导航图标表意相对抽象,如果去掉文字,用户很容易混淆功能,因此必须搭配文字说明。
导航栏文字一定要简短清晰,文字过长会挤压图标空间,还会出现文字截断、换行的问题,干扰用户识别。对于重点操作按钮,还可以去掉文字,强化视觉焦点。
案例 TikTok TikTok 底部导航标签文字全部极简化,中间发布按钮直接去除文字,放大图标视觉权重,引导用户创作,兼顾美观度与引导性。

底部导航承载着 App 最重要的模块入口,常规场景下应当常驻页面底部,滚动页面时也不隐藏。一旦导航消失,用户会失去位置锚点,无法快速切换页面。
特例:Pinterest Pinterest 滚动页面时会收起底部导航。这是特殊场景下的取舍:产品以图片流为核心,隐藏导航是为了减少遮挡,给图片留出更大展示空间。该方案属于个案,不建议通用产品直接照搬。
导航不只是用来跳转,更要告诉用户「我现在在哪」。通过选中态样式区分当前页面,避免用户迷失在产品内。常用方式:图标变色、样式填充、下划线指示等。
案例:多邻国 & Headspace 多邻国,选中 Tab 图标做色彩填充,通过视觉变化区分激活状态,让用户一眼识别当前所在板块。 Headspace 采用底部下划线跟随切换的方案,选中选项下方出现标识线条,切换 Tab 线条同步移动,位置感知明确。
导航栏设计不是一次定稿,需要数据和用户反馈持续打磨。设计师需要调研:哪些 Tab 点击频次高、哪些入口几乎无人使用,到底适配 4 个还是 5 个标签,基于真实用户行为做调整。
案例 Pinterest Pinterest 早期版本的 Tab 栏和市面产品大同小异,团队收集大量用户行为数据与反馈后,迭代优化导航结构,打磨出适配自身用户习惯的底部导航。持续迭代,是产品体验优化的关键。
底部导航栏不止承担跳转职能,还可以借助红点、状态标记,向用户推送外部变化,无需进入页面就能感知新动态。
案例 Twitter Twitter 在产生新内容时,首页图标会出现更新原点提示,唤醒用户点击查看新内容。同类的设计,也广泛应用于 YouTube、Pinterest 等海外产品。
很多人在暗部选色时,就容易选的很脏,尤其是黄色,比如下面这种:
如果暗部颜色本身就选脏了,拿出来的最终质感就是这样的:
但如果你选择色相本身没那么脏:
这时候出来的效果就是这样的:
你可以对比下,脏不脏,一目了然:
这里选黄色暗部颜色的时候,有个小技巧,如果你实在不知道怎么选,你可以将亮部的颜色直接再叠加一层,把新的一层变成正片叠底模式,出来的新颜色,就可以作为暗部的颜色!
是不是非常简单,这样你就不用自己去选颜色了,在这个颜色基础上,微调就可以了!
可以看下面两个黄色暗部的对比,很明显左侧的就很脏,右侧就很通透:
有时候如果我们增加暗部颜色,加过了,导致整体质感有点脏,这个时候,你只需要加一层边缘光,就会提亮不少,减少脏感。
哪怕是刚才那么脏的暗黄色,增加边缘光之后,都会好很多:
其实原理就是在边缘打了个灯光,你想想,那能不亮堂点吗!
实在案例中,也是非常好用,像这个左侧不加边缘光,就显得很脏,加了之后就清透很多:
再比如下面这个,加了边缘光,包括头部,手指等地方,也会通透很多:
所以,加边缘光真的可以减弱很多脏感!
左侧为什么那么显脏,其实除了颜色用的脏以外,很重要的是右侧除了红色和少量绿色,大部分面积都是黑色!
而左侧的图几乎没有黑白灰,连面部都是肉色。
当然,倒不是说颜色用多种就一定脏,而是容易用脏,所以我们现在会很好的控制黑白灰的面积。
你仔细观察,其实我们做的很多画面,都融入了大量的黑白灰,所以颜色就不容脏:
反倒是刚毕业的时候,不知道这个窍门,不管是做平面海报、吉祥物还是图标,都是各种颜色搭配,完了还用不好,最终显脏:
希望大家现在都能记住这个点!
总结起来,我认为减少颜色脏的技巧有3点:
第一,选色时就不能在颜色中融入过多的黑色,不然你选的颜色就很脏了。
第二,利用边缘光去提亮整体的亮度,减少脏感
第三,多增加黑白灰的面积比例,而不是多彩色去搭配,因为黑白灰比较保险,这样可以减少颜色用脏的风险!
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

不管甲方给多少钱,哪怕一张界面的预算只有几十块,他也想要设计亮点,但是很多同学的设计又非常平庸!
为什么你做的设计没有特点,其实原因很简单,你没有用过行业属性这一招,只要学会这一招,完全够用!
先解释下,什么行业属性:
比如你做的 App 是音乐类,那就把音乐类事物或图形提炼出来植入到设计中,比如音符、麦克风等等!
比如你做 App 是体育类,那就把体育类的图形提炼出来植入到设计中,比如跑步、篮球等等!
这样一结合,就可以做的有一定的特点!
但是相关图形或事物的植入也分层次,我个人分了五个层次:
如果你做的产品是体育类,下面这种方式,就和体育相关:
但是这种方式就是直接表达,你是篮球,就画个篮球,是网球就画个网球,是不需要思考的,只要把设计做到精致即可。
再比如下面这个:
你是唱歌,就用麦克风来表达,都是不需要思考的,直接表达即可!
接下来就需要有一点思考了,但是思考的不多,就是如何把图形放在你原有的设计中。
比如下面这个转化图标:
如果中间我们加入的飞机的标识,那就是知道,这是买飞机票的产品:
这时候主要考验的就是飞机的表达形式,你可以是正面的飞机,也可以是侧面的飞机。
还有下面唱吧这种:本来没有任何属性的空页面:
中间加上音符,音乐app的属性就有了:
接下来就需要一定的思考了,比如行程这个图标:
这里面就将飞机和轮船结合到了一起,二者的组成结构,就是这个图标的门槛,而不是之前那种直接拼到一起或者贴上去。
再比如下面这个编辑任务图标,把正常的一个竖线变成树叶,也需要一定的思考和巧妙结合:
你也能够知道,这个图标是和环保或者健康相关的!
这个层次主要是抽象的表达,需要有一定的创意内核,比如像飞猪这种旅游相关的:
空页面采用打开窗户,多去外面看看世界的创意,来进行行业属性关联!
这种就是意境抽象的表达方式!
最后一种就是除了以上内容外,你还可以增加动态的部分,把现实中真实的动态进行加持,那创意效果就会更加显著!
比如像这种播放音乐时候的 cd 唱片机:
运用行业属性增加设计亮点与独特性,一共分了5个层次,分别为:
转载自优设网
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

盲盒 APP 购买成功后,弹出动态收藏卡,放大用户的获得感;
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

经验决定了你能看到什么。尤其是在包含图形或符号元素的内容中,这一点尤为重要。在最近的一个项目中,我们有机会采访10岁以下的儿童和六七十岁的老年人。这是一次非常有趣的经历。采访孩子们让我非常吃力,也让我对幼儿园和学前班的老师们产生了由衷的敬意。
“经验决定你看到什么。”
这次访谈的目的是为了倾听当前项目营销和设计主要目标之外的人们的声音。虽然他们并非主要客户,但他们仍在使用该产品。最有趣的是他们对同一形状的反应。在几份草稿中,六七十岁的那组人看着直线,并将其与抽象的事物联系起来,他们的回答完全符合我的假设。而孩子们甚至没有想到直线形状。一个孩子甚至说:“直线就像地面。” 我们可以从这两个不同的群体中得到什么样的启示?
随着经验的积累,联想也会发生变化。孩子们发现,当概念具有具体的形式,或者他们通过感官体验到的东西时,更容易建立联系。例如,孩子们被告知“A 代表苹果,B 代表香蕉,C 代表猫……R 代表红色……”从小就开始学习英语字母,他们很容易将每个字母与后面的单词联系起来。然而,一旦他们被告知“A代表抽象,B代表信念……”,他们就会感到困惑。最终,在描述和象征意义之间,儿童往往对事实描述反应更强烈,而老年人显然对象征意义有更扎实的理解。
“人们通过长期积累的经验来体验世界。”
在这里,我们看到了心智模型与设计之间的密切关联。人们通过长期积累的经验来体验世界。可以说,经验塑造经验。这适用于我们用感官感受的一切,例如我们看到的艺术、触摸到的产品以及我们居住的空间。最近我读了一本令我印象深刻的书《和一位失明的朋友一起去看艺术》,作者对此进行了如下解释。
“白鸟先生无法在脑海中想象出此刻摆在我面前的杯子与他原本的尺寸、颜色和形状。他用一种完全不同的想象力来看待这个杯子。这意味着那些视力正常的人甚至无法想象白鸟先生所看到的东西。”——摘自《和一位失明的朋友一起去看艺术》
白鸟先生天生几乎无法感知光线和物体,中学时期更是完全失明。他对物体和颜色的感知体验截然不同。当他想到一个杯子时,它的形状、颜色、材质以及背景都与视力正常的人的形象截然不同。从这个意义上说,作者认为我们甚至无法想象白鸟先生所看到的景象。
那么,那些在晚年失明的人又会怎样呢?他们是如何感知周围的环境的?我也曾与盲人相处过:一起参观展览,一起跑步时谈论南山或汉江。我记得,当时我描述了深秋时节,一座落叶缤纷的山峰的景色,当时我们一起跑步时,有人问我这个问题。由于他的失明并非先天性,他仍然保留着对色彩和风景的记忆。他正是通过这些记忆来体验风景的。
为了进行数字体验研究,我们还采访了在十几岁和二十几岁时完全失明的人,以及在五十几岁时失明的六十几岁的人。我注意到他们对设备操作系统的偏好有所不同。六十几岁的人更喜欢安卓系统,因为它与 Windows 的文件系统结构相似,例如在文件夹之间移动文件以及在存储设备上管理文件的方式。将文件从手机移动到电脑时,只需将其插入 USB 端口,然后将其视为 USB 记忆棒即可。然而,长期失明的人大多更喜欢 iOS。像 VoiceOver 这样的辅助功能已经很成熟,其界面一直保持一致,没有频繁更改。
人们的每一个选择都体现着他们生活中积累的经验。因此,设计可以被视为一个为“经验”建造的“房子”添砖加瓦的过程,或者在一个他们从未体验过的新领域奠定基础的过程。无论我们如何定义它,作为设计师,我们都需要理解个人经验的深度和广度。当我们说我们设计时,意思是我们与人们同行,即使我们无法完全理解,就像盲人想象的杯子一样。
“设计就是与理解的人并肩前行。”
兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

大多数设计师在设计网站时,并不太关注链接。只要链接有效,能将用户引导至正确的页面,就万事大吉了。但良好的用户体验远不止于此。有些链接应该在新的浏览器标签页中打开,而有些链接则应该在原浏览器标签页中打开。设计师务必了解两者的区别。
过去,许多人都不喜欢在新窗口中打开链接。新窗口对用户来说很难管理。但浏览器标签页的推出改变了这一现状。现在,您无需打开新窗口,而是可以在新标签页中打开链接。最大的区别在于,浏览器标签页比浏览器窗口更易于用户管理。
当新窗口打开时,它会覆盖用户之前的窗口。用户会感到困惑,不知道如何返回。但是,当新标签页打开时,用户仍然可以在顶部看到之前的标签页。用户很容易理解如何在标签页之间切换。 事实上,大多数用户在浏览时都会打开多个标签页。浏览器已经发生了变化,因此设计师定位链接的方式也应该随之改变。
![]()
将用户引导至同一网站其他页面的链接为内部链接。内部链接不应在新的浏览器标签页中打开,而应在用户当前所在的标签页中打开。
在同一个网站打开新标签页既多余又令人困惑。如果是同一个网站,但页面不同,用户会使用导航菜单返回或根据需要导航到其他地方。让用户停留在同一个标签页中,有助于他们更好地理解网站的导航流程。
然而,外部链接应该在新标签页中打开。这些链接会将用户引导至不同的网站。许多设计师会犯在同一个标签页中打开外部链接的错误。这会带来许多问题,设计师需要了解。
在同一个标签页中打开外部链接,会给用户带来“返回键疲劳”。每次用户访问外部网站时,他们都必须点击“返回键”才能返回到你的网站。如果他们决定点击其他网站上的链接,他们就必须点击更多次“返回键”才能返回到你的网站。这对用户来说,是很多不必要的操作。
在新标签页中打开外部链接,用户可以尽情浏览其他网站,无需反复点击“返回”按钮返回到您的网站。他们只需点击您网站所在的标签页即可。无需反复点击“返回”按钮,也无需长时间等待。

在同一标签页中打开的外部链接也会降低用户浏览速度。许多浏览搜索引擎或链接分享网站的用户都在寻找信息。他们通常会点击页面上的多个链接,从不同的来源获取信息。
在新标签页中打开外部链接,用户可以一次性浏览页面,点击所有相关链接,然后开始消化和筛选信息。用户无需反复返回源页面继续浏览更多链接,从而减少浏览流程的中断。
当用户确实想要返回源页面时,这很容易做到,因为标签页会一直打开,直到用户手动关闭它。用户无需多次点击返回按钮并等待源页面重新加载。他们只需点击标签页即可轻松返回。

在同一个标签页中打开外部链接不仅会让用户负担过重,也会让您的网站负担过重。每次用户返回您的网站时,它都会占用您的网站资源来加载页面。
在新标签页中打开外部链接可以节省大量资源。如果用户想返回您的网站,他们无需再次加载页面。他们只需点击您的网站标签即可。这既快捷又简单,而且不占用任何带宽。他们无需点击返回键或打开上下文菜单即可返回。
很多时候,用户会点击文章段落中的外部链接,以便更好地理解文章内容。这并不意味着他们想在未读完文章的情况下离开您的网站。然而,您的网站分析结果却并非如此。如果您的外部链接在同一个标签页中打开,则表明用户离开您网站的速度比实际速度要快。
这是因为,当外部链接在同一个标签页中打开时,用户会完全离开您的网站。然而,在新标签页中打开的外部链接在用户访问外部网站时,仍会保持您的网站标签页打开。用户在您网站上的停留时间会在他们手动退出网站标签页时结束,而不是在他们访问外部链接时结束。
用户点击外部链接并不意味着他们想要离开您的网站。您不应将外部链接点击视为网站退出。唯一明确的退出方式是用户点击标签页上的关闭按钮。
将用户引导至不同网站的链接应在新标签页中打开。将用户引导至同一网站不同页面的链接应在同一个标签页中打开。如果您在与您的网站相同的标签页中打开外部链接,这会对您和您的用户造成影响。您不仅会遇到不准确的分析结果,导致网站运行更费力,还会使用户的工作负担加重、速度变慢。在当今链接主导网络的世界里,确保链接以正确的方式打开几乎与链接到正确的页面同样重要。
设计师经常会思考对话框中“确定”和“取消”按钮应该放在哪里。“确定”按钮是完成任务的主要操作。
“取消”按钮是辅助操作,可以让用户返回到原始屏幕而不完成任务。根据它们的功能,最佳的放置顺序是什么?“确定”按钮应该放在“取消”按钮之前还是之后?
许多人认为遵循平台惯例是解决问题的答案。虽然这看起来像是解决问题的办法,但实际上并非如此。它没有回答哪种布局对用户更有利以及原因。仅仅为了保持一致性而遵循平台惯例的建议根本不够好,只会让设计师徒劳无功。
“一致性”是设计师们常用的词。它也是人们不深入思考用户面临的设计问题的常见借口。如果连设计惯例存在的意义都不知道,遵循它又有什么意义呢?
如果某种设计惯例对用户有害怎么办?设计师是否应该为了保持一致性而盲目遵循它?是否应该因为设计师想要将平台设计一致性作为解决所有问题的答案而将糟糕的设计实践延续下去?
如今,某些平台设计惯例被广泛使用,因为它们对用户有用。但这里的重点是,平台设计的一致性永远不应成为设计师做某事的唯一理由。理解为什么应该以某种方式设计用户界面而不是另一种方式是关键。
有人可能会认为,通过增加操作按钮的视觉重量和清晰的标签使其更加突出,比其位置更重要。虽然操作按钮的视觉重量和标签是需要考虑的重要设计方面,但并非唯一的方面。
只关注一个设计方面而忽略其他方面,是粗心大意的设计师的表现。一个一丝不苟的设计师会思考每个设计方面如何影响用户。而主要操作和次要操作的布局,正是设计师最难搞清楚的。这就是为什么“确定”/“取消”按钮的争论在设计师中如此普遍。
当你克服了平台惯例的争论后,你会质疑哪种布局效果最好。你可以通过分析设计如何影响用户来解决这个问题。
有必要验证设计师们常见的假设是否正确。一些设计师认为,将主要操作放在左侧次要操作之前对用户更有利,因为左侧操作更靠近用户,因此点击时间更短。
这很有道理,但你不能忽视一个事实:用户在选择操作之前会查看所有选项。这意味着大多数用户不会盲目点击主要操作按钮,而不查看旁边的次要操作按钮。
他们会先看到左侧的主要操作,然后再看右侧的次要操作。之后,他们会将目光移回主要操作并点击它。这会在多个方向上形成总共三个视觉注视点。
左侧有“确定”按钮,视觉注视点更多,并流向多个方向
使用右侧的“确定”按钮,视觉注视点减少,并流向一个方向
将其与位于对话框右侧、次要操作位于左侧的按钮进行比较。用户的视线首先停留在次要操作上,然后移至主要操作并点击按钮。这在一个方向上产生了总共两次视觉注视,从而为用户提供了更快的视觉流。
用户只会在每个按钮上注视一次,最终停留在主要操作按钮上。将主要操作按钮放在左侧或许能让用户更容易触及,但从用户的思维过程和视觉注视角度来看,将主要操作按钮放在对话框右侧实际上会更快。
当用户点击辅助操作按钮时,他们希望应用程序不执行任何操作,并返回到原始屏幕。因此,“取消”按钮的功能类似于“返回”按钮。
当用户点击主要操作按钮时,他们期望应用程序执行按钮指示的操作,并将他们带到下一个屏幕。因此,“确定”按钮的功能类似于“下一步”按钮。将次要操作按钮放在左侧,将主要操作按钮放在右侧,可以映射用户期望的“上一步”和“下一步”按钮的功能。
这与分页按钮的放置方式类似。将用户带到下一页的按钮位于右侧,将用户带回上一页的按钮位于左侧。这种按钮放置方式之所以有效,是因为它与用户从左到右的阅读和导航方向相呼应,其中右侧是前进方向,左侧是后退方向。
“确定”可让用户前进到下一个屏幕,“取消”可让用户返回到原始屏幕
对话框中的“确定”和“取消”按钮应遵循类似的交互模式,因为它们的功能类似于分页按钮。不仅如此,左右方向的模式也符合西方用户习惯。将主要操作放在右侧,将次要操作放在左侧,将使对话框按钮更容易、更直观地被用户理解。
对话框右下角的按钮更容易被用户点击,因为它遵循了古腾堡图表。在古腾堡图表中,右下角是终端区域。这是用户完成浏览后视线最终停留的区域。
将按钮放置在终端区域,可以让用户最后看到需要执行的主要操作。这不仅改善了视觉流程,也优化了任务流程。用户在浏览时不会跳过主要操作按钮。他们的目光会在浏览过程中直接落在按钮上,因此可以立即点击。
扫描对话框并采取行动既快速又简单,因为用户的眼睛停留在主要操作按钮上。
设计师经常思考的另一个问题是,他们应该把按钮放在角落里还是把它们放在一起。当你把主要操作和次要操作放在对话框的角落里时,它们可以很好地映射到左右导航方向。然而,由于“确定”和“取消”按钮不是导航按钮,因此没有必要遵循方向映射。有时,这样做弊大于利。
按钮之间较大的视觉分离使得操作比较困难,并将一个操作与另一个操作隔离开来
如果应用程序即将执行用户无法撤消的关键操作,那么让用户能够同时看到“取消”按钮和“确定”按钮就显得尤为重要。在这种情况下,“取消”按钮的功能可能类似于“上一步”按钮,但它更重要的是,它充当了安全按钮,可以防止任何更改。
将“取消”按钮放在最左上角的危险在于,由于两个按钮之间的视觉距离过大,用户可能会忽略它。将“取消”按钮与“确定”按钮放在一起,可以让用户更容易地在一次注视中看到并比较这两个操作,从而选择最佳操作。
当用户需要阅读重要信息或执行重要操作时,设计师通常会使用对话框。按钮的放置顺序会影响用户选择的操作。如果按钮的放置顺序清晰高效,可以防止用户选择错误的操作并犯错。
按钮的位置很重要,但也要记住注意按钮的视觉重量和标签。所有这些设计方面都会在用户浏览对话框时发挥作用。既然您理解了为什么“确定”按钮放在右侧效果最佳,那么您就有比平台一致性更好的参考依据了。
蓝蓝设计的小编 http://www.lanlanwork.com