優設品牌號，旗下新品及內測邀請碼資格均在此號，關注推送掌握動態，有機會第一時間獲取。

　　封面作者：Gosia Herba

　　優設譯者：陳子木

　　「不！要！把！東！西！到！處！挪！」在改版之後做可用性測試的時候，會議室裏經常會迴盪着用戶這樣的喊聲。

　　當用戶習慣了一種設計的時候，他們大多不願意看到改版後自己不習慣的界面。今天的文章則是 icons8 網站重設計時，可用性測試、迭代和設計權衡背後的故事。

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

　　舊用戶界面：

　　新用戶界面：

　　關於點擊的問題

　　當我們在查看用戶數據的時候，腦子裏面所思考的最多的問題是：爲什麼用戶在 icons 8 瀏覽的時候點擊的數量比在競爭對手的網站裏，要少好幾倍？

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

　　用戶可以在我們的網站上更快找到想要的圖標。我們提供了一個動態的網站應用，用戶不用來回跳轉來獲取內容。

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

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

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

　　費茨定律

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

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

　　解決方案

　　解決方案很簡單，讓邏輯關聯的控件，在靠近的地方呈現。

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

　　調整色彩

　　增加矩形和圓形的邊框

　　調整邊距

　　疊加文字和其他元素

　　以多種格式下載

　　調整大小

　　提供類似的圖標

　　其他樣式中相同含義的圖標

　　生成HTML代碼

　　收藏

　　生成字體

　　重新佈局

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

　　彈出對話框

　　界面擴展

　　下拉菜單

　　漢堡菜單

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

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

　　長話短說，我們需要充分的展現，並且同時需要適當的隱藏。

　　重設計

　　這是經過幾次迭代之後所設計的版本：

　　Icons8 Web APP 重設計，第一版，使用Sketch設計完成

　　除了使用新的圖標，整個設計風格上都進行了調整。

　　新的視覺風格下還有了新的圖標，新的配色，配色和功能上都做了調整。

　　圖標合集

　　經過幾次可用性測試之後，我們發現了另外一個問題。當我們要求用戶選擇幾個不同的圖標創建合集的時候，他們選取了幾個不同風格的圖標來組成合集，過程中沒有一絲猶豫。

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

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

　　因此，我們將新的圖標合集按照橫向排布起來，便於對比。

　　另外一方面，基於用戶的習慣，我們打算也讓圖標以原始尺寸來顯示。

　　圖標大的大，小的小。

　　單純的這麼一個決策，就使得網站需要進行重設計，並且重新編寫相應的代碼。

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

　　圖標細節

　　這是展示圖標細節的對話框。

　　圖標對話框

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

　　它還展示了圖標的全部效果

　　它展現了各種不同的設計風格

　　它呈現了類似的圖標設計

　　它對控件進行分組排布，並保留了足夠的留白

　　唯一的問題在於，它看起來有點怪異。一旦打開，就會佔據整個屏幕。

　　繼續精煉

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

　　這一環節的突破性進展源自於可用性測試的一個參與者。她提出了一個重要的建議，那就是大家確實需要不同風格不同樣式的圖標的，但是並不是在同一個界面當中，同時推薦和呈現。

　　如果在首頁上搜索，就會出現所有樣式，全部風格的圖標。

　　在列表中呈現全部的樣式。

　　如果選擇單一樣式，那麼屏幕上會呈現所有類似的圖標：

　　選擇單一樣式，我們會在列表中呈現類似的圖標。

　　在這一的策略之下，圖標的搜索和呈現就更加富有條理了，同時，對話框的尺寸也更小了，更加節省空間了。

　　分組圖標樣式

　　當我們創建網站的時候，最初圖標只有4種不同的樣式，但是現在已經有十幾個不同的分類了。最糟糕的地方在於，圖標的名稱和視覺風格並不一定一致，也不一定清晰。誰知道「黃昏」是怎樣的一種風格呢？

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

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

　　每次下載圖標的時候，它不能強制要求你跳轉它不能在下載的時候，彈出什麼東西佔滿屏幕

　　我們之前的下載功能其實已經做的不錯了，並且通過了現在的可用性測試，現在我們主要是針對這個功能進行美化。

　　當然，主要的問題在於，需要兼容如此之多的下載選項。

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

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

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

　　付費購買：

　　其他的東西

　　當然，我們最終還是做了一些別的修改：

　　刪除了頂部菜單

　　重新設計了用戶賬戶菜單

　　創建了個人資料圖片

　　在首頁添加了樣式預覽

　　此外，性能的優化也在這次改版範圍內。這可能是我們第一次在 WebPagetest 上 獲得 AAAAA 評級。

　　未來的改進

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

　　有些用戶找不到搜索欄。

　　有人沒有看到圖標的分類。

　　重新設計註冊、登錄和付費頁面。

　　原文作者：icons8

　　原文鏈接：http://t.cn/EAG9yV5