1、通过字体表达产品风格
. t- j0 C; z# Y3 O. Q2 W& x' p
4 Q K/ T7 c: M3 s视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。
; B! h9 F. J* Y
) M: s3 S3 N9 y$ k2 R0 _8 A2、通过配色展示产品定位1 Y6 U6 ^% E2 c( {
& s, Q- x& a# D% ]
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
5 E6 i# }& j& \6 A
+ l8 j8 f( J& k1 M& j3 |: a1 v7 q紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。
' p% G8 z' |$ V1 J红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。0 k$ r* [5 ^9 u2 V
蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。
5 ?% @4 \# P. Y* P橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。: P8 K6 Y7 ]; z0 x4 X( `0 G0 Y
绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。
- F F# l7 V: w3 p/ U+ ]) {9 G7 p; P8 T& X
3、营造统一的品牌形象; w! r2 Z$ Z8 ~9 B# o+ b
: [1 x* _" n+ N/ Q品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。
$ j+ p' b( c0 R/ t: ?, D# ^1 {$ D/ M) K3 ?5 [: {
4、造型让产品更有冲击力1 J9 `; Z; l/ J+ K* y
2 Q8 I' ~3 {& D
视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。
; f2 n5 x; d) X( K/ \+ v3 |/ j @0 X, M3 P
5、重要内容留在首屏
2 U+ S8 N1 E4 j5 ?1 O- D
# ? ^' M! X/ K0 O4 Q/ C/ E4 ^这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
! O- m5 \! }( t6 u: ~4 J" k; E3 N- F: z& h
6、让页面有层次有重点8 Z, k. ]& m. Z5 d
, }+ q% M$ |* i0 Q4 P5 V& l0 H+ p交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。8 Z4 F$ s, q2 G P( l" w
/ w/ f9 F$ x8 V. \
7、模拟现实世界匹配用户心智模型
+ W V9 i( n* |4 j7 Q( x* E3 Q4 S; g" E7 c, i1 H9 c2 k0 z" C
原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
0 u. |! }% M5 B) Q1 T6 Q- E/ x+ X+ V' _
8、插图让产品更有情感, |1 Y0 e$ K" j6 {. E% R
+ w% U# I2 j$ @
插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。
. m& E* o2 K8 R: G9 c0 |( N9 y+ u) i6 R* U6 b' s& D
9、巧用Icon，页面更精彩) R4 }- v! Z b4 J$ C
$ r: n, k; p5 u, xIcon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
( F# T4 L k7 m- }3 `% f; k8 z
" `7 P1 X$ `* E# P6 @; d10、栅格化提升用户体验和开发成本( U7 s. N9 p0 K( n! Q5 i* I
: {/ |: F' u5 n# Y8 d栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。/ f' K8 n, B& G
9 m" K4 f* { e, r- h
至此，视觉设计原则讲完了。
/ B* [! u$ l5 p& C/ x- ?' }2 n, p4 O* f0 ~; _- g
说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：; X7 Q) d$ h* q- L6 t" H- }
( p! w8 G7 o( _; u
1. 通过字体表达产品风格4 w" m3 A* [; {; Q& S3 Z! h( h
1 G5 [1 }' `9 R
2. 通过配色展示产品定位
8 l( r6 ^& p" f2 L2 X8 }, o4 B1 @" o& y# k. w
3. 营造统一的品牌形象
1 `" o( L/ n7 K4 L4 ]7 j. {7 a+ v! m, T9 F5 K, l
4. 造型让产品更有冲击力1 X7 Q6 M* k1 a( P4 W. f
" F* F: C% r' P9 b5. 重要内容留在首屏
& }. R( Q* P: e# g ]; E6 a8 z
* `/ a+ c- V5 o7 R9 K8 I6. 让页面有层次有重点
0 L! X9 G% G0 \3 e4 j8 k. w( c4 M5 T4 Y- _% }
7. 模拟现实世界匹配用户心智模型
4 B/ H+ M( F0 P
- {/ b; j1 ^. A5 O8. 插图让产品更有情感
5 {% I. h8 H9 J+ X; v/ Y0 Q1 Z8 E$ \% b4 x' i# X; J6 X( T
9. 巧用Icon页面更精彩
; y- l8 V" e2 R7 V& R3 t( o0 a2 b. X3 j
10. 栅格化提升用户体验和开发成本
' L3 ^% W% E$ A* U, c9 a- @6 B; \$ j$ ]& t& G
总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。) L' S* w! r5 Y+ [* R4 V
# ]7 @4 N: O9 x6 H6 v; q! j4 A第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。
* G- s, @/ r8 u$ v, D7 b* v" E4 ]8 T/ d5 ? N; O2 |
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。. A* Q. f$ x5 O
9 L% O7 M9 g. L% D4 W0 n; }! b6 j) Z第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。
6 p: b: u' ]1 p5 v
, P( k5 J# I0 m K这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
# x7 x) z! @: \8 ?/ ?! w5 P: E1 s5 J. ^8 h2 `1 y
本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处$ }, O; ? g6 j* m" i
% T& ^" ]% r% v7 u. R& O
|
