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

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


在开始之前,引用一位知名摇滚演奏家 Dave Grohl (上图)的话:

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

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

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

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

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


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


2.内容可读性和重点

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

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

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


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


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

3.对齐排版

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


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


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

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


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


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

4.文字大小和间距

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

5.如果排序的顺序很重要,使用 list

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

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


(上图:网页点击热力图,list 的黄金三角区能够获得绝大多数流量)

6.先设计黑白版,再做彩色版

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

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

7.舒适的设计

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

记住几点:

  • 重要链接以及一些导航设计,放在容易到达的区域;
  • 移动设备和语言将会改变,但只要是触摸屏,拇指区域将仍然是设计的关键部分;
  • 拇指区域内恰当好处的内容和动作,对于卡片式设计会有很大益处;
    当我们考虑一个人的拇指如何在屏幕上滑动时,要思考如何让手势区域变得更加简单。

8.使用调色板

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

9.遵照 Apple 和 Google 的设计规范

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

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

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

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

实践和行动!

去吧!

原文:How to not suck at design, a 5 minute guide for the non-designer.
“本译文仅供个人研习、欣赏语言之用,谢绝任何转载及用于任何商业用途。本译文所涉法律后果均由本人承担。本人同意简书平台在接获有关著作权人的通知后,删除文章。”

欢迎关注知乎专栏「极光日报」,每天为 Makers 导读三篇优质英文文章。

延伸阅读

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容