如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論
<button id="ssuss"></button> 
卡片式設(shè)計(jì)是產(chǎn)品常用的頁面設(shè)計(jì)手段之一，它自帶的分割屬性讓頁面布局更加清晰，也是頁面布局的利器。但是，分割也可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)等問題。如何用好卡片式設(shè)計(jì)？本文作者對(duì)此進(jìn)行了分析，與你分享。
近幾年，卡片式設(shè)計(jì)可以說是移動(dòng)端產(chǎn)品中極為常見的設(shè)計(jì)形式了，甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計(jì)納入設(shè)計(jì)語言，在各大APP中得到廣泛運(yùn)用。
卡片式設(shè)計(jì)自帶分割屬性、讓界面更有層次感，能給人一種視覺上的享受，也因此讓其成為了頁面布局的利器，但它并非萬能，因分割的原因可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)、造成橫向/縱向空間浪費(fèi)等問題，需要根據(jù)實(shí)際場(chǎng)景和內(nèi)容形式來確定，不要專門為了“卡片式”而設(shè)計(jì)。
很多設(shè)計(jì)師對(duì)卡片設(shè)計(jì)習(xí)以為常，但對(duì)于使用卡片的原因、視覺表現(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)樗茏尳缑嫘畔⒏袑哟胃校瑥脑O(shè)計(jì)、交互、視覺以及用戶體驗(yàn)等各方面來看，都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對(duì)來說，學(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í)或感覺內(nèi)容超長(zhǎng)的恐懼感，還能節(jié)省更多的時(shí)間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。
卡片式設(shè)計(jì)有利于場(chǎng)景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個(gè)連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。
卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動(dòng)端設(shè)備中，還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。
卡片式設(shè)計(jì)能很好的通過邊界襯托出內(nèi)容的整體性，特別是在電商類產(chǎn)品中的首頁頭部、瓷片區(qū)、營(yíng)銷引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。
卡片作為一個(gè)容器，它可以自由無限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗(yàn)。
卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒，節(jié)省了一定的頁面空間，還有著更大的操作熱區(qū)，無需做到精準(zhǔn)點(diǎn)擊。卡片式設(shè)計(jì)很容易融入各種交出手勢(shì)，如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等，為用戶提供更多便捷的操作。
卡片可通過縮放的形式充分利用動(dòng)畫進(jìn)行頁面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶一種還停留在當(dāng)前頁面的錯(cuò)覺，避免了傳統(tǒng)的跳轉(zhuǎn)頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗(yàn)。
這種類型的卡片在UI設(shè)計(jì)中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個(gè)頁面信息的層級(jí)也更加清晰。
懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動(dòng)操作觸發(fā)，可作為臨時(shí)控件或長(zhǎng)期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過伸縮來定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁面中非常靈活。
例如高德地圖首頁，搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上，而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。
通欄類型的卡片具有更強(qiáng)的視覺阻斷，對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會(huì)過多，不然頁面會(huì)顯得零散、雜亂。
瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無需過于在意圖片的高度，最大限度的還原原始圖片效果。
卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時(shí)又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立，如花瓣、Pinterest就是最好的例子。
信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長(zhǎng)內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來篩查對(duì)自己有用的信息。
卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過阻隔的方式快速告知用戶每個(gè)卡片的核心內(nèi)容，便于用戶在長(zhǎng)時(shí)間的滑動(dòng)過程中也能快速識(shí)別重要信息。
卡片式左右滑動(dòng)組合在音樂、視頻類產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對(duì)用戶的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺，用戶會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。
卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶的理解成本，并對(duì)其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。
對(duì)于用戶主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性內(nèi)容，利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現(xiàn)在任何位置。
卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁、會(huì)員等頁面中的關(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ī)范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設(shè)計(jì)。
那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據(jù)頁面內(nèi)容屬性及目標(biāo)定位來決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來區(qū)分信息組顯然更合適；但對(duì)于電商類型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會(huì)更容易識(shí)別，信息的可讀性也會(huì)更強(qiáng)。
卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn)，為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級(jí)雜/亂而增加用戶的視覺負(fù)擔(dān)。
如果再同一卡片中需要再次區(qū)分多個(gè)信息組，可利用間距留白、分割線或淺色背景等元素屬性來區(qū)分，依然能達(dá)到想要的效果。
因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動(dòng)端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動(dòng)來擴(kuò)充橫向隱性空間。
例如淘票票首頁，在1.5屏的范圍內(nèi)，幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容，從用戶體驗(yàn)角度出發(fā)，這是縱向空間無法比擬的。
卡片式設(shè)計(jì)不是目的，其主要是用來更好的區(qū)分信息層級(jí)、提升用戶瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會(huì)增加上下間距而導(dǎo)致頁面拉長(zhǎng)，因此，如無必要，不必盲目采用卡片式設(shè)計(jì)。
例如美團(tuán)APP的「首頁、電商、購(gòu)物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。
這點(diǎn)不用多說，新聞資訊類產(chǎn)品的內(nèi)容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會(huì)跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無關(guān)元素對(duì)用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。
很多時(shí)候，我們總會(huì)聽到PM說這個(gè)很重要、那個(gè)也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說明什么都沒有突出。在單個(gè)卡片中，組始終牢記這個(gè)準(zhǔn)則：一次只突出一個(gè)核心信息，以便于用戶快速、精準(zhǔn)捕捉，切記不可貪多。
卡片式設(shè)計(jì)之所有能快速流行起來且經(jīng)久不衰， 其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì)，能忽略設(shè)備的差異給用戶提供更好的服務(wù)。卡片并不是簡(jiǎn)單的樣式設(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語言，通過多種方式的信息組合、結(jié)合豐富的交互操作，給用戶創(chuàng)造出極致的使用體驗(yàn)。
信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過程中，我們需要根據(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ì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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
底部標(biāo)簽欄的圖標(biāo)風(fēng)格在一定程度上決定了界面的風(fēng)格?？雌饋硐鄬?duì)簡(jiǎn)單，但仍然有很多問題值得注意。作者通過標(biāo)簽欄樣式分析、6個(gè)導(dǎo)航欄注意事項(xiàng)來總結(jié)底部標(biāo)簽欄的設(shè)計(jì)，希望通過這些內(nèi)容能幫助你對(duì)底部標(biāo)簽欄有進(jìn)一步的理解。
底部標(biāo)簽欄（也稱導(dǎo)航欄）是移動(dòng)端設(shè)計(jì)中必備的導(dǎo)航類型之一。底部標(biāo)簽欄上通常會(huì)安排最重要且頻繁操作的功能，方便用戶隨時(shí)都能快速訪問。
雖然底部導(dǎo)航欄看起來相對(duì)簡(jiǎn)單，但要做到精準(zhǔn)設(shè)計(jì)，仍然有很多問題值得注意。
本次通過標(biāo)簽欄樣式分析、六個(gè)導(dǎo)航欄注意事項(xiàng)來總結(jié)底部標(biāo)簽欄的設(shè)計(jì)～
底部標(biāo)簽欄可以是純圖標(biāo)樣式，或者圖標(biāo)與文本標(biāo)簽搭配的樣式。
選中的標(biāo)簽需要有不同的視覺風(fēng)格，可以使用按鈕、文字、圓點(diǎn)等樣式來表示選中效果，幫助用戶一目了然地定位當(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ì)樣式，將分段控件放在頁面上方作為導(dǎo)航。
② 如果選項(xiàng)很多，超過五個(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í)候，覺得某個(gè)圖標(biāo)的含義或者樣式對(duì)用戶來說不是特別明確，那么就需要將圖標(biāo)與文字標(biāo)簽一起使用，方便用戶快速準(zhǔn)確地理解。
圖標(biāo)的顏色對(duì)比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計(jì)中兩個(gè)最常見問題。
在底部欄設(shè)計(jì)過程中，我們不僅要區(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)航可見性產(chǎn)生影響，由于并非所有的導(dǎo)航選項(xiàng)都是一次可見，用戶可能很容易錯(cuò)過后面的選項(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)練的文字來清楚地傳達(dá)選項(xiàng)含義。
花哨復(fù)雜的切換動(dòng)畫對(duì)于初次使用的用戶來說可能看起來很酷，但是一旦用戶熟悉了產(chǎn)品并頻繁使用導(dǎo)航時(shí)，這些復(fù)雜的切換動(dòng)畫就會(huì)變得很煩人。
這些切換動(dòng)畫雖然看起來很復(fù)雜，但卻沒有為產(chǎn)品或用戶帶來任何有用的價(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)，希望通過這些內(nèi)容能幫助你對(duì)Bottom Tab Bar有進(jìn)一步的理解。
慢慢來比較快，希望對(duì)你有幫助！
參考：babch.biz/bottom-tab-bar-design
專欄作家
作者：Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章，專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自 Pixabay，基于CC0協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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ǎo)語：設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。本文詳細(xì)地給大家整理了UI設(shè)計(jì)的四大原則。一起來看看吧。
是什么讓一個(gè)好的 UI 設(shè)計(jì)易于閱讀？是什么讓用戶輕松瀏覽？設(shè)計(jì)師如何創(chuàng)建一個(gè)大放異彩的UI？用戶界面是任何軟件產(chǎn)品的關(guān)鍵部分。
好的UI設(shè)計(jì)，用戶甚至?xí)雎运?/p>
如果做得不好，會(huì)成為用戶使用產(chǎn)品路上的絆腳石。
為了更高效地設(shè)計(jì)能滿足用戶使用的UI，大多數(shù)設(shè)計(jì)師都遵循界面設(shè)計(jì)原則。
本期我們就帶你了解UI設(shè)計(jì)四大原則！
為了創(chuàng)建視覺美學(xué)UI通常有以下這些小規(guī)則：
陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。
當(dāng)光從天而降時(shí)，它照亮事物的頂部并在其下方投下陰影。
事物的頂部較輕，底部較暗。UI 也是如此。
就像我們所有面部特征的所有底面都有小陰影一樣，幾乎每個(gè) UI 元素的底面都有陰影。
我們的屏幕是平面的，但細(xì)節(jié)設(shè)計(jì)會(huì)讓屏幕上幾乎所有東西看起來都是立體的。
在添加顏色之前進(jìn)行灰度設(shè)計(jì)可以簡(jiǎn)化視覺設(shè)計(jì)中最復(fù)雜的元素，這樣設(shè)計(jì)師可以專注于間距和布局元素。
首先設(shè)計(jì)黑白。從更難的問題開始，讓應(yīng)用程序在各個(gè)方面都美觀且可用，但不需要顏色的幫助，最后再添加顏色。
這是讓應(yīng)用程序看起來“干凈”和“簡(jiǎn)單”的可靠的簡(jiǎn)單方法。在太多地方有太多顏色是往往容易搞砸設(shè)計(jì)。
而在此之后，向灰度站點(diǎn)添加一種顏色可以簡(jiǎn)單有效地吸引眼球。
通過修改單一色調(diào)的飽和度和亮度，可以生成多種顏色——深色、淺色、背景、強(qiáng)調(diào)色、引人注目的顏色，但這樣不會(huì)讓人眼花繚亂。
使用一種或兩種基本色調(diào)中的多種顏色是突出或中和元素且不會(huì)使設(shè)計(jì)混亂的可靠方法。
為了使 UI 看起來很有設(shè)計(jì)感，需要增加很多喘息的空間。
空白是構(gòu)成出色視覺布局的最容易被忽視和未充分利用的元素之一。
很多時(shí)候，空白被視為空白空間，因此浪費(fèi)了屏幕空間。
空格對(duì)于制作更好和簡(jiǎn)化的布局是必要的，因?yàn)樗罱K使用戶專注于本來打算看到的內(nèi)容。大量的空白可以使一些雜亂的界面看起來簡(jiǎn)單又容易吸引人。
強(qiáng)調(diào)是一種策略，是想要將觀眾的注意力吸引到特定的設(shè)計(jì)元素上。這可能是內(nèi)容區(qū)域、圖像、鏈接或按鈕等。
我們看到大多數(shù)設(shè)計(jì)領(lǐng)域都會(huì)注重焦點(diǎn)的創(chuàng)建，包括建筑、景觀設(shè)計(jì)和時(shí)裝設(shè)計(jì)。
為了通過視覺元素傳遞給用戶信息并導(dǎo)航準(zhǔn)確，不讓用戶迷失方向，通常有以下幾點(diǎn)規(guī)則：
始終以盡可能少的步驟和屏幕為目標(biāo)。
使用諸如底部工作表和模式窗口之類的覆蓋來壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時(shí)，確保自主和獨(dú)立的方式組織信息。可以將將任務(wù)和子任務(wù)組合在一起。
重要的是，不要將子任務(wù)隱藏在用戶想不到的頁面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內(nèi)容。
同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。
當(dāng)只需要一兩個(gè)操作時(shí)，不要讓用戶經(jīng)歷繁瑣的點(diǎn)擊障礙。三擊規(guī)則是最實(shí)用的 UI 設(shè)計(jì)原則之一，它指出用戶應(yīng)該能夠通過在應(yīng)用程序內(nèi)的任何位置單擊不超過 3 次來實(shí)現(xiàn)任何操作或訪問他們需要的任何信息。
最重要的是，永遠(yuǎn)不要要求用戶重新輸入他們已經(jīng)提供的信息。這可能讓用戶扔掉他們的設(shè)備，直接放棄使用。
這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶也是如此。
相反，對(duì)界面的探索應(yīng)該是有趣的，并在不知不覺中舒適地學(xué)會(huì)。
確保頁面架構(gòu)簡(jiǎn)單、合乎邏輯且有清晰的標(biāo)示。
用戶永遠(yuǎn)不應(yīng)該懷疑他們?cè)谲浖械奈恢茫膊粦?yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。
良好的視覺組織提高了可用性和易讀性，使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。
設(shè)計(jì)布局時(shí)，避免一次在屏幕上顯示太多信息。構(gòu)建網(wǎng)格系統(tǒng)設(shè)計(jì)以避免視覺混亂。
應(yīng)用內(nèi)容組織的一般原則，例如將相似的項(xiàng)目組合在一起、對(duì)項(xiàng)目進(jìn)行編號(hào)以及使用標(biāo)題和提示文本。
簡(jiǎn)化視覺認(rèn)知，讓用戶能盡快“認(rèn)識(shí)”界面，圖形元素符合用戶對(duì)真實(shí)世界的聯(lián)想，更符合用戶對(duì)于界面的慣性認(rèn)知。
在 UI 設(shè)計(jì)中使用隱喻可以讓用戶在現(xiàn)實(shí)世界和數(shù)字體驗(yàn)之間建立聯(lián)系。
好的隱喻會(huì)與用戶腦海中真實(shí)世界的過去體驗(yàn)產(chǎn)生強(qiáng)烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。
以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾箱，它以一種可以幫助用戶更輕松地理解概念的方式進(jìn)行可視化表示。
在為 UI 選擇隱喻時(shí)，選擇能夠讓用戶掌握概念模型最精細(xì)細(xì)節(jié)的隱喻。
例如，在詢問用于支付處理的信用卡詳細(xì)信息時(shí)，可以參考現(xiàn)實(shí)世界的實(shí)體卡作為示例。
視覺設(shè)計(jì)要讓用戶感受到是用戶在控制界面，而不是被界面所控制。
用戶應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產(chǎn)品而不必?fù)?dān)心失敗，當(dāng)用戶知道錯(cuò)誤可以很容易地撤消時(shí)，這鼓勵(lì)了對(duì)不熟悉的選項(xiàng)的探索。
相反，如果用戶必須對(duì)他們采取的每一個(gè)動(dòng)作都非常小心，這會(huì)導(dǎo)致探索速度變慢且令人不安。
當(dāng)用戶錯(cuò)誤地選擇系統(tǒng)功能時(shí)，“撤消”會(huì)非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶離開不需要的狀態(tài)。
例如，當(dāng)用戶意外刪除電子郵件時(shí)，Gmail 的通知消息帶有撤消選項(xiàng)。
不同技能水平的用戶應(yīng)該能夠與不同水平的產(chǎn)品進(jìn)行交互。不要為了新手或臨時(shí)用戶的易于使用的界面而犧牲專家用戶。
相反，要嘗試針對(duì)不同用戶的需求進(jìn)行設(shè)計(jì)，因此，用戶是專家還是新手并不重要。
添加教程和解釋等功能對(duì)新手用戶非常有幫助。
一旦用戶熟悉了產(chǎn)品，用戶就會(huì)尋找快捷方式來加快常用操作的速度。
設(shè)計(jì)師應(yīng)該讓有經(jīng)驗(yàn)的用戶使用快捷方式，從而為他們提供快速路徑。
作者：格格學(xué)姐
本文由 @空兩格 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Pexels，基于CC0協(xié)議。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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ǎo)語：我們平常會(huì)使用很多APP，久而久之我們會(huì)發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似；一個(gè)有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對(duì)產(chǎn)品的形象也有一定的幫助；本文作者分享了關(guān)于如何提升UI設(shè)計(jì)的高級(jí)感的方法，我們一起來看一下。
在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會(huì)發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計(jì)出來的產(chǎn)品；而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，使得設(shè)計(jì)不精致，產(chǎn)品沒有氣質(zhì)和品牌感。
一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。
本文總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。
在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營(yíng)造對(duì)比；單純使用字體大小對(duì)比，所營(yíng)造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來營(yíng)造更好的對(duì)比效果。
每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過使用顏色的深淺，為元素賦予不同的重要性。
如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感：
▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400
應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。
如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。
灰色文字在無彩/彩色背景下要分開處理：
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識(shí)別。
選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡；設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。
陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。
相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營(yíng)造的陰影效果。
這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。
陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。
在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。
合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。
我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。
標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。
通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢(shì)，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見。
Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。
在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡(jiǎn)單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長(zhǎng)條來區(qū)分兩者的狀態(tài)；因?yàn)樗?jiǎn)單，卻越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。
例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來源。
從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長(zhǎng)條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。
在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。
我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
1）使用陰影
陰影同樣可以營(yíng)造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。
2）使用不同的背景色來區(qū)分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>
3）增加額外的留白
創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了，通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。
在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。
通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。
如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。
選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。
雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問題就是——系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢(shì)上就變?nèi)趿撕芏唷?/p>
大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。
通常是在注冊(cè)登陸頁的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。
App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)?？吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式；為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。
我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。
圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。
在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會(huì)變得美觀、整潔。
現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì)，也是提升設(shè)計(jì)品質(zhì)感的良方。
作者：Fyin印跡；公眾號(hào)：印跡拾光
本文由 @Fyin印跡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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
互聯(lián)網(wǎng)時(shí)代，我們所看到的屏幕有許多的尺寸，如果設(shè)計(jì)師為每個(gè)尺寸都單獨(dú)進(jìn)行設(shè)計(jì)，那將是一個(gè)大工程。那如果減少設(shè)計(jì)的工作量呢？讓我們來跟著作者學(xué)習(xí)一下移動(dòng)端UI設(shè)計(jì)的適配吧~
在互聯(lián)網(wǎng)時(shí)代，產(chǎn)品形態(tài)是多種多樣的，就手機(jī)行業(yè)而言，設(shè)計(jì)師需要面對(duì)的屏幕尺寸至少也有一兩百種，我們不可能為每一種屏幕尺寸單獨(dú)進(jìn)行，巨大的工作量是我們無法承受的。
需要一些方法或者說是手段，幫助我們縮減巨大的工作量，這些方法手段的集合就是——UI設(shè)計(jì)適配。UI設(shè)計(jì)適配幫助設(shè)計(jì)師只需要維護(hù)幾種尺寸的設(shè)計(jì)稿，就可以兼容市面上絕大多數(shù)的屏幕尺寸，達(dá)到不同屏幕尺寸下，視覺效果接近一致的目的。
本篇文章我們主要關(guān)注移動(dòng)端應(yīng)用的UI設(shè)計(jì)適配，將從以下幾點(diǎn)來介紹：
那么下面，我們進(jìn)入正式內(nèi)容。
UI設(shè)計(jì)適配是指將同一款應(yīng)用或網(wǎng)頁的用戶界面針對(duì)不同的設(shè)備、分辨率、屏幕尺寸、操作系統(tǒng)等因素進(jìn)行調(diào)整，以確保用戶界面的一致性和可用性。
這段定義包含了一些專業(yè)名詞，還是讓人有點(diǎn)難理解，如果我們隱藏那些專業(yè)名詞，用圖形化的方式去解釋這個(gè)定義，如圖1.1，左邊是一個(gè)16:9屏幕尺寸的設(shè)計(jì)稿，我們需要將它轉(zhuǎn)變?yōu)橐粋€(gè)1:1屏幕尺寸的設(shè)計(jì)稿。你要如何處理？
在開始設(shè)計(jì)前，就需要考慮可能存在屏幕尺寸和比例差異較大情況，就如同圖1.1，應(yīng)當(dāng)如何適配；設(shè)計(jì)中，就會(huì)考慮得更細(xì)致，頂部輪播Banner是固定的寬度，還是根據(jù)不同的屏幕尺寸寬度自適應(yīng)寬度，圖1.1是選擇了固定寬度；而在設(shè)計(jì)之后，有可能開發(fā)時(shí)會(huì)發(fā)現(xiàn)，如果只有兩個(gè)Banner圖，沒法像設(shè)計(jì)稿中展示3個(gè)Banner圖，這時(shí)又需要你思考要如何處理。
以上，我們談到這三個(gè)場(chǎng)景中你思考和處理問題的過程，就是在進(jìn)行UI設(shè)計(jì)適配。
由此看出，適配是UI設(shè)計(jì)中的過程，卻不是一個(gè)具體的環(huán)節(jié)，不像是標(biāo)注切圖是固定的流程。它融入在整個(gè)UI設(shè)計(jì)的過程中。在設(shè)計(jì)前，設(shè)計(jì)中，設(shè)計(jì)后都可能會(huì)考慮UI設(shè)計(jì)適配問題。
為了用戶體驗(yàn)的一致性。
這里的「一致性」主要關(guān)注的是視覺表現(xiàn)層是否一致。如圖1.2，是「vivo瀏覽器」在「vivoX Fold 2」機(jī)型上，內(nèi)屏與外屏的首頁截圖。整個(gè)頁面在布局結(jié)構(gòu)，控件類型和元素尺寸以及間距都是基本一致的。
用戶體驗(yàn)中，視覺表現(xiàn)層的一致性是基礎(chǔ)中的基礎(chǔ)。保證了「一致性」，就會(huì)有效地降低用戶的使用成本，即使用戶更換了不同的設(shè)備，也不會(huì)有使用的困難。UI設(shè)計(jì)適配則是達(dá)成這一目標(biāo)的重要方法之一。
不過，也請(qǐng)大家注意，這里說的「有幾乎相同的用戶體驗(yàn)」是限定在屏幕尺寸接近的電子設(shè)備上。比如說，我們不能要求一個(gè)屏幕尺寸7英寸的手機(jī)應(yīng)用和一臺(tái)27英寸的PC電腦客戶端，視覺表現(xiàn)層基本一致，即便他們的是同一個(gè)應(yīng)用，也會(huì)因?yàn)榻换シ绞胶筒僮飨到y(tǒng)的不同而天差地別。
用戶界面不是物理實(shí)體，需要一些物理實(shí)體去承載它。
本小節(jié)我們將重點(diǎn)解釋一些你需要知道與適配息息相關(guān)的概念?？偟膩碚f，對(duì)于適配我們需要著重理解三個(gè)參數(shù)——邏輯（像素）分辨率，物理（像素）分辨率和倍率，以及他們之間的相互關(guān)系。
了解這些概念，是為了幫助我們面對(duì)一些適配問題時(shí)，能明白為什么會(huì)產(chǎn)生這樣的問題，針對(duì)問題尋找合適的解決方案就會(huì)更加從容
舉一個(gè)簡(jiǎn)單的例子，如圖2.1，左右兩個(gè)尺寸不同屏幕，都有著完全一致的元素。要達(dá)到這樣的效果，「邏輯分辨率」，「物理分辨率」和「倍率」 發(fā)揮了關(guān)鍵作用。
屏幕比例很好理解，既設(shè)備屏幕尺寸的寬高比值。在2016年之前，業(yè)內(nèi)主流的手機(jī)屏幕比例都是16:9；但在這一年命運(yùn)的齒輪開始轉(zhuǎn)動(dòng)，小米公司的發(fā)布了，對(duì)手機(jī)行業(yè)影響深遠(yuǎn)的機(jī)型——小米MIX一代，屏幕比例是17:9，由此手機(jī)屏幕開啟了全面屏設(shè)計(jì)時(shí)代。時(shí)至今日，手機(jī)屏幕比例已經(jīng)完全轉(zhuǎn)向了18:9，19:9，20:9等等，手機(jī)的屏幕高度在不斷地增加。
那么這個(gè)比例的變化，是否對(duì)我們適配內(nèi)容有影響呢？
影響是存在的，只是影響并不大，而且僅在一些特定場(chǎng)景下有影響。
我們以「vivo i視頻」影視頁面為例（圖2.2），高度的變化帶來了縱向空間的延展，需要展示更多的內(nèi)容，對(duì)設(shè)計(jì)適配的影響是比較小的。受影響的一些特定場(chǎng)景，我們將會(huì)在之后「適配的手段」小節(jié)中詳細(xì)說明。
分辨率一詞，人們?cè)谌粘Ｉ钪惺且粋€(gè)比較常見的概念。比較常說的——720p，1080p，2k，4k等等，都是在說分辨率。
這些參數(shù)對(duì)應(yīng)在UI設(shè)計(jì)中，指的是物理分辨率。物理分辨率是用來衡量屏幕中的像素?cái)?shù)量，相同的屏幕尺寸和一定的觀看距離下，分辨率越高，畫面越清晰，反之則是會(huì)模糊。
物理分辨率是一個(gè)物理世界存在的具象概念，而邏輯分辨率則是一個(gè)抽象概念，對(duì)應(yīng)存在于軟件的代碼層面?？梢岳斫鉃榇a層面有一塊虛擬的屏幕，邏輯分辨率就是衡量這塊虛擬屏幕的像素?cái)?shù)量，同樣這里的「像素」也是不存在的抽象概念。
邏輯分辨率也是由一組參數(shù)表達(dá)的，并且我們是可以知道這個(gè)值是多少的，如圖2.3，節(jié)選自蘋果的《人機(jī)交互指南》，其中詳細(xì)地列舉了iPhone，iPad和iPod的邏輯分辨率和物理分辨率。
我們選擇其中一條來解釋邏輯分辨率，物理分辨率和倍率之間的關(guān)系。如圖2.3，簡(jiǎn)單說來就是——邏輯分辨率乘以倍率就是物理分辨率。
在這個(gè)公式中多了兩個(gè)單位——“pt”和“px”，px很好理解就是我們?cè)O(shè)計(jì)中所用的像素單位，而pt則是開發(fā)代碼中尺寸單位，“pt”來源于印刷行業(yè)的術(shù)語，翻譯過來是“點(diǎn)”。圖2.3中的“@2x”和“@3x”就是系統(tǒng)默認(rèn)倍率，我們會(huì)常常稱之為一倍圖，二倍圖，三倍圖以此類推。
“@1x”是比較久遠(yuǎn)的手機(jī)設(shè)備，目前已經(jīng)基本不在設(shè)計(jì)的考慮范疇了。在一倍圖的情況下，此時(shí)的1pt剛好等于1px，這樣就可以減少開發(fā)工程師和設(shè)計(jì)師之間溝通成本。因?yàn)榧僭O(shè)你的設(shè)計(jì)稿是使用的三倍圖，那么換算的公式則是1pt=3px，如果和開發(fā)溝通時(shí)不說明具體的單位，你說12，開發(fā)工程師可能就會(huì)理解成12pt，但是實(shí)際想表達(dá)的是12px，這樣最后的效果就會(huì)是有較大的誤差。所以在很多設(shè)計(jì)團(tuán)隊(duì)，針對(duì)iOS設(shè)備設(shè)計(jì)時(shí)，仍然使用一倍圖作為設(shè)計(jì)稿尺寸，從而打通了開發(fā)工程師與設(shè)計(jì)師之間的溝通壁壘。不會(huì)因?yàn)閱挝徊唤y(tǒng)一，造成結(jié)果的誤差。
那么來到Android這邊，道理是一樣的，只是在參數(shù)和概念名詞會(huì)有些不同。如圖2.5，標(biāo)黃色的部分是我們目前使用的較多的屏幕尺寸（可能高度數(shù)值略有不同）。
首先，Android的倍率是用英文命名的，如mdpi等，但是習(xí)慣上我們還是稱之為一倍圖等；其次，“dp”是Android系統(tǒng)中邏輯像素的單位，等同于iOS中的“pt”。
Android系統(tǒng)和iOS系統(tǒng)的邏輯分辨率的參數(shù)值是相近的，這也是很多設(shè)計(jì)團(tuán)隊(duì)只會(huì)基于iOS進(jìn)行設(shè)計(jì)，Android開發(fā)工程師直接使用基于iOS的設(shè)計(jì)稿進(jìn)行開發(fā)。因?yàn)椴顒e不大，只要在適配時(shí)候使用相同邏輯，就可以少設(shè)計(jì)一次相同頁面，也是為了降低設(shè)計(jì)成本。
以上內(nèi)容也就說明，我們?cè)诒竟?jié)開頭的例子（圖2.1），為什么不同的尺寸的屏幕，為什么能保持相同的元素布局，因?yàn)閮蓚€(gè)物理分辨率不同的屏幕都是，基于一個(gè)相同邏輯分辨率，等比放大得到的（圖2.6）。
這一小節(jié)，我們將介紹適配不同的尺寸屏幕的具體手段——固定尺寸與自適應(yīng)尺寸。
先說簡(jiǎn)單的，固定尺寸。固定代表著是一個(gè)絕對(duì)值，固定不變的。
固定尺寸主要是分為兩個(gè)場(chǎng)景，一是元素的固定尺寸，這個(gè)元素主要是指圖標(biāo)，按鈕，部分的卡片容器（如Banner）和一些系統(tǒng)控件（如布爾開關(guān)，單選多選等）。如圖3.1，vivo賬號(hào)的登錄頁面中的登錄按鈕，在折疊屏內(nèi)屏與外屏不同屏幕尺寸下，按鈕的尺寸依然是相同的
二是元素間的固定間距，主要是指元素與元素間的間距固定和元素與屏幕邊緣的邊距固定。固定的間距有助于相似元素成為一組，符合格式塔原理。比如圖標(biāo)與文字，卡片列表等。
在手機(jī)系統(tǒng)中的設(shè)置頁面，如圖3.2，將有關(guān)聯(lián)性類目使用較小的固定間距排列，不同類別的則是使用分割線和更大的固定間距排列，這些固定間距不會(huì)因?yàn)闄C(jī)型，屏幕尺寸的不同而發(fā)生改變。
自適應(yīng)尺寸也細(xì)分為三個(gè)場(chǎng)景：元素等比適應(yīng)，元素間間距自適應(yīng)和元素彈性自適應(yīng)。元素等比適應(yīng)
以寬高的某一邊適配屏幕的寬高，剩余的一邊跟隨比例等比適配。這里主要指圖片，視頻的適配為主。因?yàn)檫@些元素的比例必須是固定的，所以我們只能去等比縮放（如圖3.2）。
通常來說我們都是以寬度去適配，但是這些年短視頻App的火熱，需要為用戶營(yíng)造沉浸式的觀看體驗(yàn)。豎版的視頻往往是以高度適配，那么會(huì)帶來一個(gè)問題，寬度有可能會(huì)超出屏幕寬度，超出的部分就會(huì)被裁切，但是為了給用戶更好的沉浸式觀看體驗(yàn)，會(huì)選擇裁切視頻。
當(dāng)然你可能會(huì)有疑惑，那如果用戶上傳了一個(gè)橫版比例的視頻或圖片，如果按照寬度適配，裁切的內(nèi)容是不是太多了，而且畫面的清晰度也會(huì)降低很多？
沒錯(cuò)，這里我們就需要在不同的場(chǎng)景下，使用不同的適配策略。所以就會(huì)針對(duì)橫版內(nèi)容，就是以寬度適配，豎版以高度適配。
元素間間距自適應(yīng)
間距自適應(yīng)的適配手段，是以百分比數(shù)值計(jì)算適應(yīng)元素與元素之間的間距，元素與屏幕邊緣的間距。以百分比計(jì)算間距，那么就需要一個(gè)基數(shù)，這個(gè)基數(shù)往往是以屏幕分辨率的寬度和高度為基數(shù)。
這個(gè)方法主要是針對(duì)元素較少的頁面，也就是我們?cè)凇富靖拍睢剐」?jié)中說到的不同的屏幕高度變化帶來的影響。最典型的是手機(jī)的鎖屏場(chǎng)景，還有狀態(tài)結(jié)果頁面的展示（圖3.7）。
如圖3.8，還是vivo賬號(hào)的登錄頁，在折疊屏內(nèi)屏與外屏，可以很明顯看到按鈕距離底部的間距是不同的，這里就是用百分比的間距。
元素彈性自適應(yīng)
彈性自適應(yīng)，是指控制元素的外邊距與內(nèi)間距，同向尺寸彈性自適應(yīng)。彈性的意思是有多少的空白區(qū)域就填充滿。如圖3.9，當(dāng)右側(cè)多一個(gè)按鈕時(shí)，就需要左側(cè)元素彈性的適應(yīng)填充剩余的空白區(qū)域。
同時(shí)我們會(huì)有一個(gè)衍生的適配手段——矩形等分適配，是指將屏幕（或區(qū)域）進(jìn)行平均分割成相同寬度（或高度）的矩形（分割的矩形之間可以有固定間距，固定間距可為0px），而不同的元素在矩形中居中放置。
矩形等分主要會(huì)是標(biāo)簽欄，宮格式布局和圖片視頻的瀑布流形式，花瓣網(wǎng)就是其中之一，比較方便適應(yīng)網(wǎng)頁寬度的不斷改變。移動(dòng)端中，目前這一方法我們會(huì)常用在折疊屏的適配中。如圖3.11，排行榜模塊在內(nèi)屏是以雙列展示，而在內(nèi)屏中則是因?yàn)閷挾仍黾樱枰獌?nèi)容填充頁面，而變成了三列。
以上就是主要的UI設(shè)計(jì)適配手段，總結(jié)一下：
我們也只是列舉幾個(gè)典型場(chǎng)景，實(shí)際業(yè)務(wù)場(chǎng)景是復(fù)雜的，需要注意多種手段相互配合使用。
以上就是關(guān)于移動(dòng)端UI設(shè)計(jì)適配的全部?jī)?nèi)容了。
感謝你的閱讀，希望對(duì)你的設(shè)計(jì)工作有所幫助。
作者：宋丹強(qiáng)
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @VMIC UED 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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
在現(xiàn)代移動(dòng)應(yīng)用設(shè)計(jì)中，「浮標(biāo)」按鈕（Floating Action Button）已成為一種常見的交互元素，它不僅提供便捷的功能入口，還能增強(qiáng)用戶體驗(yàn)。然而，設(shè)計(jì)一個(gè)有效的浮標(biāo)按鈕并非易事，需要綜合考慮功能定位、視覺效果、交互設(shè)計(jì)以及技術(shù)實(shí)現(xiàn)等多個(gè)方面。
今天分享的是「浮標(biāo)設(shè)計(jì)」。結(jié)合設(shè)計(jì)原則與“智能伴學(xué)助手”項(xiàng)目應(yīng)用浮標(biāo)實(shí)踐展開。
文章目錄如下：
在教育類移動(dòng)端中接入了大模型AI智能應(yīng)用，為保證這個(gè)應(yīng)用入口可長(zhǎng)期保持并隨時(shí)可見，提高使用率，為用戶提供便利。筆者通過“智能伴學(xué)助手”浮標(biāo)實(shí)踐應(yīng)用，對(duì)后續(xù)制作浮標(biāo)在界面設(shè)計(jì)中思考與探索。 浮標(biāo)的本質(zhì)與價(jià)值
作為界面中的「第三層空間」，浮標(biāo)通過視覺懸浮感打破平面限制 (如iOS的3D視差效果)；在信息過載時(shí)代，提供「隨時(shí)在場(chǎng)」的核心功能入口 (如美團(tuán)外賣的懸浮購(gòu)物車，左右動(dòng)效：進(jìn)縮)。
▲「第三層空間」并「隨時(shí)在場(chǎng)」，也是很好的廣告位和優(yōu)惠營(yíng)銷，一些浮標(biāo)的“小巧思”。
利用格式塔原則中的「閉合性」設(shè)計(jì)半透明遮罩，暗示可交互區(qū)域；通過菲茨定律優(yōu)化點(diǎn)擊熱區(qū)，圓形浮標(biāo)直徑建議≥48dp (Android規(guī)范)。
就項(xiàng)目中“智能伴學(xué)助手”為例，一個(gè)教育類的應(yīng)用入口，結(jié)合功能定位、用戶體驗(yàn)與技術(shù)實(shí)現(xiàn)浮標(biāo)在界面中的作用。
通常浮標(biāo)是一個(gè)懸浮的按鈕或圖標(biāo)，用于快速訪問某些功能，從多個(gè)維度探索其在移動(dòng)端界面中的合理呈現(xiàn)方式：
浮標(biāo)的設(shè)計(jì)規(guī)范：比如尺寸、顏色、位置。通用的設(shè)計(jì)規(guī)范，教學(xué)工具類App的界面設(shè)計(jì)，可能涉及圖標(biāo)和布局。
1）尺寸與網(wǎng)格系統(tǒng)
? 圖標(biāo)尺寸需適配不同屏幕分辨率，常見規(guī)范包括128x128px、96x96px、64x64px等，需根據(jù)界面層級(jí)選擇合適尺寸。
? 尺寸一般用1:1比較好或者成倍數(shù)，先做大再導(dǎo)出所需要的不同大小比例。
? 使用網(wǎng)格系統(tǒng) (如微軟Fluent的24px基礎(chǔ)網(wǎng)格) 確保視覺一致性，留出安全邊距（如2px內(nèi)邊距）避免元素溢出。
2）造型與風(fēng)格
? 遵循簡(jiǎn)約易懂原則，優(yōu)先采用象形圖或表意符號(hào)增強(qiáng)識(shí)別性。
? 保持系列圖標(biāo)風(fēng)格統(tǒng)一，包括線條粗細(xì) (建議1.5px)、圓角弧度 (微軟Fluent定義大/中/小三級(jí)圓角) 及視覺平衡。
3）適配性
? 導(dǎo)出格式需與開發(fā)協(xié)作，推薦PNG序列或SVGA文件以兼顧清晰度與性能。
? 自適應(yīng)考慮不同平臺(tái)的顯示情況。
核心功能聚合：語言學(xué)習(xí)工具類界面將高頻功能 (如首頁入口、作業(yè)評(píng)論、學(xué)習(xí)提問) 通過浮標(biāo)動(dòng)態(tài)整合，支持長(zhǎng)按展開二級(jí)菜單或滑動(dòng)切換功能模式，吸附于屏幕邊緣。
根據(jù)學(xué)習(xí)階段智能變化：
(外語語言口語學(xué)習(xí)一般模式：盲聽，然后根據(jù)自己的話復(fù)述，理解語言并有效使用語言)
▲ 首頁入口、作業(yè)評(píng)論、學(xué)習(xí)提問通過浮標(biāo)智能解答點(diǎn)評(píng)，通過二級(jí)頁面展開細(xì)則
以”智能伴學(xué)助手“為例，浮標(biāo)主色是藍(lán)色，企業(yè)主題色也是藍(lán)色，而”智能伴學(xué)助手“浮標(biāo)使用背景一般也以藍(lán)色為主，App主題色也是藍(lán)色，多場(chǎng)景使用適配藍(lán)色背景的靜態(tài)浮標(biāo)，又要使浮標(biāo)可以在背景中脫穎而出，在其過程中嘗試藍(lán)+藍(lán)搭配的存在局限性，本身藍(lán)色系較統(tǒng)一。
在同為藍(lán)色后，產(chǎn)生不同「空間」，通過將界面元素分層（如前景圖標(biāo)與背景圖像），營(yíng)造深度感。在浮標(biāo)進(jìn)行描邊隔層，現(xiàn)在很多表情包就是這種模式操作。
微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)計(jì)，強(qiáng)調(diào)了用戶需求分析、界面簡(jiǎn)潔和交互設(shè)計(jì)，這可能對(duì)浮標(biāo)的功能定位有幫助。智能伴學(xué)助手來浮標(biāo)快速訪問。
在不同背景下的浮標(biāo)呈現(xiàn)視覺形式，只要點(diǎn)擊即可進(jìn)入應(yīng)用。
思考與探索：
▲ 白色背景或者透明背景下的浮標(biāo)呈現(xiàn)，在不同頁面呈現(xiàn)一“系列”
▲ 藍(lán)色背景下或者在統(tǒng)一色系下浮標(biāo)視覺”糊“，可用白邊的形式將背景和浮標(biāo)的”空間“區(qū)分開
思考與探索：配色方案
1）主色選擇
明亮色系：如紅色、橙色、黃色等，能快速吸引用戶注意，適用于促銷活動(dòng)入口。
品牌色融合：在特殊場(chǎng)景中融入品牌LOGO或主色，代表企業(yè)形象和IP，增強(qiáng)品牌認(rèn)知。
2）色彩心理學(xué)應(yīng)用
藍(lán)色：傳遞信任感，適合金融或工具類應(yīng)用。
黑金/黑黃組合：營(yíng)造神秘或高端感，常見于娛樂或奢侈品領(lǐng)域。
紫色+粉紅：適用于美容、女性向產(chǎn)品，傳遞溫柔與創(chuàng)意。
控制色彩平衡，用戶色彩感官可適應(yīng)。
3）對(duì)比與背景
使用中性色（如米色、白色）作為背景，提升信息可讀性。
避免沖突色搭配（如藍(lán)色用于食品類浮標(biāo)易抑制食欲）。
思考與探索：個(gè)性化推薦和交互設(shè)計(jì)，可以結(jié)合AI預(yù)測(cè)用戶行為，動(dòng)態(tài)調(diào)整浮標(biāo)的出現(xiàn)時(shí)機(jī)，比如在需要提醒作業(yè)時(shí)顯示。主色選用品牌色（如教育藍(lán)/科技紫）強(qiáng)化識(shí)別性。
▲ 如何設(shè)計(jì)浮標(biāo)會(huì)更好？
創(chuàng)新交互模式思考探索：
1）壓力感知交互
? 安卓壓感屏實(shí)現(xiàn)「輕按預(yù)覽/重按觸發(fā)」分層交互(如華為懸浮球壓感菜單)；配合觸覺反饋(Haptic Engine)增強(qiáng)操作確認(rèn)感。
2）動(dòng)態(tài)語義變形
生物擬態(tài)動(dòng)畫：
? 呼吸感懸?。耗M水母游動(dòng)節(jié)奏（振幅0.5-1.2px，頻率0.8Hz） ；
? 點(diǎn)擊時(shí)觸發(fā)粒子擴(kuò)散動(dòng)畫（模擬知識(shí)傳遞意象）；
? 拖拽時(shí)產(chǎn)生彈性形變（阻尼系數(shù)0.6-0.8），邊緣碰撞后回彈。
根據(jù)場(chǎng)景智能改變形態(tài)：
? 閱讀類App中展開為「書簽浮標(biāo)+進(jìn)度條」復(fù)合控件 ；
? 音樂播放器浮標(biāo)可拉伸成波形可視化界面。
通過多模態(tài)反饋，聽覺，視覺，觸覺多種情感交互。
3） 空間布局策略
? 默認(rèn)位置：置于屏幕右下側(cè)（符合右手持機(jī)習(xí)慣），預(yù)留10%邊距防止誤觸；
? 智能避讓：通過內(nèi)容識(shí)別算法，在視頻播放或文本輸入時(shí)自動(dòng)偏移避開核心內(nèi)容區(qū)域；
? AR場(chǎng)景中的空間投影浮標(biāo)（如IKEA Place家具預(yù)覽浮窗）。
▲ 位置多為屏幕右下側(cè)
1）跨端一致性
? 使用React等框架封裝可復(fù)用浮標(biāo)組件，通過響應(yīng)式設(shè)計(jì)適配不同設(shè)備尺寸（如折疊屏展開態(tài)需重新計(jì)算定位錨點(diǎn)）；
? 采用SVGA格式實(shí)現(xiàn)高性能動(dòng)效，控制幀率在30fps以內(nèi)以降低功耗。
2）AI驅(qū)動(dòng)個(gè)性化
? 基于LSTM模型預(yù)測(cè)用戶行為： 檢測(cè)到長(zhǎng)時(shí)間未操作時(shí)，浮標(biāo)縮小并展示激勵(lì)標(biāo)語； 識(shí)別到錯(cuò)題高峰時(shí)段，主動(dòng)彈出知識(shí)點(diǎn)講解入口；
? 支持語音指令交互（如“浮標(biāo)移到左上角”）。
1）包容性設(shè)計(jì)
? 為色弱用戶提供高對(duì)比度模式 (浮標(biāo)輪廓增加動(dòng)態(tài)描邊，對(duì)比度≥4.5:1)；
? 支持頭部追蹤控制浮標(biāo)移動(dòng) (iOS Switch Control技術(shù)適配)。
2）防沉迷機(jī)制 (適合未成年類App)
? 連續(xù)使用1小時(shí)后，浮標(biāo)漸變灰色并觸發(fā)休息提醒；
? 家長(zhǎng)端可遠(yuǎn)程設(shè)置浮標(biāo)功能禁用時(shí)段。(未成年學(xué)習(xí)類工具考慮優(yōu)化)
1）多模態(tài)融合
? AR場(chǎng)景中浮標(biāo)投射為3D虛擬助手，支持手勢(shì)交互與空間定位；
? 結(jié)合眼動(dòng)追蹤技術(shù)，實(shí)現(xiàn)注視區(qū)域自動(dòng)呼出上下文菜單。
2）情感化表達(dá)
? 根據(jù)學(xué)習(xí)成就解鎖浮標(biāo)皮膚 (如連續(xù)打卡7天變?yōu)楠?jiǎng)杯形態(tài))；
? 錯(cuò)誤率過高時(shí)，浮標(biāo)呈現(xiàn)“鼓勵(lì)模式” (配色變暖+微震動(dòng)反饋)。
學(xué)習(xí)類智能伴學(xué)助手的浮標(biāo)既能作為高效的功能樞紐，又可成為情感化學(xué)習(xí)伴侶。實(shí)際落地時(shí)建議結(jié)合A/B測(cè)試持續(xù)優(yōu)化，例如對(duì)比分析「固定浮標(biāo)」與「場(chǎng)景自適應(yīng)浮標(biāo)」的點(diǎn)擊轉(zhuǎn)化率差異。
浮標(biāo)不應(yīng)僅是功能載體，更應(yīng)成為：
? 空間敘事者：通過動(dòng)態(tài)變化講述產(chǎn)品故事；
? 情感連接器：建立用戶與數(shù)字世界的溫度觸點(diǎn)；
? 場(chǎng)景預(yù)言家：預(yù)判需求并提供恰到好處的服務(wù)。
設(shè)計(jì)師需在「顯性價(jià)值」與「隱形干擾」間找到精妙平衡，讓浮標(biāo)成為提升體驗(yàn)的優(yōu)雅解決方案而非視覺負(fù)擔(dān)。未來可探索腦機(jī)接口的意念控制浮標(biāo)、量子動(dòng)畫渲染等突破性方向。
技術(shù)實(shí)現(xiàn)上，探究代碼示例展示了如何控制浮標(biāo)的移動(dòng)，確保不超出屏幕，這可以作為技術(shù)參考應(yīng)用實(shí)際案例中。同時(shí)性能優(yōu)化方面，使用SVGA格式或減少幀數(shù)，可能對(duì)動(dòng)效設(shè)計(jì)有幫助。
浮標(biāo)設(shè)計(jì)需要結(jié)合功能定位、用戶行為、視覺設(shè)計(jì)、交互體驗(yàn)和技術(shù)實(shí)現(xiàn)，可多進(jìn)行參考不同案例，搜索現(xiàn)有項(xiàng)目，對(duì)比借鑒然后對(duì)新型B端界面有所創(chuàng)新，確保既實(shí)用又不干擾用戶。
還可以利用Ai創(chuàng)新思維，設(shè)計(jì)師可以更快速、高效地生成多種設(shè)計(jì)方案，結(jié)合項(xiàng)目開發(fā)滿足消費(fèi)者對(duì)個(gè)性化、時(shí)尚化的需求。
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設(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)的軟件開發(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
本篇是關(guān)于圓角的UI設(shè)計(jì)知識(shí)分享，主要分為兩個(gè)部分，第一部分介紹圓角在UI設(shè)計(jì)中的作用，第二部分是關(guān)于在界面中容易被忽略的圓角設(shè)計(jì)細(xì)節(jié)。
視網(wǎng)膜中有塊區(qū)域叫做中央凹，是視覺最敏銳的區(qū)域。中央凹在處理圓形時(shí)速度最快，而在處理棱角邊緣時(shí)則需要調(diào)用大腦中更多的“神經(jīng)影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時(shí)速度越快。
多數(shù)情況，用戶使用App時(shí)在每個(gè)頁面的停留時(shí)間都比較有限，我們需要確保用戶在盡量短的時(shí)間內(nèi)高效獲取有效信息并完成相關(guān)操作，尤其對(duì)于工具類App來說更是如此。
另外，巴羅神經(jīng)學(xué)研究所對(duì)“角”的科學(xué)研究發(fā)現(xiàn)，角的突顯性感知與角的度數(shù)呈線性變化關(guān)系，銳角比圓角產(chǎn)生更強(qiáng)的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡(jiǎn)單的說就是，角越銳利，看起來就越突顯。而角出現(xiàn)的越凸顯，就越多地影響視覺的識(shí)別過程，導(dǎo)致識(shí)別變慢。
圓角具有其特殊的內(nèi)在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會(huì)引導(dǎo)人們的目光聚焦在圓角矩形或圓形內(nèi)部的內(nèi)容上面。
而尖角的外擴(kuò)性會(huì)導(dǎo)致視覺發(fā)散，不能使用戶的注意力在第一時(shí)間集中到容器中的內(nèi)容本身。因此，作為內(nèi)容載體，帶有圓角的容器具備較強(qiáng)的內(nèi)容引導(dǎo)性，能夠讓用戶更加快速的獲取內(nèi)容信息。
在我們長(zhǎng)久以來形成的心智認(rèn)知中，認(rèn)為尖銳的物品具有危險(xiǎn)性，而圓潤(rùn)的物品更加安全。帶有弧度，造型相對(duì)圓潤(rùn)的物品更有助于制造正面情緒，工業(yè)設(shè)計(jì)中常用圓潤(rùn)平滑的造型來增加產(chǎn)品傳遞給用戶的安全和舒適性。
對(duì)于互聯(lián)網(wǎng)產(chǎn)品，我們也存在相同的認(rèn)知，所以在界面設(shè)計(jì)中使用圓角圖形，也同樣可以帶給用戶正面情緒。
考慮到握持舒適度、安全性和生產(chǎn)工藝等原因，目前市面上多數(shù)的手機(jī)外觀和屏幕都是采用較大圓角的設(shè)計(jì)。隨著全面屏手機(jī)的興起，我們愈發(fā)能注意到從手機(jī)外型到內(nèi)部屏幕，圓角都是以一種嵌套的關(guān)系層層對(duì)應(yīng)的。
同樣的，為了遵循這種規(guī)律，同時(shí)延續(xù)從硬件到界面的設(shè)計(jì)語言，屏幕內(nèi)部界面中的圓角也是呈現(xiàn)出同樣的嵌套和對(duì)應(yīng)關(guān)系。
接下來，說說在UI設(shè)計(jì)中容易被忽略的兩點(diǎn)問題。
首先，我們來看一個(gè)對(duì)比示例，你能發(fā)現(xiàn)左側(cè)彈窗的設(shè)計(jì)細(xì)節(jié)問題嗎？左右兩個(gè)彈窗的不同之處僅在于按鈕的圓角半徑上，左側(cè)彈窗的設(shè)計(jì)問題就是出現(xiàn)在這里。
前文中我們提到過界面中容器與其內(nèi)部元素的圓角是存在的對(duì)應(yīng)關(guān)系的，但這個(gè)細(xì)節(jié)有時(shí)在設(shè)計(jì)過程中會(huì)被我們忽略，導(dǎo)致的結(jié)果就是界面的細(xì)節(jié)經(jīng)不起推敲，影響視覺的美觀舒適。
我們需要考慮如何去解決這個(gè)問題，如果僅僅是做一些個(gè)人練習(xí)或者單一獨(dú)立頁面，那么我們只須要在設(shè)計(jì)中注意這一點(diǎn)，通過觀察讓圓角在視覺上看起來對(duì)應(yīng)和諧即可。
但是如果你要去制定一套設(shè)計(jì)規(guī)范或在一個(gè)已經(jīng)成熟的產(chǎn)品中去進(jìn)行設(shè)計(jì)，我們就須要在保證視覺效果的前提下讓界面中的圓角參數(shù)更加嚴(yán)謹(jǐn)一些，以便于規(guī)范的使用人員了解參數(shù)為什么是這個(gè)，如何得到的？以及，后續(xù)遵從何種規(guī)則去進(jìn)行設(shè)計(jì)，來保證不同設(shè)計(jì)師產(chǎn)出標(biāo)準(zhǔn)的一致。
我們?cè)诰W(wǎng)上可以看到好多教程告訴你：外部容器圓角半徑 = 內(nèi)部元素的圓角半徑 + 二者間距
△圖片來源于網(wǎng)絡(luò)
但我認(rèn)為這種計(jì)算方式是有問題的，首先，多數(shù)情況下我們是根據(jù)外部容器來推導(dǎo)計(jì)算內(nèi)部元素圓角，而不是從內(nèi)向外，比如：iOS從手機(jī)屏幕→Dock欄→Dock欄中的圖標(biāo)都是存在圓角的對(duì)應(yīng)關(guān)系，我相信應(yīng)該不是先確定內(nèi)部圖標(biāo)的圓角再向外推導(dǎo)容器和屏幕圓角的。然后，如果我們向內(nèi)推導(dǎo)，這個(gè)計(jì)算公式就僅在一定條件下成立，因?yàn)樵诙唛g距大于外部容器圓角半徑的時(shí)候，內(nèi)部元素的圓角半徑就成了負(fù)數(shù)。
那么如何計(jì)算是相對(duì)嚴(yán)謹(jǐn)?shù)哪兀?/p>
我們從外向內(nèi)推導(dǎo)，在外部容器圓角固定的情況下，內(nèi)部元素的圓角半徑與它到外部容器的距離相關(guān)，在理想情況下：
內(nèi)部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距
但是，和前面提到過的問題一樣，以上的計(jì)算公式有一定的局限，比如在外部圓角很小的情況下，就無法去根據(jù)間距計(jì)算內(nèi)部的圓角參數(shù)。
對(duì)此，我推導(dǎo)出了一套當(dāng)存在圓角嵌套情況下，用于輔助定義圓角參數(shù)的規(guī)則：內(nèi)外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內(nèi)外卡片 (元素) 圓角差值越大，內(nèi)外卡片 (元素) 之間的間距取值范圍越靈活。
具體的推導(dǎo)過程如下：
1. 當(dāng)內(nèi)外卡片圓角差值等于卡片間距時(shí)，內(nèi)外圓角“完美”對(duì)應(yīng)。當(dāng)內(nèi)外卡片圓角差值大于卡片間距時(shí)，圓角部分出現(xiàn)明顯視覺問題；
2. 內(nèi)外圓角“完美”對(duì)應(yīng)卡片的圓角部分的間距看起來比直線位置要顯得略小，所以當(dāng)卡片間距不變，內(nèi)部圓角在一定范圍內(nèi)變大時(shí)，在視覺上內(nèi)外圓角仍然是可對(duì)應(yīng)的，但是當(dāng)內(nèi)部圓角過大時(shí)，則會(huì)出現(xiàn)問題。結(jié)合這兩步可得出結(jié)論a：內(nèi)外卡片圓角差值必須小于或等于卡片間距；
3. 根據(jù)步驟2，內(nèi)部卡片圓角略大于“完美”對(duì)應(yīng)圓角時(shí)，內(nèi)外卡片圓角也是能夠形成呼應(yīng)的；
4. 此時(shí)，在步驟3的基礎(chǔ)上，當(dāng)內(nèi)外卡片間距變大時(shí) (18px→34px)，左側(cè)示例圖的內(nèi)外圓角依然可以對(duì)應(yīng)，但是右側(cè)示例圖的內(nèi)部圓角看起來會(huì)過大，由此可得出結(jié)論b：在滿足規(guī)則a的條件下，內(nèi)外卡片圓角差值越大，內(nèi)外卡片之間的間距取值范圍越靈活；
下面來說第二個(gè)容易被忽略的問題，文字內(nèi)容到圓角容器的內(nèi)邊距。如果將容器內(nèi)的文字粗略看做一個(gè)矩形，那么結(jié)合前文中提到的內(nèi)外圓角對(duì)應(yīng)關(guān)系，文字到容器的內(nèi)邊距應(yīng)隨著容器圓角半徑的增加而增加；
另外一點(diǎn)，在我們?cè)黾尤萜鞯膱A角半徑后，導(dǎo)致容器內(nèi)部空間被壓縮，圓角半徑越大越明顯，我們也需要去調(diào)整內(nèi)邊距，以保證視覺上的透氣和呼吸感 。
最后，補(bǔ)充一點(diǎn)，在前面一張示例圖中我們可以看到，雖然我們通過調(diào)整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時(shí)，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據(jù)實(shí)際情況綜合考量，去定義圓角及內(nèi)容間距。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ynkmey.cn
