<span id="ubbei"><video id="ubbei"></video></span>
<span id="ubbei"></span>
<span id="ubbei"><video id="ubbei"></video></span>
<strike id="ubbei"><video id="ubbei"></video></strike><th id="ubbei"></th>
<span id="ubbei"><video id="ubbei"></video></span><span id="ubbei"></span><span id="ubbei"><video id="ubbei"></video></span>
<th id="ubbei"><video id="ubbei"><span id="ubbei"></span></video></th>
<span id="ubbei"></span>
<th id="ubbei"><video id="ubbei"><span id="ubbei"></span></video></th><strike id="ubbei"><dl id="ubbei"><ruby id="ubbei"></ruby></dl></strike>
<span id="ubbei"></span>
<th id="ubbei"></th>
<span id="ubbei"></span>
<th id="ubbei"></th>
<span id="ubbei"></span>
<span id="ubbei"></span>
<span id="ubbei"></span>
<span id="ubbei"><video id="ubbei"><strike id="ubbei"></strike></video></span>
<strike id="ubbei"><video id="ubbei"></video></strike>

  • <output id="ubbei"></output>
          1. <li id="ubbei"><s id="ubbei"><strong id="ubbei"></strong></s></li>
          2. 交互设计中的“所见即所得”原则

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

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

            所见非所得

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

            ?#27809;?#20855;体的操作流程是:

            1 ?#32435;?上传照片;

            点击“上传?#35745;?#25353;钮,?#27809;?#21487;以选择?#32435;?#25110;者上传相册里的照片,框选合适的识别区域;

            2 系统识别并展示结果;

            系统会自动识别?#35745;?#20013;的地址信息,并且在输入框中展示,如果有识别错误的地方,?#27809;?#21487;以手动编辑修改;

            3 ?#27809;?#30830;认;

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

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

            1) 增加了?#27809;?#30340;学习成本;

            对于新?#27809;?#26469;说,产品A肯定更加容易上手。因为新?#27809;?#19968;进入这个页面,只能看到上传?#35745;?#30340;按钮,?#27809;?#26126;白了我首先要上传?#35745;?#20135;品B是直接一股脑的把所有选项展示出来,?#27809;?#19981;知道这些选项之间的联系和操作顺序。

            2) 阻断正常操作流程;

            给?#27809;?#23637;示了他们本不应该看到的元素,可能会阻断正常的操作流程。?#27809;?#22914;果还没上传?#35745;?#23601;点击“智能填写”按钮会直接报错,“所传?#38382;?#19981;能为空?#20445;没?#21738;里看懂这是什么意思。

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

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

            限制原则

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

            1)为什么要限制?

            因为多才要限制,多会带来哪些坏处?内容多,?#27809;?#22788;理不过来;选项多,?#27809;?#25361;花?#25628;郟?#26102;间多,优惠券没有有限期限制?#27809;?#25042;得用。

            2)限制什么?

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

            罔顾?#27809;?#30340;操作阶段,一股脑的把所有触点都提供给?#27809;А?#35774;计师倒是很省?#27169;?#20294;是?#27809;?#21364;会很糟?#27169;?#20182;们需要花时间去判断和分析每一个触点的作用以及它们之间可能存在的联系。这个工作应该由我们代劳,我们来分析?#27809;?#22788;于不同阶段所需要的功能触点。

            举个知乎的例子,知乎有一个“向知友提问”的功能。但是这个按钮只会在?#27809;?#28369;动搜索结果页3屏后才会出现,因为滑动了3屏,我们可以猜测?#27809;?#23545;当前的搜索结果不满意,引?#21152;没?#21435;提问。

            当然限制原则不仅仅是限制交互触点,还可以应用到产品逻辑中,帮助?#27809;?#35299;决很多问题。我曾经遇到过一个场景,公司上线了一款优惠券,?#27809;?#28857;击“立即领取”按钮即可领取。但是有些?#27809;?#20250;被风控判定为了风险等级过高,导致领取失败。对于这个报错文案,我们改了好几版,但是?#30475;?#37117;会收到?#27809;?#30340;投诉。我们无法直接告诉?#27809;В?#20320;是因为风险等级过高导致无法领取,因为?#27809;?#39118;险等级过高是因为开通了某项业务。当时开通的时候,我们并未告知开通后会被判定为高风险?#27809;А?#25152;以为了不必要的麻?#24120;?#26368;好的办法就是进?#20449;?#26029;前置,如果判断?#27809;?#20026;高风险?#27809;?#37027;么就直接不展示该优惠券。

            就近原则

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

            1) 位置就近

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

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

            2)形式就近

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

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

            总结

            以上就是我对交互设计中“所见即所得”原则的总结和分析,如果你有不同的意见和看法,?#38431;?#30041;言或者加群?#33268;邸?/p>

            微信公众号: 王M争

            我来评几句
            登录后评论

            已发表评论数()

            相关站点

            +订阅
            ?#35753;?#25991;章
            陕西高频十一选五 老快3下载安装官方网站 3d青海快3走势图下载 江苏快三购彩计划表 竞猜的app 浙江地方彩票开奖查询 山东十一选五开奖来彩彩票 真人斗地主2所有版本 新强福利彩票18选7开 pc蛋蛋2018最稳定算法 31选7走势图福建省31体彩走势图 搜索香港六合彩官方网 体彩山西十一选五走势图贴吧 0304赛季意甲 网易彩票送迅雷会员 足球彩票任选9场胜负