当前位置: 首页 > news >正文

UI设计能力质变方法论 - 设计师, 请理解什么是组件

此文是我2016年对UI设计行业的一些理解,和自己未来能力发展的规划,里面有许多观点属于自己的猜测,只是分享给大家,希望大家有判断的阅读。 转发请标明链接。

市场逼着你变

行业现状

2016年下半年开始, UI设计领域的人才市场发生了变革:

以设计师投递简历面试为例,在2015年时,一个工作经历2年以上的设计师投递5份简历大约有1次面试机会。而在2016年下半年平均20份简历才有1次面试机会。

如何理解以上现象?

  • UI设计师的从业人员在2012年开始逐年增加。
  • 2016年资本寒冬,中小企业手头的资金相对紧张。
  • 由于全球通货膨胀,人员薪资逐年上升。
  • 预计2017年开始,移动互联网从上升期进入稳定(衰退)期。

也就是说中小企业钱少了, 人员开销成本上升了, 从业人员变多了。 竞争自然激烈了。

行业未来

一个行业从业人员越多,说明这个行业的市场越大,同行的贫富差距也会越大。

UI设计行业的未来形态有一个最好的参照物,就是平面设计领域。 或许有很多UI设计师看不起平面设计师,他们的理解是大部分平面设计师就是在路边的小广告店设计名片,展架,广告牌。这类平面设计师的薪资在2012年从4K/月均价到2016年的8K/月均价。这比起UI设计师2012年6-10K/月到2016年12K/月-25K/月的薪资范围差距很大。 其实在国内电脑刚普及的时候,当年他们的薪资等同于今年的UI设计师,同样属于社会中工薪阶层的中上层。 但是随着这个领域的泛滥,从业人员变多,平面设计师之间就被拉开了巨大差距。好的平面设计师进入4A广告公司历练, 厉害的平面设计师例如韩家英、靳埭强、陈幼坚等等都成为该领域大师。他们的收入远超一线互联网企业中的UI设计总监(年收入50W), 这些平面设计大咖月收入过几十万很轻松,一个7-8年4A经验的视觉设计师也有30-50w/年。 我预计在UI设计领域,未来也会出现这样一批精英,这个领域越泛滥,人员越多,行业精英反而越值钱。前提是精英的能力必须和行业内的人拉开一个数量级差距. 成为行业的精英,让行业从业人员泛滥变成“行业的人口红利”,也就是本文提到的主题:

设计能力需要一个质变。

向大师学习

我母亲之前问我,她们那代人想学一行,需要找到该行业的大师,去拜师学习。只有向大师学习才能成为那个行业的精英。 UI设计行业现在还太年轻,现在公认的大师还未诞生。基于这个行业的性质我们也无从去找一个大师“拜师学艺”。 但是我认为iOS7之后的UIKit的缔造者会被评为大师之一。所以UIKit就是我心目中的大师,向它学习,和我母亲所述的价值观吻合。 一套好的UI并不只是设计几个界面, 制定几条设计规范。他是一个系统。 个人认为iOS的UIKit的综合设计理念远超现在业界所有。

本文所指的UIKit,并不是狭义的指Cocoa中开发组件UIKit。而是指从UI设计到开发组件一整套体系,这篇文章统一称作UIKit。

通过分析我把一套UIKit分为以下几个组成部分:

  • 有一套自己的设计理念
  • 有一套完整的设计规范
  • 有一套完整的控件
  • 有一套完整手势规范
  • 有一套通用的默认动效
  • 有一套开发者使用的代码库

以上几条组合起来可以做什么?

一个产品经理如果把功能设计完了,交互设计师必须根据苹果的设计规范进行设计,交互设计完成之后,开发人员只要使用UIKit的控件就可以把整个应用开发完成。甚至页面交互动画,弹框形式,动画都使用UIKit原生的就已经设计完了。 简单的来说就是使用“系统原生设计”去设计产品。 所以说苹果的UI设计师已经把绝大部分产品的UI设计已经做完了,只用这一个UIKit。 客观来说,我们平时UI设计师的工作本质上只是替换这些系统默认设计,让我们的App变得更有“特色”。 还记得我之前说的在小广告店的平面设计师么?这么看来,平庸的UI设计师和他们没有区别。

设计一套UI系统,达到质变

UI设计能力按我的理解分为几个阶段(贴地气的版本):

  1. 想画什么效果就能画得出来(动手能力)
  2. 看到别人好的设计可以偷过来(运用能力,审美能力)
  3. 能原创设计出一些很好的设计(设计能力,客观讲,这个得看发挥)
  4. 能很系统的设计一套设计规范(设计风格规范能力)
  5. 能设计一套完整的UI系统(视觉设计的架构能力,对UI程序实现的理解能力)

以上前4条,相信一些从业5年以上的伙伴们有的已经达到,质变就是率先到达第5条。让我们设计的UI达到“系统原生”级别。

一套好的UI系统应该是怎么样的,怎么制作?

  • 漂亮的设计风格
  • 有一套合适的设计理念
  • 有一套完整的设计规范
  • 有一套完整的控件库
  • 有一套通用的默认动效
  • 交互设计师使用此UI系统可以搭建各种的通用应用

简单阐述一下项目中如何使用UI系统进行项目分工。

未来基于UI系统的分工

未来有多远? 吴晓波老师说,移动互联网出现才5年,现在已经过了峰值,到了产业转向的时间节点。 所以未来有多远我不知道,但是一定比我们想象的近。

产品

一个一线的互联网公司应该有一个UI系统小组专门设计属于自己企业的UI系统,并且逐年完善它,就好像iOS7-iOS10一样。 而其他实际的项目组的产品经理和交互设计师只需要使用此UI系统搭建自己心目中的产品形态。 并且设计产品交互时,需要在UI系统规定的框架之中去设计,这样也能保证用户在使用此企业不同产品时一致的体验(就好比使用iOS系统)。同时也能节省更多的设计人力成本。 产品设计中遇到UI系统未能实现的部分,需要和UI系统小组商讨,在UI系统的设计理念的范围下设计这些额外部分,并且在未来由UI系统小组把这部分优化并入UI系统。

运营

把更多的设计人力资源投放到运营中, 不管是内容运营还是活动运营,都需要更多更好的设计师,由于运营的内容不是一致的,所以需要差异化,这恰好是设计的本质。用更有设计的运营内容用来点缀产品的差异性和展现各种新鲜的设计。会使得产品质量上一个新台阶。

UI系统是一个壳,我们需要最漂亮的那个壳子, 用来装最漂亮的珠宝。

UI系统造就大师

如果您是这套库的缔造者,并且把此系统设计达到(超过)苹果的UIKit的高度。又如果产品达到一定的高度,在某些时段成为现象级产品。 那么在未来回头看,我们或许会说某某,是某UI系统的缔造者,是当代无愧的UI设计领域的大师。

挑战

罗胖说得好,就是因为做不到所以才要当众许诺,以此要挟自己努力去尝试。 你可以摸索着设计一套UI系统,并且把过程分享出来给大家。

后记

以上是2016年编写的内容, 现在看前端领域, 除了UIKit, Antd 等组件库已经有自己完整的设计语言和UI系统, 在团队明晰设计语言的前提下, 使用这些组件库可以很高效的生产设计语言范畴内的产品, 预计未来越来越多的企业会有自己的Antd.

如果团队中的产品和设计不能很好的理解 UI系统 的概念, 不能很好的把设计语言贯穿项目始末, 就会导致与前端开发人员非常痛苦, 也失去了现在围绕组件化的开发优势.

相关文章:

  • 【MyBatis】缓存配置
  • HTTP协议初步认识
  • 联想启天M715E安装硬盘保护系统和网络同传
  • 通过全备+binlog_server同步恢复被drop的库或表
  • 围观测评题(1)
  • t-sql对被除数为0除数小于被除数结果为0除法保留2位小数的处理
  • 自动化运维之Ansible服务部署
  • 并发下线程池的最佳数量计算
  • SpringMVC+MYBatis企业应用实战笔记
  • HTML5本地存储使用详解
  • 95后博士入职达摩院,14岁上大学,成阿里史上最年轻科学家
  • [Node.js]连接mongodb
  • 数据分析——四种大数据分析方法
  • Maven POM详解
  • 技术指导实践指南
  • Android交互
  • Angular数据绑定机制
  • Facebook AccountKit 接入的坑点
  • PhantomJS 安装
  • SpringBoot 实战 (三) | 配置文件详解
  • 高性能JavaScript阅读简记(三)
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 简单数学运算程序(不定期更新)
  • 三栏布局总结
  • 小程序开发中的那些坑
  • 一、python与pycharm的安装
  • 深度学习之轻量级神经网络在TWS蓝牙音频处理器上的部署
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • (顶刊)一个基于分类代理模型的超多目标优化算法
  • (剑指Offer)面试题34:丑数
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (四)Controller接口控制器详解(三)
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转)Android学习系列(31)--App自动化之使用Ant编译项目多渠道打包
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .NET gRPC 和RESTful简单对比
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • .NET的数据绑定
  • @hook扩展分析
  • @SpringBootApplication 包含的三个注解及其含义
  • @Tag和@Operation标签失效问题。SpringDoc 2.2.0(OpenApi 3)和Spring Boot 3.1.1集成
  • []利用定点式具实现:文件读取,完成不同进制之间的
  • [100天算法】-x 的平方根(day 61)
  • [1181]linux两台服务器之间传输文件和文件夹
  • [30期] 我的学习方法
  • [android] 手机卫士黑名单功能(ListView优化)
  • [Android]通过PhoneLookup读取所有电话号码
  • [Angular] 笔记 18:Angular Router
  • [Angular] 笔记 21:@ViewChild
  • [C++]unordered系列关联式容器
  • [codeforces]Levko and Permutation