当我们使用如下 url 访问 Spartacus 产品明细页面时： https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en...产品图像和内容图像的媒体格式不同，并且它们的使用也不同。 产品图像由产品数据驱动。...产品图像用于许多组件中，例如产品列表和产品详细信息页面，以及用于购物车和订单数据的组件，还包括用于走马灯、愿望清单、兴趣等组件。但是，无论组件如何，产品图像数据源始终相同。...不同屏幕尺寸的产品图像通常基于相同的源图像生成。这会导致一个媒体容器，其中包含许多只在像素大小上有所不同但在内容和比例上相等的媒体项。 产品图像的媒体格式可以在后端和前端中配置。...与产品图像不同，横幅图像通常手动优化以适应各种屏幕尺寸。这意味着内容管理员为每种媒体格式上传替代图像以用于横幅。产品和横幅媒体的技术结构相同，但格式不同。
引言：本文展示了如何让页面变得有趣个性化，展现更多细节和与众不同，让访问者轻松获得想要的信息，下面的18个产品页面设计的最佳案例不容错过。 译者|池金锐 审校|王楠楠 编辑|华 子 1....Rent the Runway为其租赁的每件衣服设计一个单独的产品页面，其中包含客户可能想知道的所有信息 - 图像，尺寸，面料，价格和评价。到底是什么让他们如此与众不同呢？...但有时候，产品已经众所周知反而不容易设计产品页面。那么他们是怎么做到的？ 奥利奥产品页面的重点是这些简单而经典的饼干如何帮助人们释放他们的想象力，勇于质疑，并变得更加快乐。...该页面采用创新大胆的营销方式，宣传奥利奥是一种不普通的零食。 奥利奥也为这个页面采用了独特的设计。即使饼干本身是单色的，页面也非常丰富多彩，不管是视频还是背景还是图形。 奥利奥的产品页面如下 ?...知道用户在离开页面时可能不记得所有细节，但Fitbit抓住了这些功能如何真正改变访客的生活。很棒的设计！ Fitbit Charge蓝绿色的产品页面 ? 8.
引言：本文展示了如何让页面变得有趣个性化，展现更多细节和与众不同，让访问者轻松获得想要的信息，下面的18个产品页面设计的最佳案例不容错过。 译者|池金锐 审校|王楠楠 编辑|华 子 10....与名称一样，产品页面非常清晰明了。 本产品页面的每个部分都专用于介绍该软件的不同功能。标题说明了该功能，副标题解释了为什么在评估不同软件时此功能很重要。...Helix Mattresses专注于后者，它的产品页面设计为介绍每个床垫的毛容量和支撑能力。 通过以图表形式查看Helix的产品系列，网站访问者无需单独查看每个床垫的特点。...产品描述 它描述了其产品的技术优势，但没有服务态度并没有因此而下降： “与丝绸不同，Juno专为日常表演而设计的，顾客不会大惊小怪。...考虑到这一点， Nfant的详细但易于理解的产品页面非常了解买家的需求。 nfant-nipple-产品页面 ? ? 产品页面设计的最佳案例 ? 因此，关于优秀的产品页面，这些品牌告诉了我们什么？
url：http://localhost:4299/electronics-spa/en/USD/jerryproduct/300938/Photosmart%...
我们打开 Spartacus 主页，输入产品名称进行搜索之后，从结果页面能看到这种 filter： 默认有 9 个 filter，可以通过单击来展开或者折叠。 本文介绍其设计原理。...：产品、类别和目录(catalog)。...用于类别页面 包含 ** 通配符的路由用于内容页面（换句话说，通配符用于所有不是产品或类别页面的页面） 内容页面在 CMS 中有一个可配置的 URL，称为页面标签(page label)。...但是，产品、类别和品牌页面的 URL 只能在 Spartacus 中配置。...只能在 Spartacus 中配置产品和类别页面路由。
明细页面 url： http://localhost:4200/electronics-spa/en/USD/OpenCatalogue/Cameras/Digital-Cameras/Digital-SLR
In product overview page you see lots of context node with method ON_NEW_FOCUS i...
4. template hybris的设计具有很好的产品可扩展性，这表现为Hybris提供了很多模板工程(template extension)供客户参考，扩展，或直接使用。...本文介绍的产品页面的View层就存在于yacceleratorstorefront这个模板内。 Hybris的层级结构划分 我们再来介绍一下hybris的总体结构划分。...setup install.bat -r b2c_china initialize install.bat -r b2c_china start 在hybris启动完毕后，用如下链接打开首页后，任意点击一个产品即可进入产品详情页面...本文接下来将介绍从用户点击产品链接，到看到该产品的详情页面这一过程，Hybris应用背后到底发生了哪些事情。...注3: POJO也不是SAP Hybris的一个专属概念，而是软件设计里的一个通用概念。
4. template hybris的设计具有很好的产品可扩展性，这表现为Hybris提供了很多模板工程(template extension)供客户参考，扩展，或直接使用。...本文介绍的产品页面的View层就存在于yacceleratorstorefront这个模板内。 Hybris的层级结构划分 我们再来介绍一下hybris的总体结构划分。...install.bat -r b2c_china initialize install.bat -r b2c_china start 在hybris启动完毕后，用如下链接打开首页后，任意点击一个产品即可进入产品详情页面...如下图: 本文接下来将介绍从用户点击产品链接，到看到该产品的详情页面这一过程，Hybris应用背后到底发生了哪些事情。...注3: POJO也不是SAP Hybris的一个专属概念，而是软件设计里的一个通用概念。
In CRM Product UI, A thumbnail could be displayed in Product header and Thumbnai...
provide: PRODUCT_NORMALIZER, useClass: ProductNameNormalizer, multi: true } ] image.png 最后的产品明细页面...，无论是url还是页面本身的product.name, 都已经被这个Normalizer处理过了： image.png
处理完bug之后，很自然地回忆起了这么多年来，我经历过的不同SAP产品里的Checkbox的设计与实现。...同SAP CRM一样，SAP C4C最终渲染出的HTML页面里，也是由多个HTML元素协同工作，形成最后的Checkbox视觉效果。...本文后续会接着简单介绍SAP UI5，SAP S/4HANA和SAP Spartacus里的Checkbox设计，感谢阅读。
且 To C领域常用的设计方法，在企业产品中显得水土不服。面对业务门槛高，决策链复杂、输出压力巨大的企业产品，设计师应该以怎样的设计路径适应新商业环境下产品的开发迭代节奏，发挥设计价值助力业务？...企业产品的设计路径从四个部分来看： “产品形态”了解企业产品是做什么的，基本形态？ “配合路径”企业产品都是定制化项目吗，如何商业化，产品商业化过程中设计如何配合？...设计流程 企业产品抢占时间就是抢占市场，必须在约定时间内交付产品，所以设计师需要根据项目情况精确控制设计流程。选择成本最低，对产品价值最高的设计流程。...企业产品设计流程最大的改变是设计介入要提前到产品设计阶段，设计流程前重后轻。设计核心投入和输出都在产品设计阶段，调研业务，输出核心产品界面。...企业产品设计不是一劳永逸的事情，需要不断的从客户中来到客户中去，通过实践完善体验。 总结来看企业产品设计路径： 产品形态：了解企业产品基本形态和未来趋势，拓宽设计视野。
数据的交互 到目前为止，我们已经讨论了功能数据产品的类型。 这些数据产品中的每一种都可以以各种方式呈现给我们的用户，对他们的设计有明确的影响。这些接口或交互是什么？ ? API。...数据产品矩阵——不同的产品需要不同的方法 矩阵中的每一个元素都要求设计注意事项，无论是在用户需要什么方面，还是在我们用于实现目标的设计过程方面，都会有很大的不同。...从左上角的圆圈（原始数据API）斜向右下角的圆圈（自动决策Web元素）是指从技术、工程驱动的产品转向更典型的软件产品（即产品经理和设计师更直观的产品，往往出现在书中的产品、杂志和文章） 困难&方法...根据我的经验，当团队将人性化设计方法应用于更多的数据产品时，他们就会遇到大问题。...但是，HCD是一种整体的产品开发方法，当设计师理解用户的动机和行为时，它是一种很好的方法。
以上是设计遐想, 以下是实现步骤 这个插件我很早就像做了,有一段时间,我感到我的生活很枯燥,无聊.曾经我也是一个学富五车,才高八斗的才子.也在大学杂志上发表过两三篇文章.也写过一些杂记.和一些朦胧派的诗...哈哈 创建了两个文件 页面效果也出来啦. 如图 其实做好后也是这个样子, 且听我慢慢道来其中艰辛 效果是出来了. 就这样先写个死的静态页面发布一版试试看吧. 于是....不得不说这个一个极丑的页面,让我一度以为被人黑了,或者进了一个钓鱼网站. 该吐槽吐槽, 该办的是还是要办的. 上传zip压缩包,填写描述.上传图标....总结如下: 产品一开始要想做好. 就做最简单的. 诗的题材很多,格式也各式各样.一种排版肯定是不行的. 后期还需要有管理端后台进行对诗的创建. 评审.
操作区域默认固定在右侧,收起状态,显示名字iPaste<,展开后宽250px,高100%;为避免影响页面原有布局,展开后使用半透明状态,鼠标放上面没有透明, 操作区域是浏览器后台运行的页面...,意味着不会主动刷新,即使用户新建一个页面,或者F5刷新当前页面....该产品尽量使用图标,一是避免国际化的麻烦,而是为了语义化更强.少占用空间.难点在于接管系统的粘贴板数据,有可能获取不到历史粘贴板数据,只能获取最新的.不过浏览器插件的话应该有更高的权限说不定可以获取的到...产品名称由以前的IClipboard更改为iPaste 因为,伟大的项目总是有个言简意赅的名字. 虽然已经有人用这个名字做了一款Mac软件,并且在Chrome 商店有了一个相似的程序.但已经不维护了
页面分为三部分，顶部，左边和右边。其中点击左边的超链接，右边的框架页面会相应变化。...5、如何在子页面中获取父页面所在的frameset中的其它的frame中的元素？...taskCreat").attr("class","list-group-item"); 6、frameset 的优缺点 我们知道，目前的 HTML5 标准已经不支持 frameset 了，虽然使用它重载页面时不需要重载整个页面...，只需要重载页面中的一个框架页(减少了数据的传输，加快了网页下载速度)。...但是它也有很多缺点，比如浏览器的后退按钮是没用的；会产生很多页面，不易管理；代码复杂，不易被搜索引擎搜索；小型移动设备显示不全；多框架的页面会增加服务器 http 请求等等。
对于单张页面上的信息排布和节奏并没有太多的感知，只是不知道的时候看看竞品，然后抄抄改改。虽然最后开发出来并没有问题但是总觉得自己没有提高。...现在在部门老大和导师的强行带飞下，发现原来单张页面的信息（框架层）是可以梳理的很清楚，并不断打磨的。...现在归纳一下页面信息设计方法： 1、这个页面要传达什么概念，需要包含什么信息 2、这些信息能被整合成几个大部分，每个部分传递了什么概念 3、这些大部分在页面应该以什么顺序排列才能让用户更好的理解页面想要传达的信息...4、每一个大部分能被分成几个小部分，每个小部分能让用户传递了什么概念 5、这些小部分在页面应该以什么顺序排列才能让用户更好的理解大部分想要传达的信息 6、让自己成为一个一无所知的用户，看进入这个页面后能获得什么信息...，这些信息是不是当时设计时想要传达的 举个例子（还可以继续拆分） 支付宝乘车码 感觉自己每天都在被带飞，每天都有新收获，开心～
一、效果图 image.png image.png image.png 二、前端页面 1、商品列表： reserveCommodityOnShelfList.jsp <%@ page contentType...$("#contentTable tbody tr button").each(function () { $(this).removeAttr("disabled");//页面刷新将所有的
俗话说 不懂产品的程序员当不了技术总监。 前言 本文主要讲解是笔者最近在学习产品设计相关知识时的所悟所感，希望引起各位PHPer同学们共鸣，若能侥幸抛砖引玉，笔者的目的算是完全达到了。...正文 什么是沉浸式产品设计？首先我们解释一下什么是沉浸，沉浸就是让人专注在当前的目标（由设计者营造）情境下感到愉悦和满足，而忘记真实世界的情境。...其次从字面意思可知，通过这种沉浸式产品设计方法，能够让用户在使用你的产品时沉浸其中，忘记时间的流逝，甚至忘记自己在干什么的忘我境界。...用好了沉浸式产品设计手段可最大程度地抢占用户时间，从而提高用户留存率和产品DAU（每日活跃用户数），最终达到变现的目的。...适用范围 在产品设计中，并非所有产品都适合沉浸式设计，以下类型比较合适： 娱乐，活动，教学展览等等需要长时间吸引人注意力的活动适宜使用。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
