為了更好的搜索和下載體驗，ICONS8 重新設(shè)計了網(wǎng)站

「不！要！把！東！西！到！處！挪！」在改版之后做可用性測試的時候，會議室里經(jīng)常會回蕩著用戶這樣的喊聲。

當(dāng)用戶習(xí)慣了一種設(shè)計的時候，他們大多不愿意看到改版后自己不習(xí)慣的界面。今天的文章則是 icons8 網(wǎng)站重設(shè)計時，可用性測試、迭代和設(shè)計權(quán)衡背后的故事。

對此，你也可以在 Product Hunt 上參與討論，也許你的意見將會讓正在迭代的測試版，更加優(yōu)秀。

舊用戶界面：

新用戶界面：

關(guān)于點擊的問題

當(dāng)我們在查看用戶數(shù)據(jù)的時候，腦子里面所思考的最多的問題是：為什么用戶在 icons 8 瀏覽的時候點擊的數(shù)量比在競爭對手的網(wǎng)站里，要少好幾倍？

對于這一點，我所想到的原因大概有兩個：

• 用戶可以在我們的網(wǎng)站上更快找到想要的圖標(biāo)。
• 我們提供了一個動態(tài)的網(wǎng)站應(yīng)用，用戶不用來回跳轉(zhuǎn)來獲取內(nèi)容。

這種解釋聽起來太好了，說實話連我自己也難以相信。

首先，我依然還是將用戶的瀏覽行為和數(shù)據(jù)提交給 Google Analytics 做分析。同時，我的直覺迫使我繼續(xù)尋找，我相信是存在一個不太令人滿意的原因，導(dǎo)致了這樣的結(jié)果。

這個想法來自于我在 Usethics 的朋友，他們用一個基本上設(shè)計師大都知道的概念來解釋這件事情：費茨定律。

費茨定律

費茨定律原本是針對桌面端人機(jī)交互所總結(jié)的，它指的是「任意一點移動到目標(biāo)中心位置所需時間與該點到目標(biāo)的距離和大小有關(guān)，距離越大時間越長，目標(biāo)越大時間越短」，相應(yīng)的它也可以用公式表達(dá)出來：T = a + b log2(D/W+1) 。更通俗地講，就是UI界面中按鈕的大小以及和光標(biāo)之間的距離會影響到交互所需要的時間。

更通俗的講，越是靠近的兩個控件，用戶越容易使用光標(biāo)移動過去。在我們的網(wǎng)站中，用戶有時候需要從一個控件移動到另外一個控件上，而如果兩者距離太遠(yuǎn)，會成為一種相對繁重的認(rèn)知壓力，用戶在這種局面下會主動離開。

解決方案

解決方案很簡單，讓邏輯關(guān)聯(lián)的控件，在靠近的地方呈現(xiàn)。

而 Google圖片在很久之前就這么做了。問題是在于，Google 圖片所需要做的事情相對簡單，但是 Icons8 所需要提供的功能就多樣很多了：

• 調(diào)整色彩
• 增加矩形和圓形的邊框
• 調(diào)整邊距
• 疊加文字和其他元素
• 以多種格式下載
• 調(diào)整大小
• 提供類似的圖標(biāo)
• 其他樣式中相同含義的圖標(biāo)
• 生成HTML代碼
• 收藏
• 生成字體

重新布局

真想在界面里面硬塞個功能，總會有地方放：

• 彈出對話框
• 界面擴(kuò)展
• 下拉菜單
• 漢堡菜單

問題是在于，用戶并不期望拓展功能的時候，就這么硬塞進(jìn)來，同樣的，他們也不會去尋求這樣的功能。正如同信息覓食理論中所說的，用戶從來都不會去主動尋找「了解更多」這個按鈕。

我們曾經(jīng)嘗試去隱藏一些功能，但是在進(jìn)行可用性研究的時候，發(fā)現(xiàn)這么做太痛苦了，而且好像大家都在力圖解決這個問題。盡管只是點擊兩下就可以生成字體，但是用戶似乎在這個事情上耗費了全身的力氣。

長話短說，我們需要充分的展現(xiàn)，并且同時需要適當(dāng)?shù)碾[藏。

重設(shè)計

這是經(jīng)過幾次迭代之后所設(shè)計的版本：

Icons8 Web APP 重設(shè)計，第一版，使用Sketch設(shè)計完成

除了使用新的圖標(biāo)，整個設(shè)計風(fēng)格上都進(jìn)行了調(diào)整。

新的視覺風(fēng)格下還有了新的圖標(biāo)，新的配色，配色和功能上都做了調(diào)整。

圖標(biāo)合集

經(jīng)過幾次可用性測試之后，我們發(fā)現(xiàn)了另外一個問題。當(dāng)我們要求用戶選擇幾個不同的圖標(biāo)創(chuàng)建合集的時候，他們選取了幾個不同風(fēng)格的圖標(biāo)來組成合集，過程中沒有一絲猶豫。

他們喜歡這樣的結(jié)果。相比之下，我們則感到很震驚。這就像用不同的字體來拼湊一個單詞，他們根本不在意一致性，至少是在這個環(huán)節(jié)不在意。這一點讓我們開始重新思考如何構(gòu)建合集。

舊有的網(wǎng)站當(dāng)中，我們會將不同風(fēng)格的圖標(biāo)以相同的大小擺在一起，讓它們看起來很相似。此外，每個合集都會被拆分成很多行，相互之間的對比并不明顯。

因此，我們將新的圖標(biāo)合集按照橫向排布起來，便于對比。

另外一方面，基于用戶的習(xí)慣，我們打算也讓圖標(biāo)以原始尺寸來顯示。

圖標(biāo)大的大，小的小。

單純的這么一個決策，就使得網(wǎng)站需要進(jìn)行重設(shè)計，并且重新編寫相應(yīng)的代碼。

讓圖標(biāo)水平排布的另外一個結(jié)果，就是要重新設(shè)計列表。同時，讓用戶可以拖動列表中任何一個圖標(biāo)，以重新排布。

圖標(biāo)細(xì)節(jié)

這是展示圖標(biāo)細(xì)節(jié)的對話框。

△ 圖標(biāo)對話框

除了足夠好看以外，它還有很多功能：

• 它還展示了圖標(biāo)的全部效果
• 它展現(xiàn)了各種不同的設(shè)計風(fēng)格
• 它呈現(xiàn)了類似的圖標(biāo)設(shè)計
• 它對控件進(jìn)行分組排布，并保留了足夠的留白

唯一的問題在于，它看起來有點怪異。一旦打開，就會占據(jù)整個屏幕。

繼續(xù)精煉

接下來，我們針對這個版本進(jìn)行了精簡和壓縮，去掉了漂亮的留白，并且縮小了字體的大小，減少多余的特效。不過對話框的占地面積依然很大。

這一環(huán)節(jié)的突破性進(jìn)展源自于可用性測試的一個參與者。她提出了一個重要的建議，那就是大家確實需要不同風(fēng)格不同樣式的圖標(biāo)，但是并不是在同一個界面當(dāng)中，同時推薦和呈現(xiàn)。

如果在首頁上搜索，就會出現(xiàn)所有樣式，全部風(fēng)格的圖標(biāo)。

△ 在列表中呈現(xiàn)全部的樣式

如果選擇單一樣式，那么屏幕上會呈現(xiàn)所有類似的圖標(biāo)：

△ 選擇單一樣式，我們會在列表中呈現(xiàn)類似的圖標(biāo)

在這一的策略之下，圖標(biāo)的搜索和呈現(xiàn)就更加富有條理了，同時，對話框的尺寸也更小了，更加節(jié)省空間了。

分組圖標(biāo)樣式

當(dāng)我們創(chuàng)建網(wǎng)站的時候，最初圖標(biāo)只有4種不同的樣式，但是現(xiàn)在已經(jīng)有十幾個不同的分類了。最糟糕的地方在于，圖標(biāo)的名稱和視覺風(fēng)格并不一定一致，也不一定清晰。誰知道「黃昏」是怎樣的一種風(fēng)格呢？

重新設(shè)計了樣式列表，最新的設(shè)計在右邊。

下載

為了尋找完美的下載控件，我們花費了很長的時間。因為我們對于下載還是有一定要求的。

• 每次下載圖標(biāo)的時候，它不能強(qiáng)制要求你跳轉(zhuǎn)
• 它不能在下載的時候，彈出什么東西占滿屏幕

我們之前的下載功能其實已經(jīng)做的不錯了，并且通過了現(xiàn)在的可用性測試，現(xiàn)在我們主要是針對這個功能進(jìn)行美化。

當(dāng)然，主要的問題在于，需要兼容如此之多的下載選項。

在下載這個功能上，我們放棄了創(chuàng)建一個單獨的對話框。

所以，最終搜索之后的對話框是這個樣子：

最終迭代完成之后的樣子：

付費購買：

其他的東西

當(dāng)然，我們最終還是做了一些別的修改：

• 刪除了頂部菜單
• 重新設(shè)計了用戶賬戶菜單
• 創(chuàng)建了個人資料圖片
• 在首頁添加了樣式預(yù)覽

此外，性能的優(yōu)化也在這次改版范圍內(nèi)。這可能是我們第一次在 WebPagetest 上獲得 AAAAA 評級。

未來的改進(jìn)

我們目前正在做下一輪的可用性測試，并且專注于如下的問題：

• 有些用戶找不到搜索欄。
• 有人沒有看到圖標(biāo)的分類。
• 重新設(shè)計注冊、登錄和付費頁面。

戳這里，你也可以了解一下改進(jìn)中的icons8 2.0 的網(wǎng)站~