UI设计师是唯一要和程序员合作的设计师职业,我们看多了相互取笑的段子,那么怎样的UI设计师会是程序员眼中最牛的呢?这其中有3个层次。
1.懂UI
没错,首先是懂UI。UI设计师设计的是人机交互界面,界面的载体是设备。这是区别于其他设计师的地方。不同设备又有它的特性和要求,了解设备知识是程序员和设计师共同的目标,也是他们找到共同语言的基础。
设计师需要了解这些东西:
可控制的基本属性:字体,字形,字号与单位,高宽、间距留白,颜色(256色,RGBA)、渐变,圆角,透明度,阴影,对齐方式,层级。
系统自带组件(导航栏、菜单栏、任务栏、对话框等)的大小、样式风格、交互形式、版本差异。
自定义组件:1/2/3级标题、正文、提示框、按钮、弹窗、选择框、下拉列表、图标、各种卡片……
状态变化:普通、悬停(hover)、选中/激活(selected/active)、不可用(disabled)。
动画:位置、大小、颜色、透明度、形状的变化,并可控制时长、速度曲线、循环。
栅格:2、4、8、16、32的倍数对齐。
屏幕适配:大小、高宽比,像素密度(2x、3x,hdpi、xhdpi……),组件的可变大小规则。
多语言适配,兼容文字最长的语种
2.懂规范
初级设计师更想多做练习,每个项目甚至每个需求都发挥一次创意。渐渐地,在重复劳动中知道了要把某些东西固化利用,既可减少自己和程序员的工作量,又能统一设计风格,于是就产生了规范。规范化是提高设计师和程序员间协作效率的最佳实践。可进行规范化的东西有这些:
基本属性
各平台(iOS、Android、Windows)下的设计风格规范
自定义组件
切图:文件命名规范(全小写英文,下划线连接),什么情况需要带透明边框
标注:要标齐,所有大小均为偶数
设计迭代:稿件版本号管理
维护:管理所有用到的切图,每次产品迭代除了新增图外还会剔除掉废弃的图后才整体地给程序员
这些规范的确定,除了依赖设计能力,还需要了解开发的实现机理。要知道开发限制,不能做出难以实现的效果,同时衡量好开发和维护成本。例如理解“以左上角为原点坐标系”的开发定位机制才可以把标注都标齐;web项目的字号不能低于12px,否则最新的浏览器上不会生效等。
另外,执行规范是否到位是程序员和设计师互相评价的标准之一,这要求双方都足够地细心。在验收时会纠结1px或1数值颜色偏差的设计师,不仅不会被嫌烦,反而会被认为是敬业的表现。如果哪一方能利用或研发出工具——比如自动标注或代码级核对检验等——来增强协作,那肯定会被当成神一样的存在。
3.懂设计
审美是每个有感情的人都具备的,如果UI能让技术在日常工作时也看得赏心悦目那自然备受尊崇。到了这个层次,对UI设计师的要求又回归到设计本身,最基本的就是要把通用的设计手法很好地结合业务运用到产品上。
下面这些创作手法和意识的运用,在项目组眼中都是专业的体现:
色彩运用
根据业务目标渲染情绪氛围。比如电商网站用红、黄为主色调,以引起用户兴奋,一个冲动就产生购买行为。
符合产品特性,比如绿色代表安全,蓝色代表科技
符合用户特性,综合考虑性别、年龄等因素,比如粉色适合女性,艳丽色适合老年人
层次感强,突出重点
风格把控,迎合用户群体喜好,例如:柔和、青春、稳重、拟物等
炫酷又不喧宾夺主的动画
个性化,比如换肤
这其中某些部分可以说是视觉设计师的技能,其实UI设计师向其它设计领域渗透是设计水平到一定程度后的自然升级。可以往这些方面拓展:
广告和平面设计
设计理念:能向项目组成员说清楚这样设计的思路和好处,以及想通过设计来传达什么信息给用户
非功能性区域(例如引导页)的营销文案
运营物料的设计
交互设计
接管产品经理的职责,根据业务流程直接设计界面和交互流程
熟悉用户体验理论和优化方法
熟悉平台特色的人机交互指南
明确业务导向的设计目标,例如引导用户冲动消费
VI设计
从产品UI演化到企业logo、slogan
吉祥物设计
UI设计扩展影响到公司名片、包装、邮件签名栏等
产品设计
能指正产品文档上的交互逻辑疏漏
研究竞品的设计理念并超越
网页设计
前端是最贴近UI设计师的开发工作,懂点HTML/CSS/JS也就更懂程序员了
最后,和程序员一样的是,设计师如果能提高英语水平,直接阅读学习国外资料,会非常有助于紧跟国际设计潮流、提升技能。毕竟操作系统和UI设计潮流多是外国人发明和引领的,我们期待在国内出现业界的带头大哥。