这些体验设计中易被忽略的细节，你都知道吗？
前几天我在使用「潮汐」APP的时候，发现了一个很有意思的设计。当我在APP中设置好第二天的闹钟，然后准备刷会儿新闻睡觉的时候，很自然的就唤起iOS的任务管理界面准备切换到微信，我发现「潮汐」APP的界面有了如下图的变化。
「潮汐」本身会在你进入睡眠的前一段时间播放白噪音助眠，当然如果你关闭退出应用，他也就无法继续播放并且也无法执行第二天的唤醒操作了。那我们知道，在用户唤起iOS的任务管理界面时，其中有一种操作可能就是上滑退出应用，所以「潮汐」在这个时候提醒用户，可以有效的避免用户因误操作所带来的严重后果（第二天的闹钟没响）。
随后，我也带着这个发现请教了iOS开发的小伙伴，确定了在iOS系统中，唤起任务管理界面时，可以对应用界面做出适当的调整。
通过这个例子，我发现有一些小细节，在平时的设计工作中是很容易被我们忽略掉的。下面就是我询问了几位设计师小伙伴，并结合自己平时工作的，整理出来的7点容易被我们忽略的小细节。
目录1、音量提示
2、截图提示
3、无障碍设计
4、图片边界
5、iOS 任务管理器界面
6、iOS 3D Touch
7、iOS 小组件(widget)
音量提示当用户沉浸在Feed流中观看短视频并进行音量调节时，iOS默认的音量条会对内容遮挡影响观看体验。我们可以通过对音量提示条的优化来避免这一点，如下图：
西瓜视频在3.0的更新中，就标准屏和全面屏分别进行了音量条的优化。标准屏的音量条移至屏幕上方状态栏的位置；全面屏的则移至屏幕左上方时间的位置。这一优化大大降低了音量条对用户观看视频的影响。
截图提示用户在使用产品的过程中，截图的目的无外乎以下几种：分享给他人、反馈产品问题、留存备份。那么除了留存备份是因为截图直接保存进相册，不需要我们多做什么，其余两个可能的行为我们都可以帮助用户缩短操作路径。以往的操作路径是用户截图之后，进入相应的好友列表或问题反馈页面，然后从手机相册中找到刚才截的那张图，再发送。而我们可以通过对用户截图操作的监听，在他们截图之后，给予一个分享或是反馈问题的入口，直接帮助他们完成操作。既缩短了操作路径，也会让用户觉得我们的产品很贴心。如下图：
滴滴在截图之后，会有「反馈问题」、「联系客服」和「分享页面」的三个快捷入口，点击这些入口可以直达相应的界面；飞猪在截图之后，同样会有「好友分享」和「问题反馈」这些快捷入口。
说到这里，可能会有小伙伴提出疑问，如果用户只是想留存备份，那这些提示会不会打扰到用户呢？其实不然，这些提示都是以非模态弹窗的形式出现，不会影响到用户进行其他操作，而且如果不去理会这些提示，过一段时间它也会自己消失掉。
无障碍设计由于越来越多的残疾人、老人成为互联网产品用户中的一员，无障碍设计也就成为我们在设计产品时不可或缺的一环。如下图：
高德地图在地图设置中，有一个「色盲模式」。当开启色盲模式之后，表示实时路况的颜色就由绿黄橙红变成了紫黄棕黑，可以有效帮助色盲或是色弱的用户接收路况的拥堵信息。
图片边界我们在做设计稿时，自然会选择一些精美的高质量图片作为配图。但在实际应用中，某些需要用户自己上传图片的模块，比如动态、头像等，我们就无法把控了。很有可能用户上传的图片背景与界面背景一致，这就会导致阅读这些图片信息的用户无法辨别图片的边界，从而认为它们与背景对比清晰的图片有所差异。如下图：
其实我们完全可以人为的增加一个图片边界，如下图：
爱奇艺的泡泡中，用户上传的图片都被加上了灰色的边框，那些背景与界面一致的图片就很容易辨别了，并且看起来它们与背景对比清晰的图片并无差异。
iOS 任务管理器界面正如本文最前面提到的，iOS系统中，唤起任务管理器的时候，页面的状态变化也是经常被我们所忽略的。当用户唤起任务管理器时，他可能是要切换到其他应用或者是退出某个应用，我们就可以提示他退出应用会中止当前正在进行的某项重要任务，以避免用户误操作造成不必要的损失。此外，某些隐私性很强的应用，比如理财类，医疗健康类，相册类等也可以在唤起任务管理器的时候，将界面做模糊处理，以防隐私通过这个状态泄露。如下图：
蚂蚁财富作为一款理财类的应用，才唤起任务管理器的时候，选择将界面做模糊处理，可以有效避免用户的资产信息遭到泄露。而前文提到过的潮汐，则是提示用户退出应用的所造成影响。
iOS 3D Touch说到iOS系统，还有个不得不提的3D Touch。因为3D Touch操作的冷门性，导致很多用户甚至是设计师都快忘了iOS还有这么一个快捷操作的入口。在某些需要快捷操作的场景下，比如扫码、付款等，如果打开APP操作会需要8-10秒，而使用3D Touch则会将时间缩减至2-3秒(3D Touch可以直接跳过启动广告)。所以，在这些场景中它的应用性是很强的。正因为如此，3D Touch操作列表也是我们设计时不容忽视的一块。如下图：
美团外卖的3D Touch仅保持了默认的分享操作，大众点评的则增加了扫一扫、付款码、查商户等高频操作。此外，手机天猫的3D Touch列表还支持个性化定制，让用户根据自己的操作习惯来设置属于自己的3D Touch菜单。
iOS 小组件(widget)在上一个3D Touch的大众点评案例中，我们可以看到有一块内容是叫小组件。那么小组件的作用也可以看作是一些快捷操作的入口，当然，小组件还有另一种呈现方式——在主屏幕的时候向右滑动，进入小组件列表。如下图：
除了快捷操作，我们还可以直接在小组件中浏览信息，比如天气、证券等。我们可以将小组件看成是一个APP的mini模式，把最重要核心的功能置于此处。
总结作为设计师，我们在设计时除了考虑界面的基本状态外，同时还应该考虑到各种各样的突发、异常状态；除了考虑普通用户的体验外，同时还应该考虑到特殊用户的体验；除了考虑常规的操作外，同时还应该考虑到系统平台提供的便捷操作。以上7点仅仅是易被忽略的细节中的一小部分，大家在平时可以将看到的那些——有趣的、差异化的、令人惊喜的细节记录下来，不经意间可能就会对我们的产品设计提供很大的帮助。
参考
这些基本的提升产品体验知识你应该知道
西瓜视频 3.0改版总结
被我们忽略的无障碍设计(色盲篇)
海盐社（公众号）
作者： 海舟
绛旓細鏈夎繃瀹跺涵瑁呬慨缁忛獙鐨勬湅鍙嬩滑閮界煡閬擄紝鍘ㄦ埧鏄楁椂璐瑰姏銆佷环鏍间笉鑿茬殑瑁呬慨澶уご銆傚鏋滃墠鏈熶笉鑰冭檻鍛ㄥ埌锛屾柦宸ュ悗鏈熶細甯︽潵寰堝楹荤儲銆傞偅涔堝帹鎴胯淇璁捐瑕佺偣鏄粈涔?鍘ㄦ埧瑁呬慨鏄撹蹇界暐鐨勭粏鑺鏈変粈涔?浠婂ぉ灏忕紪灏卞拰澶у浠嬬粛涓涓嬨備竴銆佸帹鎴胯淇璁¤鐐1銆佽璁＄悊蹇垫槸杩芥眰鍞編杩樻槸鍔熻兘鍏堣?鍘ㄦ埧鏈涓昏鐨勫姛鑳芥槸涓虹儳鑿滃仛楗彁渚涙柟渚匡紝搴...
绛旓細瀹㈡埧鐨璁捐鏄綋鐜伴厭搴椾负瀹汉纭欢鏈嶅姟鏈閲嶈鐨勫湴鏂癸紝鍙互浼犻掗厭搴楃殑鏈嶅姟鐞嗗康銆佸綋鍦版枃鍖栫壒鑹层佺敱鎴夸环浣撶幇鐨勫鎴挎。娆°佷汉浣撳姛瀛︺佸湴姣佸绾哥殑閫夋嫨銆佸鍏枫佺伅鍏风殑璁捐鎴栭夋嫨銆佺獥甯樼殑閫夋嫨銆佺伅鍏夌殑閰嶇疆銆佹磥鍏风殑閫夋嫨绛夌瓑閮芥湁寰堝鍊煎緱娉ㄦ剰鐨勭粏鑺銆傛垜浠庝簨閰掑簵璁捐20骞达紝鏈変竴浜涘皬缁忛獙鍒嗕韩涓涓嬶細涓銆佸叧浜庡叆鍙ｇ殑閫氶亾 涓鑸...
绛旓細鍋囧闃叉按楂樺害鍋氬埌浜1.8绫筹紝閭ｄ箞灏变唬琛ㄧ潃鏅哄晢绋庤浜や簡銆傝交鏉炬槗绛戜辅寮鏀惧姙鍏晥鏋 鍔炲叕瀹よ淇粠寮宸ヨ繘鍦哄啀鍒版柦宸ュ畬姣曪紝闇瑕佹敞鎰忓拰鍏虫敞鐨勫湴鏂规湁寰堝锛岃淇潗鏂欏拰鏂藉伐鍋氭硶闇瑕佸仛鍒板眰灞傛妸鍏筹紝鏉滅粷涓鍒囨綔鍦ㄩ闄┿備互涓婃槸鍔炲叕瀹よ淇璁捐涓姣旇緝瀹规槗蹇借鐨鍏釜缁嗚妭鐨勫叏閮ㄥ唴瀹广
绛旓細璇村埌璁捐锛鏃犺鏄蒋浠惰繕鏄‖浠朵笂闈紝姣棤鐤戦棶鑻规灉瀵逛簬缁嗚妭涓婇潰鐨勬妸鎺у彲浠ヨ鏃犱汉鑳戒笌涔嬪尮鏁屻傚湪杩囧幓鐨勫嚑鍗佸勾閲岋紝鑻规灉瀵圭粏鑺傜殑娉ㄩ噸鍙皳鏈夊彛鐨嗙锛屽緢澶氱粏鑺備笂闈㈢殑璁捐鍦ㄦ棤浜烘寚鍑虹殑鎯呭喌涓嬪緢澶氭秷璐硅呴兘娌℃湁娉ㄦ剰鍒般備护浜烘儕璁剁殑鏄紝寰堝娉ㄩ噸缁嗚妭鐨 iPhone 鍜 Mac 鐨勫繝瀹炴嫢瓒歌呬篃甯稿父浼蹇界暐鎺夎嫻鏋滆璁′笂闈㈢殑涓浜...
绛旓細涓涓畬鏁寸殑鎴峰瀷鍩烘湰涓婂寘鎷叚澶у熀鏈姛鑳界┖闂达細鐜勫叧銆佸鍘呫侀鍘呫佸帹鎴裤佸崼鐢熼棿銆佸崸瀹ゃ傛瘡涓┖闂存壙杞界潃涓嶅悓鐨勮捣灞呰姹傘傞偅涔堢湅鎴挎椂锛屽父琚喘鎴胯呬滑蹇界暐鐨瑕佺礌閮芥湁鍝簺鍛紵1銆佸叆鎴风巹鍏崇巹鍏充竴鑸綅浜庤繘闂ㄧ紦鍐插尯锛岃櫧鐒跺尯鍩熻緝灏忎絾浣滅敤寰堝ぇ銆傞鍏堜汉浠粠灞嬪杩涘叆瀹ゅ唴瑕缁忓巻鍏夌嚎鐢卞急鍒板己鐨勮繃绋嬶紝鐜勫叧鍙互缁欎汉涓涓畝鐭...
绛旓細鎸夐挳锛 鍦ㄧ幇瀹炰腑鎸変竴涓寜閽細绔嬪嵆鏈夋寜涓嬬姸鎬侊紝姣斿涓嬪浘銆傚湪浜烘満浜や簰涓紝褰撶敤鎴峰湪灞忓箷涓婃寜涓嬩竴涓寜閽垨閾炬帴鏃讹紝涔熼渶瑕佹湁鐘舵佺殑鏀瑰彉锛岃鐢ㄦ埛鐭ラ亾鐣岄潰宸茬粡鎺ユ敹鍒颁粬鐨勬搷浣滀簡锛岃涓嬪浘銆傚０闊虫槸浜轰綋鎰熷畼涓緢閲嶈鐨勭粍鎴愰儴鍒嗭紝涔熷簲璇ユ槸浜у搧鐢ㄦ埛浣撻獙涓殑涓涓柟闈紝浣嗗緢瀹规槗琚鏈夋剰鏃犳剰鐨蹇界暐銆傚父瑙佷簬娓告垙璁捐涓...
绛旓細瀹ゅ唴鐢查啗瓒呮爣绛変簬姣忓ぉ閮藉湪鍠濇瘨鑽紝鐜板湪浣犺繕瑙夊緱鑷繁鐨勫鐪熺殑浠ｈ〃缁濆瀹夊叏鍚楋紵闈㈠瀹惰姹℃煋鐨勫▉鑳侊紝鎴戜滑鍦ㄩ夎喘瀹惰寤烘潗鍙婅緟鏂欐椂锛屽張璇ユ敞鎰忎粈涔堝憿锛1銆佽鍑嗗搧鐗 閫夋嫨鐪熸鐨勫叿鏈夋牳蹇冪鎶鐨勭幆淇濆ぇ鐗岋紝渚嬪鈥滃缇庡畨鈥濈幆淇濇潗鏂欏搧鐗岋紝鏄浗鍐呴瀹跺湪瑁呴グ璁捐杩囩▼涓粠涓绘潗鑷宠緟鏉愶紝鍏ㄧ郴鍒椾娇鐢ㄧ幆淇濇柦宸ユ潗鏂欙紝鎷ユ湁鐢熺墿璐ㄨ兌...
绛旓細宓屽叆寮忚。鏌滄垨鍏朵粬涓浜涘祵鍏ュ浣撶殑鏌滃瓙濂藉涓嶅皯锛屾棦澧炲ぇ浜嗘煖瀛愬唴閮ㄧ殑绌洪棿锛屽張鏄惧緱鏌滀綋绠娲併佸ぇ鏂广傚簲璇ユ敞鎰忕殑鏄紝瀹夋斁鏌滃瓙鐨勫湴闈㈠拰鏌滀晶澧欎綋蹇呴』姘村钩鍜屽瀭鐩淬傚惁鍒欙紝瀹夎鏌滃瓙鐨勬椂鍊欙紝寰堥毦澶勭悊缂濋殭锛屽媺寮哄～琛ョ紳闅欙紝瑙嗚灏辨湁鎵洸锛屾樉寰楀緢绮楃硻銆佸伐鑹轰笉绮剧粏锛屾晥鏋滃氨浼氬ぇ鎵撴姌鎵ｏ紝涓缁勬槀璐电殑澹佹煖锛屽氨浼氳杩欎簺灏缁嗚妭姣佹帀...
绛旓細閫夋埧瀛愮殑鏃跺欎汉浠線寰浼氭兂鍒扮湅鐪嬮姘达紝鑰屽湪鎴垮瓙鐨勫悗鏈熻淇椂寰堝浜哄嵈寰堝鏄撳皢鍏惰窇鍦ㄨ剳鍚庯紝浠婂ぉ鎴戜滑灏辨潵璇磋瑁呬慨涓槗琚拷瑙嗙殑浜斿椋庢按銆1.搴婂ご鐣欑┖锛氭墍璋撳簥澶寸暀绌烘槸鎸囨病鏈夎儗灞辨垨闈犲北鐨勬剰鎬濓紝鍦ㄨ澶氬搴竷灞涓紝缁忓父鐪嬪埌杩欎竴鐜拌薄銆傚簥澶寸暀绌猴紝鏄撶己涔忓畨鍏ㄦ劅锛屼細鏈変笉濉屽疄鐨勬劅瑙夈備粠瀹跺眳椋庢按甯冨眬涓潵鍒嗘瀽锛...
绛旓細涓夛紝绌鸿皟鍑洪鍙ｅ湪杩欎釜闃舵锛屼腑澶┖璋冧篃鏄姙鍏鐨勫繀闇鍝佷箣涓锛岃繖涔熸槸璁稿鍏朵粬瑁呴グ鍏徃鍦ㄨ楗拌繃绋嬩腑缁忓父蹇界暐鐨闂銆備腑澶┖璋冪殑鍑洪鍙ｄ篃鏄鍐璁捐甯堝彲浠ヨ交鏄撳拷鐣ョ殑灏缁嗚妭涔嬩竴銆備粬浠笉鐭ラ亾杩欎簺鎯呭喌鍙湁鍦ㄥ簲鐢ㄧ▼搴忓簲鐢ㄥ悗鎵嶈兘瀹炵幇銆備緥濡傦紝瀹剁敤涓ぎ绌鸿皟鏈4涓嚭椋庡彛銆 杩欏洓涓嚭椋庡彛鍦ㄥ摢閲屽惞锛 璁稿浜哄彧鏈夊湪椤圭洰琚...
