網站設計規律：盤點UX視覺設計原則 - 香港網頁集團

PS. 界面設計中，元素的比例一般不超過3種不同尺寸，否則會打破界面層級的平衡，反而無法突出界面重要內容。

UX視覺設計原則二：視覺 ... Skiptocontent 主頁 >Blog >網頁管理 >網站設計規律：盤點UX視覺設計原則 對用戶來說，當他們使用網站的時候，很容易就能識別網站用戶體驗是否優秀，但對網站設計人員來說，要設計符合用戶體驗的網站，需要面對很多複雜的問題，而這些問題都需要花費大量時間和精力去完成。

今天，香港網頁設計集團將分享「盤點UX視覺設計原則」，希望能夠幫助企業設計出令人滿意的UX設計。

盤點UX視覺設計原則 UX視覺設計原則一：比例 比例原則，指的使用相對大小表示構圖的重要性和等級。

界面中的元素按照一定比例進行擺放，能給網頁設計中的版式創造出多樣化，還能在構建視覺層次結構，最大限度強調設計中最重要的內容。

網站設計規律 ▲medium的界面設計中熱門文章版塊佔據非常大的比例，能更好地引導用戶關注可能更有趣的文章。

PS.界面設計中，元素的比例一般不超過3種不同尺寸，否則會打破界面層級的平衡，反而無法突出界面重要內容。

UX視覺設計原則二：視覺層次 視覺層次原則，指透過將設計元素按照一定的順序在頁面上排列，以做好用戶的視覺引導。

視覺層次結構會嚴重影響用戶對產品的體驗。

要創建清晰的視覺層次結構，可選用某種信號的2-3種變化，以突出頁面中信息體系結構中最高級別的內容。

網站設計規律 ▲Uber的APP設計視覺層級結構非常清晰，屏幕在地圖和輸入欄之間分為兩半，讓人們認為這些組件都是非常重要。

視覺層次可通過比例、值、顏色、間距、位置等各種信號變化來實現。

UX視覺設計原則三：平衡 平衡原則，指通過屏幕中間的虛軸(可垂直，也可水平)，按照一定比例在兩側均等分佈(不一定對稱)，使界面達到平衡的效果。

就像平衡重量一樣，在軸的兩側不僅僅只關注元素的數量，設計元素所佔用的面積也非常重要，如果網頁設計兩側的元素所佔用的面積各不相同，就會讓設計顯得失衡。

因此，你需要在視覺上建立虛軸後，考慮界面布局的參考點，以了解視覺上當前的平衡狀態。

另外，界面平衡不僅僅只有對稱一種，還可以是： ·不對稱：元素相對於中心軸不對稱分佈 ·徑向：元素從中心的公共點沿圓形方向輻射出去 如何選用平衡類型，這主要取決於你要傳達的界面和內容風格，如：不對稱往往帶來一種動態效果;對稱則是比較安靜的效果;而徑向則是將用戶的眼睛引向構圖的中心。

網站設計規律 ▲Nike的頁面設計就是使用「不對稱」的平衡原則，展現出於Nike品牌風格一致的活力與運動感。

如果你在頁面的視覺中心向繪製一條垂直軸，會發現兩側的元素數量大約相同，同時元素所佔據的位置也非常相似，從容達到了平衡的效果。

UX視覺設計原則四：對比 對比原則：在界面設計上並列不同元素，以傳達這些元素不同的事實。

換句話說，對比就是透過兩個元素的明顯差異，強調它們是不同的。

一般對比原則會透過顏色來應用，例如網頁設計中的文本顏色通常都會與背景顏色有較大的差異，從而增加界面信息的易讀性。

網站設計規律 ▲iOS上的提醒應用多會用紅色表示刪除，因為相較於其他顏色，紅色更加明亮，而且帶有警告、危險等信號。

除了透過顏色突出元素間的對比度，大小、紋理、陰影等都能很好地突出兩者間的不同。

UX視覺設計原則五：格式塔原理 格式塔原理，指的是通過下意識地將各個部分安排到一個創建整體的有組織系統中，而不是將它們解釋為一系列不同的元素。

換句話說，格式塔原理抓住的是人類傾向於感知整體的能力，而不是個體元素的趨勢。

格式塔原理的常見形式，包括：相似性、連續性、閉合性、接近性、圖形/背景，以及對稱性和順序。

網站設計規律 ▲Uber註冊表單頁面設計就是使用格式塔原理的鄰近性原則，字段標籤靠近相應的文本框，從而使用戶更容易理解文本框該輸入哪些信息。

UX視覺設計原則為何這麼重要?因為它除了能讓網頁設計看起來更加美觀，幫助用戶更好地理解和利用，最重要是它還能增加界面的可用性，提供界面任務成功率和用戶參與度;激發用戶的情感和喜悅，從而導致界面的用戶體驗升高;以及加強用戶對品牌的認知度，建立用戶對品牌的信任和興趣，並加強品牌的影響力。

看完以上內容，如果你對UX視覺設計原則的內容還是感到非常疑惑，或者想找專業的香港網頁製作公司，為你提供網頁製作、線上推廣等一系列的服務，歡迎諮詢我們! 文章導覽 APP設計要點：關於扁平化設計的知識要點網頁設計技巧：如何提高界面設計的可讀性 搜尋 Searchfor: search 最新動向 SEO優化新知：哪些SEO優化技巧可以幫助我們做好反向鏈接優化? 2022六月27 盤點最值得嘗試的9個UI設計風格，哪個是你的心水之選? 2022六月24 電商線上行銷策略：EDM行銷怎樣做可以大大提高開信率? 2022六月20 【外貿網站設計思路】如何製作出符合目標市場的網站 2022六月17 SEO優化分析重點：為什麼要做競爭對手SEO分析?不要再打無把握的仗 2022六月13 最新資訊 Blog Uncategorized 公司動向 網絡推廣 網頁管理 年月份 年月份 選擇月份 2022年六月 2022年五月 2022年四月 2022年三月 2022年二月 2022年一月 2021年十二月 2021年十一月 2021年十月 2021年九月 2021年八月 2021年七月 2021年六月 2021年五月 2021年四月 2021年三月 2021年二月 2021年一月 2020年十二月 2020年十一月 2020年十月 2020年九月 2020年八月 2020年七月 2020年六月 2020年五月 2020年四月 2020年三月 2020年二月 2020年一月 2019年十二月 2019年十一月 2019年十月 2019年九月 2019年八月 2019年七月 2019年六月 2019年五月 2019年四月 2019年三月 2019年二月 2019年一月 2018年十二月 2018年十一月 2018年十月 2018年六月 2018年三月 2016年四月 熱門標籤#內容更新 APP設計 APP設計技巧 Facebook推廣 SEM優化 SEO優化 SEO優化基礎知識 SEO優化手段 SEO優化技巧 SEO優化教程 SEO優化策略 SEO優化趨勢 UI設計 UI設計基礎知識 UI設計技巧 UX設計 交互設計 內容推廣 動效設計 字體設計 平面設計 排版佈局 排版設計 搜索引擎優化 數位行銷 社群行銷 網站優化 網站建設 網站推廣 網站製作 網站設計 網絡推廣 網頁推廣 網頁管理 網頁設計 網頁設計技巧 網頁設計新知 網頁設計規則 網頁設計趨勢 網頁風格 線上推廣 線上行銷 線上行銷策略 配色方案 關鍵字廣告 x 關閉