商品列表设计
定义: 商品的聚合页，提供不同维度的商品选择。
特点: 信息量大，图片多。
设计的重点: 布局是否清晰合理，能不能起到引导用户决策购买的行为
目的: 用户在进入商品列表也是基本有一定的目的性前前提，使用要给用户呈现想要的信息， 解决如何帮助用户快速高效的做出购买决策
商品列表页常见的形式:
1: 行列排列是目前最普遍，相对有效的，界面看来规整
2: 瀑布流式的列表是不合理的，给人感觉信息混乱，用户找不到重点，不能很好的给用户传递商品内容与决策因素。
3: 特别款突出性列表是比较好的表现形式，能够在商品列表前做出特殊的引导，突出的推荐可以达到效果: 1，增加优质商品曝光或者支撑运营推广。2，帮助用户过滤信息，减少用户选择成本，帮助用户做决策提高商品转化率
具体设计:
一: 列表布局设计:
1: 列表前要有推荐模块: 1，增加优质商品曝光或者支撑运营推广。2，帮助用户过滤信息，减少用户选择成本，帮助用户做决策提高商品转化率
2:列表后要有精选，加长用户的流动线。浏览性用户在翻完整个商品列表都没找到喜欢的商品时，在页末推荐优质的精选商品再次挽留用户，提示用户转化率（同时这个板块在大平台是广告位，可以增加平台广告输入）
3: 左边栏会有广告为精选
二: 列表内商品的单个模块设计
1: Web端的鼠标在商品位置会有hover状态，给用户反馈。
2: 商品下方可加入关联相似，同款商品推荐信息，引导用户做决策
3: 限时限量的专题时在商品列表也就可自己购买或加入购物车，减少操作步骤
4: 增加可以收藏的功能，满足用户在逛的过程中预定对比的需求
5: 在体现商品三要素（图片、名称、价格）之外，增加用户决策因素（1: 多少人已购买/2:原价多少价格锚点/3:增值服务、包邮/特殊服务/ 4:商品独有的属性，真皮）
你说的这两个方法都是可以的，第一种比较好，第二种也是可以的
第二种可以使用js或jq的onlick点击事件路由跳转到一个编辑页面
如：$('button').click(function{
window.location.href='xxxxxx.html'
})
格式塔原理的基本原则
1. 接近原则
物体之间的相对距离会影响我们感知它们的关系。相互靠近的物体被认为比相互距离较远的物体更有关联性。
2. 相似原则
格式塔原理中的相似和接近两个原则一起运用在产品设计中。它指出了影响我们感知分组的另外一个原则：有共同视觉元素的物体看起来更有关联性。我们倾向于将看起来相似的对象视为一组或者一个模式，并且将它们与特定含义或者功能联系在一起。
3. 连续原则
我们的视觉倾向于感知连续的形式，而不是离散的碎片。并且能感知到整个物体的倾向。连续性通过构图来帮助我们感知事物的形状和运动方向。界面中的设计元素，会引导眼镜在平面中的移动，提高界面的可阅读性。创建顺序并且指导用户浏览不同的内容分组。
格式塔原理在设计方案中的应用
1. APP主页
你的APP主页是呈现给用户的第一印象，所以，一定要做到页面的合理布局，相关内容的排序等级以及导航模块的多元化设计。依据接近原则准和相似原则，设计师可以将APP主页进行模块划分，使主页的布局更加明晰化，达到用户友好的目的。
2. 列表页
一个APP中大多数页面都是列表页，用于区分同类信息，列表页布局往往有图文混排、纯文本、图片列表、宫格、卡片。列表页的设计方案目的是不仅让客户准确理解设计布局又能够恰当的引导用户进行操作。根据列表页的内容特点，我们可以根据连续性原则，在同一模块下使用统一的设计样式，这样依据视觉上的活动惯性引导，用户就能够在自己所感兴趣的垂直领域连续阅读，非常方便。
设计师在APP的页面方案设计中，除了要了解和尝试使用各种方法去提升设计之外，了解用户的需求也是必不可少的，从使用者的角度出发，你的设计交互性才会更加的适用。
//develop csai cn/web/images/ gif >
生成版面列表由一个类BoardList负责 该类只有一个数组类型的成员变量m_boards 在类的构造函数中通过SQL查询 从数据库中把所有的版面取出来放到数组m_boards中 数组的下标是版面的ID 对应的元素值是版面的名称
BoardList类的getBoard()函数用于取得对应某个ID的版面的名称 其实现很简单
BoardList类的另一个成员函数display()负责具体显示版面列表 注意 版面列表中的每一项都是一个超链接 指向default php 并且带有一个参数指定版面的ID
帖子列表页面(即讨论区主页面)的代码 如下所示
//develop csai cn/web/images/ gif >
可以看到 代码的头尾部分与测试页面的 test_header_footer php基本相同 在引用头部文件之前的才是主页面主要代码 首先引用了TreeNode php和 Board php文件 因为本页需要用到其中定义的TreeNode类和BoardList类 在引用了两个类文件之后 首先创建了BoardList 类的一个实例 如前所述 该类的构造函数中自动获取了所有的版面列表 调用该类的成员函数getBoard()即获得了当前版面的名称 然后 创建了 TreeNode类的一个实例 创建时传入其构造函数的大多数参数都为空且层次为 这是因为此时构造的是树的一个虚拟根节点 主要目的是让构造函数递归构造出整棵树
在准备好版面列表和帖子树的数据之后 后半部分就是显示它们所含数据的代码 主要操作就是调用两个类的实例的display()成员函数
在浏览器中运行default php之后 页面如图 所示
lishixinzhi/Article/program/PHP/201311/21360
