您当前的位置:首页 > 电脑百科 > 软件技术 > PS/设计

智能UI:面向未来的UI开发技术

时间:2020-09-08 12:14:06  来源:  作者:

虽然我是木耳,但是,偶尔还是会拿有线耳机听一下无损音乐。同事跟我说:你那个耳机手机带不动,要配个耳机放大器。耳机放大器(简称“耳放”)的原理,笼统概括就是把微弱信号变成强劲信号,从而能带动(专业术语是“推”)xx欧姆的耳机。如果把整个耳机看做一个功率耗散元件——电阻,这里xx欧姆就是电阻的阻值。满足耳机功率要求,耳机才能够播放出强劲的低音、丰富的细节、广阔的音场……带给我们身临其境的震撼。

智能UI:面向未来的UI开发技术

手机上的耳放

要带动上图这个大家伙,手机上插的就是耳放。耳放很复杂,不仅需要提升电流电压,还有音色、降噪、还原……等DSP(数字信号处理)能力。不过,我们可以像把耳机近似成电阻一样(耳机的功率xx欧姆),把整个耳放近似成一个三极管。

智能UI:面向未来的UI开发技术

放大电路

上图左边是三极管的元件符号,右边是功放(耳机功放的“功放”)电路图。如果我们事先在三极管的基极上加上一个合适的电流(叫做偏置电流,上图中那个电阻 Rb 就是用来提供这个电流的,所以它被叫做基极偏置电阻),那么当一个小信号跟这个偏置电流叠加在一起时,小信号就会导致基极电流的变化,而基极电流的变化,就会被放大并在集电极上输出。如果这里的偏执电流Rb是手机输出的音频信号,在集电极上输出的就是放大后的信号了。

智能UI:面向未来的UI开发技术

放大电路的前端类比

如果换个角度看这个放大电路,我们可以把偏执电流类比为用户需求,把输入电源类比为产品设计(包含视觉和交互设计及技术方案等),把前端技术类比为三极管,把集电极输出类比为UI和交互(最终的交付物)。

 

首先,不论用户需求是用户提出的、产品YY的还是老板拍的,在最初提出的那一刻都模糊而粗糙。根据这些原始粗糙的想法,通过产品设计和前端开发,最终才能在用户面前呈现强劲的低音、丰富的细节、广阔的音场……带给用户身临其境的震撼。

 

其次,三极管——前端开发是放大电路的心脏,三极管从截止区(未进入工作状态)末端到饱和区(超负荷)开端的范围:工作区,直接决定了三极管的放大倍数。就像用不同的前端技术方案去实现需求,技术方案的先进性和合理性,直接决定了最终交付的UI和交互质量,进而影响用户体验。

 

最后,具体如何理解放大需求呢?放大需求是相对于满足需求而言的。中国有句古话叫:饱暖思淫欲。“饱暖”是人的基本生理需求,相当于满足需求。“思淫欲”是人的高级需求,有人可能会问:这不是生理需求么?那叫“繁殖”。举个例子,在相机出现之前,绘画的目的主要是记录,记录人物、事件……等等。相机的出现,让记录这件事变得简单高效,绘画得以从繁重的记录工作中释放出来,从而追求艺术性。这就相当于,照相技术本质上放大了绘画的价值——艺术性。

 

今天,耳放技术可以推xx欧姆的高级耳机,把手机从音频播放的听个响、打电话等基本需求中释放出来,放大至“唯美的音乐”、“震撼的视频临场感”……那么,前端技术应该如何把UI和交互从“功能”中释放出来,放大至更广阔的领域呢?接下来谈谈我的一些愚见。

 

基础UI和交互

 

智能UI:面向未来的UI开发技术

macintosh 桌面


智能UI:面向未来的UI开发技术

System 6, 1988


智能UI:面向未来的UI开发技术

System 7.5.3, 1991


智能UI:面向未来的UI开发技术

MacOS 8.1, 1997


智能UI:面向未来的UI开发技术

MacOS 9, 1999

Mac OS一直深受其用户的赞誉,它的很多设计都成为了其它软件和系统所模仿和借鉴的对象,对全世界人机界面及其相关行业的影响极其深远。在诸多版本的Mac OS中,MacOS 9及以前的Mac操作系统通常被称为古典系统(Classic OS),从2000年开始,Mac OS进入了全新的Mac OS X时代。

 

我认为,在进入Mac OS X之前,Apple着重在打造一套完善的基础UI和交互系统。这就像照相技术出现前的绘画一样,先去满足人们的基本需求:记录。

 

搞UI的都应该听说过Fitts’ Law-鼠标光标指向某一物体的时间,受物体大小和光标距离其远近这两个因素所决定。位于顶部的菜单栏其实是对Fitts’ Law的灵活运用:由于光标不会跑到屏幕外面去,因此你尽可以随便把鼠标往上甩,光标肯定位于菜单栏上,这降低了光标指向的难度。

 

然而时过境迁,在大屏幕、多显示器越来越普及的今天,这个设计逐渐受到了挑战:在某些极端的情况下(比如主窗口位于最右面的显示器上),用户不得不移动鼠标横跨数台显示器、几千个像素去操作菜单。

 

被技术放大的UI和交互

 

Apple Quartz Extreme 放大器

 

智能UI:面向未来的UI开发技术

2000年5月10日这天的apple.com

在Jobs第一次公开介绍Mac OS X的用户界面时,他宣称不仅要作出一个高可用性的用户界面,更重要的是,Mac OS X将具备一个名为AQUA的“Dream User Interface”。AQUA一方面保留有古典系统高度易用的特点;另一方面,通过各种视觉特效的引入,AQUA将带来前所未有的用户体验。

智能UI:面向未来的UI开发技术

Mac OS X Public Beta, 2000


智能UI:面向未来的UI开发技术

Mac OS X 10.0 Cheetah, 2001


智能UI:面向未来的UI开发技术

Mac OS X 10.1 Puma, 2001


智能UI:面向未来的UI开发技术

Mac OS X 10.2 Jaguar, 2002

从上图可见,从 Jaguar 开始拉丝金属已经得到广泛的应用。由于 Quartz Extreme 这项被简称为QE的新技术给UI设计带来了新的可能性。简单地说,它就是利用了显卡的强劲性能,为UI提供硬件加速。这样进一步解除了机器性能对UI设计的限制,设计师可以充分发挥自己的创造力。由此可见,想要产出或保持一个高水平的UI设计,先进的底层技术是重要基础。

 

Apple Core Animation放大器

 

Core Animation是一个面向程序员的动画开发框架,它旨在统一、规范并简化程序员在UI设计上的编码工作,并通过提供一系列预定义好的API,让开发者可以轻松地实现各种视觉特效。

 

Core Animation把UI设计向前推进了一大步,是它加速了直接操纵(Direct Manipulation)这种交互方式的普及。在10.5中,它作为一个重要的基础框架被提出,奠定了未来几年Apple在其各个产品上UI设计的基础。 我们目前常见的最典型的应用就是iphone,可以说,Core Animation是iPhone易用且绚烂多姿的UI的最大功臣。

 

下面是此技术在iPhone上的几个直接操纵的例子:

智能UI:面向未来的UI开发技术

 


智能UI:面向未来的UI开发技术

 


智能UI:面向未来的UI开发技术

 


智能UI:面向未来的UI开发技术

 

被技术放大的UI和交互,基本实现了Jobs:不仅要作出一个高可用性的用户界面,更重要的是,Mac OS X将具备一个名为AQUA的“Dream User Interface”之愿景。AQUA一方面保留有古典系统高度易用的特点;另一方面,通过各种视觉特效的引入,AQUA将带来前所未有的用户体验。

 

在近几年的拟物、扁平、分层……等设计风格的小幅变化外,UI和交互最重要的变化就在于:如何满足不同人群的需求。过去,对于一个视力不好的人,会外挂辅助功能来解决:放大镜。如今,对于一个视力不好的人,手机淘宝利用智能UI这个牛逼的放大器,直接从UI和交互上来解决。

智能UI:面向未来的UI开发技术

淘宝的智能UI

智能UI:一枚牛逼的放大器

 

理论依据

 

先看一个UGD(User Growth Design)的例子:

智能UI:面向未来的UI开发技术

UGD的例子

UGD这个思想,试图回答:什么样的设计能够驱动增长?就像当初UCD(User Center Design),视图回答:什么样的设计能够改善用户体验?然而,他们都忽略了一个问题:一万个人眼里有一万个哈姆雷特。假如把上面这些问题变成:什么样的设计能够驱动什么类型用户增长?什么样的设计能够改善什么类型用户的体验?我们就给一万个类型的人,每类提供一万种类型的UI和交互,再根据用户的行为数据判断每类用户喜欢那种类型的UI和交互,就能解决一万个人眼里有一万个哈姆雷特的问题。

 

实现方法

 

  1. 业务可变性方案
    业务可变性方案须要和业务确认允许变化的范围和选项。比如,业务上有一个弹窗,如果业务需要中断用户当前操作流程,可变性就从“用弹窗还是浮层”问题降级到“必须用弹窗”,这和产品设计、UI和交互设计无关。假如业务允许在“用弹窗还是浮层”问题上做选择呢?一般来说,设计会介入和产品一起判断“用弹窗还是用浮层”,最后,还是拿着一个弹窗一个浮层两套方案,去找老板拍板。我们智能UI的做法却不同,两套方案都实现,根据不同类型用户在两套方案上的数据表现,分别给用户呈现不同的方案。
  2. 设计可变性方案
    设计可变性方案须要和设计确认:不同类型用户可能在UI和交互上的差异(如视弱、冷淡、二次元……),并根据这些差异输出不同的设计方案。这里的设计方案主要由三部分构成:页面、模块、组件,很熟悉是不?《前端智能化》里有介绍我们针对页面构成的原理,如何设计智能生成页面代码的体系,如今 imgcook.com 已经在组件识别上取得了较大的进步。我们可以用组件去对应设计中Symbol,例如 material design 的Components:通过不同的页面布局、模块布局、模块内布局,并组合不同样式的组件,最终给每类用户呈现出他们喜爱的UI、提供他们最舒服的交互方式。
  3. 技术可变性方案
    在网页出现的第一天,模板技术就几乎同时出现了,她的核心任务是静态的框架呈现动态的内容。模板像一个杯子,倒进去水,喝完了,再倒进去果汁,杯子还是那个杯子。而智能UI要求的是,一个茶杯,倒进去水,喝完了,拿个玻璃杯,倒进去果汁。模板自身也在变化,就是第一代智能UI的技术可变性方案。在经历痛苦的模板配置后,第二代智能UI会根据设计系统的约束、设计美学算法模型打分、分人群优秀模板的机器学习等手段,用组件、模块自动化且智能的进行模板的生成。

 

事实上,如果粗略算一下:100人群风格 x 30组件元素 (平均每个页面用到的组件个数),即便模块和模板页面都可以自动生成,也有3000个组件需要开发,这庞大的开发工作量需要全新的开发方式来解决。

 

imgcook:一个大功率电源

 

智能UI:面向未来的UI开发技术

imgcook设计稿生成代码

为了能够给智能UI提供充分的组件生成和供给能力,我们对 imgcook.com 进行了升级,支持多态的组件生成能力:

智能UI:面向未来的UI开发技术

imgcook 组件生成

当然,对于 imgcook 上生成交互逻辑、业务逻辑代码,以及数据字段的自动化绑定能力,都是保留和继承的。我认为简单的UI和交互,未来都可以业务级完整交付,辅之以机器视觉加持的自动化测试能力,甚至可以做到自动化上线。

 

写在最后

 

Alan Kay说:用技术去放大人们的需求。就像照相技术放大了绘画的艺术性一样,智能UI技术放大了UI和交互的个性化,imgcook 放大了什么?对于接触编程30年、做前端16年的我来说,一直对前端被称为“切图仔”这件事儿深恶痛绝。在整个技术领域,待过腾讯和阿里的我,深感前端缺乏技术含量而被歧视的痛苦。imgcook 不仅能把前端“施工队”这个称号甩给机器学习和人工智能,我提出并坚持了三年多的“前端智能化”方向,也逐渐在众多领域里开花结果。如果你使用VSCode的imgcook插件,我们的Code2Code前端智能化方向代码纠错能力,能够帮助你智能提醒、自动推荐前端代码,还在 BFF(Backend For Front-end)胶水层代码生成上积极探索:Service2Code。

 

随着机器学习和人工智能渗入到各行各业,随着你画我猜、智能推荐、以图搜图、尬舞……渗入生活的方方面面,前端作为编程领域的一支,也必将迎来更多变化和挑战。我们开源了:http://github.com/alibaba/pipcook 带给前端机器学习的能力,提供了 http://imgcook.com 开放平台带给前端设计稿生成代码的能力,未来,我们还会带来更多前端智能化实践。如果你希望加入前端智能化方向,共同定义前端智能化的未来,可以发简历给我:zhenyankun.zyk@alibaba-inc.com 。



Tags:UI   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者丨Rafal Grzegorczyk译者丨陈骏策划丨孙淑娟【51CTO.com原创稿件】您是否还在手动对数据库执行各种脚本?您是否还在浪费时间去验证数据库脚本的正确性?您是否还需要将...【详细内容】
2021-12-22  Tags: UI  点击:(3)  评论:(0)  加入收藏
微软的Windows开发团队今天发布了Windows 11 2021年的最后一个更新版本:Windows 11 Insider Preview Build 22523,目前该版本可供Insiders使用,并进行了许多改进和修复。该公司...【详细内容】
2021-12-17  Tags: UI  点击:(19)  评论:(0)  加入收藏
经过MIUI12、MIUI12.5,大家应该挺期待下个月的MIUI13了吧,这次MIUI13不仅肩负着推陈出新的使命,还有更重要的任务,那就是挽回MIUI在这一年里损失的口碑。 最近,网络上曝出一张关...【详细内容】
2021-11-26  Tags: UI  点击:(15)  评论:(0)  加入收藏
相信大家都知道,网上流传着miui非常臃肿的问题。有事儿没事儿,什么功能都往上加。消费者提什么,他就往上加什么。什么功能都喜欢,加个开关,做两个模式。起初miui是简洁好用,后来mi...【详细内容】
2021-11-23  Tags: UI  点击:(13)  评论:(0)  加入收藏
对于智能手机,由于功能越来越多,性能越来越强,使用越来越频繁,耗电快是必然的,但是也有一些不经意的设置和操作加快了手机的耗电,导致很多小伙伴感觉自己的手机都不怎么用,但是电量...【详细内容】
2021-11-10  Tags: UI  点击:(32)  评论:(0)  加入收藏
11月9日,小米高管乔忠良在小米社区发帖,分析了许多MIUI用户反应的耗电较快的原因。可以看到,定位服务未关闭、长时间开启应用(游戏、视频、音乐等)、屏幕未设置自动熄屏和屏幕保...【详细内容】
2021-11-10  Tags: UI  点击:(56)  评论:(0)  加入收藏
自从MIUI12.5被诟病bug多、体验差后,MIUI12.5增强版也相继推出,而小米在这几个月也花了不少心思去优化,而目前MIUI12.5上线了一个新功能受到了众多米粉的欢迎。 起因在于网上有...【详细内容】
2021-11-05  Tags: UI  点击:(34)  评论:(0)  加入收藏
随着现代 Web 开发,我们要么使用 require 要么使用 import 引用 JavaScript 依赖项。有时,我们将两者结合使用。但是,你知道为什么这两者都存在吗? 使用一种或另一种时的最佳实...【详细内容】
2021-08-16  Tags: UI  点击:(89)  评论:(0)  加入收藏
你知道嘛由于Python越来越受欢迎,并得到广泛采用,它将成为2020年流行起来的编程语言。在牢固掌握Python编程基础之后,初学者面临的下一个挑战是构建用户界面。幸运的是,有很多Py...【详细内容】
2021-06-28  Tags: UI  点击:(203)  评论:(0)  加入收藏
Druid是阿里巴巴的一个开源项目,号称为监控而生的数据库连接池,在功能、性能、扩展性方面都超过其他,例如 DBCP、C3P0、BoneCP、Proxool、JBoss、DataSource 等连接池,而且Druid已经在阿里巴巴部署了超过600个应用,通过了...【详细内容】
2021-06-17  Tags: UI  点击:(117)  评论:(0)  加入收藏
▌简易百科推荐
【简介】大家好,我是不二何(68ID:何旭阳),很荣幸受邀此次的68Design专访! 目前我是一位自由设计师,平时除了承接一些商业项目之外,也会更新视频号、小红书等短视频平台。其中小红书...【详细内容】
2021-12-27  68Design    Tags:PS   点击:(1)  评论:(0)  加入收藏
Retouch Pro是一款优秀的图像修饰插件,帮助ps用户更快地进行图像照片的修饰。 由于其强大的人工智能系统,您可以轻松就获得专业的效果,并且比以往的手动更快,效果更好,操作更简单...【详细内容】
2021-12-27  设计师臭豆腐    Tags:Ps   点击:(4)  评论:(0)  加入收藏
早在 2015 年,就有报道称,到 2022 年底,仅英国的创意产业就需要 120 万名新工人。当然,世界与 2015 年的情况大不相同——但如果任何事物都需要比预期更多的创造力,而...【详细内容】
2021-12-22  Adobe国际认证    Tags:Adobe   点击:(10)  评论:(0)  加入收藏
最终效果 1、新建文件打开PS软件,按Ctrl + N 新建文件,尺寸为1920×1308像素,分辨率为72像素/英寸,如下图,然后确定。 2、导入房间素材打开素材包中的房间素材,用移动工具...【详细内容】
2021-12-22  PS教程240PS    Tags:PS   点击:(5)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  旁门左道PPT    Tags:设计师   点击:(19)  评论:(0)  加入收藏
今天来说使用CAD梦想画图软件绘制一个CAD小白基础题。操作工具操作系统:Windows10CAD软件:CAD梦想画图步骤1.先画一个半径为100的圆,如下图所示:画圆 2.接着使用多边形命令(POL)画...【详细内容】
2021-12-15  CAD梦想画图    Tags:CAD   点击:(16)  评论:(0)  加入收藏
详情页是消费者进店后决定是否购买产品的页面,是电商产品重要的落地点。在消费者找到自己心仪的产品后,详情页满足了消费者了解产品的所有信息的诉求,就像一个经验丰富的售货员,对产品的每细节娓娓道来。定义好产品属性后...【详细内容】
2021-12-15  设计智造    Tags:详情页   点击:(8)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计) ▲音乐学校创意 ▲轮胎创意 ▲啤酒创意 ▲糕点创意 ▲旅游公司创意 ▲抵制家庭暴力公益宣传 ▲食品创意 ...【详细内容】
2021-12-15  设计智造    Tags:广告设计   点击:(10)  评论:(0)  加入收藏
来源:微信公众号 PingMianDesigner(平面设计)启动画面是在APP启动时全屏展示的简单占位图,其作用是用户打开APP,程序在运行时可能因为网络、程序本身等原因需要加载几秒钟的等待...【详细内容】
2021-12-15  设计智造    Tags:界面设计   点击:(20)  评论:(0)  加入收藏
Don Tuch 是一家位于墨西哥城的快餐店。其源自于Yucatán半岛的美食传统,是以一种令人难忘的独特方式融合了正宗风味的食品概念。Don Tuch以一种有趣和轻松的方式向Yuc...【详细内容】
2021-12-15  致美设计    Tags:包装设计   点击:(11)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条