品牌設計
Hi,are you ready?

準備好開始了嗎?
那就與我們取得聯絡吧

有一個品牌專案想和我們談談嗎?您可以填寫右邊的表格·╃,讓我們瞭解您的專案需求·╃,這是一個良好的開始·╃,我們將會盡快與你取得聯絡╃↟·•◕。當然也歡迎您給我們寫信或是打電話·╃,讓我們聽到你的聲音!

PID派點互動

地 址▩╃↟:廣州市天河區金慧路88號11棟138單元(華南農業大學內)

電 話▩╃↟:+020- 3855 0205 3855 0745

傳 真▩╃↟:+020-3855 0745

E-mail▩╃↟:925774558@qq.com

填寫您的專案資訊

設計的靈感 + 用研的力量

標籤▩╃↟:派點互動|網頁設計|網站製作|廣州網站設計

今天·╃,是一篇實戰文╃↟·•◕。

講的是設計師透過靈感·╃,發現問題·╃,思考問題·╃,面臨挑戰·╃,和用研緊密配合·╃,解決問題·╃,達到目的的一個故事╃↟·•◕。

是一個完整而嚴謹的設計改版的故事╃↟·•◕。

Here we go.

2012年負責騰訊開放平臺應用中心產品·╃,第一次認真看這個產品·╃,總覺得哪兒不對▩╃↟:

派點互動|網頁設計|網站製作|廣州網站設計

0.jpg

以上頁面·╃,我看到了一個主要內容頁·╃,有banner區域·╃,導航在左邊·╃,中間是App內容·╃,右邊有排行榜╃↟·•◕。繼續往下看▩╃↟:

拉下頁面·╃,看到上圖·╃,開始有點迷糊╃↟·•◕。因為這個頁面往下的走勢·╃,沒有能給我一個理解╃↟·•◕。資訊和內容的佈局有點凌亂╃↟·•◕。導航與內容區的對應不齊·╃,讓我閱讀效率偏低╃↟·•◕。

1.jpg

再往下拉頁面·╃,就到了上圖╃↟·•◕。這個時候閱讀的無序開始增強·╃,我看到了各種資訊滿滿地堆積在頁面上╃↟·•◕。左邊導航結束後·╃,開始堆積內容·╃,且出現在我完全沒有預期的位置╃↟·•◕。中間的App內容模式一致·╃,沒有重點╃↟·•◕。廣告又讓格局再亂了一點╃↟·•◕。到了這裡·╃,我已經很難有效閱讀內容了╃↟·•◕。

很多設計師都知道·╃,使用者閱讀網頁·╃,是不會逐字逐句地讀╃↟·•◕。他們會掃描·╃,快速找到重點·╃,然後再根據自己的興趣和選擇進行閱讀╃↟·•◕。重點可以是一段加粗的文字·╃,一個圖片·╃,一個巧妙排版的文欄位落等等╃↟·•◕。

這個頁面沒有給我一個掃描的邏輯和樂趣╃↟·•◕。所以我的閱讀沒有舒適感╃↟·•◕。

我對這個網頁的閱讀順序是這樣的▩╃↟:

如上圖·╃,我開始是閱讀1處·╃,個人資訊;然後往下讀到2處·╃,導航;到了3處·╃,內容區·╃,因為App的展現形式非常一致·╃,沒有重點·╃,我就快速略過了3處;很快掃了下4處·╃,不感興趣;直接跳到5處·╃,看了排行榜一下·╃,很快就閱讀完了╃↟·•◕。

這個網頁的目的·╃,很簡單·╃,是希望使用者去探索·╃,點選App·╃,並安裝·╃,然後玩╃↟·•◕。但是現在的佈局並沒有讓我有這樣操作的衝動╃↟·•◕。肯定有問題╃↟·•◕。當然·╃,我只是一個使用者·╃,一個閱讀案例而已╃↟·•◕。後面的用研·╃,我們邀請了使用者來做眼動儀測試·╃,會看到更多的閱讀模式╃↟·•◕。

所以這裡·╃,設計師的靈感帶來一些重要問題▩╃↟:

以上只是部分問題·╃,但是簡單明瞭·╃,需要修改設計╃↟·•◕。解釋下我右上角的標記·╃,我認為這個網頁在內容的消耗上有問題(這裡是一個方法論·╃,主要闡述我的一個想法·╃,所有產品設計都是在內容的創造☁╃、消耗☁╃、傳播上的設計)╃↟·•◕。右下角是我認為這個網頁在設計上應該得到修改的點▩╃↟:使用者場景·╃,資訊架構·╃,互動設計·╃,視覺設計·╃,設計細節·╃,使用者情感╃↟·•◕。

設計師的觀察·╃,靈感·╃,和結論都出來了·╃,然後呢▩₪↟?

作為服務千萬級使用者的平臺產品·╃,光是靈感是沒有說服力的╃↟·•◕。在以上應用中心頁面中·╃,所有佈局·╃,內容排列·╃,都有很嚴謹的商業策略和資料壓力╃↟·•◕。任何盲目的修改·╃,都會有極大的風險╃↟·•◕。

怎麼證明自己的靈感▩₪↟?怎麼證明自己的判斷▩₪↟?

用研╃↟·•◕。

這次產品改版·╃,有兩次用研點很關鍵╃↟·•◕。

第一次是眼動儀測試與分析╃↟·•◕。我們請應用中心的使用者來進行眼動儀測試·╃,希望瞭解使用者的閱讀模式·╃,並印證我們之前的判斷╃↟·•◕。

1-1.jpg

如上圖·╃,我們把整個應用中心頁面分解為各個模組·╃,然後透過眼動儀來幫助我們觀察使用者的閱讀模式╃↟·•◕。

如上圖·╃,可以看出每個使用者閱讀的順序不一樣╃↟·•◕。但是透過分析·╃,我們發現雖然閱讀順序不一樣·╃,但是結果是一致的╃↟·•◕。使用者都像我之前閱讀那樣·╃,快速閱讀·╃,找不到重點·╃,忽略了App內容這個重點區塊·╃,對整個頁面佈局沒有清晰認知╃↟·•◕。

來看看結論▩╃↟:

1-2.jpg

部分結論如上圖▩╃↟:除了第一屏其他頁面曝光量少·╃,說明使用者對首屏後面的內容不感興趣;使用者的粗略瀏覽·╃,隨機無序點選·╃,使應用中心點選量低·╃,安裝轉化率低╃↟·•◕。

這裡再補充一下應用中心產品背景▩╃↟:

1·╃,應用中心這樣的產品需要的是高點選量和高安裝轉化率配合╃↟·•◕。

2·╃,高點選量需要引起使用者的興趣·╃,讓他們樂意去探索╃↟·•◕。

3·╃,高安裝轉化率需要讓使用者準確關注到他們感興趣的內容·╃,這樣才能保證使用者點選App後會安裝╃↟·•◕。

有了用研結論·╃,就有底氣了╃↟·•◕。各個合作方基於我們的判斷和用研結論·╃,同意開始改版╃↟·•◕。

我們的互動很就出了一個互動改動稿▩╃↟:

1-3.jpg

互動改動稿很簡單·╃,直接針對用研結論中的問題·╃,並嘗試解決╃↟·•◕。頂部導航讓資訊架構更清晰╃↟·•◕。每個內容模組也開始更規整╃↟·•◕。在和產品同事交流的過程中·╃,我們也把之前頁面中完全被淹沒的影視和讀書兩個區塊列入重點最佳化計劃(後面視覺稿可以看到細節)╃↟·•◕。

這個時候·╃,在細化設計前·╃,我們又做了第二次用研來再次確認設計師的靈感╃↟·•◕。方式是請使用者來測試我們的Demo·╃,結論很快出來了▩╃↟:

2.jpg

如以上兩個圖所示·╃,使用者的反饋很一致·╃,對改版後頁面模組的區分·╃,資訊架構的認知等我們關注的點·╃,都有非常正面的反饋╃↟·•◕。

接下來·╃,我們的視覺開始對這個新架構進行視覺設計·╃,力求內容第一·╃,展示清晰·╃,增強使用者對應用中心的認知╃↟·•◕。設計稿如下▩╃↟:

-2.jpg

第一屏簡單明瞭地給出整個頁面的結構╃↟·•◕。使用者看第一屏就能清晰知道·╃,頂部導航是全域性導航;往下是banner以及主推資訊展示區;再往下·╃,頁面開始分左右兩塊·╃,左邊是主內容區·╃,主要展示App內容·╃,右邊是排行榜╃↟·•◕。

使用者看到這個架構·╃,就能有預期·╃,這個頁面往下·╃,其實是在重複App內容區和排行榜的左右結構╃↟·•◕。認知非常簡單╃↟·•◕。

另外·╃,對App內容區·╃,我們把主推的App放大·╃,並加入社交元素和更多詳細的解釋╃↟·•◕。這樣的設計安排極大地提高了使用者對App的認知和興趣╃↟·•◕。(目的是提高點選率和安裝轉化率)

3.jpg

到了第二屏·╃,先看右邊·╃,使用者還是如預期地看到了各種排行榜;左邊內容區·╃,還是一個模組一個模組地展示內容╃↟·•◕。特別是在中間模組·╃,我們還為了使用者閱讀不疲憊·╃,用了豎版的排列方式·╃,讓閱讀體驗更有趣╃↟·•◕。

4.jpg

第三屏的重點是給影視和讀書一個特別的展示╃↟·•◕。首頁這裡·╃,我們不能把影視和讀書做太重·╃,因為這兩個特殊內容區塊還是整個頁面的一部分·╃,不能擁有喧賓奪主的華麗╃↟·•◕。但是我們給予了這兩個區塊略微不同的設計感·╃,這樣讓使用者更簡單認知到這兩個區塊的不同╃↟·•◕。

這樣改版的結果呢▩₪↟?

首先·╃,感官緯度·╃,你是不是認為更清楚·╃,更漂亮▩₪↟?

其次·╃,看資料▩╃↟:

5.jpg

如上圖資料結果▩╃↟:

1·╃,整體轉化率的增加·╃,與更合理的整體架構☁╃、更合理的區域性排列相關╃↟·•◕。

2·╃,影視和讀書的增長·╃,一方面是因為全域性架構更清楚·╃,使用者會往下瀏覽;一方面是因為略微調整的設計讓這兩個內容區塊有了差異化·╃,吸引了使用者的注意力╃↟·•◕。

3·╃,橫導航的類目頁點選增長·╃,符合我之前的判斷▩╃↟:豎導航點選率一般是從上往下逐步遞減的·╃,而橫導航效果會好一些·╃,如果配合適當的設計細節調整·╃,使用者的注意力可以被我們引到橫導航任何地方╃↟·•◕。

資料自己說話·╃,改版成功╃↟·•◕。

回首整個改版過程·╃,其實下圖中紅色部分用研的參與和貢獻非常突出▩╃↟:

666.jpg

我對這個設計案例的總結是▩╃↟:

未標題-1.jpg

我對這個設計案例的總結是▩╃↟:

未標題-3.jpg

如上圖·╃,重點是▩╃↟:

1·╃,全域性頁面的改動·╃,改區域性的時候·╃,牽一髮而動全身·╃,需要設計的全域性觀╃↟·•◕。

2·╃,堅持設計師的原則和方法論·╃,有信心·╃,不懼壓力╃↟·•◕。

3·╃,設計與使用者研究的緊密敏捷配合╃↟·•◕。

4·╃,設計產出的正結果·╃,可以提升所有人對設計師的信任╃↟·•◕。


返回列表
線上溝通

Are you interested in ?

感興趣嗎▩₪↟?

有關我們服務的更多資訊,請聯絡

135 7039 2915 李先生

與我們合作

與派點合作·╃,您將會得到更成熟的網站建設服務╃↟·•◕。我們以客戶至上·╃,同時也相互挑戰·╃,力求呈現最好的網站建設成果╃↟·•◕。

品牌顧問熱線(李生):

+135 7039 2915

TOP

QQ客服

免費電話

亚洲精品无码你懂的,日韩无码电影,啊太粗太硬了快拔出来啊,天堂网av