恭喜你成為UI中國推薦設計師 (詳情)
//百度統計 20220402 uicn

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題后@管理員能讓我們及時了解您的意見

提交需求

賽事與廣告咨詢合作,請填寫需求表單,我們會在第一時間與您聯系!

0/20
0/200

設計大賽

  • 設計大賽
  • 發布廣告
  • 發布招聘
  • 其它需求

提交完成
感謝您對UI中國的支持和信賴!
規劃視覺動線,拯救糟糕的體驗設計
50.7°
2023-10-26 原創文章 經驗/觀點 舉報 11352 32 134 1

我們平時在大廠的項目總結和一些作品集案例中,會經??匆姾鸵曈X動線有關的講解和說明,雖然大家可能對它有個模糊的概念,但并不知道具體怎么應用和分析,所以今天這篇干貨,就是圍繞視覺動線進行具體的解釋和分享。


視覺動線這個詞可以分解成 “視覺”·“動線” 兩個部分,視覺就是我們觀看的圖形內容,而動線則主要是建筑和室內相關行業的術語,指人在空間中移動的路線、軌跡。

比如住房設計中的走廊過道的預留,餐廳、展館中的路線規劃和引導等,都是空間中的動線設計內容。

優秀的動線設計可以讓處于該空間的人獲得良好的行動體驗,比如大家都逛過的宜家,之所以購物體驗好,很大一部分原因就是它的動線設計,通過規劃一條蜿蜒的單一的路線,讓顧客體驗宜家的所有商品和主題區域。

同理,目前新商場越來越多采用中空式的設計,使用兩側環形回廊,也是因為動線設計的需要,顧客直接沿著走廊逛,能獲得更佳的購物體驗。所以商鋪堆在一起路線阡陌交錯的老式百貨商場逐漸被顧客拋棄,不是倒閉就要重新改造。

動線的設計對人的體驗有非常大的影響,同理,視覺的動線也一樣需要經過設計,也會對用戶的體驗產生非常大的影響。

講到視覺動線,就要提人的視覺特點。人眼雖然可以接受大量的視覺信息,但是我們的意識、注意力,一般只能注意到這些視覺信息的某個特定的區域、對象、點,所以我們需要通過移動視覺的中心來完成對信息的獲取和識別,而視覺中心的移動軌跡,就叫視覺動線。

但這個過程并不是隨機的,而是會遵循一定的特征和規律。比如現代報紙設計之父 Edmund C. Arnold 在長期的排版經歷中,認為閱讀是應該遵循某種原則、習慣進行的,比如看書閱讀就是從左到右從上到下(不同國家地區可能不同)。并且設計了一個四象限圖例來解釋視覺的關注順序。

簡單解釋,就是一個平面中,左上角是視覺的優先關注區域和起點,到右下角結束。左下角和右上角都是相對弱勢的關注區域,但是右上角關注度更低一點。這個模式主要應用在平面的版式中,相信大家看過不少類似的排版方案。

但是,視覺的關注模式并不是僅僅只有這一種,還有尼爾森的《眼睛軌跡的研究》中,通過眼動儀記錄視覺熱區,發現人們會不由自主使用F字母形狀的模式來閱讀網頁。

而在非搜索引擎型的其它網站中,還能得到Z字型的瀏覽習慣。

這些都是對人類視覺原生習慣、行為的研究,但是,這些結論并不是完美的、通用的、絕對的!如果這些理論能作為基本定理使用,那就沒有這篇分享存在的必要,大家隨便看點材料就行了。

比如阿拉伯語系,它們的閱讀是從右往左的,也就是上面提到的這幾種習慣得做個鏡像反轉。

同時,如果學過繪畫或攝影的同學,應該也會發現構圖教學中包含大量引導觀眾視覺的說明和案例,不同構圖的重心所在位置和瀏覽順序是完全不同的,比如根據黃金螺旋的重心,或者黃金三分法的左右中心線或四個交點重心等等……

再深入研究不同設計領域的視覺和瀏覽模式,你會發現并不存在統一的理論,每個理論僅僅都只是提供一個可能性或建議。

這要說明,人的視覺習慣是后天培養的,且基于不同的場景可以培養出不同的習慣,而這些習慣大多不是固定的。因為人是很容易受到暗示而被劫持注意力的生物,所以創作者可以根據自己的需要去引導用戶的視覺和關注順序,這為我們的創作提供了大量的可能性,也是設計的挑戰和魅力。

在UI設計中,對動線的應用并不是學習相關的理論然后照搬進設計里,而是理解這些概念以后,結合使用場景以及用戶的視覺習慣,有意識的,有目的性的去創建產品的視覺動線。


在界面設計中,視覺的動線本質上就是信息設計的一部分,通過對信息的規劃來實現對視覺動線管理。

而針對視覺動線的管理中,可以分為兩個層級,模塊視覺動線和內容視覺動線。因為這是兩個不同的層級,也是用戶查看一個頁面識別、查詢信息的認知順序。

比如我們看Adobe PhotoShop的界面,我們會先識別模塊是什么,然后再關注下方的信息和操作內容。

而內容視覺動線則是模塊內具體內容信息的瀏覽路徑,例如字段、選項、數據、按鈕等細節元素。

之所以這么拆,原因就是UI的界面不是書籍、雜志,很多分享拿 F 形或 Z 形的動線來套UI界面是不合理的。用戶觀看頁面并不是根據內容依次往下看,更多是根據模塊作為視覺的著陸點。如果一個模塊本身內容不實用戶想要的,那么用戶就會轉移到別的模塊去,再查看模塊內的信息。

比如下面的餓了么的首頁,我們第一次打開的話,肯定第一步注意到頂部的 Banner,但我們幾乎不用看字就能知道這是個廣告模塊,多數人肯定選擇直接忽視掉。除非匆匆一瞥中里面有文案是吸引你的,你會再去認真看里面的信息。

接著實現就會被下方紅包的模塊吸引,部分用戶也會發現這是個廣告模塊直接略過,另一部分用戶可能會被吸引查看具體的優惠信息。

第三步才會開始查看頂部的快速入口模塊,如果看了幾個不知道有什么用也不想點的話,那么才上滑查看底部的商家列表。

移動端中,正常的閱讀順序肯定是從上到下的,但顯然在畫面中增加了這種強視覺的元素時,我們的視覺是會被它們吸引的,于是視覺動線就并不是根據常規的順序行進。

這種體驗好嘛?肯定不好。但是大廠的專業設計師們會不明白這個道理嘛?當然是主動這么去做的,因為運營的需要,部分模塊對用戶權重很高很重要,但它們是用戶主動要去操作和使用的模塊,往往是固定不變的,不能產生額外價值。而運營內容則多數是侵入式的讓用戶被動接受,但又不能放在符合邏輯最重要的地方,于是就通過視覺的手段來進行強引導,修改用戶的視覺動線來實現自己的商業目標。

這在移動端是非常普遍的,大家可以多打開一些國內的應用看看,就會發現你的視覺動線往往并不是按常理推進的,總是會被吸引到一些別的東西上面,這就是模塊視覺動線上的設計結果。

所以在界面設計的前期規劃中,就需要通過原型的方式去放置模塊,除了符合上下、左右的基本順序外,可以通過視覺的對比來進行 “插隊”,完成模塊視覺動線的管理。

即使在B端的設計中也適用,我們想強行讓用戶關注到的模塊,就用對比突出它。

有了第一級模塊的劃分,然后才是模塊內部的視覺動線梳理。同理,一個大的模塊如果比較復雜,就可能包含子模塊,我們就要進一步先識別子模塊,再進入具體的內容。

比如餓了么的店鋪卡片,可以拆分成左上的店鋪圖片,左下的評價,右上的店鋪名,右中的店鋪信息,右下的店內商品。主要的視覺動線大概率是這樣的:

到這里是不是發現開始難受起來了?不僅僅是難受,我們也沒辦法像上面一樣用業務需要來解釋這個動線的有效性、和理性,這是一個非常非常重要的設計判斷標準。

內容視覺動線同理,同樣可以歸納視覺動線的順序和軌跡。比如我們之前寫的騰訊云產品面板,就是視覺的動線凌亂而又缺乏邏輯性的代表,所以我們對它改版的核心目標就是調整視覺的動線,讓產品選項的查找更容易。

如果我們設計出來的界面、模塊內容看起來很別扭,往往就是視覺動線的混亂引起的??梢允褂蒙厦娴姆椒▽泳€畫出來,往往就可以發現問題出在哪里,并進行對應的優化。


結尾

更進一步的案例和演示我會在之后分享,希望你們看完以后可以認真思考自己項目中的動線是怎么安排的,尤其是想在作品集中添加這種說明就一定是要經過自己規劃后的動線軌跡,而不是套個 F 或者 Z 形模式強行解釋。


我們在下一篇干貨中再賤!


Powered by Froala Editor

更新:2023-10-26

收藏

32人已收藏

超人的電話亭

酸梅干超人的電話亭

  • 46

    作品

  • 1074

    粉絲

  • 0

    關注

  • 運營設計應該怎么卷?
  • 動效設計學習完整篇|順滑解決各種動效難題
  • 詳細的交互文檔應該怎么寫?
  • UI必看 | 組件應用 - 列表卡片設計方式詳解

    猜你喜歡

      2023-10-26 原創文章 經驗/觀點 舉報 11352 32 134 1

      規劃視覺動線,拯救糟糕的體驗設計

      50.7°

      你確定要舉報規劃視覺動線,拯救糟糕的體驗設計?

      如果查出惡意舉報,十天內禁止提交任何舉報申請。

      0/200

      上傳證據: 超過10M的附件請使用網盤地址

      點擊上傳附件

      對誰可見:

      全部設計師
      • 全部設計師
      • 推薦設計師和認證設計師

      您確認要推薦?

      該作品發布時間:2023年10月26日

      評分

      完整度

      啟發性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內

      0/200

      134
      32
      1

      賬號或密碼錯誤,請重新輸入

      賬號或密碼錯誤,請重新輸入

      登錄

      手機號

      發送驗證碼 120s 驗證碼錯誤

      登錄
      第三方賬號登錄
      亚洲Av无码专区国产乱码在线观看,无码国内精品久久人妻,无码AV日韩免费一区二区三区