陌北默

7Plistpages_1

@小雨 列表,很普通和设计元素了,就是这简单又普通的列表却困恼了无数设计师。让设计师又爱又恨,怎么样才可以更好地展示它们呢?

7Plistpages_2

 

先来看看列表设计的形式吧,常用的列表设计的分类如下:

  • 普通常规列表
  • 图文列表
  • 标文列表
  • 瀑布式
  • 时间轴
  • 卡片式
  • 轮播
  • 泳道
  • 宫格

 

根据不同内容和需求选择不同的形式布局。

那怎么才能让我们的列表更加好看呢?难题?no~no~no~no~~~

7Plistpages_3

 

 

让7大原则帮你顺利解决这个问题吧!

1:空白空,关系疏密,分

空白空间的重要性是不言而喻的,字体元素之间的空间关系是很微妙,需要巧妙地处理。虽然列表没有像构成那样需要富有表现力,但是咱还是不能忽视它。紧凑的或者疏离宽松的,张力的或者安静的…好的留白是一种升华。

7Plistpages_4

 

2齐齐齐齐齐齐…….

左对齐,右对齐,居中对齐,两边对齐,根据元素来选择文字对齐方式。边距、间距统一对齐。无规矩不成方圆嘛~~只有在规整的情况下,才能更加精细,经得起推敲。

7Plistpages_5

 

3:你粗我,大小不均,长短不一

对比在字体上的运用,很重要哦。巨大的字号让信息更加醒目,大小的元素组合更有节奏。

7Plistpages_6

 

4:色,色,色,就是

明亮的色彩让言语更“响亮”,你想表达什么,你想突出什么,色彩精彩让人印象更深刻。

7Plistpages_7

 

5层层叠叠,不迷糊

一些列表的设计是需要层次的,区分并突出层次关系,让内容更加分明。

7Plistpages_8

 

6:虚虚实实,在前

若隐若现让主体更实更近,卡片以及按钮的虚虚阴影,让他们突出,与其他的元素形成空间感,浮于上层;加上动效,体验感更佳。

7Plistpages_9

 

原则7:美图相配,更神气

美图相配,想不好都难。 除了设计细节的精美外,图片也需要赏心悦目的,高大上的感觉不能配个俗不可耐的图吧,适合的图,很重要,可以说是点睛之笔了。往往首先吸引人的就是美美的图。

7Plistpages_10

 

总结

简单的列表也可以美美的,设计需要尝试各种的形式来表现。请不惜一遍遍的推翻自己的设计,破而立!成功就在眼前!

通关不是那么容易的,开窍也不是一点就通,大家自己觉悟吧~~~

(文章配图来自网络,拿来主义了,各位大大见谅)

7Plistpages_11

转载请注明:学UI网—UI设计师学习教程平台 » 7大原则让列表页面更好看

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
作为交互设计师的经验感悟作为交互设计师的经验感悟
?