聊点交互设计

虽然我不是专业前端,但是前端的专业程度应该已经超过了很多专业的前端,第一,我有扎实的计算机基础(在后端侵淫了十年),第二,良好的交互设计感以及对美好事物的追求塑造了我对前端交互的独特感受。当然前端的设计不仅仅是指交互设计,也有很重要的平面设计成分,但是作为一个前端,交互设计是首要应该掌握的,交互的好坏直接反应了前端程序的易用程度,甚至一定程度上决定了整个程序的用户体验和口碑,比如说黄渤虽然长得不帅,但是演技超群,有修养有内涵,一样可以成为顶流明星,而前端的美感部分可以完全交给设计师,这也从侧面反应了一个事实,大部分设计师只擅长平面设计。

交互的基本组成结构

一个完整的交互包含触发交互的对象、交互规则、响应反馈以及以前三者为基础建立的循环模式。

交互对象很好理解,就是触发交互的元素,也可以称之为触发器,可以是一个虚拟按钮,一个实体按键等等。

交互规则就是隐式或显式指导交互发生作用的规则。

响应反馈是指通过某种用户能理解的方式告知交互的规则和结果。

循环模式就是一种或多种交互组合、循环以最终达成交互目标而形成的操作模式。

交互体现的是细节

交互体现的是人与产品的互动,人和产品的互动往往又来自于各种各样的细节。

细节就是在有限的条件下,利用有限的空间、时间、规则来帮助用户完成和产品的互动,好的细节就是让用户高效、愉悦得完成互动。

也就是一个个细节的组合和积累整体完成了产品使用体验的表达,进而可以得出优秀的产品使用体验,必然包含无数个优秀的细节设计,细节就是本质,是评价产品使用优劣的标准。

设计触发器的基本原则

任何交互的开始都始于一个触发器,用户要使用一个触发器必然是为了达成某种目的,因此交互设计也自然开始于对用户需求的理解:用户想要做什么、什么时候想做,有多么频繁,达成目的之后用户又要去做什么,以此往复。

对用户需求的洞察就是对用户使用交互场景的洞察,场景又决定了触发器在什么时候、什么地方以什么样的形式出现,那么触发器的在场景中的辨识是交互设计首先要解决的问题。

触发器设计的第一个原则:必须让用户在使用场景下能认出来

我多年的职业生涯中,经常能听到用户对使用某个产品的吐槽:这谁能看出来是个按钮。类似的吐槽反映出来就是触发器设计的辨识度是有问题的。

触发器设计的第二个原则:保证相同的触发器每次都触发相同的动作

这一原则保证了用户在使用的过程中能对触发器的反馈逐渐形成准确的心智模型,如果违反了这一原则,用户可能会疑惑甚至被迫区分不同的场景才能准确完成交互的目的,难以形成习惯。

触发器设计的第三个原则:提前展示触发器交互的关键数据

在触发器被启动之前应该让用户知道其包含的关键信息,提醒用户是否有必要启动触发器,因而触发器需要提前预判用户可能关注有价值信息是什么,比如打开邮件的按钮会提醒用户有多少新邮件,让用户决定是否有必要打开。对于前端设计来说,一般触发器常常会有多种状态可以用来展示关键信息:

默认状态

表示不活动的状态

活动状态

后台有活动,比如后台下载或更新

悬停状态

鼠标或手势放上去之后给出对应提示,比如图片元素的 alt 提示

鼠标单击进行中

在启动触发器的时候展示信息

触发器设计的第四个原则:不要破坏视觉使用情景

这个原则是指触发器的设计应符合用户期待,如果一个触发器被设计成按钮,就应该具有按钮的形态和特征,能符合用户对按钮的基本认知。

触发器设计的第五个原则:用得越多的触发器越要引人注目

多数人经常要使用的,应该最引人注目;少数人有时会用的,应该容易注意到;极少数人常用的,应该通过搜索找到。

设计交互规则的最佳实践

交互过程要保持概念统一

如果一个名字或动词多次出现在交互过程中,要始终保持它们含义的一致性,如果有相近的词出现,要把它们进行合并统一。

如果可能,不要让用户从零开始

如果技术手段不受限制,不要让用户从零开始进行操作,让用户从其结束的重新开始,充分利用收集到用户数据来辅助用户完成操作。

如果一个事情非常复杂,帮助用户尽可能把复杂的事情都做了,或者把绝对的控制权交给用户

斯勒复杂性守恒定律:所有活动都有内在的复杂性,超过了某个临界点,简化是不可能的。既然如此,唯一的问题就是如何对待复杂性。要么让系统来处理,不让用户介入;要么让用户来处理,把更多的决定权(包括控制权)交给用户。

如果可能,尽量提供有限的选项,如果不能,提供聪明的默认的选项

好的交互始终让用户尽量少做选择,如果难以避免,尽量替用户考虑,能够提供多种聪明的默认选项,此时默认选项要能够满足大部分人的需求。

预防错误,或者错误发生之后可以引导用户去解决

好的交互应该可以防止用户犯错,或者出错时可以事先预料到,并且能提供引导来帮助用户消除犯错的焦虑。

三月沙 wechat
扫描关注 wecatch 的公众号