• 别人说你设计做得丑怎么办?大神总结了9个方法!

    UI交互 2023-01-17
    在设计职场中,我们肯定被否定过,委婉一点就是建议再多出几个版本。要是遇到直白一点的,直接说你的设计做得太丑啦!在职场中遇到被否定实属正常,没有打压就没有痛下决心的驱动和反思。

    在 设计职场 中,我们肯定被否定过,委婉一点就是建议再多出几个版本。要是遇到直白一点的,直接说你的设计做得太丑啦!

    在职场中遇到被否定实属正常,没有打压就没有痛下决心的驱动和反思。记得初入职场的时候,一次设计提案就直接被老板说:“这都画的啥玩意儿,这么丑”,当我成长起来之后再回想起当初的场景,我很庆幸老板的直白批评,让我清醒起来了,自己不努力就只能被淘汰。

    最近黑马哥也回忆了一下自己初入职场时的经历,当我们被否定的时候,如何走出困境至关重要。今天也针对这个话题和大家聊一下自己的想法,希望对大家有所启发。

    往期黑马哥干货:

    职场遇到这10种要求,设计师请学会拒绝! 职场中总有这样一群人,总喜欢麻烦别人,把自己的事情交给别人来完成;也有这么一群人,不好意思拒绝别人的事情,导致自己的工作做不到极致。

    阅读文章 >

    一、真丑假丑自我判断 初入行业工作中作品被否定实属正常,虽然我们要按照需求方的想法做设计,但是被否定并不一定是我们设计得丑。需求方也是分专业和非专业,针对一些不专业的需求方,我们也要坚守自己的判断,真丑还是假丑自己心中要有数。

    要是自己不够专业被别人质疑,可能是真的丑,这种情况只能虚心接受了。如果只是需求方审美不行,我们可以为了工作妥协自己的想法,但是我们对于设计的判断依然要坚守在更高的标准中。

    如果是在设计平台发布作品被说丑,我们就要思考别人的这个评价是否是“杠精”。我们输出作品都有自己的目的,不能因为别人觉得丑就放弃,要有自己的正确判断。别人评价作品丑没关系,明确自己做这个作品的目的更重要,坚守自己的目标规划,让“杠精”们和你的差距越来越大。

    二、正视问题调整心态 虽然真丑假丑我们自己要判断,但是如果是真的能力不足,也要正视这个问题。不要被别人影响,也不要自我感觉过于良好,正视自己调整心态至关重要。

    不要被别人的评价干扰自己的心情,作品丑不是什么大过错,只是我们还在进步中而已。调整自己的心态切勿玻璃心,整理那些有效的建议,当局者迷旁观者清,别人的建议也是我们增长经验的一部分。

    三、反复磨练由丑变美 知道自己的不足是好事,懂得调整心态更是值得点赞,就怕能力不足而不自省,更怕玻璃心一蹶不振。黑马哥刚毕业的时候也经常被骂,设计方案被退回来和被说丑那是常有的事儿。这都是职场经历的一个过程,没啥大不了的,跌倒了爬起来继续撸图。

    我们要明白只有反复磨练才能由丑变美,想要改变别人的看法不是靠空想,也不是靠时间的积累。工作年限长了不代表你的能力就强了,工龄和能力不是一定会成正比的。我们都是凡人,只有按部就班的努力才能成为自己,简单的事情反复做,重复的事情做到极致,设计经验就是一堆源文件积累出来的。

    要给自己制定作品输出计划,不怕自己做得比较慢,就怕你一直在原地踏步。要让自己多年后有很多作品可以筛选,而不是埋怨没有机会和公司不注重设计,导致自己没有作品沉淀。

    四、设计过程多找依据 有时候我们的设计被否定并不是设计本身不好,也许是少了说服需求方的依据。就类似于设计方案技术说不合理、不好开发、实现不了等问题,如果我们可以拿出别人实现的依据,就可以证明我们的设计是没问题的,是你们技术能力不行而已。

    设计过程中我们做出来的解决方案要有成熟的构思,也要找到验证方案成立的依据,空口说白话肯定是没有说服力的。平时也要加强体验和总结,也要建立灵感资源库培养采集、分类和分析的习惯,日常的积累量是提高效率的关键,别人产品的上线方案也是参考依据的途径之一。

    设计过程中的依据可以是调研分析、竞品分析、线上案例分析、设计推导等,不要闷着头画图,也不要让设计停留在个人理解中,突破固化思维才能突破灵感束缚。

    五、设计收尾自我审查 优秀的设计师需要注重细节、具备良好的职场习惯和专业态度,完成项目设计后要反复审查,不要出现低级错误。很多 设计师 完成项目后直接就发给需求方,一些看似小问题却影响了别人对你设计态度的质疑,相互之间的信任度需要从每一个细微之处体现。

    自我审查是我们把控设计质量的第一个环节,只有自己觉得满意了才有可能说服别人接受,自己都打动不了还妄想打动别人。自我审查包含:设计逻辑、需求匹配度、细节处理、文案描述、规范统一性等,把控思路和细节,减少因小失大的风险。

    六、设计提交要有说明 设计都是比较主观的,我们喜欢的方案需求方不一定能接受,而需求方喜欢的方案也许我们也觉得很丑。有时候方案被否定可能就是需求方只是凭感觉判断的,如果我们提交的只是视觉表现层面的展示,别人判断的时候也只能通过主观意识,也就加大了被否定的可能性。

    无论项目大小,我们在提交的时候最好有自己的一些设计说明,不要只是发几个图过去。特别是面试的笔试题,通过包装呈现自己的全案设计思路是至关重要的,这样才能通过整体的结构体现出自己的综合能力。要是比较重要的工作项目提案,我们制作 PPT 也是必不可少的,特别是要进行演说,准备充分才能减少风险。也不至于让需求方觉得这么长时间就画几张图,把设计的价值给拉低了。

    平时多输出一些日常练习,完成之后也尽量包装作品,这样才能提高自己作品包装的能力。排版的基础也是需要反复磨练的,不然做个 PPT 都显得不堪入目,反而影响了设计作品本身的质量。

    七、设计评审要有主见 在进行项目设计评审时,我们也要先入为主,提前把自己的设计理念阐述一下,不要让大家通过主观意识去判断。在阐述的时候要有自信,对自己的设计方案要有信心,如果自己都否定自己,还怎么让设计说服别人。

    遇到对设计作品质疑的声音,不要一味地妥协和质疑自己,要有自己的主见。通过自己前期的设计思考和项目的一些调研依据进行辩证,就算最终要妥协也不能自己否定自己的设计质量,只是大家见解不同,要敢于为自己的作品做争取。有时候需求方自己也不是很明确想法,或者说他们的想法也可能是错误的,我们要自信自己是专业的,方案是符合市场实际情况的。就算最终我们妥协了,也要保留自己的最终解释权。

    作为设计师,一定要够专业、有态度、要自信。这份有主见和自信的气场不能丢,要给人的感觉就是站在台上就是我的主场,你们不能单纯以美丑来定义我的设计,要给出一个说服性的理由。就相当于我们发布作品在设计平台,别人评价说作品很丑,那也是别人不明白我们输出作品的目的,我们要坚信自己的方向是没错的,让多年后那些评价的人和我们差距一大截。

    八、完成项目复盘经验 工作中项目有大有小,完成的结果也会有好有坏,也有一些不尽人意的情况出现。但是我们依然要养成一个针对项目复盘的习惯,特别是项目做得不好的时候,更是要通过复盘掌握经验和调整思路。

    初入职场我们经常会被人否定设计能力,作品也会经常被退稿。复盘出不足的问题才能找到解决方案,这也是自查的一种形式,通过项目来自查自己的技能范畴,针对不足的技能制定学习计划。有些设计师作品经常被需求方否定,却不知道自己的专业能力到底问题在哪里,就是缺少自查的环节。

    假设出一个全案设计的项目,然后去构思这个项目中所需要的能力范畴,再对标自己所具备的能力进行梳理。也要找一些优秀的设计作品来进行质量对标,和这些高质量的作品对比,看看自己缺少那些表现力。如果自己无法解析这些深入的表现技能,就要通过学习去加强,不然不会的问题就会越积越多,最终让自己陷入被动状态。

    九、主观判断美丑自知 对于美丑的定义因人不同,审美的标准和生活的环境都各有差异,我们在判断感官层面都会带有自己的主观意识。通过这一点我们也要明白,别人判断我们作品也是如此,我们自己要自知自己到底有没有尽力。

    不因为别人的夸奖而沾沾自喜,也不会因为别人的否定而一蹶不振,主观判断美丑自知。我们要了解自己、规划自己和信任自己,一切都按照自己的规划去进行,这个过程中难免会有异样的眼光,我们无需改变他人的看法,一切留给时间来验证,只要确定自己的方向是正确的即可。

    十、总结 本文通过关于别人对作品美丑的评价为切入口,和大家聊了这个问题出现时的一些关联因素和思考角度。我们要有自己的思考和判断,不会因为别人的评价而晃动自己的坚守,也要因为别人的评价而冷静分析,接受有效的评价屏蔽无效的争论。

    本文观点仅为个人经验反思和建议,大家结合自己的实际情况选择性吸收,不足之处欢迎留言补充,我们互相进步。

  • 万字干货!写给界面设计师的职场应答指南!

    UI交互 2023-01-17
    遇到跨职能同事对界面设计方案发出灵魂拷问,设计师该如何应答?本文从理论和应用层面,对不同种问题总结了万字科普,希望有用~往期干货:UI/UX设计作品集中的推理分析该怎么写?高手实操案例分析!

    遇到跨职能同事对界面设计方案发出灵魂拷问, 设计师 该如何应答?本文从理论和应用层面,对不同种问题总结了万字科普,希望有用~

    往期干货:

    UI/UX设计作品集中的推理分析该怎么写?高手实操案例分析! 编者按:作品集中的推导分析部分该怎么写,而不是套市面上的流程和模板?

    阅读文章 >

    一、那些年,我遇到的灵魂拷问... 我的日常工作嘛,想必和其他从事界面设计相关工作的设计师一样:70%的时间用来构思设计策略和产出设计方案、30%的时间用来和产品团队各种各样的角色打交道:比如需要通过项目展示,让产品决策者买账;或者给开发工程师解释设计细节、跟踪上线后的品控问题。而在这 30%的沟通时间中,与合作小伙伴们的探(撕)讨(逼)设计问题总是不可避免的一个环节。那在这个时候,如何让他们理解问题背景、如何让他们理解你的设计方案、如何让他们“买账”......诸如此类问题是否能高效沟通,显得尤为重要。

    其实,对于一些比较偏产品向的界面设计问题(比如:为什么支持“批量取消"?为什么有“确认页”?为什么“全屏展示活动图片”?...等流程、功能、信息展示型问题),我们解释起来是比较容易的——我们可以对标着产品经理制定的产品目标,结合数据分析师或用户研究员总结出来的数据或用户事实,即可快速地合理解释自己的设计方案。但是,如果你的小伙伴恰巧是非常严谨认真、刨根问底的人,他们可能会问出一些 非 常 微 妙的问题,让设计师立时无法抓到一个准确的论点或论据展开阐述,往往只能和团队的小伙伴们相顾无言。那这些 非 常 微 妙 的问题具体指的是什么呢?容我举个栗子:

    类似于以上的问题,想必各位设计师在日常工作中并不罕见。然而我每每回答时,对话会进入一个奇妙的怪圈,be like:

    “你不觉得这样设计更清晰/工整/美观吗?”

    “我不觉得啊,我觉得都长得差不多。”

    “可是这样用户能更快找到交互目标,完成交互任务,有更好的用户体验呀。”

    “啊?有吗?为啥?所以呢?”

    “......”

    所谓“忍一时越想越气,退一步越想越亏”。咱就是说,每次都不知道如何解释、眼睁睁看着设计被“砍”来“砍”去可不行。为了让我自己变成更加“耐撕”的设计师,同时尽可能帮助到遇到类似问题的小伙伴们,我尝试着阅读、思考、总结了一些界面设计的科普知识,并以此来深入浅出地、感同身受地、科学严谨地解释一下设计师那些对于微妙设计细节的坚持,到底是从何而来的。欢迎各位设计师小伙伴给你们身边发出类似灵魂拷问的跨职能同事分享这个科普帖;也欢迎刚出新手村的、从事界面设计相关工作的设计师小伙伴们,把它当作入门级界面设计理(下)论(饭)科普来阅读。

    1. 呔!灵魂拷问挑战一!

    对于“界面设计的工作定义”这个问题,我根据自己的理解和体悟,尝试着用更加通俗的方式概括了它的答案:界面设计,不仅仅是埋头把线框图“从无到有、从有到优”地吭哧吭哧画出来就完事儿了,它还包括了解目标用户的特性和需求,了解产品的细节和目标,并根据用户的期望和产品的商业目标,假设出最“两全其美”的方案,并用目标用户能“看得到”“看得懂”“能操作”的界面把这个方案表达出来。对于这个“两全其美”的方案本身,比如有什么功能、流程长什么样子这些问题,相信产品团队的其他角色会贡献一定的想法和决策;而对于让用户能“看得到”“看得懂”“能操作”这个要求,则是界面设计工作中的主要责任和挑战,也是我们花费了大量时间去“纠结”的关键点所在:

    有人肯定要问:但凡是能用智能电子产品看到你这个界面的人,肯定看得到字、认识字、也知道要点哪儿。为什么说“看得到”“看得懂”“能操作”这三点居然是个“挑战点”呢?——其实,“能做到”不一定意味着“做得好”,实际上人类的知觉和行为能力是十分有限的。关于这个论点,我将用一个例子来让大家深切了解(人类)用户的认知局限性。

    请仔细阅读下方的视频截图中,黑底白字的字幕给你“布置”的“观察任务”,之后再点击下下方的视频以开始观看:

    (《The Monkey Business Illusion》 - B 站视频源 点击下方视频直接播放,或复制链接跳转到 B 站观看):

    当视频无法加载时请刷新页面, 或前往PC获得最佳体验。

    默数白衣服的人传了几次球

    看完这个视频,相信大家对于人认知的局限性已经有了一定感悟。然而,和“有限”的用户认知相反的是,在实际的产品规划中,(由于不断更新的商业目标)产品的功能和信息的增量却是“无限”的。这对矛盾意味着,要做到“看得到”“看得懂”“能操作”这三点,团队中的设计角色必须斟酌如何正确引导用户在海量信息中,按我们预期的方式和顺序去浏览和操作:

    而这就是,除了“画界面”——即“把产品经理规划的功能落实在界面中”这个要求之外,界面设计的另一个要求。这也导致了设计师在设计界面的工作中,会反复斟酌一些在跨职能同事眼中显得“无足轻重”的细节了。

    看到这里,各位看官可能会有进一步的疑问:诚然,“引导用户按商业期望并尽量无痛地操作界面”在上述矛盾点的铺垫下,确实显得十分重要。但是,这难道不该跟“界面结构”“文案”这些更直观的要素具有关联性吗?正确的交互引导和设计师纠结来纠结去的界面细节(比如:元素距离、字体大小、图标元素......等),到底有什么因果关系呢?

    用一个不那么恰当的例子做类比:程序员在模拟环境下跑代码之前,虽然没有那么确切的证据能证明这段代码一定能跑通且无 bug,但是他们往往会参考以往的经验和网上的案例,用最保险的逻辑和语法至少先码出一段能跑的代码,让它先运行起来再纠错。那么相似地,设计师设计的界面在上线之前,谁也不能保证这个设计一定能达成设计目标——商业目标及用户体验目标,但起码我们可以参考行业公认的“共性设计规律”,以及通过用户调研、数据分析得来的更有针对性的“个性设计规律”,用最自信的方式先设计出一个达到开发和上线标准的界面:

    而上述所说的“行业公认的共性设计规律”,往往就和那些跨职能容易忽略、但设计师却不停纠结的界面设计细节,息息相关。

    那么,这些“行业公认的设计规律”是什么?决定了怎么样的设计细节?以下我将挑选最基础的一些案例,用跨职能小伙伴们常见的“灵魂拷问”作为开头,结合理论和应用场景,帮助大家更快地感受和理解。

    2. 呔!灵魂拷问挑战二!

    我们来抽象和展开这个问题:为什么我们需要对某些界面模块进行“特别的设计”?需要“特别的设计”的情景是什么?为了回答这个问题,我想首先介绍一个界面设计的基础理论给大家:

    这个理论其实很好理解,无需再深挖背后的心理或生物学原理啥的。不过值得一提的是,这个理论其实不仅运用在界面设计中,在很多其他的艺术或设计创作领域也很常见,我能快速想到的一个(奇怪的)例子就是,喜剧《唐伯虎点秋香》中唐伯虎初遇秋香时,唐伯虎端详了一下秋香的外貌,对身边的祝枝山说“长得也是一般的好看而已嘛”,然后祝枝山意味深长笑了笑、朝着人群大喊:“美女!”,结果所有华府的女佣都转过了头,唐伯虎惊讶地往后一跳,直呼:“哇~秋香果然是国色天香,超凡出尘!”

    如果把唐伯虎想象成目标用户(?),把秋香姐想象成我们想重点推荐的功能(??),要想让秋香姐,啊不是,某个功能对用户而言,是引人注目且过目难忘的,我们需要做出强烈的“对比”来凸显——在界面设计中,这个“对比”可能是颜色、尺寸、形状、留白等样式上的各种不一样:

    让我们再回头看看这个灵魂拷问:诚然,通过“挑选一个合适的展示位置”在现有布局中达到“使模块呈现最好的曝光量、(重复)点击率等表现数据”这个目的是可行的,但是不可否认的是,一个载体界面上最佳的位置是有限的,位置的更改更是对页面其他模块而言会牵一发动全身、对用户而言会产生新的学习成本。一旦我们想尽量维持其他现有功能的布局、或希望除了位置优化之外,穷尽最大所能提升模块的行为表现时,为这些模块做特别的设计优化是必要且合理的。当然,这种“特别的设计优化”中的具体设计细节,也要考虑到此处设计复杂度 v.s.研发周期等“性价比”问题,不能理直气壮一味追求“特别的视觉效果“而掉入“过度设计”的怪圈。

    3. 呔!灵魂拷问挑战三!

    让我来进一步抽象这个问题:对于界面中的文字信息,既然可以利用格式(分行、分段)来区分其类别和从属关系,我们为什么还需要进一步给予文字不同的视觉权重呢?在进一步解释其原因之前,让我们先明白另一个关于信息阅读的“规律”:

    为了更好地理解这句话,让我们将自己代入一个例子来实际体会一下所谓的“通过抓取关键词判断全局内容”是个什么情况,请回答以下问题:

    回想一下,你在以上例子中收集信息的方式是什么样的?是挨个阅读了第一组和第二组中的所有内容并做出了判断?还是跳跃阅读式提取了和“台灯”更相近的关键字并做出了判断?相信大部分人都更偏向于后者,而后者就是我们所说的“通过抓取关键词判断全局内容”。

    记得之前在阅读《社会心理学》这本书的时候,我发现在应用层面上,几乎所有的人类行为动机,其背后都有一个较根源的规律:人脑总是倾向于“简化提取信息“和“分散认知压力”。那么,当我们尝试着用这个心理学现象去反观“信息线索”这一规律时,它似乎变得可以推理和解释了:当我们的界面中堆叠了海量信息和视觉元素时,和我们预想的“用户会按顺序依次获取信息并进行脑内加工”不同,用户下意识会为了简化认知过程、分散认知压力,去跳跃式阅读并“采摘”他们认为的关键信息到大脑的“中央处理器”中,进行进一步加工,以便搞清楚“这个页面是什么?”、“我能否找到我需要的东西?”、“我大概能在哪里通过什么后续交互找到它?”...等问题。不知道大家是否曾看过“F 型阅读顺序”这个用户阅读规律,其实它的底层逻辑也同样是“信息线索”。

    那么让我们回到开头的灵魂拷问:为什么需要给界面上的某些文字进行视觉权重的处理,也就是加黑、加粗、加大、加行距等等?其实答案已经不言而喻了——为了把我们想传递给用户的信息,像喂饭一样“喂”到总是跳跃式阅读、可能会遗漏关键信息的用户的“嘴”中,让他们找到他们想找到的、或者我们想呈现给他们的信息。举两个栗子:

    4. 呔!灵魂拷问挑战四!

    用简单的话来复述这个问题,就是:利用额外的动态控件去传递信息,它的必要性是什么?对于这个问题的答案,让我从一张图片开始,为大家展开阐述。如下图所示,请你尝试盯着图片中心的蓝色圆形,并尝试用余光去辨别距离这个圆形由近及远的物体分别是什么:

    你是否有如下感觉:距离圆形,即我们的视焦点越远的物体,越难以辨别是什么形状?那么请你再尝试盯着下面这张动图的图片中心的圆形,并尝试用余光去辨别最远处那个不停运动的物体是什么:

    对于这张图片,那个动起来的、距离圆形较远的物体,好像没有静态的时候那么模糊了?以上这两个例子,其实都涉及到一个关于人类视觉的普遍规律:

    这个规律实际上和我们眼球构造导致的视觉特性有关,如下图所示:

    人的眼球视觉可分为“主要视觉”和“次要视觉”。其中,“主要视觉”分布在中心区域且范围较小,由“视锥细胞”产生图像,而“视锥细胞”对于光线充足条件下的静态目标的色彩和形状细节都十分敏感,在白昼时是人类主要使用的视觉细胞;“次要视觉”则围绕“主要视觉”分布在其周围且范围较大,由“视杆细胞”产生图像,“视杆细胞”对于亮度和动态十分敏感,是黑夜中在“视锥细胞”失灵时的主要视觉补充方式。

    其实,不仅是人类,很多其他以捕猎为生的哺乳动物的眼球也有同样的视觉特征。“主要视觉”能帮助捕猎者更好获取在视觉中心的猎物的一举一动,“次要视觉”则能帮助捕猎者快速获取周围环境中潜在的危险或捕猎竞争者的动向变化。

    这就解释了为什么当你在光线充足的屏幕上,盯着上面那张静态图片中的圆形时,你的“主要视觉”只能支持你看清视觉焦点范围内的很小一圈的事物,比如距离圆形最近的外星人头像;而对于那些距离圆形较远的形状,则因为落在了“次要视觉”中,而随距离变得越来越模糊。

    那上面这个视觉规律和本环节的灵魂拷问又有着怎样的关系呢?首先我们要明白的一点是,人类只有一双眼睛、一个视觉焦点(动线)。那么,当这唯一的视觉焦点随着我们正在进行的交互,移动到界面中的某个位置时,可能某些比较重要的、距离视觉焦点较远(而坐落在了“次要视觉”区域内)的信息,正在随着交互的进行更新了部分内容,那用户很可能就错过了这个重要信息的更新。那么,设计师能做什么来防止这种情况发生呢?

    根据上文提到的视觉原理,这里应该有两种思路:1. 把关键信息的静态文案,放置在当前交互(视觉)焦点附近 2. 如果 1.的解决方案在当前界面布局规范中不被允许,那么我们可以利用“视杆细胞对动效敏感“的特性,动态展示关键信息。

    最后,让我通过总结上文的内容,来快速回答一下本环节的灵魂拷问:当你想强调的信息和当前的交互(视觉)焦点较远的时候,由于视觉的局限性,我们很难感知到其变化。如果这种“不被用户感知”的概率很大、且其造成的体验或商业后果让人难以接受时,将该信息重复强调在焦点附近、或者用动效引起用户的注意,都是必要且合理的设计手段。

    5. 呔!灵魂拷问挑战五!

    同样,首先让我尝试转译和展开这个问题:在内容能够完整传递信息的情况下,为什么我们还要增加额外的视觉要素?对于这个问题,和前面的环节相同,让我先引入一个和答案有关的设计规律:

    单纯看字面的意思或许有些抽象,为了方便大家理解,同样我将用一个实际的例子来让大家亲身感受一下这个规律。如下图,请分别大声朗读出两个组中的所有词汇,朗读时记得尽量快速并保持正确(想挑战更高难度的小伙伴,也可以尝试朗读每个词汇的字体颜色名称):

    你是否发现自己在识别和朗读第一组内容的时候,速度是快于第二组的?那原因又是什么呢?如果你仔细研究上面两组词汇,就会发现:第一组词汇的字面意思和字体颜色名称是一致的,比如:“粉红色”三个字的字体颜色也是“粉红色”;而第二组的上述两个要素,却是错位的。其实,在这个例子中,(如果你挑战的是朗读词汇本身)字体颜色就是一种“环境刺激物”,当人们对“环境刺激物”和目标识别物本身的信息认知是一致或者相似的时候(正如第一组所展示),就如本规律所说,人的辨识速度会更加快;反之则减慢。接下来,让我再例举一个和界面设计更贴脸的例子,让大家快速感受一下:

    如上图所示的三组提示,你阅读时长最短的是哪一组?你能最正确地 get 到弹框信息的又是哪一组?想必大多数人的答案都是第三组,因为其提示中的文字和辅助刺激物(颜色、图标)传递的信息是一致的,因而能使人们更快更正确 get 到信息。其实这个例子也体现了界面设计中,最常见的“环境刺激物”是什么——比如:颜色、图标、插图......这种视觉类刺激物;其他一些不常见的“环境刺激物”包括了:声音、震动这些和其他四感相关的刺激物(写到这里突然想到windows系统里,当警告框莫名其妙连续弹出时,那一连串的“噔噔噔噔噔”,就算现在回想都能吓到炸毛的程度...):

    当然了,选择“环境刺激物”时也不一定非要挑选被文化或普遍认知刻进我们 DNA 的那些元素,诸如:红色=警示、感叹号=有问题......,它也可以来自特定产品领域、甚至完全来自你的产品本身:通过在交互中的不断重复和保持一致,将新的“刺激物+含义”组合刻进用户的潜意识中。比如,在填写密码/验证码等口令类输入的情境下,弹出框的震动会让人甚至都不用看错误提示,就意识到“填写错误”这个信息。这是因为某些聊天和金融类 APP 已经通过不断应用该“环境刺激物”在相应的场景,来让我们下意识把“震动”和“填写错误”联系起来:

    好的,有点扯远了......让我们回到这个问题。已知人在与界面交互时,注意力是线性的+有信息量上限的,当设计师面临:

    用户正在最重要的任务或者信息流中,且不应该被打断并转移注意力到次要信息线上。但同时,获取该次要信息对于用户后续的操作决策而言,又是必要的; 用户正在主信息流中获取某个信息,但 ta 需要花更少的专注力成本在这个信息上,以便于将注意力“花在刀刃上”。 在这两个情况下,用视觉权重适当的、含义一致的“环境刺激物”去辅助呈现对应的信息模块,是合理且有必要的设计手段。

    这是否给你带来了一些颠覆原来认知的、对界面设计的启示?——有的时候,界面设计上的“多设计”,反而是为了用户“少阅读”。

    6. 呔!灵魂拷问挑战六!

    同样,让我转译一下这个问题:在分割界面信息模块上,多样的空白行、多余的分割线,他们存在的意义是什么?在回答这个问题前,同样让我们从一些由实验结果总结而来的“规律”作为前情铺垫:

    这个规律其实很简单直观,大家可以回想一下自己欣赏各种平面艺术作品时,是否都是按照简单几何形去拆解构图的?或者反过来思考,在阅读过的平面设计构图教程中,是否大多数构图法则也都是以简单几何线/形作为基础的,比如:三角形、圆形、正方形、梯形、对角线、放射线等等...从正反两个方向来看,都有事实印证这个规律的正确性。

    在界面设计中,由于“传递信息”这个关键目的,带来了“布局的复杂度必须较低”的局限,同时也是考虑到技术投入和实现难度等问题,当设计组件或信息模块时,我们通常会采用的形状仅有方形和圆形:

    其中,圆形常用于偏视觉的元素(比如:图标,图标按钮等),我们暂且不展开。接下来,让我们聚焦在常应用于控件或文字模块的“方形”上。这时候就不得不引入一个在界面设计领域,大家最熟悉的理论之一——“格式塔”理论了。这里为了让解释更加好理解一些,让我直接选取一些和本环节问题最相关的两个“子理论”来为大家展开阐述。第一个“子理论”是“邻近性原则”:

    上图其实把这个原则体现得淋漓尽致,我就不再为大家举另外的栗子展开解释了。其实,这个原则就回答了“信息间的空白空间”存在的必要性——你是否还记得前文提到的“信息线索”这个规律?既然人们的界面阅读习惯是“快速扫描”、“跳跃获取信息”,那么,和“文字权重的多样性”类似,“空白空间”往往能让人在扫描信息时,下意识推理出信息结构(即信息的从属、分组关系),从而使得这种“跳跃式获取信息”的行为更加快速和准确。比如:当用户看到一整块被空白分割出来的、较独立的部分时,会下意识去扫描第一行——他们往往会认为那一行是标题。通过这种方式,他们可以了解这个信息模块是关于什么的、有没有仔细阅读的必要......等等关键信息。

    那么,如果“有层次的空白空间”就能在视觉上帮助分割界面的信息层级了,为什么有时候设计师还会应用分割线/框呢?首先需要从另一个“格式塔”的“子理论”——“同域原则”说起:

    这个规律说明了“分割线”也同样能帮助信息分组。并且,在设计实践中,“分割线”这种更为强烈的视觉元素,其分割信息的视觉强度是大于“空白空间”的——这意味着在以下两个情况下,分割线是有存在必要的:

    当在界面中的某层平级元素里,有最最需要重点强调的单个信息组时,需要用分割线/框强调之;  当界面中的某类平级元素,因为内含的子元素太多太杂导致“分无可分”时,需要引入视觉上观感更强烈的分割线/框来强化分组。

    当然,还有其他例外的情况也会使用到分割线/框,它们和视觉分组无关但和交互引导息息相关,比如:“带边框的信息模块”可用于暗示该模块可点击、且点击都指向同一个目的地页面;“一列带框的信息卡片被屏幕边缘隐藏一部分”,能用于暗示该卡片列是可横向滑动的......等等,这些常见的使用场景相信大家都不陌生,就不展开讨论了。

    所以总结并回答一下本环节的问题:“空白”的多样性,能帮助用户在扫视界面时,更快理解界面中的信息的分组关系、子母集关系,从而提升当用户跳跃式阅读界面时,其找关键字的准确性和速度;而分割线/框,作为“空白”的补充手段,既能在视觉上强调单个信息模块,又能帮助在层级过多、元素过杂的情况下,让信息的分组显得更清晰。因此,在信息较多、层级较复杂的界面中,设计师合理地利用多种数值的空白间距、分割线/框,是一种能帮助用户在阅读信息时“大脑减负”的常见方式。

    7. 呔!灵魂拷问挑战七!

    上述问题中提及的,无论是“菜单”还是“筛选”,本质上都是为目标选项池新增属性维度,并按这些维度分别分组,基于此让用户“按组定位”逐渐找到目标选项的一种交互方式。所以,让我们转译一下本环节的问题:和让用户直接阅读选项信息并决策相比,为什么我们需要通过(多层)分组的方式,让用户决策的过程从“一次性选择到目标”到“通过层层筛选、慢慢锁定目标”?它应该被应用在什么情景中?

    因为这个问题解释起来也有些复杂,因此,同样地,让我从人类“决策行为”的剖析开始阐述。人的决策行为,本质上分为“感知”和“思维”两个步骤:先“感知”一个可选项、理解它的内容、并将以上内容“存储”在自己的“短时记忆”中,然后接着“感知”下一可选项并同样存储在“短时记忆”中......然后通过“思维”快速判断自己对每个可选项的主观喜好、客观利弊,最后做出决策。

    从上述的“决策行为”方式中,我们可以看到承上启下的关键点是“把选项储存在'短时记忆'中”。说的有点悬乎,举个通俗的栗子来讲就是:当你上班摸鱼,思考中午吃啥的时候,你得先在脑内回忆一下今天食堂的菜谱有啥,才能基于这个信息纠结一小下下,最后决定吃什么。那可能有人又会问:这“短时记忆”又是什么?为什么选项会被存储在“短时记忆”、而不是其他什么什么的记忆里呢?

    好的,那让我们进一步展开这个话题,来探讨一下“短时记忆”这个概念。让我快速用一张图片来给大家科普一下什么是“短时记忆”,以及它的兄弟“长时记忆”:

    一般,在我们采集到信息中的关键内容后,它会被首先放入“短时记忆”中,只有当我们不断复习(刺激)该信息到某个临界值,它才会被放入“长时记忆”库中,拥有“长时记忆”的特性:

    一个事实是:大多数的选择决策往往都是一次性的。这就决定了它们只会存在在“短时记忆”中,并拥有“短时记忆”的局限性——留存时间短,最关键的是,可留存的信息量少。那到底这个“少”又是多么地“少”呢?这时候就不得不提到继“格式塔原则”之后另一个界面设计中最常被提及的定律——“米勒定律”了:

    那么,基于上面提到的两个关键点(即“记住可选项是决策的关键点”、“能记住的可选项的容量十分有限”),我们可以引出一个和用户决策行为相关的界面设计中的规律——“席克定律”:

    下面我将举一个栗子,让大家感受一下这个规律将如何作用于我们的决策行为中。假设此时你正准备吃中饭,那么请分别在下面 A-C 组的菜谱中决定你想吃的东西。你可以尝试计时,自己从开始阅读菜谱到最后决定吃什么共用了多久:

    体验完上述的栗子后,请试着回想一下:是否从 A 到 C 组的决策时长有个非常明显的增长趋势(如果你有一丢丢选择恐惧症,那么这种增长会更加明显)?这就是“席客定律”想告诉我们的规律。

    那么在设计实操中,如果可选项过多(超过 9 个),且这种决策对用户而言是必要的、不可跳过的,我们怎么减少用户在进行该决策时的思考负荷呢?在本环节的开始,我曾提到过,人类的决策过程分为“感知”和“思维”两个步骤,因此我们的优化方案也可以从分别优化这两个环节入手:

    优化“感知”的处理负荷,即帮助用户剔除非必要的可选项,可用的手段有自动筛选、自动排序,以及手动筛选框、手动排序等功能; 优化“思维”的处理负荷,即将决策的关键因素拆解成不同的维度(组),并将信息多层次地分组放置,形成各种样式的“菜单”,手风琴菜单、下拉菜单、侧边菜单...等等。

    当然,解决措施有意义的前提是想解决的问题是有意义的,因此我们可以逆推,上述 1.和 2.的解决措施的应用场景为:选项库在做决策的当下,只会存在于用户的“短时记忆”中——毕竟正因为如此,才有了决策能力的局限性,才引发了后续问题和解决思路。那么,到底是哪些具体的应用场景符合上述条件呢?我罗列了一下能想到的场景:

    动态变化的选项库,比如:商品搜索结果列表、活跃用户列表、最热门的歌曲列表等等; 非用户定制的、使用频率较低的选项库,比如:工具类软件的某些功能列表,系统设置选项列表等等。

    而一旦选项库是静态的、使用频率较高的、用户定制的,在这种情况下,选项库大概率已经坐落在了“长时记忆”的区间中,所谓“自动脑补”。在这种情况下,设计师可以不用考虑优化决策体验的问题。这时候,设计师使用“菜单”或者“筛选框”等控件的考量,更多应该是基于用户的心智模型、竞品的常规处理方式、它本身或其他同界面入口的曝光量影响等问题了。

    二、灵魂的拷问?灵性的应答! 虽然,贯穿本文的始终是一个个“规律”和“理论”,但引用这些“规律”“理论”的本意是为了佐证本文中各种观点的合理性(毕竟“理论”和“规律”都是多次实际实验后总结出来的、在当前情景下最可能发生、最普适的现象),而非真的让大家在实际解决问题的时候,去咬文嚼字般地用似是而非的语言营造自己的权威感。

    让我们开个脑洞换位思考一下:当你在和程序员交流的时候,他们直接甩出代码开始和你讨论数据结构;当你在和数据分析师交流的时候,他们直接把公式和 XX 定理摆在你面前高谈阔论......在这些情况下,你非但不会觉得他们很专业,反而会一头雾水地当场无语,对吧?推己及人,我建议大家在实际的跨职能沟通中,能够更多以这些“理论”“规律”中较表象、容易理解的信息作为起点,结合实际的问题情景、设计方案去解释和沟通:

    以上就是基于我在实际工作中跨职能小伙伴们常问我的灵魂拷问,深度研究和思考后总结出的一些理论依据和应用方法,希望对你无论是审视自己的设计作品、还是回答跨职能同事的问题,都有参考价值。最后,感谢大家阅读本文,也欢迎各种点赞评论收藏,栓 Q~

    欢迎关注作者的微信公众号:「应谋鬼计」

  • 9种字体盘点!设计师都要懂的汉字发展简史!

    UI交互 2023-01-17
    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。文字不仅具有阅读的固有功能,同时肩负塑造版面视觉风格的审美功能。

    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。

    文字不仅具有阅读的固有功能,同时肩负塑造版面视觉风格的审美功能。在现代设计中常能够看到一些精心设计过的字体,以醒目而个性的形式出现,在进行信息传达的同时也被赋予了视觉个性,成为画面的焦点之一。

    字体是指文字的风格款式,也可以理解为文字的一种图形样式,不同的字体传达出不同的性格特征。

    目前各大字库提供了各种版本、各种类型的字体供设计师使用。正因为字体类型繁多,使得版面设计成了一种很具有挑战的设计工作,设计师必须不断感受与体会,来安排好这些数量有限、潜力无穷的基本元素。

    本期通过汉字的发展简史,分析汉字在各种设计案例中的使用,并为大家推荐视觉效果较好的相关字体。

    更多字体干货:

    超全整理!设计师必备的3类书法字免费资源(附下载链接) 大家好,我是和你们聊设计的花生~ 之前在社群有小伙伴问有没有免费可商用的毛笔书法字体资源,有肯定是有的,但授人以鱼不如授人以渔,今天除了为大家推荐免费好用的书法字体,还会为分享给大家优质的书法字入门知识和教程,还有免费的资源网站,让你即使没有书法功底也有办法做出好看的书法字体 ~ 往

    阅读文章 >

    一、甲骨文 甲骨文是我国最早形成体系的文字形式,字形优美,变化丰富,甲骨文处于图像化符号和系统化文字的过渡期,强调物体的特征和对自然的模拟。

    应用案例:

    目前古文字已失去了信息传播的实用性价值,但也为设计师们打开了更为广阔的文字应用空间。在现代设计中更多是作为图形使用,应用于体现古老历史文明的特定内容中。

    1. 汉仪陈体甲骨文

    以甲骨文书法艺术为基础,融入了现代设计思维,赋予了这种古老文字强烈的时代气息,用“新”的方式再现出甲骨文文化。

    二、金文 金文即铸造在殷商与周朝青铜器上的铭文,又叫钟鼎文。多为象形字以及由象形字合成的会意字,优美的文字像一幅幅图画,生动逼真。

    以战国时期中山国所出土方壶上金文为发想,取其线条的韵律感,保留重心偏高的特点,重组字体写法,创造出古为今用的现代金文,整体予人端庄优雅的形象。

    以西周〈大盂鼎〉金文为基础,结合青铜铭文、甲骨文实物,转译为易于识别的文字造型,并保留象形文字的图像趣味。

    三、大篆 广义的大篆包括甲骨文、金文和六国文字。狭义的大篆指籀文,以周宣王时的太史籀所书而得名。

    石鼓文为大篆的代表。字体结构整齐,笔画匀圆,形体趋于方正。逐渐摆脱象形的拘束,奠定了方块字的基础。

    以大篆为原型制作的一款字体,字形浑厚,方圆兼备,笔势婉转通畅,优雅古朴。

    四、小篆 由于战国时期各国的文字非常混乱,大大影响经济生产的发展以及文化教育的传播。因此,秦始皇在统一六国后,进行了具有历史意义的改革“书同文”,即统一文字。

    李斯以秦国文字大篆作为基础,去繁就简,同时吸收民间字体中的一些简体、俗体字的优点,进行规范,形成了一种新的字体——小篆。

    应用案例:

    小篆几乎完全脱离了象形文字,形体偏长,圆润整齐,成为十分美观的方块字体,有庄重肃穆、典雅堂皇之气,特别能营造传统古文字的典雅韵味。

    1. 华康新篆体

    设计师将传统篆书较难识别的部份略加修改,成为一般人也能看懂的“新篆体”。圆润均匀的线条,圆转的曲线笔势与颀长的字体结构,呈现出篆书独特的风格,

    五、隶书 由于人们对信息传播的质量、速度有了更高的要求,小篆就逐渐演变成为笔画简化、更适合书写的隶书。

    隶书的出现,是书法史乃至文字史上的一次重大变革。初步形成了构成汉字基本要素的点、横、竖、撇、捺、提、钩、折的笔画特点。隶书书写效果略微宽扁,横画长而直画短,轻重顿挫富有变化,讲究“蚕头燕尾”、“一波三折”,极具艺术欣赏的价值。

    应用案例:

    隶书字形平整、质朴、雄劲,气度十分典雅,艺术感染力极强,现代设计中常常用来作为版面的标题。

    六、魏碑 魏碑体是北魏时期产生的一种介于汉晋隶书和唐楷之间的新书体,又称为龙门体。魏碑体端正大方,质朴厚重,刚劲有力,笔画如同斩钉截铁一般充满气势。

    七、草书 为了书写快捷和书者为了抒发自己的胸臆,产生了一种在隶书基础上演变而来,笔画连带,一气呵成,极富张力和艺术感染力的字体——草书。

    草书发展可分为带有隶书笔意,有章法可循的章草,进一步到不拘泥章法的今草,再到奔放不羁、气势万千的狂草三大阶段。

    应用案例:

    草书笔画连绵、自由、奔放、洒脱和率性,便于直接抒发书写者的思想情感。但因其识别性和易读性较低,一般作为标题或装饰元素使用,运用在浪漫情怀、充满动感的版面中。

    1. 钟齐柳江毛草

    字形潇洒飘逸,笔画连绵,行云流水,古朴优美,个性鲜明。

    Tips:如果安装后找不到字体,请搜索其名称「Liu Jian Mao Cao」

    八、楷书 楷书盛行于唐朝时期,楷书同时吸取了篆书圆转笔画,也保留了隶书的方正平直。笔画挺秀均匀,字形端正,使汉字的结构大体的固定了下来。后人因为以这种字体作为学习书法的楷模,即称之为——楷书。

    应用案例:

    楷书字形端正、挺秀均匀、富有韵味,给人以传统、古朴和高雅感。楷体识别性和易读性较好,无论是标题用字或正文排版都可以胜任。

    1. 方正楷体(免费商用)

    形体方正,结构整齐,将章法严谨的楷书化作现代字体,整体清晰度佳、辨识度高,适用于一般内文、教科书、公文、告示等。

    九、行书 行书没有楷书那样规范严肃,也没有草书那样奔放和难以识别,而是书写流畅,用笔灵活,字体如行云流水、婉约妍美、潇洒流畅,而且易识性强,时至今日,行书依然是最为使用和应用最广泛的字体之一。

    应用案例:

    行书与现代手写体相近似,笔画流畅飘逸,商业设计中常用于潇洒随兴的视觉效果,能营造出充满人文气息与浪漫的氛围。

    1. 禹卫书法行书

    笔法柔顺,飘逸有型,潇洒如风,是一个很有美感的书法字体。

    2. 钟齐志莽行书(免费商用)

    运笔灵动快捷,不像草书那么疯狂抽象,却也有着笔走龙蛇之感。

    Tips:安装后找不到字体,请搜索其名称「Zhi Mang Xing」。

    以上列举的各种字体,均是以不同时代书体为基础,进行规范化设计而成,在 字体设计 师的努力下,最大限度的保留了原字体的精神风貌、笔画造型特点、字形结构比例和审美特征等。

    文中展示字体只作为案例分析,版权归原作者所有,如需商用请购买正版字体。

    至此,书法界的主流书体都已经登上了历史舞台,最重要的书写介质——“纸张”开始普遍为人们使用,此后的汉字史,可以看作一场精彩又漫长的墨与纸的切磋。下期见!

    欢迎关注作者的微信公众号:「艺海拾贝Design」

  • 产品设计中如何正确运用标点符号?5个章节帮你掌握!

    UI交互 2023-01-16
    一、前言标点符号,是辅助文字记录语言的符号,是书面语的有机组成部分,在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质,帮助使用者有效表达思想感情和理解语境。然而,在日常的产品设计中,笔者经常会被问到这样的问题:Toast 里需要加句号吗?中文与英文混排时要不要加空格?

    一、前言 标点符号 ,是辅助文字记录语言的符号,是书面语的有机组成部分,在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质,帮助使用者有效表达思想感情和理解语境。然而,在日常的 产品设计 中,笔者经常会被问到这样的问题:

    Toast 里需要加句号吗? 中文与英文混排时要不要加空格? 产品文案中可以加感叹号吗? 作为一名爱“咬文嚼字”的 设计师 ,笔者结合平时工作中的实际经验,总结了产品设计中常用的标点符号用法,希望能够抛砖引玉,与之共勉。

    更多干货:

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

    阅读文章 >

    二、常用标点类型 常用的标点符号共 16 种,分为点号和标号两大类。点号主要用于说话时的停顿和语气,包含句内点号和句末点号,句内点号用于语句内部,包含逗号、顿号、分号、冒号四种。句末点号用于语句末尾,包含句号、问号、叹号 3 种。标号用于表达书面语言里词语的性质或作用,包含引号、括号、破折号、省略号、着重号、连接号、间隔号、书名号和专名号。需要特别指出的是,数学符号、货币符号、校勘符号、辞书符号、注音符号等特殊领域的专门符号不属于标点符号的范畴。

    三、产品设计中常用标点用法 1. 问号

    问号是句末点号的一种,主要表示句子的疑问语气,表达形式为“?”。

    用法:

    问号可以在所有问句(疑问句、设问句、反问句等)中使用,适用于所有类型的文本。如对话框、popover 中的询问类语句,句尾需添加问号。

    2. 句号

    句号是句末点号的一种,是使用频率较高的一种标点,主要表示句子的陈述语气,在中文中的形式为“。”,在英文中形式为“.”。

    用法:

    ① 对于文本信息量较大的段落型文本(如协议条款、使用需知、免责声明等),句末需添加句号。

    ② 当句末为文字链接时,需在文字链前添加句号,句末无需添加句号。

    ③ 为高效帮助用户阅读文本内容,增加易读性,以下场景句末无需使用句号。

    输入框下的报错提示 输入框内暗提示 表格中的文本 轻提示 按钮 标签 标题/副标题

    3. 叹号

    叹号属于句末点号的一种,主要表示句子的感叹语气,表现形式为“!”。在日常生活的聊天中,你可能习惯在句末添加多个叹号表达强烈语气,但实际上,叹号的数量是有明确使用规范的,国家制定的《标点符号用法》里指出:

    “表示声音巨大或声音不断加大时,可叠用叹号;表达强烈语气时,也可叠用叹号,最多叠用三个叹号。在没有异常强烈的情感表达需要时不宜叠用叹号。”

    以 B 端产品为例,系统应保持平等友善的语气,而叹号具有强烈的感情色彩,易给用户造成紧张恐慌的情绪,因此需谨慎使用。

    4. 连接号

    连接号是标号的一种,标示某些相关联成分之间的连接,表示连接、起止、流程、指向的符号,有短横线“-”(占半个字的长度)、一字线“—”(占一个字的长度)、波浪线“~”(占一个字的长度)三种形式,这三种也是经常会被混淆的标点。

    用法:

    ① 短横线“-”:常用于连接号码,包括门牌号码、电话号码,以及用阿拉伯数字表示年月日等。

    示例:2011-02-15

    ② 一字线“—”:常用于标示相关项目(如时间、地域等)的起止。

    示例 1:沈括(1031—1095),宋朝人。

    示例 2:2011 年 2 月 3 日—10日

    示例 3:北京—上海特别快车

    ③ 波浪线“~”:标示数值范围(由阿拉伯数字或汉字数字构成)的起止。

    示例:400~500 件、5%~10%

    除此之外,在 B 端产品设计中,应避免在句末使用波浪线“~”,防止给用户带来随意、口语化的感觉。

    5. 括号

    括号属于标号的一种,标示语段中的注释内容、补充说明或其他特定意义的语句。主要形式有圆括号“( )”、方括号“[ ]”、六角括号“〔 〕”和方头括号“【 】”等。

    用法:

    除科技书刊中的数学、逻辑公式外,括号(特别是同一形式的括号)应尽量避免套用。必须套用括号时,宜采用不同的括号形式配合使用。

    四、「看不见」的符号-空格 1. 中文与数字之间需要加空格

    2. 中文与英文之间需要加空格

    3. 英文与阿拉伯数字之间需要加空格

    4. 数字与单位之间无需添加空格

    5. 其他

    对于专有名词中如不含空格,需遵守官方使用格式,无需使用空格。

    五、标点符号的「避头尾」原则 做过平面设计的同学都应该听说过标点符号的「避头尾」原则,即点号不能出现在一行的开头,标号的前半部分不能出现在行尾,而后半部分不能出现在行首,连接号、间隔号也不能出现在行首,分隔号无论首尾都不能出现。

    其实避头尾的核心解决思路总结起来就是两点「推入」和「推出」,你可以将处于错误位置的标点挤在上一行的尾部,这就是我们经常说的「推入」,还可以将文字放到下一行的头部,也就是「推出」。

    六、写在最后 以上总结的是几类常用的标点用法,但实际工作中用到的标点类型还有很多,如果你对它们的用法感兴趣,建议阅读我们国家制定的《标点符号用法》( http://www.moe.gov.cn/ewebeditor/uploadfile )。也许,你会产生疑问,规范是必须遵守的吗?笔者的观点是,如果是日常生活中,你大可根据自己的喜好使用标点(如私人的聊天场景),但是从产品设计的角度来说,合理使用标点是为了让使用者对于内容能更具有可读性,也能更容易理解产品的语境。明确了这个目标才能让我们更好地为使用者服务。

    参考

    标点符号用法 http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf 设计师与标点符号 https://www.bilibili.com/video/BV1AX4y1u7Ag/ 中文文案排版指南 https://github.com/mzlogin/chinese-copywriting-guidelines

  • 13个产品细节总结,看看大厂是如何让你多线操作的!

    UI交互 2023-01-16
    时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速,很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法,以及其对应的优秀案例:分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。

    时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速,很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在 交互设计 中帮助用户「同时做几件事」的设计方法,以及其对应的优秀案例:

    分割屏幕的布局 更容易再续操作 忽略非重要操作 希望会为你带来更多的设计灵感。

    往期回顾:

    17个优秀设计案例,帮你快速了解情感化设计 情感化设计,由唐纳德·诺曼在 《情感化设计》 一书中完整提出,书中其由浅入深的将情感化设计分成了三个层次:本能层、行为层、反思层。

    阅读文章 >

    一、分割屏幕的布局 通过将屏幕的布局进行分割处理,可同时呈现多项内容,让用户自由选择任务主次,同时处理多项任务。分屏设计很常见,但其中的体验细节却依旧值得研究和优化。

    案例 1 微信在 Pad 端的分屏布局考虑得很周到,看微信视频时支持分屏功能,还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸,体验顺畅,看视频、接微信两不误:

    案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放,不仅可以在 App 内或外呈现小窗模式,正在播的视频,在被临时打断退出视频后,还可以用音频的方式继续播放:

    案例 3 微信的新功能,在你阅读文章时依旧能看到朋友发来的微信消息,可以直接在当前页面回复消息,避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”,一会儿再做处理:

    案例 4 微信视频号改版后,点击视频号下方的博主名称和头像,下方弹窗会弹出该博主的主页和其他视频,而当前正在播放的视频会渐渐呈现小屏播放,视频内容不会被遮挡,既不影响观看,也不影响用户探索该博主的其他视频内容:

    案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频,既可以听内容,也不影响你继续浏览订阅号的其他内容:

    二、更容易再续操作 产品可以让操作更容易被用户管理和掌控,在被打断后很容易被用户重新再续,给用户足够的掌控感。在一些特殊情况下,几件事可以交替、穿插地处理,同时进行。

    案例 1 钉钉的移动端浮窗功能,向右滑动退出正在操作的页面时,就会出现添加浮窗区域,用于收录未做完的操作。同时显示出已添加浮窗的内容数量,最多添加 5 个:

    案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容,在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章,可以更合理地掌控阅读节奏:

    案例 3 微信读书 App 会在你跳读到其他章节时,在页面下方显示“返回原进度”的按钮,方便你在跳读后回来继续阅读:

    案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件,页面上方会增加一个类似浏览器标签页的 Tab,你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时,同时又收到了其他的新邮件,去查看新邮件之后,可以通过 Tab 直接回到邮件编辑页面,继续编写刚才的邮件:

    案例 5 使用钉钉发起会议邀请,如果中途退出,系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示,帮你续写内容:

    三、忽略非重要操作 用户可以选择忽略或隐藏并不重要的、正在进程中的任务,将更多的时间用在其他事情而非无法控制的等待上。

    案例 1 iOS 系统中,当你在不同 App 之间传递文件时,如果文件过大,弹窗的“取消”按钮会在几秒钟之后变成“隐藏”,用户点击后可以继续做其他操作,并不妨碍后台的文件传输。

    案例 2 微信在接收超大文件时,增加了“发送给朋友”的选项,你不必等待文件在自己这边下载完成后再发送,可以直接发送源文件给对方,同时下载:

    案例 3 微信拨打语音的界面,在等待好友接听的过程中,你可以看到对方朋友圈的动态,缓解无聊的等待,也为即将进行的语音聊天提供了话题:

    欢迎关注作者微信公众号:「长弓小子」

  • 产品设计中如何正确运用标点符号?5个章节帮你掌握!

    UI交互 2023-01-16
    一、前言标点符号,是辅助文字记录语言的符号,是书面语的有机组成部分,在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质,帮助使用者有效表达思想感情和理解语境。然而,在日常的产品设计中,笔者经常会被问到这样的问题:Toast 里需要加句号吗?中文与英文混排时要不要加空格?

    一、前言 标点符号 ,是辅助文字记录语言的符号,是书面语的有机组成部分,在产品设计中使用合适的标点可以表达语句的停顿、语气及词语的特定性质,帮助使用者有效表达思想感情和理解语境。然而,在日常的 产品设计 中,笔者经常会被问到这样的问题:

    Toast 里需要加句号吗? 中文与英文混排时要不要加空格? 产品文案中可以加感叹号吗? 作为一名爱“咬文嚼字”的 设计师 ,笔者结合平时工作中的实际经验,总结了产品设计中常用的标点符号用法,希望能够抛砖引玉,与之共勉。

    更多干货:

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

    阅读文章 >

    二、常用标点类型 常用的标点符号共 16 种,分为点号和标号两大类。点号主要用于说话时的停顿和语气,包含句内点号和句末点号,句内点号用于语句内部,包含逗号、顿号、分号、冒号四种。句末点号用于语句末尾,包含句号、问号、叹号 3 种。标号用于表达书面语言里词语的性质或作用,包含引号、括号、破折号、省略号、着重号、连接号、间隔号、书名号和专名号。需要特别指出的是,数学符号、货币符号、校勘符号、辞书符号、注音符号等特殊领域的专门符号不属于标点符号的范畴。

    三、产品设计中常用标点用法 1. 问号

    问号是句末点号的一种,主要表示句子的疑问语气,表达形式为“?”。

    用法:

    问号可以在所有问句(疑问句、设问句、反问句等)中使用,适用于所有类型的文本。如对话框、popover 中的询问类语句,句尾需添加问号。

    2. 句号

    句号是句末点号的一种,是使用频率较高的一种标点,主要表示句子的陈述语气,在中文中的形式为“。”,在英文中形式为“.”。

    用法:

    ① 对于文本信息量较大的段落型文本(如协议条款、使用需知、免责声明等),句末需添加句号。

    ② 当句末为文字链接时,需在文字链前添加句号,句末无需添加句号。

    ③ 为高效帮助用户阅读文本内容,增加易读性,以下场景句末无需使用句号。

    输入框下的报错提示 输入框内暗提示 表格中的文本 轻提示 按钮 标签 标题/副标题

    3. 叹号

    叹号属于句末点号的一种,主要表示句子的感叹语气,表现形式为“!”。在日常生活的聊天中,你可能习惯在句末添加多个叹号表达强烈语气,但实际上,叹号的数量是有明确使用规范的,国家制定的《标点符号用法》里指出:

    “表示声音巨大或声音不断加大时,可叠用叹号;表达强烈语气时,也可叠用叹号,最多叠用三个叹号。在没有异常强烈的情感表达需要时不宜叠用叹号。”

    以 B 端产品为例,系统应保持平等友善的语气,而叹号具有强烈的感情色彩,易给用户造成紧张恐慌的情绪,因此需谨慎使用。

    4. 连接号

    连接号是标号的一种,标示某些相关联成分之间的连接,表示连接、起止、流程、指向的符号,有短横线“-”(占半个字的长度)、一字线“—”(占一个字的长度)、波浪线“~”(占一个字的长度)三种形式,这三种也是经常会被混淆的标点。

    用法:

    ① 短横线“-”:常用于连接号码,包括门牌号码、电话号码,以及用阿拉伯数字表示年月日等。

    示例:2011-02-15

    ② 一字线“—”:常用于标示相关项目(如时间、地域等)的起止。

    示例 1:沈括(1031—1095),宋朝人。

    示例 2:2011 年 2 月 3 日—10日

    示例 3:北京—上海特别快车

    ③ 波浪线“~”:标示数值范围(由阿拉伯数字或汉字数字构成)的起止。

    示例:400~500 件、5%~10%

    除此之外,在 B 端产品设计中,应避免在句末使用波浪线“~”,防止给用户带来随意、口语化的感觉。

    5. 括号

    括号属于标号的一种,标示语段中的注释内容、补充说明或其他特定意义的语句。主要形式有圆括号“( )”、方括号“[ ]”、六角括号“〔 〕”和方头括号“【 】”等。

    用法:

    除科技书刊中的数学、逻辑公式外,括号(特别是同一形式的括号)应尽量避免套用。必须套用括号时,宜采用不同的括号形式配合使用。

    四、「看不见」的符号-空格 1. 中文与数字之间需要加空格

    2. 中文与英文之间需要加空格

    3. 英文与阿拉伯数字之间需要加空格

    4. 数字与单位之间无需添加空格

    5. 其他

    对于专有名词中如不含空格,需遵守官方使用格式,无需使用空格。

    五、标点符号的「避头尾」原则 做过平面设计的同学都应该听说过标点符号的「避头尾」原则,即点号不能出现在一行的开头,标号的前半部分不能出现在行尾,而后半部分不能出现在行首,连接号、间隔号也不能出现在行首,分隔号无论首尾都不能出现。

    其实避头尾的核心解决思路总结起来就是两点「推入」和「推出」,你可以将处于错误位置的标点挤在上一行的尾部,这就是我们经常说的「推入」,还可以将文字放到下一行的头部,也就是「推出」。

    六、写在最后 以上总结的是几类常用的标点用法,但实际工作中用到的标点类型还有很多,如果你对它们的用法感兴趣,建议阅读我们国家制定的《标点符号用法》( http://www.moe.gov.cn/ewebeditor/uploadfile )。也许,你会产生疑问,规范是必须遵守的吗?笔者的观点是,如果是日常生活中,你大可根据自己的喜好使用标点(如私人的聊天场景),但是从产品设计的角度来说,合理使用标点是为了让使用者对于内容能更具有可读性,也能更容易理解产品的语境。明确了这个目标才能让我们更好地为使用者服务。

    参考

    标点符号用法 http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf 设计师与标点符号 https://www.bilibili.com/video/BV1AX4y1u7Ag/ 中文文案排版指南 https://github.com/mzlogin/chinese-copywriting-guidelines

  • 13个产品细节总结,看看大厂是如何让你多线操作的!

    UI交互 2023-01-16
    时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速,很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在交互设计中帮助用户「同时做几件事」的设计方法,以及其对应的优秀案例:分割屏幕的布局更容易再续操作忽略非重要操作希望会为你带来更多的设计灵感。

    时间对于我们每个人来说都极为重要和珍贵。随着生活节奏的加速,很多产品也都开始注重和考虑对于用户时间的节省和分配。本文重点分享三种在 交互设计 中帮助用户「同时做几件事」的设计方法,以及其对应的优秀案例:

    分割屏幕的布局 更容易再续操作 忽略非重要操作 希望会为你带来更多的设计灵感。

    往期回顾:

    17个优秀设计案例,帮你快速了解情感化设计 情感化设计,由唐纳德·诺曼在 《情感化设计》 一书中完整提出,书中其由浅入深的将情感化设计分成了三个层次:本能层、行为层、反思层。

    阅读文章 >

    一、分割屏幕的布局 通过将屏幕的布局进行分割处理,可同时呈现多项内容,让用户自由选择任务主次,同时处理多项任务。分屏设计很常见,但其中的体验细节却依旧值得研究和优化。

    案例 1 微信在 Pad 端的分屏布局考虑得很周到,看微信视频时支持分屏功能,还能够调整屏幕分割的尺寸比例。最小的分屏尺寸做成了手机尺寸,体验顺畅,看视频、接微信两不误:

    案例 2 bilibili 在移动端的视频通过小窗模式可以不间断播放,不仅可以在 App 内或外呈现小窗模式,正在播的视频,在被临时打断退出视频后,还可以用音频的方式继续播放:

    案例 3 微信的新功能,在你阅读文章时依旧能看到朋友发来的微信消息,可以直接在当前页面回复消息,避免你在看文章时阅读不了微信消息。你还可以将信息“标记未读”,一会儿再做处理:

    案例 4 微信视频号改版后,点击视频号下方的博主名称和头像,下方弹窗会弹出该博主的主页和其他视频,而当前正在播放的视频会渐渐呈现小屏播放,视频内容不会被遮挡,既不影响观看,也不影响用户探索该博主的其他视频内容:

    案例 5 在微信订阅号中展示的视频内容可以通过划到右下角变成小窗播放音频,既可以听内容,也不影响你继续浏览订阅号的其他内容:

    二、更容易再续操作 产品可以让操作更容易被用户管理和掌控,在被打断后很容易被用户重新再续,给用户足够的掌控感。在一些特殊情况下,几件事可以交替、穿插地处理,同时进行。

    案例 1 钉钉的移动端浮窗功能,向右滑动退出正在操作的页面时,就会出现添加浮窗区域,用于收录未做完的操作。同时显示出已添加浮窗的内容数量,最多添加 5 个:

    案例 2 微信的浮窗功能也可以帮助用户更快捷地收录未及时阅读的内容,在打开时还可以定位到上次中断阅读的位置。用户不再需要整块的大量的时间来阅读长篇文章,可以更合理地掌控阅读节奏:

    案例 3 微信读书 App 会在你跳读到其他章节时,在页面下方显示“返回原进度”的按钮,方便你在跳读后回来继续阅读:

    案例 4 网易 163 邮箱侧重于为你呈现工作的多线程。每点开一封邮件,页面上方会增加一个类似浏览器标签页的 Tab,你可以通过它们查看自己的工作和阅读轨迹。当你在写邮件时,同时又收到了其他的新邮件,去查看新邮件之后,可以通过 Tab 直接回到邮件编辑页面,继续编写刚才的邮件:

    案例 5 使用钉钉发起会议邀请,如果中途退出,系统帮助你自动保存。再发起会议邀请时也会给出上次操作的提示,帮你续写内容:

    三、忽略非重要操作 用户可以选择忽略或隐藏并不重要的、正在进程中的任务,将更多的时间用在其他事情而非无法控制的等待上。

    案例 1 iOS 系统中,当你在不同 App 之间传递文件时,如果文件过大,弹窗的“取消”按钮会在几秒钟之后变成“隐藏”,用户点击后可以继续做其他操作,并不妨碍后台的文件传输。

    案例 2 微信在接收超大文件时,增加了“发送给朋友”的选项,你不必等待文件在自己这边下载完成后再发送,可以直接发送源文件给对方,同时下载:

    案例 3 微信拨打语音的界面,在等待好友接听的过程中,你可以看到对方朋友圈的动态,缓解无聊的等待,也为即将进行的语音聊天提供了话题:

    欢迎关注作者微信公众号:「长弓小子」

  • 优设专访WAIO数字艺术工作室:AI辅助创作的IP形象是如何登上春晚舞台的?

    UI交互 2023-01-16
    大家好,这里适合你们聊设计的花生~春节将近,前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”,它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP,形象乖巧可爱,一经发布就受到了很多网友的称赞和喜爱。其实除了“兔圆圆”,今年春晚还以《山海经》《抱朴子》《史记》等典籍中的神...

    大家好,这里适合你们聊设计的花生~

    春节将近,前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”,它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP,形象乖巧可爱,一经发布就受到了很多网友的称赞和喜爱。

    其实除了“兔圆圆”,今年春晚还以《山海经》《抱朴子》《史记》等典籍中的神兽为原型,设计出麒麟、白泽、貔貅等上古神兽形象,届时也会出现在春晚舞台上。而参与此次神兽 IP 设计的就有一家由年轻 AI 数字艺术家组成的数字艺术工作室——WAIO。

    春晚官方公布神兽形象

    WAIO 数字艺术工作室是国内最早成立的 AI 数字工作室之一,由 5 位前沿 AI 人工智能绘画艺术家组成,他们本职为中国传统艺术画师、CG 艺术家、雕塑家、 设计师 、原画师,同时悉知并掌握最新的 AI 绘画工具用法, 合并形成了完整高效的工作流。

    在参与此次设计春晚神兽 IP 形象之前,WAIO 工作室团队已与央视网、知造局、阿里拍卖、小红书、雪佛兰等品牌有过合作,团队成员担任过全球首届 AI 艺术创作大奖赛的特邀评委,多项 AI 艺术作品也在北京、上海、深圳、成都等地巡回展出。

    WAIO 与央视网合作的“梦画 AI”节气插画系列

    WAIO 成员作品在“梦廊坊·沸铜数字艺术展”中展出

    从刷屏互联网到登上春晚的舞台,这些令人称奇的 AI 数字艺术品是如何被设计创作出来的呢? 优设 专访了 WAIO 工作室的 2 位成员 SixOne 和 Theo,我们一起来了解一下这个年轻的 AI 数字艺术工作室和此次神兽 IP 设计背后的故事。

    夏花生:两位好,先简单做一下自我介绍吧~

    SixOne: 大家好我是 SixOne, 大家都叫我 61。毕业于武汉纺织大学纺织与机械工程系, 本职是动画师,同时也是 WAIO 数字艺术工作室的成员。

    Theo: 大家好我是 Theo 没编号,群友给起了个昵称提提。我这边本职工作是 UI 设计,也会做一些平面类的工作。在 WAIO 这边除了正常跑图和设计类工作之外,还会做一些商务对接工作,如果有数字藏品相关涉及到赋能玩法之类的,也能变身狗头军师出谋划策。

    夏花生:WAIO 工作最开始是怎么成立的?

    Theo: WAIO 这个名字来自一个非常搞笑的小猫表情包和 61 老师的口头禅 Waio(哇哦),成立的初衷也挺有意思。我们团队的 5 个成员之前在用 Tiamat,就是国内比较厉害的一个 AI 绘画工具,互相交流的过程中就逐渐熟悉了,有了一个自己的小群。当时正好有一个数字艺术展同时邀请了我们几个,我们就开玩笑说不如直接成立一个“WAIO 犯罪团伙” 一起参展吧,WAIO 的雏形也就有了。

    SixOne 设计的 WAIO 工作室 logo 他们为自己设计的头像

    夏花生:Theo 是什么时候开始接触到 AI 绘画的呢?

    Theo: 最早应该是在去年 4 月份吧。当时是在网上看到 Wombo Dream 的相关信息,就跑去试了试,然后整个人就惊了。虽然说按照现在的 AI 出图的效果来看它出的图不怎么样,但是当时并没有太多的 AI 软件进入我的视野,第一次接触到这种工具后的想法就是“太牛了!”,文字️转图片这本身就是很酷的一件事。Wombo Dream我用的并不多,因为马上Disco Diffusion就来了。正式的 AI绘画 之路其实也是从Disco Diffusion开始的,正儿八经的开始各种找资料,做功课的学习。

    Dream by WOMBO 是最早一批的 AI 图像生成工具,有网页版和移动应用程序。图片来源:https://dream.ai/

    了解热门 AI 绘画工具:

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

    阅读文章 >

    夏花生:我有翻看你们在小红书上发布的 AI 作品,很明显的一个感受就是 AI 图像的生成质量越来越高了,可以分享一下学习进步的经验吗?

    Theo: 我自己的学习过程可以分两个阶段。 最开始是 Disco Diffusion 时代,同期还接触到国内的 Tiamat,基本学习方法是一致的,就是解决 Prompt(关键词)这个壁垒。会经常找参考资料,看看输入后会有什么样的神奇结果,在这个过程中逐渐积累经验,比如不同艺术家对应的风格、镜头语言的不同构图、不同渲染模式的出图效果等等。当时还跟 61 老师一起搞了个共享文档,收集记录好的 Prompt 然后拆分研究。但当时 Disco Diffusion 的出图时间真的一言难尽,每次尝试都经过漫长的等待,整个学习是痛并快乐着的。

    Theo 的 AI 作品

    然后 Midjourney 时代来了,也带来了 Discord 交流社区。Prompt(关键词)已经不能算是壁垒了,国内的一些 AI 绘图工具甚至可以直接选相应的关键词出图,此时更需要能对画面主体做精细的描述。AI 工具的操作也越来越便捷 ,用户体验逐渐拉满,当然如果想出一些与大流不一样的图,Prompt 还是要自己整理修改的。到这个时候 AI 绘画的学习成本可以说大大降低了,B 站等各种社交媒体都有教程,AI 绘图工具本身的社区也是一个很好的学习的地方 ,研究大佬的描述是件很有意思的事。

    Midjourney 的 Discord 社区界面截图。Discord 是现在很多 AI 绘图工具都使用的交流社区,上面汇集了世界各地用户的作品、讨论和经验分享。

    夏花生:Theo 你本身就是设计师,也尝试过将 AI 绘图与 Blender 这样的 3D 软件结合起来,那你觉得 AI 绘图工具可以在哪些方面给设计师作带来帮助?

    Theo: 我有关注的一个 Blender 大佬 Lan Hubert,他会教很多偷懒小技巧,比如用照片建模、照片贴图什么的,照片这部分完全素材可以用 AI 生成。还有就是 AI 出图是很好的概念设计辅助手段,我见过有大佬用 AI 跑出一个兔子形象,然后在 Blender 建模出来还绑了动画,效果太香了。有概念设计师会起个草图,用垫图的方式让 AI 快速迭代的各种概念设计图,我觉得这事用在初期方案审核上是个很好的思路。此类的应用其实还有好多,在 Discord 社区里有好多账号只跑一个领域的图, 比如服装、鞋子、珠宝首饰之类,可以带来丰富的设计灵感。

    WAIO 与雪佛兰合作的长图

    夏花生:听说这次的 WAIO 参与设计的神兽也会登上春晚舞台,可以分享一下背后的设计过程吗?

    SixOne: 这次的山海经神兽 IP 形象设计是有一个专门的团队负责的,WAIO 在其中负责一定部分的工作。前期的神兽形象是由陈漫老师指导,我的神兽灵感来自于陈漫老师的国画,然后北大陈连山教授也给了我每只神兽具体的山海经文献参考。

    夏花生:所以这次神兽的设计过程中 AI 只是起了辅助性的作用,快速将不同方面的意见呈现出来作为参考?实际的设计绘制都是专业人员亲自创作出来?

    SixOne: 是的

    夏花生: 这次和春晚的合作的感觉什么样,有没有疯狂改稿?

    SixOne: 此次和春晚的合作很顺利,大家都很认可神兽的形象,由于是自己的作品,改稿也是心甘情愿的,我们都希望中国能做出自己民族文化的 IP,能在孩子们心里多弘扬中国的文化,让更多人喜欢。然后一开始的有一版是有五只神兽,对应的五行属性。但是教授说山海经里没有对应这种说法,这版构思就被舍弃了,感觉设计团队的每个人对创作的要求都是很严格的。

    夏花生:两位现在对 AI 绘画领域比较熟悉了,觉得国外和国内在 AI 绘画工具的发展以及创作环境中有什么不同吗?

    SixOne: 感觉在国内偷摸摸的玩不敢声张,不然容易被人挂图。可能有些人认为自己一笔笔画出来的才叫画画,我其实并不这么觉得。我有一定审美和创作能力,只要不是叠别的画师的图或者什么侵权行为,我借助 AI 工具进行创作,前期出一些意向稿给甲方选定风格和方向,能大大节约时间成本。

    微博上有人说这次的神兽形象一看就 90%都是用 AI 画的,我其实挺开心的,至少他们只是攻击 AI,并没有说神兽丑,说明我设计的形象还是好看的,对吧?再说不管是国内和国外都没有哪个 AI 能很好的画出山海经的神兽形象,说到底人工智能要有了人为的干涉,它才能够智能。

    WAIO 成员 Sixone 的 AI 作品

    Theo: 工具方面的话,我觉得国产自研模型和国风数据库可以跟上国外的规模,做区别出明显区别于国外 AI 的中国风的东西,会是个很好的路子。前段时间中华珍宝馆启动了一个开放数据项目,助力书法 AI 研究,觉得挺好的。

    其实这种开放数据库,并不是像大家想的那样是在给 AI 绘画行方便,官方明确表示 AI 技术还可以用来对画面进行自动化标注,方便大家检索画作,这可以很大程度上减少人工成本。或者用 AI 进行图片清晰度提升,如果能做的好,对出版和自媒体行业将有非常大的价值。

    项目详情: https://mp.weixin.qq.com/s/Oir8Xw6EypFB0laKxWsSjw

    夏花生:说到这里,我想起之前 A 站上有一次集体首页刷屏,是为了反对 AI 不经允许拿图训练模型的行为。现在对 AI 一比较大的争议也是集中在训练集的合法性上,你们对这方面是怎么看的?

    Theo: 不同软件的商业条款不同,作为创作者我只能按照软件的商业条款操作 ,抵制版权问题这事本身我觉得没有问题。我认为应该是 AI 软件方,AI 创作者和画师,这里泛指一下因为版权问题反对 AI 者, 三方联合推动这个行业健康发展,包括相关立法,创作者权益等等。

    科技发展不是一波人出来抵制,或者 AI 创作者说我不用这个软件了,他就停滞不前了 ,发展速度和带来的便利这半年我想大家应该是看的清清楚楚 。共同推进健康发展,而不是抵制技术本身,甚至从道德谴责演变成网暴。

    Unsplash 宣布禁传AI生成图像,人们对AI的反抗要拉开序幕了? 大家好,这里是和你们聊设计的花生~ 9 月 21 日,国外知名大型图库 Getty Images 宣布禁止用户上传和销售使用 AI 模型(包括 DALL-E、Midjourney 和 Stable Diffusion 等)生成的插画,网站内存有的 AI 图像也会被删除。

    阅读文章 >

    夏花生:我也一直有关注 AI 技术的发展,现在 AI 除了在绘画方面发展的应用之外,在生成 3D 模型、生成视频还有智能聊天方面也要不错的发展。如果可以的话,你们希望将来 AI 技术在哪些方面更有进一步更神奇的发展?

    SixOne: 作为动画师我想要让 AI 做动画,不过目前如果 AI 能开发出分图层技术就很厉害了。

    Theo: 我希望目前已经实现的 AI 功能结合一下,比如用 ChatGPT 生成文字脚本,然后 AI 绘画软件直接生成相应的图。其实现在也只是多了一步人工的复制黏贴,但是如果真的能打通这些关节, 同步修改文案到自动修改图片,或者加入局部修改功能,这样工作流的确很吸引人

    夏花生: 的确,如果将现在的 AI 工具整合在一起真的会很方便,感觉未来也很有希望实现。那今天的访问就现在这里啦,感谢两位大佬的回答,也祝 WAIO 未来发展的越来越好~

    了解人工智能聊天工具 ChatGPT:

    地表最强AI聊天机器人ChatGPT诞生!会给设计师带来哪些影响? 大家好,这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型,感叹它图像生成质量之高。

    阅读文章 >

    以上就是本期对 WAIO 数字艺术工作室的专访,看完之后大家对 AI 绘画工具参与设计创作有没有什么新的认识和看法呢?欢迎在评论区分享。对 WAIO 工作室感性去的小伙伴可以关注 SixOne 和 Theo 的小红书,了解更多 AI 绘画信息关于关注优设的 AI 绘画的专题:

    优设「AI 绘画」专题: https://www.uisdc.com/zt/ai-draw

    推荐阅读:

    Runway!AI技术+视频制作的新一代视频内容生成工具 大家好,这里是和你们聊设计的花生~ 之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了设计师的工作效率。

    阅读文章 >

    2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。

    阅读文章 >

  • 优设专访WAIO数字艺术工作室:AI辅助创作的IP形象是如何登上春晚舞台的?

    UI交互 2023-01-16
    大家好,这里适合你们聊设计的花生~春节将近,前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”,它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP,形象乖巧可爱,一经发布就受到了很多网友的称赞和喜爱。其实除了“兔圆圆”,今年春晚还以《山海经》《抱朴子》《史记》等典籍中的神...

    大家好,这里适合你们聊设计的花生~

    春节将近,前不久 2023 年央视春晚公布了兔年的吉祥物“兔圆圆”,它是春晚 40 年历史上首个通过互联网大数据分析完成初始配方原创的总台春晚吉祥物 IP,形象乖巧可爱,一经发布就受到了很多网友的称赞和喜爱。

    其实除了“兔圆圆”,今年春晚还以《山海经》《抱朴子》《史记》等典籍中的神兽为原型,设计出麒麟、白泽、貔貅等上古神兽形象,届时也会出现在春晚舞台上。而参与此次神兽 IP 设计的就有一家由年轻 AI 数字艺术家组成的数字艺术工作室——WAIO。

    春晚官方公布神兽形象

    WAIO 数字艺术工作室是国内最早成立的 AI 数字工作室之一,由 5 位前沿 AI 人工智能绘画艺术家组成,他们本职为中国传统艺术画师、CG 艺术家、雕塑家、 设计师 、原画师,同时悉知并掌握最新的 AI 绘画工具用法, 合并形成了完整高效的工作流。

    在参与此次设计春晚神兽 IP 形象之前,WAIO 工作室团队已与央视网、知造局、阿里拍卖、小红书、雪佛兰等品牌有过合作,团队成员担任过全球首届 AI 艺术创作大奖赛的特邀评委,多项 AI 艺术作品也在北京、上海、深圳、成都等地巡回展出。

    WAIO 与央视网合作的“梦画 AI”节气插画系列

    WAIO 成员作品在“梦廊坊·沸铜数字艺术展”中展出

    从刷屏互联网到登上春晚的舞台,这些令人称奇的 AI 数字艺术品是如何被设计创作出来的呢? 优设 专访了 WAIO 工作室的 2 位成员 SixOne 和 Theo,我们一起来了解一下这个年轻的 AI 数字艺术工作室和此次神兽 IP 设计背后的故事。

    夏花生:两位好,先简单做一下自我介绍吧~

    SixOne: 大家好我是 SixOne, 大家都叫我 61。毕业于武汉纺织大学纺织与机械工程系, 本职是动画师,同时也是 WAIO 数字艺术工作室的成员。

    Theo: 大家好我是 Theo 没编号,群友给起了个昵称提提。我这边本职工作是 UI 设计,也会做一些平面类的工作。在 WAIO 这边除了正常跑图和设计类工作之外,还会做一些商务对接工作,如果有数字藏品相关涉及到赋能玩法之类的,也能变身狗头军师出谋划策。

    夏花生:WAIO 工作最开始是怎么成立的?

    Theo: WAIO 这个名字来自一个非常搞笑的小猫表情包和 61 老师的口头禅 Waio(哇哦),成立的初衷也挺有意思。我们团队的 5 个成员之前在用 Tiamat,就是国内比较厉害的一个 AI 绘画工具,互相交流的过程中就逐渐熟悉了,有了一个自己的小群。当时正好有一个数字艺术展同时邀请了我们几个,我们就开玩笑说不如直接成立一个“WAIO 犯罪团伙” 一起参展吧,WAIO 的雏形也就有了。

    SixOne 设计的 WAIO 工作室 logo 他们为自己设计的头像

    夏花生:Theo 是什么时候开始接触到 AI 绘画的呢?

    Theo: 最早应该是在去年 4 月份吧。当时是在网上看到 Wombo Dream 的相关信息,就跑去试了试,然后整个人就惊了。虽然说按照现在的 AI 出图的效果来看它出的图不怎么样,但是当时并没有太多的 AI 软件进入我的视野,第一次接触到这种工具后的想法就是“太牛了!”,文字️转图片这本身就是很酷的一件事。Wombo Dream我用的并不多,因为马上Disco Diffusion就来了。正式的 AI绘画 之路其实也是从Disco Diffusion开始的,正儿八经的开始各种找资料,做功课的学习。

    Dream by WOMBO 是最早一批的 AI 图像生成工具,有网页版和移动应用程序。图片来源:https://dream.ai/

    了解热门 AI 绘画工具:

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

    阅读文章 >

    夏花生:我有翻看你们在小红书上发布的 AI 作品,很明显的一个感受就是 AI 图像的生成质量越来越高了,可以分享一下学习进步的经验吗?

    Theo: 我自己的学习过程可以分两个阶段。 最开始是 Disco Diffusion 时代,同期还接触到国内的 Tiamat,基本学习方法是一致的,就是解决 Prompt(关键词)这个壁垒。会经常找参考资料,看看输入后会有什么样的神奇结果,在这个过程中逐渐积累经验,比如不同艺术家对应的风格、镜头语言的不同构图、不同渲染模式的出图效果等等。当时还跟 61 老师一起搞了个共享文档,收集记录好的 Prompt 然后拆分研究。但当时 Disco Diffusion 的出图时间真的一言难尽,每次尝试都经过漫长的等待,整个学习是痛并快乐着的。

    Theo 的 AI 作品

    然后 Midjourney 时代来了,也带来了 Discord 交流社区。Prompt(关键词)已经不能算是壁垒了,国内的一些 AI 绘图工具甚至可以直接选相应的关键词出图,此时更需要能对画面主体做精细的描述。AI 工具的操作也越来越便捷 ,用户体验逐渐拉满,当然如果想出一些与大流不一样的图,Prompt 还是要自己整理修改的。到这个时候 AI 绘画的学习成本可以说大大降低了,B 站等各种社交媒体都有教程,AI 绘图工具本身的社区也是一个很好的学习的地方 ,研究大佬的描述是件很有意思的事。

    Midjourney 的 Discord 社区界面截图。Discord 是现在很多 AI 绘图工具都使用的交流社区,上面汇集了世界各地用户的作品、讨论和经验分享。

    夏花生:Theo 你本身就是设计师,也尝试过将 AI 绘图与 Blender 这样的 3D 软件结合起来,那你觉得 AI 绘图工具可以在哪些方面给设计师作带来帮助?

    Theo: 我有关注的一个 Blender 大佬 Lan Hubert,他会教很多偷懒小技巧,比如用照片建模、照片贴图什么的,照片这部分完全素材可以用 AI 生成。还有就是 AI 出图是很好的概念设计辅助手段,我见过有大佬用 AI 跑出一个兔子形象,然后在 Blender 建模出来还绑了动画,效果太香了。有概念设计师会起个草图,用垫图的方式让 AI 快速迭代的各种概念设计图,我觉得这事用在初期方案审核上是个很好的思路。此类的应用其实还有好多,在 Discord 社区里有好多账号只跑一个领域的图, 比如服装、鞋子、珠宝首饰之类,可以带来丰富的设计灵感。

    WAIO 与雪佛兰合作的长图

    夏花生:听说这次的 WAIO 参与设计的神兽也会登上春晚舞台,可以分享一下背后的设计过程吗?

    SixOne: 这次的山海经神兽 IP 形象设计是有一个专门的团队负责的,WAIO 在其中负责一定部分的工作。前期的神兽形象是由陈漫老师指导,我的神兽灵感来自于陈漫老师的国画,然后北大陈连山教授也给了我每只神兽具体的山海经文献参考。

    夏花生:所以这次神兽的设计过程中 AI 只是起了辅助性的作用,快速将不同方面的意见呈现出来作为参考?实际的设计绘制都是专业人员亲自创作出来?

    SixOne: 是的

    夏花生: 这次和春晚的合作的感觉什么样,有没有疯狂改稿?

    SixOne: 此次和春晚的合作很顺利,大家都很认可神兽的形象,由于是自己的作品,改稿也是心甘情愿的,我们都希望中国能做出自己民族文化的 IP,能在孩子们心里多弘扬中国的文化,让更多人喜欢。然后一开始的有一版是有五只神兽,对应的五行属性。但是教授说山海经里没有对应这种说法,这版构思就被舍弃了,感觉设计团队的每个人对创作的要求都是很严格的。

    夏花生:两位现在对 AI 绘画领域比较熟悉了,觉得国外和国内在 AI 绘画工具的发展以及创作环境中有什么不同吗?

    SixOne: 感觉在国内偷摸摸的玩不敢声张,不然容易被人挂图。可能有些人认为自己一笔笔画出来的才叫画画,我其实并不这么觉得。我有一定审美和创作能力,只要不是叠别的画师的图或者什么侵权行为,我借助 AI 工具进行创作,前期出一些意向稿给甲方选定风格和方向,能大大节约时间成本。

    微博上有人说这次的神兽形象一看就 90%都是用 AI 画的,我其实挺开心的,至少他们只是攻击 AI,并没有说神兽丑,说明我设计的形象还是好看的,对吧?再说不管是国内和国外都没有哪个 AI 能很好的画出山海经的神兽形象,说到底人工智能要有了人为的干涉,它才能够智能。

    WAIO 成员 Sixone 的 AI 作品

    Theo: 工具方面的话,我觉得国产自研模型和国风数据库可以跟上国外的规模,做区别出明显区别于国外 AI 的中国风的东西,会是个很好的路子。前段时间中华珍宝馆启动了一个开放数据项目,助力书法 AI 研究,觉得挺好的。

    其实这种开放数据库,并不是像大家想的那样是在给 AI 绘画行方便,官方明确表示 AI 技术还可以用来对画面进行自动化标注,方便大家检索画作,这可以很大程度上减少人工成本。或者用 AI 进行图片清晰度提升,如果能做的好,对出版和自媒体行业将有非常大的价值。

    项目详情: https://mp.weixin.qq.com/s/Oir8Xw6EypFB0laKxWsSjw

    夏花生:说到这里,我想起之前 A 站上有一次集体首页刷屏,是为了反对 AI 不经允许拿图训练模型的行为。现在对 AI 一比较大的争议也是集中在训练集的合法性上,你们对这方面是怎么看的?

    Theo: 不同软件的商业条款不同,作为创作者我只能按照软件的商业条款操作 ,抵制版权问题这事本身我觉得没有问题。我认为应该是 AI 软件方,AI 创作者和画师,这里泛指一下因为版权问题反对 AI 者, 三方联合推动这个行业健康发展,包括相关立法,创作者权益等等。

    科技发展不是一波人出来抵制,或者 AI 创作者说我不用这个软件了,他就停滞不前了 ,发展速度和带来的便利这半年我想大家应该是看的清清楚楚 。共同推进健康发展,而不是抵制技术本身,甚至从道德谴责演变成网暴。

    Unsplash 宣布禁传AI生成图像,人们对AI的反抗要拉开序幕了? 大家好,这里是和你们聊设计的花生~ 9 月 21 日,国外知名大型图库 Getty Images 宣布禁止用户上传和销售使用 AI 模型(包括 DALL-E、Midjourney 和 Stable Diffusion 等)生成的插画,网站内存有的 AI 图像也会被删除。

    阅读文章 >

    夏花生:我也一直有关注 AI 技术的发展,现在 AI 除了在绘画方面发展的应用之外,在生成 3D 模型、生成视频还有智能聊天方面也要不错的发展。如果可以的话,你们希望将来 AI 技术在哪些方面更有进一步更神奇的发展?

    SixOne: 作为动画师我想要让 AI 做动画,不过目前如果 AI 能开发出分图层技术就很厉害了。

    Theo: 我希望目前已经实现的 AI 功能结合一下,比如用 ChatGPT 生成文字脚本,然后 AI 绘画软件直接生成相应的图。其实现在也只是多了一步人工的复制黏贴,但是如果真的能打通这些关节, 同步修改文案到自动修改图片,或者加入局部修改功能,这样工作流的确很吸引人

    夏花生: 的确,如果将现在的 AI 工具整合在一起真的会很方便,感觉未来也很有希望实现。那今天的访问就现在这里啦,感谢两位大佬的回答,也祝 WAIO 未来发展的越来越好~

    了解人工智能聊天工具 ChatGPT:

    地表最强AI聊天机器人ChatGPT诞生!会给设计师带来哪些影响? 大家好,这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型,感叹它图像生成质量之高。

    阅读文章 >

    以上就是本期对 WAIO 数字艺术工作室的专访,看完之后大家对 AI 绘画工具参与设计创作有没有什么新的认识和看法呢?欢迎在评论区分享。对 WAIO 工作室感性去的小伙伴可以关注 SixOne 和 Theo 的小红书,了解更多 AI 绘画信息关于关注优设的 AI 绘画的专题:

    优设「AI 绘画」专题: https://www.uisdc.com/zt/ai-draw

    推荐阅读:

    Runway!AI技术+视频制作的新一代视频内容生成工具 大家好,这里是和你们聊设计的花生~ 之前和大家聊过不少 AI 图像生成工具,有的可以根据文本生成图像,有的则是将 AI 技术运用到图像处理中,让扣除背景、消除画面元素成为非常轻松快速的事情,大大提升了设计师的工作效率。

    阅读文章 >

    2023年,让这20款AI工具帮你更高效地完成工作~ 2023年,让这20款AI工具帮你更高效的完成工作~ 大家好,这里是和你们聊设计的花生~ 2022年是AI技术大发展的一年,我都快记不清为大家推荐多少种AI工具了。

    阅读文章 >


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