iPhone6 產品網頁設計缺失

09/10 | 使用者介面留言(0)

每天忍受著誘惑,不看任何的小道消息或是流出來的產品照片,就是為了等到正式發表會有驚喜的感覺。雖然我不是那種會熬夜看發表會的蘋果迷,但我的習慣是隔一天早,從官網來了解新產品的優勢跟特色,學習 Apple 是如何透過網站的設計來販售產品。

 

另一方面, Apple 新產品的頁面往往會採用許多最新的呈現技術,也會帶起網路業界的一股設計風潮。

 

今早第一次打開 Apple 網站是使用 iPad2,赫然發現整個網站改版了,拿掉所有的陰影跟漸層,朝 iOS 系統的平面化風格看齊。

 

apple-new-website

 

 

但因為拿掉了陰影與漸層,上方的主導覽列辨識度有些下降,再加上多了 Watch 以及把購買拉進去,選單數量爆增到八顆,個人覺得購買、支援服務、搜尋可以另外整合成下拉選單或其它方式,讓產品選項優先跳出來,這樣在主導覽列上才會有層次,不會像現在這樣一片平平的感覺。

 

輪播廣告的部份是把感應區設為整個畫面,在點選左右箭頭切換的同時,萬一沒準確點到箭頭,或是不小心點到頁面空白處,很容易就誤擊直接進入產品頁,下方 bullet navgation 就有考慮到這個問題,按鈕的週圍都沒有設感應區,誤擊的情況較少發生。

 

另外還可以加強的地方是在 iPad 上瀏覽,可以支援手勢滑動切換圖片的功能,畢竟類似的效果已非常普遍,在平版裝置的使用上可以多多提升其操作便利性。

 

iphone6-web-typo

 

當我用 iPad 看到這頁時,發現到竟然有標題掉字跟內文字體過大且行距不足的情況,我就在想是不是因為沒考慮到 iPad 的相容性所以排版走位,當我換到 MAC 上使用 Safari 瀏覽,竟然也發生一樣的情況…

 

iphone6-web-typo-2-v2

 

同樣掉字的情況不說,解析度數字的字距也過於擁擠,看起來就像是 1334 x 1920,再加上產品圖過大與資訊過多,整個頁面傳達重點失焦,另外內文的連結範圍過大,很容易造成誤擊,許多人瀏覽網頁都有邊看邊選取文字的習慣。

 

iphone6-web-typo-3

 

一樣的又是掉字,以及右方規格區塊因容器寬度不足,導致 M8 掉落在第二排,另外產品圖跟文字說明無法出現在同一視窗中,瀏覽到一半會有一種圖文不連貫的違合感,就像是圖片與文字各自存在,互不相關。

 

iphone6-web-button

 

功能說明的部份,可以點選的地方不明顯,感覺一樣是內文說明,不知道原來是可以點選的按鈕。產品圖沒有置中,畫面失去平衡。

 

iphone6-web-movie

 

影片展示的部份,當點選畫面中播放圖示時,並無影片載入中的相關提示,尤其在較慢的網路環境,就會重覆點選播放按鈕,變成暫停播放影片,非常容易造成使用者混淆。

 

iphone6-web-layout

 

一樣的狀況,產品圖與說明文字無法同一個視窗中同時呈現,左右箭頭又沒置中><

 

apple-new-web-movie

 

點選觀看影片,會展開燈箱效果進行影片播放,當播放完時關閉影片後,會發現頁面停留在影片清單頁而非原本在瀏覽的產品頁面,一時之間會搞不清楚自己在什麼地方。

 

以上提到的問題,在歐美語系的 Apple 官網比較沒那麼嚴重,標題與內文字體的比例、行距的設定,都比台灣官網來得合理且適合閱讀,不知這次改版是否乃為了因應 Bigger than bigger 的訴求,所以把字體都變超大XDD,但還是希望基本的掉字問題可以解決,比較符合 Apple 的品牌形象。

 

2014/09/11 更新:

感謝 Even Wu 大大的精闢解說加無償 debug,找到字體嵌入錯誤的問題所在
—>https://www.facebook.com/evenwu/posts/10152287978620718,整個修改後的結果感覺才是正常的 Apple。

 

回覆文章