-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1.html
197 lines (177 loc) · 10.6 KB
/
1.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>线框”在设计中有哪些妙用?</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/cl-css.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="highlight/styles/railscasts.css">
</head>
<body>
<div class="cl-header container-fluid">
<div class="header-content container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<img src="img/logo.gif" width="144" height="72" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="diary.html">日记</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">关于</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="cl-cantainer container">
<div class="row">
<div class="col-md-9 cl-left">
<div class="cl-artical-content">
<h2 class="cl-artical-title">“线框”在设计中有哪些妙用？</h2>
<div class="cl-card-tag">
<div><span>2019-02-14</span>/ <span>19：38</span></div>
</div>
<div class="cl-artical">
<p>在日常的设计工作中，线框是常用到的设计元素之一，在一些优秀的作品中也常常会出现，而对于一些设计师而言，懂得参考优秀作品中用的设计元素，但却不知为什么用？用的目的是什么？也有些作品整体看起来会出现散乱、区域划分不明显、缺少细节感等等的情况，那么又该从哪些方面入手解决呢？本期就与大家一起分析：线框在设计中有哪些妙用？上述问题如何通过线框得到相应的解决！
</p>
<p><img src="img/artical-img1.jpg" alt=""></p>
<p>线框在设计环节中可以看做为点状元素、亦可以看做为线状元素，在之前文章《解密设计中的点线面》中分别说过点状、线状元素的作用，而线框在设计中则可以同时兼顾这两优点，虽然是元素相同，但是用的目的不同，发挥的作用也会有所不同，比如：</p>
<p>这里出现的线框元素就起到了一定的装饰、衬托画面的作用，以点线面的角度来看则符合点状元素的特点，虽然这类元素对于作品整体而言只是次要的视觉元素，但是有与无的差别还是一目了然的，有此类元素，画面则呈现出一种更加丰富、饱满的视觉感受；而无此类元素，给人的感觉虽然画面元素依然很多，但是总带有单薄、不够饱满、缺少细节的感觉！</p>
<p><img src="img/artical-img2.jpg" alt=""></p>
<p>线框还有另一种很直观的作用，即：增强画面细节感、设计感，这一作用的线框在很多优秀的作品中都能看到，大到页面、小到优惠券、按钮。</p>
</div>
</div>
<!--<div class="recommend-panel">
<h4 class="right-card-title">相关文章</h4>
<div class="card-deck">
<div class="card ll-panel">
<a class="recommend-panel-link" href="calmlog-details.html">
<div class="recommend-panel-top">
<img src="temporary-img/list-image1.jpg" class="img-fluid" alt="">
</div>
<div class="recommend-panel-bottom">
如何有效避免设计作品“空”？
</div>
</a>
</div>
<div class="card ll-panel">
<a class="recommend-panel-link" href="calmlog-details.html">
<div class="recommend-panel-top">
<img src="temporary-img/list-image2.jpg" class="img-fluid" alt="">
</div>
<div class="recommend-panel-bottom">
高点击率钻展，设计环节…
</div>
</a>
</div>
<div class="card ll-panel">
<a class="recommend-panel-link" href="calmlog-details.html">
<div class="recommend-panel-top">
<img src="temporary-img/list-image3.jpg" class="img-fluid" alt="">
</div>
<div class="recommend-panel-bottom">
无敌配色技巧（一）
</div>
</a>
</div>
</div>
</div>-->
<div class="comment">
<!-- <form class="cl-comment-from">
<div><textarea placeholder="说点什么吧..." rows="1"></textarea></div>
<button type="button">留言</button>
<span class="clearfix"></span>
</form>
<h4 class="right-card-title">全部评论</h4>
<div class="comment-panel">
<div class="comment-panel-portrait">
<img src="img/portrait.png" class="img-fluid rounded-circle" alt="">
</div>
<div class="comment-panel-content">
<div class="comment-panel-content-item">
<div class="comment-author">晴天下起了小雨</div>
<div>2017-10-01 18:00</div>
</div>
<div class="comment-panel-content-main">很喜欢，果断关注了</div>
</div>
<span class="clearfix"></span>
<div class="text-primary"><a href="">回复</a></div>
</div>-->
<div class="#">
<div class="#">
<!--<img src="img/portrait.png" class="img-fluid rounded-circle" alt="">
</div>
<div class="comment-panel-content" >-->
<!--<div class="comment-panel-content-item">
<div class="comment-author">wjmyly7336064</div>
<div>2017-10-01 18:00</div>
</div>
<div class="comment-panel-content-main">相当实用，赞美了</div>-->
<!--comment-secondary-panel-->
<!-- <div class="comment-secondary-panel">
<span class="triangle-icon"><i class="fa fa-sort-asc" aria-hidden="true"></i></span>
<div class="comment-panel-content">
<div class="comment-panel-content-item">
<div class="comment-author">橘大佬</div>
<div>2017-10-01 18:00</div>
</div>
<div class="comment-panel-content-main">就是有些细节再到位点就好了…</div>
</div>
<span class="clearfix"></span>
</div>-->
<!---->
</div>
<!-- <span class="clearfix"></span>-->
<!-- <div class="text-primary"><a href="">回复</a></div>-->
</div>
</div>
</div>
<div class="col-md-3 cl-right">
<div class="right-card">
<div class="right-card-main">
<div class="right-card-title">关注微信公众号（我在你说tell id:fondreading）</div>
<div class="cl-code">
<img src="img/code.jpg" class="img-fluid" alt="">
<p>关注微信公众号，定时发布干货文章</p>
</div>
</div>
</div>
<!--下面贴评论代码-->
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1" ></div>
<script type="text/javascript">
(function(){
var appid = 'cyu4X6hCo';
var conf = 'prod_0ba62021dd76dba453515e5e93b3b5bc';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
</div>
</div>
</div>
<div class="container-fluid cl-footer">
<div class="container">
<p class="cl-copyright">本站由@不知所措的新哥荣誉出品</p>
<p class="cl-copyright">（微信搜索关注【我在你说tell】id:fondreading)</p>
<p class="cl-copyright">copyright @ 2019 新哥博客</p>
</div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>