四个帮你提高UI设计效率的工作技巧

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


了解工程实作的基本原理

业界 NG 率:接近 100%

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

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

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

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

1. 正确称呼 UI 组件

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

四个帮你提高UI设计效率的工作技巧

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

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

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

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

又例如 Status Bar:

四个帮你提高UI设计效率的工作技巧

我看过太多设计师为了设计感而给 Status Bar 着上前景色(Foreground),让它变灰甚至变成彩色,又指责开发者这么单纯的事都办不到,其实 Apple 在文件里写得很清楚,这个东西你就只有黑或白色可选,像这种就是你不该做的效果。
建议:如果你是就读设计科系的大学生或研究生,我会建议你选修计算器概论、基础数据结构,这些都会对 UI 设计非常有帮助。

严谨执行设计流程

业界 NG 率:90%

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

四个帮你提高UI设计效率的工作技巧

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

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

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

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

先以原生 UI 组件表意

业界 NG 率:80%

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

四个帮你提高UI设计效率的工作技巧

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

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

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

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

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

四个帮你提高UI设计效率的工作技巧

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

四个帮你提高UI设计效率的工作技巧

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

少用代名词

业界 NG 率:60%

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

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

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

 

原文来自:medium

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/28190/

(0)
CatherineCatherine
上一篇 2017-05-20 04:21
下一篇 2017-05-20 06:31

相关推荐

  • 如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 基于用户体验的性能测试:模拟个别的用户延迟(续)

    本周免费下载杂志:《保健与生活》共计12本,请点击下行红色文字链接获取下载地址杂志推荐《保健与生活》3.       在TestStudio中生成时间延迟使用Rational TestStudio的VuC语言,有很多方法可以生成时间延迟。对于如何使用Think_avg及相关的命令和参数来实现,Rational的文档和培训资料已经做了详细的说明,这里不做深入讨论,只做简要介绍。这个方法只有在Think_avg命令不在计时器(Timer)里...

    2018-02-01
  • 【探索Facebook】Instant Articles 新方法来创建快速、互动、自动播放视频的文章

    文章前面就是演示视频,建议先看视频哦,流量党请找个WIFI,土豪就当我没说~! 我们很高兴地介绍即时文章Instant Articles,快速,互动体验阅读的文章在新闻内容。 使用在Facebook应用程序加载的照片和视频很快相同…

    2016-01-16
  • Axure教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 产品插画设计中,都有哪些比喻技巧?

    Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。
    本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。

    2017-05-14
  • 【交互】浅析交互设计

    点击上方"人人都是产品经理"可以订阅哦由于在工作中会经常探讨交互该怎么做以及如何做出高效的交互,今天就整理下自己的思路,和大家一起探讨下交互其实分为两种:一种是酷炫的动效,一种是隐形的操作反…

    2017-08-04
  • 交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 做完了产品分析和运营分析,如何做一份视觉竞品分析?

    做好一份竞品分析、输出优秀的设计观点,可能是衡量一个团队专业与否的第一步。

    2017-05-18
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • 抛砖引玉——VR应用UI设计心得

    “2016是VR元年”,这一观点早已在计算机互联网行业中流行开来,与VR相关的各种分析研究也是层出不穷,包括盈利模式、发展预测、平台构建等。而随着Google Cardboard等技术逐渐普及,VR使用成本也在不断降低。因此在未来,VR技术对于日常生活的影响,也将变得非常令人期待。目前很多VR应用不在以PC端为主要载体,而是将平台选定为保有量大、技术成熟的手机作为硬件平台。而UI作为应用中一个重要组成部分,其对于用户体验和产品推广的重要性可想而知。笔者想借此机会简单分享一下个人对于VR应用UI设计的心得和体会。(注:笔者在下文中所指的VR模式指用户已经带上VR体验设备,双眼通过分屏已经进入沉浸式体验情况)

    2017-05-28