提高UI设计效率的4个技巧

如何提高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 着上前景色(Foreground),让它变灰甚至变成彩色,又指责开发者这么单纯的事都办不到,其实 Apple 在文件里写得很清楚,这个东西你就只有黑或白色可选,像这种就是你不该做的效果。

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

严谨执行设计流程

业界 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%

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

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

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

时间: 2024-10-16 08:53:25

提高UI设计效率的4个技巧的相关文章

Android提高UI性能技巧

提高UI性能的方法事实上有非常多在实际的开发中都已经用到了,在此做一下总结. 1.降低主线程的堵塞时间 若一个操作的耗时较长(超过5秒),我们应该将其放入后台线程中运行.仅仅在须要改动UI界面时通知主线程进行改动. Android已经提供了AsyncTask以实现从主线程生成新的异步任务的方法. 2.提高Adapter&AdapterView的效率 (1)重用已生成过的Item View (2)加入ViewHolder , 避免反复查找须要改动的控件 public View getView(in

125个提高网页可用性的优化小技巧(二)

125个提高网页可用性的优化小技巧(二) --安阳师范学院互联网+应用技术学院UI设计方向讲师 崔凯让常用功能和重要数据信息更接近用户预测用户的意图,让他们尽可能接近目标. △ 筛选出或跳至用户正在搜索的条目 △ 将用户常选项目列为默认选项△ 产品列表页上把重要数据信息展示出来很多时候用户需要像踩弹簧高跷杖一样,点击一个产品,查看信息,返回上一页,再反复操作以查看其他产品.这种设计的可用性差.应把重要信息直接放在主要页面,减少用户反复操作的次数.如果你怕这样页面会杂乱,也可以设计成鼠标悬停时显示

如何提高UI自动化测试的质量

背景 项目是基于Ruby on Rails开发的web程序,应该说项目中的测试实践是很好的,具有高覆盖率的单元测试以及比较合理的集成测试.存在的问题是,所有的单元测试和集成测试都是针对后端代码的,前端的JavaSript代码没有单元测试(这个是有历史原因的,暂时没法改变).这也就意味着针对前端UI的修改是没有底层的单元测试来保障的,只能依靠高层级的UI自动化测试和手工测试来保障. 我们最近刚刚完成了一个story,是纯前端的开发工作,结果在上线后发现我们在修改页面模板文件时,忘记了其他地方也在使

程序员提高工作效率的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.在状态的时候多干一些,不在状态时可以就去做个大保

【转】提高PHP性能的53个技巧

PHP技巧汇总:提高PHP性能的53个技巧用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的函数译注:PHP手册中说echo是语言结构,不是真正的函数,故把函数加上了双引号).1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍.2.$row[*id]*的速度是$row[id]的7倍.3.echo 比 print 快,并且使用echo的多重参

提高您CSS开发能力的技巧集

0. 目录 目录 引言 正文 1 使用not给导航条添加间隔线 2 给body元素增加Line-Height属性 3 任意元素垂直居中 4 逗号分隔的列表 5 在nth-child中使用负数 6 使用svg图标 7 文本显示优化 8 在Pure CSS Sliders中使用max-height 9 初始化box-sizing 10 表格单元格等宽 11 使用Flexbox摆脱各种Margin Hacks 12 给空连接使用属性选择符 声明 1. 引言 原文:github的A collection

提高网速的21个技巧

提高网速的21个技巧 1.去掉无关的选项 在Windows XP中,双击"控制面板"中的"文件夹选项",再单击"查看"标签,然后将鼠标指针滚动至窗口的最下方,可以看到有一个"自动搜索网络文件夹和打印机"项,默认是选中的,将它去掉.这样,当我们打印时,Wi ndows XP不会自作主张去寻找http://局域网上的打印机并安装驱动程序,以防止不经意将机密文档打到别的部门打印机上而自己却还找不到.同时,将此项去掉后,当我们通过&q

提高eclipse使用效率(二) 提高Android开发效率的小技巧

2013-09-04 22:49:33cnblogs.com-sw926-点击数:214 XML文件的代码提示 adt中也有xml文件的代码提示,为了让提示来的更加猛烈,我们还要设置一下 打开eclipse - Window - Preferences,在右边的目录树中切换到XML - XML Files - Editor - Content Assist,是不是很熟悉,没错,就是Content Assist 接下来就简单了,延迟设为50ms,提示字母把能填的都填上去,设置完之后可以试一下.输入

提高PPT操作APM的小技巧

好多PPT爱好者说做PPT设计时候,APM上不去. 这里先解释什么是APM:APM即是每分钟操作的次数,又称“手速”多见于星际争霸和魔兽争霸这两款游戏中一定程度上反映了玩家的水平. PPT操作的APM低原因有很多,关键的还是意识.很多人觉得手势影响了APM,其实意识还是第一位的,手势只是次要的.不过,还是要纠正一个错误的手势. 很多人喜欢把大拇指放在ctrl上,方便按ctrl+s来保存文件,其实这是影响APM的.大拇指应该放在alt上,保存时应该先按alt,再按1.因为alt键的使用率实在太高了