注意这十点，让你避免糟糕的设计思维导图

西风不相识

2023-03-02

浏览量: 1

设计

本文是给初学者/门外汉的五分钟设计指南。好的设计原则对任何人来说都有用。这个指南会告诉你一些基础设计原则，立即就能用得上并分享给别人。

树图思维导图提供《注意这十点，让你避免糟糕的设计》在线思维导图免费制作，点击“编辑”按钮，可对《注意这十点，让你避免糟糕的设计》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：8bc52d88062d3c5ee12354dff9f3f86b

思维导图大纲

如果你不相信自己能够做好设计，那么请记住传说中的人物David Eric Grohl说过的这段话：

我从不学习打鼓课程，从不学习吉他课程，我靠自己摸索。我认为倘若你真的对什么东西有所热诚，你就会有动力，你就会集中注意力，你可以做任何你想做的事情。

——Dave Grohl，喷火战机乐队

记着上面那段话，你准备好要开始速成课了吗？让我们开始吧（没有特定顺序）：

1. 足够强烈的色彩对比

背景和字体必须有足够区分，阅读起来不伤眼睛。白底黑字是最容易辨认的。最好不要使用浅灰、黄色或绿色。如果别人必须眯着眼睛才能看清文字，那肯定是有问题的。

图片来源：UI Design Do’s and Don’ts

2. 深灰比黑色更好

如果可以的话，尝试使用#333333 RGB(51, 51, 51)，而不是黑色，作为文字颜色。黑白对比晃眼睛，让人更难集中注意力。

3. 重要内容放在前面

布局是帮助使用App或网站的重要信息。重要的内容应该是第一眼可见的，不需要缩放、滚动或点击。

图片来源: UI Design Do’s and Don’ts

让我们看看几个视觉层级设计的正面实例。

Instagram（下图左侧）将让用户发布的图片/视频作为焦点。

Pinterest（下图右侧）的主要功能是搜索，人们在上面浏览翻找信息。

再看两个例子。

Spotify（下图左侧）显然把唱片封面和音乐标题放在第一位，将用户操作放在第二位。尽管操作是第二位，Spotify仍然保证播放暂停按钮的比重大于前进后退。

Facebook（下图右侧）看起与Instagram非常相似，把好友发布的内容放到前面和中心。

4. 对齐一切

如果你感觉哪里有些不对，最快的解决方式很可能是把不对齐的东西全部对齐。有时设计师会念叨需要使用“栅格”，这其实是在提醒团队需要解决对齐的问题。保证元素对齐是改进任何App或网站的最简单的方法，可以立马让视觉效果提升10倍。

图片来源：UI Design Do’s and Don’ts

让我们再看看其它对齐案例，这次是Medium。

下面是一个Medium的页面，你觉得看起来如何？是不是有哪里不对？提示：注意左侧的对齐情况，看起来怎么样？

下图我仅仅将内容左侧对齐了。

5. 文字尺寸和留白

我们是给人做设计的，不是给蚂蚁做的。增加文字尺寸并多留些空白能够保证内容更加易读。

好的文字尺寸VS不好的文字尺寸：

6. 如果顺序很重要的话，使用列表

大部分移动/网页App有搜索功能，对于应该如何展示搜索结果，可能有些争议。

如果顺序是很重要的，那么列表是最有效的。

如果顺序不重要，并且还鼓励用户多浏览探索（像是Pinterest或Airbnb），那么网格视图就可以提供更多的信息，方便用户浏览探索。

7. 先做灰度设计，再上色

灰度设计能够保证聚焦于关键的用户体验。颜色牵扯到较多的情绪反射，并且容易打扰我们所聚焦的关键问题。

8. 让设计用起来舒服

手的使用是一个重要的问题，建议参考Luke Wrobluewski的文章《Responsive Navigation: Optimizing for Touch Across Devices》

Luke画出了手机上最容易使用的部分（对于右手来说）——我挺喜欢哪些可以设置左右手的App的。

很多高效的手机App保证导航和主要操作在手机的底部。

图片来源：《Responsive Navigation: Optimizing for Touch Across Devices》

9. 借用色板

色彩是一种难以捉摸的艺术。我强烈推荐大家去Dribbble搜索“Color Palettes”或者使用色板编辑器，如Coolors或者Color Claim。这样做可以节约好几个小时的争论、纠结的时间。

10. 使用Apple和Google的系统设计规范

这两家公司都有很棒的资源帮助任何人搭建Android或iOS的App。

例如，Google的Material里有设计原则、资源、色彩、图标和控件，能够帮助你快速开始App设计。

Apple则有HIG（Human Interface Guideline），里面罗列了有所有设计iOS平台App所需要知道的东西。

图片来源： Google Material Design和The Apple Human Interface Guidelines

记住，设计需要练习

需要一些时间和练习才能够训练出一双辨别设计的锐眼，但是你会发现上面的建议会大大提高你的设计。

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

译者：Z Yuhan

职业生涯人物访谈思维导图

U381614141

0.28

树图思维导图提供《职业生涯人物访谈》在线思维导图免费制作，点击“编辑”按钮，可对《职业生涯人物访谈》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：c1f2e2bd2ea229fce3f9797aa82def65

筹码选股思维导图

U281934942

3.87

树图思维导图提供《筹码选股》在线思维导图免费制作，点击“编辑”按钮，可对《筹码选股》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b808dde850c34abb704db98e614f66b5

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

互联网时代，让用户来帮助你建设和宣传品牌思维导图

2023-03-02 17:47:02

文案篇10：如何分析别人的文案，让自己成长？思维导图

2023-03-03 09:43:43

百度推广优化实战：手把手教你做百度推广（上）思维导图

2023-03-02 16:31:50

都2020年了，你还不会做社区？我给你分享一些秘籍！思维导图

2023-03-01 17:27:21

思维导图模版推荐

需求二三事：需求分析方法分类阐述思维导图

2023-03-02 11:14:05

非法传播影视剧会被封号，剪辑片段算侵权吗？思维导图

2023-03-02 11:14:00

月入过万的微商，都是这么做情感营销的思维导图

2023-03-02 11:14:16

新手与高手的区别：新手看树木，高手看森林思维导图

2023-03-02 11:14:21

唉，共享单车这三年思维导图

2023-03-02 11:14:32

2018年的星巴克，互联网思维缺失的惨败思维导图

2023-03-02 11:13:55

首页

我的文件

我的团队

个人中心