这一次主要讲PS中图层样式的一些使用技巧。

你喜欢或者不喜欢，教程就在这里，不弃不离……

组件是设计师常用且基础的知识点，随着软件设计和开发越来越成熟，已经延伸出很多的类型，能否正确合理的使用也是衡量交互设计水平的一个标准。文章里理论知识比较少，我想说点比较实用的东西，给大家解惑。所以关于基本的控件/组件类型的基础知识不做过多说明，理论和实践相辅相成，理论知识大家可以去优秀平台学习并吸收，但实践需要带入更多的思考。

分清控件和组件

控件可以理解为平台系统定义的某种形式，严格意义上来说，控件的专业叫法为“原生控件”，不过大家都习惯性的顺口说“控件”，这样会更简单点。

组件从字面理解就是组装而成，在技术层面，代码是需要封装的，那被封装在一起，就可以形成组件，能自定义内容，名称等。

原生控件相比较组件，颗粒感更细，一个组件可以包含多个控件，单个控件也可以作为组件。可以使用一个简单的例子来阐述他们的关系，控件就好比是药材，那么药方就可以理解成是一个组件。如果还不能理解，那可以用更具体的案例来说明下；

如下图是用户登陆流程中的一个交互组件，该组件由两种原生控件来组成，输入框和按钮，这样结合就构成“账号输入”的组件；

再如下图，单独的输入框控件也可以成为一个独立的“账号输入”组件；

以上两个例子，说明了组件可以由单一或多个的控件类型进行组成，如何去定义组件的构成，其实还需要结合具体的设计需求，上面第一个组件给账号修改增加一个按钮的控件，让用户可以通过按钮清除所有的字段，让用户直接重新输入，通过手动和按钮操作的两种方式去进行账号修改，第二个组件仅支持手动键入进行修改。通过增加了清除的交互方式，组件的构成就会有不一样的设计方式。

再深入聊下组件

各平台基本都有自己独立的设计体系，有自己定义的组件和组件库，学习组件要了解它分为基础组件和业务/高级组件两种类型。基础组件是一种底层组件，例如输入框、按钮、单选框；其特点是比较独立单一，通用性很强，适应各种业务场景；业务组件是一个基础组件集合而成的大组件，也可以叫高级组件，是复合型的区块组件，主要是针对解决业务问题；如下截图是flomo笔记用用的网页版本，以它的首页为例；页面按照左右结构类型区分，可以定义为两个大的业务组件，由浅入深，可以再细分，得到再定义更多的业务组件，这里，我以“发布笔记”的组件具体说明下，它是怎么组成来解决业务问题的；首先我们拆解下组成部分：文本内容，工具按钮（添加标签和图片、文本编辑、快速引用等三种类型），发布按钮。用户发布笔记的行为主要为文字输入-内容编辑-发布完成；结合用户行为和组件设计，解决了用户输入文本内容，给笔记归纳，增加图片，修改文本样式，快速引用，最终进行发布的问题。产品在迭代过程中，我们会发现更多的需求，业务组件就要通过再优化帮用户解决实际问题。

学做组件管理

结合自己的学习和设计经验，我把组件相关的内容和知识整理定义为组件管理，包括组件的样式定义，组件和组件库设计，搭建，沉淀优化应该都算是它的组成部分。组件和组件库作用，和基本概念我就不做过多描述了，毕竟市面上关于这些内容已经有很多了，我想从小的点去做深度思考，讲点有用的东西，呈现给大家；组件和组件库首先一定是遵循和围绕着设计的原则、理念、目标去构思，如苹果的《人机交互指南》里面提到的系统设计三大主旨（清晰、遵从、层次）和六大原则（完整性、一致性、直接性，反馈感、隐喻性、控制感），安卓系统《材料设计1，2》中提到的三大原则（材料就是隐喻、大胆，生动，有意、运动提供意义）。还有国内b端最权威的蚂蚁设计体系Ant design，从设计价值观延伸设计原则，从而思考设计模式。

这里可以总结，平台在创造设计标准时，思考的方向都会不一样，所以系统遵循什么，没有统一的模式，况且这些名词本身就很抽象，这需要设计师们去思考应该把平台系统设计成什么样。这确实很依赖和考验设计师各方面的综合能力。所以组件设计和搭建，它并不是某一个人的事，而是整个团队的任务。

组件和组件库的设计和搭建过程中，需要了解系统平台，是苹果端还是安卓，web端，不同的系统设计的差异性很大，对应系统的控件类型我们也要很熟练的掌握。例如安卓一直保留的原生的底部导航栏的操作控件（返回、主页、菜单），反观苹果最早出现在底部的HOME键，随着硬件设计的升级，物理按钮的作用已经完全被交互手势操作替代，根据设计准则，可以先设计出确定的初版组件样式，然后设计师们要熟悉项目业务，深挖每个功能中的不同业务场景，并设计出对应的业务组件；这样设计师最终对于当前组件进行整合分类，做出版本的组件库；组件和组件库是设计和开发相结合的，设计师呈现页面上的模块是直观的，但都是技术人员进行底层代码拼接的再封装而成的，有规模的公司一般都会做成开源的组件库。去提升项目人员之间的协作效率，复用率高，节省成本。如下图是Ant design里面的部分按钮组件的样式和代码演示，作为国内独一档的免费学习的设计体系网站。如果大家能够从头到尾研究一遍，相信对你构建组件和组件库有十分大的帮助。

最后组件和组件库的优化迭代是贯穿整个产品设计的生命周期的，从搜集组件需求、思考组件优化、设计组件优化方案、验收更新组件和组件库；

搜集组件需求

项目角度：设计师开发过程中遗漏的、新的业务场景中发现的组件问题，设计和开发者评审讨论出来的包括影响协作效率的，不合理的问题；用户体验：产品中的用户反馈的功能体验不好，使用时体验差的模块；外部借鉴：团队人员从优秀的组建案例中发现的可借鉴的需求；

思考组件优化

思考方向1：设计师可以查阅资料，研究优秀的组件平台，从成熟的产品中查看同类的组件设计案例；或者和开发者、设计师进行深度交流，得到有用的建议；

思考方向2：结合业务场景，最好能够将应用场景穷举梳理出来，具体到某个的功能，考虑该功能里存在的每一个场景中，组件需要有什么样的状态和变化；

设计组件优化方案

设计师根据以上步骤完成组件优化的分析之后，可以相对应的设计组件优化方案，组织开发人员一起多次的评审，大家一起去讨论完善，最终技术人员再进行组件代码的开发和封装；组件设计优化，设计师要注意在既定的设计原则下合理优化，要保留分析材料和思考过程，进行有理有据的评审论证；

验收更新组件和组件库

当开发人员将组件样式通过代码落地之后，优化中的组件方案需要带入到实际功能场景中进行测试检查，验证组建优化的是否符合预期，在优化过程中，可以用一张《组建优化表》进行记录，可以方便项目人员追踪和查看。

组件设计的应用和思考

组件的设计本质上也是为了解决某种特定场景的问题。例如提示弹窗，为了让用户在操作过程中有反馈提示，提示中又可以通过解决某种场景问题，选择让用户进行操作或者不操作，所以平台设计出这种弹窗组件，即模态和非模态弹窗类型。下面通过两个例子，结合功能和场景具体分析产品应该如何做组件设计；

案例1:支付宝“商家转账功能”组件设计

我们去商店购买东西使用支付宝支付的过程中，可以通过扫描商家二维码，进行转账交易，转账支付的流程主要包括输入数额，选择支付方式，确认支付；因为每个流程中的组件都十分复杂，我们仅拿其中一个流程，对用户操作过程中涉及的组件进行拆解说明；输入金额和添加备注流程：页面的组件主要是用户信息文本，输入框、备注组件、键盘控件，弹框组件；这个流程包括2个行为事件，4个大的业务场景；

行为事件一：用户在商店通过扫码商家二维码，分别两次给商家转账20000和100000元的金额，

业务场景1：用户没有输入任何金额

业务场景2：用户转账输入的金额没有超过限制

业务场景3：用户转账输入的金额超过最大限制

业务场景123主要应用金额输入框组件，输入框组件根据用户操作行为，会有不一样的设计，用户没有任何操作，输入框内有默认文案提示“输入付款金额”，用户输入金额后，计算单位超过‘百’，数字金额上方会有单位提示，同时显示删除按钮，支持删除，重新输入，业务场景2中根据金额输入范围定义了产品业务规则，再细分出三种场景，不同范围内的金额，可以对应的组件设计方案解决确认转账确认问题；

（1）当输入金额范围在1-50000，进入新页面，通过点击按钮组件，进行转账确认

（2）当输入金额范围在50000-99999，在当前页面使用模态弹框组件，进行转账确认
（3）当输入金额范围在100000-999999，进入新页面，重新输入框内输入转账金额，进行确认，若两次金额不一致，出现弹窗提示用户操作。

当输入的金额超过限制后，弹框组件配合进行超限的toast提示。

通过拆解行为事件1，我们细分出了3个业务场景，通过运用输入框、键盘、和toast弹窗，它们相互关联解决了输入金额产生的各种问题；

无金额输入时，输入框能给予用户提示，这是比较常见的输入框组件设计，预置提示文本；

输入金额未超出限制，输入框中会带入计量单位，这就是组件设计的细微之处，转账金额是一个关联自己财产的行为操作，应当是需要谨慎的，所以计量单位也是在用户输入过程中出现，给用户一个提示，没有任何打断操作的意思，出现的时机很适合，再加上输入的文本数字已经足够醒目，能够提示用户输入有足够的准确度，如果没有加入这个字段，确实也不影响用户操作，但这种双重衡量的方式，潜意识里会让自己输入的更放心，不怕自己有误差；这就是组件设计给用户带来的惊喜感。

金额超出限制后，通过组件toast提示“付款金额超限”，第一提示框组件很好的限制键盘的数字输入，避免用户无效输入，第二toast提示框的触发时机设计，这里的方案是当输入金额超百万，按数字键盘的时候就会给予提示，而不是等用户输入完之后，再去按确认键的时候，弹出来提示金额超限。

行为事件二：用户点击备注按钮，添加转账信息。

业务场景4：确认完成输入金额后，给商户添加备注信息，20个字以内；

输入转账金额后，文字键盘上方出现备注按钮，点击弹出备注信息弹窗，在弹窗的输入框中写备注信息，其实添加备注，可以在页面中使用文本框，可为何去使用弹窗中增加输入框，确认之后再展示到页面中呢？输入金额和添加备注的行为的优先级来看，备注信息应该是比较低的，信息的展示的重要性也比较低。首先如果使用文本框，和输入框的组件层级在同一级，用户的关注点会被干扰，所以使用不突出的文字按钮组件进行区别，另外备注文字按钮出现的触发条件也是因为有输入金额这个动作，所以备注的信息展示在产品设计中就是很弱。另外在弹窗输入框中也提示了备注信息20个字以内，有这样的信息规则，弹窗组件比文本框更适合短文本的信息录入，这样和金额输入框组件能够被区分。

转账是涉及财产安全的业务，所以组件的设计除了解决不同场景下用户体验问题（及时反馈、合理提示、增加惊喜、操作方便），还要处理核心的业务问题（保证用户的财产问题）

案例2:“高清晰度体验引导用户付费功能”的组件设计

最近在做智慧电视项目时，产品经理提出在播放器页面，做一个“非会员用户可以体验视频高清晰度“的需求，主要目的是为了引导用户体验高清晰，提升用户的会员充值率。这里就通过解析如何通过组件设计解决这个问题；

首先我们结合业务规则有以下两点

（1）：该视频内容资源是付费试看还是免费

（2）：高清晰度体验时间，单次内容高清晰度体验时间，累计高清晰度体验总时间

考虑到用户在全屏播放器，需要尽量少的对用户观影降低干扰，所以在设计时，利用提示框的组件，针对不同场景状态，对组件进行设计优化。

用户观看付费影片，因为试看提示，通过操作按钮键，所以高清晰度体验的提示，通过提示文案来引导，避免按键操作冲突，组件设计如下图；

在体验过程中，播放器单次高清晰度体验时间会有状态变化，即正在体验-将要结束-已结束，组件设计如下图：

累计体验总时间结束后，再次进入到播放器，组件设计变为提示用户该片有高清晰度，组件设计如下图：

用户观看免费影片，因为片源免费，没有其他场景下的按键冲突，所以高清晰度体验的提示，通过提示“文案+按钮”来引导，组件设计如下图；

体验过程中，播放器单次高清晰度体验时间也有状态变化，即正在体验-已结束，组件设计如下图：

累计体验总时间结束后，再次进入到播放器，组件设计变为提示用户该片有高清晰度，并可以点击操作，组件设计如下图：

在提示组件设计整个过程中，考虑了用户会员身份、视频资源付费类型、高清晰度体验时间等等因素，要持续保持用户能够触达会员充值的页面，所以在不同的情况下，始终保留遥控器按键可以操作，引导他们付费，虽然频繁的提示可能让用户反感，但最终功能上线后，也确实拿到了一定的成果，提示组件设计让用户付费充值率有很大的提升。

总结

组件设计的解析到这里就告一段落了。带大家回顾下文章的内容，主要有四点，第一点通过例子解释了控件和组件的区别，第二点介绍了基础和业务组件，第三点讲解了如何进行组件管理的内容，第四点通过两个具体的案例讲解了组件设计在实际产品中的应用和我的一些思考；总结以上几点，组件设计一定不能脱离用户场景和产品业务。在这个基准下思考组件设计才会有最优解。

现在人们渐渐用智能手机代替PC，连购物也是如此。正当越来越多的人由电脑桌面向移动网页转移，购买产品和服务，网站创建者可以使用已存的设计模式来开启移动电子商务计划。

拥有良好的电子商务经验非常重要。实际上，近期的研究发现，如果能用手机登陆购物网站且过程体验良好，多于67%的人都愿意下单。

使用设计模式的优点在于，你可以看到其他设计师是如何解决类似的问题，这样你就不用走弯路。还能使你了解到人们在其他网站使用类似功能时的需求，并以此为参考来设计网站；并鼓励你思考自己一个人做设计时不会想到的设计方法。

本文中，我们专注于智能手机，而不是图表。我们将介绍一些用于移动电子商务功能的设计模式和方法，如下：

·主页  

·导航  

·搜索建议

·搜索结果

·搜索过滤和分类

·产品页

·图片库

·购物车

·账户或游客登录

·表格

本文中所有例子都来源于移动网页，在智能手机浏览器中运行。大多数属于大型百货零售商，因为他们有庞大的产品目录，这就需要考虑周全的设计方式，以突出搜索，并将搜索结果进行过滤和分类。本文还有许多基于电子商务的原生app，许多模式都能很好的运用其上。

主页

在移动设备上访问网页，主页内容通常较少，更多是帮助用户找到所需的内容。常见的模式就是一栏促销，一栏链接列表或产品目录，很简单。关键词搜索一般都有，还有店铺的链接，订阅促销邮件及忠诚度计划的登记表。

亚马逊和梅西都使用促销商品和列表目录混排的方式。

塔吉特的促销内容比简单列表占据屏幕更大的空间，极具视觉冲击力。

Threadless使用仪表盘模式，比起移动电子商务网页，在原生应用中较为常见。

如果购物者来你的网站是为了快速比较价格，那么他们更需要的便是简单的列表样式和搜索功能。如果他们是来关注促销和打折的，那么塔吉特的设计模式就更合适。因此，你需要分析消费者来你的网站的目的，以此决定合适的设计模式。

导航

除了使用主页作为主要的导航中心，许多网站也在多数页面上设置了导航目录，通常是作为页头。这让消费者能轻松在页面间跳转，而无需回到主页。

lowe的导航目录中，每个选项都有图标。best buy的目录则使用了两栏的排版，并且用按钮替代列表。Lowe的目录出现时会覆盖整个页面，而Best Buy的目录出现时会向下推挤屏幕上的其他内容。

Macy的导航目录包含下级选项。CVS则具有双栏目录，每个选项也有图标。它们的目录都在页面顶端展示。

看了上面的屏幕截图，设计网页导航的方式多种多样。Lowe的设计很简洁，而且图标带来了一些视觉上的亮点。而导航以外的其余内容都隐入背景，这使用户在选择导航内容时，更集中于当前目标。CVS的版式相对杂乱，两栏的选项，每个项目都搭配了图标。CVS的目录上有许多可以点击的bar，相互之间很接近，这在触摸屏上可能导致可用性问题。

有趣的是，大型电子商务网站通常不会一次显示许多导航选项。它们尝试在导航的视觉设计和网页信息构架之间寻求平衡，仔细考虑应存在于全站导航上的项目的数量。通过网站分析来确定消费者会点击哪个目录选项，可以帮助你决定目录上的内容。可对不同的设计进行A/B测试和可用性测试，看看哪种设计选项太多太杂，最佳方案应使人们不但找到建议内容，也能找到需要的内容。——为了商业需求，也为了用户需求。

搜索建议

搜索建议，也叫输入提示或自动填写，当消费者键入前几个字幕的时候就显示出可能的输入结果。在常用搜索中，这对消费者来说真的很方便，特别是当输入内容很长的时候。而搜索建议的一个局限就是：在虚拟键盘上很容易输错字，这会改变建议的结果。而显示常见“正确”的结果可能更有用。而且，考虑使用改进的自动建议模式来减少输入内容，在最有效率的前提下使用更慢的移动带宽。

在Office Depot网站的搜索框中输入“draf”时，会自动提示数个可能的结果。如果错打成“drag”，就会显示出一些和搜索内容无关的结果。在虚拟键盘上输错字母是很常见的问题。

人们在输入时的错误，设计师也无可奈何。不过他们可以用其他方式使消费者找到产品页，例如，产品类别或顶层类别的目录可以向下延展出列表。网站管理者也可以优化搜索引擎的功能，如当用户输入“dragt”时，再建议“draft”的结果。你使用的搜索引擎技术将决定你解决问题的方式。

搜索结果

在移动电子商务网站上的搜索结果主要使用两种样式：表格展示和网格展示。表格展示会显示一张产品缩略图和一些密集排列的基本信息如产品名称、价格。网格展示则会显示较大的图片而使用更少的描述信息。一些网站允许消费者在两种展示方式之间切换。

zappos以网格显示搜索结果，这使它可以使用更大的产品图片，使消费者买鞋的时候偏于以感性作出选择。Walgreens使用包含按钮的表格，按钮的功能一个是在店中找到商品，另一个是将商品加入购物车。

OfficeMax让消费者在海量的搜索项目中——如输入“纸”搜索——选择子类别。一旦选择了子类，搜索结果将以表格展示出来。如果搜索“剪刀”，搜索结果的子类别会较少，这让消费者能直接在表格中看到结果。

如果产品的分级杂乱不清，此时让消费者选择子类别可能会导致一些问题。如上面在OfficeMax的例子中，某人想买8.5x11英寸的家用打印纸，他可能不知道该在“复印纸&多用纸”还是该在“激光纸”的目录下找。一种比较好的解决方式就是在搜索过滤器下边列出子目录，可以与其它过滤方式并列呈现，如“颜色”和“尺寸”。每隔一段时间（4-6周）就对具有代表性的用户、常见搜索项目和热销产品进行测试，这可有助于你洞察哪种解决方式更佳。A/B测试也可以揭示出哪一种方式能让更多用户到达产品页并具有更高的支付率。

Gap的默认搜索结果以表格展示，同时提供网格展示方式的选择。注意，Gap也在关键词区域保持搜索项目。

Gap的用户可以选择搜索商品的展示方式，这让它们可以随时在易于浏览的形式和具有大图的形式之间转换。但其实Gap可以在网格展示方式中保留一些商品信息——如价格（像Zappo所做的那样）

一些诸如价格和颜色的细节让用户更容易决定想要了解哪个商品的更多信息。

在关键词区域保持搜索文字也可以提醒用户他们正在搜索的内容，让他们更容易通过添加一些限制词（如“红色”）来细化搜索结果。

在Gap中搜索“男式tshirts（正确写法为t-shirts）”，你会来到无搜索结果页面（本文未截图），而且也不提供“男式 t-shirts”的搜索链接。Gap可以在搜索结果页面添加“你是否要搜索-某物品”的搜索建议来提升其用户体验。Google就会列出“mens t shirts”的搜索建议，如果用户忽略，它就会直接呈现出“men’s t-shirts”的搜索结果。

结果分类

将搜索结果分类可以帮助购买用户以一种有规律的方式组织起海量的搜索结果，通常会按照价格和消费者评分排列。常见的分类界面样式是按钮和<选择>菜单。

Walmart让用户点击三个按钮之一来将结果分类。Sears使用了类似的方式，但有一个“分段控制”，Javas cript框架如jQuery移动开发正在使这些类似app的界面小部件对设计师来说更易用。

J.C. Penney可以通过有点自定义样式的<选择>菜单来分类结果，Eddie Bauer则使用了浏览器的默认<选择>菜单。两者都通过浏览器的本地控制来触发<选择>菜单（本例中为iphone选择器）

Walmart的按钮之间空间较大，点击起来不易出错，但同时也因此无法容纳更多选项，而Sears有四个按钮，包含一个“全部”的按钮，这使得用户在分类筛选后没有找到所需商品时可以回到初始页面。用<选择>菜单是一种很安全的选择，因为现代移动浏览器都支持这种方式，这使应用可以列出更长的分类选项。但是，也占用了许多有用空间。这些都是可用常规测试方法来评估的折中设计类型。

结果过滤

过滤器让用户可以缩小搜索范围，一般基于诸如颜色，品牌和尺寸等属性。过滤器通常要划分类型（称为分面），每个分面下会显示数个值（比如，颜色就是一种分面，红色是一种分面值）常见的展示过滤选项的界面样式是<选择>菜单，下拉式菜单和可折叠菜单。现在在技术上使单个搜索包含数个分面值是可以实现的，但也因此带来更高的交互成本，并导致无搜索结果（比如，低于75美元的交叉训练运动鞋）。

CVS在其高级搜索中使用<选择>菜单来过滤结果，选择一个菜单选项将立即对结果进行过滤。JC Penney则提供了一个下拉菜单来过滤结果，并会提示出符合过滤值的产品数量。JC Penney也允许一个分面带有多个值，以供用户进行一次性的选择，确认信息用户要触碰“apply”按钮。

Kohl’s在其每个过滤类型中使用折叠方式收纳系列复选框。Threadless把所有搜索分面的值以按钮体现。两个网站中，你只需选择一个过滤值就能立刻看到结果。

在每个分面值下面显示商品数量能让消费者更清楚地了解每个选择为他们带来的结果。Threadless的方式是用整一屏展示出所有可用的分面值，让消费者对所有可用搜索结果一目了然。你是选用这种方式还是使用Kohl的方式，取决于你打算为指定产品目录提供多少过滤分面值。如果你的产品目录在分面值方面变化不定，那么你就需要进行试验找出合适的设计方式。你可以优化那些最热门的产品目录的过滤结果显示页面。

产品页面

产品页是电子商务网站真正展示产品细节的页面。它们并不关于某种模式，而是关于系列模式，包括标签，折叠导航和照片库等系列元素。产品页有两种展示方式，一是包含所有产品信息的长页面，二是包含标签或折叠导航能将信息收起的短页面。

三星和戴尔都在产品页上逐步揭开内容，为消费者提供许多信息。三星使用折叠导航来展开大段内容，戴尔则使用标签。

Cabela和Office Depot都使用一整个长页面来展示产品信息。这种方式需要用户频繁滑动屏幕来获取信息，但他们就不用触碰标签或展开折叠导航栏。你需要根据产品信息量的多少和分解信息的方式来选择合理的方式。

长的产品页比起带折叠导航和标签的页面需要用户进行更多滚动操作，也令购买者需要更费力地找出特定信息。在我自己的可用性测试中，我了解到人们对两种方式各有偏好，但是似乎对网页信息进行划分具有更高的可用性。如果你要采用这种方式，确保在人们触碰标签或折叠导航栏的时候，被收起来的信息能快速显示。

一种办法就是开始便一次性加载所有信息内容，这样触碰标签或折叠导航的时候时，被收起的内容就会立即显示。如果采用这种办法，即使用户在各种信息之间切换的过程中掉线了也没关系。但是有个弊端：不管用户阅读与否，也必须下载所有的产品信息；这为服务器带来更大负荷，而且也会占用户较多带宽。

照片库

照片库对电子商务领域如服装和消费电子行业来说特别重要。在Home Depot上购物时，看衣服、鞋子、高端智能机或平板电脑你可能并不需要看到商品的三视图，但图片总是越多越好。常用的展示方式是可滑动的照片库，“双击照片放大”，单击缩略图以选择照片。

Payless非常英明地将“双击放大”的提示框放在屏幕中心并持续几秒，给购物者充分的时间去消化理解网页的操作方式。对服装和鞋子来说，放大商品图片查看细节非常重要。

Dockers（上左图）具有可滑动的照片库，双击放大查看细节，而且购物者可以查看同一商品的不用颜色。Levi（上右图）也用了类似方式，但添加了商品缩略图，显示照片库内不同视角的照片。在Docker上，选择另一种颜色的商品会令网页刷新，但Levi不会。

Levi网站在用户选择商品的不同色彩时大多数网页不会刷新，这似乎能带给用户更好的体验。但是，如果对比Levi和Dockers网站在同一天同一时刻的表现，你会发现触碰Levi上的颜色标签并等待响应照片载入所花的时间，竟然比Dockers刷新一整个网页的时间要多。Levi之所以这么慢，可能是因为它还要刷新那5个缩略图，加上主要照片和其他不可见的元素，这种负载比较重。看来每种方式都有利有弊。

三星（上图左）和戴尔（上图右）的照片库都可以左右滑动。三星还将折叠导航合并到产品也，戴尔则单纯只有照片。

三星的方式似乎更人性化，因为页面相对更少。三星和戴尔都使用了高分辨率的照片，显然在展示价值不菲的产品时图片质量很重要。戴尔的方式有一个好处，那就是消费者会更专注于产品本身，而不被页面的其他内容干扰。

购物车

购物车通常用表格来展示商品。除了展示需要购买的商品，还提供其他功能，比如可以保存订单，保存商品到收藏夹，删除商品或更新数量，选择快递或实物店拿货，接受促销卷或优惠券，以及结账等。一旦加入了商品，就可以通过网站页头的购物车图标或者全网站导航菜单进入购物车。

• 

  蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

  关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

  银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发