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

原创 Alan Lee 设计新知

温馨提示

微信已开通公众号置顶功能-点击右上角置顶设计夹-第一时间收获实战干货！

如何让你的视觉设计能力更上一层楼？有许多人问过我这个问题。我作为旧金山艺术大学的导师，在产品设计方面指导过许多学生，我参与过美国平面设计协会的作品集评审，在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想要做得更好，如果你想做得更好，那就不仅仅是改进一个项目这么简单。