前端人需要懂些UI知识

377 阅读6分钟

设计不是一种技能,而是捕获事物本质的感觉能力和洞察能力

还记得小米 200 万的 logo 吗?最新mi logo是出自原研哉之手。改动很小,但是收获很大。文章开头引用的那句话,也是出自原研哉

为什么要写这个文章

先了解两个概念

中台系统主要指:响应前后台业务,实现双端的集中管理价值提取,支持业务创新和精细化运营数据处理系统。

后台系统主要指:对前端网站信息和数据进行管理的系统,主要面向企业内部运营管理人员。

目前随着中国企业数字化转型的加速。中后台开发系统的占比在不断地上升。作为开发人员经常会面临一些问题,在做中后台系统的前端开发时候,很大一部分是没有UI同学支持的。这也导致了页面的排版布局更多是FE同学参考RD原型,或者根据自己过往经验进行处理的。

如果产品没有追求,再加上FE同学对需求理解不够清楚,或者经验不足的话,就会导致中后台的应用不仅看起来不美观,而且用起来也不爽。

作为FE同学,较好的美感应该是我们应该去关注和培养的。经验方面,当然希望有更多正向方面的经验。

同时也是对我个人的一个要求,接下来的这段时间自己会更多的去阅读和尝试做一些设计相关的工作。

千里之行,始于足下。本篇文档会重点介绍UI相关的一些概念。

什么是UI

UI的全称是 - 用户界面(User Interface)

这个计算机软件方面的定义。认为UI能够包含软件与硬件人机交互、操作逻辑、行为路径、用户体验、界面排版的整体设计。

另外在一些论坛中对"界"这个词做了一些解释:"界"是“边界”之意,而Interface是“人机之间的‘中介’”。较能得其意。

下图是 2007—2013年的苹果操作系统的界面。

image.png

在图中,我们可以清晰地看到2007年苹果第一代iOS1版本的设计和屏幕尺寸,当时的拟物设计风格,一直延续到了iOS6版本,期间个别图标做了轻微的调整和改进。

从iOS7以后,进行了飞跃式的大改变。虽然在设计行业里,非常多的设计师对当时的设计风格持怀疑态度,而且细节和规范设计也存在着非常多的问题,让人觉得这根本不是一个手机行业领头的苹果公司应该有的设计态度,也有很多人质疑这是乔布斯去世后苹果的衰落。但是不可否认的是,更多的用户喜欢并且非常接受这样的设计,因为对他们来说,这种 “轻视觉,重交互” 的操作系统才是这个时代该有的设计。

UI设计与之前的设计有很大的不同,UI是随着时代不断更新、符合潮流、满足当前用户需求的设计方式,一个产品甚至一年换一个风格。而我们常规的设计,比如平面设计和网页设计,这些通常很难有大改版和大更新,因为这些是需要让用户深刻记忆的,不能总是轻易地变换。恰恰是这种与众不同的设计模式,才让UI设计的岗位需求不断增多。

UI的价值

从大的角度来说,UI设计会改变人类的习惯,改变人类的审美观、价值观,甚至改变人们的日常生活。好的设计更加容易服务于大众,让大众的生活品质有飞跃般的提升,也享受着最优质的用户体验服务。

好的UI设计是为我们的生活提供服务的,比如银行的ATM提款机,在旧版的系统界面中,是没有设定自由提取金额的,只有固定的100、200、500、1000、2000、2500等选项,以及“取消”“确认”按钮,这就会造成一个问题:比如客户查询余额只有4800元,并且要全部提取出来,聪明的人会存入200元,然后取两次2500元,也可以按下述步骤操作:

插卡>输入密码>选择语言>点击“取款”按钮>选“2500”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选“2000”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选择“200”>点击“确定”按钮>取出钱>点击“继续取款”按钮>选“100”>点击“确定”按钮>取出钱>退卡

在取款高峰期、或商业中心,一个人取款就要耗费这么长的时间是不可思议的。虽然这是一个比较特殊的情况,但是足以证明可以改善的空间有多大。在新版的ATM提款机上修改了界面和功能,增加了自行设定提款金额功能,修改后的步骤就是:

插卡>输入密码>选择语言>点击“取款”按钮>选“其他金额”>输入“4800”>点击“确定”按钮>取出钱>退卡

无论是在体验上,还是在等待时间上,都会让客户更加满意,这样的例子数不胜数。你可能会较真,说这属于代码功能,跟设计无关,可是如果当时UI的设计者已经提出这样的设计,考虑到这样的交互步骤,优化了用户体验,那么机器功能的设定会做不到吗?毕竟,设计不是客户想要什么功能就一模一样地给它什么功能,而是要更多地为客户考虑,增加一些客户没有想到的功能,并进行更加深入的研究,UI不是简单地绘图,而是创造

总结

越来越多的企业重视UI的重要性,因为美观的视觉效果和优秀的用户体验决定了每个厂商能否在激烈的竞争环境中生存,我们也因此能感受到移动互联网时代带给我们视觉和体验上前所未有的舒心感。

作为前端人,我们也应该早的去关注并提升个人在这方面的能力。