隨著體驗(yàn)設(shè)計(jì)的持續(xù)發(fā)展，行業(yè)內(nèi)各領(lǐng)域的體驗(yàn)設(shè)計(jì)質(zhì)量都有了很大的提升，并且各個(gè)競(jìng)品之間的差距越來越小。而更高的界面細(xì)節(jié)設(shè)計(jì)質(zhì)量不僅是各個(gè)大廠產(chǎn)品體驗(yàn)設(shè)計(jì)的追求，也是我們拉開競(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í)行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內(nèi)容和交互三個(gè)角度總結(jié)了十個(gè)界面細(xì)節(jié)設(shè)計(jì)點(diǎn)，希望可以幫助你遇到問題時(shí)另辟蹊徑，延伸更好的設(shè)計(jì)思路。

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

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

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

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

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

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

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

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

然鵝，我們有時(shí)會(huì)遇到一些不規(guī)則形狀圖標(biāo)，尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中，我們可以打開首選項(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)為了與頁面其他內(nèi)容邊距對(duì)齊，可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開發(fā)還原調(diào)整的工作量，提高工作效率。

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

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

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

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

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

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

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

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

而只有一張圖片或者視頻時(shí)，為了保證圖片和視頻的預(yù)覽效果，通常會(huì)做大尺寸的預(yù)覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿足要求，我們要根據(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裁剪出來；圖片寬高大于2:3并且小于3:2時(shí)可以按原圖比例預(yù)覽；而圖片寬高大于3:2時(shí)，把圖片中間區(qū)域按寬高3:2裁剪出來。另外要注意要給圖片設(shè)置最大高度，否則圖片高度太高會(huì)減少頁面信息承載量，降低閱讀效率，相應(yīng)的也要限制最大寬度，否則會(huì)使圖片規(guī)則不統(tǒng)一，從而頁面適配效果不協(xié)調(diào)。

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

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

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

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

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

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

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

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

為了滿足運(yùn)營的需要，我們有時(shí)會(huì)在多同級(jí)個(gè)圖標(biāo)或者按鈕中突出其中的一個(gè)。例如下圖的分享彈窗，想要在多個(gè)分享途徑中突出微信的圖標(biāo)，但同時(shí)又要保證圖標(biāo)風(fēng)格的一致性，這時(shí)就可以利用微動(dòng)效來達(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)效也讓頁面更活潑有靈性，不失為一舉多得的方案。

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

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

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

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