一款產(chǎn)品無(wú)到有，產(chǎn)品經(jīng)理需要做些什么？
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
卡片式設(shè)計(jì)是產(chǎn)品常用的頁(yè)面設(shè)計(jì)手段之一，它自帶的分割屬性讓頁(yè)面布局更加清晰，也是頁(yè)面布局的利器。但是，分割也可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)等問(wèn)題。如何用好卡片式設(shè)計(jì)？本文作者對(duì)此進(jìn)行了分析，與你分享。
近幾年，卡片式設(shè)計(jì)可以說(shuō)是移動(dòng)端產(chǎn)品中極為常見(jiàn)的設(shè)計(jì)形式了，甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計(jì)納入設(shè)計(jì)語(yǔ)言，在各大APP中得到廣泛運(yùn)用。
卡片式設(shè)計(jì)自帶分割屬性、讓界面更有層次感，能給人一種視覺(jué)上的享受，也因此讓其成為了頁(yè)面布局的利器，但它并非萬(wàn)能，因分割的原因可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)、造成橫向/縱向空間浪費(fèi)等問(wèn)題，需要根據(jù)實(shí)際場(chǎng)景和內(nèi)容形式來(lái)確定，不要專門為了“卡片式”而設(shè)計(jì)。
很多設(shè)計(jì)師對(duì)卡片設(shè)計(jì)習(xí)以為常，但對(duì)于使用卡片的原因、視覺(jué)表現(xiàn)方式、優(yōu)/缺點(diǎn)等并不是很了解。那么卡片到底該如何設(shè)計(jì)？需要注意哪些細(xì)節(jié)？筆者根據(jù)經(jīng)驗(yàn)并結(jié)合平時(shí)的一些思考，跟大家一起聊聊在設(shè)計(jì)中極易忽略的細(xì)則，希望能幫助大家提升卡片設(shè)計(jì)的精致感。
早在互聯(lián)網(wǎng)時(shí)代之前，卡片就出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡…等，不管是何種類型的卡片，它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息。
卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨(dú)立的個(gè)體，以至于后續(xù)被引用到線上界面中，同樣具有非常不錯(cuò)的信息歸納效果。
卡片本身就是一個(gè)完整的信息區(qū)塊、并同時(shí)承載豐富的互動(dòng)方式。在UI設(shè)計(jì)中，個(gè)性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性，它是一個(gè)UI設(shè)計(jì)組件，將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化，讓信息的表達(dá)更加直觀、操作也更便捷。
卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢(shì)，是因?yàn)樗茏尳缑嫘畔⒏袑哟胃?，從設(shè)計(jì)、交互、視覺(jué)以及用戶體驗(yàn)等各方面來(lái)看，都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對(duì)來(lái)說(shuō)，學(xué)習(xí)成本也是極低的。
卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線，卡片不僅對(duì)信息作出了分割，其本身還是一個(gè)獨(dú)立的容器，讓歸納組合后的信息能快速突出重點(diǎn)，將復(fù)雜內(nèi)容簡(jiǎn)單化處理。
卡片式布局整齊簡(jiǎn)練，清晰的信息結(jié)構(gòu)有助于用戶瀏覽，方便快速找到自己感興趣的內(nèi)容，避免用戶產(chǎn)生一種費(fèi)時(shí)或感覺(jué)內(nèi)容超長(zhǎng)的恐懼感，還能節(jié)省更多的時(shí)間成本。最常見(jiàn)的就是信息列表、圖文混排等，不僅做到了視覺(jué)上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。
卡片式設(shè)計(jì)有利于場(chǎng)景拓展，他能在信息不斷增/減的情況下、頁(yè)面依然能組成一個(gè)連貫的整體，在視覺(jué)上毫無(wú)違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。
卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動(dòng)端設(shè)備中，還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。
卡片式設(shè)計(jì)能很好的通過(guò)邊界襯托出內(nèi)容的整體性，特別是在電商類產(chǎn)品中的首頁(yè)頭部、瓷片區(qū)、營(yíng)銷引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。
卡片作為一個(gè)容器，它可以自由無(wú)限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過(guò)放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺(jué)體驗(yàn)。
卡片給人最直觀的感覺(jué)就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺(jué)元素提醒，節(jié)省了一定的頁(yè)面空間，還有著更大的操作熱區(qū)，無(wú)需做到精準(zhǔn)點(diǎn)擊。卡片式設(shè)計(jì)很容易融入各種交出手勢(shì)，如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等，為用戶提供更多便捷的操作。
卡片可通過(guò)縮放的形式充分利用動(dòng)畫進(jìn)行頁(yè)面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶一種還停留在當(dāng)前頁(yè)面的錯(cuò)覺(jué)，避免了傳統(tǒng)的跳轉(zhuǎn)頁(yè)面而造成的信息割裂感，流暢絲滑的過(guò)渡，給用戶更自然的交互體驗(yàn)。
這種類型的卡片在UI設(shè)計(jì)中最為常見(jiàn)，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個(gè)頁(yè)面信息的層級(jí)也更加清晰。
懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動(dòng)操作觸發(fā)，可作為臨時(shí)控件或長(zhǎng)期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過(guò)伸縮來(lái)定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁(yè)面中非常靈活。
例如高德地圖首頁(yè)，搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上，而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。
通欄類型的卡片具有更強(qiáng)的視覺(jué)阻斷，對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果，不過(guò)這種類型只通過(guò)頁(yè)面背景色保留上下邊間、且不會(huì)過(guò)多，不然頁(yè)面會(huì)顯得零散、雜亂。
瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度，最大限度的還原原始圖片效果。
卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時(shí)又將每組信息組合作出了明確的劃分，在不破壞頁(yè)面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立，如花瓣、Pinterest就是最好的例子。
信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長(zhǎng)內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來(lái)篩查對(duì)自己有用的信息。
卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過(guò)阻隔的方式快速告知用戶每個(gè)卡片的核心內(nèi)容，便于用戶在長(zhǎng)時(shí)間的滑動(dòng)過(guò)程中也能快速識(shí)別重要信息。
卡片式左右滑動(dòng)組合在音樂(lè)、視頻類產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對(duì)用戶的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺(jué)，用戶會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。
卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過(guò)模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶的理解成本，并對(duì)其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。
對(duì)于用戶主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性內(nèi)容，利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺(jué)更突出，在不影響用戶使用的前提下，可出現(xiàn)在任何位置。
卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁(yè)、會(huì)員等頁(yè)面中的關(guān)鍵信息進(jìn)行概括，并在頭部位置進(jìn)行重點(diǎn)突出，不僅讓原本單個(gè)的內(nèi)容形成整體，還能營(yíng)造出沉浸式的氛圍。
為了保持界面設(shè)計(jì)的一致性，需要將卡片樣式納入設(shè)計(jì)規(guī)范，例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場(chǎng)景中卡片大小的劃分界限以及圓角數(shù)值的確定等，大部分情況下都需要遵循設(shè)計(jì)規(guī)范。
在同一產(chǎn)品中，雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺(jué)效果，但并非所有頁(yè)面都適合卡片式設(shè)計(jì)。
那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據(jù)頁(yè)面內(nèi)容屬性及目標(biāo)定位來(lái)決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來(lái)區(qū)分信息組顯然更合適；但對(duì)于電商類型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會(huì)更容易識(shí)別，信息的可讀性也會(huì)更強(qiáng)。
卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn)，為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級(jí)雜/亂而增加用戶的視覺(jué)負(fù)擔(dān)。
如果再同一卡片中需要再次區(qū)分多個(gè)信息組，可利用間距留白、分割線或淺色背景等元素屬性來(lái)區(qū)分，依然能達(dá)到想要的效果。
因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動(dòng)端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動(dòng)來(lái)擴(kuò)充橫向隱性空間。
例如淘票票首頁(yè)，在1.5屏的范圍內(nèi)，幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容，從用戶體驗(yàn)角度出發(fā)，這是縱向空間無(wú)法比擬的。
卡片式設(shè)計(jì)不是目的，其主要是用來(lái)更好的區(qū)分信息層級(jí)、提升用戶瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會(huì)增加上下間距而導(dǎo)致頁(yè)面拉長(zhǎng)，因此，如無(wú)必要，不必盲目采用卡片式設(shè)計(jì)。
例如美團(tuán)APP的「首頁(yè)、電商、購(gòu)物車、我的」4大主功能頁(yè)面都使用了卡片形式，而「消息」頁(yè)則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。
這點(diǎn)不用多說(shuō)，新聞資訊類產(chǎn)品的內(nèi)容詳情頁(yè)就是最好的證明，不管其他頁(yè)面是否采用卡片形式，但詳情頁(yè)并不會(huì)跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無(wú)關(guān)元素對(duì)用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。
很多時(shí)候，我們總會(huì)聽(tīng)到PM說(shuō)這個(gè)很重要、那個(gè)也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說(shuō)明什么都沒(méi)有突出。在單個(gè)卡片中，組始終牢記這個(gè)準(zhǔn)則：一次只突出一個(gè)核心信息，以便于用戶快速、精準(zhǔn)捕捉，切記不可貪多。
卡片式設(shè)計(jì)之所有能快速流行起來(lái)且經(jīng)久不衰， 其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì)，能忽略設(shè)備的差異給用戶提供更好的服務(wù)?？ㄆ⒉皇呛?jiǎn)單的樣式設(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語(yǔ)言，通過(guò)多種方式的信息組合、結(jié)合豐富的交互操作，給用戶創(chuàng)造出極致的使用體驗(yàn)。
信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過(guò)程中，我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷，切勿拘泥于形式而忽略內(nèi)容本身的重要性。
任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史，卡片式設(shè)計(jì)也不會(huì)例外，但絕對(duì)不是這么快就結(jié)束，它依然值得我們?nèi)ド罹浚η蟠蛟旄玫男畔⒉季?、更舒適的用戶體驗(yàn)。
專欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞
底部標(biāo)簽欄的圖標(biāo)風(fēng)格在一定程度上決定了界面的風(fēng)格?？雌饋?lái)相對(duì)簡(jiǎn)單，但仍然有很多問(wèn)題值得注意。作者通過(guò)標(biāo)簽欄樣式分析、6個(gè)導(dǎo)航欄注意事項(xiàng)來(lái)總結(jié)底部標(biāo)簽欄的設(shè)計(jì)，希望通過(guò)這些內(nèi)容能幫助你對(duì)底部標(biāo)簽欄有進(jìn)一步的理解。
底部標(biāo)簽欄（也稱導(dǎo)航欄）是移動(dòng)端設(shè)計(jì)中必備的導(dǎo)航類型之一。底部標(biāo)簽欄上通常會(huì)安排最重要且頻繁操作的功能，方便用戶隨時(shí)都能快速訪問(wèn)。
雖然底部導(dǎo)航欄看起來(lái)相對(duì)簡(jiǎn)單，但要做到精準(zhǔn)設(shè)計(jì)，仍然有很多問(wèn)題值得注意。
本次通過(guò)標(biāo)簽欄樣式分析、六個(gè)導(dǎo)航欄注意事項(xiàng)來(lái)總結(jié)底部標(biāo)簽欄的設(shè)計(jì)～
底部標(biāo)簽欄可以是純圖標(biāo)樣式，或者圖標(biāo)與文本標(biāo)簽搭配的樣式。
選中的標(biāo)簽需要有不同的視覺(jué)風(fēng)格，可以使用按鈕、文字、圓點(diǎn)等樣式來(lái)表示選中效果，幫助用戶一目了然地定位當(dāng)前導(dǎo)航。
在Apple iOS底部標(biāo)簽欄中，標(biāo)簽欄的寬為390px，高為49px。
常規(guī)標(biāo)簽欄的圖標(biāo)大小為25x25px，緊湊型的標(biāo)簽欄圖標(biāo)為18x18px。
在iOS的底部標(biāo)簽欄中，文字使用的字體為10px，中等粗細(xì)。
底部標(biāo)簽欄最適合放置3-5個(gè)導(dǎo)航選項(xiàng)。移動(dòng)端屏幕相對(duì)較小，使用五個(gè)以上的選項(xiàng)會(huì)讓導(dǎo)航擠在一起，并影響可用性。
另外導(dǎo)航選項(xiàng)太多，手指的觸摸面積(紅色圓圈)會(huì)比觸摸目標(biāo)(導(dǎo)航選項(xiàng))的面積大很多，用戶有可能會(huì)意外觸發(fā)錯(cuò)誤的選項(xiàng)。
設(shè)計(jì)解析：
①如果選項(xiàng)很少，只有兩或三個(gè)時(shí)，可以考慮使用分段控件的設(shè)計(jì)樣式，將分段控件放在頁(yè)面上方作為導(dǎo)航。
② 如果選項(xiàng)很多，超過(guò)五個(gè)時(shí)，我們需要評(píng)估這些導(dǎo)航的優(yōu)先級(jí)，篩選出最重要的導(dǎo)航。如果必須要保留五個(gè)以上的導(dǎo)航選項(xiàng)，可以考慮使用類似漢堡菜單這樣的控件。
底部標(biāo)簽欄是用戶使用頻率非常高的導(dǎo)航之一，這就需要確保目標(biāo)受眾應(yīng)該對(duì)標(biāo)簽欄中的圖標(biāo)非常清晰，避免讓用戶產(chǎn)生疑惑。
如果在設(shè)計(jì)的時(shí)候，覺(jué)得某個(gè)圖標(biāo)的含義或者樣式對(duì)用戶來(lái)說(shuō)不是特別明確，那么就需要將圖標(biāo)與文字標(biāo)簽一起使用，方便用戶快速準(zhǔn)確地理解。
圖標(biāo)的顏色對(duì)比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計(jì)中兩個(gè)最常見(jiàn)問(wèn)題。
在底部欄設(shè)計(jì)過(guò)程中，我們不僅要區(qū)分已選標(biāo)簽和未選標(biāo)簽的狀態(tài)，保證已選標(biāo)簽更突出，還要注意觀察圖標(biāo)與文字之間、圖標(biāo)與背景之間的顏色對(duì)比度，確保未選狀態(tài)的圖標(biāo)和文字也能夠清晰易讀。
可滑動(dòng)的標(biāo)簽欄會(huì)對(duì)導(dǎo)航可見(jiàn)性產(chǎn)生影響，由于并非所有的導(dǎo)航選項(xiàng)都是一次可見(jiàn)，用戶可能很容易錯(cuò)過(guò)后面的選項(xiàng)。
另外，當(dāng)用戶左右滑動(dòng)標(biāo)簽欄時(shí)，前面已選的標(biāo)簽可能會(huì)消失，影響使用體驗(yàn)。
底部標(biāo)簽欄的空間本身就很小，因此在導(dǎo)航中使用文字時(shí)，每個(gè)字符都顯得很重要。
不要截?cái)鄻?biāo)簽，這樣會(huì)造成用戶不清楚標(biāo)簽的含義，可以嘗試使用更簡(jiǎn)練的文字來(lái)清楚地傳達(dá)選項(xiàng)含義。
花哨復(fù)雜的切換動(dòng)畫對(duì)于初次使用的用戶來(lái)說(shuō)可能看起來(lái)很酷，但是一旦用戶熟悉了產(chǎn)品并頻繁使用導(dǎo)航時(shí)，這些復(fù)雜的切換動(dòng)畫就會(huì)變得很煩人。
這些切換動(dòng)畫雖然看起來(lái)很復(fù)雜，但卻沒(méi)有為產(chǎn)品或用戶帶來(lái)任何有用的價(jià)值或信息，因此這些動(dòng)畫就會(huì)變成一種負(fù)擔(dān)，讓用戶感到沮喪。
底部標(biāo)簽欄的切換動(dòng)畫應(yīng)該干脆利落，可以使用簡(jiǎn)單的微動(dòng)效作為輔助，切莫太復(fù)雜。
以上是APP底部標(biāo)簽欄需要注意的6個(gè)設(shè)計(jì)點(diǎn)，希望通過(guò)這些內(nèi)容能幫助你對(duì)Bottom Tab Bar有進(jìn)一步的理解。
慢慢來(lái)比較快，希望對(duì)你有幫助！
參考：babch.biz/bottom-tab-bar-design
專欄作家
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pixabay，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在交互設(shè)計(jì)中，字體的呈現(xiàn)方式是提升信息傳遞效率的重要一環(huán)，文字信息層級(jí)的處理是否得當(dāng)，一定程度上會(huì)對(duì)用戶的視覺(jué)體驗(yàn)有著重要影響。那么在字體設(shè)計(jì)上，設(shè)計(jì)師或者相應(yīng)的業(yè)務(wù)人員應(yīng)該如何做好處理，以提升信息傳播的效率和質(zhì)量？不如來(lái)看看作者的總結(jié)吧。
文字是設(shè)計(jì)中的重要組成部分，就像我們平時(shí)看到的海報(bào)，里面各種被精心設(shè)計(jì)過(guò)的字體經(jīng)常會(huì)成為視覺(jué)焦點(diǎn)，以醒目且個(gè)性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計(jì)中不需要對(duì)文字過(guò)分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級(jí)、重要程度以及用戶的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對(duì)文字信息層級(jí)的處理，對(duì)用戶的視覺(jué)體驗(yàn)有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過(guò)多年的發(fā)展，也積累的很多的專業(yè)字體知識(shí)，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰地傳達(dá)給用戶。本文將圍繞著字型、字號(hào)、字距、字重等幾個(gè)屬性，針對(duì)各方面深度解析，希望能夠幫到大家。
文字是信息內(nèi)容的載體，能最直接的將信息清晰地表達(dá)出來(lái)，字體則表現(xiàn)了文字的外在特征，合理地使用這些屬性特征不僅能清晰準(zhǔn)確地傳遞信息、用于特定場(chǎng)景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類的產(chǎn)品使用的字體通常會(huì)給人一種力量、剛硬、壯實(shí)的感覺(jué)，而女性專用產(chǎn)品字體則顯的纖細(xì)、苗條。
不同類型的字體傳達(dá)出不同的氣質(zhì)，綜合來(lái)講，字體可分為黑體、宋體、圓體、書法體這四類，平時(shí)大家看到的各種形形色色的其他字體，基本是通過(guò)這幾類延伸而來(lái)。
在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場(chǎng)景如瓷片區(qū)、卡片、banner、專題頭圖、引導(dǎo)頁(yè)、閃屏等，對(duì)于用什么字體不會(huì)有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫橫平豎直、粗細(xì)均勻且字面呈正方形，一般來(lái)說(shuō)，沒(méi)有襯線的字體都可以稱作黑體。黑體結(jié)構(gòu)清晰、簡(jiǎn)潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒(méi)有太大的個(gè)性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無(wú)論是標(biāo)題、正文、提示等使用場(chǎng)景都可以作為首選，對(duì)老設(shè)計(jì)師能多一個(gè)選擇、新手設(shè)計(jì)師也不易犯錯(cuò)。
iOS與Android是移動(dòng)設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁(yè)面也只是單獨(dú)拎出來(lái)微調(diào)即可，但對(duì)于中、大型的互聯(lián)網(wǎng)公司則很難滿足優(yōu)質(zhì)用戶體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋方字體在Android設(shè)備中無(wú)法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無(wú)法顯示完整等，都會(huì)影響用戶體驗(yàn)。
此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時(shí)間的可自行查看，本文只對(duì)字體規(guī)范作基本了解。
iOS使用的是「蘋方」字體，提供了6個(gè)字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿足設(shè)計(jì)要求，提供了7個(gè)字重，英文字體為「Roboto」。
此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯(cuò)的選擇，字體外形較長(zhǎng)，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過(guò)這款字體商用的話需要收費(fèi)的。
字號(hào)的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號(hào)會(huì)讓頁(yè)面信息雜亂，不利于用戶閱讀。在設(shè)定字號(hào)規(guī)范時(shí)，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號(hào)規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號(hào)設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號(hào)的設(shè)定并沒(méi)有固定數(shù)值，原則上不影響用戶的瀏覽就行。筆者建議最小字號(hào)不要低于20px，在設(shè)計(jì)過(guò)程中，可以通過(guò)設(shè)備實(shí)時(shí)預(yù)覽，因?yàn)橥瑯拥淖痔?hào)在不同的環(huán)境、色值、背景下，其視覺(jué)效果都有所區(qū)別。
其次，遞增值決定著信息層級(jí)區(qū)分的明顯程度，遵循字號(hào)越大、遞增值越大的原則，常用字號(hào)數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號(hào)的層級(jí)區(qū)分更明顯，字號(hào)設(shè)定要避開(kāi)奇數(shù)且最小遞增值不要低于4px，下面舉幾個(gè)常見(jiàn)的例子：
規(guī)范好的字號(hào)該如何使用，還得根據(jù)界面中的實(shí)際場(chǎng)景來(lái)決定，如下圖：
字間距是指兩個(gè)字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場(chǎng)景才會(huì)手動(dòng)調(diào)整，且沒(méi)有固定的規(guī)律，保持視覺(jué)舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。
行高是指包圍在字體之外的隱形邊框，一個(gè)字體元素的的行高等于文字上邊框+下邊框+字號(hào)的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺(jué)上的上下空間，通常行高為字號(hào)的1.2倍，而中文字體沒(méi)有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號(hào)較小且折行較多，行高甚至能達(dá)到字號(hào)的2倍。
字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級(jí)關(guān)系，給用戶的視覺(jué)感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會(huì)有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個(gè)字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個(gè)字重，再通過(guò)色彩、字號(hào)使其成為對(duì)立關(guān)系，明顯的拉開(kāi)文字內(nèi)容層級(jí)后，方能保持良好的瀏覽體驗(yàn)。
這種主要針對(duì)標(biāo)點(diǎn)符號(hào)，以英文字母為標(biāo)準(zhǔn)，半角是指一個(gè)符號(hào)占用一個(gè)標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個(gè)字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會(huì)隨著中/英文的切換而自動(dòng)改變，但有時(shí)候難免會(huì)操作失誤讓頁(yè)面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時(shí)間/日期也大多會(huì)使用半角符號(hào)，所以設(shè)計(jì)師對(duì)此有一定了解的時(shí)候，在處理這些細(xì)枝末節(jié)就能做到收放自如。
在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會(huì)提供3~4個(gè)等級(jí)的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號(hào)需用色規(guī)律。
如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來(lái)體現(xiàn)文字色彩層級(jí)，深色模式中很常見(jiàn)，下面我們一起來(lái)了解幾個(gè)常見(jiàn)的使用場(chǎng)景。
標(biāo)題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時(shí)刻吸引用戶的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡(jiǎn)單明了且有沖擊力，字號(hào)一般會(huì)控制在30px以上并加粗顯示，直接使用一級(jí)色值（#333）即可。
在特殊場(chǎng)景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級(jí)色值。
正文并不需要吸引用戶注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說(shuō)明。
當(dāng)白色背景文本內(nèi)容過(guò)多、在需要用戶仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號(hào)使用二級(jí)文字（#666）色值。
提示類文字使用場(chǎng)景就相對(duì)較多，它除了給用戶展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶進(jìn)行下一步操作。常見(jiàn)使用色值為三級(jí)（#999）、四級(jí)色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號(hào)一般為24px，因使用場(chǎng)景不同，也會(huì)有特殊的存在，例如表單中占位符的字號(hào)會(huì)跟隨輸入后的字號(hào)統(tǒng)一。
超鏈接在字號(hào)、色值上沒(méi)有一定的限制，但需要一個(gè)特定的輔助元素/屬性來(lái)提示用戶這是可點(diǎn)擊的。
例如APP登錄頁(yè)面，找回密碼、注冊(cè)、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁(yè)中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。
規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場(chǎng)景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場(chǎng)景需特殊對(duì)待，字體也不例外，如以下場(chǎng)景：
雖說(shuō)黑體（蘋方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的APP來(lái)時(shí)是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類的APP會(huì)選擇使用宋體，整體看起來(lái)有一種高端、時(shí)尚且優(yōu)雅的感覺(jué)。
整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場(chǎng)景，會(huì)讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶的視覺(jué)吸引力能得到很大提升。
在一個(gè)APP中，堅(jiān)持使用同一個(gè)家族的字體，對(duì)標(biāo)題、正文等文字信息有一個(gè)統(tǒng)一的視覺(jué)規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開(kāi)發(fā)落地時(shí)存在一致性問(wèn)題，減少開(kāi)發(fā)與設(shè)計(jì)的出入。
筆者曾見(jiàn)過(guò)這樣的設(shè)計(jì)師，界面中原本用了「蘋方」字體，在一個(gè)特殊場(chǎng)景下，「蘋方」的粗體字重?zé)o法滿足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計(jì)需求是滿足了，但稍有不慎就會(huì)成為沒(méi)有價(jià)值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會(huì)影響整體視覺(jué)的一致性；其次，若程序沒(méi)有嵌入另外的字體，產(chǎn)品落地后其視覺(jué)效果毫無(wú)改觀，且更沒(méi)有必要為了某個(gè)場(chǎng)景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓應(yīng)用安裝包無(wú)故加大。在設(shè)計(jì)中，有時(shí)候在解決某個(gè)問(wèn)題時(shí)，解決方案并非無(wú)可替代，加粗字體亦是如此。
另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個(gè)家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
在同一個(gè)界面中，字體色值、字號(hào)、字重等，都是用于區(qū)分信息層級(jí)，盡量不要使用過(guò)多的層級(jí)，避免層級(jí)混亂影響信息瀏覽。
在信息層級(jí)處理方式的四個(gè)基本原則中，「對(duì)比」就是將復(fù)雜的信息通過(guò)元素的各種屬性以不同的視覺(jué)效果呈現(xiàn)，來(lái)體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
避頭尾使用在文字內(nèi)容較多的折行場(chǎng)景中，主要處理標(biāo)點(diǎn)符號(hào)剛好出現(xiàn)在一行文字的開(kāi)頭或結(jié)尾時(shí)，通過(guò)自動(dòng)調(diào)整單行的字符間距、在視覺(jué)上將標(biāo)點(diǎn)符號(hào)前移或后移。
在新聞資訊類應(yīng)用的詳情頁(yè)中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號(hào)造成視覺(jué)重量不一、信息參差不齊的問(wèn)題出現(xiàn)。
很多時(shí)候，為了區(qū)分信息層級(jí)，首先想到的是利用不同的字號(hào)、字重來(lái)體現(xiàn)，這當(dāng)然沒(méi)有問(wèn)題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級(jí)）則效果更佳。
如下圖：標(biāo)題一級(jí)色值（#333）、正文二級(jí)色值（#666）、時(shí)間日期三級(jí)色值（#999）。
備用字體只會(huì)運(yùn)用在web頁(yè)面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時(shí)又擔(dān)心用戶在某些設(shè)備中因?yàn)闆](méi)有這個(gè)字體而無(wú)法瀏覽其效果，則會(huì)另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺(jué)體驗(yàn)上的損失。
如果字體包不大，也可以讓開(kāi)發(fā)將其放在服務(wù)器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。
可讀性應(yīng)該是選擇字體的首要元素，雖說(shuō)很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒(méi)有必要。
UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過(guò)于變形的可愛(ài)風(fēng)格、書法手寫體等都盡量少用。
文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對(duì)其基本屬性及使用場(chǎng)景有一個(gè)清晰的了解，使用的是否恰當(dāng)取決于我們對(duì)字體的選擇。雖說(shuō)在UI領(lǐng)域，字體模塊類的文章比較少（更多是文字、字庫(kù)的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對(duì)設(shè)計(jì)來(lái)說(shuō)是錦上添花。
關(guān)于UI界面中的字體，其實(shí)沒(méi)有太多的講究，也沒(méi)必要整得花里胡哨，重點(diǎn)在于排版過(guò)重中注意信息層級(jí)的劃分以及有足夠的視覺(jué)舒適度即可。
專欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對(duì)于設(shè)計(jì)者來(lái)說(shuō)，應(yīng)該秉持怎樣的初心來(lái)設(shè)計(jì)呢？目前，引導(dǎo)幫助功能又有哪些常見(jiàn)的分類呢？帶著這些問(wèn)題，我們一起走進(jìn)這篇文章，看看作者為我們的分享。推薦相關(guān)人員閱讀與學(xué)習(xí)。
前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。
因?yàn)橐呱瘫＃孕枰褂蒙绫？?，之前我記得社保結(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開(kāi)始幫我點(diǎn)擊操作。
她覺(jué)得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒(méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺(jué)得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。
在B端產(chǎn)品中也有很多類似問(wèn)題，用戶不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些數(shù)據(jù)類產(chǎn)品，專業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請(qǐng)，引導(dǎo)用戶進(jìn)行使用。
邀請(qǐng)就是引導(dǎo)用戶進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在當(dāng)前界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。
例如：飛書-我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請(qǐng)（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請(qǐng)。
另一種方案是任何時(shí)候都顯示邀請(qǐng)，例如：石墨文檔-我的桌面，復(fù)選框一直顯示。
靜態(tài)邀請(qǐng)就是通過(guò)直接在頁(yè)面上給出交互提示，可以讓用戶隨時(shí)看到期望的界面功能。
靜態(tài)邀請(qǐng)主要有兩種模式：引導(dǎo)操作邀請(qǐng)、漫游探索邀請(qǐng)。
01 步驟引導(dǎo)
例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟
引導(dǎo)操作會(huì)占據(jù)頁(yè)面較大的空間，同時(shí)也會(huì)吸引用戶的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁(yè)面和信息層。
02 白板引導(dǎo)
另一種引導(dǎo)操作邀請(qǐng)叫白板式引導(dǎo)。
意思很明確：現(xiàn)在只有一個(gè)空白頁(yè)面，需要引導(dǎo)用戶創(chuàng)建內(nèi)容。
利用空白區(qū)域“變廢為寶”，如何對(duì)該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。
與引導(dǎo)操作邀請(qǐng)關(guān)系密切的是漫游探索邀請(qǐng)。假設(shè)你重新設(shè)計(jì)了某個(gè)頁(yè)面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马?yè)面，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶介紹新功能最好的方法。
最佳實(shí)踐：
靜態(tài)邀請(qǐng)適合提示用戶當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶經(jīng)常不會(huì)閱讀指導(dǎo)說(shuō)明性的文字。而在用戶交互過(guò)程中，在他們需要的時(shí)候提供邀請(qǐng)則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請(qǐng)就是在用戶交互過(guò)程中的某個(gè)點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。
吸引用戶的一種方式是通過(guò)鼠標(biāo)懸停來(lái)顯示邀請(qǐng)
例如：飛書消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來(lái)吸引用戶，鼠標(biāo)移入上去后提示可以點(diǎn)擊完成，點(diǎn)擊后消息移除列表。
最佳實(shí)踐
唐納德·諾曼將這個(gè)術(shù)語(yǔ)引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門把手，門把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒(méi)有物理屬性，不過(guò)，由于習(xí)慣、術(shù)語(yǔ)、圖形及一致性等原因，用戶能夠在某種程度上感覺(jué)到他們可以操作這些元素。
例如：第一張圖飛書文檔sheet頁(yè)“加號(hào)”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請(qǐng)。用戶沒(méi)觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。
預(yù)期功能邀請(qǐng)之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶順利完成一連串操作。
最佳實(shí)踐
設(shè)計(jì)邀請(qǐng)時(shí)怎么才能猜測(cè)用戶的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶下一步可能會(huì)執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶想法，那么面臨的困難就會(huì)比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)點(diǎn)后，進(jìn)行第二個(gè)點(diǎn)連接時(shí)，會(huì)有多種可能性，這個(gè)時(shí)候系統(tǒng)也不確定用戶會(huì)怎樣連接，但會(huì)給出對(duì)應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來(lái)輔助用戶進(jìn)行連接。
例如：這種工作流場(chǎng)景個(gè)人覺(jué)得也算是一種，點(diǎn)擊“加號(hào)”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。
這種在交互期間以可見(jiàn)方式向用戶表明系統(tǒng)推斷出的用戶想法被稱為推論邀請(qǐng)。
圖片類型的更多邀請(qǐng)，例如：站酷相關(guān)推薦
文字更多邀請(qǐng)，例如：QQ郵箱右側(cè)最近聯(lián)系人
精心設(shè)計(jì)的應(yīng)用能夠通過(guò)邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無(wú)論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個(gè)交互層次的有效方法。
謝謝觀看！
作者：夜鶯YEAH；公眾號(hào)：夜鶯B端UX設(shè)計(jì)
本文由 @夜鶯YEAH 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在視頻播放器中，合理的手勢(shì)交互設(shè)計(jì)可以幫助用戶提升操作上的便捷性，從而實(shí)現(xiàn)更快捷的觸達(dá)。那么如果想在已有的手勢(shì)交互上實(shí)現(xiàn)設(shè)計(jì)升級(jí)，產(chǎn)品或設(shè)計(jì)一側(cè)可以怎么做？本篇文章里，作者針對(duì)手勢(shì)交互優(yōu)化一事進(jìn)行了解讀，一起來(lái)看。
視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露。基于此種場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。
視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！?、「雙擊→點(diǎn)贊」、「長(zhǎng)按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。
那么如何在保留用戶對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。
本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。
「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。
以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。
于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。
「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。
由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
通過(guò)對(duì)競(jìng)品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競(jìng)品均有使用長(zhǎng)按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長(zhǎng)按交互選型， 分別為：長(zhǎng)按觸發(fā)獨(dú)立播控面板、長(zhǎng)按觸發(fā)浮層播控選項(xiàng)、長(zhǎng)按觸發(fā)特定播控功能。
1）長(zhǎng)按手勢(shì)交互擴(kuò)容
針對(duì)目前視頻播控菜單存在的問(wèn)題，經(jīng)過(guò)和業(yè)務(wù)對(duì)上述三種長(zhǎng)按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長(zhǎng)按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。
但隨之而來(lái)的難點(diǎn)是我們目前播放器中的長(zhǎng)按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶。
那么如何在兼容用戶已有長(zhǎng)按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。
基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來(lái)對(duì)視頻播放器中的長(zhǎng)按手勢(shì)進(jìn)行重新定義，通過(guò)「長(zhǎng)按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：
2）容錯(cuò)性兼容
在設(shè)定「長(zhǎng)按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長(zhǎng)按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過(guò)程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長(zhǎng)按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過(guò)點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。
3）易用性打磨
差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開(kāi)發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wèn)題進(jìn)行快速打磨優(yōu)化。
我們根據(jù)測(cè)試目標(biāo)、用戶類別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測(cè)試。
測(cè)試訪談的過(guò)程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/p>
同時(shí)，我們通過(guò)觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。
① 擴(kuò)展觸發(fā)熱區(qū)
考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長(zhǎng)按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長(zhǎng)按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長(zhǎng)按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
② 支持跟手觸發(fā)
長(zhǎng)按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
③ 實(shí)時(shí)提示及響應(yīng)反饋
靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：
小流量實(shí)驗(yàn)上線后，經(jīng)過(guò)近半個(gè)月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。
「實(shí)驗(yàn)組」長(zhǎng)按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說(shuō)明用戶對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。
「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長(zhǎng)，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶對(duì)于「長(zhǎng)按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過(guò)滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來(lái)，對(duì)于用戶來(lái)說(shuō)，長(zhǎng)按快捷菜單帶來(lái)的整體收益是大于折損的。
隨著長(zhǎng)按快捷菜單的上線推全，長(zhǎng)按手勢(shì)的滲透率也持續(xù)走高，用戶逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長(zhǎng)按觸發(fā)的訴求，于是我們對(duì)長(zhǎng)按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長(zhǎng)按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶通過(guò)長(zhǎng)按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。
手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(chǔ)手勢(shì)還是組合類高級(jí)手勢(shì)，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。
以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場(chǎng)景的手勢(shì)交互體驗(yàn)。
作者：百度APP用戶體驗(yàn)
來(lái)源公眾號(hào)：百度MEUX（ID：baidumeux），百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在日常場(chǎng)景中，畫面平衡是潛在的一個(gè)重要影響因素，合理且有吸引力的視覺(jué)平衡設(shè)計(jì)，可以讓用戶更加舒心地接受并停留在使用頁(yè)面或者相應(yīng)場(chǎng)景中。那么，視覺(jué)平衡究竟應(yīng)該如何做好？本篇文章里，作者針對(duì)視覺(jué)平衡這件事兒進(jìn)行了分析總結(jié)，一起來(lái)看一下。
畫面平衡是一個(gè)很基本的設(shè)計(jì)理念，但很多朋友在平時(shí)的作品中容易忽視這個(gè)點(diǎn)。彩云在星球中幫不少朋友看過(guò)作品集，發(fā)現(xiàn)最多的問(wèn)題之一就是畫面平衡沒(méi)做好，我覺(jué)得只要把這個(gè)基本問(wèn)題解決了，作品就能提升一個(gè)檔次。
用戶本能地會(huì)對(duì)不平衡的設(shè)計(jì)感到厭煩，如何在畫面中創(chuàng)造一個(gè)有吸引力的平衡？是本篇文章要分享的內(nèi)容。
Illustration: Outcrowd
平衡是一個(gè)作品中最重要的元素之一。平衡中的對(duì)稱關(guān)系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。
人體是垂直對(duì)稱的，我們的視覺(jué)接收也與之相對(duì)應(yīng)。我們喜歡物體在垂直軸上保持平衡，直覺(jué)上總是傾向于平衡一種力量與另一種力量。
Illustration: Outcrowd
在設(shè)計(jì)環(huán)境中，平衡是基于元素的視覺(jué)重量，而視覺(jué)重量是用戶對(duì)圖像的注意力范圍。如果畫面是平衡的，用戶會(huì)下意識(shí)地感到舒適。畫面平衡被認(rèn)為是其元素在視覺(jué)上的比例安排。
如何讓一個(gè)頁(yè)面看起來(lái)平衡？
最常見(jiàn)的平衡例子就是使用對(duì)稱。
在潛意識(shí)層面上，對(duì)稱的視覺(jué)能讓人愉悅，能讓畫面看起來(lái)和諧有條理。對(duì)稱的平衡是通過(guò)在水平或垂直的中軸兩側(cè)均勻放置元素來(lái)創(chuàng)造的。也就是說(shuō)，畫面中間假想線的兩邊實(shí)際上是彼此的鏡像。有些人認(rèn)為對(duì)稱的平衡是無(wú)聊和可預(yù)測(cè)的，但它經(jīng)受住了時(shí)間的考驗(yàn)，到現(xiàn)在仍然是在頁(yè)面上創(chuàng)造舒適和穩(wěn)健感覺(jué)的最好方法之一。
Illustration: Outcrowd
兩側(cè)重量不相同的元素構(gòu)成具有不對(duì)稱平衡。
動(dòng)態(tài)平衡通常會(huì)比靜態(tài)平衡更有設(shè)計(jì)感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會(huì)條件反射性地開(kāi)始尋找平衡點(diǎn)，這是一個(gè)很好的機(jī)會(huì)，可以將注意力吸引到頁(yè)面上可能還沒(méi)被注意到的部分。頁(yè)面重點(diǎn)就應(yīng)該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。
Landing page — Asian Cuisine
比如一般這樣去“配重”的元素會(huì)是一個(gè)按鈕或者標(biāo)題。
重要信息（或者是行動(dòng)按鈕）就是我們需要去配重的價(jià)值元素。
不對(duì)稱的現(xiàn)象越嚴(yán)重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時(shí)更仔細(xì)地研究這樣的畫面。然而，這里需要注意分寸，過(guò)于古怪的構(gòu)圖并不總是能被很好的感知。
Illustration: Outcrowd
平衡中的另一種類型，特點(diǎn)是視覺(jué)元素從一個(gè)共同的中心點(diǎn)放射出來(lái)。徑向平衡在設(shè)計(jì)中不常用。它的優(yōu)點(diǎn)是，注意力很容易找到并保持一個(gè)焦點(diǎn)——恰好就在它的中心，這通常是構(gòu)圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒(méi)有突出的焦點(diǎn)，所有的元素都有同樣的視覺(jué)重量。沒(méi)有層次，乍一看，畫面就像視覺(jué)噪音，但所有元素又相互匹配，形成一個(gè)連貫的整體。
（彩云注：這是一種比較高階的設(shè)計(jì)平衡處理手法，用的好可以讓畫面非常具有設(shè)計(jì)感，但把握不好的話，就會(huì)非常凌亂。所以，我們平時(shí)能看到很多大師的作品看似一些簡(jiǎn)單圖形的使用，但就是好看，輪到自己設(shè)計(jì)的時(shí)候就會(huì)發(fā)現(xiàn)，越簡(jiǎn)單的設(shè)計(jì)似乎越難設(shè)計(jì)好。）
Illustration: Outcrowd
當(dāng)談到構(gòu)圖中的重量平衡時(shí)，他們經(jīng)常將其與物理世界中的重量進(jìn)行比較：重力、杠桿、重量和支點(diǎn)。我們的大腦和眼睛感知平衡的方式非常類似于力學(xué)定律。我們很容易把一幅畫想象成一個(gè)在某一點(diǎn)上平衡的平面，就像一個(gè)天平。如果我們?cè)趫D像的邊緣添加一個(gè)元素，它就會(huì)失去平衡，有必要修復(fù)它。元素是否是一組色調(diào)、顏色還是點(diǎn)并不重要，目標(biāo)是找到圖像的視覺(jué)“重心”，即圖像的重心。
不幸的是，沒(méi)有精確的方法來(lái)確定一個(gè)物體的視覺(jué)質(zhì)量。一般來(lái)說(shuō)，設(shè)計(jì)師依賴于他們的直覺(jué)。不過(guò)，下面這些有用的觀察可能會(huì)有所幫助：
1）大小
大的物體總是更重。
2）形狀
不規(guī)則形狀比規(guī)則形狀的元素輕。
3）顏色
暖色比冷色重。
4）色調(diào)
深色物體比淺色物體重。
5）圖案
帶有圖案的元素顯得更重。
6）3D
帶有紋理貼圖的元素顯得更重。
7）位置
物體離中心越遠(yuǎn)，其視覺(jué)重量越大。
8）方向
垂直元素比水平元素更重。
9）密度
許多小元素可以抵消一個(gè)大元素。
10）內(nèi)部復(fù)雜性
物體內(nèi)部越復(fù)雜，視覺(jué)重量更大。
11）填充空間關(guān)系
正形空間比負(fù)形空間更重。
12）對(duì)重量的感知
照片中的啞鈴看起來(lái)會(huì)比一只鋼筆更重。
當(dāng)使用對(duì)稱時(shí)，作品看起來(lái)可以更加的專業(yè)和有科學(xué)性。其中，靜態(tài)對(duì)稱的作品顯得更加有專業(yè)精神和嚴(yán)肅的；而動(dòng)態(tài)對(duì)稱的設(shè)計(jì)方法則能吸引用戶的興趣，表達(dá)出個(gè)性和創(chuàng)造力，能讓用戶集中注意力。
原文作者：Erik Messaki（本文翻譯已獲得作者的正式授權(quán)）
譯者：彩云Sky，人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級(jí)視覺(jué)設(shè)計(jì)師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在界面設(shè)計(jì)中，好看且和諧的配圖會(huì)讓用戶潛意識(shí)里更容易接受、或者更愿意停留于當(dāng)前頁(yè)面，那么，如何才能把配圖做好，讓界面看起來(lái)更加高級(jí)和耐看？本篇文章里，作者總結(jié)了10個(gè)優(yōu)化UI配圖的小方法，一起來(lái)看一下。
“配圖用的好，作品差不了”，UI中配圖的好壞直接影響到界面的品質(zhì)感。它非常重要但卻經(jīng)常容易被忽視，要想把配圖做好其實(shí)也是有規(guī)律可循的，今天的文章就將總結(jié)配圖使用的10個(gè)優(yōu)秀方法，相信看完一定會(huì)有所收獲。之前我也寫過(guò)另一篇如何選好配圖的文章《如何選到設(shè)計(jì)感強(qiáng)的配圖，我總結(jié)了這7個(gè)實(shí)用方法》，同時(shí)也分享了很多超高質(zhì)量的圖片素材資源和網(wǎng)站，千萬(wàn)別錯(cuò)過(guò)。
在欣賞了Behance上數(shù)百個(gè)高質(zhì)量的項(xiàng)目和眾多Dribbble優(yōu)質(zhì)作品后，我總結(jié)出了一套可以將圖片與UI結(jié)合提升設(shè)計(jì)感的方法，可以讓你的作品立即看起來(lái)更加專業(yè)。
本文的靈感來(lái)源于我剛開(kāi)始做UI時(shí)所遇到的困難。和許多其他設(shè)計(jì)師一樣，當(dāng)我在Dribbble和Behance上瀏覽別人的作品獲得靈感時(shí)，面對(duì)這些海量作品時(shí)常會(huì)感到迷失和不知所措。就像透過(guò)萬(wàn)花筒看到各種花哨的圖案一樣，當(dāng)把萬(wàn)花筒挪開(kāi)的時(shí)候這些圖案就消失了，幸福的感覺(jué)是短暫的。當(dāng)我自己開(kāi)始設(shè)計(jì)作品時(shí)，我仍然不知道該怎么做。
隨著時(shí)間的推移，我意識(shí)到我并沒(méi)有從日常的作品欣賞和搜集中思考和學(xué)習(xí)，就只是漫無(wú)目的地欣賞了其他設(shè)計(jì)師的作品。
漸漸地我發(fā)現(xiàn)了一種欣賞其他設(shè)計(jì)師作品的好方法，我會(huì)有意識(shí)地去總結(jié)記錄下他們使用的想法和技巧，然后應(yīng)用到我的日常工作。在本文中，我很想分享一些其他設(shè)計(jì)師用來(lái)處理配圖的方法，這些方法可以使作品看起來(lái)更加專業(yè)。
（彩云說(shuō)：這里的圖片選擇要突出核心內(nèi)容且一定要高質(zhì)量，不要選擇雜亂無(wú)章或與主題無(wú)關(guān)的低質(zhì)量圖片。）
（彩云說(shuō)：結(jié)合頁(yè)面表達(dá)需要，選擇合適的配圖并做融合或出界的設(shè)計(jì)，會(huì)讓畫面極具吸引力和強(qiáng)烈的設(shè)計(jì)感。）
（彩云注：當(dāng)畫面主要以高質(zhì)量圖片吸引用戶注意時(shí)，盡可能的利用更大展示面積，這樣會(huì)顯得更加高級(jí)和有視覺(jué)沖擊力。）
（彩云注：這里的色塊要注意跟圖片的主色調(diào)保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環(huán)上30°區(qū)間內(nèi)的顏色就比較和諧。）
（彩云注：這里的形狀建議不要太過(guò)于復(fù)雜，用一些基本圖形就可以，比如圓點(diǎn)、方塊矩形之類的，增強(qiáng)畫面的形式感。）
（彩云注：這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時(shí)候還要注意識(shí)別性，比如文字比較緊湊的時(shí)候。圖案或形狀更多的是起到視覺(jué)引導(dǎo)的作用。）
（彩云注：這個(gè)很好理解，就是以文字或形狀作為遮罩，增加畫面的設(shè)計(jì)感，文字盡量選擇粗體。）
（彩云注：這個(gè)技巧可能跟第3條有些沖突，其實(shí)這2個(gè)方法都是可以的，要根據(jù)頁(yè)面具體的排版情況靈活使用。）
（彩云注：這個(gè)技巧也比較容易理解，一般會(huì)選擇飽和度較高的顏色應(yīng)用在充滿活力的頁(yè)面上，增加畫面的沖擊力。）
（彩云注：這個(gè)技巧跟上面的有些類似，只不過(guò)是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會(huì)更加容易出彩。）
（彩云注：這個(gè)方法有一點(diǎn)需要注意的就是剪切的形狀不要過(guò)于復(fù)雜，一般用基礎(chǔ)圖形就好。）
以上，就是我總結(jié)的一些可以用來(lái)操作UI圖片的實(shí)用方法，這些方法可以使得作品變得更加有視覺(jué)感也更加專業(yè)。
原文作者：Victor Adeyemo（本文翻譯已獲得作者的正式授權(quán)）
譯者：彩云Sky，人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級(jí)視覺(jué)設(shè)計(jì)師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
設(shè)計(jì)是通過(guò)美感和邏輯來(lái)提升用戶體驗(yàn)，提高企業(yè)滿意度。本文探討美感設(shè)計(jì)在用戶體驗(yàn)中的作用，從五個(gè)維度分別論述美感設(shè)計(jì)的重要性，一起來(lái)看看吧。
設(shè)計(jì)是通過(guò)邏輯和美感來(lái)解決人們的問(wèn)題，滿足他們的愿望。本文將探討美感在用戶體驗(yàn)設(shè)計(jì)中的作用，以此提高用戶和企業(yè)的滿意度。
數(shù)字產(chǎn)品的成功與否，除了其功能性能以外，美感也扮演了至關(guān)重要的角色。在競(jìng)爭(zhēng)日益激烈的市場(chǎng)，用戶的選擇不僅僅局限于功能是否滿足需求，審美愉悅和情感需求也成為了影響購(gòu)買決策的關(guān)鍵因素。因此，設(shè)計(jì)對(duì)于產(chǎn)品的成功至關(guān)重要。
隨著需求層次的提高，人們的選擇越來(lái)越多樣化和理性化。教育和收入水平的提高，使他們開(kāi)始思考超越功能的問(wèn)題。此外，用戶更加注重產(chǎn)品的美感和和諧性，因此美學(xué)在其選擇中扮演著越來(lái)越重要的角色。
馬斯洛金字塔，展示需求層次
美感在用戶體驗(yàn)設(shè)計(jì)中發(fā)揮以下作用：
創(chuàng)新農(nóng)業(yè)服務(wù)FarmSense的網(wǎng)站設(shè)計(jì)
美學(xué)是將設(shè)計(jì)的過(guò)去、現(xiàn)在和未來(lái)連接在一起的重要橋梁。當(dāng)今的布局和圖形基于世界文化數(shù)百年來(lái)積累的豐富遺產(chǎn)?，F(xiàn)代設(shè)計(jì)師和藝術(shù)家通過(guò)各種趨勢(shì)和創(chuàng)新對(duì)其進(jìn)行改造，創(chuàng)造出一個(gè)新的文化歷史圈子，展示了歷代最杰出藝術(shù)家的杰作。這正是藝術(shù)和審美在設(shè)計(jì)中所發(fā)揮的作用。我們不是要重新發(fā)明輪子，而是要讓它變得更現(xiàn)代化，以解決當(dāng)下的問(wèn)題。
美學(xué)可用性效應(yīng)是指用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實(shí)用。即使實(shí)際上這些產(chǎn)品并沒(méi)有更加有效或高效。這種現(xiàn)象被用戶體驗(yàn)設(shè)計(jì)大師 Nielsen Norman Group 視為一種重要原因，因?yàn)?strong>既有吸引力又實(shí)用的界面才能真正提供良好的用戶體驗(yàn)，而不僅僅是功能性 UI。
在1995年，日立設(shè)計(jì)中心進(jìn)行了一項(xiàng)研究，研究人員Masaaki Kurosu和Kaori Kashimura探究了人機(jī)交互實(shí)踐中的美學(xué)吸引力和易用性。該研究測(cè)試了252名研究參與者對(duì)26種ATM用戶界面的易用性和美學(xué)吸引力進(jìn)行評(píng)分。結(jié)果分析表明，審美情趣評(píng)級(jí)與感知易用性之間的相關(guān)性高于審美情趣評(píng)級(jí)與實(shí)際易用性之間的相關(guān)性。因此，該研究得出結(jié)論，無(wú)論用戶試圖評(píng)估系統(tǒng)的功能，任何界面的美感都會(huì)對(duì)用戶產(chǎn)生強(qiáng)烈的影響。
在 UX 設(shè)計(jì)中，美感是一個(gè)關(guān)鍵因素，它對(duì)用戶體驗(yàn)?zāi)繕?biāo)有著深遠(yuǎn)的影響。UX 設(shè)計(jì)通常包括四個(gè)核心方面：外觀吸引力和視覺(jué)和諧、可用性、可訪問(wèn)性和效用性。這些方面綜合起來(lái)，使得產(chǎn)品具有吸引人的外觀、易于操作、適用于不同能力和設(shè)備、能夠解決問(wèn)題以及讓用戶感到愉悅。
Flower Store 應(yīng)用程序指導(dǎo)用戶完成訂購(gòu)個(gè)性化花束的過(guò)程
然而，對(duì)于那些開(kāi)始推出新產(chǎn)品或改進(jìn)知名產(chǎn)品的公司來(lái)說(shuō)，他們也必須從不同的角度考慮。他們需要思考各種財(cái)務(wù)、轉(zhuǎn)換、銷售和所有其他業(yè)務(wù)運(yùn)營(yíng)方面的因素。
設(shè)計(jì)美學(xué)是否會(huì)對(duì)他們的商業(yè)目標(biāo)產(chǎn)生影響呢？當(dāng)然會(huì)。色彩理論和心理學(xué)、屏幕上的和諧、易讀的文本內(nèi)容以及吸引人的圖像不僅對(duì)于滿足用戶需求非常重要，而且對(duì)于銷售和讓企業(yè)獲得滿意度也至關(guān)重要。
不同的元素可以融入用戶界面并構(gòu)建其美感，其中包括：
這些要素一起形成了交互美學(xué)，對(duì)于積極的用戶體驗(yàn)有著直接的影響。另外，建議我們將過(guò)長(zhǎng)的句子分解為短句，以減少重復(fù)，并提供改進(jìn)建議。
加密博客設(shè)計(jì)使用有限的調(diào)色板使其看起來(lái)嚴(yán)肅但不沉悶，并呼應(yīng)大報(bào)的傳統(tǒng)布局以設(shè)置印刷媒體遷移到數(shù)字世界的強(qiáng)烈美感。
在 UX 和業(yè)務(wù)的交叉點(diǎn)上，一致性是實(shí)現(xiàn)美學(xué)和可用性效果的核心。Jacob Nielsen 曾指出：“一致性是最強(qiáng)大的可用性原則之一，因?yàn)楫?dāng)事物表現(xiàn)始終一致時(shí)，用戶不必?fù)?dān)心會(huì)發(fā)生什么。”因此，為了實(shí)現(xiàn)一致性，必須確保整個(gè)產(chǎn)品中的界面元素和交互方式始終保持一致，并遵循統(tǒng)一的設(shè)計(jì)準(zhǔn)則。
事實(shí)上，它比交互更進(jìn)一步。它還有助于建立強(qiáng)大的品牌。標(biāo)志和品牌項(xiàng)目、網(wǎng)站、應(yīng)用程序、電子郵件和社交網(wǎng)絡(luò)——產(chǎn)品與用戶的每一個(gè)接觸點(diǎn)都應(yīng)該遵循一個(gè)總體理念和一套價(jià)值觀，并以一致和完整的風(fēng)格包裝。
金融科技服務(wù) Crezco的身份設(shè)計(jì)采用一致的方法，使品牌能夠通過(guò)各種溝通渠道建立有吸引力、值得信賴和穩(wěn)固的形象。
在全球范圍內(nèi)，所有設(shè)計(jì)解決方案都需要回答一個(gè)關(guān)鍵問(wèn)題——為什么？Simon Sinek，一位領(lǐng)袖力專家曾說(shuō)過(guò)：“人們購(gòu)買的不是你做的事情，而是你為什么這樣做。”你所做的只是證明你的信念，這是產(chǎn)品和服務(wù)保持一致和鼓舞人心的原因。從“為什么”開(kāi)始做出的決策將決定如何與用戶交流，無(wú)論通信方式是什么。因此，您需要明確您所溝通的內(nèi)容，無(wú)論與品牌的聯(lián)系是什么。這樣可以建立信任，使品牌更加強(qiáng)大，這正是美學(xué)在用戶體驗(yàn)中發(fā)揮作用的地方。此外，您應(yīng)該簡(jiǎn)化長(zhǎng)句，減少重復(fù)，并提供改進(jìn)建議以提高文本的清晰度和簡(jiǎn)潔性。
設(shè)計(jì)不僅要解決功能問(wèn)題，還要考慮美感與情感需求。在數(shù)字產(chǎn)品市場(chǎng)競(jìng)爭(zhēng)激烈的今天，美感對(duì)于產(chǎn)品的成功非常重要。人們的需求也逐漸提高，開(kāi)始關(guān)注產(chǎn)品的美感和和諧性。美感在用戶體驗(yàn)設(shè)計(jì)中的作用包括：使設(shè)計(jì)情感化，保持?jǐn)?shù)字產(chǎn)品與現(xiàn)實(shí)世界的聯(lián)系，支持使用感官，滿足審美需求，以風(fēng)格將不同事物結(jié)合在一起，讓產(chǎn)品在競(jìng)爭(zhēng)中脫穎而出。用戶更傾向于認(rèn)為外觀吸引人的產(chǎn)品更加實(shí)用，這也是良好用戶體驗(yàn)的重要原因。
原作者：Marina Yalanska
本文由 @唐小白 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
按鈕是產(chǎn)品中十分常見(jiàn)的交互元素之一，好的按鈕設(shè)計(jì)可以很大程度地提升用戶體驗(yàn)。那么，怎么打造出符合用戶需求、深受用戶喜愛(ài)的優(yōu)秀按鈕？這篇文章里，作者對(duì)按鈕UX設(shè)計(jì)進(jìn)行了拆解分析，一起來(lái)看一下。
在數(shù)字產(chǎn)品中，按鈕是最常用的交互元素之一。一個(gè)好的按鈕設(shè)計(jì)可以提高用戶體驗(yàn)和產(chǎn)品的使用率。
本文將探討一些關(guān)于按鈕UX設(shè)計(jì)的方法，包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標(biāo)簽和描述、考慮交互方式、測(cè)試和優(yōu)化等。
通過(guò)綜合考慮這些因素，我們可以打造出符合用戶需求的優(yōu)秀按鈕，提升產(chǎn)品的用戶體驗(yàn)和競(jìng)爭(zhēng)力。
按鈕是一種用戶界面元素，用于觸發(fā)特定的操作或行為。
它可以是文本、圖像或交互式元素，通常位于頁(yè)面的底部或頂部，以便于用戶快速訪問(wèn)。
根據(jù)不同的用途和設(shè)計(jì)風(fēng)格，按鈕可以分為多種類型和分類，例如：
以上僅是一些常見(jiàn)的按鈕類型和分類，實(shí)際上還有很多其他的類型和分類。在設(shè)計(jì)按鈕時(shí)，需要根據(jù)具體的場(chǎng)景和目的選擇合適的類型和分類，并結(jié)合用戶體驗(yàn)和產(chǎn)品需求進(jìn)行優(yōu)化。
按鈕的位置和大小對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕應(yīng)該位于用戶視線的中心位置，以便于用戶快速訪問(wèn)。同時(shí)，按鈕的大小也應(yīng)該適中，不要過(guò)大或過(guò)小，以免影響用戶的操作。
在實(shí)際設(shè)計(jì)中，可以通過(guò)以下幾種方式來(lái)確定按鈕的位置和大小：
除了位置和大小之外，按鈕的布局方式和排版規(guī)則也非常重要。合理的布局方式和排版規(guī)則可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。以下是一些常見(jiàn)的按鈕布局方式和排版規(guī)則：
按鈕的顏色對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕的顏色應(yīng)該與產(chǎn)品的品牌色或主題色相匹配，以便于用戶識(shí)別和記憶。同時(shí)，按鈕的顏色也應(yīng)該具有明顯的對(duì)比度，以便于用戶在不同的背景下快速找到目標(biāo)按鈕。
以下是一些常見(jiàn)的按鈕顏色選擇原則：
除了顏色之外，按鈕的樣式設(shè)計(jì)也是非常重要的。合理的樣式設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕樣式設(shè)計(jì)要點(diǎn)：
按鈕文字的設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕文字應(yīng)該簡(jiǎn)潔明了、易于理解和記憶，同時(shí)要符合產(chǎn)品的品牌形象和主題風(fēng)格。
以下是一些常見(jiàn)的按鈕文字設(shè)計(jì)原則：
除了文字之外，按鈕標(biāo)簽也是非常重要的。合理的標(biāo)簽設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕標(biāo)簽設(shè)計(jì)要點(diǎn)：
按鈕的交互設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。合理的點(diǎn)擊效果和反饋機(jī)制可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕點(diǎn)擊效果和反饋機(jī)制：
除了點(diǎn)擊效果之外，按鈕的動(dòng)畫效果和過(guò)渡效果也可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕動(dòng)畫效果和過(guò)渡效果：
按鈕的測(cè)試和優(yōu)化對(duì)于提高產(chǎn)品的用戶體驗(yàn)和可用性非常重要。合理的測(cè)試和優(yōu)化策略可以發(fā)現(xiàn)并解決產(chǎn)品中存在的問(wèn)題，提高產(chǎn)品的品質(zhì)和用戶滿意度。
以下是一些常見(jiàn)的按鈕測(cè)試方法和流程：
除了測(cè)試之外，按鈕優(yōu)化也是提高產(chǎn)品用戶體驗(yàn)和可用性的重要手段。以下是一些常見(jiàn)的按鈕優(yōu)化策略和技巧：
按鈕UX設(shè)計(jì)對(duì)于提高產(chǎn)品的用戶體驗(yàn)和可用性非常重要。合理的按鈕設(shè)計(jì)可以增加用戶的參與度、趣味性和便利性，從而提高用戶對(duì)產(chǎn)品的滿意度和忠誠(chéng)度。
在進(jìn)行按鈕UX設(shè)計(jì)時(shí)，需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機(jī)制等多個(gè)方面，以確保產(chǎn)品能夠滿足用戶的需求和期望。同時(shí)，還需要進(jìn)行測(cè)試和優(yōu)化，發(fā)現(xiàn)并解決產(chǎn)品中存在的問(wèn)題，提高產(chǎn)品的品質(zhì)和用戶滿意度。因此，按鈕UX設(shè)計(jì)對(duì)于現(xiàn)代產(chǎn)品開(kāi)發(fā)和用戶體驗(yàn)設(shè)計(jì)都具有重要的意義和必要性。
本文由 @MO魚山寨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
將大東西進(jìn)行拆解為小的東西，逐步解決問(wèn)題，解決了小問(wèn)題，大問(wèn)題也解決了，在產(chǎn)品設(shè)計(jì)中也是一樣。在面臨圓角直角的選擇時(shí)，我們來(lái)看看作者如何做選擇
在當(dāng)今數(shù)字化時(shí)代，UI設(shè)計(jì)已成為創(chuàng)造引人入勝的用戶體驗(yàn)的關(guān)鍵要素。一個(gè)成功的UI設(shè)計(jì)不僅需要技術(shù)知識(shí)，還需要對(duì)細(xì)微之處的深刻理解。本文將探討兩種基礎(chǔ)但極為重要的圖形元素：圓角和直角。它們?nèi)绾斡绊懹脩舻母兄突?dòng)，如何在設(shè)計(jì)中恰到好處地應(yīng)用它們，以及它們?cè)趯?shí)際案例中的運(yùn)用。
在介紹“圓角與直角”前，先給大家分享一個(gè)心理效應(yīng)“bouba/kiki效應(yīng)。”
這個(gè)效應(yīng)最早由德國(guó)心理學(xué)家沃爾夫?qū)?middot;科勒在1929年提出。
最早在1929年沃爾夫?qū)?middot;科勒做了一個(gè)實(shí)驗(yàn)，該實(shí)驗(yàn)展示了兩種形式，并詢問(wèn)讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒(méi)有明確說(shuō)明，科勒暗示人們強(qiáng)烈傾向于將鋸齒狀形狀與“takete”配對(duì)，將圓形形狀與“maluma”配對(duì)。
在2001年的另一組實(shí)驗(yàn)中拉馬錢德蘭和 愛(ài)德華·哈伯德使用“kiki”和“bouba”這兩個(gè)詞重復(fù)了科勒的實(shí)驗(yàn)，詢問(wèn)美國(guó)大學(xué)本科生和印度講泰米爾語(yǔ)的人，“這些形狀中哪個(gè)是bouba，哪個(gè)是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。
這個(gè)效應(yīng)主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”
那么我們不妨擴(kuò)展一下，把這這種效應(yīng)延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽(tīng)名字“羊”和“狼”就可以潛意識(shí)的認(rèn)為“喜羊羊”就相當(dāng)于“bouba”、“灰太狼”相當(dāng)于“kiki”，“羊族”一聽(tīng)就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛(ài)愛(ài)的卡通人物”大部分就是以圓形為基礎(chǔ)“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級(jí)大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”。
如果聽(tīng)完這些你還是不懂，那么最簡(jiǎn)單的例子一個(gè)堪比吳彥祖的帥哥叫“文軒沒(méi)有大腦袋”，那當(dāng)你見(jiàn)到他時(shí)一定會(huì)去觀察這個(gè)人到底有沒(méi)有“大腦袋”
那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進(jìn)行UI思考，就可以大致了解“圓角與直角”大致的特性
1）定義
2）特性
1）定義
2）特性
那么回想一下“bouba/kiki效應(yīng)”，今后在設(shè)計(jì)中當(dāng)我們看到某個(gè)產(chǎn)品大量的使用“直角/圓角”我們就可以分辨這個(gè)產(chǎn)品的大致風(fēng)格，同樣字體搭配也是相似的效果，通過(guò)不同的banner可以大致看出運(yùn)營(yíng)活動(dòng)的大致目的。
在實(shí)際的使用場(chǎng)景中，我們就從最常見(jiàn)的“按鈕、卡片”兩個(gè)場(chǎng)景來(lái)舉例分析“圓角、直角”的作用。
我們首先具體聚焦在UI設(shè)計(jì)中對(duì)于“按鈕”這一元素的圓角和直角的使用：
1）圓角按鈕
2）直角按鈕
那么這里我們會(huì)有一個(gè)疑問(wèn)，那就是“移動(dòng)設(shè)備適應(yīng)性”，這里我們可能會(huì)想到“直角按鈕”的面積看起來(lái)要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？
我們從兩個(gè)方面來(lái)解答
1）觸控面積
2）視覺(jué)感知與觸控體驗(yàn)
通過(guò)這兩方面，我們是不是又能聯(lián)想到“bouba/kiki效應(yīng)”，介于“圓角本身的屬性”我們會(huì)更容易去點(diǎn)擊他。
對(duì)于卡片我們還是先對(duì)比，在進(jìn)行詳細(xì)的分析。
1）圓角卡片
2）直角卡片
這里更要值得注意的一點(diǎn)是視覺(jué)效果方面的“圓角對(duì)于用戶的視覺(jué)效果要強(qiáng)于直角”，巴羅神經(jīng)學(xué)研究所對(duì)角落進(jìn)行的科學(xué)研究發(fā)現(xiàn)，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產(chǎn)生更強(qiáng)的虛幻顯著性”，這里角越尖，看起來(lái)就越亮。角落越亮，就越難看。
通過(guò)上述對(duì)比我們可以得到一個(gè)結(jié)論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內(nèi)信息”這是因?yàn)閳A角向內(nèi)指向矩形的中心。這會(huì)將焦點(diǎn)放在矩形內(nèi)的內(nèi)容上。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，還可以輕松查看哪條邊屬于哪個(gè)矩形。尖角向外，從而減少對(duì)矩形內(nèi)部?jī)?nèi)容的關(guān)注。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，它們還使得很難判斷兩條邊屬于哪個(gè)矩形。這是因?yàn)槊總€(gè)矩形邊都是一條直線。圓角矩形的邊是獨(dú)特的，因?yàn)榫€條朝著它所屬的矩形彎曲。
那么對(duì)于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂(lè)”這兩個(gè)產(chǎn)品來(lái)分析看一下這兩個(gè)產(chǎn)品對(duì)于“直角、圓角”的應(yīng)用。
CONFIRMED（Adidas旗下網(wǎng)站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）
作為Adidas旗下產(chǎn)品發(fā)售平臺(tái)，CONFIRMED更多的是發(fā)售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個(gè)應(yīng)用程序旨在為Adidas的高需求和限量產(chǎn)品提供一個(gè)更加公平和直接的購(gòu)買渠道，通常涵蓋了品牌與設(shè)計(jì)師和藝術(shù)家的合作款，以及特別版的運(yùn)動(dòng)鞋。
那么我們從“產(chǎn)品定位、用戶群體、主要功能流程”來(lái)分析一下
1）產(chǎn)品定位
2）用戶群體
3）主要功能流程
這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過(guò)多講述App功能）
每款產(chǎn)品可以在一個(gè)直角卡片中展示，其中包括產(chǎn)品圖片、名稱和一些基本信息。這里在App的“首頁(yè)、發(fā)售信息、會(huì)員權(quán)益”這三個(gè)模塊最為突出，這種布局有助于用戶快速瀏覽和識(shí)別不同的產(chǎn)品
4）功能展示
這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發(fā)售的產(chǎn)品、已經(jīng)發(fā)售的產(chǎn)品、品牌故事等，幫助用戶快速定位他們感興趣的內(nèi)容。這里使用通過(guò)卡片元素的方式來(lái)詳細(xì)展示產(chǎn)品，會(huì)使整個(gè)產(chǎn)品的調(diào)性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗(yàn)會(huì)更直觀的感受產(chǎn)品（這里會(huì)發(fā)現(xiàn)一個(gè)很有趣的細(xì)節(jié)，貌似好的國(guó)外、跨境電商的App都會(huì)采用這些大的直角卡片）
接下來(lái)我們就講述關(guān)于“CONFIRMED”按鈕元素使用的分析：
5）突出的功能
直角按鈕通常用于突出最重要的操作，例如“購(gòu)買”、“注冊(cè)抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設(shè)計(jì)而容易被用戶注意到。
6）風(fēng)格統(tǒng)一
使用直角按鈕可以與應(yīng)用中其他直角設(shè)計(jì)元素（如卡片）保持視覺(jué)一致性，為用戶提供一致且簡(jiǎn)潔的視覺(jué)體驗(yàn)。
7）視覺(jué)引導(dǎo)
這些按鈕通常配有“CONFIRMED”的顏色（藍(lán)色），用于引導(dǎo)用戶的注意力，幫助他們快速識(shí)別應(yīng)用程序中的不同功能。
這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應(yīng)用中的應(yīng)用可能主要體現(xiàn)在其用戶界面的設(shè)計(jì)上，通過(guò)清晰、有序的布局和直觀的用戶交互，提升用戶的體驗(yàn)。
提到“汽水音樂(lè)”大家都不陌生，前段是時(shí)間各大“rapper、流行歌手”發(fā)歌都在汽水，這個(gè)App是可以和抖音聯(lián)動(dòng)的，所以播放音樂(lè)的模式?jīng)]有采用大家常見(jiàn)的“點(diǎn)歌、切歌”操作，而是換成隨機(jī)曲子和“抖音”向下滑動(dòng)切換一樣，這樣既新穎又能容易使用戶養(yǎng)成操作習(xí)慣，不至于一下子新的交互方式無(wú)法適應(yīng)。那么我們同樣從“產(chǎn)品定位、用戶群體、主要功能來(lái)分析”
1）產(chǎn)品定位
2）用戶群體
3）主要功能流程
那么我們從卡片開(kāi)始分析，卡片主要應(yīng)用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂(lè)盲盒”
那么他們起到的作用分別是
“圓角按鈕”對(duì)于“汽水音樂(lè)”的作用有：
其實(shí)通過(guò)對(duì)比，我們會(huì)發(fā)現(xiàn)“圓角”在社交、音樂(lè)等偏娛樂(lè)方向采用的更加多，因?yàn)檫@些產(chǎn)品屬性需要“產(chǎn)品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向?qū)I(yè)領(lǐng)域、正式的場(chǎng)合以及一些小眾的產(chǎn)品。
了解并應(yīng)用這些元素的特性，不僅能夠提升設(shè)計(jì)的美觀性，還能夠在更深層次上與用戶產(chǎn)生共鳴。作為UI設(shè)計(jì)師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達(dá)我們想要表達(dá)的信息，在了解簡(jiǎn)單的形狀如何影響感知后，我們就可以有目的地進(jìn)行設(shè)計(jì)，將每一個(gè)微小的視覺(jué)元素加在一起，形成用戶潛意識(shí)中感知的一致、獨(dú)特的品牌個(gè)性。
本文由 @文軒沒(méi)有大腦袋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)授權(quán)，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com