1、通过字体表达产品风格
) \& ]# X, `6 d
, g: v) Y0 I* F2 N( K6 q视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。
" ~- h6 N" s" p. d ^. |3 D% a
; S; p6 C6 [& }; E2、通过配色展示产品定位
1 y/ B4 W% U2 O6 ?5 Z" C1 e, Z0 b- h; }1 |7 h4 J$ t
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。$ [5 m% s+ H% }0 Y' l# E7 D7 e4 ]
" G) b" l+ P; y# L7 z# E) ?' P紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。5 ?8 p3 W. V( E
红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。0 ?: |! [# {$ b5 T6 |3 y
蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。
$ }$ i/ B6 H( Z9 N橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。6 @, F7 ?) o2 b: ]+ _
绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。
: g4 a5 G( E7 L% p2 w) Z
# o+ ]6 w4 ^5 w7 b! J j3、营造统一的品牌形象6 H0 D' i. H4 W {2 j4 R
. H( P5 D7 B2 s( L2 w2 l品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。! g$ q, h6 K6 e2 ~4 |* Y
$ X$ s# V7 J2 X* n7 C4、造型让产品更有冲击力+ n, I+ q1 F8 e# H7 o% _
5 J. x) L9 {6 g& \0 H
视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。/ [: \2 Y$ y$ K1 D0 A% z4 a
* L' Z+ g3 L7 O6 b- v) L* `5、重要内容留在首屏8 L8 H9 Y4 R$ n. H- g( l
. k+ u: ^: ^! c6 }6 \4 U' {; W这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。) e( S2 Y0 b$ X1 V& j
( l9 d. U. p1 Q9 [2 j. I6、让页面有层次有重点. m7 S6 Q9 ^0 S$ E" C
( ~1 d7 B; a5 c0 u5 t1 F1 W交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。
" K! B* Z+ P7 Q. a
5 u5 x: o9 f" ]( M6 O2 m2 N! I7、模拟现实世界匹配用户心智模型6 \: R, [: y$ w
6 b2 W3 E6 L; z3 w8 P2 c
原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。( O9 S, H7 \0 T6 Z4 A' e5 b
5 w3 U, ^" i- G- d$ k
8、插图让产品更有情感
) I1 T7 L2 \7 u. ]+ _) L& t# V2 \- ^! w9 l2 p. @4 o" A
插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。, O; s5 x0 V; q+ `# W
+ l$ c5 z4 K4 z& }# t
9、巧用Icon，页面更精彩
; Y% m- x0 q$ G" N3 D0 ^# _. t1 {0 w/ i
Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。' z" ?6 @# [( o/ c; K& x* Z. ?1 y
( X" y) `5 m# @7 k [1 h* ^10、栅格化提升用户体验和开发成本
# U- R7 o4 z# ^8 s: H% C% f+ L9 V4 j4 _0 g8 {" w+ @
栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。: ~( b2 o" Q) @5 O7 u- v9 H0 n7 ]: _
# T6 j4 b7 _ n9 n1 O c: H7 m
至此，视觉设计原则讲完了。) V; @/ ~+ n2 O9 [# u( c" A
. @2 w" l- b- d* r* h+ t5 O说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：* T/ G- X. m+ l: A
+ }; _3 o, K: |
1. 通过字体表达产品风格* A6 Z& w O; u9 ?2 H1 y
* z4 N$ S) K/ Z5 y2 \- F) I
2. 通过配色展示产品定位
+ p6 }2 s0 [, c; U8 V3 m; p; ?0 e
3. 营造统一的品牌形象
; j+ r" g6 S3 Q6 V% y' t" {" c; U8 `6 H1 L7 y5 k
4. 造型让产品更有冲击力
# L" ^8 x# t1 x- |' K" w3 W. D7 G- V1 `! r7 H# H
5. 重要内容留在首屏
3 K- r, \ t* `3 z+ |
# f! L6 O5 R* W. I7 n6. 让页面有层次有重点
9 S/ N; D% ^2 W; c! P' p( U) k/ C6 ], M" W
7. 模拟现实世界匹配用户心智模型1 b2 k f" {; y3 _8 I8 v
9 q7 F; Z- g& P& b( l9 a
8. 插图让产品更有情感
0 r& l4 I$ w1 i# ]& s9 d5 u
' b; r6 Q* \/ p6 ^7 d: a8 [9. 巧用Icon页面更精彩: ]' {6 [& N3 q7 s* |" X& {
# e0 O0 W6 J& G10. 栅格化提升用户体验和开发成本
8 u+ a$ |. C/ G6 a$ S
2 h% Q3 ~ n% x3 U0 U& G3 k8 P总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。
- t1 S; q6 {! c$ Q3 u' N4 \
( a" B5 Q; h6 H6 u1 [第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。$ q3 ?/ U( I6 O! Z3 ?; w; B
& q& l) Y1 Q4 s$ Q
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。1 u9 K3 o$ d3 X: J c) G( d; a3 ]
% n! M0 `( i* G% ~5 @' B. B
第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。
. [5 z9 K/ w- h8 z5 ~. E1 V d8 d8 q- Y
这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
$ Y# p! n4 S. a& K
1 q I- H+ B9 o. V& k9 U: u本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处4 F0 i; A; E) b' } T
# x$ L6 c& A: p9 q7 C" u! Q |
