隨著體驗(yàn)設(shè)計(jì)的持續(xù)發(fā)展，行業(yè)內(nèi)各領(lǐng)域的體驗(yàn)設(shè)計(jì)質(zhì)量都有了很大的提升，并且各個(gè)競(jìng)品之間的差距越來(lái)越小。而更高的界面細(xì)節(jié)設(shè)計(jì)質(zhì)量不僅是各個(gè)大廠產(chǎn)品體驗(yàn)設(shè)計(jì)的追求，也是我們拉開(kāi)競(jìng)品差距的關(guān)鍵一環(huán)。我們平時(shí)可能閱讀了很多理論知識(shí)文章，但往往在實(shí)際工作中卻較少運(yùn)用。學(xué)習(xí)掌握理論基礎(chǔ)知識(shí)固然是很重要的，但在設(shè)計(jì)執(zhí)行時(shí)掌握設(shè)計(jì)技巧也更能提升工作的效率和質(zhì)量。那么在設(shè)計(jì)執(zhí)行層遇到問(wèn)題有沒(méi)有一些立竿見(jiàn)影的解決方案呢？本篇文章分別從視覺(jué)、內(nèi)容和交互三個(gè)角度總結(jié)了十個(gè)界面細(xì)節(jié)設(shè)計(jì)點(diǎn)，希望可以幫助你遇到問(wèn)題時(shí)另辟蹊徑，延伸更好的設(shè)計(jì)思路。

在封面和背景圖設(shè)計(jì)的場(chǎng)景中，我們?yōu)榱俗尫饷嫔系男畔⒛軌蚋菀卓辞澹ǔ?huì)在文字下添加一層黑色半透明或者漸變蒙層，但你有想過(guò)這個(gè)蒙層可以不止是黑色的嗎？

在設(shè)計(jì)社區(qū)話(huà)題詳情頂部背景圖時(shí)，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。當(dāng)用純黑色作為蒙層時(shí)淺色背景可能會(huì)顯得很臟，這時(shí)可以改用深灰色讓背景看起來(lái)不會(huì)太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來(lái)更加柔和。下圖左邊是用黑色#000000、30%不透明度，右邊是深灰#333333、30%不透明度。可以看出右邊方案的效果明顯更清爽一些。當(dāng)然更好的方案是通過(guò)客戶(hù)端拾取背景圖顏色后生成對(duì)應(yīng)色相的深色蒙層，但這個(gè)方案設(shè)計(jì)相對(duì)比較復(fù)雜。需要制定一系列拾色和生成對(duì)應(yīng)色值的規(guī)范，并且開(kāi)發(fā)成本偏高。有條件的話(huà)也可以考慮應(yīng)用。

界面中使用圓角設(shè)計(jì)更能讓用戶(hù)感到親和力和舒適感，所以運(yùn)用場(chǎng)景也非常廣泛。除了比較常見(jiàn)的封面、卡片、按鈕等等圓角的使用場(chǎng)景，在一些細(xì)節(jié)的處理運(yùn)用圓角也能提升設(shè)計(jì)品質(zhì)。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運(yùn)用常規(guī)的切割邊角就比較尖銳，會(huì)略顯生硬。

而添加了圓角處理后視覺(jué)上會(huì)更加柔和更協(xié)調(diào)，對(duì)比一下前后的方案不難發(fā)現(xiàn)圓角的效果更勝一籌。不要看只是一點(diǎn)很小的細(xì)節(jié)，其實(shí)也體現(xiàn)了設(shè)計(jì)師對(duì)細(xì)節(jié)的細(xì)心追求，用戶(hù)看了也會(huì)體會(huì)到設(shè)計(jì)師的用心。

另外再介紹一下我個(gè)人在sketch中快速繪制這類(lèi)圓角銜接的方法。以下圖為例，首先頭像的圓形描邊需要單獨(dú)畫(huà)一個(gè)白色的圓形圖層，而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設(shè)為聯(lián)集，再將圖層路徑合并。然后在兩個(gè)銜接處的兩邊各添加一個(gè)錨點(diǎn)，注意兩個(gè)錨點(diǎn)和銜接點(diǎn)的距離一定要相等，這個(gè)距離決定了圓角的大小，可以根據(jù)需要來(lái)調(diào)整。之后把銜接點(diǎn)的錨點(diǎn)類(lèi)型改為“筆直”，再給這個(gè)錨點(diǎn)添加圓角半徑。這樣銜接點(diǎn)的圓角繪制就完成啦。另外運(yùn)用布爾運(yùn)算來(lái)畫(huà)出圓角也是可以的，具體方法可以根據(jù)個(gè)人習(xí)慣來(lái)選擇。

我們?cè)陧?yè)面取色時(shí)經(jīng)常會(huì)給背景色和陰影等結(jié)合場(chǎng)景帶有一些顏色傾向，以達(dá)到更舒適的視覺(jué)效果，其實(shí)這個(gè)方法也適用于文字。為了提升效率，我們習(xí)慣了在選擇字色時(shí)使用一套設(shè)計(jì)規(guī)范里的顏色，比如#333333、#999999等等。但是個(gè)別的特殊模塊我們是可以根據(jù)實(shí)際情況調(diào)整以獲得更好的視覺(jué)效果的。比如下面這個(gè)案例是一個(gè)熱帖榜單的入口模塊，為了提高信息層級(jí)讓頁(yè)面更有活力，這里選擇用淺黃色作為背景。如果使用規(guī)范的字色與背景的結(jié)合會(huì)相對(duì)不太協(xié)調(diào)，這里選擇字色時(shí)就可以讓文字顏色和背景顏色帶有相同的色相，選用高飽和度低明度的顏色，并且次級(jí)信息同時(shí)可以帶一點(diǎn)不透明度。讓整個(gè)模塊視覺(jué)更統(tǒng)一，信息與背景更融合。

類(lèi)似這樣的場(chǎng)景其實(shí)還有很多，有時(shí)我們也不必拘泥于設(shè)計(jì)規(guī)范中，適當(dāng)?shù)母鶕?jù)模塊定制化一些細(xì)節(jié)可以達(dá)到更好的視覺(jué)效果。

我們經(jīng)常會(huì)遇到一個(gè)頁(yè)面中有多個(gè)同級(jí)圖標(biāo)排列的情況，不管是用宮格排列或是列表排列都需要每個(gè)圖標(biāo)整齊有序、尺寸統(tǒng)一。但實(shí)際情況下不可能每個(gè)圖標(biāo)尺寸都完全統(tǒng)一。一般這種情況我們可以給每個(gè)圖標(biāo)統(tǒng)一添加一個(gè)相同尺寸的矩形圖層作為背景板，將背景板隱藏后再整體編組，這樣一來(lái)就能保證每個(gè)圖標(biāo)所在的組都是相同的尺寸就能統(tǒng)一對(duì)齊了。

然鵝，我們有時(shí)會(huì)遇到一些不規(guī)則形狀圖標(biāo)，尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中，我們可以打開(kāi)首選項(xiàng)中的圖層項(xiàng)，關(guān)閉契合像素功能，然后可以拖動(dòng)圖標(biāo)或者用對(duì)齊功能讓圖標(biāo)與背景板對(duì)齊。不要忽略這一兩個(gè)像素的差別，這些微小的細(xì)節(jié)往往決定了界面設(shè)計(jì)的嚴(yán)謹(jǐn)和精致程度。

另外，我們可以根據(jù)情況靈活調(diào)整圖標(biāo)在背景板中的位置，例如左右箭頭圖標(biāo)為了與頁(yè)面其他內(nèi)容邊距對(duì)齊，可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開(kāi)發(fā)還原調(diào)整的工作量，提高工作效率。

標(biāo)題信息在界面設(shè)計(jì)中使用頻率非常高，而在設(shè)計(jì)過(guò)程中我們可能會(huì)忽略極限字?jǐn)?shù)的情況，導(dǎo)致開(kāi)發(fā)還原時(shí)實(shí)際效果不理想。下面以一個(gè)案例來(lái)分享一下標(biāo)題極限值的處理方法。

在騰訊動(dòng)漫社區(qū)改版中設(shè)計(jì)話(huà)題詳情頁(yè)的標(biāo)題時(shí)，產(chǎn)品規(guī)劃標(biāo)題的字?jǐn)?shù)為12個(gè)字符，在右邊有看漫畫(huà)按鈕的情況下是顯示不完全的。這個(gè)情況就要考慮設(shè)計(jì)極限值的顯示方案。常規(guī)的方案有：1、顯示不完全時(shí)后面顯示“...”；2、換行顯示。考慮到詳情頁(yè)需要將標(biāo)題完全展示，所以方案一不可行。而方案二在單行和雙行兩種情況下視覺(jué)效果不好統(tǒng)一。最終經(jīng)過(guò)思考決定使用方案三：標(biāo)題顯示不全時(shí)左右滾動(dòng)展示，可以在保證視覺(jué)統(tǒng)一同時(shí)顯示完整的標(biāo)題。

同樣的，在很多情況下我們由于空間受限無(wú)法展示完整信息時(shí)，這個(gè)方案也不失為一個(gè)很好的選擇。

在頁(yè)面設(shè)計(jì)工作中我們有時(shí)會(huì)遇到信息容器邊界固定，而容器內(nèi)信息可以滑動(dòng)的情況。例如下圖中頂部導(dǎo)航和音樂(lè)播放的歌詞頁(yè)面，這種場(chǎng)景下一般容器邊界不會(huì)做明顯的界限，如果內(nèi)容在邊界處是直接被裁切的話(huà)體驗(yàn)的感受就會(huì)比較割裂。我們可以嘗試更好的解決方案，在容器邊界增加漸變過(guò)渡，這樣信息在邊緣的過(guò)渡就變得柔和，頁(yè)面整體更協(xié)調(diào)。

這種漸變的過(guò)渡的應(yīng)用場(chǎng)景還有很多，比如瀏覽簡(jiǎn)介或者文章時(shí)，需要隱藏部分內(nèi)容并提供展開(kāi)閱讀全文的操作。利用漸變過(guò)渡也能隱喻還有未完全展示的內(nèi)容，降低用戶(hù)的理解成本并且也能夠讓用戶(hù)有心理預(yù)期。

另外在sketch上呈現(xiàn)這種漸變過(guò)渡也很方便，如果背景是純色的話(huà)可以在邊界處添加一個(gè)與背景色相同顏色的色塊，然后給色塊添加添加不透明度從0～100的漸變，這個(gè)方法比較簡(jiǎn)單。如果遇到背景復(fù)雜的情況，也可以繪制一個(gè)和容器相同大小的矩形，在矩形邊緣添加不透明度從0～100的漸變，然后建立蒙版把信息剪切到矩形中。

至于開(kāi)發(fā)實(shí)現(xiàn)的方案還是要和開(kāi)發(fā)哥哥具體溝通，確保用最便捷的方案還原出最好的效果。

動(dòng)態(tài)流是我們非常常見(jiàn)的樣式，是分發(fā)用戶(hù)生產(chǎn)內(nèi)容的主要載體之一。主要包含了用戶(hù)信息、文字、圖片和視頻等內(nèi)容。一般情況支持九張圖片或一個(gè)視頻，在有多張圖片時(shí)，可以如下圖做成宮格的樣式適配，每張圖片截取中間的正方形部分。

而只有一張圖片或者視頻時(shí)，為了保證圖片和視頻的預(yù)覽效果，通常會(huì)做大尺寸的預(yù)覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿(mǎn)足要求，我們要根據(jù)這個(gè)情況做單獨(dú)的適配方案。首先我們要設(shè)定一個(gè)裁切的比例，比如我們?nèi)∝Q圖最小裁剪寬高比為2:3，橫圖最大裁剪寬高比為3:2（這里的寬高比并不是固定的，可以根據(jù)實(shí)際需要自己定義比例，采用4:3、16:9等比例都是可以的）。這樣當(dāng)圖片寬高比小于2:3時(shí)，我們可以把圖片中間區(qū)域按寬高2:3裁剪出來(lái)；圖片寬高大于2:3并且小于3:2時(shí)可以按原圖比例預(yù)覽；而圖片寬高大于3:2時(shí)，把圖片中間區(qū)域按寬高3:2裁剪出來(lái)。另外要注意要給圖片設(shè)置最大高度，否則圖片高度太高會(huì)減少頁(yè)面信息承載量，降低閱讀效率，相應(yīng)的也要限制最大寬度，否則會(huì)使圖片規(guī)則不統(tǒng)一，從而頁(yè)面適配效果不協(xié)調(diào)。

同樣的，這個(gè)規(guī)則也適用于視頻，由于全面屏手機(jī)占比越來(lái)越高，這些手機(jī)拍攝的視頻大多是19:9、20:9的寬高比例，相比視頻常用的16:9的比例更加細(xì)長(zhǎng)，所以橫屏視頻可以統(tǒng)一裁剪為16:9比例，而豎屏視頻可以裁剪為9:16比例。

動(dòng)態(tài)流圖片適配的核心是制定一個(gè)適配的規(guī)范來(lái)保證閱讀的舒適度和效率。而這個(gè)規(guī)范并不是恒定的，可以根據(jù)自身平臺(tái)需要來(lái)制定，以上僅作為一個(gè)示例供參考哦。

隨著沉浸式設(shè)計(jì)的趨勢(shì)，很多頁(yè)面會(huì)采用無(wú)標(biāo)題欄的設(shè)計(jì)。例如下圖的個(gè)人中心頁(yè)面，頂部利用背景圖來(lái)渲染品牌氛圍。但是這類(lèi)無(wú)標(biāo)題欄頁(yè)面的上滑交互普遍有個(gè)缺陷，就是如果未經(jīng)處理上滑后內(nèi)容會(huì)與頂部電池條者是置頂?shù)陌粹o位置重疊。這種類(lèi)似“穿幫”的情況給用戶(hù)的體驗(yàn)就是設(shè)計(jì)處理不夠嚴(yán)謹(jǐn)。然而這種交互細(xì)節(jié)也是可以?xún)?yōu)化改善的。

優(yōu)化的原理也很簡(jiǎn)單，就是在上滑過(guò)程中添加一個(gè)標(biāo)題欄來(lái)分割頁(yè)面內(nèi)容，從而讓內(nèi)容和頂部元素不重疊。標(biāo)題欄可以隨上滑高度改變不透明度，以達(dá)到柔和的過(guò)渡從而實(shí)現(xiàn)絲滑的交互體驗(yàn)。

類(lèi)似的處理方案在各大平臺(tái)也有較為廣泛的應(yīng)用。

在用戶(hù)體驗(yàn)發(fā)展的趨勢(shì)中，無(wú)論是交互的反饋或者是圖片、信息等都趨于由靜態(tài)向動(dòng)態(tài)發(fā)展。常規(guī)的靜態(tài)圖片承載的信息相對(duì)有限，所以在有限的載體內(nèi)讓內(nèi)容動(dòng)起來(lái)展示更大的信息量不失為一個(gè)很好的選擇。

在舊版本的iOS12系統(tǒng)中有一個(gè)視圖選擇的功能，用戶(hù)在這個(gè)頁(yè)面可以選擇標(biāo)準(zhǔn)視圖和放大視圖，并且有三張圖可以滑動(dòng)展示不同場(chǎng)景下兩個(gè)選項(xiàng)的差異，但是這個(gè)方案需要來(lái)回切換標(biāo)簽和滑動(dòng)圖片來(lái)對(duì)比差異，效率很低。而在之后改版的iOS13系統(tǒng)中，這三張靜態(tài)圖被替換成了兩張動(dòng)圖，輪流切換三個(gè)場(chǎng)景的頁(yè)面，用戶(hù)不需要再滑動(dòng)圖片就能更加直觀的對(duì)比兩個(gè)選項(xiàng)的差異。這個(gè)小改動(dòng)不僅可以讓圖片展示更多的信息，還能減少用戶(hù)的操作成本提升操作上的體驗(yàn)，讓閱讀效率更高。

類(lèi)似的延展應(yīng)用場(chǎng)景也有很多，例如新功能引導(dǎo)動(dòng)畫(huà)、動(dòng)態(tài)banner等等。其實(shí)原理都是一樣的，在常規(guī)靜態(tài)圖的基礎(chǔ)上優(yōu)化為動(dòng)態(tài)圖，不僅能增加信息的承載量，提高閱讀效率，也能讓頁(yè)面更有活力。

為了滿(mǎn)足運(yùn)營(yíng)的需要，我們有時(shí)會(huì)在多同級(jí)個(gè)圖標(biāo)或者按鈕中突出其中的一個(gè)。例如下圖的分享彈窗，想要在多個(gè)分享途徑中突出微信的圖標(biāo)，但同時(shí)又要保證圖標(biāo)風(fēng)格的一致性，這時(shí)就可以利用微動(dòng)效來(lái)達(dá)到強(qiáng)調(diào)的效果。

而微動(dòng)效的落地形勢(shì)也有很多種，下面拋磚引玉介紹幾種簡(jiǎn)單高效的方案。

可以看到添加了微動(dòng)效后不僅可以達(dá)到強(qiáng)調(diào)某一個(gè)對(duì)象的目的，同時(shí)也能保證每個(gè)圖標(biāo)風(fēng)格的統(tǒng)一，微動(dòng)效也讓頁(yè)面更活潑有靈性，不失為一舉多得的方案。

微動(dòng)效的形勢(shì)當(dāng)然不局限于上面幾種，大家也可以發(fā)散思維，創(chuàng)造更多有創(chuàng)意的方案。

文章來(lái)源：站酷   作者：騰訊動(dòng)漫TCD
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(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ì)( m.wtxcl.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)