2019年網頁及UI設計趨勢（三）
每年各大設計部落格和知名網站都會預測新一年的網頁和UI設計趨勢，既有相同之處，也有各家的獨到見解，甚至還有相互衝突的地方。在接下來的系列文章裡，將會為大家彙編（譯）一些比較具有前瞻性的趨勢文章供參考。
前兩期我們選取了幾大知名設計部落格網站對2019年的網頁設計趨勢歸總。本期我們換一下思路，來看看Designmodo網站對滑鼠互動這單一趨勢的細緻研究。
系列文章
- 2019年網頁及UI設計趨勢（一）
- 2019年網頁及UI設計趨勢（二）
- 2019年網頁及UI設計趨勢（三）
- 2019年網頁及UI設計趨勢（四）
- 2019年網頁及UI設計趨勢（五）
- 2019年網頁及UI設計趨勢（六）
- 2019年網頁及UI設計趨勢（七）
- 2019年網頁及UI設計趨勢（八）
- 2019年網頁及UI設計趨勢（九）
- 2019年網頁及UI設計趨勢（十）
小趨勢：滑鼠互動
Tiny Trend: Mouse Interactions
微互動是2017年的重要趨勢之一。和比特幣一樣是辦公室裡面經常討論的話題。我們碰巧見證了開發人員希望將使用者體驗變得更好的意願及渴望。慢慢地，我們開始步入智慧和可理解的介面時代了。
以良好的使用者體驗為核心，一組運用得當的微互動確實可以帶來奇蹟。它們使網站看上去更友好，更人性化，更具吸引力及趣味性，使介面直觀並且愉快。
微互動的型別有不同種，但是真正有突出表現的是基於滑鼠的互動。儘管觸控式螢幕裝置大量普及，但是大多數使用者無法想象沒有滑鼠的生活。一個典型的例子就是拖拽技術，比如使用在Duroc網站上英雄區域的技術。這裡，如果你想要瀏覽案例，你需要在專案網格中拖拽。這種想法極具吸引力，但是又有一點微不足道。
Duroc
然而，解決方案本身並沒有耗盡它的潛能。它既不會被淘汰也不會過時。看看下面的Ben Mingo網站。
Ben Mingo
首頁是一個伴有滑鼠互動的單一螢幕滑桿。想要滑動滑桿，你需要按住滑鼠按鈕。同樣的動作喚起了一個平滑圖形的變形出現。和之前的例子相比，它更現代更復雜。
讓我們將滑鼠互動型別分為兩組：
- 第一組涉及的滑鼠互動是在網頁應用和使用者之間搭起了一座橋樑，比如 Walking Men 網站。這裡，滑鼠游標由一個半透明的放大的圓圈所替代，指出使用者介面上重要的元素，比如選單或者按鈕。
- 第二組用來創造那些類似 Virtual Self 網站上自娛自樂的效果，滑鼠游標除了增加焦點亮度別無他用。
第一組對我們來說意義重大。每年網站都會變得越來越複雜和精緻。如果沒有經過深思熟慮的微觀互動，就很難做到以下幾點：跟上進度，達到完全理解使用者行為的預期，使重要的資訊更清晰，使導航更易於訪問，以及讓體驗更加愉快。
從微小的難以察覺得到的效果到巨大的引人注目的解決方案，開發人員正在深入探索這一領域。這也並不奇怪，每個人都試圖避免頁面完全靜態化，而滑鼠互動恰恰就是一種優雅的解決方案。
Walking Men
Virtual Self
與娛樂元素進行互動
與娛樂元素的互動通常伴隨著一個角色，它們可以用來：
- 豐富使用者體驗
- 提高品牌識別度
- 放置焦點
- 培養創造力
- 傳遞資訊
具有代表性的例子是Kappow網站。這裡，一個看上去巨大的字母“K”影響卻很小。但是當你的游標放到上面的時候你會看到奇蹟發生了。儘管只是一個2016年早期非常流行的引人注目的氣泡軌跡效果，但是還是非常抓人眼球。
Kappow
這種方法同樣適用於Socialclub網站，開發團隊選擇經過時間驗證的方法來採納該解決方案。
在這裡，網站團隊將英雄內容模組轉化為畫板，邀請線上使用者用數字筆在上面隨意塗畫。這裡甚至還有一對眼睛形狀的起始點。雖然這種用法並不是什麼新鮮事了，但是它極具相關性和吸引力。
Socialclub
Wonderland Industry開發的Veolia and Shuttle網站是一個典型的重度依賴滑鼠互動的專案。它們代表了2個重要的方向：故事講述和遊戲。
The resourcing machine網站是一個全插畫形的網站，邀請使用者沉迷於豐富多彩的故事體驗之中。在這裡，滑鼠互動對於理念的存在至關重要：它們引導使用者，提供資訊並且作為交流的工具。
Veolia
Wonderland Industry開發的Shuttle網站提供了一個遊戲體驗，用滑鼠開啟卡片來發現隱藏的圖片。
Shuttle by Wonderland Industry
與最前沿的因素進行互動
如果你對原始解決方案和新式解決方案感興趣，那麼你必須與最前沿的因素進行互動。找到一流的WebGL體驗，滑鼠位於動作的核心處。來看一下Ibiza Music Artists和La shop studios兩個網站。
這些專案的歡迎頁面都使用了由高階工具製作的複雜場景，比如Three.js.
Ibiza Music Artists背後的團隊通過使用混合現實的背景來給使用者留下深刻的印象。它呈現了一個水面，你可以移動游標進行飛濺動作。這個小妙招製造了美妙的印象。
La shop studios與之相反，更喜歡人工環境，而不是人造環境。它具有以琴絃為靈感的核心部件，為使用者提供了不拘一格的使用者體驗。
Ibiza Music Artists
La shop studios
和前面的例子不同，Folk Strategies看上去並不高科技，但是它使用滑鼠的方式卻是一流的。簡單，優雅，巧妙。在這裡，游標使資訊區域最大化或最小化。
Folk Strategies
最後但同樣重要的是，互動應該是明確的，顯而易見的以及在某些情況下甚至是“響亮的”。來看看 Anagram Paris 這個網站。該網站非常棒：它充滿了高度互動的動態效果，但是卻缺乏明確的指引。如果頁面載入的時候讓你想到“不要再這樣了。。。”，那麼很可能你將不會跟著進度條關注著螢幕，從而將錯過頁面底部很小的一句題詞“嘿！頁面載入以後，你將可以嘗試拖動網站。。。。。。” 簡單地說就是使用者可能會跑了。因此，要想有預見性的讓使用者沿著網站移動，你需要使用滾輪或者滾動條，否則，你將會讓使用者失去看到讓網站如此特別的奇妙效果的機會。
Anagram Paris
結論
基於滑鼠的互動有各種解釋。它們服務於不同的用途，追求不同的目標。無論它們是用於娛樂還是引導使用者，它們對於良好的體驗和對網頁專案的未來發展都至關重要。
你覺得滑鼠互動是一種樂趣還是煩惱？歡迎討論。
（編譯完）
英文原文： 地址
原文作者： Nataly Birch
以上譯文僅代表原作者觀點。如需轉載請遵循 CC版權協議 正確標明出處。
