分享为什么做设计总是心里没底?

1 0
6 天前
显示全部楼层

马上注册,结交更多SEO好友,可查看高清图片。

您需要 登录 才可以下载或查看,没有帐号?加入SEO研究中心

x

& S% y" V: B4 O相信有很多小伙伴和我一样,经历过做设计,心里没底的情况,说的直接点就是找到好参考就能做好,找不到好参就做不好,即使做出了好作品,也觉得带有一定的偶然性!UI中国的相关问题可以到网站了解下,我们是业内领域专业的平台,您如果有需要可以咨询,相信可以帮到您,值得您的信赖!
: T% B) X9 h, H* O. b5 i5 K
1 j. j) ?9 Q8 A  E( w  O
2 s4 H& H- r% D, p  z

& x" c: y& j; ^
" y# R/ ^1 o6 r! h& Z+ F4 V5 S0 S8 _* c4 h6 F7 ~! R
为什么会这样呢?
. ^# B0 Y1 _- ?+ _6 ^/ N; _: Z! W: Z; s; P

' E# b+ ~$ O9 d( w* |- z" s
9 R7 s# Y0 b# f6 Q2 \' a7 A
; Z3 ~8 _+ V6 Y3 \- L. a& ?& w! h5 T
最近菜心对这个问题感触颇深,所以想和大家分享一下自己的经验。
' g8 B( y& \3 W; H2 ~% R$ L. K
' H* J5 Y; X4 w( t" U9 A) A9 ?( K- w+ h3 {- V
0 m. Y3 {; W& m7 A7 a

( H, V. \4 U3 D) e2 ]5 M- Z1 O# I$ h2 Q& N& O
废话少说,直接上栗子!' l6 C9 Q- I1 J

: E( a( g; M7 T! p, h
; V/ F3 N7 u9 a) b  x* n& G0 ^* D3 ]( ~# {

7 A; k% @6 t. @  l# m& B7 \8 Z( \- C% ^" ]( l. W& ]: c
下图是我最近在做的一款,叫做:
6 ]$ B& j* x) U' E2 h
) p  O5 F( ]2 [
4 M! }. Z7 I; ?5 R, N' p/ U7 i- m  i! R* I

* o+ h* D/ j! o0 t& \; v9 R; z: X5 j/ v8 H- p6 n$ a
+ S& H: b& g# G( r; `. a! b0 j' l& g

( j4 E1 q4 e0 {! v
5 Q3 q" g$ ]# W8 m8 t' m
  N; s" _6 S4 b5 L5 h2 [
) O. e0 [2 ^  z8 s5 U! s0 U( |% K, e! }+ |; R; y. ^& \0 ~6 P
装下13,加个带辅助线的:
8 l2 K6 ~! f! O# ]! P$ s, ~1 e4 V) m1 I% W# [
/ _7 a( s4 @: Q) m. d
, }. s" {2 ]6 j$ j: ^( Z  S
2 y& B3 _3 D- ~
9 W; c' S- h% ?6 P5 d
+ v, ^$ G8 D/ I) x1 j# ]
" |) h: E& n2 x+ n8 j. t% q

/ U1 t, F4 v& f. F+ \* J9 G( z) Z! c; f+ d/ X/ j
: y% i$ N" `: a1 n/ R
7 h0 |: X! Q/ c: I; p
根据视觉品牌基因法,我得到了辅助元素,如下图:
' @4 i2 k# g' [5 A0 H0 y
2 A4 M0 [7 r# A0 n3 Y
' D( E9 n) z* D3 s0 U+ y% ~2 T6 [- z, X& S- f
* m& v% B9 O5 L2 Y
$ x" i& v1 J" M+ Q4 O( x

# ~8 c7 z. e) g: L+ y
4 }8 Y, N2 `$ J' l, ~! L# E& Q1 N1 R: V2 d7 D
( P) L6 r8 ]# d% a' A
  Q- k, |# k, n7 u' a

$ y6 ?) x6 T/ D5 L" ^但是在做延展的时候遇到了问题,由于自己的平面构成水平一般,所以一直以来对于图形延展都很抗拒,自己的延展方式要么是放大单个元素,要么是平铺元素,如下图:
5 P! k! _" ~* s* j& S5 A1 y$ r3 x6 v, }: A: R1 G+ K$ |0 g: N' E
; m6 t7 U. P' d# h& N6 w0 {2 V1 E
% p8 ]. M& d6 t, U( R/ l* @
1 N6 H  M9 {/ B& _# b, d. ^% W

1 L- n& x6 m3 }3 f$ ~" y7 x. a0 I1 p; v, Z+ K

* o- C5 [! T7 x! I1 ~4 \3 g) W
# _+ g. J' k' {+ i6 ^; P! s0 Q% G' |/ K

. f+ k0 |# F$ w
1 t  p7 M) c# s$ A0 M( X0 u2 f# R- O" y2 R+ `+ h

* c, O& A1 c: d! t8 x& q! m7 x# E- Y+ o$ j! b  [% }& @

1 I  r1 n, M2 F) i2 g! o
/ W7 W1 ~' q8 h! W  T" q. T( J- R3 {) P, q( z  e% V$ c' U
这两招已经用三年了,所以这一次打算离开自己的舒适区,做一次不一样的!& l& X' I& l# R& V. c/ M

* P; H4 q+ o" g7 l& w2 N
0 Y5 B! ^% E! _( n# w7 D9 l
1 D& B( v' Q, a* U) z( @4 n7 K( d3 e# L" @; u* X" t" Z
3 l. Y' Q7 O8 v6 ?/ |: X5 k3 {
虽然有了决心,但是凭空来做,还是做不好,于是找了大量参考,最后经过筛选得到下图:: M5 F* v) @4 x

9 n4 i; I3 S: j4 d4 a- I
5 Y4 a% P" R* y' W- w
+ e1 r7 Y% n. W' R8 H2 k4 B* p  J# E# [* w

4 Z5 q8 o8 {$ g# x- s6 o8 ^
' u" T1 V5 i' k4 ]4 a) y4 t( e( ?6 e8 v* S# L) G. y  q4 f

! q. ?+ G" I" q6 @& ?7 }; q, \3 ]5 N
! A) C- ~+ y3 B# E: M
& f% D; }4 C8 ~5 D' m: R+ l; J# m  f1 {0 G% T
我对着上面的感觉开始做自己的图形延展,做了一遍又一遍,得到结果如下:% T% L; G: Y- B$ O
7 ^% q( y5 @6 ?3 q; ?% f9 m) u* S

' U4 Q3 k" f8 @2 |% s- n# @3 w
8 v$ T- ~. v1 ^6 A8 `0 a/ Z7 P2 `2 p
2 f: n" S1 z, |1 s' j' K' f" w
7 K& Q8 ?6 O4 X7 S
3 e0 l" M0 j- `" c2 G0 N+ |4 `  v3 j+ R

- l1 e7 j1 {2 q& u0 ^' J- C4 R3 X; O& U% c9 L3 I5 v( q

, {" w) J- }! I4 x6 d/ o8 X9 T. N) d. L( d. B3 u9 k! ~

6 ?# c; X* l0 ]5 k7 [& `4 E3 j& m# s- Y" J# U! X
) K- M7 c6 M/ x9 I$ _7 [3 n
* o" U' {% _1 q2 O8 l5 R# Z
& z/ s0 T$ A4 W
2 v0 p* N4 K  `) j7 Y+ i% Y+ T" f
$ {0 c& n2 ^1 A

# k: C' R2 Z/ k总感觉哪里不对,但又说不上来,我像一只无头苍蝇一样,又做了很多稿,可还是不理想。突然我意识到,这样做下去并没有在根本上解决问题,即使侥幸做出来了满意的图形延展,那也是一种偶然,下次再做其它元素的延展,还是会摸不清头脑,浪费大量的时间。7 x: U# l5 y5 C' T. R4 v
& i, ~/ i! L5 S( z' o
' e$ A) S( |# g( ^, f: M" [/ Z
3 ]! m% n. o: J. b) d

% C( b( \) t0 @3 O6 ^+ p" @4 {
$ C1 ^1 U8 N. s* U2 A2 t于是我决定去研究原作者的图形,分析它好看的内在原理是什么?
- C7 Q: U+ Y* T
2 v2 N7 y4 O; ^6 e& D, H7 H4 `
6 u6 o3 T) f2 h; B) z- _$ t& X
0 [9 Y' E* c4 J) R/ P9 j' }
% {# v7 o1 Q# A2 J2 Z1 e. s( Z9 g* Q% D. r/ s* ^
这个分析的过程你可以自己思考,也可以找小伙伴一起讨论,当你得到一些结论之后,可以尝试用自己的案例去验证,这样不断的反复试错,从而总结出属于自己的理论依据!9 W) \* v! w. V2 K- C
+ M% y' J# N% D) L3 _1 |- q' u

9 j0 P. i% u# a6 {; f$ ~3 A+ [  w4 q1 q

# j/ I4 e9 q) K# ~- N5 g$ B) d' b) z+ M. s$ j6 a
按照上面的方法,我得出两个字来形容参考图好看的原因丰富,而这个丰富我们可以从5个方面来考虑,大纲如下:+ H# ^+ c6 e+ `  q: [

' }, W' ?# f: H. S- r* f2 ^
: q+ b) s3 `/ T; z# L, `
6 Q# e4 r, X7 _& ?9 J5 t/ J4 N( q1 g$ ^

- @- t0 a; f9 `& n4 q- t- C
; l8 q% e+ R! Y* N5 H
# F: g' }7 _; D: e4 I1大小4 W; Z$ W2 }5 y4 w

* Y7 ~  O# e. u* `1 ~* N. t- m! N7 M9 g  W7 }

6 m6 o5 R* p. N' {
+ t. W! X: P  R0 I& i1 x% f% @) C! N& j# H" f& _* @
2疏密1 j# {+ ]3 ]% h. h5 O( d

9 ]! [+ n8 ?0 `9 \9 h) f
, c" T# i% O' \" @7 |1 `, Y. v) @& W6 M9 T9 S8 V9 V

0 ~8 x& F3 M  V( H# [: m8 r1 e" {5 U' s3 Y
3颜色
1 T, Y" Q* h! ~. Z2 |# v9 H0 P: I/ L

& C. f1 M. E/ V1 w8 P  n
, J5 `/ O( e8 o6 f+ w
$ t6 |+ v7 F- G! }8 @
6 A: j% m2 }# Y+ J1 I3 B/ H4方向0 X) k3 K7 u% ~+ x

" p# Y1 b. w3 N* L3 J! j- C! x
0 i/ e% R; z, X# ]' T
5 a8 W$ Y8 V0 Z) c+ |) t2 k8 x6 b/ C6 i4 t

8 R) I; a8 E% a7 s# Z7 K$ N8 ?5形状
$ }! {. S$ a: L3 n" \2 ^/ E6 i/ U5 x
& {9 O  e$ b1 M1 b' A5 }" w# k
& l+ w9 i! z2 l8 z
9 N! M- s6 B8 C

+ S/ l7 m: p1 X- d
% d3 i  @7 {5 J1 @( k; R
- g3 p3 W6 g$ J8 Z% N* `1大小; G# t1 v# P2 L% m0 q. a. U
4 d- Q2 k' v/ S; ]3 w
元素大小丰富,有大有小,对比明显,如下图:
: h3 V3 s  Q; c/ G' H3 ?
$ B) |+ k2 C& x8 u, H! K9 w3 L2 H6 ]0 l. U4 m3 r# s/ u& z/ k
3 \( n( Z7 x4 b6 w; [0 g' a

) T) N' w/ ^5 }+ T! d6 s
0 {' L0 D* L' |! a! G0 J6 c
+ n( O9 H$ V% c6 N  ~3 Y: d' h- x$ p  F$ S& M! `- d- Q- j0 g8 E' w
7 \( c( @5 G& H# f  g( T& j

" I/ S6 U: S: b% O# X# l
+ c( X% `& s% t% `* v# v- b: H3 A
$ q( \% s, u) u1 ?. W
& Q) }# U1 m' L7 `' V9 M1 }
. g5 M. P3 W7 |, o8 E) i# {( ~( b' v+ F6 T' T4 D5 @, B$ P

, [) |* Q" Q( K4 z1 q3 ~  g1 A3 a5 W/ r7 P. J: j

! T" N) d8 I% }3 t; Q2疏密9 l  V% D' o9 s& z4 x
- Q0 N0 |6 }! T+ p9 g# _) g& U
元素疏密程度丰富,有疏有密,如下图:
5 T) F$ i9 R3 S6 O1 T* U0 I3 K
. J/ ?- a2 _* W5 d4 O% a: u1 Q* B% C1 q6 A

* W3 D2 o  v& S4 @/ w
/ J: X. o2 K1 c6 W# Z# T6 \$ D: z; U4 S; S
8 B( N: a% ~% [3 c6 t" @
# Q) E# y) I; z& O: \

5 }. }: R1 M2 Y7 v4 q7 w8 Y/ f
# ?: E% r: {* S" [1 I/ z* ?) Q& E' b. ~' q+ t7 l: x- t& F

0 N$ F; B8 ~/ i4 ~' `# D3 B4 x& I$ y4 h6 A2 P0 u  n

# z2 c' a3 o; N
7 c3 L& s. S9 I$ Z7 H! w, N
# ~4 f8 B7 Q* K9 \! d7 K+ O+ H
4 u/ j, B1 F4 S( G  z! V9 `1 I
3颜色. @- v' ?3 T6 h- b! I! A

& V. O) B( g& h+ l2 Y6 T9 d: g颜色层次丰富,共有三层红色底、黑色元素、白色字体,如下图:
1 E+ _2 w1 \, R3 j, T" B8 ?0 O; r2 e8 X( g* _/ O6 E0 ^" P: l

- e! \& r) {5 }: f" ~3 [" b. R, C0 H: d) t. U" N& d0 r. X$ o+ o& V
8 j6 K" A9 \' R- J! a1 z7 l  D1 b
# ?. ~5 n! e9 F
! g6 _& h& L4 u9 H- a" h4 r
/ K5 L  P; W: D* D- u
( {* {- ~+ i0 q" ~* \: z* M! Z

7 T# P& b# i! Z4 `  k! g) X  W1 {1 a1 Z

% U- S# V; p  g2 \$ s! ^6 m  ~8 z& z% h! K. l- [5 U

1 c9 u7 A& g  d" q$ m+ n; g9 r& E9 G1 `3 X* w/ `8 @# q8 U

% b: f9 h9 }( N* U+ i% R) n: d

( y/ R9 y* u! E% t. ^; f$ G3 B4方向
( w- A/ z# z* G% x* v- w3 i& l' P, n* a' H( j" J5 v1 @
元素排列方向丰富,如下图:
' s, B$ @; D' v3 w$ d: l0 g: J2 `# R& ?) t* y& T2 M

+ f; H/ C& ?# ]- Q7 c5 }7 W$ F7 k7 ?/ i: Q% w5 O4 ]) F
: i7 M) o; K6 Z% C! |- O

4 x5 O/ O% F9 h1 _# w2 J7 N9 t7 h" o! e4 {3 I( J

' |' f: ~$ O3 c. D5 E& F7 `& N$ E" ?
: R0 f& v- X' ]! f* h+ {1 |* C0 [% v3 k5 r

  `0 L! ]2 H  e& }6 P( q
! f0 K; J3 ^# N  G, n: B- P
1 Y' ^, i- k0 s
' u* b# w" O% @7 i! Q& s& Z+ Y' m7 V  U4 r  ]2 |$ y( n4 w- c6 w

! F) M- ~) i; b, i& x6 ]/ @" W* I0 V) k8 |

1 Q3 ~& N% x8 x; ]以上这四个点,是比较基础的,也是我个人原本就知道的知识点,而下面第5点则是本次设计所收货最大的内容,我们来接着看。
$ b6 U2 w: Q" l# F# P2 c. t
: {. t* G* B( K% g7 N# z. K1 X) `" h, Q. p; }$ _

0 g2 D" N* _; `. f. r# N' Q0 n" F: c! R4 i9 D: C. n

' F% K, }/ r# C9 l1 R4 P+ E5形状
0 K; {( s) C! o! r$ b3 A) p! U% l, S, X. M) w
虽然基础图形只有两个样式,但是由于画面边上的元素被切割,从而使每一个元素的形状看起来都是不同的,这样也就增强了视觉样式的丰富性,如图:
( `, t8 }, Y" ~+ ^4 F) t
+ L) _" M4 |# Q
& X' M1 p3 x3 h0 z3 B4 L
% S  k  M; [  F9 ]9 S& I' C/ p1 f* S: f1 g

2 k+ V% W) I+ t" ^& h3 a
. g3 ?) c5 ]  t& g) G# Y5 B9 Y
$ T  i: n8 }4 c: j) u" q
  f5 p& ~  ?" c) M% x7 Q! u9 P4 V" z2 C( B
6 F" r2 a  j+ m" Z8 x
! b7 g" y1 }6 v5 k$ u

; J5 W6 u3 J5 c' N" e$ q1 a6 e1 [6 ]* e

% I5 w% A. z3 d# p. {9 N6 f
7 E$ S; ~/ S; F8 u# q
6 a8 e5 Z& G; Z4 r; g. S  f0 Y; G# W% e1 B9 ^+ ^9 ^3 E
以上5点就是在经过分析后,总结出来使画面变得丰富的主要原因。$ a! B7 x- ?2 M2 s( A
( E( ^- D* O  r: |$ G5 `
3 i, x" ?' n# P3 r" g$ o1 I$ v

5 f5 H, w$ Z& Y, A& C8 x: w
, \8 k, o  `. ~2 ^+ G) q3 B/ e5 j+ b! F) N# M. g+ k
有了这5点原理,再进行设计,我突然觉得思路特别清晰,知道该怎么做才是正确的,于是我朝着正确的方向,很快就把之前的稿子优化了一遍,而且结果还算满意,如下图:
' _* ~) T- p* P4 G! S
9 }$ r, o# P# H0 O, \2 I9 ^4 H* ]  |! V# M0 D0 g

/ w7 N- m: f' d: g/ F( k* f  a, U# a8 F1 U9 S9 z! _
# w- Z. z" A+ L/ C. Y

3 c1 l( K" g  E6 c. B
) `$ m2 k- J* i) B1 O5 u' ~: x# y; ^% d& b+ h- R

# i- L8 e/ ~+ w1 u7 t1 j) H5 C" |  f+ Z* F( T; X0 r! v; u, t
& @, y2 Y% k  |$ ?( \& U2 D
通过这个案例,我不仅仅得到了一个满意的延展图案,还掌握了一种对元素进行排布的技法,最最重要的是我的思维方式有了新的转变,让我明白即使是视觉设计也需要我们去分析表面背后的原理,不然很有可能会事倍功半,浪费宝贵的时间!
$ U* M# b- Y/ T" Z+ S+ J6 f+ v
. d( C& Q# V1 U7 v! N. l0 S7 S( N. ]0 v8 E  [$ X& q) I5 H& D
6 n0 p7 Y9 H( j+ W, M
& P- O) J( v/ Q$ h

0 }" [% c/ q8 h: _5 J1 R9 _也许之后再给我任意两个元素来进行延展,我都可以在不找参考的情况下,短时间内做出及格的效果,因为脑海里有一套理论依据在给自己指引方向。
. r  z' S7 ~" G
; d, |1 [5 W. L+ d& a; n! M2 q: @% y+ j/ c

' B# F, e5 D) F% E1 y3 ?' m- f) ~" ~: n/ j2 A& h3 z
6 N* B3 Z: N# B% _- h
例如给我的基础元素是三角形和正方形,我用20分钟来进行图形延展,得到结果如下:3 P, x3 n" Q6 l; E; s8 B
6 M% Q0 }" t# p5 f" O
8 ]- R" m9 O4 y5 G8 L9 m: Z5 _. S
- t/ C* C! W1 a7 ]
" p' m) ^, z0 d, p% u( g9 C9 [6 d
7 r' B- f3 m7 p
- E! u8 K' S" I

" y/ S0 d* H" i8 ?( Y
( C7 X( q+ H3 F) p- B; z3 N8 O0 R, V" L* K7 j5 \1 h

" x. X7 a' N+ h1 u: V7 J( n' t6 U" y5 S% [' s. \+ f, M& h* A" L3 a

& u( ?3 E/ e" b/ M  G$ O3 ~1 b$ t; k* I% ~; x( B/ i
9 G3 @9 I  Q" B: }+ l6 W4 m
( _2 i& p5 O* P7 P. q' O

0 K: Y3 F; S" J1 x+ v& q0 d0 Z* m9 c4 R* I

: H9 {8 E2 w( ~# p% S9 k% t  w& @% c: e- X3 M$ h$ P/ n
很多时候我们不假思索的临摹了大量的优秀作品,但是当我们自己创作的时候,还是摸不清头绪,表面上我们很努力,但是学到的东西和付出的时间根本不成正比!我们花10个小时做的事情,也许别人10分钟就搞定了,而且做得还比我们好,为什么?因为那些人能够看清问题的本质,看清背后的逻辑,即使是视觉设计也是一样的道理!
: T+ ~% ?" R. f# O+ Z
8 d( w4 O4 r8 s; v, V
/ L" Q; U+ y1 i6 j, R
6 }) O: s2 s4 x8 f2 j, P. S5 \4 _
) r5 U9 R- d( K8 m
# Q+ s! U% x- n! G, Z不论你是什么职位,当你觉得成长过于缓慢的时候,别再一个劲的闷头干了,停下来想想,是不是做事的方法、思考的方式有问题呢?2 y$ d0 U/ @$ e/ h

! ~" R2 {& B* x9 d3 ]; r
, Q' \. U0 G7 @9 W
/ y6 ~3 l" E9 [$ \1 {
4 I+ c2 X" w! K. x7 f/ o4 C. X  x4 O1 l* r: q4 ?
# C* e/ }: U! G, K
3 g( t+ V. g8 S. z* s9 t
最后来总结一下,如何能让自己做设计,心理有底:( e! Z* x8 h) r

9 V9 \$ x9 D+ H6 Y7 a8 g$ A7 Y9 Y2 K; Y, s! }' V1 k
+ F3 o- j5 v- W
/ o  D$ [* k0 j# |' s/ \5 G

4 z' Y9 R3 g! p, K* X8 |) X1离开舒适区% M: f: X5 b9 I
) E- Y# w: w1 `/ l; l
2 k8 L# I$ L  J* u( e: I

4 e$ B2 w/ X+ v7 \+ p9 e, \/ Y0 v+ `  g% Y. T3 U, T9 |
% {, `) S( Z+ Y& @! l6 b( L
2分析表面背后的原理依据" E+ L# N$ [% U) ~( Q# {/ Y
+ B8 V9 f, _7 p

; c( r0 w8 |% J* @/ W
$ A: c5 ?  ]6 O9 z8 s- K* v" @7 W, x) d+ Q- S! ~

) Z3 j" V1 i1 v/ C3不断的实践试错