cover_image

墙外干货:如何让你的视觉设计能力更上一层楼?

Alan Lee 设计新知 2016年08月16日 14:58
温馨提示
微信已开通公众号置顶功能-点击右上角置顶设计夹-第一时间收获实战干货!

如何让你的视觉设计能力更上一层楼?有许多人问过我这个问题。我作为旧金山艺术大学的导师,在产品设计方面指导过许多学生,我参与过美国平面设计协会的作品集评审,在Facebook接待实习生等等。

 

从学生的视角到专业的视角之间有一道鸿沟需要跨越。对于大多数人而言,这个过程夹杂着兴奋,好奇与恐惧,伴随着一系列问题。

当我毕业了之后会怎样?

社会上的设计工作是怎样的?

我适合做什么么?

如果我找不到工作怎么办?

我要做些什么才能够准备好?

 

我们最近和一位来自Cornell的学生Jon Lee主办了一次对于Facebook的批评建议活动。在我和他短暂的交流中,Jon的自我意识让我十分欣赏。他非常清楚他自己在视觉设计方面有进步的空间。他从他未来的雇主处获得反馈,并且酒和其他即将踏入职场的学生一样,他很好奇想要成为一名设计师,他的个人技能需要做好怎样的准备。他想要知道怎样才能做得更好。

 

一名可靠的产品设计师需要掌握许多技能,其中视觉设计能力尤为重要,在Facebook更是如此。我很高兴Jon对这此很感兴趣,如果有机会,我会问他一些我同样问过其他学生的问题,并给他一些框架性建议,希望对他有所帮助。

 

我们先来看Jon分享的一些设计,需要注意的是,他还是个初学者。


图片

一个周边环境的App概念设计by Jon Lee

 

在Facebook,我们通常称视觉设计为手艺与执行。为了评估Jon作品的水平,并且鼓励他朝着大师继续前行,我需要提出一些问题。提问应该在评价之前,这样可以更好地理解设计者的意图。


第一步:不断向自己提问


你的信息结构是怎样的?

你检查过字体样式吗?我在作品中看到两种样式,标题样式和大写样式,至少三种不同的字号,两种颜色类型,居中对齐和左对齐也同时出现。

 

哪种样式属于顶部?哪种属于按钮?正文部分使用什么样式?数据部分使用什么样式?

 

你在使用什么样式?

我看到有两种大小的按钮样式,两种高亮的样式,两种边框,三种颜色,除了带文字的按钮,还有使用图标的按钮。

 图片


 

列表有两种不同的样式。其一使用了图片,商店名称,商店分类和星级,另一种看起来像线框图。

 

按钮和列表的区别是什么?在个人资料页面,卡片,按钮和列表用了相同的白色背景和灰色轮廓。他们是否应该有所区别?

 

与现有的模式相比较怎么样?

如果选择是切换式的,他们可以默认选择吗?取消和应用是真的有必要的吗?

 

返回和取消是否相同?右上角一个“X”是否能够满足需要?

 

我看到有一个重新设定按钮没有任何筛选,在这种状态下是必要的吗?是否可以用“应用”取代“重设”?

 

底部菜单栏应该在这种情况下继续保留在底部吗?

 

其他同类型的产品有平行结构吗?是否有用?

 

图片

 

你的留白和填充规则是什么?

在“附近”和“个人信息”页留白非常少,而在筛选页留白却很多。

 

底部导航栏“Nearby”的“y”几乎碰到了屏幕的边缘。

 

你的栅格是怎样的?

 

你的图标清晰吗?

有一个单个座位的图标,一个三连座位的图标和一个六连座位的图标。这个是座位的具体数量,还是一个模糊值或者范围?有没有更好的表达方法?是想要表达“适合多人聚会”的意思吗?有没有更好的表达方式?

 

为什么在是否有插座那一栏“不重要”的按钮没有同样使用图标?如果某件事不重要的话,为什么需要指出他不重要呢?为什么一开始没有默认选择的项目呢?

 

派的图标的意思是...派?还是甜点,或者食物?杯子的意思是饮料吗?是不是可以理解成每个吃东西的地方都提供饮料?有没有更好的组合方式?

 

你的设计具有持续性吗?

筛选页里,距离一栏使用的是下拉选择,而其他选项用的是按钮。

 

有些按钮包含图标,有的没有。

 

一个按钮具有透视,其他的没有。Wi-Fi的图标使用了最粗的线条,插座用了最细的。有一些图标是像素化的,另一些不是。一些是黑色的,另一些是灰色的。

 图片


大部分卡片使用了相同的样式:相同的圆角、轮廓、颜色和类型。这些是不是太过于一致了?

 

屏幕上的一些都是必须在那里的吗?

在搜索栏上方有一条分隔线,筛选页每个可选项的标题和按钮之间都有分隔线。

 

有一处地方使用了绿色。

 

导航栏同时使用了文字和图标。两者都是必须的吗?

 

你如何定义你使用的颜色?

你选择的颜色不是很出挑,色调是暖的,除了一个亮绿色的按钮。你是否有如何使用这些颜色的规则?

 

图片

 

你的拼写,语法和标点符号是否正确?时候考虑过正确的文本策略?

我明白底部菜单上“附近(Nearby)”和“个人资料(Profile)”的意思,但是“增加(Add)”是什么意思?增加什么?

 

“Availability”拼写错误。

 

“Availability”一词是必须的吗?

 

页面的阅读流程是怎样的?(是通过文字还是图片?)页面的标题是筛选(Fliter),你选项的标题是:距离(Distance),座位是否可用(SeatingAvailability),Wi-Fi是否可用(Wifi Availability),是否可以外带(Outlet Availability),是否提供食物/饮料(food/BeverageAvailability)。你会怎么向朋友描述这一页可以用来做什么?这些选项的层次结构正确吗?他们的名字都正确吗?


图片

 

如何把它迁移到另一个平台?

如果你为安卓设备或者桌面进行设计,你会如何做出设计决定?你会做哪些不同的调整?

 

接下来怎么做?


回答上面提出的那些问题会是一个极好的开始。成为一名好的设计师——成为一名好的视觉设计师——需要意向性(intentionality)。这意味着你需要在做设计决策时需要有意识地考虑这些问题,而不是在完成设计后其他人问起时才去思考。

 

在你回答了这些问题之后,第二件事是确保这些回答是符合设计准则与研究的,同时,注意细节,然后才是样式和个人偏好。这也许有点困难,不是每个设计师都有这样的敏感度或得到合理的建议。但是没关系,成长的第一步就是意识到你的工作不仅仅是如此。

 

Ira Glass对此有着绝妙的观点:

“没有谁告诉我们谁是初学者—我真心希望有谁能够告诉我—我们都是做创造性工作的。我们进入这行是因为我们具有良好的品味。但这其中是有差距的,在最开始的几年你做的东西并不是那么好的。至少没有那么好。你想要做的很好,但是你做的确实不够。但你的品位——带你进入这行的品位——仍然很重要。现在你的品位已经足够告诉你你做的东西不够好了。你明白我的意思吗?”

 

如果你的品位告诉你自己你有提升的空间,那么你就有提升视觉设计的能力?怎么做呢?

 

观察世界上各种设计,形成什么设计是好的,什么是糟糕的观点。你的观点应该建立在基础的设计原则之上。

1、学习现有的设计体系


例如MaterialDesign和苹果的人机界面指南。

 

2、练习。

 

浏览不同的网站和应用,Dribbble上的优秀设计,不是模仿他们,而是问自己他们为什么要这么设计。自己寻找答案。

 

继续练习。

 

把你的作品给具有鉴赏能力和视觉设计能力的人看,倾听他们对你作品提出的问题。(在Jon的例子中,他就是这么做的。)思考你在做这些设计时背后的思考,并找到你自己的答案。

 

然后,你自己给自己提出问题。

 

最后:反复执行

 我可以和Jon说,你的设计太常见了绿色的那个按钮感觉不太对。我也可以告诉他解决方法,例如把你的筛选分类和按钮左对齐,或者选择一种更亮眼的颜色。但是如果Jon想要做得更好,如果你想做得更好,那就不仅仅是改进一个项目这么简单。

 

反馈和导师是非常相似的,最好的发展往往来自于提问和引导,而非一味灌输。

 

反复执行的技能决定了学生做设计时的第一个角色,并且只要这个角色确定下来了,那他们接下来的成长轨迹就将受到自我意识以及执行过程的引导。


“墙外干货”为设计夹翻译小组为大家搬运、翻译的墙外设计创意类干货文章,这篇文章对你的视觉设计有帮助吗?

点击查看武汉专场活动:


图片

点击查看往期精选文章


图片

图片
图片



图片

“ 连接.共享.进步 ”

-点击以下关键词了解更多设计夹内容-


近期活动:实战计划-“Design+”下的人才养成之道

书籍 | 网站资源  | 实战 |  HBAT |  顶尖博客

色彩 |  UI设计  |  UX设计 |  用户研究  | 全栈设计


添加微信sezign01

申请讲师,备注:讲师,

投稿推荐,备注:投稿


长按二维码关注设计夹

图片

打开阅读原文访问让你丑哭的设计夹网站

更多书籍和软件等各位看官免费下载

微信扫一扫
关注该公众号

继续滑动看下一个
设计新知
向上滑动看下一个