為什么同樣尺寸的圓形看起來(lái)比方形的?。?

字體設(shè)計(jì)師不會(huì)把所有字母都設(shè)計(jì)得一樣高。他們會(huì)注意到人類視覺(jué)的特殊性，所以他們會(huì)使用光學(xué)技巧創(chuàng)造一個(gè)和諧的、可讀的、平衡的字體。

在上圖中，一個(gè)正方形、一個(gè)三角形和一個(gè)圓在幾何上是相等的。然而，我們的眼睛卻認(rèn)為三角形和圓形偏小。這是因?yàn)檫@三種形狀有不同的重量。從字體上講，就是黑色的數(shù)量分布并不均勻。

有兩種方式能夠使得它們保持視覺(jué)平衡：

A. 計(jì)算兩個(gè)形狀的面積，并保持它們相等

我不喜歡使用這種方法，因?yàn)樗贿m用于簡(jiǎn)單的形狀，如三角形、圓形和菱形。這種方法對(duì)于復(fù)雜的視覺(jué)效果不太有效。

B. 使尺寸更大、超出和模糊形狀是測(cè)試視覺(jué)重量最簡(jiǎn)單的方法

• 1）使非正方形的形狀變大(三角形、箭頭、破折號(hào)、線性圖標(biāo)等)
• 2）超出圖標(biāo)規(guī)范中的圓形邊界框
• 3）把圖形變模糊，比如加上高斯模糊，比較產(chǎn)生的視覺(jué)斑點(diǎn)大小，調(diào)整至差不多大?。ㄖ饕强茨：吘壍某叽纾屑?xì)觀察下面這張圖，對(duì)比看看效果。

現(xiàn)在你應(yīng)該明白了為什么非方形/圖標(biāo)看起來(lái)比方形小，讓我們看看真正的圖標(biāo)和 UI 元素如何使用這些光學(xué)原理變得更好。 

在設(shè)計(jì)整套圖標(biāo)時(shí)，確保它們的平衡是至關(guān)重要的。為了保持平衡，在圖標(biāo)背板和圖標(biāo)區(qū)域之間留出額外的空間，并允許非方形圖標(biāo)超出圖標(biāo)區(qū)域。

另一個(gè)例子是一個(gè)矩形的UI元素和一個(gè)圓形按鈕放在一起。如果圓形按鈕的高度與矩形UI元素相同，那么圓形按鈕看起來(lái)會(huì)更小。基于光學(xué)校正原理，你需要區(qū)別對(duì)待這兩個(gè)元素。 

看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你覺(jué)得哪一個(gè)更正確?請(qǐng)?jiān)诹粞詤^(qū)發(fā)表你的看法。

2. 為什么看起來(lái)總是不太圓？

還有比正方形更正方形的嗎?

我們的眼睛有古怪的視覺(jué)感知，我們看到的事物與現(xiàn)實(shí)不同。下面是一個(gè)類似的小測(cè)試，你覺(jué)得哪個(gè)圓和哪個(gè)方更標(biāo)準(zhǔn)?

在這些橢圓和矩形中，一個(gè)是正圓，一個(gè)是正正方形。我已經(jīng)修改了正確的，但他們似乎更對(duì)稱了，這是因?yàn)榇怪?水平錯(cuò)覺(jué)。(彩云注：右邊是調(diào)整過(guò)的，看起來(lái)會(huì)更圓和更正) 

大多數(shù)幾何字體不是幾何圖形。字體設(shè)計(jì)師通過(guò)牢記人類的視覺(jué)感知來(lái)設(shè)計(jì)高質(zhì)量的字體。他們幾乎在每個(gè)字母中都使用光學(xué)原理，以使字體保持平衡。

你從上面的測(cè)試中應(yīng)該明白了我的意思。要了解更多，請(qǐng)看下面的圖片。我把字母“O”從幾何字體Futura放在一個(gè)完美的圓圈旁邊。你覺(jué)得哪一個(gè)看起來(lái)更對(duì)稱?

你甚至在底部文字出現(xiàn)之前就猜到了，對(duì)吧?來(lái)自Futura的字母“O”比完美的圓更寬，但看起來(lái)更對(duì)稱。原因是，我們的眼睛傾向于看到的垂直區(qū)域比水平區(qū)域要長(zhǎng)，即使它們是相同的。 

讓我們看看這個(gè)錯(cuò)覺(jué)是如何出現(xiàn)在字母“T”上的。 

在上圖中，水平筆畫的粗細(xì)要小于垂直筆畫的粗細(xì)，以避免產(chǎn)生錯(cuò)覺(jué)。你可以在設(shè)計(jì)方形圖標(biāo)、方形背景或頭像邊框等時(shí)使用這個(gè)技巧。 

3、為什么這個(gè)圓角看起來(lái)還很硬？

如何使駕駛盡可能平穩(wěn)?

設(shè)計(jì)字體字形就像開車。當(dāng)我們開車時(shí)，如果已經(jīng)在彎道的起點(diǎn)時(shí)，我們不會(huì)轉(zhuǎn)動(dòng)方向盤，只是在到達(dá)彎道前稍作自然轉(zhuǎn)彎，以免發(fā)生意外。

字體設(shè)計(jì)者不依賴于圖形編輯軟件的預(yù)設(shè)弧度。他們會(huì)調(diào)整曲線使其更平滑，因?yàn)樗麄冎廊搜劭梢粤⒓醋⒁獾街本€突然變成曲線的點(diǎn)。

讓我們看看這兩種曲線：純幾何和微調(diào)。試著觀察哪一個(gè)干擾了你的眼睛，哪一個(gè)是光滑的。

讓我們看看在UI設(shè)計(jì)中我們可以在哪些地方融入這種學(xué)習(xí)。

你可能已經(jīng)注意到右邊的按鈕、圖標(biāo)和框架看起來(lái)更賞心悅目。而左邊的曲線有一個(gè)很硬的從直線到曲線的過(guò)渡。

我們?nèi)绾涡拚€呢?在設(shè)計(jì)時(shí)，可以進(jìn)入形狀編輯模式，手動(dòng)調(diào)整曲線手柄的大小，如下圖所示。

4、為什么同樣的間距卻看起來(lái)雜亂無(wú)章？

為什么眼睛的判斷比數(shù)值參數(shù)更重要?

間距是字體設(shè)計(jì)中最關(guān)鍵的部分。字體設(shè)計(jì)師根據(jù)字母的形狀對(duì)字母進(jìn)行組合，并以不同的間距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它們一起出現(xiàn)，那么它們之間的間距會(huì)有點(diǎn)寬，需要減少間距。這有助于形成和諧的字體。

字體來(lái)源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap 

現(xiàn)在，讓我們看看如何將這個(gè)知識(shí)點(diǎn)運(yùn)用到視覺(jué)設(shè)計(jì)的其他方面。你可能已經(jīng)注意到，在圓形或矩形容器中放置三角形圖標(biāo)會(huì)使圖標(biāo)顯得不協(xié)調(diào)。這僅僅是因?yàn)楫?dāng)用軟件來(lái)對(duì)齊的容器中，三角形的面積兩邊是不相等的?？纯聪旅娴膱D片，可以用視覺(jué)解釋來(lái)理解它。

為了使三角形在其容器內(nèi)具有光學(xué)中心，我們需要平衡兩邊的重量。對(duì)于三角形，你可以找到質(zhì)心，并將其與容器的中心對(duì)齊。現(xiàn)在，如果三角形是用形狀工具創(chuàng)建的，Adobe Illustrator會(huì)提供質(zhì)心的提示。

如果沒(méi)有看到質(zhì)心提示，也不要擔(dān)心。質(zhì)心可以通過(guò)簡(jiǎn)單地畫線從任何兩個(gè)邊的中心到它們對(duì)面的頂點(diǎn)來(lái)定位。查看下面的圖片來(lái)更好地理解它。

這種方法只適用于幾何形狀。對(duì)于其他更復(fù)雜的形狀，你需要依靠你的眼睛判斷，而不是數(shù)學(xué)參數(shù)。

需要記住的是:如果你為開發(fā)者切圖時(shí)，你需要在圖標(biāo)周圍保留一些區(qū)域，這樣他們就可以將圖標(biāo)放在背景的中央。

從圖標(biāo)的質(zhì)心畫一個(gè)圈，留下它周圍的額外區(qū)域。

讓我們檢查一下，可以在留言區(qū)討論下到底哪個(gè)公司使用了錯(cuò)誤的資源？ 

5、明明一樣大，卻顯得頭重腳輕？

如何平衡? 

你有沒(méi)有仔細(xì)注意過(guò)字母“B”?它的底部被設(shè)計(jì)得比頂部大。如果我們?cè)O(shè)計(jì)的兩個(gè)半圓在數(shù)學(xué)上是相等的，它會(huì)看起來(lái)不平衡(檢查左圖)。這是因?yàn)槲覀冞M(jìn)化到從“視角”的概念來(lái)處理物理世界，在這個(gè)概念中，遠(yuǎn)處的物體看起來(lái)比附近的物體更小。（彩云注：可以理解為當(dāng)你在山腳時(shí)看到的山腳物體要比看山頂?shù)囊?，透視原理?

在印刷中，這意味著要使字體同樣平衡，就需要在底部畫得更重。

讓我們通過(guò)翻轉(zhuǎn)字體中的幾個(gè)字母來(lái)看到明顯的區(qū)別。

字體來(lái)源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap 

同樣的概念適用于其他水平對(duì)稱的字母形式，甚至在字母“H”的交叉杠是放在實(shí)際的中心以上，使它看起來(lái)更平衡。

所以，下次當(dāng)你設(shè)計(jì)一個(gè)水平的圖標(biāo)或標(biāo)志時(shí)，使用這種底部重的技巧來(lái)讓它在視覺(jué)上更加平衡。 

6、為什么明明在一條線上看起來(lái)卻總是錯(cuò)位？

這種錯(cuò)覺(jué)也被稱為“波根多夫錯(cuò)覺(jué)”( Poggendorff illusion)，這是一種奇怪的現(xiàn)象，會(huì)扭曲我們對(duì)形狀相交角度不是90°的感知。出于某種原因，我們的大腦很難推斷出一條被其他形狀部分覆蓋的線，從而導(dǎo)致連續(xù)性的中斷。為了更好地理解它，先看看下面例子中的左邊的圖，看看哪條線是連續(xù)的，A還是B?然后檢查我縮小了封面線的右邊的圖片。我希望你明白我的意思。 

在拉丁字體中，' X '或' x '就是這種錯(cuò)覺(jué)的受害者，需要特殊處理使其看起來(lái)更自然。字體設(shè)計(jì)者稍微偏移對(duì)角線，以矯正X或X的光學(xué)效果。(彩云注：右邊是調(diào)整后的，視覺(jué)上看更加連續(xù)) 

如果你在為其他語(yǔ)言設(shè)計(jì)字體或?yàn)锳PP設(shè)計(jì)圖標(biāo)集時(shí)遇到類似的問(wèn)題，你可以嘗試像在字母“X”中那樣偏移斜線。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：彩云Sky    來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

如何讓自己的產(chǎn)品在保證基本的可用性和易用性的同時(shí)，還能讓界面看起來(lái)柔和、更富有親和力？一個(gè)產(chǎn)品能留住用戶的雖然是內(nèi)容本身的質(zhì)量與吸引力，但一個(gè)小小的細(xì)節(jié)卻能夠阻止用戶的流失，成為內(nèi)容轉(zhuǎn)化的最后一道防線，讓人眼前一亮，值得借鑒。

076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)

077.「搜狗輸入法」“跨界”復(fù)制/粘貼

078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律

079.「躺平」趣味化的“擊掌”點(diǎn)贊

080.「QQ音樂(lè)」導(dǎo)入外部歌單-不同的設(shè)備/賬號(hào)歌單無(wú)縫對(duì)接

081.「微信」簡(jiǎn)便且高效的圖片翻譯功能

082.「橙」不一樣的的登錄方式

083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效

084.「愛(ài)奇藝閱讀」性別選擇-更明確的指引和提示

085.「餓了么」合適的時(shí)間、合適的提醒

086.「搜狗輸入法」教你少打字、多開掛

087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂

088.「優(yōu)酷」個(gè)性化彈幕設(shè)置-看劇調(diào)侃兩不誤

089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜

090.「微信讀書」模擬現(xiàn)實(shí)的行為動(dòng)作

076.「百度地圖」出行前的“極端”天氣預(yù)報(bào)

產(chǎn)品體驗(yàn)：

使用百度地圖，導(dǎo)航路線規(guī)劃后，會(huì)出現(xiàn)當(dāng)日的天氣提醒，點(diǎn)擊進(jìn)入即可查看每個(gè)時(shí)段的天氣預(yù)報(bào)。

設(shè)計(jì)思考：

“賭博看運(yùn)氣，出行看天氣”，任何時(shí)候，大家如果優(yōu)先知道天氣情況就可以提前做好準(zhǔn)備，這對(duì)人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問(wèn)題的重要因素，所以提前預(yù)知天氣的重要性可想而知。

使用百度地圖APP，導(dǎo)航路線規(guī)劃后，出行方式的下方會(huì)提示最近可能影響到出行問(wèn)題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過(guò)點(diǎn)擊進(jìn)入，查看每個(gè)小時(shí)的天氣詳情，對(duì)于時(shí)間不是很敏感的用戶來(lái)說(shuō)，為了錯(cuò)開惡劣的天氣，提前或延遲出行也是一種不錯(cuò)的選擇。

077.「搜狗輸入法」“跨界”復(fù)制/粘貼

產(chǎn)品體驗(yàn)：

電腦和移動(dòng)端都使用搜狗輸入法，且在同一個(gè)賬號(hào)登錄的情況下，電腦端出現(xiàn)文字復(fù)制的操作后，可在移動(dòng)端設(shè)備任何位置的輸入框內(nèi)直接粘貼，非常便捷。

設(shè)計(jì)思考：

輸入法給大部分用戶的第一感覺(jué)就是用來(lái)輸入文字的，哪個(gè)好用用哪個(gè)，一旦習(xí)慣了使用某個(gè)輸入法，基本就成了忠實(shí)用戶，不會(huì)隨意去改變。不過(guò)有時(shí)候輸入法只是輔助作用，并不需要直接使用，比如：我們?cè)陔娔X網(wǎng)頁(yè)看到自己喜歡的文案語(yǔ)錄時(shí)，想發(fā)個(gè)朋友圈，就需要先復(fù)制，再用電腦端微信發(fā)到手機(jī)微信，最后從手機(jī)微信復(fù)制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過(guò)自己碼字就會(huì)浪費(fèi)大量的時(shí)間。

搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實(shí)用的功能。最近發(fā)現(xiàn)了一個(gè)新的設(shè)計(jì)細(xì)節(jié)，讓人驚呼。當(dāng)電腦和手機(jī)端都使用搜狗輸入法且登錄同一個(gè)賬號(hào)時(shí)，在電腦端復(fù)制文字后，打開手機(jī)端任何輸入窗口，即可看到在電腦上復(fù)制的文字，直接粘貼即可，由被動(dòng)輔助變?yōu)橹鲃?dòng)攝取，再也不用通過(guò)聊天工具發(fā)送到手機(jī)端進(jìn)行二次復(fù)制的繁瑣操作了，實(shí)現(xiàn)“跨界”復(fù)制/粘貼，非常方便?？梢钥闯鰣F(tuán)隊(duì)站在用戶體驗(yàn)的角度上，對(duì)于輸入法使用場(chǎng)景的串聯(lián)考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠(chéng)度。

078.「支付寶」螞蟻森林/莊園-模擬現(xiàn)實(shí)世界的自然規(guī)律

產(chǎn)品體驗(yàn)：

在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場(chǎng)景，模擬現(xiàn)實(shí)世界中的自然規(guī)律，白天晴空萬(wàn)里、且有陽(yáng)光照射，夜晚滿天繁星、且有流星劃過(guò)，頗具真實(shí)感。

設(shè)計(jì)思考：

幾年前QQ牧場(chǎng)養(yǎng)殖、農(nóng)場(chǎng)偷菜，如今演變卻變成了支付寶的螞蟻莊園養(yǎng)小雞、森林偷能量，將以前的純游戲思維轉(zhuǎn)變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進(jìn)公益事業(yè)的發(fā)展，同時(shí)用戶也會(huì)得到心理上的滿足和成就感。螞蟻森林/莊園小游戲?qū)τ脩舢a(chǎn)生的粘性除了其模式的新穎，也離不開產(chǎn)品團(tuán)隊(duì)日夜刻苦鉆研所提升的用戶體驗(yàn)。

螞蟻森林/莊園的視覺(jué)場(chǎng)景跟隨著白天、夜晚的環(huán)境變化，產(chǎn)品遵循現(xiàn)實(shí)世界慣例來(lái)呈現(xiàn)信息，更具真實(shí)感，便于用戶在使用中將現(xiàn)實(shí)中的體驗(yàn)不經(jīng)意間帶入到游戲場(chǎng)景，可使其更加投入，通過(guò)用戶的現(xiàn)有認(rèn)知，以促成情感化的體驗(yàn)，使產(chǎn)品更具親和力。

079.「躺平」趣味化的“擊掌”點(diǎn)贊

產(chǎn)品體驗(yàn)：

在躺平APP對(duì)其他用戶的發(fā)表的動(dòng)態(tài)推薦時(shí)，使用了擊掌圖標(biāo)，且有光彩線條圍繞著掌心向四周擴(kuò)散的動(dòng)效樣式，趣味性十足。

設(shè)計(jì)思考：

推薦是對(duì)其事件/事務(wù)認(rèn)可的一種表達(dá)行為，最早可追溯到上古時(shí)代的堯舜禹時(shí)期，那時(shí)候如果對(duì)某件事或人，高度認(rèn)可時(shí)就使用鼓掌（慢速且有節(jié)奏）的方式來(lái)表達(dá)；到后面慢慢演變成了簡(jiǎn)單的一個(gè)字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語(yǔ)...表達(dá)?；诨ヂ?lián)網(wǎng)的發(fā)達(dá)，為了讓更多人發(fā)現(xiàn)其內(nèi)容資源的優(yōu)質(zhì)性，80%以上直接沿用了豎大拇指樣式來(lái)表達(dá)對(duì)內(nèi)容的認(rèn)可及贊許，即使有區(qū)別于其他產(chǎn)品，也是在局部或動(dòng)效樣式上做出一點(diǎn)改變。

躺平APP的點(diǎn)贊樣式較為新穎，使用了擊掌的圖標(biāo)，并且使用了光彩線條圍繞掌心向四周擴(kuò)散的動(dòng)效樣式，相比豎起大拇指則更加強(qiáng)烈，意味著喝彩，表達(dá)了對(duì)內(nèi)容的高度認(rèn)可，相較于同質(zhì)化嚴(yán)重的情況下作出了創(chuàng)新， 在過(guò)渡的時(shí)間差中，進(jìn)行了趣味化的表達(dá)，更具視覺(jué)沖擊力。

（“擊掌”的點(diǎn)贊方式適合用于類似躺平、動(dòng)漫、B站等二次元或個(gè)性化的產(chǎn)品中，如果用于工具、新聞、電商等類型產(chǎn)品，可能會(huì)對(duì)用戶產(chǎn)生干擾，慎用）

080.「QQ音樂(lè)」導(dǎo)入外部歌單-不同的設(shè)備/賬號(hào)歌單無(wú)縫對(duì)接

產(chǎn)品體驗(yàn)：

在QQ音樂(lè)我的頁(yè)面，使用“導(dǎo)入外部歌單”功能，根據(jù)提示，即可把其他音樂(lè)應(yīng)用里歌曲添加到QQ音樂(lè)歌單。

設(shè)計(jì)思考：

現(xiàn)在聽歌早已不像以前，一張內(nèi)存卡或一根數(shù)據(jù)線就可以把手機(jī)里的歌曲轉(zhuǎn)移它處?；谌藗兩钏降奶岣撸瑪?shù)據(jù)流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無(wú)需下載（除非深山老林或地洞沒(méi)有信號(hào)）占用手機(jī)內(nèi)存，創(chuàng)建一個(gè)歌單，把自己喜歡的收藏起來(lái)，即時(shí)聽歌，非常方便，如果沒(méi)有特別的情況，成為了一款音樂(lè)應(yīng)用的忠實(shí)用戶后，基本不會(huì)頻繁轉(zhuǎn)移。

QQ音樂(lè)的導(dǎo)入外部歌單功能，可將其他音樂(lè)APP的歌單添加到QQ音樂(lè)自己的歌單里。對(duì)于導(dǎo)入外部歌曲，很多用戶沒(méi)有什么概念，感覺(jué)自己用不上，別忘了蝦米音樂(lè)“尸骨未寒”，很多事情不是沒(méi)有可能發(fā)生，當(dāng)一旦需要時(shí)，這個(gè)功能就是“救命稻草”，可以想象，如果通過(guò)手動(dòng)把以前的幾百首歌曲一首一首的添加到歌單，不知道會(huì)不會(huì)“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯(cuò)的音樂(lè)交友方式，實(shí)現(xiàn)不同設(shè)備、賬號(hào)的音樂(lè)歌單無(wú)縫對(duì)接。    

081.「微信」簡(jiǎn)便且高效的圖片翻譯功能

產(chǎn)品體驗(yàn)：

在微信的聊天對(duì)話框中打開英文圖片，點(diǎn)擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。

設(shè)計(jì)思考：

在我們的生活中，有時(shí)候多多少會(huì)遇到一些英文，比如進(jìn)口食品包裝、藥物說(shuō)明、護(hù)膚品等，其中就有一部分是純英文說(shuō)明，無(wú)論自己多么博學(xué)多才，但不見(jiàn)得都能理解英文。記得之前有一次，我自己的電腦藍(lán)屏，出現(xiàn)的全是英文，雖然自己也是一直提倡用互聯(lián)網(wǎng)解決問(wèn)題，且也有一些拍譯軟件，但一想著需要下載注冊(cè)，沒(méi)準(zhǔn)兒還要先看廣告或收費(fèi)，且天生對(duì)英文有一種與生俱來(lái)陌生感，還未開始便放棄了，于是成了伸手黨，去請(qǐng)求別人幫助。

微信的圖片翻譯功能就是專為解決這一問(wèn)題而生。通過(guò)在對(duì)話框中點(diǎn)擊圖片直接翻譯，看到一道綠色的光由上而下掃過(guò)之后，圖片中的英文就變成了中文，著實(shí)方便，比起以前通過(guò)第三方或先提取圖片中的文字來(lái)翻譯，操作簡(jiǎn)單且效率還提升了很多，可以說(shuō)是一個(gè)非常實(shí)用的小功能。

082.「橙」不一樣的的登錄方式

產(chǎn)品體驗(yàn)：

在橙APP的登錄頁(yè)面，區(qū)別了常見(jiàn)的登錄界面樣式，使用對(duì)話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業(yè)屬性。

設(shè)計(jì)思考：

在任何應(yīng)用中，要想有自己的“私密”領(lǐng)地，都繞不開登錄/注冊(cè)的流程，但凡手持智能手機(jī)又想玩的開的用戶，對(duì)登錄的流程是非常熟悉的，比如手機(jī)號(hào)+驗(yàn)證碼、一鍵登錄、第三方登錄，無(wú)外乎這幾種常規(guī)的登錄方式，如果想來(lái)點(diǎn)“刺激”的，無(wú)非就是加個(gè)logo、貼個(gè)插圖、來(lái)點(diǎn)動(dòng)效等，見(jiàn)怪不怪了。

橙APP的登錄方式雖然同樣是手機(jī)號(hào)+驗(yàn)證碼登錄，但在流程樣式上卻非常新穎。鑒于應(yīng)用本身屬于社交行業(yè)，通過(guò)對(duì)話詢問(wèn)的方式讓用戶按照流程輸入了手機(jī)號(hào)和驗(yàn)證碼，給用戶造成這不是對(duì)使用該APP設(shè)置門檻的錯(cuò)覺(jué)，降低用戶的防備心理（很多產(chǎn)品用戶量的增長(zhǎng)都被擋在了登錄之門外），讓用戶不知不覺(jué)在聊天過(guò)程中完成了登錄流程操作，其方式非常友好且登錄的過(guò)程是愉快的，同時(shí)還兼帶了濃濃的社交行業(yè)屬性，通過(guò)更直觀的登錄場(chǎng)景感受，拉近用戶跟產(chǎn)品之間的距離，使用戶的印象更加深刻。

083.「高德地圖」桌面一鍵導(dǎo)航-出行更高效

產(chǎn)品體驗(yàn)：

通過(guò)高德地圖的收藏夾，點(diǎn)擊收藏地址右側(cè)的功能菜單，在彈窗中將該地址“添加快捷導(dǎo)航到桌面”，后續(xù)就不用每次輸入常用的目的地了，直接通過(guò)桌面的圖標(biāo)入口即可一鍵導(dǎo)航。

設(shè)計(jì)思考：

對(duì)于在外的工作人員，導(dǎo)航算是手機(jī)必備的軟件，以前只是純粹的導(dǎo)航認(rèn)路，而隨著汽車量的增長(zhǎng)，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會(huì)習(xí)慣性打開地圖導(dǎo)航，隨時(shí)觀察路線擁堵情況來(lái)思考是否有更換更優(yōu)路線的需求，于是就按照慣例打開導(dǎo)航、錄入目的地、選擇路線......等一系列的常規(guī)操作，日復(fù)一日，似乎沒(méi)有覺(jué)得什么不妥。

高德地圖的桌面一鍵導(dǎo)航功能，為長(zhǎng)期有駕駛需求的用戶提供了更為便捷的操作，將經(jīng)常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導(dǎo)航便捷入口，有需要時(shí)桌面點(diǎn)擊即可，系統(tǒng)將自動(dòng)規(guī)劃最優(yōu)路線，通過(guò)最便捷的方式一鍵導(dǎo)航，再也不用日復(fù)一日的重復(fù)之前的操作了。站在設(shè)計(jì)師的角度，在解決用戶需求時(shí)，操作越復(fù)雜、步驟越多，用戶的選擇條件、視覺(jué)負(fù)擔(dān)及時(shí)間成本就越多，出錯(cuò)的情況也越多，故而用戶流失的可能性就越大。高德地圖通過(guò)一鍵導(dǎo)航簡(jiǎn)化操作流程，通過(guò)合理的操作路徑，降低用戶時(shí)間成本，有效提升了使用頻率及粘性。

084.「愛(ài)奇藝閱讀」性別選擇-更明確的指引和提示

產(chǎn)品體驗(yàn)：

首次進(jìn)入愛(ài)奇藝閱讀APP，在性別選擇頁(yè)面中，男生和女生的頭像通過(guò)動(dòng)畫的形式反復(fù)左右替換，用強(qiáng)視覺(jué)提醒的方式推動(dòng)用戶進(jìn)行選擇操作，以便于提供更匹配的內(nèi)容資源。

設(shè)計(jì)思考：

大部分新聞或閱讀類型的APP，在用戶首次進(jìn)入應(yīng)用時(shí)，都有類似性別、行業(yè)、愛(ài)好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內(nèi)容資源來(lái)提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無(wú)需要直接跳過(guò)即可。

愛(ài)奇藝閱讀首次即進(jìn)入APP時(shí)，以動(dòng)態(tài)的性別頭像插圖反復(fù)左右切換的動(dòng)效方式來(lái)提示有用戶選擇性別，相比常見(jiàn)的靜態(tài)按鈕直接顯示在那里會(huì)更加友好，不會(huì)過(guò)于生硬、冷冰冰，其動(dòng)畫視覺(jué)樣式給予明確的指引和提示，更能引起用戶的注意，通過(guò)強(qiáng)烈的視覺(jué)提醒促使用戶更高效的完成當(dāng)前任務(wù)。

類似這種選擇且非強(qiáng)制性的前置頁(yè)面，很多設(shè)計(jì)師只是按部就班當(dāng)做一個(gè)流程，其實(shí)要想做好并非僅僅如此，可以通過(guò)趣味化、情感化、動(dòng)效等方式增強(qiáng)用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進(jìn)入應(yīng)用之后所看的內(nèi)容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉(zhuǎn)化，所以應(yīng)用中，用戶的前置選擇對(duì)產(chǎn)品的重要性可想而知。

085.「餓了么」合適的時(shí)間、合適的提醒

產(chǎn)品體驗(yàn)：

如果在餓了么有正在進(jìn)行中的訂單，再次進(jìn)入應(yīng)用時(shí)，右下角會(huì)提供一個(gè)查看的快捷入口，點(diǎn)擊可快速進(jìn)入該訂單查看進(jìn)度或騎手配送狀態(tài)。

設(shè)計(jì)思考：

隨著外賣行業(yè)的普及，給我們的生活帶來(lái)了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時(shí)間在外賣平臺(tái)上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們?nèi)サ晖局泻偷昀锏牡却龝r(shí)間，特別是對(duì)上班族來(lái)說(shuō)，真的是太便利了。不過(guò)外賣平臺(tái)不像京東淘寶-人們可以無(wú)憂無(wú)慮的逛上幾個(gè)小時(shí)，通常都是目標(biāo)明確的用戶，在短時(shí)間內(nèi)完成自己的需求，要么下單、要么查看配送進(jìn)度。

如果在餓了么有訂單存在，再次進(jìn)入首頁(yè)，右下角會(huì)提示配送信息，點(diǎn)擊直接進(jìn)入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會(huì)遮擋部分內(nèi)容。其實(shí)并非如此，是因產(chǎn)品根據(jù)用戶的使用場(chǎng)景進(jìn)行行為預(yù)判而設(shè)計(jì)的快捷入口，在正常情況下，從下單到完結(jié)一般在30分鐘左右，如果用戶存在未完結(jié)訂單且在短時(shí)間內(nèi)再次進(jìn)入平臺(tái)，80%以上的用戶此時(shí)需求為查詢配送進(jìn)度，因此，右下角的進(jìn)度提示正是在合適的時(shí)間給予用戶合適的提醒，根據(jù)用戶的場(chǎng)景需求提供了最為便捷的解決方案，由此可見(jiàn)、利大于弊。

086.「搜狗輸入法」教你少打字、多開掛

產(chǎn)品體驗(yàn)：

進(jìn)入搜狗輸入法的設(shè)置中，可開啟開掛模式，里面的三連發(fā)、回聲、重要的事情說(shuō)三遍分別對(duì)應(yīng)不同的效果。

設(shè)計(jì)思考：

搜狗輸入法在業(yè)界雖不敢說(shuō)是最牛，但一定是數(shù)一數(shù)二的存在，發(fā)展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現(xiàn)在更是研發(fā)了很多“黑科技”。

從搜狗輸入法左側(cè)的logo中進(jìn)入工具選項(xiàng)，在設(shè)置中即可選擇開掛模式（真實(shí)效果見(jiàn)上圖）。正如字面的意思，搜狗輸入法通過(guò)智能幫助用戶自動(dòng)完成一些列的復(fù)制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡(jiǎn)單、輕松完成，方便用戶在開懟、賣萌、刷屏過(guò)程中直接碾壓對(duì)方的打字速度。開掛功能可謂是實(shí)用性與趣味性兼?zhèn)?，讓我們?cè)谌粘Ｖ?，面?duì)不同的社交需求時(shí)帶來(lái)貼心的改變。

（凡事有一個(gè)度，刷屏如果沒(méi)有用對(duì)場(chǎng)景，可能會(huì)遭到對(duì)方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時(shí)間拿去拍領(lǐng)導(dǎo)、拍老板，后果就不說(shuō)了，刀可切菜亦可傷人）

087.「美團(tuán)」垃圾分類-解決餐后垃圾分類之憂

產(chǎn)品體驗(yàn)：

美團(tuán)我的頁(yè)面，推薦工具的“垃圾分類”功能，能幫助我們進(jìn)行識(shí)別因外賣產(chǎn)出的垃圾類型，便于跟線下對(duì)應(yīng)的垃圾桶“對(duì)號(hào)入座”，減少不必要的垃圾混合而增加清潔工人的工作量。

設(shè)計(jì)思考：

外賣平臺(tái)的興起，給我們的生活帶來(lái)了很大的便利，同時(shí)也產(chǎn)生了一些危害，首當(dāng)其沖就是環(huán)境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產(chǎn)出，確實(shí)在外賣行業(yè)普及后，亂扔垃圾的情況跟隨著瘋速增長(zhǎng)，雖然這些屬于個(gè)人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無(wú)端增加垃圾分類的工作難度。

美團(tuán)的“垃圾分類”功能對(duì)衛(wèi)生環(huán)保方面增添了一份力量，當(dāng)用戶不知道自己產(chǎn)出的生活垃圾是何種類型時(shí)，可通過(guò)查看常見(jiàn)垃圾類型提示或搜索來(lái)確定類型，方便用戶按類型將垃圾丟入對(duì)應(yīng)的垃圾桶，解決餐后垃圾分類之憂，幫助養(yǎng)成良好的垃圾分類習(xí)慣，助力垃圾分類落地。還能消除用戶對(duì)“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發(fā)展及環(huán)境保護(hù)貢獻(xiàn)自己的一份力量。

088.「優(yōu)酷」個(gè)性化彈幕設(shè)置-看劇互動(dòng)兩不誤

產(chǎn)品體驗(yàn)：

在優(yōu)酷APP開著彈幕看片時(shí)，可通過(guò)彈幕設(shè)置調(diào)整字體的不透明度、行數(shù)、大小及速度來(lái)設(shè)定最適合自己樣式。

設(shè)計(jì)思考：

彈幕，用戶非常熟悉的一個(gè)詞，很多時(shí)候在看影片時(shí)，彈幕里面的內(nèi)容遠(yuǎn)遠(yuǎn)要比影片帶來(lái)的樂(lè)趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動(dòng)視頻的觀看氛圍，讓活躍的用戶有了表達(dá)自我的動(dòng)力和熱情。但對(duì)于“鍵盤俠”來(lái)說(shuō)，僅僅在上方顯示的幾行彈幕根本無(wú)法滿足自己看影片互動(dòng)及調(diào)侃的需求。

優(yōu)酷的彈幕設(shè)置中，可以根據(jù)自己的實(shí)際需求對(duì)彈幕字體大小、透明度、區(qū)域等參數(shù)進(jìn)行設(shè)置，針對(duì)喜好調(diào)侃互動(dòng)的用戶來(lái)說(shuō)，使用滿屏半透明度字體樣式的彈幕無(wú)疑是最好的選擇，互動(dòng)看片兩不誤。

089.「隨便走」AR導(dǎo)航-“傻瓜”式操作，老少皆宜

產(chǎn)品體驗(yàn)：

使用隨便走導(dǎo)航，全程利用AR實(shí)景，通過(guò)3D立體形式的方向引導(dǎo)，幫助我們找到周邊的任何一個(gè)地方。

設(shè)計(jì)思考：

導(dǎo)航是我們出行必備的工具，目前高德和百度在該領(lǐng)域各自獨(dú)霸一方，看似很牛叉，但并不是萬(wàn)能的。比如老人操作起來(lái)有一定的難度，經(jīng)常各種功能找不到還說(shuō)不好用；又比如我們?cè)谀吧闹貞c市，可能你從這南面1樓進(jìn)去，北面就在20樓，毫不夸張，如果通過(guò)常規(guī)的地圖導(dǎo)航去找人，我建議你最好吃個(gè)早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。

隨便走APP是一款便捷式輕量導(dǎo)航工具，主打“讓生活樂(lè)趣一目了然”。利用“AR全息實(shí)景”的展現(xiàn)方式，改變了必須要有地圖的模式，對(duì)于我們找周邊的美食、酒店、公交、廁所、景點(diǎn)等需求，進(jìn)行穿透式3D立體指引，操作簡(jiǎn)單，不管前、后、左、右、上、下都有非常明顯的視覺(jué)引導(dǎo)，只有你想不到，沒(méi)有它找不到，對(duì)于長(zhǎng)期生活在大城市的用戶，交通復(fù)雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡(jiǎn)單，學(xué)習(xí)成本基本為零，對(duì)家中老人而言，也是一款不錯(cuò)的導(dǎo)航工具。

090.「微信讀書」模擬現(xiàn)實(shí)的行為動(dòng)作

產(chǎn)品體驗(yàn)：

在微信讀書的書架頁(yè)面，點(diǎn)擊書籍以及書本翻頁(yè)，都使模擬了現(xiàn)實(shí)生活中較為自然且真實(shí)的從書架拿書、及各個(gè)角度翻頁(yè)的效果。

設(shè)計(jì)思考：

看書APP雖然眾多，但真正能堅(jiān)持下去、養(yǎng)成習(xí)慣的沒(méi)有幾個(gè)人能做到，站在平臺(tái)的角度思考，畢竟書本的內(nèi)容是平臺(tái)無(wú)法修改的，除了提供優(yōu)質(zhì)的資源并給予方向指引外，其他便是通過(guò)設(shè)計(jì)體驗(yàn)來(lái)提升用戶的好感度了，

微信讀書APP從書架的拿書動(dòng)作到書本的翻頁(yè)，都模擬了現(xiàn)實(shí)生活中用戶看書的行為動(dòng)作，大家都知道，真正喜歡閱讀的人，是不會(huì)在意這些所謂的橫豎及交互效果的，但前面都說(shuō)了，這種人畢竟在于少數(shù)。因?yàn)槭鼙姷牟顒e，模擬現(xiàn)實(shí)其最主要的作用就是為了吸引眼球，模擬用戶的實(shí)際行為，將其代入真實(shí)的情境中，使用戶對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感，則看著更加舒心，待用戶提升忠誠(chéng)且養(yǎng)成看書習(xí)慣之后，這些作用就會(huì)慢慢變得微不足道。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：大漠飛鷹CYSJ    來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

從紙質(zhì)閱讀到屏幕閱讀，通過(guò)理解用戶從紙質(zhì)到屏幕閱讀行為的轉(zhuǎn)變，我們從傳統(tǒng)中文排印經(jīng)驗(yàn)中吸取對(duì)字體、間距、標(biāo)點(diǎn)的處理方式，跨越平面與UI不同終端的設(shè)計(jì)規(guī)范和實(shí)現(xiàn)手段。在UI設(shè)計(jì)的語(yǔ)境中調(diào)整中文排版策略，優(yōu)化手機(jī)百度圖文閱讀場(chǎng)景設(shè)計(jì)，提升手百用戶的閱讀體驗(yàn)。

· 屏幕閱讀與紙質(zhì)閱讀不同

人的閱讀習(xí)慣會(huì)根據(jù)閱讀環(huán)境而改變，包括文本的書寫格式、文本的媒介、語(yǔ)言符號(hào)等?；谄聊坏拈喿x行為，往往表現(xiàn)了如下特征：很少人會(huì)一字一句閱讀頁(yè)面，更多的是在瀏覽、關(guān)鍵詞確認(rèn)、非線性閱讀、有選擇性的閱讀。

· 設(shè)計(jì)差異點(diǎn)

UI設(shè)計(jì)與書籍排版不同之處在于：

第一、屏幕上可以實(shí)現(xiàn)更多的交互功能，增強(qiáng)了閱讀的沉浸感和交互體驗(yàn)。

第二、UI設(shè)計(jì)不可控因素更多。平面排版紙張和內(nèi)容固定可控，可以保證設(shè)計(jì)的精準(zhǔn)展示。但在UI設(shè)計(jì)中，想讓頁(yè)面達(dá)到和原本設(shè)計(jì)一模一樣的效果幾乎是不可能的，顯示屏幕尺寸的碎片化、內(nèi)容的靈活可變，都讓最后的展示效果多了很多不可預(yù)期。這就是為什么會(huì)有很多排版優(yōu)秀的印刷品設(shè)計(jì)，但UI中優(yōu)秀的排版設(shè)計(jì)卻特別少。

因此，針對(duì)屏幕閱讀的設(shè)計(jì)要注意：不能照搬文字排版規(guī)則，更要充分考慮屏幕與內(nèi)容的靈活可變，確保設(shè)計(jì)方案可實(shí)際落地。

· 明確設(shè)計(jì)目標(biāo)

本次設(shè)計(jì)改版主要針對(duì)手機(jī)百度——圖文落地頁(yè)部分，希望通過(guò)優(yōu)化文字展現(xiàn)、內(nèi)容排版提升閱讀體驗(yàn)。

CEA閱讀體驗(yàn)?zāi)Ｐ蛯⒂脩舻拈喿x體驗(yàn)分為舒適、效率、吸引三個(gè)緯度。

舒適（Comfort)：視覺(jué)負(fù)擔(dān)低，信息適量，看著不累、沒(méi)有信息壓迫感

效率（Efficiency）：重點(diǎn)信息突出，直觀性強(qiáng)，容易識(shí)別

吸引（Attraction）：頁(yè)面設(shè)計(jì)美觀，有吸引力

基于此模型，此次優(yōu)化方案中我們確定的設(shè)計(jì)目標(biāo)是：優(yōu)化內(nèi)容可讀性；提升閱讀效率；提升頁(yè)面美觀度。

· 優(yōu)化內(nèi)容可讀性

· 選擇屏顯友好字體

屏顯字體與印刷用字體最大的不同在于，屏顯字體受限于分辨率，無(wú)法做到印刷字體那么多細(xì)節(jié)的設(shè)計(jì)。目前屏顯漢字的設(shè)計(jì)方式一般是：

1、從字體的結(jié)構(gòu)入手，擴(kuò)大中宮的設(shè)計(jì)，字形設(shè)計(jì)看起來(lái)舒適放松，提升辨識(shí)度，相較于中宮內(nèi)縮的字體，呈現(xiàn)現(xiàn)代的明亮感。

2、字形簡(jiǎn)潔，平直少細(xì)節(jié)的筆畫有助于提高字體本身的辨識(shí)。

遍歷手百用戶常用手機(jī)的默認(rèn)字體，系統(tǒng)默認(rèn)字體都是使用屏顯友好字體。

· 選擇字重更全的字體

與紙質(zhì)閱讀相比，用戶在在屏幕閱讀中，會(huì)經(jīng)常進(jìn)行掃讀、關(guān)鍵詞確認(rèn)，而不是像在紙質(zhì)書上一字一句的讀。

目前我們提供給作者的能夠做重點(diǎn)信息區(qū)別的方式包括：文字加粗、風(fēng)格化二級(jí)標(biāo)題。但我們發(fā)現(xiàn)目前在一些安卓手機(jī)上，一些字體在增加字重后出現(xiàn)沾粘情況，不能保證可讀性。

字重，即字形的重量，字重的等級(jí)用來(lái)標(biāo)明同一字體家族不同粗細(xì)筆畫的字形。

但通常一個(gè)特定的字體家族僅會(huì)包含少數(shù)的可用重量。若一個(gè)指定的字重不存在時(shí)，CSS會(huì)就近匹配其他字重：較重的字重映射到更重的重量、較輕的字重會(huì)映射到更輕的重量。

目前落地頁(yè)代碼中字體的設(shè)置，安卓使用的第一順位的字體字重僅2檔字重，所以在小字場(chǎng)景和分辨率較低的安卓機(jī)型上，會(huì)匹配到更粗的字重，出現(xiàn)文字沾粘的情況。

我們調(diào)整了font-family中的字體適配順位，在安卓端優(yōu)先適配字重更全的字體，保證安卓端加粗字體的展現(xiàn)，優(yōu)化內(nèi)容可讀性。

· 提升閱讀效率

· 優(yōu)化字間距和行間距

閱讀場(chǎng)景下，文字的間距是影響閱讀效率的關(guān)鍵。文字的間距包括兩部分，第一是橫向字與字的間距；其次是縱向行與行的間距。

根據(jù)當(dāng)前現(xiàn)狀，再結(jié)合行業(yè)設(shè)計(jì)經(jīng)驗(yàn)，我們選擇了字號(hào)與行高倍數(shù)組合的一系列方案，進(jìn)行了眼動(dòng)實(shí)驗(yàn)和用戶訪談，確定用戶可接受的行間距為1.50-1.70的范圍，再通過(guò)對(duì)比不同機(jī)型下的屏幕顯示效果，以及不同檔位字體顯示效果、閱讀效率，最后確定了圖文落地頁(yè)正文文字在當(dāng)前方案基礎(chǔ)上縮字間距為0，擴(kuò)大行間距1.70倍行號(hào)的設(shè)計(jì)方案。

· 段落間距適配字號(hào)

圖文落地頁(yè)的定位是長(zhǎng)文閱讀場(chǎng)景，作者發(fā)文長(zhǎng)度的中位數(shù)是600-700字的范圍，以目前用戶使用量最多的iPhone11舉例，600-700字的文章長(zhǎng)度為2屏（純文字，無(wú)圖情況）。

對(duì)于長(zhǎng)文閱讀，用戶往往是缺乏耐心的。為讓用戶減少對(duì)長(zhǎng)文的“畏懼感”，調(diào)整文章段落間距，一篇長(zhǎng)文通過(guò)合理的分段，成為一段一段的短文，每結(jié)束一段短文，用戶都有機(jī)會(huì)進(jìn)行休息并獲得滿足感。

出于屏效考慮，當(dāng)前圖文落地頁(yè)段落間距不論用戶使用哪一檔字號(hào)，都為一個(gè)固定值。所以在調(diào)大字號(hào)的模式下，段落間距小，用戶難以區(qū)分；在小字模式下，段落間距又太大，降低了屏效。

優(yōu)化段落間距的設(shè)定，段落間距應(yīng)隨著字號(hào)的變化對(duì)應(yīng)做出變大或變小的調(diào)整。調(diào)整后的最大字號(hào)與最小字號(hào)段落間距都更合適，閱讀節(jié)奏更好。

· 頁(yè)面美觀，提升吸引力

書籍排版中“微觀字體排印”中一直都關(guān)注字距、行距、標(biāo)點(diǎn)符號(hào)等排版調(diào)整，這些排印規(guī)則大部分源于文字本身的規(guī)律，排版風(fēng)格和規(guī)范，并不隨著設(shè)計(jì)潮流而輕易改變，是需要在所有媒介上都應(yīng)遵循的規(guī)則。但是現(xiàn)在的UI排版中幾乎都沒(méi)有遵循，這也是我們經(jīng)常覺(jué)得UI頁(yè)面上的中文排版看起來(lái)不精致的原因。

通過(guò)學(xué)習(xí)W3C《中文排版需求》《中華人民共和國(guó)國(guó)家標(biāo)準(zhǔn)-標(biāo)點(diǎn)符號(hào)的用法》等中文排版規(guī)范文檔中對(duì)標(biāo)點(diǎn)等微觀排版的調(diào)整思路，并結(jié)合UI場(chǎng)景落地，希望從細(xì)節(jié)處提升頁(yè)面美觀度和吸引力。

· 優(yōu)化標(biāo)題，突出內(nèi)容

在標(biāo)點(diǎn)使用規(guī)范中對(duì)標(biāo)題中標(biāo)點(diǎn)符號(hào)的使用有嚴(yán)格的定義：標(biāo)題的作用是概括表明文章內(nèi)容，一般標(biāo)題中除書名號(hào)、引號(hào)等表示專用名詞的符號(hào)外，不應(yīng)該出現(xiàn)標(biāo)點(diǎn)符號(hào)，題中停頓可用空格表示。如確實(shí)因需要表明語(yǔ)意而必須使用標(biāo)點(diǎn)符號(hào)時(shí)，應(yīng)使用同號(hào)的半角標(biāo)點(diǎn)，標(biāo)題末尾除問(wèn)號(hào)或嘆號(hào)外，一般不使用其他標(biāo)點(diǎn)符號(hào)。

但在實(shí)際UI界面中，我們無(wú)法在生產(chǎn)端對(duì)作者使用的不規(guī)范標(biāo)點(diǎn)符號(hào)進(jìn)行逐一的確認(rèn)、修正。UI需要的是展示規(guī)則，保證多種內(nèi)容最后都能有良好的視覺(jué)呈現(xiàn)。

在不修改作者不規(guī)范標(biāo)點(diǎn)使用的前提下，優(yōu)化標(biāo)題中標(biāo)點(diǎn)符號(hào)的寬度：將標(biāo)題中引號(hào)、書名號(hào)使用半角標(biāo)點(diǎn)；連續(xù)標(biāo)點(diǎn)將前一位標(biāo)點(diǎn)使用半角標(biāo)點(diǎn)，其余標(biāo)點(diǎn)不變，目的是在保持標(biāo)題基本閱讀節(jié)奏感的同時(shí)，減少標(biāo)點(diǎn)在標(biāo)題中的占位，突出標(biāo)題內(nèi)容。

· 標(biāo)點(diǎn)首尾禁則

在中文排版規(guī)則中，為了保持閱讀順暢、體例一致，多數(shù)標(biāo)點(diǎn)符號(hào)的位置有限制，通常一個(gè)標(biāo)點(diǎn)符號(hào)依其性質(zhì)，禁止出現(xiàn)在行首或行尾。這項(xiàng)規(guī)則自活字排版時(shí)代開始通行。在中文排版里面這項(xiàng)標(biāo)點(diǎn)規(guī)則叫“標(biāo)點(diǎn)首尾禁則”。

如何執(zhí)行這種標(biāo)點(diǎn)規(guī)避，平面排版中處理遵守“先推入，后推出”原則，即不希望標(biāo)點(diǎn)符號(hào)出現(xiàn)在行首時(shí)，應(yīng)在已經(jīng)標(biāo)點(diǎn)擠壓的基礎(chǔ)上再次檢查是否有機(jī)會(huì)將其擠到前一行，如沒(méi)有擠壓機(jī)會(huì)再?gòu)那耙恍腥∽詈笠粋€(gè)字至下一行。前行多出來(lái)的空間需按照優(yōu)先順序拉伸，最后沒(méi)有拉伸機(jī)會(huì)再按平均拉大字距的方式處理。

但“先推入，后推出”原則在UI場(chǎng)景中實(shí)現(xiàn)難度太大，意味著在判斷每個(gè)標(biāo)點(diǎn)位置的時(shí)候，還需要進(jìn)行多次邏輯判斷，技術(shù)成本太高。因此我們以效率優(yōu)先，將“先推入，后推出”原則修改為“推出式標(biāo)點(diǎn)避頭尾”，即從上一行推出一個(gè)字排在下行的行首，避免行首、行末出現(xiàn)禁排的標(biāo)點(diǎn)符號(hào)。

雖然由“先推入，后推出”退階為“僅推出式標(biāo)點(diǎn)避頭尾”，但整體文章還是避免了標(biāo)點(diǎn)出現(xiàn)在行首尾情況，遵循了中文排版基礎(chǔ)規(guī)范。

· 連續(xù)標(biāo)點(diǎn)擠壓

中文的標(biāo)點(diǎn)符號(hào)通常占1個(gè)字符寬度，便于識(shí)別、配置和排版，但當(dāng)頁(yè)面中連續(xù)出現(xiàn)2個(gè)及以上的標(biāo)點(diǎn)符號(hào)的時(shí)候，文章上會(huì)出現(xiàn)一塊空白，這些空洞會(huì)使在閱讀時(shí)候增加文字間距，使文字過(guò)于跳躍，增加讀者理解內(nèi)容的時(shí)間，造成腦眼勞累；同時(shí)會(huì)造成版心灰度的不均衡，影響視覺(jué)美感。

標(biāo)點(diǎn)符號(hào)字面分為“可調(diào)整”和“不可調(diào)整”兩類，“可調(diào)整”的標(biāo)點(diǎn)符號(hào)標(biāo)點(diǎn)本身在字面左、字面右、字面居中，可縮減掉標(biāo)點(diǎn)不占位部分的空間。

不可調(diào)整的標(biāo)點(diǎn)包括：半字連接號(hào)、間隔號(hào)、分隔號(hào)，因?yàn)檫@幾個(gè)標(biāo)點(diǎn)固定半個(gè)字寬。

在《中文排版標(biāo)準(zhǔn)》里面說(shuō)明：當(dāng)文中出現(xiàn)連續(xù)標(biāo)點(diǎn)符號(hào)排列時(shí)，為了使文字更加緊湊、易讀，應(yīng)該對(duì)標(biāo)點(diǎn)符號(hào)的寬度進(jìn)行調(diào)整。如果兩個(gè)符號(hào)占用2個(gè)字寬，應(yīng)當(dāng)縮減成1.5個(gè)字寬。在此原則上，允許排版風(fēng)格進(jìn)一步調(diào)整讓兩個(gè)符號(hào)只占1個(gè)字寬。擠壓方向應(yīng)該是標(biāo)點(diǎn)符號(hào)緊靠?jī)?nèi)容，擠壓掉離內(nèi)容遠(yuǎn)的空間。

根據(jù)這一原則，我們?cè)诖a中設(shè)置當(dāng)連續(xù)出現(xiàn)兩個(gè)及以上的標(biāo)點(diǎn)時(shí)，擠壓第二位及以后的標(biāo)點(diǎn)為半角，縮減連續(xù)標(biāo)點(diǎn)時(shí)的占位，減少閱讀時(shí)候的視覺(jué)跳躍，減少文章中出現(xiàn)的“空洞”。

· 完整設(shè)計(jì)方案

回顧整個(gè)設(shè)計(jì)方案，包括了3個(gè)部分：

1、對(duì)比屏顯字體與印刷字體，結(jié)合字體的字重，優(yōu)化字體家族選擇范圍與展示順位，優(yōu)化內(nèi)容可讀性。

2、通過(guò)眼動(dòng)實(shí)驗(yàn)、可用性測(cè)試調(diào)整字間距、行間距和段落間距，優(yōu)化閱讀節(jié)奏，提升閱讀效率。

3、學(xué)習(xí)W3C《中文排版標(biāo)準(zhǔn)》等規(guī)范，吸取中文排印優(yōu)良傳統(tǒng)，通過(guò)對(duì)內(nèi)容中標(biāo)點(diǎn)符號(hào)等微觀細(xì)致的調(diào)整。使正文區(qū)頁(yè)面能夠保持字距均勻，版面齊整、灰度均衡。從標(biāo)點(diǎn)細(xì)節(jié)提升頁(yè)面美觀度和吸引力。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

伴隨短視頻平臺(tái)的崛起，移動(dòng)互聯(lián)網(wǎng)的主流內(nèi)容消費(fèi)形態(tài)向短視頻視聽語(yǔ)言轉(zhuǎn)變，視頻信息流廣告的時(shí)代已經(jīng)來(lái)臨。如何通過(guò)設(shè)計(jì)提升轉(zhuǎn)化，是視頻信息流廣告所面臨的挑戰(zhàn)。

為了提升廣告轉(zhuǎn)化效果，我們結(jié)合實(shí)際項(xiàng)目，通過(guò)大量的實(shí)驗(yàn)與思考，梳理并總結(jié)了一套適用于視頻信息流廣告的轉(zhuǎn)化組件呈現(xiàn)原則，我們將其命名為“延遲增強(qiáng)”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見(jiàn)信息流場(chǎng)景。

///

延遲增強(qiáng)是什么？

視頻信息流廣告有三要素：內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來(lái)源于廣告主投放的物料，基礎(chǔ)框架需對(duì)齊宿主保持一致性，所以僅有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件，是可設(shè)計(jì)部分。 

而“延遲增強(qiáng)”就是針對(duì)“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進(jìn)式的呈現(xiàn)方式。它由消費(fèi)者決策時(shí)的理想心理動(dòng)線，結(jié)合廣告行為推導(dǎo)得出，并經(jīng)過(guò)實(shí)驗(yàn)驗(yàn)證了其對(duì)于轉(zhuǎn)化提升的有效性。

“延遲增強(qiáng)”包括兩個(gè)階段：1.廣告展現(xiàn)初始階段，延遲展現(xiàn)廣告意圖，通過(guò)內(nèi)容吸引潛在用戶；2.廣告內(nèi)容逐步呈現(xiàn)階段，轉(zhuǎn)化組件漸進(jìn)式增強(qiáng)，輔以增益信息，不斷強(qiáng)化，引導(dǎo)轉(zhuǎn)化行為。

它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強(qiáng)”的全流程，從時(shí)機(jī)（出現(xiàn)&增強(qiáng)時(shí)機(jī)）/引導(dǎo)（動(dòng)效&互動(dòng)引導(dǎo)）/前置（信息&轉(zhuǎn)化前置）三個(gè)部分，幫助提升廣告轉(zhuǎn)化效果。

///

時(shí)機(jī)-延遲增強(qiáng)如何呈現(xiàn)？

轉(zhuǎn)化組件的呈現(xiàn)時(shí)機(jī)包含“何時(shí)展現(xiàn)”與“何時(shí)增強(qiáng)”兩個(gè)部分，前者幫助增加廣告接收率，后者提升廣告轉(zhuǎn)化率。

01/ 出現(xiàn)時(shí)機(jī)：

延遲展現(xiàn)廣告意圖，可以提升廣告賣點(diǎn)的展現(xiàn)機(jī)率

互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動(dòng)卷入爆炸式增長(zhǎng)的資訊信息體中，廣告借助這一媒介迅速發(fā)展，但也因?yàn)椴糠稚虡I(yè)廣告的過(guò)度宣傳與其降低用戶信息獲取便捷性的本質(zhì)，不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒，從源頭拒絕了廣告信息。

所以對(duì)廣告來(lái)說(shuō)，在廣告展現(xiàn)初始，延遲展現(xiàn)廣告意圖，融入內(nèi)容，可以緩解受眾的抵觸情緒，提升廣告賣點(diǎn)的展現(xiàn)機(jī)率。

02/ 增強(qiáng)時(shí)機(jī)：

通過(guò)用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，可以有效提升轉(zhuǎn)化

對(duì)廣告來(lái)說(shuō)，搭配廣告內(nèi)容進(jìn)行增強(qiáng)，通過(guò)內(nèi)容積累購(gòu)買欲/信任感，然后通過(guò)階段性的增強(qiáng)來(lái)提示操作，對(duì)比一成不變能起到更好的轉(zhuǎn)化效果。

我們首先嘗試了程序化的增強(qiáng)時(shí)機(jī)，在不增加技術(shù)成本的前提下，根據(jù)歷史經(jīng)驗(yàn)，面向不同的廣告均采用固定時(shí)段的階段性增強(qiáng)。

但不同的廣告物料內(nèi)容不同，不同的用戶偏好也不同，固定的增強(qiáng)時(shí)機(jī)并不能很好的滿足所有廣告需求。所以在技術(shù)能力可以承載的時(shí)候，我們采用了動(dòng)態(tài)時(shí)機(jī)策略，通過(guò)用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī)，在程序化增強(qiáng)時(shí)機(jī)之后，再次實(shí)現(xiàn)了轉(zhuǎn)化提升。

///

引導(dǎo)-延遲增強(qiáng)如何引導(dǎo)轉(zhuǎn)化行為？

轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化，則可分為基礎(chǔ)的視覺(jué)引導(dǎo)與進(jìn)階的互動(dòng)引導(dǎo)，前者幫助搶奪視覺(jué)注意力，后者則能夠在互動(dòng)體驗(yàn)中植入部分幫助決策的“小心思”。

01/ 視覺(jué)引導(dǎo)：

適當(dāng)增加視覺(jué)吸引點(diǎn)，可以有效引導(dǎo)點(diǎn)擊

延遲增強(qiáng)需要通過(guò)階段性的增強(qiáng)來(lái)提示操作，而如何增強(qiáng)能有效吸引注意則需要琢磨，已有實(shí)驗(yàn)表明轉(zhuǎn)化按鈕增加掃光動(dòng)效與智能取色，能有效吸引注意，引導(dǎo)點(diǎn)擊，對(duì)轉(zhuǎn)化提升有良好效果。

02/ 互動(dòng)引導(dǎo)：

讓用戶主動(dòng)選擇，可以增加廣告曝光，輔助轉(zhuǎn)化決策

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)對(duì)于用戶交互體驗(yàn)的追求越發(fā)極致，如影視行業(yè)走向可交互網(wǎng)劇，本質(zhì)上是從用戶接收轉(zhuǎn)變?yōu)橛脩糁鲃?dòng)參與，用戶本身對(duì)于獲得優(yōu)質(zhì)體驗(yàn)的意識(shí)逐漸覺(jué)醒。商業(yè)化產(chǎn)品也需要緊跟“體驗(yàn)”與“互動(dòng)”，將廣告變?yōu)榛?dòng)體驗(yàn)或具備使用價(jià)值的信息，讓用戶從被動(dòng)瀏覽到主動(dòng)參與，掌握對(duì)廣告的選擇權(quán)。

以互動(dòng)投票為例，我們通過(guò)用戶與用戶之間的觀點(diǎn)表達(dá)，以投票選擇的形式誘發(fā)群體性選擇，引起好奇心與同儕壓力。

若用戶選擇符合群體選擇，則帶來(lái)群體性背書，增強(qiáng)信任感；若用戶選擇不符合群體選擇，基于從眾心理，用戶極有可能對(duì)群體選擇產(chǎn)生好奇，從而瀏覽兩種選項(xiàng)的內(nèi)容，有效的增加了品牌曝光。

///

前置-延遲增強(qiáng)如何幫助轉(zhuǎn)化達(dá)成？

轉(zhuǎn)化組件的前置主要包含信息前置與轉(zhuǎn)化前置，前者輔助轉(zhuǎn)化決策，后者幫助便捷操作，更好更快的完成轉(zhuǎn)化。

01/ 信息前置：

增加增益信息或前置落地頁(yè)信息，可以輔助轉(zhuǎn)化決策

購(gòu)買/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達(dá)成的，在前卡適當(dāng)?shù)脑黾淤u點(diǎn)信息能夠更好的幫助用戶決策。針對(duì)下載類廣告可增加評(píng)分與星級(jí)，二電類廣告可以增加價(jià)格信息，甚至可以前置優(yōu)惠劵、圖片banner等信息，均能實(shí)現(xiàn)轉(zhuǎn)化的正向提升。

02/ 轉(zhuǎn)化前置：

縮短轉(zhuǎn)化路徑，可以幫助轉(zhuǎn)化行為更便捷的達(dá)成

在信任感積累與階段性的增強(qiáng)都達(dá)成的時(shí)候，在當(dāng)前轉(zhuǎn)化對(duì)比跳轉(zhuǎn)落地頁(yè)再進(jìn)行轉(zhuǎn)化，鏈路更短，用戶流失概率更小。比起實(shí)驗(yàn)嘗試，更像是延遲增強(qiáng)的基礎(chǔ)能力配置。

首先，我們針對(duì)表單/咨詢/電話/安卓下載都進(jìn)行了轉(zhuǎn)化前置，具有用戶明確意向的按鈕點(diǎn)擊會(huì)直接在當(dāng)前進(jìn)行反饋。

除了直接將操作前置外，針對(duì)不同細(xì)分場(chǎng)景的需求，還可以通過(guò)交互形態(tài)的優(yōu)化在感官上縮短路徑。

這里以百度的視頻MAX廣告為例，我們針對(duì)重落地頁(yè)的商家，將MAX首屏（視頻頁(yè)）與H5落地頁(yè)的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu)，通過(guò)浮層面板承載落地頁(yè)，延時(shí)自動(dòng)彈出，強(qiáng)引導(dǎo)下方內(nèi)容，激發(fā)用戶上滑瀏覽興趣，解決了落地頁(yè)隱藏較深，轉(zhuǎn)化鏈路過(guò)長(zhǎng)的問(wèn)題，同時(shí)增加了落地頁(yè)曝光從而提升轉(zhuǎn)化。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

序言

設(shè)計(jì)師在接觸一個(gè)新的業(yè)務(wù)領(lǐng)域時(shí)，會(huì)習(xí)慣性地通過(guò)競(jìng)品研究快速地了解行業(yè)，通過(guò)對(duì)比競(jìng)品快速地找到體驗(yàn)優(yōu)化機(jī)會(huì)點(diǎn)。但B端產(chǎn)品具有專業(yè)性強(qiáng)、功能復(fù)雜度高和操作鏈路長(zhǎng)的特點(diǎn)，即便有競(jìng)品可以對(duì)照，B端設(shè)計(jì)師也很難在短時(shí)間內(nèi)深刻理解業(yè)務(wù)邏輯，做出超越性的設(shè)計(jì)。

應(yīng)該如何去打破這個(gè)困局呢？除了深耕業(yè)務(wù)和修煉基本功外，本文嘗試從預(yù)判設(shè)計(jì)、表達(dá)清晰、操作可控 三個(gè)方面提供了一些助力B端產(chǎn)品體驗(yàn)提升的小妙招。

一、預(yù)判設(shè)計(jì)

在團(tuán)隊(duì)活動(dòng)時(shí)，從搭檔的一個(gè)眼神我們就能預(yù)判他接下來(lái)的動(dòng)作，相互的默契配合能讓我們順利地完成任務(wù)，在產(chǎn)品設(shè)計(jì)中的預(yù)判設(shè)計(jì)也可以得到事半功倍的效果。

我們可以從歷史記錄、效果預(yù)知、智能輔助和行為慣性4個(gè)方面進(jìn)行設(shè)計(jì)，輔助用戶決策，提升操作效率。

1.歷史記錄

a.用戶操作行為記錄

廣告優(yōu)化師通常會(huì)管理幾十至上百個(gè)賬號(hào)，需要在多個(gè)賬號(hào)之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會(huì)造成信息遺忘和決策卡頓，從而會(huì)影響操作效率。在管理后臺(tái)的設(shè)計(jì)中可以通過(guò)記錄用戶最近操作行為，恰合時(shí)宜地為用戶提供幫助。

案例：在新建計(jì)劃環(huán)節(jié)，標(biāo)識(shí)出本賬號(hào)上次的選擇記錄（最近一次的投放目標(biāo)），輔助優(yōu)化師快速做決策。

b.基于操作習(xí)慣的系統(tǒng)預(yù)測(cè)

平臺(tái)系統(tǒng)可基于個(gè)體操作習(xí)慣和大數(shù)據(jù)分析來(lái)預(yù)測(cè)用戶需求，提供高概率的操作建議，給予用戶貼心指導(dǎo)。

案例：針對(duì)廣告平臺(tái)表格信息密集，不易快速獲取關(guān)鍵指標(biāo)的問(wèn)題，Google提供了用戶自定義欄，而Facebook的表格欄會(huì)根據(jù)用戶列操作習(xí)慣和自定義欄行為進(jìn)行大數(shù)據(jù)分析，預(yù)置一些高頻意圖的組合欄，一鍵切換即可查看關(guān)鍵指標(biāo)，操作更便捷。

2.效果預(yù)知

a.效果預(yù)覽

表單頁(yè)對(duì)填寫的物料內(nèi)容進(jìn)行映射，展示真實(shí)效果預(yù)覽，降低用戶心理的不確定性。

案例：在進(jìn)行廣告創(chuàng)意創(chuàng)建的過(guò)程中，優(yōu)化師填寫完標(biāo)題和上傳完物料后很難知道廣告投放到手機(jī)端用戶看的真實(shí)效果。而所見(jiàn)即所得的可視化編輯方法支持創(chuàng)意樣式實(shí)時(shí)預(yù)覽，可以輔助優(yōu)化師更好地進(jìn)行創(chuàng)意優(yōu)化。

b.效益預(yù)估

針對(duì)一些需要效力評(píng)估的頁(yè)面，平臺(tái)通過(guò)預(yù)置好的算法對(duì)用戶內(nèi)容的表達(dá)及時(shí)給出估算值，給出建議，從而提高內(nèi)容填寫質(zhì)量，降低填寫的盲目性。

案例：Google廣告平臺(tái)在新建創(chuàng)意環(huán)節(jié)，對(duì)廣告素材資源的組合方式和數(shù)量進(jìn)行估算，呈現(xiàn)當(dāng)前廣告與高質(zhì)量廣告設(shè)置的差距，輔助用戶進(jìn)行高質(zhì)量的廣告制作。

3.智能輔助

用戶在進(jìn)行輸入等操作時(shí)可以提供智能輔助，例如表單填寫時(shí)對(duì)需要錄入信息的區(qū)域提供輔助提示，通過(guò)自動(dòng)補(bǔ)全或聯(lián)想詞來(lái)幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。

4.行為慣性

在一些場(chǎng)景里，用戶的行為具有很強(qiáng)的關(guān)聯(lián)慣性，例如上班時(shí)間進(jìn)到辦公區(qū)域打開辦公APP首要目的一般是打卡簽到。通過(guò)梳理主線任務(wù)或整理用戶體驗(yàn)地圖可以挖掘出很多基于行為預(yù)判的設(shè)計(jì)機(jī)會(huì)點(diǎn)。

案例：預(yù)判用戶在工作臺(tái)內(nèi)截屏后大概率是去反饋遇到的問(wèn)題，適時(shí)將反饋入口透出，可以提高反饋的效率和用戶體驗(yàn)。

二、表達(dá)清晰

現(xiàn)實(shí)生活中，在與他人交往時(shí)，清晰的表達(dá)尤為重要。同樣是演講，有的演講者“詞不達(dá)意”沒(méi)有重點(diǎn)，或者內(nèi)容晦澀難懂讓聽眾感覺(jué)索然無(wú)味；而好的演講者則會(huì)用場(chǎng)景化的方式將邏輯復(fù)雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。

好的設(shè)計(jì)也應(yīng)該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務(wù)。

如何讓用戶通俗易懂地了解產(chǎn)品功能，并能快速上手？我們可以從功能易理解、內(nèi)容強(qiáng)吸引和選擇無(wú)負(fù)擔(dān)三個(gè)方面來(lái)降低用戶的操作門檻。

1.功能易理解

a.術(shù)語(yǔ)轉(zhuǎn)換

將一些晦澀難懂的詞匯轉(zhuǎn)化表達(dá)方式，轉(zhuǎn)化為更貼近用戶視角的文案描述，傳遞細(xì)節(jié)感受；

b.信息有效展示

透過(guò)需求背后的真實(shí)意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產(chǎn)品的服務(wù)效益。

案例：服務(wù)器預(yù)警平臺(tái)從傳統(tǒng)的表格形式優(yōu)化成拓?fù)鋱D。將所有的云服務(wù)器都抽象成一個(gè)個(gè)矩形，矩形的顏色代表服務(wù)器監(jiān)控指標(biāo)的狀況。當(dāng)方塊顏色顯示為黃色，則表示該云服務(wù)器內(nèi)有監(jiān)控指標(biāo)出現(xiàn)了異常，這個(gè)時(shí)候目標(biāo)用戶就需要重點(diǎn)關(guān)注。

2.內(nèi)容強(qiáng)吸引

對(duì)于老用戶來(lái)說(shuō)，從之前習(xí)慣的平臺(tái)遷移到新的平臺(tái)一般會(huì)有很大的抵觸心理。遷移前用戶考慮的關(guān)鍵點(diǎn)包括：不遷移是否有影響？新平臺(tái)有什么優(yōu)勢(shì)嗎？遷移起來(lái)麻煩嗎？

以百度營(yíng)銷客戶中心遷移引導(dǎo)頁(yè)方案為例，初期方案首屏只告訴用戶平臺(tái)升級(jí)了，但是不能快速了解到升級(jí)后的核心優(yōu)勢(shì)有哪些，同時(shí)遷移按鈕設(shè)計(jì)得很弱，傳達(dá)的信息是遷移可能會(huì)很麻煩，很容易讓用戶止步于此。

所以在進(jìn)入遷移導(dǎo)流頁(yè)面時(shí)，首屏首先要講清楚新版平臺(tái)的能力和遷移方式。對(duì)于當(dāng)下想遷移的用戶，明確遷移方式和入口；對(duì)于徘徊不定的用戶，告知遷移后的好處并做好最后下線時(shí)間的提示。這些信息不僅能夠消除用戶遷移前關(guān)于成本的顧慮，也能吸引用戶立即開始遷移行動(dòng)。

3.選擇無(wú)負(fù)擔(dān)

B端產(chǎn)品操作鏈路通常比較長(zhǎng)，用戶很容易迷失其中。對(duì)于邏輯復(fù)雜的功能在做頁(yè)面設(shè)計(jì)時(shí)需要突出主次和流程引導(dǎo)，盡可能提供一個(gè)主要觸發(fā)的主按鈕，讓客戶不用過(guò)多思考就知道模塊和操作的隸屬關(guān)系，降低認(rèn)知的負(fù)擔(dān)。

三、操作可控

我們?cè)趫?zhí)行任務(wù)時(shí)總是希望有過(guò)往經(jīng)驗(yàn)可借鑒，如果事情按照自己的預(yù)期發(fā)展了會(huì)覺(jué)得很踏實(shí)有可控感。同理，用戶在操作一個(gè)系統(tǒng)界面時(shí)也會(huì)有類似的心理變化，對(duì)于自己熟悉的功能希望主動(dòng)權(quán)在自己手里，能復(fù)用之前的經(jīng)驗(yàn)無(wú)需額外的學(xué)習(xí)成本；對(duì)自己不熟悉的功能希望有及時(shí)的引導(dǎo)，能很快地上手并能掌握主動(dòng)權(quán)。

不可控的操作體驗(yàn)會(huì)讓用戶在使用過(guò)程中產(chǎn)生很強(qiáng)的挫敗感，一旦有了這樣的心理感受就很難被扭轉(zhuǎn)。那如何保障體驗(yàn)的基線確保用戶正向的感受呢？下面就結(jié)合操作一致性和明確指引性兩方面進(jìn)行說(shuō)明。

1.操作一致性

針對(duì)同類型的功能，在交互設(shè)計(jì)上要盡可能地保持邏輯對(duì)齊，保證平臺(tái)的一致性同時(shí)降低用戶的學(xué)習(xí)成本。一致性設(shè)計(jì)對(duì)產(chǎn)研提效也有很大的益處。

案例：下例中的批量操作項(xiàng)的邏輯，都是通過(guò)選中復(fù)選框之后在模塊上方展示批量操作欄且支持一鍵關(guān)閉。這樣該平臺(tái)的用戶無(wú)論在任何場(chǎng)景下只要注意到復(fù)選框就對(duì)批量操作功能有了預(yù)期，沒(méi)有額外的學(xué)習(xí)成本。

2.明確指引性

對(duì)于復(fù)雜的使?流程，最好能夠在客戶使?的過(guò)程中建立統(tǒng)一的指引，引導(dǎo)客戶?步步完成操作，從而提高任務(wù)的完成率，促成業(yè)務(wù)目標(biāo)達(dá)成。

案例：當(dāng)一個(gè)平臺(tái)需要用戶完成的任務(wù)繁多且流程性強(qiáng)時(shí)，需要把所有的核心任務(wù)按照層級(jí)進(jìn)行呈現(xiàn)，并作為一個(gè)固定模塊展示在醒目位置。這樣用戶既可全局視角理解業(yè)務(wù)又能作為功能入口快速觸達(dá)。

寫在最后

B端業(yè)務(wù)中，交互設(shè)計(jì)的核心在于為特定場(chǎng)景設(shè)計(jì)擇優(yōu)的行為路徑；通過(guò)分析用戶當(dāng)前所處的階段和場(chǎng)景來(lái)判斷此刻遇到的關(guān)鍵問(wèn)題。針對(duì)不同的問(wèn)題去選擇對(duì)應(yīng)的解決策略，例如對(duì)于新手來(lái)說(shuō)降門檻會(huì)是首要任務(wù)，對(duì)于熟手來(lái)說(shuō)操作的效率會(huì)顯得更為重要。結(jié)合預(yù)判設(shè)計(jì)、表達(dá)清晰、操作可控三個(gè)維度的案例可以讓我們?cè)趯?duì)業(yè)務(wù)理解有限的情況下，產(chǎn)品設(shè)計(jì)能有更多思考角度，也能有更明確的設(shè)計(jì)主張。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：百度MEUX 來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

篩選可以說(shuō)是我使用比較頻繁的一種交互形式，比如我點(diǎn)外賣，會(huì)選擇滿減優(yōu)惠力度大，同時(shí)我也可以選擇在哪一個(gè)價(jià)格區(qū)間內(nèi)的產(chǎn)品，這就會(huì)用到篩選，而到了B端產(chǎn)品上來(lái)，一個(gè)CRM系統(tǒng)當(dāng)中，篩選的邏輯也會(huì)比移動(dòng)端的復(fù)雜，伴隨著：且關(guān)系、或關(guān)系、大于、小于等等這樣復(fù)雜的邏輯，也為設(shè)計(jì)本身增加了很多難度。因此，今天我們就來(lái)討論討論篩選控件

1、篩選存在的意義

篩選存在的對(duì)于整個(gè)表單來(lái)說(shuō)是非常重要的，它可以幫助用戶，在表單茫茫多的數(shù)據(jù)當(dāng)中進(jìn)行快速的定位；可以對(duì)表單進(jìn)行快速劃分，縮短用戶對(duì)于數(shù)據(jù)的尋找時(shí)間；能夠滿足用戶在工作中，實(shí)際業(yè)務(wù)場(chǎng)景的篩選。

對(duì)于實(shí)際B端場(chǎng)景來(lái)說(shuō)，篩選是日常數(shù)據(jù)分類的一個(gè)重要途徑，我們先來(lái)看看實(shí)際場(chǎng)景到底有哪些？

用幾個(gè)我們CRM用戶日常使用的場(chǎng)景來(lái)說(shuō)：

比如今天作為一個(gè)電話銷售人員，想要聯(lián)系最近注冊(cè)的用戶時(shí)，通常會(huì)通過(guò)篩選來(lái)選出最近幾天注冊(cè)過(guò)，同時(shí)又沒(méi)有銷售更進(jìn)的客戶，進(jìn)行一個(gè)優(yōu)先級(jí)的排布；

再比如說(shuō)，在銷售周報(bào)當(dāng)中，銷售主管可以通過(guò)篩選得到每個(gè)人這周完成的狀態(tài)，也可以通過(guò)篩選得出每個(gè)人對(duì)于線索的更進(jìn)情況和對(duì)客戶的流失狀態(tài)等等，這些都可以通過(guò)各種各樣的篩選形式來(lái)滿足用戶對(duì)于特定情況下的使用

篩選和搜索、導(dǎo)航的區(qū)別？

篩選可以通過(guò)多個(gè)篩選條件進(jìn)行多維度的尋找，而導(dǎo)航、搜索只能通過(guò)單一條件進(jìn)行指定篩選。

雖然在現(xiàn)在很多搜索都可以支持多維度用空格去進(jìn)行多字段的關(guān)鍵詞搜索，但本質(zhì)上區(qū)別不大

所以在B端項(xiàng)目當(dāng)中，如果你有表單，那你就需要篩選

2、篩選的類型

我們將篩選分為基礎(chǔ)篩選和高級(jí)篩選兩種，兩種篩選會(huì)根據(jù)業(yè)務(wù)場(chǎng)景不同，在不同的頁(yè)面去使用

2.1、基礎(chǔ)篩選

基礎(chǔ)篩選一般為系統(tǒng)預(yù)設(shè)好的篩選字段，具有很強(qiáng)的業(yè)務(wù)和場(chǎng)景的需求?；A(chǔ)篩選一般分為四個(gè)部分：

篩選條件：是指用戶可以篩選的范圍

篩選項(xiàng)：是指用戶可以選擇的篩選項(xiàng)目

已選項(xiàng)：是指用戶已經(jīng)選中的篩選項(xiàng)

備選項(xiàng)：是指用戶還沒(méi)有選擇的篩選選項(xiàng)

基礎(chǔ)篩選更多作為用戶快捷篩選的一種方式，因?yàn)橐话闶褂脠?chǎng)景當(dāng)中用戶幾個(gè)篩選邏輯為“且”

同時(shí)篩選的邏輯也為簡(jiǎn)單篩選，所以在使用場(chǎng)景上只適合在對(duì)篩選要求不高的場(chǎng)景下使用。

2.2、高級(jí)篩選

高級(jí)篩選一般為篩選中含有運(yùn)算符，同時(shí)篩選當(dāng)中包含條件關(guān)系，比如且關(guān)系或者否關(guān)系。一般高級(jí)篩選包含以下幾類關(guān)鍵詞

篩選關(guān)系：是指幾個(gè)篩選條件之間的關(guān)系，一般為 且、或關(guān)系，即 且 關(guān)系為幾個(gè)條件之間的交集；或 關(guān)系為幾個(gè)條件之間的聯(lián)集（并集）

篩選字段：是指在篩選當(dāng)中，所要的篩選項(xiàng)，一般為表單當(dāng)中的所有可篩選的字段

篩選操作：是指篩選字段和篩選值之間的關(guān)系，常見(jiàn)的篩選操作有：大于、小于、是、否、包含、不包含、為空、不為空等等。

篩選值：你所需要篩選的數(shù)值

高級(jí)篩選一般滿足更多的用戶場(chǎng)景，為用戶多條件多字段、多個(gè)篩選關(guān)系、多個(gè)篩選操作 提供有利保障。

3、篩選的布局

3.1、上下布局

當(dāng)在篩選器條件少于5個(gè)的情況下，最常使用的就是上下布局，這樣篩選能與網(wǎng)站保持統(tǒng)一的情況下，上下布局也更方便用戶進(jìn)行閱讀

當(dāng)篩選器過(guò)多的情況下（一般在5-15個(gè)之間），篩選器過(guò)多，需要滾屏才能看到篩選結(jié)果，用戶使用起來(lái)會(huì)很別扭。所以在5-15個(gè)的情況下，一般會(huì)將篩選項(xiàng)進(jìn)行收折，這樣保證篩選整體面積不會(huì)太大，同時(shí)將用戶常用的篩選放在前面，可以滿足用戶基本的業(yè)務(wù)需求和使用場(chǎng)景

3.2、左右布局

左右布局在PC端一般是以字段選擇進(jìn)行篩選，通俗來(lái)講就是將用戶可以篩選的所有字段全部羅列出來(lái)，然后通過(guò)勾選選，擇出你需要篩選的字段，進(jìn)行篩選器的使用

左右布局的好處是能夠?qū)⒑Y選的所有條件都直接的展示出來(lái)，可以適應(yīng)很多場(chǎng)景，在篩選器用15個(gè)以上時(shí)。通過(guò)左右布局的方式，能夠讓篩選條件進(jìn)行滾動(dòng)，在最大限度保持用戶使用體驗(yàn)

4、篩選的形式

在日常的B端產(chǎn)品中，篩選的形式有哪些？篩選到底應(yīng)該怎么設(shè)計(jì)？接下來(lái)為大家總結(jié)梳理一些在 B端產(chǎn)品 中的篩選玩法，希望為你開啟新大陸。

4.1、平鋪型

平鋪型一般為用戶搜索結(jié)果數(shù)據(jù)量過(guò)大，使用戶搜索出來(lái)的結(jié)果與其預(yù)期差距過(guò)大，用戶然后可以通過(guò)篩選對(duì)數(shù)據(jù)的再一次分類，使用戶能夠精準(zhǔn)尋找其想要的結(jié)果。

平鋪型一般為篩選條件少于6個(gè)，這樣能夠通過(guò)1行或者2行去展示篩選項(xiàng)的結(jié)果

多用于信息量大的產(chǎn)品，比如電商、視頻網(wǎng)站等等。常見(jiàn)的淘寶、京東、騰訊視頻PC端 都采取用這樣的方式，將所有的篩選條件列出來(lái)。

平鋪型的好處是將篩選項(xiàng)的結(jié)果全部或者部分放出，能夠幫助用戶快速理解篩選項(xiàng)以及快讀找到自己想要的結(jié)果。

缺點(diǎn)也是很明顯，平鋪型的控件占比大，需要占據(jù)大量面積展示平鋪出的篩選結(jié)果。

比如淘寶PC端，搜索一個(gè)產(chǎn)品后花去40%的面積去展示所有的篩選條件，其實(shí)就是想引導(dǎo)用戶，淘寶搜索過(guò)后spu的數(shù)量仍然過(guò)大，想通過(guò)進(jìn)一步的篩選，讓用戶明確自己對(duì)想要東西。同時(shí)因?yàn)槊娣e占比大，通常平鋪型都是以收折的狀態(tài)，只有在搜索觸發(fā)后才會(huì)完全展開

4.2、收折型

收折型篩選是一種簡(jiǎn)單直接的篩選形式，將用戶常用的篩選形式通過(guò)下拉框的形式進(jìn)行篩選。每一個(gè)篩選條件就是一個(gè)下拉框，這種形式看上去很簡(jiǎn)單，但是在B端場(chǎng)景中，下拉框?qū)τ谟脩魜?lái)說(shuō)認(rèn)知成本低，操作性也較強(qiáng)，同時(shí)在用戶重度使用時(shí)，又能給用戶很好的使用體驗(yàn)的一種方式

優(yōu)點(diǎn)：

用戶可以直接對(duì)其常用的字段篩選進(jìn)行一步操作，并且沒(méi)有復(fù)雜的篩選關(guān)系，全部都是“且”的篩選邏輯，能夠保證用戶進(jìn)行快速的篩選選擇

缺點(diǎn)：

將所有信息全部平鋪展開，信息量過(guò)于冗雜繁多，同時(shí)在做通用性產(chǎn)品時(shí)，這種方式很難做到通用性

4.3、單側(cè)篩選

單側(cè)篩選是一種更通用的篩選形式，通過(guò)對(duì)于你想篩選的字段進(jìn)行勾選，勾選完成后就會(huì)出現(xiàn)篩選條件，然后選擇篩選字段、篩選操作、篩選值，一般選擇完成所有篩選后，還需要點(diǎn)擊查詢，篩選操作才算完成。

整個(gè)單側(cè)篩選，大量的篩選條件可以放置在表單的左側(cè)或者右側(cè)，通過(guò)表單縱向空間，去承載大量篩選條件。

優(yōu)點(diǎn)：

節(jié)省空間、通用性強(qiáng)。因?yàn)樵诤芏郤aas系統(tǒng)、Paas系統(tǒng)當(dāng)中，無(wú)法針對(duì)每一個(gè)客戶進(jìn)行設(shè)計(jì)，就要考慮到系統(tǒng)通用型高，做一些大而全的功能。在每個(gè)表單也所需要定制化修改的地方很少，同時(shí)能容納的信息量可以很大。

缺點(diǎn)：

就是在后臺(tái)系統(tǒng)當(dāng)中只有這一種篩選形式會(huì)面臨在我常用的幾種篩選的字段中，要通過(guò)不斷尋找，來(lái)滿足我的篩選需求，操作麻煩。

我們產(chǎn)品在某一次改版就將篩選由收折式修改為單側(cè)式，因?yàn)槲覀冇脩羰褂煤Y選的場(chǎng)景非常的多，用戶每次篩選都要多進(jìn)行2、3步操作，導(dǎo)致用戶進(jìn)行了大量的吐槽，后來(lái)進(jìn)行修改，將篩選順序支持手動(dòng)調(diào)整順序，用戶吐槽的次數(shù)才慢慢減少。

4.4、表頭篩選

表頭篩選是一種復(fù)雜篩選的形式，其最開始是來(lái)源于Excel的篩選形式。點(diǎn)擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。之后在后臺(tái)產(chǎn)品的發(fā)展中，得以借鑒過(guò)來(lái)。

優(yōu)點(diǎn)：

可以通過(guò)表頭的點(diǎn)擊，使用戶更快捷進(jìn)入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場(chǎng)景基本還是得到滿足。

缺點(diǎn)：

用戶第一次進(jìn)入系統(tǒng)很難理解這種交互形式，且在每個(gè)表頭都會(huì)有一個(gè)icon，影響用戶對(duì)于表頭的識(shí)別。

4.5、彈窗式

通過(guò)點(diǎn)擊篩選按鈕，展現(xiàn)出篩選彈窗，進(jìn)行篩選。這種篩選適合在篩選功能在系統(tǒng)中不是很重要的層級(jí)。最常見(jiàn)的就是Tapd，在其中篩選不是很強(qiáng)的一個(gè)功能，同時(shí)也是系統(tǒng)中十分有必要的。

優(yōu)點(diǎn)：

是能夠在節(jié)省面積的情況下，可以進(jìn)行很復(fù)雜的篩選，同時(shí)可以支持復(fù)雜情況下的篩選

缺點(diǎn)：

彈窗會(huì)遮擋一部分表單數(shù)據(jù)，會(huì)影響篩選人的判斷，其次篩選條件的添加也相對(duì)更加繁瑣。

5、選擇更合適的篩選

在我們一系列篩選的調(diào)整過(guò)后，我們團(tuán)隊(duì)也總結(jié)了對(duì)于我們來(lái)說(shuō)更重要的條件和形式，來(lái)和大家分享探討一下。

5.1、使用頻率

我們認(rèn)為影響篩選控件最重要的是用戶的使用頻率，因?yàn)橛脩舻氖褂妙l率和使用方式，直接影響到我們篩選是用普通篩選or高級(jí)篩選，也會(huì)影響到篩選的形式。

5.2、滿足實(shí)際業(yè)務(wù)所需

篩選功能的做法，取決于我們產(chǎn)品未來(lái)是想往哪一個(gè)方向發(fā)展，如果想把功能做的強(qiáng)大，就得考慮到篩選的后續(xù)擴(kuò)展性。因此滿足實(shí)際業(yè)務(wù)也是十分重要。

5.3、用戶認(rèn)知成本

在B端系統(tǒng)當(dāng)中，最可能遇見(jiàn)的就是你給用戶設(shè)計(jì)的路徑但是其實(shí)用戶根本沒(méi)有往你想的方向去操作。我們系統(tǒng)最開始給用戶設(shè)計(jì)好了很多功能點(diǎn)，但是用戶對(duì)于這個(gè)點(diǎn)的認(rèn)知成本實(shí)在過(guò)低，也導(dǎo)致了后面系統(tǒng)功能點(diǎn)很多都被埋沒(méi)。因?yàn)樵谀阍O(shè)計(jì)好了一個(gè)功能點(diǎn)后，要適當(dāng)引導(dǎo)用戶，解釋這個(gè)功能的使用場(chǎng)景才不會(huì)讓你設(shè)計(jì)的功能被淹沒(méi)。

作者：CE青年   來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 

ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)

最近看到很多美妝博主都在出什么紅黑榜，其實(shí)就是在說(shuō)哪些產(chǎn)品是有問(wèn)題，不推薦大家使用，有哪些東西是可以安利的好物。
想著B端設(shè)計(jì)當(dāng)中，也會(huì)存在這一情況。然后我在打開 Ant Design ，瀏覽完所有的組件，你會(huì)發(fā)現(xiàn)：“組件當(dāng)中也會(huì)存在紅黑榜~”
今天就趁著 618 剛過(guò)的這個(gè)時(shí)間節(jié)點(diǎn)，我也來(lái)“帶帶貨”，說(shuō)說(shuō)B端組件當(dāng)中的紅黑榜

首先我先說(shuō)一下關(guān)于紅黑榜的定義
1.使用頻率高：也就是這個(gè)組件我們平時(shí)會(huì)頻繁的使用
2.黑榜：在使用過(guò)程中，會(huì)遇到諸多問(wèn)題，導(dǎo)致無(wú)法正常使用
3.紅榜：往往會(huì)更滿足B端產(chǎn)品的實(shí)際需求，對(duì)于組件有更深的認(rèn)識(shí)

通過(guò)我的分享能夠給大家有一個(gè)初步的認(rèn)識(shí)，當(dāng)然整個(gè)組件都是基于我平時(shí)的設(shè)計(jì)觀察與使用，目的也是想和大家分享、避避坑，如果有什么疑惑，歡迎在評(píng)論區(qū)我們一起討論~

樹形選擇

樹形選擇在B端系統(tǒng)當(dāng)中的出現(xiàn)頻率非常高，比如我們常見(jiàn)的：表格、表單、各類詳情頁(yè)，只要涉及到 層級(jí)結(jié)構(gòu)的選擇，都會(huì)有它的身影（注意，這里主要說(shuō)的是樹狀的選擇類組件）但是作為設(shè)計(jì)師，樹形選擇在使用的過(guò)程當(dāng)中，會(huì)出現(xiàn)很多意想不到問(wèn)題

尺寸無(wú)法確定

因?yàn)闃湫芜x擇本身這個(gè)組件的特殊性，它的大小需要通過(guò)內(nèi)容當(dāng)中的高度與寬度共同決定，而在設(shè)計(jì)過(guò)程當(dāng)中，高度與寬度究竟為多少就要仔細(xì)的考慮
因?yàn)樵谑褂脴湫芜x擇時(shí)，需要思考每一個(gè)內(nèi)容的具體尺寸，太高太低都不行
如果太低，展開樹形選擇就會(huì)非常的麻煩；如果太高，則在數(shù)據(jù)量較少的時(shí)候，會(huì)給人數(shù)據(jù)很空
橫向空間也是同理，也就造成了在設(shè)計(jì)時(shí)，需要深入思考

適用性太低

樹形選擇，作為基礎(chǔ)組件，在應(yīng)付復(fù)雜的選擇需求時(shí)，很明顯的會(huì)感到“力不從心”，無(wú)論是從它顯示選中時(shí)的內(nèi)容，還是大量的數(shù)據(jù)時(shí)的選擇難度，樹形在適用性上，都會(huì)大大降低，當(dāng)遇到這類情況時(shí)，建議采取更多 “業(yè)務(wù)組件” 的方式來(lái)對(duì)選擇進(jìn)行優(yōu)化

分類表單

分類表單（也可以叫Tab表單，不過(guò)只是代稱而已~）在B端產(chǎn)品當(dāng)中也非常常見(jiàn)，它出現(xiàn)在復(fù)雜的表單當(dāng)中，但是作為設(shè)計(jì)師，在真正去使用分類表單時(shí)，你就會(huì)發(fā)現(xiàn)會(huì)有非常多的問(wèn)題需要我們?nèi)ヌ幚?

效率低

對(duì)于用戶而言，分類表單不能夠完整的查看表單信息，每一個(gè)都需要來(lái)回切換。也就意味著填寫表單的時(shí)候，我們不能通過(guò)滾動(dòng)查看所有數(shù)據(jù)，而是要去點(diǎn)擊每一個(gè)單獨(dú)的分類里面，通過(guò)分類了解具體的表單內(nèi)容
同時(shí)必填項(xiàng)的提示，在分類表單也非常難以處理，因?yàn)槠涿恳粋€(gè)獨(dú)立，而作為用戶，其實(shí)是不清楚具體哪一個(gè)分類里面有必填項(xiàng)，也會(huì)導(dǎo)致填寫的效率過(guò)于低下（其實(shí)會(huì)有處理的辦法，只是大家對(duì)于這類提醒都不太滿意）

編輯模式不易處理

分類表單在編輯狀態(tài)時(shí)，同樣難以處理。當(dāng)提交完分類表單后，我們還需要考慮數(shù)據(jù)在詳情頁(yè)里的展示形式，因?yàn)楸韱闻c詳情頁(yè)的映射關(guān)系，這時(shí)候在設(shè)計(jì)時(shí)，應(yīng)該提供某一分類下的數(shù)據(jù)編輯，還是整個(gè)分類表單的數(shù)據(jù)編輯？
其實(shí)這種情況，特別是初級(jí)B端設(shè)計(jì)師，處理起來(lái)也是非常棘手

頂部導(dǎo)航

頂部導(dǎo)航非常特殊，雖然在我之前 導(dǎo)航菜單 的文章當(dāng)中提到過(guò)，但在使用頂部導(dǎo)航的過(guò)程當(dāng)中，還是會(huì)面臨很多問(wèn)題

頂部導(dǎo)航最大的局限性便是展示數(shù)量太低，畢竟在空間布局當(dāng)中，橫向空間與縱向空間的差異其實(shí)是非常大的，頂部導(dǎo)航的高度設(shè)定不能過(guò)高，同時(shí) 二級(jí)、三級(jí)菜單 只能夠使用下拉菜單，也就導(dǎo)致在導(dǎo)航菜單的設(shè)計(jì)當(dāng)中局限性過(guò)大，并且項(xiàng)目一旦發(fā)展過(guò)后，不容易解決問(wèn)題
當(dāng)然，頂部導(dǎo)航并不是一無(wú)是處，在許多工具型產(chǎn)品、官網(wǎng) 當(dāng)中，頂部導(dǎo)航都有著它的一席之地，其實(shí)這類形式，更多是以內(nèi)容為主的網(wǎng)站結(jié)構(gòu)，才會(huì)采取頂部導(dǎo)航，也就是上下結(jié)構(gòu)會(huì)更加合理

柵格

柵格嚴(yán)格意義上來(lái)講不算是組建，但是由于很多設(shè)計(jì)師 誤用、亂用，導(dǎo)致設(shè)計(jì)師為了柵格而柵格

因?yàn)樵诔Ｒ?jiàn)的移動(dòng)端設(shè)計(jì)當(dāng)中，是不存在柵格（主要是移動(dòng)端橫向空間小，使用不頻繁）
在桌面端的設(shè)計(jì)當(dāng)中，并不是說(shuō)柵格不好，而是很多時(shí)候設(shè)計(jì)師使用柵格往往會(huì)非常盲目，舉一個(gè)簡(jiǎn)單的例子，在表格當(dāng)中是否需要使用柵格？

答案是：“不用使用柵格”，其實(shí)這類問(wèn)題就是目前很多設(shè)計(jì)師的問(wèn)題，因?yàn)闀?huì)盲目使用，也就導(dǎo)致了我在做設(shè)計(jì)的過(guò)程當(dāng)中，出現(xiàn)很多為了柵格而柵格的現(xiàn)象。后面有時(shí)間單獨(dú)總結(jié)一下柵格主要運(yùn)用在哪些地方，希望大家別盲目使用
至于柵格應(yīng)該如何使用，在我之前的文章當(dāng)中都有提到，可以自行點(diǎn)擊歷史記錄查看

滑動(dòng)輸入條

滑動(dòng)輸入條在很多概念設(shè)計(jì)當(dāng)中都會(huì)經(jīng)常出現(xiàn)，特別是在 Dribbble 上的桌面端設(shè)計(jì)當(dāng)中，是每一個(gè)設(shè)計(jì)師的標(biāo)配，但是在實(shí)際的B端項(xiàng)目中，特別是桌面端的B端系統(tǒng)當(dāng)中，滑動(dòng)輸入條是非常不合理的一個(gè)組件

因?yàn)锽端產(chǎn)品當(dāng)中，大多數(shù)的產(chǎn)品都是需要精準(zhǔn)錄入，并且數(shù)據(jù)的區(qū)間非常大，因此也就造成了滑動(dòng)輸入條，使用起來(lái)給用戶的感受是非常糟糕的，并且由于大多數(shù)用戶的預(yù)期還是以直接輸入為主，這也就造成了現(xiàn)如今B端產(chǎn)品很見(jiàn)到滑動(dòng)輸入條的原因

面包屑

面包屑導(dǎo)航在實(shí)際工作當(dāng)中經(jīng)常使用，因?yàn)樵诔Ｒ?jiàn)的B端系統(tǒng)當(dāng)中，導(dǎo)航菜單以及信息結(jié)構(gòu)，一定是非常復(fù)雜的（除非你的系統(tǒng)里面就只有一級(jí)導(dǎo)航菜單，并且沒(méi)有其他的頁(yè)面層級(jí)邏輯）

因此通過(guò)面包屑導(dǎo)航，能夠讓我們清晰知道整個(gè)頁(yè)面的信息結(jié)構(gòu)，通過(guò)面包屑又因?yàn)槠?nbsp;小巧、靈活，無(wú)論你是在一個(gè)完整大頁(yè)面當(dāng)中，又或者是一個(gè)小的氣泡卡片當(dāng)中，面包屑都能進(jìn)行承載，并且它還能夠起到 返回 的作用，又能夠清晰的展示頁(yè)面的路徑信息，是一個(gè)可以一舉多得的組件

穿梭框

穿梭框相比大家的不會(huì)陌生，在設(shè)計(jì)B端產(chǎn)品的時(shí)候，或多或少都會(huì)有所涉及，與此同時(shí)，由于穿梭框本身復(fù)雜，再加上很多設(shè)計(jì)師會(huì)覺(jué)得它占比過(guò)大，因此不會(huì)去使用

今天安利穿梭框，其實(shí)是想安利這一類的穿梭類的組件，你會(huì)發(fā)現(xiàn)其實(shí)很多業(yè)務(wù)選擇類的組件都會(huì)通過(guò)穿梭框的形式進(jìn)行演變，比如我們常見(jiàn)的“國(guó)家城市選擇、部門成員選擇” 甚至表格當(dāng)中的字段顯示隱藏設(shè)置，這些都是傳統(tǒng)的數(shù)據(jù)選擇過(guò)后一步一步演變而來(lái)，因此這類穿梭框型的數(shù)據(jù)選擇
其實(shí)更加體現(xiàn)的是設(shè)計(jì)師基于目前的組件所進(jìn)行的優(yōu)化，而分析它為何這樣做，這樣做的原因，成為了穿梭框上榜的理由

折疊面板

折疊面板就像一個(gè)大的“盒子”，當(dāng)產(chǎn)品經(jīng)理在你的身后說(shuō)著：“這個(gè)信息我要放，那個(gè)信息也不能落下的時(shí)候”，拖出一個(gè)折疊面板來(lái)解決這個(gè)問(wèn)題

其實(shí)在折疊面板的使用過(guò)程中，主要是在詳情頁(yè)以及表格當(dāng)中，因?yàn)檎郫B面板本身可以容納很多信息，并且能夠交代具體的層級(jí)關(guān)系，因此使用折疊面板能夠有更多展示數(shù)據(jù)的可能性，即插即用，非常方便

氣泡卡片

在頁(yè)面當(dāng)中的任何地方，蹦出一個(gè)氣泡卡片你都不會(huì)感到奇怪。其實(shí)氣泡卡片我在日常設(shè)計(jì)當(dāng)中，經(jīng)常使用的一個(gè)組件，因?yàn)樗軌蛉菁{下任意的內(nèi)容，小到一串文字、大到一個(gè)視頻，都能夠在氣泡卡片當(dāng)中進(jìn)行使用

并且在信息當(dāng)中，氣泡卡片作為一個(gè)信息補(bǔ)充的組件，因此在系統(tǒng)當(dāng)中，需要展示但是又不是那么重要的信息，使用氣泡卡片，就會(huì)更加的方便

錨點(diǎn)導(dǎo)航

最后一個(gè)，自然逃不掉我們的錨點(diǎn)導(dǎo)航。感覺(jué)在我的瘋狂安利下，越來(lái)越多的產(chǎn)品都開始使用錨點(diǎn)導(dǎo)航。因?yàn)锽端產(chǎn)品必定是復(fù)雜且多的信息，自然而然我們?cè)谑褂玫倪^(guò)程當(dāng)中要更多考慮信息的承載

作者：CE青年   來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 

ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)