发布时间：2024-2-24 分类： 行业资讯
良好的设计，可视性和易用性。所谓能见度就是让用户知道如何使用这个产品，如何操作是合理的。所谓易于使用就是让用户了解您的设计意图，并清楚地告诉用户您为此目的设计的是什么。 ——唐纳德·诺曼，《设计心理学》
为什么交互式设计师想要视觉化？是不是只画一幅黑白手稿，所有这些都是画框线条，并写下一个标签来完成工作，其余的美化留给视觉设计师来做呢？
如果您真的这么认为，您可能无法理解交互设计师的职业生涯的重要性，并忽略了交互式手稿中可以传达的大量信息。
作为从概念到实现的产品的第一个原型，交互式草案负责产品设计团队的基础设计概念。设计过程需要凝聚交互设计师的广泛思考和努力工作，而不是那么容易。能做得好。
定义交互式手稿的过程
定义形式元素，姿势和输入方法;
定义功能和数据元素;
确定功能组和级别;
绘制交互框架;
构建关键线场景脚本;
使用验证方案检查设计。
回顾上面的过程，1~5必须使用一定的视觉思维，这实际上不是一个纯粹的逻辑事物。作为一名出色的交互设计师，他的交互式草稿不仅清晰明了，而且让人们一目了然地看到每个界面的视觉焦点和信息层次。同时，它还标记了用户使用的过程步骤和过渡动画模式。直接把整个产品的完整形式摆在你面前，一切都很清晰。
视觉思维也是交互设计师的灵魂技能，但重点不同。但是视觉思维中涉及的概念和方法太多了。当我构思这篇文章时，我花了两个多小时思考这个大纲并使用所有交互设计师都会使用的愿景。这个想法最终被整合到三个角色中，并且相对容易理解。
视觉思维的三个角色
架构师：他在这里给出了界面蓝图中每个模块的原因;
讲述者：他让用户看到界面，自然知道如何使用它;
漫画家：他会和你说话，给你反馈，讲故事。
I.绘制蓝图的建筑师
1.场景
在开始设计界面之前，请考虑以下问题：
这个界面（Web，移动设备，电视）有什么设备，它的分辨率是什么，适当的字体大小和最小点击面积是什么？
在什么情况下用户使用这个界面，坐在电脑前，在路上行走，躺在沙发上或开车？
什么是用户的基本输入法，是鼠标或键盘或触摸屏，还是电视遥控器？
用户如何进入此界面，其上下文界面是什么？
如果您没有考虑上述四个问题并开始设计，您可能会犯一些基本错误：例如，具有高分辨率屏幕的手机设计为小而不可见，或者可以访问用鼠标。汽车的中控台接口，这是为了让人心疼吗？
交互设计人员还应该考虑该方案，以便不设计看起来合理但不能使用的产品。
2.块
设计侧重于最佳传达某些信息的方式。 —— Kevin· Milai，Darrell·佐野，《设计视觉界面》
界面设计是一种处理信息的工作。您要向用户显示的所有功能实际上都是信息的组合。这种组合的最小单位称为块。
以我们常用的微信主页为例。以下是我们最近与之聊过的对话列表和群聊。如何形成每个会话块？
似乎简单的会话块实际上包含很多信息。例如，如果您看到联系人图片，则可以快速识别每个联系人。例如，您需要查看与她最近的聊天记录，并且您需要知道她是什么时候发送——不好，现在是五点钟，我没有回到我妻子的新闻，我已经死了！
当您花一些时间考虑组合这些元素时，就会完成一个简单的块。
这时，下一个问题即将到来。如果是群聊会话怎么办？
你需要做一些改变：
群聊是与多人交谈，因此头像不是特定的人。是不是可以绘制代表群聊的图标？不是这样，所以每组聊天都是一样的，没有认可。您可以组合构成群聊的头像，这样您至少可以识别主要成员;
小组聊天有时会被阻止，这会减少骚扰，但是有未读消息并希望被标记，因此您可以将号码更改为小红点;
由于邮件被阻止，您必须有一个提示，加上一个图标;
最近的聊天记录应添加到联系人姓名中，否则我不知道是谁在群聊中发送的。
好的，只做了几个简单的步骤。这个块已成为另一个功能，但它保持原始格式，非常高兴。
它看起来不像建筑计划中的房间吗？
每个块都有自己的信息内容，并且还有自己的功能要完成，以及许多形式的派生和状态变化，这些都是交互设计者需要事先考虑的事情。
3.布局
因为它是一名建筑师，当然，你不能只设计一堆房间。他还需要根据整个建筑的面积和形状来安排这些房间的布局。这种布局的原理是什么？
我推荐由知名设计师罗宾威廉姆斯撰写的《写给大家看的设计书》，它易于理解和强大。
设计的四个基本原则
对比：如果元素（字体，颜色，大小，形状，线宽，空间等）不同，只需让它们完全不同即可。
重复：在整个产品中重复设计的视觉元素，这增加了组织和一致性并降低了认知成本。
对齐：每个元素应该与页面上的另一个元素有一些可视连接，并且任何东西都不能随意放在页面上。
邻近度：彼此相关的项目应该靠近并组合在一起形成块或块组，从而减少混乱并提供清晰的结构。
这些原则实际上是相互关联的。他们很少只使用一个原则。它们不仅用于布局阶段。实际上，在设计每个块时，您已经开始使用每个块。它整洁而对比鲜明。功能块绝对可以为您的设计增添许多功能。
我画了一个微信主页的布局，内容没有细化。您可以清楚地看到上述四种设计原则的应用，并且块已正确放置。
水平和眨眼测试
在布局阶段，最重要的是确保页面元素在美学上令人愉悦并且易于阅读。另外需要注意的是元素之间的层次结构是否合适。在微信主页的例子中，主页最重要的元素是什么？
页面标题
未读消息数
未读对话
设计师有一种检查水平的常用方法，称为“斜视测试”— —闭上一只眼睛，用另一只眼睛看屏幕，看哪些元素突出，哪些元素模糊。哪些元素似乎被分组（亲密度和块）。只需更改问题的视角，您就能够发现当您沉迷于细节时之前发现的布局和构图问题。
4.法律
设计中有一些约定，例如黄金分割方法，网格系统，系统规范等。遵循这些前辈总结的规则可以使您获得两倍的结果，只需一半的努力，并设计一个更漂亮的界面。同时，您还可以使用“重复性”创建自己的规则，这也可以提高效率并降低用户的认知成本。
网格系统
网格系统将屏幕划分为大的水平和垂直区域。它是一个很好的工具，可以帮助您在布局中实现对齐和亲密。它在Web和APP设计中具有广泛的应用。设计人员可以定期将界面元素布局到网格结构中，适当地强调高级元素和结构，并为低级元素或次级重要块留下适当的空间。
系统规范
系统规范非常烦人。我喜欢如何设计和如何设计它。你为什么要我约定我？因此，在移动互联网的早期，您确实可以看到许多不是根据系统规格设计的APP。自由是非常自由的。但是大多数都非常难以使用，更不用说每个应用程序都是自包含的并且使用不同的交互方式，让人们真的感到疯狂。
随后，人们越来越多地发现系统规范的好处：您可以从大型互联网公司（如Google，Apple和Microsoft）的设计团队中学习很多设计原则，这可以节省大量的控制设计成本，改进设计和开发效率，如果每个人都使用相同的设计规范，那么用户的认知和使用成本无疑会大大降低，为什么不呢？
通用系统规范
iOS Do’ s&Donquo; ts：https://developer.apple.com/design/tips/
Apple的人机交互指南：https://developer.apple.com/design/
Google Design：https://design.google
微软的UWP设计规范：https://developer.microsoft.com/en-us/windows/apps/design
在介绍了建筑师之后，我将继续介绍其他两位，评论员和漫画家。
下面，我想用一个实际的产品案例来讨论我和视觉设计师Nefish如何使用这两个角色概念来完成Rocket的2.0版本。
小火箭是腾讯计算机管家在用户桌面上的加速小工具。它可以快速帮助用户清理计算机内存并加快计算机速度。它受到用户的广泛赞誉。修订前的每日使用次数已超过1亿次，成为电脑管家和用户。重要的连接接触。
现在我们必须重新设计这个十亿级别的产品，如何找到优化点？
其次，教你评论员
评论员指的是解释体育比赛和比赛的专业人士。他们可以运用专业知识和观点来解读比赛场地的情况，介绍双方的背景，营造比赛的氛围，引导观众更好地了解比赛。并观看比赛。
谁是产品使用的评论员？它是产品手册吗？这是一个新手指南吗？它们当然有一些效果，但最大的是直接设计产品的设计师。
他们可以仔细安排界面的呈现方式，让用户更好地了解产品，甚至爱上它。
1.注意
为了让用户更好地了解产品，设计师要注意的最重要的事情就是在使用过程中管理用户的注意力。
有两种常用的管理注意力的工具：
基本对比：尺寸，形状，颜色，位置等都不同。
动作比较：运动和静止，运动方向和运动时差。
有了这两个工具，我们就可以有目的地引导用户的注意力，并进一步引导他的视线。
用户点击加速后，旧版小火箭将打开右侧的“小尾巴”，通知用户加速的结果。
这是一种从左到右的视线运动，符合人们的正常阅读习惯，似乎没有问题。
但这是真的吗？
当你想到它时，“小尾巴”似乎有点太长了。它使用“加速成功！燃烧83MB内存”和“发现x无用剩余过程”的全句来描述加速结果。显示时间小于2秒，视线的移动路径太长，阅读和理解所花费的时间更长。
因此，我们全面分析了几个小型火箭的结果页面，重新定义了用户的视线移动路径：
从上图可以看出，前三种程序大大缩短了用户的视线运动，结合动画的显示，用户的阅读效率大大提高。
第四种方案是为操作消息而设计的。此类消息会显示较长时间。希望用户可以完全阅读所有文本并强调点击率。因此，我们在确保信息显示的前提下控制每个元素的出现时间差。和视觉层次结构，暗示和引导用户使用“Z形”路线阅读。
下图是第四种方案的视觉效果。至于如何呈现先前的方案，我将在下面的“能量”中解释它。
2.显示能量
心理学家James·首先提出了一笔费用; James&J。Gibson，后来由Donald Normid博士在唐纳德·诺曼博士作为重要设计《设计心理学》中引入思想，它指的是物体所呈现的属性可以让你自然地理解它的功能，比如一个扁平的椅子，你自然知道你可以坐。
在实际的设计场景中，我认为这个理论可以改进，具有更实际的指导意义。我称之为——直观的设计。
我们必须认识到一件事，有两种不同的思维方式：
通过观察，阅读和理解，我们可以理解按钮上的文字和屏幕上的数字，并使用“理性大脑”来思考链接，从而可以对信息进行排序和触摸。
在潜意识的路径中，我们通过诸如视觉，听觉，触觉等感官来感知物体的属性，例如可旋转的圆形旋钮，绿灯开关和燃气灶火焰的大小，以及潜意识的链接是打开了“感觉大脑”的感觉。让信息通过“直觉”到达心灵。
这两条路径的好坏，每个都有自己的使用场景，但有时候一些简单的信息传递，我们更适合通过“潜意识路径”进行优化。
最初的加速结果是用如此长的“加速成功！燃烧83MB内存”来表达信息，但这里的信息冗余太高了。事实上，每次看到它时，只有“83MB”数字才是最有意义的。那么为什么不以图形方式显示其他不必要的读数？
因此，我们想到找出“燃烧”这个词并将其变成火焰，在下面写下烧毁的记忆值，以便用户通过管理注意力和表现的表现来感知这些信息。速度大大加快。
同样，我们也说“太棒了！计算机已经是最快的了”。这种提示没有记忆优化的文案改变成闪亮的奖杯，随机掉落的宇航员和其他有趣的随机奖励，让用户感觉使用小火箭加速是非常有趣的。
最终结果如上所示。我们还验证了用户对此更改后的结果页面的理解，充分了解人们达到了93％，表明这种大胆的变化确实可以接受。
基于这种设计理念，当计算机内存使用率过高时，我们还为小型火箭增加了一种高风险的提醒状态。它不仅仅是充满了红色，而是增添了闪电和溢出的感觉，让用户一眼就能找到它。理解它，真的想指点……
3.关系
人类视觉是整体的，我们的视觉系统自动构建视觉输入结构，感知神经系统层面的形状，形状和物体，而不仅仅是看到没有连接的边缘，线条和区域，形状和图形。在德语中，它是格式塔，因此这些理论被称为格式塔原则的视觉感知。 ——杰夫约翰逊，《认知与设计：理解UI设计准则》
谈到设计中的关系，我不得不提到着名的“格式塔原则”。我相信每个人都已经熟悉它了。我只列出三个最相关的。
格式塔原则
邻近原则：元素之间的相对距离影响我们如何看待它们是否以及如何在一起，通常用于分组元素;
相似性原则：明显具有共同特征（如形状，大小，颜色等）的事物将与我们的愿景相结合，即类似的部分将在感知中形成若干群体;
共同命运：一起移动的对象被视为属于一个组或彼此相关。
当我们设计小火箭时，我们有意识地使用了这个原理，因为用户点击了小火箭控制器，它真的会飞出火箭。你如何看待这两者是一个整体？
如上所示，当鼠标移过该控件时，首先会出现“迷你火箭”，开始旋转并飞行。它与我们的官方火箭（相似性）非常相似，让你对潜在的行为有潜意识。心理预见。
点击后，迷你火箭迅速飞起，官方火箭从底部向上飞出。该位置的一致性（接近度）和一致行动（共同命运）让您立即知道两枚火箭实际上是一组。新火箭也将与桌面控件形成一个整体。
第三，将讲述故事的漫画家
1.对话
软件产品如何与用户交流？你能用单词语言吗？
在设计师手中，有很多方式可以与用户交流。最基本的是——操作反馈。
将鼠标悬停在它上面后，这个反馈可以是一个小的悬停动画，也可以是点击后飞出的小火箭或超出预期的效果：
和平时期有任何节日或大型活动。我们会给你的小火箭一个假日皮肤，但在一些特殊的日子（比如你的生日），为什么我们不能给你一点惊喜呢？
这是小火箭的“Sound Blast Egg”的初衷，它也是与用户的热烈对话。
2.分割镜子
漫画家会精心设计每一页的构图，这样即使你正在看纸质漫画，你也可以通过“脑力补充”形成一系列真实的动态画面，这样你就可以屏住呼吸并深深吸引剧情。
互动设计专业的有趣方面也在这里。虽然我们不是漫画，但我们需要在用户操作后设计由软件触发的每个动作，并将其分解为每个步骤。
△小型火箭托盘形式的部分交互式草案
您对它的思考越多，您就越深入，您就越能理解用户的使用场景，您就可以越多地设计出让用户感到体贴，自然和有趣的产品。
因此，我建议交互设计师应该学习一些关于漫画和动画设计的知识。交互式动画不仅仅是视觉设计师的作品。它应该由交互设计师提前定义，然后与视觉同学讨论。修改并共同努力，在您的脑海中创造出最完美的设计。
3.故事
漫画有对话，镜子，当然还有好故事。
我们的小型火箭可以通过一次点击加速计算机。你可以通过长按激活更强大的火箭来完成更强的加速度吗？
通过这种灵感来源，我们创造了一个“穿越虫洞”的故事。
在用户按下小火箭后，他可以触发虫洞。一旦手被释放，就会有一枚火箭即将到来。最初，整个火箭的发射时间不到0.5秒。怎么会更快？我们想到在电影《骇客帝国》中使用“子弹时间”的概念，向后思考，让火箭突然从非常快到非常慢，通过强烈的对比，让你感受到它的终极速度和力量。
当这种火箭佩戴时，加速效果当然是非凡的。 “当当”动画闪烁，并有通知—— “你已经探索了一个新功能！”
这就像发现新世界的快乐。
以上是我们两年前用视觉思维完成Little Rocket 2.0修订的故事的一小部分。我保存了以前的分析和研究，拆解过程和其他情况，主要以此为例。谈论视觉思维。根据用户的口口相传和使用数据，此修订版非常成功，我们受到鼓励。
也许我们做得不够好，但我们总是在通往更好的体验之路上。
感谢我的合作伙伴Nefish，他的创新理念和实施能力，使这次修订能够有如此精彩的视觉呈现。
