顶级UI作品集创建指南|平面|教程|溪云秋雨 - 翻译文章

顶级UI作品集创建指南

5年前Publish

40437

269

创业顶级UI作品集实操指南和技巧分享

作为UI设计师，我们的作品集和简历需要定期更新，在与朋友交流中我发现不同背景的设计师对于如何创建自己的简历和作品集有很多不同的认知。偶然在medium上看到这篇文章，作者对于作品集的创建写的清晰且具体，因此翻译到这里希望能够帮助到更多新入行的童鞋，也同时帮助我这样的有一定从业经验的人来回顾和优化自己的作品集。

初次翻译，如果有问题，请随时联系我：D，感激不尽

顶级UI作品集创建指南

文章来自：TopTal（https://www.toptal.com）和UX Plantet（https://uxplanet.org）

感谢Nick Babich的翻译授权

编者按：每个设计作品集都像是设计师对未来的雇主、顾客和同行，关于自身技能和优势的介绍和呈现。它既展现了设计师过去的经历，也展示了他未来发展的方向。

创建作品集时有几件事情是需要牢记在心的，这篇文章就是关于作品集设计的技巧指南。

开始之前

创意产业的专业人士需要用作品集展示他们的技能，以吸引顾客和同行。很久以前采用精彩的印刷品作品集。然而，不管你怎么看，随着时代的变迁，设计师已经不再仅仅是原来意义上的设计师。我们现在已经具备覆盖设计行业不同领域的不同专长。在你制作自己的简历前，定义你自己的专长是非常重要的。

今天，我们将涵盖所有创建精彩用户界面作品集的基本点，如果这恰好是你的专业，请继续阅读。

质量和数量

要重视作品集的创作过程。它跟你从事过的其他重要项目一样重要，要非常严谨地挑选你所要展示的作品或项目。从UI设计师的立场来选择一系列作品，它要能足够证明你是下一个大合同的最佳人选。不要让你未来的客户看到一个没有重点的的，没完没了的作品集。要用最严苛的要求来设计你的作品集，客户只会用你最差的作品来判断你的能力。

选择9个作品去呈现已经绰绰有余了，但是如果对于你作品集中想展示的内容来说这太多了，也没有关系，6个作品也是一个可以接受的数量。

我们都知道，有时候准备作品集的工作显得没完没了是因为作为设计者我们很难客观的选择最好作品。然而，你越早发布，将越快准备好地展现给你的潜在客户。为设计过程的每个步骤设置实际可行的完成时间：从计划开始、到挑选作品、直到最终发布。

目的是什么？

这主要取决于你：专注于游戏的UI设计师，或者专职于设计移动端app的UI设计师？也许两者兼顾，或者做的更多。每种情况都有不同的解决方法，但是以下技巧适用于所有UI案例。

设立基本准则

做点调研向来都是有利无弊的，并且看看其他作品集也十分有帮助，你要避免雷同现有的设计趋势，这样你的作品集就不会跟其他人的看起来一样了。并且你能发现那些值得研究的细节，并应用在自己的作品展示里。当你准备从头开始构建一些东西的时候，灵感是你最好的朋友。

Awwwards（http://www.awwwards.com）是寻找网页版本作品集的一个非常好的地方，有些设计师还在他们dribbble（https://dribbble.com）或者behance（https://www.behance.net）的作品集里提供超出你想象的比网页版作品集更多的作品。

图片授权：behance

当然，在Toptal（https://www.toptal.com）上向你的同事学习也是一个好主意，Toptal上有非常好的作品集可以供你查找。

3大支柱

整个过程要牢记三点：1.视觉效果的重要性。2.固定的流程。3.用叙述故事的方法来展示结果。根据你的要求做到尽可能地具体，同时在这三者间保持平衡。

虽然注重细节很重要，并且大部分UI设计师也是如此。对你的作品来说“不仅仅只是好看”非常重要。UI设计师大部分时候都和UX设计师一起工作来设计出色的产品，或者有的设计师同时从事UX和UI设计。关键在每个页面上，你都要通过讲故事来表达你设计的精髓，这样能避免常说的“Dribbblisation of Design”（设计追波风），使你脱颖而出。

布局和样式

目前比较推荐的作品集版面是这样的：

水平A4，宽度取决于你要显示的内容的数量
尺寸上宽度大于高度，并且不小于1280*800像素

注意：

目前大部分设备都支持显示retina图片，这样能让你的图片看起来更加清晰好看。记得要以原尺寸的2倍大上传图片并以@2x为后缀。

图片授权：uxdesignforengineers

当考虑布局时，你应该针对产品进行设计，记住你大部分不同项目都应该具有独特的风格使他们是独一无二的：这将帮助你进行之前提到过的故事描述。从开始到结束，或倒叙：只要你能保证每页的连贯性就有无数种设计的可能。

要为每个项目想出一个最为吸引人的封面。无论是彩色背景上的产品logo，或者一个漂亮的模型上的移动app产品，或者视频游戏的关闭界面，只要你将视觉的干扰元素保持在最少，这些方案都是可行的。客户看你的作品集时每页只有很少几分钟，所以简洁有条理地展示和叙述尽可能多的内容是很重要的。

不要害怕把两个或者三个关键内容放在一起作为封面，因为这样可以展示出你的产品灵活多变，并且也可以提前告诉客户在他们将从一个项目中获得多少内容。

请做到一丝不苟

我们靠视觉生存和呼吸，以至于我们不能容忍模型上像素级的圆角、不同屏幕尺寸或者相同产品对齐上的细微差异。

请记住：

你的模型或屏幕的对齐，从一个页面到另一个页面之间不要产生细微的跳跃。要在y轴和x轴上确认对齐。
用矢量图工作。如果你使用sketch，使用可以缩放并永远不会看起来像素化的模型是非常方便的。用缩放选项代替手动缩放你的模型，因为手动缩放会变形。反之，如果你在用Photoshop，要缩放你的模型并用Command+Z（或者PC机的Control+Z）返回并再次缩放，这样每次你缩放你的图片它都会得到更多的像素。
每次你完成基本的对齐的时候，都用放大镜放大检查细节。这将帮助你处理掉轻微超出位置的线或者形状。
如果你为手机或者平板电脑使用模版，有两种方式处理顶部工具栏：如果你希望保留它，确保电池显示在100%电量并且运营商部分（carrier）显示一个真实的公司名称，如AT&T，T-Mobile，Virgin等等，因为它使你的产品有真实的感觉。如果你想去掉顶部工具栏，对于手机产品通常来说，不用手机模型，而降产品展示在一个2像素半径的圆角矩形里效果会比较好。
背景应该总能突出你要展示的产品，并且不会将转移客户的注意力转移到产品以外。有两种方法可以达到这个目的：（1）使用一个能和你的产品产生和谐对比的单色背景（记住同时考虑原型的颜色和你设计的配色方案）或者（2）采用一种模式或者图片作为背景但是在他的透明度上做创意，可以在上面增加一层有一定透明度的颜色图层。重申一次，只要背景总是处于次重要的位置，这些处理的方法都是可以扩展的。
对于网页或者登录页面，你可以直接把它们分成三页并让每部分中间有一个平滑的过度。如果比较小或者被置于一个单独页面会使得你的客户错失关键点和你的产品区别于其他产品的细节。

过程

不论你是做UX设计还是UI设计还是设计中完全不同的领域：体现你的工作过程都是非常重要的。这说明你的设计作品不是奇迹般的出现的。不要害羞去放进粗略的草图、优质的传统工具如纸和铅笔、在你为产品简历出色UI的思维过程中曾经帮助到你的拼贴画、甚至是摄影作品。

根据你想怎样展开你的作品集，这里有几种不同的方式和技术来展示这些草图：

最简单的方法是扫描你的草图，善用Photoshop去控制图片的曲线、对比度和亮度，并用正确的尺寸显示这些图片（不要太大也不要太小）。根据你想用这些草图展现的内容，他们可以分布在同一页的各处，也可以更有整理性地选择出最出彩的几张。
如果你从特定的物品上获取了灵感，从上方90°的角度拍摄照片能够显示出物品真实的尺寸，这是最近非常有用的一个趋势（小心不要在物品上留下投影！）。如果你的物品在那个角度看起来不是那么好，请采用非传统的角度，比如对角线的角度能让照片看起来更有动感。
其他关于拍照的技巧：（1）确保照片不是模糊的且没有其他物品干扰或扰乱到照片，并且（2）考虑构图上合理的剪裁一些物品，并把他们放在单色背景前面，或者也可以创建一个场景提供拍摄的情境。针对这两种情况，都要检查对比度、亮度和曲线，因为我们不会希望照片太亮或者太暗。
拼贴画、绘画或者用不同物品如刷子、笔、水溶彩色铅笔在纸上进行的尝试，也可以被扫描或者拍照。这主要取决于对每个作品来说展示什么是比较重要的，以及在我们的客户看这些页面时什么样的体验更重要。

讲故事

你工作的流程和你展现它的方式取决于你做的是什么类型的项目。如果你专注于icon的设计，则推荐展示粗略的草图和一步步直到最后形式的设计过程。如果你聚焦在移动端产品的设计，用互相连接的页面来展示一个功能也能叙述一个故事，并且这些界面最初的草图也总是有帮助的。