<listing id="rn17l"></listing>
<var id="rn17l"><dl id="rn17l"><progress id="rn17l"></progress></dl></var>
<var id="rn17l"></var>
<var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var>
<cite id="rn17l"></cite>
<menuitem id="rn17l"></menuitem>
<menuitem id="rn17l"></menuitem>
<var id="rn17l"><dl id="rn17l"></dl></var> <var id="rn17l"><strike id="rn17l"></strike></var>
<var id="rn17l"></var><var id="rn17l"></var>
品牌咨詢電話 4001-607-668

不!要!把!東!西!到!處!挪!」在改版之后做可用性測試的時候,會議室里經常會回蕩著用戶這樣的喊聲。

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

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

舊用戶界面:

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

新用戶界面:

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

關于點擊的問題

當我們在查看用戶數據的時候,腦子里面所思考的最多的問題是:為什么用戶在 icons 8 瀏覽的時候點擊的數量比在競爭對手的網站里,要少好幾倍?

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

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

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

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

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

費茨定律

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

解決方案

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

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

重新布局

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

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

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

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

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

重設計

這是經過幾次迭代之后所設計的版本:

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

圖標合集

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

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

圖標大的大,小的小。

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

圖標細節

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

△ 圖標對話框

除了足夠好看以外,它還有很多功能:

  • 它還展示了圖標的全部效果
  • 它展現了各種不同的設計風格
  • 它呈現了類似的圖標設計
  • 它對控件進行分組排布,并保留了足夠的留白

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

繼續精煉

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

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

如果選擇單一樣式,那么屏幕上會呈現所有類似的圖標:

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

分組圖標樣式

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

下載

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

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

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

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

付費購買:

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

其他的東西

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

  • 刪除了頂部菜單
  • 重新設計了用戶賬戶菜單
  • 創建了個人資料圖片
  • 在首頁添加了樣式預覽

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

為了更好的搜索和下載體驗,ICONS8 重新設計了網站

現在就與思拓客服交流

4001-607-668

您也可進行在線咨詢或預約項目顧問

无码少妇一区二区三区免费