澳纽网

优设 - 澳纽网Ausnz.net聚合阅读



平面高手是如何用好重复原则的?

在很多人眼里,重复代表着枯燥、乏味,很多人对于重复的理解是复制、拷贝。延展到设计中也是如此,认为重复代表简单、不专业;其实在设计中重复的手法随处可见,只不过很多人给重复的定义太过片面化,这期就和大家一起探讨下如何在设计运用好重复的手法,这也许能解决很多人所说的页面版式太乱的问题!

往期回顾:

重复的定义

设计中的重复并非所谓的复制、拷贝,如果一定要给重复下个定义的话我认为可以简单的叫做「有律可循」,也就是作品整体或某些元素存在着某种规律性,而不是肆意妄为安排元素,而重复的方式也可以有很多种,比如:排版的重复、色彩的重复、元素的重复、留白空间的重复、空间位置的重复、几何图形的重复、形式感的重复等等,那么重复能为我们的作品带来哪些效果呢?

重复是为了统一

重复是体现作品整体感的手法之一,重复可以让作品不管是整体还是局部内容都表现得更加鲜明,重复给人的感觉是统一的、整体的、相互关联的,举个简单的例子:

对比着看,右侧给人的感觉是杂乱无章、各自为营,并不能体现其整体性;而左侧给人的感觉则是干净整洁、舒适统一、整体性很强;这里的重复用到的是排版方式以及留白空间的重复;但是很多时候我们见到的作品并非这么整齐划一,如果页面完全按照某一种特定的形式,那么这就属于重复的过度,带给用户的也并非是更强的整体性,而是视觉上的疲劳,这时我们就要在重复中去寻找变化,比如:

在重复中寻找变化,而整体性并没有因此被破坏,如果继续让大家往下接着排,左侧和右侧你知道如何接下去吗?在设计中,重复手法运用得更加广泛,比如:

很明显右侧的整体性更强,画面更加统一;左侧作品之所以呈现出来杂乱的感觉是因为画面整体能够将视觉统一的元素点太少,不能在视觉上形成统一,所以显得杂而乱;而右侧作品则是在英文字体处理手法上采用了比较一致的形式,在视觉上形成了重复性的统一,而在重复的同时,一样存在着变化,这样的目的在于强调整体也兼顾了画面的活跃性;下面继续看案例:

和上面的案例有异曲同工之妙,动物头像的处理方式以及眼睛加箭头的图标是画面更具整体性最直观的重复性元素,重复也使得右侧画面更加简洁美观,这也是重复手法的运用方式之一;再看几个案例,共同分析一下:

这些海报中都用到了重复的手法,重复能把整体画面简洁化、更具整体性;重复性的元素是通过视觉关联的形式使得画面更加统一、简洁、有律可循,而现实中人们对于有律可循的事物也不会排斥,反而更易于接受!也有很多人做的页面元素随处乱放,毫无规律可言,导致画面整体感觉太乱,那么重复的手法就能很好的解决这个问题,将元素规整,做到有律可循,而不是机械式的只会重复,要在重复中找变化,这样能使得页面整体简洁又大气,也利于视觉的传达。

重复强调的作用

重复能起到强调的作用这个更好理解,在日常生活中的我们出远门时,总是能听到亲人们千叮咛万嘱咐的「注意安全」,也许会说 N 多遍,这里的重复就是强调的作用;而在这设计中重复亦是如此,比如:

不断重复出现的元素、信息就起到了很好的强调作用,目的是告诉用户画面的主体是正在重复的内容,通过重复手法也能提升画面整体的视觉冲击力,给予用户的视觉感受也更加强烈,形成的印象也更深刻;再看几个案例:

不管是产品还是人物的重复式出现,都能起到很好的强调作用;而在重复的同时又存在一种变化,使得画面不那么呆板。

重复能增强美感

其实有规律的重复本身就具有美感,比如一些海报:

也有很多 LOGO 设计也会用到重复的手法,比如:360、阿迪达斯、华为等等,通过重复使得 LOGO 本身更具有美学感受。

重复存在的误区

重复的手法会给人带来一定的误区,误区一:大面积机械式的重复,也就是前面所说重复而不会找变化,很多时候重复需要一定的变化打破呆板,而大面积机械式的重复会使得用户视觉疲劳,而并不能起到很好的强调、统一的作用,一定要切记重复是要做到有律可循;误区二:重复手法单一,文章开始就强调了重复的表现形式有很多种,例如:留白、排版、色彩、形状等等,很多时候一个画面会用到多种的重复形式,一定要灵活运用。

案例

随便找的文案,要求:用重复的手法做张海报,尽量「花哨」且不会看起来很凌乱,那么拿到文案后,先把文案放好:

通过简单的文案排版,不找配图,打算把四处英文作为配图,现在看起来画面整体太过单薄,很明显四处英文是以重复的形式摆放的,那么接下来如果要给英文做效果,这四处就一定要做到统一:

给四处英文做了效果且保持形式感的统一,现在的大英文并不是文案而是配图,下面要做的就是把主要文案排好,增加画面整体的饱满度。

每处英文旁边都加了一些小文案,且每处文案的排版方式保持重复式的结构,包括四处英文同样是重复的形式,画面整体给人整体感觉并不会因为几处英文的叠加处理而感觉乱。

总结

页面并不会因为重复式的手法而枯燥乏味,反而会让画面更整体化,重复式在页面中也能起到视觉串联的作用;一定要学会在重复中寻找特定的变化,这样既能保证画面整体简洁,又不会显得整体过于呆板。

欢迎关注作者的微信公众号:「美工美邦」

Source: 优设网 – UISDC | 14 Apr 2020 | 4:22 am(NZT)

iOS 人机界面指南精简版笔记之界面元素:Views(上)

iOS 基本界面元素包括三大类,分别是 Bars(栏)、Views(视图)、Controls(控件)。上一篇文章分享了 Bars(栏),今天给大家分享 Views(视图)部分。

往期回顾:

值得注意的是,Views 中的 Alerts、Action Sheets、Activity Views 都属于模态视图(Popovers 比较特殊,可以是模态或者非模态的)。今天我们先把具有模态属性的各种视图作为一个合集进行分享。

Modality 模态

1. 什么是模态

模态是一种临时模式,独立于用户之前的正常操作流程,需要执行明确操作才能将其关闭。

2. 模态的作用

iOS 13 及更高版本支持 Sheet 、Fullscreen 两种可自定义样式。

3. Sheet 卡片风格面板

卡片风格适用于非沉浸式模态内容,不要包含复杂任务。

取消卡片的方式

4. Fullscreen 全屏模态

先前视图被完全覆盖,从而将视觉干扰降至最低,只能通过点击按钮关闭全屏模态视图。

适用于沉浸式内容(视频、照片、拍摄),或复杂任务(标记文档或编辑照片)。

5. 使用模态视图时应注意

不要滥用模态,模态会破坏用户心流,必要时才使用。

保持模态任务简单、轻量,模态任务不要包含多个层级。如果不得不包含子页面,则必须提供唯一、清晰的单线程路径,帮助用户完成任务。

提供退出模态视图的按钮,提供「完成」、「取消」按钮,作为手势的替代。我的理解是,手势操作在界面上不可见,学习成本高。而按钮在界面上可见,可以给用户带来操作可控的安全感。

避免数据丢失,不管用户是使用手势还是按钮来关闭视图,如果该操作会导致用户生成的内容丢失,提示用户,并提供挽回办法。

不要在弹窗上面叠加卡片,应先关掉弹窗再展示卡片(消息对话框除外)。

明确当前任务,通过模态窗的标题(或其他文案)来帮助用户明确当前任务是什么。我的理解是,模态打断了用户之前的操作流,这会和用户预期的操作相冲突。如果不能明确提示用户当前任务是什么,用户会感到茫然甚至被打扰。

使用合适的过渡动效,使用动效向用户暗示内容已发生转换。系统的默认动效是屏幕底部向上滑出,关闭时向下滑出。

Alerts 消息对话框

消息对话框是对有关 App 或者手机状态的重要说明,通常需要用户执行操作反馈。

慎用消息对话框。消息对话框属于模态视图,会破坏用户体验,仅可用在重要场景中,例如确认付费,具有破坏性的不可逆操作(比如删除),报错。注意消息对话框出现频率越高,用户越容易将其忽视。

消息对话框组成元素

1. 文案相关注意事项

标题

标题越简短越好,尽量一行内说完。

试试仅使用标题就把情况解释清楚,而不需要额外说明性内容。单个字词的标题很难提供完整的信息,建议使用疑问句或者短句。

说明性文字

说明性文案保持在两行以内,要确保在横屏竖屏方向上都能方便阅读而无需滚动。

说明性文字要使用完整句子,而不是短语。

语气

避免听起来是指责,审判或侮辱。

只要使用了礼貌语气,否定且直接的态度,效果要好过正面但隐晦的态度。

按钮

按钮文案清晰明确,尽量无需额外解释按钮含义。

若必须提供操作指导,引用按钮时使用动词「点击」,例如「点击 XX 按钮」。如果是英文要注意,引用的按钮文案用大写字母,而不是引号引起来。

2. 按钮相关注意事项

数量

1 个按钮用于通知场景,通常是 2 个按钮,3 个以上建议使用活动面板(Action Sheet)。

明确

尽量使用与标题和消息直接呼应的动词,避免使用是和否。

位置

取消按钮在左侧,建议操作按钮在右侧。

破坏性的操作

破坏性的操作要使用系统已有的「破坏性」格式。将「取消」按钮标记为默认按钮,使其变为粗体。

Action Sheets 动作面板

动作面板是消息对话框(Alert)的一种特殊形态,在用户点击某控件后出现的一组操作选项(发起任务、对破坏性操作进行确认等)。在较小屏幕上,动作面板是从屏幕底部向上滑出的。在较大屏幕上,动作面板以弹出窗口(Popover)的形式一次全部弹出。

屏幕底部放置取消按钮。原则上取消按钮不是必要的,但可以让用户获得确定性和安全感。

破坏性操作要足够明显。通过红色文字暗示其危险性,将破坏性操作置于其他操作顶部。

不要让动作面板滚动。若操作项过多,用户可能需要滚动才能查看所有选项,这会增加误操作的概率。

Activity Views 活动视图

活动视图。一个活动即一个任务,例如「复制」,「添加收藏」或「查找」等针对当前内容的有用操作,一旦选中立即执行,或是获取执行任务所需的信息。

是采用卡片样式还是弹窗样式,取决于设备尺寸和方向,如下图。

系统内置任务,系统自带一些内置任务,例如打印、发送消息、AirPlay 等。系统内置任务默认展示在前面,顺序不能改变,不要重新设计,但可配置不使用哪些任务。

可支持分享到其他应用和一些扩展操作。

图标标题保持简短,标题太长会被系统缩小甚至被截断。

动作按钮,使用系统默认的动作按钮(action button)来调出活动视图。动作按钮见下图。

Popovers 弹窗

弹窗可以是模态或者非模态的,如果弹窗是非模态的,点击弹窗以外区域就可以使弹窗消失。

弹窗元素。弹窗可以包括各种元素,包括导航栏、工具栏、标签栏、表格、集合、图片、地图,自定义视图等。

屏幕。弹窗更适合用在大屏设备上(比如 iPad)。

建议保存操作结果。非模态弹窗容易由误操作导致关闭,例如用户不小心点击了弹窗以外区域。除非用户主动点击「取消」按钮关闭弹窗,否则建议保存用户的操作结果。

谨慎考虑弹窗大小和位置。弹窗不要太大,不要遮挡重要内容和来源控件。

不要在弹窗上面叠加弹窗。要展示多个,必须先关掉前一个(消息对话框除外)。

弹窗大小变化时使用动画效果平滑过渡,不然用户会以为出现了一个新弹窗。

欢迎关注作者的微信公众号:「能呆书房一整天」

Source: 优设网 – UISDC | 14 Apr 2020 | 4:10 am(NZT)

艰难求职季,腾讯设计师是如何做职业规划的?

2020 年真的是一个开局不利的一年,如果有的选择,可能很多人都想重新开启这一年吧。可惜现实游戏没如果,最艰难的一段疫情时间算是熬过了,很多人又慢慢回过神来要开始努力找工作啦。

最近咨询聊天的很多小伙伴都会有点小迷茫,我发现大部分小伙伴其实对于职业发展没有太多的去规划和了解,所以这里想总结分享一些自己的经验和观点。

△ Design by 张彭彭

不管你是初出茅庐刚毕业,还是已经就业想转战一个新环境,其实都应该对自己的职业有点长远的规划,这样你会比其他人走得更快更远。

为什么要职业规划

让你掌握自己的人生

你应该要知道,你现在的生活状态,就是你几年前选择的结果。你的职业规划决定你的职业,你的职业决定你的收入,你的收入决定你的生活。职业规划的意义在于让你能够掌握自己的人生。但是规划不是一成不变的,它是根据你个人状态实时变动更新的地图指南。

设计师如何选择赛道

选择比努力重要/水深才能养出大鱼

想有更好的发展,那么就要选适合自己的、有发展的行业、发展空间大的岗位。道理我都懂,具体怎么做呢?

1. 了解目前自己的处境(内部分析)

你是准备毕业的小菜鸡,还是已经工作的小腊肉,还是职业发展瓶颈的职场老鸟,不管你现在什么阶段,对自己的认知分析都十分重要。别跟我说什么科学方法论,我告诉你最简单粗暴且实用的方法!

问自己,最想要做什么,虽然这个问题看上去很简单,但是确实问到不少人(相信大部分是黑人问号脸?)

不耻下问,机会总是留给有准备的人哒,总好过自己去闷头苦想,好好利用网络技术寻找你需要的答案。

2. 了解行业发展趋势(外部分析)

我发现在聊天的过程中很多小伙伴其实没有太注重这个事情,其实在选择就业之前最应该做的是选行业,然后再选行业相关的公司,然后选择公司职位,最后才是针对性的什么简历制作包装面试等等。

大部分人都觉得,我就是做设计的,只要公司有设计岗位,就可以去试试,只要待遇什么的还满意就做着相关工作,工作遇到一些新问题就继续学习解决,一切听起来好像也就这么回事,想的挺完美的!一开始我也是这么觉得,就这么去做,然后懵懵懂懂过来了,但是当你在安逸的环境工作了好几年了以后,你会发现人与人的(薪资福利待遇能力)差距已经拉开不是一条街了。

△ Design by 张彭彭

大家都是经历了 12 年义务教育的国家花朵,为何你就如此优秀呢??!

最大的问题是你选择行业池塘的水,没有其他人选择行业池塘的水深,所以很难把你养成大肥鱼。你在钱流入多的行业,你自然比没有钱流入的行业更容易获得更广阔的视野和更多的资源。有时不是你能力水平问题,而是你一刹那间的选择问题,当你迷迷茫茫进入了夕阳西下的行业,就算你再怎么努力,可分配资源都是有限的,挣不了钱怎么可能给你更好的福利待遇呢?(这里对比设计师在传统行业任职和在互联网+相关行业任职的差别)

当然在互联网不同类型产品的设计职位,福利待遇差别也很大,你的付出与收获跟你是不是真的很努力没有太大关系,跟你选择却有很大关系!在最年轻力盛的时候更应该好好选择一个可以让自己长期扎根发展,快速成长的赛道。

每个人都知道需要不断努力提升自己,但是往往会忽略了行业带来的红利 BUFF,你在成长的同时,行业也在成长,你坐在一个高速前进的列车上,就算自己原地不动,其实都已经跑得比其他人快很多了,更别说你一直往列车车头奋进。

所以到底怎么选择?怎么看到底哪个好呢??如果你没有特别强烈的兴趣爱好信仰加持的话,最简单的就是钱投资多的地方就是相对有发展潜力的,可以关注大厂们都在投资一些什么方向。例如大企鹅:

△ 图来自 2019年36氪创投研究院 张彭彭重新设计展示

△ 图来自 2019年36氪创投研究院 张彭彭重新设计展示

从上图可以看到,除了核心文娱游戏领域,金融科技/人工智能和医疗/企业服务/大消费,这几个大方向是企鹅的核心投资业务领域,选择这几个方向发展都不会太差。一开始进不了第一梯队,可以按能力顺延选择第二梯队,第三梯队,只要方向是对的,不断积累经验往前跳还是有很大发展前景的。

同理关注阿里巴巴等巨头分别都在布局什么方向,越是新的领域,竞争相对就越小,因为暂时入局竞争的人还不多,就越有机会。大公司要布局的方向都会不断地投钱,刚好你又在他们投钱的范围里面,那么自然就有更大的机会快速发展成长,当然快速成长意味着压力也同样在增大。

看到这里我相信你对简单的行业分析已经有一点儿了解了。(如果还不了解文末有惊喜)

当然在具体做人生选择的时候还是要根据自己的一些硬件/资源/特性/兴趣爱好等等这些一起考虑分析出属于自己最优的选择。一个新兴的行业在发展的初期,一定会有一段时间的红利期,企业需要大量的人才,国家给到的足够支持,如何快速抓住这个机会,总结几点建议:

行业深耕 建立壁垒

不要频繁更换赛道,蜻蜓点水

选对适合自己的赛道以后,就在这个赛道不断往头部企业奋进。

随着整体经济的发展,设计职业也在不断地变化,这时对设计师的要求相对 5-6 年前我刚毕业的时候,已经千差万别了。互联网设计职业也开始进入第二阶段精耕细作,第一阶段(是个会 PS 的人去互联网都能找到一份高薪工作的幸运时期)

第二阶段的设计职业要求发展不再是单单要求你只会技能操作那么单一(现在会技能的人多的去了!)对于复合型的要求越来越高,而且你还需要补充你所在行业的一些相关背景知识(俗称懂业务)才能精耕细作,不然你还只是停留在最表层的工匠型设计师。

深入积累某一行业背景经验,保持其连续性是中后期设计师职业发展的护城河(不断地换赛道,基本对行业了解都不深,那么就更难与其他人去竞争好岗位了),当然你越早在一个不断有水流入的池塘猥琐发育,你就越快且越大几率长成大肥鱼。

欢迎关注作者微信公众号:「张彭彭设计笔记」

Source: 优设网 – UISDC | 14 Apr 2020 | 4:05 am(NZT)

界面该不该加弹窗?来看高级设计师的总结

这几天在工作中处理了一个历史遗留问题:弹窗适配,几经折腾终于落定发包。于是我也趁着这个机会把弹窗体系梳理研究了一遍。

我们常见的弹窗有对话框,提示框,有时候在需求沟通中经常会听到产品同学说,给这里加个弹窗,那里加个提示框吧。实际上,这个弹窗到底该不该加?这个弹窗承载的是提示说明文字内容,还是需要引导用户下一步操作?接下来我们从弹窗的属性来聊聊我们的弹窗到底在什么时候加比较合适?用什么形态展示体验会更好?

弹窗体系:模态与非模态

模态弹窗:是指在用户任务中,终止了用户的上一步行为。也就是说,这个模态弹窗必须要用户操作才可以进行下一步动作。所以在产品设计中,我们通常会用模态弹窗引导用户去做我们要他做的操作。

常见的模态弹窗有这几种:对话框、动作栏、浮层。

对话框:对话框主要是给用户提供选项、相关的操作。另外,在一些对话框中,也可以展现图片、头像、步骤图、其它输入项等。

动作栏:常见的动作栏一般会出现屏幕下方,比如选择某个内容时候,出现的选择。

浮层:弹出窗口,浮动于顶层窗口,气泡。

非模态弹窗:是指不强制用户操作,他的作用相当于内容信息提示,他的出现不打扰用户的当前操作,并且有时间限制,在一定时间里能自动消失。比如「xxx 功能已更新哦」,这种提示是不需要用户点击操作,让用户看到就可以了。

常见的非模态弹窗有这几种:toast/hud、snackbar、notice(通知)

toast/hud:iOS 用户更习惯于在中间感知反馈信息,通常在信息提示完 3 秒左右后会消失,安卓通常会出现在屏幕顶部或者下部,不会遮挡主体内容。需要注意的是 toast 只有文字,hud 是可以带有图标的。

snackbar;可以理解为加强版的 Toast

notice:系统消息、通知推送,也是不干扰用户行为,有消失时间,是非模态的弹窗。

什么场景下使用什么弹框

了解完弹窗体系后,我们就可以针对具体场景来看产品同学说加个弹窗到底合适不合适?我们可以从下面的几个使用场景来看用什么样的弹窗合适。

1. 重要打断用户操作

在一些重要操作,避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊,有的地方出现得不合时宜,打断了用户的使用状态。所以在设计这类弹框时要非常谨慎,得通过多研究确认是否有必要出现。

对话框相对来说比动作栏更重要,因为在视觉中心,更能强烈引起用户的重视,对于十分重要的内容需要打断用户上一步任务的,采用对话框的弹窗,对于不是特别重要信息露出又需要终止用户上一步动作的情况下,一般采用动作栏弹框。

2. 定制化广告弹窗

如功能更新、升级、优惠券弹窗。这一类一般是强制用户看到的,要展示出与众不同的特色,在视觉上比较突出,会使用模态的弹窗浮层形式。

3. 给予一定提示

比如提示用户状态、信息、反馈,确保用户知晓自己所处的状态,并可以做出相应的措施。一般使用非模态的弹窗。

4. 用户操作反馈

出现在用户操作完之后的反馈,比如提醒用户页面正在加载中、保存成功、已删除、已刷新等等。

可以不用弹窗的反馈例子:完成页

比如已支付成功、下载完毕、签到成功,这一类是告诉你上个动作结束了,下一步不需要进行引导了,这种反馈大多数都不采用弹窗形式展现了。

需要注意事项

1. 层级关系

弹框是内容和导航的补充,用于通知、操作菜单、成功或加载状态的 toast,他是写在蒙层上面的一层内容。

2. 适配方式

下面我们需要了解的是这几种弹窗在开发那的实现形式。我们可以理解为 2 种形式:

一种是开发直接用系统的接口,缺点是具有不可定制,形式美观度不够好。

另一种是开发用代码会单独写出一个模态弹框系统,这套系统与整体设计语言具有一致性,可以复用在各个任务中,可以定制化设计。

需要注意的是,代码写出来的模态样式要考虑在不同机型的适配情况,考虑不同机型的边界。这个适配也有两种实现形式,一种是固定宽高尺寸,展示在不同机型尺寸中,另一种是常用的等比例缩放。这个就需要开发与设计进行密切的沟通,能尽量合理地在不同机型展现更加合适,避免出现极限的情况。

我们是这样操作的,为了避免尺寸比例混乱的情况,会设计一个弹窗的宽高尺寸范围,开发同学代码写出的这套弹窗的适配在各个机型中,是在一定缩放比例下,适用各个不同情况下的视觉展示。这套弹窗可以调用在首页引导、升级等各个页面的弹窗设计中。

欢迎关注作者的微信公众号:「咏舍」

Source: 优设网 – UISDC | 14 Apr 2020 | 4:01 am(NZT)

壹周速读:插画自学技巧,UI 设计师进阶秘诀和24款干货

如果说你正巧是一名 UI 设计师,那么上周你可以收获一大波关于UI视觉、体验和产品设计的文章。如果你是一名插画师,那么插画师 之吹Jamila 的系列文章应该会让你获得不少启示。如果你对于这些东西兴趣不大,那么美丫的 Mur 猫艺术流派解读和设计工具合集总会给你惊喜~

平面·插画

@做设计的面条 的系列文章《拍一张照片,就能设计成一幅海报》又更新了!因为疫情滞留昆明近2个月,随着逐步解封,她终于有机会去海埂大坝和海埂公园看看,拍下新的照片,顺便制作成为新的海报,快来学习吧:

很多同学都想自学插画。那么学习插画到底要从哪里入手呢?之吹Jamila 认为素材的获取是基础,这篇文章里,她详细地分享来关于素材分类的知识以及获得素材的渠道和技巧:

拥有来素材之后,紧接着就是对素材进行合理的处理,转化成为完整的绘画语言,但是区别于其他视觉媒介的插画。之吹Jamila 在第二篇文章当中,为你详细分析了这个问题:

当我们说,「这个插画好有创意!」的时候,到底是觉得它哪里有创意呢?大部分人的第一反应,可能是作品里的内容,例如超现实主义的画面:像水一样可以流淌的钟表,或者爱丽丝一样掉进一个异世界,抑或古代人出现在地铁里面…只要作品里有一项或者多项因素,跟其他作品所表现的有所不同,就会给人一种不同寻常的感觉,然后就触发人们「有创意」的看法。那么「制造创意」到底有没有方法或者说思路?当然有,之吹Jamila 的这篇文章,帮你从5个角度进行来梳理:

关于创意,来自腾讯的菜心设计铺 还有一套自己的方法,切入点完全不同,范畴包括且不限于插画,他的方法适用方位更广:

UI·产品

超火的Switch 平台游戏《集合啦!动物森友会》最近刚刚突破来5200 万份的销量,再 Switch 平台上一骑绝尘。火爆的话题和令人炫目的销售成绩背后,这款游戏到底凭什么有着这么令人沉迷的魔力?这篇文章,用《游戏化实战》中超实用的「八角行为分析法」帮你剖析这款游戏背后的成功秘诀:

越来越多的同学开始关心如何从UI设计师进阶成为专业的 UX 设计师,这篇来自「Nana的设计锦囊」的文章梳理来自己从非科班设计师进阶为大厂UX设计师的过程,值得参考:

组件库是当设计师遇到同一类组件设计场景时,提供可复用、避免创造新的样式的库。当我们进入一个成熟的设计团队,团队文档中都会有组件库和对应的设计规范。这样既减少设计和开发的时间成本,同时增强产品的统一性,避免多样式给用户带来认知障碍。那么如何运用组件化的思维来设计流程,搭建规范呢?看这里:

缺省页指页面的信息内容为空或信息响应异常的状态,设计缺省状态的作用,不仅是引导用户在异常边界状态的操作提示,同时也是安抚用户体验情绪的重要场景,更重要的是为边界场景营造出良好用户体验。那么缺省页的设计需要遵循什么原则,在具体设计的时候,又要遵循什么样的机制?来看腾讯动漫 TCD 的总结:

说到阴影,大家应该都不陌生,当你需要设计出富有空间感、立体感和真实感的元素的时候,当你需要划分层级的时候,阴影的作用就显得非常突出了。但是关于阴影,你真的足够了解嘛?美工美帮的这篇文章,帮你系统化地针对这个问题进行来梳理:

B 端的产品和需求在近两年呈井喷的趋势,对于 B 端界面的视觉和交互要求也与日俱增。掌握 B 端的设计,是今天 UI 设计师的必要条件,也可以增加我们的求职广度和职业竞争力。这篇文章以「掏空家底」的姿态全方位地梳理来 B 端设计的知识点:

正所谓设计5分钟,配图两小时,找不到好配图难倒英雄汉的事相信大多数人都亲身体验过。那么UI配图到底有哪些主要的应用场景、素材来源以及实用技巧呢?来看看酸梅干超人怎么说:

为什么UI的深色模式,通常会显得更加精致细腻?为什么同样采用深色模式的微信却没有 iOS 本身的深色模式更加舒适,甚至显得难看?这当中到底蕴藏着哪些深色模式的设计秘诀?这篇文章里就有总结:

干货·神器

Prototypr.io 这周带来了 23 款全新的设计工具!在疫情肆掠的这个阶段,希望这些优质的工具能够帮助大家更好、更冷静地工作和生活。这次的工具合集当中,新增了两款颇为不错的图库工具,令人眼前一亮的还有超帅的调色工具 Parametric Color Mixer 和辛普森头像 CSS …… 下面大家仔细看看吧,总会有几款令你心仪的工具出现!

有时候做国风的设计作品,如果选择黑体和宋体可能太过端正,但选择书法字体的话,可能因为飞白或过度连笔导致字体不容易识别,那选什么字体呢?我建议大家选择楷体,注意不是选系统自带的楷体,而是今天推荐的演示悠然小楷,字体手稿由一位美丽女生书写,其字体有着悠然自得、闲情逸致的气质。

新视野

美丫姐用超火的 Mur 猫来替你总结了14个艺术流派,一起来增加点儿奇怪知识吧:

Source: 优设网 – UISDC | 13 Apr 2020 | 7:13 am(NZT)


网页不会做,那是画册看得少(下)

今天我们继续根据画册学习网页。通过前面的课程,想必大家应该明白了,如何多快好省地去学习网页设计。如果上集没有看的小伙伴呢,也不用立刻切换掉去看上集,继续看也不会影响你的理解。

往期回顾:

上集我们主要讲的是以网格为主的网页设计类型,这一集我们继续配合画册去理解,那些变化性大一点的网页设计类型。在这里我要重复说一下,网页各个类型几乎都是在网格的基础上进行的,接下来要讨论的网页形式,同样也是建立在网格的基础上,只不过相较于之前讲的四种网页版式类型,变化性大了一些,这里所说的画册,也并不仅仅局限于画册,而是包含了书籍杂志等纸质印刷品。这里呢,小伙伴要注意了。

先来看一下,书籍和显示器两个媒介之间的关系。在信息时代之前,书籍等纸质印刷品,一直作为人类传播信息的唯一载体被使用了上千年。

而进入信息时代以后呢,显示器这种全新的信息载体,就开始慢慢地进入到了人类的生活中。

也就是说,信息时代的到来,使信息的载体慢慢地从纸质的书籍,转移到了以显示器为主的设备上了,同样,在设计也相应的继承了前者的特征。正因为如此,它可以帮助我们更好地去理解网页设计的相关类型。

想要理解这个概念,就要先来看几张以图片为主的画册编排。使用这种排版方式就会让这个图片数量很多的画册,保持版面整洁。那么这种画册形式和网页有什么关联性呢?

在讲关联性之前,我们先联想一下,图片的摆放就像我们家地上的瓷砖,一块接一块进行摆放的。大部分时候形态各异。是不是很像上面浏览的画册图片。

取出一块瓷砖形式来,把它转化成一个线框的模式。进一步,把这个线框,添加上文字,它就变成了我们接下来要讲的网页形式的基本组成部分。从中我们就能看到他们的关联性。

卡片/瓷砖型版式

这个网页形式就叫做卡片/瓷砖型版式,这种版式的特点就是「信息清晰且易识别,具有高兼容性」。

记住前面的瓷砖概念,接着来看几个卡片瓷砖式网页的例子。这个网页就是把不同风格的图片,像瓷砖一样地拼接在一起,不但不影响美观,还提升了识别度。

这个网页则是用了这个形式,让这个页面充满了精致感,并且有一定的故事性。这种类型的网页很适合,去展示大量的图片,但是,前提是图片的质量一定要高。

这是卡片瓷砖型版式的最基本组成形式,就像我们家的瓷砖一样,一块接一块整整齐齐。

这种类型的网页版式,只需要,改变一下它们单元型的大小,整个版面就会产生不一样的效果。

在这里我们的变化型一步一步的提升,逐渐就会变得像我们开头看到的那几个画册的版式一样。这是因为它们的底层逻辑都是互通的。

趁热打铁,继续来看一下这个杂志,加深一下对这种网页类型的印象。

把里面的每一个单元型都提取出来了,我们修改一下形式,你就会发现其实它们可以很自如地应用在卡片/瓷砖型版式的网页中。

在不改变它们的单元型只改变位置和大小的原则下,把它置入到了网页中,是不是立刻就能发现它们直接的关联性了。

我们再继续看一个画册的内容,还是先提取这个画册的文字组,提取出来观察一下。

单独提取出来了它们的单元型,观察一下,是不是很容易就看出来,这些文字组,它们就像一个个瓷砖。这也是我们可以借鉴学习的地方。

置入到网页中,就立刻变成了一个完整的卡片瓷砖型版式的网页了。这里要注意,这种类型的网页,对单个单元型的编排要求很高。在编排的时候应该先编排出来高质量的单元型,再作用于网页中。

1. 可以根据窗口尺寸进行调节

这种类型的网页,它的内容就像瓷砖一样,可以随时根据窗口的尺寸进行调节。不同的窗口尺寸,并不会破坏它的网页原有的感觉。

2. 让不同的信息之间有清晰的区分

单元型与单元型之间,有明显的区分。在我们日常浏览网页的时候会经常见到,可以把不同类型的信息,清晰明确地传递出来。

3. 信息之间可以方便地更改位置

浏览这种类型的网页,可以根据需求去更改网页内容的排序,并不影响这个信息的传达。在这个灯具的网站中,我们修改它的排序规则,更加方便用户查找自己想要的信息。

4. 同时适合电脑/手机端

由于瓷砖的拼接特性,让这种类型的网页,非常适合在电脑端和手机端同时浏览。在手机端和电脑端浏览切换的时候,只需要更改图片位置就可以实现,可以说是非常的简便。

大家在做卡片瓷砖型版式的时候,就可以想象自己是在贴瓷砖,再去结合上面我介绍过的画册类型,就可以很轻松地设计出一个好的卡片瓷砖型的网页了。

脱离网格型版式

我们来看一下什么是脱离网格型版式的网页,注意,这里的脱离网格并不是完全不使用网格了,而是在网格的基础上去增加一些变化型的内容。就好像你习武,最后变成一个高手,但是你不可能扔下一开始练的拳法吧,只不过是在原有拳法的基础上,更加灵活的去运用了而已。网格依然是网页设计中的基础部分。

先来看一下这张脱离网格型的网页,整体传递出来的是一种,活泼动感的感觉。

而与之相比的网格型版式,则是传递出来的是稳定整齐的感觉,这就要求我们在设计网页之前,先弄清楚我们设计,需要传递出产品的什么气质。

还是老样子,我们先来看看相关的画册。关联刚才看到的网页截图,这个是不是就很清楚的可以看出来,它脱离网格的特质啦。红色的部分是我标注的细节。

汇总重新观察一下,上面几张画册的重点部分是什么,那就是会有叠压的感觉。这里只是一个细节,而脱离网格型的版式,往往就是大量的图片和文字的相互叠压,组合在一起。

来看一下这个食品类的网页,这里可以明显地看出来,这个网页中存在大量的图片与文字的叠压情况。这也提升了整个网页的观感,增加精致度。

添加了叠压以后,让本来会严肃的页面,增加很多的活力进去,不会让整个网页过于的死板。

这里大家肯定都是已经明白了,它的特点都有哪一些了。最直观的就是,文字布置在图片上。有的时候图片上叠字会影响识别度,在文字下方添加一个色块,可以很好的提升文字的识别度。

除了文字和图片的相互叠压,还有图片和图片,以及图片和色块的互相叠压的形式,这个网页中也是很常见的。

就是我们前面画册的类型,图片与图案的相互叠加。其实本质上就是为了突破网格型的种种限制,让版面变的更加地活泼有趣。

通过一个化妆品的小案例,让大家理解一下,网格在脱离网格型版式的网页中的作用。接到文案的第一件事情,就是对信息进行分类,区分它们的优先级别。

这里我已经把文字组编辑好了,网页中要讲究比例间距的原则,这里我就是以按钮的高度为依据。

根据脱离网格型版式的特点,一开始就设计了一个叠压的效果。

置入我们要介绍的产品图片,让他们有一个明显的叠加效果。

最后置入我们已经做好的文字组,这个小的组合就完成了,接着我们来看看网格在这个网页中的作用是什么。

把它置入到了一个网页的尺寸当中,现在我们看到这是一个 8 栏加隐藏网格的形式,网格在网页中同样起到了重要的作用,我们一定要记住这一点。

模拟一下页面的滑动,就可以看出脱离网格型的网页,传递出来活泼的气质。

1. 利用留白和叠加构图,展现漂浮效果

更自由的脱离网格型版式,可以合理地利用留白和叠加的构图,去展示一些漂浮的效果。这个饮品的网站,就利用了文字的叠加形式,形成一定的悬浮效果,让整个网页变的更加有趣和精致。

2. 着重表现图像的简约设计

这样类型的网页,可以更好地利用图像去做一些简约的设计。这个服装的网站,就是利用了叠加和大留白的方式,传递出了一种简约时尚的感觉。

3. 照片与图框叠加出不规则的美感

图片和图框的叠加,本质上是比正方形或长方形的图片,更加具有不规则的美感。化妆品类的网站,使用这种不规则的形式,传递出了高级和精致的美感。

那么可能会有同学会问,是不是所有的网页设计都是按照网格进行的呢。这个不是绝对的,因为有一种类型是自由型版式,这个就是完全的随心所欲的设计了,就好像我们在一些画册中,完全找不到它有什么设计规则一样。

这个就像你练功,打通任督二脉,你的手法既像招式又不像招式一样。大家只需要知道有这种形式的存在就可以了,我就不细讲了。接下来我们要学习的网页,是我们在日常浏览画册和网页中最常见的形式之一,掌握了前面这么多网页的形式,再来看这个形式接受起来就会更加地容易。

全屏型版式

这里我特意去掉了书籍的效果,是不是就很像一张网页的展开呢?

这里也是同理,只不过是缺少了一些网页的基本组件,添加上去就会变的和网页几乎一致。

我们用一个小动画的形式,就可以轻松地理解,这种网页类型的形式了。背景保持不变,下方的信息切换,而且整个网页始终保持在这一个画面中。

这个汽车的网站,就通过全屏型版式的形式,很好地展示了汽车各个信息,并且具有很强的互动性。

第二种形式,则是一开始为全屏显示,下滑就变成了一个组合专栏型版式了。通俗一点讲就是可以向下滑动。

在餐饮的网站中经常可以看到这种类型的网站。

在这里我提供一个学习的思路,就是我们看在静态的画册的时候,可以试着添加一些动态的概念。想象着这个画面要是个视频效果会怎么样。

提取一下这个画册中的这个文字形式,置入到一个网页中,我们来看看效果。

一个全屏型的网页效果就出来了,所以在做这种类型的网页的时候,可以多去参考和借鉴,大图对开的画册。可以使你的设计灵感源源不绝。

1. 以全屏方式播放电影的宣传片

电影游戏类型的网站,经常就是以全屏的方式播放宣传片。这可以更好的营造气氛,吸引用户向下浏览。

2. 用幻灯片的方式展示全屏背景图片

除了放置视频,把图片用类似幻灯片的方式也同样可以。这里就要注意图片切换时的效果,本质上就是把图片连接成了一个视频的形式。

3. 在固定的画面中展示不同视频

除了图片可以像幻灯片切换,视频也是可以的,可以在固定画面中展示不同的视频。在下方设置视频切换的按钮就可以实现了,这里切换方式就可以朴素一点,毕竟视频本身信息就很多了。

4. 使用电影图片展示动态图像

除了图片,视频以外,我们在经常见到的 GIF 动态图片,同样也可以作为全屏型网页的背景使用,这里使用就会产生一种有趣的感觉。

5. 使用代码效果营造全屏网页效果

使用代码同样可以营造全屏网页的效果,这种类型的要求就更高一些,最少你要先懂代码。使用代码可以产生大量的交互效果,让用户有一定的代入感和参与感。

看到最后大家应该都明白了,画册和网页之间有着密不可分的联系。可以这么说,画册和网页它们是一个演变的关系。随着纸质印刷品的慢慢减少,越来越多的信息以显示器为载体,展示在你的面前了。

现在回看画册等纸质印刷品,是不是就像一座宝库,里面全部都是被等待挖掘和利用的网页设计方式。除了可以很好的扩充你的版式知识,这也是一种非常好的学习方式,熟练的运用以后,还可以再去尝试从别的领域去学习和借鉴,毕竟艺术的底层逻辑都是共同的。这期课程就到这里了,我们下期见。

欢迎关注研习设的微信公众号:「Yanxishe2017」

Source: 优设网 – UISDC | 13 Apr 2020 | 5:44 am(NZT)

一万两千字!阿里资深面试官的私藏求职干货合集(上)

过去的一个月,2020年阿里实习生春招正在火热进行中,上周我们也征集了一波同学们关于作品集的问题,收到了同学们强烈的响应

于是在淘宝设计第一期对外的圆桌讨论会中,我们请到了4位淘宝资深「体验设计」招聘面试官,以及18年校招加入的体验设计师,跟大家说说过来人的心里话。说那些学校老师没教过;毕业的师兄师姐没传达的;你在象牙塔中不曾设想过;一些如何自信走出校园,开启设计工作生涯的诚恳建议…

虽然说找工作是看缘分,但还是要替我们操碎了心的招聘面试官们吼一句:同学,你准备好了,就来试试阿里巴巴

圆桌讨论内容概要

内容分上下期,本期我们主要讨论: 招聘官眼中「平平无奇」的作品集

收到一份新作品集,大概审多久?

YUNGU:

一般快速看1-2分钟,心里就有谱了。能判断同学是有潜力的,后面可以面试的;还是说不用再花时间了。我们可能会一次收到很多份,不能确定一个同学的水平的时候,也会跟其他面试官传阅评估一下,避免自己的偏差或者喜好。

同学问:

简历和作品集放在一起好,还是两个文件好?会不会因为我的学校不够好经验不够多,招聘官可能就不看我作品集了?

YUNGU:

我看到过的比较好的作品集里面,简历放在开头,并且有联系方式或者微信号。一些奖项,学校,主要经历,都会摘出来,不会把简历作品集刻意分开。这样我们即便是看作品集,我们也能够一目了然,知道这是一个怎样的学生。如果提交的是一个网站的话,一定要有个人介绍和联系方式。

SHIMI:

简历为何要和作品集分开?那是因为简历是一个对自我背景概括更精简的版本,是便于交流传播的。比方作品集很大还没下完,简历就可以先看一下。

CHASHAN:

简历就一张纸,因为篇幅有限。不太专业的同学,会表达自己的很多兴趣爱好,或者强调自己会的软件工具等等。

但是特别专业的那种,就会把自己的一些实习经验,特别的想法,或者做过的课题,表达的特别清晰。

HOST/BAIYU:

简历里面项目的细节写的很好。

CHASHAN:

对,譬如研究过哪些小课题,这些课题和你这个公司想要看到的东西是否能match在一起的。没有过多冗余的琐碎的信息,譬如一大堆个人爱好。

HOST/BAIYU:

别管自己做过的项目影响力有多大,简历里最好能清晰罗列过往项目经验和细节。

作品集普遍格式、排版问题?

YUNGU:

我基本是电脑看作品集,PDF,网页,视频剪辑都OK。只要是方便阅读的,能清晰看到信息都可以。

需要注意的问题主要是:文件太大的,打开太慢的,字体太小的,一会儿横排一会儿竖排的,不方便阅读这些…

HOST/BAIYU:

同学们可以在提交或者发给面试官之前,先发给朋友们看看,看看其他人是怎么读你的作品集的,再来判断下自己的作品集有没有中枪。

CHASHAN:

优秀同学的作品集有一个共同点:不管是什么形式,都配有PDF,好处是什么呢?方便我们在团队内部多人审核的时候,传来传去比较方便;并且手机上浏览很方便。如果是网站的话,海外的同学有的网站需要外网才能看,这也挺麻烦的。

SHIMI:

我作为面试官,还是很注意以同理心的角度去理解同学,看他怎么成长和做设计的。

希望同学们作为设计师,也要有同理心,来想别人是怎么看你作品集的,这样很多错误就不会出现。

比如有的简历就是一个JPG图片,里面所有的东西都不能点和复制,都是很基础的问题。

MINGSA:

我补充一点,说个很小的细节,曾经打动过我。比如,你在作品集里留了联系方式,一般是放个电话号码或者微信号。但是,如果你把微信的二维码放出来,我觉得你可能是从我的角度考虑问题,这样大家互相交流也方便。

HOST/BAIYU:

真的是体验无处不在。

作品集放多少内容?

YUNGU:我个人而言不会嫌多的,如果真的有充实的内容,放了50+页,我也会认真看完。

只要内容章节性特别强,或者归类特别好,我其实非常愿意看到详实的内容。但如果说你只有十几页的作品集,我反而第一印象是想同学是不是没有料,只有这些东西。对我而言,作品内容多一点没有关系。

SHIMI:

我觉得所谓「重点内容」来自于同学对自身优势的判断,可以把自己值得展现给别人的东西都呈现出来,尤其很多同学有丰富的面向和特质,尽可能去呈现出来。如果盲目猜测评估人想看的「重点」,自己展示的不充分就很可惜。

同学问:

我的作品集里应该只放跟申请的工作岗位相关的内容么?还是各种其他的艺术设计项目都可以?

SHIMI:

我经常和同学聊的是,对校招生,我们核心关注的是同学的「设计素质」和「综合能力」。岗位相关的能力我们会核心关注,但每个同学在设计上也都有自己宝贵的经历和特质,如果不体现出来也很可惜。

另外今天淘宝设计部的团队规模使我们有丰富的岗位和场景,同学从外部也不一定清楚哪些是「工作相关」哪些是「工作无关」的,我们会通过作品去看背后的设计表达、问题解决、流程合作等能力,同学尽情展示自己就好。

作品集可以套模版么?

MINGSA:

很多人在问套模板的事情,其实模板只是说可以帮大家节省时间。但我们要知道,模板背后,你的设计思考是什么? 模版只是让你暂时看起来很好看,但是如果这个项目你没有真的去思考,那这个模板,其实意义也是不大的。

HOST/BAIYU:

我印象特别深刻,不少设计论坛和作品展示的网站上,挺多都是用一堆斜着的屏幕去展示界面,看也看不清,不知道在展示什么。

MINGSA:

是的,你说的那些模板都是偏视觉展示形式的,可能没有什么设计思考在这里面。所以说同学们要把这个模板拆解一下。比如说纯视觉表达的部分,可以学习好的模版参考下。但关于设计思路,还是得按照自己的思路去做。

YUNGU:

这个模板的问题,其实跟学术汇报的「PPT的模版」一样。你会发现真正好的汇报很难用模板来套的,非常困难。

前面讲的还是比较到位的,模板提供一个社会的基础标准。这个模版标准大概就是:最低保障线。拿最低保障线去PK一个比较TOP的职位,显然是不够的。那么这个模板上,你可以自己做一些调整,自己看到这个模板不足,或者看到自己的不足。模板本身我们从不排斥。但同学所有的内容都是模板呈现出来的,都是以最高效率和最不精打细磨的方式来,我们也不太会接纳。

招聘官看得懂外文的作品集么?

HOST/BAIYU:

比如有海外背景的同学,整个项目都是英文的这种场景,招聘官们阅读会有什么问题么?

YUNGU:

两个方面看外文的作品集都不是一个特别大的问题。一方面本身是我们也具备一定的英文阅读能力。

另一方面,就是你设计的表述,如果只依赖于语言的话,那就说明你的设计感染力太弱了。

本身你整个作品里面的过程、亮点的图文阐述,做的好的话,我们也不用完全借助语言去理解。哪怕你用德文,我们大体也能看得出你在描述一个什么东西。我觉得这个不用太担心。

两个同学的作品内容撞车?

YUNGU:

我们现在统一来收简历,会碰到一个情况:几个同学来自一所大学,他们在学校可能几个人一组做项目,所以作品集里都出现同一个作品。

这个时候如果两个人都在候选名单当中,就会出现每个人都说作品是自己做的。那这个时候大家一定是务必要真实地反映你在设计作业中的思考和最后的呈现。不会因为说这个作品是他做的,还是你做的,我们就录用谁这种事。

我们比较关注的是:你以一个合作的姿态做这个作品,大概能做到什么样的程度。你的思考路径是怎么样的。你也许只是参与,放到作品集里,但不放在最重要的位置上,这也完全不会影响到你。但如果说中间的环节是有出入的话,甚至我们面试官像侦探一样,判断出同学有一些夸大其词的部分,那是非常非常不利的。

CHASHAN:

是的。同样一个作品,真正优秀学生,他会首先告诉你这是个团队合作的项目,我在里边做的是哪几个点。他会非常坦然,而且能把自己差异化的能力会表达出来。但是不太行的同学往往是希望借助团队的东西,来「扩大」自己的设计能力,这就需要面试官在面试过程中敏锐的get到这些点。

HOST/BAIYU:

同学们注意,如果有团队作品,请在作品集上标注清楚会比较好。

招聘官还会关注别的点么?

YUNGU:

还有一点很重要,我们要看你的「上限」,也要看你的「下限」。比如说你只展出最好的作品,就一个,我们并不知道你平时真实的情况下,在状态不是太好,没有最好的伙伴,最好的课题,最好的导师教你的时候,你自己做一个项目大概是什么水准?

也就是你设计能力的「稳定性」怎么样。

我会看你早期的作品,也会看你巅峰的作品。如果说早年的作品没有达到我们的预期,但是整个进步的过程,思考的过程特别好的话,那就另当别论,我们会客观的处理。但如果是同期的作品,比如都是研究生一年级的两个课题,但作品稳定性有很大的差异的话,我也会抱有一定的疑惑:什么导致同学的手感会差,稳定性会差?

CHASHAN:

关于重点关注的对象,我补充两个维度:一个是相关经验。他有没有相关公司的实习经验。如果有具体的互联网公司实习经验,可以判断他是有一定落地经验,或对商业理解会更深一些,这些同学我会重点关注。

一个是相关专业领域。同样是工业设计背景,有的人的作品只是传统的工业产品造型的设计,缺乏互联网产品的理解;有的人对于交互设计实战层面有着丰富的案例,并对体验设计方向非常明确的, 我也会重点关注。

有同学以前投过阿里巴巴,但当年没过..后面再投还有机会么?

YUNGU:

当然。有些同学在大三的时候曾经投过,可能当时被拒绝掉,这是非常正常的情况。

因为就像我们现在收到的很多大三同学的作品集还不成熟,但我们会看同学的成长性。

我们系统里可以看到以前的作品和评价,来对比现在他的作品,如果有一个比较大的飞跃和提升的话,我们会认为同学的可塑性也是不错的。

这是一个动态的过程,并不会说曾经在阿里的系统里有面试失败的经历,就一定会判断说这个人好或者不好,这个非常重要。

曾经碰壁的同学,如果有信心,不妨再投一次试试看。

更多求职干货:

欢迎关注「淘宝设计」公众号:

Source: 优设网 – UISDC | 13 Apr 2020 | 5:00 am(NZT)

用一篇超全面的文章,帮你掌握对齐原则

在日常的设计工作中,文字排版对于整体设计的表达起着至关重要的作用,文字编排也是设计师的必修课之一,如何划分层次、突出重点、充分结合整体风格、将文字编排工作做得富有趣味性、设计感、吸引眼球、准确地传达信息等等,都是设计师所要做的,看似简单的几行文案,通过设计手法可以有成千上万种不同的编排形式,这就是文字排版的魅力所在!那么我们应该从哪些方面提升自己文字编排的能力,针对这些问题,我们应该从基础—初级—进阶循序渐进,Let’s go~

为什么要排版

设计的最终目的是通过视觉传达给用户信息,文案信息作为最直观的信息传达方式,在设计环节中起着至关重要的作用,文字排版就是将原本杂乱的信息通过设计编排手法实现其富有条理性、可读性、设计感的特点;要让用户在最短的时间内最大限度地捕捉有效信息,且也要能体现出设计感,而不只是枯燥无味的文字摆放;文字编排的过程也是信息归类、提炼重点的过程;所以综上所述,文字排版能力也是衡量一个设计师是否足够优秀的一个必选指标!

三大原则

文字排版作为设计基础知识,很多人会忽略其重要性,用白居易的一句诗来说:「直从萌芽拔,高自毫末始」基础并不代表简单、不重要;相反,它是设计的根基,至关重要!

继续说文字排版的三大原则:对齐、对比、分组(亲密性),这几个字几乎从事设计行业的朋友们都知道,但是排版还是做不好,这是为什么呢?老张准备出一系列关于排版的文章,没错,就是一系列!本期为第一篇:设计排版知识—基础篇,也就是对文字排版三大原则的诠释。

对齐原则

对齐原则:顾名思义就是将文案信息以某种对齐规则进行排列,我们常用的对齐规则分为三类,即:左对齐、右对齐、居中对齐;不常用的也有:顶端对齐、底端对齐、两端对齐;那么对齐的目的是什么呢?我们举个现实生活中的例子:

一幅是热闹非凡的集市,而另一幅则是庄严肃穆的军队;单从视觉效果上来看,整齐有规律的军队图给人的感觉条例性更强、更具有整体性、更严谨,而且更加赏心悦目、易于接受。延伸到设计排版中也是如此,比如:

有无对齐原则的感受一目了然,左侧随意摆放给人的感受是杂乱的、毫无规律可言,而右侧则是按照严格的对齐原则,呈现的视觉效果:严谨有规律、整体性更强、更整齐统一;视觉规范最基础的要求就是:整齐、规范、有条理,这也是为什么很多知名品牌视觉呈现返璞归真的态势,就是通过点、线、面的合理运用进行设计创作,而不是过多的追求特效、炫酷。

中国古代的对称美一直延续了千百年,时至今日对称依然是美的体现,对称美用现在的设计理论来说也是体现出了整齐、有规律的设计价值,比如:

人们对于整齐、严谨的视觉有着很强烈的认知度,很容易接受和理解,对称也是如此。

下面我们继续分析:左对齐、右对齐、居中对齐这三种不同的对齐形式在视觉感受上有哪些不同:

左对齐和右对齐的视觉感受很相似,即:

这两种对齐形式在视觉上形成了对齐分割线,在文案的左侧或者右侧有一条无形的线在约束着,在版式上给人一种更加整齐、严谨、富有约束力,甚至肃然起敬的感受。

居中对齐相对前两种形式而言弱化视觉约束力,提升了板式活跃度、可塑性更强!

问:如何合理的选择对齐方式?

答:对齐方式的选择要结合画面的构图形式、视觉重心,也就是将文字排版与构图形式合理的结合,两者相辅相成、互相作用,举例说明:

我们常见的构图形式可以分为四种,分别是:左右式、上下式、居中式,全屏式,根据不同的构图形式,下面我们说下如何选择文字排版的对齐形式:

左右式常用的合理对齐方式有以下几种:

当画面构图形式为左右式,居中对齐、左对齐、右对齐的文字排版形式和整体都比较契合,这种类构图形式也是常用的一种,属于百搭的形式,通过实操,我们感受一下:

应用到实践案例中,左右式的构图搭配三种不同的对齐形式都很合理,只不过三种对齐形式所带来的版面感受稍有不同,但却都可以很好地与整体结合。

居中式和上下式常用的合理对齐方式有以下几种:

这里把居中式和上下式结合在一起分析,因为上下式构图形式最常用的对齐形式就是居中对齐,这样才能更好地稳住视觉重心,所以上下构图形式多采用居中对齐的排版原则,如果强行采用左对齐或者右对齐的形式,会使得整体比例不协调、重心不稳。接下来看一组案例:

通过前面的分析,对于排版局限性最大的就是上下式结构,它局限于居中对齐的排版原则相对多一些:

这两种形式就是不可取的,所以构图形式在很大程度上也决定了文字对齐原则,而每种对齐原则给予画面整体的版式呈现也有很大的区别,结合三种对齐形式的特点与构图结构去选择最终的对齐原则也是最常用的一种参考!

最后说下全屏式:全屏式同样也可以分为上下、居中、左右,只不过这里说的不是以主体或者产品为参照物,而是当整体没有进行文字排版时,视觉重心的结构形式,也就是将上侧分析图中的「主体」理解为「重心」即可:

其特点以及适用形式完全可以和前面所分析的一样去理解,比如:

全屏式是以视觉重心为参考,和前面所说理解形式基本一致,当画面整体就是一张摄影图时或者抽象背景等等,只需要寻找视觉重心的位置,同样也可以按照上下、居中、左右的构图形式进行文本对齐操作。

总结

对齐原则在现实生活中无处不在,比如:书籍、货架、地铁座位等等;对齐的目的其实就是在规整文案信息,对齐有利于信息传达以及视觉规范,当我们做文字编排工作时,要根据构图形式选择合理的对齐原则,每种对齐形式所传达的视觉感受也不同:左对齐、右对齐给人以整齐、严谨、划分明显的感受;居中对齐则属于更加活跃、可塑性强;而两端对齐更适用于文本段落,底部对齐以及顶部对齐在做海报时的装饰性文本会用到,最后还是提醒大家:举一反三,这里只是为大家提供一些设计思路,而不是全部。

欢迎关注作者的微信公众号:「美工美邦」

Source: 优设网 – UISDC | 13 Apr 2020 | 4:33 am(NZT)

800万美元的LOGO不就是左边一个圆,右边一个圆吗?

去年万事达的LOGO改版,从下图的左边两个圆交叉的LOGO,改成了右边简单的两个圆相交。
这次改版,引起了圈内不少讨论,不是讨论设计理念,而是这次改版的设计价格:800万美元。两个交叠的圆形真的值这么高的价格嘛?事实上,后续调研证明,这次改版强化了万事达在用户群中的认知,后续带来的收益远超改版上的花费。而在这个领域,万事达的 LOGO 设计价格还不是最贵的,英国石油公司(bp)在 LOGO 上了花了 1,370,000,000 美元!(有钱人的乐趣就是这么朴实无华?)

为什么这些公司在LOGO设计肯花费这么高?难道是因为钱多吗?

不,LOGO 是品牌形象的外化表现,是商业价值的表征。

一个品牌LOGO,是企业形象的符号化,它不仅仅承载着品牌形象,更重要的是能被消费者快速记住,提升对品牌的形象。这些将无形的为企业带来巨大的收益。

所以,看似工作量不算大的 LOGO 设计,带来的价值却可以如此的不菲。

在这个时代,再小的个体,都有属于自己的声音和独一无二的品牌。但是 LOGO 设计对设计师而言,是一项综合考验:深入品牌,洞悉需求,精炼元素,塑造造型,再进行视觉传达。

看似简单的 LOGO 设计背后,其实有着诸多讲究,如果你掌握了相应的方法和技巧,也就能四两拨千斤地,设计出优秀的LOGO。

如果你也想拥有洞悉品牌核心的设计思维,学会专业 LOGO 设计师的核心设计技能,了解前辈接单、沟通、完成设计的经验,那么这套去芜存菁的品牌 LOGO 私房课,就是你一直在寻找的秘籍!

01 这门品牌设计课,可以给你带来什么?

这是一套5个小时的 LOGO 设计课程

1、软件实操
抓大放小,教给你专业 LOGO 设计师必备的核心的软件技能;

2、足够专业
品牌 LOGO 设计的主要思路和专业流程方法,都会在课程中逐一为你说明;

3、项目演练
用成功 LOGO 设计案例来告诉你高手的操作细节,带你深入到设计背后;

4、直击刚需
你最想学会的、符合市场需求的的中文 LOGO 设计三大技法,实在,实用;

5、关键经验
关于如何报价,怎么沟通,这些行业内的无价经验,也会在课程中分享。

02 课程大纲

原价¥119,限时上新价¥69

(优设承诺,上新价绝对是最低价)

桌面端戳右边链接购买 → https://pro.uisdc.com/detail/p_5e832fa25f7f2_MmTSoIaY/6

移动端打开微信扫描下方二维码购买 ↓

(4月16日0点,即刻涨价)

03 为什么跟他学习

每一次成功的 LOGO 设计,都是贰喜哥的勋章。这位前百度糯米设计团队的负责人,在站酷上的百万人气,是用他一个又一个成功的设计案例,积攒下来的。

贰喜哥细腻入微的构思,精巧协调的布局,因地制宜地将设计方法投入到不同领域、不同品牌的 LOGO 设计当中,于是造就了这么多形制千姿百态、但是感知起来却同样优雅的 LOGO 作品,这是他的 品牌 LOGO 设计课程的底蕴,也是向他学习的理由。

04 更多作品



05 下面是重点

新课上架特惠福利!用买两份外卖的钱,给自己一个技能升级的契机!

原价¥119,限时上新价¥69

(优设承诺,上新价绝对是最低价)

桌面端戳右边链接购买 → https://pro.uisdc.com/detail/p_5e832fa25f7f2_MmTSoIaY/6

移动端打开微信扫描下方二维码购买 ↓

(4月16日0点,即刻涨价)

Source: 优设网 – UISDC | 13 Apr 2020 | 4:17 am(NZT)

月活超10亿的微信,是如何做好用户体验的

微信是一种生活方式。作为月活超 10 亿的国民级产品,它有着独特的设计之道。

同时,微信也是互联网界的一个异类,张小龙曾在微信公开课上回应道:「我们只是守住了做一个好产品的底线,居然就与众不同了」。

好产品自然是体验和价值至上。下面,我就为大家解读微信的用户体验设计。

二次确认的微创新

先从最简单的二次确认讲起。

微信针对首页消息和收藏列表的删除操作,做了二次确认的微创新。像同类 IM 聊天工具,如 iOS 短信、Facebook Messenger、飞聊等等,二次确认都是采用底部系统弹窗。这样做,从程序架构的角度来看兼容性和通用性更强。

而从体验设计的角度来看,则刚好相反,因为从第一次删除操作,到第二次确认系统弹窗。之间的目标距离太长,耗时也就变长了。根据菲茨定律(Fitts’ Law),获取目标的时间取决于目标的距离和大小。这意味着提升交互的效率,不仅需要减少距离,同时还要增加目标大小。

△ 收藏列表

回过头看来微信,就是这样设计的。二次确认是在第一次的基础上延展,距离几乎为 0,同时,目标按钮的宽度也增加了几倍,大大地提升了交互效率。

互动体验广告

其实,商业和用户体验往往是有冲突的。而微信广告很好的平衡了这一点。

通过丰富有趣的互动体验式创意,或画圆、或画方、或画爱心,吸引大家主动参与互动。

1. 开放首条评论

另外,首条评论功能让品牌像朋友一样与大家对话,利用明星效应,从而带动更多人参与评论,有效提升评论区活跃度和广告点击率。

△ 朋友圈刘雯广告

以刘雯发布的朋友圈广告为例,大表姐把最新款的 vivo X30 系列手机交到你手中,并在首条评论中邀请你帮她拍照。数十万用户积极回复刘雯,评论率高于历史均值 40 倍+,「你这么漂亮怎么拍都好看」、「天天给你拍」,大表姐的魅力折服了众多用户,有效提升了品牌的亲和力与好感度。

2. 打开仪式 · 最强震动级别

在交互方面,如果你是 iPhone 用户,可以体验到 Taptic Engine 线性震动马达,通常力度由轻到重分别是 Light、Medium、Heavy。在打开广告的那一刻,它给你的是最强震动级别,满满的仪式感!整个微信应该找不到第二个这样级别的震动了。

提供反馈信息

再举一个震动的例子,当你的好友拍摄了时刻视频后,可以看到 TA 的头像右上角多了一个蓝色的小圈圈,双击它就能看到好友的时刻视频了。

当然,你双击没有拍摄时刻视频的好友,TA 的头像会左右晃动,并且会有 Failure 的震动反馈,动画和震动节奏完美匹配,这个体验就像你解锁 iPhone 输错密码时的震动是一样的。

△ 没有时刻视频时的反馈

我们做产品设计时也一样,对于用户的操作,应当给予清晰明了的反馈,帮助用户更好地理解信息。

跨平台能力

微信的起步阶段是基于手机来做 App,不基于 PC 来做,PC 端只是辅助,而现在,它的跨平台能力也逐渐增强。

一周前,微信 PC 版「微信测试版 for Windows」发布了 2.9.0 的内测,同步了移动端的新功能,主要有两点:

支持打开小程序,也可以玩「贪吃蛇」「跳一跳」等小游戏了。

△ Windows 微信客户端

另外,此前的微信 PC 端只支持引用文字消息,也没有达到手机上引用消息的视觉效果。此次更新中,还新增了很多支持的应用类型,包括但不限于图片/视频、表情包、公众号链接、小程序、文件等。

如此看来,Mac 端的更新也不远了,可以期待一下。

语音实时翻译

最近的微信更新了,除了引入深色模式之外。值得一提的是,语音消息的交互体验得到了优化,上滑转文字更方便了。

此前的方式是按住说话,滑到转文字按钮,说完松开手指后,才把语音解析成文字。

现在交互则少了一步操作,达到了实时边说边转文字的功能。别小看这一步界面上的优化,它背后代表的是微信语音识别能力上的技术突破。

△ 语音实时转文字

锚点定位

微信有很多隐性和显性的锚点,隐性锚点就比如你打开的这篇文章,关闭后,再重新点进来,还是显示上次阅读的位置。

△ 订阅号列表

显性的锚点就比如上面这个:当你刷公众号列表时候,如果有新文章更新,标题栏会出现一个锚点按钮,点击它让你快速回到顶部,方便查看最新文章。

△ 朋友圈「跳到还没看的位置」

基于此,在新版微信朋友圈中,增加了一个「跳到还没看的位置」。很多信息流产品是往下刷内容,直到给你一个分界线提示:下面内容已经看过了。而微信这是一个逆向操作,我认为这个功能还是很有必要的,因为经常会有刷朋友圈刷到一半聊天退出去,当回来查看朋友圈时,需要重新拉到底部,费时费力。

自然的语音听筒播放

《在你身边,为你设计》一书中有提到语音听筒播放的优化。大家都知道,手机带有距离感应器,在感应到耳边贴近时,屏幕会关闭以节省电力,并且避免由于耳朵与屏幕的触碰导致的误操作。

微信在聊天界面中,也启用了距离感应,以实现手机贴近耳边时,自动将语音从扬声器切换到听筒进行播放,这样你可以用最自然的姿势来听语音,这是一个很好的体验。

但要完美地实现这个体验,就需要解决距离感应器的时延问题。播放语音时,如果你非常迅速地将手机移至耳边,这时候距离感应器并不会同样迅速地对这个动作产生反馈。大约在延迟了 300 毫秒后,感应器发出信号,微信将 iPhone 的屏幕关闭。而在这个时间内,你的耳廓极有可能已经触碰到了 iPhone 的屏幕上。触碰的位置大部分时候是左上角的返回按钮区域。于是很容易出现手机移至耳边,语音戛然而止。

△ 延时响应判断流程图

为了解决这个问题,微信设计了一个解决办法:在响应返回操作时,先等待 500 毫秒,这时候如果侦听到距离感应器有发出信号,则认为是贴耳的动作,此情况下不执行返回操作,如上图所示。而 500 毫秒的延时大部分时候你是不会感知到的。这一解决办法极大降低了贴耳时候的误操作。

总结

在微信的产品设计中,我们看到了交互的细微迭代和背后的技术突破,我们看到了商业创意与用户体验的平衡。给用户带来希望,让创造者体现价值,这就是微信的设计之道。

欢迎关注作者的微信公众号:「洋爷」

Source: 优设网 – UISDC | 13 Apr 2020 | 4:03 am(NZT)

Office改版背后,藏着的这套超全面的宝藏设计系统

如果你是 Windows 10 系统的用户,那么最近应该会注意到 Windows 系统的图标正在逐步地被替换,升级,(在忽略广大国内全家桶软件影响的情况下)Windows 10 正在随着 Fluent Design 的注入而正在变得越来越优雅。

随之而来的,整个 Windows 10 系统也在迭代升级中逐步变得越来越有吸引力:

但是这种改变体现的更为显著的,则反映在装机必备的 Office 软件上了——不对,它现在应该叫 Microsoft 365 了:

微软花费了大量的时间精力来研究中国、印度、欧洲和美洲各个不同市场的用户,每天是怎样使用手机,微软内部的 40 多位设计师和研究人员以此为基础来研究如何处理和提升移动端生产力,并将在「应用层」上的经验迁移到 Fluent Design 整个设计系统当中。Office 或者说现在的 Microsoft 365 就是研究的产物之一。

「……通过所有的这些调研,我们了解到,平均下来人们会在手机上耗费大约4个小时,但是每次和某个应用进行交互的时长在20~30秒之间。」

——微软的设计和研究副总裁 Jon Friedman

为了贴合这种用户习惯和趋势,Word、Excel、PowerPoint、OneDrive 、Outlook 等产品被打散重新整合。而这其中,有些细节藏着更深的意图。

让相机成为移动办公的新入口

「我们在菲律宾观察到,学生们会将课上手写的笔记转成 PDF 并且同朋友和同学进行分享……智能手机上,摄像头和键盘一样重要,它是移动端工作流程中必不可少的部分。」

—— Jon Friedman

一图胜千言这样的道理,很多产品经理和设计师都明白。在中国最深入人心的还是 QQ 的截图功能。而微软的设计团队将原本的 Office Lens 集成到 Microsoft 365 当中,让移动办公的效率得到直接的提升。

当然,这还不是最大的改变。

重新整合视觉和体验

「用户常见操作其实都在20到30秒之内」,这种快速、临时、高密度和高反馈的使用习惯,是广泛存在的。在这个信息和交互都碎片化的时代,生产力并不止意味着着「有足够强大的功能」,还需要「能够更快地获取和使用特定功能」。Jon Friedman 将这种碎片化地完成特定的小任务的能力,称为「微生产力」。

用户一次编写一小段文字,制作一个小表单,或者快速将照片嵌入到 PPT当中,然后添加给另外一个协作者,然后云同步,30秒后,继续做其他的事情。

Word、PowerPoint、Excel 合并到了「文档」这一栏,OneDrive 在后台帮你同步,桌面端和移动端的应用无缝地链接切换,实时聊天和 Outlook 邮箱服务,则可以直接在对话框中调用 Word 或者 Excel 中的某一部分功能,你不再需要在程序之间切换,而 PDF 组件的添加,让你足以在一个应用内管理所有的内容。

既然说「移动优先 」,那么你在通勤、在做饭的时候,是否也能便捷的获取信息?微软的设计团队,将原本应用于 Outlook 邮箱服务中,服务于视力障碍用户的屏幕阅读组件给前一到 Microsoft 365 当中。

「用耳朵来听完整个UI……对大脑其实是不小的负荷。」Jon Friedman 在介绍的时候坦言了这一设计存在的潜在问题。但是在和华盛顿州立盲人学校的调研合作过程中,他们在这一组件中加入了音频缓冲功能,通俗的来讲,就是帮你识别出文档中的重点,

隐形的视觉识别设计

Microsoft 365 横跨了这么多产品,在交互界面上保持着高度的融合,控件和控件之间的样式高度的一致,仅有在特定的功能上,借用品牌色做适当的区分。

当你编辑PPT的时候,界面顶部的橙色菜单栏,和你多年以来对于 PowerPoint 这一软件的视觉认知是一致的,无需思考,就可感知。而这种感知又不会让人觉得割裂,从而让视觉识别变得隐形而富有功能性。

Microsoft 365 把如此之多的功能、服务都整合到一起,横跨桌面端的网页、桌面端的Windows 和 macOS系统、移动端的 iOS和Android 系统,这种复杂的改版设计,明显需要一套完整的体系来支撑。而这就不得不说道已经存在了3年多,并且你少有了解的 Fluent Design了。

宝藏设计系统:Fluent Design

实际上,为了能让 Fluent Design 能够更好地应用到其他平台上,微软并不是单打独斗,除了接触开源项目的模式获得更广泛的设计师和开发者社区的支持,也借由 Surface Duo 这样的双屏硬件项目,和谷歌进行深入的合作,不难想象,iOS 版的 Microsoft 365 应该也是微软和苹果合作的产物,而兼容 iOS 平台的 Fluent Design 背后应该也有官方的影子。

就像我在之前的文章《重磅!柔性屏和双屏来啦,设计师必学跨屏设计规范》当中所提到的,微软已经抱着更开放的心态去面对不同的系统,比如 Android。经历了 Windows 8 和 Windows Phone 的失败之后,微软开始拥抱全平台了,作为开源的受益大户,微软更是收购了 Github ,并且在自家的产品上更加兼容并蓄——比如使用 Chromium 内核的 Edge 浏览器,在 Win10 系统内置 Linux 子系统,等等。

实际上,在 Fluent Design 在 2017 年刚刚推出的时候,它和早年间的 Android 4.0 以及 iOS 7 一样,它有一个明确的指向结果的5个特征:轻量级、有纵深、符合动态、富有质感,规模化。

随后,在具体的视觉设计上,Fluent Design 开始在这些原则的基础上,嵌入了一些更加具体的方法和原则,比如使用视差、阴影和动效来共同强化「纵深」(也就是 Depth) 的概念。

但是随着整个设计生态的变化,设计团队所面对的更大的问题在于:产品需要迭代,需要跨平台,需要多人协作,需要远程协作,需要处理越来越多的需求,需要精简,需要切合运营需求,等等等等。

「Fluent Design 将不止是指向结果,还应该是指向共同设计、构建产品的过程。」  ——微软设计总监 Joseph McLaughlin

环境和需求的改变,让今天的 Fluent Design 和3年前刚刚发布时相比,发生了不小的变化。负责设计规范的微软设计师 Mike Jacobs 用一个隐喻来总结 Fluent Design 的美学特征。

「亚克力」视觉风格美学

多年以前 MacOSX 刚刚诞生的时候,它是以「水」来作为真实拟物光影和质感的核心隐喻,

Mac OS X DP3,设计语言为「Aqua」,拉丁语中的「水」

受到对手的启发,微软在 Vista 和 Win 7 上选择了「Aero」设计语言,来源于希腊语,意同「Air」,它强调的是光照到玻璃上的光影质感。

这种更加强调静态视觉风格的拟物化「设计隐喻」随后被更为丰富动态的「设计隐喻」所替代,比如 Android 的「Meterial Design」,它的隐喻是无限延伸的「纸」:

而 Fluend Design 的核心的隐喻名为 「Acrylic」,也就是我们常说的亚克力,比起「纸」,它更近了一层,它多了半透明的视觉层次:

Fluent Design 中的不仅仅有「层」、「光影」、「延展」的概念,因为是半透明,它还有一层细腻的「材质感」。

微软的设计指南的负责人 Mike Jacobs 所说的:「这种层级的运用能够让UI极富质感,你在设计的适合处理的越仔细,最终出来的效果就越惊艳。」

在侧边栏和顶部导航中使用「亚克力」式的视觉元素。

「亚克力」这种视觉美学的好处,对于处理复杂的窗口体系是非常有效的,尤其是在处理弹出窗这样的元素的时候,它能够让底层的窗口从半透明的「亚克力」层透出来,从而让用户更明白所处的位置。这种微妙的、显隐之间的感觉,有着足够的美感。它是 Areo 美学的延续,但是得到了更为微妙完整的呈现。

延续自 Metro 的排版美学

Fluent Design 扬长避短去芜存菁的一面,就体现在这里。

它的排版设计,继承自上一代的 Metro 设计语言。去掉复杂的配色,通过不花哨但是足够清晰的文字排版来划分层级,体现信息之间的关系,也就是 Fluent Design 和微软一开始所追求的,让用户聚焦于真正拥有的信息——尤其是在这个信息过载的时代。

Fluent Design 本身是自恰的,但是它如果要延伸到其他的系统上,要做的工作并不少。

操作系统并不重要

信息过载和注意力争夺是今天所有人都必须面对的问题。

去年各大平台都在有意识地做精简和整合,twitter 地改版,Facebook 地 F8大会,包括iOS 和 Android 系统地更新,都在兼顾这一问题,而在这个大的语境之下,微软 CEO Satya Nadella说出了最重要地那句话:

「操作系统已经不再是最重要的层级了。」

对于用户而言,如果软件和服务在不同操作系统上90%以上的功能、体验和服务是一致的,那么本质上在哪个平台差别都不大。但是,对于设计师、设计团队乃至于产品团队而言,就需要面对一个问题:怎么让日趋复杂庞大的产品和服务,在每个平台上的体验都是一致的。

很多时候,想要让产品在 iOS 和 Android 平台上保持一致的体验,需要做妥协。如果再考虑到移动端和桌面端,你需要为一致性付出更大的代价,产品越复杂,需要付出的努力越多。而 Fluent Design ,就是为设计过程而生,它已经很大程度上抹平了系统之间差异的问题。

Fluent Design 和它超全面的素材

从2017年发布的最初的版本,到 2019年年底伴随 Microsoft 365 的重大更新,Fluent Design 如今已经涵盖了 Windows、iOS、Android、Web 这四个主要的分支,在微软官方的设计团队的主导之下,同开源社区、苹果、谷歌等多方的设计师和开发者,协同完成了整套设计系统的规范制定、以及相应的开发组件的创建。

如果你是设计师,想更为深入的了解 Fluent Design 的各种设计范式,那么你可以在 WIndows 平台的设计规范当中,极为详细地了解每一个视觉元素的设计原理和具体实现方式:

比如你可以在「Style」这个部分找到具体的排版、图标,包括「亚克力」效果的实现原理:

值得一提的是,Fluent Design 虽然跨平台的设计系统,但是在 iOS 和 Android 上面,它并非为了追求自身的一致而无视原有的设计规范、交互模式,而是尽可能地在原有系统的机制允许范畴内,来进行交互和体验上的约束,确保你在各个平台上的感知是高度贴近的。

所以,在 Fluent Design 的页面当中,非常完整的引用了各个平台上的具体设计规范,以及 Fluent Design 在这些平台上进行设计的时候,可以用到的各种设计资源和素材,其中包括对应平台的的 Sketch、Figma 格式的素材,相应的字体,相关的插件、乃至于各个平台的设计规范对应的链接:

戳这里进入下载页:https://developer.microsoft.com/en-us/fluentui#/resources

那么在非 Windows 平台上,功能的实现和开发上怎么办呢?最初的时候,微软在 Windows 平台上使用了自己的 UI 和开发组件库,而针对 iOS 、Android 以及 Web 端,则在 Github 上创建了一个开源项目,名为 Fabric ,在 iOS 平台上,有支持 Swift 语言的 Fabric iOS 库来支持开发,而在 Android 上,则是 Fabric Android (Kotlin),Web 端则使用的是 Fabric Web (React),它们都已经是现成的库,开发者可以直接调用,确保原生而顺畅的使用体验。

在今年 3 月 12 日的时候,微软更近一部,将原本独立的Windows 组件库也彻底和另外三个 Fabric 库合并到一起,彻底并进 Fluent Design 项目,目前它在 Github 上使用的是 UI Fluent 这个名字,可以说,此刻的 Fluent Design 从设计到开发,已经成为了一个完整而系统的整体了!

「简而言之,我们合并了两套库,UI Fabric 和 Stardust Github 仓库现在合并到一起,以 Fluent UI 的名字,统一在 Microsoft 的 Github 库当中了!……我们正在努力避免开发者因为平台的差异而来回切换,在体验和流程上被打断。」

结语

如果你是一名 UI 设计师,「亚克力美学」能够让你产生更广阔的设计想象,那么不妨下载相关的 UI 组件来研究一下。如果你所处的设计团队正在寻找一套系统化的解决方案,不妨来试试 Fluent Design。

相关链接:

引用来源:

Source: 优设网 – UISDC | 12 Apr 2020 | 8:26 am(NZT)

用一篇文章,帮你掌握「产品导流」的知识点

说到产品导流,大家都不陌生。

身为设计师,应该经常听到产品同学提需求:「在这里给 XX 功能加个入口吧」,「这个宣传新产品的 banner 可以再大一些吗」,「这个场景可以宣传下我们的新功能诶」……

很多设计师在不了解背景的情况下往往内心是排斥的,心想怎么老是在犄角旮旯里加这么多小广告啊,都不关心用户体验的嘛……

但是有谁在吐槽时,深究其背后的原因呢,举起小爪子让大牙康康。

比如:什么是产品导流?为什么需要产品导流?它有哪些形式?如何做效果好又能兼顾产品体验呢?

最近正好在搞相关的事情,所以撸一篇文章,分享一波相关思考。

什么是产品导流?

「产品导流」指的是:一款产品采用某种形式,增加对另一款产品/功能的曝光,使自己的用户群体(流量)去使用或探索另一款产品/功能。

眉头一紧,感觉上面的描述有点拗口,善良的我尝试着用大白话,把导流和被导流的关系,分为两种形式解释下:父子关系;兄弟关系。

1. 父子关系

画风是:「爸爸,大腿借我一抱吧」,比如:「抖音」里增加「多闪」入口,「微信」里增加「微视」入口,通过自家体量大的产品(爸爸)给自己导流。

2. 兄弟关系

画风是:「外面环境恶劣,是好兄弟,就互导一下吧」,比如:京东的会员可以享受爱奇艺的会员福利,同辈之间互相导流。

所以,这么说就好理解什么是产品导流,和它们之间的关系了吧。

产品为什么需要导流?

产品之间导流的目的,大致分为两种:获得新增;企业生态。

1. 获得新增

试想你费劲巴拉的搞了个新产品,没人知道,也没人来用,就算你产品做得再妖娆,是不是也白搭,更不用说后续的商业变现之类的。

所以,这个时候如果你有一个相对成熟的产品(爸爸)大腿,让它给你导流,实现一波冷启动,是顺利迈过第一个坎儿的手段。

当然,在目前激烈的竞争环境下,不仅是新产品需要导流,扩大规模和获得新增流量,是每一个互联网企业里产品或运营同学 OKR 中必不可少且令他们头秃的一项指标。

所以,不管是新产品,还是相对成熟的产品,都需要通过导流的手段,来获得新增用户。

2. 企业生态

「产品导流」除了为了获得新增,还有就是为了企业生态的体验闭环。

做成一款产品的公司很牛逼,但是如果能够持续做出一系列牛逼产品的公司,一定有成功的基因,或者有一套做事儿的逻辑。

比如:亚马逊的飞轮效应,要想形成飞轮,打造自己的生态,业务上就得有自己的闭环,并且闭环上的每一个步骤都可以为其它步骤助力,其次就是以第一个飞轮作为根据地,拉动周边其它业务,形成第二个或者更大的飞轮。

这个时候,就需要各个业务线之间的互通及联动(互相导流)了。

比如,阿里也是在打造自己的生态,产品之间相互赋能和联动,一旦建立起来这些基础设施后,壁垒和护城河就非常坚固。

整体来看,「产品导流」不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。

产品导流的形式有哪些?

目前,市面上导流形式大致有以下几种:场景化导流;会员制捆绑;固定入口扶持;广告位推荐。

1. 场景化导流

场景化导流,翻译成大白话就是,让导流的过程更加无缝衔接。

这种做法,能兼顾用户体验,同时对导流量也更有利,一般用于「功能」层面的互通。

比如,用户正好需要 XX 产品或功能,你见缝插针地增加导流入口,同时功能和设计元素也跟母产品保持一致,这样用户不会觉得干扰或反感。

类似这种做法的产品比如:QQ & 微云,抖音 & 剪映;视频号 & 公众号……

QQ&微云

我们用 QQ 聊天时,好友之间总会有一些分享文件的行为,有「分享」就有「接收」,有「接收」就有「保存」的诉求,在这种场景下,QQ 聊天页面里用户长按当前「文件」,就可以将文件保存到「微云」上。

除此之外,QQ 首页点击左上角的侧边栏,能看到一列与「我」相关的功能入口,其中有一项是「我的文件」,点击进去后就能看到「我」在 QQ 里消费过的历史文件。

同时还有「微云」小程序的入口,点击直接跳转至微云小程序(做得很服帖,跟自体脂肪填充似的,导流过程不会让用户感到突兀)。

除此之外,微云作为基础的云存储能力,也在跟腾讯系的 QQ 音乐互通,满足用户将下载的歌曲保存到「微云」。

这么做,不仅满足了 QQ 音乐用户的存储诉求,还提升了 QQ 音乐的登录率(用户想要使用音乐网盘,必须先登录),同时增加了 QQ 音乐用户粘性(用户一旦在一款产品上存下自己的东西,就会存在迁移成本),最后还为微云带来了新增用户(更多 QQ 的用户使用微云进行存储),扩大其规模。

这样的互通/导流手段,就实现了产品间 1+1 大于 2 的效果。

抖音&剪映

刷抖音的兄弟们应该经常见很多视频下面有一个小标签,叫「剪映-抖音出品」(意味着博主的那条短视频是用剪映做的)。

很多人看到好玩好看新奇的短视频,都会觉得真香我也要剪同款,因此抖音就是这种恰到好处的投喂给你,点击标签,直接跳转到下载页,如果已经安装了的用户,可以直接进行剪同款。

抖音不仅送你出去,还负责接你回来,一条龙服务给你安排(导)得明明白白的。

比如,当你剪辑完成后,就引导你回抖音里分享,毕竟他们不希望你剪完之后保存到本地然后美滋滋去竞品(快手之类的)分享吧。

他们的目的就是,不管你怎么折腾,也逃不出我大字节的手掌。

包括,最近的视频号,发完视频号还能附带公众号的链接,高频带低频,通过公域流量,帮助作者往私域导流(顺便做个广告,快去关注我的视频号:大牙兄,哈哈哈)。

所以微信现在的导流方式是:视频号能够链结公众号,公众号能够挂小程序,小程序又能开直播,直播又能去变现。

整体来看,场景化地进行导流,更适合「功能」层面的互通,满足用户和企业的诉求,还平衡了产品体验,相对更加丝滑。

2. 会员制捆绑

会员制捆绑,已经成为互联网常见导流+变现的方式了,指的就是用户在你这买了会员,在别的合作产品里也享有它们的特权福利。利用用户「爱占小便宜」的心理,产品间互相导流。

比如我们常见的方式有:88 会员、联合会员等。

88会员

88 会员算是阿里生态体系的重要布局了,也就是你开通了 88 会员,阿里系的很多产品你可以劈着叉去用,而且很划算。

比如,饿了么会员每年 108 元,虾米每年 128 元,优酷每年也差不多 180 元,还不算其它的,这些价格在用户心中已经是锚定价格,加到一起怎么着也大 1000 了吧,跟 88 元一比,稳赚不赔啊!

我们来看看 88 会员里包含什么,各种阿里系的七大姑八大姨的产品都包含进去了,从吃饭、购物、娱乐、旅行再到看病,生活里的方方面面都包含了。

所以,我身边的人开了 88 会员后,画风是这样的:明明想用 QQ 音乐听歌呢,不!我是 88 会员!我要去用虾米!明明想用美团点个外卖呢,不!我要去饿了么!明明我想去爱奇艺看看视频呢,不!我要去优酷看!(不过他们如果想看「淡黄色长裙蓬松的头发」还是得去爱奇艺)。

可以看出,阿里用这套会员体系,把用户死死的框在(导流)自己的产品矩阵中了,产品群们被自己爸爸 carry 的明明白白的。

联合会员

联合会员跟上面说的 88 会员有点类似了,只是 88 是自己企业内产品的互相导流,而很多联合会员是跨公司,跨界整合资源。

比如,京东的 PLUS 京典卡,就是跨公司跟别人合作,有和腾讯视频、酷狗音乐、喜马拉雅、携程、爱奇艺的联合会员。

其实也能看出,京东和其它产品这么搞,也是对阿里系的反击,没有爸爸,只能兄弟之间互相导流,抱团取暖,一致对外了。

3. 固定入口扶持

固定入口扶持,一般出现在规模较大的平台级产品上,它们利用自己的流量优势,在固定位置给自己的子孙/兄弟产品们导流。

扶持下一代,努力做到子又生孙,孙又生子,子子孙孙无穷尽也。

比如:淘宝、支付宝、美团,在首页金刚位给自己企业相关产品导流,同时也补足/丰富自己产品的其它场景。

比如,各家的小程序,也是相对固定的入口给自己的产品或第三方产品进行导流,完善自己的产品生态。

4. 广告位推荐

广告位推荐的导流方式应该是大家非常熟悉的了,它区别于上面的导流方式的核心点在于一般是产品/活动的介绍,引导安装之类的,形式大致分为:闪屏、 banner、角标、feed 流……

闪屏

闪屏指的是用户在使用产品时,打开的第一个启动页。

用它进行导流的优点就是全屏沉浸展示,用户的目光就聚焦到这里了,但缺点是:时间短,如果在短时间内传达不清晰的话,很容易一闪而过,钱就白花了。

所以,闪屏的导流,最好找重叠用户较高的产品,比如,在汽车之家闪屏投个刮胡刀啊,在亲宝宝闪屏投奶粉啊之类的,用户在短时间内好接受好理解。

投放越精准,对产品体验和对广告主的导流效果越好。

角标

角标导流这种形式,在电商类平台搞活动的时候经常见,各种小角标纷纷出来拉客,角标的着陆页一般都是活动 H5 类型的居多。

这种形式的优点在于能够一直常驻,不像闪屏,闪一下就没了,它只要用户不手动关闭就一直在这杵着。

但对于设计师的挑战就是,如何在小小的区域里,把被导流的产品/活动核心利益点传递清楚,吸引用户点击。

而且,这种形式也要谨慎使用,如果乱七八糟的飚小角标也挺伤害体验的。

Banner

Banner 位的导流大家更常见了,一般都是自己家产品/业务,夹杂着第三方广告推广,无限轮播着进行导流,大家都太熟悉了,我就不啰嗦地说了。

Feed流

一般资讯类或者社区类产品,喜欢用这种方式进行导流,因为用户在其产品上的核心操作就是撸 Feed。

所以,撸着撸着给用户投喂一个通过算法推荐的广告,然后再把广告包装成跟 Feed 内容很相近的设计,吸引(pian)用户点进去,从而进行导流。

比如: 知乎、最右、百度、头条

不得不说第二张「最右」的推荐内容,让我不禁抚摸了下自己的胡子。

不过除了最右给我推「大胸妹子」,百度给我推「游戏」,头条给我推「汽车」,难道在他们的算法中,我是个油腻中年男?

看来他们的人工还不够智能,机器还得再学习学习,大牙对你们很失望。

总结

总的来说,「产品导流」不仅有助于新产品获得冷启动,还有助于相对成熟的产品扩大规模,同时从整个企业生态来看,矩阵产品的互相导流,协同发挥优势,也有利于打造体验闭环,建立企业壁垒。

形式大致分为:

但是,不管什么导流形式,导进来的用户,只有看到满足他们诉求和预期的着陆页才是最关键的,不然就算给你再大的流量入口,用户搞不明白该走还是会走。

同时,也不能为了导流而不分场景的尬导,这样很容易伤害原有产品的用户体验,捡了芝麻,丢了西瓜。

希望这篇文章对你了解产品导流,有一点帮助。

欢迎关注作者的微信公众号:「大牙的设计笔记」

Source: 优设网 – UISDC | 12 Apr 2020 | 4:11 am(NZT)











© 澳纽网 Ausnz.net