首页

搞定页面视觉风格统一性,看这篇文章就够了!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

7月份的时候,有一位面粉问到了我关于统一店铺视觉风格的问题,我说等有机会了专门写篇文章做分享,因为一两句话根本就说不清。

但是,今天我并不是专门只针对某个店铺做视觉统一的设计分享,而是想从全局的角度去给大家阐述这个问题,毕竟,你得知道自己为什么需要做视觉统一,你才可能做好视觉统一,所以这个问题就不单单只是指店铺了,而是关于品牌与用户之间的问题。

因为不管是店铺也好,平台也好,他们其实都是为卖货服务的,它们与品牌产品之间其实都是合作关系,最终其实都是要链接到用户身上的,而设计师要做的,归根结底都是处理好它们与用户之间的关系,帮助达成交易。

所以我将要分享的关于视觉统一的方法,就不单止是适用于店铺了,而是品牌、平台、店铺都适合的。

按照惯例,我还是先给大家列出一个提纲,方便大家理解:

  • 为什么需要统一视觉风格?
  • 统一视觉风格的方法有哪些?
  • 统一视觉风格的注意事项及总结

接下来我就逐条展开给大家说一下这其中的奥秘吧!

一、为什么需要统一视觉风格?

当我们提到统一视觉风格这几个字,不知道大家能联想到什么?或者能联想到什么画面什么公司什么产品呢?在回答这些问题之前,我还是先给大家举一些例子也许你就明白了。

比如前几天我无意中打开了淘宝app,然后刚好看到了2018年淘宝新势力周的一系列卖场页面:

大家知道像淘宝天猫京东这样的平台,每年各种卖场促销活动是很多的,而且每一场活动都需要容纳成千上万的商家和数以万计的商品,但是,所有这些东西都却只是通过一块液晶显示屏展现在消费者面前,那么这时候就是我们设计师发挥作用的时候啦。

这时候设计师需要做的事情就包括以下几个方面:

  • 要保证活动页面里能把所有东西都容纳进去;
  • 要保证页面是方便顾客浏览的,所以要有规律可循;
  • 要保证页面是可以吸引顾客一直逛下去的,所以页面有规律的同时又要有所差异,视觉上不枯燥,不然会视觉疲劳;
  • 要在顾客心里和脑袋里建立某种印象,找到存在感,以免被顾客遗忘;
  • 既要保证平台活动整体的调性和谐性,又要为不同的商家提供最恰当的展示机会,所以视觉表现形式要合理;
  • ……

总而言之就是要权衡平台、商家、顾客三者之间的关系和利益:顾客买的爽,商家卖的爽,平台名利双收。

那么这时候保持页面视觉统一就很有必要了,因为视觉统一就有以下非常重要的几点作用:

1. 强化品牌或事件在用户心中的印象

因为几乎所有的品牌都需要做的一件事情就是占领用户心智,就是要让用户在众多的品牌选择里有自己的一席之地,不要把自己遗忘了,所以它需要不断的出现,保持存在感。

一个活动每年去做,一个电影每年都出续集,一个产品每年都会出不同的系列等等,都是同一个道理,都是在强化自己在用户心目中的印象,保持存在感。

提到这个,我平时每次搞活动都会提醒大家不要经常换头像或微信昵称,我让大家多来留言其实就是这个道理,因为我每天要面对的那么多人的头像和名字,如果你长期不换头像并且经常来留言,那我肯定会记得你;但如果你经常换头像,并且留言次数还少,那我铁定就不记得你了,因为你没有强化一个符号在我的脑海里啊,明白了吧。

2. 让事件变得有序有规律可循

就像我们办运动会,不同的队穿不同的衣服、喊不同的口号等等,即便是队里的人走散了,你看一下队服或对方喊的口号你就能辨别出是自己人还是别人了是吧。

再比如你去超市货架上拿饮料,正是因为这种视觉统一的作用,所以你才能很好的辨认出自己要买的品牌产品,而不至于拿错了,反过来对于品牌也一样,自己内部的产品之间是有统一的视觉形象的,同时又是跟其他品牌相区分开来的,所以才可以保证顾客不买错。

这些道理运用到页面设计上也是一样的,让顾客方便逛,同时别逛错了地方。

3. 提高相关人员的可执行性

因为像这种大型的活动,需要大量的人力投入,就拿设计师来说,一般都是某个主设计师出来一个设计方案,然后这个方案不仅要能达到以上提到的要求,还必须要是能保证其他设计师能够以这个设计方案的模版,去执行剩余的几十上百个页面,工作量非常之大。

二、统一视觉风格的方法有哪些?

前面我们讲到了统一视觉风格和形象的必要性和重要性,那么接下来就是大家最关心的如何统一视觉形象的问题了,所以我依旧会从好几个方面以举例的方式给大家做讲解,你就明白了。

不过在这之前,我还是拿一张图给大家看,还是淘宝新势力的这张图:

你在这个画面里看到了什么?这个视觉画面里都包含了哪些东西?

嗯,我看到了模特、文字、图案、各种颜色,还有布局、排版、以及所有上面的内容汇聚在一起所组成的一种风格。

那所谓统一页面的视觉风格,也就是说只要保证以上所有提到的这些东西,我在另外的页面里也至少能找到一项是类似的,那我们就很容易将它们视为是具有共通性的页面了,也就达到了视觉风格统一的目的。

以下面这几个淘宝新势力分会场的页面为例:

你应该注意到了,这些页面虽然颜色不一样,但整体看视觉却非常统一,同时细看又有些差别,其原因就在于以下几个方面:

  • 不同的页面对应的色相不同,但是明度和饱和度是近似的;
  • 不同的页面对应的文案不同,但是文案的字体样式、布局排版是一样的;
  • 不同的页面对应的氛围点缀元素不同,但是氛围元素的风格、质感、手法等等是类似的;
  • 不同的页面对应的点缀元素不同,但是每一个页面里的点缀元素都是跟相应的主题、模特、文案等等相呼应的。

所以你才会有这些页面具有统一的视觉风格的印象,包括其他会场的页面,虽然做了一些小调整,但是依然可以看得出来是统一的视觉风格:

因为这里运用到了跟上面同样的原理。

不过这种手绘风格与模特相结合的设计形式我以前也给大家分析过,我这里就不深入举例了,大家可以看看圣保罗艺术家 Ana Strumpf 为很多时尚杂志所做的插画封面就能有所体会:

这种手法给人俏皮、时尚、新潮的感觉,非常适合追求趣味个性而又不失品味的心态年轻的群体,所以这一次的淘宝新势力周大概也是出于这种新潮人群定位考量,才会做这种形式的设计吧。

而且这种扁平质感半插画性质的设计形式几乎是很难过时的,非常前卫和耐看。

所以到这里你应该就好理解了,一般来说,我们有以下5个途径可以达到统一视觉风格的途径。

1. 提炼某种风格,重复使用

比如你看今天淘宝新势力的一些会场页面,视觉风格就非常统一,一眼就看出是实体模特+手绘图形相结合的风格形式,在模特脸部做一些图案轮廓线,然后模特周围点缀一些手绘图案做氛围,有点达达主义的感觉。

2. 建立某种品牌色,重复使用

当我们重复看到某种颜色跟某个品牌或产品同时出现,时间久了就会自然而然的把这个颜色和品牌联系在一起,从而产生条件反射,只要看到某个颜色立马就会想到这个品牌,只要听到这个品牌的名字脑海里就会出现某种颜色。

这其实就是通过建立某种品牌色达到视觉风格统一的目的从而让品牌在用户心里建立起了这种色彩印象。

比如蒂芙尼蓝:

所以,任何页面,任何场所,任何产品上只要出现了这个蒂芙尼蓝色,用户都会默认他们是相关联的:

再比如,可口可乐红:

当然了,色彩种类那么多,有的品牌或店铺的品牌色并不是单一的,而是多彩的,这都没有什么限定。

那这个如果是运用到页面设计或 Banner 设计里的话,这种品牌色是一定都需要出现在画面里的,至于色彩比例就因需要而定了,而且今后只需要出现这种颜色,就能反过来达到视觉统一的目的。

3. 提炼某种视觉元素,重复使用

所谓视觉元素,其实就是指一切你能看到的想到的元素,所以这里的视觉元素也是指多个方面的,比如某种图案图形、某个物件、某个文字、产品、模特、logo 等等其实都算是视觉元素。

那说到视觉元素的运用,我脑海里印象比较深刻的2个品牌就是初语和天猫,前者是店铺,后者是平台。

我们可以看看品牌升级以前的初语,它有一个让人印象非常深刻的视觉元素,就是她的模特和眼部的妆容:

所有的模特都保持了一致的妆容特点,气质也是类似的,当然你也会看到很多他的设计都是会与艺术名画相结合,这些都是它的特点,并且加以充实用,就给人建立了很深刻的印象,你只要看到这种模特妆容或者画面,你就知道:「噢没错了,这是初语」。

那天猫也是一样的,每年双十一这个天猫头的元素就会以各种形式露面,而且不止是在双十一,可以说是相当强大的视觉符号了,你想忘都忘不掉它:

2017年天猫双十一宣传海报

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这种通过某种视觉符号来统一视觉形象,重复使用从而加深用户印象的方式在很多其他地方都有用到,比如每一个苹果手机,每一次开机,都会出现同样的开机画面:白底+黑色的苹果 logo。

4. 打造品牌专属的IP或宠物形象,并重复使用

这就跟品牌给自己找了个的代言人一样的效果,只要这个形象出现了,你就知道这个是xxx品牌。

比如店铺,三只松鼠就是这么干的:几乎所有的页面里都会出现三只松鼠。

比如平台,京东有狗,天猫有猫,苏宁也有狮子等等,电商界俨然是一个动物世界。

再比如珠宝品牌,卡地亚Cartier 有猎豹:

这只猎豹经常出现在各种品牌宣传广告里,或者制作成各种首饰,用户看到猎豹就会想到卡地亚。

5. 提炼某一句口号,重复使用

既然我们前面提到了视觉元素,那么文案或口号其实也是画面里的其中一种视觉元素,所以我们再以2017年天猫双十一宣传海报举例:

△ Budweiser 百威

△ GUERLAIN 娇兰

△ Beats

这里面的「xxx祝你双11快乐」 「天猫双11全球购狂欢节」等等口号文案,重复使用,其实就起到了这种画面视觉统一的作用。

而且这种方式也在很多地方有运用到啦,比如你看的很多动漫、电视剧,总会重复出现一些台词,嗯,说到这里,我想到了小时候看的一个动画片《宠物小精灵》,每集火箭队出场台词都是这几句:

然后每集结束的时候总会有那么一幕,喵喵被抛到空中然后喊出一句台词:「我们还会回来哒~」。

你看这种重复口号的威力多么可怕啊,一二十年了还让用户印象深刻呢。

不过,其实最后列举的这三点其实都可以称作是视觉元素的重复使用啦,至于原因我也在前面作了解释,而且以上所有的方式其实都是可以结合运用的,并不是孤立存在的。

还有,大家注意到了吗?我在每一条后面都加了4个字「重复使用」,因为就算你有了自己特定的视觉元素、有属于自己的宠物形象、有自己的品牌色、有自己的风格等等,但是你压根就不露面,你还特别低调藏着掖着不展示自己,那谁还记得你啊。

说到这个,我想到了异地恋之所以容易失败,不也是差不多道理吗?你和男/女朋友三五年不见面没有关系,没法手拉手亲亲嘴也没有关系,但是如果你们压根就不联系,不出现在彼此的视线里,那感情自然会淡的呀,等于是白白给了别人可乘之机。

所以我一直都觉得品牌和用户之间其实也是一样的道理,就是在「谈恋爱」,而不是做生意,至于你们之间是谈的什么类型的恋爱,那就看自己本事了。

总结

之所以我们需要做视觉统一,其实就是为了强化我们在用户心理的印象,让他们记住我们,记住我们是很有规范的,靠谱的,可信赖的品牌印象等等,并且还要重复的出现在用户的视野里,那怎么出现呢?方法就在我上面列举的几条内容里啦。

当然,你也得控制一个度,不要过份的运用这些方法,不然会招致用户反感的。

想想有的男孩子可以成功讨女孩子欢心,而有的却被女孩子嫌弃的不行,知道原因了吗?道理都是一样的啊。

你看下面这些世界杯期间的广告,画面 low,口号 low,重复次数又很多,用户记住是记住你了,但真的挺烦的。

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

用QQ空间的实战案例,帮你学会最热门的上瘾模型

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近《创造101》让 pick 一词大火,大家都在讨论自己 pick 了哪位小姐姐,pick 到一定地步的人被称为铁粉,极端失去理智的叫「脑残粉」,pick 让我想到了上瘾这个词。上瘾一词在我们生活中一直属于一个稍带贬义且指责的词,儿时妈妈会指责你吃糖上瘾,玩游戏上瘾,长大后小姐姐们会被说购物上瘾,甚至研究表明整容也会上瘾。最近拜读了美国斯坦福大学任教的尼尔·埃亚尔写的《上瘾》一书,感触非常深。如果从服务提供者角度看,上瘾的指责是不是也说明你的产品解决了用户的痛点,你为用户带来了情感满足呢?

目录:

  • 前言(上瘾模型-pick模型)
  • QQ空间小游戏为案例(项目介绍&目标人群)
  • 触发用户&抓住动机
  • 付出行动
  • 情感撩动&情感满足
  • 持续投入
  • Pick me

一、前言

尼尔·埃亚尔写的《上瘾》中提出「上瘾模型」的概念,其中分为四大步骤:触发-行动-多变的犒赏-投入。

这四个步骤是一个循环的过程,当用户越沉迷于这个循环,那说明你的产品对用户的吸引力越强,反之当用户中断了这个循环,作为产品设计师就需要考虑我们在哪一步出现了问题,用户为何抛弃了你的产品,或者说用户是怎么「戒掉」你的产品。这其中的原因可能会很多样,比如用户找到了更好的撩动自己情感的产品,又或者你没有达到用户的预期。

那么怎么样才能让用户在有多个选择时,选择 pick 你呢?我试着把「上瘾模型」结合认知心理学中的「心智模型」,系统性的提出<锁定目标用户-触发用户-抓住动机-付出行动-情感撩动-情感满足-持续投入-pick> pick模型。

二、QQ空间小游戏为案例(项目介绍&目标人群)

空间小游戏平台是国内领先的 H5 游戏平台,通过接入外部优质 H5 游戏开发商来提供角色扮演、休闲、策略、剧情、棋牌、双人pk 等六大类别的轻量小游戏来满足用户碎片化时间娱乐的需求。

  • 目标人群:手Q所有用户都是我们既定的目标人群,平台游戏类型能满足不同年龄阶层的用户需求。
  • 用户场景:个人碎片化时间, 好友之间有互动娱乐需求时。

平台分为4个 Tab,每个 Tab 都满足了用户相应的需求。

  • 首页:承载所有平台游戏,有分类让用户去找喜欢类型的游戏,也根据智能算法进行游戏推荐。
  • 社区:提供一个让玩家能互相交流的平台。
  • 礼包:给用户提供游戏福利,加强对平台依赖性。
  • 我的:承载 VIP 体系和积分任务体系。

以下我想通过空间小游戏为案列,讲解 pick模型在实际运用中的指导意义。

三、触发用户&抓住动机

触发分为内部触发和外部触发,触发要显而易见,行为要易于实施。

1. 外部触发

空间小游戏作为依附于手Q空间的一个入口级平台,我们可以很好的利用好友关系链的传播性,这也就是触发模型中的外部触发——人际型触发。由于平台的关系链属性,所以我们会把人际型触发当做外部触发的核心触发方式,因为好友之间的触发是相对其他触发方式更加稳固值得信赖的,当然付费推广型触发也是在产品冷启动时期常用的方式。人际型触发我们细分为自主型和被动型,自主的主要是用户通过分享游戏或者邀请好友的方式,被动的就是平台通过用户在游戏内的信息触发给他的好友。

人际型触发(主动型&被动型)是外部触发的核心触发方式。

自主型人际触发-邀请好友来平台玩游戏,通过展示游戏特点吸引用户点击进入,这就是典型的自主型人际触发方式,也是最容易形成病毒传播的方式。

被动型人际触发-在不透露隐私的前提下,通过好友在游戏内的信息吸引用户的关注进行触发,这种触发一般会使用在广告位和推荐位模块上,这样能尽可能的提高用户的安全感和认可度。

2. 内部触发

也就是用户自主的触发,情绪触发是主要的内部触发方式,尤其是负面情绪,当人厌倦,孤独,沮丧或者游离不定的时候会让我们体会到轻微的痛楚和愤怒,我们在内部触发这里需要抓住用户孤独,无聊的情绪波动。当用户无聊的时候,如果产品能快速的出现到用户眼前,并能消除用户的负面情绪,那么这就能让用户产生记忆点,每当这种情绪袭来的时候,用户总能想到你。

通过展示游戏的热度信息来吸引用户关注,在用户无目的性刷空间的时候,通过推荐热门游戏相关数据,然后与用户的孤独情绪产生碰撞。

总结:触发是让产品卖出去的第一步,而有效的触发才是成败的关键点。有时候内部触发和外部触发并不是独立存在的,在不同的场景下两种方式是可以做到相互结合的。触发方式千万种,最适合自己产品的触发方式才是最好的。

四、付出行动

人在做出行为时有两个基本动因,一个是该行为简单易行,二是行为主体有这个主观意愿。

上一步我们已经通过各种方式触发了用户,这个时候就需要用户能做出行动。在我们空间小游戏这个案例里,用户点击游戏 logo 时,我们有过一个很大分歧,那就是用户在平台或者广告位上看到游戏 logo 点击后,是直接进入游戏还是需要一个游戏详情页去介绍游戏。

两种方式都有各自的优势,即点即玩能快速的让用户进入游戏,能提高转化率,游戏详情页能让用户更好的了解游戏内容,再进一步确认是否去玩这个游戏。

针对这两个方案,我们最终选择前者-即点即玩,因为我们考虑到 H5 游戏都是属于比较轻量的游戏,所以我们希望用户能形成一种认知,平台内所有游戏是轻量的,便捷的。所以在面临方案选择时,回头看看产品的调性与特点,可能能帮助我们做抉择。

而针对已经玩过平台内游戏的老用户,我们必须能让用户在下次想开启游戏时快速的找到玩过的游戏。根据后台数据我们的用户平均在玩的游戏数量是2.9个左右。最后我们选择在小游戏首页顶部位置设立一个最近在玩模块,首屏展示三个,可滑动和查看更多,希望能让用户快速的找到玩过的游戏。

所以触发是有分新用户和老用户的区别的,针对新用户我们更多的是需要拿内容去吸引他们,而老用户则需要能让他们快速的找到自己已经玩过的游戏。所以触发要简单易行,主观意愿是需要我们去引导和吸引的。

五、情感撩动&情感满足

优秀的游戏总是能持续的撩动用户的情感,让人在游戏中得到满足感,成就感。我们平台所有游戏都是第三方公司提供,我们没有权限对游戏内容进行过度的参与,我们只能尽可能的把最优质的游戏筛选进来,所以在情感撩动和满足上我们不能完全依赖开发商的游戏质量和设定。所以必须在我们平台的体验上给用户一些噱头,一些小目标,让用户在平台上也能得到情感满足。只有这样,用户才能对平台产生记忆点和依赖,这才是我们想要达到的目标。

从平台的角度我们希望通过<社交属性,奖励机制>两个方向去撩动用户的情感,用户可以在社交里面找到荣誉感(晒自己的游戏等级和战绩),也可以在多变的奖励机制里面不停的完成一个又一个的任务而获取相应的奖励。

1. 社交属性

游戏社区,让充值玩家可以有地方炫耀自己获得成就感(名称附带游戏等级和荣誉),让普通玩家也能通过社区了解更多游戏攻略,甚至可以在这里与陌生人交友(点击头像可跳转手Q资料卡)。


2. 奖励机制

  • 游戏礼包 tab,通过发放平台特殊礼包福利,让用户养成习惯,每日来平台领取礼包再去玩游戏。
  • 平台任务(签到,转发,进入游戏等)可获取积分,积分可以到兑换商城换取游戏金币和抽奖,通过积分抽奖能调起用户的心理起伏,让用户乐此不彼的投入到获取积分当中。
  • 首冲优惠,充值抵扣券,通过优惠的方式引导用户充值,研究表明当用户首冲后,之后充值的概率会提高很多。

总结:多变的福利奖赏会使大脑中的伏隔核更加活跃,并且会提升神经传递多巴胺的含量,促使我们情感产生起伏,然后一旦情感被满足,我们将会持续的投入下去,比如更多的时间,更多的金钱。

六、持续投入

人为什么会进行投入,投入行为背后的大思路是利用用户的认知,就是用户会认为投入越多,服务越好,得到的情感满足越丰富。当然事实也的确是这样的,投入的阶段我们需要让用户对未来的奖赏(心理,福利)抱有强烈的期待,这样才能让用户持续的投入。

比如我们在设计 VIP 体系时,随着 VIP 等级的提升,用户所拥有的特权就会不断增加,通过特权的吸引,当用户在游戏体验中发现了比较困难的任务时,我们就会提醒用户是否去升级 VIP,让通关更轻松,用户将很难抵挡这种特权满足。

又比如我们设定每周三为积分翻倍日,用户可以得到更多的积分,我们不断丰富积分商城的兑换物品,持续吸引用户的注意,让用户不断去期待新奖励。

七、PICK ME

我理解的 pick 是一种充满信任感的选择,这种选择会让用户去把产品分享给自己的好友,会在社交平台上讨论产品。但是能让用户 pick 你,并不是一件简单的事情,就好比你 pick 创造101小姐姐时,你可能会关注小姐姐的样貌、才艺、背景、人设,这些都是影响你产生认同感重要的因素。

我们做产品何尝不是这样呢,如果你的产品没有解决用户的痛点,没有让他产生愉悦的情绪,你就会被「淘汰」。用户的投票都是在符合自己心智模型的基础上做出的选择,pick 模型的设计目的就是将用户遇到的问题(情感需求)和我们作为设计者的解决方案频繁的联系到一起。

总结

让用户对产品产生习惯,是我们的终极目标。而如何让用户产生使用习惯,不是一朝一夕能达成的,这需要产品不断的迭代优化,让你的产品不断的解决用户变化多端的需求,那么忠诚就随之而来了。我们回顾一下 pick 理论,从更简单理解的角度来看,可以分为<触发-持续解决问题-养成习惯>,这里的难点属于第二步,当你的产品能不断解决用户的问题,养成习惯只是水到渠成的结果罢了。

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

新手科普!APP 的图文布局和按钮总结

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

常见的APP 图文布局有哪些?不同按钮有哪些用法?今天这篇总结帮新手认识基础知识,赶紧来收!

一、图文布局

用户所关注的内容以及不同的业务诉求决定信息的优先级排布,所以没有通用的布局,只有适合的布局。

1. 上图下文

上图下文更强调了图片的重要性,以「见」这个属性为优先,上图下文需要注意的是图片高度过高会严重影响版面效率,而一个具有商业化目的的产品对首页的版面效率异常看中,同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。

如果确实需要以大图+文的上下方式来布局,尽量找到版面的平衡点,考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示,例如4:3,2:1,16:9等。

宫格排列式的上图下文能够极大的提升版面效率,一般更多用于电商平台,在首页将某个模块的优质商品进行透出,提高转化和流量。缺点是缺乏信息完整度,在布局时需要考虑更多因设备、极限值带来的不同状况的问题。

可以看出,严选将金额跟在标题后面,而非固定位置,这样做的好处是将标题和金额关联度更高,形成一致性,缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。

2. 左图右文

左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图,在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示,否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。

菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面,也不会弱。

方形缩略图是最常用的形式,不至于太窄也不至于太宽,对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害,通常在视频缩略图会用到,但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间,同时版面的留白也更大,但是如果右侧信息过少,则会让页面有些单调和不完整。

左文右图就不再赘述,现在大多数左文右图在咨询和旅游产品中使用的更多,因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容,而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率,提升了多少满意度。我们可以简单的理解,如果说的是一件事,那么文字比图片更重要。如果说的是一样物品、人,那么左边放图更合适,体会一下。

3. 图文混排

为了使信息传达的更一致,通常如果没有大量的文字信息则我们会选择文字与图片混排的形式,为了适应多变的图片,我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。

二、按钮解析

其实严格意义上来说,能通过点击触发交互动作的控件我们都能将它定义为按钮,但是如果这样定义那就没的玩了,所以我们将移动端的按钮定义为具有引导性并且可点击的控件。

例如京东金融查看历史支取利率后的箭头,其实这才是这一行的引导按钮,但是为了更好的触发点击通常会将整一行都作为点击热区。

所以为了区分不同的按钮的用法,我这边将按钮进行了一个分类:主线场景、支线场景、异常场景。

主线场景下的按钮通常会使用的比较大,为了强化和引导核心的任务流程,所以该按钮应该是最醒目的。

样式通常会分为通栏和非通栏,而通栏则是从 MD 设计中衍生出来的一种形式。

1. 主线场景

要注意的是,通栏和非通栏按钮我们到底该如何选择,首先我们需要知道这样的按钮都是放在页面的底部固定显示,不会随着内容滚动,如果选择通栏按钮,则更适合可滚动的页面容器,也就是说一页中内容较多在一屏幕中无法显示全的页面,优点是按钮的优先级会很高,但是在 iphone X 这样的设备中,适配会纠结一些。

而如果选择不通栏的按钮,我们要考虑的是页面内容是否很长,如果很长需要在按钮底部加一层白色背景,尽量不要让内容穿过按钮,因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。

所以我们会发现考拉和淘宝虽然有样式区别,但实际上都相当于在底部有一层内容遮盖的部分。

2. 支线场景

再来看支线场景的按钮,支线场景的按钮一般能够分为:图标、文字、图标+文字、框+图文字+图标这样几种类型。

图标就不用说了本身就具有可操作的属性,也有修饰的属性,关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标,就是一种修饰型的图标,为了更好理解这里的定位是一种楼层定位,随着页面滑动到不同的业务模块而会跳动,这里并不是一个 tab 的功能,不能算是切换页面。

如果把定位按钮单独拿出来放在导航栏,或者页面右侧的空白处,我们就会觉得他是一个可点击并能够进行跳转的按钮。

包括「查看全部」这样的文字,即便不加箭头我们也会尝试去点击,高亮显示就更加明显,用户已经形成这样的意识,但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂,需要通过参考上下文的情景来做不同样式的选择。

不过支线流程毕竟是支线流程,为了不打扰主线流程,尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛,其实这个按钮用了实心的色块做了强引导,目的是为了提高客单价,同样只要是对最终目标有帮助,并不能算是跳失,说不定回来的时候买了更多更贵的东西。

3. 异常场景

异常场景下的按钮不需要做的过于醒目,一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态,并不是一种强烈的引导。

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

VR 那么火,你知道它的设计流程是什么吗?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

对于许多设计师来说,虚拟现实(VR)是一个全新且陌生的领域。过去几年中,我们目睹了虚拟现实硬件和软件的爆炸式增长。从体验性上看,虚拟现实既有小而简单的也有专业复杂的,整体体验差异很大。

作为 UX 或 UI 设计师,初次接触 VR 可能会有所畏惧,但不要害怕,在本文中,我们将分享一个设计 VR 应用程序的完整过程,我们希望您可以通过这个案例来开始自己的 VR 设计之旅。你不需要成为 VR 的专家;你只需要将你之前的设计技能应用到一个新领域。最终,经过大家的共同努力,我们定可以加速 VR 的发展以发挥它的全部潜力。

一、VR应用程序里有什么?

一般来说,从设计者的角度来看,VR 应用程序由两种类型的组件组成:环境和交互元素。

环境:您可以将环境视为您戴上 VR 头盔时所进入的整个世界 , 比如你身处的虚拟星系或者驾驶过山车飞驰的乐园。

交互元素:界面上影响用户交互和操控体验的元素合集。

根据这两个组件的复杂性,所有 VR 应用程序都可以沿两个轴定位。

在左上象限中的 VR 应用有类似模拟器的东西,例如过山车的 VR 应用,这种应用具有完全成形的环境,但根本没有交互。你只是被锁在了车里。

在右下角的象限中,应用程序具有一个更好的界面,但比较少或没有3D环境。三星的 Gear VR 主屏就是一个很好的例子。

设计场所和景观等虚拟环境需要熟练使用3D建模工具,许多设计师平时无法接触到这些元素。但是,UX 和 UI 设计人员有很大的机会将他们已有的技能应用于设计虚拟现实的用户界面。

我们所做的第一个完整 VR 的 UI 设计是 The Economist 的应用程序,与 VR 制作工作室 Visualize 合作。我们做设计,Visualize 创建内容并开发应用程序。

我们在之后文章中将此应用作为一个工作示例,现在我们将介绍设计 VR 应用程序的方法,然后再介绍设计 VR 界面的细节。您可以从 Oculus 网站下载Gear VR 的 Economist 应用程序。

二、VR UI设计的第一步-回顾传统流程

尽管大多数设计师已经熟悉了设计移动应用程序的工作流程,但还不太清楚设计 VR 界面的流程。当面对第一个VR应用程序设计项目时,我们首先要做的是合乎逻辑。

传统工作流程到全新领域

当我们第一次使用三星的 Gear VR 时,我们注意到它与传统移动应用有很多相似之处。VR 应用程序与传统应用程序有着相同的工作流程:帮助用户与界面进行交互。

现在请记住。鉴于与传统应用的相似性,设计师花费数年时间改进的久经考验的移动应用工作流程不会浪费,这些流程仍然可用于制作 VR UI。这让你比你想象的更接近 VR!

在如何设计 VR 界面之前,让我们回过头来看看传统移动应用的设计过程。

1. 线框

首先,我们将进行快速迭代,定义交互和总体布局。

2. 视觉设计

在此阶段,功能和交互已经完成。我们把视觉规范与设计应用于线框图,并制作出漂亮的界面。

3. 设计文档

在这里,我们将屏幕组织成流程,绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的设计文档,它将被用作开发人员的主要参考。

现在,我们如何将此工作流程应用于虚拟现实的设计当中呢?

三、开始VR UI设计

1. 画布的尺寸

最简单的问题可能也是最具挑战性的。面对360度的画布,人们可能很难知道从哪里开始。事实证明,UX 和 UI 设计者只需要关注整个空间的某个部分即可。

我们花了几周时间试图弄清楚什么样的画布尺寸适用于 VR 设计。当您使用移动应用程序时,画布大小取决于设备的大小:iPhone 6为1334×750像素,Android大约1280×720像素。

要将移动应用程序工作流应用于 VR UI,首先必须确定合适的画布大小。

以下是扁平化时360度环境的样子。这种视图叫做等角矩形投影。在3D虚拟环境中,这些投影围绕球体缠绕,以模仿现实世界。

整个投影的水平宽度是360度,垂直180度。我们可以用它来定义画布的像素大小:3600×1800。

使用这么大的尺寸可能是一个挑战。但因为我们主要对 VR 应用程序的界面设计感兴趣,所以我们可以专注于这个画布的一部分。

基于迈克·阿尔格(Mike Alger)对舒适观察区域的早期研究,我们可以找出一个合适的部分来展示界面。

感兴趣的区域占360度环境的九分之一。它位于图像的中心,大小为1200×600像素。

让我们总结一下:

「 360度视图 」:3600×1800像素

「 UI视图 」:1200×600像素

四、测试原型

「UI视图」画布有助于将我们的注意力集中在我们正在制作的界面上,并使设计流程变得更加容易。

同时也必须使用「360度视图」在 VR 环境中的预览界面。此外为了获得真实的比例感,使用 VR 头盔测试界面也是必要的。

△ 使用Avocode,您可以轻松直观地比较设计

五、设计工具

在开始之前,我们需要以下工具:

1. sketch

我们将使用 Sketch 来设计我们的界面和用户流程。如果您没有,可以下载试用版。Sketch 是我们首选的界面设计软件,但如果您使用 Photoshop 或其他任何软件更舒服,也没问题。

2. GoPro VR Player

GoPro VR Player 是一款360度内容查看器。它由 GoPro 提供,是免费的。我们将使用它来预览我们的设计。

3. Oculus Rift

Oculus Rift 连接到 GoPro VR 播放器,这将使我们能够测试我们的设计。

六、VR界面设计流程

在本节中,我们将介绍如何设计 VR 界面。我们将一起设计一个简单的界面,最多花费5分钟时间。

下载源文件:https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密码:09vt,其中包含预设的 UI 元素和背景图像。如果你想使用自己的设计文件,那也是可以的。

1. 设置「360度视图」

首先要做的事情,让我们创建360度视图的画布。在 Sketch 中打开一个新文档,并创建一个画板:3600×1800像素。

导入文件 background.jpg,并将其放在画布的中间。如果您使用自己的背景文件,请确保其比例为2:1,并将其大小调整为3600×1800像素。

2. 设置画板

如上所述,「UI view」是「360 view」的裁剪版本,我们仅关注 VR 界面。

我们创建一个新画板:1200×600像素。然后,复制画板到「360 view」中,并将其放在画板的中间。不要删除「360 view」画板,我们同时保留着两个画板,以后会用到它们。

3. 设计界面

我们将在「UI View」画布上设计我们的界面。我们会尽量简单一些,首先在视图上添加一些图块。您可以使用 tile.png 文件将其拖到 UI 视图的中间。

复制它,并创建一行三个图块。

使用 kickpush-logo.png 文件,并将其放在图块上方。

4. 合并画板

现在来看看有趣的东西。确保「UI view」画板位于左侧图层列表的「360view」画板上方。

将「UI view」画板拖动到「360 view」画板的中间。将「360 View」画板导出为 PNG;「UI view」将位于其上方。

5. 在VR中测试它

打开 GoPro VR Player,并将刚刚导出的「360 View」PNG 拖到窗口中。使用鼠标拖动图像以预览360度环境。

我们完成了!是不是很简单?

如果您的机器上安装了 Oculus Rift,则 GoPro VR 播放器应该可以检测到它并允许您使用 VR 设备预览图像。根据您的配置,您可能需要在 MacOS 中做一些显示设置。

七、VR设计中需要注意的因素

1. 低分辨率

VR 头盔的分辨率非常糟糕?这不完全正确,其实它相当于手机的分辨率。但是,考虑到设备距离您的眼睛5厘米,显示器看起来并不清晰。

为了获得清晰的 VR 体验,我们需要一个8K的显示屏,这是一个15,360×7680像素的显示屏。相信这种设备早晚会普及。

2. 文本可读性

由于显示器的分辨率较低,会导致所有精美的 UI 元素都会看起来像素化。这意味着,首先,文字难以阅读,其次,直线部分会出现锯齿。所以尽量避免使用大段文字和特别复杂的 UI 元素。

八、收尾工作

1. 设计文档

还记得我们的移动应用中的流程图吗?我们现在将这种做法也应用到 VR 界面。用我们已经做好的界面组织成一个易于理解的流程图,这非常有益于开发人员理解我们设计的应用程序的整体架构。

2. 动效设计

设计一个漂亮的 UI 是一回事,但让他动起来又是另外一回事了。我们决定以二维视角来处理它。

基于我们的 Sketch 文件,我们使用 Adobe After Effects 和 Principle 为界面设计动画。虽然输出的不是真实的3D体验,但它足以指导开发团队了,且能帮助我们的协作者在流程的早期阶段了解我们的愿景。

△ 你刚刚设计了第一个 VR UI。真棒!

我们知道你在想什么,「这很酷,但真实的 VR 应用程序会复杂的多。」是的,当然是。但重点在于我们可以在多大程度上将我们当前的 UX 和 UI 的经验应用于这种新媒介?

九、VR UI可以走多远?

1. 新的交互体验

一些 VR 体验非常依赖虚拟环境,然而传统界面的确已经不是用户控制应用程序的最佳方式了。在这种情况下,您可能希望用户直接与环境本身进行交互。

想象一下,你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此,您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。

要从办公室转移至目的地,用户需要选择他们想去的地方。他们可以拿起一本旅行杂志,轻轻松松浏览它们,直到它们被某一页吸引。或者,桌面上可能会有一系列有趣的物品,根据用户选择的不同,将用户带到不同的位置。

这确实很酷,但也有一些缺点。为了达到完美的效果,你需要一个更先进的带手持控制器的 VR 头盔。不过,像这样的应用程序要比传统的应用程序花费更多的精力来开发。

2. 革命万岁

现实情况是,对于大多数公司而言,这些沉浸式的体验在商业上还不可行。除非您拥有几乎无限的资源,例如 Valve 和 Google,否则创建类似于上述体验的产品可能成本太高,风险太大且过于耗时。

这种体验非常出色,可以带你到媒体和技术的最前沿,但通过新媒体将产品推向市场并不太好。

通常,当一种新形式出现时,它会是一个小众产品。随着时间的推移,成本的下降,有足够的人去学习和市场的资本注入,它就会成为应用广泛的产品。

随着 VR 头盔变得越来越普及,将会有越来越多的公司将 VR 融入他们与用户的互动当中。

从我们的角度看,相比于手机、平板,VR 用户界面本质上是更直观的,并且更接近用户,随着科技和市场的发展,VR 将会带来更大的价值。

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

那些很熟悉但又叫不出名字的设计法则:干扰效应

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.(排除一切不可能的,剩下的即使再不可能,那也是真相。)」这句话用干扰效应来解释最好不过,本期我们来聊聊。


想看更多设计法则,这个专题里全都有:设计法则专题

一、干扰效应(Interference Effect )定义

干扰效应:一种现象,同时思考两件或两件以上的事情时,思考的过程会变得比较慢,也不准确。

二、干扰效应产生理由

有两种或两种以上的知觉或认知过程发生冲突时,就会产生干扰效应。

人们的知觉和认知的不同与心智模型有关,这些模式会独立分析、处理收到的相关信息,处理后会传送到工作记忆区,并作出诠释。当输出资料一致,诠释过程会又快又好。当输出资料不一致,就会产生干扰,需要一些其他的处理,以便更好地解决。解决这些问题需要浪费很多时间,对性能也会产生不好的影响。

三、干扰效应案例

1. 斯特鲁普干扰

斯特鲁普干扰(Stroop Interference):刺激物不相干的一面引发了思考过程,因而干扰了刺激物相关方面的思考。

图标协同文字可以准确的向用户传递所要表达的内容,二手在常用的 App 中截出了一些图标,却发现现在很多的图标在信息传达方面有所欠缺。

举四个例子:

下面这组图标,「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息,还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美,但是图标功能却存在缺失,而且这几个图标不能刺激用户对信息的理解,反倒是让用户更加迷惑。设计师也注意到了这个情况,所以最近改版后,信息传达变的更加直接,减少了干扰。

接下来的这组图标也存在同样的问题,这组图标想借助图标上产品本身的含义来传达给用户要表达的信息,但是这需要用户对这些产品本身的定位非常明确,如果不明确的话只能干扰用户的行为,例如,用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」,再例如:中间「轻奢」图标,用的是劳力士绿水鬼,一款70000+还要靠等才能买到的奢华手表,二手认为跟轻奢的定义有矛盾,除非这并不是劳力士。

米家这套图标二手认为可以准确传达所描述的信息,因为米家有种类繁多的 loT 产品,有时候一款产品更是分为不同的版本,如果用户只是根据名称选择的话不仅繁琐而且十分耗时,所以在选择产品时,米家把所有产品外形准确刻画成图标,用户可以先根据自己产品的外形大致选择型号,再根据文字提示准确的选择自己产品的版本。

△ 米家App图标

滴滴这套图标表达也很准确,不同的服务通过不同的图标可以准确传达。

△ 滴滴图标

2. 加纳干扰

加纳干扰(Garner Interference):刺激物一个无关的变化,引发了思考过程,干扰到跟刺激物相关的思考过程。

举个例子:如下图,指出单独一排的形状,比指出两排其中一排的形状要简单。两排形状紧靠在一起,激发了想说出旁边形状的思考程序,造成干扰。

根据上面这个案例,二手联想到了「个人中心」页面,大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容,并且能够根据数据的长度自适应显示,Material Design 建议列表是「可快速扫描」,适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局,宫格导航是将主要入口全部聚合在页面,让用户做出选择。这样的组织方式无法让用户在第一时间看到内容,选择压力较大,采用这种导航的应用已经越来越少,往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

△ 列表布局和宫格导航

3. 前向干扰

前向干扰(Proactive Interference):现存记忆干扰了学习。

举个例子:手淘的最近改版中,店铺首页顶部导航和底部自定义菜单结构化调整,但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮,二手习惯点击左上角返回按钮来返回上一级菜单,改版后依旧习惯点击左上角,但是打开的是店铺印象,仅仅是图标左右位置简单的调换,已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候,尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。

△ 手淘的店铺首页改版

4. 后向干扰

后向干扰(Retrosctive Interference):学习干扰了现存记忆。

这个正好跟上面相反,二手不断培养现在的使用习惯,渐渐的就忘记了上一版的路径。

四、怎样预防干扰

要想预防干扰,就要避免输出思考过程中相互冲突的设计。知觉的干扰效应,通常是因为信息的传达过程中有歧义,或是因为把互相干扰的元素结合在一起。要把干扰效应降到,首先要求设计师用准确的设计语言传达信息,如果这样还是无法让用户很好的理解,其次可以考虑利用文字或者引导来告知用户。

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

 


照片手绘设计趋势

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

香港理工大学教授John Heskett认为,作为设计师有三个阶段性的价值:修饰者,区分者,设计驱动。在信息爆炸的今天,设计师每天阅读大量的设计文章、作品,但却依然提升缓慢。一个优秀的设计作品:到底好在那里?背后思考是什么?品牌价值有哪些?…

为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计,帮你解读每个设计背后的思考!让基础审美养成设计好习惯的第一步。

------------------任何设计问题添加微信:uiskyss---------------------------

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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

该有的视觉元素全都有,设计不好到底差在哪里?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

小时候我们很多经验都是来自于寓言故事,故事总能帮你更好地理解一些事情和道理。关于设计,这个道理同样适用。今天的文章,我们就跟着一个设计师的经历来学点什么吧。

我有一个朋友,名字叫做 Jimmy,这的确是一个很普遍的名字。当我认识他的时候,他正供职于一家名为 Shmuckle 的公司,而他正是这家公司的设计师。和所有的设计师一样,他日思夜想梦寐以求的,是成为一名著名的设计师,而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样,着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上,而是身体力行,力图在公司里面推行好的设计。在 Jimmy 的眼中,好的设计应该是直观的、创新且令人愉悦的。

当然,故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

这一次,Jimmy 正在执行一个重要的项目,这个项目的成败将会直接影响到他的职业生涯。这次的任务,他需要为他们公司的一款产品,重新设计整个控制面板。而就在这次的项目当中,Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B,那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频,阅读曾经给他启发的文章,收听其他同行所开设的播客,以期在其中找到感觉或者灵感。

可惜,灵感并没有如期而至。局面尴尬了。

就在此刻,援手到了。Sarah 是公司的资深设计师,正巧这个时候路过 Jimmy 的工位,看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊,她早年入行的时候,同样经历过这样的状态,为求一好设计而痛苦不已。如今,她已经能够轻松驾驭不同的需求,足以应对复杂多变的设计项目。

「Hey Jimmy,老远就看到你正在揪头发,看样子正在构思新设计吧,瞧你这个状态,应该不太顺利吧?」

「诶,客户说让我给他们重新设计整个控制面板。他们觉得不够好使,希望新的控制面板能够更好展示信息,提升效率,最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试,有人觉得挺棒的,有人又非常讨厌,还有一部分直接说还得接着改。现在,我觉得无能为力,不知道要怎么弄了。」Jimmy 保持着挠头的姿势,盯着屏幕说道。

「别纠结,」Sarah 微笑道:「如果一直盯着问题解决问题是常常会陷入这样的困境的,解决方案其实并不复杂,你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了,问题就会迎刃而解了。其实,关键也就是几个基本的设计原则。」

「虽然这话经常听到,但是真的能行?」Jimmy 狐疑地盯着 Sarah,思忖两秒感觉到大姐头这是要传授秘籍,便摸过小本子,端正坐姿,准备做笔记:「那么,都有哪些原则呢?」

Sarah 拍了拍 Jimmy 的肩膀,端了杯咖啡,说道:「下楼散步吧,咱们边走边聊。」

「其实,在产品完成之后,是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡,慢慢地开始说。

保持清晰

Jimmy,如果脑子里面的思路没有梳理清晰,很难做出条理清晰的产品的。因此,在设计产品之前,先应当消除思维中的混乱,有几个事情,在设计的过程中要始终保持关注:

  • 业务目标,客户的问题和需要的功能则会催生设计,而这几个因素之间是存在关系的。
  • 永远不要为了好看而牺牲功能。
  • 下一步要做的事情始终要是不言自明的。
  • 对于最重要的内容,要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
  • 各种尺寸的文本都应该清晰可见。
  • 图标应该而锐利。
  • 除此之外,要让设计保持微妙而恰到好处。
  • 通过设计,你的用户应该本能的知道他在哪里,以及该做什么。

产品的外观最终都是在清晰的设计(或者不够清晰的设计)之下的副产物。清晰的设计意图,最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道,一个混乱而复杂的产品始终是源自于制造者本身的混乱,说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰,也要专注于当前的任务,一个交互性强、可操作性优秀的 APP 才是用户所需要的,而要做到这一点,屏幕上的内容应当始终是的,并且始终保持较高的相关性。与此同时,APP  也应当作为用户意图的延伸。如果用户打开了你的 APP,想要解决某个问题,执行某个任务,而你的 APP 做不到这一点,那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟,梳理了一下思路,继续说道:「你看,我们所做的一切都是为了确保我们的方案,能够在正确的环境中,面对着对的用户,解决亟需解决的问题。当然,我们要经历很多次的迭代,才能靠近这一目标。」

主观的愿景

「许多设计师和开发者都在说,APP 应该灵活,应该满足所有客户的需求。好吧,Jimmy,这些说法都是胡说八道的。但是有一个说法很真实,也需要你时刻谨记:试图取悦每个人只会带来无尽的压力和痛苦,让你沮丧,失去资源。所以,不要害怕失去一部分用户,真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品,必须始终清楚它到底是服务于谁的。只有牢记真正的用户,明白他们的需求,才能开发出真正有效的解决方案。最好的数字产品当中,都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近,看着外面来往的人流,Jimmy 忍不住问到:「那其他的用户呢?」Sarah 笑着回答:「当我们满足目前的目标之后,才能顾的上其他的人。我们的目标用户才是核心,其他的人不喜欢,和我们的愿景不匹配,也不用操心。市场上会有其他的应用或者服务能够满足他们,让他们高兴,而我们总是只能身处一个阵营,你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

当人们寻找软件和服务的时候,他们要的并不是功能,他们要的是解决问题的方法,一个和自己相匹配的愿景。——37Signals《Getting Real》

反馈系统

下一个原则,也是一个很重要的注意事项,那就是反馈。反馈能够帮用户确定操作是否执行了,明白结果是否发生,让用户明白当前的情况:

  • 交互发生时,相应的交互元素应该被凸显出来
  • 进度指示控件应该持续地显示当前状态
  • 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道,即使技术如此的进步,人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体(视觉或者触感)需要感受到反馈,再像大脑发出信号,而虚拟的界面背后到底在发生什么,需要全面的交互设计传递出来,只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的,用户不应该在这个事情上再费劲去思考了。因此,你手边应该有关于心理学、行为学这类能够揭示人类思考的图书,因为它们能够帮你提升技能。」Sarah 喝了一口咖啡,润了润嗓子,带着 Jimmy 又溜达上楼,回到了办公室。

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻,」Sarah 又提到了一个看似无用但是经常被说起的概念:「你看,UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似,这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来,用户会更快地学会和理解。」

「正是因为隐喻的存在,现实的经验和虚拟的交互产生了关联,用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上,用户会下意识地点击被高亮显示的、和现实按钮差不多的交互控件,他们还会下意识地在虚拟的屏幕上滑动,在界面之前自然游走。因此,你有必要了解你的核心用户每天都在使用哪些 APP,他们都是如何交互的。这有助于你吸收经验,消除不良的体验,创造舒适的交互,降低学习的压力,更好地转化。」Sarah 一边说着,一边下意识地模拟着交互并解释道。

内容的一致性

「接下来我们还是用案例来说明一下,会更容易理解。」说着 Sarah 坐到椅子上,并且打开电脑屏幕,说道:「比如我们要做一个日历,你认为它应该是网格,还是做成列表?」Jimmy 挠头想了一下,迟疑道:「恩……我们应该坚持使用网格的样式。它更加紧凑也更加有条理,我说的对吗?」

「其实这取决于用户的主要目标是什么。如果这个日历元素是出现在报告文档当中,应该是用网格的样式还是列表的样式呢?一样的,这要看情况。我们是否要在每个应用中都使用全局导航?同样是需要基于上下文情况来决定的。一致的设计不止是表面样式上的一致,还需要从需求、内容、用户使用场景和体验上来保持一致性。如果在特定的情况下,独特的设计能够带来更大的价值,那么这是有意义的,这种特殊情况下不同是有必要的。」Sarah 细心地为 Jimmy 解释道。

良好的设计,应该是特定语境经过评估后定制的副产物,而不是脱离使用场景而凭空创造出来的,否则,无论多么炫酷都是不合时宜的。——Massimo Vignelli

防御性设计

「最后要说的,是防御性设计。」Sarah 转身对着 Jimmy,然后说道最后一个规则。

「防御性设计?什么东西?」Jimmy 感觉今天学到了不少,最后这个原则也被他写到小本子上了。「这个啊,也就是大家常说的直觉性设计。」Sarah 微微一笑。

「我知道!乔布斯以前就经常说这个概念!」Jimmy 终于找到一个他足够熟悉的概念,兴奋不已。

「可是,你真的知道什么是直觉性的设计么?」Sarah 看着兴奋的 Jimmy 卖了个关子。

「预测用户行为?然后在用户要执行下一个操作之前帮他解决需求?」Jimmy 狐疑地问道。

「是也不是。它并不是让你去预测用户的行为,防御性设计是为了避免出错。无论你如何谨慎地去做设计,总会有错误发生,无论你做过多少调研,你计划有多么妥帖,你的产品总会需要一个备用方案来规避问题。」Sarah 说道:「防御性设计,是让你找到可能会出现的问题。」

相信我,你的产品如果给了用户负面的体验,他们绝对不会忘记。

「我还是没明白你的意思……」Jimmy 习惯性地挠头。Sarah 耐心地开始解释:「以开车为例来说明这个事儿吧。当你开车的时候,总会尽量避免道路上各种可能出现的危险情况,比如鲁莽驾驶的大货车,三心二意横穿马路的行人,懵懂无知在路边打闹的儿童,甚至野外窜上马路的野鹿,等等。同样的,作为设计师,我们需要预料到可能会出现的问题,以及始终保持专注来修复这些问题。这样我们就不会破坏整个用户体验。我们要有良好的防御性的设计意识,维持住体验,改善体验。」Sarah 说到这个地方的时候,Jimmy 感觉她身上散发着某种光芒。

然后 Sarah 起身,带着 Jimmy 回到他的工位。「怎么样,这些东西你都记下来了吗?」Sarah 打趣地歪着头看着低着头还在琢磨的 Jimmy,如同大男孩一样的 Jimmy 惊讶地抬头问道:「什么意思?这就是全部嘛?难道只有这些?」

Sarah 呼出一口气,微笑着对 Jimmy 说道:「好了好了,设计原则、规则、规范、技巧有太多,可是对于每个人,每个公司而言,都有属于自己的一套方法和策略。你可以尽兴地去探索,但是即使你不知道全部,也可以借助你所熟知的几个原则和策略,拿出足够优秀的设计。我把我最熟悉的、掌握地最娴熟、体会最深刻的几个原则分享给你,它们足以帮你开启一条走向好设计的道路,我觉得你要是真的体会到了,就已经能够拿出比别人更好的东西了。其他的设计原则,只要你有耐心和时间,还可以继续探索。该工作啦。」

尾声

就像 Sarah 说的,设计原则太多了,谁又规定死了具体有几条呢?每个人心中的哈姆雷特都不一样,每个人眼里的哈利波特又何尝是一样的呢?

最重要的问题在于,许多人知道原则,却并不会在设计项目当中运用它们。洞悉每个设计项目当中的重点,了解客户的需求,明白首要的设计目标,在产品和用户之间,找到平衡点,用心地思考,利用好设计原则这一利器。

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

腾讯实战案例!设计师如何从零开始做一款H5?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着消费升级的步伐,商家总结出在带动消费能力上小孩>女人>宠物>男人的规律,爸爸们作为商家最不重视的一个角色,该如何在父亲节以爸爸为主角制作一款 H5 呢?

一、项目背景

手机充值作为一个日活数千万的工具型产品,亲密充作为多号码充值的首要场景,对话费充值的生态与成长起到至关重要的作用。未来,在新用户增速放缓环境下,发挥亲密充功能沉淀的用户充值关系,将成为我们新的探索方向。

所以此次在父亲节进行发力,制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。

相对于每年母亲节的声势浩大,但是一到父亲节世界就都安静了。这是机会也是挑战,机会在于因为父亲节平均声量较小,所以产出较容易被大家所看到,同时也面临着关注度不够的客观情况的挑战。

二、创意来源

这个用户的状态反映了许多人父亲节送礼物的常态,送来送去好像什么都不合适,最终还是充了一笔话费,这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了,一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子,他们之间发生的火花。

但若单单如此,则略显单调,如何增加趣味性与可玩性呢?

  • 趣味性:配音的趣味性来源于剧本的趣味性与声音的趣味性,剧本的趣味性可以在剧本中增加各种各样的梗,声音的趣味性可以联想到各地的方言。那么选择哪些地区的方言显得尤为重要,为了覆盖更多的地区,我们选择了中国较有特色且差异较大的地区的方言,分别是江浙沪、两广、陕西、东北、中原、四川,这些地区的方言既有识别性,又有一定的喜剧效果。
  • 可玩性:在采用选择题的互动方式,模拟儿子为父亲选择礼物,让用户深度参与其中。

确定了主题后开始具体着手项目具体制作,由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5,下面会每一步说明,我们在这些地方都是怎么做的。

三、剧本编写

剧本是故事性交互 H5 的重中之重,也是其对用户是否吸引的关键因素,若缺乏吸引力用户则无法到达最后看到品牌曝光,一个剧本最基本的需要一个通顺且合理的剧情,更高的要求是要充分利用用户好奇心,获取用户注意力,完成品牌与功能的曝光。按照写文章的方法,一个饱满的剧本需要有三部分组成。

  • 虎头:通过一个最常见也是最能引起共鸣的场景——也就是爸爸给儿子打电话,引出剧情;
  • 猪肚:用搞笑与接地气的父子对话持续吸引用户,同时选择题带给用户参与感;
  • 凤尾:通过剧情引导出,一个父亲的日常状态,对孩子的要求无非是想要日常的关心已足够,最后引出品宣 slogan 点题,同时曝光亲密充入口,引导绑定与充值。

四、剧本配音

具体的配音工作交给配音外包商就好,我们要做的就是对最后效果的把控。

  • 配音剧本:需要提前写好剧本,方便演员配音,同时增加可控性,六种方言需要找相应的方言同学在普通话剧本的基础上一一编写成方言剧本;
  • 音效剧本:BGM 风格、按键音、铃声音效等等,可以用表格列出交予外包商也方便后期核对;
  • 挑选演员:有些年轻配音演员可以配出老年音色,但是整体语感不及年龄较大的配音演员来的自然和谐。

五、配音与动画相匹配

首先要了解匹配原理,为了节省开发时间与资源,六种方言动画全部采用同一种帧数与时间,所以需要匹配每一句的配音时长。

配音时长可以通过三种方法控制:

  • 在剧本阶段,控制每句话的内容与字数保持大体一致。
  • 在配音阶段,备注配音演员进行时长控制。
  • 在后期阶段,通过后期软件的加减速对每句话时长进行匹配。

六、人物风格设定

确定好玩法流程后,进入视觉阶段,这次整体的设定是不同区域的爸爸形象,要表现出各区域的特色,结合好配音,才会达到比较理想的效果。

在人物的刻画上,视觉是有很多表现形式的,但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音,为了使整体效果更自然,更接近用户的想象,加上对产品用户群的定位,我们摒弃了低龄卡通的设计方向,在人物设计上选择了写实的设计风格,更符合用户心理对父亲这个严肃、严谨的心理印象。

结合对话的内容以及动画的表现形式,在细节刻画颜色搭配上增加复古的味道,使人物更活泼不呆板将字体图形化设计,结合中国元素,提炼各省市的简称加上有特点的人物设计,能更快速的帮用户选择以及增加亲切感,以下就是各区域的爸爸形象设计,有没有一款打动你呀。

七、主视觉风格设定

人物的设定出来后,主页面的视觉风格就比较好把控了,复古的老式画报风格,是一个很好的选择~既能突出人物形象,又能把内容很好的划分整合。

板式设定:

主页面整体视觉风格确立以及版式布局,画面主体还是以人物形象为主,配合动画让整个画面更有动感,强调打电话的动作,更贴近产品。

在动画的设计上,也是遇到了很多困难,因为6个区域人物分为独白、对话、听电话3个部分的动画,而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内,又要保证形态的自然有趣,又要能对上字幕配音。

这里的难度非常非常的大,需要每个步骤都配合的刚刚好,非常感谢开发哥哥耐心打磨,最后的呈现还是很满意的。

动画效果,页面过多就选一部分进行展示:

八、活动效果

最后整体数据效果还是比较理想,用户完成全部选项占比整体 UV 34.89%,说明 H5 内容对用户吸引度较高,能够用内容本身吸引用户到达广告落地页,完成运营目标。也带来较高的亲密充数据,相较平时有显著提升,给亲密充带来绑定与充值。

九、结语

第一次制作配音动画相关的运营 H5,制作初期既期待又紧张,中间也遇到了几次看似无法逾越的难题,最终呈现结果也还较为满意。

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

Airbnb设计副总裁:设计的困境与出路

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

Alex Schleifer 是 Airbnb 的设计副总裁。在加入 Airbnb 之前,他曾在 Say Media 担任设计创意部高级副总裁。他在这篇文章中分享了目前设计行业在发展中存在的一些问题与挑战,并分析了背后的原因,同时还分享了解决问题的方法以及打造一个设计友好型公司的三大秘诀。

我的设计师同仁们,我发现我们进入设计这个行业都是非常偶然的。以 Airbnb 的设计团队为例,在 Airbnb 目前的设计团队的设计师里,有人之前是做图书馆管理员的,有人之前是技工,还有人之前是寿险代理或理疗师的。总之在成为设计师之前,他们从事过的职业是五花八门,做什么的都有。由于他们内心是喜欢创意方面的工作的,这推动他们最终走上了设计这条道路。我对这一切是非常欣慰的,然而我总会忍不住去想,究竟还有多少有设计天赋的人才最终没能走上设计这条职业道路。我知道未被挖掘的设计人才非常多,这也是我们现在想招聘优秀的设计师如此艰难的重要原因之一。

Airbnb 以设计驱动型文化著称,公司的两位联合创始人也都毕业于闻名全球的设计学院:罗德岛设计学院,对于这样的一家公司,想招聘优秀的设计师都非常难,你可能会觉得难以置信,但事实确实如此。其实不光是 Airbnb,我曾经和包括 Apple、Google 和 Facebook 在内的很多非常注重设计的大公司高管都交流过,他们也同样面临类似的问题。现在看似是没有足够多的设计师满足市场需求,设计师人才供不应求。早期创业公司对这个问题应该感触更深。每周,我都会从拥有很好发展前景的创业公司或中等规模公司的人那里听说他们正在为招不到设计师而发愁。

即使设计不是公司最重要的部门,要想让公司、尤其是资金资源有限的创业公司坐着等设计师在自己需要的时候自动出现是不现实的。如果我母亲不是一位坚信设计是能成为一个职业的艺术家的话,我可能也不会进入设计师这个行当。能通往设计师的路径有很多,设计师的角色也千变万化。如果设计师没有一个清晰的职业发展通道的话,要想找到下一代优秀的设计人才,我们依然只能靠意外的好运气。

在各个行业的公司能为设计师从业者创造一种融洽的工作环境和清晰的职业发展通道之前,有必要和大家分析一下目前阻碍设计行业发展的几大主要挑战和障碍。

一、主要挑战和障碍

1. 缺乏对设计全面而深入的理解

在设计行业之外,有些人会知道一点 UI 和 UX,但总的来说,相比大众对产品研发的理解,人们对设计是缺乏全面的认识与理解的。电子产品已成为每个人生活中必不可少的一部分,在一个设计能决定交互型电子产品与平台体验的行业,在功能之外还要更加注重整个产品的流畅性。对设计全面而深入的理解有助于设计师走出自己的小世界,从而打造一个更伟大的产品。

2. 缺乏标准化的组织架构

工程技术和产品管理团队的组织架构非常清晰,也有清晰明确的汇报体系,相比而言,设计师团队的组织架构形式各异。有的公司采用代理模式,在这种模式下,设计师会不停地从一个项目转向下一个项目,为全公司提供设计支持,很多公司都会默认采用这种模式。有的公司的设计师会全程参与产品的所有开发过程,从最开始到完成,这种模式下,设计主管和产品主管、工程主管一样向同一个领导汇报。还有一些公司,它的设计团队会向产品、工程或市场团队主管汇报工作。在设计领域,我们越早建立一个行业统一、清晰流畅的组织结构,那么在公司内部就越容易打造一种设计文化和清晰的设计师职业发展通道。

3. 缺少被大众熟知的设计师行业的榜样

在工程技术领域,大家熟知的行业榜样很多,包括 Bill Gates、Mark Zukerberg 和 Marissa Mayer 等。在产品领域,也有 Sundar Pichai、Reid Hoffman 和 Kevin Systrom 等众多行业榜样。如果让大家列举一些知名的设计师出身的人担任公司创始人或高管的例子,我敢肯定,在设计圈之外,除了 Jony Ivee 和 Yves Béhar 这极少数名字外,大家应该列不出其他人了,而这两个人还都是工业设计师。当然,我们并不是为了树立这些行业榜样而树立行业榜样,但是我们是可以能从为大众熟知的行业榜样的多少来了解设计师行业的是否成熟,以及设计师的职业发展通道是否清晰畅通。只有有足够多的行业榜样,设计师行业才能得到更好地发展。

如果一个国家全由设计师构成,那么我们会将哪个设计师的头像放在这个国家的法定货币上呢?

二、三种方法助你打造一个设计友好型的公司

设计师行业所面临的问题挑战和设计师的薪资待遇没有多大关联,它主要和设计师团队在公司里的位置有关系。对设计师的需求一直在那里,但设计师的职业发展通道却一直不清晰。下面就给大家分享几种方法,所有公司都可以采用这些方法去吸引优秀的设计人才,设计主管也可以更好地带领大家前进。

1. 从一开始就融合工程、产品和设计

在一些科技公司,包括 Airbnb 在内,工程(engineering)、产品(product)和设计(design)团队是捆绑在一起的,它们三者通常被合称为 EPD。以设计团队来说,团队里负责各个领域的所有设计师都会参与到从产品开始开发到发布的全过程。如果一个项目组负责一项新功能开发、产品营销或用户反馈,那么工程、产品和设计这三个团队都会分别至少指派一个人去参与其中。这种三者联合不仅能聚集产品的主要开发负责人,同时有助于所有三个团队成员职业发展通道的正规化。

这种三者融合的团队度就像下面这个三条腿的凳子,三条腿分别代表开发产品所需的三个不同团队,即工程、产品和设计团队。只有从产品开发伊始就做到三条腿协同并进(如Figure A图),那么在公司规模扩张的过程中才能保证三条腿一样长(如Figure B 图)。

我发现,从一开始就在工程、产品和设计三者的协调平衡方面做得比较好的公司一般都会做以下两项工作:

  • 从公司创立之初就招聘一位设计主管。稍后阅读应用 Pocket 在这方面就做得比较好。在 Pocket 刚创立的时候,公司创始人 Nate Weiner 自己虽然拥有一定的工程和设计经验,但在设计方面却缺乏敏锐度和洞察力,所以很快就招聘了设计师 Nikki Will 加入公司,他后来晋升为公司的设计主管。正是得益于 Will 在产品设计方面的贡献,Pocket 从一开始就打造了一个非常优秀的产品。
  • 让设计团队的规模和工程团队、产品团队的规模同步扩张。很多公司通常在产品经过前期的几个开发阶段后再开始招聘设计师去做视觉,而非从一开始就让设计师参与其中。设计工作如果和产品开发工作不同步,这不仅会让产品在 UI/UX 方面的决策复杂化,同时也不利于营造一个多方协同的产品开发团队氛围。那么该怎么做呢?在一开始招聘工程师和产品经理的同时就招聘设计师。你需要的设计师人数可能没有工程师那么多,不过你可以一开始就确定一个设计师对工程师的人数比例,我建议是在1:6至1:8之间。不同的公司可以根据自己产品的实际情况进行适当调整。

如果你不在一开始遵循这个原则,那么最后你只能做出一个蹩脚的产品,就会像下面的凳子那样不稳固。如果产品开发之初一个设计师都没有,那么你的产品就会像下面 Figure C图里的凳子一样,少一条腿。如果你在产品已经开发到一定阶段且比较成熟之后再让设计师参与,那么你做出的产品可能就会像 Figure D图中的凳子那样,三条腿不一样长。

要想避免自己的产品像上面的凳子那样蹩脚,最好的方法就是从一开始就同时打造三条腿(工程、产品和设计)。在实际操作中,要从一开始就招聘设计、工程和产品主管,三者向同一个人汇报工作。以 Airbnb 为例,Airbnb 的设计、工程与产品主管是平级的,而且都直接向创始人汇报工作。其实不光是工程、产品和设计部门的主管需要紧密协同,在涉及到每一个具体的项目时也需要三个部门的协同配合。

一款产品主要由以下三个要素来定义的:商务、代码与像素。在所有的产品决策中,要让每一个要素都有发言的机会。

在 Airbnb 的设计团队,我们采取了以下几项措施来明确设计师是能够引导公司发展的,同时让设计师能有一个清晰的职业发展通道。

2. 为资深设计师开辟一条清晰的职业发展路径

公司里的资深员工尤其是资深设计师所面临的一个问题是,随着他们在所负责的具体工作领域变得越来越资深,他们就会触碰到职业「天花板」,然而处于相应管理位置的人员却不会遇到这个问题。一般来说,这和他们的能力、工作表现或影响力没有太大关系,主要是因为他们掌握的技能组合是封闭、无法转移共享的。我们在 Airbnb 主要采取以下几项措施来抑制这种负面影响:

  • 为所有团队都设置统一的职位头衔。不管是工程、产品、设计还是市场营销人员,都采用统一的头衔设置。所有团队都使用相同的职位结构。
  • 将最资深的设计师晋升到最高职位,但不要让他们成为管理人员。提升至管理岗位并非一种晋升,而是一种跨界。让资深设计师能在自己的职业生涯中得到持续晋升,但又不会陷入与设计无关的管理琐事中。

只要能将上面两种做法结合,那么你就能提高下面这个地方的表现:

  • 设计师留存率。在以技术工艺为基础的设计或工程职业领域,你可以鼓励他们持续增强自己的核心竞争力和才能,而不是强迫他们转型走上管理岗位。一旦发生迫使转型的情况,很多人就会选择离开公司。
  • 让所有团队成员都能共同成长与发展。允许资深设计师参与重要的项目和重大的决策中,这样他们就能与工程师和产品团队成员共同成长,而不是让他们仅仅参与那些无法充分发挥自己才能的项目上。
  • 内部机动性与流动性更强。通过设置统一头衔和参与更多重要项目,设计师能够慢慢学到很多工程和产品领域的其它专业的知识,随着积累的跨领域知识越来越多,基于自己过去的项目经验、爱好和技能水平,设计师可能尝试公司内的其他职位。

3. 发现和使用新工具,创建一个自己的设计术语库

我承认,直到今天我依然无法摆脱对 Photoshop 的依赖。使用 Photoshop 已经成为我的一种习惯,就好比是设计师们曾将铅笔看做是他们的手的延伸一样。有些工具我们已经使用了20年,我们通常会根据自己的习惯和肌肉记忆来选择使用的软件,所以新工具能否适应设计师的使用习惯是至关重要的。

在新工具挖掘方面,我们有自己的实验人员,但最好能有人专门负责尝试和整合新设计工具。这就是为什么 Airbnb 会在设计运营团队上进行了大量投入,这个团队主要负责帮助设计团队在公司扩张过程能能更地开展工作。设计运营团队要确保设计工具能和工程、产品及其它部门使用的工具保持协调。

即使你现在还无法组建一支专门的设计运营团队,你同样可以采取一些小措施去进行工具整合和结构调整,让设计师更加便捷地工作。要从最基础的层面进行整合,尽可能统一大家的使用规范和语言。这不仅适用于开发一个设计系统,同时还适用于一些更常规的工作中,如何为文件命名、在哪里存储文件、如何管理版本等等。所有人都能遵循同一个规范要远比找到一种完美的规范重要得多。

这种规范与整合也为打造一套属于我们自己的设计语言系统(DLS)奠定基础。DLS 系统不光是一个视觉选择和设计模式语言,同时也是一个设计师和开发者协同开发产品的系统。DLS 的主要目的之一就是让设计师和开发者共同定新功能组件,一旦定义之后,这个组件名称将会同时应用在 iOS、安卓和 web平台上。尽管这些功能组件是不同开发人员在不同开发环境下开发的,但他们的名字都一样,而且它们对公司所有人而言都有同样的核心概念。

△ Airbnb的设计语言系统组件页面

这个系统打造完成之后,公司就可以在所有部门中打造一个共同的术语库。这不仅能提高沟通效率,同时也能让每一个人都能对公司的所有设计流程有更清晰的了解。Airbnb 内部开发的一些产品,如原生组件浏览器和 Airshots,能让公司的任何员工瞬间获取上千个设计界面。所有同事都可以在我们支持的任何语言与设备上看到任何应用版本的界面图。对于设计师,这有助于消除设计和最终产品之间的抽象层,最大限度减少设计师的困惑与混乱。

工程师通常都会快速更新自己所使用的工具与语言,设计师在这方面向工程师学习的东西有很多。工程师之所以快速更新所使用的工具,这是因为他们需要在竞争日趋激烈的市场中更快地发布代码。有些公司有上千个工程师,他们就像一群鱼一样在一个共享代码库里游,并可根据同伴的状况进行调整姿势。作为设计师的我们,现在在使用工具方面还没有达到这种同步性,要想达到这种同步性,首先需要尝试市场上现有的工具,如果找不到自己需要的工具,也不要担心需要自己开发。

一个行业标准的术语库有助于推动我们设计师的职业发展,而不是会限制它。在 Airbnb,除了统一规范我们设计界面的方式之外,我们还统一了我们工作语言。未来,我们希望公司内部讨论产品设计的方式在 Airbnb 外部同样适用,也希望 Google 和 Facebook 这样的巨头联合起来共同打造一个设计行业通用的术语库。

在字典里,每个字都有一些特定的含义,而诗歌所需要的所有要素都蕴含在其中。

可能是因为设计是一种视觉效果工作,所以我们很容易将其想象成一种唯美浪漫的工作。设计师往往很容易陷入色彩、字体、动画与图案中,而忘记设计是可以成为公司核心部门,并可以有更好的职业发展。在电影行业里,每当有新工具出现,如电影制作流程或硬件升级,电影行业都会专门召开一次会议对新工具展开讨论。如今,我自己也只参加那些不光讨论灵感与创意过程,同时还会讨论新出现的设计工具的会议。

在不限制设计师创作自由的情况下,设计部门最好有一个清晰的标准流程。在我看来,一位优秀的设计师是不仅能够和工程、产品部门同事一起让整个产品开发过程更加流程,同时还能积极学习工程、产品方面的专业知识。我发现能这么做的设计师少之又少,然而这是非常必要的,为了公司,也为了自己的职业发展。

在设计创意魔法的背后有工具在起作用,未来的设计需要同时依赖这两者。

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

 

黄金圈法则:怎样识别真需求和伪需求?

资深UI设计者


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

做产品,绕不开「需求」二字。很多产品从0到1需要团队付出很多努力,但如果在把握用户需求的时候出了错误,再好的团队、再牛的执行力、再牛逼的技术也阻止不了项目的失败,所以,分辨用户需求就成了产品的关键。


需求有「真需求」,也有「伪需求」,「真需求」可以实现用户的强关联,从而实现产品的稳定增长,而「伪需求」要么无法获得用户,要么昙花一现。比如魔漫相机,超级课程表这类曾经的「现象级」产品,在短暂的疯狂后迅速被用户抛弃,其实都是因为没有正确识别用户需求。

那么,如何找到买家真正的需求呢?

一、思维工具——「黄金圈法则」

「黄金圈法则」是西蒙·斯涅克在《从为什么开始》中提出的一种思维方法。

他用三个同心圆来描述人的思维模式,黄金圈从外到内依次是:做什么(what)、怎么做(how)以及为什么(why)。

  • 思维模式处在最外层的人,他们知道自己想要做什么,但很少去思考怎么做才更好;
  • 处在中间层的人知道如何更好地去完成任务和目标,却很少思考做这件事情的原因;
  • 而处在最中心圈的人则是以「为什么」为出发点,他们拥有内在动机,能够实现自我激励,而只有这样的人才能成为伟大的领导者,才能激励和影响到身边的人。

黄金圈思维可以让人们穿破事物的现象,看到事物的本质,从而做出最佳决策。

它不仅可以用于自我激励和成长,同时也可以应用于营销、管理与沟通等领域,而我们今天要重点讨论如何用它来识别真需求及伪需求。

二、分辨用户需求的「黄金圈」模型

what(用户反馈)、how(用户行为)、why(真正的需求):

  • 用户告诉你的需求是what,比如你通过问卷调查或者买家评价与反馈所收集到的信息等。
  • 用户表现出来的需求是how,即用户在使用产品、选择产品时的动作和结果,它可以对用户的需求进行行动表达上的证伪。
  • 用户内心真正的需求是why,即用户一系列动作背后的原因,为什么要使用该产品而不使用其他产品等。

通过这三个层面,我们可以发现需求、验证需求,进一步挖掘需求,最终识别出用户真正的消费动机,从而找到有效的解决方案。这三个步骤形成了一个「需求验证漏斗」:

三、在「what」层发现需求

what层面是用户评价和用户痛点,它让你「发现可能的机会」,但这个机会不一定会形成需求。

比如你要做零售产品创新,那就可以直接去淘宝,看同类产品的买家评价。尤其是差评,就是等待你解决的「痛点」。

身边的朋友都抱怨淘宝上买东西经常要找好半天,找不到自己喜欢的,那么「产品多、筛选难」就是个待解决的「痛点」。

隔壁养金毛狗的女孩经常抱怨狗粮太重快递又不送上楼,减肥成功的男士原来的衣服都不合身了,这些我们平时很容易发现的抱怨类的信息,就是用户使用产品过程中的痛点,也都有可能成为新产品的机会。

发现机会,并不代表我们要立刻开始寻求解决方案,因为需求可能只是伪需求,或者根本就不具备任何可行性。

1. 需求本身是「伪需求」,用户对问题表述「错误」或者缺乏对解决方案的「想象力」。

就像乔布斯说的那样:「不要问客户他需要什么,因为他们根本不知道。」在平板电脑出来之前,用户并不知道自己需要一台完全没有键盘的电脑。

2. 项目不具备可行性

比如消费人群不够大,对这类「硬造性场景」感兴趣的都是小众,无法落实到真实的大众生活里去,产品无法扎根;就像现在的O2O上门服务,大多都是伪需求,上门洗车、上门美容都属于这一类,消费频次太低,而且家对于多数人来说是个非常私密的地方,并不希望陌生人到访。

四、观察「how」验证需求

What层面会呈现出的「需求」,我们并不能马上开始基于这个层面去寻求解决方案,而是要通过「how」来进行进一步验证。

「how」就是「用户行为」。用户反馈可以说谎,但行动不会。

一个女生说我选老公的标准是:这个人要孝顺,帅气,结果她选择了一个有钱人;

一个男生说我选择老婆的标准是:要善良,结果他选择了一个漂亮身材好的人;

小岛居民经常说他们讨厌穿鞋子,因为鞋子会经常进沙子,但实际上他们依然在穿鞋。

也就是说,用户经常「说一套、做一套」。

比如你问用户喜欢什么颜色,十个人中可能有五个告诉你他喜欢绿色,但如果你真的生产一堆绿帽子然后就没有然后了。

还有我们一开始提到的「魔漫相机」,你如果采访用户的话,十个人可能有八个告诉你他非常喜欢这个应用,但实际上他们玩一次之后就把它抛弃了,因为「烂大街」了,用户只是在跟风,他本身根本没有这个需求。

因此,判断需求不能只是听用户怎么说(what),一定要通过看他怎么做(how)来验证。

那如果验证了之后发现用户「言行不一」,是不是需求就不存在了呢?也不是,我们要跳出用户的思维,从主动的角度,也就是「why」这个角度去挖掘用户的真正需求,开发解决方案。

五、在「why」层挖掘真实需求

Why是用户反馈及用户行动背后的原因,找到这个原因,才能最终验证需求是否是真需求,也决定了用户最后是否会为你的解决方案买单。

我们先拿「小岛居民的鞋子」来举例:

小岛居民鞋子很容易进沙子,这就是一个痛点,也就是what层面的需求。

如果要解决这一痛点,是不是就提倡大家不穿鞋呢?这要从how这个层面来判断,也就是用户如何表现,结果发现虽然鞋里经常进沙子,大家依然在穿鞋。

最后经过调查我们发现,沙滩里面有很多碎贝壳,不穿鞋会划伤脚,所以,「不能划伤脚」比起「进沙子」的需求显然是更为迫切,因此,用户的真实需求是「舒适地行走在沙滩上」,那么解决方案不是提倡大家「不穿鞋」,而是提供一双舒适的、不会积沙的鞋子。

再说一个我身边一位朋友创业的真实案例:

朋友安妮是个喜欢喝奶茶的女孩子,她几乎每天都要喝上一杯。在某天和同事讨论奶茶的时候,她们开始吐槽奶茶的各种不好,尤其是「不健康」,奶茶的主要成分是植脂末和茶粉、淀粉,不仅不健康,而且容易长胖。安妮上网搜索了一下相关信息,发现很多买家都对奶茶的不健康有所担心。

于是,安妮决定开个店铺,专门做「健康的奶茶」。

但实际上她的店铺开张后生意却非常冷清,除了一开始有些熟人会过去捧场,大多数时间店里都是门可罗雀。

安妮的奶茶确实做到了健康,完全用纯牛奶和新鲜的茶叶冲泡,糖都是用的上等的果糖。

但为什么大家现在反而不喝呢?

因为「需求」把握错误。

消费者在抱怨奶茶不健康的时候,他不是想要健康的奶茶,而是想要口味不变、价格不变、包装漂亮、环境舒适的情况下,更为健康的奶茶。

我们如果再向why层面进行探索,就会发现问题的实质:

为什么大家要喝奶茶,如果想要追求健康,为什么不是果汁、酸奶、牛奶、咖啡?

因为奶茶好喝,口感丰富、有层次、有趣味,这是其他饮品无法比拟的。

到此为止,我们会发现,用户的真实需求其实是「好喝而有趣的饮料」。

对于大多数饮食类产品,口味绝对是第一位的,牺牲口味而满足用户的其他需求一概是伪需求。

在「七宗罪」中有一条是「贪食」,喜欢美味的食物是人的天性,大多数人只有在真的生病之后才会在乎健康,在这之前,他愿意为了绝妙的口感冒第二天中风的危险。

由此可见,由发现需求到验证需求,是要经历「how」层面直接的验证,同时追索到「why」层面进行分析才能最终确认。


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


日历

链接

个人资料

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

存档