10分钟的时间快速说下卡片式设计

xiaokaisss

xiaokaisss

2016-02-16 23:35

下面是个10分钟的时间快速说下卡片式设计教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

1、某种程度上来说,卡片式设计是在栅格的基础上更进一步,将整个页面的内容切割为N多个区域,不仅能给人很好的视觉一致性,而且更易于设计上的迭代。这样的设计在处理PC和Mobile多平台页面一致性时有很好的效果,正面的典型例子就是Google+了。但如果你的网站和手机App在整体结构、交互方式上本来差别就非常大的话,使用卡片式设计就无法充分发挥其优势。

2、卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常见的就是图文混排,既要做到视觉上尽量一致,又要平衡文字和图片的强弱,这时卡片设计经常有奇效。2012年的豆瓣首页为了平衡日记、相册、图书、电影、活动等不同内容元的混合呈现所使用的设计,本质上也是一种卡片。

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

3、大多数时候,卡片式设计适合应用于流量分发的渠道型页面,比如这样的内容列表:http://hi.92wy.com/nds/

还适合应用于碎片化内容页,这时的内容消费就在内容渠道上完成,例如大家都熟悉的微博、pinterest

如果在内容的detail页使用卡片式设计,那么最好内容本身是可以切割为不同区域的,而不是几千字的长文,例如豌豆荚的应用详情页:http://www.wandoujia.com/apps/com.tencent.mm

4、强行套用卡片式设计导致比较糟糕的结果,比如百度贴吧的手机客户端(用户量无法掩盖设计上的槽点):

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

网页和App的差别很大,内容元展示页(帖子列表)对图文混排的依赖也不高(不是所有贴吧都适合图文混排的,比如各种文学吧),而帖子的内容往往又很长,在消费帖子内容时不仅对卡片无法感知,而且还在屏幕两端留了实线,增加了压迫感。

5、还有一个容易忽视的坑是,卡片式设计对页面空间的消耗非常大,并且将内容元和内容元之间强行割裂,导致一屏呈现的信息量很小。所以当用户的浏览是需要大范围扫视、接收大量相关性的信息然后再过滤筛选时,强行使用卡片式设计会让用户的使用效率降低,带来不必要的麻烦。

一个常见的例子是,最推崇卡片式设计的Google,在搜索结果页里也依然没有采用卡片:

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

当然Gmail等产品也没有,可以好好想想为什么。

归根结底,使用何种设计方式是由设计要解决什么问题、人们对信息的消费方式决定的,卡片式设计有它的适用范围,设计产品时切忌勉强套用

来源:产品经理修养 豆瓣

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

折叠

保持未读

收藏 (打标签)

推荐

发送给: 我的动态 其他网站

 

创意无限大:海外10家备受喜爱的Mini电商 【i天下网商注】如果你想做电商创业,但在不想踏入红海领域且又不希望做成一个文艺小清新风格的产品,这时

02013-12-11

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

发表:蒲坚

【i天下网商注】如果你想做电商创业,但在不想踏入红海领域且又不希望做成一个文艺小清新风格的产品,这时候你就需要考虑一下,是否能够找到细分市场的人群呢?在这个领域,国外可借鉴的案例挺多。

文/KaiShan

朋友们,本文想说的是:远离那些大型零售商,以及那些自视高人一等、专营礼品赠送的店铺。在那些店里购物,你绝对不会得到像开门大抢购和网络购物日的大优惠,而且你不用想也知道,他们的价格绝对高。

与此相比,人们肯定会更愿意在本地零售店购物,本文要提到的这些初创公司就属于这一类型。下文中提到的这些在线零售店可以提供独一无二的商品,同时,也能让一些中小企业社区变得日益繁荣。

LittleBits

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:那些想成为制造工人或工程师的人

价格范围:每个开源模具售价8美元,豪华初学者套装售价199美元

LittleBits电路积木非常有趣,他们由电路和LED灯组成。这款开源硬件玩具老少咸宜,对那些爱动手的人再合适不过了。此外,如果你想要成为一名DJ,LittleBits还专门推出了Synth游戏套件。

Best Made Co.

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群: 那些爱挑战、爱好野外活动的人群

价格范围:体验包价格为6美元,而特制斧子价格高达数百美元。但是你不需要斧子,不是吗?那就跟着笔者大声说:我不需要真的不需要斧子。

实际上,Best Made Co对于野外露营者,木屋房主、长途远足者、甚至矿工们来说是一个不错的选择,他们提供高质量的工具产品。他们的产品的使用寿命也非常长。

BirchBox

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:爱美女生

价格范围:每月10美元的样品试用包,全部规格产品价格从10美元到100美元不等。

BirchBox就为爱美的女生提供了一个订购试用各种大牌的服务,减少了买回来的化妆品又不喜欢的情况。他们提供的产品包括护肤液、各种配饰、甚至还有城市向导、唇膏、脱毛膏等等。

BarkBox

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:喜欢宠物的人

价格范围:每月29美元,或是每月19美元的半年套餐

喜欢宠物的人肯定会喜欢订购这样的服务,Barkbox会每月给宠物主人寄送盒子,盒子里面有狗粮、玩具、宠物饰品、和宠物健康产品等等。你还可以在Facebook上每月获得一次分享视频的机会。

Minted

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:那些经常需要给好友发送卡片,邀请他们参加晚宴聚会的人

价格范围: 有的低于50美元,有的则超过500美元,根据用户购买的产品不同而定

精美的卡片材质,出色的设计你还能不喜欢上Minted吗?这家卡片设计社区和电子商务网站拥有数千名各种类型的设计师。现代风格的、手工制作的、个性化照片定制的,应有尽有。

Etsy

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:所有人

价格范围:几美元到几千美元不等

Etsy是一家在线销售手工艺品的网站,用户在上面可以找到真正独一无二的手工制作的艺术品,绝对是送礼品的首选。Etsy上的卖家有的很质朴,有的则很有个性。产品范围从茶杯巾,到珠宝首饰,应有尽有。

American Giant

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:在路上的创业者

价格范围:有的衣服20美元一箱,有的运动衫一件就要卖到90美元

对你我而言,帽衫就是帽衫。但是对于那些创业者而言,帽衫是一种身份和文化的象征,就像是一件日常制服一样。American Giant是一家经营帽衫的在线服装销售网站,但是他们的帽衫款式更新,价格更贵、也更具艺术气质。

Good Eggs

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:喜欢在家做饭的美食家们

价格范围:从1美元的柿子,到150美元的火鸡

Good Eggs是一家有机食品供应商,他们从本地农民、厨师、以及其他美食家那里获得手工制作的美味饭菜。他们的价格非常合理,而且也十分方便,用户可以选择自取食物或是送货上门服务。此外,他们还为用户提供预订服务,如果你需要给人留下会做饭的好感,可以提前跟Good Eggs打声招呼。还有,如果你想送礼的话,Good Eggs还挺了新鲜蔬果,本地蜂蜜、美味芝士等等。

Sightglass

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:咖啡狂热爱好者

价格范围:每月19美元的咖啡订购,还有售价65美元的一台性能良好的咖啡机

每个旧金山人都是本地咖啡品牌的死忠。Sightglass是Twitter创始人杰克多西投资的一家咖啡店。如果你的父母远在密苏里州,又怀念旧金山咖啡的味道,那么Sightglass是个不错的选择。

Bourbon & Boots

10分钟的时间快速说下卡片式设计,PS教程,图老师教程网

适用人群:喜欢美国南部文化的

价格范围:有10美元的手工园艺礼品,也有售价1000美元的高质量修枝剪刀。

从洛杉矶到缅因州,每个朋友圈子里都会有一些来自美国南部地区的人,这家在线零售店的供应商范围很小,他们特别专注于一些来自美国南方地区的物品,甚至包括一些小批量的威士忌酒。

展开更多 50%)
分享

猜你喜欢

10分钟的时间快速说下卡片式设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
10分钟的时间快速说下卡片式设计

浅谈使用卡片式设计的优质网站分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈使用卡片式设计的优质网站分析

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

带你重新审视正在流行的卡片式设计趋势

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
带你重新审视正在流行的卡片式设计趋势

Photoshop制作卡片式镂空艺术字教程

PS PS基础
Photoshop制作卡片式镂空艺术字教程

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

每天10分钟

护肤方法
每天10分钟

iOS版Google Search卡片式通知功能更丰富

手机软件 应用软件
iOS版Google Search卡片式通知功能更丰富

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

20个配色非常暗的网页设计作品欣赏

20个配色非常暗的网页设计作品欣赏

精选国外配色超赞的UI套装PSD素材

精选国外配色超赞的UI套装PSD素材
下拉加载更多内容 ↓