中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：打開一個(gè)界面，你會(huì)被什么吸引取決于設(shè)計(jì)師如何設(shè)計(jì)。想要突出重點(diǎn)，對(duì)比、放大這些只是基礎(chǔ)操作。本文作者根據(jù)平時(shí)看到的一些案例，從突出重點(diǎn)的目的、方法和如何驗(yàn)證這三個(gè)方面來聊一聊，與你分享。

提到突出重點(diǎn)，筆者腦海中立馬浮現(xiàn)各種對(duì)比方式、各種放大操作，但是僅僅運(yùn)用對(duì)比就能到達(dá)目的嗎？這其中又有哪些需要注意的東西呢？于是筆者決定根據(jù)平時(shí)看到的一些案例，從突出重點(diǎn)的目的、方法和如何驗(yàn)證這三個(gè)方面來聊一聊，有錯(cuò)誤之處還請(qǐng)指正。

01 突出重點(diǎn)的目的

突出重點(diǎn)，我將其歸納成4個(gè)方面：引導(dǎo)用戶操作、提高閱讀效率、提醒重要信息和有效曝光。

突出重點(diǎn)的4個(gè)目的

1.1 引導(dǎo)用戶操作

用戶進(jìn)行某項(xiàng)任務(wù)時(shí)，即使頁面內(nèi)容和排版一模一樣，但突出不同的內(nèi)容帶來的結(jié)果卻是完全不同的。以知乎收藏回答為例，圖1突出的是“創(chuàng)建收藏夾”（下方藍(lán)色按鈕），如果用戶不仔細(xì)看的話很容易直接點(diǎn)擊，但此時(shí)用戶最可能想得到的結(jié)果是：將該回答添加到已創(chuàng)建的“插畫”收藏夾。

知乎（web端）添加收藏彈窗

而圖2突出的是“收藏”按鈕，如果有合適的直接收藏就行，沒有的話就需要?jiǎng)?chuàng)建新的，此時(shí)用戶視線也已經(jīng)移動(dòng)到彈窗底部，然后看到“創(chuàng)建收藏夾”并點(diǎn)擊。這樣的流程完全相反。

1.2 提高閱讀效率

提高閱讀效率主要表現(xiàn)在兩個(gè)方面：一是層次分明的頁面便于用戶快速抓住關(guān)鍵信息；二是給用戶設(shè)定高效的閱讀路線（動(dòng)線），減少次要信息的干擾。例如下方這張海報(bào)，標(biāo)題“莫奈&印象派大師展”這個(gè)關(guān)鍵信息最為突出，即使旁邊有各種小字和顏色。其次是時(shí)間，再到地址等信息，信息層次明顯，閱讀路線按照由上至下、從關(guān)鍵信息到次要信息，這樣閱讀效率就比較高。

莫奈&印象派大師展海報(bào)

1.3 提醒重要信息

對(duì)用戶影響較大的信息，比如錯(cuò)誤提示（例如下圖使用紅色文字來提示，比較明顯）、用戶的預(yù)約提醒等等，都得使用更容易讓用戶察覺的方式提醒，這里不再贅述。

百度app登錄錯(cuò)誤提示

1.4 有效曝光

主要是實(shí)現(xiàn)業(yè)務(wù)目標(biāo)、提升點(diǎn)擊等等，比如下圖中的新人紅包很容易成為視覺焦點(diǎn)，因此其曝光是非常有效的。

寺庫app首頁

而下方這張圖由于業(yè)務(wù)線多、頁面內(nèi)容復(fù)雜，就出現(xiàn)了一個(gè)問題：什么都想突出導(dǎo)致什么都不突出，比如你能一眼找到新會(huì)員入口嗎？這樣的曝光效果就打了折扣了，需要各產(chǎn)品線協(xié)調(diào)改善。

每日優(yōu)鮮首頁

02 突出重點(diǎn)的方法

視覺信息只有被人眼接受才有可能發(fā)揮作用，因此我先啰嗦兩句把人眼在閱讀時(shí)的2個(gè)特點(diǎn)再提一提。

“一個(gè)穿著蝙蝠俠套裝的人去參加化妝舞會(huì)，別人頂多瞟一眼，你的存在感幾乎為0；但是你穿著這身衣服去寫字樓上班，回頭率幾乎是100%?！?/p>

這反映了第一個(gè)特點(diǎn)：越是與眾不同的東西越能引發(fā)關(guān)注，即平面設(shè)計(jì)里提到的“特異”。此外，在信息沒有做差異化處理時(shí)，人眼的閱讀習(xí)慣是從左至右、從上至下，即尼爾森總結(jié)的“F”型視覺模型?；谶@兩個(gè)特點(diǎn)，我整理了5種方法：

突出重點(diǎn)的5種方法

2.1 合理布局

關(guān)于信息布局可以看看羅賓·威廉姆斯總結(jié)的版式設(shè)計(jì)四原則，這里我僅從突出重點(diǎn)出發(fā)，談?wù)勑枰⒁獾膬?nèi)容：

設(shè)定視覺層級(jí)（優(yōu)先級(jí)），越重要的越突出；

信息優(yōu)先級(jí)應(yīng)當(dāng)是動(dòng)態(tài)的；

同一個(gè)頁面，不同狀態(tài)下要突出的內(nèi)容是不一樣的，例如用戶從未下單時(shí)，盒馬優(yōu)先展示的是新人樓層，而普通用戶優(yōu)先展示廣告banner，在增加新內(nèi)容時(shí)需考慮所有場(chǎng)景。

盒馬首頁

省略不必要的信息；

如果頁面信息過多，非核心內(nèi)容能省略則省略，或者隱藏起來，例如購物應(yīng)用的訂單信息常隱藏起來。

拼多多訂單詳情

優(yōu)先展示用戶心理預(yù)期的內(nèi)容；

用戶從入口到達(dá)某頁面之前，對(duì)該頁面的內(nèi)容基本就有一個(gè)簡(jiǎn)單的預(yù)期，例如購物應(yīng)用在入口露出的商品圖（下方左圖），在承接頁（右圖）會(huì)展示在靠前的位置。

小紅書商城頁面

如果進(jìn)入該頁面找不到預(yù)期的內(nèi)容，那么就會(huì)造成疑惑，用戶大概率會(huì)退出。例如你在抖音中刷到某電影解說的上部分，此時(shí)你想繼續(xù)看下部分（如下圖）。于是你左滑（因?yàn)橄禄叫碌膬?nèi)容了，只能左滑），但出現(xiàn)的卻是該up主的主頁，沒有定位到你看的那部分。而且該號(hào)已更新上千部電影，又不能搜索，那你只好乖乖退出。頁面的布局確實(shí)主次分明，但此時(shí)的展示狀態(tài)對(duì)用戶來說卻毫無重點(diǎn)。

抖音視頻播放頁面和up主個(gè)人中心

2.2 應(yīng)用對(duì)比

這是對(duì)信息進(jìn)行差異化展示最核心的做法，下圖展示的是常見的一些對(duì)比方式，這里不再贅述。

部分對(duì)比方法

2.3 輻射效應(yīng)

舉個(gè)例子，你正在公園跑步，碰巧特朗普也跟在你后面跑，此時(shí)不但他是大眾的焦點(diǎn)，你也會(huì)備受關(guān)注，雖然和你沒半毛錢關(guān)系。一句話總結(jié)就是：在最為突出的內(nèi)容旁邊，放置任何內(nèi)容都會(huì)比原來的位置突出，即輻射效應(yīng)（由于筆者讀書少，在平面設(shè)計(jì)中沒找到對(duì)應(yīng)的理論名稱，于是暫且也稱為“輻射效應(yīng)”吧）。

那怎么把這種現(xiàn)象應(yīng)用在實(shí)際設(shè)計(jì)中呢？簡(jiǎn)單的做法就是把非核心但用戶最好能了解的信息，放在很突出的內(nèi)容旁邊，例如下方這個(gè)圖最突出的內(nèi)容就是那個(gè)紅色按鈕了?！白詣?dòng)”幫用戶同意協(xié)議，但又要在不打擾用戶的前提下告訴用戶，此時(shí)將該行文案放在紅色按鈕旁邊就很好地達(dá)到了目的。

小紅書登錄頁

再比如夕夕這個(gè)活動(dòng)要通過限時(shí)來營造緊迫感，這個(gè)信息不是很重要但又必須刻到用戶腦子里，于是給它安排在了最為明顯的金額下方（如下圖）。該行文字可以說是整個(gè)頁面中最小的，但它依然不容易被忽略，這就是輻射效應(yīng)帶來的效果。

拼多多“天天領(lǐng)現(xiàn)金”頁面

2.4 視線引導(dǎo)

《Framed ink》書中插圖

上面那張圖你最后是不是把目光停留在右上角的那幾個(gè)小人？他們沒出現(xiàn)在左上角（“F”視覺模型最突出的位置）、面積非常小、也沒有使用顏色突出，那你為什么還要盯著他們看？因?yàn)榫褤羰衷诳此麄儭尶谝矊?duì)準(zhǔn)了他們。這就是使用特定的指示性元素來引導(dǎo)視線的效果。

常見的有眼睛看的方向、手指向的方向、箭頭、線條引導(dǎo)（如下圖，雖然云占的面積挺大，但你關(guān)注的卻是山頂?shù)奈恢茫┑龋淠康脑谟谝龑?dǎo)視線落腳點(diǎn)。

《Framed ink》書中插圖

那么這種方式怎么應(yīng)用在頁面設(shè)計(jì)中呢？先依葫蘆畫瓢唄，比如這種活動(dòng)頁（下圖）也用一些透視線條把視線往中間的紅包引導(dǎo)。

京東城城分現(xiàn)金活動(dòng)頁

還有這種使用帶箭頭的底圖（下圖），將視線引導(dǎo)至下方紅包等。

支付寶炸年獸彈窗

2.5 使用提示

使用提示來傳達(dá)重點(diǎn)信息，這種方式太普遍了，我們常見的通告、各種指示牌都屬于這類，而軟件界面中常見的有各種toast、彈窗、小紅點(diǎn)、標(biāo)簽、狀態(tài)改變、指示性元素（如箭頭）等等。在使用提示時(shí)要注意以下兩點(diǎn)：

2.5.1 反饋提示應(yīng)當(dāng)位于中央視覺區(qū)

人眼在瀏覽信息時(shí)會(huì)存在兩個(gè)區(qū)域：邊界視覺區(qū)和中央視覺區(qū)。邊界視覺區(qū)內(nèi)的東西是看不清的，而且越位于邊界的位置越不容易注意到；而中央視覺區(qū)（焦點(diǎn)區(qū)域）是人眼關(guān)注的重點(diǎn)，里面的信息是清楚的，如下圖。

視覺中央?yún)^(qū)示意

因此反饋提示如果位于邊界視覺區(qū)，基本就失去意義了。例如某購物應(yīng)用將商品加入心愿單的操作， “已加入心愿單”的提示位于頂部（如右圖），而用戶此時(shí)的中央視覺區(qū)卻在“心愿單”icon附近，基本就注意不到了。

小紅書加入心愿單流程

當(dāng)然這個(gè)案例中“心愿單”狀態(tài)的改變（線框變黃色面狀）就已經(jīng)起到提示作用了，toast不是很有必要。但是輕提示要求不能干擾用戶當(dāng)前任務(wù)，但是又要讓用戶知道，這樣看似矛盾的要求除了使用改變狀態(tài)的方式，還可以使用動(dòng)效。例如iPhone調(diào)節(jié)音量的提示，剛開始調(diào)節(jié)的時(shí)候彈出較大圖形（左圖），即使位于邊界視覺區(qū)也能感知到。連續(xù)調(diào)節(jié)則展示一根小豎條（右圖），減少對(duì)用戶干擾。

iPhone音量調(diào)節(jié)提示

2.5.2 避免干擾用戶，對(duì)提示進(jìn)行分級(jí)

即按照重要程度將提示分成強(qiáng)提示（一般是彈窗）、弱提示（弱toast）等等。

03 怎么驗(yàn)證是否突出了重點(diǎn)

看到標(biāo)題，兄弟們可能要吐槽了：“這還要驗(yàn)證？我一眼都能看出來。”那么下面這個(gè)頁面你能一眼看出哪些是重點(diǎn)信息，并立馬根據(jù)突出程度排個(gè)序嗎？

淘寶特價(jià)版“我的”

是不是感覺紅紅火火、恍恍惚惚，得花點(diǎn)時(shí)間思考思考對(duì)吧？

我認(rèn)為使用這幾種方法去驗(yàn)證還是挺有效的：

5s測(cè)試：

這么短的時(shí)間只能形成對(duì)頁面的整體印象，可以讓測(cè)試者邊看邊說，記錄看到的先后順序。如果這個(gè)順序和你設(shè)定的優(yōu)先級(jí)基本一致，那么你的目的就達(dá)到了；

首次點(diǎn)擊測(cè)試：

如果用戶首次點(diǎn)擊的剛好是你想突出的內(nèi)容，那么就成功了，否則后面大概率的操作都是錯(cuò)誤的；

A/B測(cè)試：

可以根據(jù)完成某項(xiàng)任務(wù)的時(shí)間來確認(rèn)哪種方案更好，比如讓測(cè)試者完成“你覺得這文章寫得太菜了，于是給作者點(diǎn)個(gè)贊嘲諷他”這個(gè)任務(wù)，測(cè)試者從接受任務(wù)到完成點(diǎn)贊所用時(shí)間最短的方案基本就是你想要的；

眼動(dòng)測(cè)試：

5秒測(cè)試中用戶說的順序可能不是真實(shí)的想法，但眼動(dòng)測(cè)試可以直接查看用戶關(guān)注的區(qū)域，真實(shí)性更好；

數(shù)據(jù)驗(yàn)證：

一般看曝光量（如曝光uv等）和曝光點(diǎn)擊率，至于轉(zhuǎn)化等數(shù)據(jù)更多受產(chǎn)品策略、業(yè)務(wù)投入影響，對(duì)于是否突出了重要信息沒什么參考意義。

需注意的是，如果曝光量上去了，但是點(diǎn)擊率卻下降了，此時(shí)得看看這些曝光量是不是有效曝光，比如左圖中的A曝光量是不如右圖的，但是其曝光點(diǎn)擊率卻高于右圖；

案例說明

或者你想突出的重點(diǎn)信息壓根不是用戶關(guān)注的，那么可能得重新布局了。

要說清楚這些測(cè)試方法具體怎么操作恐怕還得多寫幾篇文章，而且都能在網(wǎng)上查到，這里不再贅述（其實(shí)是不想寫了）。

04 總結(jié)

突出重點(diǎn)信息關(guān)鍵是要引起注意，通過運(yùn)用對(duì)比、輻射、視線引導(dǎo)等方式達(dá)到目的，需保證的是在該場(chǎng)景下你想優(yōu)先展示的信息一定是用戶最為關(guān)注的。

作者：覃黎 核心交易產(chǎn)研中心交互設(shè)計(jì)師??? 公眾號(hào)：蘇寧設(shè)計(jì)

本文由 @蘇寧設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自pexels，基于CC0協(xié)議。