1、通过字体表达产品风格
' K' @' d+ w1 p0 j2 A2 ~* ]( a2 r! G3 i% f
视觉设计中，字体的选择对于产品风格的表现是作用明显的，同一段文字，用不同字体写出，感觉确实千差万别。
7 _+ y( E1 u+ Z1 k: d, {) i4 W, _# e( A5 K% N
2、通过配色展示产品定位
$ \4 R. d) z6 v) b2 p# ?% t! q) U# n" i9 d8 M$ K
通过配色来展示产品定位，也是设计师必用的方法。视觉设计前期调研阶段，常常通过情绪版提炼适合目标用户的颜色，形成一整套的配色方案。
2 \3 @' ^4 g/ O9 X2 r& j" o7 Z7 k& A4 X! K( b8 l& m
紫色，关键词：优雅、高贵、女性、庄重、神圣、成熟、深度、神秘、时尚。; \) Z: a$ f2 ]
红色，关键词：艺术、热烈、开放、激情、积极、活力、喜庆、生命、成熟。' |2 }# [1 G: S6 B( F
蓝色，关键词：理智、知性、公正、商务、科技、严格、细致、严谨、公式化。8 q" i9 C2 a! x i, c) `3 C
橙色，关键词：阳光、辉煌、活动、温暖、记忆、家庭、健康、快乐。
& X3 m6 d: k8 ]2 @5 I) R M b2 v绿色，关键词：成长、朴素、公益、生命、安全、新鲜、和平、春天、大自然。' c8 O/ Z4 V1 o' e; N! m% Q; J
1 h3 w o) o4 H# X/ R5 @
3、营造统一的品牌形象
* o! x4 u& M, X* c" D8 }
0 }% u! j+ ` w) l% s品牌形象是一个很大的领域，具体到某个产品的品牌感，更多的还是通过视觉形象来传达。这就需要视觉设计师制定一套系统的视觉体系，让用户看一眼，就能清晰地辨认。
" S: L& W4 S5 J2 P- _4 c k+ `* H J/ D4 z5 ?* C2 ]
4、造型让产品更有冲击力
+ O" w! {( [: O2 H I9 L9 {4 O$ P
9 L" V+ c4 b5 s0 s$ h4 y视觉设计中，夸张的造型对用户的冲击力非常大，很容易一下抓住用户。
- z% B/ b: z* I0 H! R7 Y O" T' D& P' a2 `
5、重要内容留在首屏
7 x- N L3 b" ^2 {( d$ B6 Z$ _* S3 X' h
这是视觉和交互设计师中都要注意的，有时往往原型中放在了首屏，视觉设计时由于一些原因(加模块或是加高头图)又被挤到了下面，这点大家在视觉审核与测试中要格外注意。6 n3 A$ A W5 { L1 b/ T7 u8 @* B
" a- f. n. Z3 [( \9 z6、让页面有层次有重点
0 j l/ l3 w% {. e: ]2 F0 T [6 c, ?" b* A- X3 @0 Q' I. \
交互设计师完成页面布局设计，突出页面重点，方便用户浏览信息、完成任务。视觉设计阶段，好的设计稿对于延续前期交互理念，引导用户操作是非常有帮助的。( g c& x6 \: v: Z5 m
$ \; }- G: O) ~0 O# T9 o5 z
7、模拟现实世界匹配用户心智模型
3 t( B- m T3 Z* n
3 ?) |# L4 N+ F# d# o9 S. |' M& s- i' O原型设计中常说，操作方式要符合用户的心智模型，其实视觉设计也一样。把一些现实元素拿来，模拟真实世界，会给用户身临其境的感觉。
" G0 V6 j' ^3 y
' j" g3 n" q; `& g3 l- E6 a9 Z8、插图让产品更有情感
+ A8 f p% n+ }! `" E8 O' \! N9 o3 J0 R* u8 R6 A$ Y/ {+ G8 _
插图在文章页面中很多，我这里只举错误页的例子。大家都有感触，错误的体验是非常不好的，但设计师却用一张张插图，让这种挫败和焦躁的感觉降到了最低，化解了用户的负面情绪，同时产品也更有味道了。7 F% p* N# C2 L5 Z Q" Z Y
2 D+ p* D2 A6 r6 r0 }2 n; |" ]9、巧用Icon，页面更精彩: y# \% e/ |% Y; T+ J" @9 w5 A2 W, P( n
: ]- l" H9 E; UIcon设计是视觉设计非常重要的一部分，很多晦涩难懂的内容，配上Icon图形化解释，会更容易理解。相反，如果图标的设计元素不合适，或是将图标将背景乱用，也会干扰用户理解。3 T6 `8 m+ C% J3 _ H9 b
5 n4 `1 f& R. \4 E5 u1 I: l" M7 `
10、栅格化提升用户体验和开发成本1 b+ T! \6 ]8 _! `* n
- ~: W6 S3 y: U8 g- v" ^9 ~2 k" n
栅格化在视觉设计中，越来越受重视，究其原来，主要是三点：一是可以统一页面的布局，提升用户的浏览操作体验;二是将页面模块的尺寸标准化，降低开发和维护的成本;最后，栅格化也是网页设计专业度的体现。
9 t; x$ X; D1 a$ t, g9 g0 z. j
) ^" Q: O. J$ Q# H( B7 @$ m6 ^9 {至此，视觉设计原则讲完了。
1 ^: J- k- {" B {& @9 T7 E; G- H9 T& c4 r# S8 P4 k
说了这么多，最后简单谈谈作为交互设计师的我们该怎么做吧。思考这个问题之前，还请大家把以上的原则再复习一遍：( @+ { t+ {% ^, ]
* A0 z. Y7 b% p; y1. 通过字体表达产品风格) N) \ Y$ C3 m% ~; H- g
- `: |0 W1 ?9 j5 T2. 通过配色展示产品定位
( n2 q: ~8 X- f# A6 @+ h3 a
y/ N6 R, \ L# N, E3. 营造统一的品牌形象8 j8 Y! }( W4 R5 m+ [( a/ \
6 V5 T/ L3 I( G# `7 _* ?9 Y4. 造型让产品更有冲击力 c w: {3 M2 V7 X1 h$ ~
9 b. C' E0 j9 h( e. H5. 重要内容留在首屏
9 H3 |; o# H# h. b5 G% d8 w; a/ `& y
6. 让页面有层次有重点* @" h: h1 d- \$ I
$ Q2 M8 A9 x( K" {! N. S3 K7. 模拟现实世界匹配用户心智模型) \. `5 c5 R# E7 ~- l5 g
1 C( v) D) l' ^2 q* T
8. 插图让产品更有情感: _' E- }6 P9 k! j4 V8 v) T
% O1 D+ X5 a( U6 Y9. 巧用Icon页面更精彩
7 ?4 }4 ?3 j& T7 _' e! o, W9 J% E" g$ {$ q5 _
10. 栅格化提升用户体验和开发成本5 N; L+ C1 N: Z6 B. ]
7 ]0 p( U$ ^) ?! Z9 {- Z总的来说，我们可以把这10个内容归成两类，一个完全是视觉设计师的领域，以沟通为主;另一个，交互可以和视觉设计配合完成，沟通以外注重交付物的传递。
* H M/ E% [) I" v
( V8 h% E7 r- M+ L9 V' w% [* _1 f) E$ E第一类包括：通过字体表达产品风格、通过配色展示产品定位、营造统一的品牌形象、造型让产品更有冲击力、模拟现实世界匹配用户心智模型。
5 Y+ ~/ y. S" d( O9 S# j" l6 J, W* _2 A" _% @) D" I& @
了解这些内容，了解视觉设计师能做哪些提升体验的事情，才能更好地和他们沟通。让视觉设计师提早了解需求，获得对等的产品信息，才能更好地发挥设计的力量。
! {% u, z( }* w0 }8 f
1 o* Z$ |5 I: s' B第二类包括：重要内容留在首屏、让页面有层次有重点、插图让产品更有情感、巧用Icon页面更精彩、栅格化提升用户体验和开发成本。. u. [2 ?; X( e# S# h
5 T% L+ \" r$ h, @1 b% w9 b这类原则，除了和视觉设计师有效沟通，最好在自己的交付物——原型以及讲解中有所体现。比如原型中通过不同灰度色块表现设计重点、注重各个组件的栅格化、为重点内容设置插图和Icon的占位符等等。通过这种对视觉设计的理解、交付物形式的传递，配合视觉设计师做出更符合产品需求以及用户体验的产品。
/ @8 ]* b+ ~; Z5 Y- f$ C/ x0 U' q& x8 k) ]- R
本文来自: http://www.sushen-neiyi.com/ http://www.fengxiong-neiyi.com/ 转载请注明出处! v' L; b2 f# j$ q! q- H
# y, F% K P \
|
