首页

Material Design 之响应式栅格布局

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

Material Design 响应式布局栅格适应屏幕尺寸和方向,确保布局的一致性。

列、间距和边距

Material Design 布局栅格由三个元素组成:列、间距和边距。

内容放置在包含列的屏幕区域中。

列宽是使用百分比而不是固定值来定义的,以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)确定,无论是移动设备,平板电脑还是其他尺寸的断点。

间距

间距是列之间的空间,它们有助于分离内容。

间距在每个断点范围内的值是固定的。为了更好地适应屏幕,间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕,因为它们在列之间创建了更多的空白。

边距

边距是内容和屏幕左右边缘之间的空间。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕,边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕,因为它们在内容的周边创建了更多的空白。

自定义栅格

可以调整布局栅格以满足您的产品和各种设备尺寸的需求。

自定义间距

可以调整间距以在布局的列之间创建更多或更少的空间。

自定义栅格

可以调整页边距,以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。

正文副本可读性的理想长度是每行40-60个字符。

间距和边距

在同一断点内,间距和边距宽度可以彼此不同。

水平栅格

Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列,而不是从上到下排列。屏幕的高度决定水平栅格中的列数。

在非触控和web平台,水平滚动的UI并不常见。

可以定位水平栅格以适应不同的高度,从而为顶部的app栏或其他UI区域留出空间。

断点

断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内,布局将根据屏幕大小和方向进行调整。

Material Design基于以下列结构提供响应式布局。使用4列,8列和12列栅格的布局可用于不同的屏幕、设备和方向。

每个断点范围决定每个显示大小的列数、建议的边距和间距。

栅格特点

弹性栅格

弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。

固定栅格

固定栅格使用固定大小的列,具有流体边距,以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。

UI(用户界面)区域

布局由多个UI区域组成,例如侧面导航,内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致,同时适应不同屏幕尺寸的不同断点。

为了提高设备之间的熟悉度,为桌面设计的UI元素应该以与移动UI一致的方式进行组织。

永久UI区域

永久UI区域是可以在响应栅格之外显示的区域,如导航抽屉。这些地区不能重叠。

持久UI区域

持久性UI区域是可以随时根据命令显示的区域,或者它们可以保持可见。它们可以打开或关闭,出现或消失。当它们出现时,它们会压缩内容和栅格。

当持久性UI区域可见时,其可见性不受与屏幕上其他元素交互的影响。

临时UI区域

临时UI区域暂时出现,当它们出现时,它们不会影响响应式栅格。当它们可见时,可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。

当UI区域可见时,其他屏幕元素不是交互式的。

原型

原型是结构化布局,为布局、分层和阴影提供一致的方法。它们是一个起点,旨在在进行修改以满足产品的特定需求。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

做10年UX才能明白的9个道理

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

最近,我注意到初创企业和成熟企业都对研究热情备增 。企业欣然接受这一观点:富有意义的创新,需要把客户作为复杂生命体来理解。

这太棒了。

我也反复听过不少错误和模棱两可的说法被反复提起。因此,为了帮助大家——因为我确实喜欢帮助人——我在这里介绍一份简单易学的纠正理解偏差的小清单,希望能够广泛传播(我很有信心,因为研究表明,读者喜欢简单易学的清单)。

UXRen

1、适应不舒适的感觉

“我只知道一件事,就是我一无所知。”—苏格拉底(Socrates)

我们在重视回答和害怕提问的环境中长大。在学校里,我们因为回答正确而得到奖励;在工作中,我们因为提出好的点子而得到奖励。难怪很多人会找理由避免做研究,特别是定性研究。显得无知所产生的焦虑在心中滋长。定量的东西至少有标准化测试所带来的熟悉感,令人舒适。保持研究型思维模式意味着要认识到偏差无处不在,确定性只是一种错觉,任何答案的有效期都是短暂的。因此从长远来看,好的问题更有价值得多。只有你承认自己没有答案,才能问出好问题—也才会了解更多。

UXRen

2、先提问,再做原型

“如果我们只测试开瓶器,可能永远不会意识到客户更喜欢螺旋盖的瓶子。”
—维克多·隆巴迪(Victor Lombardi),《设计败道:来自著名用户体验案例的教训》(Why We Fail)

我们理所当然会急于制作原型,测试原型。原型就是答案,可触可摸,即使只是纸上的草图。这样做很舒服,比只是问问题舒服多了,即便这无异于烧钱。对于任何想要立竿见影地证明自己价值的人来说,只问问题,就像那只洗棉花糖的浣熊一样,事与愿违。

太早制作原型的风险在于,这会把资源投入去回答一个无人问及的问题,同时还忽略了机会成本。测试原型可以帮助你优化好点子,但不会告诉你是否在解决恰当的问题,并且,也很容易将原型的亮点误以为是点子的质量。不论如何,研究报告中的亮点也容易被误认为是具有价值的洞察。

提出恰当的问题,不会让不好的点子得到保留和维护,反而会帮助你更快地将它们识别和清除。你只需要有足够强大的内心去拥抱错误。

(如果你正在想“嘿!这对我的团队会有帮助”,我们会非常乐意去你的办公室呆一天,确定你是否准备Mule Design Studio合作。)

 UXRen

3、了解目标

除非你事先知道做某项研究的动机,否则提问就是浪费时间。你必须公开发誓:你的动机不是“为了证明自己是正确的”。这是每个人内心隐藏的目标。参看第一点。

通常,出于对研究的一腔热情,团队往往会在目标不明确、不一致时就开始跟客户对话。然后,他们会感觉花了宝贵的时间,但却不知道怎么去应用自己了解到的东西来提供解决方案,因而没有什么可供展示的。于是就有了这样的说法:“我们去年做了研究,但却是浪费时间。”于是,又回到了建立原型和测试原型的舒适圈。又或者,他们对听到的内容有不同的理解,结果又因谁对谁错更加争论不休。

在大公司、大机构中,有时大家都有心照不宣的目标:“表现出我们在尽力做研究,不过还是让产品负责人做他想做的事吧。”这听起来可能有点嘲讽意味,但通过跟许多在资金充足的研究部门的资深研究者交谈,我了解到,尽管他们撰写的报告相当精彩,但对决策的影响却为零。承认这个事实,是阻止它发生的第一步。

完美绝佳的起点,是把你的目标设置成:“我们需要确定水准,快速理解他人的观点。”不要在事后任意添加其他目标。

只有当你确定了目标,才知道自己需要了解什么。而在你选择怎么回答之前,你必须知道自己的问题是什么。

UXRen

4、在重大问题上达成一致

“从本质上讲,所有商业活动都是在人的行为上下赌注。”
——《“厚”数据的力量》(The Power of ‘Thick’ Data),《华尔街日报》

问题的质量决定了结果的用处。提出错误的问题跟用原型解决错误的问题如出一辙,它们都会给你一些你不想要的东西。从优先级最高的问题开始。确定这类问题的办法是:如果你在这些问题上的假设搞错了或忽略了,风险会最大。

最重要的研究问题是你想要知道什么,而不是你在访谈中要问什么。事实上,直接抛出你的研究问题往往是最糟糕的方式。人们往往不知道或者不愿承认他们真实的行为,但人人都很擅长编造答案。

设计研究总是和用户研究混淆。回答高优先级研究问题的方式多种多样,跟有代表性的用户对话只是其中一种。你所需要知道的,并非都是与用户相关。

通常,最关键的问题是:“基于证据,我们对客户、竞争、内部能力真正了解些什么?”问法各有不同。这可能是一个非常难以完全诚实作答的问题,但又得在短时间内回答。

UXRen

5、时间和金钱永远是够用的

当研究被定义为设计之外的一种工作,人们就很容易把收集证据当作额外负担,找理由不做。

通常,团队必须获得权威人士的许可,才能进行研究工作。提问本质上是对权威的挑战。如果你曾经和一位不同意为百万美元项目开展定性研究的领导合作,那么问问自己,这位领导购买一辆价值5万美元的汽车前会不会自己做做研究?口头上提出反对意见,心里面往往是害怕自己的主意被破坏,被证明错误,或者不那么行之有效。

如果你的目标和高优先级问题明确直白,不管时间和预算如何,你都可以了解到一些有用的信息。比如在线研究,午餐时间外出观察,测试其他产品的可用性,发挥创意。

只要不是做调查就行。

UXRen

6、不要指望数据能改变想法

“当一个人要靠着对某件事的不理解来拿薪水时,要让他理解这件事是很困难的。”—厄普顿·辛克莱(Upton Sinclair)

即使研究已经证明了这一点,但训练有素的专业研究者还是往往很难接受。如果你习惯和重视某种特定数据类型的同事一起工作,那你可能很难去说服那些不假思索就否定这种观点的人。而且,可能会因为数据不足而让某人觉得自己的专业能力受到了侮辱。

收集证据的全部意义在于基于证据做出决定。如果这些证据破坏或者反驳了决策者所信奉的想法,他们就会找理由去否定或忽视这些证据。这也是定性研究者在一些工程师驱动的组织中处境艰难的核心原因。即使问题需要的是更具描述性的答案,熟悉且擅长数字的人却想要用数字表达的答案。

因此,在尝试用数据去影响决策之前,你必须了解你的同事和领导的个人特点和他们所处的环境,了解他们是怎么做决定的。

UXRen

7、接受混乱带来的不完美

“我们善变,愚蠢,记忆力差,且有自我毁灭的天赋。”
——苏珊·柯林斯(Suzanne Collins),《饥饿游戏:嘲笑鸟》( Mockingjay)

人类的生活是混乱的。人类如果没有遇到问题,就不需要产品和服务,我们也就不会有工作。在真实、混乱的世界中为人们找出解决问题的最佳途径需要一些时间,并在一定程度上放开控制。虽然有必要采取一种合乎道德的、足够严格的方法,但并不存在绝对纯净的定性环境。明确的目标和好的问题可以承受各种不可预知的情况的考验。

人们希望开展舒适有序、显得专业的活动,这导致他们不恰当地使用焦点小组、可用性实验室、眼球追踪、调查和光鲜的报告等方式,但其实,不那么正式的研究可能会更加有效。

将证据纳入设计决策,本身就是一个增强了解的过程。你永远不会找到正确的答案并解决问题。如果过程行之有效,你就会在做决策时信心备增。

UXRen

8、致力于合作

每个从事相同工作的人面对的都是相同的现实。做出产品决策的人需要对信息完全知情。如果知识只存在于一个人的头脑中(除非你在伦敦,而那个人是你的出租车司机),那么知识本身有多好并不重要。

一组人制作报告,而另一组人收到报告后置若罔闻,便是没有合作的研究。如果这样工作,即使是最用心的团队也会让知识溜走。而如果合作中缺乏证据,则意味着每个人都心照不宣地默认:胜出的是个人偏好。这两种方法都不是最有效的。

最有效的方法,是让产品开发人员直接参与提问和回答。这样做也很有趣。实现这一点的方法有多种,依具体公司或机构而定。

提问关键在于建立一个共享的决策框架,以便做出更快更好的决策。我曾经就此召开了一场研讨会,它带来了改变。

UXRen

9、找到纠正你的偏差的伙伴

“我们可能对显而易见的事情视而不见,也可能对自己的盲目视而不见。”
——丹尼尔·卡尼曼(Daniel Kahneman), 《思考,快与慢》(Thinking Fast and Slow

你做了一些工作,找到了一些答案。现在你需要确定它们的意义。在解释研究结果时,合作变得尤为重要。每个人都被偏差所困扰,而且自己还无从察觉。我们所看到的是最符合我们现有信念的。因此,我们必须参考外部标准(包括预先设定的目标和问题),一起工作,互相检查。

这与你有多聪明或消息多灵通无关。一旦你接受了这一点,只要你在一个心理上有安全感和相互尊重的团队中工作,识别出偏差就会是一场有趣的游戏。

维基百科(https://en.wikipedia.org/wiki/List_of_cognitive_biases)提供了不错的认知偏差清单,可以和认知偏差图( Cognitive Bias Codex  )一起打印出来贴在墙上。

也许,这就叫正确的设计。

UXRen

总之,当我们在讨论设计研究时,实际上是在讨论基于证据的设计。创作、批评和探究都是设计过程中不可分割的一部分。将它们分裂开来,就会因无知、自负或恐惧而错上加错。

设计是一种价值的转换。在实现任何产出之前,你必须先问问人们真正需要什么、看重什么,问问你希望从中得到什么样的商业价值回报。

只要你采取道德的方法,诚实对待你的所见所闻,朝着富有价值的目标前进,那么,你所提出的问题和你找到答案的方式都无关紧要。正确的方法并非只有一种,正确的答案也并非只有一个。享受不确定性吧!它永无止境。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

UI设计师除设计外所需要具备的能力

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

我们已经或多或少看过一些优秀作品,也知道了一些设计方法和技巧,了解到了一些相关的理论知识,自己也做过一些项目或者是练习,总体来说都掌握了一定的设计能力;但是设计师想要拥有更多的资源(指薪资、工作机会等等)或者是想职业进阶,除了一定的设计能力之外是远远不够的。

设计师还需要掌握更多的能力,才能让自己成长提升,并且拥有他人无法取代的价值。我通过自己的经历和整理收集,发现目前如今不同阶段的设计师对待同一个问题不同的角度以及特征,如下图所示:

不难发现,当大家还是初级设计师的时候,刚刚接触设计行业,我们更多的是去观察、学习、临摹一些“好看”的作品,熟练地使用设计软件和提升设计技法,最后的是自己做出来的产品是否漂亮美观,最重要的是客户/老板是否会买单,而自己无法清晰地定义自己设计的产品价值,也不能很好表达出自己的想法和观点。所以产品走向会根据老板/客户的水准来定义,轮到自己表达只是支支吾吾,最后只是做为执行无休止地改改改。一切由老板/客户说的算,无法清晰地了解自己产品的定位,缺乏表达观点的能力,缺乏一定的审美,作为执行角色无休止加班成为了初级设计师最大的痛点。

而经过一段时间的学习和工作后,逐渐转型成为中级设计师后,有了一定的设计技法和软件使用熟练度,有了一定的审美和视觉表现能力,平台规模合作团队也逐渐变大,基本能满足老板/客户/业务方提出的需求。开始学习一些设计相关理论,开始拆解自己或别人产品的交互架构,更多地开始关注用户体验起来,也会融入品牌元素到自己的产品当中,为自己的产品做情感化设计和制定设计规范,会组织一些专业语言和业务沟通以及陈述自己的产品。但是如何从众多的设计方案中找到最优的方案来解决问题,如何更多地体现产品的价值,产品利益链如何形成商业闭环,如何在团队/设计圈体现自己个人的价值,如何提升自己的个人影响力,成为了中级设计师这阶段的痛点。

通过三年五年的沉淀,成为高级设计师后,形成了自己独有的一套方法论和设计思维,能熟练地拆解每款产品和定义产品,视觉表现层已经完全能驾驭,能清晰地阐述自己的设计思路和结论,产品用户体验层也有了一定的经验和方法,在团队中或者设计圈有自己一定的个人影响力,更多地会在工作中思考产品带来的社会价值和商业价值,会用不同的思维去思考产品的各个维度,找到最优的方法解决问题,会把固有的利益链转换成商业闭环,提升用户转化率等等。而这阶段的设计师的主要痛点就是面临着团队管理和沟通,朝着资深设计师和设计专家转型,以及如何为平台带来的利益价值考核等等问题。

资深设计师或者设计专家这里不谈,因为这阶段所思考的问题大都和设计无关了。通过上述不难发现,每个阶段的设计师都有各自的特征和痛点,虽然其中都包含着设计相关的能力,但是随着阶段的进阶设计相关的能力占比逐渐变少,更多的是其他的能力增长,所以设计师除了设计以外其他能力的重要程度显而易见,那么我们来看看除了设计以外,设计师应该掌握其他什么能力。

思考能力(Thinking)

思考能力作为首要的能力,不仅仅是设计师,其他职业一样需要这个能力,这里所涵盖的面太广泛了也说不了,这里主要针对三点来讲:核心竞争力、批判思维和分析能力。思考分为两个层面:自我层面的和业务层面的思考;自我层面的思考就是要通过深度剖析自我,发掘自己处于哪个阶段,有什么长处和不足,自己想要什么,需要往怎样的方向发展;而业务层面的则是要需要思考业务产品的结构框架、用户体验、商业价值等等等等,前者更加关注自身的成长,后者更加关注业务的成长。

· 核心竞争力

核心竞争力就是有与别人不一样的竞争力,想要做到别人无法替代你的地步,就要有自己个人核心的竞争力。如果你会做一张 Banner,我也会做一张 Banner,你会搞一个页面,我也会搞一个页面,那么你这个人就成为了可有可无的螺丝钉,唯一的优势就是年轻能拼能熬,等你熬锈了老了,随时可以换一颗新的螺丝钉来取代你的位置。所以不管什么阶段,我们要深度剖析自己,认清自己的优势劣势,并采取相应的措施。

剖析自己的核心竞争力给大家一个大致思路,从异样性和共通性入手。自己周围或多或少有团队,条件不足的话现在网络各大平台都很发达,也能融入一些设计圈子中,和不同的人对比寻找自己的核心竞争力。异样性是当前的优势,找出其中的优点,不断地放大深造,变成你的核心竞争力,而和别人不一样的缺点找出来摒弃改正;共通性就是和大家一样的地方,可以看作是伪劣势,因为诸多共通性中总有你最喜欢最擅长的一个,将它单独拿出来不断扩大,逐渐就拉开了差异性,慢慢就转化成你的核心竞争力了,而大家都有的缺点,你把它纠正了,就成为你的核心竞争力了。

来举一个栗子:小王是一名工作了3年的设计师,研究生毕业,由于公司的原因平时工作最多接触的就是一些运营图 banner,也有过很多品牌 VI 的经验,逐渐自己在视觉表现上有自己一定的见解和想法,也更加感兴趣做视觉表现的东西。

那么他的共通性就有:1.工作3年之久;2.研究生毕业;3.视觉表现能力强也更感兴趣;4.做过品牌 VI 的经验;5.有自己的见解和想法。

由此推断出小王的共通性是:1.工作经验丰富;2.视觉表现力强;3.有想法和见解;

异样性是:1.学历优势;2.品牌 VI 相关经验

那么小王可以保持自己学历优势下,可以继续深造品牌 VI 相关,逐渐转型成为高学历的品牌 VI 设计师,那么学历和很多品牌 VI 的经验就是小王的核心竞争力;也可以通过热爱去学习 C4D 动效等软件继续增强自己视觉表现力,配合自己丰富的工作经验逐渐转型成高学历的创意艺术设计师,然后通过将自己的想法见解通过分享会、文章等模式产出,将这一点升级成个人影响力,那么综合下来更加优秀的视觉表现力、丰富的工作经验和个人影响力也会逐渐变成小王的核心竞争力。

只有通过不同维度深度地剖析自己,找到自己的共通和异样点,清晰自己的价值定位,然后制定出适合自己成长目标和方案,不断放大增加自己的核心竞争力,成为不可取代的那个人。

· 批判思维

批判思维是一名设计师必须具备的思维能力,我们不仅仅要学会批判别人的作品,还要学会自我批判。这里不是指无脑的批判(之前遇到过一个实习生刚进到公司里,就把之前所有人做的东西全部批判了一遍,重点是只说产品好看与否,完全不顾及平台一致性商业价值用户体验等等,最后只批判却没有任何实质性的建议,颇有一种指点江山的感觉,然后后面再也没见到过他了),这里是指在自己通过批判别人或自我的方案,不断地优化纠正,最后产出最优质的方案,这是批判思维的出发点。

不同的人有不同的经历,看待问题的维度是多种多样的,所以一个方案产出后,通过不同的人思考后的结果是最好的解决方案。这也印证了波克定理:只有在争辩中,才可能诞生最好的主意和最好的决定。所以当设计师接到产品交互给到的原型图后,不要上手就做图,要通过自己经验和想法去看待原型图,然后提出更加优质的方案进行讨论,如果你的方案更加优质,那么不仅是产品的质量得到了优化,你个人的经验也得到了沉淀,下次遇到相同的场景就可以拿出来复用,直到遇到更好的方案。

唯一注意的事项就是注意沟通的方法,这里后文会提到,比你资历高的人提出的观点更加具有建设性,在毫无头绪没有创新的情况下就听比你更有经验的人的;遇到比你资历低的人提出的观点也不要嗤之以鼻,抓取其中有用的点,没准是一个新的思维方向;总之,有数据说数据,没数据举案例,没案例讲观点,如果连观点都没有的话,照着大佬说的话做就是了。

· 分析能力

分析能力也是设计师必须掌握的能力之一,无论你是创意艺术设计师,还是用户体验设计师,譬如一张 Banner 氛围传递或者文案排版,譬如插画的配色或者场景搭建,譬如产品的布局结构或者用户体验,这些都需要有一定的分析能力。通过拆解改版/竞品/参照产品等,明确产品的最终目的、商业价值等等,有了这些准备后才能对自己的产品进行设计或者改版。而分析产品可以以用户体验五要素的角度来分析,分别是:战略层、范围层、结构层、框架层和表现层,具体相关的文章站酷、PM 社区、36氪等等都搜的到,这里不再细说;之前在分析产品的时候发现有些产品强行套用这五个要素进去不适用,因为有些产品的页面它不存在战略层或者范围层的东西,所以我总结归纳了三个角度来分析产品。

案例就用淘抢购 v4.1 页面(已上线)来讲,三个角度主要是:表现层、用户体验层和价值层。表现层主要就是产品页面的配色、布局结构之类的;用户体验层就是产品的心智透出、交互流程之类的;价值层就是产品深度的价值体现了,比如商业价值、社会价值和用户留存率之类的;大致可以套用这个公式去思考:为什么这里会用这种表现形式,它想要表达怎样的效果,它要达到怎样的最终目的,如果是自己去设计会怎样做。举例:因为淘宝规范为卡片式设计,在视觉表现上要统一,所以淘抢购 v4.1 的业务目的是统一视觉样式,并且它需要给用户产生一种“商品很便宜快去抢购再不抢购就没了”的心智认知,它的最终目的是引导用户去商品 Detail 页面购买商品和提高商品的点击率,这样通过协调关系形成平台、商家和用户之间的利益链商业闭环。

想要提升自己的分析能力除了项目和时间的沉淀外,更多的时候需要自己平时的积累,站酷等平台有很多优秀的作品,作者会把自己设计的分析和思路写出来,我们可以看看别人的想法是否值得借鉴,然后再去分析一下,最后思考如果是自己的话会怎么去做;其次做设计的时候带着同理心去做,把自己当作用户去看待自己的产品,通过不断的积累提升自己对产品的敏锐度,将一些产品的隐性问题挖掘出来;另外可以多看一些好的设计分析书,比如《U一点料1、2》、《以匠心 致设计》等等,将学到的分析方法代入自己的产品或作品中,逐渐分析能力就增强了。

规划能力(Plan)

规划能力是日常工作生活中所需要掌握的能力,主要讲业务规划和职业生涯规划,业务规划能力应对的是我们工作中处理业务所需要具备的能力,而职业生涯规划应对的是我们整个人生职业生涯规划的能力。掌握这个能力后前者会给我们带来业务处理效率上的提升,后者给我们带来整个人生有益的好处,所以这个能力非常重要。

· 业务规划

很多时候我们还在有条不紊地处理某个需求,心想着下班去吃个饭买水果回家洗澡睡觉的时候,突然来了一个紧急的需求,就把我们整天的计划给打乱了,火急火燎地处理完这个需求,然后又把之前的需求做了,最后加班改改改导致整个计划泡汤了。工作中遇到这样的情况很多很多,处理方法有很多种,最经典的就是四象限法则,把事情的紧急重要程度分为:重要且紧急、紧急不重要、重要不紧急和不重要且不紧急四个象限。

很多时候都是道理我们都懂,可是一遇到情况依旧手忙脚乱,根本原因是没有认真地把它代入自己的工作生活当中。画一个象限表,把自己今天所要处理的事务陈列出来五分钟都不需要,一开始可能因为事情不多就没坚持下去,一旦养成习惯后,将来遇到多种紧急情况突发的时候就能认识到这个习惯给你带来的好处了,所谓养兵千日,用兵一时就是这个道理。

在做业务需求的时候,可能会碰到有些需求价值高,有些需求价值低但又很紧急,不知道怎么处理之间的关系,我们依旧可以套用四象限法则来制定一个四象限表:价值高且紧急、紧急但价值低、价值高不紧急和价值低不紧急。什么是价值高的需求呢,就是能让你有充分思考和分析的需求,比如某个页面的改版;价值低的需求则是相对不怎么需要思考和分析的需求,比如根据已有的规范改个颜色之类的。在时间的优先级前,价值高的需求大于价值低的,最后剩下的就是价值不高且不紧急的。因为我们无法拒绝需求,需求来了肯定要是做的,工作不是爱好可以有多种选择性,但我们要学会将需求分解成不同类型的,对自己有成长沉淀的需求那可以作为最高优先级去处理,留够充裕的时间去思考分析,然后沉淀经验稳定提升。

· 职业生涯规划

这个在大学期间就学过相关的课程,只不过当时并没有太深的感触,而是等工作以后才知道这项能力的重要性,它相当于关系着你每个阶段的里程碑,当成游戏中的成就任务也不为过,还是自己设定的成就任务。某个阶段想要达成什么样的目标,想要获得怎样的成就,都是要自己一步一步慢慢规划并且完成出来的。

因为我遇到过几个非常努力的人,努力到让人心悸的地步,每天除去吃饭睡觉工作时间就是在努力学习,到最后还是很迷茫,不知道做什么,不知道如何体现自己的价值。这类没有目的的努力的人是很可怕的,他们努力得没有错,但是这样下去没有成效的努力会让他们觉得努力并没什么用,然后逐渐开始产生抱怨、泄气和放弃等负面情绪。

举个例子来说明:如果你刚毕业,给自己制定的长远的职业生涯规划是在工作3~5年后进到大厂工作提升自己,那么所拆分下来就需要一些项目工作经验和优秀的作品,再拆分下来就是如何做出优秀的作品,细分到最后就是作品当中的元素,比如图标排版布局之类的,那么就制定一段时间内的练习就按照各类元素去做,比如图标画两个星期,APP 设计排版布局练习两个星期,插画练习画两个星期,这样坚持下来就组成一个完整的项目作品了,以此类推。有了规划目标并且在自我驱动的推动下,逐渐实现自己的职业目标。

执行能力(Execute)

执行能力是指自我在工作&学习中执行的能力,执行能力为一个设计师最主要的核心技能,一切的能力都凌驾于这个基础之上;哪怕你再能说会道,能赋予你的设计各种价值,能给予你的设计各种环境,但这些都是第二步,第一步就是你的设计表现达到期望值,如若第一步稿子都不好看,那么没人愿意会听你叙述的。前文已经提及到了,设计师在初级至中级阶段的时候大多数注重的就是表现手法,如同学说话一样,表现手法可以看作是汉语拼音,然后才是组成一个个字,最后组成一句完整的话语。

· 自我执行力

提升自我执行的能力我大致分为两个步骤:看和做。

首先先来说看,看其实是提高自己审美的一个过程,通过看一些平台网站的优秀设计作品,久而久之自己的审美能力才会提高,然而看分下来一种是带有目的性和不带有目的性的。不带有目的性地去看是在自己有空余或学习时间,通过浏览设计网站采集学习一些你觉得好看的作品;采集是一个很好的习惯,我觉得是每个设计师必须养成的习惯,把自己平时觉得好的表现形式收集起来,等到某一天需要用到的时候,脑海中对当前场景会有一定的印象,再根据印象去寻找采集到的作品,能很大程度上节省自己脑爆的时间,哪怕没有采集或者文件丢失,自己的脑中大致也会有一个雏形方向。而带有目的性地看是指针对某一个模块去搜集整理,比如今天我需要做一个关于内容的模块,那么我就会去寻找一些做内容的产品设计,搜集到的各类关于内容的表现手法,然后结合自己的经验和分析,找出最适合自己产品的一种。

仅仅看是不够的,在看过之后我们需要动手尝试才能算真正地沉淀自己所看到、学到的东西。做设计最忌讳的就是“眼高手低或者眼低手高”这种状态,有了审美但表现手法跟不上,或者说表现手法有但是审美跟不上。一定要在自己吸收了一定的审美后,通过自己的尝试去做出来,才能真正的沉淀到自己的大脑当中,变成自己的表现手法之一。最后通过大量的积累,结合对商业需求的判断形成设计策略,才能从容应对不同的产品需求,哪怕你今天做金融相关的产品,还是明天做电商的产品,后天又改做工具类产品,一旦形成了自己不同的应对策略,才能做到真正意义上的游刃有余。

很多时候我们只关注到鱼的大小、鱼的肉质是否鲜美那20%层面的东西,往往忽视了80%最重要的捕鱼技巧和方法;看到的只是产品是否好看,交互是否流畅,体验是否良好,没有往更深层次地去想这个产品的商业背景是什么,设计师为什么要这样设计,如果换做自己的话会去怎么做;毕竟我们所做的一切训练、思考都是为了更好地为工作服务,就如同脱离了商业背景以后,有些设计就只是单纯的炫技,并没有解决问题的价值,而设计师的工作核心就是解决问题,所以我们要结合作品的背景、价值等因素,去看、去做、去学相应的表现手法才是自我执行的核心所在。

表达能力(Express)

表达能力是设计师除去执行能力外第二重要的能力,小到平日里的沟通对接,大到述职晋升面试,都离不开表达能力的支持。有些设计师经常面试怎么都过不了关,我本以为是作品集的问题,可是看完之后作品方面完全没有什么问题,具体了解后才知道是在面试过程当中不知如何阐述自己的作品和思路或者在阐述过程中由于紧张等因素导致表达断断续续不顺畅,面试官就会觉得这个人不靠谱然后 PASS,明明做图很优秀却输在了表达上,这种情况就很憋屈。在广告公司中,一个 LOGO 或者广告视频往往只是赠品,出售的却是这个品牌VI的故事;如果一个设计师不懂得怎么阐述自己的业务,不懂得怎么推销自己的方案,不懂得拓宽自己的个人影响力,就单纯的只会执行作图的话,那么这名设计师是不合格的。网传有一个段子“一个公司的工资排名规律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如讲 PPT 的,讲 PPT 的不如听 PPT 的,听 PPT 的不如听汇报的,听汇报的不如决定的,决定的不如签字的”,由此可见表达能力在职场中的重要性。

· 业务表达

业务表达是指在自己工作的过程当中,对自己的设计方案进行阐述。大部分设计师会遇到一个困扰,当设计稿做完以后就不知道怎么去表达自己的设计理念,被业务方/面试官/老板提出质疑时,比如:“你这产品的设计为什么要用红色?”、“聊天信息这块儿为什么要用小气泡的样式?”,往往不知道怎么去说,有一种当时就觉得好看所以这样做了,也没有去想那么多的感觉,或者其他优秀的作品/竞品是这样做的,我也就这样做了;那么结果往往就是自己的专业性遭到质疑,然后转变成业务方/老板进行设计主导,形成“改来改去还是第一版好”这样类似的恶性循环中。

那么如何提升自己的业务表达能力呢?首先设计师要提升在设计领域的专业度,通过学习吸纳设计相关的知识,然后代入自己的设计当中去试着阐述设计稿,准备工作先做到位,收集相关的数据,掌握相对应的设计理论,先说服自己再去说服别人。比如:“通过色彩心理学得知,红色能带给人兴奋、激动、热情等积极情绪,而我们产品所需要透出的氛围是热情的、积极向上的,相对应地激发出用户的正向情绪,所以我这里使用红色。”、“根据近半年数据研究得出,产品聊天信息模块使用过程当中女性用户占总用户数的85.9%,而小气泡样式相对比其他样式更能迎合女性用户群体的喜好,通过 A/B 测试结果得出,使用小气泡样式后数据上涨了15%左右,所以聊天信息模块整体改版成小气泡的样式。”

通过自己前期的准备(设计理论知识补充、用户调研、数据测试等),将自己的设计理念表达出来,主导整个设计的方向,必要时可以理性地坚持自己的设计方案,毕竟无论是老板还是业务方,出发点都是希望自己的产品能做到最好最完善,只要你给出数据支撑和专业性的建议,他们一定都会采纳接受的,而最后你的能力和专业性也得到了对应的认可。

· 书面表达

我本人是强烈建议在能力达到一定程度的时候,通过写作来检视自己成果的。因为往往很多东西自己是明白的,但是写出来让其他人看懂是另外一种能力了。自己一段时间的职业经验总结、对设计的见解看法、自己独特的设计思维、一本书的读后感等等都可以通过书面表达出来,某个知识理论难的不是学习,而是将它教授出去,因为只有你想要把某件事说明白,阐述得其他人都能看懂,那么首先你要对这件事理解得很透彻,然后通过自己的经验和见解,转化成通俗的语言说给别人听。最好的状态就是与你同样级别的人你能与他用专业术语对话,级别比你低的人你能把理论转换成他能听懂的语言进行交流,这样才算是对理论概念理解透彻到位。

大家也明白,学习最有效的方法不是输入而是输出,设计也是一样的。在学习某种理论方法后,通过书面表达出自己的见解和想法,并代入到相应的例子当中,做到举一反三才能算是真正的学到了这个知识点。

· 述职

述职一般出现在晋升报告或者面试当中,“诸侯朝于天子曰述职,述职者,述所职也。”述职可以说是工作报告中的总结性报告。向自己的老板述职是为了升职加薪,向面试官述职是为了获取更好的工作机会;工作成果有了,但是述职做不好的话,在老板/面试官眼里你就做了无成效的工作,述职没有想象的那么简单,但是也没有那么难,很多人都会经历两个述职的误区,这些误区我经历过也看到过,所以总结出来警醒大家。

一、把述职当作流水账

把述职当作流水账是很多新人容易犯的错误,当述职的时候,有的人就会陈列出自己今年做了多少多少工作:“我今年改版了 XXX 模块”、“我设计了 XXX 的首页”、“我通过调查研究自主推导改版了 XXX 模块并落地成功”等等,这时候你的老板/面试官会心里会想:“所以呢?”“然后呢?”,工作结果固然重要,但是决定你能否晋升/录用的,不仅仅是把你做的工作进行流水账般的描述就够了的。

二、把述职当作邀功大会

这个误区相对来说更高端一些,述职的时候有的人常常会像邀功一样:“我今年通过改版了 XXX 模块,导致用户量从50%上涨到了80%”、“通过调查研究改版了 XXX 模块,最后通过 A/B 测试发现数据上涨了5%,最后落地全部实施新的设计方案”,这些看似阐述了产品的背景、自己做了什么以及结果,但是往往来说还是不够的,以上统统可以归为无效述职。

你做了什么重要吗?没那么重要,重要的是你带了什么样的价值。述职所需要你做的,老板/面试官所想要了解的就是:分析为什么产品之前数据会那么低?你是通过那些方法得出解决方案的?为什么那么多种解决方案里你要选择这一种?你这样的方法能否沉淀成体系?如果换一个人来按照你的方法做是否可以得到同样的效果?有效述职也就是决定你能向上一步的,是把你在工作中的感性认知上升到理性规律的归纳总结的能力体现。

· SCQA 模型

SCQA 模型是一个“结构化表达”工具,是麦肯锡咨询顾问芭芭拉·明托在《金字塔原理》中提出的,而这个模型可以套用在业务表达、书面表达以及述职任何场景当中;S是指场景(Situation),C是指冲突(Complication),Q是指问题(Question),A是指解决方案(Answer)。

无论你是在向业务方/老板阐述方案做工作汇报,还是自己写作梳理都可以用到这个模型;S场景陈述的通常是大家都熟悉的事、普遍认同的事、事情发生的背景。由此切入既不突兀交代了事情背景又容易让大家产生共鸣,产生代入感,然后引出冲突C。Q是其中发现的问题,最后A给出相对应的解决方案,是对Q的回答也是接下来我们要阐述的内容。整个结构其实是形成良好的沟通氛围,然后带出冲突和疑问,最后提供可行的解决方案。

我们熟知的广告词经常使用这个套路:

得了灰指甲——描述场景【S】

一个传染两——发生了冲突【C】

问我怎么办?——提出问题【Q】

马上用亮甲!——给出解决方案【A】

这个模型无论作为演讲的开场白,作为向业务方/老板阐述设计方案的开场,还是作为一篇文章的序言都是屡试不爽的。S场景需要让对方产生共鸣,必须让对方产生一种:“是的,你说的好有道理”的反应,只有场景被认同了才能继续故事的发展,这时候打破你给对方营造的安全感,制造C冲突,相继提出Q问题,共同确认面临的一个问题,然后你给出你的A解决方案,而这个解决方案就是你整个叙述的核心和中心思想。

比如你要向业务方/老板阐述你的设计方案,就可以这样来描述:“在 XXv2.0 版本上线后(交代场景),收集了近半年以来的数据发现,女性用户相对减少了20%(发生冲突),为什么会减少20%的女性用户(提出疑问),根据我的调查研究发现原因是改版后整个产品色调偏男性化,由于我们产品的受众群体大多是女性用户,男女比例为1:3,所以在 v.2.1 的改版中我将整个产品色调改为偏女性化的方向(给出解决方案)”。

同样,我写这个章节的思路就可以这样理解:设计师们工作中通常会面临述职、面试以及写文章等情况(交代场景),但是往往很多设计师不知道如何去表达,思路也不是很清晰,导致述职无效、面试失败等情况(发生冲突),要如何避免这种情况发生?如何锻炼自己的表达能力?(提出疑问),那就要多通过 SCQA 模型在生活工作中去练习表达(给出解决方案)。

生活能力(Lives)

最后是生活能力,设计不是工作的全部,工作不是生活的全部,我们应该过好自己的生活,产品设计都是从生活中获得灵感和启发的,我们如何对待自己的生活,我们就会得到怎样的反馈。多陪伴下自己的家人、培养一个兴趣爱好、保持学习新鲜事物的动力等等,成为一个有趣的灵魂。往往设计师能从多样化的生活中发现灵感和启发,也能从生活中找到不同用户的痛点和感知;如何做一名好的设计师,就是带着同理心去做设计,如何带着同理心做设计,就是将自己当作用户,而用户是融入到生活中的。下面我就来例举两个通过生活中的启发改变产品设计的例子。

· 用户拥有感

在购买星巴克的时候,为什么服务员要把顾客的名字写在杯子上呢?难道仅仅是为了分辨嘛?像其他奶茶店一样贴一张打印好的便签不就好了么?去宜家购置家具的时候,为什么要让顾客自己亲手组装家具?可口可乐为什么可以定制自己城市的易拉罐?因为这一切都是要给用户塑造拥有感,人是一种很不理性的生物,只要先拿到一个东西,就会觉得自己拥有这个东西,就不想放掉它了,这就是拥有感最根本的示范。从心理学的角度来说这被称为禀赋效应,意思就是我们对于自己所拥有东西的价值往往会看得更重。这就是为什么小时候玩的玩具、收集的画册、穿的衣服都已经没什么用了,我们还要留着当纪念的原因。因为我们的人性对于拥有感非常执着,对于自己得到的东西非常迷恋,当我们觉得要失去它的时候,会有一种损失感,觉得很不舍,会觉得心里很难受,这就是禀赋效应在我们身上发生了最明显的效果。

而这样的营销策略被用到产品设计当中,例如前段时间很火的软件 Zepeto,每个人都不一样的生成图片洗刷着我们的朋友圈;例如每年年末的账单、网易云音乐总结等等,账单它只是一份账单,根据不同用户生成不同的账单,也就赋予了不同的意义;又例如各种 H5 性格测试生成的分享卡等等,这些都是产品设计中从生活中营销案例中汲取经验的体现。

· 线下导购转线上

每当我们去到商场线下商店的时候,导购员和我们素未谋面,但是却可以通过我们的大致年龄、穿着、性别等因素推断我们需要什么样的产品,然后向我们推销对应的产品,如若刚好触动我们的需求,于是我们就会发生购买这个行为。生活中线下导购的方式也被运用到线上导购的产品中,同样平台和用户素未谋面,可是可以通过掌握大数据,分析用户近半年、近一个月的购买和浏览商品的数据,结合相对应季节等因素推送给用户所需要的产品。比如我平时经常浏览一些潮牌个性的衣物,现在正值冬季,想买一件冬季穿的棉衣,那么当我打开淘宝的时候,系统会推送一些潮牌大衣等冬季衣物在首页,我正好有这个需求又符合我的口味爱好,自然而然就会点进去购买了。

有一条创业准则是这样说的:“如果有点儿闲钱,还有点时间,但又找不到商机,最好的办法就是去闹市、电梯、小区人流量最高的那个大门口,端杯茶,静静的听人们抱怨。”,谷歌、苹果公司的设计思维首当其冲的就是带着同理心去设计、去制定设计策略,同理心来源于生活,而这一切只有设计师把自己的生活经营好,才能从当中获得启发和感悟,然后代入自己的设计理念当中,设计出真正能根本解决问题的产品。

其次偶尔会从网上看到或者听说 XX 设计师猝死,XX 设计师检验出 XX 疾病等等,每每看到此类消息都会感到痛心,工作不是生活的全部,如果连自己的工作和生活都处理不好的话,那么说明这个人生活能力真的很糟糕。如果一个人整天筋疲力尽打不起精神,那么他的工作会做得好嘛?所以在这请求大家合理安排好工作时间,劳逸结合,多锻炼身体,多花些时间陪伴父母、家人,这样才能带着健康的身心去工作,从而取得更好的工作成果,形成一个良性的循环。你怎样对待生活,生活就会怎样对待你。

总结

以上是我总结的除设计之外设计师需要掌握的技能,如果将这些比喻成大树的话,设计能力是大树的根部,是设计师立足的根本;而执行能力则是这根树的枝干,是支撑设计师全部的基础;表达能力是树枝,撑起设计师的整个世界;思考能力则是树叶花果,是设计师综合的产物;大地就是生活能力,当设计师的产物(物质、地位等)“落地”时,滋养着大地,大地越“肥沃”,越能催生出茂盛的枝叶;而规划能力就是一位辛勤的园丁,什么时候需要浇水,什么时候需要修剪枝叶,都是由园丁来承担。

想要跑赢别人,首先得跑过那个跑得最快的自己。





蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

涨姿势!设计师应该要了解的9种常见中国传统纹样

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

设计师应该要了解的9种常见中国传统纹样,制作传统主题的海报、网页、PPT都能用到。

云雷纹

祥云纹

八宝纹

云头纹

寿字纹

万字纹

唐草纹

环带纹

缠枝纹

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

阶段性版式心得分享灬

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着时间流逝,我们会对不同的人事物有新的理解,比如那时听歌听旋律,现在听歌听故事。
希望文章对现阶段的你有所帮助 —



版式的重要性就不多说了, 一个页面的排版,基本就能看出一个人的设计功底了,而且不管你是从事vi、画册、电商、平面、网页、ui都是离不开版式的,一手好的版式非常重要。其实版式可以简单理解为,在一个限定好大小尺寸的画面里,把信息进行有视觉层次的展现,基础的字体图片选择应用等就不多讲了,这里主要讲5点,下面开始正文 ~



1.画面切割,由大而小  


常见的分割有,左右、上下,而我则喜欢不规则分割(大体看是不规则,其中还是有着某种规则),我的习惯是先把画面分割好,然后去填充对应内容,这样就非常快速了,实际上和海报合成之前的灵感草图是一样一样的,下面我就拿几张近期的海报举个栗子。



因为上图是海报,我都是以纯图片为背景的,就是在已有的空间上去分割出文案的位置,可能表达的不是很透彻,下面我以网页来举例子。


那么开始的就是大版面分割了,页面做出来是新颖特别呢还是稳定常规?基本就有感觉了,具体版面怎么分割,完全看个人,只要比例协调,版块与版块之间衔接舒适就ok。



上图左边页面结构,看起来就会显得稳定常规一些,而右边则新颖一些,当然分割不止是大版面,由大而小,大版面分完了就需要从店招开始依次往下进行小版面的分割,最后去填充内容,具体填充手法就看个人设计功底了,下面实际举例,左边为我创作之前的版面分割,大到页面布局,小到某个地方的排版,都是事先分割好的。


也有这种情况,就是按照事先切割好的版块设计途中,有了更好的想法,就会稍作改动,但是大体基本是没有什么变化的(有时候为了修改一个版块排版,结果把下面的排版都给改了去迎合这一个排版,都是泪)




2.了解版式中的点、线、面 


那么什么是点、线、面呢? 

简单来讲,单个元素、文字或者图形都可以是点,多个点相连就形成线,多个点、线在同一个平面内相交形成面。


单个或者极小范围内的图形元素,称之为点,点在版式中常用于,点缀、装饰、平衡页面轻重。


线

线是点运动的轨迹,多个点的链接则形成了线,线常用于强调突出、链接、分割


扩大的点,或者多个点线则形成了面,常用于背景、区域划分



下面举个栗子,大家可以找找图里的点线面分别是哪里,有什么作用。



应该不难看出,单个的虚化渐变都是点,单个的字母  数字也是点,点在这里起到的是装饰点缀作用,中间的大面积渐变是线的体现,下面一排文案相连也是线的体现,线在这里起到的是链接视觉作用,最后这张图里多个点、线的存在就形成了面。




3.信息表达分主次


层级混乱是导致画面失衡的重要因素,客户看图会看得云里雾里,这就注定了是一张失败的图,什么是层级,就是在一个画面里,一眼能看出来主次,信息层级的清楚区分会给人舒适的浏览体验,仔细观看优秀设计师的作品,你会发现,好的作品会在浏览舒适的同时, 引导着你的视觉浏览顺序,我们来看看案例。



我们来简单看看问题,首先是上图,产品和文字之间的距离没有拉开,信息层级区分不够明显,没有明显的视觉浏览顺序以及舒适的体验,设计本身就是一个细节见证品质产物,如果一个页面里多个地方出现这种无层级的信息,则问题就大了。



那么信息分层的方法有哪些呢?


方法1:改变透明度,弱化其他信息的透明度来突出你想要突出的信息


方法2.拉开信息间距,把主题放在视觉焦点的位置展示,一般为中心,或者视觉浏览顺序,即左右,或者上下

方法3:改变字体粗细,通过调整字体粗细来进行弱化和突出

方法4:颜色,通过色彩来区分主次,黑白灰我称为无色调,不算颜色。

方法5:大小,通过改变字体或者图片大小来进行弱化和突出

如果结合多种方法,那么信息层级的区分就会非常明显了,下图用到了居中,颜色,大小,透明度。


4.页面平衡


也是很重要的一点,平衡这个词的概念非常广泛,各种平衡,自然、物理、艺术、心理、色彩、空间等等都包含平衡,而在设计中,平衡也是不可缺少的一个构成要素,画面不平衡就会导致看起来不稳定,在设计中,更多的是体现色彩与体积的平衡。



那么页面为什么需要平衡?


我个人理解为,构成版面的所有元素,不论是文字还是图片,都是有份量的,比如面积大小、颜色深浅、我们在排版的时候要做到各种元素在画面中的占比达到和谐,画面才会平衡,那我们来看看常用的平衡有哪些。



4.1  色块体积占比平衡



上图中,非常明显的平衡就是上下两个色块的面积占比基本一致,给人一种平衡感,色块平衡多用于平衡页面重心,让画面看起来更加稳定,但是上图因为图片反着的,所以才会给人一种另类的感觉。



4.2  位置空间的平衡


上图就是空间平衡,没有用整个图片素材填满整张图,而是文字部分和图片各占据一半,形成平衡。



在来看个栗子



上图两张基本一致,上图就是移动了一下文案和装饰英文的位置,以及加了根条线,却给人不一样的感觉,可以想想为什么。




5.对齐


关于对齐真的是非常基础的一项内容,也是非常重要的内容,放在最后来讲也是希望在提醒大家一遍,画面里的信息一定是遵循着某种规则而摆放,绝对不是随意摆放,有位大哥说过,随意摆放经不起时间推敲,有规则摆放则可能流芳百世 ~ 下面我们来看看对齐的例子。


你都看到哪些地方对齐了?  这样产出的页面,是否更具说服感呢,元素切勿随意摆放,让每一个元素位置都满足为什么。




总结:


版式中包含非常多的设计理念,从字体图片的选择、网格系统的规范、点线面的认知、视觉平衡感、信息分层等多项知识点。今天没有讲栅格,因为我觉得我理解的栅格还不是很系统规范,等后续稍微成熟点在做分享吧,希望本篇文章能对现阶段的你带来帮助,感谢浏览,有问题欢迎留言探讨。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

UI中如何做好产品需求分析

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

设计中的5大渐变趋势,以及如何有效地使用

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

五大渐变趋势是什么?如何在你的工作中有效地使用?

Image title


你可能已经注意到,在17、18年的时候,渐变在印刷和web设计中的使用的越来越多了。看起来设计行业已经接受了这种趋势,这种渐变过渡在形状和颜色上只会越来越动态。如果你不知道如何将彩色的形状和背景应用到你想要通过设计传达的信息中去,那么使用彩色的形状和背景是一件棘手的事情。


5大渐变趋势是什么,如何在你的工作中有效地使用渐变呢?


1、 双色版的渐变

Image title


双色调渐变是两种颜色,它们之间有平滑过渡。没有更多,没有更少。使用Illustrator中的渐变工具创建这些类型的颜色过渡非常简单。当为Duotone渐变组合颜色时,没有规则。当你混合3种颜色或更多颜色时,规则就会出现.但是两个,你可以做任何你想做的事情。这一切都取决于你对设计本身的意图。如果你需要强大而大胆的信息,那么你可能需要考虑使用更鲜明,更高对比度的颜色组合。另一方面,如果你希望采用柔和,更安静的方法,则使用较少饱和的颜色就好了。看你怎么用了



如何使用双色版的渐变?


你可以像Duotone Gradients一样有创意。这种类型的渐变最广泛使用是照片叠加。渐变主要用作内容的简单背景。以下示例是由JessicaHägg和Stink Studios为Spotify创建的此类案例之一。


Image title


Duotone Gradient的另一个例子是由Barthelemy Chalvet为AgenceMe创建的家庭导航设计。在这里,我们再次将Duotone视为内容的背景。内容包括文本和插图。但是,图中使用的颜色非常谨慎。插图主要是浅色调,只是一些色彩鲜艳的细节,与背景双色调(温暖)相反(冷)。


Image title


总而言之,使用双色调渐变趋势的最安全方法是将渐变背景与黑白照片混合,或将它们作为照片叠加层应用。如果你将它们与其他颜色混合,请确保不要过分。多种颜色在设计中可能非常出色,但如果匹配不当,它们也会引入混乱和混乱。如有疑问,请使用较少的颜色。在大多数情况下,少即是多。


Image title


2、半透明渐变


前五大渐变趋势包括半透明渐变。这些类型的渐变在它们中具有褪色效果,它们在一端具有全色调,而在另一端具有0%颜色不透明度。


Image title


这些半透明渐变可以是双色调甚至是三色调渐变,但它们总是以透明度结束或开始。



如何使用半透明渐变?


使用半透明渐变的一种方法是将它们与其他渐变形状和背景重叠,或者作为照片上的叠加层。下面的示例显示了Studio-JQ制作的艺术作品


Image title


在这里,我们可以看到在三色渐变圆上使用一个半透明形状。微妙的半透明形状在渐变圆形前形成雾气氛,就像褪色的月亮,简单而有效地使用透明效果。


在Magdiel Lopez制作的海报艺术品中可以看到混合了摄影和纹理的半透明渐变的另一种奇妙用法。


Image title


三、网格渐变


网格渐变是在Illustrator中使用网格工具制作的渐变,因此是标题。这种类型的渐变需要更多的技巧来制作。通常它们将多种颜色混合在一起,这应该小心生产,因为某些颜色不能很好地匹配。除了将多种颜色混合在一起外,它们还形成一种类似于液体的纹理图案,使其具有更加动感的外观。


Image title


到目前为止,您可能已经注意到所有渐变如何与黑白照片完美配合,为他们提供增强色彩强度所需的对比度。它还消除了设计中“过多”的混乱和感觉。


如何使用网格渐变?


网格渐变可以用作独立模式。由于它们通常具有动态外观,因此可以作为简约模式应用,并辅以创意印刷术。


Image title


使用网格渐变进行品牌推广也越来越受欢迎。这种类型的使用可以在下面由Focus Lab制作的简约品牌项目中看到。


Image title


4.渐变模糊


这是事情变得有趣的地方......。介绍渐变模糊!我相信你已经看到了这些有趣的外观,有一种强烈的“艺术”感觉。它们现在是Top 5 Gradient Trends的一部分。


Image title


如何使用渐变模糊?


它们似乎经常被用作海报设计的一部分。抽象的伟大之处在于它可以用来描述各种情感和抽象概念。它可以说明声音,光线,宇宙,幸福或悲伤。我们根本不知道如何描述这些单词中的许多单词,但精心挑选的模糊彩色形状可以帮助我们。


让我们看一些使用渐变模糊的示例:


Image title

Image title


5.渐变球体


最后的渐变趋势是渐变球体,具有强烈三维形状的网状圆圈,提醒我们在行星和气泡上。


Image title


如何使用渐变球体?


Gradient Spheres在应用程序和网页设计中占据了一席之地。由于它们与行星类似物体相似,因此它们通常用于技术未来类型的项目中。例如,Jiyoon Kim使用Gradient Spheres设计一个具有轻盈未来感的创意手表UI。


Image title


Mirtho Prepont为Asana制作的海报设计中使用的Gradient Sphere的另一个创意示例:


Image title



写在最后


如果你使用渐变的照片,第一步应该是选择正确的照片。最好的选择是具有清晰焦点的照片,如果可能的话,焦点周围没有其他任何东西。值得花时间的第二件事是照片的颜色。如果颜色与你的渐变无任何关系,最安全的做法是将照片切换为黑白模式。

但是,有时可以通过在Photoshop中使用“颜色饱和度”工具或“颜色平衡”来调整颜色。这正是我在这个例子中所做的。第三是选择渐变形状和背景。


选择正确的渐变对象时,请确保它们都具有相似的色调。在我的例子中,我使用蓝色/紫色物体与粉红色/黄色物体形成鲜明对比。这些都是我需要的颜色。任何更多的东西,组成会感到混乱。虽然很容易穿过线,所以如果你不确定,只需要减少颜色和减少形状。


如果你感觉某些东西仍然缺失,请添加中性几何形状,如果背景为浅色,则为白色;如果背景为暗,则为黑色。


Image title

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 


如何合理创建间距系统,来更快的实现设计方案。

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

让设计师和开发团队有意识的利用好间距系统,可以提高产品的可读性和一致性。

Cheatsheet总结了我的方法


我最近致力于为电子健康记录(EHR)产品定义间距系统,以改善产品页面的可读性和一致性。我提出了3个间距规则(3C规则)和以4为基准的间距网格,并且这些规则与新的印刷系统配合得非常好。


存在的问题


当定位垂直元素时,设计师不应做出随意或者任其自然的判断。通常设计师通过按住Shift和上下箭头键在Photoshop中实现垂直增量:“根据实际情况来决定使用5px或10px。”这种方法虽然是10的倍数并且可用,但是它不符合任何印刷要求的规范。

——Robert Bringhurst,著有《印刷风格元素》一书。


  • 我们在EHR产品中使用了5px、10px、15px、20px的边距/填充,但是在何时何种情况下使用这些间距,我们并没有一个严格的规范。

  • 边距/填充只是间距系统的一部分,字体行高也会增加额外的高度空间,但目前我们没有为现有(旧的)文字样式创建行高规范。

  • 相似的组件和内容在产品中看起来不一致,这造成了EHR产品的整体样式不统一,并且因为数据疏密程度不同,造成了阅读体验的不流畅。

Image title



解决问题


步骤1:确定文本行高(确定基准网格)

首先我们假设使用非常流行的8点基准网格(即以8的倍数为一个间距规单位)会达到好的效果,因此在实验中,我把基准主体字体大小设置为13px,行高设置为8的倍数即16px或则24px然后看看这两个行高规则是否有用。如果没用,则意味着8点基准网格是不适用的。

Image title

然后我将基准字体大小设置为13px,并在16px和24px之间的偶数寻找行高值。开始我将它与18px(6的倍数)匹配,如果成功那就意味着我采用了6点基准网格,也就是6的倍数(间距会是3、6、12、18、24)。后来我尝试了20px的行高,使用起来效果很好,所以我采用了4点基准栅格(也就是间距为2、4、8、12、16、20等)。

Image title


步骤2:用希克定律和几何级数来确定间距值


“随着可选择数量的增加,做出决定的难度将会增加。”

——希克定律


我们要想出一个可感知的间距系统来简化设计决策,另外将所需值的数量保持在一个最小范围内。

  • 间距值是基准网格的倍数数值(如步骤1中确定的4点基准网格),因此我的间距值为4点基网格(2、4、8、12、16、20、24、28…)

  • 一般来说,4–-5个间距值已经为产品设计提供了足够的差异性,即使对于复杂的企业产品也足够了,但是在实际过程中可能需要灵活的在规范中增加间距值。

  •    我决定使用4点基准网格,因为它提供了更好的视觉可感知区间,对于层次结构的展示来说非常好,因此间距值应该是(2、4、8、16)。

Image title


如何以可预见的方式应用这些间距值?3C法则来拯救你。

我深受Nathan Curtis上面文章中介绍的Insets,Stacks&Inline等间距词汇的影响。我决定在其基础上构建一个额外的词汇组,以便我的团队更容易理解每个词汇的使用环境。我将所有的间距规则分解成3个C:容器、内容和组件。

· 容器规则使用了平方差的概念(使用16px)

· 内容规则使用了堆栈的概念(头部堆栈使用2px,叶节点堆栈使用0、4、8、16px具体取决于内容类型)

· 组件规则使用内联的概念(大多数情况下使用8px,4px表示关联关系)



第1C:容器规则

容器是UI中的框架,其中包含内容,通常这些内容是页面、卡片、模态、弹窗等。由于容器在层次结构中处于最高层次,所以我确保所有容器的间距值(在我的例子中是16px)。提示:切勿在任何间距计算中包含边框。

Image title


Image title


第2C:内容规则

  • 内容存在于容器内部,内容包含:

  • 标题(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插数据。

所有这些内容都是使用页边距垂直叠加的,但字体行高也为指定的页边距增加了额外的间距。我无法以一致的方式解决这个问题,因此我同时考虑了行高和边距,创建了自己的处理堆栈的方法,以下是我的过程:


A)首先解决头部堆栈

  • 如下图,我通过使用2个选项来获取标题的行高。

Image title


  • 为了简化这2个选项之间的行高决策,我计算了每个行高比,并决定使用等于1.5或更高的行高。对于选择哪个行高,我仍然犹豫不决,但是在进行了视觉探索并回顾了设计团队的结果之后,我们确定了应该采用那个行高选项。

Image title

视觉探索的过程

  • 我从顶部的H1开始,尝试使用2px、4px、8px等的不同间距选项。行高为36px的间距选项都很紧凑,但4px间距与行高40px感觉恰到好处!

Image title

 

  • 接下来我解决了H2问题,在我们的产品中,H2恰好是白色页面的第一个标题。所以根据容器规则,最上面的H2在顶部有16px。我决定在所有H2标题上面给出16px间距高度(最大允许间距值),因为这个值使得层次结构非常清晰。

Image title

 

  • 然后我在所有标题(H2、H3、H4、H5)和列表、段落、表格之间进行了间距值0px、2px、4px和8px的实验。2px和4px的间距相差无多,但是我们在设计团队内部审查结果时,2px的视觉感知更好,尽可能的坚持只有一个边际数值,因为它简化了设计和开发过程。

标题和叶节点间距实验

标题和叶节点间距实验

标头堆栈 - 间距为2px和4px


B)接下来解决叶节点堆栈

EHR有4种主要类型的叶节点:

  • 表单(几乎50%的产品)
  • 列表(几乎30%的产品)
  • 表格(可能是产品的15%)
  • 段落(可能是产品的5%)

我开始为最简单的内容类型——段落来处理间距。


每个段落内的间距

这非常简单,只需要清空段落中的所有文本行空间,这样两行之间就有0px边距。

Image title

Sketch中的排版段落(行高20px是通过视觉探索得出的,并使用WCAG SC 1.4.8进行验证,其中规定“ 行间距至少是段落内的空间的1.5倍 ”(20/13 = 1.538)


两个连续段落之间的间距

我第一个想法是使用行高为20px的间距,但后来看到了WCAG SC 1.4.8,其中指出   “段落间距至少要比行间距大1.5倍,因此一段最后一行的行高为250%,这样可以保持距离下一段第一行间距更合适。 假设%值是根据基本字体为13px的大小计算的,我计算出两段之间的实际间距应约为(ps - ls)= 13px,将使用margin-bottom:13px在CSS中定义。但是13px不是我们在步骤2中确定的间距值之一,因此我选择了16px作为段落底部的边距。

Image title

解释WCAG SC 1.4.8中的段落间隔规则

在Sketch中多段落排版

在Sketch中多段落排版


如果对计算结果有疑问,我总是用视觉探索进行交叉检查。与其他可能的值相比,段落之间的16px间距最佳。其实我认为12px间距会更好。但是我不想仅为这个用例为整个间距系统添加额外的值,另外我们的EHR产品没有很多段落,几乎没有任何连续的段落。

Image title

列表中列表项内的间距

列表是由多个同质数据项组成的数据结构,由于列表将所有这些同质数据项组合在一起,因此列表项不像段落(它们之间有16px)那样间距很重要。同时列表项仍然需要稍微分开,所以我尝试了0px和16px之间的间距,我只有3个值可以试验2、4、8,总体看起来列表项之间的间距为8px看起来最适合层次结构。

Image title

带有标签的2个连续输入字段之间的间距

表单有连续的输入字段,一个接一个地叠加在另一个之下。

Image title

无标签2个连续输入字段之间的间距

无标签对于可访问性来说并不是一个好的处理方式。然而在某些情况下,标签最好不要显示,这些情况是:

  • 当多个输入字段一起表示1个对象时(例如在下面的地址部分,“地址”字段包括街道地址1,街道地址2,城市,州,邮编)
  •   当标签过于明显/重复且无法拼写时,例如搜索。

Image title

 

第3C:组件规则

组件有按钮、输入字段、图标等,这些组件通常放置在一起(内联)。此外所有的组件的尺寸均为4的倍数(也是8的倍数),因此按钮和输入域内部有一个24px高度的空间(加上1px 顶部和1px的底部边框,整体高度为26px)。当组件能完美利用好基准网格,并且按规则设置间距时,整体布局才会完美和谐。


2个组件的间距

我用了一个简单的规则,即在大多数时候任意2个相邻组件之间使用8px间距。在少数情况下使用4px来显示两个组件之间更紧密的关系(格式塔的接近性原则)。

内联间距为8px(玫红色)和4px(橙色


组件内部间距

我对组件内部的任何左/右填充都使用了8px。

Image title

图标在组件内部间距

根据格式塔的接近性原则,将图标放在组件内,将他们的间距设置为4px,而不是通常的8px。

Image title

外部图标与组件间距

如果图标与组件关联组合,则其与组件间距为4px以显示其关联关系(格式塔的邻近原则)。但是如果图标与一组组件关联,那么它与最后一个组件间距8px,以表明它不仅仅是与最后一个组件关联,而是与整个组件关联。

Image title


结论

  • 你将提出一个具有有限数值和有明确使用规范的间距系统,这非常易于使用并且合乎逻辑记忆。
  • 在UI中使用间距,使其信息层次结构更加合理清晰,并遵守可访问性指南WCAG1.4.8,这有助于不同能力的人更好的掌握和理解信息。
  • 开发工程师了解间距系统,并且熟悉其应用的场景和规则,这样可以让设计和开发之间的沟通更顺畅,工作效率更高等。
  • 设计师不再需要对所有内容进行排查,开发工程师不再需要花时间检查Zeplin等其他工具中样式问题。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

快速提升设计感的7个版式小妙招

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

看了很多版式技巧仍排不好版?懂得很多套路仍做不好设计?其实也正常,因为大部分技巧都比较笼统,每个人用起来也会有不同的效果,所以葱爷特地总结了7个比较具体的小技巧,算是属于一学就会且很容易出效果的排版小妙招,希望能帮你解决一些比较具体的问题。

文叠文

该技巧操作起来很简单,就是在标题或内文下面,增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意:

  • 颜色要比上面的文字淡,以免影响其识别性;
  • 字体要用粗体,且字号要比上面的文字大;
  • 要与上面的文字错位排版。

之所以这么处理是为了增加版面的层次、对比,以及丰富元素。

给标题增加小色块

这是增强标题设计感的另一种处理方式,单纯的文字标题难免显得单调,我们可以通过增加辅助元素使它变得更丰富一点,比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度,小于文字的高度,加上去的方式可以是叠加于文字之上,或是置于文字底部,创造出文字的一部分在色块内一部分在色块外的对比效果。还有,色块的颜色最好来源于版面中的其他元素。

用斜线或点填充空白

在做设计的时候常常会遇到这两种情况,一是版面中会多出一些影响版面平衡的空白,但已经没有合适的内容可以填充了,如果硬塞一些装饰文字或者图案,很可能会弄巧成拙;二是有的区域小元素小信息比较多、比较散。怎么办呢?

这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形,然后把它填充在空白处就可以平衡版面,且不会造成突兀的感觉,如下图案例:

要点:线条不宜太粗,点也不宜太大,而且此方法只适合填补小空白,不适合填补大面积的空白。

在比较散的元素下方排一组斜线,可以把各个分散的元素联系起来,使其成为一个整体。如下图:

把背景分成两个斜切的色块

背景能很大程度地影响版面的设计感,这一点应该都有体会,常规的处理方式是把背景作为一整个色块,而如果把背景分割成两个几何色块时,设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处,划一条倾斜的直线贯穿版面,使整个背景一分为二,而这两个色块的颜色对比要比较强烈。另外,在横版中用左右分割,竖版中用上下分割效果会比较好。

给图片加圆形色块

增加对比关系是加强设计感的最有效技巧,我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物,那么在这些图片上加一个圆形的色块,创造出虚与实的对比,通常也能得到不错的效果。

要点:

  • 色块可以置于图片底部,也可以采用正片叠底压在图片上方;
  • 圆形色块的边长至少要超出图片宽或高;
  • 图片与色块要错位排列。

给每行文字都加一个色块

该手法在画册和海报设计中比较多见,与直接在一段文字下方加一个大色块不同,而是要根据每行文字不同长度,单独加一个相应长短的色块,所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体,增加文字视觉冲击力,而且还能使文字与背景区隔开,加强文字的识别性。

要点:

  • 段落文字行数太多或太少效果都不会很好,3-10行左右为最佳。
  • 各个小色块可以相互连起来,也可以相互隔开,以实际效果为准。

用飘带装饰包装上的文字

如果你看过的食品包装够多,你应该能发现,很多包装上的产品名称、广告语或者卖点等信息,都会摆放在一条飘带上。这么处理的效果通常不错,因为飘带具有礼品、赠送的寓意,用在哪里都不会太唐突,而且飘带的形式简单、有细节、变化丰富,很适合用作装饰元素。

还有一点也很重要,飘带的形式一般都是柔软的曲线,这与版面中其他直线元素可以形成鲜明的对比,加强版面的灵活性。

结语

以上的七个小妙招是不是既简单又实用,你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已,只能优化局部,不要指望用上这几招就能做出很好的设计,而且它们也不一定适合所有情形,在实际操作中一定要具体问题具体分析,灵活运用。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

今年超火的放置类AR设计,送你一份大厂出品的设计指南

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

AR的特点

  • 不隔离真实世界,而是将计算机生成的信息和物体叠加到现实场景中。
  • 借助AR设备,用户可以更自然地与增强现实环境进行交互,这类交互满足实时性,例如手势、语音。
  • 计算机生成的物体与真实环境无缝对接,并且用户在真实环境中运动时,也将继续维持正确的位置关系。

放置类AR的场景及类型

AR的场景多种多样,其中在手机设备的AR体验中,有一种基本且常见的场景:通过手机摄像头,用户在环境中放置虚拟物体(模型),用户与它有一些具体的互动操作,如移动、旋转等。

我们将这类场景统一称为放置类AR场景:放置对象可以是一扇虚拟场景的任意门,用户可走入门中互动;也可以是一件家居商品,用户可预览商品是否与室内环境搭配等。针对不同的放置对象和场景,设计侧重点也会有所不同。

基于真实环境放置虚拟模型,并与模型进行交互的AR场景。

放置类AR的交互框架及节点

无论放置的对象类型如何,用户打开相机,在屏幕中放下具体模型和进行互动的过程具有共性。我们把中间的完整流程拆分为了以下部分:

初始启动的节点分析和设计建议

1. 初始启动环节的作用

用户打开放置类AR功能后,进入环境识别前的过程,均属于初始启动的范围。放置类AR为何需要有初始启动环节,用户不直接进入AR场景进行体验?

由于技术和产品的需要,放置类AR初始启动承载帮助用户理解、AR素材准备,为用户带来更优的AR体验。

初始启动的流程中,包括启动页、引导页、加载页三个部分节点,三个节点可同时存在,也可只存在一个或两个节点,具体需要根据设计需求来决定。

启动页的定义及设计形式

在启动页游戏AR应用中比较常见,只有短暂停留。页面起到品牌露出的作用,或在启动APP后渲染氛围,迅速将用户带入。设计手段包含:音乐、音效、视觉、文字、动效,具体运用根据实际设计需求而定。可以参考以下两种设计内容:

  • 品牌露出。围绕 logo 进行设计,给用户强化品牌的印象。
  • 氛围烘托。围绕主场景/故事设计海报式的视觉设计,让用户对之后的AR应用的情节/人物/模型有初步印象。

启动页虽然不传递明确的含义和信息,但不同的设计手段可以给用户传递出不同的品牌调性和场景氛围感,其中音效和动效形式的应用会增加启动页设计的吸引力,下面将结合案例具体说明。

引导页的定义及设计形式

引导页促进用户进入后续的核心体验流程,传达有关体验的明确内容,根据 APP 的类型,引导内容有所不同。但不涉及后续具体细节操作。常见的引导包含:内容介绍、安全警告、体验建议、环境要求、玩法介绍、新手引导等。设计手段包含:语音、音乐、音效、视觉、文字、动效。具体运用根据实际设计需求而定。可以参考以下五种设计内容:

  • 产品介绍式引导。简明扼要地介绍AR应用的主要作用。
  • 辅助信息式引导。模型的补充理解信息,引导用户了解模型背景知识等。
  • 体验建议/要求式引导。简明扼要地提出会直接影响AR应用体验沉浸感的建议或者要求,以引导用户照做,获得后续最佳体验。
  • 背景故事式引导。通常以丰富的可视化形式展现于产品/模型交互相关的背景故事。
  • 试玩式引导。直接以某个模型举例,引导用户一步步进行交互,获得该模型的完整交互体验。

引导页有明确内容,根据设计需求可以考虑从产品介绍、展示辅助信息、在体验时的建议或要求等。每种设计内容有各自的适用场景、设计形式及优缺点,将结合具体的案例进行说明。

加载页定义及设计形式

加载页需要用户等待,加载时长根据加载内容的大小而变化。过程可能包含素材下载、模型加载、材质渲染、界面UI等。设计手段:文字、视觉、动效、音乐、音效。具体运用根据实际设计需求而定。可以参考以下五种设计形式:

  • 进度条式。常见的是浮层样式。感知最弱,通常设计样式跟随移动应用的框架样式。
  • 文案式。通过文案传达加载过程中的信息,让用户知道进行到哪个步骤了,后台正在做什么。但需要注意进程描述的文案不超过3条,且语言需要简单好理解,避免使用技术性语言迷惑用户。
  • 转场式。完整的转场页设计,视觉需要符合产品的整体调性,以保证整体的和谐统一。游戏中最常见。
  • 下载式。下载式的加载可取消加载,因为模型较大,需要较长时间进行下载体验。并且通常用户只对单一模型感兴趣,没有连续体验多个模型的需求。必须下载成功,才能进入后续的AR体验。
  • 静默式。将模型下载过程并入引导页,使用户无感知。该方法适合情节连贯的AR体验。

建议使用Jigspace、Lego AR、AliceARQuest等AR应用进行体验。

2. 初始启动设计原则及建议

整个初始启动环节包含启动页、引导页和加载页,整体的设计原则可总结为:

初始启动设计第一步是根据应用类型选择设计内容和形式

不管是启动页还是引导页的设计,都需要根据应用的类型去决定以何种形式给用户展现必要的信息。例如:游戏类注重用户的沉浸感,引导以故事介绍+体验建议为主。科普类的需要通过界面+三维的形式展示更多信息给用户,引导以产品介绍和信息补充为主。

启动页设计目标导向,不拖沓不无聊

根据APP类别选择恰当的形式,尽量简单直接,尽快进入后续内容页。游戏类可形式丰富,时长稍长。

引导页设计简单直接,使用多维度设计手段增加引导信息的丰富度

不管引导的内容是产品介绍,还是试玩引导,简单直接始终是目标,不在引导的部分占用用户过长的时间。另外也不能为了节约时间而使必要信息缺失,因此可以选择丰富的设计手段,让必要信息充分暴露。

加载页设计优先考虑无感知加载,否则根据加载时长使用不同形式

如无法无感知,则根据加载时长选择加载的设计形式。例如:时长较短的加载过程需要简单明快,不打扰用户。时长较长的加载过程需要过程明晰,给用户明确的预期。尽可能避免阻断式的加载过程。通过设计方法增加长时间等待的愉悦感,减少不耐烦。

场景搭建的节点分析和设计建议

1. 场景搭建环节的作用

AR应用启动后,经历完内容引导加载的过程,便正式进入了AR场景搭建环节。从技术的角度来说,想让模型稳定地融合于真实世界,我们首先需要让手机摄像头认识周围的环境,即为场景搭建的第一环节:环境的感知识别(环境识别包括平面识别、图片识别、物体识别等,本文聚焦在环境中的平面识别)。确定平面之后才能继续进行模型放置,直至用户成功把模型在真实环境中放下。

2. 平面识别的作用及完整节点

平面识别指通过对环境特征的感知,确定一个基于真实环境的平面。确定放置平面后,即可构建虚拟世界的坐标系,在虚拟世界中放置模型。平面识别是放置类AR体验的第一步,是后续所有体验内容存在的基石。因此在设计中我们需要保证平面识别的成功率,保证用户的顺畅体验。

这个环节本质上是个技术驱动的环节。程序启动后,系统以手机摄像头为原点建立了3D世界坐标系。相机界面打开后,系统开始识别拍摄到的真实环境。通过检测所捕获的图像之间的视觉差异点(即特征点),系统可以确立一个平面,并在世界坐标系中赋予平面一个位置信息,自此3D世界坐标系与真实环境中的平面建立了联系。找到平面后,系统仍会持续进行检测、更新平面的信息。

平面识别的成功需要用户将手机摄像头对准平面并移动手机,从而获得更多平面的特征点、确定平面。因此在设计中,首先需要引导用户做此动作配合;同时在用户动作中,应对识别状态给予实时反馈,让用户有把控感;识别失败时,有效的容错设计可以减少用户挫败感,提升识别成功率。设计节点可总结为以下几点:

动作引导定义及设计形式

动作引导需要引导用户做出配合的动作从而成功识别到平面。主要的引导内容是:引导用户将手机朝向一个平面任意方向移动,从而识别到平面。

表现用户动作的引导形式有多种,如:文字、图片、动图、语音以及这些方式的组合方案等等。每种单提示形式都有其各自的优缺点。如文字可准确传达信息但阅读时间较长;动图传达直观,但准确性不够等。因此建议使用组合方案的形式进行动作提示,结合单提示形式的优点,同时规避其缺点。可以参考以下2种:

  • 动图类组合引导。用动图直观展示用户需要配合做的动作,同时辅以文字说明,清晰直观。
  • 语音类组合引导。视觉+听觉双通道提示,使信息更有效传达。

动作引导建议使用组合方案来进行提示,可以根据产品类型和场景选择合适的方案。结合具体案例以说明:

平面识别中的定义及设计形式

程序识别平面的过程中,所花费时间往往受用户所处环境的影响,环境较复杂时,识别时间可能较长。因此建议在平面识别的过程中,反馈识别的状态,帮助用户了解系统的行为,知道自己所处的状态。状态反馈有两种建议的方式:

  • 动效过渡。用特征点闪动、平面延展等动效形式表示平面正在识别中的状态。
  • 可视化识别进度。通过量化平面识别进度来表示状态,让用户清晰了解自己所处的状态阶段。

平面识别中的状态反馈可以让用户了解系统行为,明晰所属状态。该步骤通常会和下一步合并设计。结合案例进行说明:

平面识别成功的定义及设计形式

平面识别成功后,建议可视化检测到的平面,给用户成功的反馈,同时让用户知道即将放置模型的平面在哪里。

  • 平面可视化。通过UI层直接可视化出识别到的平面,如使用网格等UI形式。
  • 模型放置位置的可视化。通过模型放置位置的UI侧面可视化识别到的平面局部,与下一步自然衔接。

平面识别成功的反馈是平面识别环节完成的节点,该步骤可能与之后的模型放置结合设计。结合案例进行说明。

平面识别异常的原因及设计

前文提到平面识别主要依赖对环境特征的检测,在一些情况下会很难识别到平面。当出现异常时,如何引导用户解决异常也是体验设计的重要内容之一。经过前期技术调研,平面识别异常的情况主要有以下几种:

  • 光线过暗,没有足够的光。
  • 光线过曝,光太强造成画面过曝。
  • 缺少纹理,扫描纹理很少的平面很难成功,例如扫描纯白的墙是无法成功识别平面的。
  • 图像模糊 ,如果用户快速移动手机,就会造成拍摄图像模糊,导致无法识别或识别不准确。

我们可以对每种异常进行具体的提示,也可以给出综合提示。这里建议的异常提示策略主要有两种:

  • 针对性提示。在用户长时间检测不到平面时,根据当前具体的异常情况给出针对性提示。如检测到光线太暗,就提示用户去光线充足的地方体验。
  • 总结式提示。若无法获得具体的异常情况,可总结、合并4个原因的解决方法进行提示。

进行提示内容话术设计时需注意:

  • 提示话术不能太技术,需要用户可理解;
  • 提示内容需保证用户可操作。

另外异常提示的设计形式也有多种:文字、图片、动图、语音、组合方案等等。在设计时需要结合「动作引导」的设计形式进行整体提示的组合方案设计。例如动作引导是文字+动图的形式,异常提示就不应该出现语音形式;动作引导是文字+语音形式,异常提示同样使用语音的形式更一致。

平面识别的设计原则及建议

平面识别的设计原则及建议:

  • 动作引导需要自然、直观、易学。减少用户认知成本。
  • 识别状态实时反馈,形式可以是视觉、声音甚至震动。给用户可控感、掌控感。
  • 需要有容错设计。避免用户因识别失败带来的挫败感。
  • 设计形式的一致性。动作引导与异常提示的设计形式需配套,保证设计的一致性。

模型放置的定义及作用

确定了放置平面后,下一步就是放置模型。模型放置指:通过一定的放置方式,让模型出现在平面的某个位置上。

在模型放置模块中,我们需要定义和设计放置方式以及放置位置。放置方式可以是自动放置,也可以是手动放置。放置位置可以是给用户体验效果最好的一个坐标点,即最佳放置位置;也可以是一片区域的任意一个坐标点,即可放置区域。

1. 放置方式的定义及设计形式

模型的放置方式主要有两大类:

  • 识别到平面后系统自动放置模型;
  • 经用户操作手动放置模型,可以是点击屏幕触发模型放置或拖拽模型进行放置。

可以参考以下三种设计形式:

  • 自动放置。检测到平面后,模型自动出现在场景中,用户无需做任何操作。此方式适合用户不需走动的AR场景,对模型的位置要求不高。
  • 点击手动放置。检测到平面后,用户需要点击屏幕触发模型放置。此方式适合场景互动类应用,需要用户在环境中走动,对模型位置有一定要求。
  • 拖拽手动放置。检测到平面后,将模型从屏幕的模型库中拖拽到平面上。

模型的放置方式主要有自动放置与手动放置,可根据不同场景设定适宜的放置方式,以下结合案例具体说明。

2. 放置位置的设计内容及建议

放置模型时,模型即将放置的位置需要根据具体互动场景进行设计,以保证用户的视觉体验和互动体验。如果模型放置过近,用户无法看到模型全貌;过远,需要用户走动才能进行互动的应用会增加互动难度。可以参考以下两种设计内容:

  • 最佳位置。自动放置场景和部分点击触发放置场景下,建议给模型设置一个默认最佳位置(具体的坐标点)。
  • 可放置区域。拖拽放置场景下,建议给模型设置一个可放置区域。

在做具体的放置位置设计时,需要考虑以下几方面的因素:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档