1、通过字体表达产品风格
" `. v: }' ~" Z+ e) n2 y) K9 ]% O9 y/ G
" j& N" [# M5 }* _- S视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。0 x# o- ^+ X' y$ P* E$ `
. O# }7 m+ i6 ?6 F3 P/ c2、通过配色展示产品定位- Z t$ K' M7 Q! D1 S
) w! c0 [$ M& c4 }/ W0 m9 [通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。$ f3 }# n' x* d% s0 g
1 t m, W6 y. {+ p. X9 z
紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。
' B* m8 [! K7 a( q3 `红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。
) D# l( S" Z" J# Q6 J, [. X& r蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。- O1 c/ m* t* ^6 z) q. L$ X
橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。
+ ^0 G; H! F/ C- m2 X/ m t绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。
+ F: ~ j: Y3 C0 x$ p# X4 q/ J1 f6 j& [; S& V
3、营造统一的品牌形象
. y3 U" ?4 i" c' }" L; e
. {( e; ?$ j& `) _品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。
4 u5 j: x+ A" g0 n' v
5 ^6 z7 A3 z1 ]/ @4、造型让产品更有冲击力! q3 B3 K: e# o* d! H* m
, v( X5 a0 P- K视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。+ K+ O* H1 v7 y% B$ W
0 U; S( l/ `5 n+ q5 e4 j3 J1 c
5、重要内容留在首屏1 I2 b; Y0 |4 a& X0 c5 B: z
/ C5 M; _, _ t0 d. c# R% ?4 _这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
% }3 T' _; I- W+ W
+ o v) c) V# F9 `6、让页面有层次有重点
6 L, V4 `2 X: g) X' X& u# c
) M; U( f6 U3 \( _; |( m+ l交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。
+ |2 E, b1 R+ @: i- r- {/ a$ @1 E; I9 c1 t4 y
7、模拟现实世界匹配用户心智模型+ F& m& p! @) Z( e' _) b+ A
3 Y% c# h* u, M" G3 W+ d
原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
( Q9 f/ A3 R' z% a9 {$ O; Z
. G3 R8 ?+ Z4 D- |+ l8、插图让产品更有情感# n; n, ~) k4 T
* u2 |' ~) g, i: L插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。1 t) E7 \3 [* T1 ]
4 X+ R. y9 P+ @( T( [- B9、巧用Icon，页面更精彩
- @+ R% w+ A1 f2 o+ S8 g: O2 _
1 |& d0 `: e \8 S* ~* f I4 qIcon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
2 v r; |: ?8 B V* N* X0 n$ \
% m* m( U9 D) n" W! M9 b; r10、栅格化提升用户体验和开发成本
$ m% S! y: j, c* a- C4 a
* M1 R5 G, M; R3 z0 {* |栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。! c* e" ? B+ o+ W4 x
7 W' `: |. u& E9 w7 p, a至此，视觉设计原则讲完了。* u6 J6 [) h4 _. E# a0 W) `
9 S( [! W& q3 L, b( a+ a
说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：8 B3 m3 L& Y& p5 g
: x/ \- W* |) \& m; J4 H4 ~
1. 通过字体表达产品风格+ @) P* W' i: R
) u0 I; M+ a& C/ C- l! y; H+ @0 q2. 通过配色展示产品定位
5 w$ l8 z r! [0 V: O7 L) m: b$ d- B7 a3 i5 x& A T X
3. 营造统一的品牌形象( v8 `* c+ \- |
, C" i. W1 {7 l
4. 造型让产品更有冲击力
$ y& a4 Y- ^8 _1 k9 I* O
" ~# K0 [% `* W5. 重要内容留在首屏, \. c4 b9 Y5 Q) l
3 L' n& b: w* O8 Q+ \6. 让页面有层次有重点3 B* ~6 Z7 h9 ]+ G( v: e+ w
) [% u2 C: x# M& p5 Z$ M0 v7 F% u! l
7. 模拟现实世界匹配用户心智模型
8 i& [2 z8 M6 t" B7 E9 N/ c% i) x. ^3 w: r7 N
8. 插图让产品更有情感% D) [7 P! Q- d
; s; B2 u$ x* }! V9. 巧用Icon页面更精彩+ M/ Y& r$ [% [/ k
$ x8 W2 X! i& ?* N, t5 V
10. 栅格化提升用户体验和开发成本
! G0 _/ r' p9 ?# `& \. t: _! E& d
总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。- r1 _" n; t: h/ M. H6 \: j* s2 Z
, _' ?: j# M n' p, |& j/ z
第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。& z* @, c; V! C# h, [. c
& X; M+ W) w& J$ K+ O2 V9 _' @, g3 S
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。
: J. a# p2 |# J5 p9 w* W2 C. @
& C2 @; e8 J" b% p第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。
: v/ e. A8 r5 b; z& \2 N! s
! r: M! |: d, ]" @3 H2 [2 G. L这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
9 a8 f* R/ Q" m* ~3 y" j @( y# k% |% S% A" H# s
本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处
8 F$ M2 ]0 n7 ~
- _3 W" }, Q" d0 X |
