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

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

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

舊用戶(hù)界面：

新用戶(hù)界面：

關(guān)于點(diǎn)擊的問(wèn)題

當(dāng)我們?cè)诓榭从脩?hù)數(shù)據(jù)的時(shí)候，腦子里面所思考的最多的問(wèn)題是：為什么用戶(hù)在 icons 8 瀏覽的時(shí)候點(diǎn)擊的數(shù)量比在競(jìng)爭(zhēng)對(duì)手的網(wǎng)站里，要少好幾倍？

對(duì)于這一點(diǎn)，我所想到的原因大概有兩個(gè)：

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

這種解釋聽(tīng)起來(lái)太好了，說(shuō)實(shí)話(huà)連我自己也難以相信。

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

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

費(fèi)茨定律

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

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

解決方案

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

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

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

重新布局

真想在界面里面硬塞個(gè)功能，總會(huì)有地方放：

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

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

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

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

重設(shè)計(jì)

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

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

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

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

圖標(biāo)合集

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

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

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

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

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

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

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

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

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

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

△ 圖標(biāo)對(duì)話(huà)框

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

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

唯一的問(wèn)題在于，它看起來(lái)有點(diǎn)怪異。一旦打開(kāi)，就會(huì)占據(jù)整個(gè)屏幕。

繼續(xù)精煉

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

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

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

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

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

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

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

分組圖標(biāo)樣式

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

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

下載

為了尋找完美的下載控件，我們花費(fèi)了很長(zhǎng)的時(shí)間。因?yàn)槲覀儗?duì)于下載還是有一定要求的。

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

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

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

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

所以，最終搜索之后的對(duì)話(huà)框是這個(gè)樣子：

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

付費(fèi)購(gòu)買(mǎi)：

其他的東西

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

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

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

未來(lái)的改進(jìn)

我們目前正在做下一輪的可用性測(cè)試，并且專(zhuān)注于如下的問(wèn)題：

• 有些用戶(hù)找不到搜索欄。
• 有人沒(méi)有看到圖標(biāo)的分類(lèi)。
• 重新設(shè)計(jì)注冊(cè)、登錄和付費(fèi)頁(yè)面。

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