怎么看苹果和锤子官方网站差别？他们的UI设计理念有什么不同之处？

时间：2023-12-05 18:24:01 | 来源：网站运营

时间：2023-12-05 18:24:01 来源：网站运营

怎么看苹果和锤子官方网站差别？他们的UI设计理念有什么不同之处？：哈哈哈，泻药！看了楼上的回答，我们现在来说写干的，不说那些有的没的。

其实我们实话实说，苹果的官方网站从设计或者技术难度层面来说不是最好的，但是作为一个产品类公司展示型网站做的是很成功的。而锤子，恕我直言，负责网页设计的项目组同志，要么就是水平有限，要么就是真的不走心。那么为什么我会这么说，我们不要从扁平化，拟物化来着手，我负责的告诉各位，在网页设计里，扁平与写实等等只是手法，不是目的，一个网站正真的目的是浏览，是展示，是加长用户停留时间。

首先我们先说苹果的中文官网那。首页是这样的，一个现在很流行的满屏设计。


而这个满屏的设计，保留了整个网站的所有页面的基本构成。TOP部分仅仅只用了44PX，高度不超过1400px的页面内，以仅2/3的篇幅用来做产品展示banner，而所有的产品展示以白色为背景，基本以中心为点四周散开。保证了用户进网站后能够第一眼被中间的产品所吸引，而并非其他。

首页的效果图处理这个不是什么大问题。问题在于我要在一个篇幅内要展示我应该有的产品特性，无论是材质，色彩，还是功能，以及我们要说去的产品口号。没错，就是一目了然，就是你。我们用户尽量要看得就是产品，其他的我们本就不是目的。

回到top，我们看到这样一个界面，点击搜索按钮，出现以下对话框。


之前这个对话框仅仅是直接向左侧弹出来，隐藏掉所有目录，现在apple已经将此做了一个升级，直接变成更大更方面的搜索模块，并跳转到网页之前，这个细微的改动我在之前上官网的时候还吐槽过苹果为什么会用这么一个白痴的设计，结果现在看人家已经改的更好了，只能说，苹果里面确实有很多很聪明的用户体验分析设计师。这样做的好处是什么，就是突出功能，提高功能使用，避免误操作，提高用户浏览搜索效率从而提高更多的附加价值。

那么下面就是跳转到产品页面啦，毕竟首页之后的二级页面的重点就是产品展示。

我们看到的都是这样的，在top栏下方有一个产品类型栏，将不同规格的产品直接做成一个按键，而并非很多网站的下拉菜单一页的三级页面的搜索方式。这样做的目的我想大家都明白，提高搜索效率，毕竟用户谁记得那么多型号，看图是最直接高效的。

而我们点开iwatch，我们看到了这样一个页面

这个要重点说的就是，我们看到里面的手表是因为我们上拉而产生一个微微的旋转动画，同时，在上拉过程中，根据产品的色彩搭配，相应的产品背景色也产生了变化，因为本身产品在展示的时候色彩材质的选择，什么样的类型出现在同一个框下是经过考量的，所以背景色的转换不仅可以提高用户的浏览质量，也可以更好的展示需要给客户看的产品。手表转动这种动画效果不难实现，但是流畅的动画是一个网站让人愉悦浏览的基本要素，就像吃饭，全是硬菜吃的也烦啊，也要来点拍黄瓜换换口才行。

包括6S和se等最新重点推的产品动画效果，都做了

这样的好处是显而易见的，在用最简单的页面设计情况下，能更好的展示产品，让一个大大的硬广告，变成一个动画演示。这种简单的动画效果，其实做起来也很费功夫，但是并不是什么需要费大脑子或者是苹果首创的技术。

最后一个，周边产品的展示

当然，苹果的周边都是比较好的东西，也不是特别多，所以展示大一些，也能理解的过去，但是这样展示的好处是什么，醒目，仅此而已，毕竟，苹果是要将自己摆在一个高标准的位置的。整体来说，苹果的网站，将产品展示做成了第一位，其他的都是弱化，辅助的性质，效果图的质量也是做的很赞。其他的技术支持之类的都比较常规，还是他自己那个套路就不多做赘述。顺便夹杂个私货，我们现在国内很多公司都会做网站，什么都想放上面，什么都恨不得让别人都去看，无取舍，无审美，无对比，三无是一个存在很严重很普遍的问题，至少在我设计过程中大部分都是这样。

包括产品页面下拉到底，也没有一个一件回到顶部的按钮，这样的做法加大用户浏览时间，不设置一键回到top，选择隐藏，只有用户必须在浏览一次才能出现top栏。这些细节都是有很好的考量。

要说去挑这个网站的毛病，其实还真不多，最多也就是页面切换之间稍微硬了一些，有些功能键（比如搜索出现之后多一个X的关闭 按钮）此类显得有点多余，而且与一些鼠标右击本身就隐含的无意识操作吻合，干嘛还要多此一举做这样的按键布局呢？毕竟深泽直人的无意识设计我一直认为不仅仅适合在产品设计中，应当适合所有人需要使用接触的所有设计中。还有就是这个图，我是唯一不能忍的，太尼玛丑了。



好了，那么我下面来说锤子。同样我们从首页开始分析

首页，切了一个1120的中间布局，而这个布局，也仅存首页，其他页面就变成了全屏设计。。。我真是搞不懂，这个是谁做的，你看着不别扭么？难道产品经理认为，首页就这么不重要么？全屏的目的是什么，是基于现在的网络技术和各位亲的网速赶上社会主义新阶段才能跟上世界潮流的产物啊！是为了让用户一眼被网页的大格局，大的视觉冲击吸引住啊！为的是让亲，让你实现做网页设计也能做成电影一样的感觉啊啊啊啊！为什么会出现这种水土不服的现象，又想做商城，又想做产品展示，请你倒是挑个重点啊，要么你干脆老老实实跟小米学，就是那么中华淘宝商城国际风，就是赤裸裸给你看。

这一溜一圈的东西，我点一圈下来，再点手机就变成了购买页面！请问你闹哪样，你就那么急吼吼的让我买你的手机么？我 要再想看开始的界面，就要再去点一次首页，请问这样的逻辑是哪个产品经理做的，增加我的浏览负担。


这时候我点击主菜单，top，也一样top的设计也适用黑色，而并非你的企业用色，这个我实话实说，真的没有必要，而下面哪种莫名其妙的变化我真的有一些看不懂。

一会灰色，一会条纹，一会又黑色，我觉得虽然这个细节无关大局，但是我宁愿你选择你的企业色，然后再做相应的设计，这样来说比这样的莫名其妙会好很多吧。

你的论坛这样做，也没什么不妥啊，对不对。

点击top，跳转出来全是全屏设计！这样的设计导致，产品的展示变成了第二位，而一个浓缩的小京东，才是这个网站的主题，而这个主题的效果图做的那么没有美感，黑手机陪黑背景，白手机配白背景，反观我刚刚提到的手表展示，一个页面下为了配合不同的色彩材质的产品，做了相应的色彩背景的动画，这就是细节，为什么这样的细节锤子的产品经理和设计组视而不见？我想这样的效果还没到程序员要砍死你系列里来吧。

这样的字体，这样的布局，恕我不能接受，你可以选用这款我目测是方正兰亭细黑的字体，但是你想过这么细的字体在这里这样的大背景下有那么一些苍白无力么？何况你还露一个壳子在那，在前期测试的时候没有考虑过其他屏幕的显示效果么？然后出现了比我在苹果中那个图更不能忍的效果图出现了！

请问这个贴图是淘宝9.9包邮么？这种懒腰切断的做图，下面又是这种大面积布局，这样的设计是怎么通过的？你没有流畅的动态效果我也就忍了，请问这样的设计是为哪般？还整那么多花，还掀起来，这也是要掀起你的盖头来么？

然后，这种图能不能不要出现，请不要将图的视觉重点放在一排毫无力度的字上面，这样真的是一个大公司做出来的图么？

这样的按键动态效果很常见，但是我请你做成凸出好么？人的潜意识里凸起的东西是可以按下去的，这是行为记忆给我造成的潜在意识，你设置成凸出，可以保证用户会有更多的冲动去点击这个案件，你设置成凹陷，对不起，真的会有一些别扭。并且如果想增加一些趣味，例如可以选择使用鼠标移动的时候这些块面会有此起彼伏的动态效果不是更好看么？

然后我最怕点击的一个东西出现了，欢喜云。

然后就跳转不会去了，而且还不是单独跳转一个新的页面，而是没有办法回去了。。。。我不知道逻辑是怎么想的。。。不是说好是一个网站的么，怎么一个功能就要单飞。。。而且还做的这么薄。。

页面联系薄弱，动态效果做的基本都很失败，效果图做的单一，有点哦甚至做的就是实习生做的吧，页面分割僵硬，不考虑用户浏览的流畅度。腰斩要少用，这不是啥好玩意。大屏要有大屏的效果，如果能做成一部电影，你为什么非要去做一面照片墙？

最后我看到


所以，我错了，我将两个本不是一个类别的网站做了对比，我承认锤子在系统优化的设计上，有你的亮点，但是我觉得你们应该请一些好的设计师，好的设计机构来做辅助咨询，甚至应该像罗胖子说的那样真的有点情怀，而不是这样胡品乱凑，这样一幅急不可耐的模样。哪怕你把拟物做到极致，做成动画片，那也是你的特色，而非现在这样，字体做细就是科技了？这种表面功夫，难道不是应该我们这种给莫名其妙甲方做方案时候的选择？对于锤子，你对字体设计就这态度？效果图就这么不苛刻？程序员就那么懒的写动效？我想这些都不是，而是我们看到苹果的设计组和锤子的设计组之间对于细节的考虑，和产品的考虑确实是不一样的，也确实存在差距。