给「非设计师」的移动设计指南（大量实例）

简评：假都放完了，收收心吧。
介绍些移动设计基础知识和技巧，帮助非专业设计人员快速爬坑。

在开始之前，引用一位知名摇滚演奏家 Dave Grohl （上图）的话：

我从未学习过音乐，但把音乐做出来了。如果你对某些事情充满热情，并且主动去做，专注投入，那你可以完成任何事。

很多人觉得学习一项新的技能充满着各种门槛，自我设限。其实很多事情没有想象的那么难，最重要的是跨出第一步，去操作，去实践，把看到的各种知识技巧落实在项目上，哪怕再小的项目。以结果为导向，激励自己。这样才是学习一门新知识的最佳途径。

本指南会为你提供一些可以应用的基础设计知识，和实用的设计技巧。希望能够对大家有所帮助，还是那句话，说一千道一万，不如做一下。

1.近黑色比纯黑色更适合阅读

试试用 #333333 RGB（51，51，51）来代替纯黑色的文字，近黑比纯黑更能让读者专注与文字。

另外，背景和字体颜色应该有对比，这样不会造成视觉疲劳。通常，白底黑字是最清晰的。尽量避免浅灰 - 黄色 - 绿色的配色方案。如果你不得不眯眼看，看肯定是搭配有问题。

排版时，要首先安置最重要的信息，在你的 app 或者网站上，要清楚地看到这些信息。再不放大或者滚动的情况下，重点内容应该清晰可见。

我们接着看几个例子来说明这个问题。

Instagram 的重点是用户发布的照片/视频，所以在页面中把这一块变得更显眼。

Pinterest，通过将搜索栏固定在顶部，然后在其下方的漂亮网格来创建视觉风格。Pinterest 特意将搜索框作为页面上的第一个项目。搜索是 Pinterest 的核心功能。

举个另类的例子，Spotify 和网易云音乐，封面占据屏幕的主要区域，播放器次要，他们虽然是音乐类 app，但是对于视觉的刺激要求很高。

对齐是排版的基础，最起码不会出错。

比如我们用 medium 的页面举例子。

仔细看这个页面，有什么感觉么？给你 30 秒。

注意左侧和右侧的对齐方式，整体很不协调。

经过调整，把左侧对其之后，就会显得整洁舒服。

所以，在很多时候，当我们无法驾驭或者不能确定一个排版的可接受性的时候，可以中规中矩的把它们对齐排列。

不要让字体拘束，增加字体大小和间距，更容易读者阅读。

大多数应用都有搜索功能，如果搜索的顺序很重要，那么列表是最好的表达方式。

如果顺序不是那么重要，那可以采用更开放的样式，比如上面的 Pinterest 的网格视图。

（上图：网页点击热力图，list 的黄金三角区能够获得绝大多数流量）

在设计之初，特别是思考核心功能和 UX 时，建议采用黑白初稿。

因为色彩可能会激起我们的情绪，打扰我们对于核心功能的设计。

既然为移动设备做设计，那一定要考虑到手部的放置。可以参考专栏的另一篇文章：拇指区域：为移动用户设计

记住几点：

颜色是一门难以捉摸的艺术。可以专栏参考文章：设计师自学手册：配色方案指南。强烈建议去 Dribbble 并搜索「调色板」或使用调色板生成器，如 Coolors 或 Color Claim。

Google 和 Android 的设计都非常优秀，我们在设计的时候可以多参考他们的设计规范。

园长：其实我也写过不少的设计类文章（都比较浅），但是真正去执行的朋友，我相信没多少人，哪怕给自己设计「个人logo」这么有趣，有意义的事情，可能都没多少人去操作。

真的，我们看了那么多文章，听过那么多故事，见了那么多人，为什么他们还是他们，传说还是传说？

一定是有机遇和运气成分，但是主动也很关键。就算上帝让你发财，你连彩票都不买，怪谁？

实践和行动！

去吧！

原文：How to not suck at design, a 5 minute guide for the non-designer.