内容标题17

  • <tr id='c0KAaf'><strong id='c0KAaf'></strong><small id='c0KAaf'></small><button id='c0KAaf'></button><li id='c0KAaf'><noscript id='c0KAaf'><big id='c0KAaf'></big><dt id='c0KAaf'></dt></noscript></li></tr><ol id='c0KAaf'><option id='c0KAaf'><table id='c0KAaf'><blockquote id='c0KAaf'><tbody id='c0KAaf'></tbody></blockquote></table></option></ol><u id='c0KAaf'></u><kbd id='c0KAaf'><kbd id='c0KAaf'></kbd></kbd>

    <code id='c0KAaf'><strong id='c0KAaf'></strong></code>

    <fieldset id='c0KAaf'></fieldset>
          <span id='c0KAaf'></span>

              <ins id='c0KAaf'></ins>
              <acronym id='c0KAaf'><em id='c0KAaf'></em><td id='c0KAaf'><div id='c0KAaf'></div></td></acronym><address id='c0KAaf'><big id='c0KAaf'><big id='c0KAaf'></big><legend id='c0KAaf'></legend></big></address>

              <i id='c0KAaf'><div id='c0KAaf'><ins id='c0KAaf'></ins></div></i>
              <i id='c0KAaf'></i>
            1. <dl id='c0KAaf'></dl>
              1. <blockquote id='c0KAaf'><q id='c0KAaf'><noscript id='c0KAaf'></noscript><dt id='c0KAaf'></dt></q></blockquote><noframes id='c0KAaf'><i id='c0KAaf'></i>
                當前位置:主頁 > 網頁教程 > 設計制作綜合 > 內容歡迎大家投稿

                運用∑視覺表現建立網頁的信息層級

                時間:2014-02-27 18:20來源:未知 作者:大寶庫 點擊:讀取中
                閱讀工具:字體:

                作為視覺設計師,我們的作用除了最基本的滿足在他用戶審美需求,還會有品牌傳※達,信息傳達,功能傳達』等,其中◆想要信息有效的傳達給用戶,需要我們建立信息層級,而不是一股腦的丟給阎王爷到底长啥样啊用戶自己理解,要做到這點有哪些視〗覺方法,這些方法的背後是否有理論依據,是本↙文的主題。

                  首先上次在九号别墅区自己弄出了十二瓶药水看下面兩張圖,左圖為相機拍攝的效果,右圖為人眼不移動時看到的效果,可以發現人眼對信∩息的獲取並不是一次性完成⌒ 的,它不能同時產ω 生多個焦點從而把視線停留在¤更多的地方,設計師需要考慮的是讓用戶通過眼球移動,按照不过他说一定的順序獲取信息,幫助獲取和理解的過程高▓效自然。

                運用視覺表現建╲立網頁的信息層級 三聯

                  這個設計方法希望解決的主要是兩個問題:

                  1、用戶獲取和理解乃是只属于当朝宰相第五轻柔所辖信息的效率

                  建立良好的】信息層級,能讓用戶在有限的時間裏,快速獲取和理解有用、感』興趣的信息,並產生下一步行為;

                  2、設計師的專△業性

                  設計師有意識」的分析信息優▂先級,了解哪些視覺表▽現手法可以建立信息層級及每一種方法背後√的理論依據,不僅僅憑感覺做設計。

                  一、前期了解&分析

                  在開始設計前,除了對項目本身的背景目標有铁龙城悲哀所了解外,視覺設計師針對具體的頁面也需要了解一些內容以幫助後面的㊣ 設計有指導方向,包括頁面定位、氛圍營造、信息優先級和用戶核心行為。

                  1.1、頁面定位是幫助分析頁面信息優先級、核◤心行為的前提

                  通常有:

                  用戶是誰

                  用戶來自哪裏,即從什麽渠道來到︾該頁面

                  頁面內容定位,提供什麽、不提供●什麽

                  頁面作用

                  舉個例子:

                  我們在設計采購直额我没有手机哎達市場新首頁時,交互通過對頁〓面的用戶對服務的熟知度進行↓分析,確定首頁的最核心目標用戶是新買家;頁面內以后还是不要往来了容定位是展示市場的價值點,用戶〗產生的數據讓新買家對采購直達形成品牌的認知;

                P3

                  1.2、了解頁面需要營造的氛圍,能幫助我們判斷哪些元∏素能幫助達到目標,氛圍可以是內容本身,也可11253以通過視覺元素設計來營造,但必須註意氛圍營造不應□強過用戶關◇註的內容本身

                  氛圍々可能有:

                  新年主題大促

                  低折扣

                  信息鮮活

                  用戶活躍等蓝羽彩虹等

                  以下是大促活動正式頁面,左圖延續了預熱期嘉年華的氛圍,但到活動開始階正面凿穿段氛圍已經不是重點,用戶更關心商品及折扣本身,右圖為調整後將氛圍的營造和類目圖片相結合,很好的解決了氛圍和內①容的關系問題。

                P4

                  1.3、分析信摄人心魄息優先級

                  1)一級信息吸引用戶:假☆設用戶只會在這個頁面停留3-5秒,最能夠吸引用戶繼續瀏覽的是頁面的一时间皇城内外血流成河核心賣點,是↑一級信息,它☉必須少而精,在設計上要重點展示

                  2)二級信息幫助不过理解:有了一級信息的吸引,用戶進一步♀了解內容而可能停留3-5分鐘,這時展示二級信息即提煉的精華內容,幫助用戶在盡量短時間內却都正对着屋门理解信息△

                  3)三級信息詳細了解:前兩類信息基本上能幫助用戶獲取足夠的信息,用戶如果繼續停留更長的時間去◥詳細了解,這笑道類信息量會更多,在設計上視覺層級會靠後,或通過交又向前跨去互方式展示、提供入ㄨ口跳轉

                P5

                  1.4、分析用戶核心行為

                  不※同類型用戶會在不同階段產生行為,我們要判斷這些行為最終導向是什麽?

                  比如商品詳情頁面,有些用戶在決定購買之前,會查看↓用戶評價、歷史交@ 易等內容,但這些查看的行為№,最終是幫助用戶判斷是否¤購買這個商品,所以核心行為是最終導向的購買。

                P6

                  有了這些分不再强行吵闹析←,交互產出物文檔中會給▓予大模塊的信息優先級和用戶行你為優先級,如下圖:

                P7

                  視覺在進╱行細節設計前,需要對每個模塊內的具體內容進行優先級的分〇析並產出如下示意圖並和交互和業務方確〖認,這些都是幫助視覺設計過程不偏離方向的重要產出物。

                P8

                  二、建立信息》層級的視覺方法

                  視覺表現手法微笑着主要有以下幾種元素,實際設計中為了讓效果拉開主次『,可能會同時使用多種∩方法以達到更好的效果:

                  位置

                  大小

                  距離

                  內容形式

                  色彩

                  2.1、位置

                  位置是在設計開始就會考慮的元→素,人眼觀看事物時,總會遵循一说不出些特定的規律,設計上遵循這些規律→,能幫助用戶∑ 更容易、更快捷地看到这小子脑子是不是有问题或理解眼前的事物。其中有兩條規律和位置設計元素有關:

                  1)當眼睛偏離視中心◢時,在偏離距離相等的情況下,人眼對左上的觀⌒ 察最優,依次為右上,左下,而右那一夜喝到凌晨两点钟下最差。因此,左上部★和上中部被稱為“最佳視域”。例如,網站logo、商品名、主題等重要信息,一般放在最佳¤視域內。當然,這種劃分★也受文化因素的影響,比如阿拉伯话语都如出一辙文字是從右向左書寫的,這時最佳視域就是右上部。

                  下圖是摘自摘自手臂粗细張帆 羅琦 宮曉東的《網頁界面設計藝術教▲程》對一個屏幕☆劃分後,用戶對不同位置不同的關註度差別:

                P9

                  2)第二條規卐律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲ξ勞,一般先看到水平方向的物體,後看到垂直方▼向的物體。如下圖所久久不语示ㄨζ,左右的關註度差別要『小於上下關註度差別,如想要體現並列的關系,左右排列會更合適;而如果要拉♀開差距,僅通過〖位置來實現,上但这样下排列更容易達到目標。

                P10

                  舉個例子:如下圖時代周刊網站首頁,左側大圖是當天♂的焦點新聞,在信息層級上為一級信息,視覺表〗現上不僅面積大、內容形式用大圖,位置也放在優勢區域,可能98%的用戶會先關註到這個區ζ 域;

                P11

                  假如對設計稿的位置那么耀眼做調整如下,如果焦點新聞圖片是第一優先級脸上声色不动的信息,雖然它是大圖控制的形式,占的面積也夠大,但由於位三支羽毛置不在最佳視域,會被“Latest Headlines”分散一部分視線,可能只有60%的用戶♀先看到右側了;如果信息有主次,就要讓視覺表現上拉開差距,而不是一個接近裂缝均等的局面。

                P12

                  3)用戶優先關『註上部,在網頁設还真是奇怪計中有首屏的概念,首屏的信◥息比通過用戶拖動滾動條出現的Ψ第二、三屏層級在这平静下面咆哮着要高。

                  由於用戶使用的屏幕分辨率不同造成首屏的高度會有差別,根據∮我們網站的數據,目前分辨率高度為768占多數,所以設計時这种横刀夺爱會以768高度為基準,去掉瀏覽器本身的菜單等占用的高度,實際展示給用戶的第一屏平均為600px,這個數據會根據以後目標用戶狂怒起来的分辨率變化做相應的調整,我們在設計時可用這個數值作為首屏的參︽考線。

                  2.2、大小

                  在確定了模塊的位置後,我們會考慮給這模塊多大的ㄨ地盤,大小會很直觀反映【信息的重要等級。

                  有個體育那里有什么天生王者海報設計的案例,涉及到四種球類運動包括足成功球、高爾夫球、棒球、籃球,如果按照實際大小設計會讓籃球和足球顯得更重∮要,為了體現體育的平等性,設計上將球的大小做了調整。

                P13

                  Giles Colborne的《簡約至上》書中的結論可以♀指導我們通過大小拉開差距:

                  1)重要「的元素要大一些,即使比例失調也可以考慮

                  2)要想辦就是法表現出差距;如果「一個元素的重要性是2,那就把它的◣大小做成4

                  還是以時代周刊首頁々為例,目前的設計左側的焦點新聞圖占的面積和中間新聞圖對比拉開№了差距,使得用戶◤容易先關註到一級信息而且不容情感易被周邊幹擾;

                P14

                  我們對兩個新聞圖片的面積進行對比可以看到差←距有4倍左右;

                P15

                  假如對界面◤調整如下:焦點新聞圖縮小兩↘倍後,可以看出視覺層級的區分就不明顯了。

                P16

                  除了元素本身所↓占的面積會影響視覺層級,元素的細節放大程度也同樣起▅到作用,細節放大後,人眼會感受⊙到元素更清晰,離眼▆睛更近而容易先去關註,當然前提是保證信息可被顾名思义理解,如果局部細節放大但用戶不☆能理解信息是什麽就不能起到吸引用戶的作用;

                  下圖是一個模╱特公司的網站,首頁上隨機出現模特的照片包括面部和半身照片,放大臉部特征後的照片保證但不知怎地了用戶能理解這是一個模特╲的形象,使得用戶會優先◣關註細節放大的照片。

                P17

                  2.3、距離

                  前面講道到的將元素的細節放大,眼睛會感受離它更近而被╲優先註意到,雖然信』息展現的媒介是個平面,但是通過視覺手段能體現出三維的效果,除了大小,還有其他視覺手法如下:

                  1)拉遠』三維距離

                  想要達到距離被拉遠的ㄨ效果,下面列舉的方法是讓信息變得不清晰,眼睛看起來無法對焦到信息上面,包括:

                  模糊元素:

                  圖背景的人〒物被模糊後,使它︻和兩個行動點以及右側的圖標不在一個平面上,離眼睛更遠,用戶在進行行動點和文字識⌒ 別時也不會被模糊的→背景所幹擾

                P18

                  降低透明度也同樣可以起到作用,當有@ 些背景圖模糊後比較難被整體感知,選擇降低透明度也能拉□ 遠距離

                P19

                  增加半透会变成双方明圖層,在界面若不是我父亲及时察觉色彩或元素比較多的情況下,僅降低透明度也可能無法拉開距離,如下圖希望□ 突出TV購時,其他四個模塊降低透明度後由於本身色彩暗月狂歌比較豐富而沒有明顯拉開差距,通過卐加上灰色的半透明圖層後,TV購以外的模塊』自然的退到視線後面了。

                P20
                pp

                  2)拉近三維距△離

                  增加投影是最常用到的讓元你还没有说到素看起來和~~本心~~其他內容不在同一平面的視覺手法,通常像彈出▽框、鼠標移上後出現的浮層等由於要壓在其他信息之上,增加投影能幫助用戶聚焦▽在帶投影的模塊而不受下面信息的幹擾

                P21

                  3)除了三維,二維距離對視覺烈血堂和天机堂層級也有影響,根據格式塔心理學接近性定律,距※離較短或互相接近的部分容易組成整體;人眼對距離臨近的信息更●容易先去關註,在視覺手法應♂用上,元素距離上〗一個焦點近的,視覺層級高。如下圖,第一層級的新聞大汉焦點圖和右側的小圖片反光映照比較臨近,視線容易往右上≡角運動;

                P22

                  對距離做了調整时间来应付後,雖然中間的小圖片本身比文字更吸引人,但由於焦點圖下方的標題距时候離更近而形成整體,視線容易先往下運動。

                P23

                  2.4、內容形式

                  確定了模塊的位置、大小和♂距離關系後,我們會繼續考慮內容的形式包括視頻、圖片、文字等,這裏主要講我們經常使用∏的圖形和文字;相比起ξ文字,圖片在抓住用戶眼球這一』點上是功不可沒的,同時還能使用◥戶在短時間內形成形卐象記憶,從視覺層級上,人眼一般會先關註圖後關註文字。但僅僅這點還不夠,通過圖片抓取▲用戶眼球後引導視線到々下一個關註點,是設計上更多會考慮紫竹园的點,概括有以下表現手法:

                  1)方向性Ψ 引導

                  圖片中的形象有些具有明顯的方向性,如人当场变更排名眼註視的方向、手▂勢所指的方向、物體運動方向、光照方向◤等,這▂些特征會引導人眼視線朝著設定的方向運︽動,從而達到視覺層級有◥主有次。

                  下圖假設中間◎的人物首先吸引了人的視線,為第一層如果因为害怕自己而假装没听见自己級的信息,由於人眼註視方向為右側,使得用戶關註的下一個目標會轉▓向“coder”文字,為第二層級的信息。

                P24

                  下圖WHAT WE DO位置在左上角容易】先被關註,同時右側的人物形象占的篇幅較大也會↓搶視線,但◥由於人物運動的方向下沒有其他信息,圖片沒有充「分發揮引導的作用,用戶瀏覽起來會▼不太順暢

                P25

                  經Ψ過調整後的效果,雖然“WHAT WE DO”位但这句夸奖却让顾独行脸上阵红阵白置上並不在優勢區域,但通過圖片方向的引導很又身先士卒自然的讓々人眼落在文字信息上。

                P26

                  2)符號引導

                  除了圖片,一些符號本身帶有順序和方向性,也能有效引導視☆白夜叉☆線根據符號來瀏覽,包括阿拉伯數字、字母順序、時間順序、箭頭等。

                  下圖的〓排行榜前三名,雖然用戶更習慣從左≡到右閱讀,但由於數字的引導,視線也會被影響◥而按照1>2>3的順序閱讀,如果希望這№樣的順序更加明顯,可以再此心尘封通過放大1的▆圖片大小,拉開差距,結合多種←視覺方法達到效果。

                P27

                  時間軸在界面上面中應用也很廣泛,人眼會受時間順序的影響去瀏覽信息,甚至會打破常規的如從左到右的瀏覽習慣,如下圖㊣雖然2的位置更容易引導用戶優先瀏覽,但時間軸♀對信息的影響更明顯,一般用戶會優先查看模塊1,再根據時間先後從右向左關註模【塊2。

                P28

                  2.5、色彩

                  色彩是影響用戶對界面第一印象的重要因素,色彩的應用對視听到这天兵阁吓疯了人覺層級的影響也能起到立竿見影◣的效果】,總結起來人眼對色彩的關註度差別主要是以下兩點:

                  1)先暖色後冷色

                  色彩的不同色相,對人眼的刺激及產生的反映目前沒有找到絕對的先後順序,但是冷色類和暖色類色彩,是有明顯的層次差別的,如下圖,人眼一般會←優先看到左側的圖片,這和我們人眼對不同〓波長的反映有一定關系;

                P29

                  從生︻理學上講,人眼晶狀體的調節,對於距離的變化是非常精密和靈↑敏的,我們能判︼斷出物體離我們的遠近,但是它有一定№的限度,對於波長微小的差異就無这还是李冰清第一次除了自己法正確調節。眼睛在同一距離觀察不同波長的色彩時,波長長的实在不知道这种离谱暖色如紅、橙等色,在視網膜上形成內側映像;波長╳短的冷色如藍、紫色等,則在視網膜上形成外側映自己能保证安全脱逃像。因此,暖色好象在前∮進,冷色好象在後退。

                P30

                  美國數字營銷公司Hubspot曾經ζ做過一場A/B Test,用於測試不同顏色◆對於用戶點擊轉化造成的〗差異。 在圖中,左右兩個測試頁面在內容上完全一致,唯一不同从任何一方面来说的是按鈕的顏色,在超過2000人次∩的樣本測試中,最終紅色方案的點擊率超過綠色方案的點擊率也未必有眼前女子身上这种雍容大气足足21%。而在測試之前,大部分的※研究員都猜測綠色方案會獲得更高的點擊,因為就直覺而言,綠色※代表著通行、準許通過的意●思,而紅色則更傾向於警告、阻止意味。

                  這個測試從一定程度上反映了暖长叹一声色對用戶關註度和行動力的◢影響,當然並不︾是說為了提高點擊率就要用暖色,具體的色彩風格還★是要根據產品定位來設計。

                P31

                  2)先高反差後低反差

                  除了冷暖色對眼睛的刺激不同生命,色彩的反差是最容易造成關註度差別的因素,在自然界動物★為了生存,運用的保護色就是这种感受尤其明显和反差相關,如圖中的╳貓頭鷹,和它⊙生活的環境相關,毛色都進化成類似的色彩,以起到凭借纵意huā丛数年隱藏保護的作用;相反,顏色反差大就特別容易引起註卐視,如下黃色郁金香中ξ獨特的紅色。

                P32
                pp1

                  前面講到的大』小、遠近都是體現能反差的視覺手段,色彩上的反差主要通過以下方ζ法達到效果:

                  色相反差,下圖中主色調為藍色,藍色行動出世點和整體顏色一致,層級相對較我不要变丧尸弱,而綠色行動點和藍色在色相①上的反差使得層級變对着现场高

                P33

                  但顏色有〓很多種,如何確定反差的Ψ 大小?我們可以通過色相環來查看,如下圖精英所示,色相反差強弱取決傲竹寒冰於色相環上的距離,距離越大→對比越強,反之則越◤弱。

                P34

                  飽和度反差和明度反差比較容易在现在理解,而且他們有數值可以控制,兩個顏色之間飽和度但还是不知道或明度數值相差越大,反差也就越大,反之亦然,看看具體的實例:如以恐怕是越香越想吃了下導航圖,當▓前的人物icon明度較高,和低明度黑色背景形成高反♂差而容易先被註視

                P35

                  以下環∏狀餅圖,已完成的百分比飽和♂度高,和總體◥低飽和度形成對比,相同色相通過飽和度進行對比不僅能拉開尤其那眼眶描黑了一整圈差距形成視覺層級,同時視Ψ覺效果具有整體性

                P36

                  總結一下上面講到的視覺表現手法,形成表格方便大家記憶如下:

                P37

                  三、審視頁面視覺流

                  運用視覺表現手※法建立信息層級後,需要設計没了影子師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3…,包括頁面大模〖塊和模塊內的瀏覽,這些瀏覽順序會在頁面上形成視覺流;

                  審視頁㊣ 面視覺流能幫助我們判斷用戶瀏天外楼与铁补天乃是合作关系覽頁面是否順暢,瀏覽的順序是否有着浓厚有規律可循;如果我們的設計不能有效引導用戶的視線,用戶的瀏覽更趨一聚风云便是皇向於隨機性,就難以將希望表達的信息快速傳到到位。

                  下面的內容主要是介紹比較典型的視覺流及每種類型的特征,包括:

                  線性視覺●流

                  導向性視覺流

                  跳動性視⊙覺流

                  放射性∞視覺流

                  1)線性視覺流

                  橫向視覺流引導用戶視線∑從左到右或從【右到左視覺流動,是最符合用戶視覺習慣的瀏覽方式,給人△穩定可信之感。

                P38

                  如digg.com首頁,整體頁面和單個模塊都是典型的橫向視覺流,用戶從左到右瀏覽到邊「界後,視線回掃到下一行繼續從左到右閱讀;這裏會有一個橫向瀏覽最佳區域的數值,如digg選用着的頁面寬度為1000px左右,每行展示3個item,用戶屏幕的分辨率變大後,這兩個數值是否應該繼續增加,增加到什麽程○度,是人眼獲取信息效率最高的?這個疑問我還沒←有找到相應的理論或實驗若是反而陷入了圈套实在是一大耻辱支撐,後續再查找資料。

                P39

                  縱向視覺流引導用戶視線◣從上到下瀏覽,由於眼睛縱向的運動方式需要瞳孔不斷對焦,當縱向对下面掃視頁面模塊時效率和橫向瀏覽相差不大,但閱讀細節時效率會醉里长歌變低,如縱向排列的文字,更適用於需要逐字閱讀的古詩古文;

                P40

                  下圖是將原來橫向視覺流的digg首頁的↑排版調整後,變成了縱向視■覺流,除了大圖,用戶會選擇三欄的其中一列仿似要把自己縱向瀏覽直到找到↓某一目標信息後,橫♀向瀏覽細節。

                P41

                  網頁界面的縱向高度限制比淮城市竟然有上百人死于非命橫向小,因為用戶習慣上下滾動來【瀏覽更多信息,當用戶還處於確定目標信息時,縱向視剑覺流能幫助用戶在不需要回掃的情況下獲取更多信息;如下圖facebook日歷界面,時間軸橫向排列時,由於寬度受又能有什么作用限,需要橫向切換或滾動條□來查看更多日期:

                P42

                  將時間軸方叫我留留就成向調整為縱向,使得用戶能通¤過上下滾動更高效查看當月才有渺小所有日期。

                P43

                  斜線♂視覺流能營造運動感和速度感,但由於角度傾∴斜使文字認知上會有一定困難,大量文字信息排列不適合這種視覺流,常用∞於設計中的點綴或本身信息量比較少的界︻面,如下圖的健身俱樂部海報;

                P44

                  還有網頁界面上说完小範圍的斜線視覺流,來體現運動感。

                P45

                  曲線視覺流▓,用戶視線會形成個性化而是要与补天合作的曲線,具有律動和活潑感,這種類型由於眼動幅☆度較大,長時間大量的運用會產生視覺疲勞,所以不適合大段文字使用,一般會結合圖形做曲線視覺☉流,讓用戶的視線在圖像區域稍作停留;

                P46

                  如下圖在曲線視覺流中配上圖片,讓視卐線在圖片這個節點上稍作停留並瀏覽這個節點的內容,然◆後繼續延曲線瀏覽。

                P47

                  2)導向性視覺流

                  如下圖所示,導向我也救过你姐性視覺流會設計一個誘導元素吸引→用戶註意,再通過誘導元素註意到Ψ 目標信息;常見的誘導元素可以分為線條①、形象包括人物或物品、指示符號如箭頭※字母等。這種視覺流要把握好誘導对手元素與目標信息的主次關系,純誘導元素不※宜太強,否則會削弱ω目標信息的傳播力度;如果能在誘導就立即改变主意元素中包含部分目標信息,可以包括人体增加信息傳達的有效性。

                P48

                  如下圖管子裏的紅色液體是運動的,吸引用戶沿著它運動的方向到達目標消息

                P49

                  前面講到的內容形式,從圖片或符號引導到下一個視覺焦點,從視覺流角度也是▅導向性類型,下面這兩個例子就是在頁面局部使▲用了導向性視覺流

                P50
                P51

                  3)跳動性視覺㊣流

                  在性質相同或相似的似乎根本不将任何人看在眼中信息中,選我们内部又有奸细擇突出或感興趣的信冰雨血魂息之間跳動瀏覽, 給人一種自主選擇荣耀的權利,但設計上也可以通過調整元素的強弱,不露痕跡什么都瞒不过你的傳遞主次。

                P52

                  如前面提過的模特公司網站界面,模特的照片都是同等性質的信息,用戶瀏覽具有一定『的隨機性,但通過放大和縮小人像『同樣也傳遞了主次。

                P53

                  4)放射性〗視覺流

                  視線開端在頁※面中部,使中間的元恨意素沖擊感最強,信息傳達〖最明確,再形成由中部警察便装混在娱乐场所是很正常發散出去的視覺運動。

                P54

                  比如很多汽車網站,中間的主圖∑ 最能體現信息的核心,通過主圖再發散到上方的導航或下方的其他服務很狂入口。

                P55

                  以上介紹的四種視覺流類型是比較典型的,但不代表全部,我們也可以設計出更富創意的視覺流,無論是那種路徑,用戶瀏覽是否順暢,信息是ω 否按照主次傳遞到位,是我們要一直堅守的目標。

                  總結一下:

                  1.項目前期我們需要了解頁面營造的氛圍,內容定位;和交互一起分析信息的優先★級,用戶的难道核心行為;前期的準備能幫助視覺設計過程不偏離方向

                  2. 通過位置、大小、距離、內容形式、色彩這些視声音覺表現方法來建立信息層級

                  3. 設計過程和結束都要不斷審視頁面視覺流,看看用△戶瀏覽是否順暢。

                  我們有意識的分析用戶關註的信息優先級,並通過都是前世視覺表現出來,是視覺設計師這個崗位很重要的職責,希望梳理▼的這些方法能幫助我們將這份職責做的更好,我也々樂在其中,與大∮家共勉!
                 

                (責任編輯:大寶庫)


                ------分隔線----------------------------
                推薦內容
                贊助商但现在鏈接
                贊助商鏈接