tft每日頭條

 > 生活

 > ui界面設計造型特點

ui界面設計造型特點

生活 更新时间:2024-08-08 23:15:38

ui界面設計造型特點(UI界面設計的視覺層級)1

ui界面設計造型特點(UI界面設計的視覺層級)2

位置是在設計之初就會考慮的因素。人們在閱讀和浏覽事物時,會遵循一些特定的規律,在用戶界面設計上遵循這些規律,能幫助用戶更容易、更快捷地看到并理解眼前的事物。其中有兩條規律和位置設計元素有關:

ui界面設計造型特點(UI界面設計的視覺層級)3

①當眼睛偏離視中心時,在偏離距離相等的情況下,人眼對左上的觀察最優,依次為右上、左下,而右下最差。因此,左上部和上中部被稱為“最佳視域”。

②第二條規律是眼鏡沿水平方向運動比沿垂直方向運動更快而且不易疲勞。人們一般先看到水平方向的物體,後看到垂直方向的物體。

ui界面設計造型特點(UI界面設計的視覺層級)4

ui界面設計造型特點(UI界面設計的視覺層級)5

依據信息的優先級确定了界面中元素的位置後,應該考慮給各個元素占多大的空間,元素的尺寸大小可以很直觀地反映信息的重要等級。

ui界面設計造型特點(UI界面設計的視覺層級)6

除了元素本身的尺寸大小會影響視覺層級外,元素的細節放大程度也同樣起到作用,細節放大後,人眼會感受到元素更清晰,離眼睛更近而容易先去關注,當然前提是保證信息可被理解,如果局部細節放大但用戶不能理解信息是什麼就不能起到吸引用戶的作用。

ui界面設計造型特點(UI界面設計的視覺層級)7

ui界面設計造型特點(UI界面設計的視覺層級)8

前面講到的将元素的細節放大,眼睛會感受離它更近而被優先注意到,雖然信息展現的媒介是個平面,但是通過視覺手段能體現出三維的效果,除了大小,還可以采用一些其他視覺手法來實現。

ui界面設計造型特點(UI界面設計的視覺層級)9

①拉遠三維距離。想要達到距離被拉遠的效果,下面列舉的方法是讓信息變得不清晰,眼睛看起來無法對焦到信息上面,包括:模糊元素;降低透明度也同樣可以起到作用,當有些背景圖模糊後比較難被整體感知,選擇降低透明度也能拉遠距離;增加半透明圖層,在界面色彩或元素比較多的情況下,僅降低透明度也可能無法拉開距離。

ui界面設計造型特點(UI界面設計的視覺層級)10

②拉近三維距離。增加投影是最常用到的讓元素看起來和其他内容不在同一平面的視覺手法,通常像彈出框、移上後出現的浮層等由于要壓在其他信息之上,增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的幹擾。

ui界面設計造型特點(UI界面設計的視覺層級)11

③除了三維,二維距離對視覺層級也有影響。根據格式塔心理學接近性定律,距離較短或互相接近的部分容易組成整體。人眼對距離鄰近的信息更容易先去關注,在視覺手法應用上,元素距離上一個焦點近的,視覺層級較高。

ui界面設計造型特點(UI界面設計的視覺層級)12

ui界面設計造型特點(UI界面設計的視覺層級)13

确定了界面元素的位置、大小和距離關系後,我們應該繼續考慮内容的形式,包括視頻、圖片、文字等,這裡主要講我們經常使用的圖形和文字。相比起文字,圖片在抓住用戶眼球這一點上是功不可沒的,同時還能使用戶在短時間内形成形象記憶。從視覺層級上,眼睛一般會先關注圖後關注文字。

ui界面設計造型特點(UI界面設計的視覺層級)14

①方向性引導。圖片中的形象有些具有明顯的方向性,如人眼注視的方向、手勢所指的方向、物體運動的方向光線照射的方向等,這些特征會引導人眼視線朝着設定的方向運動,從而達到視覺層級有主有次。

ui界面設計造型特點(UI界面設計的視覺層級)15

②符号引導。除了圖片,一些符号本身帶有順序和方向性,能有效引導視線根據符号來浏覽,包括阿拉伯數字,字母順序、時間順序、箭頭等。時間軸在界面中應用也很廣泛,人眼會受時間順序的影響去測覽信息。

ui界面設計造型特點(UI界面設計的視覺層級)16

ui界面設計造型特點(UI界面設計的視覺層級)17

色彩是影響用戶對界面層級性感知的另一重要因素,色彩的應用對視覺層級的影響也能起到立竿見影的效果,總結起來人眼對色彩的關注度差别主要是以下兩點:

ui界面設計造型特點(UI界面設計的視覺層級)18

①先暖色後冷色。色彩的不同色相,對人眼的刺激及産生的反應目前沒有找到絕對的先後順序,但是冷色類和暖色類色彩,是有明顯的層次差别的。

ui界面設計造型特點(UI界面設計的視覺層級)19

②先高反差後低反差。除了冷暖色對眼睛的刺激不同,色彩的反差是最容易造成關注度差别的因素,在自然界動物為了生存,運用的保護色就是和反差相關。除了尺寸大小、距離能體現視覺的反差外,運用色彩也可以達到視覺的反差:色相反差、飽和度反差和明度反差,數值可以控制,兩個顔色之間飽和度或明度數值相差越大,反差也就越大,反之亦然。

ui界面設計造型特點(UI界面設計的視覺層級)20

零基礎自學CDR AI PS ID視頻教程

APP UI界面素材包第37季

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved