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

有人说,工科背景出身的交互设计师 跟视觉出身的交互设计 是的区别之一是,前者设计的东西会不够有美感,也就是很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

相关推荐

  • 百度高级UI设计师:规范、方法、一致性,真有那么重要?

    本文来自百度用户体验部高级UI设计师大牙的佳作,此文是她对自身工作的一种思考:一个遵从设计规范,按照所谓的系统设计方法,步步推导而来的解决方案,是否真的就是一个好的设计?你的答案是怎样?不妨一起来看看大牙的吧~

    2017-05-02
  • 校园招聘 | 网易交互设计实习生

    网易交互设计实习生公司简介网易2001年正式成立在线游戏事业部,与广大游戏热爱者一同成长15年,是全球领先的游戏开发与发行公司,自主研发了《梦幻西游2》《大话西游2》《天下3》《乱斗西游》《梦幻西游手游》等几十款倍受玩家喜爱的热门端游和手游,更独家代理了《魔兽世界》《炉石传说》等多款风靡全球的游戏。 2015年,网易游戏正式开启“游戏热爱者”品牌战略,用自身行动传导热爱者价值,并全面启动“聚合精品,共享热爱”战略计划,以全球化视野为游戏...

    2018-02-10
  • 聊天缩略图背后的故事:你不曾注意的那些细节

    作者:银光   这里我们主要讨论聊天列表中展示的缩略图,缩略图通常是将图片内容进行一定的缩小展现,或裁剪展现,主要有两个目的,一是提供一定的预览功能,二是节省屏幕展示空间、节省流量。 用户发送的图片长短…

    交互专题 2017-08-07
  • APP特有的交互设计模式解析

      1、触屏滑动操作,移动APP端最基本的操作方式。 (1)屏幕之间或者页面直接的自由滑动切换 比如手机移动端的界面切换效果,可以滑动使用快速友好的切换 (2)滑动条目经行删除 横向滑动条目的操作犹如一汪清…

    交互设计 2015-08-19
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 团队项目现已在Axure RP 9中提供

    团队项目现在可以在最新版本的Axure RP 9 beta中获得!请查看以下步骤以开始使用。 在RP 9中创建一个新的团队项目 转到文件>新团队项目或团队>从当前文件创建团队项目。 为团队项目命名。 为团队项目创建新工…

    2019-04-04
  • 如何解答交互设计笔试题

    又到了一年两度的招聘季时节,这个时间肯定有一大堆人都在海投面试。恰好最近又做了一份笔试题,顺便就来聊一聊“交互设计笔试题”要怎么做?

    2017-05-20
  • 央视(传统媒体)与互联网巨头(AB)在新交互形式“脸部识别”上的互怼

    支付宝霸气回应:“被盗我全赔”表明了对于人脸识别这个技术领域有比较大的知识储备与研究,针对人脸识别交互本身并不是支付宝作出这个霸气回应的核心因素

    2017-03-17
  • 一样的页面,为什么英文排版起来就很好看?

    想起之前有一个朋友私我说,想知道英文排版怎么设计?为什么同样的页面英文排版起来就很好看呢?想必大家也非常想知道吧?那么,下面我们就立马来分析分析,听完你们就会恍然大悟!

    2017-05-17
  • 经验总结|品牌视觉改版要如何开始做?

    一个成功的视觉改版是靠30%的探索流程+70%设计师水平。探索品牌感觉 → 发现提取关键词 → 寻找对应素材创建情绪板 → 指导设计发现提取关键词(我们自己) → 寻找对应素材创建情绪板 → 探索品牌感觉(让用户)→ 指导设计请问您觉得目前我们产品的视觉风格怎么样?

    2017-05-03