提升UI设计工作效率的4个技巧

如何提高UI 设计的速度?在这里分享一些我观察到的常见问题和改善方式。当然,需要注意的地方何其多,本文先着重聊一下观念和沟通的部分。

身为ui设计师的你,应该要??

了解工程实作的基本原理

业界 NG 率:接近 100%

许多人认为创造力和逻辑是左右半脑分开管辖的、设计师和工程师使用的是不同部分的能力,所以大家各安其份做好自己的工作就好——我负责光鲜亮丽地画图,工程师就负责用超大声的同刻键盘在黑色的屏幕上编写外星文。

但事实上这种刻板印象除了阻碍你进步以外可说是一点用都没有(而且不见得是正确的)。

巴别塔的故事大家几乎都听过,会造成沟通问题的原因很简单,就是讲的「语言」不同,而非思考方式不一样——无论是什么领域,要成为佼佼者,都必须具备高度的创造和想象能力,而设计更是非常讲求逻辑的行为。

所以设计师懂工程实作原理要做什么?该懂哪些部分?很简单,你不需要学会怎么写 code,但你至少需要懂得:

1. 正确称呼 UI 组件

以 iOS 为例子,在 Apple 的接口设计规范文件里,每个画面构成的组件都有正式的名称,我们看看:

这个玩意儿叫做「Segmented Controls」,而不是「那个长得像胶囊的选单」,如果能够使用正确的术语来沟通,将能够省下非常可观的解释时间。如果你想了解得更多、更精确,将前述的规范文件读熟以后,建议你再继续研究 UIKit Catalog。

2. 有些效果就是做不出来、很难做、不该做

最普遍的例子:自从 iOS 7 引入带有模糊效果的设计语言后,大家似乎都染上了高斯模糊的瘾。但这样的效果非常耗费系统资源(原理及时间复杂度),就连 iOS 也到了来年的 iOS 8 才心不甘情不愿地开放使用 UIBlurEffect API,免得第三方 App 一堆模糊效果拖累系统效能;而在 Android 上官方更没有提供像 iOS 如此方便的 API 可用(有错请不吝指正)。

听起来像外星语?白话来说,许多设计师毫无意识到某些视觉效果在工程实做面的可行性、也没有考虑到各种装置的运算负荷能力,而设计了大量会让开发者面有难色的稿子,好不容易做出来了,发现算图卡顿得要命,又要回头改稿,得不偿失。

又例如 Status Bar:

我看过太多设计师为了设计感而给 Status Bar 着上前景色(Foreground),让它变灰甚至变成彩色,又指责开发者这么单纯的事都办不到,其实 Apple 在文件里写得很清楚,这个东西你就只有黑或白色可选,像这种就是你不该做的效果。

建议:如果你是就读设计科系的大学生或研究生,我会建议你选修计算器概论、基础数据结构,这些都会对 UI 设计非常有帮助。

严谨执行设计流程

业界 NG 率:90%

之前和一些公司合作的过程、以及和朋友聊天的时候,我发现一个团队在设计流程上草率带过的情形比想象中还多。一般来说我会建议中小型项目采取以下流程来执行设计:

这个流程是容许微调的,我在 Yahoo 实习时常看到非常大型的设计流程,而在其他小型团队工作时则多会采取上述较简易的版本。

要如何微调呢?基本上不建议省略其中的步骤,但在上面绿色箭头处可以减少迭代(Iterate)的次数来达到省时的目的,而这部分就会稍微考验到产品设计师、PM 的经验和 gut feeling 了。

有些讲得一口好设计的人会不食人间烟火、一味地倡导要从使用者调查研究(User Research)、Persona 开始做起,然后实作 n 多个原型(Prototype)才开始让开发者动手,后续再做数据分析??等工作,好像全世界只有自己知道这件事一样。

但实务上,小型项目花太多心力去做这些事基本上是缺乏成本观念的表现,在使用者数量达到一定门坎前,数据分析的母体也是小得可怜,并无统计的参考价值。因此,小型项目其实可以将功能拆分 Release,先做出来再观察使用情形并修正细节(虽然有一点危险,但比起让项目永无结束之日,总是较适当的选择)。

先以原生 UI 组件表意

业界 NG 率:80%

在设计的 wireframe 阶段,主要目标是让大家对于画面上「有哪些对象」取得共识,而不是这些对象「该长什么样子」,那是 mockup 阶段才要注重的,因此将 wireframe 画得过于精美是一件非常奇怪的事情,例如这样:

如果把 wireframe 画得如此精美,你将立即面临三个负面后果:

浪费时间,彻底的浪费时间。

有彩色稿的外型构造,却没彩色稿的色彩系统辅佐,导致大家无法完整理解你「精心设计」的 UI 对象。

对设计没概念的客户、PM 或老板会忘记我们是在 review 画面上有哪些对象,反而在这时就开始跟你检讨设计细节,等你接着做彩色稿时,才突然讲说之前有哪个功能忘记摆放上去。

其中第二点是本节的重点,在你的 wireframe 里,应该使用系统原生的对象来构成画面,例如这些东西:

请避免在非必要的状况下急着在 wireframe 里画一些从来没有人看过的「创新 UI」。一个好理解、直觉的设计是所有细节相辅相成的,在 wireframe 的阶段缺少了颜色和动态效果的辅助,更不该冒险呈现特殊的对象外型,也就是说,你的 wireframe 顶多做到这样就该收手:

这样一来,画面上都是大家平常使用 App 时有看过的形式,看得懂画面的时候,就能够专心探讨这些功能是不是产品所需要具备的。

少用代名词

业界 NG 率:60%

这个沟通技巧不难做到,但如果没有人指出,是很难自己发现的。

我们表达一件事情若要表达得精确,就应该试着减少话中的「诠释空间」,而代名词的使用非常容易造成设计讨论上的时间浪费,例如「这个」、「那个」之类的词汇,在专业讨论上应该减少使用;取而代之,你应该使用本篇文章第一节所提到的精确名词来表达,或是详细描述你所指的外型。

好了,如果你是设计师,希望这篇文章能够帮助你在设计的沟通讨论上更加顺畅、省时;如果你是 PM 或开发者,也可以顺便学习、或将这篇文章转给你的设计师参考。

文章来源:优设

时间: 2024-10-30 22:51:29

提升UI设计工作效率的4个技巧的相关文章

程序员提高工作效率的15个技巧【Facebook】

程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 1,Days always fill up. Only plan for 4-5 hours of real work per day.其实每天只有4-5个小时能专心编码,充分利用这些时间. 2,Work more when you’re in the zone. Relax when you’re not.在状态的时候多干一些,不在状态时可以就去做个大保

软件机器人,提升企业日常工作效率的利器

以数字化为标志,以智能化为特征的新一代商业变革已经到来.信息技术的创新发展,必然引发商业模式的变革,使得营销.运营.人力.财务策略和运作流程发生变化.在数字化.自动化.智能化的趋势下,软件机器人.人工智能(AI).大数据和云计算等新技术被应用到企业的方方面面,使企业流程不断优化.效率不断提升. 什么是软件机器人? 软件机器人,是一种智能化软件,通过模拟并增强人类与计算机的交互过程,实现工作流程中的自动化.比如说很多办公流程,工作人员经常需要耗费大量的时间来操作一些重复性的有规律的工作,那么这些任

实用Jupyter Notebook扩展工具——提升你的工作效率

Jupyter Notebook 现已成为数据分析,机器学习的必备工具.因为它可以让数据分析师集中精力向用户解释整个分析过程.通过安装一些扩展工具,可以让你在Jupyter Notebook上的工作效率进一步的提高. Jupyter NbExtensions Configurator Jupyter NbExtensions Configurator 是Jupyter Notebook的一个扩展工具,它提供了一系列标签,只需勾选相应插件就能自动载入.里面的插件能帮助减少工作量,书写更优雅的代码和

超实用快捷键!瞬间提升你的工作效率!

1 .按ctrl + N 组合键,一键新建excel新文件. 你是不是还在文件 - 新建 - 空白工作簿 2. 按Ctrl + 1(数字1),快速打开单元格格式设置框. 你是不是还在用右键 - 设置单元格格式 3 . 按CTRL + A,快速选取当前连续的数据区域. 你是不是还在拉着鼠标拖啊拖 4 .按CTRL + 9或0组合键,一键隐藏行或列 很多同学都要找这个快捷键 5 .按ctrl + -(减号),一键删除行(ctrl+shift+加号:插入行) 连续多次删除或插入行时,这招特快! 6.

利用python模拟鼠标点击自动完成工作,提升你的工作效率!

没有什么能比学以致用让学习变得更有动力的了. 不知道大家在工作中有没有一些工作需要重复的点击鼠标,因为会影响到财务统计报表的关系,我们每个月底月初都要修改ERP中的单据日期,单据多的时候光修改就能让你点鼠标点到手麻.(这里要吐槽一下浪沙软件,别的单据都可以批量修改日期,就是这个移仓单不行,你们研发怎么就这么懒?剩下这么点工作就不完成他?)之前同事有跟我提到过键盘精灵,因为当时负责别的工作,一直没有去了解.现在公司人员减少了,这工作又回到我身上了,刚好之前我在学习连连看的时候,知道Python 也

前端-【学习心得】-使用工具提升你的工作效率(chrome)

接下来就是前端开发的另一大神器,chrome浏览器. chrome浏览器可以实时的调试网页样式,断点查看js代码,查看请求参数,观察动画帧,以及进行响应式调节.不需要再装插件.当然fire bug也是一个非常优秀的调试插件.因为习惯问题我还是选择了chrome,在此将我的经验分享给大家. 首先是审查元素的界面,可以看到左侧是html文档,右侧是样式表,如果想查看某个dome元素,需要选中放大镜那个按钮然后去界面上选取,可以直观看到元素的大小,右侧样式表又可以展示出它的样式. 接着,我们可以直接再

前端-【学习心得】-使用工具提升你的工作效率(sublime text)

从今天起我来把自己开发前端的工具分享给大家. 首先,是文本编辑器.我的选择是sublime text ,sublime 强大在于它的插件支持. 通常,前端需要打交道的地方有js,css,html. sublime temp 模板插件,因为我们平时需要重复创建许多css,js,html文件,这个插件无疑是为我们减少了这么多的重复操作.比如我想创建一个js文件只需要ctrl+shift+j 然后命名点回车就好了,当然快捷键你可以自己设置 (在sublime 安装插件也很简单,preferences-

两个成倍提高工作效率的 Vim 使用技巧

Vim 是个非常好用的工具,很多人一旦开始使用 Vim 之后就再也无法自拔.然而, Vim 仍然有其自身缺陷.陡峭的学习曲线是缺陷之一,在某些使用场景上的局限也不能忽视.今天我们为大家介绍两个方法,来解决使用中的痛点. 在任何地方使用 Vim 我会向大家介绍 Vim-anywhere,这是一个简单的脚本,它允许你使用 Vim 编辑器在 Linux 中的任何地方输入文本.这意味着你能简单地调用自己最爱的 Vim 编辑器,输入任何你所想的,并将这些文本粘贴到任意的应用和网站中.这些文本将在剪贴板可用

学ui设计能找到好工作吗?

最近身边有好多人都在讨论去学ui设计,讨论来考虑去,纠结得不行,不过想想,其实大家考虑就是学ui设计能找到好工作吗?ui设计有前途吗?这么多人在学ui,我能找到工作吗?那海文小编就带你们先来了解下学ui设计是学什么. 学ui设计是学什么? 学ui设计是学什么?所谓的UI设计师,到底是干嘛的?山东海文小编今天就给你科普一下下.首先复习一下UI的概念:UI即User Interface(用户界面)简称.UI设计则是指对软件的人机交互.操作逻辑.界面美观的整体设计.好的UI设计不仅是让软件变得有个性有