• 6000字干货!3个优秀交互设计师应该具备的边界感

    UI交互 2023-01-05
    引言售卖软件服务的公司,最理想的状态就是开发一套通用的解决方案或产品,而几乎不用接收任何定制化需求(定制化需求大多会被内化成通用产品的新功能)。这种经营模式下,公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足,那些为了提升体验满意度而做的努力就很容易有结果,设计师基本不用太过担心投入的成本。

    引言

    售卖软件服务的公司,最理想的状态就是开发一套通用的解决方案或产品,而几乎不用接收任何定制化需求(定制化需求大多会被内化成通用产品的新功能)。这种经营模式下,公司全部的业务和技术力量都可以集中在这一套标准化产品上。因为人力充足,那些为了提升体验满意度而做的努力就很容易有结果,设计师基本不用太过担心投入的成本。但很多公司面向的客户形态无法做到这种理想状态,这些公司对外交付的版本一般都是基于主线版本的定制化版本。为了效益,客户当然越多越好,交付肯定越快越好,这就意味着评审交互设计师输出的交互设计方案时,体验至上不再是首肯的目标,按时交付才是。所以支撑外包项目的时候,交互设计师如果没有边界感,输出的交互设计方案在后面的评审阶段将会被不断推翻,无法落地。前面虽然说了标准化产品维护过程中设计师不用过多考虑实现成本,但标准化产品也会有迭代周期,在一个有限的迭代周期内,也同样需要考虑边界问题按时完成版本迭代任务。那么 交互设计 师支撑外包项目或版本迭代项目时都需要有哪些边界感呢?今天我们来谈谈需求边界和技术边界。

    更多兆日UCD干货:

    4000字干货!9个方法帮你掌握UX文案写作 相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。

    阅读文章 >

    一、需求边界 1. 什么是需求边界

    需求边界是指在一个明确的目标或产品版本中,为交付具有规定特性与功能的产品、服务或成果而必须完成的有限工作范围。该范围可控,不会在外力驱使下随意更改。

    2. 为什么要有需求边界

    试想,如果项目经理对客户的需求来者不拒,会有什么后果?项目无法按时交付,造成亏损。如果在开发阶段,需求依然充满变数,会有什么后果?开发人员可能会暴走继而影响团队士气。如果提前定义好需求边界,就等于给下游制定了明确的工作目标,也利于项目排期和进度把控,从而避免出现上述问题。

    3. 如何找到需求边界

    ① 如何找到项目中的需求边界

    项目在启动阶段,对外需要一份正式的合同来确立合作关系,对组织内部一般都会有《项目工作说明书》《商业论证》《项目章程》等文件来建立内部协议拉通内部目标。其中,《项目章程》会对整个项目的需求范围做出最原始的定义,一般包含概括性的项目描述、项目产品描述及项目的总体范围要求,此时定义的需求颗粒度最大。就比如,某银行项目在此阶段的需求就是“上线企业 OA 产品”,这就明确了需求边界,我们要做企业 OA,而不是做企业网银。如果项目进行到一半,客户忽然要求我们做企业网银产品,那完全可以拒绝,因为超出了需求边界。(不过站在商业角度,遇到这种情况商务员应该会无比激动,因为来年的 kpi 在向他招手。)

    接着,在项目规划阶段最重要的前置工作就是进行项目范围管理,项目成员需要收集需求、定义范围、创建 WBS(工作结构分解)。这个阶段的 WBS 就是为了打造项目章程中定义的最终产品、服务或成果而进行的需求细化。此时,定义的范围就可以作为我们进行交互设计工作的指导性文件。(因为在这个阶段不细化需求和分解任务,就无法进行准确合理的项目时间管理、成本管理等的规划工作)。

    接着上面的例子,项目启动阶段,《项目章程》里定义的需求边界为“上线企业 OA 产品”,接着在项目规划阶段,就需要跟客户沟通确认具体的《功能清单》(见图 1-1,此文件是项目管理过程中非常重要的文件,如果没有此文件,项目监控过程将无法进行)。比如说我方通用解决方案里该产品是包含 18 个功能,但客户可能只需要其中 15 个,然后还要补充几个我方通用解决方案里没有的定制化功能。这个功能清单就是需求边界,也是我们开展交互设计工作的立足点。

    《功能清单》示例

    如果设计师在设计过程中为了提升体验而增加了额外的功能,比如说客户的需求是对发票拍照存档,交互设计方案中拍完照还能 OCR 识别发票信息,这个设计方案就超出了需求边界。单纯站在体验的角度上看,真是个很棒的点子,但站在项目管理的角度上看,这是“愚蠢”的,要知道,项目经理时刻担心项目进度不可控,一定不会让需求蔓延。

    但如果评审交互设计方案时是客户提出了增加发票 OCR 识别的功能,设计师了解需求边界的话就不会一口答应导致后面落子悔棋的尴尬局面。(如果客户提出了任何非交互设计的变更提议,我们都不要一口答应,可以说会后跟项目组讨论下再给您答复。)我们也可以了解一些项目经理针对需求变更的处理技巧:需重新评估需求的变动成本,跟客户说明,修改合同;寻找其他简单易实现的方案替代;告知用户在下一迭代版本中进行规划。

    当然,也会有特殊情况,为了维护客户关系或者按投入结算或者有什么需要达到的 kpi,项目对时间和成本没有特别要求,对需求变更有很好的包容度,那我们可以尽情发挥我们的设计才能,而不用受需求边界的约束。

    ② 如何找到小迭代需求的需求边界

    上面讲项目规划阶段的《功能清单》就可以当作项目的需求边界,但是一般这份功能清单中的功能颗粒度较大,还是需要把一个个功能看成一个个需求,分别进行业务需求、用户需求、功能需求的剖析和拆解。另外,公司标准化产品的维护过程中,需求往往是市场声音或是公司上层产品规划策略亦或是专家走查的待优化问题,这时候如果没有专门的需求分析师或产品经理,交互设计师接收到的往往不是拆解后的业务需求、用户需求、功能需求,而是“一句话需求”。我们如何找到这种需求的边界呢?

    我们先了解几个概念:业务需求、用户需求、功能需求。

    业务需求描述的是用户为什么需要这个产品,用户需求描述的是用户使用该产品必须要完成的任务,功能需求描述的是开发人员必须实现的软件功能。下面举个例子来说明 3 个维度的需求,真正的需求边界就会浮出水面。某个项目的《功能清单》中,有一个“码上付”的功能,进行客户调研时,客户说“因为当前系统跟另一个系统无法进行数据交互,所以在当前系统不知道用户有没有申请成功,希望点了码上付申请弹出一个弹窗,提示用户不要重复申请。”按照客户的需求描述,方案如图 1-2:

    客户描述的方案

    该方案违背了交互设计的“防错原则”,增加了用户的“试错成本”,那必须按照客户的要求做吗?再次分析客户的描述,可以发现客户描述的是功能需求而非业务需求。运用需求分析方法和技巧挖掘它的上层需求(因篇幅有限不再讲述分析过程),可以得出以下结论,业务需求是:“防止用户重复提交码上付申请”。

    接着分析,能满足以上业务需求的用户需求是:1.用户申请成功后不能再进行申请操作(系统阻断用户的重复申请行为);2.用户能看到“请勿重复申请”的文字提示(靠提示让用户自主停止重复申请行为)。

    这些用户需求对应的功能需求是:用户提交过申请后,将“码上付”入口置灰禁用,并在入口处打上标签“已申请”,如果申请成功该入口就一直置灰禁用,如果申请不成功该入口需要变为启用状态以便用户再次申请。

    但是客户的描述给出了技术边界(后面会详细讲解此概念):当前系统跟另一个系统无法进行数据交互,所以当前系统不知道用户有没有申请成功,这就导致上面分析的用户需求的第 1 点是无法满足的,除非我们要求客户去改造关联系统而且客户愿意配合,否则我们只能去修改用户需求:让用户看到“请勿重复申请”的文字提示。靠用户自己规避重复操作行为。用户需求一旦修改,对应的功能需求也会随之变化:在申请码上付的按钮附近给出醒目提示“如果您已申请过码上付,请勿重复申请”。最后的交互设计方案如图 1-3:

    修改后的方案

    通过以上案例分析,我们可以把业务需求、用户需求、功能需求抽象为依次耦合并依次包含的关系。用户需求和功能需求可能会根据技术边界或其他约束而改变,但业务需求不会改变,也就是说小迭代需求的业务需求才是真正的需求边界。

    从图 1-4 可以看到,一开始设计师输出的方案肯定是满足业务需求的前提下,用户体验最好的方案,但有些用户需求+功能需求组合超越了技术边界和其他边界。我们评审设计稿的过程,其实就是不断将用户需求+功能需求修正到各种边界内的过程。(业务需求一般是在描述需要解决的问题,至于如何解决,就是交互设计师可以发挥的空间。如果业务需求都变了,那就是需求变更,需要走需求变更申请流程。)

    备注:以上案例将业务需求描述为“防止用户重复提交码上付申请”而不是“阻止用户重复提交码上付申请”,大家可以思考一下有何不同?

    用户需求+功能需求修正前后对比

    二、技术边界 1. 什么是技术边界

    技术边界是指在现有技术水平可以被实施运用的有限范围。

    2. 设计师为什么要了解技术边界

    一个合格的交互设计师,能灵活运用各种交互设计方法输出体验最佳的概念方案是基本要求,但只站在体验最佳角度考虑问题所出的设计方案会是最终方案吗?显然经常不是。

    为什么会出现这种情况?除了一开始的需求不清晰不准确导致评审交互设计方案时还需要不断反向修正需求的原因,还有一大部分原因是体验最佳的方案无法用现有技术条件实现且重新开发成本太大。

    设计方案评审的过程,其实就是一拨需求干系人在不断寻找业务需求、技术边界、最佳体验之间的安全区(见图 2-1)的过程。如果交互设计师能熟悉技术边界,一开始输出的方案就往安全区里靠近,会大大缩短设计周期,否则只能一遍又一遍被按在地上摩擦。

    安全区示意

    3. 如何获知技术边界

    ① 新产品项目的技术边界

    新产品项目的技术边界受制于上面提到的《功能清单》,比如设计的过程中,设计师觉得界面上展示一下头像会使信息更具识别度,这时候就需要去查阅功能清单中有没有上传头像的功能,如果没有该功能项目经理也不允许增加该功能,我们只能修改设计方案:去掉头像或者改用通用头像。其他更细节的边界几乎是无法提前预知的,只能在设计方案评审阶段或开发阶段暴露出来,反向修正设计方案。因此,设计师支撑新产品项目,一定要提前熟知功能清单,有的放矢。

    ② 已有产品升级项目的技术边界

    如果是旧产品的升级项目,技术边界相对就多一些,因为要考虑现有系统的兼容性和现有技术的复用性。设计师动手前要体验产品,浏览客户提供的产品资料、用户手册等,尽可能多地提前预知和确认技术边界,这样可以减少设计方案的修改次数,提高效率。

    还有一些明显的技术边界,在需求沟通阶段就能暴露出来,比如上面的案例中,客户一开始就提出“两个系统目前无法进行数据交互”这个技术边界,但还有一些边界只能边沟通边发现。比如设计师觉得通用头像区分性别更具情感化,所以设计方案中女性用粉色通用头像,男性用蓝色通用头像,评审的时候就需要询问客户系统能不能区分性别,如果没有又无法增加该功能,我们只能修改设计方案:所有人员用同一个颜色的通用头像。如果评审时没有确认此细节,开发实现的时候就会找设计师沟通,影响开发进度。

    ③ 界面结构体现出来的技术边界

    界面结构能反映技术边界。如果已经确认是在现有的技术能力范围内补充新功能,那设计师就需要分析已有同类功能的界面结构,以免随意变更界面结构导致新功能界面结构无法跟已有同类功能界面结构匹配,加大变更成本。

    举例说明,某银行要上线公司的一套主线产品,且要增加一个功能模块,该功能模块的审批流程需要复用基线产品的技术。一开始考虑用户可能出于催办等目的,需要在表单申请界面看到完整的审批流程,所以设计新功能模块时,将审批流程平铺显示在了申请表单页面上(见图 )。

    基于交互经验输出的方案

    中间多次设计评审会也未提及这样设计有何不妥,最后开发做到这里,查看原有功能申请表单页的代码,发现同类功能的实现逻辑是将审批流程显示在了弹窗里(见图 2-3,显示在弹窗里而非当前页面上的历史原因是为了不破坏原有表单的界面结构)。

    现有实现的样式

    开发急轰轰来找设计师:“你这个界面实现不了啊”、“我们之前是这么实现的啊”、“要改也是主线产品改,但肯定来不及呀”,项目经理也急轰轰来找设计师:“按照现有技术实现的方式改下交互设计方案吧”、“项目交付时间快到了,别发散了啊”,在多重压力下设计师就得硬着头皮按照弹窗的样式,把所有表单申请页面全部改一遍(不改干净,新加入项目的开发人员会思考半天,然后来问你:这里为什么跟其他页面不一样,是有什么考虑吗?或是碰到“直男”开发,真的就按错误的交互界面实现)。

    按照现有实现修正后的方案

    如果对已有产品不熟悉,对已有的界面结构不熟悉,类似的情况会经常发生,这无疑增加了时间成本和沟通成本,是项目大忌。所以,设计师一定要会识别界面结构体现出来的技术边界。

    三、其他边界 “国家制度、法律法规、行业标准”也是设计工作的重要边界。

    比如,理财产品界面一定要打上“市场有风险,投资需谨慎”的提示字样,不可用高回报高收益宣传口号诱导用户;再比如,保险产品宣传时必须明示是保险产品,且不得与银行储蓄、基金、国债等进行收益比较。

    硬件设备的操作方式也是设计工作的重要边界,比如说使用遥控器操作的终端界面,要特别考虑遥控器操作的局限性,不可让用户输入大段文字,可通过手机扫码填写的方式替代;再比如,操作触摸屏时,不能像操作 pc 一样出现右击操作。还有,设计规范也是设计工作的重要边界,如果不考虑设计规范一致性,会增加用户的学习成本。

    除了上面展开讨论的需求边界和技术边界,还有后面提到的“制度法规”、“硬件设备”、“设计规范”,还有很多因素共同决定最终的交互设计方案。设计师可以在平时的工作中培养自己洞察边界的能力,以便输出更加成熟的方案。

    四、如何在各种边界内做出好设计 1. 须具备需求分析的能力

    设计师接收到需求之后,要能判断接收到的是不是业务需求,最好把业务需求用自己的语言描述出来拿给需求方确认。(如果团队分工明确,一般产品经理会把基于各种边界条件分析好的业务需求和用户需求给到设计师。如果团队无此角色,就得靠设计师自己识别。)就像前面提到的例子,如果业务需求是“阻止用户重复提交码上付申请”,而不是“防止用户重复提交码上付申请”,那性质就不一样了,阻止是不允许用户重复提交,那就得逼着客户和开发调整技术边界。但客户实际的意图是提醒用户最好不要重复提交,但允许重复提交。

    确认好业务需求,如果时间充裕,可以先不考虑技术边界,输出一个体验最佳的方案,然后再根据自己已知的不可抗力约束逐渐修正方案,如果时间紧张,这一过程可以在脑海里构思,直接输出修正后的方案组织评审。

    2. 具有洞察边界的能力但又有打破边界的勇气

    考虑各种约束久了,我有时候设计方案首先考虑的是开发能不能实现,好不好实现,这真的大错特错。设计师需要有技术边界感,但不能让技术边界感凌驾于体验设计之上,否则交互设计师就失去了存在的意义。

    例如,之前提到的发票 OCR 识别功能为例,应客户要求,要在主线产品的发票夹功能基础上增加发票 OCR 识别的子功能,该需求还要内化成主线功能。其中添加发票的界面,原来的界面结构是左图所示,页面的主体信息是发票照片的预览图像,加入发票 OCR 识别功能后,我考虑到万一将来有些客户不上发票 OCR 识别功能,或者识别不出信息的情况下,还是得按 4-1 左图展示,所以基于新旧系统和无数据场景的兼容性,我没有改变原有的界面结构,只是在预览图下面增加了识别信息的展示区域,即 右图展示。

    不破坏原有界面结构输出方案(左图为原有页面)

    但对用户来说,识别出来的发票信息才是他重点关注的内容,预览图只是个辅助信息,按照这个心智模型,首屏的主体信息应该是识别出来的发票信息,但上面的方案,首屏的主体信息是预览图。

    后来 UI 同事在进行视觉设计的时候,询问了开发能不能改变预览图的样式,得到开发负责人同意后,UI 同事按照信息层级关系优化页面(见 4-2 左图),而且跟开发沟通增加了一个扩展功能:没有成功识别到信息场景下和没有上线发票 OCR 识别功能的场景下,预置几个各种发票类型都会有的主要信息字段,让用户自动填入,见 4-2 右图(原有的发票夹功能,只有一个备注字段)。当我还在考虑开发尽量少改动时,UI 同事打破边界的勇气和灵活变通的智慧深深地给我上了一课。

    扩张边界后输出的方案

    3. 总结

    这篇文章讲了交互设计应具备的几个边界感,希望能帮助设计师快速输出安全区内方案以缩短评审修改周期,但请切记不可完全被边界束缚住手脚。交互设计师仍要站在体验最佳的立场,去争取扩张技术边界和其他边界,给设计打造更大的安全区和发挥空间。

    扩张边界后的安全区示意

    欢迎关注团队 微信 公众号:兆日 UCD

  • 看故事学设计!包豪斯是如何在美国德国发展起来的?

    UI交互 2023-01-05
    1933 年包豪斯被纳粹政府正式关闭,但所谓“人在灯就在”,包豪斯培养出来的优秀学员并没有放弃对现代设计的探索。但在当时紧张的政治气氛中,大部分包豪斯重要成员选择了先移民海外避避风头。这个过程中,实用主义的美国成为主要接收国,不但接收,还非常珍惜与重用相关人员,为日后国际主义在美国崛起埋下关键伏笔。

    1933 年包豪斯被纳粹政府正式关闭,但所谓“人在灯就在”,包豪斯培养出来的优秀学员并没有放弃对现代设计的探索。

    但在当时紧张的政治气氛中,大部分包豪斯重要成员选择了先移民海外避避风头。

    这个过程中,实用主义的美国成为主要接收国,不但接收,还非常珍惜与重用相关人员,为日后国际主义在美国崛起埋下关键伏笔。

    关于 包豪斯设计 学院:

    揭秘!影响设计史百年的包豪斯学院,是如何教学生的? 编者按:包豪斯学院是如何教书育人的?

    阅读文章 >

    一、进入美国的包豪斯 1937 年时候,包豪斯创始人格罗皮乌斯接受美国邀请,在哈佛大学建立设计研究院,担任教授与院长。

    用一篇超全面文章,帮你了解包豪斯创始人的前世今生 适逢今年是包豪斯诞生100周年,我们来谈谈包豪斯背后那个男人,就是创始人——瓦尔特·格罗皮乌斯先生(Walter Gropius)。

    阅读文章 >

    远渡美国的格罗皮乌斯

    1930 年代,美国大学大多数师生都曾通过多种途径的阅读(包豪斯丛书发挥了巨大宣传作用)而知晓欧洲现代主义的发展情况及包豪斯这所最具代表性的学院。

    所以格罗皮乌斯的到来受到美国大部分同行及师生的热烈欢迎。

    随后马塞尔·布劳耶(Marcel Lajos Breuer)也紧随其后一起在哈佛任教,著名华人建筑师贝聿铭就是他们这个时期的一名学生。(此故事已收录在「设计大师启示录」)

    现代主义最后的设计大师:华人之光贝聿铭(上) 随着史太浓「大师列传」的发表,蛮多朋友私信给我们提出自己希望看到的大师,其中有一位频率特别高,而他恰好也在我们的讲述计划内,就是今天的主人公,被我们称为华人之光老爷子的贝聿铭先生。

    阅读文章 >

    现代主义最后的设计大师:华人之光贝聿铭(下) 贝聿铭曾是包豪斯创始人格罗比乌斯的学生,也是唯一作为华人跻身于现代设计大师行列的,而且被誉为「现代主义的最后一位大师」。

    阅读文章 >

    马塞尔·布劳耶与贝聿铭课外时间的聚会

    格罗皮乌斯刚刚开始在哈佛推行基础设计类课程时其实遭受了不少阻力,因为任何改革都难免触碰到利益所得者,这个群体通常被称为“保守派”。

    但随着课程试行获得良好效果,很快受到学生欢迎从而冲破了这种阻力,并且哈佛这样的实践很快引起美国其它设计学院的效仿。

    格罗皮乌斯醉心于设计教育的研究

    随着影响扩散,格罗皮乌斯将包豪斯的教学理念成功在美国本土化,成为美国设计教育改革的核心力量。

    其功能主义理念特别强调将形式、材料和家庭日用物品的结构做出改变以适用工业化程序,设计出更标准化、更好用,更便宜的产品,为大众带来了实际好处。

    如此一来非常符合讲究实用主义及高度商业化的美国社会,受到政府、企业跟教育界重视,因此格罗皮乌斯等于将在德国没有实现的目标在美国完成了。

    除了格罗皮乌斯,包豪斯第三任校长密斯凡德罗则到了美国芝加哥的阿摩尔理工学院(Armour Institute of Technology)。

    密斯凡德罗就是在美国封神的

    这是美国一所著名的老建筑学院,密斯在此为其组建了设计学院。

    在美国的密斯因为其风格符合社会发展需求,如鱼得水大展拳脚,不但改变了美国建筑格局,还逐渐被拓展为一种全球风潮,就是国际主义。(故事详见「设计大师启示录」)。

    “少即是多”是我说的:顶尖设计师密斯凡德罗 如果要问设计师一句最适合装逼的话,相信大部分人都会说「少即是多(Less is More)」,甚至有一次我听一名企业主说了出来,可见这句话的影响力。

    阅读文章 >

    除了两位校长,包豪斯的重要导师莫霍里·纳吉(Laszlo Moholy Nagy)则在 1937 年到芝加哥尝试成立“新包豪斯”,办学原则跟德国包豪斯完全一致,但属于一个私立学院。

    莫霍里·纳吉是包豪斯很重要的成员

    无奈一年之后因为资金支持者撤出而关闭,所以没有产生太多影响。

    而另一位导师约瑟夫·艾尔伯斯(Josef. Albers)则在 1933 年去了著名的“黑山学院”(Black Mountain College),担任艺术系主任。

    约瑟夫·艾尔伯斯及其色彩作品

    艾尔伯斯在黑山呆了足足 16 年,包豪斯的理念因此在这里找到一种延续,所以黑山学院也有深刻的包豪斯烙印,格罗皮乌斯也曾在夏季班到此客串教学。

    二、神秘的黑山学院 黑山学院 1933 年在美国的北卡罗莱那州(North Carolina)一个小城艾什韦尔成立,位置偏远,规模很小,最多人的时候据闻只有 60 人。

    神秘的黑山学院

    这所学校跟我们传统理解的学校非常不一样,关于其资料非常少,学校没有明确的运作管理者,背后的资金支持者是谁也没有记录。

    而且好像也没有什么学生从这里毕业的说法,所以显得很神秘与独特。

    这所神秘学院却汇聚了美国 20 世纪上半叶差不多一半的先锋艺术家,有绘画、音乐、设计、雕塑、舞蹈、诗歌等,几乎涵盖每种艺术。

    黑山学院的学生

    来自包豪斯的艾尔伯斯正是设计门类的代表者,艾尔伯斯的色彩理论研究给大家带来一股新风,色彩玻璃的创作手法也启发了后来的“波普艺术”大师劳森伯格的拼贴艺术。

    在黑山学院上课的艾尔伯斯

    所以黑山学院更像一个艺术家自由聚合的场所,彼此相互交流学习与创作。

    黑山后来出现了很多艺术领域的大人物,比方先锋派古典音乐作曲家约翰·凯奇(John Milton Cage Jr)。

    他在黑山完成了第一次“偶发艺术”创作,这就是后来的行为艺术,其著名创作是《4 分 33 秒》,演奏过程全程静默,4 分 33 秒站起来跟大家鞠躬,说:“感谢大家,我刚才已经成功演奏完了 4 分 33 秒。“然后下台。

    约翰·凯奇

    黑山学院其实只保留了包豪斯一部分血脉,并不等于是包豪斯的分支,只能说包豪斯文化有非常强悍的植入能力。

    而格罗皮乌斯曾在学院夏季课程时候到此授课,让其与包豪斯的关联获得进一步加深。

    格罗皮乌斯在黑山学院-右 4

    1957 年时候黑山学院因为办学经费问题完全关闭,一共存在了 24 年,培养出一批充满奇思妙想并勇于践行的艺术家,对现代艺术世界产生了持久深刻的影响,关于他们与黑山学院的故事一直在流传。

    三、乌尔姆诞生 真正比较完整延续包豪斯精神与体系的学院是成立于 1955 年,位于西德的乌尔姆学院(Hochschule für Gestaltung,Ulm)。

    在西德建立的乌尔姆学院

    其第一任校长正是毕业自包豪斯德绍时期的学生马克斯·比尔(Max Bill)。

    比尔是瑞士人,1927 年到 1929 年期间在包豪斯学习建筑,毕业后成立过自己的建筑事务所。

    设计中的马克斯·比尔

    他的建筑作品分别在 1936 年及 1951 年的意大利米兰三年展中获奖,也曾自己多次策展。

    在包豪斯解散后的 10 多年里,比尔内心一直希望有机会建立一所全新的包豪斯形式学院。

    这个机会出现在 20 世纪 50 年代,当时因为包豪斯解散,现代主义在德国的发展戛然而止。

    而美国却因为包豪斯豪华阵容的移民而在工业、产品、建筑上有了非同凡响的发展,所以德国政府坐不住了,首先在 1951 年成立了“德国 设计师 协会”,希望发展出美国那种初具规模的“国际主义”。

    以密斯为首的美国国际主义风格

    这种希望终究还是要回到教育层面,二战后的德国本来就被美国钳制,美国希望西德可以在工业方面有长足进步,而这一切都离不开设计。

    所以 1955 年美国最高指挥部联合西德政府拨出相关资金,推行“乌尔姆计划”,正式成立“乌尔姆设计学院”(Hochschule für Gestaltung,Ulm),后面简称乌尔姆学院。

    乌尔姆学院的开学典礼可谓热闹非凡,包豪斯创始人格罗皮乌斯及包豪斯前身学院“魏玛工艺美术学院”的创始人亨利·凡·德·威尔德(Henry Van de Velde)都到了现场并发表讲话。

    格罗皮乌斯现身乌尔姆学院开学典礼

    威尔德甚至认为,这所学院对欧洲的重要性将超过前面两所曾经存在的学院,典礼上还汇聚了政界、商界、艺术界及科学界的名流,乌尔姆学院一下子就成为当时文化前沿的关注对象。

    四、乌尔姆学院的发展 乌尔姆学院跟包豪斯很像的一点就是同样只有三任校长,而且每一位校长都代表了一个时期,所以说组织领导者就代表了组织风格,如果老板作风代表了企业作风一般。

    马克斯·比尔在乌尔姆学院担任校长仅仅三年(1955-1957),这三年也是乌尔姆最包豪斯的三年。

    比尔为乌尔姆学院倾注了很多心力

    首先教员队伍中就有不少包豪斯元老,比方约翰·伊顿,艾尔伯斯(已经离开了黑山学院)等。

    所以这个时期的乌尔姆有包豪斯一样的“基础课”,目的是为了强化学员知觉能力及基本造型能力。

    可以理解为是对美的感受力与对美的表现力,最简单例子就是手绘能力,等同设计的语言能力。

    乌尔姆学院的教室

    比尔在设计上是典型的功能主义者,从他为乌尔姆设计的冷峻校舍就可以感受到。

    校舍完全摒除曲线,方形与直角是最基本的元素,没有任何情感与主观痕迹,内部亦是如此,连地毯与墙饰都没有,感受不到任何温馨与舒适。

    晚间的乌尔姆学院教学楼

    所以现代主义风格发展到极致也容易被人诟病,感觉缺乏人文关环。

    另外典型的作品还有“乌尔姆凳”,这个凳子结构简单,无任何装饰,具备有普通椅子、床头柜和工作椅多种功能,模糊了工作与休闲之间的界限,仍旧是熟悉的构成主义与风格派混合的包豪斯风格。

    乌尔姆凳

    但乌尔姆所在的时代毕竟情况不同了,工业与科技在高速发展,所以比尔沿袭包豪斯的这一套让其它年轻老师颇有微词。

    其他老师希望学院可以更多关注科技领域,多将理科思维融入设计,因为工业化生产成熟后,设计成为一种如何更好服务于生产的重要手段。

    而包豪斯的思维似乎首先从艺术出发, 然后得到一个应用形式,而那时候大家已经有了应该从任务设定出发,再结合当前制造技术进行设计这样的新思路。

    1954 年加入乌尔姆学院的阿根廷教员马尔多纳多(Tomas Maldonado)是反对者之首,他主张乌尔姆的教学思路要面向科学与现代量产技术。

    课堂上的马尔多纳多

    其实这类关于设计该侧重艺术还是应用的争论可以追溯到 1914 年时候制造同盟的威尔德与穆特修斯之争,最后一般都是倾向应用者获胜,而马尔多纳多确实占了上风。

    比尔在 1957 年辞去校长一职,马尔多纳多继任,比尔的离职标志着乌尔姆开始摆脱包豪斯影响,走出乌尔姆自己的模式。

    这种模式就是“科技融合设计”,马尔多纳多认为设计是刺激消费的重要手段,而且设计师应该跟市场没有距离,工业设计不再是艺术,而设计师也不再是艺术家,设计应该成为一种产品管理与系统分析的科学化运作,听上去感觉这有让设计走上另一种极端的可能。

    课堂上的马尔多纳多

    所以 1958 年的乌尔姆居然首先取消了色彩课程,引入了更多科学相关课程,比方数学、生理学、感知理论、人机工程学等,俨然变成一个理工学院的感觉。

    不过这个时期的乌尔姆确实也设计出不少能有效市场化的优秀产品,比方跟德国布劳恩公司的拉姆斯合作开发的“SK4”收音机,造型简洁时尚,用色平衡中性,材料新颖,打破了收音机笨重老成的印象,受到市场欢迎。

    “SK4”收音机

    到了 1961 年时候,连基础课也被取消,此时的乌尔姆学院已经基本没有过去包豪斯的任何影子,走出了自身一种现代主义设计教学路线。

    而到了 1962 年,德国著名的平面设计大师,同为乌尔姆创始人之一的奥托·艾舍(Otl Aicher)出任校长,他 10 年后设计了慕尼黑奥运会的整体视觉,被公认为至今最经典的奥运会视觉系统。

    奥托·艾舍及其设计的奥运视觉符号

    他继续带领乌尔姆走“科技融合设计”的路线,而且曾多次公开表达反对外界将乌尔姆视为包豪斯的延续,他认为包豪斯主要接受了过去的艺术思潮影响,并不符合如今的的市场。

    最后乌尔姆的极端科学路线也遭受外部舆论攻击,到了 1968 年 12 月因为没有经费支持且拒绝与邻近工程学院合并而最终解散。

    今天分享到此结束,感谢各位,下期再会!

    欢迎关注作者的微信公众号「 设计史 太浓」:

  • 通过微软Designer,总结出 AI 提示词的6个设计原则

    UI交互 2023-01-05
    编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个设计原则,下面是正文:Microsoft Paint 我一直在接触,当我听到 Microso...

    编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个 设计原则 ,下面是正文:

    Microsoft Paint 我一直在接触,当我听到 Microsoft Designer 发布的时候,我就开始为此感到兴奋了。微软这种体量的公司开始认真地使用 AI 技术的时候,它真的会让 AI 惠及用户。不仅仅是 Microsoft Designer,他们还将各种 AI 相关的技术应用到其他产品线当中。

    比如微软的 Bing 搜索引擎也加入了 Image Creator 的功能。微软正在通过引导用户编写文本提示信息,让用户借此获得视觉内容,开始适应新的计算机运作方式。

    「编写文本提示词是一门艺术,借此可以从 ChatGPT、Dall-E2 和 Midjourney 获得你想要的视觉内容。」

    如果你曾经尝试过这类文本转图片的 人工智能 服务,那么你应该知道这类服务的不可预测性。生成需要正确风格的图像,可能需要很长时间的尝试,而为了让 AI 按照需求运作所进行的反复试验则被称为「提示词设计」和「提示词工程」。

    手残党也能成为艺术家!4个热门AI绘画平台的创作经验总结 AI画画,无疑是当下最火热的话题之一。

    阅读文章 >

    AI 产品的提示词设计原则 AI 生成服务的不可预测性并非无法优化,有时候对提示词进行调整就能获得不一样的结果。我观察到 Microsoft Designer 会指引用户调整提示词,以获得更加可靠的内容输出,降低时间和算力上的浪费。

    微软、Dall-E2 和用户 首先,了解所涉及到的技术和受众很有必要。Microsoft Designer 在 AI 技术上并不是微软自身的新技术,而是基于 OpenAI 出品的 Dall-E2 的产品:

    关于Dall-E2的介绍:

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

    阅读文章 >

    Microsoft Designer 本身是一种面向营销和运营人员用来创建社交媒体内容的工具,它更像是拥有人工智能加持的 Canva,和 Figma 或者其他的 UI 设计类工具有着巨大的差别。

    除了 Microsoft Designer 之外,微软顺道推出的 Bing Image Creator 也采用了类似的技术,它类似 Bing 的图像搜索,但是实际上获得的图片是基于描述使用 AI 生成的。

    以下是微软引导新用户使用提示词生成 AI 图像的一些设计原则。

    1、熟悉原则:提供熟悉的上下文环境 人们经常将新事物存在的风险和不确定性联系起来,而人工智能图片生成服务就很符合这种特征。

    「人类天生就喜欢熟悉的事物,无论是文字、产品还是体验。」

    为了让大家更加熟悉,Microsoft Designer 将 AI 图片生成器生成图片作为一个选项提供出来,和其他的图片上传选项摆放在一起:

    用户可以选择:

    从设备直接上传 从手机上传 打开媒体库 用 AI 生成图片 AI 和熟悉的上传内容摆放在一起,自然融入到大家熟悉的流程当中,让人感觉 AI 和我们日常操作没有太多区别。

    「与其一头扎入算法当中,不如想象如今的用户是如何完成日常的操作的。」

    而在 Bing Image Creator 当中,AI 的运用方式则有所不同,它更接近用户日常使用 Bing 搜索引擎一样,唯一的区别在于,原本搜索栏所需要的填写的是AI 提示词,而 AI 生成图片的呈现方式则类似于 Bing 搜索图片的界面,整个体验无缝地和 Bing 搜索引擎的内容呈现保持一致。

    2、透明原则:AI 并非魔法 有许多工具在用户实际使用过程中,压根没有提到他们生成内容的时候用到了 AI 技术,有时候用户需要通过其他的渠道或者深入挖掘调研才能知道相关的信息。

    Microsoft Designer 在你创建内容的醒目位置,运用工具提示的方式来告知用户他们所使用的技术细节:

    尽管对于用户而言,DALL-E2 是一个陌生的专业术语,但是后面紧跟着详细的解释,而不是将 AI 本身模糊化让它听起来像「魔法」一样。这段描述还可以传达出微软对于 AI 技术在道德层面上的理解和关注,并且会尽量清晰地展示背后的内容。

    「如今,太多人将人工智能(AI)视作为另外一种神奇的技术,对于它的工作原理知之甚少。」

    最后,将这些信息置于工具提示控件当中,也是尽量让技术术语不妨碍用户的正常使用,但是由于呈现样式会很清晰地同普通控件以及界面其他内容区分开,因此不会对用户造成可访问性上的障碍。

    3、道德原则:强调 AI 的道德性 作为新生事物,AI 的不确定性让它很容易被不道德地使用。怎么使用才是道德的,这当中有很多模糊的地方,因为当下每天都会有新的用例出现,很多艺术创作者仍然会因为风格被盗用而感到愤怒,但是 AI 的艺术图片生成的速度从未放缓。

    「为了防止 DALL-E2 在 Designer 和 Image Creator 中生成的结果不合理,我们正在和开发 DALL-E2 的 OpenAI 一起采取措施优化,并根据需求改进我们生成图片的方法。」

    而在用户这一端,Microsoft Designer 的程序会在工具提示当中多次提示用户,如果生成的结果不合理、不符合预期的时候,让用户尽量提供反馈来帮助系统优化结果,以期后续给用户更好的结果:

    Bing Image Creator 当中,也采用了类似的策略,每个 AI 生成的图片附近都会有说明性的工具提示,其中会包含相关的道德规范,以及常见问题的相关回答:

    4、解释原则:告知用户结果的来源 解决了道德问题之后,根据 AI 用户体验设计原则,AI 程序应该能够让用户追溯到它原始的数据点,或者让用户以某种方式了解图片内容生成的方法,以提高内容的可信度。

    「如果你是从多个来源聚合数据,那么请将它们分解开来让用户可以重现这个结果。这些信息应该作为用户流程中的一部分,并且通过一致的 UI 界面呈现出来。——《UX of AI》」

    绝大多数的 AI 汪中,从 OpenAI 的 DALL-E2 到 Prompt Hero 这样的 AI 灵感素材网站,都会在图片内容上公开展示每个图片的原始来源。Microsoft Designer 以相同的方式来解释来源,当你悬停在任何一个 AI 生成的图片上的时候,它会以工具提示的方式展示来源:

    这些 AI 生成图的原始来源,会呈现在界面的右侧,同时会使用文本「我们使用您的描述内容和 AI 为您设计出这些图片」,借此来陈述设计的来源。

    不过,Microsoft Designer 并没有展示具体的创建图片的数据点,也没有详细解释 AI 的工作方式,这可能和 DALL-E2 的工作方式有关系,它无法实现。另外,作为一个商业产品,太过细致的内容可能超出了范畴。

    5、引导原则:为用户提供建议 AI 提示词对于很多用户而言可能会比较陌生,因为提示词文本需要符合 AI 处理信息的逻辑。OpenAI 甚至提供了「最佳实践快速指南」,而GPT-3 的经验则是:

    对所需要的背景、结果、长度、格式、风格尽可能进行具体详细的描述 详细阐明所需要输出的格式 从 zero-shot 开始,然后尝试 few-shot,如果两者都无效,再进行微调 用户第一次撰写 AI 提示词文本的时候,可能会感觉非常陌生,而 Microsoft Designer 选择了最直接的策略,就是使用自动建议来辅助用户:

    和前面提到的熟悉原则类似,结合我们的搜索习惯,搜索建议文本也是我们所熟悉的东西。

    另外,这也意味着,后台必然是有着大量的用例来支撑这些自动建议文本。

    6、掌控原则:让用户掌握主动权 尽管引导用户有帮助,但是依然要让用户拥有掌控权,按照他们的方式来进行创建。所以,产品本身不要完全依靠人工智能,允许用户选择跳过一些步骤,让用户选择符合他们需求的流程,让 AI 和用户协作,而不是让 AI 来接管一切。

    比如,当 AI 不符合用户需求的时候,用户依然可以选择自己事先准备的图像来继续设计。在 Microsoft Designer 当中,AI 生成的图片组当中始终有取消的选项,同时「从空白画布开始创建」的选项始终存在:

    这意味着用户即使完全不使用 AI 功能,依然可以借助自己准备的素材完整地创建出整套的营销内容和图片。

    结语 尽管我确实想将上述的设计策略视作为一组设计法则,但是实际上它们更像是一套可供遵循的概念和范例,但是它们确实可以帮助你设计 AI 产品,这些案例和方法让你可以无需重新造轮子。

    人工智能技术确实在快速发展,但是此时的应用类型和场合依然有限,随着各种工具逐步发展,这些设计方法和用例会进一步完善。 关于 AI 的 UX 设计,Lennart Ziburski 撰写了精彩的入门技巧 ,而本文也从中汲取了不少营养。

  • 通过微软Designer,总结出 AI 提示词的6个设计原则

    UI交互 2023-01-05
    编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个设计原则,下面是正文:Microsoft Paint 我一直在接触,当我听到 Microso...

    编者按:基于 AI 的各种产品越来越多,这些 AI 大都依托提示词来生成内容,那么这些产品和服务当中的提示词要如何安置,如何设计?资深设计师基于微软出品的 Microsoft Designer 产品的设计,梳理出了 6 个 设计原则 ,下面是正文:

    Microsoft Paint 我一直在接触,当我听到 Microsoft Designer 发布的时候,我就开始为此感到兴奋了。微软这种体量的公司开始认真地使用 AI 技术的时候,它真的会让 AI 惠及用户。不仅仅是 Microsoft Designer,他们还将各种 AI 相关的技术应用到其他产品线当中。

    比如微软的 Bing 搜索引擎也加入了 Image Creator 的功能。微软正在通过引导用户编写文本提示信息,让用户借此获得视觉内容,开始适应新的计算机运作方式。

    「编写文本提示词是一门艺术,借此可以从 ChatGPT、Dall-E2 和 Midjourney 获得你想要的视觉内容。」

    如果你曾经尝试过这类文本转图片的 人工智能 服务,那么你应该知道这类服务的不可预测性。生成需要正确风格的图像,可能需要很长时间的尝试,而为了让 AI 按照需求运作所进行的反复试验则被称为「提示词设计」和「提示词工程」。

    手残党也能成为艺术家!4个热门AI绘画平台的创作经验总结 AI画画,无疑是当下最火热的话题之一。

    阅读文章 >

    AI 产品的提示词设计原则 AI 生成服务的不可预测性并非无法优化,有时候对提示词进行调整就能获得不一样的结果。我观察到 Microsoft Designer 会指引用户调整提示词,以获得更加可靠的内容输出,降低时间和算力上的浪费。

    微软、Dall-E2 和用户 首先,了解所涉及到的技术和受众很有必要。Microsoft Designer 在 AI 技术上并不是微软自身的新技术,而是基于 OpenAI 出品的 Dall-E2 的产品:

    关于Dall-E2的介绍:

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

    阅读文章 >

    Microsoft Designer 本身是一种面向营销和运营人员用来创建社交媒体内容的工具,它更像是拥有人工智能加持的 Canva,和 Figma 或者其他的 UI 设计类工具有着巨大的差别。

    除了 Microsoft Designer 之外,微软顺道推出的 Bing Image Creator 也采用了类似的技术,它类似 Bing 的图像搜索,但是实际上获得的图片是基于描述使用 AI 生成的。

    以下是微软引导新用户使用提示词生成 AI 图像的一些设计原则。

    1、熟悉原则:提供熟悉的上下文环境 人们经常将新事物存在的风险和不确定性联系起来,而人工智能图片生成服务就很符合这种特征。

    「人类天生就喜欢熟悉的事物,无论是文字、产品还是体验。」

    为了让大家更加熟悉,Microsoft Designer 将 AI 图片生成器生成图片作为一个选项提供出来,和其他的图片上传选项摆放在一起:

    用户可以选择:

    从设备直接上传 从手机上传 打开媒体库 用 AI 生成图片 AI 和熟悉的上传内容摆放在一起,自然融入到大家熟悉的流程当中,让人感觉 AI 和我们日常操作没有太多区别。

    「与其一头扎入算法当中,不如想象如今的用户是如何完成日常的操作的。」

    而在 Bing Image Creator 当中,AI 的运用方式则有所不同,它更接近用户日常使用 Bing 搜索引擎一样,唯一的区别在于,原本搜索栏所需要的填写的是AI 提示词,而 AI 生成图片的呈现方式则类似于 Bing 搜索图片的界面,整个体验无缝地和 Bing 搜索引擎的内容呈现保持一致。

    2、透明原则:AI 并非魔法 有许多工具在用户实际使用过程中,压根没有提到他们生成内容的时候用到了 AI 技术,有时候用户需要通过其他的渠道或者深入挖掘调研才能知道相关的信息。

    Microsoft Designer 在你创建内容的醒目位置,运用工具提示的方式来告知用户他们所使用的技术细节:

    尽管对于用户而言,DALL-E2 是一个陌生的专业术语,但是后面紧跟着详细的解释,而不是将 AI 本身模糊化让它听起来像「魔法」一样。这段描述还可以传达出微软对于 AI 技术在道德层面上的理解和关注,并且会尽量清晰地展示背后的内容。

    「如今,太多人将人工智能(AI)视作为另外一种神奇的技术,对于它的工作原理知之甚少。」

    最后,将这些信息置于工具提示控件当中,也是尽量让技术术语不妨碍用户的正常使用,但是由于呈现样式会很清晰地同普通控件以及界面其他内容区分开,因此不会对用户造成可访问性上的障碍。

    3、道德原则:强调 AI 的道德性 作为新生事物,AI 的不确定性让它很容易被不道德地使用。怎么使用才是道德的,这当中有很多模糊的地方,因为当下每天都会有新的用例出现,很多艺术创作者仍然会因为风格被盗用而感到愤怒,但是 AI 的艺术图片生成的速度从未放缓。

    「为了防止 DALL-E2 在 Designer 和 Image Creator 中生成的结果不合理,我们正在和开发 DALL-E2 的 OpenAI 一起采取措施优化,并根据需求改进我们生成图片的方法。」

    而在用户这一端,Microsoft Designer 的程序会在工具提示当中多次提示用户,如果生成的结果不合理、不符合预期的时候,让用户尽量提供反馈来帮助系统优化结果,以期后续给用户更好的结果:

    Bing Image Creator 当中,也采用了类似的策略,每个 AI 生成的图片附近都会有说明性的工具提示,其中会包含相关的道德规范,以及常见问题的相关回答:

    4、解释原则:告知用户结果的来源 解决了道德问题之后,根据 AI 用户体验设计原则,AI 程序应该能够让用户追溯到它原始的数据点,或者让用户以某种方式了解图片内容生成的方法,以提高内容的可信度。

    「如果你是从多个来源聚合数据,那么请将它们分解开来让用户可以重现这个结果。这些信息应该作为用户流程中的一部分,并且通过一致的 UI 界面呈现出来。——《UX of AI》」

    绝大多数的 AI 汪中,从 OpenAI 的 DALL-E2 到 Prompt Hero 这样的 AI 灵感素材网站,都会在图片内容上公开展示每个图片的原始来源。Microsoft Designer 以相同的方式来解释来源,当你悬停在任何一个 AI 生成的图片上的时候,它会以工具提示的方式展示来源:

    这些 AI 生成图的原始来源,会呈现在界面的右侧,同时会使用文本「我们使用您的描述内容和 AI 为您设计出这些图片」,借此来陈述设计的来源。

    不过,Microsoft Designer 并没有展示具体的创建图片的数据点,也没有详细解释 AI 的工作方式,这可能和 DALL-E2 的工作方式有关系,它无法实现。另外,作为一个商业产品,太过细致的内容可能超出了范畴。

    5、引导原则:为用户提供建议 AI 提示词对于很多用户而言可能会比较陌生,因为提示词文本需要符合 AI 处理信息的逻辑。OpenAI 甚至提供了「最佳实践快速指南」,而GPT-3 的经验则是:

    对所需要的背景、结果、长度、格式、风格尽可能进行具体详细的描述 详细阐明所需要输出的格式 从 zero-shot 开始,然后尝试 few-shot,如果两者都无效,再进行微调 用户第一次撰写 AI 提示词文本的时候,可能会感觉非常陌生,而 Microsoft Designer 选择了最直接的策略,就是使用自动建议来辅助用户:

    和前面提到的熟悉原则类似,结合我们的搜索习惯,搜索建议文本也是我们所熟悉的东西。

    另外,这也意味着,后台必然是有着大量的用例来支撑这些自动建议文本。

    6、掌控原则:让用户掌握主动权 尽管引导用户有帮助,但是依然要让用户拥有掌控权,按照他们的方式来进行创建。所以,产品本身不要完全依靠人工智能,允许用户选择跳过一些步骤,让用户选择符合他们需求的流程,让 AI 和用户协作,而不是让 AI 来接管一切。

    比如,当 AI 不符合用户需求的时候,用户依然可以选择自己事先准备的图像来继续设计。在 Microsoft Designer 当中,AI 生成的图片组当中始终有取消的选项,同时「从空白画布开始创建」的选项始终存在:

    这意味着用户即使完全不使用 AI 功能,依然可以借助自己准备的素材完整地创建出整套的营销内容和图片。

    结语 尽管我确实想将上述的设计策略视作为一组设计法则,但是实际上它们更像是一套可供遵循的概念和范例,但是它们确实可以帮助你设计 AI 产品,这些案例和方法让你可以无需重新造轮子。

    人工智能技术确实在快速发展,但是此时的应用类型和场合依然有限,随着各种工具逐步发展,这些设计方法和用例会进一步完善。 关于 AI 的 UX 设计,Lennart Ziburski 撰写了精彩的入门技巧 ,而本文也从中汲取了不少营养。

  • 大厂出品!运营视觉设计师入门指南

    UI交互 2023-01-04
    如今的互联网岗位不断精细化,设计岗位也是如此,设计团队内的视觉设计师通常分为产品体验设计师和运营视觉设计师。产品体验设计师主要负责产品功能及体验设计,并为用户提供良好的使用体验。运营视觉设计师主要负责运营活动设计,通过设计引导用户关注参与活动,达成拉新、促活、成交等运营目标,有时兼顾产品功能和品牌推广的作用。

    如今的互联网岗位不断精细化,设计岗位也是如此,设计团队内的视觉设计师通常分为产品体验设计师和运营视觉设计师。产品体验设计师主要负责产品功能及体验设计,并为用户提供良好的使用体验。运营 视觉设计 师主要负责运营活动设计,通过设计引导用户关注参与活动,达成拉新、促活、成交等运营目标,有时兼顾产品功能和品牌推广的作用。

    更多 运营设计 干货:

    运营设计师如何快速上手主会场设计?来看京东的规范流程总结! 文章主要讲述的是新手运营设计师在经验不足的情况下,如何快速上手主会场设计,以及通过流程的详细理解与归纳,巧妙避免由于不熟练而导致工作效率低下的问题。

    阅读文章 >

    一、运营设计都干啥 运营设计的工作范畴相对繁杂,不仅更换频率高,种类也比较多。从工作内容上可以细分为产品线上、新媒体平台、线下和其他辅助内容 4 大块。

    1. 产品线上

    包括专题、活动页面和入口设计;

    专题页:是指有主题的活动页面,我这里列举的是非营销主题的落地页,一般用来展示主题信息,以信息呈现为主要目的。

    运营活动:是以营销(拉新、促活等)为目的的落地页或系列页面。按照项目重要性,可分成 S 级、A 级和 B 级不同等级。AB 级一般指热点或日常运营活动,S 级指业务年度大促活动,往往兼顾多种目的并增加游戏玩法,设计时要通过合适的视觉效果来引起用户的兴趣并引导转化。

    这里需要提一下运营玩法,根据业务的目标策略常见的有增长类活动,比如助力领红包,砍价,团购等形式,以分裂拉新为主要目的。还有一类独立完成的小游戏,红包雨、抽奖等,以增加日活为目的或搭配综合活动。

    入口设计:包括各类 Banner、弹窗、浮窗和开屏页等广告位,是设计师日常接触最多的内容。虽然体量较小,但是运营活动转化重要的一环,直接影响活动效果。

    以 2021 房产春运为例,活动兼顾拉新、促活和品牌功能推广目的,主会场展示各类产品功能,并设有游戏专题页用来展示活动任务和奖品,小游戏简单好上手可以增加用户粘性,游戏任务深入到直播看房和在线付定金功能中,为业务倒流,形成了良性循环。

    2. 新媒体平台

    各大社交和短视频平台是当前产品运营的重要途径,包括微信生态中的小程序、公众号、视频号和社群,抖音和小红书等短视频及内容平台。

    而为电商店铺服务的运营设计师是更加专职的运营设计师,负责设计产品店铺日常及促销活动时的首页,详情页等。

    3. 线下设计

    线下设计接近传统平面设计,需要设计线下宣传制品,包括手册折页、易拉宝展板、海报等其他印刷制品,根据业务属性可能还有店面装饰以及装备设计等。

    4. 辅助设计

    这里把其他会涉及到的设计内容统称辅助设计,其实并不严谨,因为单独拿出任何一项都是可以细说的专业领域,比如字体设计,品牌策划、IP 设计,VI 手册,规范设计等。这里就不展开细致阐述了。

    二、干就完了,还要分阶段? 按照工作流程顺序,我们可以把运营设计分成三个阶段——设计前、设计中及设计后。每个阶段根据合作对象和目的的不同,工作方法也有区别。

    1. 设计前——沟通 ① 理解项目

    和体验设计师一样,在开始设计工作之前,我们要先充分理解需求的目标、背景和用户。

    项目目标

    常见的运营项目目标有拉新、促活、回流和转化,即获取新的用户、活跃老用户、让流失的用户重新回流,以及实现商业转化创造价值。其次是产品目标,即巩固产品策略、建立品牌形象、提高品牌美誉度、实现品牌价值。最后还有行业目标,即提高设计影响力与行业影响力,这个目标相对是比较长期持续的。

    项目背景

    项目背景是目标的动机,此项目是基于哪个产品功能设计的,有没有之前的项目需要延续或比较,是否基于节日或其他热点展开等,总之要充分理解立项的动机。

    目标用户

    依照活动上线的不同平台,可以把用户分为共域和私域用户,私域用户更加精准,可以通过专业的用户分析得到他们的普世特征,思想和情感需求等,洞悉目标人群的特征才能实现精准的设计触达。

    ② 沟通技巧

    既然是和需求方沟通,那沟通方法和技巧是设计前的工作核心,如何有效沟通是很多年轻设计师需要学习和掌握的。

    以设计师的角度主动参与。需求方的设计能力参差不同,有可能就是设计小白,不能明确表达期望的效果和风格,作为设计师尽量主动提供参考,以达到可视化的沟通和讨论,并在沟通过程中确定方向,作为开展设计工作的依据。 预判风险。首先要和需求方沟通排期,给自己留出充足的创作时间;还要和技术团队沟通实现性,规避不能完成的效果,保证项目的顺利进行。 此外还要保持专业度,也就是保持理性,沟通时从项目本身出发,不带有情绪和偏见。

    2. 设计中——合理 在设计过程中设计师会通过一些创意方法,运用一些表现手法,最终落地设计输出,呈现完整的作品。创意方法比如联想,夸张、幽默等;表现手法包括插画,合成,三维,动态等,这里也不做具体讲解了。我们来聊聊设计工作中的合理性,合理性包括设计呈现的合理性和工作流程的合理性。

    ① 设计合理

    传统的平面设计又称视觉传达,其概念是以视觉媒介为载体,利用视觉符号表现并传达信息,所构成的主要要素是文字,插图和标志。

    运营设计的基础即为视觉传达的,要向用户快速有效的传达信息,所以信息展示的合理性至关重要。怎样才叫合理呢?要看设计的目的是什么?结果导向反推设计的合理性。视觉内容越直观越好,现在是碎片化信息时代,用户大多是没有耐心和时间的,所以我们要通过设计把要传递的信息进行整合排序,提炼信息的主次关系,可以把利益点和有效信息重点突出,快速抓住用户眼球。之后再用设计将产品与用户建立起良好的关系,渗透产品功能甚至品牌价值。

    举个小例子:人眼习惯最先阅读文字,其次是颜色,插画等,所以文字需要清晰明了,阅读感需要流畅。调整后的弹窗阅读感流畅了,信息的主次关系也更明显。

    ② 流程合理

    细化流程可以让工作流程更加合理,可以最大限度的规避返工风险。

    确定视觉风格和初稿阶段,根据需求目标和主题选择适合的设计风格,并和需求方确定后再开始初稿的搭建,草图可以在设计小组内部审核后再深入设计,避免过早陷入细节,造成返工。 二稿阶段,围绕关键词进行视觉创意,表达创意内容,展示设计手法,并完整的展示需求方所要体现的所有信息,让对方能够理解创意和信息布局的合理性。 运用专业能力完成设计图,在调性,氛围和细节把控上做到高级感。

    3. 设计后——体/验 设计图完成后并不意味着工作的结束,需要在设计还原上跟进。

    “体”意为体现,跟进技术实现的效果,通过走查保证和设计图的同步;线下制作需要通过打烊保证成品的效果和质量。

    “验”意味验证,需要和需求方一起关注数据,线上项目可以通过后台数据反馈活动效果,还可通过问卷、访谈等方式得到用户真实的反馈,从而优化设计策略和方向。

    一个验证的例子,下图是 58 到家 APP 首页的一个弹窗,目的是为微信社群倒流。由左侧的样式更换成右侧更为简洁的红包样式后,点击率有了明显的提升,设计样式的变化直接影响了数据的变化。通过这样的数据验证,设计师可以和需求方一起探索更优的视觉呈现,为业务赋能。

    此外,项目结束后的总结和复盘,可以把项目过程中遇到的问题及时列出,通过数据整理分析,沉淀方法和经验。

    三、最后唠叨几句 设计是服务于产品和用户之间的工具,作为设计师具备专业的思维能力是有必要的,如商业思维 (从宏观到微观考虑问题),产品思维 (以用户为中心,思考产品的价值),营销思维 (让别人认识你)等,作为运营设计师可以加强营销思维的建立为业务服务。

    此外,文案能力和交互能力在工作中也应用甚广,有时一些文案和交互问题在具体设计中才会暴露,需要和需求方和交互设计师一起共创。

    最后的最后,要与时俱进,不光是审美和表现技法上要与时俱进,运营设计师往往要做些内容相关的需求,对时事热点和话题也需要具有一定的敏感度,眼界上也要与时俱进,才能迸发出更多的创意和灵感。

    字体设计保姆级全方位教学!万字干货 前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?

    阅读文章 >

    互联网下半场,运营设计师的生存之道 宜信BXD 运营设计组 - 梅晓晓:2018年是人工智能重点发力的一年,关于「人工智能会完全取代设计师」的话语层出不穷,很多从业者倍感危机。

    阅读文章 >

    欢迎关注「58UXD」的微信公众号:

  • 4000字干货!9个方法帮你掌握UX文案写作

    UI交互 2023-01-04
    相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。如果说信息架构、逻辑流程是产品交互的筋骨,那文案无疑就是血肉。有时产品经理给设计的需求和客户提供内容会有错字,语句不通顺,若设计师能够快速发现就可以...

    相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。如果说信息架构、逻辑流程是产品交互的筋骨,那文案无疑就是血肉。

    有时产品经理给设计的需求和客户提供内容会有错字,语句不通顺,若设计师能够快速发现就可以体现出自己的专业,一般懂文案的设计师沟通和表达能力都不会太差,写好文案对于设计师来讲无疑是一件锦上添花的事情。设计是文案的视觉化呈现,文案是设计的思维表达,两者相辅相成,好的设计一定是懂文案的。

    「文案」这个词看起来好像很简单,且主观感觉优先级略低,但并不意味着它容易表述。一个好的文案说明是需要从多个角度出发考虑的,表述不清晰就会对用户造成误导。那么设计师如何写出好的文案呢?

    掌握这些小技巧,可以输出更容易让用户理解的文案。

    更多UX文案教程:

    如何写出优秀的UX文案?来看高手的总结! 如何写出优秀的 UX 文案?

    阅读文章 >

    一、清晰(突出重点 弱化次要) 通过可用性测试可以了解文案的哪些部分是清晰的,哪些是迷惑用户的。对不清晰部分的文案进行细微的调整,能够产生巨大的改变。

    文案超过两行就需要用户更集中精力阅读,用户从而难免产生排斥心理,如果文字信息真的很多,可以把一段话整理分类依次竖向排列,同样可以给用户清晰及高效的阅读感受。

    例如平安云的隐私政策更新提示弹窗界面,设计师通过行间距将文本内容进行了分组,并且对标题文字进行了加粗和加大字号的处理,用户读起来会比较轻松。

    要对文案做好内容的平衡,若一次性显示太多不必要的信息,会扰乱界面给用户带来不必要的阅读与操作压力,需要谨记只有在用户有需要的前提下才展示这样的文案说明。对于辅助的说明文字可以稍做隐藏,用户需要的时候支持查看;提示文字不是只能设计成平铺直叙的只读文字,花了心思便可做得恰到好处。

    如下图,平安云账号中心的实名认证界面,关于对单位证件号的提示说明文字内容被隐藏,需要 hover 在问号 icon 上才会弹出提示,提示的内容以表格的形式呈现,并对各账号进行了举例说明,更便于用户理解,从而无障碍地进行表格的填写。

    尽量使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。间接、暧昧模糊的说法,生僻和过于“文雅”的用词,会增加用户的认知成本,所以应当尽量避免使用这类无法识别的词汇。

    二、一致(规范字数 结构一致 全局一致) 一致性的文案设计可以帮助用户建立产品工作方式的心理模型,从而获得更好的用户体验。如果在产品中对同一事物使用不同的术语,比如用户点击页面 A 去到的是页面 B,用户就会感到困惑,在编写文案时保持一致性很重要。一些具体准则可以帮助我们达到这一目的。

    1. 规范字数:不同组件平均应该有多少个词?每个按钮一个、两个或多个词。

    尽量控制描述文字的字数,保持一致,使页面整齐美观。按钮的文字也尽量保持字数一致,可保证页面的稳定性。我们有时候看到很多文字有长有短,排除一些异常情况,确实是有很多情况我们可以对文案进行优化的,不是吗?

    2. 结构一致:确定文案的结构,是否仅包括一个动词或是动词与名词的组合(例如“动词”+“名词” 或 “动词” +a+ “名词” )

    卷又卷不动,躺又躺不平,摆又摆不烂,死又死不了…哦吼,这是很多人的现状。瞧瞧这吐槽的段子都对称着,有些还压上韵了,我们写产品文案的时候就照着这个标准卷吧!

    3. 全局一致,同一个名词在产品中要保持一致,行动点名称尽量与跳转页面标题一致。

    如果你的新增按钮文案为新增 XXXX,那尽量所有的新增按钮文案都这样描述,不要有的是新增 xxx,有的是添加 XXX。

    例如:对内容的增删改查,在很多 B 端产品的页面表格操作下,通常会见到查看按钮,点击可看详情,这边建议尽量把查看改成详情呢,点详情不管接下来看到的是弹窗还是进入下一级页面,其标题叫详情或者 xxxx 详情,就做到了行动点名称与跳转页面标题一致有没有,这只是一个例子,我知道你可以做到举一反三。

    三、简洁(言简意赅 通俗易通) 1. 使用熟悉的单词和短语也有助于减轻用户的认知负担。

    编写对话内容时应尽量避免使用“行业术语”“科技术语”、“专业词汇”、“方言用语”等(如 404、505、错误码 XXX 之类的描述),避免写出不具普遍性的对话内容,避免表述一件事情时绕来绕去,如使用双重否定表示肯定等让用户不易懂的文案,减少用户在操作前总是要去思考和陷入不知所措的情况。让用户明确的知道当前发生了什么,进而正确决定其接下来的行为。

    一个事情说了半天人家没明白你说的啥,那就说人话吧……特殊情况除外,例如你在疯狂星期四转发给朋友让他给你买KFC铺垫了很多很多巴拉巴拉的段子,朋友觉得你好有趣,一感动就跟你买了。当然这种情况你也可以直接说“我想吃KFC,给我买”,可能你朋友也会说“好的,买买买……”谁会拒绝一个打直球的吃货小可爱呐。

    建议对你的朋友足够了解后。再选择合适的措辞。正如我们在设计的时候是需要对用户足够了解才能写出更合适的文案。

    2、如果必须使用生僻的词汇,需要增加注释说明。

    发票金额是明白的,可开发票金额,哪些可以开,哪些不可以开,不表述清楚用户就不确定,需要通过注释去表述,腾讯云的设计还运用了公式去说明,相比文字描述“可开发票金额等于腾讯云可开票金额加云市场可开票金额”这样去进行文字说明要直观的多呐。

    3. 有效的文案应该是对话式的。

    告诉用户接下来的操作会导致的下一步的结果,就像与人在对话一样,这其实是一件比较难实现的事情,因为我们对所设计的产品以及每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试,看 他们是否懂我们使用的语言。

    四、尊重(尊重用户 提示友好) 1. 永远站在用户的角度考虑,当出错的时候不要责怪用户或使用命令或强迫的语气,多给予用户理解包容与支持鼓励,专注于解决问题,让其感受到产品足够多友好,感受到被尊重。

    2. 即使是需要用户承担相应的责任,文案也要克制,使用相对的语气将问题出现的原因或可能出现的结果反馈给用户。

    腾讯云的账号中心-安全设置界面:安全设置肯定是用户非常关心的,对于每种操作的解释说明,都平铺展示,用户可以一眼就 get 到自己需要的设置在哪操作,怎么操作。心里有数,不慌不忙。

    在新的设备上去登录微信,之前的设备会退出登录,微信使用的文案描述规则是:先摆出事实告诉用户现状,再说如果进行接下来的操作会导致的后果。这段文字在这里被标红,着重强调的样式更容易让用户知晓。

    当微信在其他设备登录时,需要常用设备进去确认。使用“平淡的语气”提到了如果设备不在身边或不是本人登录可以会导致的严重后果,让用户谨慎操作。

    3. 尽可能提供补救措施,降低用户的损失,利用文案对用户情绪进行安抚。

    辛辛苦苦 P 的“照骗”忘记保存了,好心碎,下次打开的时候,美图秀秀提醒“你之前有尚未保存的图片,是否继续编辑?”惊不惊喜?好开心,赶紧保存下来,发个朋友圈。

    五、严谨(无错别字 专业科学 形成闭环) 充分了解用户背景才能用词专业、精准,采用专业适当、精炼准确的词语高效的传达信息,帮助用户理解。

    基本用语要规范,避免使用错别字,词句需要表达完整;专业用语需要精准,并且是所属行业认可的通用语言,不使用对目标用户来说难以理解的词语;时间的表述也必须要明确。

    六、利他(用户为主 提示友好) 文案的表述应该让用户感受到我们是为了他在思考,功能的描述也可以以对用户有益处的方式去表达。

    腾讯云-费用中心-用量明细下载页面:对于页面数据的展示说明清晰描述了只展示付费后的产品,关于时间线也只支持近 6 个月的下载,但如果用户想要更多就可以去哪里下载。这些友好清晰的提示都是设计师花了心思设计呀!

    页面内容如果加载时间长,提前告诉用户,数据加载可能耗时较长,如果用户有其他的事情先去忙,稍后再返回页面查看数据结果。这么清楚的描述,简直爱了。

    七、语气(语调统一 凸显品牌) 语言风格,要基于自身的业务,符合产品的调性。作为以技术为支撑的产品,在表达过程中要体现严谨、专业的风格,避免使用太口语化的语言,尤其是俗语和网络用语。

    在合适的场景下,用更富有人情味的语气与用户沟通,反馈信息,会提升使用感受,现在的产品设计不仅仅是人机交互,更是人与人之间的交互,要给用户更人性化的反馈。

    如下苹果官网的一些文字提示写的有非常通俗易懂。

    八、标点符号正确使用 标点符号以及字母的大小写这些都属于交互设计的细节范畴,使用它们时也需要做到切合时宜,它代表着产品的规范与科学性,连符号都用错了,你的 交互设计 怎么可能让用户信任?另外符号在语言规范中也有增强语气,加深语言力度的作用,所以说符号的使用在交互文案设计中也是非常重要的。

    1. 中英文大小写

    产品名称缩写需要全部大写,如:ESC、SLB;但是特殊的产品品牌,例如:XFlush,需特殊处理。

    全英文的标题、标签、菜单项等等都要遵循英文句式中首字母大写的规范,正确使用专有名词的大小写规范。

    遵从行业规范,符合用户的认知,不会逼死强迫症,也凸显了产品专业。

    2. 阿拉伯数字

    统计数据使用阿拉伯数字,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效;

    3. 标点符号

    可以省略不必要的断句点,帮助用户更加高效的扫视文本内容。

    元素单独出现时可以省略标点(例:标题、标签、输入框下的提示、悬停文本中的提示、表格中的句子)

    元素单独出现时也有需要加上标点(例:多句或多段的文案和列表内容、任何文字链前的句子)

    谨慎使用感叹号,感叹号用于表达强烈的情感,让文案显得过于感情化,容易让气氛变得过于激动和紧张,故尽量避免使用。

    九、文案不是万能的 文案说明不可能解决所有的可用性问题,它并不能引导用户去操作一个拙劣的产品,若是产品设计有问题,应该优化的是产品本身,而不是完全通过文案来告诉用户如何去操作。如果不能简单的去解释行为, 就不能设计出好的产品。

    十、小结 本文列举了一些简单的案例,这些案例可能只是一句话或者几个字的差异,就能带给产品不一样的感受;对业务逻辑和用户场景理解得足够深刻,我们方能用准确简洁的文案去解释。

    产品文案的优化需要产品设计流程中各个环节各个角色的共同努力,多思考批判,多梳理检查。学习是一个持之以恒的过程,需要有耐心,在深刻理解这些文案技巧的基础上再灵活运用,那么相信你的设计一定会更上一层楼。希望本文有帮助到各位,大家一起加油吧!

    写文案没灵感?这8款文案网站免费用! 编者按:本文为大家收集了 8 款好用的文案网站神器,包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网,让你写文案手到擒来。

    阅读文章 >

    欢迎关注团队微信公众号:兆日 UCD

  • 文档类产品解题宝典!24个细节全面拆解Notion

    UI交互 2023-01-04
    一、前言Notion 是一款融合笔记(Notes)、任务(Tasks)、知识库(Wiki )以及数据库(Database)的 all-in-one 生产力工具,产品主要服务于互联网群体。2022 年,Notion 的用户规模目前已经达到 3000 万,付费用户达到 400 万。国外用户常用一个公式形容 Notio...

    一、前言 Notion 是一款融合笔记(Notes)、任务(Tasks)、知识库(Wiki )以及数据库(Database)的 all-in-one 生产力工具,产品主要服务于互联网群体。2022 年,Notion 的用户规模目前已经达到 3000 万,付费用户达到 400 万。

    国外用户常用一个公式形容 Notion 是怎么 all-in-one 的:Notion = Google docs + Evernote + Trello + Confluence + Github + Wiki + Quip。同时,Notion 的产品风格也是走极简主义,有着“合而为一”的野心。

    如何高效地对信息进行整合、梳理, 是设计创作很重要的一环。基于此,这里给大家分享一下 Notion 的产品体验设计拆解。通过对 Notion 的体验设计拆解,为你提供一份文档类产品的解题宝典!

    更多产品拆解:

    上线即爆火!3600字完整拆解微信键盘的产品设计 微信键盘发布啦!

    阅读文章 >

    事先声明

    强烈建议使用电脑查看,用户体验更佳; 为了让 设计细节 更容易被看到,用 Gif 来呈现展示; Gif 体积较大,请耐心查看。 适合人群

    第一类,UI/UX 设计师 ,可以跳出执行层,去思考 Notion 的产品设计策略,提升产品分析能力;

    第二类,产品经理/运营,通过全面的产品设计拆解、策略推导,获取产品设计参考;

    第三类, 文档产品 从业者,通过全面的产品设计策略推导、用户需求分析,获取竞品分析参考。

    二、日常使用场景 1. 工作区和基础概念

    左侧侧边栏。Notion 的侧边栏是导航系统,创建的所有页面和数据库都会出现在这里。可以将各个页面嵌套在一起,实现无限的组织层次。 右侧编辑器。这是创建的所有内容的所在地,映入眼帘的是宛如白纸一样的画布,工作和生活就从这里开始。 Workspace 工作区。在团队中,侧边栏的 **Workspace**标题下的任何页面都可以被看到,并且很可能被工作区的所有成员编辑(除非另有权限配置)。 Teamspace 团队空间。团队空间可以配置开放式的还是封闭式的,有对应的不同权限的管理配置。 Private 私人的。个人工作空间默认为保持页面的私密性,除非它们被明确地共享。 Page 页面。Notion 的页面是无限层级的,一个页面能够添加多个页面,页面中的页面也可以继续添加页面。 Block 区块。Notion 中的基本对象为 Block(区块),它可以是任何形式:表格、文本、网页、代码块、图片、视频、文件或者直接是一个 Page(页面)。 2. Notion 由 Block 组成

    上图标出了不同类型的 Block(区块)。Notion 以 Block 为基本单位,围绕笔记文档、知识库、任务、轻量的数据库等方面来组织内容。在这张白纸上,包括文字、表格、视频、音频、网页、数据库等等,各种类型内容都可以看作「区块」。操作也非常简单,点击「+」或是输入“/”即可调用,随意将内容组织,并支持 Markdown 语法。Page(页面)上的任何内容,不管是文字、图片还是表格,都是一个 Block(区块)。每个页面都是各种 Block(区块)的排列组合。

    3. 新建工作区

    工作区的新建频率相对页面来讲是比较低的,因此新建工作区的入口相对较深,打开位于 Notion 窗口左上方的工作区切换器,会提供新建工作区的入口。尝试新建一个 Workspace,选择团队使用,会直接在根节点创建好几个对应的页面模板可以快捷使用。点击之后,又回批量生成很多模板页面,帮助用户快速上手,帮助用户轻松愉快的度过试用产品的 Day One。

    4. 新建页面

    点击侧边栏底部的**+ New Page 按钮来创建一个新的页面,这里新建的页面会默认出现在 Private 下。或者当你把鼠标悬停在侧边栏上的任意节点时,点击任何一个+**按钮,就会在对应的节点下新建页面。新建页面后,会默认出现一些快捷的操作,例如使用模板、导入、数据库等等,帮助用户快速地使用 Notion 强大的页面能力。如果自己尝试输入了一些文本,所有的模板提示和顶部的一些设置就会自动消失,映入眼帘的是宛如白纸一样的画布,工作和生活就从这里开始。

    5. 页面模板

    在产品体验中,对于初次上手的用户而言,模板是最好的选择。完全空白的 Notion 并不能解决用户的需求,得先搭建出各种工具,用户直接在工具里进行内容填充,才能满足用户的需求。所以,有了模板后,用户价值的探索路径缩短,减去了需要熟悉功能、自己动手搭建的负担,让用户能够迅速使用起来,并在持续使用的过程中不断熟悉产品各个功能,从而创建出属于自己的模板。

    在空白页面中点击「模板」,就会进入使用模板的流程。最近 Notion 也对使用模板的界面做了升级优化,记得之前选择模板的弹窗,侧边栏是在右边,左侧预览页面,这次把侧边栏放到了左边,在右边预览页面,「使用模板」的按钮位置也发生了变化。总的来讲会和用户在日常使用 Notion 得行为方式非常一致,都是在左边切换,右边看页面内容,减少用户的认知成本。使用模板的流程也非常短,在侧边栏切换模板的同时,就能在右边同步预览模板的内容,点击「使用模板」便能立刻将将模板内容应用到刚刚新建的页面中,使用上的体验也非常丝滑。

    所以,正是因为模板在产品策略与市场策略中的重要性:既能促进用户活跃,也能促进用户留存,Notion 才会将模板视作一个单独的模块,不断迭代更新。

    6. Database 数据表

    数据表帮助你在 Notion 中以各种方式组织信息--让你组织、分类、标记、过滤、搜索、查看和利用它来完成工作。下面是一个关于 Notion 数据表几种视图和常见的使用场景的介绍。

    Table 表格。表格形式,类似于 Airtable 表格,便于做数据统计。每一行都可以单独打开变成一个 Page,添加更多的内容。 Board 看板。看板形式,类似于 Trello 看板,便于任务分配、分类。卡片中的选项可以完全由自己定义,看板的分组也可以用选项来改变。 Timeline 时间轴。时间轴形式,时间轴视图,适合项目排期和计划. Calendar 日历。日历形式,便于查看时间相关的信息,可以在日历上按时间顺序查看任务。 List 列表。列表形式,便于查看一部分关键性的信息,比如只显示名称和进度,来明确任务的进度。 Gallery 画廊。便于查看多张卡片中的开头部分,可以在卡片开头添加一些概要内容。 7. 工具栏

    大部分同学应该习惯了 Word 这种工具栏,包括其它很多的在线文档平台,也都保留了这种设计。

    而 Notion 的工具栏默认是隐藏的,在没有开始第一个字输入之前,页面顶部还会有少量的功能外露,当开始输入文本时,所有的多余功能都消失了,页面就是一片白色,功能区全部隐藏,需要点击或选中一些内容才能出现,看似更麻烦,但实则更高效。

    8. 浮动工具栏

    这种工具栏可以称为「浮动工具栏」,与传统的工具栏抛给你一堆选择不同,浮动工具栏是围绕内容服务的。你可以先书写内容,再使用浮动工具栏中的菜单设置格式。让设置就在你的光标旁边,移动距离更短,日积月累能省下不少时间。当然,直接记住 Markdown 快捷键是更好的选择。

    当鼠标选中文档内的已有内容时,界面会自动弹出浮动工具栏。可以针对选中的文本内容进行常规操作。例如加粗、斜体、删除线,或是将普通的正文文本转化为一二级标题,也可以针对选中的文本内容进行评论。

    9. 编辑工具

    ① 「+」图标

    只要你把鼠标悬停在一个新的行上,左边的空白处就会出现「+」图标。点击它可以打开一个下拉面板,你可以从中选择想要使用的功能添加到页面中。

    ② 「⋮⋮」图标

    每当你将鼠标悬停在一个新的行或内容块上时,「拖拽」图标就会出现在左边的空白处。点击它可以打开一个菜单,让你对该 Block 进行操作,例如删除、创建副本、转化成其他 Block 等。

    ③ 「/」命令

    / 命令是最简单的方法是向你的页面添加内容或应用上述的操作。输入/后跟任何类型的块来添加它。如/bullet 或/heading。一旦你输入/,就会弹出一个菜单,你基本上可以实时搜索你想要的东西,只要按 enter 就可以选择并使用它。

    10. 分享页面

    在分享页面的设置中,可以对不同的成员域做不同的权限配置。对于这些配置项,在鼠标悬停的时候会在弹出相应的图示截图和文字说明,告知用户进行了这项设置后会发生的变化,给予了用户清晰的配置界面。当用户准备点击右下方的「复制链接」时,还会再次出现 Tooltips 提示用户当前配置的分享权限说明,避免权限误操作引发的不符合用户预期的后果。

    三、体验亮点 1. 左侧导航交互

    日常中常见的 B 端产品的导航栏一般都是要么展开,要么收起两种固定的交互模式,而 Notion 左侧导航非常灵活,尤其是导航栏收起状态时候,鼠标只要悬停到左侧区域,都可以将导航栏呼出,这时候通过导航栏切换到目标页面后,将鼠标移到页面内编辑内容时,悬浮的导航栏又回自动消失。在导航切换效率和页面内容浏览的沉浸感上有了非常好的权衡。

    2. 抽屉预览

    在数据表类型下打开页面,默认会通过侧边抽屉的方式打开,侧边打开方式可以自定义拖拽侧边抽屉的宽度。当抽屉拖动到一定宽度时,会自定将左侧的导航栏收起,再减小抽屉宽度时,侧边导航又回自动呼出。同时,侧边抽屉的交互方式并不是传统意义上的直接覆盖在当前页面的上方,在内容层级上会将下放的内容进行推拉,例如我们能够始终看到「新建」按钮,让用户在查看抽屉内容时,也能够灵活地操作后面的内容。

    3. 视图配置切换

    数据表有 6 种视图类型可以灵活切换,点击「新建视图」,切换的面板覆盖在内容上方,默认聚焦到「视图名称」的输入框中,在选择不同的视图类型时,能够直接预览到切换后的效果,并且能够设置不同的视图下,打开下一级页面默认的打开页面方式,整个使用体验上非常顺畅。

    4. 页面图标

    支持自定义给页面设置表情或图标。给予国际化和本地化的考虑,会有不同肤色的 emoji 配置,让不同肤色的用户能够用对应肤色的 emoji。对于一些只想加一个表情装饰,却有选择困难症的用户来说,还提供了一个「随机」的配置。更加智能的是,设置好的表情或图标也会在页面树中呈现,当用户的页面书中有较多内容时,可以高效地帮助用户对页面进行识别。

    5. 全局搜索

    点击「搜索」后,提前判断用户大概率要输入内容,会自动帮用户聚焦到搜索框当中。同时给出了几个非常高效的筛选项,能够帮助用户更精确地查找内容。底部提供了快捷键引导,这一点也是非常人性化,帮助不了解快捷键的用户能够迅速获取快捷键的用法,提高操作效率和体验。更令人惊喜的一点体验是当搜索的关键词没有匹配到时,会引导用户搜索已删除的页面,点击后会将搜索的关键词自动带入到垃圾箱中进行检索,提高了搜索能力的可用性。

    6. Block 工具栏悬停预览

    Block 工具栏中,鼠标悬停某个工具时,右边会出现对应工具的效果图和简单说明,能达到更好的引导目的,用户能够直接了解到这个 Block 是不是自己想要使用的,而不需要每次都一个一个插入试一下之后才知道,能够帮助用户更全面高效的了解 Notion 支持的能力,提高 Block 的使用效率。

    7. 即时修改和创建属性

    在使用数据库属性设置的时候,可以即时地对属性进行修改,使用检索可以快速使用属性,当检索的内容不在已经设定好的选项中时,会智能地提示用户可以创建一个新的属性。把属性配置的能力轻量化地外露出来,不再需要像传统的软件也痒属性配置有一个单独的属性配置面板。

    8. 图片尺寸调整

    图片支持宽高等比拉伸调整,常见的拉伸点实在图片的四个角,会容易引发的问题是当用户拖拽右上方拉伸点缩小图片时,因为图片在编辑器中的定位是固定的,会导致图片的缩放和鼠标指针没有跟随。Notion 的处理很好的解决了这个问题,拉伸点位于图片的左右两侧。同时图片的拉伸也会根据所处的 Block 来自动适应,例如图片位于折叠列表中时,由于图片约束了只能左对齐,所以只在右边有拉伸的手柄;而当图片位于普通的 Block 时,左右都能进行拉伸。

    9. 分栏交互

    Notion 中的分栏交互也非常智能,只需要点击并拖动你想放进另一列的文本或是其他类型的 Block (左边空白处的 **⋮⋮**符号是你的拖放手柄)⋮⋮,把它放到你想要的地方,就能够智能地变为分栏。想要改变分栏的宽度也非常灵活,只需要拖拽两栏中的竖线就可以智能的改变分栏的宽度。

    10. 弹出下拉面板时禁用页面滚动

    在很多中后台的系统中,经常容易发现的一个看似 BUG 的场景,就是打开了一个选择器 or 下拉菜单时,再往下滚动屏幕,下拉菜单的面板没有跟随滚动,看起来会有点像是 BUG。这个难题在 Notion 中有了一个非常巧妙的解法,在弹出下拉面板的时候,禁用页面的滚动能力。看似简单实则非常巧妙的解决了设计师在日常设计中经常遇到的难题。

    11. 折叠块

    正常情况下,Toggle list 下有内容时,箭头是深色的。当 Toggle list 的内容为空时箭头是灰色的。通过一个非常小的细节给予用户提醒,恰到好处。

    12. 页面为空时,图标是空心的

    页面内可以嵌入页面,如果嵌入的页面是有内容的,图标内也是会有几根横线;如果嵌入的页面没有内容,图标内部就是空的。通过一个小小的图标直接向用户传递是否有内容的关键信息,省去了用户需要去点进去页面才知道是否有内容的步骤。

    13. 拖拽小技巧

    框选文本 Block 可以直接拖拽到数据表中,并且会自动根据所框选的文本的 Block 的构成去自动转化为数据表中不同的行数据。批量变更 Block 类型时,非常高效。

    14. Block 链接

    文档中的每个 Block 都有一个专属的链接,复制这个链接发给其他人时,打开后会直接定位到对应的 Block,避免需要在一整篇文档中去找想要的关键词,非常灵活高效。

    15. @now 会实时更新

    Notion 还不容错过的一个实用小功能是利用「@」快速输入具体的时间戳,你可以把它用在日记里,或者是工作日志等。具体来说,假设今天是 17 号,当你在模板里用了「@Today」,无论你在多久之后利用这个模板创建新页面的时候,它只会显示「17 号」。而新的「@Today」则会动态更新,假设今天是 28 号,你用同个模板创建新页面的时候,会发现它变成了「28 号」,而非之前的「17 号」了。

    16. 任意空行都会快捷输入提示

    在所有的空段落前,都会有一个 Placeholder 提示用户输入「/」能够快速插入 Block,潜移默化的引导用户使用快捷键,起到了教育用户的作用,提高用户使用效率的同时也增强了用户对产品的粘性。

    17. Notion AI

    2022 年 11 月 16 日晚,Notion 发布了 Notion AI 测试版写作助手,来帮助用户写作、初稿整理以及记录创意点子,标志着 AIGC 发展进入一个新的阶段。申请了一下内测,已经排队到 16w 人了。

    四、体验槽点 1. 没有固定位置的页面目录

    原生能力不支持页面目录,虽然支持目录 Block,但是插入的目录 Block,只能跟随页面内容显示,当页面内容往上滚动的时候,目录就会消失。这里右边还是通过第三方插件才实现了目录的能力。

    2. 没有原生的思维导图

    Notion 目前还不支持原生的思维导图,国内参考的竞品 Wolai、FlowUS 都已经能够支持思维导图了。目前仅能是通过一些第三方插件置入思维导图,整体的灵活性远不如原生的 Block 那样强大。

    3. 原生不支持中文

    目前对中文还不太友好,中文搜索不全面。12 月 14 日的时候,Notion 在 Twitter 上有发布了德语版本的支持,好奇的在下面留言啥时候支持中文,网友有趣的回答道 100 years。

    不过目前有一些第三方的汉化插件可以使用,这里分享给大家: https://zhuanlan.zhihu.com/p/397634631

    五、总结 Notion 团队非常重视设计,创始人伊万说:“设计意味着这里的一切,Notion 的感觉对他们来说具有重要价值”。不仅如此,你在他们的网站会发现,好像全部都是用 Notion 创建的一样,有很强的认同感。

    从少数派到哔哩哔哩,从知乎到小红书,有大量的 Notion 用户每天都在分享自己的 Notion 使用经验。这导致关于 Notion 的文章和视频每天都在快速增长。

    PLG 的发展模式,要面对大量的 C 端用户,所以 Notion 必须要有非常好的产品体验。通过极致的产品体验,减少用户使用中的阻碍与疑惑,使整个产品在使用上更为顺畅,从而提高产品的易用性,减少在面向 C 端用户过程中的运营咨询,便于团队将咨询交付的精力集中 B 端用户的服务上,从而创造更大的商业价值。

    由于时间和篇幅有限,关于 Notion 的体验设计拆解中存在的疏误之处还望大家给与指正,欢迎大家一起学习和讨论。

    世界杯专题!8500字全方位深度拆解懂球帝APP 2022 卡塔尔世界杯已经拉开帷幕,相信大家从这周开始,都已经陷入四年一次的狂热的足球氛围中。

    阅读文章 >

    6000字拆解!花费10个亿,抖音如何设计世界杯专题? 作为全球最火爆的体育赛事,世界杯由于其独有的稀缺性,被外界誉为四年一次的足球盛宴。

    阅读文章 >

    参考链接

    Notion 官网: https://www.notion.so/ Notion 帮助文档: https://www.notion.so/help https://36kr.com/p/2025046266178056 注:部分图示取自 Notion 官网

    感谢阅读,我是设计师波波 Bobby He,深耕 B 端体验设计,持续学习输出中,欢迎关注和交流~

  • 4000字干货!9个方法帮你掌握UX文案写作

    UI交互 2023-01-04
    相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。如果说信息架构、逻辑流程是产品交互的筋骨,那文案无疑就是血肉。有时产品经理给设计的需求和客户提供内容会有错字,语句不通顺,若设计师能够快速发现就可以...

    相比美观的视觉设计,清晰的文案在界面呈现中同为重要,好的文案不止赋予产品更好的体验,也能够拉近用户与产品的距离,优化文案也常作为可用性测试后改良产品用户体验的落脚点。如果说信息架构、逻辑流程是产品交互的筋骨,那文案无疑就是血肉。

    有时产品经理给设计的需求和客户提供内容会有错字,语句不通顺,若设计师能够快速发现就可以体现出自己的专业,一般懂文案的设计师沟通和表达能力都不会太差,写好文案对于设计师来讲无疑是一件锦上添花的事情。设计是文案的视觉化呈现,文案是设计的思维表达,两者相辅相成,好的设计一定是懂文案的。

    「文案」这个词看起来好像很简单,且主观感觉优先级略低,但并不意味着它容易表述。一个好的文案说明是需要从多个角度出发考虑的,表述不清晰就会对用户造成误导。那么设计师如何写出好的文案呢?

    掌握这些小技巧,可以输出更容易让用户理解的文案。

    更多UX文案教程:

    如何写出优秀的UX文案?来看高手的总结! 如何写出优秀的 UX 文案?

    阅读文章 >

    一、清晰(突出重点 弱化次要) 通过可用性测试可以了解文案的哪些部分是清晰的,哪些是迷惑用户的。对不清晰部分的文案进行细微的调整,能够产生巨大的改变。

    文案超过两行就需要用户更集中精力阅读,用户从而难免产生排斥心理,如果文字信息真的很多,可以把一段话整理分类依次竖向排列,同样可以给用户清晰及高效的阅读感受。

    例如平安云的隐私政策更新提示弹窗界面,设计师通过行间距将文本内容进行了分组,并且对标题文字进行了加粗和加大字号的处理,用户读起来会比较轻松。

    要对文案做好内容的平衡,若一次性显示太多不必要的信息,会扰乱界面给用户带来不必要的阅读与操作压力,需要谨记只有在用户有需要的前提下才展示这样的文案说明。对于辅助的说明文字可以稍做隐藏,用户需要的时候支持查看;提示文字不是只能设计成平铺直叙的只读文字,花了心思便可做得恰到好处。

    如下图,平安云账号中心的实名认证界面,关于对单位证件号的提示说明文字内容被隐藏,需要 hover 在问号 icon 上才会弹出提示,提示的内容以表格的形式呈现,并对各账号进行了举例说明,更便于用户理解,从而无障碍地进行表格的填写。

    尽量使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。间接、暧昧模糊的说法,生僻和过于“文雅”的用词,会增加用户的认知成本,所以应当尽量避免使用这类无法识别的词汇。

    二、一致(规范字数 结构一致 全局一致) 一致性的文案设计可以帮助用户建立产品工作方式的心理模型,从而获得更好的用户体验。如果在产品中对同一事物使用不同的术语,比如用户点击页面 A 去到的是页面 B,用户就会感到困惑,在编写文案时保持一致性很重要。一些具体准则可以帮助我们达到这一目的。

    1. 规范字数:不同组件平均应该有多少个词?每个按钮一个、两个或多个词。

    尽量控制描述文字的字数,保持一致,使页面整齐美观。按钮的文字也尽量保持字数一致,可保证页面的稳定性。我们有时候看到很多文字有长有短,排除一些异常情况,确实是有很多情况我们可以对文案进行优化的,不是吗?

    2. 结构一致:确定文案的结构,是否仅包括一个动词或是动词与名词的组合(例如“动词”+“名词” 或 “动词” +a+ “名词” )

    卷又卷不动,躺又躺不平,摆又摆不烂,死又死不了…哦吼,这是很多人的现状。瞧瞧这吐槽的段子都对称着,有些还压上韵了,我们写产品文案的时候就照着这个标准卷吧!

    3. 全局一致,同一个名词在产品中要保持一致,行动点名称尽量与跳转页面标题一致。

    如果你的新增按钮文案为新增 XXXX,那尽量所有的新增按钮文案都这样描述,不要有的是新增 xxx,有的是添加 XXX。

    例如:对内容的增删改查,在很多 B 端产品的页面表格操作下,通常会见到查看按钮,点击可看详情,这边建议尽量把查看改成详情呢,点详情不管接下来看到的是弹窗还是进入下一级页面,其标题叫详情或者 xxxx 详情,就做到了行动点名称与跳转页面标题一致有没有,这只是一个例子,我知道你可以做到举一反三。

    三、简洁(言简意赅 通俗易通) 1. 使用熟悉的单词和短语也有助于减轻用户的认知负担。

    编写对话内容时应尽量避免使用“行业术语”“科技术语”、“专业词汇”、“方言用语”等(如 404、505、错误码 XXX 之类的描述),避免写出不具普遍性的对话内容,避免表述一件事情时绕来绕去,如使用双重否定表示肯定等让用户不易懂的文案,减少用户在操作前总是要去思考和陷入不知所措的情况。让用户明确的知道当前发生了什么,进而正确决定其接下来的行为。

    一个事情说了半天人家没明白你说的啥,那就说人话吧……特殊情况除外,例如你在疯狂星期四转发给朋友让他给你买KFC铺垫了很多很多巴拉巴拉的段子,朋友觉得你好有趣,一感动就跟你买了。当然这种情况你也可以直接说“我想吃KFC,给我买”,可能你朋友也会说“好的,买买买……”谁会拒绝一个打直球的吃货小可爱呐。

    建议对你的朋友足够了解后。再选择合适的措辞。正如我们在设计的时候是需要对用户足够了解才能写出更合适的文案。

    2、如果必须使用生僻的词汇,需要增加注释说明。

    发票金额是明白的,可开发票金额,哪些可以开,哪些不可以开,不表述清楚用户就不确定,需要通过注释去表述,腾讯云的设计还运用了公式去说明,相比文字描述“可开发票金额等于腾讯云可开票金额加云市场可开票金额”这样去进行文字说明要直观的多呐。

    3. 有效的文案应该是对话式的。

    告诉用户接下来的操作会导致的下一步的结果,就像与人在对话一样,这其实是一件比较难实现的事情,因为我们对所设计的产品以及每天遇到的行业术语非常熟悉。解决这个问题的一种方法是与用户一起测试,看 他们是否懂我们使用的语言。

    四、尊重(尊重用户 提示友好) 1. 永远站在用户的角度考虑,当出错的时候不要责怪用户或使用命令或强迫的语气,多给予用户理解包容与支持鼓励,专注于解决问题,让其感受到产品足够多友好,感受到被尊重。

    2. 即使是需要用户承担相应的责任,文案也要克制,使用相对的语气将问题出现的原因或可能出现的结果反馈给用户。

    腾讯云的账号中心-安全设置界面:安全设置肯定是用户非常关心的,对于每种操作的解释说明,都平铺展示,用户可以一眼就 get 到自己需要的设置在哪操作,怎么操作。心里有数,不慌不忙。

    在新的设备上去登录微信,之前的设备会退出登录,微信使用的文案描述规则是:先摆出事实告诉用户现状,再说如果进行接下来的操作会导致的后果。这段文字在这里被标红,着重强调的样式更容易让用户知晓。

    当微信在其他设备登录时,需要常用设备进去确认。使用“平淡的语气”提到了如果设备不在身边或不是本人登录可以会导致的严重后果,让用户谨慎操作。

    3. 尽可能提供补救措施,降低用户的损失,利用文案对用户情绪进行安抚。

    辛辛苦苦 P 的“照骗”忘记保存了,好心碎,下次打开的时候,美图秀秀提醒“你之前有尚未保存的图片,是否继续编辑?”惊不惊喜?好开心,赶紧保存下来,发个朋友圈。

    五、严谨(无错别字 专业科学 形成闭环) 充分了解用户背景才能用词专业、精准,采用专业适当、精炼准确的词语高效的传达信息,帮助用户理解。

    基本用语要规范,避免使用错别字,词句需要表达完整;专业用语需要精准,并且是所属行业认可的通用语言,不使用对目标用户来说难以理解的词语;时间的表述也必须要明确。

    六、利他(用户为主 提示友好) 文案的表述应该让用户感受到我们是为了他在思考,功能的描述也可以以对用户有益处的方式去表达。

    腾讯云-费用中心-用量明细下载页面:对于页面数据的展示说明清晰描述了只展示付费后的产品,关于时间线也只支持近 6 个月的下载,但如果用户想要更多就可以去哪里下载。这些友好清晰的提示都是设计师花了心思设计呀!

    页面内容如果加载时间长,提前告诉用户,数据加载可能耗时较长,如果用户有其他的事情先去忙,稍后再返回页面查看数据结果。这么清楚的描述,简直爱了。

    七、语气(语调统一 凸显品牌) 语言风格,要基于自身的业务,符合产品的调性。作为以技术为支撑的产品,在表达过程中要体现严谨、专业的风格,避免使用太口语化的语言,尤其是俗语和网络用语。

    在合适的场景下,用更富有人情味的语气与用户沟通,反馈信息,会提升使用感受,现在的产品设计不仅仅是人机交互,更是人与人之间的交互,要给用户更人性化的反馈。

    如下苹果官网的一些文字提示写的有非常通俗易懂。

    八、标点符号正确使用 标点符号以及字母的大小写这些都属于交互设计的细节范畴,使用它们时也需要做到切合时宜,它代表着产品的规范与科学性,连符号都用错了,你的 交互设计 怎么可能让用户信任?另外符号在语言规范中也有增强语气,加深语言力度的作用,所以说符号的使用在交互文案设计中也是非常重要的。

    1. 中英文大小写

    产品名称缩写需要全部大写,如:ESC、SLB;但是特殊的产品品牌,例如:XFlush,需特殊处理。

    全英文的标题、标签、菜单项等等都要遵循英文句式中首字母大写的规范,正确使用专有名词的大小写规范。

    遵从行业规范,符合用户的认知,不会逼死强迫症,也凸显了产品专业。

    2. 阿拉伯数字

    统计数据使用阿拉伯数字,用户对于数字的感知速度更快,使用数字而非文字表述会更加有效;

    3. 标点符号

    可以省略不必要的断句点,帮助用户更加高效的扫视文本内容。

    元素单独出现时可以省略标点(例:标题、标签、输入框下的提示、悬停文本中的提示、表格中的句子)

    元素单独出现时也有需要加上标点(例:多句或多段的文案和列表内容、任何文字链前的句子)

    谨慎使用感叹号,感叹号用于表达强烈的情感,让文案显得过于感情化,容易让气氛变得过于激动和紧张,故尽量避免使用。

    九、文案不是万能的 文案说明不可能解决所有的可用性问题,它并不能引导用户去操作一个拙劣的产品,若是产品设计有问题,应该优化的是产品本身,而不是完全通过文案来告诉用户如何去操作。如果不能简单的去解释行为, 就不能设计出好的产品。

    十、小结 本文列举了一些简单的案例,这些案例可能只是一句话或者几个字的差异,就能带给产品不一样的感受;对业务逻辑和用户场景理解得足够深刻,我们方能用准确简洁的文案去解释。

    产品文案的优化需要产品设计流程中各个环节各个角色的共同努力,多思考批判,多梳理检查。学习是一个持之以恒的过程,需要有耐心,在深刻理解这些文案技巧的基础上再灵活运用,那么相信你的设计一定会更上一层楼。希望本文有帮助到各位,大家一起加油吧!

    写文案没灵感?这8款文案网站免费用! 编者按:本文为大家收集了 8 款好用的文案网站神器,包括名言通、押韵助手、学句子、藏头诗生成器、朋友圈文案网站生成器、邻近词汇检索、彩虹屁生成器、句易网,让你写文案手到擒来。

    阅读文章 >

    欢迎关注团队微信公众号:兆日 UCD

  • 大厂出品!运营视觉设计师入门指南

    UI交互 2023-01-04
    如今的互联网岗位不断精细化,设计岗位也是如此,设计团队内的视觉设计师通常分为产品体验设计师和运营视觉设计师。产品体验设计师主要负责产品功能及体验设计,并为用户提供良好的使用体验。运营视觉设计师主要负责运营活动设计,通过设计引导用户关注参与活动,达成拉新、促活、成交等运营目标,有时兼顾产品功能和品牌推广的作用。

    如今的互联网岗位不断精细化,设计岗位也是如此,设计团队内的视觉设计师通常分为产品体验设计师和运营视觉设计师。产品体验设计师主要负责产品功能及体验设计,并为用户提供良好的使用体验。运营 视觉设计 师主要负责运营活动设计,通过设计引导用户关注参与活动,达成拉新、促活、成交等运营目标,有时兼顾产品功能和品牌推广的作用。

    更多 运营设计 干货:

    运营设计师如何快速上手主会场设计?来看京东的规范流程总结! 文章主要讲述的是新手运营设计师在经验不足的情况下,如何快速上手主会场设计,以及通过流程的详细理解与归纳,巧妙避免由于不熟练而导致工作效率低下的问题。

    阅读文章 >

    一、运营设计都干啥 运营设计的工作范畴相对繁杂,不仅更换频率高,种类也比较多。从工作内容上可以细分为产品线上、新媒体平台、线下和其他辅助内容 4 大块。

    1. 产品线上

    包括专题、活动页面和入口设计;

    专题页:是指有主题的活动页面,我这里列举的是非营销主题的落地页,一般用来展示主题信息,以信息呈现为主要目的。

    运营活动:是以营销(拉新、促活等)为目的的落地页或系列页面。按照项目重要性,可分成 S 级、A 级和 B 级不同等级。AB 级一般指热点或日常运营活动,S 级指业务年度大促活动,往往兼顾多种目的并增加游戏玩法,设计时要通过合适的视觉效果来引起用户的兴趣并引导转化。

    这里需要提一下运营玩法,根据业务的目标策略常见的有增长类活动,比如助力领红包,砍价,团购等形式,以分裂拉新为主要目的。还有一类独立完成的小游戏,红包雨、抽奖等,以增加日活为目的或搭配综合活动。

    入口设计:包括各类 Banner、弹窗、浮窗和开屏页等广告位,是设计师日常接触最多的内容。虽然体量较小,但是运营活动转化重要的一环,直接影响活动效果。

    以 2021 房产春运为例,活动兼顾拉新、促活和品牌功能推广目的,主会场展示各类产品功能,并设有游戏专题页用来展示活动任务和奖品,小游戏简单好上手可以增加用户粘性,游戏任务深入到直播看房和在线付定金功能中,为业务倒流,形成了良性循环。

    2. 新媒体平台

    各大社交和短视频平台是当前产品运营的重要途径,包括微信生态中的小程序、公众号、视频号和社群,抖音和小红书等短视频及内容平台。

    而为电商店铺服务的运营设计师是更加专职的运营设计师,负责设计产品店铺日常及促销活动时的首页,详情页等。

    3. 线下设计

    线下设计接近传统平面设计,需要设计线下宣传制品,包括手册折页、易拉宝展板、海报等其他印刷制品,根据业务属性可能还有店面装饰以及装备设计等。

    4. 辅助设计

    这里把其他会涉及到的设计内容统称辅助设计,其实并不严谨,因为单独拿出任何一项都是可以细说的专业领域,比如字体设计,品牌策划、IP 设计,VI 手册,规范设计等。这里就不展开细致阐述了。

    二、干就完了,还要分阶段? 按照工作流程顺序,我们可以把运营设计分成三个阶段——设计前、设计中及设计后。每个阶段根据合作对象和目的的不同,工作方法也有区别。

    1. 设计前——沟通 ① 理解项目

    和体验设计师一样,在开始设计工作之前,我们要先充分理解需求的目标、背景和用户。

    项目目标

    常见的运营项目目标有拉新、促活、回流和转化,即获取新的用户、活跃老用户、让流失的用户重新回流,以及实现商业转化创造价值。其次是产品目标,即巩固产品策略、建立品牌形象、提高品牌美誉度、实现品牌价值。最后还有行业目标,即提高设计影响力与行业影响力,这个目标相对是比较长期持续的。

    项目背景

    项目背景是目标的动机,此项目是基于哪个产品功能设计的,有没有之前的项目需要延续或比较,是否基于节日或其他热点展开等,总之要充分理解立项的动机。

    目标用户

    依照活动上线的不同平台,可以把用户分为共域和私域用户,私域用户更加精准,可以通过专业的用户分析得到他们的普世特征,思想和情感需求等,洞悉目标人群的特征才能实现精准的设计触达。

    ② 沟通技巧

    既然是和需求方沟通,那沟通方法和技巧是设计前的工作核心,如何有效沟通是很多年轻设计师需要学习和掌握的。

    以设计师的角度主动参与。需求方的设计能力参差不同,有可能就是设计小白,不能明确表达期望的效果和风格,作为设计师尽量主动提供参考,以达到可视化的沟通和讨论,并在沟通过程中确定方向,作为开展设计工作的依据。 预判风险。首先要和需求方沟通排期,给自己留出充足的创作时间;还要和技术团队沟通实现性,规避不能完成的效果,保证项目的顺利进行。 此外还要保持专业度,也就是保持理性,沟通时从项目本身出发,不带有情绪和偏见。

    2. 设计中——合理 在设计过程中设计师会通过一些创意方法,运用一些表现手法,最终落地设计输出,呈现完整的作品。创意方法比如联想,夸张、幽默等;表现手法包括插画,合成,三维,动态等,这里也不做具体讲解了。我们来聊聊设计工作中的合理性,合理性包括设计呈现的合理性和工作流程的合理性。

    ① 设计合理

    传统的平面设计又称视觉传达,其概念是以视觉媒介为载体,利用视觉符号表现并传达信息,所构成的主要要素是文字,插图和标志。

    运营设计的基础即为视觉传达的,要向用户快速有效的传达信息,所以信息展示的合理性至关重要。怎样才叫合理呢?要看设计的目的是什么?结果导向反推设计的合理性。视觉内容越直观越好,现在是碎片化信息时代,用户大多是没有耐心和时间的,所以我们要通过设计把要传递的信息进行整合排序,提炼信息的主次关系,可以把利益点和有效信息重点突出,快速抓住用户眼球。之后再用设计将产品与用户建立起良好的关系,渗透产品功能甚至品牌价值。

    举个小例子:人眼习惯最先阅读文字,其次是颜色,插画等,所以文字需要清晰明了,阅读感需要流畅。调整后的弹窗阅读感流畅了,信息的主次关系也更明显。

    ② 流程合理

    细化流程可以让工作流程更加合理,可以最大限度的规避返工风险。

    确定视觉风格和初稿阶段,根据需求目标和主题选择适合的设计风格,并和需求方确定后再开始初稿的搭建,草图可以在设计小组内部审核后再深入设计,避免过早陷入细节,造成返工。 二稿阶段,围绕关键词进行视觉创意,表达创意内容,展示设计手法,并完整的展示需求方所要体现的所有信息,让对方能够理解创意和信息布局的合理性。 运用专业能力完成设计图,在调性,氛围和细节把控上做到高级感。

    3. 设计后——体/验 设计图完成后并不意味着工作的结束,需要在设计还原上跟进。

    “体”意为体现,跟进技术实现的效果,通过走查保证和设计图的同步;线下制作需要通过打烊保证成品的效果和质量。

    “验”意味验证,需要和需求方一起关注数据,线上项目可以通过后台数据反馈活动效果,还可通过问卷、访谈等方式得到用户真实的反馈,从而优化设计策略和方向。

    一个验证的例子,下图是 58 到家 APP 首页的一个弹窗,目的是为微信社群倒流。由左侧的样式更换成右侧更为简洁的红包样式后,点击率有了明显的提升,设计样式的变化直接影响了数据的变化。通过这样的数据验证,设计师可以和需求方一起探索更优的视觉呈现,为业务赋能。

    此外,项目结束后的总结和复盘,可以把项目过程中遇到的问题及时列出,通过数据整理分析,沉淀方法和经验。

    三、最后唠叨几句 设计是服务于产品和用户之间的工具,作为设计师具备专业的思维能力是有必要的,如商业思维 (从宏观到微观考虑问题),产品思维 (以用户为中心,思考产品的价值),营销思维 (让别人认识你)等,作为运营设计师可以加强营销思维的建立为业务服务。

    此外,文案能力和交互能力在工作中也应用甚广,有时一些文案和交互问题在具体设计中才会暴露,需要和需求方和交互设计师一起共创。

    最后的最后,要与时俱进,不光是审美和表现技法上要与时俱进,运营设计师往往要做些内容相关的需求,对时事热点和话题也需要具有一定的敏感度,眼界上也要与时俱进,才能迸发出更多的创意和灵感。

    字体设计保姆级全方位教学!万字干货 前言 在平时的工作中,我们是否有考虑过运营设计的商业目标是什么?

    阅读文章 >

    互联网下半场,运营设计师的生存之道 宜信BXD 运营设计组 - 梅晓晓:2018年是人工智能重点发力的一年,关于「人工智能会完全取代设计师」的话语层出不穷,很多从业者倍感危机。

    阅读文章 >

    欢迎关注「58UXD」的微信公众号:


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