交互设计师如何短时间内做出像样的视觉设计作品？发布者：本站     时间：2020-06-20 14:06:11

当交互设计师在一个项目中需要承担起视觉设计的工作的时候，该怎么办呢？视觉设计的思维不像开发知识，或者版面设计中那些对齐理论一样，恶补几天就可以用得上。这段时间在4楼一个项目支援，做一个网站首页，交互兼视觉。对于新肉来说，还算有点挑战。

然而，如何在短时间内，做出一个像样的视觉作品呢？就拿我最近做的一个项目首页为例子，班门弄斧一下。

一、界面背景
页面设计，我一般首先会先从背景开始，下面有几个简单粗暴又好用的套路可以参考。

1.1 大图

最简单粗暴的做法是大图配大字，比如下图a。这种背景一般会给人「精致」、「逼格」的印象。一般可以直接用小景深微距的照片，也就是图片大部分都是模糊的。另一种可以直接在任意大图上面加一层透明遮罩。

然后大字方面，很多人说大图配大字，要英文字比较好看，中文的表现就很一般。其实不是的。类似Helvetica和微软雅黑这种系统字体，表现力确实比较一般，但是大家可以试试无衬线字+圆角类型的字体，比如圆体，效果还是不错的，见图b。关于图片的来源可以去www.unsplash.com（有梯子加载会快一点），里面优质的图片都可以免费商用。



1.2 白色+品牌色

上面说的大图+大字这个套路这么好用，而且还显得比较雅致，那不如整个页面几屏都用这种模式好了？当然也会有些网站是这样做的，但是里面有个问题是，用户在浏览的过程中可能会审美疲劳，而且页面结构略显单调。那么，这里就可以在大图与大图之间，用「白色+品牌色」这样的背景来增加页面的多样性。比如下图c 和图d（两个不同的网站）。


1.3 纯色背景

用纯色做背景，也是目前比较多见的一种方式。比如一个首页有4~5屏，每一屏都用一个纯色做背景，这种模式就更加简单了。



但是这里值得注意的一点就是，由于是一整个大色块作为背景，人的视野都被一个颜色覆盖，所以明暗度要调整好，太亮或太暗都不好。具体配色，可以去 //color.adobe.com 挑选。

二、页面装饰元素
背景作为一个地基打好之后，接着就是往页面堆元素了。一般包括文案和其它元素。其它元素包括icon、色块、线条、图片等设计元素，一是帮助用户更好地理解文字内容，二来增强视觉表现力。

2.1 icon

增加视觉表现力，当然是少不了icon。所以下次当你一筹莫展的时候，可以试试用icon把信息分条、分块展示，比如下图e


2.2 颜色色块

跟上面说的icon其实差不多，但是可以用地更灵活一些。比如下图f 用不同颜色进行分类，图g 用来突出Title。