1、通过字体表达产品风格- A# i/ p( u+ T+ b
. E6 K7 O4 h: u- o, C/ B视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。
8 F1 ~' Y9 ]5 _1 ~9 ]3 X9 @; W0 b0 e, l( e2 k6 q
2、通过配色展示产品定位
$ \8 D- J: u) L9 k' Z x6 B5 C) M" _( Q$ B( ~8 a) f
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
4 d* p5 l. [% h8 b- n: \: D: V$ o$ L, _- A6 W( K
紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。
, g1 O" n) s4 Q/ T红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。; K, Q3 a7 g0 A- ?8 W
蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。/ n7 w1 Q. u2 y- l
橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。5 K2 T" y- f7 l4 z# w
绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。" B. j6 P7 x* {5 p5 S2 [ V i
0 l6 ? |7 w9 a( q3、营造统一的品牌形象
/ M4 K6 I# G- _% a6 v3 C5 s% ]5 t* `. I6 E' s
品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。* Y3 c* |+ `6 Q# U& e+ i
" C# R0 Y3 o+ b/ t
4、造型让产品更有冲击力
2 G" s6 o! M' O$ r# l1 \8 O8 C0 w! a; D1 Q. {& R( q/ i8 `! a# {
视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。1 [( E+ j5 g8 t2 ?
! D6 Z4 [$ j( F7 P: X. S* m
5、重要内容留在首屏+ G5 Q' G# \5 e. }5 S: r
1 ?+ Q0 D8 X3 C. [这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
5 c4 Y1 \9 j, t2 K W
4 g% V3 q* x4 w* F6、让页面有层次有重点
: e- F4 d. p8 \! K$ g4 f9 o9 L8 o( c0 E- p. v4 F2 q- W& l2 u, Y
交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。0 ~& c" x' N2 F: a7 l
7 g/ a5 q2 `3 ]# Z
7、模拟现实世界匹配用户心智模型
' \5 U8 @8 x' N0 i6 _' y5 e6 x8 D; g. p0 i) n$ x, S
原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
8 g' C# E. n" G4 M4 Z6 Q' o. m$ ^" Z" v0 r, X0 X6 S% s
8、插图让产品更有情感
~# w [9 e! _: x6 z7 W
) ]/ ?4 k$ [) M0 @插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。
7 U( O, I3 O! ?$ s( W" F/ t1 o7 @+ g$ f4 Q* q
9、巧用Icon，页面更精彩# T/ F* q W' K3 j# u- W% }3 U
+ r8 |& e, v" J1 z) y8 J4 J& G+ uIcon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
. M" R: n; z& Z% G* [: n5 R
; F/ M! V8 @( r0 y+ a10、栅格化提升用户体验和开发成本5 ^. v) r7 p) j
8 v8 w, y. O; O4 u* Z栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。
/ o1 v3 K' C6 Y- x/ l* j g
+ y$ i% a% s/ Y6 j0 T/ D至此，视觉设计原则讲完了。8 c0 P! d1 w* I- f* Z7 G5 D& T
: |) d, d6 h; K6 n ^
说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：% z |3 d( G" X% |
) ^7 N8 c! m# ~1. 通过字体表达产品风格 R& b, {! w: K0 o1 k
0 [6 J; A% L+ ?* r4 K8 X$ N: i2. 通过配色展示产品定位
5 K/ \( b0 N& v# L# C( b
1 w8 |9 M" [$ c! C3 _3. 营造统一的品牌形象
/ T5 l8 j% f0 p- K$ N" m8 t5 H1 K& V$ E
4. 造型让产品更有冲击力
9 |5 ]) x1 e: i' _& {" _4 o4 C! ^; x8 A" x% @% n: G
5. 重要内容留在首屏
7 {9 g, b0 a: K6 M
: f/ p& q- V8 @6 T% }4 u' Z& d: K6. 让页面有层次有重点4 F* l0 {; i# _. H, Z1 J' F
8 j* I) \" f- i; R7. 模拟现实世界匹配用户心智模型: a* l: t5 ?: B8 I9 L$ K& m8 H
- s8 `! I) t; `
8. 插图让产品更有情感3 J4 u6 V1 W1 w/ Y1 d+ I _
3 [5 e/ {/ [; g' n5 I* i
9. 巧用Icon页面更精彩* S3 ?: A- s6 |+ v0 D
6 t' {7 Z5 p. e( j& o1 t- g3 B* L
10. 栅格化提升用户体验和开发成本4 c0 w" e) M+ {* y: O9 Z
7 @3 ^5 w5 |# n( E- a K: o y5 U; w
总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。
8 t I8 o- b- d9 U" v- M& v, s% W+ G V9 H- T
第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。4 y* I( D8 o" g" _
) g, S1 d, t! M; n5 R$ e5 D
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。# R m- J Y$ r* s8 q& z
4 ^3 m% A3 _ v; g! z
第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。9 s( a6 i. r z6 g+ U! O
[6 }/ z+ E2 H这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
6 V8 ^) R- _2 X5 i7 [6 w$ W5 i% g1 F6 y1 U n, N1 y- E( _
本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处2 a8 H z# b3 ]0 l* ~+ ~ E: q
5 v N0 F; a5 W4 \' ] |
