1、通过字体表达产品风格2 y! e' p( R$ l$ H
: v: U; @* B7 @视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。) ^2 `1 D6 G8 G" ~6 Y# B
+ i/ h7 s9 I- _2、通过配色展示产品定位
6 p$ a$ }4 [5 I/ _6 C, J8 g3 w1 r& e6 g$ F' |& i
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
8 q, q' p# L4 u+ e" X9 f. O2 i# q! C' i
紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。
# }! Y; d, x8 J/ W- t! ~红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。
0 @1 g% O7 @3 K8 r, A蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。
1 k) d5 I; T$ g& H橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。2 \7 T L; l3 b
绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。
" {6 W3 D, M/ {+ g, C9 g8 g8 a; @" Z" S) S$ D; C; J- _8 d
3、营造统一的品牌形象
7 c4 _) `, A9 j' R
, N1 `% k) q% y) q品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。
3 P4 j2 g1 S" @, f$ k/ J; Y1 M
" A- [1 z& x1 L7 i4、造型让产品更有冲击力
7 g! S! K. G6 r: |/ e/ C& J/ K+ W F, L% U
视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。
; ]/ m3 k. T+ j; t% p$ J( F2 C/ y) \9 v [2 ^. Y: o4 W5 s
5、重要内容留在首屏5 o+ q. ~, }! Y/ Q% Z
" |5 E( c3 @8 [( I2 m) U7 ?+ x这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
" R' M% M0 `* e* P E5 A/ V9 C0 Y- |
6、让页面有层次有重点. J m& J i# i6 j/ }8 L
' G: s4 e- }" E. d+ _+ k! r( I
交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。8 l2 v$ F7 N3 O% R/ u
' D' \) L' S4 Y8 |7、模拟现实世界匹配用户心智模型
5 N$ S" B: W) o
, K: @$ r* l0 O" v1 }- W( ?* }原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
4 a6 v* F& Y2 k, ?/ n& d5 {9 t; Z% \2 w3 B! H5 X' }2 T
8、插图让产品更有情感# o! R' B3 J6 _
: F* I$ l& ?: ?3 \7 v. |: B, r/ q插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。
$ N7 v0 G9 R( a- I4 K" K5 X+ A2 K4 t- {3 k5 Y7 p
9、巧用Icon，页面更精彩
2 _% {; U! A2 q3 n& I. r. h! }( e$ G( e
Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
& \: Y- z1 v/ G* ^% ]/ I$ |2 K: R/ U, ?# X9 r' B
10、栅格化提升用户体验和开发成本
" y+ l! ^% d- ^4 c% j, H3 m4 `- Z; N8 K3 `8 k/ y
栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。
* |, S5 o! ~$ c" G: Z& `% E
; F8 q5 m/ _7 p/ B6 E& G5 I$ E o至此，视觉设计原则讲完了。
4 e9 d% H& M' i! d
) M/ L% Q) g3 P$ X说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：" T" l4 B9 W4 m2 V9 I; m! W
! e0 @7 I0 t: ^% P
1. 通过字体表达产品风格: m+ ^7 _% L8 c4 c
. V! d: ?* [1 n6 u: t8 ?2. 通过配色展示产品定位
: Q2 F6 ?: a# r% L$ b5 b' v7 C2 w V* ~2 N q4 u- I
3. 营造统一的品牌形象* X# U) s) N/ G3 ~
1 G: k% J* h/ D! F- O8 L4. 造型让产品更有冲击力2 i' x% X3 ~9 \0 {6 X! U
" X( N! g3 \# ^, ~) }. A+ T0 B7 S
5. 重要内容留在首屏9 u% h! I, ?3 O7 q" J/ e# F
) p, ^, v. J5 }0 |
6. 让页面有层次有重点9 T1 w n/ w% Y5 P5 s
" |+ [, ~& c( m0 O/ P! G# g7. 模拟现实世界匹配用户心智模型
! s0 C4 S$ A4 B: P! @
\$ {5 q" d3 B/ E4 b6 x5 b) }8. 插图让产品更有情感6 n; ?7 R( {5 I& u
8 A: V5 `9 v7 P6 Y9. 巧用Icon页面更精彩
! z8 H/ ? q" V$ m1 v
* }. C7 j8 l$ d+ s/ _) \$ h10. 栅格化提升用户体验和开发成本2 I3 Y8 w6 |9 D, ^: i
( l" n( ~ C+ S( Q$ v$ @7 P7 Y
总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。
2 C% R$ Y* {+ P4 b5 ~7 j1 ^' ?; q1 ~3 O2 A9 F
第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。
; Y/ u( J( {* k# g- Y- Z8 g: j& J) H' g) T$ ?7 D! n/ e. R( x
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。: A3 r/ p4 e; t; u7 z0 Z
; e7 x h8 l4 b% q( S* s; u; M) T
第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。, B' a" R0 T: y) }: _
. w; p; P, m2 u# x
这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
: I3 W* B8 N9 p4 H5 @
- f: K" F5 U* w& f5 o本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处/ E" @$ `% @0 L0 j; r& E% ^
9 W) C, [& T# E1 y! B4 M* w
|
