從視覺上構建內容的層級

筆記:

1 ?信息層級的重要性


信息層級對比


新圖蛇券,將不同的內容進行了強化與弱化。

因為人的眼睛在閱讀時焦點只有一個,無法同時聚焦多個焦點將所有內容進行平鋪瀏覽性雄。

所以要根據(jù)用戶對信息的需求程度進行層級篩選,將用戶需要的主要信息進行強化羹奉,不需要的次要信息進行弱化秒旋,先替用戶將信息進行篩選,以減少用戶的閱讀負荷

如右圖中诀拭,黑色字體的標題迁筛、還款內容,綠色的還款按鈕,灰色的次級標題细卧。

卡片中用戶關心的首要信息便是還款金額尉桩,所以進行了黑色字體強化。而次級標題只是對內容的標注贪庙,對內容無影響蜘犁,所以用灰色字體進行弱化。

還款按鈕做為用戶的核心行為止邮,從詳情內提出來并用綠色做強化提示用戶點擊这橙,讓用戶在一個頁面內完成由查看到還款的全部步驟,減少了用戶操作層級與操作負荷导披。


①前期了解和分析

1.1明確頁面定位幫助分析信息優(yōu)先級與核心行為

用戶是誰屈扎,來自哪里,頁面內容要提供什么撩匕,頁面的作用

1.2分析信息優(yōu)先級

一級信息吸引用戶鹰晨,必須少而精,設計上重點展示

二級信息幫助理解止毕,解釋一級信息模蜡,提煉精華,幫助用戶理解信息

三級信息詳細了解扁凛,做補充信息哩牍,更多作為一個展示入口提供跳轉功能

1.3分析用戶核心行為

用戶在不同階段會產生不同行為,而這些行為的最終導向應該是此頁面的核心行為令漂。

所以應該盡量簡化任務層級膝昆,使用戶在基礎階段產生的行為都導向用戶的核心行為,并使這個階段盡量縮短叠必。

②.建立信息層級的基本方法

2.1位置

優(yōu)先級依次:左上荚孵,右上,左下纬朝,右下

左右關注度差別小于上下關注度差別(因為人眼左右移動耗費能量更少)

用戶優(yōu)先關注首屏收叶,首屏信息應該比通過用戶滑動滾動條出現(xiàn)的其他層級優(yōu)先級更高

2.2大小

重要的元素要大一些,如果要表現(xiàn)差距共苛,如果一個元素的重要度是2判没,那就把他的大小做成4

同樣大小的照片,如果細節(jié)更清晰隅茎,就越容易吸引用戶的關注

2.3距離

格式塔原理澄峰,距離近的為一整體

2.4色彩

先暖色后冷色,暖色更吸引用戶點擊

③視覺流

用戶的瀏覽順序會形成視覺流

設計應該引導用戶的視覺流到達核心行為點辟犀,并盡量使其流暢且有規(guī)律可循

1.橫向視覺流

從左到右的視覺流動

2.縱向視覺流

引導用戶視覺從上到下俏竞,因為眼球縱向移動需要不斷對焦,縱向瀏覽模塊與橫向相同,但是瀏覽細節(jié)效率會變低魂毁。

所以縱向適合新聞模塊或其他玻佩,用戶先找到合適的模塊,后橫向瀏覽信息細節(jié)席楚。

最終歸納

分析用戶核心行為與信息優(yōu)先級

通過位置咬崔。大小。顏色烦秩。距離垮斯。內容形式。表現(xiàn)方法來確定優(yōu)先級

設計時常審視視覺流闻镶,看看用戶瀏覽是否順暢

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末甚脉,一起剝皮案震驚了整個濱河市丸升,隨后出現(xiàn)的幾起案子铆农,更是在濱河造成了極大的恐慌,老刑警劉巖狡耻,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件墩剖,死亡現(xiàn)場離奇詭異,居然都是意外死亡夷狰,警方通過查閱死者的電腦和手機岭皂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沼头,“玉大人爷绘,你說我怎么就攤上這事〗叮” “怎么了土至?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長猾昆。 經常有香客問我陶因,道長,這世上最難降的妖魔是什么垂蜗? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任楷扬,我火速辦了婚禮,結果婚禮上贴见,老公的妹妹穿的比我還像新娘烘苹。我一直安慰自己,他們只是感情好片部,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布螟加。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捆探。 梳的紋絲不亂的頭發(fā)上然爆,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天,我揣著相機與錄音黍图,去河邊找鬼曾雕。 笑死,一個胖子當著我的面吹牛助被,可吹牛的內容都是我干的剖张。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼揩环,長吁一口氣:“原來是場噩夢啊……” “哼搔弄!你這毒婦竟也來了?” 一聲冷哼從身側響起丰滑,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤顾犹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后褒墨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體炫刷,經...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年郁妈,在試婚紗的時候發(fā)現(xiàn)自己被綠了浑玛。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡噩咪,死狀恐怖顾彰,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情胃碾,我是刑警寧澤涨享,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站书在,受9級特大地震影響灰伟,放射性物質發(fā)生泄漏。R本人自食惡果不足惜儒旬,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一栏账、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧栈源,春花似錦挡爵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涣雕。三九已至,卻和暖如春闭翩,著一層夾襖步出監(jiān)牢的瞬間挣郭,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工疗韵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留兑障,地道東北人。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓蕉汪,卻偏偏與公主長得像流译,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子者疤,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內容