03 facebook查看已關注的人先后順序(facebook設置關注后顯示)

4、用戶核心行為 不同類型用戶會在不同階段產生行為，我們要判斷這些行為最終導向是什么? 比如商品詳情頁面，有些用戶在決定購之前，會查看用戶評價、歷史交易等內容，但這些查看的行為，最終是幫助用戶判斷是否購這個商品，所以核心行為是最終導向的購

有了這些，交互產出物文檔中會給予大模塊的信息優先級和用戶行為優先級，如下圖： 視覺在進行細節設計前，需要對每個模塊內的具體內容進行優先級的并產出如下示意圖并和交互和業務方確認，這些都是幫助視覺設計過程不偏離方向的重要產出物

二、建立信息層級的視覺方法 視覺表現手法主要有以下幾種元素，實際設計中為了讓效果拉開主次，可能會同時使用多種方法以達到更好的效果： 位置 大小 距離 內容形式 色彩 2

1、位置 位置是在設計開始就會考慮的元素，人眼觀看事物時，總會遵循一些特定的規律，設計上遵循這些規律，能幫助用戶更容易、更快捷地看到或理解眼前的事物

其中有兩條規律和位置設計元素有關： 1)當眼睛偏離視中心時，在偏離距離相等的情況下，人眼對左上的觀察最優，依次為右上，左下，而右下最差

因此，左上部和上中部被稱為&lo;最佳視域&ro;

例如，logo、商品名、主題等重要信息，一般放在最佳視域內

當然，這種劃分也受文化因素的影響，比如伯文字是從右向左書寫的，這時最佳視域就是右上部

下圖是摘自摘自張帆 羅琦 宮曉東的《網頁界面設計藝術教程》對一個屏幕劃分后，用戶對不同位置不同的關注度差別： 2)第二條規律是眼睛沿水平方向運動比沿垂直方向運動快而且不易疲勞，一般先看到水平方向的物體，后看到垂直方向的物體

如下圖所示，左右的關注度差別要小于上下關注度差別，如想要體現并列的關系，左右排列會更合適;而如果要拉開差距，僅通過位置來實現，上下排列更容易達到目標

舉個例子：如下圖時代周刊首頁，左側大圖是當天的焦點新聞，在信息層級上為一級信息，視覺表現上不僅大、內容形式用大圖，位置也放在優勢區域，可能98%的用戶會先關注到這個區域; 假如對設計稿的位置做調整如下，如果焦點新聞圖片是第一優先級的信息，雖然它是大圖的形式，占的也夠大，但由于位置不在最佳視域，會被&lo;Latest Headlines&ro;分散一部分視線，可能只有60%的用戶先看到右側了;如果信息有主次，就要讓視覺表現上拉開差距，而不是一個接近均等的局面

3)用戶優先關注上部，在網頁設計中有首屏的概念，首屏的信息比通過用戶拖動滾動條出現的第二、三屏層級要高

由于用戶使用的屏幕分辨率不同造成首屏的高度會有差別，根據我們的數據，目前分辨率高度為占多數，所以設計時會以高度為基準，去掉瀏覽器本身的菜單等占用的高度，實際展示給用戶的第一屏平均為px，這個數據會根據以后目標用戶的分辨率變化做相應的調整，我們在設計時可用這個數值作為首屏的參考線

2

2、大小 在確定了模塊的位置后，我們會考慮給這模塊多大的地盤，大小會很直觀反映信息的重要等級

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

Giles Colborne的《簡約至上》書中的結論可以指導我們通過大小拉開差距： 1)重要的元素要大一些，即使比例失調也可以考慮 2)要想辦法表現出差距;如果一個元素的重要性是2，那就把它的大小做成4 還是以時代周刊首頁為例，目前的設計左側的焦點新聞圖占的和中間新聞圖對比拉開了差距，使得用戶容易先關注到一級信息而且不容易被周邊干擾; 我們對兩個新聞圖片的進行對比可以看到差距有4倍左右; 假如對界面調整如下：焦點新聞圖縮小兩倍后，可以看出視覺層級的區分就不明顯了

除了元素本身所占的會影響視覺層級，元素的細節放大程度也同樣起到作用，細節放大后，人眼會感受到元素更清晰，離眼睛更近而容易先去關注，當然前提是保證信息可被理解，如果局部細節放大但用戶不能理解信息是什么就不能起到吸引用戶的作用; 下圖是一個模特的，首頁上隨機出現模特的照片包括面部和半身照片，放大臉部特征后的照片保證了用戶能理解這是一個模特的形象，使得用戶會優先關注細節放大的照片

2

3、距離 前面講到的將元素的細節放大，眼睛會感受離它更近而被優先注意到，雖然信息展現的媒介是個平面，但是通過視覺手段能體現出三維的效果，除了大小，還有其他視覺手法如下： 1)拉遠三維距離 想要達到距離被拉遠的效果，下面列舉的方法是讓信息變得不清晰，眼睛看起來無法對焦到信息上面，包括： 模糊元素： 圖背景的人物被模糊后，使它和兩個行動點以及右側的圖標不在一個平面上，離眼睛更遠，用戶在進行行動點和文字識別時也不會被模糊的背景所干擾 降低透明度也同樣可以起到作用，當有些背景圖模糊后比較難被整體感知，選擇降低透明度也能拉遠距離 增加半透明圖層，在界面色彩或元素比較多的情況下，僅降低透明度也可能無法拉開距離，如下圖希望突出T購時，其他四個模塊降低透明度后由于本身色彩比較豐富而沒有明顯拉開差距，通過加上灰色的半透明圖層后，T購以外的模塊自然的退到視線后面了

2)拉近三維距離 增加投影是最常用到的讓元素看起來和其他內容不在同面的視覺手法，通常像彈出框、鼠標移上后出現的浮層等由于要壓在其他信息之上，增加投影能幫助用戶聚焦在帶投影的模塊而不受下面信息的干擾 3)除了三維，二維距離對視覺層級也有影響，根據格式塔心理學接近性定律，距離較短或互相接近的部分容易組成整體;人眼對距離臨近的信息更容易先去關注，在視覺手法應用上，元素距離上一個焦點近的，視覺層級高

如下圖，第一層級的新聞焦點圖和右側的小圖片比較臨近，視線容易往右上角運動; 對距離做了調整后，雖然中間的小圖片本身比文字更吸引人，但由于焦點圖下方的標題距離更近而形成整體，視線容易先往下運動

2

4、內容形式 確定了模塊的位置、大小和距離關系后，我們會繼續考慮內容的形式包括視頻、圖片、文字等，這里主要講我們經常使用的圖形和文字;相比起文字，圖片在抓住用戶眼球這一點上是功不可沒的，同時還能使用戶在短時間內形成形象記憶，從視覺層級上，人眼一般會先關注圖后關注文字

下圖假設中間的人物首先吸引了人的視線，為第一層級的信息，由于人眼注視方向為右側，使得用戶關注的下一個目標會轉向&lo;買粉絲der&ro;文字，為第二層級的信息

下圖WHAT WE DO位置在左上角容易先被關注，同時右側的人物形象占的篇幅較大也會搶視線，但由于人物運動的方向下沒有其他信息，圖片沒有充分發揮引導的作用，用戶瀏覽起來會不太順暢 經過調整后的效果，雖然&lo;WHAT WE DO&ro;位置上并不在優勢區域，但通過圖片方向的引導很自然的讓人眼落在文字信息上

2)符引導 除了圖片，一些符本身帶有順序和方向性，也能有效引導視線根據符來瀏覽，包括伯數字、字母順序、時間順序、箭頭等

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

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

2

5、色彩 色彩是影響用戶對界面第一印象的重要因素，色彩的應用對視覺層級的影響也能起到立竿見影的效果，總結起來人眼對色彩的關注度差別主要是以下兩點： 1)先暖色后冷色 色彩的不同色相，對人眼的及產生的反映目前沒有找到絕對的先后順序，但是冷色類和暖色類色彩，是有明顯的層次差別的，如下圖，人眼一般會優先看到左側的圖片，這和我們人眼對不同波長的反映有一定關系; 從生理學上講，人眼晶狀體的調節，對于距離的變化是非常精密和靈敏的，我們能判斷出物體離我們的遠近，但是它有一定的限度，對于波長微小的差異就無確調節

眼睛在同一距離觀察不同波長的色彩時，波長長的暖色如紅、橙等色，在視網膜上形成內側映像;波長短的冷色如藍、紫色等，則在視網膜上形成外側映像

因此，暖色好象在前進，冷色好象在后退

美國數字營銷Hubspot曾經做過一場A/B Test，用于測試不同顏色對于用戶點擊轉化造成的差異

在圖中，左右兩個測試頁面在內容上完全一致，唯一不同的是按鈕的顏色，在超過人次的樣本測試中，最終紅色方案的點擊率超過綠色方案的點擊率足足21%

而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點擊，因為就直覺而言，綠色代表著通行、準許通過的意思，而紅色則更傾向于警告、阻止意味

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

2)先高反差后低反差 除了冷暖色對眼睛的不同，色彩的反差是最容易造成關注度差別的因素，在自然界動物為了生存，運用的保護色就是和反差相關，如圖中的貓頭鷹，和它生活的環境相關，毛色都進化成類似的色彩，以起到隱藏保護的作用;相反，顏色反差大就特別容易引起注視，如下黃色郁金香中獨特的紅色

前面講到的大小、遠近都是體現能反差的視覺手段，色彩上的反差主要通過以下方法達到效果： 色相反差，下圖中主色調為藍色，藍色行動點和整體顏色一致，層級相對較弱，而綠色行動點和藍色在色相上的反差使得層級變高 但顏色有很多種，如何確定反差的大小?我們可以通過色相環來查看，如下圖所示，色相反差強弱取決于色相環上的距離，距離越大對比越強，反之則越弱

飽和度反差和明度反差比較容易理解，而且他們有數值可以控制，兩個顏色之間飽和度或明度數值相差越大，反差也就越大，反之亦然，看看具體的實例：如以下導航圖，當前的人物i買粉絲n明度較高，和低明度黑色背景形成高反差而容易先被注視 以下環狀餅圖，已完成的百分比飽和度高，和總體低飽和度形成對比，相同色相通過飽和度進行對比不僅能拉開差距形成視覺層級，同時視覺效果具有整體性 總結一下上面講到的視覺表現手法，形成表格方便大家記憶如下： 三、審視頁面視覺流 運用視覺表現手法建立信息層級后，需要設計師不斷審視用戶的瀏覽順序是否真如我們期望的層級1到2到3…，包括頁面大模塊和模塊內的瀏覽，這些瀏覽順序會在頁面上形成視覺流; 審視頁面視覺流能幫助我們判斷用戶瀏覽頁面是否順暢，瀏覽的順序是否有規律可循;如果我們的設計不能有效引導用戶的視線，用戶的瀏覽更趨向于隨機性，就難以將希望表達的信息快速傳到到位

下面的內容主要是介紹比較典型的視覺流及每種類型的特征，包括： 線性視覺流 導向性視覺流 跳動性視覺流 放射性視覺流 1)線性視覺流 橫向視覺流引導用戶視線從左到右或從右到左視覺流動，是最符合用戶視覺習慣的瀏覽方式，給人穩定可信之感