首页

用信息架构,来落地产品架构

纯纯

让信息架构,和产品架构,产生“化学反应”

这个信息架构的角度,具体而言,就是只包含一级频道的交互设计。


核心功能、辅助功能、重大功能,作为产品的三大类功能,更多是从发展的角度来划分。


除此之外,大部分 App 都还有一些非常基础的功能,比如“个人资料”、“我的收藏”、“设置”、“搜索”等,此类功能,我们称其为通用功能。


核心功能、辅助功能、重大功能和通用功能,是产品的四大类功能。


总的来说,本文主要以底部 tab 导航的 App 为例,探讨一下,如何在一级频道来落地产品的四大类功能。



01 宏观上讲,怎样更好的摆放四大类功能?


网易云音乐是我个人很喜欢的一款产品,日常用的也比较多。不过,它的新版(6.0 系列)给我的直观感受是,有点复杂了,我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。


给我类似感受的产品,还有 Keep 和知乎。


究竟是什么,让我觉得,这些产品变得有点复杂了?


个人简单总结了一下,最直接的一个原因,是这些 App 都新增了重大功能,并给这个重大功能单独加了一个一级频道。


比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道,都分别占用一个一级频道。



企业为什么这么设计?个人的猜测,这些重大功能于企业而言,很重要,要么肩负商业化使命,要么被寄予厚望,所以企业就单独给了一个一级频道。


这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系,那我们就需要考虑更多的因素。


之前在信息架构那篇文章里,个人的建议是,如果想让 App 始终保持简单,那就只保留 4 个 tab,也即只有 4 个一级频道。


如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能,以接近最优的方式,安置在寸土寸金的 4 个一级频道上?


我想,这中间一定有一些原则,值得我们探讨和参考。


1 和重要程度保持一致


通常而言,重要程度越高,分配到的空间就越多。这是一个比较普世的道理。


也就是说,这条原则,主要会影响到,四大类功能,各自占用多少空间比较合适。


我们有 4 个一级频道,每个一级频道代表了 25% 的空间。


再来看四大类功能,按其大概的重要程度,简单的分析一下。


先说核心功能,这个最重要。


核心功能是立足之本和护城河。先换个角度看这个问题,假设有三种可能,即核心功能可以占用一个、两个或三个一级频道。


先用下排除法。三个一级频道难免显得过多,剩余的三种功能挤在一个一级频道里也会显得过分拥挤;一个一级频道的话,倒也可以,但是平分四分之一的空间很难体现出核心功能的重要性。


相比之下,两个一级频道就显得较为合适。


综合考虑到有四大类功能,通常两个一级频道也不会完全给核心功能所用。


所以,核心功能,大概占用一个半一级频道,也即 40% 左右的空间即可。


再说通用功能,这个比较容易。


此类功能通常比较多,重要程度可能不及重大功能,但是又不能没有,所以通常我们也会单独给一个一级频道,就是“我”或者“设置”之类的一级频道,大概占用 25% 的空间即可。


第三,说下重大功能,这个比较重要。


通常而言,重大功能的重要性仅次于核心功能,而且重大功能可以有多个,再考虑到通用功能一般单独占用一个一级频道。


那么,相对而言,重大功能,完全可以单独占用一个一级频道,甚至更多,大概占用 30% 左右的空间即可。


最后,说下辅助功能,这个比较特殊。


首先,很多产品是没有辅助功能的;其次,辅助功能是个小功能;最后,辅助功能的数量一般也不多。


总的来说,辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多,所以,辅助功能一般和重大功能共用一个一级频道即可,大概占用 5% 左右的空间。



2 和使用频率保持一致


通常而言,用户用的越多的功能,就排的越靠前。


也就是说,这条原则主要决定四大类功能的排序问题。


具体而言,用户用的最多的是核心功能,所以核心功能最靠前。


重大功能和通用功能,有时候很难说哪个使用频率更高,比如微信里的“搜一搜”和“收藏”。但是比较明确的是,很多 App 在诞生之初,并没有重大功能,只有核心功能和通用功能。


所以自然而然,通用功能排在了核心功能后面。


个人有个猜测,一方面,有时候很难说清重大功能和通用功能,哪个使用频率更高;另一方面,通用功能起初是排在最后的。


所以,当重大功能出现时,就延续了旧传统:通用功能依然排在最后。最终结果就是,重大功能和辅助功能排在中间。


值得一提的是,现在市面上开始出现两类现象。


其一是,有一些拥有 5 个一级频道的 App,开始把核心功能放到中间那个频道,比如 Keep 的“运动”频道。


其二是,企业开始人为的控制打开 App 时默认展示哪一个频道,而且默认显示哪一个频道,存在多种情况,例子依然包括 Keep:以前默认显示中间的“运动”频道,现在默认显示“计划”频道。


个人觉得,对企业而言,这两类做法,都是得不偿失的。


因为这样做,会让 “从左起,1、2、3、4”这个排序失去价值。没有这个前提,也就谈不上“和用户的使用频率保持一致。


而且,这种默认不显示左边第一个频道的做法,有时候会让用户产生一种被绑架的感觉(默认显示收费频道),有时会让用户感觉企业在自作聪明(默认没显示收费频道,但也没显示核心频道)。



3 符合用户预期


主要有两个预期,逻辑预期和习惯预期。


3.1 逻辑预期


用户确实很懒,但不代表用户不会思考。


比如前文提到的,网易云音乐的“私人 FM“功能,在我的认知里面,”私人 FM“和”每日推荐“一样,都是个性化推荐,性质极其相似,应该放在一起。


所以,当我在新版里的“每日推荐”旁边找不到“私人 FM”时,心里就觉得很奇怪很不解,心想这么好的功能不会是给删了吧。


后来某一天,当我在第三个一级频道“我的”里面发现“私人 FM“的时候,我又觉很别扭,不好用。


另外一个例子,Keep 的动作训练。 


在新版里面,一开始我是去“发现”频道的“动作库”找的,怎么找都找不到,跟找不到网易云音乐的“私人 FM“是一样的心情。


因为我觉得,“动作训练”和“动作库”,是很接近的一对事物,从逻辑上来讲,用户会觉得这俩事物挨在一起,或者会猜他们是不是挨在一起。


3.2 习惯预期


这里的用户习惯,主要有两类。一类是自家产品培养出来的,一类是市面上的产品培养出来的。


通常情况,一级频道的设计,是要符合用户习惯的。


最忌讳的情况是,自己一手培养的用户习惯,到最后自己再一手去打破,这样很容易引起用户的烦躁、不满和失望等负面情绪。


比如 3.1 段的两个例子,同样也没有符合用户的习惯预期。因为在最开始,网易云音乐的“每日推荐”和“私人 FM“是挨在一切的,Keep 的“动作训练”和“动作库”也是融合在一起的。


4 良好的扩展性


就一级频道而言,重大功能和通用功能是最有可能扩展出更多子功能的。所以,就扩展性而言,需要重点照顾到这两类功能。


通用功能大部分都收纳在“我”这个一级频道,通常也是一个列表的样式,天然自带良好的扩展性。所以,扩展性的难点和重点,最后是落在了重大功能这里。


在一级频道,重大功能的展现形式,通常有两种。


一种是像核心功能一样,直接把重大功能的内容铺陈出来,典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来,只展示一个入口,典型代表是微信的“发现”频道。


对企业而言,现实问题是,当重大功能的数量上升到两个、三个甚至更多时,如何展示他们?


市面上的常规做法,也是两种。


一种是像网易云音乐和 Keep 这样的,直接开辟一个新的一级频道,供重大功能使用。还有一种是微信这种,把所有重大功能都收纳起来,有新的重大功能出现时,新增一行列表即可。



个人推荐微信这种做法,因为这种做法的扩展性最好,可以应对无穷尽的重大功能。


至此,我们简单总结一下。个人看法,四大类功能,具体咋摆放,并没有标准答案,但是可以参考以上 4 个原则。




02 微观上讲,有没有补充和例外?


有。借这个话题,聊两个比较特殊的问题。


1 顶部标题栏的两侧,适合放什么功能?


先来分析一下这个位置,顶部标题栏的两侧,位于屏幕的左上角或右上角,是个很显眼的位置。


个人认为,有三类功能比较适合这个位置。


第一类,是和当前页面内容有密切关系的功能。比如“编辑”型功能,可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能,可参考 Twitter 首页信息流的发推图标。此类功能,最适合这个位置,而且一般也没有更合适的位置来摆放他们。


第二类,是比较高频的通用功能或重大功能,比如搜索、消息、设置等。


第三类,是某些高频功能的快捷入口,比如微信的扫一扫和收付款。



除此之外,如果是一个比较低频的功能,不管是通用功能、重大功能还是辅助功能,放在这里,都不合适,因为会对用户形成打扰。


2 一个功能,最多可以出现几次?


大部分功能,在 App 里只会出现一次。但在日常使用各种 App 的时候,我们也会多次看到同一个功能,在不同的地方。


有时候,能看到三次,比如搜索,在微信、知乎和网易云音乐都出现了三次,我们也不会觉得哪里不对劲儿。实际上,搜索虽然出现了三次,但也没有引起我们的特别注意。


还有一些功能,是出现了两次。我们在第二次看到的时候,会有点烦躁,心想怎么又来了;有时候会有点困惑,心想下次我该用哪一个,哪一个最快捷。


这中间有什么原则可以参考吗?


先来看下搜索,在微信、知乎和网易云音乐,都是比较高频的功能。换句话说,用户在不同的一级频道,都有可能需要搜索一下,所以搜索出现三次,在不同的一级频道,是有这个需求存在的。


搜索以外的功能,个人认为,只有一类适合出现多次,通常两次足矣。


那就是,此类功能确实比较高频,同时路径又比较长,使用起来不够方便。这时候,就适合给此类功能一个快捷入口。这个快捷入口,一般是出现在标题栏。



一个功能,如果只是单纯的重复出现两次,两次都没出现在标题栏。那给用户的感觉,就是,App 并不是在给我提供快捷入口,而可能只是通过重复的方式来强推这个功能,就容易产生烦躁和困惑的负面情绪。



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

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

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

浅析用户体验四维度

纯纯

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

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

 

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

 

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

关于设计中的组件化思维

纯纯

组件化思维对于一个设计师来说十分重要,它能够帮助你更好的去进行产品的设计,那么组件化思维对于设计者都起到什么作用?

1.符合产品功能逻辑,组件化的设计理念能帮助设计符合产品功能逻辑。

 

2.有助于保持交互一致性,在一个项目里,选择日期应该是统一的交互方式,在整个产品中就应该只有一种存在形式。所以时间选择器就是一个组件,一个可以复用的组件,如果你没有组件化思维,很可能出现好几个不同的时间选择器,一会儿是流轮拨盘,一会儿是日历,一会儿又是下拉列表,这样的设计绝对是不能上线的。当然该统一的地方还有很多,比如:错误提示的形式,讲度条的交互方式,导航栏和按钮的样式。表单,下拉菜单等等。

 

3.减少开发工程师的工作量,开发时使用不同的技术,了解不同技术之间的差异,设计时按照每个开发软件的组件来做设计极大的减少了开发的时间.

 

4.保持视觉风格的统一,在同个项目不同页面按钮等组件的样式上应该保持统一。

 

5.便于多设计师协作组件化设计是大型设计项目的必要条件,多人协作完成项目时,应当保持视觉统一规范,组件化建立就起到了至关重要的作用。

 

6.便于修改设计,设计总是需要修改优化的,只需要根据需求调整需要调整组件即可。

 

针对各种组件的开发软件做了以下介绍,欢迎在评论区进行补充与探讨!

 

echarts
 帮助各行业进数据处理以及分析,一键生成饼图,柱状图,甘特图,折线图等多种图表;简道云的图表分析

 

各种图示效果样式案例可供设计者参考

 

https://echarts.apache.org/examples/zh/index.html#chart-type-line

 


Ant Design

ant通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验,规范设计的设计思维,有丰富的设计资源与组件,对设计样式的表达起到非常好的参考作用

https://ant.design/index-cn

 

Element

Ant Design稍加相似,可供设计者作为辅助参考

 

https://element.eleme.cn/#/zh-CN/guide/design

 

 

另外其它的开发工具:

React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目

 

Hook 可以中文译为“挂钩”或者“钩子”,逆向开发中改变程序运行的一种技术,在逆向开发中是指改变程序运行流程的技术,通过Hook在别人的程序中。需要了解其Hook原理,这样就能够对恶意代码攻击进行有效的防护

 

 

Umi 是一个可插拔的企业级 react 应用框架。 插件化 umi 的整个生命周期都是插件化的,甚至其内部实现就是由大量插件组成

 

 可扩展 Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直

 

Vue 有两大特点:响应式编程、组件化。其优势为:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。它的第三方ui库很多节省开发时间。https://cn.vuejs.org/v2/guide/index.html

 

 

vue是我们的常用框架,大多数客户的选择。ant➕react➕hook➕umi,中后台这个也比较多,最近的项web端的基本上是这两种选型。

其它常设计有wpf/qt/mfc/开发,在c++c#下运行的客户端程序

 

 

其它例如:

Bootstrap Twitter推出的一个用于前端开发的开源工具包。是基于 HTMLCSSJAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷

https://getbootstrap.com/docs/5.1/examples/


developermaterial汇聚了ios、安卓组件框架及人机交互指南,相关链接:

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.google.cn/docs/quality-guidelines/core-app-quality

https://material.io/components?platform=android

 

蓝蓝设计——    作者:纯纯

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

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

蓝蓝设计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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



2022设计作品精选 | 数据可视化

seo达人


展示一:

图片

[png 到 jpg 输出图像]

[优化输出图像]

[优化输出图像]

图片

[优化输出图像]

[优化输出图像]

图片

[优化输出图像]

[优化输出图像]

[png 到 jpg 输出图像]

 

[优化输出图像]

 

 

展示二:

图片

[优化输出图像]

图片

图片

图片

 

 

展示三:

图片

图片

图片

图片

图片

图片

图片

图片

[png 到 jpg 输出图像]

图片

 

 

展示四:

图片

图片

图片

图片

 

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

 

展示五:

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:黑马家族(公众号)
 
作者:黑马青年
 

转载请注明:学UI网》2022设计作品精选 | 数据可视化

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



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

周周

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档