• 用游戏化的视角,4个步骤教你面试作品复盘

    UI交互 2023-03-01
    春天的风迎来夏天的雨~~~在这个美丽的世界你却被作品集所困扰,我是不允许的。之前讲过怎么制作作品集,但还有很多人不太明白,所以就有这篇了(其实是我自己想写-.-) 上货工作需求很琐碎,如何制作完整吸睛的作品集?前言 我们今天讲一下如何整理自己的作品集,好多人呢辛辛苦苦工作一年了,完了之后发现没有什么拿的出手的东...

    春天的风迎来夏天的雨~~~在这个美丽的世界你却被作品集所困扰,我是不允许的。之前讲过怎么制作作品集,但还有很多人不太明白,所以就有这篇了(其实是我自己想写-.-) 上货

    工作需求很琐碎,如何制作完整吸睛的作品集? 前言 我们今天讲一下如何整理自己的作品集,好多人呢辛辛苦苦工作一年了,完了之后发现没有什么拿的出手的东西,今天做一点需求,明天做一点需求,做的东西零零散散的,发现没有什么可提取出来的,最后到总结的时候抓头挠腮的。

    阅读文章 >

    一、定义复盘 什么是设计复盘?它是一种设计思考方法,它涉及对设计过程中所做出的决定进行反思,以改进设计,它同时可以帮助 设计师 更好地理解设计过程,从而提高设计质量,设计复盘过程中,我们会评估设计过程中的结果,并从中总结出有价值的经验教训,以供未来参考。

    而复盘作为作品集中最重要也是最能体现项目价值和设计价值的内容,需要我们先知道为什么需要复,相信大家都看过平台上格式个样的作品集,无非就两类,一类是只做页面展示没有任何逻辑,另一类是每个项目都会放一些方法论设计背景之类的,这两者的目的不一样;

    前者更像是对自己作品的一个归类整理,然后用户可视化的方式来展现出自己的工作量,而后者则是通过一些设计过程和方法来验证设计价值和产品价值,准确来讲后者才是所谓的设计复盘,而前者是设计整理;

    如果此时你觉得这是复盘那就大错特错,这就是你在脑子里 yy,想了那么多下一局你该怎么打还是怎么打,复盘一定是有收获提升的,你应该看视频观察你以及你每个队友掉点的原因,打团失败的原因,是因为意见不统一还是因为某个队友没跟上,或者自己冲动了,都需要你去记录下来,主观因素、客观因素、其他因素等等。

    那么正在做《面试作品集》的你知道什么什么是适合你的项目复盘了么

    二、什么时候复盘 这条主要给不想做作品集或做作品集欲望不强的设计师看!!!

    复盘项目的最佳时期当然是项目上线后的一周或者一个月,因为这个时期你对设计过程设计流程都是比较清楚的,中间踩过什么坑也都比较清晰,并且项目此时的数据结果也基本反馈过来了,所以这是最佳的复盘时期,如果等你找工作的时候在对单个项目复盘,那无非就是临阵磨枪,效果也不太好。

    三、游戏化角度让你更快的学会复盘 怎么对项目复盘?这就好比你问我怎么赢一局王者一样,那肯定是把水晶打爆啊,你全局的目标都是想尽一切办法去推对面水晶,那对待项目同理,首先你要有个目标,例如你的目标是提升某个区域的点击,对某个页面进行改版优化提升用户体验,先将即将要复盘的项目目标明确下来,其次是你为了这个目标过程中做了哪些事情。

    1. 为什么要推水晶(目的背景)

    在打王者之前你是不是得搞清楚去一局的目标,有的人说了,我是为了娱乐开心,但我相信大部分人都是为了赢这一局游戏吧,这就是你玩游戏的目的,无论是为了娱乐还是为了上分,这都是你做这件事的背景;

    2. 你的对手是谁(目标用户)

    在开局时是不是得搞清楚对面是什么人,是国服?还是省级?或者是某个战队的选手,搞清楚这些你才能说进游戏里怎么针对他产生一系列的策略;

    同样在项目复盘过程中,你这个项目需求为谁做的,这里一定要写清楚,否则在面试的时候,吧啦吧啦讲半天,面试官都不知道你的群体是谁,那讲那么多基本没什么可信度,甚至还会被怀疑能力有问题;

    3. 推水晶是为了赢(核心目标)

    上面讲了推水晶是为了赢,那么我们赢的目的呢,像职业战队赢的目的是为了有更多的奖励,对于个人而言赢的话能获得更多的荣誉,但对于大多人我相信还是为了满足自己在好友列表的一些虚荣心,这些都是玩一把游戏的宏观目标;

    那么对应项目中你的核心目标是什么呢,上面讲的是项目级的目标,而身为设计师就需要有设计目标,通过设计目标去赋能项目目标,在日常项目复盘的时候估计很少人会写设计目标,但是在面试作品中的复盘中是需要写设计目标,它在复盘的过程中是可以衡量我们的设计手段是否帮助了业务产生价值,同时能体现设计师的主观思考能力;

    例如我们做一个话题签到打卡的活动,业务目标是提升用户发布率,那么对应设计目标我们拆解下来就是提升用户点击,所有设计方案都围绕如果让用户进行点击,从而进行发布;

    4. 对手实力怎么样(目前数据如何)

    我们开局打一场比赛是不是需要搞清楚对手实力怎么样,最起码得知道对面是什么段位,星耀还是王者或者荣耀,这样你才能在对局中更加关注对位情况。

    而在做需求的时候,数据同样使我们参考的标准,如果不知道当下数据怎么样我们就是无头苍蝇,体验升级的一些项目同样需要参考标准,比如达到什么的体验算是合格,用户无差评、用户使用无阻碍等等,都是参考标准;

    举个例子,当下话题签到打卡发布率为总数的 20%,此次需求需要提升至 50%,看,这样是不是很清晰,那假如我不知道发布率是多少,我说我要提升 50%,是不是觉得信口开河,反正我觉得面试官看了肯定这样想;

    5. 对方每个人擅长用什么、对线风格(用户画像)

    上面说了我们开局需要了解对手是谁,那么这一趴的我们就需要了解对手擅长什么,比如你打一场比赛,是不是需要搞清楚对面每个人的英雄池,然后相对应的给出 ban 位,这样就能针对性的解决问题;

    做项目过程中我相信大多人都是知道自己的用户行为、用户爱好、用户操作习惯等等这些数据,那么在面试作品集中就需要我们放进去这些信息,设计师本身知道可不行,让别人也知道你用户信息,这样在问你问题时会有依据的去问,而不是问一些毫无逻辑的问题;

    6. 对面每个人的 KDA 是多少(用研文档)

    知道对面的英雄池了,下一步需要了解什么?对面每个人 KDA 呗,每个人的团战能力、输出能力、抗压能力、经济能力等等,这些数据知道后,进入游戏是不是就可以针对他的弱项或者强项采取一定的措施;

    映射到项目中是不是特别想一个用研文档,每个用户每天干啥,使用产品时长,使用产品做什么,抱有什么心态使用产品等等,当然这一趴不是必要性内容,如果大家工作中有较大的项目且是自己主导输出的用研文档可以放进去,如果大家工作中没有做过这些内容,那就不用刻意去写,这样会给你讲作品集增加难度;

    四、支线任务怎么推的塔(过程策略) 在一局游戏中,你通过什么策略方法把对面塔推了,偷塔?团战赢了推塔?还是带线牵制推塔...

    在设计这个需求的时候你通过什么方法来助力完成目标的,使用格式塔原则?Fogg 模型?还是其他方法呢;

    1. 入侵野区干扰对面节奏(使用了竞品分析)

    例如开局的时候我通过入侵对面蓝区干扰对面打野节奏,从而给队友一个良好的发育空间,为后续的团战推塔做铺垫;

    假设做一个话题签到的需求目标还是发布率,那我在过程中使用 fogg 模型来帮助我进行设计,用户发布的动机是什么呢?用户有了动机后产生了什么样的行为?用户通过话题打卡来寻找相同的人,以此寻找情绪的共鸣,因此在行为过程中我预判用户操作,把相关话题推荐和入口设计的更加引人注意;这就是最简单通过视觉的方式来助力业务,当然还可能通过交互方式,例如优化操作路径这些,都是为了目标所使用的方法。

    2. 入侵野区效果大不大(策略验证情况)

    前面既然针对对手采取了一系列的策略反野、带线、团战绕后,那是不是得证明下这个策略对不对呢,团战后经济怎么样,反野有没有成功,带线有没有成功牵制对面;

    回到需求中,前期使用各种方案来为业务赋能,只要有过程那肯定有结果,我记得我经常被上下游问的就是,你怎么证明你这个体验好,同样各位设计师项目复盘中一定要有结果来证明你的设计策略是正确的,继续举例我可以通过可用性测试来证明,用户在发布话题时是否有卡点,对入口的点击上是否有过多的思考困惑,当然还有很多验证方法,例如上线后的数据,上线前问卷调查都可以;

    无论是游戏还是项目都需要对自己产生一种自知之明的习惯,不要活在自己的世界,面试过程中讲了一大堆过程最后结果讲不出来;

    3. 通过提前绕后成功赢得团战(设计方案)

    通过你的指挥和策略成功赢得了团战,那是不是需要炫耀一下,那需求中前期设计策略以及各种分析都用上了,是不是需要把设计结果展示一下,这时候就需要开始铺设计相关的页面了,当然每个页面也需要写一些说明关联上;

    4. 谁的战绩最好(上线后数据)

    一局游戏结束了,这时候大家也从头到位都看完这场比赛,那么到底谁的贡献最大,谁的输出最高,谁的抗伤最高呢,都需要一一列出来;

    在复盘中对应的就是需求上线后的数据情况,高了还是低了,这也是决定设计价值的关键因素,在面试场景中也是设计方案的兜底结果,为什么是兜底呢,因为数据只有你知道,别人不知道你的数据是真是假,所以这块写上就行,复盘中有这个东西,但对内需要真实;

    5. 赢了之后粉丝反馈(用户相关反馈)

    游戏赢了之后是不是需要看看粉丝的反馈,团队里谁的口碑上去了,谁的口碑下来了,又或者谁收获了一波真爱粉等等;

    在需求上线后我们不仅要关注数据,还要关注用户的反馈,这关乎着产品的体验,设计师不仅要看对业务的赋能同样需要对用户体验的衡量及关注;

    欢迎关注作者微信公众号:「防脱发药水」

  • 如何提高产品易用性?高手总结了3个层面!

    UI交互 2023-03-01
    本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。

    本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。本篇文章从表达、行为、心理 3 个层面,解释产品如何自上而下的影响用户易用性感受,希望对大家有帮助。

    更多作者干货:

    初学者来收!交互设计中常见的7个误区 学习任何东西,最好都能重头开始,本文阅读时长大约 5 分钟。

    阅读文章 >

    一、写在前面 提到易用性设计,很多人第一反应是互联网软件的设计,实际上,这只会限制了设计的边界。说到易用性设计,在互联网行业还没崛起之前,宝洁公司一直是行业的标杆。举一款肥皂设计的例子,帮助大家更好的理解可用性和易用性。

    可用性(Availability):这款肥皂能不能有效的清洗污渍,能不能有效的消杀细菌 易用性(Usability):这款肥皂握住的时候舒不舒服,沾水之后防滑程度怎么样,能不能让它闻起来更舒适... 映射到软件上来看,可用性指的是产品解决问题的能力,它关注的是系统是否能帮助用户解决问题。易用性则是指产品被多数用户使用时是否流畅、舒适。

    二、如何提高产品易用性 和产品体验设计不同的是,体验设计是按照战略-范围-结构-框架-表现 5 个层面从下而上去进行的。而用户感受恰恰相反,它是一种自上而下的过程。用户在接触产品的时候,产品表象是最初的感受,当用户和产品有了互动之后,用户产生了行为层面的感受,最后用户会结合自己的过往认知、使用经验等产生对产品的综合感受,即心理感受。

    了解了用户感受的基本逻辑后,我们可以针对不同的层次,使用一些设计原则和技巧去提高用户的易用性感受。总的来说,这 3 个层面在易用性上的侧重点不同。

    表达层关注传达准确性,行为层关注使用效率,心理层关注心智构建。

    下文中会具体展开...

    1. 表达层 表达层关注的是传达准确性。大到产品风格,小到文本大小,产品总希望通过一定的设计手段将信息传达给用户,而所有传达的信息无外乎准确一词。对于用户来说,你传达的是用户想要的,带给用户的易用性感受就越强。具体可分为以下 5 点:看起来可访问、减少认知负荷、区分视觉权重、贴合用户环境、表达一致性。

    ① 看起来可访问

    目前对于可访问性的定义多数指的是针对残障用户的设计,不过我所指的可访问性是用户看到产品时的第一直观感受--看起来可访问。

    说通俗点,就是“看起来能不能用”,虽然“用”和“看”并没无本质上的联系。好看的产品并不等于易用性高的产品,但视觉并不是和易用性毫无关系。人们在使用产品之前,会迅速确定自己是否喜欢某个事物的外观。美观会立刻为产品赢下下载量与信任感,并且增加设计的说服力。如果你的网站或产品看起来还是 5-10 年前的设计风格,可能用户还未尝试之前,就选择了放弃体验。虽然产品的美观程度无法提高它的易用性,但能让用户感觉它更好用,所以“看起来可访问”在表达上很重要。

    举例子:以下图淘宝网页为例,右图中设计风格老旧的电商网页,视觉上给人老气陈旧的印象,并不能快速的与消费者建立信任,我们可能还未浏览就已经放弃体验。相反,左图中的设计会给人更舒适的视觉感受。

    ② 减少认知负荷

    认知负荷指的是用户完成任意一件事情时,大脑所执行处理的总量。理论上来说,一个人面临的选择越多,做出决定所花费的时间就越长,所带来的认知负荷就越大。减少认知负荷的方法有很多,《简约至上》一书提出,让交互简单易用的 4 种策略:删除、分层、隐藏、转移。

    删除:删除指的根据交互流程的每个节点,合理删除不必要的内容。 分层:对内容按照一定的规律组织,该分组分组,该合并合并,把信息分成块和单元来处理复杂问题,提高用户认知效率。 隐藏:对内容进行高频和低频的拆分,强化高频内容,对低频内容进行合适的隐藏。 转移:对复杂任务进行巧妙转移,拆成好几步来完成,让每一步都容易理解。 举例子:小宇宙 App 新户信息收集页,把 4 个问题分为了 4 个步骤,减少认知负荷,确保每一步都容易操作。

    ③ 区分视觉权重

    视觉权重是衡量事物吸引观众眼球的一个方法,在用户不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,能够提升用户做决定的效率。一般来说,用户对权重的视觉规律呈以下特点。

    尺寸越大,权重越大 形状越规则,权重越大 垂直对象比水平对象权重大 立体对象比扁平对象权重大 色彩越饱和,权重越大 对比度越高,权重越大 有纹路比没纹理权重大 阴影越大,权重越大 动态元素比静态元素权重大 举例子:饿了么 App 首页金刚区通过大小、立体上的对比来区分视觉权重,传达功能模块的重要性。而盒马 App 首页金刚区则是通过大小、实物和矢量的对比区分视觉权重。

    ④ 贴合用户环境

    不同的用户和场景会影响表达的准确性。如果你的受众是上了年纪或者有视觉障碍的人,你可以考虑采用大号字体来提升可读性。如果你的受众是红绿色盲的特殊人群,最好不要使用红绿色来做“正确”和“错误”提示的颜色。文案表达上也是如此,避免使用生僻或专业的术语。

    举例子:京东 App 贴合了不同用户的购物场景,设计了 3 种不同的展示模式-标准模式;极简模式;老年模式。标准模式下功能全面、信息丰富。极简模式下布局简单、购物便捷。老年模式下字大清晰、操作简单。

    ⑤ 表达一致性

    一致性是 产品设计 最为基础且重要的原则之一,表达一致性指的是在一个复杂功能集合的产品中,结构布局、图标设计、颜色应用等需要保持一致。一致性会使人产生预期,当用户预计到某物的表达方式,并且产品是按照预计的表达去呈现时,产品对于用户来说就越易用。

    举例子:潮汐 App 详情页的表达元素中,图片风格、框架结构、颜色配比、文字样式均保持一致性,带给用户相同的表达感受。

    2. 行为层 行为层聚焦效率,效率的提升可以带来直观的易用性感受。用户完成任务花费的时间越短,带来的易用性感受就越强。具体可分为以下 6 点:选择代替输入、降低沉没成本、减少重复过程、防止用户犯错、行为一致性、智能化引导。

    ① 选择代替输入

    输入的行为成本很高,特别是在复杂表单的录入中。行为成本高意味着用户完成一件事情需要付出更多的代价。你可以想象,10 道选择题和 10 道填空题同样放到你面前,你肯定会优先选择 10 道选择题进行录入。选择代替输入的直接结果是提高录入效率,所以在表单的设计中,对于可以选择的输入项,尽量避免用户输入。

    举例子:喜马拉雅 App 在修改个人信息时,提供“一键同步微信”的选项,可以快捷带入微信的头像昵称。智行 App 个人信息页可以直接选择性别标签。

    ② 降低沉没成本

    人们在进行某些行为决策时,不仅看这件事对自己有没有好处,也看过去是不是已经在这件事情上有过投入。设计朋友们一定对“Control+S”印象深刻,在 PS 里辛辛苦苦画了一天的图,因为异常关闭导致文件丢失,这可能是 PS 带给用户最崩溃的事情。现在 ps 已经支持恢复异常关闭的文件,降低了可能发生的沉没成本,大大的提高了产品的易用性。

    举例子:哈啰 App 在进行车主认证的时,会将已上传的信息保留 14 天,用户可先提交部分信息,降低沉没成本。

    ③ 减少重复过程

    重复的行为是无效的,所有的用户都不希望每次使用微信都要重新登录一次。一般来讲,用户初次使用产品时,所需要填写的信息是最多的,当用户已经有了一定的行为时,设计者可以根据用户已有的行为数据,减少重复过程来提高产品的易用性。常见方法有以下几点:

    保存用户输入信息,下一次自动补全。 把最常用的设为默认值或模板,这样大多数人都无需更改设置。 为用户提供“一键 XX” ”再次 XX"的快捷操作。 举例子:货拉拉 App 在发货输入的时候保存上次输入的地址标签,点击地址标签自动带入,大大减少了用户每次需要输入的成本。12306 在登录时会记录已有的账号信息,选择对应号码可以快捷登录。

    ④ 防止用户犯错

    防错不同与容错,防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,通过优化设计可以把失误降到最低。即解决用户错误的最好方法就是防止用户犯错。在 交互设计 中,经常通过自检提示、视觉暗示、二次确认等方法防止用户可能出现的错误。

    举例子:支付宝在登录时输入框无内容或输入内容不完全时,注册按钮处于禁用的置灰状态,通过视觉暗示防止用户犯错,在返回时,弹出弹窗,通过二次确认的方法防止用户犯错。

    ⑤ 行为一致性

    大脑是一台识别模式的机器,它能把曾经做过的事情做得更好。在产品内有很多交互操作的逻辑本质是相同的,不用为这些相同的交互操作设计多种逻辑或方案。和表达一致性一样,当用户对某种行为有了一定预期后,就会期望产品按照预期的方式执行,一致的交互行为便可以提高用户的易用感受。

    举例子:字节旗下的汽水音乐 App,切换歌曲的交互区别了传统的音乐软件,采用和抖音相同的交互模式,通过上滑完成切换,确保了行为的一致性。

    ⑥ 基于行为的智能化引导

    这是一种基于算法的易用性提升,在大数据、人工智能等技术支持下,产品具备的主动满足人各种需求的属性。当用户对某个功能/内容做出一定的行为时,系统会根据用户的行为做出一些引导。合适的引导不仅仅能够提高产品的易用性,还能够帮助产品取得更多转化。

    举例子:咸鱼 App 猜你喜欢模块,根据历史行为推荐相关的商品内容。小宇宙 App 根据用户的收听内容,推送相同爱好的听众也喜欢听的其他播客。

    3. 心理层 心理层关注的是心智的构建。所有以人的感受为终端的本质上都是心理学,心理层次相对内容和行为层较为抽象,对易用性的提升并不会很直接,但了解一些易用性心理,能够帮助我们更好的进行设计决策。

    ① 贴近心智模型

    心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验,或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。简单说,用户在使用产品之前会根据过往的经验对产品有一定的预期,我们做出的产品越符合用户的预期,用户就会感到越简单、越易用。

    《Adout face 4:交互设计精髓》一书中提出实现模型、心理模型、呈现模型的概念,可以很好的解释用户在试图使用数字产品时到底发生了什么。其中,实现模型映射技术,心理模型映射用户的愿景,呈现模型代表软件的运行机制。

    如果把实现模型比作一个不规则的形状,心理模型比作一个圆。那么呈现模型越趋于这个圆,用户的易用性感受就越高,反之则越低。若想设计出贴合用户心智的产品,常规的设计思路是要求设计者具备研究者的能力。在进行设计工作之前,进行大量的研究,包括用户的行为习惯及使用场景,同过 Persona 和 Scenario 确定的大部分用户场景。并系统化的把研究转化为设计方案。

    举例子:windows 系统关闭网页的操作大多在右上角,mac 系统的关闭是在左上角,这是两种不同的实现模型。如果我们经常使用 windows 系统,养成了右上角关闭的心理模型,那么切换为 mac 电脑使用时,mac 的实现模型会和我们的心理模型有较大偏差,呈现模型就会较差,从而导致用户会习惯性的犯错。

    ② 创造认知规律

    人在识别物体时会寻找规律,发现规律有助于快速处理接收的感官信息,快速建立用户心智。即使本无规律,人眼和大脑也会尝试创造规律。也就是说,规律性越强的产品,对于用户来说就越易用性就越强。

    简单来说,设计师设计产品时,需要有一定的规律来引导用户,这样可以帮助用户更有效率更舒适地使用产品,另一个角度,产品设计应该有一定的控制度和局限性,不能让用户完全天马行空地操作。如果产品设计没有一定的规律,用户就会自己创造规律,那时产生的用户操作就会是 设计师 无法预知无法掌控的了。

    相反,当用户的大脑处理了某些规律时,与规律相悖的事物就会引起用户的警觉。比如一个静态页面中出现某个动态的消息,一排灰色文字中出现某个带颜色的文字等等。

    举例子:传统的认知规律中,红色的灯光具有警示性,产品设计中利用了这一认知规律,使用小红点暗示新消息的提示。用户在感官中接受到小红点的信息后,会本能的认为有新消息的提示。

    三、总结 易用性感受是因人而异的,随着互联网行业的发展,人们对易用性的标准也在提高。身为设计师,我们要不断洞察用户的需求,在设计执行时,综合利用以上策略,带给用户更优质的易用性感受。以上就是对提高产品易用性的分享,感谢大家耐心阅读,笔芯~

  • AICG领域新增6大神器!每个都能提高400%的设计效率!

    UI交互 2023-03-01
    大家好,这里是和你们聊设计的花生~最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿势相同但内容不同的图像。这些功...

    大家好,这里是和你们聊设计的花生~

    最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿势相同但内容不同的图像。这些功能让用户可以主动控制 AI 的绘画细节,甚至解决 AI 不会画手的问题。

    ControlNet 的边缘检测功能,图片来源: https://github.com/lllyasviel/ControlNet

    ControlNet 的人体姿势骨架提取功能,图片来源: https://twitter.com/dannypostmaa/status

    推特网友@Toyxyz3 通过分别渲染手部网格深度和开放姿势骨骼的方式,实现对人物手指和姿势的精准控制。图片来源: https://twitter.com/toyxyz3/status

    不过当别人都在尝试用 ControlNet 生成各种好看的二次元小姐姐时,Reddit 有位网友却选择利用 ControlNet 可以精准控制图像边缘的特性,生成了包含正确清晰文字的 AI 图像,并赋予不同的材质特效,效果相当不错。在此之前想利用 AI 生成稳定正确的文字内容几乎是不可能的,现在不仅能生成了,还能结合提示词生成各种特效材质,那以后 设计师 做字效是不是都可以不用 PS 或者 3D 软件了?

    利用 ControlNet 生成不同的艺术字效,图片来源: https://www.reddit.com/r/StableDiffusion/comments

    回顾一年前的 AI 绘画:

    人工智能快速出图!盘点 4 款人气超高的 AI 绘画神器 大家好,我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到,国内已经出现了能直接使用中文提示词生成 AI 图像的工具了,这就进一步降低了我们进入 AI 绘画世界的门槛,对设计师和创意工作者来说无疑是好消息。

    阅读文章 >

    从人工智能绘画工具 Disco Diffusion 发布到现在,AI 文本生成图像生成技术进入大众视野的时间正好一年。当初惊艳众人的工具并没有如烟花般转瞬即逝,而是各自有了更深入的发展方向,并在逐步构建基于 AIGC 的新生态体系。

    比如图像生成模型 Stable Diffusion,由于是开源的,在各路大神的加持下发展一片欣欣向荣,大火的二次元画风模型 NovalAI,生成效果媲美真人 Coser 的训练模型 Lora,还有前面提到的可以提取人体姿势骨架的模型 ControlNet 都是基于或围绕 Stable Diffusion 开发的。

    另一个 AI 图像生成工具 Midjourney 则凭借技术迭代和成熟的社区运营成功实现商业化。它图像生成质量极高,吸引了绘画、设计、影视、游戏等各行业人员成为付费会员,Midjourney 也开始成为这些行业工作流的一部分。

    Midjourney 生成的各类图像,图片内容来源: Midjourney 官方社区

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    AI 图像生成技术对绘画带来的影响大家都有目共睹,而它对设计行业带来的影响和改变也不小。由于 AI 生成的图像质量越来越高,出图速度也快,不少外国设计师们都纷纷利用 Stable Diffusion、Midjourney、Dalle 2 等工具辅助自己进行设计,或快速提供海量的灵感参考。

    YouTube 设计博主 @Codex Community 利用 Midjourney 生成的鞋类网页设计灵感,图片内容来源:How to use AI Art and ChatGPT to Create a Insane Web Designs - YouTube

    YouTube 设计博主 @Piximperfect 利用 AI 图像生成工具 Dall·E 结合 PS 完成对人物的无痕扣除,图片内容来源: https://www.youtube.com/watch?v=rtI1MZSdK1A&t=314s

    DALL·E 和 ChatGPT 同属 Open AI 公司,戳下面的链接查看对 DALL·E 介绍:

    10秒出图,以假乱真!设计师「用嘴修图」的愿望要成真了? 大家好,我是和你们聊设计的花生~ 之前给大家推荐了 AI 图画生成器 Disco Difussion,它可以根据文本提示自动生成恢弘奇幻的艺术,非常适合作为艺术创作的灵感来源。

    阅读文章 >

    而在国内,也有专业的设计团队开始利用 AI 图像生成工具。腾讯官方设计团队 ISUX 在前几天发表了一遍文章,讲述他们如何利用 Midjourney 生成图像时间短、批量大、风格多的特点,优化日常运营设计流程。设计服务平台稿定也推出了一个 AI 工具“稿定 AI”,用户可以根据参考图+描述词生成一张完整精美的插图,为生成平面设计素材提供了新思路。

    ISUX 的部分设计流程,图片内容来源: https://www.uisdc.com/aigc-design

    “稿定 AI”展示的部分 AI 生成效果图

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    一方面是设计师主动利用 AI 图像生成工具优化自己的工作流程,另一方面也有越来越多针对设计工作开发的 AI 工具,涉及图像处理、UI、网页、PPT、包装等多个方面。

    一、AI 图像处理工具 Clipdrop Clipdrop 官网直达: https://clipdrop.co/

    同类型产品 Magic Studio: https://magicstudio.com/

    比如之提到过很多次的 Clipdrop,它是国外一家专注 AI 图像处理程序插件的公司,目前已经开发出智能修图、一键去除/替换图片背景、对照片立体打光、文本去除器等多个 AI 程序,有在线版和手机应用,还可以接入 PS、Figma 等设计软件。这种借助了 AI 技术的图像处理工具,让传统的修图改图等设计工作变得高效轻松,而且开发类似工具的公司远不止 Clipdrop 一家 ,很多公司都在探索 AI 技术在图片处理上的各种新用途。

    ClipDrop 开发的设计神器:

    扣头发丝不留痕!最新免费抠图神器 ClipDrop Remove Background 来啦~ 大家好,我是和你们聊设计的花生~ 随着人工智能技术的发展,运用算法自动进行图片处理的工具越来越多,极大地提升了设计师的工作效率。

    阅读文章 >

    照片没有氛围感?快来试试这款打光修图的神器「Relight」 大家好这里是和你们聊设计的花生~ 在人像摄影中,灯光设置是非常重要重要的一环,好的打光能丰富画面层次,提升整体情绪氛围。

    阅读文章 >

    二、AI 图库 GhostlyStock 网站直达: https://www.ghostlystock.com

    GhostlyStock 是一个类似 Unsplash 的免费图库,包含照片和插画 2 种类型的图片。它的特别之处在站内图片都是由 AI 生成的,如果你没有找到自己想要的图片,可以自己输入描述词生成一张新的图像。虽然图片的质量参差不齐,但对找图片素材来说是一个很新奇的体验,也可能是未来免费图库发展的一个新方向。

    GhostlyStock 主界面

    三、AI 驱动的 UI 设计工具 Galileo AI 官方直达: https://www.usegalileo.ai/

    同类从产品 Uizard Designer: https://uizard.io/autodesigner/

    既然 AI 能根据文本生成各种精美的图像,那能不能进一步生成更具体的设计类素材?答案是能。

    Galileo 就是一款根据文本描述生成 UI 界面的软件,据官方介绍其模型由数千款优秀 UI 设计作品训练得来,可以根据文本生成高保真、可编辑的用户界面,为 UI 提供优质的灵感,并减少重复的调整工作。另一款同类产品 Uizard Designer 也是专注于 UI/UX 设计,用户能通过文本描述生成多屏幕设计原型,并可以邀请团队成员一起实时共同设计。

    Galileo 官方演示视频

    Uizard Designer 官方演示视频

    五、AI 驱动的 PPT 生成工具 Tome 官网直达: https://beta.tome.app/

    Tome 的官方定位并不是 PPT 内容生成工具,而是 “Generative storytelling(生成性的故事讲述 )”,但它生成内容的形式和 PPT 并没有什么差别,于是理所当然的被大家认做是一种 AI 生成 PPT 的工具。

    用户输入一段对主题的描述文本,点击生成,Tome 就能自动生成主标题和多个子标题,并为子标题生成对应文本内容和配图,最终得到一个内容充实、形式完整的 PPT 形式的文件。虽然每张页面都是左文右图,但是自动生成的标题和主题的内容是契合的,内容逻辑通畅,可以免去用户自己查资料列大纲的步骤。另外它还支持根据内容生成 3D 模型和动图,自动配置响应式页面,以及任意嵌入来自互联网的内容。

    Tome 官方演示视频

    四、AI 辅助 Figma 设计 Diagram 官网直达: https://diagram.com/

    Figma 已经是一个非常便捷的在线 UI 设计工具了,但并不妨碍有人用 AI 把它变得更加好用。Diagram 是一个专注研发 UI 设计工具的小团队, 目前开发了多款 AI 驱动的小插件,包括一键让 Figma 任务自动化的 Automator,根据文本生成图标/图像的 Magician,以及使用代码进行设计的 Prototype r 等,搭载上 Figma 后可以帮助 UI 设计师更好的完成任务。

    化神器 Automator 的官方演示视频

    六、AI 辅助包装设计 PLUG AI 官网直达: https://hp.package-ai.jp/

    日本公司 PLUG AI 在去年 10 月份推出了一个名为 「Package Design AI」评选分析系统,用户先上传包装所需的设计元素,AI 会在 1 小时内自动生成的 1000 组包装设计方案,然后展示排名前 100 的方案。系统还可以对生成结果进行分析评估,预测针对不同年龄、职业、性别的消费者,哪些包装会更受喜爱。

    官方称这套 AI 分析系统能缩短包装设计周期,节省设计成本,并准确预测设计出的包装能否获得好的效果。据了解日本零食品牌 Calbee(卡乐比)就接受了这款 AI 系统的分析建议,为旗下一款产品设计了新包装,然后销售业绩比起旧包装增长了 135% 。

    图片内容来源:PLUG AI 官网

    看过了设计师们利用 AI 优化自己的工作流程,也了解了不少专门为设计研发的 AI 工具,我的感觉是 AI 真的能提高设计效率,帮助设计师更好地完成设计工作,而不是所谓的“取代设计师”。不过现在看到的 AI 设计工具大部分都是国外的,使用起来有一定门槛,希望未来有更多好用的国产 AI 设计工具出现。

    对于 AI 和设计师的关系,不知道大家有什么感想呢?欢迎在评论区分享。喜欢本期推荐的话请大家多多点赞收藏进行支持,之后会为大家推荐设计干货知识 ~

    参考资料:

    https://mp.weixin.qq.com/s/dafCLibRZh4M3E7w4PVlnQ https://mp.weixin.qq.com/s/HiRGY1U-NwKF8jNVL-qQOA https://weibo.com/1948301550/MuD2t8MNo https://weibo.com/1757693565/MqxjAaAQD 推荐阅读:

    Text to Skybox ! 一键生成360°无缝环境贴图的AI神器 大家好,这里是和你们聊设计的花生~ 之前向大家介绍过不少 AI 绘画工具,比如 Dall·E 2、Midjourney、Stable diffusion 等,它们都是大型的 Text-Image 模型。

    阅读文章 >

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

  • 从2个场景出发,深入解析B端系统的页面跳转

    UI交互 2023-03-01
    在一个普通 B 端产品(以浏览器为载体)的页面中,相信很多产品设计师都有类似的经历,这个页面是要一直沿面包屑下沉,或者像 C 端产品一样无限返回,还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。信息结构的设计过程中,每一个功能模块是经过深思熟虑做好定义的,如果想让用户的任务流程顺...

    在一个普通 B 端产品(以浏览器为载体)的页面中,相信很多产品 设计师 都有类似的经历,这个页面是要一直沿面包屑下沉,或者像 C 端产品一样无限返回,还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。

    信息结构的设计过程中,每一个功能模块是经过深思熟虑做好定义的,如果想让用户的任务流程顺畅、有所提效,那么信息架构的导航必须要发挥作用,也就是说用户需要去记住或者被“教育”每个模块的内容有什么。

    更多B端干货:

    8000字干货!B端交互设计师如何进行页面设计? 前言 在日常的设计工作中,拿到产品给的原型或者需求清单,分析完用户和任务流程后不知道该如何下手,或者不知道如何系统的开展设计工作,再或者不知道如何做出符合用户和业务目标的设计方案。

    阅读文章 >

    一、为什么要跳转 1. 结构扁平化,减轻心理负担

    一次测试平台项目迭代中,发现旧有版本的面包屑层级特别深,最多可有 5 级,而且是详情页面与新建页面糅合在了一起,作为项目流程中的一个环节,不应该出现这种情况。于是调研了市面上能看到 B 端产品,腾讯云、阿里云和华为云等逐渐弱化了面包屑导航的使用,页面层级一般不会超过 3 级,华为云和腾讯云已经取消了面包屑的使用,阿里云虽然保留了面包屑导航,但是二级页面面包屑和返回同时存在,信息层级上也已经弱化了面包屑对信息层级的延伸。

    在一次任务流程中,如果信息层级很深,意味着用户会深入到更多的页面,进而偏离主流程,同时需要接纳的更多信息量,额外增加的信息负担会给用户的心理造成压力,而且还会给产品扣上信息沉重的帽子。对于主流程,模块提炼出的信息已经能够满足对用户对该模块的需求,如果仍有想了解颗粒度更小信息的需求,那么可以通过友好链接跳转到信息的源始位置查看,而不是在当前页面与主流程同级继续下沉。

    2. 增强记忆点,提高效率

    在产品设计之初,每个一级模块就已经做好了定位,比如腾讯云的私有网络,包含了子网和路由表,如果用户在私用网络的详情页能继续打开子网的详情信息,那么私有网络的定位就变成了私有网络的信息+子网信息,进而削弱子网模块的功能性,对用户而言,会有多处可以查看子网信息,这会模糊用户对产品结构的清晰认知。根据席克定律,下次信息查看时,面临众多的选择,任务效率是变低了的。

    另外,对于需要信息对比的场景,新开页面可以满足多种同类数据的对比需求。

    那么如果像腾讯云或者阿里云这样,新开 tabs,直接跳到子网模块的页面,这会暗示用户,这个功能信息点不属于私有网络,进而会强化子网模块的定位,也会凸显私有网络的主要流程。

    3. 关于用户习惯

    ① 对于国内浏览器的用户

    国内的用户对百度等搜索浏览器并不陌生,并且长时间的使用已经对页面的跳转有了一定的预期和习惯。通过友好链接跳转到相应的页面,点击 tabs 回到搜索界面。同样借助浏览器为载体的产品面对同一个用户群体,其实不需要太多的再教育。

    另外,如果要处理或浏览的信息量很少,弹窗或者抽屉就可以即时获取,这时候就不需要跳转查看。

    ② 公司内部的用户

    当然,具体的产品还需要考虑聚焦的用户人群,调研观察当前产品的用户习惯是怎么样的。如果是与其他平台或设计方向是有差异的,就要谨慎使用跳转方式变更,总结当前的用户习惯,通过引导或者多次迭代,统一使用正确的跳转方式。

    二、应用场景 什么场景适合

    1. 平台 A 跳转到平台 B

    平台 A 中的一个流程中有平台 B 的信息,如果想点击查看具体信息,需要新开 Tabs 网页。

    2. 同一个平台内,当前模块流程下查看/编辑其他模块的内容,需要跳转新开 Tabs。

    跳转新开页面,如果信息的承载方式本身就是页面,那么跳转之后查看直接展示原来的页面就可以。如果是弹窗或者抽屉,有三种展示方式:

    当前页面打开弹窗或者抽屉 新 tabs 回到原来的界面,打开弹窗或抽屉

    在 coding 的页面中,如果在一个抽屉中打开另外一个子工作项,回到原来页面后,详情信息还是以抽屉展示。

    3. 新 tabs 打开具体信息,不过原来的弹窗或者抽屉信息被铺在了页面中。

    当前抽屉中打开另外一个模块的抽屉信息时,新开页面的形式变成了页面,没有了返回等信息,页面中的信息平铺,引导用户看完信息之后,关闭当前页面。另外,这种展示方式还与权限有关系,方便信息在不同角色之间流转。

    三、特殊场景 当然,上述的结论并不是市面所有产品的一致方式,通过体验还发现了以下不同的方式,以当前页面所处的场景为维度解释。

    1. 信息为当前模块流程的一部分

    在产品层面该功能信息是属于当面模块定位的,不适合再打开 tabs。

    2. 工作台/概览类的信息

    这关于工作台和概览类功能的定位问题,大部分的产品都将工作台定位成任务状态的中转站,用来做跳转分发使用,因此从工作台点击跳转到具体的任务模块,可以直接在当前页面跳到具体的任务页面。不过对于一些大的平台,还是建议新开页面,这样方便二次浏览待办信息。

    3. 其他

    ① 当前在一级页面,如果跳转到其他模块可以选在当前页面直接刷新,不需要新开 Tabs。如果产品的基本定位是其他模块的内容都需要新开 Tabs 网页,最好保持统一。

    ② 动态增减页签导航

    一些产品的结构设计是导航栏常驻,所有的页面都是以动态增减页签的形式展示,那么只要是本平台内的信息都是不需要新开 Tabs 网页的。不过使用这种方式设计者需要定义的是动态增减页签的使用逻辑。

    ③ 导航模块常驻

    在一些产品中,导航模块是常驻的,在一个模块下的任务流程中,通过点击友好链接跳转到目标页面,导航随之变化,对用户也会存在一定的暗示:模块与模块之间是有不同功能定位的。但是用户当前用户的任务流程并没有结束,点击了友好链接,相当于丢失了主流程,要是返回还需要不断的点击,如果是个新建流程会更糟糕,所以这种方式不是很友好,要谨慎使用。

    像阿里云这样,左侧导航栏收起的的时候,用户从一个页面到另外一个页面,面包屑从 1-2-3,变成了 4-5,用户对当前页面的位置是无感的。从而会模糊任务路径方向,没办法准确定位当前位置。所以,新开 tabs 网页是很有必要的。

    当然,层级越深用户能触及的频率就会越小,于是团队的一部分成员就会说既然频率小那么对产品的影响很小,可以忽略的。但是,场景频率小是对所有用户而言,不是说用户群少。对一个产品而言,让用户满意很难,但是一个看似不起眼的跳转,只要让用户用过一次觉得难用、页面层级深,产品的整体印象就会大打折扣,因为用户不会在意这个问题是产品定位的主流程还是低频场景。往往用户能记住的不是产品带给业务的流畅感和增长,因为他们认为这是产品应该做到的,但是一次不好的体验却会历久弥新。

    页面跳转 的总结有一定的局限性,特殊业务场景还需要做特殊处。

  • 如何提高产品易用性?高手总结了3个层面!

    UI交互 2023-03-01
    本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。

    本篇文章绝对不是 ChatGPT 生成的...无论从事什么行业的设计工作,产品易用性都是离不开的话题,我们都希望自己的产品可以给用户提供更好的体验。事实上,即使是同样的产品,界面和环境都相同,对于不同的用户而言,易用性也是不同的。这取决于不同的认知能力、知识背景、使用经验等。本篇文章从表达、行为、心理 3 个层面,解释产品如何自上而下的影响用户易用性感受,希望对大家有帮助。

    更多作者干货:

    初学者来收!交互设计中常见的7个误区 学习任何东西,最好都能重头开始,本文阅读时长大约 5 分钟。

    阅读文章 >

    一、写在前面 提到易用性设计,很多人第一反应是互联网软件的设计,实际上,这只会限制了设计的边界。说到易用性设计,在互联网行业还没崛起之前,宝洁公司一直是行业的标杆。举一款肥皂设计的例子,帮助大家更好的理解可用性和易用性。

    可用性(Availability):这款肥皂能不能有效的清洗污渍,能不能有效的消杀细菌 易用性(Usability):这款肥皂握住的时候舒不舒服,沾水之后防滑程度怎么样,能不能让它闻起来更舒适... 映射到软件上来看,可用性指的是产品解决问题的能力,它关注的是系统是否能帮助用户解决问题。易用性则是指产品被多数用户使用时是否流畅、舒适。

    二、如何提高产品易用性 和产品体验设计不同的是,体验设计是按照战略-范围-结构-框架-表现 5 个层面从下而上去进行的。而用户感受恰恰相反,它是一种自上而下的过程。用户在接触产品的时候,产品表象是最初的感受,当用户和产品有了互动之后,用户产生了行为层面的感受,最后用户会结合自己的过往认知、使用经验等产生对产品的综合感受,即心理感受。

    了解了用户感受的基本逻辑后,我们可以针对不同的层次,使用一些设计原则和技巧去提高用户的易用性感受。总的来说,这 3 个层面在易用性上的侧重点不同。

    表达层关注传达准确性,行为层关注使用效率,心理层关注心智构建。

    下文中会具体展开...

    1. 表达层 表达层关注的是传达准确性。大到产品风格,小到文本大小,产品总希望通过一定的设计手段将信息传达给用户,而所有传达的信息无外乎准确一词。对于用户来说,你传达的是用户想要的,带给用户的易用性感受就越强。具体可分为以下 5 点:看起来可访问、减少认知负荷、区分视觉权重、贴合用户环境、表达一致性。

    ① 看起来可访问

    目前对于可访问性的定义多数指的是针对残障用户的设计,不过我所指的可访问性是用户看到产品时的第一直观感受--看起来可访问。

    说通俗点,就是“看起来能不能用”,虽然“用”和“看”并没无本质上的联系。好看的产品并不等于易用性高的产品,但视觉并不是和易用性毫无关系。人们在使用产品之前,会迅速确定自己是否喜欢某个事物的外观。美观会立刻为产品赢下下载量与信任感,并且增加设计的说服力。如果你的网站或产品看起来还是 5-10 年前的设计风格,可能用户还未尝试之前,就选择了放弃体验。虽然产品的美观程度无法提高它的易用性,但能让用户感觉它更好用,所以“看起来可访问”在表达上很重要。

    举例子:以下图淘宝网页为例,右图中设计风格老旧的电商网页,视觉上给人老气陈旧的印象,并不能快速的与消费者建立信任,我们可能还未浏览就已经放弃体验。相反,左图中的设计会给人更舒适的视觉感受。

    ② 减少认知负荷

    认知负荷指的是用户完成任意一件事情时,大脑所执行处理的总量。理论上来说,一个人面临的选择越多,做出决定所花费的时间就越长,所带来的认知负荷就越大。减少认知负荷的方法有很多,《简约至上》一书提出,让交互简单易用的 4 种策略:删除、分层、隐藏、转移。

    删除:删除指的根据交互流程的每个节点,合理删除不必要的内容。 分层:对内容按照一定的规律组织,该分组分组,该合并合并,把信息分成块和单元来处理复杂问题,提高用户认知效率。 隐藏:对内容进行高频和低频的拆分,强化高频内容,对低频内容进行合适的隐藏。 转移:对复杂任务进行巧妙转移,拆成好几步来完成,让每一步都容易理解。 举例子:小宇宙 App 新户信息收集页,把 4 个问题分为了 4 个步骤,减少认知负荷,确保每一步都容易操作。

    ③ 区分视觉权重

    视觉权重是衡量事物吸引观众眼球的一个方法,在用户不得不面对较多选项时, 对主要和次要的选项做视觉权重区分,做好设计上的归类,能够提升用户做决定的效率。一般来说,用户对权重的视觉规律呈以下特点。

    尺寸越大,权重越大 形状越规则,权重越大 垂直对象比水平对象权重大 立体对象比扁平对象权重大 色彩越饱和,权重越大 对比度越高,权重越大 有纹路比没纹理权重大 阴影越大,权重越大 动态元素比静态元素权重大 举例子:饿了么 App 首页金刚区通过大小、立体上的对比来区分视觉权重,传达功能模块的重要性。而盒马 App 首页金刚区则是通过大小、实物和矢量的对比区分视觉权重。

    ④ 贴合用户环境

    不同的用户和场景会影响表达的准确性。如果你的受众是上了年纪或者有视觉障碍的人,你可以考虑采用大号字体来提升可读性。如果你的受众是红绿色盲的特殊人群,最好不要使用红绿色来做“正确”和“错误”提示的颜色。文案表达上也是如此,避免使用生僻或专业的术语。

    举例子:京东 App 贴合了不同用户的购物场景,设计了 3 种不同的展示模式-标准模式;极简模式;老年模式。标准模式下功能全面、信息丰富。极简模式下布局简单、购物便捷。老年模式下字大清晰、操作简单。

    ⑤ 表达一致性

    一致性是 产品设计 最为基础且重要的原则之一,表达一致性指的是在一个复杂功能集合的产品中,结构布局、图标设计、颜色应用等需要保持一致。一致性会使人产生预期,当用户预计到某物的表达方式,并且产品是按照预计的表达去呈现时,产品对于用户来说就越易用。

    举例子:潮汐 App 详情页的表达元素中,图片风格、框架结构、颜色配比、文字样式均保持一致性,带给用户相同的表达感受。

    2. 行为层 行为层聚焦效率,效率的提升可以带来直观的易用性感受。用户完成任务花费的时间越短,带来的易用性感受就越强。具体可分为以下 6 点:选择代替输入、降低沉没成本、减少重复过程、防止用户犯错、行为一致性、智能化引导。

    ① 选择代替输入

    输入的行为成本很高,特别是在复杂表单的录入中。行为成本高意味着用户完成一件事情需要付出更多的代价。你可以想象,10 道选择题和 10 道填空题同样放到你面前,你肯定会优先选择 10 道选择题进行录入。选择代替输入的直接结果是提高录入效率,所以在表单的设计中,对于可以选择的输入项,尽量避免用户输入。

    举例子:喜马拉雅 App 在修改个人信息时,提供“一键同步微信”的选项,可以快捷带入微信的头像昵称。智行 App 个人信息页可以直接选择性别标签。

    ② 降低沉没成本

    人们在进行某些行为决策时,不仅看这件事对自己有没有好处,也看过去是不是已经在这件事情上有过投入。设计朋友们一定对“Control+S”印象深刻,在 PS 里辛辛苦苦画了一天的图,因为异常关闭导致文件丢失,这可能是 PS 带给用户最崩溃的事情。现在 ps 已经支持恢复异常关闭的文件,降低了可能发生的沉没成本,大大的提高了产品的易用性。

    举例子:哈啰 App 在进行车主认证的时,会将已上传的信息保留 14 天,用户可先提交部分信息,降低沉没成本。

    ③ 减少重复过程

    重复的行为是无效的,所有的用户都不希望每次使用微信都要重新登录一次。一般来讲,用户初次使用产品时,所需要填写的信息是最多的,当用户已经有了一定的行为时,设计者可以根据用户已有的行为数据,减少重复过程来提高产品的易用性。常见方法有以下几点:

    保存用户输入信息,下一次自动补全。 把最常用的设为默认值或模板,这样大多数人都无需更改设置。 为用户提供“一键 XX” ”再次 XX"的快捷操作。 举例子:货拉拉 App 在发货输入的时候保存上次输入的地址标签,点击地址标签自动带入,大大减少了用户每次需要输入的成本。12306 在登录时会记录已有的账号信息,选择对应号码可以快捷登录。

    ④ 防止用户犯错

    防错不同与容错,防错原则认为大部分的意外都是由于设计的疏忽,而不是人为操作失误,通过优化设计可以把失误降到最低。即解决用户错误的最好方法就是防止用户犯错。在 交互设计 中,经常通过自检提示、视觉暗示、二次确认等方法防止用户可能出现的错误。

    举例子:支付宝在登录时输入框无内容或输入内容不完全时,注册按钮处于禁用的置灰状态,通过视觉暗示防止用户犯错,在返回时,弹出弹窗,通过二次确认的方法防止用户犯错。

    ⑤ 行为一致性

    大脑是一台识别模式的机器,它能把曾经做过的事情做得更好。在产品内有很多交互操作的逻辑本质是相同的,不用为这些相同的交互操作设计多种逻辑或方案。和表达一致性一样,当用户对某种行为有了一定预期后,就会期望产品按照预期的方式执行,一致的交互行为便可以提高用户的易用感受。

    举例子:字节旗下的汽水音乐 App,切换歌曲的交互区别了传统的音乐软件,采用和抖音相同的交互模式,通过上滑完成切换,确保了行为的一致性。

    ⑥ 基于行为的智能化引导

    这是一种基于算法的易用性提升,在大数据、人工智能等技术支持下,产品具备的主动满足人各种需求的属性。当用户对某个功能/内容做出一定的行为时,系统会根据用户的行为做出一些引导。合适的引导不仅仅能够提高产品的易用性,还能够帮助产品取得更多转化。

    举例子:咸鱼 App 猜你喜欢模块,根据历史行为推荐相关的商品内容。小宇宙 App 根据用户的收听内容,推送相同爱好的听众也喜欢听的其他播客。

    3. 心理层 心理层关注的是心智的构建。所有以人的感受为终端的本质上都是心理学,心理层次相对内容和行为层较为抽象,对易用性的提升并不会很直接,但了解一些易用性心理,能够帮助我们更好的进行设计决策。

    ① 贴近心智模型

    心智模型是存在于用户头脑中对一个产品应具有的概念和行为的知识。这种知识可能来源于用户以前使用类似产品沉淀下来的经验,或者是用户根据使用该产品要达到的目标而对产品概念和行为的一种期望。简单说,用户在使用产品之前会根据过往的经验对产品有一定的预期,我们做出的产品越符合用户的预期,用户就会感到越简单、越易用。

    《Adout face 4:交互设计精髓》一书中提出实现模型、心理模型、呈现模型的概念,可以很好的解释用户在试图使用数字产品时到底发生了什么。其中,实现模型映射技术,心理模型映射用户的愿景,呈现模型代表软件的运行机制。

    如果把实现模型比作一个不规则的形状,心理模型比作一个圆。那么呈现模型越趋于这个圆,用户的易用性感受就越高,反之则越低。若想设计出贴合用户心智的产品,常规的设计思路是要求设计者具备研究者的能力。在进行设计工作之前,进行大量的研究,包括用户的行为习惯及使用场景,同过 Persona 和 Scenario 确定的大部分用户场景。并系统化的把研究转化为设计方案。

    举例子:windows 系统关闭网页的操作大多在右上角,mac 系统的关闭是在左上角,这是两种不同的实现模型。如果我们经常使用 windows 系统,养成了右上角关闭的心理模型,那么切换为 mac 电脑使用时,mac 的实现模型会和我们的心理模型有较大偏差,呈现模型就会较差,从而导致用户会习惯性的犯错。

    ② 创造认知规律

    人在识别物体时会寻找规律,发现规律有助于快速处理接收的感官信息,快速建立用户心智。即使本无规律,人眼和大脑也会尝试创造规律。也就是说,规律性越强的产品,对于用户来说就越易用性就越强。

    简单来说,设计师设计产品时,需要有一定的规律来引导用户,这样可以帮助用户更有效率更舒适地使用产品,另一个角度,产品设计应该有一定的控制度和局限性,不能让用户完全天马行空地操作。如果产品设计没有一定的规律,用户就会自己创造规律,那时产生的用户操作就会是 设计师 无法预知无法掌控的了。

    相反,当用户的大脑处理了某些规律时,与规律相悖的事物就会引起用户的警觉。比如一个静态页面中出现某个动态的消息,一排灰色文字中出现某个带颜色的文字等等。

    举例子:传统的认知规律中,红色的灯光具有警示性,产品设计中利用了这一认知规律,使用小红点暗示新消息的提示。用户在感官中接受到小红点的信息后,会本能的认为有新消息的提示。

    三、总结 易用性感受是因人而异的,随着互联网行业的发展,人们对易用性的标准也在提高。身为设计师,我们要不断洞察用户的需求,在设计执行时,综合利用以上策略,带给用户更优质的易用性感受。以上就是对提高产品易用性的分享,感谢大家耐心阅读,笔芯~

  • AICG领域新增6大神器!每个都能提高400%的设计效率!

    UI交互 2023-03-01
    大家好,这里是和你们聊设计的花生~最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿势相同但内容不同的图像。这些功...

    大家好,这里是和你们聊设计的花生~

    最近一款名为 ControlNet 的模型在 AI 绘画领域引起不小的轰动,它的边缘检测功能可以提取图像边缘轮廓,深度图引导功能可以复制空间信息,最神奇的是它的人体姿势骨架提取功能,上传一张图片 AI 后会识别其中人物的姿势,然后结合提示词生成一张姿势相同但内容不同的图像。这些功能让用户可以主动控制 AI 的绘画细节,甚至解决 AI 不会画手的问题。

    ControlNet 的边缘检测功能,图片来源: https://github.com/lllyasviel/ControlNet

    ControlNet 的人体姿势骨架提取功能,图片来源: https://twitter.com/dannypostmaa/status

    推特网友@Toyxyz3 通过分别渲染手部网格深度和开放姿势骨骼的方式,实现对人物手指和姿势的精准控制。图片来源: https://twitter.com/toyxyz3/status

    不过当别人都在尝试用 ControlNet 生成各种好看的二次元小姐姐时,Reddit 有位网友却选择利用 ControlNet 可以精准控制图像边缘的特性,生成了包含正确清晰文字的 AI 图像,并赋予不同的材质特效,效果相当不错。在此之前想利用 AI 生成稳定正确的文字内容几乎是不可能的,现在不仅能生成了,还能结合提示词生成各种特效材质,那以后 设计师 做字效是不是都可以不用 PS 或者 3D 软件了?

    利用 ControlNet 生成不同的艺术字效,图片来源: https://www.reddit.com/r/StableDiffusion/comments

    回顾一年前的 AI 绘画:

    人工智能快速出图!盘点 4 款人气超高的 AI 绘画神器 大家好,我是和你们聊设计的花生~ 有关注 AI 绘画领域的小伙伴可能注意到,国内已经出现了能直接使用中文提示词生成 AI 图像的工具了,这就进一步降低了我们进入 AI 绘画世界的门槛,对设计师和创意工作者来说无疑是好消息。

    阅读文章 >

    从人工智能绘画工具 Disco Diffusion 发布到现在,AI 文本生成图像生成技术进入大众视野的时间正好一年。当初惊艳众人的工具并没有如烟花般转瞬即逝,而是各自有了更深入的发展方向,并在逐步构建基于 AIGC 的新生态体系。

    比如图像生成模型 Stable Diffusion,由于是开源的,在各路大神的加持下发展一片欣欣向荣,大火的二次元画风模型 NovalAI,生成效果媲美真人 Coser 的训练模型 Lora,还有前面提到的可以提取人体姿势骨架的模型 ControlNet 都是基于或围绕 Stable Diffusion 开发的。

    另一个 AI 图像生成工具 Midjourney 则凭借技术迭代和成熟的社区运营成功实现商业化。它图像生成质量极高,吸引了绘画、设计、影视、游戏等各行业人员成为付费会员,Midjourney 也开始成为这些行业工作流的一部分。

    Midjourney 生成的各类图像,图片内容来源: Midjourney 官方社区

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    AI 图像生成技术对绘画带来的影响大家都有目共睹,而它对设计行业带来的影响和改变也不小。由于 AI 生成的图像质量越来越高,出图速度也快,不少外国设计师们都纷纷利用 Stable Diffusion、Midjourney、Dalle 2 等工具辅助自己进行设计,或快速提供海量的灵感参考。

    YouTube 设计博主 @Codex Community 利用 Midjourney 生成的鞋类网页设计灵感,图片内容来源:How to use AI Art and ChatGPT to Create a Insane Web Designs - YouTube

    YouTube 设计博主 @Piximperfect 利用 AI 图像生成工具 Dall·E 结合 PS 完成对人物的无痕扣除,图片内容来源: https://www.youtube.com/watch?v=rtI1MZSdK1A&t=314s

    DALL·E 和 ChatGPT 同属 Open AI 公司,戳下面的链接查看对 DALL·E 介绍:

    10秒出图,以假乱真!设计师「用嘴修图」的愿望要成真了? 大家好,我是和你们聊设计的花生~ 之前给大家推荐了 AI 图画生成器 Disco Difussion,它可以根据文本提示自动生成恢弘奇幻的艺术,非常适合作为艺术创作的灵感来源。

    阅读文章 >

    而在国内,也有专业的设计团队开始利用 AI 图像生成工具。腾讯官方设计团队 ISUX 在前几天发表了一遍文章,讲述他们如何利用 Midjourney 生成图像时间短、批量大、风格多的特点,优化日常运营设计流程。设计服务平台稿定也推出了一个 AI 工具“稿定 AI”,用户可以根据参考图+描述词生成一张完整精美的插图,为生成平面设计素材提供了新思路。

    ISUX 的部分设计流程,图片内容来源: https://www.uisdc.com/aigc-design

    “稿定 AI”展示的部分 AI 生成效果图

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

    一方面是设计师主动利用 AI 图像生成工具优化自己的工作流程,另一方面也有越来越多针对设计工作开发的 AI 工具,涉及图像处理、UI、网页、PPT、包装等多个方面。

    一、AI 图像处理工具 Clipdrop Clipdrop 官网直达: https://clipdrop.co/

    同类型产品 Magic Studio: https://magicstudio.com/

    比如之提到过很多次的 Clipdrop,它是国外一家专注 AI 图像处理程序插件的公司,目前已经开发出智能修图、一键去除/替换图片背景、对照片立体打光、文本去除器等多个 AI 程序,有在线版和手机应用,还可以接入 PS、Figma 等设计软件。这种借助了 AI 技术的图像处理工具,让传统的修图改图等设计工作变得高效轻松,而且开发类似工具的公司远不止 Clipdrop 一家 ,很多公司都在探索 AI 技术在图片处理上的各种新用途。

    ClipDrop 开发的设计神器:

    扣头发丝不留痕!最新免费抠图神器 ClipDrop Remove Background 来啦~ 大家好,我是和你们聊设计的花生~ 随着人工智能技术的发展,运用算法自动进行图片处理的工具越来越多,极大地提升了设计师的工作效率。

    阅读文章 >

    照片没有氛围感?快来试试这款打光修图的神器「Relight」 大家好这里是和你们聊设计的花生~ 在人像摄影中,灯光设置是非常重要重要的一环,好的打光能丰富画面层次,提升整体情绪氛围。

    阅读文章 >

    二、AI 图库 GhostlyStock 网站直达: https://www.ghostlystock.com

    GhostlyStock 是一个类似 Unsplash 的免费图库,包含照片和插画 2 种类型的图片。它的特别之处在站内图片都是由 AI 生成的,如果你没有找到自己想要的图片,可以自己输入描述词生成一张新的图像。虽然图片的质量参差不齐,但对找图片素材来说是一个很新奇的体验,也可能是未来免费图库发展的一个新方向。

    GhostlyStock 主界面

    三、AI 驱动的 UI 设计工具 Galileo AI 官方直达: https://www.usegalileo.ai/

    同类从产品 Uizard Designer: https://uizard.io/autodesigner/

    既然 AI 能根据文本生成各种精美的图像,那能不能进一步生成更具体的设计类素材?答案是能。

    Galileo 就是一款根据文本描述生成 UI 界面的软件,据官方介绍其模型由数千款优秀 UI 设计作品训练得来,可以根据文本生成高保真、可编辑的用户界面,为 UI 提供优质的灵感,并减少重复的调整工作。另一款同类产品 Uizard Designer 也是专注于 UI/UX 设计,用户能通过文本描述生成多屏幕设计原型,并可以邀请团队成员一起实时共同设计。

    Galileo 官方演示视频

    Uizard Designer 官方演示视频

    五、AI 驱动的 PPT 生成工具 Tome 官网直达: https://beta.tome.app/

    Tome 的官方定位并不是 PPT 内容生成工具,而是 “Generative storytelling(生成性的故事讲述 )”,但它生成内容的形式和 PPT 并没有什么差别,于是理所当然的被大家认做是一种 AI 生成 PPT 的工具。

    用户输入一段对主题的描述文本,点击生成,Tome 就能自动生成主标题和多个子标题,并为子标题生成对应文本内容和配图,最终得到一个内容充实、形式完整的 PPT 形式的文件。虽然每张页面都是左文右图,但是自动生成的标题和主题的内容是契合的,内容逻辑通畅,可以免去用户自己查资料列大纲的步骤。另外它还支持根据内容生成 3D 模型和动图,自动配置响应式页面,以及任意嵌入来自互联网的内容。

    Tome 官方演示视频

    四、AI 辅助 Figma 设计 Diagram 官网直达: https://diagram.com/

    Figma 已经是一个非常便捷的在线 UI 设计工具了,但并不妨碍有人用 AI 把它变得更加好用。Diagram 是一个专注研发 UI 设计工具的小团队, 目前开发了多款 AI 驱动的小插件,包括一键让 Figma 任务自动化的 Automator,根据文本生成图标/图像的 Magician,以及使用代码进行设计的 Prototype r 等,搭载上 Figma 后可以帮助 UI 设计师更好的完成任务。

    化神器 Automator 的官方演示视频

    六、AI 辅助包装设计 PLUG AI 官网直达: https://hp.package-ai.jp/

    日本公司 PLUG AI 在去年 10 月份推出了一个名为 「Package Design AI」评选分析系统,用户先上传包装所需的设计元素,AI 会在 1 小时内自动生成的 1000 组包装设计方案,然后展示排名前 100 的方案。系统还可以对生成结果进行分析评估,预测针对不同年龄、职业、性别的消费者,哪些包装会更受喜爱。

    官方称这套 AI 分析系统能缩短包装设计周期,节省设计成本,并准确预测设计出的包装能否获得好的效果。据了解日本零食品牌 Calbee(卡乐比)就接受了这款 AI 系统的分析建议,为旗下一款产品设计了新包装,然后销售业绩比起旧包装增长了 135% 。

    图片内容来源:PLUG AI 官网

    看过了设计师们利用 AI 优化自己的工作流程,也了解了不少专门为设计研发的 AI 工具,我的感觉是 AI 真的能提高设计效率,帮助设计师更好地完成设计工作,而不是所谓的“取代设计师”。不过现在看到的 AI 设计工具大部分都是国外的,使用起来有一定门槛,希望未来有更多好用的国产 AI 设计工具出现。

    对于 AI 和设计师的关系,不知道大家有什么感想呢?欢迎在评论区分享。喜欢本期推荐的话请大家多多点赞收藏进行支持,之后会为大家推荐设计干货知识 ~

    参考资料:

    https://mp.weixin.qq.com/s/dafCLibRZh4M3E7w4PVlnQ https://mp.weixin.qq.com/s/HiRGY1U-NwKF8jNVL-qQOA https://weibo.com/1948301550/MuD2t8MNo https://weibo.com/1757693565/MqxjAaAQD 推荐阅读:

    Text to Skybox ! 一键生成360°无缝环境贴图的AI神器 大家好,这里是和你们聊设计的花生~ 之前向大家介绍过不少 AI 绘画工具,比如 Dall·E 2、Midjourney、Stable diffusion 等,它们都是大型的 Text-Image 模型。

    阅读文章 >

    腾讯平面设计实战!如何用AIGC提高200%的做图效率? 一、AI 绘图背景与趋势 随着互联网行业发展和技术的进步,设计师也有越来越丰富的手段来应对多种类型的产品需求;比如说 3D 渲染、各种自定义的插件已经成为设计师的工作日常,在不断的提高大家的工作效率;包括最近火热的 AI 绘图,也时常出现在设计师的讨论话题当中。

    阅读文章 >

  • 从2个场景出发,深入解析B端系统的页面跳转

    UI交互 2023-03-01
    在一个普通 B 端产品(以浏览器为载体)的页面中,相信很多产品设计师都有类似的经历,这个页面是要一直沿面包屑下沉,或者像 C 端产品一样无限返回,还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。信息结构的设计过程中,每一个功能模块是经过深思熟虑做好定义的,如果想让用户的任务流程顺...

    在一个普通 B 端产品(以浏览器为载体)的页面中,相信很多产品 设计师 都有类似的经历,这个页面是要一直沿面包屑下沉,或者像 C 端产品一样无限返回,还是新开网页 Tabs 展示。在一次项目管理产品的设计中发现跳转似乎有可循的逻辑。

    信息结构的设计过程中,每一个功能模块是经过深思熟虑做好定义的,如果想让用户的任务流程顺畅、有所提效,那么信息架构的导航必须要发挥作用,也就是说用户需要去记住或者被“教育”每个模块的内容有什么。

    更多B端干货:

    8000字干货!B端交互设计师如何进行页面设计? 前言 在日常的设计工作中,拿到产品给的原型或者需求清单,分析完用户和任务流程后不知道该如何下手,或者不知道如何系统的开展设计工作,再或者不知道如何做出符合用户和业务目标的设计方案。

    阅读文章 >

    一、为什么要跳转 1. 结构扁平化,减轻心理负担

    一次测试平台项目迭代中,发现旧有版本的面包屑层级特别深,最多可有 5 级,而且是详情页面与新建页面糅合在了一起,作为项目流程中的一个环节,不应该出现这种情况。于是调研了市面上能看到 B 端产品,腾讯云、阿里云和华为云等逐渐弱化了面包屑导航的使用,页面层级一般不会超过 3 级,华为云和腾讯云已经取消了面包屑的使用,阿里云虽然保留了面包屑导航,但是二级页面面包屑和返回同时存在,信息层级上也已经弱化了面包屑对信息层级的延伸。

    在一次任务流程中,如果信息层级很深,意味着用户会深入到更多的页面,进而偏离主流程,同时需要接纳的更多信息量,额外增加的信息负担会给用户的心理造成压力,而且还会给产品扣上信息沉重的帽子。对于主流程,模块提炼出的信息已经能够满足对用户对该模块的需求,如果仍有想了解颗粒度更小信息的需求,那么可以通过友好链接跳转到信息的源始位置查看,而不是在当前页面与主流程同级继续下沉。

    2. 增强记忆点,提高效率

    在产品设计之初,每个一级模块就已经做好了定位,比如腾讯云的私有网络,包含了子网和路由表,如果用户在私用网络的详情页能继续打开子网的详情信息,那么私有网络的定位就变成了私有网络的信息+子网信息,进而削弱子网模块的功能性,对用户而言,会有多处可以查看子网信息,这会模糊用户对产品结构的清晰认知。根据席克定律,下次信息查看时,面临众多的选择,任务效率是变低了的。

    另外,对于需要信息对比的场景,新开页面可以满足多种同类数据的对比需求。

    那么如果像腾讯云或者阿里云这样,新开 tabs,直接跳到子网模块的页面,这会暗示用户,这个功能信息点不属于私有网络,进而会强化子网模块的定位,也会凸显私有网络的主要流程。

    3. 关于用户习惯

    ① 对于国内浏览器的用户

    国内的用户对百度等搜索浏览器并不陌生,并且长时间的使用已经对页面的跳转有了一定的预期和习惯。通过友好链接跳转到相应的页面,点击 tabs 回到搜索界面。同样借助浏览器为载体的产品面对同一个用户群体,其实不需要太多的再教育。

    另外,如果要处理或浏览的信息量很少,弹窗或者抽屉就可以即时获取,这时候就不需要跳转查看。

    ② 公司内部的用户

    当然,具体的产品还需要考虑聚焦的用户人群,调研观察当前产品的用户习惯是怎么样的。如果是与其他平台或设计方向是有差异的,就要谨慎使用跳转方式变更,总结当前的用户习惯,通过引导或者多次迭代,统一使用正确的跳转方式。

    二、应用场景 什么场景适合

    1. 平台 A 跳转到平台 B

    平台 A 中的一个流程中有平台 B 的信息,如果想点击查看具体信息,需要新开 Tabs 网页。

    2. 同一个平台内,当前模块流程下查看/编辑其他模块的内容,需要跳转新开 Tabs。

    跳转新开页面,如果信息的承载方式本身就是页面,那么跳转之后查看直接展示原来的页面就可以。如果是弹窗或者抽屉,有三种展示方式:

    当前页面打开弹窗或者抽屉 新 tabs 回到原来的界面,打开弹窗或抽屉

    在 coding 的页面中,如果在一个抽屉中打开另外一个子工作项,回到原来页面后,详情信息还是以抽屉展示。

    3. 新 tabs 打开具体信息,不过原来的弹窗或者抽屉信息被铺在了页面中。

    当前抽屉中打开另外一个模块的抽屉信息时,新开页面的形式变成了页面,没有了返回等信息,页面中的信息平铺,引导用户看完信息之后,关闭当前页面。另外,这种展示方式还与权限有关系,方便信息在不同角色之间流转。

    三、特殊场景 当然,上述的结论并不是市面所有产品的一致方式,通过体验还发现了以下不同的方式,以当前页面所处的场景为维度解释。

    1. 信息为当前模块流程的一部分

    在产品层面该功能信息是属于当面模块定位的,不适合再打开 tabs。

    2. 工作台/概览类的信息

    这关于工作台和概览类功能的定位问题,大部分的产品都将工作台定位成任务状态的中转站,用来做跳转分发使用,因此从工作台点击跳转到具体的任务模块,可以直接在当前页面跳到具体的任务页面。不过对于一些大的平台,还是建议新开页面,这样方便二次浏览待办信息。

    3. 其他

    ① 当前在一级页面,如果跳转到其他模块可以选在当前页面直接刷新,不需要新开 Tabs。如果产品的基本定位是其他模块的内容都需要新开 Tabs 网页,最好保持统一。

    ② 动态增减页签导航

    一些产品的结构设计是导航栏常驻,所有的页面都是以动态增减页签的形式展示,那么只要是本平台内的信息都是不需要新开 Tabs 网页的。不过使用这种方式设计者需要定义的是动态增减页签的使用逻辑。

    ③ 导航模块常驻

    在一些产品中,导航模块是常驻的,在一个模块下的任务流程中,通过点击友好链接跳转到目标页面,导航随之变化,对用户也会存在一定的暗示:模块与模块之间是有不同功能定位的。但是用户当前用户的任务流程并没有结束,点击了友好链接,相当于丢失了主流程,要是返回还需要不断的点击,如果是个新建流程会更糟糕,所以这种方式不是很友好,要谨慎使用。

    像阿里云这样,左侧导航栏收起的的时候,用户从一个页面到另外一个页面,面包屑从 1-2-3,变成了 4-5,用户对当前页面的位置是无感的。从而会模糊任务路径方向,没办法准确定位当前位置。所以,新开 tabs 网页是很有必要的。

    当然,层级越深用户能触及的频率就会越小,于是团队的一部分成员就会说既然频率小那么对产品的影响很小,可以忽略的。但是,场景频率小是对所有用户而言,不是说用户群少。对一个产品而言,让用户满意很难,但是一个看似不起眼的跳转,只要让用户用过一次觉得难用、页面层级深,产品的整体印象就会大打折扣,因为用户不会在意这个问题是产品定位的主流程还是低频场景。往往用户能记住的不是产品带给业务的流畅感和增长,因为他们认为这是产品应该做到的,但是一次不好的体验却会历久弥新。

    页面跳转 的总结有一定的局限性,特殊业务场景还需要做特殊处。

  • 第四波!2023年2月精选实用设计干货合集

    UI交互 2023-02-28
    大家好,这是 2023 年 2 月的第 4 波干货!这次干货合集开头的创意工具合集网站特别不错,设计师和创意工作者应该都会喜欢。当下大热的 AI 生成也越来越多地反馈到设计工具当中,这次合集也推荐了 3 款人工智能工具,功能各有偏重。

    大家好,这是 2023 年 2 月的第 4 波干货!这次 干货合集 开头的创意工具合集网站特别不错,设计师和创意工作者应该都会喜欢。当下大热的 AI 生成也越来越多地反馈到设计工具当中,这次合集也推荐了 3 款 人工智能 工具,功能各有偏重。除此之外,出自设计社区的 Notion Plus 工具集、顶级 SaaS 服务灵感合集也相当不错。

    当然,在此之前记得看看往期干货中有没有你感兴趣的素材:

    第三波!2023年2月精选实用设计干货合集 大家好,这是 2023 年 2 月的第 3 波干货!

    阅读文章 >

    下面我们具体看看这一期的干货:

    1、创意工作者高效工具大合集 https://www.curated.design/

    这是一个面向创意工作者的最新设计工具和设计服务的导航网站,和以往推荐的很多同类导航网站有区别,Curated Design 所推荐的基本都是最新最前沿的创意工具,他们对于工具本身的素质、产出内容的质量都有很高的要求,而所提供的工具的门类,也紧跟趋势加入了人工智能的类别。对于创作工具和素材有兴趣的同学,可以关注一下这个网站。

    2、全方位强化 Notion 的超强工具集 https://www.notionplus.dev/

    有很多设计师同学,已经开始使用 Notion 做一些基础的设计了,而现在借助刚刚问世的 Notion Plus,你可以在 Notion 中使用超过 500 种不同的自定义组件,创建超过 1000 种不同的组合,将 Notion 彻底变为一个开放式的设计工具,你可以结合 Super.so 或者 Potion.so 这样的服务来直接制作网站,将你的内容管理、设计和产出,全部在 Notion 中完成!

    3、人工智能专辑封面生成器 https://www.daftart.ai/

    Daft Art 是独立设计师和开发者 Ahmed 所创建的服务,这项服务经过大量的数据训练,可以根据你的音乐的标题、内容来创建一系列的封面图,你可以在其中选择和你的音乐氛围接近的图。Daft Art 能够生成的封面图高达 3000x3000 px,同时,它生成的封面图同样适合 Spotify 和播客的封面,有需求的创作者可以试试看。

    4、人工智能多风格肖像生成器 https://changestyleai.com/

    这个名为 Change Style AI 比起之前的一些人工智能头像生成工具要更加成熟一些,它可以更好的保留图像原来的结构,角色的动作和造型,你上传图片之后,能够借助人工智能生成多大30种不同风格的照片。目前这项服务提供免费试用,可以上手体验一下。

    5、视障用户网页效果模拟器 https://venngage.com/tools/color-blind-simulator

    视力障碍的类型有很多种,想要确保自己设计的页面在配色上有足够良好的可用性,最好的办法还是直接体验一下不同视障人士查看网页时候的体验。Venngage 视障模拟器可以模拟 7 种最常见的视障用户浏览时的效果,基本上可以覆盖多数有视力障碍的用户。

    6、顶级 SaaS 服务商设计灵感大合集 https://www.saasframe.io/

    这个网站汇集了超过 1000 个顶级 SaaS 服务和产品的产品页面、营销服务和电子邮件的相关设计,如果需要为当前的产品设计风格合适、呈现方式合理的页面,不妨在这里看看成熟的设计案例。

    7、多合一人工智能内容编辑服务 https://booltool.boolv.tech/home

    Booltool 是一个一站式人工智能编辑工具,它可以在人工智能的加持之下,帮你快速地将原始的素材加工为可用的资源,无论是图片、文本还是视频,都可以快速进行编辑、修整。换句话说,在它的帮助下,你所设计的网页和 APP 或者宣传页面,都可以 Booltool 直接完成,无需在别的地方操作。

  • 做平面设计没有创意灵感?三大方向帮你突破!

    UI交互 2023-02-28
    本篇内容是借鉴参考的下半部分,因为上半部分的内容过长了,所以不得已分成了上下两章。下半部主要针对的是突破的技巧,我会把我自己总结的一些经验性的创意思路方法教给大家,如果熟练掌握这套思维,一些简单的,工作中常用的创意对于大家来说就完全不是问题,同时我们有了这个基础再去看别的作品的时候也会吸收到更多更实用的内容。上期...

    本篇内容是借鉴参考的下半部分,因为上半部分的内容过长了,所以不得已分成了上下两章。下半部主要针对的是突破的技巧,我会把我自己总结的一些经验性的创意思路方法教给大家,如果熟练掌握这套思维,一些简单的,工作中常用的创意对于大家来说就完全不是问题,同时我们有了这个基础再去看别的作品的时候也会吸收到更多更实用的内容。

    上期回顾:

    不知道如何借鉴高手作品?收下这份平面设计保姆级教程! 我知道很多人其实都有参考的习惯,但是经常进入参考的两大误区,最大误区就是从参考变成抄袭,这个是很多人的问题,经常性的抄袭会抹杀自己的创造能力,什么是创意?

    阅读文章 >


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通