1、通过字体表达产品风格) Q4 I6 y- `3 l: M' r Y$ Y
1 x; S. E5 b& |' g, }
视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。( {1 i5 h9 z5 Q' V" R) T6 a
4 O( j8 J! \' p, P: D0 W. l
2、通过配色展示产品定位
% z( x5 p) k, `/ ~3 t% s: H8 m: @+ c- ^! ?7 o
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
2 F7 U7 Y/ F; g6 }
; C- P3 L2 ^+ W. ~8 x3 Q紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。, k; | ~6 I2 V2 e7 G2 g4 @, m
红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。0 Y# Z+ o, W9 Y4 e
蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。
; w8 L) ~# F J; Q橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。
B+ Z9 g4 X9 z, C5 r. d# l* \4 D R绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。9 h9 U' g) D: f" X1 {4 V- q( m
1 h) Y: q( j9 P" h5 G3、营造统一的品牌形象9 R- r/ ~$ D3 ], _2 A ]
0 I; q+ e" V1 v& x9 ^品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。. l7 I- X: G" t k' E$ G
/ ~+ f( q8 M) ^' M/ W5 M
4、造型让产品更有冲击力8 h! o* l2 ?) }0 n- v
; `& W* s$ [7 L视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。
/ {% B z2 H# X' d. P$ Y
. G: l7 C( `) v/ I: E- u5、重要内容留在首屏
1 y. s, ^3 ^) I3 m' M9 q5 U
; y% H* s" T8 d$ j& f. A3 S( X这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
" z% C' e. H1 I0 U/ l9 F/ Z' b* O0 V& T7 U5 [
6、让页面有层次有重点" e6 {' p& O W7 g5 ]& O6 T4 E2 v: M
" a. Q/ j( n8 G1 H+ D交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。 ]% b# p$ `1 @3 z. |0 X |
1 H. ^ F1 \" C
7、模拟现实世界匹配用户心智模型. `0 D* h( x" U$ R
+ t5 H ^( d, L# \原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。+ l0 [ ?# z8 P! ^0 u! R
% n3 X0 z6 Q. U
8、插图让产品更有情感
+ @/ x0 O+ W$ V4 g& ]& X( p
2 T7 ^! f' h# o插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。
( j5 y9 C% s8 Q" ?2 D7 I7 V6 u4 i& n. [1 j3 F# o7 p; C: ?
9、巧用Icon，页面更精彩% `' y- D8 l7 b
6 m# s/ R" d6 V2 U3 {- f
Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
. z/ D! i# l- v* `* [( D! ?/ n( I9 `+ E* F, D
10、栅格化提升用户体验和开发成本: j1 e s4 B: A- F# V
/ `, v) f" v" E$ t8 L8 }
栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。$ M# i: B; Q" N
# ]& }6 N0 E3 w( ]
至此，视觉设计原则讲完了。1 D d1 O' V0 Q: B# t
4 Y2 h2 b5 P4 J4 X说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：
' f# e8 E% z! \) R9 v* u1 h L# F3 y# W- I: e1 V6 l$ p I% b
1. 通过字体表达产品风格" }4 z- y3 v$ Q. T4 y5 l5 V* d+ d
7 k$ c" W$ U! t7 U( r2. 通过配色展示产品定位
$ j0 v" i+ U# h* }
: W) |* e7 q8 K1 f4 R2 p) F3. 营造统一的品牌形象- G! H. g0 s6 ?; N* b
# L+ }' p) [8 O9 h
4. 造型让产品更有冲击力
% X8 a' B, \2 d' n3 E4 B N; a* R+ D7 H% c+ Z J2 H0 \. Q
5. 重要内容留在首屏 R# _7 `! Y# m
# u( E; v5 z G" }2 a* ~
6. 让页面有层次有重点) B& [7 `* B e
% w0 r& G0 [7 a% U1 }6 Z
7. 模拟现实世界匹配用户心智模型& q s! Z" ? s5 i
4 O9 _* y. Y( s$ |8. 插图让产品更有情感
3 O6 x! N: d2 o$ x1 m2 @7 n
0 J. g7 x' M! G/ [9. 巧用Icon页面更精彩1 u' u$ q: y6 C0 V) K
8 _( V% s* m* ~7 a3 D, \
10. 栅格化提升用户体验和开发成本6 h; T5 q$ A4 F7 \
5 q3 S/ u) G: u1 x/ t/ f: L/ V! I总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。/ J! ?( g S+ P+ Q% ]+ }: i! A% o2 ]/ S
- ~3 s, ?( K) K5 E
第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。/ D9 Z5 D/ G- V
( t9 X, H3 s2 b% b+ p1 J6 G
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。% J, g- X# h+ [$ o" n, C
, b2 i+ p) w8 ^* H第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。 P% _8 ]% Z* X9 _: Z
! ^+ U1 y' M* Z这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
9 Y% x$ K9 |) d0 z; J* d3 I( h. A/ k
本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处' ~- f u. c5 A9 h! Y
; V& M1 n& ^! \9 }2 m: h |
