改进你的作品集：我在审核作品集网站时发现的常见问题

这篇文章最初是为推特创作的。如果你喜欢这篇文章，你可能也会喜欢我的其他文章，所以不妨在推特上关注我。

我利用这个周末时间审阅了各位开发者的作品集，他们的能力水平各不相同。

Dan Spradling 🚀 UI 和 JavaScript 开发

@dan_spratling

我的作品集网站收到了很多好评，

非常感谢！💕

今天，我也来回馈大家。

我会快速点评一下你的网站，并在推特上回复一些改进建议。

请在下方分享你的网站👇

2020年6月27日 下午4:01

这次旅行非常有趣，我看到了很多很棒的网站。可惜的是，我没能全部参观，所以我整理了一份我发现的问题清单。

Dan Spradling 🚀 UI 和 JavaScript 开发

@dan_spratling

这个周末我帮很多不同技能水平的人审核作品集。我

发现很多小问题都很容易解决，而且出现频率很高。

为了帮助大家解决这些问题，我总结了以下最常见的错误以及解决方法

。🧵👇

2020年6月29日上午10:05

这些大多是涉及广泛主题的小问题，改进起来并不需要很长时间，但却能让你的网站更加完善，从而在众多网站中脱颖而出。

这是大多数人需要解决的问题。

无障碍（a11y）

<按钮>和<a>

<buttons>标签<a>不可互换。

<a>标签是指向页面、文档或页面内位置的链接。

<buttons>是页面内的交互元素。

<a>通常情况下，如果你要访问某个 URL，你会使用 <a> 标签；而<button>对于交互式元素，例如表单提交、轮播箭头或标签标题，你会使用 <a>标签。

这种混淆源于类名.button或.btn。它通常用来表示看起来像物理按钮的东西。

使用该类.button并不意味着该元素也应该是<button>。

语义化 HTML

如果你还在用这种方式<div>来代表一切，那就停止吧。

有些元素能更好地表达你的意图。

<nav></nav>
<main></main>
<aside></aside>
<article></article>

屏幕阅读器会在您使用这些功能时播报内容类型。对于某些功能，例如文本框<button>，它们已经预先配置了您可能需要的所有交互状态。

它还有助于你浏览代码，因为这些名称比 10 个嵌套的 div 要清晰得多。

概要：无；

点击交互元素时，会出现一个边框。这个边框很大，呈蓝色（在 Chromium 浏览器中），与您的设计风格不符。

这也非常重要。

不用鼠标你能操控屏幕吗？

仅使用键盘的用户会使用轮廓线来显示当前焦点所在的元素。您可以根据自己的设计进行更改，但如果您完全移除轮廓线，则实际上相当于禁用了鼠标。

别这么做。

试着用键盘浏览任何网站。不要碰鼠标。你就会明白大纲有多重要了。

色彩对比

无论你的网站采用浅色主题还是深色主题，或者使用了多种颜色，都要确保所有内容都清晰易读。

颜色对比度非常重要，因为色盲是最常见的残疾之一。

Chrome 和 Firefox 的检查器中都提供了颜色对比度检查工具。请使用它们。确保获得 AAA 评级。

内容与文案

联系我们

不要低估联系表格的作用。

它快捷方便，用户无需离开您的网站，也不会出错。

它总是胜过其他所有接触方式。

请确保使用联系表格作为主要沟通方式。

避免垃圾邮件发送者

你会更加谨慎地选择使用哪些其他联系方式。

电子邮件地址即可。

但对于个人网站来说，你肯定不想添加你的手机号码或家庭住址。

不要让垃圾邮件发送者或恶意人员轻易获取您的个人信息。

如果你打算透露这些信息，请确保你已先通过其他方式建立了联系。

别再藏着掖着你的项目了

我在查看作品集网站时，发现很多情况下，在查看网站的作品集部分时，图片要么被覆盖层遮挡，要么根本没有图片。

你藏着我最想看的东西。你是开发者，我想看看你的作品。

所以尽情炫耀吧。

添加能展现作品最佳效果的图片。

添加项目实时视图的链接。

添加指向 GitHub 页面的链接，以便查看您的代码。

选择一条（通俗的）道路

你需要选择你想以何种方式向他人展示自己，并坚持下去。

如果是作品集，则几乎应该全部用第一人称现在时写成。

你想推销自己，所以你想感觉自己像个真正的人。

如果你写博客（第一人称或第二人称）或者谈论你的项目（过去时），情况可能会略有不同，但总的来说，你需要保持一致。

你是负责人，要像个负责人一样行事。

大家似乎都忘记了一点：作品集也是一种自我推销的方式。

你是你自己以及你所创造的事物的专家。

但很多人表现得过于谦虚。

这会导致不确定性，如果你对自己没有信心，那么浏览你网站的人也会有信心。

写作时要有目的性

你的网站是有目标的。如果是作品集网站，其目的很可能是为了获得工作机会或自由职业工作。

撰写文案时，务必牢记这一点。

您正在带领用户踏上一段旅程，而您的联系表单位于这段旅程的终点​​。

务必说服用户填写表格。

设计

响应式设计

现在都2020年了，请确保您的网站在移动设备和电脑上都能正常运行。

不要过度

很快就能看出哪些用户对自己的设计有信心，哪些用户没有信心。

那些没有设计经验的人把所有事情都做得极致。

图层太多。颜色太多。边框太多。

极简设计是一种很美的设计，对于设计新手开发者来说，自己动手实现并使其看起来美观也相当简单。

拥有一个简洁美观的网站远胜于用一个糟糕的网站显得格格不入。

如果你想创造出一些很棒、独一无二的东西，那就去做吧，但要从简单的开始，一步一步来。

我经常会利用Dribbble或UI Design Daily等资源来寻找我喜欢的设计，并从中汲取灵感。

利用空白

另一个初学者设计中常见的问题。很多设计都尽可能地把尽可能多的东西塞进最小的空间里。

屏幕上显示 15 个项目。40 个图标，展示你了解的所有技术和使用的工具，全部挤进一个小面板里。

留出空间展示效果更好。与其一次性展示所有作品，不如将你最优秀的四个项目放在足够大的空间里进行展示。

不要让用户感到信息过载。给你的内容留出一些空间。

一致性的重要性

用户在浏览网站的过程中，会逐渐建立起对网站运作方式的心理模型。

标题字体较大，颜色与其他文字不同。链接是带有大写字母的圆形按钮。

改变这一点会打破他们的思维模式，使他们更难使用网站。改变这些模式往往会导致挫败感。

保持设计风格的一致性也能让你的工作更轻松。你只需要为每种元素类型设计一种方案即可。

别忘了小事

细微的对齐问题、间距问题或颜色差异会逐渐累积。

您的用户可能无法明确指出问题所在，但他们的潜意识会注意到有些地方不太对劲。

对网站进行最后的检查，确保所有内容都排列整齐，符合你的预期，这会带来很大的不同。

让它脱颖而出。你的作品集旨在给人留下深刻印象。

表现

图像优化

图片通常是我们网站上加载的最大文件。

为了使网站加载速度快，我们需要尽可能减小图片尺寸。

不要向用户提供过大（4倍大小）的图片。不要添加用户不需要的细节。

我一直推荐使用Cloudinary来优化图片。它有免费套餐，而且适用于任何网站。（另外，即使是免费套餐，注册也能支持我。）

用户体验（UX）

带领用户踏上一段旅程

你的作品集旨在为你带来潜在客户或工作机会。

许多人常常期望用户自己找到所需内容。

他们不会的。你得引导他们。

如果你想让他们相信你是这份工作的合适人选，你可以引导他们了解你的项目。在你的项目页面上，你应该确保联系表单非常容易找到。

用户不应该费心考虑如何浏览您的网站。您应该为他们做好这一切。

社交媒体并非目标

社交媒体和联系表格通常混杂在同一个地方，但社交媒体并不是联系你的好方法。

你假定他们有社交媒体账号，并且在他们达到目标之前就把他们引离了你的网站。

社交媒体更像是电子报刊。它让用户定期了解你的内容，并持续感受到你的存在。

他们不会用它来联系你。给他们一份联系表格。

不要让用户感到不知所措。

人们的注意力持续时间很短。如果你创作了很多作品，或者了解很多事情，那太好了！

但作为用户，我只关心与我相关的内容。

让我帮你筛选一下你的项目。先从你最喜欢的技术开始。

专注于你想让别人看到什么，从而给他们留下最好的印象。

给我太多东西看，我可能什么都看不进去。

内容丰富

段落过长难以阅读。

眼球频繁移动会导致疲劳，并使人很难追踪页面上的位置。

用户注意力持续时间短，如果你不让他们轻松获取内容，他们就不会专注于你的内容。

考虑缩小段落的宽度，增加段落的高度。

通常来说，如果你的文本宽度超过容器宽度的 2/3（即 800px），那么它可能就太宽了。