怎么看蘋果和錘子官方網(wǎng)站差別？他們的UI設(shè)計理念有什么不同之處？

時間：2023-12-05 18:24:01 | 來源：網(wǎng)站運營

時間：2023-12-05 18:24:01 來源：網(wǎng)站運營

怎么看蘋果和錘子官方網(wǎng)站差別？他們的UI設(shè)計理念有什么不同之處？：哈哈哈，瀉藥！看了樓上的回答，我們現(xiàn)在來說寫干的，不說那些有的沒的。

其實我們實話實說，蘋果的官方網(wǎng)站從設(shè)計或者技術(shù)難度層面來說不是最好的，但是作為一個產(chǎn)品類公司展示型網(wǎng)站做的是很成功的。而錘子，恕我直言，負責網(wǎng)頁設(shè)計的項目組同志，要么就是水平有限，要么就是真的不走心。那么為什么我會這么說，我們不要從扁平化，擬物化來著手，我負責的告訴各位，在網(wǎng)頁設(shè)計里，扁平與寫實等等只是手法，不是目的，一個網(wǎng)站正真的目的是瀏覽，是展示，是加長用戶停留時間。

首先我們先說蘋果的中文官網(wǎng)那。首頁是這樣的，一個現(xiàn)在很流行的滿屏設(shè)計。


而這個滿屏的設(shè)計，保留了整個網(wǎng)站的所有頁面的基本構(gòu)成。TOP部分僅僅只用了44PX，高度不超過1400px的頁面內(nèi)，以僅2/3的篇幅用來做產(chǎn)品展示banner，而所有的產(chǎn)品展示以白色為背景，基本以中心為點四周散開。保證了用戶進網(wǎng)站后能夠第一眼被中間的產(chǎn)品所吸引，而并非其他。

首頁的效果圖處理這個不是什么大問題。問題在于我要在一個篇幅內(nèi)要展示我應(yīng)該有的產(chǎn)品特性，無論是材質(zhì)，色彩，還是功能，以及我們要說去的產(chǎn)品口號。沒錯，就是一目了然，就是你。我們用戶盡量要看得就是產(chǎn)品，其他的我們本就不是目的。

回到top，我們看到這樣一個界面，點擊搜索按鈕，出現(xiàn)以下對話框。


之前這個對話框僅僅是直接向左側(cè)彈出來，隱藏掉所有目錄，現(xiàn)在apple已經(jīng)將此做了一個升級，直接變成更大更方面的搜索模塊，并跳轉(zhuǎn)到網(wǎng)頁之前，這個細微的改動我在之前上官網(wǎng)的時候還吐槽過蘋果為什么會用這么一個白癡的設(shè)計，結(jié)果現(xiàn)在看人家已經(jīng)改的更好了，只能說，蘋果里面確實有很多很聰明的用戶體驗分析設(shè)計師。這樣做的好處是什么，就是突出功能，提高功能使用，避免誤操作，提高用戶瀏覽搜索效率從而提高更多的附加價值。

那么下面就是跳轉(zhuǎn)到產(chǎn)品頁面啦，畢竟首頁之后的二級頁面的重點就是產(chǎn)品展示。

我們看到的都是這樣的，在top欄下方有一個產(chǎn)品類型欄，將不同規(guī)格的產(chǎn)品直接做成一個按鍵，而并非很多網(wǎng)站的下拉菜單一頁的三級頁面的搜索方式。這樣做的目的我想大家都明白，提高搜索效率，畢竟用戶誰記得那么多型號，看圖是最直接高效的。

而我們點開iwatch，我們看到了這樣一個頁面

這個要重點說的就是，我們看到里面的手表是因為我們上拉而產(chǎn)生一個微微的旋轉(zhuǎn)動畫，同時，在上拉過程中，根據(jù)產(chǎn)品的色彩搭配，相應(yīng)的產(chǎn)品背景色也產(chǎn)生了變化，因為本身產(chǎn)品在展示的時候色彩材質(zhì)的選擇，什么樣的類型出現(xiàn)在同一個框下是經(jīng)過考量的，所以背景色的轉(zhuǎn)換不僅可以提高用戶的瀏覽質(zhì)量，也可以更好的展示需要給客戶看的產(chǎn)品。手表轉(zhuǎn)動這種動畫效果不難實現(xiàn)，但是流暢的動畫是一個網(wǎng)站讓人愉悅瀏覽的基本要素，就像吃飯，全是硬菜吃的也煩啊，也要來點拍黃瓜換換口才行。

包括6S和se等最新重點推的產(chǎn)品動畫效果，都做了

這樣的好處是顯而易見的，在用最簡單的頁面設(shè)計情況下，能更好的展示產(chǎn)品，讓一個大大的硬廣告，變成一個動畫演示。這種簡單的動畫效果，其實做起來也很費功夫，但是并不是什么需要費大腦子或者是蘋果首創(chuàng)的技術(shù)。

最后一個，周邊產(chǎn)品的展示

當然，蘋果的周邊都是比較好的東西，也不是特別多，所以展示大一些，也能理解的過去，但是這樣展示的好處是什么，醒目，僅此而已，畢竟，蘋果是要將自己擺在一個高標準的位置的。整體來說，蘋果的網(wǎng)站，將產(chǎn)品展示做成了第一位，其他的都是弱化，輔助的性質(zhì)，效果圖的質(zhì)量也是做的很贊。其他的技術(shù)支持之類的都比較常規(guī)，還是他自己那個套路就不多做贅述。順便夾雜個私貨，我們現(xiàn)在國內(nèi)很多公司都會做網(wǎng)站，什么都想放上面，什么都恨不得讓別人都去看，無取舍，無審美，無對比，三無是一個存在很嚴重很普遍的問題，至少在我設(shè)計過程中大部分都是這樣。

包括產(chǎn)品頁面下拉到底，也沒有一個一件回到頂部的按鈕，這樣的做法加大用戶瀏覽時間，不設(shè)置一鍵回到top，選擇隱藏，只有用戶必須在瀏覽一次才能出現(xiàn)top欄。這些細節(jié)都是有很好的考量。

要說去挑這個網(wǎng)站的毛病，其實還真不多，最多也就是頁面切換之間稍微硬了一些，有些功能鍵（比如搜索出現(xiàn)之后多一個X的關(guān)閉 按鈕）此類顯得有點多余，而且與一些鼠標右擊本身就隱含的無意識操作吻合，干嘛還要多此一舉做這樣的按鍵布局呢？畢竟深澤直人的無意識設(shè)計我一直認為不僅僅適合在產(chǎn)品設(shè)計中，應(yīng)當適合所有人需要使用接觸的所有設(shè)計中。還有就是這個圖，我是唯一不能忍的，太尼瑪丑了。



好了，那么我下面來說錘子。同樣我們從首頁開始分析

首頁，切了一個1120的中間布局，而這個布局，也僅存首頁，其他頁面就變成了全屏設(shè)計。。。我真是搞不懂，這個是誰做的，你看著不別扭么？難道產(chǎn)品經(jīng)理認為，首頁就這么不重要么？全屏的目的是什么，是基于現(xiàn)在的網(wǎng)絡(luò)技術(shù)和各位親的網(wǎng)速趕上社會主義新階段才能跟上世界潮流的產(chǎn)物啊！是為了讓用戶一眼被網(wǎng)頁的大格局，大的視覺沖擊吸引住??！為的是讓親，讓你實現(xiàn)做網(wǎng)頁設(shè)計也能做成電影一樣的感覺啊啊啊啊！為什么會出現(xiàn)這種水土不服的現(xiàn)象，又想做商城，又想做產(chǎn)品展示，請你倒是挑個重點啊，要么你干脆老老實實跟小米學，就是那么中華淘寶商城國際風，就是赤裸裸給你看。

這一溜一圈的東西，我點一圈下來，再點手機就變成了購買頁面！請問你鬧哪樣，你就那么急吼吼的讓我買你的手機么？我 要再想看開始的界面，就要再去點一次首頁，請問這樣的邏輯是哪個產(chǎn)品經(jīng)理做的，增加我的瀏覽負擔。


這時候我點擊主菜單，top，也一樣top的設(shè)計也適用黑色，而并非你的企業(yè)用色，這個我實話實說，真的沒有必要，而下面哪種莫名其妙的變化我真的有一些看不懂。

一會灰色，一會條紋，一會又黑色，我覺得雖然這個細節(jié)無關(guān)大局，但是我寧愿你選擇你的企業(yè)色，然后再做相應(yīng)的設(shè)計，這樣來說比這樣的莫名其妙會好很多吧。

你的論壇這樣做，也沒什么不妥啊，對不對。

點擊top，跳轉(zhuǎn)出來全是全屏設(shè)計！這樣的設(shè)計導致，產(chǎn)品的展示變成了第二位，而一個濃縮的小京東，才是這個網(wǎng)站的主題，而這個主題的效果圖做的那么沒有美感，黑手機陪黑背景，白手機配白背景，反觀我剛剛提到的手表展示，一個頁面下為了配合不同的色彩材質(zhì)的產(chǎn)品，做了相應(yīng)的色彩背景的動畫，這就是細節(jié)，為什么這樣的細節(jié)錘子的產(chǎn)品經(jīng)理和設(shè)計組視而不見？我想這樣的效果還沒到程序員要砍死你系列里來吧。

這樣的字體，這樣的布局，恕我不能接受，你可以選用這款我目測是方正蘭亭細黑的字體，但是你想過這么細的字體在這里這樣的大背景下有那么一些蒼白無力么？何況你還露一個殼子在那，在前期測試的時候沒有考慮過其他屏幕的顯示效果么？然后出現(xiàn)了比我在蘋果中那個圖更不能忍的效果圖出現(xiàn)了！

請問這個貼圖是淘寶9.9包郵么？這種懶腰切斷的做圖，下面又是這種大面積布局，這樣的設(shè)計是怎么通過的？你沒有流暢的動態(tài)效果我也就忍了，請問這樣的設(shè)計是為哪般？還整那么多花，還掀起來，這也是要掀起你的蓋頭來么？

然后，這種圖能不能不要出現(xiàn)，請不要將圖的視覺重點放在一排毫無力度的字上面，這樣真的是一個大公司做出來的圖么？

這樣的按鍵動態(tài)效果很常見，但是我請你做成凸出好么？人的潛意識里凸起的東西是可以按下去的，這是行為記憶給我造成的潛在意識，你設(shè)置成凸出，可以保證用戶會有更多的沖動去點擊這個案件，你設(shè)置成凹陷，對不起，真的會有一些別扭。并且如果想增加一些趣味，例如可以選擇使用鼠標移動的時候這些塊面會有此起彼伏的動態(tài)效果不是更好看么？

然后我最怕點擊的一個東西出現(xiàn)了，歡喜云。

然后就跳轉(zhuǎn)不會去了，而且還不是單獨跳轉(zhuǎn)一個新的頁面，而是沒有辦法回去了。。。。我不知道邏輯是怎么想的。。。不是說好是一個網(wǎng)站的么，怎么一個功能就要單飛。。。而且還做的這么薄。。

頁面聯(lián)系薄弱，動態(tài)效果做的基本都很失敗，效果圖做的單一，有點哦甚至做的就是實習生做的吧，頁面分割僵硬，不考慮用戶瀏覽的流暢度。腰斬要少用，這不是啥好玩意。大屏要有大屏的效果，如果能做成一部電影，你為什么非要去做一面照片墻？

最后我看到


所以，我錯了，我將兩個本不是一個類別的網(wǎng)站做了對比，我承認錘子在系統(tǒng)優(yōu)化的設(shè)計上，有你的亮點，但是我覺得你們應(yīng)該請一些好的設(shè)計師，好的設(shè)計機構(gòu)來做輔助咨詢，甚至應(yīng)該像羅胖子說的那樣真的有點情懷，而不是這樣胡品亂湊，這樣一幅急不可耐的模樣。哪怕你把擬物做到極致，做成動畫片，那也是你的特色，而非現(xiàn)在這樣，字體做細就是科技了？這種表面功夫，難道不是應(yīng)該我們這種給莫名其妙甲方做方案時候的選擇？對于錘子，你對字體設(shè)計就這態(tài)度？效果圖就這么不苛刻？程序員就那么懶的寫動效？我想這些都不是，而是我們看到蘋果的設(shè)計組和錘子的設(shè)計組之間對于細節(jié)的考慮，和產(chǎn)品的考慮確實是不一樣的，也確實存在差距。