【解构ui】列表视图&网格视图
上次讲到了浏览控件里的卡片设计，同时也提到了网格视图。 今天就来具体的看一下移动端的网格视图（Grid view)以及列表视图(List view)的排版。
浏览控件
绝大多数的移动应用都是针对浏览需求的。我们在移动端进行着大量的阅读，浏览，观看，查看等动作。
受制于外形大小和输入手段，在移动设备上浏览和选择内容，比直接输入内容要方便的多。
列表视图(List view)
列表排列是多行垂直展示，是一个单个的连续性的元素，通常以文字为主，配有较小的图片或icon.列表视图需要较少的垂直空间。这可以让更多的内容在同一屏上展现。
列表内容的常见形式有：一行一行的项目，一段一段的文本，一排一排的控件（比如复选框，按钮）及其图标，图片或视频的缩略图。
列表的长度可以是有限的，也可以是无限的，也就是可以无限滚动（infinite scrolling).无线滚动用于列出大量的数据（比如搜索结果），用户每次滚动到列表低端，列表就会继续列出更多。
Content Scanning内容扫视
用户在阅读列表视图的顺序通常是F形的扫视顺序：
列表最适合于展示同质性的数据类型，这有利于阅读理解。
列表视图可以在一屏里面放下更多的东西，而不需要用户不断的下拉去获取， 同时在列表视图里面放上thumbnail的视图也能让你在同一屏幕上有更多的选择放置内容，如下图：
但是需要注意的是在使用list的时候，用户的注意力会自上而下的减弱。
用户在做决定的时候很大程度上是依赖于他们读到的文字。
优缺点：
相比较于grid view， list有如下好处：
- List view following advantages.
- 阻止了过多的下拉, 在可视区域可提供许多选项。
缺点：
- 视觉上太平淡
- 用户的注意力从上到下递减。
网格视图（Grid View）
网格视图将诸如应用的图标，缩略图，功能图标等内容组织成规则的行列形式，包含了重复的pattern竖直或者横向的排布。最明显的就是iPhone的主画面
网格视图通常被用来展示媒体内容，例如照片，视频，音乐专辑封面，或是包含了图像，文本，链接元素的小尺寸封装卡（encapsulated card)。在使用网格来展示内容的时候， 我们要确保用户知道如何导航，iPhone的主画面用水平滑动在不同的网格”页面“导航。有时，也可以无限的，垂直的滚动浏览方式来显示更多的网格对象（比如iPhone的照片网格）。
Grid veiw提供给用户更多没有间断性的扫视。使得其更加适合于呈现视觉内容。通常来说图片占据了每个位置的最多空间。
用户的注意力在每个网格上分部更加均匀。网格视图比较适合视觉理解，以及区分相似的数据类型。
用户通常主要依赖于图片来做出他们的选择，一个重要的时刻是用户在同一时间只能看到4-6个网格内容.
Grid view有以下的有点
• 更加吸引眼球
• 帮助用户区别事项之间的区别
• 用户注意力被分散的更加均匀。
但是也有一个大的缺点，用grid view会导致页面更长，让用户需要不断
网格视图vs.列表视图
在选择的时候最关键的决定因素就是用户需要多少的信息来做出选择，你应该选择最适合你内容的展现方式
Details in Lists , Pics in Grids.
就拿展示机械产品来说，用户在选择的时候，产品型号价格是很重要的细节，因此list view 比较合适。
Grid view比较适合那些不需要太多产品信息的产品，或者类似的产品，用户通常只能看到产品的名字和价格。 比如衣服，不需要太多文字描述，因为用户更加看重外表的区别，而且更加愿意往下拉而不是不断的在不同的页面对比。
当设计这些布局的时候，选择正确的图片大小，确保他们能被认出，并且能在一个页面上装下尽可能多的产品同时。
下图是电商网站的视觉分析图，蓝色部分是用户看的最多的地方。
可以看出;最重要的要放在最上面。
实际上，用户更会关注有人物的图片，而不是只有产品的图片。
用户很大程度上会依赖图片去做选择。网格视图对于相似产品之间的比较非常合适。
如果用户买鞋子的时候他有一个特定的类型想要买，用户可以更加方便的找到他想要的东西
实例
网易考拉（左）&ShopBop（右）
网易考拉海外购的搜索鞋子后的搜索界面，同Shopbop的展示界面都采用了网格视图，由于衣物鞋子等商品主要的关注点在外观，因此采用较大的网格视图，方便用户扫视。
在这是还发现了网易考拉的一个小细节，通常这种网格视图采用的都是无尽下拉模式，用户永远不知道底在哪，而网易很在页面低端加上了一个分页说明，告知用户一共有212页的搜索界面，当前在第一页，一页有四个产品的话，那基本也就是说一共有848个产品。给人一种心理有底的安心感，是一个很好的反馈（feedback),而当用户停在某个页面的时候，这个分页说明就会自动淡出,不去遮挡更多的空间。
在说一个Shopbop（右图）一个让我哭笑不得的细节， 大家看左上角的这个人腿，看上去有点突兀，和其他的商品展示风格不同，其实本来搜索出来第一个图片也是单个的鞋子，但是当我左右滑动这张图片的时候，出现了更多这个鞋子的图片， 用了这么久的ShopBop我还是第一次发现移动端的这个功能。这显然是一个缺少意符（Signifiers）的例子，从而使得更多此商品展示图片隐藏的够深。
一号店
一号店的搜索展示界面有着很明显的区分，如果是电子产品的话，其外国相差其实并不大，特别是统一品牌的手机。。。小米这个简直是在找茬，因此采用列表方式能防癌更多的文本，以及其他的说明内容和产品，便于用户来回比较。
而最右边的服装页面则采用了网格视图，凸显出图片，展示区别。
而网易考拉(左一）不管是电子产品还是衣服，都采用了统一的网格展示方式，比较起来有点累人。
淘宝
淘宝在主页面下拉的时候会呈现一系列用户可能感兴趣的产品，这些商品不管是哪个种类的，基本都采用了类似卡片形式的网格视图，将图片，说明，价格和付款人等信息包裹在一起。
而右图是搜索Bobbi Brown粉底液后的搜索展示界面，采用了列表展示方式，粉底液基本上都长得大同小异，采用列表的方式展示较为容易比较。同一号店一样，淘宝的搜索结果也基本是衣服类的都是以网格视图展示，其他基本都是以列表方式展示。
参考文章
Mobile design list view and grid view
Mobile app UX design grid view for products
交互设计精髓4-为移动设备和其他设备而设计 p424-P428
