首页

这样设计按钮,会提高转化率哦

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

是能点还是不能点呢?”这是当用户在面对一些操作按钮时,大脑中所迟疑的问题。

按钮越多,做决定的时间就越长。用户必须仔细看每个按钮,才能确定哪个是他们需要的。对于按钮的任何不确定性,都可能会导致他们不敢操作或误操作。

设计师可以把按钮的优先级设计的更加直观以减少这样的情况发生。当用户注意到哪个按钮与他们的任务目标更契合时,就能帮助他们快速做出决定。这篇文章就是介绍一些这样的设计技巧,通过简单的调整使得按钮变得更加直观有效。

1、根据阅读习惯设计按钮

在App中,一个常见错误就是按钮的排列顺序偏离了用户的阅读习惯。他们将优先级最高的按钮放在最前面,期望用户能首先注意到它。但其实只要按钮足够突出,视觉分量够重,用户就会注意到它,而无视它的排列顺序。

按钮顺序不是为了提供可视性,而是为了要提率。在最前面放高优先级的按钮会导致用户自上而下的阅读习惯被打断,看到按钮后还会继续阅读下面的文字,然后再回过头来找前面的按钮进行操作。

不要让用户返回再次检查按钮,而是让他们以自然的阅读习惯看完所有的内容后,按视觉比重快速进行选择。

通过将优先级高的按钮放在底部,让它处于视觉阻力最小的路径上,这使得这个按钮可以更有效率的被点击。此外,底部位置是手指最容易达到的区域,这进一步提高了效率。

2、区分带形状按钮和纯文字按钮

App上的另一个错误是只使用文字来表示按钮。设计师使用文字按钮来表示优先级较低的操作。但是对于用户来说,这是一个糟糕的选择,因为纯文本没有一个按钮的外观,这可能导致用户会忽略了这些操作。

纯文本按钮会让用户迟疑到底是按钮还是内容,从而造成混淆。这种不确定性可能会导致他们直接跳过这些按钮。

纯文本按钮不仅让人感到疑惑,在操作上也不容易点击。将文本内容放在按钮框中,可以使得按钮更容易被点击和注意到。

与纯文本相比,描边形式的按钮是降低优先级的更好方法。它们使每个选项都易于识别,以便用户能选择他们所期望的目标。

3、为主要按钮加上颜色

高优先级的按钮应该是最容易被识别到的,它是直接指向用户最需要的目标操作。如果不确定优先级,请考虑哪些操作会使得用户朝着目标前进,哪些操作会使得用户回退。

在这个例子中,”付款”具有更高的优先级,因为它顺应着用户的目标流程。但不大清楚”查看购物车”还是”继续购买”的优先级是如何。

“查看购物车”操作让用户查看已经在购物车的商品,然后继续结账。”继续购物”操作将用户带回到远离结账的产品页面。

通过思考这些操作,可以清楚的看到”查看购物车”具有中等优先级,而”继续购物”具有较低的优先级。判断的理由是哪些操作使用户朝着他们的目标前进,哪些操作使他们远离目标。

前进的操作总是会比回退的操作优先级更高,因此,它们应该被设计地有更强的视觉重量和更高的颜色对比度。

颜色是一种增加按钮权重的有效方法,因为它从文本颜色中脱颖而出,吸引了用户的注意力。当按钮的颜色与文本的颜色相同时,提示性就没有那么强了。为优先级更高的按钮使用不同的颜色来辅助用户进行快速决策。

如果对每个不同优先级按钮使用相同的颜色,用户将不知道哪个优先级更高。而使用不同的颜色只会让用户更加困惑,不知道这些颜色到底意味着什么。不仅如此,每个按钮使用不同颜色,还会让视觉权重重新变得一样。

秘诀就在于使用相同的色相颜色,但改变饱和度和亮度就能改变这个按钮的优先级了,使得它比高优先级的按钮更轻。现在按钮的视觉比重有了区分,一下子就变得清晰了很多。

为了增加对比度,可以使用反色。在主按钮的深色背景上使用浅色文本,而在中等优先级按钮上使用浅色文本。这样就使得高优先级的按钮具有最亮的文本和最强的对比度。

4、改变文本的粗细

用之前说的几个方法,已经足以区分优先级,但还可以做的更好。每个按钮设计的越直观,让用户的思考就越少。

在每个按钮文本上使用相同的粗细以表示相同的重量,最好根据优先级不同去强调不同的文本。尝试改变文本的粗细,优先级越高的按钮使用最粗体,而优先级的文本则不加粗,这样,按钮文本也有了不同的优先级,用户在阅读这些文字内容的时候就能感知到。

在这个例子中,我把”付款”这个按钮文字使用了粗体,使它变得更加醒目和明亮。”查看购物车”使用了半粗体,”继续购物”使用了中等。所以,按钮文本此时也有了一定的视觉权重。”查看购物车”中的”3项”没有加粗,因为它是补充信息,不代表具体的操作。

5、给高优先级的按钮增加图标

最后一个技巧是一种更加全面的思考,它将使按钮可供盲人使用。色盲的人是无法通过颜色来区分按钮的视觉重量的,他们还需要清晰的视觉符号。

给高优先级的按钮加上一个图标能够起到强调作用而与其他按钮区分开。当用户浏览时,他们往往更关注视觉元素而不是文本。使用图标按钮的方式能够确保引起用户足够的注意力而快速选择到高优先级的按钮。

如果删除了颜色和外框,用户仍然能够识别付款按钮,图标与文本一样,也能够起到说明的作用。

你的按钮设计的直观吗?

如果用户要花很长时间在操作按钮上,或者按钮的点击率很低,那就可能是按钮设计的不够直观。如果遇到了这样的情况,请尝试使用文中所说的这些技巧来优化操作按钮,或许你将会在前后版本中看到非常大的差异。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

指尖上的UI设计:移动端UI设计中的手势交互

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

通过点击、滑动、滚动和键盘快捷键来交互的日子吗?它们不再是唯一的交互方式,一起来了解一下~


还记得浏览网页时,只能通过点击、滑动、滚动和键盘快捷键来交互的日子吗?而现在,它们不再是唯一的交互方式,当苹果推出第一款iPhone时,多点触控技术成为了主流,用户们了解到,他们不仅可以在界面上指向、轻点还可以捏合、展开和滑动。手势成为新的操作方式。



一、UI中手势的力量

手势非常自然和直观,他们与真实世界反应类似。

对于使用手势,这里有三个主要的理由:


● 干扰少

App内,手势控制使用地越多,在屏幕上出现的按钮就越少,这样可以留出更多空间给更有价值的内容。这使得app以内容为重点,并让用户在没有障碍,或者在分心的情况下也能进行最重要的操作。

● 使用简单

一个手势一旦被用户发现和学习使用就会让用户在体验感到愉悦,而且手势可以减少步骤,来达到提高交互体验的目的。例如,当你需要删除一些项目时,用“一次点击删除一个”的方式的很浪费时间的,但是如果使用“滑动一下,删除一个”的滑动手势,就更简单快速,让用户更加愉悦。

● 无缝交互

虽然按钮看起来对于触发响应更加有用,但手势具有更大的潜力,使内容的交互更加直观。

二、手势的缺点

但同时,手势也存在难规范、易混淆等缺点。


● 增加用户负担

大多数手势学起来或者记起来不自然也不简单。举个例子,在大多数APP,一个手指的手势就对应一件事,用两个手指做一个同样的手势意味着另外一件事,其他对应事件的手势还有很多。

● 缺乏反馈

在大多数情况下,手势不会留下任何路径记录。这意味着,如果做一个手势但没有得到反应或者得到错的反应,这样就只能获得很少的信息或者不能获得有帮助的信息去解释为什么这么做。

● 缺乏一致性

大多数手势在app中还不是标准统一的。他们对于用户不总是显而易见的。甚至一个简单的滑动手势,在众多邮箱app内的邮件项目中也有着不同的工作方式。例如,在Apple Mail 中,删除一个未读项目,你应该向左滑动这个没有打开的邮件,然后界面会出现选项来删除这个项目。在Gmail里,向左滑动可以把邮件标记为未读状态。

三、手势成为移动端UI成功的关键

1.如何选择好的手势

如果你的界面里要使用手势,那你就必须要去了解你所在的市场以及你的目标用户会去使用的app。要尝试在你的app里使用和它们相同类型的手势。这样,你不仅基于你的目标市场的用户的行为优化了你的界面,还让用户从一开始就能舒适的使用你的app。



2.手势教学

虽然每个移动端app都必定会用到手势,但是要让用户很自然的就能知道如何操作(使用什么手势可以干什么)却一个挑战。可触摸的界面提供了很多条件来使用自然的手势,例如轻点、滑动和捏合来完成任务,但是不同于图形界面的操作,手势的交互用户往往是看不到的。

因此,要让用户能发现手势是很重要的。你需要确保你提供了正确的线索----通过视觉引导来帮助用户更容易的发现如何与界面进行交互。



3.如何在情境中教育用户

教程和演示的做法相当流行。在许多app中加入教程意味着要想用户显示一些说明内容来介绍界面。然而,UI教程不是介绍app的核心功能的最优雅的式。

良好执行的UI手势总是可以在易于实现视觉提示和渐进式披露的游戏中找到。这显而易见,最好的游戏可以使人们随着时间的推移来学习到技巧,而不是靠指导他们。例如,PuddingMonster 的游戏机器完全基于手势,但是他们允许用户得到基础的信息,他们不需要做很多的猜测。他们可以展示动画场景,让用户马上知道要做什么。


四、使用动效来传达手势

手势总是与移动app中的动效相关联。动效在维护用户体验中起着非常重要的作用。作为设计师,你可以利用动效来传达出用户可以进行某个操作。当动效与手势一致时,用户就会意识到自己与该物体正在相互作用。

动效在向用户提供视觉反馈上是非常重要的。没有动效,用户就不能获得足够的信息反馈,不能确定他们是不是成功地完成了手势动作。



这里有三种流行的基于动效来帮助用户学习手势。

第一种:动效视觉提示

显示一个在执行某个操作时如何和某一个界面元素进行交互的预览。它的目的是在手势和操作之间建立联系。例如下图中的这个游戏app是完全基于手势操作的,这个app让用户不用去猜测就能知道该如何操作。用动画来传达功能信息能立即让用户清晰的知道该怎么做。


第二种:内容的梳理

内容梳理是通过微妙的视觉线索来暗示用户进行手势操作。例如下图中卡片的展示,它表明这张卡的背后还存在着其他的卡片,这清晰的表明了可以滑动卡片。



第三种:功能可见性

你可以让你界面里的某些元素具有很明显的可供性来让用户知道这个是可以进行某种操作的。例如下图中点击相机icon后锁屏就会从下往上弹起,展示出在下面的相机功能。


五、总结

手势是一种强大的互动模式。移动设备已经从砖块发展到由我们手指驱动的复杂计算器。触摸和手势交互在使移动体验更加简便有趣方面,有很大的潜力。

设计一款移动端的app一定要思考手势设计。手势应该起到协调和节约时间的作用。为了设计一个有意义的手势,你应该规定一个动作以及与其配套的一个手势。提供反馈意见也非常重要,对于可能要进行的行动要有明确提示,并进行手势的引导。



作者:young68
链接:https://www.jianshu.com/p/7132d7e6220f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计中的“所见即所得”原则

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

交互设计中的“所见即所得”原则


“所见即所得”原则我记得在之前的文章中就提到过,但是没有详细说明。最近在体验一些产品时,发现很多交互设计上的坑都可以归纳到“所见非所得”上。




所见非所得




我们可以首先来看一下“所见非所得”的案例:上周寄件去北京,在填写收件人信息时候,发现了一个“智能填写”的功能很有意思。所谓“智能填写”就是OCR识别技术,系统可以识别图片上的地址。例如,你的收件人地址正好是身份证上的住址,那么你就可以上传身份证照片,系统直接识别照片上的地址而不需要手动去输入。


Image title


用户具体的操作流程是:




1 拍摄/上传照片;




点击“上传图片”按钮,用户可以选择拍摄或者上传相册里的照片,框选合适的识别区域;




2 系统识别并展示结果;




系统会自动识别图片中的地址信息,并且在输入框中展示,如果有识别错误的地方,用户可以手动编辑修改;




3 用户确认;




用户对地址信息确认无误了,点击“智能填写”按钮,输入框里的地址信息会自动回填到地址栏;


Image title


了解了大致流程,我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能,但是在交互设计上存在差异。产品A,当用户上传完图片才会出现“智能填写”按钮;产品B是全程展示“智能填写”按钮的。我个人更加偏爱产品A的处理模式,因为当用户都没有上传图片时,给用户展示“智能填写”按钮是没有任何意义的,这里的“智能填写”虽然可见但是不可得,用户也不能点击。当然有人会说,虽然不可点击,但是展示了也没什么问题吧?当然有问题,它会给用户带来两个痛点:




1) 增加了用户的学习成本;




对于新用户来说,产品A肯定更加容易上手。因为新用户一进入这个页面,只能看到上传图片的按钮,用户明白了我首先要上传图片。产品B是直接一股脑的把所有选项展示出来,用户不知道这些选项之间的联系和操作顺序。




2) 阻断正常操作流程;




给用户展示了他们本不应该看到的元素,可能会阻断正常的操作流程。用户如果还没上传图片,就点击“智能填写”按钮会直接报错,“所传参数不能为空”,用户哪里看懂这是什么意思。


Image title


之前在火车站取票,前面排队的大婶跟我说她的票取不了。我凑过去一看,发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮,用户误以为还是可以点击的,导致无法正常完成取票流程。


Image title


了解到这些痛点,那么如何才能在交互设计上实现“所见即所得”原则呢?我总结了两个方法:限制和就近。




限制原则




了解限制原则,我们需要回答两个问题:




1)为什么要限制?




因为多才要限制,多会带来哪些坏处?内容多,用户处理不过来;选项多,用户挑花了眼;时间多,优惠券没有有限期限制用户懒得用。




2)限制什么?




限制用户与界面交互的触点。还是以智能填写为例,当前界面有三个触点:上传图片按钮、输入框、智能填写按钮。这三个触点分别对应着步骤一、步骤二和步骤三。如果我们在步骤一的阶段给用户提供了步骤三的触点,保不齐会有用户尝试去交互,这样的无效操作会触发报错场景。所以当用户处于一个线性的操作流程中,根据用户所处的阶段,分析用户可能进行交互操作,提供交互触点,保证用户看到的触点都是可交互的。




罔顾用户的操作阶段,一股脑的把所有触点都提供给用户。设计师倒是很省心,但是用户却会很糟心,他们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳,我们来分析用户处于不同阶段所需要的功能触点。




举个知乎的例子,知乎有一个“向知友提问”的功能。但是这个按钮只会在用户滑动搜索结果页3屏后才会出现,因为滑动了3屏,我们可以猜测用户对当前的搜索结果不满意,引导用户去提问。


Image title


当然限制原则不仅仅是限制交互触点,还可以应用到产品逻辑中,帮助用户解决很多问题。我曾经遇到过一个场景,公司上线了一款优惠券,用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高,导致领取失败。对于这个报错文案,我们改了好几版,但是每次都会收到用户的投诉。我们无法直接告诉用户,你是因为风险等级过高导致无法领取,因为用户风险等级过高是因为开通了某项业务。当时开通的时候,我们并未告知开通后会被判定为高风险用户。所以为了不必要的麻烦,最好的办法就是进行判断前置,如果判断用户为高风险用户那么就直接不展示该优惠券。




就近原则




从上面的阐述中,我们可以发现“所见即所得”原则最根本的目的是为了节省用户的操作时间,提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间,因为只有充分理解系统反馈的信息才能进行进一步的操作。如何帮助用户快速的消化反馈的信息呢?因为反馈是系统对于用户操作的回应,那么我们可以让操作和反馈尽量的贴近一点,这就是就近原则。就近原则可以分为两类:位置就近和形式就近。




1) 位置就近




所见即所得,这里的“所见”即代表着用户的视线,而用户的视线总是停留在上一个交互触点附近。


Image title


例如,还是寄件的场景,要填写发件人信息,我懒得重新填写一遍地址,正好看到输入框右边有一个附近地址的功能。我点了一下,没有反应,又点了几下才发现底部出现了一个“附近地址”的列表。这里的交互触点是“附近地址”的文字链接,我的视线也是停留在附近,没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。




2)形式就近




形式就近,这里的形式特指反馈形式。目前最通用的反馈方式是弹框,弹框的弊端也就恰恰在于它的“通用”上。所有类型的反馈都可以用弹框来承载,用户无法立刻感知到弹框所传递内容是什么。既然反馈是系统对于用户操作的回应,而用户操作又是一个个交互触点所触发的。如果我们可以通过改变触点自身形态的变化来完成信息的传递,用户感知起来会更加容易。


Image title


举个例子,用户在输入登录密码的时候,其触点是输入框。当用户密码输入错误的时候,我们可以通过抖动输入框的方式告知用户输入错误,这里抖动是现实生活中“摇头”的映射,我们都知道摇头代表着否定的意思,用户不用看到弹框上的“密码错误”几个字也能明白密码输错了。




总结




以上就是我对交互设计中“所见即所得”原则的总结和分析,如果你有不同的意见和看法,欢迎留言或者加群讨论

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

为什么在UI设计中,蓝色会成为最常用的色彩?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

不管你是不是UI设计师,细心的你是否观察到你所使用的APP中,绝大多数都采用了蓝色。举个例子,有多少APP软件的LOGO使用了蓝色,大家最熟悉的支付宝、知乎、百度、Facebook、Twitter、Safari均是如此。
为什么这些交互界面会不约而同的使用蓝色?唐人设计总结了以下几个原因:
一、蓝色是被大多数人能接受的颜色
有研究表明,蓝色是绝大多数的人都喜欢的蓝色,蓝色是被全球范围内公认的最安全的设计用色。
二、蓝色是UI设计师的通用色彩
从UI设计师的角度上来看,蓝色是一种泛用的色彩。就我们所认知的常用色彩当中,红色、黄色、绿色都带有强烈的情感情绪。红色代表喜庆,同时也表示警醒;黄色代表活泼,同时也昭示危险的信号;绿色常常关乎安全、健康,而相较于以上三种色彩,蓝色所带给人的情绪就比较模糊或者说是广泛了。
三、蓝色通常代表“创新”和“科技”
还记得唐人设计之前写过的文章《你发现了没?NBA的Logo微调了!》一文中提到了,NBA的LOGO调整之一包括LOGO颜色加深了,也就是在原来的蓝色背景色基础上更加加深了蓝色色调,这样调整的好处在于:更深的蓝色,让NBA联盟看起来更公司化。所以说,当一个公司或者一个APP设计采用蓝色LOGO的时候,常常会让人联想到技术和创新。
四、蓝色让产品看起来更加值得信赖
更准确的来说,蓝色会让用户更倾向于觉得“这就是我要的产品”,当这种感觉和品牌本身的运作和特质结合在一起的时候,就能够形成让人信任的品牌性格了。戴尔、IBM、英特尔和PayPal都是利用技术来营造品牌信任感。蓝色代表冷静、平衡和智慧,许多金融服务类的企业也喜欢用这种颜色。
五、蓝色对于色盲足够友好
考虑到用户群体中不乏有色盲,而占比最大的红绿色色盲群体都能清晰地分辨出蓝色。蓝色是Facebook的主要色调,因为它的创始人扎克伯格就是个色盲,如他所说:“于我而言蓝色是我最容易辨认的色彩,所有的蓝色我都能掌控”
总结:蓝色虽然是最安全的设计色,但不要随便将蓝色泛用在你的设计中,最重要的一点还是选择最适合自己品牌的色彩!

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

动效如何使用更吸引人

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

没有用户会拒绝任何产品的锦上添花,而功能性动效对于产品来讲,在满足功能效率的同时,能够带来更多额外的附加体验,是一种相对比较容易引发体验峰值的途径,下面和大家介绍 功能性动效的定义和类型。

移动端功能性动效的使用场景

一、功能性动效的定义

功能性动效的主要类型有页面空间转换、视觉信息反馈、功能操作引导、品牌与趣味,本文就来谈谈这四种功能性动效在移动端的使用。

定义:功能性动效是一种嵌入 UI 设计中微妙的动画,有着明确、合理的目标

功能性动效的主要类型:

页面空间转换;

视觉信息反馈;

功能操作引导;

品牌与趣味。

二、功能性动效的类型

类型 1 :页面空间转换动效

1.1 主要作用

页面空间转换的动效,主要是为了让用户通过理解页面中空间转换的动效,了解到界面和元素之间的空间关系,并随时感知到空间元素的变化。

告诉用户对象和窗口的状态是如何变化的,防止页面转换视盲,在空间上也能营造更好的印象。

1.2 使用场景

页面空间转换类动效,主要使用在轮播 banner/页面切换/导航菜单切换。

1.3 优秀案例赏析

案例 (1) :轮播 Banner 中的空间转换动效

案例 (2) :导航菜单切换

导航栏的的转换是指 App 中导航菜单状态的变换,有不同级菜单之间和同级菜单之间的转换,解释菜单之间的层级关系,让用户明白菜单转换的过程中到底发生了什么,下一步操作具体如何去做。

类型 2 :视觉信息反馈动效类型

具备良好用户体验的产品,都应该给用户的每一个操作都提供反馈,无论成功与否,反馈会使用户觉得自己与屏幕上的元素进行真实互动。即便隔着屏幕,也能让用户看起来是在直接操作,增加操作的可控性真实自然的体感。

2.1 主要作用

视觉信息反馈类动效主要是为了告诉用户目前操作到哪里了,时时状态怎么样,缓解用户对应用处理速度的量化感知。

具体表现为:

确认系统接收到用户的操作;

确认(或拒绝)用户的行为;

明确告知用户当前操作的进度/状态,缓解用户的紧张/焦虑感。

2.2 使用场景

系统信息提示/状态反馈/操作结果反馈/进度提示/加载提示。

2.3 优秀案例赏析

案例 (1):系统提示反馈

系统反馈,当系统状态发生重要的变化时,功能性动画也可以用来提醒用户,可以给用户一个快速而有简洁的一个反馈。例如:短信提示、来电提示。如下图:

案例 (2) :操作结果反馈

案例 (3) :进度提示反馈

在进度条设计中,明确告知用户当前的具体进度和状态,让用户随时随地知道还需要等待多久,对当前操作环境是可控的,而不是让用户去猜,让用户对当前的操作环境不可控。例如:他当下操作的步骤;目前数据下载/状态的具体执行进度等,让用户有心理预期。

类型 3 :功能操作引导

当用户第一次使用你的app的时候,如果没有帮助的话,他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示来告诉他们哪些操作是可行的。

3.1 主要作用

功能性的动画可以提示用户去注意那些可以完成的操作,视觉提示可以给用户告知即将发生的事情。

3.2 使用场景

新手引导/功能操作引导。

3.3 优秀案例赏析

案例 1 :新手引导

案例 2 :功能操作中的引导

下图中的例子,是一个游戏里面的小例子,直接用动效完美诠释了“手把手教导”,这样用户理解的成本就非常低,根本不用思考,按照引导去做就能完成任务。是一种非常清晰的解决问题的方式。

类型 4 :品牌与趣味

4.1 主要作用

为了避免与市场上很多APP同质化,千篇一律的用户体验,品牌动画可以成为一个产品的营销工具,用来表现一家公司的品牌价值或者突出产品的优势,同时给用户一种愉快又难忘的用户体验。

4.1 使用场景

加载细节/动效速度感知/动效色彩的具体场景中使用。

4.3 优秀案例

案例(1):Uber 启动页的打开加载动效

Uber 的打开动效不仅让用户体会到愉悦感,而且它的展开式动效还很好地“控制”了用户双眼的视觉焦点。如下图:

案例(2):输入操作中的动效

下图的例子是一个输入账号密码操作时的动效,是动效带来趣味体验的典型案例:

当用户输入密码的时候,这个动作其实是一个非常隐私的动作,所以现实生活中,自己输密码的时候,都会希望身边的陌生人转身/不要直接盯着看。

而下面的例子就把保护用户隐私作为一种生理的本能,把这种生活中的习惯延续到界面细节当中,当用户输入密码的时候,输入框上面的猫头鹰自觉的捂住了自己的眼睛,向用户传达系统的安全性之外,也和用户进行了一次无声的趣味互动,是一个很好的信息反馈的案例。

除了上面的账号输入案例,还有其他类似的动效例子。例如:很多结果输入的反馈里,如果结果输入错误,那么输入框和文字则会来回晃动,同时输入的文字/输入框同时变红。这个效果会让我们联想到日常生活中的摆手和摇头,而这些都代表着“no”,是一种非常自然的动效交互逻辑。而正是这些小细节的使用,是打造良好用户体验的关键。

结语

其实,用户比我们预想中更能注意到页面中的细节,动效除了要帮助用户快速找到他想要的东西,达到他想完成的任务,也是一种可以给用户传递情感的交互元素。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

 

汽车UI界面怎么做?来看特斯拉和Apple Carplay等高手的案例!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


现在市面上的汽车大部分都是过时的,没有吸引力的用户界面,正因为如此,很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文,一起来学习特斯拉和Apple Carplay 是怎么设计的!

汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此,顶尖的数字设计师们应该把重点放在对这个行业的关注。那么,到底什么才是车辆用户界面的未来?它能从根本上改变我们和汽车之间的关系么?

下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法,有一些是真实存在的,有一些还正在发展中。

特斯拉移动控制中心原型

uisdc-car-201610133

它为什么会让人震惊?

当你想确定你是否已经锁好车,关上灯,或者把你的车钥匙交给刚考完驾照的小屁孩的时候,你是否觉得自己是个偏执狂?

这个移动app可以让你在不离开座位的时候检查这一切,有一个柴油混合动力车?你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。

车载控制面板用户界面

uisdc-car-201610134

它为什么会让人震惊?

这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型,不同数目的手指可以触发不同事件,你可以通过iPad面板,无线鼠标等控制它。你可以通过动作来控制数值的大小等等。

这个用户界面去掉了所有需要用户记忆的小控件和视觉元素,从而你可以使用相同的手势或者它的变体,来完成多个不同种类的任务。

你可以在这里查看整个案例研究:A New Car UI

特斯拉仪表界面概念版

uisdc-car-201610135

它为什么会让人震惊?

汽车将会变得更加的智能,为我们的公共场所腾出更多的空间,并且汽车的功能也将变得越来越互相关联起来。随着这些发展,数据在我们面前将会变得势不可挡,试想一下不久之前,我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权,它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。

你可以在这里查看整个案例研究:Behance

远程车辆健康测试与控制

uisdc-car-201610139

它为什么会让人震惊?

当汽车所有的零部件都变成电子系统时,你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况,让你知道你是否有必要在开启你的海岸线之旅前修一下它。

轮胎压力和气候的用户界面

uisdc-car-201610131

它为什么会让人震惊?

当进行轮胎检查时,这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈,我觉得它应该被纳入常用标准中去。

Hudway增强现实显示器

uisdc-car-201610138

它为什么会让人震惊?

不用说大家都知道司机应该保持视线在路上,但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间,这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。

你可以在这里查看整个案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市导览汽车应用

uisdc-car-201610132

它为什么会让人震惊?

这个用户界面对于勇敢的探险家来说非常完美,如果你想快速的知道你周围有什么,这个用户界面可以让你在有限的路线里来一段自发的旅行。

Apple Carplay

uisdc-car-2016101310

它为什么会让人震惊?

每个人都在关注它的到来,想都不要想,如果你已经有了一堆苹果的产品,你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。

数字仪表板集群显示器

uisdc-car-201610136

它为什么会让人震惊?

没有什么能和发动引擎点亮仪表,汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切,声音和延迟的视觉互动,都给与你感官的反馈。仪表会通过动画直观的告诉你,合适讲切入下个转弯,油量是否变低,以及胎压是否过低。

然而,用数字型号在方方面面代替模拟型号也会开始令人担忧,因为无法人工手动介入账款车子,当保险丝熔断,或者电子仪器故障时,汽车很快会失控。

特斯拉 iWatch UI 原型

uisdc-car-201610137

它为什么会让人震惊?

当可穿戴设备成为我们设备的一部分时,它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。



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

总结页面打开的交互方式,很全面!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨,给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础,在设计的过程中,或多或少都会遇到选择的困扰,尤其是产品功能复杂,层级较多时,如何让用户按照自己的意愿清晰的浏览信息,保持操作连贯性,是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中,团队对链接操作的打开方式产生了分歧,借此机会整理了一些案例与资料,就这个问题进行分析探讨,也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接,主要有按钮、icon 以及文字链接,设计中常用的打开方式则主要有以下三种:

1. 当前页打开

点击操作链接后,在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后,在浏览器中新开一个独立的标签页面,进行内容显示与操作。

3. 弹出框

点击操作链接后,在当前的浏览器页面中,弹出一个小尺寸的对话框,进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中,target目标有「target=_blank」和「target=_self」两种属性,分别代表「新窗口打开」和「当前窗口打开」,下图是这两个参数的属性描述。

从这两个参数的属性上来看,「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一,用户也形成了一致的习惯,但国内的形式则不尽相同,以至于一直颇具争议,不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论,可以听到两种不同的用户声音,并且都站在各自的角度阐述其道理。

举个例子,我们以同类型网站(淘宝和亚马逊)的打开处理方式进行对比,来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先,我们确定一致的功能场景:用户从首页中根据各种筛选条件,查找到心仪的商品。来看一下两个网站的处理方式:

可以看出基本是两个极端,差异非常明显,再来看个有意思的现象,亚马逊中国的商品搜索方式竟然又和淘宝一致了,难道链接打开方式的差异竟是中外用户习惯的差异?

这确实占了很大一部分原因,那么造成这种差异的原因主要有:

  • 早期的 W3C标准不支持 target=”_blank”(HTML语言中,在新窗口中打开链接)的属性,国外互联网普及也比国内早,于是用户慢慢养成了习惯。
  • 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面,可以鼠标中键、按住ctrl点击链接或者右键新窗口打开,此时用户更有选择权,可以自己决定打开方式;如果默认新开页面,则让用户失去了选择权。
  • 早期国内互联网发展较为浮躁,网站想通过新标签页打开方式,提高PV。
  • 国内网络普及晚,部分用户尤其很多老年人不习惯甚至或许不知道,页中有个后退前进按钮、面包屑可用,新开页面便于他们的操作。

那么,淘宝中所有的页面打开方式都是新开吗?不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部,如此区别设计的原因我认为有:

  • 用户的目的较为明确,查找对象确定。(用户想要查看的对象是确定的,如购物车中的产品,用户有明确的目标,找到链接打开页面即可,不像搜索查找商品,需要一步步缩小范围甚至比对查看)
  • 链接入口常驻在网站的信息栏,用户可以随时切换,操作方便,且不存在重新输入的成本。

关于这两种打开方式,到底哪种操作更顺畅,确实难分高下,就跟「确定和取消哪个在左,哪个在右」是一种性质的问题,没有好坏之分,关键是要看在哪种场景下使用更合适。

新页面打开适用的场景:

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:产品中的外链。
  • 存在多页面「比较」的操作,需要经常切换。如:淘宝商品详情。
  • 需要保留住前一页的操作不丢失。如:知乎上过滤出来的结果列表。
  • 功能分支存在穿插,当路径发生交叉时,最好新开页面。如:产品内部的跳转链接,导致信息关联的层级发生改变。
  • 具有辅助功能的操作。如:使用文档(PDF、图片等)需要来回参照。

当前页打开适用的场景:

  • 流程性的功能页面,前后操作存在关联和影响。如:下单支付、按步骤新增。
  • 同一层级内容间的操作。如:tab栏的切换。
  • 同一路径中的操作,用户当前的操作会对主页的内容产生影响。如:编辑一个配置,用户操作完,会回到当前页查看结果。
  • 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重,如果就「用户体验」一定要分出个高下,我个人还是比较支持默认「当前页打开」,从体验角度分析,「当前页打开」略胜一筹的主要原因有以下两个:

  • 尊重用户的决定。当前页打开,将更多选择机会留给用户(鼠标中键、按住ctrl点击链接或者可以右键新窗口打开),一个具有良好用户体验的产品,在用户做操作的时候,总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权,因为不同的人有不同的浏览习惯和使用需求。
  • 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候,可以顺畅的知道、理解,并且能预料到将会发生什么,不会被分神,也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计,而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时,或许「不强制用户」才是最好的体验。因为我们面临的用户多样,电脑操作熟悉程度多样,因此不同用户对于打开方式的习惯也具有多样性,这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下,在当前窗口打开链接,不失为一个选择,尊重用户自己的决定,让用户对交互界面自主可控。

三、弹出框

弹出框(弹层)又叫模态对话框,是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上,避免了页面跳转。

弹出框通常是为了显示一个单独的内容,在不离开整体页面的情况下有一些互动,提供信息和交互。

如下图知乎中的「写想法」,用户可以快速的在弹出框中记录个人想法,记录发布后,很顺畅的回到之前的路径上继续操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建,也都会采用弹出框的交互方式,当然前提是在弹出框中编辑的内容不是很多,此时弹出框不仅承载了信息编辑的功能,还可以作为上下文的跳转,帮助用户衔接路径。

如 iconfont 中的新建项目,用户新增后,页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景:

  • 内容简单,没有复杂的操作,且具有临时性。如:新增一个收货地址,进行简要的输入编辑。
  • 更为详细的辅助说明,是对当前内容的快速扩展。如:缩略图,点击放大查看。

因此,弹出框可以较好的实现上下内容层叠的感知,不打扰用户的主路径,同时作为页面承载元素和用户操作的补充,起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然,以上总结也是基于我个人的理解与经验,没有统一的用法和标准,在具体设计实践中,仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师,如何规划用户浏览路径,是个需要严肃对待的命题。没有绝对的好与坏,但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

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

面向中小企业SaaS的权限管理系统

博博

面向中小企业SaaS的权限管理系统

人人都是产品经理 2018-08-19 15:02:17

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文基于面向某个垂直行业的SaaS系统的设计经验,抽象出一套适合中小企业的权限管理体系,目标是最大限度保留系统弹性的同时,把系统复杂度和开发成本尽可能降低。enjoy~

面向中小企业SaaS的权限管理系统

面向企业级的SaaS(软件及服务)系统,由于企业用户的规模和内部管理模式千差万别,设计一套具备足够弹性、符合绝大部分目标企业用户需求的权限管理系统,是一个很大的挑战。

我们可以看到,市面上面向多个行业的综合性SaaS系统,例如销售易、纷享销客等,由于它们的目标客户跨越了多个行业、多种规模,这些企业具备各种各样的内部管理风格和模式,在权限系统的管理上,往往做得非常复杂,不仅具备部门、角色、职位、数据等各个维度的权限管理,各个功能模块还有自己独立的权限管理,虽然具备最大的弹性,却给企业的系统管理带来较大的负担。

提炼的三个核心原则:

  • 企业-管理员-普通账号三级权限
  • 功能和数据权限分离
  • 部门和角色分离

围绕上述三个基本原则,我们力图在满足中小企业需求的前提下保持足够的弹性,并严格控制复杂度和开发成本。详细描述如下。

1. 权限从上到下分为三个层级:企业账号(老板账号)、管理员账号、普通账号

对于中小企业来说,公司的实际控制人,往往是公司的创始人或自然人大股东,因此企业账号的使用者以及对应绑定的手机号码,都是公司的实际控制人,他应该掌握最核心、权限最大的企业账号,所以也可以称为“老板账号”。

但是在实际场景中,公司的实际控制人并不会直接管理公司的业务支撑系统,因此,需要在系统首次部署时,创建好企业账号,并由企业账号授权给某一个或多个系统管理员,由系统管理员去完成日常的角色创建、员工导入等工作。系统管理员,对应的一般就是HR或行政部门的管理人员。当然,企业账号的权限高于管理员账号,如果是小微型企业,也可以由企业账号直接替代管理员账号的功能。

除了企业账号和管理员账号之外,其他各级员工所持有的账号,都属于普通账号。普通账号的部门、角色、数据等权限的设置,一律由系统管理员配置。

三个权限层级示意图如下:

面向中小企业SaaS的权限管理系统

在实际系统中的核心业务步骤如下:

(1)企业购买系统时,创建一个企业账号,这个企业账号绑定的手机号码为公司实际控制人的手机号码。该手机号码必要时可以解绑(例如公司实际控制人变更),由于该功能触发频率很低,因此不需要在前端功能中实现,只需要在购买协议中写明,“购买企业可以通过书面方式提出企业账号手机号码绑定变更需求”即可。

(2)在部署和培训阶段,可指导企业账号持有人创建一个或多个管理员账号,该账号一般授权给行政总监或人力资源总监,后续配置即由管理员账号进行。

(3)管理员账号持有人需要接受系统培训,掌握部门创建、角色创建、功能和数据权限分配等基本操作。管理员所有操作都必须记录在案,供企业账号持有人监督,且管理员操作触发异常行为规则(如大量分配高等级权限等)时,系统会通过短信方式通知到企业账号持有人,确保企业账号对管理员的全方位掌控。

(4)企业账号可随时将管理员账号禁用或设定为离职,但管理员账号不可对企业账号进行任何配置或操作。

(5)企业账号默认拥有所有权限。

2. 功能权限和数据权限分离

功能权限,定义为可见、可以操作的功能范围。例如某一部分菜单,或者某个页面里的各种操作。

数据权限,定义为若干个数据类型里的具体可见范围,例如“客户”就是一个数据类型,它的权限举例如“无权限”、“我的客户”、“我所在部门的客户”、“我所在部门及下级部门的客户”。

通过功能权限和数据权限的分离,我们可以做到以下场景:需要开拓和维护客户的角色集合,都可以拥有“客户”这个菜单的权限,但不同的角色进入“客户”菜单的列表时,看到的客户范围各不相同,极端情况是看不到任何客户。且不同角色在同一个客户页面上,能进行的操作也不同,例如有的角色可以新建客户,有的却不行,这就要由功能权限来控制。

可见,通过功能权限和数据权限的分离和配合,我们在具体的权限分配上有了非常大的弹性,且在技术层面的后台系统的设计上,也非常合理、清晰。

而在具体设计上,需要保证以下4点:

  1. 正确区分功能和数据,入口性和操作性的都应该归类为功能
  2. 正确对数据进行分类,避免存在分类后的某些数据存在交集
  3. 数据分类到多细的颗粒度,需要由行业特性决定
  4. 数据权限区分为查看、编辑和删除

示例图如下,由于涉及具体产品,对某些文字进行了打码:

面向中小企业SaaS的权限管理系统面向中小企业SaaS的权限管理系统

3、部门和角色分离

部门的定义,自然就是公司行政组织架构下的部门。

在本设计方案中,角色等同于职位,而在许多大型的SaaS系统中,为了更大的灵活性,往往会把角色和职位分开,但根据我们的判断,对于中小企业,设定角色一个就够了,职位当然还存在,但仅仅是一个不涉及权限管理的文本title了。

以一个销售公司来说,角色可以包括:“渠道专员”、“渠道总监”、“销售专员”、“销售经理”、“总经理”等等。

所谓的部门和角色分开,就是不同的部门可以有相同的角色,例如如果有渠道一部、渠道二部,则这两个渠道部的员工的角色都可以设定为“渠道专员”,这两个部门的管理者都可以设定为“渠道经理”。再配合功能和数据权限,则进一步配置“渠道专员”具有“渠道”菜单的功能权限,其能够查看的渠道数据权限范围则仅为“我的”,而“渠道经理”同样具有“渠道”菜单的功能权限,但其能够查看的渠道数据权限的范围则扩大为“部门”。

具体设计上:

  1. 最大部门即为公司
  2. 管理员账号和普通账号均可禁用或设置为离职
  3. 不同部门可以配置相同角色
  4. 相同角色的功能权限和数据权限是一样的
面向中小企业SaaS的权限管理系统

4. 权限系统和其他功能设计的关系

总结完权限系统三个核心的基本原则后,我们还需要指出一点:权限系统的设计方案,在整个系统中绝不是孤立的,它能否实现设计目标,并和整个系统完美配合,还需要做到以下几点:

首先,菜单和功能的设计,必须是最小颗粒度,否则就和数据权限产生冲突。例如:我们只需要一个“客户”菜单即可,不同角色在“客户”菜单里能干什么事情,由功能权限和数据权限配合进行控制,但切不可出现“我的客户”+“全部客户”两个菜单,这明显和数据权限有根本冲突,且也是一种不优美、不合理、扩展性差的设计。

其次,数据的分类,必须符合业务需求,且划分合理。有些数据都是公开的可以不归入数据权限进行管理,所有角色默认都有即可;有些数据需要进一步细分,例如同样以“客户”举例,在某些公司的业务规则中,就需要将客户的基本信息和联系信息分开控制,管理层可以看客户基本信息,但只有客户负责人才可以看联系信息,这种情况就需要将客户的数据权限分为“客户基本信息”和“客户联系信息”两个。

最后,权限变更的记录和所有账号的行为轨迹记录一样重要。权限系统本质是进行权力的限制,没有监管的权力必定是会失控的。在出现问题的时候,必须同时配合权限变更的记录、角色变更的记录和账号的行为轨迹记录进行追责和存证,确保维护企业的合法权益。

总结

在合理设计的前提下,权限系统也并非越复杂越好。只有符合目标客户需求并具备最大弹性的权限系统,才是最好的。

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


作为PM,你居然不知道Axure这10种非交互功能?

蓝蓝设计的小编

提到Axure,这可是绝大多数PM童鞋靠着吃饭的家伙事儿。Axure被很多人定义为一个以交互见长的原型设计工具。很多初入坑甚至入坑甚久的PM为画出炫酷的原型挖空了心思。我想这对Axure的初衷一定是有误解。

如何制作交互组件库

用心设计

什么是组件库?

就是类似axure左侧栏的这一坨标准控件,方便直接拖拽使用。

如何制作交互组件库

日历

链接

个人资料

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

存档