forked from easychen/lean-side-bussiness
-
Notifications
You must be signed in to change notification settings - Fork 0
/
040307.html
212 lines (188 loc) · 21.6 KB
/
040307.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE HTML>
<html lang="zh-cn" class="sidebar-visible no-js light">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>人人能用的四大原则 - 精益副业</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="favicon.svg">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/chrome.css">
<link rel="stylesheet" href="css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css">
<link rel="stylesheet" href="ayu-highlight.css">
<!-- Custom theme stylesheets -->
</head>
<body>
<!-- Provide site root to javascript -->
<script type="text/javascript">
var path_to_root = "";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script type="text/javascript">
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script type="text/javascript">
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('light')
html.classList.add(theme);
html.classList.add('js');
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded "><a href="index.html"><strong aria-hidden="true">1.</strong> 精益副业</a></li><li class="chapter-item expanded "><a href="01.html"><strong aria-hidden="true">2.</strong> 为什么副业特别重要</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="0101.html"><strong aria-hidden="true">2.1.</strong> 职业可能性</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="010101.html"><strong aria-hidden="true">2.1.1.</strong> 职业的四大象限</a></li><li class="chapter-item expanded "><a href="010102.html"><strong aria-hidden="true">2.1.2.</strong> 没有副业的职业</a></li><li class="chapter-item expanded "><a href="010103.html"><strong aria-hidden="true">2.1.3.</strong> 副业带来的可能性</a></li></ol></li><li class="chapter-item expanded "><a href="0102.html"><strong aria-hidden="true">2.2.</strong> 职业自由度</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="010201.html"><strong aria-hidden="true">2.2.1.</strong> 从中指备用金说起</a></li><li class="chapter-item expanded "><a href="010202.html"><strong aria-hidden="true">2.2.2.</strong> PlanB和反脆弱</a></li><li class="chapter-item expanded "><a href="010203.html"><strong aria-hidden="true">2.2.3.</strong> 全新的工作自由度</a></li></ol></li><li class="chapter-item expanded "><a href="0103.html"><strong aria-hidden="true">2.3.</strong> 职业成长性</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="010301A.html"><strong aria-hidden="true">2.3.1.</strong> 新技术练兵场</a></li><li class="chapter-item expanded "><a href="010302.html"><strong aria-hidden="true">2.3.2.</strong> 业务敏感度</a></li></ol></li></ol></li><li class="chapter-item expanded "><a href="02.html"><strong aria-hidden="true">3.</strong> 如何优雅地做副业</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="0201.html"><strong aria-hidden="true">3.1.</strong> 想明白核心资源和核心优势</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="020101.html"><strong aria-hidden="true">3.1.1.</strong> 副业的核心资源</a></li><li class="chapter-item expanded "><a href="020102.html"><strong aria-hidden="true">3.1.2.</strong> 副业的核心优势</a></li></ol></li><li class="chapter-item expanded "><a href="0202.html"><strong aria-hidden="true">3.2.</strong> 时间片</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="020201.html"><strong aria-hidden="true">3.2.1.</strong> 时间片的销售</a></li><li class="chapter-item expanded "><a href="020202.html"><strong aria-hidden="true">3.2.2.</strong> 时间片的优化</a></li><li class="chapter-item expanded "><a href="020203.html"><strong aria-hidden="true">3.2.3.</strong> 突破时间片限制</a></li></ol></li><li class="chapter-item expanded "><a href="0203.html"><strong aria-hidden="true">3.3.</strong> 资产和被动收入</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="020301.html"><strong aria-hidden="true">3.3.1.</strong> 什么是资产</a></li><li class="chapter-item expanded "><a href="020302.html"><strong aria-hidden="true">3.3.2.</strong> 资产的获得方式</a></li><li class="chapter-item expanded "><a href="020303.html"><strong aria-hidden="true">3.3.3.</strong> 资产的量化评估</a></li></ol></li></ol></li><li class="chapter-item expanded "><a href="03.html"><strong aria-hidden="true">4.</strong> 优选资产</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="0301.html"><strong aria-hidden="true">4.1.</strong> 知识和人脉的变现</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="030101.html"><strong aria-hidden="true">4.1.1.</strong> 付费视频课</a></li><li class="chapter-item expanded "><a href="030102.html"><strong aria-hidden="true">4.1.2.</strong> 付费专栏</a></li><li class="chapter-item expanded "><a href="030103.html"><strong aria-hidden="true">4.1.3.</strong> 付费社群</a></li><li class="chapter-item expanded "><a href="030104.html"><strong aria-hidden="true">4.1.4.</strong> 图书出版</a></li></ol></li><li class="chapter-item expanded "><a href="0302.html"><strong aria-hidden="true">4.2.</strong> 自有产品和服务</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="030201.html"><strong aria-hidden="true">4.2.1.</strong> 应用市场卖APP</a></li></ol></li></ol></li><li class="chapter-item expanded "><a href="04.html"><strong aria-hidden="true">5.</strong> 精益副业</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="0401.html"><strong aria-hidden="true">5.1.</strong> 精益副业流程</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="040104.html"><strong aria-hidden="true">5.1.1.</strong> 商业模式画布</a></li><li class="chapter-item expanded "><a href="040105.html"><strong aria-hidden="true">5.1.2.</strong> 最小可行产品和产品市场契合</a></li></ol></li><li class="chapter-item expanded "><a href="0403.html"><strong aria-hidden="true">5.2.</strong> 精益独立开发实践</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="040301.html"><strong aria-hidden="true">5.2.1.</strong> 独立开发的精益流程</a></li><li class="chapter-item expanded "><a href="040302.html"><strong aria-hidden="true">5.2.2.</strong> 福利单词项目简介</a></li><li class="chapter-item expanded "><a href="040303.html"><strong aria-hidden="true">5.2.3.</strong> 福利单词的商业模式画布</a></li><li class="chapter-item expanded "><a href="040304.html"><strong aria-hidden="true">5.2.4.</strong> 通过用户画像细化客户</a></li><li class="chapter-item expanded "><a href="040305.html"><strong aria-hidden="true">5.2.5.</strong> 画像→场景→功能和分期</a></li><li class="chapter-item expanded "><a href="040306.html"><strong aria-hidden="true">5.2.6.</strong> 什么是好的商业设计</a></li><li class="chapter-item expanded "><a href="040307.html" class="active"><strong aria-hidden="true">5.2.7.</strong> 人人能用的四大原则</a></li><li class="chapter-item expanded "><a href="040308.html"><strong aria-hidden="true">5.2.8.</strong> 独特Logo解决方案</a></li><li class="chapter-item expanded "><a href="040309.html"><strong aria-hidden="true">5.2.9.</strong> 使用AdobeXD设计界面</a></li><li class="chapter-item expanded "><a href="040310.html"><strong aria-hidden="true">5.2.10.</strong> 个人支付解决方案</a></li><li class="chapter-item expanded "><a href="040311.html"><strong aria-hidden="true">5.2.11.</strong> 使用「兔小巢」处理用户反馈</a></li><li class="chapter-item expanded "><a href="040312.html"><strong aria-hidden="true">5.2.12.</strong> 2A3R漏斗和增长优化</a></li></ol></li><li class="chapter-item expanded "><a href="0402.html"><strong aria-hidden="true">5.3.</strong> 精益网课变现实践</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="040207.html"><strong aria-hidden="true">5.3.1.</strong> 大纲的注意点</a></li><li class="chapter-item expanded "><a href="040209.html"><strong aria-hidden="true">5.3.2.</strong> 通过预售验证销量</a></li><li class="chapter-item expanded "><a href="040210.html"><strong aria-hidden="true">5.3.3.</strong> 常见的课程片段类型</a></li><li class="chapter-item expanded "><a href="040211.html"><strong aria-hidden="true">5.3.4.</strong> 文稿讲义类课程片段的制作</a></li><li class="chapter-item expanded "><a href="040212.html"><strong aria-hidden="true">5.3.5.</strong> 屏幕录制类课程片段的制作</a></li><li class="chapter-item expanded "><a href="040213.html"><strong aria-hidden="true">5.3.6.</strong> 真人出镜类课程片段的制作</a></li><li class="chapter-item expanded "><a href="040214.html"><strong aria-hidden="true">5.3.7.</strong> 虚拟形象类课程片段的制作</a></li><li class="chapter-item expanded "><a href="040215.html"><strong aria-hidden="true">5.3.8.</strong> 最常用的视频剪辑操作</a></li><li class="chapter-item expanded "><a href="040216.html"><strong aria-hidden="true">5.3.9.</strong> 最常用的音频处理操作</a></li><li class="chapter-item expanded "><a href="040217.html"><strong aria-hidden="true">5.3.10.</strong> 字幕的制作和自动生成</a></li><li class="chapter-item expanded "><a href="040218.html"><strong aria-hidden="true">5.3.11.</strong> 流量池和二次购买</a></li><li class="chapter-item expanded "><a href="040219.html"><strong aria-hidden="true">5.3.12.</strong> 如何有效地反盗版</a></li></ol></li><li class="chapter-item expanded "><a href="0404.html"><strong aria-hidden="true">5.4.</strong> 进一步提升副业的鲁棒性</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="040401.html"><strong aria-hidden="true">5.4.1.</strong> 网课+独立开发的双引擎副业模式</a></li></ol></li></ol></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky bordered">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">精益副业</h1>
<div class="right-buttons">
<a href="print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script type="text/javascript">
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="人人能用的四大原则"><a class="header" href="#人人能用的四大原则">人人能用的四大原则</a></h1>
<p>界面设计是很多尝试自己开发完整产品的程序员非常痛苦的事情。很多时候，如果我们去问设计师，很多人虽然会设计，却讲不出背后的道理。只会说，「这样做感觉上更好一些」，「这就是经验/灵感」。</p>
<p>我以前也是这么认为的，直到读了一本书才明白，原来界面设计背后一样是有规律的。</p>
<p>界面的表层结构展现的正是它内部的逻辑。</p>
<p>一个界面上应该摆放哪些控件，哪几个应该离得近，哪几个应该离得远，哪些应该用同样的风格，哪些又应该区别开来，这些都源于它背后严密的逻辑关系，而不是因为设计师的一时兴起。</p>
<p>那本书就是《写给大家看的设计书》。在书里，作者提出了界面排版的四个基本原则，通过活用这四个原则，我们就能够把界面设计得美观大方。</p>
<p>这四个原则分别是「重复」，「对比」，「对齐」和「亲密性」。</p>
<ul>
<li>「重复」原则强调「一致性」，它说的是「在逻辑上一致的物件，在视觉上也应该一致」。</li>
<li>「对比」原则强调「层次感]，它说的是「逻辑上不同的物件，在视觉上也应该不同」。所以我们要想办法拉出距离来。</li>
<li>「对齐」原则强调的是「安定感」。均匀的留白能够营造出一种稳定的感觉。这正是产品质感的一种潜意识渗透。对齐虽然是很小的细节，但是如果处理不好，很容易会破坏产品整体质感，而且会给有强迫症的朋友带来莫大的压力。</li>
<li>「亲密性」原则，强调区块的关系，它说的是「逻辑上存在很近的关系，那么这个关系也应该表现在视觉上」。相关的项应该彼此靠近，不相关的项应该彼此远离。</li>
</ul>
<p>书里有非常详尽的介绍和让人顿悟的例子，建议大家都去阅读下原书。</p>
<p><img src="images/8d4ce8c6b79ed6f915b7540a56935f631a7372e6f67b87d37e0fe54be20829ea.png" alt="picture 19" /></p>
<p>四大原则回答了常见的一些界面问题。比如说，上图中，白色方块之间的间距为什么不能比第一个方块和页面边界的距离大。</p>
<p>如果从纯感性的角度来讲，可能会说「这样放不好看」。但是如果通过亲密性原则来思考的话，我们会发现在逻辑上，相对于页面边框，白色方块是一个整体。一个白色方块和另一个方块的关系，显然比它和页面边框近。所以这种深层关系表现在视觉上，就是它们之间的边距差异。</p>
<p>如果视觉关系和逻辑关系不一致，我们就会觉得「别扭」、「不直观」。这些原则为我们通过逻辑理解设计推开了一扇门，让之前仅存于「感觉」和「经验」的设计技巧变得有章可循。熟悉它们以后，只要多加练习，再配合上一些简洁、清爽风格的设计细节，我们就可以在大部分场景下做出七十到八十分的界面来。</p>
<p><img src="images/6cd891635db5171c0405707d8cf7d845ec05c8a0cb2cc290935c6476d1b9c9d8.png" alt="picture 20" /></p>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="040306.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="040308.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="040306.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="040308.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<!-- Livereload script (if served using the cli tool) -->
<script type="text/javascript">
var socket = new WebSocket("ws://localhost:3000/__livereload");
socket.onmessage = function (event) {
if (event.data === "reload") {
socket.close();
location.reload();
}
};
window.onbeforeunload = function() {
socket.close();
}
</script>
<script type="text/javascript">
window.playground_copyable = true;
</script>
<script src="elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="mark.min.js" type="text/javascript" charset="utf-8"></script>
<script src="searcher.js" type="text/javascript" charset="utf-8"></script>
<script src="clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="book.js" type="text/javascript" charset="utf-8"></script>
<!-- Custom JS scripts -->
</body>
</html>