2019年3月7日

未来学①|UI设计的未来,不在”屏幕”上

众所周知,界面设计是基于屏幕诞生的。但是最近在国外浏览信息时,发现了一个很有趣的观点,他们提出了这么一个概念,就是UI设计的未来,并不是在屏幕,而是在其他领域。既然不是在屏幕,那我们现在所用的工具技巧,都没有可以重复利用的地方。至少你用的photoshop是不能再用于界面设计上。

那么带来了一个很重要的问题。未来的界面设计可能出现的方向是什么呢?

答案是声音

如果仔细观察现在社会的求职跟招聘市场,你会惊讶的发现,跟过去几年发生了惊人的变化,以往一个UI设计师要找到一份互联网公司的工作显得很容易,而2019年开始就变得异常困难。很重要的原因就是大部分互联网公司实行了裁员计划,同时不少初创型的产品也夭折。所以导致整体市场环境并不见得很好。

还清楚的记得,在2015年到2016年的时候,UI设计师是处于井喷的状态,基本属于供不应求,只要你说掌握了一些UI设计的技巧,就能很轻松的在市场里谋取到一份还不错的职业。

v2 6ce8ea7c33d62504a882f0210c636473 hd - 未来学①|UI设计的未来,不在"屏幕"上

注:UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI**,UI即User Interface(用户界面)的简称。

当然,现在有经验的资深设计,谋求一份职业,不算是一件特别难的事情。当然这不代表是未来,就像10年前很多平面设计师转向界面设计师的时候也是经历过很长的挣扎期。同样的。如果按现在的发展态势下去。事情都有物极必反性。还记得当时大量的设计师涌入UI设计,同样的也会导致大量的设计师离开这个行业。

你可能会反驳说,因为设计可能不会消失。

确实当智能手机跟屏幕还不停止使用的前提下,它确实不会消失,但是不是代表这是下一代使用到的工具呢?这里要打一个大大的问号。刚好我有个女儿,现在她很多学习都是通过iPad进行的,而不是像我小时候只能通过书籍阅读进行。丰富的交互性,令她学习的速度确实要比我要快许多。

v2 63943808070236e48eb29264e25bffa1 hd - 未来学①|UI设计的未来,不在"屏幕"上

而这一切仅仅是通过短短数十年发展变化。我根本就没有办法想象到未来10年会发生什么,变成什么样,我们处在一个每时每刻都巨大的变化的浪潮里。现在我们可能面临的是触摸屏手机的选择,而我们下一代人会有什么样的选择呢?却不得而知。

就像应对中年危机一样,我们应该开始着手准备究竟什么样的东西,我们设计的时候不会过时,才能应对未来的发展需求呢?或者说界面设计的变化呢?

我收集了一些正在发生的未来设备:

1、智能手机将变得更加智能

三星最近在一则广告中透露,他们将手机展示在平板电脑中。这甚至是苹果和其他大公司未来可能采用的东西,将两个设备合并为一个。

这种手机模块化,简单来说就是用户可以像乐高积木一样对智能手机实现 DIY 组装。这个概念背后承载的,不仅是 “减少电子垃圾,构建硬件生态” 的美好愿景。

v2 d1918933a42ec3146f27598a747a569a hd - 未来学①|UI设计的未来,不在"屏幕"上

模块化手机组合——积木手机(Phonebloks)

v2 3c492690344b980ed7255ceaff00599a hd - 未来学①|UI设计的未来,不在"屏幕"上

模块化手机组合——积木手机(Phonebloks)

v2 0d1098cc22d1e46c810a462a77bb6d0e hd - 未来学①|UI设计的未来,不在"屏幕"上

Switch已经具备一机多用的模式

2、语音将主导屏幕界面

Siri,小爱和小度语音智能机器人相信很多人不太陌生了,可能每天与其互动,它们将成为您生活中不可或缺的一部分。

譬如我每天上下班,都会说一句:“siri,播放令人安静的歌曲”

而不是用手点击屏幕打开应用,再一个个去选择我需要的音乐。设计师可能要考虑将语音设计放入自己学习的内容之中。

v2 8c3d3174fde11a3840fc019bbd43482a hd - 未来学①|UI设计的未来,不在"屏幕"上
v2 89f090a0d0500a9f56df72caff614cfa hd - 未来学①|UI设计的未来,不在"屏幕"上
v2 19f19a413de1b298c16c4f350db7ae17 hd - 未来学①|UI设计的未来,不在"屏幕"上

3、自动化的设备智能程度越来越高

或许现在每个城市人都至少拥有一部智能手机,或者一部工作用的电脑。这两样小物品,特别是前者已经成为了每个人的必需品,你可以在上面完成大部分工作和生活。

特别是应用的出现给我们带来了极大的方便,应用本来就是一个将事情变得自动化的工具。试想一下,以前我们要定一个外卖,我们先要拿到那家餐厅的订餐电话号码,需要到餐厅,拿到他的传单或者名片,拨打店铺订餐的电话号码,在有人接听并确认的情况下才会有餐厅的工作人员给我们进行派送,这个过程显得十分繁琐。现在可能只需要一个按钮下单就能完成以上所有的操作。

这便是实实切切在我们身边感受到的变化,在10年前这种想法你是想也想不到的。

v2 2c0f1c5a19f7d83c7d37b10323c7bd2d hd - 未来学①|UI设计的未来,不在"屏幕"上
v2 30232897411c48373060dc0047dafce7 hd - 未来学①|UI设计的未来,不在"屏幕"上
v2 e7a8f068592b8370e181232b82c2b7d6 hd - 未来学①|UI设计的未来,不在"屏幕"上

Ifttt是能自动连接不同服务的工具,譬如当你喜欢了youtube某个视频后,会将这个结果发送到blogger上。(国内因为巨头将是封闭状态,类似的功能短期内还很难实现)

4、个性化的产品需求

千人千面或许是未来产品的一个重要的发展关键。如果你仔细观察身边,你会发现这种趋势越来越明显,比如现在流行的头条或者抖音,每个人看到的都不是一样的内容,你打开界面会根据你的标签会推送你不一样的内容,而且你每次向上翻阅的时候得到的内容,也会完全不一样,可以说每个人看的这类产品都是完全不一样的。

他会根据你的喜好,推送你可能喜欢的内容。就像一般的洗发水品牌已经可能不在吸引用户了,那么这时候它需要根据客户的需求定制一些洗发水,并且在洗发水的。标签印上自己的名字,这一块的尝试,在可口可乐跟百事可乐的一些瓶身上已经得到了印证,受到了很多年轻人的追捧。

这就给界面设计师很多新的挑战,你需要考虑不同人群如何插入个性化推送的内容。特别是在语音体验方面。比如现在的语音服务基本都是一样的声音,那你是不是可以设计成不同的声音形态呢?比如有些人喜欢的是某位影视明星,如果能模仿他的声音去设计这么一个。智能的语音体系效果会更好,比如我们有一些已经逝去的亲人,将他们的语音提取出来。那就变成了他们好像还在线上跟你对话,这听起来就觉得很棒。

v2 a2c1b7d6c3ba4b5178c28976c6d6eb4f hd - 未来学①|UI设计的未来,不在"屏幕"上

可自定义名字的洗发液

v2 ce769f15ded2038eda2ffddae0102210 hd - 未来学①|UI设计的未来,不在"屏幕"上

可DIY刻字的apple pencil

5、多种方式到达同一目的

以往,我们创建设计以及产品时,仅仅只是根据流程图进行流程的界面化过程。在语音的界面设计里,这种流程或许不再成为唯一的标准。

一百人眼中,就有一百个哈姆雷特。

你需要更好理解人们是如何表达他们的想法。举个简单的例子,我想预定某个餐厅的座位:


屏幕界面的做法

打开应用——选择餐厅——预定座位——等待确认信息


语音界面的做法

  1. - 我想要预定明天**餐厅的座位
  2. - 我想要2月11日**餐厅
  3. - 预定周四**餐厅
  4. - 你能预定明天**餐厅的座位吗?
  5. - 你能看看从这里出发,预定明天**餐厅的还有位置么
  6. - 2月11日,订**店铺的座位
  7. - 预定3个位置,**餐厅
  8. - 我想吃火锅,明天**餐厅还能订么?
  9. - 马上预约**餐馆,明天的

对比现在的界面设计模式,语音设计关键是对关键字的设定,会出现多个关键字词的可能。

一条行为=行动+地点+时间+关键字。简单来说,就是需要做什么,什么时候需要做,哪里做以及如何做?

行动(预定**餐厅)
时间(明天、2月11日、本周四)
地点(**餐厅)
关键字(人数、距离我最近分店、口味、特殊要求)

v2 11792edffbbca6fdea7b2eb95b4d514f hd - 未来学①|UI设计的未来,不在"屏幕"上

ALEXA亚马逊的语音对话界面

总结:

当屏幕不再是唯一考虑的载体后,声音该如何设计?这种拥有更快的操作速度交互模式,会带来怎么样的变革?当然,说这种就是声音设计就是未来的UI设计,肯定不太合适。

- 声音也是基于对关键字的提取

- 你的工作内容什么能够自动化

- 提示里,知识在不断更新,一门知识能够用一辈子的情况越来越少见了

部分观点引用自:

《The future of UX design is not on ascreen》

2013年11月10日

更优雅的微信第三方设计——大粤网产品设计

3d5ced848598fcc4d5df267eb7e579ad - 更优雅的微信第三方设计——大粤网产品设计

最近比较忙,整理作品的速度明显放缓了许多。今天总结些前段时间做的微信第三方网站。要清楚,它是网站不是单独的一个网页。需要考虑更多是整体性的问题。

在拿到项目时,首先需要冷静下来。而不是急着去动手,大部分同学肯定都理解了解其缘由。这边要说的更多是前期先看看相似对手的情况。因为视觉设计相对于产品功能,是最容易拉开差异感的部分。或许一套不同的视觉策略就能让产品迅速脱离大部分同类作品走出来。

 

大部分的普遍

大部分的微信第三方,和似乎都不太注重展示部分。即视觉部分,隐隐有些暴发户的感觉。而且现在做这块的公司似乎已经有当年做团购的景象。多,十分多,最后迷失在一片片营销的海洋里。

做为设计师,先跳出来观察下。其实我们会惊讶的发现,这些站的普遍性都是为你做个微信mini站,就是所谓的新时代营销。最核心的功能基本也是一致,如下:

  • 智能导航(调用地理位置地图接口)
  • 在线支付
  • 全景看图(自由图片组合)
  • 抽奖营销活动

随便打开搜索“微信 营销 专家”,一堆类似微信第三方网站。现在很多的创业者也在做类似的项目,总之,就是很多很多公司做着类似的尝试。当然,国内任何的领域基本都是同时存在上百个同类的项目,能真正运营下去到最后也只有3-4家而已。

自己随便打开其中一个站点,发现其推广的核心点,也是如上述说的一样,功能部分的几乎所有的微信第三方都做着差不多的事情。如果你随便打开这个网页,你觉得你会主动去联系他们么?在很多相似产品存在的情况下。

2ff266e73c084cd3e6fda1bcd9aef3a2 - 更优雅的微信第三方设计——大粤网产品设计

除了外面的第三方,腾讯内部也有两个很出色的第三方平台,“风铃和微生活”。从界面上可以看出两者还是有差异,解决的方向也是分属不同的类别。

  • 风铃诉求展示和营销(偏向于资讯号)
  • 微生活诉求则是移动端的店家会员解决方案(偏向于服务号)

在这样的大环境下,怎么能够突围?大致了解后会发现,这些腾讯服务都是基于大客户的解决方案。原因是大部区,长尾中的尾部是难以触及的部分。就是所谓的中小商铺。他们的诉求除了展示,更多是希望能告诉用户他们有这项服务。这点比单纯建立微信服务更重要。

1794fdf440c84152659f8af61e447913 - 更优雅的微信第三方设计——大粤网产品设计

46d40896b8231e074fac8a20ca495a33 - 更优雅的微信第三方设计——大粤网产品设计

 

小部分的独特

当然上述的分析,在设计阶段反而没有想得这么深入。都是动笔写这篇东西时想到,联想到最近研究生课程中谈到的“设计管理策略”,还是一个相当有趣的部分,也属于视觉设计的一部分。以前并没有多重视,现在开始多以文章的形式将这部分思考记录和总结起来。

当看了国外几个APP站点,会发现其思路和我们有很大的差异。或许是国人更喜欢看到尽可能详细的信息,更有可能是客户喜欢你的东西尽可能丰富。有可能只是惯性思维。至少,大部分人现在看上面和下面的网页,估计大部分同学还是会选择偏向于下面的案例。

类似的站点

PAPER http://www.fiftythree.com/paper

7e7244e41a557676d781ddbcbddfaf31 - 更优雅的微信第三方设计——大粤网产品设计

ANY.DO http://www.any.do/

4f0de59ed20f9bfdd5aa7c427f91a71f - 更优雅的微信第三方设计——大粤网产品设计

那么,换种模式,是不是应该让其产品介绍变得更优雅简洁。

当然,这或许已经和目标用户群体产生偏离。一般越优美的东西,服务人群的基数也越小。在展示设计这块,确实国外很多公司,尤其是小型公司做的很精到。或许不想错过每个进入网站的用户。就要每个页面都保持些亮点。

  • 全屏的图像/视频使用
  • 最简单的文字说明
  • 展示不同的产品/操作过程

 

我们能做什么?

和产品团队沟通后,觉得我们应该做的更偏向于优雅的方向。要达到这一个目的,其实他们的需求是“高大上”,设计师觉得满眼都是泪。翻译成我们的语言,就是优雅大气,要到达这个目标,参考图却是国内些较山寨的微信第三方。

这时候,设计师应该给出自己的参考建议。如果别人给什么,自己就做什么。就显得十分被动。未来团队,主要是需求方就变得十分强势,且结果不一定好。因为你给不出任何专业的建议,那么,产品团队不以视觉出发的参考就成了一大问题。最后,问题都卡在设计师这边。所谓做不出该有的感觉。

 

第1步:指出设计师觉得较好的风格,并共同讨论

可能会出现下面这种半成品,不需要多少细节性的东西。只是根据上面自己提出的参考方案得出的视觉稿。

当然,需求方的需求仅仅是做个首页,有图片轮换、导航和页脚,即产品介绍图片就可以。其余像我们的优势和 真实案例都是设计师根据自己的体验和相关页的参考后提出的新亮点。

确实这是种好办法,能多为需求方多想点,他们才觉得你专业。未来沟通起来的成本就小了许多。

1f7a96426c9198ece1d442c4c707653a - 更优雅的微信第三方设计——大粤网产品设计

 

第2步:确定大致风格后,细化主要部件

其实这部分是最麻烦的部分。就像老师说,大家都觉得做动画很帅。其实真正创意部分就前面就那一小点,更多的是如工匠般的打磨余下繁琐的机械工序。不能偷懒。就是一点点磨

确定完一道工序,再进入下一个环节。这个很重要,不然很多辛辛苦苦做的东西就容易有全盘否定的可能。

2fb90c1acd85fc3432ff7a107809d348 - 更优雅的微信第三方设计——大粤网产品设计

随后,就完成余下部分的设定工作。基本采用的还是拟物的手段,核心功能按钮固定位置。背景采用相关的配图。

f293f3b75db597914ba3cca6006695af - 更优雅的微信第三方设计——大粤网产品设计

f03cc4dcc673518727f974973c23c878 - 更优雅的微信第三方设计——大粤网产品设计

 

第3步:统一成扁平化的风格

为什么要扁平化。因为团队讨论中发现,那个罗马柱和强效广告都显得很奇怪。确实,实物的造型在光感,质感和形状方面,如果不进行统一的实景拍摄,整体有可能显得乱。硬要结合在一起的时候,也需要相当多的时间统一细节。

那么,转换思路。主要也是大部分内页的视觉偏向于扁平,此时,转换成扁平也算是统一的步骤之一。

扁平不意味着简单处理,越简单的东西,不能以准确的方式呈现。就显得很粗糙,让每个扁平的图形都能以主题关联才是最难的东西。

a7e522981070c8e2ff00fe5baaeb401b - 更优雅的微信第三方设计——大粤网产品设计

9f8d66404b0fa241337c1a5c937b4632 - 更优雅的微信第三方设计——大粤网产品设计

cbc57c3eb53af9420cde91d3edbf980f - 更优雅的微信第三方设计——大粤网产品设计

 

产品介绍

为什么是扁平的风格,也是从这页开始。差异化是思考的重点,当大部分页面虽然也是扁平化,不过更多是以单色的形式出现,彩色很多用在移动设备中。而在网页中,彩色的部分很多还是采用拟物化的手段。

所以,核心的功能扁平+彩色。

92daba9227dc4fdd22e1f93685204ff9 - 更优雅的微信第三方设计——大粤网产品设计

 

关于我们

关于我们,刚开始PM构思时并不是这样,ux第一版设想也不是这样。或许这个不是最终的视觉呈现,貌似有同学说,圆圆的像TT.....我在考虑下。

8870c515924685d92a5ea9b45d708234 - 更优雅的微信第三方设计——大粤网产品设计

 

微运网站

网址http://wy.city.qq.com/

相关资料

让网站更生动!那些在网页中完美运用视频元素的案例

学会为团队加分,而不是等着团队的光芒将你照亮

 

我的微博:http://t.sina.com.cn/drizzlep

我的豆瓣:http://www.douban.com/people/drizzlep/

_________________________________
Copyright © 2015-2018 IMITEN.COM.  粤ICP备15075518号