header_v1.7.40

跟Facebook设计师学—如何拯救平庸的视觉设计

144天前发布

翻译文章 / UI / 观点
小浣熊干脆猫 翻译,如需商业用途或转载请与小浣熊干脆猫联系,谢谢配合。

这是前年翻译的一篇文章,时间比较早,但是其中评审的方法盒态度在现在看来还是很有指导意义。

“我该怎么做才能提高视觉设计水平呢?”

无论是在旧金山艺术大学为学生辅导产品设计,还是在AIGA(美国平面设计协会)做作品集review,或是在Facebook培训实习生时,都有人向我提出过这个问题。
从学生成长为一位专业的设计师,总需要一个过程。对于大多数学生而言,这个过程是充满了未知的恐惧、兴奋和好奇,同时也伴随着一大堆问号:
“等我毕业后能干什么?”
“社会上会有什么样的设计类工作?”
“我适合做什么?”
“要是找不到工作怎么办?”
“如果没有公司招设计师怎么办?”
“我现在该如何准备?”

. . .

最近,Facebook主办了一场设计互评,联系到了来自康奈尔大学的学生Jon Lee,来讨论于他设计的Nearspace——一款用于查找附近可办公区域的App。在讨论中,我发现Jon有很棒的自我认知。他从潜在雇主的反馈中意识到,自己在视觉设计方面还有很大的提升空间。就像大多数即将踏入职场的学生一样,Jon很想知道他目前的水平是否能胜任设计师一职,他想知道如何做得更好。
作为一个强有力的产品设计师,良好的视觉设计感非常重要,尤其是在Facebook。很高兴,Jon对这方面的技能感兴趣。我想,可以通过问答的方式帮他梳理一个知识框架,希望能帮助他提升视觉设计水平,而不仅仅是优化这一个项目。
下面我们来看看Jon的作品。这一次,是他第一次开始关注界面的视觉设计。

在Facebook,我们一般认为视觉设计是一种技能和执行力。因为提问能够更好的了解设计者的设计意图,所以我用提问的方式来评估Jon现在的作品,并鼓励他去做更精致的设计。


你是如何考虑文本样式优先级的?


·你检查过作品中的文本样式吗?我注意到有两种拼写形式(首字母大写和全大写),三种以上字体大小,两种字体颜色,居中和向左对齐两种对齐方式。

·标题应该用什么文本样式呢?按钮呢?正文应该使用什么样式呢?属性描述呢?

·你使用了什么图形样式?

·按钮上的文字有两种大小,有两种拼写类型,按钮有两种高度和三种颜色,其中有些还带有图标。

·有两种列表样式。一种比较类似于发现列表(有带有公司名称的照片,分类和星级评分),另一种则类似于线框图(Recent Post那里)。

·按钮和列表有什么不同之处?在个人主页中,卡片、按钮和列表都使用了同样的白色背景加灰色线框,是不是应该有所区别?


这些样式与现有的常用设计样式相比怎么样呢?

·有哪些功能开关是需要默认打开的呢?修改时,“取消”和“应用”按钮有必要同时存在吗?

·“返回”和“取消”是同一个意思吗?是不是右上角一个“X”就够了?

·有一个清除所有筛选条件的“重置”按钮。在这个情况下,“重置”按钮有必要吗?用“应用”代替会不会更合适呢?

·底部导航是否需要固定?

·在垂直视图中是否有水平滚动视图?这样的设计好用吗?

界面中间距是如何规定的?

·在首页和个人主页中,左右边距是非常小的,但是在筛选页面,边距又很大了。

·在底部导航中,Neardy的字母“y”几乎挨着屏幕边缘了。

·使用了什么样的栅格系统?


图标表意清晰吗?

·界面中有单个座位的图标,还有三个一组的和六个一组的。这表现的是具体的座位数量吗?还是只表现大致数量,或是表现数量范围?有没有更好的表现方式呢?是不是表达类似“适合群体办公”的意思?有没有别的方式表现?

·为什么无电源没有相应的图标?如果一些元素不是很重要,一定要将它们的不重要性表现出来吗?为什么不只显示可选选项?

·派的图标仅仅表达“出售派”的意思吗?能不能表达“出售点心”的意思?还是表达“出售食物”的意思?杯子图标代表了饮品吗?可不可以认为出售食物的商家同样出售饮料?有更好的分类方式吗?


设计的一致性是如何体现的?


·筛选界面中,距离筛选使用了下拉菜单的样式,而其他条件的筛选则使用了按钮。

·一些按钮带有图标,而一些按钮仅有文字。

·仅有一个图标使用了的透视的表现方式,其余的则不是。wifi图标的线条最粗,插座图标的线条最细。一些图标是像素化的,另一些又不是。一些图标是黑色的,另一些是灰色的。


·大部分的卡片和按钮都用了相同的样式:同样的圆角半径,外描边,填充色和图案样式。这样会不会过于一致?


所有的元素都有出现的必要吗?


·在搜索区域上方有分割线,在每个可筛选项下面也有分割线。

·有一个按钮使用了绿色。

·在导航栏中同时存在图标和文字。有必要两个都出现吗?


界面的配色方案是如何定义的?

·这套界面配色方案不明确。大体上是使用了暖色调,但是却有一个亮绿色的按钮。在界面中哪里使用什么颜色,有准则吗?


界面中的拼写、语法和标点符号使用正确吗?字句有反复斟酌过吗?

·我能理解底部导航的“附近”和“个人主页”;但是“添加”是什么意思?“添加”什么?

·“Avilability”拼写错误

·筛选界面中,有必要加入“可用”这两个字吗?

·用户在这个界面的浏览顺序是怎么样的(视觉方面或文字方面)?这个界面的标题是“筛选”,每一段的标题分别是“距离”、“座位可用情况”、“wifi可用情况”、“电源可用情况”和“餐饮可用情况”。你会如何向朋友介绍这个界面的功能?这些信息层级合理吗?标题命名准确吗?


在其它平台的适配情况如何?

·如果此app需要为Android设备或者电脑做适配,你还会做上述这些决定吗?会有哪些不一样的视觉表现呢?

. . .


如何提高视觉设计技能?
回答上述问题是优化视觉设计的良好开端。做一个好的设计师,尤其是好的视觉设计师,需要用心。所以我们应该在做设计时就考虑上述问题,并给予答案,而不是仅在做完设计后,被人问起来才开始考虑。
在有了答案后,接下来要做的,是确保我们的想法建立在坚实的设计原则上和对细节的研究上,当然,有时候也取决于个人的偏好审美。这就比较难了,因为不是所有的设计师都天生有良好的设计感并能提出有理有据的优化建议。但这并不会影响设计师的进步。能够意识到自己作品的不足,就有进步的空间。
Ira Glass对于此有非常精彩的见解:


没有人告诉过初学者——像我们这些搞创意的,进入这个行业是因为我们都是有品位的人。我真希望当初我刚入行的时候就有人能告诉我。话虽如此,我们的实际水平和品位之间似乎有一个鸿沟。在初入行的几年,我们做出来的作品往往不如人意,对吧?不是很理想,是非常不理想。我们很努力地去做了,我们下定决心把事情做好,但结果还是不理想。而我们的品位还是很好的,这也是我们当初选择搞创意工作的原因。我们的品位好到足以批判自己的作品,你明白我在说什么吧?


如果你的审美告诉自己,还有提升的空间。你就能够提升设计水平。那么如何提升呢?
我们通过看别人的作品,形成了基本的审美,并通过学习设计原则巩固审美观
我们研究已有的设计,比如,material design和人机界面指南。
我们付诸实践中。
我们浏览不同的网页和App,还有Dribbble上优秀的作品,但我们并不会去原搬照抄,而是思考优秀的作品为何优秀。
思考后,我们再次付诸实践。我们把自己的作品展示给有鉴赏能力的人,并听取他们的疑问。(这正是Jon在Facebook设计环评中所作的事。)我们透过这些问题思考设计的初衷,找寻答案。
然后我们重新审视上述文章中的那些问题。

. . .

其实,我可以仅给出一些评价,比如“这个设计风格烂大街了。”、“那个绿色的按钮跟界面格格不入。”或者我也可以给出一些建议,比如“筛选界面中的类别和按钮都要左对齐”、“按钮的圆角要小一点”、“主题色要选一个更明亮的颜色。”但是如果想在视觉设计方面有提高,目光不应该局限在打磨一个项目上。

反馈和指导可以说是非常相似的;提升专业水平的最好方式是提问和指导,而非一味的遵循规则。进步来源于实践。坚持不懈的执行力能够让学生得到第一份设计职位。之后,自我认知和实践进步才能带来突破性的成长。


2

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功