首页

聊聊状态开关按钮如何设计

纯纯

我遇到的这个例子,和“概念模型”有关,在这里分享给大家。


这个酒店房间的开关是这样的:


酒店床头开关



酒店客厅开关



这个开关是触控式的,开关本身有亮/暗两个状态;大家迅速看一眼,我想请问大家,你们认为,亮着的开关(图1的5个灯,图2的右上、左下2个灯)对应的状态应该是打开的还是关闭的?




如果心中有了答案了,继续往下看。




之前在文章从交互维度量化用户体验中我说过一次我个人理解的最小交互模型,大概是下面这段话:


狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着一定的心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示(红先黑后):


那随之而来的另一个问题就产生了,人进行交互行为时的心理预期是从哪儿来的?


人初生的时候都是一张白纸,每天重复的交互行为产生的心理预期会随着不同的教育、家庭进行变化;今年我们家在广州过年,我第一次见到两岁的小侄子,通过这一周对小侄子的观察更能体会出人其实是有某些说不清的潜能在里面的,举个例子,有一天小侄子生病了,要吃两种药,一种是甜的,一种是苦的;吃甜药的时候小侄子很开心,愉快的呀呀的说这药是甜的,而吃苦药的时候小侄子也是皱着说这药好苦,关键的问题是,出生两年来,家人从来没有对他描述过苦味是什么,也没有明确告诉他这两种药有一种是“苦味”的,但是两岁的小孩子就能尝到苦味的药在没有接触过“苦”这个词的时候就讲得出来这是“苦”。


再举个例子,还是我的小侄子,我们贵州人过年一般都会真金白银的打麻将,小侄子目睹了几天我们在麻将桌上用大把的零钱来支付,有一天我们去公园玩,遇到一个熟人给小孩子了一个红包,我们就问他“钱是干什么的呀”? 我小侄子脱口而出:“钱是用来打麻将的呀!”


为什么会发生这样的现象呢?


大概是现在的人买东西都用微信支付宝支付,所以对于小孩子的认知来说,他们由于没有见到过纸币参与交易的行为,而这几天不断被我们麻将桌上的现金冲击视觉,才会突然脱口而出这句话。


可能在我小侄子的认知里,手机才是用来买东西的。


我们互联网圈的设计行业其实能形成理论的东西不多的,大多数时候为了佐证某些东西,我们需要从心理学、社会学、行为学中找到一些理论支撑。我在做产品设计的过程中,最长这么时间一直使用的一种方法是思考用户在这个页面的心理预期。(比如在商品详情页,业务目标肯定是引导用户购买,但是用户心理上之所以点进了这个商品的详情,无非是在有购买意愿的基础上,需要一些信息去辅助决策,这时候如果你仔细思考并模拟一下你自己在购买时候点击详情页的行为,其实会发现其实影响决策的信息大多不是价格(因为价格在上一级的列表页已经标明了),更多的可能是产品描述和用户口碑等等)


在做尤其是app设计的时候,能明确每一个页面的业务目标和用户点进来的预期,其实是一件非常重要的事情,大家可以多留心在这两点上。



好的扯远了,回到状态开关的事情上来,还记得刚刚的那个图么?


酒店床头开关



酒店客厅开关


我相信绝大对数的人第一反应都是,亮着的开关对应的灯应该是亮的,因为这个符合常识,但是如果这个酒店也是这样的话,我就不会举这个例子了,没错,上面开关亮着的灯是关的,没有亮的开关对应的灯是打开状态。


我相信设计这个开关的人是为了让用户在夜晚起夜的时候使用方便,但是他完全可以用更加高明的办法,比如换成夜光材质之类的。这种设计师很愚蠢的,我观察这么多天下来,我们所有亲戚每次开关灯几乎都会误触,因为我们的心智一直一直认为的是亮着的开关亮着的灯。


这里就牵扯出一个问题,我们在app设计中如何去设计状态开关的问题。


首先需要明确,最无歧义的状态开关一定是需要具备两个意符:

其一是表征当前状态

其二是表征用户点击之后的状态。

而现在市面上很多app在这两个意符上是混的,一般都知道用icon的样式来表征当前状态,但是下面的辅助文字则是表征当前状态的和点击之后状态的都有。


这就会让用户很蒙。


比如相机app、短视频app、K歌app中就比较明显会有很多状态按钮,如下图所示是某相机app的截图,这样的设计就是“有歧义的设计”,比如“延时关闭”和“补光灯关闭”这两个文案,会很容易让人困惑这文案指代的是当前状态呢还是点击之后的状态呢?


给大家提供一个我个人的小tips:


设计状态按钮,尽量把当前状态和点击行为拉出两个层级关系来设计。


当前状态可以体现在icon上,但是不能只体现在icon上(比如他这个延时关闭的图标有一个x,但是补光灯关闭又没有x,这就更加歧义了)


比如如果是我去设计它这个按钮,我会这么设计:



这样的话,确实,用户操作复杂度上会多一级(之前直接点icon,现在点icon之后需要再点开关),但是用户完全没有认知成本。


这就是我说的把当前状态和点击行为拉出两个层级关系来设计。其实这个牺牲交互成本减少用户认知成本的方法在交互设计工作中经常被我们使用,当我们遇到一个问题实在是一步很难理清的时候,不妨可以多尝试这种思路。不过这种提高复杂度的减少认知的方法,不适用于业务强指引型页面(比如购买、导航之类)


文章来源:站酷   作者:Seany

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


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

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



如何设计好消费向app产品

纯纯

本文算是一篇产品分享文吧,主要科普一下消费向内容在KillTime方面都是怎么玩的。



Part I - 消费向产品及其发展科普

大家看上面那句英文,我用的是“Spend Oriented”,Spend这个词本身是一个偏中性的词,不光有花钱的意思。“消费”一词其实如果大家去查它的原始定义是指“利用社会产品来满足人们各种需要的过程”今天在这里说到的其实是“用户在上面消费内容”的app产品,这个内容可能是图文,可能是流媒体。也就是说,今天讲的app都和“Kill Time”有关。

那我们不妨先来看下面三页ppt:


1.消费向产品的演变:

我大概把今天要讲的消费向产品分为四类,第一类游戏略过就还剩三类:

a.图文Feed类app产品:

这一类产品其实是经历了从门户到app的演变的,早期互联网时代,所有的图文内容都在门户网站上,这时候的门户网站比如新浪搜狐网易,他们其实是内容为中心,用户围着内容转,用户会自己去挑选甄别自己想消费的内容进行消费。


然后从门户到app的过程中,最开始比如搜狐新闻app他其实是一个从门户到app的纯移植,他的本质没有变化,还是以内容为中心,用户围着内容转,不过后来随着移动互联网的发展,因为移动端的特性是“高频多次”,他就不像门户我只能上班的时候坐在电脑面前看,移动端的特性决定了我无论拉屎还是乘车,随时随地打开都可以看,那这个时候如果还是内容为中心,用户每次进来都需要进行一个很长时间的甄选内容的过程,真正消费内容的时间就相应的会被压缩,这时候就有了整个新闻移动端app产品从“内容为中心”到“用户为中心”的转型。第一次有了用户中心的概念,比如有了账号系统,用户可以收藏点赞(Mark)一些的自己感兴趣的内容,然后通过用户的点赞阅读点击行为进行推送和订阅:

除了新闻门户之外,还有一类图文产品就是兴趣聚合,最开始大家会发现都是一个产品主公一个方向,大家想看什么内容就去相应的地方:比如天涯猫扑就是一个讲故事和段子社区,榕树下主攻青年文学,虎扑是体育相关。大家在自己垂直的领域发展,互相也不怎么干涉。但是这些UGC平台的本质还是生产者,是人,随着每个平台都有自己的大V出现之后,网易推出了博客,这是一个以人为中心的分发结构的产品,除了以人为中心的分发结构外,百度心里想,不是之前的门户都很垂直么,那我是不是可以建一个平台,让各种兴趣在我这里以”吧“的形式聚合?于是就有了一个兴趣内容聚合平台”贴吧“,然后随着发展,大家发现博客这种东西用户消费成本太高了,一个大V一篇文章好几千字,生产内容也费尽,用户看着也费尽,那不如就做一个微型博客更多的让人发声就好了,于是有了微博。

△.既然说到这个了,在这里多扯远一点,其实互联网发展的进程都是这样,绕不开平台和垂直,大家想想五六年前的电商产品是不是一个道理,当年只有淘宝一家是平台,其他的,比如京东主攻家电,一号店是零食,聚美是化妆品,美丽说蘑菇街则是衣服(蘑菇街主打职场美丽说主打校园)


b.泛娱乐类类产品 & c.工具类产品:

泛娱乐类产品我这个框子画的很大,大概最初的原型是为了解决我们“听歌”和”看视频“的需求,然后最开始的几大门户大家都知道优酷土豆、腾讯视频、爱奇艺、搜狐视频、乐视等等。最开始那几年互联网基础建设不行嘛,科技也没发展到位,所以那时候视频清晰度都好低,而且下载率非常高,大家一般消费内容会采用”在家wifi先下好然后再看“这样的办法,但是随着基础设施的加固,大家发现流量好便宜,这时候在15年才开始有网红直播这一块的业务出来(游戏直播是很早就有的哈),我个人会认为催生网红直播产品的归因是科技进步流量不花钱了。随着网红直播类兴起的另一类产品就是短视频类,我个人认为短视频产品的出现本质归因除了流量不花钱了之外,更多的是解决之前门户视频网站内容消费成本过高的问题,众所周知,现在人越来越懒了,一集电视剧40分钟,很难坐得住不分心的看完,所以现在视频app出了倍速播放。这本质的原因是用户消费内容的High点(达到满足的点)越来越高了。

再说听歌这条线的演变,最开始听歌,然后唱吧、全民K歌,国外的Starmaker等等出来做了唱歌app,这时候的app本质是一个工具,但是用户UGC内容的时候沉淀了很多作品在这些工具app里,所以这一类产品就开始做去工具化,变成了一半社交一半工具的产物。另外K歌产品火了之后,才有的FM类产品,因为都是消费音频和音频直播嘛有共性在这里就不展开了。最后就是这类音频产品不满足只做音频,所以就开始做视频了,这就导致你现在打开全民K歌或者唱吧或者国外的好多app,你会发现只要是娱乐产品都有短视频的原因。


2.消费向产品的核心目标:

GNT是一个罗振宇2016年年终演讲时候提出的词,我们假设平均每个人每天8点到家到晚上12点的时间是可支配时间,那中国网民每年新增数量(今年是1000w)已经稳定在和出生数量一样了,所以我们认为网名总数不太会有啥变化,比如之前我用三个小时在优酷腾讯爱奇艺上看电视剧,一个小时听网易云音乐,现在我大概只用一个小时看电视剧其他三个小时都在刷抖音,这时候,大家会发现消费向产品的决战维度就不是自身的垂直领域了,之前我们会认为视频门户哪家片源优质哪家就牛逼,现在不是的,现在的产品除了垂直比较之外更多的竞争是在时间维度的较量,这是为什么抖音这种产品突然一下很火的原因,我稍后会着重说抖音这里就先略过了。

3.为了占用更多的用户时间,设计师可以发力的点:

内容源是否优质(这里的”优质“指的是内容和用户的March值)其实是用户是否消费的最大的一个指标,因为内容源和用户的March值主要反映在下面的前两个问题中:

给用户展示什么内容?

这些内容的优先级是怎样的?

这两个问题一般我们设计师并不能控制,关于什么时间什么环境下给用户展现什么内容,往往跟用户历史行为和算法有关,如果大家看了头条的算法公开课大家会知道头条的推荐算法其实是有三大类(内容维度、用户侧特征、环境特征)几千万个向量特征去控制的,如果不是纯算法推荐也会有运营去干预内容的露出,所以这部分其实设计师可以干预的比较少,我们真正可以干预的东西是后两个问题:

如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


Part 2 - 消费向内容的主流呈现形式:Feed Flow

△.谁能告诉我一下Feed Flow(我们工作中所说的”Feed流“中文怎么翻译?Orz...)


1.RSS vs Facebook's New Feed

如果大家是一个早期互联网民,一定听说过RSS的概念:

RSS (Really Simple Syndication简易信息聚合协议)是一种的工具,使得用户可以在客户端借助于支持RSS的聚合工具软件,在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。举个栗子:如下图所示,小张在pc时代,每天会定时打开华尔街日报网,ChinaDaily,王老三的博客看里面的内容,但是每天都打开三个网站让小张觉得很烦,这时候借助RSS工具,他可以把三个(支持RSS协议的)内容源聚合到一个第三方的RSS工具上,这样他就不用每天反复打开三个网站了,除了获取这三个网站的陈旧内容之外,这三个网站每天的更新内容也会被实时呈现在这个RSS中:

一个RSS聚合工具内,每一个单条内容源,就称为Feed(取的是滋养的意思,就是源源不断的满足用户消费需求的含义),那早期的Feed序列大家也看到了是从RSS衍生出来的概念,Feed流的排序也是用户定义的,比如可以按照Timeline排序,或者是按照用户自定义Tag聚合,或者是按照interest标签(收藏,喜欢,点赞都属于泛意义上的interest),那大家就明白了,RSS里的Feed流本质上是一个用户自定的,关于内容收集的工具而已。

到了2006年,我们的爸爸Facebook开始做社交,因为Facebook是人和人的关系聚合,其实当时Facebook就借用了Feed的概念,创造出了以“关注Follow”为核心的新型Feed,在书上(我忘记是哪本书了)把它称为Facebook‘s New Feed,它其实有三个特征:

1、内容源从URL到人的状态(其实本质也是一个一个URL序列)。

2、不仅仅是Timeline的基础排序,更多的指标参与进来决定内容排序

3、订阅内容中夹杂费非订阅内容(参考微博),让用户永远刷不完没有尽头的消费

上图是RSS和Feed的对比。

到了今天,其实几乎市面上所有消费向产品(新闻类、微博、Instagram、Snapchat、短视频、等等),都在Facebook New Feed的基础上进行了改进,所以今天我们把这种New Feed更习惯的叫做Feed,大家可以去PM社区之类的搜Feed能发现一堆文章可以阅读,在这里就不赘述了。


Part 3 - 匹配、分发与消费

知道Feed的概念能方便我们理解接下去的问题,还记得接下去是什么问题吗?

1、如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

2、如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


1.先分发,再消费的app模型:

我们不妨先来看主流的Feed分流的两种模式:

一种是微博这样的关注序列插入非关注序列(推荐、广告等),另一种就是关注序列浏览完用户拉不出新Feed的时候有个分流按钮提示,别小瞧这个小提示,往往能带来每天5-7%(我自己的工作经验数据)的新模块引流。


再说用户迅速找到自己感兴趣的内容进行消费的问题,这里就涉及到内容源的呈现方式。我之前唱吧的那篇文章举过这样一个例子:

唱吧7.0到8.6的三次改版牺牲了展示效率(从7到5)HighLight了文字信息,是因为我们发现图片信息不足以让用户做兴趣判断,大家看下图就明白了:

快手的图片本身就是内容的简略呈现形式,大家可以基本通过图片来得知里面的内容大概是什么,如果遇到用户难以判断的,快手在用户上传视频的时候鼓励用户打字说明,比如大家能看到图中的红字,就是说明视频内容的。这样的话,用户通过图片能清晰得到点击之后的内容预期,比较符合用户心智。大家再来看唱吧,大家会发现图一图二图三都是漂亮的小姐姐,这个就没办法告知用户里面的内容究竟是啥样的,那支撑用户点击进去的除了颜值之外,更多的可能是歌名,和这个人的歌手等级,收听量这样的数据才能支撑用户点击。唱吧这么改之后我印象中模块CTR是有明显的提升的,但是具体数据我离职太久忘记了...

所以其实内容源的呈现方式本质上和内容相关,这里的UI应该以“如何让用户迅速找到自己感兴趣的内容”为核心设计目标去设计,具体问题具体分析咯~


再来说常见的消费向内容的交互模式,最常见的就是Push&Back的模式:

所谓Push&Back就是用户一次点击进到详情页消费内容,看完之后再点击返回回到Feed列表,然后继续在列表里寻找下一个想要消费的内容的模式,比如下图:

传统的Push&Back交互成本太高,用户看完之后需要点击返回,然后浏览内容列表选择自己想看的,然后再次点击进入。这种就是很难达到沉浸式消费,用户跳出率和关闭率都比较高。

于是有了另一种模式就是让用户不跳出,直接挨个在当前Feed下的内容:

举个例子就是知乎的“下一个回答”点击按钮和下拉交互,以及微博的视频关灯流:

这种模式使得用户在消费内容的时候交互极其便捷,轻轻滑动或者一次点击就可以消费下一个内容,大大增加了沉浸的消费体验:

关于如何尽可能的降低用户消费内容时的交互成本这个问题,上面这一种办法,其实还有另一种,就是所谓的交叉推广,大家看下面这个图,前两张是头条Feed,后三张是陌陌:

头条点击一个视频后,下面会给你推和这个视频相关的一些视频(可能是内容维度相同都是做饭的,可能是用户侧特征相同都是美女做饭,可能是环境特征相同都是教你明天中秋节怎么做月饼)让你去观看(而且你发现没头条iOS版本和抖音iOS版本都是默认隐藏statusbar的,你看不到当下几点了,为的就是让你一直看下去...)。

陌陌这款产品就更有意思了,比如我点击第二个入口(右1)进去,这时候有个上下滑动切换的交互,app的指示意是:“切换到下一个主播”,那按照常理来说,我松手之后,应该消费的是第三个入口(左2)的内容没错吧?但是你会发现事实并不是这样,它其实跳转到了一个全新的Feed序列,所以交叉推广的概念如下图所示:


2.直接消费的app模型:

上面我们讲的都是先分发再消费的模型,它一定要有一个内容承载的Feed页,然后用户根据自己兴趣去选择性的消费内容。那本着:“降低用户消费内容时的交互成本”这个思路,有没有可能去掉分发这个步骤,不要内容承载页,直接上来就让用户消费呢?这就是大家熟悉的抖音:

Musical.ly(后改名Muse然后被抖音抄然后被抖音收购)这款app创造了一种直接消费内容的产品模型,这种模型有什么特征呢?

1、交互成本最低,打开即消费,一次上下滑动即分流,左右滑动(或一次点击)即分流,极强的沉浸性。

2、依靠算法把很多Feed序列整合成了一个无穷尽的Feed,完全依赖算法和用户行为数据、短视频数据判断展示优先级。

我们不妨来对比一下“先分发再消费”和“直接消费”的两种产品吧:

“先分发再消费”类的产品,由于有一个内容承载页,用户可以选择性的点击消费,比较尊重用户。而抖音这类产品呢,直接把内容强制用户消费,本质上是带有一定胁迫性质的。直接让用户消费内容的比如抖音类产品,不给用户自主选择的机会,胁迫用户消费产品提供的内容,如果内容足够优质的话会有奇效,如果内容差强人意,戳不中用户的High点,则有可能适得其反。


我认为抖音这种直接让用户消费内容的产品模型本身是一把双刃剑。


大家玩了这么多app应该也能发现了,市面上壳子抄抖音的产品现在特别多,大家会发现只有抖音好看,别的都是看一两个就看不下去了想关掉,这里的原因就是因为用户被胁迫消费你提供的内容。

我们假设你是一家内容实在不怎么行的app,如果强行用抖音的模式,你第一个内容是一坨屎,用户吃了一半滑动跳过了,这时候他发现第二个内容还是一坨屎要给他吃,用户意愿会下降得特别厉害,甚至一两个视频过后就直接关掉了。但是如果是先分发的模型,里面都是一堆屎,但是我告诉你了,第一坨屎是草莓味的,第二坨屎是橘子味的,这时候用户自己想消费哪一坨内容是他自己的点击选择,和你无关,你app设计者不用承担胁迫用户消费的风险,自然用户对自己选择的内容的容忍度也会高一些,可能不会看一两个就关掉了,没准儿会看四五个。这样是不是浏览时长就增加了?


给大家讲一个理论性的东西吧,抖音内容的理想时间模型(名字是我自己随便取的):如下图所示

我们假设理想状况下这个用户没别的事不会被中途打断,只要想刷可以一直刷一辈子抖音,然后我们来研究内容质量和用户浏览时长的关系:我们假设,每一个个体用户都有一条平均匹配线Marchline(这个匹配可能是内容维度的比如我喜欢看dota不喜欢看lol,喜欢科普不喜欢鸡汤等等),内容只要比匹配线高,对于我们的心智就是一个正向刺激(Positive)。

我们假设每个视频都是15s,大家会发现你们每天打开抖音的第一条视频总是很优质(其实抖音最初冷启动的时候准备的视频都是1500-3000一条买的优质脚本之类的,花了几千万呢,所以这些优质视频源奠定了第一波龙湖留存),如果第一个视频总是很优质,用户很喜欢,那心智就会上升,是一个正反馈,然后第二个视频如果也很精彩,那就会把用户推向high点,如果这时候第三个视频一下子推了一个特别烂的或者没算准给用户推了一个用户不是很中意的,理论上用户交互成本很低,可能只看了一半划过就行了,但是如果连续两三次都给用户推了很烂的内容,那用户的负向刺激(Negative)越来越多,一半两到三次就退出了。

在这里面有一个我总结的思考就是,用户的Marchline其实是浮动的:

Marchline(new) = Marchline(old) + △Willing

用户每次打开app到关闭app的过程中正负向刺激的向量和。

所以本质上抖音这种点开即消费的短视频设计方法,是对自家内容极度自信之后的产物,记住抖音模型是把双刃剑,如果你不是对自家内容那么自信或者不愿意花钱来砸内容,就尽量不要用抖音这种交互,很容易塞用户一嘴屎得不偿失!




3.一边消费一边分发的app模型:

上文已经讲过了快手(先分发再消费)和抖音(直接消费)两种产品模型。

他们各有利弊,但是在最近半年,热爱创新的产品设计师们在短视频领域让我见到了眼前一亮的第三种模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一个独立的IGTV app),它采用的是一种创新的一边消费一边分发的模式,可以说这个创新是很亮眼了,大家有空可以去下载体验一下:


这款产品默认打开是图1所示,后边的视频是在播放的,这就满足了直接消费,但是下面有一个推荐列表可以滑动选择,满足了分发,然后如果需要沉浸的观看某个视频,手指在图1上下滑就会变成图二,这就变成了一个完全沉浸式的抖音,和抖音的区别是抖音采用上下切换,IGTV采用左右切换,它最绝的地方是把消费属性做到了极致,甚至在搜索或者在发评论的时候,后面的视频也依然在播放。

这就很好的解了交互效率和分发的问题,大胆预测IGTV的交互模式是明年短视频、视频直播、视频社交抄的重点。(其实现在已经看到Azer之类的产品在大量采用这种交互了)

总结一下吧,其实设计的本身在解决问题,只不过随着时间的推进,大家的认知层次会逐渐升高,最初我们认为快手这种分发效率过低,于是抖音出来了之后大家都抄抖音,但是别的app没有抖音这么好的内容,于是取了折中有了我个人认为更合适的IGTV这种交互模型。

其实今天这篇文章想要阐述的一个思想是“目标导向的设计”,我们为了解决一个又一个的问题,在不断解决问题的过程中交互一次一次的微创新,微创新到一定量就会变成一个大的创新。每次看到很多有创新的产品都会感觉到欣喜,作为设计师大家也可以多看一些app产品,大量的试用不同的app产品,然后归类总结一下,相信也会有所收获。


文章来源:站酷   作者:Seany

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


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

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


app中的交互手势和意符设计

纯纯


PART 1 - 唐纳德诺曼关于交互设计的可视性的基本原则


唐纳德·诺曼所著《设计心理学1-4》一直被认为是设计行业经典,我在读这一套书的时候最令我感到共鸣的不是后来被大家大书特书第四本《情感化设计》,而是第一本《日常的设计》,这本第一本书最精华的内容是阐述了交互设计的基本原则,这个原则无论是对工业设计中的人和物件交互,还是说是建筑中的人和空间交互都有很深刻的指导意义。

作为一名app产品设计,对于这几个含义理解之后,融汇到app设计的情境下,会让你对之前工作流中的『交互设计』有全新的认识。

众所周知,交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科,本质在于可交互,而可交互的前提,是可以被感知(这个我在app的视觉美成因分析那篇文章里面已经说到过了),那么被感知的方式,往往是和人的五感有关。

触觉,听觉,视觉,味觉,嗅觉。只要能被人的五感所感知到,不论是和空间,和机器,和生活中的物件还是和人,只要发生五感的共情,我们就说是可以被交互的。(注意,本文中不考虑复杂多感交互,并且只考虑交互的一方是正常生物人。)

在人的五感之中,本文依旧着重讨论视觉,因为科学研究表明,在人五感的感知信息中,视觉视觉占比达到了惊人的83%。(其中听觉11%,嗅觉、触觉、味觉机加起来占比6%),而不管是什么设计,如果可视性不佳,都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关,这五中基本概念分别是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反馈(Feedback)和概念模型(Conceptual Models)。


i.示能(Affordance)

示能的概念和内涵来源于吉普森(J. J. Gibson)。此外,关于有形物品如何传达出人们与它们互动的重要信息,这个特性被吉普森命名为“示能”。

"示能"这个词,狭义的理解一下,是从可视性的角度明确了一个物理对象与人之间的关系。示能是物品的特性与决定物品预设用途的主体的能力之间的关系。示能的体现,由物品的品质同与之交互的主体的能力共同决定。示能的存在与否取决于物品和主体的属性。

还是举那个诺曼最经典的例子,如下图所示:

从视觉上看这张图,我们从以往的生活经验联想一种方形的,带纹路的黄色物质,再配合长期的视觉线索,我们会知道这张图上是一个木块,那从我们的视觉线索上,知道这个木板很细,(应该)能够轻易被折断;而且很轻,(应该)可以轻易被搬走。这些就是我们通过视觉判断这张图上呈现的"示能",而明确的我们和图上这个木材的交互关系。

那再看这张图:

我们通过生活经验的联想可以知道这是一个木门,为什么会区别这是木门而不是上面的木材呢?主要原因是因为这上面有个『把手』。在人的视觉中,有时候观测物体的某项"示能"是清晰可见的,比如上图那个木材可以被轻易搬动,而有很多物品的"示能"是不可轻易被感知的,比如上面那张木材的图,我们就不能感知到这个木材是可以被『轴转动』的。

而这张门的图上,大家想象自己是一个什么都不知道的野人,看到上面这个图,只有一块特别显眼的『把手』,你作为高智慧生物,是不是应该去触摸一下,并且企图能够与『把手』进行互动?

所以总结一下,如果这个门上没有把手,作为我们人类的认知而言,可能会认为这个门不能从外面被打开,但是如果这就是一个能从外面被打开的门,但是忘记设计外面的把手,那就意味着,这个物体"示能"的视觉通道被堵塞。(视觉通道被堵塞的"示能"可以被认为是一种"反示能"),"反示能"对交互作用是起到抵制作用的。也就是说,如果这个门是可以从外面被打开,但是我为了不让大家从外面打开,我在设计之初不加从外面打开的把手,一定程度上就可以抑制大家从外面打开的这种行为。

大家明白了么?

所以为了更有效的展现某些物体的视觉可交互,示能和反示能都必须被揭示出来,即可被觉察到。如果示能和反示能不能够被觉察到,就需要人为的把它们都标识出来,我们听过一些有效的手段就可以做到,比如在直立的木头一侧加上一个『把手』,这个把手就是"木头这种物体可以被人轴转动"这种"示能"的一个提示线索,你只需要旋转把手,稍加用力即可发现这个"示能"。

所以,我们把这种揭示"示能"的符号、提示功能、线索、称为『意符』


ii.意符(Signifiers)

划重点:示能决定可能进行哪些操作。意符则点名操作的位置。

在我的文章《交互闲谈02丨app中的非必要功能和用户界面上的流量法则》中,我对app中的意符进行了自己的定义:

用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

但是这是在以屏幕为介质的用户界面中我个人下的定义,但是在实际生活中,人们寻找蛛丝马迹,寻找任何可以帮助他们应对和理解的符号。任何可能标识出有意义的信息的符号都显得非常重要。人们所需要的和设计师必须提供的视觉线索,就是意符。

这就是为什么苹果第一代手机出来的时候会被大家奉为圭臬的原因,他在视觉上示能和意符都及其突出,一块屏幕和一个按钮,屏幕用户点击滑动交互,按钮用于点击交互,学习成本很低。大家试想一下之前的塞班系统,左上角和右上角两个按钮是和屏幕左下方的功能和右下方的功能映射,虽然也很易于理解,但是当大家看到苹果这么简单的手机的时候,相信所有人都是惊讶的:



△.示能和意符的关系

示能揭示了世界上作为主体的人(这里只考虑人),如何与其他东西进行互动的可能性。

一些示能是可视觉感知的,一些则是需要视觉之后联想感知(即不可直接感知)的。

意符指示能操作的位置。

一些意符是生活中的符号、标签和图样,如门上用符号标记的“推”、“拉”或“出口”,或指示所要采取行动的箭头和图示,或是朝向某个方向的手势,或其他的说明。一些意符仅仅是预设用途,譬如门的把手,或某个开关的物理结构。

划重点:在设计中,(尤其是UI设计中)意符比示能更重要。

示能和意符是本文中最重要的,下文会说到在app中的意符设计。


后面的映射,反馈和概念模型内容我简略说:

iii.映射(Mapping)

有一些自然映射是生物本能的或者是文化赋予的,比如如按照通常的习惯向上移动手势意思是增加,向下移动意味着减少,。当一系列可能的操作是可见的,当控制和显示契合自然映射时,设备就会容易使用。(具体参考我写的交互闲谈丨01里面那个视频手势的例子)

iv.反馈(Feedback)

反馈是控制论、信息论的著名概念。当我们做出了一个操作的时候,内心的预期是需要获得反馈的,如果在一个该获得反馈的地方没有获得反馈,人就会很疑惑,比如如果一个app的按钮点击之后没有跳转或者没有新的变化,那么人就会呆滞,如果反馈不及时,人还有可能会放弃。(比如网络不好导致的跳出率,比如一个不可点击的按钮做得太逼真用户疯狂点击发现没反应之类的 = =)

过多的反馈可能比过少的反馈更恼人。设计拙劣的反馈可能是旨在降低成本,最糟糕的是不恰当的无法解释的反馈。指手画脚的人通常是正确的,但他们的评论和意见如此之多,唠叨不停,会令人分心,而不是给予帮助。我记得很多年前(大概是2010年左右),还曾经见到过一款应用,用户但凡点击无效位置就会弹出一个Error的模态框,简直是令我绝望。 = =

v.概念模型(Conceptual Models)

概念模型通常是高度简化的使用说明,告诉你事物是如何工作的。概念模型只要有用就行,不必完整或准确。概念模型通常可以从设备本身推断出来,一些模型通过人与人相授,还有一些来自手册。(比如app新版本中那些半透明箭头加上文字的功能指引就是概念模型的一种,手游中一开始的新手指引也是。)




PART 2 - 屏幕的示能与基本的交互方式


一个人和一块(未通电的)触摸屏幕,在不借助道具的情况下到底能衍生出多少种交互方式?从五感出发去深入剖析的话大概分为:

嗅觉:用鼻子闻一闻这块屏。(发现并没有味道)

听觉:用耳朵听那块屏发出的声音。(发现并听不到什么声音)

味觉:用舌头舔一舔这块屏。(诶有点咸?)

视觉:用眼睛去看这块屏。(这是一块光滑的类似于玻璃的物体)

你们发现了么,对于一个原始的屏幕设备,比如手机,我们忽略按钮什么的物理按键,光思考那块没用通电的屏幕,如果你作为一个心智未开化的人(或者现在假设你就是一只猴),你真正对屏幕有建设的交互一定是在触觉上,我这么说大家能理解吧。我们不妨换位思考一下下,你现在是20年一个准备做概念手机的交互专家,你去穷举任何人和屏幕的交互,唯一有『肢体接触』的方法就是用手指(或者脚趾)去触摸,还有就是用舌头舔。用舌头舔会有口水,不利于屏幕的识别,万一漏电了画面太美不敢想。

所以,结论是,人类看到一块屏幕设备,这块屏幕设备的视觉示能最终导向了,人和屏幕的交互手段被定位在触觉上,而脚趾相对于人类来说没有手指灵活,所以最终我们把交互规定到手与屏幕的交互(简称交互手势)。

触觉:

我们来穷举一下手指和屏幕的交互方式:(图片来自Graphicpear,中文是我自己加上的。)


不要纠结于图,往下看,其实现今的所有的手势交互,我们基本操作分为:

一根手指:单击、双击、长按、拖动、上下滑、左右滑。

两根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

三根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

四根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

五根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

双手双指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

双手十指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

(上面写的双手双指是指每只手出一个手指,比如你们在手机修图时候的某些旋转操作)

其实你如果还要穷举的话,还有双手每只手一个指头、双手每只手两个指头、双手每只手三个指头、双手每只手四个指头这些奇怪的情况,但是由于现阶段手势足够完成日常操作,所以日常的人和屏幕交互并没有引入这些别的奇怪的方案。

我相信随着科技的进步和发展,其他的双手的交互操作也会大面积的被引入进来,起码我个人在看类似于黑镜啊还有别的欧美科幻片的时候,不止一次见到了这样的画面。(我印象最深的是黑镜第三季06,女主角操控手机方式是四指横滑,然后胖大叔操作无人驾驶的骑车的时候是双手旋转打开一个屏幕,然后再通过指头拖动目标完成导航交互。)这些电影里面反应的人的未来科技中蕴含了很多交互方法,大家可以看电影的时候多留意一下。

有点扯远了,回到手机app的交互手势,(除开游戏以外)一般单指双指即可解决。而先现今科技下,相对于大屏幕一些的平板电脑,无论是ipad还是Andriod厂商,都会引入三指,四指甚至五指的部分交互手势。

由于今天的主题是手机app,那我们下一部分就着重主要来说说手机app的交互。

PART 3 - 手机app中的意符分析


在设计中,尤其是UI设计中,意符比示能更重要。

理解这句话的本质是因为一块屏幕上人需要设计图形、按钮、内容。去让他完成一些具体事情,所以在屏幕显示的软件中的意义符号就需要有很深的引导性。

还记得之前我的定义么?用户界面上的意义符号,简而言之,就是一切用户感知中可以点击产生反馈的功能集合。

我们闲言少叙,先来看一个例子:

如图是喜马拉雅FM的app首页UI,我将从功能属性、视觉焦点两个角度,一排一排的进行分析:


角度一、首先从功能属性上进行分析:

第一层:NavigationBar上的意符为『消息』、『搜索框』、『历史』和『下载』,本质上是以功能名字命名的意符,其意符的表现形式为图片+文字。没啥好说的,每一项映射到自己的功能详情。

第二层:Tab的分类共有『热门』、『分类』、『康永来了』、『直播』和『广播』,其意符的表现形式为文字,这里大家看到『热门』标签本身变成橘黄色且下面有一个橘黄色细线,这是两个符号是通过这么多年的用户教育之后形成的意义共识,意义为:当前页面状态。这里我有一个小问题,大家猜如果这时候我右滑界面(采取的交互手势是单指向左轻滑),会发生什么事情?提供两个选项:

A、到『分类』页面。
B、到『订阅』页面。

详细绝大多数人都能答对,这里的正确答案是A,滑动到下一个tab『分类』。大家只知其所以然,感觉这里的tab本身就是靠滑动手势来控制的,但是更深层次的原因呢?为什么?

这里涉及到一个滑动切换tab的遍历解构,关于这个,我的网友@HoZiN老法师(大雾)的《浅议滑动Flick切换Tab导航 - 知乎专栏》这篇文章写得很棒,大家可以去看看。在这里我做粗浅的解释,在喜马拉雅这个app中,『首页』UI中的TabBar上的『热门』、『分类』、『康永来了』、『直播』和『广播』都是归属于当前BottomBar『首页』的,所以我们在滑动操作的时候应从当前深度的最近层开始交互。

如@HoZiN的下图所示:


如果用户滑动这个页面只能在首页的5个tab之间切换,我们认为他是下图的第一种,也即是在单一Bottom模块下切换(Hozin将其命名为独立Sub Navi切换,Sub Navi的意思其实也就是底部的Bottom navigation bar的意思,我上文中就直接简称BottomBar了,个人命名习惯而已大家能懂是这个意思就行),而另一种情况是有些app当滑动到最后一个tab,再右滑屏幕会进入到第二个Bottom模块,既是下图第二种的b-C和f-G的过程。虽然现在这种设计方式已经鲜有app在继续使用了,但是我在2017年的今天仍然是遇到了一些。并且有个特别而精彩的地方在于,一般情况下,b-C和f-G的滑动切换Bottom模块的这个交互往往是不可逆的。这点就比较有趣了,关于这个更深层次的原因可能是开发的原因,可能是产品没法做到每一个Bottom都有tab,也可能是因为别的app信息架构方面的原因,在这里就不展开了。

我们再继续单独看这个第二层:

215b59510beda8012193a31bbb4d.jpg

是不是发现有一个奇怪的格格不入的叫做『康永来了』的东西混了进来?这里我就必须吐槽一下喜马拉雅的产品设计团队了,作为一个普通用户,我本能的以为这个tab下一定是和康永来了有关的内容整合,放在这里是因为运营需要,这个其实在内容平台上很常见,大家看QQ视频和爱奇艺他们不也经常这么干,本身是一件无可厚非的产品推广的入口常态,然后我滑过去了发现其实他是『每日优选』的一个频道,只不过最近主推蔡康永的这挡音频节目:

如上图所示,这个奇怪的『康永来了』的tab归属到的不是康永来了的音频详情页,而是一个『每日优选』的列表页,那我就认为这个设计是欠妥的。

我为什么说这样的设计欠妥,其原因如下:

因为我确实是有几个月没有使用过喜马拉雅了,我不记得『康永来了』这个位置之前是不是叫『每日优选』,还是之前首页只有四个tag,这个希望有关注的读者下方给我留言确认一下。

那既然我不确定,我们不妨分两种情况去分析:

第一种情况:之前首页只有四个tag,而新加了一个以具体内容ip产品名(比如康永来了也好,或者明天老罗来了也罢)作为显示,实则是每日优选的一个强视觉tag,为的是引导用户点击具体ip产品之后看到每日优选的这个列表,从而为别的每日优选这个列表页导流。(我认为对于一个成熟的产品团队,不太可能是这种情况)

第二种情况:之前首页就有『每日优选』这个tag,只不过后来为了运营或者强视觉需求,改成了具体ip产品名。(我倾向于第二种假设)

我猜测喜马拉雅的团队本质上是希望借助类似于康永来了这样大的ip露出,通过从视觉上的突出(视觉突出这一点确实做得很好)从而博取用户流量,然后让用户通过查看『康永来了』这个具象的兴趣点tab,进入每日优选的这个列表,从而为别的每日优选产品导流。

从文案层面来说『康永来了』确实比『每日优选』更吸引人,但是如果是我来设计这个地方的话,我个人倾向还是放一个每日优选的tag,毕竟这是所有用户都能懂的语言,而康永是谁?这个问题毕竟不是所有人都知道的。

如果实在是通过数据或者产品运营需求表示,我们需要强调『每日优选』的话,那我会把每日优选的视觉也做得像现在康永来了一样突出,但是名字不能变,还得叫『每日优选』。

那如果康永来了这个ip市场运营那边吩咐了,确实需要持久强推怎么办?

办法有,比如banner位就可以直接推,而且banner位可以直接跳转到具体ip的详情页,路径更加简短,用户马上就可以购买,不像现在跳到的是一个每日优选的列表,用户还得通过一次点击才能进入详情。

还有另一种极端的情况,如果有一天运营同学告诉我,banner位不允许一直放康永来了,但是市场同学又告诉我康永来了这个ip很重要,需要长时间强推。那我的办法可能是有以下两种:

第一种办法是在第三层的最前面(必听榜的前面)加一个独立的康永来了tag,这样的做法是开发成本简单易行,但是不够优雅。但是你连『小雅音响』这种智能硬件购买页入口都放在上面了,多放一个运营强推ip也没毛病啊。_(:зゝ∠)_

第二种办法虽然比较decent一些,是在第四层和第无层的中间开辟一块很小的次banner位去放,如下图所示:

但是我个人是不推荐这种做法的,哪怕未来这个次banner可以扩展为多个次banner轮播我也不推荐,因为如果是这样的话,用户首页第一屏留给『猜你喜欢』的内容展示就很有限了。

总而言之吧,第二层tab的『康永来了』一定是一个待埋点考量的争议设计。我只是提出我个人的见解,不一定对,大家切勿偏听偏信。好了我们继续往下看。

第三层和第四层:图片banner和分类频道icon,其意符的表现形式为纯图片/图像+文字,banner嘛这个没啥好说的,通过自动左右切换的图片告知用户一些产品需要告诉用户的信息而已。分类频道icon我之前的几篇文章里面都有提到一些,记得在我的文章里我说到的格式塔原理么,大家打眼一看这个分类频道icon就知道右侧还有一些,是可以滑动的。

第五层和第六层:这个就更没啥好说的了,就是一个常规的带图片的宫格列表(我习惯这么叫他们,你们想怎么叫都行)页,其意符的表现形式为图片+文字,右上角有点击更多有一个向右的图标表明是可以点击跳页的(具体参看我写的分割线那篇文章)。到一个内容更丰富的item列表页。那么我问大家一个问题,为什么猜你喜欢的这个图片不也做成左右滑动的而要做成这样固定展示6张的呢?

这里主要是有两方面的原因,第一是做成左右滑的话,屏幕空间最多只能展现三张半,不如现在这个展示6张露出得多。第二是有一个很有趣的交互上需要注意的点,大家看如下图所示:

我标记蓝色线框的部分大家看到了没,这个banner也是可以滑动,分类频道icon也是可以滑动的,整个页面Tab也是可以点击跳转的。这也就意味着,如果要执行tab滑动跳转这个交互手势,我想能采用的滑动热如右图红色所示,区域本身就已经很小了。如果下面猜你喜欢也做成可以左右滑动的话,那么Tab的滑动手势热区面积更小了。如果真是那样的话,那这个Tab就不该设计成可以滑动加载的。

所以说嘛,app中的意义符号设计直接决定了这个app的易用性。不要乱来。

第七层:这就是bottombar具体没什么好讲的了,也就是五个图形意符,各自表示着自己的意义映射。现在很多app中大家会发现有些底部是只有icon没有文字的,有些是带了icon也带了文字的,带文字的目的也是为了解决图形联想带来的意义映射路径多的情况。这个不多说了。来看第二个角度。


角度二、从视觉上进行分析:

按照视觉强弱来看,『康永来了』、『banner』、『猜你喜欢』是页面最重的视觉部分,其次是频道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、历史和下载。从视觉上看,其实作为内容平台的喜马拉雅设计的很赞,没有任何问题。内容产品本身占有最强视觉强度,功能意符占有较弱视觉强度。这就是为什么猜你喜欢要用图片+文字的宫格列表,不用类似于item之类的原因,因为比如这里的每一个节目都换成是一个item,那视觉只集中左边的图片上,而不像现在三张图片这样聚焦。

最后抛出一个视觉上BottomBar的问题,现在很多app会在实心icon还是线性icon上面纠结,知乎的BottomBar一直采用实心icon,而Airbnb一直采用线性icon,到底为什么?

我会在下一期的交互闲谈里面说这个问题,大家也可以想一想,其实(如果我理解的没错的话)答案就在我上面这段论述中。



PART 4 - 手机app中的意符设计需要辩证的几小点


一个擅长app中意符设计的人,本质就是对appUI设计有十足把握的人,关于这里的几点辩证只是提出来说一下,具体的UI设计过程中这样的问题不胜枚举,大家可以留言交流。


一、BottomBar上的意符到底要不要加文字?

手机中可供点击反馈的意符设计分为很多种,有纯图片的(比如banner),有图形+文字的(比如BpttomBar上的那些),有纯文字的(不如上文中喜马拉雅的切换tab,比如『点击查看更多』、『点击展开』、『滑动加载』之类具有诱导性的文案),还有纯图形的『比如像『一个One』这样的app底部BottomBar是只有图片不带文字的』,还有一些是按钮形式的。

在这些意符的设计中,意义识别是尤其需要被设计的。如果一个图形无法表现他应有的意义,那就一定要在附近加上文字形成一个完整的意符。

举个例子:已下载这个icon已经被所有app用烂了,大家一听就知道应该包含一个向下的箭头,比如历史记录也是,大家都能想到是一个时钟,这就是长期教育用户之后用户产生的意义联想。所以喜马拉雅和腾讯视频中的这两个意符设计,一个是带文字,一个是不带文字,都不影响用户识别体验。

但是比如再举一个例,『我的』图标,现在大家都习惯用一个『人头像』,而一切新奇的产品比如说『氧气app』,才用的是一个圆圈,那么这个时候如果是意义识别为主导的产品(比如电商啊或者用户不是那么年轻的)就会选择在下面加上一行中文。这样的话在图形上发挥得再不易识别,也可以借助文字瞬间映射到。

那比如像『一个One』、『Medium』和『500px』这样的众多app,他们的BottomBar都是一个纯图形:

纯图形带来的其实是一种新奇感和简洁的设计感。相对的,和用户需要花更长时间的视觉判断,比如第一张图是『一个One』,第2,3,4个icon其实很易识别:一本书,一个音符和一个播放三角能够很简洁的代表文章,音乐和视频。第二张图相对就没有那么容易识别了,尤其是第三个图标,意义指向不明确,但是由于Medium是一个国外设计师聚集的网站,所以其实也还好,设计感在一定程度上会优于识别也没问题。图3是500px,这5个icon就更易识别了。

所以,如果你采取无文字的BottomBar,那么请UI设计师用心设计你的icons。


二、设置引导用户点击加载的意符应该如何设计?

有一个app需要设计这样一个功能:文字默认折叠展示3行,但是点击之后需要(非跳页)加载全文,那么请问需要设置怎样的意符引导用户点击?

传统的大概是三种方案:

第一是在文字第三行的前四个字用其他颜色(比如蓝色)标记为『加载更多』,用户一点之后加载全部(早期知乎的做法)。

第二种是在文字第三行结束之后再第四行的位置居中放一个『点击加载更多』,用户点击之后加载全部。

第三种是在文字第三行结束的位置放一个省略号即可,用户阅读之后发现没读完,自己会尝试点击。

显然,第三种方法仅适合社区类app或者贴吧或者问答类app,因为一般用户读都很难读完,更别说给你点击一下了。第一种和第二种也是见仁见智,一般情况下我个人推荐第一种,因为需要文字折叠成三行的页面就说明本身画面排布很紧张,就不要另起一个第四行放『点击加载更多』了。


三、app中的按钮设计,什么时候应该有push色,什么时候应该没有?

这是我的微信公众号后台有一个小伙伴的提问,push色这个东西在网页上有别的更多作用,但是在app中,一般就只用来反馈行为。

有两种情况:

第一种是你点击某个意符,这个意符发生变化(颜色或样式变化)同时跳转。

第二种是你点击某个意符,这个意符完全不发生变化但是页面跳转。

从用户期待每次行为都得到反馈的心理上来说,我们当然希望所有的意符都能呈现及时反馈以证明你的点击行为是有效的(也就是上面的第一种)。但是有时候由于反馈动效我们写得不尽如人意问题,我们看到冗长(哪怕只有半秒)切重复的的反馈内心就会就会很烦。

举个例子比如原生安卓的Material Design点击每个item都会出现一个水波动效反馈,当然原生Material Design的动效是足够优秀的,所以我们会觉得很有新奇感。但是你们如果试试把安卓的这个动效拉长别说一倍,拉长三分之一。你们一定会崩溃的相信我。



PART 4 - 总结


1、app产品设计和UI的设计中,意符的设计是当众最重要的一环,因为每一个意符作为产品的功能入口和行为入口,它们不光光是产品的流量节点。更是app产品信息架构的核心提现。

2、在设计app的意符的时候,要更多的考虑到意符所蕴含的具体交互手势(比如喜马拉雅的tab bar就包含了滑动和点击)以及具体的对用户行为的思辨。

3、app中意符的设计一定是框架层面的设计,他的本身视觉层级不易过高,最好不能超过app主体信息。

4、意符的意义映射要尽可能的单一,最好能让用户一眼就了解这个意符是代表什么功能什么意义。

5、app意符的观察、分析、设计是一个长期的过程,大家可以试着多问自己一些为什么。




文章来源:站酷   作者:Seany

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


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

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



用户体验是玄学吗?

纯纯

Part 01 - 用户体验和用户体验设计


关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。



1.1 什么是用户体验?

用户体验的定义有很多种,我比较倾向的解释是:

“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”

首先明确第一个概念,体验是一个过程,生活中的一切皆是体验,我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。

从广义上来看,体验的主体是人,客体可以是一切物体和事情,媒介是我们的感官;当我们的感官作用在一切事物上,会产生相应的心理行为,比如预期,比如反馈,比如情绪,着所有的一切一起作用,形成了用户体验过程。


只要留心生活,你会发现用户体验无处不在。

举两个例子:

第一个是北京随处可见的地铁充值机,我经常看到用户站在那里懵逼,最主要的是他违背了用户的操作习惯,插卡机器的的行为总会让人联想到APM机,而几乎所有的APM机器卡都是插一半然后自动吸进去的,而北京地铁卡是需要插到底,然后还需要用力按一下才能成功识别,跟多用户懵逼在这一步,并没有用力按,然后以为是机器坏了没有识别。

第二个例子是我工作的地方旁边商场一楼有一个肯德基,它有两个门可以进入,第一个门是在商场外临街,第二个门是在商场内。

我连续两周的工作日每天早上9点半到10点在这家店吃早餐,发现一件很有趣的现象,由于工作人员的疏忽,商场内的门二经常会忘记打开,因为这个商场的负二楼和地铁站连在一起,所有很多人地铁到站的人群从地铁站口出直接从商场内走向街道:

在这些人群里,如果他们正巧有买早餐的需求,他们往往会从门2进,如果正巧由于工作人员的疏忽,门2没开。按照常人的思维,哪怕门2没开,那不还有一个门1么,用户完全可以多走几步出去从街道门1进入啊,应该不会太影响。如果你能得出这样的结论,又碰巧你正好是互联网的设计或者产品人员,那么你可能有“自我安慰型人格”。

我吃早餐的两周里做了一个统计,10个工作日里,每天在我吃早餐的这半个小时内,试图推开门2却发现打不开的,平均到每天有6位,按照每个人平均买一份早餐套餐15元钱来算,10天内,由于工作人员的失误,这个门至少阻挡了至少900元营业额。


回到刚刚那个“自我安慰”的思维,我发现,10天内被这个门阻挡的实际62位用户里,真正出街道从街道门1再次进入的人,只有十七位。也就是说这个实验中肯德基早餐用户被最短路径阻隔之后,再次选择次路径完成转化的转化率17/62(27%)。

别急,还有更吃惊的数据:在被门2阻隔的62个人中,有17个是自身顺路要往街道右边走路过门1的。但是由于被门2阻隔,他们17个人当中,哪怕自身行走路径要路过门1,选择从门1进去的也只有7位,大概在11/17(64%)(判断顺路依据是他们吃完后从门1出门往右走)。


再看一下肯德基这个例子的数据结论:

被门2阻拦的62个人里,45人流失。

其余17位选择从门1再次进入,这17人里,本身就要顺路经过门一的占11位,说明大概率只有顺路才会进入完成转化。


这个例子说明什么呢?

在替代品遍地都在的今天,不要试图去挑战用户的体验。


当用户看到肯德基的门2,他们产生的预期是马上就可以推开享受一顿早餐,这时候由于门2打不开,使得用户预期受挫。

受挫用户的第一反应并不是想解决办法(表现在例子中就是寻找另一个门进入),而是放弃它。毕竟,没有肯德基我还可以吃麦当劳,还有星巴克,还有面包店,各种各样的选择。


这就是为什么互联网行业把产品用户体验看得这么重要的原因,除了社交产品以外的用户是很难有忠诚度的,你的产品难用,你不能给用户更大的福利,用户一旦发现别的产品做得比你好,用户会马上放弃你,转而用别的替代品。


上面的那个例子主要表达的是用户预期受阻带来的糟糕体验导致用户流失。其实整个用户体验的过程当中,是有很多很的因素相互制约,协同作用的:


户体验本身一个很庞杂繁复的系统;在一个过程内,用户对整个过程中的元素的预期和反应(情感和生物反应)构成了整个用户体验系统。这里面包含了很多很多的旁支,比如人的感知、人的经验系统和使用场景决定了人对于单个体验的预期,而如果超过预期会带来惊喜,促使用户正向评价,也促使用户再次体验。比如人感知和体验中客体呈现的意符决定了人的行为等等…


用户体验最初的时候它只是用于表征易用性方面,而现在,它的概念更多的表现在情感的一个分支,包含设计情感互动和评估情绪 。因为人的情绪是很难拿捏的,面对不同教育背景不同生活经历的用户,我们最初其实很难归纳出到底什么样的设计是具有好的用户体验。


好的用户体验各有各的优点,但是,糟糕的用户体验却很容易被归纳和识别出来。


设计师们不断的在识别和总结糟糕的体验问题,慢慢在优化这些问题的过程中积累经验,其实也慢慢的有了一些关于用户体验的方法论形成,这种方法论作用于各个设计行业,工业设计、服装设计、奢侈品、广告、互联网产品设计各个行业产生的方法论其实不尽相同。




1.2 什么是用户体验设计?


说起设计(Design)这个词,那就厉害了 ,作为设计师的你听说过解释肯定有很多种,而我个人对”设计“的理解是:设计是一种”约束条件下,解决问题的可行的办法“。而对于用户体验设计而言,早期的时候,我们仅能够基于经验主义去完成一些设计,这时候专家的作用会被放大,因为专家提出的不要这样、不要那样,往往会成为指导性方案:


但是随着发展,不断地有人站出来尝试描述和定义用户体验的边界,比如:


随着探索者越来越多,我们最终也是大致能够够了出用户体验设计的定义范围:既然体验是一个过程,那么狭义的,用户体验设计实际上是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


这里有两个要点:


1、用户体验设计的目标是逐步不断提升用户满意度,前面两有个定语:“逐步“、”不断”,对于用户而言,永远没有所谓“最满意”的说法,只有“相较于上一次体验更满意”.所以除非定义一种可量化的终极满意度模型作为指标参照,否则用户体验设计是一个永远都有优化空间的过程。


2、用户体验设计是围绕过程的设计,在互联网行业中,这个过程主要指用户与产品(app、PC端,客户端、VR等)的交互过程中,所以下文重点讨论的是在互联网行业中的用户体验设计。



Part 02 - 用户体验设计是一个岗位吗?


以2018年2月为时间节点的目前来说,用户体验设计不是一个岗位,现阶段来看,它更像是一个协同目标,每个公司的所有设计师(UI/视觉/交互),用研人员,包括开发人员其实工作的目标都是为了逐步提升自己公司产品的用户体验。


虽然用户体验设计目前还不是一个岗位,但是它正在趋向于成为一个岗位。要解释这一点,我们还是要从用户体验的定义说开去,还记得用户体验设计是什么吗?用户体验设计是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


既然要改善和优化用户与产品交互过程,那把这个句子拆分开来,大概需要的知识储备有:

1、从主语的角度看:首先你要了解用户吧?用户是人,要提升人的满意度,对人感到心理满足的机制是不是需要了解?


2、从客体的角度看:客体是产品,在互联网行业表现为手机(app)、pad(app)、PC(软件)和VR设备等等。这些产品是我们着重需要关注的点,比如一个app中视觉信息的呈现,app的信息架构、app的交互设计、app的可用性和易用性等等,都是需要考虑的。


3、既然是用户与产品交互过程,是不是要知道人和产品(手机、app、PC)到底是如何交互的?每一次的点击,滑动对于用户来看心理应该是怎样,产品的每一次反馈都意味着什么?


呐,你现在来看,其实我们互联网行业现在划分的UI/视觉/交互/用研,甚至往广了说包括产品/开发/测试,工作内容都是构成用户体验的要素,它需要的知识面特别特别广,对人的综合素质要求很高,所以目前来看,用户体验还不能是一个岗位,但是很多大公司,比如腾讯阿里,他们期待设计师能够变成有更大洞察和对业务、人性有更多了解的全方位人才,而不是一个只会画图的美工,所以说未来,用户体验设计师可能会变成一个title,但是可以预料的是,用户体验涵盖的这么多方面知识,每个人都是有侧重和专长的:可能有些人就是很喜欢视觉设计和UI设计,那他们在精研这部分的同时,相应的懂一些交互方面的知识,这就算是优秀的偏视觉方向的用户体验设计师;那视觉表现很差的人能不能算优秀设计师呢?当然可以,比如他是心理学或者HCI(人机交互设计)的研究生,对人和用户心理有自己独特的认识,再加上精通定性和定量研究方法,对数据有独特的敏感,那他未来可能是用户研究方向的用户体验设计师。


只不过我们现在因为岗位固化,大多数公司,每个人的工作职责仅限于那一块,你是做视觉/UI的,那就好好画界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么职位就做什么职位的事情,从来不越界,这样其实是不利于人的发展的,那我们追求上进的设计师们只能自己下来多看书,多去做研究,私下来多花时间修炼自己的内功心法,才能让自己立于不败之地。


用户体验设计发展到今天,目前包含了最大的三个有模糊边界的模块是用户研究、交互设计、视觉设计。现在绝大多数互联网公司也都是按照以上这三个模块去设置岗位的,这样有一个很大的问题其实是不利于设计师的发展。


阿里巴巴1688的设计总监汪方进关于这三个岗位,有这样的一番评述:

比如交互岗位,如果对接的是一位能力较强的PD,他们可能把交互稿定了七八成,交互设计师完善后交付给视觉设计师,而对接的视觉设计师又有一些交互Sense,他也许把交互稿又改了改,那么这个过程下来,交互设计师的内容,还能保留多少呢?我所说的这种情况,可能也是当下我们交互设计师同学所面临的痛。

而视觉设计师又是怎样的现状呢?视觉设计师拿到交互稿后,在交互稿的基础上美化润色一下,自主发挥空间不太大。从我们集团总体情况来看,视觉设计师的(P级)成长是比较慢的,因为我们讲求论述自身设计的价值是什么,但把视觉从整体中剥离出来,视觉设计师设计的某一个页面,具体能带来多少商业价值?视觉设计师很难去论述这点。


关于用研、视觉、交互这三个模块,我也想分开来谈谈,希望能对目前刚入行或者入行不久感到迷茫的小伙伴有所帮助。



Part 03 - 用户研究


上面我们说到,用研、交互、视觉这三个模块构成了一个用户体验设计的能力维度,要搞清楚这三个维度,我们不妨先看看业界最出名的一张用户体验要素图:

我们一般把最下面战略层的部分分解开,其中除了产品和公司战略之外,关于用户需求的定义交给用研(用户研究)人员去完成。


关于用户研究,如果是一个从0到1的产品,产品初期是需要对产品用户进行定位划分和用户画像,就是我的这个产品是为了解决什么样的用户的什么需求的,这些用户的属性是怎样的,他们具有什么样的特质和颜色、他们一般使用产品的情景是如何的?


这里需要注意的是,如果你不是一位有用研经验的人去第一次尝试做用研,需要留心我们很容易落入理想化用户设计的陷阱。再客观的站在用户角度去思考,去设计也会有主观和流于表面的情况出现。我们不能想当然的按照理想情景去思考用户需求,用户需求是复杂的,再加上企业自己的,以及各部门的需求纷繁,所以一般在产品迭代的过程中新的功能很容易陷入想当然的“用户就是需要啊”的思维之中。所以对于成熟的产品来说,需要划分核心主流和普通用户并分别画像。关于用户画像的方法有很多很多,大家可以去随意搜索在这里就不细谈了。


还有如果是一个初次开展用户研究的同学做用户研究的时候,可以掌握几种常见的方法,访谈法,焦点小组,易用性测试,问卷调查这些方法各有利弊,最重要的是找到当前情境下解决问题且行之有效的方案,比如访谈或者焦点小组,精心整理问题并邀请公司的一些员工或者核心用户进行访谈并全程录音,在结束后认真提炼访谈中多次被用户提到的关键词,从关键词中按维度抽象整理出用户的需要,是访谈的核心价值。并且输出文档,赋予思考,再以此作为整个设计改版的核心依托,让里面用户提到的关键词在设计页面中体现,这才是有效的设计。


关于用户研究的常用方法,具体推荐给大家两本大部头的书,大家感兴趣或者不知道自己感不感兴趣,可以去看看《设计调研》和《洞察用户体验方法与实践》 第二版。



Part 04 - 交互设计 


交互设计的输出物是产品原型,也就是你们看到的线框图。那线框图是怎么产生的呢?这个需要从产品经理那边对功能梳理开始。

一般大一点的有交互团队的公司,比如新浪微博啊之类的,他们的产品经理的工作重点会更加focus在功能本身到底是不是用户所需要的,而经过产品提出来的需求文档,一般只有功能需求List和他们的优先级,如果遇到要画图说明的,也就是简略的几一个草图。

这时候,交互设计师会根据产品的提出的功能需求List去进行整理和区分:

这里整理和区分的方法是合并,拆分和归纳。

比如功能A是可以拆分成更细颗粒度的需求A1和A2的,其中A1和A2又碰巧属于不同的已有的两个功能区块,那么就可以把他们拆分到不同的功能线上,如果某些功能发现他们有同样的属性,那是不是考虑把他们整合在一起?


这样整合完了需求,再按照优先/重要的二维表格去划分,最后得到一个需求量表:

然后我们根据这样的版本需求量表优先级和重要性,有的放矢的去设计功能入口和信息架构,就会游刃有余:


而一般复杂产品新增功能的时候,往往要考量很多因素,不能一味的去做功能堆砌,还是需要把不重要的功能隐藏或转移,突出重要的功能,再把一些同属性的功能入口组织在一起并列,这些都是在原型之前需要思考的问题。再往下,那就是根据一个一个的信息去设计产品低保证原型图,那就没啥好说的了,你们看到的原型图几乎都差不多,但是至于你们的交互设计师的原型是不是按照我上面步骤一步一步推演出来的,那就要打个问号了,这可能是区分一般交互设计师和高级一点的交互设计师的一种办法。(如果你见到听到功能就开始画低保真的交互,那…)



如果你以为交互设计师就是画个原型,那你就错了,交互设计师切记不要沦为产品助理……其实在真个UX体系中,交互设计师承担的是最重要也是最核心的一个环节,那就是优化用户路径(即优化流量路径)。


什么叫优化用户路径呢,举个例子,全民k歌是一款唱歌的app,那用户最核心的功能就是在上面唱歌,而关于唱歌,大概有独唱、合唱两种维度。比如现在,我作为普通用户,想要去完成独唱一首歌的行为。这种行为从用户路径上看就是用户从任何页面到唱歌详情页。那么到底有多少条路?既是说,到底有多少个页面可以跳转到唱歌详情页?然后你会发现,其实能跳到唱歌详情页的,除了清唱那种独特的方法以外,其他的都是要通过伴奏详情页跳转,那么问题又来了,到底有多少个页面可以跳转到伴奏详情页呢?

就这样,去穷举所有的用户路径,然后看看这些路径过程中有没有一些冗余操作是可以删减的:


穷举所有用户路径,看看有没有哪一跳是可以被优化的(以唱吧为例



这里面有很大很大的学问,如果展开说的话可能是一个几万字都说不清楚的篇幅。

总之,一个好的app一定是功能和产品形态足够扁平简单。

要让产品形态足够扁平简单,就需要根据app的形态去整理和梳理交互层级,针对流量问题进行具体的分流设计:

比如当我们看到一个200wpv的页面,下属三个平行按钮分别只有40w、12w和3wpv,刨除场景问题之外,从交互出发那是不是我们可以设计一个内页的segment组件去完成三个内页的滑动跳转、降低操作成本呢?

比如淘宝这样:

又或者说,我们是不是可以未一个pv较低却承载功能较大的页面另外设置另多个入口呢?

比如像外卖产品这样:

最后的最后,交互设计的工作产出就是原型了,既然都思考妥当了,画个图就就没啥好说的了...



Part 05 - UI设计



再往后,交互设计师会把原型给到UI设计师,UI设计师的工作范围大家想必很了解,就是把低保真的原型变成高保真的设计稿。


在这里再啰嗦一遍啊:


UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!


重要的事情说三遍!


我们唱吧UED最近一直在招人。

看UI的简历,然后发现一个很大的问题是,我发现UI设计师的简历真的是千奇百怪五花八门,有那种插画画的很好的,有那种第一眼上来就是一个很立体的3D建模渲染震撼到你的,也有那种大渐变dribbble风给你一种好像很厉害的样子的,但是这些都不重要,如果一个界面上的内容信息没有主次区分,或者展现得没有层级对比,再花哨的东西都没有用。


关于UI需要掌握的比如格式塔啊之类的东西已经有太多人说了,在这里就不赘述,具体也可以看我的文章《形式与内容的关系 -  app的视觉美成因分析》


UI设计其实都不是闹着玩的工作,也绝对不是纯主观感性的工作,判断一个UI界面的好坏可以通过易用性和易读性测试、眯眼测试的方法检验,判断一个产品交互设计的优劣也可以从易用性测试和用户反馈中得出线索,判断哪种交互手段和信息架构更为可行通过ab test的方法得出结论,这一些的一些设计它都是一个有着科学的方法论作为指导的。


希望从此之后大家审视产品的时候不要以UI美丑这种最低级的主观因素去思考(当然UI的一致性和美观度很重要),但是更多的,要想想更深层次功能布局和信息架构,以及产品打的人群上往更加宏观和抽象的高胃度进行思考。


文章来源:站酷   作者:Seany

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


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

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




从交互维度量化用户体验

纯纯

和大家分享一些在产品和交互设计中的一些自己的方法。



Part - I 什么是交互

狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示,这就是我理解的最小交互模型:

当时我举的例子是用翻页器去控制ppt翻页:


如上图所示,拆解这一套交互行为:

当我我点击翻页器的“下一页”按钮,我点击行为附带的心理预期是“PPT翻往下一页”,然后我点击的时候,遥控器塑胶按钮给到我手指一个物理反馈,证明我按下的行为已经完成了,这是“输出端(我的手)的交互与反馈”,这时候遥控器接收到按钮指令,把指令通过红外线传输到USB接收器上,接收器把指令传到PC端然后完成翻页动作,再通过大屏幕传到我的眼(输入端)中,我就可以确认这一次交互反馈是符合预期的。BTW这里有一点想要补充:设备对设备(上图中黑色箭头),也属于广义的交互,只不过现阶段大家研究的交互设计都是狭义的,人为主体的交互。


在我们日用科技产品的早期,有两个东西是无法跳过的,那就是按键手机和PC电脑:


他们几乎是同步在发展的,而这两个产品的交互行为基本上延续到了触屏手机时代,所以为了弄明白触屏手机的交互,这两个产品是值得讲一讲的。


先看按键手机(就是我们小时候用的非智能手机):

在按键手机中,最让用户困惑的其实是按键和屏幕之间存在一个映射关系,而不同厂商缺乏一个统一的规范,各家映射规则不一样。大家是否还记得当年的手机说明书那可以说是相当厚,因为说明书必须要给用户建构一个心理模型;比如上图,点击左上角和右上角那两个“-”按钮,其实一一对应的是屏幕左下角的“Goto”和右下角的“Names”。这个一一对应关系作为今天的用户来看应该是很平常而且很易懂的,但是当年没用过手机的人,需要花很长时间阅读说明书,才能够明白物理按键和屏幕上的映射关系,这就是触屏手机很难用的地方,也是很反人性的地方。因为作为用户来说,心智上,我们当然希望所触即所得。

再来看PC,作为和按键手机差不多一起出现的载体形式,人们操作PC端人是通过媒介(也就是鼠标+键盘)输入的,其实本质上也是我们通过鼠标在桌面上滑动x-y区域对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系,然后键盘上几十个键配合输入完成操作。


大家发现了么,上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为,这两种载体从出身开始就还是需要很大交互成本的。

随着科技的发展,触屏感应技术推出了之后,印象中触屏手机就是两三年时间就摧枯拉朽的淘汰了按键手机,本质上是干掉了一一对应的交互映射,所按即所得:

触屏手机出现之后,交互专家们不禁要问一个问题了:

手和触摸屏到底有多少种交互方式?

答案是有很多种:

越是高阶越是隐藏的交互手势越复杂,所谓的“交互成本”也越高,比如锤子三指滑动换屏保那种,就是利用了高阶交互便捷实现边界功能。那这么看起来,iOS也好还是所有的安卓手机都好,从用户端而言,就是组合交互手势,让信息更好的传达而已。那么同理,在App中也是一样,如果我们了解了每一个交互行为的用户心理预期,对设计工作而言就能做到有的放矢:


我们以“单击”和“滑动”这两个最简单的交互行为举例。

所谓单击手机屏幕,用户其实最核心的是有两个预期:

第一是选中一个元素,比如Radio组件。第二是逻辑上的Next,比如点了一件衣服,应该Next到衣服的详情;点了付款,应该出现付款流程,点了返回,应该back到上一路径点等等。


划动交互也是一样的,用户在一块手机屏幕上单指划划划,用户内心的预期其实也不复杂,最核心的预期也就两点:

第一是查看屏幕外的线索(前提是设计师给用户留下线索了或者是这个UI组件长得就是可以划动的样子)第二是查看相邻标签的内容,或者查看同一个标签下的相邻元素,比如iOS的segment controlle组件就是典型例子:


当我们了解了这些之后,我们在实际的设计工作中就可以根据上面这些理论来合理选择UI组件去呈现对应的信息了。




Part - II 从交互维度合理选择UI组件

我们在设计工作中,选择UI组件,本质上就是选择信息的呈现形式。

每一个常见的UI界面和UI组件,都一定也满足上面所说的最小交互模型:



在这里我举一些例子说明。

第一个例子:同样的内容,选择不同的UI组件呈现,给用户呈现的是完全不同的产品结构:

大家看下面这张图:


这两个UI模块摆在大家面前,大家应该能清晰的感受到,左边是一个segment控制下面内容的UI;而右边是一个所有内容列表的集合页,只不过通过tab聚类了而已。

第一件事应该想到的是如果需要采用右边的排列形式就必须要控制tag的字数;然后由于右边的tag占据了推荐贴的位置,导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的,图右的优势在于,由于竖向排列tag可以让一个屏幕显示更多的tag,可以让用户更方便的定位内容,比如外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜,而且外卖产品的左侧tag一般是一家店铺的菜的品类,用户下滑菜品配合点击品类,点完即走,很方便(京东和淘宝电商类平台也是类似的)。

但是比如今日头条,新闻类客户端只能采用左边的这种形式,因为新闻类客户端是需要用户长时间沉浸的,比如用户选中一个“体育”的tag之后一般要沉浸的看好久好久,用户需要沉浸在这个tag下的内容中,那这个时候显然用右边这种设计方式让tag常驻屏幕左侧是不合适的。


再来看第二个例子,就是UI应该会随着内容而进行调整和优化:


这里举一个唱吧的例子,唱吧从7.0到8.6之间做了三次改版,大家可以看到,唱吧团队几乎是损失了屏幕效率来加大了间隔和突出了歌名,这是为什么呢?

这是因为页面承载的关键任务不同,大家对比着7.0时候和8.6时候的UI样式,正好是今天快手和唱吧的对比:

大家会发现,其实这个页面,快手和唱吧承载的内容都是消费转化,都希望用户点击进去消费内容,但是两款产品做了截然不同的UI风格,原因是什么呢?

快手在这个页面,其实承载的关键任务是:“迅速让用户找到感兴趣的点”,它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身,比如第一张图是一个人在打高尔夫,右边是一个工人,然后第二排左边是一个游戏的镜头,右边是一个传递正能量,大家可以很方便的通过图片识别里面的内容,用户更沉浸更聚焦的去选自己喜欢的点击进入消费就可以了。但是唱吧的视频截图其实是不能识别里面内容的,大家可以看到,第一张图是一个妹子,第二场图是一个妹子,第三张图还是一个妹子,那用户点击进去的动力在哪儿了?除了这个照片长相之外,更多的其实是文字决定的,是这个人唱的这首歌的歌曲名是不是我喜欢的,或者是这个演唱者的的歌手等级。

所以基于这种跟深层次的逻辑,唱吧和快手两款产品的这个页面都是为了促进消费转化,但是UI长相上完全不同。


我们看第三个例子:


同样组件下,选择不同的交互方式,也会使得效果完全不同,比如现在有一个UI页面,主要由一个tab(iOS叫segment controlled)组件控制下面的内容,样子张这样:


我先假定一个前提:这个app中的这个组件不支持横划,只支持点击切换。

好了,现在我假设这是一款已经稳定运营了一年的产品,为了说明问题,我假设一个理想数据:

假设每天有20W的uv访问这个页面,其中分流情况是:

10Wuv消费“推荐”下的内容

2Wuv消费“生活”下的内容

1Wuv消费“段子”下的内容

3Wuv消费“美女”下的内容

4Wuv消费“游戏”下的内容


这时候,为了优化交互行为,有一天决定把这个tab组件从不可横向划动改成可以划动的(并且告诉用户这里可以滑动了哟~),然后给你一次机会重新排列这五个tab顺序,你会怎么做呢?最简单的办法当然是把五个tab按照用户消费意愿逐一排列,即:“推荐、游戏、美女、生活、段子”。

这样排列当然没有任何问题,但是还有没有更优解呢?我给出的解决办法是这样的,大家评判一下:

按照用户的消费量,“游戏”是消费量第二的一个tab,毫无疑问我会把它排在第二项,这样可以刺激用户划动行为,然后“美女”是消费量第三的,我会把他放在第四位,这时候我会把“段子”和“生活”这两个消费率最低的tab分AB test做两个版本放在第三和第五位拿去测,以判断之前的“段子”和“生活”是由于自身内容不够优质,还是之前交互成本太低导致的数据较差:



最后我们来看第四个例子:


比如一个app,他的UI张如下图所示的这个样子


现在假设在运营和市场团队不做任何努力的情况下,单从产品交互的角度,能不能优化上面这个版块的点击率?

首先我们来分析一下页面架构:

如果我们认为,不管是点击右上角的“>”,还是点击留个圆形入口都算完成转化的话,我们现在的这个红色的UI组件,入口位置一共有7个。根据长尾理论,如果我们把这个圆形入口从6个扩展到比如九个,是不是一定对转化率有正向影响?答案并不一定:

为什么呢?因为主要是这样的改动会带来一个未知的泳道横划交互,它会产生一定的影响,如下图所示:

用户看到这个泳道之后可能出现三种行为:

a.“用户完全不滑动”——那入口就从7个变成了7.5个,别的没有变量影响。

b.“用户滑动看完了之后,点击某一个或者左上角的“>”进入”——这是我们想要的转化

c.“用户滑动看了这些圆形入口之后松手,就是不点击进去”——这是我们不愿意看到的结果

想到这里,那为什么我们不能让用户直接滑动之后松手就跳转呢?


想到这里,所以优化方案如下图所示,给与用户一个x轴区间,滑动手势操过那个区间则告诉用户你现在松手默认跳转,用户不愿意跳转也可以回划,只要不足这个x区间就给与用户自主选择的机会:


我之前在上家工作的时候,我们把6个圆形入口变成了10个,然后用这个“松手跳转”的交互把单元模块的穿透率从21%提升到了31%,这是一个实战当中的真实例子。


当然了,请大家再思考这样的一个问题:


一个页面的流量就这么大,一个地方涨了11%,那势必别的地方就会相应的损失11%。一般情况下app首页承担着80%以上的分流工作,根据流量漏斗来看的话每一次引流都会导致其他模块的数据下降,所以设计师们应该要根据运营策略和公司大的产品OKR来合理选用合适的交互组件,以达到想要的目的,还是那句话:“小孩儿才分对错,大人只看利弊。”




Part - III 从交互的维度量化用户体验

移动互联网产品设计中,尤其是在中国的app产品,有两大分歧阵营:

“扁平”阵营表示了,我们需要产品足够扁平,最好就是三次交互可以触达所有app界面:

“简洁”阵营也表示了,我们需要页面信息足够简洁,最好一个页面只完成一个核心任务:



双发你来我往,谁也说服不了谁,如下图所示,“简洁”阵营反驳“扁平”阵营说:你们一点都不遵守席客定律,层级扁平是扁平了,但是相应的页面信息变得越来越多,给用户呈现的干扰就越来越多,用户做出决定的时间也越来越多,所以你们“扁平党”都是辣鸡。这时候“扁平”阵营也找到了反驳的论点,他们说你看你页面足够简洁了,但是页面层级就很深啊,交互成本这么高,每一次都伴随流失,可用性这么差,你们还有理了?所以“简洁党”你们才是辣鸡!


中国的互联网产品,很难做到既简洁又扁平,这个问题的根源在于永远有那么多信息需要呈现,永远有那么多功能需要添加,这个是中国的激烈市场竞争导致的,并不是说中国的产品就不如国外的好(我的哥哥之前在Facebook现在Airbnb工作,他经常感叹道国外的互联网产品到中国来真的都得死...)我想要讨论的是,面对中国现在互联网产品市场现状, 如果一款产品非要你站队上面两派阵营,你会选哪一派?我现在的选择是“扁平党”,因为用户面临一款眼花缭乱的app,如果是经常使用,缺功能布局信息架构很少改动的前提下,早晚也会习惯和适应的,但是如果一些核心的东西不能第一时间暴露在用户眼中,很有可能用户就不知道你有这种功能。这个就是为什么我们设计经常会说这个产品经理傻逼吧,怎么什么东西都想展现出来,这一堆东西找个入口集合收起来页面多干净多清爽多好看呀~~我早年间也是和诸位一样的观点,但是现在我越来越觉得,界面清爽了,你的大功能feature因为设计隐藏没有被发现,不是设计开发测试都白做了么,说好的ROI在哪里?


我们大家都是互联网从业者,不管看到这篇文章的你是一位设计、产品、还是开发、测试、运营人员,我们都明白用户体验这个词是由N多维度综合而成的一个过程性评价,它和方方面面都有关系。



那既然是这么专业且牵连甚广的一个名词,我们真的就没有办法去量化评价它了吗?

永远不要忘记,用户体验是个过程,而我们每个人也都是用户本身。在这里我提供一种普通用户维度的比较好用的用户体验评估方法是“穷举分析用户行为路径”。


比如你是一款外卖产品的设计师,那么用户在不同产品模块下定一个外卖的流程路径大概有多少种,都穷举出来。比如你是一款在线演唱类的产品设计师,那么用户在产品中完成一首歌需要的用户路径到底有多少条,穷举所有路径之后一一优化,让路径变得更加扁平,或许是一个最“笨”但是有效的方案,怎么优化呢?用淘宝消息页举个例子:


淘宝消息页上面有“交易物流”、“通知”、“互动”三个tab,这时候我们假设一个用户三个按钮下面都有消息,用户想要看完这三个消息大概需要几次交互?答案是至少6次:“点击第一个进去 - 返回 - 点击第二个进去 - 返回 - 点击第三个进去 - 返回”,这样的交互显得呆板且冗长,淘宝团队巧妙的把三个内页集合成一个页面的三个tab形式,大大缩短的交互成本,这就是所谓的“把用户路径变得更扁平”:


大家在使用很多产品的过程中,多多留心就会发现原来细节里面总有魔鬼。


文章来源:站酷   作者:Seany

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


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

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


为什么交互设计能帮助产品解决问题

纯纯

市面上大量出现同质化产品、设计,就是因为大家都在按照现有的,常用的模版在设计,现在其实比早两年会好很多,很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。


例如下面的案例,这是一个电瓶车电池租赁的一个产品。



undefined



从美观角度,左侧的界面更加简洁信息也有规律,有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时,大家在第一反应中,有多少人可以重启自己的视角,还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢?


如果让你盯着第一个界面进行改版,我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来,或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的,即便将错误路径3改成了路径2,你以然还是在错误的路径上,本质没变。所以为什么我们说要做正确的事而不是正确的做事。





交互不仅仅能够让产品好用的,也要让产品走对方向。


另外,UI也是交互的一部分,属于看的懂。好用可以分为看得懂,学的快,用的会,交互体现在人们日常所接触到的大部分媒介,并且与之产生联系。例如一把水壶,水壶的设计形式首先通过视觉让你感知这是一个水壶,如果把水壶的外形做成一个马桶,你觉得它还是一个水壶吗,这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作,例如装水、倒水。而用的会就是这个水壶更多的附加功能,例如烧水、定时、调温等等。



1.交互设计中媒介与人的关系


1.1顺应


交互的媒介是不可缺少的,大家是否去研究过为什么古代人们撰写文字是从上至下,从右往左而现代人的习惯是从左右的?古代受限于工具、媒介,竹简是主流的记录文字信息的媒介, 有人会说竹简可以从做往右写不是非要从上往下啊,但是大家可以看到人们是如何打开进行阅读的,如果是横着阅读但是打开是上下展开就会非常不自然了。


所以在当时人们为了适应非常有限的工具资源,改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑,那基本也就凉凉了。


从2g到5g时代的发展,除了生活方式发生翻天覆地的变化外,我们所接触到的媒介也发生了变化,从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步,让人们对信息的获取更加方便快捷。除了内容,外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化,从当初的搬砖按键手机到支持ar等新技术的超智能化手机,改变了我们的认知也改变了我们的生活方式。



1.2迁移


平台迁移的交互成本,很多同学可能都玩过moba类游戏-dota,这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制,键盘用来控制技能的释放和其他快捷物品的使用,都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标,这是端游中基本的交互行为与操作。





在现在非常火热并且模式和dota相似度很高的王者荣耀手游中,我们看到了,如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动,右手拇指来控制技能的释放,在这里大家要注意,在端游中技能的释放是可以非常精准的,并且可以指向性释放在某一个角色中,但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能,但是在手游中我们无法做到选中某一个技能再点击到某一个角色上,所以手游中只能进行非指向性的预判技能释放。







同样在端游和手游的吃鸡游戏中,端游键盘控制人物移动,鼠标控制射击与视角,但是在手游中控制射击与视角就需要2个手指来完成非常不方便,也很影响射击的精度,但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备,专门用来给多余的手指进行射击操作。


另外,大家如果做b端的同学应该也深有感触,平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事,因为在网页端我们有大量的空间和更自由的控件形式去承载信息,比如联动的左侧标签导航和顶部联动的标签导航,在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航,但是页面显示实在有限,很多的信息完全无法在一个界面中呈现,所以要么将页面进行左右滑动,要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。


web端的工具和网页通常都会有撤销操作,按CMD(ctrl)+Z大部分都可进行撤销上一步操作,但是在移动端我们无法通过特定、或者统一的手势进行撤销,所以很多时候在表单输入的时候会有一键删除图标,却无法进行撤销。所以我在想是不是可以在用户一键删除信息后,删除按钮变为撤销按钮,有待考量。



2.交互认知的盲区


到底什么是交互设计,这个问题其实是比较复杂的,也是我一直在思考的问题。所以也翻阅了很多文献,尝试做更多的案例来解释。交互设计的概念真的挺多的,光网上能够找到的定义就不下5种,这些对交互设计的定义中,比较频繁出现的是行为、场景、用户等词汇,交互设计到底设计的是用户的行为,还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情,我觉得可能还是没有能够解释清楚交互设计的本质。


中国历史文字的演变,它并不是一个模仿的过程,而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿,更多的是担心用户成本过高而妥协为满足用户预期。



2.1信息不对称


事实上,为什么我们讲不清楚什么是交互设计,其实UI设计也一样,她绝不可能单纯的指代用工具绘制出用户界面,其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语


例如“你可以意思一下”,单就这句话,我们大概知道最关键的是“意思”二字,包含了特别多的含义,含义需要通过语境、使用场景来区分,说者的“意思”是想告诉听者什么呢?没人知道,是一口气干完一瓶酒,还是喝一口?还是送一点礼还是?应付一下?


当然这句话中的“可以”也很有讲究,加上“可以”说明你也能选择不“意思”,是不是觉得这7个字让我们整一句话都活了起来,说者与听者如果不在一个境中,听着就压根不知道说者的具体表达含义。


同样的,在设计领域,很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声,还有什么五彩斑斓的黑等等。就比如呼吸感这样的词,这个词听起来比较抽象,让听者都有点不太好意思追问什么是呼吸感,其实你问了,说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸,但设计者觉得现在刚好,所以本身就没有一个标准,更多的就是主观的感受,让你不得不接受这个建议的原因是因为两者的身份。


我们用我们能够讲述的语言去描绘我们不懂的事物,再例如设计师和开发还原只会说往左移动10px,而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识,设计师通常喜欢描述从左到右或者从上到下,但是在开发的语音认知理,他需要知道的是空间坐标,并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识,开发也尽可能的去补充设计背景。


在这里,交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通,所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。


再举个例子,不知道大家有没有编辑过问卷或者做过用户访谈,很多时候是不是觉得收集到的信息无效、无用,其实很多的原因是因为我们和用户对于这些问题压根不在一个频道,比如:你的问卷问的是,您喝酒的频率是多少,选项有:从不、偶尔、经常,在用户的眼里偶尔可能是1年喝一次,而我们觉得差不多1个月喝一次算偶尔,再比如访谈的时候问用户这个问题:您觉得您喜欢下面哪个页面的风格?用户:“什么是风格?”


所以交互设计师有一个能力久显得很重要了:让万物都可与之对话的能力,对话需要什么,是语言。




3.交互语言的浅见


我们都知道,语言是我们沟通的根本,语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言,不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等,例如在模型手办中有分线、渗线、勾线、补土等,这也都是在特顶专业领域中的一些术语,但这些并不是语言,只是在某个领域中大家总结出来便于沟通的文字符号。


所以我们再回到上方看一下定义,首先语言是由词汇所组成,词汇是由符号做组成,大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法,但这些都仅仅只是规范,而并不是语言。语言拥有更强的普适性和通用性。


那么我所认为的语言他首先包含了能够组成词汇的符号,这些符号大概就是指:点、线、面、体、色彩由这些点线面体可以组成的词汇有:按钮、文字、图标、图片等。但是光有词汇不行,在汉语中有12种词类:名词、动词、形容词,在由句子组成的词汇中包含了不同的成分:主、谓、宾、定、状、补...这里不过多叙述。


语言很重要的一点它具有语境,语言的运用包含了看听读写4个方面,看和听指的是输入,读和写指的是输出,那么交互设计语言中,也包含输入和输出两种属性,例如输入指的是由不同“词汇”组成的“句子”,比如由标题、箭头、色块组成的一个itme,是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。



这里的控件虽然有两个属性,但是还需要语境来帮助我们理解,一个是它本身所能够输出的默认状态的,比如点击之后的跳转页面,另外他也可以具备产品赋予的自定义属性,例如底部滑出picker。




还有,在汉语中“去买两个桃子吧”,这里的“两”肯能是虚数也可能是实数,但是在交互设计中,我们如何表示点击1下和两下或者是多次呢,一般单击的属性通常可以有一些特性的符号属性所表示出来,例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等,那么双击的话可以用双箭头来表示吗,当然不可以,双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。






那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思,并且有用的。这会让更多信息不对称的情况消失,不仅仅是设计师,在产品团队中大家都能够有一套共性的交互语言系统,无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中,大多都是多种元素的拼合,给出常用的、可复用的控件、组件,但是大家依然还是无法从语言角度去创新,这就导致了很难会有新的、有用的交互形式的出现,比如很多搜索控件都是承载在顶部导航栏中,那么在做规范的时候也只能在这个组件上去微调,殊不知搜索这个控件的“语境”并不单单只能在页面顶部,例如高德地图做的就很好。这样一来,这个组件的常规规范形式就能和很多产品区分开来了,当然要视产品形态不同。



4.业务背景与交互形态


4.1不同业务背景下的信息组织


市面上有许多的新零售电商产品,页面中的信息流也是大同小异,但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式,但是我们要知道,30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示,但是3000个就不行了,很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。





所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中,首屏基本上都是呈现这样的策略,从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局,从基本上能够满足一个大量sku电商产品的所有需求,但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢?


从交互角度入手,那么既然我们无法做到大而全,那么我们至少可以做到精准、限时,让用户上瘾的策略,上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具,以及时间轴的商品推荐,让有限的资源呈现更多的形式变化以及让用户有时间概念,每天固定时间来进行活跃。





4.2营销工具化


通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性,并且在后台工具中灵活控制,同时除了日常的营销目的之外,在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。


4.2.1更加灵活的控制方式




4.2.2多样的营销结构



最后总结一下,我认为交互设计也包含了视觉,所以我们在决定用什么样的设计形式之前需要考虑更多,入业务、用户价值等等,从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。






二、为什么UI配色那么难


不管是做UI设计还是画插画,有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够,其实不然。一个可能是大家总结的太少,从来都是凭感觉和运气去配色,但其实都是有讲究的。本文不会给大家重复讲解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩,并且在产品设计中使用的。



1.人类对色彩感知的原理


大家都知道,对于不同的颜色,我们对其的感知是不同的,有人觉得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那这是什么原因呢?首先我们要知道我们眼睛内存在两种感光细胞:视锥细胞和视杆细胞,视杆细胞能够感知光线强弱但无法感知颜色,而视锥细胞却相反,视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞,而视杆细胞却用的少,更多的是在黑暗的环境中使用的多。


视锥细胞的三种类型分别是低频、中频和高频视锥细胞,分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感,它的范围包含的比较广,特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。





大家在平时生活中都能看到,在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识,因为这些非常醒目。更容易被红视锥细胞感知到,但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。



1.1人对色彩边缘的对比更加敏感


我们来做个实验,如下图,大家觉得在中间的灰色块是纯色还是渐变色,可能很多同学看上去都会觉得是个渐变色,但其实它就是一个纯色,不信的同学可以自己在工具中尝试一下。




但如果你把这个色块拿出来后,不在这个环境中直接进行边缘对比,那就不会出现渐变的情况了。那光说原理,我们也来看一下在产品设计中需要注意的地方,因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置,这样就会造成边缘视觉的对比,本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。





如果你想要让两个颜色接近的元素具有识别度,那么最好将这两个元素进行重叠摆放而不是分开摆放。另外,如果是卡片样式的设计,背景色一定不要过于灰暗也不要过于浅白,过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比,显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。





还有,为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理,因为文字和背景叠加产生的轮廓只是文字的轮廓,在我们的第一印象中只是一种符号,当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击,但依然还是不够明显,所以为了强化可点击这个感觉,我们才用了线框、背景色、箭头等方式。





2.色彩在UI设计中的作用


1.加深品牌印象与品牌感


一般来说,产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中,所以例如闲鱼、马蜂窝等,主色都采用了黄色,黄色具有非常活泼、有趣、好玩的特性,无论是线上还是线下都使用了这个品牌黄色,从每一个线上元素的主色,到线下包装的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的话,可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的,所以在线上的界面用起来会非常不和谐,和整体偏浅色、轻的风格对比起来太强烈,引起不适。





而且线上觉得还OK的颜色,由于印刷的原理,实物也会更加偏低饱和和偏暗。



2.引导用户视觉凹增加易读性


我们在上一篇十万个为什么文章里提到了人们如何阅读信息,提到了一个视觉凹的概念。所以在界面中,什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品,使用了高亮色来引导用户视觉。







当然色彩的运用也会讲整个页面的层级凸显出来,而不单纯的用中性色来区分层级。


3.区分信息交互的状态


同样是上两张图,大家可以清晰的看到,美团中的附近热卖好点、满减标签、价格,其实都只具备信息的呈现,但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样,“展开”使用了辅助蓝色,这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上,当然也会有其他的色彩来表示可点击。


所以不是所有的元素都要赋予颜色,这样会使整个页面非常混乱





另外,UI设计中主色除了引导用户的作用外,也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面,当前板块标签和正在播放剧集的激活状态。





4.营造氛围传递热度


色彩除了上方所述的字段中的不同使用,在图片和整体氛围营造中也起了很大的作用,目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标,或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造





3.在UI设计中色彩运用的坑与技巧


1.色彩的正反两面

在色彩的心理学上,大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面,可以看下方多种色彩的描述。





然而其实很多的产品使用的色彩和我们所认知的会有一些差别,比如咖啡品牌的主色选择,在我们常规人之中,咖啡应该是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色





在瑞幸刚出来的时候,很多人其实不太习惯把这个蓝色和咖啡结合起来,但是为了塑造品牌差异化,瑞幸一直将“蓝色”作为品牌的主基调,“小蓝杯”这一称呼不但让消费者感到亲切,也在众多的咖啡中有了属于自己的记忆点。在这支广告片中,主基调同样是使用蓝色,不但符合了当下消费者的视觉偏好,也在为用户留下记忆点之后,也让用户在看到蓝色时自然而然的想到瑞幸咖啡。





2.颜色的禁忌用法

但凡各位使用了这样的配色,保证各位过不了试用期,相信我。所以大家千万要避开。


1.高饱和度的色彩

会让人产生“幻觉”!让人产生视觉疲劳,例如我将饿了么这个界面的色调调整一下大家看一下,不亮瞎算我输。




2.灰部使用过多的配色

为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的




3.没有规律且过多的配色

让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点,所以我们常用的方法是6、3、1的色彩配比。





4.荧光色

荧光色绝对不可以使用在UI界面中,尤其是主色。会让你瞬间失明!





5.太轻柔的颜色

在很多dribbble的飞机稿中,经常能看到这样的配色和练习。无论是在练习中还是实际项目中,这样的界面也完全无法让用户看到想看的信息,没有重点且轻飘飘的感觉。





6.现在很火的新拟物化设计

说真的,这样的风格确实耳目一新,但个人觉得可能不会成为主流。因为它就和第五种一样:信息可识别性很差。就不说色弱的人群,就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调,这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知,原则是轻量化却又需要那么多阴影,这样就有点自相矛盾的感觉。


为了营造这样的“新拟物”的轻量氛围,还不得不在整个界面中简化大部分元素,能不加文字就不能加文字,说的好听叫做使用了奥卡姆剃刀原则,有一句话一直非常影响我做设计:“设计是需要被简化的,但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。




7.不要将对抗色重叠

例如下方,两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼





4.正确的UI配色方法


定义主色


首先我们必须要说,色彩肯定是需要结合产品和用户的定位去指定和提炼的,所以前期会需要去做一些研究例如用户画像,品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”,从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑,并且对市面上的app进行总结,我们发现大部分的产品色,简单来讲在我们HSB模式中去色都在一个固定的范围,就像这样。

 




在上文中也说到用色比例的631法则,所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎,其实辅助色没有非常明显的1种或者两种,都是多色的辅助色方案,都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略,一个主色搭配多个辅色,如果有其他独立的板块可能需要重新定义专属的配色策略。






定义中性色


其次再定义中性色,比如字体和线条以及背景色。字体是为了让信息有对比,显示层级,那么通常给2-3种层级即可,至少2种,至多3种。在选择3个层次的中性色文字是,给大家一个建议:标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50,默认文字不要大于80,大家可以去尝试一下,且中性色不得使用纯黑。







文章来源:站酷 作者:应骏



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


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

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

图标设计,你需要了解这些...

纯纯

目录

  • 图标风格汇总

  • 图标设计流程

  • 案例讲解

  • 图标资源输出



01 常见图标风格汇总

  • 线性

  • 面型

  • 线面



1、线性

  • 单色

  • 双色

  • 渐变

  • 不透明度

  • 一笔成形

  • 断点



1.1单色

单色线性拥有简洁、清晰的特性,在视觉层级上较低,适用于基础功能图标。b端较为常见,移动端常见在设置页面或导航栏通知、分享等图标设计上。 


1.2双色

双色线性在单色的基础上丰富配色,解决了单色线性原本过于单调的问题,在提升趣味性的同时,也将视觉层级进行了提高,同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化,需要考虑是否符合产品风格及主流目标用户审美。 



1.3渐变

线性渐变还可以在用色上进行区分,简洁的用色可以给人带来科技、炫酷感,在车载ui中较常见。丰富的渐变配色则更适合运营入口设计,有着年轻化、热烈的氛围。 



1.4不透明度

线性双色可以和不透明度风格进行很好的比较,前者视觉更跳跃,个性更鲜明。而后者在使用时普适性更强,即丰富配色细节,又避免视觉过于跳跃(可以把它理解为同类色配色)。所以在大多数使用场景下,不透明度风格都是一个很好选择。 



1.5断点

断点风格有线性单色&双色该有的个性,并且在线性双色基础上继续提升趣味性,使用需要注意产品目标人群年龄段。 



1.6一笔成型

该风格设计感和个性都极强,很考验设计师对造型绘制的把控,功底不够就很容易导致设计后出现识别问题。所以设计难度较大,且延展性较弱,难以表达复杂语义,使用需谨慎。



2、面性

  • 单色

  • 双色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等轴侧(2.5d)

  • 渐变

  • 新拟态

  • 轻质感

  • 明暗质感

  • 写实

  • 抽象

  • 卡通插画

  • 像素风格



面性与线性的区别在于前置视觉面积更大,整体视觉层级比线性高。下面部分和线性风格重叠的内容就不赘述。




2.1单色



2.2双色



2.3不透明度

面型不透明度风格,通过调节前后不透明度可以带来较强的空间感,使用场景较广泛。



2.4晶白

晶白严格来说也算质感图标(白色质感)的一种,常见于品类图标设计,通过透明度、投影、渐变等参数调节,使整体立体感和空间感都很强。



2.5磨砂玻璃

又叫毛玻璃风格,是通过背景模糊,或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受,但由于容易与浅色背景相融,造成对比度不足难以识别的问题,所以在使用中需要注意无障设计。



2.6等轴侧

也叫2.5d,有很强的趣味性,及识别度,适合重要入口或运营设计。但这类风格较为卡通,且表现花哨。使用需要注意应用场景及目标人群年龄段,避免干扰信息阅读和不符和产品风格。



2.7渐变

这类风格可以很好的吸引用户注意力,在电商、美食类产品中较常见,主要注意配色干净协调。



2.8新拟态(Neumorphism)

新拟态图标色彩相对单一,与背景融合度较高,通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大,再有这类风格与背景对比较弱,无障设计问题较大。



2.9轻质感

通过大量渐变、投影来表现立体感,整体风格偏年轻化,常见在教育类产品中,使用注意配色干净和谐。



2.10明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感,整体风格统一。


2.11写实

这类图标特点很明显,有极高的识别度,目前美团外卖品类区入口就是该风格,整体偏年轻化。主要考验设计师造型绘制、技法表现能力。



2.12抽象

通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术(装饰)价值更大,不追求识别度,美观即可。



2.13卡通插画

这类风格既可以做图标又可以做空状态插图,设计美观有特色即可。



2.14像素风格

这类移动端界面较少见,目前只在一个海外电商产品(Jollychic)中看过,还有就是一些像素游戏中,比如「泰拉瑞亚」、「我的世界」。



3、线面

  • 线面

  • 描边插画



3.1线面

和线性双色图标类似,趣味性较强,具备个性化特点,可以做Tab选中状态。 



3.2描边插画

类似卡通插画,在卡通插画基础上加入描边。同样颜色,在一些特定的前后交接处利用线条做区分,算是多一种设计表现形式,同样美观有特色即可。 




4性格

  • 粗线

  • 细线

  • 圆角

  • 直角



4.1粗线

力量感、稳重、男性等感受



4.2细线

品质感、精致、女性化 



4.3圆角

安全、亲和、年轻



4.4直角

严谨、正式、果断利落 

由于图标风格繁多,所以以上列举并不包含所有图标风格。



02 图标设计流程

  • 明确语义

  • 关键词详解发散

  • 确定风格

  • 提取造型

  • 创意输出



1、明确语义

图标存在的目的是起引导作用,在丰富页面视觉的同时,帮助用户更快的获取信息(当然图标的使用意义还有很多)。设计师在将文字翻译成图标前,必须先理解其文字含义。因为最终呈现的图标,需要用户一眼能准确反翻译其中含义(艺术抽象、装饰类图标除外)。

在C端设计中,以Tab为例,一些常见文案:首页、分类、发现、我的,这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说,目前在做一款网站搭建工具,后台常会需要设计组件及对应的图标,比如:滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标,在一定程度上会比较难精准传达文案。



2、关键词详解发散

这一步有点类似情绪版使用,但不同的是:我们需要将确定的词(A)进行详细解释,再将解释文案中关键的词语进行发散,得出一系列相关联的词(A1、A2、A3…)。有时间还可以根据这些词找到对应的图片,再看在这些相关联的图片中,有哪些细节可以传递最开始我们确定的那个词(A)的意思。



3、确定风格

我们可以借助情绪版,根据产品定位和目标用户描述,再结合应用场景,在目前已有的风格中找到符合产品气质,符合当前模块视觉层级的图标风格。

前面我们已经了解了目前常见的图标风格有三大类:线性、面型、线面,其中还有很多细分,比如在线性中又分粗线(沉稳、力量)、细线(品质)、曲线(女性化),还有圆角、直角,每种类型所传递的感受都不同。在创意前期,我们将每个点合理进行随机组合(如下图)即可创造一种更新颖的风格。



4、提取造型

经过关键词详解发散,其实我们已经获得了很细节点,接下来将这些细节点进行合理融合后,就可以得到代表同一语义但形式各异的基础图标样式(此时还只是想法阶段,可以通过手绘方式记录组合形式,不用特别精细化)。




5、创意输出

在设计执行前我们需要先了解两个大知识点: 
  • 图标设计规范

  • 图标设计注意点


5.1图标设计规范

  • 常见图标尺寸

  • 图标盒子使用


5.1.1、常见图标尺寸

在界面图标设计中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、图标盒子使用

什么是图标盒子?其作用是什么?

图标盒子即图标约束网格,来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。



5.2图标设计注意事项

  • 简洁美观

  • 易于识别

  • 细节统一

  • 像素对齐

  • 视觉大小一致

  • 饱满透气

  • 融入品牌基因



1、简洁美观

图标是否美观,会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中,通常会尽量减少不必要的细节,降低图标复杂度,来帮助用户快速识别。当然图标也有丰富细节的做法,常见在一些重要运营入口上。



2、易于识别

识别度的问题,在最前面明确语义中就有提到过,这里就不赘述。



3、细节统一

在细节中包含:表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等(不同风格图标的细节不同,这里只是列举部分),上述细节在系列图标中都应保持一致。



4、像素对齐

在图标绘制中,需尽量避免坐标位置xy或宽高参数出现小数点,以此保证最终导出的图标是清晰的。



5、视觉大小一致

由于不同图标外轮廓不同,就会导致哪怕在物理大小上相同的图标(假设都是24x24),但视觉上可能还是会给人大小不一致的感受,因此我们需要借助前面提到的图标盒子进行约束调整。


6、饱满透气

图标的饱满透气,不一定需要加入很多笔画(描边、装饰等)细节。而是尽可能在形成风格的同时,简化能影响识别度的关键笔画,通过调节笔画大小、长短、位置使图标达到一个最平衡状态。


以如下途牛_我的页面_功能区图标为例:

图中标红图标就存在饱满度不足,及内部较拥挤的情况,第一感受是看起来不舒适,品质感比较低。除此外,还存在如下问题:


  • 图标大小很明显不一致

  • 设计语言不统一,有圆角有直角

  • 图标风格不一致,有透明度+分割形式(我的保单)、有纯透明度形式(专属顾问、我的收藏)、还有其余单色实心形式



7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感,作为高阶设计师必备技能之一,常见提取维度:

  • 颜色

  • 设计语言

  • Logo轮廓 


以我之前的豆果美食项目为例,提取到如下细节:

颜色:提取黄色、绿色两类颜色 
曲率(设计语言):品牌Logo走线顺滑、自然、圆润,个性鲜明 
分离(设计语言):黄色区域与绿色区域虽不相交,但存在联系。(分离间留白) 


根据提取到的基因,最终得到如下两套风格不同,但语言相同且都具备品牌感的图标。


Logo轮廓:在图标中融入品牌logo外轮廓(Google Play),或根据logo轮廓结合应用特性进行延展(Microsoft)。



03案例展示

就以途牛为例,对我的页面功能图标进行优化。 


1、明确语义

根据文案进行详细翻译,帮助我们充分理解文案。



2、关键词详解发散

以「专属顾问」为例:

释义:有专门的知识或经验,受聘为机关团体或单独个人提供专门咨询的人。

提取释义中关键信息,生成关键词:专业专人,再根据关键形容词发散一系列具象名词。



3、确定风格

根据产品调性和模块视觉层级以及考虑延展性,初步确定如下风格组合起来是比较适合:


线性:双色、不透明度、断点 
面性:单色、双色、不透明度、轻质感、明暗质感 
线面:线面 


在实际查看中,发现Tab的风格为单色+不透明度+断点风格。

为了和Tab拉开差异,最终确定以如下风格进行组合表现比较符合产品调性:

线性:双色

面性:单色、双色、不透明度、轻质感、明暗质感

线面:线面



4、提取造型

通过手绘或大脑想象进行造型构思,这里我就不展示手绘过程(行吧,我承认就是画的太丑了不敢放)。



5、设计执行

由于不同风格对图标造型构思有所影响,且图标类型很多,不同特点组合起来样式更多。案例精力有限,所以只以线性双色风格做演示,希望大家灵活使用。


这一步就是将手绘图形矢量化,在矢量化创意过程中,我们可能会对手绘的图形进一步简化细节或新增造型,这都很正常。只需注意在整个绘制过程中遵循图标设计规范,以及注意图标设计注意事项即可。

图标盒子使用


创意输出


Tips

在绘制造型时需注意,图标文案详解中的关键词也有优先级,以如下「礼品卡」图标为例,是表达礼品的意思多?还是表达卡的意思多?这个会影响图标中相关元素的面积大小。站在商业角度看可能会更倾向于方案2,突出礼品,来吸引用户。站在入口文案清晰传达的角度,可能我会更倾向于方案1。 

1or2?


最后对专属客服进行多风格尝试,最终效果如下:


附上部分绘制过程中的淘汰稿:



04图标资源输出

在将图标输出给前端前,需要沟通好使用何种格式,目前常用图标格式分为两大类: 


矢量格式

  • SVG:缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态,减少重复上传。


位图格式

  • PNG:支持透明格式

  • JPG:兼容性强,适合大尺寸高饱和度图像

  • GIF:动态图标使用,缺点是透明情况下边缘容易出现锯齿。



这里主要介绍静态图标中,svg格式在工作中如何输出给前端同学使用(借助iconfont)。


svg图标交接方式:

1、图标资源优化

在iconfont官方绘制指南中有描述,在导出前需要按如下规则优化图标资源:



2、选中图标导出svg格式

以Figma为例,优化图标资源后,选中图标将输出格式选择为导出svg。



3、上传iconfont

在资源管理下,选择需要上传的位置。


选择上传图标 



4、选择颜色提交模式

去除颜色并提交:适合单色图标,去除颜色提交可以方便前端使用代码修改参数,减少不同状态图标重复上传。

保存颜色并提交:适合多色图标(注意:在单色情况下,选择保留颜色提交,前端则无法通过代码修改图标颜色)。



最后当我们把图标都上传好后,就可以将前端同学拉入团队项目中开心进行玩耍。



好了,以上就是本篇要分享的全部内容,希望对各位有所帮助。



文章来源:站酷 作者:幺零三

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

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

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

别光抄了,信息卡片应该这样设计!

纯纯

工作中我们经常会接到一些信息卡片的设计需求,在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样,当接触到这类需求的时候,下意识就是打开自己的的Eagle,找合适的参考,去借鉴排版布局。但是其实最后只知道参考这样做好看,对于作者的设计思路并不清楚。后面我尝试去总结其中的规律,也得出了自己的一些设计思路。





02 这里讲的信息卡片是什么?

让我们先看下各类App中,一些比较不错的信息卡片长什么样:




03 一个信息卡片包含什么内容?

  • 图片

  • 图标

  • 文字

  • 标签

  • 按钮

  • 布局



1图片 】

图片理解很简单,就是该卡片想表达的信息主体,可以是商品、风景、插画等,PGC内容图片通常由运营把控,UGC内容为用户自行上传。虽然上线后实际上传的图片,对于设计来说没有太多关系,但在设计稿中还是需要严格控制图片质量。(一定程度上也能提高过稿率)

图片挑选需要注意如下:

  • 高清无码

  • 主体突出且简洁

  • 配图与文字信息相关联

  • 多图片情况下,视线保持同一水平线或同一角度



2【 图标 】

图标的出现有以下几类:品牌特定logo、特殊字段图形化(如性别、定位、点赞、VIP、关闭等等,将字段图形化后可以减少该组件内的文本信息,方便设计排版的同时提升整体阅读体验)、氛围点缀(主要在于丰富卡片,提升设计感来吸引用户注意)

图标设计需要注意如下:

  • 清晰度:品牌图标避免过小,导致难以分辨。

  • 识别度:字段图形化后一定需要确保拥有足够的识别度,尽量在大众认知范围内。比如“+”可以代表添加和关注、“x”代表关闭,“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。

  • 风格一致:氛围点缀图标在配色上,需要保证与产品调性一致,或在色彩情绪上,与该模块传递的感受一致。还有一些细节,比如线性图标描边粗细,圆头还是方头端点,这类尽量保持一致(当然也可根据情况演变新的风格,但注意风格种类不宜过多)



3【 文字 】

文字即对图片的描述信息,通常分为:标题、正文、辅助信息、优惠信息、数据信息(评分、价格、点赞评论数等) 

文字信息处理需要注意如下:

  • 对比:需明确页面信息权重,突出重点,便于有效传递信息。移动端常见对比方式:特殊字体对比、字号差对比、色彩对比、修饰元素(点线面)点缀对比。重点需要注意,避免在一个卡片中,采用过多不同大小字号和颜色去表现信息层级,尽量使层级精简与规范。

  • 对齐:保证卡片内信息之间存在某种视觉联系,信息结构清晰。对齐方式分类:左对齐(符合左到右的阅读习惯,阅读体验最佳)、右对齐(阅读类文本比较少见,一般是为了将分好组的信息填充卡片四角)、居中对齐(居中传递严肃、正式感,在移动端中较少见,适合信息较少的情况下使用)

  • 亲密性:将信息通过留白、分割线、色块等方式来成组划分,避免信息散乱。



4【 标签 】

标签指活动通知、产品卖点、重要时间、优惠信息等这类需要突出的内容,标签按视觉层级由高到底依次划分为:异型标签、色块型标签、描边型标签3大类。 


标签处理需要注意如下:

  • 视觉层级:一个卡片内可能出现不同类型的标签,比如同时有活动通知、优惠信息、产品关键词,这个时候就需要了解各类信息重要层级,正确选择标签形式(异型、色块、描边),帮助用户快速抓住产品重点。

  • 极限场景:标签内字段不宜过长,需要考虑最大宽度,进行合理布局。(牵扯到屏效比)

  • 呼吸感:合理定义标签内部文字与底板的上下左右间距,避免拥挤。

  • 设计感:标签多数是带有活动属性,在设计手法上可以尝试破型设计,还可以尝试加入一些小图标、纹理,一方面营造活动氛围,提升产品品质感。一方面图标具有一定语义,可辅助用户识别。(适合单个特殊标签添加,而不是一类标签,因为多个一样的标签配上图标同时展示太乱)

  • 对比度:在色块标签中需要重点注意,通常色块标签又分以下3类:有彩色底板+白色文字、带不透明度的有色彩底板+有彩色文字、消色底板+消色文字,在挑选颜色时需注意文字与底板对比足够清晰,减少阅读障碍。



5【 按钮 】

按钮是卡片上最重要的元素之一(部分卡片也可能没有),作为一个行动点,Ta的作用在于吸引用户点击。按钮在表现形式上和标签一致,我们最常见的有彩色底板+白色文字、消色底板+消色文字、描边框+文字(有彩色描边或有彩色字)。 


按钮和标签在处理上很相似,可参照标签。



6【 布局 】

布局指上述所有图片、图标、字段等信息,在卡片内的排布方式,常见布局方式:上下布局、左右布局、居中布局。 


信息布局需要注意如下:

  • 拓展性:卡片中字段的长短对布局的影响较大,字段较长且多的情况下需要的占用的空间更多,所以常见是上下布局。

  • 屏效比:上述拓展性与屏效比的关联紧密,在卡片中,为了保证一行文字最大显示,通常文字都是单独一行,避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度,虽然单个卡片内文字显示多了,但整个一屏中展示内容变少。为了便于理解上面这段话,这里我们可以看到淘宝这个案例,淘宝的推荐卡片中信息很多,在遇到文案很长的情况下,为了平衡上面讲的这个问题,使用到了如下较少见的布局方式。

  • 合理性:在列表式左右布局中,是选择左文右图,还是左图右文。这需要看产品类型,在新闻资讯类产品中常见是左文右图,而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右,上到下的阅读习惯。



04 如何做好一个信息卡片?

  • 明确产品类型

  • 明确应用场景

  • 了解目标用户

  • 划分信息权重

  • 同类信息归组

  • 增强信息对比

  • 设计细节表现

  • 确定最终布局


1【 明确产品类型 】

产品类型不同主要对布局产生影响。

  • 以文字为主的产品,比如前面讲到的新闻资讯类,通常采用左文右图的布局。

  • 以图片为主的产品,比如美食、电商类,通常采用左图右文或上图下文。 

原因:新闻资讯类,吸引用户产生点击的并不是因为图片,而是具体的标题,通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反,这类产品图片比文字更吸引人。



2【 明确应用场景 】

在我之前一号店改版中提到,信息卡片可以分为列表式和卡片式两大类,对应的优缺点如下: 


卡片式:在卡片式中图片是设计的重中之重。这是因为人是视觉动物,在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合,能给用户呈现良好的视觉效果。

应用场景:

  • 图片为主,需要利用图片给用户带来良好的视觉冲击,提升浏览过程中的趣味性,从而吸引用户长时间浏览。

  • 适合随机推荐的内容,不适合进行查找。

  • 丰富内容展示,适合元素较多情况,可以让各种形式的元素保持井然有序。


列表式:信息集合一般是简单的图文组合(小图+标题)或纯文本信息。由于列表垂直排列每一行内容,相对卡片式,在同样大的屏幕中可以展示更多内容,可供用户阅读信息更多,新闻类和数据类应用更青睞于这种设计。


应用场景: 
  • 信息直白,用户无需点击查看,即能尽可能了解内容信息,适合快速查找。

  • 文本重要程度高于图片,需要靠标题吸引用户点击。

  • 小屏幕应用场景。




3【 明确目标用户】

目标受众的属性,对信息权重的划分影响很大,比如对价格敏感的用户,优惠信息的视觉层级就需要抬高。为了便于理解下面的案例,这里我定义的就是对价格敏感性用户。



4【 划分信息层级 】

定义了目标用户后,将卡片内所有元素罗列出来,并借助四象限分析的方法,对各个元素的权重进行划分。



5【 同类信息分组 】

将同类信息分组,便于后面确定元素之间的亲密性关系。



6【 增强信息对比 】

前面我们借助四象限,将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理,设计用户浏览视线,在该过程中对案例中的元素进行如下处理:

  • 图片:这里图片及比例保持不变

  • 图标:将原版会员图标+字段的方式更改为图标,原因有两个:1、会员图标+字段的方式占用了较多的横向空间,导致标题字段信息展示减少,同时还导致用户在阅读完标题后,阅读下一行内容时视觉错行严重(会员图标+字段过长导致)。2、由于会员图标代表会员内容,这是绝大对数产品对用户有过的教育,所以这里重设了会员图标并单独展示。

  • 字体:对标题字体进行加粗,(16pt,Medium),价格字体加大加粗(24pt,Medium),划线价加粗(12pt,Medium),按钮文字&活动标签文字(14pt,Medium)精简其他辅助信息层级(12pt,Regular)

  • 标签:优惠信息标签由0.5pt改为1pt,提升视觉层级。活动标签为色块降低不透明度+有彩色文字。

  • 按钮:由于标签为描边样式,为了拉开差异,突出按钮,所以将按钮改为实心色块。


做完上面这些后,可能大部分人觉得到这就可以了,但其实我们还可以再增加设计细节,这也是你与其他设计师拉开差距的地方。



7【 设计细节表现 】

由于案例不同,增加细节的方式不同,所以需要具体案例具体分析。在本次案例中,我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标,来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标,配合预约文案,让用户预知操作后可能的结果,并且提升按钮视觉层级、提升点击欲望。



8【 确定最终布局 】

在布局中主要考虑两个点:

1、合理性&拓展性

由于该卡片的应用场景为推荐列表,所以这里保持原有的上下布局,遵从人眼阅读习惯。

2、屏效比

将活动标签选择放置在图片与底板分割处,好处有: 
  • 借助这个方式,使图文内容过渡顺畅,阅读体验更佳。

  • 尽可能减少了标签对产品图的遮挡。

  • 压缩卡片高度,最终达到提升屏效的目的。



解决部分人可能存在的疑惑:


Q1: 3张设计稿中活动标签为什么进行修改?

:稿1到稿2,活动标签样式修改,位置调整,对应不同的用户,对于价格敏感性用户,显然稿2更能刺激他们点击。稿2到稿3,对标签样式再次进行加强。稿3到稿4,考虑该应用场景是在推荐列表中,为了避免出现多个同类型活动的卡片,导致过乱,所以修改了设计样式。


Q2:在稿3到稿4中优惠标签这一排内容,和预约按钮这一排内容,上下调整的原因是什么?

:1、将文字区域看做一块完整的矩形区域,稿3整体看起来更完整,而稿2像是右下缺了一个角。2、在信息阅读顺序设计上,稿3的处理是优先让用户看到优惠相关信息,更加迎合价格敏感性用户的需求。


Q3:你认为最终稿还有优化空间吗?

:这个案例,是我截图与我司相关App的。我认为如果可以,还需要再了解目标用户画像,了解用户真正在意的信息是那些,这些都会对最终方案产生影响,也只有知道这些才能得出最合适的哪个方案。这里我定义的是对价格敏感的用户,基于这类用户来说,我认为最终方案是合适的

文章来源:站酷 作者:幺零三

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

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

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


7大秘诀帮你设计出令人难忘的优秀网站

纯纯

失败的网页设计各不相同,但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么,什么东西能够触动他们,让他们欲罢不能,无法忘怀。

听起来似乎很简单,不是吗?取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦,那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素,才是一切的关键。下面总结的7项秘诀,会让你的网页脱颖而出的。

1、定制化

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

定制化,或者说个性化,是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验,无论是玩页游还是购物。

看看世界上最著名的那些网站是怎么做的吧。Amazon 为用户提供基于购买历史的产品推荐,Netflix 则会推荐相关的作品、有待观看的下一部,并且基于用户 Twitter 上的内容来进行推荐。

每一个微小的自定义设计,都能让用户感觉这些用户体验设计是为他们而做的。同时,这种设计也会给用户一种参与感和沟通的体验,从而加深用户的忠诚度。如此一来,用户会更好地融入整个网站的用户群或者社区。

2、简练的动效

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

另外一个大热的流行趋势,就是动效设计。它不仅能为用户带来惊喜,而且具备强大的引导性。

动效设计的精髓在于简单。令人头晕或者不知所措的动效,应该不是你要的东西吧?动效应该是有目的性的,和其他所有的设计元素一样,有针对性,达成目标是它存在的意义。

对动效或者说动画最熟悉的,无疑是迪士尼。Frank Thomas 的《生命的错觉:迪士尼动画》中,就详细总结了创造今天动画的12个原则:

·挤压和拉伸
·预期
·登台
·连续动作和姿态对应
·缓进缓出
·弧形运动
·次要动作
·时序
·夸张
·立体刻画
·吸引力

3、使用约定俗成的设计模式

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

对于常见的问题,设计模式就是可靠且可复用的解决方案。简而言之,最常见的信息和交互方式被整合到一个界面当中,比如点击按钮,滚动页面,滑动解锁,它们都是设计师模式。

你需要熟悉这些常见的设计模式,并且在设计界面和交互的时候将它们用进去。这符合用户在体验上的诉求,也是易用性的最基本构成。

同时你也要在自己的设计中创造设计模式,在不同的页面中使用相同、相似或者规则化的设计,让用户习惯。比如,不同页面中的CTA按钮的色彩保持一致,卡片式的元素使用相同的样式,等等等等。

4、给设计以性格

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

没人会喜欢单调无聊的设计。你的网站应当同你的品牌保持一致的性格,拥有独特的气息。

要做到这一点,通常需要用到微妙走心的文案和亲切自然的语调如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(请注意他们的文本和图片是如何无缝地连接到一起的)

5、在屏幕内思考

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

用户同网站交互都是在屏幕内进行的,无论是桌面端还是移动端,整个体验都是围绕着屏幕进行的。

这并不是一句废话。屏幕是一个区域,它界定范畴,赋予概念,创造隐喻。这也解释了为什么视差滚动和卡片式界面是如此的流行。这两种概念将一定量的信息合理地放置到屏幕这个容器中,让用户随之同下一个元素进行互动。

如何运用好这个概念其实并不是那么容易。一个屏幕内应当承载多少信息,需要仔细考虑。一个桌面端页面所能承载的信息量在移动端屏幕上,可能需要划分到几个页面当中去。

从屏幕的角度来考虑问题,可能会让你的计划更加庞大复杂,但是这种考量是有价值的,这种基于屏幕或者基于设备的考虑能让用户感觉更加便捷贴心。

6、一体化的内容和交互

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

视频、游戏、测试都争取让用户能与之进行互动,这种互动的目的在于驱动用户参与到设计中来。用户与界面交互的越多,用户所获得的体验就越好。

不过,有趣的元素能让这一切截然不同。

让交互内容尽量简单,不要牵扯太多,让用户可以一目了然,让他们轻松获得反馈的信息,不用在冗杂的体验中沦陷。这其实和美剧的5分钟原则有着异曲同工之妙。

7、轻松有序的设计

眼前一亮!7大秘诀帮你设计出令人难忘的优秀网站

最后一个秘诀并非不重要,它甚至可以说是最基础的原则:让你的设计保持干净、整洁和有序。使用栅格可以让每一个页面元素都有准确的位置。将响应式设计落实到每一个元素,能让页面能从一个设备兼容到另一个设备。

简约风和极简风能成为设计趋势是有道理的。用户可以更轻松理解这一切。简约的视觉设计更容易交互。没有复杂信息并且被精心设计的界面能更好地运作,赋予更好的体验。

苹果的官方App Store 和Google Play 都推荐过的游戏 Two Dots 就是个典型案例。谁都可以拿起手机毫无障碍地开始玩儿,它设计简单干净,容易互动,视觉元素周围有足够的空间,无需担心误触。同时,其他游戏所具备的东西它也有——有趣好玩,可以共享得分,能分享到社交媒体。

结语

界定一个网站的体验与否有的时候并不是单一的标准,而今天所推荐的7条秘诀本身也更接近于基本的Guideline,了解用户,熟悉趋势才能提供优秀的体验。

文章来源:优设  作者:陈子木
分享此文一切功德,皆悉回向给文章原作者及众读者.


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

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


不为动而动!聊聊动态效果在体验设计中的应用

纯纯

一、为什么动?

首先,为什么要动?可能你会想到以下几条理由:

  1. 这让我的作品看起来很炫酷,碉堡了!
  2. 动效会带来流量,助我完成KPI!
  3. 别人都这么做了,我也得做!
  4. 编辑让我这么干的!

呵呵,你要这么想就完了。

那么该如何衡量一个动效是否应该出现呢,我们认为有几个考核标准:

1. 这个动效是否会影响性能?

首先,这个动效是否会影响性能?这个是最重要的,添加任何动效前都要考虑是否会影响产品的性能,如果一个很酷炫的动效会拖累性能,使体验变得卡顿不流畅,那么必须毫不犹豫的砍掉或简化。

例子:化身间谍

不为动而动!聊聊动态效果在体验设计中的应用

比如这个例子,这是一个穿越情景的过场动画,随着年份的倒转背景出现各个历史大事件,给人以历历在目的感觉,设计师考虑到了多张图片会出现卡顿的可能性,所以特意降低了每张图的清晰度,因为内容本身就是老照片的风格,所以这种降低画质的手法反而增强了画面的真实感。

2. 这个动效是否会提高产品的可用性?

任何动效的出现都必须带有明确的目的性,能够解决用户在使用过程中的困惑,而不是炫技。单纯的炫技只会分散用户的注意力,弱化内容,变得适得其反。

例子:翻页提示

不为动而动!聊聊动态效果在体验设计中的应用

比如这个上滑提示。不用解释,用户一看知道该做什么。动效增加了产品的可用性,所以这样的动效是非常有意义的!

3. 这个动效是否会给你的产品带来独特气质?

这里所说的气质是动效本身会有助于增强用户对于产品的认知和情绪带入。一个相得益彰的动效会为你的产品锦上添花,深化你的主题和功能,注意,一定是与主题相关的,牵强的搭配只会叫人觉得莫名其妙,毫无意义。

例子:人生四时

不为动而动!聊聊动态效果在体验设计中的应用

再看这个例子,人生四时,四根火柴依次燃烧,慢慢燃尽,这种油尽灯枯的感觉很切合的体现了产品生老病死的主题。

4. 重新审视第一条,看你的动效是否影响性能

所以,合理的动效不应是花拳绣腿,而应该是解决问题的手段。

二、哪里动?

好,我们再看看哪里需要动效,这里举几个例子:

1. 加载

首先是出现在加载环境,不管是网页还是H5都不可避免的会出现让用户等待的情况,在等待的过程中为了让用户知道他的手机没有死机以及网络是通畅的,我们应该在这个时候加入一些与主题相关的动效来提醒他内容正在加载中。

例子:化身间谍H5 loading

不为动而动!聊聊动态效果在体验设计中的应用

这是一个穿越类的H5,所以设计师在设计loading的时候选用了虫洞的理念,与内容本身紧密贴合。

2. 转场

第二个情景是转场。具有意义的转场会降低产品割裂感,我们看两个例子就明白了。

例子:QQ会员观影特权

不为动而动!聊聊动态效果在体验设计中的应用

不为动而动!聊聊动态效果在体验设计中的应用

这个例子里元素在默认状态下会做上下浮动的效果,当我们滑动时候,元素很自然的做了一个出场入场的效果。很自然,没有割裂感。对吧?

3. 页面元素的互动

也可以为网页元素增加一些必要的动效。

例子:好声音第四季首页:

不为动而动!聊聊动态效果在体验设计中的应用

看下好声音的专题页面,在网页上的能够点击的按钮或者文字链,在鼠标经过时都有点变化,这个十分必要。因为表面上的变化会给用户一种心理暗示,那就是点击后也会有变化。

4. 心理需要

这里所说的心理需求是指气氛和情景的营造,例如节日,游戏活动等产品,是需要一些动效去满足用户心理需求的。大家都知道在微信里输入“生日快乐”是会掉下生日蛋糕的,这个动效就比干巴巴的文字有趣多了。

例子:一封家书

不为动而动!聊聊动态效果在体验设计中的应用

一封家书,注意看,背景有飘落的雪花,漫天大雪勾起思乡情,对吧,合情合理,有情有义!

三、怎么动?

好,说完哪里动,我们现在看看怎么动。

1. 基于真实形态的模拟

基于真实的动画会叫人看起来自然流畅,符合规律,比如物体运动时的加速度现象。

例子:Look

不为动而动!聊聊动态效果在体验设计中的应用

注意看这个笔画的动势,是有快有慢的,模拟了写字时起笔收笔的那种节奏感,所以看起来是自然真实的。

2. 人物动作夸张化

在H5的设计中,经常会出现各种各样的人物形象,夸张的人物动作会生动你的形象,增加趣味性,给用户以惊喜。

例子:巴菲特这一年

不为动而动!聊聊动态效果在体验设计中的应用

巴菲特老爷爷,动作很亲切。

3. 给元素赋予弹性

有弹性的物体会叫用户觉得具有生命感和真实性,弹的程度取决于你对元素软硬度的设定。

例子:拍个大头鬼

不为动而动!聊聊动态效果在体验设计中的应用

三个小鬼一跳一跳,弹性赋予了他们顽强的生命力。

4. 蒙太奇

这是一种类似蒙太奇的手法,通过快速切换的画面来形成一种奇妙后现代感觉。

例子:传奇硬箱

不为动而动!聊聊动态效果在体验设计中的应用

炫酷了,节奏很快,提气!

好,以上只是一些基本的动效手法,在实际的应用中其实有很多手段,在这里我建议大家可以去看看迪士尼和皮克斯的动画,应为动画本身是一种对于动作行为高度概括的手段。虽然这些都是电影,但是他们使用的手段和遵循的理念是非常值得我们去学习和借鉴的。注意观察这些大牛们的作品,你会发现他们的作品中充满了走心的细节。

四、结语:

简单来说,当用户打开一个界面,注意力首先会被动态的物体吸引,然后才会把注意力转向颜色对比强的部分,最后才是形状。这一过程是人在进化过程中形成的本能反应,基本适用所有用户。同时一个非常重要且容易被忽略的原则:用户的注意力是有限的,而且越来越少。很可能在用户注意到一段动效之后,注意力和耐心已经用尽,无法看到其他内容就着急去下一个界面了。

所以,对于动效这样一个非常强势的工具,一定要用在希望用户注意的部分,并且认真打磨。真正做到“不为动而动”。



文章来源:优设   作者:程远


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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档