詳細(xì)信息
當(dāng)前位置: 首頁(yè)> 詳細(xì)信息
蘋(píng)果產(chǎn)品頁(yè)面設(shè)計(jì)風(fēng)格備受追捧,暗藏了哪些“心機(jī)”?
專欄:今科動(dòng)態(tài)
發(fā)布日期:2020-09-05
閱讀量:82431
作者:今科科技

蘋(píng)果的網(wǎng)站可以說(shuō)是企業(yè)官網(wǎng)的設(shè)計(jì)中的佼佼者,從圖片、廣告詞、白色的背景等排版設(shè)計(jì)都十分的漂亮且直觀。

比如衛(wèi)龍辣條就深得蘋(píng)果頁(yè)面設(shè)計(jì)的“精髓”,曾經(jīng)靠模仿蘋(píng)果在網(wǎng)上大火一把。畫(huà)風(fēng)如下:

衛(wèi)龍辣條.png

這讓人看完都不禁產(chǎn)生錯(cuò)覺(jué),是蘋(píng)果開(kāi)始賣辣條了嗎?那么蘋(píng)果產(chǎn)品頁(yè)面設(shè)計(jì)究竟暗藏哪些玄機(jī),可以如此的吸引人呢?

縱觀蘋(píng)果的產(chǎn)品頁(yè)面可以發(fā)現(xiàn),網(wǎng)頁(yè)上有非常詳細(xì)的產(chǎn)品圖片、令人驚嘆的動(dòng)畫(huà)效果和以用戶為中心的內(nèi)容。那么你是否認(rèn)真的思考過(guò)。蘋(píng)果的產(chǎn)品頁(yè)面和其他網(wǎng)站有什么不同?為什么閱讀蘋(píng)果產(chǎn)品描述會(huì)讓人感到輕松?為什么它能讓普通用戶也能理解一些難懂的技術(shù)術(shù)語(yǔ)。本文將從蘋(píng)果網(wǎng)站結(jié)構(gòu)、外觀以及內(nèi)容策略入手,介紹了各種蘋(píng)果產(chǎn)品頁(yè)面UX設(shè)計(jì)原則。下面,我們先來(lái)聊聊蘋(píng)果產(chǎn)品頁(yè)面結(jié)構(gòu)有哪些值得借鑒的地方。

這個(gè)部分一共分為四個(gè)點(diǎn),不僅分析了一般的網(wǎng)頁(yè)結(jié)構(gòu),還分析了蘋(píng)果使用采用的一些方式讓用戶更容易理解復(fù)雜的信息。

頁(yè)面分塊
蘋(píng)果產(chǎn)品頁(yè)面通常更喜歡將內(nèi)容分割成單獨(dú)的片段,在每個(gè)文本塊之間會(huì)有大片的留白,或者放入圖片或視頻片段,而不是冗長(zhǎng)的無(wú)結(jié)構(gòu)段落。

除了每一頁(yè)的末尾的法律部分,用戶是很難在蘋(píng)果產(chǎn)品頁(yè)面上發(fā)現(xiàn)大段的文本內(nèi)容。將文本分成小段內(nèi)容,并分散在整個(gè)頁(yè)面各個(gè)位置,讓人感覺(jué)需要閱讀的內(nèi)容非常的少。

將信息分割成單獨(dú)的部分通常被稱為分塊,這不僅可以用于文本種,還可以用于處理任何類型的信息。一般來(lái)說(shuō),在一個(gè)網(wǎng)站上展示大量的信息,不僅會(huì)給人留下糟糕的第一印象,還會(huì)增加訪客離開(kāi)的風(fēng)險(xiǎn),并且讓用戶更難記住信息。

例如,將一串很長(zhǎng)的非結(jié)構(gòu)化數(shù)字“454678007”與結(jié)構(gòu)化版本“454-678-007”進(jìn)行比較。盡管這兩個(gè)數(shù)字內(nèi)容是相同的,但后者明顯更容易記憶。

image.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

極致的沉浸&互動(dòng)效果
蘋(píng)果的產(chǎn)品頁(yè)面并不是直接將所有信息堆疊在一起,它還創(chuàng)造出了互動(dòng)體驗(yàn)。當(dāng)用戶滾動(dòng)瀏覽頁(yè)面時(shí),圖片跟著移動(dòng),文本淡入,產(chǎn)品動(dòng)圖則直觀的展示了晦澀難懂的術(shù)語(yǔ)。

對(duì)于用戶而言,就不再是“囫圇吞棗”獲取產(chǎn)品的信息,而是在緩慢的瀏覽中,逐步探索每一個(gè)功能。

以瀏覽蘋(píng)果Air pods頁(yè)面為例,頁(yè)面上詳細(xì)3d動(dòng)畫(huà)不僅展示了產(chǎn)品的表面,還展示了產(chǎn)品內(nèi)部的每一個(gè)微小的技術(shù)細(xì)節(jié),這讓用戶能更深刻的了解到了產(chǎn)品重要細(xì)節(jié)。

3D動(dòng)態(tài)圖.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

讓用戶在3D空間中探索產(chǎn)品,不僅更接機(jī)實(shí)物,還提供了一種有趣的方法來(lái)在線營(yíng)銷產(chǎn)品。由于傳統(tǒng)的電子商務(wù)網(wǎng)站主要依靠靜態(tài)的產(chǎn)品圖片和簡(jiǎn)短的描述來(lái)銷售產(chǎn)品,用戶往往缺乏足夠的想象力來(lái)充分了解產(chǎn)品。相比之下,蘋(píng)果則提供了一種更具沉浸感的方式,讓用戶有機(jī)會(huì)以一種更有趣、更詳細(xì)的方式來(lái)查看和了解產(chǎn)品。

頁(yè)面帶來(lái)的“驚喜感”

不可否認(rèn)的是,蘋(píng)果已經(jīng)掌握了讓用戶感到驚喜的藝術(shù)。比如在瀏覽單個(gè)產(chǎn)品時(shí)候,網(wǎng)站轉(zhuǎn)換不斷變化,產(chǎn)品以多種方式移動(dòng)和旋轉(zhuǎn),只要用戶想看,就不會(huì)錯(cuò)過(guò)任何細(xì)節(jié)特寫(xiě)。

用戶瀏覽蘋(píng)果產(chǎn)品頁(yè)面時(shí),看到的內(nèi)容不再是干巴巴的信息,而更像是經(jīng)歷了一場(chǎng)“旅程”,從文字到圖片都在不斷的切換。

營(yíng)造社會(huì)認(rèn)同感

除了有詳細(xì)的產(chǎn)品照片、令人印象深刻的動(dòng)畫(huà)和醒目的標(biāo)題,蘋(píng)果在網(wǎng)站還展示了社區(qū)驅(qū)動(dòng)的內(nèi)容。比如藝術(shù)家們給出一些建議來(lái)改善沉悶的肖像照片,攝像師如何用新的iPhone Pro拍攝電影等等。

看完視頻后,讓人覺(jué)得像iPhone Pro或Apple Watch等產(chǎn)品不再是蘋(píng)果產(chǎn)品頁(yè)面上那些抽象的、精致3D圖片,而是人們?nèi)粘V袑?shí)實(shí)在在使用的工具??赐暌粋€(gè)有一個(gè)視頻之后,就讓人會(huì)想擁有Apple Watch會(huì)是什么感覺(jué)。

展示其它人使用產(chǎn)品,還能建議可信度。與營(yíng)銷驅(qū)動(dòng)的產(chǎn)品頁(yè)面相比,社區(qū)驅(qū)動(dòng)的內(nèi)容為客戶提供了一個(gè)基于他人經(jīng)驗(yàn)創(chuàng)建意見(jiàn)的機(jī)會(huì)。傾聽(tīng)別人的意見(jiàn),而不是蘋(píng)果產(chǎn)品頁(yè)面上醒目的標(biāo)題,會(huì)給人一種聽(tīng)別人意見(jiàn)的印象,也會(huì)讓潛在客戶更有可能決定購(gòu)買(mǎi)他們一開(kāi)始還在猶豫的產(chǎn)品。 

image.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

接著,我們?cè)賮?lái)講講內(nèi)容策。略除了提供高度身臨其境的網(wǎng)絡(luò)體驗(yàn)、令人印象深刻的頁(yè)面切換效果等,蘋(píng)果還在標(biāo)題和文本編輯等內(nèi)容方面下了很大功夫,讓人產(chǎn)生共鳴。

產(chǎn)品頁(yè)面文案幽默且易于理解
盡管蘋(píng)果銷售高度技術(shù)化的產(chǎn)品,并享有高端品牌的美譽(yù),但它仍保持著一種易于理解的、大多是非正式的、甚至是戲謔的語(yǔ)調(diào)。閱讀蘋(píng)果產(chǎn)品文本就好比是聽(tīng)一個(gè)聰明、隨和、幽默的人在講述,下面這段話就很有趣,很有節(jié)奏,在句末回應(yīng)了用戶的普遍關(guān)注的問(wèn)題,讓用戶感到被理解了。

比如iPhone SE的防水文案就做到了這點(diǎn): “瀟瀟灑灑,笑對(duì)水花飛灑。iPhone SE 具備抗水性能,最多可在 1 米水深停留 30 分鐘2,因此,它無(wú)懼咖啡、茶水、汽水等液體的侵襲。至于灰塵?更是不在話下?!?/span>

防水效果.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

將產(chǎn)品功能具象化
擁有一臺(tái) 2000 萬(wàn)像素而不是 1000 萬(wàn)像素的相機(jī)意味著什么?為什么新的iPhone SE的電池比你現(xiàn)有手機(jī)電池更好?當(dāng)然,當(dāng)用戶瀏覽技術(shù)細(xì)節(jié)頁(yè)面時(shí),看到大數(shù)字會(huì)給人一種新產(chǎn)品優(yōu)于舊產(chǎn)品的印象。但用戶購(gòu)買(mǎi)任何新的數(shù)字產(chǎn)品時(shí),很難理解所有抽象的技術(shù)術(shù)語(yǔ)和數(shù)字,除非任何數(shù)字被翻譯成能讓人可以參考的方式。例如,看看蘋(píng)果公司在新的iPhone SE中宣傳新電池的方式:

“電量足夠,好戲刷個(gè)夠。情節(jié)正精彩,當(dāng)然要繼續(xù)。iPhone SE 充滿一次電,就能播放視頻最長(zhǎng)達(dá)13 小時(shí)。充電時(shí),可以直接放在無(wú)線充電器上;或者用 18 瓦快充電源適配器,30 分鐘即可從零充至最高達(dá) 50% 電量?!?/span>

電池.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。


這個(gè)文案標(biāo)題不僅有趣,它還提供了極為簡(jiǎn)單的數(shù)字,讓大多數(shù)人能將產(chǎn)品新的優(yōu)勢(shì)與其它東西聯(lián)系在一起。在原本起來(lái)干巴巴的抽象數(shù)字加上一些細(xì)節(jié)描述,會(huì)讓人們停下來(lái)思考一,用戶理解后滿意度也就增加了。

抽象的數(shù)字具體化.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

展示產(chǎn)品相關(guān)性和實(shí)用性

除了將復(fù)雜的技術(shù)術(shù)語(yǔ)和數(shù)字轉(zhuǎn)換成人們可以更好理解的格式之外,蘋(píng)果還提供了語(yǔ)境,讓產(chǎn)品變得與客戶更加相關(guān)。例如,看看為iPhone Pro的廣角相機(jī)所寫(xiě)的文案:

“如果無(wú)法讓拍攝的對(duì)象全部收進(jìn)畫(huà)面,那就將鏡頭拉遠(yuǎn)。因?yàn)槿碌某瑥V角攝像頭取景范圍達(dá)到四倍,可拍攝更廣的場(chǎng)景,所以你即使站在原地不動(dòng),也能實(shí)現(xiàn)后退、再后退的取景效果。下一次,把那些連綿的大山、高聳的教堂和壯麗的天際,全都收進(jìn)來(lái)吧?!?/span>

廣角鏡頭.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

產(chǎn)品頁(yè)面僅僅關(guān)注廣角相機(jī)專業(yè)的技術(shù)參數(shù),產(chǎn)品解釋使用一個(gè)實(shí)際的例子,讓每個(gè)人都可以聯(lián)系。讀者可能馬上就會(huì)想到拍攝廣角照片的感覺(jué)。

解決用戶潛在顧慮
盡管有些用戶在瀏覽蘋(píng)果產(chǎn)品頁(yè)面時(shí)會(huì)有購(gòu)買(mǎi)的沖動(dòng),但是入手一個(gè)新產(chǎn)品也伴隨著擔(dān)憂。尤其是如果用戶之前沒(méi)有使用過(guò)蘋(píng)果的產(chǎn)品,會(huì)擔(dān)心換了設(shè)備是否會(huì)帶來(lái)很多不便以及產(chǎn)生其它問(wèn)。顯然,蘋(píng)果已經(jīng)了解了大多數(shù)人的顧慮,專門(mén)提供了一個(gè)頁(yè)面來(lái)解釋切換設(shè)備相關(guān)的任何常見(jiàn)誤解。

打消顧慮.png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。

正如上面的截圖所示,一些可能的存在問(wèn)顧慮會(huì)立即得到解決,并提供持續(xù)的指導(dǎo),鼓勵(lì)用戶直接前往蘋(píng)果支持頁(yè)面而不是自己來(lái)解決問(wèn)題。

除了支持頁(yè)面之外,蘋(píng)果還不斷挑戰(zhàn)用戶,讓他們質(zhì)疑自己目前對(duì)技術(shù)的信仰,并積極反思自己的觀點(diǎn):“智能 HDR 想不到吧,你的滿分大作還能再加分?!?/span>

升級(jí).png

注:圖片來(lái)自蘋(píng)果官網(wǎng)截圖。


看到這樣的標(biāo)題會(huì)讓人眼前一亮,而在蘋(píng)果在文案的正下方,顯示了使用HDR新技術(shù)拍攝照片的效果。蘋(píng)果沒(méi)有僅僅告訴我們新相機(jī)最終會(huì)比我們現(xiàn)有的更好,而是提供了一些直接的例子,消除了讀者可能會(huì)有的任何顧慮。


上一頁(yè):找不到相關(guān)信息
下一頁(yè):移動(dòng)SEO優(yōu)化到底是獨(dú)立域名好還是自適應(yīng)好?

本文由今科科技用戶上傳并發(fā)布,今科科技僅提供信息發(fā)布平臺(tái)。文章代表作者個(gè)人觀點(diǎn),不代表今科科技立場(chǎng)。未經(jīng)作者許可,不得轉(zhuǎn)載,有涉嫌抄襲的內(nèi)容,請(qǐng)通過(guò) 反饋中心 進(jìn)行舉報(bào)。


售前咨詢:0760-2332 0168  
售后客服:400  830  7686



1998~2024,今科26年專注于企業(yè)信息化服務(wù)

立 即 注 冊(cè) / 咨 詢
上 線 您 的 網(wǎng) 站 !