首页

浅析用户体验四维度

纯纯

用户体验四维度的概念、价值以及相互之间的关系

用户体验,是用户在使用产品过程中建立起来的一种纯主观感受。

 

解读用户体验,可以有很多视角。本文提供一个以人为本的视角:用户体验四维度。具体如下。

 

HI X:Human Interface Experience,人与界面的交互体验。

HC X:Human Content Experience,人与内容的交互体验。

HH X:Human Human Experience,人与人的交互体验。

HB X:Human Brand Experience,人与品牌的交互体验。


用户体验四维度

 

 

01 四维度的概念

 

怎样判断一款产品有几个维度?这就要从四维度的概念说起。

 

1. HI X(人与界面的交互体验)

 

HI X 是指用户在浏览、阅读、操作界面过程中产生的主观感受。

 

HI X 既受信息架构、交互设计和UI设计的影响,也受根需求和功能架构的影响。主要依托手机和电脑的互联网产品,天然存在界面。所以,HI X 属于基础属性,所有产品都有。

 

2. HC X(人与内容的交互体验)

 

HC X 是指用户在消费内容时,内容本身带给用户的主观感受。

 

这里的内容,既包括衣服、鞋子等实体商品,也包括文章、图片、视频等虚拟内容。诸如淘宝、网易严选等电商产品,以及公众号、Instagram、抖音等 UGC 产品,都具备 HC X 属性。

 

3. HH X(人与人的交互体验)

 

HH X 是指用户与其他用户、产品工作人员沟通交流时产生的主观感受,或产品的社区氛围、沟通氛围带给用户的主观感受。

 

所以 HH X 有两层含义。第一层发生在用户与用户之间,是指当用户扎堆或沟通交流时,交流氛围、交流内容带给用户的主观感受。第二层发生在用户与产品工作人员之间,是指当产品依靠人力向用户提供咨询、售后、配送等服务时,产品工作人员的服务行为带给用户的主观感受。

 

关于第一层含义,不管是更强调社区属性的产品,比如天涯社区、豆瓣小组、百度贴吧,还是更强调内容属性的产品,比如公众号、微博、小红书的笔记,都具备 HH X 属性。

 

关于第二层含义,常见的 HH X 由客服人员提供。如果是电商产品,提供人员还包括快递员和售后人员等。

 

4. HB X(人与品牌的交互体验)

 

HB X 是指当用户想起、谈论起品牌,或使用品牌的产品、体验品牌的服务时,品牌带给用户的主观感受。

 

只要一款产品做成了品牌,它就有 HB X 属性。

 

HB X 会直接影响到我们是否信任、喜欢一个品牌,以及是否会使用它的产品和服务。所以,我们对 HB X 往往会有一个抓重点的综合评价。就像一个外向活泼的女生,虽然在外向程度方面和一个内向安静的男生不一致,但双方也可能会选择在一起,因为内向、外向并非双方关注的重点。

 

因为 HB X 牵涉到对品牌的综合评价,所以就像工作都有一段试用期、恋爱都有一段了解期一样,HB X 的形成往往也需要较长时间,通常至少要 3~5 年。

 

 

02 四维度的价值

 

每一个维度,各有什么价值?

 

1. HI X(人与界面的交互体验)

 

作为基础属性,HI X 的价值主要体现在以下两方面。

如果是一款只具有 HI X 属性的工具型产品,比如视频会议产品 Zoom,那于这款产品而言,HI X 就是一切,这款产品的成败也几乎完全取决于 HI X。

 

如果是一款同时具有 HC X、HH X 属性的内容型社区型产品,比如 B 站、快手这些视频类产品,那此时的 HI X 就会扮演一个类似交通出行(基础设施)的角色。如果 HI X 比较差,这个“出行”过程就会像出去玩时的塞车一样,让人难受;如果 HI X 很优秀,这个“出行”过程就会像准点的高铁、飞机一样,又快又爽。

 

2. HC X(人与内容的交互体验)

 

HC X 主要从内容层面影响用户满意度。

 

如果 HC X 比较好,用户消费时的决策时间就会被大大缩减,同时用户满意度也会比较高。比如淘宝上就有一些原创设计、质量不错、价格不贵的精品小店,很受欢迎。我们去网易严选、优衣库天猫旗舰店这些质量不错、设计不错、价格适中的店铺买 东西时,也会很快很省心。

 

以上说的是电商产品,对于 UGC 类的内容产品,也是类似的道理。比如站酷上的首页推荐和编辑推荐,相对而言,HC X 比较不错,所以看这些内容的用户也会比较多。

 

3. HH X(人与人的交互体验)

 

HH X 是用户情绪的最大影响因素,在情感方面对用户具有最大吸引力。物以类聚,人以群分。HH X 良好的产品,会像一场谈笑风生、其乐融融的聚会,吸引用户去扎堆。

 

良好的 HH X 往往意味着良好的氛围,它不仅能带给我们诸如轻松、愉快等积极情绪,还能在一定程度上带给我们一种归属感。最终的结果,就是我们喜欢用这款产品。比如 B 站的 HH X 就比较好,具体而言就是弹幕氛围比较欢乐友好,这样的氛围带给用户的感觉是比较好的,用户也喜欢在 B 站就着弹幕看视频。

 

4. HB X(人与品牌的交互体验)

 

HB X 事关品牌能不能以正面形象住进用户心里。

良好的 HB X,往往意味着良好的品牌美誉度和忠诚度。HB X 良好的产品,就像你信任和喜欢的男/女朋友一样,他/她会在你心里占据一定的分量和地位,让你乐意介绍给家人和朋友认识。比如苹果的 Mac,就有很高的品牌美誉度和忠诚度,用户也很乐意把 Mac 推荐给身边的朋友。

 

 

03 四维度的关系

 

四维度之间存在怎样的关系?

 

1. HI X 是另外三个维度的基础

 

HI X 作为基本维度,相当于“水之源,木之本”。如果把用户体验四维度比作一个金字塔的话,塔底的基石一定是 HI X,塔尖则是 HB X。

 

2. HC X 通常是 HH X 的基础

 

HH X 的产生,通常离不开 HC X。也就是说,通常得有一个合适的“内容”或“主题”,才能把人聚拢过来。比如结婚的时候,你可以邀请到很多亲朋好友来参加婚礼,但在平时,你很难邀请到这么多人。我们在 B 站看视频的时候,弹幕通常比较欢乐友好,氛围不错,但如果没有这些视频,也就不会有这些弹幕,以及不错的社区氛围。

 

3. HI X、HC X 和 HH X 共同构成了 HB X 的基础

 

HC X、HH X 和 HI X 一样,都可以成就 HB X。

 

以早期 Keep 为例,刚开始只有课程这个功能,也就是说只有 HI X 和 HC X 这两个属性。其中,HI X 还可以,HC X 比较优秀。在此基础上,慢慢发展出了社区功能(HH X 属性),而且做得不错。再往后,有了“自律给我自由”的品牌精神。在课程、社区、品牌精神等因素的助力下,Keep 有了不错的品牌美誉度和忠诚度。也就是说,HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以仅有 HI X 这一个基础

 

有些产品并不具有 HC X 和 HH X 这两个属性,而是仅有 HI X 这一个属性。单凭一个良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作为一款开视频会议的工具应用,它最初只有 HI X 这一个属性。但是因为很好用,HI X 很优秀,所以如今的 Zoom 即便没有内容(HC X)和社区(HH X)属性,依然成了一个在全球都很受欢迎的品牌,拥有了不错的 HB X。

 

总的来说,在四维度的金字塔里面,它们的关系如下图所示。


文章来源:站酷    作者:SnowDesign

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


产品用户体验案例分析

纯纯

目录


1.百度网盘 :会员标识

2.当当:搜索记录隐藏

3.当当:分享动效 ➕ 一键制作朋友圈分享海报

4.抖音:点击复制 ID

5.飞书:效率工作—语言自动转化

6.美团:优惠卷新到提示

7.墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍未上线)

8.起点读书:长按可进行互动

9.腾讯视频:亮度调节的动效设计

10.微博:点赞动效设计

11.知乎:删除搜索记录

12. QQ:可隐藏会话

13. QQ 音乐:搜索入口的听歌识曲

14. QQ 阅读:长按复制的放大设计


一、百度网盘:会员标识别


在开通会员后百度网盘会进行对于应用图标的更换,使得应用图标更加高级,在分享链接时也会加入会员分享的标识。


属于用户激励体系中的一个板块,增强用户的标识和身份。




二、当当搜索记录隐藏


搜索隐藏功能设定。


我们在使用各大应该的搜索功能时总会遇到过这样的场景,当你要某人或者在某种场景下需要进行搜索时,来不及删除自己的搜索记录出现社死的情况。


而当当的搜索隐藏就可以完美的解决这个问题,退一步讲我们可以思考一下为什么别的成熟型应用,没有采用这样的方式。大部分是没有这个功能,其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。




三、当当:分享动效 ➕ 一键制作朋友圈分享海报


在当当应用中点击分享进入页面后不同于传统的分享页面,而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。


这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。



动效展示



四、抖音:点击复制 ID


主页 ID 点击可进行复制  很多应用都有 ID 。但是当我们要进行 ID 搜索的时候,我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。


目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。




五、飞书:效率工作语言自动转化


飞书属于一款协同办公类的应用


在飞书的设置用有语音直接转换文字的说明,飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一,所以加入这样的设置可极大的提升用户的体验。




六、美团:优惠卷新到提示


有提示用户新到多少张优惠卷的提示


可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用




七、墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍然未上线)


一键登录


应用登陆中目前主流为(1.第三方登录,登陆之后需要再次绑定手机号。2.手机号注册登陆,登陆之后可选择是否绑定第三方。3.一键登录,登陆之后可以选择是否绑定第三方)在设计流程中,设计开发者需要尽可能的减少对流程的复杂化。


一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定,除非必要的情况下,我会直接放弃这款应用。





八、起点读书:长按可以进行互动


长按页面可以框选当前的段落,并且出现互动选项。

 

增加用户和用户之间,用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。




九、腾讯视频:亮度调节的动效设计


滑动可调节亮度

 

左边的小动效的设计加上右边的渐变进度条,使用户可以更加明确的知道自己所处于一个什么样的观看环境,并且加入了渐隐渐现的出场和入场。

 

用一个小巧的动效设计帮助用户确定自己的亮度属性,




动效展示




十、微博:点赞动效设计


点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。


增加趣味性和互动性。




动效展示




十一、知乎:删除搜索记录


清空时会在进行确认,再次点击全部删除方可删除。


在下方列表中可逐一删除,上面清空中不是点击后就全部清空。而是再次出现,起强调和确认的作用。


增加用户体验,帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。




十二、QQ:可隐藏会话


前几天发现的一个神级功能(虽然我已经不用 QQ 进行社交了),当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。


在好友的设置中可隐藏会话,开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。


应用的功能更加多样化满足多种不同的需求。




十三、QQ 音乐:搜索入口的听歌识曲


在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换


搜索歌曲界面的使用场景为:1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下,正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块,把听歌识曲放到搜索入口处更加符合用户场景。


对用户场景进行细致的研究,增加了用户体验。




十四、QQ 阅读:长按复制的放大设计


长按复制会有放大镜设计


当用户处于复制文案的场景下时,由于复制需要拖动,在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里,不需要后续用户在进行删减。


极大的加强了此场景下的用户体验


动效展示


文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


交互设计之探索GUI和VUI

纯纯

一、GUI和VUI的定义:


1.1GUI


GUI(Graphical UserInterface)图形界面,市面上最常见的交互方式。点触,滑动,作为主要输入方式。图像显示作为主要输出方式。




1.2VUI


VUI(Voice User Interface)语音界面,常见没有屏幕的智能音箱/耳机,靠语言输入和交流,如我们常见的小艾同学,天猫精灵等。





二、GUI和VUI的发展历程:


2.1GUI的发展历程


1973年第一个可视化操作的Alto电脑在施乐帕洛阿尔托研究中心(Xerox PARC)完成。Alto是第一个把计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显示器、图形窗口、以太网络连接。

1981年施乐公司推出了Alto的继承者Star,Alto曾首次使用了窗口设计。

1983年苹果电脑公司推出Apple Lisa个人电脑,是全球第一款搭载图形用户界面(GUI)的个人电脑。

1984年苹果电脑公司推出Macintosh。

1986年首款用于Unix的窗口系统X Window System发布。

1988年IBM发布OS/2 1.10标准版演示管理器(Presentation Manager),这是第一种支持Intel计算机的稳定的图形界面。

1992年微软公司发布Windows 3.1,增加了多媒体支持。

1995年微软的Windows 95发布,其窗口操作系统的外观基本定型。

1996年微软发布Microsoft Bob,此软件具有动画助手和有趣的图片。

1996年IBM发布OS/2 Warp 4,它的交互界面得到显著改善,至今仍有不少ATM机运行这样的系统。

1997年KDE和GNOME两大开源桌面项目启动。

1997年苹果电脑公司发布Mac OS 8,这个系统具有三维外观并提供了SpringLoaded Folder功能。

2000年苹果电脑公司推出Mac OS X系统的默认外观Aqua。

2001年微软发布Windows XP,实现了主题支持。

2003年Mac OS X v10.3提供了一键单击访问任何已打开窗口的功能。

2003年Sun公司的Java桌面系统为GNOME桌面添加了和Mac类似的效果。

2006年微软发布Windows Vista,对此前其视窗操作系统的外观作了较大的修改,实现了Aero功能。



2.2VUI的发展历程


20世纪90年代,诞生了第一个可行的、非特定的(每个人都可以对他说话)的语音识别系统,交互式语音应答(Interactive Voice Response,IVR)系统的出现代表了VUI的第一个重要时期。人通过电话线路进行交互并执行任务,如机票预订、银行转帐、业务查询等。


目前很多像siri、Google这类集成了视觉和语音信息的APP,以及Amazon Echo这类纯语音的设计产品,逐步发展并成为主流。随着语音识别技术、AI技术、互联网技术的发展,我们已经可以在手机设备中用语音处理很多事情,但还有很多事情目前无法通过语音完成,需要我们探索。




三、GUI和VUI的设计要领:


3.1GUI



        交互的多样性:


不同于PC机通过鼠标来点击,在触控设备上通过手指点按,由于手指的精确度相对于鼠标指针差很多,所以子啊移动页面设计当中的交互元素一定得辨识作用,手机并没有悬停操作所以图标如果特征不明显时一定要加文字识别,设计时也应注意图标和菜单元素的尺寸。


拖拽和移动是很相似的交互工作,被拖拽的元素始终跟随着紧贴屏幕的指尖


除了使用单指之外,还可以用两个手指放大,缩小图片,如果设计了一些新的多指交互一定要给用户提示和指导。


3.2VUI


3.3VUI的适用场景


智能家居

在智能家居领域VUI应用越来越广泛,相信在不久的将来我们一定能够享受到更多的VUI所带给我们的便利。


辅助驾驶

车载语音交互系统使得我们可以在开车的同时接听电话、听广播等。


企业应用

未来大型企业中将会多领域应用VUI,用于书写、记录等工作。


医疗教育

智能记录病例、管理病例的出入。


四、VUI的语言设计注意事项


过多的声音干扰,不但会增加用户的心智负担,将会引起用户感到厌烦,尤其是,语音在资讯的负荷量上又比单纯的声音来的更多,考量是否存在存在的必要性就放在格外重要。而言,可以寻找替代的方式,透过震动和灯光甚至状态变化来提示,减少使用者的认知负荷,并确保声音只会在特定的时间点出现,并提供使用者自行设定关闭声音的功能


除了声音本身的设计外,还要考虑整体环境的影响因素,可能周遭受非常的吵杂。换句话说,在KTV的包厢,吵杂的环境,会使用者无法听到消防警铃响,而容易造成危险事件的产生。也因为如此,消防警铃的声音频率设计就应该介于2kM到4kM,因为研究指出人类的耳朵对于这个范围的声音最敏感


从音量的角度来看,耳朵对不同频率的音量有不同的感知程度,有些声音听起来很响亮,有些则是很沉闷因人而异,但比较客观的量化体验指标就是分贝(decibel,dB) ,在尺度上超过70分贝以上,会让人产生忧虑不安,并引发各种症状,因此要尽量避免尺寸大小过大的设计, ,,降低主动的侵入性。基于这些因素总和来说,还要考量到用户和产品间的距离,与产品愈近,对于体积的需求量较大,反之为然


在声音体验设计(Amber Case,2018)一书指出,当警告或提示音出现的频率愈高,就应该设计成愈短,但不足就是,如果把声音设计成短而急促,从而使用者需要集中相反地,事件发生时间间隔长且久,则声音提示更需要明显且激烈的声音来提醒用户,例如手机铃声响时,需要告知用户

文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

交互设计九大定律

纯纯


先举个例子来理解一下:我要点击手机上的确认按钮所需要的时间,和 手与按钮的距离(D)   按钮的大小(S)有关。  当距离越长,所需要的时间越长。当按钮越大,所需要的时间越短。

undefined


自我理解:我们将日常看到的界面元素进行去色彩和去信息化,把这些控件/元素等都变成灰色色块,其实也就变成了最简单的原型图。这些灰色色块抛开了视觉上的属性,其实有两大最基本的属性,即色块的位置和大小。  菲兹定律告诉我们,要通过控制色块或者说界面元素的    大小和位置(绝对距离和相对距离)   来进行界面布局,进而控制交互时间,达到我们设计或者业务层面的目的。

     

a  合理的自身大小

这里是说合理的大小。一般来讲越大用户越容易到达,但是屏幕的大小是一定的,某一按钮/目标越大就会降低其他按钮/目标的大小。所以大小是相对制衡的,要根据具体情景和需求制定合理的大小(包括肉眼大小和实际热区大小)。但是关于手指点击的最小热区有规定是44x44px,一般的图形的热区大小都要高于这个大小,才能便于点击。其他大小要根据功能需求进行制定。

undefinedundefined


b 控制合理的相对距离

相对距离指的是界面内部各个元素与控件之间的距离。一般通过研究 整个流程 的交互动作,相互关联的操作元素/操作手势 距离会相对比较近,这样能有效减少操作的时间。

undefined

undefined



c 特殊的绝对位置:屏幕边界

屏幕边界是可以确定的(鼠标向某一方向一直移动终会停留在屏幕边界),但是屏幕中央确是较难确定的(四个方向鼠标均能延展出去)。一些重要和主要的操作放在屏幕的边界,可以方便用户快速到达,也是菲茨定律的普遍应用。

undefinedundefined



d  反向设计:增加时间来达成业务目标

业务目标有时候是与用户目的是相违背的,也需要根据具体场景来判断菲茨定律的使用走向。在特殊情境下也会通过距离和自身大小来反向增加使用时间来完成目的。

undefined

undefinedundefined


自我理解:席克定律也在研究交互时间。我们需要通过控制席克定律所总结的两大因素:数目和复杂程度 进而去左右界面布局的形式,从而缩短交互时间,达成良好的体验。


a 精简选择的余地

选择增加也就意味着事情可以发展的方向更加多元化,用户就需要权衡事情该往哪个方向发展,而这就需要时间。不要让你的用户思考太多,所以一般给出的选项在满足需求的情况下要尽可能的少。(这里注意:一般情况下要少但也不能太少,强迫用户也是不可取。)

undefined


undefinedundefined


b  减少事情的复杂程度

事情越复杂,越难处理。尽可能的将复杂的事件通过交互或者版式等手段进行简化,让用户觉得容易把握,而不是大量事物/流程/元素的堆砌。

undefined

undefined

undefined


undefined


undefined


自我理解:米勒定律对人的记忆数目进行了定量的研究,即 5-9 个是人脑接受起来比较合适的,多了就容易混乱。


a 控制选项的数量

同一类型或者同一层级的元素出现,数目一般控制在5-9个。

undefined


b 将多信息进行分段处理,便于理解记忆

面对有大量信息的时候(数字/文字/段落)将其分割到5-9个等大脑容易记住的数量。

undefined

undefined


c 顺应时代的取舍

看到了有一些设计并没有按照米勒定律去执行,因为随着时代的发展,有一些定律并不是万能适用的。定律不可照搬,要根据具体情境去做取舍,以最终效果为导向。

undefined


undefined


自我理解:和四大基本原则的亲密性原则类似,即在界面布局的时候性质相同的事物要相接近,不相同的要远离,这样更符合人们的既定认知。


a 将相近的功能的分为一组

在面临很多复杂功能时,简单的堆砌显得啰嗦,需求又不能随意删减。这时候就可以将相类似的功能放在同一个组别里面进行收纳整理,这与席克定律也相接近。

undefined


b 按照事物性质和关联程度严格把握布局的间距

这里与视觉设计也有很多重叠,即落实到页面的高保真的细节。保证内容想接近的元素间距要小,内容有区分的间距要大。

undefined

undefined

undefined


自我理解:任何事物都有其复杂性,不可避免。某些事物一旦失去其复杂性,其作用本质就可能失去效果。不要抱怨某些流程和工作,他们的复杂性是其发挥作用所必然带来的。所以才需要你来优化和简化。

a 把复杂性降到最低点

事物的复杂性是固定,但是要思考你所面对的是最简程度的复杂性么。首先优化内部系统的整个流程和不必要的步骤能够有效降低系统本身的复杂性。

undefined


b 把复杂性进行转移 组合 隐藏

再把复杂性降低到最低程度之后,事物/流程仍然表现出一定复杂性时。就要考虑造成复杂的元素是什么,是否要将造成复杂的元素进行收纳组合,甚至隐藏。

undefined

undefined


自我理解:在相同前提下我们选择最简单有效的。单纯的炫技是可耻的。


a 给用户清晰的引导

想清楚这张界面的主要目的是什么,顺着这个目标去引导用户,其他元素的视觉层级要让步,来让用户抓住重点。


b 少即是多

少代表流程/步骤/界面元素的减少,多意味着用户量的增加 体验感的增强。

undefined


c 衡量产品功能的取舍

产品在功能迭代改版上,会出现大量不同的声音和方向。但功能不是越多越好,用户的时间是确定的,在某一功能上消耗的时间长,在其他功能上就短了。奥卡姆剃刀就要求我们找到主功能点,其他功能点要做出让步妥协甚至砍掉。



自我理解:关于防错定律和我的上一篇文章入门(一)的放错和容错原则基本近似,只是分类的更细致一些,分解到了操作的前中后阶段来防止错误。上一篇有更多解释。


a  操作前  禁止操作或者预告结果

有一些功能在你操作之前就禁止操作,避免了错误的发生。或者通过告知操作之后会产生的不良后果

undefined


b 操作中 提醒用户

在操作过程中,进行错误提醒,有效避免错误的进行


c 操作后给用户弥补错误的机会

用户在使用app的过程进入错误的路线,需要给用户弥补的机会




自我理解:这一点主要体现在产品设计上,通过对未完成任务的提醒,来去博得用户的注意力,进而达到商业目的。


a 倒计时/读条等交互反馈

倒计时会给人一种紧促感,逼迫用户去注意,无形之中给用户规定了任务,这个任务也就是咋们的业务目标。倒计时 读条等交互方式也应该谨慎恰当使用,因为不是每一个任务场景都需要给用户紧迫感。

undefined


b 定向反馈提醒

这一点也是利用未完成任务的相关信息反馈达到让用户去完成任务的业务目的。

undefined



自我理解:在上一篇一致性原则里面讲到了和竞品保持一致/和迭代版本保持一致,其实是我拓展的。这一定律是明确指出了一致的根本原因。在产品设计的时候,用户的心理就是我希望你的使用方式/操作和主流一致,超出预期的就会有人群不接受,就会有用户流失。


a 能不创新就不创新

创新意味着改变,改变的不仅仅是你的界面还有用户习惯和长久以来的认知模型。破坏习惯重建习惯是有很大风险的。

undefined

undefined


其实能看到很多Dribble页面很有特点,也不是完全没有落地性,但是实际国内产品并没有看到这样的设计,原因就是不符合雅各布定律。


b 好的的产品都是创新的 不同的

这一点好像和上一点有点相悖。但是其实也不违背,有很多分寸的拿捏往往不是理论能完全决定的。微信后来居上绝不是因为照搬qq,如果新的创新带来的优势能够弥补不相同所带来的不足,也是可以尝试的。

undefined


文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



交互设计:如何做到惊喜?

纯纯

保持好奇,巧妙融合,追求卓越,自然而然

一家之言,未必全面,甚至未必正确。欢迎交流探讨。


01
交互设计的惊喜,是什么?

之前的文章,有简单定义过交互设计的“惊喜”,即为:超出用户预期,并让用户开心。

具体而言有两类,分别是:小惊喜、大惊喜。

1 小惊喜

所谓小惊喜,是指一些颇具趣味性或人文属性的交互设计小细节。


先说趣味性。常见的有两类,第一类是比较好玩的动效,第二类是一些小功能。第二类有时也会包含第一类。

动效这块,大家比较熟悉的,有 iPhone 上删除应用前图标的抖动,仿佛是吓的发抖,也可能是在摇头求饶;还有移动端登录 B 站、输入密码时,动画人物的捂眼捂脸动作。

(B 站登录页面)

小功能这块,也可以分成两类。一类是隐藏的小功能,一类是有趣的小功能


很多隐藏功能,头几次用的时候,多少会有一些惊喜之感。

比如在订阅号消息列表页,某个公众号你已经几个月没看过,对它失去了兴趣和信任。这时,尝试长按这个公众号的头像或名称,会呼出一个包含“删除消息”和“取关”功能的弹窗。

(订阅号消息列表)

还有些隐藏功能,既能让用户觉得惊喜和方便,又能引发用户思考。这种思考,可能会让用户感叹设计之妙,也可能也会给用户一种猜对谜语的欣喜之感。

比如用墨刀的时候,尝试按数字键 1,会呼出“内置组件”这个使用频率非常高的功能,会让人觉得墨刀很聪明。

如果再仔细看一下,会发现,“内置组件”的缩略图标,和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标,并成一列。这 5 个缩略图标的排列顺序(上到下),和它们快捷键("、"键和数字键1、2、3、4)的排列顺序(左到右),是完全一致的。不得不说,这是一个简单又巧妙的设计。


再比如朋友圈里,某个不熟的好友每天都发集赞的小广告,搞的我们不胜其烦。长按其头像,会呼出设置权限(屏蔽等)的功能。

有意思的是,长按好友名字,则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的;另外刚才那个例子,长按公众号头像或名字,也都能呼出取关的弹窗。

个人的理解,生活中,我们用力长按一个人,通常是表达强烈不满,比如打架时。比起长按名字,长按头像更像是长按真人,所以也更能表达我们的不满。


说完隐藏的小功能,再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布,微信给朋友发生日快乐后漫天飘落的蛋糕,拍照软件里的贴纸,等等。

最后说下带有人文属性的交互设计小细节。常见的有如下类型:帮助弱势、关照情绪、表达情感、保护隐私。


帮助弱势这块,比如 iPhone 的辅助功能,里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。

关照情绪这块,很重要的一点,就是避免引起用户的负面情绪。比如微信的删好友是单方面删除,被删时我们很难察觉到,而且微信也不会通知我们。个人觉得,微信之所以不通知我们,其中一点,就是不给我们添堵。类似的还有,微信消息没有“已读”功能,这就大大减轻了接收者的回复压力。

表达情感这块,比较为人所知的例子,5 月 20 号这天,微信红包的限额,从 200 元升到了 520 元。还有一个例子,在微信聊天里发一个“ohh”,长按并点翻译,结果也是一个惊喜。

保护隐私这块,比如借助 iPhone 的“引导式访问”功能,可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候,如果你不想让对方看到你的微信,就可以通过手机微信来锁定或退出电脑版微信。

2 大惊喜

所谓大惊喜,是指那些系统性大创新,并且能够引领潮流、代表未来的交互设计。通常而言,这些大惊喜,最开始给用户的感觉,就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,带来了当时的大屏幕:3.5 寸屏幕,以及纯触摸屏,和极为灵敏的触控体验。

2011 年,Siri 同 iPhone 4S 一起问世,为我们带来了语音交互。如今,在 100 元就能买到品牌类智能音响的情况下,依靠语音交互的智能音响也在慢慢走入寻常百姓家。

也许后乔布斯时代的 iPhone 创新不如以前,但不可否认的是,时至今日,iPhone 依然在引领潮流,在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。

以上是比较广为人知的交互设计,还有一些不太为人所知的设计。比如在家里网购一条床单,但是不知道床的尺寸,家里又没有尺子。这时,打开 iPhone 里的测距仪这款 App,就可以量出床的尺寸,会不会觉得有点酷。

(测距仪 App)

微信在引领潮流方面也有一些建树,比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品,也正在引领新一轮的潮流。

还有一个比较酷的功能,就是以图搜图。笔者最早用过百度和谷歌的相关功能,主要是在电脑上搜索相似的图片,使用频率极低。

假设一个场景,比如在路上看到一个陌生人的外套很好看,但又不好意思上前问,就可以拿起手机,利用淘宝的拍立淘功能,拍张照就能马上看到相同或相似的商品。

如果淘宝上没有搜到类似商品,还可以用微信的扫一扫识物。和拍立淘相比,区别之处有两点。第一,不用拍,直接能识别,不过通常得等 1-3 秒;第二,识物结果里面,除了商品,可能还会有百科词条和资讯。


02
交互设计:如何做到惊喜?

个人觉得,有 4 个要点:既要有好奇心,又要有卓越心;既要天马行空,又要保持自然。

听起来可能有点乱,且听笔者一一道来。


1 保持好奇心

笔者观察身边读小学的小孩,发现,当大人聊天时,特别是谈正事时,小孩特别喜欢坐在旁边听,而且听的很认真。小孩有时也会说两句,或是问问题,或是发表自己的看法。

看得出来,小孩对成年人的世界,怀有极大的好奇心。实际上,不止于成年人的世界,小孩对周遭世界都有比较强烈的好奇心。

整体而言,成年人对周遭世界的好奇心,远不如小孩。我们互联网从业者也不例外。

好奇心和交互设计,有什么关系?

交互设计,某种程度上,也是一种创作。好的创作,一定来自生活。这就需要我们去观察生活。

观察生活,非常重要的一点,就是好奇心,对周遭人、事、物要有足够的好奇心。

比如上文提到的例子,在 iPhone 上删除应用前,应用图标会抖。这种抖是一种趣味隐喻,既可以理解成吓的发抖,也可以理解成摇头求生。如果对生活没有足够的好奇心,是很难留意到这种生活细节,并把它们作为一种隐喻运用到交互设计中的。

以上是关于好奇心,还有一种特质,也是在小孩身上表现突出,同时也和本文主题有关,那就是:童趣。

还是上文的例子,在 B 站 App 上输入登录密码时,动画人物会捂眼睛。这个设计,可能不会打动所有用户,但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣,可能也会觉得,这个设计,没啥意思。

玩是人的天性。对于比较好玩的交互设计,大部分人是比较容易产生共鸣的。实际上,据笔者观察,我们大部分从业者是有童趣的。我们比较缺的,是好奇心。

那么,怎样判断自己是否拥有足够的好奇心,其标志是什么?

个人观点,有两个标志。第一,是对与个人利益无关的生活小事的关注,远多于对个人利益本身的关注。第二,观察和思考,远多于评价和自大;追本和溯源,远多于偏见和傲慢。

为什么会提到个人利益?

因为,通常而言,个人利益,尤其是短期利益(比如少花时间设计和修改原型),往往会和用户体验存在一个此消彼长的关系。

如果过于关注个人利益,不仅很难照顾到用户体验,甚至会伤害用户体验。至于给用户带来惊喜,就更无从谈起了。

回到现实当中。在时代洪流面前,好奇心的两个标志,显得很难,该如何实现?

关键在于找到背后的源动力。这个源动力,在笔者看来,有两点,分别是:求知若渴、淡泊宁静。


求知若渴,可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。

淡泊宁静,正如诸葛亮在《诫子书》中所说,“非淡泊无以明志,非宁静无以致远”。人的心力和精力终归是有限的,如果我们沉迷名利、物欲、享乐,就难有兴趣和精力去琢磨万事万物了。

所以,只要找回自己童年的那种求知若渴,同时修身养性到淡泊宁静,这份好奇心,就会回来。

2 巧妙融合

某种程度上,很多带给我们惊喜的交互设计,都是一种巧妙融合。

笔者把这种巧妙融合,初步分成了三类,分别是:简单融合、直接融合、委婉融合


简单融合,最常见的就是隐藏功能。把一个较为简单的操作动作,比如长按、双击、下拉、左滑等,和一个合适的功能,融合在一起。用电脑时我们常说的快捷键,也属于这一类。

通常而言,操作对应什么功能,讲究的是合适,并无固定章法束缚。比如在微信朋友圈,发表文字的功能可以靠长按(相机图标)唤起,设置权限的功能也可以靠长按(好友头像)唤起。所以,简单融合这块,可供我们发挥的空间很大。

另外,简单融合最常见的形式——隐藏功能,既实现了界面的简洁,又带来了一定惊喜。

简单融合,既简单,又实用。建议大家充分开发这一块。

直接融合,是指将生活中的趣味性,直接搬到软件中,搬到交互设计中。比如微信聊天中的扔骰子、石头剪刀布,以及漂流瓶、抽奖等。

这一类融合,有点像商场里的电玩城,虽然我们不会经常去玩,但确实比较好玩。

委婉融合,是指用明喻或隐喻的手法,将生活中微不足道的一些细节,移植到交互设计中。

这种移植,有时是直白的。比如 Mac 上打开应用时,其图标会在 dock 栏里有规律的弹跳,这会让我们联想到皮球的弹跳。

这种移植,有时是隐晦的。比如 iPhone 上删除应用前,其图标会抖。这种抖,是害怕还是求饶,任凭我们想象。

这种移植,有时是无声的。比如在朋友圈,要想呼出隐藏的设置权限功能,只能长按头像,长按名字则不行。这个设计,不乏想象空间。如果不尝试长按名字,则不会发现这个细节。

委婉融合,有时会带一些趣味性。更为重要的是,它能够引发我们的思考和想象,所以是一种很出彩的融合。这种融合,也会赋予交互设计,一种禅的味道。

整体而言,笔者非常推荐委婉融合。

3 追求卓越

如果目标是小惊喜,则保持好奇心、并做到巧妙融合,基本足矣。

如果目标是大惊喜,则需要雄心壮志,需要舍我其谁,需要追求卓越。

日常工作中,可能会有这样的对话。“这个动效/功能,实现不了”。

大惊喜里的几个例子,比如初代 iPhone 的触控体验,iPhone 里的测距仪,微信的扫一扫识物。这种设计,意味着要修一条最好的长城,背后往往有很多技术难题要攻克,有很多脏活累活要做。

如果团队文化就是做出最优秀的交互设计,那么,“实现不了”这句话,估计就听不到了。取而代之的,可能是:“还在研究中”,“下个大版本能上”。

4 自然而然

提到惊喜,还有一款值得研究和学习的产品,那就是锤子手机的 Smartisan OS。

个人观点,在小惊喜方面,Smartisan OS 颇有建树。在大惊喜方面,Smartisan OS 也进行了一些值得学习的探索。

先说小惊喜,比如华丽而细腻的桌面翻页动画,比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能,比如静音可以设置时间,比如方便的长截屏。

(静音可设置时间)

(长截屏)

再说大惊喜。2016 年 10 月发布的一步和大爆炸,是比较大比较系统的功能,在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言,这两个功能是 Smartisan OS 的大惊喜。

笔者的备用机是锤子手机,身边也有朋友在用锤子手机。以一步为例,这个功能,笔者体验过很多次。但平常很少用,身边朋友的情况也类似。

(一步)

根据使用情况和主观感受,个人觉得,一步这个大惊喜,还存在进步空间,主要有两个方面。

第一,宏观层面。一步作为新生事物,好比一颗新种子。种子破土而出时,是一颗嫩芽,而不是一棵大树。新生的一步功能繁多,犹如一棵破土而出的大树,一方面有违自然规律,另一面因为功能繁多,很多用户无法一下子看懂,看不懂可能就不想用了。

第二,微观层面。一步这棵新大树,结了很多不同的果子,比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子,是用户真正需要的吗?这个是要存疑的。

比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言,我们发到朋友圈的图片都是精挑细选的,会占用一定量的时间,比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候,少点几下这种效率问题,优先级是比较靠后的,我们没那么在乎。

还有拖拽图片/文件这个交互动作,大家通常在电脑上用的比较多,在手机上是没有这个习惯的,实际上应用场景也少。在手机上,大家一般只习惯拖拽应用图标。

还有切换后台应用这块,大家第一个想到的,一定是系统自带的,已经用惯了。而且唤起速度比一步快,点击面积也比一步大。

总的来说,微观层面上,比较缺让大家能马上想到一步的功能点。

最后,总结一下。对于领先时代、引领潮流的交互设计,需要做到自然。

具体而言,就是,大惊喜是一种系统性的大功能,好比一棵大树。这棵大树,最好有一个从种子到果子的生长过程,这样最自然,生命力也会最旺盛。

因为,从破土而出的嫩芽阶段,就可以通过用户反馈和数据来检验,这种嫩芽,是不是真的对用户有价值。如果价值不大或没有价值,还可以再调整。如果长成大树结满果子,再去调整,就很难了。


结语

交互设计小细节,如果有一定的趣味性或人文属性,则是小惊喜。

系统性工程的交互设计,如果最初感觉很酷,而且能引领潮流、代表未来,则是大惊喜。

始终保持孩童身上那种非功利的好奇心,用心观察并思考生活中的小事;

将生活小事和交互设计巧妙融合起来;

以上两点,可以帮我们做出小惊喜类的交互设计。

追求卓越,独立思考,做最酷最好的交互设计;

酷是结果也好,是目标也好,都不是最重要的。最重要的是,避免刻意和心切。酝酿大惊喜,犹如培养一个新生的孩子,需要投入极大耐心和精力,需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。

再加上以上两点,可以帮我们做出大惊喜类的交互设计。

最后,用爱因斯坦的一句话来共勉。

想象力比知识更重要。

文章来源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


交互设计之尼尔森的十大可用性原则

纯纯

系统应该在合适的时间内通过适当的反馈,始终让用户了解正在发生的事情——尼尔森


自我理解:用户无论在界面上做什么,都应该及时告知他发生了什么或者进展到什么程度。可以理解为人与人的沟通,界面需要及时告诉我们做了什么,现在是什么情况。


a.  这种告知应该是及时的。

加载任务在互联网中是最常见的,在加载过程中应当及时传达加载过程,减少用户的心理等待时间。在外部加载总时间无法优化的时候,使用何种方式能有更好的用户体验是设计时需要考虑的。

undefined

undefined

undefined


b.  应当告知用户你在哪里

你的界面需要引导用户来操作,即作为用户应该清楚的明白我在什么位置,我下一步可以去做什么操作。

现在app的很多设计基础包括顶部的导航分栏和底部的tab bar都是为了告诉用户他在哪里。

在做一些概念设计时候,如果单纯是为了更好的视觉效果,就对这些基础分栏进行大刀阔斧的设计,最终导致了好看是好看,可是用户都不知道这页面是干什么的结果,很明显是违背了最基本的交互原则 状态可见原则。

undefined


c.  应当告知用户事情怎么样了

用户在你的界面是要做什么事情,这是你在设计之前应该思考的问题。

如何把用户要做的这件事情更好的呈现给用户,反馈给用户以及有哪些信息需要反馈给用户都是你要从交互的角度思考的,这包括过去发生的信息和即将发生的信息,也包括正向反馈和负向反馈。(这种操作是否成功了?这种操作进展到什么程度了?如果这样操作会有什么后果?点击之后会达到什么页面?这里是否可以点击?)


很多概念性的设计很酷,从交互的角度上来看也是因为界面对信息进行了很好的反馈,比如下面的设计就是对登山的信息进行了很直观的反馈。(来自设计设计师anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的环境里面,不同的界面也有不同的外部环境。尽量保证界面在自己产品定义的风格里面,如果有机会还原真实世界的状态也很好。


a.  根据用户制定产品语言

在制定产品语言时,要了解产品的用户人群,使用相对应的用户群体所熟悉的文字语言 图形语言  板式结构  配色方法。要让我们的用户觉得这个产品很符合自己,而不是让一个老大爷去滑滑梯的感觉。一般来讲即便是同一产品,在国内外的产品语言也是有所不同的。

a. 模拟真实环境

产品在一些展示上模仿现实世界的样子,可以让用户快速接受,并感受到真实易懂。不仅仅局限于静态外观的模仿,还包括模拟真实物品的动态效果 声音等 都能给用户良好的使用体验

很多逼真的动效也是来自真实世界的映照。比如下面的可乐瓶的晃动就和真实世界很接近,让用户有很强的代入感。(作品来自设计师dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:为了不让用户进入一个错误的场景或者结果,对于一些特殊操作应该给予撤回重做,让用户能够充分的确定接下来的行为。

a.  返回到原始状态

可以理解为悔棋,即已经发生的行为返回到原始的页面状态,这个条件的设置也应该有一些条件的限制,不能一直无限返回。





自我理解:君子常常言行一致,好的产品也是一样。保持为一个统一的整体,包括产品内部和产品外部,也包括线上和线下。


a.  与竞品保持一致

很多人讲现在的同一类产品的同质化现象严重,其背后也是有一定原因的。相同或相似产品的用户习惯保持一致,即意味着用户需要更少的时间去学习甚至不需要学习。从产品设计上讲,用户使用越方便易用,产品设计的越成功。和相关主流竞品做出比较大差异化设计时候,虽然摆脱了同质化的问题,但是很多常规操作却需要用户重新学习,这样带来的后果很有可能就是用户流失。所以,没有充分的理由,请与竞品保持一致。



b.  请建立一套完整的规范

一套完整的规范包括组件 色彩 间距  版块结构 等。规范可以让你的产品一致性更强,你要让用户能够对你的产品产生一定的规范性印象,当他看到一张页面就能联想到这是什么产品。

undefined


c.  请保持产品迭代的一致性

现在随着互联网市场的不断稳定,很多产品进入了稳定的迭代期。但是在迭代期也应该以保持产品语言 用户使用习惯的一致性为一大重要原则,版本的迭代也应该逐步进行,不要急功近利。尽量保持原有的设计元素一致性,新功能的创新也尽量不要损害原有用户的使用体验。


自我理解:再发生错误之前采取措施来避免。


a. 引导用户,不要让错误出现。

很多app迭代更新之后会有操作指引,目的就是为了让用户学习,减少错误操作。很多引导页也有相类似的功能。


b. 给予提示,尤其是用户在做一些重要操作的时候

一些重要的敏感操作,产品通过二次询问得到用户的确认,




自我理解:能让你的软件产品来记住,就不要让你的用户来记。尽可能的在设计产品的时候,不要让用户去记忆,把用户当傻瓜。

a 记住用户的使用操作记录

这个记录不单单是在某一设备上,一般来讲都是跨设备进行同步。用户在使用的时候不用来回调整,体验感是很强。

 


b  让用户选择信息而不是填写

填写是一件成本极大的事情,很多用户不愿意在这上面花费时间。所以产品在设计的时候要尽量让用户去选,而不是去写。

undefined

c 自动读取

思考产品一些功能的使用场景,有没有自动智能化的需要。即不用问候产品使用者,自动提供解决方案。注意,这里讲的是提供方案,不是解决方案。提供大多数的解决方案,可以节省使用者的交互步骤或者浏览时间等,也是易用性高的表现。

d 提供适量的信息

其实另外一个交互定律法则(以后会讲)其实提到了选择的数量,移动端的选项一般不会超过五个,超过五个用户的头脑就会混乱。所以要考虑信息的摆放位置在哪里,一方面是需求决定的,另一方面也应该控制每一个选项的数量,不要让用户感到焦虑。


自我理解:一般来讲产品的用户群体是多样化,用户的使用熟悉度也是有差别的。要照顾到绝大多数用户群体的使用体验,所谓的高频是每一个用户群体比较常使用。


a.  设置快捷/重复入口

讲产品常用或者主打的功能放在产品容易操作的位置或者重复出现,用户可以高效的完成自己的需求。

一般来讲用户的使用频率越高越要放在操作热区和表面,反之亦然。

b.  用户自定义常用功能

照顾到不同用户对于某些功能的需求不同,对产品的部分功能进行用户自定义化操作,提高用户使用的灵活性。


c.  给用户默认选项

将用户经常使用的选项作为默认,减少用户操作时间,达到灵活高效的目的。像淘宝都会设置默认的收货地址,每次下单不用每次都输入,十分高效。(当然也有翻车的时候)



自我理解:互联网用户阅读产品的一个很重要的特点就是快。即不是来阅读不是来看,而是扫一眼。所以要求页面上的内容能够清晰可见,方便用户快速捕捉到自己喜欢阅读的信息,减少不必要的干扰,简洁高效。

a.  清晰的板块划分

把页面内容的优先级别进行分级,清晰的板块划分将会引导用户操作。还可以将页面的主推内容向用户展示,避免用户分不清重点。


b.  减少视觉噪音

注意页面的主角是谁,在平面设计中也有相同的概念。不要让背景或者装饰哗众取宠,而影响主要信息的传递,视觉设计是来辅助业务表达的。如果核心需求没有传递好,那就会单纯地成为一件艺术品,而不是设计作品。所以在设计过程中,要权衡视觉点,减少不必要的噪音干扰。


c. 严格遵守设计的四大基本原则:亲密  对比  重复   对齐

落实到界面上包括间距 字号 字重 版式节奏 。其实看到看到很多界面做的不精彩不优美,就是基础性的原则就没有完全落实贯彻。这里就不举例,基本所有的设计都要遵守的原则,很重要,很重要,很重要。


undefined


自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。


a.  提供清晰地说明和解决方案

考虑到可能会达到的错误界面。在发生的错误结果上,使用明确清晰的语言告知错误的原因,并给予解决方案。

自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。这一部分其实主要进行一些说明,让用户操作方便,相当于使用说明书。

a.  无需文档

进行新页面的设计尽量直观清晰,符合用户习惯,无需引导即可使用。

b.  一次性提示

改版引导或者新功能引导给予一定的提示

c.  常驻性提示

对于产品的操作性功能或者操作必须注意到的问题,产品需要进行一定说明

d.  帮助文档

用来解释一些常见问题。



文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



超实用的12个UI设计法则,大神都在用!

周周

想要制作一个漂亮,可用和高效的UI不是一件容易的事情,这不仅需要设计师有一定的审美能力,更需要花费大量的时间,并且在设计的过程中还要不断进行修订和调整,直到自己和你的客户满意。这个过程我自己也曾经感受过很多次。 

今天老王将跟大家分享快速提升UI水平的8个技巧,通过一些易于实践的小技巧来进行简单的视觉调整,从而改善你要创建的视觉效果,希望能为你在设计项目中提供帮助。

10大交互设计原则,大厂都在用

周周

本文讲述交互设计用的最多的原则——尼尔森十大可用性原则。

手把手教你撰写交互设计文档(保姆级教程)

周周

前言:为什么要写交互设计文档?交互设计文档有什么用?


第一,交互设计师的交互设计文档就好像UI设计师的PSD文件一样用于保存记录自己的设计思路,但交互设计师负责的任务不仅仅停留在页面当中,还包括产品的需求分析、用户画像、竞品分析、产品数据分析、用户交互逻辑等等..我们都可以写在交互设计文档中做记录,为我们的交互设计提供依据。(其实就是避免开发怼你问你设计依据是啥,你就马上把分析摆他脸上,避免尴尬)


第二点是交互设计师作为产品的上游(一般开发流程是产品经理负责收集需求给予交互设计师进行交互设计,撰写交互设计文档,然后文档评审通过后,UI同学负责UI设计,接着提供前端同学进行界面开发,后端同学则根据交互稿搭建框架和业务逻辑,开发完成后进行测试,反馈测试结果,如此循环,因此交互设计师一般处于产品线的上游阶段),撰写一份标准和规范的交互设计文档是非常重要的,因为我们需要利用交互设计文档去表达我们的设计思路,通过交互文档我们可以让UI同学知道页面需要给用户表达什么情绪,达到怎样的目的,告诉前端同学页面跳转逻辑以及交互模块怎么写,帮助后端同学清晰搭建后台框架与数据库以及产品业务逻辑是怎么样的,最后测试童鞋还会拿着你的交互稿进行单元测试,编写测试用例,所以只有我们先把文档写好了,才能避免后面产品开发出现问题。


第三点也是最重要的一点就是未来我们用于跳槽加薪面试作品。内行看门道,外行看热闹,如果你面试交互设计师的时候还是带着一条长长的JPG或者是网上千篇一律排版的PDF作品集,在面试官眼中显得不入行(或许你会遇到性格好的面试官,毕竟千人千面,面试特别看人),因为专业的交互设计师在平时工作中为了避免干扰UI同学设计,只会使用黑白灰做交互稿,也很少做成一条长长的PNG或JPG,我们可以适当包装作品集,但如果过度了会让人觉得不落地,或许只停留在刚入行阶段,所以在技术面试,我们可以拿着我们的交互设计文档跟面试官叙述产品从需求层面怎样思考完成交互设计的,解决了用户什么痛点,最后取得了什么样的成果,得到了怎样的数据,我相信成功几率会大很多。(PS:用交互设计文档进行面试前请注意把公司机密信息做脱敏处理,避免发生纠纷)


1、交互文档包含什么内容?以及怎样撰写交互文档?


说了那么多,那究竟交互设计文档包含哪些内容?


一般来讲,一个基础、规范的交互设计文档应该包含文档封面、更新文档、设计说明文档、业务流程图、交互原型、垃圾桶等模块,当然了,这些模块也不是永恒不变的,有些是必须要,有些是选择性添加的,至于这些模块有什么功能和怎样进行撰写,这篇文章会逐一分享给大家~


(说明:作者比较习惯使用Axure软件撰写交互设计文档,大家可以根据自身爱好或者公司规定进行选择(例如sketch、figma、PS等等..都是可以的)。这里要引用一句话:软件仅仅是工具,并不能限制我们的思维,好的工具能让我们走得更快但不能使我们走得更远——沃·兹基硕德。


1.1、文档封面(必须)


文档封面就相当于一本书的封面一样,用于记录产品名称、版本号、日期以及文档负责人(这样开发童鞋就能精准找到你进行撕X),只要能展示以上信息,其他信息(例如产品经理是谁等..)可以自行添加。


1.2、更新日志(必须)


以前我都习惯把更新日志放到产品文档后面,但是随着工作时间变久,我发现开发童鞋在SVN上打开设计文档后第一时间就是查看更新日志,所以后来把这一页提了上来。(是的,设计文档也是需要跟产品一样不断优化迭代的)


更新日志主要用于记录产品迭代修改的内容,让开发同学快速了解这次迭代修改了什么内容,他需要做哪些工作。我的更新日志特别简单,就只有日期、变更内容、所在页面以及备注四个字段,这里唯一注意的是,日期必须是最新修改的内容放在上面,以前的日期在下面,很多同学每次迭代的时候会在下面列进行内容添加,这样开发同学每次都必须滚到最下面查看信息,大哥,你是交互设计师,专业一点好吗。


1.3、产品项目背景(必须)


产品项目背景是一个项目的核心关键,告诉所有的团队成员我们要做一个什么样的产品,需要创造什么样的价值,就好比我们写作文时的中心句,时刻提醒着我们要不忘初心,为团队成员开发项目指明方向。


前段时间有个同学来问我,他们本来是刚开始是做校园教育系统的,但是随着产品慢慢迭代,功能逐渐强大了,最近老板希望在系统中加上财务功能,本来用户学习成本就高,如果再加上去会不会适得其反?虽然我不知道那位同学的老板产品战略是啥,背后是怎样思考的,但是在我看来这样的行为就不能是不忘初心,这顶多能算不忘出薪吧。(拒绝谐音梗从我做起)


好了,至于里面产品背景、产品目标以及定位的内容应该如何撰写?对,我抄的。一般情况下,这些内容我们都能够在项目立项文档或者在招投标书上就能找到,我们不用亲自写(但可以加以设计),再不行也能找到产品经理去了解。


或者你会说,小公司既没有立项、也没有招投标书,产品经理也是你,那该怎么办?那么你就得发挥出自己当年高考的作文水平,积极了解清楚产品背景定位,努力完成这一部分,因为信息的传递是有消耗性的,只有我们作为产品的上游做好了,才能为团队成员后面的努力提供方向。



1.4、产品需求(必须)


产品需求列表用于记录产品需要做哪些【功能点】,这些功能点我们一般能在产品经理或者项目经理上获得,我们收集需求后需要对其按照重要程度P0、P1、P2等级进行分类,我分类的原则是KANO法则(不知道的同学可以百度),P0等级是非做不可的需求,例如像微信的聊天,淘宝的支付功能等,P1是锦上添花的需求,时间紧迫的话可以下次再做的,例如微信的语音、视频聊天等..,排到最后Pn就是一些不必要可做可不做,就算做了也没太大影响的功能,就可以与领导层商讨是否确认要做。(例如炸屎,你们现在还有人炸屎吗?什么?炸屎你都不知道?那当我没说)


1.5、用户画像(可选)


所谓知己知彼百战不殆,通过用户画像我们可以快速了解产品目标用户群体特征,分析目标用户群体的期望、需求、动机等,再根据用户场景去进行设计,有了用户画像的支撑,能避免我们在设计过程中出现一些不必要的因素,例如我们目标用户是中老年人的话,那么按钮、字体就应该适当的放大、排版简单明了,而针对青少年就可以偏个性化风格设计。


当然,如果是小公司的话可能没有那么多的资源去做用户的调研,在这里分享一下我当年在创业公司经常使用的一种快速获取用户画像的方法,既快速又特别专业。


这里需要借助一个网站:艾瑞数据(https://index.iresearch.com.cn),打开后选择自己产品的类型(例如学习教育类),网站会把该类型的产品按照用户数量从高到低展示给你,然后我们选择一个差不多的竞品点击去查看他们的用户特征,最后Ctrl C+Ctrl V到我们的文档中,完成。


1.6、竞品分析(可选)


竞品分析相信大家都特别熟悉,我之前的文章也教过大家怎么进行详细的竞品分析,这里就不细讲了,虽然在交互文档中竞品分析可做可不做,但是在产品初期阶段我们如果认真做竞品分析的话能够快速了解产品业务、熟悉用户的使用习惯,同时当我们在做交互原型的时候能提供快速借(cao)鉴(xi),因此有条件的同学还是建议尽量做一下。


1.7、数据分析(可选)


数据分析时交互设计师必不可少的一项技能,也是验证设计成果的重要因素。如果缺少了数据分析而单凭个人主观因素的话,我们难以说明设计效果的好坏,毕竟现实中会出现各种意想不到的情况。


 所谓“无对比,不分析”,一般数据分析都是通过数值进行对比,去查看数据相对是上升、下降、还是持平,是否跟当初设计预期的一样,对于初期的产品会更关注产品的一些DAU(日活数)、GMV(成交总额)、以及支付人数等,因为这些数据的增减是直接影响到整个产品的存活,如果产品的DAU不断下降的话,那你就要马上查找原因,及时调整,避免恶性循环。


一般情况下,像日活数那些简单的数据可以直接问后台同学就能获得,而用户某些环节的存活率、转化率等就需要利用【数据埋点】,市场上也有很多第三方做数据埋点的,例如神策数据、Growing IO等,这里就不展开说了,但是面试的时候你能说出这些就会显得很专业。


1.8、信息架构(必须)


信息架构属于用户体验的结构层,就像产品的骨架一样,而信息架构设计就是对产品信息进行构架、归类的设计,信息架构能够防止我们对产品功能点遗漏,同时也可以通过产品大体的信息架构观察出产品设计是否合理。


一般来说(干货来了),产品架构分支可以分为度和层,而好产品的信息架构在广度和层度都是恰到好处,下面我举两个反例大家就懂了:


  1.产品架构的广度太广(不懂的看下图):信息架构的广度太广意味着页面的承载信息量特别的多,没有侧重点,这样用户点进页面后会思考很久而不知所措,最经典的就是某某宝和某同城,新用户进入到首页真的模棱两可。


    2.产品架构的层太深:信息架构的层太深会导致另外一个问题就是页面非常的多,要找到一些功能的话操作非常的困难,最常见的就是某些视频的取消会员流程(包括当年的ofo退费),你们是不是为了退费或者取消某APP会员百度过很多次?(反过来思考,如果某些功能你不想被用户发现,但是又必不可少的话应如何设计,你懂得)


1.9、业务流程图(可选)


绘制业务流程图的目的就是:梳理并分析优化业务流程。我知道很多同学做UI设计师的时候可以完全不管业务,直接做设计,但是作为交互设计师了解产品业务是非常重要的,因为不了解业务你就无法完成交互设计,优化业务场景。


举个例子:在教育考试系统中一般流程是:教育局出通知→学生报名考试→老师审核→报名通过→老师编排学生考试名单→学生开始考试对号入座→教育局公布成绩→学生查询成绩→考试结束,看这一些列的流程,因为关联特别多,如果对业务不熟悉的话设计起来会非常的不便,如果前期因为业务流程不熟悉而设计出错误的交互稿的话,后面就会特别麻烦。


那么如何去绘制完整的业务流程:


  1. 如果你的产品经理比较专业的话,可能会直接给你一个现成的业务流程图,那样就能省事很多。

  2. 要是没有产品经理的话,最直接的就是问用户,这里介绍我最常用的方法就是“一听二问三确认”。一听:先听客户代表或者业务方的介绍。听得过程中,不打断对方,以最简单的方式勾出主体脉络,即基本要素中的角色、活动、协作关系梳理出即可。二问:完成上一步后,就可以进行提问了。主要是沿着流程进行发问,重点放在分支、产物关系上。看看是否存在分支的情况,各协作之间是否有交付物。一边问,一边修正。三确认:最后一步就是自己讲一遍流程,和客户代表或者业务专家进行最后的确认。


1.10、交互原型(必须)


几乎可以说,上面所有的东西都是为了完成交互原型做铺垫的,我相信对大家来讲交互原型都非常熟悉,但是给大家分享几个经常犯错的点。


【1】页面尽量只采用黑白灰配色,避免干扰UI同学设计。这是大家经常犯错的一个点,毕竟很多同学以前是UI出身,做交互稿时也顺便配配色,这样会非常影响UI同学设计的(不在其位不谋其政,你做UI的时候也不希望有人在旁边指指点点吧),所以我们做交互稿时只采用黑白灰就够了,灰度大小就代表信息的重要程度,简洁规范即可。


【2】页面的跳转用连线表示其实就很方便了,真正厉害的人不会到处炫技。有些同学在交互稿上各种跳转、动态面板、中继器等花里胡哨一大堆,这样开发同学看起来特别的难受,所以很多时候用连线的方式表示往往是最简单明了的。


【3】如果涉及到多端设计(IOS、Andriod、PC端)的话,除非产品非常庞大,不然就放在同一个设计文档中,避免以后评审还要弄多个文件。


【4】创建一个适合自己的组件库,在日常设计中,80%的控件是可以重复利用的,做一个合适的组件库能节省大量时间(我整理了工作多年的B端以及移动端常用的组件,你们需要也可以分享给你们)。


1.11、垃圾桶(可选)


做交互文档时垃圾桶就相当于后悔药,因为一些页面如果删掉保存后是不能还原了的,因此在改稿时如果一些暂时不需要的页面可以丢到垃圾桶中,避免到最后用回以前的方案时重新再做浪费时间。


最后总结


好啦,文章分享的内容比较多,但是并不是每一部分都非做不可,文档也并不是绝对的规范,每一家公司交互设计师的职责可能都不太相同,所以大家可以根据自身需求因地制宜,曾经有人说过,设计的本质并不是把简单的事情做复杂,而是把复杂的事情做简单,所以我希望有一天你们能把交互设计文档做到很简单,而把产品做得非常好,然后跟我分享经验,这才是我写文章的初心。


文章来源:站酷 作者:北沐而川

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


移动端交互控件规范总结:弹窗(二)

周周

以下内容主要以 iOS 官方设计指南和网络上的相关文章为参考,但同时也包含个人理解与思考,并非绝对、唯一的标准。

日历

链接

个人资料

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

存档