当交互设计师承担视觉设计

有人说,工科背景出身的交互设计师 跟视觉出身的交互设计 是的区别之一是,前者设计的东西会不够有美感,也就是很Low。虽然逻辑架构,特别是做大型管理系统的时候,可以很快把信息和功能模块归类,但是视觉知识和审美积淀,对我们这种工科生来说, 却是天生的Bug。

有人说,工科背景出身的交互设计师跟视觉出身的交互设计是的区别之一是,前者设计的东西会不够有美感,也就是很Low。虽然逻辑架构,特别是做大型管理系统的时候,可以很快把信息和功能模块归类,但是视觉知识和审美积淀,对我们这种工科生来说, 却是天生的Bug。

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

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

一、界面背景

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

1.1 大图

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

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

当交互设计师承担视觉设计

△ 图a

当交互设计师承担视觉设计

△ 图b —— 阿里云持续交付平台

1.2 白色+品牌色

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

当交互设计师承担视觉设计

△ 图c

当交互设计师承担视觉设计

△ 图d

1.3 纯色背景

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

当交互设计师承担视觉设计

△ Tumblr

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

二、页面装饰元素

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

2.1 icon

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

当交互设计师承担视觉设计

△ 图e

2.2 颜色色块

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

当交互设计师承担视觉设计

△ 图f

当交互设计师承担视觉设计

△ 图g

2.3 线条

线条最常用的场景是分离两个信息块。但是除此之外,还可以这样用哦!

1. 起到联系信息块的作用

当交互设计师承担视觉设计

2. 然后还可以强调或者突出Title

当交互设计师承担视觉设计

3. 甚至,一条简单的线条,也可以很美啊!

当交互设计师承担视觉设计

2.4 图片

真实的图片跟背景融合,也是一种不错的表现力哦!

当交互设计师承担视觉设计 当交互设计师承担视觉设计

三、点缀和动效

上面两步,其实已经足够完成80%的页面,可是,

什么?像PPT ?!

其实用一般交互设计师的思维,最后做出的成品,信息架构分明,排版合理,色彩搭配合理,也难免会做的像简报一样!很大部分原因,可能是因为少了Banner!(banner最能区别视觉和交互两类人设计出来的作品,这是我的鄙见)

不过Banner也不是每个网站都会有,要具体看项目的需求。那么剩下的20%,可以通过交互动效和其他一些小部件来作最后的点缀。

关于动效的表达

1. 如果是已经其他产品有的交互效果,可以直接打开网页,展示给开发GG看。

2. 如果是自己想出来的创新的交互动效,那么可以通过直接口头描述,跟开发GG沟通;如果还是不行,只能自己去用软件来实现,比如Axure、Keynote、AE….

关于点缀

1. 参照第二点,加上色块、线条、icon等等

2. 根据项目的定位,可以适当增加多一两种其他具有视觉冲击的颜色,作为局部点缀。比如:

当交互设计师承担视觉设计

总结

其实交互和视觉不分家,很多时候会有交叉。交互设计师,不能因为自己的产出物可以是黑白灰,就觉得可以不去学习颜色的搭配原理;不能因为Sketch是画图神器,就不去学习AI、PS这些工具…

设计无边,挑战很多,继续努力!

 

原文地址:jianshu

作者: 拉瓦不是Geek

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30444/

(0)
CatherineCatherine
上一篇 2017-05-28 20:51
下一篇 2017-05-28 22:59

相关推荐

  • 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的:

    手机地图  移动交互 数据可视化 移动大潮席卷了你我。 如何利用数据可视化改善移动端的交互体验?来自华尔街日报、Bloomberg 等顶级新闻工作室的新媒体从业者们是这样思考的。 本文的原 po 给几乎每个案例、工具都…

    2016-04-08
  • 五大新玩法和新设计方向,教你设计出不一样的年货节页面

    年关将近,今天就主要分享一下我对这些年的年货节页面看到的一些现象,发表一些自己的看法和思考。“天哪,怎么几乎所有的年货节页面都是红红火火毛笔字,高高兴兴过大年的手绘风格啊?这让我们这些不会写毛笔字也不会手绘的人怎么活?”“抢年货”
    “钜惠来袭”
    “有礼贺新年“
    “贺岁狂欢“
    “年货盛典”
    “年味中国”
    “春节不打烊”
    ………………..

    2017-05-10
  • 信息的收集、甄别和呈现

    史蒂芬说:用户调研帮助我们去理解其他人需求,从而我们可以用充分的,有灵感的设计解决方案来对他们的需求做出更快捷的反馈。用研同时也帮助我们避开自己的偏见,因为我们必须频繁的为跟我们生活截然不同的人们设…

    2014-11-11
  • 交互设计用户模型建立

    点击信息与交互设计关注我们!Persona交互设计用户模型建立:一、什么是用户模型?Persona([pə:'səunə]):(Persona是用户模型的的简称)是虚构出的一个用户用来代表一个用户群。一个persona可以比任何一个真实…

    2017-08-01
  • 表单设计:一页只做一件事

    一页只做一件事,并不是一定要在一个页面上只展示单一的元素或组件(虽然也可以这么做)。

    回想一下你第一次看到复杂代数式时的情景。这整个就是一团混乱的未知符号。但是当你将它分解,独立成各个部分,答案便水落石出。

    2017-04-29
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • Axure中使用图标字体【FontAwesome】

    我们使用Axure制作原型时,经常会使用到各种小图标。有些朋友自己制作、有些到网上下载,然后使用截图导入到Axure中使用。这样做非常繁琐,有些朋友问Axure是否能够像图像处理工具那样便捷灵活滴使用图标字体呢?答…

    2015-01-16
  • 当你画线框图时,你应该想些什么?

    我们每个人在刚入行的时候,接到项目需求,最初更多的会沦为产品经理的画图工具,帮他画好线框图、补全场景状态反馈等,这时候你可能会彷徨痛苦,感觉自己没有办法实现作为交互设计师的价值,不用彷徨痛苦,你现在需要的只是一个完善的工作流程,下面我就抛砖引玉来讲一下当我在画线框图时,我在想的12345……,希望对刚入行的小伙伴能有所帮助。

    2017-05-21
  • 据说这是一个用户体验设计师必须掌握的

      引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。 你最终想知道…

    2015-11-22
  • 细节体验|你离用户只差一个好的交互

    上一篇我们简单的提到过“在合适的时机出现”这个交互细节打磨点,今天我们继续沿着这个点,剖析一些常见的交互细节点及案例。

    2017-05-18