集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

2018年设计的三大流派都是哪些?成都ui设计培训班老师来给你讲解

发布者: 成都达内     浏览次数:     发布时间:2018-11-21 09:17:21

今天给大家讲讲一种设计样式:图片流、卡片流和feed流...

  今天给达内成都ui设计培训小编讲讲一种设计样式:图片流、卡片流和feed流

  相信你们或多或少都听过。但是它是如何应用的,它们各自的功能目的又是什么呢?下面我将对每一种流进行它的作用、设计要点、案例分析的方式进行介绍。流是呈现的形式,流本身自然地形事件的时间线。

  1.图片流

  a.作用

  快速对图片内容进行浏览和筛选。图片流满足了用户对图片进行快速浏览筛选的需求。

  b.设计要点

  通过版块分割的背景和分割线来区分;图片高度不固定;不需要加入标签,即使有图标也是弱化。(因为会干扰用户对图片的筛选)

  c.案例

成都ui设计师培训

  从截图中可以看出,不管是左边花瓣,还是右边Pinterest,它们都是图片流的形式。

  同时也满足前面所讲的,图片是主要信息,一下子抓住视觉,让用户不停的往下浏览和筛选喜欢的或者感兴趣的。

  所以图中的图标和一些其他辅助东西也都是弱化,尽量不干扰图片。

  2.卡片流

  a.作用

  卡片是用户了解更多信息细节的入口。把信息以固定的的排版布局模式展示出来。

  b.设计要点

  卡片高度固定统一,组成部分(如头像、标题、内容区域、按钮等)也固定统一;

  我们并不希望用户在这部分快往下拉,我们希望用户快速看到我们卡片中提取出来的文字信息和买点(常见于金融理财类)让用户快速找到需要的内容。

  c.案例

  微信的服务通知、支付宝的服务提醒都是卡片流的形式。

  一般是服务通知或者金融理财的项目等会采用这种样式,意在通过文字信息向用户展示入口。

  设计任何UI样式都是以结果为导向,向用户展示最关注的。

  同样分析一个产品或者功能模块,也是通过它的细节组成,功能目的来分析。

  这里还有一种卡片流的样式,那就是卡包里面的卡:

  这种类型就更加直观了,将其设计成现实中卡片的形状,所谓设计源于生活。

  3.feed流

  什么是feed,翻译过来就是侍养、喂养的意思。那在我们UI样式中的意思就是通过不断的供给信息,来喂养用户,就像用户是产品养的宠物一样。最典型的就是现在很火的抖音,相信玩过抖音的都被它这种特殊的feed流“养”的不肯退出,时间一下子刷刷就过去了。那今天我们不讲抖音,讲讲常规的feed流。

  a.作用

  快速对页面中的资讯进行浏览筛选。

  b.设计要点

  图片一般的尺寸:

  9:6 ( feed流 ) 9:8 ( 商家列表流 ) 1:1 ( 头像 ) 16:9( 全屏大图、视频预览图 )

  间距问题的把控:当三连图,图间距10px。

  图文间距10px+6px(一个层级),每提升一个层级增加6px。

  辅助按钮:左右视觉平衡,天平原理。又因为这只是辅助功能按钮,所以要尽量弱化。

  c.案例

  左图今日头条的feed流中,三连图之间的间隔,红色区域为10px。因为标题和图片又区分一个层级,所以蓝色部分为红色部分的10px再加上一个层级间隔6px,因此蓝色部分为16px。

  底下有个“青云计划”,如果没有右边的关闭按钮,视觉就向左倾斜了,特别是在没有辅助文字的时候,这样视觉就不平衡,因此加上右边的关闭按钮使得左右平衡,又很有节奏感的展现在用户面前。

  像微信的看一看、朋友圈、微博都属于Feed流的形式。

  像图片流和feed流我们希望用户更多的往下看信息,不知道大家有没有注意过,在这种类型的样式中,我们时常看到有时候附带了广告,或者APP下载。更有甚者,广告的内容很吸引用户,就像里面的常规资讯新闻一样。

  这样就达到了产品的商业目的,毕竟做任何产品,最终目的还是要盈利的嘛。

  总结

  1.图片流的作用是凸显图片信息,满足用户对图片进行快速浏览筛选的需求。

  2.卡片流的作用是提炼文字信息,让用户快速找到需要的信息入口。

  3.feed流的作用是帮助用户对页面中的资讯进行浏览筛选。

  希望这篇文章对你有所帮助。

  版权声明:文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与达内成都ui培训机构网站联系删除或授权事宜。

(责任编辑:徐老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56