帮你梳理卡片式UI的设计最佳实践分享

卡片式设计依然是目前UI设计的热门，虽然我们在前几天的文章卡片式设计并不能支撑所有的设计需求当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手，为你展示卡片式设计的最佳实践。卡片这种UI元素一直是以小巧整齐的内容容器的形式而存在着。当我们探讨清晰平衡、富有美感、简约时尚而又具备良好可用性的设计方案的时候，卡片式设计几乎是不二之选。早年间的Pinterest 和Facebook 是卡片式设计的先驱者，随后Google 通过 Material Design 几乎标准化了卡片式设计，现在你会发现卡片式设计，几乎已经深入到各个行业、领域的UI设计当中。最佳实践(best practice)，是一个管理学概念，认为存在某种技术或者方法使生产管理实践的结果达到最优，并减少出错的可能性。也就是我们常说的“最佳解决方案”。最初是 Pinterest 采取了这种使用卡片作为信息组织的基本元素的思路，使得网页中多类型信息组织有了更好的用户体验设计方案，并随后引发了“瀑布流”设计风潮。之后多年的积累和探究，卡片式设计有了长足的进步和相对系统的设计思路，今天的文章，我们将探讨最常见也是最实用的5种卡片式设计的最佳实践。1、遵循“一卡一概念”的规则每一个卡片应当承载一种概念，其中内容不应当混搭而复杂。卡片式设计当中，卡片可以橙子啊多种多样的信息和元素，但是单个卡片应当保持其中内容属性的纯粹性和直观性。这样用户会更轻松的选取他们想要的内容，或者分享他们眼中最合适的内容。2、让整个卡片都可被点击根据费茨定律(Fitts’s Law)，用户应当可以点击卡片的任何一个部分来触发其中的内容，而不只是图片和文本链接。更大的触摸和触发范畴是卡片本身的优势所在，不论是在移动端的触摸屏上，还是以键盘鼠标为主桌面端上，让整个卡片都可被点击明显拥有更强的可用性。

浅谈设计师如何安稳度过设计迷茫期

面对前有大神，后有新人的竞争压力，很多2-3年的设计师越来越迷茫。该如何提升自己，从哪方面提升，今天这篇帮你解疑答惑。欢迎关注作者应骏的微信公众号「shejishiyj」UI设计狮联盟。目前的设计师的处境不太乐观，分别出现了以下这些场景：万人过独木桥目前全国有十几家大型UI培训机构，和许许多多个人或小团队组织的培训班，一年下来培训出来的人员高至几万人，而在目前的企业人员流动下看只需十分之一不到的人就能填补这个缺口，这就出现了万人过独木桥的状况。企业宁愿慢慢等着那些走过独木桥的，也不愿意急迫选择那些被堵在后面的人。而能走过独木桥的人，他们的都是非常具有竞争力的。他们无法被轻易取代，如果你的工作能够被轻易取代，那说明你没有什么竞争力。好，这一段的关键词是：提升竞争力前有猛虎，后有恶狼说简单一点，就是你的前面是重重设计大神压着的大山，你走不过去。后面是一群急迫想要成长的年轻人。这个时候你的位置是很尴尬的，跨不过大山，一旦被狼追上你也就被淘汰了。幸好我们有工作经验这唯一能够让我们立足的武器。但是年轻人比我们更早打开了知识的大门，他们的思维更活跃，时间更充沛，精力更旺盛，你这一把经验的铁锹如果不将他打磨成一把尖刀，那也是徒劳。这一段的关键词是：如何将经验磨成尖刀岔路口迷了路你现在可能工作了3年甚至更久了，但是依然不温不火。也有可能你工作了1年但是没有达到理想的目标。如果说工作一年没有找到适合的道路还能理解，但是工作3年还没找到明确的目标，那就需要提高警惕了。没有明确的目标方向，那你依旧只能是一个美工。所以不知道怎样继续走下去，原因是一直都在被动的工作。关键词：明确方向，主动出击

4个关于复杂产品设计的实战经验总结

管理设计的复杂性一直是个令我头疼的难题，「简约至上」这句口号说着轻松，可是实际执行起来却常常发现无从下手。这段时间也重新翻出了几篇和设计复杂产品相关的文章阅读，从中受到了一些启发，再结合个人工作中的一些反思，写成此文。先举一个撕逼失败的场景(设计对象为B端内容型产品)：产品经理：我们要设计一个XX模块，需要放的内容有XX、XX、XX……设计师：(大致设计了个效果后)这么多内容也太复杂了吧!真的都是用户需要的吗?能不能再精简一点，你看这个字段是不是可以少几行，这个功能是不是可以考虑不要……产品经理：不行，这个内容对用户很重要，这个内容也是，这个功能是我们业务上非常希望做的，一个都不能少，而且我觉得现在放的内容还少了，这里能不能再加一行……设计师：但我觉得这些地方根本就不会有人在意啊!产品经理：那是你作为设计师的看法，你又不能代表用户。设计师：……可我还是觉得这个地方意义不大，上线了也不会有人用的。你能证明它的意义吗?要不要做个用户测试?产品经理：这个我没办法给你预测，我们现在没有点击和浏览数据，证明不了这点，做用户测试太耗时了，先上线看看效果再说吧。设计师：……

详解Banner设计为什么要使用图形设计

在Banner设计中，经常会使用一些图形，将文字或一些图片框选起来。为什么这样做，其实是无可奈何的。如果我们看一下除Banner之外的图片，几乎很少用图形的，当然有些Banner也不用图形的，都是有原因的，我们可以具体分析一下。一：艺术图片为什么一般不用图形。图形的目的就是引起注意，起到一个提示的作用。但是艺术片有它自己的方法。它们一般会使用色彩的明暗或大小等或一些特效来突出他们的主题。因为图形有分隔的作用，会破坏整体效果。再者艺术图片图是第一位的，文字非常少，可以做的很大，况且也不是主题，也就不需要图形框选了。上面的几幅图，通过颜色的差异，主题的大小，特效的制作，就足以将作者的意图表现出来了，还用图形做什么。比如第一副图的色彩第二副的大手和纯黑背景第三幅的特写第四幅的排列都可以体现主题，其它的就不重要了。这里图形是主题，文字是次要的。二：Banner为什么喜欢用图形Banner是一般都是用于产品的宣传，所以不允许使用明暗度来表现，大部分都是比较亮的颜色(也不绝对，一些比如手机相机一类的会使用黑色)，这样就要使用其它方法来表现图片。其二Banner文字较多，文字相对较小，(至少里面经常会出现小字)，所以表现的难度进一步加大。只能使用图形(如三角形.矩形或圆形)来突出主题。这是一种无可奈何的选择。第三Banner人们关心的产品，对整体的艺术效果看得不重，所以可以容忍使用图形。最最重要的是，banner需要文字来解释，文字的重要性远远超过艺术图片。

详解设计师到底要如何学习视觉设计

谈起视觉设计的学习，好像并没有谁能够讲清。视觉看起来很难和理性扯上关系，因为视觉是显而易见的，做之前没人知道要做成什么样，做完之后又很容易被挑战。有人说，学习视觉设计最好的方法是不断的做项目，我却不这样认为，闷头不停的做项目是没有前途的，时间久了，纵然软件越来越熟，但是稿子一定是越来越「行活儿」，最后画图就会成为本能，而留给思考的时间越来越少。有人说，视觉就是玩票，不用在意视觉到底能不能用上，先po概念上来，我也很不赞成这种方式，因为玩票背弃了设计的意义 —— 解决问题。从一分钟画小人儿测试说起我曾经邀请同事在一分钟之内用尽可能丰富的语言画一个小人出来，后来，同事们都被自己画的小人逗乐了，画的实在太滑稽。我自己也做了这个测试，发现一分钟其实很长，画一个小人根本用不了那么多时间，后面的几十秒白白被浪费，最后的几秒我加了几条无意义的装饰线。同样在短时间内的涂鸦，Von Glischka 就画的丰富，想必他肯定会画满一分钟，因为有很多可以画的内容，那些基本形之外的线看起来并不乱，非常妥帖的为衬托造型而存在。为什么我们在一分钟内不能画出丰富的图画呢?因为平时积累的少，思考的少，练习的少，脑子里很空。再看几个问题：无法在无网络的环境下做设计，严重依赖 Dribbble很难集中注意力，进入平稳思考的状态面对很急的需求，往往做不到60分的设计热衷“搬运”，画图全靠找参考

详解设计师应该如何明确设计目标

独立项目中，交互设计师的工作可以分成四个核心环节：定义方向策略、确定解决方案、有理有据的进行设计输出、上线效果跟踪。本期要和大家分享的是：方向策略。方向策略阶段需要明确了解本次设计原因及产品目标，进而梳理出核心的方向及策略点。得出这个重要结论，需要向各方收集信息，包括老板、产品/运营、用户、设计等;通过对信息的去伪存真，归纳总结得到本次设计的原因、目标、方向、策略。每个点的提出都必须是有原因的，可基于策略、数据、反馈等。一 . 全面收集信息1.1 老板清晰战略层级方向老板指的是，此次产品设计的最终决策人。越往高层的老板，给到你的有效信息可能越不具体，比如跟你说“页面太冷清了”、“这个体验不行啊，去改改”等;像“目标是拉新”、“转化怎么这么低”这类说法都是比较明确的需求方向了。你需要做的是，挖掘出这些说法背后，老板真正想说的东西。懂得老板的“意思”将变得很重要，不然很容易走上“歧途”，无止境的迷失在改稿中。攻略：

详解设计作品中如何快速的拼接素材

详解设计师在平面设计中如何把握比例

记得在上大学时有一门书籍装帧的课，老师让我们在设计书的尺寸之前先去参考一些优秀的作品，于是大家的作业各种奇形怪状，大大小小的各种尺寸都有。老师看过之后很是生气，说我们抄也只能抄到皮毛，让我们都带着尺子去书店里把那些设计的不错的书仔仔细细的量一遍，得到精准的数据之后才发现，日本的书一般设计的不会太大不会太宽，特别称手，才明白了老师的良苦用心。用科学的眼光来看待设计，会发现另一片天地。日本设计师佐藤大说：设计不只是天马行空的创作，还需要缜密的逻辑和科学方法。今天我就分享一下如何运用理性科学的眼光——比例与尺寸，来学习优秀的艺术作品和设计作品艺术作品中的尺寸与比例当你看到这幅作品时，你注意到的是什么?耀眼的黄色长剑?矫健的白色马驹?还是整个激烈的混战氛围?有趣的是，这幅画最有名气的，竟然是这从马上跌落的士兵。这是文艺复兴时的伟大艺术家乌切洛创作的《圣罗马诺之战》油画，这画中士兵在当时引起了巨大的轰动，因为乌切洛利用通过改变比例，将「透视法」应用到作品当中。我们可以通过给作品加上辅助线，可以更好的了解艺术家是如何处理比例和尺寸的。

详细解析一个让设计师大开脑洞的好方法

当你看到一个优秀的设计作品时，是否会好奇创作者到底是如何想到这独特的创意的呢?又是怎么样运用视觉语言将其表现成这样一件优秀作品的呢?刚刚接触设计时，偶然也会有灵光一闪的好创意，但大部分时候还是苦思冥想而不得其法。故而放慢了脚步冷静思考，如何将这种运气的成分降到最低，不是偶然，而是每次都能快速捉住项目的核心需求，并给出出人意料的设计方案呢?我今天给大家推荐一个非常非常好的方法——视觉实验(Visual Experimentation)什么是视觉实验?视觉实验就是用视觉语言来实践，对某一主题不断深入的理解和挖掘，进而找到更多的视觉可能性来表达，是一个开脑洞的过程。好像听上去还是很懵逼，那下面我用案例来解释这个问题。怎么做视觉实验?以我硕士研究主题为例：怎么用视觉语言来表现无聊的概念?1. 当我决定做这个主题时，一开始是无从下手的，所以我先去看了别人是怎么定义这个话题的。例如，心理学家Carl E. Pickhardt 认为无聊是空白，是无目的，是无意义的。那么我们就可以尝试视觉化他定义的无聊。多尝试几个就会发现虚无缥缈的概念是可以具象化表达的。

帮助设计师发散思维和大开脑洞的实用方法

很多人说做设计前总是要靠查一些图片或者是看看别人的画，不然总是没有思路，这很正常，而且找图片找灵感这本身是个好方法，但是你找到这些图片之后怎么用才是对设计师能力的考究，这里准备介绍多两个可以帮助发散思维的具体方法：Visual Brain Dumping-视觉穷尽 和 Forced Connections-强势结合。1. Visual Brain Dumping – 视觉穷尽“穷尽”的意思就是将脑袋中跟项目相关的全部信息倒出来，而“视觉穷尽”自然就是倒出全部相关的视觉元素，不管对错。视觉穷尽从另外一个角度来说，可以理解为对传统头脑风暴的视觉化，但是传统头脑风暴大多数是在团队中进行，视觉穷尽可以是个人完成。设计师、艺术家Luba Lukova的作品是视觉穷尽的好例子，她的海报善用单独一个的图形来表达引人深思的主题，在她很多作品中，经常使用两个创意相融合在一起来创造一个新的视觉感受，这种概念的碰撞会创造出第三个更有力量的意义。她的作品经常伴随着人性和反讽的意味。△ Luba Lukova 的手稿Luba Lukova的创作流程从一个集中的视觉草稿开始。在确定了创作主题内涵和要表达的情感之后，她开始在本子上绘画出无数小草稿，在海报“The Taming of the Shrew”中，Lukova找出了许多给人惊喜的方法来描绘由来已久的主题-性别问题的斗争。她的原始创意中包括一个由两个脸和一个心被嵌在钳子上的bra，好几个手绘稿展示了一个穿着马缰绳的女人。而最后的图像是把创意压缩并更深入，形成一个女人装备着一个像男人的脸形状的口套。“The Taming of the Shrew”-Luba LukovadeLuba Lukovade 其他作品：