作为UX设计师应当知道的22件事

这篇大实话文章,我非常喜欢,因为几乎大部分观点和内容在我带新人,或是讲课过程中,都有提及过。与其说这是一篇写给新设计师的职场准则,我更愿意说是写个所有设计师的,“有则改之,无则加勉”,谁还怕自己变得更完善呢?所以这篇不是简单的翻译,我在文中也加入我的想法,有些案例会改成更接地气儿的。要感谢作者 Alana,组织的这么井井有条,我得以偷懒,来借花献佛。

“无论你是刚完成一项短期课程,或是刚毕业,当你选择踏入职场这一刻起,你要学的东西就比你想象的要多100倍。当然,你会学到很多技术,得到很多实践,但你会发现,软技能也同样有价值。你会学着更多的了解你自己、其他人,以及如果处理某些情况(比如办公室政治)”

以下把重点整理了一下,希望能够帮助到新设计师了解这个行业的门道,同时也帮助更多设计师实现自我超越。在新年伊始讲这么个话题,实在是合适不过了。

这22件事:

设计、工作之道

  1. 别害怕说:是
  2. 不要一上来就画图
  3. 取得反馈——经常且尽早
  4. 时刻准备接受他人的评论
  5. 别害怕说:不
  6. 有些事总是在最后一分钟出现——做好随机应变的准备
  7. 坚定立场,因为可能是一些关键性的因素被忽视了
  8. 尽早与工程师合作,以发现方案边界
  9. 先想好、计划好,再去做原型测试
  10. 需求方跟你说的可能是解决方案,而非问题本身

团队和文化的重要性

  1. 跳槽别光图公司名气,更要看它的团队
  2. 寻求帮助没问题,但怎么着也得自己先尝试解决一下吧
  3. 找到一个适合用来问“愚蠢”问题的人
  4. 组织团队社交活动,可劲儿嗨

懂得合作

  1. 有职场的地方,就一定有混蛋
  2. 如果工程师或需求方问了一个设计问题,不确定时尽量避免回答“我不知道”
  3. 要一直去探寻需求方的反馈,即使你认为这么做没啥用
  4. 人不可能一直赢,所以请选择好你的战场
  5. 找一些工程师,问同样的问题

坚持学习

  1. 规划一个“鸡血时刻”,让自己专注于工作以外的事情
  2. 学习了解后端代码是如何工作的
  3. 努力让自己的表达更简明

更多

别直接拿别人的设计套你的问题

Question everything

Don’t get me wrong: design patterns and best practices are still your friends. Keep in mind though that apps and users are different: one solution might work for well in an app and fail in yours. It’s not a one-size-fits-all thing. Plus, you never know why an app was designed in a certain way.

Do your own thinking. Do your own design. Do your own research.

Measure, test, validate — and don’t be afraid to unfollow the guidelines if that makes more sense.

这段文字是一篇叫《Misused mobile UX patterns》的结语,也说出了很多我的心里话。我们看到的就一定是好的吗?设计师应该保持质疑、质疑一切,保持警惕,才能找到更适合自己产品的解决方案。无关流行,适合才好。

阅读下面整篇文章:

Misused mobile UX patterns

做有章可循的设计

最近几个大公司相继换 Logo 了。而吸引我的除了 Logo 本身,更多的是它们背后的故事。讲故事是一种很好的传达方式,代入感强,能在梳理思考过程的同时,也让我们更容易理解新设计的由来。刚巧最近我们也在做一些新的设计尝试,一个中心思想就是“让设计有章可循”,有了主线索,再做其他的延展就会自然而然,设计师好下手,做出来的东西用户也看得明白,不用每次都解释新概念。

我把近期有代表性的“故事”整理在一起,作为学习资料,我的想法随后再逐渐展开。

Google

google

能够适配更多终端是此次改变设计元素的重要思想之一,从原来有衬线的印刷体,变得圆润,同时也显得更年轻了一些。个人认为 Dots 的设计最为巧妙,很好的利用了那几个圆点的变化,来表达各种交互状态。

查看原文:Evolving the Google Identity


Medium

1-L4saF6QgK44lr8YR_l4c0A

我挺喜欢这组发散的。设计探索就是这样,得放的开,有理由的放。哪怕没有最终被用到 Logo 上,也产生出许多有关联的想法,它们用于广告、海报、运营、周边等等,从这个过程里我们也看到了很多可能。

查看原文:The Story Behind Medium’s New Logo


500px

500px

当下最高质量的图片社区非 500px 莫属,最近也更新了 Logotype 和 Mark 。通过对 500px 文字的变形,他们把它变成了取景器里的对焦过程。一切跟摄影相关,这就是主线。

查看原文:Meet the new 500px


Starbucks

starbucks-iconography

这套专为 Android 设计的 icon 利用了原生素材,在此基础上融入星巴克最有标识性的元素来贯穿:星星和围裙,同时App的用色也以暖黑和暖灰来烘托氛围。

查看原文:Starbucks Android Material Design (这篇是讲设计方法的)


从现在开始,管理你的设计,别让看似亮点繁多的创意和功能,毁了你的产品设计。让设计有章可循,对设计师是好事,对用户而言更是。

Quartz Composer快速上手指南

去年给Team做了一次名为《Animation Prototyping – 让设计动起来》的分享,讲解如何快速上手 QC 的方法,结果一周内就有同学可以做出成品了。以下是讲稿的核心部分,捞出来串讲一下:

基础工具:Quartz Composer + Origami

1. 先熟悉下QC工作区的面板。如下图摆放,方便操作。

Animation-Prototyping-1

2. QC基本工作原理。摸清它的逻辑,之后就好办了。(这是用 Keynote 画的模型示意图,用来表示部件之间的关系。)在“Parent panel”里建这三个部件,构建基础手机模型。

Animation-Prototyping-2

3. 所有动画,都在“Render in image”中完成。双击它,进入下一层编辑界面。首先创建“Clear”部件,非常重要,它的作用是清除缓存,避免显示出错。接下来动画部件的摆放,如图示即可,遵循这个逻辑构建交互动画。

Animation-Prototyping-3

好了,其余就看你具体要做什么交互,Origami 会帮助你,它提供了很多现成的部件。用实际的例子来演示一下上面这个公式:

Animation-Prototyping-6

Animation-Prototyping-7

多多练习,体会一下,很快就能掌握 QC 组织和“编程”的诀窍,开始实战。


另外,在寻找动态表现原型方法时,顺路还研究了一下 Framer.js,最后觉得还是 QC 更容易上手,适合设计师使用。针对 QC 和 Framer.js 我做了一个简单对比:

Animation-Prototyping-4

Animation-Prototyping-5

如果想了解 QC 是什么和前期准备工作,可以参看我上一篇介绍:Quartz Composer入门