触碰指尖的世界-解析与时俱进的UI设计模式（随笔）

触碰指尖的世界

——解析与时俱进的UI设计模式

 

这是我用过的时间相对比较长的手机，第一个诺基亚2690当时买的时候430块人民币，是性价比相对比较高的一款了，支持拍照、音乐、小说、内存卡拓展，等一系列功能，现在感觉好像已经过了半个世纪的赶脚，手机的更新换代速递太快了，而且越来越快。诺基亚也算是一个时代的见证了，当初功能机主要是树形菜单结构，配合物理按键有固定的操作模式，一层层的进入，一层层的退出，只要掌握规律还是可以相对快速的操作，印象比较深的是到e61的时候全键盘的就比较流行了（早期的9000侧滑全键盘），但操作起来更复杂了，到5800就出现真正意义的触屏了，而到07年，08年Android、iPhone的崛起，开启了智能机的时代，手机的功能开始模块化，每一个功能开始对应一个独立的app，电话、短信、拍照等，开始有更多的第三方的应用制造商来丰富完善构建整个生态圈。这里我先用的Android后用的iPhone，而实际上iPhone是早于Android手机问世的。

 

03年Android公司成立，05.8.17google收购，07.11发布Android系统，08年第一部Android手机 宏达生产的G1

 

07.1.9发布系统iPhone os，10.6.7WWDC大会上改为ios  07年第一部iPhone

 

随着智能手机的普及，当个应用集合的功能也越来越多，如何合理的组织功能架构，用户路径便成为一个必要的问题，而随着大量的应用实践也逐步形成一些固化的处理方式，而像我们所熟知的导航模式,(相对比较早期，又发展了一些新的)

跳板式、列表菜单式、选项卡式、陈列馆式、仪表式、隐喻式、超级菜单式，树形、抽屉导航，九宫格，轮盘式，行内扩展等

 

什么是UI设计模式？

UI设计模式是一个能够解决日常痛点并能够复用的解决方式

从定义来看，UI设计模式定义最终的落脚点是一种解决方式，所以它不是一种元素素材，是在产品设计中能够解决用户问题的一种规范化的最佳实践，他不是产品的功能特性，他是通过有效的实践归纳抽离出的一种符合相应场景化下的合理处理方式。它受制于不同的应用场景、硬件条件、系统环境等不同的外在条件，但又有共性的要素和准则。

 

如何应用UI模式？

当我们想要复用一种UI设计，通常我们首先会想到的是去考虑这种UI模式的适用条件，什么条件下可用，什么情况下不可用，可能包括产品架构，页面布局，技术限制、设备条件，是不是有其他的模式可用等方面来考虑UI模式的适用性。这一块可以称作为我们对UI模式用法的考虑，也是对模式本身的理解吃透；而除此之外，我们还要考虑其他的方面：对产品的质问和思考，我们为什么要使用UI模式，使用它的目的是什么？能不能用最简短的话描述出来，这就考验你对需求的理解是否透彻，能不能抓住需求的核心点。其次可以思考，类似的场景下，别人的解决方案是什么？他是如何处理导航的布局，用户的操作路径，页面的布局、信息架构等等相关的内容，来横向比较是否有更好的方案，也验证UI模式是否合适，而这里需要考虑的是避免应为差异而差异。此外在设计中还需要考虑，如何呈现，是一套完整的流程还是简短的描述来完成你概念想法的表达，因情况而异。

  

UI设计模式的不断发展和完善是随着智能手机不断发展，技术的不断进步而不断提升的，笔者使用的手机是从塞班手机诺基亚2690到小米2到iphone6不断感受不同系统的差异与变化，同时也切实经历指尖世界的诸多变迁，这里主要关注于最新的UI设计模式，由于智能手机的快速普及，功能机逐步退出了历史的舞台就不再多赘述，而智能手机发展日新月异，各类的app层出不穷，伴随着解决不同应用场景问题的UI模式也不断被创造，被验证，引起风潮与流行。

 

印象最深的是当年path引起的风潮，抽屉导航、悬浮菜单，都大受追捧

 

大多数的UI设计模式的核心是伴随着移动设备的发展，而这种变革通常会推动交互与体验的革新。

 

大屏的特性和限制条件，衍生出许多手势行为与相应的动效来完善整体的操作体验圈。

 

手势操作行为的大量普及，随着大屏的普及，越来越多的手势行为应用于设计当中，不再仅仅限于点击、长按、滑动事件，多指操作，组合行为也被越来越多的应用于设计当中。

 

 

最先开始接触手势设计还是从Android系统开始，刚开始做手机操作系统，首先就是梳理Android的设计规范，手势操作行为，点触区域的规范要求，也是其中重要的一部分，在不到两年的时间里，手势行为更普及且更多了，不知不觉中右滑返回，轻触标题栏回到顶部已成为大屏手机的标配操作行为了，这些都是基于特定场景用户痛点的解决而产生的，继而得到认同与普及。

 

动效设计在app中得到大量应用，动效会给产品带来活力，合理的动效会给用户带来清晰明显的逻辑指引，形成模拟现实的真实感，可以有效的帮助用户理解界面逻辑，增强沉浸体验，帮助提升产品的趣味性与粘性。

手势、动效与设计模式相结合，更能起到意想不到的效果，有更多的实现方式。

 

（真实动作、表层响应、元素响应、径向响应、视觉连贯、时序等等）

 

1. 先试用再注册，甚至无需注册，在这个工具类的应用都需要注册的时代，也有一部分应用开始朝另一个方向发展，轻量的是不需要注册就能看到相对整体的产品，让用户自己选择要不要深入，基本上大部分应用都能做到这一层级，包括我们自己的产品QQ彩票，而还有一些产品走了更多一步，比如抱抱，无需用户注册，在匿名社交领域这一块试行的相对较多，通常我们认知的社交产品都需要账号来记录我们的关系链、我们的沟通信息，就像微信这种，而以抱抱为代表的匿名社交，他们聚焦的是陌生人的匿名社交，不是说他们不需要账号体系去承载，而是弱化的处理，同时将用户的操作负担转化到产品本身来承担，大大降低操作门槛，一种可行的解决方案便是通过记录设备号来进行用户的区分，同时系统随机释放用户名来帮助用户塑造一套虚拟的帐户体系，来转嫁用户本身身份属性的相关要素，从而完成一系列的社交活动，有些游戏也同样有类似的模式，先试用再注册；当然不是所有的产品都试用这种模式，还是应该考虑具体的应用场景考虑是否需要注册；从pc时代延续过来注册信息已经有了很大的缩减，但仍是一个高成本的行为，即便你的应用必须要注册，也应该在适当的时候出现，降低用户内心的抵触感，同时可以将不太重要的信息拆分到具体的任务中来使用户逐步完善也是不错的思路。

   
   

2.社交账号登录，最大的好处便是可以一个账号走天下，减少输入成本以及记忆多账号的成本，可以有效的减少因用户懒得填写注册信息而带来的流失，同时也可以与自己社交平台的好友之间形成互动，很多人现在已经逐步适应了使用社交账户登录新应用，而且这也逐步成为趋势，但通常使用社交账号登录只是作为一种辅助登录方式，很多应用还是提供自主的登录体系，从用户角度来看部分注重隐私的用户对社交用户的安全性报以怀疑的态度，同时对某系较敏感的信息应用类型，用户不希望好友知道自己的使用情况，这种状态下自主帐户可能会是更好的选择，而目前不少授权应用后信息是默认关联分享的，这种隐私的曝光度就更大了，而对于平台而言更多的依赖第三方的平台，自主捍卫能力较差，自己的用户沉淀量少，所以针对不同的应用还需具体分析采用合适的模式才是最优的。

此外还有一类应用是不完全的授权登录，使用社交账号授权登录后还需要填写一系列的个人信息，这种是不符合用户预期，会很大程度的激发用户反感心理，导致用户直接放弃，所以有时候不要太心急，要光棍，索性就彻底点。

 

3.非重要严重场景下，非模态的提醒逐步取代弹层等打断式的操作行为，保证整体操作行为流畅，非打断，给用户很好的连续性体验。这种提示方式我们最常见的可能就是toast提示，一个黑色的带一定的透明度的条状或块状的提示，向抱抱进一步弱化在主体视觉区域的干扰直接在通知栏显示，通过颜色来提醒，更轻量；而这种方式在游戏中是最常见的，打怪掉血，掉金币属于类似行为，轻量但是足够给用户了解到必要的信息，不影响用户当前的操作行为，所以很多弹层的通知行为是根据场景进行降级处理，减少对用户的干扰。相对于非模态的提示信息，对话框显得更粗鲁，我们要做文明的使者。而对非模态的使用中当信息与界面功能存在明显相关性时，应尽量贴近并给予相应的关联指示，同时应在用户操作时消失，这也是这类通知信息的基本特征。

 

4.教育引导的实时性，复杂产品的教育引导不再是填鸭式的，更注重的是是在适当的时机给于适当的提示，轻量但不打断。在用户使用过程中针对可能出现的疑虑适时的给予解释，而非当用户对产品还没有一个直观的认知时，便强迫用户去理解记忆，降低用户的记忆成本，提升使用的愉悦感。

 

最好的引导是无需刻意的告知，让用户自己理解主动触发，就像张小龙举得例子，朋友圈的头像初期设置头像的用户很少，我们可能有很多方式去引导用户设置头像，比如初始时必须设置头像，或者设置任务体系，完成后有奖励等，但这些都是被动执行，不如让用户感知到不设置头像的不好之处，让用户主动内驱的去换头像远比被动的告知要高明的多，只是在聊天界面放出自己的头像一对比就会激发用户换头像的动力。当然这需要相对较高的设计能力与观察思考能力，在某些情况下可能并不适用，需要适当的去引导用户，但最差的方式便是一进入应用，就想要将一堆东西塞到用户大脑里，当用户对产品没有感知时变强硬的塞入信息，这对用户来说是非常容易激发反感情绪的，尤其是现在这种信息过载的时代，已形成本能抗性，基本上这些信息会被直接忽略掉，还会惹怒用户，适得其反。

 

5.图文社交，一种全新的社交玩法，区别于传统的操作流程，直接在摄像头的取景框内输入问你，拍照即发送，更专注于短平快的操作体验，更有代入感与沉浸感。

 

通常我们在处理这类信息时首先想到的是图片选择器的模式，这就是思维的惯性，这里又回到我们前面讲的如何使用UI模式的问题，我们首先要做用法考虑和产品叩问，真正的去理解需求，抓住核心才能打破思维定式，UI模式是用来激发想象的作为创作的基础，而不是思维的束缚，当然也要把我尺度不能为了差异而差异。

 

6.智能识别，通过用户输入的部分信息内容，从而给出相关联的信息，降低用户的输入操作成本，降低出错的概率。像通过银行卡不同银行的标识代码直接判断出发卡行，减少用户输入选择成本，同时可以极大的降低出错概率。类似的体验我们也可以在其他的领域感知到，比如智能搜索、输入法的自动补全、搜索地理位置的关键词匹配，虽然远离上有所差异，但给用户的体验上是类似，通过对比操作历史、热搜数据及数据类比，从而给出最佳的选择。

 

让产品替我们做的更多，好的设计应该是无感知的设计

 

7.纯手势操作，隐藏更多的操作按钮，通过手势来实现整体的操作，对于内容为主的沉浸式体验的场景有很好的帮助。Koalcat's Clear便是其中的代表。以符合用户预期的手势进行组合操作可以极大的提升操作效率，同时减少视觉干扰，当然在具体应用时需要考虑不同的场景，太多的手势行为也会增加用户的记忆负担。

 

8.允许撤销，属于允许用户试错型UI，先让用户去尝试，让其看到结果，再判断是不是想要的结果，可以回退。通常我们的操作行为是在操作执行前给用户提醒信息，需要用户去确认，其实相当于一种责任的转移，当用户不能预知自己的动作造成的后果时，或者当涉及一些专业领域而用户又很难理解的情况下这种误操作的可能性就会加大，这时允许用户试错可能会让用户感知更友好，对于不撞南墙不回头的用户，会有更多的防护；当然这个和文化习惯也有关系，以及用户的类型有关是谨慎型和冒险型的都有关联，还需针对具体的场景去对待，不能过度小心造成操作繁复，也不能过度豪放，造成严重后果。我们接触最多的撤销行为可能是微信的撤销，(微信的撤销和上面讲的撤销是两种不同的场景模式，我们来分析下，微信的撤销的差异性，首先在会话的场景里，撤销是单独的行为，诱发这种行为的是发言内容本身所引起，而非其他操作引发的，而前面讲的更多的是因为删除等行为可能会造成对结果认知不明确的情况下的应对措施，我们可以考虑下微信撤销的场景，1.信息发错人，所以想要撤销，2.信息涉密，不希望其他人留存，3.发出时有欠考虑，所以撤回；这里有个问题大家可以探讨下：为什么微信撤销后会发送一条“xxx撤回一条消息的通知”)对于绝大多数用户而言基 本不怎么需要，但在特殊场景角色下确是很有价值，不过这里吐槽下微信的撤销，撤销后还要显示给别人看我撤销了信息，同时手机端和PC端功能不同步，确实挺蛋疼的~

 

 

9.图文缩略，在社交产品中出现的较多，当有新的评论信息产生时，会将之前所发布的内容以缩略图的形式展现出来，可以快速的唤起用户之前的记忆，形成上下文的关联关系，可以更快捷的认知理解信息内容并作出相应的决策。

 

10.超大按钮，在越来越多的应用中得到应用，单一场景专注处理单一事件，不必跟用户很多的出口，可以让用户快速理解要进行的行为，超大按钮有更明确的引导性与聚焦作用。

 

11.全屏体验，为了有更好的阅读体验，越来越多的信息浏览型产品在用户进行信息阅读时最大化的释放屏幕空间，标题栏、通知栏、操作栏统统隐藏或取消掉，最大限度的提升用户的整体体验，加强代入管强化沉浸感，有些应用在适应大屏设备的操作体验上甚至将返回键搬至了屏幕的下方，虽然与常规的认知上有所差异，但从操作成本上确实有效的降低操作难度，极大的减少了屏幕遮挡行为，最大限度的提升阅读的舒适度。

 

12.标签场景，基于图片本身的信息挖掘的社交行为，使社交场景更具象，会带来更多的兴趣点，形成沟通交流的欲望。同时为信息内容创造了一种“增强现实”的体验。

 

13.阅后即焚，有效保护用户隐私的一种手段，“咔嚓”的一段宣传词“　与朋友分享神经质的犯二照片；　抓住大冒险惩罚的疯狂时刻；　匿名捉弄好闺蜜或好基友； 　按捺不住自信，秀一把热辣的身材；　辗转反侧的不眠之夜，给那个TA来一点重口味……　”目前的阅后即焚除了几秒后销毁图片外，同时也会控制系统禁用截屏功能，进一步降低泄密的风险。

 

当然外部拍摄就是另外的情况了，不过成本还是很高，也不是很好操作。

 

14.全幅图片，有效的清理界面冗余，将图片一个连着一个，从同到位，包含运营推广内容均采用统一的方式，核心信息处于图片智商，即达到有效利用空间的目的，又对阅读场景起到相辅相成的作用，用户在阅读时受到的干扰信息越少，沉浸感也就越高。

 

15.“多媒体”背景，URBR以地图作为信息承载的载体，能够帮助用户直接的认知位置与车辆信息之间关系，直观、生动，以更接近真实世界的感受帮助用户理解产品；节操精选以图片作为弹幕的载体，使评论内容与被评对象之间处于同一个环境中，形成更直接的对应关系，给用户更友好的体验，当然还有很多以其他媒体为载体的设计模式，根据不同的场景正逐步被挖掘~

 

优秀的艺术家借鉴，伟大的艺术家偷窃

 

“优秀的艺术家靠的是借鉴，但伟大的艺术家靠的是‘窃取’。”

——帕布罗·毕加索

 

 

像艺术家一样去“窃取”是什么意思？毕加索想告诉我们什么？

当你借东西的时候，你会打算将来还回去。至少你应该那么做。可是当你偷东西的时候，你就把偷来的东西据为己有了。毕加索的意思就是：让偷来的东西成为你自己的。

伟大的艺术家的“窃取”并不意味着他们单纯地复制别人的作品然后占为己有。这意味着在吸收了这个作品的精华和别人的灵感之后，他们就能够通过自己的创作和思考对任何素材进行重组，然后创造出真正属于他们自己的作品。

这跟“美第奇效应”( Medici effect)很有相似之处：在不同学科观点的条条交叉路上找到交叉点，然后将你的发现组合成一种对于你自己的领域而言是既新颖又独特的东西。

借鉴别人的想法，你需要将其分解开来，以弄清楚它们是如何结合在一起的，以及为何它们以此方式结合。你需要理解并吸收这些想法，这样才可让它们与你自身的观点融合。

 

解决用户的问题才是核心

 

当越来越多形形色色的UI模式呈现在我们面前，我们所需要记住的是，设计体验是不能生搬硬套的，只有充分的理解吸收，并在不同的场景中有效的混蛋并协调应用才能达到理想的效果。

 

未完待续。。。。。