1、通过字体表达产品风格
% ]# Y& s: r# X
; P9 P* Z6 C$ g% w# e视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。! b( G+ v6 [( ^
6 _3 \, t9 c0 K/ k
2、通过配色展示产品定位1 B6 D* d- K P4 R3 d" \3 G1 w* x. b
! @) Z* ?4 q' q1 N% T
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
1 A; P; G& l2 J2 {' R7 `8 p# d! I2 y: b" }7 {; C
紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。
- C6 x- q# t' s) z5 I; {( C红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。
: h* b" W7 ~2 r- {6 g蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。
9 M8 |- }: p" o1 z橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。
! R$ e) R: j) q; K: p! _' E绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。( g* F% D- h9 i4 d1 i& o5 N0 U
$ R. y; ]! _/ h: a" t# M* ?% S3、营造统一的品牌形象
5 W: N6 M2 G" Q% a9 v
: l$ E1 _- d) R品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。
$ y% {) Y9 w' ^" }1 H8 V# U* L' z, `$ ]
4、造型让产品更有冲击力
2 o8 p! |) l* A
8 S) q6 e( S& b' K/ p3 a1 K2 W) k视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。
" S1 `: h( h# F7 e% l0 q/ Y$ b% h, x* N% z7 G' n! o. d& o1 a
5、重要内容留在首屏
4 D; ~; J3 c7 ?, T0 x0 l, R! k
0 y* }5 C$ T1 W( \9 Q6 b这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。
1 H" c! a& a9 l( X
) r+ F% O2 j+ S0 H+ V6、让页面有层次有重点. _6 n5 ]: t* h/ G' j
" h& Z" L$ o! P$ i' @
交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。
# Y& V; J6 A* D/ c' R" C5 c# J/ w7 X) e! @
7、模拟现实世界匹配用户心智模型5 b. ^6 a) ?/ s& X0 j
, I9 L8 ?+ Z& r! Y& L$ P! P原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
/ j$ {2 S' M/ d, y% f. x# O; D
( y6 ^1 q7 d* R3 b8、插图让产品更有情感
7 B: Z3 ^4 `9 X9 C9 l
; L- E8 ~+ x" d$ L+ I2 j6 b% J插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。
1 C# L2 v6 E i# u& P
9 A$ ^3 q9 E! Q4 T9、巧用Icon，页面更精彩' s4 \6 }7 ?% i8 r. e; V; ?0 B
: O( V; V& g& d; v7 ?8 v* J! y$ k
Icon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。
3 ^6 C$ L! w( [+ g+ X3 J# ~0 ^) D; X- J( [# M
10、栅格化提升用户体验和开发成本3 g! T- o; b0 s- O0 }* F: _9 ?2 u- r
, a- e3 y x- X3 i0 W# @/ z* b
栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。
# L2 W$ V- H8 w" c6 B
1 n1 V) L$ O% V# z8 D( T1 y4 G至此，视觉设计原则讲完了。: U ^ T* b- [
, r5 d3 e7 }2 n7 s' B0 m1 T7 T说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：3 o$ D. c; l4 N- p
7 D/ p! T# R4 F' P" u
1. 通过字体表达产品风格
. ?! X6 c# _: {" X$ {7 n
$ F; s- m+ H5 p2. 通过配色展示产品定位" i3 w9 O% [1 x7 O0 I3 K, F
& I9 o `: f M' e
3. 营造统一的品牌形象
- A, D6 C6 M6 [ V# S* u- O( T3 \, j, I1 b' J E I7 m7 M+ g
4. 造型让产品更有冲击力" }+ Z* y" Z, h$ ?
8 x. Y+ |& B0 _' p }
5. 重要内容留在首屏
9 |* p$ U a0 h% Y/ M" r8 m$ O: M3 ^. r$ }; `
6. 让页面有层次有重点
& Q3 I' \( l9 x {. ^7 V4 R" l( @4 M. E' x& }
7. 模拟现实世界匹配用户心智模型
( o, f9 F- L3 ?$ s5 F8 A' p& X0 o1 T0 l& v. T
8. 插图让产品更有情感$ S% ^' K& @8 G8 s, ?
X9 ]1 i% z& f, U/ R2 s# Q- A
9. 巧用Icon页面更精彩) `* Y* k8 H4 \ r1 D2 y- \
3 v( \2 {& I9 I( N) q2 |
10. 栅格化提升用户体验和开发成本
& k! m3 a$ | c, V$ r: }3 i1 W" A
# l1 }1 q& r* A3 Q总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。
6 t2 f: z1 m% b; V9 R3 O% z9 n
- | ~' {9 B* W) Q, o2 q第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。
0 W. t/ w! ?3 h1 h, q8 @3 m) e. M E9 g: c% J
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。
( m% v6 B- _ ]% l& e
) X q# Q M9 ]# ^4 I4 L3 K第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。
2 Q9 Z2 v- P# ^! W$ r
9 N) {- L/ d+ B, o这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。( n* C$ q0 \. E, Z6 x* i
7 T* |4 ~! U+ D9 s* ~1 T9 d本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处
4 K* s2 X: I, S( x2 s! v, r4 D* u: [2 y3 Z- j4 m1 o
|
