产品内容页的内容与设计，对UE的理解与思考交互设计

由朱槑槑 分享时间：2023-07-27 18:28:30 收藏本文

【简介】感谢网友“朱槑槑”参与投稿，下面小编给大家整理了产品内容页的内容与设计，对UE的理解与思考交互设计（共6篇），供大家阅读参考。

篇1：产品内容页的内容与设计，对UE的理解与思考交互设计

今天，就谈谈电子商务类网站的单个产品（商品）内容页，关于内容是说UE，设计是UI；

对于一般视觉设计师来讲对专业的UE不能很好的去建造，但是不会不怕，怕的就是不会还不去问会的人。至少要学会去理解与比较；理解有不对的地方经由专业的人予以指点，那么就会变的好起来了；就象不要求你会造马桶，也没有人要求你会拉粑粑一样结果不是你也会用马桶了吗。这样才有助于视觉表现的有效性；

俺是怎么理解这个页的？这个页面是进行交易并产生结果的重要一步，里面会出现较为重要的信息，以促成交易的成功（在有需求的前提下）；诸如：价格运费销售情况：售出X 件（查看条评价）、剩件数、商品类型、所在地、浏览量：xxx等。

在产生了较多产品相关信息以后，时候必然存在先后、重次要之分；这里就要看我们首先要了解用户最需要的是什么，然后要对用户强调并提供什么最有效的信息，因此就要在布局，颜色，文本排版以及链接样式做一个协调性的配合设计。信息大部分也就是文本排版与设计。

1.怎么排版？通常的设计是把展示图片放在左边（整体两拦布局的情况下）产品相关信息放在右边，在价格表述以后位置出现“立即购买”或者“添加到购物车”的按钮，在按钮下面是交易情况。。。而是在整个销售信息下面才是产品相关的描述。为什么，其实到达这个页面的人已经有了购买的需求了，一旦有了冲动，选择购买的机会就会在瞬间产生，这样的话，我们是有效的利用了冲动和抓住了时机，所以在这里，我们就想办法尽量缩短给用户传达购买理由信息的时间。那就是突出理由，理由的第一位就是价格，然后是运费、销售情况等。

2.强调谁？怎么强调？在视觉设计上，我们是强调价格、运费、销售情况这些关键词本身呢？还是强调这些情况的结果或指数？从书写习惯的逻辑上，如，价格：290 元，我们如果做强调示意的话会可能会这样做，价格：290元或价格：290元，其实在视觉浏览上的信息接受效果可能还不如没有加粗放大价格：290的效果好（文本以黑色为论），因为它已经占据首要的位置了；而对价格：290元，就不一样，哪怕我们没有写价格两个字大家也会知道，哦，这个是价格。以次效果为引导的情况下，下面的相关信息都会节约一定的阅览时间，也就是加速了点击立即购买、立即预订按钮的进程。以此思路延伸的话，其实就是要研究用户心理的一个过程，在基于这种消费心理的基础上作为我们，是要强调过程还是结果，结果显然是强调结果。

3.文本信息内容怎么设计？我们要把用户阅览用的描述性文字（有色字除外）的颜色尽量灰一些，这样可以给单纯的文本样式提供更好的强调空间，如：我么的描述性文本用＃000的黑(大面积得黑色文本与白色背景会产生强对比，特别是液晶显示器尤其刺眼，

)，那么在不改变颜色、字号、背景样式的情况下只有加粗火加大字号两种选择。而如果是＃666就不一样了，我们会多出至少4种有效的样式，会获得具有节奏感也就是美感的权利。

4.按放在什么位置?接着就是购买按钮放在哪儿的？如上述思路，比较赞同有啊和淘宝的做法，为什么？节约时间，促成交易完成。

其实整个设计的结果就是想要达到一个目的：以最快的速度促使交易的完成。至于怎么达到也就是我们要思考与设计的问题。以上分析理解难免偏差，但至少可以作为一个视觉设计师应有具备的，应该多了解一些产品方面的。

此时，我们还要留意到另外几个问题，产品相关描述信息分类怎么处理？要不要给分类标题加背景？信息分类标题

实例

淘宝商品页

看得出来吧，1.强调价格结果；2.较灰的文本描述，但没有用加粗的样式；3.按钮在价格与促销下面；

按钮下边是其它相关信息。对于愿意了解的用户来说他会更详尽的了解，这部分其实是老客户愿意去具体了解，而对于新客户来说基本是不怎么了解的；因为我第一次在淘宝上买东西的时候就是直接点“立即购买”按钮，所以这种按钮的布局，对新用户尤其有效，而对于电子商务来说，“抓住第一个，就是抓住一大把！！”要不怎么有的人感叹，我在淘宝上买东西，一不小心怎么怎么了。。。。不光光是价格何物品本身吸引了你哦，哈哈。

有啊商品页

这小子够阴的吧，他不仅让你立即购买，还让你先加入购物车，一卖一大堆啊还想？好像是是比淘宝聪明哦。但是俺觉得设计是好的设计，但在有啊目前来说效果不佳的多好；就像我在沃尔玛会推个购物车，但在楼下的苏果俺就不会。不过，好东西还是好东西，以后用得着。

京东商品页

这孩子家蛮有钱的好像，但好像就弱了一点，最让我不理解的是，干嘛把编号放在最上面？市场价是不是放在京东价下面呢？就像俺们去超市买东西一样，也是先看到优惠打折的数字，再去翻翻原来的价格比较下，哦，便宜了这么多。添加到购物车按钮你看看，我要从一楼跑到二楼在找到，累的气喘吁吁的，而且看起来还没有锅大怎么装锅啊？（当然不是大小问题，而是位置）

易趣好像也存在类似问题，俺就不多说啦。言多必失。估计以上也有说失的地方啊。但至少俺敢说，呵呵，不怕，有这么多牛人指点。

本文出自：gengxipeng.com/?p=392

篇2：产品与内容的关系――产品是商场，内容是商品交互设计

产品是商场，不是容器，产品会有选择的接受内容，不会照单全收，如果有照单全收的产品，那么该产品一定没有产品经理负责。

产品是商场，商场关注客流，产品关注用户数，一个道理。

内容是商品，内容放在商店里销售，用户来商店是为了商品而不是商店。

作为一名产品经理，TA是产品的负责人，也相当于商场的经理。

产品对于内容是有选择的，不能是个文章都往我的产品里放，我有我的运营规划，我有我的产品战略，只要想进我的产品的内容，就得按照我的要求做！————-产品经理的核心技能之一就是......控制力（控制产品的能力）

比如我们做一个视频播放客户端，做好了，很多内容会要求加入我们的客户端。但是作为PM需要有自己的判断，需要制定原则。视频长度、视频内容、视频质量、清晰度、视频的更新频率等等，这些是需要产品经理来决定的，这样你才可能对产品负责，

达不到要求?sorry，别进我的产品，自己把内容弄好了再来找我！我为什么有权利说这话，因为我承担了相应的责任，产品不好老板骂我，所以我才会严格的要求内容质量。

如果一个商场总是出售过期视频，客户还会来吗？一个道理

这里产品经理需要的不是独裁，而是控制。而且要把矛头指向公司的制度，而非你的同事。制度要求我这么做，所以我这么做，我是执行公务，不是公报私仇，这个很关键。因为公司保不齐会有势利小人。

OK，作为产品经理，我们要管理产品，让内容为我们服务，我们才是产品的主人。

我们产品经理要利用公司的一切资源，为我们服务，我们又为产品服务，产品又为用户服务，于是公司的业务也就兴旺发达了。这是产品经理责任制的内在商业逻辑。

本文来自：www.5gme.com/space-19213-do-thread-id-6667.html

篇3：关于产品的若干思考交互设计

本文将要论述的话题是围绕着如今繁多的互联网产品展开的，笔者将会尽可能的做以精要的说明，从逐点优化的产品优势开始说起，最终聊到卓越产品乃至极致产品所需要具备的要素，

开始正文。

优秀产品靠的是不断完善：

在日常生活中，无论是PC终端还是智能机，几天的时间，用户就会发现需要升级的软件/App有很多。我们就先来聊聊这个。现在的软件厂商们很注重效率，往往隔三岔五地在推出软件的Beta版本，但软件实质性的功能变化一般都不会很大。那么它们这样反复地更新，究竟有什么样的意图，下面几段，我们就来解决这个问题。

一般来说，不断更新版本的软件，从产品，用户，营销手段三个方面来说都有很大的好处。

对产品而言：

用户使用软件时及时发现的bug或者是产品本身不够优化的用户体验，都会及时在下一个版本中得到改良。产品一直在改变，一直在优化，所以说在性能上肯定是不断增益的。

对用户而言：

从用户的角度来说，不断推陈出新的策略似乎使客户端软件会更加的与自己拉近距离，提高一些黏度。只要每更新一次，就增加了用户接触软件并使用它的频率，会逐步培养出用户习惯，用户自然也就会下意识的在需要时记得使用该软件。况且由于软件的不断更新，使得用户对于软件的感觉上则是其功能在不断地增强，软件在不断地完善。每更新一次，在潜意识里面都在告诉用户软件的功能在不断地强化。由此，不断地更新产品，就是在逐渐强化产品在用户大脑中的性能。这就是产品经理们的“诡计”。

对营销手段而言：

从营销的角度上来说呢，由于用户反复接触软件的次数越多，该产品的定位就会越发的鲜明，这就会逐步的提高品牌效应，

随着时间的推延，功能性会与产品本身产生奇妙的联系。比如：安全与360产生对等，聊天与QQ产生对等。产生冥冥中的对等性，这就是软件厂商最希望的结果。

卓越产品需要有“范儿”：

上面本人分析了不断更新产品的若干好处，发现这些方法都是可以起到优化作用的，也可以将产品逐步达到优秀，但是，这样的操作手法真的可以造就卓越产品吗？

我认为，优秀与卓越，中间跨着一道坎，这就存在于产品思维上的缺陷。很显然，上述的种种做法从整体上来看不大符合苹果的风格。逐点优化，和别人拼软件，拼硬件性能，都不是苹果的范儿。苹果一贯是特立独行，坚持在做软硬件一体化，看似封闭的机制却使得公司一度达到了全球市值第一的境况。一味的依照用户的需求去改良，去完善，也许会做出具备很高适宜度与体验度的产品，但是一般来说，却很难做出极致的产品，因为用户的思维只可以使产品更加的好用，至于产品灵魂的缔造与风格的设计，这不是用户所需要考量的范围。用户只是使用者，他们在使用产品时会有总体的感觉，好用还是不好用；也可以细化到一个点上，会考量到哪一点不好用，不符合自己的使用习惯；但是如果指望用户坐下来考量产品如何大幅度创新，这大概是不可能的事情。最好的产品一定是有着一个独一无二的灵魂做为引导，形成的是一个整体上的构思，这与常年累月一步步优化下来的产品，有本质上的区别。

综上两种模式所述，只有创造与积累，才有可能产生所谓的卓越的产品。创造指的就是革新式的变化，积累则指的就是充分优化产品本身。所以说，我在这里并不是在一味地鼓吹产品不需要运营与优化，我想要表达的观点就是市面上的产品越来越多，大家都争着走一条路，开始时确实会很好走，也会得到认可，但是时间一长，当每个产品经理都开始如此行动时，也就接近这条路的末端所在了。

其实，说来说去，卓越的产品最后还是要回归到卓越的产品经理上，而不仅仅是框架式的教条上，教条上的积累永远不会历练出卓越的产品。

来源：yangguo1202投稿，作者Email：yangguo1202 （at） gmail.com

篇4：对产品管理工作的一点思考交互设计

公司即将搬到滨江，组织架构也将发生调整，变化接踵而至，早上卫哲发了一封介绍组织架构调整的内部邮件，非常激情洋溢，给大家一种二次创业的信心。不过对于我这个战斗在第一线的产品人员来说，我不关心老大们怎么折腾，我只关心我手上的客户问题解决的工作能否继续进行下去。

最近看用户投诉邮件，再想网站的产品管理，想到了几个问题，

1.产品经理需要保持工作的延续性。一个网站非常需要保持产品经理工作的延续性，产品做到一半被束之高阁是种很不经济的方式，不但不能达到产品预期的收益，反而会为网站留下阑尾，对网站长期发展和网站可用性都不好。

2.避免一些无谓的产品改动。很多时候我们产品经理80%的工作都是在对某个产品改来改去，一会左倾，一会右倾，最后回过头来看是在原地踏步。造成这种情况可能是因为产品发展战略缺乏延续性，也可能是前后两任产品经理对同一产品发展战略的不同理解，

例如，就拿网站注册这个简单的产品来说，当网站战略目标是会员数量时，产品经理就努力间少注册字段放底注册门槛，当下一任产品经理开始关注会员质量是，就开始往回改，提高注册门槛。很多时候我们都没有跳出过这种简单的思维模式，转去寻求合理的产品优化方案。

产品经理总是在顺从和坚持之间寻求一种最佳的平衡，所以很多时候产品经理避免不了做以上两种不合理的产品管理工作

合理的产品管理工作

如果按“是否符合长期发展”和“是否对KPI有帮组”为两个维度画一个四宫格的话，有一部分事情是符合长期利益，但是对短期KPI是没有帮助的。很多时候这部分事情就一直被搁置，没有人去处理。我希望在我负责的产品管理工作中，在我能够左右和影响的范围内，有一部分精力是花在这种符合长远发展但是没有产品经理愿意牵头去做的事情上的。

最能够反映一个产品经理能力的是他所负责的产品，我们总有一天会离开所服务的公司选择下家或者出去创业，需要的一两个说得出口的产品或者一两件说得出口的事情作为筹码。

本文来自：www.renqijian.cn/index.php//07/duichanpinguanligongzuodeyidiansikao/

篇5：形式追随内容？交互设计

今天想说的是内容和容器的关系，顺便把之前设计中碰到的问题和大家一起探讨下，我们从软件的设置说起。（这里以QQ的设置举例）

一个软件的设置（常称为系统设置）一般承载了软件所有的可配置选项。通过导航，把内容放置在不同的选项卡下面。

由于内容的划分是根据产品功能的逻辑划分，所以设计中经常碰到的问题就是：不同选项卡下面的内容多少不确定，对排版会带来很烦。

正常情况如下图，“启动和登录”内容填充了大部分版面，设置界面看上去很充实。

但有的选项卡下面的内容很少，整个界面就一两行字，大片都是空白。由于内容和留白的比例失衡而导致一定的视觉问题（下图是我自己P的：）

又或者，有的选项卡下面的内容超出了界面的高度… 即使短时间内没发生这个问题，随着产品功能的调整，可配置项越来越多，就会产生问题。

下图消息提醒的设置，如果我再想加一行内容，就必须在已有内容上减少一行。

之前做排版的时候，一直对这个问题很头痛。内容过少时，会设法增加内容或者视觉元素，以求视觉上的平衡；内容过多时，会调整目录结构，把一个菜单项拆成两项，或者反复排版，把内容尽可能压缩在一页里排下。

但是这样又引入了新的问题：

无端增加视觉元素并不是用户需要的

为了把多出来的内容放到设置界面里，有时候不得不根据内容的多寡来划分菜单项，而不是单纯的根据逻辑关系

不可持续（产品需求的变更很有可能导致之前做好的排版又要改）

然后我想到了工业设计中经常被提到的一句话：形式追随功能(form. follows function)。这句话对学设计的同学来说应该不陌生了，最早由建筑师沙利文提出，后来成为包豪斯最重要的主张之一。说这句话对整个设计界都产生了深远的影响也不为过。因为它是如此的出名，并且容易引发“究竟是形式重要还是功能重要”的争议，所以这里只以“形式追随内容”为题，不敢把话题扯得这么大。

其实已经有设计把我上面提到的这个问题解决了。对，答案就是苹果的系统设置界面。

Windows环境的同学可以装safari for PC，看它的偏好设置，

这里我截了“通用”和“自动填充”两个界面，如下图

Safari每个选项卡下面内容都不一样，最多的十几行，最少的只有3行，而界面的高度会自适应内容的高度！

在不同tab下切换时，Safari的偏好设置会平滑地切换界面高度，完美的解决了我刚才提出的问题。我想这就是形式追随内容了。

这样在界面设计过程中，设计师可以不用考虑内容是否放得下，界面是否美观这些问题，把内容以最合理的方式展现出来。

我始终认为，一个好的设计，在设计之外，应该能够同时把设计师解放出来，不再做重复的设计。

其实苹果界面的设计思想，从没有最大化就可见一斑了。窗口的左上角的红绿灯，红色是关闭；黄色是最小化；至于绿色的+号，只是把窗口调成最合适的大小（有时候合适的大小就是最大化）。Safari for PC把这种设计思想也带到了PC上来，设计出了高度随内容而变化的偏好设置界面。

之前提出的问题是解决了，不过如果真的是形式追随内容的话，那界面的宽度呢？宽度是不是也能（应该）追随内容？

高度和宽度同时变化以适应内容，会不会让用户失去对界面的掌控感？

依然是PC平台上的例子。装了win7的同学可以试试系统自带的计算器，有4种模式可以选择，“标准型”，“科学型”，“程序员”，“统计信息”。4个模式下，界面的高度和宽度都是不同的。在切换模式时，计算器界面以左上角为基点在不断地切换大小，没有发现明显的体验问题。

左上角这个基点，对于“形式追随内容”至关重要，如下图所示。因为这个基点周围区域的内容是不会随界面的改变而产生位移的。