《移动UI设计师的快速成长》微课回顾(上)

上周我上了一次微课,后来很多朋友说希望能够对课程内容进行回顾,为此,我特意将微课内容做一个简单整理,希望对大家有用。

大家好,感谢大家在百忙中来参加本次微课,非常荣幸能在这里跟大家一起探讨下《移动UI设计师的快速成长》这个话题。我先自我介绍一下,我叫黄方闻,现在从事交互设计工作,也是最近上市的《动静之美——Sketch移动UI与交互动效设计详解》一书的作者。

我们本次课程试图解决以下三个问题:

1、入行UI设计的推荐路径;

2、交互动效设计的学习思路;

3、简历和面试技巧分享。

之所以选择跟大家探讨上述话题也是希望大家在听完本次课程后,首先可以对UI设计和动效设计有一个大致的了解,然后能为大家提供一些书写简历以及投递简历的小技巧,帮助大家找到一份不错的工作。

那么我们首先来看第一个问题。

第一个问题是关于入行UI设计的推荐路径,也就是说一个完全零基础的同学,如何快速成长为一名优秀的UI设计师。在回答这个问题之前,我们需要思考以下的四个问题:

1、你是否真正了解什么是UI?

2、作为一名UI设计师应具备哪些技能?

3、设计思维应如何培养?

4、我们对设计工具应有何种态度?

我们先来看第一个问题,什么是UI?我个人对UI有着以下的一句话的定义:用户所见的一切,和用户所预期的一切。

大家知道,UI的英文全称是User Interface,即用户界面,那么什么是用户界面?我们来看以下的几个案例。

这两套界面相信大家都非常熟悉,这是在今年下半年会推出的iOS10系统以及Android N的系统界面,通过对比我们可以发现两个系统在设计语言上的不同。

接下来看这样一组图。

这是四个APP的界面,第一个微信,社交类产品;第二个是蚂蜂窝,旅行类产品;第三个是京东,电商类产品;第四个是53 Paper,艺术类产品。可以看出不同类型的产品设计风格差异非常大,但是仔细看又会有相同逻辑的部分。

接下来看第三张图片。

第三张图是一个虚拟项目的设计图,来自互联网。这有可能是未来UI的发展方向,实际上这张图是一个AR和VR的结合,或者我们称之为是一个MR产品的设计图。

经过以上的可以看到,无论是系统层还是产品应用本身,还是未来的AR或者VR的产品,所有展现在用户面前的界面,都是UI设计师所要设计的。那么我们再回到最开始的那个定义:用户所见的一切,和用户所预期的一切。再细分下来,可以看到,所谓的用户所见的一切,即用户界面,我们应该思考的是我们所设计的界面是否可用、易用和好用;而用户所预期的一切,则是指设计规范层面的,我们所设计出来的界面是否符合用户的预期。

我们所说的用户体验,实际上就是一个匹配用户预期的过程,现阶段我们的设计很幸运的是可控的,我们可以有具体的尺寸,具体的设计规范可供参考,而未来一旦AR或者VR普及,所呈现在用户面前的界面是不可控的,每个人看到的内容不一样,每个人操作不一样导致每个内容的摆放位置和呈现形式也不一样,那这就对我们去把握用户预期有着非常高的要求。

如何更好地匹配预期,我们来看下图。

这是乔布斯在2007年iPhone一代发布会上所讲到的,每个革命性的用户界面都带来了革命性的产品,要理解这句话,先看下图。

这是Windows Mobile的操作界面,这也是一个触屏界面,现在看来我们会可能嘲笑这样的一个界面,但是在iPhone出来前,大家就是用着这样的界面,因为当时是电阻屏的设备,普遍采用的触控笔,所以无论把按钮选项做成多么小,用户总能点击到。

再来看下图。

这是使用了3D touch技术后的iOS系统界面,可以看到该界面是将背景模糊,然后弹出一个菜单,随着3D touch技术的发展,可以看到在今年发布的iOS10系统上,越来越多的情况使用了大量的背景模糊效果,又或者称之为毛玻璃效果。

我们来分析上面两个界面的差异,会发现很多时候界面的设计会受到当前设备的局限,所以说,我认为一个优秀的UI设计师,去充分了解我们所设计产品的界面所运行的硬件设备是非常有必要的,在了解完硬件后,再去熟悉使用在该硬件上的最新的技术,这样能让我们尽可能的利用好这些新技术,设计出超用户预期的界面。

除了硬件外,我们还应该熟知当前平台的手势、用户的操作习惯、该平台的规范等等。

那么呈现在用户面前的界面,是否越好看就越好?扁平化和拟物化到底哪个是趋势哪个更好呢?这也是很多朋友问得比较多的一个问题。

我首先想要说的是拟物化和扁平化的问题,首先大家看下图。

这是iOS6和iOS10的界面,iOS6是最后一代采用拟物化设计的iOS系统。大家知道,iPhone一代是在2007年发布的,发布的时候,iPhone属于一个非常创新的产品,大部分用户根本没见过这个产品,而苹果针对iPhone的目标用户定义为3——80岁的用户,并且要求用户在不看说明书的情况下便知道如何使用——事实上从第一代iPhone开始,就没有提供纸质的说明书,只提供了一个快速上手指南。

要达到这一目标,最好的办法就是让界面尽可能的接近真实物体,比如一个电话,一个时钟,一个指南针,相机、地图等等,这样用户看到这个图标便知道这里是与什么相关的功能。在iOS6以前的界面,采用滑动锁屏,用户拖动那个扭从左到右,模拟的非常真实,用户也不会疑惑。所以说拟物化是具有非常优秀的教育和引导新用户的作用的,越与现实生活接近,则越能降低新用户的学习成本。

但是经过6年的发展,大部分用户对iPhone已经非常熟悉,这时候拟物化的一些局限性也凸显出来——比如滑动解锁,只能拖动那个钮进行滑动,不能全屏滑动——因为要全屏滑动需要在全部屏幕上做满滑动的钮,这样显然不现实;另外还有比如快捷工具,如现在iOS系统从下往上拉出来的工具界面,在拟物化的时候,因为现实生活中没有这样的载体,所以也不好设计。这时候,苹果将其做成扁平化,可以全屏滑动解锁了,可以做出工具栏了。

这时候无论你设计多么简约,用户也不会困扰,因为大家对于这样的体系已经足够熟悉——这个是拟物化转为扁平的一个先决条件。

了解完这个我们再来看是否一个界面设计的越好看越好。其实唯一的答案是,对于UI设计来说,如果只有唯一的评判标准,一定不是好看,而应该是好用。在拟物化时代,你设计的界面越真实,用户学习成本越低,这样的界面越好;而在扁平化时代,强调内容为王,如果你设计的界面已经干扰到用户对内容本身的获取,这样的界面便是失败的。我们需要了解的是,所有的UI设计,应该都是为了更好的用户体验去服务的。

那么对于刚入行的朋友来说,如何快速的匹配用户预期,如何保证设计出来的东西至少是可用的,这时候最好的办法是对设计规范有所了解。

我们知道对于移动UI来说,有两份设计规范是必须要了解的——《iOS人机交互指南》和《Material Design设计规范》,很多时候我们说到设计规范就是简单元素的尺寸、位置这些内容,但是实际上我们来看下图:

这是iOS最新的设计规范,可以看到在该规范中,详细介绍了设计原则、iOS10的新技术、界面元素、交互、特征等等内容,这些庞大知识的整体才构成一个完整的设计规范,阅读完这些内容,大家才能不仅明白要怎么做,更能理解为什么要这么做。

以上的两份设计规范因为时间问题,在此不做展开说明,为了方便大家阅读,我在网上为大家找了两份中文设计规范,大家可以自行下载阅读。链接:http://pan.baidu.com/s/1qYGOD7Q密码: x8q8。

再来看第二个问题,作为一名UI设计师应具备哪些技能?我一句话概括是,设计能力是基础,但不是唯一。

要理解这句话,首先需要明白的是,UI设计是一个理性和感性的结合,作为一名UI设计师,设计能力是非常重要的,我们需要理解,扁平化设计、极简设计一定不等于简单设计,相反的其实对设计能力是有着非常高要求的,对于UI设计师来说,好的审美意识、优秀的设计能力,认真的设计态度都是非常重要的,但是除了这些之外,还应该具备对用户心理的预期能力、目标用户分析能力、全局观、敏捷设计能力。

上图是Dribbble和Behance,相信大家都非常熟悉,但是如果大家仔细去分析两个网站的不同,会发现Dribbble上限制了一个作品的尺寸,而Behance上经常可以看到很多完整的作品。

当我们寻求创意,想要学习优秀的设计的时候,大多数情况下我们会优先考虑Dribbble,因为上面太多大神,我们可以在上面观赏到非常非常多优秀的视觉设计作品,但是大家是否知道Dribbble的定位,是一个设计师的创意分享网站,我们知道设计师的思维经常是天马行空的,而在日常工作中,我们经常会优先考虑产品是否能落地的问题,这个产品是否能提供好的用户体验的问题,这时候视觉就不再先行了。

一个很常见的例子:菜单的选择。Material Design推出后,吸引了大量的设计师,我相信很多人都会非常喜欢侧滑菜单(抽屉菜单),因为会让界面显得特别的优雅美观,但是有数据表明,侧滑菜单执行效率低于底部的Tab菜单。可能我们在做作品集做一个视觉作品时,会选择侧滑菜单,但是真正落地时,又会回到底部Tab菜单。

所以很多情况下,光有设计能力是不够的,视觉不等于好的用户体验,但是好的用户体验一定具备好的视觉效果。另外UI设计师的全局观很重要,一套界面下来往往有几十个甚至上百个,是否有一套成体系的设计思路,让所有的界面保持视觉一致,相同元素功能一致。敏捷设计能力同样重要,现在互联网竞争越来越积累,唯快不破,对开发速度的要求越来越高,能否跟得上产品迭代进度也是非常重要的,所以Sketch这类能提高设计效率的优秀软件也越来越受到欢迎和重视。

再来看第三个问题,设计思维应如何培养?

没有任何捷径,但需要找到最佳路径。

成为一名优秀的UI设计师是没有捷径可走的,但是需要找到一条最佳的路径。所谓的没有捷径,是UI设计水平的提升和其他设计水平提升一样,需要尽可能多的看优秀作品,尽可能多的临摹优秀作品,尽可能多的进行思考,从而转化为自己的东西。但是UI设计不同于其他设计的是,UI设计服务的对象是用户,是大众用户,可能插画师有自己的风格是件非常好的事情,可能摄影师有自己的风格是非常棒的事情,但是UI设计师有自己的风格不一定是好事情,这句话的意思就是说,我们去临摹去看的时候,不要凭自己的喜好进行欣赏,而是要从客观的角度进行分析和思考,所谓的客观的角度,是去思考市面上那些有巨大用户的,成功的产品的界面设计,而非全部是小众的几乎没有用户的产品,注意是说的非全部,就是说不是完全不行,但是需要均衡一下。

到了第四个问题就非常好解决了,我们对设计工具应持有何种态度?

我的观点始终是,设计工具的选择,是最后,而非最初。

我经常被问得最多的问题就是,我应该从什么软件开始学习?PS?Sketch?实际上,所有的软件本质上都是一个工具,一个优秀的画家给他最烂的笔,也会比完全不会画画的人画得好太多,同样我们即使精通了所有的软件,不具备UI设计思维,不知道我们要做什么,最后也什么都做不出来。但是当我们知道要做什么的时候,带着目标性去寻找工具,则自然会明白自己应如何选择。

加入你要处理位图,PS是最好的选择,但是如果你是要做UI界面,Sketch会能给你更多更好的帮助。我不建议大家面对一个软件就抱着从一而终的想法,我们应尽可能多的了解各个软件的优势和不足,再针对实际情况选择最适合自己的软件。

但是需要注意的是,可能不同软件都能实现相同的效果,如下图所示。

对于这样的一个界面,我们在PS中的设计思路和在Sketch中的设计思路应该是不同的,在Sketch中绘制这样的一个图表可能半分钟就绘制完成了,但是如果在Sketch中采用和PS相同的设计思路进行设计,可能花的时间不比PS少,要达到不同软件有不同设计思路,要求我们对该软件有非常深入的了解,在我的新书中有为大家总结Sketch非常多的小技巧,希望能给大家耳目一新的感觉,也能为大家节省不少时间。

本次微课的前半部分内容就是这些,后面的内容会在下一篇中为大家整理出来,最后向大家介绍下我的新书:《动静之美——Sketch移动UI与交互动效设计详解》,这是一本UI与动效设计理论知识和软件实例操作相结合的教程,书中按照实际工作流程,介绍了移动UI的原型、界面、图标和动效的设计,超详细的讲解了Sketch、Keynote、Principle和Pixate四大软件的使用,并随书附赠近600分钟教学视频。

本书现已在当当、京东、亚马逊和天猫等各大平台全面上市,欢迎选购,谢谢支持。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容