1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

腾讯高级设计师:交互知识树系列之视觉思维--九分科技

时间:2020-06-23   分类:交互设计    作者:网络   来源:网络整理   点击:95

腾讯高级设计师:交互知识树系列之视觉思维--九分科技

copyright 9fen.net

内容采集来自9fen.net

一个好的设计,要兼顾可视性和易通性。所谓可视性,就是让用户知道这个产品怎么用,怎么操作才是合理的。所谓易通性,就是要让用户明白你的设计意图,明确地告诉用户,你设计的这个东西是干什么用的。——唐纳德·诺曼,《设计心理学

九分网络

交互设计师为什么要会视觉?不就是画一个黑白稿,上面都是线线框框的,写个标注就搞定的事情,剩下的美化交给视觉设计师去做不就好了?

九分网络

如果你真的这么想,那你可能还没有理解交互设计师这个职业的重要性,也忽略了交互稿中所能传达出来的庞大信息量。 www.9fen.net

交互稿作为产品从概念到实现的第一版原型,它需要承担的是产品设计团队对于这款产品的底层设计理念,它的设计过程需要凝结交互设计师大量的思考和心血,并不是那么容易就能做好的。

内容采集来自9fen.net

交互稿的定义过程

www.9fen.net

定义形式要素、姿态和输入方法; 内容采集来自9fen.net

定义功能性和数据元素;

copyright 9fen.net

确定功能组和层级; 内容采集来自9fen.net

勾画交互框架;

www.9fen.net

构建关键线路情景剧本; www.9fen.net

运用验证性场景来检查设计。 本文来自九分网络

回顾上面的过程,1~5都要用到一定的视觉思维,这还真不是一个纯逻辑的事情。一个优秀的交互设计师,他做出的交互稿不仅逻辑清晰,能让人一眼就看出每个界面的视觉重点、信息层级,同时还标出了用户使用的流程步骤、转场动画形态,直接把整个产品的完整形态展开在你的面前,一切了然于胸。

本文来自九分网络

视觉思维同样也是交互设计师的灵魂技能,只不过侧重点不同。但视觉思维中所包含的概念和方法实在是太多了,我在构思今天这篇文章的时候,足足花了两个多小时才想好这个提纲,把所有交互设计师会用到的视觉理念最终融合到三个角色中,理解起来就相对容易了。

九分网络

腾讯高级设计师:交互知识树系列之视觉思维--九分科技 九分网络

www.9fen.net

视觉思维的三位角色 内容采集来自9fen.net

建筑师:他赋予界面蓝图中每个模块在这里的理由; copyright 9fen.net

解说员:他让用户看到界面后自然就知道如何使用;

内容采集来自9fen.net

漫画家:他会和你对话、给你反馈,还会讲故事。

九分网络

一、勾画蓝图的建筑师

腾讯高级设计师:交互知识树系列之视觉思维--九分科技 www.9fen.net

copyright 9fen.net

1. 场景

腾讯高级设计师:交互知识树系列之视觉思维--九分科技 九分网络

本文来自九分网络

在开始设计界面之前,先想好以下几个问题:

copyright 9fen.net

这个界面是在什么设备上(Web、手机、电视)呈现的,它的分辨率是多少,适合的字体大小和最小点击区域是多大?

copyright 9fen.net

用户在什么场景下使用这个界面,是坐在电脑前、走在路上、躺在沙发上还是在开车途中? 本文来自九分网络

用户的基本输入方式是什么,是鼠标键盘还是触摸屏,或者是电视遥控器? 九分网络

用户是怎么进入到这个界面的,它的上下文界面(Context Interface)各是什么?

本文来自九分网络

如果你没有思考过上面四个问题就开始设计,很可能犯一些基本的错误:比如为高分辨率屏幕的手机设计了一个文字小到看不清的界面,或者是要用鼠标才能点到的汽车中控台界面,这是要让人难受死么?

九分网络

交互设计师也要考虑场景,为的就是不要设计出一个看起来合理,但实际上没法使用的产品。 copyright 9fen.net

腾讯高级设计师:交互知识树系列之视觉思维--九分科技 copyright 9fen.net

本文来自九分网络

2. 区块

设计关注的是最适于传达某些信息的呈现方式。——凯文·米莱、达雷尔·萨诺,《设计视觉界面》

内容采集来自9fen.net

界面设计是一个和信息打交道的工作,你所要展现给用户看到的一切功能其实都是信息的组合,这种组合的最小单元我称之为区块(Block)。 九分网络

以我们常用的微信首页为例,这里有我们最近聊天的联系人和群聊的会话列表,那每一个会话区块是怎么构成的呢?

copyright 9fen.net

腾讯高级设计师:交互知识树系列之视觉思维--九分科技 www.9fen.net

copyright 9fen.net

这看起来再简单不过的会话区块其实包含了很多信息,比如你看到联系人头像就可以快速辨别每个联系人;比如你需要看到你和她的最近聊天记录,还需要知道她是什么时候给你发的——不好,现在都五点了我还没回老婆消息,死定了!

www.9fen.net

当你花费一定心思组合好这些元素之后,一个简单的区块就完成了。 本文来自九分网络

这时候下一个问题来了,如果是一个群聊会话怎么办? www.9fen.net

腾讯高级设计师:交互知识树系列之视觉思维--九分科技

copyright 9fen.net

九分网络

你需要做一些修改:

九分网络

标签: 交互设计 经验分享 视觉 知识体系 交互设计师 知识架构

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----