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

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

相关推荐

  • Axure RP 8 入门手册 – 第1章(上)

    第一篇基础第1章准备工作与注意事项第1节下载安装Axure RP8第2节原型相关的文件类型第3节文件自动备份与找回第4节功能区域的视图设置前言【网络稿】2015年夏天,经济形势日趋恶劣,小楼所在的公司业务规模大幅缩减,无奈之下,公司决定各部门进行裁员。小楼断然决定主动申请辞职。2015年8月17日,AxureRP8.0Beta版首次发布的日子,小楼提着收拾好的杂物袋,站在公司的门外,看着公司的LOGO墙,旁边是一年前来到公司的大学生苏苏...

    2018-03-29
  • 交互进阶指南:如何扫除交互设计路上的3大障碍?

    目前网上基本没有对做交互设计师的难点进行系统的归纳和总结。基于这个原因我总结交互设计师的三大障碍以及如何扫除交互设计师路上的3大障碍。

    2017-04-29
  • 交互新人眼中的交互设计

    从一开始选择做交互设计这个岗位,我就一直在思考:“交互设计究竟是什么东西”。近段时间以来参加了一些面试,每次面试都会让我去重新思考一下这个问题。加上最近又做了一些工作,看了一些资料,对这个问题又有了一…

    2015-12-25
  • 交互设计 | 如何创作一本足够打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,汉艺国际(H·Art)为大家带来《如何创作一本打动考官的作品集》系列第九期,与大家分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计必须要强调的事儿①——交互设计不仅仅是网页和APP▼交互设计并不是一个单纯研究电子产品用户界面交互的学科。 交互设计包括但不限于用户界面设计...

    2018-04-06
  • 解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 京东金融产品体验报告

    (1)产品定位这是一款多功能互联网金融产品,在满足大众理财(定投、基金)需求的同时,主打白条(也就是借贷)、众筹,简单说,就是将消费金融业务拓展到商城平台之外的大学、农村、旅游、企业采购、租房等8大场景领域,尽可能覆盖更多的额业务。

    2017-05-20
  • 美国直播这样玩:以Facebook和Snapchat为例

    中国的视频直播市场正在进入百播大战,优质视频内容正在成为稀缺资源。而美国直播市场经历了2015年全面爆发后,在内容生产上正进入PGC和UGC直播齐头并进的时代:传统媒体积极拥抱直播平台,社交网络更是借此拓展出…

    2016-06-01
  • 关于微信聊天与朋友圈如何快速切换的小讨论

    用微信时,你是否遇到这样的情况。你正刷着朋友圈,享受着各种鸡汤,这时候,你收到一条微信,一看是女王大人,不得不回。你诚恳的回了一条,等了二十秒不见有什么回应,于是就退了出来,进入朋友圈找到那篇没看完的文章,没看两行字,那边就回复你了,于是你又乖乖地回过去,来来回回,很麻烦!那,为什么聊天和朋友圈间不能有一种更快捷的切换方式呢?其中A代表微信聊天页,B代表微信其它功能页,X代表实现A和B快速、便捷切换的操作或交互方式。我们不妨先来分析一下聊天页面的功能分布和操作特点。以安卓的微信群聊为例(不要为为什么),其它类似,一共可以分为三类,共14种操作,与手指间的交互动作共有5种。定义好问题、了解好现状后,我做了改善的尝试,下面将有可行度的一些方案与大家交流一下。

    2017-06-03
  • 在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • 交互设计师如何进行风险预判?

    在公司工作,任何职业都不可能单兵作战,协作是永恒的主题,而每一个需求和任务的实现,都是各方通力合作的成果。作为交互设计师,除了做好自己的设计工作之外,还需要花费大量的时间与产品、运营、客户端开发、前端开发、后端开发一起协作和沟通。

    2017-06-04