澳纽网

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



万字雄文!手把手教你打造交互作品集!

前言

最近半年,一直有设计师请教我如何培养交互思维,在行业日渐饱和的情况下,设计师们也意识到了「交互思维」的重要性,不约而同的希望我能帮助他们更好的在工作中或者作品集中体现交互思维。

在此期间,我也做了很多功课,询问了很多大厂做招聘的朋友,总结了很多规律,受邀参加了很多次分享,所以这篇文章其实是倒逼自己对「如何在作品集中体现交互思维」做一次总结。

在整理之前,我想先聊一聊市场是什么样子的,为什么我们要学习交互思维。

1. 市场现状

UI 设计师已经不再是那个只要能够画好界面就能轻松找到高薪的工作了,更多的设计师涌入造就了更高的门槛,这就意味着只有掌握更高的能力,才能不被时代淘汰。(但很多人因此对这个行业产生恐慌,我觉得是没有必要的,因为这才是这个行业的常态)

所以,UI 设计师自然得往三个方向分化。

但无论往哪个方向发展,界面设计终究是基本功,但交互能力,视觉能力以及编程能力现如今也不是附加题。如果把基础界面设计能力比作大学的基础课,那其他三种能力更像是设计师的专业课,可以选择但也是必选其一,否则就会被不断发展的市场所淘汰。

3. 挖掘你的交互思维

交互思维是挖掘的而不是培养的

言归正传,有些人会说交互思维是培养出来的,我不敢苟同。交互思维人人都有,只是我们不常使用而忽略了它的存在。

举个例子,我们平时也会去作为用户使用一些产品,其实内心都会对产品的好坏有一个评测,这其实就是我们的交互思维在潜意识里运作的结果,让你觉得:嗯,这个产品不合理。

尤其是第一条和第四条一定深入人心。银行软件的难用是人尽皆知的,而大部分人也都出现过在一个平台用不同的信息注册了两个账号,导致了一些棘手的问题。

如果你曾经有过上述的想法,那么证明你是有交互思维的,只是需要更好的方法论帮助你「挖掘」更开阔的思路。所以,让自己成为用户,站在自己的角度思考问题,才是迈出培养交互思维第一步的好方式。

如何在作品集中体现交互思维

在给很多设计师梳理思路后,我逐渐捋清楚一套成体系的方法论,我将一个完整的产品改版拆分为以下五个模块。但是很多设计师在阐述改版思路时,往往只重视阐述「改版原因+成果验收」这两个模块。(尤其是作品集中这种趋势体现的更加明显)

这就是在工作时没有规范的工作模式,或者只做了执行层面的内容,导致最终自己在工作中话语权低,面试时无话可说。就如同下面的设计师作品集节选,可以看出作者本身实力不差,但是单薄的内容和逻辑的不足很容易让人对其专业能力产生质疑。

1. 延伸拓展

作品集应该从「专业度」和「工作量」两个方面进行体现,凸显个人才华的内容可以展示,但是不能当作重点,让面试官信任你能胜任工作才是最终目的。

什么是专业度和工作量?

我们知道,真正进入工作,能够高效率产出的往往不是设计能力最好的那个人,而是具备综合能力的人。

这些能力其实就是你的专业度的体现,你会发现设计能力只占其中很小的一部分。而这些统称为你的「专业度」。

工作量的定义就非常简单了,指的是你工作时完成任务的数量。

有哪些体现专业度和工作量的例子?

举一个很简单的例子,大部分人在作品集中体现图标设计时,都是从设计角度出发来分析图标制作过程、改版过程。像下图这种:(文章中所有配图均以保证观感为主,不以作品集的包装方式进行设计)

而我有一个非常爱研究的朋友,我就让他将他研究的「图标标准制作流程」放在了作品集中。

这就是专业度的体现的一种方式,他不是单纯的设计能力,这种将一个细节处理到极致的态度,即可体现设计师的解决问题的能力,横向延展的能力以及对待事物的态度,那么这样的作品集,才可以给面试官留下一个立体的「人」的形象,而非单纯的作图工具。

工作量指的又是什么呢?

一般的设计师在做改版迭代时,往往内容上单薄且说服力不够。

真实的工作环境中,往往一次改版需要多次迭代才能得到最终的结果。而通过迭代的过程,才能体现设计师在其中的思考与价值。

怎样体现专业度和工作量?

专业度:其实在文章开头我已经给出了答案。通过之前总结的改版的五个步骤,即可提升大部分的设计师的设计能力与交互能力专业度。

除此之外,还有一些其他的方法。比如通过翻译一些外文文章,来向面试官展现自己的外语能力以及资源整合的能力;更有甚者可以通过接国际外包来综合提升自己的能力。(最近好多设计师想要加入我们团队也是这个原因,希望我能带他们做一些国际订单。)

工作量:需要设计师在日常工作时有总结思考,以及保留飞机稿的习惯。将自己的工作内容输出成可供他人观看、分享与观看的能力也是在这个时代设计师所需要具备的能力。

下面我将以一个设计师朋友的例子切入分析 ―― 如何做好一家旅游类 App 的「撰写评论功能」。(由于不方便展示作品集中的真实案例,我会对以下案例进行脱敏处理,不代表任何上线产品。)

以「撰写评论功能」为例讲解改版思路

1. 改版背景

评论区始终是很多产品头疼的一个功能,他对于产品有必要性,但同时大部分用户却不愿意在服务后给予评论。这次我们就围绕着某旅游 App 「撰写评论」 功能来分析如何改版,才能真正有理有据的,既能解决用户的痛点,又能解决产品的痛点。

原版流程与页面如下:

2. 改版原因

改版原因可以分为两点:理论推导原因以及实际数据证明。

这跟验证一款新药疗效的逻辑是一样的。我们既要从药理学中得出结论,新药安全且可以攻克疾病(理论推导)。又要有临床研究,证明药物确实可以帮助病人治愈疾病。

在阐述改版原因时也是如此,既要从道理上阐述,为什么要改版?也要有实际案例来证明,我们的改版是最终可以取得效果的。

理论推导01:没有人用的「撰写评论」功能(改版目的)

我在很多分享会和公开课上问过很多人,即使在淘宝平台,也只有 5% 不到的用户能够做到每个商品收货后都评论,同时有 60% 的用户几乎不评论。所以「撰写评论」这个功能几乎像 bug 一样存在于诸多 App 中。

那么为什么这样一个功能,却被很多行业一直保留到现在呢?我们只需要站在用户立场去考虑即可得到答案。

在购买商品时,评论数量的多少,质量的高低是我们购买一件商品的重要指标。这是一个链接商家和用户的强有力的纽带,没有人评论的商品,几乎没人愿意冒险购买。这就是为什么要一直保留的原因。

那么综上所述,自然可以得到我们对于评论区改版的目的,即在不破坏用户体验的情况下,尽可能多的让用户参与到评论中来。

理论推导02:评论区改版是迫切需要被提上日程的(改版的必要性)

说完目的就要说必要性。为什么我们产品有那么多需要改进的内容,为什么偏偏需要先改版评论区呢?

「波士顿矩阵」就是一个很好的对改版重要性进行排序的一个工具。

通过波士顿矩阵,我们可以把产品所有的功能按照对用户的价值高低以及对公司战略的价值高低分为四大类别。「撰写评论」的功能是一个对商家、平台高价值的需求,对用户体验低价值的需求。

所以在波士顿矩阵中,它属于「现金牛需求」中的一种,这是除「明星需求」外能够提高转化率的第二大需求类别,所以在已经进入维持存量市场阶段的旅游类产业,如何利用好现金牛需求就是产品增长的关键。

实际数据01:众家 App 竞相鼓励用户评论(线上数据)

通过运营活动提升用户评论积极性的京东。

京东的「评价官」活动,以诸多权益来提高用户撰写评论的积极性,从而提高评论的数量和质量。

提升「沉没成本」的饿了么与美团外卖。

「饿了么」与「美团外卖」在当用户退出时,会提醒用户他们将要损失的权益。这两款产品同时使用损失厌恶提高用户的沉没成本,从而让用户完成评论过程。

没有鼓励用户评论机制的淘宝。

淘宝为什么没有鼓励用户评论的机制?淘宝本身已经累积了巨量的客户,某个商品的评论不佳对淘宝的影响微乎其微。所以自然淘宝会更加从用户体验的角度出发去思考问题,所以自然它将引导用户评论的责任转嫁到了商家身上。这也就是我们为什么会看到,即使淘宝平台明文规定的违规行为「好评返现」却屡禁不止的原因。

实际数据02:多数量的评论对于商品转化率有显著影响(科研数据)

在人人都是产品经理中,有一篇文章专门提到了原创评论对于商品转化率的显著性影响。

据 Yotpo 数据显示,平均而言,没有查看评论的购物者转化率仅为 2.16%,而查看评论的购物者的转化率为 5.65%,这就是用户评论所带来的显著结果,下面则是不同行业的平均转化率的细分:

这样,改版的原因被论证完毕。

3. 改版调研

用户调研

通过用户调研,我们归纳出了用户主要的痛点在于:

具体如何做用户调研相信已经有很多同行写过文章详细的讲述过了,在此不再赘述。我只提醒三点大家在用户调研时容易犯的错误:

接下来的所有内容,将围绕着用户的痛点进行分析。

竞品分析

通过竞品分析,来观察竞品是如何优化「撰写评论」功能的。

首先对市面上的主流产品做筛选,最终确定了以八款产品为例来进行调研。分别是:淘宝,京东,美团外卖,大众点评,饿了么,美团,滴滴出行,马蜂窝旅游。

干货预警

我们已经知道了其他产品是用了什么样的方式来优化「撰写评论」功能的了。此时,我们再对之前的内容做一份总结。

有了比较全面的分析之后,我们就可以游刃有余的去思考我们的产品应该如何改版了。

4. 改版迭代

在得知用户痛点后,我们就可以通过制定一些具体的改版目标来约束整个改版的方向。所以,改版目标分为以下几点:

版本1.0

评论维度过多是用户难以完成流程的重要原因。所以在这里我们可以利用登门槛效应,通过让用户不断的完成小目标从而减少用户对于过大目标的畏难心理。

那么此时我们就可以做出我们1.0的撰写评论改版。

版本2.0

在解决了绝大多数用户的评论成本问题后,我们就需要分离不同用户的行为,对用户设计专属的行为路径。首先思考一个问题,用户在购买流程结束后会积极主动撰写评论?

针对第一类用户,我们可以将刚刚制作的「第一重评分维度」作为用户对商品满意度的筛选器,如果用户满意则直接结束流程,用户不满意则通过给予更全面的表单来帮助用户表达。

此时,由于我们增加了更多的信息,我们版本1.0中很多元素的排布方式在版本2.0中就不适用了,此时为了照顾到整体的功能不混乱,需要重新设计信息层级。

针对第二类用户,我们可以在弹窗中加入进入「撰写详细评论」页面的渠道,让用户可以有渠道发表更详细的感想。

经过一系列的改动,最终我们还是回到了最初的页面,但是用户体验流程更加完整并照顾到了更多用户的行为,那么这就是提升用户体验的一种方式。

我们通过一张流程图来观察我们具体的改动内容。

大多数产品在发展初期时只能够给用户提供一种行为路径,没有细分用户的使用场景就会让用户体验极差。

这也是为什么大厂产品体验良好的原因,在完成产品初期架构和框架搭建后,他们用更多的时间将产品从满足 80%  的用户到满足 99% 的用户,这在大多数人看来是一种性价比很低的行为,但却是提升用户体验的绝佳方式。

版本3.0

在撰写评论时,用户的行为可以被分类解决。同样的,在进入「撰写评论」功能的流程中,用户行为也可以被拆解,从而针对不同的用户行为,制定不同的方案解决「入口深」的难题。

版本4.0

接下来我们就可以通过上一章竞品分析中得到的结论,按照「解决问题,覆盖全面,情感补充」三个步骤,来改良我们自己的产品了。最终,我们把上述所有的迭代记录和最终结果呈现在作品集中,就可以真正的体现出了我们设计中的专业度和工作量。

5. 规范输出

很多人认为最终结果展示完毕,功能改版就结束了。但是在公司的正常流程中,我们往往需要对项目进行整理复盘,从而得出对团队有价值的规范性文档或者方法论。

标准工作流程即是如此,在制作作品集时同样如此。设计是设计师的基础能力,但是更重要的是独立思考能力,以及如何能为团队创造更多的价值,这才是公司更看重的能力。

其实细心观察可以发现,我已经在文章通篇都在做规范化输出和总结了:

1. 如何确定改版的优先度?

通过「波士顿矩阵」来分析需求层级,对功能改版的先后顺序进行排序。

2. 如何对一个功能点进行快速的迭代与改版?

通过观察竞品 App 的功能相关内容,倒推提升用户体验以及提高产品转化率的优化点。这样无疑是最高效便捷的方式。

3. 在做用户调研时,新手最容易出现哪些问题?

只能跟用户提及产品存在的问题,而不能利用更专业的知识和对产品的熟知去和用户理论,更不能轻易让用户提出解决方案。

用户体验有时会和产品目标冲突,所以有时候我们并不能一味的帮助用户解决问题而忽略了商业诉求。

用户的问题并不一定是产品的真正问题,有些时候我们不能一味的解决问题,我们应该从用户的话语中去提炼他想要达到的目的,再从目的去出发寻找达到目的的最简单的方式。

4. 在做改版迭代时,可以从哪几个角度去思考问题?

解决问题、覆盖全面、情感补充,从这三个角度去思考一个功能点的优化方向,这三个思考点是相辅相成,层层递进的。

三个角度是在改版过程中都需要考虑的,往往很多人只考虑到「解决问题」就戛然而止,全然不考虑通过「覆盖全面」去优化用户体验,通过「情感补充」去提高用户积极性,是不可取的。(很多人认为做到了改版 1.0 其实就解决了此次的问题)

并没有按照顺序去思考与解决问题,直接通过高度的情感补充去解决用户体验不好的问题,最终导致事倍功半。

5. 对于属于现金牛需求的功能,有哪些可以复用的方法论?

由于现金牛需求本身就是用户所不喜爱的功能,所以可以采取以下的角度切入改版:

这是在方法论层面的规范和复盘,其实并不完整,很多改版还伴随着设计规范的制定,以及设计样式的复用,有机会和大家分享。不过能够理解方法论如何复盘的话,自然就能顺藤摸瓜明白如何在作品集中体现「设计规范的制定与设计样式的复用」。

6. 成果验收

这部分其实也是相当重要的一部分,分析与工作是否真正取得了效果,就是以最终数据作为判断标准的。那么有哪些数据指标是可以在这次改版当中当作参考数据的呢?大家可以去关注我下一篇关于《设计师需要了解的数据指标》的指南性手册来了解。

今天的课题主要围绕着「如何将产品思维与交互思维应用到改版设计」当中,在此也不再赘述。

后记

市面上很多撰写交互相关的内容,大多数原意就已经存在的产品去分析优劣。但是去分析别人的产品只能令初学者知其然而不知其所以然,所以我想自己通过记录自己对别人的改版指导,去剖析过程,记录方法论。以此来帮助更多的设计师跨越「交互思维」与「产品思维」这个门槛。系列文章的名字还没有想好,有主意的同学可以给我出出主意,兴许就有 1v1 专属辅导送上。(继上次数据可视化篇更新的 Flag 后又立了一个 Flag ,我迟早有一天会遭报应的)

欢迎添加作者微信:

Source: 优设网 – UISDC | 13 Nov 2019 | 7:04 am(NZT)

韩国天团 EXO 的最强视觉企划之道 Vol.1

10月31日伴随着「月掩木星事件」,EXO官博便正式放出天团11月27日即将带着第六张正规专辑《OBSESSION》回归的消息。

熟悉EXO的同学会知道,EXO的每次回归都必观天象 。不仅日期梗和时间掐点屡试不爽,还会通过专辑正式发布前预热阶段公布的新Logo和预告照与爱丽们(粉丝名)大玩烧脑游戏。从回归的日期到公开预告的顺序,从Logo设计到视觉演绎,处处都暗藏玄机。

这一次,Logo的新形态由两面交叠在一起的旗子组成「EXO」 标志,放大之后看细节还能清晰可见旗杆上的斑驳痕迹。而预告视频则是以新闻版面的形式展现了六位回归成员的热谱图,神秘感满满。

深谙SMTOWN(SM)公司策划之道的爱丽们,早已迫不及待开始了对新视觉的各种探秘研究。很多人推测,此次专辑的主题可能与和邪恶能量的战斗有关。究竟新专的概念为何,再过两周待专辑发布答案自见分晓。

在发展成熟的韩国娱乐产业,塑造「人设」是公司包装偶像必不可少的一环,而SM公司更是深谙其道的佼佼者。每一代男团女团都有自己独特完整的团队定位与个人概念的企划来支撑他们后续偶像之路的发展走向。

SM企划部对天团EXO的包装,更是将这种人设塑造与Storytelling结合视觉设计运用到了极致。制定男团的概念,为每张专辑讲好一个故事或是策划一套绝美的视觉企划,SM对于EXO的包装远不止如此。

来自「EXO PLANET」缩写的「EXO」意为太阳系以外的外部行星,表达了男孩们是从未知世界来到地球的新星之意。EXO星球也并非凭空虚构,而是源于一颗在2008年7月24日由欧洲宇航局发现的天体—-「CoRot-Exo-4b」。

团队里每位成员都被赋予独特的个性和「超能力」设定,还拥有属于自己的图腾。

从队名「EXO」的由来以及成员人设的设定就能看出,公司从一开始包装这个男团就为他们构造了一个完整的属于EXO的世界观概念。出道七年,每张专辑虽有新的主题与设计却一直延续着最初的EXO世界观设定,让所有故事都被串联起来。

除了脑洞大开的高水准概念产出,优秀的视觉企划与执行也是让大家对小天团津津乐道的点。SM公司更是凭借对「EXO」的Brand Identity (品牌识别) 企划成为首家以歌手的Logo及专辑设计获得德国「iF设计奖」的韩国娱乐企业。正规1辑《XOXO(Kiss&Hug)/Growl》以及冬季特别专辑《12月的奇迹》还都获得了素有「产品设计界奥斯卡」之称的「iF包装设计奖」。

EXO的每次回归,都会在专辑发售前释出 Logo 的全新视觉演绎。将一个 Logo演绎出无限的可能性,借由小小的 Logo 再设计传递出每张新专辑深刻的内涵信息引发粉丝的无限联想,设计团队深厚的功力可见一斑。

历年Logo设计大赏

2012 《MAMA》

[/m]

2012年EXO的出道mini专辑 Logo。六边形的空间被「X」分割成三块轮廓似「E」「X」「O」的形状。抽象前卫的 Logo视觉简洁有张力,让人耳目一新。

2013 《XOXO》/《Growl》

2013年正规一辑的 Logo,将「X」和「O」字母的形状与心形图案相结合,呈现了主图「XOXO」亲亲抱抱的概念。K+M队第一次合体的后续专辑《Growl》也沿用了此 Logo的设计。

WINTER ALBUM《十二月的奇迹》

除了正规辑,EXO还有发行冬日圣诞专辑的传统。将冬日的意象与「EXO」标志的图形做巧妙结合是每次冬专Logo设计的切入点。比如将Logo的形象与冰雪融合。

2014 《OVERDOSE》

2014年的mini专辑运用了六边形迷宫的意象来设计「EXO」的标志,呼应了主打歌「陷入爱情难自拔」的概念。

2015 《EXODUS》

2015年的正规二辑《Exodus 》概念为「逃跑」,旋转中立方体的楞组成Logo「EXO」的字样,也组成了平面的六边形呼应了之前的Logo设计概念。

2016 《EX’ACT》

2016年的正规三辑《EX’ACT》,Logo设计采用了化学结构式的形式来呈现。「E」「X」「O」「A」「C」「T」6个字母加上数字「3」构成六边形的各个端点,箭头则示意了 「EX’ACT 」与「 EXO 」的
阅读顺序。

三辑主打歌 《Lucky One》 的 MV

这一次,代表「好运」的四叶草组成了「EXO 」的标志。

三辑后续专辑《LOTTO》

三辑主打歌《LUCKY ONE》MV的四叶草标志,后来被运用在了后续专辑《LOTTO》的封面设计上。四叶草与赌场筹码的结合,延续「运气」的概念。

三辑主打歌《MONSTER》

三辑的另一首主打歌《Monster》则是将Logo形象与骨头结合,直观地传达出歌曲「怪物」的概念。

2016 《hey!MAMA》/ EXO-CBX

2016年,由EXO成员伯贤、秀敏和钟大组成的小分队「EXO-CBX」发行了自己的小分队一辑《hey!MAMA》。 Logo 为一个动态翻转的正方体,三个面对应三个人的姓名首字母「CBX」,另外三面则是呈现「 EXO」的形态。静态标志依旧延续「EXO」的六边形概念。

WINTER ALBUM《For Life》

2017 《THE WAR》

2017年,EXO的正规四辑《THE WAR》发行。这一次的Logo视觉企划选择了植物为元素,3款含义深刻的植物舒展开的形态构成「EXO」的经典标志形象。

第一款植物「天堂鸟」需要花费4-5年的栽种时间才能开花,与EXO出道五周年的寓意正好相呼应。第二款Logo由「月桂树」的树叶来呈现,用来编织桂冠的月桂树枝象征了荣誉。棕榈叶演绎的第三款 Logo则展现了专辑主打单曲《Ko Ko Bop 》的热带风情并蕴含「胜利」的好意象。标志右侧的九片叶子,代表现役的九位成员。

四辑后续专辑《THE POWER OF MUSIC》

四辑的后续mini专Logo与其主打歌《Power》MV 的漫画风一致,由九只健壮的手臂拼成经典的「EXO」六边形标志。充满青春的热血之气与力量。

WINTER ALBUM《Universe》

2018 《DON’T MESS UP MY TEMPO》

2018年,EXO带着正规五辑《DON’T MESS UP MY TEMPO》回归。Logo以机车的表盘为灵感,字母「X」将表盘分为三大区域,结合动态摇摆的指针组成抽象形态的「EXO」标志。表盘的九个凹槽代表着九位成员的全体回归,而表盘指针指向数字「5」则代表着五辑的含义。特别巧思的地方还在于,表盘指针的转动其实结合了主打歌《Tempo》的 节奏而设计。

五辑后续专辑《LOVE SHOT》

五辑的后续专辑《Love Shot》以钻石为元素完成了Logo的设计。钻石顶部的切面构成抽象的「EXO」六边形,正面则是用「EXO」字母形态的心形切面致敬了2013年一辑《XOXO》的心形Logo形象。

2019 《OBSESSION》

将在11月27日发布的正规六辑《OBSESSION》,Logo由两面交叠在一起的旗子组成「EXO」形象。期待它带给我们更多惊喜的视觉形象。

除了Logo设计,EXO的专辑包装与周边设计、MV的视觉与故事策划同样精彩。未完待续,我们下一次见:)

PS:本文仅对EXO的企划设计做解读和分享,不涉及对茶蛋其他情感倾向的观点表达
Peace & Love :)

Source: 优设网 – UISDC | 13 Nov 2019 | 7:03 am(NZT)

试图颠覆在线文档协作的微软 Fluid Framework,到底有什么独特之处?

一次会议的演示文稿,通常是一个 .pptx 格式的文档,而日常来往的邮件附件里的文档则多是 .docx 和 .pdf 格式的文档。当然,设计师更熟悉的可能是在 Adobe Photoshop 中可以打开的 .psd 格式的源文件。

我们熟悉了这种各司其职的格式体系。

而网络正在改变这种格式体系。各种服务和功能大都「在线化」,大家都熟悉在线看视频,已经不会去分它是 .mp4 还是 .flv,在线音乐是 .mp3 还是 .flac 已经无人在意。而更为重要的文档和效率类的服务也是如此,且不说微软的 Office 365 和相对更加轻量的 Google Doc,国内的 腾讯文档和石墨文档等在线文档工具,让我们越来越少地接触带有.docx 后缀的本地文档。当然,这并不是意味着本地文档就此消亡,但是这种去本地化的趋势非常明显。

如果文件的格式已经不再清晰可见了,那么概念的界限自然也会逐渐淡化。一个记录文本的文档和记录表单的文档为什么不干脆融合到一起,并且适应用来展示的需求?当然可以。

今年年中在 Microsoft Build 大会上微软展示的 Fluid Framework 就做的更加彻底。

打破格式界限的一体化文档服务

无论是源自 Word 里面的富文本还是 Excel 当中的表格,它们甚至不用以单一完整的文件而存在,它们在网络上传递的时候,将会是一段简短的链接。但是在 Fluid Framework 的支持之下,呈现出来的,则是一段可交互的、具备编辑功能的、带有内容的模块。

说起来,并不难理解。在有 Fluid Framework 支持之下,任何网络环境都会是一个简单纯净的画布,一个可以承载不同类型文档和功能的空间。整个 Office 庞杂功能体系,你都可以按需取用,提取出来拉到 Fluid Framework 中使用。

「我们确实需要在关键领域,针对核心技术进行创新,」 Microsoft 365 负责人Jared Spataro在接受The Verge采访时说道:「 Fluid Framework 是我们既是协作创新的新方式,也是未来承载各色内容的文档的新载体。」这种新的文档框架让用户能够拆解不同类型的内容,并在不同的应用场景和不同文档中轻松地取用。

Spataro 还说道:「Fluid Framework 沿用了一部分以往文档的概念,但是将这些格式和文件彻底拆碎、打散,然后用云端的网址链接将它们逐一代替代。不同的链接承载放置不同的内容和组件,因此从文字到表格,再到图形化的可视化内容,所有这些都可以随意地整合,轻松集结在一个地方。然后,Fluid Framework 让你实时访问所有这些内容,因此它是动态的,可交互的,是完全可协作的,并且可以便捷共享的」。

面向下一个时代的交互模式

作为一个尚且处于早期阶段的服务,目前Fluid Framework 还只是打通了 Office 自家的文档体系。但是即便如此,这意味着你可以将任何一个文档当中带有相应功能的内容,无缝地与人在 诸如笔记工具 OneNote 随时随地嵌入 Excel 的模块和丰富的表单、即时通讯工具 Teams 中加入演示文稿,并且和同事一起修改其中的样式,替换图片,增删动画而无需离开,你甚至可以直接在你网页的 Outlook 邮箱里面,直接编辑当月网站数据所生成的表单和相应的柱状图。

当然,这还不止。人工智能功能的加入,让 Fluid Framework 可以做到更多事情,比如发布会现场所演示的,实时发布信息,然后 AI 协助将信息实时翻译成不同的语言,分发给不同国家的同事。

 

这种全新的功能,让内容协作中间大量复杂的概念和环节都被移除了,这种程度的变化是惊人的,它意味着交互的模式,从最底层的概念到呈现的方式,都发生了改变,而这种改变还会随着产品迭代和时间推移,而进化得更加智能、无缝、微妙。

Spataro 总结道:「不同格式的文档,一直是人们思考如何制作内容的思维框架。但是 Fluid 往后退了一步,重新审视了一下这个既有的体系,然后展现了一个新的可能:我们不再需要这些主导一切的文档格式和不同类型的文件。我们不用在处理表格的时候就必须联想到 Excel,写文本的时候也不必去限定工具必须为 Word,而可视化内容的展示也不再拘泥于 PowerPoint,你可以在任何地方用任何类型的内容,我要说的是,我们不再有文档了,我们拥有一个无所不能的画布。」

而这个全新的东西,最近刚刚开始对外开放了申请入口:

Fluid Framework Developer Preview

从3G时代就开始的探索

当然,如今看起来颇为具有想象力的 Fluid Framework ,它的核心思路其实并不是什么新鲜东西。

在线协作的概念由来已久,《连线》杂志前主编凯文凯利在他1994年出版的《失控》当中早已提及相关的概念和想法,但是在如今实际上要打通新的领域,纳入一个新的格式,加入一个新的功能,都需要足够的基础才行。

Google Wave 是这个领域的先行者。在一个画布之下,进行多格式、多样式、多人在线协作,几乎完全无界的在线协作模式是令人炫目也让人无所适从的,这一产品最终失败了,但是它在技术和架构上的遗产足以反哺出 Google Doc、Google Drive 这种级别的产品。

Google Wave 的想法在当时确实略有一点天马行空,实际应用场景和需求并没有跟上,对于网络带宽的要求在当时也相当苛刻。而如今上线的 Fluid Framework ,应该也是从这些失败的前辈身上汲取了不少经验。

立足于微软最扎实的 Office 365 这一云端服务来进行铺设和测试功能,在服务群体上,则选择了需求更加清晰具体的企业用户(尤其是协作服务),来作为初始的切入点。这样的限制,足以说明微软的审慎和重视,他们甚至准备好了以年为单位来进行迭代。

微软对 Fluid Framework 充满了期待,他们相信这个东西能够重塑行业,甚至重塑网络本身,也许到明年5月的开发者大会上,能够看到一个截然不同的 Fluid Framework。

Source: 优设网 – UISDC | 13 Nov 2019 | 6:32 am(NZT)

如何快速有效设计字体LOGO?来看腾讯设计师的实战案例!

相信很多经验不足的设计童鞋都有这种情况:拿到一个项目需求,不知首先从哪里入手,埋头就做,做一步想一步,没有一套比较保险的方法。导致最后方案被需求方各种挑战,各种改图。不禁回想起自己刚接触做文案 logo 设计手足无措的样子,各种修改方案,磨到最后自己都怀疑人生了!!

现在市面上设计同质化的现象越来越普遍,设计师需要不断做出个性化的设计来满足市场需求,而运营视觉设计师的主要发力点之一就是字体设计。如何能快捷做出个性字体是我一直在研究的课题,这里我所说的个性是指符合项目的特有气质。

下面我来跟大家分享一下前段时间我做的一个文案logo设计项目的过程。希望能帮助到小伙们,同样也希望小伙们多多提建议,互相学习。

流程如下:

我主要分以下几点进行:

项目背景

首先要了解这是一个怎么样的项目?拿到一个项目需求时,不要盲目上手去做,首先项目具体内容是:设计一个两周更新一次的活动栏目logo。

对!这就是需求方提供的信息点,简单粗暴;但是,你单看这几个字就能明白这是什么了?

初步沟通

不明白就问呐!和需求方进行初步沟通,明确需求方具体的诉求:要有「炸」的感觉,现代时尚的感觉,并且大气又实用。

除此之外,还与需求方沟通了之前版本的问题,总结如下:

结合现有问题与需求方给的大致方向,总结关键词如下:

找参考

针对发现的几个问题,与需求方对设计方向大概要点的诉求,街头风涂鸦风格的字体能满足「炸」和「现代时尚」这两点设计要求;而爆炸性的物体如炸弹,原子爆炸,子弹飞…等都会给人一种很燃和炸的感觉。根据推导得出要借鉴涂鸦风格,场景有炸弹或者原子爆炸或者子弹飞。然后去各大设计网站寻找这几类图来作为参考。几大设计网站推荐花瓣,站酷,追风等,豆瓣中的电影电视剧海报也是不错的灵感找寻地。

设计方向

最后提炼出以下三个创意关键词:

打草稿

为避免返槁,拿着参考和草稿再次和需求方沟通确认设计方向,看双方是否还有建议或者想法,如果双方都没意见才可进行做下一步的设计。

矢量图绘制:

当与需求方确认没有问题后,就可以根据草稿用钢笔工具进行初步的尺量图绘制,先用简单的黑白灰体现 logo 的明度对比。

丰富细节

字体设计在笔画与笔画相接的地方处理成被切开的效果,模拟被炸出裂痕的感觉,可以再一次点题;

「爆更」整体采用街头涂鸦字体设计风格,笔画的始与末,都处理成了方角形式,主要体现现代青春活力追求潮流的感觉。

颜色的推导

暖色调:褐色,橙黄,橘红,浅黄为主,给人以温暖、热烈、紧迫、炸裂的感觉。

确认设计稿

与需求方再次沟通设计稿,从配色上,文字细节上都需要认真核对;通过再次的沟通后,部分认为对四个「更」字散落各地的排列有争议,散的有些过,弱化的也太过;居于这两点,把四「更」排在一起,从大「更」的一捺延伸出去,这样就解决了问题。

后面做 banner,开屏活动时这些圆可以根据画面来放大。

延展

颜色延展:由于每期更新的作品内容调性会有所不同,所以需要针对每次更新的作品调性来进行配色,为了后期更好的延展,所以前期需要多做出几种配色方案方便后期的调用:

OK,到这里基本上可以完美出输了?no ,还需要再次和需求方确认完整稿,确保所有的信息都准确无误了,才可打包发给你的需求方。

描边矢量风格:这个延展的风格主要适用在矢量图元素成图的画面,用色简单,用几个柔和纯色形成的画面。效果图如下:

材质感强的风格:这个延展的风格方向以重材质为主,主要适用于主推以格斗,枪战, 热血为主题的漫画集。效果图如下:

以下是我近来的一些作品小集,分享给大家,希望能给新的小伙伴们一点点启发。

欢迎关注「TCD设计中心」公众号:

Source: 优设网 – UISDC | 13 Nov 2019 | 5:01 am(NZT)

设计师年终奖今年稳了?

双11在即,忙着从各种优惠中薅羊毛的你,绝对不能错过本年度最大一波的福利放送!

这次我们不玩复杂的,直接给你的学费减减减!

优设大课堂双11大放价:今日报名,无门槛直减。

作为期期爆满、好评率百分百、小白变大触率高达97%的《零基础AI插画实战特训班》,本年度最后一期课程还未开课宣传,已经有多位学员提前预定进群了。

这个双11,投资人生的第一步:让你花的钱,变成增值资本。

作为一项技能,插画让你名利双收

说到这,就不能不提我们插画班的小馋老师!

看过她晒图的学员,没有一个不羡慕小馋老师精致又悠哉的自由生活!

走走停停,吃喝玩乐。想什么时候工作就工作,想什么时候旅行就旅行。

而小馋老师能做到这一切,就是因为她的插画技能得到了完美的发挥!瞧瞧小馋老师的插画案例——

小馋老师作品

万圣节的南瓜栗子棉花糖;

国庆的美好祝福

亚洲咖啡西点杂志的签约插画

小馋老师给肯德基&食品药品监督管理局画的宣传册:

给肯德基&国家博物馆录制的宣传视频;

电视上播出的《奔跑吧兄弟》,里面的表情包也是出自我们小馋老师的手笔:

插画衍生的二次创作,是我们接触官方最容易的捷径:

都说懂插画能让设计师「有钱又有闲」,有《零基础AI插画实战特训班》技能加持,学员在各类设计大赛中捧回奖杯、奖金拿到手软,学完课程就赚回学费的节奏!

除了参赛拿奖金,学会插画在日常工作中也大有帮助,毕竟现在平面、UI、包装设计等各个领域,插画都成了「好看又好用」的标配。

感受一下在《零基础AI插画实战特训班》小馋老师的指导下,学员们将插画与商业化结合的案例。

插画X产品设计

插画X周边

插画X包装设计

△ 鱼吉同学将插画和商品完美结合,成功拿下甲方

插画X UI设计

△ 学员给公司绘制的App Store上架展示图

△ 学员绘制的APP闪屏

学员真实案例

总之,学好插画,名利双收不是问题!

作为一项兴趣,插画给你多姿多彩的人生

作为兴趣爱好,也许某一天你的随笔小故事就会在网上引起巨大的反响——

小馋老师的一条裤袜小故事,可以产生3k+的共鸣。

《延禧攻略》衍生表情包令粉丝追捧。

AI插画班学员们原创设计的表情包,纷纷进击微信表情包市场,获得大量用户喜爱。

掌握插画,用画笔记录生活中的美好,还能实现财务自由,用爱好收获可观的报酬!

这是你我TA,任何一个人都可以做到的。

现在距离实现这一切,就只差一堂带你入门的插画课程!

接下来就让小优为你揭秘《零基础AI插画实战特训班》爆火的4大真相!

五星级讲师周小馋,看到她的作品就会爱上她

湖南卫视、肯德基、国家博物馆、亚洲咖啡西点杂志……都是小馋老师的合作对象。

听说上过小馋老师课的学员,没有一个不爱上她的!

老师作品

作品点评一针见血,学员成长肉眼可见

小馋老师的课由浅入深,技巧专业,批改作业更是用心,即使是一个小光源的毛病,都能给你揪出来。

作业修改前后对比

老师教得好,学员肯下苦工,出来的成绩自然是顶呱呱的!下面的学员作业,可都是课前高达70%零基础率的学员交出来的哦!

学员作品

学员作业-扁平化纹理

学员作品-人物

学员作品-场景

学员作品-海报

学员作品-2.5D

学员作品-logo

学员作品-动态

学员作品-小插画

由浅入深,7周快速掌握AI插画

《零基础AI插画实战特训班》是优设大课堂为设计师、插画爱好群体量身打造的实训课程,不管你是兴趣爱好、或想借此入门做设计,或是希望掌握插画辅助工作升职加薪,都十分实用。

课程内容从AI基础工具入门,由浅入深带入线条、色彩、光影的运用等知识,将卡通人物、logo、条漫等以主题课程的形式一一传授给学员们。

7周的课程,让你从零基础华丽转身,成为AI大触!

一次收费,终身教学

课程结束之后,我们的学员群不会散,助教、老师会一直陪着你成长,直到你变成大佬!

同时学员还可以加入打卡群,不定期享受群内的主题绘画以及各种福利小活动哦。

打卡群作品

优设大课堂4周年贺图

原创小插画

哪吒衍生

心动不如心动,这个双11,为自己投资!

课程时间&价格

《零基础AI插画实战特训班》火热报名中,名额紧俏,再犹豫可能就没你的份啦!

报名直戳客服老师:youshemei2

Source: 优设网 – UISDC | 13 Nov 2019 | 4:40 am(NZT)


看完Adobe Max 2019,90%的设计师都把电脑砸了…

@你丫才美工 :前段时间,一场可能即将改变设计生态的大会正在大洋彼岸举办着。

没错,说得正是Adobe Max 2019全球创意大会。

即便Ps2020 CC在会前已经惨遭泄露内容被扒得一干二净,但却丝毫没影响这届Max的精彩程度。因为像Ps2020CC这样的小物件,人家连提都不稀罕提啊!兄弟们!

主持人一上来就问:朋友们,人跟猴子最大的区别是什么,是我们会用工具?连猩猩都会用工具

没错,是imagination,之所以能创造出这个无比精彩的世界,靠得是人类的想象力。

奇怪的是,从我13岁第一次接触PS,设计师就被电脑束缚着日复一日被繁复的基本操作消磨生命。

所以今天,我们Max大会的主题就是:全面解放设计师的生产劳动力。

废话不多说,先上开胃菜:Ps for iPad!

Ps for iPad!

大家好,我就是主持人说的开胃菜,Ps for iPad这个牛批呢,我们从去年已经吹了快有一整年了

工程部紧赶慢赶终于赶在Max大会前,把它给上线了。现在电脑端能做的效果,我们都能做

而且更快更好。Ps自由变换变形功能16个点对不对?Ps for iPad可以自由创建!

缩放、拉伸、变形起来就能更细腻!

你们先别哇塞,还没开始呢就哇塞,接下来再说让设计师最恼火的抠图,比方说这种鸟图,钢笔一勾半小时人生就没了,简直看着就来气。

但现在我们只需要一个键,只用摁一个键,AI就能给你扣得干干净净!

但是,但是!你别看连绿色的鸟AI也能识别出来,这个功能其实有着一个很严重的缺点!

那就是抠得太特么快了!害我不得不多抠几张拖时间!

当然复杂一点的背景环境也能抠出来,比如这个砧板上的番茄酱碗,只需要拉个大概的框,AI就能抠出来。

你们肯定由要哔哔我说这个碗,跟背景差别大所以才这么好抠,那我再用AI抠个蒲瓜给你看看!

蒲瓜能抠,头发丝儿也不是问题,看谁还敢哔哔我们Ps部门吹牛批。

滚蛋!

Ai for iPad

在深刻总结Ps for iPad跳票教训之后,Adobe终于学会了闷声发大财,不仅搞定了Ps,还顺手把Ai也移植了!上来就是顶配,功能之强简直令人发指。

我知道PC上的Ai让你们又爱又恨,无限放大是件好事,但是画起来又麻烦,画面又低龄;但是今天,这些统统是过往云烟!

以往,要设计师用Ai来做这样一张图,简直是不敢想象的事情,看看,看这复杂的画面,丰富的细节,给谁不得画上大几个月?

但是从今天开始,像这种矢量图我们在Pad上这么画!不需要钢笔工具,锚点自动生成,用最少的锚点生成最顺滑的画像。

还要啥PC、Mac啊,扔了算逑!

不过这还不算什么,他们Ps部有AI,我们Ai部也有自己的AI,新的智能算法支持自动生成LOGO。

你需要做的就是在纸上画个烂草稿,然后丢给Pad运算一下,全新的世界500强LOGO就诞生了!

觉得草稿画得不好也不用重画,它已经是矢量图了,你想怎么修改,就可以怎么改!

还要啥设计师啊,开除算逑!

由于台下设计师言辞过于激烈,镜头切给了台上另一名解说员,抱歉刚才我同事说的内容太过沉重,接下来我们聊点轻松的,从今天起,让Ai设计师们的工作量原地减半!

花福蝶,我们以后只用画一半!另一半使用镜像自动生成。

我们以前如果想在Ai里画朵小花花,要一点点复制、一瓣瓣调,根本就是费力不讨好,而且画不圆!

但如果用全新万花筒镜像功能,对称图案一键生成小花花,以后也只需要画一瓣!

这哪里是工作量减一半,根本就只剩下一瓣了啊!无论你怎么调,它都是完美的圆!

VI的延展也变得空前方便,不用再复制一大堆!

Adobe Fresco

我知道不少设计师都是艺术专业毕业,你肯定尝试过拿Ps画油画。

但不管用Ps怎么试,得到的差不多就是这种所谓的「仿油画」效果。

这特么叫精神污染好吗。

想画一副好看的、真实的电子版油画,你只需要抛弃垃圾Ps装上我们花了几年时间研发的Fresco。

看这动人的笔触,看这丰富的肌理,你就会回忆起什么是「真正的油画」。

你需要关心的只有笔刷颜色、笔型以及颜料的「含水量」。

要是你舍不得颜料的穷毛病犯了,一不小心「水」加多了怎么办呀。

那岂不是更好吗?!我们将得到一幅精美的水彩画!

为什么名字里没有for iPad?因为我们是for Pad,都能用。

Adobe Aero

最后的产品,今年压轴的重头戏,做AR(现实增强)用的AR,不是我吹,赛博朋克真得要到了。

你看我们随便在舞台上铺张地毯,在上面放上一只鹦鹉,再将它调整到你想要的大小角度。

再随便拖进来一张热带雨林的PSD,让每个图层之间的间距拉大一点点。

设置好小鸟飞行的路径和动作,轻轻摁下播放件,童话般的森林就诞生在了眼前。

有了Aero,设计师的舞台将突破二维,攀岩不再需要冒着生命危险,带上AR眼睛,室内也能给你一座高山。

面试不需要带上厚厚的一沓作品,有张办工作桌,就是不错的展台。

导航也不用再低下头去看手机,搞不好连美化街道的钱都省了。

这,就是开始所说的「新维度」,这,就是设计的未来。

但好像说这些是「未来」也不合适,因为这些功能,真的已经可以用了,想来想去不如套用那句矫情的老话:未来已来

有了更快更好的软件、更多维的空间,设计师工作的效率,无疑将会翻几番。就像主持人开场说的,今后的设计师,将会脱离电脑的束缚,甚至不用一天到晚窝在公司里作图了,而是换成Pad,随时随地做图。

上手的门槛越来越低,创意越加难能可贵,我们要做的,就是赶在这天来到国内之前抓紧磨炼自己的创意能力,才能不被科技的浪潮拍死在行业的沙滩上。

看完被吓坏的同学也请好好平复下心情,因为明天要发的,「Sneak Peeks」分会,更是黑科技满满,但未来,本就该充满刺激以及精彩的挑战。

欢迎同学们关注最充满智(dou)慧(bi)的设计账号:

nycmgwxqr

Source: 优设网 – UISDC | 12 Nov 2019 | 5:58 am(NZT)

世界最大图标库!30000+图标满足你的所有需求!

不管是交互设计师还是平面设计师等,都会遇到需要在原型图、设计稿中添加 icon 的情况,但一般搜索引擎下载的 icon 不够全面、优质,不能满足设计师的多重需求。

Streamline 是全世界最大的图标库,内容涵盖了几乎所有类别的 icon 。这次的 Streamline-3.0 更是将图标库更新到超过 10000+ 。3 大类不同粗细的 icon,53 个类别,720 个子类别,总计超过 30,000 种,几乎能满足你所有的图标需求。

文件类型包括: iconjar 、sketch 、fig 、xd 、svg 、ai 、pdf 、png(需购买官网终极包才能在 Streamline 应用程序中将图标下载为 svg 、pdf 、pdf 格式的文件。)

Streamline

网站链接:https://www.streamlineicons.com/

这里已经整理好了可官网免费获取的 UI 设计中常见的 3 种不同粗细大小各 100 个 icon 。

下载链接:https://pan.baidu.com/s/1cqQ6AYHe8588VdYA8xcjJg

备用下载链接:https://share.weiyun.com/5rnekfE

三大分类:

轻便型:经典流线型风格。由 1px 大小画笔在 24px 网格上绘制而成。

常规型:一种新几何风格,由 1.5px 大小画笔 在 24px 网格上绘制而成。

加粗型:一种粗线型立体风,由2px 大小画笔 在 24px 网格上绘制而成。

这个样式的图标非常适合 iOS 应用,主要灵感也是来自于最新的 iOS 指南,粗线型图标也能确保最佳可读性。

官方还开发了在线网络应用程序,可直接在浏览器打开并下载自己想要的图标类型。注册即可下载 PNG 格式的图标。(图标都已预先设置成 24 x 24 px 大小。)

Streamline 应用程序:https://app.streamlineicons.com/streamline-regular

使用步骤:

右侧信息注册免费 streamline 账号,输入姓名、密码邮箱即可注册。

左侧为 3 大 icon 粗细分类 ,可快速搜索你想要的图标类型,右侧自由选择颜色及格式进行下载。

如果您使用的是 Mac 系统,打开 iconjar 文件,你将获得每个类别的组织列表。此外,也只需按名称搜索任意图标,它就会立即显示。

每个图标类别都有自己的 Sketch 文件,图标已预先设置成 24 x 24 px 大小。

多年来,Streamline 已被许多不同行业的顶级公司所采用。起到了行业标杆作用,可见其图标的优质性。

下载类型选择:

也可以选择下载文章开头的免费 300+ 常用图标合集。

值得一试的三个理由:

 

Source: 优设网 – UISDC | 12 Nov 2019 | 5:54 am(NZT)

5 个Apple Watch 设计原则+实战优化案例

上周出席了苹果的 WWDR Events(加速器活动),非常感谢公司提供的珍贵学习机会。本次 Apple Watch 体验的活动主旨,是向开发者提供设计、交互和技术方面的指导和帮助。

Apple Watch 作为一款极具前瞻性的产品,硬件已经发展到 Apple Watch Series 5,系统也已经更新到 watch OS 6。智能手表是目前除了手机之外, 最方便人眼观看且较为成熟的商业化硬件。这次加速器活动带给我的触动很大,原以为 Apple Watch 只是一款小众产品,实际上国内早已有众多公司和设计师深耕于此。若以 UI 设计师的角度出发,我们目前正身处于科技变迁速度极快的时代,硬件和软件都在围绕人类、网络不断进化和迭代,在这种大环境中,我认为设计师需要以更加场景化、智能化的角度来重新审视「设计」。设计的本质是「解决问题」,问题时刻在改变,这就要求设计师时刻保持「新鲜的学习态度」。

通过近距离接触苹果一线技术人员,还是获得了相当多的第一手资讯。因此总结了活动中与设计、交互相关的心得体会,以此文分享给大家。这篇文章分成两大部分,前半部分将分享 5 个 Watch app 的设计原则和技巧;后半部分则以荔枝的 Watch app 为案例,提出优化方案。

5 个 Watch app 的设计原则

1. 设计原则一:单一功能

大部分 Watch App 都依赖于手机端的 Apple App,可以说是手机端功能的移植或延伸。如果设计师并不充分了解 Apple Watch 的使用场景,则很有可能「过分贪心」,在小小的表盘中保留过多的功能。基于硬件屏幕小、使用场景通常是在碎片化时间里「瞥一眼」的特性,交互的设计需要做到非常克制,做到保留最核心的功能,以适应佩戴设备的使用场景。

以「50音起源」这一款优秀产品为例,在手机上,它有起源、速查、学习、测试、词卡等多个功能模块,但是当它以 Watch app 呈现时,则只保留了词卡一个功能。

2. 设计原则二:专注

限于 Apple Watch 的硬件特性,屏幕的实际可点击区域非常小。都知道,在 iPhone 上的最小的点触面积是 44 x 44 points,换算为物理尺寸大约是 6.86 毫米。以 Apple Watch 自带的解锁的界面为例,我们可以看到,数字键盘已经几乎撑满整个屏幕,但每个实际上这里每个按钮的宽度大概只有 6.00 毫米,触摸区域比起 iPhone 的最低建议还要小。

充分了解屏幕的尺寸限制后,再把日常使用场景考虑到设计中,就能明白:在 Apple Watch 上的交互体验并不会非常愉悦,用户很有可能因为「失去耐心」而放弃交互和功能复杂的产品。因此,设计师需要在屏幕上提供足够显眼的操作和轻量的交互选项,尽可能避免让用户同时进行多种类型的任务。

以菜单层级为例,假如用户想要使用一个功能,需要进入三层才能找到,可能不到半分钟,他就会放弃了。比较可取的方法是,避免复杂的导航和过深的层级,让用户每次都能顺利完成一个主要任务;遵守 HIG 的规范,如果一定要放置按钮,在水平方向上也不要放置超过 3 个。

3. 设计原则三:易读

上文多次提到「使用场景」这个概念,现实生活中,使用 Apple Watch 的场景主要有三种:工作/学习等静态场景、走路/轻量运动等微动态场景、运动/跑等强动态场景。尽管有静有动,但三种场景都会伴随着抬手/翻腕的动作,而在动态场景下,眼睛和大脑对信息的处理速度都会降低,因此信息的可读性必须非常高。

文本信息作为 Apple Watch 的主要展示对象,我认为设计师需要从字体、字号、字重、色彩对比度等多方面综合把控,确保用户能快速获取到重要的信息。

字体

在之前的 WWDC 中,苹果介绍了「New San Francisco Fonts」字体家族,其中的「SF Compact」就是专门为 Apple Watch 设计的英文字体。和 SF 的区别在于,Compact 将字母的笔画变得更加竖直了, 因此在小屏幕的辨识度也更好了。

每个应用建议只使用一种字体,以避免混乱。如考虑到品牌性问题时,对于较大的文字元素,则可以使用自定义字体。但如果还是以展示信息为主 ,则建使用系统字体。另外,苹果推荐应用使用系统字体,因为可以享受「动态字体」的功能。

字号与字间距

当字号小于 19 号时,推荐使用 SF Compact;大于 20 号时则推荐使用 SF Compact Display。眼球追踪的速度可见,当字号在 16-19 号时,使用 SF Compact Text 效果较好;大于20时,Display 效果较好。

SF 等字体已经设置好默认的字间距,这个字间距是根据小屏幕最佳阅读性设定的,所以不建议设计师手动调整字体的字间距。

字重

避免使用 Thin 字重,因为经过研究发现,Thin 及更轻的字重,用户会难以甚至在 Apple Watch 中阅读,辨识度较差。

颜色对比度

虽然 HIG 中也提到了色彩对比度,但并不像网页的 WCAG(Web Content Accessibility Guideline,网页内容无障碍指南)一样直接列出对比度的数值。在 WCAG 中,强对比度的推荐数值是 7:1,值得参考。

4. 设计原则四:简明的

Watch App 需要在小屏幕上帮助用户解决问题,即使对于同一个工具来说,在手机和手表上需要完成的使命也不一样。好的 Watch App 需要做到简洁明了,帮用户做好决定,而不是提供众多选项让用户去选择。

手表作为一款独立的产品,在功能和特性上都和大家熟悉的手机相差甚远。在设计时,手表不应该被设计师看作「迷你版的手机」,功能都应该做到快速、方便地被使用。

以支付宝为例子,你只会看到界面的上半部分展示了账户余额,下方只有付款码、余额宝和查汇率三个功能。如果把支付宝入口添加到表盘,点击支付宝时就会打开付款码。

换个角度,要是能让用户第一次打开时,可以去自定义选择自己想要的功能,不也很好吗?实际上,在使用了一段时间后,我根本不想在这小小的手表上,操作任何复杂的交互。付款码是非常适合手表的功能,我享受到了抬手快速支付的愉悦体验。回归本质,支付宝的核心功能,不正是钱包吗?

5. 设计原则五:实时的

手表、时钟,必须实时,才能让人感觉可靠。处于信息爆炸时代的我们,都已经对「实时性」衍生出极强的依赖。我们需要足够快的网速来刷新网页,需要社交软件实时将信息实时传达到自己手上,否则将产生焦虑和不信任感。

关于实时性,Watch app 有两点需要注意:实时信息要确保实时性、把用户在意的实时信息展示出来。

第一点,实时信息如果不实时,将会令用户产生不信任感,需要实时展示的内容通常是持续化更新的、即将到来的、进行中的事件。举个例子,天气应用需要根据用户实际的地点,展示当地、当下气候信息。

第二点,设计师需要做到心中有数,结合场景将用户最关心的重要实时信息传递给用户。许多 Watch app 都会向用户展示时间、地点等实时性很强的数据信息,提醒、消息也需要实时传达给用户。举个例子,Keep 在游泳时,会实时展示游泳距离、运动时长和圈数,这些都是动态变化的、用户想要实时获取的信息。

6. 小结

以上就是本次分享的活动主要内容。小结和快速回顾一下在进行 Watch app 设计时需要注意的 5 个设计原则:

以荔枝音频节目为案例的优化

在展示优化方案之前,先和大家快速地简单了解 Apple Watch 的核心功能和交互方式。

1. 快速了解:手势

Apple Watch 中,屏幕上有两种交互手势:扫和点。其中「扫」可以是纵向或横向的,纵向的扫可以滚动当前界面,横向的扫可以切换基于页面导航的界面。「点」也分成了轻点和重点(Force Touch)。「扫」和「点」也可以组合成「拖动」。需要注意的是,Apple Watch 是不支持多指手势的,例如双指的捏合。

2. 快速了解:导航

目前提供了两种导航形式,一种是「page-based(基于页面的导航)」,用户可以左右轻扫来切换页面,不同的页面上可以放关联度较低的内容;另一种是「Hierarchical(分层导航)」,是纵向的列表项,用户可以通过上下轻扫找到自己需要的功能。HIG 指出,两种导航形式不能同时使用。

优化一:交互优化 – 导航调整

可以见到,目前打开荔枝的 Watch App,映入眼帘的是三个功能,较为直观和简洁。虽然在手机端打开荔枝,Watch App 会自动打开播放器页面,但是「正在播放」是在第二层级当中的。结合上文提到的专注原则,我认为播放是音频产品最核心的功能,应该将核心功能放在最佳位置。

因此我把导航从「类分层导航」调整为标准的「基于页面的导航」。结合目前业务重心,将「订阅更新」替换成「我的喜欢」。于是新的导航形式是:正在播放、订阅更新、最近收听三个页面,以分页的形式,放置在了同一级层级。

优化二:UI 优化 – 播放器页面

目前播放器页面的封面图,直接平铺在了表盘最底层,不仅影响信息阅读,其美观度也有很大的可优化空间。另外,重要的标题信息,不仅展示力度较弱,信息密度上来说,也只展示了一行。

总结来说,播放页的优化原则是增加操作的便利性,提升信息的识别度。因此,我首先将标题设计成两行,并作为此页面的重点展示。音乐控制器也进行了优化,除了对图标进行视觉优化之外,还增加了进度条的展示;重要性较低的封面,则只在底部模糊处理,作为装饰使用,减少视觉干扰。

优化三:UI 优化 – 列表

可以看到,目前的设计中,历史收听是以列表形式展现的,包含了封面和标题两个信息。我将列表从第二层级调整为第一层级后,也去掉了封面。这样的处理,主要是考虑到在如此小的屏幕上,图像识别度很低,用户只能通过文字去识别内容。去掉封面后,不仅更为简洁,也更加高效。

总结

非常荣幸可以借此机会,和大家分享本次 Apple Watch 加速器活动的心得与感悟;另也以荔枝音频节目为案例,提出了少许拙见。希望大家能为我们多提思路和宝贵意见,感谢各位的阅读。

最后还要感谢公司提供了如此珍贵的学习机会,感谢此次活动中给予我许多帮助的 momo,感谢帮助我促成此文的杰哥。

欢迎关注作者的微信公众号:「Lizhi Design Lab」

Source: 优设网 – UISDC | 12 Nov 2019 | 5:30 am(NZT)

作品图太大?用这个在线图片压缩神器一秒搞定!

本文要介绍的「Resizing.app」是一个调整图片尺寸的线上工具,整合常用的三大功能:转档、压缩和调整大小。只要将图片拖曳到网页中就能线上操作,无须下载或安装软件,支持 PNG、JPEG、BMP、TIFF、GIF和 WEBP 常见图片格式,界面设计也很简单易懂。

Resizing.app 的特色除了免费以外,更重要的是不会将任何使用者的图片上传到第三方服务器,也就是直接在 web 端进行相关操作,即使断网状态下也可使用。不过这项工具的缺点是无法批次编辑,一次只能处理一张图片,如果你要编辑的图片很多就只能寻求其他替代方案。

Resizing.app

网站链接:https://resizing.app/

开启 Resizing.app 网站,直接将图片拖曳到虚线框,或点选「Choose a file」选择要处理的图片,支持 PNG、JPEG、BMP、TIFF、GIF和WEBP。因为是在浏览器上进行,所以没有文档大小的限制。

接着会在浏览器上看到刚才加入的图片,右方有调整尺寸、压缩和转换格式功能。

在调整图片大小部分,可以选择使用宽度、高度、最大边长或百分比,也能直接自定义需要的长宽。

下方的「Optimize」图片最佳化也就是压缩功能,当拉到最右侧的最大值,图片会进行最深度压缩,在这情况下可以让图片容量变到最小,但也可能因为压缩而稍微破坏画质。

最后,通过「Convert to」功能选择要转换的图片格式,一切就绪,按下「Save」就能保存图片。


值得一试的三个理由:

Source: 优设网 – UISDC | 12 Nov 2019 | 5:01 am(NZT)

继鹿班之后,京东也出了一个人工智能设计神器「羚珑」!

Source: 优设网 – UISDC | 11 Nov 2019 | 5:40 am(NZT)

Sketch 60 Beta版本探秘,看看都有什么新功能

自从 2018 年 5 月 Sketch50 版本发布以来,经历一年半,Sketch 版本号终于迈进 60 大关。Chrome 78 在旁边瑟瑟发抖……

最近 Sketch 60 Beta 版本已提供下载,这次新版本同样给设计师带来了贴心的新功能。

Sketch最新Beta版本下载

如果想知道 59 版本的新功能,请看这篇文章《Sketch 59 Beta版本探秘,看看都有什么新功能》

如果想体验 Sketch 最新 Beta 版本,请进入 Sketch 测试版主页下载 https://www.sketch.com/beta/

但是要记住,一定不要用在自己的正式文件中,防止修改后,低版本打不开。

Sketch 60 要求 Mac 系统版本是 Mac OS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本对应的 Mac 系统版本表格,如果遇到新版的Sketch 打不开就需要检查下自己的系统版本了。

新增组件面板

这是 60 版本最大的改变之一。左侧的页面列表现在变为两个标签切换,分别是图层和组件。图层和之前一样,其中包含页面和画板信息。

新的组件标签下是 Sketch 文档使用的所有 Symbol 组件,包含引入的 Library 组件库。

实际上,在一个 Library 组件库中,除了最基础的 Symbol 组件之外,还包含文字样式和图层样式。因此,60 版本也对所有的组件和样式进行了分类,分别是 Symbol、Text Style、Layer Style,可以通过标签进行快速切换。

组件和样式的树形结构分类在列表中是以文件夹的形式呈现,所以需要我们养成科学、合理、便捷的命名习惯。

在新的组件列表中,对于文档本地组件和样式,我们可以很方便地进行重命名、删除等操作, 而不用再去 Symbol 画板中一个个寻找修改。箭头指向的就是文档自己的组件和样式。

而对于外部引用的 Library 组件库来说,重命名、删除等操作是被禁止的,除非转为本地组件和样式才可以编辑。

同时我们也可以很方便地通过拖拽在界面中使用这些组件和样式,并且在面板下方有对应的预览。 面板最底部也和图层面板一样附带了搜索功能,可以通过关键字快速筛选所需要的组件和样式。

组件和样式选择面板更新

对于界面中使用的文字样式、图层样式和 Symbol 组件,右侧属性面板选择下增加了快捷操作按钮,可以方便地直接进行各种操作。

本地 Symbol 组件分为分离和编辑模板两个选项。分离即打散组件,编辑模板就会和往常一样进入到 Symbol 页面进行编辑。

引入的 Library 组件库,其实分为两种,一种是本地组件库,在自己电脑中;另一种是远程组件库,通过云端链接引入,比如 Kitchen 自带的插件、iOS 组件等,这两种是有区别的。

本地组件库分为本地化、分离、在组件库中编辑三个选项。本地化即把外部引入的组件自动转到目前文档内的组件列表中,变为普通的Symbol。在组件库中编辑就会打开本地对应的 Sketch 文档进行编辑操作。

远程组件库分为本地化、分离两个选项,和本地组件库相比缺少了在组件库中编辑这个选项。如果需要编辑修改,只能先转为本地才可以。

以上是三种组件的区别,其实在图层列表中我们也可以通过组件图标来进行区分。只不过 Library 中的本地和远程图标都一样的。

此外图层和文字样式的操作也同样进行了面板更新,把修改功能全部外显,操作效果和之前一样。

Library设置面板更新

既然 Library 有本地和远程之分,60 版本在设置中对 Library 管理界面也进行了本地和远程区分。并且,如果自己通过 Sketch Cloud 加入过团队,那么团队的 Library 库会自动添加进列表,方便协作管理。不过 Sketch Cloud 协作功能需要额外按年付费。

缩放工具优化

Sketch 作为一款矢量设计工具,本身其实是弱化单位的,比如宽高和距离只有数值没有单位。不过在缩放工具中却包含 px 单位。

60 版本对缩放工具进行了优化,去除了 px 单位,并且和宽高属性一样支持运算,设置起来更加方便。

欢迎窗口新文档位置移动

最后是一个很小的改动,把之前欢迎窗口顶部的新建文档按钮移动到最近使用文档区域,整体更加简洁整齐。

总结

Sketch 60 版本这次对 Symbol 组件和样式的管理进行了比较大的更新,方便我们更好更直接地使用这些强大的功能。

如果自己平时在项目设计中就没有使用过 Symbol 组件和文字图层样式,那么这次更新影响不大。但是作为一名使用 Sketch 的 UI 设计师,我们不能仅仅简单地把 Sketch 当成一个画图工具,而是要充分发挥它的强大功能,来提高我们的设计效率。

欢迎关注作者的微信公众号:「UI黑客」

Source: 优设网 – UISDC | 11 Nov 2019 | 5:30 am(NZT)

壹周速读:产品型 UI 设计师技能包特辑

上周的好文不少,而且内容范畴非常集中!如果你是一名需要具备产品知识背景的 UI/交互/体验设计师的话,那么这周的文章基本上就都是为你所准备的!

产品 & UI & 视觉

在企业团队中,产品、研发、设计师对于同一需求都有自己理解的解决方案,缺少统一规范的约束,难以达成共识,这不仅会让设计效率低下,而且缺少统一的约束,最终让产品落地和用户体验都难以保证,那么具体要怎么办?网易的设计师以「FishDesign企业级UI组件库」项目为例,通过在网易七鱼产品中的应用,来介绍一个企业级 UI 组件库的设计原则:

《如何设计企业级的UI组件库?用网易实战案例教会你!》

表情可以有效传达情绪,是人们在网络沟通中不可或缺的工具,合理地设计表情有利于提升用户活跃度,美柚的用户群体呈现出明显的年轻化的趋势,如何随着时代语境和流行文化来匹配用户的沟通习惯,是一个重要的课题。美柚重新设计的表情包,到底是遵循着什么样的思路?这篇文章为你揭秘:

《好评如潮!「美柚社区默认表情」视觉升级全方位复盘》

很多人都说,做 B 端产品最重要的是搞清楚业务逻辑。只要搞清楚业务是怎么运作的,就能做出满足业务需求的产品。但是 B 端产品所处复杂的业务需求环境,如同茂密的森林一样,产品经理一不小心就会迷失在业务细节中,做出一款停留在业务表面的产品。这篇万字长文,就是用来解决这个问题的:

《万字长文!超全面的B端产品设计指南》

来自网易UEDC 的崇书庆经常被人问及「如何入门交互设计」,于是有了这篇系统性的交互设计入门文章。这篇文章不算短,但是很易读,他很巧妙地使用「学武功」做为类比,让你阅读过程中更容易吸收:

《网易设计师:快速掌握交互设计知识体系的4个步骤》

作为设计师,许多时候从各个途径获取的需求往往并非用户的真实需求,同时信息在传递过程中必然发生变化。所以我们要从用户心中挖掘到真实的需求,不仅满足他们的需求,甚至达到超出期望的满意度。那么具体要怎么做呢?有5种非常实用的方法:

《设计师该怎样进行需求分析? 从这5个方面快速入手!》

在设计的过程中,经常会使用接触到各种各样的图片,除了一些关于书画、摄影作品展示的作品集,在多数情况下,我们都要根据自己的设计需求去对图片进行二次加工,让图片适应版面,这种二次加工的方式使用最多的就是裁切。这当中的讲究,就是K先生这篇文章想要为你讲述的设计秘诀了:

《裁图很简单?你太小看这门技术了》

神器 & 干货

女生的衣橱里面永远差一件衣服,设计师的电脑里面永远差一个工具。这一次的设计干货工具合集就给你汇集了各方面总计33款高效实用的设计工具!快来看看吧:

《图库样机神器应有尽有!11 月份精选设计干货大合集》

不用 PS和AI ,在10分钟内快速制作插画似乎是一件不可能完成的任务。但是实际上,用对工具,真的不是什么麻烦事儿!Icons8 这次推出的「Vector Creator」免费插图生成器,就能让你完全不用 PS,快速做出一张元素完整、张力十足的插画:

《不用Ps/Ai,10 分钟做出一张插画,该怎么办?》

如果你仔细看网上的安利,太多推荐都大同小异,相同的安利也越来越多,人们的选择却越来越少。今天这篇文章测评了一些不同类型的懒人设计网站,包括图表美化、在线 PPT 制作工具、懒人素材设计三类型,可能都是大家日常工作里时常会用到的:

《这10个懒人网站,一杯咖啡时间瞬间做出炫酷设计!》

建模神器 Magica Voxel 作者又出地形生成神器 Aerialod ,与 Magica Voxel 的界面类似,操作简单,实时渲染速度惊人,程序大小仅 1.05MB !话不多说,赶紧来体验一下吧:

《不会建模如何做3D地形图?这个神器让你10秒搞定!》

眼界 & 思维

关于设计师的职位和头衔,设计行业的从业者是非常在意,也经常讨论的。在过去的几十年当中,交互设计领域经历了一系列的变化,而承担交互设计相关职能的称谓,也随着时间推移发生了一系列的变化。对于很多人而言,用户体验设计师和产品设计师在职能上交叉重叠之处非常多,那么两者本质的差别到底在哪里?这篇文章给你答案:

《彻底搞懂UX设计师和产品设计师的差别,看这篇文章就够了》

交互设计专业的毕业生,入职能训一年之后,从如履薄冰的不适应到清晰地知道如何处理大大小小的各种问题,这一年时间经历了哪些事情,获得什么样的感悟?他的这篇文章总结了这一年来的想法和体验,也许也是你想知道的事情:

《入职腾讯顶尖设计团队近一年,我有哪些私藏的职场经验?》

Source: 优设网 – UISDC | 11 Nov 2019 | 5:25 am(NZT)











© 澳纽网 Ausnz.net